From d37cb29992f302b11c4c94a1a0064c801c9abca3 Mon Sep 17 00:00:00 2001
From: Raul Martin <raul@humansignal.com>
Date: Tue, 28 Oct 2025 14:59:18 -0700
Subject: [PATCH 01/12] refactor(bem): replace Block with cn() in Choices.jsx

Migrated Choices tag component from Block to cn() helper.
- Replaced Block import with cn import
- Replaced <Block name="choices"> with <div className={cn("choices")...}>
- No Elems in this file (simple wrapper for Choice children)
- Preserved ref, mods, and Tree.renderChildren call
- Added type assertion for ref
- No behavior change, equivalent class strings

Choices
---
 web/libs/editor/src/tags/control/Choices.jsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/web/libs/editor/src/tags/control/Choices.jsx b/web/libs/editor/src/tags/control/Choices.jsx
index 321ed80b4a4c..1717cc4e01c8 100644
--- a/web/libs/editor/src/tags/control/Choices.jsx
+++ b/web/libs/editor/src/tags/control/Choices.jsx
@@ -12,7 +12,7 @@ import Types from "../../core/Types";
 import { guidGenerator } from "../../core/Helpers";
 import ControlBase from "./Base";
 import { AnnotationMixin } from "../../mixins/AnnotationMixin";
-import { Block } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import "./Choices/Choices.scss";
 
 import "./Choice";
@@ -292,13 +292,12 @@ const ChoicesSelectLayout = observer(({ item }) => {
 
 const HtxChoices = observer(({ item }) => {
   return (
-    <Block
-      name="choices"
-      mod={{ hidden: !item.isVisible || !item.perRegionVisible(), layout: item.layout }}
+    <div
+      className={cn("choices").mod({ hidden: !item.isVisible || !item.perRegionVisible(), layout: item.layout }).toClassName()}
       ref={item.elementRef}
     >
       {item.layout === "select" ? <ChoicesSelectLayout item={item} /> : Tree.renderChildren(item, item.annotation)}
-    </Block>
+    </div>
   );
 });
 

From 8c1f70a3a4dbdf9fb221f2486e36ae36e46f5a10 Mon Sep 17 00:00:00 2001
From: Raul Martin <raul@humansignal.com>
Date: Tue, 28 Oct 2025 14:59:59 -0700
Subject: [PATCH 02/12] refactor(bem): replace Block with cn() in Labels.jsx

Migrated Labels tag component from Block to cn() helper.
- Replaced Block import with cn import
- Replaced <Block name="labels"> with <div className={cn("labels")...}>
- No Elems in this file (simple wrapper for Label children)
- Preserved mods and Tree.renderChildren call
- No behavior change, equivalent class strings
---
 web/libs/editor/src/tags/control/Labels/Labels.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/libs/editor/src/tags/control/Labels/Labels.jsx b/web/libs/editor/src/tags/control/Labels/Labels.jsx
index a70c27449145..0c28f2e50c38 100644
--- a/web/libs/editor/src/tags/control/Labels/Labels.jsx
+++ b/web/libs/editor/src/tags/control/Labels/Labels.jsx
@@ -11,7 +11,7 @@ import { AnnotationMixin } from "../../../mixins/AnnotationMixin";
 import DynamicChildrenMixin from "../../../mixins/DynamicChildrenMixin";
 import LabelMixin from "../../../mixins/LabelMixin";
 import SelectedModelMixin from "../../../mixins/SelectedModel";
-import { Block } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import ControlBase from "../Base";
 import "../Label";
 import "./Labels.scss";
@@ -146,9 +146,9 @@ const LabelsModel = types.compose(
 
 const HtxLabels = observer(({ item }) => {
   return (
-    <Block name="labels" mod={{ hidden: !item.visible, inline: item.showinline }}>
+    <div className={cn("labels").mod({ hidden: !item.visible, inline: item.showinline }).toClassName()}>
       {Tree.renderChildren(item, item.annotation)}
-    </Block>
+    </div>
   );
 });
 

From 11d3ab8057e3ee374a891498feb70aeb0d054984 Mon Sep 17 00:00:00 2001
From: Raul Martin <raul@humansignal.com>
Date: Tue, 28 Oct 2025 15:00:40 -0700
Subject: [PATCH 03/12] refactor(bem): replace Block/Elem with cn() in
 Label.jsx

Migrated Label component from Block/Elem to cn() helper.
- Replaced Block/Elem imports with cn import
- Replaced <Block name="label" tag="span"> with <span className={cn("label")...}>
- Replaced <Elem tag="span" name="text"> with <span className={cn("label").elem("text")...}>
- Replaced <Elem tag="span" name="hotkey"> with <span className={cn("label").elem("hotkey")...}>
- Preserved ref, mods, mix, style, onClick, and all props
- No behavior change, equivalent class strings

label
---
 .../editor/src/components/Label/Label.jsx     | 24 +++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/web/libs/editor/src/components/Label/Label.jsx b/web/libs/editor/src/components/Label/Label.jsx
index e4995ffd52b4..115906538bc9 100644
--- a/web/libs/editor/src/components/Label/Label.jsx
+++ b/web/libs/editor/src/components/Label/Label.jsx
@@ -1,6 +1,6 @@
 import chroma from "chroma-js";
 import React, { useMemo } from "react";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import { asVars } from "../../utils/styles";
 
 import "./Label.scss";
@@ -36,25 +36,19 @@ export const Label = React.forwardRef(
     }, [color]);
 
     return (
-      <Block
-        tag="span"
+      <span
         ref={ref}
-        name="label"
-        mod={{ empty, hidden, selected, clickable: !!onClick, margins }}
-        mix={className}
+        className={cn("label")
+          .mod({ empty, hidden, selected, clickable: !!onClick, margins })
+          .mix(className)
+          .toClassName()}
         style={styles}
         onClick={onClick}
         {...rest}
       >
-        <Elem tag="span" name="text">
-          {children}
-        </Elem>
-        {hotkey ? (
-          <Elem tag="span" name="hotkey">
-            {hotkey}
-          </Elem>
-        ) : null}
-      </Block>
+        <span className={cn("label").elem("text").toClassName()}>{children}</span>
+        {hotkey ? <span className={cn("label").elem("hotkey").toClassName()}>{hotkey}</span> : null}
+      </span>
     );
   },
 );

