basefn 1.9.1 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basefn",
-  "version": "1.9.1",
+  "version": "1.10.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/brnrdog/basefn.git"
@@ -80,7 +80,7 @@
     "@semantic-release/github": "^12.0.2",
     "@semantic-release/npm": "^13.1.3",
     "rescript": "^12.0.1",
-    "vite": "^5.0.0",
+    "vite": "^8.0.0",
     "xote": "^4.12.0"
   }
 }

package/src/Basefn.res

@@ -72,6 +72,8 @@ type gridJustifyContent = Basefn__Grid.justifyContent
 type gridAlignContent = Basefn__Grid.alignContent
 type gridItemColumnSpan = Basefn__Grid.Item.columnSpan
 type gridItemRowSpan = Basefn__Grid.Item.rowSpan
+type resizableDirection = Basefn__Resizable.direction
+type resizablePanel = Basefn__Resizable.panel
 type breakpoint = Basefn__Responsive.breakpoint
 type currentBreakpoint = Basefn__Responsive.currentBreakpoint
 type responsiveValue<'a> = Basefn__Responsive.responsiveValue<'a>
@@ -231,6 +233,9 @@ module ContextMenu = {
 module Spotlight = {
   include Basefn__Spotlight
 }
+module Resizable = {
+  include Basefn__Resizable
+}
 
 // Responsive Utilities
 module Responsive = {

package/src/Basefn.res.mjs

@@ -35,6 +35,7 @@ import * as Basefn__Timeline from "./components/Basefn__Timeline.res.mjs";
 import * as Basefn__Accordion from "./components/Basefn__Accordion.res.mjs";
 import * as Basefn__AppLayout from "./components/Basefn__AppLayout.res.mjs";
 import * as Basefn__HoverCard from "./components/Basefn__HoverCard.res.mjs";
+import * as Basefn__Resizable from "./components/Basefn__Resizable.res.mjs";
 import * as Basefn__Separator from "./components/Basefn__Separator.res.mjs";
 import * as Basefn__Spotlight from "./components/Basefn__Spotlight.res.mjs";
 import * as Basefn__Breadcrumb from "./components/Basefn__Breadcrumb.res.mjs";
@@ -143,6 +144,8 @@ let ContextMenu = Basefn__ContextMenu;
 
 let Spotlight = Basefn__Spotlight;
 
+let Resizable = Basefn__Resizable;
+
 let Responsive = Basefn__Responsive;
 
 export {
@@ -192,6 +195,7 @@ export {
   AlertDialog,
   ContextMenu,
   Spotlight,
+  Resizable,
   Responsive,
 }
 /*  Not a pure module */

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,289 @@
+%%raw(`import './Basefn__Resizable.css'`)
+
+open Xote
+
+type direction = Horizontal | Vertical
+
+type panel = {
+  content: Component.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);
+}`)
+
+// 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;
+
+    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;
+        }
+      }
+    }
+
+    container.addEventListener("mousedown", handler);
+    container.addEventListener("touchstart", handler, { passive: false });
+  });
+}`)
+
+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 => ()
+    }
+  }
+
+  // Set up mousedown/touchstart via event delegation
+  setupDragListeners(containerId, startDrag)
+
+  let containerClass =
+    "basefn-resizable basefn-resizable--" ++
+    directionToString(direction) ++
+    (class !== "" ? " " ++ class : "")
+
+  let elements: array<Component.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}
+          onKeyDown={evt => handleKeyDown(index, evt)}
+          role="separator"
+          tabIndex={0}
+        >
+          {withHandle ? <div class="basefn-resizable__handle-grip" /> : <> </>}
+        </div>,
+      )
+    }
+  })
+
+  <div id={containerId} class={containerClass}> {elements->Component.fragment} </div>
+}

package/src/components/Basefn__Resizable.res.mjs

