@vuer-ai/vuer-uikit 0.0.101 → 0.0.102

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,6 +3,7 @@ import React from "react";
 import { DialSchema, DialGroupConfig, LabelPositionT } from "./DialProvider";
 import {
   DialBooleanInput,
+  DialColorInput,
   DialEulerDegInput,
   DialIntInput,
   DialNumberInput,
@@ -11,8 +12,10 @@ import {
   DialTextInput,
   DialVec3Input,
   DialVectorInput,
+  DialPresetsInput,
+  DialEulerRadInput,
+  DialNumberRadInput,
 } from "./wrapped-inputs";
-
 interface DialSchemaRendererProps {
   schemas: DialSchema[];
   groups?: DialGroupConfig[];
@@ -88,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":
@@ -99,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 (
@@ -111,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}
@@ -130,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}
@@ -153,6 +193,9 @@ 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

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

@@ -16,6 +16,7 @@ import {
   Vec3Input,
   VectorInput,
 } from "../../index";
+import { EulerRadInput } from "../../ui/inputs/number-inputs/EulerRadInput";
 import { LabelPositionT, useDialSchema } from "../DialProvider";
 
 // Base props for all dial-wrapped inputs
@@ -435,3 +436,79 @@ export const DialTextInput: React.FC<DialWrapperProps & { placeholder?: string }
     );
   }
 };
+
+// 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
@@ -20,7 +21,12 @@ export {
   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 };

package/src/ui/avatar.tsx

@@ -1,7 +1,7 @@
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import React, { ComponentProps } from "react";
 
-import { cn, createClientOnlyComponent } from "../hooks";
+import { cn } from "../hooks";
 
 /**
  * Avatar root component that displays a user's profile image with fallback support.
@@ -10,10 +10,7 @@ import { cn, createClientOnlyComponent } from "../hooks";
  * @param className - Additional CSS classes to apply
  * @param props - All standard Radix Avatar.Root props are supported
  */
-export const AvatarRoot = ({
-  className,
-  ...props
-}: ComponentProps<typeof AvatarPrimitive.Root>) => (
+export const Avatar = ({ className, ...props }: ComponentProps<typeof AvatarPrimitive.Root>) => (
   <AvatarPrimitive.Root
     data-slot="avatar"
     className={cn("relative flex size-[24px] shrink-0 overflow-hidden rounded-full", className)}
@@ -21,41 +18,15 @@ export const AvatarRoot = ({
   />
 );
 
-/**
- * SSR fallback component for Avatar when client-side rendering is not available.
- * @param className - Additional CSS classes to apply
- */
-export const AvatarSSRFallback = ({ className }: { className?: string }) => (
-  <span
-    data-slot="avatar"
-    className={cn("relative flex size-[24px] shrink-0 overflow-hidden rounded-full", className)}
-  />
-);
-
-/**
- * Main Avatar component with client-side rendering support and SSR fallback.
- * Use this as the container for AvatarImage and AvatarFallback components.
- *
- * @example
- * ```tsx
- * <Avatar>
- *   <AvatarImage src="/avatar.jpg" alt="User" />
- *   <AvatarFallback>JD</AvatarFallback>
- * </Avatar>
- * ```
- */
-export const Avatar = createClientOnlyComponent(AvatarRoot, AvatarSSRFallback);
-
 /**
  * Avatar image component for displaying the actual user image.
  * If the image fails to load, it will automatically fall back to AvatarFallback.
  *
  * @param src - Image source URL
- * @param alt - Alternative text for the image
  * @param className - Additional CSS classes to apply
  * @param props - All standard img element props are supported
  */
-export const AvatarImageRoot = ({
+export const AvatarImage = ({
   className,
   ...props
 }: ComponentProps<typeof AvatarPrimitive.Image>) => (
@@ -66,25 +37,6 @@ export const AvatarImageRoot = ({
   />
 );
 
-/**
- * SSR fallback component for AvatarImage when client-side rendering is not available.
- * @param className - Additional CSS classes to apply
- */
-export const AvatarImageFallback = ({ className }: { className?: string }) => (
-  <span data-slot="avatar-image" className={cn("aspect-square size-full", className)} />
-);
-
-/**
- * Avatar image component with client-side rendering support and SSR fallback.
- * Displays the user's profile image with automatic fallback support.
- *
- * @example
- * ```tsx
- * <AvatarImage src="/user-avatar.jpg" alt="John Doe" />
- * ```
- */
-export const AvatarImage = createClientOnlyComponent(AvatarImageRoot, AvatarImageFallback);
-
 /**
  * Avatar fallback component that displays when the image fails to load.
  * Typically contains user initials or a default icon.
@@ -93,7 +45,7 @@ export const AvatarImage = createClientOnlyComponent(AvatarImageRoot, AvatarImag
  * @param children - Content to display (usually initials)
  * @param props - All standard Radix Avatar.Fallback props are supported
  */
-export const AvatarFallbackRoot = ({
+export const AvatarFallback = ({
   className,
   ...props
 }: ComponentProps<typeof AvatarPrimitive.Fallback>) => (
@@ -107,39 +59,6 @@ export const AvatarFallbackRoot = ({
   />
 );
 
-/**
- * SSR fallback component for AvatarFallback when client-side rendering is not available.
- * @param className - Additional CSS classes to apply
- * @param children - Content to display (usually initials)
- */
-export const AvatarFallbackSSR = ({
-  className,
-  ...props
-}: {
-  className?: string;
-  children?: React.ReactNode;
-}) => (
-  <span
-    data-slot="avatar-fallback"
-    className={cn(
-      "bg-bg-tertiary flex size-full items-center justify-center rounded-full",
-      className,
-    )}
-    {...props}
-  />
-);
-
-/**
- * Avatar fallback component with client-side rendering support and SSR fallback.
- * Displays fallback content when the avatar image fails to load.
- *
- * @example
- * ```tsx
- * <AvatarFallback>JD</AvatarFallback>
- * ```
- */
-export const AvatarFallback = createClientOnlyComponent(AvatarFallbackRoot, AvatarFallbackSSR);
-
 /**
  * Props for the AvatarGroup component.
  */

package/src/ui/button.tsx

@@ -19,12 +19,7 @@ export const buttonVariants = cva(
     "disabled:pointer-events-none",
     "disabled:bg-bg-tertiary",
     "disabled:text-text-tertiary",
-    "focus-visible:border-ring",
-    "focus-visible:ring-ring/50",
-    "focus-visible:ring-[3px]",
     "focus-visible:bg-brand-tertiary",
-    "aria-invalid:ring-destructive/20",
-    "aria-invalid:border-destructive",
   ],
   {
     variants: {

package/src/ui/card.tsx

@@ -12,7 +12,7 @@ const cardVariants = cva(
     "flex-col",
     "rounded-uk-lg",
     "bg-bg-primary",
-    "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+    "liquid:shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
     "liquid:liquid-bg",
   ],
   {