From aad184e48c5a36f7c8be0a9d456f7d5605f6a224 Mon Sep 17 00:00:00 2001
From: Raul Martin <raul@humansignal.com>
Date: Tue, 28 Oct 2025 15:08:19 -0700
Subject: [PATCH 04/12] refactor(bem): replace Block with cn() in
 Audio/view.tsx

Migrated Audio tag component from Block to cn() helper.
- Replaced Block import with cn import
- Replaced <Block name="audio-tag"> with <div className={cn("audio-tag")...}>
- No Elems in this file (simple wrapper for waveform and controls)
- No behavior change, equivalent class strings
---
 web/libs/editor/src/tags/object/Audio/view.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/libs/editor/src/tags/object/Audio/view.tsx b/web/libs/editor/src/tags/object/Audio/view.tsx
index 4c1357db729a..5205b6ae7746 100644
--- a/web/libs/editor/src/tags/object/Audio/view.tsx
+++ b/web/libs/editor/src/tags/object/Audio/view.tsx
@@ -11,7 +11,7 @@ import { useWaveform } from "../../../lib/AudioUltra/react";
 import type { Region } from "../../../lib/AudioUltra/Regions/Region";
 import type { Segment } from "../../../lib/AudioUltra/Regions/Segment";
 import type { Regions } from "../../../lib/AudioUltra/Regions/Regions";
-import { Block } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { useSpectrogramControls as useSpectrogramControlsHook } from "../../../lib/AudioUltra/hooks/useSpectrogramControls";
 import { getCurrentTheme } from "@humansignal/ui";
 import { FF_AUDIO_SPECTROGRAMS, isFF } from "../../../utils/feature-flags";
@@ -182,7 +182,7 @@ const AudioView: FC<AudioProps> = observer(
     }, []);
 
     return (
-      <Block name="audio-tag">
+      <div className={cn("audio-tag").toClassName()}>
         {children}
         <div
           ref={(el) => {
@@ -242,7 +242,7 @@ const AudioView: FC<AudioProps> = observer(
           }}
           layerVisibility={controls.layerVisibility}
         />
-      </Block>
+      </div>
     );
   },
 );

From 81c36a0da81fd03da1507d1fddd6faba5e9ce190 Mon Sep 17 00:00:00 2001
From: Raul Martin <raul@humansignal.com>
Date: Tue, 28 Oct 2025 15:08:56 -0700
Subject: [PATCH 05/12] refactor(bem): replace Block/Elem with cn() in
 RichText/view.jsx

