@vuer-ai/vuer-uikit 0.0.121 → 0.1.0

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,
@@ -32,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
@@ -47,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>
@@ -73,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}
       />
     );
@@ -90,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>
     );
@@ -467,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)}
@@ -479,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,
@@ -487,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];
@@ -498,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}
       />
     );
@@ -510,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,
@@ -525,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}
@@ -551,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

@@ -1,14 +1,24 @@
 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 }) => {
+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>;
@@ -28,17 +38,43 @@ export const DialInterfaceInput: React.FC<DialInterfaceInputProps> = ({ name })
     return null;
   }
 
-  return (
-    <DialProvider
-      schemas={schema.typeDefinition.schemas}
-      values={values}
-      onValueChange={handlePropertyChange}
-    >
-      <DialPanel
+  const interfaceContent = (
+    <div className="border-surface-secondary flex flex-col gap-2 rounded-md border p-2">
+      <DialProvider
         schemas={schema.typeDefinition.schemas}
-        groups={schema.typeDefinition.groups}
-        labelLayout={schema.labelPosition as LabelPositionT}
-      />
-    </DialProvider>
+        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

@@ -18,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>

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,17 +65,22 @@ export const DialVectorInput: React.FC<DialVectorInputProps> = ({
   const steps = schema.steps || [];
   const mins = schema.mins || [];
   const maxs = schema.maxs || [];
+  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
-  const gridAutoFlow = schema.vectorFlow === "column" ? "column" : "row";
+  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;
 
@@ -222,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";