@design-edito/tools 0.4.16 → 0.4.17

package/agnostic/css/index.d.ts

@@ -1,6 +1,6 @@
 export * as bem from './bem/index.js'
 export * as clss from './clss/index.js'
-export * as isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
+export * as isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as scale from './scale/index.js'
 export * as stylesSet from './styles-set/index.js'

package/agnostic/css/index.js

@@ -1,6 +1,6 @@
 export * as bem from './bem/index.js'
 export * as clss from './clss/index.js'
-export * as isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as generateNiceColor from './generate-nice-color/index.js'
+export * as isValidCssClassName from './is-valid-css-class-name/index.js'
 export * as scale from './scale/index.js'
 export * as stylesSet from './styles-set/index.js'

package/agnostic/html/hyper-json/smart-tags/coalesced/index.d.ts

@@ -1,52 +1,52 @@
 export * as add from './add/index.js'
 export * as addclass from './addclass/index.js'
-export * as and from './and/index.js'
 export * as append from './append/index.js'
+export * as and from './and/index.js'
 export * as at from './at/index.js'
 export * as call from './call/index.js'
-export * as clone from './clone/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
-export * as equals from './equals/index.js'
+export * as clone from './clone/index.js'
 export * as getattribute from './getattribute/index.js'
 export * as getproperties from './getproperties/index.js'
 export * as getproperty from './getproperty/index.js'
-export * as hjparse from './hjparse/index.js'
 export * as hjstringify from './hjstringify/index.js'
 export * as if from './if/index.js'
-export * as join from './join/index.js'
+export * as equals from './equals/index.js'
 export * as initialize from './initialize/index.js'
-export * as length from './length/index.js'
+export * as hjparse from './hjparse/index.js'
 export * as map from './map/index.js'
+export * as length from './length/index.js'
 export * as negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
 export * as or from './or/index.js'
 export * as pickrandom from './pickrandom/index.js'
-export * as print from './print/index.js'
+export * as join from './join/index.js'
 export * as populate from './populate/index.js'
 export * as push from './push/index.js'
-export * as removeattribute from './removeattribute/index.js'
-export * as recordtoarray from './recordtoarray/index.js'
+export * as print from './print/index.js'
 export * as pusheach from './pusheach/index.js'
+export * as recordtoarray from './recordtoarray/index.js'
+export * as removeattribute from './removeattribute/index.js'
 export * as removeclass from './removeclass/index.js'
 export * as renameproperty from './renameproperty/index.js'
 export * as replace from './replace/index.js'
-export * as select from './select/index.js'
 export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
 export * as setproperty from './setproperty/index.js'
-export * as split from './split/index.js'
+export * as select from './select/index.js'
 export * as sorton from './sorton/index.js'
-export * as spread from './spread/index.js'
+export * as split from './split/index.js'
 export * as toarray from './toarray/index.js'
-export * as toboolean from './toboolean/index.js'
 export * as toelement from './toelement/index.js'
+export * as toboolean from './toboolean/index.js'
+export * as spread from './spread/index.js'
+export * as toggleclass from './toggleclass/index.js'
+export * as tonull from './tonull/index.js'
 export * as tonodelist from './tonodelist/index.js'
-export * as tonumber from './tonumber/index.js'
 export * as torecord from './torecord/index.js'
+export * as tonumber from './tonumber/index.js'
 export * as toref from './toref/index.js'
 export * as tostring from './tostring/index.js'
 export * as totext from './totext/index.js'
 export * as transformselected from './transformselected/index.js'
-export * as tonull from './tonull/index.js'
-export * as toggleclass from './toggleclass/index.js'
 export * as trim from './trim/index.js'

package/agnostic/html/hyper-json/smart-tags/coalesced/index.js

@@ -1,52 +1,52 @@
 export * as add from './add/index.js'
 export * as addclass from './addclass/index.js'
-export * as and from './and/index.js'
 export * as append from './append/index.js'
+export * as and from './and/index.js'
 export * as at from './at/index.js'
 export * as call from './call/index.js'
-export * as clone from './clone/index.js'
 export * as deleteproperties from './deleteproperties/index.js'
-export * as equals from './equals/index.js'
+export * as clone from './clone/index.js'
 export * as getattribute from './getattribute/index.js'
 export * as getproperties from './getproperties/index.js'
 export * as getproperty from './getproperty/index.js'
-export * as hjparse from './hjparse/index.js'
 export * as hjstringify from './hjstringify/index.js'
 export * as if from './if/index.js'
-export * as join from './join/index.js'
+export * as equals from './equals/index.js'
 export * as initialize from './initialize/index.js'
-export * as length from './length/index.js'
+export * as hjparse from './hjparse/index.js'
 export * as map from './map/index.js'
+export * as length from './length/index.js'
 export * as negate from './negate/index.js'
 export * as notrailing from './notrailing/index.js'
 export * as or from './or/index.js'
 export * as pickrandom from './pickrandom/index.js'
-export * as print from './print/index.js'
+export * as join from './join/index.js'
 export * as populate from './populate/index.js'
 export * as push from './push/index.js'
-export * as removeattribute from './removeattribute/index.js'
-export * as recordtoarray from './recordtoarray/index.js'
+export * as print from './print/index.js'
 export * as pusheach from './pusheach/index.js'
