@vuer-ai/vuer-uikit 0.0.120 → 0.1.0

package/dist/{chunk-QXFFRQ7E.mjs → chunk-44U6VC46.mjs}

@@ -1,27 +1,32 @@
-import { DialPresetsInput } from './chunk-LMYA5IOK.mjs';
-import { useDialSchema } from './chunk-ZTGJIGBC.mjs';
+import { DialPresetsInput } from './chunk-5GBMVMLS.mjs';
+import { Vec3Input } from './chunk-UBGNADCN.mjs';
+import { EulerRadInput } from './chunk-7WJ73FEI.mjs';
+import { InchInput } from './chunk-HI4LO6IJ.mjs';
+import { IntInput } from './chunk-BPCD4L7T.mjs';
+import { QuaternionInput } from './chunk-IYTGWOZY.mjs';
+import { TimeInput } from './chunk-GAAP5JO4.mjs';
+import { CmInput } from './chunk-BTGAKK3B.mjs';
+import { DegInput } from './chunk-EYMZP5PL.mjs';
+import { EulerDegInput } from './chunk-EG6JETUN.mjs';
+import { EulerInput } from './chunk-L2DME42Q.mjs';
+import { VectorInput } from './chunk-V4THHKSO.mjs';
+import { TextInput } from './chunk-P55DAW6H.mjs';
+import { ColorInput } from './chunk-NUBFD3YP.mjs';
+import { RadInput } from './chunk-ITOTSGSL.mjs';
+import { InputNumbers } from './chunk-D2LUQKPM.mjs';
+import { Slider } from './chunk-XIESS6HW.mjs';
+import { Switch } from './chunk-VWLZKPDB.mjs';
+import { Label } from './chunk-XTZURZIR.mjs';
+import { FormLayout } from './chunk-TMBHKVKH.mjs';
+import { DialButton } from './chunk-PMYOKSO3.mjs';
+import { DialCustom } from './chunk-52GNIM6H.mjs';
+import { InputRoot } from './chunk-HGTL7DFT.mjs';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-4W7JKZVN.mjs';
+import { Button } from './chunk-5JYH7TXY.mjs';
+import { useDialSchema, DialProvider } from './chunk-ZTGJIGBC.mjs';
 import { IconRenderer } from './chunk-6YMDD5CU.mjs';
