Enhance canvas functionality with new node types and validation

- Added support for new canvas node types: curves, color-adjust, light-adjust, detail-adjust, and render.
- Implemented validation for adjustment nodes to restrict incoming edges to one.
- Updated canvas connection validation to improve user feedback on invalid connections.
- Enhanced node creation and rendering logic to accommodate new node types and their properties.
- Refactored related components and utilities for better maintainability and performance.

src/components/tool-ui/parameter-slider/README.md

@@ -0,0 +1,19 @@
+# Parameter Slider
+
+Implementation for the "parameter-slider" Tool UI surface.
+
+## Files
+
+- public exports: components/tool-ui/parameter-slider/index.tsx
+- serializable schema + parse helpers: components/tool-ui/parameter-slider/schema.ts
+
+## Companion assets
+
+- Docs page: app/docs/parameter-slider/content.mdx
+- Preset payload: lib/presets/parameter-slider.ts
+
+## Quick check
+
+Run this after edits:
+
+pnpm test

src/components/tool-ui/parameter-slider/_adapter.tsx

@@ -0,0 +1,4 @@
+export { cn } from "@/lib/utils";
+export { Button } from "@/components/ui/button";
+export { Separator } from "@/components/ui/separator";
+export { Slider } from "@/components/ui/slider";

src/components/tool-ui/parameter-slider/index.tsx

@@ -0,0 +1,7 @@
+export { ParameterSlider } from "./parameter-slider";
+export type {
+  ParameterSliderProps,
+  SliderConfig,
+  SliderValue,
+  SerializableParameterSlider,
+} from "./schema";

src/components/tool-ui/parameter-slider/math.ts

@@ -0,0 +1,42 @@
+import type { SliderConfig, SliderValue } from "./schema";
+
+type SliderPercentInput = {
+  value: number;
+  min: number;
+  max: number;
+};
+
+function clampPercent(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, Math.min(100, value));
+}
+
+export function sliderRangeToPercent({
+  value,
+  min,
+  max,
+}: SliderPercentInput): number {
+  const range = max - min;
+  if (!Number.isFinite(range) || range <= 0) return 0;
+  return clampPercent(((value - min) / range) * 100);
+}
+
+export function createSliderValueSnapshot(
+  sliders: SliderConfig[],
+): SliderValue[] {
+  return sliders.map((slider) => ({ id: slider.id, value: slider.value }));
+}
+
+export function createSliderSignature(sliders: SliderConfig[]): string {
+  return JSON.stringify(
+    sliders.map(({ id, min, max, step, value, unit, precision }) => ({
+      id,
+      min,
+      max,
+      step: step ?? 1,
+      value,
+      unit: unit ?? "",
+      precision: precision ?? null,
+    })),
+  );
+}

src/components/tool-ui/parameter-slider/parameter-slider.tsx

