@vuer-ai/vuer-uikit 0.0.120 → 0.1.0

package/src/dial/DialPanel.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 
-import { DialGroupConfig, DialSchema, LabelPositionT } from "./DialProvider";
+import { DialButton, DialCustom } from "./components";
+import type { GroupSchema, DialSchema, LabelPositionT } from "./types";
 import {
+  DialArrayInput,
   DialBooleanInput,
   DialColorInput,
   DialEulerDegInput,
@@ -13,23 +15,59 @@ import {
   DialSelectInput,
   DialSliderInput,
   DialTextInput,
+  DialTupleInput,
   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 +76,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 +94,49 @@ 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 "tuple":
+        // General tuple with mixed types
+        return (
+          <DialTupleInput
+            key={name}
+            name={name}
+            label={label}
+            labelPosition={effectiveLabelPosition}
+            icon={icon}
+          />
+        );
+
+      case "array":
+        // Array of primitive types
+        return (
+          <DialArrayInput
+            key={name}
+            name={name}
+            label={label}
+            labelPosition={effectiveLabelPosition}
+            icon={icon}
+          />
+        );
+
+      case "interface":
+      case "object":
+        return (
+          <DialInterfaceInput
+            key={name}
+            name={name}
+            label={label}
+            labelPosition={effectiveLabelPosition}
+            icon={icon}
+          />
+        );
+
       case "vector3":
         return (
           <DialVec3Input
@@ -91,6 +152,19 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
         );
 
       case "euler":
+      case "euler-rad": // Alias for euler (both default to radians)
+        return (
+          <DialEulerRadInput
+            key={name}
+            name={name}
+            label={label}
+            step={step || 0.001}
+            labelPosition={effectiveLabelPosition}
+            icon={icon}
+          />
+        );
+
+      case "euler-deg":
         return (
           <DialEulerDegInput
             key={name}
@@ -102,7 +176,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
           />
         );
 
-      case "euler-rad":
+      case "euler-pi":
         return (
           <DialEulerRadInput
             key={name}
@@ -111,6 +185,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
             step={step || 0.001}
             labelPosition={effectiveLabelPosition}
             icon={icon}
+            format="pi"
           />
         );
 
@@ -198,7 +273,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 +299,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 (
@@ -249,27 +325,86 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({
           />
         );
 
+      case "button":
+        return (
+          <DialButton
+            key={name}
+            name={name}
+            label={label}
+            icon={icon}
+            onClick={schema.onClick}
+            variant={schema.variant}
+            disabled={schema.disabled}
+          />
+        );
+
+      case "custom":
+        // Either render function or children must be provided
+        if (!schema.render && !schema.children) {
+          console.warn(
+            `DialPanel: dtype="custom" requires either render or children for "${name}"`,
+          );
+          return null;
+        }
+        return (
+          <DialCustom
+            key={name}
+            schema={schema}
+            render={schema.render}
+            children={schema.children}
+          />
+        );
+
       default:
         return null;
     }
   };
 
+  // Wrapper function to apply span styles
+  const wrapWithStyle = (schema: DialSchema, component: React.ReactNode) => {
+    const spanStyle: React.CSSProperties = {};
+    if (schema.colSpan) {
+      spanStyle.gridColumn = `span ${schema.colSpan}`;
+    }
+    if (schema.rowSpan) {
+      spanStyle.gridRow = `span ${schema.rowSpan}`;
+    }
+
+    if (Object.keys(spanStyle).length > 0) {
+      return (
+        <div key={schema.name} style={spanStyle}>
+          {component}
+        </div>
+      );
+    }
+    return component;
+  };
+
+  // Sort groups: Transform first, then alphabetically
+  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 (
     <div className="dial-schema-renderer space-y-4">
       {/* Render grouped schemas */}
-      {Object.entries(groupedSchemas).map(([name, schemaList]) => {
+      {sortedGroups.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 ? "flex flex-row flex-no-wrap 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 pl-1.5 font-medium capitalize">{name}</div>
+            <div className="dial-row" style={groupStyle}>
+              {schemaList.map((schema) => wrapWithStyle(schema, renderSchemaInput(schema)))}
+            </div>
           </div>
         );
       })}
@@ -280,7 +415,9 @@ 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-1 gap-2">{ungrouped.map(renderSchemaInput)}</div>
+          <div className="dial-row grid grid-cols-1 gap-2">
+            {ungrouped.map((schema) => wrapWithStyle(schema, renderSchemaInput(schema)))}
+          </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/components/DialButton.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+import { Button } from "../../ui/button";
+import { IconRenderer } from "../IconRenderer";
+
+export interface DialButtonProps {
+  name: string;
+  label?: string;
+  icon?: string;
+  onClick?: () => void;
+  variant?: "primary" | "secondary" | "ghost" | "destructive" | "link";
+  disabled?: boolean;
+}
+
+/**
+ * Button component for dial panels
+ *
+ * Used to trigger actions from within the dial UI.
+ * Unlike input components, buttons don't store values in the dial state.
+ *
+ * @example
+ * ```tsx
+ * const handleReset = useCallback(() => {
+ *   // reset logic
+ * }, []);
+ *
+ * { name: 'reset', dtype: 'button', label: 'Reset', onClick: handleReset }
+ * ```
+ */
+export const DialButton: React.FC<DialButtonProps> = ({
+  name,
+  label,
+  icon,
+  onClick,
+  variant = "secondary",
+  disabled = false,
+}) => {
+  const displayLabel = label || name.charAt(0).toUpperCase() + name.slice(1);
+
+  return (
+    <Button
+      variant={variant}
+      size="sm"
+      onClick={onClick}
+      disabled={disabled}
+      className="w-full justify-center gap-2"
+    >
+      <IconRenderer iconName={icon} size={14} />
+      {displayLabel}
+    </Button>
+  );
+};

package/src/dial/components/DialCustom.tsx

@@ -0,0 +1,45 @@
+import React, { ReactNode } from "react";
+
+import { useDialSchema } from "../DialProvider";
+import type { DialCustomRenderFn, DialSchema } from "../types";
+
+export interface DialCustomProps {
+  schema: DialSchema;
+  /** Render function with access to getValue/setValue context */
+  render?: DialCustomRenderFn;
+  /** Direct ReactNode (no context access) */
+  children?: ReactNode;
+}
+
+/**
+ * Custom component that renders user-provided React components
+ *
+ * Supports two modes:
+ * 1. `render` function: Receives getValue/setValue context for dial integration
+ * 2. `children`: Direct ReactNode for simple/static components
+ *
+ * @example
+ * ```tsx
+ * // Mode 1: Render function with context (recommended for dial integration)
+ * const customRender = useMemo(() => ({ getValue, setValue }) => (
+ *   <div className="flex gap-2">
+ *     <span>Value: {getValue('myField')}</span>
+ *     <button onClick={() => setValue('myField', 0)}>Reset</button>
+ *   </div>
+ * ), []);
+ *
+ * // Mode 2: Direct ReactNode (for static or self-managed components)
+ * const myComponent = useMemo(() => <MyStaticComponent />, []);
+ * ```
+ */
+export const DialCustom: React.FC<DialCustomProps> = ({ schema, render, children }) => {
+  const { getValue, setValue } = useDialSchema();
+
+  // Priority: render function > children
+  if (render) {
+    return <>{render({ getValue, setValue, schema })}</>;
+  }
+
+  // Fallback to children (direct ReactNode)
+  return <>{children}</>;
+};

package/src/dial/components/index.ts

@@ -0,0 +1,3 @@
+// Non-input dial components (actions, containers, etc.)
+export { DialButton } from "./DialButton";
+export { DialCustom } from "./DialCustom";

package/src/dial/index.ts

@@ -1,10 +1,12 @@
 // 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";
 
-// All wrapped input components
+// Export types from the types file
+export * from "./types";
+export { DialPanel } from "./DialPanel";
+export { IconRenderer } from "./IconRenderer";
+
+// Dial input components
 export {
   // Basic controlled inputs
   DialBooleanInput,
@@ -24,4 +26,7 @@ export {
   DialCmInput,
   DialInchInput,
   DialTimeInput,
-} from './wrapped-inputs';
+} from "./wrapped-inputs";
+
+// Non-input dial components
+export { DialButton, DialCustom } from "./components";

package/src/dial/types.ts

@@ -0,0 +1,32 @@
+/**
+ * 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;
+
+/**
+ * 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)
+  DialCustomRenderContext,
+  DialCustomRenderFn,
+  DialDtype,
+  DialSchema,
+  DialValue,
+  NestedTypeDefinition,
+  GroupSchema,
+} from "../../dial-cli/src/types";