@dualkit/convert 0.2.0-beta.0 → 0.4.0-beta.0

package/README.md

@@ -84,7 +84,8 @@ Convert reads a `convert` block from `dualkit.config.json`, or from the file `--
 
 Convert flags these in the report instead of guessing:
 
-- Text that shares an element with other elements, such as `Hello <b>{name}</b>`, or a plural built in code. These need rich text or a plural message, by hand. Rich text is not converted in this version.
+- A word built by a ternary, such as `item{n === 1 ? '' : 's'}`. This needs a plural message, by hand.
+- A sentence with a block element or a custom component inside it. Convert splits the text at that element, so each part is its own message.
 - Text outside any component, such as a module-level constant or a Next.js `metadata` title, and the `<title>` in a Vite app's `index.html`.
 - A `className` built at run time, which it cannot read in full.
 - Classes with no logical form, inline SVG icons and files it cannot parse.
@@ -99,6 +100,7 @@ It refuses, with a one-line reason, when:
 
 ## Known gaps
 
+- next-intl needs TypeScript 5. An app on an older version will fail its type check after converting.
 - If the app has its own middleware or proxy file, convert moves it to `app-middleware` and runs it first, on the path without its locale. We tested this with a hand-written login check on Next.js 15. Clerk and other auth libraries are untested, so check your login after converting.
 - Convert does not place the language switch, because that would change the English look. It writes `components/dualkit-language-switch.tsx` and tells you to add it.
 - Next.js sends a visitor whose browser asks for Arabic from an English URL to the Arabic page. That is next-intl's locale detection, and convert leaves it on.

package/dist/index.cjs

@@ -151,6 +151,11 @@ function detectPackageManager(root) {
     if (top || (0, import_node_path.dirname)(dir) === dir) return "npm";
   }
 }
+var I18N_LIBRARIES = ["next-intl", "react-i18next", "i18next", "next-i18next", "react-intl", "@lingui/core", "next-international", "@inlang/paraglide-js"];
+function existingI18n(root) {
+  const deps = readDeps(root);
+  return I18N_LIBRARIES.find((name) => name in deps) ?? null;
+}
 function detectI18n(deps) {
   if ("next-intl" in deps) return "next-intl";
   if ("react-i18next" in deps) return "react-i18next";
@@ -327,7 +332,7 @@ async function stagedFiles(root) {
   return out.split("\0").filter(Boolean);
 }
 async function commit(root, message) {
-  await must(root, ["commit", "-q", "-m", message]);
+  await must(root, ["commit", "-q", "--no-verify", "-m", message]);
 }
 async function trackedFiles(root) {
   const out = await must(root, ["ls-files", "-z"]);
@@ -392,6 +397,8 @@ function mergeLedger(existing, added) {
   }
   return [...existing, ...fresh].sort(byKey);
 }
+var marks = (text) => [...text.matchAll(/\{[^}]*\}|<\/?[a-z0-9]+>/gi)].map((m) => m[0]).sort().join(" ");
+var brokenMarks = (entries) => entries.filter((e) => e.status !== "pending" && e.ar !== "" && marks(e.ar) !== marks(e.en));
 var textFor = (entry, locale) => locale === "en" || entry.status === "pending" || entry.ar === "" ? entry.en : entry.ar;
 var group = () => /* @__PURE__ */ Object.create(null);
 function messagesFor(entries, locale) {
@@ -560,6 +567,26 @@ function writeConfigAnswers(disk, answers2, file = CONFIG_FILE) {
   return writeText(disk, file, mergedConfigText(readText(disk.root, file), answers2, file));
 }
 
+// src/closed-routes.ts
+var CLOSED = /* @__PURE__ */ new Set([401, 403, 404]);
+var STATUS_TIMEOUT_MS = 6e4;
+var closedStatus = async (url) => {
+  try {
+    const res = await fetch(url, { signal: AbortSignal.timeout(STATUS_TIMEOUT_MS), redirect: "manual" });
+    return CLOSED.has(res.status) ? res.status : null;
+  } catch {
+    return null;
+  }
+};
+async function closedRoutes(base, routes) {
+  const found = [];
+  for (const route of routes) {
+    const status = await closedStatus(`${base}${route}`);
+    if (status) found.push({ route, reason: `the English page returns ${status}, so its Arabic page was not checked` });
+  }
+  return found;
+}
+
 // src/baseline.ts
 var import_node_fs8 = require("fs");
 var import_node_path9 = require("path");
@@ -704,6 +731,7 @@ ${tail2()}`);
 
 // src/baseline.ts
 var BASELINE_DIR = `${STATE_DIR}/baseline`;
+var CLOSED_FILE = `${BASELINE_DIR}/closed.json`;
 var WIDTHS = [390, 1280];
 var DEFAULT_PORTS = { "next-app": 3e3, "vite-react": 5173 };
 var routeSlug = (route) => route.replace(/^\/+|\/+$/g, "").replace(/[^a-zA-Z0-9]+/g, "-").replace(/^-|-$/g, "") || "home";
