feat: Новый кросс платформенный вьювер

integration/README.md

@@ -53,6 +53,8 @@ npm run dev --workspace @svg-sprites-fixtures/react-vite --prefix integration
 Перед E2E production builds должны существовать. Тест запускает каждый server
 последовательно, проверяет внешний `href`, HTTP status и Content-Type спрайта,
 наличие symbol ID, отсутствие browser errors и зелёные пиксели отрисованной иконки.
+Для каждого active mode тест также открывает единый Viewer, проверяет его Shadow DOM,
+совпадение sprite URL, карточку `check`, dialog и mode-specific вкладки кода.
 
 Static fixture копирует managed SVG и JSON manifest в `dist/app-icons/` и использует
 literal `<use href="/app-icons/sprite.svg#check">`.

integration/apps/next-app-turbopack/app/page.tsx

@@ -1,4 +1,5 @@
 import { IconsIcon } from '../src/sprite'
+import { AppSpriteViewer } from './sprite-viewer'
 
 export default function Page() {
   return (
@@ -13,6 +14,7 @@ export default function Page() {
         height={64}
         style={{ '--icon-color-1': '#16a34a' }}
       />
+      <AppSpriteViewer />
     </main>
   )
 }

integration/apps/next-app-turbopack/app/sprite-viewer.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { SpriteViewer } from '@gromlab/svg-sprites/react'
+
+const viewerSources = [
+  () => import('../src/sprite/.svg-sprite/svg-sprite.manifest.js'),
+] as const
+
+export function AppSpriteViewer() {
+  return <SpriteViewer sources={viewerSources} title="Next App Turbopack Viewer" style={{ marginTop: 32 }} />
+}

integration/apps/next-app-turbopack/next.config.mjs

@@ -1,10 +1,10 @@
 import path from 'node:path'
 
-const integrationRoot = path.resolve(import.meta.dirname, '../..')
+const repositoryRoot = path.resolve(import.meta.dirname, '../../..')
 
 export default {
-  outputFileTracingRoot: integrationRoot,
+  outputFileTracingRoot: repositoryRoot,
   turbopack: {
-    root: integrationRoot,
+    root: repositoryRoot,
   },
 }

integration/apps/next-app-webpack/app/page.tsx

@@ -1,4 +1,5 @@
 import { IconsIcon } from '../src/sprite'
+import { AppSpriteViewer } from './sprite-viewer'
 
 export default function Page() {
   return (
@@ -13,6 +14,7 @@ export default function Page() {
         height={64}
         style={{ '--icon-color-1': '#16a34a' }}
       />
+      <AppSpriteViewer />
     </main>
   )
 }

integration/apps/next-app-webpack/app/sprite-viewer.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { SpriteViewer } from '@gromlab/svg-sprites/react'
+
+const viewerSources = [
+  () => import('../src/sprite/.svg-sprite/svg-sprite.manifest.js'),
+] as const
+
+export function AppSpriteViewer() {
+  return <SpriteViewer sources={viewerSources} title="Next App Webpack Viewer" style={{ marginTop: 32 }} />
+}

integration/apps/next-app-webpack/next.config.mjs

@@ -1,10 +1,10 @@
 import path from 'node:path'
 
-const integrationRoot = path.resolve(import.meta.dirname, '../..')
+const repositoryRoot = path.resolve(import.meta.dirname, '../../..')
 
 export default {
-  outputFileTracingRoot: integrationRoot,
+  outputFileTracingRoot: repositoryRoot,
   turbopack: {
-    root: integrationRoot,
+    root: repositoryRoot,
   },
 }

integration/apps/next-pages-turbopack/next.config.mjs

@@ -1,10 +1,10 @@
 import path from 'node:path'
 
-const integrationRoot = path.resolve(import.meta.dirname, '../..')
+const repositoryRoot = path.resolve(import.meta.dirname, '../../..')
 
 export default {
-  outputFileTracingRoot: integrationRoot,
+  outputFileTracingRoot: repositoryRoot,
   turbopack: {
-    root: integrationRoot,
+    root: repositoryRoot,
   },
 }

integration/apps/next-pages-turbopack/pages/index.tsx

@@ -1,5 +1,10 @@
+import { SpriteViewer } from '@gromlab/svg-sprites/react'
 import { IconsIcon } from '../src/sprite'
 
+const viewerSources = [
+  () => import('../src/sprite/.svg-sprite/svg-sprite.manifest.js'),
+] as const
+
 export default function Page() {
   return (
     <main>
@@ -13,6 +18,7 @@ export default function Page() {
         height={64}
         style={{ '--icon-color-1': '#16a34a' }}
       />
+      <SpriteViewer sources={viewerSources} title="Next Pages Turbopack Viewer" style={{ marginTop: 32 }} />
     </main>
   )
 }

integration/apps/next-pages-webpack/next.config.mjs

@@ -1,10 +1,16 @@
 import path from 'node:path'
 
+const repositoryRoot = path.resolve(import.meta.dirname, '../../..')
 const integrationRoot = path.resolve(import.meta.dirname, '../..')
 
 export default {
-  outputFileTracingRoot: integrationRoot,
+  outputFileTracingRoot: repositoryRoot,
   turbopack: {
-    root: integrationRoot,
+    root: repositoryRoot,
+  },
+  webpack(config) {
+    config.resolve.alias.react = path.resolve(integrationRoot, 'node_modules/react')
+    config.resolve.alias['react-dom'] = path.resolve(integrationRoot, 'node_modules/react-dom')
+    return config
   },
 }

integration/apps/next-pages-webpack/pages/index.tsx

@@ -1,5 +1,10 @@
+import { SpriteViewer } from '@gromlab/svg-sprites/react'
 import { IconsIcon } from '../src/sprite'
 
+const viewerSources = [
+  () => import('../src/sprite/.svg-sprite/svg-sprite.manifest.js'),
+] as const
+
 export default function Page() {
   return (
     <main>
@@ -13,6 +18,7 @@ export default function Page() {
         height={64}
         style={{ '--icon-color-1': '#16a34a' }}
       />
+      <SpriteViewer sources={viewerSources} title="Next Pages Webpack Viewer" style={{ marginTop: 32 }} />
     </main>
   )
 }

integration/apps/react-vite/src/main.tsx

@@ -1,9 +1,14 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { SpriteViewer } from '@gromlab/svg-sprites/react'
 
 import { IconsIcon } from './sprite'
 import './style.css'
 
+const viewerSources = [
+  () => import('./sprite/.svg-sprite/svg-sprite.manifest.js'),
+] as const
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <main>
@@ -17,6 +22,7 @@ createRoot(document.getElementById('root')!).render(
         height={64}
         style={{ '--icon-color-1': '#16a34a' }}
       />
+      <SpriteViewer sources={viewerSources} title="React Vite Viewer" style={{ marginTop: 32 }} />
     </main>
   </StrictMode>,
 )

integration/apps/react-vite/vite.config.ts

@@ -3,4 +3,7 @@ import { defineConfig } from 'vite'
 
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+  },
 })

integration/apps/react-webpack/src/main.tsx

@@ -1,9 +1,14 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import { SpriteViewer } from '@gromlab/svg-sprites/react'
 
 import { IconsIcon } from './sprite'
 import './style.css'
 
+const viewerSources = [
+  () => import('./sprite/.svg-sprite/svg-sprite.manifest.js'),
+] as const
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <main>
@@ -17,6 +22,7 @@ createRoot(document.getElementById('root')!).render(
         height={64}
         style={{ '--icon-color-1': '#16a34a' }}
       />
+      <SpriteViewer sources={viewerSources} title="React Webpack Viewer" style={{ marginTop: 32 }} />
     </main>
   </StrictMode>,
 )

integration/apps/react-webpack/webpack.config.js

@@ -15,6 +15,10 @@ export default {
   },
   resolve: {
     extensions: ['.tsx', '.ts', '.js'],
+    alias: {
+      react: path.resolve(root, '../../node_modules/react'),
+      'react-dom': path.resolve(root, '../../node_modules/react-dom'),
+    },
   },
   module: {
     rules: [

integration/apps/standalone-vite/src/main.ts

@@ -1,3 +1,5 @@
+import '@gromlab/svg-sprites/viewer/element'
+import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
 import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
 import { getIconsIconHref, iconsSpriteUrl } from './sprite'
 import './style.css'
@@ -17,4 +19,9 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
   >
     <use href="${getIconsIconHref('check')}"></use>
   </svg>
+  <gromlab-sprite-viewer></gromlab-sprite-viewer>
 `
+
+const viewer = document.querySelector<SpriteViewerElement>('gromlab-sprite-viewer')!
+viewer.viewerTitle = 'Standalone Vite Viewer'
+viewer.sources = [spriteManifest]

integration/apps/standalone-webpack/src/main.ts

@@ -1,3 +1,5 @@
+import '@gromlab/svg-sprites/viewer/element'
+import type { SpriteViewerElement } from '@gromlab/svg-sprites/viewer'
 import spriteManifest from './sprite/.svg-sprite/svg-sprite.manifest.js'
 import { getIconsIconHref, iconsSpriteUrl } from './sprite'
 
@@ -17,4 +19,9 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
   >
     <use href="${getIconsIconHref('check')}"></use>
   </svg>
+  <gromlab-sprite-viewer></gromlab-sprite-viewer>
 `
+
+const viewer = document.querySelector<SpriteViewerElement>('gromlab-sprite-viewer')!
+viewer.viewerTitle = 'Standalone Webpack Viewer'
+viewer.sources = [spriteManifest]

integration/apps/standalone/build.mjs

@@ -3,6 +3,10 @@ import fs from 'node:fs'
 fs.rmSync(new URL('./dist/', import.meta.url), { recursive: true, force: true })
 fs.mkdirSync(new URL('./dist/app-icons/', import.meta.url), { recursive: true })
 fs.copyFileSync(new URL('./index.html', import.meta.url), new URL('./dist/index.html', import.meta.url))
+fs.copyFileSync(
+  new URL('../../../dist/viewer-element.js', import.meta.url),
+  new URL('./dist/viewer-element.js', import.meta.url),
+)
 fs.copyFileSync(
   new URL('./src/sprite/.svg-sprite/sprite.svg', import.meta.url),
   new URL('./dist/app-icons/sprite.svg', import.meta.url),

integration/apps/standalone/index.html

@@ -7,6 +7,7 @@
     <style>
       body { margin: 0; padding: 40px; font-family: system-ui, sans-serif; }
       [data-testid="icon"] { width: 64px; height: 64px; color: #16a34a; --icon-color-1: #16a34a; }
+      gromlab-sprite-viewer { margin-top: 32px; }
     </style>
   </head>
   <body>
@@ -15,6 +16,12 @@
       <svg data-testid="icon" data-app="standalone" viewBox="0 0 24 24" aria-label="Check icon">
         <use href="/app-icons/sprite.svg#check"></use>
       </svg>
+      <gromlab-sprite-viewer
+        viewer-title="Standalone Viewer"
+        manifest-url="/app-icons/manifest.json"
+        sprite-url="/app-icons/sprite.svg"
+      ></gromlab-sprite-viewer>
     </main>
+    <script type="module" src="/viewer-element.js"></script>
   </body>
 </html>

integration/package-lock.json

@@ -34,11 +34,12 @@
         "@types/react-dom": "^19.2.3",
         "@types/svg-sprite": "^0.0.39",
         "jsdom": "^26.1.0",
+        "lit": "^3.3.3",
         "react": "^19.2.5",
-        "react-colorful": "^5.6.1",
         "react-dom": "^19.2.5",
         "tsup": "^8.4.0",
-        "typescript": "^5.8.3"
+        "typescript": "^5.8.3",
+        "vanilla-colorful": "^0.7.2"
       },
       "engines": {
         "node": ">=18"

integration/tests/apps.spec.ts

@@ -104,6 +104,8 @@ for (const app of apps) {
     try {
       await waitForServer(server, origin)
       await page.goto(origin)
+      await page.waitForLoadState('networkidle')
+      expect(browserErrors).toEqual([])
 
       const icon = page.getByTestId('icon')
       await expect(icon).toBeVisible()
@@ -122,6 +124,47 @@ for (const app of apps) {
       expect(spriteResponse.headers.get('content-type') ?? '').toMatch(/image\/svg\+xml/)
       expect(await spriteResponse.text()).toMatch(/id="check"/)
 
+      const viewer = page.locator('gromlab-sprite-viewer')
+      await expect(viewer).toBeVisible()
+      await expect(viewer.locator('[data-sprite-viewer]')).toBeVisible()
+
+      const viewerCard = viewer.locator('[data-icon-name="check"]')
+      await expect(viewerCard).toBeVisible()
+      const viewerHref = await viewerCard.locator('use').getAttribute('href')
+      expect(viewerHref).toBeTruthy()
+      expect(viewerHref!.split('#')[1]).toBe('check')
+      expect(new URL(viewerHref!.split('#')[0], page.url()).href).toBe(spriteUrl.href)
+
+      await viewerCard.click()
+      const dialog = viewer.getByRole('dialog', { name: 'check' })
+      await expect(dialog).toBeVisible()
+      await expect(dialog.getByRole('tab', { name: 'SVG' })).toBeVisible()
+      if (app.id.startsWith('standalone')) {
+        await expect(dialog.getByRole('tab', { name: 'React' })).toHaveCount(0)
+      } else {
+        await expect(dialog.getByRole('tab', { name: 'React' })).toBeVisible()
+      }
+
+      const colorSwatch = dialog.getByRole('button', { name: /Изменить цвет --icon-color-1/ })
+      await colorSwatch.click()
+      const colorPicker = dialog.locator('gromlab-hex-color-picker')
+      await expect(colorPicker).toBeVisible()
+      const saturationBounds = await colorPicker.locator('[part="saturation"]').boundingBox()
+      const hueBounds = await colorPicker.locator('[part="hue"]').boundingBox()
+      expect(saturationBounds?.height).toBeGreaterThan(100)
+      expect(hueBounds?.height).toBeGreaterThanOrEqual(20)
+      const popoverBounds = await dialog.locator('.gromlab-sprite-viewer__color-popover').boundingBox()
+      const colorInputBounds = await dialog.locator('gromlab-hex-input input').boundingBox()
+      expect(colorInputBounds!.x).toBeGreaterThanOrEqual(popoverBounds!.x)
+      expect(colorInputBounds!.x + colorInputBounds!.width).toBeLessThanOrEqual(
+        popoverBounds!.x + popoverBounds!.width,
+      )
+      await dialog.locator('.gromlab-sprite-viewer__color-label').click()
+      await expect(colorPicker).toHaveCount(0)
+
+      await dialog.getByRole('button', { name: 'Закрыть' }).click()
+      await expect(dialog).toHaveCount(0)
+
       const screenshot = PNG.sync.read(await icon.screenshot())
       let coloredPixels = 0
       for (let index = 0; index < screenshot.data.length; index += 4) {