fix(website): hero slider only affects output when depth map wired

The slider's levels filter is conceptually depth-tied (it lives on the green→depth path, and only the intermediate depth-map node uses it). When canny is the sole input, dragging the slider was filtering the canny edges in the output card, which read as a bug. Skip the filter on the canny-only branch — the slider is now a no-op for the final card unless depth is wired in.
fix(website): hero green input desat only, drop card rim/shadow
2026-05-22 13:32:11 +00:00 · 2026-05-07 15:02:45 +03:00 · 2026-05-07 14:47:08 +03:00 · 2026-05-07 14:08:45 +03:00 · 2026-05-07 13:38:34 +03:00 · 2026-05-07 13:23:51 +03:00
11 changed files with 1448 additions and 411 deletions
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -27,7 +27,6 @@
    "gsap": "catalog:",
    "lenis": "catalog:",
    "posthog-js": "catalog:",
-    "three": "catalog:",
    "vue": "catalog:",
    "zod": "catalog:"
  },
--- a/apps/website/public/images/hero/blue-node.png
+++ b/apps/website/public/images/hero/blue-node.png
--- a/apps/website/public/images/hero/green-node.png
+++ b/apps/website/public/images/hero/green-node.png
--- a/apps/website/public/images/hero/purple-node.png
+++ b/apps/website/public/images/hero/purple-node.png
--- a/apps/website/public/images/hero/red-node.png
+++ b/apps/website/public/images/hero/red-node.png
--- a/apps/website/src/components/home/HeroCanvas.vue
+++ b/apps/website/src/components/home/HeroCanvas.vue
--- a/apps/website/src/components/home/HeroSection.vue
+++ b/apps/website/src/components/home/HeroSection.vue
@@ -1,55 +1,57 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
 import type { Locale } from '../../i18n/translations'
 import { externalLinks } from '../../config/routes'
-import { useHeroLogo } from '../../composables/useHeroLogo'
 import { t } from '../../i18n/translations'
 import BrandButton from '../common/BrandButton.vue'
+import HeroCanvas from './HeroCanvas.vue'

 const { locale = 'en' } = defineProps<{ locale?: Locale }>()
-
-const logoContainer = ref<HTMLElement>()
-const { loaded: logoLoaded } = useHeroLogo(logoContainer)
 </script>

 <template>
-  <section
-    class="relative flex min-h-auto flex-col lg:flex-row lg:items-center"
-  >
+  <section class="bg-primary-comfy-ink relative overflow-hidden">
+    <!--
+      Text sits in normal flow and drives the section height via min-h. The
+      canvas is layered above with z-10 and captures all pointer events, so the
+      text appears *behind* the nodes and the drag/slider interactions work
+      across the entire hero — including over the text itself.
+    -->
    <div
-      ref="logoContainer"
-      class="relative flex aspect-square w-full flex-1 items-center justify-center"
+      class="relative flex min-h-[680px] items-center px-6 py-14 lg:min-h-[900px] lg:justify-end lg:p-16"
    >
-      <img
-        v-show="!logoLoaded"
-        src="https://media.comfy.org/website/homepage/hero-logo-seq/Logo00.webp"
-        alt="Comfy logo"
-        class="w-3/5"
-      />
+      <div class="w-full lg:max-w-xl">
+        <h1
+          class="text-primary-comfy-canvas text-4xl font-light whitespace-pre-line lg:text-6xl"
+        >
+          {{ t('hero.title', locale) }}
+        </h1>
+
+        <p
+          class="text-primary-comfy-canvas mt-8 max-w-lg text-sm/relaxed lg:text-base"
+        >
+          {{ t('hero.subtitle', locale) }}
+        </p>
+
+        <BrandButton
+          :href="externalLinks.workflows"
+          variant="outline"
+          size="lg"
+          class="relative z-20 mt-8 w-full p-4 uppercase lg:w-auto lg:min-w-60"
+        >
+          {{ t('hero.runFirstWorkflow', locale) }}
+        </BrandButton>
+      </div>
    </div>

-    <div class="flex-1 px-6 py-12 lg:px-16">
-      <h1
-        class="text-primary-comfy-canvas text-4xl font-light whitespace-pre-line lg:text-6xl"
-      >
-        {{ t('hero.title', locale) }}
-      </h1>
-
-      <p
-        class="text-primary-comfy-canvas mt-8 max-w-lg text-sm/relaxed lg:text-base"
-      >
-        {{ t('hero.subtitle', locale) }}
-      </p>
-
-      <BrandButton
-        :href="externalLinks.workflows"
-        variant="outline"
-        size="lg"
-        class="mt-8 w-full p-4 uppercase lg:w-auto lg:min-w-60"
-      >
-        {{ t('hero.runFirstWorkflow', locale) }}
-      </BrandButton>
+    <!--
+      Canvas absolute-fills the section on every viewport. Because it sits on
+      top of the text (z-10) and is transparent except for the nodes, users
+      can drag nodes freely across the whole hero, over the copy included.
+      The default fit biases the cluster to the left on lg+ so nodes don't
+      start overlapping the text column on the right (see fitView).
+    -->
+    <div class="absolute inset-0 z-10">
+      <HeroCanvas />
    </div>
  </section>
 </template>
