@pixel-point/toolcraft 0.0.14 → 0.0.15

package/templates/ui/components/controls/vector/vector-pad-field.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../../lib/utils";
+import { ControlFieldLabel } from "../../control-layout";
+import { EditableSliderValueLabel, Field } from "../../primitives";
+import {
+  createControlHistoryGroupId,
+  type ControlChangeMeta,
+} from "../control-types";
+import type {
+  VectorControlProps,
+  VectorControlValue,
+} from "./vector-control-types";
+import {
+  getDefaultPadCoordinateMode,
+  getVectorPoint,
+  pointFromEvent,
+} from "./vector-pad-geometry";
+import { VectorPadGuides, VectorPadHandle } from "./vector-pad-parts";
+import { vectorPadBackgroundImages } from "./vector-pad-variants";
+import {
+  formatVectorPadCoordinate,
+  getVectorValueLabel,
+  parseVectorValueDraft,
+} from "./vector-value";
+
+type VectorPadAxisLock = "x" | "y";
+
+type VectorPadDragStart = {
+  clientX: number;
+  clientY: number;
+  value: VectorControlValue;
+};
+
+const vectorPadAxisLockThresholdPx = 2;
+
+export function VectorPadField({
+  defaultValue,
+  name,
+  onValueChange,
+  padCoordinateMode,
+  padShape = "compact",
+  padVariant = "default",
+  x,
+  y,
+}: VectorControlProps): React.JSX.Element {
+  const [isPointerDragging, setIsPointerDragging] = React.useState(false);
+  const normalizedX = formatVectorPadCoordinate(x);
+  const normalizedY = formatVectorPadCoordinate(y);
+  const coordinateMode =
+    padCoordinateMode ?? getDefaultPadCoordinateMode(padVariant);
+  const point = getVectorPoint(normalizedX, normalizedY, coordinateMode);
+  const valueLabel = getVectorValueLabel(normalizedX, normalizedY);
+  const vectorPadBackgroundImage = vectorPadBackgroundImages[padVariant];
+  const axisLockRef = React.useRef<VectorPadAxisLock | null>(null);
+  const dragStartRef = React.useRef<VectorPadDragStart | null>(null);
+  const liveHistoryGroupRef = React.useRef<string | null>(null);
+  const resetX = formatVectorPadCoordinate(defaultValue?.x);
+  const resetY = formatVectorPadCoordinate(defaultValue?.y);
+  const accessibleName = name || "Vector";
+  const updateVector = (
+    nextX: string,
+    nextY: string,
+    meta?: ControlChangeMeta,
+  ) => {
+    if (meta) {
+      onValueChange?.({ x: nextX, y: nextY }, meta);
+      return;
+    }
+
+    onValueChange?.({ x: nextX, y: nextY });
+  };
+  const commitVectorValue = (nextValue: string) => {
+    const nextVector = parseVectorValueDraft(nextValue);
+
+    if (nextVector) {
+      updateVector(nextVector.x, nextVector.y);
+    }
+  };
+
+  function getLiveHistoryMeta(): ControlChangeMeta {
+    liveHistoryGroupRef.current ??= createControlHistoryGroupId(`vector:${accessibleName}`);
+
+    return {
+      history: "merge",
+      historyGroup: liveHistoryGroupRef.current,
+    };
+  }
+
+  function updateFromPointer(event: React.PointerEvent<HTMLButtonElement>): void {
+    const nextPoint = pointFromEvent(event, coordinateMode);
+    const nextValue: VectorControlValue = {
+      x: (nextPoint.x * 2 - 1).toFixed(2),
+      y: (nextPoint.y * 2 - 1).toFixed(2),
+    };
+    const dragStart = dragStartRef.current;
+
+    if (event.shiftKey && dragStart) {
+      if (!axisLockRef.current) {
+        const deltaX = event.clientX - dragStart.clientX;
+        const deltaY = event.clientY - dragStart.clientY;
+
+        if (Math.hypot(deltaX, deltaY) < vectorPadAxisLockThresholdPx) {
+          updateVector(
+            dragStart.value.x,
+            dragStart.value.y,
+            getLiveHistoryMeta(),
+          );
+          return;
+        }
+
+        axisLockRef.current = Math.abs(deltaX) >= Math.abs(deltaY) ? "x" : "y";
+      }
+
+      updateVector(
+        axisLockRef.current === "x" ? nextValue.x : dragStart.value.x,
+        axisLockRef.current === "y" ? nextValue.y : dragStart.value.y,
+        getLiveHistoryMeta(),
+      );
+      return;
+    }
+
+    axisLockRef.current = null;
+
+    updateVector(
+      nextValue.x,
+      nextValue.y,
+      getLiveHistoryMeta(),
+    );
+  }
+
+  function stopPointerDrag(): void {
+    setIsPointerDragging(false);
+    axisLockRef.current = null;
+    dragStartRef.current = null;
+    liveHistoryGroupRef.current = null;
+  }
+
+  return (
+    <Field className="min-w-0 gap-2">
+      {name ? (
+        <div className="grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-3">
+          <ControlFieldLabel className="min-w-0">{name}</ControlFieldLabel>
+          <EditableSliderValueLabel
+            ariaLabel={`${name} value`}
+            maxValueLabel="-1.00, -1.00"
+            onCommit={commitVectorValue}
+            valueLabel={valueLabel}
+          />
+        </div>
+      ) : null}
+      <button
+        aria-label={`${accessibleName} X/Y pad`}
+        className={cn(
+          "relative w-full cursor-default! touch-none overflow-hidden rounded-[calc(var(--radius)+2px)] bg-[linear-gradient(180deg,color-mix(in_oklab,var(--foreground)_4%,transparent),color-mix(in_oklab,var(--foreground)_1%,transparent))] select-none focus-visible:shadow-[0_0_0_3px_color-mix(in_oklab,var(--foreground)_12%,transparent)] focus-visible:outline-none",
+          padShape === "square" ? "aspect-square" : "h-[142px]",
+        )}
+        data-vector-pad-coordinate-mode={coordinateMode}
+        data-vector-pad-shape={padShape}
+        data-vector-pad-variant={padVariant}
+        onDoubleClick={(event) => {
+          event.preventDefault();
+          stopPointerDrag();
+          updateVector(resetX, resetY);
+        }}
+        onLostPointerCapture={stopPointerDrag}
+        onPointerCancel={stopPointerDrag}
+        onPointerDown={(event) => {
+          event.preventDefault();
+          setIsPointerDragging(true);
+          axisLockRef.current = null;
+          dragStartRef.current = {
+            clientX: event.clientX,
+            clientY: event.clientY,
+            value: { x: normalizedX, y: normalizedY },
+          };
+          event.currentTarget.setPointerCapture(event.pointerId);
+          updateFromPointer(event);
+        }}
+        onPointerMove={(event) => {
+          if (event.buttons === 1) {
+            updateFromPointer(event);
+          }
+        }}
+        onPointerUp={stopPointerDrag}
+        style={point}
+        type="button"
+      >
+        {vectorPadBackgroundImage ? (
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-0 rounded-[inherit] opacity-40"
+            style={{ backgroundImage: vectorPadBackgroundImage }}
+          />
+        ) : null}
+        <span
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 rounded-[inherit] bg-[radial-gradient(circle,color-mix(in_oklab,var(--foreground)_8%,transparent)_1px,transparent_1px)] bg-[length:14px_14px]"
+        />
+        <VectorPadGuides isDragging={isPointerDragging} />
+        <VectorPadHandle isDragging={isPointerDragging} />
+        <span
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-0 z-30 rounded-[inherit] border border-[color:color-mix(in_oklab,var(--border)_10%,transparent)]"
+        />
+      </button>
+    </Field>
+  );
+}

