@vuer-ai/vuer-uikit 0.0.108 → 0.0.112

package/src/auth/hooks/use-sign-in.ts

@@ -0,0 +1,33 @@
+import { useCallback, useMemo, useState } from "react";
+
+import { signInHandler } from "../handler/sign-in-handler";
+import { SignInWithOutBaseURLParams } from "../types";
+import { useUser } from "./use-user";
+
+const useSignIn = () => {
+  const { refetch, baseURL } = useUser();
+
+  const [isPending, setIsPending] = useState(false);
+
+  const signInHandle = useCallback(
+    async (props?: SignInWithOutBaseURLParams) => {
+      try {
+        setIsPending(true);
+        await signInHandler({ ...props, baseURL });
+        const result = await refetch();
+        setIsPending(false);
+        return result;
+      } catch (e) {
+        console.error(e);
+        return null;
+      }
+    },
+    [baseURL, refetch],
+  );
+
+  return useMemo(() => {
+    return { isPending, signIn: signInHandle };
+  }, [isPending, signInHandle]);
+};
+
+export { useSignIn };

package/src/auth/hooks/use-sign-out.ts

@@ -0,0 +1,30 @@
+import { useCallback, useMemo, useState } from "react";
+
+import { useUser } from "./use-user";
+import { signOutHandler } from "../handler/sign-out-handler";
+
+const useSignOut = () => {
+  const { refetch, baseURL } = useUser();
+
+  const [isPending, setIsPending] = useState(false);
+
+  const signOutHandle = useCallback(async () => {
+    try {
+      setIsPending(true);
+      await signOutHandler(baseURL);
+      await refetch();
+      setIsPending(false);
+    } catch (e) {
+      console.error(e);
+    }
+  }, [baseURL, refetch]);
+
+  return useMemo(() => {
+    return {
+      isPending,
+      signOut: signOutHandle,
+    };
+  }, [isPending, signOutHandle]);
+};
+
+export { useSignOut };

package/src/auth/hooks/{use-vuer-auth.ts → use-user.ts}

@@ -1,9 +1,9 @@
 import { useContext } from "react";
 
-import { IAuthContext, AuthContext } from "../context/auth-context";
+import { IUserContext, UserContext } from "../context/user-context";
 