--- a/apps/website/src/composables/useHeroLogo.ts
+++ b/apps/website/src/composables/useHeroLogo.ts
@@ -1,328 +0,0 @@
-import type { Ref } from 'vue'
-import { onMounted, onUnmounted, ref } from 'vue'
-
-import * as THREE from 'three'
-import { SVGLoader } from 'three/addons/loaders/SVGLoader.js'
-
-import { prefersReducedMotion } from './useReducedMotion'
-
-const IMAGE_COUNT = 16
-const BASE_URL = 'https://media.comfy.org/website/homepage/hero-logo-seq'
-
-const SVG_MARKUP = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 404"><path fill="#000000" d="M296.597 302.576C297.299 300.205 297.682 297.705 297.682 295.078C297.682 280.529 285.938 268.736 271.45 268.736H153.883C147.564 268.8 142.395 263.673 142.395 257.328C142.395 256.174 142.586 255.084 142.841 254.059L174.499 143.309C175.839 138.438 180.307 134.849 185.541 134.849L303.554 134.72C328.446 134.72 349.444 117.864 355.763 94.8555L373.506 33.1353C374.081 30.9562 374.4 28.5848 374.4 26.2134C374.4 11.7288 362.72 0 348.295 0H205.518C180.754 0 159.819 16.7279 153.373 39.4804L141.373 81.5886C139.969 86.3954 135.565 89.9205 130.332 89.9205H96.0573C71.4845 89.9205 50.7412 106.328 44.1034 128.824L0.957382 280.144C0.319127 282.387 0 284.823 0 287.258C0 301.807 11.7439 313.6 26.2323 313.6H59.9321C66.2508 313.6 71.4207 318.727 71.4207 325.137C71.4207 326.226 71.293 327.316 70.9739 328.341L59.0385 370.065C58.4641 372.308 58.0811 374.615 58.0811 376.987C58.0811 391.471 69.7612 403.2 84.1857 403.2L227.027 403.072C251.855 403.072 272.79 386.28 279.172 363.399L296.533 302.64L296.597 302.576Z"/></svg>`
-
-interface HeroLogoConfig {
-  speed: number
-  tiltX: number
-  tiltZ: number
-  zoom: number
-  fov: number
-  logoColor: string
-  extrudeDepth: number
-  cursorTiltStrength: number
-  bgScale: number
-  slideDuration: number
-}
-
-const DEFAULTS: HeroLogoConfig = {
-  speed: 1,
-  tiltX: -0.1,
-  tiltZ: -0.1,
-  zoom: 7,
-  fov: 50,
-  logoColor: '#F2FF59',
-  extrudeDepth: 200,
-  cursorTiltStrength: 0.5,
-  bgScale: 0.8,
-  slideDuration: 0.4
-}
-
-function buildImageUrls(): string[] {
-  return Array.from({ length: IMAGE_COUNT }, (_, i) => {
-    const index = String(i).padStart(5, '0')
-    return `${BASE_URL}/image_sequence_${index}.webp`
-  })
-}
-
-function parseShapes(): THREE.Shape[] {
-  const loader = new SVGLoader()
-  const svgData = loader.parse(SVG_MARKUP)
-  const shapes: THREE.Shape[] = []
-  svgData.paths.forEach((path) => {
-    shapes.push(...SVGLoader.createShapes(path))
-  })
-  return shapes
-}
-
-function loadTextures(urls: string[]): Promise<THREE.Texture[]> {
-  return Promise.all(
-    urls.map(
-      (url) =>
-        new Promise<THREE.Texture | null>((resolve) => {
-          const img = new Image()
-          img.crossOrigin = 'anonymous'
-          img.onload = () => {
-            const tex = new THREE.Texture(img)
-            tex.needsUpdate = true
-            tex.colorSpace = THREE.SRGBColorSpace
-            resolve(tex)
-          }
-          img.onerror = () => resolve(null)
-          img.src = url
-        })
-    )
-  ).then((results) => results.filter((t): t is THREE.Texture => t !== null))
-}
-
-export function useHeroLogo(
-  containerRef: Ref<HTMLElement | undefined>,
-  config: Partial<HeroLogoConfig> = {}
-) {
-  const cfg = { ...DEFAULTS, ...config }
-  const loaded = ref(false)
-  let cleanup: (() => void) | undefined
-
-  onMounted(async () => {
-    try {
-      const container = containerRef.value
-      if (!container || prefersReducedMotion()) return
-
-      const { width, height } = container.getBoundingClientRect()
-
-      const renderer = new THREE.WebGLRenderer({
-        antialias: true,
-        stencil: true,
-        alpha: true
-      })
-      renderer.setSize(width, height)
-      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
-      renderer.outputColorSpace = THREE.SRGBColorSpace
-      renderer.domElement.style.position = 'absolute'
-      renderer.domElement.style.inset = '0'
-      renderer.domElement.style.width = '100%'
-      renderer.domElement.style.height = '100%'
-      renderer.domElement.style.opacity = '0'
-      renderer.domElement.setAttribute('aria-hidden', 'true')
-      container.appendChild(renderer.domElement)
-
-      let disposed = false
-      const teardowns: Array<() => void> = []
-      cleanup = () => {
-        disposed = true
-        teardowns.forEach((fn) => fn())
-      }
-      teardowns.push(() => {
-        renderer.dispose()
-        renderer.domElement.remove()
-      })
-
-      const scene = new THREE.Scene()
-      const camera = new THREE.PerspectiveCamera(
-        cfg.fov,
-        width / height,
-        0.1,
-        1000
-      )
-      camera.position.z = cfg.zoom
-
-      // SVG shape
-      const shapes = parseShapes()
-      const tempGeo = new THREE.ShapeGeometry(shapes)
-      tempGeo.computeBoundingBox()
-      const bb = tempGeo.boundingBox!
-      const cx = (bb.max.x + bb.min.x) / 2
-      const cy = (bb.max.y + bb.min.y) / 2
-      const scaleFactor = 3 / (bb.max.y - bb.min.y)
-      tempGeo.dispose()
-
-      // Image sequence textures — load first frame eagerly, rest lazily
-      const urls = buildImageUrls()
-      const textures = await loadTextures(urls.slice(0, 1))
-      if (disposed) return
-
-      renderer.domElement.style.opacity = '1'
-      loaded.value = true
-
-      loadTextures(urls.slice(1)).then((rest) => {
-        if (!disposed) textures.push(...rest)
-      })
-
-      // Background plane (stencil read)
-      const bgPlaneGeo = new THREE.PlaneGeometry(14, 14)
-      const bgPlaneMat = new THREE.MeshBasicMaterial({
-        transparent: true,
-        opacity: 1,
-        map: textures[0] ?? null,
-        depthTest: false,
-        depthWrite: false,
-        stencilWrite: true,
-        stencilFunc: THREE.EqualStencilFunc,
-        stencilRef: 1,
-        stencilFail: THREE.KeepStencilOp,
-        stencilZFail: THREE.KeepStencilOp,
-        stencilZPass: THREE.KeepStencilOp
-      })
-      const bgPlane = new THREE.Mesh(bgPlaneGeo, bgPlaneMat)
-      bgPlane.renderOrder = 1
-      bgPlane.scale.set(cfg.bgScale, cfg.bgScale, 1)
-      scene.add(bgPlane)
-
-      // Logo group
-      const group = new THREE.Group()
-      scene.add(group)
-
-      const s = scaleFactor
-      const depth = cfg.extrudeDepth
-
-      // Front face
-      const shapeGeo = new THREE.ShapeGeometry(shapes)
-      shapeGeo.translate(-cx, -cy, 0)
-      shapeGeo.scale(s, -s, s)
-      const shapeMat = new THREE.MeshBasicMaterial({
-        color: cfg.logoColor,
-        side: THREE.DoubleSide,
-        depthTest: false,
-        depthWrite: false,
-        transparent: true
-      })
-      const logoMesh = new THREE.Mesh(shapeGeo, shapeMat)
-      logoMesh.renderOrder = 2
-      group.add(logoMesh)
-
-      // Extrusion stencil mask
-      const extrudeGeo = new THREE.ExtrudeGeometry(shapes, {
-        depth,
-        bevelEnabled: false
-      })
-      extrudeGeo.translate(-cx, -cy, -depth)
-      extrudeGeo.scale(s, -s, s)
-      const extrudeMat = new THREE.MeshBasicMaterial({
-        colorWrite: false,
-        depthWrite: true,
-        depthTest: true,
-        stencilWrite: true,
-        stencilRef: 1,
-        stencilFunc: THREE.AlwaysStencilFunc,
-        stencilZPass: THREE.ReplaceStencilOp,
-        stencilFail: THREE.KeepStencilOp,
-        stencilZFail: THREE.KeepStencilOp,
-        side: THREE.DoubleSide
-      })
-      const extrudeMesh = new THREE.Mesh(extrudeGeo, extrudeMat)
-      extrudeMesh.renderOrder = 0
-      group.add(extrudeMesh)
-
-      // Interaction
-      let isDragging = false
-      let previousX = 0
-      let dragVelocity = 0
-      let currentTiltX = 0
-      let currentTiltY = 0
-      let pointerX = 0
-      let pointerY = 0
-      let rotationT = 0
-      let currentSlide = 0
-      let slideTimer = 0
-      let animationId = 0
-
-      function onMouseMove(e: MouseEvent) {
-        pointerX = (e.clientX / window.innerWidth) * 2 - 1
-        pointerY = (e.clientY / window.innerHeight) * 2 - 1
-      }
-
-      function onPointerDown(e: PointerEvent) {
-        isDragging = true
-        dragVelocity = 0
-        previousX = e.clientX
-      }
-
-      function onPointerMove(e: PointerEvent) {
-        if (!isDragging) return
-        dragVelocity = (e.clientX - previousX) * 0.005
-        rotationT += dragVelocity
-        previousX = e.clientX
-      }
-
-      function onPointerUp() {
-        isDragging = false
-      }
-
-      function onResize() {
-        const rect = container!.getBoundingClientRect()
-        camera.aspect = rect.width / rect.height
-        camera.updateProjectionMatrix()
-        renderer.setSize(rect.width, rect.height)
-      }
-
-      window.addEventListener('mousemove', onMouseMove)
-      renderer.domElement.addEventListener('pointerdown', onPointerDown)
-      window.addEventListener('pointermove', onPointerMove)
-      window.addEventListener('pointerup', onPointerUp)
-      window.addEventListener('resize', onResize)
-
-      const clock = new THREE.Clock()
-
-      function animate() {
-        if (disposed) return
-        animationId = requestAnimationFrame(animate)
-        const dt = clock.getDelta()
-
-        if (!isDragging && Math.abs(dragVelocity) > 0.0001) {
-          dragVelocity *= 0.95
-          rotationT += dragVelocity
-        } else if (!isDragging) {
-          dragVelocity = 0
-        }
-
-        rotationT += cfg.speed * dt
-
-        currentTiltX += (pointerY - currentTiltX) * 0.08
-        currentTiltY += (pointerX - currentTiltY) * 0.08
-
-        group.rotation.y = rotationT % (Math.PI * 2)
-        group.rotation.x = cfg.tiltX - currentTiltX * cfg.cursorTiltStrength
-        group.rotation.z = cfg.tiltZ
-
-        if (textures.length > 1) {
-          slideTimer += dt
-          if (slideTimer >= cfg.slideDuration) {
-            slideTimer = 0
-            currentSlide = (currentSlide + 1) % textures.length
-            bgPlaneMat.map = textures[currentSlide]
-            bgPlaneMat.needsUpdate = true
-          }
-        }
-
-        renderer.render(scene, camera)
-      }
-
-      animate()
-
-      teardowns.push(
-        () => cancelAnimationFrame(animationId),
-        () => window.removeEventListener('mousemove', onMouseMove),
-        () =>
-          renderer.domElement.removeEventListener('pointerdown', onPointerDown),
-        () => window.removeEventListener('pointermove', onPointerMove),
-        () => window.removeEventListener('pointerup', onPointerUp),
-        () => window.removeEventListener('resize', onResize),
-        () => bgPlaneGeo.dispose(),
-        () => bgPlaneMat.dispose(),
-        () => shapeGeo.dispose(),
-        () => shapeMat.dispose(),
-        () => extrudeGeo.dispose(),
-        () => extrudeMat.dispose(),
-        () => textures.forEach((tex) => tex.dispose())
-      )
-    } catch (err) {
-      console.error('[useHeroLogo] initialization failed:', err)
-      cleanup?.()
-    }
-  })
-
-  onUnmounted(() => {
-    cleanup?.()
-  })
-
-  return { loaded }
-}
--- a/package.json
+++ b/package.json
@@ -140,6 +140,8 @@
    "@storybook/addon-mcp": "catalog:",
    "@storybook/vue3": "catalog:",
    "@storybook/vue3-vite": "catalog:",
