@vuer-ai/vuer-uikit 0.0.116 → 0.0.118

package/dist/{chunk-EAOF6Y75.mjs → chunk-NRI4AFYB.mjs}

@@ -1,38 +1,43 @@
-import { DialPresetsInput } from './chunk-EO4GM3KH.mjs';
-import { useDialSchema } from './chunk-L4CIN7FR.mjs';
-import { EulerRadInput } from './chunk-H2AJ2CLT.mjs';
-import { InchInput } from './chunk-ZRMDDK6J.mjs';
-import { IntInput } from './chunk-JH5NAW2V.mjs';
-import { QuaternionInput } from './chunk-2SFB7HHW.mjs';
-import { TimeInput } from './chunk-Z4ZGX3NM.mjs';
-import { Vec3Input } from './chunk-AGHIJQAR.mjs';
-import { CmInput } from './chunk-ZEBAIL6F.mjs';
-import { DegInput } from './chunk-PTBMSYQQ.mjs';
-import { EulerDegInput } from './chunk-WQCVK4PG.mjs';
-import { EulerInput } from './chunk-KS5A3G7B.mjs';
-import { VectorInput } from './chunk-ZDSN4IFT.mjs';
-import { ColorInput } from './chunk-GSQE4JVF.mjs';
-import { RadInput } from './chunk-TZBOF3XO.mjs';
-import { InputNumbers } from './chunk-MGFG7EXC.mjs';
-import { TextInput } from './chunk-7XXTMBF5.mjs';
-import { Slider } from './chunk-Y6WGGVT2.mjs';
-import { Switch } from './chunk-AZBJB6KC.mjs';
-import { Label } from './chunk-WGWNYPXW.mjs';
-import { FormLayout } from './chunk-NRQJX772.mjs';
-import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from './chunk-KJH46JR3.mjs';
+import { DialPresetsInput } from './chunk-LMYA5IOK.mjs';
+import { useDialSchema } from './chunk-ZTGJIGBC.mjs';
+import { IconRenderer } from './chunk-6YMDD5CU.mjs';
+import { TimeInput } from './chunk-ZJSL6HSL.mjs';
+import { Vec3Input } from './chunk-XTLGNJIO.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 { InchInput } from './chunk-JFPIUDGT.mjs';
+import { IntInput } from './chunk-3DIFS7CO.mjs';
+import { QuaternionInput } from './chunk-NJWKR5WR.mjs';
+import { VectorInput } from './chunk-3NIMV5PH.mjs';
+import { CmInput } from './chunk-REZAPK6Z.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 { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var DialInputWrapper = ({
   label,
   labelPosition = "top",
+  icon,
   children
 }) => {
   if (!label) {
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
   return /* @__PURE__ */ jsxs(FormLayout, { orientation: `label-${labelPosition}`, children: [
-    /* @__PURE__ */ jsx(Label, { size: "sm", children: label }),
+    /* @__PURE__ */ jsxs(Label, { size: "sm", className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(IconRenderer, { iconName: icon, size: 14, className: "text-text-secondary" }),
+      label
+    ] }),
     /* @__PURE__ */ jsx(Fragment, { children })
   ] });
 };
@@ -41,10 +46,15 @@ var DialVec3Input = ({
   label,
   size = "sm",
   step,
-  labelPosition
+  min,
+  max,
+  labelPosition,
+  icon
 }) => {
   const { getValue, setValue } = useDialSchema();
   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;
   if (labelPosition === "inline") {
     return /* @__PURE__ */ jsx(
       Vec3Input,
@@ -53,17 +63,21 @@ var DialVec3Input = ({
         onValuesChange: (val) => setValue(name, val),
         size,
         step,
+        min: minArray,
+        max: maxArray,
         prefix: label ? [label, "", ""] : void 0
       }
     );
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(
       Vec3Input,
       {
         value,
         onValuesChange: (val) => setValue(name, val),
         size,
-        step
+        step,
+        min: minArray,
+        max: maxArray
       }
     ) });
   }
