@nous-research/ui 0.13.1 → 0.14.0

package/README.md

@@ -53,9 +53,12 @@ pnpm dev              # next dev on http://localhost:3000 → redirects to /ds
 
 ```
 pnpm build     # tsc → dist/ + copies css / fonts / assets
-pnpm release   # runs scripts/release.sh (must be on main, clean tree)
 ```
 
+releases are published automatically when PRs merge to `main`. the github
+workflow bumps the package version from the merged PR labels (`major`, `minor`,
+or `patch`), pushes the tag, and publishes to npm via trusted publishing.
+
 the published tarball only ships `dist/` and `README.md` (see `files` in
 `package.json`). `.d.ts.map` + inline sources are emitted so consumers can
 "go to definition" straight into the TypeScript source.

package/dist/assets.d.ts

@@ -0,0 +1,38 @@
+interface StaticImageData {
+  src: string
+  height: number
+  width: number
+  blurDataURL?: string
+  blurWidth?: number
+  blurHeight?: number
+}
+
+declare module '*.jpg' {
+  const content: StaticImageData
+  export default content
+}
+
+declare module '*.jpeg' {
+  const content: StaticImageData
+  export default content
+}
+
+declare module '*.png' {
+  const content: StaticImageData
+  export default content
+}
+
+declare module '*.svg' {
+  const content: StaticImageData
+  export default content
+}
+
+declare module '*.gif' {
+  const content: StaticImageData
+  export default content
+}
+
+declare module '*.webp' {
+  const content: StaticImageData
+  export default content
+}

package/dist/fonts.d.ts

@@ -4,4 +4,3 @@ export declare const FONT_MONO = "--font-mono";
 export declare const FONT_RULES_COMPRESSED = "--font-rules-compressed";
 export declare const FONT_RULES_EXPANDED = "--font-rules-expanded";
 export declare const FONT_MONDWEST = "--font-mondwest";
-//# sourceMappingURL=fonts.d.ts.map

package/dist/fonts.js

@@ -1,7 +1,5 @@
-/** CSS variable names for the design language fonts. Set automatically by fonts.css. */
-export const FONT_SANS = '--font-sans';
-export const FONT_MONO = '--font-mono';
-export const FONT_RULES_COMPRESSED = '--font-rules-compressed';
-export const FONT_RULES_EXPANDED = '--font-rules-expanded';
-export const FONT_MONDWEST = '--font-mondwest';
-//# sourceMappingURL=fonts.js.map
+export const FONT_SANS = "--font-sans";
+export const FONT_MONO = "--font-mono";
+export const FONT_RULES_COMPRESSED = "--font-rules-compressed";
+export const FONT_RULES_EXPANDED = "--font-rules-expanded";
+export const FONT_MONDWEST = "--font-mondwest";

package/dist/hooks/use-capped-frame.d.ts

@@ -1,3 +1,2 @@
 import type { RenderCallback } from '@react-three/fiber';
 export declare function useCappedFrame(cb: RenderCallback, max?: number): void;
-//# sourceMappingURL=use-capped-frame.d.ts.map

package/dist/hooks/use-capped-frame.js

@@ -1,15 +1,14 @@
-'use client';
-import { useFrame, useThree } from '@react-three/fiber';
-import { useRef } from 'react';
+"use client";
+import { useFrame, useThree } from "@react-three/fiber";
+import { useRef } from "react";
 export function useCappedFrame(cb, max) {
-    const last = useRef(performance.now());
-    const { size } = useThree();
-    const interval = 1e3 / (max ?? (size.width < 1024 ? 60 : 120));
-    useFrame((st, delta) => {
-        if (performance.now() - last.current > interval) {
-            last.current = performance.now();
-            cb(st, delta);
-        }
-    });
+  const last = useRef(performance.now());
+  const { size } = useThree();
+  const interval = 1e3 / (max ?? (size.width < 1024 ? 60 : 120));
+  useFrame((st, delta) => {
+    if (performance.now() - last.current > interval) {
+      last.current = performance.now();
+      cb(st, delta);
+    }
+  });
 }
-//# sourceMappingURL=use-capped-frame.js.map

package/dist/hooks/use-css-var-dims.d.ts

@@ -1,2 +1 @@
 export declare function useCssVarDims(name: string, ref: React.RefObject<HTMLElement | null>): void;
-//# sourceMappingURL=use-css-var-dims.d.ts.map

package/dist/hooks/use-css-var-dims.js

