Asset Browser Modal Component (#5607)

* [ci] ignore playwright mcp directory

* [feat] add AssetBrowserModal

And all related sub components

* [feat] reactive filter functions

* [ci] clean up storybook config

* [feat] add sematic AssetCard

* [fix] i love lucide

* [fix] AssetCard layout issues

* [fix] add AssetBadge type

* [fix] simplify useAssetBrowser

* [fix] modal layout

* [fix] simplify useAssetBrowserDialog

* [fix] add tailwind back to storybook

* [fix] better reponsive layout

* [fix] missed i18n string

* [fix] missing i18n translations

* [fix] remove erroneous prevent on keyboard.space

* [feat] add asset metadata validation utilities

* [fix] remove erroneous test code

* [fix] remove forced min and max width on AssetCard

* [fix] import statement nits

src/platform/assets/composables/useAssetBrowserDialog.ts

@@ -0,0 +1,66 @@
+import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
+import { useDialogStore } from '@/stores/dialogStore'
+
+interface AssetBrowserDialogProps {
+  /** ComfyUI node type for context (e.g., 'CheckpointLoaderSimple') */
+  nodeType: string
+  /** Widget input name (e.g., 'ckpt_name') */
+  inputName: string
+  /** Current selected asset value */
+  currentValue?: string
+  /** Callback for when an asset is selected */
+  onAssetSelected?: (assetPath: string) => void
+}
+
+export const useAssetBrowserDialog = () => {
+  const dialogStore = useDialogStore()
+  const dialogKey = 'global-asset-browser'
+
+  function hide() {
+    dialogStore.closeDialog({ key: dialogKey })
+  }
+
+  function show(props: AssetBrowserDialogProps) {
+    const handleAssetSelected = (assetPath: string) => {
+      props.onAssetSelected?.(assetPath)
+      hide() // Auto-close on selection
+    }
+
+    const handleClose = () => {
+      hide()
+    }
+
+    // Default dialog configuration for AssetBrowserModal
+    const dialogComponentProps = {
+      headless: true,
+      modal: true,
+      closable: false,
+      pt: {
+        root: {
+          class: 'rounded-2xl overflow-hidden'
+        },
+        header: {
+          class: 'p-0 hidden'
+        },
+        content: {
+          class: 'p-0 m-0 h-full w-full'
+        }
+      }
+    }
+
+    dialogStore.showDialog({
+      key: dialogKey,
+      component: AssetBrowserModal,
+      props: {
+        nodeType: props.nodeType,
+        inputName: props.inputName,
+        currentValue: props.currentValue,
+        onSelect: handleAssetSelected,
+        onClose: handleClose
+      },
+      dialogComponentProps
+    })
+  }
+
+  return { show, hide }
+}