@@ -73,7 +87,8 @@ var DialEulerInput = ({
   label,
   size = "sm",
   step,
-  labelPosition
+  labelPosition,
+  icon
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? [0, 0, 0];
@@ -89,7 +104,7 @@ var DialEulerInput = ({
       }
     );
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(
       EulerInput,
       {
         value,
@@ -105,7 +120,8 @@ var DialEulerDegInput = ({
   label,
   size = "sm",
   step,
-  labelPosition
+  labelPosition,
+  icon
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? [0, 0, 0];
@@ -121,7 +137,7 @@ var DialEulerDegInput = ({
       }
     );
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(
       EulerDegInput,
       {
         value,
@@ -137,7 +153,8 @@ var DialQuaternionInput = ({
   label,
   size = "sm",
   step,
-  labelPosition
+  labelPosition,
+  icon
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? [1, 0, 0, 0];
@@ -153,7 +170,7 @@ var DialQuaternionInput = ({
       }
     );
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(
       QuaternionInput,
       {
         value,
@@ -170,7 +187,8 @@ var DialVectorInput = ({
   size = "sm",
   step,
   dimensions = 3,
-  labelPosition
+  labelPosition,
+  icon
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? new Array(dimensions).fill(0);
@@ -186,7 +204,7 @@ var DialVectorInput = ({
       }
     );
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(
       VectorInput,
       {
         value,
@@ -202,7 +220,10 @@ var DialIntInput = ({
   label,
   size = "sm",
   step = 1,
-  labelPosition
+  min,
+  max,
+  labelPosition,
+  icon
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? 0;
@@ -214,11 +235,23 @@ var DialIntInput = ({
         prefix: label ? [label] : void 0,
         onChange: (val) => setValue(name, val),
         size,
-        step
+        step,
+        min,
+        max
       }
     );
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, children: /* @__PURE__ */ jsx(IntInput, { value, onChange: (val) => setValue(name, val), size, step }) });
+    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(
+      IntInput,
+      {
+        value,
+        onChange: (val) => setValue(name, val),
+        size,
+        step,
+        min,
+        max
+      }
+    ) });
   }
 };
 var DialDegInput = ({
@@ -226,7 +259,8 @@ var DialDegInput = ({
   label,
   size = "sm",
   step,
-  labelPosition
+  labelPosition,
+  icon
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? 0;
@@ -242,7 +276,7 @@ var DialDegInput = ({
       }
     );
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, children: /* @__PURE__ */ jsx(DegInput, { value, onChange: (val) => setValue(name, val), size, step }) });
+    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(DegInput, { value, onChange: (val) => setValue(name, val), size, step }) });
   }
 };
 var DialRadInput = ({
@@ -250,7 +284,8 @@ var DialRadInput = ({
   label,
   size = "sm",
   step,
-  labelPosition
+  labelPosition,
+  icon
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? 0;
@@ -266,7 +301,7 @@ var DialRadInput = ({
       }
     );
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, children: /* @__PURE__ */ jsx(RadInput, { value, onChange: (val) => setValue(name, val), size, step }) });
+    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(RadInput, { value, onChange: (val) => setValue(name, val), size, step }) });
   }
 };
 var DialCmInput = ({
@@ -274,7 +309,8 @@ var DialCmInput = ({
   label,
   size = "sm",
   step,
-  labelPosition
+  labelPosition,
+  icon
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? 0;
@@ -290,7 +326,7 @@ var DialCmInput = ({
       }
     );
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, children: /* @__PURE__ */ jsx(CmInput, { value, onChange: (val) => setValue(name, val), size, step }) });
+    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(CmInput, { value, onChange: (val) => setValue(name, val), size, step }) });
   }
 };
 var DialInchInput = ({
@@ -298,7 +334,8 @@ var DialInchInput = ({
   label,
   size = "sm",
   step,
-  labelPosition
+  labelPosition,
+  icon
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? 0;
@@ -314,7 +351,7 @@ var DialInchInput = ({
       }
     );
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, children: /* @__PURE__ */ jsx(InchInput, { value, onChange: (val) => setValue(name, val), size, step }) });
+    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(InchInput, { value, onChange: (val) => setValue(name, val), size, step }) });
   }
 };
 var DialTimeInput = ({
@@ -322,7 +359,8 @@ var DialTimeInput = ({
   label,
   size = "sm",
   step,
-  labelPosition
+  labelPosition,
+  icon
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? 0;
@@ -338,7 +376,7 @@ var DialTimeInput = ({
       }
     );
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, children: /* @__PURE__ */ jsx(TimeInput, { value, onChange: (val) => setValue(name, val), size, step }) });
+    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(TimeInput, { value, onChange: (val) => setValue(name, val), size, step }) });
   }
 };
 var DialTextInput = ({
@@ -346,7 +384,8 @@ var DialTextInput = ({
   label,
   size = "sm",
   labelPosition,
-  placeholder
+  placeholder,
+  icon
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? "";
@@ -362,7 +401,7 @@ var DialTextInput = ({
       }
     );
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(
       TextInput,
       {
         value,
@@ -378,7 +417,8 @@ var DialEulerRadInput = ({
   label,
   size = "sm",
   step,
-  labelPosition
+  labelPosition,
+  icon
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? [0, 0, 0];
@@ -395,7 +435,7 @@ var DialEulerRadInput = ({
       }
     );
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(
       EulerRadInput,
       {
         value,
@@ -412,7 +452,8 @@ var DialNumberRadInput = ({
   label,
   size = "sm",
   step,
-  labelPosition
+  labelPosition,
+  icon
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? 0;
@@ -433,21 +474,34 @@ var DialNumberRadInput = ({
       }
     );
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, children: /* @__PURE__ */ jsx(DegInput, { value: degValue, onChange: handleChange, size, step }) });
+    return /* @__PURE__ */ jsx(DialInputWrapper, { name, label, icon, children: /* @__PURE__ */ jsx(DegInput, { value: degValue, onChange: handleChange, size, step }) });
   }
 };
 var DialVectorInput2 = ({
   name,
   label,
   size = "sm",
-  labelPosition = "top"
+  labelPosition = "top",
+  icon
 }) => {
   const { getValue, setValue, schemas } = useDialSchema();
-  const handleValuesChange = useCallback(
-    (newValues) => {
+  const handleValueChange = useCallback(
+    (index, newValue, currentValues) => {
+      const newValues = [...currentValues];
+      newValues[index] = newValue;
       setValue(name, newValues);
     },
-    [name]
+    [name, setValue]
+  );
+  const handleNumberValuesChange = useCallback(
+    (newNumberValues, currentValues, numberIndices) => {
+      const newValues = [...currentValues];
+      numberIndices.forEach((originalIndex, i) => {
+        newValues[originalIndex] = newNumberValues[i];
+      });
+      setValue(name, newValues);
+    },
+    [name, setValue]
   );
   const schema = schemas.find((s) => s.name === name);
   if (!schema) {
@@ -458,7 +512,11 @@ var DialVectorInput2 = ({
   const placeholders = schema.placeholders || [];
   const dtypes = schema.dtypes || [];
   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 hasMixedTypes = dtypes.some((dtype) => dtype === "boolean");
   let gridAutoFlow;
   let gridColumns;
   let gridRows;
@@ -475,7 +533,87 @@ var DialVectorInput2 = ({
     gridColumns = void 0;
     gridRows = void 0;
   }
-  const vectorValue = Array.isArray(value) ? value.concat(Array(Math.max(0, dimensions - value.length)).fill(0)) : Array(dimensions).fill(0);
+  if (hasMixedTypes) {
+    const numberIndices = [];
+    const booleanIndices = [];
+    const numberValues = [];
+    const numberSteps = [];
+    const numberMins = [];
+    const numberMaxs = [];
+    const numberLabels = [];
+    dtypes.forEach((dtype, i) => {
+      if (dtype === "boolean") {
+        booleanIndices.push(i);
+      } else {
+        numberIndices.push(i);
+        numberValues.push(vectorValue[i] || 0);
+        const step = steps[i] !== void 0 ? steps[i] : dtype === "number-int" ? 1 : 1e-3;
+        numberSteps.push(step);
+        if (mins[i] !== void 0) {
+          numberMins.push(mins[i]);
+        }
+        if (maxs[i] !== void 0) {
+          numberMaxs.push(maxs[i]);
+        }
+        if (placeholders[i]) {
+          numberLabels.push(/* @__PURE__ */ jsx("span", { className: "text-xs", children: placeholders[i] }));
+        } else {
+          numberLabels.push(void 0);
+        }
+      }
+    });
+    const mixedInputComponent = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      numberIndices.length > 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+        VectorInput,
+        {
+          value: numberValues,
+          onValuesChange: (newValues) => handleNumberValuesChange(newValues, vectorValue, numberIndices),
+          size,
+          step: numberSteps,
+          min: numberMins.length > 0 ? numberMins : void 0,
+          max: numberMaxs.length > 0 ? numberMaxs : void 0,
+          labels: numberLabels,
+          gridAutoFlow,
+          columns: gridColumns,
+          rows: gridRows
+        }
+      ) }),
+      booleanIndices.length > 0 && /* @__PURE__ */ jsx("div", { className: "gap-xs flex flex-wrap", children: booleanIndices.map((originalIndex) => {
+        const placeholder = placeholders[originalIndex];
+        const currentValue = vectorValue[originalIndex];
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          placeholder && /* @__PURE__ */ jsx("span", { className: "text-text-primary text-uk-sm", children: placeholder }),
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: Boolean(currentValue),
+              onCheckedChange: (checked) => handleValueChange(originalIndex, checked, vectorValue)
+            }
+          )
+        ] }, originalIndex);
+      }) })
+    ] });
+    if (!label) {
+      return mixedInputComponent;
+    }
+    return /* @__PURE__ */ jsxs(FormLayout, { orientation: `label-${labelPosition}`, children: [
+      /* @__PURE__ */ jsxs(Label, { size: "sm", className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(IconRenderer, { iconName: icon, size: 14, className: "text-text-secondary" }),
+        label
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-start gap-2", children: [
+        schema.helpText && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-text-secondary mt-1 cursor-help text-xs",
+            title: schema.helpText,
+            children: "\u24D8"
+          }
+        ),
+        mixedInputComponent
+      ] })
+    ] });
+  }
   const inputSteps = Array.from({ length: dimensions }, (_, i) => {
     if (steps[i] !== void 0) {
       return steps[i];
@@ -488,9 +626,11 @@ var DialVectorInput2 = ({
     VectorInput,
     {
       value: vectorValue,
-      onValuesChange: handleValuesChange,
+      onValuesChange: (newValues) => setValue(name, newValues),
       size,
       step: inputSteps,
+      min: mins.length > 0 ? mins : void 0,
+      max: maxs.length > 0 ? maxs : void 0,
       labels,
       gridAutoFlow,
       columns: gridColumns,
@@ -501,7 +641,10 @@ var DialVectorInput2 = ({
     return inputComponent;
   }
   return /* @__PURE__ */ jsxs(FormLayout, { orientation: `label-${labelPosition}`, children: [
-    /* @__PURE__ */ jsx(Label, { size: "sm", children: label }),
+    /* @__PURE__ */ jsxs(Label, { size: "sm", className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(IconRenderer, { iconName: icon, size: 14, className: "text-text-secondary" }),
+      label
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2", children: [
       schema.helpText && /* @__PURE__ */ jsx(
         "span",
@@ -549,7 +692,7 @@ var DialPanel = ({
     }
   });
   const renderSchemaInput = (schema) => {
-    const { name, dtype, min, max, step, options, tags } = schema;
+    const { name, dtype, icon, min, max, step, options, tags } = schema;
     const effectiveLabelPosition = tags?.labelPosition || labelLayout;
     const label = schema.label || name.charAt(0).toUpperCase() + name.slice(1);
     switch (dtype) {
@@ -559,8 +702,11 @@ var DialPanel = ({
           {
             name,
             label,
+            min,
+            max,
             step,
-            labelPosition: effectiveLabelPosition
+            labelPosition: effectiveLabelPosition,
+            icon
           },
           name
         );
@@ -571,7 +717,8 @@ var DialPanel = ({
             name,
             label,
             step,
-            labelPosition: effectiveLabelPosition
+            labelPosition: effectiveLabelPosition,
+            icon
           },
           name
         );
@@ -582,21 +729,23 @@ var DialPanel = ({
             name,
             label,
             step,
-            labelPosition: effectiveLabelPosition
+            labelPosition: effectiveLabelPosition,
+            icon
           },
           name
         );
       case "vector":
       case "vector-6":
       case "number-group":
-        return /* @__PURE__ */ jsx(DialVectorInput2, { name, label }, name);
+        return /* @__PURE__ */ jsx(DialVectorInput2, { name, label, icon }, name);
       case "boolean":
         return /* @__PURE__ */ jsx(
           DialBooleanInput,
           {
             name,
             label,
-            labelPosition: effectiveLabelPosition
+            labelPosition: effectiveLabelPosition,
+            icon
           },
           name
         );
@@ -609,7 +758,8 @@ var DialPanel = ({
             min,
             max,
             step,
-            labelPosition: effectiveLabelPosition
+            labelPosition: effectiveLabelPosition,
+            icon
           },
           name
         );
@@ -618,9 +768,12 @@ var DialPanel = ({
           DialIntInput,
           {
             name,
+            min,
+            max,
             label,
             step: step || 1,
-            labelPosition: effectiveLabelPosition
+            labelPosition: effectiveLabelPosition,
+            icon
           },
           name
         );
@@ -631,7 +784,8 @@ var DialPanel = ({
             name,
             label,
             step,
-            labelPosition: effectiveLabelPosition
+            labelPosition: effectiveLabelPosition,
+            icon
           },
           name
         );
@@ -645,7 +799,8 @@ var DialPanel = ({
               min,
               max,
               step,
-              labelPosition: effectiveLabelPosition
+              labelPosition: effectiveLabelPosition,
+              icon
             },
             name
           );
@@ -657,7 +812,8 @@ var DialPanel = ({
               name,
               label,
               options,
-              labelPosition: effectiveLabelPosition
+              labelPosition: effectiveLabelPosition,
+              icon
             },
             name
           );
@@ -670,12 +826,13 @@ var DialPanel = ({
             min,
             max,
             step,
-            labelPosition: effectiveLabelPosition
+            labelPosition: effectiveLabelPosition,
+            icon
           },
           name
         );
       case "color":
-        return /* @__PURE__ */ jsx(DialColorInput, { name, label }, name);
+        return /* @__PURE__ */ jsx(DialColorInput, { name, label, icon }, name);
       case "string":
       case "text":
         if (options && options.length > 0) {
@@ -685,7 +842,8 @@ var DialPanel = ({
               name,
               label,
               options,
-              labelPosition: effectiveLabelPosition
+              labelPosition: effectiveLabelPosition,
+              icon
             },
             name
           );
@@ -696,7 +854,8 @@ var DialPanel = ({
             name,
             label,
             placeholder: `Enter ${label.toLowerCase()}`,
-            labelPosition: effectiveLabelPosition
+            labelPosition: effectiveLabelPosition,
+            icon
           },
           name
         );
@@ -708,21 +867,24 @@ var DialPanel = ({
     Object.entries(groupedSchemas).map(([name, schemaList]) => {
       const groupConfig = groupConfigMap[name];
       const hasNoWrap = groupConfig?.noWrap;
-      const wrapClass = hasNoWrap ? "" : "flex-wrap";
+      const layoutClass = hasNoWrap ? "flex flex-row gap-2" : "grid grid-cols-3 gap-2";
       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 flex flex-row ${wrapClass} gap-4`, children: schemaList.map(renderSchemaInput) })
+        /* @__PURE__ */ jsx("div", { className: `dial-row ${layoutClass}`, children: schemaList.map(renderSchemaInput) })
       ] }, name);
     }),
-    ungrouped.length > 0 && /* @__PURE__ */ jsx("div", { className: "dial-group", children: /* @__PURE__ */ jsx("div", { className: "dial-row flex flex-row flex-wrap gap-4", children: ungrouped.map(renderSchemaInput) }) })
+    ungrouped.length > 0 && /* @__PURE__ */ jsx("div", { className: "dial-group", children: /* @__PURE__ */ jsx("div", { className: "dial-row grid grid-cols-3 gap-2", children: ungrouped.map(renderSchemaInput) }) })
   ] });
 };
-var DialInputWrapper2 = ({ label, labelPosition = "top", children }) => {
+var DialInputWrapper2 = ({ label, labelPosition = "top", icon, children }) => {
   if (!label) {
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
   return /* @__PURE__ */ jsxs(FormLayout, { orientation: `label-${labelPosition}`, children: [
-    /* @__PURE__ */ jsx(Label, { size: "sm", children: label }),
+    /* @__PURE__ */ jsxs(Label, { size: "sm", className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(IconRenderer, { iconName: icon, size: 14, className: "text-text-secondary" }),
+      label
+    ] }),
     children
   ] });
 };
@@ -734,6 +896,7 @@ var DialNumberInput = ({
   label,
   labelPosition = "top",
   size = "sm",
+  icon,
   ...props
 }) => {
   const { getValue, setValue } = useDialSchema();
@@ -759,13 +922,14 @@ var DialNumberInput = ({
   if (labelPosition === "inline") {
     return /* @__PURE__ */ jsx(InputNumbers, { ...inputNumbersProps });
   } else {
-    return /* @__PURE__ */ jsx(DialInputWrapper2, { label, labelPosition, ...props, children: /* @__PURE__ */ jsx(InputNumbers, { ...inputNumbersProps }) });
+    return /* @__PURE__ */ jsx(DialInputWrapper2, { label, labelPosition, icon, ...props, children: /* @__PURE__ */ jsx(InputNumbers, { ...inputNumbersProps }) });
   }
 };
 var DialBooleanInput = ({
   name,
   label,
   labelPosition,
+  icon,
   ...props
 }) => {
   const { getValue, setValue } = useDialSchema();
@@ -778,9 +942,9 @@ var DialBooleanInput = ({
   if (!label || labelPosition === "inline") {
     return /* @__PURE__ */ jsx(Switch, { ...switchProps });
   }
-  return /* @__PURE__ */ jsx(DialInputWrapper2, { label, labelPosition, ...props, children: /* @__PURE__ */ jsx(Switch, { ...switchProps }) });
+  return /* @__PURE__ */ jsx(DialInputWrapper2, { label, labelPosition, icon, ...props, children: /* @__PURE__ */ jsx(Switch, { ...switchProps }) });
 };
-var DialColorInput = ({ name, label, ...props }) => {
+var DialColorInput = ({ name, label, icon, ...props }) => {
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name) ?? "";
   const handleChange = useCallback(
@@ -788,13 +952,14 @@ var DialColorInput = ({ name, label, ...props }) => {
     [name]
   );
   const inputComp = /* @__PURE__ */ jsx(ColorInput, { value, onChange: handleChange, prefix: label });
-  return /* @__PURE__ */ jsx(DialInputWrapper2, { label, ...props, children: inputComp });
+  return /* @__PURE__ */ jsx(DialInputWrapper2, { label, icon, ...props, children: inputComp });
 };
 var DialSelectInput = ({
   name,
   options = [],
   label,
   size = "sm",
+  icon,
   ...props
 }) => {
   const { getValue, setValue } = useDialSchema();
@@ -810,7 +975,7 @@ var DialSelectInput = ({
     /* @__PURE__ */ jsx(SelectTrigger, { size, children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select an option" }) }),
     /* @__PURE__ */ jsx(SelectContent, { children: options.map((opt, i) => /* @__PURE__ */ jsx(SelectItem, { value: String(opt), children: String(opt) }, i)) })
   ] });
-  return /* @__PURE__ */ jsx(DialInputWrapper2, { label, ...props, children: selectComponent });
+  return /* @__PURE__ */ jsx(DialInputWrapper2, { label, icon, ...props, children: selectComponent });
 };
 var DialSliderInput = ({
   name,
@@ -818,6 +983,7 @@ var DialSliderInput = ({
   max = 100,
   step = 1,
   label,
+  icon,
   ...props
 }) => {
   const { getValue, setValue } = useDialSchema();
@@ -831,7 +997,7 @@ var DialSliderInput = ({
     step,
     className: "flex-1"
   };
-  return /* @__PURE__ */ jsxs(DialInputWrapper2, { label, ...props, children: [
+  return /* @__PURE__ */ jsxs(DialInputWrapper2, { label, icon, ...props, children: [
     /* @__PURE__ */ jsx(Slider, { ...sliderProps }),
     /* @__PURE__ */ jsx("span", { className: "text-text-secondary w-12 text-right text-sm", children: value })
   ] });