package/templates/ui/components/controls/vector/vector-pad-geometry.ts

@@ -0,0 +1,61 @@
+import type * as React from "react";
+
+import type {
+  VectorPadCoordinateMode,
+  VectorPadVariant,
+} from "./vector-control-types";
+import { clamp } from "./vector-value";
+
+type VectorPadPoint = { x: number; y: number };
+
+export type VectorPadStyle = React.CSSProperties & {
+  "--xy-pad-display-x": string;
+  "--xy-pad-display-y": string;
+  "--xy-pad-handle-margin": string;
+  "--xy-pad-x": string;
+  "--xy-pad-y": string;
+};
+
+export function getDefaultPadCoordinateMode(
+  padVariant: VectorPadVariant,
+): VectorPadCoordinateMode {
+  return padVariant === "default" ? "screen" : "cartesian";
+}
+
+export function pointFromEvent(
+  event: React.PointerEvent<HTMLElement>,
+  coordinateMode: VectorPadCoordinateMode,
+): VectorPadPoint {
+  const rect = event.currentTarget.getBoundingClientRect();
+  const x = clamp((event.clientX - rect.left) / rect.width);
+  const yRatio = clamp((event.clientY - rect.top) / rect.height);
+  const y = coordinateMode === "screen" ? yRatio : 1 - yRatio;
+
+  return { x, y };
+}
+
+export function getVectorPoint(
+  x: string,
+  y: string,
+  coordinateMode: VectorPadCoordinateMode,
+): VectorPadStyle {
+  const parsedX = Number.parseFloat(x);
+  const parsedY = Number.parseFloat(y);
+  const clampedX = Number.isFinite(parsedX) ? clamp(parsedX, -1, 1) : 0;
+  const clampedY = Number.isFinite(parsedY) ? clamp(parsedY, -1, 1) : 0;
+  const xPosition = `${(clampedX + 1) * 50}%`;
+  const yPosition =
+    coordinateMode === "screen"
+      ? `${((clampedY + 1) / 2) * 100}%`
+      : `${(1 - (clampedY + 1) / 2) * 100}%`;
+
+  return {
+    "--xy-pad-display-x":
+      "clamp(var(--xy-pad-handle-margin), var(--xy-pad-x), calc(100% - var(--xy-pad-handle-margin)))",
+    "--xy-pad-display-y":
+      "clamp(var(--xy-pad-handle-margin), var(--xy-pad-y), calc(100% - var(--xy-pad-handle-margin)))",
+    "--xy-pad-handle-margin": "12px",
+    "--xy-pad-x": xPosition,
+    "--xy-pad-y": yPosition,
+  };
+}

