@assure-one/design-system 1.36.0 → 1.37.0

package/codemods/README.md

@@ -110,6 +110,7 @@ the list a human has to pick up — spread props, dynamic expressions, conflicti
 | Id    | Class | What it does                                                                                                                                                                  |
 | ----- | ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | CM-05 | A     | Button family `iconLeft` / `iconRight` → `iconStart` / `iconEnd` (pure rename; both names of one slot, spreads → "could not be transformed")                                  |
+| CM-13 | A     | `Tooltip delayMs` → `delayDuration` (pure rename, literal or dynamic value; both names, spreads → "could not be transformed")                                                 |
 | CM-07 | A     | `inputSize` → `size` on `Input`, `Textarea`, `SearchInput` (pure rename, literal or dynamic value; both names, spreads → "could not be transformed")                          |
 | CM-02 | A     | Button explicit default size: `size="md"` on every `Button`, `SubmitButton` and `LinkButton` that passes no `size` (pixel-neutral)                                            |
 | CM-04 | R     | Button family legacy `variant` → `variant` + `intent` pair (`primary` → `solid`, `destructive` → `solid` + `danger`, …); `accent`, `dashed`, dynamic → report                 |
@@ -118,6 +119,7 @@ the list a human has to pick up — spread props, dynamic expressions, conflicti
 | CM-12 | R     | Button `type="submit"` where the intent is evident (inside `<form>` in the same file, no `onClick`); everything else untyped → report                                         |
 | CM-10 | R     | `DatePicker onChange={e => f(e.target.value)}` → `onValueChange={value => f(value)}` for the recognisable arrow shapes; handlers by reference, other shapes → report          |
 | CM-08 | R     | `SearchSelect` → `Combobox`: single-mode call sites rewritten (tag, import, `{id,label}` accessors, placeholder → `aria-label`); multi API, extras and unnamed sites → report |
+| CM-09 | R     | `SideDrawer` → `Sheet`: drawers with a `SideDrawer.Header` rewritten (root → `Sheet` + `SheetContent side size`, `onClose` → `onOpenChange`, header → `SheetHeader`/`SheetTitle`/`SheetDescription`, Body/Footer → `SheetBody`/`SheetFooter`, import); no header, dynamic width, spreads → report |
 | CM-14 | X     | hidden-input mirror finder: hidden `<input name>` a consumer added because a design-system control posts nothing                                                              |
 | CM-15 | X     | DOM-selector finder: consumer code that depends on the internal DOM of design-system components, mapped to registry `C-DOM-*` ids                                             |
 | CM-16 | X     | `globals.css` analyser: `@source` into the package, duplicate preflight, colliding `@theme` keys, unlayered globals, legacy `var()`                                           |
@@ -149,6 +151,27 @@ the same slot, and which one wins depends on attribute order). Not touched and
 not reported: elements already on the new names, local components with the
 same names, test files.
 
+### CM-13 — `Tooltip delayMs` → `delayDuration`
+
+Class A. W5-12 made `delayMs` a deprecated alias of Radix's `delayDuration`
+on the design-system `Tooltip` (contract C-TOOLTIP-DELAY, removed in 3.0).
+Both name the same milliseconds and `delayDuration` wins when both are
+given, so the rename is behaviour-neutral and a pure rename: only the
+attribute's name is replaced, and its value — a literal or a dynamic
+`delayMs={slow ? 700 : 300}` — keeps its text and formatting. Aliased and
+namespace imports count.
+
+| rule            | Contract        | What happens                        |
+| --------------- | --------------- | ----------------------------------- |
+| `delay-renamed` | C-TOOLTIP-DELAY | `delayMs={…}` → `delayDuration={…}` |
+
+Not touched, and listed under "could not be transformed": an element that
+passes **both** `delayDuration` and `delayMs` (`delayDuration` already wins;
+a rename would make a duplicate attribute — delete `delayMs` by hand), and an
+element with a spread (`<Tooltip delayMs={300} {...props}>` — the spread may
+carry `delayDuration`). Not touched and not reported: elements already on
+`delayDuration`, local components called Tooltip, test files.
+
 ### CM-07 — `inputSize` → `size` on Input, Textarea, SearchInput
 
 Class A. W4-05/06/07 put the three text controls on the control scale:
