onejs-react 0.1.16 → 0.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onejs-react",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "React 19 renderer for OneJS (Unity UI Toolkit)",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components.tsx

@@ -11,6 +11,8 @@ import type {
   ScrollViewProps,
   ImageProps,
   ListViewProps,
+  FrostedGlassProps,
+  FrostedGlassIntrinsicProps,
   VisualElement,
   TextElement,
   LabelElement,
@@ -20,6 +22,7 @@ import type {
   SliderElement,
   ScrollViewElement,
   ImageElement,
+  FrostedGlassElement,
 } from './types';
 
 declare const CS: any
@@ -95,6 +98,7 @@ declare module 'react/jsx-runtime' {
       'ojs-scrollview': WithRef<ScrollViewProps, ScrollViewElement>;
       'ojs-image': WithRef<ImageProps, ImageElement>;
       'ojs-listview': WithRef<ListViewProps, VisualElement>;
+      'ojs-frostedglass': WithRef<FrostedGlassIntrinsicProps, FrostedGlassElement>;
     }
   }
 }
@@ -113,6 +117,7 @@ declare module 'react' {
       'ojs-scrollview': WithRef<ScrollViewProps, ScrollViewElement>;
       'ojs-image': WithRef<ImageProps, ImageElement>;
       'ojs-listview': WithRef<ListViewProps, VisualElement>;
+      'ojs-frostedglass': WithRef<FrostedGlassIntrinsicProps, FrostedGlassElement>;
     }
   }
 }
@@ -174,6 +179,17 @@ export const ListView = forwardRef<VisualElement, ListViewProps>((props, ref) =>
 });
 ListView.displayName = 'ListView';
 
+export const FrostedGlass = forwardRef<FrostedGlassElement, FrostedGlassProps>(({ blur, tint, ...rest }, ref) => {
+  const parsedTint = useMemo(() => {
+    if (!tint) return new CS.UnityEngine.Color(1, 1, 1, 0.15)
+    const m = tint.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+))?\s*\)/)
+    if (m) return new CS.UnityEngine.Color(+m[1] / 255, +m[2] / 255, +m[3] / 255, m[4] != null ? +m[4] : 1)
+    return new CS.UnityEngine.Color(1, 1, 1, 0.15)
+  }, [tint])
+  return <ojs-frostedglass ref={ref} blurRadius={blur ?? 10} tintColor={parsedTint} {...rest} />;
+});
+FrostedGlass.displayName = 'FrostedGlass';
+
 /**
  * Create a typed React component for a registered custom element.
  * Use with `registerElement()` to add custom C# VisualElement types to React.

package/src/host-config.ts

@@ -60,6 +60,7 @@ declare const CS: {
         };
         ScaleMode: CSEnum;
         Rect: new (...args: any[]) => any;
+        Color: new (r: number, g: number, b: number, a: number) => any;
     };
     OneJS: {
         GPU: {
@@ -68,6 +69,7 @@ declare const CS: {
                 SetElementBackgroundFromObject: (element: CSObject, obj: CSObject) => void;
                 ClearElementBackgroundImage: (element: CSObject) => void;
             };
+            FrostedGlassElement: new () => CSObject;
         };
     };
 };
@@ -173,6 +175,7 @@ const TYPE_MAP: Record<string, () => CSObject> = {
     'ojs-scrollview': () => new CS.UnityEngine.UIElements.ScrollView(),
     'ojs-image': () => new CS.UnityEngine.UIElements.Image(),
     'ojs-listview': () => new CS.UnityEngine.UIElements.ListView(),
+    'ojs-frostedglass': () => new CS.OneJS.GPU.FrostedGlassElement(),
 };
 
 // Built-in types with specific prop handling in applyComponentProps
@@ -800,6 +803,10 @@ function applyComponentProps(element: CSObject, type: string, props: Record<stri
         applyScrollViewProps(element as CSScrollView, props);
     } else if (type === 'ojs-listview') {
         applyListViewProps(element as CSListView, props);
+    } else if (type === 'ojs-frostedglass') {
+        const el = element as any;
+        if (props.blurRadius !== undefined) el.BlurRadius = props.blurRadius;
+        if (props.tintColor !== undefined) el.TintColor = props.tintColor;
     }
 }
 

package/src/index.ts

@@ -10,6 +10,7 @@ export {
   ScrollView,
   Image,
   ListView,
+  FrostedGlass,
   clearImageCache,
   createComponent,
 } from './components';
@@ -83,6 +84,7 @@ export type {
   ScrollViewProps,
   ImageProps,
   ListViewProps,
+  FrostedGlassProps,
   // Container type for render()
   RenderContainer,
   // Element types for refs
@@ -95,6 +97,7 @@ export type {
   SliderElement,
   ScrollViewElement,
   ImageElement,
+  FrostedGlassElement,
   // Vector drawing types
   Vector2,
   Color,

package/src/types.ts

@@ -674,6 +674,24 @@ export interface ImageElement extends VisualElement {
 
 // ListView uses Unity's virtualization callbacks directly
 // This is intentionally imperative - ListView manages its own element recycling
+export interface FrostedGlassProps extends BaseProps {
+  /** Blur radius in screen pixels. Higher = more blurry. Default: 10. */
+  blur?: number;
+  /** Tint color overlaid on the blurred background (CSS color string). */
+  tint?: string;
+}
+
+/** Internal props for the ojs-frostedglass intrinsic element */
+export interface FrostedGlassIntrinsicProps extends BaseProps {
+  blurRadius?: number;
+  tintColor?: any;
+}
+
+export interface FrostedGlassElement extends VisualElement {
+  blurRadius: number;
+  tintColor: any;
+}
+
 export interface ListViewProps extends BaseProps {
   // Data source - the array of items to display
   itemsSource: unknown[];