+export * as recordtoarray from './recordtoarray/index.js'
+export * as removeattribute from './removeattribute/index.js'
 export * as removeclass from './removeclass/index.js'
 export * as renameproperty from './renameproperty/index.js'
 export * as replace from './replace/index.js'
-export * as select from './select/index.js'
 export * as set from './set/index.js'
 export * as setattribute from './setattribute/index.js'
 export * as setproperty from './setproperty/index.js'
-export * as split from './split/index.js'
+export * as select from './select/index.js'
 export * as sorton from './sorton/index.js'
-export * as spread from './spread/index.js'
+export * as split from './split/index.js'
 export * as toarray from './toarray/index.js'
-export * as toboolean from './toboolean/index.js'
 export * as toelement from './toelement/index.js'
+export * as toboolean from './toboolean/index.js'
+export * as spread from './spread/index.js'
+export * as toggleclass from './toggleclass/index.js'
+export * as tonull from './tonull/index.js'
 export * as tonodelist from './tonodelist/index.js'
-export * as tonumber from './tonumber/index.js'
 export * as torecord from './torecord/index.js'
+export * as tonumber from './tonumber/index.js'
 export * as toref from './toref/index.js'
 export * as tostring from './tostring/index.js'
 export * as totext from './totext/index.js'
 export * as transformselected from './transformselected/index.js'
-export * as tonull from './tonull/index.js'
-export * as toggleclass from './toggleclass/index.js'
 export * as trim from './trim/index.js'

package/agnostic/html/hyper-json/smart-tags/isolated/index.d.ts

@@ -1,13 +1,13 @@
 export * as any from './any/index.js'
-export * as array from './array/index.js'
 export * as boolean from './boolean/index.js'
 export * as element from './element/index.js'
 export * as get from './get/index.js'
+export * as array from './array/index.js'
 export * as guess from './guess/index.js'
 export * as nodelist from './nodelist/index.js'
 export * as null from './null/index.js'
 export * as number from './number/index.js'
 export * as record from './record/index.js'
 export * as ref from './ref/index.js'
-export * as text from './text/index.js'
 export * as string from './string/index.js'
+export * as text from './text/index.js'

package/agnostic/html/hyper-json/smart-tags/isolated/index.js

@@ -1,13 +1,13 @@
 export * as any from './any/index.js'
-export * as array from './array/index.js'
 export * as boolean from './boolean/index.js'
 export * as element from './element/index.js'
 export * as get from './get/index.js'
+export * as array from './array/index.js'
 export * as guess from './guess/index.js'
 export * as nodelist from './nodelist/index.js'
 export * as null from './null/index.js'
 export * as number from './number/index.js'
 export * as record from './record/index.js'
 export * as ref from './ref/index.js'
-export * as text from './text/index.js'
 export * as string from './string/index.js'
+export * as text from './text/index.js'

package/agnostic/html/index.d.ts

@@ -1,10 +1,10 @@
-export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as deepSelect from './deep-select/index.js'
+export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as hyperJson from './hyper-json/index.js'
+export * as insertNode from './insert-node/index.js'
 export * as placeholders from './placeholders/index.js'
-export * as replaceInElement from './replace-in-element/index.js'
 export * as getPositionInsideParent from './get-position-inside-parent/index.js'
-export * as stringToNodes from './string-to-nodes/index.js'
+export * as replaceInElement from './replace-in-element/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
 export * as watchSelection from './watch-selection/index.js'
-export * as insertNode from './insert-node/index.js'
+export * as stringToNodes from './string-to-nodes/index.js'

package/agnostic/html/index.js

@@ -1,10 +1,10 @@
-export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as deepSelect from './deep-select/index.js'
+export * as getNodeAncestors from './get-node-ancestors/index.js'
 export * as hyperJson from './hyper-json/index.js'
+export * as insertNode from './insert-node/index.js'
 export * as placeholders from './placeholders/index.js'
-export * as replaceInElement from './replace-in-element/index.js'
 export * as getPositionInsideParent from './get-position-inside-parent/index.js'
-export * as stringToNodes from './string-to-nodes/index.js'
+export * as replaceInElement from './replace-in-element/index.js'
 export * as selectorToElement from './selector-to-element/index.js'
 export * as watchSelection from './watch-selection/index.js'
-export * as insertNode from './insert-node/index.js'
+export * as stringToNodes from './string-to-nodes/index.js'

package/agnostic/index.d.ts

@@ -2,8 +2,8 @@ export * as arrays from './arrays/index.js'
 export * as booleans from './booleans/index.js'
 export * as colors from './colors/index.js'
 export * as css from './css/index.js'
-export * as errors from './errors/index.js'
 export * as html from './html/index.js'
+export * as errors from './errors/index.js'
 export * as misc from './misc/index.js'
 export * as numbers from './numbers/index.js'
 export * as objects from './objects/index.js'

package/agnostic/index.js

@@ -2,8 +2,8 @@ export * as arrays from './arrays/index.js'
 export * as booleans from './booleans/index.js'
 export * as colors from './colors/index.js'
 export * as css from './css/index.js'
-export * as errors from './errors/index.js'
 export * as html from './html/index.js'
+export * as errors from './errors/index.js'
 export * as misc from './misc/index.js'
 export * as numbers from './numbers/index.js'
 export * as objects from './objects/index.js'

package/agnostic/misc/index.d.ts

@@ -3,10 +3,10 @@ export * as cast from './cast/index.js'
 export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
