@assure-one/design-system 1.33.0 → 1.35.0

package/codemods/transforms/cm-04-button-variant-intent.mjs

@@ -0,0 +1,223 @@
+/**
+ * CM-04 — Button family: legacy single-axis `variant` → the `variant` +
+ * `intent` pair (class R; plan §29 seq 5, registry `C-BTN-VAR`, `C-BTN-ACCENT`).
+ *
+ * W3-02 gave `Button`, `LinkButton` and `SubmitButton` the two axes of
+ * ADR-007 — `variant` is the emphasis, `intent` the meaning — and kept the
+ * single-axis words as deprecated aliases, each a fixed pair
+ * (`LEGACY_BUTTON_VARIANTS` in `src/primitives/behavior/button-base.ts`,
+ * ADR-007 §4). Every alias renders the exact classes it always did, so the
+ * rewrite is pixel-neutral:
+ *
+ * | legacy word   | becomes                              | `intent` written?                        |
+ * | ------------- | ------------------------------------ | ---------------------------------------- |
+ * | `primary`     | `variant="solid"`                    | no — `brand` is what `solid` defaults to |
+ * | `secondary`   | `variant="soft"`                     | no — `neutral` is `soft`'s default        |
+ * | `destructive` | `variant="solid" intent="danger"`    | yes                                      |
+ * | `success`     | `variant="solid" intent="success"`   | yes                                      |
+ * | `accent`      | left alone, reported                 | its suite-action colour has no pair (D13) |
+ * | `dashed`      | left alone, reported                 | its dashed border has no pair (2.x alias) |
+ *
+ * `intent` is omitted where it equals what the new emphasis resolves on its
+ * own (`DEFAULT_BUTTON_INTENT`), so the output is the smallest call that
+ * renders today's pixels. `ghost`, `outline` and `link` are emphases already
+ * and are not touched.
+ *
+ * ## What it reports
+ *
+ * | rule                    | action  | severity | why                                                                          |
+ * | ----------------------- | ------- | -------- | ---------------------------------------------------------------------------- |
+ * | `variant-split`         | applied | low      | the alias became its pair (or its emphasis alone, when the intent is the default) |
+ * | `destructive-as-danger` | applied | medium   | `destructive` → `solid` + `danger`: the word moves to D4's default (`danger` canonical, ADR-007 §5); a human confirms |
+ * | `legacy-look`           | review  | medium   | `accent` (D13) and `dashed` have a look no pair renders; they stay until decided / 2.x |
+ * | `dynamic-intent`        | review  | medium   | a legacy word next to `intent={expr}` whose alias intent is not the new emphasis's default: when the expression is `undefined` the alias renders its own intent, the new word its default |
+ * | `dynamic-variant`       | review  | high     | `variant={expr}`: the value is not visible here; map it by hand               |
+ * | `spread-props`          | review  | medium   | `{...props}` may carry `variant` or `intent`; rewriting the literal could change which wins |
+ * | `unknown-variant`       | review  | high     | a word the Button never accepted                                              |
+ *
+ * A legacy word next to a **literal** `intent` (`variant="destructive"
+ * intent="success"`) is rewritten to its emphasis only: the intent already
+ * wins on both sides of the rewrite (ADR-007 §4, `resolveButtonStyle`).
+ * `intent="destructive"` is not touched — that is CM-17, gated by D4.
+ *
+ * Elements that already speak the new words are not touched (idempotency).
+ * Local components with the same names are not touched; test files are
+ * skipped, as by the scanner that measures C-BTN-VAR.
+ */
+import { analyseForms } from "../lib/forms.mjs";
+import { applyEdits, insertAttribute, openingOf, replaceAttribute } from "../lib/jsx-edit.mjs";
+
+export const meta = {
+  id: "CM-04",
+  title: "Button family: legacy variant → variant + intent",
+  class: "R",
+  oneShot: false,
+  requires: { codemods: [], dsVersion: null },
+  parses: ["code"],
+  includeTests: false,
+  usesTypeScript: true,
+  usesPostcss: false,
+  registryIds: ["C-BTN-VAR", "C-BTN-ACCENT"],
+};
+
+/** The design-system components that read `buttonVariants` (W3-02). */
+export const BUTTONS = new Set(["Button", "LinkButton", "SubmitButton"]);
+
+/**
+ * The legacy alias map — `LEGACY_BUTTON_VARIANTS` of
+ * `src/primitives/behavior/button-base.ts`, row for row (ADR-007 §4). A row
+ * with a `look` is a legacy-only look: no pair renders it, so the word stays.
+ * `tests/codemods/cm-04.test.mjs` checks this table against the source.
+ */
+export const LEGACY_VARIANTS = {
+  primary: { variant: "solid", intent: "brand" },
+  secondary: { variant: "soft", intent: "neutral" },
+  destructive: { variant: "solid", intent: "danger" },
+  success: { variant: "solid", intent: "success" },
+  accent: { variant: "solid", intent: "brand", look: "accent" },
+  dashed: { variant: "outline", intent: "neutral", look: "dashed" },
+};
+
+/**
+ * The intent each emphasis renders when only `variant` is passed —
+ * `DEFAULT_BUTTON_INTENT` of button-base.ts (ADR-007 §3). Where the alias
+ * intent equals this, `intent` is omitted from the output.
+ */
+export const DEFAULT_INTENT = {
+  solid: "brand",
+  soft: "neutral",
+  outline: "neutral",
+  ghost: "neutral",
+  link: "brand",
+};
+
+/** The emphases: already vocabulary, never rewritten. */
+export const EMPHASES = new Set(Object.keys(DEFAULT_INTENT));
+
+/** The registry contract a legacy word belongs to. */
+export const contractOf = (word) => (word === "accent" ? "C-BTN-ACCENT" : "C-BTN-VAR");
+
+/**
+ * What a literal legacy `variant` becomes, or null when the word is not a
+ * legacy alias: `{ rule, action, severity, variant, intent }`, `intent` being
+ * `null` when it is the new emphasis's default and is left out.
+ */
+export function classifyVariant(word) {
+  const pair = LEGACY_VARIANTS[word];
+  if (!pair) return null;
+  if (pair.look) return { rule: "legacy-look", action: "review", severity: "medium" };
+  const intent = pair.intent === DEFAULT_INTENT[pair.variant] ? null : pair.intent;
+  if (word === "destructive") {
+    return {
+      rule: "destructive-as-danger",
+      action: "applied",
+      severity: "medium",
+      variant: pair.variant,
+      intent,
+    };
+  }
+  return {
+    rule: "variant-split",
+    action: "applied",
+    severity: "low",
+    variant: pair.variant,
+    intent,
+  };
+}
+
+export function transform(file, { ts }) {
+  const facts = analyseForms(ts, file.source, file.rel);
+  const findings = [];
+  const edits = [];
+
+  for (const el of facts.elements) {
+    if (!el.isDs || !BUTTONS.has(el.base) || el.component !== el.base) continue;
+    const variant = el.props.get("variant");
+    if (!variant) continue;
+    const word = variant.expression || variant.literals.length !== 1 ? null : variant.literals[0];
+    if (word !== null && EMPHASES.has(word)) continue;
+
+    const intentAttr = el.props.get("intent") ?? null;
+    const base = {
+      line: el.line,
+      registryId: contractOf(word),
+      match: `<${el.tag} variant=${variant.text ?? ""}>`,
+      component: el.component,
+      gate: null,
+      detail: {
+        variant: word,
+        dynamic: variant.expression,
+        intent: intentAttr
+          ? intentAttr.expression
+            ? null
+            : (intentAttr.literals[0] ?? null)
+          : undefined,
+      },
+    };
+    const review = (rule, severity) => findings.push({ ...base, rule, severity, action: "review" });
+
+    if (word === null) {
+      review("dynamic-variant", "high");
+      continue;
+    }
+    if (el.spread) {
+      review("spread-props", "medium");
+      continue;
+    }
+    const outcome = classifyVariant(word);
+    if (!outcome) {
+      review("unknown-variant", "high");
+      continue;
+    }
+    if (outcome.action === "review") {
+      review(outcome.rule, outcome.severity);
+      continue;
+    }
+    // A dynamic `intent` may be `undefined` at runtime, in which case the
+    // alias renders its own intent and the new emphasis its default: only
+    // safe when the two agree.
+    if (intentAttr && intentAttr.expression && outcome.intent !== null) {
+      review("dynamic-intent", "medium");
+      continue;
+    }
+
+    const opening = openingOf(ts, el.node);
+    const replaced = replaceAttribute(
+      ts,
+      facts.sf,
+      opening,
+      "variant",
+      `variant="${outcome.variant}"`,
+    );
+    if (!replaced) {
+      review("dynamic-variant", "high");
+      continue;
+    }
+    edits.push(replaced);
+    const writesIntent = outcome.intent !== null && !intentAttr;
+    if (writesIntent) {
+      edits.push(
+        insertAttribute(ts, facts.sf, opening, `intent="${outcome.intent}"`, { after: "variant" }),
+      );
+    }
+    findings.push({
+      ...base,
+      rule: outcome.rule,
+      severity: outcome.severity,
+      action: "applied",
+      detail: {
+        ...base.detail,
+        variant: word,
+        emphasis: outcome.variant,
+        intent: writesIntent ? outcome.intent : base.detail.intent,
+      },
+    });
+  }
+
+  return {
+    output: edits.length ? applyEdits(file.source, edits) : file.source,
+    findings,
+    notTransformed: [],
+    parseErrors: facts.parseErrors,
+  };
+}

