@vuer-ai/vuer-uikit 0.0.121 → 0.1.0

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

@@ -1,27 +1,32 @@
-import { DialPresetsInput } from './chunk-6ZLK2RYS.mjs';
-import { useDialSchema, DialProvider } from './chunk-ZTGJIGBC.mjs';
-import { IconRenderer } from './chunk-6YMDD5CU.mjs';
-import { TimeInput } from './chunk-BLG4IPRR.mjs';
-import { Vec3Input } from './chunk-XC25ZQ7H.mjs';
-import { EulerDegInput } from './chunk-XHNM6XE3.mjs';
-import { EulerInput } from './chunk-7MR3M2HW.mjs';
-import { EulerRadInput } from './chunk-ZQ2DPA2M.mjs';
-import { InchInput } from './chunk-LOMLR5AA.mjs';
-import { IntInput } from './chunk-YBUMQX6M.mjs';
-import { QuaternionInput } from './chunk-CEYNTMQP.mjs';
-import { VectorInput } from './chunk-HUPECWNG.mjs';
-import { CmInput } from './chunk-BDFUHPX2.mjs';
-import { DegInput } from './chunk-2KQXKQNU.mjs';
-import { RadInput } from './chunk-PC42NEBI.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-IKSER6BF.mjs';
-import { InputNumbers } from './chunk-HGN7J4CP.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-RS4T6S3Z.mjs';
+import { Switch } from './chunk-VWLZKPDB.mjs';
 import { Label } from './chunk-XTZURZIR.mjs';
 import { FormLayout } from './chunk-TMBHKVKH.mjs';
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-O5YP3JQ4.mjs';
-import { useCallback } from 'react';
+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 { 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,9 +592,15 @@ var DialVectorInput2 = ({
   const steps = schema.steps || [];
   const mins = schema.mins || [];
   const maxs = schema.maxs || [];
-  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");
-  const gridAutoFlow = schema.vectorFlow === "column" ? "column" : "row";
+  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) {
@@ -627,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
     ] }),
@@ -644,7 +728,224 @@ var DialVectorInput2 = ({
     ] })
   ] });
 };
-var DialInterfaceInput = ({ name }) => {
+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(
@@ -659,7 +960,7 @@ var DialInterfaceInput = ({ name }) => {
   if (!schema || !schema.typeDefinition?.schemas) {
     return null;
   }
-  return /* @__PURE__ */ jsx(
+  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,
@@ -674,7 +975,30 @@ var DialInterfaceInput = ({ name }) => {
         }
       )
     }
-  );
+  ) });
+  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";
@@ -723,9 +1047,40 @@ var DialPanel = ({
     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 });
+        return /* @__PURE__ */ jsx(
+          DialInterfaceInput,
+          {
+            name,
+            label,
+            labelPosition: effectiveLabelPosition,
+            icon
+          },
+          name
+        );
       case "vector3":
         return /* @__PURE__ */ jsx(
           DialVec3Input,
@@ -741,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,
           {
@@ -752,7 +1120,7 @@ var DialPanel = ({
           },
           name
         );
-      case "euler-rad":
+      case "euler-pi":
         return /* @__PURE__ */ jsx(
           DialEulerRadInput,
           {
@@ -760,7 +1128,8 @@ var DialPanel = ({
             label,
             step: step || 1e-3,
             labelPosition: effectiveLabelPosition,
-            icon
+            icon,
+            format: "pi"
           },
           name
         );
@@ -890,20 +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 groupStyle = generateGroupStyle(groupConfig);
       return /* @__PURE__ */ jsxs("div", { className: "dial-group", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-text-primary mb-2 font-medium capitalize", children: name }),
-        /* @__PURE__ */ jsx("div", { className: "dial-row", style: groupStyle, 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 }) => {
@@ -911,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
     ] }),
@@ -970,18 +1388,18 @@ var DialBooleanInput = ({
     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),
+  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 = ({
@@ -1025,12 +1443,12 @@ var DialSliderInput = ({
     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, DialInterfaceInput, 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 };