@nous-research/ui 0.13.2 → 0.14.1

package/dist/ui/components/modal/index.d.ts

@@ -1,4 +1,4 @@
-export declare function Modal({ children, className, id, trigger, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, className, id, trigger, ...props }: ModalProps): import("react").JSX.Element;
 interface ModalProps extends Omit<React.ComponentProps<'dialog'>, 'open'> {
     trigger: (controls: {
         close: () => void;
@@ -6,4 +6,3 @@ interface ModalProps extends Omit<React.ComponentProps<'dialog'>, 'open'> {
     }) => React.ReactNode;
 }
 export {};
-//# sourceMappingURL=index.d.ts.map

package/dist/ui/components/modal/index.js

@@ -1,15 +1,34 @@
-'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { cn } from '../../../utils';
-export function Modal({ children, className, id, trigger, ...props }) {
-    const ref = useRef(null);
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => setMounted(true), []);
-    const open = useCallback(() => ref.current?.showModal(), []);
-    const close = useCallback(() => ref.current?.close(), []);
-    return (_jsxs(_Fragment, { children: [trigger({ close, open }), mounted &&
-                createPortal(_jsx("dialog", { className: cn('modal', className), onClick: e => e.target === e.currentTarget && close(), id, ref, ...props, children: _jsx("div", { className: "modal-body post", children: children }) }), document.body)] }));
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../../utils/index.js";
+export function Modal({
+  children,
+  className,
+  id,
+  trigger,
+  ...props
+}) {
+  const ref = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const open = useCallback(() => ref.current?.showModal(), []);
+  const close = useCallback(() => ref.current?.close(), []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger({ close, open }),
+    mounted && createPortal(
+      /* @__PURE__ */ jsx(
+        "dialog",
+        {
+          className: cn("modal", className),
+          onClick: (e) => e.target === e.currentTarget && close(),
+          ...{ id, ref },
+          ...props,
+          children: /* @__PURE__ */ jsx("div", { className: "modal-body post", children })
+        }
+      ),
+      document.body
+    )
+  ] });
 }
-//# sourceMappingURL=index.js.map

package/dist/ui/components/overlays/blend-modes.d.ts

@@ -1,2 +1 @@
 export declare const BLEND_MODES: React.CSSProperties["mixBlendMode"][];
-//# sourceMappingURL=blend-modes.d.ts.map

package/dist/ui/components/overlays/blend-modes.js

@@ -1,14 +1,13 @@
 export const BLEND_MODES = [
-    'overlay',
-    'multiply',
-    'screen',
-    'difference',
-    'exclusion',
-    'color-dodge',
-    'color-burn',
-    'hard-light',
-    'soft-light',
-    'darken',
-    'lighten'
+  "overlay",
+  "multiply",
+  "screen",
+  "difference",
+  "exclusion",
+  "color-dodge",
+  "color-burn",
+  "hard-light",
+  "soft-light",
+  "darken",
+  "lighten"
 ];
-//# sourceMappingURL=blend-modes.js.map

package/dist/ui/components/overlays/glitch.d.ts

