@vuer-ai/vuer-uikit 0.0.120 → 0.1.0

package/src/ui/inputs/input-numbers.tsx

@@ -47,13 +47,17 @@ const changeElementsHoverState = (
 export interface InputNumbersProps
   extends Omit<
     InputRootProps,
-    "prefix" | "suffix" | "value" | "onValueChange" | "step" | "min" | "max"
+    "prefix" | "suffix" | "value" | "onValueChange" | "step" | "min" | "max" | "disabled"
   > {
   step?: number | number[];
   value: number[];
   prefix?: ReactNode[];
   suffix?: ReactNode[];
+  /** Array of disabled states for each input field */
+  disabledItems?: boolean[];
   onValuesChange?: (value: Array<number>) => void;
+  /** Called when suffix area is clicked/dragged, receives array of affected indices */
+  onSuffixBatchAction?: (indices: number[]) => void;
   min?: number | number[];
   max?: number | number[];
   gridAutoFlow?: "column" | "row";
@@ -72,6 +76,8 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
     onValuesChange,
     prefix,
     suffix,
+    disabledItems,
+    onSuffixBatchAction,
     step = 0.1,
     min,
     max,
@@ -94,6 +100,9 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
   const dragStart = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
   const initialDragStart = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
   const accumulatedDelta = useRef(0);
+  const isSuffixDrag = useRef(false);
+  const lastMouseMoveTime = useRef<number>(0);
+  const accumulatedValues = useRef<number[]>(value);
 
   const applyConstraints = useCallback(
     (numValue: number, index: number): number => {
@@ -121,25 +130,35 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
     document.addEventListener("click", stopClick, true);
   }, []);
 
-  const handleMouseDown = useCallback((e: ReactMouseEvent) => {
-    if (e.button !== 0) return; // Only left mouse button
+  const handleMouseDown = useCallback(
+    (e: ReactMouseEvent) => {
+      if (e.button !== 0) return; // Only left mouse button
 
-    e.preventDefault();
-    e.stopPropagation();
-
-    setIsDragging(true);
-    setCursorState("dragging-y"); // Start with ns-resize cursor
-    dragStart.current = { x: e.clientX, y: e.clientY };
-    initialDragStart.current = { x: e.clientX, y: e.clientY };
-    accumulatedDelta.current = 0;
-    inputChange.current = false;
-    dragDirection.current = "none";
+      e.preventDefault();
+      e.stopPropagation();
 
-    selectRange.current[0] = getHoverElementAndIndex(
-      document.elementFromPoint(e.clientX, e.clientY),
-      inputs.current,
-    );
-  }, []);
+      // Check if clicking on suffix area (InputSlot with data-side="right")
+      const target = e.target as HTMLElement;
+      const suffixElement = target.closest('[data-side="right"]');
+      isSuffixDrag.current = !!suffixElement;
+
+      setIsDragging(true);
+      setCursorState("dragging-y"); // Start with ns-resize cursor
+      dragStart.current = { x: e.clientX, y: e.clientY };
+      initialDragStart.current = { x: e.clientX, y: e.clientY };
+      accumulatedDelta.current = 0;
+      inputChange.current = false;
+      dragDirection.current = "none";
+      lastMouseMoveTime.current = Date.now();
+      accumulatedValues.current = [...value];
+
+      selectRange.current[0] = getHoverElementAndIndex(
+        document.elementFromPoint(e.clientX, e.clientY),
+        inputs.current,
+      );
+    },
+    [value],
+  );
 
   const handleMouseMove = useCallback(
     (e: MouseEvent) => {
@@ -149,6 +168,14 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
       e.stopPropagation();
 
       const deltaX = e.clientX - dragStart.current.x;
+      const now = Date.now();
+      const timeDelta = Math.max(1, now - lastMouseMoveTime.current); // Avoid division by zero
+      lastMouseMoveTime.current = now;
+
+      // Calculate mouse velocity (pixels per millisecond)
+      const velocity = Math.abs(deltaX) / timeDelta;
+      // Scale velocity to a reasonable multiplier (base 1.0 at ~1px/ms)
+      const velocityMultiplier = Math.max(0.5, Math.min(3, velocity * 2));
 
       // Determine drag direction - allow switching from Y to X when moving horizontally
       const totalDeltaX = e.clientX - initialDragStart.current.x;
@@ -164,15 +191,20 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
             input?.blur();
           });
         }
-      } else if (dragDirection.current === "y" && Math.abs(totalDeltaX) > 5) {
-        // Allow switching from Y to X when significant horizontal movement
+      } else if (
+        dragDirection.current === "y" &&
+        Math.abs(totalDeltaX) > 5 &&
+        !isSuffixDrag.current
+      ) {
+        // Allow switching from Y to X when significant horizontal movement (but not for suffix drag)
         dragDirection.current = "x";
         setCursorState("dragging-x");
       }
 