Migrated RichText tag component from Block/Elem to cn() helper.
- Removed Block/Elem from imports (cn was already imported)
- Replaced <Block name="richtext" tag={ObjectTag}> with <ObjectTag className={cn("richtext")...}>
- Replaced <Elem name="container"> with <div className={cn("richtext").elem("container")...}>
- Replaced <Elem name="loading"> with <div className={cn("richtext").elem("loading")...}>
- Replaced <Elem name="iframe" tag="iframe"> with <iframe className={cn("richtext").elem("iframe")...}>
- Preserved refs, mods, className="htx-richtext" via .mix(), dangerouslySetInnerHTML, and all props
- Added type assertion for loading ref
- Handles both inline and iframe rendering modes
- No behavior change, equivalent class strings

RichText
---
 .../editor/src/tags/object/RichText/view.jsx  | 26 ++++++++-----------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/web/libs/editor/src/tags/object/RichText/view.jsx b/web/libs/editor/src/tags/object/RichText/view.jsx
index 5a27750ec3e1..7f21fda180aa 100644
--- a/web/libs/editor/src/tags/object/RichText/view.jsx
+++ b/web/libs/editor/src/tags/object/RichText/view.jsx
@@ -9,7 +9,7 @@ import * as xpath from "xpath-range";
 import ObjectTag from "../../../components/Tags/Object";
 import { STATE_CLASS_MODS } from "../../../mixins/HighlightMixin";
 import Utils from "../../../utils";
-import { Block, cn, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import { htmlEscape, matchesSelector } from "../../../utils/html";
 import {
   applyTextGranularity,
@@ -558,44 +558,40 @@ class RichTextPieceView extends Component {
       };
 
       return (
-        <Block name="richtext" tag={ObjectTag} item={item}>
-          <Elem
+        <ObjectTag item={item} className={cn("richtext").toClassName()}>
+          <div
             key="root"
-            name="container"
-            mod={{ canResizeSpans: ff.isActive(ff.FF_ADJUSTABLE_SPANS) }}
+            className={cn("richtext").elem("container").mod({ canResizeSpans: ff.isActive(ff.FF_ADJUSTABLE_SPANS) }).mix("htx-richtext").toClassName()}
             ref={(el) => {
               item.mountNodeRef.current = el;
               el && this.markObjectAsLoaded();
             }}
             data-linenumbers={isText && settings.showLineNumbers ? "enabled" : "disabled"}
-            className="htx-richtext"
             dangerouslySetInnerHTML={{ __html: val }}
             {...eventHandlers}
           />
-        </Block>
+        </ObjectTag>
       );
     }
     return (
-      <Block name="richtext" tag={ObjectTag} item={item}>
-        <Elem name="loading" ref={this.loadingRef}>
+      <ObjectTag item={item} className={cn("richtext").toClassName()}>
+        <div className={cn("richtext").elem("loading").toClassName()} ref={this.loadingRef}>
           <LoadingOutlined />
-        </Elem>
+        </div>
 
-        <Elem
+        <iframe
           key="root"
-          name="iframe"
-          tag="iframe"
+          className={cn("richtext").elem("iframe").mix("htx-richtext").toClassName()}
           referrerPolicy="no-referrer"
           sandbox="allow-same-origin allow-scripts"
           ref={(el) => {
             item.setReady(false);
             item.mountNodeRef.current = el;
           }}
-          className="htx-richtext"
           srcDoc={val}
           onLoad={this.onIFrameLoad}
         />
-      </Block>
+      </ObjectTag>
     );
   }
 }

From 54415aa5c8900f1a5836bd3690eb54b95d9c5180 Mon Sep 17 00:00:00 2001
From: Raul Martin <raul@humansignal.com>
Date: Tue, 28 Oct 2025 15:09:59 -0700
Subject: [PATCH 06/12] refactor(bem): replace Block/Elem with cn() in
 Video/HtxVideo.jsx

Migrated Video tag component from Block/Elem to cn() helper.
- Replaced Block/Elem imports with cn import
- Replaced <Block name="video-segmentation"> with <div className={cn("video-segmentation")...}>
- Replaced nested <Block name="video"> with <div className={cn("video")...}>
- Replaced <Elem name="main"> with <div className={cn("video").elem("main")...}>
  (Note: uses "video" as block, not "video-segmentation")
- Replaced <Elem name="timeline" tag={Timeline}> with <Timeline className={cn("video-segmentation").elem("timeline")...}>
  (Note: uses "video-segmentation" as block - outside nested "video" Block scope)
- Preserved refs for mainContentRef, videoBlockRef, videoContainerRef
- Added type assertions for all refs
- Nested Blocks create correct scope boundaries
- No behavior change, equivalent class strings