package/templates/ui/components/controls/vector/vector-pad-parts.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../../lib/utils";
+
+export function VectorPadGuides({
+  isDragging,
+}: {
+  isDragging: boolean;
+}): React.JSX.Element {
+  const motionClass = isDragging
+    ? "transition-none"
+    : "transition-[top] duration-[260ms] ease-[cubic-bezier(0.34,1.56,0.64,1)]";
+  const verticalMotionClass = isDragging
+    ? "transition-none"
+    : "transition-[left] duration-[260ms] ease-[cubic-bezier(0.34,1.56,0.64,1)]";
+
+  return (
+    <>
+      <span
+        aria-hidden="true"
+        className={cn(
+          "pointer-events-none absolute inset-x-0 z-10 h-px bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_20%,transparent),transparent)]",
+          motionClass,
+        )}
+        style={{ top: "var(--xy-pad-display-y)" }}
+      />
+      <span
+        aria-hidden="true"
+        className={cn(
+          "pointer-events-none absolute top-0 bottom-0 z-10 w-px bg-[linear-gradient(180deg,transparent,color-mix(in_oklab,var(--foreground)_20%,transparent),transparent)]",
+          verticalMotionClass,
+        )}
+        style={{ left: "var(--xy-pad-display-x)" }}
+      />
+    </>
+  );
+}
+
+export function VectorPadHandle({
+  isDragging,
+}: {
+  isDragging: boolean;
+}): React.JSX.Element {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "xy-handle group/xy-handle pointer-events-auto absolute z-20 size-3 -translate-x-1/2 -translate-y-1/2 cursor-default will-change-[left,top,transform]",
+        isDragging
+          ? "cursor-pointer transition-transform duration-[120ms] ease-[cubic-bezier(0.22,1,0.36,1)]"
+          : "transition-[left,top,transform] duration-[260ms,260ms,120ms] ease-[cubic-bezier(0.34,1.56,0.64,1),cubic-bezier(0.34,1.56,0.64,1),cubic-bezier(0.22,1,0.36,1)] hover:cursor-pointer",
+      )}
+      style={{ left: "var(--xy-pad-display-x)", top: "var(--xy-pad-display-y)" }}
+    >
+      <span
+        aria-hidden="true"
+        className={cn(
+          "pointer-events-none absolute inset-[-5px] rounded-full bg-[color:color-mix(in_oklab,var(--foreground)_12%,transparent)] opacity-0 blur-[8px] transition-[opacity,scale] duration-200 ease-out",
+          isDragging ? "scale-[1.45] opacity-100" : "scale-95",
+        )}
+      />
+      <span
+        className={cn(
+          "relative block size-full rounded-full bg-[radial-gradient(circle_at_30%_30%,color-mix(in_oklab,var(--foreground)_95%,transparent),color-mix(in_oklab,var(--foreground)_76%,transparent)),linear-gradient(180deg,color-mix(in_oklab,var(--foreground)_20%,transparent),color-mix(in_oklab,var(--foreground)_6%,transparent))] shadow-[0_4px_10px_color-mix(in_oklab,var(--background)_20%,transparent)] transition-[scale,background-color,box-shadow] duration-200 ease-out will-change-transform motion-reduce:transition-none",
+          isDragging ? "scale-[1.3333]" : "group-hover/xy-handle:scale-[1.3333]",
+        )}
+      />
+    </div>
+  );
+}

