From e10273f4442d01b105deea91c8e7f543a979ae42 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 28 Oct 2026 14:11:23 +0200
Subject: [PATCH 1/2] feat(target-react): emit cross-file types and generics

React's output imports the types its source imports by name, from a
`.ts` module or a package as written and from a child's output, and the
main component's output writes the module's type exports in source
order (ADR-0067, ADR-0068). A generic component is a generic function
component, and the events', models' and slots' interfaces whose members
name a type parameter take it too. A form control bound to a model of
such a type casts its string value to it.

The types and generics cases pass every live layer on React, with
consumer fixtures for each, so React's quarantine is empty again and
its test helpers read these cases. The canary injector also finds the
body of a generic function component.

Co-authored-by: multica-agent <github@multica.ai>
---
 packages/target-react/README.md               |  10 ++
 packages/target-react/src/compose.ts          |  19 ++-
 packages/target-react/src/index.ts            | 109 +++++++++++++++++-
 .../target-react/test/composition.test.ts     |  47 ++++++++
 packages/target-react/test/fixtures.ts        |  11 +-
 .../__output__/react/Options.tsx              |   6 +-
 .../constrained/__output__/react/Table.tsx    |   2 +-
 .../generics/list/__output__/react/List.tsx   |   2 +-
 .../scoped-slot/__output__/react/Picker.tsx   |   6 +-
 .../select/__output__/react/Select.tsx        |  10 +-
 .../__output__/react/Form.tsx                 |   2 +-
 .../__output__/react/Button.tsx               |   2 +
 .../extends-chain/__output__/react/Button.tsx |   1 +
 .../__output__/react/Badge.tsx                |   1 +
 .../__output__/react/Chip.tsx                 |   1 +
 .../package-types/__output__/react/Status.tsx |   2 +
 .../shared-type/__output__/react/Palette.tsx  |   3 +
 .../shared-type/__output__/react/Swatch.tsx   |   1 +
 .../__output__/react/TextField.tsx            |   1 +
 tests/integration/harness/canaries.ts         |  17 ++-
 .../integration/harness/canaries.unit.test.ts |  12 ++
 tests/integration/harness/quarantine/react.ts |  35 +-----
 .../generics/constrained/Consumer.tsx         |   5 +
 .../generics/constrained/MisuseProp.tsx       |   6 +
 .../consumers/generics/list/Consumer.tsx      |   5 +
 .../consumers/generics/list/MisuseProp.tsx    |   6 +
 .../generics/scoped-slot/Consumer.tsx         |   6 +
 .../generics/scoped-slot/MisuseSlot.tsx       |   7 ++
 .../consumers/generics/select/Consumer.tsx    |   8 ++
 .../consumers/generics/select/MisuseModel.tsx |   9 ++
 .../types/child-type-import/Consumer.tsx      |   7 ++
 .../types/child-type-import/MisuseProp.tsx    |   6 +
 .../types/child-type-import/MisuseType.tsx    |   9 ++
 .../types/exported-types/Consumer.tsx         |  10 ++
 .../types/exported-types/MisuseProp.tsx       |   6 +
 .../types/exported-types/MisuseType.tsx       |  12 ++
 .../types/extends-chain/Consumer.tsx          |   5 +
 .../types/extends-chain/MisuseProp.tsx        |   6 +
 .../types/imported-interface/Consumer.tsx     |   5 +
 .../types/imported-interface/MisuseProp.tsx   |   6 +
 .../types/intersection-props/Consumer.tsx     |   5 +
 .../types/intersection-props/MisuseProp.tsx   |   6 +
 .../types/package-types/Consumer.tsx          |   5 +
 .../types/package-types/MisuseProp.tsx        |   6 +
 .../consumers/types/shared-type/Consumer.tsx  |   8 ++
 .../types/shared-type/MisuseProp.tsx          |   6 +
 .../types/shared-type/MisuseType.tsx          |   9 ++
 .../types/utility-types/Consumer.tsx          |   8 ++
 .../types/utility-types/MisuseProp.tsx        |   6 +
 .../types/utility-types/MisuseType.tsx        |   9 ++
 50 files changed, 427 insertions(+), 65 deletions(-)
 create mode 100644 tests/toolchains/react/consumers/generics/constrained/Consumer.tsx
 create mode 100644 tests/toolchains/react/consumers/generics/constrained/MisuseProp.tsx
 create mode 100644 tests/toolchains/react/consumers/generics/list/Consumer.tsx
 create mode 100644 tests/toolchains/react/consumers/generics/list/MisuseProp.tsx
 create mode 100644 tests/toolchains/react/consumers/generics/scoped-slot/Consumer.tsx
 create mode 100644 tests/toolchains/react/consumers/generics/scoped-slot/MisuseSlot.tsx
 create mode 100644 tests/toolchains/react/consumers/generics/select/Consumer.tsx
 create mode 100644 tests/toolchains/react/consumers/generics/select/MisuseModel.tsx
 create mode 100644 tests/toolchains/react/consumers/types/child-type-import/Consumer.tsx
 create mode 100644 tests/toolchains/react/consumers/types/child-type-import/MisuseProp.tsx
 create mode 100644 tests/toolchains/react/consumers/types/child-type-import/MisuseType.tsx
 create mode 100644 tests/toolchains/react/consumers/types/exported-types/Consumer.tsx
 create mode 100644 tests/toolchains/react/consumers/types/exported-types/MisuseProp.tsx
 create mode 100644 tests/toolchains/react/consumers/types/exported-types/MisuseType.tsx
 create mode 100644 tests/toolchains/react/consumers/types/extends-chain/Consumer.tsx
 create mode 100644 tests/toolchains/react/consumers/types/extends-chain/MisuseProp.tsx
 create mode 100644 tests/toolchains/react/consumers/types/imported-interface/Consumer.tsx
 create mode 100644 tests/toolchains/react/consumers/types/imported-interface/MisuseProp.tsx
 create mode 100644 tests/toolchains/react/consumers/types/intersection-props/Consumer.tsx
 create mode 100644 tests/toolchains/react/consumers/types/intersection-props/MisuseProp.tsx
 create mode 100644 tests/toolchains/react/consumers/types/package-types/Consumer.tsx
 create mode 100644 tests/toolchains/react/consumers/types/package-types/MisuseProp.tsx
 create mode 100644 tests/toolchains/react/consumers/types/shared-type/Consumer.tsx
 create mode 100644 tests/toolchains/react/consumers/types/shared-type/MisuseProp.tsx
 create mode 100644 tests/toolchains/react/consumers/types/shared-type/MisuseType.tsx
 create mode 100644 tests/toolchains/react/consumers/types/utility-types/Consumer.tsx
 create mode 100644 tests/toolchains/react/consumers/types/utility-types/MisuseProp.tsx
 create mode 100644 tests/toolchains/react/consumers/types/utility-types/MisuseType.tsx

diff --git a/packages/target-react/README.md b/packages/target-react/README.md
index b44b6a903..801d93292 100644
--- a/packages/target-react/README.md
+++ b/packages/target-react/README.md
@@ -10,6 +10,16 @@ component, written as a React developer would write it (plan §6):
   name that is `_` and more, and takes `_` before any other: `_props`, `__`): unused bindings
   fail L5. A component whose root is an element or a component, and that keeps fallthrough on,
   also takes `className` and `style` (see Composition below).
+- the types the source imports, by name, where the output reads them (ADR-0067): from a `.ts`
+  module or a package as written, `import type { BadgeProps } from "./types"`, and from a
+  child's output, `import Field, { type FieldProps } from "./Field"`. The output of the module's
+  main component also writes the module's type exports in source order among its types (ADR-0068):
+  `export type { Tone } from "./types"`, and an exported type no component reaches.
+- a generic component as a generic function component (ADR-0068),
+  `export default function List<T>({ items }: ListProps<T> & ListAttributes)`, its constraints
+  and defaults as written. The events', models' and slots' interfaces whose members name a type
+  parameter take them too (`ListSlots<T>`), and a form control's `v-model` of such a type casts
+  the control's string to it (`event.target.value as T`).
 - expressions as the source writes them, a ref's value read as React's (`count.value` is
   `count`); conditionals as ternary chains ending in `null` (never `&&`, which renders a `0`);
   lists as `.map((item, index) => <li key={…}>…)`, with the index only when something reads it;
