@abuzareal/contour-ui 0.1.1 → 0.2.0

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.1",
+  "version": "0.2.0",
   "private": false,
   "description": "Editorial React components, themes, restrained motion, and optional Three.js objects.",
   "type": "module",
@@ -10,7 +10,10 @@
     "LICENSE",
     "CHANGELOG.md",
     "SECURITY.md",
-    "RELEASING.md"
+    "RELEASING.md",
+    "CONTRIBUTING.md",
+    "CODE_OF_CONDUCT.md",
+    "NEXTJS.md"
   ],
   "sideEffects": [
     "**/*.css"
@@ -18,24 +21,29 @@
   "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",
     "./tokens.css": "./dist/tokens.css",
-    "./fonts.css": "./dist/fonts.css"
+    "./fonts.css": "./dist/fonts.css",
+    "./fonts-latin.css": "./dist/fonts-latin.css"
   },
   "scripts": {
     "build": "node scripts/build.mjs",
@@ -45,9 +53,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:compat": "node scripts/test-compat.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",
@@ -72,7 +83,6 @@
   "devDependencies": {
     "@playwright/test": "1.63.0",
     "@testing-library/react": "^16.3.3",
-    "@types/node": "^24.13.3",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/three": "^0.186.0",
@@ -97,8 +107,15 @@
     "type": "git",
     "url": "git+https://github.com/abuzareal/contour-ui.git"
   },
-  "homepage": "https://github.com/abuzareal/contour-ui#readme",
+  "homepage": "https://contour.abuzr.in/",
   "bugs": {
     "url": "https://github.com/abuzareal/contour-ui/issues"
-  }
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "components",
+    "design-system",
+    "contour-ui"
+  ]
 }