canvu-react 0.4.60 → 0.4.61

package/dist/native.d.cts

@@ -247,6 +247,9 @@ type NativeRemotePresenceHit = {
     readonly peerId?: string;
 };
 
+type NativeVectorStyleInspectorPlacement = "bottom" | "top-left";
+type NativeVectorStyleInspectorOverlayStyle = StyleProp<ViewStyle>;
+
 type NativeCustomShapePlacementOptions = {
     readonly toolId: string;
     readonly createItem: (args: {
@@ -385,7 +388,14 @@ type NativeVectorViewportProps = {
     readonly overlay?: React.ReactNode;
     readonly toolbar?: React.ReactNode;
     readonly showStyleInspector?: boolean;
-    readonly styleInspectorPlacement?: "bottom" | "top-left";
+    readonly styleInspectorPlacement?: NativeVectorStyleInspectorPlacement;
+    /**
+     * Overrides the outer container style used to position the native style inspector.
+     *
+     * Use this when your app overlays custom headers, footers, or safe-area chrome
+     * above the canvas and needs to move the inspector away from those controls.
+     */
+    readonly styleInspectorOverlayStyle?: NativeVectorStyleInspectorOverlayStyle;
 };
 declare const NativeVectorViewport: react.ForwardRefExoticComponent<NativeVectorViewportProps & react.RefAttributes<NativeVectorViewportHandle>>;
 

package/dist/native.d.ts

@@ -247,6 +247,9 @@ type NativeRemotePresenceHit = {
     readonly peerId?: string;
 };
 
+type NativeVectorStyleInspectorPlacement = "bottom" | "top-left";
+type NativeVectorStyleInspectorOverlayStyle = StyleProp<ViewStyle>;
+
 type NativeCustomShapePlacementOptions = {
     readonly toolId: string;
     readonly createItem: (args: {
@@ -385,7 +388,14 @@ type NativeVectorViewportProps = {
     readonly overlay?: React.ReactNode;
     readonly toolbar?: React.ReactNode;
     readonly showStyleInspector?: boolean;
-    readonly styleInspectorPlacement?: "bottom" | "top-left";
+    readonly styleInspectorPlacement?: NativeVectorStyleInspectorPlacement;
+    /**
+     * Overrides the outer container style used to position the native style inspector.
+     *
+     * Use this when your app overlays custom headers, footers, or safe-area chrome
+     * above the canvas and needs to move the inspector away from those controls.
+     */
+    readonly styleInspectorOverlayStyle?: NativeVectorStyleInspectorOverlayStyle;
 };
 declare const NativeVectorViewport: react.ForwardRefExoticComponent<NativeVectorViewportProps & react.RefAttributes<NativeVectorViewportHandle>>;
 

package/dist/native.js

@@ -5368,6 +5368,35 @@ function duplicateNativeSelectedShapes(input) {
   });
 }
 
+// src/native/native-style-inspector-overlay.ts
+function resolveNativeStyleInspectorOverlayStyle({
+  placement,
+  overlayElevation,
+  overlayStyle,
+  overlayZIndex
+}) {
+  const placementStyle = placement === "top-left" ? {
+    position: "absolute",
+    left: 16,
+    top: 104,
+    alignItems: "flex-start"
+  } : {
+    position: "absolute",
+    left: 16,
+    right: 16,
+    bottom: 84,
+    alignItems: "center"
+  };
+  return [
+    placementStyle,
+    {
+      zIndex: overlayZIndex,
+      elevation: overlayElevation
+    },
+    overlayStyle
+  ];
+}
+
 // src/native/native-transient-items.ts
 function moveNativeTransientItems({
   items,
@@ -5664,7 +5693,8 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   overlay,
   toolbar,
   showStyleInspector = false,
-  styleInspectorPlacement = "bottom"
+  styleInspectorPlacement = "bottom",
+  styleInspectorOverlayStyle
 }, ref) {
   const [size, setSize] = useState({ width: 0, height: 0 });
   const cameraRef = useRef(null);
@@ -6898,22 +6928,12 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
         View,
         {
           pointerEvents: "box-none",
-          style: styleInspectorPlacement === "top-left" ? {
-            position: "absolute",
-            left: 16,
-            top: 104,
-            alignItems: "flex-start",
-            zIndex: NATIVE_VIEWPORT_OVERLAY_Z_INDEX,
-            elevation: NATIVE_VIEWPORT_OVERLAY_ELEVATION
-          } : {
-            position: "absolute",
-            left: 16,
-            right: 16,
-            bottom: 84,
-            alignItems: "center",
-            zIndex: NATIVE_VIEWPORT_OVERLAY_Z_INDEX,
-            elevation: NATIVE_VIEWPORT_OVERLAY_ELEVATION
-          },
+          style: resolveNativeStyleInspectorOverlayStyle({
+            placement: styleInspectorPlacement,
+            overlayElevation: NATIVE_VIEWPORT_OVERLAY_ELEVATION,
+            overlayStyle: styleInspectorOverlayStyle,
+            overlayZIndex: NATIVE_VIEWPORT_OVERLAY_Z_INDEX
+          }),
           children: /* @__PURE__ */ jsx(
             NativeVectorStyleInspector,
             {