@vuer-ai/vuer-uikit 0.0.100 → 0.0.102

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

@@ -0,0 +1,35 @@
+import { useCallback, useMemo } from "react";
+
+import { signInHandler } from "../handler/sign-in-handler";
+import { BetterAuth, SignInWithOutBaseURLParams } from "../types";
+import { useVuerAuth } from "./use-vuer-auth";
+
+interface UseVuerAuth {
+  signIn: (p?: SignInWithOutBaseURLParams) => Promise<string> | void;
+  signOut: ReturnType<BetterAuth["signOut"]>;
+}
+
+const useVuerMethod = (): UseVuerAuth => {
+  const { refetch, authClient, baseURL } = useVuerAuth();
+
+  const signOutHandle = useCallback(() => {
+    return authClient.signOut();
+  }, [authClient]);
+
+  const signInHandle = useCallback(
+    (props?: SignInWithOutBaseURLParams) => {
+      return signInHandler({ ...props, baseURL }, refetch);
+    },
+    [baseURL, refetch],
+  );
+
+  return useMemo(() => {
+    return {
+      signIn: signInHandle,
+      signOut: signOutHandle,
+    };
+  }, [signInHandle, signOutHandle]);
+};
+
+export { useVuerMethod };
+export type { UseVuerAuth };

package/src/auth/index.ts

@@ -0,0 +1,6 @@
+export * from "./hooks/use-vuer-method";
+export * from "./hooks/use-vuer-auth";
+
+export * from "./localstorage-key";
+
+export { VuerAuthProvider } from "./vuer-auth-provider";

package/src/auth/localstorage-key.ts

@@ -0,0 +1,3 @@
+export const bearerToken = "bearer_token" as const;
+
+export const jwtToken = "auth_jwt" as const;

package/src/auth/types.ts

@@ -0,0 +1,56 @@
+import { betterAuth } from "better-auth";
+import { customSessionClient } from "better-auth/client/plugins";
+import { customSession } from "better-auth/plugins";
+import { createAuthClient } from "better-auth/react";
+
+export const auth = betterAuth({
+  plugins: [
+    customSession(async (session) => {
+      return {
+        ...session,
+        session: { ...session.session, sessionToken: "" },
+      };
+    }),
+  ],
+});
+
+export const options = {
+  plugins: [customSessionClient<typeof auth>()],
+};
+
+type BetterAuth = ReturnType<typeof createAuthClient<typeof options>>;
+
+type Session = BetterAuth["$Infer"]["Session"];
+
+interface SignInWithPopup {
+  baseURL: string;
+  authMode?: "popup";
+  callbackURL?: string;
+}
+
+interface SignInWithRedirect {
+  baseURL: string;
+  authMode: "redirect";
+  callbackURL: string;
+}
+
+type Refetch = ReturnType<BetterAuth["useSession"]>["refetch"];
+
+type SignOut = ReturnType<BetterAuth["signOut"]>;
+
+type SignInParams = SignInWithPopup | SignInWithRedirect;
+
+type SignInWithOutBaseURLParams =
+  | Omit<SignInWithPopup, "baseURL">
+  | Omit<SignInWithRedirect, "baseURL">;
+
+export type {
+  SignOut,
+  Refetch,
+  Session,
+  BetterAuth,
+  SignInParams,
+  SignInWithOutBaseURLParams,
+  SignInWithPopup,
+  SignInWithRedirect,
+};

package/src/auth/vuer-auth-provider.tsx

@@ -0,0 +1,35 @@
+import { PropsWithChildren, useEffect, useMemo, useRef } from "react";
+
+import { AuthContext } from "./context/auth-context";
+import { createClient } from "./handler/create-client";
+import { bearerToken } from "./localstorage-key";
+
+interface Props {
+  baseURL: string;
+}
+
+export function VuerAuthProvider({ children, baseURL }: PropsWithChildren<Props>) {
+  const authClient = useRef(createClient(baseURL));
+
+  const { data, isPending, refetch } = authClient.current.useSession();
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const session = searchParams.get("token");
+    if (session) {
+      localStorage.setItem(bearerToken, encodeURIComponent(session));
+      refetch();
+      window.history.replaceState({}, "", window.location.pathname);
+    }
+  }, [refetch]);
+
+  return (
+    <AuthContext.Provider
+      value={useMemo(() => {
+        return { data, isPending, refetch, authClient: authClient.current, baseURL };
+      }, [baseURL, data, isPending, refetch])}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}

