From 724dff56dc2416d7305590cb579323b3cc31c532 Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Tue, 29 Sep 2026 07:50:15 -0400
Subject: [PATCH 1/4] feat(bestax-migrate): convert .file inside a Field,
 building its tree from props

File renders the whole .file tree from props, and a .field of its own
around it outside a Field, so the family stayed markup. It now converts
when its tree is exactly the one File renders and it sits inside a Field:
a bestax one already in the file, or a .field converting in the same run,
which a pass after planning checks.

The <input>'s attributes become File's own, since File puts the ones it
doesn't read there, and its other classes become inputClassName. The
button text becomes buttonLabel (left out when it's File's own default),
each .file-icon's content iconLeft or iconRight, and the .file-name's text
fileName beside hasName. The .file itself carries no attribute but a key,
since that would move to the <input> too. A color stays a class, since
color renders has-text-<color> as well, and so does is-centered beside
isRight. A has-name under a condition stays in the call: File renders
{hasName && ...}, and the truth test caught a 0 condition rendering as
text.

The render truth test wraps the markup in a .field and the component in a
Field for each tree shape; the props test typechecks the <input>
attributes File takes.

Closes #809
---
 bestax-migrate/CLAUDE.md                      |   3 +-
 .../e2e/bulma-classes-props.test.ts           |  79 +++++++
 .../e2e/bulma-classes-truth.test.ts           | 148 +++++++++---
 bestax-migrate/e2e/support/file-tree.ts       | 129 ++++++++++
 .../src/elements.tsx                          |  14 ++
 .../__testfixtures__/file.input.tsx           |  73 ++++++
 .../__testfixtures__/file.output.tsx          |  60 +++++
 .../bulma-classes/__tests__/plan.test.ts      | 222 ++++++++++++++++++
 .../bulma-classes/__tests__/transform.test.ts |  81 +++++++
 .../src/sources/bulma-classes/class-map.ts    |  67 +++++-
 .../src/sources/bulma-classes/plan.ts         | 160 +++++++++++++
 .../src/sources/bulma-classes/transform.ts    | 176 +++++++++++++-
 .../migration/bulma-classes.md                |   6 +-
 .../references/bulma-classes/component-map.md |  39 ++-
 .../references/bulma-classes/prop-map.md      |  50 ++--
 .../references/bulma-classes/unmappables.md   |  16 +-
 16 files changed, 1243 insertions(+), 80 deletions(-)
 create mode 100644 bestax-migrate/e2e/support/file-tree.ts
 create mode 100644 bestax-migrate/src/sources/bulma-classes/__testfixtures__/file.input.tsx
 create mode 100644 bestax-migrate/src/sources/bulma-classes/__testfixtures__/file.output.tsx

diff --git a/bestax-migrate/CLAUDE.md b/bestax-migrate/CLAUDE.md
index a1435d1c9..bc2933427 100644
--- a/bestax-migrate/CLAUDE.md
+++ b/bestax-migrate/CLAUDE.md
@@ -100,7 +100,8 @@ is the one with no library behind it, converting raw Bulma classes on plain JSX.
   `.table-container`) or a TODO out; an entry that `absorbs` its only child (`.select`'s
   `<select>`) converts together with it, written in the child's place, and one that
   `countsChildren` (`.skeleton-lines`) writes their count and drops them, one that `buildsIcons`
-  (`.icon-text`) takes its `.icon`s and the texts beside them as props, and one with a
+  (`.icon-text`) takes its `.icon`s and the texts beside them as props, one that `buildsFile`
+  (`.file`) takes its whole tree as props, inside a `Field` only, and one with a
   `parent` (`.pagination-link`) takes the place of the bare `<li>` its target renders too; an entry
   with `wrapsChildren` converts only beside one of its parts, so `transform.ts` plans children
   before their parents; and an element with no class to go by, a menu list's `<li>`, is found
diff --git a/bestax-migrate/e2e/bulma-classes-props.test.ts b/bestax-migrate/e2e/bulma-classes-props.test.ts
index 6cf2c03c8..7146cc070 100644
--- a/bestax-migrate/e2e/bulma-classes-props.test.ts
+++ b/bestax-migrate/e2e/bulma-classes-props.test.ts
@@ -18,6 +18,7 @@ import {
   type RootEntry,
 } from '../src/sources/bulma-classes/class-map.js';
 import { plan, type ChildFacts } from '../src/sources/bulma-classes/plan.js';