-import { IntInput } from './chunk-3DIFS7CO.mjs';
-import { QuaternionInput } from './chunk-NJWKR5WR.mjs';
-import { TimeInput } from './chunk-ZJSL6HSL.mjs';
-import { Vec3Input } from './chunk-XTLGNJIO.mjs';
-import { CmInput } from './chunk-REZAPK6Z.mjs';
-import { DegInput } from './chunk-H6JGIEAU.mjs';
-import { EulerDegInput } from './chunk-7ACZU3BT.mjs';
-import { EulerInput } from './chunk-ZCSJGDX7.mjs';
-import { EulerRadInput } from './chunk-Y2XVZEXM.mjs';
-import { VectorInput } from './chunk-3NIMV5PH.mjs';
-import { InchInput } from './chunk-JFPIUDGT.mjs';
-import { ColorInput } from './chunk-2GXIGEKC.mjs';
-import { RadInput } from './chunk-SCUMWMIN.mjs';
-import { InputNumbers } from './chunk-EVBYVJTW.mjs';
-import { TextInput } from './chunk-P3YSHGT5.mjs';
-import { Slider } from './chunk-WHV6Z7YX.mjs';
-import { Switch } from './chunk-OLYHHP67.mjs';
-import { Label } from './chunk-UIJEAY6H.mjs';
-import { FormLayout } from './chunk-RGOZPSTI.mjs';
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-IAFCABPY.mjs';
-import { useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
+import { LockKeyhole, LockOpen, X, Plus } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var DialInputWrapper = ({
@@ -34,7 +39,7 @@ var DialInputWrapper = ({
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
   return /* @__PURE__ */ jsxs(FormLayout, { orientation: `label-${labelPosition}`, className: "overflow-x-hidden", children: [
-    /* @__PURE__ */ jsxs(Label, { size: "sm", className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsxs(Label, { size: "sm", className: "flex items-center gap-1 pl-1.5", children: [
       /* @__PURE__ */ jsx(IconRenderer, { iconName: icon, size: 14, className: "text-text-secondary" }),
       label
     ] }),
@@ -55,16 +60,77 @@ var DialVec3Input = ({
   const value = getValue(name) ?? [0, 0, 0];
   const minArray = min !== void 0 ? [min, min, min] : void 0;
   const maxArray = max !== void 0 ? [max, max, max] : void 0;
+  const isLockable = ["position", "rotation", "scale"].includes(name);
+  const disabledFields = getValue("disabledFields") ?? [];
+  const disabled = useMemo(() => {
+    if (!isLockable) return void 0;
+    return [
+      disabledFields.includes(`${name}.0`),
+      disabledFields.includes(`${name}.1`),
+      disabledFields.includes(`${name}.2`)
+    ];
+  }, [isLockable, name, disabledFields]);
+  const handleSuffixBatchAction = useCallback(
+    (indices) => {
+      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) {
+          newDisabledFields.push(fieldName);
+        } else if (!shouldLock && fieldIndex > -1) {
+          newDisabledFields.splice(fieldIndex, 1);
+        }
+      });
+      setValue("disabledFields", newDisabledFields);
+    },
+    [name, disabledFields, setValue]
+  );
+  const suffix = useMemo(() => {
+    if (!isLockable) return void 0;
+    return [0, 1, 2].map((index) => {
+      const isLocked = disabled?.[index] ?? false;
+      return /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          icon: true,
+          className: "hover:bg-shadow-secondary size-4 p-0",
+          title: isLocked ? `Unlock ${["X", "Y", "Z"][index]}` : `Lock ${["X", "Y", "Z"][index]}`,
+          children: isLocked ? /* @__PURE__ */ jsx(LockKeyhole, { strokeWidth: 1.5, className: "text-icon-tertiary size-2.5" }) : /* @__PURE__ */ jsx(LockOpen, { strokeWidth: 1.5, className: "text-icon-tertiary size-2.5" })
+        }
+      );
+    });
+  }, [isLockable, disabled]);
+  const handleValueChange = useCallback(
+    (newValue) => {
+      if (!isLockable || !disabled) {
+        setValue(name, newValue);
+        return;
+      }
+      const filteredValue = newValue.map((v, i) => disabled[i] ? value[i] : v);
+      setValue(name, filteredValue);
+    },
+    [name, setValue, value, isLockable, disabled]
+  );
   if (labelPosition === "inline") {
     return /* @__PURE__ */ jsx(
       Vec3Input,
       {
         value,
-        onValuesChange: (val) => setValue(name, val),
+        onValuesChange: handleValueChange,
         size,
         step,
         min: minArray,
         max: maxArray,
+        disabledItems: disabled,
+        suffix,
+        onSuffixBatchAction: isLockable ? handleSuffixBatchAction : void 0,
         prefix: label ? [label, "", ""] : void 0
       }
     );
@@ -73,11 +139,14 @@ var DialVec3Input = ({
       Vec3Input,
       {
         value,
-        onValuesChange: (val) => setValue(name, val),
+        onValuesChange: handleValueChange,
         size,
         step,
         min: minArray,
-        max: maxArray
+        max: maxArray,
+        disabledItems: disabled,
+        suffix,
+        onSuffixBatchAction: isLockable ? handleSuffixBatchAction : void 0
       }
     ) });
   }
@@ -401,7 +470,7 @@ var DialTextInput = ({
       }
     );
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, labelPosition, children: /* @__PURE__ */ jsx(
       TextInput,
       {
         value,
@@ -418,7 +487,9 @@ var DialEulerRadInput = ({
   size = "sm",
   step,
   labelPosition,
-  icon
+  icon,
+  format = "rad"
+  // Default to radians
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? [0, 0, 0];
@@ -430,7 +501,7 @@ var DialEulerRadInput = ({
         onValuesChange: (val) => setValue(name, val),
         size,
         step,
-        display: "deg",
+        display: format,
         prefix: label ? [label, "", ""] : void 0
       }
     );
@@ -442,7 +513,7 @@ var DialEulerRadInput = ({
         onValuesChange: (val) => setValue(name, val),
         size,
         step,
-        display: "deg"
+        display: format
       }
     ) });
   }
@@ -453,28 +524,35 @@ var DialNumberRadInput = ({
   size = "sm",
   step,
   labelPosition,
-  icon
+  icon,
+  format = "rad"
+  // Default to radians
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? 0;
-  const degValue = value * 180 / Math.PI;
-  const handleChange = (deg) => {
-    const rad = deg * Math.PI / 180;
-    setValue(name, rad);
-  };
   if (labelPosition === "inline") {
     return /* @__PURE__ */ jsx(
-      DegInput,
+      RadInput,
       {
-        value: degValue,
-        onChange: handleChange,
+        value,
+        onChange: (val) => setValue(name, val),
+        display: format,
         size,
         step,
         prefix: label ? [label] : void 0
       }
     );
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(DegInput, { value: degValue, onChange: handleChange, size, step }) });
+    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(
+      RadInput,
+      {
+        value,
+        onChange: (val) => setValue(name, val),
+        display: format,
+        size,
+        step
+      }
+    ) });
   }
 };
 var DialVectorInput2 = ({
@@ -514,25 +592,17 @@ var DialVectorInput2 = ({
   const steps = schema.steps || [];
   const mins = schema.mins || [];
   const maxs = schema.maxs || [];
-  const tags = schema.tags || {};
-  const vectorValue = Array.isArray(value) ? value.concat(Array(Math.max(0, dimensions - value.length)).fill(0)) : Array(dimensions).fill(0);
+  const defaults = Array.isArray(schema.value) ? schema.value : [];
+  const vectorValue = Array.isArray(value) ? value.concat(
+    Array.from(
+      { length: Math.max(0, dimensions - value.length) },
+      (_, i) => defaults[value.length + i] !== void 0 ? defaults[value.length + i] : 0
+    )
+  ) : Array.from({ length: dimensions }, (_, i) => defaults[i] !== void 0 ? defaults[i] : 0);
   const hasMixedTypes = dtypes.some((dtype) => dtype === "boolean");
-  let gridAutoFlow;
-  let gridColumns;
-  let gridRows;
-  if (typeof tags.col === "number") {
-    gridAutoFlow = "column";
-    gridRows = tags.col;
-    gridColumns = void 0;
-  } else if (typeof tags.row === "number") {
-    gridAutoFlow = "row";
-    gridColumns = tags.row;
-    gridRows = void 0;
-  } else {
-    gridAutoFlow = "row";
-    gridColumns = void 0;
-    gridRows = void 0;
-  }
+  const gridAutoFlow = schema.vectorFlow === "row" ? "row" : "column";
+  const gridColumns = typeof schema.vectorCols === "number" ? schema.vectorCols : void 0;
+  const gridRows = typeof schema.vectorRows === "number" ? schema.vectorRows : void 0;
   if (hasMixedTypes) {
     const numberIndices = [];
     const booleanIndices = [];
@@ -641,7 +711,7 @@ var DialVectorInput2 = ({
     return inputComponent;
   }
   return /* @__PURE__ */ jsxs(FormLayout, { orientation: `label-${labelPosition}`, children: [
-    /* @__PURE__ */ jsxs(Label, { size: "sm", className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsxs(Label, { size: "sm", className: "flex items-center gap-1 pl-1.5", children: [
       /* @__PURE__ */ jsx(IconRenderer, { iconName: icon, size: 14, className: "text-text-secondary" }),
       label
     ] }),
@@ -658,6 +728,296 @@ var DialVectorInput2 = ({
     ] })
   ] });
 };
+var DialTupleInput = ({
+  name,
+  label,
+  labelPosition = "top",
+  icon
+}) => {
+  const { getValue, setValue, schemas } = useDialSchema();
+  const values = useMemo(() => getValue(name) || [], [getValue, name]);
+  const handleElementChange = useCallback(
+    (elementName, value) => {
+      const newValues = Array.isArray(values) ? [...values] : [];
+      const schema2 = schemas.find((s) => s.name === name);
+      if (!schema2 || !schema2.typeDefinition?.schemas) {
+        return;
+      }
+      const elementIndex = schema2.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;
+  }
+  const valuesObject = {};
+  schema.typeDefinition.schemas.forEach((elemSchema, index) => {
+    valuesObject[elemSchema.name] = Array.isArray(values) ? values[index] : void 0;
+  });
+  const tupleContent = /* @__PURE__ */ jsx("div", { className: "border-surface-secondary flex flex-col gap-2 rounded-md border p-2", children: /* @__PURE__ */ jsx(
+    DialProvider,
+    {
+      schemas: schema.typeDefinition.schemas,
+      values: valuesObject,
+      onValueChange: handleElementChange,
+      children: /* @__PURE__ */ jsx(
+        DialPanel,
+        {
+          schemas: schema.typeDefinition.schemas,
+          groups: schema.typeDefinition.groups,
+          labelLayout: schema.labelPosition
+        }
+      )
+    }
+  ) });
+  if (!label) {
+    return tupleContent;
+  }
+  return /* @__PURE__ */ jsxs(FormLayout, { orientation: `label-${labelPosition}`, children: [
+    /* @__PURE__ */ jsxs(Label, { size: "sm", className: "flex items-center gap-1 pl-1.5", children: [
+      /* @__PURE__ */ jsx(IconRenderer, { iconName: icon, size: 14, className: "text-text-secondary" }),
+      label
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 pl-1.5", children: [
+      schema.helpText && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "text-text-secondary cursor-help text-xs",
+          title: schema.helpText,
+          children: [
+            "\u24D8 ",
+            schema.helpText
+          ]
+        }
+      ),
+      tupleContent
+    ] })
+  ] });
+};
+var DialArrayInput = ({
+  name,
+  label,
+  labelPosition = "top",
+  icon
+}) => {
+  const { getValue, setValue, schemas } = useDialSchema();
+  const schema = schemas.find((s) => s.name === name);
+  const arrayValue = useMemo(
+    () => getValue(name) || [],
+    [getValue, name]
+  );
+  const elementType = schema?.arrayElementType || "string";
+  const handleAddItem = useCallback(() => {
+    const newValue = [...arrayValue];
+    switch (elementType) {
+      case "number":
+        newValue.push(0);
+        break;
+      case "boolean":
+        newValue.push(false);
+        break;
+      default:
+        newValue.push("");
+        break;
+    }
+    setValue(name, newValue);
+  }, [arrayValue, elementType, name, setValue]);
+  const handleRemoveItem = useCallback(
+    (index) => {
+      const newValue = arrayValue.filter((_, i) => i !== index);
+      setValue(name, newValue);
+    },
+    [arrayValue, name, setValue]
+  );
+  const handleItemChange = useCallback(
+    (index, value) => {
+      const newValue = [...arrayValue];
+      newValue[index] = value;
+      setValue(name, newValue);
+    },
+    [arrayValue, name, setValue]
+  );
+  if (!schema) {
+    return null;
+  }
+  const renderItemInput = (item, index) => {
+    const itemKey = `${name}-${index}`;
+    switch (elementType) {
+      case "boolean":
+        return /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: item,
+            onCheckedChange: (checked) => handleItemChange(index, checked)
+          },
+          itemKey
+        );
+      case "number":
+        return /* @__PURE__ */ jsx(
+          InputRoot,
+          {
+            type: "number",
+            value: item,
+            onChange: (e) => handleItemChange(index, Number(e.target.value)),
+            className: "flex-1",
+            step: schema.step || 0.1,
+            min: schema.min,
+            max: schema.max
+          },
+          itemKey
+        );
+      default:
+        return /* @__PURE__ */ jsx(
+          InputRoot,
+          {
+            type: "text",
+            value: item,
+            onChange: (e) => handleItemChange(index, e.target.value),
+            className: "flex-1",
+            placeholder: schema.placeholder
+          },
+          itemKey
+        );
+    }
+  };
+  const arrayContent = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    arrayValue.map((item, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-text-secondary min-w-[20px] text-xs", children: [
+        index + 1,
+        "."
+      ] }),
+      renderItemInput(item, index),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          icon: true,
+          onClick: () => handleRemoveItem(index),
+          className: "h-8 w-8",
+          title: "Remove item",
+          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+        }
+      )
+    ] }, `${name}-item-${index}`)),
+    /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "sm", onClick: handleAddItem, className: "self-start", children: [
+      /* @__PURE__ */ jsx(Plus, { className: "mr-1 h-4 w-4" }),
+      "Add ",
+      elementType
+    ] }),
+    arrayValue.length === 0 && /* @__PURE__ */ jsxs("div", { className: "text-text-secondary text-sm italic", children: [
+      'No items. Click "Add ',
+      elementType,
+      '" to start.'
+    ] })
+  ] });
+  if (!label) {
+    return arrayContent;
+  }
+  return /* @__PURE__ */ jsxs(FormLayout, { orientation: `label-${labelPosition}`, children: [
+    /* @__PURE__ */ jsxs(Label, { size: "sm", className: "flex items-center gap-1 pl-1.5", children: [
+      /* @__PURE__ */ jsx(IconRenderer, { iconName: icon, size: 14, className: "text-text-secondary" }),
+      label
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 pl-1.5", children: [
+      schema.helpText && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "text-text-secondary cursor-help text-xs",
+          title: schema.helpText,
+          children: [
+            "\u24D8 ",
+            schema.helpText
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "border-surface-secondary rounded-md border p-2", children: arrayContent })
+    ] })
+  ] });
+};
+var DialInterfaceInput = ({
+  name,
+  label,
+  labelPosition = "top",
+  icon
+}) => {
+  const { getValue, setValue, schemas } = useDialSchema();
+  const values = getValue(name);
+  const handlePropertyChange = useCallback(
+    (propName, value) => {
+      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 = /* @__PURE__ */ jsx("div", { className: "border-surface-secondary flex flex-col gap-2 rounded-md border p-2", children: /* @__PURE__ */ jsx(
+    DialProvider,
+    {
+      schemas: schema.typeDefinition.schemas,
+      values,
+      onValueChange: handlePropertyChange,
+      children: /* @__PURE__ */ jsx(
+        DialPanel,
+        {
+          schemas: schema.typeDefinition.schemas,
+          groups: schema.typeDefinition.groups,
+          labelLayout: schema.labelPosition
+        }
+      )
+    }
+  ) });
+  if (!label) {
+    return interfaceContent;
+  }
+  return /* @__PURE__ */ jsxs(FormLayout, { orientation: `label-${labelPosition}`, children: [
+    /* @__PURE__ */ jsxs(Label, { size: "sm", className: "flex items-center gap-1 pl-1.5", children: [
+      /* @__PURE__ */ jsx(IconRenderer, { iconName: icon, size: 14, className: "text-text-secondary" }),
+      label
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 pl-1.5", children: [
+      schema.helpText && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "text-text-secondary cursor-help text-xs",
+          title: schema.helpText,
+          children: [
+            "\u24D8 ",
+            schema.helpText
+          ]
+        }
+      ),
+      interfaceContent
+    ] })
+  ] });
+};
+var generateGroupStyle = (config) => {
+  const layout = config?.layout ?? "grid";
+  if (layout === "grid") {
+    return {
+      display: "grid",
+      gap: "0.5rem",
+      gridAutoFlow: config?.gridFlow,
+      gridTemplateColumns: config?.gridColTemplate ? config.gridColTemplate : config?.gridCols ? `repeat(${config.gridCols}, 1fr)` : "1fr",
+      gridTemplateRows: config?.gridRowTemplate ? config.gridRowTemplate : config?.gridRows ? `repeat(${config.gridRows}, 1fr)` : void 0
+    };
+  }
+  return {
+    display: "flex",
+    gap: "0.5rem",
+    flexWrap: config?.flexWrap ?? "wrap",
+    justifyContent: config?.flexJustifyContent
+  };
+};
 var DialPanel = ({
   schemas,
   groups: groupConfigs,
@@ -669,19 +1029,10 @@ var DialPanel = ({
       groupConfigMap[config.name] = config;
     });
   }
-  schemas.forEach((schema) => {
-    const grouping = schema.tags?.grouping;
-    if (grouping && !groupConfigMap[grouping]) {
-      groupConfigMap[grouping] = { name: grouping };
-    }
-    if (grouping && schema.tags?.noWrap && groupConfigMap[grouping]) {
-      groupConfigMap[grouping].noWrap = true;
-    }
-  });
   const groupedSchemas = {};
   const ungrouped = [];
   schemas.forEach((schema) => {
-    const grouping = schema.tags?.grouping;
+    const grouping = schema?.grouping;
     if (grouping) {
       if (!groupedSchemas[grouping]) {
         groupedSchemas[grouping] = [];
@@ -692,10 +1043,44 @@ var DialPanel = ({
     }
   });
   const renderSchemaInput = (schema) => {
-    const { name, dtype, icon, min, max, step, options, tags } = schema;
-    const effectiveLabelPosition = tags?.labelPosition || labelLayout;
+    const { name, dtype, icon, min, max, step, options } = schema;
+    const effectiveLabelPosition = schema?.labelPosition || labelLayout;
     const label = schema.label || name.charAt(0).toUpperCase() + name.slice(1);
     switch (dtype) {
+      case "tuple":
+        return /* @__PURE__ */ jsx(
+          DialTupleInput,
+          {
+            name,
+            label,
+            labelPosition: effectiveLabelPosition,
+            icon
+          },
+          name
+        );
+      case "array":
+        return /* @__PURE__ */ jsx(
+          DialArrayInput,
+          {
+            name,
+            label,
+            labelPosition: effectiveLabelPosition,
+            icon
+          },
+          name
+        );
+      case "interface":
+      case "object":
+        return /* @__PURE__ */ jsx(
+          DialInterfaceInput,
+          {
+            name,
+            label,
+            labelPosition: effectiveLabelPosition,
+            icon
+          },
+          name
+        );
       case "vector3":
         return /* @__PURE__ */ jsx(
           DialVec3Input,
@@ -711,6 +1096,19 @@ var DialPanel = ({
           name
         );
       case "euler":
+      case "euler-rad":
+        return /* @__PURE__ */ jsx(
+          DialEulerRadInput,
+          {
+            name,
+            label,
+            step: step || 1e-3,
+            labelPosition: effectiveLabelPosition,
+            icon
+          },
+          name
+        );
+      case "euler-deg":
         return /* @__PURE__ */ jsx(
           DialEulerDegInput,
           {
@@ -722,7 +1120,7 @@ var DialPanel = ({
           },
           name
         );
-      case "euler-rad":
+      case "euler-pi":
         return /* @__PURE__ */ jsx(
           DialEulerRadInput,
           {
@@ -730,7 +1128,8 @@ var DialPanel = ({
             label,
             step: step || 1e-3,
             labelPosition: effectiveLabelPosition,
-            icon
+            icon,
+            format: "pi"
           },
           name
         );
@@ -835,6 +1234,7 @@ var DialPanel = ({
         return /* @__PURE__ */ jsx(DialColorInput, { name, label, icon }, name);
       case "string":
       case "text":
+      case "select":
         if (options && options.length > 0) {
           return /* @__PURE__ */ jsx(
             DialSelectInput,
@@ -859,21 +1259,69 @@ var DialPanel = ({
           },
           name
         );
+      case "button":
+        return /* @__PURE__ */ jsx(
+          DialButton,
+          {
+            name,
+            label,
+            icon,
+            onClick: schema.onClick,
+            variant: schema.variant,
+            disabled: schema.disabled
+          },
+          name
+        );
+      case "custom":
+        if (!schema.render && !schema.children) {
+          console.warn(
+            `DialPanel: dtype="custom" requires either render or children for "${name}"`
+          );
+          return null;
+        }
+        return /* @__PURE__ */ jsx(
+          DialCustom,
+          {
+            schema,
+            render: schema.render,
+            children: schema.children
+          },
+          name
+        );
       default:
         return null;
     }
   };
+  const wrapWithStyle = (schema, component) => {
+    const spanStyle = {};
+    if (schema.colSpan) {
+      spanStyle.gridColumn = `span ${schema.colSpan}`;
+    }
+    if (schema.rowSpan) {
+      spanStyle.gridRow = `span ${schema.rowSpan}`;
+    }
+    if (Object.keys(spanStyle).length > 0) {
+      return /* @__PURE__ */ jsx("div", { style: spanStyle, children: component }, schema.name);
+    }
+    return component;
+  };
+  const sortedGroups = Object.entries(groupedSchemas).sort(([nameA], [nameB]) => {
+    const lowerA = nameA.toLowerCase();
+    const lowerB = nameB.toLowerCase();
+    if (lowerA === "transform") return -1;
+    if (lowerB === "transform") return 1;
+    return lowerA.localeCompare(lowerB);
+  });
   return /* @__PURE__ */ jsxs("div", { className: "dial-schema-renderer space-y-4", children: [
-    Object.entries(groupedSchemas).map(([name, schemaList]) => {
+    sortedGroups.map(([name, schemaList]) => {
       const groupConfig = groupConfigMap[name];
-      const hasNoWrap = groupConfig?.noWrap;
-      const layoutClass = hasNoWrap ? "flex flex-row flex-no-wrap gap-2" : "flex flex-row gap-2";
+      const groupStyle = generateGroupStyle(groupConfig);
       return /* @__PURE__ */ jsxs("div", { className: "dial-group", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-text-primary mb-2 font-medium", children: name }),
-        /* @__PURE__ */ jsx("div", { className: `dial-row ${layoutClass}`, children: schemaList.map(renderSchemaInput) })
+        /* @__PURE__ */ jsx("div", { className: "text-text-primary mb-2 pl-1.5 font-medium capitalize", children: name }),
+        /* @__PURE__ */ jsx("div", { className: "dial-row", style: groupStyle, children: schemaList.map((schema) => wrapWithStyle(schema, renderSchemaInput(schema))) })
       ] }, name);
     }),
-    ungrouped.length > 0 && /* @__PURE__ */ jsx("div", { className: "dial-group", children: /* @__PURE__ */ jsx("div", { className: "dial-row grid grid-cols-1 gap-2", children: ungrouped.map(renderSchemaInput) }) })
+    ungrouped.length > 0 && /* @__PURE__ */ jsx("div", { className: "dial-group", children: /* @__PURE__ */ jsx("div", { className: "dial-row grid grid-cols-1 gap-2", children: ungrouped.map((schema) => wrapWithStyle(schema, renderSchemaInput(schema))) }) })
   ] });
 };
 var DialInputWrapper2 = ({ label, labelPosition = "top", icon, children }) => {
@@ -881,7 +1329,7 @@ var DialInputWrapper2 = ({ label, labelPosition = "top", icon, children }) => {
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
   return /* @__PURE__ */ jsxs(FormLayout, { orientation: `label-${labelPosition}`, className: "overflow-x-hidden", children: [
-    /* @__PURE__ */ jsxs(Label, { size: "sm", className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsxs(Label, { size: "sm", className: "flex items-center gap-1 pl-1.5", children: [
       /* @__PURE__ */ jsx(IconRenderer, { iconName: icon, size: 14, className: "text-text-secondary" }),
       label
     ] }),
@@ -934,24 +1382,24 @@ var DialBooleanInput = ({
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? false;
-  const handleChange = useCallback((checked) => setValue(name, checked), [name]);
+  const handleChange = useCallback((checked) => setValue(name, checked), [name, setValue]);
   const switchProps = {
     checked: value,
     onCheckedChange: handleChange
   };
   if (!label || labelPosition === "inline") {
-    return /* @__PURE__ */ jsx(Switch, { ...switchProps });
+    return /* @__PURE__ */ jsx(Switch, { className: "ml-1.5", ...switchProps });
   }
-  return /* @__PURE__ */ jsx(DialInputWrapper2, { label, labelPosition, icon, ...props, children: /* @__PURE__ */ jsx(Switch, { ...switchProps }) });
+  return /* @__PURE__ */ jsx(DialInputWrapper2, { label, labelPosition, icon, ...props, children: /* @__PURE__ */ jsx(Switch, { className: "ml-1.5", ...switchProps }) });
 };
 var DialColorInput = ({ name, label, icon, ...props }) => {
   const { getValue, setValue } = useDialSchema();
-  const value = getValue(name) ?? "";
-  const handleChange = useCallback(
-    (e) => setValue(name, e.target.value),
-    [name]
+  const value = getValue(name);
+  const handleValueChange = useCallback(
+    (hexColor) => setValue(name, hexColor),
+    [name, setValue]
   );
-  const inputComp = /* @__PURE__ */ jsx(ColorInput, { value, onChange: handleChange, prefix: label });
+  const inputComp = /* @__PURE__ */ jsx(ColorInput, { className: "ml-1.5", value: value ?? "", onValueChange: handleValueChange });
   return /* @__PURE__ */ jsx(DialInputWrapper2, { label, icon, ...props, children: inputComp });
 };
 var DialSelectInput = ({
@@ -969,7 +1417,7 @@ var DialSelectInput = ({
       const parsed = !isNaN(Number(val)) ? Number(val) : val;
       setValue(name, parsed);
     },
-    [name]
+    [name, setValue]
   );
   const selectComponent = /* @__PURE__ */ jsxs(Select, { value: String(value), onValueChange: handleValueChange, children: [
     /* @__PURE__ */ jsx(SelectTrigger, { size, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select an option" }) }),
@@ -988,19 +1436,19 @@ var DialSliderInput = ({
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? min;
-  const handleValueChange = useCallback(([val]) => setValue(name, val), [name]);
+  const handleValueChange = useCallback(([val]) => setValue(name, val), [name, setValue]);
   const sliderProps = {
     value: [value],
     onValueChange: handleValueChange,
     min,
     max,
     step,
-    className: "flex-1"
+    className: "flex-1 pl-1.5"
   };
-  return /* @__PURE__ */ jsxs(DialInputWrapper2, { label, icon, ...props, children: [
+  return /* @__PURE__ */ jsx(DialInputWrapper2, { label, icon, ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
     /* @__PURE__ */ jsx(Slider, { ...sliderProps }),
     /* @__PURE__ */ jsx("span", { className: "text-text-secondary w-12 text-right text-sm", children: value })
-  ] });
+  ] }) });
 };
 
-export { DialBooleanInput, DialCmInput, DialColorInput, DialDegInput, DialEulerDegInput, DialEulerInput, DialEulerRadInput, DialInchInput, DialIntInput, DialNumberInput, DialNumberRadInput, DialPanel, DialQuaternionInput, DialRadInput, DialSelectInput, DialSliderInput, DialTextInput, DialTimeInput, DialVec3Input, DialVectorInput, DialVectorInput2 };
+export { DialArrayInput, DialBooleanInput, DialCmInput, DialColorInput, DialDegInput, DialEulerDegInput, DialEulerInput, DialEulerRadInput, DialInchInput, DialIntInput, DialInterfaceInput, DialNumberInput, DialNumberRadInput, DialPanel, DialQuaternionInput, DialRadInput, DialSelectInput, DialSliderInput, DialTextInput, DialTimeInput, DialTupleInput, DialVec3Input, DialVectorInput, DialVectorInput2 };