+export * as isNullish from './is-nullish/index.js'
 export * as dataSize from './data-size/index.js'
 export * as isConstructorFunction from './is-constructor-function/index.js'
-export * as isNullish from './is-nullish/index.js'
-export * as logs from './logs/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
+export * as logs from './logs/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
 export * as outcome from './outcome/index.js'

package/agnostic/misc/index.js

@@ -3,10 +3,10 @@ export * as cast from './cast/index.js'
 export * as connection from './connection/index.js'
 export * as crawler from './crawler/index.js'
 export * as crossenv from './crossenv/index.js'
+export * as isNullish from './is-nullish/index.js'
 export * as dataSize from './data-size/index.js'
 export * as isConstructorFunction from './is-constructor-function/index.js'
-export * as isNullish from './is-nullish/index.js'
-export * as logs from './logs/index.js'
 export * as loremIpsum from './lorem-ipsum/index.js'
+export * as logs from './logs/index.js'
 export * as normalizeExtension from './normalize-extension/index.js'
 export * as outcome from './outcome/index.js'

package/agnostic/objects/index.d.ts

@@ -1,9 +1,9 @@
 export * as deepGetProperty from './deep-get-property/index.js'
-export * as flattenGetters from './flatten-getters/index.js'
+export * as enums from './enums/index.js'
 export * as isObject from './is-object/index.js'
 export * as isRecord from './is-record/index.js'
-export * as recordFormat from './record-format/index.js'
 export * as recordMap from './record-map/index.js'
+export * as recordFormat from './record-format/index.js'
 export * as sortKeys from './sort-keys/index.js'
 export * as validation from './validation/index.js'
-export * as enums from './enums/index.js'
+export * as flattenGetters from './flatten-getters/index.js'

package/agnostic/objects/index.js

@@ -1,9 +1,9 @@
 export * as deepGetProperty from './deep-get-property/index.js'
-export * as flattenGetters from './flatten-getters/index.js'
+export * as enums from './enums/index.js'
 export * as isObject from './is-object/index.js'
 export * as isRecord from './is-record/index.js'
-export * as recordFormat from './record-format/index.js'
 export * as recordMap from './record-map/index.js'
+export * as recordFormat from './record-format/index.js'
 export * as sortKeys from './sort-keys/index.js'
 export * as validation from './validation/index.js'
-export * as enums from './enums/index.js'
+export * as flattenGetters from './flatten-getters/index.js'

package/agnostic/sanitization/index.d.ts

@@ -1,4 +1,4 @@
 export * as fileName from './file-name/index.js'
-export * as html from './html/index.js'
 export * as path from './path/index.js'
+export * as html from './html/index.js'
 export * as userInput from './user-input/index.js'

package/agnostic/sanitization/index.js

@@ -1,4 +1,4 @@
 export * as fileName from './file-name/index.js'
-export * as html from './html/index.js'
 export * as path from './path/index.js'
+export * as html from './html/index.js'
 export * as userInput from './user-input/index.js'

package/agnostic/strings/index.d.ts

@@ -1,8 +1,8 @@
 export * as charCodes from './char-codes/index.js'
+export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
 export * as parseTable from './parse-table/index.js'
-export * as replaceAll from './replace-all/index.js'
-export * as splitTrim from './split-trim/index.js'
 export * as toAlphanum from './to-alphanum/index.js'
 export * as trim from './trim/index.js'
-export * as matches from './matches/index.js'
+export * as splitTrim from './split-trim/index.js'
+export * as replaceAll from './replace-all/index.js'

package/agnostic/strings/index.js

@@ -1,8 +1,8 @@
 export * as charCodes from './char-codes/index.js'
+export * as matches from './matches/index.js'
 export * as normalizeIndent from './normalize-indent/index.js'
 export * as parseTable from './parse-table/index.js'
-export * as replaceAll from './replace-all/index.js'
-export * as splitTrim from './split-trim/index.js'
 export * as toAlphanum from './to-alphanum/index.js'
 export * as trim from './trim/index.js'
-export * as matches from './matches/index.js'
+export * as splitTrim from './split-trim/index.js'
+export * as replaceAll from './replace-all/index.js'

package/agnostic/time/index.d.ts

@@ -1,5 +1,5 @@
+export * as duration from './duration/index.js'
 export * as dates from './dates/index.js'
 export * as timeout from './timeout/index.js'
 export * as transitions from './transitions/index.js'
-export * as duration from './duration/index.js'
 export * as wait from './wait/index.js'

package/agnostic/time/index.js

@@ -1,5 +1,5 @@
+export * as duration from './duration/index.js'
 export * as dates from './dates/index.js'
 export * as timeout from './timeout/index.js'
 export * as transitions from './transitions/index.js'
-export * as duration from './duration/index.js'
 export * as wait from './wait/index.js'

package/components/BeforeAfter/index.controlled.d.ts

@@ -1,46 +1,55 @@
-import React, { type FunctionComponent, type HTMLAttributes } from 'react';
+import { type ReactNode, type FunctionComponent } from 'react';
 import type { WithClassName } from '../utils/types.js';
