@vuer-ai/vuer-uikit 0.0.120 → 0.1.0

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

@@ -13,9 +13,10 @@ import {
   SelectValue,
   Slider,
   Switch,
-} from "../../index"; // Base input component that connects to the dial store
-import { LabelPositionT, useDialSchema } from "../DialProvider";
+} from "../../index";
+import { useDialSchema } from "../DialProvider";
 import { IconRenderer } from "../IconRenderer";
+import type { LabelPositionT } from "../types";
 
 // Helper component for wrapping inputs with labels
 const DialInputWrapper: React.FC<{
@@ -30,7 +31,7 @@ const DialInputWrapper: React.FC<{
 
   return (
     <FormLayout orientation={`label-${labelPosition}` as LayoutType} className="overflow-x-hidden">
-      <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>
@@ -108,7 +109,7 @@ export const DialBooleanInput: React.FC<DialNumInputProps> = ({
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? false) as boolean;
 
-  const handleChange = useCallback((checked: boolean) => setValue(name, checked), [name]);
+  const handleChange = useCallback((checked: boolean) => setValue(name, checked), [name, setValue]);
 
   const switchProps = {
     checked: value,
@@ -116,12 +117,12 @@ export const DialBooleanInput: React.FC<DialNumInputProps> = ({
   };
 
   if (!label || labelPosition === "inline") {
-    return <Switch {...switchProps} />;
+    return <Switch className="ml-1.5" {...switchProps} />;
   }
 
   return (
     <DialInputWrapper label={label} labelPosition={labelPosition} icon={icon} {...props}>
-      <Switch {...switchProps} />
+      <Switch className="ml-1.5" {...switchProps} />
     </DialInputWrapper>
   );
 };
@@ -129,14 +130,17 @@ export const DialBooleanInput: React.FC<DialNumInputProps> = ({
 // Dial-wrapped ColorInput
 export const DialColorInput: React.FC<DialNumInputProps> = ({ name, label, icon, ...props }) => {
   const { getValue, setValue } = useDialSchema();
-  const value = (getValue(name) ?? "") as string;
+  // Value can be string or number (0xffffff format)
+  const value = getValue(name) as string | number | undefined;
 
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => setValue(name, e.target.value),
-    [name],
+  const handleValueChange = useCallback(
+    (hexColor: string) => setValue(name, hexColor),
+    [name, setValue],
   );
 
-  const inputComp = <ColorInput value={value} onChange={handleChange} prefix={label} />;
+  const inputComp = (
+    <ColorInput className="ml-1.5" value={value ?? ""} onValueChange={handleValueChange} />
+  );
 
   return (
     <DialInputWrapper label={label} icon={icon} {...props}>
@@ -162,7 +166,7 @@ export const DialSelectInput: React.FC<DialNumInputProps> = ({
       const parsed = !isNaN(Number(val)) ? Number(val) : val;
       setValue(name, parsed);
     },
-    [name],
+    [name, setValue],
   );
 
   const selectComponent = (
@@ -199,7 +203,7 @@ export const DialSliderInput: React.FC<DialNumInputProps> = ({
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? min) as number;
 
-  const handleValueChange = useCallback(([val]: number[]) => setValue(name, val), [name]);
+  const handleValueChange = useCallback(([val]: number[]) => setValue(name, val), [name, setValue]);
 
   const sliderProps = {
     value: [value],
@@ -207,13 +211,15 @@ export const DialSliderInput: React.FC<DialNumInputProps> = ({
     min,
     max,
     step,
-    className: "flex-1",
+    className: "flex-1 pl-1.5",
   };
 
   return (
     <DialInputWrapper label={label} icon={icon} {...props}>
-      <Slider {...sliderProps} />
-      <span className="text-text-secondary w-12 text-right text-sm">{value}</span>
+      <div className={"flex"}>
+        <Slider {...sliderProps} />
+        <span className="text-text-secondary w-12 text-right text-sm">{value}</span>
+      </div>
     </DialInputWrapper>
   );
 };

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

@@ -0,0 +1,175 @@
+import { Plus, X } from "lucide-react";
+import React, { useCallback, useMemo } from "react";
+
+import { Button, FormLayout, Input, Label, Switch, type LayoutType } from "../../index";
+import { useDialSchema } from "../DialProvider";
+import { IconRenderer } from "../IconRenderer";
+import { LabelPositionT } from "../types";
+
+interface DialArrayInputProps {
+  name: string;
+  label?: string;
+  labelPosition?: LabelPositionT;
+  icon?: string;
+}
+
+/**
+ * Array input component for primitive types (string, number, boolean)
+ * Supports add/remove operations for dynamic arrays
+ *
+ * Note: Currently only supports primitive element types.
+ * Complex types (objects, nested arrays) are not supported.
+ */
+export const DialArrayInput: React.FC<DialArrayInputProps> = ({
+  name,
+  label,
+  labelPosition = "top",
+  icon,
+}) => {
+  const { getValue, setValue, schemas } = useDialSchema();
+
+  const schema = schemas.find((s) => s.name === name);
+  const arrayValue = useMemo(
+    () => (getValue(name) || []) as Array<string | number | boolean>,
+    [getValue, name],
+  );
+  const elementType = schema?.arrayElementType || "string";
+
+  const handleAddItem = useCallback(() => {
+    const newValue = [...arrayValue];
+    // Add default value based on element type
+    switch (elementType) {
+      case "number":
+        newValue.push(0);
+        break;
+      case "boolean":
+        newValue.push(false);
+        break;
+      default: // string
+        newValue.push("");
+        break;
+    }
+    setValue(name, newValue);
+  }, [arrayValue, elementType, name, setValue]);
+
+  const handleRemoveItem = useCallback(
+    (index: number) => {
+      const newValue = arrayValue.filter((_, i) => i !== index);
+      setValue(name, newValue);
+    },
+    [arrayValue, name, setValue],
+  );
+
+  const handleItemChange = useCallback(
+    (index: number, value: string | number | boolean) => {
+      const newValue = [...arrayValue];
+      newValue[index] = value;
+      setValue(name, newValue);
+    },
+    [arrayValue, name, setValue],
+  );
+
+  if (!schema) {
+    return null;
+  }
+
+  const renderItemInput = (item: string | number | boolean, index: number) => {
+    const itemKey = `${name}-${index}`;
+
+    switch (elementType) {
+      case "boolean":
+        return (
+          <Switch
+            key={itemKey}
+            checked={item as boolean}
+            onCheckedChange={(checked) => handleItemChange(index, checked)}
+          />
+        );
+
+      case "number":
+        return (
+          <Input
+            key={itemKey}
+            type="number"
+            value={item as number}
+            onChange={(e) => handleItemChange(index, Number(e.target.value))}
+            className="flex-1"
+            step={schema.step || 0.1}
+            min={schema.min}
+            max={schema.max}
+          />
+        );
+
+      default: // string
+        return (
+          <Input
+            key={itemKey}
+            type="text"
+            value={item as string}
+            onChange={(e) => handleItemChange(index, e.target.value)}
+            className="flex-1"
+            placeholder={schema.placeholder}
+          />
+        );
+    }
+  };
+
+  const arrayContent = (
+    <div className="flex flex-col gap-2">
+      {/* Array items */}
+      {arrayValue.map((item, index) => (
+        <div key={`${name}-item-${index}`} className="flex items-center gap-2">
+          <span className="text-text-secondary min-w-[20px] text-xs">{index + 1}.</span>
+          {renderItemInput(item, index)}
+          <Button
+            variant="ghost"
+            size="sm"
+            icon
+            onClick={() => handleRemoveItem(index)}
+            className="h-8 w-8"
+            title="Remove item"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      ))}
+
+      {/* Add button */}
+      <Button variant="secondary" size="sm" onClick={handleAddItem} className="self-start">
+        <Plus className="mr-1 h-4 w-4" />
+        Add {elementType}
+      </Button>
+
+      {/* Empty state */}
+      {arrayValue.length === 0 && (
+        <div className="text-text-secondary text-sm italic">
+          No items. Click "Add {elementType}" to start.
+        </div>
+      )}
+    </div>
+  );
+
+  if (!label) {
+    return arrayContent;
+  }
+
+  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>
+        )}
+        <div className="border-surface-secondary rounded-md border p-2">{arrayContent}</div>
+      </div>
+    </FormLayout>
+  );
+};

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

@@ -1,6 +1,8 @@
-import React, { PropsWithChildren } from "react";
+import { LockKeyhole, LockOpen } from "lucide-react";
+import React, { PropsWithChildren, useCallback, useMemo } from "react";
 
 import {
+  Button,
   CmInput,
   DegInput,
   EulerDegInput,
@@ -18,8 +20,9 @@ import {
   Vec3Input,
   VectorInput,
 } from "../../index";
-import { LabelPositionT, useDialSchema } from "../DialProvider";
+import { useDialSchema } from "../DialProvider";
 import { IconRenderer } from "../IconRenderer";
+import type { LabelPositionT } from "../types";
 
 // Base props for all dial-wrapped inputs
 interface DialWrapperProps {
@@ -31,6 +34,8 @@ interface DialWrapperProps {
   max?: number;
   labelPosition?: LabelPositionT;
   icon?: string;
+  /** Display format for angle values: rad (default), deg, or pi */
+  format?: "rad" | "deg" | "pi";
 }
 
 // Helper component for wrapping inputs with labels
@@ -46,7 +51,7 @@ const DialInputWrapper: React.FC<PropsWithChildren<DialWrapperProps>> = ({
 
   return (
     <FormLayout orientation={`label-${labelPosition}` as LayoutType} className="overflow-x-hidden">
-      <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>
@@ -72,15 +77,103 @@ export const DialVec3Input: React.FC<DialWrapperProps> = ({
   const minArray = min !== undefined ? [min, min, min] : undefined;
   const maxArray = max !== undefined ? [max, max, max] : undefined;
 
+  const isLockable = ["position", "rotation", "scale"].includes(name);
+
+  // Get disabled fields from the schema values
+  const disabledFields = (getValue("disabledFields") as string[]) ?? [];
+
+  // Create disabled array for each axis
+  const disabled = useMemo(() => {
+    if (!isLockable) return undefined;
+    return [
+      disabledFields.includes(`${name}.0`),
+      disabledFields.includes(`${name}.1`),
+      disabledFields.includes(`${name}.2`),
+    ];
+  }, [isLockable, name, disabledFields]);
+
+  // Handle suffix batch action (drag to lock/unlock multiple inputs)
+  const handleSuffixBatchAction = useCallback(
+    (indices: number[]) => {
+      if (indices.length === 0) return;
+
+      const firstIndex = indices[0];
+      const firstFieldName = `${name}.${firstIndex}`;
+      const shouldLock = !disabledFields.includes(firstFieldName);
+
+      const newDisabledFields = [...disabledFields];
+
+      indices.forEach((index) => {
+        const fieldName = `${name}.${index}`;
+        const fieldIndex = newDisabledFields.indexOf(fieldName);
+
+        if (shouldLock && fieldIndex === -1) {
+          // Lock this field
+          newDisabledFields.push(fieldName);
+        } else if (!shouldLock && fieldIndex > -1) {
+          // Unlock this field
+          newDisabledFields.splice(fieldIndex, 1);
+        }
+      });
+
+      setValue("disabledFields", newDisabledFields);
+    },
+    [name, disabledFields, setValue],
+  );
+
+  // Create lock button suffix array
+  const suffix = useMemo(() => {
+    if (!isLockable) return undefined;
+    return [0, 1, 2].map((index) => {
+      const isLocked = disabled?.[index] ?? false;
+
+      return (
+        <Button
+          variant="ghost"
+          size="sm"
+          icon
+          className="hover:bg-shadow-secondary size-4 p-0"
+          title={isLocked ? `Unlock ${["X", "Y", "Z"][index]}` : `Lock ${["X", "Y", "Z"][index]}`}
+        >
+          {isLocked ? (
+            <LockKeyhole strokeWidth={1.5} className="text-icon-tertiary size-2.5" />
+          ) : (
+            <LockOpen strokeWidth={1.5} className="text-icon-tertiary size-2.5" />
+          )}
+        </Button>
+      );
+    });
+  }, [isLockable, disabled]);
+
+  // Handle value change - filter out locked values
+  const handleValueChange = useCallback(
+    (newValue: [number, number, number]) => {
+      if (!isLockable || !disabled) {
+        setValue(name, newValue);
+        return;
+      }
+      const filteredValue = newValue.map((v, i) => (disabled[i] ? value[i] : v)) as [
+        number,
+        number,
+        number,
+      ];
+      setValue(name, filteredValue);
+    },
+    [name, setValue, value, isLockable, disabled],
+  );
+
   if (labelPosition === "inline") {
     return (
       <Vec3Input
         value={value}
-        onValuesChange={(val) => setValue(name, val)}
+        onValuesChange={handleValueChange}
         size={size}
         step={step}
         min={minArray}
         max={maxArray}
+        disabledItems={disabled}
+        suffix={suffix}
+        onSuffixBatchAction={isLockable ? handleSuffixBatchAction : undefined}
         prefix={label ? [label, "", ""] : undefined}
       />
     );
@@ -89,11 +182,14 @@ export const DialVec3Input: React.FC<DialWrapperProps> = ({
       <DialInputWrapper name={name} label={label} icon={icon}>
         <Vec3Input
           value={value}
-          onValuesChange={(val) => setValue(name, val)}
+          onValuesChange={handleValueChange}
           size={size}
           step={step}
           min={minArray}
           max={maxArray}
+          disabledItems={disabled}
+          suffix={suffix}
+          onSuffixBatchAction={isLockable ? handleSuffixBatchAction : undefined}
         />
       </DialInputWrapper>
     );
@@ -466,7 +562,7 @@ export const DialTextInput: React.FC<DialWrapperProps & { placeholder?: string }
     );
   } else {
     return (
-      <DialInputWrapper name={name} label={label} icon={icon}>
+      <DialInputWrapper name={name} label={label} icon={icon} labelPosition={labelPosition}>
         <TextInput
           value={value}
           onChange={(val) => setValue(name, val)}
@@ -478,7 +574,7 @@ export const DialTextInput: React.FC<DialWrapperProps & { placeholder?: string }
   }
 };
 
-// Dial-wrapped EulerRadInput (radians with degree display)
+// Dial-wrapped EulerRadInput (radians with configurable display format)
 export const DialEulerRadInput: React.FC<DialWrapperProps> = ({
   name,
   label,
@@ -486,6 +582,7 @@ export const DialEulerRadInput: React.FC<DialWrapperProps> = ({
   step,
   labelPosition,
   icon,
+  format = "rad", // Default to radians
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? [0, 0, 0]) as [number, number, number];
@@ -497,7 +594,7 @@ export const DialEulerRadInput: React.FC<DialWrapperProps> = ({
         onValuesChange={(val) => setValue(name, val)}
         size={size}
         step={step}
-        display="deg"
+        display={format}
         prefix={label ? [label, "", ""] : undefined}
       />
     );
@@ -509,14 +606,14 @@ export const DialEulerRadInput: React.FC<DialWrapperProps> = ({
           onValuesChange={(val) => setValue(name, val)}
           size={size}
           step={step}
-          display="deg"
+          display={format}
         />
       </DialInputWrapper>
     );
   }
 };
 
-// Dial-wrapped number-rad input (displays as degrees but stores as radians)
+// Dial-wrapped number-rad input (stores radians, configurable display format)
 export const DialNumberRadInput: React.FC<DialWrapperProps> = ({
   name,
   label,
@@ -524,24 +621,17 @@ export const DialNumberRadInput: React.FC<DialWrapperProps> = ({
   step,
   labelPosition,
   icon,
+  format = "rad", // Default to radians
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? 0) as number;
 
-  // Convert radians to degrees for display
-  const degValue = (value * 180) / Math.PI;
-
-  // Handler to convert degrees back to radians
-  const handleChange = (deg: number) => {
-    const rad = (deg * Math.PI) / 180;
-    setValue(name, rad);
-  };
-
   if (labelPosition === "inline") {
     return (
-      <DegInput
-        value={degValue}
-        onChange={handleChange}
+      <RadInput
+        value={value}
+        onChange={(val) => setValue(name, val)}
+        display={format}
         size={size}
         step={step}
         prefix={label ? [label] : undefined}
@@ -550,7 +640,13 @@ export const DialNumberRadInput: React.FC<DialWrapperProps> = ({
   } else {
     return (
       <DialInputWrapper name={name} label={label} icon={icon}>
-        <DegInput value={degValue} onChange={handleChange} size={size} step={step} />
+        <RadInput
+          value={value}
+          onChange={(val) => setValue(name, val)}
+          display={format}
+          size={size}
+          step={step}
+        />
       </DialInputWrapper>
     );
   }

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

@@ -0,0 +1,80 @@
+import React, { useCallback } 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 DialInterfaceInputProps {
+  name: string;
+  label?: string;
+  labelPosition?: LabelPositionT;
+  icon?: string;
+}
+
+export const DialInterfaceInput: React.FC<DialInterfaceInputProps> = ({
+  name,
+  label,
+  labelPosition = "top",
+  icon,
+}) => {
+  const { getValue, setValue, schemas } = useDialSchema();
+
+  const values: Record<string, unknown> = getValue(name) as Record<string, unknown>;
+
+  const handlePropertyChange = useCallback(
+    (propName: string, value: unknown) => {
+      const newValues = { ...values };
+      newValues[propName] = value;
+      setValue(name, newValues);
+    },
+    [name, setValue, values],
+  );
+
+  const schema = schemas.find((s) => s.name === name);
+
+  if (!schema || !schema.typeDefinition?.schemas) {
+    return null;
+  }
+
+  const interfaceContent = (
+    <div className="border-surface-secondary flex flex-col gap-2 rounded-md border p-2">
+      <DialProvider
+        schemas={schema.typeDefinition.schemas}
+        values={values}
+        onValueChange={handlePropertyChange}
+      >
+        <DialPanel
+          schemas={schema.typeDefinition.schemas}
+          groups={schema.typeDefinition.groups}
+          labelLayout={schema.labelPosition as LabelPositionT}
+        />
+      </DialProvider>
+    </div>
+  );
+
+  if (!label) {
+    return interfaceContent;
+  }
+
+  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>
+        )}
+        {interfaceContent}
+      </div>
+    </FormLayout>
+  );
+};

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

@@ -1,9 +1,10 @@
 import React from "react";
 
 import { FormLayout, Label, type LayoutType } from "../../ui";
-import { PresetsInput } from "../../ui/inputs/presets-input";
-import { LabelPositionT, useDialSchema } from "../DialProvider";
+import { PresetsInput } from "../../ui";
+import { useDialSchema } from "../DialProvider";
 import { IconRenderer } from "../IconRenderer";
+import { LabelPositionT } from "../types";
 
 const DialInputWrapper: React.FC<{
   label?: string;
@@ -17,7 +18,7 @@ const DialInputWrapper: React.FC<{
 
   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>