package/templates/ui/components/controls/vector/vector-pad-variants.ts

@@ -0,0 +1,20 @@
+import type { VectorPadVariant } from "./vector-control-types";
+
+const whiteBalancePadBackgroundImage =
+  "linear-gradient(90deg,color-mix(in oklab, #2f7cff 72%, transparent),color-mix(in oklab, var(--foreground) 8%, transparent) 50%,color-mix(in oklab, #ff9a22 78%, transparent)),linear-gradient(180deg,color-mix(in oklab, #d84f9a 68%, transparent),transparent 49%,color-mix(in oklab, #42ba62 72%, transparent)),radial-gradient(circle at 50% 50%,color-mix(in oklab, var(--foreground) 7%, transparent),color-mix(in oklab, var(--background) 14%, transparent) 62%)";
+
+const colorBalancePadBackgroundImage =
+  "linear-gradient(90deg,color-mix(in oklab, #1dbdd3 70%, transparent),color-mix(in oklab, var(--foreground) 7%, transparent) 50%,color-mix(in oklab, #ff4a45 74%, transparent)),linear-gradient(180deg,color-mix(in oklab, #f2d94c 66%, transparent),transparent 50%,color-mix(in oklab, #315cff 70%, transparent)),radial-gradient(circle at 50% 50%,color-mix(in oklab, var(--foreground) 7%, transparent),color-mix(in oklab, var(--background) 14%, transparent) 62%)";
+
+const chromaOffsetPadBackgroundImage =
+  "linear-gradient(90deg,color-mix(in oklab, #ff2f55 68%, transparent),transparent 38%,transparent 62%,color-mix(in oklab, #25c7ff 70%, transparent)),linear-gradient(180deg,color-mix(in oklab, #56ff72 54%, transparent),transparent 42%,transparent 58%,color-mix(in oklab, #7b5cff 62%, transparent)),radial-gradient(circle at 50% 50%,color-mix(in oklab, var(--foreground) 8%, transparent),color-mix(in oklab, var(--background) 14%, transparent) 62%)";
+
+const toneBiasPadBackgroundImage =
+  "linear-gradient(90deg,color-mix(in oklab, #3f56ff 60%, transparent),color-mix(in oklab, var(--foreground) 7%, transparent) 50%,color-mix(in oklab, #ffb23f 68%, transparent)),linear-gradient(180deg,color-mix(in oklab, #f05bb5 55%, transparent),transparent 50%,color-mix(in oklab, #1fbf9a 60%, transparent)),radial-gradient(circle at 50% 50%,color-mix(in oklab, var(--foreground) 7%, transparent),color-mix(in oklab, var(--background) 14%, transparent) 62%)";
+
+export const vectorPadBackgroundImages: Partial<Record<VectorPadVariant, string>> = {
+  chromaOffset: chromaOffsetPadBackgroundImage,
+  colorBalance: colorBalancePadBackgroundImage,
+  toneBias: toneBiasPadBackgroundImage,
+  whiteBalance: whiteBalancePadBackgroundImage,
+};