@@ -1,23 +1,28 @@
-'use client';
-import { useEffect } from 'react';
+"use client";
+import { useEffect } from "react";
 export function useCssVarDims(name, ref) {
-    useEffect(() => {
-        if (!ref.current) {
-            return;
-        }
-        const update = (width, height) => {
-            document.documentElement.style.setProperty(`--${name}-width`, `${width}px`);
-            document.documentElement.style.setProperty(`--${name}-height`, `${height}px`);
-        };
-        const { height, width } = ref.current.getBoundingClientRect();
-        update(width, height);
-        const ro = new ResizeObserver(entries => {
-            for (const entry of entries) {
-                update(entry.contentRect.width, entry.contentRect.height);
-            }
-        });
-        ro.observe(ref.current);
-        return () => ro.disconnect();
-    }, [name, ref]);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const update = (width2, height2) => {
+      document.documentElement.style.setProperty(
+        `--${name}-width`,
+        `${width2}px`
+      );
+      document.documentElement.style.setProperty(
+        `--${name}-height`,
+        `${height2}px`
+      );
+    };
+    const { height, width } = ref.current.getBoundingClientRect();
+    update(width, height);
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        update(entry.contentRect.width, entry.contentRect.height);
+      }
+    });
+    ro.observe(ref.current);
+    return () => ro.disconnect();
+  }, [name, ref]);
 }
-//# sourceMappingURL=use-css-var-dims.js.map

package/dist/hooks/use-gpu-tier.d.ts

@@ -22,4 +22,3 @@ export declare const $gpuTier: import("nanostores").PreinitializedWritableAtom<G
 export declare function useGpuTier(): GpuTier;
 type GpuTier = 0 | 1 | 2;
 export {};
-//# sourceMappingURL=use-gpu-tier.d.ts.map

package/dist/hooks/use-gpu-tier.js

@@ -1,122 +1,102 @@
-'use client';
-import { useStore } from '@nanostores/react';
-import { atom } from 'nanostores';
-/**
- * Tiers:
- *  0 — no WebGL / software renderer / prefers-reduced-motion / WebGL ctx creation failed
- *  1 — low-end GPU (integrated, mobile, or failed perf benchmark)
- *  2 — capable GPU (discrete / high-end integrated)
- *
- * Detection runs **synchronously** the first time this module is evaluated
- * on the client (see the IIFE at the bottom of the file). That means any
- * consumer reading `$gpuTier` during its first render already sees the
- * post-detection value, so WebGL components can avoid trying to create a
- * `THREE.WebGLRenderer` on hardware where context creation will fail.
- *
- * The previous version ran the probe inside `nanostores`'s `onMount`
- * lifecycle, which fires from a microtask after the first listener
- * subscribes — i.e. after the first React commit. By that point overlay
- * components had already executed `new THREE.WebGLRenderer(...)` against
- * the optimistic default, logged `Error creating WebGL context`, and only
- * unmounted on a follow-up render. Eager module-load detection closes that
- * race.
- */
+"use client";
+import { useStore } from "@nanostores/react";
+import { atom } from "nanostores";
 export const $gpuTier = atom(2);
 const SOFTWARE_PATTERNS = /swiftshader|llvmpipe|softpipe|software|microsoft basic/i;
 const LOW_END_PATTERNS = /intel.*hd|intel.*uhd|intel.*iris|mali|adreno\s?[1-5]|powervr|apple gpu/i;
 let detected = false;
 function detectGpuTier() {
-    if (detected || typeof window === 'undefined') {
-        return;
-    }
-    detected = true;
-    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
-        $gpuTier.set(0);
-        return;
-    }
-    let gl = null;
-    try {
-        const canvas = document.createElement('canvas');
-        gl = (canvas.getContext('webgl') ||
-            canvas.getContext('experimental-webgl'));
-    }
-    catch {
-        // Some sandboxed / hardened contexts throw on getContext rather than
-        // returning null (e.g. certain corporate browser policies). Treat as
-        // "no WebGL available".
-        $gpuTier.set(0);
-        return;
-    }
-    if (!gl) {
-        $gpuTier.set(0);
-        return;
-    }
-    const ext = gl.getExtension('WEBGL_debug_renderer_info');
-    const renderer = String(ext
-        ? gl.getParameter(ext.UNMASKED_RENDERER_WEBGL)
-        : gl.getParameter(gl.RENDERER));
-    if (SOFTWARE_PATTERNS.test(renderer)) {
-        $gpuTier.set(0);
-        gl.getExtension('WEBGL_lose_context')?.loseContext();
-        return;
-    }
-    if (LOW_END_PATTERNS.test(renderer)) {
-        $gpuTier.set(1);
-        gl.getExtension('WEBGL_lose_context')?.loseContext();
-        return;
-    }
-    $gpuTier.set(2);
-    runBenchmark(gl)
-        .then(fps => $gpuTier.set(fps < 30 ? 1 : 2))
-        .catch(() => $gpuTier.set(1))
-        .finally(() => gl?.getExtension('WEBGL_lose_context')?.loseContext());
+  if (detected || typeof window === "undefined") {
+    return;
+  }
+  detected = true;
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    $gpuTier.set(0);
+    return;
+  }
+  let gl = null;
+  try {
+    const canvas = document.createElement("canvas");
+    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+  } catch {
+    $gpuTier.set(0);
+    return;
+  }
+  if (!gl) {
+    $gpuTier.set(0);
+    return;
+  }
+  const ext = gl.getExtension("WEBGL_debug_renderer_info");
+  const renderer = String(
+    ext ? gl.getParameter(ext.UNMASKED_RENDERER_WEBGL) : gl.getParameter(gl.RENDERER)
+  );
+  if (SOFTWARE_PATTERNS.test(renderer)) {
+    $gpuTier.set(0);
+    gl.getExtension("WEBGL_lose_context")?.loseContext();
+    return;
+  }
+  if (LOW_END_PATTERNS.test(renderer)) {
+    $gpuTier.set(1);
+    gl.getExtension("WEBGL_lose_context")?.loseContext();
+    return;
+  }
+  $gpuTier.set(2);
+  runBenchmark(gl).then((fps) => $gpuTier.set(fps < 30 ? 1 : 2)).catch(() => $gpuTier.set(1)).finally(() => gl?.getExtension("WEBGL_lose_context")?.loseContext());
 }