+    "@swc-node/register": "catalog:",
+    "@swc/core": "catalog:",
    "@tailwindcss/vite": "catalog:",
    "@testing-library/jest-dom": "catalog:",
    "@testing-library/user-event": "catalog:",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -105,6 +105,12 @@ catalogs:
    '@storybook/vue3-vite':
      specifier: ^10.2.10
      version: 10.2.10
+    '@swc-node/register':
+      specifier: ^1.11.1
+      version: 1.11.1
+    '@swc/core':
+      specifier: ^1.15.33
+      version: 1.15.33
    '@tailwindcss/vite':
      specifier: ^4.2.0
      version: 4.2.0
@@ -339,9 +345,6 @@ catalogs:
    tailwindcss-primeui:
      specifier: ^0.6.1
      version: 0.6.1
-    three:
-      specifier: ^0.170.0
-      version: 0.170.0
    tsx:
      specifier: ^4.15.6
      version: 4.19.4
@@ -641,16 +644,16 @@ importers:
        version: 1.26.1(@types/react@19.1.9)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@19.2.4))(ws@8.19.0)(zod@3.25.76)
      '@nx/eslint':
        specifier: 'catalog:'
-        version: 22.6.1(@babel/traverse@7.29.0)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1)
+        version: 22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
      '@nx/playwright':
        specifier: 'catalog:'