-export const useVuerAuth = (): IAuthContext => {
-  const context = useContext(AuthContext);
+export const useUser = (): IUserContext => {
+  const context = useContext(UserContext);
 
   if (context === undefined) throw new Error("useSession must be used within a SessionContext");
   return context;

package/src/auth/hooks/use-vuer-sessions.ts

@@ -0,0 +1,29 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { useUser } from "./use-user";
+import { getSessions } from "../handler/get-sessions";
+import { UserSession } from "../types";
+
+export const useVuerSessions = () => {
+  const { baseURL } = useUser();
+
+  const [isPending, setIsPending] = useState(true);
+  const [sessions, setSessions] = useState<UserSession[]>([]);
+
+  useEffect(() => {
+    setIsPending(true);
+    getSessions(baseURL)
+      .then((sessions) => {
+        console.log("sessions", sessions);
+        setSessions(sessions);
+        setIsPending(false);
+      })
+      .catch(() => {
+        setIsPending(false);
+      });
+  }, [baseURL]);
+
+  return useMemo(() => {
+    return { isPending, sessions };
+  }, [isPending, sessions]);
+};

package/src/auth/index.ts

@@ -1,6 +1,12 @@
-export * from "./hooks/use-vuer-method";
-export * from "./hooks/use-vuer-auth";
+export * from "./hooks/use-user";
+export * from "./hooks/use-sign-in";
+export * from "./hooks/use-sign-out";
 
 export * from "./localstorage-key";
 
-export { VuerAuthProvider } from "./vuer-auth-provider";
+export * from "./components";
+
+export { fetchServer } from "./handler/fetch-server";
+export { fetchAuth } from "./handler/fetch-auth";
+
+export { VuerUserProvider } from "./vuer-user-provider";

package/src/auth/localstorage-key.ts

@@ -1 +1,3 @@
 export const bearerToken = "bearer_token" as const;
+
+export const JWTToken = "JWT_token" as const;

package/src/auth/{vuer-auth-provider.tsx → vuer-user-provider.tsx}

@@ -1,6 +1,6 @@
 import { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
 
-import { AuthContext } from "./context/auth-context";
+import { UserContext } from "./context/user-context";
 import { getSession } from "./handler/get-session";
 import { bearerToken } from "./localstorage-key";
 import { UserSession } from "./types";
@@ -9,16 +9,21 @@ interface Props {
   baseURL: string;
 }
 
-export function VuerAuthProvider({ children, baseURL }: PropsWithChildren<Props>) {
+export function VuerUserProvider({ children, baseURL }: PropsWithChildren<Props>) {
   const [isPending, setIsPending] = useState<boolean>(true);
   const [session, setSession] = useState<UserSession | null>(null);
 
   const refetchHandle = useCallback(async () => {
-    setIsPending(true);
-    const data = await getSession(baseURL);
-    setSession(data);
-    setIsPending(false);
-    return data;
+    try {
+      setIsPending(true);
+      const data = await getSession(baseURL);
+      setSession(data);
+      setIsPending(false);
+      return data;
+    } catch (e) {
+      console.error(e);
+      return null;
+    }
   }, [baseURL]);
 
   useEffect(() => {
@@ -36,7 +41,7 @@ export function VuerAuthProvider({ children, baseURL }: PropsWithChildren<Props>
   }, [refetchHandle]);
 
   return (
-    <AuthContext.Provider
+    <UserContext.Provider
       value={useMemo(() => {
         return {
           baseURL,
@@ -47,6 +52,6 @@ export function VuerAuthProvider({ children, baseURL }: PropsWithChildren<Props>
       }, [baseURL, session, isPending, refetchHandle])}
     >
       {children}
-    </AuthContext.Provider>
+    </UserContext.Provider>
   );
 }

package/src/dial/DialPanel.tsx

@@ -1,28 +1,33 @@
 import React from "react";
 
-import { DialSchema, DialGroupConfig, LabelPositionT } from "./DialProvider";
+import { DialGroupConfig, DialSchema, LabelPositionT } from "./DialProvider";
 import {
   DialBooleanInput,
   DialColorInput,
   DialEulerDegInput,
+  DialEulerRadInput,
   DialIntInput,
   DialNumberInput,
+  DialNumberRadInput,
+  DialPresetsInput,
   DialSelectInput,
   DialSliderInput,
   DialTextInput,
   DialVec3Input,
   DialVectorInput,
-  DialPresetsInput,
-  DialEulerRadInput,
-  DialNumberRadInput,
 } from "./wrapped-inputs";
+
 interface DialSchemaRendererProps {
   schemas: DialSchema[];
   groups?: DialGroupConfig[];
   labelLayout?: LabelPositionT;
 }
 
-export const DialPanel: React.FC<DialSchemaRendererProps> = ({ schemas, groups: groupConfigs, labelLayout }) => {
+export const DialPanel: React.FC<DialSchemaRendererProps> = ({
+  schemas,
+  groups: groupConfigs,
+  labelLayout,
+}) => {
   // Create a map of group configurations for easy lookup
   const groupConfigMap: Record<string, DialGroupConfig> = {};
 
@@ -67,7 +72,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({ schemas, groups:
     const { name, dtype, min, max, step, options, tags } = schema;
     // Use schema's label position if specified, otherwise fall back to panel's labelLayout prop
     const effectiveLabelPosition = (tags?.labelPosition as LabelPositionT) || labelLayout;
-    const label = schema.label || (name.charAt(0).toUpperCase() + name.slice(1));
+    const label = schema.label || name.charAt(0).toUpperCase() + name.slice(1);
 
     // Choose the right input component based on dtype
     switch (dtype) {
@@ -112,7 +117,12 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({ schemas, groups:
 
       case "boolean":
         return (
-          <DialBooleanInput key={name} name={name} label={label} labelPosition={effectiveLabelPosition} />
+          <DialBooleanInput
+            key={name}
+            name={name}
+            label={label}
+            labelPosition={effectiveLabelPosition}
+          />
         );
 
       case "number-slider":

package/src/dial/DialProvider.tsx

@@ -1,5 +1,10 @@
 import React, { createContext, ReactNode, useCallback, useContext, useMemo, useState } from "react";
 
+// 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
@@ -77,33 +82,82 @@ interface DialSchemaProviderProps {
 }
 
 // Provider component
-export const DialProvider: React.FC<DialSchemaProviderProps> = ({
+export const DialProvider = ({
   children,
   schemas,
   initialValues = {},
   values: controlledValues,
   onValueChange,
-}) => {
+}: DialSchemaProviderProps) => {
   // Determine if component is controlled
-  const isControlled = controlledValues !== undefined;
+  const isControlled = !isEmptyObject(controlledValues);
 
   // Initialize state with default values from schemas or provided initial values
-  const [internalValues, setInternalValues] = useState<Record<string, DialValue>>(() => {
-    const defaultValues: Record<string, DialValue> = {};
-    schemas.forEach((schema) => {
-      defaultValues[schema.name] = initialValues[schema.name] ?? schema.value;
-    });
-    return defaultValues;
-  });
+  const [internalValues, setInternalValues] = useState<Record<string, DialValue>>(() =>
+    Object.fromEntries(
+      schemas.map((schema) => [schema.name, initialValues[schema.name] ?? schema.value]),
+    ),
+  );
+
+  // Helper function to merge controlled values with schema defaults
+  const mergeWithSchemaDefaults = useCallback(
+    (inputValues: Record<string, DialValue>) => {
+      const result = { ...inputValues };
+
+      schemas.forEach((schema) => {
+        // If the input doesn't have this property or it's undefined/null, use schema default
+        if (result[schema.name] === undefined || result[schema.name] === null) {
+          if (schema.value !== undefined) {
+            result[schema.name] = schema.value;
+          }
+        }
+      });
+
+      return result;
+    },
+    [schemas],
+  );
 
   // Use controlled values if provided, otherwise use internal state
-  const values = isControlled ? controlledValues : internalValues;
+  // Always merge with schema defaults to ensure missing properties get default values
+  const values =
+    isControlled && controlledValues ? mergeWithSchemaDefaults(controlledValues) : internalValues;
+
+  // Helper function to format numbers to avoid floating point precision issues
+  const formatNumber = useCallback((value: number): number => {
+    // Round to 6 decimal places to avoid floating point precision errors
+    return Math.round(value * 1000000) / 1000000;
+  }, []);
+
+  // Helper function to format values based on their type
+  const formatValue = useCallback(
+    (value: DialValue): DialValue => {
+      if (value === null || value === undefined) {
+        return value;
+      }
+
+      // Format single numbers
+      if (typeof value === "number") {
+        return formatNumber(value);
+      }
+
+      // Format number arrays (vectors, etc.)
+      if (Array.isArray(value) && value.every((v) => typeof v === "number")) {
+        return value.map((v) => formatNumber(v as number));
+      }
+
+      // Return non-numeric values as-is
+      return value;
+    },
+    [formatNumber],
+  );
 
   const getValue = useCallback(
     (name: string) => {
-      return values[name];
+      const rawValue = values[name];
+      return formatValue(rawValue);
     },
-    [values],
+    [values, formatValue],
   );
 
   const setValue = useCallback(

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { PropsWithChildren, ReactElement, ReactNode, useCallback } from "react";
 import { LabelPositionT, useDialSchema } from "../DialProvider";
 import {
   ColorInput,
@@ -6,6 +6,7 @@ import {
   Input,
   InputSlot,
   Label,
+  type LayoutType,
   Select,
   SelectContent,
   SelectItem,
@@ -15,56 +16,62 @@ import {
   Switch,
 } from "../../index"; // Base input component that connects to the dial store
 
-// Base input component that connects to the dial store
-interface DialInputProps {
-  name: string;
-  type?: string;
-  min?: number;
-  max?: number;
-  step?: number;
-  options?: any[];
-  label?: string;
-  labelPosition?: LabelPositionT;
-  size?: "sm" | "md" | "lg";
-}
-
 // Helper component for wrapping inputs with labels
 const DialInputWrapper: React.FC<{
   label?: string;
-  children: React.ReactElement;
-}> = ({ label, children }) => {
+  labelPosition?: LabelPositionT;
+  children: ReactNode;
+}> = ({ label, labelPosition = "top", children }) => {
   if (!label) {
     return <>{children}</>;
   }
 
   return (
-    <FormLayout orientation="label-top">
+    <FormLayout orientation={`label-${labelPosition}` as LayoutType}>
       <Label size="sm">{label}</Label>
-      {children}
+      {children as ReactElement}
     </FormLayout>
   );
 };
 
-export const DialNumberInput: React.FC<DialInputProps> = ({
+export interface DialNumInputProps extends PropsWithChildren {
+  name: string;
+  type?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  options?: unknown[];
+  label?: string;
+  labelPosition?: LabelPositionT;
+  size?: "sm" | "md" | "lg";
+}
+
+// Base input component that connects to the dial store
+export const DialNumberInput: React.FC<DialNumInputProps> = ({
   name,
   min,
   max,
   step = 1,
   label,
-  labelPosition,
+  labelPosition = "top",
   size = "sm",
+  ...props
 }) => {
   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 inputProps = {
     type: "number" as const,
     value,
     min,
     max,
     step,
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) =>
-      setValue(name, parseFloat(e.target.value)),
+    onChange: handleChange,
     size,
   };
 
@@ -74,69 +81,82 @@ export const DialNumberInput: React.FC<DialInputProps> = ({
     );
   } else {
     return (
-      <DialInputWrapper label={label}>
+      <DialInputWrapper label={label} labelPosition={labelPosition} {...props}>
         <Input {...inputProps} />
       </DialInputWrapper>
     );
   }
 };
 
-export const DialBooleanInput: React.FC<DialInputProps> = ({ name, label, labelPosition }) => {
+export const DialBooleanInput: React.FC<DialNumInputProps> = ({
+  name,
+  label,
+  labelPosition,
+  ...props
+}) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? false) as boolean;
 
+  const handleChange = useCallback((checked: boolean) => setValue(name, checked), [name]);
+
   const switchProps = {
     checked: value,
-    onCheckedChange: (checked: boolean) => setValue(name, checked),
+    onCheckedChange: handleChange,
   };
 
-  if (!label) {
+  if (!label || labelPosition === "inline") {
     return <Switch {...switchProps} />;
   }
 
   return (
-    <div className="flex flex-row items-center gap-2">
-      <Label size="sm">{label}</Label>
+    <DialInputWrapper label={label} labelPosition={labelPosition} {...props}>
       <Switch {...switchProps} />
-    </div>
+    </DialInputWrapper>
   );
 };
 
 // Dial-wrapped ColorInput
-export const DialColorInput: React.FC<DialInputProps> = ({ name, label }) => {
+export const DialColorInput: React.FC<DialNumInputProps> = ({ name, label, ...props }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? "") as string;
 
-  const inputComp = (
-    <ColorInput value={value} onChange={(e) => setValue(name, e.target.value)} prefix={label} />
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => setValue(name, e.target.value),
+    [name],
   );
 
-  if (!label) {
-    return inputComp;
-  }
+  const inputComp = <ColorInput value={value} onChange={handleChange} prefix={label} />;
 
-  return <DialInputWrapper label={label}>{inputComp}</DialInputWrapper>;
+  return (
+    <DialInputWrapper label={label} {...props}>
+      {inputComp}
+    </DialInputWrapper>
+  );
 };
 
-export const DialSelectInput: React.FC<DialInputProps> = ({
+export const DialSelectInput: React.FC<DialNumInputProps> = ({
   name,
   options = [],
   label,
-  labelPosition,
   size = "sm",
+  ...props
 }) => {
   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
+      const parsed = !isNaN(Number(val)) ? Number(val) : val;
+      setValue(name, parsed);
+    },
+    [name],
+  );
+
   const selectComponent = (
-    <Select
-      value={String(value)}
-      onValueChange={(val) => {
-        // Try to parse as number if possible
-        const parsed = !isNaN(Number(val)) ? Number(val) : val;
-        setValue(name, parsed);
-      }}
-    >
+    <Select value={String(value)} onValueChange={handleValueChange}>
       <SelectTrigger size={size}>
         <SelectValue placeholder="Select an option" />
       </SelectTrigger>
@@ -150,44 +170,39 @@ export const DialSelectInput: React.FC<DialInputProps> = ({
     </Select>
   );
 
-  if (!label) {
-    return selectComponent;
-  }
-
-  return <DialInputWrapper label={label}>{selectComponent}</DialInputWrapper>;
+  return (
+    <DialInputWrapper label={label} {...props}>
+      {selectComponent}
+    </DialInputWrapper>
+  );
 };
 
-export const DialSliderInput: React.FC<DialInputProps> = ({
+export const DialSliderInput: React.FC<DialNumInputProps> = ({
   name,
   min = 0,
   max = 100,
   step = 1,
   label,
-  labelPosition,
-  size = "sm",
+  ...props
 }) => {
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? min) as number;
 
+  const handleValueChange = useCallback(([val]: number[]) => setValue(name, val), [name]);
+
   const sliderProps = {
     value: [value],
-    onValueChange: ([val]: number[]) => setValue(name, val),
+    onValueChange: handleValueChange,
     min,
     max,
     step,
     className: "flex-1",
   };
 
-  const sliderComponent = (
-    <div className="flex flex-1 items-center gap-2">
+  return (
+    <DialInputWrapper label={label} {...props}>
       <Slider {...sliderProps} />
       <span className="text-text-secondary w-12 text-right text-sm">{value}</span>
-    </div>
+    </DialInputWrapper>
   );
-
-  if (!label) {
-    return sliderComponent;
-  }
-
-  return <DialInputWrapper label={label}>{sliderComponent}</DialInputWrapper>;
 };