@vuer-ai/vuer-uikit 0.0.119 → 0.0.121

package/dist/ui/waterfall/TimelineEvent.cjs

@@ -1,21 +1,21 @@
 'use strict';
 
-var chunkRW4T7UBU_cjs = require('../../chunk-RW4T7UBU.cjs');
+var chunkSTJMH4NX_cjs = require('../../chunk-STJMH4NX.cjs');
 require('../../chunk-G2ZYONQO.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-LBWMTA5T.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
-require('../../chunk-JR4TVE43.cjs');
+require('../../chunk-DVUN6GQI.cjs');
 require('../../chunk-VXZURKMQ.cjs');
 require('../../chunk-Q4XH2Z5M.cjs');
 require('../../chunk-6BOWMGFG.cjs');
 require('../../chunk-YZIR6LIY.cjs');
-require('../../chunk-RPTRTGC2.cjs');
-require('../../chunk-CRX2ZCM2.cjs');
+require('../../chunk-GEGPGQVH.cjs');
+require('../../chunk-6LTCLQH3.cjs');
 
 
 
 Object.defineProperty(exports, "TimelineEvent", {
   enumerable: true,
-  get: function () { return chunkRW4T7UBU_cjs.TimelineEvent; }
+  get: function () { return chunkSTJMH4NX_cjs.TimelineEvent; }
 });

package/dist/ui/waterfall/TimelineEvent.mjs

@@ -1,12 +1,12 @@
-export { TimelineEvent } from '../../chunk-K2ZYSKRU.mjs';
+export { TimelineEvent } from '../../chunk-EZ536NLQ.mjs';
 import '../../chunk-4U232QAX.mjs';
 import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-IDUVYPN7.mjs';
 import '../../chunk-3QT5VABC.mjs';
-import '../../chunk-XHJDRQD7.mjs';
+import '../../chunk-H3JRYX2U.mjs';
 import '../../chunk-LQOPO4KU.mjs';
 import '../../chunk-U3LN5NB6.mjs';
 import '../../chunk-IZARTVYN.mjs';
 import '../../chunk-VA4LUFKD.mjs';
-import '../../chunk-4F2GSF2T.mjs';
-import '../../chunk-T66ETI7E.mjs';
+import '../../chunk-4NABYVCK.mjs';
+import '../../chunk-HBEU2PU2.mjs';

package/dist/ui/waterfall/TimelineProcessBar.cjs

@@ -1,21 +1,21 @@
 'use strict';
 
-var chunk7H7U2X45_cjs = require('../../chunk-7H7U2X45.cjs');
+var chunkO3DFVRON_cjs = require('../../chunk-O3DFVRON.cjs');
 require('../../chunk-G2ZYONQO.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-LBWMTA5T.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
-require('../../chunk-JR4TVE43.cjs');
+require('../../chunk-DVUN6GQI.cjs');
 require('../../chunk-VXZURKMQ.cjs');
 require('../../chunk-Q4XH2Z5M.cjs');
 require('../../chunk-6BOWMGFG.cjs');
 require('../../chunk-YZIR6LIY.cjs');
-require('../../chunk-RPTRTGC2.cjs');
-require('../../chunk-CRX2ZCM2.cjs');
+require('../../chunk-GEGPGQVH.cjs');
+require('../../chunk-6LTCLQH3.cjs');
 
 
 
 Object.defineProperty(exports, "TimelineProcessBar", {
   enumerable: true,
-  get: function () { return chunk7H7U2X45_cjs.TimelineProcessBar; }
+  get: function () { return chunkO3DFVRON_cjs.TimelineProcessBar; }
 });

package/dist/ui/waterfall/TimelineProcessBar.mjs

@@ -1,12 +1,12 @@
-export { TimelineProcessBar } from '../../chunk-FMKD5JBL.mjs';
+export { TimelineProcessBar } from '../../chunk-7TD77VF4.mjs';
 import '../../chunk-4U232QAX.mjs';
 import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-IDUVYPN7.mjs';
 import '../../chunk-3QT5VABC.mjs';
-import '../../chunk-XHJDRQD7.mjs';
+import '../../chunk-H3JRYX2U.mjs';
 import '../../chunk-LQOPO4KU.mjs';
 import '../../chunk-U3LN5NB6.mjs';
 import '../../chunk-IZARTVYN.mjs';
 import '../../chunk-VA4LUFKD.mjs';
-import '../../chunk-4F2GSF2T.mjs';
-import '../../chunk-T66ETI7E.mjs';
+import '../../chunk-4NABYVCK.mjs';
+import '../../chunk-HBEU2PU2.mjs';

package/dist/ui/waterfall/Wedges.cjs

@@ -1,24 +1,24 @@
 'use strict';
 
-var chunkQWBMDS3S_cjs = require('../../chunk-QWBMDS3S.cjs');
+var chunk5HT74RHB_cjs = require('../../chunk-5HT74RHB.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-LBWMTA5T.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
-require('../../chunk-JR4TVE43.cjs');
+require('../../chunk-DVUN6GQI.cjs');
 require('../../chunk-VXZURKMQ.cjs');
 require('../../chunk-Q4XH2Z5M.cjs');
 require('../../chunk-6BOWMGFG.cjs');
 require('../../chunk-YZIR6LIY.cjs');
-require('../../chunk-RPTRTGC2.cjs');
-require('../../chunk-CRX2ZCM2.cjs');
+require('../../chunk-GEGPGQVH.cjs');
+require('../../chunk-6LTCLQH3.cjs');
 
 
 
 Object.defineProperty(exports, "LeftWedge", {
   enumerable: true,
-  get: function () { return chunkQWBMDS3S_cjs.LeftWedge; }
+  get: function () { return chunk5HT74RHB_cjs.LeftWedge; }
 });
 Object.defineProperty(exports, "RightWedge", {
   enumerable: true,
-  get: function () { return chunkQWBMDS3S_cjs.RightWedge; }
+  get: function () { return chunk5HT74RHB_cjs.RightWedge; }
 });

package/dist/ui/waterfall/Wedges.mjs

@@ -1,11 +1,11 @@
-export { LeftWedge, RightWedge } from '../../chunk-ZSAPBZ36.mjs';
+export { LeftWedge, RightWedge } from '../../chunk-OW653F7T.mjs';
 import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-IDUVYPN7.mjs';
 import '../../chunk-3QT5VABC.mjs';
-import '../../chunk-XHJDRQD7.mjs';
+import '../../chunk-H3JRYX2U.mjs';
 import '../../chunk-LQOPO4KU.mjs';
 import '../../chunk-U3LN5NB6.mjs';
 import '../../chunk-IZARTVYN.mjs';
 import '../../chunk-VA4LUFKD.mjs';
-import '../../chunk-4F2GSF2T.mjs';
-import '../../chunk-T66ETI7E.mjs';
+import '../../chunk-4NABYVCK.mjs';
+import '../../chunk-HBEU2PU2.mjs';

package/dist/ui/waterfall/index.cjs

@@ -1,44 +1,45 @@
 'use strict';
 
-var chunk6D7FGGSX_cjs = require('../../chunk-6D7FGGSX.cjs');
+var chunkMMQR4IEY_cjs = require('../../chunk-MMQR4IEY.cjs');
 require('../../chunk-WJL5HMO6.cjs');
 require('../../chunk-RJ7I6ZQK.cjs');
-require('../../chunk-7H7U2X45.cjs');
-require('../../chunk-QWBMDS3S.cjs');
+require('../../chunk-STJMH4NX.cjs');
+require('../../chunk-O3DFVRON.cjs');
+require('../../chunk-5HT74RHB.cjs');
 require('../../chunk-Z6UDRPC2.cjs');
 require('../../chunk-YJ6X6T5K.cjs');
 require('../../chunk-G5NT42YF.cjs');
-require('../../chunk-EEGQLTSQ.cjs');
+require('../../chunk-UFYHIDMC.cjs');
+require('../../chunk-4WWGBRQV.cjs');
 require('../../chunk-VOTZLQ6J.cjs');
-require('../../chunk-S37MJNNP.cjs');
+require('../../chunk-OCADGDGL.cjs');
 require('../../chunk-UTS56UA5.cjs');
+var chunkG2ZYONQO_cjs = require('../../chunk-G2ZYONQO.cjs');
 require('../../chunk-JWVH6R35.cjs');
 require('../../chunk-MVAFOQ67.cjs');
-require('../../chunk-RW4T7UBU.cjs');
-var chunkG2ZYONQO_cjs = require('../../chunk-G2ZYONQO.cjs');
-require('../../chunk-LYGYXV7S.cjs');
-require('../../chunk-EK3BTKZP.cjs');
-require('../../chunk-JNV3UBBP.cjs');
-require('../../chunk-F3HOBNGR.cjs');
+require('../../chunk-7ICRKPIO.cjs');
+require('../../chunk-NIACIZWY.cjs');
+require('../../chunk-T2BDPMCF.cjs');
+require('../../chunk-PMG3NZF5.cjs');
 require('../../chunk-JMCH2AFN.cjs');
-require('../../chunk-W3IHFG4B.cjs');
+require('../../chunk-ZG33TW5I.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
 require('../../chunk-LBWMTA5T.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
-require('../../chunk-JR4TVE43.cjs');
+require('../../chunk-DVUN6GQI.cjs');
 require('../../chunk-VXZURKMQ.cjs');
 require('../../chunk-Q4XH2Z5M.cjs');
 require('../../chunk-6BOWMGFG.cjs');
 require('../../chunk-YZIR6LIY.cjs');
-require('../../chunk-RPTRTGC2.cjs');
-require('../../chunk-CRX2ZCM2.cjs');
+require('../../chunk-GEGPGQVH.cjs');
+require('../../chunk-6LTCLQH3.cjs');
 require('../../chunk-G4FJGNY5.cjs');
 
 
 
 Object.defineProperty(exports, "Waterfall", {
   enumerable: true,
-  get: function () { return chunk6D7FGGSX_cjs.Waterfall; }
+  get: function () { return chunkMMQR4IEY_cjs.Waterfall; }
 });
 Object.defineProperty(exports, "TOTAL_DURATION", {
   enumerable: true,

package/dist/ui/waterfall/index.mjs

@@ -1,33 +1,34 @@
-export { Waterfall } from '../../chunk-MYZHDWBF.mjs';
+export { Waterfall } from '../../chunk-LJYIEOGQ.mjs';
 import '../../chunk-JWKOW2OV.mjs';
 import '../../chunk-VPQ5SSY3.mjs';
-import '../../chunk-FMKD5JBL.mjs';
-import '../../chunk-ZSAPBZ36.mjs';
+import '../../chunk-EZ536NLQ.mjs';
+import '../../chunk-7TD77VF4.mjs';
+import '../../chunk-OW653F7T.mjs';
 import '../../chunk-CIPI2V54.mjs';
 import '../../chunk-WPDU2YYR.mjs';
 import '../../chunk-HVVT3D2T.mjs';
-import '../../chunk-PC5DHSC4.mjs';
+import '../../chunk-7RRQ2HHL.mjs';
+import '../../chunk-NKUK73WB.mjs';
 import '../../chunk-HTAFERCZ.mjs';
-import '../../chunk-AHD46BFN.mjs';
+import '../../chunk-ZQOQB6GF.mjs';
 import '../../chunk-D5H4XX6Q.mjs';
+export { TOTAL_DURATION, borderColorClasses, colorClasses, formatDuration, leftWedgeClasses, rightWedgeClasses } from '../../chunk-4U232QAX.mjs';
 import '../../chunk-JVV7W3TP.mjs';
 import '../../chunk-OC4HRPZU.mjs';
-import '../../chunk-K2ZYSKRU.mjs';
-export { TOTAL_DURATION, borderColorClasses, colorClasses, formatDuration, leftWedgeClasses, rightWedgeClasses } from '../../chunk-4U232QAX.mjs';
-import '../../chunk-SRZ56OJH.mjs';
-import '../../chunk-Q37KC3CL.mjs';
-import '../../chunk-UQQBUPGF.mjs';
-import '../../chunk-SMXN2KOV.mjs';
+import '../../chunk-XZTEU7ME.mjs';
+import '../../chunk-IPMWGCAI.mjs';
+import '../../chunk-4Y5IF7R5.mjs';
+import '../../chunk-HGTL7DFT.mjs';
 import '../../chunk-BNDRHLLZ.mjs';
-import '../../chunk-T4U3BG2V.mjs';
+import '../../chunk-EGJLY5VZ.mjs';
 import '../../chunk-F7ZHPSLA.mjs';
 import '../../chunk-IDUVYPN7.mjs';
 import '../../chunk-3QT5VABC.mjs';
-import '../../chunk-XHJDRQD7.mjs';
+import '../../chunk-H3JRYX2U.mjs';
 import '../../chunk-LQOPO4KU.mjs';
 import '../../chunk-U3LN5NB6.mjs';
 import '../../chunk-IZARTVYN.mjs';
 import '../../chunk-VA4LUFKD.mjs';
-import '../../chunk-4F2GSF2T.mjs';
-import '../../chunk-T66ETI7E.mjs';
+import '../../chunk-4NABYVCK.mjs';
+import '../../chunk-HBEU2PU2.mjs';
 import '../../chunk-SAGQV2YZ.mjs';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuer-ai/vuer-uikit",
   "author": "Ge Yang",
-  "version": "0.0.119",
+  "version": "0.0.121",
   "files": [
     "/dist",
     "/src"
@@ -67,6 +67,7 @@
     "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-compose-refs": "^1.1.2",
+    "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-dropdown-menu": "^2.1.5",
     "@radix-ui/react-label": "^2.1.7",

package/src/auth/components/index.ts

@@ -1 +1 @@
-export * from "./user-avatar"
+export * from "./user-avatar";

package/src/dial/DialPanel.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { DialGroupConfig, DialSchema, LabelPositionT } from "./DialProvider";
+import type { GroupSchema, DialSchema, LabelPositionT } from "./types";
 import {
   DialBooleanInput,
   DialColorInput,
@@ -16,20 +16,55 @@ import {
   DialVec3Input,
   DialVectorInput,
 } from "./wrapped-inputs";
+import { DialInterfaceInput } from "./wrapped-inputs/DialInterfaceInput";
 
 interface DialSchemaRendererProps {
   schemas: DialSchema[];
-  groups?: DialGroupConfig[];
+  groups?: GroupSchema[];
   labelLayout?: LabelPositionT;
 }
 
+/**
+ * Generate dynamic styles based on GroupSchema
+ * Default layout: grid with 1 column
+ */
+const generateGroupStyle = (config?: GroupSchema): React.CSSProperties => {
+  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)`
+          : undefined,
+    };
+  }
+
+  // Flex layout
+  return {
+    display: "flex",
+    gap: "0.5rem",
+    flexWrap: config?.flexWrap ?? "wrap",
+    justifyContent: config?.flexJustifyContent,
+  };
+};
+
 export const DialPanel: React.FC<DialSchemaRendererProps> = ({
   schemas,
   groups: groupConfigs,
   labelLayout,
 }) => {
   // Create a map of group configurations for easy lookup
-  const groupConfigMap: Record<string, DialGroupConfig> = {};
+  const groupConfigMap: Record<string, GroupSchema> = {};
 
   // First, populate from explicit groups prop if provided
   if (groupConfigs) {
@@ -38,25 +73,12 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
     });
   }
 
-  // Then, analyze schemas to build group configs from tags if not already defined
-  schemas.forEach((schema) => {
-    const grouping = schema.tags?.grouping;
-    if (grouping && !groupConfigMap[grouping]) {
-      // Initialize group config if it doesn't exist
-      groupConfigMap[grouping] = { name: grouping };
-    }
-    // Check if this schema has noWrap tag and apply it to the group
-    if (grouping && schema.tags?.noWrap && groupConfigMap[grouping]) {
-      groupConfigMap[grouping].noWrap = true;
-    }
-  });
-
   // Group schemas by their grouping tag
   const groupedSchemas: Record<string, DialSchema[]> = {};
   const ungrouped: DialSchema[] = [];
 
   schemas.forEach((schema) => {
-    const grouping = schema.tags?.grouping;
+    const grouping = schema?.grouping;
     if (grouping) {
       if (!groupedSchemas[grouping]) {
         groupedSchemas[grouping] = [];
@@ -69,13 +91,17 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
 
   // Render a single schema item as an input component
   const renderSchemaInput = (schema: DialSchema) => {
-    const { name, dtype, icon, min, max, step, options, tags } = schema;
+    const { name, dtype, icon, min, max, step, options } = schema;
     // Use schema's label position if specified, otherwise fall back to panel's labelLayout prop
-    const effectiveLabelPosition = (tags?.labelPosition as LabelPositionT) || labelLayout;
+    const effectiveLabelPosition = (schema?.labelPosition as LabelPositionT) || labelLayout;
     const label = schema.label || name.charAt(0).toUpperCase() + name.slice(1);
 
     // Choose the right input component based on dtype
     switch (dtype) {
+      case "interface":
+      case "object":
+        return <DialInterfaceInput name={name} />;
+
       case "vector3":
         return (
           <DialVec3Input
@@ -198,7 +224,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
               key={name}
               name={name}
               label={label}
-              options={options}
+              options={options as string[]}
               labelPosition={effectiveLabelPosition}
               icon={icon}
             />
@@ -224,6 +250,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
 
       case "string":
       case "text":
+      case "select":
         // If options are provided, use select
         if (options && options.length > 0) {
           return (
@@ -260,16 +287,14 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
       {Object.entries(groupedSchemas).map(([name, schemaList]) => {
         // Use group configuration
         const groupConfig = groupConfigMap[name];
-        const hasNoWrap = groupConfig?.noWrap;
-
-        // Determine grid columns - default to 3 columns
-        // If noWrap is true, use single row flex layout for backward compatibility
-        const layoutClass = hasNoWrap ? "grid grid-cols-2 gap-2" : "flex flex-row gap-2";
+        const groupStyle = generateGroupStyle(groupConfig);
 
         return (
           <div key={name} className="dial-group">
-            <div className="text-text-primary mb-2 font-medium">{name}</div>
-            <div className={`dial-row ${layoutClass}`}>{schemaList.map(renderSchemaInput)}</div>
+            <div className="text-text-primary mb-2 font-medium capitalize">{name}</div>
+            <div className="dial-row" style={groupStyle}>
+              {schemaList.map(renderSchemaInput)}
+            </div>
           </div>
         );
       })}
@@ -280,7 +305,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
           {/*<h3 className="text-sm font-semibold text-text-primary mb-2">*/}
           {/*  General*/}
           {/*</h3>*/}
-          <div className="dial-row grid grid-cols-3 gap-2">{ungrouped.map(renderSchemaInput)}</div>
+          <div className="dial-row grid grid-cols-1 gap-2">{ungrouped.map(renderSchemaInput)}</div>
         </div>
       )}
     </div>

package/src/dial/DialProvider.tsx

@@ -1,68 +1,17 @@
-import React, { createContext, ReactNode, useCallback, useContext, useMemo, useState } from "react";
+import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
+
+import type { DialValue, DialSchema } from "./types";
 
 // Utility to check if an object is empty or nullish
 function isEmptyObject(obj: unknown): boolean {
   return obj == null || (typeof obj === "object" && Object.keys(obj).length === 0);
 }
 
-export type LabelPositionT = "left" | "top" | "inline" | undefined;
-
-// Define specific value types for dial values
-export type DialValue =
-  | string
-  | number
-  | boolean
-  | number[]
-  | string[]
-  | (boolean | number | string)[]
-  | null
-  | undefined;
-
-// Types for the dial schema
-export interface DialSchema {
-  name: string;
-  dtype: string;
-  value?: DialValue;
-  min?: number;
-  max?: number;
-  step?: number;
-  options?: Array<string | number | { label: string; value: string | number }>;
-  dimensions?: number;
-  placeholders?: string[];
-  tooltips?: string[];
-  dtypes?: string[];
-  mins?: number[];
-  maxs?: number[];
-  steps?: number[];
-  helpText?: string;
-  icon?: string;
-  label?: string;
-  tags?: {
-    grouping?: string;
-    col?: boolean | number;
-    row?: number;
-    layout?: string;
-    labelPosition?: LabelPositionT;
-    noWrap?: boolean;
-  };
-}
-
-// Group configuration interface
-export interface DialGroupConfig {
-  name: string;
-  noWrap?: boolean;
-  [key: string]: unknown;
-}
-
-export interface DialSchemaGroup {
-  component: string;
-  schemas: DialSchema[];
-  groups?: DialGroupConfig[];
-}
-
-// Context type
-interface DialContextValue {
-  values: Record<string, DialValue>;
+/**
+ * Context value for dial schema provider
+ */
+export interface DialContextValue {
+  values: Record<string, unknown>;
   schemas: DialSchema[];
   getValue: (name: string) => DialValue;
   setValue: (name: string, value: DialValue) => void;
@@ -81,12 +30,15 @@ export const useDialSchema = () => {
   return context;
 };
 
-interface DialSchemaProviderProps {
-  children: ReactNode;
+/**
+ * Props for DialProvider component
+ */
+export interface DialProviderProps {
+  children: React.ReactNode;
   schemas: DialSchema[];
-  initialValues?: Record<string, DialValue>;
-  values?: Record<string, DialValue>; // For controlled mode
-  onValueChange?: (name: string, value: DialValue) => void;
+  initialValues?: Record<string, unknown>;
+  values?: Record<string, unknown>; // For controlled mode
+  onValueChange?: (name: string, value: unknown) => void;
 }
 
 // Provider component
@@ -96,12 +48,12 @@ export const DialProvider = ({
   initialValues = {},
   values: controlledValues,
   onValueChange,
-}: DialSchemaProviderProps) => {
+}: DialProviderProps) => {
   // Determine if component is controlled
   const isControlled = !isEmptyObject(controlledValues);
 
   // Initialize state with default values from schemas or provided initial values
-  const [internalValues, setInternalValues] = useState<Record<string, DialValue>>(() =>
+  const [internalValues, setInternalValues] = useState<Record<string, unknown>>(() =>
     Object.fromEntries(
       schemas.map((schema) => [schema.name, initialValues[schema.name] ?? schema.value]),
     ),
@@ -109,7 +61,7 @@ export const DialProvider = ({
 
   // Helper function to merge controlled values with schema defaults
   const mergeWithSchemaDefaults = useCallback(
-    (inputValues: Record<string, DialValue>) => {
+    (inputValues: Record<string, unknown>) => {
       const result = { ...inputValues };
 
       schemas.forEach((schema) => {
@@ -139,7 +91,7 @@ export const DialProvider = ({
 
   // Helper function to format values based on their type
   const formatValue = useCallback(
-    (value: DialValue): DialValue => {
+    (value: unknown): DialValue => {
       if (value === null || value === undefined) {
         return value;
       }

package/src/dial/index.ts

@@ -1,8 +1,10 @@
 // Core dial components
-export { DialProvider, useDialSchema } from './DialProvider';
-export type { DialSchema, DialSchemaGroup, DialGroupConfig, DialValue, LabelPositionT } from './DialProvider';
-export { DialPanel } from './DialPanel';
-export { IconRenderer } from './IconRenderer';
+export { DialProvider, useDialSchema } from "./DialProvider";
+
+// Export types from the types file
+export * from "./types";
+export { DialPanel } from "./DialPanel";
+export { IconRenderer } from "./IconRenderer";
 
 // All wrapped input components
 export {
@@ -24,4 +26,4 @@ export {
   DialCmInput,
   DialInchInput,
   DialTimeInput,
-} from './wrapped-inputs';
+} from "./wrapped-inputs";

package/src/dial/types.ts

@@ -0,0 +1,40 @@
+/**
+ * Dial Provider Types
+ * Runtime types for the Dial UI system, extending base types from dial-cli
+ */
+
+import type { DialSchema, GroupSchema } from "../../dial-cli/src/types";
+
+// ============= Label Position =============
+
+export type LabelPositionT = "left" | "top" | "inline" | undefined;
+
+// Define specific value types for dial values
+export type DialValue =
+  | string
+  | number
+  | boolean
+  | number[]
+  | string[]
+  | (boolean | number | string)[]
+  | object
+  | null
+  | undefined;
+
+/**
+ * Runtime schema group - extends ComponentSchema with DialSchema
+ */
+export interface DialSchemaGroup {
+  component: string;
+  description?: string;
+  schemas: DialSchema[];
+  groups?: GroupSchema[];
+}
+
+// Re-export base types for convenience
+export type {
+  // Schema types (final output)
+  DialSchema,
+  NestedTypeDefinition,
+  GroupSchema,
+} from "../../dial-cli/src/types";