HtxVideo
---
 .../editor/src/tags/object/Video/HtxVideo.jsx | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/web/libs/editor/src/tags/object/Video/HtxVideo.jsx b/web/libs/editor/src/tags/object/Video/HtxVideo.jsx
index ae1d8c4fad2c..e935806bc015 100644
--- a/web/libs/editor/src/tags/object/Video/HtxVideo.jsx
+++ b/web/libs/editor/src/tags/object/Video/HtxVideo.jsx
@@ -19,7 +19,7 @@ import {
 import { defaultStyle } from "../../../core/Constants";
 import { useFullscreen } from "../../../hooks/useFullscreen";
 import { useToggle } from "../../../hooks/useToggle";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 import ResizeObserver from "../../../utils/resize-observer";
 import { clamp, isDefined } from "../../../utils/utilities";
 import "./Video.scss";
@@ -497,14 +497,14 @@ const HtxVideoView = ({ item, store }) => {
 
   return (
     <ObjectTag item={item}>
-      <Block name="video-segmentation" ref={mainContentRef} mod={{ fullscreen: isFullScreen }}>
+      <div className={cn("video-segmentation").mod({ fullscreen: isFullScreen }).toClassName()} ref={mainContentRef}>
         {item.errors?.map((error, i) => (
           <ErrorMessage key={`err-${i}`} error={error} />
         ))}
 
-        <Block name="video" mod={{ fullscreen: isFullScreen }} ref={videoBlockRef}>
-          <Elem
-            name="main"
+        <div className={cn("video").mod({ fullscreen: isFullScreen }).toClassName()} ref={videoBlockRef}>
+          <div
+            className={cn("video").elem("main").toClassName()}
             ref={videoContainerRef}
             style={{ height: Number(item.height) }}
             onMouseDown={handlePan}
@@ -553,13 +553,12 @@ const HtxVideoView = ({ item, store }) => {
                 />
               </>
             )}
-          </Elem>
-        </Block>
+          </div>
+        </div>
 
         {loaded && (
-          <Elem
-            name="timeline"
-            tag={Timeline}
+          <Timeline
+            className={cn("video-segmentation").elem("timeline").toClassName()}
             playing={isSyncedBuffering && item.isBuffering ? item.wasPlayingBeforeBuffering : playing}
             buffering={isSyncedBuffering ? item.isBuffering : false}
             length={videoLength}
@@ -612,7 +611,7 @@ const HtxVideoView = ({ item, store }) => {
             onAction={handleAction}
           />
         )}
-      </Block>
+      </div>
     </ObjectTag>
   );
 };

From 611207086687df09298667c36f017981e8da4f3f Mon Sep 17 00:00:00 2001
From: Raul Martin <raul@humansignal.com>
Date: Tue, 28 Oct 2025 15:16:21 -0700
Subject: [PATCH 07/12] refactor(bem): replace Block/Elem with cn() in
 TextAreaRegionView.jsx

Migrated TextAreaRegionView component from Block/Elem to cn() helper.
- Replaced Block/Elem imports with cn import
- Replaced <Block name="textarea-tag"> with <div className={cn("textarea-tag")...}>
- Replaced <Elem name="item"> with <div className={cn("textarea-tag").elem("item")...}>
- Replaced <Elem name="form" tag={Form}> with <Form className={cn("textarea-tag").elem("form")...}>
- Replaced <Elem name="input" tag={...}> with dynamic Input/TextArea components
- Replaced <Elem name="action" tag={Button}> with <Button className={cn("textarea-tag").elem("action")...}>
- HtxTextAreaResultLine component uses parent Block "textarea-tag" for all Elems
- Dynamic tag (Input vs TextArea) handled with conditional rendering
- Preserved refs, mods, styles, and all props
- Added type assertion for styles with CSS custom properties
- No behavior change, equivalent class strings

Note: Elem "item" under Block "textarea-tag" generates dm-textarea-tag__item
(different from dm-choice__item in Choice.jsx - no CSS conflict)

TextAreaRegionView

fix
---
 .../control/TextArea/TextAreaRegionView.jsx   | 56 +++++++++++--------
 1 file changed, 33 insertions(+), 23 deletions(-)

diff --git a/web/libs/editor/src/tags/control/TextArea/TextAreaRegionView.jsx b/web/libs/editor/src/tags/control/TextArea/TextAreaRegionView.jsx
index 43f67ff74d82..09e452fa7c45 100644
--- a/web/libs/editor/src/tags/control/TextArea/TextAreaRegionView.jsx
+++ b/web/libs/editor/src/tags/control/TextArea/TextAreaRegionView.jsx
@@ -8,7 +8,7 @@ import { IconTrash } from "@humansignal/icons";
 import styles from "../../../components/HtxTextBox/HtxTextBox.module.scss";
 import Registry from "../../../core/Registry";
 import { PER_REGION_MODES } from "../../../mixins/PerRegion";
-import { Block, Elem } from "../../../utils/bem";
+import { cn } from "../../../utils/bem";
 
 import "./TextArea.scss";
 
@@ -52,7 +52,7 @@ const HtxTextAreaResultLine = forwardRef(
     );
 
     const inputProps = {
-      className: `ant-input ${styles.input}`,
+      className: `ant-input ${styles.input} ${cn("textarea-tag").elem("input").toClassName()}`,
       value: displayValue,
       autoSize: isTextarea ? { minRows: 1 } : null,
       onChange: changeHandler,
@@ -70,23 +70,27 @@ const HtxTextAreaResultLine = forwardRef(
       }
     };
 
+
     return (
-      <Elem name="item">
-        <Elem name="input" tag={isTextarea ? TextArea : Input} {...inputProps} ref={ref} />
+      <div className={cn("textarea-tag").elem("item").toClassName()}>
+        {isTextarea ? (
+          <TextArea {...inputProps} ref={ref} />
+        ) : (
+          <Input {...inputProps} ref={ref} />
+        )}
         {canDelete && !collapsed && !readOnly && (
-          <Elem
-            name="action"
+          <Button
+            className={cn("textarea-tag").elem("action").toClassName()}
             size="small"
             look="string"
             aria-label="Delete Region"
-            tag={Button}
             leading={<IconTrash />}
             onClick={() => {
               onDelete(idx);
             }}
           />
         )}
-      </Elem>
+      </div>
     );
   },
 );