-if (typeof window !== 'undefined') {
-    detectGpuTier();
+if (typeof window !== "undefined") {
+  detectGpuTier();
 }
 function runBenchmark(gl) {
-    return new Promise(resolve => {
-        const vs = gl.createShader(gl.VERTEX_SHADER);
-        const fs = gl.createShader(gl.FRAGMENT_SHADER);
-        gl.shaderSource(vs, 'attribute vec2 a;void main(){gl_Position=vec4(a,0,1);}');
-        gl.shaderSource(fs, 'precision highp float;uniform float t;void main(){float v=0.;for(int i=0;i<64;i++)v+=sin(float(i)*t*.01);gl_FragColor=vec4(v*.001);}');
-        gl.compileShader(vs);
-        gl.compileShader(fs);
-        const prog = gl.createProgram();
-        gl.attachShader(prog, vs);
-        gl.attachShader(prog, fs);
-        gl.linkProgram(prog);
-        gl.useProgram(prog);
-        const buf = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, buf);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
-        const a = gl.getAttribLocation(prog, 'a');
-        gl.enableVertexAttribArray(a);
-        gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0);
-        const uT = gl.getUniformLocation(prog, 't');
-        let frames = 0;
-        const start = performance.now();
-        const tick = () => {
-            gl.uniform1f(uT, frames);
-            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-            gl.finish();
-            frames++;
-            if (performance.now() - start < 200) {
-                requestAnimationFrame(tick);
-            }
-            else {
-                const elapsed = performance.now() - start;
-                gl.deleteProgram(prog);
-                gl.deleteShader(vs);
-                gl.deleteShader(fs);
-                gl.deleteBuffer(buf);
-                resolve((frames / elapsed) * 1000);
-            }
-        };
+  return new Promise((resolve) => {
+    const vs = gl.createShader(gl.VERTEX_SHADER);
+    const fs = gl.createShader(gl.FRAGMENT_SHADER);
+    gl.shaderSource(
+      vs,
+      "attribute vec2 a;void main(){gl_Position=vec4(a,0,1);}"
+    );
+    gl.shaderSource(
+      fs,
+      "precision highp float;uniform float t;void main(){float v=0.;for(int i=0;i<64;i++)v+=sin(float(i)*t*.01);gl_FragColor=vec4(v*.001);}"
+    );
+    gl.compileShader(vs);
+    gl.compileShader(fs);
+    const prog = gl.createProgram();
+    gl.attachShader(prog, vs);
+    gl.attachShader(prog, fs);
+    gl.linkProgram(prog);
+    gl.useProgram(prog);
+    const buf = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+      gl.STATIC_DRAW
+    );
+    const a = gl.getAttribLocation(prog, "a");
+    gl.enableVertexAttribArray(a);
+    gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 0, 0);
+    const uT = gl.getUniformLocation(prog, "t");
+    let frames = 0;
+    const start = performance.now();
+    const tick = () => {
+      gl.uniform1f(uT, frames);
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+      gl.finish();
+      frames++;
+      if (performance.now() - start < 200) {
         requestAnimationFrame(tick);
-    });
+      } else {
+        const elapsed = performance.now() - start;
+        gl.deleteProgram(prog);
+        gl.deleteShader(vs);
+        gl.deleteShader(fs);
+        gl.deleteBuffer(buf);
+        resolve(frames / elapsed * 1e3);
+      }
+    };
+    requestAnimationFrame(tick);
+  });
 }
 export function useGpuTier() {
-    return useStore($gpuTier);
+  return useStore($gpuTier);
 }