@@ -440,6 +463,36 @@ reported for a human.
 Not touched: elements already on `Combobox` (idempotency), local components
 with the same name, test files.
 
+### CM-09 — `SideDrawer` → `Sheet`
+
+Class R. W5-08 made `SideDrawer` a deprecated adapter over `Sheet` (contract
+C-SIDEDRAWER, removed in 3.0). A drawer **with a `SideDrawer.Header`** is
+rewritten: the root becomes `Sheet` with `onOpenChange={(open) => !open &&
+onClose()}` (a handler by reference is called, an arrow with an expression
+body is inlined, anything else is called through `(expr)()`); the children
+move into a `SheetContent` that carries the `side` and the mapped `size`
+(`sm` → `sm`, `md` → `lg`; `lg` and the omitted default, 50vw, become `xl`
+and are reported); the header's `title` and `subtitle` become `SheetTitle` and
+`SheetDescription` inside `SheetHeader`; `SideDrawer.Body` / `.Footer` become
+`SheetBody` / `SheetFooter` with their `className`. A header that had its own
+`onClose` button hands the job to the sheet's built-in close button; one that
+had none gets `showCloseButton={false}`. The named import follows once no
+`SideDrawer` element is left in the file.
+
+| rule                | Contract     | What happens                                                                                                             |
+| ------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------ |
+| `renamed`           | C-SIDEDRAWER | root, content, parts and import rewritten (applied, low)                                                                 |
+| `width-approximate` | C-SIDEDRAWER | `width="lg"` or no `width` (50vw) → `size="xl"` (760px); set `--ds-sheet-width` for an exact width (applied, **medium**) |
+| `header-close`      | C-SIDEDRAWER | the header's close button is now the sheet's built-in one, last child of the content (applied, low)                      |
+| `rendering`         | C-SIDEDRAWER | the Sheet parts pad differently (`p-6` header and footer, `px-6` body) and draw no rules between them (applied, low)     |
+| `no-header`         | C-SIDEDRAWER | a drawer without `SideDrawer.Header` has no title to become the `SheetTitle`: left alone (review, high)                  |
+| `width-dynamic`     | C-SIDEDRAWER | `width={expr}` has no `size` step: left alone (review, high)                                                             |
+| `spread-props`      | C-SIDEDRAWER | `{...props}` on the drawer or a part may carry any of the above: left alone (review, medium)                             |
+
+Not touched: elements already on `Sheet` (idempotency), local components with
+the same name, test files. The rewritten children are re-indented one level;
+run the project's formatter afterwards.
+
 ### CM-15 — DOM-selector finder
 
 Report-only. It never modifies a file; the runner throws if it tries. What it

package/codemods/lib/registry.mjs

