feat: add PrimeVue component stubs to test-utils (COMP-03)

[automated] Apply ESLint and Oxfmt fixes
test: add standardized test-utils with Pinia + i18n defaults
2026-03-28 08:17:36 +00:00 · 2026-03-27 22:00:33 -07:00 · 2026-03-27 20:30:19 +00:00 · 2026-03-27 13:27:06 -07:00 · 2026-03-26 22:06:47 -07:00
17 changed files with 359 additions and 434 deletions
--- a/apps/website/public/icons/social/discord.svg
+++ b/apps/website/public/icons/social/discord.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0 12.36 12.36 0 0 0-.617-1.23A.077.077 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 2.98.078.078 0 0 0 .084-.026c.462-.62.874-1.275 1.226-1.963.021-.04.001-.088-.041-.104a13.201 13.201 0 0 1-1.872-.878.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028 19.963 19.963 0 0 0 6.002-2.981.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028ZM8.02 15.278c-1.182 0-2.157-1.069-2.157-2.38 0-1.312.956-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.956 2.38-2.157 2.38Zm7.975 0c-1.183 0-2.157-1.069-2.157-2.38 0-1.312.955-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.946 2.38-2.157 2.38Z"/></svg>
--- a/apps/website/public/icons/social/github.svg
+++ b/apps/website/public/icons/social/github.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z"/></svg>
--- a/apps/website/public/icons/social/instagram.svg
+++ b/apps/website/public/icons/social/instagram.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069ZM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0Zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324ZM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881Z"/></svg>
--- a/apps/website/public/icons/social/linkedin.svg
+++ b/apps/website/public/icons/social/linkedin.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286ZM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065Zm1.782 13.019H3.555V9h3.564v11.452ZM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003Z"/></svg>
--- a/apps/website/public/icons/social/reddit.svg
+++ b/apps/website/public/icons/social/reddit.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm5.8 11.33c.02.16.03.33.03.5 0 2.55-2.97 4.63-6.63 4.63-3.65 0-6.62-2.07-6.62-4.63 0-.17.01-.34.03-.5a1.58 1.58 0 0 1-.63-1.27c0-.88.72-1.59 1.6-1.59.44 0 .83.18 1.12.46 1.1-.79 2.62-1.3 4.31-1.37l.73-3.44a.32.32 0 0 1 .39-.24l2.43.52a1.13 1.13 0 0 1 2.15.36 1.13 1.13 0 0 1-1.13 1.12 1.13 1.13 0 0 1-1.08-.82l-2.16-.46-.65 3.07c1.65.09 3.14.59 4.22 1.36.29-.28.69-.46 1.13-.46.88 0 1.6.71 1.6 1.59 0 .52-.25.97-.63 1.27ZM9.5 13.5c0 .63.51 1.13 1.13 1.13s1.12-.5 1.12-1.13-.5-1.12-1.12-1.12-1.13.5-1.13 1.12Zm5.75 2.55c-.69.69-2 .73-3.25.73s-2.56-.04-3.25-.73a.32.32 0 1 1 .45-.45c.44.44 1.37.6 2.8.6 1.43 0 2.37-.16 2.8-.6a.32.32 0 1 1 .45.45Zm-.37-1.42c.62 0 1.13-.5 1.13-1.13 0-.62-.51-1.12-1.13-1.12-.63 0-1.13.5-1.13 1.12 0 .63.5 1.13 1.13 1.13Z"/></svg>
--- a/apps/website/public/icons/social/x.svg
+++ b/apps/website/public/icons/social/x.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
--- a/apps/website/src/components/SiteFooter.vue
+++ b/apps/website/src/components/SiteFooter.vue
@@ -1,143 +0,0 @@
-<script setup lang="ts">
-const columns = [
-  {
-    title: 'Product',
-    links: [
-      { label: 'Comfy Desktop', href: '/download' },
-      { label: 'Comfy Cloud', href: 'https://app.comfy.org' },
-      { label: 'ComfyHub', href: 'https://hub.comfy.org' },
-      { label: 'Pricing', href: '/pricing' }
-    ]
-  },
-  {
-    title: 'Resources',
-    links: [
-      { label: 'Documentation', href: 'https://docs.comfy.org' },
-      { label: 'Blog', href: 'https://blog.comfy.org' },
-      { label: 'Gallery', href: '/gallery' },
-      { label: 'GitHub', href: 'https://github.com/comfyanonymous/ComfyUI' }
-    ]
-  },
-  {
-    title: 'Company',
-    links: [
-      { label: 'About', href: '/about' },
-      { label: 'Careers', href: '/careers' },
-      { label: 'Enterprise', href: '/enterprise' }
-    ]
-  },
-  {
-    title: 'Legal',
-    links: [
-      { label: 'Terms of Service', href: '/terms-of-service' },
-      { label: 'Privacy Policy', href: '/privacy-policy' }
-    ]
-  }
-]
-
-const socials = [
-  {
-    label: 'GitHub',
-    href: 'https://github.com/comfyanonymous/ComfyUI',
-    icon: '/icons/social/github.svg'
-  },
-  {
-    label: 'Discord',
-    href: 'https://discord.gg/comfyorg',
-    icon: '/icons/social/discord.svg'
-  },
-  {
-    label: 'X',
-    href: 'https://x.com/comaboratory',
-    icon: '/icons/social/x.svg'
-  },
-  {
-    label: 'Reddit',
-    href: 'https://reddit.com/r/comfyui',
-    icon: '/icons/social/reddit.svg'
-  },
-  {
-    label: 'LinkedIn',
-    href: 'https://linkedin.com/company/comfyorg',
-    icon: '/icons/social/linkedin.svg'
-  },
-  {
-    label: 'Instagram',
-    href: 'https://instagram.com/comfyorg',
-    icon: '/icons/social/instagram.svg'
-  }
-]
-</script>
-
-<template>
-  <footer class="border-t border-white/10 bg-black">
-    <div
-      class="mx-auto grid max-w-7xl gap-8 px-6 py-16 sm:grid-cols-2 lg:grid-cols-5"
-    >
-      <!-- Brand -->
-      <div class="lg:col-span-1">
-        <a href="/" class="text-2xl font-bold text-brand-yellow italic">
-          Comfy
-        </a>
-        <p class="mt-4 text-sm text-smoke-700">
-          Professional control of visual AI.
-        </p>
-      </div>
-
-      <!-- Link columns -->
-      <nav
-        v-for="column in columns"
-        :key="column.title"
-        :aria-label="column.title"
-        class="flex flex-col gap-3"
-      >
-        <h3 class="text-sm font-semibold text-white">{{ column.title }}</h3>
-        <a
-          v-for="link in column.links"
-          :key="link.href"
-          :href="link.href"
-          class="text-sm text-smoke-700 transition-colors hover:text-white"
-        >
-          {{ link.label }}
-        </a>
-      </nav>
-    </div>
-
-    <!-- Bottom bar -->
-    <div class="border-t border-white/10">
-      <div
-        class="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 p-6 sm:flex-row"
-      >
-        <p class="text-sm text-smoke-700">
-          &copy; {{ new Date().getFullYear() }} Comfy Org. All rights reserved.
-        </p>
-
-        <!-- Social icons -->
-        <div class="flex items-center gap-4">
-          <a
-            v-for="social in socials"
-            :key="social.label"
-            :href="social.href"
-            :aria-label="social.label"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-smoke-700 transition-colors hover:text-white"
-          >
-            <span
-              class="inline-block size-5 bg-current"
-              :style="{
-                maskImage: `url(${social.icon})`,
-                maskSize: 'contain',
-                maskRepeat: 'no-repeat',
-                WebkitMaskImage: `url(${social.icon})`,
-                WebkitMaskSize: 'contain',
-                WebkitMaskRepeat: 'no-repeat'
-              }"
-              aria-hidden="true"
-            />
-          </a>
-        </div>
-      </div>
-    </div>
-  </footer>
-</template>
--- a/apps/website/src/components/SiteNav.vue
+++ b/apps/website/src/components/SiteNav.vue
@@ -1,149 +0,0 @@
-<script setup lang="ts">
-import { onMounted, onUnmounted, ref } from 'vue'
-
-const mobileMenuOpen = ref(false)
-const currentPath = ref('')
-
-const navLinks = [
-  { label: 'ENTERPRISE', href: '/enterprise' },
-  { label: 'GALLERY', href: '/gallery' },
-  { label: 'ABOUT', href: '/about' },
-  { label: 'CAREERS', href: '/careers' }
-]
-
-const ctaLinks = [
-  {
-    label: 'COMFY CLOUD',
-    href: 'https://app.comfy.org',
-    primary: true
-  },
-  {
-    label: 'COMFY HUB',
-    href: 'https://hub.comfy.org',
-    primary: false
-  }
-]
-
-function onKeydown(e: KeyboardEvent) {
-  if (e.key === 'Escape' && mobileMenuOpen.value) {
-    mobileMenuOpen.value = false
-  }
-}
-
-function onAfterSwap() {
-  mobileMenuOpen.value = false
-  currentPath.value = window.location.pathname
-}
-
-onMounted(() => {
-  document.addEventListener('keydown', onKeydown)
-  document.addEventListener('astro:after-swap', onAfterSwap)
-  currentPath.value = window.location.pathname
-})
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', onKeydown)
-  document.removeEventListener('astro:after-swap', onAfterSwap)
-})
-</script>
-
-<template>
-  <nav
-    class="fixed top-0 left-0 right-0 z-50 bg-black/80 backdrop-blur-md"
-    aria-label="Main navigation"
-  >
-    <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
-      <!-- Logo -->
-      <a href="/" class="text-2xl font-bold italic text-brand-yellow">
-        Comfy
-      </a>
-
-      <!-- Desktop nav links -->
-      <div class="hidden items-center gap-8 md:flex">
-        <a
-          v-for="link in navLinks"
-          :key="link.href"
-          :href="link.href"
-          :aria-current="currentPath === link.href ? 'page' : undefined"
-          class="text-sm font-medium tracking-wide text-white transition-colors hover:text-brand-yellow"
-        >
-          {{ link.label }}
-        </a>
-
-        <div class="flex items-center gap-3">
-          <a
-            v-for="cta in ctaLinks"
-            :key="cta.href"
-            :href="cta.href"
-            :class="
-              cta.primary
-                ? 'bg-brand-yellow text-black hover:opacity-90 transition-opacity'
-                : 'border border-brand-yellow text-brand-yellow hover:bg-brand-yellow hover:text-black transition-colors'
-            "
-            class="rounded-full px-5 py-2 text-sm font-semibold"
-          >
-            {{ cta.label }}
-          </a>
-        </div>
-      </div>
-
-      <!-- Mobile hamburger -->
-      <button
-        class="flex flex-col gap-1.5 md:hidden"
-        aria-label="Toggle menu"
-        aria-controls="site-mobile-menu"
-        :aria-expanded="mobileMenuOpen"
-        @click="mobileMenuOpen = !mobileMenuOpen"
-      >
-        <span
-          class="block h-0.5 w-6 bg-white transition-transform"
-          :class="mobileMenuOpen && 'translate-y-2 rotate-45'"
-        />
-        <span
-          class="block h-0.5 w-6 bg-white transition-opacity"
-          :class="mobileMenuOpen && 'opacity-0'"
-        />
-        <span
-          class="block h-0.5 w-6 bg-white transition-transform"
-          :class="mobileMenuOpen && '-translate-y-2 -rotate-45'"
-        />
-      </button>
-    </div>
-
-    <!-- Mobile menu -->
-    <div
-      v-show="mobileMenuOpen"
-      id="site-mobile-menu"
-      class="border-t border-white/10 bg-black px-6 pb-6 md:hidden"
-    >
-      <div class="flex flex-col gap-4 pt-4">
-        <a
-          v-for="link in navLinks"
-          :key="link.href"
-          :href="link.href"
-          :aria-current="currentPath === link.href ? 'page' : undefined"
-          class="text-sm font-medium tracking-wide text-white transition-colors hover:text-brand-yellow"
-          @click="mobileMenuOpen = false"
-        >
-          {{ link.label }}
-        </a>
-
-        <div class="flex flex-col gap-3 pt-2">
-          <a
-            v-for="cta in ctaLinks"
-            :key="cta.href"
-            :href="cta.href"
-            :class="
-              cta.primary
-                ? 'bg-brand-yellow text-black hover:opacity-90 transition-opacity'
-                : 'border border-brand-yellow text-brand-yellow hover:bg-brand-yellow hover:text-black transition-colors'
-            "
-            class="rounded-full px-5 py-2 text-center text-sm font-semibold"
-          >
-            {{ cta.label }}
-          </a>
-        </div>
-      </div>
-    </div>
-  </nav>
-</template>
--- a/apps/website/src/layouts/BaseLayout.astro
+++ b/apps/website/src/layouts/BaseLayout.astro
@@ -1,86 +0,0 @@
---
-import { ClientRouter } from 'astro:transitions'
-import Analytics from '@vercel/analytics/astro'
-import '../styles/global.css'
-
-interface Props {
-  title: string
-  description?: string
-  ogImage?: string
-}
-
-const {
-  title,
-  description = 'Comfy is the AI creation engine for visual professionals who demand control.',
-  ogImage = '/og-default.png',
-} = Astro.props
-
-const siteBase = Astro.site ?? 'https://comfy.org'
-const canonicalURL = new URL(Astro.url.pathname, siteBase)
-const ogImageURL = new URL(ogImage, siteBase)
-const locale = Astro.currentLocale ?? 'en'
-const gtmId = 'GTM-NP9JM6K7'
-const gtmEnabled = import.meta.env.PROD
---
-
-<!doctype html>
-<html lang={locale}>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content={description} />
-    <title>{title}</title>
-
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
-    <link rel="canonical" href={canonicalURL.href} />
-
-    <!-- Open Graph -->
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content={title} />
-    <meta property="og:description" content={description} />
-    <meta property="og:image" content={ogImageURL.href} />
-    <meta property="og:url" content={canonicalURL.href} />
-    <meta property="og:locale" content={locale} />
-    <meta property="og:site_name" content="Comfy" />
-
-    <!-- Twitter -->
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:title" content={title} />
-    <meta name="twitter:description" content={description} />
-    <meta name="twitter:image" content={ogImageURL.href} />
-
-    <!-- Google Tag Manager -->
-    {gtmEnabled && (
-      <script is:inline define:vars={{ gtmId }}>
-        ;(function (w, d, s, l, i) {
-          w[l] = w[l] || []
-          w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
-          var f = d.getElementsByTagName(s)[0],
-            j = d.createElement(s),
-            dl = l != 'dataLayer' ? '&l=' + l : ''
-          j.async = true
-          j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl
-          f.parentNode.insertBefore(j, f)
-        })(window, document, 'script', 'dataLayer', gtmId)
-      </script>
-    )}
-
-    <ClientRouter />
-  </head>
-  <body class="bg-black text-white font-inter antialiased">
-    {gtmEnabled && (
-      <noscript>
-        <iframe
-          src={`https://www.googletagmanager.com/ns.html?id=${gtmId}`}
-          height="0"
-          width="0"
-          style="display:none;visibility:hidden"
-        ></iframe>
-      </noscript>
-    )}
-
-    <slot />
-
-    <Analytics />
-  </body>
-</html>
--- a/apps/website/tsconfig.json
+++ b/apps/website/tsconfig.json
@@ -5,5 +5,5 @@
      "@/*": ["./src/*"]
    }
  },