-        version: 22.6.1(@babel/traverse@7.29.0)(@playwright/test@1.58.1)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1)
+        version: 22.6.1(@babel/traverse@7.29.0)(@playwright/test@1.58.1)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
      '@nx/storybook':
        specifier: 'catalog:'
-        version: 22.6.1(@babel/traverse@7.29.0)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1)(storybook@10.2.10(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+        version: 22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))(storybook@10.2.10(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
      '@nx/vite':
        specifier: 'catalog:'
-        version: 22.6.1(@babel/traverse@7.29.0)(nx@22.6.1)(typescript@5.9.3)(vite@8.0.0(@types/node@24.10.4)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))(vitest@4.0.16)
+        version: 22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))(typescript@5.9.3)(vite@8.0.0(@types/node@24.10.4)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))(vitest@4.0.16)
      '@pinia/testing':
        specifier: 'catalog:'
        version: 1.0.3(pinia@3.0.4(typescript@5.9.3)(vue@3.5.13(typescript@5.9.3)))
@@ -672,6 +675,12 @@ importers:
      '@storybook/vue3-vite':
        specifier: 'catalog:'
        version: 10.2.10(esbuild@0.27.3)(rollup@4.53.5)(storybook@10.2.10(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@8.0.0(@types/node@24.10.4)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))(vue@3.5.13(typescript@5.9.3))
+      '@swc-node/register':
+        specifier: 'catalog:'
+        version: 1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3)
+      '@swc/core':
+        specifier: 'catalog:'
+        version: 1.15.33(@swc/helpers@0.5.17)
      '@tailwindcss/vite':
        specifier: 'catalog:'
        version: 4.2.0(vite@8.0.0(@types/node@24.10.4)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))
@@ -788,7 +797,7 @@ importers:
        version: 2.12.9
      nx:
        specifier: 'catalog:'
-        version: 22.6.1
+        version: 22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))
      oxfmt:
        specifier: 'catalog:'
        version: 0.44.0
@@ -967,9 +976,6 @@ importers:
      posthog-js:
        specifier: 'catalog:'
        version: 1.358.1
-      three:
-        specifier: 'catalog:'
-        version: 0.170.0
      vue:
        specifier: 'catalog:'
        version: 3.5.13(typescript@5.9.3)
@@ -4106,9 +4112,118 @@ packages:
      storybook: ^10.2.10
      vue: ^3.0.0

