@vuer-ai/vuer-uikit 0.0.114 → 0.0.117

package/dist/ui/inputs/index.cjs

@@ -2,24 +2,24 @@
 
 require('../../chunk-63OJOP6W.cjs');
 require('../../chunk-DECFNBXU.cjs');
-var chunkL2YLNWCQ_cjs = require('../../chunk-L2YLNWCQ.cjs');
-var chunkQ5PJKBX7_cjs = require('../../chunk-Q5PJKBX7.cjs');
-var chunk7NUXYKXU_cjs = require('../../chunk-7NUXYKXU.cjs');
-var chunk2MSGENAQ_cjs = require('../../chunk-2MSGENAQ.cjs');
 var chunkNIEFMP5V_cjs = require('../../chunk-NIEFMP5V.cjs');
 var chunkTYZHIBYI_cjs = require('../../chunk-TYZHIBYI.cjs');
 var chunk6D66V6ON_cjs = require('../../chunk-6D66V6ON.cjs');
 var chunkAW6Q4IWT_cjs = require('../../chunk-AW6Q4IWT.cjs');
 var chunk5VUM46YD_cjs = require('../../chunk-5VUM46YD.cjs');
-var chunkSU57ZAZJ_cjs = require('../../chunk-SU57ZAZJ.cjs');
+var chunkL2YLNWCQ_cjs = require('../../chunk-L2YLNWCQ.cjs');
+var chunkQ5PJKBX7_cjs = require('../../chunk-Q5PJKBX7.cjs');
 var chunkM45UXJWX_cjs = require('../../chunk-M45UXJWX.cjs');
 var chunkS5XJOGB4_cjs = require('../../chunk-S5XJOGB4.cjs');
+var chunk7NUXYKXU_cjs = require('../../chunk-7NUXYKXU.cjs');
+var chunk2MSGENAQ_cjs = require('../../chunk-2MSGENAQ.cjs');
+var chunkSU57ZAZJ_cjs = require('../../chunk-SU57ZAZJ.cjs');
+var chunkHS4MWXGK_cjs = require('../../chunk-HS4MWXGK.cjs');
 var chunkROY7233C_cjs = require('../../chunk-ROY7233C.cjs');
 var chunkKOMVGDDW_cjs = require('../../chunk-KOMVGDDW.cjs');
 var chunk4GVFCQGI_cjs = require('../../chunk-4GVFCQGI.cjs');
-var chunkZGS3VGGN_cjs = require('../../chunk-ZGS3VGGN.cjs');
-var chunkBTXD3NAG_cjs = require('../../chunk-BTXD3NAG.cjs');
 var chunk6IXKC64S_cjs = require('../../chunk-6IXKC64S.cjs');