@@ -4,6 +4,7 @@
  */
 export const CODEMODS = [
   { id: "CM-05", module: "../transforms/cm-05-button-icon-slots.mjs" },
+  { id: "CM-13", module: "../transforms/cm-13-tooltip-delay.mjs" },
   { id: "CM-07", module: "../transforms/cm-07-input-size.mjs" },
   { id: "CM-02", module: "../transforms/cm-02-button-explicit-size.mjs" },
   { id: "CM-04", module: "../transforms/cm-04-button-variant-intent.mjs" },
@@ -12,6 +13,7 @@ export const CODEMODS = [
   { id: "CM-12", module: "../transforms/cm-12-button-type-submit.mjs" },
   { id: "CM-10", module: "../transforms/cm-10-date-picker-value-change.mjs" },
   { id: "CM-08", module: "../transforms/cm-08-search-select-to-combobox.mjs" },
+  { id: "CM-09", module: "../transforms/cm-09-side-drawer-to-sheet.mjs" },
   { id: "CM-14", module: "../transforms/cm-14-hidden-mirrors.mjs" },
   { id: "CM-15", module: "../transforms/cm-15-dom-selectors.mjs" },
   { id: "CM-16", module: "../transforms/cm-16-globals-css.mjs" },

package/codemods/transforms/cm-09-side-drawer-to-sheet.mjs

@@ -0,0 +1,348 @@
+/**
+ * CM-09 — `SideDrawer` → `Sheet` (class R; plan §29 seq 11, registry
+ * `C-SIDEDRAWER`, lands with W5-08).
+ *
+ * W5-08 turned `SideDrawer` into a deprecated adapter over `Sheet`. A drawer
+ * with a `SideDrawer.Header` is a mechanical rewrite onto the Sheet parts;
+ * what has no Sheet equivalent is reported for a human.
+ *
+ * ## What it rewrites
+ *
+ * ```tsx
+ * <SideDrawer open={open} onClose={onClose} width="md" side="left">
+ *   <SideDrawer.Header title={name} subtitle="…" onClose={onClose} />
+ *   <SideDrawer.Body className="…">…</SideDrawer.Body>
+ *   <SideDrawer.Footer>…</SideDrawer.Footer>
+ * </SideDrawer>
+ * ```
+ *
+ * becomes
+ *
+ * ```tsx
+ * <Sheet open={open} onOpenChange={(open) => !open && onClose()}>
+ *   <SheetContent side="left" size="lg">
+ *     <SheetHeader>
+ *       <SheetTitle>{name}</SheetTitle>
+ *       <SheetDescription>…</SheetDescription>
+ *     </SheetHeader>
+ *     <SheetBody className="…">…</SheetBody>
+ *     <SheetFooter>…</SheetFooter>
+ *   </SheetContent>
+ * </Sheet>
+ * ```
+ *
+ * - `onClose` → `onOpenChange`: a handler by reference is called, an arrow
+ *   with an expression body is inlined, anything else is called through
+ *   `(expr)()`
+ * - `width` → `size` on the content: `sm` → `sm` (420px), `md` → `lg`
+ *   (640px); `lg` (50vw) and the omitted default have no step and become
+ *   `xl` (760px), reported as `width-approximate`
+ * - `side` moves to the content
+ * - `SideDrawer.Header title subtitle` → `SheetHeader` with `SheetTitle` and
+ *   `SheetDescription`; the header's `onClose` is dropped because the sheet's
+ *   built-in close button (the last child of the content) closes through
+ *   `onOpenChange`; a header without `onClose` gets `showCloseButton={false}`
+ * - `SideDrawer.Body` → `SheetBody`, `SideDrawer.Footer` → `SheetFooter`
+ *   (`className` kept)
+ * - the named import follows when no `SideDrawer` element is left
+ *
+ * ## What it reports
+ *
+ * | rule                | action  | severity | why                                                                          |
+ * | ------------------- | ------- | -------- | ---------------------------------------------------------------------------- |
+ * | `renamed`           | applied | low      | root, content, parts and import rewritten                                    |
+ * | `width-approximate` | applied | medium   | `lg` / default (50vw) → `xl` (760px); set `--ds-sheet-width` for an exact width |
+ * | `header-close`      | applied | low      | the header's close button is now the sheet's built-in one                    |
+ * | `rendering`         | applied | low      | Sheet parts pad differently (`p-6` header/footer, `px-6` body; no rules between them) |
+ * | `no-header`         | review  | high     | a drawer without `SideDrawer.Header` has no title to become the `SheetTitle` |
+ * | `width-dynamic`     | review  | high     | `width={expr}` cannot be mapped to a `size` step                             |
+ * | `spread-props`      | review  | medium   | `{...props}` on the drawer or a part may carry any of the above              |
+ *
+ * Elements already on `Sheet` are not touched (idempotency). Local components
+ * with the same name are not touched; test files are skipped.
+ */
+import { analyseForms, isWithin } from "../lib/forms.mjs";
+import { applyEdits, openingOf } from "../lib/jsx-edit.mjs";
+
+export const meta = {
+  id: "CM-09",
+  title: "SideDrawer → Sheet (drawers with a header rewritten; the rest reported)",
+  class: "R",
+  oneShot: false,
+  requires: { codemods: [], dsVersion: null },
+  parses: ["code"],
+  includeTests: false,
+  usesTypeScript: true,
+  usesPostcss: false,
+  registryIds: ["C-SIDEDRAWER"],
+};
+
+export const RULES = {
+  renamed: { action: "applied", severity: "low" },
+  "width-approximate": { action: "applied", severity: "medium" },
+  "header-close": { action: "applied", severity: "low" },
+  rendering: { action: "applied", severity: "low" },
+  "no-header": { action: "review", severity: "high" },
+  "width-dynamic": { action: "review", severity: "high" },
+  "spread-props": { action: "review", severity: "medium" },
+};
+
+/** `width` preset → `size` step. `lg` (50vw) has no step; `xl` is the nearest. */
+export const WIDTH_TO_SIZE = { sm: "sm", md: "lg", lg: "xl" };
+
+const PART_TO_SHEET = {
+  "SideDrawer.Header": "SheetHeader",
+  "SideDrawer.Body": "SheetBody",
+  "SideDrawer.Footer": "SheetFooter",
+};
+
+/** Children text for a title/subtitle attribute: a literal becomes text, an expression stays. */
+function childrenOf(ts, sf, attr) {
+  const init = attr.initializer;
+  if (!init) return "";
+  if (ts.isStringLiteral(init)) {
+    return /[{}<>]/.test(init.text) ? `{${init.getText(sf)}}` : init.text;
+  }
+  return init.getText(sf);
+}
+
+/** The `onOpenChange` handler that calls the drawer's `onClose` on close. */
+function closeHandler(ts, sf, attr) {
+  const init = attr.initializer;
+  const inner = init && ts.isJsxExpression(init) ? init.expression : null;
+  if (!inner) return null;
+  if (ts.isIdentifier(inner) || ts.isPropertyAccessExpression(inner)) {
+    return `(open) => !open && ${inner.getText(sf)}()`;
+  }
+  if (ts.isArrowFunction(inner) && inner.parameters.length === 0 && !ts.isBlock(inner.body)) {
+    return `(open) => !open && ${inner.body.getText(sf)}`;
+  }
+  return `(open) => !open && (${inner.getText(sf)})()`;
+}
+
+const attrsOf = (ts, sf, opening) => {
+  const map = new Map();
+  for (const attr of opening.attributes.properties) {
+    if (ts.isJsxAttribute(attr)) map.set(attr.name.getText(sf), attr);
+  }
+  return map;
+};
+
+const indentOf = (sf, node) => {
+  const text = sf.text;
+  const lineStart = text.lastIndexOf("\n", node.getStart(sf)) + 1;
+  return /^[ \t]*/.exec(text.slice(lineStart, node.getStart(sf)))[0];
+};
+
+export function transform(file, { ts }) {
+  const facts = analyseForms(ts, file.source, file.rel);
+  const sf = facts.sf;
+  const findings = [];
+  const edits = [];
+  const needed = new Set();
+  let remaining = 0;
+  let renamedAny = false;
+
+  const drawers = facts.elements.filter(
+    (el) => el.isDs && el.base === "SideDrawer" && el.component === "SideDrawer",
+  );
+
+  for (const el of drawers) {
+    const base = {
+      line: el.line,
+      registryId: "C-SIDEDRAWER",
+      match: `<${el.tag}>`,
+      component: el.component,
+      gate: null,
+      detail: {},
+    };
+    const add = (rule, detail = {}) =>
+      findings.push({ ...base, rule, ...RULES[rule], detail: { ...base.detail, ...detail } });
+
+    const parts = facts.elements.filter(
+      (p) =>
+        p.isDs &&
+        p.base === "SideDrawer" &&
+        p.component !== "SideDrawer" &&
+        isWithin(facts.elements, p.index, el.index) &&
+        !drawers.some(
+          (other) =>
+            other !== el &&
+            isWithin(facts.elements, p.index, other.index) &&
+            isWithin(facts.elements, other.index, el.index),
+        ),
+    );
+    const header = parts.find((p) => p.component === "SideDrawer.Header") ?? null;
+    const width = el.props.get("width");
+
+    let blocked = false;
+    if (el.spread || parts.some((p) => p.spread)) {
+      add("spread-props");
+      blocked = true;
+    }
+    if (width && width.expression) {
+      add("width-dynamic");
+      blocked = true;
+    }
+    if (!header || ts.isJsxElement(header.node)) {
+      add("no-header");
+      blocked = true;
+    }
+    if (blocked || !ts.isJsxElement(el.node)) {
+      remaining += 1;
+      continue;
+    }
+
+    // ── The drawer's own opening tag → <Sheet open onOpenChange> ─────────
+    const opening = el.node.openingElement;
+    const attrs = attrsOf(ts, sf, opening);
+    const inner = [];
+    inner.push({ pos: opening.tagName.getStart(sf), end: opening.tagName.getEnd(), text: "Sheet" });
+    const closing = el.node.closingElement.tagName;
+    inner.push({ pos: closing.getStart(sf), end: closing.getEnd(), text: "Sheet" });
+
+    const onClose = attrs.get("onClose");
+    if (onClose) {
+      const handler = closeHandler(ts, sf, onClose);
+      if (handler) {
+        inner.push({
+          pos: onClose.getStart(sf),
+          end: onClose.getEnd(),
+          text: `onOpenChange={${handler}}`,
+        });
+      }
+    }
+    const removeAttr = (name) => {
+      const list = opening.attributes.properties;
+      const index = list.findIndex((a) => ts.isJsxAttribute(a) && a.name.getText(sf) === name);
+      if (index < 0) return;
+      const from = index === 0 ? opening.attributes.pos : list[index - 1].getEnd();
+      inner.push({ pos: from, end: list[index].getEnd(), text: "" });
+    };
+    removeAttr("width");
+    removeAttr("side");
+
+    // ── The content: side, size, showCloseButton ─────────────────────────
+    const preset = width ? width.literals[0] : "lg";
+    const size = WIDTH_TO_SIZE[preset] ?? "xl";
+    const contentAttrs = [];
+    const side = attrs.get("side");
+    contentAttrs.push(side ? `side=${side.initializer.getText(sf)}` : 'side="right"');
+    contentAttrs.push(`size="${size}"`);
+    const headerAttrs = attrsOf(ts, sf, header.node);
+    if (!headerAttrs.has("onClose")) contentAttrs.push("showCloseButton={false}");
+    needed.add("Sheet").add("SheetContent").add("SheetHeader").add("SheetTitle");
+
+    // ── SideDrawer.Header → SheetHeader with title and description ───────
+    const headerIndent = indentOf(sf, header.node);
+    const headerRows = [];
+    headerRows.push(`<SheetTitle>${childrenOf(ts, sf, headerAttrs.get("title"))}</SheetTitle>`);
+    const subtitle = headerAttrs.get("subtitle");
+    if (subtitle) {
+      needed.add("SheetDescription");
+      const value = childrenOf(ts, sf, subtitle);
+      headerRows.push(
+        subtitle.initializer && ts.isJsxExpression(subtitle.initializer)
+          ? `{${subtitle.initializer.expression.getText(sf)} ? <SheetDescription>${value}</SheetDescription> : null}`
+          : `<SheetDescription>${value}</SheetDescription>`,
+      );
+    }
+    const headerClass = headerAttrs.get("className");
+    const headerOpen = `<SheetHeader${headerClass ? ` ${headerClass.getText(sf)}` : ""}>`;
+    inner.push({
+      pos: header.node.getStart(sf),
+      end: header.node.getEnd(),
+      text: [
+        headerOpen,
+        ...headerRows.map((row) => `${headerIndent}  ${row}`),
+        `${headerIndent}</SheetHeader>`,
+      ].join("\n"),
+    });
+
+    // ── Body / Footer → SheetBody / SheetFooter ──────────────────────────
+    for (const part of parts) {
+      if (part === header) continue;
+      const to = PART_TO_SHEET[part.component];
+      if (!to) continue;
+      needed.add(to);
+      const partOpening = openingOf(ts, part.node);
+      inner.push({
+        pos: partOpening.tagName.getStart(sf),
+        end: partOpening.tagName.getEnd(),
+        text: to,
+      });
+      if (ts.isJsxElement(part.node)) {
+        const tag = part.node.closingElement.tagName;
+        inner.push({ pos: tag.getStart(sf), end: tag.getEnd(), text: to });
+      }
+    }
+
+    // ── Assemble: apply the inner edits to the element's own text, indent
+    // the children one level and wrap them in <SheetContent>. ──────────────
+    const start = el.node.getStart(sf);
+    const end = el.node.getEnd();
+    const local = inner.map((e) => ({ ...e, pos: e.pos - start, end: e.end - start }));
+    const text = applyEdits(file.source.slice(start, end), local);
+    // Where the (edited) opening tag ends: its original length plus what the
+    // edits inside it added or removed.
+    const openingEnd = opening.getEnd() - start;
+    const openEnd = local
+      .filter((e) => e.end <= openingEnd)
+      .reduce((at, e) => at + e.text.length - (e.end - e.pos), openingEnd);
+    const closeStart = text.lastIndexOf("</Sheet>");
+    const indent = indentOf(sf, el.node);
+    const children = text.slice(openEnd, closeStart).replace(/\n(?=[^\n])/g, "\n  ");
+    const trimmed = children.replace(/\s+$/, "");
+    edits.push({
+      pos: start,
+      end,
+      text: `${text.slice(0, openEnd)}\n${indent}  <SheetContent ${contentAttrs.join(" ")}>${trimmed}\n${indent}  </SheetContent>\n${indent}${text.slice(closeStart)}`,
+    });
+
+    renamedAny = true;
+    add("renamed");
+    if (WIDTH_TO_SIZE[preset] === "xl" || !WIDTH_TO_SIZE[preset]) {
+      add("width-approximate", { width: preset, size });
+    }
+    if (headerAttrs.has("onClose")) {
+      add("header-close", {
+        header: headerAttrs.get("onClose").initializer?.getText(sf) ?? null,
+        drawer: onClose?.initializer?.getText(sf) ?? null,
+      });
+    }
+    add("rendering");
+  }
+
+  // The import: `SideDrawer` → the Sheet parts the file now uses, when no
+  // element is left on the old name.
+  if (renamedAny && remaining === 0) {
+    for (const stmt of sf.statements) {
+      if (!ts.isImportDeclaration(stmt) || !ts.isStringLiteral(stmt.moduleSpecifier)) continue;
+      if (!stmt.moduleSpecifier.text.startsWith("@assure-one/design-system")) continue;
+      const bindings = stmt.importClause?.namedBindings;
+      if (!bindings || !ts.isNamedImports(bindings)) continue;
+      const present = new Set(bindings.elements.map((e) => (e.propertyName ?? e.name).text));
+      for (const element of bindings.elements) {
+        const imported = (element.propertyName ?? element.name).text;
+        if (imported !== "SideDrawer" || element.propertyName) continue;
+        const names = [...needed].filter((n) => !present.has(n)).sort();
+        if (names.length) {
+          edits.push({ pos: element.getStart(sf), end: element.getEnd(), text: names.join(", ") });
+        } else {
+          const list = bindings.elements;
+          const index = list.indexOf(element);
+          const from = index === 0 ? element.getStart(sf) : list[index - 1].getEnd();
+          const to = index === 0 && list.length > 1 ? list[1].getStart(sf) : element.getEnd();
+          edits.push({ pos: from, end: to, text: "" });
+        }
+      }
+    }
+  }
+
+  return {
+    output: edits.length ? applyEdits(file.source, edits) : file.source,
+    findings,
+    notTransformed: [],
+    parseErrors: facts.parseErrors,
+  };
+}

package/codemods/transforms/cm-13-tooltip-delay.mjs

@@ -0,0 +1,99 @@
+/**
+ * CM-13 — `Tooltip delayMs` → `delayDuration` (class A; plan §29 seq 2,
+ * registry `C-TOOLTIP-DELAY`).
+ *
+ * W5-12 made `delayMs` a deprecated alias of Radix's `delayDuration` on the
+ * design-system `Tooltip` (`TooltipProps` in `src/primitives/tooltip.tsx`):
+ * both name the same milliseconds and `delayDuration` wins when both are
+ * given, so the rename is behaviour-neutral and a pure rename — only the
+ * attribute's name is replaced; a literal or a dynamic `delayMs={x}` keeps
+ * its value and its formatting.
+ *
+ * | rule            | registry        | what happens                        |
+ * | --------------- | --------------- | ----------------------------------- |
+ * | `delay-renamed` | C-TOOLTIP-DELAY | `delayMs={…}` → `delayDuration={…}` |
+ *
+ * ## What it leaves alone, and lists under "could not be transformed"
+ *
+ * - An element that passes **both** `delayDuration` and `delayMs`:
+ *   `delayDuration` already wins in the component, and a rename would make a
+ *   duplicate attribute. A human deletes `delayMs`.
+ * - An element with a spread (`<Tooltip delayMs={300} {...props}>`): the
+ *   spread may carry `delayDuration`, and which one wins depends on attribute
+ *   order — renaming the literal could change it.
+ *
+ * Elements already on `delayDuration` are not touched (idempotency). Local
+ * components called Tooltip are not touched; test files are skipped, as by
+ * the scanner that measures C-TOOLTIP-DELAY.
+ */
+import { analyseForms } from "../lib/forms.mjs";
+import { applyEdits, openingOf, renameAttribute } from "../lib/jsx-edit.mjs";
+
+export const meta = {
+  id: "CM-13",
+  title: "Tooltip: delayMs → delayDuration",
+  class: "A",
+  oneShot: false,
+  requires: { codemods: [], dsVersion: null },
+  parses: ["code"],
+  includeTests: false,
+  usesTypeScript: true,
+  usesPostcss: false,
+  registryIds: ["C-TOOLTIP-DELAY"],
+};
+
+/** The design-system component that accepts the deprecated `delayMs` (W5-12). */
+export const DELAYED_COMPONENTS = new Set(["Tooltip"]);
+
+export const LEGACY_PROP = "delayMs";
+export const PROP = "delayDuration";
+
+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 || !DELAYED_COMPONENTS.has(el.base) || el.component !== el.base) continue;
+    if (!el.props.has(LEGACY_PROP)) continue;
+
+    if (el.props.has(PROP)) {
+      notTransformed.push({
+        line: el.line,
+        reason: "both-names",
+        detail: `<${el.tag}> passes \`${LEGACY_PROP}\` and \`${PROP}\` — \`${PROP}\` already wins; delete \`${LEGACY_PROP}\` by hand`,
+      });
+      continue;
+    }
+    if (el.spread) {
+      notTransformed.push({
+        line: el.line,
+        reason: "spread-props",
+        detail: `<${el.tag} {…}> — the spread may carry \`${PROP}\`; rename by hand once you know it does not`,
+      });
+      continue;
+    }
+
+    const edit = renameAttribute(ts, facts.sf, openingOf(ts, el.node), LEGACY_PROP, PROP);
+    if (!edit) continue;
+    edits.push(edit);
+    findings.push({
+      line: el.props.get(LEGACY_PROP).line,
+      registryId: "C-TOOLTIP-DELAY",
+      rule: "delay-renamed",
+      match: `<${el.tag} ${LEGACY_PROP}>`,
+      component: el.component,
+      action: "applied",
+      gate: null,
+      detail: { from: LEGACY_PROP, to: PROP, value: el.props.get(LEGACY_PROP).text },
+    });
+  }
+
+  return {
+    output: edits.length ? applyEdits(file.source, edits) : file.source,
+    findings,
+    notTransformed,
+    parseErrors: facts.parseErrors,
+  };
+}