-      // Handle horizontal dragging (value change)
-      if (dragDirection.current === "x") {
-        accumulatedDelta.current += deltaX / 2;
+      // Handle horizontal dragging (value change) - skip if suffix drag
+      if (dragDirection.current === "x" && !isSuffixDrag.current) {
+        // Apply velocity-dependent scaling to the delta
+        accumulatedDelta.current += (deltaX / 2) * velocityMultiplier;
         dragStart.current = { x: e.clientX, y: e.clientY };
 
         // For horizontal dragging, ensure we have a valid range
@@ -183,7 +215,7 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
         if (Math.abs(accumulatedDelta.current) >= (inputChange.current ? 1 : 5)) {
           const multiplyStep = e.shiftKey ? 5 : e.altKey ? 1 / 5 : 1;
 
-          const newValue = value.map((v, i) => {
+          const newValues = accumulatedValues.current.map((v, i) => {
             const [first, last] = selectRange.current;
             if (first === null || last === null) {
               return v;
@@ -203,7 +235,8 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
               return v;
             }
           });
-          onValuesChange?.(newValue);
+          accumulatedValues.current = newValues;
+          onValuesChange?.(newValues);
           accumulatedDelta.current = 0;
           inputChange.current = true;
         }
@@ -227,19 +260,33 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
         stopClick();
       }
     },
-    [isDragging, value, onValuesChange, step, min, max, stopClick, applyConstraints],
+    [isDragging, onValuesChange, step, min, max, stopClick, applyConstraints],
   );
 
   const handleMouseUp = useCallback(() => {
     if (!isDragging) return;
 
+    // If suffix drag/click, call the batch action callback
+    if (isSuffixDrag.current && onSuffixBatchAction) {
+      const [first, last] = selectRange.current;
+      if (first !== null) {
+        // If last is null or equals first, treat as single click
+        const actualLast = last === null || last === first ? first : last;
+        const minIndex = Math.min(first, actualLast);
+        const maxIndex = Math.max(first, actualLast);
+        const indices = Array.from({ length: maxIndex - minIndex + 1 }, (_, i) => minIndex + i);
+        onSuffixBatchAction(indices);
+      }
+    }
+
     setIsDragging(false);
     setCursorState("default");
     selectRange.current = [null, null];
     inputChange.current = false;
     dragDirection.current = "none";
+    isSuffixDrag.current = false;
     changeElementsHoverState(inputs.current, selectRange.current, "none");
-  }, [isDragging]);
+  }, [isDragging, onSuffixBatchAction]);
 
   // Add global mouse event listeners
   React.useEffect(() => {
@@ -359,71 +406,80 @@ export const InputNumbers = forwardRef<HTMLDivElement, InputNumbersProps>(functi
       ])}
       style={useGrid ? gridStyles : undefined}
     >