+  '@swc-node/core@1.14.1':
+    resolution: {integrity: sha512-jrt5GUaZUU6cmMS+WTJEvGvaB6j1YNKPHPzC2PUi2BjaFbtxURHj6641Az6xN7b665hNniAIdvjxWcRml5yCnw==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      '@swc/core': '>= 1.13.3'
+      '@swc/types': '>= 0.1'
+
+  '@swc-node/register@1.11.1':
+    resolution: {integrity: sha512-VQ0hJ5jX31TVv/fhZx4xJRzd8pwn6VvzYd2tGOHHr2TfXGCBixZoqdPDXTiEoJLCTS2MmvBf6zyQZZ0M8aGQCQ==}
+    peerDependencies:
+      '@swc/core': '>= 1.4.13'
+      typescript: '>= 4.3'
+
+  '@swc-node/sourcemap-support@0.6.1':
+    resolution: {integrity: sha512-ovltDVH5QpdHXZkW138vG4+dgcNsxfwxHVoV6BtmTbz2KKl1A8ZSlbdtxzzfNjCjbpayda8Us9eMtcHobm38dA==}
+
+  '@swc/core-darwin-arm64@1.15.33':
+    resolution: {integrity: sha512-N+L0uXhuO7FIfzqwgxmzv0zIpV0qEp8wPX3QQs2p4atjMoywup2JTeDlXPw+z9pWJGCae3JjM+tZ6myclI+2gA==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@swc/core-darwin-x64@1.15.33':
+    resolution: {integrity: sha512-/Il4QHSOhV4FekbsDtkrNmKbsX26oSysvgrRswa/RYOHXAkwXDbB4jaeKq6PsJLSPkzJ2KzQ061gtBnk0vNHfA==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@swc/core-linux-arm-gnueabihf@1.15.33':
+    resolution: {integrity: sha512-C64hBnBxq4viOPQ8hlx+2lJ23bzZBGnjw7ryALmS+0Q3zHmwO8lw1/DArLENw4Q18/0w5wdEO1k3m1wWNtKGqQ==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@swc/core-linux-arm64-gnu@1.15.33':
+    resolution: {integrity: sha512-TRJfnJbX3jqpxRDRoieMzRiCBS5jOmXNb3iQXmcgjFEHKLnAgK1RZRU8Cq1MsPqO4jAJp/ld1G4O3fXuxv85uw==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@swc/core-linux-arm64-musl@1.15.33':
+    resolution: {integrity: sha512-il7tYM+CpUNzieQbwAjFT1P8zqAhmGWNAGhQZBnxurXZ0aNn+5nqYFTEUKNZl7QibtT0uQXzTZrNGHCIj6Y1Og==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@swc/core-linux-ppc64-gnu@1.15.33':
+    resolution: {integrity: sha512-ZtNBwN0Z7CFj9Il0FcPaKdjgP7URyKu/3RfH46vq+0paOBqLj4NYldD6Qo//Duif/7IOtAraUfDOmp0PLAufog==}
+    engines: {node: '>=10'}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@swc/core-linux-s390x-gnu@1.15.33':
+    resolution: {integrity: sha512-De1IyajoOmhOYYjw/lx66bKlyDpHZTueqwpDrWgf5O7T6d1ODeJJO9/OqMBmrBQc5C+dNnlmIufHsp4QVCWufA==}
+    engines: {node: '>=10'}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@swc/core-linux-x64-gnu@1.15.33':
+    resolution: {integrity: sha512-mGTH0YxmUN+x6vRN/I6NOk5X0ogNktkwPnJ94IMvR7QjhRDwL0O8RXEDhyUM0YtwWrryBOqaJQBX4zruxEPRGw==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@swc/core-linux-x64-musl@1.15.33':
+    resolution: {integrity: sha512-hj628ZkSEJf6zMf5VMbYrG2O6QqyTIp2qwY6VlCjvIa9lAEZ5c2lfPblCLVGYubTeLJDxadLB/CxqQYOQABeEQ==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@swc/core-win32-arm64-msvc@1.15.33':
+    resolution: {integrity: sha512-GV2oohtN2/5+KSccl86VULu3aT+LrISC8uzgSq0FRnikpD+Zwc+sBlXmoKQ+Db6jI57ITUOIB8jRkdGMABC29g==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@swc/core-win32-ia32-msvc@1.15.33':
+    resolution: {integrity: sha512-gtyvzSNR8DHKfFEA2uqb8Ld1myqi6uEg2jyeUq3ikn5ytYs7H8RpZYC8mdy4NXr8hfcdJfCLXPlYaqqfBXpoEQ==}
+    engines: {node: '>=10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@swc/core-win32-x64-msvc@1.15.33':
+    resolution: {integrity: sha512-d6fRqQSkJI+kmMEBWaDQ7TMl8+YjLYbwRUPZQ9DY0ORBJeTzOrG0twvfvlZ2xgw6jA0ScQKgfBm4vHLSLl5Hqg==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@swc/core@1.15.33':
+    resolution: {integrity: sha512-jOlwnFV2xhuuZeAUILGFULeR6vDPfijEJ57evfocwznQldLU3w2cZ9bSDryY9ip+AsM3r1NJKzf47V2NXebkeQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@swc/helpers': '>=0.5.17'
+    peerDependenciesMeta:
+      '@swc/helpers':
+        optional: true
+
+  '@swc/counter@0.1.3':
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+
  '@swc/helpers@0.5.17':
    resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}

+  '@swc/types@0.1.26':
+    resolution: {integrity: sha512-lyMwd7WGgG79RS7EERZV3T8wMdmPq3xwyg+1nmAM64kIhx5yl+juO2PYIHb7vTiPgPCj8LYjsNV2T5wiQHUEaw==}
+
  '@tailwindcss/node@4.2.0':
    resolution: {integrity: sha512-Yv+fn/o2OmL5fh/Ir62VXItdShnUxfpkMA4Y7jdeC8O81WPB8Kf6TT6GSHvnqgSwDzlB5iT7kDpeXxLsUS0T6Q==}

@@ -8290,6 +8405,10 @@ packages:
      typescript:
        optional: true

+  pirates@4.0.7:
+    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
+    engines: {node: '>= 6'}
+
  pkg-types@1.3.1:
    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}

@@ -12334,11 +12453,11 @@ snapshots:
      '@nodelib/fs.scandir': 2.1.5
      fastq: 1.20.1

-  '@nx/cypress@22.6.1(@babel/traverse@7.29.0)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1)(typescript@5.9.3)':
+  '@nx/cypress@22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))(typescript@5.9.3)':
    dependencies:
-      '@nx/devkit': 22.6.1(nx@22.6.1)
-      '@nx/eslint': 22.6.1(@babel/traverse@7.29.0)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1)
-      '@nx/js': 22.6.1(@babel/traverse@7.29.0)(nx@22.6.1)
+      '@nx/devkit': 22.6.1(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
+      '@nx/eslint': 22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
+      '@nx/js': 22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
      '@phenomnomnominal/tsquery': 6.1.4(typescript@5.9.3)
      detect-port: 1.6.1
      semver: 7.7.4
@@ -12356,21 +12475,21 @@ snapshots:
      - typescript
      - verdaccio

-  '@nx/devkit@22.6.1(nx@22.6.1)':
+  '@nx/devkit@22.6.1(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))':
    dependencies:
      '@zkochan/js-yaml': 0.0.7
      ejs: 3.1.10
      enquirer: 2.3.6
      minimatch: 10.2.4
-      nx: 22.6.1
+      nx: 22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))
      semver: 7.7.4
      tslib: 2.8.1
      yargs-parser: 21.1.1

-  '@nx/eslint@22.6.1(@babel/traverse@7.29.0)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1)':
+  '@nx/eslint@22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))':
    dependencies:
-      '@nx/devkit': 22.6.1(nx@22.6.1)
-      '@nx/js': 22.6.1(@babel/traverse@7.29.0)(nx@22.6.1)
+      '@nx/devkit': 22.6.1(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
+      '@nx/js': 22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
      eslint: 9.39.1(jiti@2.6.1)
      semver: 7.7.4
      tslib: 2.8.1
@@ -12386,7 +12505,7 @@ snapshots:
      - supports-color
      - verdaccio

-  '@nx/js@22.6.1(@babel/traverse@7.29.0)(nx@22.6.1)':
+  '@nx/js@22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))':
    dependencies:
      '@babel/core': 7.29.0
      '@babel/plugin-proposal-decorators': 7.29.0(@babel/core@7.29.0)
@@ -12395,8 +12514,8 @@ snapshots:
      '@babel/preset-env': 7.29.0(@babel/core@7.29.0)
      '@babel/preset-typescript': 7.28.5(@babel/core@7.29.0)
      '@babel/runtime': 7.29.2
-      '@nx/devkit': 22.6.1(nx@22.6.1)
-      '@nx/workspace': 22.6.1
+      '@nx/devkit': 22.6.1(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
+      '@nx/workspace': 22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))
      '@zkochan/js-yaml': 0.0.7
      babel-plugin-const-enum: 1.2.0(@babel/core@7.29.0)
      babel-plugin-macros: 3.1.0
@@ -12452,11 +12571,11 @@ snapshots:
  '@nx/nx-win32-x64-msvc@22.6.1':
    optional: true

-  '@nx/playwright@22.6.1(@babel/traverse@7.29.0)(@playwright/test@1.58.1)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1)':
+  '@nx/playwright@22.6.1(@babel/traverse@7.29.0)(@playwright/test@1.58.1)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))':
    dependencies:
-      '@nx/devkit': 22.6.1(nx@22.6.1)
-      '@nx/eslint': 22.6.1(@babel/traverse@7.29.0)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1)
-      '@nx/js': 22.6.1(@babel/traverse@7.29.0)(nx@22.6.1)
+      '@nx/devkit': 22.6.1(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
+      '@nx/eslint': 22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
+      '@nx/js': 22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
      minimatch: 10.2.4
      tslib: 2.8.1
    optionalDependencies:
@@ -12472,12 +12591,12 @@ snapshots:
      - supports-color
      - verdaccio

-  '@nx/storybook@22.6.1(@babel/traverse@7.29.0)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1)(storybook@10.2.10(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)':
+  '@nx/storybook@22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))(storybook@10.2.10(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)':
    dependencies:
-      '@nx/cypress': 22.6.1(@babel/traverse@7.29.0)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1)(typescript@5.9.3)
-      '@nx/devkit': 22.6.1(nx@22.6.1)
-      '@nx/eslint': 22.6.1(@babel/traverse@7.29.0)(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1)
-      '@nx/js': 22.6.1(@babel/traverse@7.29.0)(nx@22.6.1)
+      '@nx/cypress': 22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))(typescript@5.9.3)
+      '@nx/devkit': 22.6.1(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
+      '@nx/eslint': 22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(@zkochan/js-yaml@0.0.7)(eslint@9.39.1(jiti@2.6.1))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
+      '@nx/js': 22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
      '@phenomnomnominal/tsquery': 6.1.4(typescript@5.9.3)
      semver: 7.7.4
      storybook: 10.2.10(@testing-library/dom@10.4.1)(prettier@3.7.4)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -12495,11 +12614,11 @@ snapshots:
      - typescript
      - verdaccio

-  '@nx/vite@22.6.1(@babel/traverse@7.29.0)(nx@22.6.1)(typescript@5.9.3)(vite@8.0.0(@types/node@24.10.4)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))(vitest@4.0.16)':
+  '@nx/vite@22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))(typescript@5.9.3)(vite@8.0.0(@types/node@24.10.4)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))(vitest@4.0.16)':
    dependencies:
-      '@nx/devkit': 22.6.1(nx@22.6.1)
-      '@nx/js': 22.6.1(@babel/traverse@7.29.0)(nx@22.6.1)
-      '@nx/vitest': 22.6.1(@babel/traverse@7.29.0)(nx@22.6.1)(typescript@5.9.3)(vite@8.0.0(@types/node@24.10.4)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))(vitest@4.0.16)
+      '@nx/devkit': 22.6.1(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
+      '@nx/js': 22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
+      '@nx/vitest': 22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))(typescript@5.9.3)(vite@8.0.0(@types/node@24.10.4)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))(vitest@4.0.16)
      '@phenomnomnominal/tsquery': 6.1.4(typescript@5.9.3)
      ajv: 8.18.0
      enquirer: 2.3.6
@@ -12519,10 +12638,10 @@ snapshots:
      - typescript
      - verdaccio

-  '@nx/vitest@22.6.1(@babel/traverse@7.29.0)(nx@22.6.1)(typescript@5.9.3)(vite@8.0.0(@types/node@24.10.4)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))(vitest@4.0.16)':
+  '@nx/vitest@22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))(typescript@5.9.3)(vite@8.0.0(@types/node@24.10.4)(esbuild@0.27.3)(jiti@2.6.1)(terser@5.39.2)(tsx@4.19.4)(yaml@2.8.2))(vitest@4.0.16)':
    dependencies:
-      '@nx/devkit': 22.6.1(nx@22.6.1)
-      '@nx/js': 22.6.1(@babel/traverse@7.29.0)(nx@22.6.1)
+      '@nx/devkit': 22.6.1(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
+      '@nx/js': 22.6.1(@babel/traverse@7.29.0)(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
      '@phenomnomnominal/tsquery': 6.1.4(typescript@5.9.3)
      semver: 7.7.4
      tslib: 2.8.1
@@ -12539,13 +12658,13 @@ snapshots:
      - typescript
      - verdaccio

-  '@nx/workspace@22.6.1':
+  '@nx/workspace@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))':
    dependencies:
-      '@nx/devkit': 22.6.1(nx@22.6.1)
+      '@nx/devkit': 22.6.1(nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)))
      '@zkochan/js-yaml': 0.0.7
      chalk: 4.1.2
      enquirer: 2.3.6
-      nx: 22.6.1
+      nx: 22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17))
      picomatch: 4.0.2
      semver: 7.7.4
      tslib: 2.8.1
@@ -13413,10 +13532,96 @@ snapshots:
      vue: 3.5.13(typescript@5.9.3)
      vue-component-type-helpers: 3.2.8

+  '@swc-node/core@1.14.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)':
+    dependencies:
+      '@swc/core': 1.15.33(@swc/helpers@0.5.17)
+      '@swc/types': 0.1.26
+
+  '@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3)':
+    dependencies:
+      '@swc-node/core': 1.14.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)
+      '@swc-node/sourcemap-support': 0.6.1
+      '@swc/core': 1.15.33(@swc/helpers@0.5.17)
+      colorette: 2.0.20
+      debug: 4.4.3
+      oxc-resolver: 11.19.1
+      pirates: 4.0.7
+      tslib: 2.8.1
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@swc/types'
+      - supports-color
+
+  '@swc-node/sourcemap-support@0.6.1':
+    dependencies:
+      source-map-support: 0.5.21
+      tslib: 2.8.1
+
+  '@swc/core-darwin-arm64@1.15.33':
+    optional: true
+
+  '@swc/core-darwin-x64@1.15.33':
+    optional: true
+
+  '@swc/core-linux-arm-gnueabihf@1.15.33':
+    optional: true
+
+  '@swc/core-linux-arm64-gnu@1.15.33':
+    optional: true
+
+  '@swc/core-linux-arm64-musl@1.15.33':
+    optional: true
+
+  '@swc/core-linux-ppc64-gnu@1.15.33':
+    optional: true
+
+  '@swc/core-linux-s390x-gnu@1.15.33':
+    optional: true
+
+  '@swc/core-linux-x64-gnu@1.15.33':
+    optional: true
+
+  '@swc/core-linux-x64-musl@1.15.33':
+    optional: true
+
+  '@swc/core-win32-arm64-msvc@1.15.33':
+    optional: true
+
+  '@swc/core-win32-ia32-msvc@1.15.33':
+    optional: true
+
+  '@swc/core-win32-x64-msvc@1.15.33':
+    optional: true
+
+  '@swc/core@1.15.33(@swc/helpers@0.5.17)':
+    dependencies:
+      '@swc/counter': 0.1.3
+      '@swc/types': 0.1.26
+    optionalDependencies:
+      '@swc/core-darwin-arm64': 1.15.33
+      '@swc/core-darwin-x64': 1.15.33
+      '@swc/core-linux-arm-gnueabihf': 1.15.33
+      '@swc/core-linux-arm64-gnu': 1.15.33
+      '@swc/core-linux-arm64-musl': 1.15.33
+      '@swc/core-linux-ppc64-gnu': 1.15.33
+      '@swc/core-linux-s390x-gnu': 1.15.33
+      '@swc/core-linux-x64-gnu': 1.15.33
+      '@swc/core-linux-x64-musl': 1.15.33
+      '@swc/core-win32-arm64-msvc': 1.15.33
+      '@swc/core-win32-ia32-msvc': 1.15.33
+      '@swc/core-win32-x64-msvc': 1.15.33
+      '@swc/helpers': 0.5.17
+
+  '@swc/counter@0.1.3': {}
+
  '@swc/helpers@0.5.17':
    dependencies:
      tslib: 2.8.1

+  '@swc/types@0.1.26':
+    dependencies:
+      '@swc/counter': 0.1.3
+
  '@tailwindcss/node@4.2.0':
    dependencies:
      '@jridgewell/remapping': 2.3.5
@@ -18022,7 +18227,7 @@ snapshots:
    dependencies:
      boolbase: 1.0.0

-  nx@22.6.1:
+  nx@22.6.1(@swc-node/register@1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3))(@swc/core@1.15.33(@swc/helpers@0.5.17)):
    dependencies:
      '@ltd/j-toml': 1.38.0
      '@napi-rs/wasm-runtime': 0.2.4
