refactor(website): colocate learning index under learning/ folder

Move learning.astro to learning/index.astro for both locales so the
section landing page sits alongside its child routes (matching the
cloud/, demos/, and affiliates/ convention). Route is unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.github/workflows/ci-website-build.yaml

@@ -40,3 +40,6 @@ jobs:
           WEBSITE_ASHBY_API_KEY: ${{ secrets.WEBSITE_ASHBY_API_KEY }}
           WEBSITE_ASHBY_JOB_BOARD_NAME: ${{ secrets.WEBSITE_ASHBY_JOB_BOARD_NAME }}
         run: pnpm --filter @comfyorg/website build
+
+      - name: Validate JSON-LD structured data
+        run: pnpm --filter @comfyorg/website validate:jsonld

apps/website/e2e/affiliates.spec.ts

@@ -76,10 +76,14 @@ test.describe('Affiliates landing — desktop interactions', () => {
       return match?.textContent ?? null
     })
     expect(faqJsonLd, 'FAQ JSON-LD script').not.toBeNull()
-    const parsed = JSON.parse(faqJsonLd!)
-    expect(parsed['@type']).toBe('FAQPage')
-    expect(Array.isArray(parsed.mainEntity)).toBe(true)
-    expect(parsed.mainEntity.length).toBe(FAQ_COUNT)
+    const graph = JSON.parse(faqJsonLd!)['@graph'] as {
+      '@type': string
+      mainEntity?: unknown[]
+    }[]
+    const faqPage = graph.find((node) => node['@type'] === 'FAQPage')
+    expect(faqPage, 'FAQPage node in @graph').toBeDefined()
+    expect(Array.isArray(faqPage!.mainEntity)).toBe(true)
+    expect(faqPage!.mainEntity!.length).toBe(FAQ_COUNT)
   })
 
   test('Apply Now CTA opens the application form in a new tab', async ({

apps/website/e2e/learning.spec.ts

@@ -0,0 +1,158 @@
+import { expect } from '@playwright/test'
+
+import { learningTutorials } from '../src/data/learningTutorials'
+import { t } from '../src/i18n/translations'
+import { test } from './fixtures/blockExternalMedia'
+
+const tutorialButtonName = (title: string, locale: 'en' | 'zh-CN') =>
+  `${t('learning.tutorials.titlePrefix', locale)} ${title}`
+
+test.describe('Learning page @smoke', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/learning')
+  })
+
+  test('has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Learning — Comfy')
+  })
+
+  test('hero headline references ComfyUI', async ({ page }) => {
+    const heading = page.getByRole('heading', { level: 1 })
+    await expect(heading).toBeVisible()
+    await expect(heading).toContainText(t('learning.heroTitle.before', 'en'))
+    await expect(heading).toContainText('ComfyUI')
+    await expect(heading).toContainText(t('learning.heroTitle.line2', 'en'))
+  })
+
+  test('featured workflow section shows title and author', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', {
+        name: t('learning.featured.title', 'en'),
+        level: 2
+      })
+    ).toBeVisible()
+    await expect(
+      page.getByText(t('learning.featured.author', 'en'))
+    ).toBeVisible()
+  })
+
+  test('renders every tutorial from the data source', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', {
+        name: t('learning.tutorials.heading', 'en'),
+        level: 2
+      })
+    ).toBeVisible()
+
+    for (const tutorial of learningTutorials) {
+      await expect(
+        page.getByRole('button', {
+          name: tutorialButtonName(tutorial.title.en, 'en')
+        })
+      ).toBeVisible()
+    }
+  })
+
+  test('tutorials with a workflow link expose an external Try Workflow link', async ({
+    page
+  }) => {
+    const linkedTutorials = learningTutorials.filter(
+      (tutorial) => tutorial.href
+    )
+    const workflowLinks = page.getByRole('link', {
+      name: t('cta.tryWorkflow', 'en')
+    })
+    const hrefs = await workflowLinks.evaluateAll((links) =>
+      links.map((link) => link.getAttribute('href'))
+    )
+    for (const tutorial of linkedTutorials) {
+      expect(hrefs).toContain(tutorial.href)
+    }
+  })
+
+  test('call to action links to contact sales', async ({ page }) => {
+    await expect(
+      page.getByRole('heading', {
+        name: t('learning.cta.heading', 'en'),
+        level: 2
+      })
+    ).toBeVisible()
+    await expect(
+      page.getByRole('link', { name: t('learning.cta.contactSales', 'en') })
+    ).toHaveAttribute('href', '/contact')
+  })
+})
+
+test.describe('Learning tutorial dialog', () => {
+  test('opens a tutorial video and dismisses via the close button', async ({
+    page
+  }) => {
+    const [firstTutorial] = learningTutorials
+    await page.goto('/learning')
+
+    const openButton = page.getByRole('button', {
+      name: tutorialButtonName(firstTutorial.title.en, 'en')
+    })
+    await openButton.scrollIntoViewIfNeeded()
+
+    const dialog = page.getByRole('dialog', { name: firstTutorial.title.en })
+    // TutorialsSection is hydrated via `client:visible`; retry the click until
+    // Vue responds by opening the dialog.
+    await expect(async () => {
+      await openButton.click()
+      await expect(dialog).toBeVisible({ timeout: 1_000 })
+    }).toPass({ timeout: 10_000 })
+
+    await expect(
+      dialog.getByRole('heading', { level: 2, name: firstTutorial.title.en })
+    ).toBeVisible()
+
+    await dialog
+      .getByRole('button', { name: t('gallery.detail.close', 'en') })
+      .click()
+    await expect(dialog).toBeHidden()
+  })
+
+  test('dismisses the dialog with the Escape key', async ({ page }) => {
+    const [firstTutorial] = learningTutorials
+    await page.goto('/learning')
+
+    const openButton = page.getByRole('button', {
+      name: tutorialButtonName(firstTutorial.title.en, 'en')
+    })
+    await openButton.scrollIntoViewIfNeeded()
+
+    const dialog = page.getByRole('dialog', { name: firstTutorial.title.en })
+    await expect(async () => {
+      await openButton.click()
+      await expect(dialog).toBeVisible({ timeout: 1_000 })
+    }).toPass({ timeout: 10_000 })
+
+    await page.keyboard.press('Escape')
+    await expect(dialog).toBeHidden()
+  })
+})
+
+test.describe('Learning page (zh-CN) @smoke', () => {
+  test('renders localized title, headings, and tutorials', async ({ page }) => {
+    await page.goto('/zh-CN/learning')
+
+    await expect(page).toHaveTitle('学习 — Comfy')
+    await expect(page.getByRole('heading', { level: 1 })).toContainText(
+      /[一-鿿]/
+    )
+    await expect(
+      page.getByRole('heading', {
+        name: t('learning.tutorials.heading', 'zh-CN'),
+        level: 2
+      })
+    ).toBeVisible()
+
+    const [firstTutorial] = learningTutorials
+    await expect(
+      page.getByRole('button', {
+        name: tutorialButtonName(firstTutorial.title['zh-CN'], 'zh-CN')
+      })
+    ).toBeVisible()
+  })
+})

apps/website/package.json

@@ -17,7 +17,8 @@
     "test:visual:update": "playwright test --project visual --update-snapshots",
     "ashby:refresh-snapshot": "tsx ./scripts/refresh-ashby-snapshot.ts",
     "cloud-nodes:refresh-snapshot": "tsx ./scripts/refresh-cloud-nodes-snapshot.ts",
