@chronogrove/ui 0.83.2 → 0.84.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chronogrove/ui",
-  "version": "0.83.2",
+  "version": "0.84.0",
   "description": "Chronogrove Theme UI theme, color mode helpers, and shared UI primitives",
   "license": "MIT",
   "type": "module",
@@ -142,6 +142,10 @@
       "import": "./src/article-column-container.js",
       "default": "./src/article-column-container.js"
     },
+    "./category-index-layout": {
+      "import": "./src/category-index-layout.js",
+      "default": "./src/category-index-layout.js"
+    },
     "./home-dashboard-layout": {
       "import": "./src/home-dashboard-layout.js",
       "default": "./src/home-dashboard-layout.js"
@@ -177,26 +181,26 @@
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
-    "@fortawesome/react-fontawesome": "^3.3.0",
+    "@fortawesome/react-fontawesome": "^3.3.1",
     "@theme-toggles/react": "^4.1.0",
     "@theme-ui/components": "^0.17.4",
     "@theme-ui/presets": "^0.17.4",
     "react-intersection-observer": "^10.0.3",
     "theme-ui": "^0.17.4",
-    "three": "^0.183.2"
+    "three": "^0.184.0"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0",
-    "@babel/preset-env": "^7.29.2",
+    "@babel/preset-env": "^7.29.5",
     "@babel/preset-react": "^7.28.5",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "babel-jest": "^30.3.0",
-    "jest": "^30.3.0",
-    "jest-environment-jsdom": "^30.3.0",
-    "next": "^16.2.3",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5"
+    "babel-jest": "^30.4.1",
+    "jest": "^30.4.2",
+    "jest-environment-jsdom": "^30.4.1",
+    "next": "^16.2.6",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
   },
   "scripts": {
     "test": "jest --config jest.config.cjs",

package/src/category-index-layout.js

@@ -0,0 +1,55 @@
+/**
+ * Shared layout for category-style index pages (blog, travel, music, etc.)
+ * under the animated hero background.
+ */
+
+import React, { Fragment } from 'react'
+import { Box } from '@theme-ui/components'
+
+import AnimatedPageBackground from './animated-page-background/index.js'
+
+/** Outer column flex (below site chrome): stacks header + content with consistent vertical rhythm. */
+export const categoryIndexMainColumnFlexSx = {
+  flexDirection: 'column',
+  flexGrow: 1,
+  position: 'relative',
+  py: 3
+}
+
+/** `sx` for the post list `<section>` (matches Travel index spacing). */
+export const categoryIndexPostListSectionSx = {
+  display: 'grid',
+  gridGap: [2, 2, 3, 3],
+  gridTemplateColumns: '1fr',
+  mt: 4
+}
+
+/** `sx` for the empty-state wrapper under the header. */
+export const categoryIndexEmptyStateBoxSx = {
+  textAlign: 'center',
+  py: 6,
+  mt: 4
+}
+
+/**
+ * Animated gradient hero + elevated content layer (same stacking as Travel/Music/Blog indexes).
+ *
+ * @param {object} props
+ * @param {React.ReactNode} props.children
+ * @param {string} [props.overlayHeight]
+ */
+export function CategoryIndexHeroChrome({ children, overlayHeight = 'min(75vh, 1000px)' }) {
+  return (
+    <Fragment>
+      <AnimatedPageBackground overlayHeight={overlayHeight} />
+      <Box
+        sx={{
+          position: 'relative',
+          zIndex: 1
+        }}
+      >
+        {children}
+      </Box>
+    </Fragment>
+  )
+}

package/src/category-index-layout.spec.js

@@ -0,0 +1,71 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+
+import {
+  CategoryIndexHeroChrome,
+  categoryIndexEmptyStateBoxSx,
+  categoryIndexMainColumnFlexSx,
+  categoryIndexPostListSectionSx
+} from './category-index-layout.js'
+
+jest.mock('./animated-page-background/index.js', () => ({
+  __esModule: true,
+  default: ({ overlayHeight }) => <div data-testid='animated-page-background' data-overlay={overlayHeight} />
+}))
+
+describe('categoryIndexPostListSectionSx', () => {
+  it('matches shared index grid layout', () => {
+    expect(categoryIndexPostListSectionSx).toMatchObject({
+      display: 'grid',
+      gridGap: [2, 2, 3, 3],
+      gridTemplateColumns: '1fr',
+      mt: 4
+    })
+  })
+})
+
+describe('categoryIndexEmptyStateBoxSx', () => {
+  it('matches shared empty state spacing', () => {
+    expect(categoryIndexEmptyStateBoxSx).toMatchObject({
+      textAlign: 'center',
+      py: 6,
+      mt: 4
+    })
+  })
+})
+
+describe('categoryIndexMainColumnFlexSx', () => {
+  it('matches main column flex rhythm', () => {
+    expect(categoryIndexMainColumnFlexSx).toMatchObject({
+      flexDirection: 'column',
+      flexGrow: 1,
+      position: 'relative',
+      py: 3
+    })
+  })
+})
+
+describe('CategoryIndexHeroChrome', () => {
+  it('defaults overlay height when omitted', () => {
+    render(
+      <CategoryIndexHeroChrome>
+        <div data-testid='inner'>Hello</div>
+      </CategoryIndexHeroChrome>
+    )
+
+    expect(screen.getByTestId('animated-page-background')).toHaveAttribute('data-overlay', 'min(75vh, 1000px)')
+    expect(screen.getByTestId('inner')).toHaveTextContent('Hello')
+  })
+
+  it('renders animated background and stacks children above it', () => {
+    render(
+      <CategoryIndexHeroChrome overlayHeight='42vh'>
+        <div data-testid='inner'>Hello</div>
+      </CategoryIndexHeroChrome>
+    )
+
+    expect(screen.getByTestId('animated-page-background')).toHaveAttribute('data-overlay', '42vh')
+    expect(screen.getByTestId('inner')).toHaveTextContent('Hello')
+  })
+})