+var chunkZGS3VGGN_cjs = require('../../chunk-ZGS3VGGN.cjs');
 var chunkWB43VEZA_cjs = require('../../chunk-WB43VEZA.cjs');
 require('../../chunk-RQH7ZAWF.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
@@ -35,22 +35,6 @@ require('../../chunk-OHIB3TEN.cjs');
 
 
 
-Object.defineProperty(exports, "TimeInput", {
-  enumerable: true,
-  get: function () { return chunkL2YLNWCQ_cjs.TimeInput; }
-});
-Object.defineProperty(exports, "Vec3Input", {
-  enumerable: true,
-  get: function () { return chunkQ5PJKBX7_cjs.Vec3Input; }
-});
-Object.defineProperty(exports, "EulerDegInput", {
-  enumerable: true,
-  get: function () { return chunk7NUXYKXU_cjs.EulerDegInput; }
-});
-Object.defineProperty(exports, "EulerInput", {
-  enumerable: true,
-  get: function () { return chunk2MSGENAQ_cjs.EulerInput; }
-});
 Object.defineProperty(exports, "EulerRadInput", {
   enumerable: true,
   get: function () { return chunkNIEFMP5V_cjs.EulerRadInput; }
@@ -71,9 +55,13 @@ Object.defineProperty(exports, "QuaternionInput", {
   enumerable: true,
   get: function () { return chunk5VUM46YD_cjs.QuaternionInput; }
 });
-Object.defineProperty(exports, "VectorInput", {
+Object.defineProperty(exports, "TimeInput", {
   enumerable: true,
-  get: function () { return chunkSU57ZAZJ_cjs.VectorInput; }
+  get: function () { return chunkL2YLNWCQ_cjs.TimeInput; }
+});
+Object.defineProperty(exports, "Vec3Input", {
+  enumerable: true,
+  get: function () { return chunkQ5PJKBX7_cjs.Vec3Input; }
 });
 Object.defineProperty(exports, "CmInput", {
   enumerable: true,
@@ -83,6 +71,22 @@ Object.defineProperty(exports, "DegInput", {
   enumerable: true,
   get: function () { return chunkS5XJOGB4_cjs.DegInput; }
 });
+Object.defineProperty(exports, "EulerDegInput", {
+  enumerable: true,
+  get: function () { return chunk7NUXYKXU_cjs.EulerDegInput; }
+});
+Object.defineProperty(exports, "EulerInput", {
+  enumerable: true,
+  get: function () { return chunk2MSGENAQ_cjs.EulerInput; }
+});
+Object.defineProperty(exports, "VectorInput", {
+  enumerable: true,
+  get: function () { return chunkSU57ZAZJ_cjs.VectorInput; }
+});
+Object.defineProperty(exports, "ColorInput", {
+  enumerable: true,
+  get: function () { return chunkHS4MWXGK_cjs.ColorInput; }
+});
 Object.defineProperty(exports, "PresetsInput", {
   enumerable: true,
   get: function () { return chunkROY7233C_cjs.PresetsInput; }
@@ -95,18 +99,14 @@ Object.defineProperty(exports, "RadInput", {
   enumerable: true,
   get: function () { return chunk4GVFCQGI_cjs.RadInput; }
 });
-Object.defineProperty(exports, "TextInput", {
-  enumerable: true,
-  get: function () { return chunkZGS3VGGN_cjs.TextInput; }
-});
-Object.defineProperty(exports, "ColorInput", {
-  enumerable: true,
-  get: function () { return chunkBTXD3NAG_cjs.ColorInput; }
-});
 Object.defineProperty(exports, "InputNumbers", {
   enumerable: true,
   get: function () { return chunk6IXKC64S_cjs.InputNumbers; }
 });
+Object.defineProperty(exports, "TextInput", {
+  enumerable: true,
+  get: function () { return chunkZGS3VGGN_cjs.TextInput; }
+});
 Object.defineProperty(exports, "Input", {
   enumerable: true,
   get: function () { return chunkWB43VEZA_cjs.InputRoot; }

package/dist/ui/inputs/index.mjs

@@ -1,23 +1,23 @@
 import '../../chunk-2KQRWXNO.mjs';
 import '../../chunk-AGRPGNME.mjs';
-export { TimeInput } from '../../chunk-Z4ZGX3NM.mjs';
-export { Vec3Input } from '../../chunk-AGHIJQAR.mjs';
-export { EulerDegInput } from '../../chunk-WQCVK4PG.mjs';
-export { EulerInput } from '../../chunk-KS5A3G7B.mjs';
 export { EulerRadInput } from '../../chunk-H2AJ2CLT.mjs';
 export { InchInput } from '../../chunk-ZRMDDK6J.mjs';
 export { IntInput } from '../../chunk-JH5NAW2V.mjs';
 export { KVectorInput } from '../../chunk-ACETEVZD.mjs';
 export { QuaternionInput } from '../../chunk-2SFB7HHW.mjs';
-export { VectorInput } from '../../chunk-ZDSN4IFT.mjs';
+export { TimeInput } from '../../chunk-Z4ZGX3NM.mjs';
+export { Vec3Input } from '../../chunk-AGHIJQAR.mjs';
 export { CmInput } from '../../chunk-ZEBAIL6F.mjs';
 export { DegInput } from '../../chunk-PTBMSYQQ.mjs';
+export { EulerDegInput } from '../../chunk-WQCVK4PG.mjs';
+export { EulerInput } from '../../chunk-KS5A3G7B.mjs';
+export { VectorInput } from '../../chunk-ZDSN4IFT.mjs';
+export { ColorInput } from '../../chunk-GD2LGCAN.mjs';
 export { PresetsInput } from '../../chunk-BCA45QEW.mjs';
 export { PresetsRadInput } from '../../chunk-BBWT5YO2.mjs';
 export { RadInput } from '../../chunk-TZBOF3XO.mjs';
-export { TextInput } from '../../chunk-7XXTMBF5.mjs';
-export { ColorInput } from '../../chunk-GSQE4JVF.mjs';
 export { InputNumbers } from '../../chunk-MGFG7EXC.mjs';
+export { TextInput } from '../../chunk-7XXTMBF5.mjs';
 export { InputRoot as Input, InputRoot, InputSlot } from '../../chunk-XMQULAAU.mjs';
 import '../../chunk-AAFU2FII.mjs';
 import '../../chunk-F7ZHPSLA.mjs';

package/dist/ui/inputs/number-inputs/index.cjs

@@ -1,18 +1,18 @@
 'use strict';
 
 require('../../../chunk-DECFNBXU.cjs');
-var chunkL2YLNWCQ_cjs = require('../../../chunk-L2YLNWCQ.cjs');
-var chunkQ5PJKBX7_cjs = require('../../../chunk-Q5PJKBX7.cjs');
-var chunk7NUXYKXU_cjs = require('../../../chunk-7NUXYKXU.cjs');
-var chunk2MSGENAQ_cjs = require('../../../chunk-2MSGENAQ.cjs');
 var chunkNIEFMP5V_cjs = require('../../../chunk-NIEFMP5V.cjs');
 var chunkTYZHIBYI_cjs = require('../../../chunk-TYZHIBYI.cjs');
 var chunk6D66V6ON_cjs = require('../../../chunk-6D66V6ON.cjs');
 var chunkAW6Q4IWT_cjs = require('../../../chunk-AW6Q4IWT.cjs');
 var chunk5VUM46YD_cjs = require('../../../chunk-5VUM46YD.cjs');
-var chunkSU57ZAZJ_cjs = require('../../../chunk-SU57ZAZJ.cjs');
+var chunkL2YLNWCQ_cjs = require('../../../chunk-L2YLNWCQ.cjs');
+var chunkQ5PJKBX7_cjs = require('../../../chunk-Q5PJKBX7.cjs');
 var chunkM45UXJWX_cjs = require('../../../chunk-M45UXJWX.cjs');
 var chunkS5XJOGB4_cjs = require('../../../chunk-S5XJOGB4.cjs');
+var chunk7NUXYKXU_cjs = require('../../../chunk-7NUXYKXU.cjs');
+var chunk2MSGENAQ_cjs = require('../../../chunk-2MSGENAQ.cjs');
+var chunkSU57ZAZJ_cjs = require('../../../chunk-SU57ZAZJ.cjs');
 var chunk4GVFCQGI_cjs = require('../../../chunk-4GVFCQGI.cjs');
 require('../../../chunk-6IXKC64S.cjs');
 require('../../../chunk-WB43VEZA.cjs');
@@ -29,22 +29,6 @@ require('../../../chunk-OHIB3TEN.cjs');
 
 
 
-Object.defineProperty(exports, "TimeInput", {
-  enumerable: true,
-  get: function () { return chunkL2YLNWCQ_cjs.TimeInput; }
-});
-Object.defineProperty(exports, "Vec3Input", {
-  enumerable: true,
-  get: function () { return chunkQ5PJKBX7_cjs.Vec3Input; }
-});
-Object.defineProperty(exports, "EulerDegInput", {
-  enumerable: true,
-  get: function () { return chunk7NUXYKXU_cjs.EulerDegInput; }
-});
-Object.defineProperty(exports, "EulerInput", {
-  enumerable: true,
-  get: function () { return chunk2MSGENAQ_cjs.EulerInput; }
-});
 Object.defineProperty(exports, "EulerRadInput", {
   enumerable: true,
   get: function () { return chunkNIEFMP5V_cjs.EulerRadInput; }
@@ -65,9 +49,13 @@ Object.defineProperty(exports, "QuaternionInput", {
   enumerable: true,
   get: function () { return chunk5VUM46YD_cjs.QuaternionInput; }
 });
-Object.defineProperty(exports, "VectorInput", {
+Object.defineProperty(exports, "TimeInput", {
   enumerable: true,
-  get: function () { return chunkSU57ZAZJ_cjs.VectorInput; }
+  get: function () { return chunkL2YLNWCQ_cjs.TimeInput; }
+});
+Object.defineProperty(exports, "Vec3Input", {
+  enumerable: true,
+  get: function () { return chunkQ5PJKBX7_cjs.Vec3Input; }
 });
 Object.defineProperty(exports, "CmInput", {
   enumerable: true,
@@ -77,6 +65,18 @@ Object.defineProperty(exports, "DegInput", {
   enumerable: true,
   get: function () { return chunkS5XJOGB4_cjs.DegInput; }
 });
+Object.defineProperty(exports, "EulerDegInput", {
+  enumerable: true,
+  get: function () { return chunk7NUXYKXU_cjs.EulerDegInput; }
+});
+Object.defineProperty(exports, "EulerInput", {
+  enumerable: true,
+  get: function () { return chunk2MSGENAQ_cjs.EulerInput; }
+});
+Object.defineProperty(exports, "VectorInput", {
+  enumerable: true,
+  get: function () { return chunkSU57ZAZJ_cjs.VectorInput; }
+});
 Object.defineProperty(exports, "RadInput", {
   enumerable: true,
   get: function () { return chunk4GVFCQGI_cjs.RadInput; }

package/dist/ui/inputs/number-inputs/index.mjs

@@ -1,16 +1,16 @@
 import '../../../chunk-AGRPGNME.mjs';
-export { TimeInput } from '../../../chunk-Z4ZGX3NM.mjs';
-export { Vec3Input } from '../../../chunk-AGHIJQAR.mjs';
-export { EulerDegInput } from '../../../chunk-WQCVK4PG.mjs';
-export { EulerInput } from '../../../chunk-KS5A3G7B.mjs';
 export { EulerRadInput } from '../../../chunk-H2AJ2CLT.mjs';
 export { InchInput } from '../../../chunk-ZRMDDK6J.mjs';
 export { IntInput } from '../../../chunk-JH5NAW2V.mjs';
 export { KVectorInput } from '../../../chunk-ACETEVZD.mjs';
 export { QuaternionInput } from '../../../chunk-2SFB7HHW.mjs';
-export { VectorInput } from '../../../chunk-ZDSN4IFT.mjs';
+export { TimeInput } from '../../../chunk-Z4ZGX3NM.mjs';
+export { Vec3Input } from '../../../chunk-AGHIJQAR.mjs';
 export { CmInput } from '../../../chunk-ZEBAIL6F.mjs';
 export { DegInput } from '../../../chunk-PTBMSYQQ.mjs';
+export { EulerDegInput } from '../../../chunk-WQCVK4PG.mjs';
+export { EulerInput } from '../../../chunk-KS5A3G7B.mjs';
+export { VectorInput } from '../../../chunk-ZDSN4IFT.mjs';
 export { RadInput } from '../../../chunk-TZBOF3XO.mjs';
 import '../../../chunk-MGFG7EXC.mjs';
 import '../../../chunk-XMQULAAU.mjs';

package/dist/ui/layout.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkLPKVKTOK_cjs = require('../chunk-LPKVKTOK.cjs');
+var chunkUASPJ57U_cjs = require('../chunk-UASPJ57U.cjs');
 require('../chunk-QN4N4I3Z.cjs');
 require('../chunk-Q7E73DVJ.cjs');
 require('../chunk-JR4TVE43.cjs');
@@ -16,5 +16,5 @@ require('../chunk-OHIB3TEN.cjs');
 
 Object.defineProperty(exports, "FormLayout", {
   enumerable: true,
-  get: function () { return chunkLPKVKTOK_cjs.FormLayout; }
+  get: function () { return chunkUASPJ57U_cjs.FormLayout; }
 });

package/dist/ui/layout.mjs

@@ -1,4 +1,4 @@
-export { FormLayout } from '../chunk-FB5MYIVE.mjs';
+export { FormLayout } from '../chunk-NRQJX772.mjs';
 import '../chunk-F7ZHPSLA.mjs';
 import '../chunk-3QT5VABC.mjs';
 import '../chunk-XHJDRQD7.mjs';

package/dist/ui/layouts/index.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
 require('../../chunk-E6G4MTX3.cjs');
+require('../../chunk-WX7SLJUA.cjs');
 require('../../chunk-4AE2TOOL.cjs');
 var chunkA5VRTIX4_cjs = require('../../chunk-A5VRTIX4.cjs');
-require('../../chunk-WX7SLJUA.cjs');
+require('../../chunk-BFFOS7Z3.cjs');
 var chunkLBGZKACW_cjs = require('../../chunk-LBGZKACW.cjs');
 var chunkUULSGVNF_cjs = require('../../chunk-UULSGVNF.cjs');
-require('../../chunk-BFFOS7Z3.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
 require('../../chunk-JR4TVE43.cjs');

package/dist/ui/layouts/index.mjs

@@ -1,10 +1,10 @@
 import '../../chunk-IGTUE4NW.mjs';
+import '../../chunk-4QFWMPJZ.mjs';
 import '../../chunk-EPRRJR2S.mjs';
 export { LiquidLayoutView } from '../../chunk-4JAEMFDN.mjs';
-import '../../chunk-4QFWMPJZ.mjs';
+import '../../chunk-2X6CAFVD.mjs';
 export { DockLayoutView } from '../../chunk-M6JLGVJ7.mjs';
 export { DockLayout, DockLayoutBottom, DockLayoutContent, DockLayoutLeft, DockLayoutRight, DockLayoutTop } from '../../chunk-3LO3AM25.mjs';
-import '../../chunk-2X6CAFVD.mjs';
 import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-3QT5VABC.mjs';
 import '../../chunk-XHJDRQD7.mjs';

package/dist/ui/waterfall/index.cjs

@@ -1,8 +1,9 @@
 'use strict';
 
-var chunkLTEX2ALU_cjs = require('../../chunk-LTEX2ALU.cjs');
+var chunkGPUZJ6OU_cjs = require('../../chunk-GPUZJ6OU.cjs');
 require('../../chunk-WJL5HMO6.cjs');
 require('../../chunk-RJ7I6ZQK.cjs');
+require('../../chunk-YXFHJKNW.cjs');
 require('../../chunk-5MNZYCN2.cjs');
 require('../../chunk-Z6UDRPC2.cjs');
 require('../../chunk-YJ6X6T5K.cjs');
@@ -13,7 +14,6 @@ require('../../chunk-UTS56UA5.cjs');
 require('../../chunk-JWVH6R35.cjs');
 require('../../chunk-MVAFOQ67.cjs');
 require('../../chunk-TUYG6BYZ.cjs');
-require('../../chunk-YXFHJKNW.cjs');
 var chunkG2ZYONQO_cjs = require('../../chunk-G2ZYONQO.cjs');
 require('../../chunk-H3HQ27FG.cjs');
 require('../../chunk-HAVTMZR3.cjs');
@@ -38,7 +38,7 @@ require('../../chunk-G4FJGNY5.cjs');
 
 Object.defineProperty(exports, "Waterfall", {
   enumerable: true,
-  get: function () { return chunkLTEX2ALU_cjs.Waterfall; }
+  get: function () { return chunkGPUZJ6OU_cjs.Waterfall; }
 });
 Object.defineProperty(exports, "TOTAL_DURATION", {
   enumerable: true,

package/dist/ui/waterfall/index.mjs

@@ -1,6 +1,7 @@
-export { Waterfall } from '../../chunk-D76UQR5N.mjs';
+export { Waterfall } from '../../chunk-BLU6XYCT.mjs';
 import '../../chunk-JWKOW2OV.mjs';
 import '../../chunk-VPQ5SSY3.mjs';
+import '../../chunk-CO6EASQO.mjs';
 import '../../chunk-IR334P7F.mjs';
 import '../../chunk-CIPI2V54.mjs';
 import '../../chunk-WPDU2YYR.mjs';
@@ -11,7 +12,6 @@ import '../../chunk-D5H4XX6Q.mjs';
 import '../../chunk-JVV7W3TP.mjs';
 import '../../chunk-OC4HRPZU.mjs';
 import '../../chunk-N6DSPSMM.mjs';
-import '../../chunk-CO6EASQO.mjs';
 export { TOTAL_DURATION, borderColorClasses, colorClasses, formatDuration, leftWedgeClasses, rightWedgeClasses } from '../../chunk-4U232QAX.mjs';
 import '../../chunk-PNYJJGBP.mjs';
 import '../../chunk-VQPJ7TLB.mjs';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuer-ai/vuer-uikit",
   "author": "Ge Yang",
-  "version": "0.0.114",
+  "version": "0.0.117",
   "files": [
     "/dist",
     "/src"

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

@@ -1,10 +1,9 @@
 import React, { PropsWithChildren, ReactElement, ReactNode, useCallback } from "react";
-import { LabelPositionT, useDialSchema } from "../DialProvider";
+
 import {
   ColorInput,
   FormLayout,
-  Input,
-  InputSlot,
+  InputNumbers,
   Label,
   type LayoutType,
   Select,
@@ -15,6 +14,7 @@ import {
   Slider,
   Switch,
 } from "../../index"; // Base input component that connects to the dial store
+import { LabelPositionT, useDialSchema } from "../DialProvider";
 
 // Helper component for wrapping inputs with labels
 const DialInputWrapper: React.FC<{
@@ -46,7 +46,7 @@ export interface DialNumInputProps extends PropsWithChildren {
   size?: "sm" | "md" | "lg";
 }
 
-// Base input component that connects to the dial store
+// Base input component that connects to the dial store using InputNumbers for drag support
 export const DialNumberInput: React.FC<DialNumInputProps> = ({
   name,
   min,
@@ -60,29 +60,32 @@ export const DialNumberInput: React.FC<DialNumInputProps> = ({
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? 0) as number;
 
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => setValue(name, parseFloat(e.target.value)),
-    [name],
+  const handleValuesChange = useCallback(
+    (values: number[]) => {
+      const newValue = values[0];
+      if (!isNaN(newValue)) {
+        setValue(name, newValue);
+      }
+    },
+    [name, setValue],
   );
 
-  const inputProps = {
-    type: "number" as const,
-    value,
+  const inputNumbersProps = {
+    value: [value],
+    onValuesChange: handleValuesChange,
     min,
     max,
     step,
-    onChange: handleChange,
     size,
+    prefix: labelPosition === "inline" && label ? [label] : undefined,
   };
 
   if (labelPosition === "inline") {
-    return (
-      <Input {...inputProps}>{label ? <InputSlot side="left">{label}</InputSlot> : null}</Input>
-    );
+    return <InputNumbers {...inputNumbersProps} />;
   } else {
     return (
       <DialInputWrapper label={label} labelPosition={labelPosition} {...props}>
-        <Input {...inputProps} />
+        <InputNumbers {...inputNumbersProps} />
       </DialInputWrapper>
     );
   }
@@ -144,8 +147,6 @@ export const DialSelectInput: React.FC<DialNumInputProps> = ({
   const { getValue, setValue } = useDialSchema();
   const value = getValue(name);
 
-  console.log("dial schema:", name, value);
-
   const handleValueChange = useCallback(
     (val: string) => {
       // Try to parse as number if possible

package/src/ui/inputs/color-input.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, forwardRef, useState } from "react";
+import { ChangeEvent, forwardRef, useState, useEffect } from "react";
 
 import { InputRoot, InputRootProps, InputSlot } from "./input";
 import { cn } from "../../hooks";
@@ -11,7 +11,23 @@ const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(function ColorI
   { className, value, defaultValue, onChange, ...props },
   ref,
 ) {
-  const [color, setColor] = useState(value || defaultValue || "ffffff");
+  // Normalize the initial value by removing any leading # if present
+  const normalizeColor = (colorValue: string | number | readonly string[] | undefined) => {
+    if (typeof colorValue === "string") {
+      return colorValue.replace(/^#/, "");
+    }
+    return colorValue || "ffffff";
+  };
+
+  const [color, setColor] = useState(normalizeColor(value || defaultValue));
+
+  // Update local state when prop value changes
+  useEffect(() => {
+    if (value !== undefined) {
+      setColor(normalizeColor(value));
+    }
+  }, [value]);
+
   return (
     <div className="gap-sm flex">
       <input

package/src/ui/layout.tsx

@@ -23,7 +23,6 @@ export function FormLayout({
   children,
 }: FormLayoutProps) {
   const Com = asChild ? Slot : "div";
-  console.log("layout", orientation);
 
   return (
     <Com

package/dist/{chunk-D76UQR5N.mjs → chunk-BLU6XYCT.mjs}

@@ -1,5 +1,6 @@
 import { useTimelineState } from './chunk-JWKOW2OV.mjs';
 import { useViewport } from './chunk-VPQ5SSY3.mjs';
+import { TimelineProcessBar } from './chunk-CO6EASQO.mjs';
 import { LeftWedge, RightWedge } from './chunk-IR334P7F.mjs';
 import { WheelZoomContext } from './chunk-CIPI2V54.mjs';
 import { CursorOverlay } from './chunk-SA5WKLYB.mjs';
@@ -7,7 +8,6 @@ import { NavigationControls } from './chunk-D5H4XX6Q.mjs';
 import { Tick } from './chunk-JVV7W3TP.mjs';
 import { TimeRuleEventDot } from './chunk-OC4HRPZU.mjs';
 import { TimelineEvent } from './chunk-N6DSPSMM.mjs';
-import { TimelineProcessBar } from './chunk-CO6EASQO.mjs';
 import { rightWedgeClasses, leftWedgeClasses, TOTAL_DURATION } from './chunk-4U232QAX.mjs';
 import { TreeSearchBar } from './chunk-PNYJJGBP.mjs';
 import { TreeView } from './chunk-VQPJ7TLB.mjs';

package/dist/{chunk-LTEX2ALU.cjs → chunk-GPUZJ6OU.cjs}

@@ -2,6 +2,7 @@
 
 var chunkWJL5HMO6_cjs = require('./chunk-WJL5HMO6.cjs');
 var chunkRJ7I6ZQK_cjs = require('./chunk-RJ7I6ZQK.cjs');
+var chunkYXFHJKNW_cjs = require('./chunk-YXFHJKNW.cjs');
 var chunk5MNZYCN2_cjs = require('./chunk-5MNZYCN2.cjs');
 var chunkZ6UDRPC2_cjs = require('./chunk-Z6UDRPC2.cjs');
 var chunk2J75MYQA_cjs = require('./chunk-2J75MYQA.cjs');
@@ -9,7 +10,6 @@ var chunkUTS56UA5_cjs = require('./chunk-UTS56UA5.cjs');
 var chunkJWVH6R35_cjs = require('./chunk-JWVH6R35.cjs');
 var chunkMVAFOQ67_cjs = require('./chunk-MVAFOQ67.cjs');
 var chunkTUYG6BYZ_cjs = require('./chunk-TUYG6BYZ.cjs');
-var chunkYXFHJKNW_cjs = require('./chunk-YXFHJKNW.cjs');
 var chunkG2ZYONQO_cjs = require('./chunk-G2ZYONQO.cjs');
 var chunkH3HQ27FG_cjs = require('./chunk-H3HQ27FG.cjs');
 var chunkHAVTMZR3_cjs = require('./chunk-HAVTMZR3.cjs');