package/codemods/transforms/cm-05-button-icon-slots.mjs

@@ -0,0 +1,117 @@
+/**
+ * CM-05 — Button family: `iconLeft` / `iconRight` → `iconStart` / `iconEnd`
+ * (class A; plan §29 seq 1, registry `C-BTN-ICONPROPS`).
+ *
+ * W3-07 named the two icon slots of `Button`, `LinkButton` and `SubmitButton`
+ * logically — `iconStart` is the left in LTR and the right in RTL — and kept
+ * `iconLeft` / `iconRight` as deprecated aliases of the same slots
+ * (`ButtonIconProps`, `resolveButtonIcons` in
+ * `src/primitives/behavior/button-base.ts`). Each alias is the same slot under
+ * another name, so the rename is a pure rename: only the attribute's name is
+ * replaced and its value — a one-line icon or a multi-line element — keeps its
+ * text and its formatting.
+ *
+ * | rule           | registry       | what happens                              |
+ * | -------------- | -------------- | ----------------------------------------- |
+ * | `icon-renamed` | C-BTN-ICONPROPS | `iconLeft` → `iconStart`, `iconRight` → `iconEnd` |
+ *
+ * ## What it leaves alone, and lists under "could not be transformed"
+ *
+ * - An element that passes **both names of one side** (`iconStart` and
+ *   `iconLeft`): the component throws on that in development — two names,
+ *   one slot — and a rename would turn the error into a duplicate attribute.
+ *   Neither side of that element is touched; a human deletes one.
+ * - An element with a spread (`<Button iconLeft={…} {...props}>`): the spread
+ *   may carry either name for the same slot, and which one wins depends on
+ *   the order of the attributes — renaming the literal could change it.
+ *
+ * Elements that already use the new names are not touched (idempotency).
+ * Local components with the same names are not touched; test files are
+ * skipped, as by the scanner that measures C-BTN-ICONPROPS.
+ */
+import { analyseForms } from "../lib/forms.mjs";
+import { applyEdits, openingOf, renameAttribute } from "../lib/jsx-edit.mjs";
+
+export const meta = {
+  id: "CM-05",
+  title: "Button family: iconLeft/iconRight → iconStart/iconEnd",
+  class: "A",
+  oneShot: false,
+  requires: { codemods: [], dsVersion: null },
+  parses: ["code"],
+  includeTests: false,
+  usesTypeScript: true,
+  usesPostcss: false,
+  registryIds: ["C-BTN-ICONPROPS"],
+};
+
+/** The design-system components with the two icon slots (W3-07). */
+export const ICON_BUTTONS = new Set(["Button", "LinkButton", "SubmitButton"]);
+
+/**
+ * Deprecated alias → the slot it names (`ButtonIconProps` of button-base.ts).
+ * `tests/codemods/cm-05.test.mjs` checks it against the source.
+ */
+export const ICON_SLOTS = {
+  iconLeft: "iconStart",
+  iconRight: "iconEnd",
+};
+
+export function transform(file, { ts }) {
+  const facts = analyseForms(ts, file.source, file.rel);
+  const findings = [];
+  const notTransformed = [];
+  const edits = [];
+
+  for (const el of facts.elements) {
+    if (!el.isDs || !ICON_BUTTONS.has(el.base) || el.component !== el.base) continue;
+    const legacy = Object.keys(ICON_SLOTS).filter((name) => el.props.has(name));
+    if (!legacy.length) continue;
+
+    const clashes = legacy.filter((name) => el.props.has(ICON_SLOTS[name]));
+    if (clashes.length) {
+      notTransformed.push({
+        line: el.line,
+        reason: "both-names",
+        detail: `<${el.tag}> passes ${clashes
+          .map((name) => `\`${name}\` and \`${ICON_SLOTS[name]}\``)
+          .join(" and ")} — one slot, two names; delete the deprecated one by hand`,
+      });
+      continue;
+    }
+    if (el.spread) {
+      notTransformed.push({
+        line: el.line,
+        reason: "spread-props",
+        detail: `<${el.tag} {…}> — the spread may carry \`${legacy
+          .map((name) => ICON_SLOTS[name])
+          .join("\` or \`")}\` for the same slot; rename by hand once you know it does not`,
+      });
+      continue;
+    }
+
+    const opening = openingOf(ts, el.node);
+    for (const name of legacy) {
+      const edit = renameAttribute(ts, facts.sf, opening, name, ICON_SLOTS[name]);
+      if (!edit) continue;
+      edits.push(edit);
+      findings.push({
+        line: el.props.get(name).line,
+        registryId: "C-BTN-ICONPROPS",
+        rule: "icon-renamed",
+        match: `<${el.tag} ${name}>`,
+        component: el.component,
+        action: "applied",
+        gate: null,
+        detail: { from: name, to: ICON_SLOTS[name] },
+      });
+    }
+  }
+
+  return {
+    output: edits.length ? applyEdits(file.source, edits) : file.source,
+    findings,
+    notTransformed,
+    parseErrors: facts.parseErrors,
+  };
+}