-  "include": ["src/**/*", "astro.config.ts"]
+  "include": ["src/**/*", "astro.config.mjs"]
 }
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -356,14 +356,6 @@ export default defineConfig([
    }
  },

-  // The website app is a marketing site with no vue-i18n setup
-  {
-    files: ['apps/website/**/*.vue'],
-    rules: {
-      '@intlify/vue-i18n/no-raw-text': 'off'
-    }
-  },
-
  // i18n import enforcement
  // Vue components must use the useI18n() composable, not the global t/d/st/te
  {
--- a/packages/design-system/src/css/_palette.css
+++ b/packages/design-system/src/css/_palette.css
@@ -1,38 +0,0 @@
-@theme {
-  /* Font Families */
-  --font-inter: 'Inter', sans-serif;
-
-  /* Palette Colors */
-  --color-charcoal-100: #55565e;
-  --color-charcoal-200: #494a50;
-  --color-charcoal-300: #3c3d42;
-  --color-charcoal-400: #313235;
-  --color-charcoal-500: #2d2e32;
-  --color-charcoal-600: #262729;
-  --color-charcoal-700: #202121;
-  --color-charcoal-800: #171718;
-
-  --color-neutral-550: #636363;
-
-  --color-ash-300: #bbbbbb;
-  --color-ash-500: #828282;
-  --color-ash-800: #444444;
-
-  --color-smoke-100: #f3f3f3;
-  --color-smoke-200: #e9e9e9;
-  --color-smoke-300: #e1e1e1;
-  --color-smoke-400: #d9d9d9;
-  --color-smoke-500: #c5c5c5;
-  --color-smoke-600: #b4b4b4;
-  --color-smoke-700: #a0a0a0;
-  --color-smoke-800: #8a8a8a;
-
-  --color-white: #ffffff;
-  --color-black: #000000;
-
-  /* Brand Colors */
-  --color-electric-400: #f0ff41;
-  --color-sapphire-700: #172dd7;
-  --color-brand-yellow: var(--color-electric-400);
-  --color-brand-blue: var(--color-sapphire-700);
-}
--- a/packages/design-system/src/css/base.css
+++ b/packages/design-system/src/css/base.css
@@ -5,4 +5,42 @@
 */

@import './fonts.css';
-@import './_palette.css';
+
+@theme {
+  /* Font Families */
+  --font-inter: 'Inter', sans-serif;
+
+  /* Palette Colors */
+  --color-charcoal-100: #55565e;
+  --color-charcoal-200: #494a50;
+  --color-charcoal-300: #3c3d42;
+  --color-charcoal-400: #313235;
+  --color-charcoal-500: #2d2e32;
+  --color-charcoal-600: #262729;
+  --color-charcoal-700: #202121;
+  --color-charcoal-800: #171718;
+
+  --color-neutral-550: #636363;
+
+  --color-ash-300: #bbbbbb;
+  --color-ash-500: #828282;
+  --color-ash-800: #444444;
+
+  --color-smoke-100: #f3f3f3;
+  --color-smoke-200: #e9e9e9;
+  --color-smoke-300: #e1e1e1;
+  --color-smoke-400: #d9d9d9;
+  --color-smoke-500: #c5c5c5;
+  --color-smoke-600: #b4b4b4;
+  --color-smoke-700: #a0a0a0;
+  --color-smoke-800: #8a8a8a;
+
+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  /* Brand Colors */
+  --color-electric-400: #f0ff41;
+  --color-sapphire-700: #172dd7;
+  --color-brand-yellow: var(--color-electric-400);
+  --color-brand-blue: var(--color-sapphire-700);
+}
--- a/packages/design-system/src/css/style.css
+++ b/packages/design-system/src/css/style.css
@@ -1,7 +1,6 @@
@layer theme, base, primevue, components, utilities;

@import './fonts.css';
-@import './_palette.css';
@import 'tailwindcss/theme' layer(theme);
@import 'tailwindcss/utilities' layer(utilities);
@import 'tw-animate-css';
@@ -32,10 +31,38 @@
  --text-xxxs: 0.5625rem;
  --text-xxxs--line-height: calc(1 / 0.5625);

+  /* Font Families */
+  --font-inter: 'Inter', sans-serif;
+
+  /* Palette Colors */
+  --color-charcoal-100: #55565e;
+  --color-charcoal-200: #494a50;
+  --color-charcoal-300: #3c3d42;
+  --color-charcoal-400: #313235;
+  --color-charcoal-500: #2d2e32;
+  --color-charcoal-600: #262729;
+  --color-charcoal-700: #202121;
+  --color-charcoal-800: #171718;
+
+  --color-neutral-550: #636363;
+
+  --color-ash-300: #bbbbbb;
+  --color-ash-500: #828282;
+  --color-ash-800: #444444;
+
  --color-ivory-100: #fdfbfa;
  --color-ivory-200: #faf9f5;
  --color-ivory-300: #f0eee6;

+  --color-smoke-100: #f3f3f3;
+  --color-smoke-200: #e9e9e9;
+  --color-smoke-300: #e1e1e1;
+  --color-smoke-400: #d9d9d9;
+  --color-smoke-500: #c5c5c5;
+  --color-smoke-600: #b4b4b4;
+  --color-smoke-700: #a0a0a0;
+  --color-smoke-800: #8a8a8a;
+
  --color-sand-100: #e1ded5;
  --color-sand-200: #fff7d5;
  --color-sand-300: #888682;
@@ -45,6 +72,14 @@
  --color-slate-200: #9fa2bd;
  --color-slate-300: #5b5e7d;

+  --color-white: #ffffff;
+  --color-black: #000000;
+
+  --color-electric-400: #f0ff41;
+  --color-sapphire-700: #172dd7;
+  --color-brand-yellow: var(--color-electric-400);
+  --color-brand-blue: var(--color-sapphire-700);
+
  --color-azure-300: #78bae9;
  --color-azure-400: #31b9f4;
  --color-azure-600: #0b8ce9;
--- a/src/main.ts
+++ b/src/main.ts
@@ -67,7 +67,14 @@ Sentry.init({
  replaysOnErrorSampleRate: 0,
  // Only set these for non-cloud builds
  ...(isCloud
-    ? {}
+    ? {
+        integrations: [
+          // Disable event target wrapping to reduce overhead on high-frequency
+          // DOM events (pointermove, mousemove, wheel). Sentry still captures
+          // errors via window.onerror and unhandledrejection.
+          Sentry.browserApiErrorsIntegration({ eventTarget: false })
+        ]
+      }
    : {
        integrations: [],
        autoSessionTracking: false,
--- a/src/utils/test-utils.test.ts
+++ b/src/utils/test-utils.test.ts
@@ -0,0 +1,105 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { render, screen, stubs } from '@/utils/test-utils'
+
+import { defineComponent, h } from 'vue'
+
+const TestButton = defineComponent({
+  props: { label: { type: String, required: true } },
+  setup(props) {
+    return () => h('button', { 'data-testid': 'test-btn' }, props.label)
+  }
+})
+
+describe('test-utils', () => {
+  it('renders a component with default plugins', () => {
+    render(TestButton, { props: { label: 'Click me' } })
+    expect(screen.getByTestId('test-btn')).toHaveTextContent('Click me')
+  })
+
+  it('provides a userEvent instance by default', () => {
+    const { user } = render(TestButton, { props: { label: 'Click' } })
+    expect(user).toBeDefined()
+  })
+
+  it('allows opting out of userEvent', () => {
+    const { user } = render(TestButton, {
+      props: { label: 'Click' },
+      setupUser: false
+    })
+    expect(user).toBeUndefined()
+  })
+})
+
+describe('stubs', () => {
+  describe('Button', () => {
+    it('renders as a button element with label', () => {
+      const Wrapper = defineComponent({
+        components: { Button: stubs.Button },
+        setup() {
+          return () => h(stubs.Button, { label: 'Save' })
+        }
+      })
+      render(Wrapper)
+      expect(screen.getByRole('button')).toHaveTextContent('Save')
+    })
+
+    it('sets disabled when loading is true', () => {
+      const Wrapper = defineComponent({
+        setup() {
+          return () => h(stubs.Button, { label: 'Save', loading: true })
+        }
+      })
+      render(Wrapper)
+      expect(screen.getByRole('button')).toBeDisabled()
+    })
+
+    it('emits click event', async () => {
+      const onClick = vi.fn()
+      const Wrapper = defineComponent({
+        setup() {
+          return () => h(stubs.Button, { label: 'Go', onClick })
+        }
+      })
+      const { user } = render(Wrapper)
+      await user!.click(screen.getByRole('button'))
+      expect(onClick).toHaveBeenCalled()
+    })
+  })
+
+  describe('Skeleton', () => {
+    it('renders with data-testid', () => {
+      const Wrapper = defineComponent({
+        setup() {
+          return () => h(stubs.Skeleton)
+        }
+      })
+      render(Wrapper)
+      expect(screen.getByTestId('skeleton')).toBeDefined()
+    })
+  })
+
+  describe('Dialog', () => {
+    it('renders children when visible', () => {
+      const Wrapper = defineComponent({
+        setup() {
+          return () =>
+            h(stubs.Dialog, { visible: true }, () => h('p', 'Dialog body'))
+        }
+      })
+      render(Wrapper)
+      expect(screen.getByRole('dialog')).toHaveTextContent('Dialog body')
+    })
+
+    it('renders nothing when not visible', () => {
+      const Wrapper = defineComponent({
+        setup() {
+          return () =>
+            h(stubs.Dialog, { visible: false }, () => h('p', 'Hidden'))
+        }
+      })
+      render(Wrapper)
+      expect(screen.queryByRole('dialog')).toBeNull()
+    })
+  })
+})
--- a/src/utils/test-utils.ts
+++ b/src/utils/test-utils.ts
@@ -0,0 +1,170 @@
+import type { RenderResult } from '@testing-library/vue'
+import type { ComponentMountingOptions } from '@vue/test-utils'
+
+import { createTestingPinia } from '@pinia/testing'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
+import { defineComponent, h } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json'
+
+/**
+ * Creates the default set of Vue plugins for component tests.
+ *
+ * - Pinia with `stubActions: false` (actions execute, but are spied)
+ * - vue-i18n with English locale
+ *
+ * Pass additional plugins via the `plugins` option in `renderWithDefaults`.
+ */
+function createDefaultPlugins() {
+  return [
+    createTestingPinia({ stubActions: false }),
+    createI18n({
+      legacy: false,
+      locale: 'en',
+      messages: { en: enMessages }
+    })
+  ]
+}
+
+/**
+ * Common directive stubs for components that use PrimeVue/custom directives.
+ * Prevents "Failed to resolve directive" warnings in test output.
+ */
+const defaultDirectiveStubs: Record<string, () => void> = {
+  tooltip: () => {}
+}
+
+/**
+ * PrimeVue component stubs for unit/component tests.
+ *
+ * Use via `global.stubs` in render options:
+ * ```ts
+ * render(MyComponent, { global: { stubs: { Button: stubs.Button } } })
+ * ```
+ *
+ * Or use `renderWithDefaults` which auto-applies these as defaults.
+ */
+const ButtonStub = defineComponent({
+  name: 'Button',
+  props: ['disabled', 'loading', 'variant', 'size', 'label', 'icon', 'severity'],
+  emits: ['click'],
+  setup(props, { slots, emit }) {
+    return () =>
+      h(
+        'button',
+        {
+          disabled: props.disabled || props.loading,
+          'data-testid': props.label,
+          'data-icon': props.icon,
+          onClick: () => emit('click')
+        },
+        slots.default?.() ?? props.label
+      )
+  }
+})
+
+const SkeletonStub = defineComponent({
+  name: 'Skeleton',
+  setup() {
+    return () => h('div', { 'data-testid': 'skeleton' })
+  }
+})
+
+const TagStub = defineComponent({
+  name: 'Tag',
+  props: ['value', 'severity'],
+  setup(props, { slots }) {
+    return () => h('span', { 'data-testid': 'tag' }, slots.default?.() ?? props.value)
+  }
+})
+
+const BadgeStub = defineComponent({
+  name: 'Badge',
+  props: ['value', 'severity'],
+  setup(props) {
+    return () => h('span', { 'data-testid': 'badge' }, props.value)
+  }
+})
+
+const MessageStub = defineComponent({
+  name: 'Message',
+  props: ['severity', 'closable'],
+  setup(_, { slots }) {
+    return () => h('div', { 'data-testid': 'message', role: 'alert' }, slots.default?.())
+  }
+})
+
+const DialogStub = defineComponent({
+  name: 'Dialog',
+  props: ['visible', 'modal', 'header'],
+  emits: ['update:visible'],
+  setup(props, { slots }) {
+    return () =>
+      props.visible
+        ? h('div', { role: 'dialog', 'data-testid': 'dialog' }, [
+            props.header ? h('div', props.header) : null,
+            slots.default?.()
+          ])
+        : null
+  }
+})
+
+const stubs = {
+  Button: ButtonStub,
+  Skeleton: SkeletonStub,
+  Tag: TagStub,
+  Badge: BadgeStub,
+  Message: MessageStub,
+  Dialog: DialogStub
+} as const
+
+type RenderWithDefaultsResult = RenderResult & {
+  user: ReturnType<typeof userEvent.setup> | undefined
+}
+
+/**
+ * Renders a Vue component with standard test infrastructure pre-configured:
+ * - Pinia testing store (actions execute but are spied)
+ * - vue-i18n with English messages
+ * - Common directive stubs (tooltip)
+ * - Optional userEvent instance
+ *
+ * @example
+ * ```ts
+ * import { render, screen } from '@/utils/test-utils'
+ *
+ * it('renders button text', async () => {
+ *   const { user } = render(MyComponent, { props: { label: 'Click' } })
+ *   expect(screen.getByRole('button')).toHaveTextContent('Click')
+ *   await user!.click(screen.getByRole('button'))
+ * })
+ * ```
+ */
+function renderWithDefaults<C>(
+  component: C,
+  options?: ComponentMountingOptions<C> & { setupUser?: boolean }
+): RenderWithDefaultsResult {
+  const { setupUser = true, global: globalOptions, ...rest } = options ?? {}
+  const user = setupUser ? userEvent.setup() : undefined
+
+  const result = render(
+    component as Parameters<typeof render>[0],
+    {
+      global: {
+        ...globalOptions,
+        plugins: [...createDefaultPlugins(), ...(globalOptions?.plugins ?? [])],
+        directives: {
+          ...defaultDirectiveStubs,
+          ...globalOptions?.directives
+        }
+      },
+      ...rest
+    } as Parameters<typeof render>[1]
+  )
+
+  return { ...result, user }
+}
+
+export { renderWithDefaults as render, screen, stubs }
Author	SHA1	Message	Date
bymyself	35f79b7cd3	feat: add PrimeVue component stubs to test-utils (COMP-03)	2026-03-27 22:00:33 -07:00
GitHub Action	90a819bc87	[automated] Apply ESLint and Oxfmt fixes	2026-03-27 20:30:19 +00:00
bymyself	69239ca2d5	test: add standardized test-utils with Pinia + i18n defaults Recreates src/utils/test-utils.ts (removed in #10471) as the canonical shared render wrapper for VTL component tests. Provides: - renderWithDefaults(): auto-configures Pinia (stubActions: false), vue-i18n (English), and common directive stubs (tooltip) - Optional userEvent instance (opt out via setupUser: false) - Re-exports screen from @testing-library/vue Eliminates duplicated createTestingPinia + createI18n boilerplate across 97+ test files. Part of: COMP-02 (standardize Pinia store test mocking patterns)	2026-03-27 13:27:06 -07:00
Christian Byrne	e809d74192	perf: disable Sentry event target wrapping to reduce DOM event overhead (#10472 ) ## Summary Disable Sentry `browserApiErrorsIntegration` event target wrapping for cloud builds to eliminate 231.7ms of `sentryWrapped` overhead during canvas interaction. ## Changes - What: Configure `browserApiErrorsIntegration({ eventTarget: false })` in the cloud Sentry init path. This prevents Sentry from wrapping every `addEventListener` callback in try/catch, which was the #1 hot function during multi-cluster panning (100 profiling samples). Error capturing still works via `window.onerror` and `unhandledrejection`. ## Review Focus - Confirm that disabling event target wrapping is acceptable for cloud error monitoring — Sentry still captures unhandled errors, just not errors thrown inside individual event handler callbacks. - Non-cloud builds already had `integrations: []` / `defaultIntegrations: false`, so no change there. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10472-perf-disable-Sentry-event-target-wrapping-to-reduce-DOM-event-overhead-32d6d73d365081cdb455e47aee34dcc6) by [Unito](https://www.unito.io)	2026-03-26 22:06:47 -07:00
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.492c-1.53-.69-3.17-1.2-4.885-1.49a.075.075 0 0 0-.079.036c-.21.369-.444.85-.608 1.23a18.566 18.566 0 0 0-5.487 0 12.36 12.36 0 0 0-.617-1.23A.077.077 0 0 0 8.562 3c-1.714.29-3.354.8-4.885 1.491a.07.07 0 0 0-.032.027C.533 9.093-.32 13.555.099 17.961a.08.08 0 0 0 .031.055 20.03 20.03 0 0 0 5.993 2.98.078.078 0 0 0 .084-.026c.462-.62.874-1.275 1.226-1.963.021-.04.001-.088-.041-.104a13.201 13.201 0 0 1-1.872-.878.075.075 0 0 1-.008-.125c.126-.093.252-.19.372-.287a.075.075 0 0 1 .078-.01c3.927 1.764 8.18 1.764 12.061 0a.075.075 0 0 1 .079.009c.12.098.245.195.372.288a.075.075 0 0 1-.006.125c-.598.344-1.22.635-1.873.877a.075.075 0 0 0-.041.105c.36.687.772 1.341 1.225 1.962a.077.077 0 0 0 .084.028 19.963 19.963 0 0 0 6.002-2.981.076.076 0 0 0 .032-.054c.5-5.094-.838-9.52-3.549-13.442a.06.06 0 0 0-.031-.028ZM8.02 15.278c-1.182 0-2.157-1.069-2.157-2.38 0-1.312.956-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.956 2.38-2.157 2.38Zm7.975 0c-1.183 0-2.157-1.069-2.157-2.38 0-1.312.955-2.38 2.157-2.38 1.21 0 2.176 1.077 2.157 2.38 0 1.312-.946 2.38-2.157 2.38Z"/></svg>
				`@@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>`