Style update

• adjust padding to be uniform in menu and sub menus

apps/website/e2e/affiliates.spec.ts

@@ -1,38 +1,18 @@
 import { expect } from '@playwright/test'
 
-import {
-  AFFILIATE_FAQ_COUNT,
-  AFFILIATE_FAQ_PREFIX
-} from '../src/components/affiliates/affiliateFaqs'
-import { programDetailRows } from '../src/components/affiliates/programDetails'
-import type { TranslationKey } from '../src/i18n/translations'
+import { affiliateFaqs } from '../src/data/affiliateFaq'
 import { t } from '../src/i18n/translations'
 import { test } from './fixtures/blockExternalMedia'
 
-const FIRST_FAQ_QUESTION = t(
-  `${AFFILIATE_FAQ_PREFIX}.1.q` as TranslationKey,
-  'en'
-)
-const FIRST_FAQ_ANSWER = t(
-  `${AFFILIATE_FAQ_PREFIX}.1.a` as TranslationKey,
-  'en'
-)
-const FIRST_PROGRAM_DETAIL_LABEL = t(programDetailRows[0].labelKey, 'en')
-const FIRST_PROGRAM_DETAIL_VALUE = t(programDetailRows[0].valueKey, 'en')
-const PROGRAM_DETAIL_TABLE_ROW_COUNT = programDetailRows.length + 1
-
 const PATH = '/affiliates'
 const APPLY_URL = 'https://forms.gle/RS8L2ttcuGap4Q1v6'