@@ -1,7 +1,6 @@
-export declare function Glitch({ className, style }: GlitchProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Glitch({ className, style }: GlitchProps): import("react").JSX.Element | null;
 interface GlitchProps {
     className?: string;
     style?: React.CSSProperties;
 }
 export {};
-//# sourceMappingURL=glitch.d.ts.map

package/dist/ui/components/overlays/glitch.js

@@ -1,20 +1,25 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import * as THREE from 'three';
-import { $gpuTier, useGpuTier } from '../../../hooks/use-gpu-tier';
-import { runRenderLoop } from '../../../hooks/use-render-loop';
-import { useSmoothControls } from '../../../hooks/use-smooth-controls';
-import { cn } from '../../../utils';
-import { BLEND_MODES } from './blend-modes';
-const vert = /*glsl*/ `
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import * as THREE from "three";
+import { $gpuTier, useGpuTier } from "../../../hooks/use-gpu-tier.js";
+import { runRenderLoop } from "../../../hooks/use-render-loop.js";
+import { useSmoothControls } from "../../../hooks/use-smooth-controls.js";
+import { cn } from "../../../utils/index.js";
+import { BLEND_MODES } from "./blend-modes.js";
+const vert = (
+  /*glsl*/
+  `
   varying vec2 vUv;
   void main() {
     vUv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
   }
-`;
-const frag = /*glsl*/ `
+`
+);
+const frag = (
+  /*glsl*/
+  `
   uniform float uTime, uAlpha, uIntensity, uChroma, uSpeed, uSparsity;
   uniform vec3 uColor;
   varying vec2 vUv;
@@ -100,104 +105,104 @@ const frag = /*glsl*/ `
 
     gl_FragColor = vec4(col * uAlpha, max(col.r, max(col.g, col.b)) * uAlpha);
   }
-`;
+`
+);
 export function Glitch({ className, style }) {
-    const gpuTier = useGpuTier();
-    const c = useSmoothControls('Effects/Glitch', {
-        alpha: { max: 2, min: 0, step: 0.01, value: 0.25 },
-        blend: { options: BLEND_MODES, value: 'difference' },
-        chroma: { max: 3, min: 0, step: 0.01, value: 1.17 },
-        color: { value: '#ffe6cb' },
-        enabled: { value: true },
-        intensity: { max: 1, min: 0, step: 0.01, value: 0.59 },
-        sparsity: { max: 1, min: 0, step: 0.01, value: 0.21 },
-        speed: { max: 10, min: 0.1, step: 0.1, value: 1 }
-    }, { collapsed: true });
-    const ref = useRef(null);
-    const cRef = useRef(c);
-    cRef.current = c;
-    const enabled = c.enabled && gpuTier > 0;
-    useEffect(() => {
-        if (!ref.current || !enabled) {
-            return;
-        }
-        let renderer;
-        try {
-            renderer = new THREE.WebGLRenderer({
-                alpha: true,
-                canvas: ref.current
-            });
-        }
-        catch {
-            // See note in noise.tsx — eager gpu-tier detection should keep us
-            // out of here, but if the driver fails the renderer constructor
-            // anyway, downgrade so other overlays stop trying too.
-            $gpuTier.set(0);
-            return;
-        }
-        const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
-        const geo = new THREE.PlaneGeometry(2, 2);
-        const scene = new THREE.Scene();
-        const mat = new THREE.ShaderMaterial({
-            fragmentShader: frag,
-            transparent: true,
-            uniforms: {
-                uAlpha: { value: c.alpha },
-                uChroma: { value: c.chroma },
-                uColor: { value: new THREE.Color(c.color) },
-                uIntensity: { value: c.intensity },
-                uSparsity: { value: c.sparsity },
-                uSpeed: { value: c.speed },
-                uTime: { value: 0 }
-            },
-            vertexShader: vert
-        });
-        scene.add(new THREE.Mesh(geo, mat));
-        const resize = () => {
-            renderer.setSize(innerWidth, innerHeight);
-            // Cap DPR at 1.5 — at full retina (2x) the glitch shader is one
-            // of the heaviest fillrate consumers in the app, and the visual
-            // difference is tiny because it's a chromatic-noise effect.
-            renderer.setPixelRatio(Math.min(devicePixelRatio, 1.5));
-        };
-        resize();
-        window.addEventListener('resize', resize);
-        let time = 0;
-        // gpu-tier 1 → ~10fps (legacy), gpu-tier 2 → ~30fps (was 60fps).
-        // Glitch is a background ambient effect; users won't notice 30 vs
-        // 60 but the GPU absolutely will.
-        const minIntervalMs = gpuTier === 1 ? 100 : 33;
-        const dispose = runRenderLoop({
-            el: ref.current,
-            minIntervalMs,
-            onFrame: deltaSeconds => {
-                time += deltaSeconds;
-                const v = cRef.current;
-                mat.uniforms.uTime.value = time;
-                mat.uniforms.uAlpha.value = v.alpha;
-                mat.uniforms.uChroma.value = v.chroma;
-                mat.uniforms.uIntensity.value = v.intensity;
-                mat.uniforms.uSparsity.value = v.sparsity;
-                mat.uniforms.uSpeed.value = v.speed;
-                mat.uniforms.uColor.value.set(v.color);
-                renderer.render(scene, camera);
-            }
-        });
-        return () => {
-            window.removeEventListener('resize', resize);
-            dispose();
-            mat.dispose();
-            geo.dispose();
-            renderer.dispose();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [enabled, gpuTier]);
-    if (!enabled) {
-        return null;
+  const gpuTier = useGpuTier();
+  const c = useSmoothControls(
+    "Effects/Glitch",
+    {
+      alpha: { max: 2, min: 0, step: 0.01, value: 0.25 },
+      blend: { options: BLEND_MODES, value: "difference" },
+      chroma: { max: 3, min: 0, step: 0.01, value: 1.17 },
+      color: { value: "#ffe6cb" },
+      enabled: { value: true },
+      intensity: { max: 1, min: 0, step: 0.01, value: 0.59 },
+      sparsity: { max: 1, min: 0, step: 0.01, value: 0.21 },
+      speed: { max: 10, min: 0.1, step: 0.1, value: 1 }
+    },
+    { collapsed: true }
+  );
+  const ref = useRef(null);
+  const cRef = useRef(c);
+  cRef.current = c;
+  const enabled = c.enabled && gpuTier > 0;
+  useEffect(() => {
+    if (!ref.current || !enabled) {
+      return;
     }
-    return (_jsx("canvas", { className: cn('h-full w-full', className), ref: ref, style: {
-            mixBlendMode: c.blend,
-            ...style
-        } }));
+    let renderer;
+    try {
+      renderer = new THREE.WebGLRenderer({
+        alpha: true,
+        canvas: ref.current
+      });
+    } catch {
+      $gpuTier.set(0);
+      return;
+    }
+    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    const geo = new THREE.PlaneGeometry(2, 2);
+    const scene = new THREE.Scene();
+    const mat = new THREE.ShaderMaterial({
+      fragmentShader: frag,
+      transparent: true,
+      uniforms: {
+        uAlpha: { value: c.alpha },
+        uChroma: { value: c.chroma },
+        uColor: { value: new THREE.Color(c.color) },
+        uIntensity: { value: c.intensity },
+        uSparsity: { value: c.sparsity },
+        uSpeed: { value: c.speed },
+        uTime: { value: 0 }
+      },
+      vertexShader: vert
+    });
+    scene.add(new THREE.Mesh(geo, mat));
+    const resize = () => {
+      renderer.setSize(innerWidth, innerHeight);
+      renderer.setPixelRatio(Math.min(devicePixelRatio, 1.5));
+    };
+    resize();
+    window.addEventListener("resize", resize);
+    let time = 0;
+    const minIntervalMs = gpuTier === 1 ? 100 : 33;
+    const dispose = runRenderLoop({
+      el: ref.current,
+      minIntervalMs,
+      onFrame: (deltaSeconds) => {
+        time += deltaSeconds;
+        const v = cRef.current;
+        mat.uniforms.uTime.value = time;
+        mat.uniforms.uAlpha.value = v.alpha;
+        mat.uniforms.uChroma.value = v.chroma;
+        mat.uniforms.uIntensity.value = v.intensity;
+        mat.uniforms.uSparsity.value = v.sparsity;
+        mat.uniforms.uSpeed.value = v.speed;
+        mat.uniforms.uColor.value.set(v.color);
+        renderer.render(scene, camera);
+      }
+    });
+    return () => {
+      window.removeEventListener("resize", resize);
+      dispose();
+      mat.dispose();
+      geo.dispose();
+      renderer.dispose();
+    };
+  }, [enabled, gpuTier]);
+  if (!enabled) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      className: cn("h-full w-full", className),
+      ref,
+      style: {
+        mixBlendMode: c.blend,
+        ...style
+      }
+    }
+  );
 }
-//# sourceMappingURL=glitch.js.map

package/dist/ui/components/overlays/greys.d.ts

@@ -1,7 +1,6 @@
-export declare function Greys({ className, style }: GreysProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Greys({ className, style }: GreysProps): import("react").JSX.Element | null;
 interface GreysProps {
     className?: string;
     style?: React.CSSProperties;
 }
 export {};
-//# sourceMappingURL=greys.d.ts.map