+/**
+ * Props for the {@link BeforeAfterControlled} component.
+ *
+ * Extends {@link WithClassName} with layout, content, and interaction configuration.
+ *
+ * @property mode - Layout orientation of the split. Defaults to `'horizontal'`.
+ * @property ratio - Position of the divider as a value between `0` and `1`.
+ * Values outside this range are clamped automatically. Defaults to `0`.
+ * @property before - Content rendered in the first (before) panel.
+ * @property after - Content rendered in the second (after) panel.
+ * @property actionHandlers - Optional user action callbacks:
+ *   - `dragged` — called on each pointer move while dragging, with the current
+ *     x and y ratios relative to the component bounds.
+ *   - `clicked` — called on pointer release when no drag occurred, with the
+ *     x and y ratios of the release position.
+ * @property className - Additional class name(s) applied to the root element.
+ */
 export type Props = WithClassName<{
-    content?: React.ReactNode;
-    beforeContent?: React.ReactNode;
-    afterContent?: React.ReactNode;
+    mode?: 'vertical' | 'horizontal';
     ratio?: number;
+    before?: ReactNode;
+    after?: ReactNode;
     actionHandlers?: {
-        pointer?: (e: PointerEvent, targetHRatio: number, targetVRatio: number, ratio: number | null, element: HTMLDivElement) => void;
+        dragged?: (xRatio: number, yRatio: number) => void;
+        clicked?: (xRatio: number, yRatio: number) => void;
     };
-    _modifiers?: {
-        horizontal?: boolean;
-        vertical?: boolean;
-    };
-}> & HTMLAttributes<HTMLDivElement>;
+}>;
 /**
- * Props for the {@link BeforeAfterControlled} component.
+ * Controlled before/after comparison component.
  *
- * @property beforeContent - Content shown first.
- * @property afterContent - Content shown second.
- * @property ratio - Split ratio (0 to 1). Controlled by parent.
- * @property actionHandlers - Optional pointer (drag) callbacks:
- *   - `pointer` — called on pointer events with ratio and element info.
- * @property _modifiers - Orientation modifiers: `horizontal` or `vertical`.
- * @property className - Custom CSS class.
+ * Renders two content panels separated by a draggable divider whose position
+ * is expressed as a ratio between `0` and `1`. Supports both mouse and touch
+ * interactions, distinguishing clicks from drags.
  *
- * @see {@link BeforeAfter}
- */
-/**
- * Controlled before/after slider component. Renders two contents separated by a slider,
- * whose ratio is managed by the parent component. Handles pointer interactions (mouse/touch/pen)
- * to update the ratio via callbacks.
+ * The active ratio is exposed as:
+ * - CSS custom properties:
+ *   - `--{prefix}-ratio`
+ *   - `--{prefix}-ratio-percent`
+ * - A `data-ratio` attribute on the root element.
  *
- * ### Forwarded CSS custom properties
- * - `--before-after-ratio` — the current ratio value (0 to 1, fixed to 8 decimals).
- * - `--before-after-ratio-percent` — the current ratio as a percentage (0 to 100).
+ * ### CSS modifiers
+ * - `horizontal` — applied when `mode` is `'horizontal'`.
+ * - `vertical` — applied when `mode` is `'vertical'`.
  *
- * ### Forwarded data attributes
- * - `data-ratio` — the current ratio value.
+ * ### CSS elements
+ * - `before`
+ * - `after`
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @see {@link BeforeAfter}
- * @returns A div containing used to render "before/after" content, with pointer event handling for ratio updates.
+ * @returns A split-panel container with pointer interaction handlers and ratio state applied.
  */
 export declare const BeforeAfterControlled: FunctionComponent<Props>;

package/components/BeforeAfter/index.controlled.js

@@ -1,95 +1,117 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef } from 'react';
-import { clss } from '../../agnostic/css/clss/index.js';
+import { useRef } from 'react';
 import { clamp } from '../../agnostic/numbers/clamp/index.js';
+import { round } from '../../agnostic/numbers/round/index.js';
+import { clss } from '../../agnostic/css/clss/index.js';
 import { mergeClassNames } from '../utils/index.js';
 import { beforeAfter as publicClassName } from '../public-classnames.js';
 import cssModule from './styles.module.css';
-import { getRelativePointerCoordinates } from './utils.js';
 /**
- * Props for the {@link BeforeAfterControlled} component.
+ * Controlled before/after comparison component.
  *
- * @property beforeContent - Content shown first.
- * @property afterContent - Content shown second.
- * @property ratio - Split ratio (0 to 1). Controlled by parent.
- * @property actionHandlers - Optional pointer (drag) callbacks:
- *   - `pointer` — called on pointer events with ratio and element info.
- * @property _modifiers - Orientation modifiers: `horizontal` or `vertical`.
- * @property className - Custom CSS class.
+ * Renders two content panels separated by a draggable divider whose position
+ * is expressed as a ratio between `0` and `1`. Supports both mouse and touch
+ * interactions, distinguishing clicks from drags.
  *
- * @see {@link BeforeAfter}
- */
-/**
- * Controlled before/after slider component. Renders two contents separated by a slider,
- * whose ratio is managed by the parent component. Handles pointer interactions (mouse/touch/pen)
- * to update the ratio via callbacks.
+ * The active ratio is exposed as:
+ * - CSS custom properties:
+ *   - `--{prefix}-ratio`
+ *   - `--{prefix}-ratio-percent`
+ * - A `data-ratio` attribute on the root element.
  *
- * ### Forwarded CSS custom properties
- * - `--before-after-ratio` — the current ratio value (0 to 1, fixed to 8 decimals).
- * - `--before-after-ratio-percent` — the current ratio as a percentage (0 to 100).
+ * ### CSS modifiers
+ * - `horizontal` — applied when `mode` is `'horizontal'`.
+ * - `vertical` — applied when `mode` is `'vertical'`.
  *
- * ### Forwarded data attributes
- * - `data-ratio` — the current ratio value.
+ * ### CSS elements
+ * - `before`
+ * - `after`
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @see {@link BeforeAfter}
- * @returns A div containing used to render "before/after" content, with pointer event handling for ratio updates.
+ * @returns A split-panel container with pointer interaction handlers and ratio state applied.
  */