-    "generate:models": "tsx ./scripts/generate-models.ts"
+    "generate:models": "tsx ./scripts/generate-models.ts",
+    "validate:jsonld": "tsx ./scripts/validate-jsonld.ts"
   },
   "dependencies": {
     "@astrojs/sitemap": "catalog:",

apps/website/scripts/validate-jsonld.ts

@@ -0,0 +1,129 @@
+import { readFileSync, readdirSync } from 'node:fs'
+import { join } from 'node:path'
+
+import { collectGraphIds } from '../src/utils/jsonLd'
+
+const DIST_DIR = join(process.cwd(), 'dist')
+const JSON_LD_BLOCK =
+  /<script[^>]*type=["']application\/ld\+json["'][^>]*>([\s\S]*?)<\/script>/gi
+
+interface Violation {
+  file: string
+  message: string
+}
+
+function htmlFiles(dir: string): string[] {
+  return readdirSync(dir, { recursive: true })
+    .map(String)
+    .filter((entry) => entry.endsWith('.html'))
+    .map((entry) => join(dir, entry))
+}
+
+function typesOf(node: Record<string, unknown>): string[] {
+  const type = node['@type']
+  if (typeof type === 'string') return [type]
+  if (Array.isArray(type)) {
+    return type.filter((t): t is string => typeof t === 'string')
+  }
+  return []
+}
+
+function hasValidPrice(node: Record<string, unknown>): boolean {
+  const price = node.price
+  const priceStr = price == null ? '' : String(price).trim()
+  return priceStr !== '' && !Number.isNaN(Number(priceStr))
+}
+
+function checkHonesty(
+  value: unknown,
+  file: string,
+  violations: Violation[]
+): void {
+  const walk = (node: unknown): void => {
+    if (Array.isArray(node)) {
+      node.forEach(walk)
+      return
+    }
+    if (!node || typeof node !== 'object') return
+    const record = node as Record<string, unknown>
+    const types = typesOf(record)
+    if (types.includes('Review') || types.includes('AggregateRating')) {
+      violations.push({
+        file,
+        message: `dishonest node type ${types.join('/')}`
+      })
+    }
+    if ('aggregateRating' in record || 'review' in record) {
+      violations.push({
+        file,
+        message: 'node carries a review/aggregateRating'
+      })
+    }
+    if (
+      types.includes('Offer') &&
+      (!hasValidPrice(record) || !record.priceCurrency)
+    ) {
+      violations.push({
+        file,
+        message: 'Offer missing priceCurrency or a concrete price'
+      })
+    }
+    Object.values(record).forEach(walk)
+  }
+  walk(value)
+}
+
+function validateFile(file: string): Violation[] {
+  const html = readFileSync(file, 'utf8')
+  const violations: Violation[] = []
+  const definedIds = new Set<string>()
+  const referencedIds: string[] = []
+
+  for (const match of html.matchAll(JSON_LD_BLOCK)) {
+    let parsed: unknown
+    try {
+      parsed = JSON.parse(match[1])
+    } catch (error) {
+      violations.push({ file, message: `invalid JSON-LD: ${String(error)}` })
+      continue
+    }
+    checkHonesty(parsed, file, violations)
+    const { defined, references } = collectGraphIds(parsed)
+    defined.forEach((id) => definedIds.add(id))
+    referencedIds.push(...references)
+  }
+
+  for (const id of referencedIds) {
+    if (!definedIds.has(id)) {
+      violations.push({ file, message: `unresolved @id reference: ${id}` })
+    }
+  }
+
+  return violations
+}
+
+function main(): void {
+  const files = htmlFiles(DIST_DIR)
+
+  if (files.length === 0) {
+    console.error(
+      `JSON-LD validation found no HTML in ${DIST_DIR} — build first.`
+    )
+    process.exit(1)
+  }
+
+  const violations = files.flatMap(validateFile)
+  if (violations.length > 0) {
+    console.error(`JSON-LD validation failed (${violations.length} issue(s)):`)
+    for (const { file, message } of violations) {
+      console.error(`  ${file.replace(DIST_DIR, 'dist')}: ${message}`)
+    }
+    process.exit(1)
+  }
+
+  process.stdout.write(
+    `JSON-LD validation passed across ${files.length} page(s).\n`
+  )
+}
+
+main()

apps/website/src/components/blocks/HeroBackdrop01.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import HeroBackdrop01 from './HeroBackdrop01.vue'
+
+const sampleImage =
+  'https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1600&q=80'
+
+const meta: Meta<typeof HeroBackdrop01> = {
+  title: 'Website/Blocks/HeroBackdrop01',
+  component: HeroBackdrop01,
+  tags: ['autodocs'],
+  args: {
+    backdrop: { type: 'image', src: sampleImage, alt: 'Abstract gradient' },
+    title: 'Build anything\nwith ComfyUI',
+    subtitle:
+      'A powerful, modular visual interface for building and running AI workflows.'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const WithBadge: Story = {
+  args: {
+    badgeText: 'New'
+  }
+}
+
+export const WithFootnote: Story = {
+  args: {
+    footnote: 'Available on Windows, macOS, and Linux.'
+  }
+}
+
+export const NoBackdrop: Story = {
+  args: {
+    backdrop: undefined
+  }
+}
+
+export const DarkTone: Story = {
+  args: {
+    tone: 'dark'
+  }
+}

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

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { cn } from '@comfyorg/tailwind-utils'
+
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+
+import { prefersReducedMotion } from '../../composables/useReducedMotion'
+import ProductHeroBadge from '../common/ProductHeroBadge.vue'
+
+type Backdrop =
+  | { type: 'image'; src: string; alt?: string }
+  | { type: 'video'; src: string; poster?: string; alt?: string }
+
+const {
+  backdrop,
+  mobileBackdrop,
+  badgeText,
+  badgeLogoSrc,
+  badgeLogoAlt,
+  title,
+  subtitle,
+  footnote,
+  tone = 'light',
+  class: className
+} = defineProps<{
+  backdrop?: Backdrop
+  mobileBackdrop?: Backdrop
+  badgeText?: string
+  badgeLogoSrc?: string
+  badgeLogoAlt?: string
+  title: string
+  subtitle?: string
+  footnote?: string
+  tone?: 'light' | 'dark'
+  class?: HTMLAttributes['class']
+}>()
+
+// Light tone assumes a light backdrop: dark ink text on desktop plus a
+// warm-white radial scrim for contrast. Dark tone assumes a dark backdrop
+// and uses white text at all breakpoints, with no scrim.
+const toneTextClass = computed(() =>
+  tone === 'light'
+    ? 'text-primary-comfy-canvas lg:text-primary-comfy-ink'
+    : 'text-white'
+)
+
+// Respect prefers-reduced-motion: don't autoplay the looping backdrop video
+// (WCAG 2.2.2). The paused video falls back to its poster/first frame.
+const reduceMotion = computed(() => prefersReducedMotion())
+
+// Removing the reactive `autoplay` attribute only suppresses the *initial*
+// play; it can't pause a video the browser has already started. That is
+// exactly the SSR case: the server renders `autoplay` (it can't read the
+// client's motion preference), the browser begins playback on parse, and the
+// post-hydration attribute removal is too late. Pause on mount so
+// reduced-motion users get the poster frame instead of a looping video.
+const pauseIfReduced = (el: unknown) => {
+  if (el instanceof HTMLVideoElement && reduceMotion.value) el.pause()
+}
+
+// On mobile the backdrop is an in-flow rounded card above the content; on
+// desktop it is the full-bleed background behind it. A single element serves
+// both roles via responsive classes — mobileBackdrop only swaps the source.
+const sharedBackdropClass =
+  'relative aspect-3/2 w-full rounded-3xl object-cover lg:absolute lg:inset-0 lg:aspect-auto lg:size-full lg:rounded-none'
+
+// When both breakpoints use images, serve them from a single responsive <img>
+// so the browser fetches only the source matching the viewport. Two
+// `hidden`/`lg:hidden`-toggled <img> layers would each download (display:none
+// does not stop the fetch), doubling the high-priority load on an
+// LCP-critical hero. Videos or a mixed image/video pair can't collapse this
+// way and fall back to breakpoint-toggled layers below.
+const responsiveImage = computed(() => {
+  if (backdrop?.type !== 'image') return null
+  if (mobileBackdrop && mobileBackdrop.type !== 'image') return null
+  const base = mobileBackdrop ?? backdrop
+  return {
+    src: base.src,
+    alt: backdrop.alt ?? mobileBackdrop?.alt ?? '',
+    // Larger-viewport source; omitted when one image serves both breakpoints.
+    desktopSrc: mobileBackdrop ? backdrop.src : undefined
+  }
+})
+
+// Fallback for videos and mixed image/video pairs: toggle assets by breakpoint.
+const backdropLayers = computed(() => {
+  if (!backdrop) return []
+  if (mobileBackdrop) {
+    return [
+      {
+        backdrop: mobileBackdrop,
+        class: 'relative aspect-3/2 w-full rounded-3xl object-cover lg:hidden'
+      },
+      {
+        backdrop,
+        class: 'absolute inset-0 hidden size-full object-cover lg:block'
+      }
+    ]
+  }
+  return [{ backdrop, class: sharedBackdropClass }]
+})
+
+const scrimShape = 'farthest-side at 50% 50%'
+const scrimStyle = {
+  background: `radial-gradient(${scrimShape}, color-mix(in srgb, var(--color-primary-warm-white) 80%, transparent) 0%, transparent 80%)`,
+  maskImage: `radial-gradient(${scrimShape}, #000 45%, transparent 90%)`,
+  WebkitMaskImage: `radial-gradient(${scrimShape}, #000 45%, transparent 90%)`
+}
+</script>
+
+<template>
+  <section
+    :class="cn('max-w-9xl mx-auto px-4 pt-4 lg:px-6 lg:pt-6', className)"
+  >
+    <div class="relative overflow-hidden rounded-3xl">
+      <slot name="backdrop">
+        <picture v-if="responsiveImage" class="contents">
+          <source
+            v-if="responsiveImage.desktopSrc"
+            :srcset="responsiveImage.desktopSrc"
+            media="(min-width: 1024px)"
+          />
+          <img
+            :src="responsiveImage.src"
+            :alt="responsiveImage.alt"
+            fetchpriority="high"
+            decoding="async"
+            :class="sharedBackdropClass"
+          />
+        </picture>
+
+        <template v-else>
+          <template v-for="(layer, i) in backdropLayers" :key="i">
+            <video
+              v-if="layer.backdrop.type === 'video'"
+              :ref="pauseIfReduced"
+              :src="layer.backdrop.src"
+              :poster="layer.backdrop.poster"
+              :aria-label="layer.backdrop.alt"
+              :aria-hidden="layer.backdrop.alt ? undefined : true"
+              :autoplay="!reduceMotion"
+              loop
+              muted
+              playsinline
+              preload="metadata"
+              :class="layer.class"
+            />
+            <img
+              v-else
+              :src="layer.backdrop.src"
+              :alt="layer.backdrop.alt ?? ''"
+              fetchpriority="high"
+              decoding="async"
+              :class="layer.class"
+            />
+          </template>
+        </template>
+      </slot>
+
+      <div
+        class="relative flex flex-col justify-center px-0 pt-6 pb-8 lg:min-h-176 lg:px-16 lg:py-24"
+      >
+        <div class="relative w-full max-w-xl">
+          <div
+            v-if="tone === 'light'"
+            aria-hidden="true"
+            class="pointer-events-none absolute -inset-12 hidden backdrop-blur-md lg:-inset-16 lg:block"
+            :style="scrimStyle"
+          />
+
+          <div class="relative">
+            <ProductHeroBadge
+              v-if="badgeText"
+              :text="badgeText"
+              :logo-src="badgeLogoSrc"
+              :logo-alt="badgeLogoAlt"
+            />
+
+            <h1
+              :class="
+                cn(
+                  'mt-10 text-4xl/tight font-light tracking-tight whitespace-pre-line lg:text-6xl/tight',
+                  toneTextClass
+                )
+              "
+            >
+              {{ title }}
+            </h1>
+
+            <p
+              v-if="subtitle"
+              :class="cn('mt-8 max-w-md text-base lg:text-lg', toneTextClass)"
+            >
+              {{ subtitle }}
+            </p>
+
+            <p v-if="footnote" :class="cn('mt-10 text-sm', toneTextClass)">
+              {{ footnote }}
+            </p>
+
+            <slot />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

apps/website/src/components/blocks/LogosAll01.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import { clientLogos } from '../../data/clientLogos'
+import LogosAll01 from './LogosAll01.vue'
+
+const meta: Meta<typeof LogosAll01> = {
+  title: 'Website/Blocks/LogosAll01',
+  component: LogosAll01,
+  tags: ['autodocs'],
+  args: {
+    logos: clientLogos
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

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

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+export interface LogoItem {
+  src: string
+  alt: string
+}
+
+const { logos, testId = 'logos-all' } = defineProps<{
+  logos: readonly LogoItem[]
+  testId?: string
+}>()
+
+// On mobile the single row splits into two counter-scrolling halves.
+const mobileRow1Logos = computed(() =>
+  logos.slice(0, Math.ceil(logos.length / 2))
+)
+const mobileRow2Logos = computed(() => logos.slice(Math.ceil(logos.length / 2)))
+</script>
+
+<template>
+  <section class="overflow-hidden py-12">
+    <!-- Single row on desktop -->
+    <div :data-testid="`${testId}-desktop`" class="hidden w-max gap-2 md:flex">
+      <div
+        v-for="copy in 2"
+        :key="copy"
+        class="animate-marquee flex shrink-0 items-center gap-2"
+        style="--marquee-gap: 0.5rem"
+        :aria-hidden="copy === 2 ? 'true' : undefined"
+      >
+        <div
+          v-for="logo in logos"
+          :key="logo.src"
+          class="flex h-20 w-50 shrink-0 items-center justify-center"
+        >
+          <img :src="logo.src" :alt="logo.alt" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Two rows on mobile -->
+    <div
+      :data-testid="`${testId}-mobile`"
+      class="flex flex-col gap-8 md:hidden"
+    >
+      <div class="flex w-max gap-8">
+        <div
+          v-for="copy in 2"
+          :key="copy"
+          class="animate-marquee flex shrink-0 items-center gap-8"
+          style="--marquee-gap: 2rem"
+          :aria-hidden="copy === 2 ? 'true' : undefined"
+        >
+          <div
+            v-for="logo in mobileRow1Logos"
+            :key="logo.src"
+            class="flex h-14 w-40 shrink-0 items-center justify-center"
+          >
+            <img :src="logo.src" :alt="logo.alt" />
+          </div>
+        </div>
+      </div>
+      <div class="flex w-max gap-8">
+        <div
+          v-for="copy in 2"
+          :key="copy"
+          class="animate-marquee-reverse flex shrink-0 items-center gap-8"
+          style="--marquee-gap: 2rem"
+          :aria-hidden="copy === 2 ? 'true' : undefined"
+        >
+          <div
+            v-for="logo in mobileRow2Logos"
+            :key="logo.src"
+            class="flex h-14 w-40 shrink-0 items-center justify-center"
+          >
+            <img :src="logo.src" :alt="logo.alt" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

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

@@ -25,7 +25,7 @@ const {
   <section class="max-w-9xl mx-auto px-6 py-20 lg:py-32">
     <div class="flex flex-col items-center text-center">
       <h2
-        class="max-w-5xl text-3xl font-light tracking-tight text-primary-comfy-canvas lg:text-5xl"
+        class="max-w-5xl text-3xl font-light tracking-tight text-balance text-primary-comfy-canvas lg:text-5xl"
       >
         {{ t(headingKey, locale) }}
       </h2>

apps/website/src/components/common/JsonLdGraph.astro

@@ -0,0 +1,12 @@
+---
+import type { JsonLdGraph } from '../../utils/jsonLd'
+import { escapeJsonLd } from '../../utils/escapeJsonLd'
+
+interface Props {
+  graph: JsonLdGraph
+}
+
+const { graph } = Astro.props
+---
+
+<script is:inline type="application/ld+json" set:html={escapeJsonLd(graph)} />

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

@@ -1,82 +1,8 @@
 <script setup lang="ts">
-const logos = [
-  'Amazon Studios',
-  'Apple',
-  'Autodesk',
-  'Harman',
-  'Hp',
-  'Lucid',
-  'Netflix',
-  'Nike',
-  'Pixomondo',
-  'Tencent',
-  'Ubisoft'
-]
-
-const mobileRow1Logos = logos.slice(0, 6)
-const mobileRow2Logos = logos.slice(6)
+import { clientLogos } from '../../data/clientLogos'
+import LogosAll01 from '../blocks/LogosAll01.vue'
 </script>
 
 <template>
-  <section class="overflow-hidden py-12">
-    <!-- Single row on desktop -->
-    <div data-testid="social-proof-desktop" class="hidden w-max gap-2 md:flex">
-      <div
-        v-for="copy in 2"
-        :key="copy"
-        class="animate-marquee flex shrink-0 items-center gap-2"
-        style="--marquee-gap: 0.5rem"
-        :aria-hidden="copy === 2 ? 'true' : undefined"
-      >
-        <div
-          v-for="logo in logos"
-          :key="logo"
-          class="flex h-20 w-50 shrink-0 items-center justify-center"
-        >
-          <img :src="`/icons/clients/${logo}.svg`" :alt="logo" />
-        </div>
-      </div>
-    </div>
-
-    <!-- Two rows on mobile -->
-    <div
-      data-testid="social-proof-mobile"
-      class="flex flex-col gap-8 md:hidden"
-    >
-      <div class="flex w-max gap-8">
-        <div
-          v-for="copy in 2"
-          :key="copy"
-          class="animate-marquee flex shrink-0 items-center gap-8"
-          style="--marquee-gap: 2rem"
-          :aria-hidden="copy === 2 ? 'true' : undefined"
-        >
-          <div
-            v-for="logo in mobileRow1Logos"
-            :key="logo"
-            class="flex h-14 w-40 shrink-0 items-center justify-center"
-          >
-            <img :src="`/icons/clients/${logo}.svg`" :alt="logo" />
-          </div>
-        </div>
-      </div>
-      <div class="flex w-max gap-8">
-        <div
-          v-for="copy in 2"
-          :key="copy"
-          class="animate-marquee-reverse flex shrink-0 items-center gap-8"
-          style="--marquee-gap: 2rem"
-          :aria-hidden="copy === 2 ? 'true' : undefined"
-        >
-          <div
-            v-for="logo in mobileRow2Logos"
-            :key="logo"
-            class="flex h-14 w-40 shrink-0 items-center justify-center"
-          >
-            <img :src="`/icons/clients/${logo}.svg`" :alt="logo" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
+  <LogosAll01 :logos="clientLogos" test-id="social-proof" />
 </template>

apps/website/src/components/common/TutorialCard.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import { vfxTutorials } from '../../data/vfxTutorials'
+import TutorialCard from './TutorialCard.vue'
+
+const meta: Meta<typeof TutorialCard> = {
+  title: 'Website/Common/TutorialCard',
+  component: TutorialCard,
+  tags: ['autodocs'],
+  args: {
+    tutorial: vfxTutorials[0],
+    titlePrefixKey: 'learning.tutorials.titlePrefix'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const Overlay: Story = {
+  args: {
+    variant: 'overlay',
+    titlePrefixKey: undefined,
+    tutorial: {
+      ...vfxTutorials[0],
+      author: { name: 'Author Name', avatarSrc: '/icons/clients/Apple.svg' }
+    }
+  }
+}

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

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { VideoTrack } from './VideoPlayer.vue'
+import type {
+  Locale,
+  LocalizedText,
+  TranslationKey
+} from '../../i18n/translations'
+
+import { t } from '../../i18n/translations'
+import Badge from '../ui/badge/Badge.vue'
+import { ButtonMask } from '../ui/button-mask'
+
+export interface Tutorial {
+  id: string
+  tags: readonly TranslationKey[]
+  title: LocalizedText
+  videoSrc: string
+  href?: string
+  poster?: string
+  caption?: readonly VideoTrack[]
+  posterTime?: number
+  author?: { name: string; avatarSrc?: string }
+}
+
+const DEFAULT_POSTER_TIME_SECONDS = 1
+
+const getTutorialPosterSrc = (tutorial: Tutorial): string =>
+  tutorial.poster
+    ? tutorial.poster
+    : `${tutorial.videoSrc}#t=${tutorial.posterTime ?? DEFAULT_POSTER_TIME_SECONDS}`
+
+const {
+  tutorial,
+  locale = 'en',
+  titlePrefixKey,
+  variant = 'default'
+} = defineProps<{
+  tutorial: Tutorial
+  locale?: Locale
+  titlePrefixKey?: TranslationKey
+  variant?: 'default' | 'overlay'
+}>()
+
+const emit = defineEmits<{ play: [] }>()
+
+const accessibleTitle = computed(() =>
+  titlePrefixKey
+    ? `${t(titlePrefixKey, locale)} ${tutorial.title[locale]}`
+    : tutorial.title[locale]
+)
+</script>
+
+<template>
+  <article
+    class="bg-transparency-white-t4 flex flex-col gap-4 overflow-hidden rounded-3xl border-0 p-2"
+  >
+    <button
+      type="button"
+      class="group relative block aspect-video cursor-pointer overflow-hidden rounded-3xl"
+      :aria-label="accessibleTitle"
+      @click="emit('play')"
+    >
+      <video
+        :src="getTutorialPosterSrc(tutorial)"
+        :poster="tutorial.poster"
+        class="size-full object-cover"
+        preload="metadata"
+        playsinline
+        muted
+      ></video>
+      <!-- Dim the thumbnail so the overlaid title stays legible. -->
+      <span
+        v-if="variant === 'overlay'"
+        class="absolute inset-0 bg-black/30"
+        aria-hidden="true"
+      />
+      <span
+        v-if="variant === 'overlay'"
+        class="absolute inset-x-0 top-0 h-1/2 bg-linear-to-b from-black/60 to-transparent"
+        aria-hidden="true"
+      />
+      <span
+        v-if="variant === 'overlay'"
+        class="pointer-events-none absolute inset-x-0 top-0 p-6 text-left text-2xl font-light text-primary-comfy-canvas lg:p-8 lg:text-3xl"
+      >
+        {{ tutorial.title[locale] }}
+      </span>
+      <span
+        class="absolute inset-0 flex items-center justify-center"
+        aria-hidden="true"
+      >
+        <span
+          class="flex size-14 items-center justify-center rounded-full bg-white/25 backdrop-blur-sm transition-transform group-hover:scale-105 lg:size-16"
+        >
+          <svg
+            class="ml-1 size-5 text-white lg:size-6"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path d="M8 5v14l11-7z" />
+          </svg>
+        </span>
+      </span>
+    </button>
+
+    <div class="flex flex-col space-y-3 p-4">
+      <div
+        v-if="variant === 'overlay'"
+        class="flex items-center justify-between gap-4"
+      >
+        <span
+          v-if="tutorial.author"
+          class="flex min-w-0 items-center gap-3 text-sm text-primary-comfy-canvas lg:text-base"
+        >
+          <img
+            v-if="tutorial.author.avatarSrc"
+            :src="tutorial.author.avatarSrc"
+            alt=""
+            class="size-10 shrink-0 rounded-full object-cover"
+          />
+          <span class="truncate">{{ tutorial.author.name }}</span>
+        </span>
+        <ButtonMask
+          v-if="tutorial.href"
+          as="a"
+          :href="tutorial.href"
+          icon-position="left"
+          :hide-label="false"
+          class="ml-auto shrink-0 ps-12"
+          variant="ghost"
+          size="default"
+        >
+          {{ t('cta.tryWorkflow', locale) }}
+        </ButtonMask>
+      </div>
+
+      <div v-else class="flex items-center justify-between gap-4">
+        <h3 class="text-sm/snug text-primary-comfy-canvas lg:text-base/snug">
+          <template v-if="titlePrefixKey"
+            >{{ t(titlePrefixKey, locale) }}<br
+          /></template>
+          {{ tutorial.title[locale] }}
+        </h3>
+        <ButtonMask
+          v-if="tutorial.href"
+          as="a"
+          :href="tutorial.href"
+          icon-position="right"
+          class="shrink-0"
+          variant="ghost"
+          size="default"
+        >
+          {{ t('cta.tryWorkflow', locale) }}
+          <template #icon>
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="3"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="size-4"
+            >
+              <polyline points="9 6 15 12 9 18" />
+            </svg>
+          </template>
+        </ButtonMask>
+      </div>
+
+      <ul class="flex flex-wrap gap-2">
+        <li v-for="tag in tutorial.tags" :key="tag">
+          <Badge>{{ t(tag, locale) }}</Badge>
+        </li>
+      </ul>
+    </div>
+  </article>
+</template>

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

@@ -1,16 +1,21 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, useTemplateRef } from 'vue'
 
-import type { LearningTutorial } from '../../data/learningTutorials'
-import type { Locale } from '../../i18n/translations'
+import type { Tutorial } from './TutorialCard.vue'
+import type { Locale, TranslationKey } from '../../i18n/translations'
 
 import { lockScroll, unlockScroll } from '../../composables/scrollLock'
 import { t } from '../../i18n/translations'
-import VideoPlayer from '../common/VideoPlayer.vue'
+import VideoPlayer from './VideoPlayer.vue'
 
-const { tutorial, locale = 'en' } = defineProps<{
-  tutorial: LearningTutorial
+const {
+  tutorial,
+  locale = 'en',
+  titlePrefixKey
+} = defineProps<{
+  tutorial: Tutorial
   locale?: Locale
+  titlePrefixKey?: TranslationKey
 }>()
 
 const emit = defineEmits<{ close: [] }>()
@@ -73,7 +78,9 @@ onUnmounted(() => {
       <h2
         class="mt-6 text-center text-lg font-medium text-primary-comfy-canvas lg:text-xl"
       >
-        {{ t('learning.tutorials.titlePrefix', locale) }}
+        <template v-if="titlePrefixKey"
+          >{{ t(titlePrefixKey, locale) }}
+        </template>
         {{ tutorial.title[locale] }}
       </h2>
     </dialog>

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

@@ -3,14 +3,10 @@ import { ref } from 'vue'
 
 import type { Locale } from '../../i18n/translations'
 
-import {
-  getTutorialPosterSrc,
-  learningTutorials
-} from '../../data/learningTutorials'
+import { learningTutorials } from '../../data/learningTutorials'
 import { t } from '../../i18n/translations'
-import Badge from '../ui/badge/Badge.vue'
-import { ButtonMask } from '../ui/button-mask'
-import TutorialDetailDialog from './TutorialDetailDialog.vue'
+import TutorialCard from '../common/TutorialCard.vue'
+import TutorialDetailDialog from '../common/TutorialDetailDialog.vue'
 
 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
 
@@ -30,84 +26,13 @@ const activeTutorial = () =>
     <ul
       class="grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-8"
     >
-      <li
-        v-for="tutorial in learningTutorials"
-        :key="tutorial.id"
-        class="bg-transparency-white-t4 flex flex-col gap-4 overflow-hidden rounded-3xl border-0 p-2"
-      >
-        <button
-          type="button"
-          class="group relative block aspect-video cursor-pointer overflow-hidden rounded-3xl"
-          :aria-label="`${t('learning.tutorials.titlePrefix', locale)} ${tutorial.title[locale]}`"
-          @click="activeTutorialId = tutorial.id"
-        >
-          <video
-            :src="getTutorialPosterSrc(tutorial)"
-            :poster="tutorial.poster"
-            class="size-full object-cover"
-            preload="metadata"
-            playsinline
-            muted
-          ></video>
-          <span
-            class="absolute inset-0 flex items-center justify-center"
-            aria-hidden="true"
-          >
-            <span
-              class="flex size-14 items-center justify-center rounded-full bg-white/25 backdrop-blur-sm transition-transform group-hover:scale-105 lg:size-16"
-            >
-              <svg
-                class="ml-1 size-5 text-white lg:size-6"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path d="M8 5v14l11-7z" />
-              </svg>
-            </span>
-          </span>
-        </button>
-
-        <div class="flex flex-col space-y-3 p-4">
-          <div class="flex items-center justify-between gap-4">
-            <h3
-              class="text-sm/snug text-primary-comfy-canvas lg:text-base/snug"
-            >
-              {{ t('learning.tutorials.titlePrefix', locale) }}<br />
-              {{ tutorial.title[locale] }}
-            </h3>
-            <ButtonMask
-              v-if="tutorial.href"
-              as="a"
-              :href="tutorial.href"
-              icon-position="right"
-              class="shrink-0"
-              variant="ghost"
-              size="default"
-            >
-              {{ t('cta.tryWorkflow', locale) }}
-              <template #icon>
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="3"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  class="size-4"
-                >
-                  <polyline points="9 6 15 12 9 18" />
-                </svg>
-              </template>
-            </ButtonMask>
-          </div>
-
-          <ul class="flex flex-wrap gap-2">
-            <li v-for="tag in tutorial.tags" :key="tag">
-              <Badge>{{ t(tag, locale) }}</Badge>
-            </li>
-          </ul>
-        </div>
+      <li v-for="tutorial in learningTutorials" :key="tutorial.id">
+        <TutorialCard
+          :tutorial="tutorial"
+          :locale="locale"
+          title-prefix-key="learning.tutorials.titlePrefix"
+          @play="activeTutorialId = tutorial.id"
+        />
       </li>
     </ul>
 
@@ -115,6 +40,7 @@ const activeTutorial = () =>
       v-if="activeTutorial()"
       :tutorial="activeTutorial()!"
       :locale="locale"
+      title-prefix-key="learning.tutorials.titlePrefix"
       @close="activeTutorialId = null"
     />
   </section>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { Locale } from '../../i18n/translations'
+
+import { externalLinks, getRoutes } from '../../config/routes'
+import { t } from '../../i18n/translations'
+import HeroBackdrop01 from '../blocks/HeroBackdrop01.vue'
+import Button from '../ui/button/Button.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const routes = computed(() => getRoutes(locale))
+
+const backdrop = {
+  type: 'video',
+  src: 'https://media.comfy.org/website/vfx/vfx_hero.mp4'
+} as const
+
+const mobileBackdrop = {
+  type: 'video',
+  src: 'https://media.comfy.org/website/vfx/vfx_hero-mobile.mp4'
+} as const
+</script>
+
+<template>
+  <HeroBackdrop01
+    tone="dark"
+    :backdrop="backdrop"
+    :mobile-backdrop="mobileBackdrop"
+    :title="t('vfx.hero.title', locale)"
+    :subtitle="t('vfx.hero.subtitle', locale)"
+  >
+    <div class="mt-10 flex flex-wrap gap-4">
+      <Button as="a" :href="routes.contact">
+        {{ t('vfx.cta.contactSales', locale) }}
+      </Button>
+      <Button as="a" :href="externalLinks.cloud" variant="outline">
+        {{ t('vfx.hero.tryNow', locale) }}
+      </Button>
+    </div>
+  </HeroBackdrop01>
+</template>

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import type { Locale } from '../../i18n/translations'
+
+import { vfxTutorials } from '../../data/vfxTutorials'
+import { t } from '../../i18n/translations'
+import TutorialCard from '../common/TutorialCard.vue'
+import TutorialDetailDialog from '../common/TutorialDetailDialog.vue'
+
+const { locale = 'en' } = defineProps<{ locale?: Locale }>()
+
+const activeTutorialId = ref<string | null>(null)
+const activeTutorial = () =>
+  vfxTutorials.find((tutorial) => tutorial.id === activeTutorialId.value)
+</script>
+
+<template>
+  <section class="max-w-9xl mx-auto px-6 py-16 lg:py-24">
+    <h2
+      class="mb-6 text-center text-4xl font-light tracking-tight text-primary-comfy-canvas lg:text-6xl"
+    >
+      {{ t('vfx.tutorials.heading', locale) }}
+    </h2>
+
+    <p
+      class="mx-auto mb-12 max-w-3xl text-center text-base text-primary-comfy-canvas lg:mb-16 lg:text-lg"
+    >
+      {{ t('vfx.tutorials.description', locale) }}
+    </p>
+
+    <ul
+      class="grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-8"
+    >
+      <li v-for="tutorial in vfxTutorials" :key="tutorial.id">
+        <TutorialCard
+          :tutorial="tutorial"
+          :locale="locale"
+          variant="overlay"
+          @play="activeTutorialId = tutorial.id"
+        />
+      </li>
+    </ul>
+
+    <TutorialDetailDialog
+      v-if="activeTutorial()"
+      :tutorial="activeTutorial()!"
+      :locale="locale"
+      @close="activeTutorialId = null"
+    />
+  </section>
+</template>

apps/website/src/config/pricing.ts

@@ -0,0 +1,53 @@
+import { t } from '../i18n/translations'
+import type { Locale, TranslationKey } from '../i18n/translations'
+import { externalLinks } from './routes'
+
+interface PricingTier {
+  slug: string
+  labelKey: TranslationKey
+  priceKey: TranslationKey
+}
+
+const tiers: PricingTier[] = [
+  {
+    slug: 'standard',
+    labelKey: 'pricing.plan.standard.label',
+    priceKey: 'pricing.plan.standard.price'
+  },
+  {
+    slug: 'creator',
+    labelKey: 'pricing.plan.creator.label',
+    priceKey: 'pricing.plan.creator.price'
+  },
+  {
+    slug: 'pro',
+    labelKey: 'pricing.plan.pro.label',
+    priceKey: 'pricing.plan.pro.price'
+  }
+]
+
+export interface PricingOffer {
+  name: string
+  price: string
+  url: string
+}
+
+export function pricingOffers(locale: Locale): PricingOffer[] {
+  return tiers.flatMap((tier) => {
+    const display = t(tier.priceKey, locale).trim()
+    const match = /^\$(\d+(?:\.\d+)?)$/.exec(display)
+    if (!match) {
+      console.warn(
+        `pricingOffers: skipping tier "${tier.slug}" (${locale}) — price "${display}" is not a plain USD amount`
+      )
+      return []
+    }
+    return [
+      {
+        name: t(tier.labelKey, locale),
+        price: match[1],
+        url: `${externalLinks.cloud}/cloud/subscribe?tier=${tier.slug}&cycle=monthly`
+      }
+    ]
+  })
+}

apps/website/src/config/routes.ts

@@ -14,6 +14,7 @@ const baseRoutes = {
   customers: '/customers',
   demos: '/demos',
   learning: '/learning',
+  vfx: '/learning/vfx',
   termsOfService: '/terms-of-service',
   enterpriseMsa: '/enterprise-msa',
   privacyPolicy: '/privacy-policy',
@@ -82,14 +83,19 @@ export const externalLinks = {
   docsApi: 'https://docs.comfy.org/development/cloud/overview#quick-start',
   docsMcp: 'https://docs.comfy.org/agent-tools/cloud',
   docsSubscription: 'https://docs.comfy.org/support/subscription/subscribing',
+  g2ComfyUi: 'https://www.g2.com/products/comfyui',
   github: 'https://github.com/Comfy-Org/ComfyUI',
   githubInstall: 'https://github.com/Comfy-Org/ComfyUI#installing',
   instagram: 'https://www.instagram.com/comfyui/',
+  linkedin: 'https://www.linkedin.com/company/comfyui',
   mcpSkills: 'https://github.com/Comfy-Org/comfy-skills',
   platform: 'https://platform.comfy.org',
   platformUsage: 'https://platform.comfy.org/profile/usage',
   reddit: 'https://www.reddit.com/r/comfyui/',
   support: 'https://support.comfy.org/hc/en-us',
+  wikidataComfyOrg: 'https://www.wikidata.org/wiki/Q130598554',
+  wikidataComfyUi: 'https://www.wikidata.org/wiki/Q127798647',
+  wikipediaComfyUi: 'https://en.wikipedia.org/wiki/ComfyUI',
   workflows: 'https://comfy.org/workflows',
   x: 'https://x.com/ComfyUI',
   youtube: 'https://www.youtube.com/@ComfyOrg'

apps/website/src/data/clientLogos.ts

@@ -0,0 +1,20 @@
+import type { LogoItem } from '../components/blocks/LogosAll01.vue'
+
+const names = [
+  'Amazon Studios',
+  'Apple',
+  'Autodesk',
+  'Harman',
+  'Hp',
+  'Lucid',
+  'Netflix',
+  'Nike',
+  'Pixomondo',
+  'Tencent',
+  'Ubisoft'
+]
+
+export const clientLogos: readonly LogoItem[] = names.map((name) => ({
+  src: `/icons/clients/${name}.svg`,
+  alt: name
+}))

apps/website/src/data/learningTutorials.ts

@@ -1,28 +1,10 @@
-import type { VideoTrack } from '../components/common/VideoPlayer.vue'
-import type { LocalizedText, TranslationKey } from '../i18n/translations'
-
-export interface LearningTutorial {
-  id: string
-  tags: readonly TranslationKey[]
-  title: LocalizedText
-  videoSrc: string
-  href?: string
-  poster?: string
-  caption?: readonly VideoTrack[]
-  posterTime?: number
-}
-
-const DEFAULT_POSTER_TIME_SECONDS = 1
+import type { Tutorial } from '../components/common/TutorialCard.vue'
+import type { TranslationKey } from '../i18n/translations'
 
 const partnerNodesTag: TranslationKey = 'tags.partnerNodes'
 const imageToVideoTag: TranslationKey = 'tags.imageToVideo'
 
-export const getTutorialPosterSrc = (tutorial: LearningTutorial): string =>
-  tutorial.poster
-    ? tutorial.poster
-    : `${tutorial.videoSrc}#t=${tutorial.posterTime ?? DEFAULT_POSTER_TIME_SECONDS}`
-
-export const learningTutorials: readonly LearningTutorial[] = [
+export const learningTutorials: readonly Tutorial[] = [
   {
     id: 'cleanplate_walkthrough_v03',
     title: { en: 'Cleanplate Walkthrough', 'zh-CN': '净板演练' },

apps/website/src/data/vfxTutorials.ts

@@ -0,0 +1,129 @@
+import type { Tutorial } from '../components/common/TutorialCard.vue'
+import type { TranslationKey } from '../i18n/translations'
+
+const partnerNodesTag: TranslationKey = 'tags.partnerNodes'
+const imageToVideoTag: TranslationKey = 'tags.imageToVideo'
+
+const dougHoman: Tutorial['author'] = {
+  name: 'Doug Homan',
+  avatarSrc: 'https://media.comfy.org/website/authors/doug-hogan.jpeg'
+}
+
+export const vfxTutorials: readonly Tutorial[] = [
+  {
+    id: 'skyreplacement_smaller_v06',
+    title: { en: 'Sky Replacement', 'zh-CN': '天空替换' },
+    videoSrc:
+      'https://media.comfy.org/website/vfx/skyreplacement_smaller_v06.mp4',
+    poster:
+      'https://media.comfy.org/website/vfx/skyreplacement_smaller_v06_thumbnail.jpg',
+    href: 'https://comfy.org/workflows/537cf7f1f745-537cf7f1f745/',
+    caption: [
+      {
+        src: 'https://media.comfy.org/website/vfx/skyreplacement_smaller_v06_vtt.en.vtt',
+        kind: 'captions',
+        srclang: 'en',
+        label: 'English'
+      }
+    ],
+    tags: [partnerNodesTag, imageToVideoTag],
+    author: dougHoman
+  },
+  {
+    id: 'cleanplate_walkthrough_v03',
+    title: { en: 'Cleanplate Walkthrough', 'zh-CN': '净板演练' },
+    videoSrc:
+      'https://media.comfy.org/website/vfx/cleanplate_walkthrough_v03.mp4',
+    poster:
+      'https://media.comfy.org/website/vfx/cleanplate_walkthrough_v03_thumbnail.jpg',
+    caption: [
+      {
+        src: 'https://media.comfy.org/website/vfx/cleanplate_walkthrough_v03_vtt.en.vtt',
+        kind: 'captions',
+        srclang: 'en',
+        label: 'English'
+      }
+    ],
+    href: 'https://comfy.org/workflows/8f2cf0df5da6-8f2cf0df5da6/',
+    tags: [partnerNodesTag, imageToVideoTag],
+    author: dougHoman
+  },
+  {
+    id: 'deaging_workflow_v03',
+    title: { en: 'Deaging Workflow', 'zh-CN': '减龄工作流' },
+    videoSrc: 'https://media.comfy.org/website/vfx/deaging_workflow_v03.mp4',
+    poster:
+      'https://media.comfy.org/website/vfx/deaging_workflow_v03_thumbnail.jpg',
+    href: 'https://comfy.org/workflows/93f286fbc2c8-93f286fbc2c8/',
+    caption: [
+      {
+        src: 'https://media.comfy.org/website/vfx/deaging_workflow_v03_vtt.en.vtt',
+        kind: 'captions',
+        srclang: 'en',
+        label: 'English'
+      }
+    ],
+    tags: [partnerNodesTag, imageToVideoTag],
+    author: dougHoman
+  },
+  {
+    id: 'frame_adjustments_demo_v03',
+    title: { en: 'Frame Adjustments Demo', 'zh-CN': '帧调整演示' },
+    videoSrc:
+      'https://media.comfy.org/website/vfx/frame_adjustments_demo_v03.mp4',
+    poster:
+      'https://media.comfy.org/website/vfx/frame_adjustments_demo_v03_thumbnail.jpg',
+    href: 'https://cloud.comfy.org/?share=7dca0438edf4',
+    caption: [
+      {
+        src: 'https://media.comfy.org/website/vfx/frame_adjustments_demo_v03_vtt.en.vtt',
+        kind: 'captions',
+        srclang: 'en',
+        label: 'English'
+      }
+    ],
+    tags: [partnerNodesTag, imageToVideoTag],
+    author: dougHoman
+  },
+  {
+    id: 'mattes_and_utilities_v03',
+    title: { en: 'Mattes and Utilities', 'zh-CN': '遮罩与实用工具' },
+    videoSrc:
+      'https://media.comfy.org/website/vfx/mattes_and_utilities_v03.mp4',
+    poster:
+      'https://media.comfy.org/website/vfx/mattes_and_utilities_v03_thumbnail.jpg',
+    href: 'https://cloud.comfy.org/?share=be0889296f65',
+    caption: [
+      {
+        src: 'https://media.comfy.org/website/vfx/mattes_and_utilities_v03_vtt.en.vtt',
+        kind: 'captions',
+        srclang: 'en',
+        label: 'English'
+      }
+    ],
+    tags: [partnerNodesTag, imageToVideoTag],
+    author: dougHoman
+  },
+  {
+    id: 'seedance_demo_comfyui_v03',
+    title: {
+      en: 'Seedance Demo (ComfyUI)',
+      'zh-CN': 'Seedance 演示（ComfyUI）'
+    },
+    videoSrc:
+      'https://media.comfy.org/website/vfx/seedance_demo_comfyui_v03.mp4',
+    poster:
+      'https://media.comfy.org/website/vfx/seedance seedance_demo_comfyui_v03_thumbnail.jpg',
+    href: 'https://cloud.comfy.org/?share=ef543bd4a773',
+    caption: [
+      {
+        src: 'https://media.comfy.org/website/vfx/seedance_demo_comfyui_v03_vtt.en.vtt',
+        kind: 'captions',
+        srclang: 'en',
+        label: 'English'
+      }
+    ],
+    tags: [partnerNodesTag, imageToVideoTag],
+    author: dougHoman
+  }
+] as const

apps/website/src/i18n/translations.ts

@@ -1546,6 +1546,42 @@ const translations = {
   },
   'learning.events.getNotified': { en: 'Get Notified', 'zh-CN': '获取通知' },
 
+  // VfxHeroSection
+  'vfx.hero.title': {
+    en: 'ComfyUI for\nVisual Effects',
+    'zh-CN': '面向视觉特效的\nComfyUI'
+  },
+  'vfx.hero.subtitle': {
+    en: 'From ideation to production, ComfyUI gives VFX teams faster workflows and more controlled output — so what ships looks exactly like what you envisioned.',
+    'zh-CN':
+      '从创意到成片，ComfyUI 为视觉特效团队带来更快的工作流与更可控的产出——让最终交付与你的构想分毫不差。'
+  },
+  'vfx.hero.tryNow': {
+    en: 'Try Now',
+    'zh-CN': '立即体验'
+  },
+
+  // VfxTutorialsSection
+  'vfx.tutorials.heading': {
+    en: 'See What’s Possible',
+    'zh-CN': '见证无限可能'
+  },
+  'vfx.tutorials.description': {
+    en: 'From concept, storyboarding to texture generation and compositing references — discover workflows built for every stage of VFX production. New workflows added regularly.',
+    'zh-CN':
+      '从概念设计、分镜脚本到纹理生成与合成参考——探索覆盖视觉特效制作各个环节的工作流。新工作流持续上新。'
+  },
+
+  // VfxCallToActionSection
+  'vfx.cta.heading': {
+    en: 'Bring your ideas to life with ComfyUI, exactly as intended.',
+    'zh-CN': '用 ComfyUI 将创意变为现实，一切尽如所想。'
+  },
+  'vfx.cta.contactSales': {
+    en: 'Contact Sales',
+    'zh-CN': '联系销售'
+  },
+
   // GalleryHeroSection
   'gallery.label': { en: 'GALLERY', 'zh-CN': '画廊' },
   'gallery.heroTitle.before': {
@@ -2190,6 +2226,13 @@ const translations = {
   'nav.ctaCloudPrefix': { en: 'LAUNCH', 'zh-CN': '启动' },
   'nav.ctaCloudCore': { en: 'CLOUD', 'zh-CN': '云端' },
   'nav.home': { en: 'Comfy home', 'zh-CN': 'Comfy 首页' },
+  'breadcrumb.home': { en: 'Home', 'zh-CN': '首页' },
+  'breadcrumb.about': { en: 'About Us', 'zh-CN': '关于我们' },
+  'breadcrumb.contact': { en: 'Contact', 'zh-CN': '联系我们' },
+  'breadcrumb.download': { en: 'Download', 'zh-CN': '下载' },
+  'breadcrumb.careers': { en: 'Careers', 'zh-CN': '招聘' },
+  'breadcrumb.pricing': { en: 'Pricing', 'zh-CN': '定价' },
+  'breadcrumb.supportedNodes': { en: 'Supported Nodes', 'zh-CN': '支持的节点' },
   'nav.menu': { en: 'Menu', 'zh-CN': '菜单' },
   'nav.toggleMenu': { en: 'Toggle menu', 'zh-CN': '切换菜单' },
   'nav.close': { en: 'Close', 'zh-CN': '关闭' },
@@ -4061,7 +4104,6 @@ const translations = {
     en: 'This page is being redesigned. Check back soon.',
     'zh-CN': '此页面正在重新设计中，请稍后再来。'
   },
-  'demos.breadcrumb.home': { en: 'Home', 'zh-CN': '首页' },
   'demos.breadcrumb.demos': { en: 'Demos', 'zh-CN': '演示' },
 
   'customers.story.whatsNext': {
@@ -4157,10 +4199,6 @@ const translations = {
     en: "Run the world's leading AI models in ComfyUI",
     'zh-CN': '在 ComfyUI 中运行世界领先的 AI 模型'
   },
-  'models.breadcrumb.home': {
-    en: 'Home',
-    'zh-CN': '首页'
-  },
   'models.breadcrumb.models': {
     en: 'Supported Models',
     'zh-CN': '支持的模型'

apps/website/src/layouts/BaseLayout.astro

@@ -14,8 +14,10 @@ import {
   createBannerVersion,
   evaluateBannerVisibility
 } from '../utils/banner'
-import { escapeJsonLd } from '../utils/escapeJsonLd'
 import { fetchGitHubStars, formatStarCount } from '../utils/github'
+import { buildPageGraph, pageContext } from '../utils/jsonLd'
+import type { Crumb, JsonLdNode, WebPageType } from '../utils/jsonLd'
+import JsonLdGraph from '../components/common/JsonLdGraph.astro'
 
 interface Props {
   title: string
@@ -23,6 +25,10 @@ interface Props {
   keywords?: string[]
   ogImage?: string
   noindex?: boolean
+  pageType?: WebPageType
+  breadcrumbs?: Crumb[]
+  mainEntityId?: string
+  extraJsonLd?: (JsonLdNode | null | undefined)[]
 }
 
 const {
@@ -31,15 +37,21 @@ const {
   keywords,
   ogImage = 'https://media.comfy.org/website/comfy.webp',
   noindex = false,
+  pageType,
+  breadcrumbs,
+  mainEntityId,
+  extraJsonLd,
 } = Astro.props
 
 const keywordsContent = keywords && keywords.length > 0 ? keywords.join(', ') : undefined
 
-const siteBase = Astro.site ?? 'https://comfy.org'
-const canonicalURL = new URL(Astro.url.pathname, siteBase)
-const ogImageURL = new URL(ogImage, siteBase)
-const rawLocale = Astro.currentLocale ?? 'en'
-const locale: Locale = rawLocale === 'zh-CN' ? 'zh-CN' : 'en'
+const { siteUrl, locale, url } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const canonicalURL = new URL(url)
+const ogImageURL = new URL(ogImage, Astro.site ?? 'https://comfy.org')
 const rawStars = await fetchGitHubStars('Comfy-Org', 'ComfyUI')
 const githubStars = rawStars ? formatStarCount(rawStars) : ''
 
@@ -58,28 +70,21 @@ const bannerVersion = createBannerVersion(bannerData, locale)
 const gtmId = 'GTM-NP9JM6K7'
 const gtmEnabled = import.meta.env.PROD
 
-const organizationJsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'Organization',
-  name: 'Comfy Org',
-  url: 'https://comfy.org',
-  logo: 'https://comfy.org/icons/logomark.svg',
-  sameAs: [
-    'https://github.com/comfyanonymous/ComfyUI',
-    'https://discord.gg/comfyorg',
-    'https://x.com/comaboratory',
-    'https://reddit.com/r/comfyui',
-    'https://linkedin.com/company/comfyorg',
-    'https://instagram.com/comfyorg',
-  ],
-}
-
-const websiteJsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'WebSite',
-  name: 'Comfy',
-  url: 'https://comfy.org',
-}
+const structuredData = noindex
+  ? undefined
+  : buildPageGraph(
+      { siteUrl, locale },
+      {
+        url,
+        name: title,
+        description,
+        imageUrl: ogImageURL.href,
+        type: pageType,
+        crumbs: breadcrumbs,
+        mainEntityId,
+      },
+      ...(extraJsonLd ?? []),
+    )
 ---
 
 <!doctype html>
@@ -121,10 +126,7 @@ const websiteJsonLd = {
     <meta name="twitter:image" content={ogImageURL.href} />
 
     <!-- Structured Data -->
-    <script is:inline type="application/ld+json" set:html={escapeJsonLd(organizationJsonLd)} />
-    <script is:inline type="application/ld+json" set:html={escapeJsonLd(websiteJsonLd)} />
-    <slot name="head" />
-
+    {structuredData && <JsonLdGraph graph={structuredData} />}
     <slot name="head" />
 
     <!-- Google Tag Manager -->
@@ -144,7 +146,6 @@ const websiteJsonLd = {
     )}
 
     <ClientRouter />
-    <slot name="head" />
 
     <!-- Hide an already-dismissed announcement banner before first paint (no flash/shift). -->
     {bannerVisible && (

apps/website/src/pages/about.astro

@@ -5,9 +5,25 @@ import StorySection from '../components/about/StorySection.vue'
 import OurValuesSection from '../components/about/OurValuesSection.vue'
 import ValuesSection from '../components/about/ValuesSection.vue'
 import CareersSection from '../components/about/CareersSection.vue'
+import { t } from '../i18n/translations'
+import { absoluteUrl, organizationId, pageContext } from '../utils/jsonLd'
+
+const { siteUrl, locale } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
 ---
 
-<BaseLayout title="About Us — Comfy">
+<BaseLayout
+  title="About Us — Comfy"
+  pageType="AboutPage"
+  mainEntityId={organizationId(siteUrl)}
+  breadcrumbs={[
+    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
+    { name: t('breadcrumb.about', locale) },
+  ]}
+>
   <HeroSection client:load />
   <StorySection />
   <OurValuesSection />

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

@@ -9,34 +9,36 @@ import HeroSection from '../../templates/affiliate/HeroSection.vue'
 import HowItWorksSection from '../../templates/affiliate/HowItWorksSection.vue'
 import { affiliateFaqs } from '../../data/affiliateFaq'
 import { t } from '../../i18n/translations'
+import type { JsonLdNode } from '../../utils/jsonLd'
+import { absoluteUrl, jsonLdId, pageContext } from '../../utils/jsonLd'
 
-const locale = 'en' as const
-
-const faqJsonLd = {
-  '@context': 'https://schema.org',
+const pageTitle = t('affiliate.page.title', 'en')
+const pageDescription = t('affiliate.page.description', 'en')
+const { locale, url } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const faqPage: JsonLdNode = {
   '@type': 'FAQPage',
+  '@id': jsonLdId(url, 'faq'),
   mainEntity: affiliateFaqs.map((faq) => ({
     '@type': 'Question',
     name: faq.question[locale],
-    acceptedAnswer: {
-      '@type': 'Answer',
-      text: faq.answer[locale]
-    }
-  }))
+    acceptedAnswer: { '@type': 'Answer', text: faq.answer[locale] },
+  })),
 }
 ---
 
 <BaseLayout
-  title={t('affiliate.page.title', locale)}
-  description={t('affiliate.page.description', locale)}
+  title={pageTitle}
+  description={pageDescription}
+  breadcrumbs={[
+    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
+    { name: pageTitle },
+  ]}
+  extraJsonLd={[faqPage]}
 >
-  <Fragment slot="head">
-    <script
-      is:inline
-      type="application/ld+json"
-      set:html={JSON.stringify(faqJsonLd)}
-    />
-  </Fragment>
 
   <HeroSection />
   <HowItWorksSection />

apps/website/src/pages/careers.astro

@@ -7,6 +7,13 @@ import TeamPhotosSection from '../components/careers/TeamPhotosSection.vue'
 import FAQSection from '../components/common/FAQSection.vue'
 import { fetchRolesForBuild } from '../utils/ashby'
 import { reportAshbyOutcome } from '../utils/ashby.ci'
+import { t } from '../i18n/translations'
+import {
+  absoluteUrl,
+  itemListNode,
+  jsonLdId,
+  pageContext,
+} from '../utils/jsonLd'
 
 const outcome = await fetchRolesForBuild()
 reportAshbyOutcome(outcome)
@@ -19,11 +26,31 @@ if (outcome.status === 'failed') {
 }
 
 const departments = outcome.snapshot.departments
+
+const { siteUrl, locale, url } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const roles = itemListNode(
+  url,
+  t('breadcrumb.careers', locale),
+  departments.flatMap((department) =>
+    department.roles.map((role) => ({ name: role.title, url: role.jobUrl })),
+  ),
+)
 ---
 
 <BaseLayout
   title="Careers — Comfy"
   description="Join the team building the operating system for generative AI. Open roles in engineering, design, marketing, and more."
+  pageType="CollectionPage"
+  mainEntityId={jsonLdId(url, 'itemlist')}
+  breadcrumbs={[
+    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
+    { name: t('breadcrumb.careers', locale) },
+  ]}
+  extraJsonLd={[roles]}
 >
   <HeroSection />
   <RolesSection departments={departments} client:visible />

apps/website/src/pages/cloud/pricing.astro

@@ -2,9 +2,41 @@
 import BaseLayout from '../../layouts/BaseLayout.astro'
 import PriceSection from '../../components/pricing/PriceSection.vue'
 import WhatsIncludedSection from '../../components/pricing/WhatsIncludedSection.vue'
+import { pricingOffers } from '../../config/pricing'
+import { t } from '../../i18n/translations'
+import {
+  absoluteUrl,
+  jsonLdId,
+  pageContext,
+  productNode,
+} from '../../utils/jsonLd'
+
+const { siteUrl, locale, url } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const productId = jsonLdId(url, 'product')
 ---
 
-<BaseLayout title="Pricing — Comfy Cloud">
+<BaseLayout
+  title="Pricing — Comfy Cloud"
+  mainEntityId={productId}
+  breadcrumbs={[
+    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
+    { name: 'Comfy Cloud', url: absoluteUrl(Astro.site, '/cloud') },
+    { name: t('breadcrumb.pricing', locale) },
+  ]}
+  extraJsonLd={[
+    productNode({
+      siteUrl,
+      id: productId,
+      name: 'Comfy Cloud',
+      url,
+      offers: pricingOffers(locale),
+    }),
+  ]}
+>
   <PriceSection client:load />
   <WhatsIncludedSection />
 </BaseLayout>

apps/website/src/pages/cloud/supported-nodes.astro

@@ -4,39 +4,44 @@ import HeroSection from '../../components/cloud-nodes/HeroSection.vue'
 import PackGridSection from '../../components/cloud-nodes/PackGridSection.vue'
 import { t } from '../../i18n/translations'
 import { loadPacksForBuild } from '../../utils/cloudNodes.build'
-import { escapeJsonLd } from '../../utils/escapeJsonLd'
+import {
+  absoluteUrl,
+  itemListNode,
+  jsonLdId,
+  pageContext,
+} from '../../utils/jsonLd'
 
 const packs = await loadPacksForBuild()
 
-const siteBase = Astro.site ?? new URL('https://comfy.org')
-const pageUrl = new URL('/cloud/supported-nodes', siteBase).href
-
-const itemListJsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'ItemList',
-  name: 'Custom-node packs supported on Comfy Cloud',
-  url: pageUrl,
-  numberOfItems: packs.length,
-  itemListElement: packs.map((pack, index) => ({
-    '@type': 'ListItem',
-    position: index + 1,
-    url: new URL(`/cloud/supported-nodes/${pack.id}`, siteBase).href,
+const title = t('cloudNodes.meta.title', 'en')
+const description = t('cloudNodes.meta.description', 'en')
+const { url, locale } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const packList = itemListNode(
+  url,
+  title,
+  packs.map((pack) => ({
     name: pack.displayName,
-    image: pack.bannerUrl || pack.iconUrl
-  }))
-}
+    url: absoluteUrl(Astro.site, `/cloud/supported-nodes/${pack.id}`),
+  })),
+)
 ---
 
 <BaseLayout
-  title={t('cloudNodes.meta.title', 'en')}
-  description={t('cloudNodes.meta.description', 'en')}
+  title={title}
+  description={description}
+  pageType="CollectionPage"
+  mainEntityId={jsonLdId(url, 'itemlist')}
+  breadcrumbs={[
+    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
+    { name: 'Comfy Cloud', url: absoluteUrl(Astro.site, '/cloud') },
+    { name: t('breadcrumb.supportedNodes', locale) },
+  ]}
+  extraJsonLd={[packList]}
 >
-  <script
-    is:inline
-    slot="head"
-    type="application/ld+json"
-    set:html={escapeJsonLd(itemListJsonLd)}
-  />
   <HeroSection client:visible />
   <PackGridSection packs={packs} client:visible />
 </BaseLayout>

apps/website/src/pages/cloud/supported-nodes/[pack].astro

@@ -7,7 +7,12 @@ import PackDetail from '../../../components/cloud-nodes/PackDetail.vue'
 import BaseLayout from '../../../layouts/BaseLayout.astro'
 import { t } from '../../../i18n/translations'
 import { loadPacksForBuild } from '../../../utils/cloudNodes.build'
-import { escapeJsonLd } from '../../../utils/escapeJsonLd'
+import {
+  absoluteUrl,
+  jsonLdId,
+  pageContext,
+  softwareApplicationNode,
+} from '../../../utils/jsonLd'
 
 export const getStaticPaths: GetStaticPaths = async () => {
   const packs = await loadPacksForBuild()
@@ -29,35 +34,45 @@ const metaDescription = t('cloudNodes.detail.metaDescription', 'en')
   .replace('{nodeCount}', String(pack.nodes.length))
   .replace('{description}', description)
 
-const siteBase = Astro.site ?? new URL('https://comfy.org')
-const pageUrl = new URL(`/cloud/supported-nodes/${pack.id}`, siteBase).href
-
-const softwareJsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'SoftwareApplication',
+const { siteUrl, locale, url } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const softwareId = jsonLdId(url, 'software')
+const software = softwareApplicationNode({
+  siteUrl,
+  id: softwareId,
   name: pack.displayName,
+  url,
   applicationCategory: 'DeveloperApplication',
   applicationSubCategory: 'ComfyUI custom-node pack',
   operatingSystem: 'Comfy Cloud (managed)',
-  url: pageUrl,
-  description,
+  description: pack.description || undefined,
   image: pack.bannerUrl || pack.iconUrl,
   softwareVersion: pack.latestVersion,
   license: pack.license,
   codeRepository: pack.repoUrl,
-  author: pack.publisher?.name
-    ? { '@type': 'Person', name: pack.publisher.name }
-    : undefined,
-  offers: { '@type': 'Offer', price: 0, priceCurrency: 'USD' }
-}
+  authorName: pack.publisher?.name,
+  isFree: true,
+})
 ---
 
-<BaseLayout title={title} description={metaDescription} ogImage={pack.bannerUrl}>
-  <script
-    is:inline
-    slot="head"
-    type="application/ld+json"
-    set:html={escapeJsonLd(softwareJsonLd)}
-  />
+<BaseLayout
+  title={title}
+  description={metaDescription}
+  ogImage={pack.bannerUrl}
+  mainEntityId={softwareId}
+  breadcrumbs={[
+    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
+    { name: 'Comfy Cloud', url: absoluteUrl(Astro.site, '/cloud') },
+    {
+      name: t('breadcrumb.supportedNodes', locale),
+      url: absoluteUrl(Astro.site, '/cloud/supported-nodes'),
+    },
+    { name: pack.displayName },
+  ]}
+  extraJsonLd={[software]}
+>
   <PackDetail pack={pack} />
 </BaseLayout>

apps/website/src/pages/contact.astro

@@ -2,9 +2,25 @@
 import BaseLayout from '../layouts/BaseLayout.astro'
 import FormSection from '../components/contact/FormSection.vue'
 import SocialProofBarSection from '../components/common/SocialProofBarSection.vue'
+import { t } from '../i18n/translations'
+import { absoluteUrl, organizationId, pageContext } from '../utils/jsonLd'
+
+const { siteUrl, locale } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
 ---
 
-<BaseLayout title="Contact — Comfy">
+<BaseLayout
+  title="Contact — Comfy"
+  pageType="ContactPage"
+  mainEntityId={organizationId(siteUrl)}
+  breadcrumbs={[
+    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
+    { name: t('breadcrumb.contact', locale) },
+  ]}
+>
   <FormSection client:load />
   <SocialProofBarSection />
 </BaseLayout>

apps/website/src/pages/demos/[slug].astro

@@ -7,6 +7,13 @@ import DemoTranscript from '../../components/demos/DemoTranscript.vue'
 import DemoNavSection from '../../components/demos/DemoNavSection.vue'
 import { demos, getDemoBySlug, getNextDemo } from '../../config/demos'
 import { t } from '../../i18n/translations'
+import type { JsonLdNode } from '../../utils/jsonLd'
+import {
+  absoluteUrl,
+  jsonLdId,
+  organizationId,
+  pageContext,
+} from '../../utils/jsonLd'
 
 export const getStaticPaths: GetStaticPaths = () => {
   return demos.map((demo) => ({
@@ -19,68 +26,34 @@ const demo = getDemoBySlug(slug as string)!
 const nextDemo = getNextDemo(slug as string)
 const title = t(demo.title)
 const description = t(demo.description)
-const canonicalURL = new URL(`/demos/${demo.slug}`, Astro.site)
 
-const howToJsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'HowTo',
-  name: title,
-  description,
-  image: new URL(demo.ogImage, Astro.site).href,
-  totalTime: demo.durationIso,
-  datePublished: demo.publishedDate,
-  dateModified: demo.modifiedDate,
-  author: {
-    '@type': 'Organization',
-    name: 'Comfy Org',
-    url: 'https://comfy.org'
-  }
-}
-
-const learningResourceJsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'LearningResource',
-  name: title,
-  description,
-  learningResourceType: 'interactive tutorial',
-  interactivityType: 'active',
-  educationalLevel: demo.difficulty === 'beginner'
+const { siteUrl, locale, url } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const educationalLevel =
+  demo.difficulty === 'beginner'
     ? 'Beginner'
     : demo.difficulty === 'intermediate'
       ? 'Intermediate'
-      : 'Advanced',
-  url: canonicalURL.href,
+      : 'Advanced'
+const learningId = jsonLdId(url, 'learning')
+const learningResource: JsonLdNode = {
+  '@type': 'LearningResource',
+  '@id': learningId,
+  name: title,
+  description,
+  url,
+  image: new URL(demo.ogImage, Astro.site).href,
+  learningResourceType: 'interactive tutorial',
+  interactivityType: 'active',
+  educationalLevel,
+  timeRequired: demo.durationIso,
   datePublished: demo.publishedDate,
   dateModified: demo.modifiedDate,
-  author: {
-    '@type': 'Organization',
-    name: 'Comfy Org',
-    url: 'https://comfy.org'
-  }
-}
-
-const breadcrumbJsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'BreadcrumbList',
-  itemListElement: [
-    {
-      '@type': 'ListItem',
-      position: 1,
-      name: t('demos.breadcrumb.home'),
-      item: 'https://comfy.org'
-    },
-    {
-      '@type': 'ListItem',
-      position: 2,
-      name: t('demos.breadcrumb.demos'),
-      item: 'https://comfy.org/demos'
-    },
-    {
-      '@type': 'ListItem',
-      position: 3,
-      name: title
-    }
-  ]
+  isPartOf: { '@id': jsonLdId(url, 'webpage') },
+  author: { '@id': organizationId(siteUrl) },
 }
 ---
 
@@ -88,25 +61,20 @@ const breadcrumbJsonLd = {
   title={`${title} — Comfy`}
   description={description}
   ogImage={demo.ogImage}
+  mainEntityId={learningId}
+  breadcrumbs={[
+    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
+    {
+      name: t('demos.breadcrumb.demos', locale),
+      url: absoluteUrl(Astro.site, '/demos'),
+    },
+    { name: title },
+  ]}
+  extraJsonLd={[learningResource]}
 >
   <Fragment slot="head">
     <meta property="article:published_time" content={demo.publishedDate} />
     <meta property="article:modified_time" content={demo.modifiedDate} />
-    <script
-      is:inline
-      type="application/ld+json"
-      set:html={JSON.stringify(howToJsonLd)}
-    />
-    <script
-      is:inline
-      type="application/ld+json"
-      set:html={JSON.stringify(learningResourceJsonLd)}
-    />
-    <script
-      is:inline
-      type="application/ld+json"
-      set:html={JSON.stringify(breadcrumbJsonLd)}
-    />
     <link rel="preconnect" href="https://demo.arcade.software" />
   </Fragment>
 

apps/website/src/pages/download.astro

@@ -8,11 +8,29 @@ import EcoSystemSection from '../components/product/local/EcoSystemSection.vue'
 import ProductCardsSection from '../components/product/local/ProductCardsSection.vue'
 import FAQSection from '../components/product/local/FAQSection.vue'
 import { t } from '../i18n/translations'
+import {
+  absoluteUrl,
+  comfyUiApplicationNode,
+  comfyUiSoftwareId,
+  pageContext,
+} from '../utils/jsonLd'
+
+const { siteUrl, locale } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
 ---
 
 <BaseLayout
   title="Download Comfy Desktop — Run AI on Your Hardware"
   description={t('download.hero.subtitle', 'en')}
+  mainEntityId={comfyUiSoftwareId(siteUrl)}
+  breadcrumbs={[
+    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
+    { name: t('breadcrumb.download', locale) },
+  ]}
+  extraJsonLd={[comfyUiApplicationNode(siteUrl)]}
   keywords={['comfyui app', 'comfyui desktop app', 'comfyui desktop', 'comfy ui application', 'comfyui download', 'download comfyui', 'comfyui windows', 'comfyui mac', 'comfyui linux']}
 >
   <CloudBannerSection />

apps/website/src/pages/index.astro

@@ -9,11 +9,28 @@ import CaseStudySpotlightSection from "../components/home/CaseStudySpotlightSect
 import GetStartedSection from "../components/home/GetStartedSection.vue";
 import BuildWhatSection from "../components/home/BuildWhatSection.vue";
 import { t } from "../i18n/translations";
+import {
+  comfyUiApplicationNode,
+  comfyUiSoftwareId,
+  comfyUiSourceCodeNode,
+  pageContext,
+} from "../utils/jsonLd";
+
+const { siteUrl } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+);
 ---
 
 <BaseLayout
   title="Comfy — Professional Control of Visual AI"
   description={t("hero.subtitle", "en")}
+  mainEntityId={comfyUiSoftwareId(siteUrl)}
+  extraJsonLd={[
+    comfyUiApplicationNode(siteUrl),
+    comfyUiSourceCodeNode(siteUrl),
+  ]}
   keywords={[
     "comfyui app",
     "comfyui web app",

apps/website/src/pages/learning.astro

@@ -1,27 +0,0 @@
----
-import BaseLayout from '../layouts/BaseLayout.astro'
-import HeroSection from '../components/learning/HeroSection.vue'
-import FeaturedWorkflowSection from '../components/learning/FeaturedWorkflowSection.vue'
-import TutorialsSection from '../components/learning/TutorialsSection.vue'
-import CallToActionSection from '../components/common/CallToActionSection.vue'
-// import EventsSection from '../components/common/EventsSection.vue'
-import { getRoutes } from '../config/routes'
-import { externalLinks } from '../config/routes'
-// import { learningEvents } from '../data/events'
-
-const routes = getRoutes('en')
----
-
-<BaseLayout title="Learning — Comfy">
-  <HeroSection client:load />
-  <FeaturedWorkflowSection client:visible />
-  <TutorialsSection client:visible />
-  <CallToActionSection
-    headingKey="learning.cta.heading"
-    primaryLabelKey="learning.cta.contactSales"
-    primaryHref={routes.contact}
-    secondaryLabelKey="cta.tryWorkflow"
-    secondaryHref={externalLinks.workflows}
-    client:visible
-  />
-</BaseLayout>

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

@@ -4,19 +4,19 @@ import HeroSection from '../../components/learning/HeroSection.vue'
 import FeaturedWorkflowSection from '../../components/learning/FeaturedWorkflowSection.vue'
 import TutorialsSection from '../../components/learning/TutorialsSection.vue'
 import CallToActionSection from '../../components/common/CallToActionSection.vue'
-import EventsSection from '../../components/common/EventsSection.vue'
-import { getRoutes, externalLinks } from '../../config/routes'
-import { learningEvents } from '../../data/events'
+// import EventsSection from '../../components/common/EventsSection.vue'
+import { getRoutes } from '../../config/routes'
+import { externalLinks } from '../../config/routes'
+// import { learningEvents } from '../../data/events'
 
-const routes = getRoutes('zh-CN')
+const routes = getRoutes('en')
 ---
 
-<BaseLayout title="学习 — Comfy">
-  <HeroSection locale="zh-CN" client:load />
-  <FeaturedWorkflowSection locale="zh-CN" client:visible />
-  <TutorialsSection locale="zh-CN" client:visible />
+<BaseLayout title="Learning — Comfy">
+  <HeroSection client:load />
+  <FeaturedWorkflowSection client:visible />
+  <TutorialsSection client:visible />
   <CallToActionSection
-    locale="zh-CN"
     headingKey="learning.cta.heading"
     primaryLabelKey="learning.cta.contactSales"
     primaryHref={routes.contact}

apps/website/src/pages/learning/vfx.astro

@@ -0,0 +1,25 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro'
+import HeroSection from '../../components/vfx/HeroSection.vue'
+import TutorialsSection from '../../components/vfx/TutorialsSection.vue'
+import SocialProofBarSection from '../../components/common/SocialProofBarSection.vue'
+import CallToActionSection from '../../components/common/CallToActionSection.vue'
+import { getRoutes } from '../../config/routes'
+import { externalLinks } from '../../config/routes'
+
+const routes = getRoutes('en')
+---
+
+<BaseLayout title="VFX — Comfy">
+  <HeroSection client:load />
+  <SocialProofBarSection client:visible />
+  <TutorialsSection client:visible />
+  <CallToActionSection
+    headingKey="vfx.cta.heading"
+    primaryLabelKey="vfx.cta.contactSales"
+    primaryHref={routes.contact}
+    secondaryLabelKey="cta.tryWorkflow"
+    secondaryHref={externalLinks.workflows}
+    client:visible
+  />
+</BaseLayout>

apps/website/src/pages/p/supported-models/[slug].astro

@@ -4,6 +4,13 @@ import BaseLayout from '../../../layouts/BaseLayout.astro'
 import ModelHeroSection from '../../../components/models/ModelHeroSection.vue'
 import { models, getModelBySlug } from '../../../config/models'
 import { t } from '../../../i18n/translations'
+import type { JsonLdNode } from '../../../utils/jsonLd'
+import {
+  absoluteUrl,
+  jsonLdId,
+  pageContext,
+  softwareApplicationNode,
+} from '../../../utils/jsonLd'
 
 export const getStaticPaths: GetStaticPaths = () => {
   return models.map((model) => ({
@@ -19,7 +26,6 @@ if (model.canonicalSlug) {
 }
 
 const { displayName } = model
-const canonicalURL = new URL(`/p/supported-models/${model.slug}`, Astro.site)
 
 const dirDescriptions: Record<string, string> = {
   diffusion_models: 'a diffusion model that generates images or video from text and image prompts',
@@ -40,55 +46,31 @@ const dirDescriptions: Record<string, string> = {
 const dirDesc = dirDescriptions[model.directory] ?? 'an AI model'
 const whatIsDescription = `${displayName} is ${dirDesc}. You can run it locally in ComfyUI with full control over every parameter, or access it through Comfy Cloud. ComfyUI's node-based workflow editor lets you connect ${displayName} with ControlNets, LoRAs, upscalers, and custom nodes to build any pipeline you need. There are ${model.workflowCount} community workflow templates using ${displayName} on Comfy Hub, ready to load and customize.`
 
-const softwareAppJsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'SoftwareApplication',
+const pageTitle = `${displayName} in ComfyUI`
+const pageDescription = `Run ${displayName} in ComfyUI with full parameter control. ${model.workflowCount} community workflow templates, step-by-step tutorials, and free local inference.`
+
+const { siteUrl, locale, url } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const softwareId = jsonLdId(url, 'software')
+const software = softwareApplicationNode({
+  siteUrl,
+  id: softwareId,
   name: displayName,
+  url,
   applicationCategory: 'MultimediaApplication',
   operatingSystem: 'Any',
-  url: canonicalURL.href,
-  author: {
-    '@type': 'Organization',
-    name: 'Comfy Org',
-    url: 'https://comfy.org'
-  }
-}
-
-const breadcrumbJsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'BreadcrumbList',
-  itemListElement: [
-    {
-      '@type': 'ListItem',
-      position: 1,
-      name: t('models.breadcrumb.home'),
-      item: 'https://comfy.org'
-    },
-    {
-      '@type': 'ListItem',
-      position: 2,
-      name: t('models.breadcrumb.models'),
-      item: 'https://comfy.org/p/supported-models'
-    },
-    {
-      '@type': 'ListItem',
-      position: 3,
-      name: displayName
-    }
-  ]
-}
-
-const faqJsonLd = {
-  '@context': 'https://schema.org',
+})
+const faqPage: JsonLdNode = {
   '@type': 'FAQPage',
+  '@id': jsonLdId(url, 'faq'),
   mainEntity: [
     {
       '@type': 'Question',
       name: `What is ${displayName}?`,
-      acceptedAnswer: {
-        '@type': 'Answer',
-        text: whatIsDescription
-      }
+      acceptedAnswer: { '@type': 'Answer', text: whatIsDescription },
     },
     {
       '@type': 'Question',
@@ -97,54 +79,44 @@ const faqJsonLd = {
         '@type': 'Answer',
         text: model.docsUrl
           ? `Follow the step-by-step tutorial at ${model.docsUrl}. You can also load any of the ${model.workflowCount} community workflow templates that use ${displayName} directly in ComfyUI.`
-          : `Open ComfyUI and browse the ${model.workflowCount} community workflow templates that use ${displayName}. Load one as a starting point, then customize the nodes and parameters to fit your use case.`
-      }
+          : `Open ComfyUI and browse the ${model.workflowCount} community workflow templates that use ${displayName}. Load one as a starting point, then customize the nodes and parameters to fit your use case.`,
+      },
     },
     {
       '@type': 'Question',
       name: `How many ComfyUI workflows use ${displayName}?`,
       acceptedAnswer: {
         '@type': 'Answer',
-        text: `There are ${model.workflowCount} community workflow templates that use ${displayName} on Comfy Hub. Each template is ready to run in ComfyUI and can be customized to suit your project.`
-      }
+        text: `There are ${model.workflowCount} community workflow templates that use ${displayName} on Comfy Hub. Each template is ready to run in ComfyUI and can be customized to suit your project.`,
+      },
     },
     {
       '@type': 'Question',
       name: `Is ${displayName} free to use in ComfyUI?`,
       acceptedAnswer: {
         '@type': 'Answer',
-        text: `ComfyUI is free and open source. ${model.huggingFaceUrl ? `${displayName} weights are available to download from Hugging Face.` : `${displayName} is available as a cloud API through Comfy Cloud.`} You only pay for compute when running on Comfy Cloud; local inference on your own hardware is always free.`
-      }
-    }
-  ]
+        text: `ComfyUI is free and open source. ${model.huggingFaceUrl ? `${displayName} weights are available to download from Hugging Face.` : `${displayName} is available as a cloud API through Comfy Cloud.`} You only pay for compute when running on Comfy Cloud; local inference on your own hardware is always free.`,
+      },
+    },
+  ],
 }
-
-const pageTitle = `${displayName} in ComfyUI`
-const pageDescription = `Run ${displayName} in ComfyUI with full parameter control. ${model.workflowCount} community workflow templates, step-by-step tutorials, and free local inference.`
 ---
 
 <BaseLayout
   title={`${pageTitle} — Comfy`}
   description={pageDescription}
   ogImage={model.thumbnailUrl}
+  mainEntityId={softwareId}
+  breadcrumbs={[
+    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
+    {
+      name: t('models.breadcrumb.models', locale),
+      url: absoluteUrl(Astro.site, '/p/supported-models'),
+    },
+    { name: displayName },
+  ]}
+  extraJsonLd={[software, faqPage]}
 >
-  <Fragment slot="head">
-    <script
-      is:inline
-      type="application/ld+json"
-      set:html={JSON.stringify(softwareAppJsonLd)}
-    />
-    <script
-      is:inline
-      type="application/ld+json"
-      set:html={JSON.stringify(breadcrumbJsonLd)}
-    />
-    <script
-      is:inline
-      type="application/ld+json"
-      set:html={JSON.stringify(faqJsonLd)}
-    />
-  </Fragment>
 
   <ModelHeroSection
     displayName={displayName}

apps/website/src/pages/p/supported-models/index.astro

@@ -2,10 +2,29 @@
 import BaseLayout from '../../../layouts/BaseLayout.astro'
 import { models } from '../../../config/models'
 import { t } from '../../../i18n/translations'
+import {
+  absoluteUrl,
+  itemListNode,
+  jsonLdId,
+  pageContext,
+} from '../../../utils/jsonLd'
 
 const title = t('models.index.title')
 const subtitle = t('models.index.subtitle')
 
+const { url, locale } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const modelList = itemListNode(
+  url,
+  title,
+  models.map((model) => ({
+    url: absoluteUrl(Astro.site, `/p/supported-models/${model.slug}`),
+  })),
+)
+
 const dirLabel: Record<string, string> = {
   diffusion_models: 'Diffusion',
   checkpoints: 'Checkpoint',
@@ -26,6 +45,13 @@ const dirLabel: Record<string, string> = {
 <BaseLayout
   title={`${title} — Comfy`}
   description={subtitle}
+  pageType="CollectionPage"
+  mainEntityId={jsonLdId(url, 'itemlist')}
+  breadcrumbs={[
+    { name: t('breadcrumb.home', locale), url: absoluteUrl(Astro.site, '/') },
+    { name: title },
+  ]}
+  extraJsonLd={[modelList]}
 >
   <div class="mx-auto max-w-7xl px-6 py-16 lg:px-8 lg:py-24">
     <header class="mb-12">

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

@@ -5,9 +5,29 @@ import StorySection from '../../components/about/StorySection.vue'
 import OurValuesSection from '../../components/about/OurValuesSection.vue'
 import ValuesSection from '../../components/about/ValuesSection.vue'
 import CareersSection from '../../components/about/CareersSection.vue'
+import { t } from '../../i18n/translations'
+import { absoluteUrl, organizationId, pageContext } from '../../utils/jsonLd'
+
+const { siteUrl, locale } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
 ---
 
-<BaseLayout title="关于我们 — Comfy" description="了解 ComfyUI 背后的团队和使命——开源的生成式 AI 平台。">
+<BaseLayout
+  title="关于我们 — Comfy"
+  description="了解 ComfyUI 背后的团队和使命——开源的生成式 AI 平台。"
+  pageType="AboutPage"
+  mainEntityId={organizationId(siteUrl)}
+  breadcrumbs={[
+    {
+      name: t('breadcrumb.home', locale),
+      url: absoluteUrl(Astro.site, '/zh-CN'),
+    },
+    { name: t('breadcrumb.about', locale) },
+  ]}
+>
   <HeroSection locale="zh-CN" client:load />
   <StorySection locale="zh-CN" />
   <OurValuesSection locale="zh-CN" />

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

@@ -7,6 +7,13 @@ import TeamPhotosSection from '../../components/careers/TeamPhotosSection.vue'
 import FAQSection from '../../components/common/FAQSection.vue'
 import { fetchRolesForBuild } from '../../utils/ashby'
 import { reportAshbyOutcome } from '../../utils/ashby.ci'
+import { t } from '../../i18n/translations'
+import {
+  absoluteUrl,
+  itemListNode,
+  jsonLdId,
+  pageContext,
+} from '../../utils/jsonLd'
 
 const outcome = await fetchRolesForBuild()
 reportAshbyOutcome(outcome)
@@ -19,11 +26,34 @@ if (outcome.status === 'failed') {
 }
 
 const departments = outcome.snapshot.departments
+
+const { siteUrl, locale, url } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const roles = itemListNode(
+  url,
+  t('breadcrumb.careers', locale),
+  departments.flatMap((department) =>
+    department.roles.map((role) => ({ name: role.title, url: role.jobUrl })),
+  ),
+)
 ---
 
 <BaseLayout
   title="招聘 — Comfy"
   description="加入构建生成式 AI 操作系统的团队。工程、设计、市场营销等岗位开放招聘中。"
+  pageType="CollectionPage"
+  mainEntityId={jsonLdId(url, 'itemlist')}
+  breadcrumbs={[
+    {
+      name: t('breadcrumb.home', locale),
+      url: absoluteUrl(Astro.site, '/zh-CN'),
+    },
+    { name: t('breadcrumb.careers', locale) },
+  ]}
+  extraJsonLd={[roles]}
 >
   <HeroSection locale="zh-CN" />
   <RolesSection locale="zh-CN" departments={departments} client:visible />

apps/website/src/pages/zh-CN/cloud/pricing.astro

@@ -2,9 +2,44 @@
 import BaseLayout from '../../../layouts/BaseLayout.astro'
 import PriceSection from '../../../components/pricing/PriceSection.vue'
 import WhatsIncludedSection from '../../../components/pricing/WhatsIncludedSection.vue'
+import { pricingOffers } from '../../../config/pricing'
+import { t } from '../../../i18n/translations'
+import {
+  absoluteUrl,
+  jsonLdId,
+  pageContext,
+  productNode,
+} from '../../../utils/jsonLd'
+
+const { siteUrl, locale, url } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const productId = jsonLdId(url, 'product')
 ---
 
-<BaseLayout title="定价 — Comfy Cloud">
+<BaseLayout
+  title="定价 — Comfy Cloud"
+  mainEntityId={productId}
+  breadcrumbs={[
+    {
+      name: t('breadcrumb.home', locale),
+      url: absoluteUrl(Astro.site, '/zh-CN'),
+    },
+    { name: 'Comfy Cloud', url: absoluteUrl(Astro.site, '/zh-CN/cloud') },
+    { name: t('breadcrumb.pricing', locale) },
+  ]}
+  extraJsonLd={[
+    productNode({
+      siteUrl,
+      id: productId,
+      name: 'Comfy Cloud',
+      url,
+      offers: pricingOffers(locale),
+    }),
+  ]}
+>
   <PriceSection locale="zh-CN" client:load />
   <WhatsIncludedSection locale="zh-CN" />
 </BaseLayout>

apps/website/src/pages/zh-CN/cloud/supported-nodes.astro

@@ -4,39 +4,47 @@ import HeroSection from '../../../components/cloud-nodes/HeroSection.vue'
 import PackGridSection from '../../../components/cloud-nodes/PackGridSection.vue'
 import { t } from '../../../i18n/translations'
 import { loadPacksForBuild } from '../../../utils/cloudNodes.build'
-import { escapeJsonLd } from '../../../utils/escapeJsonLd'
+import {
+  absoluteUrl,
+  itemListNode,
+  jsonLdId,
+  pageContext,
+} from '../../../utils/jsonLd'
 
 const packs = await loadPacksForBuild()
 
-const siteBase = Astro.site ?? new URL('https://comfy.org')
-const pageUrl = new URL('/zh-CN/cloud/supported-nodes', siteBase).href
-
-const itemListJsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'ItemList',
-  name: 'Comfy Cloud 支持的自定义节点包',
-  url: pageUrl,
-  numberOfItems: packs.length,
-  itemListElement: packs.map((pack, index) => ({
-    '@type': 'ListItem',
-    position: index + 1,
-    url: new URL(`/zh-CN/cloud/supported-nodes/${pack.id}`, siteBase).href,
+const title = t('cloudNodes.meta.title', 'zh-CN')
+const description = t('cloudNodes.meta.description', 'zh-CN')
+const { url, locale } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const packList = itemListNode(
+  url,
+  title,
+  packs.map((pack) => ({
     name: pack.displayName,
-    image: pack.bannerUrl || pack.iconUrl
-  }))
-}
+    url: absoluteUrl(Astro.site, `/zh-CN/cloud/supported-nodes/${pack.id}`),
+  })),
+)
 ---
 
 <BaseLayout
-  title={t('cloudNodes.meta.title', 'zh-CN')}
-  description={t('cloudNodes.meta.description', 'zh-CN')}
+  title={title}
+  description={description}
+  pageType="CollectionPage"
+  mainEntityId={jsonLdId(url, 'itemlist')}
+  breadcrumbs={[
+    {
+      name: t('breadcrumb.home', locale),
+      url: absoluteUrl(Astro.site, '/zh-CN'),
+    },
+    { name: 'Comfy Cloud', url: absoluteUrl(Astro.site, '/zh-CN/cloud') },
+    { name: t('breadcrumb.supportedNodes', locale) },
+  ]}
+  extraJsonLd={[packList]}
 >
-  <script
-    is:inline
-    slot="head"
-    type="application/ld+json"
-    set:html={escapeJsonLd(itemListJsonLd)}
-  />
   <HeroSection locale="zh-CN" client:visible />
   <PackGridSection locale="zh-CN" packs={packs} client:visible />
 </BaseLayout>

apps/website/src/pages/zh-CN/cloud/supported-nodes/[pack].astro

@@ -7,7 +7,12 @@ import PackDetail from '../../../../components/cloud-nodes/PackDetail.vue'
 import BaseLayout from '../../../../layouts/BaseLayout.astro'
 import { t } from '../../../../i18n/translations'
 import { loadPacksForBuild } from '../../../../utils/cloudNodes.build'
-import { escapeJsonLd } from '../../../../utils/escapeJsonLd'
+import {
+  absoluteUrl,
+  jsonLdId,
+  pageContext,
+  softwareApplicationNode,
+} from '../../../../utils/jsonLd'
 
 export const getStaticPaths: GetStaticPaths = async () => {
   const packs = await loadPacksForBuild()
@@ -29,35 +34,48 @@ const metaDescription = t('cloudNodes.detail.metaDescription', 'zh-CN')
   .replace('{nodeCount}', String(pack.nodes.length))
   .replace('{description}', description)
 
-const siteBase = Astro.site ?? new URL('https://comfy.org')
-const pageUrl = new URL(`/zh-CN/cloud/supported-nodes/${pack.id}`, siteBase).href
-
-const softwareJsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'SoftwareApplication',
+const { siteUrl, locale, url } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const softwareId = jsonLdId(url, 'software')
+const software = softwareApplicationNode({
+  siteUrl,
+  id: softwareId,
   name: pack.displayName,
+  url,
   applicationCategory: 'DeveloperApplication',
   applicationSubCategory: 'ComfyUI custom-node pack',
   operatingSystem: 'Comfy Cloud (managed)',
-  url: pageUrl,
-  description,
+  description: pack.description || undefined,
   image: pack.bannerUrl || pack.iconUrl,
   softwareVersion: pack.latestVersion,
   license: pack.license,
   codeRepository: pack.repoUrl,
-  author: pack.publisher?.name
-    ? { '@type': 'Person', name: pack.publisher.name }
-    : undefined,
-  offers: { '@type': 'Offer', price: 0, priceCurrency: 'USD' }
-}
+  authorName: pack.publisher?.name,
+  isFree: true,
+})
 ---
 
-<BaseLayout title={title} description={metaDescription} ogImage={pack.bannerUrl}>
-  <script
-    is:inline
-    slot="head"
-    type="application/ld+json"
-    set:html={escapeJsonLd(softwareJsonLd)}
-  />
+<BaseLayout
+  title={title}
+  description={metaDescription}
+  ogImage={pack.bannerUrl}
+  mainEntityId={softwareId}
+  breadcrumbs={[
+    {
+      name: t('breadcrumb.home', locale),
+      url: absoluteUrl(Astro.site, '/zh-CN'),
+    },
+    { name: 'Comfy Cloud', url: absoluteUrl(Astro.site, '/zh-CN/cloud') },
+    {
+      name: t('breadcrumb.supportedNodes', locale),
+      url: absoluteUrl(Astro.site, '/zh-CN/cloud/supported-nodes'),
+    },
+    { name: pack.displayName },
+  ]}
+  extraJsonLd={[software]}
+>
   <PackDetail pack={pack} locale="zh-CN" />
 </BaseLayout>

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

@@ -2,9 +2,28 @@
 import BaseLayout from '../../layouts/BaseLayout.astro'
 import FormSection from '../../components/contact/FormSection.vue'
 import SocialProofBarSection from '../../components/common/SocialProofBarSection.vue'
+import { t } from '../../i18n/translations'
+import { absoluteUrl, organizationId, pageContext } from '../../utils/jsonLd'
+
+const { siteUrl, locale } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
 ---
 
-<BaseLayout title="联系我们 — Comfy">
+<BaseLayout
+  title="联系我们 — Comfy"
+  pageType="ContactPage"
+  mainEntityId={organizationId(siteUrl)}
+  breadcrumbs={[
+    {
+      name: t('breadcrumb.home', locale),
+      url: absoluteUrl(Astro.site, '/zh-CN'),
+    },
+    { name: t('breadcrumb.contact', locale) },
+  ]}
+>
   <FormSection locale="zh-CN" client:load />
   <SocialProofBarSection />
 </BaseLayout>

apps/website/src/pages/zh-CN/demos/[slug].astro

@@ -7,6 +7,13 @@ import DemoTranscript from '../../../components/demos/DemoTranscript.vue'
 import DemoNavSection from '../../../components/demos/DemoNavSection.vue'
 import { demos, getDemoBySlug, getNextDemo } from '../../../config/demos'
 import { t } from '../../../i18n/translations'
+import type { JsonLdNode } from '../../../utils/jsonLd'
+import {
+  absoluteUrl,
+  jsonLdId,
+  organizationId,
+  pageContext,
+} from '../../../utils/jsonLd'
 
 export const getStaticPaths: GetStaticPaths = () => {
   return demos.map((demo) => ({
@@ -19,68 +26,34 @@ const demo = getDemoBySlug(slug as string)!
 const nextDemo = getNextDemo(slug as string)
 const title = t(demo.title, 'zh-CN')
 const description = t(demo.description, 'zh-CN')
-const canonicalURL = new URL(`/zh-CN/demos/${demo.slug}`, Astro.site)
 
-const howToJsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'HowTo',
-  name: title,
-  description,
-  image: new URL(demo.ogImage, Astro.site).href,
-  totalTime: demo.durationIso,
-  datePublished: demo.publishedDate,
-  dateModified: demo.modifiedDate,
-  author: {
-    '@type': 'Organization',
-    name: 'Comfy Org',
-    url: 'https://comfy.org'
-  }
-}
-
-const learningResourceJsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'LearningResource',
-  name: title,
-  description,
-  learningResourceType: 'interactive tutorial',
-  interactivityType: 'active',
-  educationalLevel: demo.difficulty === 'beginner'
+const { siteUrl, locale, url } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
+const educationalLevel =
+  demo.difficulty === 'beginner'
     ? 'Beginner'
     : demo.difficulty === 'intermediate'
       ? 'Intermediate'
-      : 'Advanced',
-  url: canonicalURL.href,
+      : 'Advanced'
+const learningId = jsonLdId(url, 'learning')
+const learningResource: JsonLdNode = {
+  '@type': 'LearningResource',
+  '@id': learningId,
+  name: title,
+  description,
+  url,
+  image: new URL(demo.ogImage, Astro.site).href,
+  learningResourceType: 'interactive tutorial',
+  interactivityType: 'active',
+  educationalLevel,
+  timeRequired: demo.durationIso,
   datePublished: demo.publishedDate,
   dateModified: demo.modifiedDate,
-  author: {
-    '@type': 'Organization',
-    name: 'Comfy Org',
-    url: 'https://comfy.org'
-  }
-}
-
-const breadcrumbJsonLd = {
-  '@context': 'https://schema.org',
-  '@type': 'BreadcrumbList',
-  itemListElement: [
-    {
-      '@type': 'ListItem',
-      position: 1,
-      name: t('demos.breadcrumb.home', 'zh-CN'),
-      item: 'https://comfy.org/zh-CN'
-    },
-    {
-      '@type': 'ListItem',
-      position: 2,
-      name: t('demos.breadcrumb.demos', 'zh-CN'),
-      item: 'https://comfy.org/zh-CN/demos'
-    },
-    {
-      '@type': 'ListItem',
-      position: 3,
-      name: title
-    }
-  ]
+  isPartOf: { '@id': jsonLdId(url, 'webpage') },
+  author: { '@id': organizationId(siteUrl) },
 }
 ---
 
@@ -88,25 +61,23 @@ const breadcrumbJsonLd = {
   title={`${title} — Comfy`}
   description={description}
   ogImage={demo.ogImage}
+  mainEntityId={learningId}
+  breadcrumbs={[
+    {
+      name: t('breadcrumb.home', locale),
+      url: absoluteUrl(Astro.site, '/zh-CN'),
+    },
+    {
+      name: t('demos.breadcrumb.demos', locale),
+      url: absoluteUrl(Astro.site, '/zh-CN/demos'),
+    },
+    { name: title },
+  ]}
+  extraJsonLd={[learningResource]}
 >
   <Fragment slot="head">
     <meta property="article:published_time" content={demo.publishedDate} />
     <meta property="article:modified_time" content={demo.modifiedDate} />
-    <script
-      is:inline
-      type="application/ld+json"
-      set:html={JSON.stringify(howToJsonLd)}
-    />
-    <script
-      is:inline
-      type="application/ld+json"
-      set:html={JSON.stringify(learningResourceJsonLd)}
-    />
-    <script
-      is:inline
-      type="application/ld+json"
-      set:html={JSON.stringify(breadcrumbJsonLd)}
-    />
     <link rel="preconnect" href="https://demo.arcade.software" />
   </Fragment>
 

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

@@ -8,11 +8,32 @@ import EcoSystemSection from '../../components/product/local/EcoSystemSection.vu
 import ProductCardsSection from '../../components/product/local/ProductCardsSection.vue'
 import FAQSection from '../../components/product/local/FAQSection.vue'
 import { t } from '../../i18n/translations'
+import {
+  absoluteUrl,
+  comfyUiApplicationNode,
+  comfyUiSoftwareId,
+  pageContext,
+} from '../../utils/jsonLd'
+
+const { siteUrl, locale } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
 ---
 
 <BaseLayout
   title="下载 Comfy 桌面版 — 在您的硬件上运行 AI"
   description={t('download.hero.subtitle', 'zh-CN')}
+  mainEntityId={comfyUiSoftwareId(siteUrl)}
+  breadcrumbs={[
+    {
+      name: t('breadcrumb.home', locale),
+      url: absoluteUrl(Astro.site, '/zh-CN'),
+    },
+    { name: t('breadcrumb.download', locale) },
+  ]}
+  extraJsonLd={[comfyUiApplicationNode(siteUrl)]}
   keywords={['comfyui app', 'comfyui desktop app', 'comfyui download', 'ComfyUI 下载', 'ComfyUI 桌面应用', 'ComfyUI 应用', 'ComfyUI Windows', 'ComfyUI macOS', 'ComfyUI Linux']}
 >
   <CloudBannerSection locale="zh-CN" />

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

@@ -9,11 +9,25 @@ import CaseStudySpotlightSection from '../../components/home/CaseStudySpotlightS
 import GetStartedSection from '../../components/home/GetStartedSection.vue'
 import BuildWhatSection from '../../components/home/BuildWhatSection.vue'
 import { t } from '../../i18n/translations'
+import {
+  comfyUiApplicationNode,
+  comfyUiSoftwareId,
+  comfyUiSourceCodeNode,
+  pageContext,
+} from '../../utils/jsonLd'
+
+const { siteUrl } = pageContext(
+  Astro.site,
+  Astro.url.pathname,
+  Astro.currentLocale,
+)
 ---
 
 <BaseLayout
   title="Comfy — 视觉 AI 的最强可控性"
   description={t('hero.subtitle', 'zh-CN')}
+  mainEntityId={comfyUiSoftwareId(siteUrl)}
+  extraJsonLd={[comfyUiApplicationNode(siteUrl), comfyUiSourceCodeNode(siteUrl)]}
   keywords={['comfyui app', 'comfyui web app', 'comfyui application', 'ComfyUI 应用', 'ComfyUI 网页版', 'ComfyUI 桌面应用', 'ComfyUI 下载', '可视化 AI', '节点式 AI', '生成式 AI 工作流']}
 >
   <HeroSection locale="zh-CN" client:load />

apps/website/src/pages/zh-CN/learning/index.astro

@@ -0,0 +1,27 @@
+---
+import BaseLayout from '../../../layouts/BaseLayout.astro'
+import HeroSection from '../../../components/learning/HeroSection.vue'
+import FeaturedWorkflowSection from '../../../components/learning/FeaturedWorkflowSection.vue'
+import TutorialsSection from '../../../components/learning/TutorialsSection.vue'
+import CallToActionSection from '../../../components/common/CallToActionSection.vue'
+import EventsSection from '../../../components/common/EventsSection.vue'
+import { getRoutes, externalLinks } from '../../../config/routes'
+import { learningEvents } from '../../../data/events'
+
+const routes = getRoutes('zh-CN')
+---
+
+<BaseLayout title="学习 — Comfy">
+  <HeroSection locale="zh-CN" client:load />
+  <FeaturedWorkflowSection locale="zh-CN" client:visible />
+  <TutorialsSection locale="zh-CN" client:visible />
+  <CallToActionSection
+    locale="zh-CN"
+    headingKey="learning.cta.heading"
+    primaryLabelKey="learning.cta.contactSales"
+    primaryHref={routes.contact}
+    secondaryLabelKey="cta.tryWorkflow"
+    secondaryHref={externalLinks.workflows}
+    client:visible
+  />
+</BaseLayout>

apps/website/src/pages/zh-CN/learning/vfx.astro

@@ -0,0 +1,25 @@
+---
+import BaseLayout from '../../../layouts/BaseLayout.astro'
+import HeroSection from '../../../components/vfx/HeroSection.vue'
+import TutorialsSection from '../../../components/vfx/TutorialsSection.vue'
+import SocialProofBarSection from '../../../components/common/SocialProofBarSection.vue'
+import CallToActionSection from '../../../components/common/CallToActionSection.vue'
+import { getRoutes, externalLinks } from '../../../config/routes'
+
+const routes = getRoutes('zh-CN')
+---
+
+<BaseLayout title="视效 — Comfy">
+  <HeroSection locale="zh-CN" client:load />
+  <SocialProofBarSection client:visible />
+  <TutorialsSection locale="zh-CN" client:visible />
+  <CallToActionSection
+    locale="zh-CN"
+    headingKey="vfx.cta.heading"
+    primaryLabelKey="vfx.cta.contactSales"
+    primaryHref={routes.contact}
+    secondaryLabelKey="cta.tryWorkflow"
+    secondaryHref={externalLinks.workflows}
+    client:visible
+  />
+</BaseLayout>

apps/website/src/utils/jsonLd.test.ts

@@ -0,0 +1,212 @@
+import { describe, expect, it } from 'vitest'
+
+import { externalLinks } from '../config/routes'
+import { escapeJsonLd } from './escapeJsonLd'
+import type { JsonLdGraph } from './jsonLd'
+import {
+  absoluteUrl,
+  buildPageGraph,
+  collectGraphIds,
+  comfyUiApplicationNode,
+  comfyUiSoftwareId,
+  comfyUiSourceCodeNode,
+  itemListNode,
+  jsonLdId,
+  organizationId,
+  pageContext,
+  productNode,
+  softwareApplicationNode
+} from './jsonLd'
+
+const siteUrl = 'https://comfy.org'
+const site = new URL('https://comfy.org/')
+
+function typeNames(graph: JsonLdGraph): string[] {
+  return graph['@graph'].map((node) => node['@type'])
+}
+
+describe('absoluteUrl', () => {
+  it('resolves internal paths to their trailing-slash canonical form', () => {
+    expect(absoluteUrl(site, '/cloud')).toBe('https://comfy.org/cloud/')
+    expect(absoluteUrl(site, '/about/')).toBe('https://comfy.org/about/')
+    expect(absoluteUrl(site, '/')).toBe('https://comfy.org/')
+  })
+})
+
+describe('pageContext', () => {
+  it('derives siteUrl, locale and canonical url from the Astro globals', () => {
+    expect(pageContext(site, '/about/', undefined)).toEqual({
+      siteUrl,
+      locale: 'en',
+      url: 'https://comfy.org/about/'
+    })
+    expect(pageContext(site, '/zh-CN/', 'zh-CN').locale).toBe('zh-CN')
+  })
+})
+
+describe('itemListNode', () => {
+  it('counts items and omits per-item names when not supplied', () => {
+    const node = itemListNode('https://comfy.org/careers/', 'Careers', [
+      { url: 'https://jobs.example/1' },
+      { url: 'https://jobs.example/2', name: 'Designer' }
+    ])
+    expect(node.numberOfItems).toBe(2)
+    const items = node.itemListElement as Record<string, unknown>[]
+    expect('name' in items[0]).toBe(false)
+    expect(items[1].name).toBe('Designer')
+  })
+})
+
+describe('softwareApplicationNode', () => {
+  it('claims Comfy Org as author and publisher only when first-party', () => {
+    const node = softwareApplicationNode({
+      siteUrl,
+      id: jsonLdId(siteUrl, 'software'),
+      name: 'ComfyUI',
+      url: siteUrl,
+      firstParty: true,
+      applicationCategory: 'MultimediaApplication',
+      isFree: true
+    })
+    const orgRef = { '@id': organizationId(siteUrl) }
+    expect(node.author).toEqual(orgRef)
+    expect(node.publisher).toEqual(orgRef)
+    expect(node.offers).toEqual({
+      '@type': 'Offer',
+      price: 0,
+      priceCurrency: 'USD',
+      seller: orgRef
+    })
+  })
+
+  it('does not name Comfy Org as seller on a third-party free offer', () => {
+    const node = softwareApplicationNode({
+      siteUrl,
+      id: 'https://comfy.org/cloud/supported-nodes/foo/#software',
+      name: 'Foo Pack',
+      url: 'https://comfy.org/cloud/supported-nodes/foo/',
+      applicationCategory: 'DeveloperApplication',
+      isFree: true
+    })
+    expect((node.offers as Record<string, unknown>).seller).toBeUndefined()
+  })
+
+  it('credits a known third-party author without claiming to publish it', () => {
+    const node = softwareApplicationNode({
+      siteUrl,
+      id: 'https://comfy.org/cloud/supported-nodes/foo/#software',
+      name: 'Foo Pack',
+      url: 'https://comfy.org/cloud/supported-nodes/foo/',
+      applicationCategory: 'DeveloperApplication',
+      authorName: 'Jane Dev'
+    })
+    expect(node.author).toEqual({ '@type': 'Person', name: 'Jane Dev' })
+    expect(node.publisher).toBeUndefined()
+  })
+
+  it('claims no author or publisher for third-party software with no author', () => {
+    const node = softwareApplicationNode({
+      siteUrl,
+      id: 'https://comfy.org/p/supported-models/foo/#software',
+      name: 'Foo Model',
+      url: 'https://comfy.org/p/supported-models/foo/',
+      applicationCategory: 'MultimediaApplication'
+    })
+    expect(node.author).toBeUndefined()
+    expect(node.publisher).toBeUndefined()
+  })
+})
+
+describe('sameAs encyclopedic references', () => {
+  it('links the organization to its Wikidata entity', () => {
+    const graph = buildPageGraph(
+      { siteUrl, locale: 'en' },
+      { url: `${siteUrl}/`, name: 'Home' }
+    )
+    const org = graph['@graph'].find((node) => node['@type'] === 'Organization')
+    expect(org?.sameAs).toContain(externalLinks.wikidataComfyOrg)
+  })
+
+  it('links the ComfyUI application to its Wikidata, Wikipedia and G2 entities', () => {
+    const node = comfyUiApplicationNode(siteUrl)
+    expect(node.sameAs).toEqual([
+      externalLinks.wikidataComfyUi,
+      externalLinks.wikipediaComfyUi,
+      externalLinks.g2ComfyUi
+    ])
+  })
+
+  it('omits sameAs for third-party software', () => {
+    const node = softwareApplicationNode({
+      siteUrl,
+      id: 'https://comfy.org/p/supported-models/foo/#software',
+      name: 'Foo Model',
+      url: 'https://comfy.org/p/supported-models/foo/',
+      applicationCategory: 'MultimediaApplication'
+    })
+    expect(node.sameAs).toBeUndefined()
+  })
+})
+
+describe('productNode', () => {
+  it('gives every offer a currency and price', () => {
+    const node = productNode({
+      siteUrl,
+      id: 'https://comfy.org/cloud/pricing/#product',
+      name: 'Comfy Cloud',
+      url: 'https://comfy.org/cloud/pricing/',
+      offers: [{ name: 'Standard', price: '20' }]
+    })
+    const offers = node.offers as Record<string, unknown>[]
+    expect(offers[0].price).toBe('20')
+    expect(offers[0].priceCurrency).toBe('USD')
+    expect(offers[0].seller).toEqual({ '@id': organizationId(siteUrl) })
+  })
+})
+
+describe('comfyUiSourceCodeNode', () => {
+  it('links the source code to the ComfyUI application via targetProduct', () => {
+    const node = comfyUiSourceCodeNode(siteUrl)
+    expect(node.targetProduct).toEqual({ '@id': comfyUiSoftwareId(siteUrl) })
+  })
+})
+
+describe('buildPageGraph', () => {
+  const url = 'https://comfy.org/cloud/pricing/'
+  const graph = buildPageGraph(
+    { siteUrl, locale: 'en' },
+    {
+      url,
+      name: 'Pricing',
+      type: 'CollectionPage',
+      mainEntityId: jsonLdId(url, 'itemlist'),
+      crumbs: [{ name: 'Home', url: `${siteUrl}/` }, { name: 'Pricing' }]
+    },
+    itemListNode(url, 'Plans', [{ url: `${siteUrl}/one/` }])
+  )
+
+  it('always includes the site-wide organization, website and page entity', () => {
+    expect(typeNames(graph)).toContain('Organization')
+    expect(typeNames(graph)).toContain('WebSite')
+    expect(typeNames(graph)).toContain('CollectionPage')
+  })
+
+  it('produces a graph where every @id reference resolves', () => {
+    const { defined, references } = collectGraphIds(graph)
+    for (const reference of references) {
+      expect(defined.has(reference)).toBe(true)
+    }
+  })
+})
+
+describe('escapeJsonLd on a built graph', () => {
+  it('neutralizes a </script> breakout in a page name', () => {
+    const graph = buildPageGraph(
+      { siteUrl, locale: 'en' },
+      { url: `${siteUrl}/x/`, name: '</script><script>alert(1)</script>' }
+    )
+    const serialized = escapeJsonLd(graph)
+    expect(serialized).not.toContain('</script>')
+    expect(serialized).toContain('\\u003c')
+  })
+})

apps/website/src/utils/jsonLd.ts

@@ -0,0 +1,377 @@
+import { externalLinks } from '../config/routes'
+import type { Locale } from '../i18n/translations'
+
+export type JsonLdNode = Record<string, unknown> & { '@type': string }
+
+export interface JsonLdGraph {
+  '@context': 'https://schema.org'
+  '@graph': JsonLdNode[]
+}
+
+export interface PageContext {
+  siteUrl: string
+  locale: Locale
+}
+
+export type WebPageType =
+  | 'WebPage'
+  | 'AboutPage'
+  | 'ContactPage'
+  | 'CollectionPage'
+
+export interface Crumb {
+  name: string
+  url?: string
+}
+
+const sameAs = [
+  externalLinks.github,
+  externalLinks.x,
+  externalLinks.youtube,
+  externalLinks.discord,
+  externalLinks.instagram,
+  externalLinks.reddit,
+  externalLinks.linkedin,
+  // Wikidata entity for the organization, so the Knowledge Graph can resolve it.
+  externalLinks.wikidataComfyOrg
+]
+
+// Authoritative encyclopedic and review-platform references for the ComfyUI software entity.
+const comfyUiSameAs = [
+  externalLinks.wikidataComfyUi,
+  externalLinks.wikipediaComfyUi,
+  externalLinks.g2ComfyUi
+]
+
+function siteUrlFrom(site: URL | undefined): string {
+  return (site?.href ?? 'https://comfy.org/').replace(/\/$/, '')
+}
+
+export function absoluteUrl(site: URL | undefined, path: string): string {
+  const resolved = new URL(path, site ?? 'https://comfy.org').href
+  return resolved.endsWith('/') ? resolved : `${resolved}/`
+}
+
+export function pageContext(
+  site: URL | undefined,
+  pathname: string,
+  currentLocale: string | undefined
+): PageContext & { url: string } {
+  return {
+    siteUrl: siteUrlFrom(site),
+    locale: currentLocale === 'zh-CN' ? 'zh-CN' : 'en',
+    url: absoluteUrl(site, pathname)
+  }
+}
+
+export function jsonLdId(pageUrl: string, fragment: string): string {
+  return `${pageUrl}#${fragment}`
+}
+
+export function organizationId(siteUrl: string): string {
+  return `${siteUrl}/#organization`
+}
+
+function websiteId(siteUrl: string): string {
+  return `${siteUrl}/#website`
+}
+
+function buildGraph(...nodes: (JsonLdNode | null | undefined)[]): JsonLdGraph {
+  return {
+    '@context': 'https://schema.org',
+    '@graph': nodes.filter((node): node is JsonLdNode => Boolean(node))
+  }
+}
+
+function organizationNode(siteUrl: string): JsonLdNode {
+  return {
+    '@type': 'Organization',
+    '@id': organizationId(siteUrl),
+    name: 'Comfy Org',
+    url: siteUrl,
+    logo: {
+      '@type': 'ImageObject',
+      url: `${siteUrl}/web-app-manifest-512x512.png`,
+      width: 512,
+      height: 512
+    },
+    sameAs
+  }
+}
+
+function websiteNode(siteUrl: string): JsonLdNode {
+  return {
+    '@type': 'WebSite',
+    '@id': websiteId(siteUrl),
+    name: 'Comfy',
+    url: siteUrl,
+    publisher: { '@id': organizationId(siteUrl) }
+  }
+}
+
+function breadcrumbNode(pageUrl: string, crumbs: Crumb[]): JsonLdNode {
+  return {
+    '@type': 'BreadcrumbList',
+    '@id': jsonLdId(pageUrl, 'breadcrumb'),
+    itemListElement: crumbs.map((crumb, index) => {
+      const isLast = index === crumbs.length - 1
+      return isLast || !crumb.url
+        ? { '@type': 'ListItem', position: index + 1, name: crumb.name }
+        : {
+            '@type': 'ListItem',
+            position: index + 1,
+            name: crumb.name,
+            item: crumb.url
+          }
+    })
+  }
+}
+
+export function itemListNode(
+  pageUrl: string,
+  name: string,
+  items: { url: string; name?: string }[]
+): JsonLdNode {
+  return {
+    '@type': 'ItemList',
+    '@id': jsonLdId(pageUrl, 'itemlist'),
+    name,
+    numberOfItems: items.length,
+    itemListElement: items.map((item, index) => ({
+      '@type': 'ListItem',
+      position: index + 1,
+      url: item.url,
+      ...(item.name ? { name: item.name } : {})
+    }))
+  }
+}
+
+interface WebPageInput {
+  siteUrl: string
+  locale: Locale
+  url: string
+  name: string
+  description?: string
+  imageUrl?: string
+  crumbs?: Crumb[]
+  mainEntityId?: string
+}
+
+function webPageNode(input: WebPageInput, type: WebPageType): JsonLdNode {
+  const hasCrumbs = Boolean(input.crumbs && input.crumbs.length > 0)
+  return {
+    '@type': type,
+    '@id': jsonLdId(input.url, 'webpage'),
+    url: input.url,
+    name: input.name,
+    description: input.description,
+    isPartOf: { '@id': websiteId(input.siteUrl) },
+    primaryImageOfPage: input.imageUrl
+      ? { '@type': 'ImageObject', url: input.imageUrl }
+      : undefined,
+    breadcrumb: hasCrumbs
+      ? { '@id': jsonLdId(input.url, 'breadcrumb') }
+      : undefined,
+    mainEntity: input.mainEntityId ? { '@id': input.mainEntityId } : undefined,
+    inLanguage: input.locale
+  }
+}
+
+export interface SoftwareAppInput {
+  siteUrl: string
+  id: string
+  name: string
+  url: string
+  applicationCategory: string
+  firstParty?: boolean
+  applicationSubCategory?: string
+  description?: string
+  operatingSystem?: string
+  image?: string
+  softwareVersion?: string
+  license?: string
+  codeRepository?: string
+  authorName?: string
+  isFree?: boolean
+  sameAs?: string[]
+}
+
+export function softwareApplicationNode(input: SoftwareAppInput): JsonLdNode {
+  const orgRef = { '@id': organizationId(input.siteUrl) }
+  const author = input.firstParty
+    ? orgRef
+    : input.authorName
+      ? { '@type': 'Person', name: input.authorName }
+      : undefined
+  return {
+    '@type': 'SoftwareApplication',
+    '@id': input.id,
+    name: input.name,
+    url: input.url,
+    applicationCategory: input.applicationCategory,
+    applicationSubCategory: input.applicationSubCategory,
+    description: input.description,
+    operatingSystem: input.operatingSystem,
+    image: input.image,
+    softwareVersion: input.softwareVersion,
+    license: input.license,
+    codeRepository: input.codeRepository,
+    author,
+    publisher: input.firstParty ? orgRef : undefined,
+    sameAs: input.sameAs,
+    offers: input.isFree
+      ? {
+          '@type': 'Offer',
+          price: 0,
+          priceCurrency: 'USD',
+          seller: input.firstParty ? orgRef : undefined
+        }
+      : undefined
+  }
+}
+
+interface SourceCodeInput {
+  siteUrl: string
+  id: string
+  name: string
+  codeRepository: string
+  programmingLanguage?: string
+  targetProductId?: string
+}
+
+function softwareSourceCodeNode(input: SourceCodeInput): JsonLdNode {
+  return {
+    '@type': 'SoftwareSourceCode',
+    '@id': input.id,
+    name: input.name,
+    codeRepository: input.codeRepository,
+    programmingLanguage: input.programmingLanguage,
+    targetProduct: input.targetProductId
+      ? { '@id': input.targetProductId }
+      : undefined,
+    author: { '@id': organizationId(input.siteUrl) }
+  }
+}
+
+export function comfyUiSoftwareId(siteUrl: string): string {
+  return `${siteUrl}/#software`
+}
+
+export function comfyUiApplicationNode(siteUrl: string): JsonLdNode {
+  return softwareApplicationNode({
+    siteUrl,
+    id: comfyUiSoftwareId(siteUrl),
+    name: 'ComfyUI',
+    url: siteUrl,
+    firstParty: true,
+    applicationCategory: 'MultimediaApplication',
+    operatingSystem: 'Windows, macOS, Linux',
+    isFree: true,
+    sameAs: comfyUiSameAs
+  })
+}
+
+export function comfyUiSourceCodeNode(siteUrl: string): JsonLdNode {
+  return softwareSourceCodeNode({
+    siteUrl,
+    id: `${siteUrl}/#sourcecode`,
+    name: 'ComfyUI',
+    codeRepository: externalLinks.github,
+    programmingLanguage: 'Python',
+    targetProductId: comfyUiSoftwareId(siteUrl)
+  })
+}
+
+interface OfferInput {
+  name: string
+  price: string | number
+  url?: string
+}
+
+export interface ProductInput {
+  siteUrl: string
+  id: string
+  name: string
+  url: string
+  offers: OfferInput[]
+}
+
+export function productNode(input: ProductInput): JsonLdNode {
+  return {
+    '@type': 'Product',
+    '@id': input.id,
+    name: input.name,
+    url: input.url,
+    brand: { '@id': organizationId(input.siteUrl) },
+    offers: input.offers.map((offer) => ({
+      '@type': 'Offer',
+      name: offer.name,
+      price: offer.price,
+      priceCurrency: 'USD',
+      url: offer.url,
+      seller: { '@id': organizationId(input.siteUrl) },
+      priceSpecification: {
+        '@type': 'UnitPriceSpecification',
+        price: offer.price,
+        priceCurrency: 'USD',
+        unitText: 'MONTH'
+      }
+    }))
+  }
+}
+
+export interface PageGraphInput {
+  url: string
+  name: string
+  type?: WebPageType
+  description?: string
+  imageUrl?: string
+  crumbs?: Crumb[]
+  mainEntityId?: string
+}
+
+export function buildPageGraph(
+  ctx: PageContext,
+  page: PageGraphInput,
+  ...extraNodes: (JsonLdNode | null | undefined)[]
+): JsonLdGraph {
+  const { type = 'WebPage', ...rest } = page
+  const input: WebPageInput = {
+    ...rest,
+    siteUrl: ctx.siteUrl,
+    locale: ctx.locale
+  }
+  const hasCrumbs = Boolean(page.crumbs && page.crumbs.length > 0)
+  return buildGraph(
+    organizationNode(ctx.siteUrl),
+    websiteNode(ctx.siteUrl),
+    webPageNode(input, type),
+    hasCrumbs ? breadcrumbNode(page.url, page.crumbs!) : undefined,
+    ...extraNodes
+  )
+}
+
+export function collectGraphIds(value: unknown): {
+  defined: Set<string>
+  references: string[]
+} {
+  const defined = new Set<string>()
+  const references: string[] = []
+  const walk = (node: unknown): void => {
+    if (Array.isArray(node)) {
+      node.forEach(walk)
+      return
+    }
+    if (node && typeof node === 'object') {
+      const record = node as Record<string, unknown>
+      const id = record['@id']
+      if (typeof id === 'string') {
+        if (Object.keys(record).length === 1) references.push(id)
+        else defined.add(id)
+      }
+      Object.values(record).forEach(walk)
+    }
+  }
+  walk(value)
+  return { defined, references }
+}

browser_tests/tests/vueNodes/nodeStates/error.spec.ts

@@ -23,7 +23,6 @@ import { webSocketFixture } from '@e2e/fixtures/ws'
 const test = mergeTests(comfyPageFixture, webSocketFixture)
 
 const ERROR_CLASS = /ring-destructive-background/
-const SLOT_ERROR_CLASS = /before:ring-error/
 const UNKNOWN_NODE_ID = '1'
 const INNER_EXECUTION_ID = '2:1'
 const KSAMPLER_MODEL_INPUT_NAME = 'model'
@@ -70,25 +69,6 @@ async function selectLoadImageNodeForPaste(
   }, localLoadImageId)
 }
 
-async function getInputSlotIndexByName(
-  comfyPage: ComfyPage,
-  nodeId: string,
-  inputName: string
-): Promise<number> {
-  return comfyPage.page.evaluate(
-    ({ inputName, nodeId }) => {
-      const graph = window.app!.canvas.graph ?? window.app!.graph
-      const node = graph.getNodeById(nodeId)
-      const index = node?.findInputSlot(inputName) ?? -1
-      if (index < 0) {
-        throw new Error(`Input slot "${inputName}" not found`)
-      }
-      return index
-    },
-    { inputName, nodeId: toNodeId(nodeId) }
-  )
-}
-
 async function setupLoadImageErrorScenario(comfyPage: ComfyPage) {
   await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
   const loadImageNode = (
@@ -159,10 +139,17 @@ test.describe('Vue Node Error', { tag: '@vue-nodes' }, () => {
       async ({ comfyPage }) => {
         const ksamplerId = await comfyPage.vueNodes.getNodeIdByTitle('KSampler')
         const ksamplerNode = comfyPage.vueNodes.getNodeLocator(ksamplerId)
-        const modelInputIndex = await getInputSlotIndexByName(
-          comfyPage,
-          ksamplerId,
-          KSAMPLER_MODEL_INPUT_NAME
+        const modelInputIndex = await comfyPage.page.evaluate(
+          ({ nodeId, inputName }) => {
+            const node = window.app!.graph.getNodeById(nodeId)
+            const index =
+              node?.inputs?.findIndex((input) => input.name === inputName) ?? -1
+            if (index < 0) {
+              throw new Error(`Input slot "${inputName}" not found`)
+            }
+            return index
+          },
+          { nodeId: toNodeId(ksamplerId), inputName: KSAMPLER_MODEL_INPUT_NAME }
         )
         const modelInputSlotRow = comfyPage.vueNodes.getInputSlotRow(
           ksamplerId,
@@ -188,7 +175,7 @@ test.describe('Vue Node Error', { tag: '@vue-nodes' }, () => {
 
         await expect(modelInputSlotRow).toBeVisible()
         await expect(modelInputSlotRow).toBeInViewport()
-        await expect(modelInputSlotHighlight).toHaveClass(SLOT_ERROR_CLASS)
+        await expect(modelInputSlotHighlight).toHaveClass(/before:ring-error/)
         await expect(
           comfyPage.vueNodes.getNodeInnerWrapper(ksamplerId)
         ).toHaveClass(ERROR_CLASS)
@@ -420,76 +407,5 @@ test.describe('Vue Node Error', { tag: '@vue-nodes' }, () => {
 
       await expect(innerWrapper).toHaveClass(ERROR_CLASS)
     })
-
-    test('boundary-linked validation error surfaces on the subgraph host', async ({
-      comfyPage
-    }) => {
-      await comfyPage.workflow.loadWorkflow('subgraphs/basic-subgraph')
-      const subgraphParentId =
-        await comfyPage.vueNodes.getNodeIdByTitle('New Subgraph')
-      const innerWrapper =
-        comfyPage.vueNodes.getNodeInnerWrapper(subgraphParentId)
-      const hostInputIndex = await getInputSlotIndexByName(
-        comfyPage,
-        subgraphParentId,
-        'positive'
-      )
-      const hostInputSlotHighlight =
-        comfyPage.vueNodes.getInputSlotConnectionDot(
-          subgraphParentId,
-          hostInputIndex
-        )
-      await expect(
-        innerWrapper,
-        'subgraph host must mount before injecting validation errors'
-      ).toBeVisible()
-      await expect(
-        innerWrapper,
-        'subgraph host should start without an error ring'
-      ).not.toHaveClass(ERROR_CLASS)
-
-      await test.step('surface the boundary-linked error on the host', async () => {
-        const exec = new ExecutionHelper(comfyPage)
-        await exec.mockValidationFailure({
-          [INNER_EXECUTION_ID]: buildKSamplerError(
-            'required_input_missing',
-            'positive',
-            'Required input is missing: positive'
-          )
-        })
-        await comfyPage.runButton.click()
-        await dismissErrorOverlay(comfyPage)
-
-        await expect(innerWrapper).toHaveClass(ERROR_CLASS)
-        await expect(hostInputSlotHighlight).toHaveClass(SLOT_ERROR_CLASS)
-      })
-
-      await test.step('confirm the interior node does not show the surfaced ring', async () => {
-        await comfyPage.vueNodes.enterSubgraph(subgraphParentId)
-        await comfyPage.nextFrame()
-        await expect.poll(() => comfyPage.subgraph.isInSubgraph()).toBe(true)
-        const interiorKSamplerId =
-          await comfyPage.vueNodes.getNodeIdByTitle('KSampler')
-        const interiorPositiveInputIndex = await getInputSlotIndexByName(
-          comfyPage,
-          interiorKSamplerId,
-          'positive'
-        )
-        const interiorPositiveSlotHighlight =
-          comfyPage.vueNodes.getInputSlotConnectionDot(
-            interiorKSamplerId,
-            interiorPositiveInputIndex
-          )
-        const interiorInnerWrapper =
-          comfyPage.vueNodes.getNodeInnerWrapper(interiorKSamplerId)
-
-        await expect(interiorInnerWrapper).toBeVisible()
-        await expect(interiorInnerWrapper).not.toHaveClass(ERROR_CLASS)
-        await expect(interiorPositiveSlotHighlight).toBeVisible()
-        await expect(interiorPositiveSlotHighlight).not.toHaveClass(
-          SLOT_ERROR_CLASS
-        )
-      })
-    })
   })
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comfyorg/comfyui-frontend",
-  "version": "1.47.8",
+  "version": "1.48.1",
   "private": true,
   "description": "Official front-end implementation of ComfyUI",
   "homepage": "https://comfy.org",

packages/shared-frontend-utils/src/formatUtil.test.ts

@@ -3,7 +3,6 @@ import { describe, expect, it } from 'vitest'
 import {
   appendWorkflowJsonExt,
   ensureWorkflowSuffix,
-  escapeVueI18nMessageSyntax,
   formatLocalizedMediumDate,
   formatLocalizedNumber,
   getFilePathSeparatorVariants,
@@ -478,49 +477,4 @@ describe('formatUtil', () => {
       expect(formatLocalizedMediumDate('not a date', 'en')).toBe('—')
     })
   })
-
-  describe('escapeVueI18nMessageSyntax', () => {
-    it('escapes a literal @ that would break linked-message compilation', () => {
-      expect(
-        escapeVueI18nMessageSyntax('clips (tagged @Audio1-3 in the prompt)')
-      ).toBe("clips (tagged {'@'}Audio1-3 in the prompt)")
-    })
-
-    it('escapes @ in an email address', () => {
-      expect(escapeVueI18nMessageSyntax('support@comfy.org')).toBe(
-        "support{'@'}comfy.org"
-      )
-    })
-
-    it('escapes interpolation braces', () => {
-      expect(escapeVueI18nMessageSyntax('size {w}x{h}')).toBe(
-        "size {'{'}w{'}'}x{'{'}h{'}'}"
-      )
-    })
-
-    it('escapes the plural pipe separator', () => {
-      expect(escapeVueI18nMessageSyntax('foreground | background')).toBe(
-        "foreground {'|'} background"
-      )
-    })
-
-    it('escapes the modulo percent so it cannot re-form %{', () => {
-      expect(escapeVueI18nMessageSyntax('50%{done}')).toBe(
-        "50{'%'}{'{'}done{'}'}"
-      )
-    })
-
-    it('escapes every occurrence in a single pass', () => {
-      expect(escapeVueI18nMessageSyntax('@a @b @c')).toBe(
-        "{'@'}a {'@'}b {'@'}c"
-      )
-    })
-
-    it('leaves strings without syntax characters unchanged', () => {
-      expect(escapeVueI18nMessageSyntax('no special chars here')).toBe(
-        'no special chars here'
-      )
-      expect(escapeVueI18nMessageSyntax('')).toBe('')
-    })
-  })
 })

packages/shared-frontend-utils/src/formatUtil.ts

@@ -178,40 +178,6 @@ export function normalizeI18nKey(key: string) {
   return typeof key === 'string' ? key.replace(/\./g, '_') : ''
 }
 
-/**
- * Characters that vue-i18n's message compiler treats as syntax in message text,
- * so plain text has to escape them to render verbatim through `t()`/`st()`:
- *
- * - `@` starts a linked-message reference (`@:key`); malformed usage throws
- *   `Invalid linked format`.
- * - `{` / `}` delimit interpolation (`{name}`, `{'literal'}`); an unbalanced
- *   brace throws `Unterminated/Unbalanced closing brace`.
- * - `|` separates plural branches, so `a | b` silently renders as one branch.
- * - `%` forms modulo interpolation when immediately followed by `{` (`%{name}`);
- *   it must be escaped too, otherwise escaping a following `{` re-forms `%{`.
- *
- * The set is a build-inlined `const enum` (`TokenChars`) in
- * `@intlify/message-compiler` and is not exported, so it is hardcoded here.
- *
- * @see https://vue-i18n.intlify.dev/guide/essentials/syntax (Special Characters, Literal interpolation)
- * @see https://vue-i18n.intlify.dev/guide/essentials/pluralization
- */
-const VUE_I18N_SYNTAX_CHARS = /[@{}|%]/g
-
-/**
- * Escapes vue-i18n message-syntax characters as literal interpolations (`{'x'}`)
- * so arbitrary text renders verbatim instead of being parsed as syntax. This is
- * the only escape vue-i18n supports; see {@link VUE_I18N_SYNTAX_CHARS}.
- *
- * Only apply to values read through the compiler (`t()`/`st()`). Values read raw
- * via `tm()`/`stRaw()` (e.g. node tooltips) must be left untouched, or the
- * literal `{'x'}` would surface to users. Apply exactly once to raw text: the
- * escape output itself contains `{`/`}`, so it is not idempotent.
- */
-export function escapeVueI18nMessageSyntax(text: string): string {
-  return text.replace(VUE_I18N_SYNTAX_CHARS, (char) => `{'${char}'}`)
-}
-
 /**
  * Takes a dynamic prompt in the format {opt1|opt2|{optA|optB}|} and randomly replaces groups. Supports C style comments.
  * @param input The dynamic prompt to process

scripts/collect-i18n-node-defs.ts

@@ -3,10 +3,7 @@ import * as fs from 'fs'
 import type { ComfyNodeDef } from '@/schemas/nodeDefSchema'
 
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
-import {
-  escapeVueI18nMessageSyntax,
-  normalizeI18nKey
-} from '@/utils/formatUtil'
+import { normalizeI18nKey } from '../packages/shared-frontend-utils/src/formatUtil'
 import type { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
 
 const localePath = './src/locales/en/main.json'
@@ -47,6 +44,8 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
     }
   )
 
+  console.log(`Collected ${nodeDefs.length} node definitions`)
+
   const allDataTypesLocale = Object.fromEntries(
     nodeDefs
       .flatMap((nodeDef) => {
@@ -61,7 +60,7 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
         )
         return allDataTypes.map((dataType) => [
           normalizeI18nKey(dataType),
-          escapeVueI18nMessageSyntax(dataType)
+          dataType
         ])
       })
       .sort((a, b) => a[0].localeCompare(b[0]))
@@ -99,10 +98,7 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
         const runtimeWidgets = Object.fromEntries(
           Object.entries(widgetsMappings)
             .sort((a, b) => a[0].localeCompare(b[0]))
-            .map(([key, value]) => [
-              normalizeI18nKey(key),
-              { name: value ? escapeVueI18nMessageSyntax(value) : value }
-            ])
+            .map(([key, value]) => [normalizeI18nKey(key), { name: value }])
         )
 
         if (Object.keys(runtimeWidgets).length > 0) {
@@ -125,10 +121,7 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
   function extractInputs(nodeDef: ComfyNodeDefImpl) {
     const inputs = Object.fromEntries(
       Object.values(nodeDef.inputs).flatMap((input) => {
-        const name =
-          input.name === undefined
-            ? undefined
-            : escapeVueI18nMessageSyntax(input.name)
+        const name = input.name
         const tooltip = input.tooltip
 
         if (name === undefined && tooltip === undefined) {
@@ -153,10 +146,7 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
     const outputs = Object.fromEntries(
       nodeDef.outputs.flatMap((output, i) => {
         // Ignore data types if they are already translated in allDataTypesLocale.
-        const name =
-          output.name === undefined || output.name in allDataTypesLocale
-            ? undefined
-            : escapeVueI18nMessageSyntax(output.name)
+        const name = output.name in allDataTypesLocale ? undefined : output.name
         const tooltip = output.tooltip
 
         if (name === undefined && tooltip === undefined) {
@@ -189,12 +179,8 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
         return [
           normalizeI18nKey(nodeDef.name),
           {
-            display_name: escapeVueI18nMessageSyntax(
-              nodeDef.display_name ?? nodeDef.name
-            ),
-            description: nodeDef.description
-              ? escapeVueI18nMessageSyntax(nodeDef.description)
-              : undefined,
+            display_name: nodeDef.display_name ?? nodeDef.name,
+            description: nodeDef.description || undefined,
             inputs: Object.keys(inputs).length > 0 ? inputs : undefined,
             outputs: extractOutputs(nodeDef)
           }
@@ -206,10 +192,7 @@ test('collect-i18n-node-defs', async ({ comfyPage }) => {
     nodeDefs.flatMap((nodeDef) =>
       nodeDef.category
         .split('/')
-        .map((category) => [
-          normalizeI18nKey(category),
-          escapeVueI18nMessageSyntax(category)
-        ])
+        .map((category) => [normalizeI18nKey(category), category])
     )
   )
 

src/components/boundingBoxes/WidgetBoundingBoxes.vue

@@ -4,67 +4,37 @@
     data-testid="bounding-boxes"
     @pointerdown.stop
   >
-    <div class="flex flex-col">
-      <div
-        class="flex h-9 items-center gap-1 rounded-t-sm border border-b-0 border-component-node-border bg-component-node-widget-background px-2"
-      >
-        <Button
-          variant="textonly"
-          size="unset"
-          :aria-pressed="grid"
-          :class="
-            cn(
-              actionBtnClass,
-              grid && 'bg-component-node-widget-background-selected'
-            )
-          "
-          @click="grid = !grid"
-        >
-          <i class="icon-[lucide--grid-3x3] size-4" />
-          <span>{{ $t('boundingBoxes.grid') }}</span>
-        </Button>
-        <Button
-          variant="textonly"
-          size="unset"
-          :class="cn(actionBtnClass, 'ml-auto')"
-          @click="clearAll"
-        >
-          <i class="icon-[lucide--undo-2] size-4" />
-          <span>{{ $t('boundingBoxes.clearAll') }}</span>
-        </Button>
-      </div>
-      <div
-        ref="canvasContainer"
-        class="relative w-full shrink-0 overflow-hidden rounded-b-sm border border-t-0 border-component-node-border bg-base-background"
-        :style="canvasStyle"
-      >
-        <canvas
-          ref="canvasEl"
-          tabindex="0"
-          class="absolute inset-0 size-full rounded-sm text-node-component-slot-text outline-none"
-          :style="{ cursor: canvasCursor }"
-          @pointerdown="onPointerDown"
-          @pointermove="onCanvasPointerMove"
-          @pointerup="onDocPointerUp"
-          @pointercancel="onDocPointerUp"
-          @pointerleave="onPointerLeave"
-          @lostpointercapture="onDocPointerUp"
-          @dblclick="onDoubleClick"
-          @keydown="onCanvasKeyDown"
-          @focus="focused = true"
-          @blur="focused = false"
-        />
-        <textarea
-          v-if="inlineEditor"
-          ref="inlineEditorEl"
-          v-model="inlineEditor.value"
-          class="absolute box-border resize-none rounded-sm border-2 bg-black/90 p-1 font-mono text-xs text-white outline-none"
-          :style="inlineEditor.style"
-          data-capture-wheel="true"
-          @keydown.stop="onInlineKeyDown"
-          @blur="commitInlineEditor"
-        />
-      </div>
+    <div
+      ref="canvasContainer"
+      class="relative w-full shrink-0 overflow-hidden rounded-sm border border-component-node-border bg-node-component-surface"
+      :style="canvasStyle"
+    >
+      <canvas
+        ref="canvasEl"
+        tabindex="0"
+        class="absolute inset-0 size-full rounded-sm outline-none"
+        :style="{ cursor: canvasCursor }"
+        @pointerdown="onPointerDown"
+        @pointermove="onCanvasPointerMove"
+        @pointerup="onDocPointerUp"
+        @pointercancel="onDocPointerUp"
+        @pointerleave="onPointerLeave"
+        @lostpointercapture="onDocPointerUp"
+        @dblclick="onDoubleClick"
+        @keydown="onCanvasKeyDown"
+        @focus="focused = true"
+        @blur="focused = false"
+      />
+      <textarea
+        v-if="inlineEditor"
+        ref="inlineEditorEl"
+        v-model="inlineEditor.value"
+        class="absolute box-border resize-none rounded-sm border-2 bg-black/90 p-1 font-mono text-xs text-white outline-none"
+        :style="inlineEditor.style"
+        data-capture-wheel="true"
+        @keydown.stop="onInlineKeyDown"
+        @blur="commitInlineEditor"
+      />
     </div>
 
     <div
@@ -152,6 +122,16 @@
     <div v-else-if="hasRegions" class="text-node-text-muted px-1 text-xs">
       {{ $t('boundingBoxes.clickRegionToEdit') }}
     </div>
+
+    <Button
+      variant="secondary"
+      size="md"
+      class="gap-2 rounded-lg border border-component-node-border bg-component-node-background text-xs text-muted-foreground hover:text-base-foreground"
+      @click="clearAll"
+    >
+      <i class="icon-[lucide--undo-2]" />
+      {{ $t('boundingBoxes.clearAll') }}
+    </Button>
   </div>
 </template>
 
@@ -167,9 +147,6 @@ import { useBoundingBoxes } from '@/composables/boundingBoxes/useBoundingBoxes'
 import type { BoundingBox } from '@/types/boundingBoxes'
 import type { NodeId } from '@/types/nodeId'
 
-const actionBtnClass =
-  'flex shrink-0 items-center gap-1.5 rounded-md border-0 bg-transparent px-2 py-1 text-sm text-base-foreground outline-none transition-colors hover:bg-component-node-widget-background-hovered'
-
 const { nodeId } = defineProps<{ nodeId: NodeId }>()
 const modelValue = defineModel<BoundingBox[]>({ default: () => [] })
 
@@ -195,8 +172,7 @@ const {
   commitInlineEditor,
   setActiveType,
   clearAll,
-  syncState,
-  grid
+  syncState
 } = useBoundingBoxes(nodeId, {
   canvasEl,
   canvasContainer,

src/components/builder/AppModeWidgetList.vue

@@ -126,7 +126,7 @@ function nodeToNodeData(node: LGraphNode) {
 
   return {
     ...nodeData,
-    hasErrors: !!executionErrorStore.surfacedNodeErrors?.[node.id],
+    hasErrors: !!executionErrorStore.lastNodeErrors?.[node.id],
     dropIndicator,
     onDragDrop: node.onDragDrop,
     onDragOver: node.onDragOver

src/components/palette/PaletteSwatchRow.test.ts

@@ -32,7 +32,7 @@ describe('PaletteSwatchRow', () => {
 
   it('appends a color when the add button is clicked', async () => {
     const { emitted } = renderRow(['#ff0000'])
-    await userEvent.click(screen.getByRole('button', { name: '+' }))
+    await userEvent.click(screen.getByRole('button'))
     expect(lastEmit(emitted)).toEqual(['#ff0000', '#ffffff'])
   })
 
@@ -44,14 +44,18 @@ describe('PaletteSwatchRow', () => {
 
   it('hides the add button once the max is reached', () => {
     renderRow(['#a', '#b'], 2)
-    expect(screen.queryByRole('button', { name: '+' })).toBeNull()
+    expect(screen.queryByRole('button')).toBeNull()
   })
 
-  it('opens the color picker when a swatch is clicked', async () => {
-    const { container } = renderRow(['#ff0000'])
-    const swatch = container.querySelector('[data-index="0"]')!
-    await userEvent.click(swatch)
-    expect(swatch.getAttribute('data-state')).toBe('open')
+  it('writes a picked color back through the hidden color input', async () => {
+    const { container, emitted } = renderRow(['#ff0000', '#00ff00'])
+    await fireEvent.click(container.querySelector('[data-index="1"]')!)
+    const input = container.querySelector(
+      'input[type="color"]'
+    ) as HTMLInputElement
+    input.value = '#0000ff'
+    await fireEvent.input(input)
+    expect(lastEmit(emitted)).toEqual(['#ff0000', '#0000ff'])
   })
 
   it('starts a drag on pointer down without emitting', async () => {

src/components/palette/PaletteSwatchRow.vue

@@ -1,25 +1,17 @@
 <template>
   <div ref="container" class="flex flex-wrap items-center gap-1">
-    <ColorPicker
+    <div
       v-for="(hex, i) in modelValue"
-      :key="i"
-      :model-value="hex"
-      :alpha="false"
-      @update:model-value="(value) => updateAt(i, value)"
-    >
-      <template #trigger>
-        <button
-          type="button"
-          :data-index="i"
-          :data-hex="hex"
-          class="relative size-5 cursor-pointer rounded-sm border border-component-node-border p-0"
-          :style="{ background: hex }"
-          :title="t('palette.swatchTitle')"
-          @contextmenu.prevent.stop="remove(i)"
-          @pointerdown="onPointerDown(i, $event)"
-        />
-      </template>
-    </ColorPicker>
+      :key="`${i}-${hex}`"
+      :data-index="i"
+      :data-hex="hex"
+      class="relative size-5 cursor-pointer rounded-sm border border-component-node-border"
+      :style="{ background: hex }"
+      :title="t('palette.swatchTitle')"
+      @click="openPicker(i, $event)"
+      @contextmenu.prevent.stop="remove(i)"
+      @pointerdown="onPointerDown(i, $event)"
+    />
     <button
       v-if="modelValue.length < max"
       type="button"
@@ -29,6 +21,12 @@
     >
       +
     </button>
+    <input
+      ref="picker"
+      type="color"
+      class="pointer-events-none absolute size-0 opacity-0"
+      @input="onPickerInput"
+    />
   </div>
 </template>
 
@@ -36,7 +34,6 @@
 import { useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import ColorPicker from '@/components/ui/color-picker/ColorPicker.vue'
 import { usePaletteSwatchRow } from '@/composables/palette/usePaletteSwatchRow'
 
 const { max = 5 } = defineProps<{ max?: number }>()
@@ -44,9 +41,8 @@ const modelValue = defineModel<string[]>({ required: true })
 const { t } = useI18n()
 
 const container = useTemplateRef<HTMLDivElement>('container')
+const picker = useTemplateRef<HTMLInputElement>('picker')
 
-const { updateAt, remove, addColor, onPointerDown } = usePaletteSwatchRow({
-  modelValue,
-  container
-})
+const { openPicker, onPickerInput, remove, addColor, onPointerDown } =
+  usePaletteSwatchRow({ modelValue, container, picker })
 </script>

src/components/rightSidePanel/errors/useErrorGroups.test.ts

@@ -5,11 +5,9 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { MissingNodeType } from '@/types/comfy'
 import type { NodeExecutionId } from '@/types/nodeIdentification'
-import type * as GraphTraversalUtil from '@/utils/graphTraversalUtil'
 
 vi.mock('@/scripts/app', () => ({
   app: {
-    isGraphReady: true,
     rootGraph: {
       serialize: vi.fn(() => ({})),
       getNodeById: vi.fn()
@@ -129,8 +127,6 @@ import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useExecutionErrorStore } from '@/stores/executionErrorStore'
 import { useMissingNodesErrorStore } from '@/platform/nodeReplacement/missingNodesErrorStore'
 import { isLGraphNode } from '@/utils/litegraphUtil'
-import { nodeError, validationError } from '@/utils/__tests__/nodeErrorHelpers'
-import { createBoundaryLinkedSubgraph } from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers'
 import {
   getExecutionIdByNode,
   getNodeByExecutionId
@@ -497,47 +493,6 @@ describe('useErrorGroups', () => {
       )
     })
 
-    it('groups lifted boundary errors under the host node card', async () => {
-      const { store, groups } = createErrorGroups()
-      const { rootGraph, host } = createBoundaryLinkedSubgraph({
-        interiorType: 'InteriorClass'
-      })
-      const { getNodeByExecutionId: actualGetNodeByExecutionId } =
-        await vi.importActual<typeof GraphTraversalUtil>(
-          '@/utils/graphTraversalUtil'
-        )
-      vi.mocked(getNodeByExecutionId).mockImplementation((_, nodeId) => {
-        return actualGetNodeByExecutionId(rootGraph, String(nodeId))
-      })
-      store.lastNodeErrors = {
-        '12:5': nodeError(
-          [
-            validationError(
-              'required_input_missing',
-              'seed_input',
-              {},
-              'Required input is missing'
-            )
-          ],
-          'InteriorClass'
-        )
-      }
-      await nextTick()
-
-      const execGroup = groups.allErrorGroups.value.find(
-        (g) => g.type === 'execution'
-      )
-      expect(execGroup?.type).toBe('execution')
-      if (execGroup?.type !== 'execution') return
-
-      const card = execGroup.cards[0]
-      expect(card.nodeId).toBe('12')
-      expect(card.title).toBe(host.title)
-      expect(card.errors[0].displayDetails).toBe(
-        `${host.title} is missing a required input: seed`
-      )
-    })
-
     it('groups node validation errors by catalog id across node types', async () => {
       const { store, groups } = createErrorGroups()
       store.lastNodeErrors = {

src/components/rightSidePanel/errors/useErrorGroups.ts

@@ -382,10 +382,10 @@ export function useErrorGroups(searchQuery: MaybeRefOrGetter<string>) {
     groupsMap: Map<string, GroupEntry>,
     filterBySelection = false
   ) {
-    if (!executionErrorStore.surfacedNodeErrors) return
+    if (!executionErrorStore.lastNodeErrors) return
 
     for (const [rawNodeId, nodeError] of Object.entries(
-      executionErrorStore.surfacedNodeErrors
+      executionErrorStore.lastNodeErrors
     )) {
       const nodeId = tryNormalizeNodeExecutionId(rawNodeId)
       if (!nodeId) continue

src/components/ui/color-picker/ColorPicker.vue

@@ -14,27 +14,20 @@ import { cn } from '@comfyorg/tailwind-utils'
 
 import ColorPickerPanel from './ColorPickerPanel.vue'
 
-const { alpha = true } = defineProps<{
+defineProps<{
   class?: string
   disabled?: boolean
-  alpha?: boolean
 }>()
 
 const modelValue = defineModel<string>({ default: '#000000' })
 
-function readHsva(hex: string): HSVA {
-  const next = hexToHsva(hex || '#000000')
-  if (!alpha) next.a = 100
-  return next
-}
-
-const hsva = ref<HSVA>(readHsva(modelValue.value))
+const hsva = ref<HSVA>(hexToHsva(modelValue.value || '#000000'))
 const displayMode = ref<'hex' | 'rgba'>('hex')
 
 watch(modelValue, (newVal) => {
   const current = hsvaToHex(hsva.value)
   if (newVal !== current) {
-    hsva.value = readHsva(newVal)
+    hsva.value = hexToHsva(newVal || '#000000')
   }
 })
 
@@ -74,51 +67,49 @@ const contentStyle = useModalLiftedZIndex(isOpen)
 <template>
   <PopoverRoot v-model:open="isOpen">
     <PopoverTrigger as-child>
-      <slot name="trigger">
-        <button
-          type="button"
-          :disabled="$props.disabled"
-          :class="
-            cn(
-              'flex h-8 w-full items-center overflow-clip rounded-lg border border-transparent bg-component-node-widget-background pr-2 outline-none hover:bg-component-node-widget-background-hovered disabled:cursor-not-allowed disabled:opacity-50',
-              isOpen && 'border-node-stroke',
-              $props.class
-            )
-          "
+      <button
+        type="button"
+        :disabled="$props.disabled"
+        :class="
+          cn(
+            'flex h-8 w-full items-center overflow-clip rounded-lg border border-transparent bg-component-node-widget-background pr-2 outline-none hover:bg-component-node-widget-background-hovered disabled:cursor-not-allowed disabled:opacity-50',
+            isOpen && 'border-node-stroke',
+            $props.class
+          )
+        "
+      >
+        <div class="flex size-8 shrink-0 items-center justify-center">
+          <div class="relative size-4 overflow-hidden rounded-sm">
+            <div
+              class="absolute inset-0"
+              :style="{
+                backgroundImage:
+                  'repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%)',
+                backgroundSize: '4px 4px'
+              }"
+            />
+            <div
+              class="absolute inset-0"
+              :style="{ backgroundColor: previewColor }"
+            />
+          </div>
+        </div>
+        <div
+          class="flex flex-1 items-center justify-between pl-1 text-xs text-component-node-foreground"
         >
-          <div class="flex size-8 shrink-0 items-center justify-center">
-            <div class="relative size-4 overflow-hidden rounded-sm">
-              <div
-                class="absolute inset-0"
-                :style="{
-                  backgroundImage:
-                    'repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%)',
-                  backgroundSize: '4px 4px'
-                }"
-              />
-              <div
-                class="absolute inset-0"
-                :style="{ backgroundColor: previewColor }"
-              />
+          <template v-if="displayMode === 'hex'">
+            <span>{{ displayHex }}</span>
+          </template>
+          <template v-else>
+            <div class="flex gap-2">
+              <span>{{ baseRgb.r }}</span>
+              <span>{{ baseRgb.g }}</span>
+              <span>{{ baseRgb.b }}</span>
             </div>
-          </div>
-          <div
-            class="flex flex-1 items-center justify-between pl-1 text-xs text-component-node-foreground"
-          >
-            <template v-if="displayMode === 'hex'">
-              <span>{{ displayHex }}</span>
-            </template>
-            <template v-else>
-              <div class="flex gap-2">
-                <span>{{ baseRgb.r }}</span>
-                <span>{{ baseRgb.g }}</span>
-                <span>{{ baseRgb.b }}</span>
-              </div>
-            </template>
-            <span>{{ hsva.a }}%</span>
-          </div>
-        </button>
-      </slot>
+          </template>
+          <span>{{ hsva.a }}%</span>
+        </div>
+      </button>
     </PopoverTrigger>
     <PopoverPortal>
       <PopoverContent
@@ -132,7 +123,6 @@ const contentStyle = useModalLiftedZIndex(isOpen)
         <ColorPickerPanel
           v-model:hsva="hsva"
           v-model:display-mode="displayMode"
-          :alpha
         />
       </PopoverContent>
     </PopoverPortal>

src/components/ui/color-picker/ColorPickerPanel.vue

@@ -13,8 +13,6 @@ import { hsbToRgb, rgbToHex } from '@/utils/colorUtil'
 import ColorPickerSaturationValue from './ColorPickerSaturationValue.vue'
 import ColorPickerSlider from './ColorPickerSlider.vue'
 
-const { alpha = true } = defineProps<{ alpha?: boolean }>()
-
 const hsva = defineModel<HSVA>('hsva', { required: true })
 const displayMode = defineModel<'hex' | 'rgba'>('displayMode', {
   required: true
@@ -39,7 +37,6 @@ const { t } = useI18n()
     />
     <ColorPickerSlider v-model="hsva.h" type="hue" />
     <ColorPickerSlider
-      v-if="alpha"
       v-model="hsva.a"
       type="alpha"
       :hue="hsva.h"
@@ -75,7 +72,7 @@ const { t } = useI18n()
           <span class="w-6 shrink-0 text-center">{{ rgb.g }}</span>
           <span class="w-6 shrink-0 text-center">{{ rgb.b }}</span>
         </template>
-        <span v-if="alpha" class="shrink-0 border-l border-border-subtle pl-1"
+        <span class="shrink-0 border-l border-border-subtle pl-1"
           >{{ hsva.a }}%</span
         >
       </div>

src/composables/boundingBoxes/boundingBoxesUtil.test.ts

@@ -156,7 +156,7 @@ describe('fromBoundingBoxes', () => {
         y: 200,
         width: 300,
         height: 400,
-        metadata: { type: 'text', text: 'hi', desc: 'd', palette: ['#ffffff'] }
+        metadata: { type: 'text', text: 'hi', desc: 'd', palette: ['#fff'] }
       }
     ]
     expect(fromBoundingBoxes(boxes, 1000, 1000)[0]).toEqual({
@@ -167,31 +167,10 @@ describe('fromBoundingBoxes', () => {
       type: 'text',
       text: 'hi',
       desc: 'd',
-      palette: ['#ffffff']
+      palette: ['#fff']
     })
   })
 
-  it('normalizes palette entries and drops invalid colors', () => {
-    const boxes: BoundingBox[] = [
-      {
-        x: 0,
-        y: 0,
-        width: 10,
-        height: 10,
-        metadata: {
-          type: 'obj',
-          text: '',
-          desc: '',
-          palette: ['#FF0000', '#abc', 'red', '', 123] as unknown as string[]
-        }
-      }
-    ]
-    expect(fromBoundingBoxes(boxes, 100, 100)[0].palette).toEqual([
-      '#ff0000',
-      '#aabbcc'
-    ])
-  })
-
   it('fills defaults when metadata is missing or partial', () => {
     const boxes = [{ x: 0, y: 0, width: 10, height: 10 }] as BoundingBox[]
     expect(fromBoundingBoxes(boxes, 100, 100)[0]).toMatchObject({

src/composables/boundingBoxes/boundingBoxesUtil.ts

@@ -202,22 +202,6 @@ function isBoundingBox(b: unknown): b is BoundingBox {
   )
 }
 
-function normalizeHexColor(color: unknown): string | null {
-  if (typeof color !== 'string') return null
-  const hex = color.trim().toLowerCase()
-  const short = /^#([0-9a-f])([0-9a-f])([0-9a-f])$/.exec(hex)
-  if (short) {
-    return `#${short[1]}${short[1]}${short[2]}${short[2]}${short[3]}${short[3]}`
-  }
-  return /^#([0-9a-f]{6}|[0-9a-f]{8})$/.test(hex) ? hex : null
-}
-
-function normalizePalette(palette: unknown): string[] {
-  return Array.isArray(palette)
-    ? palette.map(normalizeHexColor).filter((c): c is string => c !== null)
-    : []
-}
-
 export function fromBoundingBoxes(
   boxes: readonly BoundingBox[],
   width: number,
@@ -235,7 +219,9 @@ export function fromBoundingBoxes(
       type: meta.type === 'text' ? 'text' : 'obj',
       text: typeof meta.text === 'string' ? meta.text : '',
       desc: typeof meta.desc === 'string' ? meta.desc : '',
-      palette: normalizePalette(meta.palette)
+      palette: Array.isArray(meta.palette)
+        ? meta.palette.filter((c): c is string => typeof c === 'string')
+        : []
     }
   })
 }

src/composables/boundingBoxes/useBoundingBoxes.test.ts

@@ -8,32 +8,14 @@ import { useBoundingBoxes } from './useBoundingBoxes'
 import type { BoundingBox } from '@/types/boundingBoxes'
 import { toNodeId } from '@/types/nodeId'
 
-const { appState, outputState } = vi.hoisted(() => ({
-  appState: { node: null as unknown },
-  outputState: {
-    outputs: undefined as unknown,
-    nodeOutputs: null as { value: Record<string, unknown> } | null
-  }
+const { appState } = vi.hoisted(() => ({
+  appState: { node: null as unknown }
 }))
 
 vi.mock('@/scripts/app', () => ({
   app: { canvas: { graph: { getNodeById: () => appState.node } } }
 }))
 
-vi.mock('@/stores/nodeOutputStore', async () => {
-  const { ref } = await import('vue')
-  const nodeOutputs = ref<Record<string, unknown>>({})
-  outputState.nodeOutputs = nodeOutputs
-  return {
-    useNodeOutputStore: () => ({
-      nodeOutputs,
-      nodePreviewImages: ref({}),
-      getNodeImageUrls: () => undefined,
-      getNodeOutputs: () => outputState.outputs
-    })
-  }
-})
-
 const ctx = {
   measureText: (s: string) => ({ width: s.length * 7 }),
   setTransform: () => {},
@@ -45,9 +27,6 @@ const ctx = {
   save: () => {},
   restore: () => {},
   beginPath: () => {},
-  moveTo: () => {},
-  arc: () => {},
-  fill: () => {},
   rect: () => {},
   clip: () => {},
   font: '',
@@ -79,32 +58,17 @@ function makeCanvas(): HTMLCanvasElement {
   return el
 }
 
-interface MockNode {
-  widgets: { name: string; value: unknown }[]
-  findInputSlot: (name: string) => number
-  getInputNode: () => null
-  isInputConnected?: () => boolean
-}
-
-function makeNode(): MockNode {
+function makeNode() {
   return {
     widgets: [
       { name: 'width', value: 512 },
-      { name: 'height', value: 512 },
-      { name: 'last_incoming', value: [] }
+      { name: 'height', value: 512 }
     ],
     findInputSlot: () => -1,
     getInputNode: () => null
   }
 }
 
-const lastIncomingOf = (node: MockNode) =>
-  node.widgets.find((w) => w.name === 'last_incoming')!.value
-
-const setLastIncomingOf = (node: MockNode, value: BoundingBox[]) => {
-  node.widgets.find((w) => w.name === 'last_incoming')!.value = value
-}
-
 const pe = (
   clientX: number,
   clientY: number,
@@ -132,8 +96,6 @@ interface Captured extends Api {
   modelValue: Ref<BoundingBox[]>
 }
 
-const modelBoxes = (c: Captured) => c.modelValue.value
-
 function setup(initial: BoundingBox[] = []) {
   let captured: Captured | undefined
   const Harness = defineComponent({
@@ -166,19 +128,9 @@ const box = (over: Partial<BoundingBox> = {}): BoundingBox => ({
   ...over
 })
 
-function makeConnectedNode(): MockNode {
-  return {
-    ...makeNode(),
-    findInputSlot: (name: string) => (name === 'bboxes' ? 1 : -1),
-    isInputConnected: () => true
-  }
-}
-
 beforeEach(() => {
   setActivePinia(createPinia())
   appState.node = makeNode()
-  outputState.outputs = undefined
-  if (outputState.nodeOutputs) outputState.nodeOutputs.value = {}
   vi.stubGlobal('requestAnimationFrame', (cb: FrameRequestCallback) => {
     void Promise.resolve().then(() => cb(0))
     return 1
@@ -216,8 +168,8 @@ describe('useBoundingBoxes drawing', () => {
     c.onCanvasPointerMove(pe(60, 60))
     c.onDocPointerUp(pe(60, 60))
     await flush()
-    expect(modelBoxes(c)).toHaveLength(1)
-    expect(modelBoxes(c)[0].width).toBeGreaterThan(0)
+    expect(c.modelValue.value).toHaveLength(1)
+    expect(c.modelValue.value[0].width).toBeGreaterThan(0)
   })
 
   it('discards a zero-size draw', async () => {
@@ -225,7 +177,7 @@ describe('useBoundingBoxes drawing', () => {
     c.onPointerDown(pe(10, 10))
     c.onDocPointerUp(pe(10, 10))
     await flush()
-    expect(modelBoxes(c)).toHaveLength(0)
+    expect(c.modelValue.value).toHaveLength(0)
   })
 
   it('selects an existing region instead of drawing when clicking inside it', async () => {
@@ -233,7 +185,7 @@ describe('useBoundingBoxes drawing', () => {
     c.onPointerDown(pe(30, 30))
     c.onDocPointerUp(pe(30, 30))
     await flush()
-    expect(modelBoxes(c)).toHaveLength(1)
+    expect(c.modelValue.value).toHaveLength(1)
   })
 })
 
@@ -242,7 +194,7 @@ describe('useBoundingBoxes region editing', () => {
     const c = setup([box()])
     c.setActiveType('text')
     await flush()
-    expect(modelBoxes(c)[0].metadata.type).toBe('text')
+    expect(c.modelValue.value[0].metadata.type).toBe('text')
   })
 
   it('deletes the active region on Delete', async () => {
@@ -253,18 +205,14 @@ describe('useBoundingBoxes region editing', () => {
       stopPropagation: () => {}
     } as unknown as KeyboardEvent)
     await flush()
-    expect(modelBoxes(c)).toHaveLength(0)
+    expect(c.modelValue.value).toHaveLength(0)
   })
 
-  it('clears all regions and invalidates the applied upstream input', async () => {
-    const node = makeNode()
-    setLastIncomingOf(node, [box()])
-    appState.node = node
+  it('clears all regions', async () => {
     const c = setup([box(), box({ x: 0 })])
     c.clearAll()
     await flush()
-    expect(modelBoxes(c)).toHaveLength(0)
-    expect(lastIncomingOf(node)).toEqual([])
+    expect(c.modelValue.value).toHaveLength(0)
   })
 })
 
@@ -278,7 +226,7 @@ describe('useBoundingBoxes inline editor', () => {
     c.inlineEditor.value!.value = 'a label'
     c.commitInlineEditor()
     await flush()
-    expect(modelBoxes(c)[0].metadata.desc).toBe('a label')
+    expect(c.modelValue.value[0].metadata.desc).toBe('a label')
     expect(c.inlineEditor.value).toBeNull()
   })
 
@@ -291,168 +239,6 @@ describe('useBoundingBoxes inline editor', () => {
   })
 })
 
-describe('useBoundingBoxes incoming bboxes input', () => {
-  it('adopts cached outputs on mount without overwriting existing edits', () => {
-    const node = makeConnectedNode()
-    appState.node = node
-    const incoming = [box({ x: 0, width: 100 })]
-    outputState.outputs = { input_bboxes: incoming }
-    const c = setup([box({ x: 200, width: 300 })])
-    expect(modelBoxes(c)).toHaveLength(1)
-    expect(modelBoxes(c)[0].width).toBe(300)
-    expect(lastIncomingOf(node)).toEqual(incoming)
-  })
-
-  it('does not re-apply an already applied output after a remount', async () => {
-    const node = makeConnectedNode()
-    const incoming = [box({ x: 0, width: 100 })]
-    setLastIncomingOf(node, incoming)
-    appState.node = node
-    outputState.outputs = { input_bboxes: incoming }
-    const c = setup([box({ x: 200, width: 300 })])
-    outputState.nodeOutputs!.value = { updated: true }
-    await flush()
-    expect(modelBoxes(c)[0].width).toBe(300)
-  })
-
-  it('ignores incoming output when the input is not connected', () => {
-    outputState.outputs = { input_bboxes: [box({ x: 0, width: 100 })] }
-    const c = setup([])
-    expect(modelBoxes(c)).toHaveLength(0)
-  })
-
-  it('repopulates from the next run after clearing the canvas', async () => {
-    appState.node = makeConnectedNode()
-    const c = setup([])
-
-    outputState.outputs = { input_bboxes: [box({ x: 0, width: 100 })] }
-    outputState.nodeOutputs!.value = { n: 1 }
-    await flush()
-    expect(modelBoxes(c)).toHaveLength(1)
-
-    c.clearAll()
-    await flush()
-    expect(modelBoxes(c)).toHaveLength(0)
-
-    outputState.nodeOutputs!.value = { n: 2 }
-    await flush()
-    expect(modelBoxes(c)).toHaveLength(1)
-    expect(modelBoxes(c)[0].width).toBe(100)
-  })
-
-  it('does not apply output updates while the input is disconnected', async () => {
-    let connected = true
-    appState.node = {
-      ...makeConnectedNode(),
-      isInputConnected: () => connected
-    }
-    const c = setup([])
-
-    outputState.outputs = { input_bboxes: [box({ x: 0, width: 100 })] }
-    outputState.nodeOutputs!.value = { n: 1 }
-    await flush()
-    expect(modelBoxes(c)).toHaveLength(1)
-
-    c.clearAll()
-    await flush()
-    connected = false
-    outputState.nodeOutputs!.value = { n: 2 }
-    await flush()
-    expect(modelBoxes(c)).toHaveLength(0)
-  })
-
-  it('does not apply incoming boxes while the user is drawing', async () => {
-    appState.node = makeConnectedNode()
-    const c = setup([])
-    c.grid.value = false
-    c.onPointerDown(pe(10, 10))
-    c.onCanvasPointerMove(pe(50, 50))
-
-    outputState.outputs = {
-      input_bboxes: [box({ x: 0, width: 100, height: 100 })]
-    }
-    outputState.nodeOutputs!.value = { n: 1 }
-    await flush()
-
-    c.onDocPointerUp(pe(50, 50))
-    await flush()
-    expect(modelBoxes(c)).toHaveLength(1)
-    expect(modelBoxes(c)[0].width).toBe(205)
-  })
-
-  it('applies incoming boxes when outputs stream in after mount', async () => {
-    const node = makeConnectedNode()
-    appState.node = node
-    const c = setup([])
-    expect(modelBoxes(c)).toHaveLength(0)
-
-    const incoming = [box({ x: 0, width: 100 })]
-    outputState.outputs = { input_bboxes: incoming }
-    outputState.nodeOutputs!.value = { updated: true }
-    await flush()
-
-    expect(modelBoxes(c)).toHaveLength(1)
-    expect(modelBoxes(c)[0].width).toBe(100)
-    expect(lastIncomingOf(node)).toEqual(incoming)
-  })
-
-  it('re-seeds the canvas over user edits when the upstream value changes', async () => {
-    const node = makeConnectedNode()
-    setLastIncomingOf(node, [box({ x: 0, width: 100 })])
-    appState.node = node
-    const c = setup([box({ x: 200, width: 300 })])
-
-    const changed = [box({ x: 64, width: 128 })]
-    outputState.outputs = { input_bboxes: changed }
-    outputState.nodeOutputs!.value = { n: 1 }
-    await flush()
-
-    expect(modelBoxes(c)[0].width).toBe(128)
-    expect(lastIncomingOf(node)).toEqual(changed)
-  })
-})
-
-describe('useBoundingBoxes grid snapping', () => {
-  it('snaps a drawn box to the grid when grid is enabled (default)', async () => {
-    const c = setup()
-    c.onPointerDown(pe(10, 10))
-    c.onCanvasPointerMove(pe(60, 60))
-    c.onDocPointerUp(pe(60, 60))
-    await flush()
-    expect(modelBoxes(c)).toHaveLength(1)
-    expect(modelBoxes(c)[0].x).toBe(64)
-    expect(modelBoxes(c)[0].width).toBe(256)
-  })
-
-  it('does not snap when grid is disabled', async () => {
-    const c = setup()
-    c.grid.value = false
-    c.onPointerDown(pe(10, 10))
-    c.onCanvasPointerMove(pe(55, 55))
-    c.onDocPointerUp(pe(55, 55))
-    await flush()
-    expect(modelBoxes(c)[0].width).toBe(230)
-  })
-
-  it('keeps the anchored edge fixed when resizing a single edge', async () => {
-    const c = setup([box({ x: 51, y: 51, width: 256, height: 256 })])
-    c.onPointerDown(pe(60, 30))
-    c.onCanvasPointerMove(pe(80, 30))
-    c.onDocPointerUp(pe(80, 30))
-    await flush()
-    expect(modelBoxes(c)[0].x).toBe(51)
-  })
-
-  it('removes a box that a resize collapses to zero size', async () => {
-    const c = setup([box({ x: 64, y: 64, width: 128, height: 128 })])
-    c.onPointerDown(pe(37, 25))
-    c.onCanvasPointerMove(pe(14, 25))
-    c.onDocPointerUp(pe(14, 25))
-    await flush()
-    expect(modelBoxes(c)).toHaveLength(0)
-  })
-})
-
 describe('useBoundingBoxes hover cursor', () => {
   it('switches to a pointer cursor over a tag', async () => {
     const c = setup([box({ x: 10, y: 10, width: 256, height: 256 })])

src/composables/boundingBoxes/useBoundingBoxes.ts

@@ -1,5 +1,4 @@
 import { useElementSize } from '@vueuse/core'
-import { cloneDeep, isEqual } from 'es-toolkit'
 import { storeToRefs } from 'pinia'
 import type { Ref, ShallowRef } from 'vue'
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
@@ -16,7 +15,6 @@ import type {
   Region
 } from '@/composables/boundingBoxes/boundingBoxesUtil'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
-import type { NodeOutputWith } from '@/schemas/apiSchema'
 import { app } from '@/scripts/app'
 import { useNodeOutputStore } from '@/stores/nodeOutputStore'
 import type { BoundingBox } from '@/types/boundingBoxes'
@@ -27,10 +25,6 @@ const HANDLE_PX = 8
 const DIMENSION_STEP = 16
 const BG_DIM = 0.75
 const MAX_ELEMENT_COLORS = 5
-const GRID_PX = 32
-const MAX_GRID_CELLS = 64
-const DOT_ALPHA = 0.18
-const DOT_RADIUS = 1
 
 interface InlineEditorState {
   value: string
@@ -63,7 +57,6 @@ export function useBoundingBoxes(
   const hoverTagIndex = ref<number | null>(null)
   const bgImage = ref<HTMLImageElement | null>(null)
   const inlineEditor = ref<InlineEditorState | null>(null)
-  const grid = ref(true)
 
   const { width: containerWidth } = useElementSize(canvasContainer)
 
@@ -103,89 +96,6 @@ export function useBoundingBoxes(
     return Math.max(0, Math.min(1, n))
   }
 
-  function gridSpec() {
-    const axisFraction = (size: number) =>
-      Math.max(GRID_PX, Math.ceil(size / MAX_GRID_CELLS)) / size
-    return {
-      fx: axisFraction(widthValue.value),
-      fy: axisFraction(heightValue.value)
-    }
-  }
-
-  function snapFraction(value: number, step: number) {
-    return step > 0 ? clampToCanvas(Math.round(value / step) * step) : value
-  }
-
-  function snapRegion(region: Region, mode: HitMode): Region {
-    if (!grid.value) return region
-    const { fx, fy } = gridSpec()
-    if (mode === 'move') {
-      return {
-        ...region,
-        x: Math.min(snapFraction(region.x, fx), 1 - region.w),
-        y: Math.min(snapFraction(region.y, fy), 1 - region.h)
-      }
-    }
-    const snapLeft =
-      mode === 'draw' ||
-      mode === 'resize-l' ||
-      mode === 'resize-tl' ||
-      mode === 'resize-bl'
-    const snapRight =
-      mode === 'draw' ||
-      mode === 'resize-r' ||
-      mode === 'resize-tr' ||
-      mode === 'resize-br'
-    const snapTop =
-      mode === 'draw' ||
-      mode === 'resize-t' ||
-      mode === 'resize-tl' ||
-      mode === 'resize-tr'
-    const snapBottom =
-      mode === 'draw' ||
-      mode === 'resize-b' ||
-      mode === 'resize-bl' ||
-      mode === 'resize-br'
-    const x1 = snapLeft ? snapFraction(region.x, fx) : region.x
-    const y1 = snapTop ? snapFraction(region.y, fy) : region.y
-    const x2 = snapRight
-      ? snapFraction(region.x + region.w, fx)
-      : region.x + region.w
-    const y2 = snapBottom
-      ? snapFraction(region.y + region.h, fy)
-      : region.y + region.h
-    return {
-      ...region,
-      x: x1,
-      y: y1,
-      w: Math.max(0, x2 - x1),
-      h: Math.max(0, y2 - y1)
-    }
-  }
-
-  function drawDots(ctx: CanvasRenderingContext2D, W: number, H: number) {
-    const el = canvasEl.value
-    if (!el) return
-    const { fx, fy } = gridSpec()
-    if (fx <= 0 || fy <= 0) return
-    const cols = Math.round(1 / fx)
-    const rows = Math.round(1 / fy)
-    ctx.save()
-    ctx.globalAlpha = DOT_ALPHA
-    ctx.fillStyle = getComputedStyle(el).color
-    ctx.beginPath()
-    for (let i = 0; i <= cols; i++) {
-      const cx = Math.min(1, i * fx) * W
-      for (let j = 0; j <= rows; j++) {
-        const cy = Math.min(1, j * fy) * H
-        ctx.moveTo(cx + DOT_RADIUS, cy)
-        ctx.arc(cx, cy, DOT_RADIUS, 0, Math.PI * 2)
-      }
-    }
-    ctx.fill()
-    ctx.restore()
-  }
-
   function logicalSize() {
     const el = canvasEl.value
     return { w: el?.clientWidth || 1, h: el?.clientHeight || 1 }
@@ -236,8 +146,6 @@ export function useBoundingBoxes(
       ctx.fillRect(0, 0, W, H)
     }
 
-    if (grid.value) drawDots(ctx, W, H)
-
     const showActive = focused.value || isNodeSelected.value
     const aIdx = showActive ? activeIndex.value : -1
     const order = state.value.regions
@@ -458,7 +366,7 @@ export function useBoundingBoxes(
     const dx = mN.x - dragStartNorm.value.x
     const dy = mN.y - dragStartNorm.value.y
     const nb = applyDrag(dragMode.value, boxAtStart.value, dx, dy)
-    state.value.regions[activeIndex.value] = snapRegion(nb, dragMode.value)
+    state.value.regions[activeIndex.value] = nb
     requestDraw()
   }
 
@@ -467,7 +375,7 @@ export function useBoundingBoxes(
     drawing.value = false
     canvasEl.value?.releasePointerCapture?.(e.pointerId)
     const b = state.value.regions[activeIndex.value]
-    if (b && (b.w < 0.005 || b.h < 0.005)) {
+    if (b && (b.w < 0.005 || b.h < 0.005) && dragMode.value === 'draw') {
       removeRegion(activeIndex.value)
     }
     syncState()
@@ -602,7 +510,6 @@ export function useBoundingBoxes(
   function clearAll() {
     state.value.regions = []
     activeIndex.value = -1
-    setLastIncoming([])
     syncState()
   }
 
@@ -623,23 +530,6 @@ export function useBoundingBoxes(
   watch(isNodeSelected, () => requestDraw())
   watch([widthValue, heightValue], () => syncState())
 
-  watch(
-    litegraphNode,
-    (node) => {
-      const props = node?.properties as { bboxGrid?: unknown } | undefined
-      if (props && typeof props.bboxGrid === 'boolean')
-        grid.value = props.bboxGrid
-    },
-    { immediate: true }
-  )
-  watch(grid, (enabled) => {
-    const props = litegraphNode.value?.properties as
-      | Record<string, unknown>
-      | undefined
-    if (props) props.bboxGrid = enabled
-    requestDraw()
-  })
-
   const nodeOutputStore = useNodeOutputStore()
   function applyImageDimensions(naturalWidth: number, naturalHeight: number) {
     const node = litegraphNode.value
@@ -690,63 +580,10 @@ export function useBoundingBoxes(
     }
     img.src = url
   }
-  function lastIncomingWidget() {
-    return litegraphNode.value?.widgets?.find((w) => w.name === 'last_incoming')
-  }
-
-  function lastIncomingValue(): BoundingBox[] {
-    const value = lastIncomingWidget()?.value
-    return Array.isArray(value) ? (value as BoundingBox[]) : []
-  }
-
-  function setLastIncoming(boxes: BoundingBox[]) {
-    const widget = lastIncomingWidget()
-    if (!widget) return
-    const next = cloneDeep(boxes)
-    widget.value = next
-    widget.callback?.(next)
-  }
-
-  function applyIncomingBoxes(apply = true) {
-    if (drawing.value) return
-    const node = litegraphNode.value
-    if (!node) return
-    const slot = node.findInputSlot('bboxes')
-    if (slot < 0 || !node.isInputConnected(slot)) return
-    const outputs = nodeOutputStore.getNodeOutputs(node) as
-      | NodeOutputWith<{ input_bboxes?: BoundingBox[] }>
-      | undefined
-    const incoming = outputs?.input_bboxes
-    if (!incoming?.length) return
-    const applied = lastIncomingValue()
-    if (isEqual(incoming, applied)) return
-    if (!apply) {
-      if (!applied.length && state.value.regions.length)
-        setLastIncoming(incoming)
-      return
-    }
-    state.value.regions = fromBoundingBoxes(
-      incoming,
-      widthValue.value,
-      heightValue.value
-    )
-    activeIndex.value = state.value.regions.length ? 0 : -1
-    setLastIncoming(incoming)
-    syncState()
-  }
-
-  watch(
-    () => nodeOutputStore.nodeOutputs,
-    () => {
-      updateBgImage()
-      applyIncomingBoxes()
-    },
-    { deep: true }
-  )
+  watch(() => nodeOutputStore.nodeOutputs, updateBgImage, { deep: true })
   watch(() => nodeOutputStore.nodePreviewImages, updateBgImage, { deep: true })
 
   updateBgImage()
-  applyIncomingBoxes(false)
   void nextTick(() => requestDraw())
 
   onBeforeUnmount(() => {
@@ -771,7 +608,6 @@ export function useBoundingBoxes(
     commitInlineEditor,
     setActiveType,
     clearAll,
-    syncState,
-    grid
+    syncState
   }
 }

src/composables/graph/useNodeErrorFlagSync.ts

@@ -84,7 +84,7 @@ function reconcileNodeErrorFlags(
 }
 
 export function useNodeErrorFlagSync(
-  nodeErrors: Ref<Record<string, NodeError> | null>,
+  lastNodeErrors: Ref<Record<string, NodeError> | null>,
   missingModelStore: ReturnType<typeof useMissingModelStore>,
   missingMediaStore: ReturnType<typeof useMissingMediaStore>
 ): () => void {
@@ -95,7 +95,7 @@ export function useNodeErrorFlagSync(
 
   const stop = watch(
     [
-      nodeErrors,
+      lastNodeErrors,
       () => missingModelStore.missingModelNodeIds,
       () => missingMediaStore.missingMediaNodeIds,
       showErrorsTab
@@ -108,7 +108,7 @@ export function useNodeErrorFlagSync(
       // Vue nodes compute hasAnyError independently and are unaffected.
       reconcileNodeErrorFlags(
         app.rootGraph,
-        nodeErrors.value,
+        lastNodeErrors.value,
         showErrorsTab.value
           ? missingModelStore.missingModelAncestorExecutionIds
           : new Set(),

src/composables/palette/usePaletteSwatchRow.test.ts

@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import type { EffectScope } from 'vue'
 import { effectScope, ref, shallowRef } from 'vue'
 
@@ -13,12 +13,17 @@ afterEach(() => {
 function setup(initial: string[]) {
   const modelValue = ref(initial)
   const container = shallowRef(document.createElement('div'))
+  const picker = shallowRef(document.createElement('input'))
   const scope = effectScope()
   scopes.push(scope)
-  const api = scope.run(() => usePaletteSwatchRow({ modelValue, container }))!
-  return { modelValue, container, ...api }
+  const api = scope.run(() =>
+    usePaletteSwatchRow({ modelValue, container, picker })
+  )!
+  return { modelValue, container, picker, ...api }
 }
 
+const mouseEvent = () => ({ stopPropagation: vi.fn() }) as unknown as MouseEvent
+
 describe('usePaletteSwatchRow', () => {
   it('appends a default color', () => {
     const { modelValue, addColor } = setup(['#000000'])
@@ -32,17 +37,31 @@ describe('usePaletteSwatchRow', () => {
     expect(modelValue.value).toEqual(['#a', '#c'])
   })
 
-  it('updates the color at an index', () => {
-    const { modelValue, updateAt } = setup(['#a', '#b'])
-    updateAt(1, '#123456')
+  it('seeds the picker input with the clicked color before opening it', () => {
+    const { picker, openPicker } = setup(['#112233'])
+    const click = vi.spyOn(picker.value!, 'click')
+    openPicker(0, mouseEvent())
+    expect(picker.value!.value).toBe('#112233')
+    expect(click).toHaveBeenCalled()
+  })
+
+  it('falls back to white when the slot is empty', () => {
+    const { picker, openPicker } = setup([''])
+    openPicker(0, mouseEvent())
+    expect(picker.value!.value).toBe('#ffffff')
+  })
+
+  it('writes the picked color back to the open slot', () => {
+    const { modelValue, openPicker, onPickerInput } = setup(['#a', '#b'])
+    openPicker(1, mouseEvent())
+    onPickerInput({ target: { value: '#123456' } } as unknown as Event)
     expect(modelValue.value).toEqual(['#a', '#123456'])
   })
 
-  it('ignores an update that does not change the color', () => {
-    const { modelValue, updateAt } = setup(['#a'])
-    const before = modelValue.value
-    updateAt(0, '#a')
-    expect(modelValue.value).toBe(before)
+  it('ignores picker input when no slot is open', () => {
+    const { modelValue, onPickerInput } = setup(['#a'])
+    onPickerInput({ target: { value: '#123456' } } as unknown as Event)
+    expect(modelValue.value).toEqual(['#a'])
   })
 
   it('reorders via drag when the pointer crosses another swatch', () => {

src/composables/palette/usePaletteSwatchRow.ts

@@ -5,16 +5,30 @@ import { ref } from 'vue'
 interface UsePaletteSwatchRowOptions {
   modelValue: Ref<string[]>
   container: Readonly<ShallowRef<HTMLDivElement | null>>
+  picker: Readonly<ShallowRef<HTMLInputElement | null>>
 }
 
 export function usePaletteSwatchRow({
   modelValue,
-  container
+  container,
+  picker
 }: UsePaletteSwatchRowOptions) {
-  function updateAt(i: number, value: string) {
-    if (modelValue.value[i] === value) return
+  const pickerIndex = ref<number | null>(null)
+
+  function openPicker(i: number, e: MouseEvent) {
+    e.stopPropagation()
+    pickerIndex.value = i
+    const el = picker.value
+    if (!el) return
+    el.value = modelValue.value[i] || '#ffffff'
+    el.click()
+  }
+
+  function onPickerInput(e: Event) {
+    const v = (e.target as HTMLInputElement).value
+    if (pickerIndex.value === null) return
     const next = modelValue.value.slice()
-    next[i] = value
+    next[pickerIndex.value] = v
     modelValue.value = next
   }
 
@@ -91,7 +105,8 @@ export function usePaletteSwatchRow({
   })
 
   return {
-    updateAt,
+    openPicker,
+    onPickerInput,
     remove,
     addColor,
     onPointerDown

src/composables/useLoad3d.test.ts

@@ -77,14 +77,6 @@ vi.mock('pinia', async (importOriginal) => {
   }
 })
 
-const { settingGetMock } = vi.hoisted(() => ({
-  settingGetMock: vi.fn()
-}))
-
-vi.mock('@/platform/settings/settingStore', () => ({
-  useSettingStore: () => ({ get: settingGetMock })
-}))
-
 vi.mock('@/renderer/core/canvas/canvasStore', () => ({
   useCanvasStore: vi.fn()
 }))
@@ -103,9 +95,6 @@ describe('useLoad3d', () => {
     vi.clearAllMocks()
     nodeToLoad3dMap.clear()
     vi.mocked(getActivePinia).mockReturnValue(null as unknown as Pinia)
-    settingGetMock.mockImplementation((key: string) =>
-      key === 'Comfy.Load3D.BackgroundColor' ? '282828' : undefined
-    )
 
     mockNode = createMockLGraphNode({
       properties: {
@@ -367,20 +356,6 @@ describe('useLoad3d', () => {
       expect(composable.isPreview.value).toBe(true)
     })
 
-    it('should set preview mode for save-viewer nodes despite width/height widgets', async () => {
-      Object.defineProperty(mockNode, 'constructor', {
-        value: { comfyClass: 'Save3DAdvanced' },
-        configurable: true
-      })
-
-      const composable = useLoad3d(mockNode)
-      const containerRef = document.createElement('div')
-
-      await composable.initializeLoad3d(containerRef)
-
-      expect(composable.isPreview.value).toBe(true)
-    })
-
     it('should handle initialization errors', async () => {
       vi.mocked(createLoad3d).mockImplementationOnce(() => {
         throw new Error('Load3d creation failed')
@@ -408,37 +383,7 @@ describe('useLoad3d', () => {
       const nodeRef = shallowRef<LGraphNode | null>(mockNode)
       const composable = useLoad3d(nodeRef)
 
-      expect(composable.sceneConfig.value.backgroundColor).toBe('#282828')
-    })
-
-    it('defaults background color from the Comfy.Load3D.BackgroundColor setting', () => {
-      vi.mocked(getActivePinia).mockReturnValue({} as unknown as Pinia)
-      vi.mocked(useCanvasStore).mockReturnValue(
-        reactive({ appScalePercentage: 100 }) as unknown as ReturnType<
-          typeof useCanvasStore
-        >
-      )
-      settingGetMock.mockImplementation((key: string) =>
-        key === 'Comfy.Load3D.BackgroundColor' ? '123456' : undefined
-      )
-
-      const composable = useLoad3d(mockNode)
-
-      expect(composable.sceneConfig.value.backgroundColor).toBe('#123456')
-    })
-
-    it('attaches event listeners before running queued ready callbacks', async () => {
-      const composable = useLoad3d(mockNode)
-      let listenersAttachedWhenCallbackRan = false
-
-      composable.waitForLoad3d(() => {
-        listenersAttachedWhenCallbackRan =
-          vi.mocked(mockLoad3d.addEventListener!).mock.calls.length > 0
-      })
-
-      await composable.initializeLoad3d(document.createElement('div'))
-
-      expect(listenersAttachedWhenCallbackRan).toBe(true)
+      expect(composable.sceneConfig.value.backgroundColor).toBe('#000000')
     })
 
     it('passes getZoomScale callback to createLoad3d', async () => {

src/composables/useLoad3d.ts

@@ -8,7 +8,6 @@ import { useChainCallback } from '@/composables/functional/useChainCallback'
 import type Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import { createLoad3d } from '@/extensions/core/load3d/createLoad3d'
-import { isLoad3dResultViewerNode } from '@/extensions/core/load3d/nodeTypes'
 import {
   isAssetPreviewSupported,
   persistThumbnail
@@ -119,9 +118,7 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
 
   const sceneConfig = ref<SceneConfig>({
     showGrid: true,
-    backgroundColor: getActivePinia()
-      ? '#' + useSettingStore().get('Comfy.Load3D.BackgroundColor')
-      : '#282828',
+    backgroundColor: '#000000',
     backgroundImage: '',
     backgroundRenderMode: 'tiled'
   })
@@ -195,7 +192,6 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
       const heightWidget = node.widgets?.find((w) => w.name === 'height')
 
       if (
-        isLoad3dResultViewerNode(node.constructor.comfyClass ?? '') ||
         node.constructor.comfyClass?.startsWith('Preview') ||
         !(widthWidget && heightWidget)
       ) {
@@ -252,8 +248,6 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
 
       nodeToLoad3dMap.set(node, load3d)
 
-      handleEvents('add')
-
       const callbacks = pendingCallbacks.get(node)
 
       if (callbacks && load3d) {
@@ -269,6 +263,8 @@ export const useLoad3d = (nodeOrRef: MaybeRef<LGraphNode | null>) => {
           if (load3d) invokeReadyCallback(callback, load3d)
         })
       }
+
+      handleEvents('add')
     } catch (error) {
       console.error('Error initializing Load3d:', error)
       useToastStore().addAlert(

src/composables/useLoad3dViewer.ts

@@ -4,7 +4,7 @@ import QuickLRU from '@alloc/quick-lru'
 import type Load3d from '@/extensions/core/load3d/Load3d'
 import Load3dUtils from '@/extensions/core/load3d/Load3dUtils'
 import { createLoad3d } from '@/extensions/core/load3d/createLoad3d'
-import { isLoad3dResultViewerNode } from '@/extensions/core/load3d/nodeTypes'
+import { isLoad3dPreviewNode } from '@/extensions/core/load3d/nodeTypes'
 import type {
   AnimationItem,
   BackgroundRenderModeType,
@@ -371,7 +371,7 @@ export const useLoad3dViewer = (node?: LGraphNode) => {
         | LightConfig
         | undefined
 
-      isPreview.value = isLoad3dResultViewerNode(node.type ?? '')
+      isPreview.value = isLoad3dPreviewNode(node.type ?? '')
 
       if (sceneConfig) {
         backgroundColor.value =

src/core/graph/subgraph/liftNodeErrorsToBoundary.test.ts

@@ -1,299 +0,0 @@
-import { createTestingPinia } from '@pinia/testing'
-import { setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it } from 'vitest'
-
-import { promoteValueWidgetViaSubgraphInput } from '@/core/graph/subgraph/promotionUtils'
-import { nodeError, validationError } from '@/utils/__tests__/nodeErrorHelpers'
-import { LGraphNode } from '@/lib/litegraph/src/litegraph'
-import {
-  createBoundaryLinkedSubgraph,
-  createTestRootGraph,
-  createTestSubgraph,
-  createTestSubgraphNode
-} from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers'
-import { toNodeId } from '@/types/nodeId'
-
-import { liftNodeErrorsToBoundary } from './liftNodeErrorsToBoundary'
-
-beforeEach(() => {
-  setActivePinia(createTestingPinia({ stubActions: false }))
-})
-
-describe('liftNodeErrorsToBoundary', () => {
-  it('lifts a boundary-linked slot error to the host', () => {
-    const { host, rootGraph } = createBoundaryLinkedSubgraph()
-    const errors = {
-      '12:5': nodeError([
-        validationError('required_input_missing', 'seed_input')
-      ])
-    }
-
-    const result = liftNodeErrorsToBoundary(rootGraph, errors)
-
-    expect(result).toEqual({
-      '12': {
-        class_type: host.title,
-        dependent_outputs: [],
-        errors: [
-          expect.objectContaining({
-            type: 'required_input_missing',
-            extra_info: expect.objectContaining({
-              input_name: 'seed',
-              source_execution_id: '12:5',
-              source_input_name: 'seed_input'
-            })
-          })
-        ]
-      }
-    })
-  })
-
-  it('lifts a promoted-widget value error to the host input', () => {
-    const rootGraph = createTestRootGraph()
-    const subgraph = createTestSubgraph({ rootGraph })
-    const host = createTestSubgraphNode(subgraph, { id: 12 })
-    rootGraph.add(host)
-
-    const interior = new LGraphNode('CheckpointLoaderSimple')
-    interior.id = toNodeId(5)
-    const input = interior.addInput('ckpt_name', 'COMBO')
-    const widget = interior.addWidget('combo', 'ckpt_name', '', () => {}, {
-      values: ['present.safetensors']
-    })
-    input.widget = { name: widget.name }
-    subgraph.add(interior)
-
-    expect(promoteValueWidgetViaSubgraphInput(host, interior, widget).ok).toBe(
-      true
-    )
-
-    const result = liftNodeErrorsToBoundary(rootGraph, {
-      '12:5': nodeError([
-        validationError('value_not_in_list', 'ckpt_name', {
-          received_value: 'missing.safetensors',
-          input_config: ['COMBO', { values: ['present.safetensors'] }]
-        })
-      ])
-    })
-
-    expect(result['12'].errors[0].extra_info).toMatchObject({
-      input_name: 'ckpt_name',
-      source_execution_id: '12:5',
-      source_input_name: 'ckpt_name',
-      received_value: 'missing.safetensors',
-      input_config: ['COMBO', { values: ['present.safetensors'] }]
-    })
-  })
-
-  it('recurses through nested boundary-linked hosts', () => {
-    const rootGraph = createTestRootGraph()
-    const outerSubgraph = createTestSubgraph({
-      rootGraph,
-      inputs: [{ name: 'seed', type: '*' }]
-    })
-    const outerHost = createTestSubgraphNode(outerSubgraph, { id: 1 })
-    outerHost.title = 'Outer Host'
-    rootGraph.add(outerHost)
-
-    const middleSubgraph = createTestSubgraph({
-      rootGraph,
-      inputs: [{ name: 'seed', type: '*' }]
-    })
-    const middleHost = createTestSubgraphNode(middleSubgraph, {
-      id: 2,
-      parentGraph: outerSubgraph
-    })
-    outerSubgraph.add(middleHost)
-    outerSubgraph.inputNode.slots[0].connect(middleHost.inputs[0], middleHost)
-
-    const leaf = new LGraphNode('LeafNode')
-    leaf.id = toNodeId(3)
-    const leafInput = leaf.addInput('seed_input', '*')
-    middleSubgraph.add(leaf)
-    middleSubgraph.inputNode.slots[0].connect(leafInput, leaf)
-
-    const result = liftNodeErrorsToBoundary(rootGraph, {
-      '1:2:3': nodeError([
-        validationError('required_input_missing', 'seed_input')
-      ])
-    })
-
-    expect(Object.keys(result)).toEqual(['1'])
-    expect(result['1'].class_type).toBe(outerHost.title)
-    expect(result['1'].errors[0].extra_info).toMatchObject({
-      input_name: 'seed',
-      source_execution_id: '1:2:3',
-      source_input_name: 'seed_input'
-    })
-  })
-
-  it('keeps errors on ordinary interior data-flow links', () => {
-    const rootGraph = createTestRootGraph()
-    const subgraph = createTestSubgraph({
-      rootGraph,
-      inputs: [{ name: 'seed', type: '*' }]
-    })
-    const host = createTestSubgraphNode(subgraph, { id: 12 })
-    rootGraph.add(host)
-
-    const source = new LGraphNode('SourceNode')
-    source.id = toNodeId(4)
-    source.addOutput('seed', '*')
-    subgraph.add(source)
-
-    const target = new LGraphNode('TargetNode')
-    target.id = toNodeId(5)
-    target.addInput('seed_input', '*')
-    subgraph.add(target)
-    source.connect(0, target, 0)
-
-    const errors = {
-      '12:5': nodeError([
-        validationError('required_input_missing', 'seed_input')
-      ])
-    }
-
-    expect(liftNodeErrorsToBoundary(rootGraph, errors)).toEqual(errors)
-  })
-
-  it('keeps errors without a liftable subject on the interior node', () => {
-    const { rootGraph } = createBoundaryLinkedSubgraph()
-    const errors = {
-      '12:5': nodeError([
-        validationError('required_input_missing'),
-        validationError('exception_during_validation', 'seed_input'),
-        validationError('dependency_cycle', 'seed_input'),
-        validationError(
-          'custom_validation_failed',
-          'seed_input',
-          { received_value: 'image.png' },
-          'Invalid image file'
-        )
-      ])
-    }
-
-    expect(liftNodeErrorsToBoundary(rootGraph, errors)).toEqual(errors)
-  })
-
-  it('keeps unknown typed validation errors on the interior node', () => {
-    const { rootGraph } = createBoundaryLinkedSubgraph()
-    const errors = {
-      '12:5': nodeError([
-        validationError('future_backend_validation_type', 'seed_input')
-      ])
-    }
-
-    expect(liftNodeErrorsToBoundary(rootGraph, errors)).toEqual(errors)
-  })
-
-  it('splits liftable and non-liftable errors from the same node entry', () => {
-    const { rootGraph } = createBoundaryLinkedSubgraph()
-
-    const result = liftNodeErrorsToBoundary(rootGraph, {
-      '12:5': nodeError([
-        validationError('required_input_missing', 'seed_input'),
-        validationError('exception_during_validation', 'seed_input')
-      ])
-    })
-
-    expect(result['12'].errors).toHaveLength(1)
-    expect(result['12'].errors[0].type).toBe('required_input_missing')
-    expect(result['12:5'].errors).toHaveLength(1)
-    expect(result['12:5'].errors[0].type).toBe('exception_during_validation')
-  })
-
-  it('merges a lifted error into an existing host entry', () => {
-    const { rootGraph } = createBoundaryLinkedSubgraph()
-    const errors = {
-      '12': {
-        class_type: 'ExistingHostClass',
-        dependent_outputs: ['existing-output'],
-        errors: [validationError('value_smaller_than_min', 'other')]
-      },
-      '12:5': nodeError([
-        validationError('required_input_missing', 'seed_input')
-      ])
-    }
-
-    const result = liftNodeErrorsToBoundary(rootGraph, errors)
-
-    expect(result['12']).toMatchObject({
-      class_type: 'ExistingHostClass',
-      dependent_outputs: ['existing-output']
-    })
-    expect(result['12'].errors.map((error) => error.type)).toEqual([
-      'value_smaller_than_min',
-      'required_input_missing'
-    ])
-  })
-
-  it('keeps own errors before lifted errors for nested host keys', () => {
-    const rootGraph = createTestRootGraph()
-    const outerSubgraph = createTestSubgraph({ rootGraph })
-    const outerHost = createTestSubgraphNode(outerSubgraph, { id: 1 })
-    rootGraph.add(outerHost)
-
-    const middleSubgraph = createTestSubgraph({
-      rootGraph,
-      inputs: [{ name: 'seed', type: '*' }]
-    })
-    const middleHost = createTestSubgraphNode(middleSubgraph, {
-      id: 2,
-      parentGraph: outerSubgraph
-    })
-    outerSubgraph.add(middleHost)
-
-    const leaf = new LGraphNode('LeafNode')
-    leaf.id = toNodeId(3)
-    const leafInput = leaf.addInput('seed_input', '*')
-    middleSubgraph.add(leaf)
-    middleSubgraph.inputNode.slots[0].connect(leafInput, leaf)
-
-    const result = liftNodeErrorsToBoundary(rootGraph, {
-      '1:2:3': nodeError([
-        validationError('required_input_missing', 'seed_input')
-      ]),
-      '1:2': nodeError([validationError('value_smaller_than_min', 'seed')])
-    })
-
-    expect(result['1:2'].errors.map((error) => error.type)).toEqual([
-      'value_smaller_than_min',
-      'required_input_missing'
-    ])
-  })
-
-  it('preserves empty error entries unchanged', () => {
-    const rootGraph = createTestRootGraph()
-    const errors = {
-      '12': nodeError([], 'ExtraRootNode')
-    }
-
-    expect(liftNodeErrorsToBoundary(rootGraph, errors)).toEqual(errors)
-  })
-
-  it('fails open without mutating the input record', () => {
-    const rootGraph = createTestRootGraph()
-    const subgraph = createTestSubgraph({ rootGraph })
-    const host = createTestSubgraphNode(subgraph, { id: 12 })
-    rootGraph.add(host)
-    const interior = new LGraphNode('InteriorNode')
-    interior.id = toNodeId(5)
-    interior.addInput('unlinked', '*')
-    subgraph.add(interior)
-
-    const errors = {
-      '99:5': nodeError([validationError('required_input_missing', 'x')]),
-      '12:5': nodeError([
-        validationError('required_input_missing', 'missing'),
-        validationError('value_not_in_list', 'unlinked')
-      ])
-    }
-    const original = structuredClone(errors)
-
-    const result = liftNodeErrorsToBoundary(rootGraph, errors)
-
-    expect(result).toEqual(original)
-    expect(errors).toEqual(original)
-    expect(result).not.toBe(errors)
-  })
-})

src/core/graph/subgraph/liftNodeErrorsToBoundary.ts

@@ -1,193 +0,0 @@
-import { groupBy, partition } from 'es-toolkit'
-
-import type { LGraph } from '@/lib/litegraph/src/litegraph'
-import type { NodeError } from '@/schemas/apiSchema'
-import { tryNormalizeNodeExecutionId } from '@/types/nodeIdentification'
-import type { NodeExecutionId } from '@/types/nodeIdentification'
-import { isNodeLevelValidationError } from '@/utils/executionErrorUtil'
-import type { NodeValidationError } from '@/utils/executionErrorUtil'
-import { getNodeByExecutionId } from '@/utils/graphTraversalUtil'
-import { isSubgraph } from '@/utils/typeGuardUtil'
-
-export interface LiftedErrorExtraInfo {
-  input_name: string
-  source_execution_id: string
-  source_input_name: string
-}
-
-export interface LiftedSurface {
-  hostExecId: NodeExecutionId
-  hostInputName: string
-}
-
-interface ErrorPlacement {
-  kind: 'own' | 'lifted'
-  targetExecId: string
-  error: NodeValidationError
-}
-
-export function getLiftedErrorSource(
-  error: NodeValidationError
-): LiftedErrorExtraInfo | null {
-  const extraInfo = error.extra_info
-  if (!extraInfo) return null
-
-  const { input_name, source_execution_id, source_input_name } = extraInfo
-  if (
-    typeof input_name !== 'string' ||
-    typeof source_execution_id !== 'string' ||
-    typeof source_input_name !== 'string'
-  ) {
-    return null
-  }
-
-  return { input_name, source_execution_id, source_input_name }
-}
-
-function getHostExecutionId(executionId: string): NodeExecutionId | null {
-  const separatorIndex = executionId.lastIndexOf(':')
-  if (separatorIndex <= 0) return null
-  return tryNormalizeNodeExecutionId(executionId.slice(0, separatorIndex))
-}
-
-/**
- * Boundary surfaces that expose `(executionId, inputName)`, innermost first.
- * Walks one host per level and stops at the last resolvable surface, so an
- * unresolvable deeper host falls back to the shallower one (fail-open).
- */
-export function resolveLiftChain(
-  rootGraph: LGraph,
-  executionId: string,
-  inputName: string
-): LiftedSurface[] {
-  const chain: LiftedSurface[] = []
-  let currentExecId = executionId
-  let currentInputName = inputName
-
-  for (;;) {
-    const node = getNodeByExecutionId(rootGraph, currentExecId)
-    const graph = node?.graph
-    if (!node || !graph || !isSubgraph(graph)) break
-
-    const slot = node.inputs?.find((input) => input.name === currentInputName)
-    if (slot?.link == null) break
-
-    const subgraphInput = graph
-      .getLink(slot.link)
-      ?.resolve(graph)?.subgraphInput
-    if (!subgraphInput) break
-
-    const hostExecId = getHostExecutionId(currentExecId)
-    if (!hostExecId || !getNodeByExecutionId(rootGraph, hostExecId)) break
-
-    chain.push({ hostExecId, hostInputName: subgraphInput.name })
-    currentExecId = hostExecId
-    currentInputName = subgraphInput.name
-  }
-
-  return chain
-}
-
-function createEmptyNodeError(nodeError: NodeError): NodeError {
-  return {
-    ...nodeError,
-    errors: []
-  }
-}
-
-// Lifted host entries use the host title for display; SubgraphNode.type is a UUID.
-function createLiftedHostEntry(
-  rootGraph: LGraph,
-  hostExecId: string
-): NodeError {
-  return {
-    class_type:
-      getNodeByExecutionId(rootGraph, hostExecId)?.title ?? hostExecId,
-    dependent_outputs: [],
-    errors: []
-  }
-}
-
-function toErrorPlacement(
-  rootGraph: LGraph,
-  executionId: string,
-  error: NodeValidationError
-): ErrorPlacement {
-  const inputName = error.extra_info?.input_name
-  const surface =
-    inputName && !isNodeLevelValidationError(error)
-      ? resolveLiftChain(rootGraph, executionId, inputName).at(-1)
-      : undefined
-
-  if (!inputName || !surface) {
-    return {
-      kind: 'own',
-      targetExecId: executionId,
-      error
-    }
-  }
-
-  const liftedExtraInfo: LiftedErrorExtraInfo = {
-    input_name: surface.hostInputName,
-    source_execution_id: executionId,
-    source_input_name: inputName
-  }
-
-  return {
-    kind: 'lifted',
-    targetExecId: surface.hostExecId,
-    error: {
-      ...error,
-      extra_info: {
-        ...error.extra_info,
-        ...liftedExtraInfo
-      }
-    }
-  }
-}
-
-export function liftNodeErrorsToBoundary(
-  rootGraph: LGraph,
-  nodeErrors: Record<string, NodeError>
-): Record<string, NodeError> {
-  const output: Record<string, NodeError> = {}
-  const placements = Object.entries(nodeErrors).flatMap(
-    ([executionId, nodeError]) =>
-      nodeError.errors.map((error) =>
-        toErrorPlacement(rootGraph, executionId, error)
-      )
-  )
-
-  for (const [executionId, nodeError] of Object.entries(nodeErrors)) {
-    if (nodeError.errors.length === 0) {
-      output[executionId] = createEmptyNodeError(nodeError)
-    }
-  }
-
-  const placementsByTarget = groupBy(
-    placements,
-    (placement) => placement.targetExecId
-  )
-
-  for (const [targetExecId, targetPlacements] of Object.entries(
-    placementsByTarget
-  )) {
-    const baseEntry = nodeErrors[targetExecId]
-      ? createEmptyNodeError(nodeErrors[targetExecId])
-      : createLiftedHostEntry(rootGraph, targetExecId)
-
-    const [ownErrors, liftedErrors] = partition(
-      targetPlacements,
-      (placement) => placement.kind === 'own'
-    )
-
-    output[targetExecId] = {
-      ...baseEntry,
-      errors: [...ownErrors, ...liftedErrors].map(
-        (placement) => placement.error
-      )
-    }
-  }
-
-  return output
-}

src/extensions/core/createBoundingBoxes.test.ts

@@ -32,8 +32,7 @@ function makeNode(connected: boolean, comfyClass = 'CreateBoundingBoxes') {
   const widgets: MockWidget[] = [
     { name: 'width', hidden: false, options: {} },
     { name: 'height', hidden: false, options: {} },
-    { name: 'other', hidden: false, options: {} },
-    { name: 'last_incoming', hidden: false, options: {} }
+    { name: 'other', hidden: false, options: {} }
   ]
   return {
     constructor: { comfyClass },
@@ -74,15 +73,6 @@ describe('Comfy.CreateBoundingBoxes extension', () => {
     expect(node.widgets[0].options.hidden).toBe(false)
   })
 
-  it('always hides the internal last_incoming widget', () => {
-    for (const connected of [true, false]) {
-      const node = makeNode(connected)
-      state.extension!.nodeCreated(node)
-      expect(node.widgets[3].hidden).toBe(true)
-      expect(node.widgets[3].options.hidden).toBe(true)
-    }
-  })
-
   it('writes visibility through the widget value store when present', () => {
     state.widgetState = { options: {} }
     const node = makeNode(true)

src/extensions/core/createBoundingBoxes.ts

@@ -3,7 +3,6 @@ import { useExtensionService } from '@/services/extensionService'
 import { useWidgetValueStore } from '@/stores/widgetValueStore'
 
 const DIMENSION_WIDGETS = new Set(['width', 'height'])
-const INTERNAL_WIDGETS = new Set(['last_incoming'])
 
 useExtensionService().registerExtension({
   name: 'Comfy.CreateBoundingBoxes',
@@ -16,30 +15,20 @@ useExtensionService().registerExtension({
 
     const widgetValueStore = useWidgetValueStore()
 
-    const setWidgetHidden = (
-      widget: NonNullable<typeof node.widgets>[number],
-      hidden: boolean
-    ) => {
-      widget.hidden = hidden
-      const state = widget.widgetId
-        ? widgetValueStore.getWidget(widget.widgetId)
-        : undefined
-      if (state?.options) state.options.hidden = hidden
-      else widget.options.hidden = hidden
-    }
-
     const syncDimensionVisibility = () => {
       const slot = node.findInputSlot('background')
       const hidden = slot >= 0 && node.isInputConnected(slot)
       for (const widget of node.widgets ?? []) {
-        if (DIMENSION_WIDGETS.has(widget.name)) setWidgetHidden(widget, hidden)
+        if (!DIMENSION_WIDGETS.has(widget.name)) continue
+        widget.hidden = hidden
+        const state = widget.widgetId
+          ? widgetValueStore.getWidget(widget.widgetId)
+          : undefined
+        if (state?.options) state.options.hidden = hidden
+        else widget.options.hidden = hidden
       }
     }
 
-    for (const widget of node.widgets ?? []) {
-      if (INTERNAL_WIDGETS.has(widget.name)) setWidgetHidden(widget, true)
-    }
-
     syncDimensionVisibility()
     node.onConnectionsChange = useChainCallback(
       node.onConnectionsChange,

src/extensions/core/load3d.test.ts

@@ -143,23 +143,14 @@ async function loadExtensionsFresh(): Promise<{
   load3DExt: ExtCreated
   preview3DExt: ExtCreated
   preview3DAdvancedExt: ExtCreated
-  save3DAdvancedExt: ExtCreated
 }> {
   vi.resetModules()
   registerExtensionMock.mockClear()
   await import('@/extensions/core/load3d')
-  const extByName = (name: string): ExtCreated => {
-    const call = registerExtensionMock.mock.calls.find(
-      (c) => (c[0] as ExtCreated).name === name
-    )
-    if (!call) throw new Error(`Extension ${name} was not registered`)
-    return call[0] as ExtCreated
-  }
   return {
-    load3DExt: extByName('Comfy.Load3D'),
-    preview3DExt: extByName('Comfy.Preview3D'),
-    preview3DAdvancedExt: extByName('Comfy.Preview3DAdvanced'),
-    save3DAdvancedExt: extByName('Comfy.Save3DAdvanced')
+    load3DExt: registerExtensionMock.mock.calls[0][0] as ExtCreated,
+    preview3DExt: registerExtensionMock.mock.calls[1][0] as ExtCreated,
+    preview3DAdvancedExt: registerExtensionMock.mock.calls[2][0] as ExtCreated
   }
 }
 
@@ -273,15 +264,14 @@ function setupBaseMocks() {
 describe('load3d module registration', () => {
   beforeEach(setupBaseMocks)
 
-  it('registers Comfy.Load3D, Comfy.Preview3D, Comfy.Preview3DAdvanced, and Comfy.Save3DAdvanced extensions on import', async () => {
-    const { load3DExt, preview3DExt, preview3DAdvancedExt, save3DAdvancedExt } =
+  it('registers Comfy.Load3D, Comfy.Preview3D, and Comfy.Preview3DAdvanced extensions on import', async () => {
+    const { load3DExt, preview3DExt, preview3DAdvancedExt } =
       await loadExtensionsFresh()
 
-    expect(registerExtensionMock).toHaveBeenCalledTimes(4)
+    expect(registerExtensionMock).toHaveBeenCalledTimes(3)
     expect(load3DExt.name).toBe('Comfy.Load3D')
     expect(preview3DExt.name).toBe('Comfy.Preview3D')
     expect(preview3DAdvancedExt.name).toBe('Comfy.Preview3DAdvanced')
-    expect(save3DAdvancedExt.name).toBe('Comfy.Save3DAdvanced')
   })
 })
 
@@ -721,39 +711,6 @@ describe('Comfy.Preview3D.onNodeOutputsUpdated', () => {
   })
 })
 
-describe('Comfy.Save3DAdvanced.onNodeOutputsUpdated', () => {
-  beforeEach(setupBaseMocks)
-
-  it('restores the saved model from the output folder when opened from history', async () => {
-    const { save3DAdvancedExt } = await loadExtensionsFresh()
-    const node = makePreview3DAdvancedNode({ comfyClass: 'Save3DAdvanced' })
-    getNodeByLocatorIdMock.mockReturnValue(node)
-
-    save3DAdvancedExt.onNodeOutputsUpdated!({
-      '7': { result: ['3d\\ComfyUI_00001.glb'] }
-    } as never)
-
-    expect(node.properties['Last Time Model File']).toBe('3d/ComfyUI_00001.glb')
-    expect(configureForSaveMeshMock).toHaveBeenCalledWith(
-      'output',
-      '3d/ComfyUI_00001.glb',
-      expect.objectContaining({ silentOnNotFound: true })
-    )
-  })
-
-  it('skips nodes whose comfyClass is not Save3DAdvanced', async () => {
-    const { save3DAdvancedExt } = await loadExtensionsFresh()
-    const node = makePreview3DAdvancedNode({ comfyClass: 'Preview3DAdvanced' })
-    getNodeByLocatorIdMock.mockReturnValue(node)
-
-    save3DAdvancedExt.onNodeOutputsUpdated!({
-      '7': { result: ['mesh.glb'] }
-    } as never)
-
-    expect(configureForSaveMeshMock).not.toHaveBeenCalled()
-  })
-})
-
 describe('Comfy.Preview3DAdvanced.nodeCreated', () => {
   beforeEach(setupBaseMocks)
 
@@ -1075,50 +1032,6 @@ describe('Comfy.Preview3DAdvanced.getNodeMenuItems', () => {
   })
 })
 
-describe('Comfy.Save3DAdvanced.nodeCreated', () => {
-  beforeEach(setupBaseMocks)
-
-  it('skips nodes whose comfyClass is not Save3DAdvanced', async () => {
-    const { save3DAdvancedExt } = await loadExtensionsFresh()
-    const node = makePreview3DAdvancedNode({ comfyClass: 'Preview3DAdvanced' })
-
-    await save3DAdvancedExt.nodeCreated(node)
-
-    expect(waitForLoad3dMock).not.toHaveBeenCalled()
-    expect(configureForSaveMeshMock).not.toHaveBeenCalled()
-  })
-
-  it('restores persisted models from the output folder, not temp', async () => {
-    const { save3DAdvancedExt } = await loadExtensionsFresh()
-    const node = makePreview3DAdvancedNode({
-      comfyClass: 'Save3DAdvanced',
-      properties: { 'Last Time Model File': '3d/ComfyUI_00001_.glb' }
-    })
-
-    await save3DAdvancedExt.nodeCreated(node)
-
-    expect(configureForSaveMeshMock).toHaveBeenCalledWith(
-      'output',
-      '3d/ComfyUI_00001_.glb',
-      { silentOnNotFound: true }
-    )
-  })
-
-  it('onExecuted loads the saved file from the output folder', async () => {
-    const { save3DAdvancedExt } = await loadExtensionsFresh()
-    const node = makePreview3DAdvancedNode({ comfyClass: 'Save3DAdvanced' })
-
-    await save3DAdvancedExt.nodeCreated(node)
-    node.onExecuted!({ result: ['3d/ComfyUI_00002_.glb'] })
-
-    expect(configureForSaveMeshMock).toHaveBeenCalledWith(
-      'output',
-      '3d/ComfyUI_00002_.glb',
-      { silentOnNotFound: true }
-    )
-  })
-})
-
 describe('Comfy.Load3D scene widget serializeValue caching', () => {
   beforeEach(setupBaseMocks)
 

src/extensions/core/load3d.ts

@@ -15,10 +15,8 @@ import { createExportMenuItems } from '@/extensions/core/load3d/exportMenuHelper
 import type {
   CameraConfig,
   CameraState,
-  LoadFolder,
   Model3DInfo
 } from '@/extensions/core/load3d/interfaces'
-import type Load3d from '@/extensions/core/load3d/Load3d'
 import Load3DConfiguration from '@/extensions/core/load3d/Load3DConfiguration'
 import {
   LOAD3D_NONE_MODEL,
@@ -50,7 +48,6 @@ import { ComponentWidgetImpl, addWidget } from '@/scripts/domWidget'
 import { useExtensionService } from '@/services/extensionService'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
-import type { ComfyExtension } from '@/types/comfy'
 import { isLoad3dNode } from '@/utils/litegraphUtil'
 
 const inputSpecLoad3D: CustomInputSpec = {
@@ -290,11 +287,8 @@ useExtensionService().registerExtension({
   getCustomWidgets() {
     const VIEWPORT_STATE_NODES = new Set([
       'Preview3DAdvanced',
-      'Save3DAdvanced',
       'PreviewGaussianSplat',
-      'PreviewPointCloud',
-      'SaveGaussianSplat',
-      'SavePointCloud'
+      'PreviewPointCloud'
     ])
     return {
       LOAD_3D(node) {
@@ -685,215 +679,155 @@ useExtensionService().registerExtension({
   }
 })
 
-function applyPreview3DAdvancedResult(
-  node: LGraphNode,
-  load3d: Load3d,
-  result: NonNullable<Preview3DAdvancedOutput['result']>,
-  loadFolder: LoadFolder,
-  comfyClass: string
-): void {
-  const filePath = result[0]
-  if (!filePath) return
+useExtensionService().registerExtension({
+  name: 'Comfy.Preview3DAdvanced',
 
-  const normalizedPath = filePath.replaceAll('\\', '/')
-  node.properties['Last Time Model File'] = normalizedPath
+  getNodeMenuItems(node: LGraphNode): (IContextMenuValue | null)[] {
+    if (node.constructor.comfyClass !== 'Preview3DAdvanced') return []
 
-  const config = new Load3DConfiguration(load3d, node.properties)
-  config.configureForSaveMesh(loadFolder, normalizedPath, {
-    silentOnNotFound: true
-  })
+    const load3d = useLoad3dService().getLoad3d(node)
+    if (!load3d) return []
 
-  const cameraState = result[1]
-  const modelTransform = result[2]?.[0]
-  if (!cameraState && !modelTransform) return
+    if (load3d.isSplatModel()) return []
 
-  const targetGeneration = load3d.currentLoadGeneration
-  void load3d
-    .whenLoadIdle()
-    .then(() => {
-      if (load3d.currentLoadGeneration !== targetGeneration) return
-      if (cameraState) load3d.setCameraState(cameraState)
-      if (modelTransform) load3d.applyModelTransform(modelTransform)
-    })
-    .catch((error) => {
-      console.error(
-        `Failed to apply input camera_info / model_3d_info from ${comfyClass}:`,
-        error
-      )
-    })
-}
+    return createExportMenuItems(load3d)
+  },
 
-function createPreview3DAdvancedExtension(
-  comfyClass: string,
-  extensionName: string,
-  loadFolder: LoadFolder
-): ComfyExtension {
-  return {
-    name: extensionName,
+  async nodeCreated(node: LGraphNode) {
+    if (node.constructor.comfyClass !== 'Preview3DAdvanced') return
 
-    onNodeOutputsUpdated(
-      nodeOutputs: Record<NodeLocatorId, NodeExecutionOutput>
-    ) {
-      for (const [locatorId, output] of Object.entries(nodeOutputs)) {
-        const result = (output as Preview3DAdvancedOutput).result
-        if (!result?.[0]) continue
+    const [oldWidth, oldHeight] = node.size
 
-        const node = getNodeByLocatorId(app.rootGraph, locatorId)
-        if (!node || node.constructor.comfyClass !== comfyClass) continue
+    node.setSize([Math.max(oldWidth, 400), Math.max(oldHeight, 550)])
 
-        useLoad3d(node).waitForLoad3d((load3d) => {
-          applyPreview3DAdvancedResult(
-            node,
-            load3d,
-            result,
-            loadFolder,
-            comfyClass
+    await nextTick()
+
+    const onExecuted = node.onExecuted
+
+    useLoad3d(node).onLoad3dReady((load3d) => {
+      const lastTimeModelFile = node.properties['Last Time Model File']
+      if (!lastTimeModelFile) return
+
+      const config = new Load3DConfiguration(load3d, node.properties)
+      config.configureForSaveMesh('temp', lastTimeModelFile as string, {
+        silentOnNotFound: true
+      })
+
+      const cameraConfig = node.properties['Camera Config'] as
+        | CameraConfig
+        | undefined
+      const cameraState = cameraConfig?.state
+      if (!cameraState) return
+
+      const targetGeneration = load3d.currentLoadGeneration
+      void load3d
+        .whenLoadIdle()
+        .then(() => {
+          if (load3d.currentLoadGeneration !== targetGeneration) return
+          load3d.setCameraState(cameraState)
+          load3d.forceRender()
+        })
+        .catch((error) => {
+          console.error(
+            'Failed to restore camera state for Preview3DAdvanced:',
+            error
           )
         })
+    })
+
+    useLoad3d(node).waitForLoad3d((load3d) => {
+      const sceneWidget = node.widgets?.find((w) => w.name === 'viewport_state')
+      if (!sceneWidget) return
+
+      const resolveLoad3d = () => nodeToLoad3dMap.get(node) ?? load3d
+
+      const widthWidget = node.widgets?.find((w) => w.name === 'width')
+      const heightWidget = node.widgets?.find((w) => w.name === 'height')
+      if (widthWidget && heightWidget) {
+        load3d.setTargetSize(
+          widthWidget.value as number,
+          heightWidget.value as number
+        )
+        widthWidget.callback = (value: number) => {
+          resolveLoad3d().setTargetSize(value, heightWidget.value as number)
+        }
+        heightWidget.callback = (value: number) => {
+          resolveLoad3d().setTargetSize(widthWidget.value as number, value)
+        }
       }
-    },
 
-    getNodeMenuItems(node: LGraphNode): (IContextMenuValue | null)[] {
-      if (node.constructor.comfyClass !== comfyClass) return []
+      sceneWidget.serializeValue = async () => {
+        const currentLoad3d = nodeToLoad3dMap.get(node)
+        if (!currentLoad3d) {
+          console.error('No load3d instance found for node')
+          return null
+        }
 
-      const load3d = useLoad3dService().getLoad3d(node)
-      if (!load3d) return []
+        const cameraConfig: CameraConfig = (node.properties['Camera Config'] as
+          | CameraConfig
+          | undefined) || {
+          cameraType: currentLoad3d.getCurrentCameraType(),
+          fov: currentLoad3d.cameraManager.perspectiveCamera.fov
+        }
+        cameraConfig.state = currentLoad3d.getCameraState()
+        node.properties['Camera Config'] = cameraConfig
 
-      if (load3d.isSplatModel()) return []
+        const modelInfo = currentLoad3d.getModelInfo()
+        const model_3d_info: Model3DInfo = modelInfo ? [modelInfo] : []
 
-      return createExportMenuItems(load3d)
-    },
+        return {
+          image: '',
+          mask: '',
+          normal: '',
+          camera_info: cameraConfig.state || null,
+          recording: '',
+          model_3d_info
+        }
+      }
 
-    async nodeCreated(node: LGraphNode) {
-      if (node.constructor.comfyClass !== comfyClass) return
+      node.onExecuted = function (output: Preview3DAdvancedOutput) {
+        onExecuted?.call(this, output)
 
-      const [oldWidth, oldHeight] = node.size
+        const result = output.result
+        const filePath = result?.[0]
 
-      node.setSize([Math.max(oldWidth, 400), Math.max(oldHeight, 550)])
+        if (!filePath) {
+          const msg = t('toastMessages.unableToGetModelFilePath')
+          console.error(msg)
+          useToastStore().addAlert(msg)
+          return
+        }
 
-      await nextTick()
+        const normalizedPath = filePath.replaceAll('\\', '/')
+        node.properties['Last Time Model File'] = normalizedPath
 
-      const onExecuted = node.onExecuted
-      const { onLoad3dReady, waitForLoad3d } = useLoad3d(node)
-
-      onLoad3dReady((load3d) => {
-        const lastTimeModelFile = node.properties['Last Time Model File']
-        if (!lastTimeModelFile) return
-
-        const config = new Load3DConfiguration(load3d, node.properties)
-        config.configureForSaveMesh(loadFolder, lastTimeModelFile as string, {
+        const currentLoad3d = resolveLoad3d()
+        const config = new Load3DConfiguration(currentLoad3d, node.properties)
+        config.configureForSaveMesh('temp', normalizedPath, {
           silentOnNotFound: true
         })
 
-        const cameraConfig = node.properties['Camera Config'] as
-          | CameraConfig
-          | undefined
-        const cameraState = cameraConfig?.state
-        if (!cameraState) return
-
-        const targetGeneration = load3d.currentLoadGeneration
-        void load3d
-          .whenLoadIdle()
-          .then(() => {
-            if (load3d.currentLoadGeneration !== targetGeneration) return
-            load3d.setCameraState(cameraState)
-            load3d.forceRender()
-          })
-          .catch((error) => {
-            console.error(
-              `Failed to restore camera state for ${comfyClass}:`,
-              error
-            )
-          })
-      })
-
-      waitForLoad3d((load3d) => {
-        const sceneWidget = node.widgets?.find(
-          (w) => w.name === 'viewport_state'
-        )
-        if (!sceneWidget) return
-
-        const resolveLoad3d = () => nodeToLoad3dMap.get(node) ?? load3d
-
-        const widthWidget = node.widgets?.find((w) => w.name === 'width')
-        const heightWidget = node.widgets?.find((w) => w.name === 'height')
-        if (widthWidget && heightWidget) {
-          load3d.setTargetSize(
-            widthWidget.value as number,
-            heightWidget.value as number
-          )
-          widthWidget.callback = (value: number) => {
-            resolveLoad3d().setTargetSize(value, heightWidget.value as number)
-          }
-          heightWidget.callback = (value: number) => {
-            resolveLoad3d().setTargetSize(widthWidget.value as number, value)
-          }
+        const cameraState = result?.[1]
+        const modelTransform = result?.[2]?.[0]
+        if (cameraState || modelTransform) {
+          const targetGeneration = currentLoad3d.currentLoadGeneration
+          void currentLoad3d
+            .whenLoadIdle()
+            .then(() => {
+              if (currentLoad3d.currentLoadGeneration !== targetGeneration)
+                return
+              if (cameraState) currentLoad3d.setCameraState(cameraState)
+              if (modelTransform)
+                currentLoad3d.applyModelTransform(modelTransform)
+            })
+            .catch((error) => {
+              console.error(
+                'Failed to apply input camera_info / model_3d_info from Preview3DAdvanced:',
+                error
+              )
+            })
         }
-
-        sceneWidget.serializeValue = async () => {
-          const currentLoad3d = nodeToLoad3dMap.get(node)
-          if (!currentLoad3d) {
-            console.error('No load3d instance found for node')
-            return null
-          }
-
-          const cameraConfig: CameraConfig = (node.properties[
-            'Camera Config'
-          ] as CameraConfig | undefined) || {
-            cameraType: currentLoad3d.getCurrentCameraType(),
-            fov: currentLoad3d.cameraManager.perspectiveCamera.fov
-          }
-          cameraConfig.state = currentLoad3d.getCameraState()
-          node.properties['Camera Config'] = cameraConfig
-
-          const modelInfo = currentLoad3d.getModelInfo()
-          const model_3d_info: Model3DInfo = modelInfo ? [modelInfo] : []
-
-          return {
-            image: '',
-            mask: '',
-            normal: '',
-            camera_info: cameraConfig.state || null,
-            recording: '',
-            model_3d_info
-          }
-        }
-
-        node.onExecuted = function (output: Preview3DAdvancedOutput) {
-          onExecuted?.call(this, output)
-
-          const result = output.result
-          if (!result?.[0]) {
-            const msg = t('toastMessages.unableToGetModelFilePath')
-            console.error(msg)
-            useToastStore().addAlert(msg)
-            return
-          }
-
-          applyPreview3DAdvancedResult(
-            node,
-            resolveLoad3d(),
-            result,
-            loadFolder,
-            comfyClass
-          )
-        }
-      })
-    }
+      }
+    })
   }
-}
-
-useExtensionService().registerExtension(
-  createPreview3DAdvancedExtension(
-    'Preview3DAdvanced',
-    'Comfy.Preview3DAdvanced',
-    'temp'
-  )
-)
-useExtensionService().registerExtension(
-  createPreview3DAdvancedExtension(
-    'Save3DAdvanced',
-    'Comfy.Save3DAdvanced',
-    'output'
-  )
-)
+})

src/extensions/core/load3d/interfaces.ts

@@ -14,7 +14,6 @@ export type MaterialMode =
 export type UpDirection = 'original' | '-x' | '+x' | '-y' | '+y' | '-z' | '+z'
 export type CameraType = 'perspective' | 'orthographic'
 export type BackgroundRenderModeType = 'tiled' | 'panorama'
-export type LoadFolder = 'temp' | 'output'
 
 interface CameraQuaternion {
   x: number

src/extensions/core/load3d/nodeTypes.ts

@@ -3,24 +3,21 @@
  * Adding a new node type that uses the viewer = one line change here.
  */
 
-const LOAD3D_RESULT_VIEWER_NODES = new Set([
+const LOAD3D_PREVIEW_NODES = new Set([
   'Preview3D',
   'PreviewGaussianSplat',
-  'PreviewPointCloud',
-  'Save3DAdvanced',
-  'SaveGaussianSplat',
-  'SavePointCloud'
+  'PreviewPointCloud'
 ])
 
 const LOAD3D_ALL_NODES = new Set([
-  ...LOAD3D_RESULT_VIEWER_NODES,
+  ...LOAD3D_PREVIEW_NODES,
   'Load3D',
   'Load3DAdvanced',
   'SaveGLB'
 ])
 
-export const isLoad3dResultViewerNode = (nodeType: string): boolean =>
-  LOAD3D_RESULT_VIEWER_NODES.has(nodeType)
+export const isLoad3dPreviewNode = (nodeType: string): boolean =>
+  LOAD3D_PREVIEW_NODES.has(nodeType)
 
 export const isLoad3dNode = (nodeType: string): boolean =>
   LOAD3D_ALL_NODES.has(nodeType)

src/extensions/core/load3dLazy.test.ts

@@ -90,10 +90,7 @@ describe('load3dLazy', () => {
     'Preview3D',
     'PreviewGaussianSplat',
     'PreviewPointCloud',
-    'SaveGLB',
-    'Save3DAdvanced',
-    'SaveGaussianSplat',
-    'SavePointCloud'
+    'SaveGLB'
   ])(
     'recognizes %s as a 3D node type and triggers the lazy-load path',
     async (nodeType) => {

src/extensions/core/load3dPreviewExtensions.test.ts

@@ -76,24 +76,14 @@ type ExtCreated = ComfyExtension & {
 async function loadExtensionsFresh(): Promise<{
   splatExt: ExtCreated
   pointCloudExt: ExtCreated
-  saveSplatExt: ExtCreated
-  savePointCloudExt: ExtCreated
 }> {
   vi.resetModules()
   registerExtensionMock.mockClear()
   await import('@/extensions/core/load3dPreviewExtensions')
-  const extByName = (name: string): ExtCreated => {
-    const call = registerExtensionMock.mock.calls.find(
-      (c) => (c[0] as ExtCreated).name === name
-    )
-    if (!call) throw new Error(`Extension ${name} was not registered`)
-    return call[0] as ExtCreated
-  }
+  const [splatCall, pointCloudCall] = registerExtensionMock.mock.calls
   return {
-    splatExt: extByName('Comfy.PreviewGaussianSplat'),
-    pointCloudExt: extByName('Comfy.PreviewPointCloud'),
-    saveSplatExt: extByName('Comfy.SaveGaussianSplat'),
-    savePointCloudExt: extByName('Comfy.SavePointCloud')
+    splatExt: splatCall[0] as ExtCreated,
+    pointCloudExt: pointCloudCall[0] as ExtCreated
   }
 }
 
@@ -102,7 +92,6 @@ interface FakeLoad3d {
   isSplatModel: ReturnType<typeof vi.fn>
   forceRender: ReturnType<typeof vi.fn>
   setCameraState: ReturnType<typeof vi.fn>
-  applyModelTransform: ReturnType<typeof vi.fn>
   setTargetSize: ReturnType<typeof vi.fn>
   getCurrentCameraType: ReturnType<typeof vi.fn>
   getCameraState: ReturnType<typeof vi.fn>
@@ -117,7 +106,6 @@ function makeLoad3dMock(): FakeLoad3d {
     isSplatModel: vi.fn(() => false),
     forceRender: vi.fn(),
     setCameraState: vi.fn(),
-    applyModelTransform: vi.fn(),
     setTargetSize: vi.fn(),
     getCurrentCameraType: vi.fn(() => 'perspective'),
     getCameraState: vi.fn(() => ({ position: { x: 0, y: 0, z: 0 } })),
@@ -163,59 +151,12 @@ function setupBaseMocks() {
 describe('load3dPreviewExtensions module registration', () => {
   beforeEach(setupBaseMocks)
 
-  it('registers preview and save extensions on import', async () => {
-    const { splatExt, pointCloudExt, saveSplatExt, savePointCloudExt } =
-      await loadExtensionsFresh()
+  it('registers both preview extensions on import', async () => {
+    const { splatExt, pointCloudExt } = await loadExtensionsFresh()
 
-    expect(registerExtensionMock).toHaveBeenCalledTimes(4)
+    expect(registerExtensionMock).toHaveBeenCalledTimes(2)
     expect(splatExt.name).toBe('Comfy.PreviewGaussianSplat')
     expect(pointCloudExt.name).toBe('Comfy.PreviewPointCloud')
-    expect(saveSplatExt.name).toBe('Comfy.SaveGaussianSplat')
-    expect(savePointCloudExt.name).toBe('Comfy.SavePointCloud')
-  })
-
-  it('save extensions load the saved file from the output folder, not temp', async () => {
-    const { saveSplatExt, savePointCloudExt } = await loadExtensionsFresh()
-    const load3d = makeLoad3dMock()
-    waitForLoad3dMock.mockImplementation((cb: (l: FakeLoad3d) => void) =>
-      cb(load3d)
-    )
-
-    const splatNode = makePreviewNode({ comfyClass: 'SaveGaussianSplat' })
-    await saveSplatExt.nodeCreated(splatNode)
-    splatNode.onExecuted!({ result: ['3d/ComfyUI_00001_.ply'] })
-
-    expect(configureForSaveMeshMock).toHaveBeenLastCalledWith(
-      'output',
-      '3d/ComfyUI_00001_.ply',
-      expect.objectContaining({ silentOnNotFound: true })
-    )
-
-    const pcNode = makePreviewNode({ comfyClass: 'SavePointCloud' })
-    await savePointCloudExt.nodeCreated(pcNode)
-    pcNode.onExecuted!({ result: ['3d/ComfyUI_00002_.ply'] })
-
-    expect(configureForSaveMeshMock).toHaveBeenLastCalledWith(
-      'output',
-      '3d/ComfyUI_00002_.ply',
-      expect.objectContaining({ silentOnNotFound: true })
-    )
-  })
-
-  it('restores persisted models from the output folder on nodeCreated, not temp', async () => {
-    const { saveSplatExt } = await loadExtensionsFresh()
-    const node = makePreviewNode({
-      comfyClass: 'SaveGaussianSplat',
-      properties: { 'Last Time Model File': '3d/ComfyUI_00001_.ply' }
-    })
-
-    await saveSplatExt.nodeCreated(node)
-
-    expect(configureForSaveMeshMock).toHaveBeenCalledWith(
-      'output',
-      '3d/ComfyUI_00001_.ply',
-      expect.objectContaining({ silentOnNotFound: true })
-    )
   })
 })
 
@@ -273,44 +214,6 @@ describe('Comfy.PreviewGaussianSplat.nodeCreated', () => {
     expect(cameraConfig?.state).toEqual(cameraState)
   })
 
-  it('applies onExecuted results to the remounted instance, not the disposed closure', async () => {
-    const { splatExt } = await loadExtensionsFresh()
-    const original = makeLoad3dMock()
-    waitForLoad3dMock.mockImplementation((cb: (l: FakeLoad3d) => void) =>
-      cb(original)
-    )
-    const node = makePreviewNode()
-
-    await splatExt.nodeCreated(node)
-
-    const remounted = makeLoad3dMock()
-    nodeToLoad3dMapMock.set(node, remounted)
-
-    node.onExecuted!({
-      result: ['scene.ply', { position: { x: 1, y: 2, z: 3 } }]
-    })
-    await new Promise((resolve) => setTimeout(resolve, 0))
-
-    expect(remounted.forceRender).toHaveBeenCalled()
-    expect(original.forceRender).not.toHaveBeenCalled()
-  })
-
-  it('re-applies the model transform from result[2] on execute', async () => {
-    const { saveSplatExt } = await loadExtensionsFresh()
-    const load3d = makeLoad3dMock()
-    waitForLoad3dMock.mockImplementation((cb: (l: FakeLoad3d) => void) =>
-      cb(load3d)
-    )
-    const node = makePreviewNode({ comfyClass: 'SaveGaussianSplat' })
-    const transform = { position: { x: 1, y: 2, z: 3 } }
-
-    await saveSplatExt.nodeCreated(node)
-    node.onExecuted!({ result: ['scene.ply', undefined, [transform]] })
-    await new Promise((resolve) => setTimeout(resolve, 0))
-
-    expect(load3d.applyModelTransform).toHaveBeenCalledWith(transform)
-  })
-
   it('syncs width/height widgets to load3d.setTargetSize and registers callbacks', async () => {
     const { splatExt } = await loadExtensionsFresh()
     const load3d = makeLoad3dMock()

src/extensions/core/load3dPreviewExtensions.ts

@@ -5,7 +5,6 @@ import { createExportMenuItems } from '@/extensions/core/load3d/exportMenuHelper
 import type {
   CameraConfig,
   CameraState,
-  LoadFolder,
   Model3DInfo
 } from '@/extensions/core/load3d/interfaces'
 import type Load3d from '@/extensions/core/load3d/Load3d'
@@ -30,9 +29,7 @@ function applyResultToLoad3d(
   node: LGraphNode,
   load3d: Load3d,
   filePath: string,
-  cameraState: CameraState | undefined,
-  modelTransform: Model3DInfo[number] | undefined,
-  loadFolder: LoadFolder
+  cameraState: CameraState | undefined
 ): void {
   const normalizedPath = filePath.replaceAll('\\', '/')
   node.properties['Last Time Model File'] = normalizedPath
@@ -49,7 +46,7 @@ function applyResultToLoad3d(
   }
 
   const config = new Load3DConfiguration(load3d, node.properties)
-  config.configureForSaveMesh(loadFolder, normalizedPath, {
+  config.configureForSaveMesh('temp', normalizedPath, {
     silentOnNotFound: true
   })
 
@@ -57,15 +54,13 @@ function applyResultToLoad3d(
   void load3d.whenLoadIdle().then(() => {
     if (load3d.currentLoadGeneration !== targetGeneration) return
     if (cameraState) load3d.setCameraState(cameraState)
-    if (modelTransform) load3d.applyModelTransform(modelTransform)
     load3d.forceRender()
   })
 }
 
 function createPreview3DExtension(
   comfyClass: string,
-  extensionName: string,
-  loadFolder: LoadFolder
+  extensionName: string
 ): ComfyExtension {
   const applyPreviewOutput = (
     node: LGraphNode,
@@ -73,18 +68,10 @@ function createPreview3DExtension(
   ): void => {
     const filePath = result[0]
     const cameraState = result[1]
-    const modelTransform = result[2]?.[0]
     if (!filePath) return
 
     useLoad3d(node).waitForLoad3d((load3d) => {
-      applyResultToLoad3d(
-        node,
-        load3d,
-        filePath,
-        cameraState,
-        modelTransform,
-        loadFolder
-      )
+      applyResultToLoad3d(node, load3d, filePath, cameraState)
     })
   }
 
@@ -132,7 +119,7 @@ function createPreview3DExtension(
         if (!lastTimeModelFile) return
 
         const config = new Load3DConfiguration(load3d, node.properties)
-        config.configureForSaveMesh(loadFolder, lastTimeModelFile as string, {
+        config.configureForSaveMesh('temp', lastTimeModelFile as string, {
           silentOnNotFound: true
         })
 
@@ -149,8 +136,6 @@ function createPreview3DExtension(
       })
 
       waitForLoad3d((load3d) => {
-        const resolveLoad3d = () => nodeToLoad3dMap.get(node) ?? load3d
-
         const sceneWidget = node.widgets?.find(
           (w) => w.name === 'viewport_state'
         )
@@ -163,10 +148,10 @@ function createPreview3DExtension(
             heightWidget.value as number
           )
           widthWidget.callback = (value: number) => {
-            resolveLoad3d().setTargetSize(value, heightWidget.value as number)
+            load3d.setTargetSize(value, heightWidget.value as number)
           }
           heightWidget.callback = (value: number) => {
-            resolveLoad3d().setTargetSize(widthWidget.value as number, value)
+            load3d.setTargetSize(widthWidget.value as number, value)
           }
         }
 
@@ -214,14 +199,7 @@ function createPreview3DExtension(
             return
           }
 
-          applyResultToLoad3d(
-            node,
-            resolveLoad3d(),
-            filePath,
-            result?.[1],
-            result?.[2]?.[0],
-            loadFolder
-          )
+          applyResultToLoad3d(node, load3d, filePath, result?.[1])
         }
       })
     }
@@ -229,26 +207,8 @@ function createPreview3DExtension(
 }
 
 useExtensionService().registerExtension(
-  createPreview3DExtension(
-    'PreviewGaussianSplat',
-    'Comfy.PreviewGaussianSplat',
-    'temp'
-  )
+  createPreview3DExtension('PreviewGaussianSplat', 'Comfy.PreviewGaussianSplat')
 )
 useExtensionService().registerExtension(
-  createPreview3DExtension(
-    'PreviewPointCloud',
-    'Comfy.PreviewPointCloud',
-    'temp'
-  )
-)
-useExtensionService().registerExtension(
-  createPreview3DExtension(
-    'SaveGaussianSplat',
-    'Comfy.SaveGaussianSplat',
-    'output'
-  )
-)
-useExtensionService().registerExtension(
-  createPreview3DExtension('SavePointCloud', 'Comfy.SavePointCloud', 'output')
+  createPreview3DExtension('PreviewPointCloud', 'Comfy.PreviewPointCloud')
 )

src/extensions/core/saveImageExtraOutput.test.ts

@@ -81,9 +81,6 @@ describe('Comfy.SaveImageExtraOutput', () => {
     'SaveAudioOpus',
     'SaveAudioAdvanced',
     'SaveGLB',
-    'Save3DAdvanced',
-    'SaveGaussianSplat',
-    'SavePointCloud',
     'SaveAnimatedPNG',
     'CLIPSave',
     'VAESave',

src/extensions/core/saveImageExtraOutput.ts

@@ -16,9 +16,6 @@ const saveNodeTypes = new Set([
   'SaveAudioOpus',
   'SaveAudioAdvanced',
   'SaveGLB',
-  'Save3DAdvanced',
-  'SaveGaussianSplat',
-  'SavePointCloud',
   'SaveAnimatedPNG',
   'CLIPSave',
   'VAESave',

src/i18n.safeTranslation.test.ts

@@ -1,80 +0,0 @@
-import { beforeEach, describe, expect, it } from 'vitest'
-
-import { i18n, st, stRaw } from './i18n'
-
-const TEST_NAMESPACE = 'safeTranslationTest'
-
-beforeEach(() => {
-  i18n.global.locale.value = 'en'
-  const messages = i18n.global.getLocaleMessage('en')
-  delete (messages as Record<string, unknown>)[TEST_NAMESPACE]
-  i18n.global.setLocaleMessage('en', messages)
-})
-
-describe('st', () => {
-  it('returns the fallback when the key is not found', () => {
-    expect(st('safeTranslationTest.missing', 'Fallback value')).toBe(
-      'Fallback value'
-    )
-  })
-
-  it('uses compiled translations for valid locale messages', () => {
-    i18n.global.mergeLocaleMessage('en', {
-      safeTranslationTest: {
-        valid: 'Translated value'
-      }
-    })
-
-    expect(st('safeTranslationTest.valid', 'Fallback value')).toBe(
-      'Translated value'
-    )
-  })
-
-  it('returns raw locale messages when vue-i18n compilation fails', () => {
-    const message = 'Provided by @acme/model with JSON such as {"mode":"fast"}'
-
-    i18n.global.mergeLocaleMessage('en', {
-      safeTranslationTest: {
-        invalidLinkedFormat: message
-      }
-    })
-
-    expect(
-      st('safeTranslationTest.invalidLinkedFormat', 'Fallback value')
-    ).toBe(message)
-  })
-})
-
-describe('stRaw', () => {
-  it('returns raw locale messages for valid keys', () => {
-    i18n.global.mergeLocaleMessage('en', {
-      safeTranslationTest: {
-        rawValue: 'Raw value'
-      }
-    })
-
-    expect(stRaw('safeTranslationTest.rawValue', 'Fallback value')).toBe(
-      'Raw value'
-    )
-  })
-
-  it('returns raw messages containing vue-i18n syntax', () => {
-    const message = 'Provided by @acme/model with JSON such as {"mode":"fast"}'
-
-    i18n.global.mergeLocaleMessage('en', {
-      safeTranslationTest: {
-        rawSyntax: message
-      }
-    })
-
-    expect(stRaw('safeTranslationTest.rawSyntax', 'Fallback value')).toBe(
-      message
-    )
-  })
-
-  it('returns the fallback when the key is not found', () => {
-    expect(stRaw('safeTranslationTest.rawMissing', 'Fallback value')).toBe(
-      'Fallback value'
-    )
-  })
-})

src/i18n.ts

@@ -159,28 +159,15 @@ export const te: (typeof i18n.global)['te'] = i18n.global.te
 export const d: (typeof i18n.global)['d'] = i18n.global.d
 const tm = i18n.global.tm
 
-function rawTranslationOrFallback(key: string, fallbackMessage: string) {
-  const message = tm(key)
-  return typeof message === 'string' ? message : fallbackMessage
-}
-
 /**
  * Safe translation function that returns the fallback message if the key is not found.
- * Invalid message syntax falls back to the raw locale message instead of crashing.
  *
  * @param key - The key to translate.
  * @param fallbackMessage - The fallback message to use if the key is not found.
  */
 export function st(key: string, fallbackMessage: string) {
-  if (!te(key)) return fallbackMessage
-
-  try {
-    // The normal defaultMsg overload fails in some cases for custom nodes
-    return t(key)
-  } catch (error) {
-    if (!(error instanceof SyntaxError)) throw error
-    return rawTranslationOrFallback(key, fallbackMessage)
-  }
+  // The normal defaultMsg overload fails in some cases for custom nodes
+  return te(key) ? t(key) : fallbackMessage
 }
 
 /**
@@ -193,5 +180,6 @@ export function st(key: string, fallbackMessage: string) {
 export function stRaw(key: string, fallbackMessage: string) {
   if (!te(key)) return fallbackMessage
 
-  return rawTranslationOrFallback(key, fallbackMessage)
+  const message = tm(key)
+  return typeof message === 'string' ? message : fallbackMessage
 }

src/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers.ts

@@ -18,7 +18,6 @@ import {
   SUBGRAPH_OUTPUT_ID
 } from '@/lib/litegraph/src/constants'
 import type { SerializedNodeId } from '@/types/nodeId'
-import { toNodeId } from '@/types/nodeId'
 import {
   LGraph,
   LGraphNode,
@@ -87,23 +86,6 @@ interface TestSubgraphNodeOptions {
   size?: [number, number]
 }
 
-interface BoundaryLinkedSubgraphOptions {
-  rootGraph?: LGraph
-  hostId?: SerializedNodeId
-  interiorId?: SerializedNodeId
-  boundaryName?: string
-  inputName?: string
-  hostTitle?: string
-  interiorType?: string
-}
-
-export interface BoundaryLinkedSubgraphFixture {
-  rootGraph: LGraph
-  subgraph: Subgraph
-  host: SubgraphNode
-  interior: LGraphNode
-}
-
 interface NestedSubgraphOptions {
   depth?: number
   nodesPerLevel?: number
@@ -287,32 +269,6 @@ export function createTestSubgraphNode(
   return new SubgraphNode(parentGraph, subgraph, instanceData)
 }
 
-export function createBoundaryLinkedSubgraph({
-  rootGraph = createTestRootGraph(),
-  hostId = 12,
-  interiorId = 5,
-  boundaryName = 'seed',
-  inputName = 'seed_input',
-  hostTitle = 'Host Subgraph',
-  interiorType = 'InteriorNode'
-}: BoundaryLinkedSubgraphOptions = {}): BoundaryLinkedSubgraphFixture {
-  const subgraph = createTestSubgraph({
-    rootGraph,
-    inputs: [{ name: boundaryName, type: '*' }]
-  })
-  const host = createTestSubgraphNode(subgraph, { id: hostId })
-  host.title = hostTitle
-  rootGraph.add(host)
-
-  const interior = new LGraphNode(interiorType)
-  interior.id = toNodeId(interiorId)
-  const input = interior.addInput(inputName, '*')
-  subgraph.add(interior)
-  subgraph.inputNode.slots[0].connect(input, interior)
-
-  return { rootGraph, subgraph, host, interior }
-}
-
 export function setupComplexPromotionFixture(): {
   graph: LGraph
   subgraph: Subgraph

src/locales/ar/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "يرجى إبقاء إجابتك أقل من {max} حرفًا.",
         "chooseAnOption": "يرجى اختيار خيار.",
         "describeAnswer": "يرجى وصف إجابتك.",
         "selectAtLeastOne": "يرجى اختيار خيار واحد على الأقل."
       },
       "intro": "ساعدنا في تخصيص تجربتك مع ComfyUI.",
       "options": {
-        "familiarity": {
-          "advanced": "مستخدم متقدم (سير عمل مخصصة)",
-          "basics": "مرتاح مع الأساسيات",
-          "expert": "خبير (أساعد الآخرين)",
-          "new": "جديد في ComfyUI (لم أستخدمه من قبل)",
-          "starting": "في البداية فقط (أتابع الدروس التعليمية)"
+        "experience": {
+          "new": "جديد على ComfyUI",
+          "pro": "أنا مستخدم محترف",
+          "some": "لدي معرفة جيدة"
+        },
+        "focus": {
+          "custom_nodes": "عُقد مخصصة",
+          "pipelines": "مسارات مؤتمتة",
+          "products": "منتجات للآخرين"
         },
         "intent": {
-          "3d_game": "أصول ثلاثية الأبعاد / أصول ألعاب",
-          "api": "نقاط نهاية API لتشغيل مسارات العمل",
-          "apps": "تطبيقات مبسطة من مسارات العمل",
-          "audio": "صوت / موسيقى",
-          "custom_nodes": "عُقد مخصصة",
+          "apps_api": "تطبيقات وواجهات برمجة التطبيقات",
+          "exploring": "أستكشف فقط",
           "images": "صور",
-          "not_sure": "لست متأكداً",
-          "videos": "فيديوهات",
+          "other": "شيء آخر",
+          "otherPlaceholder": "ماذا تريد أن تصنع؟",
+          "video": "فيديو",
           "workflows": "مسارات عمل أو خطوط معالجة مخصصة"
         },
         "source": {
-          "conference": "مؤتمر أو فعالية",
-          "discord": "ديسكورد / مجتمع",
+          "community": "مجتمع أو منتدى",
           "friend": "صديق أو زميل",
-          "github": "GitHub",
+          "other": "أخرى",
+          "otherPlaceholder": "من أين وجدتنا؟",
+          "search": "جوجل / بحث",
+          "social": "وسائل التواصل الاجتماعي"
+        },
+        "source_social": {
+          "discord": "ديسكورد",
           "instagram": "إنستغرام",
           "linkedin": "لينكدإن",
-          "newsletter": "النشرة البريدية أو مدونة",
-          "other": "أخرى",
           "reddit": "ريديت",
-          "search": "جوجل / بحث",
-          "twitter": "تويتر / X",
+          "tiktok": "تيك توك",
+          "twitter": "X (تويتر)",
           "youtube": "يوتيوب"
-        },
-        "usage": {
-          "education": "تعليمي (طالب أو معلم)",
-          "personal": "استخدام شخصي",
-          "work": "عمل"
         }
       },
+      "otherPlaceholder": "أخبرنا المزيد",
       "placeholder": "نص بديل لأسئلة الاستبيان",
-      "steps": {
-        "familiarity": "ما مدى معرفتك بـ ComfyUI؟",
-        "intent": "ما الذي ترغب في إنشائه باستخدام ComfyUI؟",
-        "source": "من أين سمعت عن ComfyUI؟",
-        "usage": "كيف تخطط لاستخدام ComfyUI؟"
-      },
       "title": "استبيان السحابة"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "تعرف على السحابة",
   "cloudStart_title": "ابدأ الإبداع في ثوانٍ",
   "cloudStart_wantToRun": "هل تريد تشغيل ComfyUI محليًا بدلاً من ذلك؟",
-  "cloudSurvey_steps_familiarity": "ما مدى معرفتك بـ ComfyUI؟",
+  "cloudSurvey_steps_experience": "ما مدى معرفتك بـ ComfyUI؟",
+  "cloudSurvey_steps_focus": "ماذا تبني؟",
   "cloudSurvey_steps_intent": "ما الذي ترغب في إنشائه باستخدام ComfyUI؟",
   "cloudSurvey_steps_source": "من أين سمعت عن ComfyUI؟",
-  "cloudSurvey_steps_usage": "كيف تخطط لاستخدام ComfyUI؟",
+  "cloudSurvey_steps_source_social": "أي منصة؟",
   "cloudWaitlist_contactLink": "هنا",
   "cloudWaitlist_questionsText": "أسئلة؟ اتصل بنا",
   "color": {

src/locales/en/main.json

@@ -2170,8 +2170,7 @@
     "descLabel": "description",
     "textPlaceholder": "text to render (verbatim)",
     "descPlaceholder": "description of this region",
-    "colors": "color_palette",
-    "grid": "Grid"
+    "colors": "color_palette"
   },
   "palette": {
     "addColor": "Add a color",
@@ -2415,6 +2414,16 @@
       "tooltipLearnMore": "Learn more..."
     }
   },
+  "desktopLogin": {
+    "confirmSummary": "Approve desktop sign-in?",
+    "confirmMessage": "The ComfyUI desktop app is waiting to sign in with your account. Only continue if you just started signing in from the ComfyUI desktop app.",
+    "successSummary": "Signed in",
+    "successDetail": "You can return to the ComfyUI desktop app.",
+    "expiredSummary": "Desktop sign-in failed",
+    "expiredDetail": "The sign-in request expired or was already used. Start signing in again from the ComfyUI desktop app.",
+    "failedSummary": "Desktop sign-in failed",
+    "failedDetail": "Something went wrong completing the desktop sign-in. Start signing in again from the ComfyUI desktop app."
+  },
   "validation": {
     "invalidEmail": "Invalid email address",
     "required": "Required",
@@ -3123,57 +3132,52 @@
   "cloudOnboarding": {
     "skipToCloudApp": "Skip to the cloud app",
     "survey": {
-      "title": "Cloud Survey",
+      "title": "Let's get to know you",
       "placeholder": "Survey questions placeholder",
-      "intro": "Help us tailor your ComfyUI experience.",
+      "intro": "A few quick questions so we can set up ComfyUI for you.",
+      "otherPlaceholder": "Tell us more",
       "errors": {
         "chooseAnOption": "Please choose an option.",
         "selectAtLeastOne": "Please select at least one option.",
-        "describeAnswer": "Please describe your answer."
-      },
-      "steps": {
-        "usage": "How do you plan to use ComfyUI?",
-        "familiarity": "How familiar are you with ComfyUI?",
-        "intent": "What do you want to create with ComfyUI?",
-        "source": "Where did you hear about ComfyUI?"
+        "describeAnswer": "Please describe your answer.",
+        "answerTooLong": "Please keep your answer under {max} characters."
       },
       "options": {
-        "usage": {
-          "personal": "Personal use",
-          "work": "Work",
-          "education": "Education (student or educator)"
-        },
-        "familiarity": {
-          "new": "New — never used it",
-          "starting": "Beginner — following tutorials",
-          "basics": "Intermediate — comfortable with basics",
-          "advanced": "Advanced — build and edit workflows",
-          "expert": "Expert — I help others"
-        },
         "intent": {
-          "workflows": "Custom workflows or pipelines",
-          "custom_nodes": "Custom nodes",
-          "videos": "Videos",
           "images": "Images",
-          "3d_game": "3D assets / game assets",
-          "audio": "Audio / music",
-          "apps": "Simplified Apps from workflows",
-          "api": "API endpoints to run workflows",
-          "not_sure": "Not sure"
+          "video": "Video",
+          "workflows": "Workflows and pipelines",
+          "apps_api": "Apps and APIs",
+          "exploring": "Just exploring",
+          "other": "Something else",
+          "otherPlaceholder": "What do you want to make?"
+        },
+        "experience": {
+          "new": "New to ComfyUI",
+          "some": "I know my way around",
+          "pro": "I'm a power user"
+        },
+        "focus": {
+          "custom_nodes": "Custom nodes",
+          "pipelines": "Automated pipelines",
+          "products": "Products for others"
         },
         "source": {
+          "social": "Social media",
+          "friend": "A friend or colleague",
+          "search": "Web search",
+          "community": "A community or forum",
+          "other": "Somewhere else",
+          "otherPlaceholder": "Where did you find us?"
+        },
+        "source_social": {
           "youtube": "YouTube",
           "reddit": "Reddit",
-          "twitter": "Twitter / X",
+          "twitter": "X (Twitter)",
           "instagram": "Instagram",
+          "tiktok": "TikTok",
           "linkedin": "LinkedIn",
-          "friend": "Friend or colleague",
-          "search": "Google / search",
-          "newsletter": "Newsletter or blog",
-          "conference": "Conference or event",
-          "discord": "Discord / community",
-          "github": "GitHub",
-          "other": "Other"
+          "discord": "Discord"
         }
       }
     },
@@ -3266,10 +3270,11 @@
   "cloudForgotPassword_emailRequired": "Email is required",
   "cloudForgotPassword_passwordResetSent": "Password reset sent",
   "cloudForgotPassword_passwordResetError": "Failed to send password reset email",
-  "cloudSurvey_steps_usage": "How do you plan to use ComfyUI?",
-  "cloudSurvey_steps_familiarity": "How familiar are you with ComfyUI?",
-  "cloudSurvey_steps_intent": "What do you want to create with ComfyUI?",
-  "cloudSurvey_steps_source": "Where did you hear about ComfyUI?",
+  "cloudSurvey_steps_intent": "What do you want to make?",
+  "cloudSurvey_steps_experience": "How well do you know ComfyUI?",
+  "cloudSurvey_steps_focus": "What are you building?",
+  "cloudSurvey_steps_source": "How did you find us?",
+  "cloudSurvey_steps_source_social": "Which platform?",
   "assetBrowser": {
     "allCategory": "All {category}",
     "allModels": "All Models",

src/locales/es/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "Por favor, mantén tu respuesta por debajo de {max} caracteres.",
         "chooseAnOption": "Por favor, elige una opción.",
         "describeAnswer": "Por favor, describe tu respuesta.",
         "selectAtLeastOne": "Por favor, selecciona al menos una opción."
       },
       "intro": "Ayúdanos a personalizar tu experiencia con ComfyUI.",
       "options": {
-        "familiarity": {
-          "advanced": "Usuario avanzado (flujos de trabajo personalizados)",
-          "basics": "Cómodo con lo básico",
-          "expert": "Experto (ayudo a otros)",
-          "new": "Nuevo en ComfyUI (nunca lo he usado antes)",
-          "starting": "Recién comenzando (siguiendo tutoriales)"
+        "experience": {
+          "new": "Nuevo en ComfyUI",
+          "pro": "Soy usuario avanzado",
+          "some": "Ya tengo experiencia"
+        },
+        "focus": {
+          "custom_nodes": "Nodos personalizados",
+          "pipelines": "Pipelines automatizados",
+          "products": "Productos para otros"
         },
         "intent": {
-          "3d_game": "Recursos 3D / recursos para juegos",
-          "api": "Endpoints de API para ejecutar flujos de trabajo",
-          "apps": "Apps simplificadas a partir de flujos de trabajo",
-          "audio": "Audio / música",
-          "custom_nodes": "Nodos personalizados",
+          "apps_api": "Aplicaciones y APIs",
+          "exploring": "Solo explorando",
           "images": "Imágenes",
-          "not_sure": "No estoy seguro",
-          "videos": "Videos",
+          "other": "Otra cosa",
+          "otherPlaceholder": "¿Qué quieres crear?",
+          "video": "Video",
           "workflows": "Flujos de trabajo o pipelines personalizados"
         },
         "source": {
-          "conference": "Conferencia o evento",
-          "discord": "Discord / comunidad",
+          "community": "Una comunidad o foro",
           "friend": "Amigo o colega",
-          "github": "GitHub",
+          "other": "Otro",
+          "otherPlaceholder": "¿Dónde nos encontraste?",
+          "search": "Google / búsqueda",
+          "social": "Redes sociales"
+        },
+        "source_social": {
+          "discord": "Discord",
           "instagram": "Instagram",
           "linkedin": "LinkedIn",
-          "newsletter": "Newsletter o blog",
-          "other": "Otro",
           "reddit": "Reddit",
-          "search": "Google / búsqueda",
-          "twitter": "Twitter / X",
+          "tiktok": "TikTok",
+          "twitter": "X (Twitter)",
           "youtube": "YouTube"
-        },
-        "usage": {
-          "education": "Educación (estudiante o docente)",
-          "personal": "Uso personal",
-          "work": "Trabajo"
         }
       },
+      "otherPlaceholder": "Cuéntanos más",
       "placeholder": "Marcador de posición para preguntas de la encuesta",
-      "steps": {
-        "familiarity": "¿Qué tan familiarizado estás con ComfyUI?",
-        "intent": "¿Qué quieres crear con ComfyUI?",
-        "source": "¿Dónde escuchaste sobre ComfyUI?",
-        "usage": "¿Cómo planeas usar ComfyUI?"
-      },
       "title": "Encuesta en la Nube"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "Conoce más sobre Cloud",
   "cloudStart_title": "comienza a crear en segundos",
   "cloudStart_wantToRun": "¿Prefieres ejecutar ComfyUI localmente?",
-  "cloudSurvey_steps_familiarity": "¿Qué tan familiarizado estás con ComfyUI?",
+  "cloudSurvey_steps_experience": "¿Qué tanto conoces ComfyUI?",
+  "cloudSurvey_steps_focus": "¿Qué estás construyendo?",
   "cloudSurvey_steps_intent": "¿Qué quieres crear con ComfyUI?",
   "cloudSurvey_steps_source": "¿Dónde escuchaste sobre ComfyUI?",
-  "cloudSurvey_steps_usage": "¿Cómo planeas usar ComfyUI?",
+  "cloudSurvey_steps_source_social": "¿En qué plataforma?",
   "cloudWaitlist_contactLink": "aquí",
   "cloudWaitlist_questionsText": "¿Preguntas? Contáctanos",
   "color": {

src/locales/escapeNodeDefI18n.test.ts

@@ -1,35 +0,0 @@
-import { createI18n } from 'vue-i18n'
-import { describe, expect, it } from 'vitest'
-
-import { escapeVueI18nMessageSyntax } from '@comfyorg/shared-frontend-utils/formatUtil'
-
-/**
- * Node descriptions are compiled by vue-i18n via `t()`/`st()`, which parses
- * `@ { } | %` as message syntax — a literal `@` even crashes the compiler with
- * `Invalid linked format` (this broke the whole app after the 1.47.7 locale
- * sync). `collect-i18n-node-defs.ts` escapes such values with
- * `escapeVueI18nMessageSyntax` before writing them; this guards that the escaped
- * output actually compiles and renders the original literal text.
- */
-describe('escapeVueI18nMessageSyntax output is compiled safely by vue-i18n', () => {
-  const compile = (message: string) => {
-    const i18n = createI18n({
-      legacy: false,
-      locale: 'en',
-      messages: { en: { value: message } }
-    })
-    return i18n.global.t('value')
-  }
-
-  it.for([
-    'clips (tagged @Audio1-3 in the prompt)',
-    'support@comfy.org',
-    'resolution {width}x{height}',
-    'foreground | background',
-    '50%{done}',
-    'all of @ { } | % together',
-    'no special chars here'
-  ])('renders %s as the original literal text', (raw) => {
-    expect(compile(escapeVueI18nMessageSyntax(raw))).toBe(raw)
-  })
-})

src/locales/fa/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "لطفاً پاسخ خود را کمتر از {max} نویسه نگه دارید.",
         "chooseAnOption": "لطفاً یک گزینه را انتخاب کنید.",
         "describeAnswer": "لطفاً پاسخ خود را توضیح دهید.",
         "selectAtLeastOne": "لطفاً حداقل یک گزینه را انتخاب کنید."
       },
       "intro": "به ما کمک کنید تا تجربه شما از ComfyUI را متناسب‌سازی کنیم.",
       "options": {
-        "familiarity": {
-          "advanced": "کاربر پیشرفته (جریان‌کارهای سفارشی)",
-          "basics": "آشنایی با مبانی",
-          "expert": "کاربر خبره (به دیگران کمک می‌کنم)",
-          "new": "جدید در ComfyUI (تا کنون استفاده نکرده‌ام)",
-          "starting": "تازه شروع کرده‌ام (در حال دنبال کردن آموزش‌ها)"
+        "experience": {
+          "new": "جدید در ComfyUI",
+          "pro": "کاربر حرفه‌ای هستم",
+          "some": "آشنایی نسبی دارم"
+        },
+        "focus": {
+          "custom_nodes": "Nodeهای سفارشی",
+          "pipelines": "پایپ‌لاین‌های خودکار",
+          "products": "محصولات برای دیگران"
         },
         "intent": {
-          "3d_game": "دارایی سه‌بعدی / دارایی بازی",
-          "api": "API endpoint برای اجرای workflow",
-          "apps": "اپلیکیشن ساده‌شده از workflow",
-          "audio": "صدا / موسیقی",
-          "custom_nodes": "node سفارشی",
+          "apps_api": "اپلیکیشن‌ها و APIها",
+          "exploring": "فقط در حال بررسی",
           "images": "تصویر",
-          "not_sure": "مطمئن نیستم",
-          "videos": "ویدیو",
+          "other": "چیز دیگری",
+          "otherPlaceholder": "چه چیزی می‌خواهید بسازید؟",
+          "video": "ویدیو",
           "workflows": "workflow یا pipeline سفارشی"
         },
         "source": {
-          "conference": "کنفرانس یا رویداد",
-          "discord": "Discord / انجمن",
+          "community": "انجمن یا فروم",
           "friend": "دوست یا همکار",
-          "github": "GitHub",
+          "other": "سایر",
+          "otherPlaceholder": "از کجا با ما آشنا شدید؟",
+          "search": "Google / جستجو",
+          "social": "رسانه‌های اجتماعی"
+        },
+        "source_social": {
+          "discord": "Discord",
           "instagram": "Instagram",
           "linkedin": "LinkedIn",
-          "newsletter": "خبرنامه یا وبلاگ",
-          "other": "سایر",
           "reddit": "Reddit",
-          "search": "Google / جستجو",
-          "twitter": "Twitter / X",
+          "tiktok": "TikTok",
+          "twitter": "X (Twitter)",
           "youtube": "YouTube"
-        },
-        "usage": {
-          "education": "آموزشی (دانشجو یا مدرس)",
-          "personal": "استفاده شخصی",
-          "work": "کاری"
         }
       },
+      "otherPlaceholder": "بیشتر توضیح دهید",
       "placeholder": "جای‌نگهدار سوالات نظرسنجی",
-      "steps": {
-        "familiarity": "تا چه حد با ComfyUI آشنایی دارید؟",
-        "intent": "مایل هستید با ComfyUI چه چیزی ایجاد کنید؟",
-        "source": "از کجا با ComfyUI آشنا شدید؟",
-        "usage": "برنامه شما برای استفاده از ComfyUI چیست؟"
-      },
       "title": "نظرسنجی ابری"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "درباره Cloud بیشتر بدانید",
   "cloudStart_title": "در چند ثانیه شروع به خلق کنید",
   "cloudStart_wantToRun": "مایلید ComfyUI را به صورت محلی اجرا کنید؟",
-  "cloudSurvey_steps_familiarity": "تا چه اندازه با ComfyUI آشنایی دارید؟",
+  "cloudSurvey_steps_experience": "تا چه حد با ComfyUI آشنایی دارید؟",
+  "cloudSurvey_steps_focus": "در حال ساخت چه چیزی هستید؟",
   "cloudSurvey_steps_intent": "مایل هستید با ComfyUI چه چیزی ایجاد کنید؟",
   "cloudSurvey_steps_source": "از کجا با ComfyUI آشنا شدید؟",
-  "cloudSurvey_steps_usage": "برنامه شما برای استفاده از ComfyUI چیست؟",
+  "cloudSurvey_steps_source_social": "کدام پلتفرم؟",
   "cloudWaitlist_contactLink": "اینجا",
   "cloudWaitlist_questionsText": "سؤالی دارید؟ با ما تماس بگیرید",
   "color": {

src/locales/fr/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "Veuillez limiter votre réponse à {max} caractères.",
         "chooseAnOption": "Veuillez choisir une option.",
         "describeAnswer": "Veuillez décrire votre réponse.",
         "selectAtLeastOne": "Veuillez sélectionner au moins une option."
       },
       "intro": "Aidez-nous à personnaliser votre expérience ComfyUI.",
       "options": {
-        "familiarity": {
-          "advanced": "Utilisateur avancé (workflows personnalisés)",
-          "basics": "À l'aise avec les bases",
-          "expert": "Expert (j'aide les autres)",
-          "new": "Nouveau sur ComfyUI (jamais utilisé auparavant)",
-          "starting": "Je débute (je suis des tutoriels)"
+        "experience": {
+          "new": "Nouveau sur ComfyUI",
+          "pro": "Utilisateur avancé",
+          "some": "Je me débrouille"
+        },
+        "focus": {
+          "custom_nodes": "Nœuds personnalisés",
+          "pipelines": "Pipelines automatisés",
+          "products": "Produits pour les autres"
         },
         "intent": {
-          "3d_game": "Assets 3D / assets de jeu",
-          "api": "Points de terminaison API pour exécuter des workflows",
-          "apps": "Applications simplifiées à partir de workflows",
-          "audio": "Audio / musique",
-          "custom_nodes": "Nœuds personnalisés",
+          "apps_api": "Applications et API",
+          "exploring": "Je découvre simplement",
           "images": "Images",
-          "not_sure": "Pas sûr",
-          "videos": "Vidéos",
+          "other": "Autre chose",
+          "otherPlaceholder": "Qu'aimeriez-vous créer ?",
+          "video": "Vidéo",
           "workflows": "Workflows ou pipelines personnalisés"
         },
         "source": {
-          "conference": "Conférence ou événement",
-          "discord": "Discord / communauté",
+          "community": "Une communauté ou un forum",
           "friend": "Ami ou collègue",
-          "github": "GitHub",
+          "other": "Autre",
+          "otherPlaceholder": "Où nous avez-vous trouvés ?",
+          "search": "Google / recherche",
+          "social": "Réseaux sociaux"
+        },
+        "source_social": {
+          "discord": "Discord",
           "instagram": "Instagram",
           "linkedin": "LinkedIn",
-          "newsletter": "Newsletter ou blog",
-          "other": "Autre",
           "reddit": "Reddit",
-          "search": "Google / recherche",
-          "twitter": "Twitter / X",
+          "tiktok": "TikTok",
+          "twitter": "X (Twitter)",
           "youtube": "YouTube"
-        },
-        "usage": {
-          "education": "Éducation (étudiant ou enseignant)",
-          "personal": "Usage personnel",
-          "work": "Travail"
         }
       },
+      "otherPlaceholder": "Dites-nous en plus",
       "placeholder": "Texte indicatif des questions de l'enquête",
-      "steps": {
-        "familiarity": "Quelle est votre familiarité avec ComfyUI ?",
-        "intent": "Que souhaitez-vous créer avec ComfyUI ?",
-        "source": "Où avez-vous entendu parler de ComfyUI ?",
-        "usage": "Comment prévoyez-vous d'utiliser ComfyUI ?"
-      },
       "title": "Enquête Cloud"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "En savoir plus sur Cloud",
   "cloudStart_title": "créez en quelques secondes",
   "cloudStart_wantToRun": "Vous préférez exécuter ComfyUI localement ?",
-  "cloudSurvey_steps_familiarity": "Quelle est votre familiarité avec ComfyUI ?",
+  "cloudSurvey_steps_experience": "Quel est votre niveau de connaissance de ComfyUI ?",
+  "cloudSurvey_steps_focus": "Qu'êtes-vous en train de créer ?",
   "cloudSurvey_steps_intent": "Que souhaitez-vous créer avec ComfyUI ?",
   "cloudSurvey_steps_source": "Où avez-vous entendu parler de ComfyUI ?",
-  "cloudSurvey_steps_usage": "Comment prévoyez-vous d'utiliser ComfyUI ?",
+  "cloudSurvey_steps_source_social": "Quelle plateforme ?",
   "cloudWaitlist_contactLink": "ici",
   "cloudWaitlist_questionsText": "Des questions ? Contactez-nous",
   "color": {

src/locales/he/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "אנא שמרו את התשובה שלכם עד {max} תווים.",
         "chooseAnOption": "אנא בחר אפשרות.",
         "describeAnswer": "אנא תאר את תשובתך.",
         "selectAtLeastOne": "אנא בחר לפחות אפשרות אחת."
       },
       "intro": "עזרו לנו להתאים את חוויית ה-ComfyUI שלך.",
       "options": {
-        "familiarity": {
-          "advanced": "מתקדם — בונה ועורך תהליכי עבודה",
-          "basics": "בינוני — מרגיש בנוח עם היסודות",
-          "expert": "מומחה — אני עוזר לאחרים",
-          "new": "חדש — מעולם לא השתמשתי",
-          "starting": "מתחיל — עוקב אחר מדריכים"
+        "experience": {
+          "new": "חדש/ה ב-ComfyUI",
+          "pro": "משתמש/ת מתקדם/ת",
+          "some": "מכיר/ה את המערכת"
+        },
+        "focus": {
+          "custom_nodes": "צמתים מותאמים אישית",
+          "pipelines": "צינורות עבודה אוטומטיים",
+          "products": "מוצרים לאחרים"
         },
         "intent": {
-          "3d_game": "נכסי תלת-ממד / נכסי משחקים",
-          "api": "נקודות קצה של API להרצת תהליכי עבודה",
-          "apps": "יישומים מפושטים מתהליכי עבודה",
-          "audio": "שמע / מוזיקה",
-          "custom_nodes": "צמתים מותאמים",
+          "apps_api": "אפליקציות ו-API",
+          "exploring": "רק בודק/ת",
           "images": "תמונות",
-          "not_sure": "לא בטוח",
-          "videos": "סרטונים",
+          "other": "משהו אחר",
+          "otherPlaceholder": "מה תרצו ליצור?",
+          "video": "וידאו",
           "workflows": "תהליכי עבודה או צינורות (pipelines) מותאמים"
         },
         "source": {
-          "conference": "כנס או אירוע",
-          "discord": "Discord / קהילה",
+          "community": "קהילה או פורום",
           "friend": "חבר או עמית",
-          "github": "GitHub",
+          "other": "אחר",
+          "otherPlaceholder": "היכן שמעתם עלינו?",
+          "search": "Google / חיפוש",
+          "social": "רשתות חברתיות"
+        },
+        "source_social": {
+          "discord": "Discord",
           "instagram": "Instagram",
           "linkedin": "LinkedIn",
-          "newsletter": "ניוזלטר או בלוג",
-          "other": "אחר",
           "reddit": "Reddit",
-          "search": "Google / חיפוש",
-          "twitter": "Twitter / X",
+          "tiktok": "TikTok",
+          "twitter": "X (Twitter)",
           "youtube": "YouTube"
-        },
-        "usage": {
-          "education": "חינוך (סטודנט או מרצה)",
-          "personal": "שימוש אישי",
-          "work": "עבודה"
         }
       },
+      "otherPlaceholder": "ספרו לנו עוד",
       "placeholder": "מציין מיקום לשאלות הסקר",
-      "steps": {
-        "familiarity": "עד כמה אתה מכיר את ComfyUI?",
-        "intent": "מה ברצונך ליצור עם ComfyUI?",
-        "source": "היכן שמעת על ComfyUI?",
-        "usage": "כיצד אתה מתכנן להשתמש ב-ComfyUI?"
-      },
       "title": "סקר ענן"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "למד על הענן",
   "cloudStart_title": "התחל ליצור תוך שניות",
   "cloudStart_wantToRun": "מעדיף להריץ את ComfyUI מקומית?",
-  "cloudSurvey_steps_familiarity": "עד כמה אתה מכיר את ComfyUI?",
+  "cloudSurvey_steps_experience": "עד כמה אתם מכירים את ComfyUI?",
+  "cloudSurvey_steps_focus": "מה אתם בונים?",
   "cloudSurvey_steps_intent": "מה ברצונך ליצור עם ComfyUI?",
   "cloudSurvey_steps_source": "היכן שמעת על ComfyUI?",
-  "cloudSurvey_steps_usage": "כיצד אתה מתכנן להשתמש ב-ComfyUI?",
+  "cloudSurvey_steps_source_social": "באיזו פלטפורמה?",
   "cloudWaitlist_contactLink": "כאן",
   "cloudWaitlist_questionsText": "שאלות? צור איתנו קשר",
   "color": {

src/locales/ja/main.json

@@ -515,57 +515,52 @@
     },
     "survey": {
       "errors": {
+        "answerTooLong": "回答は{max}文字以内で入力してください。",
         "chooseAnOption": "オプションを選択してください。",
         "describeAnswer": "回答を記述してください。",
         "selectAtLeastOne": "少なくとも1つ選択してください。"
       },
       "intro": "ComfyUIの体験をより最適化するためにご協力ください。",
       "options": {
-        "familiarity": {
-          "advanced": "上級ユーザー（カスタムワークフロー）",
-          "basics": "基本操作に慣れている",
-          "expert": "エキスパート（他者を支援）",
-          "new": "ComfyUI初心者（使用経験なし）",
-          "starting": "使い始め（チュートリアルをフォロー中）"
+        "experience": {
+          "new": "ComfyUIは初めて",
+          "pro": "上級ユーザー",
+          "some": "ある程度使い方が分かる"
+        },
+        "focus": {
+          "custom_nodes": "カスタムノード",
+          "pipelines": "自動パイプライン",
+          "products": "他者向けプロダクト"
         },
         "intent": {
-          "3d_game": "3Dアセット／ゲームアセット",
-          "api": "ワークフロー実行用APIエンドポイント",
-          "apps": "ワークフローから簡易アプリ作成",
-          "audio": "音声／音楽",
-          "custom_nodes": "カスタムノード",
+          "apps_api": "アプリ・API",
+          "exploring": "探索中",
           "images": "画像",
-          "not_sure": "まだ分からない",
-          "videos": "動画",
+          "other": "その他",
+          "otherPlaceholder": "何を作りたいですか？",
+          "video": "動画",
           "workflows": "カスタムワークフローやパイプライン"
         },
         "source": {
-          "conference": "カンファレンスやイベント",
-          "discord": "Discord／コミュニティ",
+          "community": "コミュニティ・フォーラム",
           "friend": "友人または同僚",
-          "github": "GitHub",
+          "other": "その他",
+          "otherPlaceholder": "どこで私たちを知りましたか？",
+          "search": "Google／検索",
+          "social": "ソーシャルメディア"
+        },
+        "source_social": {
+          "discord": "Discord",
           "instagram": "Instagram",
           "linkedin": "LinkedIn",
-          "newsletter": "ニュースレターやブログ",
-          "other": "その他",
           "reddit": "Reddit",
-          "search": "Google／検索",
-          "twitter": "Twitter / X",
+          "tiktok": "TikTok",
+          "twitter": "X（Twitter）",
           "youtube": "YouTube"
-        },
-        "usage": {
-          "education": "教育（学生または教育者）",
-          "personal": "個人利用",
-          "work": "仕事"
         }
       },
+      "otherPlaceholder": "詳細をお聞かせください",
       "placeholder": "アンケート質問のプレースホルダー",
-      "steps": {
-        "familiarity": "ComfyUIの使用経験はどの程度ですか？",
-        "intent": "ComfyUIで何を作成したいですか？",
-        "source": "ComfyUIをどこで知りましたか？",
-        "usage": "ComfyUIをどのように利用する予定ですか？"
-      },
       "title": "クラウドアンケート"
     }
   },
@@ -578,10 +573,11 @@
   "cloudStart_learnAboutButton": "クラウドについて学ぶ",
   "cloudStart_title": "数秒で作成を開始",
   "cloudStart_wantToRun": "代わりにローカルでComfyUIを実行したいですか？",
-  "cloudSurvey_steps_familiarity": "ComfyUIにどの程度精通していますか？",
+  "cloudSurvey_steps_experience": "ComfyUIの知識レベルは？",
+  "cloudSurvey_steps_focus": "何を作成していますか？",
   "cloudSurvey_steps_intent": "ComfyUIで何を作成したいですか？",
   "cloudSurvey_steps_source": "ComfyUIをどこで知りましたか？",
-  "cloudSurvey_steps_usage": "ComfyUIをどのように利用する予定ですか？",
+  "cloudSurvey_steps_source_social": "どのプラットフォームですか？",
   "cloudWaitlist_contactLink": "こちら",
   "cloudWaitlist_questionsText": "質問がありますか？お問い合わせください",
   "color": {