-//# sourceMappingURL=use-gpu-tier.js.map

package/dist/hooks/use-render-loop.d.ts

@@ -39,4 +39,3 @@ interface RunRenderLoopOptions {
 }
 export declare function runRenderLoop({ el, minIntervalMs, onFrame }: RunRenderLoopOptions): () => void;
 export {};
-//# sourceMappingURL=use-render-loop.d.ts.map

package/dist/hooks/use-render-loop.js

@@ -1,62 +1,62 @@
-'use client';
-export function runRenderLoop({ el, minIntervalMs = 0, onFrame }) {
-    let running = true;
-    let visible = !document.hidden;
-    let inView = true;
-    let last = performance.now();
-    let raf = 0;
-    let timer;
-    const onVisibility = () => {
-        visible = !document.hidden;
-        // When we come back from a hidden tab, reset the clock so the next
-        // frame's delta is ~one frame, not "hours since I was hidden".
-        if (visible) {
-            last = performance.now();
-            schedule();
-        }
-    };
-    const io = new IntersectionObserver(entries => {
-        const wasInView = inView;
-        inView = entries.some(e => e.isIntersecting);
-        if (!wasInView && inView) {
-            last = performance.now();
-            schedule();
-        }
-    }, { threshold: 0 });
-    io.observe(el);
-    document.addEventListener('visibilitychange', onVisibility);
-    const tick = () => {
-        if (!running)
-            return;
-        if (!visible || !inView) {
-            // Don't reschedule — we'll be re-kicked by visibilitychange or IO.
-            return;
-        }
-        const now = performance.now();
-        const delta = (now - last) / 1000;
-        last = now;
-        onFrame(delta);
+"use client";
+export function runRenderLoop({
+  el,
+  minIntervalMs = 0,
+  onFrame
+}) {
+  let running = true;
+  let visible = !document.hidden;
+  let inView = true;
+  let last = performance.now();
+  let raf = 0;
+  let timer;
+  const onVisibility = () => {
+    visible = !document.hidden;
+    if (visible) {
+      last = performance.now();
+      schedule();
+    }
+  };
+  const io = new IntersectionObserver(
+    (entries) => {
+      const wasInView = inView;
+      inView = entries.some((e) => e.isIntersecting);
+      if (!wasInView && inView) {
+        last = performance.now();
         schedule();
-    };
-    function schedule() {
-        if (!running || !visible || !inView)
-            return;
-        if (minIntervalMs > 0) {
-            timer = setTimeout(tick, minIntervalMs);
-        }
-        else {
-            raf = requestAnimationFrame(tick);
-        }
+      }
+    },
+    { threshold: 0 }
+  );
+  io.observe(el);
+  document.addEventListener("visibilitychange", onVisibility);
+  const tick = () => {
+    if (!running) return;
+    if (!visible || !inView) {
+      return;
     }
+    const now = performance.now();
+    const delta = (now - last) / 1e3;
+    last = now;
+    onFrame(delta);
     schedule();
-    return () => {
-        running = false;
-        io.disconnect();
-        document.removeEventListener('visibilitychange', onVisibility);
-        cancelAnimationFrame(raf);
-        if (timer !== undefined) {
-            clearTimeout(timer);
-        }
-    };
+  };
+  function schedule() {
+    if (!running || !visible || !inView) return;
+    if (minIntervalMs > 0) {
+      timer = setTimeout(tick, minIntervalMs);
+    } else {
+      raf = requestAnimationFrame(tick);
+    }
+  }
+  schedule();
+  return () => {
+    running = false;
+    io.disconnect();
+    document.removeEventListener("visibilitychange", onVisibility);
+    cancelAnimationFrame(raf);
+    if (timer !== void 0) {
+      clearTimeout(timer);
+    }
+  };
 }
-//# sourceMappingURL=use-render-loop.js.map

package/dist/hooks/use-smooth-controls.d.ts

@@ -14,4 +14,3 @@ type UseSmoothControlsOptions = Parameters<typeof useControls>[2] & {
     onReset?: () => void;
 };
 export {};
-//# sourceMappingURL=use-smooth-controls.d.ts.map