From 7948b23e0d772b05794acb0b87c4f2564daccc7b Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 08:44:37 -0400
Subject: [PATCH 01/18] refactor(bestax-migrate): hoist the alias registry and
 literal helpers into _shared

Both transforms carried the same owner-keyed alias resolver, and rbx's
responsive pass carried literal/object helpers RBC re-implemented with a
different signature. A third source would have copied both again.

Behaviour is unchanged: the unit suites and fixture outputs are identical.
---
 bestax-migrate/src/sources/_shared/imports.ts | 98 +++++++++++++++++++
 .../src/sources/_shared/jsx-utils.ts          | 45 +++++++++
 bestax-migrate/src/sources/rbx/responsive.ts  | 34 +------
 bestax-migrate/src/sources/rbx/transform.ts   | 78 +--------------
 .../react-bulma-components/responsive.ts      | 12 +--
 .../react-bulma-components/transform.ts       | 78 +--------------
 6 files changed, 155 insertions(+), 190 deletions(-)

diff --git a/bestax-migrate/src/sources/_shared/imports.ts b/bestax-migrate/src/sources/_shared/imports.ts
index b5a65e4e1..11552a7fa 100644
--- a/bestax-migrate/src/sources/_shared/imports.ts
+++ b/bestax-migrate/src/sources/_shared/imports.ts
@@ -164,3 +164,101 @@ export function resolvesToBinding(
   // the shadowing case it guards against.
   return !declaring || declaring === expected;
 }
+
+/**
+ * Registry of `const { Item } = Card`-style aliases, keyed by the AST node
+ * that owns the declaring scope rather than by bare name. Two functions can
+ * each destructure `Header` from a different component; a name-keyed map let
+ * the second overwrite the first, and both declarations were then pruned
+ * while both `<Header…>` references were left resolving to nothing.
+ *
+ * Resolution walks the reference's ANCESTORS rather than consulting
+ * `scope.lookup`, because by the time references are rewritten the alias
+ * pass has already pruned the declaration -- so the binding is gone from the
+ * scope table, and `path.scope` objects are not identity-stable across
+ * traversals either.
+ *
+ * Source-agnostic: every transform resolves aliases the same way, and #613
+ * shipped this block duplicated in two of them.
+ */
+export interface AliasRegistry {
+  /** Record that `local` in the scope owned by `owner` names `target`. */
+  register(owner: unknown, local: string, target: string[]): void;
+  /**
+   * The canonical path `name` aliases at `at` (a reference's path), or
+   * undefined when no alias applies to that reference.
+   */
+  aliasAt(name: string, at?: unknown): string[] | undefined;
+  /** Whether ANY scope aliases `name` — regardless of the reference. */
+  anyAlias(name: string): boolean;
+}
+
+export function makeAliasRegistry(): AliasRegistry {
+  const aliasesByOwner = new Map<unknown, Map<string, string[]>>();
+  const ownersFor = (name: string): unknown[] => {
+    const owners: unknown[] = [];
+    for (const [owner, perScope] of aliasesByOwner) {
+      if (perScope.has(name)) owners.push(owner);
+    }
+    return owners;
+  };
+  const register = (owner: unknown, local: string, target: string[]) => {
+    let perScope = aliasesByOwner.get(owner);
+    if (!perScope) {
+      perScope = new Map<string, string[]>();
+      aliasesByOwner.set(owner, perScope);
+    }
+    perScope.set(local, target);
+  };
+  const aliasAt = (name: string, at?: unknown): string[] | undefined => {
+    const owners = ownersFor(name);
+    if (owners.length === 0) return undefined;
+    // Without a reference location there is nothing to walk, so the only
+    // owner is the best answer available. WITH one, always walk: an unrelated
+    // `Header` parameter in another function must not resolve to the alias
+    // merely because the alias is the only one by that name. A single-owner
+    // shortcut here rewrote such a parameter to `{ Header: Card.Header }`,
+    // which is not even valid syntax.
+    if (at === undefined) {
+      return owners.length === 1
+        ? aliasesByOwner.get(owners[0])!.get(name)
+        : undefined;
+    }
+    type Anc = { parent?: Anc; node?: unknown };
+    let cursor = at as Anc | undefined;
+    while (cursor) {
+      if (cursor.node !== undefined) {
+        const hit = aliasesByOwner.get(cursor.node)?.get(name);
+        if (hit) {
+          // The walk finds the nearest OWNER, but a binding can intervene
+          // between the reference and that owner: `function F(Header)` under
+          // a module-level `const { Header } = Card` shadows the alias, and
+          // resolving through it rewrote the parameter itself to
+          // `F(Card.Header)`. If the scope table still binds the name
+          // somewhere other than the owner, that nearer binding wins. (After
+          // the alias declaration is pruned the lookup returns nothing for
+          // the alias itself, which is the case this must keep allowing.)
+          const declaring = (
+            at as {
+              scope?: {
+                lookup(n: string): { path?: { node?: unknown } } | null;
+              };
+            }
+          ).scope?.lookup(name)?.path?.node;
+          if (
+            declaring !== undefined &&
+            declaring !== null &&
+            declaring !== cursor.node
+          ) {
+            return undefined;
+          }
+          return hit;
+        }
+      }
+      cursor = cursor.parent;
+    }
+    return undefined;
+  };
+  const anyAlias = (name: string): boolean => ownersFor(name).length > 0;
+  return { register, aliasAt, anyAlias };
+}
diff --git a/bestax-migrate/src/sources/_shared/jsx-utils.ts b/bestax-migrate/src/sources/_shared/jsx-utils.ts
index 0af15fd7d..a9dde600d 100644
--- a/bestax-migrate/src/sources/_shared/jsx-utils.ts
+++ b/bestax-migrate/src/sources/_shared/jsx-utils.ts
@@ -123,6 +123,51 @@ export function literalValueOf(attr: any): LiteralValue {
   return { kind: 'expression' };
 }
 
+/**
+ * The literal value of an expression node (as opposed to `literalValueOf`,
+ * which reads a JSX attribute): a string, number or boolean literal's value,
+ * otherwise undefined.
+ */
+export function literalOf(node: any): string | number | boolean | undefined {
+  if (!node) return undefined;
+  if (node.type === 'StringLiteral') return node.value;
+  if (node.type === 'NumericLiteral') return node.value;
+  if (node.type === 'BooleanLiteral') return node.value;
+  return undefined;
+}
+
+/**
+ * Reuse a value node as a JSX attribute value: a string literal can sit bare
+ * (`size="one-third"`), anything else needs an expression container.
+ */
+export function attrValue(j: JSCodeshift, node: any): any {
+  return node?.type === 'StringLiteral'
+    ? j.stringLiteral(node.value)
+    : j.jsxExpressionContainer(node);
+}
+
+/** The static key of an object property (`{ tablet: … }`, `{ 'inline-block': … }`). */
+export function propKey(prop: any): string | undefined {
+  const key = prop.key?.name ?? prop.key?.value;
+  return typeof key === 'string' ? key : undefined;
+}
+
+/** The ObjectExpression inside a JSX attribute value, or null. */
+export function objectExpressionOf(value: any): any | null {
+  return value?.type === 'JSXExpressionContainer' &&
+    value.expression?.type === 'ObjectExpression'
+    ? value.expression
+    : null;
+}
+
+/** The ArrayExpression inside a JSX attribute value, or null. */
+export function arrayExpressionOf(value: any): any | null {
+  return value?.type === 'JSXExpressionContainer' &&
+    value.expression?.type === 'ArrayExpression'
+    ? value.expression
+    : null;
+}
+
 export type Booleanish = 'truthy' | 'falsy' | 'expression';
 
 /**
diff --git a/bestax-migrate/src/sources/rbx/responsive.ts b/bestax-migrate/src/sources/rbx/responsive.ts
index 1a686f7dd..f0b651096 100644
--- a/bestax-migrate/src/sources/rbx/responsive.ts
+++ b/bestax-migrate/src/sources/rbx/responsive.ts
@@ -27,7 +27,11 @@ import {
   addAttr,
   addTodo,
   attributesOf,
+  attrValue,
+  literalOf,
   makeAttr,
+  objectExpressionOf,
+  propKey,
   removeAttr,
   type TransformContext,
 } from '../_shared/jsx-utils.js';
@@ -42,36 +46,6 @@ export const RESPONSIVE_KINDS: Record<string, ResponsiveKind> = {
   'column-group': 'column-group',
 };
 
-function literalOf(node: any): string | number | boolean | undefined {
-  if (!node) return undefined;
-  if (node.type === 'StringLiteral') return node.value;
-  if (node.type === 'NumericLiteral') return node.value;
-  if (node.type === 'BooleanLiteral') return node.value;
-  return undefined;
-}
-
-/**
- * Reuse a value node as a JSX attribute value: a string literal can sit bare
- * (`size="one-third"`), anything else needs an expression container.
- */
-function attrValue(j: any, node: any): any {
-  return node?.type === 'StringLiteral'
-    ? j.stringLiteral(node.value)
-    : j.jsxExpressionContainer(node);
-}
-
-function propKey(prop: any): string | undefined {
-  const key = prop.key?.name ?? prop.key?.value;
-  return typeof key === 'string' ? key : undefined;
-}
-
-function objectExpressionOf(value: any): any | null {
-  return value?.type === 'JSXExpressionContainer' &&
-    value.expression?.type === 'ObjectExpression'
-    ? value.expression
-    : null;
-}
-
 /**
  * One `{ value, only }` cell of the universal `responsive` prop. Returns the
  * inner `value` node, or undefined when the cell isn't the expected shape.
diff --git a/bestax-migrate/src/sources/rbx/transform.ts b/bestax-migrate/src/sources/rbx/transform.ts
index e7e817a2c..8186c94f7 100644
--- a/bestax-migrate/src/sources/rbx/transform.ts
+++ b/bestax-migrate/src/sources/rbx/transform.ts
@@ -42,6 +42,7 @@ import {
 import { applyPropAction, applyUniversalProps } from '../_shared/props.js';
 import {
   collectBoundNames,
+  makeAliasRegistry,
   makeReserve,
   nameOf,
   prefersTabs,
@@ -260,75 +261,7 @@ export default function transform(
   // The scope each binding was collected in, so a reference can be checked
   // against the binding it actually resolves to rather than matched by name.
   const programScope: unknown = root.find(j.Program).paths()[0]?.scope;
-  // Aliases are keyed by the AST node that owns the declaring scope, not by
-  // bare name. Two functions can each destructure `Header` from a different
-  // component; a name-keyed map let the second overwrite the first, and both
-  // declarations were then pruned while both `<Header…>` references were left
-  // resolving to nothing.
-  //
-  // Resolution walks the reference's ANCESTORS rather than consulting
-  // `scope.lookup`, because by the time references are rewritten the alias
-  // pass has already pruned the declaration -- so the binding is gone from
-  // the scope table, and `path.scope` objects are not identity-stable across
-  // traversals either.
-  const aliasesByOwner = new Map<unknown, Map<string, string[]>>();
-  const ownersFor = (name: string): unknown[] => {
-    const owners: unknown[] = [];
-    for (const [owner, perScope] of aliasesByOwner) {
-      if (perScope.has(name)) owners.push(owner);
-    }
-    return owners;
-  };
-  const aliasAt = (name: string, at?: unknown): string[] | undefined => {
-    const owners = ownersFor(name);
-    if (owners.length === 0) return undefined;
-    // Without a reference location there is nothing to walk, so the only
-    // owner is the best answer available. WITH one, always walk: an unrelated
-    // `Header` parameter in another function must not resolve to the alias
-    // merely because the alias is the only one by that name. A single-owner
-    // shortcut here rewrote such a parameter to `{ Header: Card.Header }`,
-    // which is not even valid syntax.
-    if (at === undefined) {
-      return owners.length === 1
-        ? aliasesByOwner.get(owners[0])!.get(name)
-        : undefined;
-    }
-    type Anc = { parent?: Anc; node?: unknown };
-    let cursor = at as Anc | undefined;
-    while (cursor) {
-      if (cursor.node !== undefined) {
-        const hit = aliasesByOwner.get(cursor.node)?.get(name);
-        if (hit) {
-          // The walk finds the nearest OWNER, but a binding can intervene
-          // between the reference and that owner: `function F(Header)` under
-          // a module-level `const { Header } = Card` shadows the alias, and
-          // resolving through it rewrote the parameter itself to
-          // `F(Card.Header)`. If the scope table still binds the name
-          // somewhere other than the owner, that nearer binding wins. (After
-          // the alias declaration is pruned the lookup returns nothing for
-          // the alias itself, which is the case this must keep allowing.)
-          const declaring = (
-            at as {
-              scope?: {
-                lookup(n: string): { path?: { node?: unknown } } | null;
-              };
-            }
-          ).scope?.lookup(name)?.path?.node;
-          if (
-            declaring !== undefined &&
-            declaring !== null &&
-            declaring !== cursor.node
-          ) {
-            return undefined;
-          }
-          return hit;
-        }
-      }
-      cursor = cursor.parent;
-    }
-    return undefined;
-  };
-  const anyAlias = (name: string): boolean => ownersFor(name).length > 0;
+  const { register: registerAlias, aliasAt, anyAlias } = makeAliasRegistry();
 
   // ---- 1b. Resolve `const { Item } = Card` destructuring -----------------
   root.find(j.VariableDeclarator).forEach(path => {
@@ -353,13 +286,8 @@ export default function transform(
       ) {
         const owner = (path.scope as unknown as { path?: { node?: unknown } })
           ?.path?.node;
-        let perScope = aliasesByOwner.get(owner);
-        if (!perScope) {
-          perScope = new Map<string, string[]>();
-          aliasesByOwner.set(owner, perScope);
-        }
         const target = [...basePath, prop.key.name];
-        perScope.set(prop.value.name, target);
+        registerAlias(owner, prop.value.name, target);
         aliases.set(prop.value.name, target);
         // Pruning the declaration is only safe if every use of the alias will
         // actually be rewritten. For a name the table cannot map, the JSX is
diff --git a/bestax-migrate/src/sources/react-bulma-components/responsive.ts b/bestax-migrate/src/sources/react-bulma-components/responsive.ts
index 1d8388997..f120a4c92 100644
--- a/bestax-migrate/src/sources/react-bulma-components/responsive.ts
+++ b/bestax-migrate/src/sources/react-bulma-components/responsive.ts
@@ -17,6 +17,7 @@ import {
   addAttr,
   addTodo,
   attributesOf,
+  literalOf,
   makeAttr,
   removeAttr,
   type TransformContext,
@@ -33,15 +34,6 @@ const TEXT_ALIGN_MAP: Record<string, string> = {
   right: 'right',
 };
 
-function literalOf(prop: any): string | number | boolean | undefined {
-  const v = prop.value;
-  if (!v) return undefined;
-  if (v.type === 'StringLiteral') return v.value;
-  if (v.type === 'NumericLiteral') return v.value;
-  if (v.type === 'BooleanLiteral') return v.value;
-  return undefined;
-}
-
 export function flattenResponsiveProps(
   ctx: TransformContext,
   path: ASTPath<any>,
@@ -87,7 +79,7 @@ export function flattenResponsiveProps(
         continue;
       }
       const key = prop.key?.name ?? prop.key?.value;
-      const literal = literalOf(prop);
+      const literal = literalOf(prop.value);
 
       if (key === 'display' && typeof literal === 'string') {
         if (literal === 'hidden') {
diff --git a/bestax-migrate/src/sources/react-bulma-components/transform.ts b/bestax-migrate/src/sources/react-bulma-components/transform.ts
index e7f18079a..4d2cfc0a6 100644
--- a/bestax-migrate/src/sources/react-bulma-components/transform.ts
+++ b/bestax-migrate/src/sources/react-bulma-components/transform.ts
@@ -27,6 +27,7 @@ import {
 import { applyPropAction, applyUniversalProps } from '../_shared/props.js';
 import {
   collectBoundNames,
+  makeAliasRegistry,
   makeReserve,
   nameOf,
   prefersTabs,
@@ -189,75 +190,7 @@ export default function transform(
   // The scope each binding was collected in, so a reference can be checked
   // against the binding it actually resolves to rather than matched by name.
   const programScope: unknown = root.find(j.Program).paths()[0]?.scope;
-  // Aliases are keyed by the AST node that owns the declaring scope, not by
-  // bare name. Two functions can each destructure `Header` from a different
-  // component; a name-keyed map let the second overwrite the first, and both
-  // declarations were then pruned while both `<Header…>` references were left
-  // resolving to nothing.
-  //
-  // Resolution walks the reference's ANCESTORS rather than consulting
-  // `scope.lookup`, because by the time references are rewritten the alias
-  // pass has already pruned the declaration -- so the binding is gone from
-  // the scope table, and `path.scope` objects are not identity-stable across
-  // traversals either.
-  const aliasesByOwner = new Map<unknown, Map<string, string[]>>();
-  const ownersFor = (name: string): unknown[] => {
-    const owners: unknown[] = [];
-    for (const [owner, perScope] of aliasesByOwner) {
-      if (perScope.has(name)) owners.push(owner);
-    }
-    return owners;
-  };
-  const aliasAt = (name: string, at?: unknown): string[] | undefined => {
-    const owners = ownersFor(name);
-    if (owners.length === 0) return undefined;
-    // Without a reference location there is nothing to walk, so the only
-    // owner is the best answer available. WITH one, always walk: an unrelated
-    // `Header` parameter in another function must not resolve to the alias
-    // merely because the alias is the only one by that name. A single-owner
-    // shortcut here rewrote such a parameter to `{ Header: Card.Header }`,
-    // which is not even valid syntax.
-    if (at === undefined) {
-      return owners.length === 1
-        ? aliasesByOwner.get(owners[0])!.get(name)
-        : undefined;
-    }
-    type Anc = { parent?: Anc; node?: unknown };
-    let cursor = at as Anc | undefined;
-    while (cursor) {
-      if (cursor.node !== undefined) {
-        const hit = aliasesByOwner.get(cursor.node)?.get(name);
-        if (hit) {
-          // The walk finds the nearest OWNER, but a binding can intervene
-          // between the reference and that owner: `function F(Header)` under
-          // a module-level `const { Header } = Card` shadows the alias, and
-          // resolving through it rewrote the parameter itself to
-          // `F(Card.Header)`. If the scope table still binds the name
-          // somewhere other than the owner, that nearer binding wins. (After
-          // the alias declaration is pruned the lookup returns nothing for
-          // the alias itself, which is the case this must keep allowing.)
-          const declaring = (
-            at as {
-              scope?: {
-                lookup(n: string): { path?: { node?: unknown } } | null;
-              };
-            }
-          ).scope?.lookup(name)?.path?.node;
-          if (
-            declaring !== undefined &&
-            declaring !== null &&
-            declaring !== cursor.node
-          ) {
-            return undefined;
-          }
-          return hit;
-        }
-      }
-      cursor = cursor.parent;
-    }
-    return undefined;
-  };
-  const anyAlias = (name: string): boolean => ownersFor(name).length > 0;
+  const { register: registerAlias, aliasAt, anyAlias } = makeAliasRegistry();
 
   // ---- 1b. Resolve `const { Input, Field: F } = Form` destructuring -----
   root.find(j.VariableDeclarator).forEach(path => {
@@ -282,13 +215,8 @@ export default function transform(
       ) {
         const owner = (path.scope as unknown as { path?: { node?: unknown } })
           ?.path?.node;
-        let perScope = aliasesByOwner.get(owner);
-        if (!perScope) {
-          perScope = new Map<string, string[]>();
-          aliasesByOwner.set(owner, perScope);
-        }
         const target = [...basePath, prop.key.name];
-        perScope.set(prop.value.name, target);
+        registerAlias(owner, prop.value.name, target);
         aliases.set(prop.value.name, target);
         // Pruning the declaration is only safe if every use of the alias will
         // actually be rewritten. For a name the table cannot map, the JSX is

From 9e7c84b65a88082953ec06f20e94613a19226d90 Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 09:06:04 -0400
Subject: [PATCH 02/18] feat(bestax-migrate): add bloomer as a migration source

bloomer's exports are flat while bestax's families are dotted, so most of
the table renames a flat name onto a compound target; every component
carries bloomer's helper props through its HOC, so isDisplay/isHidden get
their own array/object flattening; tag, render, isSize and isAlign are
resolved per component because bestax declares their counterparts on a
subset, with differing types. Icons, pagination, tabs, breadcrumb items
and the Bulma 0.4 nav family are handled structurally.

Registers the source with the telemetry worker's allowlist in the same
commit, since the worker drops events for unknown sources at ingest.
---
 bestax-migrate/src/sources/_shared/props.ts   |  28 +-
 .../src/sources/_shared/specials-utils.ts     | 147 ++++
 .../src/sources/_shared/viewports.ts          |  34 +
 .../__testfixtures__/compounds.input.tsx      | 140 ++++
 .../__testfixtures__/compounds.output.tsx     |  93 +++
 .../bloomer/__testfixtures__/form.input.tsx   |  53 ++
 .../bloomer/__testfixtures__/form.output.tsx  |  43 +
 .../helpers-responsive.input.tsx              |  37 +
 .../helpers-responsive.output.tsx             |  56 ++
 .../__testfixtures__/icons-images.input.tsx   |  27 +
 .../__testfixtures__/icons-images.output.tsx  |  31 +
 .../__testfixtures__/imports-basic.input.tsx  |  28 +
 .../__testfixtures__/imports-basic.output.tsx |  28 +
 .../tabs-pagination-panel.input.tsx           |  92 +++
 .../tabs-pagination-panel.output.tsx          |  62 ++
 .../todos-unmappable.input.tsx                |  47 ++
 .../todos-unmappable.output.tsx               |  49 ++
 .../sources/bloomer/__tests__/deps.test.ts    | 127 +++
 .../__tests__/mapping-coverage.test.ts        | 159 ++++
 .../bloomer/__tests__/responsive.test.ts      | 159 ++++
 .../bloomer/__tests__/specials.test.ts        | 287 +++++++
 .../sources/bloomer/__tests__/styles.test.ts  |  53 ++
 .../bloomer/__tests__/transform.test.ts       | 284 +++++++
 .../bloomer/__tests__/value-unions.test.ts    | 122 +++
 bestax-migrate/src/sources/bloomer/deps.ts    | 144 ++++
 bestax-migrate/src/sources/bloomer/index.ts   |  12 +
 bestax-migrate/src/sources/bloomer/mapping.ts | 757 ++++++++++++++++++
 .../src/sources/bloomer/responsive.ts         | 359 +++++++++
 .../src/sources/bloomer/specials.ts           | 736 +++++++++++++++++
 bestax-migrate/src/sources/bloomer/styles.ts  |  19 +
 .../src/sources/bloomer/transform.ts          | 717 +++++++++++++++++
 bestax-migrate/src/sources/rbx/specials.ts    | 140 +---
 bestax-migrate/src/sources/registry.ts        |   2 +
 telemetry-worker/src/schema.ts                |   6 +-
 34 files changed, 4949 insertions(+), 129 deletions(-)
 create mode 100644 bestax-migrate/src/sources/_shared/viewports.ts
 create mode 100644 bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.input.tsx
 create mode 100644 bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.output.tsx
 create mode 100644 bestax-migrate/src/sources/bloomer/__testfixtures__/form.input.tsx
 create mode 100644 bestax-migrate/src/sources/bloomer/__testfixtures__/form.output.tsx
 create mode 100644 bestax-migrate/src/sources/bloomer/__testfixtures__/helpers-responsive.input.tsx
 create mode 100644 bestax-migrate/src/sources/bloomer/__testfixtures__/helpers-responsive.output.tsx
 create mode 100644 bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.input.tsx
 create mode 100644 bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.output.tsx
 create mode 100644 bestax-migrate/src/sources/bloomer/__testfixtures__/imports-basic.input.tsx
 create mode 100644 bestax-migrate/src/sources/bloomer/__testfixtures__/imports-basic.output.tsx
 create mode 100644 bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.input.tsx
 create mode 100644 bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.output.tsx
 create mode 100644 bestax-migrate/src/sources/bloomer/__testfixtures__/todos-unmappable.input.tsx
 create mode 100644 bestax-migrate/src/sources/bloomer/__testfixtures__/todos-unmappable.output.tsx
 create mode 100644 bestax-migrate/src/sources/bloomer/__tests__/deps.test.ts
 create mode 100644 bestax-migrate/src/sources/bloomer/__tests__/mapping-coverage.test.ts
 create mode 100644 bestax-migrate/src/sources/bloomer/__tests__/responsive.test.ts
 create mode 100644 bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
 create mode 100644 bestax-migrate/src/sources/bloomer/__tests__/styles.test.ts
 create mode 100644 bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
 create mode 100644 bestax-migrate/src/sources/bloomer/__tests__/value-unions.test.ts
 create mode 100644 bestax-migrate/src/sources/bloomer/deps.ts
 create mode 100644 bestax-migrate/src/sources/bloomer/index.ts
 create mode 100644 bestax-migrate/src/sources/bloomer/mapping.ts
 create mode 100644 bestax-migrate/src/sources/bloomer/responsive.ts
 create mode 100644 bestax-migrate/src/sources/bloomer/specials.ts
 create mode 100644 bestax-migrate/src/sources/bloomer/styles.ts
 create mode 100644 bestax-migrate/src/sources/bloomer/transform.ts

diff --git a/bestax-migrate/src/sources/_shared/props.ts b/bestax-migrate/src/sources/_shared/props.ts
index d35ec8c42..f436342de 100644
--- a/bestax-migrate/src/sources/_shared/props.ts
+++ b/bestax-migrate/src/sources/_shared/props.ts
@@ -28,7 +28,7 @@ import {
  * source props can map onto one bestax prop (e.g. RBC's `textTransform` +
  * `italic`), and a silent duplicate would be invalid JSX.
  */
-function addConverted(
+export function addConverted(
   ctx: TransformContext,
   path: ASTPath<any>,
   element: any,
@@ -36,16 +36,38 @@ function addConverted(
   name: string,
   value: string | undefined
 ): void {
+  addAttrOnce(ctx, path, element, originalName, makeAttr(ctx.j, name, value));
+}
+
+/**
+ * The same refusal for an attribute the caller has already built — a numeric
+ * `size={6}` or a reused expression node, which `makeAttr` cannot express.
+ */
+export function addAttrOnce(
+  ctx: TransformContext,
+  path: ASTPath<any>,
+  element: any,
+  originalName: string,
+  attr: any
+): void {
+  const name: string = attr.name.name;
   if (findAttr(element, name)) {
+    const value = attr.value;
+    const rendered =
+      value == null
+        ? ''
+        : value.type === 'StringLiteral'
+          ? `="${value.value}"`
+          : '={…}';
     addTodo(
       ctx,
       path,
       `prop:${originalName}`,
-      `\`${originalName}\` maps to \`${name}${value === undefined ? '' : `="${value}"`}\`, but \`${name}\` is already set on this element; reconcile by hand`
+      `\`${originalName}\` maps to \`${name}${rendered}\`, but \`${name}\` is already set on this element; reconcile by hand`
     );
     return;
   }
-  addAttr(element, makeAttr(ctx.j, name, value));
+  addAttr(element, attr);
 }
 
 /** Apply one PropAction to `attr` on `element`. */
diff --git a/bestax-migrate/src/sources/_shared/specials-utils.ts b/bestax-migrate/src/sources/_shared/specials-utils.ts
index 29a6a37ce..0f8a37c9f 100644
--- a/bestax-migrate/src/sources/_shared/specials-utils.ts
+++ b/bestax-migrate/src/sources/_shared/specials-utils.ts
@@ -11,9 +11,12 @@
 import type { ASTPath } from 'jscodeshift';
 import type { PropAction } from '../../types.js';
 import {
+  addAttr,
   addTodo,
+  attributesOf,
   findAttr,
   literalValueOf,
+  plainElement,
   removeAttr,
   type TransformContext,
 } from './jsx-utils.js';
@@ -187,3 +190,147 @@ export function parseIconClasses(
   }
   return null;
 }
+
+/**
+ * Turn a literal modifier prop into an `is-*` class fragment for an element
+ * on its way to becoming plain HTML. Returns the class (or undefined) and
+ * always removes the attribute.
+ */
+export function modifierClass(
+  ctx: TransformContext,
+  path: ASTPath<any>,
+  element: any,
+  prop: string,
+  base: string,
+  where: string
+): string {
+  const attr = findAttr(element, prop);
+  if (!attr) return base;
+  const literal = literalValueOf(attr);
+  removeAttr(element, attr);
+  if (literal.kind === 'string' || literal.kind === 'number') {
+    return `${base} is-${literal.value}`;
+  }
+  addTodo(
+    ctx,
+    path,
+    `prop:${prop}`,
+    `dynamic ${where} \`${prop}\`; add the matching is-* class by hand`
+  );
+  return base;
+}
+
+/**
+ * A source that puts `as` (or its own name for it) on every component can
+ * land, through a handler that picks its target from a prop value, on a
+ * bestax component that has no `as` — Media.Item resolves to
+ * Left/Content/Right where only Left declares one. Opting into `as` in the
+ * mapping table cannot express that, so the target has to be checked after
+ * it is picked.
+ */
+export function restrictAsToTargets(
+  ctx: TransformContext,
+  path: ASTPath<any>,
+  element: any,
+  target: string | undefined,
+  allowed: string[],
+  prop = 'as'
+): void {
+  const asAttr = findAttr(element, prop);
+  if (!asAttr || (target && allowed.includes(target))) return;
+  removeAttr(element, asAttr);
+  addTodo(
+    ctx,
+    path,
+    `prop:${prop}`,
+    `bestax's \`${target}\` has no \`as\` prop (of the targets this can resolve to, only ${allowed
+      .map(a => `\`${a}\``)
+      .join(' / ')} does); render the tag directly or restructure`
+  );
+  ctx.dirty = true;
+}
+
+/** Attribute filter a source applies before an element becomes plain HTML. */
+export type AttrStrip = (
+  ctx: TransformContext,
+  path: ASTPath<any>,
+  attrs: any[],
+  where: string
+) => any[];
+
+/**
+ * The two structural rewrites every source needs, bound to that source's own
+ * attribute strip (its modifier vocabulary is the one thing that differs):
+ * replacing an element with plain HTML, and folding a wrapper onto the single
+ * child it exists to wrap.
+ */
+export function makeStructuralHelpers(strip: AttrStrip) {
+  /** Replace the element with a plain HTML tag carrying `className`. */
+  function replaceWithPlain(
+    ctx: TransformContext,
+    path: ASTPath<any>,
+    element: any,
+    tag: string,
+    className: string | undefined,
+    where: string
+  ): SpecialResult {
+    const merged = mergeClassName(ctx, path, element, className, where);
+    const rest = strip(ctx, path, attributesOf(element), where);
+    path.replace(
+      plainElement(ctx.j, tag, merged, rest, element.children ?? [])
+    );
+    ctx.dirty = true;
+    return { replaced: true };
+  }
+
+  /**
+   * A wrapper that owns the modifiers, where bestax's component renders that
+   * wrapper itself: move the wrapper's (already-converted) attributes onto
+   * its single child and replace the wrapper with it — otherwise both would
+   * rename to the same bestax component and nest, which is invalid.
+   *
+   * Returns null when the element isn't the single-JSX-child shape, or the
+   * child is not one of the components this wrapper exists to wrap (a
+   * ratio-box `<iframe>`, a native `<select>`), so the caller can keep the
+   * wrapper.
+   */
+  function collapseOntoChild(
+    ctx: TransformContext,
+    path: ASTPath<any>,
+    element: any,
+    where: string,
+    expected: string | string[]
+  ): SpecialResult | null {
+    const children = (element.children ?? []).filter(
+      (c: any) => !(c.type === 'JSXText' && c.value.trim() === '')
+    );
+    if (children.length !== 1 || children[0].type !== 'JSXElement') {
+      return null;
+    }
+    const child = children[0];
+    const childPath = ctx.resolve?.(child.openingElement?.name);
+    const accepted = Array.isArray(expected) ? expected : [expected];
+    if (!childPath || !accepted.includes(childPath.join('.'))) return null;
+
+    for (const attr of [...attributesOf(element)]) {
+      const name: string = attr.name.name;
+      if (findAttr(child, name)) {
+        addTodo(
+          ctx,
+          path,
+          `prop:${name}`,
+          `\`${where}\` folded into its child, but both set \`${name}\`; the child's value was kept — reconcile by hand`
+        );
+        continue;
+      }
+      removeAttr(element, attr);
+      addAttr(child, attr);
+    }
+
+    path.replace(child);
+    ctx.dirty = true;
+    return { replaced: true };
+  }
+
+  return { replaceWithPlain, collapseOntoChild };
+}
diff --git a/bestax-migrate/src/sources/_shared/viewports.ts b/bestax-migrate/src/sources/_shared/viewports.ts
new file mode 100644
index 000000000..e40c67a6b
--- /dev/null
+++ b/bestax-migrate/src/sources/_shared/viewports.ts
@@ -0,0 +1,34 @@
+/**
+ * Bulma's responsive viewports and the suffix bestax puts on its per-viewport
+ * helper props (`displayTabletOnly`, `visibilityTouch`, …).
+ *
+ * bestax's `validViewports` carries all nine, and the `display*` and
+ * `visibility*` families declare a prop for every one of them. The
+ * typography families (`textSize*`, `textAlign*`) declare only the five
+ * non-`only`, non-`touch` viewports — a source that flattens those must
+ * consult `TYPOGRAPHY_VIEWPORTS` rather than this table.
+ *
+ * Source-agnostic: keyed by Bulma's own suffixes, which every source library
+ * spells the same way.
+ */
+
+export const VIEWPORT_SUFFIX: Record<string, string> = {
+  mobile: 'Mobile',
+  tablet: 'Tablet',
+  'tablet-only': 'TabletOnly',
+  touch: 'Touch',
+  desktop: 'Desktop',
+  'desktop-only': 'DesktopOnly',
+  widescreen: 'Widescreen',
+  'widescreen-only': 'WidescreenOnly',
+  fullhd: 'Fullhd',
+};
+
+/** The viewports bestax's `textSize*` / `textAlign*` props exist for. */
+export const TYPOGRAPHY_VIEWPORTS = [
+  'mobile',
+  'tablet',
+  'desktop',
+  'widescreen',
+  'fullhd',
+] as const;
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.input.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.input.tsx
new file mode 100644
index 000000000..7a9ee5744
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.input.tsx
@@ -0,0 +1,140 @@
+import React from "react";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardFooterItem,
+  CardHeader,
+  CardHeaderIcon,
+  CardHeaderTitle,
+  CardImage,
+  Hero,
+  HeroBody,
+  HeroFooter,
+  HeroHeader,
+  Level,
+  LevelItem,
+  LevelLeft,
+  LevelRight,
+  Media,
+  MediaContent,
+  MediaLeft,
+  MediaRight,
+  Menu,
+  MenuLabel,
+  MenuLink,
+  MenuList,
+  Message,
+  MessageBody,
+  MessageHeader,
+  Modal,
+  ModalBackground,
+  ModalCard,
+  ModalCardBody,
+  ModalCardFooter,
+  ModalCardHeader,
+  ModalCardTitle,
+  ModalClose,
+  Navbar,
+  NavbarBrand,
+  NavbarBurger,
+  NavbarDivider,
+  NavbarDropdown,
+  NavbarEnd,
+  NavbarItem,
+  NavbarLink,
+  NavbarMenu,
+  NavbarStart,
+} from "bloomer";
+
+export const Compounds = ({ open }: { open: boolean }) => (
+  <>
+    <Card>
+      <CardHeader>
+        <CardHeaderTitle>Title</CardHeaderTitle>
+        <CardHeaderIcon>
+          <span>?</span>
+        </CardHeaderIcon>
+      </CardHeader>
+      <CardImage>
+        <img src="a.png" alt="" />
+      </CardImage>
+      <CardContent>Body</CardContent>
+      <CardFooter>
+        <CardFooterItem>Save</CardFooterItem>
+      </CardFooter>
+    </Card>
+    <Hero isColor="primary" isSize="medium">
+      <HeroHeader>Head</HeroHeader>
+      <HeroBody>Body</HeroBody>
+      <HeroFooter>Foot</HeroFooter>
+    </Hero>
+    <Hero isFullHeight isColor="dark">
+      <HeroBody>Tall</HeroBody>
+    </Hero>
+    <Level isMobile>
+      <LevelLeft>
+        <LevelItem>Left</LevelItem>
+      </LevelLeft>
+      <LevelRight>
+        <LevelItem href="/all" tag="span">
+          All
+        </LevelItem>
+      </LevelRight>
+    </Level>
+    <Media tag="div">
+      <MediaLeft tag="figure">img</MediaLeft>
+      <MediaContent>text</MediaContent>
+      <MediaRight>x</MediaRight>
+    </Media>
+    <Menu>
+      <MenuLabel>General</MenuLabel>
+      <MenuList>
+        <MenuLink isActive href="/">
+          Dashboard
+        </MenuLink>
+      </MenuList>
+    </Menu>
+    <Message isColor="info">
+      <MessageHeader>Hello</MessageHeader>
+      <MessageBody>World</MessageBody>
+    </Message>
+    <Modal isActive={open}>
+      <ModalBackground />
+      <ModalCard>
+        <ModalCardHeader>
+          <ModalCardTitle>Modal title</ModalCardTitle>
+        </ModalCardHeader>
+        <ModalCardBody>Content</ModalCardBody>
+        <ModalCardFooter>Footer</ModalCardFooter>
+      </ModalCard>
+      <ModalClose isSize="large" />
+    </Modal>
+    <Navbar isTransparent>
+      <NavbarBrand>
+        <NavbarItem href="/">Logo</NavbarItem>
+        <NavbarBurger isActive={open} />
+      </NavbarBrand>
+      <NavbarMenu isActive={open}>
+        <NavbarStart>
+          <NavbarItem isActive>Home</NavbarItem>
+          <NavbarItem hasDropdown isHoverable>
+            <NavbarLink>More</NavbarLink>
+            <NavbarDropdown>
+              <NavbarItem href="/about">About</NavbarItem>
+              <NavbarDivider />
+              <NavbarItem>Jobs</NavbarItem>
+            </NavbarDropdown>
+          </NavbarItem>
+        </NavbarStart>
+        <NavbarEnd>
+          <NavbarItem tag="div">
+            <Button>Log in</Button>
+          </NavbarItem>
+        </NavbarEnd>
+      </NavbarMenu>
+    </Navbar>
+  </>
+);
+
+import { Button } from "bloomer";
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.output.tsx
new file mode 100644
index 000000000..cfe71c9ae
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.output.tsx
@@ -0,0 +1,93 @@
+import React from "react";
+import { Button, Card, Hero, Level, Media, Menu, Message, Modal, Navbar } from "@allxsmith/bestax-bulma";
+
+// TODO(bestax-migrate): bestax `Modal` closes on Escape (calling `onClose`) and locks body scroll by default, which bloomer's never did: pass `onClose`, or set `closeOnEscape={false}` / `lockScroll={false}` to keep bloomer's behaviour; it renders inline unless `portal` is set
+export const Compounds = ({ open }: { open: boolean }) => (
+  <>
+    <Card>
+      <Card.Header>
+        <Card.Header.Title>Title</Card.Header.Title>
+        <Card.Header.Icon>
+          <span>?</span>
+        </Card.Header.Icon>
+      </Card.Header>
+      <Card.Image>
+        <img src="a.png" alt="" />
+      </Card.Image>
+      <Card.Content>Body</Card.Content>
+      <Card.Footer>
+        <Card.FooterItem>Save</Card.FooterItem>
+      </Card.Footer>
+    </Card>
+    <Hero color="primary" size="medium">
+      <Hero.Head>Head</Hero.Head>
+      <Hero.Body>Body</Hero.Body>
+      <Hero.Foot>Foot</Hero.Foot>
+    </Hero>
+    <Hero color="dark" size="fullheight">
+      <Hero.Body>Tall</Hero.Body>
+    </Hero>
+    <Level isMobile>
+      <Level.Left>
+        <Level.Item>Left</Level.Item>
+      </Level.Left>
+      <Level.Right>
+        <Level.Item href="/all" as="a">
+          All
+        </Level.Item>
+      </Level.Right>
+    </Level>
+    <Media as="div">
+      <Media.Left as="figure">img</Media.Left>
+      <Media.Content>text</Media.Content>
+      <Media.Right>x</Media.Right>
+    </Media>
+    <Menu>
+      <Menu.Label>General</Menu.Label>
+      <Menu.List>
+        <Menu.Item active href="/">
+          Dashboard
+        </Menu.Item>
+      </Menu.List>
+    </Menu>
+    <Message color="info">
+      <Message.Header>Hello</Message.Header>
+      <Message.Body>World</Message.Body>
+    </Message>
+    <Modal active={open}>
+      <Modal.Background />
+      <Modal.Card>
+        <Modal.Card.Head>
+          <Modal.Card.Title>Modal title</Modal.Card.Title>
+        </Modal.Card.Head>
+        <Modal.Card.Body>Content</Modal.Card.Body>
+        <Modal.Card.Foot>Footer</Modal.Card.Foot>
+      </Modal.Card>
+      <Modal.Close size="large" />
+    </Modal>
+    <Navbar transparent>
+      <Navbar.Brand>
+        <Navbar.Item href="/">Logo</Navbar.Item>
+        <Navbar.Burger active={open} />
+      </Navbar.Brand>
+      <Navbar.Menu active={open}>
+        <Navbar.Start>
+          <Navbar.Item active>Home</Navbar.Item>
+          <Navbar.Dropdown hoverable>
+            <Navbar.Link>More</Navbar.Link>
+            <Navbar.DropdownMenu>
+              <Navbar.Item href="/about">About</Navbar.Item>
+              <Navbar.Divider />
+              <Navbar.Item>Jobs</Navbar.Item>
+            </Navbar.DropdownMenu>
+          </Navbar.Dropdown>
+        </Navbar.Start>
+        <Navbar.End>
+          <Navbar.Item as="div">
+            <Button>Log in</Button>
+          </Navbar.Item>
+        </Navbar.End>
+      </Navbar.Menu>
+    </Navbar>
+  </>
+);
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/form.input.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/form.input.tsx
new file mode 100644
index 000000000..e74d7c390
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/form.input.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import {
+  Checkbox,
+  Control,
+  Field,
+  FieldBody,
+  FieldLabel,
+  Help,
+  Icon,
+  Input,
+  Label,
+  Radio,
+  Select,
+  TextArea,
+} from "bloomer";
+
+export const Form = ({ err }: { err?: string }) => (
+  <form>
+    <Field isHorizontal>
+      <FieldLabel isNormal>
+        <Label isSize="small">Name</Label>
+      </FieldLabel>
+      <FieldBody>
+        <Field isGrouped="right" hasAddons="fullwidth">
+          <Control hasIcons="left" isExpanded isLoading>
+            <Input isColor="danger" isSize="medium" isFocused placeholder="Name" />
+            <Icon isAlign="left" className="fa fa-user" isSize="small" />
+          </Control>
+          <Control hasIcons={["left", "right"]}>
+            <Input type="email" isActive />
+          </Control>
+          <Control hasIcons>
+            <TextArea isSize="large" isHovered rows={3} />
+          </Control>
+        </Field>
+        <Help isColor="danger" tag="span">
+          {err}
+        </Help>
+      </FieldBody>
+    </Field>
+    <Field isGrouped>
+      <Control>
+        <Select isColor="primary" isLoading isFullWidth>
+          <option>A</option>
+        </Select>
+      </Control>
+      <Control>
+        <Checkbox name="remember"> Remember me</Checkbox>
+        <Radio name="answer" value="y"> Yes</Radio>
+      </Control>
+    </Field>
+  </form>
+);
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/form.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/form.output.tsx
new file mode 100644
index 000000000..bd2eb2b88
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/form.output.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { Checkbox, Control, Field, Icon, Input, Radio, Select, TextArea } from "@allxsmith/bestax-bulma";
+
+// TODO(bestax-migrate): `hasAddons="fullwidth"` — bestax `Field.hasAddons` takes `true`, "centered" or "right"; Bulma v1 keeps `has-addons-fullwidth`, so use `hasAddons` plus className="has-addons-fullwidth"
+// TODO(bestax-migrate): kept the Font Awesome 4 classes on an <i> child, as bloomer rendered them; bestax's optional Font Awesome peer is 6.7+, where many v4 names changed (brand icons moved to `variant="brands"`) — keep FA4 loaded, or switch to `name`/`library`/`variant` (`<Icon name="home" library="fa" variant="solid" />`)
+// TODO(bestax-migrate): `isActive` — bestax `Input` has no prop for Bulma's `is-active`; add className="is-active"
+export const Form = ({ err }: { err?: string }) => (
+  <form>
+    <Field horizontal>
+      <Field.Label size="normal">
+        <label className="label is-small">Name</label>
+      </Field.Label>
+      <Field.Body>
+        <Field grouped="right" hasAddons="fullwidth">
+          <Control isExpanded isLoading hasIconsLeft>
+            <Input color="danger" size="medium" isFocused placeholder="Name" />
+            <Icon size="small" className="is-left"><i className="fa fa-user" aria-hidden="true" /></Icon>
+          </Control>
+          <Control hasIconsLeft hasIconsRight>
+            <Input type="email" isActive />
+          </Control>
+          <Control hasIconsLeft hasIconsRight>
+            <TextArea size="large" isHovered rows={3} />
+          </Control>
+        </Field>
+        <span className="help is-danger">
+          {err}
+        </span>
+      </Field.Body>
+    </Field>
+    <Field grouped>
+      <Control>
+        <Select color="primary" isLoading isFullWidth>
+          <option>A</option>
+        </Select>
+      </Control>
+      <Control>
+        <Checkbox name="remember"> Remember me</Checkbox>
+        <Radio name="answer" value="y"> Yes</Radio>
+      </Control>
+    </Field>
+  </form>
+);
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/helpers-responsive.input.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/helpers-responsive.input.tsx
new file mode 100644
index 000000000..aed17b3c7
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/helpers-responsive.input.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { Box, Column, Columns, Container, Section } from "bloomer";
+
+export const Helpers = ({ dim }: { dim: string }) => (
+  <Section isSize="medium" isPaddingless>
+    <Container isFluid hasTextAlign="centered" hasTextColor="grey-light">
+      <Box isDisplay="flex-tablet" isHidden="touch" isClearfix>
+        one
+      </Box>
+      <Box isDisplay={["inline-block", "flex-desktop-only"]} isHidden={["mobile", "widescreen-only"]}>
+        two
+      </Box>
+      <Box isDisplay={{ flex: ["default", "tablet"], block: "mobile" }} isHidden isMarginless>
+        three
+      </Box>
+      <Box isDisplay={dim} isHidden={dim === "x"} isPulled="right" isOverlay isUnselectable>
+        four
+      </Box>
+      <Box hasTextColor="white-ter" isHidden={false}>
+        five
+      </Box>
+    </Container>
+    <Columns isMultiline isVCentered isMobile>
+      <Column isSize={4} isOffset={2}>
+        a
+      </Column>
+      <Column isSize="1/2">b</Column>
+      <Column isSize="narrow">c</Column>
+      <Column isSize={{ default: "full", mobile: 8, tablet: "2/3", touch: "narrow" }} isOffset={{ desktop: "1/4" }}>
+        d
+      </Column>
+      <Column isSize={{ touch: 6 }} isOffset={dim}>
+        e
+      </Column>
+    </Columns>
+  </Section>
+);
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/helpers-responsive.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/helpers-responsive.output.tsx
new file mode 100644
index 000000000..332bf8a3e
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/helpers-responsive.output.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { Box, Column, Columns, Container, Section } from "@allxsmith/bestax-bulma";
+
+// TODO(bestax-migrate): dropped `isDisplay`: it must be a string, array or object literal to flatten to bestax `display*` props, and bestax has no `isDisplay` — reapply it by hand
+// TODO(bestax-migrate): `isHidden` has a dynamic value; set `visibility="hidden"` (or a per-viewport `visibility*`) conditionally by hand
+// TODO(bestax-migrate): `hasTextColor="white-ter"` — `white-ter` is not a bestax colour; use `white` or a custom class (https://bestax.io/docs/api/helpers/usebulmaclasses)
+// TODO(bestax-migrate): bestax `Column` has no `sizeTouch` prop (Bulma keeps the `is-*-touch` classes); add the class by hand
+// TODO(bestax-migrate): `isOffset` has a dynamic value; set `offset` by hand (bestax takes numbers or the named sizes: "half", "one-third", …)
+export const Helpers = ({ dim }: { dim: string }) => (
+  <Section size="medium" p="0">
+    <Container fluid textAlign="centered" textColor="grey-light">
+      <Box displayTablet="flex" visibilityTouch="hidden" clearfix>
+        one
+      </Box>
+      <Box
+        display="inline-block"
+        displayDesktopOnly="flex"
+        visibilityMobile="hidden"
+        visibilityWidescreenOnly="hidden">
+        two
+      </Box>
+      <Box
+        display="flex"
+        displayTablet="flex"
+        displayMobile="block"
+        visibility="hidden"
+        m="0">
+        three
+      </Box>
+      <Box float="right" overlay interaction="unselectable">
+        four
+      </Box>
+      <Box hasTextColor="white-ter">
+        five
+      </Box>
+    </Container>
+    <Columns isMultiline isVCentered isMobile>
+      <Column size={4} offset={2}>
+        a
+      </Column>
+      <Column size="half">b</Column>
+      <Column isNarrow>c</Column>
+      <Column
+        size="full"
+        sizeMobile={8}
+        sizeTablet="two-thirds"
+        isNarrowTouch
+        offsetDesktop="one-quarter">
+        d
+      </Column>
+      <Column>
+        e
+      </Column>
+    </Columns>
+  </Section>
+);
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.input.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.input.tsx
new file mode 100644
index 000000000..98125a88c
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.input.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { Icon, Image, Content, Delete, Table, Footer, Container } from "bloomer";
+
+export const Media = ({ cls }: { cls: string }) => (
+  <Container>
+    <Icon className="fas fa-home" isSize="large" />
+    <Icon className="mdi mdi-account" />
+    <Icon className="fa fa-github" hasTextColor="danger" />
+    <Icon className={cls} isAlign="right" />
+    <Icon isSize="small" />
+    <Image isSize="128x128" src="a.png" />
+    <Image isRatio="16:9" src="b.png" />
+    <Image isSize="64x64" isRatio="square" src="c.png" />
+    <Content isSize="small">
+      <p>Prose</p>
+    </Content>
+    <Delete isSize="medium" />
+    <Table isBordered isStriped isNarrow isFullWidth>
+      <tbody>
+        <tr>
+          <td>1</td>
+        </tr>
+      </tbody>
+    </Table>
+    <Footer tag="div">Bye</Footer>
+  </Container>
+);
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.output.tsx
new file mode 100644
index 000000000..63baa275e
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.output.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { Container, Content, Delete, Footer, Icon, Image, Table } from "@allxsmith/bestax-bulma";
+
+// TODO(bestax-migrate): kept the Font Awesome 4 classes on an <i> child, as bloomer rendered them; bestax's optional Font Awesome peer is 6.7+, where many v4 names changed (brand icons moved to `variant="brands"`) — keep FA4 loaded, or switch to `name`/`library`/`variant` (`<Icon name="home" library="fa" variant="solid" />`)
+// TODO(bestax-migrate): kept the icon classes on an <i> child, as bloomer rendered them; bestax renders that child unchanged, so make sure the icon font is still loaded — or switch to `name`/`library`/`variant` (`<Icon name="home" library="fa" variant="solid" />`)
+// TODO(bestax-migrate): no icon classes to carry over (bloomer read them from `className`); bestax `Icon` needs a `name` (plus `library`/`variant`) or a child node
+// TODO(bestax-migrate): both `isSize` and `isRatio` were set; bestax `Image` has one `size` prop for either, and Bulma applies only one of the two classes — kept the fixed size, restore the ratio by hand if that is the one you wanted
+export const Media = ({ cls }: { cls: string }) => (
+  <Container>
+    <Icon size="large" name="home" library="fa" variant="solid" />
+    <Icon name="account" library="mdi" />
+    <Icon textColor="danger"><i className="fa fa-github" aria-hidden="true" /></Icon>
+    <Icon className="is-right"><i className={cls} aria-hidden="true" /></Icon>
+    <Icon size="small" />
+    <Image size="128x128" src="a.png" />
+    <Image size="16by9" src="b.png" />
+    <Image size="64x64" src="c.png" />
+    <Content size="small">
+      <p>Prose</p>
+    </Content>
+    <Delete size="medium" />
+    <Table isBordered isStriped isNarrow isFullWidth>
+      <tbody>
+        <tr>
+          <td>1</td>
+        </tr>
+      </tbody>
+    </Table>
+    <Footer as="div">Bye</Footer>
+  </Container>
+);
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/imports-basic.input.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/imports-basic.input.tsx
new file mode 100644
index 000000000..6fd0bd5f9
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/imports-basic.input.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { Box, Button, Notification, Progress, Subtitle, Tag, Title } from "bloomer";
+import "bulma/css/bulma.css";
+
+export const Basic = () => (
+  <Box>
+    <Title isSize={2} isSpaced>
+      Heading
+    </Title>
+    <Subtitle isSize={4} tag="h3">
+      Sub
+    </Subtitle>
+    <Button isColor="primary" isSize="medium" isOutlined>
+      Go
+    </Button>
+    <Button isLink isLoading isFullWidth>
+      Wait
+    </Button>
+    <Button href="/next" isInverted>
+      Next
+    </Button>
+    <Tag isColor="danger" isSize="medium">
+      New
+    </Tag>
+    <Notification isColor="warning">Careful</Notification>
+    <Progress isColor="info" value={30} max={100} isSize="small" />
+  </Box>
+);
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/imports-basic.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/imports-basic.output.tsx
new file mode 100644
index 000000000..45648b323
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/imports-basic.output.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { Box, Button, Notification, Progress, SubTitle, Tag, Title } from "@allxsmith/bestax-bulma";
+import "@allxsmith/bestax-bulma/bestax.css";
+
+export const Basic = () => (
+  <Box>
+    <Title size={2} isSpaced>
+      Heading
+    </Title>
+    <SubTitle size={4} as="h3">
+      Sub
+    </SubTitle>
+    <Button color="primary" size="medium" isOutlined>
+      Go
+    </Button>
+    <Button isLoading isFullWidth color="link">
+      Wait
+    </Button>
+    <Button href="/next" isInverted as="a">
+      Next
+    </Button>
+    <Tag color="danger" size="medium">
+      New
+    </Tag>
+    <Notification color="warning">Careful</Notification>
+    <Progress color="info" value={30} max={100} size="small" />
+  </Box>
+);
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.input.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.input.tsx
new file mode 100644
index 000000000..8bed400b1
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.input.tsx
@@ -0,0 +1,92 @@
+import React from "react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Dropdown,
+  DropdownDivider,
+  DropdownItem,
+  Page,
+  PageControl,
+  PageEllipsis,
+  PageLink,
+  PageList,
+  Pagination,
+  Panel,
+  PanelBlock,
+  PanelHeading,
+  PanelIcon,
+  PanelTab,
+  PanelTabs,
+  Tab,
+  TabLink,
+  TabList,
+  Tabs,
+} from "bloomer";
+
+export const Navigation = ({ onSelect }: { onSelect: () => void }) => (
+  <>
+    <Breadcrumb isAlign="centered" hasSeparator="arrow" isSize="small">
+      <BreadcrumbItem>
+        <a href="/">Home</a>
+      </BreadcrumbItem>
+      <BreadcrumbItem isActive>
+        <a href="/here">Here</a>
+      </BreadcrumbItem>
+    </Breadcrumb>
+    <Tabs isAlign="centered" isBoxed isSize="small" isFullWidth>
+      <TabList>
+        <Tab isActive>
+          <TabLink href="#one">One</TabLink>
+        </Tab>
+        <Tab>
+          <TabLink onClick={onSelect}>Two</TabLink>
+        </Tab>
+      </TabList>
+    </Tabs>
+    <Pagination isAlign="left" isSize="medium">
+      <PageControl>Previous</PageControl>
+      <PageControl isNext href="/p2">
+        Next
+      </PageControl>
+      <PageList>
+        <Page>
+          <PageLink>1</PageLink>
+        </Page>
+        <Page>
+          <PageEllipsis />
+        </Page>
+        <Page className="mine">
+          <PageLink isCurrent href="/p46">
+            46
+          </PageLink>
+        </Page>
+      </PageList>
+    </Pagination>
+    <Panel>
+      <PanelHeading>Repositories</PanelHeading>
+      <PanelTabs>
+        <PanelTab isActive>All</PanelTab>
+        <PanelTab>Public</PanelTab>
+      </PanelTabs>
+      <PanelBlock isActive href="/repo">
+        <PanelIcon>
+          <i className="fas fa-book" />
+        </PanelIcon>
+        bestax
+      </PanelBlock>
+      <PanelBlock>
+        <PanelIcon>
+          <i className="fa fa-code-fork" />
+        </PanelIcon>
+        fork
+      </PanelBlock>
+    </Panel>
+    <Dropdown isActive isAlign="right" isHoverable>
+      <DropdownItem isActive href="/a">
+        A
+      </DropdownItem>
+      <DropdownDivider />
+      <DropdownItem tag="div">B</DropdownItem>
+    </Dropdown>
+  </>
+);
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.output.tsx
new file mode 100644
index 000000000..96ce9bb6e
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.output.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import { Breadcrumb, Dropdown, Pagination, Panel, Tabs } from "@allxsmith/bestax-bulma";
+
+// TODO(bestax-migrate): kept the Font Awesome 4 classes on an <i> child, as bloomer rendered them; bestax's optional Font Awesome peer is 6.7+, where many v4 names changed (brand icons moved to `variant="brands"`) — keep FA4 loaded, or switch to `name`/`library`/`variant` (`<Icon name="home" library="fa" variant="solid" />`)
+// TODO(bestax-migrate): bestax `Dropdown` takes a `label` and renders its own trigger and menu; move the `<DropdownTrigger>` content into `label`, keep the `<DropdownItem>`s as direct children, and drop the `DropdownMenu`/`DropdownContent` wrappers
+export const Navigation = ({ onSelect }: { onSelect: () => void }) => (
+  <>
+    <Breadcrumb alignment="centered" separator="arrow" size="small">
+      <li>
+        <a href="/">Home</a>
+      </li>
+      <li className="is-active">
+        <a href="/here">Here</a>
+      </li>
+    </Breadcrumb>
+    <Tabs align="centered" boxed size="small" isFullWidth>
+      <Tabs.List>
+        <Tabs.Item active>
+          <a href="#one">One</a>
+        </Tabs.Item>
+        <Tabs.Item>
+          <a onClick={onSelect}>Two</a>
+        </Tabs.Item>
+      </Tabs.List>
+    </Tabs>
+    <Pagination size="medium">
+      <Pagination.Previous>Previous</Pagination.Previous>
+      <Pagination.Next href="/p2">
+        Next
+      </Pagination.Next>
+      <Pagination.List>
+        <Pagination.Link>1</Pagination.Link>
+        <Pagination.Ellipsis />
+        <Pagination.Link active href="/p46" className="mine">
+          46
+        </Pagination.Link>
+      </Pagination.List>
+    </Pagination>
+    <Panel>
+      <Panel.Heading>Repositories</Panel.Heading>
+      <Panel.Tabs>
+        <a className="is-active">All</a>
+        <a>Public</a>
+      </Panel.Tabs>
+      <Panel.Block active href="/repo">
+        <Panel.Icon name="book" library="fa" variant="solid" />
+        bestax
+      </Panel.Block>
+      <Panel.Block>
+        <Panel.Icon><i className="fa fa-code-fork" aria-hidden="true" /></Panel.Icon>
+        fork
+      </Panel.Block>
+    </Panel>
+    <Dropdown active hoverable right>
+      <Dropdown.Item active href="/a">
+        A
+      </Dropdown.Item>
+      <Dropdown.Divider />
+      <Dropdown.Item as="div">B</Dropdown.Item>
+    </Dropdown>
+  </>
+);
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/todos-unmappable.input.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/todos-unmappable.input.tsx
new file mode 100644
index 000000000..d89388a0c
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/todos-unmappable.input.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import {
+  Box,
+  Button,
+  Columns,
+  Heading,
+  HeroVideo,
+  Nav,
+  NavItem,
+  NavLeft,
+  Tile,
+  Title,
+  withHelpersModifiers,
+} from "bloomer";
+import "bloomer/lib/elements/Box";
+
+const Plain = (props: { className?: string }) => <div {...props} />;
+const Helped = withHelpersModifiers(Plain);
+
+export const Leftovers = ({ go }: { go: (p: object) => JSX.Element }) => (
+  <Box tag="section">
+    <Tile isAncestor>
+      <Tile isParent isSize={4}>
+        <Tile isChild>tile</Tile>
+      </Tile>
+    </Tile>
+    <Nav>
+      <NavLeft>
+        <NavItem isActive>Home</NavItem>
+      </NavLeft>
+    </Nav>
+    <Heading tag="h6">Label</Heading>
+    <HeroVideo isTransparent>
+      <video />
+    </HeroVideo>
+    <Columns isGrid>
+      <div />
+    </Columns>
+    <Button render={go} isLink isColor="info">
+      Rendered
+    </Button>
+    <Title isSize={3} isFullWidth>
+      Wide
+    </Title>
+    <Helped isMarginless>helped</Helped>
+  </Box>
+);
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/todos-unmappable.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/todos-unmappable.output.tsx
new file mode 100644
index 000000000..cdc3725ed
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/todos-unmappable.output.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import { Box, Button, Columns, Title } from "@allxsmith/bestax-bulma";
+// TODO(bestax-migrate): Nav, NavItem, NavLeft, Tile, withHelpersModifiers have no bestax-bulma equivalent yet — migrate and remove this import
+import { Nav, NavItem, NavLeft, Tile, withHelpersModifiers } from "bloomer";
+// TODO(bestax-migrate): `bloomer/lib/elements/Box` reaches into bloomer's internals; import the component from 'bloomer' first, then re-run the codemod
+import "bloomer/lib/elements/Box";
+
+const Plain = (props: { className?: string }) => <div {...props} />;
+// TODO(bestax-migrate): `withHelpersModifiers` is referenced as a value; migrate this usage by hand
+const Helped = withHelpersModifiers(Plain);
+
+// TODO(bestax-migrate): `tag` — bloomer's `tag` renders a different HTML element; bestax declares `as` on only some components, and this is not one of them — render the tag directly or restructure (https://bestax.io/docs/api)
+// TODO(bestax-migrate): `Tile` — Bulma v1 replaced tiles with the Grid/Cell components — see https://bestax.io/docs/api/grid and the migration guide https://bestax.io/docs/guides/getting-started/migration/bulma-0-9-to-1
+// TODO(bestax-migrate): `Nav` — `Nav` is Bulma 0.4's `.nav`, which Bulma removed in 0.5 (bloomer kept the component); rebuild it with bestax's `Navbar` — `Nav` → `Navbar`, `NavLeft`/`NavRight` → `Navbar.Start`/`Navbar.End`, `NavItem` → `Navbar.Item`, `NavToggle` → `Navbar.Burger` (https://bestax.io/docs/api/components/navbar)
+// TODO(bestax-migrate): `NavLeft` — `NavLeft` is Bulma 0.4's `.nav`, which Bulma removed in 0.5 (bloomer kept the component); rebuild it with bestax's `Navbar` — `Nav` → `Navbar`, `NavLeft`/`NavRight` → `Navbar.Start`/`Navbar.End`, `NavItem` → `Navbar.Item`, `NavToggle` → `Navbar.Burger` (https://bestax.io/docs/api/components/navbar)
+// TODO(bestax-migrate): `NavItem` — `NavItem` is Bulma 0.4's `.nav`, which Bulma removed in 0.5 (bloomer kept the component); rebuild it with bestax's `Navbar` — `Nav` → `Navbar`, `NavLeft`/`NavRight` → `Navbar.Start`/`Navbar.End`, `NavItem` → `Navbar.Item`, `NavToggle` → `Navbar.Burger` (https://bestax.io/docs/api/components/navbar)
+// TODO(bestax-migrate): Bulma v1 dropped the `.heading` styles, so this plain <p className="heading"> renders unstyled; restyle it with bestax helpers (e.g. `textSize="7" textTransform="uppercase" textWeight="semibold"`) or your own class
+// TODO(bestax-migrate): `isGrid` — Bulma removed `columns.is-grid` in 0.5; bestax `Columns` has no equivalent — use `isMultiline` with sized Columns, or the Grid component
+// TODO(bestax-migrate): `isLink` alongside `isColor`; bestax `Button` has one `color`, so pick `color="link"` or the other colour by hand
+// TODO(bestax-migrate): `render` — bloomer's `render` prop injected the computed props into your own renderer; bestax has no render-prop escape hatch — render the markup directly (`useBulmaClasses` yields the helper classes) or wrap the component (https://bestax.io/docs/api/helpers/usebulmaclasses)
+// TODO(bestax-migrate): `isFullWidth` — bestax declares `isFullWidth` on Button, Select, Table and Tabs only, and Bulma's `is-fullwidth` has no effect elsewhere — drop it, or add className="is-fullwidth" if your own CSS relied on the class
+export const Leftovers = ({ go }: { go: (p: object) => JSX.Element }) => (
+  <Box tag="section">
+    <Tile isAncestor>
+      <Tile isParent isSize={4}>
+        <Tile isChild>tile</Tile>
+      </Tile>
+    </Tile>
+    <Nav>
+      <NavLeft>
+        <NavItem isActive>Home</NavItem>
+      </NavLeft>
+    </Nav>
+    <h6 className="heading">Label</h6>
+    <div className="hero-video is-transparent">
+      <video />
+    </div>
+    <Columns isGrid>
+      <div />
+    </Columns>
+    <Button render={go} color="info">
+      Rendered
+    </Button>
+    <Title size={3} isFullWidth>
+      Wide
+    </Title>
+    <Helped isMarginless>helped</Helped>
+  </Box>
+);
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/deps.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/deps.test.ts
new file mode 100644
index 000000000..e8250dc11
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__tests__/deps.test.ts
@@ -0,0 +1,127 @@
+import { updateDependencies } from '../deps.js';
+import type { TodoEntry } from '../../../types.js';
+
+function run(
+  pkg: Record<string, unknown>,
+  options: {
+    cssMode?: 'bestax' | 'bulma' | 'keep';
+    bulmaReferenced?: boolean;
+    sourceStillImported?: boolean;
+  } = {}
+): { next: Record<string, unknown> | null; todos: TodoEntry[] } {
+  const todos: TodoEntry[] = [];
+  const next = updateDependencies(
+    'package.json',
+    structuredClone(pkg),
+    { add: entry => todos.push(entry) },
+    options
+  );
+  return { next, todos };
+}
+
+const deps = (
+  r: { next: Record<string, unknown> | null },
+  section = 'dependencies'
+) => (r.next?.[section] ?? {}) as Record<string, string>;
+
+describe('bloomer updateDependencies', () => {
+  it("swaps bloomer for bestax-bulma and bumps the app's own 0.6 bulma", () => {
+    const r = run({
+      dependencies: { bloomer: '^0.6.5', bulma: '^0.6.2', react: '^18.0.0' },
+    });
+    expect(deps(r).bloomer).toBeUndefined();
+    expect(deps(r)['@allxsmith/bestax-bulma']).toBe('^5');
+    expect(deps(r).bulma).toBe('^1.0.4');
+    expect(r.todos.map(t => t.rule)).toEqual(['deps', 'deps', 'deps']);
+    expect(r.todos.map(t => t.message)).toEqual([
+      'removed bloomer from dependencies',
+      'added @allxsmith/bestax-bulma ^5 to dependencies',
+      'bumped bulma to ^1.0.4 in dependencies (was pre-1.0)',
+    ]);
+  });
+
+  it('leaves a v1 bulma range alone and adds bulma only when sources import it', () => {
+    const untouched = run({
+      dependencies: { bloomer: '0.6.5', bulma: '^1.0.0' },
+    });
+    expect(deps(untouched).bulma).toBe('^1.0.0');
+    const withRef = run(
+      { dependencies: { bloomer: '0.6.5' } },
+      { bulmaReferenced: true }
+    );
+    expect(deps(withRef).bulma).toBe('^1.0.4');
+    const withoutRef = run({ dependencies: { bloomer: '0.6.5' } });
+    expect(deps(withoutRef).bulma).toBeUndefined();
+  });
+
+  it('removes bloomer from devDependencies too', () => {
+    const r = run({ devDependencies: { bloomer: '^0.6.5' } });
+    expect(deps(r, 'devDependencies').bloomer).toBeUndefined();
+    expect(deps(r)['@allxsmith/bestax-bulma']).toBe('^5');
+  });
+
+  it('warns when files still import bloomer for unmappable components', () => {
+    const r = run(
+      { dependencies: { bloomer: '^0.6.5' } },
+      { sourceStillImported: true }
+    );
+    expect(r.todos.some(t => /still import it/.test(t.message))).toBe(true);
+    const quiet = run({ dependencies: { bloomer: '^0.6.5' } });
+    expect(quiet.todos.some(t => /still import it/.test(t.message))).toBe(
+      false
+    );
+  });
+
+  it('reports the React 16 and Font Awesome 4/5 peer gaps without touching them', () => {
+    const r = run({
+      dependencies: {
+        bloomer: '^0.6.5',
+        react: '^16.2.0',
+        '@fortawesome/fontawesome-free': '^5.0.0',
+      },
+    });
+    expect(deps(r).react).toBe('^16.2.0');
+    const peers = r.todos
+      .filter(t => t.rule === 'peer-deps')
+      .map(t => t.message);
+    expect(peers).toHaveLength(2);
+    expect(peers[0]).toMatch(/^react \^16\.2\.0 predates/);
+    expect(peers[1]).toMatch(
+      /^@fortawesome\/fontawesome-free \^5\.0\.0 predates/
+    );
+  });
+
+  it('replaces node-sass with dart-sass in the same section', () => {
+    const r = run({
+      dependencies: { bloomer: '^0.6.5' },
+      devDependencies: { 'node-sass': '^4.9.0' },
+    });
+    expect(deps(r, 'devDependencies')['node-sass']).toBeUndefined();
+    expect(deps(r, 'devDependencies').sass).toBe('^1.79.0');
+    const already = run({
+      dependencies: { bloomer: '^0.6.5' },
+      devDependencies: { 'node-sass': '^4.9.0', sass: '^1.80.0' },
+    });
+    expect(deps(already, 'devDependencies').sass).toBe('^1.80.0');
+  });
+
+  it("leaves bloomer's own runtime dependencies to the app", () => {
+    const r = run({
+      dependencies: {
+        bloomer: '^0.6.5',
+        'create-react-class': '15.6.3',
+        'prop-types': '^15.6.2',
+      },
+    });
+    expect(deps(r)['create-react-class']).toBe('15.6.3');
+    expect(deps(r)['prop-types']).toBe('^15.6.2');
+  });
+
+  it('returns null when there is nothing to change', () => {
+    const r = run({
+      dependencies: { react: '^18.0.0', '@allxsmith/bestax-bulma': '^5' },
+    });
+    expect(r.next).toBeNull();
+    expect(r.todos).toEqual([]);
+  });
+});
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/mapping-coverage.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/mapping-coverage.test.ts
new file mode 100644
index 000000000..31a012d8d
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__tests__/mapping-coverage.test.ts
@@ -0,0 +1,159 @@
+/**
+ * Coverage guard: every bloomer export must have a mapping entry with a valid
+ * status. Extending the supported surface is a table edit in mapping.ts;
+ * forgetting one is a test failure, never a silent skip.
+ *
+ * `BLOOMER_EXPORTS` is vendored from bloomer's `src/index.ts` at the SHA
+ * `scripts/validate-corpus-bloomer.mjs` pins.
+ */
+
+import { BLOOMER_EXPORTS, MAPPING, resolveMapping } from '../mapping.js';
+import { SPECIAL_NAMES } from '../specials.js';
+
+const STATUSES = ['mapped', 'partial', 'todo'];
+
+/**
+ * Specials that never leave the rename step without a target: they either
+ * replace the node or return one. An entry that names any other special
+ * must carry its own `target`, or a flat bloomer element would be left in
+ * place while its import is pruned.
+ */
+const TARGET_PROVIDING_SPECIALS = [
+  'heading',
+  'help',
+  'label',
+  'breadcrumb-item',
+  'page',
+  'page-control',
+  'panel-tab',
+  'tab-link',
+  'hero-video',
+  'navbar-item',
+  'navbar-dropdown',
+];
+
+/**
+ * Every bloomer component whose props include `isSize`. Its type differs per
+ * component (numeric on Title/Subtitle, sizes-or-fractions on Column, pixel
+ * squares on Image), so it must be claimed per component and never fall
+ * through to the universal table — where a single rename would be wrong for
+ * at least one of them.
+ */
+const SIZE_HOLDERS = [
+  'Breadcrumb',
+  'Button',
+  'Column',
+  'Content',
+  'Delete',
+  'FieldLabel',
+  'Hero',
+  'Icon',
+  'Image',
+  'Input',
+  'Label',
+  'Media',
+  'ModalClose',
+  'Pagination',
+  'Progress',
+  'Section',
+  'Select',
+  'Subtitle',
+  'Tabs',
+  'Tag',
+  'TextArea',
+  'Tile',
+  'Title',
+];
+
+describe('bloomer mapping coverage', () => {
+  const names = Object.keys(BLOOMER_EXPORTS);
+
+  it('vendors all 108 bloomer exports, every one of them flat', () => {
+    expect(names).toHaveLength(108);
+    for (const subs of Object.values(BLOOMER_EXPORTS)) expect(subs).toEqual([]);
+  });
+
+  test.each(names)('%s has a mapping entry', name => {
+    const mapping = resolveMapping([name]);
+    expect(mapping).toBeDefined();
+    expect(STATUSES).toContain(mapping!.status);
+  });
+
+  it('maps or annotates every export', () => {
+    for (const name of names) {
+      const mapping = MAPPING[name];
+      if (mapping.status === 'todo') {
+        expect({ name, todo: mapping.todo }).toEqual({
+          name,
+          todo: expect.any(String),
+        });
+      } else {
+        expect({
+          name,
+          ok: Boolean(mapping.target ?? mapping.special),
+        }).toEqual({ name, ok: true });
+      }
+    }
+  });
+
+  it('has no mapping entries outside the vendored bloomer surface', () => {
+    for (const name of Object.keys(MAPPING)) {
+      expect(BLOOMER_EXPORTS).toHaveProperty(name);
+    }
+  });
+
+  it('names only special handlers that exist', () => {
+    for (const [name, entry] of Object.entries(MAPPING)) {
+      if (entry.special) {
+        expect({ name, known: SPECIAL_NAMES.includes(entry.special) }).toEqual({
+          name,
+          known: true,
+        });
+      }
+    }
+  });
+
+  it('gives every target-less entry a special that provides one', () => {
+    for (const [name, entry] of Object.entries(MAPPING)) {
+      if (entry.status === 'todo' || entry.target) continue;
+      expect({ name, special: entry.special }).toEqual({
+        name,
+        special: expect.toBeOneOf(TARGET_PROVIDING_SPECIALS),
+      });
+    }
+  });
+
+  it('claims `isSize` on every component that has one', () => {
+    for (const name of SIZE_HOLDERS) {
+      const entry = MAPPING[name];
+      if (entry.status === 'todo') continue;
+      // Column, Image and Label consume it structurally; the rest name it.
+      const claimed =
+        Boolean(entry.props?.isSize) ||
+        entry.special === 'column' ||
+        entry.special === 'image' ||
+        entry.special === 'label';
+      expect({ name, claimed }).toEqual({ name, claimed: true });
+    }
+  });
+});
+
+expect.extend({
+  toBeOneOf(received: unknown, allowed: unknown[]) {
+    const pass = allowed.includes(received);
+    return {
+      pass,
+      message: () =>
+        `expected ${String(received)} ${pass ? 'not ' : ''}to be one of ${allowed.join(', ')}`,
+    };
+  },
+});
+
+declare module 'expect' {
+  interface AsymmetricMatchers {
+    toBeOneOf(allowed: unknown[]): void;
+  }
+  interface Matchers<R> {
+    toBeOneOf(allowed: unknown[]): R;
+  }
+}
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/responsive.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/responsive.test.ts
new file mode 100644
index 000000000..439d88985
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__tests__/responsive.test.ts
@@ -0,0 +1,159 @@
+/**
+ * Helper-flattening coverage: the shapes a fixture can show once, but whose
+ * failure paths need one case each. bloomer's `isDisplay` has three shapes
+ * and every one of them can be handed something the codemod must refuse to
+ * guess at rather than silently mangle.
+ */
+
+import transform from '../transform.js';
+import { runTransform } from '../../../runner.js';
+import type { TodoEntry } from '../../../types.js';
+
+function migrate(source: string) {
+  const todos: TodoEntry[] = [];
+  const { output } = runTransform(transform, 'case.tsx', source, {
+    add: entry => todos.push(entry),
+  });
+  return { output: output ?? '', todos, rules: todos.map(t => t.rule) };
+}
+
+/** The output without its TODO comment lines, for assertions about the JSX. */
+const jsx = (s: string): string =>
+  s
+    .split('\n')
+    .filter(l => !l.trimStart().startsWith('//'))
+    .join('\n');
+
+const box = (attrs: string) =>
+  `import { Box } from 'bloomer';\nexport const A = (p: Record<string, any>) => <Box ${attrs}>x</Box>;`;
+const column = (attrs: string) =>
+  `import { Column } from 'bloomer';\nexport const A = (p: Record<string, any>) => <Column ${attrs}>x</Column>;`;
+
+describe('isDisplay', () => {
+  it('flattens every viewport suffix bestax declares', () => {
+    const { output, rules } = migrate(
+      box(
+        'isDisplay={["flex-mobile", "flex-tablet", "flex-tablet-only", "flex-touch", "flex-desktop", "flex-desktop-only", "flex-widescreen", "flex-widescreen-only", "flex-fullhd"]}'
+      )
+    );
+    expect(rules).toEqual([]);
+    for (const suffix of [
+      'Mobile',
+      'Tablet',
+      'TabletOnly',
+      'Touch',
+      'Desktop',
+      'DesktopOnly',
+      'Widescreen',
+      'WidescreenOnly',
+      'Fullhd',
+    ]) {
+      expect(output).toContain(`display${suffix}="flex"`);
+    }
+  });
+
+  it('reads inline-block and inline-flex as displays, not inline plus a viewport', () => {
+    const { output } = migrate(
+      box('isDisplay={["inline-block-mobile", "inline-flex"]}')
+    );
+    expect(output).toContain('displayMobile="inline-block"');
+    expect(output).toContain('display="inline-flex"');
+  });
+
+  it('flags a string that is not a display', () => {
+    const { output, rules } = migrate(box('isDisplay="grid-mobile"'));
+    expect(rules).toEqual(['prop:isDisplay']);
+    expect(jsx(output)).not.toContain('display');
+  });
+
+  it('flags an entry that lands on a prop already set', () => {
+    const { output, rules } = migrate(box('isDisplay={["flex", "block"]}'));
+    expect(rules).toEqual(['prop:isDisplay']);
+    expect(output).toContain('display="flex"');
+    expect(jsx(output)).not.toContain('display="block"');
+  });
+
+  it('flags a dynamic array entry and keeps the literal ones', () => {
+    const { output, rules } = migrate(box('isDisplay={["flex", p.d]}'));
+    expect(rules).toEqual(['prop:isDisplay']);
+    expect(output).toContain('display="flex"');
+  });
+
+  it('flags object keys that are not displays and dynamic object values', () => {
+    const { output, rules } = migrate(
+      box('isDisplay={{ grid: "mobile", flex: p.v }}')
+    );
+    expect(rules).toEqual(['prop:isDisplay', 'prop:isDisplay']);
+    expect(jsx(output)).not.toContain('isplay');
+  });
+
+  it('flags an object value naming a viewport bestax does not have', () => {
+    const { rules } = migrate(
+      box('isDisplay={{ flex: ["default", "print"] }}')
+    );
+    expect(rules).toEqual(['prop:isDisplay']);
+  });
+});
+
+describe('isHidden', () => {
+  it('flags a viewport bestax does not have', () => {
+    const { output, rules } = migrate(box('isHidden="print"'));
+    expect(rules).toEqual(['prop:isHidden']);
+    expect(jsx(output)).not.toContain('idden');
+  });
+
+  it('flags a dynamic array entry and keeps the literal ones', () => {
+    const { output, rules } = migrate(box('isHidden={["tablet", p.v]}'));
+    expect(rules).toEqual(['prop:isHidden']);
+    expect(output).toContain('visibilityTablet="hidden"');
+  });
+
+  it('flags an entry that lands on a prop already set', () => {
+    const { rules } = migrate(box('isHidden={["tablet", "tablet"]}'));
+    expect(rules).toEqual(['prop:isHidden']);
+  });
+});
+
+describe('Column isSize / isOffset', () => {
+  it('accepts numeric strings and rejects the rest', () => {
+    const ok = migrate(column('isSize="6" isOffset="3"'));
+    expect(ok.output).toContain('<Column size="6" offset="3">');
+    const bad = migrate(column('isSize="13"'));
+    expect(bad.rules).toEqual(['prop:isSize']);
+    expect(bad.output).toContain('<Column>');
+  });
+
+  it('refuses a narrow offset', () => {
+    const { output, rules } = migrate(column('isOffset="narrow"'));
+    expect(rules).toEqual(['prop:isOffset']);
+    expect(output).toContain('<Column>');
+  });
+
+  it('flags a dynamic scalar', () => {
+    const { rules } = migrate(column('isSize={p.s}'));
+    expect(rules).toEqual(['prop:isSize']);
+  });
+
+  it('flags object keys bestax has no column props for', () => {
+    const { output, rules } = migrate(
+      column('isSize={{ print: 4, touch: 6 }} isOffset={{ touch: "narrow" }}')
+    );
+    expect(rules).toEqual(['prop:isSize', 'prop:isSize', 'prop:isOffset']);
+    expect(output).toContain('<Column>');
+  });
+
+  it('keeps a numeric literal inside an object numeric', () => {
+    const { output } = migrate(
+      column('isSize={{ desktop: 3, default: "1/4" }}')
+    );
+    expect(output).toContain('size="one-quarter"');
+    expect(output).toContain('sizeDesktop={3}');
+  });
+
+  it('does not touch isSize on components that are not columns', () => {
+    const { output } = migrate(
+      `import { Title } from 'bloomer';\nexport const A = () => <Title isSize={{ mobile: 1 }}>x</Title>;`
+    );
+    expect(output).toContain('<Title size={{ mobile: 1 }}>');
+  });
+});
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
new file mode 100644
index 000000000..2401869e6
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
@@ -0,0 +1,287 @@
+/**
+ * Structural-handler coverage beyond the fixture pairs: the branches a
+ * fixture would have to contort itself to reach — dynamic prop values, the
+ * fall-back paths, and the handlers whose whole job is to emit a TODO.
+ */
+
+import transform from '../transform.js';
+import { runSpecial } from '../specials.js';
+import { runTransform } from '../../../runner.js';
+import type { TodoEntry } from '../../../types.js';
+
+function migrate(source: string) {
+  const todos: TodoEntry[] = [];
+  const { output } = runTransform(transform, 'case.tsx', source, {
+    add: entry => todos.push(entry),
+  });
+  return { output: output ?? '', todos, rules: todos.map(t => t.rule) };
+}
+
+/** The output without its TODO comment lines, for assertions about the JSX. */
+const jsx = (s: string): string =>
+  s
+    .split('\n')
+    .filter(l => !l.trimStart().startsWith('//'))
+    .join('\n');
+
+const imp = (names: string) => `import { ${names} } from 'bloomer';\n`;
+const dyn = (names: string, jsx: string) =>
+  imp(names) + `export const A = (p: Record<string, any>) => (${jsx});\n`;
+
+describe('bloomer Button', () => {
+  it('flags a dynamic isLink', () => {
+    const { output, rules } = migrate(
+      dyn('Button', '<Button isLink={p.x}>x</Button>')
+    );
+    expect(rules).toEqual(['prop:isLink']);
+    expect(jsx(output)).not.toContain('isLink');
+  });
+
+  it('drops a false isLink silently', () => {
+    const { output, rules } = migrate(
+      dyn('Button', '<Button isLink={false}>x</Button>')
+    );
+    expect(rules).toEqual([]);
+    expect(output).toContain('<Button>x</Button>');
+  });
+
+  it('does not add as="a" when the element already sets one', () => {
+    const { output } = migrate(
+      dyn('Button', '<Button href="/x" as="span">x</Button>')
+    );
+    expect(output).toContain('<Button href="/x" as="span">');
+  });
+});
+
+describe('bloomer plain-element handlers', () => {
+  it('honours a literal tag and flags a dynamic one', () => {
+    const literal = migrate(dyn('Help', '<Help tag="div">x</Help>'));
+    expect(literal.output).toContain('<div className="help">x</div>');
+    const dynamic = migrate(dyn('Help', '<Help tag={p.t}>x</Help>'));
+    expect(dynamic.output).toContain('<p className="help">x</p>');
+    expect(dynamic.rules).toEqual(['prop:tag']);
+  });
+
+  it('flags a dynamic Help colour instead of guessing a class', () => {
+    const { output, rules } = migrate(
+      dyn('Help', '<Help isColor={p.c}>x</Help>')
+    );
+    expect(output).toContain('<p className="help">x</p>');
+    expect(rules).toEqual(['prop:isColor']);
+  });
+
+  it('merges an existing className into the plain element', () => {
+    const { output } = migrate(
+      dyn('Label', '<Label isSize="small" className="mine">x</Label>')
+    );
+    expect(output).toContain(
+      '<label className="label is-small mine">x</label>'
+    );
+  });
+
+  it('gives render its own hint when the element becomes plain HTML', () => {
+    const { output, rules } = migrate(
+      dyn('Help', '<Help render={p.r}>x</Help>')
+    );
+    expect(rules).toEqual(['prop:render']);
+    expect(output).not.toContain('render=');
+  });
+
+  it('drops helper props from a plain element with a TODO', () => {
+    const { output, rules } = migrate(
+      dyn(
+        'PanelTab',
+        '<PanelTab isActive={p.on} isHidden="mobile" isPulled="left">x</PanelTab>'
+      )
+    );
+    expect(rules).toEqual(['prop:isActive', 'plain-element']);
+    expect(output).toContain('<a>x</a>');
+  });
+
+  it('flags a dynamic BreadcrumbItem active state', () => {
+    const { output, rules } = migrate(
+      dyn(
+        'BreadcrumbItem',
+        '<BreadcrumbItem isActive={p.on}><a>x</a></BreadcrumbItem>'
+      )
+    );
+    expect(rules).toEqual(['prop:isActive']);
+    expect(output).toContain('<li><a>x</a></li>');
+  });
+
+  it('renders HeroVideo without the transparent modifier', () => {
+    const { output } = migrate(
+      dyn('HeroVideo', '<HeroVideo><video /></HeroVideo>')
+    );
+    expect(output).toContain('<div className="hero-video"><video /></div>');
+  });
+});
+
+describe('bloomer Icon', () => {
+  it('flags a dynamic isAlign', () => {
+    const { output, rules } = migrate(
+      dyn('Icon', '<Icon className="fas fa-home" isAlign={p.a} />')
+    );
+    expect(rules).toEqual(['prop:isAlign']);
+    expect(output).toContain(
+      '<Icon name="home" library="fa" variant="solid" />'
+    );
+  });
+
+  it('keeps children it was given and says nothing', () => {
+    const { output, rules } = migrate(dyn('Icon', '<Icon><svg /></Icon>'));
+    expect(rules).toEqual([]);
+    expect(output).toContain('<Icon><svg /></Icon>');
+  });
+
+  it('reads a PanelIcon child that the parser cannot name and keeps it', () => {
+    const { output, rules } = migrate(
+      dyn('PanelIcon', '<PanelIcon><svg /></PanelIcon>')
+    );
+    expect(rules).toEqual([]);
+    expect(output).toContain('<Panel.Icon><svg /></Panel.Icon>');
+  });
+
+  it('flags an empty PanelIcon', () => {
+    const { rules } = migrate(dyn('PanelIcon', '<PanelIcon />'));
+    expect(rules).toEqual(['component:PanelIcon']);
+  });
+
+  it('flags a PanelIcon child whose classes are dynamic', () => {
+    const { output, rules } = migrate(
+      dyn('PanelIcon', '<PanelIcon><i className={p.c} /></PanelIcon>')
+    );
+    expect(rules).toEqual([]);
+    expect(output).toContain('<Panel.Icon><i className={p.c} /></Panel.Icon>');
+  });
+});
+
+describe('bloomer Control hasIcons', () => {
+  it('drops a false value', () => {
+    const { output, rules } = migrate(
+      dyn('Control', '<Control hasIcons={false}>x</Control>')
+    );
+    expect(rules).toEqual([]);
+    expect(output).toContain('<Control>x</Control>');
+  });
+
+  it('flags an unknown side, a dynamic entry and a dynamic value', () => {
+    expect(
+      migrate(dyn('Control', '<Control hasIcons="top">x</Control>')).rules
+    ).toEqual(['prop:hasIcons']);
+    expect(
+      migrate(dyn('Control', '<Control hasIcons={["left", p.s]}>x</Control>'))
+        .rules
+    ).toEqual(['prop:hasIcons']);
+    const dynamic = migrate(
+      dyn('Control', '<Control hasIcons={p.s}>x</Control>')
+    );
+    expect(dynamic.rules).toEqual(['prop:hasIcons']);
+    expect(dynamic.output).toContain('<Control>x</Control>');
+  });
+});
+
+describe('bloomer Image', () => {
+  it('flags an unknown or dynamic ratio', () => {
+    expect(
+      migrate(dyn('Image', '<Image isRatio="5:4" src="a" />')).rules
+    ).toEqual(['prop:isRatio']);
+    const dynamic = migrate(dyn('Image', '<Image isRatio={p.r} src="a" />'));
+    expect(dynamic.rules).toEqual(['prop:isRatio']);
+    expect(dynamic.output).toContain('<Image src="a" />');
+  });
+});
+
+describe('bloomer navigation handlers', () => {
+  it('flags a dynamic hasDropdown and a hoverable plain item', () => {
+    const { output, rules } = migrate(
+      dyn(
+        'NavbarItem',
+        '<NavbarItem hasDropdown={p.d} isHoverable>x</NavbarItem>'
+      )
+    );
+    expect(rules).toEqual(['prop:hasDropdown', 'prop:isHoverable']);
+    expect(output).toContain('<Navbar.Item>x</Navbar.Item>');
+  });
+
+  it('drops the tag of a dropdown container', () => {
+    const { output, rules } = migrate(
+      dyn('NavbarItem', '<NavbarItem hasDropdown tag="span">x</NavbarItem>')
+    );
+    expect(rules).toEqual(['prop:tag']);
+    expect(output).toContain('<Navbar.Dropdown>x</Navbar.Dropdown>');
+  });
+
+  it('lets href win over tag where the target already renders an anchor', () => {
+    const menu = migrate(
+      dyn('MenuLink', '<MenuLink href="/x" tag="span">x</MenuLink>')
+    );
+    expect(menu.output).toContain('<Menu.Item href="/x">x</Menu.Item>');
+    const item = migrate(
+      dyn('NavbarItem', '<NavbarItem href="/x" tag="div">x</NavbarItem>')
+    );
+    expect(item.output).toContain('<Navbar.Item href="/x">x</Navbar.Item>');
+    const block = migrate(
+      dyn('PanelBlock', '<PanelBlock href="/x" tag="div">x</PanelBlock>')
+    );
+    expect(block.output).toContain('<Panel.Block href="/x">x</Panel.Block>');
+    const level = migrate(
+      dyn('LevelItem', '<LevelItem href="/x" tag="p">x</LevelItem>')
+    );
+    expect(level.output).toContain(
+      '<Level.Item href="/x" as="a">x</Level.Item>'
+    );
+  });
+
+  it('keeps a NavbarDropdown without isBoxed as the menu', () => {
+    const { output, rules } = migrate(
+      dyn('NavbarDropdown', '<NavbarDropdown>x</NavbarDropdown>')
+    );
+    expect(rules).toEqual([]);
+    expect(output).toContain('<Navbar.DropdownMenu>x</Navbar.DropdownMenu>');
+  });
+
+  it('renames a non-left Pagination alignment and flags a dynamic one', () => {
+    const right = migrate(
+      dyn('Pagination', '<Pagination isAlign="right">x</Pagination>')
+    );
+    expect(right.output).toContain('<Pagination align="right">');
+    const dynamic = migrate(
+      dyn('Pagination', '<Pagination isAlign={p.a}>x</Pagination>')
+    );
+    expect(dynamic.rules).toEqual(['prop:isAlign']);
+    expect(dynamic.output).toContain('<Pagination align={p.a}>');
+  });
+
+  it('flags a dynamic PageControl direction and drops isPrevious', () => {
+    const { output, rules } = migrate(
+      dyn('PageControl', '<PageControl isNext={p.n} isPrevious>x</PageControl>')
+    );
+    expect(rules).toEqual(['prop:isNext']);
+    expect(output).toContain('<Pagination.Previous>x</Pagination.Previous>');
+  });
+
+  it('keeps a Page it cannot fold as a plain list item', () => {
+    const { output, rules } = migrate(
+      dyn('Page', '<Page tag="span"><b>1</b></Page>')
+    );
+    expect(rules).toEqual([]);
+    expect(output).toContain('<span><b>1</b></span>');
+  });
+
+  it('keeps a dropdown href and drops the tag beside it', () => {
+    const { output, rules } = migrate(
+      dyn('Dropdown', '<Dropdown href="/x" tag="span">x</Dropdown>')
+    );
+    expect(rules).toEqual(['component:Dropdown']);
+    expect(output).toContain('<Dropdown href="/x">x</Dropdown>');
+  });
+});
+
+describe('runSpecial', () => {
+  it('refuses a handler name the mapping could only have misspelled', () => {
+    expect(() =>
+      runSpecial('no-such-handler', {} as never, {} as never, {})
+    ).toThrow(/unknown special handler/);
+  });
+});
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/styles.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/styles.test.ts
new file mode 100644
index 000000000..5dfb65be4
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__tests__/styles.test.ts
@@ -0,0 +1,53 @@
+/**
+ * bloomer ships no stylesheet, so the shared Bulma pass is configured with no
+ * source root. These pin the two things that configuration must still do:
+ * rewrite the app's own Bulma import, and stay out of files that mention
+ * neither.
+ */
+
+import { transformStyles } from '../styles.js';
+import type { TodoEntry } from '../../../types.js';
+
+function run(file: string, source: string) {
+  const todos: TodoEntry[] = [];
+  const output = transformStyles(
+    file,
+    source,
+    { add: entry => todos.push(entry) },
+    { cssMode: 'bestax' }
+  );
+  return { output, todos };
+}
+
+describe('bloomer transformStyles', () => {
+  it('leaves files without Bulma references untouched', () => {
+    expect(run('app.scss', '.card { color: red; }\n').output).toBeNull();
+  });
+
+  it('rewrites the 0.6-era Bulma root import to the v1 module', () => {
+    const { output } = run(
+      'styles.scss',
+      "$primary: #1e6b99 !default;\n@import '~bulma/bulma';\n.app { color: $grey; }\n"
+    );
+    expect(output).toContain("@use 'bulma/sass' with (");
+    expect(output).toMatch(/\$primary: #1e6b99/);
+    expect(output).toContain("@use '@allxsmith/bestax-bulma/scss/extras';");
+    expect(output).not.toContain('@import');
+  });
+
+  it('flags an indented-syntax file rather than rewriting it', () => {
+    const { output, todos } = run('styles.sass', "@import '~bulma/bulma'\n");
+    expect(output).toContain('TODO(bestax-migrate)');
+    expect(todos.map(t => t.rule)).toEqual(['sass']);
+  });
+
+  it('treats a bloomer specifier like any dead source import', () => {
+    // bloomer never shipped a stylesheet, so this line never existed in a
+    // real app. The shared pass keeps its contract regardless: an import of
+    // the package being removed is dead, and a file that styled itself from
+    // it needs SOME Bulma root afterwards.
+    const { output } = run('styles.scss', "@import 'bloomer';\n");
+    expect(output).toContain("@use 'bulma/sass'");
+    expect(output).not.toContain("@import 'bloomer'");
+  });
+});
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
new file mode 100644
index 000000000..3c0c1ba29
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
@@ -0,0 +1,284 @@
+/**
+ * Fixture-pair tests: every __testfixtures__/<case>.input.tsx must transform
+ * into the committed <case>.output.tsx byte-for-byte (modulo trailing
+ * whitespace). Fixtures are read as text — bloomer is never installed in this
+ * repository.
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import transform from '../transform.js';
+import { runTransform } from '../../../runner.js';
+import type { TodoEntry } from '../../../types.js';
+
+const fixturesDir = path.join(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '..',
+  '__testfixtures__'
+);
+
+const cases = fs
+  .readdirSync(fixturesDir)
+  .filter(file => file.endsWith('.input.tsx'))
+  .map(file => file.replace(/\.input\.tsx$/, ''))
+  .sort();
+
+function migrate(source: string, cssMode?: 'bestax' | 'bulma' | 'keep') {
+  const todos: TodoEntry[] = [];
+  const { output } = runTransform(
+    transform,
+    'case.tsx',
+    source,
+    { add: entry => todos.push(entry) },
+    cssMode ? { cssMode } : {}
+  );
+  return { output: output ?? '', todos, rules: todos.map(t => t.rule) };
+}
+
+describe('bloomer transform fixtures', () => {
+  it('has at least one fixture pair', () => {
+    expect(cases.length).toBeGreaterThan(0);
+  });
+
+  test.each(cases)('%s', name => {
+    const input = fs.readFileSync(
+      path.join(fixturesDir, `${name}.input.tsx`),
+      'utf8'
+    );
+    const expected = fs.readFileSync(
+      path.join(fixturesDir, `${name}.output.tsx`),
+      'utf8'
+    );
+    const todos: TodoEntry[] = [];
+    const { output } = runTransform(transform, `${name}.input.tsx`, input, {
+      add: entry => todos.push(entry),
+    });
+    expect((output ?? input).trimEnd()).toBe(expected.trimEnd());
+  });
+
+  it('returns null for files without bloomer imports', () => {
+    const source =
+      "import { Button } from 'other-library';\nexport const A = () => <Button />;\n";
+    const { output } = runTransform(transform, 'untouched.tsx', source);
+    expect(output).toBeNull();
+  });
+});
+
+describe('bloomer imports', () => {
+  it('flags default imports from bloomer and keeps the binding', () => {
+    const { output, rules } = migrate(
+      "import Bloomer from 'bloomer';\nexport const A = () => <Bloomer.Box />;\n"
+    );
+    expect(rules).toContain('imports');
+    expect(output).toContain("import Bloomer from 'bloomer'");
+  });
+
+  it('rewrites namespace imports element by element', () => {
+    const { output, rules } = migrate(
+      "import * as B from 'bloomer';\nexport const A = () => <B.CardHeaderTitle>x</B.CardHeaderTitle>;\n"
+    );
+    expect(output).toContain('<Card.Header.Title>x</Card.Header.Title>');
+    expect(output).toContain('import { Card } from "@allxsmith/bestax-bulma"');
+    expect(output).not.toContain("from 'bloomer'");
+    expect(rules).toEqual([]);
+  });
+
+  it('keeps a namespace import that a retained component still needs', () => {
+    const { output, rules } = migrate(
+      "import * as B from 'bloomer';\nexport const A = () => <B.Tile>x</B.Tile>;\n"
+    );
+    expect(output).toContain("import * as B from 'bloomer'");
+    expect(rules).toContain('component:Tile');
+  });
+
+  it('flags deep imports into bloomer internals', () => {
+    const { output, rules } = migrate(
+      "import Box from 'bloomer/lib/elements/Box';\nexport const A = () => <Box />;\n"
+    );
+    expect(rules).toContain('imports');
+    expect(output).toContain("from 'bloomer/lib/elements/Box'");
+  });
+
+  it('merges into an existing named bestax import', () => {
+    const { output } = migrate(
+      "import { Title } from '@allxsmith/bestax-bulma';\nimport { Box } from 'bloomer';\nexport const A = () => <Box><Title>x</Title></Box>;\n"
+    );
+    expect(output).toMatch(
+      /import \{ Title, Box \} from ['"]@allxsmith\/bestax-bulma['"]/
+    );
+    expect(output).not.toContain("from 'bloomer'");
+  });
+
+  it('aliases a bestax import whose name the file already binds', () => {
+    const { output } = migrate(
+      "import { CardHeaderTitle } from 'bloomer';\nconst Card = () => null;\nexport const A = () => <><Card /><CardHeaderTitle>x</CardHeaderTitle></>;\n"
+    );
+    expect(output).toContain('import { Card as BulmaCard }');
+    expect(output).toContain(
+      '<BulmaCard.Header.Title>x</BulmaCard.Header.Title>'
+    );
+  });
+
+  it('keeps a component referenced as a value on the bestax import', () => {
+    const { output, rules } = migrate(
+      "import { Box, Title } from 'bloomer';\nconst Wrapper = Box;\nexport const A = () => <Title as={Wrapper as never}>x</Title>;\n"
+    );
+    expect(output).toContain('const Wrapper = Box;');
+    expect(output).toMatch(/import \{ Box, Title \} from/);
+    expect(rules).toEqual([]);
+  });
+});
+
+describe('bloomer value references', () => {
+  it('rewrites a namespace member used as a value', () => {
+    const { output, rules } = migrate(
+      "import * as B from 'bloomer';\nconst Wrapped = B.CardHeaderTitle;\nexport const A = () => <Wrapped />;\n"
+    );
+    expect(rules).toEqual([]);
+    expect(output).toContain('const Wrapped = Card.Header.Title;');
+    expect(output).toContain('import { Card } from "@allxsmith/bestax-bulma"');
+    expect(output).not.toContain("from 'bloomer'");
+  });
+
+  it('keeps a namespace binding that is used bare', () => {
+    const { output, rules } = migrate(
+      "import * as B from 'bloomer';\nexport const keys = Object.keys(B);\nexport const A = () => <B.Box />;\n"
+    );
+    expect(rules).toEqual([]);
+    expect(output).toContain("import * as B from 'bloomer'");
+    expect(output).toContain('<Box />');
+  });
+
+  it('expands a shorthand property so the public key survives', () => {
+    const { output } = migrate(
+      "import { Subtitle } from 'bloomer';\nexport const parts = { Subtitle };\n"
+    );
+    expect(output).toContain('{ Subtitle: SubTitle }');
+    expect(output).toMatch(/import \{ SubTitle \} from/);
+  });
+
+  it('renames a flat component used as a value onto its dotted target', () => {
+    const { output } = migrate(
+      "import { HeroFooter, Tabs } from 'bloomer';\nexport const parts = [HeroFooter, Tabs];\n"
+    );
+    expect(output).toContain('[Hero.Foot, Tabs]');
+    expect(output).toMatch(/import \{ Hero, Tabs \} from/);
+  });
+
+  it('flags a member chain hung off a flat component and retains the import', () => {
+    const { output, rules } = migrate(
+      "import { Box } from 'bloomer';\nexport const x = Box.displayName;\nexport const A = () => <Box />;\n"
+    );
+    expect(rules).toEqual(['value-reference']);
+    expect(output).toContain('import { Box as BulmaBox }');
+    expect(output).toContain('<BulmaBox />');
+    expect(output).toContain("import { Box } from 'bloomer'");
+  });
+
+  it('flags a retained component used as a value', () => {
+    const { output, rules } = migrate(
+      "import { Tile } from 'bloomer';\nexport const T = Tile;\n"
+    );
+    expect(rules).toEqual(['value-reference']);
+    expect(output).toContain("import { Tile } from 'bloomer'");
+  });
+
+  it('leaves a local that shadows the import alone, and aliases the rest', () => {
+    const { output } = migrate(
+      "import React from 'react';\nimport { Box } from 'bloomer';\nexport const A = ({ Box }: { Box: React.FC }) => <Box />;\nexport const B = () => <Box />;\nexport const W = Box;\n"
+    );
+    // The parameter's JSX and the import's JSX resolve to different bindings.
+    expect(output).toContain('({ Box }: { Box: React.FC }) => <Box />');
+    expect(output).toContain('export const B = () => <BulmaBox />');
+    expect(output).toContain('export const W = BulmaBox;');
+    expect(output).toContain('import { Box as BulmaBox }');
+  });
+
+  it('ignores identifiers in property positions', () => {
+    const { output, rules } = migrate(
+      "import { Box } from 'bloomer';\nexport const o = { Box: 1, y: (p: { Box: number }) => p.Box };\nexport const A = () => <Box />;\n"
+    );
+    expect(rules).toEqual([]);
+    expect(output).toContain('{ Box: 1, y: (p: { Box: number }) => p.Box }');
+  });
+
+  it('expands a shorthand property onto a dotted target', () => {
+    const { output } = migrate(
+      "import { HeroFooter } from 'bloomer';\nexport const parts = { HeroFooter };\n"
+    );
+    expect(output).toContain('{ HeroFooter: Hero.Foot }');
+  });
+
+  it('flags a shorthand property of a retained component once', () => {
+    const { output, rules } = migrate(
+      "import { Tile } from 'bloomer';\nexport const parts = { Tile };\n"
+    );
+    expect(rules).toEqual(['value-reference']);
+    expect(output).toContain("import { Tile } from 'bloomer'");
+  });
+
+  it('flags a deeper member chain hung off a namespace', () => {
+    const { output, rules } = migrate(
+      "import * as B from 'bloomer';\nexport const n = B.Box.displayName.length;\n"
+    );
+    expect(rules).toEqual(['value-reference']);
+    expect(output).toContain("import * as B from 'bloomer'");
+  });
+
+  it('flags an unknown namespace member', () => {
+    const { rules } = migrate(
+      "import * as B from 'bloomer';\nexport const A = () => <B.Nope />;\n"
+    );
+    expect(rules).toEqual(['unknown-component']);
+  });
+
+  it('aliases an unmappable import whose local name bestax wants', () => {
+    const { output, rules } = migrate(
+      "import { Tile as Button, Button as Btn } from 'bloomer';\nexport const A = () => <><Button /><Btn /></>;\n"
+    );
+    expect(rules).toEqual(['component:Tile']);
+    expect(output).toContain('import { Button as BulmaButton }');
+    expect(output).toContain('<BulmaButton />');
+    expect(output).toContain("import { Tile as Button } from 'bloomer'");
+  });
+});
+
+describe('bloomer stylesheet imports', () => {
+  const app = (css: string) =>
+    `import { Box } from 'bloomer';\nimport '${css}';\nexport const A = () => <Box />;\n`;
+
+  it('adopts the combined bestax bundle by default', () => {
+    const { output } = migrate(app('bulma/css/bulma.min.css'));
+    expect(output).toContain('import "@allxsmith/bestax-bulma/bestax.css"');
+    expect(output).not.toContain('bulma/css/bulma.min.css');
+  });
+
+  it('prunes a Bulma import when the bestax bundle is already imported', () => {
+    const { output } = migrate(
+      "import { Box } from 'bloomer';\nimport '@allxsmith/bestax-bulma/bestax.css';\nimport 'bulma/css/bulma.css';\nexport const A = () => <Box />;\n"
+    );
+    expect(output).not.toContain('bulma/css/bulma.css');
+    expect(output.match(/bestax\.css/g)).toHaveLength(1);
+  });
+
+  it('drops a separate extras import once the bundle covers it', () => {
+    const { output } = migrate(
+      "import { Box } from 'bloomer';\nimport '@allxsmith/bestax-bulma/extras.css';\nimport 'bulma/css/bulma.css';\nexport const A = () => <Box />;\n"
+    );
+    expect(output).toContain('import "@allxsmith/bestax-bulma/bestax.css"');
+    expect(output).not.toContain('extras.css');
+  });
+
+  it('keeps plain Bulma and adds the extras under --css bulma', () => {
+    const { output } = migrate(app('bulma/css/bulma.css'), 'bulma');
+    expect(output).toContain("import 'bulma/css/bulma.css'");
+    expect(output).toContain('import "@allxsmith/bestax-bulma/extras.css"');
+  });
+
+  it('touches nothing under --css keep', () => {
+    const { output } = migrate(app('bulma/css/bulma.css'), 'keep');
+    expect(output).toContain("import 'bulma/css/bulma.css'");
+    expect(output).not.toContain('extras.css');
+  });
+});
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/value-unions.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/value-unions.test.ts
new file mode 100644
index 000000000..2e4726b42
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__tests__/value-unions.test.ts
@@ -0,0 +1,122 @@
+/**
+ * The mapping table asserts that bloomer's helper values pass through to
+ * bestax unchanged — `hasTextAlign="centered"`, `isDisplay="flex"`,
+ * `isHidden="tablet-only"`. That assertion is invisible to every other check
+ * on this package: the fixtures use a handful of values, the corpus only
+ * parses, and the e2e typecheck only sees what its fixture happens to write.
+ *
+ * So this diffs bloomer's own type unions (and the Bulma 0.6 colour names it
+ * documented) against bestax's `valid*` constants directly. If a future
+ * bestax release drops or renames a value, the pass-through mappings become
+ * silently wrong and this is what catches it.
+ *
+ * bloomer's unions are vendored rather than read from disk: bloomer is never
+ * installed in this repository, and the values are frozen at its final
+ * release.
+ */
+
+import {
+  validAlignments,
+  validColors,
+  validDisplays,
+  validViewports,
+} from '@allxsmith/bestax-bulma';
+import { COLUMN_SIZE_MAP, MAPPING } from '../mapping.js';
+import { VIEWPORT_SUFFIX } from '../../_shared/viewports.js';
+
+/** bloomer 0.6.5 `src/bulma.tsx` — the `Bulma` namespace, verbatim. */
+const BLOOMER = {
+  textAlignments: ['left', 'right', 'centered'],
+  displays: ['flex', 'block', 'inline', 'inline-block', 'inline-flex'],
+  platforms: ['mobile', 'tablet', 'touch', 'desktop', 'widescreen'],
+  platformsOnly: ['tablet-only', 'desktop-only'],
+  // Bulma 0.6's `$colors` map plus `link`, which its docs use as a colour.
+  colors: [
+    'white',
+    'black',
+    'light',
+    'dark',
+    'primary',
+    'link',
+    'info',
+    'success',
+    'warning',
+    'danger',
+  ],
+  // Bulma 0.6's `$shades` map — `has-text-*` accepted every one of these.
+  shades: [
+    'black-bis',
+    'black-ter',
+    'grey-darker',
+    'grey-dark',
+    'grey',
+    'grey-light',
+    'grey-lighter',
+    'white-ter',
+    'white-bis',
+  ],
+} as const;
+
+/** The two shades bestax has no counterpart for — mapping.ts TODOs both. */
+const KNOWN_UNSUPPORTED_SHADES = ['white-ter', 'white-bis'];
+
+describe('bloomer helper values that the mapping passes through unchanged', () => {
+  it('every bloomer text alignment exists in bestax', () => {
+    const missing = BLOOMER.textAlignments.filter(
+      v => !(validAlignments as readonly string[]).includes(v)
+    );
+    expect(missing).toEqual([]);
+  });
+
+  it('every bloomer display exists in bestax', () => {
+    const missing = BLOOMER.displays.filter(
+      v => !(validDisplays as readonly string[]).includes(v)
+    );
+    expect(missing).toEqual([]);
+  });
+
+  it('every bloomer platform, including the -only ones, is a bestax viewport', () => {
+    const all = [...BLOOMER.platforms, ...BLOOMER.platformsOnly];
+    const missing = all.filter(
+      v => !(validViewports as readonly string[]).includes(v)
+    );
+    expect(missing).toEqual([]);
+    // …and the suffix table the flattener writes props from covers them.
+    expect(all.filter(v => !(v in VIEWPORT_SUFFIX))).toEqual([]);
+  });
+
+  it("the shared viewport table is exactly bestax's validViewports", () => {
+    expect(Object.keys(VIEWPORT_SUFFIX).sort()).toEqual(
+      [...(validViewports as readonly string[])].sort()
+    );
+  });
+
+  it('every Bulma 0.6 colour exists in bestax', () => {
+    const missing = BLOOMER.colors.filter(
+      v => !(validColors as readonly string[]).includes(v)
+    );
+    expect(missing).toEqual([]);
+  });
+
+  it('only the two known shades are unsupported', () => {
+    // If this list grows, mapping.ts's SHADE_TODO must grow with it —
+    // otherwise an unsupported shade passes through as a silent type error.
+    const missing = BLOOMER.shades.filter(
+      v => !(validColors as readonly string[]).includes(v)
+    );
+    expect(missing.sort()).toEqual([...KNOWN_UNSUPPORTED_SHADES].sort());
+    const todo = MAPPING.Message.props?.isColor?.valueTodo ?? {};
+    expect(Object.keys(todo).sort()).toEqual([
+      'black',
+      'dark',
+      'light',
+      'white',
+    ]);
+  });
+
+  it('maps every bloomer column fraction and width word', () => {
+    expect(Object.keys(COLUMN_SIZE_MAP).sort()).toEqual(
+      ['1/2', '1/3', '1/4', '2/3', '3/4', 'full'].sort()
+    );
+  });
+});
diff --git a/bestax-migrate/src/sources/bloomer/deps.ts b/bestax-migrate/src/sources/bloomer/deps.ts
new file mode 100644
index 000000000..d1b5bdd73
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/deps.ts
@@ -0,0 +1,144 @@
+/**
+ * package.json migration: swap bloomer for @allxsmith/bestax-bulma, move the
+ * app's own Bulma to v1, and replace the dead node-sass with dart-sass. Pure
+ * data-in/data-out — the CLI owns file IO, and no package manager is ever
+ * invoked (the report tells the user to install).
+ *
+ * bloomer is the react-bulma-components case, not the rbx one: it never
+ * depended on Bulma itself (its README says "npm install bulma"), so there is
+ * no pinned Bulma to free and no extension package to report — the manifest
+ * carries whatever 0.6-era `bulma` the app declared, and that is what gets
+ * bumped. `create-react-class` and `prop-types` were bloomer's dependencies,
+ * not the app's; if they appear here the app declared them for its own
+ * reasons, so they are left alone.
+ */
+
+import type { DependenciesUpdate } from '../../types.js';
+import { isPreV1 } from '../_shared/semver-range.js';
+
+const BESTAX_RANGE = '^5';
+const BULMA_RANGE = '^1.0.4';
+// Bulma v1's sass tree uses `color.channel(…)` — needs dart-sass ≥ 1.79.
+const SASS_RANGE = '^1.79.0';
+
+const DEP_SECTIONS = ['dependencies', 'devDependencies'] as const;
+
+export const updateDependencies: DependenciesUpdate = (
+  filePath,
+  pkg,
+  collector,
+  options
+) => {
+  const changes: string[] = [];
+  const next = pkg as Record<string, Record<string, string> | unknown>;
+  const section = (name: (typeof DEP_SECTIONS)[number]) =>
+    (next[name] ?? undefined) as Record<string, string> | undefined;
+
+  const note = (message: string) => {
+    changes.push(message);
+    collector?.add({ file: filePath, line: null, rule: 'deps', message });
+  };
+
+  // bloomer goes away entirely.
+  let removedSource = false;
+  for (const name of DEP_SECTIONS) {
+    const deps = section(name);
+    if (deps && 'bloomer' in deps) {
+      delete deps.bloomer;
+      removedSource = true;
+      note(`removed bloomer from ${name}`);
+    }
+  }
+
+  // The transform deliberately RETAINS imports for components with no bestax
+  // equivalent (Tile, the Bulma 0.4 Nav family) so a partially migrated app
+  // still runs. Removing the package from the manifest strands exactly those
+  // imports once the user runs the install the report asks for, so say so
+  // rather than letting them find out at build time.
+  if (removedSource && options.sourceStillImported) {
+    collector?.add({
+      file: filePath,
+      line: null,
+      rule: 'deps',
+      message:
+        'bloomer was removed from package.json, but some files still import it for components with no bestax equivalent — resolve those `TODO(bestax-migrate)` imports before installing, or re-add bloomer until you have',
+    });
+  }
+
+  // @allxsmith/bestax-bulma comes in (runtime dependency).
+  const dependencies = (next.dependencies ??= {}) as Record<string, string>;
+  if (
+    !dependencies['@allxsmith/bestax-bulma'] &&
+    !section('devDependencies')?.['@allxsmith/bestax-bulma']
+  ) {
+    dependencies['@allxsmith/bestax-bulma'] = BESTAX_RANGE;
+    note(`added @allxsmith/bestax-bulma ${BESTAX_RANGE} to dependencies`);
+  }
+
+  // Bulma: bump a pre-1 range; add only when sources still reference bulma/…
+  // directly (otherwise it arrives transitively via bestax-bulma).
+  let bulmaDeclared = false;
+  for (const name of DEP_SECTIONS) {
+    const deps = section(name);
+    if (deps?.bulma) {
+      bulmaDeclared = true;
+      if (isPreV1(deps.bulma)) {
+        deps.bulma = BULMA_RANGE;
+        note(`bumped bulma to ${BULMA_RANGE} in ${name} (was pre-1.0)`);
+      }
+    }
+  }
+  if (!bulmaDeclared && options.bulmaReferenced) {
+    dependencies.bulma = BULMA_RANGE;
+    note(
+      `added bulma ${BULMA_RANGE} to dependencies (sources import bulma/… directly)`
+    );
+  }
+
+  // bestax-bulma requires React 18/19; bloomer peer-depended on React ^16.2.
+  // Report only — a React major upgrade is the app's own migration step.
+  for (const name of DEP_SECTIONS) {
+    const range = section(name)?.react;
+    if (range && /^[~^]?(?:[0-9]|1[0-7])(?:[.x]|$)/.test(range.trim())) {
+      collector?.add({
+        file: filePath,
+        line: null,
+        rule: 'peer-deps',
+        message: `react ${range} predates bestax-bulma's peer range (^18 || ^19) — upgrade react and react-dom to 18 or 19 before installing`,
+      });
+    }
+  }
+
+  // Font Awesome older than 6 conflicts with bestax-bulma's optional peer
+  // range and makes `npm install` fail with ERESOLVE. Report only — icon
+  // names change across FA majors, so upgrading is the app's decision. (A
+  // bloomer-era app more often loads Font Awesome 4 from a CDN <link>, which
+  // no manifest pass can see; the Icon conversion flags those in the code.)
+  for (const name of DEP_SECTIONS) {
+    const range = section(name)?.['@fortawesome/fontawesome-free'];
+    if (range && /^[~^]?[0-5](?:[.x]|$)/.test(range.trim())) {
+      collector?.add({
+        file: filePath,
+        line: null,
+        rule: 'peer-deps',
+        message: `@fortawesome/fontawesome-free ${range} predates bestax-bulma's optional peer range (^6.7.2 || ^7.0.0) — upgrade it, or install with \`npm install --legacy-peer-deps\``,
+      });
+    }
+  }
+
+  // node-sass is dead; dart-sass replaces it in the same section.
+  for (const name of DEP_SECTIONS) {
+    const deps = section(name);
+    if (deps && 'node-sass' in deps) {
+      delete deps['node-sass'];
+      note(`removed node-sass from ${name}`);
+      const sassDeclared = DEP_SECTIONS.some(s => section(s)?.sass);
+      if (!sassDeclared) {
+        deps.sass = SASS_RANGE;
+        note(`added sass ${SASS_RANGE} to ${name} (replaces node-sass)`);
+      }
+    }
+  }
+
+  return changes.length > 0 ? (next as Record<string, unknown>) : null;
+};
diff --git a/bestax-migrate/src/sources/bloomer/index.ts b/bestax-migrate/src/sources/bloomer/index.ts
new file mode 100644
index 000000000..4d65d642d
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/index.ts
@@ -0,0 +1,12 @@
+import type { MigrationSource } from '../../types.js';
+import transform from './transform.js';
+import { transformStyles } from './styles.js';
+import { updateDependencies } from './deps.js';
+
+export const bloomer: MigrationSource = {
+  name: 'bloomer',
+  label: 'bloomer (0.6) → @allxsmith/bestax-bulma',
+  transform,
+  transformStyles,
+  updateDependencies,
+};
diff --git a/bestax-migrate/src/sources/bloomer/mapping.ts b/bestax-migrate/src/sources/bloomer/mapping.ts
new file mode 100644
index 000000000..8ae4f978e
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/mapping.ts
@@ -0,0 +1,757 @@
+/**
+ * bloomer (0.6) → @allxsmith/bestax-bulma mapping tables.
+ *
+ * Data only — no AST work. `MAPPING` is the single source of truth for what
+ * the transform does with each bloomer export; `BLOOMER_EXPORTS` vendors
+ * bloomer's public surface so `mapping-coverage.test.ts` can close it in both
+ * directions.
+ *
+ * bloomer's shape is the reverse of rbx's: every export is a FLAT name
+ * (`CardHeaderTitle`, `NavbarItem`), while bestax groups the same components
+ * into dotted compounds (`Card.Header.Title`, `Navbar.Item`). So most rows
+ * here rename a flat identifier onto a dotted target — a shape the rename and
+ * value-reference passes already build, since the first segment of a dotted
+ * target is what gets imported.
+ *
+ * Its modifier vocabulary is already bestax's for the booleans (`isActive`,
+ * `isLoading`, `isOutlined`, …) — those are `{}` entries, present so the
+ * universal pass never sees them. What differs is the value-carrying props:
+ * `isColor` → `color`, `isSize` → `size` (claimed per component, because its
+ * type differs per component: numeric on Title/Subtitle, sizes-or-fractions on
+ * Column, `'128x128'` on Image, `'large'` elsewhere), `isAlign` → whatever
+ * the target calls it, and `tag` → `as` where bestax declares one.
+ */
+
+import type { ComponentMapping, PropAction } from '../../types.js';
+
+const DOCS = 'https://bestax.io/docs';
+
+/**
+ * The two Bulma 0.6 shades bestax's `validColors` does not carry. Every other
+ * colour and shade name of that era exists in bestax verbatim.
+ */
+const SHADE_TODO = {
+  'white-ter': `\`white-ter\` is not a bestax colour; use \`white\` or a custom class (${DOCS}/api/helpers/usebulmaclasses)`,
+  'white-bis': `\`white-bis\` is not a bestax colour; use \`white\` or a custom class (${DOCS}/api/helpers/usebulmaclasses)`,
+};
+
+/**
+ * `tag` is on nearly every bloomer component (`Bulma.Tag`, rendered through
+ * `React.createElement(tag, …)`), but bestax declares `as` on only some
+ * components, several of them constrained to a literal union (`Footer` is
+ * `'footer' | 'div'`). So the default is a TODO, and the components whose
+ * bestax counterpart really does accept `as` opt in with `TAG_AS` in their
+ * own prop map, which runs first and wins. A literal outside the target's
+ * union still surfaces — as a type error the user can see, not a rewrite.
+ */
+const TAG_TODO: PropAction = {
+  todo: `bloomer's \`tag\` renders a different HTML element; bestax declares \`as\` on only some components, and this is not one of them — render the tag directly or restructure (${DOCS}/api)`,
+};
+const TAG_AS: PropAction = { rename: 'as' };
+
+/**
+ * `render` (`Bulma.Render`) let a component hand its computed props to a
+ * custom renderer. bestax has no render-prop escape hatch, and there is no
+ * way to rewrite a function value into markup, so it is always a TODO.
+ */
+export const RENDER_TODO: PropAction = {
+  todo: `bloomer's \`render\` prop injected the computed props into your own renderer; bestax has no render-prop escape hatch — render the markup directly (\`useBulmaClasses\` yields the helper classes) or wrap the component (${DOCS}/api/helpers/usebulmaclasses)`,
+};
+
+/**
+ * `isFullWidth` is universal in bloomer (via `withHelpersModifiers`), but
+ * Bulma's `is-fullwidth` only means something on a handful of elements, and
+ * bestax declares `isFullWidth` on exactly those: Button, Select, Table and
+ * Tabs opt in with `FULLWIDTH_OK`.
+ */
+const FULLWIDTH_TODO: PropAction = {
+  todo: 'bestax declares `isFullWidth` on Button, Select, Table and Tabs only, and Bulma\'s `is-fullwidth` has no effect elsewhere — drop it, or add className="is-fullwidth" if your own CSS relied on the class',
+};
+const FULLWIDTH_OK: PropAction = {};
+
+const size: PropAction = { rename: 'size' };
+const color: PropAction = { rename: 'color' };
+const active: PropAction = { rename: 'active' };
+
+/** A Bulma modifier bestax has no prop for on this target; the class still exists in v1. */
+const classTodo = (cls: string, target: string): PropAction => ({
+  todo: `bestax \`${target}\` has no prop for Bulma's \`${cls}\`; add className="${cls}"`,
+});
+
+const NAV_TODO = (name: string): ComponentMapping => ({
+  status: 'todo',
+  todo: `\`${name}\` is Bulma 0.4's \`.nav\`, which Bulma removed in 0.5 (bloomer kept the component); rebuild it with bestax's \`Navbar\` — \`Nav\` → \`Navbar\`, \`NavLeft\`/\`NavRight\` → \`Navbar.Start\`/\`Navbar.End\`, \`NavItem\` → \`Navbar.Item\`, \`NavToggle\` → \`Navbar.Burger\` (${DOCS}/api/components/navbar)`,
+});
+
+/**
+ * bestax's `Message.color` is the six semantic colours; bloomer's `isColor`
+ * is any string. The Bulma 0.6 colours outside that union are named so they
+ * become a TODO instead of a silent type error.
+ */
+const MESSAGE_COLOR_TODO = Object.fromEntries(
+  ['white', 'black', 'light', 'dark'].map(c => [
+    c,
+    `bestax \`Message\` takes only the semantic colours (primary … danger); use \`bgColor="${c}"\` or a custom class`,
+  ])
+);
+
+/**
+ * Helper props `withHelpersModifiers` mixes into EVERY bloomer component.
+ * Applied after each component's own prop map, to whatever attributes are
+ * left.
+ *
+ * `isDisplay` and `isHidden` are deliberately absent: they are consumed
+ * structurally by responsive.ts before this pass runs (their values are
+ * strings, arrays or objects that flatten to several bestax props), and
+ * bestax has no prop of either name, so a leftover would be an
+ * excess-property type error rather than a TODO.
+ */
+export const UNIVERSAL_PROPS: Record<string, PropAction> = {
+  // --- typography ----------------------------------------------------------
+  hasTextAlign: { rename: 'textAlign' }, // left | right | centered — same union
+  hasTextColor: { rename: 'textColor', valueTodo: SHADE_TODO },
+
+  // --- float / overlay -----------------------------------------------------
+  isPulled: { rename: 'float' }, // left | right — same union
+  isClearfix: { booleanToProp: { name: 'clearfix' } },
+  isOverlay: { booleanToProp: { name: 'overlay' } },
+  isUnselectable: {
+    booleanToProp: { name: 'interaction', value: 'unselectable' },
+  },
+
+  // --- spacing: bestax expresses the `is-*less` helpers as `m`/`p` --------
+  isMarginless: { booleanToProp: { name: 'm', value: '0' } },
+  isPaddingless: { booleanToProp: { name: 'p', value: '0' } },
+
+  // Per-component maps override these where bestax has the prop.
+  isFullWidth: FULLWIDTH_TODO,
+  tag: TAG_TODO,
+  render: RENDER_TODO,
+};
+
+/**
+ * The helper props responsive.ts consumes. Named here so the plain-element
+ * path can strip them from an element that is becoming intrinsic HTML: the
+ * structural pass runs before the rename step, which a `replaced: true`
+ * special skips.
+ */
+export const RESPONSIVE_PROPS: Record<string, string | null> = {
+  isDisplay: null,
+  isHidden: null,
+};
+
+/** Bloomer's fraction and width spellings → bestax's `BulmaColumnSize` names. */
+export const COLUMN_SIZE_MAP: Record<string, string> = {
+  '1/2': 'half',
+  '1/3': 'one-third',
+  '1/4': 'one-quarter',
+  '2/3': 'two-thirds',
+  '3/4': 'three-quarters',
+  full: 'full',
+};
+
+export const MAPPING: Record<string, ComponentMapping> = {
+  // ---- grid ---------------------------------------------------------------
+  Columns: {
+    status: 'mapped',
+    target: 'Columns',
+    props: {
+      isMobile: {},
+      isDesktop: {},
+      isGapless: {},
+      isMultiline: {},
+      isVCentered: {},
+      isCentered: {},
+      isGrid: {
+        todo: 'Bulma removed `columns.is-grid` in 0.5; bestax `Columns` has no equivalent — use `isMultiline` with sized Columns, or the Grid component',
+      },
+    },
+  },
+  // `isSize` / `isOffset` (numbers, fractions, or a per-breakpoint object)
+  // are flattened by responsive.ts, which the `column` special opts into.
+  Column: { status: 'mapped', target: 'Column', special: 'column' },
+  Tile: {
+    status: 'todo',
+    todo: `Bulma v1 replaced tiles with the Grid/Cell components — see ${DOCS}/api/grid and the migration guide ${DOCS}/guides/getting-started/migration/bulma-0-9-to-1`,
+  },
+
+  // ---- elements -----------------------------------------------------------
+  Box: { status: 'mapped', target: 'Box' },
+  Button: {
+    status: 'mapped',
+    target: 'Button',
+    // `isLink` and `href` are handled by the special: the first is a colour
+    // that may collide with `isColor`, the second selects the anchor form.
+    special: 'button',
+    props: {
+      isColor: color,
+      isSize: size,
+      isOutlined: {},
+      isInverted: {},
+      isStatic: {},
+      isActive: {},
+      isHovered: {},
+      isFocused: {},
+      isLoading: {},
+      isFullWidth: FULLWIDTH_OK,
+    },
+  },
+  Content: { status: 'mapped', target: 'Content', props: { isSize: size } },
+  Delete: {
+    status: 'mapped',
+    target: 'Delete',
+    props: {
+      isSize: size,
+      href: {
+        todo: 'bestax `Delete` renders a <button> and has no anchor form; wrap it in an <a>, or handle the navigation in `onClick`',
+      },
+    },
+  },
+  Icon: {
+    status: 'partial',
+    target: 'Icon',
+    special: 'icon',
+    props: { isSize: size },
+  },
+  Image: { status: 'mapped', target: 'Image', special: 'image' },
+  Notification: {
+    status: 'mapped',
+    target: 'Notification',
+    props: { isColor: color },
+  },
+  Progress: {
+    status: 'mapped',
+    target: 'Progress',
+    props: { isColor: color, isSize: size },
+  },
+  Table: {
+    status: 'mapped',
+    target: 'Table',
+    props: {
+      isBordered: {},
+      isStriped: {},
+      isNarrow: {},
+      isFullWidth: FULLWIDTH_OK,
+    },
+  },
+  Tag: {
+    status: 'mapped',
+    target: 'Tag',
+    props: { isColor: color, isSize: size },
+  },
+  // bestax's `Title.size` accepts the numbers 1–6 as well as their string
+  // forms, so bloomer's numeric `isSize` carries over untouched.
+  Title: {
+    status: 'mapped',
+    target: 'Title',
+    props: { isSize: size, isSpaced: {}, tag: TAG_AS },
+  },
+  Subtitle: {
+    status: 'mapped',
+    target: 'SubTitle',
+    props: {
+      isSize: size,
+      isSpaced: classTodo('is-spaced', 'SubTitle'),
+      tag: TAG_AS,
+    },
+  },
+  // bloomer's Heading is Bulma's `.heading` label, whose styles Bulma v1 no
+  // longer ships — bestax has no component for it.
+  Heading: { status: 'partial', special: 'heading' },
+
+  // ---- form ---------------------------------------------------------------
+  Checkbox: { status: 'mapped', target: 'Checkbox' },
+  Radio: { status: 'mapped', target: 'Radio' },
+  Control: {
+    status: 'mapped',
+    target: 'Control',
+    special: 'control-icons',
+    props: { isExpanded: {}, isLoading: {}, tag: TAG_AS },
+  },
+  Help: { status: 'mapped', special: 'help' },
+  Input: {
+    status: 'mapped',
+    target: 'Input',
+    props: {
+      isColor: color,
+      isSize: size,
+      isHovered: {},
+      isFocused: {},
+      isActive: classTodo('is-active', 'Input'),
+    },
+  },
+  Label: { status: 'mapped', special: 'label' },
+  Select: {
+    status: 'mapped',
+    target: 'Select',
+    props: {
+      isColor: color,
+      isSize: size,
+      isLoading: {},
+      isFullWidth: FULLWIDTH_OK,
+    },
+  },
+  TextArea: {
+    status: 'mapped',
+    target: 'TextArea',
+    props: { isSize: size, isActive: {}, isHovered: {}, isFocused: {} },
+  },
+  Field: {
+    status: 'mapped',
+    target: 'Field',
+    props: {
+      // `boolean | 'right' | 'centered'` on both sides.
+      isGrouped: { rename: 'grouped' },
+      hasAddons: {
+        valueTodo: {
+          fullwidth:
+            'bestax `Field.hasAddons` takes `true`, "centered" or "right"; Bulma v1 keeps `has-addons-fullwidth`, so use `hasAddons` plus className="has-addons-fullwidth"',
+        },
+      },
+      isHorizontal: { rename: 'horizontal' },
+    },
+  },
+  FieldBody: { status: 'mapped', target: 'Field.Body' },
+  FieldLabel: {
+    status: 'mapped',
+    target: 'Field.Label',
+    props: {
+      isSize: size,
+      isNormal: { booleanToProp: { name: 'size', value: 'normal' } },
+    },
+  },
+
+  // ---- breadcrumb ---------------------------------------------------------
+  Breadcrumb: {
+    status: 'mapped',
+    target: 'Breadcrumb',
+    props: {
+      hasSeparator: { rename: 'separator' },
+      isAlign: { rename: 'alignment' }, // centered | right — same union
+      isSize: size,
+    },
+  },
+  // bestax's Breadcrumb renders the <ul> and takes plain <li> children.
+  BreadcrumbItem: { status: 'mapped', special: 'breadcrumb-item' },
+
+  // ---- card ---------------------------------------------------------------
+  Card: { status: 'mapped', target: 'Card' },
+  CardImage: { status: 'mapped', target: 'Card.Image' },
+  CardContent: { status: 'mapped', target: 'Card.Content' },
+  CardHeader: { status: 'mapped', target: 'Card.Header' },
+  CardHeaderTitle: { status: 'mapped', target: 'Card.Header.Title' },
+  CardHeaderIcon: {
+    status: 'mapped',
+    target: 'Card.Header.Icon',
+    props: {
+      href: {
+        todo: 'bestax `Card.Header.Icon` renders a <button>; put an <a> inside it, or handle the navigation in `onClick`',
+      },
+    },
+  },
+  CardFooter: { status: 'mapped', target: 'Card.Footer' },
+  CardFooterItem: {
+    status: 'mapped',
+    target: 'Card.FooterItem',
+    props: {
+      href: {
+        todo: 'bestax `Card.FooterItem` renders a <span> with no anchor form; put an <a> inside it',
+      },
+    },
+  },
+
+  // ---- dropdown -----------------------------------------------------------
+  // bestax's Dropdown takes a `label` and renders its own trigger and menu, so
+  // bloomer's trigger/menu/content wrappers have nothing to become.
+  Dropdown: {
+    status: 'partial',
+    target: 'Dropdown',
+    special: 'dropdown',
+    props: {
+      isActive: active,
+      isHoverable: { rename: 'hoverable' },
+      isAlign: { valueMap: { right: 'right' }, valueToProp: true },
+    },
+  },
+  DropdownTrigger: {
+    status: 'todo',
+    todo: 'bestax `Dropdown` renders its own trigger; move this content into its `label` prop and drop the wrapper',
+  },
+  DropdownMenu: {
+    status: 'todo',
+    todo: 'bestax `Dropdown` renders its own menu; drop this wrapper and keep the `<Dropdown.Item>`s as direct children',
+  },
+  DropdownContent: {
+    status: 'todo',
+    todo: 'bestax `Dropdown` renders its own menu content; drop this wrapper and keep the `<Dropdown.Item>`s as direct children',
+  },
+  DropdownItem: {
+    status: 'mapped',
+    target: 'Dropdown.Item',
+    special: 'anchor-when-href',
+    props: { isActive: active, tag: TAG_AS },
+  },
+  DropdownDivider: { status: 'mapped', target: 'Dropdown.Divider' },
+
+  // ---- level / media / menu / message ------------------------------------
+  Level: { status: 'mapped', target: 'Level', props: { isMobile: {} } },
+  LevelItem: {
+    status: 'mapped',
+    target: 'Level.Item',
+    special: 'level-item',
+    props: { isFlexible: classTodo('is-flexible', 'Level.Item'), tag: TAG_AS },
+  },
+  LevelLeft: { status: 'mapped', target: 'Level.Left' },
+  LevelRight: { status: 'mapped', target: 'Level.Right' },
+  Media: {
+    status: 'mapped',
+    target: 'Media',
+    props: { isSize: classTodo('is-large', 'Media'), tag: TAG_AS },
+  },
+  MediaContent: { status: 'mapped', target: 'Media.Content' },
+  MediaLeft: { status: 'mapped', target: 'Media.Left', props: { tag: TAG_AS } },
+  MediaRight: { status: 'mapped', target: 'Media.Right' },
+  Menu: { status: 'mapped', target: 'Menu' },
+  MenuLabel: { status: 'mapped', target: 'Menu.Label' },
+  MenuList: { status: 'mapped', target: 'Menu.List' },
+  MenuLink: {
+    status: 'mapped',
+    target: 'Menu.Item',
+    special: 'anchor-when-href',
+    props: { isActive: active, tag: TAG_AS },
+  },
+  Message: {
+    status: 'mapped',
+    target: 'Message',
+    props: { isColor: { rename: 'color', valueTodo: MESSAGE_COLOR_TODO } },
+  },
+  MessageHeader: { status: 'mapped', target: 'Message.Header' },
+  MessageBody: { status: 'mapped', target: 'Message.Body' },
+
+  // ---- modal --------------------------------------------------------------
+  Modal: {
+    status: 'partial',
+    target: 'Modal',
+    special: 'modal',
+    props: { isActive: active },
+  },
+  ModalBackground: { status: 'mapped', target: 'Modal.Background' },
+  ModalContent: { status: 'mapped', target: 'Modal.Content' },
+  ModalClose: {
+    status: 'mapped',
+    target: 'Modal.Close',
+    props: { isSize: size },
+  },
+  ModalCard: { status: 'mapped', target: 'Modal.Card' },
+  ModalCardHeader: { status: 'mapped', target: 'Modal.Card.Head' },
+  ModalCardTitle: { status: 'mapped', target: 'Modal.Card.Title' },
+  ModalCardBody: { status: 'mapped', target: 'Modal.Card.Body' },
+  ModalCardFooter: { status: 'mapped', target: 'Modal.Card.Foot' },
+
+  // ---- nav (Bulma 0.4) ----------------------------------------------------
+  Nav: NAV_TODO('Nav'),
+  NavLeft: NAV_TODO('NavLeft'),
+  NavCenter: NAV_TODO('NavCenter'),
+  NavRight: NAV_TODO('NavRight'),
+  NavToggle: NAV_TODO('NavToggle'),
+  NavItem: NAV_TODO('NavItem'),
+
+  // ---- navbar -------------------------------------------------------------
+  Navbar: {
+    status: 'mapped',
+    target: 'Navbar',
+    props: { isTransparent: { rename: 'transparent' } },
+  },
+  NavbarBrand: { status: 'mapped', target: 'Navbar.Brand' },
+  NavbarBurger: {
+    status: 'mapped',
+    target: 'Navbar.Burger',
+    props: { isActive: active },
+  },
+  NavbarMenu: {
+    status: 'mapped',
+    target: 'Navbar.Menu',
+    props: { isActive: active },
+  },
+  NavbarStart: { status: 'mapped', target: 'Navbar.Start' },
+  NavbarEnd: { status: 'mapped', target: 'Navbar.End' },
+  // `hasDropdown` picks between Navbar.Item and the Navbar.Dropdown container.
+  NavbarItem: {
+    status: 'mapped',
+    special: 'navbar-item',
+    props: { isActive: active, tag: TAG_AS },
+  },
+  NavbarLink: {
+    status: 'mapped',
+    target: 'Navbar.Link',
+    props: { isActive: classTodo('is-active', 'Navbar.Link'), tag: TAG_AS },
+  },
+  NavbarDropdown: { status: 'mapped', special: 'navbar-dropdown' },
+  NavbarDivider: {
+    status: 'mapped',
+    target: 'Navbar.Divider',
+    props: { isBoxed: classTodo('is-boxed', 'Navbar.Divider') },
+  },
+
+  // ---- pagination ---------------------------------------------------------
+  Pagination: {
+    status: 'mapped',
+    target: 'Pagination',
+    special: 'pagination',
+    props: { isSize: size },
+  },
+  PageControl: {
+    status: 'mapped',
+    special: 'page-control',
+    props: {
+      isActive: classTodo('is-active', 'Pagination.Previous/Next'),
+      isFocused: classTodo('is-focused', 'Pagination.Previous/Next'),
+    },
+  },
+  PageEllipsis: {
+    status: 'mapped',
+    target: 'Pagination.Ellipsis',
+    props: {
+      isActive: classTodo('is-active', 'Pagination.Ellipsis'),
+      isFocused: classTodo('is-focused', 'Pagination.Ellipsis'),
+    },
+  },
+  // bestax's Pagination.Link and Pagination.Ellipsis render their own <li>.
+  Page: { status: 'mapped', special: 'page' },
+  PageList: { status: 'mapped', target: 'Pagination.List' },
+  PageLink: {
+    status: 'mapped',
+    target: 'Pagination.Link',
+    props: {
+      isCurrent: active, // bestax's `active` renders Bulma's `is-current`
+      isActive: classTodo('is-active', 'Pagination.Link'),
+      isFocused: classTodo('is-focused', 'Pagination.Link'),
+    },
+  },
+
+  // ---- panel --------------------------------------------------------------
+  Panel: { status: 'mapped', target: 'Panel' },
+  PanelHeading: { status: 'mapped', target: 'Panel.Heading' },
+  PanelTabs: { status: 'mapped', target: 'Panel.Tabs' },
+  PanelTab: { status: 'mapped', special: 'panel-tab' },
+  PanelBlock: {
+    status: 'mapped',
+    target: 'Panel.Block',
+    special: 'anchor-when-href',
+    props: {
+      isActive: active,
+      isWrapped: classTodo('is-wrapped', 'Panel.Block'),
+    },
+  },
+  PanelIcon: {
+    status: 'partial',
+    target: 'Panel.Icon',
+    special: 'panel-icon',
+  },
+
+  // ---- tabs ---------------------------------------------------------------
+  Tabs: {
+    status: 'mapped',
+    target: 'Tabs',
+    props: {
+      isAlign: { rename: 'align' }, // left | centered | right — same union
+      isSize: size,
+      isBoxed: { rename: 'boxed' },
+      isToggle: { rename: 'toggle' },
+      isFullWidth: FULLWIDTH_OK,
+    },
+  },
+  TabList: {
+    status: 'mapped',
+    target: 'Tabs.List',
+    props: {
+      isAlign: {
+        todo: "Bulma aligns tabs on the `.tabs` container, not the list (bloomer's `is-center` on the <ul> did nothing); set `align` on the `<Tabs>` instead",
+      },
+    },
+  },
+  // bestax's `Tabs.Tab` is the controlled API and requires an `index`;
+  // `Tabs.Item` is the plain <li> that bloomer's Tab actually is.
+  Tab: { status: 'mapped', target: 'Tabs.Item', props: { isActive: active } },
+  TabLink: { status: 'mapped', special: 'tab-link' },
+
+  // ---- layout -------------------------------------------------------------
+  Container: {
+    status: 'mapped',
+    target: 'Container',
+    props: { isFluid: { rename: 'fluid' } },
+  },
+  Footer: { status: 'mapped', target: 'Footer', props: { tag: TAG_AS } },
+  Section: { status: 'mapped', target: 'Section', props: { isSize: size } },
+  Hero: {
+    status: 'mapped',
+    target: 'Hero',
+    props: {
+      isColor: color,
+      isSize: size,
+      isFullHeight: { booleanToProp: { name: 'size', value: 'fullheight' } },
+      isHalfHeight: classTodo('is-halfheight', 'Hero'),
+      isBold: classTodo('is-bold', 'Hero'),
+    },
+  },
+  HeroHeader: { status: 'mapped', target: 'Hero.Head' },
+  HeroBody: { status: 'mapped', target: 'Hero.Body' },
+  HeroVideo: { status: 'mapped', special: 'hero-video' },
+  HeroFooter: { status: 'mapped', target: 'Hero.Foot' },
+
+  // ---- the helper HOC -----------------------------------------------------
+  withHelpersModifiers: {
+    status: 'todo',
+    todo: `\`withHelpersModifiers\` wrapped a component so it accepted bloomer's helper props; every bestax component takes the same helpers natively, and a custom component can call \`useBulmaClasses\` itself (${DOCS}/api/helpers/usebulmaclasses)`,
+  },
+};
+
+/**
+ * bloomer's public export surface, vendored from `src/index.ts` at the SHA
+ * `scripts/validate-corpus-bloomer.mjs` pins, in that file's order. Every
+ * export is flat, so no entry carries sub-paths; the shape matches the other
+ * sources' tables so the coverage and doc tests port unchanged.
+ *
+ * `mapping-coverage.test.ts` walks this against `MAPPING` in both directions,
+ * so bloomer coverage cannot silently regress and `MAPPING` cannot grow an
+ * entry for something bloomer never exported.
+ */
+export const BLOOMER_EXPORTS: Record<string, string[]> = Object.fromEntries(
+  [
+    // grid
+    'Columns',
+    'Column',
+    'Tile',
+    // elements
+    'Box',
+    'Button',
+    'Content',
+    'Delete',
+    'Icon',
+    'Image',
+    'Notification',
+    'Progress',
+    'Table',
+    'Tag',
+    'Title',
+    'Subtitle',
+    'Heading',
+    // form
+    'Checkbox',
+    'Control',
+    'Help',
+    'Input',
+    'Label',
+    'Radio',
+    'Select',
+    'TextArea',
+    'Field',
+    'FieldBody',
+    'FieldLabel',
+    // breadcrumb
+    'Breadcrumb',
+    'BreadcrumbItem',
+    // card
+    'Card',
+    'CardImage',
+    'CardContent',
+    'CardHeader',
+    'CardHeaderTitle',
+    'CardHeaderIcon',
+    'CardFooter',
+    'CardFooterItem',
+    // dropdown
+    'Dropdown',
+    'DropdownContent',
+    'DropdownDivider',
+    'DropdownItem',
+    'DropdownMenu',
+    'DropdownTrigger',
+    // level
+    'Level',
+    'LevelItem',
+    'LevelLeft',
+    'LevelRight',
+    // media
+    'Media',
+    'MediaContent',
+    'MediaLeft',
+    'MediaRight',
+    // menu
+    'Menu',
+    'MenuLabel',
+    'MenuList',
+    'MenuLink',
+    // message
+    'Message',
+    'MessageHeader',
+    'MessageBody',
+    // modal
+    'Modal',
+    'ModalBackground',
+    'ModalContent',
+    'ModalClose',
+    'ModalCard',
+    'ModalCardHeader',
+    'ModalCardTitle',
+    'ModalCardBody',
+    'ModalCardFooter',
+    // nav
+    'Nav',
+    'NavLeft',
+    'NavCenter',
+    'NavRight',
+    'NavToggle',
+    'NavItem',
+    // navbar
+    'Navbar',
+    'NavbarBrand',
+    'NavbarBurger',
+    'NavbarMenu',
+    'NavbarStart',
+    'NavbarEnd',
+    'NavbarItem',
+    'NavbarLink',
+    'NavbarDropdown',
+    'NavbarDivider',
+    // pagination
+    'Pagination',
+    'PageControl',
+    'PageEllipsis',
+    'Page',
+    'PageList',
+    'PageLink',
+    // panel
+    'Panel',
+    'PanelHeading',
+    'PanelTabs',
+    'PanelTab',
+    'PanelBlock',
+    'PanelIcon',
+    // tabs
+    'Tabs',
+    'Tab',
+    'TabList',
+    'TabLink',
+    // layout
+    'Container',
+    'Footer',
+    'Section',
+    'Hero',
+    'HeroHeader',
+    'HeroBody',
+    'HeroVideo',
+    'HeroFooter',
+    // the HOC
+    'withHelpersModifiers',
+  ].map(name => [name, []])
+);
+
+/** Walk a dotted component path through `MAPPING`. */
+export function resolveMapping(path: string[]): ComponentMapping | undefined {
+  let current: ComponentMapping | undefined = MAPPING[path[0]];
+  for (const segment of path.slice(1)) {
+    current = current?.subs?.[segment];
+  }
+  return current;
+}
diff --git a/bestax-migrate/src/sources/bloomer/responsive.ts b/bestax-migrate/src/sources/bloomer/responsive.ts
new file mode 100644
index 000000000..0776c4f51
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/responsive.ts
@@ -0,0 +1,359 @@
+/**
+ * Flattens bloomer's three-shape helper props into bestax-bulma's flat
+ * per-viewport props. Every bloomer component takes these (they come from the
+ * `withHelpersModifiers` HOC), and none of them has a bestax prop of the same
+ * name — so the attribute is always removed, whatever could be converted, and
+ * each entry that could not be carried over gets its own TODO. A leftover
+ * would not be a harmless no-op: bestax has no `isDisplay`, so it is an
+ * excess-property type error on every migrated component.
+ *
+ *   1. `isDisplay` — a display, optionally suffixed with a viewport; an array
+ *      of those; or an object keyed by display whose values are viewports:
+ *        <Box isDisplay="flex-tablet" />            → displayTablet="flex"
+ *        <Box isDisplay={['flex', 'block-mobile']} /> → display="flex" displayMobile="block"
+ *        <Box isDisplay={{ flex: ['default', 'desktop'] }} />
+ *                                                   → display="flex" displayDesktop="flex"
+ *   2. `isHidden` — a boolean, a viewport, or an array of viewports:
+ *        <Box isHidden />                → visibility="hidden"
+ *        <Box isHidden="touch" />        → visibilityTouch="hidden"
+ *        <Box isHidden={['mobile', 'desktop-only']} />
+ *                                        → visibilityMobile="hidden" visibilityDesktopOnly="hidden"
+ *   3. Column `isSize` / `isOffset` — a number, a fraction, a width word, or
+ *      an object keyed by breakpoint:
+ *        <Column isSize="1/2" isOffset={2} />         → size="half" offset={2}
+ *        <Column isSize={{ default: 4, mobile: 8 }} /> → size={4} sizeMobile={8}
+ *        <Column isSize="narrow" />                   → isNarrow
+ *
+ * bestax declares every one of Bulma's nine viewports for `display*` and
+ * `visibility*` (including `-only` and `touch`), so those convert one-to-one.
+ * Column sizes exist for the five breakpoints Bulma sizes columns at, plus
+ * `isNarrowTouch` — `sizeTouch`/`offsetTouch` do not exist and become TODOs.
+ */
+
+import type { ASTPath } from 'jscodeshift';
+import { COLUMN_SIZE_MAP } from './mapping.js';
+import { VIEWPORT_SUFFIX } from '../_shared/viewports.js';
+import {
+  addTodo,
+  arrayExpressionOf,
+  attrValue,
+  findAttr,
+  literalOf,
+  literalValueOf,
+  makeAttr,
+  objectExpressionOf,
+  propKey,
+  removeAttr,
+  type TransformContext,
+} from '../_shared/jsx-utils.js';
+import { addAttrOnce, addConverted } from '../_shared/props.js';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+export type ResponsiveKind = 'generic' | 'column';
+
+/** Which specials opt their element into the extra breakpoint shapes. */
+export const RESPONSIVE_KINDS: Record<string, ResponsiveKind> = {
+  column: 'column',
+};
+
+/** Longest alternatives first, so `inline-block` is not read as `inline`. */
+const DISPLAY_RE =
+  /^(inline-block|inline-flex|inline|flex|block)(?:-(mobile|tablet-only|tablet|touch|desktop-only|desktop|widescreen-only|widescreen|fullhd))?$/;
+
+const DISPLAYS = new Set([
+  'flex',
+  'block',
+  'inline',
+  'inline-block',
+  'inline-flex',
+]);
+
+/** The breakpoints bestax's `size*`/`offset*` Column props exist for. */
+const COLUMN_VIEWPORTS: Record<string, string> = {
+  mobile: 'Mobile',
+  tablet: 'Tablet',
+  desktop: 'Desktop',
+  widescreen: 'Widescreen',
+  fullhd: 'Fullhd',
+};
+
+/** Non-whitespace children of an array literal, or null for a non-array. */
+function arrayItems(node: any): any[] | null {
+  if (node?.type !== 'ArrayExpression') return null;
+  return (node.elements ?? []).filter((e: any) => e != null);
+}
+
+// ---- 1. isDisplay ----------------------------------------------------------
+
+function flattenDisplay(
+  ctx: TransformContext,
+  path: ASTPath<any>,
+  element: any
+): void {
+  const attr = findAttr(element, 'isDisplay');
+  if (!attr) return;
+  const { j } = ctx;
+
+  const todo = (message: string) =>
+    addTodo(ctx, path, 'prop:isDisplay', message);
+
+  /** `display` + optional viewport → `display<Suffix>="…"`. */
+  const emit = (display: string, viewport: string | undefined): void => {
+    if (viewport === undefined || viewport === 'default') {
+      addConverted(ctx, path, element, 'isDisplay', 'display', display);
+      return;
+    }
+    const suffix = VIEWPORT_SUFFIX[viewport];
+    if (suffix === undefined) {
+      todo(
+        `\`isDisplay\` names \`${viewport}\`, which is not a Bulma viewport; set the matching \`display*\` prop by hand`
+      );
+      return;
+    }
+    addConverted(ctx, path, element, 'isDisplay', `display${suffix}`, display);
+  };
+
+  /** A `'flex-tablet'`-style string. */
+  const fromString = (value: string): void => {
+    const m = DISPLAY_RE.exec(value);
+    if (!m) {
+      todo(
+        `\`isDisplay="${value}"\` is not a display bloomer's helpers produce; set \`display\` (and a viewport suffix) by hand`
+      );
+      return;
+    }
+    emit(m[1], m[2]);
+  };
+
+  /** One node inside an array or object form. */
+  const fromNode = (node: any, describe: string, display?: string): void => {
+    const literal = literalOf(node);
+    if (typeof literal === 'string') {
+      if (display) emit(display, literal);
+      else fromString(literal);
+      return;
+    }
+    todo(
+      `\`isDisplay\` ${describe} has a dynamic value; set the matching \`display*\` prop conditionally by hand`
+    );
+  };
+
+  const value = attr.value;
+  const literal = literalValueOf(attr);
+  if (literal.kind === 'string') {
+    fromString(literal.value);
+  } else if (arrayExpressionOf(value)) {
+    for (const item of arrayItems(arrayExpressionOf(value)) ?? []) {
+      fromNode(item, 'entry');
+    }
+  } else if (objectExpressionOf(value)) {
+    for (const prop of objectExpressionOf(value).properties) {
+      const key = propKey(prop);
+      if (!key || !DISPLAYS.has(key)) {
+        todo(
+          `\`isDisplay.${String(key)}\` is not a display bloomer's helpers know; convert it by hand`
+        );
+        continue;
+      }
+      const items = arrayItems(prop.value);
+      if (items) {
+        for (const item of items) fromNode(item, `\`${key}\` entry`, key);
+      } else {
+        fromNode(prop.value, `\`${key}\``, key);
+      }
+    }
+  } else {
+    todo(
+      'dropped `isDisplay`: it must be a string, array or object literal to flatten to bestax `display*` props, and bestax has no `isDisplay` — reapply it by hand'
+    );
+  }
+
+  removeAttr(element, attr);
+  ctx.dirty = true;
+  void j;
+}
+
+// ---- 2. isHidden -----------------------------------------------------------
+
+function flattenHidden(
+  ctx: TransformContext,
+  path: ASTPath<any>,
+  element: any
+): void {
+  const attr = findAttr(element, 'isHidden');
+  if (!attr) return;
+
+  const todo = (message: string) =>
+    addTodo(ctx, path, 'prop:isHidden', message);
+
+  const emit = (viewport: string): void => {
+    const suffix = VIEWPORT_SUFFIX[viewport];
+    if (suffix === undefined) {
+      todo(
+        `\`isHidden="${viewport}"\` is not a Bulma viewport; set the matching \`visibility*="hidden"\` prop by hand`
+      );
+      return;
+    }
+    addConverted(
+      ctx,
+      path,
+      element,
+      'isHidden',
+      `visibility${suffix}`,
+      'hidden'
+    );
+  };
+
+  const literal = literalValueOf(attr);
+  if (literal.kind === 'boolean') {
+    if (literal.value) {
+      addConverted(ctx, path, element, 'isHidden', 'visibility', 'hidden');
+    }
+    // `isHidden={false}` is a no-op — drop it.
+  } else if (literal.kind === 'string') {
+    emit(literal.value);
+  } else if (arrayExpressionOf(attr.value)) {
+    for (const item of arrayItems(arrayExpressionOf(attr.value)) ?? []) {
+      const value = literalOf(item);
+      if (typeof value === 'string') emit(value);
+      else {
+        todo(
+          '`isHidden` entry has a dynamic value; set the matching `visibility*="hidden"` prop conditionally by hand'
+        );
+      }
+    }
+  } else {
+    todo(
+      '`isHidden` has a dynamic value; set `visibility="hidden"` (or a per-viewport `visibility*`) conditionally by hand'
+    );
+  }
+
+  removeAttr(element, attr);
+  ctx.dirty = true;
+}
+
+// ---- 3. Column isSize / isOffset ------------------------------------------
+
+function flattenColumnSizes(
+  ctx: TransformContext,
+  path: ASTPath<any>,
+  element: any
+): void {
+  const { j } = ctx;
+  for (const [prop, base] of [
+    ['isSize', 'size'],
+    ['isOffset', 'offset'],
+  ] as const) {
+    const attr = findAttr(element, prop);
+    if (!attr) continue;
+
+    const todo = (message: string) =>
+      addTodo(ctx, path, `prop:${prop}`, message);
+
+    /** One size value, for the unsuffixed prop or a breakpoint's. */
+    const convert = (node: any, suffix: string, where: string): void => {
+      const literal = literalOf(node);
+      if (typeof literal === 'number') {
+        // Column sizes take numbers; reuse the node.
+        addAttrOnce(
+          ctx,
+          path,
+          element,
+          prop,
+          j.jsxAttribute(
+            j.jsxIdentifier(`${base}${suffix}`),
+            attrValue(j, node)
+          )
+        );
+      } else if (typeof literal === 'string') {
+        if (literal === 'narrow') {
+          if (base === 'size') {
+            addAttrOnce(
+              ctx,
+              path,
+              element,
+              prop,
+              makeAttr(j, `isNarrow${suffix}`)
+            );
+          } else {
+            todo(`\`${where}="narrow"\` is not an offset; drop it`);
+          }
+        } else if (COLUMN_SIZE_MAP[literal]) {
+          addAttrOnce(
+            ctx,
+            path,
+            element,
+            prop,
+            makeAttr(j, `${base}${suffix}`, COLUMN_SIZE_MAP[literal])
+          );
+        } else if (/^(?:[1-9]|1[0-2])$/.test(literal)) {
+          addAttrOnce(
+            ctx,
+            path,
+            element,
+            prop,
+            makeAttr(j, `${base}${suffix}`, literal)
+          );
+        } else {
+          todo(
+            `\`${where}="${literal}"\` is not a column size bloomer's helpers know (1–12, a fraction like "1/2", "full" or "narrow"); set \`${base}${suffix}\` by hand`
+          );
+        }
+      } else {
+        todo(
+          `\`${where}\` has a dynamic value; set \`${base}${suffix}\` by hand (bestax takes numbers or the named sizes: "half", "one-third", …)`
+        );
+      }
+    };
+
+    const objectExpr = objectExpressionOf(attr.value);
+    if (objectExpr) {
+      for (const bpProp of objectExpr.properties) {
+        const key = propKey(bpProp);
+        if (key === 'default') {
+          convert(bpProp.value, '', `${prop}.default`);
+        } else if (key !== undefined && COLUMN_VIEWPORTS[key]) {
+          convert(bpProp.value, COLUMN_VIEWPORTS[key], `${prop}.${key}`);
+        } else if (key === 'touch') {
+          // bestax's Column has `isNarrowTouch` but no `sizeTouch`/`offsetTouch`.
+          const literal = literalOf(bpProp.value);
+          if (base === 'size' && literal === 'narrow') {
+            addAttrOnce(ctx, path, element, prop, makeAttr(j, 'isNarrowTouch'));
+          } else {
+            todo(
+              `bestax \`Column\` has no \`${base}Touch\` prop (Bulma keeps the \`is-*-touch\` classes); add the class by hand`
+            );
+          }
+        } else {
+          todo(
+            `\`${prop}.${String(key)}\` is not a breakpoint bloomer's helpers know; convert it by hand`
+          );
+        }
+      }
+    } else {
+      convert(
+        attr.value?.type === 'JSXExpressionContainer'
+          ? attr.value.expression
+          : attr.value,
+        '',
+        prop
+      );
+    }
+
+    removeAttr(element, attr);
+    ctx.dirty = true;
+  }
+}
+
+/** Run every helper-flattening pass that applies to this element. */
+export function flattenResponsiveProps(
+  ctx: TransformContext,
+  path: ASTPath<any>,
+  element: any,
+  kind: ResponsiveKind
+): void {
+  flattenDisplay(ctx, path, element);
+  flattenHidden(ctx, path, element);
+  if (kind === 'column') flattenColumnSizes(ctx, path, element);
+}
diff --git a/bestax-migrate/src/sources/bloomer/specials.ts b/bestax-migrate/src/sources/bloomer/specials.ts
new file mode 100644
index 000000000..b6710f65d
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/specials.ts
@@ -0,0 +1,736 @@
+/**
+ * Structural handlers for bloomer → bestax conversions a rename table cannot
+ * express: targets chosen by a prop's value (PageControl `isNext`, NavbarItem
+ * `hasDropdown`), wrappers bestax renders itself (Page, whose Pagination.Link
+ * child renders its own <li>), replacement with plain HTML where bestax has
+ * no component (Help, Label, Heading, BreadcrumbItem, PanelTab, TabLink,
+ * HeroVideo), and the two props whose bloomer shape has no single bestax
+ * prop (Icon's className, Control's hasIcons).
+ *
+ * A handler may return a `target` override for the rename step, or mark the
+ * element `replaced` when it substituted the node itself.
+ */
+
+import type { ASTPath } from 'jscodeshift';
+import { RENDER_TODO, RESPONSIVE_PROPS, UNIVERSAL_PROPS } from './mapping.js';
+import {
+  addAttr,
+  addTodo,
+  findAttr,
+  literalValueOf,
+  makeAttr,
+  removeAttr,
+  resolveBooleanish,
+  type TransformContext,
+} from '../_shared/jsx-utils.js';
+import {
+  makeStripModifierProps,
+  makeStructuralHelpers,
+  modifierClass,
+  parseIconClasses,
+  restrictAsToTargets,
+  type SpecialHandler,
+  type SpecialResult,
+} from '../_shared/specials-utils.js';
+
+export type { SpecialResult };
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+const stripModifierProps = makeStripModifierProps(
+  UNIVERSAL_PROPS,
+  RESPONSIVE_PROPS
+);
+
+/**
+ * Before an element becomes intrinsic HTML: `render` gets its own hint
+ * rather than the generic "helper props dropped" one (it is not a helper,
+ * and the universal table's TODO would otherwise leave a function prop on a
+ * DOM element), then the helper props go.
+ */
+const { replaceWithPlain, collapseOntoChild } = makeStructuralHelpers(
+  (ctx, path, attrs, where) => {
+    const kept: any[] = [];
+    for (const attr of attrs) {
+      if (attr?.name?.name === 'render') {
+        addTodo(ctx, path, 'prop:render', `\`render\` — ${RENDER_TODO.todo}`);
+      } else {
+        kept.push(attr);
+      }
+    }
+    return stripModifierProps(ctx, path, kept, where);
+  }
+);
+
+/**
+ * bloomer rendered every component through `React.createElement(tag, …)`, so
+ * a plain-element rewrite can honour a literal `tag` instead of dropping it.
+ */
+function plainTag(
+  ctx: TransformContext,
+  path: ASTPath<any>,
+  element: any,
+  fallback: string,
+  where: string
+): string {
+  const attr = findAttr(element, 'tag');
+  if (!attr) return fallback;
+  const literal = literalValueOf(attr);
+  removeAttr(element, attr);
+  ctx.dirty = true;
+  if (literal.kind === 'string') return literal.value;
+  addTodo(
+    ctx,
+    path,
+    'prop:tag',
+    `dynamic ${where} \`tag\`; it became a plain <${fallback}> — render the tag yourself`
+  );
+  return fallback;
+}
+
+/** A booleanish modifier prop → an `is-*` class fragment, always removed. */
+function booleanClass(
+  ctx: TransformContext,
+  path: ASTPath<any>,
+  element: any,
+  prop: string,
+  cls: string,
+  where: string
+): string | undefined {
+  const attr = findAttr(element, prop);
+  if (!attr) return undefined;
+  const resolved = resolveBooleanish(attr);
+  removeAttr(element, attr);
+  ctx.dirty = true;
+  if (resolved === 'truthy') return cls;
+  if (resolved === 'expression') {
+    addTodo(
+      ctx,
+      path,
+      `prop:${prop}`,
+      `dynamic ${where} \`${prop}\`; set className={${prop} ? '${cls}' : undefined} by hand`
+    );
+  }
+  return undefined;
+}
+
+const join = (...parts: Array<string | undefined>): string | undefined => {
+  const kept = parts.filter((p): p is string => Boolean(p));
+  return kept.length > 0 ? kept.join(' ') : undefined;
+};
+
+/**
+ * bloomer switched several components to an <a> whenever `href` was set,
+ * whatever `tag` said. Where the bestax target already renders an <a> by
+ * default, a surviving `tag` (which the mapping turns into `as`) would undo
+ * that, so it is dropped; where the target defaults to something else, `as`
+ * is set explicitly.
+ */
+function anchorWhenHref(
+  ctx: TransformContext,
+  element: any,
+  setAs: boolean
+): string[] {
+  if (!findAttr(element, 'href')) return [];
+  const handled: string[] = [];
+  const tagAttr = findAttr(element, 'tag');
+  if (tagAttr) {
+    removeAttr(element, tagAttr);
+    handled.push('tag');
+    ctx.dirty = true;
+  }
+  if (setAs && !findAttr(element, 'as')) {
+    addAttr(element, makeAttr(ctx.j, 'as', 'a'));
+    ctx.dirty = true;
+  }
+  return handled;
+}
+
+/** Font Awesome 4 spelled its one style as a bare `fa` token. */
+const FA4_CLASSES = /(?:^|\s)fa(?:\s|$)/;
+
+/**
+ * Turn an icon-font class string into bestax `Icon` props when the parser
+ * can read it (Font Awesome 5/6 and MDI); otherwise render it the way
+ * bloomer did — an <i> child carrying the classes — which bestax's `Icon`
+ * accepts as a custom node, and say why that may still need attention.
+ */
+function iconFromClasses(
+  ctx: TransformContext,
+  path: ASTPath<any>,
+  element: any,
+  classes: string | { dynamic: any },
+  where: string
+): void {
+  const { j } = ctx;
+  if (typeof classes === 'string') {
+    const parsed = parseIconClasses(classes);
+    if (parsed) {
+      addAttr(element, makeAttr(j, 'name', parsed.name));
+      if (parsed.library)
+        addAttr(element, makeAttr(j, 'library', parsed.library));
+      if (parsed.variant)
+        addAttr(element, makeAttr(j, 'variant', parsed.variant));
+      element.children = [];
+      element.openingElement.selfClosing = true;
+      element.closingElement = null;
+      ctx.dirty = true;
+      return;
+    }
+  }
+  const classValue =
+    typeof classes === 'string'
+      ? j.stringLiteral(classes)
+      : j.jsxExpressionContainer(classes.dynamic);
+  const child = j.jsxElement(
+    j.jsxOpeningElement(
+      j.jsxIdentifier('i'),
+      [
+        j.jsxAttribute(j.jsxIdentifier('className'), classValue),
+        makeAttr(j, 'aria-hidden', 'true'),
+      ],
+      true
+    ),
+    null,
+    []
+  );
+  element.children = [child];
+  element.openingElement.selfClosing = false;
+  element.closingElement = j.jsxClosingElement(element.openingElement.name);
+  ctx.dirty = true;
+  const fa4 = typeof classes === 'string' && FA4_CLASSES.test(classes);
+  addTodo(
+    ctx,
+    path,
+    `component:${where}`,
+    fa4
+      ? `kept the Font Awesome 4 classes on an <i> child, as bloomer rendered them; bestax's optional Font Awesome peer is 6.7+, where many v4 names changed (brand icons moved to \`variant="brands"\`) — keep FA4 loaded, or switch to \`name\`/\`library\`/\`variant\` (\`<Icon name="home" library="fa" variant="solid" />\`)`
+      : `kept the icon classes on an <i> child, as bloomer rendered them; bestax renders that child unchanged, so make sure the icon font is still loaded — or switch to \`name\`/\`library\`/\`variant\` (\`<Icon name="home" library="fa" variant="solid" />\`)`
+  );
+}
+
+const SPECIALS: Record<string, SpecialHandler> = {
+  /**
+   * `isLink` is Bulma's `is-link` colour and collides with `isColor`, and an
+   * `href` made bloomer render an <a> — bestax's Button renders a <button>
+   * unless `as` says otherwise.
+   */
+  button(ctx, path, element) {
+    const linkAttr = findAttr(element, 'isLink');
+    if (linkAttr) {
+      const resolved = resolveBooleanish(linkAttr);
+      removeAttr(element, linkAttr);
+      ctx.dirty = true;
+      if (resolved === 'truthy') {
+        if (findAttr(element, 'isColor') || findAttr(element, 'color')) {
+          addTodo(
+            ctx,
+            path,
+            'prop:isLink',
+            '`isLink` alongside `isColor`; bestax `Button` has one `color`, so pick `color="link"` or the other colour by hand'
+          );
+        } else {
+          addAttr(element, makeAttr(ctx.j, 'color', 'link'));
+        }
+      } else if (resolved === 'expression') {
+        addTodo(
+          ctx,
+          path,
+          'prop:isLink',
+          'dynamic `isLink`; set `color="link"` conditionally by hand'
+        );
+      }
+    }
+    const handled = anchorWhenHref(ctx, element, true);
+    return { handledProps: ['isLink', ...handled] };
+  },
+
+  /**
+   * bloomer's Heading is Bulma's `.heading` label (small caps), which Bulma
+   * v1 no longer styles and bestax has no component for. It becomes the
+   * plain element bloomer rendered, and the TODO says the styling is gone.
+   */
+  heading(ctx, path, element) {
+    addTodo(
+      ctx,
+      path,
+      'component:Heading',
+      'Bulma v1 dropped the `.heading` styles, so this plain <p className="heading"> renders unstyled; restyle it with bestax helpers (e.g. `textSize="7" textTransform="uppercase" textWeight="semibold"`) or your own class'
+    );
+    const tag = plainTag(ctx, path, element, 'p', 'Heading');
+    return replaceWithPlain(ctx, path, element, tag, 'heading', 'Heading');
+  },
+
+  /**
+   * bloomer's Icon put the icon-font classes on its own `className` and
+   * rendered `<span class="icon"><i class={className}/></span>`, ignoring
+   * children. `isAlign` is Bulma's `.icon.is-left`, which bestax's Icon has
+   * no prop for — it goes on the container's className.
+   */
+  icon(ctx, path, element) {
+    const alignAttr = findAttr(element, 'isAlign');
+    let alignClass: string | undefined;
+    if (alignAttr) {
+      const literal = literalValueOf(alignAttr);
+      removeAttr(element, alignAttr);
+      ctx.dirty = true;
+      if (
+        literal.kind === 'string' &&
+        (literal.value === 'left' || literal.value === 'right')
+      ) {
+        alignClass = `is-${literal.value}`;
+      } else if (literal.kind === 'expression') {
+        addTodo(
+          ctx,
+          path,
+          'prop:isAlign',
+          'dynamic Icon `isAlign`; bestax `Icon` has no align prop — set className={align ? `is-${align}` : undefined} by hand'
+        );
+      }
+    }
+
+    const classAttr = findAttr(element, 'className');
+    if (classAttr) {
+      const literal = literalValueOf(classAttr);
+      removeAttr(element, classAttr);
+      ctx.dirty = true;
+      if (literal.kind === 'string') {
+        iconFromClasses(ctx, path, element, literal.value, 'Icon');
+      } else {
+        iconFromClasses(
+          ctx,
+          path,
+          element,
+          { dynamic: classAttr.value.expression },
+          'Icon'
+        );
+      }
+    } else {
+      const children = (element.children ?? []).filter(
+        (c: any) => !(c.type === 'JSXText' && c.value.trim() === '')
+      );
+      if (children.length === 0) {
+        addTodo(
+          ctx,
+          path,
+          'component:Icon',
+          'no icon classes to carry over (bloomer read them from `className`); bestax `Icon` needs a `name` (plus `library`/`variant`) or a child node'
+        );
+      }
+    }
+
+    if (alignClass) {
+      addAttr(element, makeAttr(ctx.j, 'className', alignClass));
+    }
+    return { handledProps: ['className', 'isAlign'] };
+  },
+
+  /**
+   * bloomer's PanelIcon is `<span class="panel-icon">{children}</span>` with
+   * an icon-font <i> child; bestax's Panel.Icon is an Icon in panel clothing.
+   */
+  'panel-icon'(ctx, path, element) {
+    const children = (element.children ?? []).filter(
+      (c: any) => !(c.type === 'JSXText' && c.value.trim() === '')
+    );
+    const iChild =
+      children.length === 1 &&
+      children[0].type === 'JSXElement' &&
+      children[0].openingElement?.name?.type === 'JSXIdentifier' &&
+      (children[0].openingElement.name.name === 'i' ||
+        children[0].openingElement.name.name === 'span')
+        ? children[0]
+        : null;
+    const classAttr = iChild ? findAttr(iChild, 'className') : undefined;
+    const literal = classAttr ? literalValueOf(classAttr) : undefined;
+    if (literal?.kind === 'string') {
+      iconFromClasses(ctx, path, element, literal.value, 'PanelIcon');
+    } else if (children.length === 0) {
+      addTodo(
+        ctx,
+        path,
+        'component:PanelIcon',
+        'empty PanelIcon; bestax `Panel.Icon` needs a `name` (plus `library`/`variant`) or a child node'
+      );
+    }
+    // Anything else is a child node bestax's Panel.Icon renders unchanged.
+    return {};
+  },
+
+  /**
+   * bloomer's `hasIcons` is `true` (both sides), a side, or an array of
+   * sides; bestax has one boolean per side.
+   */
+  'control-icons'(ctx, path, element) {
+    const attr = findAttr(element, 'hasIcons');
+    if (!attr) return {};
+    const { j } = ctx;
+    const side = (value: unknown): void => {
+      if (value === 'left' || value === 'right') {
+        const name = value === 'left' ? 'hasIconsLeft' : 'hasIconsRight';
+        if (!findAttr(element, name)) addAttr(element, makeAttr(j, name));
+      } else {
+        addTodo(
+          ctx,
+          path,
+          'prop:hasIcons',
+          `\`hasIcons\` value ${JSON.stringify(value)} is not "left" or "right"; set \`hasIconsLeft\`/\`hasIconsRight\` by hand`
+        );
+      }
+    };
+    const literal = literalValueOf(attr);
+    if (literal.kind === 'boolean') {
+      if (literal.value) {
+        side('left');
+        side('right');
+      }
+    } else if (literal.kind === 'string') {
+      side(literal.value);
+    } else if (
+      attr.value?.type === 'JSXExpressionContainer' &&
+      attr.value.expression?.type === 'ArrayExpression'
+    ) {
+      for (const item of attr.value.expression.elements ?? []) {
+        if (item?.type === 'StringLiteral') side(item.value);
+        else {
+          addTodo(
+            ctx,
+            path,
+            'prop:hasIcons',
+            '`hasIcons` entry has a dynamic value; set `hasIconsLeft`/`hasIconsRight` conditionally by hand'
+          );
+        }
+      }
+    } else {
+      addTodo(
+        ctx,
+        path,
+        'prop:hasIcons',
+        'dynamic `hasIcons`; set `hasIconsLeft`/`hasIconsRight` conditionally by hand'
+      );
+    }
+    removeAttr(element, attr);
+    ctx.dirty = true;
+    return { handledProps: ['hasIcons'] };
+  },
+
+  /**
+   * bloomer's Image takes a fixed size and a ratio as two props and emits
+   * both classes; bestax's `size` carries either one.
+   */
+  image(ctx, path, element) {
+    const { j } = ctx;
+    const RATIOS: Record<string, string> = {
+      square: 'square',
+      '1:1': '1by1',
+      '4:3': '4by3',
+      '3:2': '3by2',
+      '16:9': '16by9',
+      '2:1': '2by1',
+    };
+    const sizeAttr = findAttr(element, 'isSize');
+    if (sizeAttr) {
+      sizeAttr.name = j.jsxIdentifier('size');
+      ctx.dirty = true;
+    }
+    const ratioAttr = findAttr(element, 'isRatio');
+    if (ratioAttr) {
+      const literal = literalValueOf(ratioAttr);
+      if (sizeAttr) {
+        removeAttr(element, ratioAttr);
+        addTodo(
+          ctx,
+          path,
+          'prop:isRatio',
+          'both `isSize` and `isRatio` were set; bestax `Image` has one `size` prop for either, and Bulma applies only one of the two classes — kept the fixed size, restore the ratio by hand if that is the one you wanted'
+        );
+      } else if (literal.kind === 'string' && RATIOS[literal.value]) {
+        ratioAttr.name = j.jsxIdentifier('size');
+        ratioAttr.value = j.stringLiteral(RATIOS[literal.value]);
+      } else {
+        removeAttr(element, ratioAttr);
+        addTodo(
+          ctx,
+          path,
+          'prop:isRatio',
+          literal.kind === 'string'
+            ? `\`isRatio="${literal.value}"\` is not a ratio bloomer's helpers know; set bestax's \`size\` ("16by9", "4by3", …) by hand`
+            : 'dynamic `isRatio`; set bestax\'s `size` ("16by9", "4by3", …) by hand'
+        );
+      }
+      ctx.dirty = true;
+    }
+    return { handledProps: ['isSize', 'isRatio'] };
+  },
+
+  /** bestax has no Help component; Bulma's markup is a plain <p class="help">. */
+  help(ctx, path, element) {
+    const className = modifierClass(
+      ctx,
+      path,
+      element,
+      'isColor',
+      'help',
+      'Help'
+    );
+    const tag = plainTag(ctx, path, element, 'p', 'Help');
+    return replaceWithPlain(ctx, path, element, tag, className, 'Help');
+  },
+
+  /** bestax has no standalone Label; Bulma's markup is <label class="label">. */
+  label(ctx, path, element) {
+    const className = modifierClass(
+      ctx,
+      path,
+      element,
+      'isSize',
+      'label',
+      'Label'
+    );
+    return replaceWithPlain(ctx, path, element, 'label', className, 'Label');
+  },
+
+  /**
+   * bestax's Breadcrumb renders the <ul> and takes plain <li> children —
+   * exactly what bloomer's BreadcrumbItem rendered (its children carried the
+   * <a>).
+   */
+  'breadcrumb-item'(ctx, path, element) {
+    const cls = booleanClass(
+      ctx,
+      path,
+      element,
+      'isActive',
+      'is-active',
+      'BreadcrumbItem'
+    );
+    const tag = plainTag(ctx, path, element, 'li', 'BreadcrumbItem');
+    return replaceWithPlain(ctx, path, element, tag, cls, 'BreadcrumbItem');
+  },
+
+  /**
+   * bloomer's Dropdown owns both the trigger and the menu as children;
+   * bestax's takes a `label` and renders the trigger and menu itself, so the
+   * shape differs enough that a mechanical rewrite would be a guess.
+   */
+  dropdown(ctx, path, element) {
+    addTodo(
+      ctx,
+      path,
+      'component:Dropdown',
+      'bestax `Dropdown` takes a `label` and renders its own trigger and menu; move the `<DropdownTrigger>` content into `label`, keep the `<DropdownItem>`s as direct children, and drop the `DropdownMenu`/`DropdownContent` wrappers'
+    );
+    return { handledProps: anchorWhenHref(ctx, element, false) };
+  },
+
+  /** bestax's Level.Item renders a <div> unless `as="a"`. */
+  'level-item'(ctx, _path, element) {
+    return { handledProps: anchorWhenHref(ctx, element, true) };
+  },
+
+  /** Targets that already render an <a>: a surviving `tag` would undo it. */
+  'anchor-when-href'(ctx, _path, element) {
+    return { handledProps: anchorWhenHref(ctx, element, false) };
+  },
+
+  /**
+   * bloomer's Modal was an inert shell: no Escape handling, no scroll lock,
+   * no portal. bestax's closes on Escape and locks body scroll by default
+   * (#633) and renders inline unless `portal` is set — so every conversion
+   * changes behaviour, and this says how.
+   */
+  modal(ctx, path, _element) {
+    addTodo(
+      ctx,
+      path,
+      'component:Modal',
+      "bestax `Modal` closes on Escape (calling `onClose`) and locks body scroll by default, which bloomer's never did: pass `onClose`, or set `closeOnEscape={false}` / `lockScroll={false}` to keep bloomer's behaviour; it renders inline unless `portal` is set"
+    );
+    return {};
+  },
+
+  /**
+   * bloomer's NavbarItem carries `hasDropdown`, which bestax splits into the
+   * Navbar.Dropdown container (`navbar-item has-dropdown`) and Navbar.Item.
+   */
+  'navbar-item'(ctx, path, element) {
+    let target = 'Navbar.Item';
+    const dropdownAttr = findAttr(element, 'hasDropdown');
+    if (dropdownAttr) {
+      const resolved = resolveBooleanish(dropdownAttr);
+      removeAttr(element, dropdownAttr);
+      ctx.dirty = true;
+      if (resolved === 'truthy') {
+        target = 'Navbar.Dropdown';
+      } else if (resolved === 'expression') {
+        addTodo(
+          ctx,
+          path,
+          'prop:hasDropdown',
+          'dynamic NavbarItem `hasDropdown`; pick between `<Navbar.Item>` and `<Navbar.Dropdown>` by hand'
+        );
+      }
+    }
+    // `hoverable` exists on bestax's Navbar.Dropdown, not on Navbar.Item.
+    const hoverAttr = findAttr(element, 'isHoverable');
+    if (hoverAttr) {
+      if (target === 'Navbar.Dropdown') {
+        hoverAttr.name = ctx.j.jsxIdentifier('hoverable');
+      } else {
+        removeAttr(element, hoverAttr);
+        addTodo(
+          ctx,
+          path,
+          'prop:isHoverable',
+          'bestax `Navbar.Item` has no `hoverable` prop (only `Navbar.Dropdown` does); restructure or add className="is-hoverable"'
+        );
+      }
+      ctx.dirty = true;
+    }
+    const handled = anchorWhenHref(ctx, element, false);
+    restrictAsToTargets(ctx, path, element, target, ['Navbar.Item'], 'tag');
+    return {
+      target,
+      handledProps: ['hasDropdown', 'isHoverable', ...handled],
+    };
+  },
+
+  /**
+   * bloomer's NavbarDropdown is the MENU (`div.navbar-dropdown`); bestax
+   * calls that `Navbar.DropdownMenu` and reserves `Navbar.Dropdown` for the
+   * container — which is what `<NavbarItem hasDropdown>` becomes.
+   */
+  'navbar-dropdown'(ctx, path, element) {
+    const boxedAttr = findAttr(element, 'isBoxed');
+    if (boxedAttr) {
+      removeAttr(element, boxedAttr);
+      addTodo(
+        ctx,
+        path,
+        'prop:isBoxed',
+        'bestax `Navbar.DropdownMenu` has no `boxed` prop; add className="is-boxed"'
+      );
+      ctx.dirty = true;
+    }
+    return { target: 'Navbar.DropdownMenu', handledProps: ['isBoxed'] };
+  },
+
+  /** bestax's `align` is `'centered' | 'right'`; left is Bulma's default. */
+  pagination(ctx, path, element) {
+    const attr = findAttr(element, 'isAlign');
+    if (!attr) return {};
+    const literal = literalValueOf(attr);
+    if (literal.kind === 'string' && literal.value === 'left') {
+      removeAttr(element, attr);
+    } else {
+      attr.name = ctx.j.jsxIdentifier('align');
+      if (literal.kind === 'expression') {
+        addTodo(
+          ctx,
+          path,
+          'prop:isAlign',
+          'dynamic Pagination `isAlign`; bestax `align` takes "centered" or "right" only — map "left" (the default) to undefined by hand'
+        );
+      }
+    }
+    ctx.dirty = true;
+    return { handledProps: ['isAlign'] };
+  },
+
+  /** bloomer's PageControl is the previous link unless `isNext` says otherwise. */
+  'page-control'(ctx, path, element) {
+    const nextAttr = findAttr(element, 'isNext');
+    const prevAttr = findAttr(element, 'isPrevious');
+    const resolved = nextAttr ? resolveBooleanish(nextAttr) : 'falsy';
+    if (nextAttr) removeAttr(element, nextAttr);
+    if (prevAttr) removeAttr(element, prevAttr);
+    ctx.dirty = true;
+    let target = 'Pagination.Previous';
+    if (resolved === 'truthy') {
+      target = 'Pagination.Next';
+    } else if (resolved === 'expression') {
+      addTodo(
+        ctx,
+        path,
+        'prop:isNext',
+        'dynamic PageControl `isNext`; pick between `<Pagination.Previous>` and `<Pagination.Next>` by hand'
+      );
+    }
+    const handled = anchorWhenHref(ctx, element, false);
+    return { target, handledProps: ['isNext', 'isPrevious', ...handled] };
+  },
+
+  /**
+   * bloomer's Page is the bare <li> around a PageLink or PageEllipsis;
+   * bestax's Pagination.Link and Pagination.Ellipsis render their own <li>,
+   * so the wrapper folds onto its child.
+   */
+  page(ctx, path, element) {
+    const collapsed = collapseOntoChild(ctx, path, element, 'Page', [
+      'PageLink',
+      'PageEllipsis',
+    ]);
+    if (collapsed) return collapsed;
+    const tag = plainTag(ctx, path, element, 'li', 'Page');
+    return replaceWithPlain(ctx, path, element, tag, undefined, 'Page');
+  },
+
+  /** bestax's Panel.Tabs takes plain anchors. */
+  'panel-tab'(ctx, path, element) {
+    const cls = booleanClass(
+      ctx,
+      path,
+      element,
+      'isActive',
+      'is-active',
+      'PanelTab'
+    );
+    const tag = plainTag(ctx, path, element, 'a', 'PanelTab');
+    return replaceWithPlain(ctx, path, element, tag, cls, 'PanelTab');
+  },
+
+  /** bestax's Tabs.Item is the <li>; the anchor inside it is plain markup. */
+  'tab-link'(ctx, path, element) {
+    const tag = plainTag(ctx, path, element, 'a', 'TabLink');
+    return replaceWithPlain(ctx, path, element, tag, undefined, 'TabLink');
+  },
+
+  /** Bulma v1 still ships `.hero-video`; bestax's Hero has no part for it. */
+  'hero-video'(ctx, path, element) {
+    const cls = join(
+      'hero-video',
+      booleanClass(
+        ctx,
+        path,
+        element,
+        'isTransparent',
+        'is-transparent',
+        'HeroVideo'
+      )
+    );
+    const tag = plainTag(ctx, path, element, 'div', 'HeroVideo');
+    return replaceWithPlain(ctx, path, element, tag, cls, 'HeroVideo');
+  },
+
+  /** Marks the element for the column size pass in responsive.ts. */
+  column() {
+    return {};
+  },
+};
+
+export function runSpecial(
+  name: string,
+  ctx: TransformContext,
+  path: ASTPath<any>,
+  element: any
+): SpecialResult {
+  const handler = SPECIALS[name];
+  if (!handler) {
+    throw new Error(
+      `bloomer mapping names an unknown special handler: ${name}`
+    );
+  }
+  return handler(ctx, path, element);
+}
+
+export const SPECIAL_NAMES = Object.keys(SPECIALS);
diff --git a/bestax-migrate/src/sources/bloomer/styles.ts b/bestax-migrate/src/sources/bloomer/styles.ts
new file mode 100644
index 000000000..a17905602
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/styles.ts
@@ -0,0 +1,19 @@
+/**
+ * Stylesheet migration for bloomer apps.
+ *
+ * Same shared factory as every other source — the Bulma 0.9 → v1 rewriting is
+ * identical. What differs is that bloomer ships no stylesheet of its own: it
+ * never depended on Bulma, and its README tells the app to install `bulma`
+ * and import it directly. So there is no source root stylesheet to replace
+ * (`rootStylesheetSuffixes` is empty, which the factory tolerates), and the
+ * pass only ever rewrites the app's own `bulma/…` imports — which, coming
+ * from the 0.6 era, are older than anything the 0.9 → v1 guide describes.
+ */
+
+import { makeStylesTransform } from '../_shared/make-styles-transform.js';
+
+export const transformStyles = makeStylesTransform({
+  packageName: 'bloomer',
+  guideUrl: 'https://bestax.io/docs/guides/getting-started/migration/bloomer',
+  rootStylesheetSuffixes: [],
+});
diff --git a/bestax-migrate/src/sources/bloomer/transform.ts b/bestax-migrate/src/sources/bloomer/transform.ts
new file mode 100644
index 000000000..85285bfa1
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/transform.ts
@@ -0,0 +1,717 @@
+/**
+ * The bloomer (0.6) → @allxsmith/bestax-bulma transform.
+ *
+ * Passes, in order:
+ *   1. resolve imports (named/namespace) and `const { Item } = Card`-style
+ *      destructuring into canonical bloomer component paths
+ *   2. per-element: structural special → rename → helper flattening
+ *      (isDisplay / isHidden / Column sizes) → component prop map →
+ *      universal helper props
+ *   3. rewrite imports: drop bloomer, add one merged bestax-bulma import; keep
+ *      a trimmed bloomer import (with a TODO) only for components that have
+ *      no bestax equivalent (Tile, the Nav family, …)
+ *
+ * Anything unsafe gets a `// TODO(bestax-migrate)` comment on the enclosing
+ * statement plus an entry in the run report.
+ *
+ * Next to the bloomer transform this is the plain case: bloomer has no helper
+ * props that become wrapping components, no stylesheet of its own and no
+ * extension packages — so there is no wrapping pass and the CSS pass only
+ * ever sees the app's own Bulma import. Every bloomer export is a flat name,
+ * and most of them rename onto a dotted bestax compound; the rename and
+ * value-reference passes below build those from the mapping's `target`.
+ */
+
+import type { API, FileInfo } from 'jscodeshift';
+import type { TransformOptions } from '../../types.js';
+import { MAPPING, UNIVERSAL_PROPS, resolveMapping } from './mapping.js';
+import {
+  addTodo,
+  attributesOf,
+  jsxNameParts,
+  renameElement,
+  type TransformContext,
+} from '../_shared/jsx-utils.js';
+import { applyPropAction, applyUniversalProps } from '../_shared/props.js';
+import {
+  collectBoundNames,
+  makeReserve,
+  nameOf,
+  prefersTabs,
+  resolvesToBinding,
+} from '../_shared/imports.js';
+import { flattenResponsiveProps, RESPONSIVE_KINDS } from './responsive.js';
+import { runSpecial } from './specials.js';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+const BLOOMER = 'bloomer';
+const BESTAX = '@allxsmith/bestax-bulma';
+const BESTAX_CSS = '@allxsmith/bestax-bulma/bestax.css';
+const EXTRAS_CSS = '@allxsmith/bestax-bulma/extras.css';
+
+const BULMA_CSS_SPECIFIERS = new Set([
+  'bulma/css/bulma.css',
+  'bulma/css/bulma.min.css',
+]);
+const BESTAX_CSS_SPECIFIERS = new Set([
+  BESTAX_CSS,
+  '@allxsmith/bestax-bulma/bestax.min.css',
+  '@allxsmith/bestax-bulma/dist/bestax.css',
+  '@allxsmith/bestax-bulma/dist/bestax.min.css',
+]);
+const EXTRAS_CSS_SPECIFIERS = new Set([
+  EXTRAS_CSS,
+  '@allxsmith/bestax-bulma/dist/extras.css',
+]);
+
+export default function transform(
+  fileInfo: FileInfo,
+  api: API,
+  options: TransformOptions = {}
+): string | undefined {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  const ctx: TransformContext = {
+    j,
+    file: fileInfo.path,
+    collector: options.collector,
+    retained: new Set<string>(),
+    needed: new Map<string, string>(),
+    reserve: root => root, // replaced below once local bindings are known
+    overrides: new WeakMap<object, string>(),
+    dirty: false,
+  };
+
+  // ---- 1. Collect bloomer imports -------------------------------------------
+  /** local identifier → imported bloomer name ('*' for namespace imports). */
+  const imports = new Map<string, string>();
+
+  const sourceImportPaths: any[] = [];
+  /** Whether any bloomer import declaration carried a (broken) default binding. */
+  let sawDefaultImport = false;
+  /**
+   * Whether a namespace binding (`import * as bloomer`) is still referenced as a
+   * VALUE after the JSX pass. JSX names like `<bloomer.Box>` are rewritten away,
+   * but `as={bloomer.Block}` or a bare `String(bloomer)` are not — and pruning the
+   * import under them leaves `bloomer is not defined`.
+   */
+  let namespaceStillReferenced = false;
+
+  root.find(j.ImportDeclaration).forEach(path => {
+    const source = String(path.node.source.value);
+    if (source === BLOOMER) {
+      sourceImportPaths.push(path);
+      for (const spec of path.node.specifiers ?? []) {
+        if (spec.type === 'ImportSpecifier' && spec.local) {
+          imports.set(nameOf(spec.local), nameOf(spec.imported));
+        } else if (spec.type === 'ImportNamespaceSpecifier' && spec.local) {
+          imports.set(nameOf(spec.local), '*');
+        } else if (spec.type === 'ImportDefaultSpecifier') {
+          // bloomer has no default export, so this binding is already broken —
+          // but it may still be referenced, and dropping it turns a bad
+          // import into `X is not defined`. Flag it and keep it.
+          sawDefaultImport = true;
+          addTodo(
+            ctx,
+            path,
+            'imports',
+            'bloomer has no default export; convert to named imports first'
+          );
+        }
+      }
+    } else if (source.startsWith(`${BLOOMER}/`)) {
+      // Deep imports (`bloomer/lib/elements/Button`) reach the compiled
+      // internals; the same component is exported from the package root,
+      // which is the only surface the mapping knows.
+      addTodo(
+        ctx,
+        path,
+        'imports',
+        `\`${source}\` reaches into bloomer's internals; import the component from 'bloomer' first, then re-run the codemod`
+      );
+    }
+  });
+
+  // ---- 1a. Stylesheet imports (mode-driven) -----------------------------
+  // `bestax` (default): everything converges on the recommended combined
+  // bundle. `bulma`: plain Bulma v1 CSS plus the separate extras file.
+  // `keep`: nothing to do — bloomer has no stylesheet of its own.
+  const cssMode = options.cssMode ?? 'bestax';
+  let sawBestaxCss = root
+    .find(j.ImportDeclaration)
+    .paths()
+    .some(p => BESTAX_CSS_SPECIFIERS.has(String(p.node.source.value)));
+
+  // Whether some import in this file will become bestax.css, regardless of
+  // where it sits relative to an existing extras import.
+  const willAdoptBestaxCss =
+    cssMode === 'bestax' &&
+    root
+      .find(j.ImportDeclaration)
+      .paths()
+      .some(p => BULMA_CSS_SPECIFIERS.has(String(p.node.source.value)));
+
+  root.find(j.ImportDeclaration).forEach(path => {
+    const source = String(path.node.source.value);
+    const isBulmaCss = BULMA_CSS_SPECIFIERS.has(source);
+    const isExtrasCss = EXTRAS_CSS_SPECIFIERS.has(source);
+    if (!isBulmaCss && !isExtrasCss) return;
+
+    if (cssMode === 'bestax') {
+      if (isBulmaCss) {
+        if (sawBestaxCss) {
+          path.prune(); // bestax.css already imported elsewhere in this file
+        } else {
+          path.node.source = j.stringLiteral(BESTAX_CSS);
+          sawBestaxCss = true;
+        }
+        ctx.dirty = true;
+      } else if (isExtrasCss && (sawBestaxCss || willAdoptBestaxCss)) {
+        // bestax.css already contains the extras. `willAdoptBestaxCss` covers
+        // the case where the extras import comes FIRST in the file and the
+        // bulma import that becomes bestax.css has not been visited yet —
+        // previously the extras survived alongside it and double-loaded.
+        path.prune();
+        ctx.dirty = true;
+      }
+    } else if (cssMode === 'bulma') {
+      if (isBulmaCss && !sawBestaxCss) {
+        const hasExtras = root
+          .find(j.ImportDeclaration)
+          .paths()
+          .some(p => EXTRAS_CSS_SPECIFIERS.has(String(p.node.source.value)));
+        if (!hasExtras) {
+          // Themed Radio/Checkbox need the bestax extras next to plain Bulma.
+          path.insertAfter(
+            j.importDeclaration([], j.stringLiteral(EXTRAS_CSS))
+          );
+          ctx.dirty = true;
+        }
+      }
+    }
+  });
+
+  if (imports.size === 0 && !ctx.dirty) {
+    return undefined;
+  }
+
+  // The scope each binding was collected in, so a reference can be checked
+  // against the binding it actually resolves to rather than matched by name.
+  const programScope: unknown = root.find(j.Program).paths()[0]?.scope;
+
+  // There is no destructuring pass: every bloomer export is a flat component
+  // with no sub-components, so `const { Item } = Card` has nothing to bind.
+
+  /** Resolve a JSX name into a canonical bloomer component path, or null. */
+  function resolveJsxPath(name: any): string[] | null {
+    const parts = jsxNameParts(name);
+    if (!parts) return null;
+    const [head, ...rest] = parts;
+    const imported = imports.get(head);
+    if (imported === undefined) return null;
+    if (imported === '*') return rest.length > 0 ? rest : null;
+    return [imported, ...rest];
+  }
+
+  ctx.resolve = resolveJsxPath;
+
+  // ---- 1c. Collect local bindings so new imports never collide -----------
+  const bound = collectBoundNames(j, root, BLOOMER);
+  // Seed the reserved set with the local names of bloomer imports that CANNOT be
+  // migrated, so a bestax import never claims one of them. Without this, an
+  // unmappable component aliased to a name bestax also wants
+  // (`import { Tile as Button }`) had its retained specifier dropped on the
+  // collision — and its `<Button>` JSX then silently resolved to the bestax
+  // Button. A component quietly became a different component.
+  //
+  // Keyed on the mapping status so only genuinely unmappable names force an
+  // alias; the common case (`Button` → `Button`) stays un-aliased.
+  for (const [local, imported] of imports) {
+    if (imported === '*') continue;
+    const entry = MAPPING[imported];
+    // Unmappable roots, plus ANY aliased import. A root can be retained by an
+    // unknown or `todo` child even when the root itself maps (`Icon` is
+    // `partial`, but `<Icon.Unknown>` retains it), and when the local name
+    // differs from the imported one that retained binding can collide with a
+    // bestax local for a completely different component. An unaliased import
+    // is safe: its name already means the same component on both sides.
+    if (!entry || entry.status === 'todo' || local !== imported) {
+      bound.add(local);
+    }
+  }
+  // A root that DOES map can still be retained by a child the table cannot
+  // (`Icon` is `partial`, but `<Icon.Unknown>` keeps the source import alive).
+  // The status check above misses that case whenever the local name equals the
+  // imported one, so the bestax import took the plain local, the retained
+  // specifier was dropped on the collision, and `<Icon.Unknown>` silently
+  // resolved to the bestax component instead.
+  //
+  // Scanned rather than reserved wholesale: adding every partial root to
+  // `bound` would alias them in every file that uses one, whether or not
+  // anything is actually retained.
+  root.find(j.JSXElement).forEach(path => {
+    const head = jsxNameParts(path.node.openingElement.name)?.[0];
+    if (!head || !imports.has(head)) return;
+    const parts = resolveJsxPath(path.node.openingElement.name);
+    const mapping = parts ? resolveMapping(parts) : undefined;
+    if (!mapping || mapping.status === 'todo') bound.add(head);
+  });
+  // The same root can be retained by a VALUE chain -- `const X = Icon.Unknown`
+  // -- which only the value-reference pass discovers, after `reserve` has
+  // already handed the plain local to bestax. Scan those chains here too.
+  root.find(j.Identifier).forEach(path => {
+    if (path.node.type !== 'Identifier') return;
+    const head: string = path.node.name;
+    const imported = imports.get(head);
+    if (imported === undefined || imported === '*') return;
+    const parent = path.parent?.node;
+    if (
+      parent?.type !== 'MemberExpression' ||
+      parent.object !== path.node ||
+      parent.computed
+    ) {
+      return;
+    }
+    const chain = [imported];
+    let outer: any = path.parent;
+    while (
+      outer?.node?.type === 'MemberExpression' &&
+      !outer.node.computed &&
+      outer.node.property?.type === 'Identifier'
+    ) {
+      chain.push(nameOf(outer.node.property));
+      const next = outer.parent;
+      if (
+        next?.node?.type === 'MemberExpression' &&
+        next.node.object === outer.node
+      ) {
+        outer = next;
+      } else {
+        break;
+      }
+    }
+    const mapping = resolveMapping(chain);
+    if (!mapping || mapping.status === 'todo') bound.add(head);
+  });
+
+  ctx.reserve = makeReserve(ctx, bound);
+
+  // Merge with an existing bestax import: reuse its locals verbatim.
+  // Only a declaration that already uses NAMED specifiers can absorb more of
+  // them. `import * as Bestax from '…'` cannot: a namespace specifier may not
+  // share a declaration with named ones, and appending to it emits a file
+  // that does not parse.
+  const existingBestax = root
+    .find(j.ImportDeclaration, { source: { value: BESTAX } })
+    .paths()
+    .find(p =>
+      (p.node.specifiers ?? []).every(
+        (spec: any) => spec.type === 'ImportSpecifier'
+      )
+    );
+  const preExistingImports = new Set<string>();
+  if (existingBestax) {
+    for (const spec of existingBestax.node.specifiers ?? []) {
+      if (spec.type === 'ImportSpecifier' && spec.local) {
+        ctx.needed.set(nameOf(spec.imported), nameOf(spec.local));
+        preExistingImports.add(nameOf(spec.imported));
+      }
+    }
+  }
+
+  // ---- 2. Transform JSX elements ----------------------------------------
+  root.find(j.JSXElement).forEach(path => {
+    const element = path.node;
+    const sourcePath = resolveJsxPath(element.openingElement.name);
+    if (!sourcePath) return;
+    // Resolve by BINDING, not by name. `function F({ Card })` shadows the
+    // import with the caller's object, and rewriting its JSX to bestax's
+    // `Card.FooterItem` changed which component rendered.
+    const jsxHead = jsxNameParts(element.openingElement.name)?.[0];
+    if (jsxHead && !resolvesToBinding(path, jsxHead, programScope)) {
+      return;
+    }
+
+    const mapping = resolveMapping(sourcePath);
+    const dotted = sourcePath.join('.');
+
+    if (!mapping) {
+      ctx.retained.add(sourcePath[0]);
+      addTodo(
+        ctx,
+        path,
+        'unknown-component',
+        `\`${dotted}\` is not a known bloomer export; migrate it by hand`
+      );
+      return;
+    }
+
+    if (mapping.status === 'todo') {
+      ctx.retained.add(sourcePath[0]);
+      addTodo(
+        ctx,
+        path,
+        `component:${dotted}`,
+        `\`${dotted}\` — ${mapping.todo ?? 'migrate by hand'}`
+      );
+      return;
+    }
+
+    // Structural special first — it may pick the target or replace the node.
+    let target = mapping.target;
+    const handled = new Set<string>();
+    if (mapping.special) {
+      const result = runSpecial(mapping.special, ctx, path, element);
+      if (result.replaced) return;
+      if (result.target) target = result.target;
+      for (const prop of result.handledProps ?? []) handled.add(prop);
+    }
+    // A parent's structural handler may have picked this element's target.
+    const override = ctx.overrides.get(element);
+    if (override) target = override;
+
+    if (!target) return;
+
+    // Rename to the bestax name, aliasing the import root on collision.
+    const [targetRoot, ...targetRest] = target.split('.');
+    const localTarget = [ctx.reserve(targetRoot), ...targetRest].join('.');
+    const currentParts = jsxNameParts(element.openingElement.name);
+    if (!currentParts || currentParts.join('.') !== localTarget) {
+      renameElement(j, element, localTarget);
+      ctx.dirty = true;
+    }
+
+    // Helper shapes: `isDisplay` / `isHidden` on every element, plus the
+    // Column size and offset objects.
+    const kind = mapping.special
+      ? (RESPONSIVE_KINDS[mapping.special] ?? 'generic')
+      : 'generic';
+    flattenResponsiveProps(ctx, path, element, kind);
+
+    // Component-specific prop actions, then the universal helper pass.
+    if (mapping.props) {
+      for (const attr of [...attributesOf(element)]) {
+        const name = attr.name.name;
+        const action = mapping.props[name];
+        if (!action || handled.has(name)) continue;
+        handled.add(name);
+        applyPropAction(ctx, path, element, attr, action);
+      }
+    }
+    applyUniversalProps(ctx, path, element, handled, UNIVERSAL_PROPS);
+  });
+
+  // ---- 2b. Value references to bloomer components ---------------------------
+  // Components can be referenced as plain values too (`as={Block}`, passed to
+  // helpers, …). JSX usages were renamed above; map the leftover identifier
+  // references so the pruned bloomer import doesn't strand them.
+  // A shorthand property's key and value are the SAME node, so the walker
+  // reaches it twice. The first visit rewrites it and detaches the original;
+  // the second then matched neither key nor value and fell through to the
+  // generic "referenced as a value" branch, emitting a spurious TODO and
+  // marking the root retained when it was not.
+  const handledValueRefs = new WeakSet<object>();
+
+  root.find(j.Identifier).forEach(path => {
+    // find(Identifier) also matches JSXIdentifier (a subtype) — JSX names
+    // were already handled by the element walker above.
+    if (path.node.type !== 'Identifier') return;
+    if (handledValueRefs.has(path.node)) return;
+    const name = path.node.name;
+    const imported = imports.get(name);
+    if (imported === undefined) return;
+    // Resolve by BINDING, not by name: a local that shadows the import is a
+    // different object, and rewriting it repoints the code at bestax's
+    // component.
+    if (!resolvesToBinding(path, name, programScope)) {
+      return;
+    }
+    const parentNode = path.parent?.node;
+    const parentType = parentNode?.type;
+    if (
+      parentType === 'ImportSpecifier' ||
+      parentType === 'ImportDefaultSpecifier' ||
+      parentType === 'ImportNamespaceSpecifier' ||
+      parentType === 'JSXOpeningElement' ||
+      parentType === 'JSXClosingElement' ||
+      parentType === 'JSXMemberExpression'
+    ) {
+      return;
+    }
+    // A namespace binding in a real value position. `bloomer.Button` is still a
+    // mappable component reference, so fall through to the member-expression
+    // branch below with an empty prefix (the namespace itself is not part of
+    // the bloomer path). Anything else — a bare `bloomer` — just pins the import.
+    const isNamespace = imported === '*';
+    if (
+      isNamespace &&
+      !(
+        parentType === 'MemberExpression' &&
+        parentNode.object === path.node &&
+        !parentNode.computed
+      )
+    ) {
+      namespaceStillReferenced = true;
+      return;
+    }
+    // Non-reference positions: member property names and object keys.
+    if (
+      parentType === 'MemberExpression' &&
+      parentNode.property === path.node &&
+      !parentNode.computed
+    ) {
+      return;
+    }
+    // Member-expression value references (`Card.Header`, `Tag.Group` used as
+    // expressions): resolve the full chain; when the bestax target is the same
+    // dotted chain the runtime compound still exists — only flag (or rewrite,
+    // for flat single-name targets) when it differs.
+    if (
+      parentType === 'MemberExpression' &&
+      parentNode.object === path.node &&
+      !parentNode.computed
+    ) {
+      // Walk the full chain: `Card.Footer.Item` is one path, not
+      // `Card.Footer` with a stray `.Item`. Resolving only the first level
+      // left the tail pointing at a compound bestax does not have
+      // (bestax exposes `Card.FooterItem`).
+      const memberPath = isNamespace ? [] : [imported];
+      let outer: any = path.parent;
+      while (
+        outer?.node?.type === 'MemberExpression' &&
+        !outer.node.computed &&
+        outer.node.property?.type === 'Identifier'
+      ) {
+        memberPath.push(nameOf(outer.node.property));
+        const next = outer.parent;
+        if (
+          next?.node?.type === 'MemberExpression' &&
+          next.node.object === outer.node
+        ) {
+          outer = next;
+        } else {
+          break;
+        }
+      }
+      const memberMapping = resolveMapping(memberPath);
+      const dotted = memberPath.join('.');
+      // Only a namespace chain can resolve: a flat bloomer component has no
+      // members of its own, so `Box.anything` is never a component reference.
+      if (
+        isNamespace &&
+        memberMapping &&
+        memberMapping.status !== 'todo' &&
+        memberMapping.target &&
+        !memberMapping.special
+      ) {
+        // `B.CardHeaderTitle` → `Card.Header.Title`: the namespace prefix has
+        // to go and the target may be dotted, so rebuild the whole chain from
+        // the target rather than renaming anything in place.
+        const [targetRoot, ...targetRest] = memberMapping.target.split('.');
+        let rebuilt: any = j.identifier(ctx.reserve(targetRoot));
+        for (const part of targetRest) {
+          rebuilt = j.memberExpression(rebuilt, j.identifier(part));
+        }
+        outer.replace(rebuilt);
+        ctx.dirty = true;
+        return;
+      }
+      addTodo(
+        ctx,
+        outer,
+        'value-reference',
+        `\`${isNamespace ? `${name}.` : ''}${dotted}\` is referenced as a value; migrate this usage by hand`
+      );
+      if (isNamespace) namespaceStillReferenced = true;
+      else ctx.retained.add(imported);
+      return;
+    }
+    if (
+      (parentType === 'ObjectProperty' || parentType === 'Property') &&
+      parentNode.key === path.node &&
+      !parentNode.shorthand
+    ) {
+      return;
+    }
+    // A shorthand property is both the key and the reference. Renaming the
+    // node in place rewrote the object's PUBLIC key
+    // (`{ Textarea }` → `{ TextArea }`), so expand it instead: the key keeps
+    // the name callers use, the value points at the migrated binding.
+    if (
+      (parentType === 'ObjectProperty' || parentType === 'Property') &&
+      parentNode.shorthand
+    ) {
+      const shorthandMapping = MAPPING[imported];
+      if (
+        shorthandMapping &&
+        shorthandMapping.status !== 'todo' &&
+        shorthandMapping.target &&
+        !shorthandMapping.special
+      ) {
+        const [root, ...rest] = shorthandMapping.target.split('.');
+        const local = ctx.reserve(root);
+        let value: any = j.identifier(local);
+        for (const part of rest) {
+          value = j.memberExpression(value, j.identifier(part));
+        }
+        if (rest.length > 0 || local !== name) {
+          // ast-types keeps DISTINCT key and value nodes even when
+          // `shorthand` is true, so both positions are visited. Mark both, or
+          // the second visit sees a node that matches neither the (new) key
+          // nor the (new) value and falls through to the generic branch.
+          handledValueRefs.add(parentNode.key);
+          handledValueRefs.add(parentNode.value);
+          parentNode.shorthand = false;
+          parentNode.key = j.identifier(name);
+          parentNode.value = value;
+          ctx.dirty = true;
+        }
+      } else {
+        // Mark both positions before reporting: the key and the value are
+        // distinct nodes, so an unmarked branch reports the same property
+        // twice. The AST comment dedupes, which hid this in the output while
+        // the report still double-counted it.
+        handledValueRefs.add(parentNode.key);
+        handledValueRefs.add(parentNode.value);
+        ctx.retained.add(imported);
+        addTodo(
+          ctx,
+          path,
+          'value-reference',
+          `\`${name}\` is referenced as a value; migrate this usage by hand`
+        );
+      }
+      return;
+    }
+    const mapping = MAPPING[imported];
+    if (
+      mapping &&
+      mapping.status !== 'todo' &&
+      mapping.target &&
+      !mapping.special
+    ) {
+      const [root, ...rest] = mapping.target.split('.');
+      const local = ctx.reserve(root);
+      if (rest.length > 0) {
+        // A dotted target needs a member expression, not a rename. Without
+        // this, a destructured alias used as a bare value
+        // (`const { Content } = Card; const V = Content`) fell through to the
+        // TODO branch and was left referencing a binding the destructuring
+        // pass had already deleted.
+        let value: any = j.identifier(local);
+        for (const part of rest) {
+          value = j.memberExpression(value, j.identifier(part));
+        }
+        path.replace(value);
+      } else if (local !== name) {
+        path.node.name = local;
+      }
+      ctx.dirty = true;
+    } else {
+      ctx.retained.add(imported);
+      addTodo(
+        ctx,
+        path,
+        'value-reference',
+        `\`${name}\` is referenced as a value; migrate this usage by hand`
+      );
+    }
+  });
+
+  // ---- 3. Rewrite imports -----------------------------------------------
+  if (imports.size > 0) {
+    const retainedNames = [...ctx.retained].sort((a, b) => a.localeCompare(b));
+
+    const freshNames = [...ctx.needed.entries()]
+      .filter(([imported]) => !preExistingImports.has(imported))
+      .sort((a, b) => a[0].localeCompare(b[0]));
+    const bestaxImport =
+      freshNames.length > 0
+        ? j.importDeclaration(
+            freshNames.map(([imported, local]) =>
+              j.importSpecifier(j.identifier(imported), j.identifier(local))
+            ),
+            j.stringLiteral(BESTAX)
+          )
+        : null;
+
+    let inserted = false;
+    // A retained bloomer specifier must never collide with a bestax import local
+    // (possible when one component is both JSX-migrated and value-retained).
+    const bestaxLocals = new Set(ctx.needed.values());
+    for (const path of sourceImportPaths) {
+      const node = path.node;
+      const keepSpecifiers = (node.specifiers ?? []).filter((spec: any) => {
+        // `import * as bloomer` reaches every export at once, so it has to
+        // survive whenever ANY component is retained — the JSX still says
+        // `<bloomer.Tile>`, and pruning the import leaves `bloomer is not defined`.
+        if (spec.type === 'ImportNamespaceSpecifier') {
+          return ctx.retained.size > 0 || namespaceStillReferenced;
+        }
+        // Keep a default binding rather than stranding its references.
+        if (spec.type === 'ImportDefaultSpecifier') return sawDefaultImport;
+        return (
+          spec.type === 'ImportSpecifier' &&
+          ctx.retained.has(nameOf(spec.imported)) &&
+          !bestaxLocals.has(nameOf(spec.local))
+        );
+      });
+      if (!inserted) {
+        if (existingBestax && bestaxImport) {
+          existingBestax.node.specifiers = [
+            ...(existingBestax.node.specifiers ?? []),
+            ...bestaxImport.specifiers!,
+          ];
+        } else if (bestaxImport) {
+          path.insertBefore(bestaxImport);
+        }
+        inserted = true;
+      }
+      const droppedOnCollision = (node.specifiers ?? []).filter(
+        (spec: any) =>
+          spec.type === 'ImportSpecifier' &&
+          ctx.retained.has(nameOf(spec.imported)) &&
+          bestaxLocals.has(nameOf(spec.local))
+      );
+      for (const spec of droppedOnCollision) {
+        addTodo(
+          ctx,
+          path,
+          'imports',
+          `\`${nameOf(spec.imported)}\` is retained but its local name \`${nameOf(spec.local)}\` is also a bestax import in this file; rename one of them by hand — its JSX would otherwise resolve to the bestax component`
+        );
+      }
+      if (keepSpecifiers.length > 0) {
+        node.specifiers = keepSpecifiers;
+        // Only when named/namespace bindings are being retained. An import
+        // kept solely for a broken default binding has no names to list, and
+        // already carries its own "bloomer has no default export" TODO.
+        if (retainedNames.length > 0) {
+          node.comments = node.comments ?? [];
+          const text = ` TODO(bestax-migrate): ${retainedNames.join(', ')} ${
+            retainedNames.length === 1 ? 'has' : 'have'
+          } no bestax-bulma equivalent yet — migrate and remove this import`;
+          if (!node.comments.some((c: any) => c.value === text)) {
+            node.comments.push(j.commentLine(text, true, false));
+          }
+        }
+      } else {
+        path.prune();
+      }
+      ctx.dirty = true;
+    }
+  }
+
+  // Flush the deferred stylesheet notes onto the first node that survived the
+  // import rewrite, so the drop is visible in the file and not only the report.
+  if (!ctx.dirty) return undefined;
+  // Double quotes match the dominant JSX-attribute convention; users run
+  // their own formatter afterwards anyway. Tab-indented sources keep tabs so
+  // reprinted nodes don't drift from the untouched lines around them.
+  return root.toSource({
+    quote: 'double',
+    useTabs: prefersTabs(fileInfo.source),
+  });
+}
diff --git a/bestax-migrate/src/sources/rbx/specials.ts b/bestax-migrate/src/sources/rbx/specials.ts
index 83ce4d684..84a9625cc 100644
--- a/bestax-migrate/src/sources/rbx/specials.ts
+++ b/bestax-migrate/src/sources/rbx/specials.ts
@@ -38,8 +38,11 @@ import {
 import {
   alignTarget,
   makeStripModifierProps,
+  makeStructuralHelpers,
   mergeClassName,
+  modifierClass,
   parseIconClasses,
+  restrictAsToTargets,
   type SpecialHandler,
   type SpecialResult,
 } from '../_shared/specials-utils.js';
@@ -53,35 +56,6 @@ const stripModifierProps = makeStripModifierProps(
   RESPONSIVE_BREAKPOINTS
 );
 
-/**
- * Turn a literal modifier prop into an `is-*` class fragment for an element
- * on its way to becoming plain HTML. Returns the class (or undefined) and
- * always removes the attribute.
- */
-function modifierClass(
-  ctx: TransformContext,
-  path: ASTPath<any>,
-  element: any,
-  prop: string,
-  base: string,
-  where: string
-): string {
-  const attr = findAttr(element, prop);
-  if (!attr) return base;
-  const literal = literalValueOf(attr);
-  removeAttr(element, attr);
-  if (literal.kind === 'string' || literal.kind === 'number') {
-    return `${base} is-${literal.value}`;
-  }
-  addTodo(
-    ctx,
-    path,
-    `prop:${prop}`,
-    `dynamic ${where} \`${prop}\`; add the matching is-* class by hand`
-  );
-  return base;
-}
-
 /**
  * Also strips the universal `responsive` object: responsive.ts would have
  * consumed it, but a `replaced: true` special skips that pass too, and it is
@@ -129,103 +103,19 @@ function stripHelperComponentProps(
 }
 
 /**
- * rbx puts `as` on every component, but a handler that chooses its target from
- * a prop value can land on a bestax component that has no `as` — Media.Item
- * resolves to Left/Content/Right where only Left declares one, Level.Item to
- * Left/Right/Item where only Item does, Navbar.Item to Item/Dropdown where
- * only Item does. Opting into `as` in the mapping table cannot express that,
- * so the target has to be checked after it is picked.
+ * rbx's plain-element rewrites strip both the universal helper props and the
+ * badge/tooltip/responsive props (which would otherwise ride onto the HTML
+ * tag as unknown DOM attributes — see stripHelperComponentProps).
  */
-function restrictAsToTargets(
-  ctx: TransformContext,
-  path: ASTPath<any>,
-  element: any,
-  target: string | undefined,
-  allowed: string[]
-): void {
-  const asAttr = findAttr(element, 'as');
-  if (!asAttr || (target && allowed.includes(target))) return;
-  removeAttr(element, asAttr);
-  addTodo(
-    ctx,
-    path,
-    'prop:as',
-    `bestax's \`${target}\` has no \`as\` prop (of the targets this can resolve to, only ${allowed
-      .map(a => `\`${a}\``)
-      .join(' / ')} does); render the tag directly or restructure`
-  );
-  ctx.dirty = true;
-}
-
-/** Replace the element with a plain HTML tag carrying `className`. */
-function replaceWithPlain(
-  ctx: TransformContext,
-  path: ASTPath<any>,
-  element: any,
-  tag: string,
-  className: string | undefined,
-  where: string
-): SpecialResult {
-  const merged = mergeClassName(ctx, path, element, className, where);
-  const rest = stripHelperComponentProps(
-    ctx,
-    path,
-    stripModifierProps(ctx, path, attributesOf(element), where),
-    where
-  );
-  path.replace(plainElement(ctx.j, tag, merged, rest, element.children ?? []));
-  ctx.dirty = true;
-  return { replaced: true };
-}
-
-/**
- * rbx wraps several components in a `*.Container` that owns the modifiers,
- * where bestax's component renders that wrapper itself. Move the container's
- * (already-converted) attributes onto its single child and replace the
- * container with it — otherwise both would rename to the same bestax
- * component and nest, which is invalid.
- *
- * Returns null when the element isn't the single-JSX-child shape, so the
- * caller can fall back to keeping the container.
- */
-function collapseOntoChild(
-  ctx: TransformContext,
-  path: ASTPath<any>,
-  element: any,
-  where: string,
-  expected: string
-): SpecialResult | null {
-  const children = (element.children ?? []).filter(
-    (c: any) => !(c.type === 'JSXText' && c.value.trim() === '')
-  );
-  if (children.length !== 1 || children[0].type !== 'JSXElement') return null;
-  const child = children[0];
-  // The child must be the component this container exists to wrap. rbx lets
-  // both of these containers hold something else — an `<iframe>` for a ratio
-  // box, a native `<select>` — and folding onto that put Bulma modifier props
-  // on an intrinsic element and dropped the wrapper the markup needs.
-  const childPath = ctx.resolve?.(child.openingElement?.name);
-  if (!childPath || childPath.join('.') !== expected) return null;
-
-  for (const attr of [...attributesOf(element)]) {
-    const name: string = attr.name.name;
-    if (findAttr(child, name)) {
-      addTodo(
-        ctx,
-        path,
-        `prop:${name}`,
-        `\`${where}\` folded into its child, but both set \`${name}\`; the child's value was kept — reconcile by hand`
-      );
-      continue;
-    }
-    removeAttr(element, attr);
-    addAttr(child, attr);
-  }
-
-  path.replace(child);
-  ctx.dirty = true;
-  return { replaced: true };
-}
+const { replaceWithPlain, collapseOntoChild } = makeStructuralHelpers(
+  (ctx, path, attrs, where) =>
+    stripHelperComponentProps(
+      ctx,
+      path,
+      stripModifierProps(ctx, path, attrs, where),
+      where
+    )
+);
 
 const SPECIALS: Record<string, SpecialHandler> = {
   /**
diff --git a/bestax-migrate/src/sources/registry.ts b/bestax-migrate/src/sources/registry.ts
index 376bc4e50..692930a45 100644
--- a/bestax-migrate/src/sources/registry.ts
+++ b/bestax-migrate/src/sources/registry.ts
@@ -6,10 +6,12 @@
 import type { MigrationSource } from '../types.js';
 import { reactBulmaComponents } from './react-bulma-components/index.js';
 import { rbx } from './rbx/index.js';
+import { bloomer } from './bloomer/index.js';
 
 export const SOURCES: Record<string, MigrationSource> = {
   [reactBulmaComponents.name]: reactBulmaComponents,
   [rbx.name]: rbx,
+  [bloomer.name]: bloomer,
 };
 
 export function getSource(name: string): MigrationSource | undefined {
diff --git a/telemetry-worker/src/schema.ts b/telemetry-worker/src/schema.ts
index a340a25cd..c1463296d 100644
--- a/telemetry-worker/src/schema.ts
+++ b/telemetry-worker/src/schema.ts
@@ -39,7 +39,11 @@ const ICON_LIBRARY_VALUES = [
   'material-symbols',
 ] as const;
 // bestax-migrate/src/sources/registry.ts → SOURCES
-const MIGRATE_SOURCE_VALUES = ['react-bulma-components', 'rbx'] as const;
+const MIGRATE_SOURCE_VALUES = [
+  'react-bulma-components',
+  'rbx',
+  'bloomer',
+] as const;
 // bestax-migrate/src/cli.ts → CSS_MODES
 const CSS_MODE_VALUES = ['bestax', 'bulma', 'keep'] as const;
 const PACKAGE_MANAGER_VALUES = ['npm', 'pnpm', 'yarn', 'bun'] as const;

From cff4ca4c4bb67237aa62f2e92db917c8d1ab03c8 Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 09:16:30 -0400
Subject: [PATCH 03/18] test(bestax-migrate): add the bloomer fixtures,
 kitchen-sink e2e and docs corpus

The kitchen sink typechecks the migrated app against the workspace
bestax-bulma, which is what verifies every target and prop name in the
table; leftovers.tsx holds every pattern the codemod refuses to convert
and is asserted through its TODO rules instead.

validate:corpus:bloomer migrates bloomer's own documentation Scenes at
the pinned final SHA (text only, never installed, not in CI): 39 files,
0 crashes, 0 unknown components.
---
 .../e2e/bloomer-kitchen-sink.test.ts          | 362 ++++++++++++++++++
 .../bloomer-kitchen-sink/package.input.json   |  14 +
 .../fixtures/bloomer-kitchen-sink/src/App.tsx |  20 +
 .../bloomer-kitchen-sink/src/components.tsx   | 197 ++++++++++
 .../bloomer-kitchen-sink/src/elements.tsx     |  63 +++
 .../bloomer-kitchen-sink/src/form.tsx         |  51 +++
 .../bloomer-kitchen-sink/src/grid.tsx         |  20 +
 .../bloomer-kitchen-sink/src/helpers.tsx      |  21 +
 .../bloomer-kitchen-sink/src/layout.tsx       |  31 ++
 .../bloomer-kitchen-sink/src/leftovers.tsx    | 109 ++++++
 .../bloomer-kitchen-sink/src/styles.scss      |   8 +
 bestax-migrate/package.json                   |   1 +
 .../scripts/validate-corpus-bloomer.mjs       | 160 ++++++++
 13 files changed, 1057 insertions(+)
 create mode 100644 bestax-migrate/e2e/bloomer-kitchen-sink.test.ts
 create mode 100644 bestax-migrate/fixtures/bloomer-kitchen-sink/package.input.json
 create mode 100644 bestax-migrate/fixtures/bloomer-kitchen-sink/src/App.tsx
 create mode 100644 bestax-migrate/fixtures/bloomer-kitchen-sink/src/components.tsx
 create mode 100644 bestax-migrate/fixtures/bloomer-kitchen-sink/src/elements.tsx
 create mode 100644 bestax-migrate/fixtures/bloomer-kitchen-sink/src/form.tsx
 create mode 100644 bestax-migrate/fixtures/bloomer-kitchen-sink/src/grid.tsx
 create mode 100644 bestax-migrate/fixtures/bloomer-kitchen-sink/src/helpers.tsx
 create mode 100644 bestax-migrate/fixtures/bloomer-kitchen-sink/src/layout.tsx
 create mode 100644 bestax-migrate/fixtures/bloomer-kitchen-sink/src/leftovers.tsx
 create mode 100644 bestax-migrate/fixtures/bloomer-kitchen-sink/src/styles.scss
 create mode 100644 bestax-migrate/scripts/validate-corpus-bloomer.mjs

diff --git a/bestax-migrate/e2e/bloomer-kitchen-sink.test.ts b/bestax-migrate/e2e/bloomer-kitchen-sink.test.ts
new file mode 100644
index 000000000..7026021cb
--- /dev/null
+++ b/bestax-migrate/e2e/bloomer-kitchen-sink.test.ts
@@ -0,0 +1,362 @@
+/**
+ * End-to-end gate: copy the source-only bloomer kitchen-sink app into
+ * .e2e-tmp/, run the codemod on every file, then typecheck the MIGRATED
+ * output against the real @allxsmith/bestax-bulma types (workspace
+ * dependency — bulma-ui must be built first; turbo orders this).
+ *
+ * bloomer itself is never installed: the input app is never typechecked, and
+ * leftovers.tsx — the file that exercises everything the codemod
+ * intentionally refuses to convert — is excluded from the output typecheck
+ * and asserted through its TODO annotations instead.
+ */
+
+import { spawnSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { bloomer } from '../src/sources/bloomer/index.js';
+import { runTransform } from '../src/runner.js';
+import type { TodoEntry } from '../src/types.js';
+import { compileMigratedScss } from './support/compile-scss.js';
+
+const packageRoot = path.join(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '..'
+);
+const fixtureDir = path.join(packageRoot, 'fixtures', 'bloomer-kitchen-sink');
+
+// One scratch directory PER PROCESS, not one shared path — see the comment in
+// kitchen-sink.test.ts for why (`pnpm all` runs two jest processes over this
+// file concurrently). BESTAX_E2E_KEEP=1 leaves it behind for inspection.
+const tmpRoot = path.join(packageRoot, '.e2e-tmp');
+fs.mkdirSync(tmpRoot, { recursive: true });
+const tmpDir = fs.mkdtempSync(path.join(tmpRoot, 'bloomer-kitchen-sink-'));
+
+interface MigratedApp {
+  todosByFile: Map<string, TodoEntry[]>;
+  files: string[];
+  /**
+   * package.json entries are tracked separately: every `deps` entry is a
+   * report line describing what the updater changed, not a problem the user
+   * has to fix, so they must not count against the "no TODOs" assertion.
+   */
+  depTodos: TodoEntry[];
+}
+
+function migrateKitchenSink(): MigratedApp {
+  fs.rmSync(tmpDir, { recursive: true, force: true });
+  fs.cpSync(fixtureDir, tmpDir, { recursive: true });
+
+  // The fixture manifest is not named `package.json` on disk: Dependabot treats
+  // any file with that name as a real manifest (#615). Restore the real name in
+  // the scratch copy so the pass under test still sees a genuine manifest.
+  fs.renameSync(
+    path.join(tmpDir, 'package.input.json'),
+    path.join(tmpDir, 'package.json')
+  );
+
+  const srcDir = path.join(tmpDir, 'src');
+  const files = fs.readdirSync(srcDir).filter(f => /\.(tsx?|jsx?)$/.test(f));
+  const todosByFile = new Map<string, TodoEntry[]>();
+
+  for (const file of files) {
+    const filePath = path.join(srcDir, file);
+    const source = fs.readFileSync(filePath, 'utf8');
+    const todos: TodoEntry[] = [];
+    const { output } = runTransform(bloomer.transform, file, source, {
+      add: entry => todos.push(entry),
+    });
+    if (output !== null) fs.writeFileSync(filePath, output);
+    todosByFile.set(file, todos);
+  }
+
+  const scssPath = path.join(srcDir, 'styles.scss');
+  const scssTodos: TodoEntry[] = [];
+  const scssOut = bloomer.transformStyles!(
+    'styles.scss',
+    fs.readFileSync(scssPath, 'utf8'),
+    { add: entry => scssTodos.push(entry) },
+    { cssMode: 'bestax' }
+  );
+  if (scssOut !== null) fs.writeFileSync(scssPath, scssOut);
+  todosByFile.set('styles.scss', scssTodos);
+
+  const pkgPath = path.join(tmpDir, 'package.json');
+  const pkgTodos: TodoEntry[] = [];
+  const pkgNext = bloomer.updateDependencies!(
+    'package.json',
+    JSON.parse(fs.readFileSync(pkgPath, 'utf8')),
+    { add: entry => pkgTodos.push(entry) },
+    { cssMode: 'bestax', bulmaReferenced: true, sourceStillImported: true }
+  );
+  if (pkgNext !== null) {
+    fs.writeFileSync(pkgPath, `${JSON.stringify(pkgNext, null, 2)}\n`);
+  }
+
+  return { todosByFile, files, depTodos: pkgTodos };
+}
+
+describe('bloomer kitchen-sink e2e', () => {
+  let app: MigratedApp;
+
+  beforeAll(() => {
+    app = migrateKitchenSink();
+  });
+
+  afterAll(() => {
+    if (!process.env.BESTAX_E2E_KEEP) {
+      fs.rmSync(tmpDir, { recursive: true, force: true });
+    }
+  });
+
+  it('migrates every kitchen-sink file', () => {
+    expect(app.files.sort()).toEqual([
+      'App.tsx',
+      'components.tsx',
+      'elements.tsx',
+      'form.tsx',
+      'grid.tsx',
+      'helpers.tsx',
+      'layout.tsx',
+      'leftovers.tsx',
+    ]);
+    for (const file of app.files) {
+      const migrated = fs.readFileSync(path.join(tmpDir, 'src', file), 'utf8');
+      // Only leftovers.tsx may keep its (trimmed, TODO-annotated) bloomer import.
+      if (file !== 'leftovers.tsx') {
+        expect({
+          file,
+          hasBloomer: /from ["']bloomer["']/.test(migrated),
+        }).toEqual({ file, hasBloomer: false });
+      }
+    }
+  });
+
+  it('leaves no TODOs outside leftovers.tsx, bar the Modal advisory', () => {
+    // `component:Modal` fires on EVERY conversion by design: bloomer's Modal
+    // was an inert shell, and bestax's closes on Escape and locks scroll by
+    // default. The markup migrates cleanly — this file still typechecks — but
+    // the behaviour differs, and nothing else would tell the user.
+    for (const [file, todos] of app.todosByFile) {
+      if (file === 'leftovers.tsx') continue;
+      const unexpected = todos.filter(t => t.rule !== 'component:Modal');
+      expect({ file, todos: unexpected }).toEqual({ file, todos: [] });
+    }
+    const components = app.todosByFile.get('components.tsx') ?? [];
+    expect(components.map(t => t.rule)).toEqual([
+      'component:Modal',
+      'component:Modal',
+    ]);
+  });
+
+  it('adopts the bestax combined CSS bundle in App.tsx', () => {
+    const migrated = fs.readFileSync(
+      path.join(tmpDir, 'src', 'App.tsx'),
+      'utf8'
+    );
+    expect(migrated).toContain('import "@allxsmith/bestax-bulma/bestax.css";');
+    expect(migrated).not.toContain('bulma/css/bulma.css');
+  });
+
+  it('flattens the three-shape helper props', () => {
+    const migrated = fs.readFileSync(
+      path.join(tmpDir, 'src', 'helpers.tsx'),
+      'utf8'
+    );
+    expect(migrated).toContain('displayTablet="flex"');
+    expect(migrated).toContain('visibilityTouch="hidden"');
+    expect(migrated).toContain('displayDesktopOnly="flex"');
+    expect(migrated).toContain('visibilityWidescreenOnly="hidden"');
+    expect(migrated).toContain('float="right"');
+    expect(migrated).toContain('interaction="unselectable"');
+  });
+
+  it('renames flat exports onto their dotted bestax compounds', () => {
+    const migrated = fs.readFileSync(
+      path.join(tmpDir, 'src', 'components.tsx'),
+      'utf8'
+    );
+    expect(migrated).toContain('<Card.Header.Title>');
+    expect(migrated).toContain('<Modal.Card.Head>');
+    expect(migrated).toContain('<Navbar.Dropdown hoverable>');
+    expect(migrated).toContain('<Navbar.DropdownMenu>');
+    expect(migrated).toContain('<Pagination.Next href="/p2">');
+    expect(migrated).toContain('<Tabs.Item active>');
+    expect(migrated).toMatch(
+      /import \{[^}]*\bCard\b[^}]*\bNavbar\b[^}]*\} from "@allxsmith\/bestax-bulma"/
+    );
+  });
+
+  it('migrates the SCSS entry to Bulma v1 modules', () => {
+    const scss = fs.readFileSync(
+      path.join(tmpDir, 'src', 'styles.scss'),
+      'utf8'
+    );
+    expect(scss).toContain("@use 'bulma/sass' with (");
+    expect(scss).not.toContain('~bulma/bulma');
+  });
+
+  it('compiles the migrated SCSS entry with Dart Sass', () => {
+    const scss = fs.readFileSync(
+      path.join(tmpDir, 'src', 'styles.scss'),
+      'utf8'
+    );
+    const { status, diagnostics } = compileMigratedScss(scss);
+    expect({ status, diagnostics }).toEqual({ status: 0, diagnostics: '' });
+  });
+
+  it("deletes bloomer and bumps the app's own Bulma", () => {
+    const pkg = JSON.parse(
+      fs.readFileSync(path.join(tmpDir, 'package.json'), 'utf8')
+    );
+    expect(pkg.dependencies.bloomer).toBeUndefined();
+    expect(pkg.dependencies['@allxsmith/bestax-bulma']).toBe('^5');
+    expect(pkg.dependencies.bulma).toBe('^1.0.4');
+    expect(pkg.dependencies.react).toBe('^16.2.0');
+    expect(pkg.devDependencies['node-sass']).toBeUndefined();
+    expect(pkg.devDependencies.sass).toBe('^1.79.0');
+  });
+
+  it('reports the dependency changes and the React 16 peer gap', () => {
+    const messages = app.depTodos.map(t => `${t.rule}: ${t.message}`);
+    expect(messages).toContain('deps: removed bloomer from dependencies');
+    expect(messages).toContain(
+      'deps: bumped bulma to ^1.0.4 in dependencies (was pre-1.0)'
+    );
+    expect(messages.some(m => /still import it/.test(m))).toBe(true);
+    expect(messages.some(m => m.startsWith('peer-deps: react ^16.2.0'))).toBe(
+      true
+    );
+  });
+
+  it('annotates every intentionally unsupported pattern in leftovers.tsx', () => {
+    const todos = app.todosByFile.get('leftovers.tsx') ?? [];
+    const rules = new Set(todos.map(t => t.rule));
+    for (const rule of [
+      'imports',
+      'value-reference',
+      'component:Tile',
+      'component:Nav',
+      'component:NavToggle',
+      'component:Heading',
+      'component:Dropdown',
+      'component:DropdownTrigger',
+      'component:DropdownMenu',
+      'component:DropdownContent',
+      'component:Icon',
+      'prop:tag',
+      'prop:render',
+      'prop:isGrid',
+      'prop:isBold',
+      'prop:isHalfHeight',
+      'prop:isSize',
+      'prop:isSpaced',
+      'prop:isActive',
+      'prop:hasAddons',
+      'prop:isAlign',
+      'prop:isFullWidth',
+      'prop:isLink',
+      'prop:isDisplay',
+      'prop:isHidden',
+      'prop:hasTextColor',
+    ]) {
+      expect({ rule, present: rules.has(rule) }).toEqual({
+        rule,
+        present: true,
+      });
+    }
+    const migrated = fs.readFileSync(
+      path.join(tmpDir, 'src', 'leftovers.tsx'),
+      'utf8'
+    );
+    expect(migrated).toContain('TODO(bestax-migrate)');
+    // Unmappable components keep a trimmed, TODO-annotated bloomer import.
+    expect(migrated).toMatch(/from ["']bloomer["']/);
+    expect(migrated).toContain('<p className="heading">');
+  });
+
+  it('documents every TODO rule it emits in the skill reference', () => {
+    // A rule with no recipe is a dead end for the user reading the report.
+    const skillDir = path.join(packageRoot, '..', 'skills', 'bestax-migrate');
+    const refsDir = path.join(skillDir, 'references', 'bloomer');
+    const refs = [
+      ...fs
+        .readdirSync(refsDir)
+        .filter(f => f.endsWith('.md'))
+        .map(f => path.join(refsDir, f)),
+      path.join(skillDir, 'SKILL.md'),
+    ]
+      .map(f => fs.readFileSync(f, 'utf8'))
+      .join('\n');
+
+    const emitted = new Set<string>();
+    for (const todos of app.todosByFile.values()) {
+      for (const todo of todos) emitted.add(todo.rule);
+    }
+    for (const todo of app.depTodos) emitted.add(todo.rule);
+    expect(emitted.size).toBeGreaterThan(0);
+
+    // Match documented rule TOKENS, not substrings (see the rbx e2e for why).
+    const tokens = new Set(
+      [...refs.matchAll(/(?:component|prop):[A-Za-z][\w.*]*/g)].map(m => m[0])
+    );
+    const backticked = new Set(
+      [...refs.matchAll(/`([A-Za-z][\w.-]*)`/g)].map(m => m[1])
+    );
+
+    const documented = (rule: string): boolean => {
+      if (tokens.has(rule)) return true;
+      if (rule.startsWith('component:')) {
+        const parent = rule.slice('component:'.length).split('.')[0];
+        return (
+          tokens.has(`component:${parent}.*`) ||
+          tokens.has(`component:${parent}`)
+        );
+      }
+      if (rule.startsWith('prop:')) {
+        return backticked.has(rule.slice('prop:'.length));
+      }
+      return backticked.has(rule);
+    };
+
+    const undocumented = [...emitted].sort().filter(r => !documented(r));
+    expect(undocumented).toEqual([]);
+  });
+
+  it('typechecks the migrated output against @allxsmith/bestax-bulma', () => {
+    fs.writeFileSync(
+      path.join(tmpDir, 'global.d.ts'),
+      "declare module '*.css';\ndeclare module '*.scss';\n"
+    );
+    fs.writeFileSync(
+      path.join(tmpDir, 'tsconfig.json'),
+      JSON.stringify(
+        {
+          compilerOptions: {
+            strict: true,
+            noEmit: true,
+            jsx: 'react-jsx',
+            module: 'ESNext',
+            target: 'ES2022',
+            moduleResolution: 'bundler',
+            lib: ['ES2022', 'DOM', 'DOM.Iterable'],
+            skipLibCheck: true,
+          },
+          include: ['src/**/*', 'global.d.ts'],
+          exclude: ['src/leftovers.tsx'],
+        },
+        null,
+        2
+      )
+    );
+    const result = spawnSync('pnpm', ['exec', 'tsc', '-p', tmpDir], {
+      cwd: packageRoot,
+      encoding: 'utf8',
+    });
+    const diagnostics = `${result.stdout ?? ''}\n${result.stderr ?? ''}`.trim();
+    expect({ status: result.status, diagnostics }).toEqual({
+      status: 0,
+      diagnostics: '',
+    });
+  }, 120000);
+});
diff --git a/bestax-migrate/fixtures/bloomer-kitchen-sink/package.input.json b/bestax-migrate/fixtures/bloomer-kitchen-sink/package.input.json
new file mode 100644
index 000000000..ad5d959af
--- /dev/null
+++ b/bestax-migrate/fixtures/bloomer-kitchen-sink/package.input.json
@@ -0,0 +1,14 @@
+{
+  "name": "bloomer-kitchen-sink",
+  "private": true,
+  "version": "0.0.0",
+  "dependencies": {
+    "bloomer": "^0.6.5",
+    "bulma": "^0.6.2",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
+  "devDependencies": {
+    "node-sass": "^4.9.0"
+  }
+}
diff --git a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/App.tsx b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/App.tsx
new file mode 100644
index 000000000..bda399757
--- /dev/null
+++ b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/App.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import "bulma/css/bulma.css";
+import "./styles.scss";
+import { Elements } from "./elements";
+import { Components } from "./components";
+import { FormControls } from "./form";
+import { Layout } from "./layout";
+import { Grid } from "./grid";
+import { Helpers } from "./helpers";
+
+export const App = () => (
+  <>
+    <Elements />
+    <Components open={false} />
+    <FormControls />
+    <Layout />
+    <Grid />
+    <Helpers />
+  </>
+);
diff --git a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/components.tsx b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/components.tsx
new file mode 100644
index 000000000..379d4b4cd
--- /dev/null
+++ b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/components.tsx
@@ -0,0 +1,197 @@
+import React from "react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Card,
+  CardContent,
+  CardFooter,
+  CardFooterItem,
+  CardHeader,
+  CardHeaderIcon,
+  CardHeaderTitle,
+  CardImage,
+  Level,
+  LevelItem,
+  LevelLeft,
+  LevelRight,
+  Media,
+  MediaContent,
+  MediaLeft,
+  MediaRight,
+  Menu,
+  MenuLabel,
+  MenuLink,
+  MenuList,
+  Message,
+  MessageBody,
+  MessageHeader,
+  Modal,
+  ModalBackground,
+  ModalCard,
+  ModalCardBody,
+  ModalCardFooter,
+  ModalCardHeader,
+  ModalCardTitle,
+  ModalClose,
+  ModalContent,
+  Navbar,
+  NavbarBrand,
+  NavbarBurger,
+  NavbarDivider,
+  NavbarDropdown,
+  NavbarEnd,
+  NavbarItem,
+  NavbarLink,
+  NavbarMenu,
+  NavbarStart,
+  Page,
+  PageControl,
+  PageEllipsis,
+  PageLink,
+  PageList,
+  Pagination,
+  Panel,
+  PanelBlock,
+  PanelHeading,
+  PanelIcon,
+  PanelTab,
+  PanelTabs,
+  Tab,
+  TabLink,
+  TabList,
+  Tabs,
+} from "bloomer";
+
+export const Components = ({ open }: { open: boolean }) => (
+  <>
+    <Breadcrumb isAlign="centered" hasSeparator="arrow" isSize="small">
+      <BreadcrumbItem>
+        <a href="/">Home</a>
+      </BreadcrumbItem>
+      <BreadcrumbItem isActive>
+        <a href="/here">Here</a>
+      </BreadcrumbItem>
+    </Breadcrumb>
+    <Card>
+      <CardHeader>
+        <CardHeaderTitle>Title</CardHeaderTitle>
+        <CardHeaderIcon>
+          <span>?</span>
+        </CardHeaderIcon>
+      </CardHeader>
+      <CardImage>
+        <img src="a.png" alt="" />
+      </CardImage>
+      <CardContent>Body</CardContent>
+      <CardFooter>
+        <CardFooterItem>Save</CardFooterItem>
+      </CardFooter>
+    </Card>
+    <Level isMobile>
+      <LevelLeft>
+        <LevelItem>Left</LevelItem>
+      </LevelLeft>
+      <LevelRight>
+        <LevelItem href="/all">All</LevelItem>
+      </LevelRight>
+    </Level>
+    <Media tag="div">
+      <MediaLeft tag="figure">img</MediaLeft>
+      <MediaContent>text</MediaContent>
+      <MediaRight>x</MediaRight>
+    </Media>
+    <Menu>
+      <MenuLabel>General</MenuLabel>
+      <MenuList>
+        <MenuLink isActive href="/">
+          Dashboard
+        </MenuLink>
+      </MenuList>
+    </Menu>
+    <Message isColor="info">
+      <MessageHeader>Hello</MessageHeader>
+      <MessageBody>World</MessageBody>
+    </Message>
+    <Modal isActive={open}>
+      <ModalBackground />
+      <ModalCard>
+        <ModalCardHeader>
+          <ModalCardTitle>Modal title</ModalCardTitle>
+        </ModalCardHeader>
+        <ModalCardBody>Content</ModalCardBody>
+        <ModalCardFooter>Footer</ModalCardFooter>
+      </ModalCard>
+      <ModalClose isSize="large" />
+    </Modal>
+    <Modal isActive>
+      <ModalBackground />
+      <ModalContent>Plain</ModalContent>
+    </Modal>
+    <Navbar isTransparent>
+      <NavbarBrand>
+        <NavbarItem href="/">Logo</NavbarItem>
+        <NavbarBurger isActive={open} />
+      </NavbarBrand>
+      <NavbarMenu isActive={open}>
+        <NavbarStart>
+          <NavbarItem isActive>Home</NavbarItem>
+          <NavbarItem hasDropdown isHoverable>
+            <NavbarLink>More</NavbarLink>
+            <NavbarDropdown>
+              <NavbarItem href="/about">About</NavbarItem>
+              <NavbarDivider />
+              <NavbarItem>Jobs</NavbarItem>
+            </NavbarDropdown>
+          </NavbarItem>
+        </NavbarStart>
+        <NavbarEnd>
+          <NavbarItem tag="div">
+            <span>Log in</span>
+          </NavbarItem>
+        </NavbarEnd>
+      </NavbarMenu>
+    </Navbar>
+    <Pagination isAlign="right" isSize="medium">
+      <PageControl>Previous</PageControl>
+      <PageControl isNext href="/p2">
+        Next
+      </PageControl>
+      <PageList>
+        <Page>
+          <PageLink>1</PageLink>
+        </Page>
+        <Page>
+          <PageEllipsis />
+        </Page>
+        <Page>
+          <PageLink isCurrent href="/p46">
+            46
+          </PageLink>
+        </Page>
+      </PageList>
+    </Pagination>
+    <Panel>
+      <PanelHeading>Repositories</PanelHeading>
+      <PanelTabs>
+        <PanelTab isActive>All</PanelTab>
+        <PanelTab>Public</PanelTab>
+      </PanelTabs>
+      <PanelBlock isActive href="/repo">
+        <PanelIcon>
+          <i className="fas fa-book" />
+        </PanelIcon>
+        bestax
+      </PanelBlock>
+    </Panel>
+    <Tabs isAlign="centered" isBoxed isSize="small" isFullWidth>
+      <TabList>
+        <Tab isActive>
+          <TabLink href="#one">One</TabLink>
+        </Tab>
+        <Tab>
+          <TabLink>Two</TabLink>
+        </Tab>
+      </TabList>
+    </Tabs>
+  </>
+);
diff --git a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/elements.tsx b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/elements.tsx
new file mode 100644
index 000000000..77b8ccd59
--- /dev/null
+++ b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/elements.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import {
+  Box,
+  Button,
+  Content,
+  Delete,
+  Icon,
+  Image,
+  Notification,
+  Progress,
+  Subtitle,
+  Table,
+  Tag,
+  Title,
+} from "bloomer";
+
+export const Elements = () => (
+  <Box>
+    <Title isSize={1} isSpaced>
+      Kitchen sink
+    </Title>
+    <Subtitle isSize={4} tag="h2">
+      Every mapped element
+    </Subtitle>
+    <Content isSize="medium">
+      <p>Body copy</p>
+    </Content>
+    <Button isColor="primary" isSize="small" isOutlined>
+      One
+    </Button>
+    <Button isLink isInverted isStatic>
+      Two
+    </Button>
+    <Button isLoading isFullWidth isActive isHovered isFocused>
+      Three
+    </Button>
+    <Button href="/next" isColor="info">
+      Next
+    </Button>
+    <Tag isColor="info" isSize="medium">
+      tag
+    </Tag>
+    <Delete isSize="small" />
+    <Notification isColor="warning">Careful</Notification>
+    <Progress isColor="danger" value={40} max={100} isSize="medium" />
+    <Icon className="fas fa-home" isSize="large" />
+    <Icon className="mdi mdi-account" />
+    <Image isSize="128x128" src="a.png" />
+    <Image isRatio="16:9" src="b.png" />
+    <Table isBordered isStriped isNarrow isFullWidth>
+      <thead>
+        <tr>
+          <th>Name</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Value</td>
+        </tr>
+      </tbody>
+    </Table>
+  </Box>
+);
diff --git a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/form.tsx b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/form.tsx
new file mode 100644
index 000000000..4f145f458
--- /dev/null
+++ b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/form.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+import {
+  Checkbox,
+  Control,
+  Field,
+  FieldBody,
+  FieldLabel,
+  Help,
+  Icon,
+  Input,
+  Label,
+  Radio,
+  Select,
+  TextArea,
+} from "bloomer";
+
+export const FormControls = () => (
+  <form>
+    <Field isHorizontal>
+      <FieldLabel isNormal>
+        <Label isSize="small">Name</Label>
+      </FieldLabel>
+      <FieldBody>
+        <Field isGrouped="right" hasAddons>
+          <Control hasIcons="left" isExpanded isLoading>
+            <Input isColor="danger" isSize="medium" isFocused placeholder="Name" />
+            <Icon isAlign="left" className="fas fa-user" isSize="small" />
+          </Control>
+          <Control hasIcons={["left", "right"]}>
+            <Input type="email" isHovered />
+          </Control>
+          <Control hasIcons>
+            <TextArea isSize="large" isHovered rows={3} />
+          </Control>
+        </Field>
+        <Help isColor="danger">Required</Help>
+      </FieldBody>
+    </Field>
+    <Field isGrouped>
+      <Control>
+        <Select isColor="primary" isLoading isFullWidth>
+          <option>A</option>
+        </Select>
+      </Control>
+      <Control>
+        <Checkbox name="remember"> Remember me</Checkbox>
+        <Radio name="answer" value="y"> Yes</Radio>
+      </Control>
+    </Field>
+  </form>
+);
diff --git a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/grid.tsx b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/grid.tsx
new file mode 100644
index 000000000..96bfd9c87
--- /dev/null
+++ b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/grid.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { Column, Columns } from "bloomer";
+
+export const Grid = () => (
+  <>
+    <Columns isMultiline isVCentered isMobile>
+      <Column isSize={4} isOffset={2}>
+        a
+      </Column>
+      <Column isSize="1/2">b</Column>
+      <Column isSize="narrow">c</Column>
+      <Column isSize={{ default: "full", mobile: 8, tablet: "2/3", touch: "narrow" }} isOffset={{ desktop: "1/4" }}>
+        d
+      </Column>
+    </Columns>
+    <Columns isDesktop isGapless isCentered>
+      <Column isSize="3/4">e</Column>
+    </Columns>
+  </>
+);
diff --git a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/helpers.tsx b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/helpers.tsx
new file mode 100644
index 000000000..251a1699a
--- /dev/null
+++ b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/helpers.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import { Box, Container, Section } from "bloomer";
+
+export const Helpers = () => (
+  <Section isSize="medium" isPaddingless>
+    <Container isFluid hasTextAlign="centered" hasTextColor="grey-light">
+      <Box isDisplay="flex-tablet" isHidden="touch" isClearfix>
+        one
+      </Box>
+      <Box isDisplay={["inline-block", "flex-desktop-only"]} isHidden={["mobile", "widescreen-only"]}>
+        two
+      </Box>
+      <Box isDisplay={{ flex: ["default", "tablet"], block: "mobile" }} isHidden isMarginless>
+        three
+      </Box>
+      <Box isPulled="right" isOverlay isUnselectable hasTextColor="black-ter">
+        four
+      </Box>
+    </Container>
+  </Section>
+);
diff --git a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/layout.tsx b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/layout.tsx
new file mode 100644
index 000000000..d8041a402
--- /dev/null
+++ b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/layout.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import {
+  Container,
+  Footer,
+  Hero,
+  HeroBody,
+  HeroFooter,
+  HeroHeader,
+  HeroVideo,
+  Section,
+} from "bloomer";
+
+export const Layout = () => (
+  <>
+    <Hero isColor="primary" isSize="medium">
+      <HeroHeader>Head</HeroHeader>
+      <HeroBody>Body</HeroBody>
+      <HeroFooter>Foot</HeroFooter>
+    </Hero>
+    <Hero isFullHeight isColor="dark">
+      <HeroVideo isTransparent>
+        <video />
+      </HeroVideo>
+      <HeroBody>Tall</HeroBody>
+    </Hero>
+    <Section isSize="large">
+      <Container isFluid>Wide</Container>
+    </Section>
+    <Footer tag="div">Bye</Footer>
+  </>
+);
diff --git a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/leftovers.tsx b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/leftovers.tsx
new file mode 100644
index 000000000..d2e46e43a
--- /dev/null
+++ b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/leftovers.tsx
@@ -0,0 +1,109 @@
+// Everything the bloomer codemod intentionally refuses to convert. This file
+// is EXCLUDED from the e2e's typecheck of the migrated output — a `todo`
+// PropAction deliberately leaves the original attribute in place next to its
+// TODO comment, so the result is not expected to compile. The e2e asserts the
+// TODO rules instead.
+import React from "react";
+import {
+  Box,
+  Button,
+  Columns,
+  Dropdown,
+  DropdownContent,
+  DropdownItem,
+  DropdownMenu,
+  DropdownTrigger,
+  Field,
+  Heading,
+  Hero,
+  Icon,
+  Input,
+  Media,
+  Nav,
+  NavItem,
+  NavLeft,
+  NavToggle,
+  Subtitle,
+  TabList,
+  Tabs,
+  Tile,
+  Title,
+  withHelpersModifiers,
+} from "bloomer";
+import "bloomer/lib/elements/Box";
+
+const Plain = (props: { className?: string }) => <div {...props} />;
+const Helped = withHelpersModifiers(Plain);
+
+export const Leftovers = ({
+  go,
+  dim,
+}: {
+  go: (p: object) => JSX.Element;
+  dim: string;
+}) => (
+  <Box tag="section" hasTextColor="white-ter">
+    {/* Bulma v1 replaced tiles with Grid/Cell. */}
+    <Tile isAncestor>
+      <Tile isParent isSize={4}>
+        <Tile isChild>tile</Tile>
+      </Tile>
+    </Tile>
+
+    {/* Bulma 0.4's nav, gone since 0.5 */}
+    <Nav>
+      <NavLeft>
+        <NavItem isActive>Home</NavItem>
+      </NavLeft>
+      <NavToggle />
+    </Nav>
+
+    {/* Bulma v1 no longer styles .heading */}
+    <Heading>Label</Heading>
+
+    {/* bestax's Dropdown renders its own trigger and menu */}
+    <Dropdown isActive>
+      <DropdownTrigger>
+        <Button>Open</Button>
+      </DropdownTrigger>
+      <DropdownMenu>
+        <DropdownContent>
+          <DropdownItem>A</DropdownItem>
+        </DropdownContent>
+      </DropdownMenu>
+    </Dropdown>
+
+    {/* no bestax prop for these Bulma modifiers */}
+    <Columns isGrid>
+      <div />
+    </Columns>
+    <Hero isBold isHalfHeight>
+      hero
+    </Hero>
+    <Media isSize="large">media</Media>
+    <Subtitle isSpaced>sub</Subtitle>
+    <Input isActive />
+    <Field hasAddons="fullwidth">
+      <Input />
+    </Field>
+    <Tabs>
+      <TabList isAlign="center">
+        <li />
+      </TabList>
+    </Tabs>
+    <Title isSize={3} isFullWidth>
+      Wide
+    </Title>
+
+    {/* the render prop, and Font Awesome 4 classes */}
+    <Button render={go} isLink isColor="info">
+      Rendered
+    </Button>
+    <Icon className="fa fa-github" />
+
+    {/* dynamic helper values */}
+    <Box isDisplay={dim} isHidden={dim === "x"} />
+
+    <Helped isMarginless>helped</Helped>
+  </Box>
+);
diff --git a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/styles.scss b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/styles.scss
new file mode 100644
index 000000000..777204615
--- /dev/null
+++ b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/styles.scss
@@ -0,0 +1,8 @@
+$primary: #1e6b99;
+$family-sans-serif: "Nunito", sans-serif;
+
+@import "~bulma/bulma";
+
+.app {
+  padding: 1rem;
+}
diff --git a/bestax-migrate/package.json b/bestax-migrate/package.json
index 14c8b37a7..4788537d4 100644
--- a/bestax-migrate/package.json
+++ b/bestax-migrate/package.json
@@ -19,6 +19,7 @@
     "typecheck": "tsc --noEmit",
     "validate:corpus": "pnpm run build && node scripts/validate-corpus.mjs",
     "validate:corpus:rbx": "pnpm run build && node scripts/validate-corpus-rbx.mjs",
+    "validate:corpus:bloomer": "pnpm run build && node scripts/validate-corpus-bloomer.mjs",
     "format": "prettier --write \"src/**/*.{ts,tsx}\" \"e2e/**/*.ts\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx}\" \"e2e/**/*.ts\"",
     "clean": "rimraf dist",
diff --git a/bestax-migrate/scripts/validate-corpus-bloomer.mjs b/bestax-migrate/scripts/validate-corpus-bloomer.mjs
new file mode 100644
index 000000000..523736abc
--- /dev/null
+++ b/bestax-migrate/scripts/validate-corpus-bloomer.mjs
@@ -0,0 +1,160 @@
+/**
+ * Dev-time corpus validation: run the bloomer transform over the library's
+ * OWN documentation — author-written, MIT-licensed JSX covering every
+ * component — and score the result.
+ *
+ * bloomer's docs are neither Storybook stories nor MDX: they are React
+ * "Scene" components under `docs/src/Scenes/Documentation/**` that render the
+ * library through a relative import of its `src/` (44 files at the pinned
+ * SHA), plus the docs app's own shell. Each file is migrated as written after
+ * one substitution — the relative `…/src` specifier becomes `'bloomer'`, the
+ * way a consumer imports it — so the corpus exercises exactly the JSX the
+ * author shipped, including the `Highlight` code-string examples beside it
+ * (which are text, and expected to pass through untouched).
+ *
+ * The corpus is fetched as TEXT at a pinned commit into the gitignored
+ * .e2e-tmp/ directory; it is never installed, executed, typechecked, or
+ * committed (bloomer must never become a dependency of this repo).
+ * Deliberately NOT wired into CI — no third-party fetches in the pipeline;
+ * run it locally before releases or after mapping changes:
+ *
+ *   pnpm --filter bestax-migrate validate:corpus:bloomer
+ *
+ * Exit 1 on any transform crash or `unknown-component` TODO (the vendored
+ * bloomer surface would be incomplete). Before/after copies land in
+ * .e2e-tmp/corpus-out-bloomer/ for eyeball review.
+ */
+
+import { spawnSync } from 'node:child_process';
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const REPO_URL = 'https://github.com/AlgusDark/bloomer.git';
+// master as of 2018-10-30 — bloomer's final commit; the repository is
+// archived, so this never moves. Bump deliberately if it ever does.
+const PINNED_SHA = 'b9af8271840c9a52ecf493f3b1f919d8cd3e5fc1';
+
+const packageRoot = path.join(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '..'
+);
+const corpusDir = path.join(packageRoot, '.e2e-tmp', 'corpus', 'bloomer');
+const outDir = path.join(packageRoot, '.e2e-tmp', 'corpus-out-bloomer');
+const distTransform = path.join(
+  packageRoot,
+  'dist',
+  'sources',
+  'bloomer',
+  'transform.js'
+);
+const distRunner = path.join(packageRoot, 'dist', 'runner.js');
+
+function fail(message) {
+  console.error(`✖ ${message}`);
+  process.exit(1);
+}
+
+if (!fs.existsSync(distTransform)) {
+  fail('dist/ not built — run `pnpm --filter bestax-migrate build` first');
+}
+
+// ---- fetch the corpus (text only) at the pinned commit --------------------
+if (!fs.existsSync(path.join(corpusDir, 'docs', 'src'))) {
+  console.log(`Fetching bloomer @ ${PINNED_SHA.slice(0, 12)} (text corpus)…`);
+  fs.rmSync(corpusDir, { recursive: true, force: true });
+  fs.mkdirSync(corpusDir, { recursive: true });
+  const run = args => {
+    const result = spawnSync('git', args, { cwd: corpusDir, encoding: 'utf8' });
+    if (result.status !== 0) fail(`git ${args.join(' ')}: ${result.stderr}`);
+  };
+  run(['init', '-q']);
+  run(['remote', 'add', 'origin', REPO_URL]);
+  run(['fetch', '-q', '--depth', '1', 'origin', PINNED_SHA]);
+  run(['checkout', '-q', 'FETCH_HEAD']);
+}
+
+// ---- collect the docs sources -------------------------------------------
+const docsRoot = path.join(corpusDir, 'docs', 'src');
+const docsFiles = [];
+(function walk(dir) {
+  for (const entry of fs.readdirSync(dir).sort()) {
+    const full = path.join(dir, entry);
+    if (fs.statSync(full).isDirectory()) walk(full);
+    else if (entry.endsWith('.tsx')) docsFiles.push(full);
+  }
+})(docsRoot);
+
+if (docsFiles.length === 0) fail('no .tsx files found in the docs corpus');
+
+const { default: transform } = await import(distTransform);
+const { runTransform } = await import(distRunner);
+
+/** The docs import the library from its source tree; a consumer imports the package. */
+const SRC_IMPORT = /(from\s+['"])(?:\.\/)?(?:\.\.\/)+src(['"])/g;
+
+fs.rmSync(outDir, { recursive: true, force: true });
+fs.mkdirSync(outDir, { recursive: true });
+
+let consumers = 0;
+let transformed = 0;
+const crashes = [];
+const todosByRule = new Map();
+const unknownComponents = [];
+
+for (const file of docsFiles) {
+  const rel = path.relative(docsRoot, file);
+  const original = fs.readFileSync(file, 'utf8');
+  if (!SRC_IMPORT.test(original)) continue;
+  SRC_IMPORT.lastIndex = 0;
+  consumers += 1;
+  const source = original.replace(SRC_IMPORT, '$1bloomer$2');
+  const name = rel.replace(/[\\/]/g, '__').replace(/\.tsx$/, '');
+
+  const todos = [];
+  let output;
+  try {
+    output = runTransform(transform, rel, source, {
+      add: entry => todos.push(entry),
+    }).output;
+  } catch (error) {
+    crashes.push({ rel, message: error.message });
+    continue;
+  }
+  if (output !== null) transformed += 1;
+  fs.writeFileSync(path.join(outDir, `${name}.before.tsx`), source);
+  fs.writeFileSync(path.join(outDir, `${name}.after.tsx`), output ?? source);
+  for (const todo of todos) {
+    todosByRule.set(todo.rule, (todosByRule.get(todo.rule) ?? 0) + 1);
+    if (todo.rule === 'unknown-component') {
+      unknownComponents.push(`${rel}:${todo.line} ${todo.message}`);
+    }
+  }
+}
+
+// ---- scorecard -------------------------------------------------------------
+console.log('\nbestax-migrate corpus validation — bloomer docs Scenes');
+console.log(`  files:        ${docsFiles.length}`);
+console.log(`  consumers:    ${consumers}`);
+console.log(`  transformed:  ${transformed}`);
+console.log(`  crashes:      ${crashes.length}`);
+const rules = [...todosByRule.entries()].sort((a, b) => b[1] - a[1]);
+console.log(
+  `  TODOs:        ${rules.reduce((sum, [, count]) => sum + count, 0)}`
+);
+for (const [rule, count] of rules) {
+  console.log(`    ${rule}: ${count}`);
+}
+console.log(`  review dir:   ${path.relative(packageRoot, outDir)}`);
+
+for (const crash of crashes) {
+  console.error(`  ✖ crash in ${crash.rel}: ${crash.message}`);
+}
+for (const unknown of unknownComponents) {
+  console.error(`  ✖ unknown component: ${unknown}`);
+}
+
+if (crashes.length > 0 || unknownComponents.length > 0) {
+  fail('corpus validation found defects (see above)');
+}
+console.log('\n✓ corpus validation passed');

From 16e77651e4b25a94298e16705a032153668da557 Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 09:16:31 -0400
Subject: [PATCH 04/18] docs(bestax-migrate): document the bloomer source
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Migration guide, per-source skill references (component map generated
from the mapping and held to it by a test, prop map with the tag → as
list held to it by a test, a recipe for every TODO rule the e2e emits),
the SKILL.md source table, and the rosters that name the sources. The
MCP index picks the new references up by construction.
---
 README.md                                     |   2 +-
 bestax-mcp/data/skills.json                   |  19 +-
 bestax-migrate/CLAUDE.md                      |  37 +--
 bestax-migrate/README.md                      |  22 +-
 .../__tests__/component-map-doc.test.ts       |  91 ++++++++
 .../sources/bloomer/__tests__/tag-doc.test.ts |  74 ++++++
 .../getting-started/migration/bloomer.md      | 147 ++++++++++++
 .../guides/getting-started/migration/index.md |   6 +
 .../guides/getting-started/migration/rbx.md   |   4 +
 .../migration/react-bulma-components.md       |   3 +-
 docs/docs/skills/intro.md                     |   5 +-
 docs/docs/skills/migrate.mdx                  |  15 +-
 scripts/gen-mcp-index.test.mjs                |   3 +
 skills/README.md                              |  26 +--
 skills/bestax-migrate/SKILL.md                |  22 +-
 .../references/bloomer/component-map.md       | 156 +++++++++++++
 .../references/bloomer/prop-map.md            | 105 +++++++++
 .../references/bloomer/unmappables.md         | 212 ++++++++++++++++++
 .../references/css-migration.md               |   7 +-
 19 files changed, 898 insertions(+), 58 deletions(-)
 create mode 100644 bestax-migrate/src/sources/bloomer/__tests__/component-map-doc.test.ts
 create mode 100644 bestax-migrate/src/sources/bloomer/__tests__/tag-doc.test.ts
 create mode 100644 docs/docs/guides/getting-started/migration/bloomer.md
 create mode 100644 skills/bestax-migrate/references/bloomer/component-map.md
 create mode 100644 skills/bestax-migrate/references/bloomer/prop-map.md
 create mode 100644 skills/bestax-migrate/references/bloomer/unmappables.md

diff --git a/README.md b/README.md
index 3801a1d7f..62c32e6b8 100644
--- a/README.md
+++ b/README.md
@@ -167,7 +167,7 @@ Building with an AI agent (Claude Code, Cursor, Copilot)? bestax-bulma ships LLM
   | `bestax-custom-component` | Building a new custom component beyond stock Bulma, the bestax way               |
   | `bestax-icons`            | Adding icons — Icon/IconText and the five supported icon libraries               |
   | `bestax-optimize`         | Shrinking the built CSS — flavor builds, modular Sass, import hygiene            |
-  | `bestax-migrate`          | Moving an app off react-bulma-components (v4) onto bestax-bulma                  |
+  | `bestax-migrate`          | Moving an app off react-bulma-components, rbx or bloomer onto bestax-bulma       |
 
   ```bash
   npx skills add https://github.com/allxsmith/bestax --skill bestax-layout-scaffold
diff --git a/bestax-mcp/data/skills.json b/bestax-mcp/data/skills.json
index 837b012c8..a6da7da60 100644
--- a/bestax-mcp/data/skills.json
+++ b/bestax-mcp/data/skills.json
@@ -81,14 +81,29 @@
     },
     {
       "name": "bestax-migrate",
-      "description": "Migrate an existing app from an unmaintained React Bulma library — react-bulma-components (v4) or rbx (v2) — to @allxsmith/bestax-bulma on Bulma v1. Run the bestax-migrate codemod, then resolve every TODO(bestax-migrate) comment it leaves using the per-source mapping references. Use when a repo imports react-bulma-components or rbx and wants to move to bestax-bulma, when TODO(bestax-migrate) comments are present in a codebase, or when asked to migrate off an unmaintained React Bulma library.",
+      "description": "Migrate an existing app from an unmaintained React Bulma library — react-bulma-components (v4), rbx (v2) or bloomer (0.6) — to @allxsmith/bestax-bulma on Bulma v1. Run the bestax-migrate codemod, then resolve every TODO(bestax-migrate) comment it leaves using the per-source mapping references. Use when a repo imports react-bulma-components, rbx or bloomer and wants to move to bestax-bulma, when TODO(bestax-migrate) comments are present in a codebase, or when asked to migrate off an unmaintained React Bulma library.",
       "promptName": "migrate",
       "dir": "bestax-migrate",
       "references": [
+        {
+          "id": "bloomer-component-map",
+          "file": "references/bloomer/component-map.md",
+          "bytes": 10697
+        },
+        {
+          "id": "bloomer-prop-map",
+          "file": "references/bloomer/prop-map.md",
+          "bytes": 12738
+        },
+        {
+          "id": "bloomer-unmappables",
+          "file": "references/bloomer/unmappables.md",
+          "bytes": 10973
+        },
         {
           "id": "css-migration",
           "file": "references/css-migration.md",
-          "bytes": 8555
+          "bytes": 8622
         },
         {
           "id": "rbx-component-map",
diff --git a/bestax-migrate/CLAUDE.md b/bestax-migrate/CLAUDE.md
index aa234ede2..a9cfe6e9b 100644
--- a/bestax-migrate/CLAUDE.md
+++ b/bestax-migrate/CLAUDE.md
@@ -2,23 +2,23 @@
 
 jscodeshift-based CLI (`pnpm dlx bestax-migrate <source> <paths…>`) that migrates existing
 apps from other React Bulma libraries to `@allxsmith/bestax-bulma`. Multi-source by design:
-each source library registers in `src/sources/registry.ts`. Two are shipped —
-`react-bulma-components` (v4 only) and `rbx` (v2 only).
+each source library registers in `src/sources/registry.ts`. Three are shipped —
+`react-bulma-components` (v4 only), `rbx` (v2 only) and `bloomer` (0.6 only).
 
 ## Hard rules
 
 - **No source library is EVER installed anywhere in this repo** (supply-chain policy) —
-  not react-bulma-components, not rbx. Fixtures are read as _text_ (`__testfixtures__`,
-  `fixtures/kitchen-sink`, `fixtures/rbx-kitchen-sink`); the migration _input_ is never
+  not react-bulma-components, not rbx, not bloomer. Fixtures are read as _text_ (`__testfixtures__`,
+  `fixtures/kitchen-sink`, `fixtures/rbx-kitchen-sink`, `fixtures/bloomer-kitchen-sink`); the migration _input_ is never
   typechecked or executed. Validation typechecks the migrated _output_ against the
-  workspace `@allxsmith/bestax-bulma`. The two kitchen-sink manifests are named
+  workspace `@allxsmith/bestax-bulma`. The kitchen-sink manifests are named
   `package.input.json`, not `package.json`: Dependabot's alert graph treats any file with
   that name as a real manifest whatever the lockfile says, and opened a security-update PR
   against the rbx fixture's deliberately-old `node-sass` (#615). The e2e renames its copy
   back inside `.e2e-tmp`, so the pass under test still sees a genuine `package.json`.
 - Mapping-table first: each source's `mapping.ts` is its single source of truth. Every
   export of that library must have an entry (`mapped`/`partial`/`todo`) — the
-  `mapping-coverage` test walks the vendored `RBC_EXPORTS` / `RBX_EXPORTS` list against it,
+  `mapping-coverage` test walks the vendored `RBC_EXPORTS` / `RBX_EXPORTS` / `BLOOMER_EXPORTS` list against it,
   in both directions, so the table cannot grow an entry for something the library never
   exported either. New coverage is a table edit (plus a `special` handler in `specials.ts`
   when structure changes).
@@ -26,11 +26,15 @@ each source library registers in `src/sources/registry.ts`. Two are shipped —
   everything library-agnostic: `jsx-utils.ts` (AST helpers + `TransformContext`),
   `props.ts` (the `PropAction` interpreter — its universal table is a parameter, not an
   import), `imports.ts` (binding collection and import aliasing), `specials-utils.ts`
-  (`alignTarget`, `mergeClassName`, `parseIconClasses`, and the `stripModifierProps`
-  factory), and `make-styles-transform.ts` (the whole Bulma 0.9→v1 stylesheet transform,
+  (`alignTarget`, `mergeClassName`, `parseIconClasses`, `modifierClass`, `restrictAsToTargets`,
+  the `stripModifierProps` factory and the `makeStructuralHelpers` factory behind
+  `replaceWithPlain`/`collapseOntoChild`), `viewports.ts` (Bulma's nine viewports → bestax's
+  prop suffixes), and `make-styles-transform.ts` (the whole Bulma 0.9→v1 stylesheet transform,
   parameterised by the source package's own specifiers). What stays per-source is the data
   — `mapping.ts`, `specials.ts`, `responsive.ts`, `deps.ts` — plus a `transform.ts` that
-  orchestrates them.
+  orchestrates them. bloomer's is the plain one: its exports are flat, so it has no
+  destructuring pass, no alias registry and no wrapping pass; the rbx and RBC copies still
+  carry all three.
 - `'<source>'` must be added to `MIGRATE_SOURCE_VALUES` in `telemetry-worker/src/schema.ts`
   or its events are dropped at ingest; `check:conformance --only=telemetry-allowlists`
   fails until it is. That worker deploys to production on merge, so the two land together.
@@ -43,12 +47,14 @@ each source library registers in `src/sources/registry.ts`. Two are shipped —
 - **A TODO message is a claim about bestax; read the component before writing it.** Four
   shipped on #613 were false (Modal "always closes on Escape"; a Field TODO naming `isGrouped`).
   The rbx e2e fails on an undocumented rule (RBC's does not); nothing checks the guidance is true.
-- **A defect in one source's `transform.ts` is almost certainly in the other.** Nine fixes were
-  ported RBC↔rbx on #613 and review kept finding the unported half. Fix the sibling in the same
-  commit, or move the logic into `_shared/`.
+- **A defect in one source's `transform.ts` is almost certainly in the others.** Nine fixes were
+  ported RBC↔rbx on #613 and review kept finding the unported half. Fix the siblings in the same
+  commit, or move the logic into `_shared/` (the alias registry, the literal/object helpers
+  and the structural-handler helpers went there on #410 for exactly this reason).
 - **Resolve references by binding, not by identifier text.** Every serious bug on #613 came
-  from a name-keyed map (`function F(Header)` became `F(Card.Header)`). Use `aliasAt` in each
-  `transform.ts` (duplicated; hoist it): ancestors decide ownership, `scope.lookup` vetoes a nearer binding.
+  from a name-keyed map (`function F(Header)` became `F(Card.Header)`). Use
+  `makeAliasRegistry` from `_shared/imports.ts`: ancestors decide ownership, `scope.lookup`
+  vetoes a nearer binding.
 - **The report may only describe what actually happened.** The manifest headline said "bumped
   bulma" in most manifest shapes where nothing was bumped. Track each mutation; phrase from it.
 - **The stylesheet and manifest passes must agree on what is removable.** Both report rather
@@ -107,6 +113,9 @@ each source library registers in `src/sources/registry.ts`. Two are shipped —
     script extracts the `<Playground>` blocks out of its 43 `*.docs.mdx` pages (254 blocks)
     and rebuilds each page as one synthetic module written the way a consumer writes rbx.
     Output lands in `.e2e-tmp/corpus-out-rbx/`.
+  - `validate:corpus:bloomer` — bloomer's own MIT docs: 39 React "Scene" `.tsx` files that
+    render the library through a relative `src` import, migrated as written after that
+    specifier becomes `'bloomer'`. Output lands in `.e2e-tmp/corpus-out-bloomer/`.
 
   The corpus is the only check that sees breadth; the kitchen-sink e2e is the only one that
   sees bestax's _real_ prop names. Both are needed — the rbx e2e's typecheck caught six
diff --git a/bestax-migrate/README.md b/bestax-migrate/README.md
index 8a74f058d..22d1344ad 100644
--- a/bestax-migrate/README.md
+++ b/bestax-migrate/README.md
@@ -13,10 +13,11 @@ Codemods that migrate existing React apps to [`@allxsmith/bestax-bulma`](https:/
 
 Currently supported source libraries:
 
-| Source                                                                           | Status                                                              |
-| -------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
-| [`react-bulma-components`](https://github.com/couds/react-bulma-components) (v4) | ✅ All 32 components mapped (a few patterns are flagged as TODOs)   |
-| [`rbx`](https://github.com/dfee/rbx) (v2)                                        | ✅ Full export surface mapped (a few patterns are flagged as TODOs) |
+| Source                                                                           | Status                                                                             |
+| -------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| [`react-bulma-components`](https://github.com/couds/react-bulma-components) (v4) | ✅ All 32 components mapped (a few patterns are flagged as TODOs)                  |
+| [`rbx`](https://github.com/dfee/rbx) (v2)                                        | ✅ Full export surface mapped (a few patterns are flagged as TODOs)                |
+| [`bloomer`](https://github.com/AlgusDark/bloomer) (0.6)                          | ✅ All 108 exports mapped (Font Awesome 4 icons and Bulma 0.4's `Nav` are flagged) |
 
 Pass the source library as the first argument: `bestax-migrate <source> <paths…>`.
 
@@ -33,8 +34,9 @@ the app being migrated — the source is read as text and is never executed.
 ```bash
 # Preview what would change (no writes)
 pnpm dlx bestax-migrate react-bulma-components src/ --dry
-# …or, for an rbx app
+# …or, for an rbx or bloomer app
 pnpm dlx bestax-migrate rbx src/ --dry
+pnpm dlx bestax-migrate bloomer src/ --dry
 
 # Apply the migration
 pnpm dlx bestax-migrate react-bulma-components src/
@@ -45,14 +47,14 @@ npm and yarn work too: `npx bestax-migrate …` / `yarn dlx bestax-migrate …`.
 The codemod uses [jscodeshift](https://github.com/facebook/jscodeshift) to:
 
 - rewrite the source library's imports to `@allxsmith/bestax-bulma` (including destructuring and namespace imports)
-- rename components and compound sub-components (`Form.Textarea` → `TextArea`, `Card.Footer.Item` → `Card.FooterItem`, `Hero.Footer` → `Hero.Foot`, …)
+- rename components and compound sub-components (`Form.Textarea` → `TextArea`, `Card.Footer.Item` → `Card.FooterItem`, `Hero.Footer` → `Hero.Foot`, …) — and, for bloomer, its flat names onto bestax's compounds (`CardHeaderTitle` → `Card.Header.Title`)
 - convert props (`renderAs` → `as`, `loading` → `isLoading`, numeric spacing/text sizes → string unions, `textAlign="center"` → `textAlign="centered"`, …)
-- flatten responsive breakpoint objects (`mobile={{ size: 4 }}` → `sizeMobile={4}`)
+- flatten responsive breakpoint objects (`mobile={{ size: 4 }}` → `sizeMobile={4}`) and bloomer's `isDisplay`/`isHidden` strings, arrays and objects (`isHidden="touch"` → `visibilityTouch="hidden"`)
 - restructure patterns bestax models differently (`Table.Container`, Navbar dropdowns, `Form.Help`, icon-font children → `<Icon name=…>`)
 - migrate stylesheets: CSS imports converge on `@allxsmith/bestax-bulma/bestax.css`, and SCSS files move from Bulma 0.9's `@import` + `$var !default` overrides to `@use 'bulma/sass' with (…)` plus `@use '@allxsmith/bestax-bulma/scss/extras'`
-- update `package.json`: remove the source library, add `@allxsmith/bestax-bulma`, raise a declared pre-1.0 `bulma` to `^1` (adding it only when your sources import `bulma/…` directly — otherwise it arrives transitively), and swap the dead `node-sass` for dart `sass` (no install is ever run). Migrating **rbx** is what frees an app from Bulma 0.7.5: rbx pinned it as a _direct_ dependency, so the app could not choose its own Bulma version at all. The four Bulma extensions rbx also pulled in (`bulma-badge`, `bulma-divider`, `bulma-pageloader`, `bulma-tooltip`) are **reported rather than removed** — bestax replaces all four, but a manifest entry is a deliberate declaration and your own Sass may import them
+- update `package.json`: remove the source library, add `@allxsmith/bestax-bulma`, raise a declared pre-1.0 `bulma` to `^1` (adding it only when your sources import `bulma/…` directly — otherwise it arrives transitively), and swap the dead `node-sass` for dart `sass` (no install is ever run). Migrating **rbx** is what frees an app from Bulma 0.7.5: rbx pinned it as a _direct_ dependency, so the app could not choose its own Bulma version at all. The four Bulma extensions rbx also pulled in (`bulma-badge`, `bulma-divider`, `bulma-pageloader`, `bulma-tooltip`) are **reported rather than removed** — bestax replaces all four, but a manifest entry is a deliberate declaration and your own Sass may import them. A **bloomer** app declared its own Bulma 0.6, which is what gets bumped
 
-Anything without a safe automatic conversion is left in place with a `// TODO(bestax-migrate): …` comment, and the run ends with a report of every TODO by file and line. TODOs are expected output, not errors — resolve them with the migration guide ([react-bulma-components](https://bestax.io/docs/guides/getting-started/migration/react-bulma-components), [rbx](https://bestax.io/docs/guides/getting-started/migration/rbx)), or let the [`bestax-migrate` Agent Skill](https://bestax.io/docs/skills/intro) walk them for you:
+Anything without a safe automatic conversion is left in place with a `// TODO(bestax-migrate): …` comment, and the run ends with a report of every TODO by file and line. TODOs are expected output, not errors — resolve them with the migration guide ([react-bulma-components](https://bestax.io/docs/guides/getting-started/migration/react-bulma-components), [rbx](https://bestax.io/docs/guides/getting-started/migration/rbx), [bloomer](https://bestax.io/docs/guides/getting-started/migration/bloomer)), or let the [`bestax-migrate` Agent Skill](https://bestax.io/docs/skills/intro) walk them for you:
 
 ```bash
 npx skills add https://github.com/allxsmith/bestax --skill bestax-migrate
@@ -74,7 +76,7 @@ npx skills add https://github.com/allxsmith/bestax --skill bestax-migrate
 2. Search for `TODO(bestax-migrate)` and resolve each comment
 3. Typecheck/build and review the rendered app
 
-Full walkthrough: [react-bulma-components migration guide](https://bestax.io/docs/guides/getting-started/migration/react-bulma-components) · [rbx migration guide](https://bestax.io/docs/guides/getting-started/migration/rbx).
+Full walkthrough: [react-bulma-components migration guide](https://bestax.io/docs/guides/getting-started/migration/react-bulma-components) · [rbx migration guide](https://bestax.io/docs/guides/getting-started/migration/rbx) · [bloomer migration guide](https://bestax.io/docs/guides/getting-started/migration/bloomer).
 
 ## Hardened by default
 
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/component-map-doc.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/component-map-doc.test.ts
new file mode 100644
index 000000000..a4a3d5edf
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__tests__/component-map-doc.test.ts
@@ -0,0 +1,91 @@
+/**
+ * The skill's component map is a SHIPPED product surface — served through the
+ * MCP index and bundled into create-bestax — so an agent follows it as
+ * instructions. When it disagrees with `MAPPING`, it does not merely mislead:
+ * it reproduces whatever bug the code was changed to fix.
+ *
+ * That is not hypothetical: the rbx `Loader` fix changed the code and left
+ * three doc surfaces teaching the old mapping, so following the skill
+ * recreated the bug the commit had just removed.
+ *
+ * `mapping-coverage.test.ts` holds `MAPPING` to bloomer's export surface. This
+ * holds the shipped table to `MAPPING`.
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { BLOOMER_EXPORTS, MAPPING } from '../mapping.js';
+import type { ComponentMapping } from '../../../types.js';
+
+const DOC = path.join(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '../../../../../skills/bestax-migrate/references/bloomer/component-map.md'
+);
+
+/**
+ * Prettier rewrites markdown emphasis to underscores when it formats the
+ * shipped file, so compare on a normalised form rather than the literal
+ * asterisks the generator emits.
+ */
+const norm = (cell: string): string => cell.replace(/[*_]/g, '');
+
+/** How the generated table renders one entry's target column. */
+function renderTarget(entry: ComponentMapping): string {
+  if (entry.status === 'todo') return '— *(see unmappables)*';
+  if (entry.target) return `\`${entry.target}\``;
+  return entry.special ? '*structural*' : '*namespace*';
+}
+
+/** Every dotted path the table is expected to carry, in MAPPING order. */
+function expectedRows(): Array<[string, string, string]> {
+  const rows: Array<[string, string, string]> = [];
+  const walk = (entry: ComponentMapping, dotted: string): void => {
+    rows.push([dotted, renderTarget(entry), entry.status]);
+    for (const [name, sub] of Object.entries(entry.subs ?? {})) {
+      walk(sub, `${dotted}.${name}`);
+    }
+  };
+  for (const name of Object.keys(BLOOMER_EXPORTS).sort()) {
+    if (MAPPING[name]) walk(MAPPING[name], name);
+  }
+  return rows;
+}
+
+describe('the shipped bloomer component map matches MAPPING', () => {
+  // Only the FIRST table — the later "value-chosen targets" table is also
+  // three columns and would otherwise be parsed as mapping rows.
+  const full = fs.readFileSync(DOC, 'utf8');
+  const text = full.slice(0, full.indexOf('## The renames worth memorising'));
+
+  /** Parse that table's data rows into [rbx, target, status]. */
+  const parsed = text
+    .split('\n')
+    .filter(l => /^\|\s*`[A-Za-z]/.test(l))
+    .map(l =>
+      l
+        .replace(/^\||\|$/g, '')
+        .split('|')
+        .map(c => c.trim())
+    )
+    .filter(cells => cells.length === 3)
+    .map(cells => [cells[0].replace(/`/g, ''), cells[1], cells[2]] as const);
+
+  it('lists every mapping entry, and nothing else', () => {
+    const expected = expectedRows().map(r => r[0]);
+    const actual = parsed.map(r => r[0]);
+    expect(actual).toEqual(expected);
+  });
+
+  it('renders the right target and status for each', () => {
+    const expected = expectedRows();
+    for (const [dotted, target, status] of expected) {
+      const row = parsed.find(r => r[0] === dotted);
+      expect({ dotted, row: row && norm(row[1]) }).toEqual({
+        dotted,
+        row: norm(target),
+      });
+      expect({ dotted, status: row?.[2] }).toEqual({ dotted, status });
+    }
+  });
+});
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/tag-doc.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/tag-doc.test.ts
new file mode 100644
index 000000000..7c14a10f8
--- /dev/null
+++ b/bestax-migrate/src/sources/bloomer/__tests__/tag-doc.test.ts
@@ -0,0 +1,74 @@
+/**
+ * bloomer's `tag` is on nearly every component; bestax's `as` is on a subset.
+ * The prop-map documents which components carry it over, and that list is a
+ * shipped product surface an agent follows. This holds the list to the table
+ * — every component the mapping renames `tag` → `as` must be named there, and
+ * nothing else may be — and pins the three behaviours the codemod promises:
+ * the rename, the TODO elsewhere, and the plain-element tags.
+ */
+
+import fs from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { MAPPING } from '../mapping.js';
+import transform from '../transform.js';
+import { runTransform } from '../../../runner.js';
+import type { TodoEntry } from '../../../types.js';
+
+const DOC = path.join(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '../../../../../skills/bestax-migrate/references/bloomer/prop-map.md'
+);
+
+function migrate(source: string) {
+  const todos: TodoEntry[] = [];
+  const { output } = runTransform(transform, 'case.tsx', source, {
+    add: entry => todos.push(entry),
+  });
+  return { output: output ?? '', rules: todos.map(t => t.rule) };
+}
+
+const renamesTag = Object.entries(MAPPING)
+  .filter(([, entry]) => entry.props?.tag?.rename === 'as')
+  .map(([name]) => name)
+  .sort();
+
+describe('the documented `tag` → `as` list', () => {
+  it('names exactly the components whose mapping renames tag to as', () => {
+    const doc = fs.readFileSync(DOC, 'utf8');
+    const section = doc.slice(
+      doc.indexOf('## `tag` → `as`'),
+      doc.indexOf('Everywhere else `tag` is left in place')
+    );
+    const listed = [...section.matchAll(/`([A-Z][A-Za-z]*)`/g)]
+      .map(m => m[1])
+      .sort();
+    expect(listed).toEqual(renamesTag);
+  });
+
+  test.each(renamesTag)('%s carries a literal tag over as `as`', name => {
+    const { output, rules } = migrate(
+      `import { ${name} } from 'bloomer';\nexport const A = () => <${name} tag="span">x</${name}>;\n`
+    );
+    expect(rules).not.toContain('prop:tag');
+    expect(output).toContain('as="span"');
+    expect(output).not.toContain('tag=');
+  });
+
+  it('flags tag on a component whose bestax counterpart has no `as`', () => {
+    const { output, rules } = migrate(
+      'import { Box } from \'bloomer\';\nexport const A = () => <Box tag="section">x</Box>;\n'
+    );
+    expect(rules).toEqual(['prop:tag']);
+    expect(output).toContain('<Box tag="section">');
+  });
+
+  it('honours a literal tag on markup that becomes plain HTML', () => {
+    const { output, rules } = migrate(
+      'import { Help, TabLink } from \'bloomer\';\nexport const A = () => <><Help tag="span">a</Help><TabLink tag="button">b</TabLink></>;\n'
+    );
+    expect(rules).toEqual([]);
+    expect(output).toContain('<span className="help">a</span>');
+    expect(output).toContain('<button>b</button>');
+  });
+});
diff --git a/docs/docs/guides/getting-started/migration/bloomer.md b/docs/docs/guides/getting-started/migration/bloomer.md
new file mode 100644
index 000000000..7eb2780c6
--- /dev/null
+++ b/docs/docs/guides/getting-started/migration/bloomer.md
@@ -0,0 +1,147 @@
+---
+title: Migrating from bloomer
+sidebar_label: From bloomer
+sidebar_position: 7
+---
+
+# Migrating from bloomer
+
+[`bloomer`](https://github.com/AlgusDark/bloomer) was the first typed React wrapper for Bulma —
+its last commit was **October 2018** and the repository is archived. `@allxsmith/bestax-bulma` is
+actively maintained, targets **Bulma v1** (CSS variables, dark mode, Grid), and covers the same
+component surface.
+
+bloomer users are frozen on two axes at once:
+
+- **Bulma 0.6.** bloomer never depended on Bulma itself; its README told you to install one, and
+  the one you installed is from 2017. Its class vocabulary predates the v1 rewrite entirely, so
+  there is no incremental path forward.
+- **React 16.** bloomer peer-depends on React `^16.2` and is built on `create-react-class`, so it
+  cannot follow you to React 19.
+
+Migrating clears both. The codemod removes **bloomer**, bumps the Bulma your app declared to v1,
+and moves you to `@allxsmith/bestax-bulma`.
+
+:::tip See how they compare
+For a capability-by-capability comparison of bestax against the other major React libraries, see
+the latest edition of [**The State of React**](/blog/tags/state-of-react).
+:::
+
+## Run the codemod
+
+```bash
+# Preview the changes and the TODO report without writing anything
+pnpm dlx bestax-migrate bloomer src/ --dry
+
+# Apply it
+pnpm dlx bestax-migrate bloomer src/
+```
+
+(`npx bestax-migrate …` works the same.) Useful flags: `--print` echoes transformed files to
+stdout; `--extensions` controls which files are considered (default
+`js,jsx,ts,tsx,scss,sass`); `--css bestax|bulma|keep` picks the stylesheet target
+(default `bestax`); `--no-deps` skips the package.json update.
+
+The codemod uses [jscodeshift](https://github.com/facebook/jscodeshift) to rewrite your source
+in place:
+
+- **Imports** — `bloomer` → `@allxsmith/bestax-bulma`, including namespace imports. A default
+  import (bloomer never had one) or a deep `bloomer/lib/…` import is flagged.
+- **Components** — every one of bloomer's 108 exports is mapped. bloomer's names are flat and
+  bestax's are compound, so most rename onto a dotted target: `CardHeaderTitle` →
+  `Card.Header.Title`, `ModalCardFooter` → `Modal.Card.Foot`, `NavbarBurger` → `Navbar.Burger`,
+  `HeroFooter` → `Hero.Foot`, `MenuLink` → `Menu.Item`, `Tab` → `Tabs.Item`, `PageLink` →
+  `Pagination.Link`, `Subtitle` → `SubTitle`. `PageControl` becomes `Pagination.Previous` or
+  `Pagination.Next` from its `isNext`; `NavbarItem hasDropdown` becomes the `Navbar.Dropdown`
+  container and `NavbarDropdown` its `Navbar.DropdownMenu`.
+- **Props** — bloomer's `is*` booleans are already bestax's (`isActive`, `isLoading`,
+  `isOutlined`, `isBordered`, …) and pass through. The value props are renamed per component:
+  `isColor` → `color`, `isSize` → `size` (numbers stay numbers on `Title`/`Subtitle`), `isAlign`
+  → `alignment` / `align` / `right`, `hasTextAlign` → `textAlign`, `hasTextColor` →
+  `textColor`, `isPulled` → `float`, `isMarginless` → `m="0"`, `tag` → `as` where bestax
+  declares one, `Button isLink` → `color="link"`, `Field isGrouped` → `grouped`,
+  `Control hasIcons` → `hasIconsLeft`/`hasIconsRight`.
+- **Helpers** — `isDisplay` and `isHidden`, in all three of their shapes, flatten onto bestax's
+  per-viewport props: `isDisplay="flex-tablet"` → `displayTablet="flex"`,
+  `isDisplay={{ flex: ['default', 'tablet'] }}` → `display="flex" displayTablet="flex"`,
+  `isHidden="touch"` → `visibilityTouch="hidden"`. Every Bulma viewport has a bestax prop,
+  `touch` and the `-only` ones included. `Column isSize="1/2"` → `size="half"`, and its
+  per-breakpoint object → `sizeMobile`/`sizeTablet`/…
+- **Structure** — wrappers bestax renders itself fold away: `Page` onto its `PageLink`,
+  `TabLink` into a plain `<a>` inside `Tabs.Item`. `Help`, `Label`, `Heading`, `BreadcrumbItem`,
+  `PanelTab` and `HeroVideo` become the plain Bulma markup bloomer rendered. Icon-font classes
+  the codemod can read (Font Awesome 5/6, MDI) become `<Icon name="…" library="…" />`.
+- **Stylesheets** — your `bulma/css/bulma.css` import becomes the bestax bundle, and a Sass
+  `@import "~bulma/bulma"` with its `$variable` overrides becomes `@use "bulma/sass" with (…)`.
+- **package.json** — `bloomer` is removed, `@allxsmith/bestax-bulma` added, your pre-1 `bulma`
+  bumped to `^1.0.4`, and the dead `node-sass` swapped for dart `sass`. bloomer's own
+  `create-react-class`/`prop-types` are left alone if you declared them.
+
+## The TODO report
+
+Anything the codemod cannot convert safely is left in place with a
+`// TODO(bestax-migrate): …` comment on the enclosing statement, and summarised in a report at
+the end of the run. Nothing is ever silently dropped or best-guessed.
+
+The ones you are most likely to see, in the order they show up when the codemod is run over
+bloomer's own documentation:
+
+| What                 | Why                                                                                                                         | What to do                                                                                                                |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `component:Icon`     | bloomer's icons are Font Awesome 4 class names on the `Icon`'s own `className`; bestax's optional Font Awesome peer is 6.7+ | The classes are kept on an `<i>` child; keep FA4 loaded, or switch to `<Icon name="home" library="fa" variant="solid" />` |
+| `component:Nav`      | `Nav`, `NavLeft`, `NavRight`, `NavItem`, `NavToggle` are Bulma 0.4's `.nav`, removed in 0.5                                 | Rebuild on [`Navbar`](/docs/api/components/navbar)                                                                        |
+| `component:Tile`     | Bulma v1 removed Tiles                                                                                                      | Use [Grid and Cell](/docs/api/grid); see the [Bulma 0.9 → 1 guide](./bulma-0-9-to-1.md)                                   |
+| `component:Modal`    | bloomer's Modal was an inert shell; bestax's closes on Escape and locks scroll by default                                   | Pass `onClose`, or `closeOnEscape={false} lockScroll={false}` to keep the old behaviour                                   |
+| `component:Dropdown` | bestax's `Dropdown` takes a `label` and renders its own trigger and menu                                                    | Move the `DropdownTrigger` content into `label`; drop the `DropdownMenu`/`DropdownContent` wrappers                       |
+| `prop:tag`           | bloomer's `tag` is on every component; bestax declares `as` on a smaller set, several narrowed to specific tags             | Render the tag directly, or restructure                                                                                   |
+| `prop:render`        | bloomer's render prop handed the computed props to your own renderer; bestax has no render-prop escape hatch                | Render the markup directly, or use `as` for a custom link component                                                       |
+
+`Tile`, the `Nav` family, the three `Dropdown` wrappers and `withHelpersModifiers` have no
+bestax counterpart, so their imports are kept (trimmed and TODO-annotated) — your app still runs
+while you migrate them by hand.
+
+:::tip Let an agent do the follow-up
+The `bestax-migrate` Agent Skill packages this whole workflow — running the codemod, then
+resolving every TODO from the per-source references:
+
+```bash
+npx skills add https://github.com/allxsmith/bestax --skill bestax-migrate
+```
+
+:::
+
+## Finish the migration
+
+1. **Install** — the codemod already rewrote `package.json`; apply it with `npm install` (or
+   pnpm/yarn). Expect a `peer-deps` report entry: bloomer peer-depended on React `^16.2` and
+   bestax-bulma needs **React 18 or 19**, so upgrade `react`/`react-dom` first.
+2. **Icons** — bloomer's era was Font Awesome 4, usually loaded from a CDN `<link>` no manifest
+   pass can see. bestax's optional Font Awesome peer is **6.7+**, where many v4 names changed
+   and brand icons moved to `variant="brands"`. Decide once whether to keep FA4 loaded or
+   convert every flagged `Icon` to the `name`/`library`/`variant` form.
+3. **Styling follow-ups** — pick a different [CSS flavor](../installation.md) if you need
+   prefixed/no-helpers/light-only builds, and read the
+   [Bulma 0.9 → 1 guide](./bulma-0-9-to-1.md) for the styling changes that aren't code-level.
+   Because your app was on Bulma **0.6**, you are crossing two Bulma majors — expect more visual
+   drift than the guide's 0.9 → 1 baseline describes. One deliberate change: `bestax.css` ships
+   `$primary` as bestax blue (`#1e6b99`) rather than Bulma's stock turquoise — keep the stock
+   look with `--css bulma`, or set your own brand color via the `--bulma-primary-*` CSS variables.
+4. **Verify** — typecheck, build, and compare the rendered app against the pre-migration UI.
+
+## Version support
+
+The codemod maps the bloomer **0.6** API (0.6.5 is the final release; every 0.6.x shares the
+same export surface). The mapping table is checked against bloomer's own export surface in both
+directions, so a component it does not know about is reported as `unknown-component` rather than
+being silently skipped.
+
+## Coming from a different library?
+
+Already supported: [**react-bulma-components**](./react-bulma-components.md)
+(`bestax-migrate react-bulma-components src/`) and [**rbx**](./rbx.md)
+(`bestax-migrate rbx src/`).
+
+If you're using a specific React Bulma package that isn't supported by the migration tool yet,
+[open a feature request](https://github.com/allxsmith/bestax/issues/new?template=feature-request.md)
+naming the package and the components you use — the codemod platform is built to grow new
+source libraries.
diff --git a/docs/docs/guides/getting-started/migration/index.md b/docs/docs/guides/getting-started/migration/index.md
index 657e922f6..247a81ac6 100644
--- a/docs/docs/guides/getting-started/migration/index.md
+++ b/docs/docs/guides/getting-started/migration/index.md
@@ -54,3 +54,9 @@ Coming from the (unmaintained) `react-bulma-components` library? The **`bestax-m
 Coming from the (abandoned since 2019) `rbx` library? The **`bestax-migrate`** codemod handles it too — and here it does more than rename things: rbx pinned `bulma@0.7.5` as a _direct_ dependency, so migrating finally lets your app choose its own Bulma version — and it flags the four Bulma extensions rbx dragged along, all of which bestax now replaces. It also unblocks React 19, which removed the `defaultProps` rbx is built on.
 
 [Read the rbx guide →](./rbx.md)
+
+## [Migrating from bloomer](./bloomer.md)
+
+Coming from `bloomer`, the oldest React Bulma wrapper (archived since 2018, Bulma 0.6, React 16)? The **`bestax-migrate`** codemod maps all 108 of its flat exports onto bestax's compound components, flattens its three-shape `isDisplay`/`isHidden` helpers, and bumps the Bulma your app declared to v1 — flagging the Font Awesome 4 icons, the Bulma 0.4 `Nav` family and everything else Bulma has since dropped.
+
+[Read the bloomer guide →](./bloomer.md)
diff --git a/docs/docs/guides/getting-started/migration/rbx.md b/docs/docs/guides/getting-started/migration/rbx.md
index a7631ef82..e7cd68ac5 100644
--- a/docs/docs/guides/getting-started/migration/rbx.md
+++ b/docs/docs/guides/getting-started/migration/rbx.md
@@ -126,6 +126,10 @@ reported as `unknown-component` rather than being silently skipped.
 
 ## Coming from a different library?
 
+Already supported: [**react-bulma-components**](./react-bulma-components.md)
+(`bestax-migrate react-bulma-components src/`) and [**bloomer**](./bloomer.md)
+(`bestax-migrate bloomer src/`).
+
 If you're using a specific React Bulma package that isn't supported by the migration tool yet,
 [open a feature request](https://github.com/allxsmith/bestax/issues/new?template=feature-request.md)
 naming the package and the components you use — the codemod platform is built to grow new
diff --git a/docs/docs/guides/getting-started/migration/react-bulma-components.md b/docs/docs/guides/getting-started/migration/react-bulma-components.md
index 04941be7d..1ff3b991e 100644
--- a/docs/docs/guides/getting-started/migration/react-bulma-components.md
+++ b/docs/docs/guides/getting-started/migration/react-bulma-components.md
@@ -140,7 +140,8 @@ named-import style first.
 
 ## Coming from a different library?
 
-Already supported: [**rbx**](./rbx.md) (`bestax-migrate rbx src/`).
+Already supported: [**rbx**](./rbx.md) (`bestax-migrate rbx src/`) and
+[**bloomer**](./bloomer.md) (`bestax-migrate bloomer src/`).
 
 If you're using a specific React Bulma package that isn't supported by the migration tool yet,
 [open a feature request](https://github.com/allxsmith/bestax/issues/new?template=feature-request.md)
diff --git a/docs/docs/skills/intro.md b/docs/docs/skills/intro.md
index 5b8a26d21..a01ca8d52 100644
--- a/docs/docs/skills/intro.md
+++ b/docs/docs/skills/intro.md
@@ -41,7 +41,8 @@ Then explore each skill — what it does, how to install it, and live examples:
   to a complete responsive page using the layout archetypes.
 - **[Icons](./icons)** — use `Icon`/`IconText` with any of the five supported icon libraries:
   per-library setup, name formats, variants, and decorative-vs-labeled accessibility.
-- **[Migrate](./migrate)** — move an existing app off `react-bulma-components`: run the
-  `bestax-migrate` codemod, then resolve every `TODO(bestax-migrate)` it leaves.
+- **[Migrate](./migrate)** — move an existing app off `react-bulma-components`, `rbx` or
+  `bloomer`: run the `bestax-migrate` codemod, then resolve every `TODO(bestax-migrate)` it
+  leaves.
 - **[Optimize](./optimize)** — reduce the built CSS size: measure raw+gzip, then the cheapest
   first-party lever that fits (lighter flavor, modular Sass build, import/asset hygiene).
diff --git a/docs/docs/skills/migrate.mdx b/docs/docs/skills/migrate.mdx
index 2960c3bb5..b33f4b5c3 100644
--- a/docs/docs/skills/migrate.mdx
+++ b/docs/docs/skills/migrate.mdx
@@ -8,7 +8,7 @@ sidebar_position: 7
 
 The [`bestax-migrate`](https://github.com/allxsmith/bestax/blob/main/skills/bestax-migrate/SKILL.md)
 skill teaches an agent to move an existing app off an unmaintained React Bulma library and onto
-`@allxsmith/bestax-bulma` on Bulma v1. Two sources are supported:
+`@allxsmith/bestax-bulma` on Bulma v1. Three sources are supported:
 
 - [`react-bulma-components`](https://github.com/couds/react-bulma-components) v4 — unmaintained
   since 2022, Bulma 0.9.x —
@@ -17,6 +17,10 @@ skill teaches an agent to move an existing app off an unmaintained React Bulma l
   direct dependency, so migrating is what frees an app to choose its own Bulma version. The
   four Bulma extensions it pulled in are reported for you to remove, not deleted —
   [guide](../guides/getting-started/migration/rbx.md)
+- [`bloomer`](https://github.com/AlgusDark/bloomer) 0.6 — archived in 2018, Bulma 0.6 era, built
+  on React 16 and `create-react-class`. Its flat exports become bestax's compound components,
+  and its Font Awesome 4 icons are the thing to watch —
+  [guide](../guides/getting-started/migration/bloomer.md)
 
 It drives the `bestax-migrate` codemod and then resolves everything the codemod flags.
 
@@ -55,17 +59,18 @@ bestax-migrate skill, and make sure the build passes when you're done.
 
 ## References bundled with the skill
 
-The mapping tables are per source — `references/react-bulma-components/` and `references/rbx/` —
-each holding the same three files:
+The mapping tables are per source — `references/react-bulma-components/`, `references/rbx/` and
+`references/bloomer/` — each holding the same three files:
 
 - `component-map.md` — every component of that library (and every compound sub-component) with
   its bestax target.
 - `prop-map.md` — the modifier-prop conversions and breakpoint-object flattening.
 - `unmappables.md` — a recipe for every `TODO(bestax-migrate)` the codemod can leave.
 
-- `references/css-migration.md` — the Bulma 0.9 → 1 CSS step, shared by both: the stylesheet
+- `references/css-migration.md` — the Bulma 0.9 → 1 CSS step, shared by all three: the stylesheet
   work is about Bulma, not about which wrapper you came from.
 
 See the full migration guides for the codemod itself:
 [react-bulma-components](../guides/getting-started/migration/react-bulma-components.md) ·
-[rbx](../guides/getting-started/migration/rbx.md).
+[rbx](../guides/getting-started/migration/rbx.md) ·
+[bloomer](../guides/getting-started/migration/bloomer.md).
diff --git a/scripts/gen-mcp-index.test.mjs b/scripts/gen-mcp-index.test.mjs
index 14fb29f4a..26ed909ce 100644
--- a/scripts/gen-mcp-index.test.mjs
+++ b/scripts/gen-mcp-index.test.mjs
@@ -177,6 +177,9 @@ test('references nested one level per subject still reach the index', () => {
     'react-bulma-components-component-map',
     'react-bulma-components-prop-map',
     'react-bulma-components-unmappables',
+    'bloomer-component-map',
+    'bloomer-prop-map',
+    'bloomer-unmappables',
   ]) {
     const ref = migrate.references.find(r => r.id === id);
     assert.ok(ref, `${id} is not indexed`);
diff --git a/skills/README.md b/skills/README.md
index 3e9aac97d..ab8822786 100644
--- a/skills/README.md
+++ b/skills/README.md
@@ -13,15 +13,15 @@ examples — useful if your client speaks MCP but not skills.
 
 ## Skills
 
-| Skill                                                           | Use it when…                                                                                                                                                                               |
-| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| [`bestax-custom-component`](./bestax-custom-component/SKILL.md) | Building a **custom component** beyond stock Bulma — in an app: composition, helper props, public hooks, `--bulma-*` CSS vars; in the monorepo: the full SCSS/stories/tests/docs pipeline. |
-| [`bestax-form`](./bestax-form/SKILL.md)                         | Building **forms** — Field/Control composition, the full input inventory, and the validate-it-yourself error pattern (there is no form library).                                           |
-| [`bestax-theming`](./bestax-theming/SKILL.md)                   | **Theming** — customize colors, branding, fonts/radius tokens, and dark mode by overriding Bulma's `--bulma-*` variables with the `Theme` component.                                       |
-| [`bestax-layout-scaffold`](./bestax-layout-scaffold/SKILL.md)   | **Layout scaffolding** — turn a high-level request (dashboard, landing page, auth page, catalog) into a complete responsive page from named layout archetypes.                             |
-| [`bestax-icons`](./bestax-icons/SKILL.md)                       | **Icons** — the `Icon`/`IconText` components and the five supported libraries (Font Awesome, MDI, Ionicons, Material Icons/Symbols): setup, name formats, variants, and accessibility.     |
-| [`bestax-migrate`](./bestax-migrate/SKILL.md)                   | **Migrating** an existing app from `react-bulma-components` — drive the `bestax-migrate` codemod, then resolve every `TODO(bestax-migrate)` it leaves using the mapping references.        |
-| [`bestax-optimize`](./bestax-optimize/SKILL.md)                 | **CSS size** — measure raw+gzip and shrink the built stylesheet: a lighter prebuilt flavor, a hand-rolled modular Sass build, and import/icon-asset hygiene. First-party levers only.      |
+| Skill                                                           | Use it when…                                                                                                                                                                                            |
+| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`bestax-custom-component`](./bestax-custom-component/SKILL.md) | Building a **custom component** beyond stock Bulma — in an app: composition, helper props, public hooks, `--bulma-*` CSS vars; in the monorepo: the full SCSS/stories/tests/docs pipeline.              |
+| [`bestax-form`](./bestax-form/SKILL.md)                         | Building **forms** — Field/Control composition, the full input inventory, and the validate-it-yourself error pattern (there is no form library).                                                        |
+| [`bestax-theming`](./bestax-theming/SKILL.md)                   | **Theming** — customize colors, branding, fonts/radius tokens, and dark mode by overriding Bulma's `--bulma-*` variables with the `Theme` component.                                                    |
+| [`bestax-layout-scaffold`](./bestax-layout-scaffold/SKILL.md)   | **Layout scaffolding** — turn a high-level request (dashboard, landing page, auth page, catalog) into a complete responsive page from named layout archetypes.                                          |
+| [`bestax-icons`](./bestax-icons/SKILL.md)                       | **Icons** — the `Icon`/`IconText` components and the five supported libraries (Font Awesome, MDI, Ionicons, Material Icons/Symbols): setup, name formats, variants, and accessibility.                  |
+| [`bestax-migrate`](./bestax-migrate/SKILL.md)                   | **Migrating** an existing app from `react-bulma-components`, `rbx` or `bloomer` — drive the `bestax-migrate` codemod, then resolve every `TODO(bestax-migrate)` it leaves using the mapping references. |
+| [`bestax-optimize`](./bestax-optimize/SKILL.md)                 | **CSS size** — measure raw+gzip and shrink the built stylesheet: a lighter prebuilt flavor, a hand-rolled modular Sass build, and import/icon-asset hygiene. First-party levers only.                   |
 
 ## Install
 
@@ -89,10 +89,10 @@ skills/
   bestax-migrate/
     SKILL.md                   # the codemod-then-resolve-TODOs workflow
     references/
-      component-map.md         # every react-bulma-components component → bestax target
-      prop-map.md              # universal modifier-prop + responsive-object conversions
-      unmappables.md           # recipes for every TODO(bestax-migrate) the codemod leaves
-      css-migration.md         # the Bulma 0.9 → 1 CSS step
+      css-migration.md         # the Bulma 0.9 → 1 CSS step, shared by every source
+      react-bulma-components/  # per source: component-map.md, prop-map.md, unmappables.md
+      rbx/
+      bloomer/
   bestax-optimize/
     SKILL.md
     references/
diff --git a/skills/bestax-migrate/SKILL.md b/skills/bestax-migrate/SKILL.md
index 2cfefe0e5..5e76e114d 100644
--- a/skills/bestax-migrate/SKILL.md
+++ b/skills/bestax-migrate/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: bestax-migrate
-description: Migrate an existing app from an unmaintained React Bulma library — react-bulma-components (v4) or rbx (v2) — to @allxsmith/bestax-bulma on Bulma v1. Run the bestax-migrate codemod, then resolve every TODO(bestax-migrate) comment it leaves using the per-source mapping references. Use when a repo imports react-bulma-components or rbx and wants to move to bestax-bulma, when TODO(bestax-migrate) comments are present in a codebase, or when asked to migrate off an unmaintained React Bulma library.
+description: Migrate an existing app from an unmaintained React Bulma library — react-bulma-components (v4), rbx (v2) or bloomer (0.6) — to @allxsmith/bestax-bulma on Bulma v1. Run the bestax-migrate codemod, then resolve every TODO(bestax-migrate) comment it leaves using the per-source mapping references. Use when a repo imports react-bulma-components, rbx or bloomer and wants to move to bestax-bulma, when TODO(bestax-migrate) comments are present in a codebase, or when asked to migrate off an unmaintained React Bulma library.
 license: MIT
 ---
 
@@ -15,10 +15,11 @@ this skill drives the codemod and finishes what it flags.
 The codemod's first argument names the library you are migrating _from_. Check the app's
 `package.json` and imports:
 
-| Source                                                               | Argument                 | References                                                                                 |
-| -------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------ |
-| `react-bulma-components` v4 (unmaintained since 2022, Bulma 0.9.x)   | `react-bulma-components` | [`references/react-bulma-components/`](references/react-bulma-components/component-map.md) |
-| `rbx` v2 (abandoned 2019, pins Bulma **0.7.5** plus four extensions) | `rbx`                    | [`references/rbx/`](references/rbx/component-map.md)                                       |
+| Source                                                                        | Argument                 | References                                                                                 |
+| ----------------------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------------------ |
+| `react-bulma-components` v4 (unmaintained since 2022, Bulma 0.9.x)            | `react-bulma-components` | [`references/react-bulma-components/`](references/react-bulma-components/component-map.md) |
+| `rbx` v2 (abandoned 2019, pins Bulma **0.7.5** plus four extensions)          | `rbx`                    | [`references/rbx/`](references/rbx/component-map.md)                                       |
+| `bloomer` 0.6 (archived 2018, Bulma 0.6 era, React 16 + `create-react-class`) | `bloomer`                | [`references/bloomer/`](references/bloomer/component-map.md)                               |
 
 Everything below is written as `<source>`; substitute the argument from that table. The
 reference paths follow the same split — `references/<source>/component-map.md`,
@@ -59,8 +60,8 @@ Run these steps in order. Don't hand-convert what the codemod converts automatic
    documented in the per-source `references/` pages.
 
    The report's `peer-deps` entries predict install failures: bestax-bulma needs
-   **React 18/19** (react-bulma-components also ran on 17, and rbx peer-depended on
-   **React 16** — upgrade react/react-dom first) and its optional Font Awesome peer wants
+   **React 18/19** (react-bulma-components also ran on 17, while rbx and bloomer peer-depended
+   on **React 16** — upgrade react/react-dom first) and its optional Font Awesome peer wants
    **FA ≥ 6.7** (an app pinned to FA 5 either upgrades or installs with
    `npm install --legacy-peer-deps`).
 
@@ -101,6 +102,13 @@ code per the references, or deliberately keep the old markup with `className` st
   become real wrapping `<Badge>` / `<Tooltip>` components. Its `as` is universal, bestax's is
   not. Because rbx pinned Bulma 0.7.5, you cross **two** Bulma majors — expect more visual
   drift than the 0.9 → 1 guide alone describes.
+- **bloomer**: every export is a flat name and most become dotted bestax compounds
+  (`CardHeaderTitle` → `Card.Header.Title`). Its `is*` booleans already are bestax's; the
+  work is in `isSize`/`isColor`/`isAlign` (renamed per component), the `isDisplay`/`isHidden`
+  helpers (flattened, arrays and objects included), `tag` (→ `as` where bestax has one) and
+  `render` (always a TODO). Its icons are className-based and Font Awesome 4 — the biggest
+  visual risk, see `references/bloomer/unmappables.md`. The app declared its own Bulma 0.6,
+  which the codemod bumps; there is no pinned Bulma to free.
 
 ## Rules
 
diff --git a/skills/bestax-migrate/references/bloomer/component-map.md b/skills/bestax-migrate/references/bloomer/component-map.md
new file mode 100644
index 000000000..177cca2fe
--- /dev/null
+++ b/skills/bestax-migrate/references/bloomer/component-map.md
@@ -0,0 +1,156 @@
+# bloomer → bestax-bulma component map
+
+Every bloomer export. bloomer's exports are all _flat_ names, while bestax groups the same
+components into dotted compounds — so most rows here rename a flat identifier onto a
+`Parent.Child` target, and the codemod imports the parent. `structural` means the codemod
+rewrites the element's shape rather than renaming it (see [unmappables.md](unmappables.md) for
+what each one produces). A `todo` row has no bestax counterpart — the codemod keeps the bloomer
+import, annotated, so the app still runs while you convert it.
+
+This table mirrors `MAPPING` in `bestax-migrate/src/sources/bloomer/mapping.ts`, which a
+coverage test holds to bloomer's own export surface (108 exports, vendored from its
+`src/index.ts`) in both directions.
+
+| bloomer                | bestax-bulma          | status  |
+| ---------------------- | --------------------- | ------- |
+| `Box`                  | `Box`                 | mapped  |
+| `Breadcrumb`           | `Breadcrumb`          | mapped  |
+| `BreadcrumbItem`       | _structural_          | mapped  |
+| `Button`               | `Button`              | mapped  |
+| `Card`                 | `Card`                | mapped  |
+| `CardContent`          | `Card.Content`        | mapped  |
+| `CardFooter`           | `Card.Footer`         | mapped  |
+| `CardFooterItem`       | `Card.FooterItem`     | mapped  |
+| `CardHeader`           | `Card.Header`         | mapped  |
+| `CardHeaderIcon`       | `Card.Header.Icon`    | mapped  |
+| `CardHeaderTitle`      | `Card.Header.Title`   | mapped  |
+| `CardImage`            | `Card.Image`          | mapped  |
+| `Checkbox`             | `Checkbox`            | mapped  |
+| `Column`               | `Column`              | mapped  |
+| `Columns`              | `Columns`             | mapped  |
+| `Container`            | `Container`           | mapped  |
+| `Content`              | `Content`             | mapped  |
+| `Control`              | `Control`             | mapped  |
+| `Delete`               | `Delete`              | mapped  |
+| `Dropdown`             | `Dropdown`            | partial |
+| `DropdownContent`      | — _(see unmappables)_ | todo    |
+| `DropdownDivider`      | `Dropdown.Divider`    | mapped  |
+| `DropdownItem`         | `Dropdown.Item`       | mapped  |
+| `DropdownMenu`         | — _(see unmappables)_ | todo    |
+| `DropdownTrigger`      | — _(see unmappables)_ | todo    |
+| `Field`                | `Field`               | mapped  |
+| `FieldBody`            | `Field.Body`          | mapped  |
+| `FieldLabel`           | `Field.Label`         | mapped  |
+| `Footer`               | `Footer`              | mapped  |
+| `Heading`              | _structural_          | partial |
+| `Help`                 | _structural_          | mapped  |
+| `Hero`                 | `Hero`                | mapped  |
+| `HeroBody`             | `Hero.Body`           | mapped  |
+| `HeroFooter`           | `Hero.Foot`           | mapped  |
+| `HeroHeader`           | `Hero.Head`           | mapped  |
+| `HeroVideo`            | _structural_          | mapped  |
+| `Icon`                 | `Icon`                | partial |
+| `Image`                | `Image`               | mapped  |
+| `Input`                | `Input`               | mapped  |
+| `Label`                | _structural_          | mapped  |
+| `Level`                | `Level`               | mapped  |
+| `LevelItem`            | `Level.Item`          | mapped  |
+| `LevelLeft`            | `Level.Left`          | mapped  |
+| `LevelRight`           | `Level.Right`         | mapped  |
+| `Media`                | `Media`               | mapped  |
+| `MediaContent`         | `Media.Content`       | mapped  |
+| `MediaLeft`            | `Media.Left`          | mapped  |
+| `MediaRight`           | `Media.Right`         | mapped  |
+| `Menu`                 | `Menu`                | mapped  |
+| `MenuLabel`            | `Menu.Label`          | mapped  |
+| `MenuLink`             | `Menu.Item`           | mapped  |
+| `MenuList`             | `Menu.List`           | mapped  |
+| `Message`              | `Message`             | mapped  |
+| `MessageBody`          | `Message.Body`        | mapped  |
+| `MessageHeader`        | `Message.Header`      | mapped  |
+| `Modal`                | `Modal`               | partial |
+| `ModalBackground`      | `Modal.Background`    | mapped  |
+| `ModalCard`            | `Modal.Card`          | mapped  |
+| `ModalCardBody`        | `Modal.Card.Body`     | mapped  |
+| `ModalCardFooter`      | `Modal.Card.Foot`     | mapped  |
+| `ModalCardHeader`      | `Modal.Card.Head`     | mapped  |
+| `ModalCardTitle`       | `Modal.Card.Title`    | mapped  |
+| `ModalClose`           | `Modal.Close`         | mapped  |
+| `ModalContent`         | `Modal.Content`       | mapped  |
+| `Nav`                  | — _(see unmappables)_ | todo    |
+| `NavCenter`            | — _(see unmappables)_ | todo    |
+| `NavItem`              | — _(see unmappables)_ | todo    |
+| `NavLeft`              | — _(see unmappables)_ | todo    |
+| `NavRight`             | — _(see unmappables)_ | todo    |
+| `NavToggle`            | — _(see unmappables)_ | todo    |
+| `Navbar`               | `Navbar`              | mapped  |
+| `NavbarBrand`          | `Navbar.Brand`        | mapped  |
+| `NavbarBurger`         | `Navbar.Burger`       | mapped  |
+| `NavbarDivider`        | `Navbar.Divider`      | mapped  |
+| `NavbarDropdown`       | _structural_          | mapped  |
+| `NavbarEnd`            | `Navbar.End`          | mapped  |
+| `NavbarItem`           | _structural_          | mapped  |
+| `NavbarLink`           | `Navbar.Link`         | mapped  |
+| `NavbarMenu`           | `Navbar.Menu`         | mapped  |
+| `NavbarStart`          | `Navbar.Start`        | mapped  |
+| `Notification`         | `Notification`        | mapped  |
+| `Page`                 | _structural_          | mapped  |
+| `PageControl`          | _structural_          | mapped  |
+| `PageEllipsis`         | `Pagination.Ellipsis` | mapped  |
+| `PageLink`             | `Pagination.Link`     | mapped  |
+| `PageList`             | `Pagination.List`     | mapped  |
+| `Pagination`           | `Pagination`          | mapped  |
+| `Panel`                | `Panel`               | mapped  |
+| `PanelBlock`           | `Panel.Block`         | mapped  |
+| `PanelHeading`         | `Panel.Heading`       | mapped  |
+| `PanelIcon`            | `Panel.Icon`          | partial |
+| `PanelTab`             | _structural_          | mapped  |
+| `PanelTabs`            | `Panel.Tabs`          | mapped  |
+| `Progress`             | `Progress`            | mapped  |
+| `Radio`                | `Radio`               | mapped  |
+| `Section`              | `Section`             | mapped  |
+| `Select`               | `Select`              | mapped  |
+| `Subtitle`             | `SubTitle`            | mapped  |
+| `Tab`                  | `Tabs.Item`           | mapped  |
+| `TabLink`              | _structural_          | mapped  |
+| `TabList`              | `Tabs.List`           | mapped  |
+| `Table`                | `Table`               | mapped  |
+| `Tabs`                 | `Tabs`                | mapped  |
+| `Tag`                  | `Tag`                 | mapped  |
+| `TextArea`             | `TextArea`            | mapped  |
+| `Tile`                 | — _(see unmappables)_ | todo    |
+| `Title`                | `Title`               | mapped  |
+| `withHelpersModifiers` | — _(see unmappables)_ | todo    |
+
+## The renames worth memorising
+
+The flat-to-dotted pattern is regular — `CardHeaderTitle` → `Card.Header.Title`,
+`ModalCardBody` → `Modal.Card.Body`, `NavbarBurger` → `Navbar.Burger` — with a handful of names
+that change along the way:
+
+| bloomer           | bestax-bulma          | why                                                         |
+| ----------------- | --------------------- | ----------------------------------------------------------- |
+| `Subtitle`        | `SubTitle`            | bestax's casing                                             |
+| `HeroHeader`      | `Hero.Head`           | bestax follows Bulma's `hero-head` / `hero-foot`            |
+| `HeroFooter`      | `Hero.Foot`           |                                                             |
+| `ModalCardHeader` | `Modal.Card.Head`     | same, for `modal-card-head` / `modal-card-foot`             |
+| `ModalCardFooter` | `Modal.Card.Foot`     |                                                             |
+| `CardFooterItem`  | `Card.FooterItem`     | one component in bestax, not a child of `Card.Footer`       |
+| `MenuLink`        | `Menu.Item`           | bestax's item renders the `<a>`                             |
+| `FieldLabel`      | `Field.Label`         | and `FieldBody` → `Field.Body`                              |
+| `Tab`             | `Tabs.Item`           | the plain `<li>`; bestax's `Tabs.Tab` is the controlled API |
+| `PageLink`        | `Pagination.Link`     | `isCurrent` becomes `active`                                |
+| `NavbarDropdown`  | `Navbar.DropdownMenu` | bestax's `Navbar.Dropdown` is the container — see below     |
+
+## Value-chosen targets
+
+Some targets depend on a prop or a child, so the codemod picks them element by element:
+
+| bloomer                                              | becomes                                                            | decided by                                       |
+| ---------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------ |
+| `PageControl`                                        | `Pagination.Previous` / `Pagination.Next`                          | `isNext` (bloomer's default is previous)         |
+| `NavbarItem`                                         | `Navbar.Item` / `Navbar.Dropdown`                                  | `hasDropdown`                                    |
+| `Page`                                               | _folded into its child_ / `<li>`                                   | whether the child is a `PageLink`/`PageEllipsis` |
+| `Icon`, `PanelIcon`                                  | `name`/`library`/`variant` / an `<i>` child                        | whether the icon classes are FA5/6 or MDI        |
+| `Help`, `Label`, `Heading`                           | `<p class="help">`, `<label class="label">`, `<p class="heading">` | always plain markup                              |
+| `BreadcrumbItem`, `PanelTab`, `TabLink`, `HeroVideo` | `<li>`, `<a>`, `<a>`, `<div class="hero-video">`                   | always plain markup                              |
diff --git a/skills/bestax-migrate/references/bloomer/prop-map.md b/skills/bestax-migrate/references/bloomer/prop-map.md
new file mode 100644
index 000000000..12dd41cb2
--- /dev/null
+++ b/skills/bestax-migrate/references/bloomer/prop-map.md
@@ -0,0 +1,105 @@
+# bloomer → bestax-bulma prop map
+
+bloomer's boolean modifiers are already bestax's names — `isActive`, `isLoading`, `isOutlined`,
+`isInverted`, `isStatic`, `isHovered`, `isFocused`, `isBordered`, `isStriped`, `isNarrow`,
+`isMultiline`, `isVCentered`, `isMobile`, … pass through untouched. What changes is the
+value-carrying props, the helper props every component inherited from `withHelpersModifiers`,
+and the two props bestax spells differently on every component.
+
+## Universal helper props
+
+bloomer's `withHelpersModifiers` mixed these into every component.
+
+| bloomer                     | bestax-bulma                 | note                                                         |
+| --------------------------- | ---------------------------- | ------------------------------------------------------------ |
+| `hasTextAlign="centered"`   | `textAlign="centered"`       | `left` / `right` / `centered` — same union                   |
+| `hasTextColor="grey-light"` | `textColor="grey-light"`     | every Bulma 0.6 colour and shade but `white-ter`/`white-bis` |
+| `isPulled="right"`          | `float="right"`              |                                                              |
+| `isClearfix`                | `clearfix`                   |                                                              |
+| `isOverlay`                 | `overlay`                    |                                                              |
+| `isUnselectable`            | `interaction="unselectable"` |                                                              |
+| `isMarginless`              | `m="0"`                      | bestax expresses the `is-*less` helpers as spacing           |
+| `isPaddingless`             | `p="0"`                      |                                                              |
+| `isFullWidth`               | `isFullWidth`                | on Button, Select, Table, Tabs; a TODO elsewhere             |
+| `isDisplay`, `isHidden`     | `display*`, `visibility*`    | flattened — see below                                        |
+| `tag`                       | `as`                         | where bestax declares one — see below                        |
+| `render`                    | —                            | always a TODO                                                |
+
+## `isDisplay` and `isHidden`
+
+Both take three shapes in bloomer; all three flatten onto bestax's per-viewport props. bestax
+declares every Bulma viewport, including `touch` and the `-only` ones, so nothing is lost:
+
+| bloomer                                                        | bestax-bulma                                                  |
+| -------------------------------------------------------------- | ------------------------------------------------------------- |
+| `isDisplay="flex"`                                             | `display="flex"`                                              |
+| `isDisplay="flex-tablet-only"`                                 | `displayTabletOnly="flex"`                                    |
+| `isDisplay={['inline-block', 'flex-desktop']}`                 | `display="inline-block" displayDesktop="flex"`                |
+| `isDisplay={{ flex: ['default', 'tablet'], block: 'mobile' }}` | `display="flex" displayTablet="flex" displayMobile="block"`   |
+| `isHidden`                                                     | `visibility="hidden"`                                         |
+| `isHidden="touch"`                                             | `visibilityTouch="hidden"`                                    |
+| `isHidden={['mobile', 'widescreen-only']}`                     | `visibilityMobile="hidden" visibilityWidescreenOnly="hidden"` |
+
+Two entries that land on the same prop, a dynamic value, or a viewport bestax does not know get
+a TODO; the bloomer prop is always removed, because bestax has no `isDisplay`/`isHidden` and a
+leftover would be a type error rather than a no-op.
+
+## Value props
+
+| bloomer                                                                                                      | bestax-bulma                                                                                                                                            |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `isColor="primary"`                                                                                          | `color="primary"` (every component that had it)                                                                                                         |
+| `isSize="large"`                                                                                             | `size="large"` — Button, Content, Delete, Icon, Input, Progress, Section, Select, Tag, TextArea, Breadcrumb, Pagination, Tabs, Field.Label, Modal.Close |
+| `Title isSize={3}`                                                                                           | `size={3}` — bestax accepts the numbers 1–6                                                                                                             |
+| `Subtitle isSize={4}`                                                                                        | `SubTitle size={4}`                                                                                                                                     |
+| `Image isSize="128x128"`                                                                                     | `size="128x128"`                                                                                                                                        |
+| `Image isRatio="16:9"`                                                                                       | `size="16by9"` (`square`→`square`, `1:1`→`1by1`, `4:3`→`4by3`, `3:2`→`3by2`, `2:1`→`2by1`)                                                              |
+| `Breadcrumb isAlign`                                                                                         | `alignment`                                                                                                                                             |
+| `Breadcrumb hasSeparator`                                                                                    | `separator`                                                                                                                                             |
+| `Tabs isAlign`                                                                                               | `align`; `isBoxed` → `boxed`, `isToggle` → `toggle`                                                                                                     |
+| `Pagination isAlign`                                                                                         | `align` (`"left"` is the default and is dropped)                                                                                                        |
+| `Dropdown isAlign="right"`                                                                                   | `right`; `isHoverable` → `hoverable`                                                                                                                    |
+| `Icon isAlign="left"`                                                                                        | `className="is-left"` (bestax's Icon has no align prop)                                                                                                 |
+| `Button isLink`                                                                                              | `color="link"` (a TODO if `isColor` is also set)                                                                                                        |
+| `Hero isFullHeight`                                                                                          | `size="fullheight"`                                                                                                                                     |
+| `Container isFluid`                                                                                          | `fluid`                                                                                                                                                 |
+| `Navbar isTransparent`                                                                                       | `transparent`                                                                                                                                           |
+| `Field isGrouped`, `isHorizontal`                                                                            | `grouped` (same `boolean \| 'centered' \| 'right'`), `horizontal`                                                                                       |
+| `FieldLabel isNormal`                                                                                        | `size="normal"`                                                                                                                                         |
+| `Control hasIcons`                                                                                           | `hasIconsLeft` / `hasIconsRight` (`true` sets both; an array sets each)                                                                                 |
+| `PageLink isCurrent`                                                                                         | `active`                                                                                                                                                |
+| `isActive` on Dropdown, DropdownItem, MenuLink, Modal, NavbarBurger, NavbarMenu, NavbarItem, PanelBlock, Tab | `active`                                                                                                                                                |
+
+## Column sizes
+
+| bloomer                                                  | bestax-bulma                                                                                                      |
+| -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `isSize={4} isOffset={2}`                                | `size={4} offset={2}`                                                                                             |
+| `isSize="1/2"`                                           | `size="half"` (`1/3`→`one-third`, `1/4`→`one-quarter`, `2/3`→`two-thirds`, `3/4`→`three-quarters`, `full`→`full`) |
+| `isSize="narrow"`                                        | `isNarrow`                                                                                                        |
+| `isSize={{ default: 'full', mobile: 8, tablet: '2/3' }}` | `size="full" sizeMobile={8} sizeTablet="two-thirds"`                                                              |
+| `isSize={{ touch: 'narrow' }}`                           | `isNarrowTouch` — bestax has `isNarrowTouch` but no `sizeTouch`/`offsetTouch`, which become TODOs                 |
+
+## `tag` → `as`
+
+bloomer put `tag` on nearly every component; bestax declares `as` on a subset, several of them
+narrowed to a literal union, so a value outside the union is a type error you can see rather
+than a silent rewrite. The components whose `tag` becomes `as`:
+
+`Title`, `Subtitle`, `Footer`, `Media`, `MediaLeft`, `LevelItem`, `Control`, `DropdownItem`,
+`MenuLink`, `NavbarItem`, `NavbarLink`.
+
+Everywhere else `tag` is left in place with a TODO. On the components that become plain markup
+(`Help`, `Label`, `Heading`, `BreadcrumbItem`, `PanelTab`, `TabLink`, `Page`, `HeroVideo`) a
+literal `tag` is honoured — `<Help tag="span">` becomes `<span className="help">`.
+
+bloomer's `Button` and `Image` never took `tag` at all. bloomer rendered an `<a>` whenever `href` was set, whatever `tag` said. The codemod keeps that:
+`Button` and `LevelItem` gain `as="a"` beside their `href`, and a `tag` next to an `href` is
+dropped on the targets that already render an anchor (`Navbar.Item`, `Menu.Item`,
+`Dropdown.Item`, `Panel.Block`).
+
+## Refs
+
+bloomer forwarded no refs. bestax forwards a ref from the form controls and from `Button`,
+`LinkButton`, `Modal`, `Dropdown`, `Navbar` (plus `Navbar.Burger` and `Navbar.Link`), `Dialog`,
+`Sidebar`, `Toast` and `Carousel` — pass `ref` directly on those.
diff --git a/skills/bestax-migrate/references/bloomer/unmappables.md b/skills/bestax-migrate/references/bloomer/unmappables.md
new file mode 100644
index 000000000..7e7c3b25e
--- /dev/null
+++ b/skills/bestax-migrate/references/bloomer/unmappables.md
@@ -0,0 +1,212 @@
+# Recipes for every TODO(bestax-migrate) the bloomer codemod leaves
+
+Ordered by how often they appear when the codemod runs over bloomer's own documentation.
+Resolve the comment, then delete it. Never silence a TODO without converting the code.
+
+## `component:Icon`, `component:PanelIcon` — Font Awesome 4 classes
+
+bloomer's `Icon` put the icon-font classes on its own `className`, and its era was Font Awesome 4. Classes the parser can read — Font Awesome 5/6 (`fas fa-home`, `fa-solid fa-home`) and MDI
+(`mdi mdi-account`) — become bestax's props automatically:
+
+```jsx
+<Icon className="fas fa-home" isSize="large" />
+<Icon name="home" library="fa" variant="solid" size="large" />
+```
+
+Anything else — FA4's `fa fa-home` above all — is moved onto an `<i>` child, which renders
+exactly what bloomer rendered, and flagged: bestax's optional Font Awesome peer is **6.7+**, where
+many v4 names changed and brand icons moved to `variant="brands"`. Either keep FA4 loaded, or
+convert to the prop form:
+
+```jsx
+<Icon><i className="fa fa-github" aria-hidden="true" /></Icon>
+<Icon name="github" library="fa" variant="brands" />
+```
+
+`library` is `fa` | `mdi` | `ion` | `material-icons` | `material-symbols`. An `Icon` with no
+`className` and no children is flagged too: bestax's needs a `name` or a child.
+
+## `component:Nav` — Bulma 0.4's nav
+
+`Nav`, `NavLeft`, `NavCenter`, `NavRight`, `NavToggle` and `NavItem` (`component:NavLeft`,
+`component:NavCenter`, `component:NavRight`, `component:NavToggle`, `component:NavItem`) are
+Bulma 0.4's `.nav`, which Bulma removed in 0.5 — bloomer kept the components, but no stylesheet
+you can install today styles them. Rebuild on `Navbar`:
+
+```jsx
+<Nav><NavLeft><NavItem isActive>Home</NavItem></NavLeft><NavToggle /></Nav>
+
+<Navbar>
+  <Navbar.Brand><Navbar.Burger /></Navbar.Brand>
+  <Navbar.Menu><Navbar.Start><Navbar.Item active>Home</Navbar.Item></Navbar.Start></Navbar.Menu>
+</Navbar>
+```
+
+## `component:Tile` — Bulma v1 removed tiles
+
+Use Grid and Cell. `Tile isAncestor` becomes `<Grid>`, `isParent`/`isChild` become `<Cell>`,
+and `isSize={n}` becomes a column span:
+
+```jsx
+<Tile isAncestor><Tile isParent isSize={4}><Tile isChild>x</Tile></Tile></Tile>
+<Grid><Cell colSpan={4}>x</Cell></Grid>
+```
+
+## `component:Modal` — what carries over
+
+bloomer's `Modal` was an inert shell: `isActive` toggled the class and nothing else. bestax's
+`Modal` closes on Escape (calling `onClose`), locks body scroll, and traps focus **by default**,
+and renders inline unless `portal` is set. So every conversion changes behaviour, and every one
+is flagged. Pass `onClose` to get the close-on-Escape and background behaviour:
+
+```jsx
+<Modal active={open} onClose={() => setOpen(false)}>
+```
+
+or keep bloomer's inert behaviour with `closeOnEscape={false} lockScroll={false}`. Add
+`portal` if the modal must escape a transformed ancestor.
+
+## `component:Dropdown` and its parts
+
+bestax's `Dropdown` takes a `label` and renders its own trigger and menu, so bloomer's
+`DropdownTrigger`, `DropdownMenu` and `DropdownContent` have nothing to become
+(`component:DropdownTrigger`, `component:DropdownMenu`, `component:DropdownContent`). Keep the
+`<DropdownItem>`s, which become `<Dropdown.Item>`:
+
+```jsx
+<Dropdown isActive isAlign="right">
+  <DropdownTrigger><Button>Open</Button></DropdownTrigger>
+  <DropdownMenu><DropdownContent>
+    <DropdownItem href="/a">A</DropdownItem>
+  </DropdownContent></DropdownMenu>
+</Dropdown>
+
+<Dropdown label="Open" active right>
+  <Dropdown.Item href="/a">A</Dropdown.Item>
+</Dropdown>
+```
+
+`isHoverable` → `hoverable`, `isActive` → `active` carry over on the `Dropdown` itself.
+
+## `prop:tag` — polymorphism
+
+bestax declares `as` on only some components (the list is in [prop-map.md](prop-map.md)).
+Elsewhere, render the element you wanted directly, or move the bestax component inside it:
+
+```jsx
+<Box tag="section">…</Box>
+<section><Box>…</Box></section>
+```
+
+A dynamic `tag` on a component that becomes plain markup is flagged the same way — the plain
+element takes bloomer's default tag.
+
+## `prop:render` — the render prop
+
+bloomer's `render` handed the computed props (`className` included) to your own renderer:
+
+```jsx
+<Button isColor="info" render={props => <MyButton {...props} />} />
+```
+
+bestax has no render-prop escape hatch. Render the bestax component and put your element inside
+it, or — if you need the classes on your own element — call `useBulmaClasses` in it:
+
+```jsx
+<Button color="info" as={MyButton} />
+```
+
+`Button`, `Navbar.Item`, `Navbar.Link` and `Menu.Item` take `as` as a custom component, which
+covers the common "render as a router link" case.
+
+## `component:Heading` — Bulma v1 dropped `.heading`
+
+bloomer's `Heading` is Bulma's small-caps label. It becomes the plain `<p className="heading">`
+bloomer rendered, but Bulma v1 no longer ships styles for that class, so restyle it:
+
+```jsx
+<Heading>Label</Heading>
+<Title as="p" size={6} textTransform="uppercase" textWeight="semibold">Label</Title>
+```
+
+## `prop:isFullWidth` — not a universal helper in bestax
+
+bloomer accepted `isFullWidth` on everything; Bulma's `is-fullwidth` only means something on a
+few elements, and bestax declares `isFullWidth` on exactly those — `Button`, `Select`, `Table`,
+`Tabs` — where it passes through. Elsewhere, drop it, or add `className="is-fullwidth"` if your
+own CSS styled the class.
+
+## Props with no counterpart
+
+Each of these is left in place with a TODO naming the class to add instead:
+
+| prop                      | on                                           | what to do                                                                              |
+| ------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------- |
+| `isBold`                  | `Hero`                                       | `className="is-bold"` (Bulma v1 still ships it)                                         |
+| `isHalfHeight`            | `Hero`                                       | `className="is-halfheight"` — bestax's `size` has no half-height                        |
+| `isSize="large"`          | `Media`                                      | `className="is-large"`                                                                  |
+| `isSpaced`                | `Subtitle`                                   | `className="is-spaced"` — only `Title` has `isSpaced`                                   |
+| `isActive`                | `Input`                                      | `className="is-active"`                                                                 |
+| `isActive`, `isFocused`   | `PageLink`, `PageControl`, `PageEllipsis`    | `className="is-active"` / `"is-focused"`                                                |
+| `isActive`                | `NavbarLink`                                 | `className="is-active"`                                                                 |
+| `isHoverable`             | `NavbarItem` without `hasDropdown`           | move to the `Navbar.Dropdown`, or `className="is-hoverable"`                            |
+| `isBoxed`                 | `NavbarDropdown`, `NavbarDivider`            | `className="is-boxed"`                                                                  |
+| `isWrapped`               | `PanelBlock`                                 | `className="is-wrapped"`                                                                |
+| `isFlexible`              | `LevelItem`                                  | `className="is-flexible"`                                                               |
+| `hasAddons="fullwidth"`   | `Field`                                      | `hasAddons` plus `className="has-addons-fullwidth"`                                     |
+| `isAlign`                 | `TabList`                                    | set `align` on the `<Tabs>` — Bulma aligns the container                                |
+| `isGrid`                  | `Columns`                                    | Bulma removed `columns.is-grid` in 0.5; use `isMultiline` with sized columns, or `Grid` |
+| `href`                    | `CardFooterItem`, `CardHeaderIcon`, `Delete` | put an `<a>` inside, or handle it in `onClick`                                          |
+| `isRatio` beside `isSize` | `Image`                                      | bestax's one `size` took the fixed size; restore the ratio if that was the point        |
+
+## `prop:isLink` — beside `isColor`
+
+`isLink` is Bulma's `is-link` colour. Alone it becomes `color="link"`; beside an `isColor` there
+are two colours for bestax's one `color` prop — pick one.
+
+## `prop:isDisplay`, `prop:isHidden`, `prop:isSize`, `prop:isOffset` — dynamic helper values
+
+The three-shape helpers flatten only from literals. A dynamic value is dropped (bestax has no
+prop of that name, so leaving it would be a type error) and flagged; set the matching bestax
+prop conditionally:
+
+```jsx
+<Box isHidden={collapsed} />
+<Box visibility={collapsed ? 'hidden' : undefined} />
+```
+
+`Column`'s `isSize`/`isOffset` follow the same rule, and a `touch` key has no `sizeTouch`
+counterpart in bestax (only `isNarrowTouch`) — Bulma keeps the `is-*-touch` classes, so use
+`className`.
+
+## `prop:hasTextColor="white-ter"` / `"white-bis"`
+
+Two Bulma 0.6 shades bestax has no colour for. Use `white`, or a custom class. Every other colour
+and shade of that era exists in bestax verbatim.
+
+## `value-reference` — a component used as a value
+
+`const Wrapped = Box` and `{ Subtitle }` are rewritten to the bestax binding (`Hero.Foot`,
+`SubTitle`) when the target is a plain rename. A retained component (`Tile`, the `Nav` family,
+`withHelpersModifiers`) used as a value keeps the bloomer import with this flag: migrate the
+usage by hand. `withHelpersModifiers` in particular has nothing to become — every bestax
+component already takes the helper props, and a custom component gets them from
+`useBulmaClasses`.
+
+## `imports` — a bloomer import the codemod left alone
+
+A default import (`import Bloomer from 'bloomer'`) never worked — bloomer has no default
+export — and a deep import (`bloomer/lib/elements/Box`) reaches compiled internals the mapping
+does not know. Convert either to a named import from `'bloomer'` and re-run the codemod.
+
+## `plain-element` — helper props on markup that became plain HTML
+
+When a component becomes plain markup (`Help`, `Label`, `PanelTab`, …), bloomer's helper props
+on it have no home and are dropped with this flag. Re-apply them as classes
+(`className="is-pulled-right"`), or wrap the element in a bestax `Box`/`Block` that takes them.
+
+## Dynamic values
+
+Any prop whose value the codemod cannot read — `isColor={c}`, `isNext={n}`, `hasIcons={sides}`,
+`tag={t}` — is either renamed as-is (when the rename is unconditional) or flagged with the
+specific prop to set. The comment names it.
diff --git a/skills/bestax-migrate/references/css-migration.md b/skills/bestax-migrate/references/css-migration.md
index 2fb06116c..2623647e0 100644
--- a/skills/bestax-migrate/references/css-migration.md
+++ b/skills/bestax-migrate/references/css-migration.md
@@ -1,11 +1,12 @@
 # Stylesheets: pre-1 Bulma → Bulma v1 + bestax
 
 Every library `bestax-migrate` migrates from is pinned to a pre-1 Bulma: react-bulma-components
-to 0.9.x, rbx to 0.7.5. bestax-bulma targets Bulma v1. The codemod automates most of that
+to 0.9.x, rbx to 0.7.5, and a bloomer app to whichever 0.6 it installed itself. bestax-bulma
+targets Bulma v1. The codemod automates most of that
 stylesheet layer; this reference explains what it did and how to finish what it flagged.
 
-Coming from rbx you are crossing **two** Bulma majors rather than one, so expect more visual
-drift than the 0.9 → 1 notes below describe on their own.
+Coming from rbx or bloomer you are crossing **two** Bulma majors rather than one, so expect more
+visual drift than the 0.9 → 1 notes below describe on their own.
 
 ## What the codemod already did (default `--css bestax`)
 

From 8043fe5ce77b6ccd0d12df04ecbd5aea2fa469aa Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 09:16:31 -0400
Subject: [PATCH 05/18] fix(create-bestax): name bloomer in the scaffolded
 skill roster

The bundled bestax-migrate skill now covers a third source; this is what
re-releases the scaffolder that ships it.
---
 create-bestax/src/constants.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/create-bestax/src/constants.ts b/create-bestax/src/constants.ts
index e499a825d..eb6c146df 100644
--- a/create-bestax/src/constants.ts
+++ b/create-bestax/src/constants.ts
@@ -224,7 +224,7 @@ automatically when the task matches:
 - **bestax-layout-scaffold** — scaffold full pages (app shell, landing, centered, card grid).
 - **bestax-icons** — icons via \`Icon\`/\`IconText\`: library setup, name formats, variants, a11y.
 - **bestax-optimize** — shrink the built CSS: measure raw+gzip, then flavor switch or a modular Sass build.
-- **bestax-migrate** — migrate code off react-bulma-components (v4) or rbx (v2): run the codemod, resolve its TODOs.
+- **bestax-migrate** — migrate code off react-bulma-components (v4), rbx (v2) or bloomer (0.6): run the codemod, resolve its TODOs.
 
 Prefer the library's components and these skills over hand-written Bulma markup or custom CSS.
 Read skill \`references/\` files with absolute paths — the shell's cwd is not stable between commands.

From fad9e012479055dd11f49fbd2bf02d5b3a5aa402 Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 09:40:38 -0400
Subject: [PATCH 06/18] fix(bestax-migrate): keep bloomer's markup where
 bestax's defaults differ, and carry icon modifiers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review round one on #642. PanelIcon reads its classes from its own
className like Icon does; NavbarItem and DropdownItem keep bloomer's
<div> via as="div" when they carry neither href nor tag; a PanelBlock
without href stays the plain block bloomer rendered, since bestax's is
always an anchor. The shared icon parser now returns the documented
modifier classes as bestax's `features` and refuses to drop an app's own
class (the child is kept and flagged instead) — ported to the rbx and
react-bulma-components handlers — and reads MDI's modifiers so a leading
size token is not taken for the icon name. Spread attributes survive the
shared plain-element and collapse rewrites. A valueless className or an
empty Icon gets an inert <i> child so the output typechecks while its
TODO stands. Value references of a special that keeps its target are
renamed; a target-less special used as a value reserves its local first.
---
 .../bloomer-kitchen-sink/src/components.tsx   |  11 +-
 .../bloomer-kitchen-sink/src/elements.tsx     |   1 +
 .../src/sources/_shared/specials-utils.ts     | 105 ++++++-
 .../__testfixtures__/compounds.output.tsx     |   4 +-
 .../__testfixtures__/icons-images.input.tsx   |   4 +-
 .../__testfixtures__/icons-images.output.tsx  |  14 +-
 .../tabs-pagination-panel.input.tsx           |  14 +-
 .../tabs-pagination-panel.output.tsx          |  11 +-
 .../bloomer/__tests__/specials.test.ts        | 151 +++++++++-
 .../bloomer/__tests__/transform.test.ts       |  29 ++
 .../bloomer/__tests__/value-unions.test.ts    |  25 +-
 bestax-migrate/src/sources/bloomer/mapping.ts |   5 +-
 .../src/sources/bloomer/specials.ts           | 277 ++++++++++++------
 .../src/sources/bloomer/transform.ts          |  37 ++-
 bestax-migrate/src/sources/rbx/specials.ts    |  19 +-
 bestax-migrate/src/sources/rbx/transform.ts   |  12 +-
 .../__tests__/transform.test.ts               |   4 +-
 .../react-bulma-components/specials.ts        |  12 +-
 .../react-bulma-components/transform.ts       |  12 +-
 .../getting-started/migration/bloomer.md      |  13 +-
 docs/docs/skills/migrate.mdx                  |   4 +-
 skills/bestax-migrate/SKILL.md                |   5 +-
 .../references/bloomer/component-map.md       |   1 +
 .../references/bloomer/prop-map.md            |  28 +-
 .../references/bloomer/unmappables.md         |  47 +--
 .../references/rbx/unmappables.md             |   4 +-
 26 files changed, 626 insertions(+), 223 deletions(-)

diff --git a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/components.tsx b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/components.tsx
index 379d4b4cd..4fb1c8051 100644
--- a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/components.tsx
+++ b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/components.tsx
@@ -135,6 +135,9 @@ export const Components = ({ open }: { open: boolean }) => (
       <NavbarMenu isActive={open}>
         <NavbarStart>
           <NavbarItem isActive>Home</NavbarItem>
+          <NavbarItem href="/docs" isActive>
+            Docs
+          </NavbarItem>
           <NavbarItem hasDropdown isHoverable>
             <NavbarLink>More</NavbarLink>
             <NavbarDropdown>
@@ -177,11 +180,13 @@ export const Components = ({ open }: { open: boolean }) => (
         <PanelTab>Public</PanelTab>
       </PanelTabs>
       <PanelBlock isActive href="/repo">
-        <PanelIcon>
-          <i className="fas fa-book" />
-        </PanelIcon>
+        <PanelIcon className="fas fa-book" />
         bestax
       </PanelBlock>
+      <PanelBlock>
+        <PanelIcon className="fas fa-code-branch" />
+        fork
+      </PanelBlock>
     </Panel>
     <Tabs isAlign="centered" isBoxed isSize="small" isFullWidth>
       <TabList>
diff --git a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/elements.tsx b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/elements.tsx
index 77b8ccd59..fa1ced44a 100644
--- a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/elements.tsx
+++ b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/elements.tsx
@@ -45,6 +45,7 @@ export const Elements = () => (
     <Progress isColor="danger" value={40} max={100} isSize="medium" />
     <Icon className="fas fa-home" isSize="large" />
     <Icon className="mdi mdi-account" />
+    <Icon className="fas fa-spinner fa-spin fa-lg" />
     <Image isSize="128x128" src="a.png" />
     <Image isRatio="16:9" src="b.png" />
     <Table isBordered isStriped isNarrow isFullWidth>
diff --git a/bestax-migrate/src/sources/_shared/specials-utils.ts b/bestax-migrate/src/sources/_shared/specials-utils.ts
index 0f8a37c9f..9c6de651c 100644
--- a/bestax-migrate/src/sources/_shared/specials-utils.ts
+++ b/bestax-migrate/src/sources/_shared/specials-utils.ts
@@ -16,6 +16,7 @@ import {
   attributesOf,
   findAttr,
   literalValueOf,
+  makeAttr,
   plainElement,
   removeAttr,
   type TransformContext,
@@ -143,10 +144,26 @@ export function mergeClassName(
   return base;
 }
 
-/** Parse an icon-font <i className="..."> into bestax Icon name/library/variant. */
-export function parseIconClasses(
-  className: string
-): { name: string; library?: string; variant?: string } | null {
+/** What an icon-font class string says about a bestax `Icon`. */
+export interface ParsedIconClasses {
+  name: string;
+  library?: string;
+  variant?: string;
+  /** Recognised modifier classes (`fa-spin`, `fa-2x`, `mdi-48px`) — bestax's `features`. */
+  features: string[];
+  /**
+   * Tokens that are neither the icon, its style, nor a modifier the library
+   * documents — an app's own class. bestax's Icon has nowhere to put them
+   * on the glyph, so a caller that wants exact markup keeps the child.
+   */
+  leftovers: string[];
+}
+
+/**
+ * Parse an icon-font class string (`fas fa-home fa-spin`, `mdi mdi-account`)
+ * into bestax Icon props. Returns null when no icon name can be read.
+ */
+export function parseIconClasses(className: string): ParsedIconClasses | null {
   const tokens = className.trim().split(/\s+/);
   const faVariant: Record<string, string> = {
     fas: 'solid',
@@ -178,19 +195,78 @@ export function parseIconClasses(
     /^fa-(?:solid|regular|brands|light|duotone|thin|sharp|classic|2xs|xs|sm|lg|xl|2xl|\d{1,2}x|fw|ul|li|border|inverse|stack|stack-1x|stack-2x|pull-(?:left|right)|spin|spin-pulse|spin-reverse|pulse|beat|fade|beat-fade|bounce|flash|shake|swap-opacity|rotate-(?:90|180|270|by)|flip-(?:horizontal|vertical|both))$/;
   const faName = tokens.find(t => /^fa-/.test(t) && !FA_MODIFIER.test(t));
   if (faStyle && faName) {
+    // The style word itself (`fa-solid`) is not a feature; `fa` is FA4's
+    // style token and, when it accompanies a v5+ style, harmless.
+    const features = tokens.filter(t => FA_MODIFIER.test(t) && !faVariant[t]);
+    const leftovers = tokens.filter(
+      t => t !== faStyle && t !== faName && t !== 'fa' && !features.includes(t)
+    );
     return {
       name: faName.replace(/^fa-/, ''),
       library: 'fa',
       variant: faVariant[faStyle],
+      features,
+      leftovers,
     };
   }
   if (tokens.includes('mdi')) {
-    const mdiName = tokens.find(t => /^mdi-/.test(t) && t !== 'mdi');
-    if (mdiName) return { name: mdiName.replace(/^mdi-/, ''), library: 'mdi' };
+    // MDI's documented modifiers: sizes, spin, rotation, flips, light/dark,
+    // inactive. Any other `mdi-*` token is the icon — whichever comes first,
+    // since `mdi mdi-24px mdi-account` is as legal as the other order.
+    const MDI_MODIFIER =
+      /^mdi-(?:(?:18|24|36|48)px|spin|rotate-(?:45|90|135|180|225|270|315)|flip-[hv]|light|dark|inactive)$/;
+    const mdiName = tokens.find(
+      t => /^mdi-/.test(t) && t !== 'mdi' && !MDI_MODIFIER.test(t)
+    );
+    if (mdiName) {
+      const features = tokens.filter(t => MDI_MODIFIER.test(t));
+      const leftovers = tokens.filter(
+        t => t !== 'mdi' && t !== mdiName && !features.includes(t)
+      );
+      return {
+        name: mdiName.replace(/^mdi-/, ''),
+        library: 'mdi',
+        features,
+        leftovers,
+      };
+    }
   }
   return null;
 }
 
+/**
+ * Write a parsed icon onto a bestax `Icon`-shaped element: `name`, then
+ * `library`/`variant` when known, then `features` — one string, or an array
+ * literal when there are several — and make the element self-closing.
+ */
+export function applyIconProps(
+  ctx: TransformContext,
+  element: any,
+  parsed: ParsedIconClasses
+): void {
+  const { j } = ctx;
+  addAttr(element, makeAttr(j, 'name', parsed.name));
+  if (parsed.library) addAttr(element, makeAttr(j, 'library', parsed.library));
+  if (parsed.variant) addAttr(element, makeAttr(j, 'variant', parsed.variant));
+  if (parsed.features.length === 1) {
+    addAttr(element, makeAttr(j, 'features', parsed.features[0]));
+  } else if (parsed.features.length > 1) {
+    addAttr(
+      element,
+      j.jsxAttribute(
+        j.jsxIdentifier('features'),
+        j.jsxExpressionContainer(
+          j.arrayExpression(parsed.features.map(f => j.stringLiteral(f)))
+        )
+      )
+    );
+  }
+  element.children = [];
+  element.openingElement.selfClosing = true;
+  element.closingElement = null;
+  ctx.dirty = true;
+}
+
 /**
  * Turn a literal modifier prop into an `is-*` class fragment for an element
  * on its way to becoming plain HTML. Returns the class (or undefined) and
@@ -275,7 +351,14 @@ export function makeStructuralHelpers(strip: AttrStrip) {
     where: string
   ): SpecialResult {
     const merged = mergeClassName(ctx, path, element, className, where);
-    const rest = strip(ctx, path, attributesOf(element), where);
+    const kept = new Set(strip(ctx, path, attributesOf(element), where));
+    // Spread attributes pass through untouched, in place: they are the
+    // caller's own props, and a plain element takes them as readily as the
+    // component did. `attributesOf` filters them out, so dropping them here
+    // lost `{...rest}` with no TODO.
+    const rest = (element.openingElement.attributes ?? []).filter(
+      (a: any) => a.type === 'JSXSpreadAttribute' || kept.has(a)
+    );
     path.replace(
       plainElement(ctx.j, tag, merged, rest, element.children ?? [])
     );
@@ -312,7 +395,13 @@ export function makeStructuralHelpers(strip: AttrStrip) {
     const accepted = Array.isArray(expected) ? expected : [expected];
     if (!childPath || !accepted.includes(childPath.join('.'))) return null;
 
-    for (const attr of [...attributesOf(element)]) {
+    for (const attr of [...(element.openingElement.attributes ?? [])]) {
+      if (attr.type === 'JSXSpreadAttribute') {
+        // A spread has no name to collide on; it moves across as written.
+        removeAttr(element, attr);
+        addAttr(child, attr);
+        continue;
+      }
       const name: string = attr.name.name;
       if (findAttr(child, name)) {
         addTodo(
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.output.tsx
index cfe71c9ae..14832294f 100644
--- a/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.output.tsx
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.output.tsx
@@ -72,13 +72,13 @@ export const Compounds = ({ open }: { open: boolean }) => (
       </Navbar.Brand>
       <Navbar.Menu active={open}>
         <Navbar.Start>
-          <Navbar.Item active>Home</Navbar.Item>
+          <Navbar.Item active as="div">Home</Navbar.Item>
           <Navbar.Dropdown hoverable>
             <Navbar.Link>More</Navbar.Link>
             <Navbar.DropdownMenu>
               <Navbar.Item href="/about">About</Navbar.Item>
               <Navbar.Divider />
-              <Navbar.Item>Jobs</Navbar.Item>
+              <Navbar.Item as="div">Jobs</Navbar.Item>
             </Navbar.DropdownMenu>
           </Navbar.Dropdown>
         </Navbar.Start>
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.input.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.input.tsx
index 98125a88c..6491f1c3b 100644
--- a/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.input.tsx
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.input.tsx
@@ -4,7 +4,9 @@ import { Icon, Image, Content, Delete, Table, Footer, Container } from "bloomer"
 export const Media = ({ cls }: { cls: string }) => (
   <Container>
     <Icon className="fas fa-home" isSize="large" />
-    <Icon className="mdi mdi-account" />
+    <Icon className="mdi mdi-account mdi-24px" />
+    <Icon className="fas fa-spinner fa-spin fa-lg" />
+    <Icon className="fas fa-home mine" />
     <Icon className="fa fa-github" hasTextColor="danger" />
     <Icon className={cls} isAlign="right" />
     <Icon isSize="small" />
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.output.tsx
index 63baa275e..70e975d9c 100644
--- a/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.output.tsx
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.output.tsx
@@ -1,17 +1,23 @@
 import React from "react";
 import { Container, Content, Delete, Footer, Icon, Image, Table } from "@allxsmith/bestax-bulma";
 
+// TODO(bestax-migrate): kept the icon classes on an <i> child, as bloomer rendered them; bestax renders that child unchanged, so make sure the icon font is still loaded — or switch to `name`/`library`/`variant` (`<Icon name="home" library="fa" variant="solid" />`), with any modifier classes in `features`
 // TODO(bestax-migrate): kept the Font Awesome 4 classes on an <i> child, as bloomer rendered them; bestax's optional Font Awesome peer is 6.7+, where many v4 names changed (brand icons moved to `variant="brands"`) — keep FA4 loaded, or switch to `name`/`library`/`variant` (`<Icon name="home" library="fa" variant="solid" />`)
-// TODO(bestax-migrate): kept the icon classes on an <i> child, as bloomer rendered them; bestax renders that child unchanged, so make sure the icon font is still loaded — or switch to `name`/`library`/`variant` (`<Icon name="home" library="fa" variant="solid" />`)
-// TODO(bestax-migrate): no icon classes to carry over (bloomer read them from `className`); bestax `Icon` needs a `name` (plus `library`/`variant`) or a child node
+// TODO(bestax-migrate): no icon classes to carry over (bloomer read them from `className`); bestax's needs a `name` (plus `library`/`variant`) or a child node — an empty <i> child keeps it compiling until you set one
 // TODO(bestax-migrate): both `isSize` and `isRatio` were set; bestax `Image` has one `size` prop for either, and Bulma applies only one of the two classes — kept the fixed size, restore the ratio by hand if that is the one you wanted
 export const Media = ({ cls }: { cls: string }) => (
   <Container>
     <Icon size="large" name="home" library="fa" variant="solid" />
-    <Icon name="account" library="mdi" />
+    <Icon name="account" library="mdi" features="mdi-24px" />
+    <Icon
+      name="spinner"
+      library="fa"
+      variant="solid"
+      features={["fa-spin", "fa-lg"]} />
+    <Icon><i className="fas fa-home mine" aria-hidden="true" /></Icon>
     <Icon textColor="danger"><i className="fa fa-github" aria-hidden="true" /></Icon>
     <Icon className="is-right"><i className={cls} aria-hidden="true" /></Icon>
-    <Icon size="small" />
+    <Icon size="small"><i aria-hidden="true" /></Icon>
     <Image size="128x128" src="a.png" />
     <Image size="16by9" src="b.png" />
     <Image size="64x64" src="c.png" />
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.input.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.input.tsx
index 8bed400b1..5e1d909a7 100644
--- a/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.input.tsx
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.input.tsx
@@ -69,17 +69,16 @@ export const Navigation = ({ onSelect }: { onSelect: () => void }) => (
         <PanelTab>Public</PanelTab>
       </PanelTabs>
       <PanelBlock isActive href="/repo">
-        <PanelIcon>
-          <i className="fas fa-book" />
-        </PanelIcon>
+        <PanelIcon className="fas fa-book" />
         bestax
       </PanelBlock>
-      <PanelBlock>
-        <PanelIcon>
-          <i className="fa fa-code-fork" />
-        </PanelIcon>
+      <PanelBlock isWrapped>
+        <PanelIcon className="fa fa-code-fork" />
         fork
       </PanelBlock>
+      <PanelBlock tag="label" isActive>
+        <input type="checkbox" /> remember
+      </PanelBlock>
     </Panel>
     <Dropdown isActive isAlign="right" isHoverable>
       <DropdownItem isActive href="/a">
@@ -87,6 +86,7 @@ export const Navigation = ({ onSelect }: { onSelect: () => void }) => (
       </DropdownItem>
       <DropdownDivider />
       <DropdownItem tag="div">B</DropdownItem>
+      <DropdownItem>C</DropdownItem>
     </Dropdown>
   </>
 );
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.output.tsx
index 96ce9bb6e..7b2d72af5 100644
--- a/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.output.tsx
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.output.tsx
@@ -46,10 +46,12 @@ export const Navigation = ({ onSelect }: { onSelect: () => void }) => (
         <Panel.Icon name="book" library="fa" variant="solid" />
         bestax
       </Panel.Block>
-      <Panel.Block>
-        <Panel.Icon><i className="fa fa-code-fork" aria-hidden="true" /></Panel.Icon>
-        fork
-      </Panel.Block>
+      <div className="panel-block is-wrapped">
+        <Panel.Icon><i className="fa fa-code-fork" aria-hidden="true" /></Panel.Icon>fork
+              </div>
+      <label className="panel-block is-active">
+        <input type="checkbox" />remember
+              </label>
     </Panel>
     <Dropdown active hoverable right>
       <Dropdown.Item active href="/a">
@@ -57,6 +59,7 @@ export const Navigation = ({ onSelect }: { onSelect: () => void }) => (
       </Dropdown.Item>
       <Dropdown.Divider />
       <Dropdown.Item as="div">B</Dropdown.Item>
+      <Dropdown.Item as="div">C</Dropdown.Item>
     </Dropdown>
   </>
 );
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
index 2401869e6..c8bf93bdb 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
@@ -70,6 +70,21 @@ describe('bloomer plain-element handlers', () => {
     expect(rules).toEqual(['prop:isColor']);
   });
 
+  it('carries a spread through a plain-element rewrite and a fold', () => {
+    const help = migrate(
+      dyn('Help', '<Help isColor="danger" {...p.rest}>x</Help>')
+    );
+    expect(help.output).toContain(
+      '<p className="help is-danger" {...p.rest}>x</p>'
+    );
+    const page = migrate(
+      "import { Page, PageLink } from 'bloomer';\nexport const A = (p: Record<string, any>) => <Page {...p.li}><PageLink>1</PageLink></Page>;\n"
+    );
+    expect(page.output).toContain(
+      '<Pagination.Link {...p.li}>1</Pagination.Link>'
+    );
+  });
+
   it('merges an existing className into the plain element', () => {
     const { output } = migrate(
       dyn('Label', '<Label isSize="small" className="mine">x</Label>')
@@ -134,25 +149,71 @@ describe('bloomer Icon', () => {
     expect(output).toContain('<Icon><svg /></Icon>');
   });
 
-  it('reads a PanelIcon child that the parser cannot name and keeps it', () => {
-    const { output, rules } = migrate(
-      dyn('PanelIcon', '<PanelIcon><svg /></PanelIcon>')
+  it('reads PanelIcon classes from its own className, like Icon', () => {
+    const fa6 = migrate(
+      dyn('PanelIcon', '<PanelIcon className="fas fa-book" />')
+    );
+    expect(fa6.rules).toEqual([]);
+    expect(fa6.output).toContain(
+      '<Panel.Icon name="book" library="fa" variant="solid" />'
+    );
+    const fa4 = migrate(
+      dyn('PanelIcon', '<PanelIcon className="fa fa-book" />')
+    );
+    expect(fa4.rules).toEqual(['component:PanelIcon']);
+    expect(fa4.output).toContain(
+      '<Panel.Icon><i className="fa fa-book" aria-hidden="true" /></Panel.Icon>'
+    );
+    const dynamic = migrate(dyn('PanelIcon', '<PanelIcon className={p.c} />'));
+    expect(dynamic.rules).toEqual(['component:PanelIcon']);
+    expect(dynamic.output).toContain(
+      '<Panel.Icon><i className={p.c} aria-hidden="true" /></Panel.Icon>'
     );
-    expect(rules).toEqual([]);
-    expect(output).toContain('<Panel.Icon><svg /></Panel.Icon>');
   });
 
-  it('flags an empty PanelIcon', () => {
-    const { rules } = migrate(dyn('PanelIcon', '<PanelIcon />'));
+  it('gives an empty Icon an inert child so it still compiles', () => {
+    const { output, rules } = migrate(dyn('PanelIcon', '<PanelIcon />'));
     expect(rules).toEqual(['component:PanelIcon']);
+    expect(output).toContain(
+      '<Panel.Icon><i aria-hidden="true" /></Panel.Icon>'
+    );
   });
 
-  it('flags a PanelIcon child whose classes are dynamic', () => {
-    const { output, rules } = migrate(
-      dyn('PanelIcon', '<PanelIcon><i className={p.c} /></PanelIcon>')
+  it('does not crash on a valueless or boolean className', () => {
+    const bare = migrate(dyn('Icon', '<Icon className />'));
+    expect(bare.rules).toEqual(['prop:className']);
+    expect(bare.output).toContain('<Icon><i aria-hidden="true" /></Icon>');
+    const bool = migrate(
+      dyn('Icon', '<Icon className={true} isSize="small" />')
+    );
+    expect(bool.rules).toEqual(['prop:className']);
+    expect(jsx(bool.output)).not.toContain('className');
+  });
+
+  it('carries icon modifiers as features and keeps an app class on the glyph', () => {
+    const one = migrate(
+      dyn('Icon', '<Icon className="fas fa-spinner fa-spin" />')
+    );
+    expect(one.output).toContain(
+      '<Icon name="spinner" library="fa" variant="solid" features="fa-spin" />'
+    );
+    const many = migrate(
+      dyn('Icon', '<Icon className="fa-solid fa-lg fa-cog fa-fw" />')
+    );
+    expect(many.output).toContain('features={["fa-lg", "fa-fw"]}');
+    const mdi = migrate(
+      dyn('Icon', '<Icon className="mdi mdi-24px mdi-account" />')
+    );
+    expect(mdi.output).toContain(
+      '<Icon name="account" library="mdi" features="mdi-24px" />'
+    );
+    const own = migrate(
+      dyn('Icon', '<Icon className="fas fa-home brand-glyph" />')
+    );
+    expect(own.rules).toEqual(['component:Icon']);
+    expect(own.output).toContain(
+      '<i className="fas fa-home brand-glyph" aria-hidden="true" />'
     );
-    expect(rules).toEqual([]);
-    expect(output).toContain('<Panel.Icon><i className={p.c} /></Panel.Icon>');
   });
 });
 
@@ -201,7 +262,7 @@ describe('bloomer navigation handlers', () => {
       )
     );
     expect(rules).toEqual(['prop:hasDropdown', 'prop:isHoverable']);
-    expect(output).toContain('<Navbar.Item>x</Navbar.Item>');
+    expect(output).toContain('<Navbar.Item as="div">x</Navbar.Item>');
   });
 
   it('drops the tag of a dropdown container', () => {
@@ -233,6 +294,50 @@ describe('bloomer navigation handlers', () => {
     );
   });
 
+  it('keeps a bare NavbarItem and DropdownItem a <div>, as bloomer rendered them', () => {
+    const item = migrate(dyn('NavbarItem', '<NavbarItem>x</NavbarItem>'));
+    expect(item.output).toContain('<Navbar.Item as="div">x</Navbar.Item>');
+    const tagged = migrate(
+      dyn('NavbarItem', '<NavbarItem tag="span">x</NavbarItem>')
+    );
+    expect(tagged.output).toContain('<Navbar.Item as="span">x</Navbar.Item>');
+    const drop = migrate(
+      dyn('DropdownItem', '<DropdownItem isActive>x</DropdownItem>')
+    );
+    expect(drop.output).toContain(
+      '<Dropdown.Item active as="div">x</Dropdown.Item>'
+    );
+    const link = migrate(
+      dyn('DropdownItem', '<DropdownItem href="/x" tag="span">x</DropdownItem>')
+    );
+    expect(link.output).toContain('<Dropdown.Item href="/x">x</Dropdown.Item>');
+  });
+
+  it('keeps a PanelBlock without href as the plain block bloomer rendered', () => {
+    const plain = migrate(
+      dyn('PanelBlock', '<PanelBlock isActive isWrapped>x</PanelBlock>')
+    );
+    expect(plain.rules).toEqual([]);
+    expect(plain.output).toContain(
+      '<div className="panel-block is-active is-wrapped">x</div>'
+    );
+    const label = migrate(
+      dyn(
+        'PanelBlock',
+        '<PanelBlock tag="label" isActive={p.on}>x</PanelBlock>'
+      )
+    );
+    expect(label.rules).toEqual(['prop:isActive']);
+    expect(label.output).toContain('<label className="panel-block">x</label>');
+    const anchor = migrate(
+      dyn('PanelBlock', '<PanelBlock href="/x" isWrapped>x</PanelBlock>')
+    );
+    expect(anchor.rules).toEqual(['prop:isWrapped']);
+    expect(anchor.output).toContain(
+      '<Panel.Block href="/x" isWrapped>x</Panel.Block>'
+    );
+  });
+
   it('keeps a NavbarDropdown without isBoxed as the menu', () => {
     const { output, rules } = migrate(
       dyn('NavbarDropdown', '<NavbarDropdown>x</NavbarDropdown>')
@@ -261,6 +366,26 @@ describe('bloomer navigation handlers', () => {
     expect(output).toContain('<Pagination.Previous>x</Pagination.Previous>');
   });
 
+  it('drops a Page tag the folded child cannot honour, flagging a non-li one', () => {
+    const li = migrate(
+      dyn('Page, PageLink', '<Page tag="li"><PageLink>1</PageLink></Page>')
+    );
+    expect(li.rules).toEqual([]);
+    expect(li.output).toContain('<Pagination.Link>1</Pagination.Link>');
+    const span = migrate(
+      dyn('Page, PageLink', '<Page tag="span"><PageLink>1</PageLink></Page>')
+    );
+    expect(span.rules).toEqual(['prop:tag']);
+    expect(span.output).toContain('<Pagination.Link>1</Pagination.Link>');
+  });
+
+  it('keeps Subtitle an <h2> unless told otherwise', () => {
+    const bare = migrate(dyn('Subtitle', '<Subtitle isSize={4}>x</Subtitle>'));
+    expect(bare.output).toContain('<SubTitle size={4} as="h2">x</SubTitle>');
+    const tagged = migrate(dyn('Subtitle', '<Subtitle tag="p">x</Subtitle>'));
+    expect(tagged.output).toContain('<SubTitle as="p">x</SubTitle>');
+  });
+
   it('keeps a Page it cannot fold as a plain list item', () => {
     const { output, rules } = migrate(
       dyn('Page', '<Page tag="span"><b>1</b></Page>')
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
index 3c0c1ba29..ea26d8905 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
@@ -110,6 +110,16 @@ describe('bloomer imports', () => {
     expect(output).not.toContain("from 'bloomer'");
   });
 
+  it('never merges a component into a type-only bestax import', () => {
+    const { output } = migrate(
+      "import type { TitleProps } from '@allxsmith/bestax-bulma';\nimport { Box } from 'bloomer';\nexport const A = (p: TitleProps) => <Box />;\n"
+    );
+    expect(output).toContain(
+      "import type { TitleProps } from '@allxsmith/bestax-bulma';"
+    );
+    expect(output).toContain('import { Box } from "@allxsmith/bestax-bulma";');
+  });
+
   it('aliases a bestax import whose name the file already binds', () => {
     const { output } = migrate(
       "import { CardHeaderTitle } from 'bloomer';\nconst Card = () => null;\nexport const A = () => <><Card /><CardHeaderTitle>x</CardHeaderTitle></>;\n"
@@ -176,6 +186,25 @@ describe('bloomer value references', () => {
     expect(output).toContain("import { Box } from 'bloomer'");
   });
 
+  it('renames a value reference of a component whose special keeps its target', () => {
+    const { output, rules } = migrate(
+      'import { Icon } from \'bloomer\';\nconst Old = Icon;\nexport const A = () => <Icon className="fas fa-home" />;\n'
+    );
+    expect(rules).toEqual([]);
+    expect(output).toContain('const Old = Icon;');
+    expect(output).toMatch(/import \{ Icon \} from "@allxsmith\/bestax-bulma"/);
+    expect(output).not.toContain("from 'bloomer'");
+  });
+
+  it('reserves the local of a target-less special used as a value', () => {
+    const { output, rules } = migrate(
+      "import { PageControl, Pagination } from 'bloomer';\nconst Prev = PageControl;\nexport const A = () => <Pagination><PageControl>p</PageControl></Pagination>;\n"
+    );
+    expect(rules).toEqual(['value-reference']);
+    expect(output).toContain("import { PageControl } from 'bloomer'");
+    expect(output).toContain('<Pagination.Previous>p</Pagination.Previous>');
+  });
+
   it('flags a retained component used as a value', () => {
     const { output, rules } = migrate(
       "import { Tile } from 'bloomer';\nexport const T = Tile;\n"
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/value-unions.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/value-unions.test.ts
index 2e4726b42..1c5a5adab 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/value-unions.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/value-unions.test.ts
@@ -21,7 +21,7 @@ import {
   validDisplays,
   validViewports,
 } from '@allxsmith/bestax-bulma';
-import { COLUMN_SIZE_MAP, MAPPING } from '../mapping.js';
+import { COLUMN_SIZE_MAP, MAPPING, UNIVERSAL_PROPS } from '../mapping.js';
 import { VIEWPORT_SUFFIX } from '../../_shared/viewports.js';
 
 /** bloomer 0.6.5 `src/bulma.tsx` — the `Bulma` namespace, verbatim. */
@@ -105,13 +105,24 @@ describe('bloomer helper values that the mapping passes through unchanged', () =
       v => !(validColors as readonly string[]).includes(v)
     );
     expect(missing.sort()).toEqual([...KNOWN_UNSUPPORTED_SHADES].sort());
+    const todo = UNIVERSAL_PROPS.hasTextColor.valueTodo ?? {};
+    expect(Object.keys(todo).sort()).toEqual(
+      [...KNOWN_UNSUPPORTED_SHADES].sort()
+    );
+  });
+
+  it("names every colour outside Message's six-colour union", () => {
     const todo = MAPPING.Message.props?.isColor?.valueTodo ?? {};
-    expect(Object.keys(todo).sort()).toEqual([
-      'black',
-      'dark',
-      'light',
-      'white',
-    ]);
+    const semantic = [
+      'primary',
+      'link',
+      'info',
+      'success',
+      'warning',
+      'danger',
+    ];
+    const outside = BLOOMER.colors.filter(c => !semantic.includes(c));
+    expect(Object.keys(todo).sort()).toEqual([...outside].sort());
   });
 
   it('maps every bloomer column fraction and width word', () => {
diff --git a/bestax-migrate/src/sources/bloomer/mapping.ts b/bestax-migrate/src/sources/bloomer/mapping.ts
index 8ae4f978e..fe0ea5fea 100644
--- a/bestax-migrate/src/sources/bloomer/mapping.ts
+++ b/bestax-migrate/src/sources/bloomer/mapping.ts
@@ -249,6 +249,7 @@ export const MAPPING: Record<string, ComponentMapping> = {
   Subtitle: {
     status: 'mapped',
     target: 'SubTitle',
+    special: 'subtitle',
     props: {
       isSize: size,
       isSpaced: classTodo('is-spaced', 'SubTitle'),
@@ -388,7 +389,7 @@ export const MAPPING: Record<string, ComponentMapping> = {
   DropdownItem: {
     status: 'mapped',
     target: 'Dropdown.Item',
-    special: 'anchor-when-href',
+    special: 'dropdown-item',
     props: { isActive: active, tag: TAG_AS },
   },
   DropdownDivider: { status: 'mapped', target: 'Dropdown.Divider' },
@@ -537,7 +538,7 @@ export const MAPPING: Record<string, ComponentMapping> = {
   PanelBlock: {
     status: 'mapped',
     target: 'Panel.Block',
-    special: 'anchor-when-href',
+    special: 'panel-block',
     props: {
       isActive: active,
       isWrapped: classTodo('is-wrapped', 'Panel.Block'),
diff --git a/bestax-migrate/src/sources/bloomer/specials.ts b/bestax-migrate/src/sources/bloomer/specials.ts
index b6710f65d..b34ef7f4d 100644
--- a/bestax-migrate/src/sources/bloomer/specials.ts
+++ b/bestax-migrate/src/sources/bloomer/specials.ts
@@ -24,6 +24,7 @@ import {
   type TransformContext,
 } from '../_shared/jsx-utils.js';
 import {
+  applyIconProps,
   makeStripModifierProps,
   makeStructuralHelpers,
   modifierClass,
@@ -120,27 +121,36 @@ const join = (...parts: Array<string | undefined>): string | undefined => {
 };
 
 /**
- * bloomer switched several components to an <a> whenever `href` was set,
- * whatever `tag` said. Where the bestax target already renders an <a> by
- * default, a surviving `tag` (which the mapping turns into `as`) would undo
- * that, so it is dropped; where the target defaults to something else, `as`
- * is set explicitly.
+ * bloomer rendered its default `tag` — usually a <div> — and switched to an
+ * <a> whenever `href` was set, whatever `tag` said. bestax's defaults differ
+ * per component, so this keeps bloomer's markup either way:
+ *
+ * - with `href`, a surviving `tag` (which the mapping turns into `as`) would
+ *   undo the anchor on targets that already render one, so it is dropped;
+ *   where the target defaults to something else, `as="a"` is set
+ *   (`setAs`);
+ * - without `href` or `tag`, a target that defaults to an <a> gets
+ *   `as={bareAs}` so bloomer's <div> stays a <div>.
  */
 function anchorWhenHref(
   ctx: TransformContext,
   element: any,
-  setAs: boolean
+  options: { setAs?: boolean; bareAs?: string } = {}
 ): string[] {
-  if (!findAttr(element, 'href')) return [];
   const handled: string[] = [];
   const tagAttr = findAttr(element, 'tag');
-  if (tagAttr) {
-    removeAttr(element, tagAttr);
-    handled.push('tag');
-    ctx.dirty = true;
-  }
-  if (setAs && !findAttr(element, 'as')) {
-    addAttr(element, makeAttr(ctx.j, 'as', 'a'));
+  if (findAttr(element, 'href')) {
+    if (tagAttr) {
+      removeAttr(element, tagAttr);
+      handled.push('tag');
+      ctx.dirty = true;
+    }
+    if (options.setAs && !findAttr(element, 'as')) {
+      addAttr(element, makeAttr(ctx.j, 'as', 'a'));
+      ctx.dirty = true;
+    }
+  } else if (options.bareAs && !tagAttr && !findAttr(element, 'as')) {
+    addAttr(element, makeAttr(ctx.j, 'as', options.bareAs));
     ctx.dirty = true;
   }
   return handled;
@@ -151,9 +161,10 @@ const FA4_CLASSES = /(?:^|\s)fa(?:\s|$)/;
 
 /**
  * Turn an icon-font class string into bestax `Icon` props when the parser
- * can read it (Font Awesome 5/6 and MDI); otherwise render it the way
- * bloomer did — an <i> child carrying the classes — which bestax's `Icon`
- * accepts as a custom node, and say why that may still need attention.
+ * can read every token (Font Awesome 5/6 and MDI, modifiers included —
+ * those become `features`); otherwise render it the way bloomer did — an <i>
+ * child carrying the classes — which bestax's `Icon` accepts as a custom
+ * node, and say why that may still need attention.
  */
 function iconFromClasses(
   ctx: TransformContext,
@@ -165,16 +176,10 @@ function iconFromClasses(
   const { j } = ctx;
   if (typeof classes === 'string') {
     const parsed = parseIconClasses(classes);
-    if (parsed) {
-      addAttr(element, makeAttr(j, 'name', parsed.name));
-      if (parsed.library)
-        addAttr(element, makeAttr(j, 'library', parsed.library));
-      if (parsed.variant)
-        addAttr(element, makeAttr(j, 'variant', parsed.variant));
-      element.children = [];
-      element.openingElement.selfClosing = true;
-      element.closingElement = null;
-      ctx.dirty = true;
+    // An app's own class on the glyph has no home on bestax's Icon props;
+    // keeping the child keeps it.
+    if (parsed && parsed.leftovers.length === 0) {
+      applyIconProps(ctx, element, parsed);
       return;
     }
   }
@@ -205,10 +210,86 @@ function iconFromClasses(
     `component:${where}`,
     fa4
       ? `kept the Font Awesome 4 classes on an <i> child, as bloomer rendered them; bestax's optional Font Awesome peer is 6.7+, where many v4 names changed (brand icons moved to \`variant="brands"\`) — keep FA4 loaded, or switch to \`name\`/\`library\`/\`variant\` (\`<Icon name="home" library="fa" variant="solid" />\`)`
-      : `kept the icon classes on an <i> child, as bloomer rendered them; bestax renders that child unchanged, so make sure the icon font is still loaded — or switch to \`name\`/\`library\`/\`variant\` (\`<Icon name="home" library="fa" variant="solid" />\`)`
+      : `kept the icon classes on an <i> child, as bloomer rendered them; bestax renders that child unchanged, so make sure the icon font is still loaded — or switch to \`name\`/\`library\`/\`variant\` (\`<Icon name="home" library="fa" variant="solid" />\`), with any modifier classes in \`features\``
   );
 }
 
+/**
+ * bloomer's Icon and PanelIcon both put the icon-font classes on their own
+ * `className` and rendered `<span class="…"><i class={className}/></span>`,
+ * ignoring children. Consume that className into bestax props or a child.
+ */
+function iconFromElement(
+  ctx: TransformContext,
+  path: ASTPath<any>,
+  element: any,
+  where: string
+): void {
+  const { j } = ctx;
+  /**
+   * bestax's Icon needs a `name` or a child; with neither, bloomer rendered
+   * an empty glyph (`<i class="undefined">`). An empty `<i>` child keeps the
+   * element typechecking and the markup as it was while the TODO stands.
+   */
+  const inertChild = (): void => {
+    element.children = [
+      j.jsxElement(
+        j.jsxOpeningElement(
+          j.jsxIdentifier('i'),
+          [makeAttr(j, 'aria-hidden', 'true')],
+          true
+        ),
+        null,
+        []
+      ),
+    ];
+    element.openingElement.selfClosing = false;
+    element.closingElement = j.jsxClosingElement(element.openingElement.name);
+    ctx.dirty = true;
+  };
+  const classAttr = findAttr(element, 'className');
+  if (classAttr) {
+    const literal = literalValueOf(classAttr);
+    removeAttr(element, classAttr);
+    ctx.dirty = true;
+    if (literal.kind === 'string') {
+      iconFromClasses(ctx, path, element, literal.value, where);
+    } else if (literal.kind === 'expression') {
+      iconFromClasses(
+        ctx,
+        path,
+        element,
+        { dynamic: classAttr.value.expression },
+        where
+      );
+    } else {
+      // A bare `className`, or a boolean/number: never icon classes, and
+      // `classAttr.value` may be null — no expression to carry over.
+      inertChild();
+      addTodo(
+        ctx,
+        path,
+        'prop:className',
+        `\`className\` on ${where} was not an icon-class string (bloomer read the icon-font classes from it); bestax's needs a \`name\` (plus \`library\`/\`variant\`) or a child node — set one by hand`
+      );
+    }
+    return;
+  }
+  const children = (element.children ?? []).filter(
+    (c: any) => !(c.type === 'JSXText' && c.value.trim() === '')
+  );
+  if (children.length === 0) {
+    inertChild();
+    addTodo(
+      ctx,
+      path,
+      `component:${where}`,
+      `no icon classes to carry over (bloomer read them from \`className\`); bestax's needs a \`name\` (plus \`library\`/\`variant\`) or a child node — an empty <i> child keeps it compiling until you set one`
+    );
+  }
+  // Children bloomer never rendered are left for bestax, which does.
+}
+
 const SPECIALS: Record<string, SpecialHandler> = {
   /**
    * `isLink` is Bulma's `is-link` colour and collides with `isColor`, and an
@@ -241,7 +322,7 @@ const SPECIALS: Record<string, SpecialHandler> = {
         );
       }
     }
-    const handled = anchorWhenHref(ctx, element, true);
+    const handled = anchorWhenHref(ctx, element, { setAs: true });
     return { handledProps: ['isLink', ...handled] };
   },
 
@@ -289,35 +370,7 @@ const SPECIALS: Record<string, SpecialHandler> = {
       }
     }
 
-    const classAttr = findAttr(element, 'className');
-    if (classAttr) {
-      const literal = literalValueOf(classAttr);
-      removeAttr(element, classAttr);
-      ctx.dirty = true;
-      if (literal.kind === 'string') {
-        iconFromClasses(ctx, path, element, literal.value, 'Icon');
-      } else {
-        iconFromClasses(
-          ctx,
-          path,
-          element,
-          { dynamic: classAttr.value.expression },
-          'Icon'
-        );
-      }
-    } else {
-      const children = (element.children ?? []).filter(
-        (c: any) => !(c.type === 'JSXText' && c.value.trim() === '')
-      );
-      if (children.length === 0) {
-        addTodo(
-          ctx,
-          path,
-          'component:Icon',
-          'no icon classes to carry over (bloomer read them from `className`); bestax `Icon` needs a `name` (plus `library`/`variant`) or a child node'
-        );
-      }
-    }
+    iconFromElement(ctx, path, element, 'Icon');
 
     if (alignClass) {
       addAttr(element, makeAttr(ctx.j, 'className', alignClass));
@@ -325,36 +378,10 @@ const SPECIALS: Record<string, SpecialHandler> = {
     return { handledProps: ['className', 'isAlign'] };
   },
 
-  /**
-   * bloomer's PanelIcon is `<span class="panel-icon">{children}</span>` with
-   * an icon-font <i> child; bestax's Panel.Icon is an Icon in panel clothing.
-   */
+  /** bloomer's PanelIcon is its Icon in panel clothing: same className API. */
   'panel-icon'(ctx, path, element) {
-    const children = (element.children ?? []).filter(
-      (c: any) => !(c.type === 'JSXText' && c.value.trim() === '')
-    );
-    const iChild =
-      children.length === 1 &&
-      children[0].type === 'JSXElement' &&
-      children[0].openingElement?.name?.type === 'JSXIdentifier' &&
-      (children[0].openingElement.name.name === 'i' ||
-        children[0].openingElement.name.name === 'span')
-        ? children[0]
-        : null;
-    const classAttr = iChild ? findAttr(iChild, 'className') : undefined;
-    const literal = classAttr ? literalValueOf(classAttr) : undefined;
-    if (literal?.kind === 'string') {
-      iconFromClasses(ctx, path, element, literal.value, 'PanelIcon');
-    } else if (children.length === 0) {
-      addTodo(
-        ctx,
-        path,
-        'component:PanelIcon',
-        'empty PanelIcon; bestax `Panel.Icon` needs a `name` (plus `library`/`variant`) or a child node'
-      );
-    }
-    // Anything else is a child node bestax's Panel.Icon renders unchanged.
-    return {};
+    iconFromElement(ctx, path, element, 'PanelIcon');
+    return { handledProps: ['className'] };
   },
 
   /**
@@ -520,17 +547,40 @@ const SPECIALS: Record<string, SpecialHandler> = {
       'component:Dropdown',
       'bestax `Dropdown` takes a `label` and renders its own trigger and menu; move the `<DropdownTrigger>` content into `label`, keep the `<DropdownItem>`s as direct children, and drop the `DropdownMenu`/`DropdownContent` wrappers'
     );
-    return { handledProps: anchorWhenHref(ctx, element, false) };
+    return { handledProps: anchorWhenHref(ctx, element) };
   },
 
   /** bestax's Level.Item renders a <div> unless `as="a"`. */
   'level-item'(ctx, _path, element) {
-    return { handledProps: anchorWhenHref(ctx, element, true) };
+    return { handledProps: anchorWhenHref(ctx, element, { setAs: true }) };
   },
 
   /** Targets that already render an <a>: a surviving `tag` would undo it. */
   'anchor-when-href'(ctx, _path, element) {
-    return { handledProps: anchorWhenHref(ctx, element, false) };
+    return { handledProps: anchorWhenHref(ctx, element) };
+  },
+
+  /** bloomer's default DropdownItem was a <div>; bestax's Dropdown.Item is an <a>. */
+  'dropdown-item'(ctx, _path, element) {
+    return { handledProps: anchorWhenHref(ctx, element, { bareAs: 'div' }) };
+  },
+
+  /**
+   * bestax's Panel.Block is always an <a>; bloomer's was a <div> unless
+   * `href` was set (a checkbox label, a search box). Only the anchor case
+   * is the bestax component — the rest stays the plain block it was.
+   */
+  'panel-block'(ctx, path, element) {
+    if (findAttr(element, 'href')) {
+      return { handledProps: anchorWhenHref(ctx, element) };
+    }
+    const cls = join(
+      'panel-block',
+      booleanClass(ctx, path, element, 'isActive', 'is-active', 'PanelBlock'),
+      booleanClass(ctx, path, element, 'isWrapped', 'is-wrapped', 'PanelBlock')
+    );
+    const tag = plainTag(ctx, path, element, 'div', 'PanelBlock');
+    return replaceWithPlain(ctx, path, element, tag, cls, 'PanelBlock');
   },
 
   /**
@@ -587,7 +637,12 @@ const SPECIALS: Record<string, SpecialHandler> = {
       }
       ctx.dirty = true;
     }
-    const handled = anchorWhenHref(ctx, element, false);
+    // bloomer's default NavbarItem was a <div>; bestax's Navbar.Item is an <a>.
+    const handled = anchorWhenHref(
+      ctx,
+      element,
+      target === 'Navbar.Item' ? { bareAs: 'div' } : {}
+    );
     restrictAsToTargets(ctx, path, element, target, ['Navbar.Item'], 'tag');
     return {
       target,
@@ -656,7 +711,7 @@ const SPECIALS: Record<string, SpecialHandler> = {
         'dynamic PageControl `isNext`; pick between `<Pagination.Previous>` and `<Pagination.Next>` by hand'
       );
     }
-    const handled = anchorWhenHref(ctx, element, false);
+    const handled = anchorWhenHref(ctx, element);
     return { target, handledProps: ['isNext', 'isPrevious', ...handled] };
   },
 
@@ -666,6 +721,32 @@ const SPECIALS: Record<string, SpecialHandler> = {
    * so the wrapper folds onto its child.
    */
   page(ctx, path, element) {
+    const foldable = (element.children ?? []).some(
+      (c: any) =>
+        c.type === 'JSXElement' &&
+        ['PageLink', 'PageEllipsis'].includes(
+          ctx.resolve?.(c.openingElement?.name)?.join('.') ?? ''
+        )
+    );
+    if (foldable) {
+      // The child renders the <li> itself, so a `tag` on the wrapper has
+      // nothing left to apply to. bloomer's default is the same <li>; anything
+      // else is a change bestax cannot express.
+      const tagAttr = findAttr(element, 'tag');
+      if (tagAttr) {
+        const literal = literalValueOf(tagAttr);
+        removeAttr(element, tagAttr);
+        ctx.dirty = true;
+        if (!(literal.kind === 'string' && literal.value === 'li')) {
+          addTodo(
+            ctx,
+            path,
+            'prop:tag',
+            'bestax `Pagination.Link` and `Pagination.Ellipsis` render their own <li>, so the `tag` on this Page has nowhere to go; restyle the item by hand if it mattered'
+          );
+        }
+      }
+    }
     const collapsed = collapseOntoChild(ctx, path, element, 'Page', [
       'PageLink',
       'PageEllipsis',
@@ -712,6 +793,18 @@ const SPECIALS: Record<string, SpecialHandler> = {
     return replaceWithPlain(ctx, path, element, tag, cls, 'HeroVideo');
   },
 
+  /**
+   * bloomer's Subtitle defaulted to an <h2>; bestax's SubTitle defaults to an
+   * <h1>. Keeping the heading level is what a screen reader hears.
+   */
+  subtitle(ctx, _path, element) {
+    if (!findAttr(element, 'tag') && !findAttr(element, 'as')) {
+      addAttr(element, makeAttr(ctx.j, 'as', 'h2'));
+      ctx.dirty = true;
+    }
+    return {};
+  },
+
   /** Marks the element for the column size pass in responsive.ts. */
   column() {
     return {};
diff --git a/bestax-migrate/src/sources/bloomer/transform.ts b/bestax-migrate/src/sources/bloomer/transform.ts
index 85285bfa1..1cdff8835 100644
--- a/bestax-migrate/src/sources/bloomer/transform.ts
+++ b/bestax-migrate/src/sources/bloomer/transform.ts
@@ -267,6 +267,17 @@ export default function transform(
     const imported = imports.get(head);
     if (imported === undefined || imported === '*') return;
     const parent = path.parent?.node;
+    // A target-less special (NavbarItem, Help, PageControl, …) used as a bare
+    // value is retained by the value-reference pass, so its local must not be
+    // handed to a bestax import first.
+    if (
+      parent?.type !== 'ImportSpecifier' &&
+      parent?.type !== 'MemberExpression'
+    ) {
+      const bare = MAPPING[imported];
+      if (bare && bare.status !== 'todo' && !bare.target) bound.add(head);
+      return;
+    }
     if (
       parent?.type !== 'MemberExpression' ||
       parent.object !== path.node ||
@@ -306,10 +317,14 @@ export default function transform(
   const existingBestax = root
     .find(j.ImportDeclaration, { source: { value: BESTAX } })
     .paths()
-    .find(p =>
-      (p.node.specifiers ?? []).every(
-        (spec: any) => spec.type === 'ImportSpecifier'
-      )
+    .find(
+      p =>
+        // A type-only declaration cannot take a value specifier: merging a
+        // component into `import type { … }` erases it at runtime.
+        p.node.importKind !== 'type' &&
+        (p.node.specifiers ?? []).every(
+          (spec: any) => spec.type === 'ImportSpecifier'
+        )
     );
   const preExistingImports = new Set<string>();
   if (existingBestax) {
@@ -547,8 +562,7 @@ export default function transform(
       if (
         shorthandMapping &&
         shorthandMapping.status !== 'todo' &&
-        shorthandMapping.target &&
-        !shorthandMapping.special
+        shorthandMapping.target
       ) {
         const [root, ...rest] = shorthandMapping.target.split('.');
         const local = ctx.reserve(root);
@@ -586,12 +600,11 @@ export default function transform(
       return;
     }
     const mapping = MAPPING[imported];
-    if (
-      mapping &&
-      mapping.status !== 'todo' &&
-      mapping.target &&
-      !mapping.special
-    ) {
+    // A special that has a `target` only adjusts props on the JSX path; it
+    // never changes the target, so a value reference points at the same
+    // bestax component (`const Old = Icon` → bestax's Icon). Only a
+    // target-less special (NavbarItem, Help, …) has nothing to rename to.
+    if (mapping && mapping.status !== 'todo' && mapping.target) {
       const [root, ...rest] = mapping.target.split('.');
       const local = ctx.reserve(root);
       if (rest.length > 0) {
diff --git a/bestax-migrate/src/sources/rbx/specials.ts b/bestax-migrate/src/sources/rbx/specials.ts
index 84a9625cc..cf3770aea 100644
--- a/bestax-migrate/src/sources/rbx/specials.ts
+++ b/bestax-migrate/src/sources/rbx/specials.ts
@@ -37,6 +37,7 @@ import {
 } from '../_shared/jsx-utils.js';
 import {
   alignTarget,
+  applyIconProps,
   makeStripModifierProps,
   makeStructuralHelpers,
   mergeClassName,
@@ -196,20 +197,10 @@ const SPECIALS: Record<string, SpecialHandler> = {
       const literal = classAttr ? literalValueOf(classAttr) : undefined;
       if (literal?.kind === 'string') {
         const parsed = parseIconClasses(literal.value);
-        if (parsed) {
-          addAttr(element, makeAttr(ctx.j, 'name', parsed.name));
-          if (parsed.library) {
-            addAttr(element, makeAttr(ctx.j, 'library', parsed.library));
-          }
-          if (parsed.variant) {
-            addAttr(element, makeAttr(ctx.j, 'variant', parsed.variant));
-          }
-          element.children = [];
-          if (element.openingElement) {
-            element.openingElement.selfClosing = true;
-            element.closingElement = null;
-          }
-          ctx.dirty = true;
+        // An app's own class on the <i> has no home on bestax's glyph, so
+        // the child is kept (and flagged below) rather than losing it.
+        if (parsed && parsed.leftovers.length === 0) {
+          applyIconProps(ctx, element, parsed);
           return {};
         }
       }
diff --git a/bestax-migrate/src/sources/rbx/transform.ts b/bestax-migrate/src/sources/rbx/transform.ts
index 8186c94f7..a6dc70c53 100644
--- a/bestax-migrate/src/sources/rbx/transform.ts
+++ b/bestax-migrate/src/sources/rbx/transform.ts
@@ -437,10 +437,14 @@ export default function transform(
   const existingBestax = root
     .find(j.ImportDeclaration, { source: { value: BESTAX } })
     .paths()
-    .find(p =>
-      (p.node.specifiers ?? []).every(
-        (spec: any) => spec.type === 'ImportSpecifier'
-      )
+    .find(
+      p =>
+        // A type-only declaration cannot take a value specifier: merging a
+        // component into `import type { … }` erases it at runtime.
+        p.node.importKind !== 'type' &&
+        (p.node.specifiers ?? []).every(
+          (spec: any) => spec.type === 'ImportSpecifier'
+        )
     );
   const preExistingImports = new Set<string>();
   if (existingBestax) {
diff --git a/bestax-migrate/src/sources/react-bulma-components/__tests__/transform.test.ts b/bestax-migrate/src/sources/react-bulma-components/__tests__/transform.test.ts
index dade20e0a..fdbc77989 100644
--- a/bestax-migrate/src/sources/react-bulma-components/__tests__/transform.test.ts
+++ b/bestax-migrate/src/sources/react-bulma-components/__tests__/transform.test.ts
@@ -705,7 +705,9 @@ describe('react-bulma-components transform fixtures', () => {
       ].join('\n');
       const { output } = runTransform(transform, 'icon-modifier.tsx', source);
       expect(output).toContain('name="home"');
-      expect(output).not.toContain('rotate-90"');
+      expect(output).not.toContain('name="rotate-90"');
+      // …and the modifier survives as a bestax `features` entry.
+      expect(output).toContain('features="fa-rotate-90"');
     });
   });
 
diff --git a/bestax-migrate/src/sources/react-bulma-components/specials.ts b/bestax-migrate/src/sources/react-bulma-components/specials.ts
index 43fbd05ab..182896112 100644
--- a/bestax-migrate/src/sources/react-bulma-components/specials.ts
+++ b/bestax-migrate/src/sources/react-bulma-components/specials.ts
@@ -27,6 +27,7 @@ import {
   alignTarget,
   makeStripModifierProps,
   mergeClassName,
+  applyIconProps,
   parseIconClasses,
   type SpecialHandler,
   type SpecialResult,
@@ -540,7 +541,9 @@ const SPECIALS: Record<string, SpecialHandler> = {
               cls && cls.value && cls.value.type === 'StringLiteral'
                 ? cls.value.value
                 : null;
-            return value ? parseIconClasses(value) : null;
+            const read = value ? parseIconClasses(value) : null;
+            // An app's own class on the <i> has no home on bestax's glyph.
+            return read && read.leftovers.length === 0 ? read : null;
           })()
         : null;
     if (!parsed) {
@@ -553,11 +556,8 @@ const SPECIALS: Record<string, SpecialHandler> = {
       return {};
     }
     if (!findAttr(element, 'name') && !findAttr(element, 'icon')) {
-      addAttr(element, makeAttr(ctx.j, 'name', parsed.name));
-      if (parsed.library)
-        addAttr(element, makeAttr(ctx.j, 'library', parsed.library));
-      if (parsed.variant)
-        addAttr(element, makeAttr(ctx.j, 'variant', parsed.variant));
+      applyIconProps(ctx, element, parsed);
+      return {};
     }
     element.children = [];
     if (element.closingElement) {
diff --git a/bestax-migrate/src/sources/react-bulma-components/transform.ts b/bestax-migrate/src/sources/react-bulma-components/transform.ts
index 4d2cfc0a6..cc04a70b2 100644
--- a/bestax-migrate/src/sources/react-bulma-components/transform.ts
+++ b/bestax-migrate/src/sources/react-bulma-components/transform.ts
@@ -368,10 +368,14 @@ export default function transform(
   const existingBestax = root
     .find(j.ImportDeclaration, { source: { value: BESTAX } })
     .paths()
-    .find(path =>
-      (path.node.specifiers ?? []).every(
-        (spec: any) => spec.type === 'ImportSpecifier'
-      )
+    .find(
+      path =>
+        // A type-only declaration cannot take a value specifier: merging a
+        // component into `import type { … }` erases it at runtime.
+        path.node.importKind !== 'type' &&
+        (path.node.specifiers ?? []).every(
+          (spec: any) => spec.type === 'ImportSpecifier'
+        )
     );
   const preExistingImports = new Set<string>();
   if (existingBestax) {
diff --git a/docs/docs/guides/getting-started/migration/bloomer.md b/docs/docs/guides/getting-started/migration/bloomer.md
index 7eb2780c6..23003963f 100644
--- a/docs/docs/guides/getting-started/migration/bloomer.md
+++ b/docs/docs/guides/getting-started/migration/bloomer.md
@@ -54,8 +54,10 @@ in place:
   `Pagination.Link`, `Subtitle` → `SubTitle`. `PageControl` becomes `Pagination.Previous` or
   `Pagination.Next` from its `isNext`; `NavbarItem hasDropdown` becomes the `Navbar.Dropdown`
   container and `NavbarDropdown` its `Navbar.DropdownMenu`.
-- **Props** — bloomer's `is*` booleans are already bestax's (`isActive`, `isLoading`,
-  `isOutlined`, `isBordered`, …) and pass through. The value props are renamed per component:
+- **Props** — most of bloomer's `is*` booleans are already bestax's (`isLoading`,
+  `isOutlined`, `isBordered`, …) and pass through; `isActive` becomes `active` where bestax
+  names it that way, and `isFullWidth` survives only where bestax declares it. The value props
+  are renamed per component:
   `isColor` → `color`, `isSize` → `size` (numbers stay numbers on `Title`/`Subtitle`), `isAlign`
   → `alignment` / `align` / `right`, `hasTextAlign` → `textAlign`, `hasTextColor` →
   `textColor`, `isPulled` → `float`, `isMarginless` → `m="0"`, `tag` → `as` where bestax
@@ -69,8 +71,11 @@ in place:
   per-breakpoint object → `sizeMobile`/`sizeTablet`/…
 - **Structure** — wrappers bestax renders itself fold away: `Page` onto its `PageLink`,
   `TabLink` into a plain `<a>` inside `Tabs.Item`. `Help`, `Label`, `Heading`, `BreadcrumbItem`,
-  `PanelTab` and `HeroVideo` become the plain Bulma markup bloomer rendered. Icon-font classes
-  the codemod can read (Font Awesome 5/6, MDI) become `<Icon name="…" library="…" />`.
+  `PanelTab` and `HeroVideo` become the plain Bulma markup bloomer rendered, and so does a
+  `PanelBlock` without `href` (bestax's is always an `<a>`). Icon-font classes the codemod can
+  read (Font Awesome 5/6, MDI) become `<Icon name="…" library="…" />`, modifiers included as
+  `features`. Where bloomer rendered a `<div>` and bestax defaults to an `<a>` (`NavbarItem`,
+  `DropdownItem`), the codemod adds `as="div"`.
 - **Stylesheets** — your `bulma/css/bulma.css` import becomes the bestax bundle, and a Sass
   `@import "~bulma/bulma"` with its `$variable` overrides becomes `@use "bulma/sass" with (…)`.
 - **package.json** — `bloomer` is removed, `@allxsmith/bestax-bulma` added, your pre-1 `bulma`
diff --git a/docs/docs/skills/migrate.mdx b/docs/docs/skills/migrate.mdx
index b33f4b5c3..59cd84f2b 100644
--- a/docs/docs/skills/migrate.mdx
+++ b/docs/docs/skills/migrate.mdx
@@ -68,7 +68,9 @@ The mapping tables are per source — `references/react-bulma-components/`, `ref
 - `unmappables.md` — a recipe for every `TODO(bestax-migrate)` the codemod can leave.
 
 - `references/css-migration.md` — the Bulma 0.9 → 1 CSS step, shared by all three: the stylesheet
-  work is about Bulma, not about which wrapper you came from.
+  work is about Bulma, not about which wrapper you came from. A bloomer app starts from Bulma
+  0.6, so it crosses that step plus the 0.6 → 0.9 changes before it; the reference says which
+  it covers.
 
 See the full migration guides for the codemod itself:
 [react-bulma-components](../guides/getting-started/migration/react-bulma-components.md) ·
diff --git a/skills/bestax-migrate/SKILL.md b/skills/bestax-migrate/SKILL.md
index 5e76e114d..d7dd18773 100644
--- a/skills/bestax-migrate/SKILL.md
+++ b/skills/bestax-migrate/SKILL.md
@@ -103,8 +103,9 @@ code per the references, or deliberately keep the old markup with `className` st
   not. Because rbx pinned Bulma 0.7.5, you cross **two** Bulma majors — expect more visual
   drift than the 0.9 → 1 guide alone describes.
 - **bloomer**: every export is a flat name and most become dotted bestax compounds
-  (`CardHeaderTitle` → `Card.Header.Title`). Its `is*` booleans already are bestax's; the
-  work is in `isSize`/`isColor`/`isAlign` (renamed per component), the `isDisplay`/`isHidden`
+  (`CardHeaderTitle` → `Card.Header.Title`). Most of its `is*` booleans already are bestax's
+  (`isActive` becomes `active` where bestax names it so; `isFullWidth` survives only on
+  Button, Select, Table and Tabs); the work is in `isSize`/`isColor`/`isAlign` (renamed per component), the `isDisplay`/`isHidden`
   helpers (flattened, arrays and objects included), `tag` (→ `as` where bestax has one) and
   `render` (always a TODO). Its icons are className-based and Font Awesome 4 — the biggest
   visual risk, see `references/bloomer/unmappables.md`. The app declared its own Bulma 0.6,
diff --git a/skills/bestax-migrate/references/bloomer/component-map.md b/skills/bestax-migrate/references/bloomer/component-map.md
index 177cca2fe..622e73642 100644
--- a/skills/bestax-migrate/references/bloomer/component-map.md
+++ b/skills/bestax-migrate/references/bloomer/component-map.md
@@ -151,6 +151,7 @@ Some targets depend on a prop or a child, so the codemod picks them element by e
 | `PageControl`                                        | `Pagination.Previous` / `Pagination.Next`                          | `isNext` (bloomer's default is previous)         |
 | `NavbarItem`                                         | `Navbar.Item` / `Navbar.Dropdown`                                  | `hasDropdown`                                    |
 | `Page`                                               | _folded into its child_ / `<li>`                                   | whether the child is a `PageLink`/`PageEllipsis` |
+| `PanelBlock`                                         | `Panel.Block` / `<div class="panel-block">`                        | `href` — bestax's block is always an `<a>`       |
 | `Icon`, `PanelIcon`                                  | `name`/`library`/`variant` / an `<i>` child                        | whether the icon classes are FA5/6 or MDI        |
 | `Help`, `Label`, `Heading`                           | `<p class="help">`, `<label class="label">`, `<p class="heading">` | always plain markup                              |
 | `BreadcrumbItem`, `PanelTab`, `TabLink`, `HeroVideo` | `<li>`, `<a>`, `<a>`, `<div class="hero-video">`                   | always plain markup                              |
diff --git a/skills/bestax-migrate/references/bloomer/prop-map.md b/skills/bestax-migrate/references/bloomer/prop-map.md
index 12dd41cb2..146406ea4 100644
--- a/skills/bestax-migrate/references/bloomer/prop-map.md
+++ b/skills/bestax-migrate/references/bloomer/prop-map.md
@@ -1,10 +1,14 @@
 # bloomer → bestax-bulma prop map
 
-bloomer's boolean modifiers are already bestax's names — `isActive`, `isLoading`, `isOutlined`,
+Most of bloomer's boolean modifiers are already bestax's names — `isLoading`, `isOutlined`,
 `isInverted`, `isStatic`, `isHovered`, `isFocused`, `isBordered`, `isStriped`, `isNarrow`,
-`isMultiline`, `isVCentered`, `isMobile`, … pass through untouched. What changes is the
-value-carrying props, the helper props every component inherited from `withHelpersModifiers`,
-and the two props bestax spells differently on every component.
+`isMultiline`, `isVCentered`, `isMobile`, … pass through untouched. The exceptions are in
+the tables below: `isActive` becomes `active` on the components whose bestax counterpart
+names it that way, `isFullWidth` survives only where bestax declares it, and a few
+(`Input isActive`, `NavbarLink isActive`, `PageLink isActive`) have no counterpart and become
+a TODO. What else changes is the value-carrying props, the helper props every component
+inherited from `withHelpersModifiers`, and the two props bestax spells differently on every
+component.
 
 ## Universal helper props
 
@@ -51,7 +55,7 @@ leftover would be a type error rather than a no-op.
 | `isColor="primary"`                                                                                          | `color="primary"` (every component that had it)                                                                                                         |
 | `isSize="large"`                                                                                             | `size="large"` — Button, Content, Delete, Icon, Input, Progress, Section, Select, Tag, TextArea, Breadcrumb, Pagination, Tabs, Field.Label, Modal.Close |
 | `Title isSize={3}`                                                                                           | `size={3}` — bestax accepts the numbers 1–6                                                                                                             |
-| `Subtitle isSize={4}`                                                                                        | `SubTitle size={4}`                                                                                                                                     |
+| `Subtitle isSize={4}`                                                                                        | `SubTitle size={4} as="h2"` — bloomer's default was an `<h2>`, bestax's is an `<h1>`, so the level is kept                                              |
 | `Image isSize="128x128"`                                                                                     | `size="128x128"`                                                                                                                                        |
 | `Image isRatio="16:9"`                                                                                       | `size="16by9"` (`square`→`square`, `1:1`→`1by1`, `4:3`→`4by3`, `3:2`→`3by2`, `2:1`→`2by1`)                                                              |
 | `Breadcrumb isAlign`                                                                                         | `alignment`                                                                                                                                             |
@@ -60,6 +64,8 @@ leftover would be a type error rather than a no-op.
 | `Pagination isAlign`                                                                                         | `align` (`"left"` is the default and is dropped)                                                                                                        |
 | `Dropdown isAlign="right"`                                                                                   | `right`; `isHoverable` → `hoverable`                                                                                                                    |
 | `Icon isAlign="left"`                                                                                        | `className="is-left"` (bestax's Icon has no align prop)                                                                                                 |
+| `Icon className="fas fa-spinner fa-spin"`                                                                    | `name="spinner" library="fa" variant="solid" features="fa-spin"` — modifier classes become `features`                                                   |
+| `PanelIcon className="fas fa-book"`                                                                          | `Panel.Icon name="book" library="fa" variant="solid"` — same className API as `Icon`                                                                    |
 | `Button isLink`                                                                                              | `color="link"` (a TODO if `isColor` is also set)                                                                                                        |
 | `Hero isFullHeight`                                                                                          | `size="fullheight"`                                                                                                                                     |
 | `Container isFluid`                                                                                          | `fluid`                                                                                                                                                 |
@@ -93,10 +99,14 @@ Everywhere else `tag` is left in place with a TODO. On the components that becom
 (`Help`, `Label`, `Heading`, `BreadcrumbItem`, `PanelTab`, `TabLink`, `Page`, `HeroVideo`) a
 literal `tag` is honoured — `<Help tag="span">` becomes `<span className="help">`.
 
-bloomer's `Button` and `Image` never took `tag` at all. bloomer rendered an `<a>` whenever `href` was set, whatever `tag` said. The codemod keeps that:
-`Button` and `LevelItem` gain `as="a"` beside their `href`, and a `tag` next to an `href` is
-dropped on the targets that already render an anchor (`Navbar.Item`, `Menu.Item`,
-`Dropdown.Item`, `Panel.Block`).
+bloomer's `Button` and `Image` never took `tag` at all. bloomer rendered an `<a>` whenever
+`href` was set, whatever `tag` said, and its default element was otherwise a `<div>`. The
+codemod keeps both: `Button` and `LevelItem` gain `as="a"` beside their `href`; a `tag` next to
+an `href` is dropped on the targets that already render an anchor (`Navbar.Item`, `Menu.Item`,
+`Dropdown.Item`, `Panel.Block`); and a `NavbarItem` or `DropdownItem` with neither `href` nor
+`tag` gains `as="div"`, because bestax's `Navbar.Item` and `Dropdown.Item` default to an `<a>`.
+bestax's `Panel.Block` is always an `<a>`, so only a `PanelBlock` with `href` becomes one — the
+rest stay the plain `<div class="panel-block">` (or the `tag` you gave) that bloomer rendered.
 
 ## Refs
 
diff --git a/skills/bestax-migrate/references/bloomer/unmappables.md b/skills/bestax-migrate/references/bloomer/unmappables.md
index 7e7c3b25e..7635caa35 100644
--- a/skills/bestax-migrate/references/bloomer/unmappables.md
+++ b/skills/bestax-migrate/references/bloomer/unmappables.md
@@ -13,8 +13,9 @@ bloomer's `Icon` put the icon-font classes on its own `className`, and its era w
 <Icon name="home" library="fa" variant="solid" size="large" />
 ```
 
-Anything else — FA4's `fa fa-home` above all — is moved onto an `<i>` child, which renders
-exactly what bloomer rendered, and flagged: bestax's optional Font Awesome peer is **6.7+**, where
+Modifier classes the library documents (`fa-spin`, `fa-lg`, `mdi-24px`) become bestax's
+`features`. Anything else — FA4's `fa fa-home` above all, or an app's own class beside the icon
+— is moved onto an `<i>` child, which renders exactly what bloomer rendered, and flagged: bestax's optional Font Awesome peer is **6.7+**, where
 many v4 names changed and brand icons moved to `variant="brands"`. Either keep FA4 loaded, or
 convert to the prop form:
 
@@ -23,8 +24,10 @@ convert to the prop form:
 <Icon name="github" library="fa" variant="brands" />
 ```
 
-`library` is `fa` | `mdi` | `ion` | `material-icons` | `material-symbols`. An `Icon` with no
-`className` and no children is flagged too: bestax's needs a `name` or a child.
+`library` is `fa` | `mdi` | `ion` | `material-icons` | `material-symbols`. `PanelIcon` has the
+same `className` API and converts the same way. An `Icon` with no `className` and no children
+is flagged too — it gets an empty `<i>` child so it compiles until you set a `name` or a child —
+and so is a `className` that is not a string (`prop:className`).
 
 ## `component:Nav` — Bulma 0.4's nav
 
@@ -140,24 +143,24 @@ own CSS styled the class.
 
 Each of these is left in place with a TODO naming the class to add instead:
 
-| prop                      | on                                           | what to do                                                                              |
-| ------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------- |
-| `isBold`                  | `Hero`                                       | `className="is-bold"` (Bulma v1 still ships it)                                         |
-| `isHalfHeight`            | `Hero`                                       | `className="is-halfheight"` — bestax's `size` has no half-height                        |
-| `isSize="large"`          | `Media`                                      | `className="is-large"`                                                                  |
-| `isSpaced`                | `Subtitle`                                   | `className="is-spaced"` — only `Title` has `isSpaced`                                   |
-| `isActive`                | `Input`                                      | `className="is-active"`                                                                 |
-| `isActive`, `isFocused`   | `PageLink`, `PageControl`, `PageEllipsis`    | `className="is-active"` / `"is-focused"`                                                |
-| `isActive`                | `NavbarLink`                                 | `className="is-active"`                                                                 |
-| `isHoverable`             | `NavbarItem` without `hasDropdown`           | move to the `Navbar.Dropdown`, or `className="is-hoverable"`                            |
-| `isBoxed`                 | `NavbarDropdown`, `NavbarDivider`            | `className="is-boxed"`                                                                  |
-| `isWrapped`               | `PanelBlock`                                 | `className="is-wrapped"`                                                                |
-| `isFlexible`              | `LevelItem`                                  | `className="is-flexible"`                                                               |
-| `hasAddons="fullwidth"`   | `Field`                                      | `hasAddons` plus `className="has-addons-fullwidth"`                                     |
-| `isAlign`                 | `TabList`                                    | set `align` on the `<Tabs>` — Bulma aligns the container                                |
-| `isGrid`                  | `Columns`                                    | Bulma removed `columns.is-grid` in 0.5; use `isMultiline` with sized columns, or `Grid` |
-| `href`                    | `CardFooterItem`, `CardHeaderIcon`, `Delete` | put an `<a>` inside, or handle it in `onClick`                                          |
-| `isRatio` beside `isSize` | `Image`                                      | bestax's one `size` took the fixed size; restore the ratio if that was the point        |
+| prop                      | on                                           | what to do                                                                               |
+| ------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| `isBold`                  | `Hero`                                       | `className="is-bold"` (Bulma v1 still ships it)                                          |
+| `isHalfHeight`            | `Hero`                                       | `className="is-halfheight"` — bestax's `size` has no half-height                         |
+| `isSize="large"`          | `Media`                                      | `className="is-large"`                                                                   |
+| `isSpaced`                | `Subtitle`                                   | `className="is-spaced"` — only `Title` has `isSpaced`                                    |
+| `isActive`                | `Input`                                      | `className="is-active"`                                                                  |
+| `isActive`, `isFocused`   | `PageLink`, `PageControl`, `PageEllipsis`    | `className="is-active"` / `"is-focused"`                                                 |
+| `isActive`                | `NavbarLink`                                 | `className="is-active"`                                                                  |
+| `isHoverable`             | `NavbarItem` without `hasDropdown`           | move to the `Navbar.Dropdown`, or `className="is-hoverable"`                             |
+| `isBoxed`                 | `NavbarDropdown`, `NavbarDivider`            | `className="is-boxed"`                                                                   |
+| `isWrapped`               | `PanelBlock` with `href`                     | `className="is-wrapped"` (a block without `href` stays plain markup and keeps the class) |
+| `isFlexible`              | `LevelItem`                                  | `className="is-flexible"`                                                                |
+| `hasAddons="fullwidth"`   | `Field`                                      | `hasAddons` plus `className="has-addons-fullwidth"`                                      |
+| `isAlign`                 | `TabList`                                    | set `align` on the `<Tabs>` — Bulma aligns the container                                 |
+| `isGrid`                  | `Columns`                                    | Bulma removed `columns.is-grid` in 0.5; use `isMultiline` with sized columns, or `Grid`  |
+| `href`                    | `CardFooterItem`, `CardHeaderIcon`, `Delete` | put an `<a>` inside, or handle it in `onClick`                                           |
+| `isRatio` beside `isSize` | `Image`                                      | bestax's one `size` took the fixed size; restore the ratio if that was the point         |
 
 ## `prop:isLink` — beside `isColor`
 
diff --git a/skills/bestax-migrate/references/rbx/unmappables.md b/skills/bestax-migrate/references/rbx/unmappables.md
index 51a1433d3..1e2d3eddd 100644
--- a/skills/bestax-migrate/references/rbx/unmappables.md
+++ b/skills/bestax-migrate/references/rbx/unmappables.md
@@ -15,7 +15,9 @@ FontAwesome component form, which carries no readable name.
 
 `library` is `fa` | `mdi` | `ion` | `material-icons` | `material-symbols`; `variant` is the style
 (`solid`, `regular`, `brands`, …). Icon-font children the parser _can_ read
-(`<i className="fas fa-home" />`) are converted automatically.
+(`<i className="fas fa-home" />`) are converted automatically, with modifier classes such as
+`fa-spin` carried as bestax's `features`; a child that also carries an app class of its own is
+kept and flagged instead.
 
 ## `component:Tile` — Bulma v1 removed tiles
 

From 54ffe06aa4f15f3afbe4144bee8327ac8b1e7374 Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 10:17:08 -0400
Subject: [PATCH 07/18] fix(bestax-migrate): honour inline type imports and
 flag what bloomer never rendered
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review round two on #642. An inline `type` specifier on an existing
bestax import is no longer taken for a value binding: the component is
written onto that specifier, keeping its local name, instead of being
reused (a runtime ReferenceError) or duplicated — in all three
transforms. Children on a bloomer Icon or PanelIcon, which bloomer never
rendered, are kept but flagged, since bestax will render them. A Page
fold that moves attributes off the <li> onto Pagination.Link's <a> names
what moved.
---
 .../tabs-pagination-panel.output.tsx          |  1 +
 .../bloomer/__tests__/specials.test.ts        | 21 ++++++++++--
 .../bloomer/__tests__/transform.test.ts       | 11 +++++++
 .../src/sources/bloomer/specials.ts           | 27 +++++++++++++++-
 .../src/sources/bloomer/transform.ts          | 32 ++++++++++++++++---
 bestax-migrate/src/sources/rbx/transform.ts   | 32 ++++++++++++++++---
 .../react-bulma-components/transform.ts       | 32 ++++++++++++++++---
 .../references/bloomer/component-map.md       | 18 +++++------
 .../references/bloomer/unmappables.md         |  3 +-
 9 files changed, 149 insertions(+), 28 deletions(-)

diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.output.tsx
index 7b2d72af5..3342ee892 100644
--- a/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.output.tsx
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.output.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { Breadcrumb, Dropdown, Pagination, Panel, Tabs } from "@allxsmith/bestax-bulma";
 
+// TODO(bestax-migrate): `className` sat on the Page's <li>; bestax's `Pagination.Link` and `Pagination.Ellipsis` render their own <li> and put props on the element inside it, so it now applies there — move it by hand if the <li> is what you styled
 // TODO(bestax-migrate): kept the Font Awesome 4 classes on an <i> child, as bloomer rendered them; bestax's optional Font Awesome peer is 6.7+, where many v4 names changed (brand icons moved to `variant="brands"`) — keep FA4 loaded, or switch to `name`/`library`/`variant` (`<Icon name="home" library="fa" variant="solid" />`)
 // TODO(bestax-migrate): bestax `Dropdown` takes a `label` and renders its own trigger and menu; move the `<DropdownTrigger>` content into `label`, keep the `<DropdownItem>`s as direct children, and drop the `DropdownMenu`/`DropdownContent` wrappers
 export const Navigation = ({ onSelect }: { onSelect: () => void }) => (
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
index c8bf93bdb..db3511f10 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
@@ -85,6 +85,23 @@ describe('bloomer plain-element handlers', () => {
     );
   });
 
+  it('names the Page attributes a fold moves onto the link', () => {
+    const { output, rules } = migrate(
+      dyn(
+        'Page, PageLink',
+        '<Page className="mine" id="p1" key="k"><PageLink>1</PageLink></Page>'
+      )
+    );
+    expect(rules).toEqual(['component:Page']);
+    expect(output).toContain(
+      '<Pagination.Link className="mine" id="p1" key="k">1</Pagination.Link>'
+    );
+    const bare = migrate(
+      dyn('Page, PageLink', '<Page key="k"><PageLink>1</PageLink></Page>')
+    );
+    expect(bare.rules).toEqual([]);
+  });
+
   it('merges an existing className into the plain element', () => {
     const { output } = migrate(
       dyn('Label', '<Label isSize="small" className="mine">x</Label>')
@@ -143,9 +160,9 @@ describe('bloomer Icon', () => {
     );
   });
 
-  it('keeps children it was given and says nothing', () => {
+  it('keeps children bloomer never rendered, and says so', () => {
     const { output, rules } = migrate(dyn('Icon', '<Icon><svg /></Icon>'));
-    expect(rules).toEqual([]);
+    expect(rules).toEqual(['component:Icon']);
     expect(output).toContain('<Icon><svg /></Icon>');
   });
 
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
index ea26d8905..6563c2d37 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
@@ -120,6 +120,17 @@ describe('bloomer imports', () => {
     expect(output).toContain('import { Box } from "@allxsmith/bestax-bulma";');
   });
 
+  it('turns an inline type specifier into the value import it needs', () => {
+    const { output } = migrate(
+      "import { Title, type Box } from '@allxsmith/bestax-bulma';\nimport { Box as BloomerBox } from 'bloomer';\nexport const A = (b: Box) => <><Title>x</Title><BloomerBox /></>;\n"
+    );
+    expect(output).toMatch(
+      /import \{ Title, Box \} from ['"]@allxsmith\/bestax-bulma['"]/
+    );
+    expect(output).toContain('(b: Box) => <><Title>x</Title><Box /></>');
+    expect(output).not.toContain('type Box');
+  });
+
   it('aliases a bestax import whose name the file already binds', () => {
     const { output } = migrate(
       "import { CardHeaderTitle } from 'bloomer';\nconst Card = () => null;\nexport const A = () => <><Card /><CardHeaderTitle>x</CardHeaderTitle></>;\n"
diff --git a/bestax-migrate/src/sources/bloomer/specials.ts b/bestax-migrate/src/sources/bloomer/specials.ts
index b34ef7f4d..da2868ae6 100644
--- a/bestax-migrate/src/sources/bloomer/specials.ts
+++ b/bestax-migrate/src/sources/bloomer/specials.ts
@@ -16,6 +16,7 @@ import { RENDER_TODO, RESPONSIVE_PROPS, UNIVERSAL_PROPS } from './mapping.js';
 import {
   addAttr,
   addTodo,
+  attributesOf,
   findAttr,
   literalValueOf,
   makeAttr,
@@ -286,8 +287,17 @@ function iconFromElement(
       `component:${where}`,
       `no icon classes to carry over (bloomer read them from \`className\`); bestax's needs a \`name\` (plus \`library\`/\`variant\`) or a child node — an empty <i> child keeps it compiling until you set one`
     );
+    return;
   }
-  // Children bloomer never rendered are left for bestax, which does.
+  // bloomer drew the glyph from `className` and never rendered its children;
+  // bestax renders them. They are kept — dropping markup is worse — but that
+  // is a change the user has to see.
+  addTodo(
+    ctx,
+    path,
+    `component:${where}`,
+    `bloomer's ${where} never rendered its children (the glyph came from \`className\`); bestax renders them, so check this is what you want to show, or replace them with \`name\`/\`library\`/\`variant\``
+  );
 }
 
 const SPECIALS: Record<string, SpecialHandler> = {
@@ -729,6 +739,21 @@ const SPECIALS: Record<string, SpecialHandler> = {
         )
     );
     if (foldable) {
+      // The child renders the <li> itself and puts its props on the <a> (or
+      // the ellipsis <span>), so whatever else sat on this <li> — a class, an
+      // id, a helper prop — lands on a different element after the fold.
+      // It is moved rather than lost, and named.
+      const moved = attributesOf(element)
+        .map((a: any) => a.name.name as string)
+        .filter(n => n !== 'tag' && n !== 'key');
+      if (moved.length > 0) {
+        addTodo(
+          ctx,
+          path,
+          'component:Page',
+          `${moved.map(n => `\`${n}\``).join(', ')} sat on the Page's <li>; bestax's \`Pagination.Link\` and \`Pagination.Ellipsis\` render their own <li> and put props on the element inside it, so ${moved.length === 1 ? 'it now applies' : 'they now apply'} there — move ${moved.length === 1 ? 'it' : 'them'} by hand if the <li> is what you styled`
+        );
+      }
       // The child renders the <li> itself, so a `tag` on the wrapper has
       // nothing left to apply to. bloomer's default is the same <li>; anything
       // else is a change bestax cannot express.
diff --git a/bestax-migrate/src/sources/bloomer/transform.ts b/bestax-migrate/src/sources/bloomer/transform.ts
index 1cdff8835..5e6dd01a8 100644
--- a/bestax-migrate/src/sources/bloomer/transform.ts
+++ b/bestax-migrate/src/sources/bloomer/transform.ts
@@ -330,8 +330,15 @@ export default function transform(
   if (existingBestax) {
     for (const spec of existingBestax.node.specifiers ?? []) {
       if (spec.type === 'ImportSpecifier' && spec.local) {
+        // The local name is reused either way, so the JSX never needs an
+        // alias. But an inline `type` specifier (`import { type Box }`) is
+        // not a value binding: it is not counted as already imported, so the
+        // component is written as a value below — onto this specifier, which
+        // keeps its name, rather than as a duplicate.
         ctx.needed.set(nameOf(spec.imported), nameOf(spec.local));
-        preExistingImports.add(nameOf(spec.imported));
+        if ((spec as { importKind?: string | null }).importKind !== 'type') {
+          preExistingImports.add(nameOf(spec.imported));
+        }
       }
     }
   }
@@ -673,10 +680,25 @@ export default function transform(
       });
       if (!inserted) {
         if (existingBestax && bestaxImport) {
-          existingBestax.node.specifiers = [
-            ...(existingBestax.node.specifiers ?? []),
-            ...bestaxImport.specifiers!,
-          ];
+          const current = existingBestax.node.specifiers ?? [];
+          const appended: any[] = [];
+          for (const fresh of bestaxImport.specifiers!) {
+            // A type-only specifier for the same name becomes the value
+            // import (a value import carries the type too); appending a
+            // second `Box` beside `type Box` would be a duplicate identifier.
+            const typeOnly: any = current.find(
+              (spec: any) =>
+                spec.type === 'ImportSpecifier' &&
+                spec.importKind === 'type' &&
+                nameOf(spec.imported) === nameOf((fresh as any).imported)
+            );
+            if (typeOnly) {
+              typeOnly.importKind = null;
+            } else {
+              appended.push(fresh);
+            }
+          }
+          existingBestax.node.specifiers = [...current, ...appended];
         } else if (bestaxImport) {
           path.insertBefore(bestaxImport);
         }
diff --git a/bestax-migrate/src/sources/rbx/transform.ts b/bestax-migrate/src/sources/rbx/transform.ts
index a6dc70c53..9f5837e2e 100644
--- a/bestax-migrate/src/sources/rbx/transform.ts
+++ b/bestax-migrate/src/sources/rbx/transform.ts
@@ -450,8 +450,15 @@ export default function transform(
   if (existingBestax) {
     for (const spec of existingBestax.node.specifiers ?? []) {
       if (spec.type === 'ImportSpecifier' && spec.local) {
+        // The local name is reused either way, so the JSX never needs an
+        // alias. But an inline `type` specifier (`import { type Box }`) is
+        // not a value binding: it is not counted as already imported, so the
+        // component is written as a value below — onto this specifier, which
+        // keeps its name, rather than as a duplicate.
         ctx.needed.set(nameOf(spec.imported), nameOf(spec.local));
-        preExistingImports.add(nameOf(spec.imported));
+        if ((spec as { importKind?: string | null }).importKind !== 'type') {
+          preExistingImports.add(nameOf(spec.imported));
+        }
       }
     }
   }
@@ -976,10 +983,25 @@ export default function transform(
       });
       if (!inserted) {
         if (existingBestax && bestaxImport) {
-          existingBestax.node.specifiers = [
-            ...(existingBestax.node.specifiers ?? []),
-            ...bestaxImport.specifiers!,
-          ];
+          const current = existingBestax.node.specifiers ?? [];
+          const appended: any[] = [];
+          for (const fresh of bestaxImport.specifiers!) {
+            // A type-only specifier for the same name becomes the value
+            // import (a value import carries the type too); appending a
+            // second `Box` beside `type Box` would be a duplicate identifier.
+            const typeOnly: any = current.find(
+              (spec: any) =>
+                spec.type === 'ImportSpecifier' &&
+                spec.importKind === 'type' &&
+                nameOf(spec.imported) === nameOf((fresh as any).imported)
+            );
+            if (typeOnly) {
+              typeOnly.importKind = null;
+            } else {
+              appended.push(fresh);
+            }
+          }
+          existingBestax.node.specifiers = [...current, ...appended];
         } else if (bestaxImport) {
           path.insertBefore(bestaxImport);
         }
diff --git a/bestax-migrate/src/sources/react-bulma-components/transform.ts b/bestax-migrate/src/sources/react-bulma-components/transform.ts
index cc04a70b2..b599ec32a 100644
--- a/bestax-migrate/src/sources/react-bulma-components/transform.ts
+++ b/bestax-migrate/src/sources/react-bulma-components/transform.ts
@@ -381,8 +381,15 @@ export default function transform(
   if (existingBestax) {
     for (const spec of existingBestax.node.specifiers ?? []) {
       if (spec.type === 'ImportSpecifier' && spec.local) {
+        // The local name is reused either way, so the JSX never needs an
+        // alias. But an inline `type` specifier (`import { type Box }`) is
+        // not a value binding: it is not counted as already imported, so the
+        // component is written as a value below — onto this specifier, which
+        // keeps its name, rather than as a duplicate.
         ctx.needed.set(nameOf(spec.imported), nameOf(spec.local));
-        preExistingImports.add(nameOf(spec.imported));
+        if ((spec as { importKind?: string | null }).importKind !== 'type') {
+          preExistingImports.add(nameOf(spec.imported));
+        }
       }
     }
   }
@@ -786,10 +793,25 @@ export default function transform(
       });
       if (!inserted) {
         if (existingBestax && bestaxImport) {
-          existingBestax.node.specifiers = [
-            ...(existingBestax.node.specifiers ?? []),
-            ...bestaxImport.specifiers!,
-          ];
+          const current = existingBestax.node.specifiers ?? [];
+          const appended: any[] = [];
+          for (const fresh of bestaxImport.specifiers!) {
+            // A type-only specifier for the same name becomes the value
+            // import (a value import carries the type too); appending a
+            // second `Box` beside `type Box` would be a duplicate identifier.
+            const typeOnly: any = current.find(
+              (spec: any) =>
+                spec.type === 'ImportSpecifier' &&
+                spec.importKind === 'type' &&
+                nameOf(spec.imported) === nameOf((fresh as any).imported)
+            );
+            if (typeOnly) {
+              typeOnly.importKind = null;
+            } else {
+              appended.push(fresh);
+            }
+          }
+          existingBestax.node.specifiers = [...current, ...appended];
         } else if (bestaxImport) {
           path.insertBefore(bestaxImport);
         }
diff --git a/skills/bestax-migrate/references/bloomer/component-map.md b/skills/bestax-migrate/references/bloomer/component-map.md
index 622e73642..2b322c255 100644
--- a/skills/bestax-migrate/references/bloomer/component-map.md
+++ b/skills/bestax-migrate/references/bloomer/component-map.md
@@ -146,12 +146,12 @@ that change along the way:
 
 Some targets depend on a prop or a child, so the codemod picks them element by element:
 
-| bloomer                                              | becomes                                                            | decided by                                       |
-| ---------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------ |
-| `PageControl`                                        | `Pagination.Previous` / `Pagination.Next`                          | `isNext` (bloomer's default is previous)         |
-| `NavbarItem`                                         | `Navbar.Item` / `Navbar.Dropdown`                                  | `hasDropdown`                                    |
-| `Page`                                               | _folded into its child_ / `<li>`                                   | whether the child is a `PageLink`/`PageEllipsis` |
-| `PanelBlock`                                         | `Panel.Block` / `<div class="panel-block">`                        | `href` — bestax's block is always an `<a>`       |
-| `Icon`, `PanelIcon`                                  | `name`/`library`/`variant` / an `<i>` child                        | whether the icon classes are FA5/6 or MDI        |
-| `Help`, `Label`, `Heading`                           | `<p class="help">`, `<label class="label">`, `<p class="heading">` | always plain markup                              |
-| `BreadcrumbItem`, `PanelTab`, `TabLink`, `HeroVideo` | `<li>`, `<a>`, `<a>`, `<div class="hero-video">`                   | always plain markup                              |
+| bloomer                                              | becomes                                                            | decided by                                                                                                                |
+| ---------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
+| `PageControl`                                        | `Pagination.Previous` / `Pagination.Next`                          | `isNext` (bloomer's default is previous)                                                                                  |
+| `NavbarItem`                                         | `Navbar.Item` / `Navbar.Dropdown`                                  | `hasDropdown`                                                                                                             |
+| `Page`                                               | _folded into its child_ / `<li>`                                   | whether the child is a `PageLink`/`PageEllipsis`; attributes on the Page move onto the link, with a `component:Page` note |
+| `PanelBlock`                                         | `Panel.Block` / `<div class="panel-block">`                        | `href` — bestax's block is always an `<a>`                                                                                |
+| `Icon`, `PanelIcon`                                  | `name`/`library`/`variant` / an `<i>` child                        | whether the icon classes are FA5/6 or MDI                                                                                 |
+| `Help`, `Label`, `Heading`                           | `<p class="help">`, `<label class="label">`, `<p class="heading">` | always plain markup                                                                                                       |
+| `BreadcrumbItem`, `PanelTab`, `TabLink`, `HeroVideo` | `<li>`, `<a>`, `<a>`, `<div class="hero-video">`                   | always plain markup                                                                                                       |
diff --git a/skills/bestax-migrate/references/bloomer/unmappables.md b/skills/bestax-migrate/references/bloomer/unmappables.md
index 7635caa35..9b9080e65 100644
--- a/skills/bestax-migrate/references/bloomer/unmappables.md
+++ b/skills/bestax-migrate/references/bloomer/unmappables.md
@@ -27,7 +27,8 @@ convert to the prop form:
 `library` is `fa` | `mdi` | `ion` | `material-icons` | `material-symbols`. `PanelIcon` has the
 same `className` API and converts the same way. An `Icon` with no `className` and no children
 is flagged too — it gets an empty `<i>` child so it compiles until you set a `name` or a child —
-and so is a `className` that is not a string (`prop:className`).
+and so is a `className` that is not a string (`prop:className`). An `Icon` written with children
+is flagged as well: bloomer never rendered them, bestax will.
 
 ## `component:Nav` — Bulma 0.4's nav
 

From e2cf7daea3c88e62c835ee979d7a0dd93fa79dc6 Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 11:17:00 -0400
Subject: [PATCH 08/18] fix(bestax-migrate): keep bloomer's markup and public
 names through the edges a review found
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Findings from a deep review of #642, all reproduced on the built transform.

Shared, all three sources: the value-reference pass no longer rewrites
identifiers that merely name a member (object/class keys, TS signatures,
enum members) and handles export specifiers itself — a flat target keeps
its public name (`export { SubTitle as Subtitle }`), a compound one is
flagged; an inline `type` specifier becomes a value import only when the
codemod needs that name; comments on a pruned import move to its
replacement; a namespace import used as a plain value and a barrel
re-export are flagged; `rename` refuses to write a duplicate attribute.

bloomer: Input/Select/TextArea map onto the bare InputBase/SelectBase/
TextAreaBase (bestax's composites wrap themselves in Field and Control);
the literal <li> around a MenuLink and <ul> inside a Breadcrumb fold away,
as bestax renders both; Page folds only the shape it can and warns about a
link it cannot reach; helpers on parts that take none become class hints;
anchorWhenHref applies only to the components that switched on href, and
a dynamic href is flagged rather than guessed; Dropdown.Item's missing
href, Label's tag and children removed beside an Icon className are all
named. The MCP index is regenerated.
---
 bestax-mcp/data/skills.json                   |   8 +-
 .../bloomer-kitchen-sink/src/components.tsx   |  22 +-
 .../bloomer-kitchen-sink/src/leftovers.tsx    |   2 +-
 bestax-migrate/src/sources/_shared/props.ts   |  16 ++
 .../__testfixtures__/compounds.input.tsx      |   9 +-
 .../__testfixtures__/compounds.output.tsx     |   1 +
 .../bloomer/__testfixtures__/form.output.tsx  |  12 +-
 .../tabs-pagination-panel.input.tsx           |  14 +-
 .../tabs-pagination-panel.output.tsx          |   1 +
 .../bloomer/__tests__/specials.test.ts        | 149 +++++++++++-
 .../bloomer/__tests__/transform.test.ts       |  56 ++++-
 bestax-migrate/src/sources/bloomer/mapping.ts |  90 +++++++-
 .../src/sources/bloomer/specials.ts           | 214 ++++++++++++++----
 .../src/sources/bloomer/transform.ts          | 163 ++++++++++++-
 bestax-migrate/src/sources/rbx/transform.ts   | 129 ++++++++++-
 .../react-bulma-components/transform.ts       | 129 ++++++++++-
 .../getting-started/migration/bloomer.md      |   7 +-
 .../references/bloomer/component-map.md       |   8 +-
 .../references/bloomer/prop-map.md            |  80 ++++---
 .../references/bloomer/unmappables.md         |  72 ++++--
 20 files changed, 1038 insertions(+), 144 deletions(-)

diff --git a/bestax-mcp/data/skills.json b/bestax-mcp/data/skills.json
index a6da7da60..d22ce627b 100644
--- a/bestax-mcp/data/skills.json
+++ b/bestax-mcp/data/skills.json
@@ -88,17 +88,17 @@
         {
           "id": "bloomer-component-map",
           "file": "references/bloomer/component-map.md",
-          "bytes": 10697
+          "bytes": 12033
         },
         {
           "id": "bloomer-prop-map",
           "file": "references/bloomer/prop-map.md",
-          "bytes": 12738
+          "bytes": 18056
         },
         {
           "id": "bloomer-unmappables",
           "file": "references/bloomer/unmappables.md",
-          "bytes": 10973
+          "bytes": 14391
         },
         {
           "id": "css-migration",
@@ -118,7 +118,7 @@
         {
           "id": "rbx-unmappables",
           "file": "references/rbx/unmappables.md",
-          "bytes": 10780
+          "bytes": 10931
         },
         {
           "id": "react-bulma-components-component-map",
diff --git a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/components.tsx b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/components.tsx
index 4fb1c8051..211995380 100644
--- a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/components.tsx
+++ b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/components.tsx
@@ -65,12 +65,14 @@ import {
 export const Components = ({ open }: { open: boolean }) => (
   <>
     <Breadcrumb isAlign="centered" hasSeparator="arrow" isSize="small">
-      <BreadcrumbItem>
-        <a href="/">Home</a>
-      </BreadcrumbItem>
-      <BreadcrumbItem isActive>
-        <a href="/here">Here</a>
-      </BreadcrumbItem>
+      <ul>
+        <BreadcrumbItem>
+          <a href="/">Home</a>
+        </BreadcrumbItem>
+        <BreadcrumbItem isActive>
+          <a href="/here">Here</a>
+        </BreadcrumbItem>
+      </ul>
     </Breadcrumb>
     <Card>
       <CardHeader>
@@ -103,9 +105,11 @@ export const Components = ({ open }: { open: boolean }) => (
     <Menu>
       <MenuLabel>General</MenuLabel>
       <MenuList>
-        <MenuLink isActive href="/">
-          Dashboard
-        </MenuLink>
+        <li>
+          <MenuLink isActive href="/">
+            Dashboard
+          </MenuLink>
+        </li>
       </MenuList>
     </Menu>
     <Message isColor="info">
diff --git a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/leftovers.tsx b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/leftovers.tsx
index d2e46e43a..67ca2c0df 100644
--- a/bestax-migrate/fixtures/bloomer-kitchen-sink/src/leftovers.tsx
+++ b/bestax-migrate/fixtures/bloomer-kitchen-sink/src/leftovers.tsx
@@ -68,7 +68,7 @@ export const Leftovers = ({
       </DropdownTrigger>
       <DropdownMenu>
         <DropdownContent>
-          <DropdownItem>A</DropdownItem>
+          <DropdownItem href="/a">A</DropdownItem>
         </DropdownContent>
       </DropdownMenu>
     </Dropdown>
diff --git a/bestax-migrate/src/sources/_shared/props.ts b/bestax-migrate/src/sources/_shared/props.ts
index f436342de..63b6d8e63 100644
--- a/bestax-migrate/src/sources/_shared/props.ts
+++ b/bestax-migrate/src/sources/_shared/props.ts
@@ -160,6 +160,22 @@ export function applyPropAction(
   }
 
   let renamedTo = originalName;
+  if (
+    action.rename &&
+    action.rename !== originalName &&
+    findAttr(element, action.rename)
+  ) {
+    // Two source props can converge on one bestax prop (`isSize` and
+    // `isFullHeight` both on `size`); renaming over the one already written
+    // produced a duplicate attribute, which is invalid JSX.
+    addTodo(
+      ctx,
+      path,
+      `prop:${originalName}`,
+      `\`${originalName}\` maps to \`${action.rename}\`, but \`${action.rename}\` is already set on this element; reconcile by hand`
+    );
+    return;
+  }
   if (action.rename) {
     attr.name = j.jsxIdentifier(action.rename);
     renamedTo = action.rename;
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.input.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.input.tsx
index 7a9ee5744..9c62a1e32 100644
--- a/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.input.tsx
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.input.tsx
@@ -90,9 +90,12 @@ export const Compounds = ({ open }: { open: boolean }) => (
     <Menu>
       <MenuLabel>General</MenuLabel>
       <MenuList>
-        <MenuLink isActive href="/">
-          Dashboard
-        </MenuLink>
+        <li>
+          <MenuLink isActive href="/">
+            Dashboard
+          </MenuLink>
+        </li>
+        <MenuLink href="/two">Two</MenuLink>
       </MenuList>
     </Menu>
     <Message isColor="info">
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.output.tsx
index 14832294f..bf510ac4c 100644
--- a/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.output.tsx
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.output.tsx
@@ -48,6 +48,7 @@ export const Compounds = ({ open }: { open: boolean }) => (
         <Menu.Item active href="/">
           Dashboard
         </Menu.Item>
+        <Menu.Item href="/two">Two</Menu.Item>
       </Menu.List>
     </Menu>
     <Message color="info">
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/form.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/form.output.tsx
index bd2eb2b88..31e2712a5 100644
--- a/bestax-migrate/src/sources/bloomer/__testfixtures__/form.output.tsx
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/form.output.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Checkbox, Control, Field, Icon, Input, Radio, Select, TextArea } from "@allxsmith/bestax-bulma";
+import { Checkbox, Control, Field, Icon, InputBase, Radio, SelectBase, TextAreaBase } from "@allxsmith/bestax-bulma";
 
 // TODO(bestax-migrate): `hasAddons="fullwidth"` — bestax `Field.hasAddons` takes `true`, "centered" or "right"; Bulma v1 keeps `has-addons-fullwidth`, so use `hasAddons` plus className="has-addons-fullwidth"
 // TODO(bestax-migrate): kept the Font Awesome 4 classes on an <i> child, as bloomer rendered them; bestax's optional Font Awesome peer is 6.7+, where many v4 names changed (brand icons moved to `variant="brands"`) — keep FA4 loaded, or switch to `name`/`library`/`variant` (`<Icon name="home" library="fa" variant="solid" />`)
@@ -13,14 +13,14 @@ export const Form = ({ err }: { err?: string }) => (
       <Field.Body>
         <Field grouped="right" hasAddons="fullwidth">
           <Control isExpanded isLoading hasIconsLeft>
-            <Input color="danger" size="medium" isFocused placeholder="Name" />
+            <InputBase color="danger" size="medium" isFocused placeholder="Name" />
             <Icon size="small" className="is-left"><i className="fa fa-user" aria-hidden="true" /></Icon>
           </Control>
           <Control hasIconsLeft hasIconsRight>
-            <Input type="email" isActive />
+            <InputBase type="email" isActive />
           </Control>
           <Control hasIconsLeft hasIconsRight>
-            <TextArea size="large" isHovered rows={3} />
+            <TextAreaBase size="large" isHovered rows={3} />
           </Control>
         </Field>
         <span className="help is-danger">
@@ -30,9 +30,9 @@ export const Form = ({ err }: { err?: string }) => (
     </Field>
     <Field grouped>
       <Control>
-        <Select color="primary" isLoading isFullWidth>
+        <SelectBase color="primary" isLoading isFullWidth>
           <option>A</option>
-        </Select>
+        </SelectBase>
       </Control>
       <Control>
         <Checkbox name="remember"> Remember me</Checkbox>
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.input.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.input.tsx
index 5e1d909a7..0d024ed61 100644
--- a/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.input.tsx
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.input.tsx
@@ -26,12 +26,14 @@ import {
 export const Navigation = ({ onSelect }: { onSelect: () => void }) => (
   <>
     <Breadcrumb isAlign="centered" hasSeparator="arrow" isSize="small">
-      <BreadcrumbItem>
-        <a href="/">Home</a>
-      </BreadcrumbItem>
-      <BreadcrumbItem isActive>
-        <a href="/here">Here</a>
-      </BreadcrumbItem>
+      <ul>
+        <BreadcrumbItem>
+          <a href="/">Home</a>
+        </BreadcrumbItem>
+        <BreadcrumbItem isActive>
+          <a href="/here">Here</a>
+        </BreadcrumbItem>
+      </ul>
     </Breadcrumb>
     <Tabs isAlign="centered" isBoxed isSize="small" isFullWidth>
       <TabList>
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.output.tsx
index 3342ee892..040cb8159 100644
--- a/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.output.tsx
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/tabs-pagination-panel.output.tsx
@@ -4,6 +4,7 @@ import { Breadcrumb, Dropdown, Pagination, Panel, Tabs } from "@allxsmith/bestax
 // TODO(bestax-migrate): `className` sat on the Page's <li>; bestax's `Pagination.Link` and `Pagination.Ellipsis` render their own <li> and put props on the element inside it, so it now applies there — move it by hand if the <li> is what you styled
 // TODO(bestax-migrate): kept the Font Awesome 4 classes on an <i> child, as bloomer rendered them; bestax's optional Font Awesome peer is 6.7+, where many v4 names changed (brand icons moved to `variant="brands"`) — keep FA4 loaded, or switch to `name`/`library`/`variant` (`<Icon name="home" library="fa" variant="solid" />`)
 // TODO(bestax-migrate): bestax `Dropdown` takes a `label` and renders its own trigger and menu; move the `<DropdownTrigger>` content into `label`, keep the `<DropdownItem>`s as direct children, and drop the `DropdownMenu`/`DropdownContent` wrappers
+// TODO(bestax-migrate): `href` — bestax `Dropdown.Item` declares no `href`; navigate in `onClick`, or put an <a> inside the item
 export const Navigation = ({ onSelect }: { onSelect: () => void }) => (
   <>
     <Breadcrumb alignment="centered" separator="arrow" size="small">
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
index db3511f10..bd5d6020e 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
@@ -294,7 +294,10 @@ describe('bloomer navigation handlers', () => {
     const menu = migrate(
       dyn('MenuLink', '<MenuLink href="/x" tag="span">x</MenuLink>')
     );
-    expect(menu.output).toContain('<Menu.Item href="/x">x</Menu.Item>');
+    // bloomer's MenuLink rendered its tag whatever href said.
+    expect(menu.output).toContain(
+      '<Menu.Item href="/x" as="span">x</Menu.Item>'
+    );
     const item = migrate(
       dyn('NavbarItem', '<NavbarItem href="/x" tag="div">x</NavbarItem>')
     );
@@ -311,6 +314,141 @@ describe('bloomer navigation handlers', () => {
     );
   });
 
+  it('flags a dynamic href instead of guessing the anchor', () => {
+    const { output, rules } = migrate(
+      dyn('Button', '<Button href={p.url} tag="span">x</Button>')
+    );
+    expect(rules).toEqual(['prop:href', 'prop:tag']);
+    expect(jsx(output)).toContain('<Button href={p.url} tag="span">x</Button>');
+    const level = migrate(
+      dyn('LevelItem', '<LevelItem href={p.url}>x</LevelItem>')
+    );
+    expect(level.rules).toEqual(['prop:href']);
+    expect(level.output).toContain('<Level.Item href={p.url}>x</Level.Item>');
+  });
+
+  it('moves an href off the Navbar.Dropdown container with a hint', () => {
+    const { output, rules } = migrate(
+      dyn('NavbarItem', '<NavbarItem hasDropdown href="/x">x</NavbarItem>')
+    );
+    expect(rules).toEqual(['prop:href']);
+    expect(output).toContain('<Navbar.Dropdown>x</Navbar.Dropdown>');
+  });
+
+  it('keeps a PageControl tag as bloomer did, beside its href', () => {
+    const { output } = migrate(
+      dyn(
+        'PageControl',
+        '<PageControl isNext tag="span" href="/n">n</PageControl>'
+      )
+    );
+    // bestax's Pagination.Next has no `as`, so the tag stays, flagged.
+    expect(jsx(output)).toContain(
+      '<Pagination.Next tag="span" href="/n">n</Pagination.Next>'
+    );
+  });
+
+  it('folds the literal <li> bloomer wrote around a MenuLink', () => {
+    const one = migrate(
+      dyn(
+        'MenuList, MenuLink',
+        '<MenuList><li className="x"><MenuLink isActive href="/">Home</MenuLink></li></MenuList>'
+      )
+    );
+    expect(one.rules).toEqual([]);
+    expect(one.output).toContain(
+      '<Menu.List><Menu.Item active href="/" className="x">Home</Menu.Item></Menu.List>'
+    );
+    const shared = migrate(
+      dyn('MenuLink', '<li><MenuLink>Home</MenuLink><span>x</span></li>')
+    );
+    expect(shared.rules).toEqual(['component:MenuLink']);
+    expect(shared.output).toContain(
+      '<li><Menu.Item>Home</Menu.Item><span>x</span></li>'
+    );
+  });
+
+  it('folds the literal <ul> bloomer wrote inside a Breadcrumb', () => {
+    const plain = migrate(
+      dyn(
+        'Breadcrumb, BreadcrumbItem',
+        '<Breadcrumb><ul><BreadcrumbItem isActive><a>Here</a></BreadcrumbItem></ul></Breadcrumb>'
+      )
+    );
+    expect(plain.rules).toEqual([]);
+    expect(plain.output).toContain(
+      '<Breadcrumb><li className="is-active"><a>Here</a></li></Breadcrumb>'
+    );
+    const attrs = migrate(
+      dyn(
+        'Breadcrumb',
+        '<Breadcrumb><ul id="crumbs"><li>x</li></ul></Breadcrumb>'
+      )
+    );
+    expect(attrs.rules).toEqual(['component:Breadcrumb']);
+    expect(attrs.output).toContain('<Breadcrumb><li>x</li></Breadcrumb>');
+  });
+
+  it('warns when a Page wraps a link it cannot fold', () => {
+    const { output, rules } = migrate(
+      dyn(
+        'Page, PageLink',
+        '<Page key="k">{p.on ? <PageLink isCurrent>1</PageLink> : <PageLink>1</PageLink>}</Page>'
+      )
+    );
+    expect(rules).toEqual(['component:Page']);
+    expect(output).toContain('<li key="k">');
+    expect(output).toContain('<Pagination.Link active>1</Pagination.Link>');
+  });
+
+  it('honours a literal tag on Label', () => {
+    const { output, rules } = migrate(
+      dyn('Label', '<Label tag="span" isSize="small">x</Label>')
+    );
+    expect(rules).toEqual([]);
+    expect(output).toContain('<span className="label is-small">x</span>');
+  });
+
+  it('names the children a className-driven Icon removes', () => {
+    const { output, rules } = migrate(
+      dyn('Icon', '<Icon className="fas fa-home"><span>fallback</span></Icon>')
+    );
+    expect(rules).toEqual(['component:Icon']);
+    expect(output).toContain(
+      '<Icon name="home" library="fa" variant="solid" />'
+    );
+  });
+
+  it('refuses to write two size props onto a Hero', () => {
+    const { output, rules } = migrate(
+      dyn('Hero', '<Hero isFullHeight isSize="large">x</Hero>')
+    );
+    expect(rules).toEqual(['prop:isSize']);
+    expect(jsx(output)).toContain(
+      '<Hero isSize="large" size="fullheight">x</Hero>'
+    );
+  });
+
+  it('turns helpers on HTML-attribute-only targets into class hints', () => {
+    const { output, rules } = migrate(
+      dyn(
+        'PageControl',
+        '<PageControl href="#" isPulled="right" isMarginless isHidden="mobile">p</PageControl>'
+      )
+    );
+    expect(rules).toEqual([
+      'prop:isPulled',
+      'prop:isMarginless',
+      'prop:isHidden',
+    ]);
+    expect(output).toContain(
+      '<Pagination.Previous href="#">p</Pagination.Previous>'
+    );
+    expect(output).toContain('className="is-pulled-right"');
+    expect(output).toContain('className="m-0"');
+    expect(output).toContain('className="is-hidden-mobile"');
+  });
+
   it('keeps a bare NavbarItem and DropdownItem a <div>, as bloomer rendered them', () => {
     const item = migrate(dyn('NavbarItem', '<NavbarItem>x</NavbarItem>'));
     expect(item.output).toContain('<Navbar.Item as="div">x</Navbar.Item>');
@@ -411,12 +549,15 @@ describe('bloomer navigation handlers', () => {
     expect(output).toContain('<span><b>1</b></span>');
   });
 
-  it('keeps a dropdown href and drops the tag beside it', () => {
+  it('keeps a Dropdown tag beside its href, as bloomer did', () => {
     const { output, rules } = migrate(
       dyn('Dropdown', '<Dropdown href="/x" tag="span">x</Dropdown>')
     );
-    expect(rules).toEqual(['component:Dropdown']);
-    expect(output).toContain('<Dropdown href="/x">x</Dropdown>');
+    // bestax's Dropdown has no `as`, so the tag stays, flagged.
+    expect(rules).toEqual(['component:Dropdown', 'prop:tag']);
+    expect(jsx(output)).toContain(
+      '<Dropdown href="/x" tag="span">x</Dropdown>'
+    );
   });
 });
 
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
index 6563c2d37..4628afa51 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
@@ -131,6 +131,58 @@ describe('bloomer imports', () => {
     expect(output).not.toContain('type Box');
   });
 
+  it('leaves an unused inline type specifier alone', () => {
+    const { output } = migrate(
+      "import { Button, type ButtonProps } from '@allxsmith/bestax-bulma';\nimport { Box } from 'bloomer';\nexport const A = (p: ButtonProps) => <Box>{p.children}</Box>;\n"
+    );
+    expect(output).toMatch(/import \{ Button, type ButtonProps, Box \} from/);
+  });
+
+  it('re-exports keep their public name, or are flagged', () => {
+    const { output, rules } = migrate(
+      "import { CardHeader, Subtitle, Button } from 'bloomer';\nexport { CardHeader, Button };\nexport { Subtitle as Sub };\nexport { Subtitle };\n"
+    );
+    expect(rules).toEqual(['value-reference']);
+    expect(output).toContain('export { CardHeader, Button };');
+    expect(output).toContain('export { SubTitle as Sub };');
+    expect(output).toContain('export { SubTitle as Subtitle };');
+    expect(output).toContain("import { CardHeader } from 'bloomer'");
+  });
+
+  it('never rewrites a member name that merely matches an import', () => {
+    const source =
+      "import { CardHeader } from 'bloomer';\nconst reg = { CardHeader() { return 1; } };\ninterface P { CardHeader: string }\nenum E { CardHeader }\nclass C { CardHeader = 1; }\nexport const A = () => <CardHeader>{reg.CardHeader()}</CardHeader>;\nexport type { P, E, C };\n";
+    const { output, rules } = migrate(source);
+    expect(rules).toEqual([]);
+    expect(output).toContain('const reg = { CardHeader() { return 1; } };');
+    expect(output).toContain('interface P { CardHeader: string }');
+    expect(output).toContain('enum E { CardHeader }');
+    expect(output).toContain('class C { CardHeader = 1; }');
+    expect(output).toContain('<Card.Header>{reg.CardHeader()}</Card.Header>');
+  });
+
+  it('carries the comments of a pruned import onto its replacement', () => {
+    const { output } = migrate(
+      "/* Copyright 2018 Acme. MIT licensed. */\n// eslint-disable-next-line import/no-unresolved\nimport { Box } from 'bloomer';\nexport const A = () => <Box />;\n"
+    );
+    expect(output).toMatch(
+      /^\/\* Copyright 2018 Acme\. MIT licensed\. \*\/\n\/\/ eslint-disable-next-line import\/no-unresolved\nimport \{ Box \} from "@allxsmith\/bestax-bulma";/
+    );
+  });
+
+  it('flags a barrel re-export and a destructured namespace', () => {
+    const barrel = migrate(
+      "export { Button } from 'bloomer';\nexport * from 'bloomer';\n"
+    );
+    expect(barrel.rules).toEqual(['imports', 'imports']);
+    expect(barrel.output).toContain("export { Button } from 'bloomer';");
+    const destructured = migrate(
+      "import * as B from 'bloomer';\nconst { Box, Title } = B;\nexport const A = () => <Box><Title>x</Title></Box>;\n"
+    );
+    expect(destructured.rules).toEqual(['value-reference']);
+    expect(destructured.output).toContain("import * as B from 'bloomer'");
+  });
+
   it('aliases a bestax import whose name the file already binds', () => {
     const { output } = migrate(
       "import { CardHeaderTitle } from 'bloomer';\nconst Card = () => null;\nexport const A = () => <><Card /><CardHeaderTitle>x</CardHeaderTitle></>;\n"
@@ -162,11 +214,11 @@ describe('bloomer value references', () => {
     expect(output).not.toContain("from 'bloomer'");
   });
 
-  it('keeps a namespace binding that is used bare', () => {
+  it('keeps a namespace binding that is used bare, and says so', () => {
     const { output, rules } = migrate(
       "import * as B from 'bloomer';\nexport const keys = Object.keys(B);\nexport const A = () => <B.Box />;\n"
     );
-    expect(rules).toEqual([]);
+    expect(rules).toEqual(['value-reference']);
     expect(output).toContain("import * as B from 'bloomer'");
     expect(output).toContain('<Box />');
   });
diff --git a/bestax-migrate/src/sources/bloomer/mapping.ts b/bestax-migrate/src/sources/bloomer/mapping.ts
index fe0ea5fea..90b86fc0f 100644
--- a/bestax-migrate/src/sources/bloomer/mapping.ts
+++ b/bestax-migrate/src/sources/bloomer/mapping.ts
@@ -140,6 +140,68 @@ export const RESPONSIVE_PROPS: Record<string, string | null> = {
   isHidden: null,
 };
 
+/**
+ * bestax targets that extend only React's HTML attributes — no
+ * `BulmaClassesProps` — so bloomer's universal helpers have no prop to land
+ * on. The transform turns each into a TODO naming the Bulma class instead of
+ * emitting an excess-property type error.
+ */
+export const HELPERLESS_TARGETS = new Set([
+  'Pagination.Previous',
+  'Pagination.Next',
+  'Pagination.Ellipsis',
+  'Navbar.Dropdown',
+  'Navbar.DropdownMenu',
+  'Navbar.Divider',
+  'Panel.Heading',
+  'Panel.Tabs',
+  'Panel.Block',
+  'Tabs.List',
+  'Tabs.Item',
+  'Message.Header',
+  'Message.Body',
+  'Modal.Background',
+  'Modal.Content',
+  'Modal.Card',
+  'Modal.Card.Head',
+  'Modal.Card.Title',
+  'Modal.Card.Body',
+  'Modal.Card.Foot',
+  'Modal.Close',
+]);
+
+/** The Bulma class a helper prop stood for, for the hint on those targets. */
+export function helperClassHint(
+  name: string,
+  value: string | number | boolean | undefined
+): string | null {
+  const v = typeof value === 'string' ? value : undefined;
+  switch (name) {
+    case 'hasTextAlign':
+      return `has-text-${v ?? '<alignment>'}`;
+    case 'hasTextColor':
+      return `has-text-${v ?? '<colour>'}`;
+    case 'isPulled':
+      return `is-pulled-${v ?? '<side>'}`;
+    case 'isClearfix':
+      return 'is-clearfix';
+    case 'isOverlay':
+      return 'is-overlay';
+    case 'isUnselectable':
+      return 'is-unselectable';
+    case 'isMarginless':
+      return 'm-0';
+    case 'isPaddingless':
+      return 'p-0';
+    case 'isDisplay':
+      return `is-${v ?? '<display>[-<viewport>]'}`;
+    case 'isHidden':
+      return v ? `is-hidden-${v}` : 'is-hidden';
+    default:
+      return null;
+  }
+}
+
 /** Bloomer's fraction and width spellings → bestax's `BulmaColumnSize` names. */
 export const COLUMN_SIZE_MAP: Record<string, string> = {
   '1/2': 'half',
@@ -270,9 +332,13 @@ export const MAPPING: Record<string, ComponentMapping> = {
     props: { isExpanded: {}, isLoading: {}, tag: TAG_AS },
   },
   Help: { status: 'mapped', special: 'help' },
+  // bloomer's form elements were bare <input>/<select>/<textarea>s; bestax's
+  // Input/Select/TextArea wrap themselves in Field and Control when not
+  // already inside one, which a bare element in a table cell or beside an
+  // icon did not do. The *Base exports are the bare elements.
   Input: {
     status: 'mapped',
-    target: 'Input',
+    target: 'InputBase',
     props: {
       isColor: color,
       isSize: size,
@@ -284,7 +350,7 @@ export const MAPPING: Record<string, ComponentMapping> = {
   Label: { status: 'mapped', special: 'label' },
   Select: {
     status: 'mapped',
-    target: 'Select',
+    target: 'SelectBase',
     props: {
       isColor: color,
       isSize: size,
@@ -294,7 +360,7 @@ export const MAPPING: Record<string, ComponentMapping> = {
   },
   TextArea: {
     status: 'mapped',
-    target: 'TextArea',
+    target: 'TextAreaBase',
     props: { isSize: size, isActive: {}, isHovered: {}, isFocused: {} },
   },
   Field: {
@@ -323,9 +389,12 @@ export const MAPPING: Record<string, ComponentMapping> = {
   },
 
   // ---- breadcrumb ---------------------------------------------------------
+  // bestax's Breadcrumb renders its own <ul>; bloomer's was the bare <nav>
+  // and its docs wrote the <ul>, which the special folds away.
   Breadcrumb: {
     status: 'mapped',
     target: 'Breadcrumb',
+    special: 'breadcrumb',
     props: {
       hasSeparator: { rename: 'separator' },
       isAlign: { rename: 'alignment' }, // centered | right — same union
@@ -390,7 +459,13 @@ export const MAPPING: Record<string, ComponentMapping> = {
     status: 'mapped',
     target: 'Dropdown.Item',
     special: 'dropdown-item',
-    props: { isActive: active, tag: TAG_AS },
+    props: {
+      isActive: active,
+      tag: TAG_AS,
+      href: {
+        todo: 'bestax `Dropdown.Item` declares no `href`; navigate in `onClick`, or put an <a> inside the item',
+      },
+    },
   },
   DropdownDivider: { status: 'mapped', target: 'Dropdown.Divider' },
 
@@ -415,10 +490,13 @@ export const MAPPING: Record<string, ComponentMapping> = {
   Menu: { status: 'mapped', target: 'Menu' },
   MenuLabel: { status: 'mapped', target: 'Menu.Label' },
   MenuList: { status: 'mapped', target: 'Menu.List' },
+  // bestax's Menu.Item renders its own <li><a>; bloomer's MenuLink was the
+  // <a>, wrapped in a literal <li> by convention (its docs do), which the
+  // special folds away.
   MenuLink: {
     status: 'mapped',
     target: 'Menu.Item',
-    special: 'anchor-when-href',
+    special: 'menu-link',
     props: { isActive: active, tag: TAG_AS },
   },
   Message: {
@@ -603,7 +681,7 @@ export const MAPPING: Record<string, ComponentMapping> = {
   // ---- the helper HOC -----------------------------------------------------
   withHelpersModifiers: {
     status: 'todo',
-    todo: `\`withHelpersModifiers\` wrapped a component so it accepted bloomer's helper props; every bestax component takes the same helpers natively, and a custom component can call \`useBulmaClasses\` itself (${DOCS}/api/helpers/usebulmaclasses)`,
+    todo: `\`withHelpersModifiers\` wrapped a component so it accepted bloomer's helper props; bestax components take the same helpers natively (bar the parts that extend only React's HTML attributes, which take className), and a custom component can call \`useBulmaClasses\` itself (${DOCS}/api/helpers/usebulmaclasses)`,
   },
 };
 
diff --git a/bestax-migrate/src/sources/bloomer/specials.ts b/bestax-migrate/src/sources/bloomer/specials.ts
index da2868ae6..fe263bde9 100644
--- a/bestax-migrate/src/sources/bloomer/specials.ts
+++ b/bestax-migrate/src/sources/bloomer/specials.ts
@@ -122,25 +122,40 @@ const join = (...parts: Array<string | undefined>): string | undefined => {
 };
 
 /**
- * bloomer rendered its default `tag` — usually a <div> — and switched to an
- * <a> whenever `href` was set, whatever `tag` said. bestax's defaults differ
- * per component, so this keeps bloomer's markup either way:
+ * Some bloomer components rendered their default `tag` (usually a <div>) and
+ * switched to an <a> whenever `href` was set, whatever `tag` said: Button,
+ * Delete, LevelItem, DropdownItem, NavbarItem, PanelBlock, CardFooterItem
+ * (and the Nav family). bestax's defaults differ per component, so this
+ * keeps bloomer's markup for those either way:
  *
- * - with `href`, a surviving `tag` (which the mapping turns into `as`) would
- *   undo the anchor on targets that already render one, so it is dropped;
- *   where the target defaults to something else, `as="a"` is set
- *   (`setAs`);
+ * - with a literal `href`, a surviving `tag` (which the mapping turns into
+ *   `as`) would undo the anchor on targets that already render one, so it is
+ *   dropped; where the target defaults to something else, `as="a"` is set
+ *   (`setAs`). A dynamic `href` was a runtime decision bloomer made and
+ *   bestax cannot: it is flagged, not guessed;
  * - without `href` or `tag`, a target that defaults to an <a> gets
  *   `as={bareAs}` so bloomer's <div> stays a <div>.
  */
 function anchorWhenHref(
   ctx: TransformContext,
+  path: ASTPath<any>,
   element: any,
   options: { setAs?: boolean; bareAs?: string } = {}
 ): string[] {
   const handled: string[] = [];
   const tagAttr = findAttr(element, 'tag');
-  if (findAttr(element, 'href')) {
+  const hrefAttr = findAttr(element, 'href');
+  if (hrefAttr) {
+    const literal = literalValueOf(hrefAttr);
+    if (literal.kind === 'expression') {
+      addTodo(
+        ctx,
+        path,
+        'prop:href',
+        `bloomer rendered an <a> only when \`href\` had a value, and this one is dynamic; set \`as\` conditionally by hand${tagAttr ? ' (the `tag` was kept as `as` for the other case)' : ''}`
+      );
+      return handled;
+    }
     if (tagAttr) {
       removeAttr(element, tagAttr);
       handled.push('tag');
@@ -249,7 +264,20 @@ function iconFromElement(
     ctx.dirty = true;
   };
   const classAttr = findAttr(element, 'className');
+  const solid = (element.children ?? []).filter(
+    (c: any) => !(c.type === 'JSXText' && c.value.trim() === '')
+  );
   if (classAttr) {
+    if (solid.length > 0) {
+      // bloomer drew the glyph from `className` and never rendered these;
+      // the classes win, and the removed markup is named.
+      addTodo(
+        ctx,
+        path,
+        `component:${where}`,
+        `removed the children of this ${where}: bloomer never rendered them (the glyph came from \`className\`), and bestax's Icon takes either classes or a child — restore them by hand if they mattered`
+      );
+    }
     const literal = literalValueOf(classAttr);
     removeAttr(element, classAttr);
     ctx.dirty = true;
@@ -276,10 +304,7 @@ function iconFromElement(
     }
     return;
   }
-  const children = (element.children ?? []).filter(
-    (c: any) => !(c.type === 'JSXText' && c.value.trim() === '')
-  );
-  if (children.length === 0) {
+  if (solid.length === 0) {
     inertChild();
     addTodo(
       ctx,
@@ -332,7 +357,7 @@ const SPECIALS: Record<string, SpecialHandler> = {
         );
       }
     }
-    const handled = anchorWhenHref(ctx, element, { setAs: true });
+    const handled = anchorWhenHref(ctx, path, element, { setAs: true });
     return { handledProps: ['isLink', ...handled] };
   },
 
@@ -524,7 +549,8 @@ const SPECIALS: Record<string, SpecialHandler> = {
       'label',
       'Label'
     );
-    return replaceWithPlain(ctx, path, element, 'label', className, 'Label');
+    const tag = plainTag(ctx, path, element, 'label', 'Label');
+    return replaceWithPlain(ctx, path, element, tag, className, 'Label');
   },
 
   /**
@@ -550,29 +576,103 @@ const SPECIALS: Record<string, SpecialHandler> = {
    * bestax's takes a `label` and renders the trigger and menu itself, so the
    * shape differs enough that a mechanical rewrite would be a guess.
    */
-  dropdown(ctx, path, element) {
+  dropdown(ctx, path, _element) {
     addTodo(
       ctx,
       path,
       'component:Dropdown',
       'bestax `Dropdown` takes a `label` and renders its own trigger and menu; move the `<DropdownTrigger>` content into `label`, keep the `<DropdownItem>`s as direct children, and drop the `DropdownMenu`/`DropdownContent` wrappers'
     );
-    return { handledProps: anchorWhenHref(ctx, element) };
+    return {};
   },
 
-  /** bestax's Level.Item renders a <div> unless `as="a"`. */
-  'level-item'(ctx, _path, element) {
-    return { handledProps: anchorWhenHref(ctx, element, { setAs: true }) };
+  /**
+   * bestax's Menu.Item renders its own <li><a>; bloomer's MenuLink was the
+   * <a> alone, so its docs (and apps) wrap it in a literal <li>. That <li>
+   * folds onto the item, carrying its attributes, or the list nests.
+   */
+  'menu-link'(ctx, path, element) {
+    const parentPath = path.parent;
+    const parent = parentPath?.node;
+    if (
+      parent?.type === 'JSXElement' &&
+      parent.openingElement?.name?.type === 'JSXIdentifier' &&
+      parent.openingElement.name.name === 'li'
+    ) {
+      const siblings = (parent.children ?? []).filter(
+        (c: any) => !(c.type === 'JSXText' && c.value.trim() === '')
+      );
+      if (siblings.length === 1 && siblings[0] === element) {
+        for (const attr of [...(parent.openingElement.attributes ?? [])]) {
+          const name =
+            attr.type === 'JSXAttribute' ? attr.name.name : undefined;
+          if (name && findAttr(element, name)) {
+            addTodo(
+              ctx,
+              path,
+              'prop:' + name,
+              `the <li> around this MenuLink and the link both set \`${name}\`; the link's value was kept — reconcile by hand`
+            );
+            continue;
+          }
+          addAttr(element, attr);
+        }
+        parentPath.replace(element);
+        ctx.dirty = true;
+      } else {
+        addTodo(
+          ctx,
+          path,
+          'component:MenuLink',
+          'bestax `Menu.Item` renders its own <li>, and this MenuLink shares its <li> with other content — remove the <li> or move the siblings by hand'
+        );
+      }
+    }
+    return {};
   },
 
-  /** Targets that already render an <a>: a surviving `tag` would undo it. */
-  'anchor-when-href'(ctx, _path, element) {
-    return { handledProps: anchorWhenHref(ctx, element) };
+  /**
+   * bestax's Breadcrumb renders its own <ul>; bloomer's was the bare <nav>,
+   * so its docs wrote the <ul>. It folds away, or the lists nest.
+   */
+  breadcrumb(ctx, path, element) {
+    const solid = (element.children ?? []).filter(
+      (c: any) => !(c.type === 'JSXText' && c.value.trim() === '')
+    );
+    const ul = solid[0];
+    if (
+      solid.length === 1 &&
+      ul.type === 'JSXElement' &&
+      ul.openingElement?.name?.type === 'JSXIdentifier' &&
+      ul.openingElement.name.name === 'ul'
+    ) {
+      const attrs = ul.openingElement.attributes ?? [];
+      if (attrs.length > 0) {
+        addTodo(
+          ctx,
+          path,
+          'component:Breadcrumb',
+          'bestax `Breadcrumb` renders its own <ul>, so the attributes on this one were dropped with it — re-apply them to the Breadcrumb by hand'
+        );
+      }
+      element.children = ul.children ?? [];
+      ctx.dirty = true;
+    }
+    return {};
+  },
+
+  /** bestax's Level.Item renders a <div> unless `as="a"`. */
+  'level-item'(ctx, path, element) {
+    return {
+      handledProps: anchorWhenHref(ctx, path, element, { setAs: true }),
+    };
   },
 
   /** bloomer's default DropdownItem was a <div>; bestax's Dropdown.Item is an <a>. */
-  'dropdown-item'(ctx, _path, element) {
-    return { handledProps: anchorWhenHref(ctx, element, { bareAs: 'div' }) };
+  'dropdown-item'(ctx, path, element) {
+    return {
+      handledProps: anchorWhenHref(ctx, path, element, { bareAs: 'div' }),
+    };
   },
 
   /**
@@ -582,7 +682,7 @@ const SPECIALS: Record<string, SpecialHandler> = {
    */
   'panel-block'(ctx, path, element) {
     if (findAttr(element, 'href')) {
-      return { handledProps: anchorWhenHref(ctx, element) };
+      return { handledProps: anchorWhenHref(ctx, path, element) };
     }
     const cls = join(
       'panel-block',
@@ -648,11 +748,23 @@ const SPECIALS: Record<string, SpecialHandler> = {
       ctx.dirty = true;
     }
     // bloomer's default NavbarItem was a <div>; bestax's Navbar.Item is an <a>.
-    const handled = anchorWhenHref(
-      ctx,
-      element,
-      target === 'Navbar.Item' ? { bareAs: 'div' } : {}
-    );
+    // The dropdown container has neither `href` nor `as`.
+    let handled: string[] = [];
+    if (target === 'Navbar.Item') {
+      handled = anchorWhenHref(ctx, path, element, { bareAs: 'div' });
+    } else {
+      const hrefAttr = findAttr(element, 'href');
+      if (hrefAttr) {
+        removeAttr(element, hrefAttr);
+        ctx.dirty = true;
+        addTodo(
+          ctx,
+          path,
+          'prop:href',
+          'bestax `Navbar.Dropdown` is the container and takes no `href`; put it on the `<Navbar.Link>` inside'
+        );
+      }
+    }
     restrictAsToTargets(ctx, path, element, target, ['Navbar.Item'], 'tag');
     return {
       target,
@@ -721,8 +833,7 @@ const SPECIALS: Record<string, SpecialHandler> = {
         'dynamic PageControl `isNext`; pick between `<Pagination.Previous>` and `<Pagination.Next>` by hand'
       );
     }
-    const handled = anchorWhenHref(ctx, element);
-    return { target, handledProps: ['isNext', 'isPrevious', ...handled] };
+    return { target, handledProps: ['isNext', 'isPrevious'] };
   },
 
   /**
@@ -731,20 +842,45 @@ const SPECIALS: Record<string, SpecialHandler> = {
    * so the wrapper folds onto its child.
    */
   page(ctx, path, element) {
-    const foldable = (element.children ?? []).some(
-      (c: any) =>
-        c.type === 'JSXElement' &&
-        ['PageLink', 'PageEllipsis'].includes(
-          ctx.resolve?.(c.openingElement?.name)?.join('.') ?? ''
-        )
+    const isLink = (node: any): boolean =>
+      node?.type === 'JSXElement' &&
+      ['PageLink', 'PageEllipsis'].includes(
+        ctx.resolve?.(node.openingElement?.name)?.join('.') ?? ''
+      );
+    const solid = (element.children ?? []).filter(
+      (c: any) => !(c.type === 'JSXText' && c.value.trim() === '')
     );
+    // Exactly the shape collapseOntoChild folds: one JSX child, and it is
+    // the link. A link reached any other way (in an expression, beside a
+    // sibling) still renders its own <li>, so the plain <li> this becomes
+    // would nest one — said, not silently produced.
+    const foldable = solid.length === 1 && isLink(solid[0]);
+    if (!foldable) {
+      const nested = ctx
+        .j(element)
+        .find(ctx.j.JSXElement)
+        .paths()
+        .some(p => p.node !== element && isLink(p.node));
+      if (nested) {
+        addTodo(
+          ctx,
+          path,
+          'component:Page',
+          "bestax's `Pagination.Link` and `Pagination.Ellipsis` render their own <li>, and this Page wraps one in a way the codemod cannot fold (an expression, or beside other children) — remove the wrapper by hand"
+        );
+      }
+    }
     if (foldable) {
       // The child renders the <li> itself and puts its props on the <a> (or
       // the ellipsis <span>), so whatever else sat on this <li> — a class, an
       // id, a helper prop — lands on a different element after the fold.
       // It is moved rather than lost, and named.
       const moved = attributesOf(element)
-        .map((a: any) => a.name.name as string)
+        .map((a: any): string =>
+          a.name.type === 'JSXNamespacedName'
+            ? `${a.name.namespace.name}:${a.name.name.name}`
+            : a.name.name
+        )
         .filter(n => n !== 'tag' && n !== 'key');
       if (moved.length > 0) {
         addTodo(
diff --git a/bestax-migrate/src/sources/bloomer/transform.ts b/bestax-migrate/src/sources/bloomer/transform.ts
index 5e6dd01a8..517eeab11 100644
--- a/bestax-migrate/src/sources/bloomer/transform.ts
+++ b/bestax-migrate/src/sources/bloomer/transform.ts
@@ -24,11 +24,19 @@
 
 import type { API, FileInfo } from 'jscodeshift';
 import type { TransformOptions } from '../../types.js';
-import { MAPPING, UNIVERSAL_PROPS, resolveMapping } from './mapping.js';
+import {
+  HELPERLESS_TARGETS,
+  MAPPING,
+  UNIVERSAL_PROPS,
+  helperClassHint,
+  resolveMapping,
+} from './mapping.js';
 import {
   addTodo,
   attributesOf,
   jsxNameParts,
+  literalValueOf,
+  removeAttr,
   renameElement,
   type TransformContext,
 } from '../_shared/jsx-utils.js';
@@ -134,6 +142,32 @@ export default function transform(
     }
   });
 
+  // A barrel re-export reaches the library without an import declaration,
+  // so nothing above saw it; it cannot be rewritten (a compound bestax
+  // target has no single name to re-export) and must not vanish silently.
+  root
+    .find(j.ExportNamedDeclaration)
+    .filter(p => String(p.node.source?.value ?? '') === BLOOMER)
+    .forEach(p => {
+      addTodo(
+        ctx,
+        p,
+        'imports',
+        `re-exports from '${BLOOMER}' were not migrated; import the components, migrate them, then re-export the bestax ones by hand`
+      );
+    });
+  root
+    .find(j.ExportAllDeclaration)
+    .filter(p => String(p.node.source?.value ?? '') === BLOOMER)
+    .forEach(p => {
+      addTodo(
+        ctx,
+        p,
+        'imports',
+        `\`export * from '${BLOOMER}'\` was not migrated; re-export the bestax components you need by hand`
+      );
+    });
+
   // ---- 1a. Stylesheet imports (mode-driven) -----------------------------
   // `bestax` (default): everything converges on the recommended combined
   // bundle. `bulma`: plain Bulma v1 CSS plus the separate extras file.
@@ -308,6 +342,16 @@ export default function transform(
   });
 
   ctx.reserve = makeReserve(ctx, bound);
+  // Names the passes actually asked for. `ctx.needed` is also seeded from an
+  // existing bestax import's specifiers below (so JSX reuses their locals),
+  // and that seeding alone must not turn a type-only specifier into a value
+  // import nobody needed.
+  const requested = new Set<string>();
+  const baseReserve = ctx.reserve;
+  ctx.reserve = root => {
+    requested.add(root);
+    return baseReserve(root);
+  };
 
   // Merge with an existing bestax import: reuse its locals verbatim.
   // Only a declaration that already uses NAMED specifiers can absorb more of
@@ -396,6 +440,30 @@ export default function transform(
 
     if (!target) return;
 
+    // Targets that extend only React's HTML attributes take none of bloomer's
+    // universal helpers; each becomes a TODO naming the Bulma class rather
+    // than an excess-property type error the report never mentions.
+    if (HELPERLESS_TARGETS.has(target)) {
+      for (const attr of [...attributesOf(element)]) {
+        const name: string = attr.name.name;
+        if (handled.has(name)) continue;
+        const literal = literalValueOf(attr);
+        const cls = helperClassHint(
+          name,
+          literal.kind === 'expression' ? undefined : literal.value
+        );
+        if (!cls) continue;
+        removeAttr(element, attr);
+        handled.add(name);
+        addTodo(
+          ctx,
+          path,
+          `prop:${name}`,
+          `bestax \`${target}\` takes no Bulma helper props (it extends only React's HTML attributes); add className="${cls}" by hand`
+        );
+      }
+    }
+
     // Rename to the bestax name, aliasing the import root on collision.
     const [targetRoot, ...targetRest] = target.split('.');
     const localTarget = [ctx.reserve(targetRoot), ...targetRest].join('.');
@@ -476,6 +544,64 @@ export default function transform(
       )
     ) {
       namespaceStillReferenced = true;
+      addTodo(
+        ctx,
+        path,
+        'value-reference',
+        `\`${name}\` is the library's namespace import used as a plain value (destructured, or passed around); nothing reached through it was migrated — reference its components as \`${name}.Component\` or import them by name, then re-run`
+      );
+      return;
+    }
+    // Members, keys and signatures name a thing; they do not reference the
+    // import. An export specifier does, and is handled on its own: a flat
+    // target keeps the public name (\`export { SubTitle as Subtitle }\`), a
+    // dotted one cannot be re-exported under a member name and is flagged.
+    if (parentType === 'ExportSpecifier') {
+      if (parentNode.local !== path.node) return;
+      const exportedName = nameOf(parentNode.exported ?? parentNode.local);
+      const mapping = MAPPING[imported];
+      if (
+        mapping &&
+        mapping.status !== 'todo' &&
+        mapping.target &&
+        !mapping.target.includes('.')
+      ) {
+        const local = ctx.reserve(mapping.target);
+        // Replace the node: recast reprints a specifier whose identifiers were
+
+        // swapped in place in its original shorthand form, dropping the `as`.
+
+        path.parent.replace(
+          j.exportSpecifier.from({
+            local: j.identifier(local),
+
+            exported: j.identifier(exportedName),
+          })
+        );
+        ctx.dirty = true;
+        return;
+      }
+      ctx.retained.add(imported);
+      addTodo(
+        ctx,
+        path,
+        'value-reference',
+        `\`${name}\` is re-exported; ${mapping?.target ? `its bestax counterpart \`${mapping.target}\` is a member of \`${mapping.target.split('.')[0]}\` and cannot be re-exported under this name` : 'it has no bestax counterpart to re-export'} — migrate the consumers by hand`
+      );
+      return;
+    }
+    if (
+      parentType === 'TSEnumMember' ||
+      ((parentType === 'ObjectMethod' ||
+        parentType === 'ClassMethod' ||
+        parentType === 'ClassProperty' ||
+        parentType === 'PropertyDefinition' ||
+        parentType === 'MethodDefinition' ||
+        parentType === 'TSPropertySignature' ||
+        parentType === 'TSMethodSignature') &&
+        parentNode.key === path.node &&
+        !parentNode.computed)
+    ) {
       return;
     }
     // Non-reference positions: member property names and object keys.
@@ -645,7 +771,10 @@ export default function transform(
     const retainedNames = [...ctx.retained].sort((a, b) => a.localeCompare(b));
 
     const freshNames = [...ctx.needed.entries()]
-      .filter(([imported]) => !preExistingImports.has(imported))
+      .filter(
+        ([imported]) =>
+          requested.has(imported) && !preExistingImports.has(imported)
+      )
       .sort((a, b) => a[0].localeCompare(b[0]));
     const bestaxImport =
       freshNames.length > 0
@@ -657,6 +786,35 @@ export default function transform(
           )
         : null;
 
+    /**
+
+     * A pruned declaration takes its comments with it — a licence header, an
+
+     * eslint directive. Hand them to what replaces it, or to the next statement.
+
+     */
+
+    const carryComments = (node: any, importPath: any): void => {
+      const comments = node.comments ?? [];
+
+      if (comments.length === 0) return;
+
+      const body: any[] = importPath.parent?.node?.body ?? [];
+
+      const index = body.indexOf(node);
+
+      const carrier =
+        bestaxImport ??
+        existingBestax?.node ??
+        (index >= 0 ? body[index + 1] : undefined);
+
+      if (!carrier) return;
+
+      carrier.comments = [...comments, ...(carrier.comments ?? [])];
+
+      node.comments = [];
+    };
+
     let inserted = false;
     // A retained bloomer specifier must never collide with a bestax import local
     // (possible when one component is both JSX-migrated and value-retained).
@@ -733,6 +891,7 @@ export default function transform(
           }
         }
       } else {
+        carryComments(node, path);
         path.prune();
       }
       ctx.dirty = true;
diff --git a/bestax-migrate/src/sources/rbx/transform.ts b/bestax-migrate/src/sources/rbx/transform.ts
index 9f5837e2e..5ec8b5aaf 100644
--- a/bestax-migrate/src/sources/rbx/transform.ts
+++ b/bestax-migrate/src/sources/rbx/transform.ts
@@ -153,6 +153,32 @@ export default function transform(
     }
   });
 
+  // A barrel re-export reaches the library without an import declaration,
+  // so nothing above saw it; it cannot be rewritten (a compound bestax
+  // target has no single name to re-export) and must not vanish silently.
+  root
+    .find(j.ExportNamedDeclaration)
+    .filter(p => String(p.node.source?.value ?? '') === RBX)
+    .forEach(p => {
+      addTodo(
+        ctx,
+        p,
+        'imports',
+        `re-exports from '${RBX}' were not migrated; import the components, migrate them, then re-export the bestax ones by hand`
+      );
+    });
+  root
+    .find(j.ExportAllDeclaration)
+    .filter(p => String(p.node.source?.value ?? '') === RBX)
+    .forEach(p => {
+      addTodo(
+        ctx,
+        p,
+        'imports',
+        `\`export * from '${RBX}'\` was not migrated; re-export the bestax components you need by hand`
+      );
+    });
+
   // ---- 1a. Stylesheet imports (mode-driven) -----------------------------
   // `bestax` (default): everything converges on the recommended combined
   // bundle. `bulma`: plain Bulma v1 CSS plus the separate extras file.
@@ -428,6 +454,16 @@ export default function transform(
   });
 
   ctx.reserve = makeReserve(ctx, bound);
+  // Names the passes actually asked for. `ctx.needed` is also seeded from an
+  // existing bestax import's specifiers below (so JSX reuses their locals),
+  // and that seeding alone must not turn a type-only specifier into a value
+  // import nobody needed.
+  const requested = new Set<string>();
+  const baseReserve = ctx.reserve;
+  ctx.reserve = root => {
+    requested.add(root);
+    return baseReserve(root);
+  };
 
   // Merge with an existing bestax import: reuse its locals verbatim.
   // Only a declaration that already uses NAMED specifiers can absorb more of
@@ -728,6 +764,64 @@ export default function transform(
       )
     ) {
       namespaceStillReferenced = true;
+      addTodo(
+        ctx,
+        path,
+        'value-reference',
+        `\`${name}\` is the library's namespace import used as a plain value (destructured, or passed around); nothing reached through it was migrated — reference its components as \`${name}.Component\` or import them by name, then re-run`
+      );
+      return;
+    }
+    // Members, keys and signatures name a thing; they do not reference the
+    // import. An export specifier does, and is handled on its own: a flat
+    // target keeps the public name (\`export { SubTitle as Subtitle }\`), a
+    // dotted one cannot be re-exported under a member name and is flagged.
+    if (parentType === 'ExportSpecifier') {
+      if (parentNode.local !== path.node) return;
+      const exportedName = nameOf(parentNode.exported ?? parentNode.local);
+      const mapping = aliasPath ? resolveMapping(aliasPath) : MAPPING[imported];
+      if (
+        mapping &&
+        mapping.status !== 'todo' &&
+        mapping.target &&
+        !mapping.target.includes('.')
+      ) {
+        const local = ctx.reserve(mapping.target);
+        // Replace the node: recast reprints a specifier whose identifiers were
+
+        // swapped in place in its original shorthand form, dropping the `as`.
+
+        path.parent.replace(
+          j.exportSpecifier.from({
+            local: j.identifier(local),
+
+            exported: j.identifier(exportedName),
+          })
+        );
+        ctx.dirty = true;
+        return;
+      }
+      ctx.retained.add(imported);
+      addTodo(
+        ctx,
+        path,
+        'value-reference',
+        `\`${name}\` is re-exported; ${mapping?.target ? `its bestax counterpart \`${mapping.target}\` is a member of \`${mapping.target.split('.')[0]}\` and cannot be re-exported under this name` : 'it has no bestax counterpart to re-export'} — migrate the consumers by hand`
+      );
+      return;
+    }
+    if (
+      parentType === 'TSEnumMember' ||
+      ((parentType === 'ObjectMethod' ||
+        parentType === 'ClassMethod' ||
+        parentType === 'ClassProperty' ||
+        parentType === 'PropertyDefinition' ||
+        parentType === 'MethodDefinition' ||
+        parentType === 'TSPropertySignature' ||
+        parentType === 'TSMethodSignature') &&
+        parentNode.key === path.node &&
+        !parentNode.computed)
+    ) {
       return;
     }
     // Non-reference positions: member property names and object keys.
@@ -948,7 +1042,10 @@ export default function transform(
     const retainedNames = [...ctx.retained].sort((a, b) => a.localeCompare(b));
 
     const freshNames = [...ctx.needed.entries()]
-      .filter(([imported]) => !preExistingImports.has(imported))
+      .filter(
+        ([imported]) =>
+          requested.has(imported) && !preExistingImports.has(imported)
+      )
       .sort((a, b) => a[0].localeCompare(b[0]));
     const bestaxImport =
       freshNames.length > 0
@@ -960,6 +1057,35 @@ export default function transform(
           )
         : null;
 
+    /**
+
+     * A pruned declaration takes its comments with it — a licence header, an
+
+     * eslint directive. Hand them to what replaces it, or to the next statement.
+
+     */
+
+    const carryComments = (node: any, importPath: any): void => {
+      const comments = node.comments ?? [];
+
+      if (comments.length === 0) return;
+
+      const body: any[] = importPath.parent?.node?.body ?? [];
+
+      const index = body.indexOf(node);
+
+      const carrier =
+        bestaxImport ??
+        existingBestax?.node ??
+        (index >= 0 ? body[index + 1] : undefined);
+
+      if (!carrier) return;
+
+      carrier.comments = [...comments, ...(carrier.comments ?? [])];
+
+      node.comments = [];
+    };
+
     let inserted = false;
     // A retained rbx specifier must never collide with a bestax import local
     // (possible when one component is both JSX-migrated and value-retained).
@@ -1036,6 +1162,7 @@ export default function transform(
           }
         }
       } else {
+        carryComments(node, path);
         path.prune();
       }
       ctx.dirty = true;
diff --git a/bestax-migrate/src/sources/react-bulma-components/transform.ts b/bestax-migrate/src/sources/react-bulma-components/transform.ts
index b599ec32a..4ae0713e8 100644
--- a/bestax-migrate/src/sources/react-bulma-components/transform.ts
+++ b/bestax-migrate/src/sources/react-bulma-components/transform.ts
@@ -123,6 +123,32 @@ export default function transform(
     }
   });
 
+  // A barrel re-export reaches the library without an import declaration,
+  // so nothing above saw it; it cannot be rewritten (a compound bestax
+  // target has no single name to re-export) and must not vanish silently.
+  root
+    .find(j.ExportNamedDeclaration)
+    .filter(p => String(p.node.source?.value ?? '') === RBC)
+    .forEach(p => {
+      addTodo(
+        ctx,
+        p,
+        'imports',
+        `re-exports from '${RBC}' were not migrated; import the components, migrate them, then re-export the bestax ones by hand`
+      );
+    });
+  root
+    .find(j.ExportAllDeclaration)
+    .filter(p => String(p.node.source?.value ?? '') === RBC)
+    .forEach(p => {
+      addTodo(
+        ctx,
+        p,
+        'imports',
+        `\`export * from '${RBC}'\` was not migrated; re-export the bestax components you need by hand`
+      );
+    });
+
   // ---- 1a. Stylesheet imports (mode-driven) -----------------------------
   // `bestax` (default): everything converges on the recommended combined
   // bundle. `bulma`: plain Bulma v1 CSS plus the separate extras file.
@@ -358,6 +384,16 @@ export default function transform(
   });
 
   ctx.reserve = makeReserve(ctx, bound);
+  // Names the passes actually asked for. `ctx.needed` is also seeded from an
+  // existing bestax import's specifiers below (so JSX reuses their locals),
+  // and that seeding alone must not turn a type-only specifier into a value
+  // import nobody needed.
+  const requested = new Set<string>();
+  const baseReserve = ctx.reserve;
+  ctx.reserve = root => {
+    requested.add(root);
+    return baseReserve(root);
+  };
 
   // Merge with an existing bestax import: reuse its locals verbatim.
   // Only a declaration made entirely of NAMED specifiers can be merged into.
@@ -540,6 +576,64 @@ export default function transform(
       )
     ) {
       namespaceStillReferenced = true;
+      addTodo(
+        ctx,
+        path,
+        'value-reference',
+        `\`${name}\` is the library's namespace import used as a plain value (destructured, or passed around); nothing reached through it was migrated — reference its components as \`${name}.Component\` or import them by name, then re-run`
+      );
+      return;
+    }
+    // Members, keys and signatures name a thing; they do not reference the
+    // import. An export specifier does, and is handled on its own: a flat
+    // target keeps the public name (\`export { SubTitle as Subtitle }\`), a
+    // dotted one cannot be re-exported under a member name and is flagged.
+    if (parentType === 'ExportSpecifier') {
+      if (parentNode.local !== path.node) return;
+      const exportedName = nameOf(parentNode.exported ?? parentNode.local);
+      const mapping = aliasPath ? resolveMapping(aliasPath) : MAPPING[imported];
+      if (
+        mapping &&
+        mapping.status !== 'todo' &&
+        mapping.target &&
+        !mapping.target.includes('.')
+      ) {
+        const local = ctx.reserve(mapping.target);
+        // Replace the node: recast reprints a specifier whose identifiers were
+
+        // swapped in place in its original shorthand form, dropping the `as`.
+
+        path.parent.replace(
+          j.exportSpecifier.from({
+            local: j.identifier(local),
+
+            exported: j.identifier(exportedName),
+          })
+        );
+        ctx.dirty = true;
+        return;
+      }
+      ctx.retained.add(imported);
+      addTodo(
+        ctx,
+        path,
+        'value-reference',
+        `\`${name}\` is re-exported; ${mapping?.target ? `its bestax counterpart \`${mapping.target}\` is a member of \`${mapping.target.split('.')[0]}\` and cannot be re-exported under this name` : 'it has no bestax counterpart to re-export'} — migrate the consumers by hand`
+      );
+      return;
+    }
+    if (
+      parentType === 'TSEnumMember' ||
+      ((parentType === 'ObjectMethod' ||
+        parentType === 'ClassMethod' ||
+        parentType === 'ClassProperty' ||
+        parentType === 'PropertyDefinition' ||
+        parentType === 'MethodDefinition' ||
+        parentType === 'TSPropertySignature' ||
+        parentType === 'TSMethodSignature') &&
+        parentNode.key === path.node &&
+        !parentNode.computed)
+    ) {
       return;
     }
     // Non-reference positions: member property names and object keys.
@@ -760,7 +854,10 @@ export default function transform(
     const retainedNames = [...ctx.retained].sort((a, b) => a.localeCompare(b));
 
     const freshNames = [...ctx.needed.entries()]
-      .filter(([imported]) => !preExistingImports.has(imported))
+      .filter(
+        ([imported]) =>
+          requested.has(imported) && !preExistingImports.has(imported)
+      )
       .sort((a, b) => a[0].localeCompare(b[0]));
     const bestaxImport =
       freshNames.length > 0
@@ -772,6 +869,35 @@ export default function transform(
           )
         : null;
 
+    /**
+
+     * A pruned declaration takes its comments with it — a licence header, an
+
+     * eslint directive. Hand them to what replaces it, or to the next statement.
+
+     */
+
+    const carryComments = (node: any, importPath: any): void => {
+      const comments = node.comments ?? [];
+
+      if (comments.length === 0) return;
+
+      const body: any[] = importPath.parent?.node?.body ?? [];
+
+      const index = body.indexOf(node);
+
+      const carrier =
+        bestaxImport ??
+        existingBestax?.node ??
+        (index >= 0 ? body[index + 1] : undefined);
+
+      if (!carrier) return;
+
+      carrier.comments = [...comments, ...(carrier.comments ?? [])];
+
+      node.comments = [];
+    };
+
     let inserted = false;
     // A retained RBC specifier must never collide with a bestax import local
     // (possible when one component is both JSX-migrated and value-retained).
@@ -827,6 +953,7 @@ export default function transform(
           node.comments.push(j.commentLine(text, true, false));
         }
       } else {
+        carryComments(node, path);
         path.prune();
       }
       ctx.dirty = true;
diff --git a/docs/docs/guides/getting-started/migration/bloomer.md b/docs/docs/guides/getting-started/migration/bloomer.md
index 23003963f..ca111fb79 100644
--- a/docs/docs/guides/getting-started/migration/bloomer.md
+++ b/docs/docs/guides/getting-started/migration/bloomer.md
@@ -62,14 +62,17 @@ in place:
   → `alignment` / `align` / `right`, `hasTextAlign` → `textAlign`, `hasTextColor` →
   `textColor`, `isPulled` → `float`, `isMarginless` → `m="0"`, `tag` → `as` where bestax
   declares one, `Button isLink` → `color="link"`, `Field isGrouped` → `grouped`,
-  `Control hasIcons` → `hasIconsLeft`/`hasIconsRight`.
+  `Control hasIcons` → `hasIconsLeft`/`hasIconsRight`. `Input`, `Select` and `TextArea` become
+  the bare `InputBase`/`SelectBase`/`TextAreaBase`, because bestax's `Input` wraps itself in a
+  `Field` and `Control` and bloomer's never did.
 - **Helpers** — `isDisplay` and `isHidden`, in all three of their shapes, flatten onto bestax's
   per-viewport props: `isDisplay="flex-tablet"` → `displayTablet="flex"`,
   `isDisplay={{ flex: ['default', 'tablet'] }}` → `display="flex" displayTablet="flex"`,
   `isHidden="touch"` → `visibilityTouch="hidden"`. Every Bulma viewport has a bestax prop,
   `touch` and the `-only` ones included. `Column isSize="1/2"` → `size="half"`, and its
   per-breakpoint object → `sizeMobile`/`sizeTablet`/…
-- **Structure** — wrappers bestax renders itself fold away: `Page` onto its `PageLink`,
+- **Structure** — wrappers bestax renders itself fold away: `Page` onto its `PageLink`, the
+  literal `<li>` bloomer's docs put around a `MenuLink`, the literal `<ul>` inside a `Breadcrumb`,
   `TabLink` into a plain `<a>` inside `Tabs.Item`. `Help`, `Label`, `Heading`, `BreadcrumbItem`,
   `PanelTab` and `HeroVideo` become the plain Bulma markup bloomer rendered, and so does a
   `PanelBlock` without `href` (bestax's is always an `<a>`). Icon-font classes the codemod can
diff --git a/skills/bestax-migrate/references/bloomer/component-map.md b/skills/bestax-migrate/references/bloomer/component-map.md
index 2b322c255..b07afe0f7 100644
--- a/skills/bestax-migrate/references/bloomer/component-map.md
+++ b/skills/bestax-migrate/references/bloomer/component-map.md
@@ -51,7 +51,7 @@ coverage test holds to bloomer's own export surface (108 exports, vendored from
 | `HeroVideo`            | _structural_          | mapped  |
 | `Icon`                 | `Icon`                | partial |
 | `Image`                | `Image`               | mapped  |
-| `Input`                | `Input`               | mapped  |
+| `Input`                | `InputBase`           | mapped  |
 | `Label`                | _structural_          | mapped  |
 | `Level`                | `Level`               | mapped  |
 | `LevelItem`            | `Level.Item`          | mapped  |
@@ -109,7 +109,7 @@ coverage test holds to bloomer's own export surface (108 exports, vendored from
 | `Progress`             | `Progress`            | mapped  |
 | `Radio`                | `Radio`               | mapped  |
 | `Section`              | `Section`             | mapped  |
-| `Select`               | `Select`              | mapped  |
+| `Select`               | `SelectBase`          | mapped  |
 | `Subtitle`             | `SubTitle`            | mapped  |
 | `Tab`                  | `Tabs.Item`           | mapped  |
 | `TabLink`              | _structural_          | mapped  |
@@ -117,7 +117,7 @@ coverage test holds to bloomer's own export surface (108 exports, vendored from
 | `Table`                | `Table`               | mapped  |
 | `Tabs`                 | `Tabs`                | mapped  |
 | `Tag`                  | `Tag`                 | mapped  |
-| `TextArea`             | `TextArea`            | mapped  |
+| `TextArea`             | `TextAreaBase`        | mapped  |
 | `Tile`                 | — _(see unmappables)_ | todo    |
 | `Title`                | `Title`               | mapped  |
 | `withHelpersModifiers` | — _(see unmappables)_ | todo    |
@@ -152,6 +152,8 @@ Some targets depend on a prop or a child, so the codemod picks them element by e
 | `NavbarItem`                                         | `Navbar.Item` / `Navbar.Dropdown`                                  | `hasDropdown`                                                                                                             |
 | `Page`                                               | _folded into its child_ / `<li>`                                   | whether the child is a `PageLink`/`PageEllipsis`; attributes on the Page move onto the link, with a `component:Page` note |
 | `PanelBlock`                                         | `Panel.Block` / `<div class="panel-block">`                        | `href` — bestax's block is always an `<a>`                                                                                |
+| `MenuLink` in a literal `<li>`                       | `Menu.Item`, the `<li>` folded away                                | bestax's item renders its own `<li>`                                                                                      |
+| `Breadcrumb` around a literal `<ul>`                 | `Breadcrumb`, the `<ul>` folded away                               | bestax's breadcrumb renders its own `<ul>`                                                                                |
 | `Icon`, `PanelIcon`                                  | `name`/`library`/`variant` / an `<i>` child                        | whether the icon classes are FA5/6 or MDI                                                                                 |
 | `Help`, `Label`, `Heading`                           | `<p class="help">`, `<label class="label">`, `<p class="heading">` | always plain markup                                                                                                       |
 | `BreadcrumbItem`, `PanelTab`, `TabLink`, `HeroVideo` | `<li>`, `<a>`, `<a>`, `<div class="hero-video">`                   | always plain markup                                                                                                       |
diff --git a/skills/bestax-migrate/references/bloomer/prop-map.md b/skills/bestax-migrate/references/bloomer/prop-map.md
index 146406ea4..8d51e00c1 100644
--- a/skills/bestax-migrate/references/bloomer/prop-map.md
+++ b/skills/bestax-migrate/references/bloomer/prop-map.md
@@ -50,31 +50,32 @@ leftover would be a type error rather than a no-op.
 
 ## Value props
 
-| bloomer                                                                                                      | bestax-bulma                                                                                                                                            |
-| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `isColor="primary"`                                                                                          | `color="primary"` (every component that had it)                                                                                                         |
-| `isSize="large"`                                                                                             | `size="large"` — Button, Content, Delete, Icon, Input, Progress, Section, Select, Tag, TextArea, Breadcrumb, Pagination, Tabs, Field.Label, Modal.Close |
-| `Title isSize={3}`                                                                                           | `size={3}` — bestax accepts the numbers 1–6                                                                                                             |
-| `Subtitle isSize={4}`                                                                                        | `SubTitle size={4} as="h2"` — bloomer's default was an `<h2>`, bestax's is an `<h1>`, so the level is kept                                              |
-| `Image isSize="128x128"`                                                                                     | `size="128x128"`                                                                                                                                        |
-| `Image isRatio="16:9"`                                                                                       | `size="16by9"` (`square`→`square`, `1:1`→`1by1`, `4:3`→`4by3`, `3:2`→`3by2`, `2:1`→`2by1`)                                                              |
-| `Breadcrumb isAlign`                                                                                         | `alignment`                                                                                                                                             |
-| `Breadcrumb hasSeparator`                                                                                    | `separator`                                                                                                                                             |
-| `Tabs isAlign`                                                                                               | `align`; `isBoxed` → `boxed`, `isToggle` → `toggle`                                                                                                     |
-| `Pagination isAlign`                                                                                         | `align` (`"left"` is the default and is dropped)                                                                                                        |
-| `Dropdown isAlign="right"`                                                                                   | `right`; `isHoverable` → `hoverable`                                                                                                                    |
-| `Icon isAlign="left"`                                                                                        | `className="is-left"` (bestax's Icon has no align prop)                                                                                                 |
-| `Icon className="fas fa-spinner fa-spin"`                                                                    | `name="spinner" library="fa" variant="solid" features="fa-spin"` — modifier classes become `features`                                                   |
-| `PanelIcon className="fas fa-book"`                                                                          | `Panel.Icon name="book" library="fa" variant="solid"` — same className API as `Icon`                                                                    |
-| `Button isLink`                                                                                              | `color="link"` (a TODO if `isColor` is also set)                                                                                                        |
-| `Hero isFullHeight`                                                                                          | `size="fullheight"`                                                                                                                                     |
-| `Container isFluid`                                                                                          | `fluid`                                                                                                                                                 |
-| `Navbar isTransparent`                                                                                       | `transparent`                                                                                                                                           |
-| `Field isGrouped`, `isHorizontal`                                                                            | `grouped` (same `boolean \| 'centered' \| 'right'`), `horizontal`                                                                                       |
-| `FieldLabel isNormal`                                                                                        | `size="normal"`                                                                                                                                         |
-| `Control hasIcons`                                                                                           | `hasIconsLeft` / `hasIconsRight` (`true` sets both; an array sets each)                                                                                 |
-| `PageLink isCurrent`                                                                                         | `active`                                                                                                                                                |
-| `isActive` on Dropdown, DropdownItem, MenuLink, Modal, NavbarBurger, NavbarMenu, NavbarItem, PanelBlock, Tab | `active`                                                                                                                                                |
+| bloomer                                                                                                      | bestax-bulma                                                                                                                                                                                                                                                              |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `isColor="primary"`                                                                                          | `color="primary"` (every component that had it)                                                                                                                                                                                                                           |
+| `isSize="large"`                                                                                             | `size="large"` — Button, Content, Delete, Icon, Input, Progress, Section, Select, Tag, TextArea, Breadcrumb, Pagination, Tabs, Field.Label, Modal.Close                                                                                                                   |
+| `Title isSize={3}`                                                                                           | `size={3}` — bestax accepts the numbers 1–6                                                                                                                                                                                                                               |
+| `Subtitle isSize={4}`                                                                                        | `SubTitle size={4} as="h2"` — bloomer's default was an `<h2>`, bestax's is an `<h1>`, so the level is kept                                                                                                                                                                |
+| `Image isSize="128x128"`                                                                                     | `size="128x128"`                                                                                                                                                                                                                                                          |
+| `Image isRatio="16:9"`                                                                                       | `size="16by9"` (`square`→`square`, `1:1`→`1by1`, `4:3`→`4by3`, `3:2`→`3by2`, `2:1`→`2by1`)                                                                                                                                                                                |
+| `Breadcrumb isAlign`                                                                                         | `alignment`                                                                                                                                                                                                                                                               |
+| `Breadcrumb hasSeparator`                                                                                    | `separator`                                                                                                                                                                                                                                                               |
+| `Tabs isAlign`                                                                                               | `align`; `isBoxed` → `boxed`, `isToggle` → `toggle`                                                                                                                                                                                                                       |
+| `Pagination isAlign`                                                                                         | `align` (`"left"` is the default and is dropped)                                                                                                                                                                                                                          |
+| `Dropdown isAlign="right"`                                                                                   | `right`; `isHoverable` → `hoverable`                                                                                                                                                                                                                                      |
+| `Icon isAlign="left"`                                                                                        | `className="is-left"` (bestax's Icon has no align prop)                                                                                                                                                                                                                   |
+| `Icon className="fas fa-spinner fa-spin"`                                                                    | `name="spinner" library="fa" variant="solid" features="fa-spin"` — modifier classes become `features`                                                                                                                                                                     |
+| `PanelIcon className="fas fa-book"`                                                                          | `Panel.Icon name="book" library="fa" variant="solid"` — same className API as `Icon`                                                                                                                                                                                      |
+| `Button isLink`                                                                                              | `color="link"` (a TODO if `isColor` is also set)                                                                                                                                                                                                                          |
+| `Hero isFullHeight`                                                                                          | `size="fullheight"`                                                                                                                                                                                                                                                       |
+| `Container isFluid`                                                                                          | `fluid`                                                                                                                                                                                                                                                                   |
+| `Navbar isTransparent`                                                                                       | `transparent`                                                                                                                                                                                                                                                             |
+| `Field isGrouped`, `isHorizontal`                                                                            | `grouped` (same `boolean \| 'centered' \| 'right'`), `horizontal`                                                                                                                                                                                                         |
+| `FieldLabel isNormal`                                                                                        | `size="normal"`                                                                                                                                                                                                                                                           |
+| `Control hasIcons`                                                                                           | `hasIconsLeft` / `hasIconsRight` (`true` sets both; an array sets each)                                                                                                                                                                                                   |
+| `PageLink isCurrent`                                                                                         | `active`                                                                                                                                                                                                                                                                  |
+| `isActive` on Dropdown, DropdownItem, MenuLink, Modal, NavbarBurger, NavbarMenu, NavbarItem, PanelBlock, Tab | `active`                                                                                                                                                                                                                                                                  |
+| `Input`, `Select`, `TextArea`                                                                                | `InputBase`, `SelectBase`, `TextAreaBase` — bloomer's were bare elements; bestax's `Input`/`Select`/`TextArea` wrap themselves in `Field` and `Control`, so the bare `*Base` exports are the faithful targets and your existing `Field`/`Control` markup stays as written |
 
 ## Column sizes
 
@@ -99,14 +100,27 @@ Everywhere else `tag` is left in place with a TODO. On the components that becom
 (`Help`, `Label`, `Heading`, `BreadcrumbItem`, `PanelTab`, `TabLink`, `Page`, `HeroVideo`) a
 literal `tag` is honoured — `<Help tag="span">` becomes `<span className="help">`.
 
-bloomer's `Button` and `Image` never took `tag` at all. bloomer rendered an `<a>` whenever
-`href` was set, whatever `tag` said, and its default element was otherwise a `<div>`. The
-codemod keeps both: `Button` and `LevelItem` gain `as="a"` beside their `href`; a `tag` next to
-an `href` is dropped on the targets that already render an anchor (`Navbar.Item`, `Menu.Item`,
-`Dropdown.Item`, `Panel.Block`); and a `NavbarItem` or `DropdownItem` with neither `href` nor
-`tag` gains `as="div"`, because bestax's `Navbar.Item` and `Dropdown.Item` default to an `<a>`.
-bestax's `Panel.Block` is always an `<a>`, so only a `PanelBlock` with `href` becomes one — the
-rest stay the plain `<div class="panel-block">` (or the `tag` you gave) that bloomer rendered.
+bloomer's `Button` and `Image` never took `tag` at all. Seven bloomer components — `Button`,
+`Delete`, `LevelItem`, `DropdownItem`, `NavbarItem`, `PanelBlock`, `CardFooterItem` — rendered
+an `<a>` whenever `href` was set, whatever `tag` said, and a `<div>` (or their default tag)
+otherwise; the rest (`MenuLink`, `PageControl`, `Dropdown`, …) rendered their `tag` regardless.
+The codemod keeps that: `Button` and `LevelItem` gain `as="a"` beside a literal `href`; a `tag`
+next to a literal `href` is dropped on the switching targets that already render an anchor
+(`Navbar.Item`, `Dropdown.Item`, `Panel.Block`); a `NavbarItem` or `DropdownItem` with neither
+`href` nor `tag` gains `as="div"`, because bestax's `Navbar.Item` and `Dropdown.Item` default
+to an `<a>`. A dynamic `href={expr}` was a runtime decision bloomer made and bestax cannot, so it
+is flagged (`prop:href`) rather than guessed. bestax's `Panel.Block` is always an `<a>`, so only
+a `PanelBlock` with `href` becomes one — the rest stay the plain `<div class="panel-block">` (or
+the `tag` you gave) that bloomer rendered.
+
+## Helper props on parts that take none
+
+A few bestax parts extend only React's HTML attributes and take no Bulma helper props at all:
+`Pagination.Previous`/`Next`/`Ellipsis`, `Navbar.Dropdown`/`DropdownMenu`/`Divider`,
+`Panel.Heading`/`Tabs`/`Block`, `Tabs.List`/`Item`, `Message.Header`/`Body` and the `Modal`
+parts. A bloomer helper on one of those is removed with a TODO naming the Bulma class to add
+instead (`is-pulled-right`, `m-0`, `is-hidden-mobile`, …), since Bulma v1 still ships every one
+of them.
 
 ## Refs
 
diff --git a/skills/bestax-migrate/references/bloomer/unmappables.md b/skills/bestax-migrate/references/bloomer/unmappables.md
index 9b9080e65..8c7af75e9 100644
--- a/skills/bestax-migrate/references/bloomer/unmappables.md
+++ b/skills/bestax-migrate/references/bloomer/unmappables.md
@@ -28,7 +28,8 @@ convert to the prop form:
 same `className` API and converts the same way. An `Icon` with no `className` and no children
 is flagged too — it gets an empty `<i>` child so it compiles until you set a `name` or a child —
 and so is a `className` that is not a string (`prop:className`). An `Icon` written with children
-is flagged as well: bloomer never rendered them, bestax will.
+is flagged as well: bloomer never rendered them — beside a `className` they are removed (the
+classes win), without one they are kept and bestax will render them.
 
 ## `component:Nav` — Bulma 0.4's nav
 
@@ -86,10 +87,12 @@ bestax's `Dropdown` takes a `label` and renders its own trigger and menu, so blo
 </Dropdown>
 
 <Dropdown label="Open" active right>
-  <Dropdown.Item href="/a">A</Dropdown.Item>
+  <Dropdown.Item onClick={() => navigate('/a')}>A</Dropdown.Item>
 </Dropdown>
 ```
 
+bestax's `Dropdown.Item` declares no `href` (`prop:href` on a `DropdownItem`): navigate in
+`onClick`, or put an `<a>` inside the item.
 `isHoverable` → `hoverable`, `isActive` → `active` carry over on the `Dropdown` itself.
 
 ## `prop:tag` — polymorphism
@@ -144,24 +147,44 @@ own CSS styled the class.
 
 Each of these is left in place with a TODO naming the class to add instead:
 
-| prop                      | on                                           | what to do                                                                               |
-| ------------------------- | -------------------------------------------- | ---------------------------------------------------------------------------------------- |
-| `isBold`                  | `Hero`                                       | `className="is-bold"` (Bulma v1 still ships it)                                          |
-| `isHalfHeight`            | `Hero`                                       | `className="is-halfheight"` — bestax's `size` has no half-height                         |
-| `isSize="large"`          | `Media`                                      | `className="is-large"`                                                                   |
-| `isSpaced`                | `Subtitle`                                   | `className="is-spaced"` — only `Title` has `isSpaced`                                    |
-| `isActive`                | `Input`                                      | `className="is-active"`                                                                  |
-| `isActive`, `isFocused`   | `PageLink`, `PageControl`, `PageEllipsis`    | `className="is-active"` / `"is-focused"`                                                 |
-| `isActive`                | `NavbarLink`                                 | `className="is-active"`                                                                  |
-| `isHoverable`             | `NavbarItem` without `hasDropdown`           | move to the `Navbar.Dropdown`, or `className="is-hoverable"`                             |
-| `isBoxed`                 | `NavbarDropdown`, `NavbarDivider`            | `className="is-boxed"`                                                                   |
-| `isWrapped`               | `PanelBlock` with `href`                     | `className="is-wrapped"` (a block without `href` stays plain markup and keeps the class) |
-| `isFlexible`              | `LevelItem`                                  | `className="is-flexible"`                                                                |
-| `hasAddons="fullwidth"`   | `Field`                                      | `hasAddons` plus `className="has-addons-fullwidth"`                                      |
-| `isAlign`                 | `TabList`                                    | set `align` on the `<Tabs>` — Bulma aligns the container                                 |
-| `isGrid`                  | `Columns`                                    | Bulma removed `columns.is-grid` in 0.5; use `isMultiline` with sized columns, or `Grid`  |
-| `href`                    | `CardFooterItem`, `CardHeaderIcon`, `Delete` | put an `<a>` inside, or handle it in `onClick`                                           |
-| `isRatio` beside `isSize` | `Image`                                      | bestax's one `size` took the fixed size; restore the ratio if that was the point         |
+| prop                      | on                                                                                 | what to do                                                                               |
+| ------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| `isBold`                  | `Hero`                                                                             | `className="is-bold"` (Bulma v1 still ships it)                                          |
+| `isHalfHeight`            | `Hero`                                                                             | `className="is-halfheight"` — bestax's `size` has no half-height                         |
+| `isSize="large"`          | `Media`                                                                            | `className="is-large"`                                                                   |
+| `isSpaced`                | `Subtitle`                                                                         | `className="is-spaced"` — only `Title` has `isSpaced`                                    |
+| `isActive`                | `Input`                                                                            | `className="is-active"`                                                                  |
+| `isActive`, `isFocused`   | `PageLink`, `PageControl`, `PageEllipsis`                                          | `className="is-active"` / `"is-focused"`                                                 |
+| `isActive`                | `NavbarLink`                                                                       | `className="is-active"`                                                                  |
+| `isHoverable`             | `NavbarItem` without `hasDropdown`                                                 | move to the `Navbar.Dropdown`, or `className="is-hoverable"`                             |
+| `isBoxed`                 | `NavbarDropdown`, `NavbarDivider`                                                  | `className="is-boxed"`                                                                   |
+| `isWrapped`               | `PanelBlock` with `href`                                                           | `className="is-wrapped"` (a block without `href` stays plain markup and keeps the class) |
+| `isFlexible`              | `LevelItem`                                                                        | `className="is-flexible"`                                                                |
+| `hasAddons="fullwidth"`   | `Field`                                                                            | `hasAddons` plus `className="has-addons-fullwidth"`                                      |
+| `isAlign`                 | `TabList`                                                                          | set `align` on the `<Tabs>` — Bulma aligns the container                                 |
+| `isGrid`                  | `Columns`                                                                          | Bulma removed `columns.is-grid` in 0.5; use `isMultiline` with sized columns, or `Grid`  |
+| `href`                    | `CardFooterItem`, `CardHeaderIcon`, `Delete`, `DropdownItem`                       | put an `<a>` inside, or handle it in `onClick`                                           |
+| `href={expr}` (dynamic)   | `Button`, `LevelItem` and the other components that switched to an `<a>` on `href` | bloomer decided the element at runtime; set `as` conditionally by hand                   |
+| `href`                    | `NavbarItem hasDropdown`                                                           | bestax's `Navbar.Dropdown` is the container; put the `href` on the `Navbar.Link` inside  |
+| `isRatio` beside `isSize` | `Image`                                                                            | bestax's one `size` took the fixed size; restore the ratio if that was the point         |
+
+## `component:MenuLink`, `component:Breadcrumb`, `component:Page` — lists bestax renders itself
+
+bestax's `Menu.Item` renders its own `<li><a>`, its `Breadcrumb` its own `<ul>`, and its
+`Pagination.Link`/`Pagination.Ellipsis` their own `<li>`. bloomer's docs wrote those elements by
+hand, so the codemod folds a literal `<li>` around a `MenuLink`, a literal `<ul>` inside a
+`Breadcrumb`, and a `Page` around a single link away — carrying their attributes. It flags the
+shapes it cannot fold: a `MenuLink` sharing its `<li>` with other content, a `<ul>` carrying
+attributes, and a `Page` whose link sits in an expression or beside siblings — remove the wrapper
+by hand, or the lists nest.
+
+## Helper props on parts that take none
+
+`Pagination.Previous`/`Next`/`Ellipsis`, `Navbar.Dropdown`/`DropdownMenu`/`Divider`,
+`Panel.Heading`/`Tabs`/`Block`, `Tabs.List`/`Item`, `Message.Header`/`Body` and the `Modal`
+parts extend only React's HTML attributes. A bloomer helper on one of them (`isPulled`,
+`isMarginless`, `isHidden`, `hasTextAlign`, …) is removed with a TODO naming the Bulma class —
+add it as `className`; Bulma v1 ships every one of them.
 
 ## `prop:isLink` — beside `isColor`
 
@@ -191,7 +214,12 @@ and shade of that era exists in bestax verbatim.
 ## `value-reference` — a component used as a value
 
 `const Wrapped = Box` and `{ Subtitle }` are rewritten to the bestax binding (`Hero.Foot`,
-`SubTitle`) when the target is a plain rename. A retained component (`Tile`, the `Nav` family,
+`SubTitle`) when the target is a plain rename, and `export { Subtitle }` becomes
+`export { SubTitle as Subtitle }` so the public name survives. A re-export of a component whose
+bestax counterpart is a member of a compound (`export { CardHeader }` → `Card.Header`) cannot be
+expressed and is flagged; so is a barrel `export { X } from 'bloomer'` (`imports`) and a
+namespace import used as a plain value (`const { Box } = B`), through which nothing was
+migrated. A retained component (`Tile`, the `Nav` family,
 `withHelpersModifiers`) used as a value keeps the bloomer import with this flag: migrate the
 usage by hand. `withHelpersModifiers` in particular has nothing to become — every bestax
 component already takes the helper props, and a custom component gets them from
@@ -212,5 +240,5 @@ on it have no home and are dropped with this flag. Re-apply them as classes
 ## Dynamic values
 
 Any prop whose value the codemod cannot read — `isColor={c}`, `isNext={n}`, `hasIcons={sides}`,
-`tag={t}` — is either renamed as-is (when the rename is unconditional) or flagged with the
+`tag={t}`, `isTransparent={t}`, `isFullHeight={f}`, `isNormal={n}` — is either renamed as-is (when the rename is unconditional) or flagged with the
 specific prop to set. The comment names it.

From dcac5a0dc765aba6a7dc956a0d1d73ccdf07b6ce Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 11:25:38 -0400
Subject: [PATCH 09/18] fix(bestax-migrate): read a falsy href and a false
 helper the way bloomer did

bloomer chose the anchor with `props.href ? 'a' : tag`, so an empty or
false href kept the default element; and a false boolean helper was a
no-op, so a helperless target no longer asks for its class back.
---
 .../bloomer/__tests__/specials.test.ts        | 34 +++++++++++++++++++
 .../src/sources/bloomer/specials.ts           | 11 ++++--
 .../src/sources/bloomer/transform.ts          |  2 ++
 3 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
index bd5d6020e..bdcb0e6df 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
@@ -314,6 +314,40 @@ describe('bloomer navigation handlers', () => {
     );
   });
 
+  it('treats an empty or false href the way bloomer did — no anchor', () => {
+    const empty = migrate(dyn('Button', '<Button href="">x</Button>'));
+    expect(empty.rules).toEqual([]);
+    expect(empty.output).toContain('<Button href="">x</Button>');
+    const off = migrate(
+      dyn(
+        'DropdownItem',
+        '<DropdownItem href={false} tag="span">x</DropdownItem>'
+      )
+    );
+    expect(jsx(off.output)).toContain(
+      '<Dropdown.Item href={false} as="span">x</Dropdown.Item>'
+    );
+    const bare = migrate(
+      dyn('NavbarItem', '<NavbarItem href={0}>x</NavbarItem>')
+    );
+    expect(jsx(bare.output)).toContain(
+      '<Navbar.Item href={0} as="div">x</Navbar.Item>'
+    );
+  });
+
+  it('drops a false helper on a helperless target without a hint', () => {
+    const { output, rules } = migrate(
+      dyn(
+        'PageControl',
+        '<PageControl href="#" isMarginless={false} isHidden={false} isPulled="right">p</PageControl>'
+      )
+    );
+    expect(rules).toEqual(['prop:isPulled']);
+    expect(output).toContain(
+      '<Pagination.Previous href="#">p</Pagination.Previous>'
+    );
+  });
+
   it('flags a dynamic href instead of guessing the anchor', () => {
     const { output, rules } = migrate(
       dyn('Button', '<Button href={p.url} tag="span">x</Button>')
diff --git a/bestax-migrate/src/sources/bloomer/specials.ts b/bestax-migrate/src/sources/bloomer/specials.ts
index fe263bde9..90bdef80e 100644
--- a/bestax-migrate/src/sources/bloomer/specials.ts
+++ b/bestax-migrate/src/sources/bloomer/specials.ts
@@ -145,8 +145,15 @@ function anchorWhenHref(
   const handled: string[] = [];
   const tagAttr = findAttr(element, 'tag');
   const hrefAttr = findAttr(element, 'href');
-  if (hrefAttr) {
-    const literal = literalValueOf(hrefAttr);
+  // bloomer chose the element with `props.href ? 'a' : tag`, so an empty or
+  // false `href` kept the default element — the attribute is left as written.
+  const hrefLiteral = hrefAttr ? literalValueOf(hrefAttr) : undefined;
+  const hrefFalsy =
+    hrefLiteral !== undefined &&
+    hrefLiteral.kind !== 'expression' &&
+    !hrefLiteral.value;
+  if (hrefAttr && !hrefFalsy) {
+    const literal = hrefLiteral!;
     if (literal.kind === 'expression') {
       addTodo(
         ctx,
diff --git a/bestax-migrate/src/sources/bloomer/transform.ts b/bestax-migrate/src/sources/bloomer/transform.ts
index 517eeab11..c338f4d17 100644
--- a/bestax-migrate/src/sources/bloomer/transform.ts
+++ b/bestax-migrate/src/sources/bloomer/transform.ts
@@ -455,6 +455,8 @@ export default function transform(
         if (!cls) continue;
         removeAttr(element, attr);
         handled.add(name);
+        // A false boolean was a no-op in bloomer; nothing to re-add.
+        if (literal.kind === 'boolean' && !literal.value) continue;
         addTodo(
           ctx,
           path,

From 6f305bc5d3633744dc2c2ab592e53311f5016846 Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 11:34:57 -0400
Subject: [PATCH 10/18] fix(bestax-migrate): turn bloomer's prop-less modifiers
 into their Bulma classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review round four on #642. A new `toClass`/`toClassPrefix` prop action
merges a Bulma class into className, and the bloomer table uses it for
every modifier bestax has no prop for (Hero isBold, Media isSize, Subtitle
isSpaced, Input isActive, PanelBlock isWrapped, …) and for helpers on the
parts that extend only React's HTML attributes — Bulma v1 still ships all
of those classes, so a TODO was the weaker answer. A folded wrapper's
spread now precedes the child's own props; type-only bestax locals no
longer count as runtime collisions against a retained source binding; and
the comments of a pruned import that ends the file, or is alone in it, are
kept. All three transforms where the code is shared.
---
 bestax-mcp/data/skills.json                   |  4 +-
 .../e2e/bloomer-kitchen-sink.test.ts          |  5 --
 bestax-migrate/src/sources/_shared/props.ts   | 73 +++++++++++++++++++
 .../src/sources/_shared/specials-utils.ts     |  9 ++-
 .../bloomer/__testfixtures__/form.output.tsx  |  3 +-
 .../bloomer/__tests__/specials.test.ts        | 68 +++++++++++++----
 .../bloomer/__tests__/transform.test.ts       | 21 ++++++
 bestax-migrate/src/sources/bloomer/mapping.ts | 35 ++++-----
 .../src/sources/bloomer/specials.ts           | 18 +++--
 .../src/sources/bloomer/transform.ts          | 52 +++++++++++--
 bestax-migrate/src/sources/rbx/transform.ts   | 38 +++++++++-
 .../react-bulma-components/transform.ts       | 38 +++++++++-
 bestax-migrate/src/types.ts                   | 11 +++
 .../references/bloomer/prop-map.md            |  8 +-
 .../references/bloomer/unmappables.md         | 56 +++++++-------
 15 files changed, 340 insertions(+), 99 deletions(-)

diff --git a/bestax-mcp/data/skills.json b/bestax-mcp/data/skills.json
index d22ce627b..a63cbff5d 100644
--- a/bestax-mcp/data/skills.json
+++ b/bestax-mcp/data/skills.json
@@ -93,12 +93,12 @@
         {
           "id": "bloomer-prop-map",
           "file": "references/bloomer/prop-map.md",
-          "bytes": 18056
+          "bytes": 18333
         },
         {
           "id": "bloomer-unmappables",
           "file": "references/bloomer/unmappables.md",
-          "bytes": 14391
+          "bytes": 12915
         },
         {
           "id": "css-migration",
diff --git a/bestax-migrate/e2e/bloomer-kitchen-sink.test.ts b/bestax-migrate/e2e/bloomer-kitchen-sink.test.ts
index 7026021cb..b7bff822e 100644
--- a/bestax-migrate/e2e/bloomer-kitchen-sink.test.ts
+++ b/bestax-migrate/e2e/bloomer-kitchen-sink.test.ts
@@ -247,11 +247,6 @@ describe('bloomer kitchen-sink e2e', () => {
       'prop:tag',
       'prop:render',
       'prop:isGrid',
-      'prop:isBold',
-      'prop:isHalfHeight',
-      'prop:isSize',
-      'prop:isSpaced',
-      'prop:isActive',
       'prop:hasAddons',
       'prop:isAlign',
       'prop:isFullWidth',
diff --git a/bestax-migrate/src/sources/_shared/props.ts b/bestax-migrate/src/sources/_shared/props.ts
index 63b6d8e63..a0ab73c97 100644
--- a/bestax-migrate/src/sources/_shared/props.ts
+++ b/bestax-migrate/src/sources/_shared/props.ts
@@ -70,6 +70,39 @@ export function addAttrOnce(
   addAttr(element, attr);
 }
 
+/**
+ * Merge a Bulma class into the element's `className`: appended to a string
+ * literal, written fresh when there is none, and a TODO when the existing
+ * value is dynamic (the class cannot be spliced into an expression safely).
+ */
+export function mergeClass(
+  ctx: TransformContext,
+  path: ASTPath<any>,
+  element: any,
+  cls: string,
+  originalName: string
+): void {
+  const { j } = ctx;
+  const existing = findAttr(element, 'className');
+  if (!existing) {
+    addAttr(element, makeAttr(j, 'className', cls));
+    return;
+  }
+  const literal = literalValueOf(existing);
+  if (literal.kind === 'string') {
+    const classes = literal.value.split(/\s+/).filter(Boolean);
+    if (!classes.includes(cls)) classes.push(cls);
+    existing.value = j.stringLiteral(classes.join(' '));
+    return;
+  }
+  addTodo(
+    ctx,
+    path,
+    `prop:${originalName}`,
+    `\`${originalName}\` becomes the \`${cls}\` class, but \`className\` is dynamic here; add \`${cls}\` to it by hand`
+  );
+}
+
 /** Apply one PropAction to `attr` on `element`. */
 export function applyPropAction(
   ctx: TransformContext,
@@ -86,6 +119,46 @@ export function applyPropAction(
     ctx.dirty = true;
     return;
   }
+  if (action.toClass) {
+    const resolved = resolveBooleanish(attr);
+    if (resolved === 'expression') {
+      addTodo(
+        ctx,
+        path,
+        `prop:${originalName}`,
+        `\`${originalName}\` has a dynamic value; bestax has no prop for it — add the \`${action.toClass}\` class conditionally by hand`
+      );
+      return;
+    }
+    removeAttr(element, attr);
+    ctx.dirty = true;
+    if (resolved === 'truthy') {
+      mergeClass(ctx, path, element, action.toClass, originalName);
+    }
+    return;
+  }
+  if (action.toClassPrefix) {
+    const value = literalValueOf(attr);
+    if (value.kind !== 'string') {
+      addTodo(
+        ctx,
+        path,
+        `prop:${originalName}`,
+        `\`${originalName}\` has a dynamic value; bestax has no prop for it — add the \`${action.toClassPrefix}<value>\` class by hand`
+      );
+      return;
+    }
+    removeAttr(element, attr);
+    ctx.dirty = true;
+    mergeClass(
+      ctx,
+      path,
+      element,
+      `${action.toClassPrefix}${value.value}`,
+      originalName
+    );
+    return;
+  }
   if (action.todo) {
     addTodo(
       ctx,
diff --git a/bestax-migrate/src/sources/_shared/specials-utils.ts b/bestax-migrate/src/sources/_shared/specials-utils.ts
index 9c6de651c..cdd598bec 100644
--- a/bestax-migrate/src/sources/_shared/specials-utils.ts
+++ b/bestax-migrate/src/sources/_shared/specials-utils.ts
@@ -397,9 +397,14 @@ export function makeStructuralHelpers(strip: AttrStrip) {
 
     for (const attr of [...(element.openingElement.attributes ?? [])]) {
       if (attr.type === 'JSXSpreadAttribute') {
-        // A spread has no name to collide on; it moves across as written.
+        // A spread has no name to collide on; it moves across as written —
+        // but FIRST, so the child's own explicit props still win over it,
+        // the same rule the named branch below keeps.
         removeAttr(element, attr);
-        addAttr(child, attr);
+        child.openingElement.attributes = [
+          attr,
+          ...(child.openingElement.attributes ?? []),
+        ];
         continue;
       }
       const name: string = attr.name.name;
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/form.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/form.output.tsx
index 31e2712a5..1da1c3d5b 100644
--- a/bestax-migrate/src/sources/bloomer/__testfixtures__/form.output.tsx
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/form.output.tsx
@@ -3,7 +3,6 @@ import { Checkbox, Control, Field, Icon, InputBase, Radio, SelectBase, TextAreaB
 
 // TODO(bestax-migrate): `hasAddons="fullwidth"` — bestax `Field.hasAddons` takes `true`, "centered" or "right"; Bulma v1 keeps `has-addons-fullwidth`, so use `hasAddons` plus className="has-addons-fullwidth"
 // TODO(bestax-migrate): kept the Font Awesome 4 classes on an <i> child, as bloomer rendered them; bestax's optional Font Awesome peer is 6.7+, where many v4 names changed (brand icons moved to `variant="brands"`) — keep FA4 loaded, or switch to `name`/`library`/`variant` (`<Icon name="home" library="fa" variant="solid" />`)
-// TODO(bestax-migrate): `isActive` — bestax `Input` has no prop for Bulma's `is-active`; add className="is-active"
 export const Form = ({ err }: { err?: string }) => (
   <form>
     <Field horizontal>
@@ -17,7 +16,7 @@ export const Form = ({ err }: { err?: string }) => (
             <Icon size="small" className="is-left"><i className="fa fa-user" aria-hidden="true" /></Icon>
           </Control>
           <Control hasIconsLeft hasIconsRight>
-            <InputBase type="email" isActive />
+            <InputBase type="email" className="is-active" />
           </Control>
           <Control hasIconsLeft hasIconsRight>
             <TextAreaBase size="large" isHovered rows={3} />
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
index bdcb0e6df..bc72ff57c 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
@@ -335,16 +335,16 @@ describe('bloomer navigation handlers', () => {
     );
   });
 
-  it('drops a false helper on a helperless target without a hint', () => {
+  it('merges helpers on a helperless target into className, dropping false ones', () => {
     const { output, rules } = migrate(
       dyn(
         'PageControl',
         '<PageControl href="#" isMarginless={false} isHidden={false} isPulled="right">p</PageControl>'
       )
     );
-    expect(rules).toEqual(['prop:isPulled']);
+    expect(rules).toEqual([]);
     expect(output).toContain(
-      '<Pagination.Previous href="#">p</Pagination.Previous>'
+      '<Pagination.Previous href="#" className="is-pulled-right">p</Pagination.Previous>'
     );
   });
 
@@ -463,24 +463,60 @@ describe('bloomer navigation handlers', () => {
     );
   });
 
-  it('turns helpers on HTML-attribute-only targets into class hints', () => {
+  it('turns helpers on HTML-attribute-only targets into classes, or a hint', () => {
     const { output, rules } = migrate(
       dyn(
         'PageControl',
-        '<PageControl href="#" isPulled="right" isMarginless isHidden="mobile">p</PageControl>'
+        '<PageControl href="#" isPulled="right" isMarginless isHidden="mobile" className="x">p</PageControl>'
       )
     );
-    expect(rules).toEqual([
-      'prop:isPulled',
-      'prop:isMarginless',
-      'prop:isHidden',
-    ]);
+    expect(rules).toEqual([]);
     expect(output).toContain(
-      '<Pagination.Previous href="#">p</Pagination.Previous>'
+      '<Pagination.Previous href="#" className="x is-pulled-right m-0 is-hidden-mobile">p</Pagination.Previous>'
+    );
+    const dynamic = migrate(
+      dyn(
+        'PageControl',
+        '<PageControl isHidden={p.h} isDisplay={["flex"]}>p</PageControl>'
+      )
+    );
+    expect(dynamic.rules).toEqual(['prop:isHidden', 'prop:isDisplay']);
+    expect(dynamic.output).toContain(
+      '<Pagination.Previous>p</Pagination.Previous>'
+    );
+  });
+
+  it('turns a modifier bestax has no prop for into its Bulma class', () => {
+    const hero = migrate(
+      dyn('Hero', '<Hero isBold isHalfHeight className="mine">x</Hero>')
+    );
+    expect(hero.rules).toEqual([]);
+    expect(hero.output).toContain(
+      '<Hero className="mine is-bold is-halfheight">x</Hero>'
+    );
+    const media = migrate(dyn('Media', '<Media isSize="large">x</Media>'));
+    expect(media.output).toContain('<Media className="is-large">x</Media>');
+    const off = migrate(dyn('Hero', '<Hero isBold={false}>x</Hero>'));
+    expect(off.rules).toEqual([]);
+    expect(off.output).toContain('<Hero>x</Hero>');
+    const dyn1 = migrate(dyn('Hero', '<Hero isBold={p.b}>x</Hero>'));
+    expect(dyn1.rules).toEqual(['prop:isBold']);
+    const dynClass = migrate(
+      dyn('Hero', '<Hero isBold className={p.c}>x</Hero>')
+    );
+    expect(dynClass.rules).toEqual(['prop:isBold']);
+    expect(dynClass.output).toContain('<Hero className={p.c}>x</Hero>');
+    const input = migrate(dyn('Input', '<Input isActive isSize="small" />'));
+    expect(input.output).toContain(
+      '<InputBase size="small" className="is-active" />'
+    );
+    const menu = migrate(
+      dyn('NavbarDropdown', '<NavbarDropdown isBoxed>x</NavbarDropdown>')
+    );
+    expect(menu.rules).toEqual([]);
+    expect(menu.output).toContain(
+      '<Navbar.DropdownMenu className="is-boxed">x</Navbar.DropdownMenu>'
     );
-    expect(output).toContain('className="is-pulled-right"');
-    expect(output).toContain('className="m-0"');
-    expect(output).toContain('className="is-hidden-mobile"');
   });
 
   it('keeps a bare NavbarItem and DropdownItem a <div>, as bloomer rendered them', () => {
@@ -521,9 +557,9 @@ describe('bloomer navigation handlers', () => {
     const anchor = migrate(
       dyn('PanelBlock', '<PanelBlock href="/x" isWrapped>x</PanelBlock>')
     );
-    expect(anchor.rules).toEqual(['prop:isWrapped']);
+    expect(anchor.rules).toEqual([]);
     expect(anchor.output).toContain(
-      '<Panel.Block href="/x" isWrapped>x</Panel.Block>'
+      '<Panel.Block href="/x" className="is-wrapped">x</Panel.Block>'
     );
   });
 
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
index 4628afa51..1bf73f8cb 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
@@ -183,6 +183,27 @@ describe('bloomer imports', () => {
     expect(destructured.output).toContain("import * as B from 'bloomer'");
   });
 
+  it('does not count a type-only local as a runtime collision', () => {
+    const { output, rules } = migrate(
+      "import { type Box } from '@allxsmith/bestax-bulma';\nimport { Tile } from 'bloomer';\nexport type B = Box;\nexport const A = () => <Tile />;\n"
+    );
+    expect(rules).toEqual(['component:Tile']);
+    expect(output).toContain(
+      "import { type Box } from '@allxsmith/bestax-bulma';"
+    );
+    expect(output).toContain("import { Tile } from 'bloomer';");
+  });
+
+  it('keeps the comments of a pruned import that ends the file, or is alone', () => {
+    const last = migrate(
+      "import React from 'react';\n// keep me\nimport { Box } from 'bloomer';\n"
+    );
+    expect(last.output).toContain('// keep me');
+    expect(last.output).not.toContain("from 'bloomer'");
+    const only = migrate("// only me\nimport { Box } from 'bloomer';\n");
+    expect(only.output).toContain('// only me');
+  });
+
   it('aliases a bestax import whose name the file already binds', () => {
     const { output } = migrate(
       "import { CardHeaderTitle } from 'bloomer';\nconst Card = () => null;\nexport const A = () => <><Card /><CardHeaderTitle>x</CardHeaderTitle></>;\n"
diff --git a/bestax-migrate/src/sources/bloomer/mapping.ts b/bestax-migrate/src/sources/bloomer/mapping.ts
index 90b86fc0f..5cab5bdbb 100644
--- a/bestax-migrate/src/sources/bloomer/mapping.ts
+++ b/bestax-migrate/src/sources/bloomer/mapping.ts
@@ -73,11 +73,6 @@ const size: PropAction = { rename: 'size' };
 const color: PropAction = { rename: 'color' };
 const active: PropAction = { rename: 'active' };
 
-/** A Bulma modifier bestax has no prop for on this target; the class still exists in v1. */
-const classTodo = (cls: string, target: string): PropAction => ({
-  todo: `bestax \`${target}\` has no prop for Bulma's \`${cls}\`; add className="${cls}"`,
-});
-
 const NAV_TODO = (name: string): ComponentMapping => ({
   status: 'todo',
   todo: `\`${name}\` is Bulma 0.4's \`.nav\`, which Bulma removed in 0.5 (bloomer kept the component); rebuild it with bestax's \`Navbar\` — \`Nav\` → \`Navbar\`, \`NavLeft\`/\`NavRight\` → \`Navbar.Start\`/\`Navbar.End\`, \`NavItem\` → \`Navbar.Item\`, \`NavToggle\` → \`Navbar.Burger\` (${DOCS}/api/components/navbar)`,
@@ -314,7 +309,7 @@ export const MAPPING: Record<string, ComponentMapping> = {
     special: 'subtitle',
     props: {
       isSize: size,
-      isSpaced: classTodo('is-spaced', 'SubTitle'),
+      isSpaced: { toClass: 'is-spaced' },
       tag: TAG_AS,
     },
   },
@@ -344,7 +339,7 @@ export const MAPPING: Record<string, ComponentMapping> = {
       isSize: size,
       isHovered: {},
       isFocused: {},
-      isActive: classTodo('is-active', 'Input'),
+      isActive: { toClass: 'is-active' },
     },
   },
   Label: { status: 'mapped', special: 'label' },
@@ -475,14 +470,14 @@ export const MAPPING: Record<string, ComponentMapping> = {
     status: 'mapped',
     target: 'Level.Item',
     special: 'level-item',
-    props: { isFlexible: classTodo('is-flexible', 'Level.Item'), tag: TAG_AS },
+    props: { isFlexible: { toClass: 'is-flexible' }, tag: TAG_AS },
   },
   LevelLeft: { status: 'mapped', target: 'Level.Left' },
   LevelRight: { status: 'mapped', target: 'Level.Right' },
   Media: {
     status: 'mapped',
     target: 'Media',
-    props: { isSize: classTodo('is-large', 'Media'), tag: TAG_AS },
+    props: { isSize: { toClassPrefix: 'is-' }, tag: TAG_AS },
   },
   MediaContent: { status: 'mapped', target: 'Media.Content' },
   MediaLeft: { status: 'mapped', target: 'Media.Left', props: { tag: TAG_AS } },
@@ -563,13 +558,13 @@ export const MAPPING: Record<string, ComponentMapping> = {
   NavbarLink: {
     status: 'mapped',
     target: 'Navbar.Link',
-    props: { isActive: classTodo('is-active', 'Navbar.Link'), tag: TAG_AS },
+    props: { isActive: { toClass: 'is-active' }, tag: TAG_AS },
   },
   NavbarDropdown: { status: 'mapped', special: 'navbar-dropdown' },
   NavbarDivider: {
     status: 'mapped',
     target: 'Navbar.Divider',
-    props: { isBoxed: classTodo('is-boxed', 'Navbar.Divider') },
+    props: { isBoxed: { toClass: 'is-boxed' } },
   },
 
   // ---- pagination ---------------------------------------------------------
@@ -583,16 +578,16 @@ export const MAPPING: Record<string, ComponentMapping> = {
     status: 'mapped',
     special: 'page-control',
     props: {
-      isActive: classTodo('is-active', 'Pagination.Previous/Next'),
-      isFocused: classTodo('is-focused', 'Pagination.Previous/Next'),
+      isActive: { toClass: 'is-active' },
+      isFocused: { toClass: 'is-focused' },
     },
   },
   PageEllipsis: {
     status: 'mapped',
     target: 'Pagination.Ellipsis',
     props: {
-      isActive: classTodo('is-active', 'Pagination.Ellipsis'),
-      isFocused: classTodo('is-focused', 'Pagination.Ellipsis'),
+      isActive: { toClass: 'is-active' },
+      isFocused: { toClass: 'is-focused' },
     },
   },
   // bestax's Pagination.Link and Pagination.Ellipsis render their own <li>.
@@ -603,8 +598,8 @@ export const MAPPING: Record<string, ComponentMapping> = {
     target: 'Pagination.Link',
     props: {
       isCurrent: active, // bestax's `active` renders Bulma's `is-current`
-      isActive: classTodo('is-active', 'Pagination.Link'),
-      isFocused: classTodo('is-focused', 'Pagination.Link'),
+      isActive: { toClass: 'is-active' },
+      isFocused: { toClass: 'is-focused' },
     },
   },
 
@@ -619,7 +614,7 @@ export const MAPPING: Record<string, ComponentMapping> = {
     special: 'panel-block',
     props: {
       isActive: active,
-      isWrapped: classTodo('is-wrapped', 'Panel.Block'),
+      isWrapped: { toClass: 'is-wrapped' },
     },
   },
   PanelIcon: {
@@ -669,8 +664,8 @@ export const MAPPING: Record<string, ComponentMapping> = {
       isColor: color,
       isSize: size,
       isFullHeight: { booleanToProp: { name: 'size', value: 'fullheight' } },
-      isHalfHeight: classTodo('is-halfheight', 'Hero'),
-      isBold: classTodo('is-bold', 'Hero'),
+      isHalfHeight: { toClass: 'is-halfheight' },
+      isBold: { toClass: 'is-bold' },
     },
   },
   HeroHeader: { status: 'mapped', target: 'Hero.Head' },
diff --git a/bestax-migrate/src/sources/bloomer/specials.ts b/bestax-migrate/src/sources/bloomer/specials.ts
index 90bdef80e..5b43f1de4 100644
--- a/bestax-migrate/src/sources/bloomer/specials.ts
+++ b/bestax-migrate/src/sources/bloomer/specials.ts
@@ -24,6 +24,7 @@ import {
   resolveBooleanish,
   type TransformContext,
 } from '../_shared/jsx-utils.js';
+import { applyPropAction } from '../_shared/props.js';
 import {
   applyIconProps,
   makeStripModifierProps,
@@ -611,6 +612,14 @@ const SPECIALS: Record<string, SpecialHandler> = {
       );
       if (siblings.length === 1 && siblings[0] === element) {
         for (const attr of [...(parent.openingElement.attributes ?? [])]) {
+          if (attr.type === 'JSXSpreadAttribute') {
+            // Before the link's own props, so those still win over it.
+            element.openingElement.attributes = [
+              attr,
+              ...(element.openingElement.attributes ?? []),
+            ];
+            continue;
+          }
           const name =
             attr.type === 'JSXAttribute' ? attr.name.name : undefined;
           if (name && findAttr(element, name)) {
@@ -787,14 +796,7 @@ const SPECIALS: Record<string, SpecialHandler> = {
   'navbar-dropdown'(ctx, path, element) {
     const boxedAttr = findAttr(element, 'isBoxed');
     if (boxedAttr) {
-      removeAttr(element, boxedAttr);
-      addTodo(
-        ctx,
-        path,
-        'prop:isBoxed',
-        'bestax `Navbar.DropdownMenu` has no `boxed` prop; add className="is-boxed"'
-      );
-      ctx.dirty = true;
+      applyPropAction(ctx, path, element, boxedAttr, { toClass: 'is-boxed' });
     }
     return { target: 'Navbar.DropdownMenu', handledProps: ['isBoxed'] };
   },
diff --git a/bestax-migrate/src/sources/bloomer/transform.ts b/bestax-migrate/src/sources/bloomer/transform.ts
index c338f4d17..c8b8dc6ec 100644
--- a/bestax-migrate/src/sources/bloomer/transform.ts
+++ b/bestax-migrate/src/sources/bloomer/transform.ts
@@ -40,7 +40,11 @@ import {
   renameElement,
   type TransformContext,
 } from '../_shared/jsx-utils.js';
-import { applyPropAction, applyUniversalProps } from '../_shared/props.js';
+import {
+  applyPropAction,
+  applyUniversalProps,
+  mergeClass,
+} from '../_shared/props.js';
 import {
   collectBoundNames,
   makeReserve,
@@ -457,11 +461,17 @@ export default function transform(
         handled.add(name);
         // A false boolean was a no-op in bloomer; nothing to re-add.
         if (literal.kind === 'boolean' && !literal.value) continue;
+        // A literal is exactly one Bulma class, which every one of these
+        // parts still takes as `className`; anything else is a TODO.
+        if (literal.kind === 'string' || literal.kind === 'boolean') {
+          mergeClass(ctx, path, element, cls, name);
+          continue;
+        }
         addTodo(
           ctx,
           path,
           `prop:${name}`,
-          `bestax \`${target}\` takes no Bulma helper props (it extends only React's HTML attributes); add className="${cls}" by hand`
+          `bestax \`${target}\` takes no Bulma helper props (it extends only React's HTML attributes); add the matching \`${cls}\` class to \`className\` by hand`
         );
       }
     }
@@ -810,9 +820,32 @@ export default function transform(
         existingBestax?.node ??
         (index >= 0 ? body[index + 1] : undefined);
 
-      if (!carrier) return;
+      if (carrier) {
+        carrier.comments = [...comments, ...(carrier.comments ?? [])];
+      } else if (index > 0) {
+        // The import was the last statement: the comments stay where they
+
+        // were, after what precedes it.
 
-      carrier.comments = [...comments, ...(carrier.comments ?? [])];
+        const previous = body[index - 1];
+
+        previous.comments = [
+          ...(previous.comments ?? []),
+
+          ...comments.map((c: any) => ({
+            ...c,
+            leading: false,
+            trailing: true,
+          })),
+        ];
+      } else {
+        // The import was the only statement: the comments become the file's.
+
+        const program = importPath.parent?.node;
+
+        if (program)
+          program.comments = [...comments, ...(program.comments ?? [])];
+      }
 
       node.comments = [];
     };
@@ -820,7 +853,16 @@ export default function transform(
     let inserted = false;
     // A retained bloomer specifier must never collide with a bestax import local
     // (possible when one component is both JSX-migrated and value-retained).
-    const bestaxLocals = new Set(ctx.needed.values());
+    // Only a VALUE local can collide at runtime: a type-only specifier the
+    // seeding above recorded, and nothing promoted, binds no value.
+    const bestaxLocals = new Set(
+      [...ctx.needed.entries()]
+        .filter(
+          ([imported]) =>
+            requested.has(imported) || preExistingImports.has(imported)
+        )
+        .map(([, local]) => local)
+    );
     for (const path of sourceImportPaths) {
       const node = path.node;
       const keepSpecifiers = (node.specifiers ?? []).filter((spec: any) => {
diff --git a/bestax-migrate/src/sources/rbx/transform.ts b/bestax-migrate/src/sources/rbx/transform.ts
index 5ec8b5aaf..38394df81 100644
--- a/bestax-migrate/src/sources/rbx/transform.ts
+++ b/bestax-migrate/src/sources/rbx/transform.ts
@@ -1079,9 +1079,32 @@ export default function transform(
         existingBestax?.node ??
         (index >= 0 ? body[index + 1] : undefined);
 
-      if (!carrier) return;
+      if (carrier) {
+        carrier.comments = [...comments, ...(carrier.comments ?? [])];
+      } else if (index > 0) {
+        // The import was the last statement: the comments stay where they
 
-      carrier.comments = [...comments, ...(carrier.comments ?? [])];
+        // were, after what precedes it.
+
+        const previous = body[index - 1];
+
+        previous.comments = [
+          ...(previous.comments ?? []),
+
+          ...comments.map((c: any) => ({
+            ...c,
+            leading: false,
+            trailing: true,
+          })),
+        ];
+      } else {
+        // The import was the only statement: the comments become the file's.
+
+        const program = importPath.parent?.node;
+
+        if (program)
+          program.comments = [...comments, ...(program.comments ?? [])];
+      }
 
       node.comments = [];
     };
@@ -1089,7 +1112,16 @@ export default function transform(
     let inserted = false;
     // A retained rbx specifier must never collide with a bestax import local
     // (possible when one component is both JSX-migrated and value-retained).
-    const bestaxLocals = new Set(ctx.needed.values());
+    // Only a VALUE local can collide at runtime: a type-only specifier the
+    // seeding above recorded, and nothing promoted, binds no value.
+    const bestaxLocals = new Set(
+      [...ctx.needed.entries()]
+        .filter(
+          ([imported]) =>
+            requested.has(imported) || preExistingImports.has(imported)
+        )
+        .map(([, local]) => local)
+    );
     for (const path of rbxImportPaths) {
       const node = path.node;
       const keepSpecifiers = (node.specifiers ?? []).filter((spec: any) => {
diff --git a/bestax-migrate/src/sources/react-bulma-components/transform.ts b/bestax-migrate/src/sources/react-bulma-components/transform.ts
index 4ae0713e8..939de6b07 100644
--- a/bestax-migrate/src/sources/react-bulma-components/transform.ts
+++ b/bestax-migrate/src/sources/react-bulma-components/transform.ts
@@ -891,9 +891,32 @@ export default function transform(
         existingBestax?.node ??
         (index >= 0 ? body[index + 1] : undefined);
 
-      if (!carrier) return;
+      if (carrier) {
+        carrier.comments = [...comments, ...(carrier.comments ?? [])];
+      } else if (index > 0) {
+        // The import was the last statement: the comments stay where they
 
-      carrier.comments = [...comments, ...(carrier.comments ?? [])];
+        // were, after what precedes it.
+
+        const previous = body[index - 1];
+
+        previous.comments = [
+          ...(previous.comments ?? []),
+
+          ...comments.map((c: any) => ({
+            ...c,
+            leading: false,
+            trailing: true,
+          })),
+        ];
+      } else {
+        // The import was the only statement: the comments become the file's.
+
+        const program = importPath.parent?.node;
+
+        if (program)
+          program.comments = [...comments, ...(program.comments ?? [])];
+      }
 
       node.comments = [];
     };
@@ -901,7 +924,16 @@ export default function transform(
     let inserted = false;
     // A retained RBC specifier must never collide with a bestax import local
     // (possible when one component is both JSX-migrated and value-retained).
-    const bestaxLocals = new Set(ctx.needed.values());
+    // Only a VALUE local can collide at runtime: a type-only specifier the
+    // seeding above recorded, and nothing promoted, binds no value.
+    const bestaxLocals = new Set(
+      [...ctx.needed.entries()]
+        .filter(
+          ([imported]) =>
+            requested.has(imported) || preExistingImports.has(imported)
+        )
+        .map(([, local]) => local)
+    );
     for (const path of rbcImportPaths) {
       const node = path.node;
       const keepSpecifiers = (node.specifiers ?? []).filter((spec: any) => {
diff --git a/bestax-migrate/src/types.ts b/bestax-migrate/src/types.ts
index d50e79a45..04905c896 100644
--- a/bestax-migrate/src/types.ts
+++ b/bestax-migrate/src/types.ts
@@ -38,6 +38,17 @@ export interface PropAction {
    * bare boolean `name` when `value` is omitted.
    */
   booleanToProp?: { name: string; value?: string };
+  /**
+   * Replace a boolean (valueless / `true`) attribute with this Bulma class,
+   * merged into `className` — for a modifier bestax has no prop for but
+   * Bulma v1 still ships. A `false` value is dropped; a dynamic one is a TODO.
+   */
+  toClass?: string;
+  /**
+   * Replace a literal string attribute with `prefix + value` merged into
+   * `className` (`isSize="large"` → `is-large`). A dynamic value is a TODO.
+   */
+  toClassPrefix?: string;
   /** Remove the attribute entirely. */
   drop?: boolean;
   /** Leave the attribute as-is and attach a TODO with this hint. */
diff --git a/skills/bestax-migrate/references/bloomer/prop-map.md b/skills/bestax-migrate/references/bloomer/prop-map.md
index 8d51e00c1..f36c425c2 100644
--- a/skills/bestax-migrate/references/bloomer/prop-map.md
+++ b/skills/bestax-migrate/references/bloomer/prop-map.md
@@ -118,9 +118,11 @@ the `tag` you gave) that bloomer rendered.
 A few bestax parts extend only React's HTML attributes and take no Bulma helper props at all:
 `Pagination.Previous`/`Next`/`Ellipsis`, `Navbar.Dropdown`/`DropdownMenu`/`Divider`,
 `Panel.Heading`/`Tabs`/`Block`, `Tabs.List`/`Item`, `Message.Header`/`Body` and the `Modal`
-parts. A bloomer helper on one of those is removed with a TODO naming the Bulma class to add
-instead (`is-pulled-right`, `m-0`, `is-hidden-mobile`, …), since Bulma v1 still ships every one
-of them.
+parts. A bloomer helper on one of those becomes the Bulma class in `className` (`is-pulled-right`,
+`m-0`, `is-hidden-mobile`, …), since Bulma v1 still ships every one of them; only a dynamic
+value is flagged. The same conversion covers the modifiers bestax has no prop for anywhere —
+`Hero isBold`, `Media isSize`, `Subtitle isSpaced`, `Input isActive`, `PanelBlock isWrapped`,
+`LevelItem isFlexible`, `NavbarDivider isBoxed`, the pagination parts' `isActive`/`isFocused`.
 
 ## Refs
 
diff --git a/skills/bestax-migrate/references/bloomer/unmappables.md b/skills/bestax-migrate/references/bloomer/unmappables.md
index 8c7af75e9..74b42f4a0 100644
--- a/skills/bestax-migrate/references/bloomer/unmappables.md
+++ b/skills/bestax-migrate/references/bloomer/unmappables.md
@@ -143,30 +143,34 @@ few elements, and bestax declares `isFullWidth` on exactly those — `Button`, `
 `Tabs` — where it passes through. Elsewhere, drop it, or add `className="is-fullwidth"` if your
 own CSS styled the class.
 
+## Modifiers bestax has no prop for — converted to classes
+
+Bulma v1 still ships every one of these, so the codemod writes the class into `className`
+instead of leaving a TODO: `Hero isBold` → `className="is-bold"`, `isHalfHeight` →
+`is-halfheight`, `Media isSize="large"` → `is-large`, `Subtitle isSpaced` → `is-spaced`,
+`Input isActive` → `is-active`, `NavbarLink isActive` → `is-active`, `PageLink`/`PageControl`/
+`PageEllipsis` `isActive`/`isFocused`, `PanelBlock isWrapped` → `is-wrapped`, `LevelItem
+isFlexible` → `is-flexible`, `NavbarDropdown`/`NavbarDivider` `isBoxed` → `is-boxed`. The same
+goes for a universal helper on a part that takes no helper props (`Pagination.Previous`/`Next`/
+`Ellipsis`, `Navbar.Dropdown`/`DropdownMenu`/`Divider`, `Panel.Heading`/`Tabs`/`Block`,
+`Tabs.List`/`Item`, `Message.Header`/`Body`, the `Modal` parts): `isPulled="right"` →
+`is-pulled-right`, `isMarginless` → `m-0`, `isHidden="mobile"` → `is-hidden-mobile`. A dynamic
+value, or a dynamic `className` the class cannot be spliced into, is flagged with the class to add.
+
 ## Props with no counterpart
 
-Each of these is left in place with a TODO naming the class to add instead:
-
-| prop                      | on                                                                                 | what to do                                                                               |
-| ------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- |
-| `isBold`                  | `Hero`                                                                             | `className="is-bold"` (Bulma v1 still ships it)                                          |
-| `isHalfHeight`            | `Hero`                                                                             | `className="is-halfheight"` — bestax's `size` has no half-height                         |
-| `isSize="large"`          | `Media`                                                                            | `className="is-large"`                                                                   |
-| `isSpaced`                | `Subtitle`                                                                         | `className="is-spaced"` — only `Title` has `isSpaced`                                    |
-| `isActive`                | `Input`                                                                            | `className="is-active"`                                                                  |
-| `isActive`, `isFocused`   | `PageLink`, `PageControl`, `PageEllipsis`                                          | `className="is-active"` / `"is-focused"`                                                 |
-| `isActive`                | `NavbarLink`                                                                       | `className="is-active"`                                                                  |
-| `isHoverable`             | `NavbarItem` without `hasDropdown`                                                 | move to the `Navbar.Dropdown`, or `className="is-hoverable"`                             |
-| `isBoxed`                 | `NavbarDropdown`, `NavbarDivider`                                                  | `className="is-boxed"`                                                                   |
-| `isWrapped`               | `PanelBlock` with `href`                                                           | `className="is-wrapped"` (a block without `href` stays plain markup and keeps the class) |
-| `isFlexible`              | `LevelItem`                                                                        | `className="is-flexible"`                                                                |
-| `hasAddons="fullwidth"`   | `Field`                                                                            | `hasAddons` plus `className="has-addons-fullwidth"`                                      |
-| `isAlign`                 | `TabList`                                                                          | set `align` on the `<Tabs>` — Bulma aligns the container                                 |
-| `isGrid`                  | `Columns`                                                                          | Bulma removed `columns.is-grid` in 0.5; use `isMultiline` with sized columns, or `Grid`  |
-| `href`                    | `CardFooterItem`, `CardHeaderIcon`, `Delete`, `DropdownItem`                       | put an `<a>` inside, or handle it in `onClick`                                           |
-| `href={expr}` (dynamic)   | `Button`, `LevelItem` and the other components that switched to an `<a>` on `href` | bloomer decided the element at runtime; set `as` conditionally by hand                   |
-| `href`                    | `NavbarItem hasDropdown`                                                           | bestax's `Navbar.Dropdown` is the container; put the `href` on the `Navbar.Link` inside  |
-| `isRatio` beside `isSize` | `Image`                                                                            | bestax's one `size` took the fixed size; restore the ratio if that was the point         |
+Each of these is left in place with a TODO:
+
+| prop                      | on                                                                                 | what to do                                                                              |
+| ------------------------- | ---------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
+| `isHoverable`             | `NavbarItem` without `hasDropdown`                                                 | move to the `Navbar.Dropdown`, or `className="is-hoverable"`                            |
+| `hasAddons="fullwidth"`   | `Field`                                                                            | `hasAddons` plus `className="has-addons-fullwidth"`                                     |
+| `isAlign`                 | `TabList`                                                                          | set `align` on the `<Tabs>` — Bulma aligns the container                                |
+| `isGrid`                  | `Columns`                                                                          | Bulma removed `columns.is-grid` in 0.5; use `isMultiline` with sized columns, or `Grid` |
+| `href`                    | `CardFooterItem`, `CardHeaderIcon`, `Delete`, `DropdownItem`                       | put an `<a>` inside, or handle it in `onClick`                                          |
+| `href={expr}` (dynamic)   | `Button`, `LevelItem` and the other components that switched to an `<a>` on `href` | bloomer decided the element at runtime; set `as` conditionally by hand                  |
+| `href`                    | `NavbarItem hasDropdown`                                                           | bestax's `Navbar.Dropdown` is the container; put the `href` on the `Navbar.Link` inside |
+| `isRatio` beside `isSize` | `Image`                                                                            | bestax's one `size` took the fixed size; restore the ratio if that was the point        |
 
 ## `component:MenuLink`, `component:Breadcrumb`, `component:Page` — lists bestax renders itself
 
@@ -178,14 +182,6 @@ shapes it cannot fold: a `MenuLink` sharing its `<li>` with other content, a `<u
 attributes, and a `Page` whose link sits in an expression or beside siblings — remove the wrapper
 by hand, or the lists nest.
 
-## Helper props on parts that take none
-
-`Pagination.Previous`/`Next`/`Ellipsis`, `Navbar.Dropdown`/`DropdownMenu`/`Divider`,
-`Panel.Heading`/`Tabs`/`Block`, `Tabs.List`/`Item`, `Message.Header`/`Body` and the `Modal`
-parts extend only React's HTML attributes. A bloomer helper on one of them (`isPulled`,
-`isMarginless`, `isHidden`, `hasTextAlign`, …) is removed with a TODO naming the Bulma class —
-add it as `className`; Bulma v1 ships every one of them.
-
 ## `prop:isLink` — beside `isColor`
 
 `isLink` is Bulma's `is-link` colour. Alone it becomes `color="link"`; beside an `isColor` there

From 11e1b7ac23c5cfd680208440319e2389f3f3c0cb Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 11:38:51 -0400
Subject: [PATCH 11/18] fix(bestax-migrate): keep an icon's own name over one
 parsed from its classes

bloomer forwarded HTML props, so an Icon could already carry `name`;
the parsed icon props now go through the duplicate-refusing writer, in
every source that shares the parser.
---
 .../src/sources/_shared/specials-utils.ts      | 18 ++++++++++++------
 .../sources/bloomer/__tests__/specials.test.ts | 10 ++++++++++
 bestax-migrate/src/sources/bloomer/specials.ts |  2 +-
 bestax-migrate/src/sources/rbx/specials.ts     |  2 +-
 .../sources/react-bulma-components/specials.ts |  2 +-
 5 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/bestax-migrate/src/sources/_shared/specials-utils.ts b/bestax-migrate/src/sources/_shared/specials-utils.ts
index cdd598bec..e7960160e 100644
--- a/bestax-migrate/src/sources/_shared/specials-utils.ts
+++ b/bestax-migrate/src/sources/_shared/specials-utils.ts
@@ -10,6 +10,7 @@
 
 import type { ASTPath } from 'jscodeshift';
 import type { PropAction } from '../../types.js';
+import { addAttrOnce } from './props.js';
 import {
   addAttr,
   addTodo,
@@ -241,18 +242,23 @@ export function parseIconClasses(className: string): ParsedIconClasses | null {
  */
 export function applyIconProps(
   ctx: TransformContext,
+  path: ASTPath<any>,
   element: any,
   parsed: ParsedIconClasses
 ): void {
   const { j } = ctx;
-  addAttr(element, makeAttr(j, 'name', parsed.name));
-  if (parsed.library) addAttr(element, makeAttr(j, 'library', parsed.library));
-  if (parsed.variant) addAttr(element, makeAttr(j, 'variant', parsed.variant));
+  // The source forwarded HTML props, so the element may already carry a
+  // `name` (or any of these): the existing one is kept and the clash named,
+  // rather than writing a duplicate attribute.
+  const once = (attr: any) =>
+    addAttrOnce(ctx, path, element, 'className', attr);
+  once(makeAttr(j, 'name', parsed.name));
+  if (parsed.library) once(makeAttr(j, 'library', parsed.library));
+  if (parsed.variant) once(makeAttr(j, 'variant', parsed.variant));
   if (parsed.features.length === 1) {
-    addAttr(element, makeAttr(j, 'features', parsed.features[0]));
+    once(makeAttr(j, 'features', parsed.features[0]));
   } else if (parsed.features.length > 1) {
-    addAttr(
-      element,
+    once(
       j.jsxAttribute(
         j.jsxIdentifier('features'),
         j.jsxExpressionContainer(
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
index bc72ff57c..4b3118280 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
@@ -443,6 +443,16 @@ describe('bloomer navigation handlers', () => {
     expect(output).toContain('<span className="label is-small">x</span>');
   });
 
+  it('keeps a name bloomer forwarded rather than writing a second one', () => {
+    const { output, rules } = migrate(
+      dyn('Icon', '<Icon className="fas fa-home" name="glyph" />')
+    );
+    expect(rules).toEqual(['prop:className']);
+    expect(jsx(output)).toContain(
+      '<Icon name="glyph" library="fa" variant="solid" />'
+    );
+  });
+
   it('names the children a className-driven Icon removes', () => {
     const { output, rules } = migrate(
       dyn('Icon', '<Icon className="fas fa-home"><span>fallback</span></Icon>')
diff --git a/bestax-migrate/src/sources/bloomer/specials.ts b/bestax-migrate/src/sources/bloomer/specials.ts
index 5b43f1de4..3b67eb7f7 100644
--- a/bestax-migrate/src/sources/bloomer/specials.ts
+++ b/bestax-migrate/src/sources/bloomer/specials.ts
@@ -203,7 +203,7 @@ function iconFromClasses(
     // An app's own class on the glyph has no home on bestax's Icon props;
     // keeping the child keeps it.
     if (parsed && parsed.leftovers.length === 0) {
-      applyIconProps(ctx, element, parsed);
+      applyIconProps(ctx, path, element, parsed);
       return;
     }
   }
diff --git a/bestax-migrate/src/sources/rbx/specials.ts b/bestax-migrate/src/sources/rbx/specials.ts
index cf3770aea..b4c5cf24f 100644
--- a/bestax-migrate/src/sources/rbx/specials.ts
+++ b/bestax-migrate/src/sources/rbx/specials.ts
@@ -200,7 +200,7 @@ const SPECIALS: Record<string, SpecialHandler> = {
         // An app's own class on the <i> has no home on bestax's glyph, so
         // the child is kept (and flagged below) rather than losing it.
         if (parsed && parsed.leftovers.length === 0) {
-          applyIconProps(ctx, element, parsed);
+          applyIconProps(ctx, path, element, parsed);
           return {};
         }
       }
diff --git a/bestax-migrate/src/sources/react-bulma-components/specials.ts b/bestax-migrate/src/sources/react-bulma-components/specials.ts
index 182896112..6ef2641e4 100644
--- a/bestax-migrate/src/sources/react-bulma-components/specials.ts
+++ b/bestax-migrate/src/sources/react-bulma-components/specials.ts
@@ -556,7 +556,7 @@ const SPECIALS: Record<string, SpecialHandler> = {
       return {};
     }
     if (!findAttr(element, 'name') && !findAttr(element, 'icon')) {
-      applyIconProps(ctx, element, parsed);
+      applyIconProps(ctx, path, element, parsed);
       return {};
     }
     element.children = [];

From afd2274e42894b7f37575b002b642a0793193155 Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 15:21:59 -0400
Subject: [PATCH 12/18] fix(bestax-migrate): read a falsy PanelBlock href as no
 anchor, like the rest

---
 .../src/sources/bloomer/__tests__/specials.test.ts     | 10 ++++++++++
 bestax-migrate/src/sources/bloomer/specials.ts         |  9 ++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
index 4b3118280..f6e1849df 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
@@ -548,6 +548,16 @@ describe('bloomer navigation handlers', () => {
     expect(link.output).toContain('<Dropdown.Item href="/x">x</Dropdown.Item>');
   });
 
+  it('treats a falsy PanelBlock href as no anchor', () => {
+    const { output, rules } = migrate(
+      dyn('PanelBlock', '<PanelBlock href="" isActive>x</PanelBlock>')
+    );
+    expect(rules).toEqual([]);
+    expect(output).toContain(
+      '<div className="panel-block is-active" href="">x</div>'
+    );
+  });
+
   it('keeps a PanelBlock without href as the plain block bloomer rendered', () => {
     const plain = migrate(
       dyn('PanelBlock', '<PanelBlock isActive isWrapped>x</PanelBlock>')
diff --git a/bestax-migrate/src/sources/bloomer/specials.ts b/bestax-migrate/src/sources/bloomer/specials.ts
index 3b67eb7f7..c5377b4ae 100644
--- a/bestax-migrate/src/sources/bloomer/specials.ts
+++ b/bestax-migrate/src/sources/bloomer/specials.ts
@@ -697,7 +697,14 @@ const SPECIALS: Record<string, SpecialHandler> = {
    * is the bestax component — the rest stays the plain block it was.
    */
   'panel-block'(ctx, path, element) {
-    if (findAttr(element, 'href')) {
+    // The same rule as anchorWhenHref: bloomer chose the anchor with
+    // `props.href ? 'a' : tag`, so an empty or false href is no anchor.
+    const hrefAttr = findAttr(element, 'href');
+    const hrefLiteral = hrefAttr ? literalValueOf(hrefAttr) : undefined;
+    const anchored =
+      hrefAttr !== undefined &&
+      (hrefLiteral!.kind === 'expression' || Boolean(hrefLiteral!.value));
+    if (anchored) {
       return { handledProps: anchorWhenHref(ctx, path, element) };
     }
     const cls = join(

From 748d67331477a926333a9118ecf081a10405052b Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 15:37:03 -0400
Subject: [PATCH 13/18] fix(bestax-migrate): keep spread order through folds
 and drop a falsy href

Several wrapper spreads now move across as one block in source order, so
their precedence survives; a statically falsy href, which selected no
anchor in bloomer, is dropped rather than left on a <div> or a component
that types href as a string. The type-only collision test now exercises
the reservation path it was written for.
---
 .../src/sources/_shared/specials-utils.ts     | 24 +++++++-------
 .../bloomer/__tests__/specials.test.ts        | 27 ++++++++++-----
 .../bloomer/__tests__/transform.test.ts       | 10 ++++--
 .../src/sources/bloomer/specials.ts           | 33 ++++++++++++++-----
 4 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/bestax-migrate/src/sources/_shared/specials-utils.ts b/bestax-migrate/src/sources/_shared/specials-utils.ts
index e7960160e..2e337d36f 100644
--- a/bestax-migrate/src/sources/_shared/specials-utils.ts
+++ b/bestax-migrate/src/sources/_shared/specials-utils.ts
@@ -401,18 +401,20 @@ export function makeStructuralHelpers(strip: AttrStrip) {
     const accepted = Array.isArray(expected) ? expected : [expected];
     if (!childPath || !accepted.includes(childPath.join('.'))) return null;
 
+    // Spreads have no name to collide on; they move across as written — as
+    // one block, in source order, placed FIRST so the child's own explicit
+    // props still win over them, the same rule the named branch keeps.
+    const spreads = (element.openingElement.attributes ?? []).filter(
+      (a: any) => a.type === 'JSXSpreadAttribute'
+    );
+    for (const spread of spreads) removeAttr(element, spread);
+    if (spreads.length > 0) {
+      child.openingElement.attributes = [
+        ...spreads,
+        ...(child.openingElement.attributes ?? []),
+      ];
+    }
     for (const attr of [...(element.openingElement.attributes ?? [])]) {
-      if (attr.type === 'JSXSpreadAttribute') {
-        // A spread has no name to collide on; it moves across as written —
-        // but FIRST, so the child's own explicit props still win over it,
-        // the same rule the named branch below keeps.
-        removeAttr(element, attr);
-        child.openingElement.attributes = [
-          attr,
-          ...(child.openingElement.attributes ?? []),
-        ];
-        continue;
-      }
       const name: string = attr.name.name;
       if (findAttr(child, name)) {
         addTodo(
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
index f6e1849df..7baf4829b 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
@@ -85,6 +85,21 @@ describe('bloomer plain-element handlers', () => {
     );
   });
 
+  it('keeps several wrapper spreads in source order when folding', () => {
+    const page = migrate(
+      "import { Page, PageLink } from 'bloomer';\nexport const A = (p: Record<string, any>) => <Page {...p.first} {...p.second}><PageLink>1</PageLink></Page>;\n"
+    );
+    expect(page.output).toContain(
+      '<Pagination.Link {...p.first} {...p.second}>1</Pagination.Link>'
+    );
+    const menu = migrate(
+      'import { MenuLink } from \'bloomer\';\nexport const A = (p: Record<string, any>) => <li {...p.first} {...p.second} id="x"><MenuLink href="/">h</MenuLink></li>;\n'
+    );
+    expect(menu.output).toContain(
+      '<Menu.Item {...p.first} {...p.second} href="/" id="x">h</Menu.Item>'
+    );
+  });
+
   it('names the Page attributes a fold moves onto the link', () => {
     const { output, rules } = migrate(
       dyn(
@@ -317,7 +332,7 @@ describe('bloomer navigation handlers', () => {
   it('treats an empty or false href the way bloomer did — no anchor', () => {
     const empty = migrate(dyn('Button', '<Button href="">x</Button>'));
     expect(empty.rules).toEqual([]);
-    expect(empty.output).toContain('<Button href="">x</Button>');
+    expect(empty.output).toContain('<Button>x</Button>');
     const off = migrate(
       dyn(
         'DropdownItem',
@@ -325,14 +340,12 @@ describe('bloomer navigation handlers', () => {
       )
     );
     expect(jsx(off.output)).toContain(
-      '<Dropdown.Item href={false} as="span">x</Dropdown.Item>'
+      '<Dropdown.Item as="span">x</Dropdown.Item>'
     );
     const bare = migrate(
       dyn('NavbarItem', '<NavbarItem href={0}>x</NavbarItem>')
     );
-    expect(jsx(bare.output)).toContain(
-      '<Navbar.Item href={0} as="div">x</Navbar.Item>'
-    );
+    expect(jsx(bare.output)).toContain('<Navbar.Item as="div">x</Navbar.Item>');
   });
 
   it('merges helpers on a helperless target into className, dropping false ones', () => {
@@ -553,9 +566,7 @@ describe('bloomer navigation handlers', () => {
       dyn('PanelBlock', '<PanelBlock href="" isActive>x</PanelBlock>')
     );
     expect(rules).toEqual([]);
-    expect(output).toContain(
-      '<div className="panel-block is-active" href="">x</div>'
-    );
+    expect(output).toContain('<div className="panel-block is-active">x</div>');
   });
 
   it('keeps a PanelBlock without href as the plain block bloomer rendered', () => {
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
index 1bf73f8cb..fe437da91 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/transform.test.ts
@@ -184,13 +184,17 @@ describe('bloomer imports', () => {
   });
 
   it('does not count a type-only local as a runtime collision', () => {
+    // `Box` is a type-only local here; the migrated component reuses that
+    // name as the value import (no `BulmaBox` alias), and the type import
+    // for `Title` stays a type.
     const { output, rules } = migrate(
-      "import { type Box } from '@allxsmith/bestax-bulma';\nimport { Tile } from 'bloomer';\nexport type B = Box;\nexport const A = () => <Tile />;\n"
+      "import { type Box, type Title } from '@allxsmith/bestax-bulma';\nimport { Box as BloomerBox, Tile } from 'bloomer';\nexport type T = Title;\nexport const A = (b: Box) => <><BloomerBox /><Tile /></>;\n"
     );
     expect(rules).toEqual(['component:Tile']);
-    expect(output).toContain(
-      "import { type Box } from '@allxsmith/bestax-bulma';"
+    expect(output).toMatch(
+      /import \{ Box, type Title \} from ['"]@allxsmith\/bestax-bulma['"]/
     );
+    expect(output).toContain('<><Box /><Tile /></>');
     expect(output).toContain("import { Tile } from 'bloomer';");
   });
 
diff --git a/bestax-migrate/src/sources/bloomer/specials.ts b/bestax-migrate/src/sources/bloomer/specials.ts
index c5377b4ae..c206c6e08 100644
--- a/bestax-migrate/src/sources/bloomer/specials.ts
+++ b/bestax-migrate/src/sources/bloomer/specials.ts
@@ -147,12 +147,18 @@ function anchorWhenHref(
   const tagAttr = findAttr(element, 'tag');
   const hrefAttr = findAttr(element, 'href');
   // bloomer chose the element with `props.href ? 'a' : tag`, so an empty or
-  // false `href` kept the default element — the attribute is left as written.
+  // false `href` kept the default element. It selected nothing, and bestax
+  // types `href` as a string where it exists at all, so it is dropped.
   const hrefLiteral = hrefAttr ? literalValueOf(hrefAttr) : undefined;
   const hrefFalsy =
     hrefLiteral !== undefined &&
     hrefLiteral.kind !== 'expression' &&
     !hrefLiteral.value;
+  if (hrefAttr && hrefFalsy) {
+    removeAttr(element, hrefAttr);
+    handled.push('href');
+    ctx.dirty = true;
+  }
   if (hrefAttr && !hrefFalsy) {
     const literal = hrefLiteral!;
     if (literal.kind === 'expression') {
@@ -611,15 +617,19 @@ const SPECIALS: Record<string, SpecialHandler> = {
         (c: any) => !(c.type === 'JSXText' && c.value.trim() === '')
       );
       if (siblings.length === 1 && siblings[0] === element) {
+        // Spreads first, as one block in source order, so the link's own
+        // props still win over them.
+        const spreads = (parent.openingElement.attributes ?? []).filter(
+          (a: any) => a.type === 'JSXSpreadAttribute'
+        );
+        if (spreads.length > 0) {
+          element.openingElement.attributes = [
+            ...spreads,
+            ...(element.openingElement.attributes ?? []),
+          ];
+        }
         for (const attr of [...(parent.openingElement.attributes ?? [])]) {
-          if (attr.type === 'JSXSpreadAttribute') {
-            // Before the link's own props, so those still win over it.
-            element.openingElement.attributes = [
-              attr,
-              ...(element.openingElement.attributes ?? []),
-            ];
-            continue;
-          }
+          if (attr.type === 'JSXSpreadAttribute') continue;
           const name =
             attr.type === 'JSXAttribute' ? attr.name.name : undefined;
           if (name && findAttr(element, name)) {
@@ -704,6 +714,11 @@ const SPECIALS: Record<string, SpecialHandler> = {
     const anchored =
       hrefAttr !== undefined &&
       (hrefLiteral!.kind === 'expression' || Boolean(hrefLiteral!.value));
+    if (hrefAttr && !anchored) {
+      // A falsy href selected nothing in bloomer and cannot sit on a <div>.
+      removeAttr(element, hrefAttr);
+      ctx.dirty = true;
+    }
     if (anchored) {
       return { handledProps: anchorWhenHref(ctx, path, element) };
     }

From bde01def252b3915a0960a7ce632a229b2002205 Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 15:46:56 -0400
Subject: [PATCH 14/18] fix(bestax-migrate): let the Bulma class win over a
 spread, and name what changes element
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A plain-element rewrite now writes its className after any spread, so a
className inside the spread cannot override the class the element exists
for, and says so; a Page fold counts a spread among the attributes it
moves; and a MenuLink's id/style/title/role/tabIndex — which bestax's
Menu.Item puts on its <li> rather than the <a> bloomer rendered — are
named, as is an <li> className that moves onto the anchor.
---
 .../src/sources/_shared/specials-utils.ts     | 29 ++++++++----
 .../bloomer/__tests__/specials.test.ts        | 32 ++++++++++++-
 .../src/sources/bloomer/specials.ts           | 45 ++++++++++++++++---
 3 files changed, 90 insertions(+), 16 deletions(-)

diff --git a/bestax-migrate/src/sources/_shared/specials-utils.ts b/bestax-migrate/src/sources/_shared/specials-utils.ts
index 2e337d36f..7f925b378 100644
--- a/bestax-migrate/src/sources/_shared/specials-utils.ts
+++ b/bestax-migrate/src/sources/_shared/specials-utils.ts
@@ -358,15 +358,28 @@ export function makeStructuralHelpers(strip: AttrStrip) {
   ): SpecialResult {
     const merged = mergeClassName(ctx, path, element, className, where);
     const kept = new Set(strip(ctx, path, attributesOf(element), where));
-    // Spread attributes pass through untouched, in place: they are the
-    // caller's own props, and a plain element takes them as readily as the
-    // component did. `attributesOf` filters them out, so dropping them here
-    // lost `{...rest}` with no TODO.
-    const rest = (element.openingElement.attributes ?? []).filter(
-      (a: any) => a.type === 'JSXSpreadAttribute' || kept.has(a)
-    );
+    // Spread attributes pass through untouched: they are the caller's own
+    // props, and a plain element takes them as readily as the component did.
+    // They go FIRST, so the Bulma class the element exists for is written
+    // after them and cannot be overridden by a `className` inside a spread —
+    // the source merged such a className with its own; a plain element
+    // cannot, so the spread is named.
+    const all = element.openingElement.attributes ?? [];
+    const spreads = all.filter((a: any) => a.type === 'JSXSpreadAttribute');
+    const named = all.filter((a: any) => kept.has(a));
+    if (spreads.length > 0 && merged) {
+      addTodo(
+        ctx,
+        path,
+        'plain-element',
+        `${where} became a plain <${tag}> with \`className="${merged}"\`; a \`className\` inside its spread prop(s) would have been merged with that class by the source, and is overridden here — merge it by hand`
+      );
+    }
+    const attrs = merged
+      ? [...spreads, makeAttr(ctx.j, 'className', merged), ...named]
+      : [...spreads, ...named];
     path.replace(
-      plainElement(ctx.j, tag, merged, rest, element.children ?? [])
+      plainElement(ctx.j, tag, undefined, attrs, element.children ?? [])
     );
     ctx.dirty = true;
     return { replaced: true };
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
index 7baf4829b..7e4282968 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
@@ -74,8 +74,11 @@ describe('bloomer plain-element handlers', () => {
     const help = migrate(
       dyn('Help', '<Help isColor="danger" {...p.rest}>x</Help>')
     );
+    // The spread goes first so the Bulma class the element exists for wins,
+    // and the possible className inside the spread is named.
+    expect(help.rules).toEqual(['plain-element']);
     expect(help.output).toContain(
-      '<p className="help is-danger" {...p.rest}>x</p>'
+      '<p {...p.rest} className="help is-danger">x</p>'
     );
     const page = migrate(
       "import { Page, PageLink } from 'bloomer';\nexport const A = (p: Record<string, any>) => <Page {...p.li}><PageLink>1</PageLink></Page>;\n"
@@ -83,6 +86,7 @@ describe('bloomer plain-element handlers', () => {
     expect(page.output).toContain(
       '<Pagination.Link {...p.li}>1</Pagination.Link>'
     );
+    expect(page.rules).toEqual(['component:Page']);
   });
 
   it('keeps several wrapper spreads in source order when folding', () => {
@@ -98,6 +102,7 @@ describe('bloomer plain-element handlers', () => {
     expect(menu.output).toContain(
       '<Menu.Item {...p.first} {...p.second} href="/" id="x">h</Menu.Item>'
     );
+    expect(menu.rules).toEqual(['component:MenuLink']);
   });
 
   it('names the Page attributes a fold moves onto the link', () => {
@@ -395,6 +400,29 @@ describe('bloomer navigation handlers', () => {
     );
   });
 
+  it('names the MenuLink attributes that change element under Menu.Item', () => {
+    const link = migrate(
+      dyn(
+        'MenuLink',
+        '<MenuLink id="x" style={p.s} className="c" href="/">h</MenuLink>'
+      )
+    );
+    expect(link.rules).toEqual(['component:MenuLink']);
+    expect(link.output).toContain(
+      '<Menu.Item id="x" style={p.s} className="c" href="/">h</Menu.Item>'
+    );
+    const li = migrate(
+      dyn(
+        'MenuLink',
+        '<li className="mine" id="y"><MenuLink href="/">h</MenuLink></li>'
+      )
+    );
+    expect(li.rules).toEqual(['component:MenuLink']);
+    expect(li.output).toContain(
+      '<Menu.Item href="/" className="mine" id="y">h</Menu.Item>'
+    );
+  });
+
   it('folds the literal <li> bloomer wrote around a MenuLink', () => {
     const one = migrate(
       dyn(
@@ -402,7 +430,7 @@ describe('bloomer navigation handlers', () => {
         '<MenuList><li className="x"><MenuLink isActive href="/">Home</MenuLink></li></MenuList>'
       )
     );
-    expect(one.rules).toEqual([]);
+    expect(one.rules).toEqual(['component:MenuLink']);
     expect(one.output).toContain(
       '<Menu.List><Menu.Item active href="/" className="x">Home</Menu.Item></Menu.List>'
     );
diff --git a/bestax-migrate/src/sources/bloomer/specials.ts b/bestax-migrate/src/sources/bloomer/specials.ts
index c206c6e08..cde55c4bc 100644
--- a/bestax-migrate/src/sources/bloomer/specials.ts
+++ b/bestax-migrate/src/sources/bloomer/specials.ts
@@ -606,6 +606,21 @@ const SPECIALS: Record<string, SpecialHandler> = {
    * folds onto the item, carrying its attributes, or the list nests.
    */
   'menu-link'(ctx, path, element) {
+    // bestax's Menu.Item puts `id`, `style`, `title`, `role` and `tabIndex`
+    // on its <li> and everything else (className included) on the <a>;
+    // bloomer's MenuLink WAS the <a>, so those five change element.
+    const LI_PROPS = ['id', 'style', 'title', 'role', 'tabIndex'];
+    const toLi = attributesOf(element)
+      .map((a: any) => a.name.name as string)
+      .filter((n: string) => LI_PROPS.includes(n));
+    if (toLi.length > 0) {
+      addTodo(
+        ctx,
+        path,
+        'component:MenuLink',
+        `${toLi.map((n: string) => `\`${n}\``).join(', ')} sat on bloomer's <a>; bestax's \`Menu.Item\` puts ${toLi.length === 1 ? 'it' : 'them'} on the <li> it renders around the link — move ${toLi.length === 1 ? 'it' : 'them'} by hand if the anchor is what you targeted`
+      );
+    }
     const parentPath = path.parent;
     const parent = parentPath?.node;
     if (
@@ -617,6 +632,22 @@ const SPECIALS: Record<string, SpecialHandler> = {
         (c: any) => !(c.type === 'JSXText' && c.value.trim() === '')
       );
       if (siblings.length === 1 && siblings[0] === element) {
+        // The <li>'s own className and spreads land on the <a> after the
+        // fold (Menu.Item puts className there); its id/style/title/role/
+        // tabIndex land back on the <li>. Name what changes node.
+        const liMoved = (parent.openingElement.attributes ?? [])
+          .map((a: any): string =>
+            a.type === 'JSXSpreadAttribute' ? 'a spread' : a.name.name
+          )
+          .filter((n: string) => n === 'className' || n === 'a spread');
+        if (liMoved.length > 0) {
+          addTodo(
+            ctx,
+            path,
+            'component:MenuLink',
+            `${liMoved.map((n: string) => (n === 'a spread' ? n : `\`${n}\``)).join(', ')} on the <li> around this MenuLink now applies to the <a> that \`Menu.Item\` renders inside its own <li> — move ${liMoved.length === 1 ? 'it' : 'them'} by hand if the <li> is what you styled`
+          );
+        }
         // Spreads first, as one block in source order, so the link's own
         // props still win over them.
         const spreads = (parent.openingElement.attributes ?? []).filter(
@@ -906,19 +937,21 @@ const SPECIALS: Record<string, SpecialHandler> = {
       // the ellipsis <span>), so whatever else sat on this <li> — a class, an
       // id, a helper prop — lands on a different element after the fold.
       // It is moved rather than lost, and named.
-      const moved = attributesOf(element)
+      const moved = (element.openingElement.attributes ?? [])
         .map((a: any): string =>
-          a.name.type === 'JSXNamespacedName'
-            ? `${a.name.namespace.name}:${a.name.name.name}`
-            : a.name.name
+          a.type === 'JSXSpreadAttribute'
+            ? 'a spread'
+            : a.name.type === 'JSXNamespacedName'
+              ? `${a.name.namespace.name}:${a.name.name.name}`
+              : a.name.name
         )
-        .filter(n => n !== 'tag' && n !== 'key');
+        .filter((n: string) => n !== 'tag' && n !== 'key');
       if (moved.length > 0) {
         addTodo(
           ctx,
           path,
           'component:Page',
-          `${moved.map(n => `\`${n}\``).join(', ')} sat on the Page's <li>; bestax's \`Pagination.Link\` and \`Pagination.Ellipsis\` render their own <li> and put props on the element inside it, so ${moved.length === 1 ? 'it now applies' : 'they now apply'} there — move ${moved.length === 1 ? 'it' : 'them'} by hand if the <li> is what you styled`
+          `${moved.map((n: string) => `\`${n}\``).join(', ')} sat on the Page's <li>; bestax's \`Pagination.Link\` and \`Pagination.Ellipsis\` render their own <li> and put props on the element inside it, so ${moved.length === 1 ? 'it now applies' : 'they now apply'} there — move ${moved.length === 1 ? 'it' : 'them'} by hand if the <li> is what you styled`
         );
       }
       // The child renders the <li> itself, so a `tag` on the wrapper has

From c1528d0281ba7ae1e629390146c8b77fbcb1431d Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 15:55:04 -0400
Subject: [PATCH 15/18] fix(bestax-migrate): keep every attribute's place on a
 plain element, class after the last spread

Grouping spreads first changed the precedence of a named attribute that
preceded one in the source; only the required Bulma class needs to follow
the last spread, so that is the one thing that moves.
---
 .../src/sources/_shared/specials-utils.ts     | 29 ++++++++++++-------
 .../bloomer/__tests__/specials.test.ts        |  7 +++++
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/bestax-migrate/src/sources/_shared/specials-utils.ts b/bestax-migrate/src/sources/_shared/specials-utils.ts
index 7f925b378..33c2cea5c 100644
--- a/bestax-migrate/src/sources/_shared/specials-utils.ts
+++ b/bestax-migrate/src/sources/_shared/specials-utils.ts
@@ -358,15 +358,18 @@ export function makeStructuralHelpers(strip: AttrStrip) {
   ): SpecialResult {
     const merged = mergeClassName(ctx, path, element, className, where);
     const kept = new Set(strip(ctx, path, attributesOf(element), where));
-    // Spread attributes pass through untouched: they are the caller's own
-    // props, and a plain element takes them as readily as the component did.
-    // They go FIRST, so the Bulma class the element exists for is written
-    // after them and cannot be overridden by a `className` inside a spread —
-    // the source merged such a className with its own; a plain element
-    // cannot, so the spread is named.
+    // Spread attributes pass through untouched, in their original places:
+    // they are the caller's own props, and a plain element takes them as
+    // readily as the component did, with the same JSX precedence. The Bulma
+    // class the element exists for is written right AFTER the last spread,
+    // so a `className` inside a spread cannot override it — the source
+    // merged such a className with its own; a plain element cannot, so the
+    // spread is named.
     const all = element.openingElement.attributes ?? [];
     const spreads = all.filter((a: any) => a.type === 'JSXSpreadAttribute');
-    const named = all.filter((a: any) => kept.has(a));
+    const ordered = all.filter(
+      (a: any) => a.type === 'JSXSpreadAttribute' || kept.has(a)
+    );
     if (spreads.length > 0 && merged) {
       addTodo(
         ctx,
@@ -375,9 +378,15 @@ export function makeStructuralHelpers(strip: AttrStrip) {
         `${where} became a plain <${tag}> with \`className="${merged}"\`; a \`className\` inside its spread prop(s) would have been merged with that class by the source, and is overridden here — merge it by hand`
       );
     }
-    const attrs = merged
-      ? [...spreads, makeAttr(ctx.j, 'className', merged), ...named]
-      : [...spreads, ...named];
+    const attrs = [...ordered];
+    if (merged) {
+      const lastSpread = attrs.reduce(
+        (last: number, a: any, i: number) =>
+          a.type === 'JSXSpreadAttribute' ? i : last,
+        -1
+      );
+      attrs.splice(lastSpread + 1, 0, makeAttr(ctx.j, 'className', merged));
+    }
     path.replace(
       plainElement(ctx.j, tag, undefined, attrs, element.children ?? [])
     );
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
index 7e4282968..94d53e2c6 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
@@ -80,6 +80,13 @@ describe('bloomer plain-element handlers', () => {
     expect(help.output).toContain(
       '<p {...p.rest} className="help is-danger">x</p>'
     );
+    // …while every other attribute keeps its place, and so its precedence.
+    const ordered = migrate(
+      dyn('Help', '<Help id="first" {...p.rest} title="t">x</Help>')
+    );
+    expect(ordered.output).toContain(
+      '<p id="first" {...p.rest} className="help" title="t">x</p>'
+    );
     const page = migrate(
       "import { Page, PageLink } from 'bloomer';\nexport const A = (p: Record<string, any>) => <Page {...p.li}><PageLink>1</PageLink></Page>;\n"
     );

From 7973889b849343e677f8582f920be00fe48b1bd7 Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 18:17:05 -0400
Subject: [PATCH 16/18] fix(bestax-migrate): mirror bloomer's PageControl
 direction rule exactly

bloomer emitted pagination-next only when isNext && !isPrevious and
pagination-previous whenever !isNext, so both props set together rendered
no direction and a dynamic isPrevious decided it at runtime; both are now
flagged instead of becoming Pagination.Next. The prop-map intro no longer
calls the converted isActive modifiers TODOs.
---
 bestax-mcp/data/skills.json                   |  2 +-
 .../bloomer/__tests__/specials.test.ts        | 25 ++++++++++++++++
 .../src/sources/bloomer/specials.ts           | 30 +++++++++++++++----
 .../references/bloomer/prop-map.md            |  2 +-
 4 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/bestax-mcp/data/skills.json b/bestax-mcp/data/skills.json
index a63cbff5d..7d7440b6c 100644
--- a/bestax-mcp/data/skills.json
+++ b/bestax-mcp/data/skills.json
@@ -93,7 +93,7 @@
         {
           "id": "bloomer-prop-map",
           "file": "references/bloomer/prop-map.md",
-          "bytes": 18333
+          "bytes": 18392
         },
         {
           "id": "bloomer-unmappables",
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
index 94d53e2c6..29891281f 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
@@ -649,6 +649,31 @@ describe('bloomer navigation handlers', () => {
     expect(dynamic.output).toContain('<Pagination align={p.a}>');
   });
 
+  it('flags a PageControl whose isPrevious conflicts with or qualifies isNext', () => {
+    const both = migrate(
+      dyn('PageControl', '<PageControl isNext isPrevious>x</PageControl>')
+    );
+    expect(both.rules).toEqual(['prop:isPrevious']);
+    expect(both.output).toContain(
+      '<Pagination.Previous>x</Pagination.Previous>'
+    );
+    const qualified = migrate(
+      dyn('PageControl', '<PageControl isNext isPrevious={p.q}>x</PageControl>')
+    );
+    expect(qualified.rules).toEqual(['prop:isPrevious']);
+    expect(qualified.output).toContain(
+      '<Pagination.Previous>x</Pagination.Previous>'
+    );
+    const off = migrate(
+      dyn(
+        'PageControl',
+        '<PageControl isNext isPrevious={false}>x</PageControl>'
+      )
+    );
+    expect(off.rules).toEqual([]);
+    expect(off.output).toContain('<Pagination.Next>x</Pagination.Next>');
+  });
+
   it('flags a dynamic PageControl direction and drops isPrevious', () => {
     const { output, rules } = migrate(
       dyn('PageControl', '<PageControl isNext={p.n} isPrevious>x</PageControl>')
diff --git a/bestax-migrate/src/sources/bloomer/specials.ts b/bestax-migrate/src/sources/bloomer/specials.ts
index cde55c4bc..e4da0a8ca 100644
--- a/bestax-migrate/src/sources/bloomer/specials.ts
+++ b/bestax-migrate/src/sources/bloomer/specials.ts
@@ -876,24 +876,44 @@ const SPECIALS: Record<string, SpecialHandler> = {
     return { handledProps: ['isAlign'] };
   },
 
-  /** bloomer's PageControl is the previous link unless `isNext` says otherwise. */
+  /**
+   * bloomer's PageControl: `pagination-next` only when `isNext && !isPrevious`,
+   * `pagination-previous` whenever `!isNext` — so a link with both set
+   * rendered no direction at all, and a dynamic `isPrevious` beside `isNext`
+   * decided it at runtime. Both are flagged rather than guessed.
+   */
   'page-control'(ctx, path, element) {
     const nextAttr = findAttr(element, 'isNext');
     const prevAttr = findAttr(element, 'isPrevious');
-    const resolved = nextAttr ? resolveBooleanish(nextAttr) : 'falsy';
+    const next = nextAttr ? resolveBooleanish(nextAttr) : 'falsy';
+    const prev = prevAttr ? resolveBooleanish(prevAttr) : 'falsy';
     if (nextAttr) removeAttr(element, nextAttr);
     if (prevAttr) removeAttr(element, prevAttr);
     ctx.dirty = true;
     let target = 'Pagination.Previous';
-    if (resolved === 'truthy') {
-      target = 'Pagination.Next';
-    } else if (resolved === 'expression') {
+    if (next === 'expression') {
       addTodo(
         ctx,
         path,
         'prop:isNext',
         'dynamic PageControl `isNext`; pick between `<Pagination.Previous>` and `<Pagination.Next>` by hand'
       );
+    } else if (next === 'truthy' && prev === 'truthy') {
+      addTodo(
+        ctx,
+        path,
+        'prop:isPrevious',
+        'PageControl had both `isNext` and `isPrevious`, which bloomer rendered with no direction class at all; it became `<Pagination.Previous>` — pick the direction you meant'
+      );
+    } else if (next === 'truthy' && prev === 'expression') {
+      addTodo(
+        ctx,
+        path,
+        'prop:isPrevious',
+        'dynamic PageControl `isPrevious` beside `isNext`; bloomer showed the next link only while it was false — pick between `<Pagination.Previous>` and `<Pagination.Next>` by hand'
+      );
+    } else if (next === 'truthy') {
+      target = 'Pagination.Next';
     }
     return { target, handledProps: ['isNext', 'isPrevious'] };
   },
diff --git a/skills/bestax-migrate/references/bloomer/prop-map.md b/skills/bestax-migrate/references/bloomer/prop-map.md
index f36c425c2..98098c026 100644
--- a/skills/bestax-migrate/references/bloomer/prop-map.md
+++ b/skills/bestax-migrate/references/bloomer/prop-map.md
@@ -6,7 +6,7 @@ Most of bloomer's boolean modifiers are already bestax's names — `isLoading`,
 the tables below: `isActive` becomes `active` on the components whose bestax counterpart
 names it that way, `isFullWidth` survives only where bestax declares it, and a few
 (`Input isActive`, `NavbarLink isActive`, `PageLink isActive`) have no counterpart and become
-a TODO. What else changes is the value-carrying props, the helper props every component
+the Bulma class in `className` instead (see the end of this page). What else changes is the value-carrying props, the helper props every component
 inherited from `withHelpersModifiers`, and the two props bestax spells differently on every
 component.
 

From 95c0693ee5bd70e4b634d920a414b7de8bdb8df0 Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 21:55:56 -0400
Subject: [PATCH 17/18] fix(bestax-migrate): carry bloomer's markup through
 nine cases a deep review found
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Modal.Close is written with variant="floating", the overlay button bloomer
always rendered (bestax defaults to the card-header delete X and honours
size only when floating). Menu.Item's li/a split is corrected in both
directions: className and data-testid join the five props that change
element, and the fold warning no longer claims a className moves when it
does not. Navbar.Divider, Pagination.Ellipsis and Dropdown.Divider write
their own className last or take no props at all, so a class is never
written on them — the helpers are named instead. textColor is claimed per
component like isSize, since it is not a universal helper; elsewhere
hasTextColor becomes the has-text-* class. Button and Image accept as, and
Bulma does style is-fullwidth on images, inputs and textareas, so both
TODO texts stopped claiming otherwise. A breadcrumb that cannot fold its
<ul> says so, and a dynamic href names the escape hatch its target has.

Shared with the siblings: a re-exported destructured alias keeps its
declaration, a TS qualified name is not a value use of a namespace, a
pruned import's comments follow the declaration that survives, and
react-bulma-components keeps spreads through its plain-element rewrites —
with the Bulma class written after the last spread for every caller.
---
 bestax-mcp/data/skills.json                   |   2 +-
 .../src/sources/_shared/jsx-utils.ts          |  10 +-
 .../src/sources/_shared/specials-utils.ts     |  11 +-
 .../__testfixtures__/compounds.output.tsx     |   2 +-
 .../__testfixtures__/icons-images.output.tsx  |   2 +-
 .../todos-unmappable.output.tsx               |   2 +-
 .../bloomer/__tests__/specials.test.ts        |  11 +-
 .../bloomer/__tests__/value-unions.test.ts    |   6 +-
 bestax-migrate/src/sources/bloomer/mapping.ts | 300 +++++++++++++++---
 .../src/sources/bloomer/specials.ts           |  61 +++-
 .../src/sources/bloomer/transform.ts          |  58 +++-
 bestax-migrate/src/sources/rbx/transform.ts   |  34 +-
 .../react-bulma-components/specials.ts        | 106 ++++---
 .../react-bulma-components/transform.ts       |  34 +-
 .../references/bloomer/prop-map.md            |   3 +-
 15 files changed, 507 insertions(+), 135 deletions(-)

diff --git a/bestax-mcp/data/skills.json b/bestax-mcp/data/skills.json
index 7d7440b6c..a9cc0f455 100644
--- a/bestax-mcp/data/skills.json
+++ b/bestax-mcp/data/skills.json
@@ -93,7 +93,7 @@
         {
           "id": "bloomer-prop-map",
           "file": "references/bloomer/prop-map.md",
-          "bytes": 18392
+          "bytes": 18411
         },
         {
           "id": "bloomer-unmappables",
diff --git a/bestax-migrate/src/sources/_shared/jsx-utils.ts b/bestax-migrate/src/sources/_shared/jsx-utils.ts
index a9dde600d..b0b4ebebf 100644
--- a/bestax-migrate/src/sources/_shared/jsx-utils.ts
+++ b/bestax-migrate/src/sources/_shared/jsx-utils.ts
@@ -257,7 +257,15 @@ export function plainElement(
 ): any {
   const allAttrs = [...attrs];
   if (className) {
-    allAttrs.unshift(makeAttr(j, 'className', className));
+    // After the LAST spread, so a `className` inside one cannot replace the
+    // class this element exists for, while every other attribute keeps the
+    // place (and so the precedence) it had in the source.
+    const lastSpread = allAttrs.reduce(
+      (last: number, a: any, i: number) =>
+        a.type === 'JSXSpreadAttribute' ? i : last,
+      -1
+    );
+    allAttrs.splice(lastSpread + 1, 0, makeAttr(j, 'className', className));
   }
   const opening = j.jsxOpeningElement(
     j.jsxIdentifier(tag),
diff --git a/bestax-migrate/src/sources/_shared/specials-utils.ts b/bestax-migrate/src/sources/_shared/specials-utils.ts
index 33c2cea5c..93949a6f9 100644
--- a/bestax-migrate/src/sources/_shared/specials-utils.ts
+++ b/bestax-migrate/src/sources/_shared/specials-utils.ts
@@ -378,17 +378,8 @@ export function makeStructuralHelpers(strip: AttrStrip) {
         `${where} became a plain <${tag}> with \`className="${merged}"\`; a \`className\` inside its spread prop(s) would have been merged with that class by the source, and is overridden here — merge it by hand`
       );
     }
-    const attrs = [...ordered];
-    if (merged) {
-      const lastSpread = attrs.reduce(
-        (last: number, a: any, i: number) =>
-          a.type === 'JSXSpreadAttribute' ? i : last,
-        -1
-      );
-      attrs.splice(lastSpread + 1, 0, makeAttr(ctx.j, 'className', merged));
-    }
     path.replace(
-      plainElement(ctx.j, tag, undefined, attrs, element.children ?? [])
+      plainElement(ctx.j, tag, merged, ordered, element.children ?? [])
     );
     ctx.dirty = true;
     return { replaced: true };
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.output.tsx
index bf510ac4c..676d71bf8 100644
--- a/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.output.tsx
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/compounds.output.tsx
@@ -64,7 +64,7 @@ export const Compounds = ({ open }: { open: boolean }) => (
         <Modal.Card.Body>Content</Modal.Card.Body>
         <Modal.Card.Foot>Footer</Modal.Card.Foot>
       </Modal.Card>
-      <Modal.Close size="large" />
+      <Modal.Close size="large" variant="floating" />
     </Modal>
     <Navbar transparent>
       <Navbar.Brand>
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.output.tsx
index 70e975d9c..8dda664c8 100644
--- a/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.output.tsx
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/icons-images.output.tsx
@@ -15,7 +15,7 @@ export const Media = ({ cls }: { cls: string }) => (
       variant="solid"
       features={["fa-spin", "fa-lg"]} />
     <Icon><i className="fas fa-home mine" aria-hidden="true" /></Icon>
-    <Icon textColor="danger"><i className="fa fa-github" aria-hidden="true" /></Icon>
+    <Icon className="has-text-danger"><i className="fa fa-github" aria-hidden="true" /></Icon>
     <Icon className="is-right"><i className={cls} aria-hidden="true" /></Icon>
     <Icon size="small"><i aria-hidden="true" /></Icon>
     <Image size="128x128" src="a.png" />
diff --git a/bestax-migrate/src/sources/bloomer/__testfixtures__/todos-unmappable.output.tsx b/bestax-migrate/src/sources/bloomer/__testfixtures__/todos-unmappable.output.tsx
index cdc3725ed..651b1d475 100644
--- a/bestax-migrate/src/sources/bloomer/__testfixtures__/todos-unmappable.output.tsx
+++ b/bestax-migrate/src/sources/bloomer/__testfixtures__/todos-unmappable.output.tsx
@@ -18,7 +18,7 @@ const Helped = withHelpersModifiers(Plain);
 // TODO(bestax-migrate): `isGrid` — Bulma removed `columns.is-grid` in 0.5; bestax `Columns` has no equivalent — use `isMultiline` with sized Columns, or the Grid component
 // TODO(bestax-migrate): `isLink` alongside `isColor`; bestax `Button` has one `color`, so pick `color="link"` or the other colour by hand
 // TODO(bestax-migrate): `render` — bloomer's `render` prop injected the computed props into your own renderer; bestax has no render-prop escape hatch — render the markup directly (`useBulmaClasses` yields the helper classes) or wrap the component (https://bestax.io/docs/api/helpers/usebulmaclasses)
-// TODO(bestax-migrate): `isFullWidth` — bestax declares `isFullWidth` on Button, Select, Table and Tabs only, and Bulma's `is-fullwidth` has no effect elsewhere — drop it, or add className="is-fullwidth" if your own CSS relied on the class
+// TODO(bestax-migrate): `isFullWidth` — Bulma defines `is-fullwidth` only on buttons, files, images, inputs, textareas, selects, tables and tabs, and this is none of them — drop it, or add className="is-fullwidth" if your own CSS styled the class
 export const Leftovers = ({ go }: { go: (p: object) => JSX.Element }) => (
   <Box tag="section">
     <Tile isAncestor>
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
index 29891281f..65d03a775 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
@@ -109,6 +109,7 @@ describe('bloomer plain-element handlers', () => {
     expect(menu.output).toContain(
       '<Menu.Item {...p.first} {...p.second} href="/" id="x">h</Menu.Item>'
     );
+    // A spread may hold either kind of prop, so it is named.
     expect(menu.rules).toEqual(['component:MenuLink']);
   });
 
@@ -377,8 +378,9 @@ describe('bloomer navigation handlers', () => {
     const { output, rules } = migrate(
       dyn('Button', '<Button href={p.url} tag="span">x</Button>')
     );
-    expect(rules).toEqual(['prop:href', 'prop:tag']);
-    expect(jsx(output)).toContain('<Button href={p.url} tag="span">x</Button>');
+    // `tag` carries over as `as`; only the runtime-decided element is flagged.
+    expect(rules).toEqual(['prop:href']);
+    expect(jsx(output)).toContain('<Button href={p.url} as="span">x</Button>');
     const level = migrate(
       dyn('LevelItem', '<LevelItem href={p.url}>x</LevelItem>')
     );
@@ -424,7 +426,8 @@ describe('bloomer navigation handlers', () => {
         '<li className="mine" id="y"><MenuLink href="/">h</MenuLink></li>'
       )
     );
-    expect(li.rules).toEqual(['component:MenuLink']);
+    // className and id stay on the <li> that Menu.Item renders: nothing moved.
+    expect(li.rules).toEqual([]);
     expect(li.output).toContain(
       '<Menu.Item href="/" className="mine" id="y">h</Menu.Item>'
     );
@@ -437,7 +440,7 @@ describe('bloomer navigation handlers', () => {
         '<MenuList><li className="x"><MenuLink isActive href="/">Home</MenuLink></li></MenuList>'
       )
     );
-    expect(one.rules).toEqual(['component:MenuLink']);
+    expect(one.rules).toEqual([]);
     expect(one.output).toContain(
       '<Menu.List><Menu.Item active href="/" className="x">Home</Menu.Item></Menu.List>'
     );
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/value-unions.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/value-unions.test.ts
index 1c5a5adab..e7f3ab6b9 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/value-unions.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/value-unions.test.ts
@@ -105,10 +105,14 @@ describe('bloomer helper values that the mapping passes through unchanged', () =
       v => !(validColors as readonly string[]).includes(v)
     );
     expect(missing.sort()).toEqual([...KNOWN_UNSUPPORTED_SHADES].sort());
-    const todo = UNIVERSAL_PROPS.hasTextColor.valueTodo ?? {};
+    // `hasTextColor` is claimed per component wherever the target declares
+    // `textColor`; those rows carry the shade guard.
+    const todo = MAPPING.Box.props?.hasTextColor?.valueTodo ?? {};
     expect(Object.keys(todo).sort()).toEqual(
       [...KNOWN_UNSUPPORTED_SHADES].sort()
     );
+    // …and everywhere else it becomes the Bulma class instead.
+    expect(UNIVERSAL_PROPS.hasTextColor.toClassPrefix).toBe('has-text-');
   });
 
   it("names every colour outside Message's six-colour union", () => {
diff --git a/bestax-migrate/src/sources/bloomer/mapping.ts b/bestax-migrate/src/sources/bloomer/mapping.ts
index 5cab5bdbb..4ecc27b67 100644
--- a/bestax-migrate/src/sources/bloomer/mapping.ts
+++ b/bestax-migrate/src/sources/bloomer/mapping.ts
@@ -65,10 +65,23 @@ export const RENDER_TODO: PropAction = {
  * Tabs opt in with `FULLWIDTH_OK`.
  */
 const FULLWIDTH_TODO: PropAction = {
-  todo: 'bestax declares `isFullWidth` on Button, Select, Table and Tabs only, and Bulma\'s `is-fullwidth` has no effect elsewhere — drop it, or add className="is-fullwidth" if your own CSS relied on the class',
+  todo: 'Bulma defines `is-fullwidth` only on buttons, files, images, inputs, textareas, selects, tables and tabs, and this is none of them — drop it, or add className="is-fullwidth" if your own CSS styled the class',
 };
+/** Bulma styles `is-fullwidth` here, but bestax declares no prop for it. */
+const FULLWIDTH_CLASS: PropAction = { toClass: 'is-fullwidth' };
 const FULLWIDTH_OK: PropAction = {};
 
+/**
+ * `textColor` is not part of `BulmaClassesProps` — each component declares it
+ * by hand, and many do not. So it is claimed per component, like `isSize`;
+ * everywhere else bloomer's `hasTextColor` becomes the Bulma class it stood
+ * for, which every element takes.
+ */
+const TEXT_COLOR_OK: PropAction = {
+  rename: 'textColor',
+  valueTodo: SHADE_TODO,
+};
+
 const size: PropAction = { rename: 'size' };
 const color: PropAction = { rename: 'color' };
 const active: PropAction = { rename: 'active' };
@@ -104,7 +117,8 @@ const MESSAGE_COLOR_TODO = Object.fromEntries(
 export const UNIVERSAL_PROPS: Record<string, PropAction> = {
   // --- typography ----------------------------------------------------------
   hasTextAlign: { rename: 'textAlign' }, // left | right | centered — same union
-  hasTextColor: { rename: 'textColor', valueTodo: SHADE_TODO },
+  // Per-component maps override this wherever the target declares `textColor`.
+  hasTextColor: { toClassPrefix: 'has-text-' },
 
   // --- float / overlay -----------------------------------------------------
   isPulled: { rename: 'float' }, // left | right — same union
@@ -141,13 +155,26 @@ export const RESPONSIVE_PROPS: Record<string, string | null> = {
  * on. The transform turns each into a TODO naming the Bulma class instead of
  * emitting an excess-property type error.
  */
+/**
+ * Targets whose `className` cannot be used: `Navbar.Divider` and
+ * `Pagination.Ellipsis` spread `{...props}` AFTER their own className (so one
+ * written here replaces the class that makes them work), and
+ * `Dropdown.Divider` is a bare `React.FC` that declares no props at all and
+ * renders its own `<hr>` regardless. A helper on one of these is named, never
+ * converted.
+ */
+export const NO_CLASSNAME_TARGETS = new Set([
+  'Navbar.Divider',
+  'Pagination.Ellipsis',
+  'Dropdown.Divider',
+]);
+
 export const HELPERLESS_TARGETS = new Set([
   'Pagination.Previous',
   'Pagination.Next',
-  'Pagination.Ellipsis',
   'Navbar.Dropdown',
   'Navbar.DropdownMenu',
-  'Navbar.Divider',
+  'Dropdown.Divider',
   'Panel.Heading',
   'Panel.Tabs',
   'Panel.Block',
@@ -213,6 +240,7 @@ export const MAPPING: Record<string, ComponentMapping> = {
     status: 'mapped',
     target: 'Columns',
     props: {
+      hasTextColor: TEXT_COLOR_OK,
       isMobile: {},
       isDesktop: {},
       isGapless: {},
@@ -226,14 +254,23 @@ export const MAPPING: Record<string, ComponentMapping> = {
   },
   // `isSize` / `isOffset` (numbers, fractions, or a per-breakpoint object)
   // are flattened by responsive.ts, which the `column` special opts into.
-  Column: { status: 'mapped', target: 'Column', special: 'column' },
+  Column: {
+    status: 'mapped',
+    target: 'Column',
+    special: 'column',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
   Tile: {
     status: 'todo',
     todo: `Bulma v1 replaced tiles with the Grid/Cell components — see ${DOCS}/api/grid and the migration guide ${DOCS}/guides/getting-started/migration/bulma-0-9-to-1`,
   },
 
   // ---- elements -----------------------------------------------------------
-  Box: { status: 'mapped', target: 'Box' },
+  Box: {
+    status: 'mapped',
+    target: 'Box',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
   Button: {
     status: 'mapped',
     target: 'Button',
@@ -251,13 +288,20 @@ export const MAPPING: Record<string, ComponentMapping> = {
       isFocused: {},
       isLoading: {},
       isFullWidth: FULLWIDTH_OK,
+      tag: TAG_AS,
+      hasTextColor: TEXT_COLOR_OK,
     },
   },
-  Content: { status: 'mapped', target: 'Content', props: { isSize: size } },
+  Content: {
+    status: 'mapped',
+    target: 'Content',
+    props: { hasTextColor: TEXT_COLOR_OK, isSize: size },
+  },
   Delete: {
     status: 'mapped',
     target: 'Delete',
     props: {
+      hasTextColor: TEXT_COLOR_OK,
       isSize: size,
       href: {
         todo: 'bestax `Delete` renders a <button> and has no anchor form; wrap it in an <a>, or handle the navigation in `onClick`',
@@ -270,11 +314,20 @@ export const MAPPING: Record<string, ComponentMapping> = {
     special: 'icon',
     props: { isSize: size },
   },
-  Image: { status: 'mapped', target: 'Image', special: 'image' },
+  Image: {
+    status: 'mapped',
+    target: 'Image',
+    special: 'image',
+    props: {
+      tag: TAG_AS,
+      hasTextColor: TEXT_COLOR_OK,
+      isFullWidth: FULLWIDTH_CLASS,
+    },
+  },
   Notification: {
     status: 'mapped',
     target: 'Notification',
-    props: { isColor: color },
+    props: { hasTextColor: TEXT_COLOR_OK, isColor: color },
   },
   Progress: {
     status: 'mapped',
@@ -301,13 +354,19 @@ export const MAPPING: Record<string, ComponentMapping> = {
   Title: {
     status: 'mapped',
     target: 'Title',
-    props: { isSize: size, isSpaced: {}, tag: TAG_AS },
+    props: {
+      hasTextColor: TEXT_COLOR_OK,
+      isSize: size,
+      isSpaced: {},
+      tag: TAG_AS,
+    },
   },
   Subtitle: {
     status: 'mapped',
     target: 'SubTitle',
     special: 'subtitle',
     props: {
+      hasTextColor: TEXT_COLOR_OK,
       isSize: size,
       isSpaced: { toClass: 'is-spaced' },
       tag: TAG_AS,
@@ -318,13 +377,26 @@ export const MAPPING: Record<string, ComponentMapping> = {
   Heading: { status: 'partial', special: 'heading' },
 
   // ---- form ---------------------------------------------------------------
-  Checkbox: { status: 'mapped', target: 'Checkbox' },
-  Radio: { status: 'mapped', target: 'Radio' },
+  Checkbox: {
+    status: 'mapped',
+    target: 'Checkbox',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
+  Radio: {
+    status: 'mapped',
+    target: 'Radio',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
   Control: {
     status: 'mapped',
     target: 'Control',
     special: 'control-icons',
-    props: { isExpanded: {}, isLoading: {}, tag: TAG_AS },
+    props: {
+      hasTextColor: TEXT_COLOR_OK,
+      isExpanded: {},
+      isLoading: {},
+      tag: TAG_AS,
+    },
   },
   Help: { status: 'mapped', special: 'help' },
   // bloomer's form elements were bare <input>/<select>/<textarea>s; bestax's
@@ -335,6 +407,7 @@ export const MAPPING: Record<string, ComponentMapping> = {
     status: 'mapped',
     target: 'InputBase',
     props: {
+      isFullWidth: FULLWIDTH_CLASS,
       isColor: color,
       isSize: size,
       isHovered: {},
@@ -356,12 +429,19 @@ export const MAPPING: Record<string, ComponentMapping> = {
   TextArea: {
     status: 'mapped',
     target: 'TextAreaBase',
-    props: { isSize: size, isActive: {}, isHovered: {}, isFocused: {} },
+    props: {
+      isFullWidth: FULLWIDTH_CLASS,
+      isSize: size,
+      isActive: {},
+      isHovered: {},
+      isFocused: {},
+    },
   },
   Field: {
     status: 'mapped',
     target: 'Field',
     props: {
+      hasTextColor: TEXT_COLOR_OK,
       // `boolean | 'right' | 'centered'` on both sides.
       isGrouped: { rename: 'grouped' },
       hasAddons: {
@@ -373,11 +453,16 @@ export const MAPPING: Record<string, ComponentMapping> = {
       isHorizontal: { rename: 'horizontal' },
     },
   },
-  FieldBody: { status: 'mapped', target: 'Field.Body' },
+  FieldBody: {
+    status: 'mapped',
+    target: 'Field.Body',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
   FieldLabel: {
     status: 'mapped',
     target: 'Field.Label',
     props: {
+      hasTextColor: TEXT_COLOR_OK,
       isSize: size,
       isNormal: { booleanToProp: { name: 'size', value: 'normal' } },
     },
@@ -400,25 +485,51 @@ export const MAPPING: Record<string, ComponentMapping> = {
   BreadcrumbItem: { status: 'mapped', special: 'breadcrumb-item' },
 
   // ---- card ---------------------------------------------------------------
-  Card: { status: 'mapped', target: 'Card' },
-  CardImage: { status: 'mapped', target: 'Card.Image' },
-  CardContent: { status: 'mapped', target: 'Card.Content' },
-  CardHeader: { status: 'mapped', target: 'Card.Header' },
-  CardHeaderTitle: { status: 'mapped', target: 'Card.Header.Title' },
+  Card: {
+    status: 'mapped',
+    target: 'Card',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
+  CardImage: {
+    status: 'mapped',
+    target: 'Card.Image',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
+  CardContent: {
+    status: 'mapped',
+    target: 'Card.Content',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
+  CardHeader: {
+    status: 'mapped',
+    target: 'Card.Header',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
+  CardHeaderTitle: {
+    status: 'mapped',
+    target: 'Card.Header.Title',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
   CardHeaderIcon: {
     status: 'mapped',
     target: 'Card.Header.Icon',
     props: {
+      hasTextColor: TEXT_COLOR_OK,
       href: {
         todo: 'bestax `Card.Header.Icon` renders a <button>; put an <a> inside it, or handle the navigation in `onClick`',
       },
     },
   },
-  CardFooter: { status: 'mapped', target: 'Card.Footer' },
+  CardFooter: {
+    status: 'mapped',
+    target: 'Card.Footer',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
   CardFooterItem: {
     status: 'mapped',
     target: 'Card.FooterItem',
     props: {
+      hasTextColor: TEXT_COLOR_OK,
       href: {
         todo: 'bestax `Card.FooterItem` renders a <span> with no anchor form; put an <a> inside it',
       },
@@ -465,23 +576,55 @@ export const MAPPING: Record<string, ComponentMapping> = {
   DropdownDivider: { status: 'mapped', target: 'Dropdown.Divider' },
 
   // ---- level / media / menu / message ------------------------------------
-  Level: { status: 'mapped', target: 'Level', props: { isMobile: {} } },
+  Level: {
+    status: 'mapped',
+    target: 'Level',
+    props: { hasTextColor: TEXT_COLOR_OK, isMobile: {} },
+  },
   LevelItem: {
     status: 'mapped',
     target: 'Level.Item',
     special: 'level-item',
-    props: { isFlexible: { toClass: 'is-flexible' }, tag: TAG_AS },
+    props: {
+      hasTextColor: TEXT_COLOR_OK,
+      isFlexible: { toClass: 'is-flexible' },
+      tag: TAG_AS,
+    },
+  },
+  LevelLeft: {
+    status: 'mapped',
+    target: 'Level.Left',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
+  LevelRight: {
+    status: 'mapped',
+    target: 'Level.Right',
+    props: { hasTextColor: TEXT_COLOR_OK },
   },
-  LevelLeft: { status: 'mapped', target: 'Level.Left' },
-  LevelRight: { status: 'mapped', target: 'Level.Right' },
   Media: {
     status: 'mapped',
     target: 'Media',
-    props: { isSize: { toClassPrefix: 'is-' }, tag: TAG_AS },
+    props: {
+      hasTextColor: TEXT_COLOR_OK,
+      isSize: { toClassPrefix: 'is-' },
+      tag: TAG_AS,
+    },
+  },
+  MediaContent: {
+    status: 'mapped',
+    target: 'Media.Content',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
+  MediaLeft: {
+    status: 'mapped',
+    target: 'Media.Left',
+    props: { hasTextColor: TEXT_COLOR_OK, tag: TAG_AS },
+  },
+  MediaRight: {
+    status: 'mapped',
+    target: 'Media.Right',
+    props: { hasTextColor: TEXT_COLOR_OK },
   },
-  MediaContent: { status: 'mapped', target: 'Media.Content' },
-  MediaLeft: { status: 'mapped', target: 'Media.Left', props: { tag: TAG_AS } },
-  MediaRight: { status: 'mapped', target: 'Media.Right' },
   Menu: { status: 'mapped', target: 'Menu' },
   MenuLabel: { status: 'mapped', target: 'Menu.Label' },
   MenuList: { status: 'mapped', target: 'Menu.List' },
@@ -497,7 +640,10 @@ export const MAPPING: Record<string, ComponentMapping> = {
   Message: {
     status: 'mapped',
     target: 'Message',
-    props: { isColor: { rename: 'color', valueTodo: MESSAGE_COLOR_TODO } },
+    props: {
+      hasTextColor: TEXT_COLOR_OK,
+      isColor: { rename: 'color', valueTodo: MESSAGE_COLOR_TODO },
+    },
   },
   MessageHeader: { status: 'mapped', target: 'Message.Header' },
   MessageBody: { status: 'mapped', target: 'Message.Body' },
@@ -507,13 +653,17 @@ export const MAPPING: Record<string, ComponentMapping> = {
     status: 'partial',
     target: 'Modal',
     special: 'modal',
-    props: { isActive: active },
+    props: { hasTextColor: TEXT_COLOR_OK, isActive: active },
   },
   ModalBackground: { status: 'mapped', target: 'Modal.Background' },
   ModalContent: { status: 'mapped', target: 'Modal.Content' },
+  // bestax's Modal.Close defaults to `variant="delete"` (the small X for a
+  // card header) and honours `size` only on the floating variant; bloomer's
+  // ModalClose was always Bulma's `.modal-close` overlay button.
   ModalClose: {
     status: 'mapped',
     target: 'Modal.Close',
+    special: 'modal-close',
     props: { isSize: size },
   },
   ModalCard: { status: 'mapped', target: 'Modal.Card' },
@@ -534,21 +684,36 @@ export const MAPPING: Record<string, ComponentMapping> = {
   Navbar: {
     status: 'mapped',
     target: 'Navbar',
-    props: { isTransparent: { rename: 'transparent' } },
+    props: {
+      hasTextColor: TEXT_COLOR_OK,
+      isTransparent: { rename: 'transparent' },
+    },
+  },
+  NavbarBrand: {
+    status: 'mapped',
+    target: 'Navbar.Brand',
+    props: { hasTextColor: TEXT_COLOR_OK },
   },
-  NavbarBrand: { status: 'mapped', target: 'Navbar.Brand' },
   NavbarBurger: {
     status: 'mapped',
     target: 'Navbar.Burger',
-    props: { isActive: active },
+    props: { hasTextColor: TEXT_COLOR_OK, isActive: active },
   },
   NavbarMenu: {
     status: 'mapped',
     target: 'Navbar.Menu',
-    props: { isActive: active },
+    props: { hasTextColor: TEXT_COLOR_OK, isActive: active },
+  },
+  NavbarStart: {
+    status: 'mapped',
+    target: 'Navbar.Start',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
+  NavbarEnd: {
+    status: 'mapped',
+    target: 'Navbar.End',
+    props: { hasTextColor: TEXT_COLOR_OK },
   },
-  NavbarStart: { status: 'mapped', target: 'Navbar.Start' },
-  NavbarEnd: { status: 'mapped', target: 'Navbar.End' },
   // `hasDropdown` picks between Navbar.Item and the Navbar.Dropdown container.
   NavbarItem: {
     status: 'mapped',
@@ -558,13 +723,21 @@ export const MAPPING: Record<string, ComponentMapping> = {
   NavbarLink: {
     status: 'mapped',
     target: 'Navbar.Link',
-    props: { isActive: { toClass: 'is-active' }, tag: TAG_AS },
+    props: {
+      hasTextColor: TEXT_COLOR_OK,
+      isActive: { toClass: 'is-active' },
+      tag: TAG_AS,
+    },
   },
   NavbarDropdown: { status: 'mapped', special: 'navbar-dropdown' },
   NavbarDivider: {
     status: 'mapped',
     target: 'Navbar.Divider',
-    props: { isBoxed: { toClass: 'is-boxed' } },
+    props: {
+      isBoxed: {
+        todo: 'Bulma v1 scopes navbar `is-boxed` to `.navbar-dropdown`, so there is no `.navbar-divider.is-boxed` to keep — drop it',
+      },
+    },
   },
 
   // ---- pagination ---------------------------------------------------------
@@ -572,7 +745,7 @@ export const MAPPING: Record<string, ComponentMapping> = {
     status: 'mapped',
     target: 'Pagination',
     special: 'pagination',
-    props: { isSize: size },
+    props: { hasTextColor: TEXT_COLOR_OK, isSize: size },
   },
   PageControl: {
     status: 'mapped',
@@ -586,17 +759,26 @@ export const MAPPING: Record<string, ComponentMapping> = {
     status: 'mapped',
     target: 'Pagination.Ellipsis',
     props: {
-      isActive: { toClass: 'is-active' },
-      isFocused: { toClass: 'is-focused' },
+      isActive: {
+        todo: 'bestax `Pagination.Ellipsis` spreads its props after its own className, so a class written here would replace `pagination-ellipsis`; wrap it or restyle by hand if you need `is-active`',
+      },
+      isFocused: {
+        todo: 'bestax `Pagination.Ellipsis` spreads its props after its own className, so a class written here would replace `pagination-ellipsis`; wrap it or restyle by hand if you need `is-focused`',
+      },
     },
   },
   // bestax's Pagination.Link and Pagination.Ellipsis render their own <li>.
   Page: { status: 'mapped', special: 'page' },
-  PageList: { status: 'mapped', target: 'Pagination.List' },
+  PageList: {
+    status: 'mapped',
+    target: 'Pagination.List',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
   PageLink: {
     status: 'mapped',
     target: 'Pagination.Link',
     props: {
+      hasTextColor: TEXT_COLOR_OK,
       isCurrent: active, // bestax's `active` renders Bulma's `is-current`
       isActive: { toClass: 'is-active' },
       isFocused: { toClass: 'is-focused' },
@@ -653,10 +835,18 @@ export const MAPPING: Record<string, ComponentMapping> = {
   Container: {
     status: 'mapped',
     target: 'Container',
-    props: { isFluid: { rename: 'fluid' } },
+    props: { hasTextColor: TEXT_COLOR_OK, isFluid: { rename: 'fluid' } },
+  },
+  Footer: {
+    status: 'mapped',
+    target: 'Footer',
+    props: { hasTextColor: TEXT_COLOR_OK, tag: TAG_AS },
+  },
+  Section: {
+    status: 'mapped',
+    target: 'Section',
+    props: { hasTextColor: TEXT_COLOR_OK, isSize: size },
   },
-  Footer: { status: 'mapped', target: 'Footer', props: { tag: TAG_AS } },
-  Section: { status: 'mapped', target: 'Section', props: { isSize: size } },
   Hero: {
     status: 'mapped',
     target: 'Hero',
@@ -668,10 +858,22 @@ export const MAPPING: Record<string, ComponentMapping> = {
       isBold: { toClass: 'is-bold' },
     },
   },
-  HeroHeader: { status: 'mapped', target: 'Hero.Head' },
-  HeroBody: { status: 'mapped', target: 'Hero.Body' },
+  HeroHeader: {
+    status: 'mapped',
+    target: 'Hero.Head',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
+  HeroBody: {
+    status: 'mapped',
+    target: 'Hero.Body',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
   HeroVideo: { status: 'mapped', special: 'hero-video' },
-  HeroFooter: { status: 'mapped', target: 'Hero.Foot' },
+  HeroFooter: {
+    status: 'mapped',
+    target: 'Hero.Foot',
+    props: { hasTextColor: TEXT_COLOR_OK },
+  },
 
   // ---- the helper HOC -----------------------------------------------------
   withHelpersModifiers: {
diff --git a/bestax-migrate/src/sources/bloomer/specials.ts b/bestax-migrate/src/sources/bloomer/specials.ts
index e4da0a8ca..6f69df9c2 100644
--- a/bestax-migrate/src/sources/bloomer/specials.ts
+++ b/bestax-migrate/src/sources/bloomer/specials.ts
@@ -166,7 +166,9 @@ function anchorWhenHref(
         ctx,
         path,
         'prop:href',
-        `bloomer rendered an <a> only when \`href\` had a value, and this one is dynamic; set \`as\` conditionally by hand${tagAttr ? ' (the `tag` was kept as `as` for the other case)' : ''}`
+        options.setAs
+          ? `bloomer rendered an <a> only when \`href\` had a value, and this one is dynamic; set \`as="a"\` conditionally by hand${tagAttr ? ' (the `tag` beside it becomes `as`, which that conditional has to account for)' : ''}`
+          : `bloomer rendered an <a> only when \`href\` had a value, and this one is dynamic; the bestax target renders an <a> already, so drop the \`href\` where it is empty${tagAttr ? ' — the `tag` beside it is flagged separately' : ''}`
       );
       return handled;
     }
@@ -606,10 +608,19 @@ const SPECIALS: Record<string, SpecialHandler> = {
    * folds onto the item, carrying its attributes, or the list nests.
    */
   'menu-link'(ctx, path, element) {
-    // bestax's Menu.Item puts `id`, `style`, `title`, `role` and `tabIndex`
-    // on its <li> and everything else (className included) on the <a>;
-    // bloomer's MenuLink WAS the <a>, so those five change element.
-    const LI_PROPS = ['id', 'style', 'title', 'role', 'tabIndex'];
+    // bestax's Menu.Item renders <li><a>: `className`, `data-testid`,
+    // `style`, `id`, `title`, `role` and `tabIndex` go on the <li>, and
+    // everything left (`onClick`, `href`, `target`, `aria-*`, …) on the <a>.
+    // bloomer's MenuLink WAS the <a>, so those seven change element.
+    const LI_PROPS = [
+      'className',
+      'data-testid',
+      'id',
+      'style',
+      'title',
+      'role',
+      'tabIndex',
+    ];
     const toLi = attributesOf(element)
       .map((a: any) => a.name.name as string)
       .filter((n: string) => LI_PROPS.includes(n));
@@ -632,14 +643,15 @@ const SPECIALS: Record<string, SpecialHandler> = {
         (c: any) => !(c.type === 'JSXText' && c.value.trim() === '')
       );
       if (siblings.length === 1 && siblings[0] === element) {
-        // The <li>'s own className and spreads land on the <a> after the
-        // fold (Menu.Item puts className there); its id/style/title/role/
-        // tabIndex land back on the <li>. Name what changes node.
+        // The <li>'s className, id, style, title, role and tabIndex land
+        // back on the <li> Menu.Item renders, so those are unchanged; anything
+        // else on it (onClick, aria-*, a spread that may hold either) ends up
+        // on the <a> instead. Name only what actually moves.
         const liMoved = (parent.openingElement.attributes ?? [])
           .map((a: any): string =>
             a.type === 'JSXSpreadAttribute' ? 'a spread' : a.name.name
           )
-          .filter((n: string) => n === 'className' || n === 'a spread');
+          .filter((n: string) => n === 'a spread' || !LI_PROPS.includes(n));
         if (liMoved.length > 0) {
           addTodo(
             ctx,
@@ -714,6 +726,23 @@ const SPECIALS: Record<string, SpecialHandler> = {
       }
       element.children = ul.children ?? [];
       ctx.dirty = true;
+      return {};
+    }
+    // bestax's Breadcrumb renders its own <ul>, so any <ul> left inside it
+    // nests a second one.
+    const nestedList = solid.some(
+      (c: any) =>
+        c.type === 'JSXElement' &&
+        c.openingElement?.name?.type === 'JSXIdentifier' &&
+        c.openingElement.name.name === 'ul'
+    );
+    if (nestedList) {
+      addTodo(
+        ctx,
+        path,
+        'component:Breadcrumb',
+        'bestax `Breadcrumb` renders its own <ul>, and this one holds a <ul> the codemod cannot fold (it is not the only child) — remove the inner list by hand, or the markup nests two'
+      );
     }
     return {};
   },
@@ -1050,6 +1079,20 @@ const SPECIALS: Record<string, SpecialHandler> = {
     return {};
   },
 
+  /**
+   * bloomer's ModalClose always rendered Bulma's `.modal-close` overlay
+   * button. bestax's Modal.Close defaults to `variant="delete"` — the small X
+   * for a card header — and honours `size` only on the floating variant, so
+   * the variant has to be named for the markup to survive.
+   */
+  'modal-close'(ctx, _path, element) {
+    if (!findAttr(element, 'variant')) {
+      addAttr(element, makeAttr(ctx.j, 'variant', 'floating'));
+      ctx.dirty = true;
+    }
+    return {};
+  },
+
   /** Marks the element for the column size pass in responsive.ts. */
   column() {
     return {};
diff --git a/bestax-migrate/src/sources/bloomer/transform.ts b/bestax-migrate/src/sources/bloomer/transform.ts
index c8b8dc6ec..ee28264a1 100644
--- a/bestax-migrate/src/sources/bloomer/transform.ts
+++ b/bestax-migrate/src/sources/bloomer/transform.ts
@@ -27,6 +27,7 @@ import type { TransformOptions } from '../../types.js';
 import {
   HELPERLESS_TARGETS,
   MAPPING,
+  NO_CLASSNAME_TARGETS,
   UNIVERSAL_PROPS,
   helperClassHint,
   resolveMapping,
@@ -447,7 +448,50 @@ export default function transform(
     // Targets that extend only React's HTML attributes take none of bloomer's
     // universal helpers; each becomes a TODO naming the Bulma class rather
     // than an excess-property type error the report never mentions.
-    if (HELPERLESS_TARGETS.has(target)) {
+    // `Navbar.Divider` and `Pagination.Ellipsis` spread their props after
+    // their own className, and `Dropdown.Divider` declares none at all, so a
+    // class cannot be written on any of them: every helper is named instead,
+    // and anything else left on the divider would not compile.
+    if (NO_CLASSNAME_TARGETS.has(target)) {
+      for (const attr of [...attributesOf(element)]) {
+        const name: string = attr.name.name;
+        if (handled.has(name)) continue;
+        const literal = literalValueOf(attr);
+        const cls = helperClassHint(
+          name,
+          literal.kind === 'expression' ? undefined : literal.value
+        );
+        if (!cls) continue;
+        removeAttr(element, attr);
+        handled.add(name);
+        if (literal.kind === 'boolean' && !literal.value) continue;
+        addTodo(
+          ctx,
+          path,
+          `prop:${name}`,
+          `bestax \`${target}\` writes its own className last (or takes no props at all), so the \`${cls}\` class this became cannot be set on it — wrap it, or restyle by hand`
+        );
+      }
+      if (target === 'Dropdown.Divider') {
+        const left = attributesOf(element).filter(
+          (a: any) => !handled.has(a.name.name)
+        );
+        if (left.length > 0) {
+          for (const attr of left) removeAttr(element, attr);
+          ctx.dirty = true;
+          addTodo(
+            ctx,
+            path,
+            'component:DropdownDivider',
+            `bestax \`Dropdown.Divider\` is a bare component that declares no props and renders its own <hr>, so ${left
+              .map((a: any) => `\`${a.name.name}\``)
+              .join(
+                ', '
+              )} could not be carried over — put them on a wrapping element if you need them`
+          );
+        }
+      }
+    } else if (HELPERLESS_TARGETS.has(target)) {
       for (const attr of [...attributesOf(element)]) {
         const name: string = attr.name.name;
         if (handled.has(name)) continue;
@@ -542,6 +586,9 @@ export default function transform(
     ) {
       return;
     }
+    // A TS qualified name (`B.BoxProps` in a type position) is erased at
+    // runtime, so it is not a value use of the namespace at all.
+    if (parentType === 'TSQualifiedName') return;
     // A namespace binding in a real value position. `bloomer.Button` is still a
     // mappable component reference, so fall through to the member-expression
     // branch below with an empty prefix (the namespace itself is not part of
@@ -815,9 +862,14 @@ export default function transform(
 
       const index = body.indexOf(node);
 
+      // The fresh specifiers are merged INTO an existing bestax import when there
+
+      // is one, and the `bestaxImport` node is then discarded — so the comments
+
+      // have to follow the declaration that survives, not the one that does not.
+
       const carrier =
-        bestaxImport ??
-        existingBestax?.node ??
+        (existingBestax ? existingBestax.node : bestaxImport) ??
         (index >= 0 ? body[index + 1] : undefined);
 
       if (carrier) {
diff --git a/bestax-migrate/src/sources/rbx/transform.ts b/bestax-migrate/src/sources/rbx/transform.ts
index 38394df81..95e4b86e7 100644
--- a/bestax-migrate/src/sources/rbx/transform.ts
+++ b/bestax-migrate/src/sources/rbx/transform.ts
@@ -289,6 +289,19 @@ export default function transform(
   const programScope: unknown = root.find(j.Program).paths()[0]?.scope;
   const { register: registerAlias, aliasAt, anyAlias } = makeAliasRegistry();
 
+  /**
+   * Locals a re-export names. Pruning the declaration that binds one of them
+   * (`const { Header } = Card; export { Header };`) leaves the specifier
+   * pointing at nothing, so those declarations are kept: the value-reference
+   * pass rewrites their initialiser to the bestax component, and the export
+   * goes on re-exporting the same member.
+   */
+  const reExported = new Set<string>();
+  root.find(j.ExportSpecifier).forEach(p => {
+    const local = p.node.local ?? p.node.exported;
+    if (local?.type === 'Identifier') reExported.add(local.name);
+  });
+
   // ---- 1b. Resolve `const { Item } = Card` destructuring -----------------
   root.find(j.VariableDeclarator).forEach(path => {
     const node = path.node;
@@ -335,7 +348,14 @@ export default function transform(
         allResolved = false;
       }
     }
-    if (allResolved) {
+    const exportsAnAlias = node.id.properties.some(
+      (prop: any) =>
+        (prop.type === 'ObjectProperty' || prop.type === 'Property') &&
+        prop.value?.type === 'Identifier' &&
+        reExported.has(prop.value.name)
+    );
+
+    if (allResolved && !exportsAnAlias) {
       const declaration = path.parent;
       if (
         declaration?.node?.type === 'VariableDeclaration' &&
@@ -750,6 +770,9 @@ export default function transform(
     ) {
       return;
     }
+    // A TS qualified name (`RBC.ButtonProps` in a type position) is erased at
+    // runtime, so it is not a value use of the namespace at all.
+    if (parentType === 'TSQualifiedName') return;
     // A namespace binding in a real value position. `rbx.Button` is still a
     // mappable component reference, so fall through to the member-expression
     // branch below with an empty prefix (the namespace itself is not part of
@@ -1074,9 +1097,14 @@ export default function transform(
 
       const index = body.indexOf(node);
 
+      // The fresh specifiers are merged INTO an existing bestax import when there
+
+      // is one, and the `bestaxImport` node is then discarded — so the comments
+
+      // have to follow the declaration that survives, not the one that does not.
+
       const carrier =
-        bestaxImport ??
-        existingBestax?.node ??
+        (existingBestax ? existingBestax.node : bestaxImport) ??
         (index >= 0 ? body[index + 1] : undefined);
 
       if (carrier) {
diff --git a/bestax-migrate/src/sources/react-bulma-components/specials.ts b/bestax-migrate/src/sources/react-bulma-components/specials.ts
index 6ef2641e4..41d5c1055 100644
--- a/bestax-migrate/src/sources/react-bulma-components/specials.ts
+++ b/bestax-migrate/src/sources/react-bulma-components/specials.ts
@@ -37,6 +37,27 @@ export type { SpecialResult };
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
+/**
+ * The attributes a plain-element rewrite keeps: the modifier strip decides
+ * which NAMED props survive, and the element's spreads ride along in their
+ * original places — they are the caller's own props, which a plain element
+ * takes as readily as the component did. `attributesOf` filters spreads out,
+ * so passing its result alone dropped `{...rest}` with no TODO.
+ */
+function keptAttrs(
+  ctx: TransformContext,
+  path: ASTPath<any>,
+  element: any,
+  where: string
+): any[] {
+  const kept = new Set(
+    stripModifierProps(ctx, path, attributesOf(element), where)
+  );
+  return (element.openingElement.attributes ?? []).filter(
+    (a: any) => a.type === 'JSXSpreadAttribute' || kept.has(a)
+  );
+}
+
 const stripModifierProps = makeStripModifierProps(
   UNIVERSAL_PROPS,
   RESPONSIVE_BREAKPOINTS
@@ -186,13 +207,18 @@ const SPECIALS: Record<string, SpecialHandler> = {
         subtitleTruthy ? 'heading subtitle' : 'heading',
         'Heading'
       );
-      const rest = stripModifierProps(
-        ctx,
-        path,
-        attributesOf(element).filter(
-          a => !['size', 'weight', 'spaced', 'subtitle'].includes(a.name.name)
-        ),
-        'Heading'
+      const consumed = new Set(
+        stripModifierProps(
+          ctx,
+          path,
+          attributesOf(element).filter(
+            a => !['size', 'weight', 'spaced', 'subtitle'].includes(a.name.name)
+          ),
+          'Heading'
+        )
+      );
+      const rest = (element.openingElement.attributes ?? []).filter(
+        (a: any) => a.type === 'JSXSpreadAttribute' || consumed.has(a)
       );
       const replacement = plainElement(
         ctx.j,
@@ -463,12 +489,7 @@ const SPECIALS: Record<string, SpecialHandler> = {
       }
     }
     className = mergeClassName(ctx, path, element, className, 'Form.Label');
-    const rest = stripModifierProps(
-      ctx,
-      path,
-      attributesOf(element),
-      'Form.Label'
-    );
+    const rest = keptAttrs(ctx, path, element, 'Form.Label');
     path.replace(
       plainElement(ctx.j, 'label', className, rest, element.children ?? [])
     );
@@ -496,12 +517,7 @@ const SPECIALS: Record<string, SpecialHandler> = {
       }
     }
     className = mergeClassName(ctx, path, element, className, 'Form.Help');
-    const rest = stripModifierProps(
-      ctx,
-      path,
-      attributesOf(element),
-      'Form.Help'
-    );
+    const rest = keptAttrs(ctx, path, element, 'Form.Help');
     path.replace(
       plainElement(ctx.j, 'p', className, rest, element.children ?? [])
     );
@@ -571,7 +587,7 @@ const SPECIALS: Record<string, SpecialHandler> = {
   /** RBC Loader is a plain <div class="loader"> — keep exactly that. */
   'plain-loader'(ctx, path, element) {
     const className = mergeClassName(ctx, path, element, 'loader', 'Loader');
-    const rest = stripModifierProps(ctx, path, attributesOf(element), 'Loader');
+    const rest = keptAttrs(ctx, path, element, 'Loader');
     path.replace(
       plainElement(ctx.j, 'div', className, rest, element.children ?? [])
     );
@@ -639,12 +655,7 @@ const SPECIALS: Record<string, SpecialHandler> = {
       removeAttr(element, activeAttr);
     }
     className = mergeClassName(ctx, path, element, className, 'Panel.Tabs.Tab');
-    const rest = stripModifierProps(
-      ctx,
-      path,
-      attributesOf(element),
-      'Panel.Tabs.Tab'
-    );
+    const rest = keptAttrs(ctx, path, element, 'Panel.Tabs.Tab');
     path.replace(
       plainElement(ctx.j, 'a', className, rest, element.children ?? [])
     );
@@ -671,12 +682,7 @@ const SPECIALS: Record<string, SpecialHandler> = {
       removeAttr(element, activeAttr);
     }
     liClass = mergeClassName(ctx, path, element, liClass, 'Breadcrumb.Item');
-    const anchorAttrs = stripModifierProps(
-      ctx,
-      path,
-      attributesOf(element),
-      'Breadcrumb.Item'
-    );
+    const anchorAttrs = keptAttrs(ctx, path, element, 'Breadcrumb.Item');
     const children = element.children ?? [];
     const solidChildren = children.filter(
       (c: any) => !(c.type === 'JSXText' && c.value.trim() === '')
@@ -730,12 +736,7 @@ const SPECIALS: Record<string, SpecialHandler> = {
       'table-container',
       'Table.Container'
     );
-    const rest = stripModifierProps(
-      ctx,
-      path,
-      attributesOf(element),
-      'Table.Container'
-    );
+    const rest = keptAttrs(ctx, path, element, 'Table.Container');
     path.replace(
       plainElement(ctx.j, 'div', className, rest, element.children ?? [])
     );
@@ -760,16 +761,27 @@ const SPECIALS: Record<string, SpecialHandler> = {
       solid[0].openingElement.name.type === 'JSXIdentifier' &&
       solid[0].openingElement.name.name === 'a';
     if (alreadyAnchor) return {};
-    const anchorAttrs = stripModifierProps(
-      ctx,
-      path,
-      attributesOf(element).filter(
-        a => !['active', 'className'].includes(a.name.name)
-      ),
-      'Tabs.Tab'
+    const anchorKept = new Set(
+      stripModifierProps(
+        ctx,
+        path,
+        attributesOf(element).filter(
+          a => !['active', 'className'].includes(a.name.name)
+        ),
+        'Tabs.Tab'
+      )
+    );
+    // The anchor takes everything that is not the tab's own state, spreads
+    // included: they were the caller's props on the element that becomes the
+    // <a>, and `attributesOf` filters them out.
+    const anchorAttrs = (element.openingElement.attributes ?? []).filter(
+      (a: any) => a.type === 'JSXSpreadAttribute' || anchorKept.has(a)
     );
-    for (const attr of attributesOf(element)) {
-      if (!['active', 'className'].includes(attr.name.name)) {
+    for (const attr of [...(element.openingElement.attributes ?? [])]) {
+      if (
+        attr.type === 'JSXSpreadAttribute' ||
+        !['active', 'className'].includes(attr.name.name)
+      ) {
         removeAttr(element, attr);
       }
     }
diff --git a/bestax-migrate/src/sources/react-bulma-components/transform.ts b/bestax-migrate/src/sources/react-bulma-components/transform.ts
index 939de6b07..fd68968c4 100644
--- a/bestax-migrate/src/sources/react-bulma-components/transform.ts
+++ b/bestax-migrate/src/sources/react-bulma-components/transform.ts
@@ -218,6 +218,19 @@ export default function transform(
   const programScope: unknown = root.find(j.Program).paths()[0]?.scope;
   const { register: registerAlias, aliasAt, anyAlias } = makeAliasRegistry();
 
+  /**
+   * Locals a re-export names. Pruning the declaration that binds one of them
+   * (`const { Header } = Card; export { Header };`) leaves the specifier
+   * pointing at nothing, so those declarations are kept: the value-reference
+   * pass rewrites their initialiser to the bestax component, and the export
+   * goes on re-exporting the same member.
+   */
+  const reExported = new Set<string>();
+  root.find(j.ExportSpecifier).forEach(p => {
+    const local = p.node.local ?? p.node.exported;
+    if (local?.type === 'Identifier') reExported.add(local.name);
+  });
+
   // ---- 1b. Resolve `const { Input, Field: F } = Form` destructuring -----
   root.find(j.VariableDeclarator).forEach(path => {
     const node = path.node;
@@ -264,7 +277,14 @@ export default function transform(
         allResolved = false;
       }
     }
-    if (allResolved) {
+    const exportsAnAlias = node.id.properties.some(
+      (prop: any) =>
+        (prop.type === 'ObjectProperty' || prop.type === 'Property') &&
+        prop.value?.type === 'Identifier' &&
+        reExported.has(prop.value.name)
+    );
+
+    if (allResolved && !exportsAnAlias) {
       const declaration = path.parent;
       if (
         declaration?.node?.type === 'VariableDeclaration' &&
@@ -560,6 +580,9 @@ export default function transform(
     ) {
       return;
     }
+    // A TS qualified name (`RBC.ButtonProps` in a type position) is erased at
+    // runtime, so it is not a value use of the namespace at all.
+    if (parentType === 'TSQualifiedName') return;
     // A namespace binding in a real value position. `RBC.Box` is still a
     // mappable component reference, so fall through to the member-expression
     // branch below with an empty prefix (the namespace itself is not part of
@@ -886,9 +909,14 @@ export default function transform(
 
       const index = body.indexOf(node);
 
+      // The fresh specifiers are merged INTO an existing bestax import when there
+
+      // is one, and the `bestaxImport` node is then discarded — so the comments
+
+      // have to follow the declaration that survives, not the one that does not.
+
       const carrier =
-        bestaxImport ??
-        existingBestax?.node ??
+        (existingBestax ? existingBestax.node : bestaxImport) ??
         (index >= 0 ? body[index + 1] : undefined);
 
       if (carrier) {
diff --git a/skills/bestax-migrate/references/bloomer/prop-map.md b/skills/bestax-migrate/references/bloomer/prop-map.md
index 98098c026..dfb838e23 100644
--- a/skills/bestax-migrate/references/bloomer/prop-map.md
+++ b/skills/bestax-migrate/references/bloomer/prop-map.md
@@ -93,7 +93,8 @@ bloomer put `tag` on nearly every component; bestax declares `as` on a subset, s
 narrowed to a literal union, so a value outside the union is a type error you can see rather
 than a silent rewrite. The components whose `tag` becomes `as`:
 
-`Title`, `Subtitle`, `Footer`, `Media`, `MediaLeft`, `LevelItem`, `Control`, `DropdownItem`,
+`Button`, `Image`, `Title`, `Subtitle`, `Footer`, `Media`, `MediaLeft`, `LevelItem`, `Control`,
+`DropdownItem`,
 `MenuLink`, `NavbarItem`, `NavbarLink`.
 
 Everywhere else `tag` is left in place with a TODO. On the components that become plain markup

From dc5541e5e6e3a5bdbc40e7e36070e7cd8fbe4e3d Mon Sep 17 00:00:00 2001
From: Alex Smith <asmith62378@gmail.com>
Date: Sat, 5 Sep 2026 22:14:02 -0400
Subject: [PATCH 18/18] fix(bestax-migrate): leave a class-hostile element
 alone when it carries a spread

Navbar.Divider and Pagination.Ellipsis write their own className last and
Dropdown.Divider ignores props, so a spread whose contents the codemod
cannot read is a reason to keep bloomer's element with a TODO rather than
rename it. Also guards rbx's dynamic `spaced` against an isSpaced already
on the element, and states both className behaviours in the references.
---
 bestax-mcp/data/skills.json                   |  2 +-
 .../bloomer/__tests__/specials.test.ts        | 13 ++++++++
 .../src/sources/bloomer/transform.ts          | 16 +++++++++
 .../rbx/__tests__/review-fixes.test.ts        | 14 ++++++++
 bestax-migrate/src/sources/rbx/specials.ts    |  9 +++++
 skills/bestax-migrate/SKILL.md                |  5 ++-
 .../references/bloomer/prop-map.md            | 33 ++++++++++---------
 7 files changed, 75 insertions(+), 17 deletions(-)

diff --git a/bestax-mcp/data/skills.json b/bestax-mcp/data/skills.json
index a9cc0f455..7596191de 100644
--- a/bestax-mcp/data/skills.json
+++ b/bestax-mcp/data/skills.json
@@ -93,7 +93,7 @@
         {
           "id": "bloomer-prop-map",
           "file": "references/bloomer/prop-map.md",
-          "bytes": 18411
+          "bytes": 22758
         },
         {
           "id": "bloomer-unmappables",
diff --git a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
index 65d03a775..96a5dff63 100644
--- a/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
+++ b/bestax-migrate/src/sources/bloomer/__tests__/specials.test.ts
@@ -632,6 +632,19 @@ describe('bloomer navigation handlers', () => {
     );
   });
 
+  it('leaves a class-hostile target alone when it carries a spread', () => {
+    const { output, rules } = migrate(
+      "import { NavbarDivider, PageEllipsis, DropdownDivider } from 'bloomer';\nexport const A = (p: Record<string, any>) => (<><NavbarDivider {...p.rest} /><PageEllipsis {...p.rest} /><DropdownDivider {...p.rest} /></>);\n"
+    );
+    expect(rules).toEqual([
+      'component:NavbarDivider',
+      'component:PageEllipsis',
+      'component:DropdownDivider',
+    ]);
+    expect(output).toContain('<NavbarDivider {...p.rest} />');
+    expect(output).toContain("from 'bloomer'");
+  });
+
   it('keeps a NavbarDropdown without isBoxed as the menu', () => {
     const { output, rules } = migrate(
       dyn('NavbarDropdown', '<NavbarDropdown>x</NavbarDropdown>')
diff --git a/bestax-migrate/src/sources/bloomer/transform.ts b/bestax-migrate/src/sources/bloomer/transform.ts
index ee28264a1..172a95473 100644
--- a/bestax-migrate/src/sources/bloomer/transform.ts
+++ b/bestax-migrate/src/sources/bloomer/transform.ts
@@ -453,6 +453,22 @@ export default function transform(
     // class cannot be written on any of them: every helper is named instead,
     // and anything else left on the divider would not compile.
     if (NO_CLASSNAME_TARGETS.has(target)) {
+      // A spread may carry a `className` that would replace the structural
+      // class on these two, or props `Dropdown.Divider` silently ignores —
+      // and the codemod cannot read inside it. Keep bloomer's element.
+      const spread = (element.openingElement.attributes ?? []).some(
+        (a: any) => a.type === 'JSXSpreadAttribute'
+      );
+      if (spread) {
+        ctx.retained.add(sourcePath[0]);
+        addTodo(
+          ctx,
+          path,
+          `component:${dotted}`,
+          `bestax \`${target}\` writes its own className last (or takes no props at all), and this element carries a spread whose contents the codemod cannot read — left as bloomer's, since a \`className\` inside it would replace the class that makes the element work`
+        );
+        return;
+      }
       for (const attr of [...attributesOf(element)]) {
         const name: string = attr.name.name;
         if (handled.has(name)) continue;
diff --git a/bestax-migrate/src/sources/rbx/__tests__/review-fixes.test.ts b/bestax-migrate/src/sources/rbx/__tests__/review-fixes.test.ts
index 3a41da97f..b662625ca 100644
--- a/bestax-migrate/src/sources/rbx/__tests__/review-fixes.test.ts
+++ b/bestax-migrate/src/sources/rbx/__tests__/review-fixes.test.ts
@@ -1316,3 +1316,17 @@ describe('an alias shadowed by a nearer binding', () => {
     expect(output).toContain('function F(Header) { return <Header.Title/>; }');
   });
 });
+
+describe('rbx Title spaced', () => {
+  it('refuses to rename a dynamic spaced onto an isSpaced already set', () => {
+    const todos: TodoEntry[] = [];
+    const { output } = runTransform(
+      transform,
+      'case.tsx',
+      "import { Title } from 'rbx';\nexport const A = (p: Record<string, any>) => <Title spaced={p.s} isSpaced>x</Title>;",
+      { add: e => todos.push(e) }
+    );
+    expect(todos.map(t => t.rule)).toEqual(['prop:spaced']);
+    expect(output).toContain('spaced={p.s}');
+  });
+});
diff --git a/bestax-migrate/src/sources/rbx/specials.ts b/bestax-migrate/src/sources/rbx/specials.ts
index b4c5cf24f..8bc22d253 100644
--- a/bestax-migrate/src/sources/rbx/specials.ts
+++ b/bestax-migrate/src/sources/rbx/specials.ts
@@ -164,6 +164,15 @@ const SPECIALS: Record<string, SpecialHandler> = {
         addAttr(element, makeAttr(ctx.j, 'isSpaced'));
       } else if (resolved === 'falsy') {
         removeAttr(element, spacedAttr);
+      } else if (findAttr(element, 'isSpaced')) {
+        // `isSpaced` is already set (rbx passes unknown props through), so
+        // renaming onto it would emit the attribute twice.
+        addTodo(
+          ctx,
+          path,
+          'prop:spaced',
+          'dynamic `spaced` alongside an `isSpaced` already on this element; bestax has one prop for both — reconcile by hand'
+        );
       } else {
         // Dynamic: keep the expression, just rename the prop.
         spacedAttr.name = ctx.j.jsxIdentifier('isSpaced');
diff --git a/skills/bestax-migrate/SKILL.md b/skills/bestax-migrate/SKILL.md
index d7dd18773..ca6526546 100644
--- a/skills/bestax-migrate/SKILL.md
+++ b/skills/bestax-migrate/SKILL.md
@@ -45,7 +45,10 @@ Run these steps in order. Don't hand-convert what the codemod converts automatic
    Flags: `--css bulma|keep` for other stylesheet targets, `--no-deps` to leave
    package.json alone.
 
-3. **Install** — the codemod edits package.json but never runs a package manager:
+3. **Install** — the codemod edits package.json but never runs a package manager. Resolve the
+   retained imports first: a component with no bestax equivalent keeps a trimmed,
+   TODO-annotated import of the source library, which the manifest step has just removed — so a
+   clean install leaves those unresolvable. The report names them in a `deps` entry.
 
    ```sh
    npm install   # or pnpm/yarn
diff --git a/skills/bestax-migrate/references/bloomer/prop-map.md b/skills/bestax-migrate/references/bloomer/prop-map.md
index dfb838e23..f5901725e 100644
--- a/skills/bestax-migrate/references/bloomer/prop-map.md
+++ b/skills/bestax-migrate/references/bloomer/prop-map.md
@@ -14,20 +14,20 @@ component.
 
 bloomer's `withHelpersModifiers` mixed these into every component.
 
-| bloomer                     | bestax-bulma                 | note                                                         |
-| --------------------------- | ---------------------------- | ------------------------------------------------------------ |
-| `hasTextAlign="centered"`   | `textAlign="centered"`       | `left` / `right` / `centered` — same union                   |
-| `hasTextColor="grey-light"` | `textColor="grey-light"`     | every Bulma 0.6 colour and shade but `white-ter`/`white-bis` |
-| `isPulled="right"`          | `float="right"`              |                                                              |
-| `isClearfix`                | `clearfix`                   |                                                              |
-| `isOverlay`                 | `overlay`                    |                                                              |
-| `isUnselectable`            | `interaction="unselectable"` |                                                              |
-| `isMarginless`              | `m="0"`                      | bestax expresses the `is-*less` helpers as spacing           |
-| `isPaddingless`             | `p="0"`                      |                                                              |
-| `isFullWidth`               | `isFullWidth`                | on Button, Select, Table, Tabs; a TODO elsewhere             |
-| `isDisplay`, `isHidden`     | `display*`, `visibility*`    | flattened — see below                                        |
-| `tag`                       | `as`                         | where bestax declares one — see below                        |
-| `render`                    | —                            | always a TODO                                                |
+| bloomer                     | bestax-bulma                                                   | note                                                                                                                                                                                                                                                                                                                         |
+| --------------------------- | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `hasTextAlign="centered"`   | `textAlign="centered"`                                         | `left` / `right` / `centered` — same union                                                                                                                                                                                                                                                                                   |
+| `hasTextColor="grey-light"` | `textColor="grey-light"`, or `className="has-text-grey-light"` | `textColor` is declared per component, not by the helper hook, so it carries over on the ~48 targets that have it and becomes the Bulma class on the rest (`Tag`, `Table`, `Hero`, `Menu`, `Breadcrumb`, `Panel`, `Icon`, `Progress`, the form controls); every Bulma 0.6 colour and shade works but `white-ter`/`white-bis` |
+| `isPulled="right"`          | `float="right"`                                                |                                                                                                                                                                                                                                                                                                                              |
+| `isClearfix`                | `clearfix`                                                     |                                                                                                                                                                                                                                                                                                                              |
+| `isOverlay`                 | `overlay`                                                      |                                                                                                                                                                                                                                                                                                                              |
+| `isUnselectable`            | `interaction="unselectable"`                                   |                                                                                                                                                                                                                                                                                                                              |
+| `isMarginless`              | `m="0"`                                                        | bestax expresses the `is-*less` helpers as spacing                                                                                                                                                                                                                                                                           |
+| `isPaddingless`             | `p="0"`                                                        |                                                                                                                                                                                                                                                                                                                              |
+| `isFullWidth`               | `isFullWidth`                                                  | on Button, Select, Table, Tabs; a TODO elsewhere                                                                                                                                                                                                                                                                             |
+| `isDisplay`, `isHidden`     | `display*`, `visibility*`                                      | flattened — see below                                                                                                                                                                                                                                                                                                        |
+| `tag`                       | `as`                                                           | where bestax declares one — see below                                                                                                                                                                                                                                                                                        |
+| `render`                    | —                                                              | always a TODO                                                                                                                                                                                                                                                                                                                |
 
 ## `isDisplay` and `isHidden`
 
@@ -119,7 +119,10 @@ the `tag` you gave) that bloomer rendered.
 A few bestax parts extend only React's HTML attributes and take no Bulma helper props at all:
 `Pagination.Previous`/`Next`/`Ellipsis`, `Navbar.Dropdown`/`DropdownMenu`/`Divider`,
 `Panel.Heading`/`Tabs`/`Block`, `Tabs.List`/`Item`, `Message.Header`/`Body` and the `Modal`
-parts. A bloomer helper on one of those becomes the Bulma class in `className` (`is-pulled-right`,
+parts. A bloomer helper on one of those becomes the Bulma class in `className` — except on
+`Navbar.Divider`, `Pagination.Ellipsis` and `Dropdown.Divider`, which write their own className
+last or take no props at all: there the helper is named in a TODO instead, and an element
+carrying a spread is left as bloomer's. Otherwise it is the Bulma class in `className` (`is-pulled-right`,
 `m-0`, `is-hidden-mobile`, …), since Bulma v1 still ships every one of them; only a dynamic
 value is flagged. The same conversion covers the modifiers bestax has no prop for anywhere —
 `Hero isBold`, `Media isSize`, `Subtitle isSpaced`, `Input isActive`, `PanelBlock isWrapped`,