@@ -0,0 +1,821 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import type { ParameterSliderProps, SliderConfig, SliderValue } from "./schema";
+import { ActionButtons } from "../shared/action-buttons";
+import { normalizeActionsConfig } from "../shared/actions-config";
+import { useControllableState } from "../shared/use-controllable-state";
+import { useSignatureReset } from "../shared/use-signature-reset";
+
+import { cn } from "./_adapter";
+import {
+  createSliderSignature,
+  createSliderValueSnapshot,
+  sliderRangeToPercent,
+} from "./math";
+
+function formatSignedValue(
+  value: number,
+  min: number,
+  max: number,
+  precision?: number,
+  unit?: string,
+): string {
+  const crossesZero = min < 0 && max > 0;
+  const fixed =
+    precision !== undefined ? value.toFixed(precision) : String(value);
+  const numericPart = crossesZero && value >= 0 ? `+${fixed}` : fixed;
+  return unit ? `${numericPart} ${unit}` : numericPart;
+}
+
+function getAriaValueText(
+  value: number,
+  min: number,
+  max: number,
+  unit?: string,
+): string {
+  const crossesZero = min < 0 && max > 0;
+  if (crossesZero) {
+    if (value > 0) {
+      return unit ? `plus ${value} ${unit}` : `plus ${value}`;
+    } else if (value < 0) {
+      return unit
+        ? `minus ${Math.abs(value)} ${unit}`
+        : `minus ${Math.abs(value)}`;
+    }
+  }
+  return unit ? `${value} ${unit}` : String(value);
+}
+
+const TICK_COUNT = 16;
+const TEXT_PADDING_X = 4;
+const TEXT_PADDING_X_OUTER = 0; // Less inset on outer-facing side (near edges)
+const TEXT_PADDING_Y = 2;
+const DETECTION_MARGIN_X = 12;
+const DETECTION_MARGIN_X_OUTER = 4; // Small margin at edges for steep falloff - segments fully close at terminal positions
+const DETECTION_MARGIN_Y = 12;
+const TRACK_HEIGHT = 48;
+const TEXT_RELEASE_INSET = 8;
+const TRACK_EDGE_INSET = 4; // px from track edge - keeps elements visible at extremes
+const THUMB_WIDTH = 12; // w-3
+// Text vertical offset: raised slightly from center
+// Positive = raised, negative = lowered
+const TEXT_VERTICAL_OFFSET = 0.5;
+
+function clampPercent(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(0, Math.min(100, value));
+}
+
+// Convert a percentage (0-100) to an inset position string
+// At 0%: 4px from left edge; at 100%: 4px from right edge
+function toInsetPosition(percent: number): string {
+  const safePercent = clampPercent(percent);
+  return `calc(${TRACK_EDGE_INSET}px + (100% - ${TRACK_EDGE_INSET * 2}px) * ${safePercent / 100})`;
+}
+
+// Radix keeps the thumb in bounds by applying a percent-dependent px offset.
+// Matching this for fill clipping prevents handle/fill drift near extremes.
+function getRadixThumbInBoundsOffsetPx(percent: number): number {
+  const safePercent = clampPercent(percent);
+  const halfWidth = THUMB_WIDTH / 2;
+  return halfWidth - (safePercent * halfWidth) / 50;
+}
+
+function toRadixThumbPosition(percent: number): string {
+  const safePercent = clampPercent(percent);
+  const offsetPx = getRadixThumbInBoundsOffsetPx(safePercent);
+  return `calc(${safePercent}% + ${offsetPx}px)`;
+}
+
+function signedDistanceToRoundedRect(
+  px: number,
+  py: number,
+  left: number,
+  right: number,
+  top: number,
+  bottom: number,
+  radiusLeft: number,
+  radiusRight: number,
+): number {
+  const innerLeft = left + radiusLeft;
+  const innerRight = right - radiusRight;
+  const innerTop = top + Math.max(radiusLeft, radiusRight);
+  const innerBottom = bottom - Math.max(radiusLeft, radiusRight);
+
+  const inLeftCorner = px < innerLeft;
+  const inRightCorner = px > innerRight;
+  const inCornerY = py < innerTop || py > innerBottom;
+
+  if ((inLeftCorner || inRightCorner) && inCornerY) {
+    const radius = inLeftCorner ? radiusLeft : radiusRight;
+    const cornerX = inLeftCorner ? innerLeft : innerRight;
+    const cornerY = py < innerTop ? top + radius : bottom - radius;
+    const distToCornerCenter = Math.hypot(px - cornerX, py - cornerY);
+    return distToCornerCenter - radius;
+  }
+
+  const dx = Math.max(left - px, px - right, 0);
+  const dy = Math.max(top - py, py - bottom, 0);
+
+  if (dx === 0 && dy === 0) {
+    return -Math.min(px - left, right - px, py - top, bottom - py);
+  }
+
+  return Math.max(dx, dy);
+}
+
+const OUTER_EDGE_RADIUS_FACTOR = 0.3; // Reduced radius on outer-facing sides for steeper falloff
+
+function calculateGap(
+  thumbCenterX: number,
+  textRect: { left: number; right: number; height: number; centerY: number },
+  isLeftAligned: boolean,
+): number {
+  const { left, right, height, centerY } = textRect;
+  // Asymmetric padding/margin: outer-facing side has less padding, more margin
+  const paddingLeft = isLeftAligned ? TEXT_PADDING_X_OUTER : TEXT_PADDING_X;
+  const paddingRight = isLeftAligned ? TEXT_PADDING_X : TEXT_PADDING_X_OUTER;
+  const marginLeft = isLeftAligned
+    ? DETECTION_MARGIN_X_OUTER
+    : DETECTION_MARGIN_X;
+  const marginRight = isLeftAligned
+    ? DETECTION_MARGIN_X
+    : DETECTION_MARGIN_X_OUTER;
+  const paddingY = TEXT_PADDING_Y;
+  const marginY = DETECTION_MARGIN_Y;
+  const thumbCenterY = centerY;
+
+  // Inner boundary (where max gap occurs)
+  const innerLeft = left - paddingLeft;
+  const innerRight = right + paddingRight;
+  const innerTop = centerY - height / 2 - paddingY;
+  const innerBottom = centerY + height / 2 + paddingY;
+  const innerHeight = height + paddingY * 2;
+  const innerRadius = innerHeight / 2;
+  // Smaller radius on outer-facing side (left for label, right for value)
+  const innerRadiusLeft = isLeftAligned
+    ? innerRadius * OUTER_EDGE_RADIUS_FACTOR
+    : innerRadius;
+  const innerRadiusRight = isLeftAligned
+    ? innerRadius
+    : innerRadius * OUTER_EDGE_RADIUS_FACTOR;
+
+  // Outer boundary (where effect starts) - proportionally larger
+  const outerLeft = left - paddingLeft - marginLeft;
+  const outerRight = right + paddingRight + marginRight;
+  const outerTop = centerY - height / 2 - paddingY - marginY;
+  const outerBottom = centerY + height / 2 + paddingY + marginY;
+  const outerHeight = height + paddingY * 2 + marginY * 2;
+  const outerRadius = outerHeight / 2;
+  const outerRadiusLeft = isLeftAligned
+    ? outerRadius * OUTER_EDGE_RADIUS_FACTOR
+    : outerRadius;
+  const outerRadiusRight = isLeftAligned
+    ? outerRadius
+    : outerRadius * OUTER_EDGE_RADIUS_FACTOR;
+
+  const outerDist = signedDistanceToRoundedRect(
+    thumbCenterX,
+    thumbCenterY,
+    outerLeft,
+    outerRight,
+    outerTop,
+    outerBottom,
+    outerRadiusLeft,
+    outerRadiusRight,
+  );
+
+  // Outside outer boundary - no gap
+  if (outerDist > 0) return 0;
+
+  const innerDist = signedDistanceToRoundedRect(
+    thumbCenterX,
+    thumbCenterY,
+    innerLeft,
+    innerRight,
+    innerTop,
+    innerBottom,
+    innerRadiusLeft,
+    innerRadiusRight,
+  );
+
+  // Inside inner boundary - max gap
+  const maxGap = height + paddingY * 2;
+  if (innerDist <= 0) return maxGap;
+
+  // Between boundaries - linear interpolation
+  // outerDist is negative (inside outer), innerDist is positive (outside inner)
+  const totalDist = Math.abs(outerDist) + innerDist;
+  const t = Math.abs(outerDist) / totalDist;
+
+  return maxGap * t;
+}
+
+interface SliderRowProps {
+  config: SliderConfig;
+  value: number;
+  onChange: (value: number) => void;
+  trackClassName?: string;
+  fillClassName?: string;
+  handleClassName?: string;
+}
+
+function SliderRow({
+  config,
+  value,
+  onChange,
+  trackClassName,
+  fillClassName,
+  handleClassName,
+}: SliderRowProps) {
+  const { id, label, min, max, step = 1, unit, precision, disabled } = config;
+  // Per-slider theming overrides component-level theming
+  const resolvedTrackClassName = config.trackClassName ?? trackClassName;
+  const resolvedFillClassName = config.fillClassName ?? fillClassName;
+  const resolvedHandleClassName = config.handleClassName ?? handleClassName;
+  const crossesZero = min < 0 && max > 0;
+  const [isDragging, setIsDragging] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const trackRef = useRef<HTMLSpanElement>(null);
+  const labelRef = useRef<HTMLSpanElement>(null);
+  const valueRef = useRef<HTMLSpanElement>(null);
+
+  const [dragGap, setDragGap] = useState(0);
+  const [fullGap, setFullGap] = useState(0);
+  const [intersectsText, setIntersectsText] = useState(false);
+  const [layoutVersion, setLayoutVersion] = useState(0);
+
+  useEffect(() => {
+    if (!isDragging) return;
+    const handlePointerUp = () => setIsDragging(false);
+    document.addEventListener("pointerup", handlePointerUp);
+    return () => document.removeEventListener("pointerup", handlePointerUp);
+  }, [isDragging]);
+
+  useEffect(() => {
+    const track = trackRef.current;
+    const labelEl = labelRef.current;
+    const valueEl = valueRef.current;
+    if (!track || !labelEl || !valueEl) return;
+
+    const bumpLayoutVersion = () => setLayoutVersion((v) => v + 1);
+
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(() => {
+        bumpLayoutVersion();
+      });
+      observer.observe(track);
+      observer.observe(labelEl);
+      observer.observe(valueEl);
+      return () => observer.disconnect();
+    }
+
+    window.addEventListener("resize", bumpLayoutVersion);
+    return () => window.removeEventListener("resize", bumpLayoutVersion);
+  }, []);
+
+  useLayoutEffect(() => {
+    const track = trackRef.current;
+    const labelEl = labelRef.current;
+    const valueEl = valueRef.current;
+
+    if (!track || !labelEl || !valueEl) return;
+
+    const trackRect = track.getBoundingClientRect();
+    const labelRect = labelEl.getBoundingClientRect();
+    const valueRect = valueEl.getBoundingClientRect();
+
+    const trackWidth = trackRect.width;
+    const valuePercent = sliderRangeToPercent({ value, min, max });
+    // Use same inset coordinate system as visual elements
+    const thumbCenterPx =
+      (trackWidth * clampPercent(valuePercent)) / 100 +
+      getRadixThumbInBoundsOffsetPx(valuePercent);
+    const thumbHalfWidth = THUMB_WIDTH / 2;
+
+    // Text is raised by TEXT_VERTICAL_OFFSET from center
+    const trackCenterY = TRACK_HEIGHT / 2 - TEXT_VERTICAL_OFFSET;
+
+    const labelGap = calculateGap(
+      thumbCenterPx,
+      {
+        left: labelRect.left - trackRect.left,
+        right: labelRect.right - trackRect.left,
+        height: labelRect.height,
+        centerY: trackCenterY,
+      },
+      true,
+    ); // label is left-aligned
+
+    const valueGap = calculateGap(
+      thumbCenterPx,
+      {
+        left: valueRect.left - trackRect.left,
+        right: valueRect.right - trackRect.left,
+        height: valueRect.height,
+        centerY: trackCenterY,
+      },
+      false,
+    ); // value is right-aligned
+
+    setDragGap(Math.max(labelGap, valueGap));
+
+    // Tight intersection check for release state
+    // Inset by px-2 (8px) padding to check against actual text, not padded container
+    const labelLeft = labelRect.left - trackRect.left + TEXT_RELEASE_INSET;
+    const labelRight = labelRect.right - trackRect.left - TEXT_RELEASE_INSET;
+    const valueLeft = valueRect.left - trackRect.left + TEXT_RELEASE_INSET;
+    const valueRight = valueRect.right - trackRect.left - TEXT_RELEASE_INSET;
+
+    const thumbLeft = thumbCenterPx - thumbHalfWidth;
+    const thumbRight = thumbCenterPx + thumbHalfWidth;
+
+    const hitsLabel = thumbRight > labelLeft && thumbLeft < labelRight;
+    const hitsValue = thumbRight > valueLeft && thumbLeft < valueRight;
+
+    setIntersectsText(hitsLabel || hitsValue);
+
+    // Calculate full separation gap for release state
+    // Use the max gap of whichever text element(s) the handle intersects
+    const labelFullGap = labelRect.height + TEXT_PADDING_Y * 2;
+    const valueFullGap = valueRect.height + TEXT_PADDING_Y * 2;
+    const releaseGap =
+      hitsLabel && hitsValue
+        ? Math.max(labelFullGap, valueFullGap)
+        : hitsLabel
+          ? labelFullGap
+          : hitsValue
+            ? valueFullGap
+            : 0;
+    setFullGap(releaseGap);
+  }, [value, min, max, layoutVersion]);
+
+  // While dragging: use distance-based separation, but never collapse below
+  // the release split when the thumb still intersects text.
+  const gap = isDragging
+    ? Math.max(dragGap, intersectsText ? fullGap : 0)
+    : intersectsText
+      ? fullGap
+      : 0;
+
+  const ticks = useMemo(() => {
+    // Generate equidistant ticks regardless of step value
+    const majorTickCount = TICK_COUNT;
+    const result: { percent: number; isCenter: boolean; isSubtick: boolean }[] =
+      [];
+
+    for (let i = 0; i <= majorTickCount; i++) {
+      const percent = (i / majorTickCount) * 100;
+      const isCenter = !crossesZero && percent === 50;
+
+      // Skip the center tick (50%) for crossesZero sliders
+      if (crossesZero && percent === 50) continue;
+
+      // Add subtick at midpoint before this tick (except for first)
+      if (i > 0) {
+        const prevPercent = ((i - 1) / majorTickCount) * 100;
+        // Don't add subtick if it would be at 50% for crossesZero
+        const midPercent = (prevPercent + percent) / 2;
+        if (!(crossesZero && midPercent === 50)) {
+          result.push({
+            percent: midPercent,
+            isCenter: false,
+            isSubtick: true,
+          });
+        }
+      }
+
+      result.push({ percent, isCenter, isSubtick: false });
+    }
+
+    return result;
+  }, [crossesZero]);
+
+  const zeroPercent = crossesZero
+    ? sliderRangeToPercent({ value: 0, min, max })
+    : 0;
+  const valuePercent = sliderRangeToPercent({ value, min, max });
+
+  // Fill clip-path uses the same inset coordinate system as the handle.
+  // This keeps the collapsed stroke aligned with the fill edge near extremes.
+  const fillClipPath = useMemo(() => {
+    const toClipFromRightInset = (percent: number) =>
+      `calc(100% - ${toRadixThumbPosition(percent)})`;
+    const toClipFromLeftInset = (percent: number) =>
+      toRadixThumbPosition(percent);
+    const TERMINAL_EPSILON = 1e-6;
+    const snapLeftInset = (percent: number) => {
+      if (percent <= TERMINAL_EPSILON) return "0";
+      if (percent >= 100 - TERMINAL_EPSILON) return "100%";
+      return toClipFromLeftInset(percent);
+    };
+    const snapRightInset = (percent: number) => {
+      if (percent <= TERMINAL_EPSILON) return "100%";
+      if (percent >= 100 - TERMINAL_EPSILON) return "0";
+      return toClipFromRightInset(percent);
+    };
+
+    if (crossesZero) {
+      // Keep center anchor stable by always clipping the low/high pair,
+      // independent of sign branch, then snapping at terminal edges.
+      const lowPercent = Math.min(valuePercent, zeroPercent);
+      const highPercent = Math.max(valuePercent, zeroPercent);
+      return `inset(0 ${snapRightInset(highPercent)} 0 ${snapLeftInset(lowPercent)})`;
+    }
+    // Non-crossing: fill starts at left edge; snap right inset at terminals.
+    return `inset(0 ${snapRightInset(valuePercent)} 0 0)`;
+  }, [crossesZero, zeroPercent, valuePercent]);
+
+  const fillMaskImage = crossesZero
+    ? "linear-gradient(to right, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.7) 100%)"
+    : "linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%)";
+
+  // Metallic reflection gradient that follows the handle position
+  // Visible while dragging OR when resting at edges (0%/100%)
+  const reflectionStyle = useMemo(() => {
+    const edgeThreshold = 3;
+    const nearEdge =
+      valuePercent <= edgeThreshold || valuePercent >= 100 - edgeThreshold;
+
+    // Narrower spread when stationary at edges (~35% narrower)
+    const spreadPercent = nearEdge && !isDragging ? 6.5 : 10;
+    const handlePos = toRadixThumbPosition(valuePercent);
+    const start = `clamp(0%, calc(${handlePos} - ${spreadPercent}%), 100%)`;
+    const end = `clamp(0%, calc(${handlePos} + ${spreadPercent}%), 100%)`;
+
+    const gradient = `linear-gradient(to right,
+      transparent ${start},
+      white ${handlePos},
+      transparent ${end})`;
+
+    return {
+      background: gradient,
+      WebkitMask:
+        "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+      WebkitMaskComposite: "xor",
+      maskComposite: "exclude",
+      padding: "1px",
+    };
+  }, [valuePercent, isDragging]);
+
+  // Opacity scales with handle size: rest → hover → drag
+  const reflectionOpacity = useMemo(() => {
+    const edgeThreshold = 3;
+    const atEdge =
+      valuePercent <= edgeThreshold || valuePercent >= 100 - edgeThreshold;
+
+    if (isDragging || atEdge) {
+      return 1;
+    }
+    if (isHovered) {
+      return 0.6;
+    }
+    return 0;
+  }, [valuePercent, isDragging, isHovered]);
+
+  const handleValueChange = useCallback(
+    (values: number[]) => {
+      if (values[0] !== undefined) {
+        onChange(values[0]);
+      }
+    },
+    [onChange],
+  );
+
+  return (
+    <div className="py-2">
+      <SliderPrimitive.Root
+        id={id}
+        className={cn(
+          "group/slider relative flex w-full touch-none items-center select-none",
+          "isolate h-12",
+          isDragging
+            ? "[&>span]:transition-[left,transform] [&>span]:duration-45 [&>span]:ease-linear"
+            : "[&>span]:transition-[left,transform] [&>span]:duration-90 [&>span]:ease-[cubic-bezier(0.22,1,0.36,1)]",
+          "[&>span]:will-change-[left,transform]",
+          "motion-reduce:[&>span]:transition-none",
+          disabled && "pointer-events-none opacity-50",
+        )}
+        value={[value]}
+        onValueChange={handleValueChange}
+        onPointerDown={() => setIsDragging(true)}
+        onPointerUp={() => setIsDragging(false)}
+        onPointerEnter={() => setIsHovered(true)}
+        onPointerLeave={() => setIsHovered(false)}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        aria-valuetext={getAriaValueText(value, min, max, unit)}
+      >
+        <SliderPrimitive.Track
+          ref={trackRef}
+          className={cn(
+            "squircle relative h-12 w-full grow overflow-hidden rounded-sm",
+            "ring-border ring-1 ring-inset",
+            "dark:ring-white/10",
+            resolvedTrackClassName ?? "bg-muted",
+          )}
+        >
+          <div
+            className={cn(
+              "absolute inset-0 will-change-[clip-path]",
+              isDragging
+                ? "transition-[clip-path] duration-45 ease-linear"
+                : "transition-[clip-path] duration-90 ease-[cubic-bezier(0.22,1,0.36,1)]",
+              "motion-reduce:transition-none",
+              resolvedFillClassName ?? "bg-primary/30 dark:bg-primary/40",
+            )}
+            style={{
+              maskImage: fillMaskImage,
+              WebkitMaskImage: fillMaskImage,
+              clipPath: fillClipPath,
+            }}
+          />
+
+          {ticks.map((tick, i) => {
+            const isEdge =
+              !tick.isSubtick && (tick.percent === 0 || tick.percent === 100);
+            return (
+              <span
+                key={i}
+                className={cn(
+                  "pointer-events-none absolute bottom-px w-px",
+                  tick.isSubtick ? "h-1.5" : "h-2",
+                  isEdge
+                    ? "bg-transparent"
+                    : tick.isSubtick
+                      ? "bg-foreground/8 dark:bg-white/5"
+                      : tick.isCenter
+                        ? "bg-foreground/30 dark:bg-white/25"
+                        : "bg-foreground/15 dark:bg-white/8",
+                )}
+                style={{
+                  left: toInsetPosition(tick.percent),
+                  transform: "translateX(-50%)",
+                }}
+              />
+            );
+          })}
+        </SliderPrimitive.Track>
+
+        {/* Metallic reflection overlay - follows handle, brightness scales with interaction */}
+        <div
+          className={cn(
+            "squircle pointer-events-none absolute inset-0 rounded-sm",
+            isDragging
+              ? "transition-[opacity,background] duration-45 ease-linear"
+              : "transition-[opacity,background] duration-90 ease-[cubic-bezier(0.22,1,0.36,1)]",
+            "motion-reduce:transition-none",
+          )}
+          style={{
+            ...reflectionStyle,
+            opacity: reflectionOpacity,
+            filter: "blur(1px)",
+            mixBlendMode: "overlay",
+          }}
+        />
+
+        <SliderPrimitive.Thumb
+          className={cn(
+            "group/thumb z-0 block w-3 shrink-0 cursor-grab rounded-sm",
+            "relative bg-transparent outline-none",
+            "transition-[height,opacity] duration-150 ease-[var(--cubic-ease-in-out)]",
+            "focus-visible:outline-ring focus-visible:outline-2 focus-visible:outline-offset-1",
+            "active:cursor-grabbing",
+            "disabled:pointer-events-none disabled:opacity-50",
+            // Height morphs: rest (track height) → hover → active
+            isDragging ? "h-[56px]" : isHovered ? "h-[54px]" : "h-12",
+          )}
+        >
+          {(() => {
+            // Calculate morph state
+            const isActive = isHovered || isDragging;
+
+            // Indicator stays centered on the real thumb while CSS transitions
+            // smooth thumb wrapper and fill movement together.
+            const fillEdgeOffset = 0;
+
+            // Hide rest-state indicator at edges (0% or 100%) - the reflection gradient handles this
+            const edgeThreshold = 3;
+            const atEdge =
+              valuePercent <= edgeThreshold ||
+              valuePercent >= 100 - edgeThreshold;
+            const restOpacity = atEdge ? 0 : 0.25;
+
+            // Asymmetric segment heights: gap is shifted up to match raised text position
+            // Top segment is shorter, bottom segment is taller
+            const topHeight =
+              isActive && gap > 0
+                ? `calc(50% - ${gap / 2 + TEXT_VERTICAL_OFFSET}px)`
+                : "50%";
+            const bottomHeight =
+              isActive && gap > 0
+                ? `calc(50% - ${gap / 2 - TEXT_VERTICAL_OFFSET}px)`
+                : "50%";
+
+            return (
+              <>
+                <span
+                  className={cn(
+                    "absolute top-0 left-1/2",
+                    "transition-all duration-100 ease-[var(--cubic-ease-in-out)]",
+                    isActive
+                      ? gap > 0
+                        ? "rounded-full"
+                        : "rounded-t-full"
+                      : "rounded-t-sm",
+                    isDragging ? "w-2" : isActive ? "w-1.5" : "w-px",
+                    resolvedHandleClassName ?? "bg-primary",
+                  )}
+                  style={{
+                    transform: `translateX(calc(-50% + ${fillEdgeOffset}px))`,
+                    height: topHeight,
+                    opacity: isActive ? 1 : restOpacity,
+                  }}
+                />
+                <span
+                  className={cn(
+                    "absolute bottom-0 left-1/2",
+                    "transition-all duration-100 ease-[var(--cubic-ease-in-out)]",
+                    isActive
+                      ? gap > 0
+                        ? "rounded-full"
+                        : "rounded-b-full"
+                      : "rounded-b-sm",
+                    isDragging ? "w-2" : isActive ? "w-1.5" : "w-px",
+                    resolvedHandleClassName ?? "bg-primary",
+                  )}
+                  style={{
+                    transform: `translateX(calc(-50% + ${fillEdgeOffset}px))`,
+                    height: bottomHeight,
+                    opacity: isActive ? 1 : restOpacity,
+                  }}
+                />
+              </>
+            );
+          })()}
+        </SliderPrimitive.Thumb>
+
+        <div
+          className="pointer-events-none absolute inset-x-3 top-1/2 z-10 flex items-center justify-between"
+          style={{
+            transform: `translateY(calc(-50% - ${TEXT_VERTICAL_OFFSET}px))`,
+          }}
+        >
+          <span
+            ref={labelRef}
+            className="text-primary -mt-px rounded-full px-2 py-px text-sm font-normal tracking-wide"
+          >
+            {label}
+          </span>
+          <span
+            ref={valueRef}
+            className="text-foreground -mt-px -mb-0.5 flex h-6 items-center rounded-full px-2 font-mono text-xs tabular-nums"
+          >
+            {formatSignedValue(value, min, max, precision, unit)}
+          </span>
+        </div>
+      </SliderPrimitive.Root>
+    </div>
+  );
+}
+
+export function ParameterSlider({
+  id,
+  sliders,
+  values: controlledValues,
+  onChange,
+  actions,
+  onAction,
+  onBeforeAction,
+  className,
+  trackClassName,
+  fillClassName,
+  handleClassName,
+}: ParameterSliderProps) {
+  const slidersSignature = useMemo(
+    () => createSliderSignature(sliders),
+    [sliders],
+  );
+  const sliderSnapshot = useMemo(
+    () => createSliderValueSnapshot(sliders),
+    [sliders],
+  );
+  const {
+    value: currentValues,
+    isControlled,
+    setValue,
+    setUncontrolledValue,
+  } = useControllableState<SliderValue[]>({
+    value: controlledValues,
+    defaultValue: sliderSnapshot,
+    onChange,
+  });
+
+  useSignatureReset(slidersSignature, () => {
+    if (!isControlled) {
+      setUncontrolledValue(sliderSnapshot);
+    }
+  });
+
+  const valueMap = useMemo(() => {
+    const map = new Map<string, number>();
+    for (const v of currentValues) {
+      map.set(v.id, v.value);
+    }
+    return map;
+  }, [currentValues]);
+
+  const updateValue = useCallback(
+    (sliderId: string, newValue: number) => {
+      setValue((prev) =>
+        prev.map((v) => (v.id === sliderId ? { ...v, value: newValue } : v)),
+      );
+    },
+    [setValue],
+  );
+
+  const handleReset = useCallback(() => {
+    setValue(sliderSnapshot);
+  }, [setValue, sliderSnapshot]);
+
+  const handleAction = useCallback(
+    async (actionId: string) => {
+      let nextValues = currentValues;
+      if (actionId === "reset") {
+        handleReset();
+        nextValues = sliderSnapshot;
+      }
+
+      await onAction?.(actionId, nextValues);
+    },
+    [currentValues, handleReset, onAction, sliderSnapshot],
+  );
+
+  const normalizedActions = useMemo(() => {
+    const normalized = normalizeActionsConfig(actions);
+    if (normalized) return normalized;
+    return {
+      items: [
+        { id: "reset", label: "Reset", variant: "ghost" as const },
+        { id: "apply", label: "Apply", variant: "default" as const },
+      ],
+      align: "right" as const,
+    };
+  }, [actions]);
+
+  return (
+    <article
+      className={cn(
+        "@container/parameter-slider isolate flex w-full max-w-md min-w-80 flex-col gap-3",
+        "text-foreground",
+        className,
+      )}
+      data-slot="parameter-slider"
+      data-tool-ui-id={id}
+    >
+      <div
+        className={cn(
+          "bg-card flex w-full flex-col overflow-hidden rounded-2xl border px-5 py-3 shadow-xs",
+        )}
+      >
+        {sliders.map((slider) => (
+          <SliderRow
+            key={slider.id}
+            config={slider}
+            value={valueMap.get(slider.id) ?? slider.value}
+            onChange={(v) => updateValue(slider.id, v)}
+            trackClassName={trackClassName}
+            fillClassName={fillClassName}
+            handleClassName={handleClassName}
+          />
+        ))}
+      </div>
+
+      <div className="@container/actions">
+        <ActionButtons
+          actions={normalizedActions.items}
+          align={normalizedActions.align}
+          confirmTimeout={normalizedActions.confirmTimeout}
+          onAction={handleAction}
+          onBeforeAction={
+            onBeforeAction
+              ? (actionId) => onBeforeAction(actionId, currentValues)
+              : undefined
+          }
+        />
+      </div>
+    </article>
+  );
+}