+import { fileChildren, type FileTree } from './support/file-tree.js';
 import {
   GLYPHS,
   iconChild,
@@ -157,6 +158,12 @@ function converted(
       root.buildsIcons && {
         childElements: children ?? [iconChild(['fas', 'fa-home']), textChild()],
       }),
+    // One that renders the whole `.file` tree holds it, inside a `.field`.
+    ...(root?.status === 'mapped' &&
+      root.buildsFile && {
+        childElements: children ?? fileChildren(),
+        classesAround: ['field'],
+      }),
     // One that renders its children from a count holds a few of them.
     ...(root?.status === 'mapped' &&
       root.countsChildren && {
@@ -222,6 +229,37 @@ function converted(
       ? `<${name} ${attrs.join(' ')} />`
       : `<${name} ${attrs.join(' ')}>${text}</${name}>`;
   }
+  // One that renders the whole `.file` tree is given the <input>'s
+  // attributes and the parts, as the transform writes them.
+  const file = conversion.file;
+  if (file) {
+    const [label] = children ?? fileChildren();
+    const [input, cta] = label.children!;
+    const parts = cta.children!;
+    const jsx = (child: ChildFacts): string =>
+      `<${child.tag}${child.tokens ? ` className="${child.tokens.join(' ')}"` : ''} />`;
+    const content = (part: ChildFacts) =>
+      part.children ? `{${jsx(part.children[0])}}` : JSON.stringify(part.text);
+    for (const [attribute, value] of input.attributes) {
+      if (attribute === 'type') continue;
+      attrs.push(
+        conversion.numbers.includes(attribute)
+          ? `${attribute}={${Number(value)}}`
+          : jsxAttr(attribute, value as string | true)
+      );
+    }
+    if (file.inputClassName !== null) {
+      attrs.push(jsxAttr('inputClassName', file.inputClassName));
+    }
+    for (const key of ['buttonLabel', 'iconLeft', 'iconRight'] as const) {
+      const index = file[key];
+      if (index !== undefined) attrs.push(`${key}=${content(parts[index])}`);
+    }
+    if (file.fileName !== undefined) {
+      attrs.push(jsxAttr('fileName', file.fileName));
+    }
+    return `<${name} ${attrs.join(' ')} />`;
+  }
   // A target that renders the children itself closes itself, as the
   // transform writes it, and so does one in place of a void child.
   return VOID.has(tag) ||
@@ -363,6 +401,47 @@ describe('every bulma-classes conversion typechecks', () => {
           ])
         );
       }
+      // The tree it renders from props: the <input>'s attributes it takes as
+      // its own, its extra classes, the icons, the default text and a name.
+      if (entry.buildsFile) {
+        const trees: FileTree[] = [
+          { label: 'Choose a file\u2026' },
+          { iconLeft: ['fas', 'fa-upload'], iconRight: ['fas', 'fa-check'] },
+          { inputTokens: ['my-input'] },
+          ...[
+            ...COMMON,
+            ['name', 'resume'],
+            ['accept', 'image/*'],
+            ['multiple', true],
+            ['required', true],
+            ['disabled', true],
+          ].map(([attribute, value]): FileTree => ({
+            input: { [attribute as string]: value as string | true },
+          })),
+        ];
+        for (const tree of trees) {
+          add(
+            converted(
+              entry.tag!,
+              [root],
+              [],
+              undefined,
+              undefined,
+              fileChildren(tree)
+            )
+          );
+        }
+        add(
+          converted(
+            entry.tag!,
+            [root, 'has-name'],
+            [],
+            undefined,
+            undefined,
+            fileChildren({ name: 'cv.pdf' })
+          )
+        );
+      }
       expect({ root, conversions: lines.length > 0 }).toEqual({
         root,
         conversions: true,
diff --git a/bestax-migrate/e2e/bulma-classes-truth.test.ts b/bestax-migrate/e2e/bulma-classes-truth.test.ts
index 49762d474..64dc61140 100644
--- a/bestax-migrate/e2e/bulma-classes-truth.test.ts
+++ b/bestax-migrate/e2e/bulma-classes-truth.test.ts
@@ -35,6 +35,12 @@ import {
   type ChildFacts,
   type ElementFacts,
 } from '../src/sources/bulma-classes/plan.js';
+import {
+  fileChildren,
+  fileProps,
+  rawFrom,
+  type FileTree,
+} from './support/file-tree.js';
 import {
   GLYPHS,
   iconChild,
@@ -199,9 +205,14 @@ function renderBoth(
   // A target that builds its icons from props: the children as written, and
   // the component given them as props, with one icon's text as its own.
   const icons = result.conversion.icons;
+  // A target that renders the whole tree from props: the tree as written,
+  // inside a `.field`, against the component inside a `Field`.
+  const file = result.conversion.file;
   const rawChildren = icons
     ? facts.childElements!.map(rawChild)
-    : (counted ?? soleElement ?? (child ? child.raw : children));
+    : file
+      ? facts.childElements!.map(rawFrom)
+      : (counted ?? soleElement ?? (child ? child.raw : children));
   // A target that renders the element around this one too is compared with
   // the raw element inside that one.
   const raw = result.conversion.replacesParent
@@ -210,7 +221,13 @@ function renderBoth(
         null,
         createElement(facts.tag, rawProps, rawChildren)
       )
-    : renderElement(facts.tag, rawProps, rawChildren);
+    : file
+      ? renderElement(
+          'div',
+          { className: 'field' },
+          createElement(facts.tag, rawProps, rawChildren)
+        )
+      : renderElement(facts.tag, rawProps, rawChildren);
   const { target, props, className, drop, numbers, absorbs } =
     result.conversion;
   const given = { ...extra };
@@ -227,37 +244,42 @@ function renderBoth(
         numbers.includes(name) ? Number(value) : value,
       ])
   );
-  const converted = renderElement(
-    target,
-    {
-      ...kept,
-      ...Object.fromEntries(
-        [...props, ...(absorbs?.props ?? [])].map(([name, value]) => [
-          name,
-          numbers.includes(name) ? Number(value) : value,
-        ])
-      ),
-      ...Object.fromEntries(flags.map(([prop, token]) => [prop, when[token]])),
-      ...(className || stays.length > 0
-        ? { className: [className ?? '', ...stays.flat()].join(' ').trim() }
-        : {}),
-      ...(icons && builtProps(icons, facts.childElements!)),
-    },
-    // A target that couldn't absorb the child renders it as given.
-    icons
-      ? icons.length === 1
-        ? icons[0].text
-        : undefined
-      : counted
-        ? undefined
-        : sole
-          ? absorbs
-            ? soleChildren
-            : soleElement
-          : child
-            ? child.converted
-            : children
-  );
+  const convertedProps = {
+    ...kept,
+    ...Object.fromEntries(
+      [...props, ...(absorbs?.props ?? [])].map(([name, value]) => [
+        name,
+        numbers.includes(name) ? Number(value) : value,
+      ])
+    ),
+    ...Object.fromEntries(flags.map(([prop, token]) => [prop, when[token]])),
+    ...(className || stays.length > 0
+      ? { className: [className ?? '', ...stays.flat()].join(' ').trim() }
+      : {}),
+    ...(icons && builtProps(icons, facts.childElements!)),
+    ...(file && fileProps(file, facts.childElements!, numbers)),
+  };
+  // A target that couldn't absorb the child renders it as given.
+  const convertedChildren = icons
+    ? icons.length === 1
+      ? icons[0].text
+      : undefined
+    : counted || file
+      ? undefined
+      : sole
+        ? absorbs
+          ? soleChildren
+          : soleElement
+        : child
+          ? child.converted
+          : children;
+  const converted = file
+    ? renderElement(
+        'Field',
+        {},
+        createElement(target, convertedProps, convertedChildren)
+      )
+    : renderElement(target, convertedProps, convertedChildren);
   return { raw: normalizeHtml(raw), converted: normalizeHtml(converted) };
 }
 
@@ -323,6 +345,12 @@ function factsFor(
     ...(entries.some(entry => entry?.buildsIcons) && {
       childElements: [iconChild(['fas', 'fa-home']), textChild()],
     }),
+    // One that renders the whole `.file` tree holds that tree, inside a
+    // `.field`.
+    ...(entries.some(entry => entry?.buildsFile) && {
+      childElements: fileChildren({ iconLeft: ['fas', 'fa-upload'] }),
+      classesAround: ['field'],
+    }),
     // One that needs element children holds one (`Icon` around an <i>).
     ...(!absorbs &&
       entries.some(entry => entry?.needsElementChildren) && {
@@ -1077,6 +1105,60 @@ describe.each(mapped.filter(([, entry]) => entry.buildsIcons))(
   }
 );
 
+/**
+ * An element whose target renders its whole tree from props, around each
+ * shape of tree it reads, inside a `.field`: the markup and the component
+ * given what it builds, inside a `Field`, render the same.
+ */
+describe.each(mapped.filter(([, entry]) => entry.buildsFile))(
+  'the tree `.%s` renders',
+  (root, entry) => {
+    const same = (label: string, tree: FileTree, tokens: string[] = []) => {
+      const facts: ElementFacts = {
+        ...factsFor(entry.tag!, [root, ...tokens]),
+        childElements: fileChildren(tree),
+        classesAround: ['field'],
+      };
+      const found = renderBoth(facts);
+      expect({ label, converts: found !== null }).toEqual({
+        label,
+        converts: true,
+      });
+      expect({ label, html: found!.converted }).toEqual({
+        label,
+        html: found!.raw,
+      });
+    };
+
+    it('renders each shape of tree the same', () => {
+      same('bare', {});
+      same('with the text it renders by default', {
+        label: 'Choose a file\u2026',
+      });
+      same('with an icon on each side', {
+        iconLeft: ['fas', 'fa-upload'],
+        iconRight: ['fas', 'fa-check'],
+      });
+      same('with the input its attributes and classes', {
+        input: { name: 'cv', accept: 'image/*', multiple: true, id: 'x' },
+        inputTokens: ['my-input'],
+      });
+      same('with a number attribute on the input', {
+        input: { tabIndex: '0' },
+      });
+      same('with a name', { name: 'cv.pdf' }, ['has-name']);
+      same('with a name slot and no name', {}, ['has-name']);
+      same('with its modifiers together', { iconLeft: ['fas', 'fa-upload'] }, [
+        'is-boxed',
+        'is-fullwidth',
+        'is-right',
+        'is-small',
+        'mt-2',
+      ]);
+    });
+  }
+);
+
 describe('wrappers', () => {
   it.each(Object.entries(WRAPPERS))(
     '<%s> with helper classes renders the same as bestax `%s`',
diff --git a/bestax-migrate/e2e/support/file-tree.ts b/bestax-migrate/e2e/support/file-tree.ts
new file mode 100644
index 000000000..c61c543ed
--- /dev/null
+++ b/bestax-migrate/e2e/support/file-tree.ts
@@ -0,0 +1,129 @@
+/**
+ * The `.file` tree a target that `buildsFile` renders from props, as the
+ * planner reads it, and the props the transform gives that target from it,
+ * for the tests that render or typecheck what it builds.
+ */
+
+import type {
+  BuiltFile,
+  ChildFacts,
+} from '../../src/sources/bulma-classes/plan.js';
+import { createElement } from './render-module.js';
+
+export interface FileTree {
+  /** The <input>'s attributes beside `type="file"`. */
+  input?: Record<string, string | true>;
+  /** Its classes beside `file-input`. */
+  inputTokens?: string[];
+  /** The button text. */
+  label?: string;
+  /** The classes of the <i> in each icon, before and after the text. */
+  iconLeft?: string[];
+  iconRight?: string[];
+  /** The `.file-name`'s text. */
+  name?: string;
+}
+
+const facts = (
+  tag: string,
+  tokens: string[],
+  extra: Partial<ChildFacts> = {}
+): ChildFacts => ({
+  tag,
+  tokens,
+  attributes: new Map(),
+  hasSpread: false,
+  isEmpty: false,
+  ...extra,
+});
+
+/** The `.file`'s children, its one `.file-label` <label>, as facts. */
+export function fileChildren(tree: FileTree = {}): ChildFacts[] {
+  const icon = (glyph: string[]) =>
+    facts('span', ['file-icon'], {
+      staticContent: true,
+      children: [facts('i', glyph, { isEmpty: true })],
+      soleChild: facts('i', glyph, { isEmpty: true }),
+    });
+  const text = tree.label ?? 'Upload';
+  const cta = facts('span', ['file-cta'], {
+    children: [
+      ...(tree.iconLeft ? [icon(tree.iconLeft)] : []),
+      facts('span', ['file-label'], { staticContent: true, text }),
+      ...(tree.iconRight ? [icon(tree.iconRight)] : []),
+    ],
+  });
+  const input = facts('input', ['file-input', ...(tree.inputTokens ?? [])], {
+    attributes: new Map(Object.entries({ type: 'file', ...tree.input })),
+    isEmpty: true,
+  });
+  const name =
+    tree.name === undefined
+      ? []
+      : [
+          facts('span', ['file-name'], {
+            staticContent: true,
+            text: tree.name,
+          }),
+        ];
+  return [facts('label', ['file-label'], { children: [input, cta, ...name] })];
+}
+
+/** An element as written, from its facts, down its tree. */
+export function rawFrom(child: ChildFacts): unknown {
+  return createElement(
+    child.tag,
+    {
+      ...(child.tokens ? { className: child.tokens.join(' ') } : {}),
+      ...Object.fromEntries(child.attributes),
+    },
+    child.children
+      ? child.children.map(rawFrom)
+      : child.soleChild
+        ? rawFrom(child.soleChild)
+        : child.text
+  );
+}
+
+/**
+ * The props the transform gives the target from the tree: the <input>'s
+ * attributes but its class and type, then the parts it built.
+ */
+export function fileProps(
+  built: BuiltFile,
+  children: readonly ChildFacts[],
+  numbers: readonly string[]
+): Record<string, unknown> {
+  const [label] = children;
+  const [input, cta] = label.children!;
+  const parts = cta.children!;
+  const content = (part: ChildFacts) =>
+    part.children
+      ? part.children.length === 1
+        ? rawFrom(part.children[0])
+        : part.children.map(rawFrom)
+      : part.text;
+  return {
+    ...Object.fromEntries(
+      [...input.attributes]
+        .filter(([name]) => name !== 'type')
+        .map(([name, value]) => [
+          name,
+          numbers.includes(name) ? Number(value) : value,
+        ])
+    ),
+    ...(built.inputClassName !== null && {
+      inputClassName: built.inputClassName,
+    }),
+    ...(built.buttonLabel !== undefined && {
+      buttonLabel: content(parts[built.buttonLabel]),
+    }),
+    ...(built.iconLeft !== undefined && {
+      iconLeft: content(parts[built.iconLeft]),
+    }),
+    ...(built.iconRight !== undefined && {
+      iconRight: content(parts[built.iconRight]),
+    }),
+    ...(built.fileName !== undefined && { fileName: built.fileName }),
+  };
+}
diff --git a/bestax-migrate/fixtures/bulma-classes-kitchen-sink/src/elements.tsx b/bestax-migrate/fixtures/bulma-classes-kitchen-sink/src/elements.tsx
index aa719e21d..0efe68c87 100644
--- a/bestax-migrate/fixtures/bulma-classes-kitchen-sink/src/elements.tsx
+++ b/bestax-migrate/fixtures/bulma-classes-kitchen-sink/src/elements.tsx
@@ -102,6 +102,20 @@ export function Elements() {
             <textarea className="textarea has-fixed-size" rows={3} />
           </div>
         </div>
+        <div className="field">
+          <div className="file has-name is-boxed">
+            <label className="file-label">
+              <input className="file-input" type="file" name="resume" />
+              <span className="file-cta">
+                <span className="file-icon">
+                  <i className="fas fa-upload"></i>
+                </span>
+                <span className="file-label">Choose a file…</span>
+              </span>
+              <span className="file-name">resume.pdf</span>
+            </label>
+          </div>
+        </div>
         <div className="field">
           <div className="control">
             <div className="select is-fullwidth">
diff --git a/bestax-migrate/src/sources/bulma-classes/__testfixtures__/file.input.tsx b/bestax-migrate/src/sources/bulma-classes/__testfixtures__/file.input.tsx
new file mode 100644
index 000000000..a6c69051e
--- /dev/null
+++ b/bestax-migrate/src/sources/bulma-classes/__testfixtures__/file.input.tsx
@@ -0,0 +1,73 @@
+export function Uploads({ onPick }: { onPick: () => void }) {
+  return (
+    <form>
+      <div className="field">
+        <div className="file">
+          <label className="file-label">
+            <input className="file-input" type="file" name="resume" />
+            <span className="file-cta">
+              <span className="file-icon">
+                <i className="fas fa-upload"></i>
+              </span>
+              <span className="file-label">Choose a file…</span>
+            </span>
+          </label>
+        </div>
+      </div>
+      <div className="field">
+        <div className="file is-primary is-boxed has-name mt-2">
+          <label className="file-label">
+            <input
+              className="file-input"
+              type="file"
+              name="photo"
+              accept="image/*"
+              onChange={onPick}
+            />
+            <span className="file-cta">
+              <span className="file-label">Upload a photo</span>
+              <span className="file-icon">
+                <span className="icon" aria-label="Upload">
+                  <i className="fas fa-cloud-upload-alt"></i>
+                </span>
+              </span>
+            </span>
+            <span className="file-name">portrait.png</span>
+          </label>
+        </div>
+      </div>
+      {/* No field around it, so File would render one of its own. */}
+      <div className="file">
+        <label className="file-label">
+          <input className="file-input" type="file" name="cv" />
+          <span className="file-cta">
+            <span className="file-label">Upload</span>
+          </span>
+        </label>
+      </div>
+      {/* Something in the tree File doesn't render. */}
+      <div className="field">
+        <div className="file">
+          <label className="file-label">
+            <input className="file-input" type="file" name="doc" />
+            <span className="file-cta">
+              <span className="file-label">Upload</span>
+              <small>PDF only</small>
+            </span>
+          </label>
+        </div>
+      </div>
+      {/* An attribute File would put on its input. */}
+      <div className="field">
+        <div className="file" id="upload">
+          <label className="file-label">
+            <input className="file-input" type="file" name="scan" />
+            <span className="file-cta">
+              <span className="file-label">Upload</span>
+            </span>
+          </label>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/bestax-migrate/src/sources/bulma-classes/__testfixtures__/file.output.tsx b/bestax-migrate/src/sources/bulma-classes/__testfixtures__/file.output.tsx
new file mode 100644
index 000000000..d374b2a49
--- /dev/null
+++ b/bestax-migrate/src/sources/bulma-classes/__testfixtures__/file.output.tsx
@@ -0,0 +1,60 @@
+import { Field, File, Icon } from "@allxsmith/bestax-bulma";
+export function Uploads({ onPick }: { onPick: () => void }) {
+  // TODO(bestax-migrate): bestax `File` renders a `.field` of its own around the `.file` unless it sits inside a `Field`, and nothing around this element is one or becomes one here; keep it as markup, or convert the `.field` around it, then re-run
+  // TODO(bestax-migrate): bestax `File` renders the whole `.file` tree itself, so this converts only when its tree is the one it renders: one bare `.file-label` <label> holding a `.file-input` <input type="file">, a bare `.file-cta` <span> with a bare `.file-label` <span> of static content and at most one bare `.file-icon` <span> of static content on each side of it, and, with `has-name`, at most one bare `.file-name` <span> of static text; keep it as markup, or convert it by hand
+  // TODO(bestax-migrate): bestax `File` puts the attributes it's given on its <input>, so this element's `id` would move there; move it onto the <input> if that's what you want, then re-run
+  return (
+    <form>
+      <Field>
+        <File name="resume" iconLeft={<i className="fas fa-upload"></i>} />
+      </Field>
+      <Field>
+        <File
+          isBoxed
+          hasName
+          mt="2"
+          className="is-primary"
+          name="photo"
+          accept="image/*"
+          onChange={onPick}
+          buttonLabel="Upload a photo"
+          iconRight={<Icon aria-label="Upload">
+            <i className="fas fa-cloud-upload-alt"></i>
+          </Icon>}
+          fileName="portrait.png" />
+      </Field>
+      {/* No field around it, so File would render one of its own. */}
+      <div className="file">
+        <label className="file-label">
+          <input className="file-input" type="file" name="cv" />
+          <span className="file-cta">
+            <span className="file-label">Upload</span>
+          </span>
+        </label>
+      </div>
+      {/* Something in the tree File doesn't render. */}
+      <Field>
+        <div className="file">
+          <label className="file-label">
+            <input className="file-input" type="file" name="doc" />
+            <span className="file-cta">
+              <span className="file-label">Upload</span>
+              <small>PDF only</small>
+            </span>
+          </label>
+        </div>
+      </Field>
+      {/* An attribute File would put on its input. */}
+      <Field>
+        <div className="file" id="upload">
+          <label className="file-label">
+            <input className="file-input" type="file" name="scan" />
+            <span className="file-cta">
+              <span className="file-label">Upload</span>
+            </span>
+          </label>
+        </div>
+      </Field>
+    </form>
+  );
+}
diff --git a/bestax-migrate/src/sources/bulma-classes/__tests__/plan.test.ts b/bestax-migrate/src/sources/bulma-classes/__tests__/plan.test.ts
index abdf651e4..9f1449161 100644
--- a/bestax-migrate/src/sources/bulma-classes/__tests__/plan.test.ts
+++ b/bestax-migrate/src/sources/bulma-classes/__tests__/plan.test.ts
@@ -883,6 +883,228 @@ describe('plan', () => {
     });
   });
 
+  describe('File', () => {
+    const node = (
+      tag: string,
+      tokens: string[] | undefined,
+      extra: Partial<ChildFacts> = {}
+    ): ChildFacts => ({
+      tag,
+      ...(tokens && { tokens }),
+      attributes: new Map(),
+      hasSpread: false,
+      isEmpty: false,
+      ...extra,
+    });
+    const span = (token: string, extra: Partial<ChildFacts> = {}) =>
+      node('span', [token], { staticContent: true, ...extra });
+    const icon = () =>
+      span('file-icon', {
+        children: [node('i', ['fas', 'fa-upload'], { isEmpty: true })],
+      });
+    interface Tree {
+      input?: Partial<ChildFacts>;
+      cta?: ChildFacts[];
+      label?: Partial<ChildFacts>;
+      name?: ChildFacts;
+      beside?: ChildFacts[];
+    }
+    /** The `.file`'s children, with one part of the tree swapped out. */
+    const tree = (swap: Tree = {}): ChildFacts[] => [
+      node('label', ['file-label'], {
+        children: [
+          node('input', ['file-input'], {
+            attributes: new Map([
+              ['type', 'file'],
+              ['name', 'cv'],
+            ]),
+            isEmpty: true,
+            ...swap.input,
+          }),
+          node('span', ['file-cta'], {
+            children: swap.cta ?? [span('file-label', { text: 'Upload' })],
+          }),
+          ...(swap.name ? [swap.name] : []),
+        ],
+        ...swap.label,
+      }),
+      ...(swap.beside ?? []),
+    ];
+    const file = (
+      children: ChildFacts[] | undefined = tree(),
+      className = 'file',
+      attributes: Record<string, string | true | null> = {},
+      extra: Partial<ElementFacts> = {}
+    ) =>
+      plan(
+        facts('div', className, attributes, {
+          childElements: children,
+          classesAround: ['field'],
+          ...extra,
+        })
+      );
+    const rules = (result: ReturnType<typeof plan>) =>
+      result.todos.map(todo => todo.rule);
+
+    it('builds the tree it renders, and takes the input attributes as its own', () => {
+      expect(file().conversion).toEqual({
+        target: 'File',
+        props: [],
+        className: null,
+        drop: [],
+        numbers: [],
+        file: { inputClassName: null, buttonLabel: 0 },
+      });
+      const built = file(
+        tree({
+          input: {
+            tokens: ['file-input', 'my-input'],
+            attributes: new Map<string, string | true>([
+              ['type', 'file'],
+              ['tabIndex', '0'],
+            ]),
+          },
+          cta: [icon(), span('file-label', { text: 'Choose a file…' }), icon()],
+          name: span('file-name', { text: 'cv.pdf' }),
+        }),
+        'file has-name is-boxed is-primary'
+      ).conversion!;
+      expect(built.props).toEqual([
+        ['hasName', true],
+        ['isBoxed', true],
+      ]);
+      expect(built.className).toBe('is-primary');
+      expect(built.numbers).toEqual(['tabIndex']);
+      expect(built.file).toEqual({
+        inputClassName: 'my-input',
+        iconLeft: 0,
+        iconRight: 2,
+        fileName: 'cv.pdf',
+      });
+    });
+
+    it('converts only inside a Field, already there or becoming one', () => {
+      expect(rules(file(tree(), 'file', {}, { classesAround: [] }))).toEqual([
+        'context:File',
+      ]);
+      expect(
+        file(tree(), 'file', {}, { classesAround: [], bestaxAround: ['Field'] })
+          .conversion?.target
+      ).toBe('File');
+    });
+
+    it('refuses an attribute of its own, which would move to the input', () => {
+      expect(rules(file(tree(), 'file', { id: 'x' }))).toEqual(['attr:id']);
+      expect(
+        rules(file(tree(), 'file', { ref: null }, { hasRef: true }))
+      ).toEqual(['attr:ref']);
+      expect(file(tree(), 'file', { key: 'k' }).conversion).not.toBeNull();
+    });
+
+    it('refuses an input attribute it reads as a prop, or a number misspelled', () => {
+      for (const name of ['size', 'color', 'label', 'm']) {
+        const result = file(
+          tree({
+            input: {
+              attributes: new Map([
+                ['type', 'file'],
+                [name, 'x'],
+              ]),
+            },
+          })
+        );
+        expect({ name, rules: rules(result) }).toEqual({
+          name,
+          rules: [`attr:${name}`],
+        });
+      }
+      expect(
+        rules(
+          file(
+            tree({
+              input: {
+                attributes: new Map([
+                  ['type', 'file'],
+                  ['tabIndex', '00'],
+                ]),
+              },
+            })
+          )
+        )
+      ).toEqual(['attr:tabIndex']);
+    });
+
+    it('keeps it as markup when its tree is any other', () => {
+      const shaped: Array<[string, ChildFacts[] | undefined]> = [
+        ['no children to read', []],
+        [
+          'something beside the label',
+          tree({ beside: [node('p', undefined)] }),
+        ],
+        [
+          'a label with an attribute',
+          tree({ label: { attributes: new Map([['htmlFor', 'x']]) } }),
+        ],
+        [
+          'an input of another type',
+          tree({
+            input: { attributes: new Map([['type', 'text']]) },
+          }),
+        ],
+        [
+          'an input with a key',
+          tree({
+            input: {
+              attributes: new Map([
+                ['type', 'file'],
+                ['key', 'k'],
+              ]),
+            },
+          }),
+        ],
+        ['an input with a spread', tree({ input: { hasSpread: true } })],
+        ['no button text', tree({ cta: [icon()] })],
+        [
+          'button text that is not static',
+          tree({ cta: [span('file-label', { staticContent: false })] }),
+        ],
+        [
+          'two icons before the text',
+          tree({ cta: [icon(), icon(), span('file-label', { text: 'x' })] }),
+        ],
+        [
+          'something else in the call to action',
+          tree({
+            cta: [span('file-label', { text: 'x' }), node('small', undefined)],
+          }),
+        ],
+        [
+          'an icon with a class of its own',
+          tree({
+            cta: [
+              span('file-label', { text: 'x' }),
+              { ...icon(), tokens: ['file-icon', 'is-large'] },
+            ],
+          }),
+        ],
+        [
+          'a name that is not static text',
+          tree({ name: span('file-name', { text: undefined }) }),
+        ],
+      ];
+      for (const [label, children] of shaped) {
+        expect({ label, rules: rules(file(children)) }).toEqual({
+          label,
+          rules: ['children:File'],
+        });
+      }
+      // A name needs `has-name`, which `File` renders it beside.
+      expect(
+        rules(file(tree({ name: span('file-name', { text: 'cv.pdf' }) })))
+      ).toEqual(['children:File']);
+    });
+  });
+
   describe('Pagination links and ellipsis', () => {
     const li = (extra: Partial<ChildFacts> = {}): ChildFacts => ({
       tag: 'li',
diff --git a/bestax-migrate/src/sources/bulma-classes/__tests__/transform.test.ts b/bestax-migrate/src/sources/bulma-classes/__tests__/transform.test.ts
index 38096f540..bd28c86b7 100644
--- a/bestax-migrate/src/sources/bulma-classes/__tests__/transform.test.ts
+++ b/bestax-migrate/src/sources/bulma-classes/__tests__/transform.test.ts
@@ -1256,3 +1256,84 @@ describe('an element whose component builds its icons from props', () => {
     expect(migrate(output!).output).toBeNull();
   });
 });
+
+describe('an element whose component renders its whole tree from props', () => {
+  const tree = (
+    cta: string,
+    input = '<input className="file-input" type="file" name="cv" />'
+  ) =>
+    `<div className="file">\n        <label className="file-label">\n          ${input}\n          <span className="file-cta">${cta}</span>\n        </label>\n      </div>`;
+  const inField = (
+    file: string,
+    open = '<div className="field">',
+    close = '</div>'
+  ) =>
+    `export const A = () => (\n  <form>\n    ${open}\n      ${file}\n    ${close}\n  </form>\n);\n`;
+  const upload = '<span className="file-label">Upload</span>';
+
+  it('converts inside a Field already in the file, and imports only what it wrote', () => {
+    const { output, rules } = migrate(
+      `import { Field } from "@allxsmith/bestax-bulma";\n${inField(tree(upload), '<Field>', '</Field>')}`
+    );
+    expect(rules).toEqual([]);
+    expect(output).toContain('<File name="cv" buttonLabel="Upload" />');
+    expect(output).toContain(
+      'import { Field, File } from "@allxsmith/bestax-bulma";'
+    );
+  });
+
+  it('stays markup when the .field around it stays markup', () => {
+    const source = inField(tree(upload), '<div className="field" {...rest}>');
+    const { output, rules } = migrate(
+      source.replace(
+        'export const A = () =>',
+        'export const A = (rest: object) =>'
+      )
+    );
+    expect(rules).toEqual(['spread:Field', 'context:File']);
+    expect(output).toContain('<div className="file">');
+    expect(migrate(output!).output).toBeNull();
+  });
+
+  it('writes the input its classes and attributes as the component takes them', () => {
+    const { output } = migrate(
+      inField(
+        tree(
+          upload,
+          '<input className="file-input is-hidden-mobile" type="file" aria-label="Your CV" tabIndex="0" onChange={() => {}} />'
+        )
+      )
+    );
+    expect(output).toMatch(
+      /<File\s+aria-label="Your CV"\s+tabIndex=\{0\}\s+onChange=\{\(\) => \{\}\}\s+inputClassName="is-hidden-mobile"\s+buttonLabel="Upload" \/>/
+    );
+  });
+
+  it('writes button text JSX would read differently as the string it renders', () => {
+    const { output } = migrate(
+      inField(
+        tree(
+          '<span className="file-label">Upload <strong>your CV</strong> &amp; more</span>'
+        )
+      )
+    );
+    expect(output).toContain(
+      'buttonLabel={<>{"Upload "}<strong>your CV</strong>{" & more"}</>}'
+    );
+  });
+
+  it('keeps the comments in its tree when the tree goes', () => {
+    const { output } = migrate(
+      inField(
+        tree(
+          '<span className="file-label" /* the button */>Upload</span>',
+          '<input /* the input */ className="file-input" type="file" />'
+        )
+      )
+    );
+    expect(output).not.toContain('file-cta');
+    expect(output).toContain('/* the input */');
+    expect(output).toContain('/* the button */');
+    expect(migrate(output!).output).toBeNull();
+  });
+});
diff --git a/bestax-migrate/src/sources/bulma-classes/class-map.ts b/bestax-migrate/src/sources/bulma-classes/class-map.ts
index 3b0754f8e..3c186e9aa 100644
--- a/bestax-migrate/src/sources/bulma-classes/class-map.ts
+++ b/bestax-migrate/src/sources/bulma-classes/class-map.ts
@@ -249,6 +249,13 @@ export interface RootEntry {
    * and each `.icon` converts on its own; they go.
    */
   readonly buildsIcons?: boolean;
+  /**
+   * The target renders the whole `.file` tree from props (`File`): its
+   * `<input>`, button text, icons and file name. The element converts only
+   * when its tree is exactly that one, and only inside a `Field`, since
+   * outside one the target renders a `.field` of its own around it.
+   */
+  readonly buildsFile?: boolean;
   /** The target takes no helper props, so every helper class stays a class. */
   readonly noHelpers?: boolean;
   /**
@@ -1599,10 +1606,61 @@ export const ROOTS: Readonly<Record<string, RootEntry>> = {
     'Radios',
     'bestax `Radios` renders its own `.field` and `.control` wrappers'
   ),
-  file: todo(
-    'File',
-    'bestax `File` renders the whole `.file-label` tree itself'
-  ),
+  // `File` renders the whole `.file` tree from props, and puts the
+  // attributes it's given on its `<input>`. `color` renders `has-text-<color>`
+  // too, so a color stays a class, and `isCentered` renders nothing beside
+  // `isRight`.
+  file: {
+    ...BASE,
+    target: 'File',
+    tag: 'div',
+    textColor: null,
+    bgColor: 'backgroundColor',
+    modifiers: {
+      ...tokens('is-', ['small', 'medium', 'large'], 'size'),
+      ...flags({
+        'is-boxed': 'isBoxed',
+        'is-fullwidth': 'isFullwidth',
+        'is-right': 'isRight',
+      }),
+      // `File` renders `{hasName && fileName && …}`, so a condition handed to
+      // it as it is would render a falsy number (`0`) as text.
+      'has-name': { writes: [{ prop: 'hasName' }], onlyTrue: true },
+    },
+    omits: {
+      ...Object.fromEntries(
+        COMPONENT_COLORS.map(color => [
+          `is-${color}`,
+          '`color` renders `has-text-<color>` on the `.file` as well',
+        ])
+      ),
+      'is-centered': '`isCentered` renders nothing beside `isRight`',
+    },
+    buildsFile: true,
+    ownProps: [
+      'label',
+      'labelSize',
+      'labelProps',
+      'horizontal',
+      'message',
+      'messageColor',
+      'fieldClassName',
+      'color',
+      'size',
+      'isBoxed',
+      'isFullwidth',
+      'isFullWidth',
+      'isRight',
+      'isCentered',
+      'hasName',
+      'buttonLabel',
+      'iconLeft',
+      'iconRight',
+      'inputClassName',
+      'fileName',
+    ],
+    passThrough: ['ref'],
+  },
   'file-label': part(),
   'file-input': part(),
   'file-cta': part(),
@@ -2236,6 +2294,7 @@ export const FORWARDS_REF: readonly string[] = [
   'InputBase',
   'TextAreaBase',
   'SelectBase',
+  'File',
 ];
 
 /**
diff --git a/bestax-migrate/src/sources/bulma-classes/plan.ts b/bestax-migrate/src/sources/bulma-classes/plan.ts
index 81014b13d..da0a66597 100644
--- a/bestax-migrate/src/sources/bulma-classes/plan.ts
+++ b/bestax-migrate/src/sources/bulma-classes/plan.ts
@@ -149,6 +149,13 @@ export interface ChildFacts {
   becomes?: Conversion;
   soleChild?: ChildFacts;
   text?: string;
+  /**
+   * Its own `childElements`, read the same way, and whether its content is
+   * static: text and elements only, at least one of them rendered. What an
+   * entry that `buildsFile` reads, down the tree.
+   */
+  children?: readonly ChildFacts[];
+  staticContent?: boolean;
 }
 
 export interface Todo {
@@ -210,6 +217,47 @@ export interface Conversion {
    * has a text, which becomes its children.
    */
   icons?: BuiltIcon[];
+  /**
+   * The target renders the element's whole tree from props (`File`): the
+   * `<input>`'s attributes join the element's, and the parts below become
+   * props. The tree goes, and the element closes itself.
+   */
+  file?: BuiltFile;
+}
+
+/**
+ * The `.file` tree a target that `buildsFile` renders from props. The one
+ * child of the element is its `.file-label` <label>, holding the <input>,
+ * the `.file-cta` and at most one `.file-name`.
+ */
+export interface BuiltFile {
+  /** The <input>'s classes but `file-input`, as `inputClassName`, or null. */
+  inputClassName: string | null;
+  /**
+   * Which of the `.file-cta`'s children holds the button text, when it isn't
+   * the text the target renders by default.
+   */
+  buttonLabel?: number;
+  /** Which of them holds the icon before that text, and after it. */
+  iconLeft?: number;
+  iconRight?: number;
+  /** The `.file-name`'s text. */
+  fileName?: string;
+}
+
+/** The button text `File` renders when it's given none. */
+const DEFAULT_FILE_LABEL = 'Choose a file\u2026';
+
+/**
+ * Why a target that `buildsFile` stays markup outside a `Field`, for the
+ * planner here and for the transform, which can see whether the `.field`
+ * around it converts.
+ */
+export function fileContextTodo(target: string): Todo {
+  return {
+    rule: ruleId('context', target),
+    message: `bestax \`${target}\` renders a \`.field\` of its own around the \`.file\` unless it sits inside a \`Field\`, and nothing around this element is one or becomes one here; keep it as markup, or convert the \`.field\` around it, then re-run`,
+  };
 }
 
 /** One icon a target that `buildsIcons` builds from props. */
@@ -356,6 +404,22 @@ export function plan(facts: ElementFacts): Plan {
       `this element spreads props, which bestax \`${target}\` may read differently than the element did (a spread \`className\` merges with its classes instead of replacing them); convert it to \`${target}\` by hand`
     );
   }
+  if (entry.buildsFile) {
+    const own = [...facts.attributes.keys()].find(name => name !== 'key');
+    if (own) {
+      return refuse(
+        'attr',
+        own,
+        `bestax \`${target}\` puts the attributes it's given on its <input>, so this element's \`${own}\` would move there; move it onto the <input> if that's what you want, then re-run`
+      );
+    }
+    if (
+      !facts.bestaxAround?.includes('Field') &&
+      !facts.classesAround?.includes('field')
+    ) {
+      return { conversion: null, todos: [...todos, fileContextTodo(target)] };
+    }
+  }
   if (facts.hasRef && !FORWARDS_REF.includes(target)) {
     return refuse(
       'ref',
@@ -687,6 +751,13 @@ export function plan(facts: ElementFacts): Plan {
     if ('why' in built) return refuse('children', target, built.why);
     icons = built.icons;
   }
+  let file: BuiltFile | undefined;
+  if (entry.buildsFile) {
+    const built = buildFile(facts.childElements, entry, writes.has('hasName'));
+    if ('why' in built) return refuse(built.kind, built.token, built.why);
+    file = built.file;
+    numbers.push(...built.numbers);
+  }
 
   const props: Array<[string, string | true]> = [];
   if (as) props.push(['as', as]);
@@ -757,11 +828,100 @@ export function plan(facts: ElementFacts): Plan {
       ...(parent ? { replacesParent: true as const } : {}),
       ...(conditional.length > 0 ? { conditional } : {}),
       ...(icons ? { icons } : {}),
+      ...(file ? { file } : {}),
     },
     todos,
   };
 }
 
+/**
+ * The tree a target that `buildsFile` renders from props, read from an
+ * element's children: exactly the one it renders, with static content where
+ * it takes a prop. The <input>'s attributes become the target's, so one it
+ * reads as a prop of its own refuses.
+ */
+function buildFile(
+  children: readonly ChildFacts[] | undefined,
+  entry: RootEntry,
+  hasName: boolean
+):
+  | { file: BuiltFile; numbers: string[] }
+  | { kind: string; token: string; why: string } {
+  const target = entry.target!;
+  const shape = {
+    kind: 'children',
+    token: target,
+    why: `bestax \`${target}\` renders the whole \`.file\` tree itself, so this converts only when its tree is the one it renders: one bare \`.file-label\` <label> holding a \`.file-input\` <input type="file">, a bare \`.file-cta\` <span> with a bare \`.file-label\` <span> of static content and at most one bare \`.file-icon\` <span> of static content on each side of it, and, with \`has-name\`, at most one bare \`.file-name\` <span> of static text; keep it as markup, or convert it by hand`,
+  };
+  const bare = (child: ChildFacts | undefined, tag: string, token: string) =>
+    child?.tag === tag &&
+    child.tokens?.length === 1 &&
+    child.tokens[0] === token &&
+    child.attributes.size === 0 &&
+    !child.hasSpread;
+  const [label, ...beside] = children ?? [];
+  if (beside.length > 0 || !bare(label, 'label', 'file-label')) return shape;
+  const [input, cta, name, ...more] = label.children ?? [];
+  if (
+    more.length > 0 ||
+    input?.tag !== 'input' ||
+    !input.tokens?.includes('file-input') ||
+    input.attributes.get('type') !== 'file' ||
+    input.attributes.has('key') ||
+    input.hasSpread ||
+    !bare(cta, 'span', 'file-cta')
+  ) {
+    return shape;
+  }
+  const parts = cta.children ?? [];
+  const at = parts.findIndex(part => bare(part, 'span', 'file-label'));
+  const icons = parts.filter((_, index) => index !== at);
+  if (
+    at === -1 ||
+    at > 1 ||
+    parts.length - at > 2 ||
+    !parts[at].staticContent ||
+    !icons.every(icon => bare(icon, 'span', 'file-icon') && icon.staticContent)
+  ) {
+    return shape;
+  }
+  if (name && !(hasName && bare(name, 'span', 'file-name') && name.text)) {
+    return shape;
+  }
+  const numbers: string[] = [];
+  for (const [attribute, value] of input.attributes) {
+    if (attribute === 'type') continue;
+    if (entry.ownProps?.includes(attribute) || HELPER_PROPS.has(attribute)) {
+      return {
+        kind: 'attr',
+        token: attribute,
+        why: `bestax \`${target}\` takes the <input>'s attributes as its own props, and \`${attribute}\` is one it reads differently; rename or drop the attribute, then re-run`,
+      };
+    }
+    if (!numberAttrsOf(entry).includes(attribute)) continue;
+    if (typeof value !== 'string') continue;
+    if (!/^-?\d+(?:\.\d+)?$/.test(value) || String(Number(value)) !== value) {
+      return {
+        kind: 'attr',
+        token: attribute,
+        why: `bestax \`${target}\` types \`${attribute}\` as a number, and \`${value}\` is not a number spelled the way it renders; keep this element as markup`,
+      };
+    }
+    numbers.push(attribute);
+  }
+  const inputClasses = input.tokens.filter(token => token !== 'file-input');
+  return {
+    file: {
+      inputClassName: inputClasses.length > 0 ? inputClasses.join(' ') : null,
+      ...(parts[at].text !== DEFAULT_FILE_LABEL && { buttonLabel: at }),
+      ...(at === 1 && { iconLeft: 0 }),
+      ...(parts.length - at === 2 && { iconRight: at + 1 }),
+      ...(name && { fileName: name.text }),
+    },
+    numbers,
+  };
+}
+
 /**
  * The icons a target that `buildsIcons` builds from an element's children:
  * each `.icon` that converts to `Icon` on its own and holds a glyph `Icon`
diff --git a/bestax-migrate/src/sources/bulma-classes/transform.ts b/bestax-migrate/src/sources/bulma-classes/transform.ts
index d975d4790..239b1dff4 100644
--- a/bestax-migrate/src/sources/bulma-classes/transform.ts
+++ b/bestax-migrate/src/sources/bulma-classes/transform.ts
@@ -46,6 +46,7 @@ import {
   seedBestaxImport,
 } from '../_shared/bestax-import.js';
 import {
+  fileContextTodo,
   plan,
   type BuiltIcon,
   type ChildFacts,
@@ -869,6 +870,62 @@ function textChild(j: any, text: string): any {
     : j.jsxExpressionContainer(j.stringLiteral(text));
 }
 
+/**
+ * A text as an attribute value: quoted when JSX reads it as written there,
+ * and as a string otherwise (a quote, or an `&` it would read as an entity).
+ */
+function textValue(j: any, text: string): any {
+  return /^[^"&\r\n]*$/.test(text)
+    ? j.stringLiteral(text)
+    : j.jsxExpressionContainer(j.stringLiteral(text));
+}
+
+/** Whether an element's content is text and elements only, and renders. */
+function staticContent(element: any): boolean {
+  const content = (element.children ?? []).filter(reachesReact);
+  return (
+    content.length > 0 &&
+    content.every(
+      (child: any) =>
+        child.type === 'JSXText' ||
+        child.type === 'JSXElement' ||
+        child.type === 'JSXFragment' ||
+        (child.type === 'JSXExpressionContainer' &&
+          child.expression.type === 'StringLiteral' &&
+          child.expression.value !== '')
+    )
+  );
+}
+
+/**
+ * An element's content as one prop value: its one element, or its text, or
+ * a fragment of them all, each text written as the string it renders.
+ */
+function contentValue(j: any, element: any): any {
+  const content = (element.children ?? []).filter(
+    (child: any) => !dropped(child)
+  );
+  if (content.length === 1) {
+    const [only] = content;
+    if (only.type === 'JSXText') {
+      return textValue(j, jsxTextRenders(only.value));
+    }
+    if (only.type === 'JSXExpressionContainer') return only;
+    return j.jsxExpressionContainer(only);
+  }
+  return j.jsxExpressionContainer(
+    j.jsxFragment(
+      j.jsxOpeningFragment(),
+      j.jsxClosingFragment(),
+      content.map((child: any) =>
+        child.type === 'JSXText'
+          ? textChild(j, jsxTextRenders(child.value))
+          : child
+      )
+    )
+  );
+}
+
 function insideForeignContent(elementPath: ASTPath<any>): boolean {
   let current: any = elementPath.parent;
   while (current) {
@@ -1116,6 +1173,27 @@ export default function transform(
       : undefined;
   };
 
+  /**
+   * What the planner reads of a child element, down its tree: what it
+   * converts to on its own (children are planned first), its only child,
+   * its text and whether its content is static, and its own children the
+   * same way.
+   */
+  const readChild = (child: any): Partial<ChildFacts> => {
+    const becomes = planned.get(child)?.conversion;
+    const only = soleChild(child);
+    const inner = only && childFacts(only);
+    const text = textOf(child);
+    const children = childElementsOf(child, readChild);
+    return {
+      ...(becomes && { becomes }),
+      ...(inner && { soleChild: inner }),
+      ...(text !== undefined && { text }),
+      ...(children && { children }),
+      ...(staticContent(child) && { staticContent: true }),
+    };
+  };
+
   /** The element directly around this one, when this is its only child. */
   const holderOf = (elementPath: ASTPath<any>): any => {
     const up = elementPath.parent?.node;
@@ -1156,17 +1234,7 @@ export default function transform(
       childTargets: childTargets(elementPath),
       soleChildTarget: planned.get(sole)?.conversion?.target,
       soleChild: sole && childFacts(sole),
-      childElements: childElementsOf(element, child => {
-        const becomes = planned.get(child)?.conversion;
-        const only = soleChild(child);
-        const inner = only && childFacts(only);
-        const text = textOf(child);
-        return {
-          ...(becomes && { becomes }),
-          ...(inner && { soleChild: inner }),
-          ...(text !== undefined && { text }),
-        };
-      }),
+      childElements: childElementsOf(element, readChild),
       bestaxInside: bestaxInside.get(element) ?? [],
       bestaxAround: surrounding.bestax,
       componentsAround: surrounding.other,
@@ -1296,6 +1364,27 @@ export default function transform(
     found.converts = false;
     planned.set(found.path.node, found.plan);
   }
+  // A target that renders a `.field` of its own outside a `Field` converts
+  // only inside one: a bestax `Field` already around it, or a `.field`
+  // around it that converts here.
+  for (const found of elements) {
+    const conversion = found.plan.conversion;
+    if (!conversion?.file) continue;
+    let inField = false;
+    for (let up = found.path.parent; up && !inField; up = up.parent) {
+      if (up.node?.type !== 'JSXElement') continue;
+      inField =
+        (bestaxTarget(up.node, up) ??
+          planned.get(up.node)?.conversion?.target) === 'Field';
+    }
+    if (inField) continue;
+    found.plan = {
+      conversion: null,
+      todos: [...found.plan.todos, fileContextTodo(conversion.target)],
+    };
+    found.converts = false;
+    planned.set(found.path.node, found.plan);
+  }
   if (elements.length === 0) return print();
 
   // ---- 3. File-level gates ------------------------------------------------------
@@ -1457,6 +1546,71 @@ export default function transform(
         name.comments = [...(name.comments ?? []), ...gone.map(afterTagName)];
       }
     }
+    if (conversion.file) {
+      // The target renders the whole tree from props: the <input>'s
+      // attributes join the element's, the parts below become props, and
+      // the tree goes, its comments moving to the name that stays.
+      const built = conversion.file;
+      const inside = (node: any): any[] =>
+        (node.children ?? []).filter((child: any) => !dropped(child));
+      const [label] = inside(element);
+      const [input, cta, name] = inside(label);
+      const parts = inside(cta);
+      const given = (input.openingElement.attributes ?? []).filter(
+        (attr: any) => !['className', 'type'].includes(attributeName(attr))
+      );
+      const props: any[] = [...given];
+      const prop = (key: string, value: any) =>
+        props.push(j.jsxAttribute(j.jsxIdentifier(key), value));
+      if (built.inputClassName !== null) {
+        prop('inputClassName', textValue(j, built.inputClassName));
+      }
+      for (const key of ['buttonLabel', 'iconLeft', 'iconRight'] as const) {
+        const index = built[key];
+        if (index !== undefined) prop(key, contentValue(j, parts[index]));
+      }
+      if (built.fileName !== undefined) {
+        prop('fileName', textValue(j, built.fileName));
+      }
+      element.openingElement.attributes = [
+        ...(element.openingElement.attributes ?? []),
+        ...props,
+      ];
+      const commentChildren = (node: any): any[] =>
+        (node.children ?? [])
+          .filter(
+            (child: any) =>
+              child.type === 'JSXExpressionContainer' &&
+              child.expression.type === 'JSXEmptyExpression'
+          )
+          .flatMap((child: any) => commentsWithin(child));
+      const moved = [
+        ...[label, input, cta, name, ...parts]
+          .filter(Boolean)
+          .flatMap((node: any) => [
+            ...(node.comments ?? []),
+            ...tagComments(node),
+          ]),
+        ...[label, cta, name, ...parts]
+          .filter(Boolean)
+          .flatMap((node: any) => node.openingElement.attributes ?? [])
+          .flatMap((attr: any) => commentsWithin(attr)),
+        ...(input.openingElement.attributes ?? [])
+          .filter((attr: any) => !given.includes(attr))
+          .flatMap((attr: any) => commentsWithin(attr)),
+        ...[element, label, cta].flatMap(commentChildren),
+        ...[element.closingElement, element.closingElement?.name].flatMap(
+          (node: any) => node?.comments ?? []
+        ),
+      ];
+      element.children = [];
+      element.openingElement.selfClosing = true;
+      element.closingElement = null;
+      if (moved.length) {
+        const tag = element.openingElement.name;
+        tag.comments = [...(tag.comments ?? []), ...moved.map(afterTagName)];
+      }
+    }
     if (conversion.icons) {
       // The target builds its children from props: one icon as `iconProps`,
       // with its text as the children, or several as `items`. The children
diff --git a/docs/docs/guides/getting-started/migration/bulma-classes.md b/docs/docs/guides/getting-started/migration/bulma-classes.md
index ca075ef73..820a24fc5 100644
--- a/docs/docs/guides/getting-started/migration/bulma-classes.md
+++ b/docs/docs/guides/getting-started/migration/bulma-classes.md
@@ -73,7 +73,7 @@ stock stylesheet.
   parts, `navbar` and most of its parts, `field` and its parts, `control`, `input`, `textarea`,
   `select`, `breadcrumb`, `image`, `menu` and its label, list and items, the parts inside a `modal`
   but its close button, `pagination` and its list, links and ellipses, `panel` and its
-  heading, tabs and blocks, `tabs`, `icon`, `icon-text`, `delete`, `progress`, `skeleton-block`, `footer` and
+  heading, tabs and blocks, `tabs`, `icon`, `icon-text`, `file` inside a `field`, `delete`, `progress`, `skeleton-block`, `footer` and
   `table` become their bestax components, with their modifier classes as props (`is-primary` →
   `color="primary"`, `is-half` → `size="half"`).
 - **Helper classes** become helper props on those components (`mt-4` → `mt="4"`,
@@ -135,8 +135,8 @@ Anything that would change the markup stays as written:
   variable or another function is flagged with the component the element would become
   (`dynamic-class:<Target>`). Converting it means turning each condition into a prop, which is
   quick by hand and risky to guess at.
-- **Components that render parts of their own.** `Modal` adds dialog attributes, `File` renders
-  its own wrappers, and so on. These families are flagged once each (`family:<class>`) and
+- **Components that render parts of their own.** `Modal` adds dialog attributes, `Dropdown` renders
+  its own trigger and menu, and so on. These families are flagged once each (`family:<class>`) and
   converted by hand.
 - **Form markup around bestax already.** `Field` and `Control` tell bestax's form controls
   inside them to skip their own wrappers, so a `.field` or `.control` that already holds one
diff --git a/skills/bestax-migrate/references/bulma-classes/component-map.md b/skills/bestax-migrate/references/bulma-classes/component-map.md
index b765bb9dd..76b5950b6 100644
--- a/skills/bestax-migrate/references/bulma-classes/component-map.md
+++ b/skills/bestax-migrate/references/bulma-classes/component-map.md
@@ -81,6 +81,7 @@ a `<label>` or `<div>` `.panel-block` stays markup with no TODO, since bestax re
 | `.breadcrumb`          | `Breadcrumb`          | `<nav>` only                                                   |
 | `.skeleton-block`      | `Skeleton`            | `<div>` only                                                   |
 | `.skeleton-lines`      | `Skeleton`            | `<div>` only                                                   |
+| `.file`                | `File`                | `<div>` only                                                   |
 | `.icon`                | `Icon`                | `<span>` only                                                  |
 | `.icon-text`           | `IconText`            | `<span>` only                                                  |
 | `.image`               | `Image`               | `<div>`, `<figure>`, `<p>` via `as`                            |
@@ -281,12 +282,48 @@ It converts only when every `.icon` inside converts to `Icon` on its own and hol
 texts, bare and static. Anything else keeps it as markup with a `children:IconText` TODO, and the
 `.icon`s inside convert on their own.
 
+## A tree a component renders from props
+
+`File` renders the whole `.file` tree from props, so a `.file` converts together with everything
+inside it. The `<input>`'s attributes become `File`'s own (it puts the ones it doesn't read on the
+`<input>`), its other classes become `inputClassName`, the `.file-label` `<span>`'s content becomes
+`buttonLabel` (left out when it's `File`'s own default, `Choose a file…`), each `.file-icon`'s
+content becomes `iconLeft` or `iconRight`, and the `.file-name`'s text becomes `fileName` beside
+`hasName`.
+
+```jsx
+<div className="field">
+  <div className="file has-name">
+    <label className="file-label">
+      <input className="file-input" type="file" name="cv" />
+      <span className="file-cta">
+        <span className="file-icon"><i className="fas fa-upload"></i></span>
+        <span className="file-label">Upload</span>
+      </span>
+      <span className="file-name">cv.pdf</span>
+    </label>
+  </div>
+</div>
+// becomes
+<Field>
+  <File hasName name="cv" buttonLabel="Upload" iconLeft={<i className="fas fa-upload"></i>} fileName="cv.pdf" />
+</Field>
+```
+
+It converts only inside a `Field`, a bestax one already in the file or a `.field` that converts
+in the same run, since outside one `File` renders a `.field` of its own. The tree has to be exactly
+the one `File` renders, and the `.file` itself can carry no attribute but a `key`, since `File`
+puts the attributes it's given on its `<input>`. A color class stays a class, since `color`
+renders `has-text-<color>` too, and so does `is-centered`, which `isCentered` renders nothing of
+beside `isRight`. Anything else keeps it as markup with a `children:File`, `context:File` or
+`attr` TODO.
+
 ## Families this source leaves as markup
 
 Their markup doesn't map element by element (the bestax component renders parts of its own, or
 adds attributes), so the family's outermost class gets a `family:<class>` TODO and the markup
 stays. [unmappables.md](unmappables.md) has the recipe for each. The families are Checkbox,
-Checkboxes, Dropdown, File, the menu's `.menu-item`, Message, Modal's root and close
+Checkboxes, Dropdown, the menu's `.menu-item`, Message, Modal's root and close
 button, the navbar's burger and dropdown link, the panel's icon, Radio and Radios.
 
 ## Classes left alone
diff --git a/skills/bestax-migrate/references/bulma-classes/prop-map.md b/skills/bestax-migrate/references/bulma-classes/prop-map.md
index a0c022346..a612e7be9 100644
--- a/skills/bestax-migrate/references/bulma-classes/prop-map.md
+++ b/skills/bestax-migrate/references/bulma-classes/prop-map.md
@@ -98,6 +98,8 @@ renders the same `<h2>`.
 | `.select` → `SelectBase`                                                     | `is-small`, `is-medium`, `is-large`                                                                                                              | `size`                                                                                            |
 | `.select` → `SelectBase`                                                     | `is-rounded`, `is-loading`, `is-active`, `is-fullwidth`                                                                                          | `isRounded`, `isLoading`, `isActive`, `isFullwidth`                                               |
 | `.select` → `SelectBase`                                                     | `is-multiple`, around a `<select multiple>`                                                                                                      | `multiple` (the `<select>`'s `size` becomes the number `multipleSize`)                            |
+| `.file` → `File`                                                             | `is-small`, `is-medium`, `is-large`                                                                                                              | `size`                                                                                            |
+| `.file` → `File`                                                             | `is-boxed`, `is-fullwidth`, `has-name`, `is-right`                                                                                               | `isBoxed`, `isFullwidth`, `hasName`, `isRight`                                                    |
 | the `<select>` inside `.select`                                              | `is-hovered`, `is-focused`                                                                                                                       | `isHovered`, `isFocused`                                                                          |
 | `.hero` → `Hero`                                                             | `is-primary`, `is-link`, `is-info`, `is-success`, `is-warning`, `is-danger`, `is-black`, `is-white`, `is-light`, `is-dark`                       | `color`                                                                                           |
 | `.hero` → `Hero`                                                             | `is-small`, `is-medium`, `is-large`, `is-fullheight`, `is-fullheight-with-navbar`                                                                | `size`                                                                                            |
@@ -150,33 +152,33 @@ Colors are `primary`, `link`, `info`, `success`, `warning`, `danger`, `black`, `
 `black-ter`, `grey-darker`, `grey-dark`, `grey`, `grey-light`, `grey-lighter`, `white`,
 `white-bis`, `white-ter`, `light`, `dark`, `inherit` and `current`.
 
-| Classes                                                                                                   | Prop                                                                                                                     |
-| --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
-| `m-{n}`, `mt-{n}`, `mr-{n}`, `mb-{n}`, `ml-{n}`, `mx-{n}`, `my-{n}` (`0` to `6`, `auto`)                  | `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my`                                                                                  |
-| `p-{n}`, `pt-{n}`, `pr-{n}`, `pb-{n}`, `pl-{n}`, `px-{n}`, `py-{n}`                                       | `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py`                                                                                  |
-| `has-text-{color}`                                                                                        | `textColor` (on `Menu`, `Menu.Label`, `Menu.List` and `Table`, `color`)                                                  |
-| `has-background-{color}`                                                                                  | `bgColor` (on `Menu`, `Menu.Label`, `Menu.List`, `Tag`, `InputBase`, `TextAreaBase` and `SelectBase`, `backgroundColor`) |
-| `is-size-1` … `is-size-7`, and `-{viewport}`                                                              | `textSize`, `textSize{Viewport}`                                                                                         |
-| `has-text-centered`, `-justified`, `-left`, `-right`, and `-{viewport}`                                   | `textAlign`, `textAlign{Viewport}`                                                                                       |
-| `is-capitalized`, `is-lowercase`, `is-uppercase`, `is-italic`                                             | `textTransform`                                                                                                          |
-| `has-text-weight-light`, `-normal`, `-medium`, `-semibold`, `-bold`                                       | `textWeight`                                                                                                             |
-| `is-family-sans-serif`, `-monospace`, `-primary`, `-secondary`, `-code`                                   | `fontFamily`                                                                                                             |
-| `is-block`, `is-flex`, `is-inline`, `is-inline-block`, `is-inline-flex`, `is-grid`                        | `display`                                                                                                                |
-| the same with any of the nine viewports, `touch` and the `-only` ones included                            | `display{Viewport}`                                                                                                      |
-| `is-hidden`, `is-invisible`, `is-sr-only`                                                                 | `visibility`                                                                                                             |
-| `is-hidden-{viewport}`, `is-invisible-{viewport}`, all nine viewports                                     | `visibility{Viewport}`                                                                                                   |
-| `is-flex-direction-*`, `is-flex-wrap-*`, `is-justify-content-*`, `is-align-content-*`, `is-align-items-*` | `flexDirection`, `flexWrap`, `justifyContent`, `alignContent`, `alignItems`                                              |
-| `is-align-self-*`, `is-flex-grow-*`, `is-flex-shrink-*`                                                   | `alignSelf`, `flexGrow`, `flexShrink`                                                                                    |
-| `is-pulled-left`, `is-pulled-right`                                                                       | `float`                                                                                                                  |
-| `is-clipped`                                                                                              | `overflow="clipped"`                                                                                                     |
-| `is-overlay`, `is-skeleton`, `is-clearfix`, `is-relative`                                                 | `overlay`, `skeleton`, `clearfix`, `relative`                                                                            |
-| `is-unselectable`, `is-clickable`                                                                         | `interaction`                                                                                                            |
-| `is-radiusless`, `is-shadowless`                                                                          | `radius`, `shadow`                                                                                                       |
-| `is-mobile`, `is-narrow` (where the component has no prop of its own for them)                            | `responsive`                                                                                                             |
+| Classes                                                                                                   | Prop                                                                                                                             |
+| --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `m-{n}`, `mt-{n}`, `mr-{n}`, `mb-{n}`, `ml-{n}`, `mx-{n}`, `my-{n}` (`0` to `6`, `auto`)                  | `m`, `mt`, `mr`, `mb`, `ml`, `mx`, `my`                                                                                          |
+| `p-{n}`, `pt-{n}`, `pr-{n}`, `pb-{n}`, `pl-{n}`, `px-{n}`, `py-{n}`                                       | `p`, `pt`, `pr`, `pb`, `pl`, `px`, `py`                                                                                          |
+| `has-text-{color}`                                                                                        | `textColor` (on `Menu`, `Menu.Label`, `Menu.List` and `Table`, `color`)                                                          |
+| `has-background-{color}`                                                                                  | `bgColor` (on `Menu`, `Menu.Label`, `Menu.List`, `Tag`, `File`, `InputBase`, `TextAreaBase` and `SelectBase`, `backgroundColor`) |
+| `is-size-1` … `is-size-7`, and `-{viewport}`                                                              | `textSize`, `textSize{Viewport}`                                                                                                 |
+| `has-text-centered`, `-justified`, `-left`, `-right`, and `-{viewport}`                                   | `textAlign`, `textAlign{Viewport}`                                                                                               |
+| `is-capitalized`, `is-lowercase`, `is-uppercase`, `is-italic`                                             | `textTransform`                                                                                                                  |
+| `has-text-weight-light`, `-normal`, `-medium`, `-semibold`, `-bold`                                       | `textWeight`                                                                                                                     |
+| `is-family-sans-serif`, `-monospace`, `-primary`, `-secondary`, `-code`                                   | `fontFamily`                                                                                                                     |
+| `is-block`, `is-flex`, `is-inline`, `is-inline-block`, `is-inline-flex`, `is-grid`                        | `display`                                                                                                                        |
+| the same with any of the nine viewports, `touch` and the `-only` ones included                            | `display{Viewport}`                                                                                                              |
+| `is-hidden`, `is-invisible`, `is-sr-only`                                                                 | `visibility`                                                                                                                     |
+| `is-hidden-{viewport}`, `is-invisible-{viewport}`, all nine viewports                                     | `visibility{Viewport}`                                                                                                           |
+| `is-flex-direction-*`, `is-flex-wrap-*`, `is-justify-content-*`, `is-align-content-*`, `is-align-items-*` | `flexDirection`, `flexWrap`, `justifyContent`, `alignContent`, `alignItems`                                                      |
+| `is-align-self-*`, `is-flex-grow-*`, `is-flex-shrink-*`                                                   | `alignSelf`, `flexGrow`, `flexShrink`                                                                                            |
+| `is-pulled-left`, `is-pulled-right`                                                                       | `float`                                                                                                                          |
+| `is-clipped`                                                                                              | `overflow="clipped"`                                                                                                             |
+| `is-overlay`, `is-skeleton`, `is-clearfix`, `is-relative`                                                 | `overlay`, `skeleton`, `clearfix`, `relative`                                                                                    |
+| `is-unselectable`, `is-clickable`                                                                         | `interaction`                                                                                                                    |
+| `is-radiusless`, `is-shadowless`                                                                          | `radius`, `shadow`                                                                                                               |
+| `is-mobile`, `is-narrow` (where the component has no prop of its own for them)                            | `responsive`                                                                                                                     |
 
 Where a component renders a color class through no typed prop, the class stays: `has-text-*`
 on `Breadcrumb`, `Hero`, `Navbar.DropdownMenu`, `Navbar.Divider`, `Field.Label`, `Field.Body`,
-`Control`, `InputBase`, `TextAreaBase`, `SelectBase`, `Progress`, `Skeleton`, `Tag`, `Tags`,
+`Control`, `File`, `InputBase`, `TextAreaBase`, `SelectBase`, `Progress`, `Skeleton`, `Tag`, `Tags`,
 `Modal.Background`, `Modal.Content`, `Modal.Card`, `Modal.Card.Head`, `Modal.Card.Title`,
 `Modal.Card.Body`, `Modal.Card.Foot`, `Pagination.Previous`, `Pagination.Next`,
 `Pagination.Ellipsis`, `Panel`, `Panel.Heading`, `Panel.Tabs`, `Panel.Block` and `Tabs`;
diff --git a/skills/bestax-migrate/references/bulma-classes/unmappables.md b/skills/bestax-migrate/references/bulma-classes/unmappables.md
index c95397f6e..a10f694f8 100644
--- a/skills/bestax-migrate/references/bulma-classes/unmappables.md
+++ b/skills/bestax-migrate/references/bulma-classes/unmappables.md
@@ -150,6 +150,15 @@ keeps it as markup, and the `.icon`s inside convert on their own. The markup ren
 it is; to use `IconText` anyway, write it by hand with `iconProps={{ name: ... }}` (the
 `bestax-icons` skill covers `Icon`'s library and name props).
 
+On a `.file`, `File` renders the whole tree from props, so it converts only when its tree is the one
+`File` renders: one bare `.file-label` `<label>` holding a `.file-input` `<input type="file">`, a
+bare `.file-cta` `<span>` with a bare `.file-label` `<span>` and at most one bare `.file-icon`
+`<span>` on each side of it, and, with `has-name`, at most one bare `.file-name` `<span>` of
+static text. A class or attribute on any part of the tree, text between the parts, or content
+that isn't text and elements written out keeps it as markup. Rebuild it as one `File` by hand
+(its API page lists the props for the button text, the file name and the icons), or keep the
+markup, which renders the same.
+
 On a `.skeleton-lines`, `Skeleton` renders the children itself: `lines` bare, empty `<div>`s. So
 the element converts only when its children are just that, and a class, an attribute, text or a
 comment in one of them, or anything else beside them, keeps it as markup. Keep it if the
@@ -163,6 +172,10 @@ from an earlier, partial migration) would change how that component renders once
 it stays markup. Convert it by hand and check that the component inside still renders what you
 want, or leave it.
 
+On a `.file` it's the other way round: `File` renders a `.field` of its own unless it sits inside
+a `Field`, so a `.file` converts only inside a bestax `Field` or a `.field` that converts in the
+same run. Convert the `.field` around it (its own TODO says what keeps it), then re-run.
+
 On an input or textarea it's the other direction: inside a bestax `Field` with a `label`,
 `InputBase` and `TextAreaBase` take the Field's generated `id` when they have none, which the
 element didn't have. Context follows what renders, not what the file says, so an input with no
@@ -265,9 +278,6 @@ in the browser:
   `aria-expanded` and keyboard handling. The codemod turned the `.has-dropdown` item around it
   into a `Navbar.Item` that keeps the class; to get the dropdown behavior, replace that item
   with `Navbar.Dropdown` (`hoverable` for `is-hoverable`) and the link with `Navbar.Link`.
-- **`family:file`**: `File` renders the whole `.file-label` tree itself, and a `.field` around
-  it unless it's already inside one. Replace the `.file` block with one `File`; its API page
-  lists the props for the button text, the file name and the icons.
 - **`family:checkbox`**, **`family:radio`**, **`family:checkboxes`**, **`family:radios`**:
   bestax renders its own styled checkbox and radio markup, not Bulma's.
 - **`family:modal`**: `Modal` writes a `data-testid` of its own and adds dialog attributes and

From 976d8a30f913e23d8a0026565d1845fdba23d67b Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Tue, 29 Sep 2026 07:50:27 -0400
Subject: [PATCH 2/4] feat(bestax-mcp): say when a component renders the whole
 .file tree from props

lookup_bulma_classes now tells an agent that File is written from the
<input>'s attributes, the button text, the icons and the file name, and
that outside a Field it renders a .field of its own. The index carries the
table's new buildsFile, and the agree test hands the planner the tree and
the .field around it, as the codemod sees them.
---
 bestax-mcp/data/bulma-classes.json            | 153 +++++++++++++++++-
 bestax-mcp/data/skills.json                   |   6 +-
 .../src/__tests__/bulma-classes-agree.test.ts |  33 ++++
 bestax-mcp/src/bulma-classes.ts               |  18 +++
 scripts/gen-mcp-index.mjs                     |   1 +
 5 files changed, 202 insertions(+), 9 deletions(-)

diff --git a/bestax-mcp/data/bulma-classes.json b/bestax-mcp/data/bulma-classes.json
index d97d7b2c6..357183b73 100644
--- a/bestax-mcp/data/bulma-classes.json
+++ b/bestax-mcp/data/bulma-classes.json
@@ -19,6 +19,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -45,6 +46,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -99,6 +101,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -132,6 +135,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -168,6 +172,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -198,6 +203,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -224,6 +230,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -250,6 +257,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -276,6 +284,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -302,6 +311,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -328,6 +338,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -354,6 +365,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -459,6 +471,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -1125,6 +1138,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -1293,6 +1307,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -1536,6 +1551,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -1584,6 +1600,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -1614,6 +1631,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -1644,6 +1662,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -1680,6 +1699,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -1711,6 +1731,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -1737,6 +1758,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -1771,6 +1793,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -1817,6 +1840,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -1864,6 +1888,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -1919,6 +1944,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -1945,6 +1971,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -1991,6 +2018,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2017,6 +2045,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2043,6 +2072,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2069,6 +2099,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2095,6 +2126,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2121,6 +2153,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2147,6 +2180,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2173,6 +2207,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2199,6 +2234,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2225,6 +2261,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2251,6 +2288,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2277,6 +2315,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2319,6 +2358,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2345,6 +2385,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2371,6 +2412,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2397,6 +2439,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2423,6 +2466,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2449,6 +2493,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2478,6 +2523,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2504,6 +2550,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2541,6 +2588,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2581,6 +2629,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2610,6 +2659,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2662,6 +2712,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2694,6 +2745,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2737,6 +2789,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2767,6 +2820,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2820,6 +2874,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2866,6 +2921,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2892,6 +2948,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2918,6 +2975,7 @@
       "writes": [{ "prop": "variant", "value": "lines" }],
       "countsChildren": { "tag": "div", "prop": "lines" },
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2944,6 +3002,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2970,6 +3029,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -2996,6 +3056,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3022,6 +3083,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3031,23 +3093,44 @@
       "classNameReplaces": false
     },
     "file": {
-      "status": "todo",
+      "status": "mapped",
       "target": "File",
-      "tag": null,
+      "tag": "div",
       "as": null,
       "sizeDrivesTag": false,
       "textColor": null,
-      "bgColor": null,
+      "bgColor": "backgroundColor",
       "part": false,
-      "why": "bestax `File` renders the whole `.file-label` tree itself",
-      "modifiers": {},
-      "omits": {},
+      "why": null,
+      "modifiers": {
+        "is-small": { "writes": [{ "prop": "size", "value": "small" }] },
+        "is-medium": { "writes": [{ "prop": "size", "value": "medium" }] },
+        "is-large": { "writes": [{ "prop": "size", "value": "large" }] },
+        "is-boxed": { "writes": [{ "prop": "isBoxed" }] },
+        "is-fullwidth": { "writes": [{ "prop": "isFullwidth" }] },
+        "is-right": { "writes": [{ "prop": "isRight" }] },
+        "has-name": { "writes": [{ "prop": "hasName" }], "onlyTrue": true }
+      },
+      "omits": {
+        "is-primary": "`color` renders `has-text-<color>` on the `.file` as well",
+        "is-link": "`color` renders `has-text-<color>` on the `.file` as well",
+        "is-info": "`color` renders `has-text-<color>` on the `.file` as well",
+        "is-success": "`color` renders `has-text-<color>` on the `.file` as well",
+        "is-warning": "`color` renders `has-text-<color>` on the `.file` as well",
+        "is-danger": "`color` renders `has-text-<color>` on the `.file` as well",
+        "is-black": "`color` renders `has-text-<color>` on the `.file` as well",
+        "is-white": "`color` renders `has-text-<color>` on the `.file` as well",
+        "is-light": "`color` renders `has-text-<color>` on the `.file` as well",
+        "is-dark": "`color` renders `has-text-<color>` on the `.file` as well",
+        "is-centered": "`isCentered` renders nothing beside `isRight`"
+      },
       "wrapsChildren": null,
       "folds": null,
       "absorbs": null,
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": true,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3074,6 +3157,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3100,6 +3184,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3126,6 +3211,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3152,6 +3238,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3178,6 +3265,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3204,6 +3292,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3230,6 +3319,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3256,6 +3346,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3282,6 +3373,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3308,6 +3400,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3338,6 +3431,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3364,6 +3458,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": true,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3421,6 +3516,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3447,6 +3543,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3473,6 +3570,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3499,6 +3597,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": true,
@@ -3539,6 +3638,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3565,6 +3665,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3591,6 +3692,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3617,6 +3719,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3643,6 +3746,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3669,6 +3773,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3695,6 +3800,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3721,6 +3827,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3747,6 +3854,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3773,6 +3881,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3799,6 +3908,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3825,6 +3935,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3851,6 +3962,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3877,6 +3989,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3903,6 +4016,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3947,6 +4061,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -3973,6 +4088,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4001,6 +4117,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4029,6 +4146,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4062,6 +4180,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4088,6 +4207,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4125,6 +4245,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4151,6 +4272,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4177,6 +4299,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4203,6 +4326,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": true,
       "otherTagsStay": {
         "tags": ["label", "div"],
@@ -4232,6 +4356,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4280,6 +4405,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4306,6 +4432,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4672,6 +4799,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4698,6 +4826,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4724,6 +4853,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4750,6 +4880,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4776,6 +4907,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4802,6 +4934,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4828,6 +4961,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4854,6 +4988,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4880,6 +5015,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4906,6 +5042,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4932,6 +5069,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4958,6 +5096,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -4984,6 +5123,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
@@ -5010,6 +5150,7 @@
       "writes": null,
       "countsChildren": null,
       "buildsIcons": false,
+      "buildsFile": false,
       "noHelpers": false,
       "otherTagsStay": null,
       "topLevelOnly": false,
diff --git a/bestax-mcp/data/skills.json b/bestax-mcp/data/skills.json
index 9c19fca20..bef17fba8 100644
--- a/bestax-mcp/data/skills.json
+++ b/bestax-mcp/data/skills.json
@@ -103,17 +103,17 @@
         {
           "id": "bulma-classes-component-map",
           "file": "references/bulma-classes/component-map.md",
-          "bytes": 21772
+          "bytes": 23574
         },
         {
           "id": "bulma-classes-prop-map",
           "file": "references/bulma-classes/prop-map.md",
-          "bytes": 31763
+          "bytes": 32615
         },
         {
           "id": "bulma-classes-unmappables",
           "file": "references/bulma-classes/unmappables.md",
-          "bytes": 22365
+          "bytes": 23095
         },
         {
           "id": "css-migration",
diff --git a/bestax-mcp/src/__tests__/bulma-classes-agree.test.ts b/bestax-mcp/src/__tests__/bulma-classes-agree.test.ts
index 29bafd92d..37cf57236 100644
--- a/bestax-mcp/src/__tests__/bulma-classes-agree.test.ts
+++ b/bestax-mcp/src/__tests__/bulma-classes-agree.test.ts
@@ -56,6 +56,7 @@ function planned(tag: string, tokens: string[]): Outcome {
   let soleChild: ElementFacts['soleChild'];
   let soleChildOf: ElementFacts['soleChildOf'];
   let text: string | undefined;
+  let classesAround: string[] | undefined;
   let childElements: ElementFacts['childElements'];
   let counted: string | undefined;
   for (const token of tokens) {
@@ -125,6 +126,37 @@ function planned(tag: string, tokens: string[]): Outcome {
       }));
       counted = counts.prop;
     }
+    // One that renders the whole `.file` tree holds it, inside a `.field`,
+    // which the lookup states as a condition.
+    if (entry?.status === 'mapped' && entry.buildsFile && !childElements) {
+      const bare = (tag: string, token: string, extra = {}) => ({
+        tag,
+        tokens: [token],
+        attributes: new Map(),
+        hasSpread: false,
+        isEmpty: false,
+        ...extra,
+      });
+      childElements = [
+        bare('label', 'file-label', {
+          children: [
+            bare('input', 'file-input', {
+              attributes: new Map([['type', 'file']]),
+              isEmpty: true,
+            }),
+            bare('span', 'file-cta', {
+              children: [
+                bare('span', 'file-label', {
+                  staticContent: true,
+                  text: 'Upload',
+                }),
+              ],
+            }),
+          ],
+        }),
+      ];
+      classesAround = ['field'];
+    }
     // One that builds its icons from props holds an icon, planned the way
     // the codemod plans it first, which the lookup states as a condition.
     if (entry?.status === 'mapped' && entry.buildsIcons && !childElements) {
@@ -170,6 +202,7 @@ function planned(tag: string, tokens: string[]): Outcome {
     childElements,
     soleChildOf,
     text,
+    classesAround,
   });
   if (result.conversion) {
     const { target, props, className } = result.conversion;
diff --git a/bestax-mcp/src/bulma-classes.ts b/bestax-mcp/src/bulma-classes.ts
index 307304e49..b86a48686 100644
--- a/bestax-mcp/src/bulma-classes.ts
+++ b/bestax-mcp/src/bulma-classes.ts
@@ -79,6 +79,11 @@ export interface RootRecord {
    * icon's props, and a bare `<span>` of text after one as its text.
    */
   buildsIcons: boolean;
+  /**
+   * The component renders the whole `.file` tree from props, and a `.field`
+   * of its own around it outside a `Field`.
+   */
+  buildsFile: boolean;
   /** What each item in a list with this class becomes, found by where it sits. */
   items: Items | null;
   /** The component renders a bare `<tag>` around the element too. */
@@ -184,6 +189,8 @@ export type Element =
       counts?: Counts;
       /** Builds its icons from props, out of the element's children. */
       buildsIcons?: true;
+      /** Renders the element's whole tree from props. */
+      buildsFile?: true;
       /** Renders this class only when no other of itself is around it. */
       topLevel?: string;
       /** What each item inside it becomes. */
@@ -438,6 +445,7 @@ export function lookupClasses(
       writes: null,
       countsChildren: null,
       buildsIcons: false,
+      buildsFile: false,
       items: null,
       parent: null,
       rendersText: null,
@@ -637,6 +645,7 @@ export function lookupClasses(
     writes: entry.writes ?? undefined,
     counts: entry.countsChildren ?? undefined,
     buildsIcons: entry.buildsIcons || undefined,
+    buildsFile: entry.buildsFile || undefined,
     topLevel: entry.topLevelOnly && root ? root : undefined,
     items: entry.items ?? undefined,
     parent: entry.parent?.tag,
@@ -794,6 +803,15 @@ export function renderLookup(lookup: Lookup): string {
               `text after it as its text. One icon goes in \`iconProps\`, with ` +
               `its text as the children, and more than one in \`items\`.`
             : '') +
+          (element.buildsFile
+            ? ` It renders the whole \`.file\` tree from props: write the ` +
+              `<input>'s attributes on it, the \`.file-label\` <span>'s ` +
+              `content as \`buttonLabel\` (left out for its default text), ` +
+              `each \`.file-icon\`'s content as \`iconLeft\` or ` +
+              `\`iconRight\`, and the \`.file-name\`'s text as \`fileName\` ` +
+              `beside \`hasName\`. Outside a \`Field\` it renders a ` +
+              `\`.field\` of its own around it.`
+            : '') +
           (element.topLevel
             ? ` It renders \`.${element.topLevel}\` only when no other ` +
               `\`${element.target}\` is around it, so one inside another ` +
diff --git a/scripts/gen-mcp-index.mjs b/scripts/gen-mcp-index.mjs
index 1fb4f0ac5..ee11181f7 100644
--- a/scripts/gen-mcp-index.mjs
+++ b/scripts/gen-mcp-index.mjs
@@ -535,6 +535,7 @@ export async function bulmaClassTable() {
         writes: entry.writes ?? null,
         countsChildren: entry.countsChildren ?? null,
         buildsIcons: entry.buildsIcons ?? false,
+        buildsFile: entry.buildsFile ?? false,
         noHelpers: entry.noHelpers ?? false,
         otherTagsStay: entry.otherTagsStay ?? null,
         topLevelOnly: entry.topLevelOnly ?? false,

From 72a32c9705a7b94b6aadb8a9a02d1ad35d68802a Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Tue, 29 Sep 2026 07:50:28 -0400
Subject: [PATCH 3/4] fix(eslint-plugin): report .file as a class the codemod
 converts

The regenerated metadata moves file from the families the codemod leaves
as markup to the classes it converts, so no-bulma-component-class points
at bestax-migrate for it.
---
 eslint-plugin/src/generated/metadata.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/eslint-plugin/src/generated/metadata.ts b/eslint-plugin/src/generated/metadata.ts
index 455388539..ce2773ab8 100644
--- a/eslint-plugin/src/generated/metadata.ts
+++ b/eslint-plugin/src/generated/metadata.ts
@@ -192,7 +192,6 @@ export const BULMA_COMPONENT_CLASSES: ReadonlyMap<string, BulmaComponentClass> =
     ['checkboxes', { component: 'Checkboxes', converts: false }],
     ['radio', { component: 'Radio', converts: false }],
     ['radios', { component: 'Radios', converts: false }],
-    ['file', { component: 'File', converts: false }],
     ['dropdown', { component: 'Dropdown', converts: false }],
     ['menu-item', { component: 'Menu.Item', converts: false }],
     ['message', { component: 'Message', converts: false }],
@@ -258,6 +257,7 @@ export const BULMA_COMPONENT_CLASSES: ReadonlyMap<string, BulmaComponentClass> =
     ['breadcrumb', { component: 'Breadcrumb', converts: true }],
     ['skeleton-block', { component: 'Skeleton', converts: true }],
     ['skeleton-lines', { component: 'Skeleton', converts: true }],
+    ['file', { component: 'File', converts: true }],
     ['icon', { component: 'Icon', converts: true }],
     ['icon-text', { component: 'IconText', converts: true }],
     ['image', { component: 'Image', converts: true }],

From 212831e2f56b51cc38e6c0f0788e07c2b5ad2cec Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Tue, 29 Sep 2026 08:32:01 -0400
Subject: [PATCH 4/4] fix(bestax-migrate): write a File text with a backslash
 as a string

A JSX attribute string has no escapes, and recast prints a string literal
with its backslash doubled, so a fileName, inputClassName or buttonLabel
holding one rendered two. It now goes in as an expression, as a quote or an
& already did.

Each element's tree is read once now: every element around it read it
again, which made gathering the facts grow with the depth of the tree. A
plan that changes after it's been read forgets the reading. And a test pins
that a has-name under a condition doesn't count for a .file-name.
---
 .../bulma-classes/__tests__/plan.test.ts        | 13 ++++++++++++-
 .../bulma-classes/__tests__/transform.test.ts   | 12 ++++++++++++
 .../src/sources/bulma-classes/transform.ts      | 17 +++++++++++++----
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/bestax-migrate/src/sources/bulma-classes/__tests__/plan.test.ts b/bestax-migrate/src/sources/bulma-classes/__tests__/plan.test.ts
index 9f1449161..af5e19450 100644
--- a/bestax-migrate/src/sources/bulma-classes/__tests__/plan.test.ts
+++ b/bestax-migrate/src/sources/bulma-classes/__tests__/plan.test.ts
@@ -1098,10 +1098,21 @@ describe('plan', () => {
           rules: ['children:File'],
         });
       }
-      // A name needs `has-name`, which `File` renders it beside.
+      // A name needs `has-name`, which `File` renders it beside, and one a
+      // condition adds stays in the call, so it isn't there to rely on.
       expect(
         rules(file(tree({ name: span('file-name', { text: 'cv.pdf' }) })))
       ).toEqual(['children:File']);
+      expect(
+        rules(
+          file(
+            tree({ name: span('file-name', { text: 'cv.pdf' }) }),
+            'file',
+            {},
+            { conditional: [['has-name']] }
+          )
+        )
+      ).toEqual(['children:File']);
     });
   });
 
diff --git a/bestax-migrate/src/sources/bulma-classes/__tests__/transform.test.ts b/bestax-migrate/src/sources/bulma-classes/__tests__/transform.test.ts
index bd28c86b7..e885fa872 100644
--- a/bestax-migrate/src/sources/bulma-classes/__tests__/transform.test.ts
+++ b/bestax-migrate/src/sources/bulma-classes/__tests__/transform.test.ts
@@ -1309,6 +1309,18 @@ describe('an element whose component renders its whole tree from props', () => {
     );
   });
 
+  it('writes a text with a backslash as a string, since an attribute has no escapes', () => {
+    const { output } = migrate(
+      inField(
+        tree(
+          '<span className="file-label">C:\\Uploads</span>',
+          '<input className="file-input" type="file" />'
+        )
+      )
+    );
+    expect(output).toContain('buttonLabel={"C:\\\\Uploads"}');
+  });
+
   it('writes button text JSX would read differently as the string it renders', () => {
     const { output } = migrate(
       inField(
diff --git a/bestax-migrate/src/sources/bulma-classes/transform.ts b/bestax-migrate/src/sources/bulma-classes/transform.ts
index 239b1dff4..503791d98 100644
--- a/bestax-migrate/src/sources/bulma-classes/transform.ts
+++ b/bestax-migrate/src/sources/bulma-classes/transform.ts
@@ -872,10 +872,12 @@ function textChild(j: any, text: string): any {
 
 /**
  * A text as an attribute value: quoted when JSX reads it as written there,
- * and as a string otherwise (a quote, or an `&` it would read as an entity).
+ * and as a string otherwise. A JSX attribute string has no escapes, so a
+ * quote would end it, a backslash would print doubled, and an `&` could be
+ * read as an entity.
  */
 function textValue(j: any, text: string): any {
-  return /^[^"&\r\n]*$/.test(text)
+  return /^[^"&\\\r\n]*$/.test(text)
     ? j.stringLiteral(text)
     : j.jsxExpressionContainer(j.stringLiteral(text));
 }
@@ -1177,21 +1179,27 @@ export default function transform(
    * What the planner reads of a child element, down its tree: what it
    * converts to on its own (children are planned first), its only child,
    * its text and whether its content is static, and its own children the
-   * same way.
+   * same way. Each element is read once, since every element around it
+   * reads it again: a plan that changes afterwards forgets its reading.
    */
+  const readings = new Map<object, Partial<ChildFacts>>();
   const readChild = (child: any): Partial<ChildFacts> => {
+    const known = readings.get(child);
+    if (known) return known;
     const becomes = planned.get(child)?.conversion;
     const only = soleChild(child);
     const inner = only && childFacts(only);
     const text = textOf(child);
     const children = childElementsOf(child, readChild);
-    return {
+    const reading = {
       ...(becomes && { becomes }),
       ...(inner && { soleChild: inner }),
       ...(text !== undefined && { text }),
       ...(children && { children }),
       ...(staticContent(child) && { staticContent: true }),
     };
+    readings.set(child, reading);
+    return reading;
   };
 
   /** The element directly around this one, when this is its only child. */
@@ -1312,6 +1320,7 @@ export default function transform(
         const node = inside[icon.index];
         const own: Plan = { conversion: null, todos: planned.get(node)!.todos };
         planned.set(node, own);
+        readings.delete(node);
         const at = elements.findIndex(found => found.path.node === node);
         if (at === -1) continue;
         if (own.todos.length > 0) {