-export const BeforeAfterControlled = ({ beforeContent, afterContent, className, ratio, actionHandlers, _modifiers, ...intrisicDivHTMLAttributes }) => {
-    // Rendering
-    const isPointerDown = useRef(false);
-    const onPointerUpRef = useRef(null);
-    const onPointerMoveRef = useRef(null);
+export const BeforeAfterControlled = ({ mode = 'horizontal', ratio = 0, before, after, className, actionHandlers }) => {
+    ratio = clamp(ratio, 0, 1);
+    // State & refs
     const rootRef = useRef(null);
-    const handleOnPointer = useCallback((event) => {
-        if (actionHandlers?.pointer === undefined || rootRef.current === null)
+    const isPointerDown = useRef(false);
+    const hasDragged = useRef(false);
+    // Utils
+    const getRatios = (clientX, clientY) => {
+        const rect = rootRef.current?.getBoundingClientRect();
+        if (rect === undefined)
+            return null;
+        return {
+            xRatio: (clientX - rect.left) / rect.width,
+            yRatio: (clientY - rect.top) / rect.height
+        };
+    };
+    // Handlers
+    const handleMouseDown = event => {
+        isPointerDown.current = true;
+        hasDragged.current = false;
+    };
+    const handleMouseMove = event => {
+        if (!isPointerDown.current)
             return;
-        const { x, y } = getRelativePointerCoordinates(event, rootRef.current);
-        const ratioX = clamp(x / rootRef.current.clientWidth, 0, 1);
-        const ratioY = clamp(y / rootRef.current.clientHeight, 0, 1);
-        actionHandlers?.pointer?.(event, ratioX, ratioY, ratio ?? null, rootRef.current);
-    }, [actionHandlers?.pointer, ratio]);
-    const removePointerListeners = useCallback(() => {
-        if (onPointerUpRef.current !== null) {
-            document.removeEventListener('pointerup', onPointerUpRef.current);
-        }
-        if (onPointerMoveRef.current !== null) {
-            document.removeEventListener('pointermove', onPointerMoveRef.current);
+        hasDragged.current = true;
+        const ratios = getRatios(event.clientX, event.clientY);
+        if (ratios !== null)
+            actionHandlers?.dragged?.(ratios.xRatio, ratios.yRatio);
+    };
+    const handleMouseUp = event => {
+        if (!hasDragged.current) {
+            const ratios = getRatios(event.clientX, event.clientY);
+            if (ratios !== null)
+                actionHandlers?.clicked?.(ratios.xRatio, ratios.yRatio);
         }
-        onPointerUpRef.current = null;
-        onPointerMoveRef.current = null;
-    }, []);
-    const onPointerMove = useCallback((event) => {
-        if (!isPointerDown.current) {
+        isPointerDown.current = false;
+        hasDragged.current = false;
+    };
+    const handleTouchStart = event => {
+        isPointerDown.current = true;
+        hasDragged.current = false;
+    };
+    const handleTouchMove = event => {
+        const t = event.touches[0];
+        if (t === undefined)
+            return;
+        if (!isPointerDown.current)
             return;
+        hasDragged.current = true;
+        const ratios = getRatios(t.clientX, t.clientY);
+        if (ratios !== null)
+            actionHandlers?.dragged?.(ratios.xRatio, ratios.yRatio);
+    };
+    const handleTouchEnd = event => {
+        if (!hasDragged.current) {
+            const t = event.changedTouches[0];
+            if (t !== undefined) {
+                const ratios = getRatios(t.clientX, t.clientY);
+                if (ratios !== null)
+                    actionHandlers?.clicked?.(ratios.xRatio, ratios.yRatio);
+            }
         }
-        handleOnPointer(event);
-    }, [handleOnPointer]);
-    const onPointerUp = useCallback((event) => {
         isPointerDown.current = false;
-        removePointerListeners();
-    }, [removePointerListeners]);
-    const onPointerDown = useCallback((event) => {
-        removePointerListeners();
-        isPointerDown.current = true;
-        handleOnPointer(event.nativeEvent);
-        onPointerUpRef.current = onPointerUp;
-        onPointerMoveRef.current = onPointerMove;
-        document.addEventListener('pointermove', onPointerMoveRef.current);
-        document.addEventListener('pointerup', onPointerUpRef.current);
-    }, [handleOnPointer, onPointerUp, onPointerMove, removePointerListeners]);
-    const outputRatio = ratio !== undefined ? Math.max(0, Math.min(1, ratio)) : 0;
-    const rootStyles = {
-        [`--${publicClassName}-ratio`]: outputRatio.toFixed(8),
-        [`--${publicClassName}-ratio-percent`]: `${(outputRatio * 100).toString()}%`
+        hasDragged.current = false;
     };
+    // Classes & attributes
     const c = clss(publicClassName, { cssModule });
-    const rootClss = mergeClassNames(c(null, _modifiers), className);
-    const rootAttributes = {
-        'data-ratio': ratio
-    };
+    const rootClss = mergeClassNames(c(null, {
+        horizontal: mode === 'horizontal',
+        vertical: mode === 'vertical'
+    }), className);
     const beforeClass = c('before');
     const afterClass = c('after');
-    return _jsxs("div", { className: rootClss, style: rootStyles, onPointerDown: onPointerDown, ref: rootRef, ...rootAttributes, ...intrisicDivHTMLAttributes, children: [_jsx("div", { className: beforeClass, children: beforeContent }), _jsx("div", { className: afterClass, children: afterContent })] });
+    const separatorClass = c('separator');
+    const customProps = {
+        [`--${publicClassName}-ratio`]: `${round(ratio, 4)}`,
+        [`--${publicClassName}-ratio-percent`]: `${round(ratio * 100, 2)}%`
+    };
+    const dataAttributes = {
+        'data-ratio': `${round(ratio, 4)}`
+    };
+    // Rendering
+    return _jsxs("div", { ref: rootRef, className: rootClss, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: { ...customProps }, ...dataAttributes, children: [_jsx("div", { className: beforeClass, children: before }), _jsx("div", { className: afterClass, children: after }), _jsx("div", { className: separatorClass })] });
 };

package/components/BeforeAfter/index.d.ts

@@ -3,53 +3,39 @@ import { type Props as ControlledProps } from './index.controlled.js';
 /**
  * Props for the {@link BeforeAfter} component.
  *
- * Extends {@link ControlledProps} (minus `_modifiers`, which are derived
- * internally) with uncontrolled ratio and direction management.
+ * Extends {@link ControlledProps} with uncontrolled defaults and state callbacks.
+ * When `ratio` is provided (inherited from {@link ControlledProps}), the component
+ * operates in controlled mode and internal state is ignored.
  *
- * @property defaultRatio - Initial ratio value (0 to 1). Used if `ratio` is not provided. Defaults to `0`.
- * @property direction - Slider orientation: `'horizontal'` (default) or `'vertical'`.
+ * @property defaultRatio - Initial divider position in uncontrolled mode, as a value
+ * between `0` and `1`. Ignored when `ratio` is provided. Defaults to `0.5`.
  * @property stateHandlers - Optional callbacks invoked when derived state changes:
- *   - `ratio` — called with the new ratio whenever it changes.
+ *   - `ratioChanged` — called after the internal ratio has been updated, with the new ratio value.
  */
 export type Props = ControlledProps & {
     defaultRatio?: number;
-    direction?: 'horizontal' | 'vertical';
     stateHandlers?: {
-        ratio?: (ratio: number) => void;
+        ratioChanged?: (ratio: number) => void;
     };
 };
 /**
- * Props for the {@link BeforeAfter} component.
- *
- * Extends {@link ControlledProps} with uncontrolled ratio and direction management.
- *
- * @property defaultRatio - Initial ratio value (0 to 1). Used if `ratio` is not provided. Defaults to `0`.
- * @property direction - Slider orientation: `'horizontal'` (default) or `'vertical'`. If horizontal, the ratio is calced as the horizontal pointer position over the element width. If vertical, it's the vertical pointer position over the element height.
- * @property stateHandlers - Optional callbacks invoked when derived state changes:
- *   - `ratio` — called with the new ratio whenever it changes.
- *
- * @see {@link ControlledProps}
- */
-/**
- * Uncontrolled, self-updating before/after slider component. Drives a
- * {@link BeforeAfterControlled} instance with internal ratio state and direction,
- * supporting both controlled and uncontrolled usage.
- *
- * Supports mixed controlled/uncontrolled usage: passing `ratio` disables internal ratio state,
- * but still allows direction and stateHandlers to be used. Passing `defaultRatio` sets the initial ratio.
+ * Before/after comparison component with optional controlled and uncontrolled behavior.
  *
- * ### Forwarded modifiers to {@link BeforeAfterControlled}
- * The following `_modifiers` are computed and injected automatically:
- * - `horizontal` — `true`.
- * - `vertical` — `true`.
+ * Wraps {@link BeforeAfterControlled} and manages internal divider position when
+ * operating in uncontrolled mode. The active axis used to derive the ratio from
+ * pointer position depends on `mode`: horizontal interactions use the x ratio,
+ * vertical interactions use the y ratio.
  *
- * ### Forwarded CSS custom properties to {@link BeforeAfterControlled}
- * - `--before-after-ratio` — the current ratio value (0 to 1, fixed to 8 decimals).
- * - `--before-after-ratio-percent` — the current ratio as a percentage (0 to 100).
+ * @remarks
+ * - In controlled mode (`ratio` defined), divider position is fully driven by the prop
+ *   and internal state is never updated.
+ * - In uncontrolled mode, internal state is initialized from `defaultRatio` and updated
+ *   on both drag and click interactions.
+ * - `actionHandlers.dragged` and `actionHandlers.clicked` are always forwarded to the
+ *   underlying controlled component, regardless of mode.
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @see {@link BeforeAfterControlled}
- * @returns A {@link BeforeAfterControlled} with computed ratio and orientation modifiers applied.
+ * @returns A {@link BeforeAfterControlled} instance with ratio state managed internally when uncontrolled.
  */
 export declare const BeforeAfter: FunctionComponent<Props>;

package/components/BeforeAfter/index.js

@@ -1,55 +1,50 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useCallback, useEffect } from 'react';
+import { useState } from 'react';
 import { BeforeAfterControlled } from './index.controlled.js';
 /**
- * Props for the {@link BeforeAfter} component.
+ * Before/after comparison component with optional controlled and uncontrolled behavior.
  *
- * Extends {@link ControlledProps} with uncontrolled ratio and direction management.
+ * Wraps {@link BeforeAfterControlled} and manages internal divider position when
+ * operating in uncontrolled mode. The active axis used to derive the ratio from
+ * pointer position depends on `mode`: horizontal interactions use the x ratio,
+ * vertical interactions use the y ratio.
  *
- * @property defaultRatio - Initial ratio value (0 to 1). Used if `ratio` is not provided. Defaults to `0`.
- * @property direction - Slider orientation: `'horizontal'` (default) or `'vertical'`. If horizontal, the ratio is calced as the horizontal pointer position over the element width. If vertical, it's the vertical pointer position over the element height.
- * @property stateHandlers - Optional callbacks invoked when derived state changes:
- *   - `ratio` — called with the new ratio whenever it changes.
- *
- * @see {@link ControlledProps}
- */
-/**
- * Uncontrolled, self-updating before/after slider component. Drives a
- * {@link BeforeAfterControlled} instance with internal ratio state and direction,
- * supporting both controlled and uncontrolled usage.
- *
- * Supports mixed controlled/uncontrolled usage: passing `ratio` disables internal ratio state,
- * but still allows direction and stateHandlers to be used. Passing `defaultRatio` sets the initial ratio.
- *
- * ### Forwarded modifiers to {@link BeforeAfterControlled}
- * The following `_modifiers` are computed and injected automatically:
- * - `horizontal` — `true`.
- * - `vertical` — `true`.
- *
- * ### Forwarded CSS custom properties to {@link BeforeAfterControlled}
- * - `--before-after-ratio` — the current ratio value (0 to 1, fixed to 8 decimals).
- * - `--before-after-ratio-percent` — the current ratio as a percentage (0 to 100).
+ * @remarks
+ * - In controlled mode (`ratio` defined), divider position is fully driven by the prop
+ *   and internal state is never updated.
+ * - In uncontrolled mode, internal state is initialized from `defaultRatio` and updated
+ *   on both drag and click interactions.
+ * - `actionHandlers.dragged` and `actionHandlers.clicked` are always forwarded to the
+ *   underlying controlled component, regardless of mode.
  *
  * @param props - Component properties.
  * @see {@link Props}
- * @see {@link BeforeAfterControlled}
- * @returns A {@link BeforeAfterControlled} with computed ratio and orientation modifiers applied.
+ * @returns A {@link BeforeAfterControlled} instance with ratio state managed internally when uncontrolled.
  */
-export const BeforeAfter = ({ direction, defaultRatio, stateHandlers, ...controlledProps }) => {
-    const { actionHandlers, ratio } = controlledProps;
-    const [internalRatio, setInternalRatio] = useState(ratio ?? defaultRatio ?? 0);
-    const handlePointer = useCallback((e, targetHRatio, targetVRatio, ratio, element) => {
-        if (direction === 'vertical')
-            setInternalRatio(targetVRatio);
-        else
-            setInternalRatio(targetHRatio);
-        actionHandlers?.pointer?.(e, targetHRatio, targetVRatio, ratio, element);
-    }, [direction, actionHandlers?.pointer]);
-    useEffect(() => {
-        stateHandlers?.ratio?.(internalRatio);
-    }, [internalRatio, stateHandlers?.ratio]);
-    return _jsx(BeforeAfterControlled, { ...controlledProps, _modifiers: {
-            horizontal: direction !== 'vertical',
-            vertical: direction === 'vertical'
-        }, ratio: ratio ?? internalRatio, actionHandlers: { pointer: handlePointer } });
+export const BeforeAfter = ({ mode = 'horizontal', actionHandlers, stateHandlers, ratio, defaultRatio = 0.5, ...controlledProps }) => {
+    const [internalRatio, setInternalRatio] = useState(defaultRatio);
+    const isControlled = ratio !== undefined;
+    const effectiveRatio = isControlled ? ratio : internalRatio;
+    const handleDrag = (x, y) => {
+        x = 1.02 * x - 0.01;
+        y = 1.02 * y - 0.01;
+        actionHandlers?.dragged?.(x, y);
+        if (!isControlled) {
+            setInternalRatio(mode === 'horizontal' ? x : y);
+            stateHandlers?.ratioChanged?.(mode === 'horizontal' ? x : y);
+        }
+    };
+    const handleClick = (x, y) => {
+        x = 1.02 * x - 0.01;
+        y = 1.02 * y - 0.01;
+        actionHandlers?.clicked?.(x, y);
+        if (!isControlled) {
+            setInternalRatio(mode === 'horizontal' ? x : y);
+            stateHandlers?.ratioChanged?.(mode === 'horizontal' ? x : y);
+        }
+    };
+    return _jsx(BeforeAfterControlled, { ...controlledProps, mode: mode, ratio: effectiveRatio, actionHandlers: {
+            dragged: handleDrag,
+            clicked: handleClick
+        } });
 };

package/components/Image/index.d.ts

@@ -5,11 +5,9 @@ import type { WithClassName } from '../utils/types.js';
 /**
  * Describes a single responsive image source for use in a `<picture>` element.
  *
- * @property srcSet - One or more image URLs with optional width/density descriptors
- * (e.g. `'img@2x.png 2x'`).
+ * @property srcSet - One or more image URLs with optional width/density descriptors (e.g. `'img@2x.png 2x'`).
  * @property type - MIME type hint for the source (e.g. `'image/webp'`).
- * @property media - Media condition under which this source is selected
- * (e.g. `'(max-width: 768px)'`).
+ * @property media - Media condition under which this source is selected (e.g. `'(max-width: 768px)'`).
  * @property sizes - Sizes attribute forwarded to the `<source>` element.
  */
 type SourceData = {

package/components/index.d.ts

@@ -1,6 +1,6 @@
 export * as beforeAfter from './BeforeAfter/index.js'
-export * as clippable from './Clippable/index.js'
 export * as disclaimer from './Disclaimer/index.js'
+export * as clippable from './Clippable/index.js'
 export * as drawer from './Drawer/index.js'
 export * as eventListener from './EventListener/index.js'
 export * as gallery from './Gallery/index.js'

package/components/index.js

@@ -1,6 +1,6 @@
 export * as beforeAfter from './BeforeAfter/index.js'
-export * as clippable from './Clippable/index.js'
 export * as disclaimer from './Disclaimer/index.js'
+export * as clippable from './Clippable/index.js'
 export * as drawer from './Drawer/index.js'
 export * as eventListener from './EventListener/index.js'
 export * as gallery from './Gallery/index.js'

package/index.d.ts

@@ -1,3 +1,3 @@
-export * as components from './components/index.js'
 export * as agnostic from './agnostic/index.js'
+export * as components from './components/index.js'
 export * as node from './node/index.js'

package/index.js

@@ -1,3 +1,3 @@
-export * as components from './components/index.js'
 export * as agnostic from './agnostic/index.js'
+export * as components from './components/index.js'
 export * as node from './node/index.js'

package/node/@aws-s3/storage/file/index.d.ts

@@ -1,7 +1,7 @@
-export * as download from './download/index.js'
 export * as copy from './copy/index.js'
+export * as download from './download/index.js'
 export * as exists from './exists/index.js'
 export * as move from './move/index.js'
+export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'
 export * as upload from './upload/index.js'
-export * as remove from './remove/index.js'

package/node/@aws-s3/storage/file/index.js

@@ -1,7 +1,7 @@
-export * as download from './download/index.js'
 export * as copy from './copy/index.js'
+export * as download from './download/index.js'
 export * as exists from './exists/index.js'
 export * as move from './move/index.js'
+export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'
 export * as upload from './upload/index.js'
-export * as remove from './remove/index.js'

package/node/ftps/file/index.d.ts

@@ -1,6 +1,6 @@
 export * as copy from './copy/index.js'
-export * as exists from './exists/index.js'
 export * as download from './download/index.js'
+export * as exists from './exists/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'

package/node/ftps/file/index.js

@@ -1,6 +1,6 @@
 export * as copy from './copy/index.js'
-export * as exists from './exists/index.js'
 export * as download from './download/index.js'
+export * as exists from './exists/index.js'
 export * as move from './move/index.js'
 export * as remove from './remove/index.js'
 export * as stat from './stat/index.js'

package/node/images/transform/operations/index.d.ts

@@ -1,15 +1,15 @@
 export * as blur from './blur/index.js'
-export * as brighten from './brighten/index.js'
 export * as extend from './extend/index.js'
+export * as brighten from './brighten/index.js'
 export * as extract from './extract/index.js'
 export * as flatten from './flatten/index.js'
 export * as flip from './flip/index.js'
-export * as hue from './hue/index.js'
 export * as flop from './flop/index.js'
+export * as hue from './hue/index.js'
 export * as level from './level/index.js'
 export * as lighten from './lighten/index.js'
-export * as normalize from './normalize/index.js'
 export * as overlay from './overlay/index.js'
+export * as normalize from './normalize/index.js'
 export * as resize from './resize/index.js'
 export * as rotate from './rotate/index.js'
 export * as saturate from './saturate/index.js'

package/node/images/transform/operations/index.js

@@ -1,15 +1,15 @@
 export * as blur from './blur/index.js'
-export * as brighten from './brighten/index.js'
 export * as extend from './extend/index.js'
+export * as brighten from './brighten/index.js'
 export * as extract from './extract/index.js'
 export * as flatten from './flatten/index.js'
 export * as flip from './flip/index.js'
-export * as hue from './hue/index.js'
 export * as flop from './flop/index.js'
+export * as hue from './hue/index.js'
 export * as level from './level/index.js'
 export * as lighten from './lighten/index.js'
-export * as normalize from './normalize/index.js'
 export * as overlay from './overlay/index.js'
+export * as normalize from './normalize/index.js'
 export * as resize from './resize/index.js'
 export * as rotate from './rotate/index.js'
 export * as saturate from './saturate/index.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design-edito/tools",
-  "version": "0.4.16",
+  "version": "0.4.17",
   "description": "",
   "author": "Maxime Fabas",
   "license": "ISC",