basefn 1.10.0 → 1.11.0

package/src/components/Basefn__Popover.res.mjs

@@ -1,7 +1,9 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote from "xote/src/Xote.res.mjs";
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Node$Xote from "xote/src/Node.res.mjs";
+import * as Signal$Xote from "xote/src/Signal.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
+import * as Computed$Xote from "xote/src/Computed.res.mjs";
 
 import './Basefn__Popover.css'
 ;
@@ -42,14 +44,14 @@ function Basefn__Popover(props) {
   let align = __align !== undefined ? __align : "Center";
   let closeOnClickOutside = __closeOnClickOutside !== undefined ? __closeOnClickOutside : true;
   let handleTriggerClick = param => {
-    let newValue = !Xote.Signal.get(isOpen);
-    Xote.Signal.set(isOpen, newValue);
+    let newValue = !Signal$Xote.get(isOpen);
+    Signal$Xote.set(isOpen, newValue);
     if (onOpenChange !== undefined) {
       return onOpenChange(newValue);
     }
   };
   let handleClose = () => {
-    Xote.Signal.set(isOpen, false);
+    Signal$Xote.set(isOpen, false);
     if (onOpenChange !== undefined) {
       return onOpenChange(false);
     }
@@ -68,14 +70,14 @@ function Basefn__Popover(props) {
     let alignClass = " basefn-popover__content--align-" + alignToString(align);
     return "basefn-popover__content" + positionClass + alignClass;
   };
-  let popoverContent = Xote.Computed.make(() => {
-    if (Xote.Signal.get(isOpen)) {
+  let popoverContent = Computed$Xote.make(() => {
+    if (Signal$Xote.get(isOpen)) {
       return [
-        Xote__JSX.Elements.jsx("div", {
+        XoteJSX$Xote.Elements.jsx("div", {
           class: "basefn-popover__backdrop",
           onClick: handleBackdropClick
         }),
-        Xote__JSX.Elements.jsx("div", {
+        XoteJSX$Xote.Elements.jsx("div", {
           class: getContentClassName(),
           children: content
         })
@@ -84,15 +86,15 @@ function Basefn__Popover(props) {
       return [];
     }
   }, undefined);
-  return Xote__JSX.Elements.jsxs("div", {
+  return XoteJSX$Xote.Elements.jsxs("div", {
     class: getPopoverClassName(),
-    children: Xote__JSX.array([
-      Xote__JSX.Elements.jsx("div", {
+    children: XoteJSX$Xote.array([
+      XoteJSX$Xote.Elements.jsx("div", {
         class: "basefn-popover__trigger",
         onClick: handleTriggerClick,
         children: props.trigger
       }),
-      Xote.Component.signalFragment(popoverContent)
+      Node$Xote.signalFragment(popoverContent)
     ])
   });
 }

package/src/components/Basefn__Progress.res

@@ -74,14 +74,14 @@ let make = (
     {showLabel || label->Option.isSome
       ? <div class="basefn-progress__label">
           <span>
-            {Component.text(
+            {Node.text(
               switch label {
               | Some(labelText) => labelText
               | None => "Progress"
               },
             )}
           </span>
-          {!indeterminate ? {Component.textSignal(() => getPercentage() ++ "%")} : <> </>}
+          {!indeterminate ? {Node.signalText(() => getPercentage() ++ "%")} : <> </>}
         </div>
       : <> </>}
   </>

package/src/components/Basefn__Progress.res.mjs

@@ -1,8 +1,10 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote from "xote/src/Xote.res.mjs";
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Node$Xote from "xote/src/Node.res.mjs";
+import * as Signal$Xote from "xote/src/Signal.res.mjs";
 import * as Core__Option from "@rescript/core/src/Core__Option.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
+import * as Computed$Xote from "xote/src/Computed.res.mjs";
 
 import './Basefn__Progress.css'
 ;
@@ -56,20 +58,20 @@ function Basefn__Progress(props) {
     return "basefn-progress__bar " + variantClass + animatedClass;
   };
   let getPercentage = () => {
-    let currentValue = Xote.Signal.get(value);
+    let currentValue = Signal$Xote.get(value);
     let percent = currentValue / max * 100.0;
     let clamped = percent > 100.0 ? 100.0 : (
         percent < 0.0 ? 0.0 : percent
       );
     return clamped.toString();
   };
-  return Xote__JSX.jsxs(Xote__JSX.jsxFragment, {
-    children: Xote__JSX.array([
-      Xote__JSX.Elements.jsx("div", {
+  return XoteJSX$Xote.jsxs(XoteJSX$Xote.jsxFragment, {
+    children: XoteJSX$Xote.array([
+      XoteJSX$Xote.Elements.jsx("div", {
         class: getProgressClass(),
-        children: Xote__JSX.Elements.jsx("div", {
+        children: XoteJSX$Xote.Elements.jsx("div", {
           class: getBarClass(),
-          style: Xote.Computed.make(() => {
+          style: Computed$Xote.make(() => {
             if (indeterminate) {
               return "width: 30%";
             } else {
@@ -78,15 +80,15 @@ function Basefn__Progress(props) {
           }, undefined)
         })
       }),
-      showLabel || Core__Option.isSome(label) ? Xote__JSX.Elements.jsxs("div", {
+      showLabel || Core__Option.isSome(label) ? XoteJSX$Xote.Elements.jsxs("div", {
           class: "basefn-progress__label",
-          children: Xote__JSX.array([
-            Xote__JSX.Elements.jsx("span", {
-              children: Xote.Component.text(label !== undefined ? label : "Progress")
+          children: XoteJSX$Xote.array([
+            XoteJSX$Xote.Elements.jsx("span", {
+              children: Node$Xote.text(label !== undefined ? label : "Progress")
             }),
-            indeterminate ? Xote__JSX.jsx(Xote__JSX.jsxFragment, {}) : Xote.Component.textSignal(() => getPercentage() + "%")
+            indeterminate ? XoteJSX$Xote.jsx(XoteJSX$Xote.jsxFragment, {}) : Node$Xote.signalText(() => getPercentage() + "%")
           ])
-        }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+        }) : XoteJSX$Xote.jsx(XoteJSX$Xote.jsxFragment, {})
     ])
   });
 }

package/src/components/Basefn__Radio.res

@@ -30,6 +30,6 @@ let make = (
       disabled={disabled}
       ?onChange
     />
-    <span class="basefn-radio-label"> {Component.text(label)} </span>
+    <span class="basefn-radio-label"> {Node.text(label)} </span>
   </label>
 }

package/src/components/Basefn__Radio.res.mjs

@@ -1,7 +1,7 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote from "xote/src/Xote.res.mjs";
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Node$Xote from "xote/src/Node.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
 
 import './Basefn__Radio.css'
 ;
@@ -10,10 +10,10 @@ function Basefn__Radio(props) {
   let __disabled = props.disabled;
   let disabled = __disabled !== undefined ? __disabled : false;
   let base = "basefn-radio-wrapper";
-  return Xote__JSX.Elements.jsxs("label", {
+  return XoteJSX$Xote.Elements.jsxs("label", {
     class: disabled ? base + " basefn-radio-wrapper--disabled" : base,
-    children: Xote__JSX.array([
-      Xote__JSX.Elements.jsx("input", {
+    children: XoteJSX$Xote.array([
+      XoteJSX$Xote.Elements.jsx("input", {
         class: "basefn-radio-input",
         type: "radio",
         name: props.name,
@@ -22,9 +22,9 @@ function Basefn__Radio(props) {
         checked: props.checked,
         onChange: props.onChange
       }),
-      Xote__JSX.Elements.jsx("span", {
+      XoteJSX$Xote.Elements.jsx("span", {
         class: "basefn-radio-label",
-        children: Xote.Component.text(props.label)
+        children: Node$Xote.text(props.label)
       })
     ])
   });

package/src/components/Basefn__Resizable.res

@@ -5,7 +5,7 @@ open Xote
 type direction = Horizontal | Vertical
 
 type panel = {
-  content: Component.node,
+  content: Node.node,
   defaultSize: float,
   minSize?: float,
   maxSize?: float,
@@ -66,28 +66,53 @@ let genId: unit => string = %raw(`function() {
   return "basefn-resizable-" + Math.random().toString(36).substr(2, 9);
 }`)
 
-// Set up mousedown/touchstart delegation on a container element by ID
-let setupDragListeners: (string, (int, Dom.event) => unit) => unit = %raw(`function(containerId, onStart) {
-  requestAnimationFrame(function() {
-    var container = document.getElementById(containerId);
-    if (!container) return;
+// Global event delegation: register callbacks by container ID, one document
+// listener handles all instances. No timing dependency on DOM rendering.
+let registerInstance: (string, (int, Dom.event) => unit) => unit = %raw(`function(id, cb) {
+  if (!window.__basefn_resizable) {
+    window.__basefn_resizable = {};
 
     function handler(e) {
       var target = e.target;
-      var handle = target.closest ? target.closest(".basefn-resizable__handle") : null;
-      if (!handle || !container.contains(handle)) return;
-      var handles = container.querySelectorAll(".basefn-resizable__handle");
-      for (var i = 0; i < handles.length; i++) {
-        if (handles[i] === handle) {
-          onStart(i, e);
-          return;
+      if (!target || !target.closest) return;
+      var handle = target.closest(".basefn-resizable__handle");
+      if (!handle) return;
+      var container = handle.closest(".basefn-resizable");
+      if (!container || !container.id) return;
+      var entry = window.__basefn_resizable[container.id];
+      if (!entry) return;
+      // Find the handle index among direct children of the container
+      var children = container.children;
+      var handleIndex = 0;
+      for (var i = 0; i < children.length; i++) {
+        if (children[i].classList.contains("basefn-resizable__handle")) {
+          if (children[i] === handle) {
+            entry(handleIndex, e);
+            return;
+          }
+          handleIndex++;
         }
       }
     }
 
-    container.addEventListener("mousedown", handler);
-    container.addEventListener("touchstart", handler, { passive: false });
-  });
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("touchstart", handler, { passive: false });
+  }
+
+  window.__basefn_resizable[id] = cb;
+}`)
+
+// Lazily attach mousedown/touchstart directly to a handle element.
+// Called from onMouseEnter so the element is guaranteed to exist.
+let initHandle: (Dom.element, int, (int, Dom.event) => unit) => unit = %raw(`function(el, idx, cb) {
+  if (el._basefnInit) return;
+  el._basefnInit = true;
+  el.addEventListener("mousedown", function(e) { cb(idx, e); });
+  el.addEventListener("touchstart", function(e) { cb(idx, e); }, { passive: false });
+}`)
+
+let getCurrentTarget: Dom.event => Dom.element = %raw(`function(e) {
+  return e.currentTarget;
 }`)
 
 type dragInfo = {
@@ -234,15 +259,15 @@ let make = (
     }
   }
 
-  // Set up mousedown/touchstart via event delegation
-  setupDragListeners(containerId, startDrag)
+  // Register this instance for global event delegation
+  registerInstance(containerId, startDrag)
 
   let containerClass =
     "basefn-resizable basefn-resizable--" ++
     directionToString(direction) ++
     (class !== "" ? " " ++ class : "")
 
-  let elements: array<Component.node> = []
+  let elements: array<Node.node> = []
 
   panels->Array.forEachWithIndex((panel, index) => {
     let panelStyle = Computed.make(() => {
@@ -275,6 +300,10 @@ let make = (
         <div
           key={"handle-" ++ Int.toString(index)}
           class={handleClass}
+          onMouseEnter={evt => {
+            let el = getCurrentTarget(evt)
+            initHandle(el, index, startDrag)
+          }}
           onKeyDown={evt => handleKeyDown(index, evt)}
           role="separator"
           tabIndex={0}
@@ -285,5 +314,5 @@ let make = (
     }
   })
 
-  <div id={containerId} class={containerClass}> {elements->Component.fragment} </div>
+  <div id={containerId} class={containerClass}> {elements->Node.fragment} </div>
 }

package/src/components/Basefn__Resizable.res.mjs

@@ -1,8 +1,10 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote from "xote/src/Xote.res.mjs";
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Node$Xote from "xote/src/Node.res.mjs";
+import * as Signal$Xote from "xote/src/Signal.res.mjs";
 import * as Core__Option from "@rescript/core/src/Core__Option.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
+import * as Computed$Xote from "xote/src/Computed.res.mjs";
 
 import './Basefn__Resizable.css'
 ;
@@ -63,27 +65,49 @@ let genId = (function() {
   return "basefn-resizable-" + Math.random().toString(36).substr(2, 9);
 });
 
-let setupDragListeners = (function(containerId, onStart) {
-  requestAnimationFrame(function() {
-    var container = document.getElementById(containerId);
-    if (!container) return;
+let registerInstance = (function(id, cb) {
+  if (!window.__basefn_resizable) {
+    window.__basefn_resizable = {};
 
     function handler(e) {
       var target = e.target;
-      var handle = target.closest ? target.closest(".basefn-resizable__handle") : null;
-      if (!handle || !container.contains(handle)) return;
-      var handles = container.querySelectorAll(".basefn-resizable__handle");
-      for (var i = 0; i < handles.length; i++) {
-        if (handles[i] === handle) {
-          onStart(i, e);
-          return;
+      if (!target || !target.closest) return;
+      var handle = target.closest(".basefn-resizable__handle");
+      if (!handle) return;
+      var container = handle.closest(".basefn-resizable");
+      if (!container || !container.id) return;
+      var entry = window.__basefn_resizable[container.id];
+      if (!entry) return;
+      // Find the handle index among direct children of the container
+      var children = container.children;
+      var handleIndex = 0;
+      for (var i = 0; i < children.length; i++) {
+        if (children[i].classList.contains("basefn-resizable__handle")) {
+          if (children[i] === handle) {
+            entry(handleIndex, e);
+            return;
+          }
+          handleIndex++;
         }
       }
     }
 
-    container.addEventListener("mousedown", handler);
-    container.addEventListener("touchstart", handler, { passive: false });
-  });
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("touchstart", handler, { passive: false });
+  }
+
+  window.__basefn_resizable[id] = cb;
+});
+
+let initHandle = (function(el, idx, cb) {
+  if (el._basefnInit) return;
+  el._basefnInit = true;
+  el.addEventListener("mousedown", function(e) { cb(idx, e); });
+  el.addEventListener("touchstart", function(e) { cb(idx, e); }, { passive: false });
+});
+
+let getCurrentTarget = (function(e) {
+  return e.currentTarget;
 });
 
 function Basefn__Resizable(props) {
@@ -96,8 +120,8 @@ function Basefn__Resizable(props) {
   let withHandle = __withHandle !== undefined ? __withHandle : true;
   let $$class = __class !== undefined ? __class : "";
   let containerId = genId();
-  let sizes = Xote.Signal.make(panels.map(p => p.defaultSize), undefined, undefined);
-  let isDragging = Xote.Signal.make(false, undefined, undefined);
+  let sizes = Signal$Xote.make(panels.map(p => p.defaultSize), undefined, undefined);
+  let isDragging = Signal$Xote.make(false, undefined, undefined);
   let dragRef = {
     contents: undefined
   };
@@ -152,7 +176,7 @@ function Basefn__Resizable(props) {
     }
   };
   let applySizes = newSizes => {
-    Xote.Signal.set(sizes, newSizes);
+    Signal$Xote.set(sizes, newSizes);
     if (onResize !== undefined) {
       return onResize(newSizes);
     }
@@ -173,14 +197,14 @@ function Basefn__Resizable(props) {
     let origLeft = info.startSizes[li];
     let origRight = info.startSizes[ri];
     let match = clampSizes(li, ri, origLeft + deltaPercent, origRight - deltaPercent);
-    let newSizes = Xote.Signal.get(sizes).slice();
+    let newSizes = Signal$Xote.get(sizes).slice();
     newSizes[li] = match[0];
     newSizes[ri] = match[1];
     applySizes(newSizes);
   };
   let onMouseUp = param => {
     dragRef.contents = undefined;
-    Xote.Signal.set(isDragging, false);
+    Signal$Xote.set(isDragging, false);
     enableSelect();
     removeDocListener("mousemove", onMouseMove);
     removeDocListener("mouseup", onMouseUp);
@@ -195,10 +219,10 @@ function Basefn__Resizable(props) {
       dragRef.contents = {
         handleIndex: handleIndex,
         startPos: getPos(evt),
-        startSizes: Xote.Signal.get(sizes).slice(),
+        startSizes: Signal$Xote.get(sizes).slice(),
         container: maybeContainer
       };
-      Xote.Signal.set(isDragging, true);
+      Signal$Xote.set(isDragging, true);
       disableSelect();
       addDocListener("mousemove", onMouseMove);
       addDocListener("mouseup", onMouseUp);
@@ -206,25 +230,25 @@ function Basefn__Resizable(props) {
       return addDocListener("touchend", onMouseUp);
     }
   };
-  setupDragListeners(containerId, startDrag);
+  registerInstance(containerId, startDrag);
   let containerClass = "basefn-resizable basefn-resizable--" + directionToString(direction) + (
     $$class !== "" ? " " + $$class : ""
   );
   let elements = [];
   panels.forEach((panel, index) => {
-    let panelStyle = Xote.Computed.make(() => {
-      let size = Xote.Signal.get(sizes)[index];
+    let panelStyle = Computed$Xote.make(() => {
+      let size = Signal$Xote.get(sizes)[index];
       return "flex-basis:" + size.toString() + "%;flex-grow:0;flex-shrink:0";
     }, undefined);
-    let panelClass = Xote.Computed.make(() => {
+    let panelClass = Computed$Xote.make(() => {
       let base = "basefn-resizable__panel";
-      if (Xote.Signal.get(isDragging)) {
+      if (Signal$Xote.get(isDragging)) {
         return base + " basefn-resizable__panel--dragging";
       } else {
         return base;
       }
     }, undefined);
-    elements.push(Xote__JSX.Elements.jsxKeyed("div", {
+    elements.push(XoteJSX$Xote.Elements.jsxKeyed("div", {
       class: panelClass,
       style: panelStyle,
       children: panel.content
@@ -235,14 +259,14 @@ function Basefn__Resizable(props) {
     let handleClass = "basefn-resizable__handle basefn-resizable__handle--" + directionToString(direction) + (
       withHandle ? " basefn-resizable__handle--with-grip" : ""
     );
-    elements.push(Xote__JSX.Elements.jsxKeyed("div", {
+    elements.push(XoteJSX$Xote.Elements.jsxKeyed("div", {
       class: handleClass,
       role: "separator",
       tabIndex: 0,
       onKeyDown: evt => {
         let key = getKey(evt);
         let ri = index + 1 | 0;
-        let currentSizes = Xote.Signal.get(sizes);
+        let currentSizes = Signal$Xote.get(sizes);
         let left = currentSizes[index];
         let right = currentSizes[ri];
         let delta;
@@ -279,15 +303,19 @@ function Basefn__Resizable(props) {
         newSizes[ri] = match[1];
         applySizes(newSizes);
       },
-      children: withHandle ? Xote__JSX.Elements.jsx("div", {
+      onMouseEnter: evt => {
+        let el = getCurrentTarget(evt);
+        initHandle(el, index, startDrag);
+      },
+      children: withHandle ? XoteJSX$Xote.Elements.jsx("div", {
           class: "basefn-resizable__handle-grip"
-        }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+        }) : XoteJSX$Xote.jsx(XoteJSX$Xote.jsxFragment, {})
     }, "handle-" + index.toString(), undefined));
   });
-  return Xote__JSX.Elements.jsx("div", {
+  return XoteJSX$Xote.Elements.jsx("div", {
     id: containerId,
     class: containerClass,
-    children: Xote.Component.fragment(elements)
+    children: Node$Xote.fragment(elements)
   });
 }
 
@@ -307,7 +335,9 @@ export {
   getEventTarget,
   preventDefault,
   genId,
-  setupDragListeners,
+  registerInstance,
+  initHandle,
+  getCurrentTarget,
   make,
 }
 /*  Not a pure module */

package/src/components/Basefn__ScrollArea.res

@@ -29,7 +29,7 @@ let make = (
   ~maxHeight: option<string>=?,
   ~maxWidth: option<string>=?,
   ~className: option<string>=?,
-  ~children: Component.node,
+  ~children: Node.node,
 ) => {
   let getClassName = () => {
     let baseClass = "basefn-scroll-area"

package/src/components/Basefn__ScrollArea.res.mjs

@@ -1,6 +1,6 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
 
 import './Basefn__ScrollArea.css'
 ;
@@ -46,7 +46,7 @@ function Basefn__ScrollArea(props) {
     let maxWidthStyle = maxWidth !== undefined ? "max-width: " + maxWidth + ";" : "";
     return maxHeightStyle + maxWidthStyle;
   };
-  return Xote__JSX.Elements.jsx("div", {
+  return XoteJSX$Xote.Elements.jsx("div", {
     class: getClassName(),
     style: getStyle(),
     children: props.children

package/src/components/Basefn__Select.res

@@ -26,8 +26,8 @@ let make = (
     }
   }
   <select name="test" class="basefn-select" value={value} disabled onChange>
-    {Component.list(options, opt =>
-      <option value={opt.value}> {Component.text(opt.label)} </option>
+    {Node.list(options, opt =>
+      <option value={opt.value}> {Node.text(opt.label)} </option>
     )}
   </select>
 }

package/src/components/Basefn__Select.res.mjs

@@ -1,7 +1,8 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote from "xote/src/Xote.res.mjs";
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Node$Xote from "xote/src/Node.res.mjs";
+import * as Signal$Xote from "xote/src/Signal.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
 
 import './Basefn__Select.css'
 ;
@@ -14,20 +15,20 @@ function Basefn__Select(props) {
   let onChange$1 = e => {
     let t = e.target;
     let v = t.value;
-    Xote.Signal.set(value, v);
+    Signal$Xote.set(value, v);
     if (onChange !== undefined) {
       return onChange(v);
     }
   };
-  return Xote__JSX.Elements.jsx("select", {
+  return XoteJSX$Xote.Elements.jsx("select", {
     class: "basefn-select",
     name: "test",
     value: value,
     disabled: disabled,
     onChange: onChange$1,
-    children: Xote.Component.list(props.options, opt => Xote__JSX.Elements.jsx("option", {
+    children: Node$Xote.list(props.options, opt => XoteJSX$Xote.Elements.jsx("option", {
       value: opt.value,
-      children: Xote.Component.text(opt.label)
+      children: Node$Xote.text(opt.label)
     }))
   });
 }

package/src/components/Basefn__Separator.res

@@ -37,7 +37,7 @@ let make = (
   | Some(text) =>
     <div class={getClassName() ++ " basefn-separator--with-label"}>
       <div class="basefn-separator__line" />
-      <span class="basefn-separator__label"> {Component.text(text)} </span>
+      <span class="basefn-separator__label"> {Node.text(text)} </span>
       <div class="basefn-separator__line" />
     </div>
   | None => <div class={getClassName()} role="separator" />

package/src/components/Basefn__Separator.res.mjs

@@ -1,7 +1,7 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
-import * as Xote from "xote/src/Xote.res.mjs";
-import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+import * as Node$Xote from "xote/src/Node.res.mjs";
+import * as XoteJSX$Xote from "xote/src/XoteJSX.res.mjs";
 
 import './Basefn__Separator.css'
 ;
@@ -37,23 +37,23 @@ function Basefn__Separator(props) {
     return "basefn-separator " + orientationClass + " " + variantClass;
   };
   if (label !== undefined) {
-    return Xote__JSX.Elements.jsxs("div", {
+    return XoteJSX$Xote.Elements.jsxs("div", {
       class: getClassName() + " basefn-separator--with-label",
-      children: Xote__JSX.array([
-        Xote__JSX.Elements.jsx("div", {
+      children: XoteJSX$Xote.array([
+        XoteJSX$Xote.Elements.jsx("div", {
           class: "basefn-separator__line"
         }),
-        Xote__JSX.Elements.jsx("span", {
+        XoteJSX$Xote.Elements.jsx("span", {
           class: "basefn-separator__label",
-          children: Xote.Component.text(label)
+          children: Node$Xote.text(label)
         }),
-        Xote__JSX.Elements.jsx("div", {
+        XoteJSX$Xote.Elements.jsx("div", {
           class: "basefn-separator__line"
         })
       ])
     });
   } else {
-    return Xote__JSX.Elements.jsx("div", {
+    return XoteJSX$Xote.Elements.jsx("div", {
       class: getClassName(),
       role: "separator"
     });