@vuer-ai/vuer-uikit 0.0.101 → 0.0.103

package/dist/ui/waterfall/index.cjs

@@ -1,36 +1,36 @@
 'use strict';
 
-var chunkG7FYBSFO_cjs = require('../../chunk-G7FYBSFO.cjs');
+var chunk5SP25SO3_cjs = require('../../chunk-5SP25SO3.cjs');
 require('../../chunk-WJL5HMO6.cjs');
 require('../../chunk-RJ7I6ZQK.cjs');
+require('../../chunk-5MNZYCN2.cjs');
+require('../../chunk-Z6UDRPC2.cjs');
 require('../../chunk-YJ6X6T5K.cjs');
-require('../../chunk-LP3AGGRK.cjs');
-require('../../chunk-6TSA7KXX.cjs');
+require('../../chunk-G5NT42YF.cjs');
+require('../../chunk-VOTZLQ6J.cjs');
+require('../../chunk-2J75MYQA.cjs');
+require('../../chunk-UTS56UA5.cjs');
+require('../../chunk-JWVH6R35.cjs');
 require('../../chunk-MVAFOQ67.cjs');
 require('../../chunk-TUYG6BYZ.cjs');
 require('../../chunk-YXFHJKNW.cjs');
 var chunkG2ZYONQO_cjs = require('../../chunk-G2ZYONQO.cjs');
-require('../../chunk-5MNZYCN2.cjs');
-require('../../chunk-Z6UDRPC2.cjs');
-require('../../chunk-G5NT42YF.cjs');
-require('../../chunk-55RSKLJ5.cjs');
+require('../../chunk-5JPYU5A6.cjs');
 require('../../chunk-HAVTMZR3.cjs');
 require('../../chunk-EEGQLTSQ.cjs');
-require('../../chunk-VOTZLQ6J.cjs');
-require('../../chunk-2J75MYQA.cjs');
-require('../../chunk-2CZEFXEW.cjs');
-require('../../chunk-3UEVUYFQ.cjs');
+require('../../chunk-LFSCJLL2.cjs');
+require('../../chunk-LQGXG373.cjs');
 require('../../chunk-JMCH2AFN.cjs');
 require('../../chunk-G5JZGNKY.cjs');
 require('../../chunk-QN4N4I3Z.cjs');
-require('../../chunk-LYZJNEOR.cjs');
-require('../../chunk-YZIR6LIY.cjs');
-require('../../chunk-RPTRTGC2.cjs');
-require('../../chunk-LBWMTA5T.cjs');
 require('../../chunk-Q7E73DVJ.cjs');
 require('../../chunk-JR4TVE43.cjs');
 require('../../chunk-VXZURKMQ.cjs');
+require('../../chunk-Q4XH2Z5M.cjs');
 require('../../chunk-6BOWMGFG.cjs');
+require('../../chunk-YZIR6LIY.cjs');
+require('../../chunk-RPTRTGC2.cjs');
+require('../../chunk-LBWMTA5T.cjs');
 require('../../chunk-OHIB3TEN.cjs');
 require('../../chunk-G4FJGNY5.cjs');
 