package/templates/ui/components/controls/vector/vector-size-field.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import * as React from "react";
+
+import { ControlFieldLabel } from "../../control-layout";
+import { Field, Input } from "../../primitives";
+import type { VectorControlProps } from "./vector-control-types";
+import { normalizeVectorCoordinate } from "./vector-value";
+
+export function VectorSizeField({
+  defaultValue,
+  name,
+  onValueChange,
+  x,
+  xLabel = "X",
+  y,
+  yLabel = "Y",
+}: VectorControlProps): React.JSX.Element {
+  const [draftValue, setDraftValue] = React.useState({ x, y });
+  const committedValueRef = React.useRef({ x, y });
+  const defaultValueRef = React.useRef({
+    x: normalizeVectorCoordinate(defaultValue?.x),
+    y: normalizeVectorCoordinate(defaultValue?.y),
+  });
+
+  React.useEffect(() => {
+    committedValueRef.current = { x, y };
+    setDraftValue({ x, y });
+  }, [x, y]);
+
+  React.useEffect(() => {
+    defaultValueRef.current = {
+      x: normalizeVectorCoordinate(defaultValue?.x),
+      y: normalizeVectorCoordinate(defaultValue?.y),
+    };
+  }, [defaultValue?.x, defaultValue?.y]);
+
+  function commitVector(): void {
+    const nextValue = {
+      x: draftValue.x.trim() === "" ? defaultValueRef.current.x : draftValue.x,
+      y: draftValue.y.trim() === "" ? defaultValueRef.current.y : draftValue.y,
+    };
+
+    setDraftValue(nextValue);
+
+    if (
+      nextValue.x !== committedValueRef.current.x ||
+      nextValue.y !== committedValueRef.current.y
+    ) {
+      onValueChange?.(nextValue);
+    }
+  }
+
+  function cancelDraft(): void {
+    setDraftValue(committedValueRef.current);
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commitVector();
+      event.currentTarget.blur();
+      return;
+    }
+
+    if (event.key === "Escape") {
+      event.preventDefault();
+      cancelDraft();
+      event.currentTarget.blur();
+    }
+  }
+
+  return (
+    <Field className="min-w-0 gap-2">
+      <div className="flex items-center justify-between gap-3">
+        <ControlFieldLabel>{name}</ControlFieldLabel>
+      </div>
+      <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-1.5">
+        <Input
+          aria-label={`${name} ${xLabel}`}
+          className="font-mono"
+          onBlur={commitVector}
+          onChange={(event) =>
+            setDraftValue((current) => ({ ...current, x: event.target.value }))
+          }
+          onKeyDown={handleKeyDown}
+          size="default"
+          value={draftValue.x}
+        />
+        <Input
+          aria-label={`${name} ${yLabel}`}
+          className="font-mono"
+          onBlur={commitVector}
+          onChange={(event) =>
+            setDraftValue((current) => ({ ...current, y: event.target.value }))
+          }
+          onKeyDown={handleKeyDown}
+          size="default"
+          value={draftValue.y}
+        />
+      </div>
+    </Field>
+  );
+}

package/templates/ui/components/controls/vector/vector-value.ts