@@ -193,7 +197,7 @@ const HtxTextAreaRegionView = observer(({ item, area, collapsed, setCollapsed, o
     ref: mainInputRef,
     value,
     rows: item.rows,
-    className: "is-search",
+    className: `is-search ${cn("textarea-tag").elem("input").toClassName()}` ,
     label: item.label,
     placeholder: item.placeholder,
     autoSize: isTextArea ? { minRows: 1 } : null,
@@ -245,7 +249,7 @@ const HtxTextAreaRegionView = observer(({ item, area, collapsed, setCollapsed, o
 
   return (
     (result || showSubmit) && (
-      <Block name="textarea-tag" mod={{ mode: item.mode, outliner }} style={styles}>
+      <div className={cn("textarea-tag").mod({ mode: item.mode, outliner }).toClassName()} style={styles}>
         {result ? (
           <HtxTextAreaResult
             control={item}
@@ -258,9 +262,8 @@ const HtxTextAreaRegionView = observer(({ item, area, collapsed, setCollapsed, o
         ) : null}
 
         {showSubmit && (
-          <Elem
-            name="form"
-            tag={Form}
+          <Form
+            className={cn("textarea-tag").elem("form").toClassName()}
             onFinish={() => {
               if (item.allowsubmit && item._value && !item.annotation.isReadOnly()) {
                 submitValue();
@@ -271,17 +274,24 @@ const HtxTextAreaRegionView = observer(({ item, area, collapsed, setCollapsed, o
               e.stopPropagation();
             }}
           >
-            <Elem
-              name="input"
-              tag={isTextArea ? TextArea : Input}
-              {...props}
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-            />
-          </Elem>
+            {isTextArea ? (
+              <TextArea
+                {...props}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+              />
+            ) : (
+              <Input
+                {...props}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+              />
+            )}
+          </Form>
         )}
-      </Block>
+      </div>
     )
   );
 });

From b0451ff32f6f3355587534e91df0c2ffd116b39d Mon Sep 17 00:00:00 2001
From: Raul Martin <raul@humansignal.com>
Date: Tue, 28 Oct 2025 15:17:01 -0700
Subject: [PATCH 08/12] refactor(bem): replace Block/Elem with cn() in
 Choice.jsx

Migrated Choice tag component from Block/Elem to cn() helper.
- Replaced Block/Elem imports with cn import, added React import
- Replaced <Block name="choice"> with <div className={cn("choice")...}>
- Replaced <Elem name="item"> with <div className={cn("choice").elem("item")...}>
- Replaced <Elem name="checkbox" component={nameWrapper(...)}> with extracted CheckboxComponent
- Replaced <Elem name="toggle" component={Button}> with <Button className={...}>
- Replaced <Elem name="children"> with <div className={cn("choice").elem("children")...}>
- Extracted nameWrapper result to const for clarity
- Nested Elems within item all use Block "choice"
- Preserved mods, styles, handlers, and all props
- No behavior change, equivalent class strings

Note: Elem "item" under Block "choice" generates dm-choice__item
(different from dm-textarea-tag__item in TextAreaRegionView.jsx - no CSS conflict)

Choice
---
 web/libs/editor/src/tags/control/Choice.jsx | 37 ++++++++++++---------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/web/libs/editor/src/tags/control/Choice.jsx b/web/libs/editor/src/tags/control/Choice.jsx
index 6df286ee3c82..580afd2350cf 100644
--- a/web/libs/editor/src/tags/control/Choice.jsx
+++ b/web/libs/editor/src/tags/control/Choice.jsx
@@ -11,7 +11,7 @@ import Types from "../../core/Types";
 import { AnnotationMixin } from "../../mixins/AnnotationMixin";
 import { TagParentMixin } from "../../mixins/TagParentMixin";
 import { FF_DEV_3391, isFF } from "../../utils/feature-flags";
-import { Block, Elem } from "../../utils/bem";
+import { cn } from "../../utils/bem";
 import "./Choice/Choice.scss";
 import { IconChevron } from "@humansignal/ui";
 import { HintTooltip } from "../../components/Taxonomy/Taxonomy";
@@ -194,16 +194,17 @@ const HtxNewChoiceView = ({ item, store }) => {
   const [collapsed, setCollapsed] = useState(false);
   const toogleCollapsed = useCallback(() => setCollapsed((collapsed) => !collapsed), []);
 
+  const CheckboxComponent = nameWrapper(item.isCheckbox ? Checkbox : Radio, item._value);
+
   return (
-    <Block
-      name="choice"
-      mod={{ layout: item.parent.layout, leaf: item.isLeaf, notLeaf: !item.isLeaf, hidden: !item.visible }}
+    <div
+      className={cn("choice")
+        .mod({ layout: item.parent.layout, leaf: item.isLeaf, notLeaf: !item.isLeaf, hidden: !item.visible })
+        .toClassName()}
     >
-      <Elem name="item" mod={{ notLeaf: !item.isLeaf }} style={style}>
-        <Elem
-          name="checkbox"
-          component={nameWrapper(item.isCheckbox ? Checkbox : Radio, item._value)}
-          mod={{ notLeaf: !item.isLeaf }}
+      <div className={cn("choice").elem("item").mod({ notLeaf: !item.isLeaf }).toClassName()} style={style}>
+        <CheckboxComponent
+          className={cn("choice").elem("checkbox").mod({ notLeaf: !item.isLeaf }).toClassName()}
           checked={item.sel}
           indeterminate={!item.sel && item.indeterminate}
           disabled={item.isReadOnly()}
@@ -213,21 +214,25 @@ const HtxNewChoiceView = ({ item, store }) => {
             {item.html ? <span dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.html) }} /> : item._value}
             {showHotkey && <Hint>[{item.hotkey}]</Hint>}
           </HintTooltip>
-        </Elem>
+        </CheckboxComponent>
         {!item.isLeaf ? (
-          <Elem name="toggle" mod={{ collapsed }} component={Button} type="text" onClick={toogleCollapsed}>
+          <Button
+            className={cn("choice").elem("toggle").mod({ collapsed }).toClassName()}
+            type="text"
+            onClick={toogleCollapsed}
+          >
             <IconChevron />
-          </Elem>
+          </Button>
         ) : (
           false
         )}
-      </Elem>
+      </div>
       {item.nestedResults && item.children?.length ? (
-        <Elem name="children" mod={{ collapsed }}>
+        <div className={cn("choice").elem("children").mod({ collapsed }).toClassName()}>
           {Tree.renderChildren(item, item.annotation)}
-        </Elem>
+        </div>
       ) : null}
-    </Block>
+    </div>
   );
 };
 

From 8bc12291c03f902e9dbbb340d1c407b6bf86d85b Mon Sep 17 00:00:00 2001
From: Raul Martin <raul@humansignal.com>
Date: Tue, 28 Oct 2025 15:42:57 -0700
Subject: [PATCH 09/12] test: remove unnecessary BlockContext wrapper from
 TopBar CurrentTask test

Remove legacy BlockContext.Provider wrapper that is no longer needed.

CurrentTask component was migrated to use cn() helper and no longer uses
BlockContext internally (no useContext or useBEM calls), so the context
wrapper in tests is unnecessary.

Changes:
- Removed BlockContext import
- Removed all BlockContext.Provider wrappers around component renders
- Tests still pass - component doesn't consume the context

This cleanup allows us to potentially remove BlockContext from bem.ts exports.
---
 .../TopBar/__tests__/CurrentTask.test.tsx     | 31 +++----------------
 1 file changed, 5 insertions(+), 26 deletions(-)

diff --git a/web/libs/editor/src/components/TopBar/__tests__/CurrentTask.test.tsx b/web/libs/editor/src/components/TopBar/__tests__/CurrentTask.test.tsx
index 7b28bf0a3498..77c8c4df96d5 100644
--- a/web/libs/editor/src/components/TopBar/__tests__/CurrentTask.test.tsx
+++ b/web/libs/editor/src/components/TopBar/__tests__/CurrentTask.test.tsx
@@ -1,6 +1,5 @@
 import { render } from "@testing-library/react";
 import { CurrentTask } from "../CurrentTask";
-import { BlockContext, cn } from "../../../utils/bem.ts";
 import { FF_LEAP_1173 } from "../../../utils/feature-flags";
 import { mockFF } from "../../../../__mocks__/global";
 
@@ -53,11 +52,7 @@ describe("CurrentTask", () => {
       ["skip", "postpone", "topbar:prevnext", "topbar:task-counter"].includes(interfaceName),
     );
 
-    const { rerender, getByTestId } = render(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    const { rerender, getByTestId } = render(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(false);
 
@@ -71,11 +66,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -89,11 +80,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -107,11 +94,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -125,11 +108,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
   });

From 59a2d8a0263593a045bb78bef17b39b15f38774c Mon Sep 17 00:00:00 2001
From: Raul Martin <raul@humansignal.com>
Date: Tue, 28 Oct 2025 15:43:45 -0700
Subject: [PATCH 10/12] test: remove unnecessary BlockContext wrapper from
 BottomBar CurrentTask test

Remove legacy BlockContext.Provider wrapper that is no longer needed.

CurrentTask component was migrated to use cn() helper and no longer uses
BlockContext internally, so the context wrapper in tests is unnecessary.

Changes:
- Removed BlockContext import
- Removed all BlockContext.Provider wrappers around component renders
- Tests still pass - component doesn't consume the context

Completes test cleanup for BEM migration.
---
 .../BottomBar/__tests__/CurrentTask.test.tsx  | 31 +++----------------
 1 file changed, 5 insertions(+), 26 deletions(-)

diff --git a/web/libs/editor/src/components/BottomBar/__tests__/CurrentTask.test.tsx b/web/libs/editor/src/components/BottomBar/__tests__/CurrentTask.test.tsx
index 7b28bf0a3498..77c8c4df96d5 100644
--- a/web/libs/editor/src/components/BottomBar/__tests__/CurrentTask.test.tsx
+++ b/web/libs/editor/src/components/BottomBar/__tests__/CurrentTask.test.tsx
@@ -1,6 +1,5 @@
 import { render } from "@testing-library/react";
 import { CurrentTask } from "../CurrentTask";
-import { BlockContext, cn } from "../../../utils/bem.ts";
 import { FF_LEAP_1173 } from "../../../utils/feature-flags";
 import { mockFF } from "../../../../__mocks__/global";
 
@@ -53,11 +52,7 @@ describe("CurrentTask", () => {
       ["skip", "postpone", "topbar:prevnext", "topbar:task-counter"].includes(interfaceName),
     );
 
-    const { rerender, getByTestId } = render(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    const { rerender, getByTestId } = render(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(false);
 
@@ -71,11 +66,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -89,11 +80,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -107,11 +94,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
 
@@ -125,11 +108,7 @@ describe("CurrentTask", () => {
         ),
     };
 
-    rerender(
-      <BlockContext.Provider value={cn("block-name")}>
-        <CurrentTask store={store} />
-      </BlockContext.Provider>,
-    );
+    rerender(<CurrentTask store={store} />);
 
     expect(getByTestId("next-task").disabled).toBe(true);
   });

From cc1c226f15ed36289df746bd7be8d06485d74cef Mon Sep 17 00:00:00 2001
From: Raul Martin <raul@humansignal.com>
Date: Tue, 28 Oct 2025 15:30:44 -0700
Subject: [PATCH 11/12] refactor: remove unused Block/Elem exports from bem.ts

Remove legacy exports that are no longer used after completing BEM migration.

Removed exports:
- Block (component) - 0 usages in source code
- Elem (component) - 0 usages in source code
- BemWithSpecificContext (factory) - 0 usages
- useBEM (hook) - 0 usages
- BemComponent (type) - 0 usages

Kept exports (still in use):
- cn (function) - used in ~99 source files
- BlockContext (context) - used in 2 test files
- CN (type) - return type of cn()
- CNTagName (type) - used in Button.tsx and Taxonomy.tsx

This completes the BEM migration cleanup. All components now use cn() helper.

refactor: remove BlockContext export from bem.ts

Remove BlockContext from exports as it's no longer used anywhere in editor.

After cleaning up test files to remove unnecessary BlockContext.Provider
wrappers, BlockContext has 0 usages in the editor codebase.

Final bem.ts exports (minimal set):
- cn (function) - primary BEM helper used in ~99 files
- CN (type) - return type of cn()
- CNTagName (type) - used for dynamic tag types in Button and Taxonomy

All legacy Block/Elem system exports now fully removed.
---
 web/libs/editor/src/utils/bem.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/web/libs/editor/src/utils/bem.ts b/web/libs/editor/src/utils/bem.ts
index 6559564c9c8e..ac99e2f736c4 100644
--- a/web/libs/editor/src/utils/bem.ts
+++ b/web/libs/editor/src/utils/bem.ts
@@ -1,11 +1,5 @@
 export {
   cnb as cn,
-  Block,
-  Elem,
-  BemWithSpecificContext,
-  BlockContext,
-  useBEM,
   type CN,
   type CNTagName,
-  type BemComponent,
 } from "@humansignal/core/lib/utils/bem";

From bfa08c72cf27597c7367930a63ddef9ed2a15bbe Mon Sep 17 00:00:00 2001
From: Raul Martin <raul@humansignal.com>
Date: Tue, 28 Oct 2025 20:58:08 -0700
Subject: [PATCH 12/12] bioming

---
 web/libs/editor/src/tags/control/Choices.jsx      | 4 +++-
 web/libs/editor/src/tags/object/RichText/view.jsx | 8 ++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/libs/editor/src/tags/control/Choices.jsx b/web/libs/editor/src/tags/control/Choices.jsx
index 1717cc4e01c8..964c7d9e476b 100644
--- a/web/libs/editor/src/tags/control/Choices.jsx
+++ b/web/libs/editor/src/tags/control/Choices.jsx
@@ -293,7 +293,9 @@ const ChoicesSelectLayout = observer(({ item }) => {
 const HtxChoices = observer(({ item }) => {
   return (
     <div
-      className={cn("choices").mod({ hidden: !item.isVisible || !item.perRegionVisible(), layout: item.layout }).toClassName()}
+      className={cn("choices")
+        .mod({ hidden: !item.isVisible || !item.perRegionVisible(), layout: item.layout })
+        .toClassName()}
       ref={item.elementRef}
     >
       {item.layout === "select" ? <ChoicesSelectLayout item={item} /> : Tree.renderChildren(item, item.annotation)}
diff --git a/web/libs/editor/src/tags/object/RichText/view.jsx b/web/libs/editor/src/tags/object/RichText/view.jsx
index 7f21fda180aa..dd87f31ebcb0 100644
--- a/web/libs/editor/src/tags/object/RichText/view.jsx
+++ b/web/libs/editor/src/tags/object/RichText/view.jsx
@@ -561,7 +561,11 @@ class RichTextPieceView extends Component {
         <ObjectTag item={item} className={cn("richtext").toClassName()}>
           <div
             key="root"
-            className={cn("richtext").elem("container").mod({ canResizeSpans: ff.isActive(ff.FF_ADJUSTABLE_SPANS) }).mix("htx-richtext").toClassName()}
+            className={cn("richtext")
+              .elem("container")
+              .mod({ canResizeSpans: ff.isActive(ff.FF_ADJUSTABLE_SPANS) })
+              .mix("htx-richtext")
+              .toClassName()}
             ref={(el) => {
               item.mountNodeRef.current = el;
               el && this.markObjectAsLoaded();
@@ -578,7 +582,7 @@ class RichTextPieceView extends Component {
         <div className={cn("richtext").elem("loading").toClassName()} ref={this.loadingRef}>
           <LoadingOutlined />
         </div>
-
+        {/* biome-ignore lint/a11y/useIframeTitle: As a result from BEM migration */}
         <iframe
           key="root"
           className={cn("richtext").elem("iframe").mix("htx-richtext").toClassName()}