@@ -18071,6 +18276,8 @@ snapshots:
      '@nx/nx-linux-x64-musl': 22.6.1
      '@nx/nx-win32-arm64-msvc': 22.6.1
      '@nx/nx-win32-x64-msvc': 22.6.1
+      '@swc-node/register': 1.11.1(@swc/core@1.15.33(@swc/helpers@0.5.17))(@swc/types@0.1.26)(typescript@5.9.3)
+      '@swc/core': 1.15.33(@swc/helpers@0.5.17)
    transitivePeerDependencies:
      - debug

@@ -18452,6 +18659,8 @@ snapshots:
    optionalDependencies:
      typescript: 5.9.3

+  pirates@4.0.7: {}
+
  pkg-types@1.3.1:
    dependencies:
      confbox: 0.1.8
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -36,6 +36,8 @@ catalog:
  '@storybook/addon-mcp': 0.1.6
  '@storybook/vue3': ^10.2.10
  '@storybook/vue3-vite': ^10.2.10
+  '@swc-node/register': ^1.11.1
+  '@swc/core': ^1.15.33
  '@tailwindcss/vite': ^4.2.0
  '@tanstack/vue-virtual': ^3.13.12
  '@testing-library/jest-dom': ^6.9.1
@@ -113,7 +115,6 @@ catalog:
  storybook: ^10.2.10
  stylelint: ^16.26.1
  tailwindcss: ^4.2.0