package/codemods/transforms/cm-06-tone-to-intent.mjs

@@ -0,0 +1,190 @@
+/**
+ * CM-06 — `tone=` → `intent=` on StatusDot, IconTile, Spinner, SegmentedProgress
+ * and SuiteProgress (class R; plan §29 seq 6, registry `C-TONE`).
+ *
+ * W3-21 gave the five components the shared `intent` axis of ADR-007 and kept
+ * `tone` as a deprecated alias. Every legacy word resolves to one intent and
+ * renders the same classes, so the rename is pixel-neutral; the value map is
+ * the components' own alias tables (`STATUS_DOT_TONE_TO_INTENT`, …):
+ *
+ * | component         | `tone` → `intent`                                                          |
+ * | ----------------- | -------------------------------------------------------------------------- |
+ * | StatusDot         | `pro` → `brand`; `danger` `warning` `info` `success` `neutral` unchanged   |
+ * | IconTile          | `pro` → `brand`; status words unchanged; `audit` `books` `tax` → review    |
+ * | Spinner           | `muted` → `neutral`, `accent` → `info`, `destructive` → `danger`, `current` → removed (the default); `success` `warning` unchanged |
+ * | SegmentedProgress | `default` → `brand`, `destructive` → `danger`; `success` `warning` `info` unchanged; `tax` `audit` `accounting` → review |
+ * | SuiteProgress     | `pro` → `brand`; `audit` `books` `tax` → review                            |
+ *
+ * ## What it reports
+ *
+ * | rule            | action  | severity | why                                                                          |
+ * | --------------- | ------- | -------- | ---------------------------------------------------------------------------- |
+ * | `tone-renamed`  | applied | low      | same word on the new axis (or `default` → `brand`, `destructive` → `danger`) |
+ * | `pro-as-brand`  | applied | medium   | `pro` is the brand colour — unless the call site meant "generic purple" (Portal's firm-branded context); a human confirms |
+ * | `tone-removed`  | applied | low      | `tone="current"` on Spinner is the default; the attribute goes                |
+ * | `product-tone`  | review  | medium   | `audit` `books` `tax` `accounting` are product hues, never intents (ADR-007 §2): they stay on `tone` until the products own a service → colour map |
+ * | `dynamic-tone`  | review  | high     | `tone={expr}`: the value is not visible here; map it by hand                  |
+ * | `spread-props`  | review  | medium   | `{...props}` may carry `tone` too; renaming the literal could change which one wins |
+ * | `has-intent`    | review  | low      | both axes present; `intent` already wins, delete `tone` by hand               |
+ * | `unknown-tone`  | review  | high     | a word the component never accepted                                            |
+ *
+ * Elements that already speak `intent` and have no `tone` are not touched
+ * (idempotency). Local components with the same names are not touched; test
+ * files are skipped, as by the scanner that measures C-TONE.
+ */
+import { analyseForms } from "../lib/forms.mjs";
+import { applyEdits, openingOf, removeAttribute, replaceAttribute } from "../lib/jsx-edit.mjs";
+
+export const meta = {
+  id: "CM-06",
+  title: "tone → intent on StatusDot, IconTile, Spinner, SegmentedProgress and SuiteProgress",
+  class: "R",
+  oneShot: false,
+  requires: { codemods: [], dsVersion: null },
+  parses: ["code"],
+  includeTests: false,
+  usesTypeScript: true,
+  usesPostcss: false,
+  registryIds: ["C-TONE"],
+};
+
+/** Marker: the legacy word has no intent and stays on `tone` (a product hue). */
+export const PRODUCT = Symbol("product-tone");
+/** Marker: the legacy word is the default and the attribute is simply removed. */
+export const REMOVE = Symbol("remove");
+
+/**
+ * `tone` → `intent` per component (mirrors the alias tables in
+ * src/primitives/{status-dot,icon-tile,spinner,segmented-progress,suite-progress}.tsx).
+ */
+export const TONE_MAP = {
+  StatusDot: {
+    danger: "danger",
+    warning: "warning",
+    info: "info",
+    success: "success",
+    pro: "brand",
+    neutral: "neutral",
+  },
+  IconTile: {
+    pro: "brand",
+    neutral: "neutral",
+    info: "info",
+    success: "success",
+    warning: "warning",
+    danger: "danger",
+    audit: PRODUCT,
+    books: PRODUCT,
+    tax: PRODUCT,
+  },
+  Spinner: {
+    current: REMOVE,
+    muted: "neutral",
+    accent: "info",
+    success: "success",
+    warning: "warning",
+    destructive: "danger",
+  },
+  SegmentedProgress: {
+    default: "brand",
+    success: "success",
+    warning: "warning",
+    destructive: "danger",
+    info: "info",
+    tax: PRODUCT,
+    audit: PRODUCT,
+    accounting: PRODUCT,
+  },
+  SuiteProgress: {
+    pro: "brand",
+    audit: PRODUCT,
+    books: PRODUCT,
+    tax: PRODUCT,
+  },
+};
+
+export const TONED_COMPONENTS = new Set(Object.keys(TONE_MAP));
+
+/** The rule a literal tone falls under, or null when the word is unknown. */
+export function classifyTone(component, tone) {
+  const target = TONE_MAP[component]?.[tone];
+  if (target === undefined) return null;
+  if (target === PRODUCT) return { rule: "product-tone", action: "review", severity: "medium" };
+  if (target === REMOVE)
+    return { rule: "tone-removed", action: "applied", severity: "low", intent: null };
+  if (tone === "pro")
+    return { rule: "pro-as-brand", action: "applied", severity: "medium", intent: target };
+  return { rule: "tone-renamed", action: "applied", severity: "low", intent: target };
+}
+
+export function transform(file, { ts }) {
+  const facts = analyseForms(ts, file.source, file.rel);
+  const findings = [];
+  const edits = [];
+
+  for (const el of facts.elements) {
+    if (!el.isDs || !TONED_COMPONENTS.has(el.base) || el.component !== el.base) continue;
+    const tone = el.props.get("tone");
+    if (!tone) continue;
+
+    const base = {
+      line: el.line,
+      registryId: "C-TONE",
+      match: `<${el.tag} tone=${tone.text ?? ""}>`,
+      component: el.component,
+      gate: null,
+      detail: {
+        tone: tone.expression ? null : (tone.literals[0] ?? null),
+        dynamic: tone.expression,
+      },
+    };
+    const review = (rule, severity) => findings.push({ ...base, rule, severity, action: "review" });
+
+    if (tone.expression || tone.literals.length !== 1) {
+      review("dynamic-tone", "high");
+      continue;
+    }
+    if (el.spread) {
+      review("spread-props", "medium");
+      continue;
+    }
+    if (el.props.has("intent")) {
+      review("has-intent", "low");
+      continue;
+    }
+    const word = tone.literals[0];
+    const outcome = classifyTone(el.base, word);
+    if (!outcome) {
+      review("unknown-tone", "high");
+      continue;
+    }
+    if (outcome.action === "review") {
+      review(outcome.rule, outcome.severity);
+      continue;
+    }
+    const opening = openingOf(ts, el.node);
+    const edit =
+      outcome.intent === null
+        ? removeAttribute(ts, facts.sf, opening, "tone")
+        : replaceAttribute(ts, facts.sf, opening, "tone", `intent="${outcome.intent}"`);
+    if (!edit) {
+      review("dynamic-tone", "high");
+      continue;
+    }
+    edits.push(edit);
+    findings.push({
+      ...base,
+      rule: outcome.rule,
+      severity: outcome.severity,
+      action: "applied",
+      detail: { ...base.detail, intent: outcome.intent },
+    });
+  }
+
+  return {
+    output: edits.length ? applyEdits(file.source, edits) : file.source,
+    findings,
+    notTransformed: [],
+    parseErrors: facts.parseErrors,
+  };
+}