src/components/tool-ui/parameter-slider/schema.ts

@@ -0,0 +1,114 @@
+import { z } from "zod";
+import { type ActionsProp } from "../shared/actions-config";
+import type { EmbeddedActionsProps } from "../shared/embedded-actions";
+import { defineToolUiContract } from "../shared/contract";
+import {
+  SerializableActionSchema,
+  SerializableActionsConfigSchema,
+  ToolUIIdSchema,
+  ToolUIRoleSchema,
+} from "../shared/schema";
+
+export const SliderConfigSchema = z
+  .object({
+    id: z.string().min(1),
+    label: z.string().min(1),
+    min: z.number().finite(),
+    max: z.number().finite(),
+    step: z.number().finite().positive().optional(),
+    value: z.number().finite(),
+    unit: z.string().optional(),
+    precision: z.number().int().min(0).optional(),
+    disabled: z.boolean().optional(),
+    trackClassName: z.string().optional(),
+    fillClassName: z.string().optional(),
+    handleClassName: z.string().optional(),
+  })
+  .superRefine((slider, ctx) => {
+    if (slider.max <= slider.min) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["max"],
+        message: "max must be greater than min",
+      });
+    }
+
+    if (slider.value < slider.min || slider.value > slider.max) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        path: ["value"],
+        message: "value must be between min and max",
+      });
+    }
+  });
+
+export type SliderConfig = z.infer<typeof SliderConfigSchema>;
+
+export const SerializableParameterSliderSchema = z
+  .object({
+    id: ToolUIIdSchema,
+    role: ToolUIRoleSchema.optional(),
+    sliders: z.array(SliderConfigSchema).min(1),
+    actions: z
+      .union([
+        z.array(SerializableActionSchema),
+        SerializableActionsConfigSchema,
+      ])
+      .optional(),
+  })
+  .strict()
+  .superRefine((payload, ctx) => {
+    const seenIds = new Map<string, number>();
+
+    payload.sliders.forEach((slider, index) => {
+      const firstSeenAt = seenIds.get(slider.id);
+      if (firstSeenAt !== undefined) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          path: ["sliders", index, "id"],
+          message: `duplicate slider id '${slider.id}' (first seen at index ${firstSeenAt})`,
+        });
+        return;
+      }
+      seenIds.set(slider.id, index);
+    });
+  });
+
+export type SerializableParameterSlider = z.infer<
+  typeof SerializableParameterSliderSchema
+>;
+
+const SerializableParameterSliderSchemaContract = defineToolUiContract(
+  "ParameterSlider",
+  SerializableParameterSliderSchema,
+);
+
+export const parseSerializableParameterSlider: (
+  input: unknown,
+) => SerializableParameterSlider =
+  SerializableParameterSliderSchemaContract.parse;
+
+export const safeParseSerializableParameterSlider: (
+  input: unknown,
+) => SerializableParameterSlider | null =
+  SerializableParameterSliderSchemaContract.safeParse;
+
+export interface SliderValue {
+  id: string;
+  value: number;
+}
+
+export interface ParameterSliderProps extends Omit<
+  SerializableParameterSlider,
+  "actions"
+> {
+  className?: string;
+  values?: SliderValue[];
+  onChange?: (values: SliderValue[]) => void;
+  actions?: ActionsProp;
+  onAction?: EmbeddedActionsProps<SliderValue[]>["onAction"];
+  onBeforeAction?: EmbeddedActionsProps<SliderValue[]>["onBeforeAction"];
+  trackClassName?: string;
+  fillClassName?: string;
+  handleClassName?: string;
+}