-
-const SECTION_TESTIDS = [
-  'affiliate-hero',
-  'affiliate-trust-band',
-  'affiliate-how-it-works',
-  'affiliate-audience',
-  'affiliate-program-details',
-  'affiliate-brand-assets',
-  'affiliate-footer-cta'
-] as const
+const TERMS_PATH = '/affiliates/terms'
+const FAQ_COUNT = affiliateFaqs.length
+const FIRST_FAQ = affiliateFaqs[0]
+const HERO_HEADING_TEXT = `${t('affiliate.hero.headingHighlight', 'en')} ${t('affiliate.hero.headingMuted', 'en')}`
+const CTA_HEADING_TEXT = t('affiliate.cta.heading', 'en')
+const CTA_APPLY_LABEL = t('affiliate.cta.apply', 'en')
+const CTA_TERMS_LABEL = t('affiliate.cta.termsLabel', 'en')
 
 test.describe('Affiliates landing — desktop @smoke', () => {
   test.beforeEach(async ({ page }) => {
@@ -41,32 +21,38 @@ test.describe('Affiliates landing — desktop @smoke', () => {
 
   test('renders the hero heading and is indexable', async ({ page }) => {
     await expect(
-      page.getByRole('heading', { name: 'Become a Comfy Partner', level: 1 })
+      page.getByRole('heading', { level: 1, name: HERO_HEADING_TEXT })
     ).toBeVisible()
 
     await expect(page.locator('meta[name="robots"]')).toHaveCount(0)
   })
 
-  test('renders every page section in top-to-bottom order', async ({
-    page
-  }) => {
-    const ys: number[] = []
-    for (const id of SECTION_TESTIDS) {
-      const section = page.getByTestId(id)
-      await expect(section).toBeVisible()
-      const box = await section.boundingBox()
-      expect(box, `${id} bounding box`).not.toBeNull()
-      ys.push(box!.y)
-    }
-    const sortedYs = [...ys].sort((a, b) => a - b)
-    expect(ys).toEqual(sortedYs)
+  test('renders the closing CTA heading and apply button', async ({ page }) => {
+    const ctaSection = page.locator('section').filter({
+      has: page.getByRole('heading', { level: 2, name: CTA_HEADING_TEXT })
+    })
+    const ctaHeading = ctaSection.getByRole('heading', {
+      level: 2,
+      name: CTA_HEADING_TEXT
+    })
+    await ctaHeading.scrollIntoViewIfNeeded()
+    await expect(ctaHeading).toBeVisible()
+
+    const applyButton = ctaSection.getByRole('link', { name: CTA_APPLY_LABEL })
+    await expect(applyButton).toBeVisible()
+    await expect(applyButton).toHaveAttribute('href', APPLY_URL)
+    await expect(applyButton).toHaveAttribute('target', '_blank')
+    await expect(applyButton).toHaveAttribute('rel', 'noopener noreferrer')
   })
 
-  test('renders the program details table on desktop', async ({ page }) => {
-    const table = page.getByTestId('affiliate-program-details-table')
-    await expect(table).toBeVisible()
-    const rows = table.getByRole('row')
-    await expect(rows).toHaveCount(PROGRAM_DETAIL_TABLE_ROW_COUNT)
+  test('CTA section links to the affiliate terms page in the same tab', async ({
+    page
+  }) => {
+    const termsLink = page.getByRole('link', { name: CTA_TERMS_LABEL })
+    await termsLink.scrollIntoViewIfNeeded()
+    await expect(termsLink).toBeVisible()
+    await expect(termsLink).toHaveAttribute('href', TERMS_PATH)
+    await expect(termsLink).not.toHaveAttribute('target', '_blank')
   })
 })
 
@@ -93,42 +79,21 @@ test.describe('Affiliates landing — desktop interactions', () => {
     const parsed = JSON.parse(faqJsonLd!)
     expect(parsed['@type']).toBe('FAQPage')
     expect(Array.isArray(parsed.mainEntity)).toBe(true)
-    expect(parsed.mainEntity.length).toBe(AFFILIATE_FAQ_COUNT)
-  })
-
-  test('hero and footer CTAs target the application form in a new tab', async ({
-    page
-  }) => {
-    const heroCta = page.getByTestId('affiliate-hero-cta')
-    await expect(heroCta).toBeVisible()
-    await expect(heroCta).toHaveAttribute('href', APPLY_URL)
-    await expect(heroCta).toHaveAttribute('target', '_blank')
-    await expect(heroCta).toHaveAttribute('rel', 'noopener noreferrer')
-
-    const footerCta = page.getByTestId('affiliate-footer-cta-button')
-    await expect(footerCta).toHaveAttribute('href', APPLY_URL)
-    await expect(footerCta).toHaveAttribute('target', '_blank')
-    await expect(footerCta).toHaveAttribute('rel', 'noopener noreferrer')
-  })
-
-  test('footer links to the affiliate terms page as a same-tab navigation', async ({
-    page
-  }) => {
-    const link = page
-      .getByTestId('affiliate-footer-cta')
-      .getByRole('link', { name: /Read the affiliate program terms/i })
-    await expect(link).toBeVisible()
-    await expect(link).toBeEnabled()
-    await expect(link).toHaveAttribute('href', '/affiliates/terms')
-    await expect(link).not.toHaveAttribute('target', '_blank')
+    expect(parsed.mainEntity.length).toBe(FAQ_COUNT)
   })
 
   test('Apply Now CTA opens the application form in a new tab', async ({
     page,
     context
   }) => {
+    const ctaSection = page.locator('section').filter({
+      has: page.getByRole('heading', { level: 2, name: CTA_HEADING_TEXT })
+    })
+    const applyButton = ctaSection.getByRole('link', { name: CTA_APPLY_LABEL })
+    await applyButton.scrollIntoViewIfNeeded()
+
     const popupPromise = context.waitForEvent('page')
-    await page.getByTestId('affiliate-hero-cta').click()
+    await applyButton.click()
     const popup = await popupPromise
     await popup.waitForLoadState('domcontentloaded')
     const popupUrl = popup.url()
@@ -140,12 +105,15 @@ test.describe('Affiliates landing — desktop interactions', () => {
   })
 
   test('FAQ items toggle open and closed on click', async ({ page }) => {
-    const firstQuestion = page.getByRole('button', { name: FIRST_FAQ_QUESTION })
+    const firstQuestion = page.getByRole('button', {
+      name: FIRST_FAQ.question.en
+    })
+    await firstQuestion.scrollIntoViewIfNeeded()
     await expect(firstQuestion).toHaveAttribute('aria-expanded', 'false')
 
     await firstQuestion.click()
     await expect(firstQuestion).toHaveAttribute('aria-expanded', 'true')
-    await expect(page.getByText(FIRST_FAQ_ANSWER)).toBeVisible()
+    await expect(page.getByText(FIRST_FAQ.answer.en)).toBeVisible()
 
     await firstQuestion.click()
     await expect(firstQuestion).toHaveAttribute('aria-expanded', 'false')
@@ -157,44 +125,24 @@ test.describe('Affiliates landing — mobile @mobile', () => {
     await page.goto(PATH)
   })
 
-  test('renders the hero heading and primary CTA at narrow viewports', async ({
-    page
-  }) => {
+  test('renders the hero heading at narrow viewports', async ({ page }) => {
     await expect(
-      page.getByRole('heading', { name: 'Become a Comfy Partner', level: 1 })
-    ).toBeVisible()
-    await expect(page.getByTestId('affiliate-hero-cta')).toBeVisible()
-  })
-
-  test('program details collapse to a stacked definition list', async ({
-    page
-  }) => {
-    await expect(
-      page.getByTestId('affiliate-program-details-table')
-    ).toBeHidden()
-    const detailsList = page
-      .getByTestId('affiliate-program-details')
-      .locator('dl')
-    await expect(detailsList).toBeVisible()
-    await expect(
-      detailsList.getByText(FIRST_PROGRAM_DETAIL_LABEL)
-    ).toBeVisible()
-    await expect(
-      detailsList.getByText(FIRST_PROGRAM_DETAIL_VALUE)
+      page.getByRole('heading', { level: 1, name: HERO_HEADING_TEXT })
     ).toBeVisible()
   })
 
-  test('all major sections remain visible without horizontal overflow', async ({
-    page
-  }) => {
-    for (const id of SECTION_TESTIDS) {
-      const section = page.getByTestId(id)
-      await expect(section).toBeVisible()
-      const box = await section.boundingBox()
-      expect(box, `${id} bounding box`).not.toBeNull()
-      expect(box!.x + box!.width).toBeLessThanOrEqual(
-        page.viewportSize()!.width + 1
-      )
-    }
+  test('closing CTA stays within the viewport width', async ({ page }) => {
+    const ctaHeading = page.getByRole('heading', {
+      level: 2,
+      name: CTA_HEADING_TEXT
+    })
+    await ctaHeading.scrollIntoViewIfNeeded()
+    await expect(ctaHeading).toBeVisible()
+
+    const box = await ctaHeading.boundingBox()
+    expect(box, 'CTA heading bounding box').not.toBeNull()
+    expect(box!.x + box!.width).toBeLessThanOrEqual(
+      page.viewportSize()!.width + 1
+    )
   })
 })

apps/website/public/icons/check.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 11.5811L10.2582 18.0581L20 6.05811" stroke="#F2FF59" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

apps/website/scripts/generate-models.ts

@@ -58,7 +58,7 @@ const API_PROVIDER_MAP: Record<string, { name: string; slug: string }> = {
   runway: { name: 'Runway', slug: 'runway' },
   vidu: { name: 'Vidu', slug: 'vidu' },
   bfl: { name: 'Flux (API)', slug: 'flux-api' },
-  grok: { name: 'Grok Image', slug: 'grok-image' },
+  grok: { name: 'Grok Imagine', slug: 'grok-imagine' },
   stability: { name: 'Stability AI', slug: 'stability-ai' },
   bytedance: { name: 'Seedance (ByteDance)', slug: 'seedance-bytedance' },
   bytedace: { name: 'Seedance (ByteDance)', slug: 'seedance-bytedance' },
@@ -86,6 +86,20 @@ const API_PROVIDER_MAP: Record<string, { name: string; slug: string }> = {
   wavespped: { name: 'Wavespeed', slug: 'wavespeed' }
 }
 
+// Stub entries that exist only to issue 301 redirects from old slugs to
+// their new canonical slugs. Keeps renames reproducible across regenerations.
+const LEGACY_SLUG_REDIRECTS: OutputModel[] = [
+  {
+    slug: 'grok-image',
+    canonicalSlug: 'grok-imagine',
+    name: 'Grok Image',
+    displayName: 'Grok Image',
+    directory: 'partner_nodes',
+    huggingFaceUrl: '',
+    workflowCount: 0
+  }
+]
+
 function stripExt(name: string): string {
   return name.replace(/\.(safetensors|ckpt|pt|bin)$/, '')
 }
@@ -299,7 +313,8 @@ function run(): void {
       throw new Error(
         `Failed to parse ${file}: ${
           error instanceof Error ? error.message : String(error)
-        }`
+        }`,
+        { cause: error }
       )
     }
   }
@@ -367,7 +382,7 @@ function run(): void {
       displayName: m.name
     }))
 
-  const combined = [...apiOutput, ...output]
+  const combined = [...apiOutput, ...output, ...LEGACY_SLUG_REDIRECTS]
 
   const withThumbs = combined.filter((m) => m.thumbnailUrl).length
   process.stdout.write(

apps/website/src/components/affiliates/AudienceSection.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import type { Locale, TranslationKey } from '../../i18n/translations'
-
-import { t } from '../../i18n/translations'
-import SectionHeader from '../common/SectionHeader.vue'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const audienceKeys: TranslationKey[] = [
-  'affiliate-landing.audience.item.0',
-  'affiliate-landing.audience.item.1',
-  'affiliate-landing.audience.item.2',
-  'affiliate-landing.audience.item.3',
-  'affiliate-landing.audience.item.4'
-]
-</script>
-
-<template>
-  <section
-    class="px-6 py-20 md:px-20 md:py-28"
-    data-testid="affiliate-audience"
-  >
-    <SectionHeader>
-      {{ t('affiliate-landing.audience.heading', locale) }}
-    </SectionHeader>
-    <ul class="mx-auto mt-12 flex max-w-3xl flex-col gap-4">
-      <li
-        v-for="key in audienceKeys"
-        :key="key"
-        class="text-primary-comfy-canvas flex items-start gap-4 text-base md:text-lg"
-      >
-        <span
-          class="bg-primary-comfy-yellow text-primary-comfy-ink mt-1 inline-flex size-6 shrink-0 items-center justify-center rounded-full text-xs font-bold"
-          aria-hidden="true"
-        >
-          ✓
-        </span>
-        <span>{{ t(key, locale) }}</span>
-      </li>
-    </ul>
-  </section>
-</template>

apps/website/src/components/affiliates/BrandAssetsSection.vue

@@ -1,62 +0,0 @@
-<script setup lang="ts">
-import type { Locale } from '../../i18n/translations'
-
-import { t } from '../../i18n/translations'
-import SectionHeader from '../common/SectionHeader.vue'
-import { brandAssets } from './brandAssets'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-</script>
-
-<template>
-  <section
-    class="px-6 py-20 md:px-20 md:py-28"
-    data-testid="affiliate-brand-assets"
-  >
-    <SectionHeader>
-      {{ t('affiliate-landing.assets.heading', locale) }}
-      <template #subtitle>
-        <p
-          class="text-primary-comfy-canvas/70 mx-auto mt-4 max-w-2xl text-base"
-        >
-          {{ t('affiliate-landing.assets.subheading', locale) }}
-        </p>
-      </template>
-    </SectionHeader>
-    <ul
-      class="mx-auto mt-12 grid max-w-6xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4"
-    >
-      <li
-        v-for="asset in brandAssets"
-        :key="asset.id"
-        class="bg-transparency-white-t4 border-primary-comfy-canvas/10 flex flex-col overflow-hidden rounded-4xl border"
-        :data-testid="`affiliate-asset-${asset.id}`"
-      >
-        <div
-          class="bg-primary-comfy-ink/40 flex aspect-video items-center justify-center overflow-hidden p-6"
-        >
-          <img
-            :src="asset.preview"
-            :alt="t(asset.titleKey, locale)"
-            class="max-h-full max-w-full object-contain"
-            loading="lazy"
-            decoding="async"
-          />
-        </div>
-        <div class="flex flex-1 flex-col gap-2 p-5">
-          <h3 class="text-primary-comfy-canvas text-base font-light">
-            {{ t(asset.titleKey, locale) }}
-          </h3>
-          <a
-            :href="asset.download"
-            :download="asset.download.split('/').pop()"
-            class="text-primary-comfy-yellow mt-auto inline-flex items-center gap-1 text-sm font-bold tracking-wider uppercase hover:underline"
-          >
-            {{ t('affiliate-landing.assets.downloadLabel', locale) }}
-            <span aria-hidden="true">↓</span>
-          </a>
-        </div>
-      </li>
-    </ul>
-  </section>
-</template>

apps/website/src/components/affiliates/FooterCtaSection.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-import type { Locale } from '../../i18n/translations'
-
-import { externalLinks, getRoutes } from '../../config/routes'
-import { t } from '../../i18n/translations'
-import BrandButton from '../common/BrandButton.vue'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const routes = getRoutes(locale)
-</script>
-
-<template>
-  <section
-    class="bg-secondary-mauve/30 border-primary-comfy-canvas/10 mt-12 border-t px-6 py-20 text-center md:py-28"
-    data-testid="affiliate-footer-cta"
-  >
-    <h2
-      class="text-primary-comfy-canvas text-3xl font-light md:text-4xl lg:text-5xl"
-    >
-      {{ t('affiliate-landing.footerCta.heading', locale) }}
-    </h2>
-    <div class="mt-8 flex flex-col items-center gap-4">
-      <BrandButton
-        :href="externalLinks.affiliateApplicationForm"
-        target="_blank"
-        rel="noopener noreferrer"
-        size="lg"
-        :aria-label="t('affiliate-landing.cta.applyAriaLabel', locale)"
-        data-testid="affiliate-footer-cta-button"
-        class="px-8 py-4 text-base"
-      >
-        {{ t('affiliate-landing.cta.apply', locale) }}
-      </BrandButton>
-      <a
-        :href="routes.affiliateTerms"
-        class="text-primary-comfy-canvas/70 text-sm underline-offset-4 hover:underline"
-      >
-        {{ t('affiliate-landing.footerCta.termsLink', locale) }}
-      </a>
-    </div>
-  </section>
-</template>

apps/website/src/components/affiliates/HeroSection.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import type { Locale, TranslationKey } from '../../i18n/translations'
-
-import { externalLinks } from '../../config/routes'
-import { t } from '../../i18n/translations'
-import BrandButton from '../common/BrandButton.vue'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const highlightKeys: TranslationKey[] = [
-  'affiliate-landing.hero.highlight.0',
-  'affiliate-landing.hero.highlight.1',
-  'affiliate-landing.hero.highlight.2',
-  'affiliate-landing.hero.highlight.3'
-]
-</script>
-
-<template>
-  <section
-    class="max-w-9xl mx-auto flex flex-col items-stretch gap-10 px-6 pt-12 pb-16 lg:flex-row lg:items-center lg:gap-16 lg:px-20 lg:pt-20 lg:pb-24"
-    data-testid="affiliate-hero"
-  >
-    <div class="flex-1">
-      <h1
-        class="text-primary-comfy-canvas text-4xl/tight font-light md:text-5xl/tight lg:text-6xl/tight"
-      >
-        {{ t('affiliate-landing.hero.heading', locale) }}
-      </h1>
-      <p
-        class="text-primary-comfy-yellow mt-4 text-2xl font-light md:text-3xl lg:text-4xl"
-      >
-        {{ t('affiliate-landing.hero.subheading', locale) }}
-      </p>
-      <p class="text-primary-comfy-canvas/80 mt-6 max-w-xl text-base">
-        {{ t('affiliate-landing.hero.body', locale) }}
-      </p>
-      <ul class="mt-6 flex flex-col gap-3">
-        <li
-          v-for="key in highlightKeys"
-          :key="key"
-          class="text-primary-comfy-canvas flex items-start gap-3 text-base"
-        >
-          <span
-            class="bg-primary-comfy-yellow text-primary-comfy-ink mt-1 inline-flex size-5 shrink-0 items-center justify-center rounded-full text-xs font-bold"
-            aria-hidden="true"
-          >
-            ✓
-          </span>
-          <span>{{ t(key, locale) }}</span>
-        </li>
-      </ul>
-      <div class="mt-8">
-        <BrandButton
-          :href="externalLinks.affiliateApplicationForm"
-          target="_blank"
-          rel="noopener noreferrer"
-          size="lg"
-          :aria-label="t('affiliate-landing.cta.applyAriaLabel', locale)"
-          data-testid="affiliate-hero-cta"
-          class="px-8 py-4 text-base"
-        >
-          {{ t('affiliate-landing.cta.apply', locale) }}
-        </BrandButton>
-      </div>
-    </div>
-
-    <div
-      class="flex flex-1 items-center justify-center"
-      data-testid="affiliate-hero-media"
-    >
-      <slot name="media">
-        <video
-          src="https://media.comfy.org/website/homepage/showcase/ui-overview.webm"
-          autoplay
-          loop
-          muted
-          playsinline
-          aria-hidden="true"
-          class="w-full max-w-xl rounded-4xl"
-        />
-      </slot>
-    </div>
-  </section>
-</template>

apps/website/src/components/affiliates/HowItWorksSection.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import type { Locale, TranslationKey } from '../../i18n/translations'
-
-import { t } from '../../i18n/translations'
-import SectionHeader from '../common/SectionHeader.vue'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const steps: { titleKey: TranslationKey; bodyKey: TranslationKey }[] = [
-  {
-    titleKey: 'affiliate-landing.how.step.0.title',
-    bodyKey: 'affiliate-landing.how.step.0.body'
-  },
-  {
-    titleKey: 'affiliate-landing.how.step.1.title',
-    bodyKey: 'affiliate-landing.how.step.1.body'
-  },
-  {
-    titleKey: 'affiliate-landing.how.step.2.title',
-    bodyKey: 'affiliate-landing.how.step.2.body'
-  }
-]
-</script>
-
-<template>
-  <section
-    class="px-6 py-20 md:px-20 md:py-28"
-    data-testid="affiliate-how-it-works"
-  >
-    <SectionHeader>
-      {{ t('affiliate-landing.how.heading', locale) }}
-    </SectionHeader>
-    <ol
-      class="mx-auto mt-12 grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3 md:gap-8"
-    >
-      <li
-        v-for="(step, index) in steps"
-        :key="step.titleKey"
-        class="bg-transparency-white-t4 border-primary-comfy-canvas/10 flex flex-col gap-4 rounded-4xl border p-8"
-      >
-        <span
-          class="text-primary-comfy-yellow text-sm font-bold tracking-widest uppercase"
-        >
-          {{ index + 1 }}
-        </span>
-        <h3 class="text-primary-comfy-canvas text-2xl font-light">
-          {{ t(step.titleKey, locale) }}
-        </h3>
-        <p class="text-primary-comfy-canvas/70 text-sm">
-          {{ t(step.bodyKey, locale) }}
-        </p>
-      </li>
-    </ol>
-  </section>
-</template>

apps/website/src/components/affiliates/ProgramDetailsSection.vue

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import type { Locale } from '../../i18n/translations'
-
-import { t } from '../../i18n/translations'
-import SectionHeader from '../common/SectionHeader.vue'
-import { programDetailRows } from './programDetails'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-</script>
-
-<template>
-  <section
-    class="px-6 py-20 md:px-20 md:py-28"
-    data-testid="affiliate-program-details"
-  >
-    <SectionHeader>
-      {{ t('affiliate-landing.details.heading', locale) }}
-    </SectionHeader>
-    <div class="mx-auto mt-12 max-w-3xl">
-      <div class="hidden md:block">
-        <table
-          class="w-full border-collapse text-left"
-          data-testid="affiliate-program-details-table"
-        >
-          <thead>
-            <tr class="border-primary-comfy-canvas/20 border-b">
-              <th
-                scope="col"
-                class="text-primary-comfy-yellow py-4 pr-6 text-xs font-bold tracking-widest uppercase"
-              >
-                {{ t('affiliate-landing.details.headerLabel', locale) }}
-              </th>
-              <th
-                scope="col"
-                class="text-primary-comfy-yellow py-4 text-xs font-bold tracking-widest uppercase"
-              >
-                {{ t('affiliate-landing.details.headerValue', locale) }}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="row in programDetailRows"
-              :key="row.labelKey"
-              class="border-primary-comfy-canvas/10 border-b"
-            >
-              <th
-                scope="row"
-                class="text-primary-comfy-canvas py-5 pr-6 text-base font-light"
-              >
-                {{ t(row.labelKey, locale) }}
-              </th>
-              <td class="text-primary-comfy-canvas/80 py-5 text-base">
-                {{ t(row.valueKey, locale) }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <dl class="flex flex-col gap-6 md:hidden">
-        <div
-          v-for="row in programDetailRows"
-          :key="row.labelKey"
-          class="border-primary-comfy-canvas/10 flex flex-col gap-1 border-b pb-4"
-        >
-          <dt
-            class="text-primary-comfy-yellow text-xs font-bold tracking-widest uppercase"
-          >
-            {{ t(row.labelKey, locale) }}
-          </dt>
-          <dd class="text-primary-comfy-canvas text-base">
-            {{ t(row.valueKey, locale) }}
-          </dd>
-        </div>
-      </dl>
-    </div>
-  </section>
-</template>

apps/website/src/components/affiliates/TrustBandSection.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { Locale } from '../../i18n/translations'
-
-import { t } from '../../i18n/translations'
-
-const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-</script>
-
-<template>
-  <section
-    class="border-primary-comfy-canvas/10 border-y px-6 py-10 text-center md:py-12"
-    data-testid="affiliate-trust-band"
-  >
-    <p
-      class="text-primary-comfy-canvas text-sm tracking-wider uppercase md:text-base"
-    >
-      {{ t('affiliate-landing.trust.label', locale) }}
-    </p>
-  </section>
-</template>

apps/website/src/components/affiliates/affiliateFaqs.ts

@@ -1,6 +0,0 @@
-import type { TranslationKey } from '../../i18n/translations'
-
-export const AFFILIATE_FAQ_PREFIX = 'affiliate-landing.faq'
-export const AFFILIATE_FAQ_HEADING_KEY: TranslationKey =
-  'affiliate-landing.faq.heading'
-export const AFFILIATE_FAQ_COUNT = 8

apps/website/src/components/affiliates/affiliateLanding.test.ts

@@ -1,154 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { hasKey, t, translationKeys } from '../../i18n/translations'
-import {
-  AFFILIATE_FAQ_COUNT,
-  AFFILIATE_FAQ_HEADING_KEY,
-  AFFILIATE_FAQ_PREFIX
-} from './affiliateFaqs'
-import { brandAssets } from './brandAssets'
-
-const PREFIX = 'affiliate-landing'
-
-const EXPECTED_SECTION_PREFIXES = [
-  'page',
-  'cta',
-  'hero',
-  'trust',
-  'how',
-  'audience',
-  'details',
-  'assets',
-  'faq',
-  'footerCta'
-] as const
-
-const HERO_HIGHLIGHT_COUNT = 4
-const HOW_STEP_COUNT = 3
-const AUDIENCE_ITEM_COUNT = 5
-const DETAILS_ROW_COUNT = 6
-
-const INTERNAL_KEY_PATTERNS = [
-  /open-questions/,
-  /todo/i,
-  /draft/i,
-  /placeholder/i,
-  /internal/i
-]
-
-function affiliateKeys(): string[] {
-  return translationKeys.filter((k) => k.startsWith(`${PREFIX}.`))
-}
-
-describe('affiliate landing i18n', () => {
-  it('exposes the canonical top-level section prefixes', () => {
-    const keys = affiliateKeys()
-    for (const section of EXPECTED_SECTION_PREFIXES) {
-      const hit = keys.some((k) => k.startsWith(`${PREFIX}.${section}.`))
-      expect(hit, `missing section: ${section}`).toBe(true)
-    }
-  })
-
-  it('orders sections as the page renders them', () => {
-    const keys = affiliateKeys()
-    const seenSections: string[] = []
-    for (const key of keys) {
-      const section = key.split('.')[1]
-      if (!section) continue
-      if (!seenSections.includes(section)) seenSections.push(section)
-    }
-    const orderedExpected = EXPECTED_SECTION_PREFIXES.filter((s) =>
-      seenSections.includes(s)
-    )
-    const orderedActual = seenSections.filter((s) =>
-      (EXPECTED_SECTION_PREFIXES as readonly string[]).includes(s)
-    )
-    expect(orderedActual).toEqual([...orderedExpected])
-  })
-
-  it('exposes hero, page, and cta keys editors will need', () => {
-    expect(hasKey(`${PREFIX}.page.title`)).toBe(true)
-    expect(hasKey(`${PREFIX}.page.description`)).toBe(true)
-    expect(hasKey(`${PREFIX}.cta.apply`)).toBe(true)
-    expect(hasKey(`${PREFIX}.cta.applyAriaLabel`)).toBe(true)
-    expect(hasKey(`${PREFIX}.hero.heading`)).toBe(true)
-    expect(hasKey(`${PREFIX}.hero.subheading`)).toBe(true)
-    expect(hasKey(`${PREFIX}.hero.body`)).toBe(true)
-    for (let i = 0; i < HERO_HIGHLIGHT_COUNT; i++) {
-      expect(hasKey(`${PREFIX}.hero.highlight.${i}`)).toBe(true)
-    }
-  })
-
-  it('exposes the trust band, how-it-works, and audience copy', () => {
-    expect(hasKey(`${PREFIX}.trust.label`)).toBe(true)
-    expect(hasKey(`${PREFIX}.how.heading`)).toBe(true)
-    for (let i = 0; i < HOW_STEP_COUNT; i++) {
-      expect(hasKey(`${PREFIX}.how.step.${i}.title`)).toBe(true)
-      expect(hasKey(`${PREFIX}.how.step.${i}.body`)).toBe(true)
-    }
-    expect(hasKey(`${PREFIX}.audience.heading`)).toBe(true)
-    for (let i = 0; i < AUDIENCE_ITEM_COUNT; i++) {
-      expect(hasKey(`${PREFIX}.audience.item.${i}`)).toBe(true)
-    }
-  })
-
-  it('exposes the program details rows', () => {
-    expect(hasKey(`${PREFIX}.details.heading`)).toBe(true)
-    expect(hasKey(`${PREFIX}.details.headerLabel`)).toBe(true)
-    expect(hasKey(`${PREFIX}.details.headerValue`)).toBe(true)
-    for (let i = 0; i < DETAILS_ROW_COUNT; i++) {
-      expect(hasKey(`${PREFIX}.details.row.${i}.label`)).toBe(true)
-      expect(hasKey(`${PREFIX}.details.row.${i}.value`)).toBe(true)
-    }
-  })
-
-  it('matches every brand-asset tile to a translation key', () => {
-    expect(hasKey(`${PREFIX}.assets.heading`)).toBe(true)
-    expect(hasKey(`${PREFIX}.assets.subheading`)).toBe(true)
-    expect(hasKey(`${PREFIX}.assets.downloadLabel`)).toBe(true)
-    for (const asset of brandAssets) {
-      expect(hasKey(asset.titleKey)).toBe(true)
-    }
-  })
-
-  it('exposes every 1-indexed faq.<n>.q/a pair from 1 to AFFILIATE_FAQ_COUNT (FAQSection contract)', () => {
-    expect(AFFILIATE_FAQ_PREFIX).toBe(`${PREFIX}.faq`)
-    expect(hasKey(AFFILIATE_FAQ_HEADING_KEY)).toBe(true)
-    for (let n = 1; n <= AFFILIATE_FAQ_COUNT; n++) {
-      expect(hasKey(`${AFFILIATE_FAQ_PREFIX}.${n}.q`)).toBe(true)
-      expect(hasKey(`${AFFILIATE_FAQ_PREFIX}.${n}.a`)).toBe(true)
-    }
-  })
-
-  it('keeps AFFILIATE_FAQ_COUNT in sync with the actual faq.<n>.q keys in translations', () => {
-    const faqQuestionKeyPattern = new RegExp(
-      `^${AFFILIATE_FAQ_PREFIX}\\.(\\d+)\\.q$`
-    )
-    const indices = translationKeys
-      .map((k) => k.match(faqQuestionKeyPattern)?.[1])
-      .filter((m): m is string => m !== undefined)
-      .map((s) => parseInt(s, 10))
-      .sort((a, b) => a - b)
-    expect(indices).toEqual(
-      Array.from({ length: AFFILIATE_FAQ_COUNT }, (_, i) => i + 1)
-    )
-  })
-
-  it('exposes the footer cta copy', () => {
-    expect(hasKey(`${PREFIX}.footerCta.heading`)).toBe(true)
-    expect(hasKey(`${PREFIX}.footerCta.termsLink`)).toBe(true)
-  })
-
-  it('returns non-empty english copy for every affiliate-landing key', () => {
-    for (const key of affiliateKeys()) {
-      expect(t(key as never, 'en').trim().length).toBeGreaterThan(0)
-    }
-  })
-
-  it('does not leak internal-only keys (drafts, todos, open questions)', () => {
-    const leaks = affiliateKeys().filter((k) =>
-      INTERNAL_KEY_PATTERNS.some((re) => re.test(k))
-    )
-    expect(leaks).toEqual([])
-  })
-})

apps/website/src/components/affiliates/brandAssets.ts

@@ -1,59 +0,0 @@
-import type { TranslationKey } from '../../i18n/translations'
-
-interface BrandAsset {
-  id: string
-  titleKey: TranslationKey
-  download: string
-  preview: string
-}
-
-export const brandAssets: BrandAsset[] = [
-  {
-    id: 'logo-horizontal',
-    titleKey: 'affiliate-landing.assets.tile.logo-horizontal.title',
-    download: '/icons/logo.svg',
-    preview: '/icons/logo.svg'
-  },
-  {
-    id: 'logomark',
-    titleKey: 'affiliate-landing.assets.tile.logomark.title',
-    download: '/icons/logomark.svg',
-    preview: '/icons/logomark.svg'
-  },
-  {
-    id: 'comfy-full-logo-yellow',
-    titleKey: 'affiliate-landing.assets.tile.comfy-full-logo-yellow.title',
-    download: '/affiliates/brand/comfy-full-logo-yellow.svg',
-    preview: '/affiliates/brand/comfy-full-logo-yellow.svg'
-  },
-  {
-    id: 'comfy-full-logo-ink',
-    titleKey: 'affiliate-landing.assets.tile.comfy-full-logo-ink.title',
-    download: '/affiliates/brand/comfy-full-logo-ink.svg',
-    preview: '/affiliates/brand/comfy-full-logo-ink.svg'
-  },
-  {
-    id: 'amplified-logo-mark',
-    titleKey: 'affiliate-landing.assets.tile.amplified-logo-mark.title',
-    download: '/affiliates/brand/comfy-amplified-logo-mark.svg',
-    preview: '/affiliates/brand/comfy-amplified-logo-mark.svg'
-  },
-  {
-    id: 'dimensional-logo-mark',
-    titleKey: 'affiliate-landing.assets.tile.dimensional-logo-mark.title',
-    download: '/affiliates/brand/comfy-dimensional-logo-mark.svg',
-    preview: '/affiliates/brand/comfy-dimensional-logo-mark.svg'
-  },
-  {
-    id: 'color-combo-yellow',
-    titleKey: 'affiliate-landing.assets.tile.color-combo-yellow.title',
-    download: '/affiliates/brand/comfy-color-combo-yellow.svg',
-    preview: '/affiliates/brand/comfy-color-combo-yellow.svg'
-  },
-  {
-    id: 'color-combo-ink',
-    titleKey: 'affiliate-landing.assets.tile.color-combo-ink.title',
-    download: '/affiliates/brand/comfy-color-combo-ink.svg',
-    preview: '/affiliates/brand/comfy-color-combo-ink.svg'
-  }
-]

apps/website/src/components/affiliates/programDetails.ts

@@ -1,33 +0,0 @@
-import type { TranslationKey } from '../../i18n/translations'
-
-interface ProgramDetailRow {
-  labelKey: TranslationKey
-  valueKey: TranslationKey
-}
-
-export const programDetailRows: ProgramDetailRow[] = [
-  {
-    labelKey: 'affiliate-landing.details.row.0.label',
-    valueKey: 'affiliate-landing.details.row.0.value'
-  },
-  {
-    labelKey: 'affiliate-landing.details.row.1.label',
-    valueKey: 'affiliate-landing.details.row.1.value'
-  },
-  {
-    labelKey: 'affiliate-landing.details.row.2.label',
-    valueKey: 'affiliate-landing.details.row.2.value'
-  },
-  {
-    labelKey: 'affiliate-landing.details.row.3.label',
-    valueKey: 'affiliate-landing.details.row.3.value'
-  },
-  {
-    labelKey: 'affiliate-landing.details.row.4.label',
-    valueKey: 'affiliate-landing.details.row.4.value'
-  },
-  {
-    labelKey: 'affiliate-landing.details.row.5.label',
-    valueKey: 'affiliate-landing.details.row.5.value'
-  }
-]

apps/website/src/components/blocks/BenefitsGrid01.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import BrandButton from '../common/BrandButton.vue'
+import GlassCard from '../common/GlassCard.vue'
+
+type Benefit = { id: string; description: string }
+type Cta = {
+  label: string
+  href: string
+  target?: '_blank' | '_self' | '_parent' | '_top'
+}
+
+defineProps<{
+  heading: string
+  benefits: readonly Benefit[]
+  primaryCta?: Cta
+}>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <h2
+      class="mb-12 text-center text-4xl font-light tracking-tight text-primary-comfy-canvas lg:mb-16 lg:text-6xl"
+    >
+      {{ heading }}
+    </h2>
+
+    <GlassCard class="mx-auto max-w-7xl">
+      <div class="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4">
+        <article
+          v-for="(benefit, index) in benefits"
+          :key="benefit.id"
+          class="flex flex-col gap-6 rounded-4xl bg-primary-comfy-ink p-6 lg:p-8"
+        >
+          <span
+            class="text-primary-comfy-yellow font-mono text-sm font-bold tracking-wide"
+          >
+            {{ String(index + 1).padStart(2, '0') }}
+          </span>
+          <p
+            class="text-base/relaxed font-medium text-primary-comfy-canvas lg:text-xl"
+          >
+            {{ benefit.description }}
+          </p>
+        </article>
+      </div>
+    </GlassCard>
+
+    <div v-if="primaryCta" class="mt-10 flex justify-center lg:mt-12">
+      <BrandButton
+        :href="primaryCta.href"
+        :target="primaryCta.target"
+        size="lg"
+        class="px-20 py-4 text-base uppercase"
+        variant="outline"
+      >
+        {{ primaryCta.label }}
+      </BrandButton>
+    </div>
+  </section>
+</template>

apps/website/src/components/blocks/BrandAssetsGrid01.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+type Asset = {
+  id: string
+  title: string
+  download: string
+  preview: string
+}
+
+defineProps<{
+  heading: string
+  subheading: string
+  downloadLabel: string
+  assets: readonly Asset[]
+}>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <div class="mx-auto max-w-6xl text-center">
+      <h2
+        class="text-4xl font-light tracking-tight text-primary-comfy-canvas lg:text-6xl"
+      >
+        {{ heading }}
+      </h2>
+      <p class="mx-auto mt-4 max-w-2xl text-base text-primary-comfy-canvas/70">
+        {{ subheading }}
+      </p>
+    </div>
+
+    <ul
+      class="mx-auto mt-12 grid max-w-6xl grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4"
+    >
+      <li
+        v-for="asset in assets"
+        :key="asset.id"
+        class="bg-transparency-white-t4 flex flex-col overflow-hidden rounded-4xl border border-primary-comfy-canvas/10"
+      >
+        <div
+          class="flex aspect-video items-center justify-center overflow-hidden bg-primary-comfy-ink/40 p-6"
+        >
+          <img
+            :src="asset.preview"
+            :alt="asset.title"
+            class="max-h-full max-w-full object-contain"
+            loading="lazy"
+            decoding="async"
+          />
+        </div>
+        <div class="flex flex-1 flex-col gap-2 p-5">
+          <h3 class="text-base font-light text-primary-comfy-canvas">
+            {{ asset.title }}
+          </h3>
+          <a
+            :href="asset.download"
+            :download="asset.download.split('/').pop()"
+            class="text-primary-comfy-yellow mt-auto inline-flex items-center gap-1 text-sm font-bold tracking-wider uppercase hover:underline"
+          >
+            {{ downloadLabel }}
+            <span aria-hidden="true">↓</span>
+          </a>
+        </div>
+      </li>
+    </ul>
+  </section>
+</template>

apps/website/src/components/blocks/ChecklistSplit01.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import GlassCard from '../common/GlassCard.vue'
+import CheckIcon from '../icons/CheckIcon.vue'
+
+type Criterion = { id: string; label: string }
+
+defineProps<{
+  heading: string
+  subheading: string
+  eyebrow?: string
+  criteria: readonly Criterion[]
+}>()
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <h2
+      class="mb-12 text-center text-4xl font-light tracking-tight text-primary-comfy-canvas lg:mb-16 lg:text-6xl"
+    >
+      {{ heading }}
+    </h2>
+
+    <GlassCard class="px-6 py-10 lg:px-16 lg:py-14">
+      <div
+        class="grid grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-16"
+      >
+        <h3 class="text-2xl font-light text-primary-comfy-canvas lg:text-4xl">
+          {{ subheading }}
+        </h3>
+
+        <div class="flex flex-col gap-6">
+          <span
+            v-if="eyebrow"
+            class="text-xs font-bold tracking-widest text-primary-comfy-canvas uppercase"
+          >
+            {{ eyebrow }}
+          </span>
+          <ul class="flex flex-col gap-4">
+            <li
+              v-for="criterion in criteria"
+              :key="criterion.id"
+              class="flex items-start gap-3"
+            >
+              <CheckIcon
+                class="text-primary-comfy-yellow mt-0.5 size-5 shrink-0"
+              />
+              <span class="text-sm text-primary-comfy-canvas lg:text-base">
+                {{ criterion.label }}
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </GlassCard>
+  </section>
+</template>

apps/website/src/components/blocks/CtaCenter01.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import BrandButton from '../common/BrandButton.vue'
+
+type Cta = {
+  label: string
+  href: string
+  target?: '_blank' | '_self' | '_parent' | '_top'
+}
+
+type TermsLink = {
+  label: string
+  href: string
+}
+
+defineProps<{
+  heading: string
+  primaryCta: Cta
+  termsLink: TermsLink
+}>()
+</script>
+
+<template>
+  <section
+    class="max-w-9xl mx-auto flex flex-col items-center px-6 py-16 text-center lg:py-24"
+  >
+    <h2
+      class="text-4xl font-light tracking-tight text-primary-comfy-canvas lg:text-6xl"
+    >
+      {{ heading }}
+    </h2>
+
+    <BrandButton
+      :href="primaryCta.href"
+      :target="primaryCta.target"
+      :rel="primaryCta.target === '_blank' ? 'noopener noreferrer' : undefined"
+      variant="outline"
+      size="lg"
+      class="mt-10 px-20 py-4 text-base uppercase lg:mt-12"
+    >
+      {{ primaryCta.label }}
+    </BrandButton>
+
+    <a
+      :href="termsLink.href"
+      class="mt-8 text-sm text-primary-comfy-canvas/70 underline underline-offset-4 transition-colors hover:text-primary-comfy-canvas"
+    >
+      {{ termsLink.label }}
+    </a>
+  </section>
+</template>

apps/website/src/components/blocks/FAQSplit01.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import { reactive, watch } from 'vue'
+
+type Faq = { id: string; question: string; answer: string }
+
+const { faqs } = defineProps<{
+  heading: string
+  faqs: readonly Faq[]
+}>()
+
+const expanded = reactive<boolean[]>(faqs.map(() => false))
+
+watch(
+  () => faqs.length,
+  (length) => {
+    if (length === expanded.length) return
+    expanded.length = 0
+    for (let i = 0; i < length; i += 1) expanded.push(false)
+  }
+)
+
+function toggle(index: number) {
+  expanded[index] = !expanded[index]
+}
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-4 py-24 md:px-20 md:py-40">
+    <div class="flex flex-col gap-6 md:flex-row md:gap-16">
+      <!-- Left heading -->
+      <div
+        class="bg-primary-comfy-ink sticky top-20 z-10 w-full shrink-0 self-start py-4 md:top-28 md:w-80 md:py-0"
+      >
+        <h2 class="text-primary-comfy-canvas text-4xl font-light md:text-5xl">
+          {{ heading }}
+        </h2>
+      </div>
+
+      <!-- Right FAQ list -->
+      <div class="flex-1">
+        <div
+          v-for="(faq, index) in faqs"
+          :key="faq.id"
+          class="border-primary-comfy-canvas/20 border-b"
+        >
+          <button
+            :id="`faq-trigger-${faq.id}`"
+            type="button"
+            :aria-expanded="expanded[index]"
+            :aria-controls="`faq-panel-${faq.id}`"
+            :class="
+              cn(
+                'flex w-full cursor-pointer items-center justify-between text-left',
+                index === 0 ? 'pb-6' : 'py-6'
+              )
+            "
+            @click="toggle(index)"
+          >
+            <span
+              :class="
+                cn(
+                  'text-lg font-light md:text-xl',
+                  expanded[index]
+                    ? 'text-primary-comfy-yellow'
+                    : 'text-primary-comfy-canvas'
+                )
+              "
+            >
+              {{ faq.question }}
+            </span>
+            <span
+              class="text-primary-comfy-yellow ml-4 shrink-0 text-2xl"
+              aria-hidden="true"
+            >
+              {{ expanded[index] ? '−' : '+' }}
+            </span>
+          </button>
+          <section
+            v-show="expanded[index]"
+            :id="`faq-panel-${faq.id}`"
+            role="region"
+            :aria-labelledby="`faq-trigger-${faq.id}`"
+            class="pb-6"
+          >
+            <p class="text-primary-comfy-canvas/70 text-sm whitespace-pre-line">
+              {{ faq.answer }}
+            </p>
+          </section>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/blocks/HeroSplit01.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+import type { Locale } from '../../i18n/translations'
+import BrandButton from '../common/BrandButton.vue'
+import ProductHeroBadge from '../common/ProductHeroBadge.vue'
+import VideoPlayer from '../common/VideoPlayer.vue'
+import CheckIcon from '../icons/CheckIcon.vue'
+
+type Cta = {
+  label: string
+  href: string
+  target?: '_blank' | '_self' | '_parent' | '_top'
+}
+
+type VideoTrack = {
+  src: string
+  kind: 'subtitles' | 'captions' | 'descriptions'
+  srclang: string
+  label: string
+}
+
+const {
+  locale = 'en',
+  badgeText,
+  badgeLogoSrc,
+  badgeLogoAlt,
+  title,
+  titleHighlight,
+  features = [],
+  primaryCta,
+  secondaryCta,
+  imageSrc,
+  imageAlt = '',
+  imageWidth = 800,
+  imageHeight = 600,
+  imagePosition = 'right',
+  videoSrc,
+  videoPoster,
+  videoTracks = [],
+  videoAutoplay = false,
+  videoLoop = false,
+  videoMinimal = false,
+  videoHideControls = false
+} = defineProps<{
+  locale?: Locale
+  badgeText: string
+  badgeLogoSrc?: string
+  badgeLogoAlt?: string
+  title: string
+  titleHighlight?: string
+  features?: string[]
+  primaryCta: Cta
+  secondaryCta?: Cta
+  imageSrc?: string
+  imageAlt?: string
+  imageWidth?: number
+  imageHeight?: number
+  imagePosition?: 'left' | 'right'
+  videoSrc?: string
+  videoPoster?: string
+  videoTracks?: VideoTrack[]
+  videoAutoplay?: boolean
+  videoLoop?: boolean
+  videoMinimal?: boolean
+  videoHideControls?: boolean
+}>()
+</script>
+
+<template>
+  <section
+    :class="
+      cn(
+        'max-w-9xl relative mx-auto flex flex-col items-center gap-12 px-6 pt-20 pb-16 md:pt-28 md:pb-24 lg:items-center lg:gap-16 lg:px-16',
+        imagePosition === 'right' ? 'lg:flex-row' : 'lg:flex-row-reverse'
+      )
+    "
+  >
+    <div class="w-full lg:flex-1">
+      <ProductHeroBadge
+        :text="badgeText"
+        :logo-src="badgeLogoSrc"
+        :logo-alt="badgeLogoAlt"
+      />
+
+      <h1
+        class="mt-8 text-2xl leading-[125%] font-light tracking-[-1.44px] text-primary-comfy-canvas md:text-4xl lg:text-5xl"
+      >
+        <template v-if="titleHighlight">
+          <span class="text-primary-warm-white">{{ titleHighlight }}</span>
+          {{ title }}
+        </template>
+        <template v-else>{{ title }}</template>
+      </h1>
+
+      <ul v-if="features.length" class="mt-8 space-y-3">
+        <li
+          v-for="feature in features"
+          :key="feature"
+          class="flex items-start gap-3 text-base text-primary-comfy-canvas"
+        >
+          <CheckIcon class="text-primary-comfy-yellow mt-1 size-5 shrink-0" />
+          {{ feature }}
+        </li>
+      </ul>
+
+      <div class="mt-10 flex flex-col gap-4 sm:flex-row">
+        <BrandButton
+          :href="primaryCta.href"
+          :target="primaryCta.target"
+          size="lg"
+          class="px-8 py-4 text-base uppercase"
+        >
+          {{ primaryCta.label }}
+        </BrandButton>
+        <BrandButton
+          v-if="secondaryCta"
+          :href="secondaryCta.href"
+          :target="secondaryCta.target"
+          variant="outline"
+          size="lg"
+          class="px-8 py-4 text-base uppercase"
+        >
+          {{ secondaryCta.label }}
+        </BrandButton>
+      </div>
+    </div>
+
+    <div class="order-first w-full lg:order-last lg:flex-1">
+      <VideoPlayer
+        v-if="videoSrc"
+        :locale
+        :src="videoSrc"
+        :poster="videoPoster"
+        :tracks="videoTracks"
+        :autoplay="videoAutoplay"
+        :loop="videoLoop"
+        :minimal="videoMinimal"
+        :hide-controls="videoHideControls"
+      />
+      <img
+        v-else-if="imageSrc"
+        :src="imageSrc"
+        :alt="imageAlt"
+        :width="imageWidth"
+        :height="imageHeight"
+        fetchpriority="high"
+        decoding="async"
+        class="aspect-4/3 w-full rounded-3xl object-cover"
+      />
+    </div>
+  </section>
+</template>

apps/website/src/components/blocks/StepsGrid01.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+import NodeUnionIcon from '../icons/NodeUnionIcon.vue'
+
+type Step = { id: string; label: string; description: string }
+
+defineProps<{
+  heading: string
+  steps: readonly Step[]
+}>()
+
+const isRtlRow = (i: number) => Math.floor(i / 2) % 2 === 1
+const isFullSpan = (i: number, total: number) =>
+  i === total - 1 && total % 2 === 1
+
+function hasHorizontalConnector(i: number, total: number) {
+  if (isFullSpan(i, total)) return false
+  if (!isRtlRow(i) && i % 2 === 0 && i + 1 < total) return true
+  if (isRtlRow(i) && i % 2 === 1) return true
+  return false
+}
+
+function hasMobileVertical(i: number, total: number) {
+  return i < total - 1
+}
+
+function hasLgVertical(i: number, total: number) {
+  return i % 2 === 1 && i + 1 < total
+}
+
+function cardClass(i: number, total: number) {
+  const fullSpan = isFullSpan(i, total)
+  const rtl = isRtlRow(i)
+  return cn(
+    'border-primary-comfy-yellow relative rounded-3xl border-2 p-8 lg:p-10',
+    fullSpan && 'lg:col-span-2',
+    !fullSpan && rtl && i % 2 === 0 && 'lg:col-start-2',
+    !fullSpan && rtl && i % 2 === 1 && 'lg:col-start-1'
+  )
+}
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <h2
+      class="mb-12 text-center text-4xl font-light tracking-tight text-primary-comfy-canvas lg:mb-16 lg:text-6xl"
+    >
+      {{ heading }}
+    </h2>
+
+    <div
+      class="mx-auto grid max-w-3xl grid-cols-1 gap-4 lg:grid-flow-dense lg:grid-cols-2"
+    >
+      <div
+        v-for="(step, index) in steps"
+        :key="step.id"
+        :class="cardClass(index, steps.length)"
+      >
+        <span
+          class="bg-primary-comfy-yellow font-formula-narrow inline-block -skew-x-12 rounded-sm px-3 py-1.5 text-sm font-bold tracking-wide text-primary-comfy-ink uppercase lg:text-base"
+        >
+          <span class="inline-block skew-x-12">
+            {{ index + 1 }}. {{ step.label }}
+          </span>
+        </span>
+        <p class="mt-6 text-sm/relaxed text-primary-comfy-canvas lg:text-base">
+          {{ step.description }}
+        </p>
+
+        <NodeUnionIcon
+          v-if="hasHorizontalConnector(index, steps.length)"
+          class="text-primary-comfy-yellow absolute top-1/2 right-0 hidden size-4 translate-x-[calc(100%+2px)] -translate-y-1/2 scale-x-150 rotate-90 lg:block"
+        />
+        <NodeUnionIcon
+          v-if="
+            hasMobileVertical(index, steps.length) ||
+            hasLgVertical(index, steps.length)
+          "
+          :class="
+            cn(
+              'text-primary-comfy-yellow absolute bottom-0 left-1/2 size-4 -translate-x-1/2 translate-y-[calc(100%+2px)] scale-x-150',
+              !hasMobileVertical(index, steps.length) && 'hidden lg:block',
+              !hasLgVertical(index, steps.length) && 'lg:hidden'
+            )
+          "
+        />
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/careers/WhyJoinSection.vue

@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import type { Locale } from '../../i18n/translations'
+import type { Locale, TranslationKey } from '../../i18n/translations'
 
 import WireNodeLayout from '../common/WireNodeLayout.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
-const reasons = [
+const reasons: TranslationKey[] = [
   'careers.whyJoin.reason1',
   'careers.whyJoin.reason2',
   'careers.whyJoin.reason3',
   'careers.whyJoin.reason4',
   'careers.whyJoin.reason5'
-] as const
+]
 </script>
 
 <template>

apps/website/src/components/common/BrandButton.vue

@@ -1,19 +1,13 @@
 <script setup lang="ts">
 import { cn } from '@comfyorg/tailwind-utils'
 
+import { computed } from 'vue'
 import type { HTMLAttributes } from 'vue'
 
 import type { BrandButtonVariants } from './brandButton.variants'
 import { brandButtonVariants } from './brandButton.variants'
 
-const {
-  href,
-  target,
-  rel,
-  variant,
-  size,
-  class: customClass = ''
-} = defineProps<{
+const props = defineProps<{
   href?: string
   target?: string
   rel?: string
@@ -21,15 +15,25 @@ const {
   size?: BrandButtonVariants['size']
   class?: HTMLAttributes['class']
 }>()
+
+const resolvedRel = computed(
+  () =>
+    props.rel ?? (props.target === '_blank' ? 'noopener noreferrer' : undefined)
+)
 </script>
 
 <template>
   <component
-    :is="href ? 'a' : 'button'"
-    :href
-    :target
-    :rel
-    :class="cn(brandButtonVariants({ variant, size }), customClass)"
+    :is="props.href ? 'a' : 'button'"
+    :href="props.href"
+    :target="props.target"
+    :rel="resolvedRel"
+    :class="
+      cn(
+        brandButtonVariants({ variant: props.variant, size: props.size }),
+        props.class ?? ''
+      )
+    "
   >
     <span class="ppformula-text-center">
       <slot />

apps/website/src/components/common/VideoPlayer.vue

@@ -28,14 +28,18 @@ const {
   poster,
   tracks = [],
   autoplay = false,
-  minimal = false
+  loop = false,
+  minimal = false,
+  hideControls = false
 } = defineProps<{
   locale?: Locale
   src?: string
   poster?: string
   tracks?: VideoTrack[]
   autoplay?: boolean
+  loop?: boolean
   minimal?: boolean
+  hideControls?: boolean
 }>()
 
 const playerEl = useTemplateRef<HTMLDivElement>('playerEl')
@@ -200,8 +204,9 @@ function toggleFullscreen() {
       crossorigin="anonymous"
       playsinline
       :autoplay
+      :loop
       muted
-      @click="playing = !playing"
+      @click="hideControls ? undefined : (playing = !playing)"
     >
       <track
         v-for="track in tracks"
@@ -215,7 +220,7 @@ function toggleFullscreen() {
 
     <!-- Minimal centered play/pause button -->
     <div
-      v-if="minimal && src"
+      v-if="minimal && src && !hideControls"
       :class="
         cn(
           'absolute inset-0 flex items-center justify-center transition-opacity duration-300',
@@ -235,7 +240,7 @@ function toggleFullscreen() {
 
     <!-- Bottom control bar -->
     <div
-      v-if="src && !minimal"
+      v-if="src && !minimal && !hideControls"
       :class="
         cn(
           'absolute inset-x-0 bottom-0 flex items-center gap-3 p-4 transition-opacity duration-300 lg:px-6 lg:py-5',
@@ -285,7 +290,7 @@ function toggleFullscreen() {
         @click="toggleFullscreen"
       >
         <svg
-          class="text-primary-comfy-ink size-3.5 lg:size-4"
+          class="size-3.5 text-primary-comfy-ink lg:size-4"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -331,7 +336,7 @@ function toggleFullscreen() {
         <!-- Muted icon -->
         <svg
           v-if="muted"
-          class="text-primary-comfy-ink size-3.5 lg:size-4"
+          class="size-3.5 text-primary-comfy-ink lg:size-4"
           viewBox="0 0 24 24"
           fill="currentColor"
           stroke="currentColor"
@@ -349,7 +354,7 @@ function toggleFullscreen() {
         <!-- Unmuted icon -->
         <svg
           v-else
-          class="text-primary-comfy-ink size-3.5 lg:size-4"
+          class="size-3.5 text-primary-comfy-ink lg:size-4"
           viewBox="0 0 24 24"
           fill="currentColor"
           stroke="currentColor"

apps/website/src/components/gallery/GalleryCard.vue

@@ -7,12 +7,16 @@ const {
   item,
   locale = 'en',
   aspect = 'var(--aspect-ratio-gallery-card)',
-  mobile = false
+  mobile = false,
+  objectPosition = 'center',
+  objectFit = 'cover'
 } = defineProps<{
   item: GalleryItem
   locale?: Locale
   aspect?: string
   mobile?: boolean
+  objectPosition?: string
+  objectFit?: string
 }>()
 
 defineEmits<{ click: [] }>()
@@ -31,13 +35,15 @@ defineEmits<{ click: [] }>()
         loop
         muted
         playsinline
-        class="size-full object-cover transition-transform duration-300 group-hover:scale-105"
+        class="size-full transition-transform duration-300 group-hover:scale-105"
+        :style="{ objectPosition, objectFit }"
       />
       <img
         v-else
         :src="item.image"
         :alt="item.title"
-        class="size-full object-cover transition-transform duration-300 group-hover:scale-105"
+        class="size-full transition-transform duration-300 group-hover:scale-105"
+        :style="{ objectPosition, objectFit }"
       />
       <!-- Desktop hover overlay -->
       <div

apps/website/src/components/icons/CheckIcon.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden="true"
+    :class="$props.class"
+  >
+    <path
+      d="M5 11.5811L10.2582 18.0581L20 6.05811"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

apps/website/src/components/icons/NodeUnionIcon.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useId } from 'vue'
+
+defineProps<{ class?: HTMLAttributes['class'] }>()
+
+const clipId = `node-union-icon-clip-${useId()}`
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    fill="none"
+    aria-hidden="true"
+    :class="$props.class"
+  >
+    <g :clip-path="`url(#${clipId})`">
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M-1.59144e-05 0H100V100H-1.59144e-05V0ZM32.3741 50C32.3741 77.0727 16.2692 99.0196 -3.59714 99.0196C-23.4635 99.0196 -39.5684 77.0727 -39.5684 50C-39.5684 22.9273 -23.4635 0.980392 -3.59714 0.980392C16.2692 0.980392 32.3741 22.9273 32.3741 50ZM139.568 50C139.568 77.0727 123.463 99.0196 103.597 99.0196C83.7309 99.0196 67.6259 77.0727 67.6259 50C67.6259 22.9273 83.7309 0.980392 103.597 0.980392C123.463 0.980392 139.568 22.9273 139.568 50Z"
+      />
+    </g>
+    <defs>
+      <clipPath :id="clipId">
+        <rect width="100" height="100" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>

apps/website/src/components/learning/FeaturedWorkflowSection.vue

@@ -21,7 +21,7 @@ const demoVideoPoster =
       <div class="flex flex-col gap-8">
         <div>
           <h2
-            class="text-primary-comfy-canvas text-4xl font-light tracking-tight lg:text-6xl"
+            class="text-3xl leading-[110%] font-light tracking-tight text-primary-comfy-canvas lg:text-5xl"
           >
             {{ t('learning.featured.title', locale) }}
           </h2>
@@ -31,7 +31,7 @@ const demoVideoPoster =
         </div>
 
         <p
-          class="text-primary-comfy-canvas max-w-md text-sm/relaxed lg:text-base"
+          class="max-w-md text-sm/relaxed text-primary-comfy-canvas lg:text-base"
         >
           {{ t('learning.featured.description', locale) }}
         </p>

apps/website/src/components/learning/TutorialDetailDialog.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, useTemplateRef, watch } from 'vue'
+import { onMounted, onUnmounted, useTemplateRef } from 'vue'
 
 import type { LearningTutorial } from '../../data/learningTutorials'
 import type { Locale } from '../../i18n/translations'
 
 import { lockScroll, unlockScroll } from '../../composables/scrollLock'
 import { t } from '../../i18n/translations'
+import VideoPlayer from '../common/VideoPlayer.vue'
 
 const { tutorial, locale = 'en' } = defineProps<{
   tutorial: LearningTutorial
@@ -15,21 +16,6 @@ const { tutorial, locale = 'en' } = defineProps<{
 const emit = defineEmits<{ close: [] }>()
 
 const dialogRef = useTemplateRef<HTMLDialogElement>('dialogRef')
-const videoRef = useTemplateRef<HTMLVideoElement>('videoRef')
-
-const playFromStart = () => {
-  const video = videoRef.value
-  if (!video) return
-  video.currentTime = 0
-  void video.play().catch(() => {})
-}
-
-watch(
-  () => tutorial.id,
-  () => {
-    playFromStart()
-  }
-)
 
 function handleBackdropClick(e: MouseEvent) {
   if (e.target === e.currentTarget) emit('close')
@@ -42,7 +28,6 @@ function handleKeydown(e: KeyboardEvent) {
 onMounted(() => {
   lockScroll()
   dialogRef.value?.showModal()
-  playFromStart()
 })
 
 onUnmounted(() => {
@@ -62,31 +47,30 @@ onUnmounted(() => {
     >
       <button
         :aria-label="t('gallery.detail.close', locale)"
-        class="border-primary-comfy-yellow bg-primary-comfy-ink hover:bg-primary-comfy-yellow group absolute top-8 right-10 z-10 flex size-10 cursor-pointer items-center justify-center rounded-2xl border-2 transition-colors lg:right-26"
+        class="border-primary-comfy-yellow hover:bg-primary-comfy-yellow group absolute top-8 right-10 z-10 flex size-10 cursor-pointer items-center justify-center rounded-2xl border-2 bg-primary-comfy-ink transition-colors lg:right-26"
         @click="emit('close')"
       >
         <span
-          class="bg-primary-comfy-yellow group-hover:bg-primary-comfy-ink size-5 transition-colors"
+          class="bg-primary-comfy-yellow size-5 transition-colors group-hover:bg-primary-comfy-ink"
           style="mask: url('/icons/close.svg') center / contain no-repeat"
         />
       </button>
 
       <div
-        class="border-primary-comfy-yellow bg-primary-comfy-ink rounded-5xl flex w-full max-w-7xl items-center justify-center overflow-hidden border-2 p-3 lg:p-4"
+        class="border-primary-comfy-yellow rounded-5xl flex w-full max-w-7xl items-center justify-center overflow-hidden border-2 bg-primary-comfy-ink p-3 lg:p-4"
       >
-        <video
-          ref="videoRef"
+        <VideoPlayer
+          :key="tutorial.id"
+          :locale
           :src="tutorial.videoSrc"
           :poster="tutorial.poster"
-          class="aspect-video w-full rounded-3xl object-contain lg:rounded-4xl"
-          controls
           autoplay
-          playsinline
-        ></video>
+          class="w-full"
+        />
       </div>
 
       <h2
-        class="text-primary-comfy-canvas mt-6 text-center text-lg font-medium lg:text-xl"
+        class="mt-6 text-center text-lg font-medium text-primary-comfy-canvas lg:text-xl"
       >
         {{ t('learning.tutorials.titlePrefix', locale) }}
         {{ tutorial.title[locale] }}

apps/website/src/components/learning/TutorialsSection.vue

@@ -22,7 +22,7 @@ const activeTutorial = () =>
 <template>
   <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
     <h2
-      class="text-primary-comfy-canvas mb-12 text-4xl font-light tracking-tight lg:mb-16 lg:text-6xl"
+      class="mb-12 text-4xl font-light tracking-tight text-primary-comfy-canvas lg:mb-16 lg:text-6xl"
     >
       {{ t('learning.tutorials.heading', locale) }}
     </h2>
@@ -71,9 +71,9 @@ const activeTutorial = () =>
         <div class="flex flex-col space-y-3 p-4">
           <div class="flex items-center justify-between gap-4">
             <h3
-              class="text-primary-comfy-canvas text-sm/snug lg:text-base/snug"
+              class="text-sm/snug text-primary-comfy-canvas lg:text-base/snug"
             >
-              {{ t('learning.tutorials.titlePrefix', locale) }}<wbr />
+              {{ t('learning.tutorials.titlePrefix', locale) }}<br />
               {{ tutorial.title[locale] }}
             </h3>
             <MaskRevealButton

apps/website/src/components/models/ModelCreationsSection.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import type { GalleryItem } from '../../data/gallery'
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import BrandButton from '../common/BrandButton.vue'
+import GalleryCard from '../gallery/GalleryCard.vue'
+import GalleryDetailModal from '../gallery/GalleryDetailModal.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const modelName = 'Grok'
+const ctaHref = 'https://comfy.org/workflows/model/grok'
+
+const items: GalleryItem[] = [
+  {
+    id: 'subway-swan',
+    image: 'https://media.comfy.org/website/gallery/subway-swan_compressed.png',
+    title: 'Subway Swan',
+    userAlias: 'Purz Beats',
+    teamAlias: 'Comfy',
+    tool: 'Grok Imagine',
+    href: 'https://www.youtube.com/@PurzBeats'
+  },
+  {
+    id: 'milos-little-wonder',
+    video:
+      'https://media.comfy.org/website/gallery/milos-little-wonder_compressed.mp4',
+    title: 'Milos Little Wonder',
+    userAlias: 'Purz Beats',
+    teamAlias: 'Comfy',
+    tool: 'Grok Imagine',
+    href: 'https://www.youtube.com/@PurzBeats'
+  },
+  {
+    id: 'amber-passage',
+    image:
+      'https://media.comfy.org/website/gallery/amber-passage_compressed.jpg',
+    title: 'Amber Passage',
+    userAlias: 'Purz Beats',
+    teamAlias: 'Comfy',
+    tool: 'Grok Imagine',
+    href: 'https://www.youtube.com/@PurzBeats',
+    objectPosition: 'bottom'
+  },
+  {
+    id: 'neon-revenant',
+    video:
+      'https://media.comfy.org/website/gallery/neon-revenant_compressed.mp4',
+    title: 'Neon Revenant',
+    userAlias: 'Eric Solorio',
+    teamAlias: 'Comfy',
+    tool: 'Grok Imagine',
+    href: 'https://www.instagram.com/enigmatic_e'
+  },
+  {
+    id: 'midnight-umami',
+    image:
+      'https://media.comfy.org/website/gallery/midnight_umami_compressed.png',
+    title: 'Midnight Umami',
+    userAlias: 'Purz Beats',
+    teamAlias: 'Comfy',
+    tool: 'Grok Imagine',
+    href: 'https://www.youtube.com/@PurzBeats'
+  }
+]
+
+const modalOpen = ref(false)
+const modalIndex = ref(0)
+
+function openDetail(index: number) {
+  modalIndex.value = index
+  modalOpen.value = true
+}
+
+const title = t('models.list.creations.title', locale).replace(
+  '{name}',
+  modelName
+)
+const ctaLabel = t('models.list.creations.cta', locale)
+</script>
+
+<template>
+  <section
+    data-testid="model-creations"
+    class="flex flex-col items-center px-4 py-16 lg:px-20 lg:pt-36"
+  >
+    <h2
+      class="max-w-4xl text-center text-3xl font-light tracking-tight text-primary-comfy-canvas lg:text-5xl"
+    >
+      {{ title }}
+    </h2>
+    <BrandButton
+      :href="ctaHref"
+      variant="solid"
+      size="lg"
+      class="mt-16 px-8 py-4 uppercase"
+    >
+      {{ ctaLabel }}
+    </BrandButton>
+
+    <div class="mt-20 hidden w-full flex-col gap-2 lg:flex">
+      <div class="grid grid-cols-2 gap-2">
+        <GalleryCard
+          v-for="(item, i) in items.slice(0, 2)"
+          :key="i"
+          :item
+          :locale
+          :object-position="item.objectPosition"
+          :object-fit="item.objectFit"
+          @click="openDetail(i)"
+        />
+      </div>
+      <div v-if="items.length > 2" class="grid grid-cols-3 gap-2">
+        <GalleryCard
+          v-for="(item, i) in items.slice(2, 5)"
+          :key="i + 2"
+          :item
+          :locale
+          :object-position="item.objectPosition"
+          :object-fit="item.objectFit"
+          @click="openDetail(i + 2)"
+        />
+      </div>
+    </div>
+
+    <div
+      class="rounded-5xl bg-transparency-white-t4 mt-12 flex w-full flex-col gap-6 p-2 max-lg:pb-6 lg:hidden"
+    >
+      <GalleryCard
+        v-for="(item, i) in items"
+        :key="i"
+        :item
+        :locale
+        :object-position="item.objectPosition"
+        :object-fit="item.objectFit"
+        mobile
+        @click="openDetail(i)"
+      />
+    </div>
+
+    <GalleryDetailModal
+      v-if="modalOpen"
+      :items
+      :initial-index="modalIndex"
+      :locale
+      @close="modalOpen = false"
+    />
+  </section>
+</template>

apps/website/src/components/models/ModelsHeroSection.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import BrandButton from '../common/BrandButton.vue'
+
+const {
+  locale = 'en',
+  modelName,
+  ctaHref,
+  videoSrc,
+  videoAriaLabel
+} = defineProps<{
+  locale?: Locale
+  modelName: string
+  ctaHref: string
+  videoSrc: string
+  videoAriaLabel?: string
+}>()
+</script>
+
+<template>
+  <section class="flex flex-col items-center px-6 pt-16 text-center lg:pt-36">
+    <h1
+      class="max-w-4xl text-4xl font-light tracking-tight text-primary-comfy-canvas lg:text-6xl"
+    >
+      {{
+        t('models.list.heroTitle.before', locale).replace('{name}', modelName)
+      }}
+      <span class="text-primary-comfy-yellow">ComfyUI</span>
+      {{
+        t('models.list.heroTitle.after', locale).replace('{name}', modelName)
+      }}
+    </h1>
+    <p
+      class="mt-6 max-w-2xl text-sm text-pretty text-primary-comfy-canvas lg:text-base"
+    >
+      {{ t('hero.subtitle', locale) }}
+    </p>
+    <BrandButton
+      :href="ctaHref"
+      variant="solid"
+      size="lg"
+      class="mt-10 px-8 py-4 uppercase"
+    >
+      {{ t('models.list.heroCta', locale).replace('{name}', modelName) }}
+    </BrandButton>
+    <div class="mt-16 w-full max-w-5xl">
+      <video
+        :src="videoSrc"
+        :aria-label="videoAriaLabel || undefined"
+        :aria-hidden="videoAriaLabel ? undefined : true"
+        autoplay
+        loop
+        muted
+        playsinline
+        preload="metadata"
+        class="rounded-4.5xl size-full object-cover"
+      />
+    </div>
+  </section>
+</template>

apps/website/src/components/pricing/WhatsIncludedSection.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Locale, TranslationKey } from '../../i18n/translations'
 import { t } from '../../i18n/translations'
+import CheckIcon from '../icons/CheckIcon.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
@@ -94,12 +95,9 @@ const features: IncludedFeature[] = [
               class="mt-0.5 size-4 shrink-0"
               aria-hidden="true"
             />
-            <img
+            <CheckIcon
               v-else
-              src="/icons/check.svg"
-              alt=""
-              class="mt-0.5 size-4 shrink-0"
-              aria-hidden="true"
+              class="text-primary-comfy-yellow mt-0.5 size-4 shrink-0"
             />
             <p class="text-primary-comfy-canvas text-sm font-medium">
               {{ t(feature.titleKey, locale) }}

apps/website/src/components/product/shared/AIModelsSection.vue

@@ -78,7 +78,7 @@ function getCardClass(layoutClass: string): string {
 
 <template>
   <section
-    class="bg-primary-comfy-ink max-w-9xl mx-auto px-4 py-24 lg:px-20 lg:py-40"
+    class="max-w-9xl mx-auto bg-primary-comfy-ink px-4 py-16 lg:px-20 lg:py-40"
   >
     <div class="mx-auto flex w-full max-w-7xl flex-col items-center">
       <p
@@ -88,18 +88,18 @@ function getCardClass(layoutClass: string): string {
       </p>
 
       <h2
-        class="text-primary-comfy-canvas text-3.5xl/tight mt-8 max-w-4xl text-center font-light lg:text-5xl"
+        class="text-3.5xl/tight mt-8 max-w-4xl text-center font-light text-primary-comfy-canvas lg:text-5xl"
       >
         {{ t('cloud.aiModels.heading', locale) }}
       </h2>
 
       <p
-        class="text-primary-comfy-canvas mt-8 max-w-xl text-center text-sm font-light lg:text-base/snug"
+        class="mt-8 max-w-xl text-center text-sm font-light text-primary-comfy-canvas lg:text-base/snug"
       >
         {{ t('cloud.aiModels.subtitle', locale) }}
       </p>
 
-      <div class="mt-24 w-full">
+      <div class="mt-16 w-full lg:mt-24">
         <div class="rounded-4xl border border-white/12 p-2 lg:p-1.5">
           <div class="grid grid-cols-1 gap-2 lg:grid-cols-12">
             <a
@@ -180,14 +180,15 @@ function getCardClass(layoutClass: string): string {
       <BrandButton
         :href="externalLinks.workflows"
         variant="outline"
-        class="mt-4 w-full max-w-md text-center lg:mt-8 lg:w-auto"
+        size="lg"
+        class="mt-4 w-full max-w-md px-8 py-4 text-center lg:mt-8 lg:w-auto"
       >
-        <span class="lg:hidden">{{
-          t('cloud.aiModels.ctaMobile', locale)
-        }}</span>
-        <span class="hidden lg:inline">{{
+        <!-- <span class="lg:hidden"> -->
+        {{ t('cloud.aiModels.ctaMobile', locale) }}
+        <!-- </span> -->
+        <!-- <span class="hidden lg:inline">{{
           t('cloud.aiModels.ctaDesktop', locale)
-        }}</span>
+        }}</span> -->
       </BrandButton>
     </div>
   </section>

apps/website/src/config/model-metadata.ts

@@ -90,7 +90,7 @@ export const modelMetadata: Record<string, ModelOverride> = {
     hubSlug: 'seedance',
     featured: true
   },
-  'grok-image': {
+  'grok-imagine': {
     hubSlug: 'grok',
     featured: false
   },

apps/website/src/data/affiliateAudience.ts

@@ -0,0 +1,44 @@
+import type { LocalizedText } from '../i18n/translations'
+
+interface AudienceCriterion {
+  id: string
+  label: LocalizedText
+}
+
+export const affiliateAudienceCriteria: readonly AudienceCriterion[] = [
+  {
+    id: 'tutorial-creator',
+    label: {
+      en: 'A ComfyUI tutorial creator or workflow builder',
+      'zh-CN': 'ComfyUI 教程作者或工作流创建者'
+    }
+  },
+  {
+    id: 'ai-tool-reviewer',
+    label: {
+      en: 'An AI tool reviewer on YouTube, TikTok, blogs',
+      'zh-CN': '在 YouTube、TikTok、博客上做 AI 工具测评'
+    }
+  },
+  {
+    id: 'tech-blogger',
+    label: {
+      en: 'A tech blogger covering AI creative tools',
+      'zh-CN': '报道 AI 创作工具的科技博主'
+    }
+  },
+  {
+    id: 'newsletter-operator',
+    label: {
+      en: 'A newsletter operator in the AI/creative space',
+      'zh-CN': 'AI／创意领域的简报运营者'
+    }
+  },
+  {
+    id: 'audience-owner',
+    label: {
+      en: 'Anyone with an audience interested in AI image, video, or 3D',
+      'zh-CN': '拥有关注 AI 图像、视频或 3D 受众的任何人'
+    }
+  }
+] as const

apps/website/src/data/affiliateBenefits.ts

@@ -0,0 +1,39 @@
+import type { LocalizedText } from '../i18n/translations'
+
+interface AffiliateBenefit {
+  id: string
+  description: LocalizedText
+}
+
+export const affiliateBenefits: readonly AffiliateBenefit[] = [
+  {
+    id: 'open-source-platform',
+    description: {
+      en: 'ComfyUI is the most powerful open-source AI creative platform',
+      'zh-CN': 'ComfyUI 是最强大的开源 AI 创作平台'
+    }
+  },
+  {
+    id: 'cloud-no-gpu',
+    description: {
+      en: 'Comfy Cloud lets you run ComfyUI in the browser, no GPU needed, all models pre-loaded',
+      'zh-CN':
+        'Comfy Cloud 让你在浏览器中运行 ComfyUI，无需 GPU，所有模型预加载'
+    }
+  },
+  {
+    id: 'node-based-control',
+    description: {
+      en: 'Node-based workflows give users full creative control unlike prompt-only tools',
+      'zh-CN':
+        '基于节点的工作流让用户拥有完整的创作控制力，区别于仅靠提示词的工具'
+    }
+  },
+  {
+    id: 'custom-nodes',
+    description: {
+      en: '1,000+ community custom node packages',
+      'zh-CN': '1,000+ 社区自定义节点包'
+    }
+  }
+] as const

apps/website/src/data/affiliateBrandAssets.ts

@@ -0,0 +1,38 @@
+import type { LocalizedText } from '../i18n/translations'
+
+interface AffiliateBrandAsset {
+  id: string
+  title: LocalizedText
+  download: string
+  preview: string
+}
+
+const BRAND_ASSETS_ZIP =
+  'https://media.comfy.org/website/comfy-org-brand-assets.zip'
+
+export const affiliateBrandAssets: readonly AffiliateBrandAsset[] = [
+  {
+    id: 'core-logo',
+    title: { en: 'Core Logo', 'zh-CN': '核心标志' },
+    download: BRAND_ASSETS_ZIP,
+    preview: '/icons/logo.svg'
+  },
+  {
+    id: 'logomark',
+    title: { en: 'Logomark', 'zh-CN': '标志符号' },
+    download: BRAND_ASSETS_ZIP,
+    preview: '/icons/logomark.svg'
+  },
+  {
+    id: 'icon',
+    title: { en: 'Icon', 'zh-CN': '图标' },
+    download: BRAND_ASSETS_ZIP,
+    preview: '/affiliates/brand/comfy-color-combo-yellow.svg'
+  },
+  {
+    id: 'amplified-logomark',
+    title: { en: 'Amplified Logomark', 'zh-CN': '放大版标志符号' },
+    download: BRAND_ASSETS_ZIP,
+    preview: '/affiliates/brand/comfy-amplified-logo.png'
+  }
+] as const

apps/website/src/data/affiliateFaq.ts

@@ -0,0 +1,103 @@
+import type { LocalizedText } from '../i18n/translations'
+
+interface AffiliateFaq {
+  id: string
+  question: LocalizedText
+  answer: LocalizedText
+}
+
+export const affiliateFaqs: readonly AffiliateFaq[] = [
+  {
+    id: 'how-do-i-track-my-referrals',
+    question: {
+      en: 'How do I track my referrals?',
+      'zh-CN': '我如何追踪我的推荐？'
+    },
+    answer: {
+      en: 'Real-time dashboard via our partner portal.',
+      'zh-CN': '通过我们的合作伙伴门户使用实时仪表盘追踪。'
+    }
+  },
+  {
+    id: 'what-plans-qualify',
+    question: {
+      en: 'What plans qualify?',
+      'zh-CN': '哪些订阅方案符合条件？'
+    },
+    answer: {
+      en: 'All Comfy Cloud paid subscription plans (Standard, Creator, Pro, Teams).',
+      'zh-CN':
+        '所有 Comfy Cloud 付费订阅方案（Standard、Creator、Pro、Teams）。'
+    }
+  },
+  {
+    id: 'how-long-to-get-approved',
+    question: {
+      en: 'How long does approval take?',
+      'zh-CN': '审核需要多长时间？'
+    },
+    answer: {
+      en: 'Most applications approved within 24 hours.',
+      'zh-CN': '大多数申请会在 24 小时内获批。'
+    }
+  },
+  {
+    id: 'when-do-i-get-paid',
+    question: {
+      en: 'When do I get paid?',
+      'zh-CN': '什么时候结算佣金？'
+    },
+    answer: {
+      en: 'Monthly, within the first 10 business days. Minimum balance $100. Paid via Stripe Express or PayPal.',
+      'zh-CN':
+        '每月结算，于每月前 10 个工作日内发放。最低结算余额为 100 美元，通过 Stripe Express 或 PayPal 支付。'
+    }
+  },
+  {
+    id: 'what-happens-if-referral-upgrades-or-downgrades',
+    question: {
+      en: 'What happens if my referral upgrades or downgrades?',
+      'zh-CN': '如果我推荐的用户升级或降级订阅会怎样？'
+    },
+    answer: {
+      en: 'If they upgrade, your commission increases. If they downgrade, it adjusts accordingly. Commission is based on actual amounts received by Comfy.org, net of refunds.',
+      'zh-CN':
+        '如果他们升级订阅，您的佣金会相应增加；如果降级，佣金也会同步调整。佣金以 Comfy.org 实际收到的金额为准，并扣除退款部分。'
+    }
+  },
+  {
+    id: 'can-i-use-coupon-codes',
+    question: {
+      en: 'Can I use coupon codes?',
+      'zh-CN': '我可以使用优惠码吗？'
+    },
+    answer: {
+      en: 'Yes. We support both tracking links and unique coupon codes.',
+      'zh-CN': '可以。我们同时支持追踪链接和专属优惠码。'
+    }
+  },
+  {
+    id: 'what-if-my-referral-uses-an-ad-blocker',
+    question: {
+      en: 'What if my referral uses an ad blocker?',
+      'zh-CN': '如果我推荐的用户使用广告拦截器怎么办？'
+    },
+    answer: {
+      en: 'We use server-side tracking, so conversions are tracked regardless.',
+      'zh-CN':
+        '我们采用服务端追踪，因此无论用户是否使用广告拦截器，转化都能正常记录。'
+    }
+  },
+  {
+    id: 'what-assets-do-you-provide',
+    question: {
+      en: 'What assets do you provide?',
+      'zh-CN': '你们提供哪些素材？'
+    },
+    answer: {
+      en: 'Logos and banners on this page, plus screenshots and talking points in your affiliate dashboard after approval.',
+      'zh-CN':
+        '本页面提供 Logo 和横幅图，获批后您还可以在联盟仪表盘中获取截图和宣传文案。'
+    }
+  }
+] as const

apps/website/src/data/affiliateHowItWorks.ts

@@ -0,0 +1,45 @@
+import type { LocalizedText } from '../i18n/translations'
+
+interface HowItWorksStep {
+  id: string
+  label: LocalizedText
+  description: LocalizedText
+}
+
+export const affiliateHowItWorksSteps: readonly HowItWorksStep[] = [
+  {
+    id: 'apply',
+    label: {
+      en: 'Apply',
+      'zh-CN': '申请'
+    },
+    description: {
+      en: 'Submit a quick form. Most applicants approved same day.',
+      'zh-CN': '填写一份简短表单。大多数申请当天获批。'
+    }
+  },
+  {
+    id: 'share',
+    label: {
+      en: 'Share',
+      'zh-CN': '分享'
+    },
+    description: {
+      en: 'Get your unique tracking link. Share via content, social, email, however you reach your audience.',
+      'zh-CN':
+        '获取您的专属追踪链接。通过内容、社交、邮件等任何触达受众的方式分享。'
+    }
+  },
+  {
+    id: 'earn',
+    label: {
+      en: 'Earn',
+      'zh-CN': '赚取'
+    },
+    description: {
+      en: '30% recurring commission for 3 months on every Comfy Cloud subscriber you refer. Tracked in real-time. Paid monthly.',
+      'zh-CN':
+        '每位您推荐的 Comfy Cloud 订阅者，可获连续 3 个月 30% 的经常性佣金。实时追踪，每月结算。'
+    }
+  }
+] as const

apps/website/src/data/gallery.ts

@@ -7,6 +7,8 @@ export interface GalleryItem {
   teamAlias: string
   tool: string
   href?: string
+  objectPosition?: string
+  objectFit?: string
   /** Defaults to true. Set to false to hide this item from rendered lists. */
   visible?: boolean
 }

apps/website/src/i18n/translations.ts

@@ -4634,6 +4634,80 @@ const translations = {
     'zh-CN': '支持的模型'
   },
 
+  // Models list page (/models)
+  'models.list.label': { en: 'MODELS', 'zh-CN': '模型' },
+  'models.list.heroCta': {
+    en: 'Try {name} Now',
+    'zh-CN': '立即试用 {name}'
+  },
+  'models.list.creations.title': {
+    en: '{name} Image and Video Creations',
+    'zh-CN': '{name} 图像与视频创作'
+  },
+  'models.list.creations.cta': {
+    en: 'Explore Workflows',
+    'zh-CN': '探索工作流'
+  },
+  'models.list.heroTitle.before': {
+    en: '{name} in',
+    'zh-CN': ''
+  },
+  'models.list.heroTitle.after': {
+    en: '',
+    'zh-CN': ' 中的 {name}'
+  },
+  'models.list.heroSubtitle': {
+    en: 'From open-source diffusion checkpoints to partner APIs — every major model, with community workflow templates ready to run.',
+    'zh-CN':
+      '从开源扩散模型到合作伙伴 API，涵盖每一个主流模型，并附带可直接运行的社区工作流模板。'
+  },
+  'models.list.card.workflows': {
+    en: '{count} workflows',
+    'zh-CN': '{count} 个工作流'
+  },
+  'models.list.contact.label': {
+    en: 'COMFY HUB',
+    'zh-CN': 'COMFY HUB'
+  },
+  'models.showcase.label': { en: 'AI MODELS', 'zh-CN': 'AI 模型' },
+  'models.showcase.heading': {
+    en: 'Run the world’s\nleading AI models',
+    'zh-CN': '运行全球领先的\nAI 模型'
+  },
+  'models.showcase.subtitle': {
+    en: 'New models are added as they launch.',
+    'zh-CN': '新模型发布后会第一时间上线。'
+  },
+  'models.showcase.cta': {
+    en: 'EXPLORE WORKFLOWS',
+    'zh-CN': '探索工作流'
+  },
+  'models.showcase.card.grokImagine': {
+    en: 'Grok Imagine',
+    'zh-CN': 'Grok Imagine'
+  },
+  'models.showcase.card.nanoBananaPro': {
+    en: 'Nano Banana Pro',
+    'zh-CN': 'Nano Banana Pro'
+  },
+  'models.showcase.card.ltx23': {
+    en: 'LTX 2.3',
+    'zh-CN': 'LTX 2.3'
+  },
+  'models.showcase.card.qwenAdvancedEdit': {
+    en: 'Advanced image\nediting with Qwen',
+    'zh-CN': '使用 Qwen 进行\n高级图像编辑'
+  },
+  'models.showcase.card.wan22TextToVideo': {
+    en: 'Wan 2.2\ntext to video',
+    'zh-CN': 'Wan 2.2\n文字转视频'
+  },
+  'models.list.contact.heading': {
+    en: 'Pick a model and explore what the community has built. <a href="https://comfy.org/workflows" target="_blank" rel="noopener noreferrer" class="text-primary-comfy-yellow underline">Browse Comfy Hub</a> for the newest workflows.',
+    'zh-CN':
+      '选择一个模型，浏览社区的创作成果。<a href="https://comfy.org/workflows" target="_blank" rel="noopener noreferrer" class="text-primary-comfy-yellow underline">访问 Comfy Hub</a> 查看最新工作流。'
+  },
+
   // Payment status pages
   'payment.success.label': {
     en: 'PAYMENT',
@@ -4677,313 +4751,103 @@ const translations = {
     'zh-CN': '查看订阅文档'
   },
 
-  // Affiliate landing page (/affiliates)
-  // English-only copy; zh-CN values mirror en until a localized version lands.
-  'affiliate-landing.page.title': {
-    en: 'Comfy.org Affiliate Program — Become a Partner',
-    'zh-CN': 'Comfy.org Affiliate Program — Become a Partner'
+  // AffiliateHeroSection
+  'affiliate.hero.label': { en: 'AFFILIATE', 'zh-CN': '联盟' },
+  'affiliate.hero.headingHighlight': {
+    en: 'Earn 30%',
+    'zh-CN': '赚取 30%'
   },
-  'affiliate-landing.page.description': {
+  'affiliate.hero.headingMuted': {
+    en: 'recurring commission for 3 months.',
+    'zh-CN': '持续返佣 3 个月。'
+  },
+  'affiliate.hero.feature1': {
+    en: '30% recurring commission for 3 months',
+    'zh-CN': '30% 持续佣金，连续 3 个月'
+  },
+  'affiliate.hero.feature2': {
+    en: '60-day cookie window',
+    'zh-CN': '60 天 Cookie 窗口'
+  },
+  'affiliate.hero.feature3': {
+    en: '$100 minimum payout',
+    'zh-CN': '$100 起付'
+  },
+  'affiliate.hero.feature4': {
+    en: 'Monthly payouts',
+    'zh-CN': '每月结算'
+  },
+  'affiliate.hero.apply': { en: 'APPLY NOW', 'zh-CN': '立即申请' },
+  'affiliate.hero.imageAlt': {
+    en: 'Comfy affiliate program',
+    'zh-CN': 'Comfy 联盟计划'
+  },
+
+  // AffiliateAudienceSection
+  'affiliate.audience.heading': {
+    en: "Who we're looking for",
+    'zh-CN': '我们在寻找谁'
+  },
+  'affiliate.audience.subheading': {
+    en: 'If you are...',
+    'zh-CN': '如果您是……'
+  },
+
+  // AffiliateHowItWorksSection
+  'affiliate.howItWorks.heading': {
+    en: 'How it works',
+    'zh-CN': '运作方式'
+  },
+
+  // AffiliateBenefitsSection
+  'affiliate.benefits.heading': {
+    en: 'Why ComfyUI for affiliate creators',
+    'zh-CN': '为什么联盟创作者选择 ComfyUI'
+  },
+
+  // AffiliateBrandAssetsSection
+  'affiliate.assets.heading': {
+    en: 'Brand logos for your content',
+    'zh-CN': '可用于您内容的品牌 Logo'
+  },
+  'affiliate.assets.subheading': {
+    en: 'Banners, screenshots, and talking points are in your affiliate dashboard after approval.',
+    'zh-CN': '横幅图、截图和宣传文案将在获批后于联盟仪表盘中提供。'
+  },
+  'affiliate.assets.downloadLabel': {
+    en: 'Download zip',
+    'zh-CN': '下载压缩包'
+  },
+
+  // AffiliateFAQSection
+  'affiliate.faq.heading': {
+    en: 'Frequently asked questions',
+    'zh-CN': '常见问题'
+  },
+
+  // Affiliate page (/affiliates) — head metadata
+  'affiliate.page.title': {
+    en: 'Comfy.org Affiliate Program — Become a Partner',
+    'zh-CN': 'Comfy.org 联盟计划 — 成为合作伙伴'
+  },
+  'affiliate.page.description': {
     en: 'Earn 30% recurring commission for 3 months on every Comfy Cloud subscription you refer. Apply to become a Comfy Partner.',
     'zh-CN':
-      'Earn 30% recurring commission for 3 months on every Comfy Cloud subscription you refer. Apply to become a Comfy Partner.'
-  },
-  'affiliate-landing.cta.apply': {
-    en: 'Apply Now',
-    'zh-CN': 'Apply Now'
-  },
-  'affiliate-landing.cta.applyAriaLabel': {
-    en: 'Apply Now (opens in new tab)',
-    'zh-CN': 'Apply Now (opens in new tab)'
+      '为您推荐的每个 Comfy Cloud 订阅赚取 30% 持续佣金，连续 3 个月。立即申请成为 Comfy 合作伙伴。'
   },
 
-  // Hero
-  'affiliate-landing.hero.heading': {
-    en: 'Become a Comfy Partner',
-    'zh-CN': 'Become a Comfy Partner'
-  },
-  'affiliate-landing.hero.subheading': {
-    en: 'Earn 30% Commission for 3 Months.',
-    'zh-CN': 'Earn 30% Commission for 3 Months.'
-  },
-  'affiliate-landing.hero.body': {
-    en: 'Join the Comfy.org Affiliate Program and earn 30% recurring commission for 3 months on every Comfy Cloud subscription you refer:',
-    'zh-CN':
-      'Join the Comfy.org Affiliate Program and earn 30% recurring commission for 3 months on every Comfy Cloud subscription you refer:'
-  },
-  'affiliate-landing.hero.highlight.0': {
-    en: '30% recurring commission for 3 months',
-    'zh-CN': '30% recurring commission for 3 months'
-  },
-  'affiliate-landing.hero.highlight.1': {
-    en: '60-day cookie window',
-    'zh-CN': '60-day cookie window'
-  },
-  'affiliate-landing.hero.highlight.2': {
-    en: '$100 minimum payout',
-    'zh-CN': '$100 minimum payout'
-  },
-  'affiliate-landing.hero.highlight.3': {
-    en: 'Monthly payouts',
-    'zh-CN': 'Monthly payouts'
-  },
-
-  // Trust band
-  'affiliate-landing.trust.label': {
-    en: 'Trusted by 2M+ creators worldwide',
-    'zh-CN': 'Trusted by 2M+ creators worldwide'
-  },
-
-  // How it works
-  'affiliate-landing.how.heading': {
-    en: 'How it works',
-    'zh-CN': 'How it works'
-  },
-  'affiliate-landing.how.step.0.title': {
-    en: 'Apply.',
-    'zh-CN': 'Apply.'
-  },
-  'affiliate-landing.how.step.0.body': {
-    en: 'Submit a quick form. Most applicants approved same day.',
-    'zh-CN': 'Submit a quick form. Most applicants approved same day.'
-  },
-  'affiliate-landing.how.step.1.title': {
-    en: 'Share.',
-    'zh-CN': 'Share.'
-  },
-  'affiliate-landing.how.step.1.body': {
-    en: 'Get your unique tracking link. Share via content, social, email, however you reach your audience.',
-    'zh-CN':
-      'Get your unique tracking link. Share via content, social, email, however you reach your audience.'
-  },
-  'affiliate-landing.how.step.2.title': {
-    en: 'Earn.',
-    'zh-CN': 'Earn.'
-  },
-  'affiliate-landing.how.step.2.body': {
-    en: '30% recurring commission for 3 months on every Comfy Cloud subscriber you refer. Tracked in real-time. Paid monthly.',
-    'zh-CN':
-      '30% recurring commission for 3 months on every Comfy Cloud subscriber you refer. Tracked in real-time. Paid monthly.'
-  },
-
-  // Who we're looking for
-  'affiliate-landing.audience.heading': {
-    en: "Who we're looking for",
-    'zh-CN': "Who we're looking for"
-  },
-  'affiliate-landing.audience.item.0': {
-    en: 'ComfyUI tutorial creators and workflow builders',
-    'zh-CN': 'ComfyUI tutorial creators and workflow builders'
-  },
-  'affiliate-landing.audience.item.1': {
-    en: 'AI tool reviewers on YouTube, TikTok, blogs',
-    'zh-CN': 'AI tool reviewers on YouTube, TikTok, blogs'
-  },
-  'affiliate-landing.audience.item.2': {
-    en: 'Tech bloggers covering AI creative tools',
-    'zh-CN': 'Tech bloggers covering AI creative tools'
-  },
-  'affiliate-landing.audience.item.3': {
-    en: 'Newsletter operators in the AI/creative space',
-    'zh-CN': 'Newsletter operators in the AI/creative space'
-  },
-  'affiliate-landing.audience.item.4': {
-    en: 'Anyone with an audience interested in AI image, video, or 3D generation',
-    'zh-CN':
-      'Anyone with an audience interested in AI image, video, or 3D generation'
-  },
-
-  // Program details
-  'affiliate-landing.details.heading': {
-    en: 'Program details',
-    'zh-CN': 'Program details'
-  },
-  'affiliate-landing.details.headerLabel': {
-    en: 'Detail',
-    'zh-CN': 'Detail'
-  },
-  'affiliate-landing.details.headerValue': {
-    en: 'Value',
-    'zh-CN': 'Value'
-  },
-  'affiliate-landing.details.row.0.label': {
-    en: 'Commission rate',
-    'zh-CN': 'Commission rate'
-  },
-  'affiliate-landing.details.row.0.value': {
-    en: '30% recurring',
-    'zh-CN': '30% recurring'
-  },
-  'affiliate-landing.details.row.1.label': {
-    en: 'Commission duration',
-    'zh-CN': 'Commission duration'
-  },
-  'affiliate-landing.details.row.1.value': {
-    en: '3 months',
-    'zh-CN': '3 months'
-  },
-  'affiliate-landing.details.row.2.label': {
-    en: 'Cookie window',
-    'zh-CN': 'Cookie window'
-  },
-  'affiliate-landing.details.row.2.value': {
-    en: '60 days',
-    'zh-CN': '60 days'
-  },
-  'affiliate-landing.details.row.3.label': {
-    en: 'Eligible products',
-    'zh-CN': 'Eligible products'
-  },
-  'affiliate-landing.details.row.3.value': {
-    en: 'Comfy Cloud paid subscription plans',
-    'zh-CN': 'Comfy Cloud paid subscription plans'
-  },
-  'affiliate-landing.details.row.4.label': {
-    en: 'Payouts',
-    'zh-CN': 'Payouts'
-  },
-  'affiliate-landing.details.row.4.value': {
-    en: 'Monthly, within first 10 business days',
-    'zh-CN': 'Monthly, within first 10 business days'
-  },
-  'affiliate-landing.details.row.5.label': {
-    en: 'Minimum payout',
-    'zh-CN': 'Minimum payout'
-  },
-  'affiliate-landing.details.row.5.value': {
-    en: '$100',
-    'zh-CN': '$100'
-  },
-
-  // Brand assets
-  'affiliate-landing.assets.heading': {
-    en: 'Brand assets',
-    'zh-CN': 'Brand assets'
-  },
-  'affiliate-landing.assets.subheading': {
-    en: 'Approved Comfy logos for your content. Banners, screenshots, and talking points are in your affiliate dashboard after approval.',
-    'zh-CN':
-      'Approved Comfy logos for your content. Banners, screenshots, and talking points are in your affiliate dashboard after approval.'
-  },
-  'affiliate-landing.assets.downloadLabel': {
-    en: 'Download',
-    'zh-CN': 'Download'
-  },
-  'affiliate-landing.assets.tile.logo-horizontal.title': {
-    en: 'Comfy logo (horizontal)',
-    'zh-CN': 'Comfy logo (horizontal)'
-  },
-  'affiliate-landing.assets.tile.logomark.title': {
-    en: 'Comfy logomark',
-    'zh-CN': 'Comfy logomark'
-  },
-  'affiliate-landing.assets.tile.comfy-full-logo-yellow.title': {
-    en: 'Comfy full logo (yellow)',
-    'zh-CN': 'Comfy full logo (yellow)'
-  },
-  'affiliate-landing.assets.tile.comfy-full-logo-ink.title': {
-    en: 'Comfy full logo (ink)',
-    'zh-CN': 'Comfy full logo (ink)'
-  },
-  'affiliate-landing.assets.tile.amplified-logo-mark.title': {
-    en: 'Amplified logo mark',
-    'zh-CN': 'Amplified logo mark'
-  },
-  'affiliate-landing.assets.tile.dimensional-logo-mark.title': {
-    en: 'Dimensional logo mark',
-    'zh-CN': 'Dimensional logo mark'
-  },
-  'affiliate-landing.assets.tile.color-combo-yellow.title': {
-    en: 'Color combo (yellow)',
-    'zh-CN': 'Color combo (yellow)'
-  },
-  'affiliate-landing.assets.tile.color-combo-ink.title': {
-    en: 'Color combo (ink)',
-    'zh-CN': 'Color combo (ink)'
-  },
-
-  // FAQ — keys follow the FAQSection contract: <prefix>.<n>.q / <prefix>.<n>.a, 1-indexed
-  'affiliate-landing.faq.heading': {
-    en: 'Questions',
-    'zh-CN': 'Questions'
-  },
-  'affiliate-landing.faq.1.q': {
-    en: 'How do I track my referrals?',
-    'zh-CN': 'How do I track my referrals?'
-  },
-  'affiliate-landing.faq.1.a': {
-    en: 'Real-time dashboard via our partner portal.',
-    'zh-CN': 'Real-time dashboard via our partner portal.'
-  },
-  'affiliate-landing.faq.2.q': {
-    en: 'What plans qualify?',
-    'zh-CN': 'What plans qualify?'
-  },
-  'affiliate-landing.faq.2.a': {
-    en: 'All Comfy Cloud paid subscription plans (Creator, Pro, Teams).',
-    'zh-CN': 'All Comfy Cloud paid subscription plans (Creator, Pro, Teams).'
-  },
-  'affiliate-landing.faq.3.q': {
-    en: 'How long does approval take?',
-    'zh-CN': 'How long does approval take?'
-  },
-  'affiliate-landing.faq.3.a': {
-    en: 'Most applications approved within 24 hours.',
-    'zh-CN': 'Most applications approved within 24 hours.'
-  },
-  'affiliate-landing.faq.4.q': {
-    en: 'When do I get paid?',
-    'zh-CN': 'When do I get paid?'
-  },
-  'affiliate-landing.faq.4.a': {
-    en: 'Monthly, within the first 10 business days. Minimum balance $100. Paid via Stripe Express or PayPal.',
-    'zh-CN':
-      'Monthly, within the first 10 business days. Minimum balance $100. Paid via Stripe Express or PayPal.'
-  },
-  'affiliate-landing.faq.5.q': {
-    en: 'What happens if my referral upgrades or downgrades?',
-    'zh-CN': 'What happens if my referral upgrades or downgrades?'
-  },
-  'affiliate-landing.faq.5.a': {
-    en: 'If they upgrade, your commission increases. If they downgrade, it adjusts accordingly. Commission is based on actual amounts received by Comfy.org, net of refunds.',
-    'zh-CN':
-      'If they upgrade, your commission increases. If they downgrade, it adjusts accordingly. Commission is based on actual amounts received by Comfy.org, net of refunds.'
-  },
-  'affiliate-landing.faq.6.q': {
-    en: 'Can I use coupon codes?',
-    'zh-CN': 'Can I use coupon codes?'
-  },
-  'affiliate-landing.faq.6.a': {
-    en: 'Yes. We support both tracking links and unique coupon codes.',
-    'zh-CN': 'Yes. We support both tracking links and unique coupon codes.'
-  },
-  'affiliate-landing.faq.7.q': {
-    en: 'What if my referral uses an ad blocker?',
-    'zh-CN': 'What if my referral uses an ad blocker?'
-  },
-  'affiliate-landing.faq.7.a': {
-    en: 'We use server-side tracking, so conversions are tracked regardless.',
-    'zh-CN':
-      'We use server-side tracking, so conversions are tracked regardless.'
-  },
-  'affiliate-landing.faq.8.q': {
-    en: 'What assets do you provide?',
-    'zh-CN': 'What assets do you provide?'
-  },
-  'affiliate-landing.faq.8.a': {
-    en: 'Logos and banners on this page, plus screenshots and talking points in your affiliate dashboard after approval.',
-    'zh-CN':
-      'Logos and banners on this page, plus screenshots and talking points in your affiliate dashboard after approval.'
-  },
-
-  // Footer CTA
-  'affiliate-landing.footerCta.heading': {
+  // AffiliateCtaSection
+  'affiliate.cta.heading': {
     en: 'Ready to start earning?',
-    'zh-CN': 'Ready to start earning?'
+    'zh-CN': '准备好开始赚取佣金了吗？'
   },
-  'affiliate-landing.footerCta.termsLink': {
+  'affiliate.cta.apply': {
+    en: 'APPLY NOW',
+    'zh-CN': '立即申请'
+  },
+  'affiliate.cta.termsLabel': {
     en: 'Read the affiliate program terms',
-    'zh-CN': 'Read the affiliate program terms'
+    'zh-CN': '阅读联盟计划条款'
   }
 } as const satisfies Record<string, Record<Locale, string>>
 

apps/website/src/pages/affiliates/index.astro

@@ -1,44 +1,34 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro'
-import AudienceSection from '../../components/affiliates/AudienceSection.vue'
-import BrandAssetsSection from '../../components/affiliates/BrandAssetsSection.vue'
-import FooterCtaSection from '../../components/affiliates/FooterCtaSection.vue'
-import HeroSection from '../../components/affiliates/HeroSection.vue'
-import HowItWorksSection from '../../components/affiliates/HowItWorksSection.vue'
-import ProgramDetailsSection from '../../components/affiliates/ProgramDetailsSection.vue'
-import TrustBandSection from '../../components/affiliates/TrustBandSection.vue'
-import FAQSection from '../../components/common/FAQSection.vue'
-import {
-  AFFILIATE_FAQ_COUNT,
-  AFFILIATE_FAQ_HEADING_KEY,
-  AFFILIATE_FAQ_PREFIX
-} from '../../components/affiliates/affiliateFaqs'
-import type { Locale, TranslationKey } from '../../i18n/translations'
+import AudienceSection from '../../templates/affiliate/AudienceSection.vue'
+import BenefitsSection from '../../templates/affiliate/BenefitsSection.vue'
+import BrandAssetsSection from '../../templates/affiliate/BrandAssetsSection.vue'
+import CtaSection from '../../templates/affiliate/CtaSection.vue'
+import FAQSection from '../../templates/affiliate/FAQSection.vue'
+import HeroSection from '../../templates/affiliate/HeroSection.vue'
+import HowItWorksSection from '../../templates/affiliate/HowItWorksSection.vue'
+import { affiliateFaqs } from '../../data/affiliateFaq'
 import { t } from '../../i18n/translations'
 
-const locale: Locale =
-  Astro.currentLocale === 'zh-CN' ? 'zh-CN' : 'en'
+const locale = 'en' as const
 
 const faqJsonLd = {
   '@context': 'https://schema.org',
   '@type': 'FAQPage',
-  mainEntity: Array.from({ length: AFFILIATE_FAQ_COUNT }, (_, i) => {
-    const n = i + 1
-    return {
-      '@type': 'Question',
-      name: t(`${AFFILIATE_FAQ_PREFIX}.${n}.q` as TranslationKey, locale),
-      acceptedAnswer: {
-        '@type': 'Answer',
-        text: t(`${AFFILIATE_FAQ_PREFIX}.${n}.a` as TranslationKey, locale)
-      }
+  mainEntity: affiliateFaqs.map((faq) => ({
+    '@type': 'Question',
+    name: faq.question[locale],
+    acceptedAnswer: {
+      '@type': 'Answer',
+      text: faq.answer[locale]
     }
-  })
+  }))
 }
 ---
 
 <BaseLayout
-  title={t('affiliate-landing.page.title', locale)}
-  description={t('affiliate-landing.page.description', locale)}
+  title={t('affiliate.page.title', locale)}
+  description={t('affiliate.page.description', locale)}
 >
   <Fragment slot="head">
     <script
@@ -48,18 +38,11 @@ const faqJsonLd = {
     />
   </Fragment>
 
-  <HeroSection locale={locale} client:load />
-  <TrustBandSection locale={locale} />
-  <HowItWorksSection locale={locale} />
-  <AudienceSection locale={locale} />
-  <ProgramDetailsSection locale={locale} />
-  <BrandAssetsSection locale={locale} />
-  <FAQSection
-    locale={locale}
-    headingKey={AFFILIATE_FAQ_HEADING_KEY}
-    faqPrefix={AFFILIATE_FAQ_PREFIX}
-    faqCount={AFFILIATE_FAQ_COUNT}
-    client:load
-  />
-  <FooterCtaSection locale={locale} client:load />
+  <HeroSection />
+  <HowItWorksSection />
+  <AudienceSection />
+  <BenefitsSection />
+  <BrandAssetsSection />
+  <FAQSection client:visible />
+  <CtaSection />
 </BaseLayout>

apps/website/src/pages/models.astro

@@ -0,0 +1,22 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro'
+import ModelsHeroSection from '../components/models/ModelsHeroSection.vue'
+import ModelCreationsSection from '../components/models/ModelCreationsSection.vue'
+import AIModelsSection from '../components/product/shared/AIModelsSection.vue'
+import ProductShowcaseSection from '../components/home/ProductShowcaseSection.vue' 
+---
+
+<BaseLayout
+  title="Models — Comfy"
+  description="Run the world's leading AI models in ComfyUI. Browse every supported model with community workflow templates ready to run."
+>
+  <ModelsHeroSection
+    modelName="Grok Imagine"
+    ctaHref="/p/supported-models/grok-imagine"
+    videoSrc="https://media.comfy.org/website/models/video_ComfdyUI_00001_.mp4"
+    videoAriaLabel="Grok Imagine output created with ComfyUI"
+  />
+  <ModelCreationsSection client:load />
+  <AIModelsSection client:load />
+  <ProductShowcaseSection client:load />
+</BaseLayout>

apps/website/src/pages/zh-CN/models.astro

@@ -0,0 +1,23 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import ModelsHeroSection from '../../components/models/ModelsHeroSection.vue'
+import ModelCreationsSection from '../../components/models/ModelCreationsSection.vue'
+import AIModelsSection from '../../components/product/shared/AIModelsSection.vue'
+import ProductShowcaseSection from '../../components/home/ProductShowcaseSection.vue'
+---
+
+<BaseLayout
+  title="模型 — Comfy"
+  description="在 ComfyUI 中运行世界领先的 AI 模型。浏览所有支持的模型及社区工作流模板。"
+>
+  <ModelsHeroSection
+    locale="zh-CN"
+    modelName="Grok Imagine"
+    ctaHref="/zh-CN/p/supported-models/grok-imagine"
+    videoSrc="https://media.comfy.org/website/models/video_ComfdyUI_00001_.mp4"
+    videoAriaLabel="使用 ComfyUI 创建的 Grok Imagine 作品"
+  />
+  <ModelCreationsSection client:load locale="zh-CN" />
+  <AIModelsSection client:load locale="zh-CN" />
+  <ProductShowcaseSection client:load locale="zh-CN" />
+</BaseLayout>

apps/website/src/templates/affiliate/AudienceSection.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import ChecklistSplit01 from '../../components/blocks/ChecklistSplit01.vue'
+import { affiliateAudienceCriteria } from '../../data/affiliateAudience'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const criteria = affiliateAudienceCriteria.map((criterion) => ({
+  id: criterion.id,
+  label: criterion.label[locale]
+}))
+</script>
+
+<template>
+  <ChecklistSplit01
+    :heading="t('affiliate.audience.heading', locale)"
+    :subheading="t('affiliate.audience.subheading', locale)"
+    :criteria="criteria"
+  />
+</template>

apps/website/src/templates/affiliate/BenefitsSection.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import BenefitsGrid01 from '../../components/blocks/BenefitsGrid01.vue'
+import { externalLinks } from '../../config/routes'
+import { affiliateBenefits } from '../../data/affiliateBenefits'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const benefits = affiliateBenefits.map((benefit) => ({
+  id: benefit.id,
+  description: benefit.description[locale]
+}))
+</script>
+
+<template>
+  <BenefitsGrid01
+    :heading="t('affiliate.benefits.heading', locale)"
+    :benefits="benefits"
+    :primary-cta="{
+      label: t('affiliate.hero.apply', locale),
+      href: externalLinks.affiliateApplicationForm,
+      target: '_blank'
+    }"
+  />
+</template>

apps/website/src/templates/affiliate/BrandAssetsSection.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import BrandAssetsGrid01 from '../../components/blocks/BrandAssetsGrid01.vue'
+import { affiliateBrandAssets } from '../../data/affiliateBrandAssets'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const assets = affiliateBrandAssets.map((asset) => ({
+  id: asset.id,
+  title: asset.title[locale],
+  download: asset.download,
+  preview: asset.preview
+}))
+</script>
+
+<template>
+  <BrandAssetsGrid01
+    :heading="t('affiliate.assets.heading', locale)"
+    :subheading="t('affiliate.assets.subheading', locale)"
+    :download-label="t('affiliate.assets.downloadLabel', locale)"
+    :assets="assets"
+  />
+</template>

apps/website/src/templates/affiliate/CtaSection.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import CtaCenter01 from '../../components/blocks/CtaCenter01.vue'
+import { externalLinks, getRoutes } from '../../config/routes'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const routes = getRoutes(locale)
+</script>
+
+<template>
+  <CtaCenter01
+    :heading="t('affiliate.cta.heading', locale)"
+    :primary-cta="{
+      label: t('affiliate.cta.apply', locale),
+      href: externalLinks.affiliateApplicationForm,
+      target: '_blank'
+    }"
+    :terms-link="{
+      label: t('affiliate.cta.termsLabel', locale),
+      href: routes.affiliateTerms
+    }"
+  />
+</template>

apps/website/src/templates/affiliate/FAQSection.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import FAQSplit01 from '../../components/blocks/FAQSplit01.vue'
+import { affiliateFaqs } from '../../data/affiliateFaq'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const faqs = affiliateFaqs.map((faq) => ({
+  id: faq.id,
+  question: faq.question[locale],
+  answer: faq.answer[locale]
+}))
+</script>
+
+<template>
+  <FAQSplit01 :heading="t('affiliate.faq.heading', locale)" :faqs="faqs" />
+</template>

apps/website/src/templates/affiliate/HeroSection.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import HeroSplit01 from '../../components/blocks/HeroSplit01.vue'
+import { externalLinks } from '@/config/routes.ts'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+</script>
+
+<template>
+  <HeroSplit01
+    :badge-text="t('affiliate.hero.label', locale)"
+    :title-highlight="t('affiliate.hero.headingHighlight', locale)"
+    :title="t('affiliate.hero.headingMuted', locale)"
+    :features="[
+      t('affiliate.hero.feature1', locale),
+      t('affiliate.hero.feature2', locale),
+      t('affiliate.hero.feature3', locale),
+      t('affiliate.hero.feature4', locale)
+    ]"
+    :primary-cta="{
+      label: t('affiliate.hero.apply', locale),
+      href: externalLinks.affiliateApplicationForm
+    }"
+    video-autoplay
+    video-loop
+    video-hide-controls
+    video-src="https://media.comfy.org/website/affiliates/rainlit-ronin_compressed.mp4"
+    :image-alt="t('affiliate.hero.imageAlt', locale)"
+  />
+</template>

apps/website/src/templates/affiliate/HowItWorksSection.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { Locale } from '../../i18n/translations'
+
+import StepsGrid01 from '../../components/blocks/StepsGrid01.vue'
+import { affiliateHowItWorksSteps } from '../../data/affiliateHowItWorks'
+import { t } from '../../i18n/translations'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const steps = affiliateHowItWorksSteps.map((step) => ({
+  id: step.id,
+  label: step.label[locale],
+  description: step.description[locale]
+}))
+</script>
+
+<template>
+  <StepsGrid01
+    :heading="t('affiliate.howItWorks.heading', locale)"
+    :steps="steps"
+  />
+</template>

src/components/common/ComfyImage.vue

@@ -31,9 +31,9 @@
 </template>
 
 <script setup lang="ts">
-import { useImage } from '@vueuse/core'
 import { computed } from 'vue'
 
+import { useImageQuiet } from '@/composables/useImageQuiet'
 import { cn } from '@comfyorg/tailwind-utils'
 
 const {
@@ -51,5 +51,5 @@ const {
   alt?: string
 }>()
 
-const { error } = useImage(computed(() => ({ src, alt })))
+const { error } = useImageQuiet(computed(() => ({ src, alt })))
 </script>

src/components/searchbox/LinkReleaseContextMenu.test.ts

@@ -0,0 +1,71 @@
+import { createTestingPinia } from '@pinia/testing'
+import { render, screen } from '@testing-library/vue'
+import { describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+import LinkReleaseContextMenu from './LinkReleaseContextMenu.vue'
+import type { LinkReleaseNodeCategory } from './linkReleaseMenuModel'
+
+const { groups } = vi.hoisted(() => ({
+  groups: {
+    suggestions: [] as ComfyNodeDefImpl[],
+    categories: [] as LinkReleaseNodeCategory[]
+  }
+}))
+
+vi.mock('./linkReleaseMenuModel', () => ({
+  getLinkReleaseHeaderLabel: () => '',
+  getLinkReleaseSuggestions: () => groups.suggestions,
+  buildLinkReleaseNodeCategories: () => groups.categories,
+  searchLinkReleaseNodes: () => [],
+  filterNodesByName: () => []
+}))
+
+const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: {} } })
+
+const stubs = {
+  DropdownMenuRoot: { template: '<div><slot /></div>' },
+  DropdownMenuTrigger: { template: '<div><slot /></div>' },
+  DropdownMenuPortal: { template: '<div><slot /></div>' },
+  DropdownMenuContent: { template: '<div><slot /></div>' },
+  DropdownMenuLabel: { template: '<div><slot /></div>' },
+  DropdownMenuItem: { template: '<div role="menuitem"><slot /></div>' },
+  DropdownMenuSeparator: { template: '<hr data-testid="menu-separator" />' },
+  LinkReleaseNodeSubmenu: { template: '<div data-testid="submenu" />' },
+  MiddleTruncate: { template: '<span>{{ text }}</span>', props: ['text'] }
+}
+
+function suggestion(name: string): ComfyNodeDefImpl {
+  return { name, display_name: name } as ComfyNodeDefImpl
+}
+
+function nodeCategory(key: 'comfy' | 'extensions'): LinkReleaseNodeCategory {
+  return { key, labelKey: key, icon: '', nodes: [suggestion('Node')] }
+}
+
+function renderMenu() {
+  return render(LinkReleaseContextMenu, {
+    props: { context: null },
+    global: { plugins: [i18n, createTestingPinia()], stubs }
+  })
+}
+
+describe('LinkReleaseContextMenu group divider', () => {
+  it('renders a divider between the suggestions and categories groups', () => {
+    groups.suggestions = [suggestion('KSampler')]
+    groups.categories = [nodeCategory('comfy')]
+    renderMenu()
+
+    expect(screen.getAllByTestId('menu-separator')).toHaveLength(3)
+  })
+
+  it('omits the group divider when only one group is present', () => {
+    groups.suggestions = []
+    groups.categories = [nodeCategory('comfy')]
+    renderMenu()
+
+    expect(screen.getAllByTestId('menu-separator')).toHaveLength(2)
+  })
+})

src/components/searchbox/LinkReleaseContextMenu.vue

@@ -0,0 +1,328 @@
+<template>
+  <DropdownMenuRoot :open="open" @update:open="onOpenChange">
+    <DropdownMenuTrigger as-child>
+      <div
+        aria-hidden="true"
+        class="pointer-events-none fixed size-0"
+        :style="{ left: `${position.x}px`, top: `${position.y}px` }"
+      />
+    </DropdownMenuTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuContent
+        side="bottom"
+        align="start"
+        :side-offset="4"
+        :collision-padding="8"
+        :class="contentClass"
+        @open-auto-focus.prevent="focusSearch"
+        @close-auto-focus.prevent
+        @entry-focus="onEntryFocus"
+        @keydown.capture="redirectTypingToSearch"
+      >
+        <DropdownMenuLabel
+          v-if="headerLabel"
+          class="block shrink-0 truncate p-2 text-xs font-medium text-muted-foreground uppercase"
+        >
+          {{ headerLabel }}
+        </DropdownMenuLabel>
+        <div class="p-.5 shrink-0">
+          <div
+            class="flex h-9 items-center gap-2 rounded-lg bg-secondary-background px-2"
+          >
+            <i
+              class="icon-[lucide--search] size-4 shrink-0 text-muted-foreground"
+            />
+            <input
+              ref="searchInput"
+              v-model="query"
+              type="text"
+              :placeholder="t('contextMenu.Search')"
+              class="size-full min-w-0 appearance-none border-none bg-transparent text-sm text-base-foreground outline-none placeholder:text-muted-foreground"
+              @keydown="onRootSearchKeydown"
+            />
+          </div>
+        </div>
+        <DropdownMenuSeparator
+          class="-mx-1 my-1 h-px shrink-0 bg-border-subtle"
+        />
+
+        <div :class="scrollClass">
+          <template v-if="trimmedQuery">
+            <DropdownMenuItem
+              v-for="match in searchResults"
+              :key="`${match.category.key}:${match.node.name}`"
+              :class="itemClass"
+              @select="selectNode(match.node)"
+            >
+              <i
+                :class="cn(match.category.icon, 'size-4 shrink-0 opacity-80')"
+              />
+              <span class="flex min-w-0 flex-1 items-center gap-1">
+                <span class="shrink-0 text-muted-foreground">
+                  {{ t(match.category.labelKey) }}:
+                </span>
+                <MiddleTruncate
+                  :text="match.node.display_name"
+                  class="min-w-0 flex-1"
+                />
+              </span>
+            </DropdownMenuItem>
+            <div
+              v-if="searchResults.length === 0"
+              class="p-1 text-sm text-muted-foreground"
+            >
+              {{ t('g.noResults') }}
+            </div>
+          </template>
+
+          <template v-else>
+            <template v-if="suggestions.length">
+              <DropdownMenuLabel
+                class="block truncate p-2 text-xs font-medium text-muted-foreground uppercase"
+              >
+                {{ t('contextMenu.Most Relevant') }}
+              </DropdownMenuLabel>
+              <DropdownMenuItem
+                v-for="nodeDef in suggestions"
+                :key="nodeDef.name"
+                :class="itemClass"
+                @select="selectNode(nodeDef)"
+              >
+                <MiddleTruncate
+                  :text="nodeDef.display_name"
+                  class="min-w-0 flex-1"
+                />
+              </DropdownMenuItem>
+            </template>
+
+            <DropdownMenuSeparator
+              v-if="suggestions.length && categories.length"
+              class="-mx-1 my-1 h-px shrink-0 bg-border-subtle"
+            />
+
+            <template v-if="categories.length">
+              <DropdownMenuLabel
+                class="block truncate p-2 text-xs font-medium text-muted-foreground uppercase"
+              >
+                {{ t('contextMenu.Compatible Nodes') }}
+              </DropdownMenuLabel>
+              <LinkReleaseNodeSubmenu
+                v-for="category in categories"
+                :key="category.key"
+                :category
+                :item-class="itemClass"
+                :content-class="submenuContentClass"
+                :scroll-class="submenuScrollClass"
+                @select="selectNode"
+              />
+            </template>
+          </template>
+        </div>
+
+        <template v-if="!trimmedQuery">
+          <DropdownMenuSeparator
+            class="-mx-1 my-1 h-px shrink-0 bg-border-subtle"
+          />
+          <DropdownMenuItem
+            :class="cn(itemClass, 'shrink-0')"
+            @select="addReroute"
+          >
+            <i class="icon-[lucide--git-fork] size-4 shrink-0 opacity-80" />
+            <span class="flex-1 truncate">
+              {{ t('contextMenu.Add Reroute') }}
+            </span>
+          </DropdownMenuItem>
+        </template>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRoot,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from 'reka-ui'
+import { computed, nextTick, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { LiteGraph } from '@/lib/litegraph/src/litegraph'
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { useNodeDefStore } from '@/stores/nodeDefStore'
+
+import LinkReleaseNodeSubmenu from './LinkReleaseNodeSubmenu.vue'
+import MiddleTruncate from './MiddleTruncate.vue'
+import {
+  buildLinkReleaseNodeCategories,
+  getLinkReleaseHeaderLabel,
+  getLinkReleaseSuggestions,
+  searchLinkReleaseNodes
+} from './linkReleaseMenuModel'
+import type {
+  LinkReleaseContext,
+  LinkReleaseNodeMatch
+} from './linkReleaseMenuModel'
+
+const { context } = defineProps<{ context: LinkReleaseContext | null }>()
+
+const emit = defineEmits<{
+  selectNode: [nodeDef: ComfyNodeDefImpl]
+  addReroute: []
+  dismiss: []
+}>()
+
+const { t } = useI18n()
+const nodeDefStore = useNodeDefStore()
+
+const open = ref(false)
+const position = ref({ x: 0, y: 0 })
+const searchInput = ref<HTMLInputElement>()
+const query = ref('')
+let actionTaken = false
+
+const contentClass =
+  'z-1700 flex max-h-[min(80vh,var(--reka-dropdown-menu-content-available-height))] min-w-[260px] max-w-sm flex-col overflow-hidden rounded-lg border border-interface-menu-stroke bg-interface-menu-surface p-1 shadow-interface'
+const scrollClass = 'overflow-y-auto scrollbar-custom'
+const submenuContentClass =
+  'z-1700 flex w-sm max-h-[min(80vh,var(--reka-dropdown-menu-content-available-height))] flex-col overflow-hidden rounded-lg border border-interface-menu-stroke bg-interface-menu-surface p-1 shadow-interface'
+const submenuScrollClass =
+  'overflow-y-auto scrollbar-custom max-h-[min(calc(var(--reka-dropdown-menu-content-available-height)-3.5rem),80vh)]'
+const itemClass =
+  'flex cursor-pointer items-center gap-2 rounded-lg px-2 py-2 text-sm text-base-foreground outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-interface-menu-component-surface-hovered'
+
+const headerLabel = computed(() =>
+  context ? getLinkReleaseHeaderLabel(context) : ''
+)
+
+const trimmedQuery = computed(() => query.value.trim())
+
+const typeFilter = computed(() => {
+  if (!context) return null
+  const svc = nodeDefStore.nodeSearchService
+  return {
+    filterDef: context.isFromOutput
+      ? svc.inputTypeFilter
+      : svc.outputTypeFilter,
+    value: context.dataType
+  }
+})
+
+const compatibleNodes = computed<ComfyNodeDefImpl[]>(() => {
+  if (!typeFilter.value) return []
+  return nodeDefStore.nodeSearchService.searchNode('', [typeFilter.value], {
+    limit: 500
+  })
+})
+
+const defaultNodeDefs = computed<ComfyNodeDefImpl[]>(() => {
+  if (!context?.dataType) return []
+  const table = context.isFromOutput
+    ? LiteGraph.slot_types_default_out
+    : LiteGraph.slot_types_default_in
+  const types = table?.[context.dataType] ?? []
+  return types
+    .map((type) => nodeDefStore.allNodeDefsByName[type])
+    .filter((nodeDef): nodeDef is ComfyNodeDefImpl => Boolean(nodeDef))
+})
+
+const suggestions = computed(() =>
+  getLinkReleaseSuggestions(defaultNodeDefs.value)
+)
+const categories = computed(() =>
+  buildLinkReleaseNodeCategories(compatibleNodes.value)
+)
+
+const searchResults = computed<LinkReleaseNodeMatch[]>(() =>
+  searchLinkReleaseNodes(categories.value, trimmedQuery.value)
+)
+
+function selectNode(nodeDef: ComfyNodeDefImpl) {
+  actionTaken = true
+  emit('selectNode', nodeDef)
+  hide()
+}
+
+function addReroute() {
+  actionTaken = true
+  emit('addReroute')
+  hide()
+}
+
+function focusSearch() {
+  searchInput.value?.focus()
+}
+
+function isPrintableKey(event: KeyboardEvent) {
+  return (
+    event.key.length === 1 &&
+    event.key !== ' ' &&
+    !event.ctrlKey &&
+    !event.metaKey &&
+    !event.altKey
+  )
+}
+
+// When the keyboard focus is on a menu item, funnel printable keystrokes into
+// the search field instead of letting Reka run its item type-ahead.
+function redirectTypingToSearch(event: KeyboardEvent) {
+  if (event.target === searchInput.value || !isPrintableKey(event)) return
+  event.preventDefault()
+  event.stopPropagation()
+  query.value += event.key
+  focusSearch()
+}
+
+// Reka refocuses the first item (scrolling the list to the top) whenever the
+// menu regains focus, which fires as the pointer leaves an item while scrolling.
+function onEntryFocus(event: Event) {
+  event.preventDefault()
+}
+
+function focusFirstItem(target: HTMLElement) {
+  const menu = target.closest<HTMLElement>('[role="menu"]')
+  menu
+    ?.querySelector<HTMLElement>('[role="menuitem"]:not([data-disabled])')
+    ?.focus()
+}
+
+function onRootSearchKeydown(event: KeyboardEvent) {
+  // Let Reka close the menu natively on Escape.
+  if (event.key === 'Escape') return
+  event.stopPropagation()
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    focusFirstItem(event.currentTarget as HTMLElement)
+  } else if (event.key === 'Enter' && trimmedQuery.value) {
+    const first = searchResults.value[0]
+    if (first) selectNode(first.node)
+  }
+}
+
+function show(event: MouseEvent) {
+  actionTaken = false
+  query.value = ''
+  position.value = { x: event.clientX, y: event.clientY }
+  void nextTick(() => {
+    open.value = true
+  })
+}
+
+function hide() {
+  open.value = false
+}
+
+function onOpenChange(value: boolean) {
+  open.value = value
+  if (value) return
+  if (!actionTaken) emit('dismiss')
+  actionTaken = false
+}
+
+defineExpose({ show, hide })
+</script>

src/components/searchbox/LinkReleaseNodeSubmenu.stories.ts

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import {
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRoot,
+  DropdownMenuTrigger
+} from 'reka-ui'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+import LinkReleaseNodeSubmenu from './LinkReleaseNodeSubmenu.vue'
+import type { LinkReleaseNodeCategory } from './linkReleaseMenuModel'
+
+const contentClass =
+  'z-1700 flex max-h-[min(80vh,var(--reka-dropdown-menu-content-available-height))] min-w-[260px] max-w-sm flex-col overflow-hidden rounded-lg border border-interface-menu-stroke bg-interface-menu-surface p-1 shadow-interface'
+const submenuContentClass =
+  'z-1700 flex w-sm max-h-[min(80vh,var(--reka-dropdown-menu-content-available-height))] flex-col overflow-hidden rounded-lg border border-interface-menu-stroke bg-interface-menu-surface p-1 shadow-interface'
+const submenuScrollClass =
+  'overflow-y-auto scrollbar-custom max-h-[min(calc(var(--reka-dropdown-menu-content-available-height)-3.5rem),80vh)]'
+const itemClass =
+  'flex cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-sm text-base-foreground outline-none select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-interface-menu-component-surface-hovered'
+
+function node(name: string, display_name = name): ComfyNodeDefImpl {
+  return { name, display_name } as ComfyNodeDefImpl
+}
+
+const category: LinkReleaseNodeCategory = {
+  key: 'comfy',
+  labelKey: 'contextMenu.Comfy Nodes',
+  icon: 'icon-[lucide--box]',
+  nodes: [
+    node('KSampler'),
+    node('VAEDecode', 'VAE Decode'),
+    node('VAEEncode', 'VAE Encode'),
+    node('CLIPTextEncode', 'CLIP Text Encode'),
+    node('LoadImage', 'Load Image'),
+    node('SaveImage', 'Save Image'),
+    node('EmptyLatentImage', 'Empty Latent Image'),
+    node(
+      'StableCascade_StageB_Conditioning',
+      'StableCascade_StageB_Conditioning'
+    )
+  ]
+}
+
+const meta: Meta<typeof LinkReleaseNodeSubmenu> = {
+  title: 'Components/Searchbox/LinkReleaseNodeSubmenu',
+  component: LinkReleaseNodeSubmenu
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+function renderAnchored(side: 'left' | 'right'): Story['render'] {
+  return () => ({
+    components: {
+      DropdownMenuRoot,
+      DropdownMenuTrigger,
+      DropdownMenuPortal,
+      DropdownMenuContent,
+      DropdownMenuLabel,
+      LinkReleaseNodeSubmenu
+    },
+    setup() {
+      const anchorStyle =
+        side === 'right'
+          ? 'position: fixed; top: 64px; right: 16px;'
+          : 'position: fixed; top: 64px; left: 16px;'
+      return {
+        anchorStyle,
+        contentClass,
+        submenuContentClass,
+        submenuScrollClass,
+        itemClass,
+        category,
+        side
+      }
+    },
+    template: `
+      <div style="height: 480px;">
+        <DropdownMenuRoot default-open>
+          <DropdownMenuTrigger as-child>
+            <button :style="anchorStyle" class="rounded-md border border-interface-menu-stroke bg-interface-menu-surface px-3 py-1.5 text-sm text-base-foreground">
+              Compatible Nodes
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuContent
+              :class="contentClass"
+              :side="side === 'right' ? 'bottom' : 'bottom'"
+              :align="side === 'right' ? 'end' : 'start'"
+              :side-offset="4"
+            >
+              <DropdownMenuLabel class="block truncate px-3 pt-2 pb-1 text-xs font-medium text-muted-foreground uppercase">
+                Compatible Nodes
+              </DropdownMenuLabel>
+              <LinkReleaseNodeSubmenu
+                :category="category"
+                :item-class="itemClass"
+                :content-class="submenuContentClass"
+                :scroll-class="submenuScrollClass"
+              />
+            </DropdownMenuContent>
+          </DropdownMenuPortal>
+        </DropdownMenuRoot>
+      </div>
+    `
+  })
+}
+
+/** Anchored near the LEFT edge: the submenu opens to the RIGHT (normal). */
+export const OpensRight: Story = { render: renderAnchored('left') }
+
+/**
+ * Anchored near the RIGHT edge: with no room on the right, Floating UI flips the
+ * submenu to the LEFT, landing flush against the parent menu's left edge.
+ */
+export const FlipsLeft: Story = { render: renderAnchored('right') }

src/components/searchbox/LinkReleaseNodeSubmenu.test.ts

@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+import LinkReleaseNodeSubmenu from './LinkReleaseNodeSubmenu.vue'
+import type { LinkReleaseNodeCategory } from './linkReleaseMenuModel'
+
+const i18n = createI18n({ legacy: false, locale: 'en', messages: { en: {} } })
+
+const category: LinkReleaseNodeCategory = {
+  key: 'comfy',
+  labelKey: 'Comfy Nodes',
+  icon: 'icon-[lucide--box]',
+  nodes: [{ name: 'KSampler', display_name: 'KSampler' } as ComfyNodeDefImpl]
+}
+
+const stubs = {
+  DropdownMenuSub: { template: '<div><slot /></div>' },
+  DropdownMenuSubTrigger: {
+    template: '<button data-testid="sub-trigger"><slot /></button>'
+  },
+  DropdownMenuPortal: { template: '<div><slot /></div>' },
+  DropdownMenuSubContent: { template: '<div role="menu"><slot /></div>' },
+  DropdownMenuSeparator: { template: '<hr />' },
+  DropdownMenuItem: { template: '<div role="menuitem"><slot /></div>' },
+  MiddleTruncate: { template: '<span>{{ text }}</span>', props: ['text'] }
+}
+
+function renderSubmenu() {
+  return render(LinkReleaseNodeSubmenu, {
+    props: { category, itemClass: '', contentClass: '', scrollClass: '' },
+    global: { plugins: [i18n], stubs }
+  })
+}
+
+describe('LinkReleaseNodeSubmenu keyboard handling', () => {
+  it('steps into the submenu search on ArrowRight', async () => {
+    renderSubmenu()
+    await userEvent.click(screen.getByTestId('sub-trigger'))
+    await userEvent.keyboard('{ArrowRight}')
+    await nextTick()
+
+    expect(screen.getByRole('textbox')).toHaveFocus()
+  })
+
+  it('steps into the submenu search on Enter', async () => {
+    renderSubmenu()
+    await userEvent.click(screen.getByTestId('sub-trigger'))
+    await userEvent.keyboard('{Enter}')
+    await nextTick()
+
+    expect(screen.getByRole('textbox')).toHaveFocus()
+  })
+
+  it('does not move focus to the search on other keys', async () => {
+    renderSubmenu()
+    await userEvent.click(screen.getByTestId('sub-trigger'))
+    await userEvent.keyboard('a')
+    await nextTick()
+
+    expect(screen.getByRole('textbox')).not.toHaveFocus()
+  })
+})

src/components/searchbox/LinkReleaseNodeSubmenu.vue

@@ -0,0 +1,204 @@
+<template>
+  <DropdownMenuSub v-model:open="open">
+    <DropdownMenuSubTrigger
+      :class="triggerClass"
+      @focus="open = true"
+      @keydown="onTriggerKeydown"
+      @blur="onTriggerBlur"
+    >
+      <i :class="cn(category.icon, 'size-4 shrink-0 opacity-80')" />
+      <span class="flex-1 truncate">{{ t(category.labelKey) }}</span>
+      <span
+        class="rounded-full bg-interface-menu-keybind-surface-default px-1.5 text-xs text-muted-foreground"
+      >
+        {{ category.nodes.length }}
+      </span>
+      <i class="icon-[lucide--chevron-right] size-4 shrink-0 opacity-60" />
+    </DropdownMenuSubTrigger>
+    <DropdownMenuPortal>
+      <!--
+        Opens to the right of the trigger; when there's no room, Floating UI
+        flips it to the LEFT. Because submenus default to prioritize-position
+        (offset -> flip -> shift), the flipped panel lands flush against the
+        parent menu's left edge by its OWN width (no PrimeVue-style overlap that
+        shifts by the parent item width). side-offset is negative so it overlaps
+        the parent edge by 2px to bridge the hover gap, and collision-padding
+        keeps an 8px viewport margin so it flips before touching the edge
+        (mirrors DockFilterMenu's SUB_OVERLAP / M).
+      -->
+      <DropdownMenuSubContent
+        :class="contentClass"
+        side="right"
+        align="start"
+        :side-offset="-2"
+        :align-offset="-5"
+        :collision-padding="8"
+        update-position-strategy="optimized"
+        @open-auto-focus.prevent
+        @entry-focus="onEntryFocus"
+        @keydown.capture="redirectTypingToSearch"
+      >
+        <div class="p-.5 shrink-0">
+          <div
+            class="flex h-9 items-center gap-2 rounded-lg bg-secondary-background px-2"
+          >
+            <i
+              class="icon-[lucide--search] size-4 shrink-0 text-muted-foreground"
+            />
+            <input
+              ref="searchInput"
+              v-model="query"
+              type="text"
+              :placeholder="
+                t('g.searchPlaceholder', { subject: t(category.labelKey) })
+              "
+              class="size-full min-w-0 appearance-none border-none bg-transparent text-sm text-base-foreground outline-none placeholder:text-muted-foreground"
+              @keydown="onSearchKeydown"
+            />
+          </div>
+        </div>
+        <DropdownMenuSeparator
+          class="-mx-1 my-1 h-px shrink-0 bg-border-subtle"
+        />
+        <div :class="scrollClass">
+          <DropdownMenuItem
+            v-for="nodeDef in filteredNodes"
+            :key="nodeDef.name"
+            :class="itemClass"
+            @select="emit('select', nodeDef)"
+          >
+            <MiddleTruncate
+              :text="nodeDef.display_name"
+              class="min-w-0 flex-1 self-stretch"
+            />
+          </DropdownMenuItem>
+          <div
+            v-if="filteredNodes.length === 0"
+            class="px-3 py-2 text-sm text-muted-foreground"
+          >
+            {{ t('g.noResults') }}
+          </div>
+        </div>
+      </DropdownMenuSubContent>
+    </DropdownMenuPortal>
+  </DropdownMenuSub>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+import {
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger
+} from 'reka-ui'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+
+import MiddleTruncate from './MiddleTruncate.vue'
+import { filterNodesByName } from './linkReleaseMenuModel'
+import type { LinkReleaseNodeCategory } from './linkReleaseMenuModel'
+
+const { category, itemClass, contentClass, scrollClass } = defineProps<{
+  category: LinkReleaseNodeCategory
+  itemClass: string
+  contentClass: string
+  scrollClass: string
+}>()
+
+const emit = defineEmits<{
+  select: [nodeDef: ComfyNodeDefImpl]
+}>()
+
+const { t } = useI18n()
+
+const open = ref(false)
+const query = ref('')
+const searchInput = ref<HTMLInputElement>()
+
+const triggerClass = computed(() =>
+  cn(itemClass, 'data-[state=open]:bg-interface-menu-component-surface-hovered')
+)
+
+const filteredNodes = computed(() =>
+  filterNodesByName(category.nodes, query.value)
+)
+
+watch(open, (isOpen) => {
+  if (!isOpen) query.value = ''
+})
+
+function focusSearch() {
+  searchInput.value?.focus()
+}
+
+function submenuContent() {
+  return searchInput.value?.closest<HTMLElement>('[role="menu"]') ?? null
+}
+
+// Step into the open submenu, landing on its search field.
+function onTriggerKeydown(event: KeyboardEvent) {
+  if (event.key !== 'ArrowRight' && event.key !== 'Enter') return
+  event.preventDefault()
+  open.value = true
+  void nextTick(focusSearch)
+}
+
+// Close the preview when focus leaves the trigger to a sibling item rather
+// than into the submenu content.
+function onTriggerBlur(event: FocusEvent) {
+  const next = event.relatedTarget
+  if (next instanceof Node && submenuContent()?.contains(next)) return
+  open.value = false
+}
+
+function isPrintableKey(event: KeyboardEvent) {
+  return (
+    event.key.length === 1 &&
+    event.key !== ' ' &&
+    !event.ctrlKey &&
+    !event.metaKey &&
+    !event.altKey
+  )
+}
+
+// When the keyboard focus is on a submenu item, funnel printable keystrokes
+// into this submenu's search field instead of Reka's item type-ahead.
+function redirectTypingToSearch(event: KeyboardEvent) {
+  if (event.target === searchInput.value || !isPrintableKey(event)) return
+  event.preventDefault()
+  event.stopPropagation()
+  query.value += event.key
+  focusSearch()
+}
+
+// Reka refocuses the first item (scrolling the list to the top) whenever the
+// menu regains focus, which fires as the pointer leaves an item while scrolling.
+function onEntryFocus(event: Event) {
+  event.preventDefault()
+}
+
+function focusFirstNode(target: HTMLElement) {
+  const panel = target.closest<HTMLElement>('[role="menu"]')
+  panel
+    ?.querySelector<HTMLElement>('[role="menuitem"]:not([data-disabled])')
+    ?.focus()
+}
+
+function onSearchKeydown(event: KeyboardEvent) {
+  // Let Reka handle submenu/menu navigation keys natively.
+  if (event.key === 'Escape' || event.key === 'ArrowLeft') return
+  event.stopPropagation()
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    focusFirstNode(event.currentTarget as HTMLElement)
+  } else if (event.key === 'Enter') {
+    const first = filteredNodes.value[0]
+    if (first) emit('select', first)
+  }
+}
+</script>

src/components/searchbox/MiddleTruncate.test.ts

@@ -0,0 +1,150 @@
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import MiddleTruncate from './MiddleTruncate.vue'
+import * as overflow from './isTextOverflowing'
+
+function stubRect(el: HTMLElement, rect: Partial<DOMRect>) {
+  el.getBoundingClientRect = () =>
+    ({
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      width: 0,
+      height: 0,
+      x: 0,
+      y: 0,
+      toJSON: () => ({}),
+      ...rect
+    }) as DOMRect
+}
+
+describe('MiddleTruncate', () => {
+  beforeEach(() => {
+    Object.defineProperty(document.documentElement, 'clientWidth', {
+      configurable: true,
+      value: 1024
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    Reflect.deleteProperty(document.documentElement, 'clientWidth')
+  })
+
+  it('renders the full text inline', () => {
+    render(MiddleTruncate, { props: { text: 'KSampler' } })
+    expect(screen.getByText('KSampler')).toBeInTheDocument()
+  })
+
+  it('does not reveal a tooltip when the text fits', async () => {
+    vi.spyOn(overflow, 'measureTextWidth').mockReturnValue(0)
+    render(MiddleTruncate, { props: { text: 'KSampler' } })
+    await userEvent.hover(screen.getByText('KSampler'))
+    expect(screen.queryByRole('tooltip')).toBeNull()
+  })
+
+  it('reveals the full text on hover when truncated', async () => {
+    vi.spyOn(overflow, 'measureTextWidth').mockReturnValue(500)
+    const longName = 'ONNX Detector (SEGS/legacy) - use BBOXDetector'
+    render(MiddleTruncate, { props: { text: longName } })
+    const el = screen.getByText(longName)
+    stubRect(el, { left: 10, top: 20, width: 100, height: 20 })
+    await userEvent.hover(el)
+    expect(screen.getByRole('tooltip')).toHaveTextContent(longName)
+  })
+
+  it('reveals when hovering anywhere on the parent menu item', async () => {
+    vi.spyOn(overflow, 'measureTextWidth').mockReturnValue(500)
+    const longName = 'ONNX Detector (SEGS/legacy) - use BBOXDetector'
+    render({
+      components: { MiddleTruncate },
+      template: `<div role="menuitem"><MiddleTruncate text="${longName}" /></div>`
+    })
+    stubRect(screen.getByText(longName), {
+      left: 10,
+      top: 20,
+      width: 120,
+      height: 20
+    })
+    await userEvent.hover(screen.getByRole('menuitem'))
+    expect(screen.getByRole('tooltip')).toHaveTextContent(longName)
+  })
+
+  it('sizes the reveal to the parent menu item height', async () => {
+    vi.spyOn(overflow, 'measureTextWidth').mockReturnValue(500)
+    const nodeName = 'A long truncated node name'
+    render({
+      components: { MiddleTruncate },
+      template: `<div role="menuitem"><MiddleTruncate text="${nodeName}" /></div>`
+    })
+    stubRect(screen.getByText(nodeName), {
+      left: 10,
+      top: 20,
+      width: 100,
+      height: 20
+    })
+    stubRect(screen.getByRole('menuitem'), {
+      left: 0,
+      top: 10,
+      right: 200,
+      width: 200,
+      height: 36
+    })
+    await userEvent.hover(screen.getByText(nodeName))
+    expect(screen.getByRole('tooltip')).toHaveStyle({ height: '36px' })
+  })
+
+  it('anchors the reveal to the left when it fits to the right', async () => {
+    vi.spyOn(overflow, 'measureTextWidth').mockReturnValue(50)
+    const nodeName = 'Fits To The Right'
+    render({
+      components: { MiddleTruncate },
+      template: `<div role="menuitem"><MiddleTruncate text="${nodeName}" /></div>`
+    })
+    stubRect(screen.getByText(nodeName), {
+      left: 10,
+      top: 20,
+      width: 100,
+      height: 20
+    })
+    stubRect(screen.getByRole('menuitem'), {
+      left: 0,
+      top: 10,
+      right: 200,
+      width: 200,
+      height: 36
+    })
+    await userEvent.hover(screen.getByText(nodeName))
+    expect(screen.getByRole('tooltip')).toHaveStyle({ left: '10px' })
+  })
+
+  it('flips to a right anchor when revealing rightward would overflow', async () => {
+    vi.spyOn(overflow, 'measureTextWidth').mockReturnValue(600)
+    const nodeName = 'A very long node name near the right edge'
+    render({
+      components: { MiddleTruncate },
+      template: `<div role="menuitem" style="padding-right: 16px"><MiddleTruncate text="${nodeName}" /></div>`
+    })
+    stubRect(screen.getByText(nodeName), {
+      left: 850,
+      top: 20,
+      width: 150,
+      height: 20
+    })
+    stubRect(screen.getByRole('menuitem'), {
+      left: 840,
+      top: 10,
+      right: 1000,
+      width: 160,
+      height: 36
+    })
+    await userEvent.hover(screen.getByText(nodeName))
+    const tooltip = screen.getByRole('tooltip')
+    // Anchored to the item's right edge (1024 - 1000), independent of its padding.
+    expect(tooltip).toHaveStyle({ right: '24px' })
+    expect(tooltip).not.toHaveStyle({ left: '850px' })
+  })
+})

src/components/searchbox/MiddleTruncate.vue

@@ -0,0 +1,156 @@
+<template>
+  <span
+    ref="elRef"
+    v-bind="$attrs"
+    :class="cn('block min-w-0 truncate', revealed && 'text-transparent')"
+    @pointerenter="reveal"
+    @pointermove="reveal"
+    @pointerleave="onPointerLeave"
+    @focusin="reveal"
+    @focusout="hide"
+  >
+    {{ text }}
+  </span>
+  <Teleport to="body">
+    <span
+      v-if="revealed && revealStyle"
+      role="tooltip"
+      :class="
+        cn(
+          'pointer-events-none fixed z-99999 inline-flex items-center rounded-lg bg-interface-menu-component-surface-hovered pr-3 text-sm whitespace-nowrap text-base-foreground shadow-interface',
+          revealRect?.anchor === 'right' && 'pl-3'
+        )
+      "
+      :style="revealStyle"
+    >
+      {{ text }}
+    </span>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { useEventListener } from '@vueuse/core'
+import { cn } from '@comfyorg/tailwind-utils'
+import { computed, ref } from 'vue'
+
+import { measureTextWidth } from './isTextOverflowing'
+
+defineOptions({ inheritAttrs: false })
+
+const { text } = defineProps<{ text: string }>()
+
+// Gap kept between the reveal and the viewport edge (mirrors the menu's
+// collision-padding) and the reveal's own far-side padding (`pl-3`/`pr-3`).
+const VIEWPORT_MARGIN = 8
+const REVEAL_PADDING = 12
+
+type RevealRect = {
+  top: number
+  height: number
+  minWidth: number
+  maxWidth: number
+  anchor: 'left' | 'right'
+  offset: number
+}
+
+const elRef = ref<HTMLElement>()
+const revealed = ref(false)
+const revealRect = ref<RevealRect>()
+
+const revealStyle = computed(() => {
+  const rect = revealRect.value
+  if (!rect) return undefined
+  return {
+    top: `${rect.top}px`,
+    height: `${rect.height}px`,
+    minWidth: `${rect.minWidth}px`,
+    maxWidth: `${rect.maxWidth}px`,
+    width: 'max-content',
+    [rect.anchor]: `${rect.offset}px`
+  }
+})
+
+const menuItem = computed(
+  () =>
+    elRef.value?.closest<HTMLElement>('[role="menuitem"]') ??
+    elRef.value?.parentElement ??
+    null
+)
+
+function getRevealRect(el: HTMLElement, textWidth: number): RevealRect {
+  const textRect = el.getBoundingClientRect()
+  const item = menuItem.value
+  const itemRect = item?.getBoundingClientRect()
+  const paddingRight = item
+    ? Number.parseFloat(getComputedStyle(item).paddingRight) || 0
+    : 0
+  const rightInset = itemRect ? itemRect.right - paddingRight : textRect.right
+  const itemRight = itemRect ? itemRect.right : textRect.right
+  const viewportWidth = document.documentElement.clientWidth
+  const top = itemRect?.top ?? textRect.top
+  const height = itemRect?.height ?? textRect.height
+  const minWidth = Math.max(textRect.width, rightInset - textRect.left)
+  const neededWidth = Math.max(minWidth, textWidth + REVEAL_PADDING)
+  const fitsRight =
+    textRect.left + neededWidth <= viewportWidth - VIEWPORT_MARGIN
+
+  if (fitsRight) {
+    return {
+      top,
+      height,
+      minWidth,
+      maxWidth: viewportWidth - VIEWPORT_MARGIN - textRect.left,
+      anchor: 'left',
+      offset: textRect.left
+    }
+  }
+  return {
+    top,
+    height,
+    minWidth,
+    maxWidth: itemRight - VIEWPORT_MARGIN,
+    anchor: 'right',
+    offset: Math.max(VIEWPORT_MARGIN, viewportWidth - itemRight)
+  }
+}
+
+function reveal() {
+  const el = elRef.value
+  if (!el) {
+    revealed.value = false
+    return
+  }
+  const textWidth = measureTextWidth(el)
+  if (textWidth <= el.clientWidth + 0.5) {
+    revealed.value = false
+    return
+  }
+  revealRect.value = getRevealRect(el, textWidth)
+  revealed.value = true
+}
+
+function hide() {
+  revealed.value = false
+}
+
+function isStillOverMenuItem(related: EventTarget | null) {
+  const item = menuItem.value
+  return (
+    related instanceof Node &&
+    item != null &&
+    (item === related || item.contains(related))
+  )
+}
+
+function onPointerLeave(event: PointerEvent) {
+  if (isStillOverMenuItem(event.relatedTarget)) return
+  hide()
+}
+
+useEventListener(menuItem, 'pointerenter', reveal)
+useEventListener(menuItem, 'pointermove', reveal)
+useEventListener(menuItem, 'pointerleave', (event: PointerEvent) => {
+  if (isStillOverMenuItem(event.relatedTarget)) return
+  hide()
+})
+</script>

src/components/searchbox/NodeSearchBoxPopover.test.ts

@@ -54,6 +54,7 @@ describe('NodeSearchBoxPopover', () => {
     let emitAddFilter: EmitAddFilter | null = null
     let emitAddNodeV1: EmitAddNode | null = null
     let emitAddNodeV2: EmitAddNode | null = null
+    let emitSelectNode: ((nodeDef: ComfyNodeDefImpl) => void) | null = null
 
     const NodeSearchBoxStub = defineComponent({
       name: 'NodeSearchBox',
@@ -87,6 +88,17 @@ describe('NodeSearchBoxPopover', () => {
         '<div data-testid="search-content-v2" :data-default-root-filter="defaultRootFilter"></div>'
     })
 
+    const LinkReleaseContextMenuStub = defineComponent({
+      name: 'LinkReleaseContextMenu',
+      props: { context: { type: Object, default: null } },
+      emits: ['selectNode', 'addReroute', 'dismiss'],
+      setup(_, { emit }) {
+        emitSelectNode = (nodeDef) => emit('selectNode', nodeDef)
+        return {}
+      },
+      template: '<div data-testid="link-release-menu" />'
+    })
+
     const pinia = createTestingPinia({
       stubActions: false,
       initialState: {
@@ -104,6 +116,7 @@ describe('NodeSearchBoxPopover', () => {
         stubs: {
           NodeSearchBox: NodeSearchBoxStub,
           NodeSearchContent: NodeSearchContentStub,
+          LinkReleaseContextMenu: LinkReleaseContextMenuStub,
           NodePreviewCard: true,
           Dialog: {
             template: '<div><slot name="container" /></div>',
@@ -127,6 +140,11 @@ describe('NodeSearchBoxPopover', () => {
         if (!emitAddNodeV2)
           throw new Error('NodeSearchContent stub did not mount')
         return emitAddNodeV2
+      },
+      get emitSelectNode() {
+        if (!emitSelectNode)
+          throw new Error('LinkReleaseContextMenu stub did not mount')
+        return emitSelectNode
       }
     }
   }
@@ -282,6 +300,53 @@ describe('NodeSearchBoxPopover', () => {
     })
   })
 
+  describe('selecting a node from the link-release menu', () => {
+    function setupCanvas() {
+      const selectNode = vi.fn()
+      const canvasStore = useCanvasStore()
+      canvasStore.canvas = {
+        graph: { nodes: [] },
+        allow_searchbox: false,
+        setDirty: vi.fn(),
+        selectNode,
+        linkConnector: {
+          events: new EventTarget(),
+          reset: vi.fn(),
+          disconnectLinks: vi.fn(),
+          connectToNode: vi.fn()
+        }
+      } as unknown as ReturnType<typeof useCanvasStore>['canvas']
+      return { selectNode }
+    }
+
+    it('auto-selects the placed node on the canvas', async () => {
+      const node = { id: 7 }
+      const { emitSelectNode } = renderComponent({
+        'Comfy.NodeSearchBoxImpl': 'default'
+      })
+      const { selectNode } = setupCanvas()
+      addNodeOnGraph.mockReturnValue(node)
+
+      emitSelectNode({ name: 'KSampler' } as ComfyNodeDefImpl)
+      await nextTick()
+
+      expect(selectNode).toHaveBeenCalledWith(node)
+    })
+
+    it('does not select when the node could not be created', async () => {
+      const { emitSelectNode } = renderComponent({
+        'Comfy.NodeSearchBoxImpl': 'default'
+      })
+      const { selectNode } = setupCanvas()
+      addNodeOnGraph.mockReturnValue(null)
+
+      emitSelectNode({ name: 'KSampler' } as ComfyNodeDefImpl)
+      await nextTick()
+
+      expect(selectNode).not.toHaveBeenCalled()
+    })
+  })
+
   describe('defaultRootFilter on dialog open', () => {
     function setGraphNodes(nodes: unknown[]) {
       const canvasStore = useCanvasStore()

src/components/searchbox/NodeSearchBoxPopover.vue

@@ -52,6 +52,13 @@
         />
       </template>
     </Dialog>
+    <LinkReleaseContextMenu
+      ref="linkReleaseMenu"
+      :context="linkReleaseContext"
+      @select-node="connectNodeFromMenu"
+      @add-reroute="addRerouteFromMenu"
+      @dismiss="reset"
+    />
   </div>
 </template>
 
@@ -63,7 +70,11 @@ import { computed, ref, toRaw, watch, watchEffect } from 'vue'
 
 import type { Point } from '@/lib/litegraph/src/interfaces'
 import type { LiteGraphCanvasEvent } from '@/lib/litegraph/src/litegraph'
-import { LGraphNode, LiteGraph } from '@/lib/litegraph/src/litegraph'
+import {
+  LGraphNode,
+  LiteGraph,
+  isNodeSlot
+} from '@/lib/litegraph/src/litegraph'
 import type { CanvasPointerEvent } from '@/lib/litegraph/src/types/events'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useSurveyFeatureTracking } from '@/platform/surveys/useSurveyFeatureTracking'
@@ -81,11 +92,12 @@ import NodePreviewCard from '@/components/node/NodePreviewCard.vue'
 import { RootCategory } from '@/components/searchbox/v2/rootCategories'
 import type { RootCategoryId } from '@/components/searchbox/v2/rootCategories'
 
+import LinkReleaseContextMenu from './LinkReleaseContextMenu.vue'
+import type { LinkReleaseContext } from './linkReleaseMenuModel'
 import NodeSearchContent from './v2/NodeSearchContent.vue'
 import NodeSearchBox from './NodeSearchBox.vue'
 
 let triggerEvent: CanvasPointerEvent | null = null
-let listenerController: AbortController | null = null
 let disconnectOnReset = false
 
 const settingStore = useSettingStore()
@@ -108,6 +120,8 @@ const enableNodePreview = computed(
     windowWidth.value >= MIN_WIDTH_FOR_PREVIEW
 )
 const defaultRootFilter = ref<RootCategoryId | null>(null)
+const linkReleaseMenu = ref<InstanceType<typeof LinkReleaseContextMenu>>()
+const linkReleaseContext = ref<LinkReleaseContext | null>(null)
 watch(visible, (isVisible) => {
   if (!isVisible) return
   defaultRootFilter.value = !canvasStore.canvas?.graph?.nodes?.length
@@ -139,16 +153,19 @@ function closeDialog() {
   visible.value = false
 }
 
-function addNode(nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent) {
-  const followCursor = settingStore.get('Comfy.NodeSearchBoxImpl.FollowCursor')
+function connectNewNode(
+  nodeDef: ComfyNodeDefImpl,
+  options: { ghost?: boolean; dragEvent?: MouseEvent } = {}
+): LGraphNode | null {
+  const { ghost = false, dragEvent } = options
   const node = withNodeAddSource('search_modal', () =>
     litegraphService.addNodeOnGraph(
       nodeDef,
       { pos: getNewNodeLocation() },
-      { ghost: useSearchBoxV2.value && followCursor, dragEvent }
+      { ghost, dragEvent }
     )
   )
-  if (!node) return
+  if (!node) return null
 
   if (disconnectOnReset && triggerEvent) {
     canvasStore.getCanvas().linkConnector.connectToNode(node, triggerEvent)
@@ -160,6 +177,16 @@ function addNode(nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent) {
 
   // Notify changeTracker - new step should be added
   useWorkflowStore().activeWorkflow?.changeTracker?.captureCanvasState()
+
+  return node
+}
+
+function addNode(nodeDef: ComfyNodeDefImpl, dragEvent?: MouseEvent) {
+  const followCursor = settingStore.get('Comfy.NodeSearchBoxImpl.FollowCursor')
+  connectNewNode(nodeDef, {
+    ghost: useSearchBoxV2.value && followCursor,
+    dragEvent
+  })
   window.requestAnimationFrame(closeDialog)
 }
 
@@ -212,62 +239,39 @@ function showContextMenu(e: CanvasPointerEvent) {
   const firstLink = getFirstLink()
   if (!firstLink) return
 
-  const { node, fromSlot, toType } = firstLink
-  const commonOptions = {
-    e,
-    allow_searchbox: true,
-    showSearchBox: () => {
-      cancelResetOnContextClose()
-      showSearchBox(e)
-    }
+  const { fromSlot, toType } = firstLink
+  linkReleaseContext.value = {
+    dataType: fromSlot.type?.toString() ?? '',
+    slotName: fromSlot.name ?? '',
+    isFromOutput: toType === 'input'
   }
-  const afterRerouteId = firstLink.fromReroute?.id
-  const connectionOptions =
-    toType === 'input'
-      ? { nodeFrom: node, slotFrom: fromSlot, afterRerouteId }
-      : { nodeTo: node, slotTo: fromSlot, afterRerouteId }
-
-  const canvas = canvasStore.getCanvas()
-  const menu = canvas.showConnectionMenu({
-    ...connectionOptions,
-    ...commonOptions
-  })
-
-  if (!menu) {
-    console.warn('No menu was returned from showConnectionMenu')
-    return
-  }
-
   triggerEvent = e
-  listenerController = new AbortController()
-  const { signal } = listenerController
-  const options = { once: true, signal }
+  linkReleaseMenu.value?.show(e)
+}
 
-  // Connect the node after it is created via context menu
-  useEventListener(
-    canvas.canvas,
-    'connect-new-default-node',
-    (createEvent) => {
-      if (!(createEvent instanceof CustomEvent))
-        throw new Error('Invalid event')
+function connectNodeFromMenu(nodeDef: ComfyNodeDefImpl) {
+  const node = connectNewNode(nodeDef)
+  if (node) canvasStore.getCanvas().selectNode(node)
+  reset()
+}
 
-      const node: unknown = createEvent.detail?.node
-      if (!(node instanceof LGraphNode)) throw new Error('Invalid node')
-
-      disconnectOnReset = false
-      createEvent.preventDefault()
-      canvas.linkConnector.connectToNode(node, e)
-    },
-    options
-  )
-
-  // Reset when the context menu is closed
-  const cancelResetOnContextClose = useEventListener(
-    menu.controller.signal,
-    'abort',
-    reset,
-    options
-  )
+function addRerouteFromMenu() {
+  const firstLink = getFirstLink()
+  const node = firstLink?.node
+  if (
+    firstLink &&
+    triggerEvent &&
+    node instanceof LGraphNode &&
+    isNodeSlot(firstLink.fromSlot)
+  ) {
+    node.connectFloatingReroute(
+      [triggerEvent.canvasX, triggerEvent.canvasY],
+      firstLink.fromSlot,
+      firstLink.fromReroute?.id
+    )
+    useWorkflowStore().activeWorkflow?.changeTracker?.captureCanvasState()
+  }
+  reset()
 }
 
 // Disable litegraph's default behavior of release link and search box.
@@ -343,8 +347,6 @@ function handleDroppedOnCanvas(e: CustomEvent<CanvasPointerEvent>) {
 
 // Resets litegraph state
 function reset() {
-  listenerController?.abort()
-  listenerController = null
   triggerEvent = null
 
   const canvas = canvasStore.getCanvas()

src/components/searchbox/isTextOverflowing.test.ts

@@ -0,0 +1,45 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { isTextOverflowing } from './isTextOverflowing'
+
+const CHAR_WIDTH = 10
+
+function setup(text: string, contentWidth: number) {
+  const el = document.createElement('span')
+  el.textContent = text
+  Object.defineProperty(el, 'clientWidth', {
+    configurable: true,
+    value: contentWidth
+  })
+  vi.spyOn(window, 'getComputedStyle').mockReturnValue(
+    {} as CSSStyleDeclaration
+  )
+  vi.spyOn(
+    HTMLSpanElement.prototype,
+    'getBoundingClientRect'
+  ).mockImplementation(function (this: HTMLSpanElement) {
+    return { width: (this.textContent?.length ?? 0) * CHAR_WIDTH } as DOMRect
+  })
+  return el
+}
+
+describe('isTextOverflowing', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('returns false when the text fits the content width', () => {
+    const el = setup('KSampler', 200)
+    expect(isTextOverflowing(el)).toBe(false)
+  })
+
+  it('returns true when the full text is wider than the content width', () => {
+    const el = setup('ONNX Detector (SEGS/legacy) - use BBOXDetector', 120)
+    expect(isTextOverflowing(el)).toBe(true)
+  })
+
+  it('returns false for a zero-width element', () => {
+    const el = setup('anything', 0)
+    expect(isTextOverflowing(el)).toBe(false)
+  })
+})

src/components/searchbox/isTextOverflowing.ts

@@ -0,0 +1,46 @@
+const FONT_PROPS = [
+  'fontStyle',
+  'fontVariant',
+  'fontWeight',
+  'fontStretch',
+  'fontSize',
+  'fontFamily',
+  'letterSpacing',
+  'textTransform',
+  'wordSpacing'
+] as const
+
+/**
+ * Measures the full, unclipped width of an element's text by rendering it in a
+ * hidden clone that copies the element's font metrics. `scrollWidth` is
+ * unreliable for `text-overflow: ellipsis` in Chrome (it often reports equal to
+ * `clientWidth`), so the clone is the source of truth.
+ */
+export function measureTextWidth(el: HTMLElement): number {
+  const style = getComputedStyle(el)
+  const clone = document.createElement('span')
+  clone.textContent = el.textContent ?? ''
+  clone.style.position = 'fixed'
+  clone.style.top = '-9999px'
+  clone.style.left = '-9999px'
+  clone.style.visibility = 'hidden'
+  clone.style.whiteSpace = 'nowrap'
+  for (const prop of FONT_PROPS) clone.style[prop] = style[prop]
+
+  document.body.appendChild(clone)
+  const textWidth = clone.getBoundingClientRect().width
+  clone.remove()
+
+  return textWidth
+}
+
+/**
+ * Detects whether a single-line, ellipsis-truncated element is actually
+ * clipping its text by comparing its full text width against the available
+ * content width.
+ */
+export function isTextOverflowing(el: HTMLElement): boolean {
+  const contentWidth = el.clientWidth
+  if (contentWidth <= 0) return false
+  return measureTextWidth(el) > contentWidth + 0.5
+}

src/components/searchbox/linkReleaseMenuModel.test.ts

@@ -0,0 +1,188 @@
+import { describe, expect, it } from 'vitest'
+
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { NodeSourceType } from '@/types/nodeSource'
+
+import {
+  buildLinkReleaseNodeCategories,
+  filterNodesByName,
+  getLinkReleaseHeaderLabel,
+  getLinkReleaseSuggestions,
+  searchLinkReleaseNodes
+} from './linkReleaseMenuModel'
+import type { LinkReleaseContext } from './linkReleaseMenuModel'
+
+function coreNode(name: string, display_name = name): ComfyNodeDefImpl {
+  return {
+    name,
+    display_name,
+    nodeSource: { type: NodeSourceType.Core },
+    api_node: false
+  } as ComfyNodeDefImpl
+}
+
+function customNode(name: string, display_name = name): ComfyNodeDefImpl {
+  return {
+    name,
+    display_name,
+    nodeSource: { type: NodeSourceType.CustomNodes },
+    api_node: false
+  } as ComfyNodeDefImpl
+}
+
+function partnerNode(name: string, display_name = name): ComfyNodeDefImpl {
+  return {
+    name,
+    display_name,
+    nodeSource: { type: NodeSourceType.Core },
+    api_node: true
+  } as ComfyNodeDefImpl
+}
+
+const ksampler = coreNode('KSampler')
+const vaeDecode = coreNode('VAEDecode', 'VAE Decode')
+const rerouteNode = coreNode('Reroute')
+
+function createContext(
+  overrides: Partial<LinkReleaseContext> = {}
+): LinkReleaseContext {
+  return {
+    dataType: 'MODEL',
+    slotName: 'model',
+    isFromOutput: true,
+    ...overrides
+  }
+}
+
+describe('getLinkReleaseHeaderLabel', () => {
+  it('combines slot name and data type', () => {
+    const label = getLinkReleaseHeaderLabel(
+      createContext({ slotName: 'model', dataType: 'MODEL' })
+    )
+    expect(label).toBe('model | MODEL')
+  })
+
+  it('falls back to whichever value is present', () => {
+    const onlyType = getLinkReleaseHeaderLabel(
+      createContext({ slotName: '', dataType: 'IMAGE' })
+    )
+    const onlyName = getLinkReleaseHeaderLabel(
+      createContext({ slotName: 'clip', dataType: '' })
+    )
+    expect(onlyType).toBe('IMAGE')
+    expect(onlyName).toBe('clip')
+  })
+})
+
+describe('getLinkReleaseSuggestions', () => {
+  it('excludes the Reroute node', () => {
+    const suggestions = getLinkReleaseSuggestions([rerouteNode, vaeDecode])
+    expect(suggestions.map((n) => n.name)).toEqual(['VAEDecode'])
+  })
+
+  it('preserves the incoming order of remaining nodes', () => {
+    const suggestions = getLinkReleaseSuggestions([vaeDecode, ksampler])
+    expect(suggestions.map((n) => n.name)).toEqual(['VAEDecode', 'KSampler'])
+  })
+})
+
+describe('buildLinkReleaseNodeCategories', () => {
+  it('groups nodes by source into comfy, extensions and partner buckets', () => {
+    const ext = customNode('ExtNode', 'Ext Node')
+    const partner = partnerNode('PartnerNode', 'Partner Node')
+
+    const categories = buildLinkReleaseNodeCategories([ksampler, ext, partner])
+    const byKey = Object.fromEntries(categories.map((c) => [c.key, c]))
+
+    expect(byKey.comfy.nodes.map((n) => n.name)).toContain('KSampler')
+    expect(byKey.extensions.nodes.map((n) => n.name)).toContain('ExtNode')
+    expect(byKey.partner.nodes.map((n) => n.name)).toContain('PartnerNode')
+  })
+
+  it('omits empty buckets', () => {
+    const categories = buildLinkReleaseNodeCategories([ksampler])
+    expect(categories.map((c) => c.key)).toEqual(['comfy'])
+  })
+
+  it('orders buckets comfy, extensions, partner', () => {
+    const categories = buildLinkReleaseNodeCategories([
+      partnerNode('P'),
+      customNode('E'),
+      coreNode('C')
+    ])
+    expect(categories.map((c) => c.key)).toEqual([
+      'comfy',
+      'extensions',
+      'partner'
+    ])
+  })
+
+  it('sorts nodes alphabetically by display name within a bucket', () => {
+    const categories = buildLinkReleaseNodeCategories([
+      coreNode('B'),
+      coreNode('A')
+    ])
+    expect(categories[0].nodes.map((n) => n.display_name)).toEqual(['A', 'B'])
+  })
+
+  it('classifies api-category nodes as partner', () => {
+    const apiNode = {
+      name: 'ApiThing',
+      display_name: 'Api Thing',
+      nodeSource: { type: NodeSourceType.Core },
+      api_node: false,
+      category: 'api node/openai'
+    } as ComfyNodeDefImpl
+
+    const categories = buildLinkReleaseNodeCategories([apiNode])
+    expect(categories.map((c) => c.key)).toEqual(['partner'])
+  })
+})
+
+describe('filterNodesByName', () => {
+  it('returns all nodes when query is blank', () => {
+    expect(filterNodesByName([ksampler, vaeDecode], '  ')).toHaveLength(2)
+  })
+
+  it('matches display name case-insensitively', () => {
+    const result = filterNodesByName([ksampler, vaeDecode], 'vae')
+    expect(result.map((n) => n.name)).toEqual(['VAEDecode'])
+  })
+})
+
+describe('searchLinkReleaseNodes', () => {
+  const categories = buildLinkReleaseNodeCategories([
+    coreNode('LoadImage', 'Load Image'),
+    customNode('ImageBlend', 'Image Blend'),
+    partnerNode('ImageGen', 'Image Gen'),
+    coreNode('KSampler')
+  ])
+
+  it('returns no matches for a blank query', () => {
+    expect(searchLinkReleaseNodes(categories, '   ')).toEqual([])
+  })
+
+  it('flattens matching nodes across categories, tagged with their category', () => {
+    const matches = searchLinkReleaseNodes(categories, 'image')
+    expect(matches.map((m) => m.node.name)).toEqual([
+      'LoadImage',
+      'ImageBlend',
+      'ImageGen'
+    ])
+    expect(matches.map((m) => m.category.key)).toEqual([
+      'comfy',
+      'extensions',
+      'partner'
+    ])
+  })
+
+  it('matches display name case-insensitively', () => {
+    const matches = searchLinkReleaseNodes(categories, 'ksampler')
+    expect(matches.map((m) => m.node.name)).toEqual(['KSampler'])
+    expect(matches[0].category.key).toBe('comfy')
+  })
+
+  it('returns an empty list when nothing matches', () => {
+    expect(searchLinkReleaseNodes(categories, 'zzz')).toEqual([])
+  })
+})

src/components/searchbox/linkReleaseMenuModel.ts

@@ -0,0 +1,141 @@
+import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
+import { NodeSourceType } from '@/types/nodeSource'
+
+export interface LinkReleaseContext {
+  /** The data type of the slot the link was dragged from (e.g. "MODEL"). */
+  dataType: string
+  /** The name of the slot the link was dragged from (e.g. "model"). */
+  slotName: string
+  /**
+   * Whether the released link originates from an output slot, meaning the new
+   * node will be connected to via one of its inputs.
+   */
+  isFromOutput: boolean
+}
+
+type LinkReleaseCategoryKey = 'comfy' | 'extensions' | 'partner'
+
+export interface LinkReleaseNodeCategory {
+  key: LinkReleaseCategoryKey
+  /** i18n key for the group heading. */
+  labelKey: string
+  /** Iconify class shown beside the group label. */
+  icon: string
+  /** Nodes in the group, sorted alphabetically by display name. */
+  nodes: ComfyNodeDefImpl[]
+}
+
+const CATEGORY_META: Record<
+  LinkReleaseCategoryKey,
+  { labelKey: string; icon: string }
+> = {
+  comfy: { labelKey: 'contextMenu.Comfy Nodes', icon: 'icon-[lucide--box]' },
+  extensions: {
+    labelKey: 'contextMenu.Extensions',
+    icon: 'icon-[lucide--puzzle]'
+  },
+  partner: {
+    labelKey: 'contextMenu.Partner Nodes',
+    icon: 'icon-[lucide--handshake]'
+  }
+}
+
+const CATEGORY_ORDER: LinkReleaseCategoryKey[] = [
+  'comfy',
+  'extensions',
+  'partner'
+]
+
+export function getLinkReleaseHeaderLabel(context: LinkReleaseContext): string {
+  const { slotName, dataType } = context
+  if (slotName && dataType) return `${slotName} | ${dataType}`
+  return slotName || dataType
+}
+
+function classifyNode(node: ComfyNodeDefImpl): LinkReleaseCategoryKey {
+  if (node.api_node || node.category?.startsWith('api node')) return 'partner'
+  if (
+    node.nodeSource.type === NodeSourceType.Core ||
+    node.nodeSource.type === NodeSourceType.Essentials
+  ) {
+    return 'comfy'
+  }
+  return 'extensions'
+}
+
+function byDisplayName(a: ComfyNodeDefImpl, b: ComfyNodeDefImpl): number {
+  return a.display_name.localeCompare(b.display_name)
+}
+
+/**
+ * Group slot-compatible nodes into source buckets for the cascading menu.
+ * Empty buckets are omitted and each bucket's nodes are sorted by display name.
+ */
+export function buildLinkReleaseNodeCategories(
+  compatibleNodes: ComfyNodeDefImpl[]
+): LinkReleaseNodeCategory[] {
+  const buckets: Record<LinkReleaseCategoryKey, ComfyNodeDefImpl[]> = {
+    comfy: [],
+    extensions: [],
+    partner: []
+  }
+
+  for (const node of compatibleNodes) {
+    buckets[classifyNode(node)].push(node)
+  }
+
+  return CATEGORY_ORDER.filter((key) => buckets[key].length > 0).map((key) => ({
+    key,
+    labelKey: CATEGORY_META[key].labelKey,
+    icon: CATEGORY_META[key].icon,
+    nodes: [...buckets[key]].sort(byDisplayName)
+  }))
+}
+
+/** Quick-add suggestions for the released slot, excluding the Reroute node. */
+export function getLinkReleaseSuggestions(
+  defaultNodeDefs: ComfyNodeDefImpl[]
+): ComfyNodeDefImpl[] {
+  return defaultNodeDefs.filter((nodeDef) => nodeDef.name !== 'Reroute')
+}
+
+/** Case-insensitive filter of a node list by display name. */
+export function filterNodesByName(
+  nodes: ComfyNodeDefImpl[],
+  query: string
+): ComfyNodeDefImpl[] {
+  const trimmed = query.trim().toLowerCase()
+  if (!trimmed) return nodes
+  return nodes.filter((nodeDef) =>
+    nodeDef.display_name.toLowerCase().includes(trimmed)
+  )
+}
+
+/** A node surfaced by the root flat-value search, tagged with its category. */
+export interface LinkReleaseNodeMatch {
+  category: LinkReleaseNodeCategory
+  node: ComfyNodeDefImpl
+}
+
+/**
+ * Flat-value search across every category submenu: when the root search has
+ * text we surface matching nodes inline (tagged with their category) so a node
+ * can be picked straight from the root without first drilling into a submenu.
+ * Results preserve category order, then per-category display-name order.
+ */
+export function searchLinkReleaseNodes(
+  categories: LinkReleaseNodeCategory[],
+  query: string
+): LinkReleaseNodeMatch[] {
+  const trimmed = query.trim().toLowerCase()
+  if (!trimmed) return []
+  const matches: LinkReleaseNodeMatch[] = []
+  for (const category of categories) {
+    for (const node of category.nodes) {
+      if (node.display_name.toLowerCase().includes(trimmed)) {
+        matches.push({ category, node })
+      }
+    }
+  }
+  return matches
+}

src/composables/useImageQuiet.ts

@@ -0,0 +1,27 @@
+import { useImage } from '@vueuse/core'
+
+/**
+ * `useImage()` that handles load failures quietly.
+ *
+ * `useImage()` already surfaces failures via its returned `error` ref (callers
+ * render a fallback). By default vueuse ALSO forwards the error to
+ * `globalThis.reportError`, which our error monitoring (Datadog RUM) captures as
+ * an unhandled error for every broken image — 404'd thumbnails, expired share
+ * links, in-app browsers that re-fetch in a loop. Broken images are expected,
+ * not bugs, so handle the failure here instead of letting it surface globally.
+ * The returned `error` ref behaviour is unchanged.
+ *
+ * `asyncStateOptions` is forwarded to `useImage`, so callers can still tune the
+ * other `useAsyncState` fields; only `onError` is fixed to the quiet default.
+ */
+export function useImageQuiet(
+  options: Parameters<typeof useImage>[0],
+  asyncStateOptions?: Parameters<typeof useImage>[1]
+) {
+  return useImage(options, {
+    ...asyncStateOptions,
+    onError: () => {
+      // Surfaced via the returned `error` ref; see the doc comment above.
+    }
+  })
+}

src/lib/litegraph/src/litegraph.ts

@@ -170,6 +170,7 @@ export type { TWidgetType, TWidgetValue, IWidgetOptions } from './types/widgets'
 export {
   findUsedSubgraphIds,
   getDirectSubgraphIds,
+  isNodeSlot,
   isSubgraphInput,
   isSubgraphOutput
 } from './subgraph/subgraphUtils'

src/locales/en/main.json

@@ -593,6 +593,12 @@
     "Bypass": "Bypass",
     "Copy (Clipspace)": "Copy (Clipspace)",
     "Add Node": "Add Node",
+    "Add Reroute": "Add Reroute",
+    "Most Relevant": "Most Relevant",
+    "Comfy Nodes": "Comfy Nodes",
+    "Extensions": "Extensions",
+    "Partner Nodes": "Partner Nodes",
+    "Compatible Nodes": "Compatible Nodes",
     "Add Group": "Add Group",
     "Manage Group Nodes": "Manage Group Nodes",
     "Add Group For Selected Nodes": "Add Group For Selected Nodes",

src/platform/assets/components/AssetCard.vue

@@ -128,10 +128,10 @@
 </template>
 
 <script setup lang="ts">
-import { useImage } from '@vueuse/core'
 import { computed, ref, toValue, useId, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useImageQuiet } from '@/composables/useImageQuiet'
 import IconGroup from '@/components/button/IconGroup.vue'
 import MoreButton from '@/components/button/MoreButton.vue'
 import StatusBadge from '@/components/common/StatusBadge.vue'
@@ -190,7 +190,7 @@ const tooltipDelay = computed<number>(() =>
   settingStore.get('LiteGraph.Node.TooltipDelay')
 )
 
-const { isLoading, error } = useImage({
+const { isLoading, error } = useImageQuiet({
   src: asset.preview_url ?? '',
   alt: displayName.value
 })

src/platform/assets/components/MediaImageTop.vue

@@ -20,8 +20,9 @@
 </template>
 
 <script setup lang="ts">
-import { useImage, whenever } from '@vueuse/core'
+import { whenever } from '@vueuse/core'
 
+import { useImageQuiet } from '@/composables/useImageQuiet'
 import type { AssetMeta } from '../schemas/mediaAssetSchema'
 import { getAssetDisplayName } from '../utils/assetMetadataUtils'
 
@@ -34,7 +35,7 @@ const emit = defineEmits<{
   view: []
 }>()
 
-const { state, error, isReady } = useImage({
+const { state, error, isReady } = useImageQuiet({
   src: asset.src ?? '',
   alt: getAssetDisplayName(asset)
 })

src/platform/workflow/sharing/components/ShareAssetThumbnail.vue

@@ -28,10 +28,10 @@
 </template>
 
 <script setup lang="ts">
-import { useImage } from '@vueuse/core'
 import { computed } from 'vue'
 
 import Skeleton from '@/components/ui/skeleton/Skeleton.vue'
+import { useImageQuiet } from '@/composables/useImageQuiet'
 import { cn } from '@comfyorg/tailwind-utils'
 
 const { name, previewUrl } = defineProps<{
@@ -63,5 +63,5 @@ const imageOptions = computed(() => ({
   src: normalizedPreviewUrl.value ?? ''
 }))
 
-const { isReady, isLoading, error } = useImage(imageOptions)
+const { isReady, isLoading, error } = useImageQuiet(imageOptions)
 </script>

src/services/litegraphService.ts

@@ -21,6 +21,7 @@ import {
   SubgraphNode,
   createBounds
 } from '@/lib/litegraph/src/litegraph'
+import { overlapBounding } from '@/lib/litegraph/src/measure'
 import type {
   CreateNodeOptions,
   GraphAddOptions,
@@ -944,9 +945,39 @@ export const useLitegraphService = () => {
     if (!graph || !node) return null
 
     graph.add(node, addOptions)
+    if (!addOptions?.ghost) {
+      resolveOverlap(node, graph)
+      centerOnNewNode(node)
+    }
     return node
   }
 
+  const OVERLAP_GAP = 20
+  const OVERLAP_MAX_ITER = 100
+
+  function resolveOverlap(
+    node: LGraphNode,
+    graph: { nodes: LGraphNode[] }
+  ): void {
+    node.updateArea()
+    let iter = 0
+    while (
+      iter++ < OVERLAP_MAX_ITER &&
+      graph.nodes.some(
+        (n) =>
+          n.id !== node.id && overlapBounding(node.boundingRect, n.boundingRect)
+      )
+    ) {
+      node.pos[1] += node.size[1] + OVERLAP_GAP
+      node.updateArea()
+    }
+  }
+
+  function centerOnNewNode(node: LGraphNode): void {
+    node.updateArea()
+    app.canvas?.animateToBounds(node.boundingRect, { zoom: 0 })
+  }
+
   function getCanvasCenter(): Point {
     const dpi = Math.max(window.devicePixelRatio ?? 1, 1)
     const visibleArea = app.canvas?.ds?.visible_area

src/stores/widgetStore.test.ts

@@ -38,6 +38,15 @@ describe('widgetStore', () => {
       store.registerCustomWidgets({ INT: override })
       expect(store.widgets.get('INT')).toBe(ComfyWidgets.INT)
     })
+
+    it('does not throw when an extension returns null/undefined widgets', () => {
+      const store = useWidgetStore()
+      // Regression: a misbehaving extension can resolve getCustomWidgets() to
+      // nullish, which must not break app init. The `!` casts deliberately
+      // violate the non-null parameter type to simulate that untrusted input.
+      expect(() => store.registerCustomWidgets(undefined!)).not.toThrow()
+      expect(() => store.registerCustomWidgets(null!)).not.toThrow()
+    })
   })
 
   describe('inputIsWidget', () => {

src/stores/widgetStore.ts

@@ -22,6 +22,11 @@ export const useWidgetStore = defineStore('widget', () => {
   function registerCustomWidgets(
     newWidgets: Record<string, ComfyWidgetConstructor>
   ) {
+    // Extensions are untrusted code: `getCustomWidgets` is typed to return
+    // `Record<string, ...>`, but in practice an extension can resolve it to
+    // null/undefined. Guard here so a single misbehaving custom node can't
+    // throw "Cannot convert undefined or null to object" and break app init.
+    if (!newWidgets) return
     for (const [type, widget] of Object.entries(newWidgets)) {
       customWidgets.value.set(type, widget)
     }