@abuzareal/contour-ui 0.1.2 → 0.2.1

package/dist/hooks/useMobileMenu.js

@@ -1,3 +1,4 @@
+"use client";
 /** Open state for the mobile menu, closing on Escape, outside pointer, or desktop resize. */
 import { useEffect, useState } from "react";
 const desktopQuery = "(min-width: 768px)";

package/dist/hooks/useMotionPreference.js

@@ -1,3 +1,4 @@
+"use client";
 /** Tracks the user's `prefers-reduced-motion` setting and updates when it changes. */
 import { useEffect, useState } from "react";
 const query = "(prefers-reduced-motion: reduce)";

package/dist/hooks/useOpenState.d.ts

@@ -0,0 +1,2 @@
+/** Controlled and uncontrolled disclosure state share the same change contract. */
+export default function useOpenState(open: boolean | undefined, defaultOpen: boolean, onOpenChange?: (open: boolean) => void): readonly [boolean, (next: boolean) => void];

package/dist/hooks/useOpenState.js

@@ -0,0 +1,15 @@
+"use client";
+import { useCallback, useState } from "react";
+/** Controlled and uncontrolled disclosure state share the same change contract. */
+export default function useOpenState(open, defaultOpen, onOpenChange) {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const current = open ?? internalOpen;
+    const change = useCallback((next) => {
+        if (next === current)
+            return;
+        if (open === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next);
+    }, [current, open, onOpenChange]);
+    return [current, change];
+}

package/dist/hooks/usePrintPreparation.js