-      {value.map((item, index) => (
-        <InputRoot
-          key={index}
-          ref={(r) => {
-            inputs.current.set(index.toString(), r);
-            return () => {
-              inputs.current.delete(index.toString());
-            };
-          }}
-          size={size}
-          side={side}
-          type="number"
-          step={Array.isArray(step) ? (step[index] ?? 0.1) : step}
-          value={item}
-          onClick={() => {
-            inputs.current.get(index.toString())?.focus();
-          }}
-          onChange={valueChangeHandler(index)}
-          onKeyDown={handleKeyDown(index)}
-          data-hover="none"
-          className={cn([
-            "group/number-input",
-            "cursor-text",
-            cursorState === "dragging-x" && [
-              "hover:!bg-bg-secondary",
-              "data-[hover=x]:hover:!bg-bg-tertiary",
-            ],
-            "data-[hover=down]:bg-bg-tertiary",
-            "data-[hover=x]:bg-bg-tertiary",
-            "data-[hover=y]:bg-bg-tertiary",
-            "data-[hover=x]:cursor-col-resize",
-            "data-[hover=y]:cursor-ns-resize",
-          ])}
-          inputClassName={cn([
-            "cursor-text",
-            "group-data-[hover=x]/number-input:cursor-col-resize",
-            "group-data-[hover=y]/number-input:cursor-ns-resize",
-          ])}
-        >
-          {prefix?.[index] && (
-            <InputSlot
-              side="left"
-              className={cn(
-                "cursor-text",
-                "group-data-[hover=x]/number-input:cursor-col-resize",
-                "group-data-[hover=y]/number-input:cursor-ns-resize",
-              )}
-            >
-              {prefix[index]}
-            </InputSlot>
-          )}
-          {suffix?.[index] && (
-            <InputSlot
-              side="right"
-              className={cn(
-                "cursor-text",
-                "group-data-[hover=x]/number-input:cursor-col-resize",
-                "group-data-[hover=y]/number-input:cursor-ns-resize",
-              )}
-            >
-              {suffix[index]}
-            </InputSlot>
-          )}
-        </InputRoot>
-      ))}
+      {(Array.isArray(value) ? value : []).map((item, index) => {
+        const isDisabled = disabledItems?.[index] ?? false;
+        return (
+          <InputRoot
+            key={index}
+            ref={(r) => {
+              inputs.current.set(index.toString(), r);
+              return () => {
+                inputs.current.delete(index.toString());
+              };
+            }}
+            size={size}
+            side={side}
+            type="number"
+            step={Array.isArray(step) ? (step[index] ?? 0.1) : step}
+            value={item}
+            disabled={isDisabled}
+            onClick={() => {
+              if (!isDisabled) {
+                inputs.current.get(index.toString())?.focus();
+              }
+            }}
+            onChange={valueChangeHandler(index)}
+            onKeyDown={handleKeyDown(index)}
+            data-hover="none"
+            data-input-index={index}
+            className={cn([
+              "group/number-input",
+              "cursor-text",
+              cursorState === "dragging-x" && [
+                "hover:!bg-bg-secondary",
+                "data-[hover=x]:hover:!bg-bg-tertiary",
+              ],
+              "data-[hover=down]:bg-bg-tertiary",
+              "data-[hover=x]:bg-bg-tertiary",
+              "data-[hover=y]:bg-bg-tertiary",
+              "data-[hover=x]:cursor-col-resize",
+              "data-[hover=y]:cursor-ns-resize",
+              isDisabled && "cursor-not-allowed opacity-50",
+            ])}
+            inputClassName={cn([
+              "cursor-text",
+              "group-data-[hover=x]/number-input:cursor-col-resize",
+              "group-data-[hover=y]/number-input:cursor-ns-resize",
+              isDisabled && "cursor-not-allowed",
+            ])}
+          >
+            {prefix?.[index] && (
+              <InputSlot
+                side="left"
+                className={cn(
+                  "cursor-text",
+                  "group-data-[hover=x]/number-input:cursor-col-resize",
+                  "group-data-[hover=y]/number-input:cursor-ns-resize",
+                )}
+              >
+                {prefix[index]}
+              </InputSlot>
+            )}
+            {suffix?.[index] && (
+              <InputSlot
+                side="right"
+                className={cn(
+                  "cursor-none",
+                  "group-data-[hover=x]/number-input:cursor-col-resize",
+                  "group-data-[hover=y]/number-input:cursor-ns-resize",
+                )}
+              >
+                {suffix[index]}
+              </InputSlot>
+            )}
+          </InputRoot>
+        );
+      })}
     </div>
   );
 });