@@ -715,6 +743,7 @@ async function shootBaseline(project, config, shoot, log) {
   const server = await startServer(config.start, port, project.root);
   const shots = [];
   try {
+    (0, import_node_fs8.writeFileSync)((0, import_node_path9.join)(project.root, CLOSED_FILE), JSON.stringify((await closedRoutes(server.url, routes)).map((c) => c.route)));
     for (const route of routes) {
       for (const width of WIDTHS) {
         const path = baselinePath(route, width);
@@ -944,7 +973,25 @@ var tInScope = (ancestors) => ancestors.some((node) => scopeNames(node).includes
 
 // src/transforms/strings.ts
 var SKIP = /* @__PURE__ */ new Set(["loc", "leadingComments", "trailingComments", "innerComments", "extra"]);
-var TEXT_ATTRIBUTES = /* @__PURE__ */ new Set(["alt", "title", "placeholder", "aria-label", "label"]);
+var TEXT_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "alt",
+  "title",
+  "placeholder",
+  "aria-label",
+  "label",
+  "aria-description",
+  "aria-placeholder",
+  "aria-roledescription",
+  "description",
+  "subtitle",
+  "heading",
+  "caption",
+  "hint",
+  "tooltip",
+  "helperText",
+  "pageTitle"
+]);
+var INLINE = /* @__PURE__ */ new Set(["a", "abbr", "b", "bdi", "cite", "code", "del", "em", "i", "ins", "kbd", "Link", "mark", "q", "s", "small", "span", "strong", "sub", "sup", "u"]);
 var LETTER = /\p{L}/u;
 var PROSE = /^\p{Lu}\p{Ll}/u;
 var NOT_PROSE = /[/\\_=<>{}@#|]/;
@@ -962,7 +1009,7 @@ function stemOf(path) {
   if (!ROUTE_STEMS.has(stem)) return kebab(stem) || "file";
   return kebab(routeDirs(parts).join("-")) || "home";
 }
-var keyWords = (en) => ascii(en.replace(/\{[^}]*\}/g, " ")).toLowerCase().split(/[^a-z0-9]+/).filter(Boolean).slice(0, 4).join("-") || "text";
+var keyWords = (en) => ascii(en.replace(/\{[^}]*\}|<[^>]*>/g, " ")).toLowerCase().split(/[^a-z0-9]+/).filter(Boolean).slice(0, 4).join("-") || "text";
 function flag(ctx, offset, kind, message, suggestion) {
   ctx.flags.push({ file: ctx.file.path, line: lineOf(ctx.file.text, offset), kind, message, suggestion });
 }
@@ -976,7 +1023,7 @@ function keyFor(ctx, en) {
   ctx.byText.set(en, key);
   return key;
 }
-function place(ctx, ancestors, start2, end, en, values) {
+function place(ctx, ancestors, { start: start2, end, en, code, hookless }) {
   const component = componentOf(ancestors);
   if (!component) {
     flag(
@@ -1011,8 +1058,8 @@ function place(ctx, ancestors, start2, end, en, values) {
   const isNew = !ctx.byText.has(en);
   const key = keyFor(ctx, en);
   if (isNew) ctx.entries.push({ key, en, ar: "", status: "pending", file: ctx.file.path, line: lineOf(ctx.file.text, start2) });
-  ctx.edits.push({ start: start2, end, text: `{t('${key}'${values ? `, { ${values} }` : ""})}` });
-  ctx.components.add(component);
+  ctx.edits.push({ start: start2, end, text: code(key) });
+  if (!hookless) ctx.components.add(component);
 }
 var TEXT_METHODS = /^(toLocale(Date|Time)?String|toFixed|toPrecision|toString|toUpperCase|toLowerCase|trim(Start|End)?|padStart|padEnd)$/;
 function textMethodTarget(expression) {
@@ -1032,6 +1079,21 @@ function placeholderName(expression) {
   }
   return null;
 }
+function holdsJsx(node) {
+  if (Array.isArray(node)) return node.some(holdsJsx);
+  if (!node || typeof node !== "object") return false;
+  const n = node;
+  if (n.type === "JSXElement" || n.type === "JSXFragment") return true;
+  return Object.entries(n).some(([key, child]) => !SKIP.has(key) && holdsJsx(child));
+}
+function callName(expression) {
+  if (expression.type !== "CallExpression" && expression.type !== "OptionalCallExpression") return null;
+  if (holdsJsx(expression)) return null;
+  const callee = expression.callee;
+  if (callee.type === "Identifier") return callee.name === "t" ? null : callee.name;
+  if ((callee.type === "MemberExpression" || callee.type === "OptionalMemberExpression") && !callee.computed) return placeholderName(callee);
+  return null;
+}
 function hasText(element) {
   return (element.children ?? []).some((c) => c.type === "JSXText" ? /\S/.test(String(c.value)) : c.type === "JSXExpressionContainer" ? c.expression.type !== "JSXEmptyExpression" : c.type === "JSXSpreadChild" || hasText(c));
 }
@@ -1040,30 +1102,34 @@ function pieceOf(child, ctx) {
   const end = ctx.base + child.end;
   if (child.type === "JSXText") {
     const raw = ctx.file.text.slice(start2, end);
-    if (!/\S/.test(raw)) return { kind: "space", start: start2, end };
+    if (!/\S/.test(raw)) return { kind: "space", value: raw.includes("\n") ? "" : " ", start: start2, end };
     const lead = raw.length - raw.trimStart().length;
     const trail = raw.length - raw.trimEnd().length;
-    return { kind: "text", value: String(child.value), start: start2 + lead, end: end - trail };
+    return { kind: "text", value: jsxText(String(child.value)), start: start2 + lead, end: end - trail };
   }
-  if (child.type === "JSXSpreadChild") return { kind: "other", start: start2, end };
-  if (child.type !== "JSXExpressionContainer") return { kind: "element", texty: hasText(child), start: start2, end };
+  if (child.type === "JSXSpreadChild") return { kind: "other", node: child, start: start2, end };
+  if (child.type !== "JSXExpressionContainer") return { kind: "element", node: child, start: start2, end };
   const expression = child.expression;
   if (expression.type === "JSXEmptyExpression") return { kind: "comment", start: start2, end };
   if (expression.type === "StringLiteral") {
     const value = String(expression.value);
-    return /\S/.test(value) ? { kind: "text", value, start: start2, end } : { kind: "space", start: start2, end };
+    return /\S/.test(value) ? { kind: "text", value, start: start2, end } : { kind: "space", value, start: start2, end };
   }
-  const name = placeholderName(expression);
-  if (!name) return { kind: "other", start: start2, end };
+  const name = placeholderName(expression) ?? callName(expression);
+  if (!name || NODE_NAMES.test(name)) return { kind: "other", node: expression, start: start2, end };
   const source = ctx.file.text.slice(ctx.base + expression.start, ctx.base + expression.end);
-  return { kind: "value", name, source, start: start2, end };
+  return { kind: "value", name, source: mayBeEmpty(expression) ? `${source} ?? ''` : source, start: start2, end };
 }
+var OWN_DIRECTION = /setAttribute\(\s*['"]dir['"]|documentElement\.dir\s*=[^=]/;
+var NODE_NAMES = /^(children|icon|avatar|logo|image|element|node)$/i;
+var mayBeEmpty = (expression) => /^Optional/.test(expression.type) || expression.type === "CallExpression" && !textMethodTarget(expression);
+var jsxText = (value) => value.replace(/^\s*\n\s*/, "").replace(/\s*\n\s*$/, "");
 var mixed = (ctx, offset) => flag(
   ctx,
   offset,
   "mixed-text",
-  "This text shares its element with other elements or expressions, so it was left as it is.",
-  "Translate the whole sentence with rich text or a plural message, by hand."
+  "This text shares its element with an expression convert cannot read as one sentence, so it was left as it is.",
+  "Translate the whole sentence with a plural message, by hand."
 );
 function valuesOf(pieces) {
   const seen = /* @__PURE__ */ new Map();
@@ -1074,67 +1140,139 @@ function valuesOf(pieces) {
   }
   return [...seen].map(([name, source]) => name === source ? name : `${name}: ${source}`).join(", ");
 }
-function unitsOf(pieces) {
-  const units = [];
+var tagName = (element) => {
+  const name = element.openingElement?.name;
+  return name?.type === "JSXIdentifier" ? name.name : null;
+};
+var childPieces = (element, ctx) => (element.children ?? []).map((c) => pieceOf(c, ctx));
+function isInline(element, ctx) {
+  if (!INLINE.has(tagName(element) ?? "") || !hasText(element)) return false;
+  return childPieces(element, ctx).every((p) => p.kind === "text" || p.kind === "value" || p.kind === "space");
+}
+function runsOf(pieces, ctx) {
+  const runs = [];
   let run2 = [];
-  let before;
-  for (const piece of [...pieces, void 0]) {
-    if (piece && piece.kind !== "element") {
-      run2.push(piece);
-      continue;
-    }
-    const texty = (p) => p?.kind === "element" && p.texty;
-    if (run2.length) units.push({ run: run2, touchesText: texty(before) || texty(piece) });
-    run2 = [];
-    before = piece;
+  for (const piece of pieces) {
+    if (piece.kind === "other" || piece.kind === "element" && !isInline(piece.node, ctx)) {
+      if (run2.length) runs.push(run2);
+      run2 = [];
+    } else run2 = [...run2, piece];
+  }
+  return run2.length ? [...runs, run2] : runs;
+}
+var gluedTo = (piece, next, previous) => piece.kind === "other" && piece.node.type === "ConditionalExpression" && branchStrings(piece.node).some((n) => String(n.value).length < 3) && (previous?.kind === "text" && /\S$/.test(previous.value) || next?.kind === "text" && /^\S/.test(next.value));
+function tagsOf(run2, ctx) {
+  const counts = /* @__PURE__ */ new Map();
+  const tags = /* @__PURE__ */ new Map();
+  for (const piece of run2) {
+    if (piece.kind !== "element") continue;
+    const name = tagName(piece.node);
+    const base = name === "Link" ? "navlink" : name.toLowerCase();
+    const count = (counts.get(base) ?? 0) + 1;
+    counts.set(base, count);
+    const open = piece.node.openingElement;
+    const close = piece.node.closingElement;
+    tags.set(piece, {
+      tag: count === 1 ? base : `${base}${count}`,
+      open: ctx.file.text.slice(ctx.base + open.start, ctx.base + open.end),
+      close: ctx.file.text.slice(ctx.base + close.start, ctx.base + close.end),
+      inner: childPieces(piece.node, ctx)
+    });
   }
-  return units;
+  return tags;
 }
-function messageOf(pieces) {
-  if (pieces.some((p) => p.kind === "other")) return null;
+var plainText = (pieces) => pieces.map((p) => p.kind === "text" || p.kind === "space" ? p.value : p.kind === "value" ? `{${p.name}}` : "").join("");
+var nextIntlCode = (key, values, tags) => {
+  if (!tags.length) return `{t('${key}'${values ? `, { ${values} }` : ""})}`;
+  const parts = [...values ? [values] : [], ...tags.map((t) => `${t.tag}: (chunks) => ${t.open}{chunks}${t.close}`)];
+  return `{t.rich('${key}', { ${parts.join(", ")} })}`;
+};
+var reactI18nextCode = (key, values, tags) => {
+  if (!tags.length) return nextIntlCode(key, values, tags);
+  const components = tags.map((t) => `${t.tag}: ${t.open.replace(/>$/, " />")}`).join(", ");
+  return `<Trans i18nKey="${key}"${values ? ` values={{ ${values} }}` : ""} components={{ ${components} }} />`;
+};
+function messageOf(pieces, ctx) {
   const edge = (p) => p.kind !== "space" && p.kind !== "comment";
   const first = pieces.findIndex(edge);
   const last = pieces.length - 1 - [...pieces].reverse().findIndex(edge);
   const run2 = pieces.slice(first, last + 1);
-  const values = valuesOf(run2);
-  if (values === null || run2.some((p) => p.kind === "comment")) return null;
-  const en = run2.map((p) => p.kind === "text" ? p.value : p.kind === "value" ? `{${p.name}}` : " ").join("").replace(/\s+/g, " ").trim();
-  return { start: run2[0].start, end: run2[run2.length - 1].end, en, values };
+  if (run2.some((p) => p.kind === "comment")) return null;
+  const tags = tagsOf(run2, ctx);
+  const values = valuesOf([...run2, ...[...tags.values()].flatMap((t) => t.inner)]);
+  if (values === null) return null;
+  const en = run2.map((p) => {
+    const tag = tags.get(p);
+    return tag ? `<${tag.tag}>${plainText(tag.inner)}</${tag.tag}>` : plainText([p]);
+  }).join("").replace(/\s+/g, " ").trim();
+  const list = [...tags.values()];
+  const code = (key) => (ctx.lib === "react-i18next" ? reactI18nextCode : nextIntlCode)(key, values, list);
+  return { start: run2[0].start, end: run2[run2.length - 1].end, en, code, tags: list, hookless: ctx.lib === "react-i18next" && list.length > 0 };
 }
 function visitChildren(element, ctx, ancestors) {
-  const pieces = (element.children ?? []).map((c) => pieceOf(c, ctx));
-  const messages = [];
-  for (const { run: run2, touchesText } of unitsOf(pieces)) {
+  const pieces = childPieces(element, ctx);
+  pieces.forEach((piece, i) => {
+    if (!gluedTo(piece, pieces[i + 1], pieces[i - 1])) return;
+    ctx.consumed.add(piece.node);
+  });
+  const glued = pieces.filter((p, i) => p.kind === "other" && gluedTo(p, pieces[i + 1], pieces[i - 1]));
+  for (const run2 of runsOf(pieces, ctx)) {
     const lettered = run2.find((p) => p.kind === "text" && LETTER.test(p.value));
     if (!lettered) continue;
-    const message = touchesText ? null : messageOf(run2);
+    const touchesGlue = glued.some((g) => run2.some((p) => p.end === g.start || p.start === g.end || ctx.file.text.slice(p.end, g.start).trim() === "" || ctx.file.text.slice(g.end, p.start).trim() === ""));
+    const message = touchesGlue ? null : messageOf(run2, ctx);
     if (!message) {
       mixed(ctx, lettered.start);
-      return false;
+      continue;
     }
-    messages.push(message);
+    if (message.tags.length) {
+      run2.forEach((p) => {
+        if (p.kind === "element") ctx.consumed.add(p.node);
+      });
+      if (ctx.lib === "react-i18next") ctx.usedTrans = true;
+    }
+    place(ctx, ancestors, message);
   }
-  for (const m of messages) place(ctx, ancestors, m.start, m.end, m.en, m.values);
-  return true;
 }
+var bracedCall = (values) => (key) => `{t('${key}'${values ? `, { ${values} }` : ""})}`;
 function visitAttribute(attribute, ctx, ancestors) {
   const name = attribute.name;
   if (name.type !== "JSXIdentifier" || !TEXT_ATTRIBUTES.has(name.name)) return;
   const value = attribute.value;
   const literal = value?.type === "JSXExpressionContainer" ? value.expression : value;
   if (literal?.type !== "StringLiteral" || !LETTER.test(String(literal.value))) return;
+  if (name.name === "placeholder" && /^(blur|empty)$/.test(String(literal.value))) return;
   const en = String(literal.value).replace(/\s+/g, " ").trim();
-  place(ctx, ancestors, ctx.base + value.start, ctx.base + value.end, en, "");
+  place(ctx, ancestors, { start: ctx.base + value.start, end: ctx.base + value.end, en, code: bracedCall("") });
+}
+function branchStrings(node) {
+  if (node.type === "StringLiteral") return [node];
+  if (node.type === "ConditionalExpression") return [...branchStrings(node.consequent), ...branchStrings(node.alternate)];
+  if (node.type === "LogicalExpression") return branchStrings(node.right);
+  return [];
+}
+function visitBranches(container, ctx, ancestors) {
+  const parent = ancestors.at(-1);
+  const expression = container.expression;
+  const shown = parent?.type === "JSXElement" || parent?.type === "JSXFragment" || parent?.type === "JSXAttribute" && TEXT_ATTRIBUTES.has(parent.name.name);
+  if (!shown || expression.type === "StringLiteral" || ctx.consumed.has(expression)) return;
+  for (const literal of branchStrings(expression)) {
+    const en = String(literal.value).replace(/\s+/g, " ").trim();
+    if (!LETTER.test(en) || NOT_PROSE.test(en)) continue;
+    place(ctx, ancestors, { start: ctx.base + literal.start, end: ctx.base + literal.end, en, code: (key) => `t('${key}')` });
+  }
 }
 function walk(node, ctx, ancestors) {
   if (Array.isArray(node)) return node.forEach((child) => walk(child, ctx, ancestors));
   if (!node || typeof node !== "object") return;
   const n = node;
+  if (ctx.consumed.has(n)) return;
   if (n.type === "JSXElement" || n.type === "JSXFragment") {
     ctx.sawJsx = true;
-    if (!visitChildren(n, ctx, ancestors)) return;
+    visitChildren(n, ctx, ancestors);
   }
   if (n.type === "JSXAttribute") visitAttribute(n, ctx, ancestors);
+  if (n.type === "JSXExpressionContainer") visitBranches(n, ctx, ancestors);
   const next = typeof n.type === "string" ? [...ancestors, n] : ancestors;
   for (const [key, child] of Object.entries(n)) if (!SKIP.has(key)) walk(child, ctx, next);
 }
@@ -1232,13 +1370,23 @@ function extractStrings(file, lib, taken) {
   for (const block of file.js) {
     const program = block.ast.program;
     if (isServerFile(program)) continue;
-    const ctx = { file, base: block.offset, lib, stem: stemOf(file.path), used, byText: /* @__PURE__ */ new Map(), entries, edits: edits2, flags, components: /* @__PURE__ */ new Set(), sawJsx: false };
+    if (OWN_DIRECTION.test(file.text.slice(block.offset))) {
+      flag(
+        { file, flags },
+        block.offset,
+        "unsupported",
+        "This file sets the page direction itself, which can clash with the Arabic layout.",
+        "Check the Arabic pages, and drive this direction from the locale so components read it too."
+      );
+    }
+    const ctx = { file, base: block.offset, lib, stem: stemOf(file.path), used, byText: /* @__PURE__ */ new Map(), entries, edits: edits2, flags, components: /* @__PURE__ */ new Set(), sawJsx: false, consumed: /* @__PURE__ */ new Set(), usedTrans: false };
     walk(program, ctx, []);
     if (ctx.sawJsx) flagModuleStrings(program, ctx);
     const style = styleOf(program, file.text, ctx.base);
     const hooks = [...ctx.components].map((fn) => hookEdits(fn, lib, file.text, ctx.base, style));
     edits2.push(...hooks.flatMap((h) => h.edits));
-    edits2.push(...importEdits(program, hooks.flatMap((h) => h.imports), ctx.base, style));
+    const trans = ctx.usedTrans ? [{ name: "Trans", source: "react-i18next" }] : [];
+    edits2.push(...importEdits(program, [...hooks.flatMap((h) => h.imports), ...trans], ctx.base, style));
   }
   return { edits: edits2, flags, entries };
 }
@@ -1933,7 +2081,7 @@ function wireNextIntl(project, mode, files, paths) {
 var import_lint6 = require("@dualkit/lint");
 var import_node_path14 = require("path");
 var DEPS2 = { "react-i18next": "17.1.6", i18next: "26.5.8" };
-var INIT_PATH = "src/i18n.ts";
+var INIT_PATH = "src/dualkit-i18n.ts";
 var HTML_PATH = "index.html";
 var COOKIE_PATTERN = `/(?:^|; )${LOCALE_COOKIE}=([^;]*)/`;
 var messagesImport = (locale) => `import ${locale} from '${import_node_path14.posix.relative(import_node_path14.posix.dirname(INIT_PATH), `messages/${locale}.json`)}'`;
@@ -1985,7 +2133,7 @@ export function DualkitLanguageSwitch() {
   )
 }
 `;
-var INLINE_SCRIPT = `<script>(function(){var m=document.cookie.match(${COOKIE_PATTERN});var l=m&&m[1]==='ar'?'ar':'en';var h=document.documentElement;h.lang=l;h.dir=l==='ar'?'rtl':'ltr'})()</script>`;
+var INLINE_SCRIPT = `<script>(function(){var m=document.cookie.match(${COOKIE_PATTERN});var l=m&&m[1]==='ar'?'ar':'en';var h=document.documentElement;h.lang=l;h.dir=l==='ar'?'rtl':'ltr';if(l==='ar')new MutationObserver(function(){if(h.dir!=='rtl')h.dir='rtl'}).observe(h,{attributes:true,attributeFilter:['dir']})})()</script>`;
 function htmlEdits2(html, mode) {
   if (mode === "bilingual") {
     if (html.includes(LOCALE_COOKIE)) return [];
@@ -2503,7 +2651,7 @@ function iconImports(program) {
   return found;
 }
 var isMirrored = (imported) => MIRROR_ICON.test(imported) && !NEVER_MIRROR.test(imported);
-var tagName = (opening) => {
+var tagName2 = (opening) => {
   const name = opening.name;
   return name.type === "JSXIdentifier" ? name.name : null;
 };
@@ -2545,7 +2693,7 @@ function alreadyMirrored(opening, ctx) {
   });
 }
 function visitOpening(opening, ctx, ancestors) {
-  const name = tagName(opening);
+  const name = tagName2(opening);
   if (!name) return;
   const after = ctx.base + opening.name.end;
   if (ctx.icons.has(name) && isMirrored(ctx.icons.get(name)) && !alreadyMirrored(opening, ctx)) {
@@ -2558,7 +2706,7 @@ function visitOpening(opening, ctx, ancestors) {
 }
 function flagSvg(opening, ctx, ancestors) {
   if (alreadyMirrored(opening, ctx)) return;
-  const control = [...ancestors].reverse().find((a) => a.type === "JSXElement" && ["button", "a"].includes(tagName(a.openingElement) ?? ""));
+  const control = [...ancestors].reverse().find((a) => a.type === "JSXElement" && ["button", "a"].includes(tagName2(a.openingElement) ?? ""));
   if (!control || !DIRECTION_LABEL.test(labelOf(control))) return;
   ctx.flags.push({
     file: ctx.file.path,
@@ -2570,7 +2718,7 @@ function flagSvg(opening, ctx, ancestors) {
 }
 var isolates = (element) => {
   const opening = element.openingElement;
-  return tagName(opening) === "bdi" || attributeNamed(opening, "dir") !== void 0;
+  return tagName2(opening) === "bdi" || attributeNamed(opening, "dir") !== void 0;
 };
 function visitExpression(container, ancestors, ctx) {
   const parent = ancestors[ancestors.length - 1];
@@ -2581,12 +2729,27 @@ function visitExpression(container, ancestors, ctx) {
   ctx.edits.push({ start: ctx.base + container.start, end: ctx.base + container.start, text: "<bdi>" });
   ctx.edits.push({ start: ctx.base + container.end, end: ctx.base + container.end, text: "</bdi>" });
 }
+var SIGNED_NUMBER = /^(?:[+\-\u2212]\d[\d,.]*\s?%?|\d[\d,.]*\s?%)$/;
+var NO_BDI = /* @__PURE__ */ new Set(["svg", "text", "option", "title", "textarea", "style", "script"]);
+function visitText(text, ancestors, ctx) {
+  const parent = ancestors[ancestors.length - 1];
+  if (parent.type !== "JSXElement" && parent.type !== "JSXFragment") return;
+  const value = String(text.value);
+  const trimmed = value.trim();
+  if (!SIGNED_NUMBER.test(trimmed)) return;
+  const elements = ancestors.filter((a) => a.type === "JSXElement");
+  if (elements.some((a) => isolates(a) || NO_BDI.has(tagName2(a.openingElement) ?? ""))) return;
+  const start2 = ctx.base + text.start + value.indexOf(trimmed);
+  ctx.edits.push({ start: start2, end: start2, text: "<bdi>" });
+  ctx.edits.push({ start: start2 + trimmed.length, end: start2 + trimmed.length, text: "</bdi>" });
+}
 function walk3(node, ctx, ancestors) {
   if (Array.isArray(node)) return node.forEach((child) => walk3(child, ctx, ancestors));
   if (!node || typeof node !== "object") return;
   const n = node;
   if (n.type === "JSXOpeningElement") visitOpening(n, ctx, ancestors);
   if (n.type === "JSXExpressionContainer" && ancestors.length) visitExpression(n, ancestors, ctx);
+  if (n.type === "JSXText" && ancestors.length) visitText(n, ancestors, ctx);
   const next = typeof n.type === "string" ? [...ancestors, n] : ancestors;
   for (const [key, child] of Object.entries(n)) if (!SKIP6.has(key)) walk3(child, ctx, next);
 }
@@ -2728,6 +2891,15 @@ function groups(fragments) {
   for (const f of fragments) byGroup.set(f.group, [...byGroup.get(f.group) ?? [], f]);
   return [...byGroup.values()];
 }
+var TRACKED = /^tracking-(?!normal$)/;
+function trackingEdits(fragments) {
+  const tokens = tokensOf(fragments);
+  if (tokens.some((t) => t.parsed.core.startsWith("tracking-") && t.parsed.variants.includes("rtl"))) return [];
+  const first = tokens.find((t) => TRACKED.test(t.parsed.core) && KEPT(t));
+  if (!first) return [];
+  const end = first.at + first.text.length;
+  return [{ start: end, end, text: " rtl:tracking-normal" }];
+}
 function tailwindEdits(file, version) {
   const parsed = parseVersion(version);
   const fragments = (0, import_lint10.classStrings)(file);
@@ -2740,7 +2912,7 @@ function tailwindEdits(file, version) {
     return { edits: [], flags: [{ file: file.path, line: lineOf(file.text, first.offset), kind: "unsupported", message, suggestion }] };
   }
   const sources = groups(fragments);
-  const edits2 = sources.flatMap((g) => [...physicalEdits(g, parsed), ...parsed[0] < 4 ? reverseEdits(g) : []]);
+  const edits2 = sources.flatMap((g) => [...physicalEdits(g, parsed), ...parsed[0] < 4 ? reverseEdits(g) : [], ...trackingEdits(g)]);
   const flags = [...sources.flatMap((g) => formFlags(file, g)), ...computedFlags(file)];
   return { edits: edits2, flags: flags.sort((a, b) => a.line - b.line) };
 }
@@ -2985,6 +3157,8 @@ async function convert(options, ioIn) {
   if (options.configAnswers) checkConfigAnswers(root, options.configFile);
   const io = options.configAnswers ? { ...ioIn, config: { ...ioIn.config, ...options.configAnswers } } : ioIn;
   const project = detectProject(root);
+  const library = rerun ? null : existingI18n(root);
+  if (library) throw new UnsupportedError(`This app already uses ${library}. Convert adds its own translation setup and the two collide, so nothing was changed. Convert supports apps with no translation library yet.`);
   const branch = branchFor(mode);
   const generated = new Set(state?.generated ?? []);
   const existing = readLedger(root);
@@ -3158,7 +3332,8 @@ function english(data) {
 }
 function arabic(data) {
   const lines = data.arabic.map(
-    (p) => !Number.isFinite(p.errors) ? `- ${esc(p.route)}: the check returned no result` : `- ${esc(p.route)}: score ${p.score}, ${plural(p.errors, "error", "errors")}, ${plural(p.warnings, "warning", "warnings")}`
+    (p) => !Number.isFinite(p.errors) ? `- ${esc(p.route)}: ${esc(p.problems?.[0] ?? "the check returned no result")}` : `- ${esc(p.route)}: score ${p.score}, ${plural(p.errors, "error", "errors")}, ${plural(p.warnings, "warning", "warnings")}${(p.problems ?? []).map((m) => `
+  - ${esc(m)}`).join("")}`
   );
   return section("Arabic pages", lines, "No pages were checked.");
 }
@@ -3219,6 +3394,10 @@ async function guard(root) {
   return state;
 }
 function pendingCheck(ledger, force) {
+  const broken = brokenMarks(ledger);
+  if (broken.length > 0) {
+    throw new RefusedError(`${broken.length} Arabic ${broken.length === 1 ? "string has" : "strings have"} different placeholders or tags from the English, starting with ${broken[0].key}. Keep each one exactly as written.`);
+  }
   const pending = ledger.filter((e) => e.status === "pending").length;
   if (pending > 0 && !force) {
     throw new RefusedError(`${pending} ${pending === 1 ? "string is" : "strings are"} still pending in ${LEDGER_FILE}. Fill in the Arabic and set each status to drafted, or run with --force to use English for those strings.`);
@@ -3270,11 +3449,21 @@ async function arabicChecks(project, state, base, routes, audit) {
       const result = await audit(`${base}${path}`, width, options);
       const usable = result && Number.isFinite(result.errors);
       const failed = { score: Number.NaN, errors: Number.NaN, warnings: Number.NaN };
-      arabic2.push({ route: `${path} at ${width}px`, ...usable ? result : failed });
+      arabic2.push({ route: `${path} at ${width}px`, ...usable ? result : { ...failed, ...result?.problems ? { problems: result.problems } : {} } });
     }
   }
   return arabic2;
 }
+function closedAtBaseline(root) {
+  const path = (0, import_node_path19.join)(root, CLOSED_FILE);
+  if (!(0, import_node_fs11.existsSync)(path)) return /* @__PURE__ */ new Set();
+  try {
+    const routes = JSON.parse((0, import_node_fs11.readFileSync)(path, "utf8"));
+    return new Set(Array.isArray(routes) ? routes.filter((r) => typeof r === "string") : []);
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
 async function runChecks(project, state, routes, { config, shoot, audit }, step) {
   const { start: cmd } = config;
   if (!cmd || !shoot) throw new RefusedError(NEEDS_BROWSER);
@@ -3285,8 +3474,13 @@ async function runChecks(project, state, routes, { config, shoot, audit }, step)
   });
   try {
     step.name = "checking the pages";
-    const english2 = state.mode === "bilingual" ? await englishChecks(project.root, server.url, routes, shoot) : { english: [], noBaseline: [] };
-    return { ...english2, arabic: await arabicChecks(project, state, server.url, routes, audit) };
+    const closed = await closedRoutes(server.url, routes);
+    const shut = new Set(closed.map((c) => c.route));
+    const open = routes.filter((route) => !shut.has(route));
+    const before = closedAtBaseline(project.root);
+    const compared = routes.filter((route) => !(shut.has(route) && before.has(route)));
+    const english2 = state.mode === "bilingual" ? await englishChecks(project.root, server.url, compared, shoot) : { english: [], noBaseline: [] };
+    return { ...english2, closed, arabic: await arabicChecks(project, state, server.url, open, audit) };
   } finally {
     await server.stop();
   }
@@ -3327,7 +3521,7 @@ async function run(ready, step) {
     ledger,
     ...checks,
     ...earlier ? {} : { summaryMissing: true },
-    unreachable,
+    unreachable: [...unreachable, ...checks.closed],
     remainingLint,
     ...tests2 ? { tests: { code: tests2.code, tail: tail(tests2.out) } } : {}
   };

package/dist/index.d.cts

@@ -157,6 +157,7 @@ type FinishIo = ConvertIo & {
         score: number;
         errors: number;
         warnings: number;
+        problems?: string[];
     }>;
     lint: (root: string) => Promise<number>;
 };

package/dist/index.d.ts

@@ -157,6 +157,7 @@ type FinishIo = ConvertIo & {
         score: number;
         errors: number;
         warnings: number;
+        problems?: string[];
     }>;
     lint: (root: string) => Promise<number>;
 };

package/dist/index.js

@@ -116,6 +116,11 @@ function detectPackageManager(root) {
     if (top || dirname(dir) === dir) return "npm";
   }
 }
+var I18N_LIBRARIES = ["next-intl", "react-i18next", "i18next", "next-i18next", "react-intl", "@lingui/core", "next-international", "@inlang/paraglide-js"];
+function existingI18n(root) {
+  const deps = readDeps(root);
+  return I18N_LIBRARIES.find((name) => name in deps) ?? null;
+}
 function detectI18n(deps) {
   if ("next-intl" in deps) return "next-intl";
   if ("react-i18next" in deps) return "react-i18next";
@@ -292,7 +297,7 @@ async function stagedFiles(root) {
   return out.split("\0").filter(Boolean);
 }
 async function commit(root, message) {
-  await must(root, ["commit", "-q", "-m", message]);
+  await must(root, ["commit", "-q", "--no-verify", "-m", message]);
 }
 async function trackedFiles(root) {
   const out = await must(root, ["ls-files", "-z"]);
@@ -357,6 +362,8 @@ function mergeLedger(existing, added) {
   }
   return [...existing, ...fresh].sort(byKey);
 }
+var marks = (text) => [...text.matchAll(/\{[^}]*\}|<\/?[a-z0-9]+>/gi)].map((m) => m[0]).sort().join(" ");
+var brokenMarks = (entries) => entries.filter((e) => e.status !== "pending" && e.ar !== "" && marks(e.ar) !== marks(e.en));
 var textFor = (entry, locale) => locale === "en" || entry.status === "pending" || entry.ar === "" ? entry.en : entry.ar;
 var group = () => /* @__PURE__ */ Object.create(null);
 function messagesFor(entries, locale) {
@@ -525,6 +532,26 @@ function writeConfigAnswers(disk, answers2, file = CONFIG_FILE) {
   return writeText(disk, file, mergedConfigText(readText(disk.root, file), answers2, file));
 }
 
+// src/closed-routes.ts
+var CLOSED = /* @__PURE__ */ new Set([401, 403, 404]);
+var STATUS_TIMEOUT_MS = 6e4;
+var closedStatus = async (url) => {
+  try {
+    const res = await fetch(url, { signal: AbortSignal.timeout(STATUS_TIMEOUT_MS), redirect: "manual" });
+    return CLOSED.has(res.status) ? res.status : null;
+  } catch {
+    return null;
+  }
+};
+async function closedRoutes(base, routes) {
+  const found = [];
+  for (const route of routes) {
+    const status = await closedStatus(`${base}${route}`);
+    if (status) found.push({ route, reason: `the English page returns ${status}, so its Arabic page was not checked` });
+  }
+  return found;
+}
+
 // src/baseline.ts
 import { mkdirSync as mkdirSync4, writeFileSync as writeFileSync5 } from "fs";
 import { join as join7 } from "path";
@@ -669,6 +696,7 @@ ${tail2()}`);
 
 // src/baseline.ts
 var BASELINE_DIR = `${STATE_DIR}/baseline`;
+var CLOSED_FILE = `${BASELINE_DIR}/closed.json`;
 var WIDTHS = [390, 1280];
 var DEFAULT_PORTS = { "next-app": 3e3, "vite-react": 5173 };
 var routeSlug = (route) => route.replace(/^\/+|\/+$/g, "").replace(/[^a-zA-Z0-9]+/g, "-").replace(/^-|-$/g, "") || "home";
@@ -680,6 +708,7 @@ async function shootBaseline(project, config, shoot, log) {
   const server = await startServer(config.start, port, project.root);
   const shots = [];
   try {
+    writeFileSync5(join7(project.root, CLOSED_FILE), JSON.stringify((await closedRoutes(server.url, routes)).map((c) => c.route)));
     for (const route of routes) {
       for (const width of WIDTHS) {
         const path = baselinePath(route, width);
@@ -909,7 +938,25 @@ var tInScope = (ancestors) => ancestors.some((node) => scopeNames(node).includes
 
 // src/transforms/strings.ts
 var SKIP = /* @__PURE__ */ new Set(["loc", "leadingComments", "trailingComments", "innerComments", "extra"]);
-var TEXT_ATTRIBUTES = /* @__PURE__ */ new Set(["alt", "title", "placeholder", "aria-label", "label"]);
+var TEXT_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "alt",
+  "title",
+  "placeholder",
+  "aria-label",
+  "label",
+  "aria-description",
+  "aria-placeholder",
+  "aria-roledescription",
+  "description",
+  "subtitle",
+  "heading",
+  "caption",
+  "hint",
+  "tooltip",
+  "helperText",
+  "pageTitle"
+]);
+var INLINE = /* @__PURE__ */ new Set(["a", "abbr", "b", "bdi", "cite", "code", "del", "em", "i", "ins", "kbd", "Link", "mark", "q", "s", "small", "span", "strong", "sub", "sup", "u"]);
 var LETTER = /\p{L}/u;
 var PROSE = /^\p{Lu}\p{Ll}/u;
 var NOT_PROSE = /[/\\_=<>{}@#|]/;
@@ -927,7 +974,7 @@ function stemOf(path) {
   if (!ROUTE_STEMS.has(stem)) return kebab(stem) || "file";
   return kebab(routeDirs(parts).join("-")) || "home";
 }
-var keyWords = (en) => ascii(en.replace(/\{[^}]*\}/g, " ")).toLowerCase().split(/[^a-z0-9]+/).filter(Boolean).slice(0, 4).join("-") || "text";
+var keyWords = (en) => ascii(en.replace(/\{[^}]*\}|<[^>]*>/g, " ")).toLowerCase().split(/[^a-z0-9]+/).filter(Boolean).slice(0, 4).join("-") || "text";
 function flag(ctx, offset, kind, message, suggestion) {
   ctx.flags.push({ file: ctx.file.path, line: lineOf(ctx.file.text, offset), kind, message, suggestion });
 }
@@ -941,7 +988,7 @@ function keyFor(ctx, en) {
   ctx.byText.set(en, key);
   return key;
 }
-function place(ctx, ancestors, start2, end, en, values) {
+function place(ctx, ancestors, { start: start2, end, en, code, hookless }) {
   const component = componentOf(ancestors);
   if (!component) {
     flag(
@@ -976,8 +1023,8 @@ function place(ctx, ancestors, start2, end, en, values) {
   const isNew = !ctx.byText.has(en);
   const key = keyFor(ctx, en);
   if (isNew) ctx.entries.push({ key, en, ar: "", status: "pending", file: ctx.file.path, line: lineOf(ctx.file.text, start2) });
-  ctx.edits.push({ start: start2, end, text: `{t('${key}'${values ? `, { ${values} }` : ""})}` });
-  ctx.components.add(component);
+  ctx.edits.push({ start: start2, end, text: code(key) });
+  if (!hookless) ctx.components.add(component);
 }
 var TEXT_METHODS = /^(toLocale(Date|Time)?String|toFixed|toPrecision|toString|toUpperCase|toLowerCase|trim(Start|End)?|padStart|padEnd)$/;
 function textMethodTarget(expression) {
@@ -997,6 +1044,21 @@ function placeholderName(expression) {
   }
   return null;
 }
+function holdsJsx(node) {
+  if (Array.isArray(node)) return node.some(holdsJsx);
+  if (!node || typeof node !== "object") return false;
+  const n = node;
+  if (n.type === "JSXElement" || n.type === "JSXFragment") return true;
+  return Object.entries(n).some(([key, child]) => !SKIP.has(key) && holdsJsx(child));
+}
+function callName(expression) {
+  if (expression.type !== "CallExpression" && expression.type !== "OptionalCallExpression") return null;
+  if (holdsJsx(expression)) return null;
+  const callee = expression.callee;
+  if (callee.type === "Identifier") return callee.name === "t" ? null : callee.name;
+  if ((callee.type === "MemberExpression" || callee.type === "OptionalMemberExpression") && !callee.computed) return placeholderName(callee);
+  return null;
+}
 function hasText(element) {
   return (element.children ?? []).some((c) => c.type === "JSXText" ? /\S/.test(String(c.value)) : c.type === "JSXExpressionContainer" ? c.expression.type !== "JSXEmptyExpression" : c.type === "JSXSpreadChild" || hasText(c));
 }
@@ -1005,30 +1067,34 @@ function pieceOf(child, ctx) {
   const end = ctx.base + child.end;
   if (child.type === "JSXText") {
     const raw = ctx.file.text.slice(start2, end);
-    if (!/\S/.test(raw)) return { kind: "space", start: start2, end };
+    if (!/\S/.test(raw)) return { kind: "space", value: raw.includes("\n") ? "" : " ", start: start2, end };
     const lead = raw.length - raw.trimStart().length;
     const trail = raw.length - raw.trimEnd().length;
-    return { kind: "text", value: String(child.value), start: start2 + lead, end: end - trail };
+    return { kind: "text", value: jsxText(String(child.value)), start: start2 + lead, end: end - trail };
   }
-  if (child.type === "JSXSpreadChild") return { kind: "other", start: start2, end };
-  if (child.type !== "JSXExpressionContainer") return { kind: "element", texty: hasText(child), start: start2, end };
+  if (child.type === "JSXSpreadChild") return { kind: "other", node: child, start: start2, end };
+  if (child.type !== "JSXExpressionContainer") return { kind: "element", node: child, start: start2, end };
   const expression = child.expression;
   if (expression.type === "JSXEmptyExpression") return { kind: "comment", start: start2, end };
   if (expression.type === "StringLiteral") {
     const value = String(expression.value);
-    return /\S/.test(value) ? { kind: "text", value, start: start2, end } : { kind: "space", start: start2, end };
+    return /\S/.test(value) ? { kind: "text", value, start: start2, end } : { kind: "space", value, start: start2, end };
   }
-  const name = placeholderName(expression);
-  if (!name) return { kind: "other", start: start2, end };
+  const name = placeholderName(expression) ?? callName(expression);
+  if (!name || NODE_NAMES.test(name)) return { kind: "other", node: expression, start: start2, end };
   const source = ctx.file.text.slice(ctx.base + expression.start, ctx.base + expression.end);
-  return { kind: "value", name, source, start: start2, end };
+  return { kind: "value", name, source: mayBeEmpty(expression) ? `${source} ?? ''` : source, start: start2, end };
 }
+var OWN_DIRECTION = /setAttribute\(\s*['"]dir['"]|documentElement\.dir\s*=[^=]/;
+var NODE_NAMES = /^(children|icon|avatar|logo|image|element|node)$/i;
+var mayBeEmpty = (expression) => /^Optional/.test(expression.type) || expression.type === "CallExpression" && !textMethodTarget(expression);
+var jsxText = (value) => value.replace(/^\s*\n\s*/, "").replace(/\s*\n\s*$/, "");
 var mixed = (ctx, offset) => flag(
   ctx,
   offset,
   "mixed-text",
-  "This text shares its element with other elements or expressions, so it was left as it is.",
-  "Translate the whole sentence with rich text or a plural message, by hand."
+  "This text shares its element with an expression convert cannot read as one sentence, so it was left as it is.",
+  "Translate the whole sentence with a plural message, by hand."
 );
 function valuesOf(pieces) {
   const seen = /* @__PURE__ */ new Map();
@@ -1039,67 +1105,139 @@ function valuesOf(pieces) {
   }
   return [...seen].map(([name, source]) => name === source ? name : `${name}: ${source}`).join(", ");
 }
-function unitsOf(pieces) {
-  const units = [];
+var tagName = (element) => {
+  const name = element.openingElement?.name;
+  return name?.type === "JSXIdentifier" ? name.name : null;
+};
+var childPieces = (element, ctx) => (element.children ?? []).map((c) => pieceOf(c, ctx));
+function isInline(element, ctx) {
+  if (!INLINE.has(tagName(element) ?? "") || !hasText(element)) return false;
+  return childPieces(element, ctx).every((p) => p.kind === "text" || p.kind === "value" || p.kind === "space");
+}
+function runsOf(pieces, ctx) {
+  const runs = [];
   let run2 = [];
-  let before;
-  for (const piece of [...pieces, void 0]) {
-    if (piece && piece.kind !== "element") {
-      run2.push(piece);
-      continue;
-    }
-    const texty = (p) => p?.kind === "element" && p.texty;
-    if (run2.length) units.push({ run: run2, touchesText: texty(before) || texty(piece) });
-    run2 = [];
-    before = piece;
+  for (const piece of pieces) {
+    if (piece.kind === "other" || piece.kind === "element" && !isInline(piece.node, ctx)) {
+      if (run2.length) runs.push(run2);
+      run2 = [];
+    } else run2 = [...run2, piece];
+  }
+  return run2.length ? [...runs, run2] : runs;
+}
+var gluedTo = (piece, next, previous) => piece.kind === "other" && piece.node.type === "ConditionalExpression" && branchStrings(piece.node).some((n) => String(n.value).length < 3) && (previous?.kind === "text" && /\S$/.test(previous.value) || next?.kind === "text" && /^\S/.test(next.value));
+function tagsOf(run2, ctx) {
+  const counts = /* @__PURE__ */ new Map();
+  const tags = /* @__PURE__ */ new Map();
+  for (const piece of run2) {
+    if (piece.kind !== "element") continue;
+    const name = tagName(piece.node);
+    const base = name === "Link" ? "navlink" : name.toLowerCase();
+    const count = (counts.get(base) ?? 0) + 1;
+    counts.set(base, count);
+    const open = piece.node.openingElement;
+    const close = piece.node.closingElement;
+    tags.set(piece, {
+      tag: count === 1 ? base : `${base}${count}`,
+      open: ctx.file.text.slice(ctx.base + open.start, ctx.base + open.end),
+      close: ctx.file.text.slice(ctx.base + close.start, ctx.base + close.end),
+      inner: childPieces(piece.node, ctx)
+    });
   }
-  return units;
+  return tags;
 }
-function messageOf(pieces) {
-  if (pieces.some((p) => p.kind === "other")) return null;
+var plainText = (pieces) => pieces.map((p) => p.kind === "text" || p.kind === "space" ? p.value : p.kind === "value" ? `{${p.name}}` : "").join("");
+var nextIntlCode = (key, values, tags) => {
+  if (!tags.length) return `{t('${key}'${values ? `, { ${values} }` : ""})}`;
+  const parts = [...values ? [values] : [], ...tags.map((t) => `${t.tag}: (chunks) => ${t.open}{chunks}${t.close}`)];
+  return `{t.rich('${key}', { ${parts.join(", ")} })}`;
+};
+var reactI18nextCode = (key, values, tags) => {
+  if (!tags.length) return nextIntlCode(key, values, tags);
+  const components = tags.map((t) => `${t.tag}: ${t.open.replace(/>$/, " />")}`).join(", ");
+  return `<Trans i18nKey="${key}"${values ? ` values={{ ${values} }}` : ""} components={{ ${components} }} />`;
+};
+function messageOf(pieces, ctx) {
   const edge = (p) => p.kind !== "space" && p.kind !== "comment";
   const first = pieces.findIndex(edge);
   const last = pieces.length - 1 - [...pieces].reverse().findIndex(edge);
   const run2 = pieces.slice(first, last + 1);
-  const values = valuesOf(run2);
-  if (values === null || run2.some((p) => p.kind === "comment")) return null;
-  const en = run2.map((p) => p.kind === "text" ? p.value : p.kind === "value" ? `{${p.name}}` : " ").join("").replace(/\s+/g, " ").trim();
-  return { start: run2[0].start, end: run2[run2.length - 1].end, en, values };
+  if (run2.some((p) => p.kind === "comment")) return null;
+  const tags = tagsOf(run2, ctx);
+  const values = valuesOf([...run2, ...[...tags.values()].flatMap((t) => t.inner)]);
+  if (values === null) return null;
+  const en = run2.map((p) => {
+    const tag = tags.get(p);
+    return tag ? `<${tag.tag}>${plainText(tag.inner)}</${tag.tag}>` : plainText([p]);
+  }).join("").replace(/\s+/g, " ").trim();
+  const list = [...tags.values()];
+  const code = (key) => (ctx.lib === "react-i18next" ? reactI18nextCode : nextIntlCode)(key, values, list);
+  return { start: run2[0].start, end: run2[run2.length - 1].end, en, code, tags: list, hookless: ctx.lib === "react-i18next" && list.length > 0 };
 }
 function visitChildren(element, ctx, ancestors) {
-  const pieces = (element.children ?? []).map((c) => pieceOf(c, ctx));
-  const messages = [];
-  for (const { run: run2, touchesText } of unitsOf(pieces)) {
+  const pieces = childPieces(element, ctx);
+  pieces.forEach((piece, i) => {
+    if (!gluedTo(piece, pieces[i + 1], pieces[i - 1])) return;
+    ctx.consumed.add(piece.node);
+  });
+  const glued = pieces.filter((p, i) => p.kind === "other" && gluedTo(p, pieces[i + 1], pieces[i - 1]));
+  for (const run2 of runsOf(pieces, ctx)) {
     const lettered = run2.find((p) => p.kind === "text" && LETTER.test(p.value));
     if (!lettered) continue;
-    const message = touchesText ? null : messageOf(run2);
+    const touchesGlue = glued.some((g) => run2.some((p) => p.end === g.start || p.start === g.end || ctx.file.text.slice(p.end, g.start).trim() === "" || ctx.file.text.slice(g.end, p.start).trim() === ""));
+    const message = touchesGlue ? null : messageOf(run2, ctx);
     if (!message) {
       mixed(ctx, lettered.start);
-      return false;
+      continue;
     }
-    messages.push(message);
+    if (message.tags.length) {
+      run2.forEach((p) => {
+        if (p.kind === "element") ctx.consumed.add(p.node);
+      });
+      if (ctx.lib === "react-i18next") ctx.usedTrans = true;
+    }
+    place(ctx, ancestors, message);
   }
-  for (const m of messages) place(ctx, ancestors, m.start, m.end, m.en, m.values);
-  return true;
 }
+var bracedCall = (values) => (key) => `{t('${key}'${values ? `, { ${values} }` : ""})}`;
 function visitAttribute(attribute, ctx, ancestors) {
   const name = attribute.name;
   if (name.type !== "JSXIdentifier" || !TEXT_ATTRIBUTES.has(name.name)) return;
   const value = attribute.value;
   const literal = value?.type === "JSXExpressionContainer" ? value.expression : value;
   if (literal?.type !== "StringLiteral" || !LETTER.test(String(literal.value))) return;
+  if (name.name === "placeholder" && /^(blur|empty)$/.test(String(literal.value))) return;
   const en = String(literal.value).replace(/\s+/g, " ").trim();
-  place(ctx, ancestors, ctx.base + value.start, ctx.base + value.end, en, "");
+  place(ctx, ancestors, { start: ctx.base + value.start, end: ctx.base + value.end, en, code: bracedCall("") });
+}
+function branchStrings(node) {
+  if (node.type === "StringLiteral") return [node];
+  if (node.type === "ConditionalExpression") return [...branchStrings(node.consequent), ...branchStrings(node.alternate)];
+  if (node.type === "LogicalExpression") return branchStrings(node.right);
+  return [];
+}
+function visitBranches(container, ctx, ancestors) {
+  const parent = ancestors.at(-1);
+  const expression = container.expression;
+  const shown = parent?.type === "JSXElement" || parent?.type === "JSXFragment" || parent?.type === "JSXAttribute" && TEXT_ATTRIBUTES.has(parent.name.name);
+  if (!shown || expression.type === "StringLiteral" || ctx.consumed.has(expression)) return;
+  for (const literal of branchStrings(expression)) {
+    const en = String(literal.value).replace(/\s+/g, " ").trim();
+    if (!LETTER.test(en) || NOT_PROSE.test(en)) continue;
+    place(ctx, ancestors, { start: ctx.base + literal.start, end: ctx.base + literal.end, en, code: (key) => `t('${key}')` });
+  }
 }
 function walk(node, ctx, ancestors) {
   if (Array.isArray(node)) return node.forEach((child) => walk(child, ctx, ancestors));
   if (!node || typeof node !== "object") return;
   const n = node;
+  if (ctx.consumed.has(n)) return;
   if (n.type === "JSXElement" || n.type === "JSXFragment") {
     ctx.sawJsx = true;
-    if (!visitChildren(n, ctx, ancestors)) return;
+    visitChildren(n, ctx, ancestors);
   }
   if (n.type === "JSXAttribute") visitAttribute(n, ctx, ancestors);
+  if (n.type === "JSXExpressionContainer") visitBranches(n, ctx, ancestors);
   const next = typeof n.type === "string" ? [...ancestors, n] : ancestors;
   for (const [key, child] of Object.entries(n)) if (!SKIP.has(key)) walk(child, ctx, next);
 }
@@ -1197,13 +1335,23 @@ function extractStrings(file, lib, taken) {
   for (const block of file.js) {
     const program = block.ast.program;
     if (isServerFile(program)) continue;
-    const ctx = { file, base: block.offset, lib, stem: stemOf(file.path), used, byText: /* @__PURE__ */ new Map(), entries, edits: edits2, flags, components: /* @__PURE__ */ new Set(), sawJsx: false };
+    if (OWN_DIRECTION.test(file.text.slice(block.offset))) {
+      flag(
+        { file, flags },
+        block.offset,
+        "unsupported",
+        "This file sets the page direction itself, which can clash with the Arabic layout.",
+        "Check the Arabic pages, and drive this direction from the locale so components read it too."
+      );
+    }
+    const ctx = { file, base: block.offset, lib, stem: stemOf(file.path), used, byText: /* @__PURE__ */ new Map(), entries, edits: edits2, flags, components: /* @__PURE__ */ new Set(), sawJsx: false, consumed: /* @__PURE__ */ new Set(), usedTrans: false };
     walk(program, ctx, []);
     if (ctx.sawJsx) flagModuleStrings(program, ctx);
     const style = styleOf(program, file.text, ctx.base);
     const hooks = [...ctx.components].map((fn) => hookEdits(fn, lib, file.text, ctx.base, style));
     edits2.push(...hooks.flatMap((h) => h.edits));
-    edits2.push(...importEdits(program, hooks.flatMap((h) => h.imports), ctx.base, style));
+    const trans = ctx.usedTrans ? [{ name: "Trans", source: "react-i18next" }] : [];
+    edits2.push(...importEdits(program, [...hooks.flatMap((h) => h.imports), ...trans], ctx.base, style));
   }
   return { edits: edits2, flags, entries };
 }
@@ -1898,7 +2046,7 @@ function wireNextIntl(project, mode, files, paths) {
 import { parseSourceOutcome as parseSourceOutcome5 } from "@dualkit/lint";
 import { posix as posix6 } from "path";
 var DEPS2 = { "react-i18next": "17.1.6", i18next: "26.5.8" };
-var INIT_PATH = "src/i18n.ts";
+var INIT_PATH = "src/dualkit-i18n.ts";
 var HTML_PATH = "index.html";
 var COOKIE_PATTERN = `/(?:^|; )${LOCALE_COOKIE}=([^;]*)/`;
 var messagesImport = (locale) => `import ${locale} from '${posix6.relative(posix6.dirname(INIT_PATH), `messages/${locale}.json`)}'`;
@@ -1950,7 +2098,7 @@ export function DualkitLanguageSwitch() {
   )
 }
 `;
-var INLINE_SCRIPT = `<script>(function(){var m=document.cookie.match(${COOKIE_PATTERN});var l=m&&m[1]==='ar'?'ar':'en';var h=document.documentElement;h.lang=l;h.dir=l==='ar'?'rtl':'ltr'})()</script>`;
+var INLINE_SCRIPT = `<script>(function(){var m=document.cookie.match(${COOKIE_PATTERN});var l=m&&m[1]==='ar'?'ar':'en';var h=document.documentElement;h.lang=l;h.dir=l==='ar'?'rtl':'ltr';if(l==='ar')new MutationObserver(function(){if(h.dir!=='rtl')h.dir='rtl'}).observe(h,{attributes:true,attributeFilter:['dir']})})()</script>`;
 function htmlEdits2(html, mode) {
   if (mode === "bilingual") {
     if (html.includes(LOCALE_COOKIE)) return [];
@@ -2468,7 +2616,7 @@ function iconImports(program) {
   return found;
 }
 var isMirrored = (imported) => MIRROR_ICON.test(imported) && !NEVER_MIRROR.test(imported);
-var tagName = (opening) => {
+var tagName2 = (opening) => {
   const name = opening.name;
   return name.type === "JSXIdentifier" ? name.name : null;
 };
@@ -2510,7 +2658,7 @@ function alreadyMirrored(opening, ctx) {
   });
 }
 function visitOpening(opening, ctx, ancestors) {
-  const name = tagName(opening);
+  const name = tagName2(opening);
   if (!name) return;
   const after = ctx.base + opening.name.end;
   if (ctx.icons.has(name) && isMirrored(ctx.icons.get(name)) && !alreadyMirrored(opening, ctx)) {
@@ -2523,7 +2671,7 @@ function visitOpening(opening, ctx, ancestors) {
 }
 function flagSvg(opening, ctx, ancestors) {
   if (alreadyMirrored(opening, ctx)) return;
-  const control = [...ancestors].reverse().find((a) => a.type === "JSXElement" && ["button", "a"].includes(tagName(a.openingElement) ?? ""));
+  const control = [...ancestors].reverse().find((a) => a.type === "JSXElement" && ["button", "a"].includes(tagName2(a.openingElement) ?? ""));
   if (!control || !DIRECTION_LABEL.test(labelOf(control))) return;
   ctx.flags.push({
     file: ctx.file.path,
@@ -2535,7 +2683,7 @@ function flagSvg(opening, ctx, ancestors) {
 }
 var isolates = (element) => {
   const opening = element.openingElement;
-  return tagName(opening) === "bdi" || attributeNamed(opening, "dir") !== void 0;
+  return tagName2(opening) === "bdi" || attributeNamed(opening, "dir") !== void 0;
 };
 function visitExpression(container, ancestors, ctx) {
   const parent = ancestors[ancestors.length - 1];
@@ -2546,12 +2694,27 @@ function visitExpression(container, ancestors, ctx) {
   ctx.edits.push({ start: ctx.base + container.start, end: ctx.base + container.start, text: "<bdi>" });
   ctx.edits.push({ start: ctx.base + container.end, end: ctx.base + container.end, text: "</bdi>" });
 }
+var SIGNED_NUMBER = /^(?:[+\-\u2212]\d[\d,.]*\s?%?|\d[\d,.]*\s?%)$/;
+var NO_BDI = /* @__PURE__ */ new Set(["svg", "text", "option", "title", "textarea", "style", "script"]);
+function visitText(text, ancestors, ctx) {
+  const parent = ancestors[ancestors.length - 1];
+  if (parent.type !== "JSXElement" && parent.type !== "JSXFragment") return;
+  const value = String(text.value);
+  const trimmed = value.trim();
+  if (!SIGNED_NUMBER.test(trimmed)) return;
+  const elements = ancestors.filter((a) => a.type === "JSXElement");
+  if (elements.some((a) => isolates(a) || NO_BDI.has(tagName2(a.openingElement) ?? ""))) return;
+  const start2 = ctx.base + text.start + value.indexOf(trimmed);
+  ctx.edits.push({ start: start2, end: start2, text: "<bdi>" });
+  ctx.edits.push({ start: start2 + trimmed.length, end: start2 + trimmed.length, text: "</bdi>" });
+}
 function walk3(node, ctx, ancestors) {
   if (Array.isArray(node)) return node.forEach((child) => walk3(child, ctx, ancestors));
   if (!node || typeof node !== "object") return;
   const n = node;
   if (n.type === "JSXOpeningElement") visitOpening(n, ctx, ancestors);
   if (n.type === "JSXExpressionContainer" && ancestors.length) visitExpression(n, ancestors, ctx);
+  if (n.type === "JSXText" && ancestors.length) visitText(n, ancestors, ctx);
   const next = typeof n.type === "string" ? [...ancestors, n] : ancestors;
   for (const [key, child] of Object.entries(n)) if (!SKIP6.has(key)) walk3(child, ctx, next);
 }
@@ -2693,6 +2856,15 @@ function groups(fragments) {
   for (const f of fragments) byGroup.set(f.group, [...byGroup.get(f.group) ?? [], f]);
   return [...byGroup.values()];
 }
+var TRACKED = /^tracking-(?!normal$)/;
+function trackingEdits(fragments) {
+  const tokens = tokensOf(fragments);
+  if (tokens.some((t) => t.parsed.core.startsWith("tracking-") && t.parsed.variants.includes("rtl"))) return [];
+  const first = tokens.find((t) => TRACKED.test(t.parsed.core) && KEPT(t));
+  if (!first) return [];
+  const end = first.at + first.text.length;
+  return [{ start: end, end, text: " rtl:tracking-normal" }];
+}
 function tailwindEdits(file, version) {
   const parsed = parseVersion(version);
   const fragments = classStrings(file);
@@ -2705,7 +2877,7 @@ function tailwindEdits(file, version) {
     return { edits: [], flags: [{ file: file.path, line: lineOf(file.text, first.offset), kind: "unsupported", message, suggestion }] };
   }
   const sources = groups(fragments);
-  const edits2 = sources.flatMap((g) => [...physicalEdits(g, parsed), ...parsed[0] < 4 ? reverseEdits(g) : []]);
+  const edits2 = sources.flatMap((g) => [...physicalEdits(g, parsed), ...parsed[0] < 4 ? reverseEdits(g) : [], ...trackingEdits(g)]);
   const flags = [...sources.flatMap((g) => formFlags(file, g)), ...computedFlags(file)];
   return { edits: edits2, flags: flags.sort((a, b) => a.line - b.line) };
 }
@@ -2950,6 +3122,8 @@ async function convert(options, ioIn) {
   if (options.configAnswers) checkConfigAnswers(root, options.configFile);
   const io = options.configAnswers ? { ...ioIn, config: { ...ioIn.config, ...options.configAnswers } } : ioIn;
   const project = detectProject(root);
+  const library = rerun ? null : existingI18n(root);
+  if (library) throw new UnsupportedError(`This app already uses ${library}. Convert adds its own translation setup and the two collide, so nothing was changed. Convert supports apps with no translation library yet.`);
   const branch = branchFor(mode);
   const generated = new Set(state?.generated ?? []);
   const existing = readLedger(root);
@@ -3123,7 +3297,8 @@ function english(data) {
 }
 function arabic(data) {
   const lines = data.arabic.map(
-    (p) => !Number.isFinite(p.errors) ? `- ${esc(p.route)}: the check returned no result` : `- ${esc(p.route)}: score ${p.score}, ${plural(p.errors, "error", "errors")}, ${plural(p.warnings, "warning", "warnings")}`
+    (p) => !Number.isFinite(p.errors) ? `- ${esc(p.route)}: ${esc(p.problems?.[0] ?? "the check returned no result")}` : `- ${esc(p.route)}: score ${p.score}, ${plural(p.errors, "error", "errors")}, ${plural(p.warnings, "warning", "warnings")}${(p.problems ?? []).map((m) => `
+  - ${esc(m)}`).join("")}`
   );
   return section("Arabic pages", lines, "No pages were checked.");
 }
@@ -3184,6 +3359,10 @@ async function guard(root) {
   return state;
 }
 function pendingCheck(ledger, force) {
+  const broken = brokenMarks(ledger);
+  if (broken.length > 0) {
+    throw new RefusedError(`${broken.length} Arabic ${broken.length === 1 ? "string has" : "strings have"} different placeholders or tags from the English, starting with ${broken[0].key}. Keep each one exactly as written.`);
+  }
   const pending = ledger.filter((e) => e.status === "pending").length;
   if (pending > 0 && !force) {
     throw new RefusedError(`${pending} ${pending === 1 ? "string is" : "strings are"} still pending in ${LEDGER_FILE}. Fill in the Arabic and set each status to drafted, or run with --force to use English for those strings.`);
@@ -3235,11 +3414,21 @@ async function arabicChecks(project, state, base, routes, audit) {
       const result = await audit(`${base}${path}`, width, options);
       const usable = result && Number.isFinite(result.errors);
       const failed = { score: Number.NaN, errors: Number.NaN, warnings: Number.NaN };
-      arabic2.push({ route: `${path} at ${width}px`, ...usable ? result : failed });
+      arabic2.push({ route: `${path} at ${width}px`, ...usable ? result : { ...failed, ...result?.problems ? { problems: result.problems } : {} } });
     }
   }
   return arabic2;
 }
+function closedAtBaseline(root) {
+  const path = join11(root, CLOSED_FILE);
+  if (!existsSync8(path)) return /* @__PURE__ */ new Set();
+  try {
+    const routes = JSON.parse(readFileSync7(path, "utf8"));
+    return new Set(Array.isArray(routes) ? routes.filter((r) => typeof r === "string") : []);
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
 async function runChecks(project, state, routes, { config, shoot, audit }, step) {
   const { start: cmd } = config;
   if (!cmd || !shoot) throw new RefusedError(NEEDS_BROWSER);
@@ -3250,8 +3439,13 @@ async function runChecks(project, state, routes, { config, shoot, audit }, step)
   });
   try {
     step.name = "checking the pages";
-    const english2 = state.mode === "bilingual" ? await englishChecks(project.root, server.url, routes, shoot) : { english: [], noBaseline: [] };
-    return { ...english2, arabic: await arabicChecks(project, state, server.url, routes, audit) };
+    const closed = await closedRoutes(server.url, routes);
+    const shut = new Set(closed.map((c) => c.route));
+    const open = routes.filter((route) => !shut.has(route));
+    const before = closedAtBaseline(project.root);
+    const compared = routes.filter((route) => !(shut.has(route) && before.has(route)));
+    const english2 = state.mode === "bilingual" ? await englishChecks(project.root, server.url, compared, shoot) : { english: [], noBaseline: [] };
+    return { ...english2, closed, arabic: await arabicChecks(project, state, server.url, open, audit) };
   } finally {
     await server.stop();
   }
@@ -3292,7 +3486,7 @@ async function run(ready, step) {
     ledger,
     ...checks,
     ...earlier ? {} : { summaryMissing: true },
-    unreachable,
+    unreachable: [...unreachable, ...checks.closed],
     remainingLint,
     ...tests2 ? { tests: { code: tests2.code, tail: tail(tests2.out) } } : {}
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dualkit/convert",
-  "version": "0.2.0-beta.0",
+  "version": "0.4.0-beta.0",
   "description": "Converts an English React or Next.js app to Arabic on a new git branch.",
   "license": "MIT",
   "type": "module",