package/src/dial/DialPanel.tsx

@@ -3,15 +3,19 @@ import React from "react";
 import { DialSchema, DialGroupConfig, LabelPositionT } from "./DialProvider";
 import {
   DialBooleanInput,
+  DialColorInput,
   DialEulerDegInput,
   DialIntInput,
   DialNumberInput,
   DialSelectInput,
   DialSliderInput,
+  DialTextInput,
   DialVec3Input,
   DialVectorInput,
+  DialPresetsInput,
+  DialEulerRadInput,
+  DialNumberRadInput,
 } from "./wrapped-inputs";
-
 interface DialSchemaRendererProps {
   schemas: DialSchema[];
   groups?: DialGroupConfig[];
@@ -87,6 +91,17 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({ schemas, groups:
           />
         );
 
+      case "euler-rad":
+        return (
+          <DialEulerRadInput
+            key={name}
+            name={name}
+            label={label}
+            step={step}
+            labelPosition={labelPosition}
+          />
+        );
+
       case "vector":
       case "vector-6":
       case "number-group":
@@ -98,6 +113,20 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({ schemas, groups:
           <DialBooleanInput key={name} name={name} label={label} labelPosition={labelPosition} />
         );
 
+      case "number-slider":
+        // Integer input
+        return (
+          <DialSliderInput
+            key={name}
+            name={name}
+            label={label}
+            min={min}
+            max={max}
+            step={step}
+            labelPosition={labelPosition}
+          />
+        );
+
       case "number-int":
         // Integer input
         return (
@@ -110,11 +139,23 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({ schemas, groups:
           />
         );
 
+      case "number-rad":
+        // Radian input displayed as degrees
+        return (
+          <DialNumberRadInput
+            key={name}
+            name={name}
+            label={label}
+            step={step}
+            labelPosition={labelPosition}
+          />
+        );
+
       case "number":
         // Use slider if min and max are defined, otherwise use number input
         if (min !== undefined && max !== undefined && !options) {
           return (
-            <DialSliderInput
+            <DialNumberInput
               key={name}
               name={name}
               label={label}
@@ -129,7 +170,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({ schemas, groups:
         // Use select if options are provided
         if (options && options.length > 0) {
           return (
-            <DialSelectInput
+            <DialPresetsInput
               key={name}
               name={name}
               label={label}
@@ -152,7 +193,11 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({ schemas, groups:
           />
         );
 
+      case "color":
+        return <DialColorInput key={name} name={name} label={label} />;
+
       case "string":
+      case "text":
         // If options are provided, use select
         if (options && options.length > 0) {
           return (
@@ -165,8 +210,16 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({ schemas, groups:
             />
           );
         }
-        // For now, skip pure string inputs (could add text input later)
-        return null;
+        // Use text input for pure string values
+        return (
+          <DialTextInput
+            key={name}
+            name={name}
+            label={label}
+            placeholder={`Enter ${label.toLowerCase()}`}
+            labelPosition={labelPosition}
+          />
+        );
 
       default:
         return null;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { LabelPositionT, useDialSchema } from "../DialProvider";
 import {
+  ColorInput,
   FormLayout,
   Input,
   InputSlot,
@@ -101,6 +102,22 @@ export const DialBooleanInput: React.FC<DialInputProps> = ({ name, label, labelP
   );
 };
 
+// Dial-wrapped ColorInput
+export const DialColorInput: React.FC<DialInputProps> = ({ name, label }) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? "") as string;
+
+  const inputComp = (
+    <ColorInput value={value} onChange={(e) => setValue(name, e.target.value)} prefix={label} />
+  );
+
+  if (!label) {
+    return inputComp;
+  }
+
+  return <DialInputWrapper label={label}>{inputComp}</DialInputWrapper>;
+};
+
 export const DialSelectInput: React.FC<DialInputProps> = ({
   name,
   options = [],

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

@@ -11,10 +11,12 @@ import {
   Label,
   QuaternionInput,
   RadInput,
+  TextInput,
   TimeInput,
   Vec3Input,
   VectorInput,
 } from "../../index";
+import { EulerRadInput } from "../../ui/inputs/number-inputs/EulerRadInput";
 import { LabelPositionT, useDialSchema } from "../DialProvider";
 
 // Base props for all dial-wrapped inputs
@@ -399,3 +401,114 @@ export const DialTimeInput: React.FC<DialWrapperProps> = ({
     );
   }
 };
+
+// Dial-wrapped TextInput
+export const DialTextInput: React.FC<DialWrapperProps & { placeholder?: string }> = ({
+  name,
+  label,
+  size = "sm",
+  labelPosition,
+  placeholder,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? "") as string;
+
+  if (labelPosition === "inline") {
+    return (
+      <TextInput
+        value={value}
+        onChange={(val) => setValue(name, val)}
+        size={size}
+        placeholder={placeholder}
+        prefix={label}
+      />
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <TextInput 
+          value={value} 
+          onChange={(val) => setValue(name, val)} 
+          size={size} 
+          placeholder={placeholder}
+        />
+      </DialInputWrapper>
+    );
+  }
+};
+
+// Dial-wrapped EulerRadInput (radians with degree display)
+export const DialEulerRadInput: React.FC<DialWrapperProps> = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? [0, 0, 0]) as [number, number, number];
+
+  if (labelPosition === "inline") {
+    return (
+      <EulerRadInput
+        value={value}
+        onValuesChange={(val) => setValue(name, val)}
+        size={size}
+        step={step}
+        display="deg"
+        prefix={label ? [label, "", ""] : undefined}
+      />
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <EulerRadInput
+          value={value}
+          onValuesChange={(val) => setValue(name, val)}
+          size={size}
+          step={step}
+          display="deg"
+        />
+      </DialInputWrapper>
+    );
+  }
+};
+
+// Dial-wrapped number-rad input (displays as degrees but stores as radians)
+export const DialNumberRadInput: React.FC<DialWrapperProps> = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? 0) as number;
+
+  // Convert radians to degrees for display
+  const degValue = (value * 180) / Math.PI;
+  
+  // Handler to convert degrees back to radians
+  const handleChange = (deg: number) => {
+    const rad = (deg * Math.PI) / 180;
+    setValue(name, rad);
+  };
+
+  if (labelPosition === "inline") {
+    return (
+      <DegInput
+        value={degValue}
+        onChange={handleChange}
+        size={size}
+        step={step}
+        prefix={label ? [label] : undefined}
+      />
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <DegInput value={degValue} onChange={handleChange} size={size} step={step} />
+      </DialInputWrapper>
+    );
+  }
+};

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

@@ -0,0 +1,79 @@
+import React from "react";
+
+import { PresetsInput } from "../../ui/inputs/presets-input";
+import { FormLayout, Label } from "../../index";
+import { LabelPositionT, useDialSchema } from "../DialProvider";
+
+interface DialPresetsInputProps {
+  name: string;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  labelPosition?: LabelPositionT;
+  options: Array<string | number | { label: string; value: string | number }>;
+}
+
+const DialInputWrapper: React.FC<{
+  label?: string;
+  children: React.ReactElement;
+}> = ({ label, children }) => {
+  if (!label) {
+    return <>{children}</>;
+  }
+
+  return (
+    <FormLayout orientation="label-top">
+      <Label size="sm">{label}</Label>
+      {children}
+    </FormLayout>
+  );
+};
+
+export const DialPresetsInput: React.FC<DialPresetsInputProps> = ({
+  name,
+  label,
+  size = "sm",
+  labelPosition,
+  options,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? 0) as number;
+
+  // Extract preset values from options
+  const presets = options
+    .slice(0, 3)
+    .map((opt) => {
+      if (typeof opt === "number") return opt;
+      if (typeof opt === "string") return parseFloat(opt);
+      return typeof opt.value === "number" ? opt.value : parseFloat(opt.value as string);
+    }) as [number, number, number];
+
+  // Pad with zeros if less than 3 presets
+  while (presets.length < 3) {
+    presets.push(0);
+  }
+
+  if (labelPosition === "inline") {
+    return (
+      <div className="flex items-center gap-2">
+        {label && <Label size="sm">{label}</Label>}
+        <PresetsInput
+          value={value}
+          onChange={(val) => setValue(name, val)}
+          size={size}
+          presets={presets}
+        />
+      </div>
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <PresetsInput
+          value={value}
+          onChange={(val) => setValue(name, val)}
+          size={size}
+          presets={presets}
+        />
+      </DialInputWrapper>
+    );
+  }
+};

package/src/dial/wrapped-inputs/index.ts

@@ -4,6 +4,7 @@ export {
   DialNumberInput,
   DialSelectInput,
   DialSliderInput,
+  DialColorInput,
 } from "./ControlledInputs";
 
 // UIKit wrapped inputs
@@ -19,7 +20,13 @@ export {
   DialCmInput,
   DialInchInput,
   DialTimeInput,
+  DialTextInput,
+  DialEulerRadInput,
+  DialNumberRadInput,
 } from "./DialInputs";
 
+// Presets input
+export { DialPresetsInput } from "./DialPresetsInput";
+
 // Variable-dimension vector input
 export { DialVectorInput } from "./DialVectorInput";

package/src/ui/DialBadge.tsx

@@ -2,9 +2,14 @@ import { GitBranch } from "lucide-react";
 import React from "react";
 import { cn } from "../hooks";
 
-// Version info for dial-cli package
-const DIAL_PACKAGE_NAME = "@vuer-ai/dial-cli";
-const DIAL_PACKAGE_VERSION = "0.0.3";
+// Version info for dial-cli package (injected at build time)
+declare const __DIAL_VERSION__: string;
+declare const __DIAL_PACKAGE_NAME__: string;
+declare const __DIAL_GIT_HASH__: string;
+
+const DIAL_PACKAGE_NAME = typeof __DIAL_PACKAGE_NAME__ !== "undefined" ? __DIAL_PACKAGE_NAME__ : "@vuer-ai/dial-cli";
+const DIAL_PACKAGE_VERSION = typeof __DIAL_VERSION__ !== "undefined" ? __DIAL_VERSION__ : "dev";
+const DIAL_GIT_HASH = typeof __DIAL_GIT_HASH__ !== "undefined" ? __DIAL_GIT_HASH__ : "unknown";
 
 interface DialBadgeProps {
   /**
@@ -27,11 +32,15 @@ interface DialBadgeProps {
    * Whether to show the version
    */
   version?: boolean;
+  /**
+   * Whether to show the git hash instead of version
+   */
+  hash?: boolean;
 }
 
 /**
- * Badge component that displays the dial-cli package version
- * Format: [ dial-cli | v0.0.3 ]
+ * Badge component that displays the dial-cli package version or git hash
+ * Format: [ dial-cli | v0.0.11 ] or [ dial-cli | abc1234 ]
  */
 function DialBadge({
   className,
@@ -39,9 +48,11 @@ function DialBadge({
   prefix = true,
   linkable = true,
   version = true,
+  hash = false,
 }: DialBadgeProps) {
   const packageShortName = "dial-cli";
-  const versionText = version ? (prefix ? `v${DIAL_PACKAGE_VERSION}` : DIAL_PACKAGE_VERSION) : undefined;
+  const displayValue = hash ? DIAL_GIT_HASH : DIAL_PACKAGE_VERSION;
+  const versionText = version || hash ? (prefix && !hash ? `v${displayValue}` : displayValue) : undefined;
   const npmUrl = `https://www.npmjs.com/package/${DIAL_PACKAGE_NAME}/v/${DIAL_PACKAGE_VERSION}`;
 
   return (
@@ -93,5 +104,5 @@ function DialBadge({
   );
 }
 
-export { DialBadge, DIAL_PACKAGE_VERSION, DIAL_PACKAGE_NAME };
+export { DialBadge, DIAL_PACKAGE_VERSION, DIAL_PACKAGE_NAME, DIAL_GIT_HASH };
 export type { DialBadgeProps };