package/src/ui/inputs/number-inputs/EulerRadInput.tsx

@@ -8,48 +8,49 @@ interface EulerRadInputProps extends Omit<VectorInputProps, "value" | "labels" |
   display?: "deg" | "pi" | "rad";
 }
 
-const EulerRadInput = forwardRef<HTMLDivElement, EulerRadInputProps>(
-  function EulerRadInput({ value, onValuesChange, display = "rad", ...props }, ref) {
-    const displayValues = useMemo(() => {
-      if (display === "deg") {
-        return value.map((v) => (v * 180) / Math.PI) as [number, number, number];
-      } else if (display === "pi") {
-        return value.map((v) => v / Math.PI) as [number, number, number];
-      }
-      return value;
-    }, [value, display]);
-
-    const handleChange = (displayVals: number[]) => {
-      let radValues: [number, number, number];
-      if (display === "deg") {
-        radValues = displayVals.map((v) => (v * Math.PI) / 180) as [number, number, number];
-      } else if (display === "pi") {
-        radValues = displayVals.map((v) => v * Math.PI) as [number, number, number];
-      } else {
-        radValues = displayVals as [number, number, number];
-      }
-      onValuesChange?.(radValues);
-    };
-
-    const unitSymbol = useMemo(() => {
-      if (display === "deg") return "°";
-      if (display === "pi") return "π";
-      return "rad";
-    }, [display]);
-
-    const labels = [`x${unitSymbol}`, `y${unitSymbol}`, `z${unitSymbol}`];
-
-    return (
-      <VectorInput
-        ref={ref}
-        value={displayValues}
-        onValuesChange={handleChange}
-        labels={labels}
-        {...props}
-      />
-    );
-  },
-);
+const EulerRadInput = forwardRef<HTMLDivElement, EulerRadInputProps>(function EulerRadInput(
+  { value, onValuesChange, display = "rad", ...props },
+  ref,
+) {
+  const displayValues = useMemo(() => {
+    if (display === "deg") {
+      return value.map((v) => (v * 180) / Math.PI) as [number, number, number];
+    } else if (display === "pi") {
+      return value.map((v) => v / Math.PI) as [number, number, number];
+    }
+    return value;
+  }, [value, display]);
+
+  const handleChange = (displayVals: number[]) => {
+    let radValues: [number, number, number];
+    if (display === "deg") {
+      radValues = displayVals.map((v) => (v * Math.PI) / 180) as [number, number, number];
+    } else if (display === "pi") {
+      radValues = displayVals.map((v) => v * Math.PI) as [number, number, number];
+    } else {
+      radValues = displayVals as [number, number, number];
+    }
+    onValuesChange?.(radValues);
+  };
+
+  const unitSymbol = useMemo(() => {
+    if (display === "deg") return "°";
+    if (display === "pi") return "π";
+    return "rad";
+  }, [display]);
+
+  const labels = [`x${unitSymbol}`, `y${unitSymbol}`, `z${unitSymbol}`];
+
+  return (
+    <VectorInput
+      ref={ref}
+      value={displayValues}
+      onValuesChange={handleChange}
+      labels={labels}
+      {...props}
+    />
+  );
+});
 
 export { EulerRadInput };
 export type { EulerRadInputProps };

package/src/ui/inputs/number-inputs/VectorInput.tsx

@@ -2,13 +2,14 @@ import React, { forwardRef, ReactNode } from "react";
 
 import { InputNumbers, InputNumbersProps } from "../input-numbers";
 
