@pascal-app/editor 1.1.1 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pascal-app/editor",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Pascal building editor component",
   "license": "MIT",
   "type": "module",
@@ -17,8 +17,8 @@
     "test": "bun test src"
   },
   "peerDependencies": {
-    "@pascal-app/core": "^1.1.1",
-    "@pascal-app/viewer": "^1.1.1",
+    "@pascal-app/core": "^1.1.3",
+    "@pascal-app/viewer": "^1.1.3",
     "@react-three/drei": "^10",
     "@react-three/fiber": "^9",
     "next": ">=15",
@@ -33,8 +33,8 @@
     "@iconify/react": "^6.0.4",
     "@lingui/core": "6.12.0",
     "@number-flow/react": "^0.6.2",
-    "@pascal-app/geometry-script": "^1.1.1",
-    "@pascal-app/ifc-converter": "^1.1.1",
+    "@pascal-app/geometry-script": "^1.1.3",
+    "@pascal-app/ifc-converter": "^1.1.3",
     "@pascal-app/lingo": "^0.5.0",
     "@radix-ui/react-alert-dialog": "^1.2.1",
     "@radix-ui/react-context-menu": "^2.4.1",
@@ -64,8 +64,8 @@
     "zustand": "^5.0.16"
   },
   "devDependencies": {
-    "@pascal-app/core": "^1.1.1",
-    "@pascal-app/viewer": "^1.1.1",
+    "@pascal-app/core": "^1.1.3",
+    "@pascal-app/viewer": "^1.1.3",
     "@pascal/typescript-config": "*",
     "@react-three/test-renderer": "^9.1.1",
     "@types/blob-stream": "^0.1.33",

package/src/components/ui/node-icon-image.test.tsx

@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'bun:test'
+import { imageConfigDefault } from 'next/dist/shared/lib/image-config'
+import { ImageConfigContext } from 'next/dist/shared/lib/image-config-context.shared-runtime'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { canOptimizeImageSrc, NodeIconImage } from './node-icon-image'
+
+const config = {
+  ...imageConfigDefault,
+  remotePatterns: [{ protocol: 'https' as const, hostname: 'assets.example.com' }],
+}
+
+const render = (src: string) =>
+  renderToStaticMarkup(
+    <ImageConfigContext.Provider value={config}>
+      <NodeIconImage alt="" height={16} src={src} width={16} />
+    </ImageConfigContext.Provider>,
+  )
+
+describe('canOptimizeImageSrc', () => {
+  test('optimizes site-relative paths and configured hosts', () => {
+    expect(canOptimizeImageSrc('/icons/item.png', config)).toBe(true)
+    expect(canOptimizeImageSrc('https://assets.example.com/thumb.webp', config)).toBe(true)
+  })
+
+  test('does not optimize hosts missing from remotePatterns', () => {
+    expect(canOptimizeImageSrc('https://prod.supabase.co/storage/thumb.webp', config)).toBe(false)
+    expect(canOptimizeImageSrc('//prod.supabase.co/thumb.webp', config)).toBe(false)
+  })
+
+  test('keeps optimizing when the config carries no host lists, as in production builds', () => {
+    expect(canOptimizeImageSrc('https://prod.supabase.co/storage/thumb.webp', {})).toBe(true)
+  })
+})
+
+describe('NodeIconImage', () => {
+  test('renders an unconfigured host straight from its URL', () => {
+    const src = 'https://prod.supabase.co/storage/v1/object/public/items/thumb.webp'
+    const html = render(src)
+    expect(html).toContain(`src="${src}"`)
+    expect(html).not.toContain('/_next/image')
+  })
+
+  test('still optimizes a configured host', () => {
+    expect(render('https://assets.example.com/thumb.webp')).toContain('/_next/image?url=')
+  })
+})

package/src/components/ui/node-icon-image.tsx

@@ -1,7 +1,35 @@
 'use client'
 
 import { ARTIFACT_URL_PREFIX, resolveArtifactUrl } from '@pascal-app/core'
+import { type ImageConfigComplete, imageConfigDefault } from 'next/dist/shared/lib/image-config'
+import { ImageConfigContext } from 'next/dist/shared/lib/image-config-context.shared-runtime'
+import { hasRemoteMatch } from 'next/dist/shared/lib/match-remote-pattern'
 import Image, { type ImageProps } from 'next/image'
+import { useContext } from 'react'
+
+type ImageHostConfig = Partial<Pick<ImageConfigComplete, 'domains' | 'remotePatterns'>>
+
+// Inlined by Next's bundler define, as next/image itself reads it.
+const configEnv = process.env.__NEXT_IMAGE_OPTS as unknown as ImageHostConfig | undefined
+
+/**
+ * Whether next/image can optimize `src`. An absolute URL on a host missing
+ * from `images.remotePatterns` makes next/image throw during render (e.g. a
+ * catalog thumbnail on production storage while running against local
+ * Supabase), so those render unoptimized, straight from their host.
+ */
+export function canOptimizeImageSrc(src: string, config: ImageHostConfig): boolean {
+  if (src.startsWith('/') && !src.startsWith('//')) return true
+  // Production builds inline no host lists, and next/image validates none then.
+  if (!config.domains && !config.remotePatterns) return true
+  let url: URL
+  try {
+    url = new URL(src)
+  } catch {
+    return false
+  }
+  return hasRemoteMatch(config.domains ?? [], config.remotePatterns ?? [], url)
+}
 
 /**
  * A node's icon or thumbnail. A scripted object's thumbnail is an
@@ -10,7 +38,11 @@ import Image, { type ImageProps } from 'next/image'
  * private project's artifact with.
  */
 export function NodeIconImage({ src, ...props }: Omit<ImageProps, 'src'> & { src: string }) {
-  if (!src.startsWith(ARTIFACT_URL_PREFIX)) return <Image src={src} {...props} />
+  const configContext = useContext(ImageConfigContext)
+  const config = configEnv || configContext || imageConfigDefault
+  if (!src.startsWith(ARTIFACT_URL_PREFIX)) {
+    return <Image src={src} unoptimized={!canOptimizeImageSrc(src, config)} {...props} />
+  }
   const url = resolveArtifactUrl(src)
   return url ? <Image src={url} unoptimized {...props} /> : null
 }