@vuer-ai/vuer-uikit 0.0.120 → 0.1.0

package/src/dial/wrapped-inputs/DialTupleInput.tsx

@@ -0,0 +1,102 @@
+import React, { useCallback, useMemo } from "react";
+
+import { FormLayout, Label, type LayoutType } from "../../index";
+import { DialPanel } from "../DialPanel";
+import { DialProvider, useDialSchema } from "../DialProvider";
+import { IconRenderer } from "../IconRenderer";
+import { LabelPositionT } from "../types";
+
+interface DialTupleInputProps {
+  name: string;
+  label?: string;
+  labelPosition?: LabelPositionT;
+  icon?: string;
+}
+
+/**
+ * General tuple input component that handles mixed-type tuples
+ * Similar to interface/object but displays elements in a more compact layout
+ * Used for tuples containing strings, objects, or other complex types
+ */
+export const DialTupleInput: React.FC<DialTupleInputProps> = ({
+  name,
+  label,
+  labelPosition = "top",
+  icon,
+}) => {
+  const { getValue, setValue, schemas } = useDialSchema();
+
+  const values = useMemo(() => getValue(name) || [], [getValue, name]);
+
+  const handleElementChange = useCallback(
+    (elementName: string, value: unknown) => {
+      const newValues = Array.isArray(values) ? [...values] : [];
+
+      // Extract index from element name (e.g., "[0]" -> 0 or "x" -> find by name)
+      const schema = schemas.find((s) => s.name === name);
+      if (!schema || !schema.typeDefinition?.schemas) {
+        return;
+      }
+
+      const elementIndex = schema.typeDefinition.schemas.findIndex((s) => s.name === elementName);
+
+      if (elementIndex >= 0) {
+        newValues[elementIndex] = value;
+        setValue(name, newValues);
+      }
+    },
+    [name, setValue, values, schemas],
+  );
+
+  const schema = schemas.find((s) => s.name === name);
+
+  if (!schema || !schema.typeDefinition?.schemas) {
+    return null;
+  }
+
+  // Convert tuple array to object format for DialProvider
+  const valuesObject: Record<string, unknown> = {};
+  schema.typeDefinition.schemas.forEach((elemSchema, index) => {
+    valuesObject[elemSchema.name] = Array.isArray(values) ? values[index] : undefined;
+  });
+
+  const tupleContent = (
+    <div className="border-surface-secondary flex flex-col gap-2 rounded-md border p-2">
+      <DialProvider
+        schemas={schema.typeDefinition.schemas}
+        values={valuesObject}
+        onValueChange={handleElementChange}
+      >
+        <DialPanel
+          schemas={schema.typeDefinition.schemas}
+          groups={schema.typeDefinition.groups}
+          labelLayout={schema.labelPosition as LabelPositionT}
+        />
+      </DialProvider>
+    </div>
+  );
+
+  if (!label) {
+    return tupleContent;
+  }
+
+  return (
+    <FormLayout orientation={`label-${labelPosition}` as LayoutType}>
+      <Label size="sm" className="flex items-center gap-1 pl-1.5">
+        <IconRenderer iconName={icon} size={14} className="text-text-secondary" />
+        {label}
+      </Label>
+      <div className="flex flex-col gap-2 pl-1.5">
+        {schema.helpText && (
+          <span
+            className="text-text-secondary cursor-help text-xs"
+            title={schema.helpText as string}
+          >
+            ⓘ {schema.helpText}
+          </span>
+        )}
+        {tupleContent}
+      </div>
+    </FormLayout>
+  );
+};

package/src/dial/wrapped-inputs/DialVectorInput.tsx