diff --git a/packages/target-react/src/compose.ts b/packages/target-react/src/compose.ts
index cb8ba4077..55a60de58 100644
--- a/packages/target-react/src/compose.ts
+++ b/packages/target-react/src/compose.ts
@@ -13,6 +13,7 @@ import {
   jsxFillValue,
   pascalCase,
   rewriteExpression,
+  typeNames,
 } from "@unframework/codegen";
 import type { JsxContext } from "@unframework/codegen";
 import type {
@@ -250,7 +251,7 @@ export class ReactComposer {
         case "textarea":
         case "select":
           state = ["value", shown];
-          written = "EVENT.target.value";
+          written = `EVENT.target.value${this.#cast(binding)}`;
           break;
         default:
           return control satisfies never;
@@ -271,6 +272,22 @@ export class ReactComposer {
     return parts;
   }
 
+  /**
+   * ` as T` where a state's or a model's declared type names a type parameter of a generic
+   * component (ADR-0068): the control's value is a `string`, which TypeScript cannot narrow to
+   * the type argument. Nothing otherwise.
+   */
+  #cast(binding: BindingId): string {
+    const { component } = this.#plan;
+    const item = component.setup.find(
+      (entry) => (entry.kind === "State" || entry.kind === "Model") && entry.binding === binding,
+    );
+    const type = item && "type" in item ? item.type : undefined;
+    if (!type || !component.typeParameters?.length) return "";
+    const read = typeNames(type);
+    return component.typeParameters.some(({ name }) => read.has(name)) ? ` as ${type.code}` : "";
+  }
+
   /** Whether a state or a model may hold `null` or `undefined`, as its declaration says. */
   #nullish(binding: BindingId): boolean {
     const item = this.#plan.component.setup.find(
diff --git a/packages/target-react/src/index.ts b/packages/target-react/src/index.ts
index f0dde08bc..19185f406 100644
--- a/packages/target-react/src/index.ts
+++ b/packages/target-react/src/index.ts
@@ -1,4 +1,5 @@
 import {
+  addTypeImports,
   bindingOf,
   componentTypes,
   composableUse,
@@ -12,6 +13,8 @@ import {
   printComponentModule,
   printExpression,
   spreadStyleExpression,
+  typeExportsCode,
+  typeNames,
 } from "@unframework/codegen";
 import type { EmitContext, JsxContext, OutputFile, Target } from "@unframework/codegen";
 import type {
@@ -29,7 +32,10 @@ import type {
   StyleAttribute,
   TextNode,
   TypeDeclaration,
+  TypeParameter,
+  TypeText,
   UfComponent,
+  UfModule,
 } from "@unframework/ir";
 
 import { compilerBailout, declaredNames } from "./bailouts.ts";
@@ -56,6 +62,7 @@ import { titleChildren } from "./title.ts";
 
 type Parameter = Parameters<typeof js.functionDeclaration>[1][number];
 type BindingProperty = ReturnType<typeof js.bindingProperty>;
+type TypeParameters = ReturnType<typeof js.functionDeclaration>["typeParameters"];
 
 /** The React 19 target. */
 export const react: Target = defineTarget({
@@ -246,11 +253,15 @@ export const react: Target = defineTarget({
       ...statements,
       js.returnStatement(tree),
     ]);
+    fn.typeParameters = typeParameters(component, jsx);
     const hoisted = [...keyDeclarations(plan), ...setup.module].map((statement) =>
       jsx.placeholders.statements(`${statement}\n`),
     );
+    // The types it imports, by name, from where the source imports them, a child's from its
+    // output (`./Field`), and the module's type exports (ADR-0067, ADR-0068).
+    addTypeImports(component, module, plan.names, (name) => name);
     const types = [
-      ...componentTypes(component, module),
+      ...moduleTypes(component, module),
       ...eventsInterface(plan),
       ...compositionInterfaces(plan),
     ];
@@ -302,6 +313,45 @@ export const react: Target = defineTarget({
   },
 });
 
+/**
+ * The types the output declares before the component, in source order: those its props reach,
+ * copied as written, and in the output of the module's main component the module's type exports
+ * (ADR-0068), each written as its own declaration.
+ */
+function moduleTypes(component: UfComponent, module: UfModule): TypeDeclaration[] {
+  const exported = typeExportsCode(component, module, (name) => name).map(({ code, span }) => ({
+    name: "",
+    exported: false,
+    code,
+    span,
+  }));
+  return [...componentTypes(component, module), ...exported].toSorted(
+    (a, b) => a.span.start - b.span.start,
+  );
+}
+
+/**
+ * A generic component's type parameters, `function List<T extends Item = Item>` (ADR-0068): a
+ * generic function component, its constraints and defaults copied as written. `null` for a
+ * component without them.
+ */
+function typeParameters(component: UfComponent, context: JsxContext): TypeParameters {
+  if (!component.typeParameters?.length) return null;
+  const type = (text: TypeText | undefined) => (text ? context.placeholders.type(text.code) : null);
+  const params = component.typeParameters.map((parameter) => ({
+    type: "TSTypeParameter" as const,
+    name: js.bindingIdentifier(parameter.name),
+    constraint: type(parameter.constraint),
+    default: type(parameter.default),
+    in: false,
+    out: false,
+    const: false,
+    start: 0,
+    end: 0,
+  }));
+  return { type: "TSTypeParameterDeclaration", params, start: 0, end: 0 };
+}
+
 /**
  * The children's outputs and the keys' (ADR-0053, ADR-0054): each is the sibling file its
  * component names (`./Field`), imported as the source imports it. A component that renders
@@ -465,11 +515,12 @@ function compositionInterfaces(plan: ReactPlan): TypeDeclaration[] {
   const { composition, component } = plan;
   const type = (name: string) => plan.names.add("react", name, { type: true });
   const declarations: TypeDeclaration[] = [];
-  const declare = (name: string, members: string[]) => {
-    const text = `interface ${name} {\n${members.map((member) => `  ${member}`).join("\n")}\n}`;
+  const declare = (name: string, members: string[], parameters = "") => {
+    const text = `interface ${name}${parameters} {\n${members.map((member) => `  ${member}`).join("\n")}\n}`;
     declarations.push({ name, exported: true, code: text, span: component.span });
   };
   const { interfaces } = composition;
+  const generic = interfaceParameters(plan);
   if (interfaces.models) {
     declare(
       interfaces.models,
@@ -482,6 +533,7 @@ function compositionInterfaces(plan: ReactPlan): TypeDeclaration[] {
           `${event}?: (${PARAMETER}: ${written}) => void;`,
         ];
       }),
+      generic.models?.declared,
     );
   }
   if (interfaces.slots) {
@@ -493,6 +545,7 @@ function compositionInterfaces(plan: ReactPlan): TypeDeclaration[] {
           ? `${slotProp(slot.name, true)}?: (props: ${slot.props.code}) => ${node};`
           : `${slotProp(slot.name, false)}?: ${node};`,
       ),
+      generic.slots?.declared,
     );
   }
   if (composition.expose && component.exposes) {
@@ -618,10 +671,49 @@ function eventsInterface(plan: ReactPlan): TypeDeclaration[] {
       .join(", ");
     return `  ${plan.events.get(event.name)!.prop}?: (${parameters}) => void;`;
   });
-  const code = `interface ${plan.eventsInterface} {\n${members.join("\n")}\n}`;
+  const parameters = interfaceParameters(plan).events?.declared ?? "";
+  const code = `interface ${plan.eventsInterface}${parameters} {\n${members.join("\n")}\n}`;
   return [{ name: plan.eventsInterface, exported: true, code, span: emits.span }];
 }
 
+/**
+ * The type parameters of the interfaces the output declares for its events, models and slots
+ * (ADR-0068): where a generic component's members name one of its type parameters, the interface
+ * takes them all, declared as the component declares them (`<T extends string>`) and passed by
+ * name (`<T>`).
+ */
+function interfaceParameters(
+  plan: ReactPlan,
+): Partial<Record<"events" | "models" | "slots", { declared: string; passed: string }>> {
+  const { component, composition } = plan;
+  const parameters = component.typeParameters ?? [];
+  if (!parameters.length) return {};
+  const written = {
+    declared: `<${parameters.map(typeParameterText).join(", ")}>`,
+    passed: `<${parameters.map(({ name }) => name).join(", ")}>`,
+  };
+  const names = (texts: readonly (TypeText | undefined)[]) =>
+    texts.some((text) => {
+      const read = text ? typeNames(text) : new Set<string>();
+      return parameters.some(({ name }) => read.has(name));
+    })
+      ? written
+      : undefined;
+  return {
+    events: names(
+      component.emits?.events.flatMap((event) => event.parameters.map(({ type }) => type)) ?? [],
+    ),
+    models: names([...composition.models.values()].map(({ item }) => item.type)),
+    slots: names(component.slots?.slots.map((slot) => slot.props) ?? []),
+  };
+}
+
+/** A type parameter as its component declares it, `T extends Item = Item` (ADR-0068). */
+function typeParameterText(parameter: TypeParameter): string {
+  const constraint = parameter.constraint ? ` extends ${parameter.constraint.code}` : "";
+  return `${parameter.name}${constraint}${parameter.default ? ` = ${parameter.default.code}` : ""}`;
+}
+
 /**
  * The component's parameters, as the source declares its props (ADR-0034): the destructured
  * props in source order, with their defaults, then the events' props that code emits (ADR-0047), or
@@ -637,7 +729,14 @@ function propsParameters(
   const parameter = component.propsParameter;
   const { names, composition } = plan;
   const { slots, models, attributes } = composition.interfaces;
-  const typeCode = [parameter?.type.code, plan.eventsInterface, models, slots, attributes]
+  const generic = interfaceParameters(plan);
+  const typeCode = [
+    parameter?.type.code,
+    plan.eventsInterface && `${plan.eventsInterface}${generic.events?.passed ?? ""}`,
+    models && `${models}${generic.models?.passed ?? ""}`,
+    slots && `${slots}${generic.slots?.passed ?? ""}`,
+    attributes,
+  ]
     .filter((part) => part !== undefined)
     .join(" & ");
   const { scope } = composition;
diff --git a/packages/target-react/test/composition.test.ts b/packages/target-react/test/composition.test.ts
index 700c89485..63f52cc22 100644
--- a/packages/target-react/test/composition.test.ts
+++ b/packages/target-react/test/composition.test.ts
@@ -176,6 +176,23 @@ export function Pill({ on }: { on: boolean }) {
  * source passes L3, L4 and L5 as an output must, and the shape that once broke is pinned.
  */
 const PROBES: Readonly<Record<string, string>> = {
+  // A generic component (ADR-0068) whose event, model and scoped slot name its type parameter.
+  generic: `import { defineEmits, defineModel, defineSlots } from "unframework";
+import type { Element } from "unframework";
+export interface ChooserProps<T extends string> { options: readonly T[] }
+export default function Chooser<T extends string>({ options }: ChooserProps<T>) {
+  const emit = defineEmits<{ pick: [value: T] }>();
+  const value = defineModel<T>("value", { required: true });
+  const slots = defineSlots<{ option?(props: { option: T }): Element }>();
+  return (
+    <div>
+      <select v-model={value.value} onChange={() => emit("pick", value.value)}>
+        {options.map((option) => <option key={option} value={option}>{option}</option>)}
+      </select>
+      {options.map((option) => <span key={option}>{slots.option?.({ option })}</span>)}
+    </div>
+  );
+}`,
   // A root spread that may hold `class`, beside the root's fallthrough `class`.
   rootSpread: `export default function Box({ attrs, text }: { attrs: { class?: string; title?: string }; text: string }) {
   return <div {...attrs}>{text}</div>;
@@ -368,3 +385,33 @@ describe("react composition beyond the corpus", () => {
     expect(odd).toContain("setTo(value: { to?: number; by: number }): void;");
   });
 });
+
+describe("react types and generics", () => {
+  it("writes a generic component's type parameters on it and on the interfaces that name them", async () => {
+    const chooser = (await outputs(PROBES.generic!)).get("Chooser")!;
+    expect(chooser).toContain("export default function Chooser<T extends string>({");
+    expect(chooser).toContain("export interface ChooserEvents<T extends string> {");
+    expect(chooser).toContain("export interface ChooserModels<T extends string> {");
+    expect(chooser).toContain("export interface ChooserSlots<T extends string> {");
+    expect(chooser).toContain(
+      "}: ChooserProps<T> & ChooserEvents<T> & ChooserModels<T> & ChooserSlots<T> & ChooserAttributes) {",
+    );
+    // A control gives a string, which TypeScript cannot narrow to the type argument.
+    expect(chooser).toContain("valueRef.current = event.target.value as T;");
+    expect(chooser).not.toContain("interface ChooserAttributes<");
+  });
+
+  it("writes the module's type exports in source order among the types it copies", async () => {
+    const button = (
+      await outputs(`export type Tone = "primary" | "secondary";
+export type { Size } from "./sizes";
+export type Variant = "solid" | "ghost";
+export default function Button({ tone }: { tone: Tone }) {
+  return <button type="button" class={tone}>Save</button>;
+}`)
+    ).get("Button")!;
+    expect(button).toContain(
+      'export type Tone = "primary" | "secondary";\n\nexport type { Size } from "./sizes";\n\nexport type Variant = "solid" | "ghost";',
+    );
+  });
+});
diff --git a/packages/target-react/test/fixtures.ts b/packages/target-react/test/fixtures.ts
index 780b7620e..75f1e71e1 100644
--- a/packages/target-react/test/fixtures.ts
+++ b/packages/target-react/test/fixtures.ts
@@ -130,23 +130,16 @@ export function lower(source: string, file = "Fixture.uf.tsx"): UfModule {
   return module;
 }
 
-/**
- * M5's types and generics cases (ADR-0067, ADR-0068), which React emits from its types lane, layer
- * 16 of M5 (UXF-462): until then `harness/quarantine/react.ts` lists their failing cells, and the lane
- * brings them back here.
- */
-const TYPES_LANE = /(?:^|\/)(?:types|generics|diagnostics\/generic-slot-props)\//;
-
 /**
  * Every committed golden output of a target, read from the integration corpus, but the scoped
  * sheets (`<source>.css`), which no framework compiler or checker reads: the compile project
- * parses them instead (ADR-0063), and the cases of its types lane (`TYPES_LANE`).
+ * parses them instead (ADR-0063).
  */
 export function goldens(targetName: string): ToolchainFile[] {
   const pattern = new RegExp(`(?:^|/)__output__/${targetName}/[^/]+$`);
   return readdirSync(cases, { recursive: true })
     .map((entry) => String(entry).split("\\").join("/"))
-    .filter((entry) => pattern.test(entry) && !entry.endsWith(".css") && !TYPES_LANE.test(entry))
+    .filter((entry) => pattern.test(entry) && !entry.endsWith(".css"))
     .toSorted()
     .map((entry) => {
       const path = join(cases, entry);
diff --git a/tests/integration/cases/diagnostics/generic-slot-props/__output__/react/Options.tsx b/tests/integration/cases/diagnostics/generic-slot-props/__output__/react/Options.tsx
index f7663b0e7..60aa96755 100644
--- a/tests/integration/cases/diagnostics/generic-slot-props/__output__/react/Options.tsx
+++ b/tests/integration/cases/diagnostics/generic-slot-props/__output__/react/Options.tsx
@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactNode } from "react";
 
-export interface OptionsSlots {
+export interface OptionsSlots<T extends { value: string }> {
   renderOption?: (props: { option: T }) => ReactNode;
 }
 
@@ -9,13 +9,13 @@ export interface OptionsAttributes {
   style?: CSSProperties;
 }
 
-export default function Options({
+export default function Options<T extends { value: string }>({
   options,
   renderOption,
   className,
   style,
   ...attributes
-}: { options: T[] } & OptionsSlots & OptionsAttributes) {
+}: { options: T[] } & OptionsSlots<T> & OptionsAttributes) {
   return (
     <ul className={className} style={style} {...scopeAttributes(attributes)}>
       {options.map((option) => (
diff --git a/tests/integration/cases/generics/constrained/__output__/react/Table.tsx b/tests/integration/cases/generics/constrained/__output__/react/Table.tsx
index c87c7920a..c766e5c58 100644
--- a/tests/integration/cases/generics/constrained/__output__/react/Table.tsx
+++ b/tests/integration/cases/generics/constrained/__output__/react/Table.tsx
@@ -10,7 +10,7 @@ export interface TableAttributes {
   style?: CSSProperties;
 }
 
-export default function Table({
+export default function Table<T extends { id: string; label: string }>({
   caption,
   rows,
   className,
diff --git a/tests/integration/cases/generics/list/__output__/react/List.tsx b/tests/integration/cases/generics/list/__output__/react/List.tsx
index faf54e83c..9fd02f17c 100644
--- a/tests/integration/cases/generics/list/__output__/react/List.tsx
+++ b/tests/integration/cases/generics/list/__output__/react/List.tsx
@@ -11,7 +11,7 @@ export interface ListAttributes {
   style?: CSSProperties;
 }
 
-export default function List({
+export default function List<T>({
   label,
   items,
   selected,
diff --git a/tests/integration/cases/generics/scoped-slot/__output__/react/Picker.tsx b/tests/integration/cases/generics/scoped-slot/__output__/react/Picker.tsx
index 633d532cc..a912e5fac 100644
--- a/tests/integration/cases/generics/scoped-slot/__output__/react/Picker.tsx
+++ b/tests/integration/cases/generics/scoped-slot/__output__/react/Picker.tsx
@@ -4,7 +4,7 @@ export interface PickerProps<T> {
   items: T[];
 }
 
-export interface PickerSlots {
+export interface PickerSlots<T> {
   renderItem?: (props: { item: T }) => ReactNode;
 }
 
@@ -13,13 +13,13 @@ export interface PickerAttributes {
   style?: CSSProperties;
 }
 
-export default function Picker({
+export default function Picker<T>({
   items,
   renderItem,
   className,
   style,
   ...attributes
-}: PickerProps<T> & PickerSlots & PickerAttributes) {
+}: PickerProps<T> & PickerSlots<T> & PickerAttributes) {
   return (
     <ul className={className} style={style} {...scopeAttributes(attributes)}>
       {items.map((item, index) => (
diff --git a/tests/integration/cases/generics/select/__output__/react/Select.tsx b/tests/integration/cases/generics/select/__output__/react/Select.tsx
index a63d427a5..b8d2387cc 100644
--- a/tests/integration/cases/generics/select/__output__/react/Select.tsx
+++ b/tests/integration/cases/generics/select/__output__/react/Select.tsx
@@ -5,7 +5,7 @@ export interface SelectProps<T extends string> {
   options: readonly T[];
 }
 
-export interface SelectModels {
+export interface SelectModels<T extends string> {
   value: T;
   onValueChange?: (value: T) => void;
 }
@@ -15,7 +15,7 @@ export interface SelectAttributes {
   style?: CSSProperties;
 }
 
-export default function Select({
+export default function Select<T extends string>({
   label,
   options,
   value,
@@ -23,7 +23,7 @@ export default function Select({
   className,
   style,
   ...attributes
-}: SelectProps<T> & SelectModels & SelectAttributes) {
+}: SelectProps<T> & SelectModels<T> & SelectAttributes) {
   const [, setLocalValue] = useState({ value: value });
 
   return (
@@ -32,8 +32,8 @@ export default function Select({
       <select
         value={value}
         onChange={(event) => {
-          setLocalValue({ value: event.target.value });
-          onValueChange?.(event.target.value);
+          setLocalValue({ value: event.target.value as T });
+          onValueChange?.(event.target.value as T);
         }}
       >
         {options.map((option) => (
diff --git a/tests/integration/cases/types/child-type-import/__output__/react/Form.tsx b/tests/integration/cases/types/child-type-import/__output__/react/Form.tsx
index 6c9e1d7d2..7b71f610c 100644
--- a/tests/integration/cases/types/child-type-import/__output__/react/Form.tsx
+++ b/tests/integration/cases/types/child-type-import/__output__/react/Form.tsx
@@ -1,4 +1,4 @@
-import Field from "./Field";
+import Field, { type FieldProps } from "./Field";
 import type { CSSProperties } from "react";
 
 export interface FormAttributes {
diff --git a/tests/integration/cases/types/exported-types/__output__/react/Button.tsx b/tests/integration/cases/types/exported-types/__output__/react/Button.tsx
index b1bfbe821..c36207666 100644
--- a/tests/integration/cases/types/exported-types/__output__/react/Button.tsx
+++ b/tests/integration/cases/types/exported-types/__output__/react/Button.tsx
@@ -2,6 +2,8 @@ import type { CSSProperties } from "react";
 
 export type ButtonTone = "primary" | "secondary";
 
+export type ButtonSize = "small" | "large";
+
 export interface ButtonProps {
   label: string;
   tone?: ButtonTone;
diff --git a/tests/integration/cases/types/extends-chain/__output__/react/Button.tsx b/tests/integration/cases/types/extends-chain/__output__/react/Button.tsx
index 1bf2ecf9f..47642c4bb 100644
--- a/tests/integration/cases/types/extends-chain/__output__/react/Button.tsx
+++ b/tests/integration/cases/types/extends-chain/__output__/react/Button.tsx
@@ -1,3 +1,4 @@
+import type { ButtonProps } from "./types";
 import type { CSSProperties } from "react";
 
 export interface ButtonAttributes {
diff --git a/tests/integration/cases/types/imported-interface/__output__/react/Badge.tsx b/tests/integration/cases/types/imported-interface/__output__/react/Badge.tsx
index 999c33653..92d9fe46a 100644
--- a/tests/integration/cases/types/imported-interface/__output__/react/Badge.tsx
+++ b/tests/integration/cases/types/imported-interface/__output__/react/Badge.tsx
@@ -1,3 +1,4 @@
+import type { BadgeProps } from "./types";
 import type { CSSProperties } from "react";
 
 export interface BadgeAttributes {
diff --git a/tests/integration/cases/types/intersection-props/__output__/react/Chip.tsx b/tests/integration/cases/types/intersection-props/__output__/react/Chip.tsx
index 00142aa1d..e93cfa91d 100644
--- a/tests/integration/cases/types/intersection-props/__output__/react/Chip.tsx
+++ b/tests/integration/cases/types/intersection-props/__output__/react/Chip.tsx
@@ -1,3 +1,4 @@
+import type { Sized, Toned } from "./types";
 import type { CSSProperties } from "react";
 
 type ChipProps = Sized & Toned & { label: string };
diff --git a/tests/integration/cases/types/package-types/__output__/react/Status.tsx b/tests/integration/cases/types/package-types/__output__/react/Status.tsx
index b02c704aa..37a5334fc 100644
--- a/tests/integration/cases/types/package-types/__output__/react/Status.tsx
+++ b/tests/integration/cases/types/package-types/__output__/react/Status.tsx
@@ -1,4 +1,6 @@
+import type { Labelled } from "./types";
 import type { CSSProperties } from "react";
+import type { TimeInterval } from "rxjs";
 
 type StatusProps = TimeInterval<string> & Labelled;
 
diff --git a/tests/integration/cases/types/shared-type/__output__/react/Palette.tsx b/tests/integration/cases/types/shared-type/__output__/react/Palette.tsx
index 3f6e868ca..25739c903 100644
--- a/tests/integration/cases/types/shared-type/__output__/react/Palette.tsx
+++ b/tests/integration/cases/types/shared-type/__output__/react/Palette.tsx
@@ -1,6 +1,9 @@
 import Swatch from "./Swatch";
+import type { Tone } from "./types";
 import type { CSSProperties } from "react";
 
+export type { Tone } from "./types";
+
 export interface PaletteAttributes {
   className?: string;
   style?: CSSProperties;
diff --git a/tests/integration/cases/types/shared-type/__output__/react/Swatch.tsx b/tests/integration/cases/types/shared-type/__output__/react/Swatch.tsx
index aaed1b2f8..d90383e83 100644
--- a/tests/integration/cases/types/shared-type/__output__/react/Swatch.tsx
+++ b/tests/integration/cases/types/shared-type/__output__/react/Swatch.tsx
@@ -1,3 +1,4 @@
+import type { Tone } from "./types";
 import type { CSSProperties } from "react";
 
 export interface SwatchAttributes {
diff --git a/tests/integration/cases/types/utility-types/__output__/react/TextField.tsx b/tests/integration/cases/types/utility-types/__output__/react/TextField.tsx
index f4e6cc627..10542a680 100644
--- a/tests/integration/cases/types/utility-types/__output__/react/TextField.tsx
+++ b/tests/integration/cases/types/utility-types/__output__/react/TextField.tsx
@@ -1,3 +1,4 @@
+import type { FieldOptions } from "./types";
 import type { CSSProperties } from "react";
 
 export type TextFieldProps = Required<Pick<FieldOptions, "name" | "label">> &
diff --git a/tests/integration/harness/canaries.ts b/tests/integration/harness/canaries.ts
index 7638d90fd..608217b39 100644
--- a/tests/integration/harness/canaries.ts
+++ b/tests/integration/harness/canaries.ts
@@ -1590,8 +1590,9 @@ export function withQwikImports(file: OutputFile, names: readonly string[]): str
 
 /**
  * Where a JSX component's body starts, just after its `{`: Qwik's `component$<Props>((…) => {`,
- * or the first PascalCase `function Name(…) {` (React and Solid). The parameters are read to
- * their matching parenthesis: a destructured default or a type may hold parentheses of its own.
+ * or the first PascalCase `function Name(…) {` or `function Name<T>(…) {` (React and Solid). The
+ * type parameters and the parameters are read to their matching bracket: a constraint, a
+ * destructured default or a type may hold brackets of its own.
  */
 function componentBodyStart(contents: string): number | undefined {
   // Not the import's `component$`: the call's, with its type argument or its parenthesis.
@@ -1611,9 +1612,17 @@ function componentBodyStart(contents: string): number | undefined {
     if (close === undefined) return undefined;
     return endAt(contents, close + 1, /^\s*=>\s*\{/);
   }
-  const component = /\bfunction\s+[A-Z][\w$]*\s*\(/.exec(contents);
+  const component = /\bfunction\s+[A-Z][\w$]*\s*(?=[<(])/.exec(contents);
   if (!component) return undefined;
-  const close = matchingBracket(contents, component.index + component[0].length - 1, "(", ")");
+  let index = component.index + component[0].length;
+  // A generic component's type parameters (ADR-0068): a constraint may hold brackets of its own.
+  if (contents[index] === "<") {
+    const parameters = matchingBracket(contents, index, "<", ">");
+    if (parameters === undefined) return undefined;
+    index = endAt(contents, parameters + 1, /^\s*/)!;
+  }
+  if (contents[index] !== "(") return undefined;
+  const close = matchingBracket(contents, index, "(", ")");
   if (close === undefined) return undefined;
   return endAt(contents, close + 1, /^[^{]*\{/);
 }
diff --git a/tests/integration/harness/canaries.unit.test.ts b/tests/integration/harness/canaries.unit.test.ts
index fc4bdd3e4..c6c3b31c9 100644
--- a/tests/integration/harness/canaries.unit.test.ts
+++ b/tests/integration/harness/canaries.unit.test.ts
@@ -1332,6 +1332,18 @@ it("clicks", { requires: ["interactivity", "event-capture"] }, async () => {
       "render",
     );
     expect(react).toContain("format: () => string }) {\n  x();\n  return <p>");
+    // A generic component's type parameters, whose constraint holds braces (ADR-0068).
+    const generic = injectScript(
+      {
+        path: "A.tsx",
+        contents:
+          "export default function A<T extends { id: string } = { id: string }>({ rows }: { rows: T[] }) {\n  return <p>{rows.length}</p>;\n}\n",
+      },
+      "react",
+      "x();",
+      "render",
+    );
+    expect(generic).toContain("{ rows: T[] }) {\n  x();\n  return <p>");
     const qwik = injectScript(
       {
         path: "A.tsx",
diff --git a/tests/integration/harness/quarantine/react.ts b/tests/integration/harness/quarantine/react.ts
index c91c41499..412075c7f 100644
--- a/tests/integration/harness/quarantine/react.ts
+++ b/tests/integration/harness/quarantine/react.ts
@@ -1,35 +1,6 @@
 // The React quarantine (ADR-0057): React's known failures, each with its reason and issue. Only
 // entries whose target is "react" belong here, so each target lane edits its own file.
-import type { LayerName, QuarantineEntry } from "@unframework/testing/node";
+import type { QuarantineEntry } from "@unframework/testing/node";
 
-// M5 (UXF-443)
-/**
- * The types and generics cells that fail until React's types lane (layer 16 of M5) emits
- * cross-file types and generic components (ADR-0067, ADR-0068): Vue wrote their expectations first
- * (layer 14), and the lane empties this list.
- */
-const TYPES: Readonly<Record<string, readonly LayerName[]>> = {
-  "diagnostics/generic-slot-props": ["L4"],
-  "generics/constrained": ["L4"],
-  "generics/list": ["L4"],
-  "generics/scoped-slot": ["L4"],
-  "generics/select": ["L4"],
-  "types/child-type-import": ["L4"],
-  "types/extends-chain": ["L4"],
-  "types/imported-interface": ["L4"],
-  "types/intersection-props": ["L4"],
-  "types/package-types": ["L4"],
-  "types/shared-type": ["L4"],
-  "types/utility-types": ["L4"],
-};
-
-export const QUARANTINE: readonly QuarantineEntry[] = Object.entries(TYPES).flatMap(
-  ([id, layers]) =>
-    layers.map((layer) => ({
-      case: id,
-      target: "react",
-      layer,
-      reason: "imports no type and writes no generic form yet",
-      issue: "UXF-462",
-    })),
-);
+/** Empty: every live layer is green on React (ADR-0060). */
+export const QUARANTINE: readonly QuarantineEntry[] = [];
diff --git a/tests/toolchains/react/consumers/generics/constrained/Consumer.tsx b/tests/toolchains/react/consumers/generics/constrained/Consumer.tsx
new file mode 100644
index 000000000..0cd7d025a
--- /dev/null
+++ b/tests/toolchains/react/consumers/generics/constrained/Consumer.tsx
@@ -0,0 +1,5 @@
+import Table from "../../../../../integration/cases/generics/constrained/__output__/react/Table";
+
+export function Consumer() {
+  return <Table caption="People" rows={[{ id: "ada", label: "Ada Lovelace", born: 1815 }]} />;
+}
diff --git a/tests/toolchains/react/consumers/generics/constrained/MisuseProp.tsx b/tests/toolchains/react/consumers/generics/constrained/MisuseProp.tsx
new file mode 100644
index 000000000..f3a2b653b
--- /dev/null
+++ b/tests/toolchains/react/consumers/generics/constrained/MisuseProp.tsx
@@ -0,0 +1,6 @@
+import Table from "../../../../../integration/cases/generics/constrained/__output__/react/Table";
+
+export function MisuseProp() {
+  // @uf-expect TS2322 Table.prop:rows
+  return <Table caption="People" rows={[{ id: 1, label: "Ada Lovelace" }]} />;
+}
diff --git a/tests/toolchains/react/consumers/generics/list/Consumer.tsx b/tests/toolchains/react/consumers/generics/list/Consumer.tsx
new file mode 100644
index 000000000..d5bcced2b
--- /dev/null
+++ b/tests/toolchains/react/consumers/generics/list/Consumer.tsx
@@ -0,0 +1,5 @@
+import List from "../../../../../integration/cases/generics/list/__output__/react/List";
+
+export function Consumer() {
+  return <List label="Numbers" items={[1, 2]} selected={2} />;
+}
diff --git a/tests/toolchains/react/consumers/generics/list/MisuseProp.tsx b/tests/toolchains/react/consumers/generics/list/MisuseProp.tsx
new file mode 100644
index 000000000..37233880e
--- /dev/null
+++ b/tests/toolchains/react/consumers/generics/list/MisuseProp.tsx
@@ -0,0 +1,6 @@
+import List from "../../../../../integration/cases/generics/list/__output__/react/List";
+
+export function MisuseProp() {
+  // @uf-expect TS2322 List.prop:selected
+  return <List label="Numbers" items={[1, 2]} selected="two" />;
+}
diff --git a/tests/toolchains/react/consumers/generics/scoped-slot/Consumer.tsx b/tests/toolchains/react/consumers/generics/scoped-slot/Consumer.tsx
new file mode 100644
index 000000000..35c7e59f9
--- /dev/null
+++ b/tests/toolchains/react/consumers/generics/scoped-slot/Consumer.tsx
@@ -0,0 +1,6 @@
+import Picker from "../../../../../integration/cases/generics/scoped-slot/__output__/react/Picker";
+
+export function Consumer() {
+  const fruits = [{ name: "Apple", count: 3 }];
+  return <Picker items={fruits} renderItem={({ item }) => `${item.name} × ${item.count}`} />;
+}
diff --git a/tests/toolchains/react/consumers/generics/scoped-slot/MisuseSlot.tsx b/tests/toolchains/react/consumers/generics/scoped-slot/MisuseSlot.tsx
new file mode 100644
index 000000000..70427aa0a
--- /dev/null
+++ b/tests/toolchains/react/consumers/generics/scoped-slot/MisuseSlot.tsx
@@ -0,0 +1,7 @@
+import Picker from "../../../../../integration/cases/generics/scoped-slot/__output__/react/Picker";
+
+export function MisuseSlot() {
+  const fruits = [{ name: "Apple", count: 3 }];
+  // @uf-expect TS2339 Picker.slot:item
+  return <Picker items={fruits} renderItem={({ item }) => item.nmae} />;
+}
diff --git a/tests/toolchains/react/consumers/generics/select/Consumer.tsx b/tests/toolchains/react/consumers/generics/select/Consumer.tsx
new file mode 100644
index 000000000..00b232e89
--- /dev/null
+++ b/tests/toolchains/react/consumers/generics/select/Consumer.tsx
@@ -0,0 +1,8 @@
+import { useState } from "react";
+
+import Select from "../../../../../integration/cases/generics/select/__output__/react/Select";
+
+export function Consumer() {
+  const [size, setSize] = useState<"s" | "m">("s");
+  return <Select value={size} onValueChange={setSize} label="Size" options={["s", "m"]} />;
+}
diff --git a/tests/toolchains/react/consumers/generics/select/MisuseModel.tsx b/tests/toolchains/react/consumers/generics/select/MisuseModel.tsx
new file mode 100644
index 000000000..4c26ab1cc
--- /dev/null
+++ b/tests/toolchains/react/consumers/generics/select/MisuseModel.tsx
@@ -0,0 +1,9 @@
+import { useState } from "react";
+
+import Select from "../../../../../integration/cases/generics/select/__output__/react/Select";
+
+export function MisuseModel() {
+  const [count, setCount] = useState(1);
+  // @uf-expect TS2322 Select.model:value
+  return <Select value={count} onValueChange={setCount} label="Size" options={["s", "m"]} />;
+}
diff --git a/tests/toolchains/react/consumers/types/child-type-import/Consumer.tsx b/tests/toolchains/react/consumers/types/child-type-import/Consumer.tsx
new file mode 100644
index 000000000..dc06d9397
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/child-type-import/Consumer.tsx
@@ -0,0 +1,7 @@
+import type { FieldProps } from "../../../../../integration/cases/types/child-type-import/__output__/react/Field";
+import Form from "../../../../../integration/cases/types/child-type-import/__output__/react/Form";
+
+export function Consumer() {
+  const field: FieldProps = { name: "email", label: "Email" };
+  return <Form field={field} />;
+}
diff --git a/tests/toolchains/react/consumers/types/child-type-import/MisuseProp.tsx b/tests/toolchains/react/consumers/types/child-type-import/MisuseProp.tsx
new file mode 100644
index 000000000..3a2c42ba7
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/child-type-import/MisuseProp.tsx
@@ -0,0 +1,6 @@
+import Form from "../../../../../integration/cases/types/child-type-import/__output__/react/Form";
+
+export function MisuseProp() {
+  // @uf-expect TS2741 Form.prop:field
+  return <Form field={{ name: "email" }} />;
+}
diff --git a/tests/toolchains/react/consumers/types/child-type-import/MisuseType.tsx b/tests/toolchains/react/consumers/types/child-type-import/MisuseType.tsx
new file mode 100644
index 000000000..647ae5ae8
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/child-type-import/MisuseType.tsx
@@ -0,0 +1,9 @@
+import Field, {
+  type FieldProps,
+} from "../../../../../integration/cases/types/child-type-import/__output__/react/Field";
+
+export function MisuseType() {
+  // @uf-expect TS2322 Field.type:FieldProps
+  const field: FieldProps = { name: 1, label: "Email" };
+  return <Field name="email" label={field.label} />;
+}
diff --git a/tests/toolchains/react/consumers/types/exported-types/Consumer.tsx b/tests/toolchains/react/consumers/types/exported-types/Consumer.tsx
new file mode 100644
index 000000000..70ef00ef4
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/exported-types/Consumer.tsx
@@ -0,0 +1,10 @@
+import Button, {
+  type ButtonProps,
+  type ButtonSize,
+} from "../../../../../integration/cases/types/exported-types/__output__/react/Button";
+
+export function Consumer() {
+  const props: ButtonProps = { label: "Save", tone: "secondary" };
+  const size: ButtonSize = "large";
+  return <Button label={props.label} tone={props.tone} data-size={size} />;
+}
diff --git a/tests/toolchains/react/consumers/types/exported-types/MisuseProp.tsx b/tests/toolchains/react/consumers/types/exported-types/MisuseProp.tsx
new file mode 100644
index 000000000..12b59d990
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/exported-types/MisuseProp.tsx
@@ -0,0 +1,6 @@
+import Button from "../../../../../integration/cases/types/exported-types/__output__/react/Button";
+
+export function MisuseProp() {
+  // @uf-expect TS2322 Button.prop:tone
+  return <Button label="Save" tone="danger" />;
+}
diff --git a/tests/toolchains/react/consumers/types/exported-types/MisuseType.tsx b/tests/toolchains/react/consumers/types/exported-types/MisuseType.tsx
new file mode 100644
index 000000000..24b04f1ff
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/exported-types/MisuseType.tsx
@@ -0,0 +1,12 @@
+import Button, {
+  type ButtonProps,
+  type ButtonSize,
+} from "../../../../../integration/cases/types/exported-types/__output__/react/Button";
+
+export function MisuseType() {
+  // @uf-expect TS2322 Button.type:ButtonProps
+  const props: ButtonProps = { label: "Save", tone: "danger" };
+  // @uf-expect TS2322 Button.type:ButtonSize
+  const size: ButtonSize = "huge";
+  return <Button label={props.label} data-size={size} />;
+}
diff --git a/tests/toolchains/react/consumers/types/extends-chain/Consumer.tsx b/tests/toolchains/react/consumers/types/extends-chain/Consumer.tsx
new file mode 100644
index 000000000..8567abb2b
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/extends-chain/Consumer.tsx
@@ -0,0 +1,5 @@
+import Button from "../../../../../integration/cases/types/extends-chain/__output__/react/Button";
+
+export function Consumer() {
+  return <Button id="save" label="Save" disabled />;
+}
diff --git a/tests/toolchains/react/consumers/types/extends-chain/MisuseProp.tsx b/tests/toolchains/react/consumers/types/extends-chain/MisuseProp.tsx
new file mode 100644
index 000000000..16fd19bc2
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/extends-chain/MisuseProp.tsx
@@ -0,0 +1,6 @@
+import Button from "../../../../../integration/cases/types/extends-chain/__output__/react/Button";
+
+export function MisuseProp() {
+  // @uf-expect TS2322 Button.prop:label
+  return <Button id="save" label={1} />;
+}
diff --git a/tests/toolchains/react/consumers/types/imported-interface/Consumer.tsx b/tests/toolchains/react/consumers/types/imported-interface/Consumer.tsx
new file mode 100644
index 000000000..fd92718e8
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/imported-interface/Consumer.tsx
@@ -0,0 +1,5 @@
+import Badge from "../../../../../integration/cases/types/imported-interface/__output__/react/Badge";
+
+export function Consumer() {
+  return <Badge label="New" tone="danger" />;
+}
diff --git a/tests/toolchains/react/consumers/types/imported-interface/MisuseProp.tsx b/tests/toolchains/react/consumers/types/imported-interface/MisuseProp.tsx
new file mode 100644
index 000000000..d457deccb
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/imported-interface/MisuseProp.tsx
@@ -0,0 +1,6 @@
+import Badge from "../../../../../integration/cases/types/imported-interface/__output__/react/Badge";
+
+export function MisuseProp() {
+  // @uf-expect TS2322 Badge.prop:tone
+  return <Badge label="New" tone="warning" />;
+}
diff --git a/tests/toolchains/react/consumers/types/intersection-props/Consumer.tsx b/tests/toolchains/react/consumers/types/intersection-props/Consumer.tsx
new file mode 100644
index 000000000..fe3d29284
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/intersection-props/Consumer.tsx
@@ -0,0 +1,5 @@
+import Chip from "../../../../../integration/cases/types/intersection-props/__output__/react/Chip";
+
+export function Consumer() {
+  return <Chip size="small" tone="accent" label="Draft" />;
+}
diff --git a/tests/toolchains/react/consumers/types/intersection-props/MisuseProp.tsx b/tests/toolchains/react/consumers/types/intersection-props/MisuseProp.tsx
new file mode 100644
index 000000000..9d7ed86ef
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/intersection-props/MisuseProp.tsx
@@ -0,0 +1,6 @@
+import Chip from "../../../../../integration/cases/types/intersection-props/__output__/react/Chip";
+
+export function MisuseProp() {
+  // @uf-expect TS2322 Chip.prop:size
+  return <Chip size="medium" label="Draft" />;
+}
diff --git a/tests/toolchains/react/consumers/types/package-types/Consumer.tsx b/tests/toolchains/react/consumers/types/package-types/Consumer.tsx
new file mode 100644
index 000000000..39e41236e
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/package-types/Consumer.tsx
@@ -0,0 +1,5 @@
+import Status from "../../../../../integration/cases/types/package-types/__output__/react/Status";
+
+export function Consumer() {
+  return <Status label="Feed" value="tick" interval={250} />;
+}
diff --git a/tests/toolchains/react/consumers/types/package-types/MisuseProp.tsx b/tests/toolchains/react/consumers/types/package-types/MisuseProp.tsx
new file mode 100644
index 000000000..3cb732066
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/package-types/MisuseProp.tsx
@@ -0,0 +1,6 @@
+import Status from "../../../../../integration/cases/types/package-types/__output__/react/Status";
+
+export function MisuseProp() {
+  // @uf-expect TS2322 Status.prop:interval
+  return <Status label="Feed" value="tick" interval="fast" />;
+}
diff --git a/tests/toolchains/react/consumers/types/shared-type/Consumer.tsx b/tests/toolchains/react/consumers/types/shared-type/Consumer.tsx
new file mode 100644
index 000000000..b2a977623
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/shared-type/Consumer.tsx
@@ -0,0 +1,8 @@
+import Palette, {
+  type Tone,
+} from "../../../../../integration/cases/types/shared-type/__output__/react/Palette";
+
+export function Consumer() {
+  const tone: Tone = "accent";
+  return <Palette tone={tone} />;
+}
diff --git a/tests/toolchains/react/consumers/types/shared-type/MisuseProp.tsx b/tests/toolchains/react/consumers/types/shared-type/MisuseProp.tsx
new file mode 100644
index 000000000..1ff4bd831
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/shared-type/MisuseProp.tsx
@@ -0,0 +1,6 @@
+import Palette from "../../../../../integration/cases/types/shared-type/__output__/react/Palette";
+
+export function MisuseProp() {
+  // @uf-expect TS2322 Palette.prop:tone
+  return <Palette tone="loud" />;
+}
diff --git a/tests/toolchains/react/consumers/types/shared-type/MisuseType.tsx b/tests/toolchains/react/consumers/types/shared-type/MisuseType.tsx
new file mode 100644
index 000000000..0986af5ce
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/shared-type/MisuseType.tsx
@@ -0,0 +1,9 @@
+import Palette, {
+  type Tone,
+} from "../../../../../integration/cases/types/shared-type/__output__/react/Palette";
+
+export function MisuseType() {
+  // @uf-expect TS2322 Palette.type:Tone
+  const tone: Tone = "loud";
+  return <Palette tone={tone} />;
+}
diff --git a/tests/toolchains/react/consumers/types/utility-types/Consumer.tsx b/tests/toolchains/react/consumers/types/utility-types/Consumer.tsx
new file mode 100644
index 000000000..431bbcea2
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/utility-types/Consumer.tsx
@@ -0,0 +1,8 @@
+import TextField, {
+  type TextFieldProps,
+} from "../../../../../integration/cases/types/utility-types/__output__/react/TextField";
+
+export function Consumer() {
+  const field: TextFieldProps = { name: "email", label: "Email" };
+  return <TextField name={field.name} label={field.label} placeholder="you@example.com" required />;
+}
diff --git a/tests/toolchains/react/consumers/types/utility-types/MisuseProp.tsx b/tests/toolchains/react/consumers/types/utility-types/MisuseProp.tsx
new file mode 100644
index 000000000..685272520
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/utility-types/MisuseProp.tsx
@@ -0,0 +1,6 @@
+import TextField from "../../../../../integration/cases/types/utility-types/__output__/react/TextField";
+
+export function MisuseProp() {
+  // @uf-expect TS2322 TextField.prop:placeholder
+  return <TextField name="email" label="Email" placeholder={1} />;
+}
diff --git a/tests/toolchains/react/consumers/types/utility-types/MisuseType.tsx b/tests/toolchains/react/consumers/types/utility-types/MisuseType.tsx
new file mode 100644
index 000000000..23af3816c
--- /dev/null
+++ b/tests/toolchains/react/consumers/types/utility-types/MisuseType.tsx
@@ -0,0 +1,9 @@
+import TextField, {
+  type TextFieldProps,
+} from "../../../../../integration/cases/types/utility-types/__output__/react/TextField";
+
+export function MisuseType() {
+  // @uf-expect TS2322 TextField.type:TextFieldProps
+  const field: TextFieldProps = { name: "email", label: 1 };
+  return <TextField name={field.name} label="Email" />;
+}

From e4d1057799655f3ddbcf2d82692a1e0a54d43877 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 29 Oct 2026 10:27:32 +0200
Subject: [PATCH 2/2] fix(target-react): keep generic types inside the
 component and its interfaces

Setup code that a type parameter types stays inside a generic function
component instead of being hoisted to module scope. The handle and the
attributes interface take the type parameters an exposed function
names, and every interface declares only the parameters its members
name, with those their constraints and defaults name. A multiple select
casts its values to a generic model's type, and a field bound to state
whose type is inferred casts to that state's type. React's own
interface names no longer take a name the module imports or exports as
a type.

Co-authored-by: multica-agent <github@multica.ai>
---
 packages/target-react/README.md               |   8 +-
 packages/target-react/src/compose.ts          |  16 ++-
 packages/target-react/src/index.ts            |  65 ++++++---
 packages/target-react/src/plan.ts             |  53 ++++++-
 .../target-react/test/composition.test.ts     | 134 ++++++++++++++++++
 5 files changed, 239 insertions(+), 37 deletions(-)

diff --git a/packages/target-react/README.md b/packages/target-react/README.md
index 801d93292..7ef116e6c 100644
--- a/packages/target-react/README.md
+++ b/packages/target-react/README.md
@@ -17,9 +17,11 @@ component, written as a React developer would write it (plan §6):
   `export type { Tone } from "./types"`, and an exported type no component reaches.
 - a generic component as a generic function component (ADR-0068),
   `export default function List<T>({ items }: ListProps<T> & ListAttributes)`, its constraints
-  and defaults as written. The events', models' and slots' interfaces whose members name a type
-  parameter take them too (`ListSlots<T>`), and a form control's `v-model` of such a type casts
-  the control's string to it (`event.target.value as T`).
+  and defaults as written. The events', models', slots' and handle's interfaces take the type
+  parameters their members name, with those their constraints name (`ListSlots<T>`), and setup
+  code a type parameter types stays inside the component. A form control's `v-model` of such a
+  type casts the control's string to it (`event.target.value as T`, or `as typeof chosen` where
+  the state's type is inferred).
 - expressions as the source writes them, a ref's value read as React's (`count.value` is
   `count`); conditionals as ternary chains ending in `null` (never `&&`, which renders a `0`);
   lists as `.map((item, index) => <li key={…}>…)`, with the index only when something reads it;
diff --git a/packages/target-react/src/compose.ts b/packages/target-react/src/compose.ts
index 55a60de58..7bb301cb3 100644
--- a/packages/target-react/src/compose.ts
+++ b/packages/target-react/src/compose.ts
@@ -245,13 +245,13 @@ export class ReactComposer {
           break;
         case "select-multiple":
           state = ["value", read];
-          written = "Array.from(EVENT.target.selectedOptions, (option) => option.value)";
+          written = `Array.from(EVENT.target.selectedOptions, (option) => option.value)${this.#cast(binding, read)}`;
           break;
         case "text":
         case "textarea":
         case "select":
           state = ["value", shown];
-          written = `EVENT.target.value${this.#cast(binding)}`;
+          written = `EVENT.target.value${this.#cast(binding, read)}`;
           break;
         default:
           return control satisfies never;
@@ -275,17 +275,19 @@ export class ReactComposer {
   /**
    * ` as T` where a state's or a model's declared type names a type parameter of a generic
    * component (ADR-0068): the control's value is a `string`, which TypeScript cannot narrow to
-   * the type argument. Nothing otherwise.
+   * the type argument. Without a declared type, its type may be inferred from one (`ref(initial)`),
+   * so it is cast to the type of what it reads, ` as typeof chosen`. Nothing otherwise.
    */
-  #cast(binding: BindingId): string {
+  #cast(binding: BindingId, read: string): string {
     const { component } = this.#plan;
+    if (!component.typeParameters?.length) return "";
     const item = component.setup.find(
       (entry) => (entry.kind === "State" || entry.kind === "Model") && entry.binding === binding,
     );
     const type = item && "type" in item ? item.type : undefined;
-    if (!type || !component.typeParameters?.length) return "";
-    const read = typeNames(type);
-    return component.typeParameters.some(({ name }) => read.has(name)) ? ` as ${type.code}` : "";
+    if (!type) return /^[\w$]+$/.test(read) ? ` as typeof ${read}` : "";
+    const names = typeNames(type);
+    return component.typeParameters.some(({ name }) => names.has(name)) ? ` as ${type.code}` : "";
   }
 
   /** Whether a state or a model may hold `null` or `undefined`, as its declaration says. */
diff --git a/packages/target-react/src/index.ts b/packages/target-react/src/index.ts
index 19185f406..a9edfbc63 100644
--- a/packages/target-react/src/index.ts
+++ b/packages/target-react/src/index.ts
@@ -561,6 +561,7 @@ function compositionInterfaces(plan: ReactPlan): TypeDeclaration[] {
         const parameters = fn ? parametersOf(fn) : "";
         return `${name}${fn ? exposedType(fn, parameters) : "(): void"};`;
       }),
+      generic.expose?.declared,
     );
   }
   if (interfaces.attributes) {
@@ -568,8 +569,12 @@ function compositionInterfaces(plan: ReactPlan): TypeDeclaration[] {
     if (composition.fallthrough) {
       members.push("className?: string;", `style?: ${type("CSSProperties")};`);
     }
-    if (composition.expose) members.push(`ref?: ${type("Ref")}<${composition.expose.handle}>;`);
-    declare(interfaces.attributes, members);
+    if (composition.expose) {
+      const handle = `${composition.expose.handle}${generic.expose?.passed ?? ""}`;
+      members.push(`ref?: ${type("Ref")}<${handle}>;`);
+    }
+    // The handle is the attributes' one member a type parameter may type.
+    declare(interfaces.attributes, members, generic.expose?.declared);
   }
   return declarations;
 }
@@ -677,34 +682,52 @@ function eventsInterface(plan: ReactPlan): TypeDeclaration[] {
 }
 
 /**
- * The type parameters of the interfaces the output declares for its events, models and slots
- * (ADR-0068): where a generic component's members name one of its type parameters, the interface
- * takes them all, declared as the component declares them (`<T extends string>`) and passed by
- * name (`<T>`).
+ * The type parameters of the interfaces the output declares for its events, models, slots and
+ * handle (ADR-0068): those of a generic component's that the members name, with those their
+ * constraints and defaults name in turn, in the component's order, declared as the component
+ * declares them (`<T extends string>`) and passed by name (`<T>`). An interface that names none
+ * takes none.
  */
 function interfaceParameters(
   plan: ReactPlan,
-): Partial<Record<"events" | "models" | "slots", { declared: string; passed: string }>> {
+): Partial<Record<"events" | "models" | "slots" | "expose", { declared: string; passed: string }>> {
   const { component, composition } = plan;
   const parameters = component.typeParameters ?? [];
   if (!parameters.length) return {};
-  const written = {
-    declared: `<${parameters.map(typeParameterText).join(", ")}>`,
-    passed: `<${parameters.map(({ name }) => name).join(", ")}>`,
+  const written = (texts: readonly (TypeText | undefined)[]) => {
+    const named = new Set<string>();
+    const read = (text: TypeText | undefined) => {
+      if (text) for (const name of typeNames(text)) named.add(name);
+    };
+    texts.forEach(read);
+    let kept: TypeParameter[] = [];
+    while (true) {
+      const next = parameters.filter(({ name }) => named.has(name));
+      if (next.length === kept.length) break;
+      kept = next;
+      for (const parameter of kept) {
+        read(parameter.constraint);
+        read(parameter.default);
+      }
+    }
+    if (!kept.length) return undefined;
+    return {
+      declared: `<${kept.map(typeParameterText).join(", ")}>`,
+      passed: `<${kept.map(({ name }) => name).join(", ")}>`,
+    };
   };
-  const names = (texts: readonly (TypeText | undefined)[]) =>
-    texts.some((text) => {
-      const read = text ? typeNames(text) : new Set<string>();
-      return parameters.some(({ name }) => read.has(name));
-    })
-      ? written
-      : undefined;
+  const exposed = component.exposes?.functions.flatMap((id) => {
+    const item = component.setup.find((entry) => entry.kind === "Function" && entry.binding === id);
+    if (item?.kind !== "Function") return [];
+    return [...item.function.parameters.map(({ type }) => type), item.function.returnType];
+  });
   return {
-    events: names(
+    events: written(
       component.emits?.events.flatMap((event) => event.parameters.map(({ type }) => type)) ?? [],
     ),
-    models: names([...composition.models.values()].map(({ item }) => item.type)),
-    slots: names(component.slots?.slots.map((slot) => slot.props) ?? []),
+    models: written([...composition.models.values()].map(({ item }) => item.type)),
+    slots: written(component.slots?.slots.map((slot) => slot.props) ?? []),
+    expose: written(composition.expose ? (exposed ?? []) : []),
   };
 }
 
@@ -735,7 +758,7 @@ function propsParameters(
     plan.eventsInterface && `${plan.eventsInterface}${generic.events?.passed ?? ""}`,
     models && `${models}${generic.models?.passed ?? ""}`,
     slots && `${slots}${generic.slots?.passed ?? ""}`,
-    attributes,
+    attributes && `${attributes}${generic.expose?.passed ?? ""}`,
   ]
     .filter((part) => part !== undefined)
     .join(" & ");
diff --git a/packages/target-react/src/plan.ts b/packages/target-react/src/plan.ts
index dbbf97d29..a328add50 100644
--- a/packages/target-react/src/plan.ts
+++ b/packages/target-react/src/plan.ts
@@ -9,11 +9,13 @@
 import {
   addPassThroughImports,
   codeKind,
+  codeNames,
   moduleHelperName,
   ImportSet,
   parseCodeSource,
   pascalCase,
   sourceNames,
+  typeNames,
 } from "@unframework/codegen";
 import {
   codeOf,
@@ -37,6 +39,7 @@ import type {
   RefAttribute,
   RenderNode,
   Span,
+  TypeText,
   UfComponent,
   UfModule,
 } from "@unframework/ir";
@@ -889,13 +892,33 @@ function eventParameterModes(
 /**
  * The names the output must leave alone: the source's (`sourceNames`), but for the DOM event
  * types that only the annotations React rewrites name (`KeyboardEvent` in `(event:
- * KeyboardEvent)` on a synthetic listener), which the output imports from `react` instead.
+ * KeyboardEvent)` on a synthetic listener), which the output imports from `react` instead; and
+ * the types the output imports and exports by the source's names (ADR-0067, ADR-0068), so the
+ * interfaces React declares (`CardEvents`) never take one.
  */
 function reservedNames(
   component: UfComponent,
   module: UfModule,
   listeners: ReadonlyMap<EventAttribute, { mode: ListenerMode }>,
   eventModes: ReadonlyMap<BindingId, ReadonlySet<ListenerMode>>,
+): Set<string> {
+  const names = sourceAndEventNames(component, module, listeners, eventModes);
+  for (const entry of module.typeImports ?? []) {
+    for (const name of entry.names) names.add(name.local);
+  }
+  for (const entry of module.typeExports ?? []) {
+    if (entry.kind === "Declaration") names.add(entry.name);
+    else for (const name of entry.names) names.add(name.exported);
+  }
+  return names;
+}
+
+/** The source's names, but for the DOM event types React rewrites (`reservedNames`). */
+function sourceAndEventNames(
+  component: UfComponent,
+  module: UfModule,
+  listeners: ReadonlyMap<EventAttribute, { mode: ListenerMode }>,
+  eventModes: ReadonlyMap<BindingId, ReadonlySet<ListenerMode>>,
 ): Set<string> {
   const rewritten = new Set<Parameter>();
   for (const item of component.setup) {
@@ -958,21 +981,38 @@ function reservedNames(
 /**
  * The `localConst` and `localFn` bindings that capture nothing of the component: their code reads
  * only globals, its own names and other such bindings, and writes, emits and calls `nextTick`
- * (a hook's result on React) not at all. An `Id` is the instance's, so never.
+ * (a hook's result on React) not at all. An `Id` is the instance's, so never, and neither is a
+ * binding whose types or code name a type parameter of a generic component, which exists only
+ * inside it (ADR-0068).
  */
 function hoistable(
   component: UfComponent,
   kindOf: (id: BindingId) => Binding["kind"] | undefined,
 ): Set<BindingId> {
   const code = new Map<BindingId, Code[]>();
+  const parameters = new Set(component.typeParameters?.map(({ name }) => name));
+  const typed = new Set<BindingId>();
+  const names = (types: readonly (TypeText | undefined)[], pieces: readonly Code[]) => {
+    const found = new Set<string>();
+    for (const type of types) if (type) for (const name of typeNames(type)) found.add(name);
+    for (const piece of pieces) {
+      for (const name of codeNames(piece.code, codeKind(piece, component))) found.add(name);
+    }
+    return [...found].some((name) => parameters.has(name));
+  };
   for (const item of component.setup) {
-    if (item.kind === "Const") code.set(item.binding, [item.value]);
-    else if (item.kind === "Function") {
+    if (item.kind === "Const") {
+      code.set(item.binding, [item.value]);
+      if (parameters.size && names([item.type], [item.value])) typed.add(item.binding);
+    } else if (item.kind === "Function") {
       const fn = item.function;
-      code.set(item.binding, [
+      const pieces = [
         fn.body,
         ...fn.parameters.flatMap((parameter) => (parameter.default ? [parameter.default] : [])),
-      ]);
+      ];
+      code.set(item.binding, pieces);
+      const types = [...fn.parameters.map((parameter) => parameter.type), fn.returnType];
+      if (parameters.size && names(types, pieces)) typed.add(item.binding);
     }
   }
   const verdicts = new Map<BindingId, boolean>();
@@ -984,6 +1024,7 @@ function hoistable(
     const pieces = code.get(id);
     const free =
       pieces !== undefined &&
+      !typed.has(id) &&
       pieces.every((piece) =>
         piece.refs.every((reference) => {
           switch (reference.kind) {
diff --git a/packages/target-react/test/composition.test.ts b/packages/target-react/test/composition.test.ts
index 63f52cc22..71ef14f83 100644
--- a/packages/target-react/test/composition.test.ts
+++ b/packages/target-react/test/composition.test.ts
@@ -176,6 +176,48 @@ export function Pill({ on }: { on: boolean }) {
  * source passes L3, L4 and L5 as an output must, and the shape that once broke is pinned.
  */
 const PROBES: Readonly<Record<string, string>> = {
+  // Setup code a generic component's type parameter types, which stays inside the component.
+  genericSetup: `export interface ListProps<T> { label: string; items: T[] }
+export default function List<T>({ label, items }: ListProps<T>) {
+  const empty: T[] = [];
+  function describe(item: T): string {
+    return String(item);
+  }
+  return <ul aria-label={label}>{(items.length ? items : empty).map((item, index) => <li key={index}>{describe(item)}</li>)}</ul>;
+}`,
+  // A handle that a type parameter types (ADR-0054, ADR-0068).
+  genericExpose: `import { defineExpose, ref } from "unframework";
+export default function Picker<T>({ items }: { items: T[] }) {
+  const picked = ref<string>("");
+  function choose(item: T): void {
+    picked.value = String(item);
+  }
+  defineExpose({ choose });
+  return <p>{items.length} {picked.value}</p>;
+}`,
+  // An interface whose members name one of two type parameters declares only that one.
+  genericSubset: `import { defineSlots } from "unframework";
+import type { Element } from "unframework";
+export default function Pair<T, U extends string = "x">({ items, tag }: { items: T[]; tag: U }) {
+  const slots = defineSlots<{ item?(props: { item: T }): Element }>();
+  return <ul data-tag={tag}>{items.map((item, index) => <li key={index}>{slots.item?.({ item })}</li>)}</ul>;
+}`,
+  // A field bound to state whose type is inferred from a value of the type parameter.
+  genericInferred: `import { ref } from "unframework";
+export default function Pick<T extends string>({ initial }: { initial: T }) {
+  const chosen = ref(initial);
+  return <input v-model={chosen.value} />;
+}`,
+  // A multiple select bound to a model of the type parameter's array.
+  genericMultiple: `import { defineModel } from "unframework";
+export default function Multi<T extends string>({ options }: { options: readonly T[] }) {
+  const value = defineModel<T[]>("value", { required: true });
+  return (
+    <select multiple v-model={value.value}>
+      {options.map((option) => <option key={option} value={option}>{option}</option>)}
+    </select>
+  );
+}`,
   // A generic component (ADR-0068) whose event, model and scoped slot name its type parameter.
   generic: `import { defineEmits, defineModel, defineSlots } from "unframework";
 import type { Element } from "unframework";
@@ -401,6 +443,98 @@ describe("react types and generics", () => {
     expect(chooser).not.toContain("interface ChooserAttributes<");
   });
 
+  it("keeps setup code that a type parameter types inside the component", async () => {
+    const list = (await outputs(PROBES.genericSetup!)).get("List")!;
+    const start = list.indexOf("export default function List<T>(");
+    // A setup `const` the component keeps is a `useState` snapshot, read once per instance.
+    expect(list.indexOf("const [empty] = useState<T[]>([]);")).toBeGreaterThan(start);
+    expect(list.indexOf("function describe(item: T): string {")).toBeGreaterThan(start);
+  });
+
+  it("gives a handle that a type parameter types the parameter, where the ref is typed too", async () => {
+    const picker = (await outputs(PROBES.genericExpose!)).get("Picker")!;
+    expect(picker).toContain("export interface PickerHandle<T> {");
+    expect(picker).toContain("export interface PickerAttributes<T> {");
+    expect(picker).toContain("ref?: Ref<PickerHandle<T>>;");
+    expect(picker).toContain("}: { items: T[] } & PickerAttributes<T>) {");
+  });
+
+  it("declares on an interface only the type parameters its members name", async () => {
+    const pair = (await outputs(PROBES.genericSubset!)).get("Pair")!;
+    expect(pair).toContain("export interface PairSlots<T> {");
+    expect(pair).toContain("& PairSlots<T> &");
+  });
+
+  it("closes an interface's type parameters over the constraints that name others", async () => {
+    const pick = (
+      await outputs(`import { defineSlots } from "unframework";
+import type { Element } from "unframework";
+export default function Pick<T, U extends T = T>({ items, chosen }: { items: T[]; chosen: U }) {
+  const slots = defineSlots<{ pick?(props: { chosen: U }): Element }>();
+  return <p data-n={items.length}>{slots.pick?.({ chosen })}</p>;
+}`)
+    ).get("Pick")!;
+    expect(pick).toContain("export interface PickSlots<T, U extends T = T> {");
+    expect(pick).toContain("& PickSlots<T, U> &");
+  });
+
+  it("casts a field's value to state whose type a type parameter's value infers", async () => {
+    const pick = (await outputs(PROBES.genericInferred!)).get("Pick")!;
+    expect(pick).toContain("setChosen(event.target.value as typeof chosen)");
+  });
+
+  it("casts a multiple select's values to a model of the type parameter's array", async () => {
+    const multi = (await outputs(PROBES.genericMultiple!)).get("Multi")!;
+    expect(multi).toContain(
+      "Array.from(event.target.selectedOptions, (option) => option.value) as T[]",
+    );
+  });
+
+  it("names its own interfaces apart from the types the module imports and exports", async () => {
+    const exported = (
+      await outputs(`import { defineEmits } from "unframework";
+export type CardAttributes = "unused";
+export type { CardEvents } from "./types";
+export default function Card({ title }: { title: string }) {
+  const emit = defineEmits<{ open: [] }>();
+  return <button type="button" onClick={() => emit("open")}>{title}</button>;
+}`)
+    ).get("Card")!;
+    expect(exported).toContain('export type CardAttributes = "unused";');
+    expect(exported).toContain('export type { CardEvents } from "./types";');
+    expect(exported).not.toMatch(/interface CardEvents\b/);
+    expect(exported).not.toMatch(/interface CardAttributes\b/);
+    // A type import the resolver records, which only a local type declaration reads.
+    const { module } = analyze(
+      parseModule(
+        "Fixture.uf.tsx",
+        `import { defineEmits } from "unframework";
+export default function Card({ title }: { title: string }) {
+  const emit = defineEmits<{ open: [] }>();
+  return <button type="button" onClick={() => emit("open")}>{title}</button>;
+}`,
+      ),
+    );
+    const span = { start: 0, end: 0 };
+    const withImport = {
+      ...module!,
+      typeImports: [
+        {
+          specifier: "./types",
+          names: [{ imported: "CardEvents", local: "CardEvents", span }],
+          span,
+        },
+      ],
+    };
+    const [file] = target.emit(withImport.components[0]!, {
+      module: withImport,
+      options: undefined,
+      report: () => {},
+    });
+    const imported = file!.contents;
+    expect(imported).not.toMatch(/interface CardEvents\b/);
+  });
+
   it("writes the module's type exports in source order among the types it copies", async () => {
     const button = (
       await outputs(`export type Tone = "primary" | "secondary";