-
 interface VectorInputProps
   extends Omit<InputNumbersProps, "value" | "onValuesChange" | "onChange"> {
   value: number[];
   onValuesChange?: (value: number[]) => void;
   labels?: ReactNode[];
   step?: number | number[];
+  disabledItems?: boolean[];
+  onSuffixBatchAction?: (indices: number[]) => void;
   gridAutoFlow?: "column" | "row";
   columns?: number;
   rows?: number;

package/src/ui/inputs/presets-rad-input.tsx

@@ -13,7 +13,10 @@ interface PresetsRadInputProps extends Omit<RadInputProps, "value" | "onChange">
 }
 
 export const PresetsRadInput = forwardRef<HTMLDivElement, PresetsRadInputProps>(
-  function PresetsRadInput({ presets, value = 0, onChange, display = "rad", size, className, ...props }, ref) {
+  function PresetsRadInput(
+    { presets, value = 0, onChange, display = "rad", size, className, ...props },
+    ref,
+  ) {
     const [preset, setPreset] = useState(value);
 
     const handleValueChange = (newValue: number) => {
@@ -74,4 +77,4 @@ export const PresetsRadInput = forwardRef<HTMLDivElement, PresetsRadInputProps>(
       </div>
     );
   },
-);
+);

package/src/ui/inputs/text-input.tsx

@@ -40,4 +40,4 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
       {suffix && <InputSlot side="right">{suffix}</InputSlot>}
     </InputRoot>
   );
-});
+});

package/src/ui/layouts/dock-layout/DockLayoutView.tsx

