fix: exclude repository artwork from designer notifications

Author: Bill Leoutsakos

design-diff.config.json

@@ -8,6 +8,26 @@
     "(?:^|/)sandbox/bundles/"
   ],
   "mediaModules": ["lucide-react", "react-icons", "next/image", "next/legacy/image"],
+  "mediaSources": [
+    "^(?:apps/sim/lib/og/|apps/sim/app/\\(landing\\)/og-utils\\.tsx$|apps/docs/app/api/og/)",
+    "(?:^|/)(?:opengraph|twitter)-image\\.[jt]sx?$",
+    "^apps/sim/app/\\(landing\\)/components/hero/components/(?:hero-platform-(?:loop|stage|intro)|hero-visual|hero-chat-loop)/",
+    "^apps/sim/app/\\(landing\\)/components/features/components/captured-platform-surface\\.tsx$",
+    "^apps/sim/app/\\(landing\\)/components/footer/components/footer-wordmark-loop/"
+  ],
+  "mediaSymbols": [
+    {
+      "file": "/components/resource-empty-state/",
+      "names": [
+        "LogsGraphic",
+        "TablesGraphic",
+        "FilesGraphic",
+        "DocumentsGraphic",
+        "KnowledgeIsoMark",
+        "BoreInterior"
+      ]
+    }
+  ],
   "renderedMarkdown": ["apps/docs/content/", "apps/sim/content/"],
   "aliases": [
     {

scripts/design-diff/README.md

@@ -52,8 +52,10 @@ Changing an existing control's supported `variant`, `size`, classes or style val
 Known style values in conditional branches and React state updates are compared; changing
 only the runtime predicate, handler or label does not qualify.
 
-Media exclusion applies to recognized JSX/HTML/MDX media elements and asset files, not an
-arbitrary wrapper around an image. A wrapper's custom padding or layout still qualifies.
+Media exclusion applies to recognized JSX/HTML/MDX media elements and asset files. Repository
+conventions also identify social-card image generators, landing artwork and the named illustration
+functions inside empty-state components. Their surrounding product controls remain in scope.
+The policy does not treat an arbitrary wrapper around an image as media. A wrapper's custom padding or layout still qualifies.
 CSS asset URL substitutions and generated copy are exempt. Source-only analysis cannot
 reliably identify every project-specific media wrapper.
 
@@ -101,7 +103,7 @@ an Icon does not break resolution of Button through the same barrel.
 
 ## Report contract
 
-Schema **3.0.0**, engine **0.5.1**, policy **5.0.0**. The schema remains compatible; the policy
+Schema **3.0.0**, engine **0.5.2**, policy **5.0.0**. The schema remains compatible; the policy
 meaning changes. Readers must inspect versions when comparing historical qualification rates.
 All decisions and identifiers are deterministic for the same engine/configuration and commits.
 Execution timing and peak memory are recorded separately by the benchmark, never in engine JSON.

scripts/design-diff/analyze.ts

@@ -24,7 +24,7 @@ import type { Change, Config, Definition, Report } from '#design-diff/types'
 export function emptyReport(): Report {
   return {
     schemaVersion: '3.0.0',
-    engineVersion: '0.5.1',
+    engineVersion: '0.5.2',
     policyVersion: '5.0.0',
     commits: null,
     status: 'failed',
@@ -138,6 +138,7 @@ export async function analyze(
       tailwind: TailwindNormalizer,
       file: string
     ): Promise<Definition[]> => {
+      if (config.mediaSources?.some((pattern) => new RegExp(pattern).test(file))) return []
       const resolver = new Resolver(tree, affected)
       const entry = tree.entries.get(file)
       if (!entry) return []

scripts/design-diff/benchmark.ts

@@ -205,7 +205,7 @@ export async function benchmark(args = process.argv.slice(2)): Promise<void> {
       result.reportSha256 = hash(bytes)
       if (
         report.schemaVersion !== '3.0.0' ||
-        report.engineVersion !== '0.5.1' ||
+        report.engineVersion !== '0.5.2' ||
         report.policyVersion !== '5.0.0'
       )
         throw new Error('Report version mismatch')

scripts/design-diff/extract/documents.ts

@@ -184,7 +184,7 @@ export function extractDocument(
               typeof item !== 'object' ||
               Array.isArray(item) ||
               typeof item.name !== 'string' ||
-              (content && content.contentProps.includes(item.name)) ||
+              content?.contentProps.includes(item.name) ||
               !appearanceAttributes.test(item.name)
             )
               continue

scripts/design-diff/extract/tsx.ts

@@ -35,6 +35,12 @@ export function extractTsx(resolver: Resolver, file: string, appearanceOnly = fa
     return false
   }
   const media = (path: NodePath): boolean => {
+    if (
+      resolver.tree.config.mediaSymbols?.some(
+        (entry) => new RegExp(entry.file).test(file) && entry.names.includes(symbolName(path))
+      )
+    )
+      return true
     for (let node: NodePath | null = path; node; node = node.parentPath) {
       if (!node.isJSXElement()) continue
       const name = propertyName(node.node.openingElement.name)
@@ -309,6 +315,7 @@ export function extractTsx(resolver: Resolver, file: string, appearanceOnly = fa
       emit(path, 'content', 'expression', resolver.evaluate(child(path, 'expression'), file))
     },
     CallExpression(path) {
+      if (appearanceOnly && media(path)) return
       const name = propertyName(path.node.callee)
       if (resolver.tree.config.variantFunctions.includes(name))
         emit(path, 'class', 'variants', resolver.evaluate(path, file))

scripts/design-diff/tests/appearance-policy.test.ts

@@ -170,4 +170,31 @@ describe('designer notification policy', () => {
         .flagged
     ).toBe(false)
   })
+
+  it.each([
+    'apps/sim/lib/og/cover-image.tsx',
+    'apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage.tsx',
+  ])('exempts configured code-rendered artwork: %s', async (art) => {
+    expect(
+      (
+        await compareFiles(
+          { [art]: 'export const Art=()=> <div className="p-2"/>' },
+          { [art]: 'export const Art=()=> <div className="p-4"/>' }
+        )
+      ).flagged
+    ).toBe(false)
+  })
+
+  it('exempts an empty-state illustration while retaining surrounding UI styling', async () => {
+    const art =
+      'apps/sim/app/workspace/id/components/resource/components/resource-empty-state/logs-empty-state.tsx'
+    const source = (graphic: string, padding: string) =>
+      `function LogsGraphic(){return <div className="${graphic}"/>};export function LogsEmptyState(){return <main className="${padding}"><LogsGraphic/></main>}`
+    expect(
+      (await compareFiles({ [art]: source('p-2', 'p-2') }, { [art]: source('p-4', 'p-2') })).flagged
+    ).toBe(false)
+    expect(
+      (await compareFiles({ [art]: source('p-2', 'p-2') }, { [art]: source('p-2', 'p-4') })).flagged
+    ).toBe(true)
+  })
 })

scripts/design-diff/tests/report.test.ts

@@ -41,7 +41,7 @@ it('detects changes after a preview and produces byte-identical bounded reports'
 it('keeps failures distinguishable after serialization', () => {
   expect(JSON.parse(serializeReport(emptyReport()))).toMatchObject({
     schemaVersion: '3.0.0',
-    engineVersion: '0.5.1',
+    engineVersion: '0.5.2',
     policyVersion: '5.0.0',
     status: 'failed',
     flagged: null,

scripts/design-diff/types.ts

@@ -82,6 +82,8 @@ export interface UsageCount {
 export interface Config {
   sourceRoots: string[]
   mediaModules?: string[]
+  mediaSources?: string[]
+  mediaSymbols?: { file: string; names: string[] }[]
   exclude: string[]
   renderedMarkdown: string[]
   aliases: { from: string; prefix: string; target: string }[]
@@ -124,7 +126,7 @@ export interface Config {
 }
 export interface Report {
   schemaVersion: '3.0.0'
-  engineVersion: '0.5.1'
+  engineVersion: '0.5.2'
   policyVersion: '5.0.0'
   commits: { base: string; head: string; mergeBase: string } | null
   status: 'completed' | 'failed'