@@ -0,0 +1,46 @@
+import type { VectorControlValue } from "./vector-control-types";
+
+export function clamp(value: number, min = 0, max = 1): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function getVectorValueLabel(x: string, y: string): string {
+  return `${formatVectorPadCoordinate(x)}, ${formatVectorPadCoordinate(y)}`;
+}
+
+export function normalizeVectorCoordinate(value: string | undefined): string {
+  return typeof value === "string" && value.trim() ? value : "0.00";
+}
+
+export function formatVectorPadCoordinate(value: string | undefined): string {
+  const parsedValue = Number.parseFloat(normalizeVectorCoordinate(value));
+
+  if (!Number.isFinite(parsedValue)) {
+    return "0.00";
+  }
+
+  const roundedValue = Math.abs(parsedValue) < 0.005 ? 0 : clamp(parsedValue, -1, 1);
+
+  return roundedValue.toFixed(2);
+}
+
+export function parseVectorValueDraft(value: string): VectorControlValue | null {
+  const matches = value.match(/[+-]?(?:\d+(?:[.,]\d+)?|[.,]\d+)/g);
+
+  if (!matches || matches.length < 2) {
+    return null;
+  }
+
+  const [rawX, rawY] = matches;
+  const nextX = Number.parseFloat(rawX.replace(",", "."));
+  const nextY = Number.parseFloat(rawY.replace(",", "."));
+
+  if (!Number.isFinite(nextX) || !Number.isFinite(nextY)) {
+    return null;
+  }
+
+  return {
+    x: clamp(nextX, -1, 1).toFixed(2),
+    y: clamp(nextY, -1, 1).toFixed(2),
+  };
+}

package/templates/ui/components/primitives/slider/slider-discrete-state.ts