@@ -65,34 +65,24 @@ export const DialVectorInput: React.FC<DialVectorInputProps> = ({
   const steps = schema.steps || [];
   const mins = schema.mins || [];
   const maxs = schema.maxs || [];
-  const tags = schema.tags || {};
+  const defaults = Array.isArray(schema.value) ? schema.value : [];
 
   // Ensure value is an array with correct dimensions
   const vectorValue = Array.isArray(value)
-    ? value.concat(Array(Math.max(0, dimensions - value.length)).fill(0))
-    : Array(dimensions).fill(0);
+    ? value.concat(
+        Array.from({ length: Math.max(0, dimensions - value.length) }, (_, i) =>
+          defaults[value.length + i] !== undefined ? defaults[value.length + i] : 0,
+        ),
+      )
+    : Array.from({ length: dimensions }, (_, i) => (defaults[i] !== undefined ? defaults[i] : 0));
 
   // Check if we have mixed types (contains boolean)
   const hasMixedTypes = dtypes.some((dtype) => dtype === "boolean");
 
   // Determine layout from tags
-  let gridAutoFlow: "column" | "row";
-  let gridColumns: number | undefined;
-  let gridRows: number | undefined;
-
-  if (typeof tags.col === "number") {
-    gridAutoFlow = "column";
-    gridRows = tags.col;
-    gridColumns = undefined;
-  } else if (typeof tags.row === "number") {
-    gridAutoFlow = "row";
-    gridColumns = tags.row;
-    gridRows = undefined;
-  } else {
-    gridAutoFlow = "row";
-    gridColumns = undefined;
-    gridRows = undefined;
-  }
+  const gridAutoFlow = schema.vectorFlow === "row" ? "row" : "column";
+  const gridColumns = typeof schema.vectorCols === "number" ? schema.vectorCols : undefined;
+  const gridRows = typeof schema.vectorRows === "number" ? schema.vectorRows : undefined;
 
   if (hasMixedTypes) {
     // Separate number and boolean indices and values
@@ -237,7 +227,7 @@ export const DialVectorInput: React.FC<DialVectorInputProps> = ({
 
   return (
     <FormLayout orientation={`label-${labelPosition}` as LayoutType}>
-      <Label size="sm" className="flex items-center gap-1">
+      <Label size="sm" className="flex items-center gap-1 pl-1.5">
         <IconRenderer iconName={icon} size={14} className="text-text-secondary" />
         {label}
       </Label>

package/src/dial/wrapped-inputs/index.ts

@@ -30,3 +30,9 @@ export { DialPresetsInput } from "./DialPresetsInput";
 
 // Variable-dimension vector input
 export { DialVectorInput } from "./DialVectorInput";
+
+// General tuple input for mixed types
+export { DialTupleInput } from "./DialTupleInput";
+
+// Array input for primitive types
+export { DialArrayInput } from "./DialArrayInput";

package/src/highlight-cursor/cursor-provider.tsx

@@ -5,247 +5,395 @@ import { CursorContext } from "./cursor-context";
 import type { CursorProviderProps } from "./types";
 import { cn } from "../hooks/cn";
 
+// Spring physics configuration
+const SPRING_CONFIG = {
+  stiffness: 0.15, // How snappy (higher = faster)
+  damping: 0.75, // How bouncy (lower = more bounce, 1 = no bounce)
+  mass: 1,
+};
+
+// Squish configuration
+const SQUISH_CONFIG = {
+  maxSquish: 0.15, // Maximum squish amount (0.15 = 15% squish)
+  velocityScale: 0.008, // How much velocity affects squish
+  recovery: 0.15, // How fast squish recovers
+};
+
+interface SpringState {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  velocityX: number;
+  velocityY: number;
+  velocityW: number;
+  velocityH: number;
+  scaleX: number;
+  scaleY: number;
+}
+
 export const CursorProvider = ({
   children,
   maxOffsetX = 5,
   maxOffsetY = 20,
   cursorSize = 20,
-  transitionDuration = 100,
+  boundaryThreshold = 4,
+  outerThreshold = 8,
   cursorClassName,
   className,
   as: Component = "div",
   ...props
 }: CursorProviderProps) => {
-  // Check if we're in a browser environment
   const [isClient, setIsClient] = useState(false);
   const [isMouseInside, setIsMouseInside] = useState(false);
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
-  const [hoveredElementId, setHoveredElementId] = useState<string | null>(null);
-  const [elementDimensions, setElementDimensions] = useState({
-    width: 0,
-    height: 0,
+
+  // Refs for high-frequency updates
+  const cursorRef = useRef<HTMLDivElement>(null);
+  const cursorInnerRef = useRef<HTMLDivElement>(null);
+  const mousePositionRef = useRef({ x: 0, y: 0 });
+  const prevMousePositionRef = useRef({ x: 0, y: 0 });
+  const hoveredElementIdRef = useRef<string | null>(null);
+  const hoveredElementRef = useRef<HTMLElement | null>(null);
+  const elementDimensionsRef = useRef({ width: 0, height: 0, x: 0, y: 0, right: 0, bottom: 0 });
+  const elementBorderRadiusRef = useRef<string>("9999px");
+  const animationFrameRef = useRef<number | null>(null);
+
+  // Spring animation state
+  const springRef = useRef<SpringState>({
     x: 0,
     y: 0,
-    right: 0,
-    bottom: 0,
+    width: cursorSize,
+    height: cursorSize,
+    velocityX: 0,
+    velocityY: 0,
+    velocityW: 0,
+    velocityH: 0,
+    scaleX: 1,
+    scaleY: 1,
   });
 
-  const hoveredElementRef = useRef<HTMLElement | null>(null);
+  // Target state (where we want the cursor to be)
+  const targetRef = useRef({
+    x: 0,
+    y: 0,
+    width: cursorSize,
+    height: cursorSize,
+  });
+
+  const [hoveredElementId, setHoveredElementId] = useState<string | null>(null);
 
-  // Set isClient to true after component mounts (client-side only)
   useEffect(() => {
     setIsClient(true);
   }, []);
 
+  // Calculate target position and size based on current state
+  const updateTarget = useCallback(() => {
+    const mouse = mousePositionRef.current;
+    const dims = elementDimensionsRef.current;
+    const isHovering = hoveredElementIdRef.current !== null;
+
+    if (isHovering && dims.width > 0) {
+      // Calculate distance from each edge (negative = outside)
+      const distFromLeft = mouse.x - dims.x;
+      const distFromRight = dims.x + dims.width - mouse.x;
+      const distFromTop = mouse.y - dims.y;
+      const distFromBottom = dims.y + dims.height - mouse.y;
+
+      // Total threshold zone = inner boundary + outer threshold
+      const totalThreshold = boundaryThreshold + outerThreshold;
+
+      let offsetX = 0;
+      let offsetY = 0;
+
+      // Left side: inside near edge or outside within threshold
+      if (distFromLeft < boundaryThreshold) {
+        // Map from boundaryThreshold (inside) to -outerThreshold (outside) -> 0 to maxOffset
+        const progress = Math.min(1, (boundaryThreshold - distFromLeft) / totalThreshold);
+        offsetX = -maxOffsetX * progress;
+      }
+      // Right side
+      else if (distFromRight < boundaryThreshold) {
+        const progress = Math.min(1, (boundaryThreshold - distFromRight) / totalThreshold);
+        offsetX = maxOffsetX * progress;
+      }
+
+      // Top side
+      if (distFromTop < boundaryThreshold) {
+        const progress = Math.min(1, (boundaryThreshold - distFromTop) / totalThreshold);
+        offsetY = -maxOffsetY * progress;
+      }
+      // Bottom side
+      else if (distFromBottom < boundaryThreshold) {
+        const progress = Math.min(1, (boundaryThreshold - distFromBottom) / totalThreshold);
+        offsetY = maxOffsetY * progress;
+      }
+
+      targetRef.current = {
+        x: dims.x + offsetX,
+        y: dims.y + offsetY,
+        width: dims.width,
+        height: dims.height,
+      };
+    } else {
+      // Follow mouse as a dot
+      targetRef.current = {
+        x: mouse.x - cursorSize / 2,
+        y: mouse.y - cursorSize / 2,
+        width: cursorSize,
+        height: cursorSize,
+      };
+    }
+  }, [cursorSize, maxOffsetX, maxOffsetY, boundaryThreshold, outerThreshold]);
+
+  // Animation loop with spring physics
+  const animate = useCallback(() => {
+    const cursor = cursorRef.current;
+    const cursorInner = cursorInnerRef.current;
+    if (!cursor || !cursorInner) {
+      animationFrameRef.current = requestAnimationFrame(animate);
+      return;
+    }
+
+    const spring = springRef.current;
+    const target = targetRef.current;
+    const { stiffness, damping } = SPRING_CONFIG;
+
+    // Calculate mouse velocity for squish effect
+    const mouse = mousePositionRef.current;
+    const prevMouse = prevMousePositionRef.current;
+    const mouseVelocityX = mouse.x - prevMouse.x;
+    const mouseVelocityY = mouse.y - prevMouse.y;
+    prevMousePositionRef.current = { ...mouse };
+
+    // Spring physics for position
+    const forceX = (target.x - spring.x) * stiffness;
+    const forceY = (target.y - spring.y) * stiffness;
+    spring.velocityX = (spring.velocityX + forceX) * damping;
+    spring.velocityY = (spring.velocityY + forceY) * damping;
+    spring.x += spring.velocityX;
+    spring.y += spring.velocityY;
+
+    // Spring physics for size
+    const forceW = (target.width - spring.width) * stiffness;
+    const forceH = (target.height - spring.height) * stiffness;
+    spring.velocityW = (spring.velocityW + forceW) * damping;
+    spring.velocityH = (spring.velocityH + forceH) * damping;
+    spring.width += spring.velocityW;
+    spring.height += spring.velocityH;
+
+    // Squish effect based on velocity
+    // Moving horizontally -> squish vertically (and vice versa)
+    const targetScaleX = 1 - Math.abs(mouseVelocityY) * SQUISH_CONFIG.velocityScale;
+    const targetScaleY = 1 - Math.abs(mouseVelocityX) * SQUISH_CONFIG.velocityScale;
+
+    // Clamp squish and smoothly interpolate
+    const clampedTargetScaleX = Math.max(1 - SQUISH_CONFIG.maxSquish, Math.min(1, targetScaleX));
+    const clampedTargetScaleY = Math.max(1 - SQUISH_CONFIG.maxSquish, Math.min(1, targetScaleY));
+
+    spring.scaleX += (clampedTargetScaleX - spring.scaleX) * SQUISH_CONFIG.recovery;
+    spring.scaleY += (clampedTargetScaleY - spring.scaleY) * SQUISH_CONFIG.recovery;
+
+    // Also add squish from spring velocity (bouncing)
+    const bounceSquishX = 1 - Math.abs(spring.velocityY) * 0.02;
+    const bounceSquishY = 1 - Math.abs(spring.velocityX) * 0.02;
+    const finalScaleX = Math.max(0.85, spring.scaleX * bounceSquishX);
+    const finalScaleY = Math.max(0.85, spring.scaleY * bounceSquishY);
+
+    // Apply to DOM
+    cursor.style.transform = `translate3d(${spring.x}px, ${spring.y}px, 0)`;
+    cursor.style.width = `${spring.width}px`;
+    cursor.style.height = `${spring.height}px`;
+
+    // Apply squish to inner element
+    cursorInner.style.transform = `scale(${finalScaleX}, ${finalScaleY})`;
+
+    // Update border radius based on hover state - use target element's radius
+    const isHovering = hoveredElementIdRef.current !== null;
+    if (isHovering) {
+      cursorInner.style.borderRadius = elementBorderRadiusRef.current;
+    } else {
+      cursorInner.style.borderRadius = "9999px";
+    }
+
+    animationFrameRef.current = requestAnimationFrame(animate);
+  }, []);
+
+  // Start animation loop
+  useEffect(() => {
+    if (!isClient) return;
+
+    animationFrameRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      if (animationFrameRef.current) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [isClient, animate]);
+
+  // Handle mouse movement
   useEffect(() => {
     if (!isClient) return;
 
     const handleMouseMove = (e: MouseEvent) => {
-      setMousePosition({ x: e.clientX, y: e.clientY });
+      mousePositionRef.current = { x: e.clientX, y: e.clientY };
+      updateTarget();
     };
 
-    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mousemove", handleMouseMove, { passive: true });
     return () => document.removeEventListener("mousemove", handleMouseMove);
-  }, [isClient]);
+  }, [isClient, updateTarget]);
 
   const handleMouseEnter = useCallback(() => {
     setIsMouseInside(true);
-  }, []);
+    // Initialize spring position to current mouse position
+    const mouse = mousePositionRef.current;
+    springRef.current.x = mouse.x - cursorSize / 2;
+    springRef.current.y = mouse.y - cursorSize / 2;
+    updateTarget();
+  }, [cursorSize, updateTarget]);
 
   const handleMouseLeave = useCallback(() => {
     setIsMouseInside(false);
-    setHoveredElementId(null);
+    hoveredElementIdRef.current = null;
     hoveredElementRef.current = null;
-  }, []);
+    setHoveredElementId(null);
+    updateTarget();
+  }, [updateTarget]);
 
   const checkMouseInElement = useCallback(() => {
-    if (!hoveredElementRef.current || !hoveredElementId) {
-      return;
-    }
+    if (!hoveredElementRef.current || !hoveredElementIdRef.current) return;
 
     const rect = hoveredElementRef.current.getBoundingClientRect();
+    const mouse = mousePositionRef.current;
 
-    setElementDimensions({
+    elementDimensionsRef.current = {
       width: rect.width,
       height: rect.height,
       x: rect.left,
       y: rect.top,
       right: rect.right,
       bottom: rect.bottom,
-    });
+    };
 
     const isInside =
-      mousePosition.x >= rect.left &&
-      mousePosition.x <= rect.right &&
-      mousePosition.y >= rect.top &&
-      mousePosition.y <= rect.bottom;
+      mouse.x >= rect.left &&
+      mouse.x <= rect.right &&
+      mouse.y >= rect.top &&
+      mouse.y <= rect.bottom;
 
     if (!isInside) {
-      setHoveredElementId(null);
+      hoveredElementIdRef.current = null;
       hoveredElementRef.current = null;
+      setHoveredElementId(null);
     }
-  }, [mousePosition, hoveredElementId]);
+
+    updateTarget();
+  }, [updateTarget]);
 
   useEffect(() => {
     if (!isClient) return;
 
-    const handleScroll = () => {
-      checkMouseInElement();
-    };
+    const handleScroll = () => checkMouseInElement();
 
     document.addEventListener("scroll", handleScroll, { passive: true, capture: true });
-
-    return () => {
-      document.removeEventListener("scroll", handleScroll, { capture: true });
-    };
+    return () => document.removeEventListener("scroll", handleScroll, { capture: true });
   }, [checkMouseInElement, isClient]);
 
   const registerHoveredElement = useCallback(
     (id: string, dimensions: DOMRect, element?: HTMLElement) => {
-      setHoveredElementId(id);
-      setElementDimensions({
+      hoveredElementIdRef.current = id;
+      elementDimensionsRef.current = {
         width: dimensions.width,
         height: dimensions.height,
         x: dimensions.left,
         y: dimensions.top,
         right: dimensions.right,
         bottom: dimensions.bottom,
-      });
-
+      };
       if (element) {
         hoveredElementRef.current = element;
+        // Get computed border-radius from the target element
+        const computedStyle = window.getComputedStyle(element);
+        elementBorderRadiusRef.current = computedStyle.borderRadius || "8px";
       }
+      setHoveredElementId(id);
+      updateTarget();
     },
-    [],
+    [updateTarget],
   );
 
   const unregisterHoveredElement = useCallback(() => {
-    setHoveredElementId(null);
+    hoveredElementIdRef.current = null;
     hoveredElementRef.current = null;
-  }, []);
+    elementBorderRadiusRef.current = "9999px";
+    setHoveredElementId(null);
+    updateTarget();
+  }, [updateTarget]);
 
   const updateElementDimensions = useCallback(
     (dimensions: DOMRect) => {
-      if (hoveredElementId) {
-        setElementDimensions({
+      if (hoveredElementIdRef.current) {
+        elementDimensionsRef.current = {
           width: dimensions.width,
           height: dimensions.height,
           x: dimensions.left,
           y: dimensions.top,
           right: dimensions.right,
           bottom: dimensions.bottom,
-        });
+        };
+        updateTarget();
       }
     },
-    [hoveredElementId],
+    [updateTarget],
   );
 
-  const getCursorPosition = () => {
-    if (!hoveredElementId) {
-      return {
-        x: mousePosition.x - cursorSize / 2,
-        y: mousePosition.y - cursorSize / 2,
-      };
-    }
-
-    // Calculate the center of the element
-    const elementCenterX = elementDimensions.x + elementDimensions.width / 2;
-    const elementCenterY = elementDimensions.y + elementDimensions.height / 2;
-
-    // Calculate offset from center (with some dampening for smoothness)
-    const offsetX = (mousePosition.x - elementCenterX) * 0.1;
-    const offsetY = (mousePosition.y - elementCenterY) * 0.1;
-
-    // Apply bounds to keep cursor within reasonable limits
-    const boundedOffsetX = Math.max(-maxOffsetX, Math.min(maxOffsetX, offsetX));
-    const boundedOffsetY = Math.max(-maxOffsetY, Math.min(maxOffsetY, offsetY));
-
-    return {
-      x: elementDimensions.x + boundedOffsetX,
-      y: elementDimensions.y + boundedOffsetY,
-    };
-  };
-
   const contextValue = useMemo(
     () => ({
-      // State values that change during component lifecycle
-      mousePosition,
-      hoveredElementId,
-      elementDimensions,
-
-      // Callbacks that should be stable references
-      registerHoveredElement,
-      unregisterHoveredElement,
-      updateElementDimensions,
-    }),
-    [
-      mousePosition,
+      mousePosition: mousePositionRef.current,
       hoveredElementId,
-      elementDimensions,
+      elementDimensions: elementDimensionsRef.current,
       registerHoveredElement,
       unregisterHoveredElement,
       updateElementDimensions,
-    ],
-  );
-
-  const cursorPosition = getCursorPosition();
-
-  const cursorStyleObject = useMemo(
-    () => ({
-      left: cursorPosition.x,
-      top: cursorPosition.y,
-      width: hoveredElementId
-        ? elementDimensions.width > 0
-          ? elementDimensions.width
-          : cursorSize
-        : cursorSize,
-      height: hoveredElementId
-        ? elementDimensions.height > 0
-          ? elementDimensions.height
-          : cursorSize
-        : cursorSize,
-      willChange: "transform, width, height",
     }),
-    [
-      cursorPosition.x,
-      cursorPosition.y,
-      hoveredElementId,
-      elementDimensions.width,
-      elementDimensions.height,
-      cursorSize,
-    ],
+    [hoveredElementId, registerHoveredElement, unregisterHoveredElement, updateElementDimensions],
   );
 
-  let styleClass;
-  if (hoveredElementId) {
-    styleClass = `opacity-[0.05] rounded-uk-md transition-[width,height,left,top] duration-${transitionDuration} ease-out`;
-  } else {
-    styleClass = `opacity-90 rounded-full z-10 transition-[width,height,left,top] duration-${transitionDuration} ease-out transition-opacity duration-${transitionDuration}`;
-  }
-
-  // Create cursor element to be portaled
-  const cursorElement = isClient && isMouseInside && (
+  // Cursor with halo/glow effect from original design
+  const cursorElement = isClient && (
     <div
-      className={`pointer-events-none fixed ${styleClass} ${hoveredElementId ? "" : cursorClassName || ""}`}
+      ref={cursorRef}
+      className="pointer-events-none fixed z-50"
       style={{
-        ...cursorStyleObject,
-        backgroundColor: "var(--shadow-tertiary)",
+        left: 0,
+        top: 0,
+        width: cursorSize,
+        height: cursorSize,
+        display: isMouseInside ? "block" : "none",
+        willChange: "transform, width, height",
       }}
-    />
+    >
+      <div
+        ref={cursorInnerRef}
+        className={cn("h-full w-full border border-white/50", cursorClassName)}
+        style={{
+          backgroundColor: "rgba(156, 163, 175, 0.2)",
+          boxShadow: "0 0 25px rgba(255, 255, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5)",
+          borderRadius: "9999px",
+          transformOrigin: "center center",
+        }}
+      />
+    </div>
   );
 
-  // Use React.Fragment at the top level to avoid any DOM structure that might affect layout
   return (
     <>
-      {/* Portal the cursor overlay to document.body to completely avoid layout impact */}
       {isClient &&
         typeof document !== "undefined" &&
         document.body &&
-        cursorElement &&
         createPortal(cursorElement, document.body)}
-      {/* Context provider with no DOM element */}
       <CursorContext.Provider value={contextValue}>
-        {/* Use the Component directly with no extra wrappers */}
         <Component
           {...props}
           className={cn(className)}