@@ -21,6 +21,7 @@ interface DockLayoutViewProps {
   topClassName?: string;
   bottomClassName?: string;
   contentClassName?: string;
+  hideUI?: boolean;
 }
 
 export const DockLayoutView = ({
@@ -35,18 +36,28 @@ export const DockLayoutView = ({
   topClassName,
   bottomClassName,
   contentClassName,
+  hideUI = false,
 }: DockLayoutViewProps) => {
+  const uiVisibilityClass = hideUI ? "invisible pointer-events-none" : "";
+
   return (
     <DockLayout className={className}>
-      {top && <DockLayoutTop className={topClassName}>{top}</DockLayoutTop>}
+      <DockLayoutContent className={contentClassName}>{children}</DockLayoutContent>
+
+      {top && (
+        <DockLayoutTop className={`${topClassName} ${uiVisibilityClass}`}>{top}</DockLayoutTop>
+      )}
 
-      <div className="flex flex-1 overflow-hidden">
+      <div className={`flex h-full flex-row justify-between overflow-hidden ${uiVisibilityClass}`}>
         {left && <DockLayoutLeft className={leftClassName}>{left}</DockLayoutLeft>}
-        <DockLayoutContent className={contentClassName}>{children}</DockLayoutContent>
         {right && <DockLayoutRight className={rightClassName}>{right}</DockLayoutRight>}
       </div>
 
-      {bottom && <DockLayoutBottom className={bottomClassName}>{bottom}</DockLayoutBottom>}
+      {bottom && (
+        <DockLayoutBottom className={`${bottomClassName} ${uiVisibilityClass}`}>
+          {bottom}
+        </DockLayoutBottom>
+      )}
     </DockLayout>
   );
 };

package/src/ui/layouts/dock-layout/LayoutSlots.tsx

@@ -10,7 +10,10 @@ export const DockLayout = forwardRef<HTMLDivElement, ComponentProps<"div">>(
       <div
         ref={ref}
         {...props}
-        className={cn("relative flex h-full w-full flex-col overflow-hidden", className)}
+        className={cn(
+          "relative flex h-full w-full flex-col justify-between overflow-hidden",
+          className,
+        )}
       />
     );
   },
@@ -27,7 +30,7 @@ export function DockLayoutContent({ className, ...props }: Readonly<ComponentPro
     <div
       {...props}
       className={cn(
-        "relative flex flex-1 flex-col items-center justify-center overflow-auto",
+        "absolute inset-0 z-0 flex flex-1 flex-col items-center justify-center overflow-auto",
         className,
       )}
     />
@@ -40,7 +43,7 @@ export function DockLayoutLeft({ className, asChild, ...props }: Readonly<DockLa
     <Comp
       {...props}
       className={cn(
-        "bg-bg-primary flex h-full flex-shrink-0 flex-col items-start gap-4",
+        "bg-bg-primary z-20 flex h-full flex-shrink-0 flex-col items-start gap-4",
         className,
       )}
     />
@@ -64,7 +67,10 @@ export function DockLayoutRight({ className, asChild, ...props }: Readonly<DockL
   return (
     <Comp
       {...props}
-      className={cn("bg-bg-primary flex h-full flex-shrink-0 flex-col items-end gap-4", className)}
+      className={cn(
+        "bg-bg-primary z-20 flex h-full flex-shrink-0 flex-col items-end gap-4",
+        className,
+      )}
     />
   );
 }
@@ -76,7 +82,10 @@ export const DockLayoutBottom = forwardRef<HTMLDivElement, DockLayoutChildProps>
       <Comp
         ref={ref}
         {...props}
-        className={cn("bg-bg-primary inline-flex w-full flex-shrink-0 justify-center", className)}
+        className={cn(
+          "bg-bg-primary z-20 inline-flex w-full flex-shrink-0 justify-center",
+          className,
+        )}
       />
     );
   },

package/src/ui/layouts/liquid-layout/LiquidLayoutView.tsx

@@ -25,6 +25,18 @@ interface LiquidLayoutViewProps {
   children?: ReactNode;
   /** Additional CSS classes to apply to the root element */
   className?: string;
+  /** Additional CSS classes to apply to the left slot */
+  leftClassName?: string;
+  /** Additional CSS classes to apply to the right slot */
+  rightClassName?: string;
+  /** Additional CSS classes to apply to the top slot */
+  topClassName?: string;
+  /** Additional CSS classes to apply to the bottom slot */
+  bottomClassName?: string;
+  /** Additional CSS classes to apply to the content slot */
+  contentClassName?: string;
+  /** Hide all UI panels */
+  hideUI?: boolean;
 }
 
 /**
@@ -41,16 +53,43 @@ export const LiquidLayoutView = ({
   bottom,
   children,
   className,
+  leftClassName,
+  rightClassName,
+  topClassName,
+  bottomClassName,
+  contentClassName,
+  hideUI = false,
 }: LiquidLayoutViewProps) => {
+  const uiVisibilityClass = hideUI ? "invisible pointer-events-none" : "";
+
   return (
     <LiquidLayout className={className}>
-      <LiquidLayoutContent className="absolute flex flex-col items-center justify-center">
+      <LiquidLayoutContent
+        className={`absolute inset-0 z-0 flex flex-col items-center justify-center ${contentClassName || ""}`}
+      >
         {children}
       </LiquidLayoutContent>
-      {bottom && <LiquidLayoutBottom className="mt-4">{bottom}</LiquidLayoutBottom>}
-      {right && <LiquidLayoutRight className="max-w-75">{right}</LiquidLayoutRight>}
-      {top && <LiquidLayoutTop>{top}</LiquidLayoutTop>}
-      {left && <LiquidLayoutLeft className="max-w-75">{left}</LiquidLayoutLeft>}
+
+      {bottom && (
+        <LiquidLayoutBottom className={`z-20 mt-4 ${bottomClassName || ""} ${uiVisibilityClass}`}>
+          {bottom}
+        </LiquidLayoutBottom>
+      )}
+      {right && (
+        <LiquidLayoutRight className={`z-20 max-w-75 ${rightClassName || ""} ${uiVisibilityClass}`}>
+          {right}
+        </LiquidLayoutRight>
+      )}
+      {top && (
+        <LiquidLayoutTop className={`z-20 ${topClassName || ""} ${uiVisibilityClass}`}>
+          {top}
+        </LiquidLayoutTop>
+      )}
+      {left && (
+        <LiquidLayoutLeft className={`z-20 max-w-75 ${leftClassName || ""} ${uiVisibilityClass}`}>
+          {left}
+        </LiquidLayoutLeft>
+      )}
     </LiquidLayout>
   );
 };