feat: add image mask options and update related schemas and styles

sidecar/src/api/index.ts

@@ -28,6 +28,13 @@ import { BrowserExtensionAPI } from './browserExtension';
 import { Clipboard } from './clipboard';
 import * as OAuth from './oauth';
 
+const Image = {
+	Mask: {
+		Circle: 'circle',
+		RoundedRectangle: 'roundedRectangle'
+	}
+};
+
 let currentPluginName: string | null = null;
 let currentPluginPreferences: Array<{
 	name: string;
@@ -55,6 +62,7 @@ export const getRaycastApi = () => {
 		Color,
 		Cache,
 		Icon,
+		Image,
 		LaunchType,
 		Toast,
 		OAuth,

src/lib/components/Icon.svelte

@@ -16,9 +16,18 @@
 	);
 	const iconInfo = $derived(resolveIcon(icon, assetsPath));
 
-	const maskStyles = $derived(
+	const maskStyles = $derived.by(() => {
-		iconInfo?.type === 'image' && iconInfo.mask === 'Circle' ? 'border-radius: 50%;' : ''
+		if (iconInfo?.type !== 'image' || !iconInfo.mask) {
-	);
+			return '';
+		}
+		if (iconInfo.mask === 'circle') {
+			return 'border-radius: 50%;';
+		}
+		if (iconInfo.mask === 'roundedRectangle') {
+			return 'border-radius: 0.375rem;';
+		}
+		return '';
+	});
 </script>
 
 {#if iconInfo}

src/lib/props/image.ts

@@ -1,5 +1,7 @@
 import { z } from 'zod/v4';
 
+export const ImageMaskSchema = z.enum(['circle', 'roundedRectangle']);
+
 export const RaycastIconSchema = z.templateLiteral([z.string(), '-16']);
 
 export const ImageLikeSchema = z.union([
@@ -7,7 +9,7 @@ export const ImageLikeSchema = z.union([
 	z.string(),
 	z.object({
 		source: z.union([z.string(), z.object({ light: z.string(), dark: z.string() })]),
-		mask: z.string().optional()
+		mask: ImageMaskSchema.optional()
 	})
 ]);
 export type ImageLike = z.infer<typeof ImageLikeSchema>;