diff --git a/sidecar/src/api/index.ts b/sidecar/src/api/index.ts index 6d750e4..85875e1 100644 --- a/sidecar/src/api/index.ts +++ b/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, diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte index f8ab7f0..52b46fd 100644 --- a/src/lib/components/Icon.svelte +++ b/src/lib/components/Icon.svelte @@ -16,9 +16,18 @@ ); const iconInfo = $derived(resolveIcon(icon, assetsPath)); - const maskStyles = $derived( - iconInfo?.type === 'image' && iconInfo.mask === 'Circle' ? 'border-radius: 50%;' : '' - ); + const maskStyles = $derived.by(() => { + 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 ''; + }); {#if iconInfo} diff --git a/src/lib/props/image.ts b/src/lib/props/image.ts index ad06ec5..d0ee19e 100644 --- a/src/lib/props/image.ts +++ b/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;