@@ -0,0 +1,181 @@
+"use client";
+
+import * as React from "react";
+import type { Slider as SliderPrimitive } from "@base-ui/react/slider";
+
+import type { SliderProps, SliderVariant } from "./slider-types";
+import {
+  getSliderValues,
+  normalizeSliderValueShape,
+  snapSliderValue,
+  valuesMatch,
+  type SliderRuntimeValue,
+  type SliderValue,
+} from "./slider-value";
+
+type SliderValueStateOptions<Value extends number | readonly number[]> = {
+  defaultValue?: Value;
+  largeStep?: number;
+  max: number;
+  min: number;
+  onValueChange?: SliderProps<Value>["onValueChange"];
+  onValueCommitted?: SliderProps<Value>["onValueCommitted"];
+  snapValues?: readonly number[];
+  step: number;
+  value?: Value;
+  variant: SliderVariant;
+};
+
+type ControlledDiscreteValueResetOptions<Value extends number | readonly number[]> = {
+  discreteValue: Value | undefined;
+  isDiscrete: boolean;
+  lastInternalDiscreteValueRef: React.RefObject<Value | undefined>;
+  max: number;
+  min: number;
+  setDiscreteValue: React.Dispatch<React.SetStateAction<Value | undefined>>;
+  snapValues?: readonly number[];
+  step: number;
+  value: Value | undefined;
+};
+
+function useControlledDiscreteValueReset<Value extends number | readonly number[]>({
+  discreteValue,
+  isDiscrete,
+  lastInternalDiscreteValueRef,
+  max,
+  min,
+  setDiscreteValue,
+  snapValues,
+  step,
+  value,
+}: ControlledDiscreteValueResetOptions<Value>) {
+  React.useEffect(() => {
+    if (!isDiscrete || value === undefined || discreteValue === undefined) {
+      return;
+    }
+
+    const lastInternalValue = lastInternalDiscreteValueRef.current;
+    if (lastInternalValue !== undefined) {
+      if (valuesMatch(value, lastInternalValue)) {
+        return;
+      }
+
+      const snappedInternalValue = snapSliderValue(lastInternalValue, min, max, step, snapValues);
+      if (valuesMatch(value, snappedInternalValue)) {
+        return;
+      }
+    }
+
+    setDiscreteValue(undefined);
+  }, [
+    discreteValue,
+    isDiscrete,
+    lastInternalDiscreteValueRef,
+    max,
+    min,
+    setDiscreteValue,
+    snapValues,
+    step,
+    value,
+  ]);
+}
+
+export function useSliderValueState<Value extends number | readonly number[]>({
+  defaultValue,
+  largeStep,
+  max,
+  min,
+  onValueChange,
+  onValueCommitted,
+  snapValues,
+  step,
+  value,
+  variant,
+}: SliderValueStateOptions<Value>) {
+  const [discreteValue, setDiscreteValue] = React.useState<Value | undefined>(() =>
+    value === undefined ? defaultValue : undefined,
+  );
+  const lastInternalDiscreteValueRef = React.useRef<Value | undefined>(
+    value === undefined ? defaultValue : undefined,
+  );
+  const lastChangeDetailsRef = React.useRef<SliderPrimitive.Root.ChangeEventDetails | null>(null);
+  const isDiscrete = variant === "discrete";
+  const resolvedValue = isDiscrete ? (discreteValue ?? value ?? defaultValue) : value;
+  const rootStep = isDiscrete ? Math.max((max - min) / 1000, 0.000001) : step;
+  const rootLargeStep = isDiscrete ? (largeStep ?? step) : largeStep;
+  const values = React.useMemo(
+    () => getSliderValues(resolvedValue, defaultValue, min, max),
+    [resolvedValue, defaultValue, min, max],
+  );
+
+  useControlledDiscreteValueReset({
+    discreteValue,
+    isDiscrete,
+    lastInternalDiscreteValueRef,
+    max,
+    min,
+    setDiscreteValue,
+    snapValues,
+    step,
+    value,
+  });
+
+  const handleValueChange = React.useCallback(
+    (nextValue: SliderValue<Value>, eventDetails: SliderPrimitive.Root.ChangeEventDetails) => {
+      lastChangeDetailsRef.current = eventDetails;
+      if (isDiscrete) {
+        const normalizedNextValue = normalizeSliderValueShape(
+          nextValue as SliderRuntimeValue,
+          value,
+          defaultValue,
+          min,
+        );
+        lastInternalDiscreteValueRef.current = normalizedNextValue;
+        setDiscreteValue(normalizedNextValue);
+        onValueChange?.(
+          snapSliderValue(normalizedNextValue, min, max, step, snapValues) as SliderValue<Value>,
+          eventDetails,
+        );
+        return;
+      }
+
+      onValueChange?.(nextValue, eventDetails);
+    },
+    [defaultValue, isDiscrete, max, min, onValueChange, snapValues, step, value],
+  );
+  const handleValueCommitted = React.useCallback(
+    (nextValue: SliderValue<Value>, eventDetails: SliderPrimitive.Root.CommitEventDetails) => {
+      if (!isDiscrete) {
+        onValueCommitted?.(nextValue, eventDetails);
+        return;
+      }
+
+      const normalizedNextValue = normalizeSliderValueShape(
+        nextValue as SliderRuntimeValue,
+        value,
+        defaultValue,
+        min,
+      );
+      const snappedValue = snapSliderValue(normalizedNextValue, min, max, step, snapValues);
+      lastInternalDiscreteValueRef.current = snappedValue;
+      setDiscreteValue(snappedValue);
+
+      if (!valuesMatch(snappedValue, normalizedNextValue) && lastChangeDetailsRef.current) {
+        onValueChange?.(snappedValue as SliderValue<Value>, lastChangeDetailsRef.current);
+      }
+
+      onValueCommitted?.(snappedValue as SliderValue<Value>, eventDetails);
+    },
+    [defaultValue, isDiscrete, max, min, onValueChange, onValueCommitted, snapValues, step, value],
+  );
+
+  return {
+    handleValueChange,
+    handleValueCommitted,
+    isDiscrete,
+    resolvedValue,
+    rootLargeStep,
+    rootStep,
+    values,
+  };
+}