@@ -0,0 +1,313 @@
+// 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 Core__Option from "@rescript/core/src/Core__Option.res.mjs";
+
+import './Basefn__Resizable.css'
+;
+
+function directionToString(d) {
+  if (d === "Horizontal") {
+    return "horizontal";
+  } else {
+    return "vertical";
+  }
+}
+
+let getClientX = (function(e) {
+  var t = e.touches ? e.touches[0] : e;
+  return t.clientX;
+});
+
+let getClientY = (function(e) {
+  var t = e.touches ? e.touches[0] : e;
+  return t.clientY;
+});
+
+let addDocListener = (function(ev, fn) {
+  document.addEventListener(ev, fn);
+});
+
+let removeDocListener = (function(ev, fn) {
+  document.removeEventListener(ev, fn);
+});
+
+let disableSelect = (function() {
+  document.body.style.userSelect = "none";
+  document.body.style.webkitUserSelect = "none";
+});
+
+let enableSelect = (function() {
+  document.body.style.userSelect = "";
+  document.body.style.webkitUserSelect = "";
+});
+
+let findClosest = (function(el, sel) {
+  return el.closest(sel);
+});
+
+let getElementRect = (function(el) {
+  return el.getBoundingClientRect();
+});
+
+let getKey = (function(e) { return e.key || "" });
+
+let getEventTarget = (function(e) {
+  return e.target;
+});
+
+let preventDefault = (function(e) { e.preventDefault() });
+
+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;
+
+    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;
+        }
+      }
+    }
+
+    container.addEventListener("mousedown", handler);
+    container.addEventListener("touchstart", handler, { passive: false });
+  });
+});
+
+function Basefn__Resizable(props) {
+  let __class = props.class;
+  let onResize = props.onResize;
+  let __withHandle = props.withHandle;
+  let __direction = props.direction;
+  let panels = props.panels;
+  let direction = __direction !== undefined ? __direction : "Horizontal";
+  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 dragRef = {
+    contents: undefined
+  };
+  let getPos = evt => {
+    if (direction === "Horizontal") {
+      return getClientX(evt);
+    } else {
+      return getClientY(evt);
+    }
+  };
+  let getContainerDimension = container => {
+    let rect = getElementRect(container);
+    if (direction === "Horizontal") {
+      return rect.width;
+    } else {
+      return rect.height;
+    }
+  };
+  let clampSizes = (leftIdx, rightIdx, newLeft, newRight) => {
+    let lp = panels[leftIdx];
+    let rp = panels[rightIdx];
+    let lMin = Core__Option.getOr(lp.minSize, 0.0);
+    let lMax = Core__Option.getOr(lp.maxSize, 100.0);
+    let rMin = Core__Option.getOr(rp.minSize, 0.0);
+    let rMax = Core__Option.getOr(rp.maxSize, 100.0);
+    let total = newLeft + newRight;
+    if (newLeft < lMin) {
+      return [
+        lMin,
+        total - lMin
+      ];
+    } else if (newLeft > lMax) {
+      return [
+        lMax,
+        total - lMax
+      ];
+    } else if (newRight < rMin) {
+      return [
+        total - rMin,
+        rMin
+      ];
+    } else if (newRight > rMax) {
+      return [
+        total - rMax,
+        rMax
+      ];
+    } else {
+      return [
+        newLeft,
+        newRight
+      ];
+    }
+  };
+  let applySizes = newSizes => {
+    Xote.Signal.set(sizes, newSizes);
+    if (onResize !== undefined) {
+      return onResize(newSizes);
+    }
+  };
+  let onMouseMove = evt => {
+    let info = dragRef.contents;
+    if (info === undefined) {
+      return;
+    }
+    let containerSize = getContainerDimension(info.container);
+    if (containerSize <= 0.0) {
+      return;
+    }
+    let delta = getPos(evt) - info.startPos;
+    let deltaPercent = delta / containerSize * 100.0;
+    let li = info.handleIndex;
+    let ri = info.handleIndex + 1 | 0;
+    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();
+    newSizes[li] = match[0];
+    newSizes[ri] = match[1];
+    applySizes(newSizes);
+  };
+  let onMouseUp = param => {
+    dragRef.contents = undefined;
+    Xote.Signal.set(isDragging, false);
+    enableSelect();
+    removeDocListener("mousemove", onMouseMove);
+    removeDocListener("mouseup", onMouseUp);
+    removeDocListener("touchmove", onMouseMove);
+    removeDocListener("touchend", onMouseUp);
+  };
+  let startDrag = (handleIndex, evt) => {
+    preventDefault(evt);
+    let target = getEventTarget(evt);
+    let maybeContainer = findClosest(target, ".basefn-resizable");
+    if (!(maybeContainer == null)) {
+      dragRef.contents = {
+        handleIndex: handleIndex,
+        startPos: getPos(evt),
+        startSizes: Xote.Signal.get(sizes).slice(),
+        container: maybeContainer
+      };
+      Xote.Signal.set(isDragging, true);
+      disableSelect();
+      addDocListener("mousemove", onMouseMove);
+      addDocListener("mouseup", onMouseUp);
+      addDocListener("touchmove", onMouseMove);
+      return addDocListener("touchend", onMouseUp);
+    }
+  };
+  setupDragListeners(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];
+      return "flex-basis:" + size.toString() + "%;flex-grow:0;flex-shrink:0";
+    }, undefined);
+    let panelClass = Xote.Computed.make(() => {
+      let base = "basefn-resizable__panel";
+      if (Xote.Signal.get(isDragging)) {
+        return base + " basefn-resizable__panel--dragging";
+      } else {
+        return base;
+      }
+    }, undefined);
+    elements.push(Xote__JSX.Elements.jsxKeyed("div", {
+      class: panelClass,
+      style: panelStyle,
+      children: panel.content
+    }, "panel-" + index.toString(), undefined));
+    if (index >= (panels.length - 1 | 0)) {
+      return;
+    }
+    let handleClass = "basefn-resizable__handle basefn-resizable__handle--" + directionToString(direction) + (
+      withHandle ? " basefn-resizable__handle--with-grip" : ""
+    );
+    elements.push(Xote__JSX.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 left = currentSizes[index];
+        let right = currentSizes[ri];
+        let delta;
+        if (direction === "Horizontal") {
+          switch (key) {
+            case "ArrowLeft" :
+              delta = - 1.0;
+              break;
+            case "ArrowRight" :
+              delta = 1.0;
+              break;
+            default:
+              delta = undefined;
+          }
+        } else {
+          switch (key) {
+            case "ArrowDown" :
+              delta = 1.0;
+              break;
+            case "ArrowUp" :
+              delta = - 1.0;
+              break;
+            default:
+              delta = undefined;
+          }
+        }
+        if (delta === undefined) {
+          return;
+        }
+        preventDefault(evt);
+        let match = clampSizes(index, ri, left + delta, right - delta);
+        let newSizes = currentSizes.slice();
+        newSizes[index] = match[0];
+        newSizes[ri] = match[1];
+        applySizes(newSizes);
+      },
+      children: withHandle ? Xote__JSX.Elements.jsx("div", {
+          class: "basefn-resizable__handle-grip"
+        }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+    }, "handle-" + index.toString(), undefined));
+  });
+  return Xote__JSX.Elements.jsx("div", {
+    id: containerId,
+    class: containerClass,
+    children: Xote.Component.fragment(elements)
+  });
+}
+
+let make = Basefn__Resizable;
+
+export {
+  directionToString,
+  getClientX,
+  getClientY,
+  addDocListener,
+  removeDocListener,
+  disableSelect,
+  enableSelect,
+  findClosest,
+  getElementRect,
+  getKey,
+  getEventTarget,
+  preventDefault,
+  genId,
+  setupDragListeners,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Spotlight.res

@@ -65,10 +65,18 @@ let make = (
     | "ArrowDown" => {
         let _ = Basefn__Dom.preventDefault(evt)
         Signal.update(activeIndex, i => mod(i + 1, max(len, 1)))
+        let _ = %raw(`requestAnimationFrame(() => {
+          const el = document.querySelector(".basefn-spotlight__item--active");
+          if (el) el.scrollIntoView({ block: "nearest" });
+        })`)
       }
     | "ArrowUp" => {
         let _ = Basefn__Dom.preventDefault(evt)
         Signal.update(activeIndex, i => mod(i - 1 + max(len, 1), max(len, 1)))
+        let _ = %raw(`requestAnimationFrame(() => {
+          const el = document.querySelector(".basefn-spotlight__item--active");
+          if (el) el.scrollIntoView({ block: "nearest" });
+        })`)
       }
     | "Enter" =>
       if len > 0 {

package/src/components/Basefn__Spotlight.res.mjs

@@ -54,10 +54,20 @@ function Basefn__Spotlight(props) {
     switch (k) {
       case "ArrowDown" :
         Basefn__Dom.preventDefault(evt);
-        return Xote.Signal.update(activeIndex, i => Primitive_int.mod_(i + 1 | 0, Primitive_int.max(len, 1)));
+        Xote.Signal.update(activeIndex, i => Primitive_int.mod_(i + 1 | 0, Primitive_int.max(len, 1)));
+        ((requestAnimationFrame(() => {
+          const el = document.querySelector(".basefn-spotlight__item--active");
+          if (el) el.scrollIntoView({ block: "nearest" });
+        })));
+        return;
       case "ArrowUp" :
         Basefn__Dom.preventDefault(evt);
-        return Xote.Signal.update(activeIndex, i => Primitive_int.mod_((i - 1 | 0) + Primitive_int.max(len, 1) | 0, Primitive_int.max(len, 1)));
+        Xote.Signal.update(activeIndex, i => Primitive_int.mod_((i - 1 | 0) + Primitive_int.max(len, 1) | 0, Primitive_int.max(len, 1)));
+        ((requestAnimationFrame(() => {
+          const el = document.querySelector(".basefn-spotlight__item--active");
+          if (el) el.scrollIntoView({ block: "nearest" });
+        })));
+        return;
       case "Enter" :
         if (len <= 0) {
           return;