@@ -38,7 +38,7 @@ require('../../chunk-G4FJGNY5.cjs');
 
 Object.defineProperty(exports, "Waterfall", {
   enumerable: true,
-  get: function () { return chunkG7FYBSFO_cjs.Waterfall; }
+  get: function () { return chunk5SP25SO3_cjs.Waterfall; }
 });
 Object.defineProperty(exports, "TOTAL_DURATION", {
   enumerable: true,

package/dist/ui/waterfall/index.mjs

@@ -1,33 +1,33 @@
-export { Waterfall } from '../../chunk-AJYO5W6O.mjs';
+export { Waterfall } from '../../chunk-YHY6SXVJ.mjs';
 import '../../chunk-JWKOW2OV.mjs';
 import '../../chunk-VPQ5SSY3.mjs';
+import '../../chunk-IR334P7F.mjs';
+import '../../chunk-CIPI2V54.mjs';
 import '../../chunk-WPDU2YYR.mjs';
-import '../../chunk-5EXV5EWF.mjs';
-import '../../chunk-K22BEXUA.mjs';
+import '../../chunk-HVVT3D2T.mjs';
+import '../../chunk-HTAFERCZ.mjs';
+import '../../chunk-SA5WKLYB.mjs';
+import '../../chunk-D5H4XX6Q.mjs';
+import '../../chunk-JVV7W3TP.mjs';
 import '../../chunk-OC4HRPZU.mjs';
 import '../../chunk-N6DSPSMM.mjs';
 import '../../chunk-CO6EASQO.mjs';
 export { TOTAL_DURATION, borderColorClasses, colorClasses, formatDuration, leftWedgeClasses, rightWedgeClasses } from '../../chunk-4U232QAX.mjs';
-import '../../chunk-IR334P7F.mjs';
-import '../../chunk-CIPI2V54.mjs';
-import '../../chunk-HVVT3D2T.mjs';
-import '../../chunk-73VF2W3D.mjs';
+import '../../chunk-SUEFWFPX.mjs';
 import '../../chunk-VQPJ7TLB.mjs';
 import '../../chunk-PC5DHSC4.mjs';
-import '../../chunk-HTAFERCZ.mjs';
-import '../../chunk-SA5WKLYB.mjs';
-import '../../chunk-ZNPI2TYG.mjs';
-import '../../chunk-4XUJBMDE.mjs';
+import '../../chunk-5MBEK77I.mjs';
+import '../../chunk-LRSDE62T.mjs';
 import '../../chunk-BNDRHLLZ.mjs';
 import '../../chunk-PDOFOJ4P.mjs';
 import '../../chunk-F7ZHPSLA.mjs';
-import '../../chunk-OEIF3JCH.mjs';
-import '../../chunk-VA4LUFKD.mjs';
-import '../../chunk-4F2GSF2T.mjs';
-import '../../chunk-IDUVYPN7.mjs';
 import '../../chunk-3QT5VABC.mjs';
 import '../../chunk-XHJDRQD7.mjs';
 import '../../chunk-LQOPO4KU.mjs';
+import '../../chunk-U3LN5NB6.mjs';
 import '../../chunk-IZARTVYN.mjs';
+import '../../chunk-VA4LUFKD.mjs';
+import '../../chunk-4F2GSF2T.mjs';
+import '../../chunk-IDUVYPN7.mjs';
 import '../../chunk-HMN4IKTG.mjs';
 import '../../chunk-SAGQV2YZ.mjs';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuer-ai/vuer-uikit",
   "author": "Ge Yang",
-  "version": "0.0.101",
+  "version": "0.0.103",
   "files": [
     "/dist",
     "/src"
@@ -21,6 +21,11 @@
       "import": "./src/index.ts",
       "require": "./src/index.ts"
     },
+    "./auth": {
+      "types": "./dist/auth/index.d.ts",
+      "import": "./dist/auth/index.mjs",
+      "require": "./dist/auth/index.cjs"
+    },
     "./src/dial": {
       "types": "./src/dial/index.ts",
       "import": "./src/dial/index.ts",
@@ -47,6 +52,7 @@
     "./styles/variables.css": "./dist/styles/variables.css"
   },
   "peerDependencies": {
+    "better-auth": "^1.3.9",
     "@react-three/drei": "latest",
     "@react-three/fiber": "latest",
     "lucide-react": "latest",

package/src/auth/context/auth-context.ts

@@ -0,0 +1,16 @@
+import { createContext } from "react";
+
+import { BetterAuth, Session } from "../types";
+
+interface IAuthContext {
+  baseURL: string;
+  data: Session | null;
+  isPending: boolean;
+  authClient: BetterAuth;
+  refetch: () => void;
+}
+
+const AuthContext = createContext<IAuthContext>(null!);
+
+export { AuthContext };
+export type { IAuthContext };

package/src/auth/handler/create-client.ts

@@ -0,0 +1,23 @@
+import { createAuthClient } from "better-auth/react";
+
+import { bearerToken, jwtToken } from "../localstorage-key";
+import { BetterAuth, options } from "../types";
+
+export const createClient = (baseURL: string): BetterAuth => {
+  return createAuthClient({
+    ...options,
+    baseURL: baseURL,
+    fetchOptions: {
+      auth: {
+        type: "Bearer",
+        token: () => localStorage.getItem(bearerToken) || "", // get the token from localStorage
+      },
+      onSuccess: (ctx) => {
+        const jwt = ctx.response.headers.get("set-auth-jwt");
+        if (jwt) {
+          localStorage.setItem(jwtToken, jwt);
+        }
+      },
+    },
+  });
+};

package/src/auth/handler/sign-in-handler.ts

@@ -0,0 +1,66 @@
+import { bearerToken } from "../localstorage-key";
+import { Refetch, SignInParams, SignInWithPopup, SignInWithRedirect } from "../types";
+
+const signInHandler = (props: SignInParams, refetch: Refetch): Promise<string> | void => {
+  const { authMode } = props;
+
+  if (authMode === "redirect") {
+    return sigInWithRedirect(props);
+  } else {
+    return sigInWithPopup(props, refetch);
+  }
+};
+
+const sigInWithPopup = async (props: SignInWithPopup, refetch: Refetch): Promise<string> => {
+  const { callbackURL, baseURL } = props;
+
+  const width = 500;
+  const height = 600;
+  const left = (window.screen.width - width) / 2;
+  const top = (window.screen.height - height) / 2;
+
+  const authPopup = window.open(
+    `${baseURL}/authorize?origin=${encodeURIComponent(window.location.origin)}`,
+    "vuer-auth-center",
+    `width=${width},height=${height},top=${top},left=${left}`,
+  );
+
+  return new Promise((resolve) => {
+    const handle = (event: MessageEvent) => {
+      const trustedDomains = [baseURL];
+      if (!trustedDomains.includes(event.origin)) {
+        return;
+      }
+
+      if (event.data.type === "READY") {
+        authPopup?.postMessage({ type: "REQUEST_TOKEN" }, baseURL);
+      }
+
+      if (event.data.type === "AUTH_TOKEN") {
+        const token = event.data.token;
+        if (token) {
+          localStorage.setItem(bearerToken, token);
+          window.removeEventListener("message", handle);
+
+          resolve(token);
+
+          if (callbackURL) {
+            window.location.href = callbackURL;
+          } else {
+            refetch();
+          }
+        }
+      }
+    };
+
+    window.addEventListener("message", handle);
+  });
+};
+
+const sigInWithRedirect = (props: SignInWithRedirect) => {
+  const { callbackURL, baseURL } = props;
+
+  window.location.href = `${baseURL}/authorize?callbackURL=${encodeURIComponent(callbackURL)}`;
+};
+
+export { signInHandler };

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

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

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,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[];
@@ -62,7 +65,7 @@ export const DialPanel: React.FC<DialSchemaRendererProps> = ({ schemas, groups:
   const renderSchemaInput = (schema: DialSchema) => {
     const { name, dtype, min, max, step, options, tags } = schema;
     const labelPosition = tags?.labelPosition as LabelPositionT;
-    const 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) {
@@ -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/DialProvider.tsx

@@ -23,6 +23,7 @@ export interface DialSchema {
   steps?: number[];
   helpText?: string;
   icon?: string;
+  label?: string;
   tags?: {
     grouping?: string;
     col?: boolean | number;

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>
+    );
+  }
+};