-  three: ^0.170.0
  tailwindcss-primeui: ^0.6.1
  tsx: ^4.15.6
  tw-animate-css: ^1.3.8
Author	SHA1	Message	Date
Marwan Mostafa	ee55ad6862	fix(website): hero slider only affects output when depth map wired The slider's levels filter is conceptually depth-tied (it lives on the green→depth path, and only the intermediate depth-map node uses it). When canny is the sole input, dragging the slider was filtering the canny edges in the output card, which read as a bug. Skip the filter on the canny-only branch — the slider is now a no-op for the final card unless depth is wired in.	2026-05-07 15:02:45 +03:00
Marwan Mostafa	424edb29d7	fix(website): hero green input desat only, drop card rim/shadow The drop shadow needed an opaque rect that bled black through the PNGs' transparent corners, and the hairline rim drew a visible outline slightly off the baked corner radius. Both treatments looked worse than no treatment, so this commit keeps only the part that worked: the saturate(0.78) brightness(0.92) filter on the green input PNG so it stops outshouting the final-output card.	2026-05-07 14:47:08 +03:00
Marwan Mostafa	52b2f1dd75	fix(website): dial back hero canvas motion + apply slider in single-input modes Quieter visuals — the wire pulse, endpoint halos, and edge hover highlight added too much yellow to the hero. The wires are now plain beziers with small dots at each end; entry stagger and subtle parallax remain. Also fix: when only one of canny/depth is connected, the OUTPUT slider had no effect on the final card — adjusting the slider only updated the intermediate depth-map node, not the output preview. Apply the existing levelsFilter to the single-input renders so the slider always drives a visible change while a wire is attached.	2026-05-07 14:08:45 +03:00
Marwan Mostafa	2bdbf6d554	feat(website): refined edges with animated flow pulse Polish the connection edges so they read as live data flow rather than static lines: - bezierHandles() computes control points proportional to horizontal distance with an 80-unit floor, so short hops (slider→depth) and long hops (canny→final) both bend with a consistent feel. - Slightly thinner stroke (1.7 vs 2) and round caps. - Endpoint dots shrunk to r=4 with a soft radial halo behind them so the connection points read as glowing slots rather than flat caps. - Each connected edge gets a yellow pulse that travels source→target on a 4.5s loop, with fade-in/out at the ends so the dot doesn't pop. Driven from a 30 fps rAF loop that respects prefers-reduced-motion.	2026-05-07 13:38:34 +03:00
Marwan Mostafa	1ae7e61f01	feat(website): drag-to-rewire hero canvas connections Replace the click-toggle on the canny/depth chips with a ComfyUI-style drag UX. Pointer-down on either end of a togglable edge — the chip on the final-output card or the output dot on canny / depth — anchors the wire at that side and lets the cursor control the opposite end: - Rip-off (was connected): the wire pivots from the grabbed slot, the loose end follows the cursor. Drop on a slot of the same edge to reconnect; drop anywhere else to disconnect. - New connection (was disconnected): the grabbed slot stays anchored and the cursor sweeps toward the eventual partner. Drop on the matching slot to connect; drop in space cancels. - A quick click without movement still toggles, as a fallback. Visual cues so the slots read as interactive: - Outer rings on every connection dot — yellow when active, dim when off, with a soft halo on hover that grows on the source side. - Hairline rim and yellow halo on hovered chips so the input ports look like grab handles. - The static edge for the dragged wire is hidden during drag and a dashed yellow ghost line takes over, snapping to solid when the cursor is over a valid same-edge drop target.	2026-05-07 13:23:51 +03:00
Marwan Mostafa	af86b56c77	feat(website): connectable hero canvas + L-to-R layout - Tighten the cluster into a clean left-to-right flow: input on the left, canny+depth stacked in the middle column with the slider on the green→depth path, final output on the right. Re-tune CONTENT bounds for ~80 scene-units of breathing room around the cluster. - Make the canny→output and depth→output connections interactive. Click the CANNY EDGE / DEPTH MAP chip on the final-output card to toggle that connection (the chip is exactly where the input slot lives, giving a generous click target). Cursor swaps to pointer over a chip; disconnected chips dim to warm-gray and their edge line is hidden. - Output mode follows the connection state — both connected shows the composed final image (with the existing depth-blur scrubber), only canny shows the canny-edge view, only depth shows the depth-map view, neither shows an empty placeholder card. - Keep the canvas wrapper at full bleed and lift just the BrandButton to z-20 so drag interactions span the entire hero.	2026-05-07 12:57:39 +03:00
Marwan Mostafa	7b45c93bb5	chore(website): remove unused useHeroLogo + three dep The HeroCanvas component replaces the old logo image-sequence hero, so useHeroLogo.ts and its three.js dependency are no longer referenced.	2026-05-06 22:42:09 +03:00
Marwan Mostafa	3492ee02d0	feat(website): add interactive home hero canvas Replace the marketing hero's logo image sequence with an interactive draggable-node canvas overlaying the headline copy. - Add HeroCanvas.vue: hand-rolled <canvas> with five draggable node sprites (green/red/blue/purple/output-ui) and connecting edges, fit-to-content scaling via useResizeObserver, with starting positions shifted leftward in the scene. - HeroSection.vue: drop useHeroLogo + logo image (replaced by canvas); layer the canvas as a z-10 overlay so drag interactions span the full hero, including over the text. Keep the BrandButton 'Run first workflow' CTA, with relative z-20 so it stays clickable above the canvas overlay. - Add four hero node PNG sprites under public/images/hero/.	2026-05-06 22:40:18 +03:00
Marwan Mostafa	2c841b457f	chore(deps): add @swc-node/register and @swc/core as devDeps Nx warns 'Falling back to ts-node for local typescript execution' when loading TS configs (eg playwright.config.ts via @nx/playwright/plugin), and in some environments the ts-node fallback fails to load the configs (plugin reports them as undefined). Adding the suggested @swc-node loader resolves the fallback path and silences the warning.	2026-05-06 22:39:17 +03:00