basefn 1.9.1 → 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.css

@@ -0,0 +1,156 @@
+@import "../styles/variables.css";
+
+/* Panel Group Container */
+.basefn-resizable {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.basefn-resizable--horizontal {
+  flex-direction: row;
+}
+
+.basefn-resizable--vertical {
+  flex-direction: column;
+}
+
+/* Panel */
+.basefn-resizable__panel {
+  overflow: auto;
+}
+
+.basefn-resizable__panel--dragging {
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Handle */
+.basefn-resizable__handle {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  outline: none;
+  background: transparent;
+  border: 0;
+  padding: 0;
+}
+
+.basefn-resizable__handle--horizontal {
+  width: 8px;
+  cursor: col-resize;
+}
+
+.basefn-resizable__handle--vertical {
+  height: 8px;
+  cursor: row-resize;
+}
+
+/* Handle visible line */
+.basefn-resizable__handle::after {
+  content: "";
+  position: absolute;
+  background-color: var(--basefn-border-primary);
+  transition: background-color var(--basefn-transition-fast);
+}
+
+.basefn-resizable__handle--horizontal::after {
+  width: 1px;
+  height: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.basefn-resizable__handle--vertical::after {
+  height: 1px;
+  width: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.basefn-resizable__handle:hover::after,
+.basefn-resizable__handle:focus-visible::after {
+  background-color: var(--basefn-color-primary);
+}
+
+/* Grip indicator */
+.basefn-resizable__handle-grip {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--basefn-radius-sm);
+  background-color: var(--basefn-border-primary);
+  border: 1px solid var(--basefn-border-secondary);
+  transition:
+    background-color var(--basefn-transition-fast),
+    border-color var(--basefn-transition-fast);
+}
+
+.basefn-resizable__handle--horizontal .basefn-resizable__handle-grip {
+  width: 12px;
+  height: 24px;
+}
+
+.basefn-resizable__handle--vertical .basefn-resizable__handle-grip {
+  width: 24px;
+  height: 12px;
+}
+
+/* Grip dots pattern */
+.basefn-resizable__handle-grip::after {
+  content: "";
+  display: block;
+  border-radius: var(--basefn-radius-full);
+}
+
+.basefn-resizable__handle--horizontal .basefn-resizable__handle-grip::after {
+  width: 4px;
+  height: 16px;
+  background-image: radial-gradient(
+    circle,
+    var(--basefn-text-muted) 1px,
+    transparent 1px
+  );
+  background-size: 4px 4px;
+  background-position: center;
+  background-repeat: repeat;
+}
+
+.basefn-resizable__handle--vertical .basefn-resizable__handle-grip::after {
+  width: 16px;
+  height: 4px;
+  background-image: radial-gradient(
+    circle,
+    var(--basefn-text-muted) 1px,
+    transparent 1px
+  );
+  background-size: 4px 4px;
+  background-position: center;
+  background-repeat: repeat;
+}
+
+/* Hover and focus states */
+.basefn-resizable__handle:hover .basefn-resizable__handle-grip,
+.basefn-resizable__handle:focus-visible .basefn-resizable__handle-grip {
+  background-color: var(--basefn-bg-tertiary);
+  border-color: var(--basefn-color-primary);
+}
+
+.basefn-resizable__handle:focus-visible .basefn-resizable__handle-grip {
+  box-shadow: 0 0 0 var(--basefn-focus-ring-width) var(--basefn-focus-ring-color);
+}
+
+/* Hide line when grip is present */
+.basefn-resizable__handle--with-grip::after {
+  background-color: transparent;
+}
+
+.basefn-resizable__handle--with-grip:hover::after,
+.basefn-resizable__handle--with-grip:focus-visible::after {
+  background-color: transparent;
+}

package/src/components/Basefn__Resizable.res

@@ -0,0 +1,318 @@
+%%raw(`import './Basefn__Resizable.css'`)
+
+open Xote
+
+type direction = Horizontal | Vertical
+
+type panel = {
+  content: Node.node,
+  defaultSize: float,
+  minSize?: float,
+  maxSize?: float,
+}
+
+let directionToString = (d: direction) =>
+  switch d {
+  | Horizontal => "horizontal"
+  | Vertical => "vertical"
+  }
+
+// DOM helpers
+let getClientX: Dom.event => float = %raw(`function(e) {
+  var t = e.touches ? e.touches[0] : e;
+  return t.clientX;
+}`)
+
+let getClientY: Dom.event => float = %raw(`function(e) {
+  var t = e.touches ? e.touches[0] : e;
+  return t.clientY;
+}`)
+
+let addDocListener: (string, Dom.event => unit) => unit = %raw(`function(ev, fn) {
+  document.addEventListener(ev, fn);
+}`)
+
+let removeDocListener: (string, Dom.event => unit) => unit = %raw(`function(ev, fn) {
+  document.removeEventListener(ev, fn);
+}`)
+
+let disableSelect: unit => unit = %raw(`function() {
+  document.body.style.userSelect = "none";
+  document.body.style.webkitUserSelect = "none";
+}`)
+
+let enableSelect: unit => unit = %raw(`function() {
+  document.body.style.userSelect = "";
+  document.body.style.webkitUserSelect = "";
+}`)
+
+let findClosest: (Dom.element, string) => Nullable.t<Dom.element> = %raw(`function(el, sel) {
+  return el.closest(sel);
+}`)
+
+let getElementRect: Dom.element => {..} = %raw(`function(el) {
+  return el.getBoundingClientRect();
+}`)
+
+let getKey: Dom.event => string = %raw(`function(e) { return e.key || "" }`)
+
+let getEventTarget: Dom.event => Dom.element = %raw(`function(e) {
+  return e.target;
+}`)
+
+let preventDefault: Dom.event => unit = %raw(`function(e) { e.preventDefault() }`)
+
+let genId: unit => string = %raw(`function() {
+  return "basefn-resizable-" + Math.random().toString(36).substr(2, 9);
+}`)
+
+// 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;
+      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++;
+        }
+      }
+    }
+
+    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 = {
+  handleIndex: int,
+  startPos: float,
+  startSizes: array<float>,
+  container: Dom.element,
+}
+
+@jsx.component
+let make = (
+  ~panels: array<panel>,
+  ~direction: direction=Horizontal,
+  ~withHandle: bool=true,
+  ~onResize: option<array<float> => unit>=?,
+  ~class: string="",
+) => {
+  let containerId = genId()
+  let sizes = Signal.make(panels->Array.map(p => p.defaultSize))
+  let isDragging = Signal.make(false)
+  let dragRef: ref<option<dragInfo>> = ref(None)
+
+  let getPos = (evt: Dom.event) =>
+    switch direction {
+    | Horizontal => getClientX(evt)
+    | Vertical => getClientY(evt)
+    }
+
+  let getContainerDimension = (container: Dom.element) => {
+    let rect = getElementRect(container)
+    switch direction {
+    | Horizontal => Obj.magic(rect)["width"]
+    | Vertical => Obj.magic(rect)["height"]
+    }
+  }
+
+  let clampSizes = (leftIdx: int, rightIdx: int, newLeft: float, newRight: float) => {
+    let lp = panels->Array.getUnsafe(leftIdx)
+    let rp = panels->Array.getUnsafe(rightIdx)
+    let lMin = lp.minSize->Option.getOr(0.0)
+    let lMax = lp.maxSize->Option.getOr(100.0)
+    let rMin = rp.minSize->Option.getOr(0.0)
+    let rMax = rp.maxSize->Option.getOr(100.0)
+    let total = newLeft +. newRight
+
+    if newLeft < lMin {
+      (lMin, total -. lMin)
+    } else if newLeft > lMax {
+      (lMax, total -. lMax)
+    } else if newRight < rMin {
+      (total -. rMin, rMin)
+    } else if newRight > rMax {
+      (total -. rMax, rMax)
+    } else {
+      (newLeft, newRight)
+    }
+  }
+
+  let applySizes = (newSizes: array<float>) => {
+    Signal.set(sizes, newSizes)
+    switch onResize {
+    | Some(cb) => cb(newSizes)
+    | None => ()
+    }
+  }
+
+  let onMouseMove = (evt: Dom.event) => {
+    switch dragRef.contents {
+    | None => ()
+    | Some(info) =>
+      let containerSize = getContainerDimension(info.container)
+      if containerSize > 0.0 {
+        let delta = getPos(evt) -. info.startPos
+        let deltaPercent = delta /. containerSize *. 100.0
+        let li = info.handleIndex
+        let ri = info.handleIndex + 1
+        let origLeft = info.startSizes->Array.getUnsafe(li)
+        let origRight = info.startSizes->Array.getUnsafe(ri)
+        let (nl, nr) = clampSizes(li, ri, origLeft +. deltaPercent, origRight -. deltaPercent)
+        let newSizes = Signal.get(sizes)->Array.copy
+        newSizes->Array.setUnsafe(li, nl)
+        newSizes->Array.setUnsafe(ri, nr)
+        applySizes(newSizes)
+      }
+    }
+  }
+
+  let rec onMouseUp = (_: Dom.event) => {
+    dragRef := None
+    Signal.set(isDragging, false)
+    enableSelect()
+    removeDocListener("mousemove", onMouseMove)
+    removeDocListener("mouseup", onMouseUp)
+    removeDocListener("touchmove", onMouseMove)
+    removeDocListener("touchend", onMouseUp)
+  }
+
+  let startDrag = (handleIndex: int, evt: Dom.event) => {
+    preventDefault(evt)
+    let target = getEventTarget(evt)
+    let maybeContainer = findClosest(target, ".basefn-resizable")
+    switch Nullable.toOption(maybeContainer) {
+    | None => ()
+    | Some(container) =>
+      dragRef := Some({
+        handleIndex,
+        startPos: getPos(evt),
+        startSizes: Signal.get(sizes)->Array.copy,
+        container,
+      })
+      Signal.set(isDragging, true)
+      disableSelect()
+      addDocListener("mousemove", onMouseMove)
+      addDocListener("mouseup", onMouseUp)
+      addDocListener("touchmove", onMouseMove)
+      addDocListener("touchend", onMouseUp)
+    }
+  }
+
+  let handleKeyDown = (handleIndex: int, evt: Dom.event) => {
+    let key = getKey(evt)
+    let step = 1.0
+    let li = handleIndex
+    let ri = handleIndex + 1
+    let currentSizes = Signal.get(sizes)
+    let left = currentSizes->Array.getUnsafe(li)
+    let right = currentSizes->Array.getUnsafe(ri)
+
+    let delta = switch (direction, key) {
+    | (Horizontal, "ArrowLeft") | (Vertical, "ArrowUp") => Some(-.step)
+    | (Horizontal, "ArrowRight") | (Vertical, "ArrowDown") => Some(step)
+    | _ => None
+    }
+
+    switch delta {
+    | Some(d) =>
+      preventDefault(evt)
+      let (nl, nr) = clampSizes(li, ri, left +. d, right -. d)
+      let newSizes = currentSizes->Array.copy
+      newSizes->Array.setUnsafe(li, nl)
+      newSizes->Array.setUnsafe(ri, nr)
+      applySizes(newSizes)
+    | None => ()
+    }
+  }
+
+  // Register this instance for global event delegation
+  registerInstance(containerId, startDrag)
+
+  let containerClass =
+    "basefn-resizable basefn-resizable--" ++
+    directionToString(direction) ++
+    (class !== "" ? " " ++ class : "")
+
+  let elements: array<Node.node> = []
+
+  panels->Array.forEachWithIndex((panel, index) => {
+    let panelStyle = Computed.make(() => {
+      let size = Signal.get(sizes)->Array.getUnsafe(index)
+      "flex-basis:" ++ Float.toString(size) ++ "%;flex-grow:0;flex-shrink:0"
+    })
+
+    let panelClass = Computed.make(() => {
+      let base = "basefn-resizable__panel"
+      if Signal.get(isDragging) {
+        base ++ " basefn-resizable__panel--dragging"
+      } else {
+        base
+      }
+    })
+
+    elements->Array.push(
+      <div key={"panel-" ++ Int.toString(index)} class={panelClass} style={panelStyle}>
+        {panel.content}
+      </div>,
+    )
+
+    if index < Array.length(panels) - 1 {
+      let handleClass =
+        "basefn-resizable__handle basefn-resizable__handle--" ++
+        directionToString(direction) ++
+        (withHandle ? " basefn-resizable__handle--with-grip" : "")
+
+      elements->Array.push(
+        <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}
+        >
+          {withHandle ? <div class="basefn-resizable__handle-grip" /> : <> </>}
+        </div>,
+      )
+    }
+  })
+
+  <div id={containerId} class={containerClass}> {elements->Node.fragment} </div>
+}