package/codemods/transforms/cm-12-button-type-submit.mjs

@@ -0,0 +1,115 @@
+/**
+ * CM-12 — Button: `type="submit"` where the intent is evident, a report for
+ * the rest (class R; plan §29 seq 8, registry `C-BTN-TYPE`, feeds 2.0 gate
+ * G4).
+ *
+ * A `Button` that passes no `type` renders `<button>` without one, which the
+ * browser treats as `type="submit"`: inside a `<form>` it submits. 65% of the
+ * applications' Buttons pass no `type`, and the design system flips the
+ * default to `"button"` in 2.0 (W9-05) — a change that silently stops a form
+ * from submitting wherever the untyped Button was the submitter. CM-12
+ * writes down, before the flip, which Buttons submit **on purpose**.
+ *
+ * ## What it changes
+ *
+ * Only what is evident from the file itself: an untyped design-system
+ * `Button` that is lexically inside a lower-case `<form>` element **in the
+ * same file**, has no `onClick` and no spread gets `type="submit"`. That
+ * states what the browser does today, so the edit is behaviour-neutral; the
+ * report lists it (rule `submit-in-form`) because a human still has to agree
+ * that submitting is what the button is for — a "Cancel" that matches this
+ * shape is a bug today, and the codemod has just made it visible.
+ *
+ * ## What it reports and leaves to a human
+ *
+ * | rule               | severity | why a human decides                                                            |
+ * | ------------------ | -------- | ------------------------------------------------------------------------------ |
+ * | `in-form-onclick`  | high     | inside a `<form>` with an `onClick`: submit with side effects, or a plain button? |
+ * | `in-form-spread`   | high     | inside a `<form>` with `{...props}`: the spread may or may not carry `type`     |
+ * | `outside-form`     | low      | no `<form>` in this file; if the component is rendered in one elsewhere, it submits today |
+ *
+ * Choosing `submit` or `button` is behaviour, which plan §29 never automates
+ * beyond the evident case. Nothing is followed across files: a component
+ * defined in this file and rendered inside a `<form>` by another is
+ * `outside-form`. A capitalised `<Form>` is not a form element (the
+ * react-hook-form / shadcn `Form` is a context provider), so it does not
+ * count.
+ *
+ * Not reported: `SubmitButton` (always `type="submit"`), `LinkButton` (an
+ * anchor), a Button with any `type` — literal or dynamic — and a Button with
+ * `asChild` (it renders its child, `type` does not apply to it). Test files
+ * are skipped, as by the scanner that measures G4.
+ */
+import { analyseForms } from "../lib/forms.mjs";
+import { applyInsertions, insertAttribute, openingOf } from "../lib/jsx-edit.mjs";
+
+export const meta = {
+  id: "CM-12",
+  title: 'Button: type="submit" on evident form submitters, a review list for the rest',
+  class: "R",
+  oneShot: false,
+  requires: { codemods: [], dsVersion: null },
+  parses: ["code"],
+  includeTests: false,
+  usesTypeScript: true,
+  usesPostcss: false,
+  registryIds: ["C-BTN-TYPE"],
+};
+
+/** The one design-system component whose untyped rendering submits. */
+export const TYPED_BUTTON = "Button";
+
+/** The element that gives an untyped button a form to submit. Lower-case only. */
+export const FORM_TAG = "form";
+
+/** Whether the element has a lower-case `<form>` ancestor in this file. */
+export function insideForm(elements, el) {
+  for (let i = el.parent; i !== null; i = elements[i].parent) {
+    if (elements[i].tag === FORM_TAG) return true;
+  }
+  return false;
+}
+
+export function transform(file, { ts }) {
+  const facts = analyseForms(ts, file.source, file.rel);
+  const findings = [];
+  const edits = [];
+
+  for (const el of facts.elements) {
+    if (!el.isDs || el.base !== TYPED_BUTTON || el.component !== el.base) continue;
+    if (el.props.has("type") || el.props.has("asChild")) continue;
+
+    const inForm = insideForm(facts.elements, el);
+    const onClick = el.props.has("onClick");
+    const base = {
+      line: el.line,
+      registryId: "C-BTN-TYPE",
+      match: `<${el.tag}>`,
+      component: el.component,
+      gate: "G4",
+      detail: { inForm, onClick, spread: el.spread },
+    };
+
+    if (!inForm) {
+      findings.push({ ...base, rule: "outside-form", severity: "low", action: "review" });
+      continue;
+    }
+    if (el.spread) {
+      findings.push({ ...base, rule: "in-form-spread", severity: "high", action: "review" });
+      continue;
+    }
+    if (onClick) {
+      findings.push({ ...base, rule: "in-form-onclick", severity: "high", action: "review" });
+      continue;
+    }
+    edits.push(insertAttribute(ts, facts.sf, openingOf(ts, el.node), 'type="submit"'));
+    findings.push({ ...base, rule: "submit-in-form", severity: "medium", action: "applied" });
+  }
+
+  return {
+    output: edits.length ? applyInsertions(file.source, edits) : file.source,
+    findings,
+    notTransformed: [],
+    parseErrors: facts.parseErrors,
+  };
+}