fix(hub-ui): normalize explicit mask URLs

Author: dvcolomban

packages/hub-ui/src/client/components/icons/IconifyIcon.vue

@@ -6,7 +6,7 @@ const props = defineProps<{
   icon: string
 }>()
 
-const maskUrl = computed(() => props.icon.startsWith('mask:') ? props.icon.slice(5) : undefined)
+const maskUrl = computed(() => props.icon.startsWith('mask:') ? props.icon.slice(5).trim() : undefined)
 const isUrlIcon = computed(() => maskUrl.value !== undefined || props.icon.includes('/') || props.icon.startsWith('data:') || props.icon.startsWith('builtin:'))
 const iconifyParsed = computed(() => {
   if (isUrlIcon.value)

packages/hub/src/client/dock-resources.test.ts

@@ -39,6 +39,14 @@ describe('dock resource resolution', () => {
     expect(resolveDockIcon(icon, connection)).toEqual({ light: data, dark: 'mask:http://localhost:5173/__devtools/dark.svg' })
   })
 
+  it('trims mask URLs and preserves empty masks without resolving the metadata URL', () => {
+    expect.assertions(4)
+    expect(resolveDockIcon('mask: ./icon.svg ', connection)).toBe('mask:http://localhost:5173/__devtools/icon.svg')
+    expect(resolveDockIcon('mask: data:image/svg+xml,%3Csvg%2F%3E ', connection)).toBe('mask:data:image/svg+xml,%3Csvg%2F%3E')
+    expect(resolveDockIcon('mask:', connection)).toBe('mask:')
+    expect(resolveDockIcon('mask:   ', connection)).toBe('mask:')
+  })
+
   it('resolves light and dark icon variants independently', () => {
     expect(resolveDockIcon({
       light: './icons/light.svg',

packages/hub/src/client/dock-resources.ts

@@ -22,8 +22,11 @@ function resolveResourceUrl(value: string, connection: DevframeConnection): stri
 function resolveIconUrl(value: string, connection: DevframeConnection): string {
   const url = value.trim()
   if (url.startsWith('mask:')) {
+    const maskUrl = url.slice(5).trim()
+    if (!maskUrl)
+      return 'mask:'
     try {
-      return `mask:${new URL(url.slice(5), connection.metaBaseUrl).href}`
+      return `mask:${new URL(maskUrl, connection.metaBaseUrl).href}`
     }
     catch {
       return url

plugins/terminals/app/client/App.svelte

@@ -357,7 +357,7 @@
       class="shrink-0 w-1em h-1em {className}"
       aria-hidden="true"
       style:background-color="currentColor"
-      style:mask={`url(${JSON.stringify(icon.slice(5))}) center / contain no-repeat`}
+      style:mask={`url(${JSON.stringify(icon.slice(5).trim())}) center / contain no-repeat`}
       style:mask-mode="alpha"
     ></div>
   {:else}