@chronogrove/ui 0.82.0 → 0.82.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -12,7 +12,7 @@ pnpm add @chronogrove/ui
|
|
|
12
12
|
|
|
13
13
|
Use **`pnpm publish`** for releases so `workspace:` dependencies in dependents are rewritten; see [pnpm workspaces — publishing](https://pnpm.io/workspaces#publishing-workspace-packages).
|
|
14
14
|
|
|
15
|
-
**Shared dependencies with `gatsby-theme-chronogrove`:** both packages depend on Theme UI, Emotion, and related libraries, with versions driven by the root [pnpm catalog](../../pnpm-workspace.yaml). When you bump those catalog entries, update **`packages/ui
|
|
15
|
+
**Shared dependencies with `gatsby-theme-chronogrove`:** both packages depend on Theme UI, Emotion, **`three`** (where WebGL backgrounds or artwork import it), and related libraries, with versions driven by the root [pnpm catalog](../../pnpm-workspace.yaml). When you bump those catalog entries, update **`packages/ui`**, **`theme`**, and any other workspace `package.json` files that reference `catalog:` for the same keys in the **same change** so installs stay aligned and you avoid duplicate or mismatched trees.
|
|
16
16
|
|
|
17
17
|
## Subpath exports
|
|
18
18
|
|
|
@@ -24,7 +24,7 @@ Prefer deep imports so bundles stay lean:
|
|
|
24
24
|
| `@chronogrove/ui/theme` | Default Theme UI theme object + named exports |
|
|
25
25
|
| `@chronogrove/ui/provider` | `ChronogroveThemeProvider` |
|
|
26
26
|
| `@chronogrove/ui/color-mode` | Storage key, reconcile event, SSR inline builders, `chronogroveHeadTheme` (RSC-safe), `resolveChronogroveSurfaceColors`, `useDocumentColorModeSurface`, browser sync, `reconcileThemeUiColorModeOnNavigation` |
|
|
27
|
-
| `@chronogrove/ui/animated-page-background` | **`ChronogroveAnimatedPageBackground`** — same stack as the Gatsby home: fixed `z-index: 0`, light = solid theme background, dark = **three.js** Color Bends + scroll-linked gradient overlay and parallax (`three` is a dependency of this package).
|
|
27
|
+
| `@chronogrove/ui/animated-page-background` | **`ChronogroveAnimatedPageBackground`** — same stack as the Gatsby home: fixed `z-index: 0`, light = solid theme background, dark = **three.js** Color Bends + scroll-linked gradient overlay and parallax (`three` is a dependency of this package). Animation timing uses **`THREE.Timer`** (not deprecated `Clock`, three.js r183+). |
|
|
28
28
|
| `@chronogrove/ui/color-bends` | **`ColorBends`** — lower-level three.js gradient background used inside `ChronogroveAnimatedPageBackground`. Prefer the full **`animated-page-background`** or **`@chronogrove/ui/next`** shell unless you need the raw component. |
|
|
29
29
|
| `@chronogrove/ui/next` | **Next.js App Router helpers:** `ChronogroveNextRootLayoutHead` (RSC `<head>` injections), `ChronogroveNextEmotionRegistry`, `ChronogroveNextAppShell` (theme + three.js background + surface sync + soft-nav reconcile), `ChronogroveNextThemeUiColorModeRouteSync` (standalone). Requires `next` (peer, optional for the rest of the package). |
|
|
30
30
|
| `@chronogrove/ui/action-card-layout` | **`actionCardPinnedLayoutSx`** — layout `sx` for `Card variant="actionCard"` (matches GitHub pinned cards). |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chronogrove/ui",
|
|
3
|
-
"version": "0.82.
|
|
3
|
+
"version": "0.82.1",
|
|
4
4
|
"description": "Chronogrove Theme UI theme, color mode helpers, and shared UI primitives",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
}
|
|
145
145
|
},
|
|
146
146
|
"peerDependencies": {
|
|
147
|
-
"next": "^14.0.0 || ^15.0.0",
|
|
147
|
+
"next": "^14.0.0 || ^15.0.0 || ^16.0.0",
|
|
148
148
|
"react": "^18.0.0 || ^19.0.0",
|
|
149
149
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
150
150
|
},
|
|
@@ -174,7 +174,7 @@
|
|
|
174
174
|
"babel-jest": "^30.3.0",
|
|
175
175
|
"jest": "^30.3.0",
|
|
176
176
|
"jest-environment-jsdom": "^30.3.0",
|
|
177
|
-
"next": "^
|
|
177
|
+
"next": "^16.2.3",
|
|
178
178
|
"react": "^19.2.5",
|
|
179
179
|
"react-dom": "^19.2.5"
|
|
180
180
|
},
|
|
@@ -178,7 +178,8 @@ export default function ColorBends({
|
|
|
178
178
|
|
|
179
179
|
container.appendChild(renderer.domElement)
|
|
180
180
|
|
|
181
|
-
const
|
|
181
|
+
const timer = new THREE.Timer()
|
|
182
|
+
timer.connect(document)
|
|
182
183
|
|
|
183
184
|
const handleResize = () => {
|
|
184
185
|
const w = container.clientWidth || 1
|
|
@@ -197,9 +198,10 @@ export default function ColorBends({
|
|
|
197
198
|
window.addEventListener('resize', handleResize)
|
|
198
199
|
}
|
|
199
200
|
|
|
200
|
-
const loop =
|
|
201
|
-
|
|
202
|
-
const
|
|
201
|
+
const loop = time => {
|
|
202
|
+
timer.update(time)
|
|
203
|
+
const dt = timer.getDelta()
|
|
204
|
+
const elapsed = timer.getElapsed()
|
|
203
205
|
|
|
204
206
|
material.uniforms.uTime.value = elapsed
|
|
205
207
|
|
|
@@ -222,6 +224,7 @@ export default function ColorBends({
|
|
|
222
224
|
rafRef.current = requestAnimationFrame(loop)
|
|
223
225
|
|
|
224
226
|
return () => {
|
|
227
|
+
timer.dispose()
|
|
225
228
|
if (rafRef.current !== null) cancelAnimationFrame(rafRef.current)
|
|
226
229
|
if (resizeObserverRef.current) resizeObserverRef.current.disconnect()
|
|
227
230
|
else window.removeEventListener('resize', handleResize)
|