@chronogrove/ui 0.82.1 → 0.83.0

package/src/image-thumbnails.spec.js

@@ -0,0 +1,95 @@
+import { render } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+import React from 'react'
+
+import ImageThumbnails from './image-thumbnails.js'
+
+const stubTheme = { colors: { background: '#fff' } }
+
+const wrap = ui => render(<ThemeUIProvider theme={stubTheme}>{ui}</ThemeUIProvider>)
+
+describe('ImageThumbnails', () => {
+  const sampleImages = [
+    'https://example.com/image1.jpg',
+    'https://example.com/image2.jpg',
+    'https://example.com/image3.jpg',
+    'https://example.com/image4.jpg',
+    'https://example.com/image5.jpg'
+  ]
+
+  it('renders thumbnails when images are provided', () => {
+    const { container } = wrap(<ImageThumbnails images={sampleImages} />)
+
+    const wrapper = container.firstChild
+    expect(wrapper).toBeTruthy()
+    expect(wrapper.children).toHaveLength(4)
+  })
+
+  it('renders correct number of thumbnails based on maxImages prop', () => {
+    const { container } = wrap(<ImageThumbnails images={sampleImages} maxImages={3} />)
+
+    const wrapper = container.firstChild
+    expect(wrapper).toBeTruthy()
+    expect(wrapper.children).toHaveLength(3)
+  })
+
+  it('returns null when images array is empty', () => {
+    const { container } = wrap(<ImageThumbnails images={[]} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('returns null when images is null', () => {
+    const { container } = wrap(<ImageThumbnails images={null} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('returns null when images is undefined', () => {
+    const { container } = wrap(<ImageThumbnails />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders fewer thumbnails when fewer images are provided than maxImages', () => {
+    const twoImages = ['https://example.com/image1.jpg', 'https://example.com/image2.jpg']
+    const { container } = wrap(<ImageThumbnails images={twoImages} maxImages={4} />)
+
+    const wrapper = container.firstChild
+    expect(wrapper).toBeTruthy()
+    expect(wrapper.children).toHaveLength(2)
+  })
+
+  it('uses optimizeSrc when provided', () => {
+    const optimizer = jest.fn(s => `${s}?x=1`)
+    const { container } = wrap(<ImageThumbnails images={['https://example.com/a.jpg']} optimizeSrc={optimizer} />)
+    expect(optimizer).toHaveBeenCalledWith('https://example.com/a.jpg')
+    expect(container.firstChild).toBeTruthy()
+  })
+
+  it('omits inner background when optimizeSrc returns null', () => {
+    const { container } = wrap(<ImageThumbnails images={['https://example.com/z.jpg']} optimizeSrc={() => null} />)
+    expect(container.firstChild?.firstChild?.firstChild).toBeTruthy()
+  })
+
+  it('omits inner background when optimizeSrc returns undefined', () => {
+    const { container } = wrap(<ImageThumbnails images={['https://example.com/z.jpg']} optimizeSrc={() => undefined} />)
+    expect(container.firstChild?.firstChild?.firstChild).toBeTruthy()
+  })
+
+  it('handles null and non-string slots as empty thumbnails (same slot count)', () => {
+    const mixedImages = ['https://example.com/image1.jpg', null, 'https://example.com/image2.jpg', undefined]
+    const { container } = wrap(<ImageThumbnails images={mixedImages} maxImages={4} />)
+
+    const wrapper = container.firstChild
+    expect(wrapper).toBeTruthy()
+    expect(wrapper.children).toHaveLength(4)
+  })
+
+  it('matches snapshot with default props', () => {
+    const { asFragment } = wrap(<ImageThumbnails images={sampleImages} />)
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('matches snapshot with custom maxImages', () => {
+    const { asFragment } = wrap(<ImageThumbnails images={sampleImages} maxImages={2} />)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

package/src/next/app-shell.js

@@ -1,9 +1,11 @@
 'use client'
 
+import { useEffect } from 'react'
+
 import { Box } from '@theme-ui/components'
 
 import { ChronogroveAnimatedPageBackground } from '../animated-page-background/index.js'
-import { useDocumentColorModeSurface } from '../color-mode/index.js'
+import { setChronogroveCrossDomainColorModeClientConfig, useDocumentColorModeSurface } from '../color-mode/index.js'
 import { ChronogroveThemeProvider } from '../provider.js'
 import chronogroveTheme from '../theme.js'
 
@@ -19,8 +21,16 @@ function DocumentColorModeSurface() {
  * Default Next.js App Router shell: Theme UI provider, three.js Color Bends background (same as
  * Gatsby home), document surface sync, and soft-navigation color-mode reconcile. Wrap with
  * {@link ChronogroveNextEmotionRegistry} in `layout.jsx` outside this component.
+ *
+ * Pass the same `crossDomainColorMode` as {@link ChronogroveNextRootLayoutHead} so toggles write the
+ * shared cookie (optional).
  */
-export function ChronogroveNextAppShell({ children, theme = chronogroveTheme }) {
+export function ChronogroveNextAppShell({ children, theme = chronogroveTheme, crossDomainColorMode = null }) {
+  useEffect(() => {
+    setChronogroveCrossDomainColorModeClientConfig(crossDomainColorMode)
+    return () => setChronogroveCrossDomainColorModeClientConfig(null)
+  }, [crossDomainColorMode?.cookieName, crossDomainColorMode?.registrableDomain])
+
   return (
     <ChronogroveThemeProvider theme={theme}>
       <ChronogroveAnimatedPageBackground />

package/src/next/root-layout-head.js

@@ -10,13 +10,16 @@ import {
  * Server Component fragment for the root `<head>`: Emotion insertion point, Theme UI no-flash
  * script, HTML background script, and fallback CSS (same composition as
  * `buildThemeUiColorModeHeadComponents` for Gatsby).
+ *
+ * @param {{ crossDomainColorMode?: { registrableDomain?: string, cookieName?: string } | null }} [props]
  */
-export function ChronogroveNextRootLayoutHead() {
+export function ChronogroveNextRootLayoutHead({ crossDomainColorMode = null } = {}) {
   const surface = resolveChronogroveSurfaceColors(chronogroveHeadTheme)
-  const colorModeScript = buildThemeUiNoFlashInlineScript()
+  const colorModeScript = buildThemeUiNoFlashInlineScript({ crossDomainColorMode })
   const htmlBackgroundScript = buildHtmlBackgroundInlineScript({
     defaultBackgroundHex: surface.defaultBackgroundHex,
-    darkBackgroundHex: surface.darkBackgroundHex
+    darkBackgroundHex: surface.darkBackgroundHex,
+    crossDomainColorMode
   })
   const colorModeFallbackCSS = buildThemeUiColorModeFallbackCss({
     defaultBackgroundHex: surface.defaultBackgroundHex,

package/src/thumbnail-strip.js

@@ -0,0 +1,72 @@
+import React from 'react'
+import { Box } from '@theme-ui/components'
+
+/**
+ * Compact vertical strip of thumbnail images — staggered/offset for card side rails.
+ */
+const ThumbnailStrip = ({ images = [], maxImages = 4, size = 36 }) => {
+  if (!images || images.length === 0) {
+    return null
+  }
+
+  const displayImages = images.slice(0, maxImages)
+  const overlap = size * 0.35 // 35% overlap for compact stacking
+  const stripW = size + 8
+  const stripH = displayImages.length * (size - overlap) + overlap
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        position: 'relative',
+        // Theme UI maps bare numbers in `sx` to theme scales — use explicit px for layout math.
+        width: `${stripW}px`,
+        height: `${stripH}px`,
+        flexShrink: 0
+      }}
+    >
+      {displayImages.map((src, index) => (
+        <Box
+          key={index}
+          sx={{
+            position: 'absolute',
+            top: `${index * (size - overlap)}px`,
+            left: index % 2 === 0 ? 0 : '8px',
+            width: `${size}px`,
+            height: `${size}px`,
+            borderRadius: '6px',
+            overflow: 'hidden',
+            boxShadow: '0 2px 6px rgba(0, 0, 0, 0.12)',
+            border: '2px solid',
+            borderColor: 'background',
+            transition: 'transform 0.2s ease',
+            zIndex: displayImages.length - index,
+            '&:hover': {
+              transform: 'scale(1.08)',
+              zIndex: displayImages.length + 1
+            }
+          }}
+        >
+          <Box
+            sx={{
+              width: '100%',
+              height: '100%',
+              ...(typeof src === 'string' && src
+                ? {
+                    backgroundImage: `url(${src})`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    backgroundRepeat: 'no-repeat'
+                  }
+                : {})
+            }}
+          />
+        </Box>
+      ))}
+    </Box>
+  )
+}
+
+export default ThumbnailStrip

package/src/thumbnail-strip.spec.js

@@ -0,0 +1,83 @@
+import { render } from '@testing-library/react'
+import { ThemeUIProvider } from 'theme-ui'
+import React from 'react'
+
+import ThumbnailStrip from './thumbnail-strip.js'
+
+const stubTheme = { colors: { background: '#fff' } }
+
+const wrap = ui => render(<ThemeUIProvider theme={stubTheme}>{ui}</ThemeUIProvider>)
+
+describe('ThumbnailStrip', () => {
+  const sampleImages = [
+    'https://example.com/image1.jpg',
+    'https://example.com/image2.jpg',
+    'https://example.com/image3.jpg',
+    'https://example.com/image4.jpg',
+    'https://example.com/image5.jpg'
+  ]
+
+  it('renders thumbnails when images are provided', () => {
+    const { container } = wrap(<ThumbnailStrip images={sampleImages} />)
+
+    const wrapper = container.firstChild
+    expect(wrapper).toBeTruthy()
+    expect(wrapper.children).toHaveLength(4)
+  })
+
+  it('renders correct number of thumbnails based on maxImages prop', () => {
+    const { container } = wrap(<ThumbnailStrip images={sampleImages} maxImages={3} />)
+
+    const wrapper = container.firstChild
+    expect(wrapper).toBeTruthy()
+    expect(wrapper.children).toHaveLength(3)
+  })
+
+  it('returns null when images array is empty', () => {
+    const { container } = wrap(<ThumbnailStrip images={[]} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('returns null when images is null', () => {
+    const { container } = wrap(<ThumbnailStrip images={null} />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('returns null when images is undefined', () => {
+    const { container } = wrap(<ThumbnailStrip />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('renders fewer thumbnails when fewer images are provided than maxImages', () => {
+    const twoImages = ['https://example.com/image1.jpg', 'https://example.com/image2.jpg']
+    const { container } = wrap(<ThumbnailStrip images={twoImages} maxImages={4} />)
+
+    const wrapper = container.firstChild
+    expect(wrapper).toBeTruthy()
+    expect(wrapper.children).toHaveLength(2)
+  })
+
+  it('accepts custom size prop', () => {
+    const { container } = wrap(<ThumbnailStrip images={sampleImages} size={50} />)
+
+    const wrapper = container.firstChild
+    expect(wrapper).toBeTruthy()
+    expect(wrapper.children).toHaveLength(4)
+  })
+
+  it('omits background when an entry is not a non-empty string', () => {
+    const mixed = ['https://example.com/a.jpg', '', null]
+    const { container } = wrap(<ThumbnailStrip images={mixed} maxImages={4} />)
+    expect(container.firstChild?.children?.length).toBe(3)
+  })
+
+  it('matches snapshot with default props', () => {
+    const { asFragment } = wrap(<ThumbnailStrip images={sampleImages} />)
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  it('matches snapshot with custom maxImages and size', () => {
+    const { asFragment } = wrap(<ThumbnailStrip images={sampleImages} maxImages={2} size={48} />)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})