mlola-ui 1.1.6 → 1.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mlola-ui",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "mcpName": "io.github.mlolahq/mlola-ui",
   "description": "Source-copy CLI that writes framework-free Mlola UI items into your project",
   "type": "module",

package/registry/agents.md

@@ -458,7 +458,8 @@ A single value chosen from a range.
   - <kbd>Home</kbd> / <kbd>End</kbd>: Jump to the minimum or maximum.
   - <kbd>PageUp</kbd> / <kbd>PageDown</kbd>: Move by a larger step.
 - State changes:
-  - On pointer down on the track, or drag the thumb, set the value from the pointer position, snapped to the step to within min and max.
+  - On mouse or pen down anywhere on the control row, then drag, set the value from the pointer position, snapped to the step to within min and max.
+  - On a finger moving sideways on the control row, or a tap on it, set the value from the finger position; a finger moving up or down scrolls the page and changes nothing to within min and max.
 
 ## If you are unsure
 

package/registry/index.json

@@ -2,7 +2,7 @@
   "$schema": "./schema/registry-index.schema.json",
   "schemaVersion": 2,
   "name": "mlola-ui",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "homepage": "https://ui.mlola.com",
   "themeContract": {
     "attribute": "data-theme",
@@ -177,8 +177,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.6",
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/behavior": "^1.1.8",
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {
@@ -239,7 +239,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {
@@ -399,7 +399,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {
@@ -491,7 +491,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [],
       "variants": [],
@@ -544,7 +544,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/motion": "^1.1.6"
+        "@mlola-ui/motion": "^1.1.8"
       },
       "options": [
         {
@@ -708,8 +708,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.6",
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/behavior": "^1.1.8",
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {
@@ -777,7 +777,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [],
       "variants": [],
@@ -832,7 +832,7 @@
         "modal"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [],
       "variants": [],
@@ -895,8 +895,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.6",
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/behavior": "^1.1.8",
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {
@@ -960,7 +960,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [],
       "variants": [],
@@ -1184,8 +1184,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.6",
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/behavior": "^1.1.8",
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {
@@ -1335,7 +1335,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [],
       "variants": [],
@@ -1386,7 +1386,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.6"
+        "@mlola-ui/behavior": "^1.1.8"
       },
       "options": [
         {
@@ -1725,7 +1725,7 @@
           "path": "packages/components/resizable/resizable.tsx",
           "target": "{{aliases.components}}/resizable.tsx",
           "type": "registry:ui",
-          "integrity": "sha256-Yxlq88qElhv2Q5DooPdriZkawRS0QWx08nd6ybz5oeY="
+          "integrity": "sha256-RFBpg/a2O82mmx+O5wT+um+y3y2w0rUMJJdBzRu9ONU="
         }
       ],
       "themeContract": {
@@ -1761,7 +1761,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.6"
+        "@mlola-ui/behavior": "^1.1.8"
       },
       "options": [],
       "variants": [],
@@ -1814,8 +1814,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.6",
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/behavior": "^1.1.8",
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {
@@ -1892,8 +1892,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.6",
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/behavior": "^1.1.8",
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {
@@ -2039,7 +2039,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.6"
+        "@mlola-ui/behavior": "^1.1.8"
       },
       "options": [
         {
@@ -2068,7 +2068,7 @@
           "path": "packages/components/slider/slider.tsx",
           "target": "{{aliases.components}}/slider.tsx",
           "type": "registry:ui",
-          "integrity": "sha256-tqffrl4r0kxrVFqX1ExBHZKzenVFAZcOCQl8khJ/QEU="
+          "integrity": "sha256-o37Xi4J8+d/fhWFf2LdpPluuKDVXECNl4quKTlrqCU4="
         }
       ],
       "themeContract": {
@@ -2184,7 +2184,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.6"
+        "@mlola-ui/behavior": "^1.1.8"
       },
       "options": [
         {
@@ -2316,7 +2316,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {
@@ -2402,7 +2402,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {
@@ -2545,7 +2545,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.6"
+        "@mlola-ui/behavior": "^1.1.8"
       },
       "options": [
         {
@@ -2684,7 +2684,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {
@@ -2756,7 +2756,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {
@@ -2826,7 +2826,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [],
       "variants": [],
@@ -3024,7 +3024,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {
@@ -3101,7 +3101,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [],
       "variants": [],
@@ -3156,7 +3156,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [],
       "variants": [],
@@ -3219,7 +3219,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {
@@ -3289,7 +3289,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {
@@ -3408,8 +3408,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.6",
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/behavior": "^1.1.8",
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [],
       "variants": [],
@@ -3473,7 +3473,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.6"
+        "@mlola-ui/behavior": "^1.1.8"
       },
       "options": [
         {
@@ -3560,8 +3560,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.6",
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/behavior": "^1.1.8",
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [],
       "variants": [],
@@ -3635,7 +3635,7 @@
         "sheet"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [],
       "variants": [],
@@ -3758,7 +3758,7 @@
         "button"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {
@@ -3861,8 +3861,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.1.6",
-        "@mlola-ui/icons": "^1.1.6"
+        "@mlola-ui/behavior": "^1.1.8",
+        "@mlola-ui/icons": "^1.1.8"
       },
       "options": [
         {

package/registry/source/packages/components/resizable/resizable.tsx

@@ -70,7 +70,9 @@ export function Resizable({
   const [current, setCurrent] = useControllableState({ value: size, defaultValue: defaultSize, onChange: onSizeChange });
   const [folded, setFolded] = useControllableState({ value: collapsed, defaultValue: defaultCollapsed, onChange: onCollapsedChange });
   const root = React.useRef<HTMLDivElement>(null);
-  const dragging = React.useRef(false);
+  // The drag in progress: where on the handle it was grabbed, and the layout to
+  // put back if it is canceled.
+  const drag = React.useRef<{ id: number; grab: number; size: number; folded: boolean } | null>(null);
   const horizontal = direction === "horizontal";
   const set = (value: number) => setCurrent(Math.round(clamp(value, min, max) * 10) / 10);
   const isFolded = collapsible && folded;
@@ -93,11 +95,12 @@ export function Resizable({
     }
   }, [storageKey, current, isFolded]);
 
-  const fromPointer = (event: React.PointerEvent) => {
+  const fromPointer = (event: React.PointerEvent, grab: number) => {
     const rect = root.current?.getBoundingClientRect();
     if (!rect) return;
     const total = horizontal ? rect.width : rect.height;
-    const offset = horizontal ? event.clientX - rect.left : event.clientY - rect.top;
+    // Keep the point that was grabbed under the pointer, so the handle does not jump.
+    const offset = (horizontal ? event.clientX - rect.left : event.clientY - rect.top) - grab;
     const along = anchor === "first" ? offset : total - offset;
     const value = units === "pixels" ? along : (along / total) * 100;
     // Dragging well past the minimum folds a collapsible pane; dragging back unfolds it.
@@ -138,20 +141,45 @@ export function Resizable({
         aria-valuetext={isFolded ? "Collapsed" : undefined}
         className="ml-resizable-handle"
         onPointerDown={(event) => {
-          dragging.current = true;
+          if (event.button !== 0) return;
+          // No text selection in the panes while the handle moves; focus stays for the keyboard.
+          event.preventDefault();
+          event.currentTarget.focus();
+          // Measured from the edge the size is measured to: the handle's near
+          // edge for the first pane, its far edge for the second.
+          const handle = event.currentTarget.getBoundingClientRect();
+          const edge = horizontal ? (anchor === "first" ? handle.left : handle.right) : anchor === "first" ? handle.top : handle.bottom;
+          const grab = (horizontal ? event.clientX : event.clientY) - edge;
+          drag.current = { id: event.pointerId, grab, size: current, folded: isFolded };
           event.currentTarget.setPointerCapture(event.pointerId);
         }}
         onPointerMove={(event) => {
-          if (dragging.current) fromPointer(event);
+          if (drag.current?.id === event.pointerId) fromPointer(event, drag.current.grab);
         }}
         onPointerUp={() => {
-          dragging.current = false;
+          drag.current = null;
+        }}
+        // A drag the browser takes away ends; the pointer passing over the handle later moves nothing.
+        onPointerCancel={() => {
+          drag.current = null;
+        }}
+        onLostPointerCapture={() => {
+          drag.current = null;
         }}
         onDoubleClick={() => {
           setFolded(false);
           set(defaultSize);
         }}
         onKeyDown={(event) => {
+          // Escape during a drag puts the panes back as they were.
+          if (event.key === "Escape" && drag.current) {
+            const { size: before, folded: wasFolded } = drag.current;
+            drag.current = null;
+            setCurrent(before);
+            setFolded(wasFolded);
+            event.preventDefault();
+            return;
+          }
           const step = (event.shiftKey ? 5 : 1) * (units === "pixels" ? 16 : 2);
           const back = horizontal ? "ArrowLeft" : "ArrowUp";
           const forward = horizontal ? "ArrowRight" : "ArrowDown";

package/registry/source/packages/components/slider/slider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { clampToStep, percentOf, sliderValueForKey, valueFromRatio } from "@mlola-ui/behavior/logic";
+import { clampToStep, isSidewaysDrag, percentOf, sliderValueForKey, valueFromRatio } from "@mlola-ui/behavior/logic";
 import { cx, useControllableState } from "../_internal/react";
 import { FieldValue, type FormControlProps } from "../input/input";
 
@@ -29,7 +29,9 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
     const [currentRaw, setCurrent] = useControllableState({ value, defaultValue: normalize(defaultValue), onChange: onValueChange });
     const current = normalize(currentRaw);
     const trackRef = React.useRef<HTMLDivElement>(null);
-    const dragging = React.useRef(false);
+    // A mouse or pen sets the value where it presses. A finger may be scrolling
+    // the page, so it sets the value only once it moves sideways, or on a tap.
+    const gesture = React.useRef<{ id: number; touch: boolean; x: number; y: number; active: boolean } | null>(null);
     const generated = React.useId();
     const sliderId = id ?? generated;
     const labelId = label ? `${sliderId}-label` : undefined;
@@ -69,22 +71,38 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
             event.preventDefault();
             setCurrent(next);
           }}
-        >
-          <div
-            ref={trackRef}
-            className="ml-slider-track"
-            onPointerDown={(event) => {
-              if (disabled) return;
-              dragging.current = true;
+          // The whole row takes the pointer, not only the thin track inside it.
+          onPointerDown={(event) => {
+            if (disabled || event.button !== 0) return;
+            const touch = event.pointerType === "touch";
+            gesture.current = { id: event.pointerId, touch, x: event.clientX, y: event.clientY, active: !touch };
+            if (!touch) {
               event.currentTarget.setPointerCapture(event.pointerId);
               setCurrent(normalize(fromPointer(event.clientX)));
-            }}
-            onPointerMove={(event) => {
-              if (!disabled && dragging.current) setCurrent(normalize(fromPointer(event.clientX)));
-            }}
-            onPointerUp={() => { dragging.current = false; }}
-            onPointerCancel={() => { dragging.current = false; }}
-          >
+            }
+          }}
+          onPointerMove={(event) => {
+            const current = gesture.current;
+            if (disabled || !current || current.id !== event.pointerId) return;
+            if (!current.active) {
+              // Sideways is a drag; up or down is the page scrolling, which the browser takes.
+              if (!isSidewaysDrag(event.clientX - current.x, event.clientY - current.y)) return;
+              current.active = true;
+              event.currentTarget.setPointerCapture(event.pointerId);
+            }
+            setCurrent(normalize(fromPointer(event.clientX)));
+          }}
+          onPointerUp={(event) => {
+            const current = gesture.current;
+            gesture.current = null;
+            // A tap: the finger set nothing while it could still have been scrolling.
+            if (!disabled && current?.touch && !current.active) setCurrent(normalize(fromPointer(event.clientX)));
+          }}
+          onPointerCancel={() => {
+            gesture.current = null;
+          }}
+        >
+          <div ref={trackRef} className="ml-slider-track">
             <span aria-hidden="true" className="ml-slider-range" style={{ width: `${percent}%` }} />
             <span aria-hidden="true" className="ml-slider-thumb" style={{ left: `${percent}%` }} />
           </div>

package/registry/source-manifest.json

@@ -47,12 +47,12 @@
   "packages/components/progress/progress.tsx": "sha256-oDxj1Ccl1pKV4+e6A7aaJL1FThW8qs9r4Gb0hEmExeM=",
   "packages/components/radio-group/radio-group.tsx": "sha256-jhnSEBLkdpe8dv5us/Q1sMsQF4sKGRgDXWGKm2JSFew=",
   "packages/components/rating/rating.tsx": "sha256-zgPOQXzAiRE4qGNPQ8qat3SP1XSI/7567kA5VaT51P0=",
-  "packages/components/resizable/resizable.tsx": "sha256-Yxlq88qElhv2Q5DooPdriZkawRS0QWx08nd6ybz5oeY=",
+  "packages/components/resizable/resizable.tsx": "sha256-RFBpg/a2O82mmx+O5wT+um+y3y2w0rUMJJdBzRu9ONU=",
   "packages/components/segmented-control/segmented-control.tsx": "sha256-MCBG5XHFWCwbACctsYKbqe8mvSSR6pf60tyRgdCDKDA=",
   "packages/components/select/select.tsx": "sha256-WfS//CI0wnqhsQvglElqPK1MOL5vwjSaBnaC1BpWVVc=",
   "packages/components/sheet/sheet.tsx": "sha256-gmc8rZ87NHfN/bErEWHm6HlaAoeNT/Fw6y2PrW88WFI=",
   "packages/components/skeleton/skeleton.tsx": "sha256-2Fk72NbLr3+CrXH7jGbHNsc3t+vskMqSyySe/UwbGCs=",
-  "packages/components/slider/slider.tsx": "sha256-tqffrl4r0kxrVFqX1ExBHZKzenVFAZcOCQl8khJ/QEU=",
+  "packages/components/slider/slider.tsx": "sha256-o37Xi4J8+d/fhWFf2LdpPluuKDVXECNl4quKTlrqCU4=",
   "packages/components/spinner/spinner.tsx": "sha256-FZQmcGkQ8N0485n9bYsLTpTnolbM729YKjkQrXriz9A=",
   "packages/components/status-icon/labels.ts": "sha256-EE8q+geQBbJUs7I3RmaHZnPwn7Vjk2GjCfxvI4ruXKM=",
   "packages/components/status-icon/status-icon.tsx": "sha256-TtrTeoePyfH1VhKuWC0v12FuwfgND1CHnH5x8fyf4AM=",