@pixel-point/toolcraft 0.0.2

package/templates/ui/components/primitives/slider/slider-parts.tsx

@@ -0,0 +1,303 @@
+"use client";
+
+import * as React from "react";
+import { Slider as SliderPrimitive } from "@base-ui/react/slider";
+
+import { cn } from "../../../lib/utils";
+import type { SliderThumbDoubleClickHandler } from "./slider-reset";
+
+type SliderOrientation = "horizontal" | "vertical";
+
+type SliderControlContentProps = {
+  count: number;
+  disabled?: boolean;
+  getAriaLabel?: (index: number) => string;
+  isDiscrete: boolean;
+  isPointerDragging: boolean;
+  markerCount: number;
+  markerValues?: readonly number[];
+  max: number;
+  min: number;
+  onThumbDoubleClick?: SliderThumbDoubleClickHandler;
+  orientation: SliderOrientation;
+  showFill: boolean;
+};
+
+type SliderThumbPointerSnapshot = {
+  clientX: number;
+  clientY: number;
+  index: number;
+  pointerType: string;
+  timeStamp: number;
+};
+
+const sliderThumbDoubleClickDelayMs = 340;
+const sliderThumbDoubleClickDistancePx = 6;
+
+function useActiveSliderThumbDrag(disabled: boolean): {
+  activeDragIndex: number | null;
+  handlePointerDown: (event: React.PointerEvent<HTMLDivElement>, index: number) => void;
+} {
+  const [activeDragIndex, setActiveDragIndex] = React.useState<number | null>(null);
+  const clearActiveDragIndex = React.useCallback(() => {
+    setActiveDragIndex(null);
+  }, []);
+  const handlePointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>, index: number) => {
+      if (event.defaultPrevented || disabled || event.button !== 0) {
+        return;
+      }
+
+      setActiveDragIndex(index);
+    },
+    [disabled],
+  );
+
+  React.useEffect(() => {
+    if (activeDragIndex === null) {
+      return undefined;
+    }
+
+    window.addEventListener("pointerup", clearActiveDragIndex);
+    window.addEventListener("pointercancel", clearActiveDragIndex);
+    window.addEventListener("blur", clearActiveDragIndex);
+
+    return () => {
+      window.removeEventListener("pointerup", clearActiveDragIndex);
+      window.removeEventListener("pointercancel", clearActiveDragIndex);
+      window.removeEventListener("blur", clearActiveDragIndex);
+    };
+  }, [activeDragIndex, clearActiveDragIndex]);
+
+  return { activeDragIndex, handlePointerDown };
+}
+
+function SliderMarkers({
+  disabled = false,
+  isPointerDragging,
+  markerCount,
+  markerValues,
+  max,
+  min,
+  orientation,
+}: {
+  disabled?: boolean;
+  isPointerDragging: boolean;
+  markerCount: number;
+  markerValues?: readonly number[];
+  max: number;
+  min: number;
+  orientation: SliderOrientation;
+}): React.JSX.Element | null {
+  const markerOffsets = markerValues?.length
+    ? markerValues
+        .filter((value) => value > min && value < max)
+        .map((value) => ((value - min) / (max - min)) * 100)
+    : Array.from({ length: markerCount }, (_, index) => {
+        if (index === 0 || index === markerCount - 1) {
+          return null;
+        }
+
+        return (index / (markerCount - 1)) * 100;
+      }).filter((offset): offset is number => offset !== null);
+
+  if (markerOffsets.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      {markerOffsets.map((offsetValue, index) => {
+        const offset = `${offsetValue}%`;
+        return (
+          <span
+            aria-hidden
+            className={cn(
+              "pointer-events-none absolute rounded-full bg-[color:var(--slider-active-color)] opacity-0 transition-opacity duration-150",
+              disabled
+                ? null
+                : isPointerDragging
+                  ? "opacity-100"
+                  : "group-hover/slider-control:opacity-100",
+              orientation === "vertical"
+                ? "left-1/2 h-px w-1.5 -translate-x-1/2 translate-y-1/2"
+                : "top-1/2 h-1.5 w-px -translate-x-1/2 -translate-y-1/2",
+            )}
+            data-slot="slider-marker"
+            key={`${offset}-${index}`}
+            style={orientation === "vertical" ? { bottom: offset } : { left: offset }}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+function SliderThumbs({
+  count,
+  disabled = false,
+  getAriaLabel,
+  onDoubleClick,
+}: {
+  count: number;
+  disabled?: boolean;
+  getAriaLabel?: (index: number) => string;
+  onDoubleClick?: SliderThumbDoubleClickHandler;
+}): React.JSX.Element {
+  const { activeDragIndex, handlePointerDown } = useActiveSliderThumbDrag(disabled);
+  const lastPointerDownRef = React.useRef<SliderThumbPointerSnapshot | null>(null);
+  const suppressNextDoubleClickRef = React.useRef(false);
+
+  const shouldResetFromPointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>, index: number): boolean => {
+      if (event.detail >= 2) {
+        return true;
+      }
+
+      const previousPointerDown = lastPointerDownRef.current;
+      if (!previousPointerDown || previousPointerDown.index !== index) {
+        return false;
+      }
+
+      const deltaTime = event.timeStamp - previousPointerDown.timeStamp;
+      const deltaX = event.clientX - previousPointerDown.clientX;
+      const deltaY = event.clientY - previousPointerDown.clientY;
+      const distance = Math.hypot(deltaX, deltaY);
+
+      return (
+        previousPointerDown.pointerType === event.pointerType &&
+        deltaTime >= 0 &&
+        deltaTime <= sliderThumbDoubleClickDelayMs &&
+        distance <= sliderThumbDoubleClickDistancePx
+      );
+    },
+    [],
+  );
+  const handlePointerDownCapture = React.useCallback(
+    (event: React.PointerEvent<HTMLDivElement>, index: number) => {
+      if (!onDoubleClick || disabled || event.button !== 0) {
+        return;
+      }
+
+      if (shouldResetFromPointerDown(event, index)) {
+        lastPointerDownRef.current = null;
+        suppressNextDoubleClickRef.current = true;
+        onDoubleClick(event, index);
+        return;
+      }
+
+      lastPointerDownRef.current = {
+        clientX: event.clientX,
+        clientY: event.clientY,
+        index,
+        pointerType: event.pointerType,
+        timeStamp: event.timeStamp,
+      };
+    },
+    [disabled, onDoubleClick, shouldResetFromPointerDown],
+  );
+  const handleDoubleClick = React.useCallback(
+    (event: React.MouseEvent<HTMLDivElement>, index: number) => {
+      if (suppressNextDoubleClickRef.current) {
+        suppressNextDoubleClickRef.current = false;
+        event.preventDefault();
+        event.stopPropagation();
+        return;
+      }
+
+      onDoubleClick?.(event, index);
+    },
+    [onDoubleClick],
+  );
+
+  return (
+    <>
+      {Array.from({ length: count }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          getAriaLabel={getAriaLabel}
+          index={index}
+          key={index}
+          onDoubleClick={(event) => handleDoubleClick(event, index)}
+          onPointerDownCapture={(event) => handlePointerDownCapture(event, index)}
+          onPointerDown={(event) => handlePointerDown(event, index)}
+          className={cn(
+            "group/slider-thumb relative block size-[9px] shrink-0 cursor-pointer rounded-[2px] select-none before:absolute before:top-1/2 before:left-1/2 before:block before:size-[18px] before:-translate-x-1/2 before:-translate-y-1/2 before:content-[''] transition-[inset-inline-start,bottom] duration-200 ease-out data-[dragging]:transition-none disabled:pointer-events-none motion-reduce:transition-none",
+          )}
+        >
+          <span
+            aria-hidden
+            data-active-dragging={activeDragIndex === index ? "true" : undefined}
+            data-slot="slider-dot"
+            className={cn(
+              "pointer-events-none absolute inset-0 block rounded-[2px] bg-[color:var(--slider-active-color)] transition-[scale,background-color] duration-200 ease-out motion-reduce:transition-none",
+              disabled
+                ? null
+                : "group-hover/slider-thumb:scale-[1.4] data-[active-dragging=true]:scale-[1.4]",
+            )}
+          />
+        </SliderPrimitive.Thumb>
+      ))}
+    </>
+  );
+}
+
+function SliderFill({ show }: { show: boolean }): React.JSX.Element | null {
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <SliderPrimitive.Indicator
+      data-slot="slider-range"
+      className={cn(
+        "bg-[color:var(--slider-active-color)] transition-[width,height,inset-inline-start,bottom] duration-200 ease-out select-none data-[dragging]:transition-none data-horizontal:h-full data-vertical:w-full motion-reduce:transition-none",
+      )}
+    />
+  );
+}
+
+function SliderControlContent({
+  count,
+  disabled,
+  getAriaLabel,
+  isDiscrete,
+  isPointerDragging,
+  markerCount,
+  markerValues,
+  max,
+  min,
+  onThumbDoubleClick,
+  orientation,
+  showFill,
+}: SliderControlContentProps): React.JSX.Element {
+  return (
+    <SliderPrimitive.Control className="group/slider-control relative flex touch-none items-center select-none data-[disabled]:opacity-[0.15] data-horizontal:h-[18px] data-horizontal:w-full data-vertical:h-full data-vertical:min-h-40 data-vertical:w-[18px] data-vertical:flex-col">
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className="group/slider-track relative grow overflow-visible rounded-full bg-[color:var(--slider-track-color)] select-none data-horizontal:h-px data-horizontal:w-full data-vertical:h-full data-vertical:w-px"
+      >
+        <SliderFill show={showFill} />
+        {isDiscrete ? (
+          <SliderMarkers
+            disabled={disabled}
+            isPointerDragging={isPointerDragging}
+            markerCount={markerCount}
+            markerValues={markerValues}
+            max={max}
+            min={min}
+            orientation={orientation}
+          />
+        ) : null}
+      </SliderPrimitive.Track>
+      <SliderThumbs
+        count={count}
+        disabled={disabled}
+        getAriaLabel={getAriaLabel}
+        onDoubleClick={onThumbDoubleClick}
+      />
+    </SliderPrimitive.Control>
+  );
+}
+
+export { SliderControlContent, SliderFill, SliderMarkers, SliderThumbs };

package/templates/ui/components/primitives/slider/slider-reset.ts

@@ -0,0 +1,152 @@
+"use client";
+
+import * as React from "react";
+import type { Slider as SliderPrimitive } from "@base-ui/react/slider";
+
+import {
+  normalizeSliderValueShape,
+  snapSliderValue,
+  valuesMatch,
+  type SliderRuntimeValue,
+  type SliderValue,
+} from "./slider-value";
+
+export type SliderThumbDoubleClickHandler = (
+  event: React.MouseEvent<HTMLDivElement> | React.PointerEvent<HTMLDivElement>,
+  index: number,
+) => void;
+
+type UseSliderThumbResetOptions<Value extends number | readonly number[]> = {
+  defaultValue?: Value;
+  disabled?: boolean;
+  handleValueChange: SliderPrimitive.Root.Props<Value>["onValueChange"];
+  handleValueCommitted: (
+    value: SliderValue<Value>,
+    eventDetails: SliderPrimitive.Root.CommitEventDetails,
+  ) => void;
+  isDiscrete: boolean;
+  max: number;
+  min: number;
+  resetValue?: Value;
+  snapValues?: readonly number[];
+  step: number;
+  value?: Value;
+  values: readonly number[];
+};
+
+function createSliderResetChangeEventDetails(
+  event: React.MouseEvent<HTMLDivElement> | React.PointerEvent<HTMLDivElement>,
+  activeThumbIndex: number,
+): SliderPrimitive.Root.ChangeEventDetails {
+  return {
+    activeThumbIndex,
+    allowPropagation: () => undefined,
+    cancel: () => undefined,
+    event: event.nativeEvent,
+    isCanceled: false,
+    isPropagationAllowed: false,
+    reason: "none",
+    trigger: event.currentTarget,
+  };
+}
+
+function createSliderResetCommitEventDetails(
+  event: React.MouseEvent<HTMLDivElement> | React.PointerEvent<HTMLDivElement>,
+): SliderPrimitive.Root.CommitEventDetails {
+  return {
+    event: event.nativeEvent,
+    reason: "none",
+  };
+}
+
+function getThumbResetValue<Value extends number | readonly number[]>(
+  currentValue: Value,
+  resetValue: Value,
+  index: number,
+): Value {
+  if (!Array.isArray(currentValue) || !Array.isArray(resetValue)) {
+    return resetValue;
+  }
+
+  const nextValue = [...currentValue];
+  const nextThumbValue = resetValue[index] ?? currentValue[index];
+  if (nextThumbValue === undefined) {
+    return currentValue;
+  }
+
+  nextValue[index] = nextThumbValue;
+
+  return nextValue as unknown as Value;
+}
+
+export function useSliderThumbReset<Value extends number | readonly number[]>({
+  defaultValue,
+  disabled,
+  handleValueChange,
+  handleValueCommitted,
+  isDiscrete,
+  max,
+  min,
+  resetValue,
+  snapValues,
+  step,
+  value,
+  values,
+}: UseSliderThumbResetOptions<Value>): SliderThumbDoubleClickHandler {
+  const initialResetValueRef = React.useRef<Value | undefined>(resetValue ?? defaultValue ?? value);
+
+  return React.useCallback(
+    (event, index) => {
+      if (disabled) {
+        return;
+      }
+
+      const resetTarget = resetValue ?? defaultValue ?? initialResetValueRef.current;
+      if (resetTarget === undefined) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      const normalizedResetValue = normalizeSliderValueShape(
+        resetTarget as SliderRuntimeValue,
+        value,
+        defaultValue,
+        min,
+      );
+      const currentValue = normalizeSliderValueShape(values, value, defaultValue, min);
+      const resetThumbValue = getThumbResetValue(currentValue, normalizedResetValue, index);
+      const nextValue = isDiscrete
+        ? snapSliderValue(resetThumbValue, min, max, step, snapValues)
+        : resetThumbValue;
+
+      if (valuesMatch(currentValue, nextValue)) {
+        return;
+      }
+
+      handleValueChange?.(
+        nextValue as SliderValue<Value>,
+        createSliderResetChangeEventDetails(event, index),
+      );
+      handleValueCommitted(
+        nextValue as SliderValue<Value>,
+        createSliderResetCommitEventDetails(event),
+      );
+    },
+    [
+      defaultValue,
+      disabled,
+      handleValueChange,
+      handleValueCommitted,
+      isDiscrete,
+      max,
+      min,
+      resetValue,
+      snapValues,
+      step,
+      value,
+      values,
+    ],
+  );
+}

package/templates/ui/components/primitives/slider/slider-value.ts

@@ -0,0 +1,114 @@
+export type SliderRuntimeValue = number | readonly number[];
+export type SliderValue<Value extends number | readonly number[]> = Value extends number
+  ? number
+  : Value;
+
+function snapValue(value: number, min: number, max: number, step: number): number {
+  const safeStep = step > 0 ? step : 1;
+  const snapped = min + Math.round((value - min) / safeStep) * safeStep;
+
+  return Math.min(max, Math.max(min, Number(snapped.toFixed(6))));
+}
+
+function snapValueToAllowedValues(
+  value: number,
+  min: number,
+  max: number,
+  allowedValues: readonly number[] | undefined,
+): number | null {
+  if (!allowedValues?.length) {
+    return null;
+  }
+
+  const safeValues = allowedValues
+    .filter((item) => Number.isFinite(item))
+    .map((item) => Math.min(max, Math.max(min, item)));
+
+  if (!safeValues.length) {
+    return null;
+  }
+
+  const nearestValue = safeValues.reduce((nearest, item) => {
+    const nearestDistance = Math.abs(nearest - value);
+    const itemDistance = Math.abs(item - value);
+
+    return itemDistance < nearestDistance ? item : nearest;
+  }, safeValues[0]!);
+
+  return Number(nearestValue.toFixed(6));
+}
+
+export function getSliderValues<Value extends number | readonly number[]>(
+  value: Value | undefined,
+  defaultValue: Value | undefined,
+  min: number,
+  max: number,
+): number[] {
+  if (Array.isArray(value)) {
+    return [...value];
+  }
+
+  if (typeof value === "number") {
+    return [value];
+  }
+
+  if (Array.isArray(defaultValue)) {
+    return [...defaultValue];
+  }
+
+  if (typeof defaultValue === "number") {
+    return [defaultValue];
+  }
+
+  return [min, max];
+}
+
+export function normalizeSliderValueShape<Value extends number | readonly number[]>(
+  nextValue: SliderRuntimeValue,
+  value: Value | undefined,
+  defaultValue: Value | undefined,
+  min: number,
+): Value {
+  const referenceValue = value ?? defaultValue;
+
+  if (Array.isArray(referenceValue)) {
+    return (Array.isArray(nextValue) ? [...nextValue] : [nextValue]) as unknown as Value;
+  }
+
+  if (typeof referenceValue === "number") {
+    return (Array.isArray(nextValue) ? (nextValue[0] ?? min) : nextValue) as Value;
+  }
+
+  return nextValue as Value;
+}
+
+export function snapSliderValue<Value extends number | readonly number[]>(
+  nextValue: Value,
+  min: number,
+  max: number,
+  step: number,
+  snapValues?: readonly number[],
+): Value {
+  if (typeof nextValue === "number") {
+    const allowedValue = snapValueToAllowedValues(nextValue, min, max, snapValues);
+    if (allowedValue !== null) {
+      return allowedValue as Value;
+    }
+
+    return snapValue(nextValue, min, max, step) as Value;
+  }
+
+  return nextValue.map((item) => (
+    snapValueToAllowedValues(item, min, max, snapValues) ?? snapValue(item, min, max, step)
+  )) as unknown as Value;
+}
+
+export function valuesMatch<Value extends number | readonly number[]>(left: Value, right: Value): boolean {
+  if (Array.isArray(left) && Array.isArray(right)) {
+    return (
+      left.length === right.length && left.every((leftValue, index) => leftValue === right[index])
+    );
+  }
+
+  return left === right;
+}