@@ -1,3 +1,4 @@
+"use client";
 /** Prints the full page: opens collapsed disclosures and uses the light theme, then restores both. */
 import { useEffect } from "react";
 export default function usePrintPreparation() {

package/dist/hooks/useScrollSpy.js

@@ -1,3 +1,4 @@
+"use client";
 /** Returns the id of the last listed element whose top has scrolled past the activation line. */
 import { useEffect, useState } from "react";
 /** Fraction of the viewport height at which an element becomes "current". */

package/dist/hooks/useSmoothScroll.js

@@ -1,3 +1,4 @@
+"use client";
 /** Enables Lenis smooth scrolling (and animated anchor jumps) while motion is allowed. */
 import { useEffect } from "react";
 import Lenis from "lenis";

package/dist/hooks/useTheme.js

@@ -1,3 +1,4 @@
+"use client";
 /** Light/dark theme state: persisted choice, system fallback, and the animated switch. */
 import { useCallback, useEffect, useSyncExternalStore } from "react";
 import { flushSync } from "react-dom";

package/dist/hooks/useThreeStage.d.ts

@@ -12,11 +12,15 @@ export type StageScene = {
     /** Snaps to a still pose when motion is turned off. */
     rest: () => void;
     dispose: () => void;
+    /** Reflows the still or animated scene after the camera aspect changes. */
+    resize?: () => void;
 };
 export type StageContext = {
     scene: THREE.Scene;
     camera: THREE.PerspectiveCamera;
     renderer: THREE.WebGLRenderer;
+    /** Register resources immediately, including those allocated before setup returns. */
+    onDispose?: (cleanup: () => void) => void;
 };
 type StageOptions = {
     motionEnabled: boolean;

package/dist/hooks/useThreeStage.js

@@ -1,3 +1,4 @@
+"use client";
 /** Shared Three.js stage: renderer, studio lighting, resizing, a visibility-aware render loop, pointer tracking, and cleanup. */
 import { useEffect, useRef } from "react";
 import * as THREE from "three";
@@ -16,140 +17,176 @@ export default function useThreeStage(hostRef, { motionEnabled, setup, cameraDis
         const host = hostRef.current;
         if (!host)
             return;
-        let renderer;
-        try {
-            renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
-        }
-        catch {
-            host.dataset.state = "unavailable";
-            return;
-        }
-        renderer.setPixelRatio(Math.min(window.devicePixelRatio, maxPixelRatio));
-        renderer.setClearColor(0x000000, 0);
-        // Neutral tone mapping keeps the lime close to the CSS accent colour.
-        renderer.toneMapping = THREE.NeutralToneMapping;
-        renderer.toneMappingExposure = 1.05;
-        renderer.domElement.setAttribute("aria-hidden", "true");
-        host.appendChild(renderer.domElement);
-        // Studio lighting shared by every stage so materials read consistently.
-        const scene = new THREE.Scene();
-        const camera = new THREE.PerspectiveCamera(35, 1, 0.1, 30);
-        camera.position.set(0, 0, 10.5);
-        const environment = new RoomEnvironment();
-        const generator = new THREE.PMREMGenerator(renderer);
-        const environmentMap = generator.fromScene(environment, 0.04);
-        scene.environment = environmentMap.texture;
-        environment.dispose();
-        generator.dispose();
-        const keyLight = new THREE.DirectionalLight(0xffffff, 4);
-        keyLight.position.set(4, 5, 6);
-        const rimLight = new THREE.DirectionalLight(0xcad9ff, 3);
-        rimLight.position.set(-5, 1, -2);
-        scene.add(keyLight, rimLight, new THREE.AmbientLight(0xffffff, 0.7));
-        const stage = setupRef.current.setup({ scene, camera, renderer });
-        // Loop state: frames run only while visible, focused, and motion is on.
-        const pointer = new THREE.Vector2();
-        let visible = true;
-        let contextLost = false;
-        let running = false;
-        let frame = 0;
-        let elapsed = 0;
-        let previousTime = 0;
-        const render = () => {
-            if (contextLost)
-                return;
-            renderer.render(scene, camera);
-            host.dataset.state = "ready";
-        };
-        const resize = () => {
-            const { width, height } = host.getBoundingClientRect();
-            if (!width || !height)
-                return;
-            camera.aspect = width / height;
-            camera.position.z = setupRef.current.cameraDistance(camera.aspect);
-            camera.updateProjectionMatrix();
-            renderer.setSize(width, height);
-            render();
-        };
-        const trackPointer = (event) => {
-            if (event.pointerType === "touch" || !motionRef.current)
-                return;
-            const bounds = host.getBoundingClientRect();
-            pointer.set((event.clientX - bounds.left) / bounds.width - 0.5, (event.clientY - bounds.top) / bounds.height - 0.5);
+        const disposers = [];
+        const own = (dispose) => {
+            let disposed = false;
+            const release = () => {
+                if (disposed)
+                    return;
+                disposed = true;
+                dispose();
+            };
+            disposers.push(release);
+            return release;
         };
-        const resetPointer = () => pointer.set(0, 0);
-        const animate = (time) => {
-            if (!running)
-                return;
-            const delta = Math.min(Math.max(time - previousTime, 0) / 1000, 0.05);
-            previousTime = time;
-            elapsed += delta;
-            stage.update({ delta, elapsed, pointer });
-            render();
-            frame = requestAnimationFrame(animate);
-        };
-        /** Starts or stops the loop to match visibility and motion; snaps to rest when paused. */
-        const sync = () => {
-            const motion = motionRef.current;
-            const shouldRun = motion && visible && !document.hidden && !contextLost;
-            if (shouldRun && !running) {
-                running = true;
-                previousTime = performance.now();
-                frame = requestAnimationFrame(animate);
+        const cleanup = () => {
+            syncRef.current = undefined;
+            for (const dispose of disposers.reverse()) {
+                try {
+                    dispose();
+                }
+                catch (error) {
+                    console.error("Contour stage cleanup failed", error);
+                }
             }
-            else if (!shouldRun && running) {
+            disposers.length = 0;
+        };
+        try {
+            const renderer = new THREE.WebGLRenderer({
+                alpha: true,
+                antialias: true,
+            });
+            own(() => renderer.dispose());
+            own(() => renderer.domElement.remove());
+            renderer.setPixelRatio(Math.min(window.devicePixelRatio, maxPixelRatio));
+            renderer.setClearColor(0x000000, 0);
+            // Neutral tone mapping keeps the lime close to the CSS accent colour.
+            renderer.toneMapping = THREE.NeutralToneMapping;
+            renderer.toneMappingExposure = 1.05;
+            renderer.domElement.setAttribute("aria-hidden", "true");
+            host.appendChild(renderer.domElement);
+            // Studio lighting shared by every stage so materials read consistently.
+            const scene = new THREE.Scene();
+            const camera = new THREE.PerspectiveCamera(35, 1, 0.1, 30);
+            camera.position.set(0, 0, 10.5);
+            const environment = new RoomEnvironment();
+            const releaseEnvironment = own(() => environment.dispose());
+            const generator = new THREE.PMREMGenerator(renderer);
+            const releaseGenerator = own(() => generator.dispose());
+            const environmentMap = generator.fromScene(environment, 0.04);
+            own(() => environmentMap.dispose());
+            scene.environment = environmentMap.texture;
+            releaseEnvironment();
+            releaseGenerator();
+            const keyLight = new THREE.DirectionalLight(0xffffff, 4);
+            keyLight.position.set(4, 5, 6);
+            const rimLight = new THREE.DirectionalLight(0xcad9ff, 3);
+            rimLight.position.set(-5, 1, -2);
+            scene.add(keyLight, rimLight, new THREE.AmbientLight(0xffffff, 0.7));
+            const stage = setupRef.current.setup({
+                scene,
+                camera,
+                renderer,
+                onDispose: own,
+            });
+            own(() => stage.dispose());
+            // Loop state: frames run only while visible, focused, and motion is on.
+            const pointer = new THREE.Vector2();
+            let visible = true;
+            let contextLost = false;
+            let running = false;
+            let frame = 0;
+            let elapsed = 0;
+            let previousTime = 0;
+            own(() => {
                 running = false;
                 cancelAnimationFrame(frame);
-            }
-            if (!motion) {
-                pointer.set(0, 0);
-                stage.rest();
+            });
+            const render = () => {
+                if (contextLost)
+                    return;
+                renderer.render(scene, camera);
+                host.dataset.state = "ready";
+            };
+            const resize = () => {
+                const { width, height } = host.getBoundingClientRect();
+                if (!width || !height)
+                    return;
+                camera.aspect = width / height;
+                camera.position.z = setupRef.current.cameraDistance(camera.aspect);
+                camera.updateProjectionMatrix();
+                renderer.setSize(width, height);
+                stage.resize?.();
                 render();
-            }
-        };
-        syncRef.current = sync;
-        const loseContext = (event) => {
-            event.preventDefault();
-            contextLost = true;
-            host.dataset.state = "unavailable";
-            sync();
-        };
-        const restoreContext = () => {
-            contextLost = false;
-            render();
-            sync();
-        };
-        const visibilityObserver = new IntersectionObserver(([entry]) => {
-            visible = entry.isIntersecting;
-            if (visible)
+            };
+            const trackPointer = (event) => {
+                if (event.pointerType === "touch" || !motionRef.current)
+                    return;
+                const bounds = host.getBoundingClientRect();
+                pointer.set((event.clientX - bounds.left) / bounds.width - 0.5, (event.clientY - bounds.top) / bounds.height - 0.5);
+            };
+            const resetPointer = () => pointer.set(0, 0);
+            const animate = (time) => {
+                if (!running)
+                    return;
+                const delta = Math.min(Math.max(time - previousTime, 0) / 1000, 0.05);
+                previousTime = time;
+                elapsed += delta;
+                stage.update({ delta, elapsed, pointer });
+                render();
+                frame = requestAnimationFrame(animate);
+            };
+            /** Starts or stops the loop to match visibility and motion; snaps to rest when paused. */
+            const sync = () => {
+                const motion = motionRef.current;
+                const shouldRun = motion && visible && !document.hidden && !contextLost;
+                if (shouldRun && !running) {
+                    running = true;
+                    previousTime = performance.now();
+                    frame = requestAnimationFrame(animate);
+                }
+                else if (!shouldRun && running) {
+                    running = false;
+                    cancelAnimationFrame(frame);
+                }
+                if (!motion) {
+                    pointer.set(0, 0);
+                    stage.rest();
+                    render();
+                }
+            };
+            syncRef.current = sync;
+            const loseContext = (event) => {
+                event.preventDefault();
+                contextLost = true;
+                host.dataset.state = "unavailable";
+                sync();
+            };
+            const restoreContext = () => {
+                contextLost = false;
                 render();
+                sync();
+            };
+            const visibilityObserver = new IntersectionObserver(([entry]) => {
+                visible = entry.isIntersecting;
+                if (visible)
+                    render();
+                sync();
+            });
+            own(() => visibilityObserver.disconnect());
+            const resizeObserver = new ResizeObserver(resize);
+            own(() => resizeObserver.disconnect());
+            visibilityObserver.observe(host);
+            resizeObserver.observe(host);
+            host.addEventListener("pointermove", trackPointer);
+            own(() => host.removeEventListener("pointermove", trackPointer));
+            host.addEventListener("pointerleave", resetPointer);
+            own(() => host.removeEventListener("pointerleave", resetPointer));
+            document.addEventListener("visibilitychange", sync);
+            own(() => document.removeEventListener("visibilitychange", sync));
+            renderer.domElement.addEventListener("webglcontextlost", loseContext);
+            own(() => renderer.domElement.removeEventListener("webglcontextlost", loseContext));
+            renderer.domElement.addEventListener("webglcontextrestored", restoreContext);
+            own(() => renderer.domElement.removeEventListener("webglcontextrestored", restoreContext));
+            resize();
             sync();
-        });
-        const resizeObserver = new ResizeObserver(resize);
-        visibilityObserver.observe(host);
-        resizeObserver.observe(host);
-        host.addEventListener("pointermove", trackPointer);
-        host.addEventListener("pointerleave", resetPointer);
-        document.addEventListener("visibilitychange", sync);
-        renderer.domElement.addEventListener("webglcontextlost", loseContext);
-        renderer.domElement.addEventListener("webglcontextrestored", restoreContext);
-        resize();
-        sync();
-        return () => {
-            running = false;
-            syncRef.current = undefined;
-            cancelAnimationFrame(frame);
-            visibilityObserver.disconnect();
-            resizeObserver.disconnect();
-            host.removeEventListener("pointermove", trackPointer);
-            host.removeEventListener("pointerleave", resetPointer);
-            document.removeEventListener("visibilitychange", sync);
-            renderer.domElement.removeEventListener("webglcontextlost", loseContext);
-            renderer.domElement.removeEventListener("webglcontextrestored", restoreContext);
-            stage.dispose();
-            environmentMap.dispose();
-            renderer.dispose();
-            renderer.domElement.remove();
-        };
+            return cleanup;
+        }
+        catch (error) {
+            cleanup();
+            host.dataset.state = "unavailable";
+            console.error("Contour stage initialization failed", error);
+            return;
+        }
     }, [hostRef]);
 }

package/dist/hooks/useToast.js

@@ -1,3 +1,4 @@
+"use client";
 /** Toast context: lets any component queue a notification rendered by ToastProvider. */
 import { createContext, useContext } from "react";
 export const ToastContext = createContext(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abuzareal/contour-ui",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "private": false,
   "description": "Editorial React components, themes, restrained motion, and optional Three.js objects.",
   "type": "module",
@@ -10,7 +10,12 @@
     "LICENSE",
     "CHANGELOG.md",
     "SECURITY.md",
-    "RELEASING.md"
+    "RELEASING.md",
+    "CONTRIBUTING.md",
+    "CODE_OF_CONDUCT.md",
+    "NEXTJS.md",
+    "CONTRACTS.md",
+    "PUBLIC-API.md"
   ],
   "sideEffects": [
     "**/*.css"
@@ -18,19 +23,23 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./three": {
       "types": "./dist/three.d.ts",
-      "import": "./dist/three.js"
+      "import": "./dist/three.js",
+      "default": "./dist/three.js"
     },
     "./scroll": {
       "types": "./dist/scroll.d.ts",
-      "import": "./dist/scroll.js"
+      "import": "./dist/scroll.js",
+      "default": "./dist/scroll.js"
     },
     "./theme-bootstrap": {
       "types": "./dist/lib/themeBootstrap.d.ts",
-      "import": "./dist/lib/themeBootstrap.js"
+      "import": "./dist/lib/themeBootstrap.js",
+      "default": "./dist/lib/themeBootstrap.js"
     },
     "./styles.css": "./dist/styles.css",
     "./reset.css": "./dist/reset.css",
@@ -46,10 +55,12 @@
     "test:browser": "node --test tests/*.browser.mjs",
     "check:package": "node scripts/check-package.mjs",
     "validate": "npm run typecheck && npm run lint && npm run build && npm test && npm run test:browser && npm run check:package",
-    "prepublishOnly": "npm run validate && npm run test:compat",
+    "prepublishOnly": "node scripts/verify-release.mjs",
     "test:consumer": "node scripts/test-consumer.mjs",
     "test:compat": "node scripts/test-compat.mjs",
-    "test:optional": "node scripts/test-optional-consumer.mjs"
+    "test:optional": "node scripts/test-optional-consumer.mjs",
+    "test:next": "npm run build && node scripts/test-next.mjs",
+    "verify:release": "node scripts/verify-release.mjs"
   },
   "dependencies": {
     "@fontsource-variable/dm-sans": "^5.3.0",