@nous-research/ui 0.13.2 → 0.14.0

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

@@ -1,65 +1,59 @@
-'use client';
-import { atom } from 'nanostores';
-import { setControlValue } from '../../../hooks/use-smooth-controls';
+"use client";
+import { atom } from "nanostores";
+import { setControlValue } from "../../../hooks/use-smooth-controls.js";
 export const LENS_0 = {
-    Globe: { innerColor: '#170d02', innerOpacity: 0.1, outerColor: '#FFAC02' },
-    Lens: {
-        bgBlend: 'difference',
-        bgColor: '#041C1C',
-        bgOpacity: 1,
-        fgColor: '#FFFFFF',
-        fgOpacity: 0,
-        fillerOpacity: 0.033,
-        mgColor: '#ffe6cb',
-        mgOpacity: 1
-    }
+  Globe: { innerColor: "#170d02", innerOpacity: 0.1, outerColor: "#FFAC02" },
+  Lens: {
+    bgBlend: "difference",
+    bgColor: "#041C1C",
+    bgOpacity: 1,
+    fgColor: "#FFFFFF",
+    fgOpacity: 0,
+    fillerOpacity: 0.033,
+    mgColor: "#ffe6cb",
+    mgOpacity: 1
+  }
 };
 export const LENS_5I = {
-    Globe: { innerColor: '#170d02', innerOpacity: 0.3, outerColor: '#FFAC02' },
-    Lens: {
-        bgBlend: 'multiply',
-        bgColor: '#170d02',
-        bgOpacity: 1,
-        fgColor: '#FFFFFF',
-        fgOpacity: 1,
-        fillerOpacity: 0.06,
-        mgColor: '#FFAC02',
-        mgOpacity: 1
-    }
+  Globe: { innerColor: "#170d02", innerOpacity: 0.3, outerColor: "#FFAC02" },
+  Lens: {
+    bgBlend: "multiply",
+    bgColor: "#170d02",
+    bgOpacity: 1,
+    fgColor: "#FFFFFF",
+    fgOpacity: 1,
+    fillerOpacity: 0.06,
+    mgColor: "#FFAC02",
+    mgOpacity: 1
+  }
 };
 export const lens0 = (l, g) => ({
-    Globe: { ...LENS_0.Globe, ...g },
-    Lens: { ...LENS_0.Lens, ...l }
+  Globe: { ...LENS_0.Globe, ...g },
+  Lens: { ...LENS_0.Lens, ...l }
 });
-// The Hermes light-mode look is produced by a fullscreen opaque-white
-// `mix-blend-mode: difference` foreground layer that inverts everything.
-// Colored lenses that want a "white + accent" look MUST be built from
-// LENS_5I, not LENS_0 — otherwise `bgBlend: 'difference'` + an opaque
-// colored bg + active fg inversion land halfway between dark and light
-// mode and produce a muddy warm wash instead of a clean inversion.
 export const lens5i = (l, g) => ({
-    Globe: { ...LENS_5I.Globe, ...g },
-    Lens: { ...LENS_5I.Lens, ...l }
+  Globe: { ...LENS_5I.Globe, ...g },
+  Lens: { ...LENS_5I.Lens, ...l }
 });
-// Accent colors are the *pre-inversion* source; after the difference FG
-// layer they read as their visual complement. e.g. `#FFAC02` (orange)
-// renders as blue #0053FD on screen — that's the default LENS_5I accent.
 export const LENSES = [
-    ['0', LENS_0],
-    ['1', lens0({ bgColor: '#0A1F1F' })],
-    ['2', lens0({ bgColor: '#0E0313', mgColor: '#e6cbff' })],
-    ['3', lens5i({ mgColor: '#FFAC02' })],
-    ['4', lens5i({ bgColor: '#0E0313', mgColor: '#FF5500' })],
-    ['5', lens0({ bgColor: '#1540B1', bgOpacity: 0.7 })],
-    ['5i', LENS_5I],
-    ['6', lens5i({ bgColor: '#170D02', mgColor: '#00E5FF' })]
+  ["0", LENS_0],
+  ["1", lens0({ bgColor: "#0A1F1F" })],
+  ["2", lens0({ bgColor: "#0E0313", mgColor: "#e6cbff" })],
+  ["3", lens5i({ mgColor: "#FFAC02" })],
+  ["4", lens5i({ bgColor: "#0E0313", mgColor: "#FF5500" })],
+  ["5", lens0({ bgColor: "#1540B1", bgOpacity: 0.7 })],
+  ["5i", LENS_5I],
+  ["6", lens5i({ bgColor: "#170D02", mgColor: "#00E5FF" })]
 ];
-export const applyLens = (preset, animate = false) => Object.entries(preset).forEach(([g, v]) => Object.entries(v).forEach(([k, val]) => setControlValue(g, k, val, { animate })));
+export const applyLens = (preset, animate = false) => Object.entries(preset).forEach(
+  ([g, v]) => Object.entries(v).forEach(
+    ([k, val]) => setControlValue(g, k, val, { animate })
+  )
+);
 export const $lightMode = atom(true);
 export const toggleLens = () => {
-    const isLight = $lightMode.get();
-    const next = isLight ? LENS_0 : LENS_5I;
-    $lightMode.set(!isLight);
-    applyLens(next, true);
+  const isLight = $lightMode.get();
+  const next = isLight ? LENS_0 : LENS_5I;
+  $lightMode.set(!isLight);
+  applyLens(next, true);
 };
-//# sourceMappingURL=lens.js.map

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

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

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

@@ -1,19 +1,24 @@
-'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 { useSmoothControls } from '../../../hooks/use-smooth-controls';
-import { cn, hexToVec3 } 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 { useSmoothControls } from "../../../hooks/use-smooth-controls.js";
+import { cn, hexToVec3 } 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 vec2 uRes;
   uniform float uDpr, uSize, uDensity, uOpacity;
   uniform vec3 uColor;
@@ -29,108 +34,102 @@ const frag = /*glsl*/ `
     float n = hash(floor(vUv * uRes / (uSize * uDpr)));
     gl_FragColor = vec4(uColor, step(1.0 - uDensity, n)) * uOpacity;
   }
-`;
+`
+);
 export function Noise({ className, style }) {
-    const gpuTier = useGpuTier();
-    const c = useSmoothControls('Effects/Noise', {
-        blend: { options: BLEND_MODES, value: 'color-dodge' },
-        color: { value: '#eaeaea' },
-        density: { max: 1, min: 0, step: 0.01, value: 0.11 },
-        enabled: { value: true },
-        opacity: { max: 1, min: 0, step: 0.01, value: 0.55 },
-        size: { max: 10, min: 0.1, step: 0.1, value: 1 }
-    }, { collapsed: true });
-    const canvasRef = useRef(null);
-    const enabled = c.enabled && gpuTier > 0;
-    // The noise shader is fully deterministic: given the same uniforms it
-    // produces an identical output every frame. The previous version ran
-    // it at 60fps forever, which on a retina display with mix-blend-mode
-    // is enough to peg the GPU/compositor for the entire lifetime of the
-    // page (this is the dominant contributor to the "fans go crazy after
-    // a few hours of idle" symptom).
-    //
-    // Instead we render exactly once on mount, and re-render only when
-    // the user-controllable uniforms change or the viewport resizes.
-    useEffect(() => {
-        if (!canvasRef.current || !enabled) {
-            return;
-        }
-        let renderer;
-        try {
-            renderer = new THREE.WebGLRenderer({
-                alpha: true,
-                canvas: canvasRef.current,
-                premultipliedAlpha: false
-            });
-        }
-        catch {
-            $gpuTier.set(0);
-            return;
-        }
-        renderer.setClearColor(0x000000, 0);
-        const scene = new THREE.Scene();
-        const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
-        const geo = new THREE.PlaneGeometry(2, 2);
-        const mat = new THREE.ShaderMaterial({
-            fragmentShader: frag,
-            transparent: true,
-            uniforms: {
-                uColor: { value: hexToVec3(c.color) },
-                uDensity: { value: c.density },
-                uDpr: { value: 1 },
-                uOpacity: { value: c.opacity },
-                uRes: { value: new THREE.Vector2() },
-                uSize: { value: c.size }
-            },
-            vertexShader: vert
-        });
-        scene.add(new THREE.Mesh(geo, mat));
-        // Cap pixel ratio at 1.5 — noise is intentionally pixelated, so the
-        // extra retina samples are wasted fillrate.
-        const dpr = Math.min(devicePixelRatio, 1.5);
-        const render = () => {
-            mat.uniforms.uColor.value = hexToVec3(c.color);
-            mat.uniforms.uDensity.value = c.density;
-            mat.uniforms.uOpacity.value = c.opacity;
-            mat.uniforms.uSize.value = c.size;
-            mat.uniforms.uDpr.value = dpr;
-            renderer.render(scene, camera);
-        };
-        const resize = () => {
-            renderer.setSize(innerWidth, innerHeight);
-            renderer.setPixelRatio(dpr);
-            mat.uniforms.uRes.value.set(innerWidth * dpr, innerHeight * dpr);
-            render();
-        };
-        resize();
-        window.addEventListener('resize', resize);
-        // Re-render when the tab becomes visible again, in case the GL
-        // context was discarded by the browser while the page was
-        // backgrounded — otherwise we can come back to a transparent canvas.
-        const onVisibility = () => {
-            if (!document.hidden)
-                render();
-        };
-        document.addEventListener('visibilitychange', onVisibility);
-        return () => {
-            window.removeEventListener('resize', resize);
-            document.removeEventListener('visibilitychange', onVisibility);
-            mat.dispose();
-            geo.dispose();
-            renderer.dispose();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        enabled,
-        gpuTier,
-        c.color,
-        c.density,
-        c.opacity,
-        c.size
-    ]);
-    if (!enabled) {
-        return null;
+  const gpuTier = useGpuTier();
+  const c = useSmoothControls(
+    "Effects/Noise",
+    {
+      blend: { options: BLEND_MODES, value: "color-dodge" },
+      color: { value: "#eaeaea" },
+      density: { max: 1, min: 0, step: 0.01, value: 0.11 },
+      enabled: { value: true },
+      opacity: { max: 1, min: 0, step: 0.01, value: 0.55 },
+      size: { max: 10, min: 0.1, step: 0.1, value: 1 }
+    },
+    { collapsed: true }
+  );
+  const canvasRef = useRef(null);
+  const enabled = c.enabled && gpuTier > 0;
+  useEffect(() => {
+    if (!canvasRef.current || !enabled) {
+      return;
     }
-    return (_jsx("canvas", { className: cn('h-full w-full', className), ref: canvasRef, style: { mixBlendMode: c.blend, ...style } }));
+    let renderer;
+    try {
+      renderer = new THREE.WebGLRenderer({
+        alpha: true,
+        canvas: canvasRef.current,
+        premultipliedAlpha: false
+      });
+    } catch {
+      $gpuTier.set(0);
+      return;
+    }
+    renderer.setClearColor(0, 0);
+    const scene = new THREE.Scene();
+    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+    const geo = new THREE.PlaneGeometry(2, 2);
+    const mat = new THREE.ShaderMaterial({
+      fragmentShader: frag,
+      transparent: true,
+      uniforms: {
+        uColor: { value: hexToVec3(c.color) },
+        uDensity: { value: c.density },
+        uDpr: { value: 1 },
+        uOpacity: { value: c.opacity },
+        uRes: { value: new THREE.Vector2() },
+        uSize: { value: c.size }
+      },
+      vertexShader: vert
+    });
+    scene.add(new THREE.Mesh(geo, mat));
+    const dpr = Math.min(devicePixelRatio, 1.5);
+    const render = () => {
+      mat.uniforms.uColor.value = hexToVec3(c.color);
+      mat.uniforms.uDensity.value = c.density;
+      mat.uniforms.uOpacity.value = c.opacity;
+      mat.uniforms.uSize.value = c.size;
+      mat.uniforms.uDpr.value = dpr;
+      renderer.render(scene, camera);
+    };
+    const resize = () => {
+      renderer.setSize(innerWidth, innerHeight);
+      renderer.setPixelRatio(dpr);
+      mat.uniforms.uRes.value.set(innerWidth * dpr, innerHeight * dpr);
+      render();
+    };
+    resize();
+    window.addEventListener("resize", resize);
+    const onVisibility = () => {
+      if (!document.hidden) render();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      window.removeEventListener("resize", resize);
+      document.removeEventListener("visibilitychange", onVisibility);
+      mat.dispose();
+      geo.dispose();
+      renderer.dispose();
+    };
+  }, [
+    enabled,
+    gpuTier,
+    c.color,
+    c.density,
+    c.opacity,
+    c.size
+  ]);
+  if (!enabled) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      className: cn("h-full w-full", className),
+      ref: canvasRef,
+      style: { mixBlendMode: c.blend, ...style }
+    }
+  );
 }
-//# sourceMappingURL=noise.js.map

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

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

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

@@ -1,40 +1,46 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useSmoothControls } from '../../../hooks/use-smooth-controls';
-import { cn } from '../../../utils';
-import { hexToRgb } from '../../../utils/color';
-import { BLEND_MODES } from './blend-modes';
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useSmoothControls } from "../../../hooks/use-smooth-controls.js";
+import { cn } from "../../../utils/index.js";
+import { hexToRgb } from "../../../utils/color.js";
+import { BLEND_MODES } from "./blend-modes.js";
 export function Vignette({ className, style }) {
-    const c = useSmoothControls('Effects/Vignette', {
-        blend: { options: BLEND_MODES, value: 'lighten' },
-        bottomLeft: { max: 1, min: 0, step: 0.01, value: 0 },
-        bottomRight: { max: 1, min: 0, step: 0.01, value: 0 },
-        color: { value: '#ffbd38' },
-        enabled: { value: true },
-        opacity: { max: 1, min: 0, step: 0.01, value: 0.22 },
-        size: { max: 1, min: 0, step: 0.01, value: 1 },
-        topLeft: { max: 1, min: 0, step: 0.01, value: 0.35 },
-        topRight: { max: 1, min: 0, step: 0.01, value: 0 }
-    }, { collapsed: true });
-    if (!c.enabled)
-        return null;
-    const rgb = hexToRgb(c.color);
-    const s = c.size * 60;
-    const grad = (x, y, i) => i > 0 &&
-        `radial-gradient(ellipse at ${x}% ${y}%, rgba(${rgb},0) ${s}%, rgba(${rgb},${i}) 100%)`;
-    const bg = [
-        grad(0, 0, c.topLeft),
-        grad(100, 0, c.topRight),
-        grad(0, 100, c.bottomLeft),
-        grad(100, 100, c.bottomRight)
-    ].filter(Boolean);
-    if (!bg.length)
-        return null;
-    return (_jsx("div", { className: cn('h-full w-full', className), style: {
-            background: bg.join(', '),
-            mixBlendMode: c.blend,
-            opacity: c.opacity,
-            ...style
-        } }));
+  const c = useSmoothControls(
+    "Effects/Vignette",
+    {
+      blend: { options: BLEND_MODES, value: "lighten" },
+      bottomLeft: { max: 1, min: 0, step: 0.01, value: 0 },
+      bottomRight: { max: 1, min: 0, step: 0.01, value: 0 },
+      color: { value: "#ffbd38" },
+      enabled: { value: true },
+      opacity: { max: 1, min: 0, step: 0.01, value: 0.22 },
+      size: { max: 1, min: 0, step: 0.01, value: 1 },
+      topLeft: { max: 1, min: 0, step: 0.01, value: 0.35 },
+      topRight: { max: 1, min: 0, step: 0.01, value: 0 }
+    },
+    { collapsed: true }
+  );
+  if (!c.enabled) return null;
+  const rgb = hexToRgb(c.color);
+  const s = c.size * 60;
+  const grad = (x, y, i) => i > 0 && `radial-gradient(ellipse at ${x}% ${y}%, rgba(${rgb},0) ${s}%, rgba(${rgb},${i}) 100%)`;
+  const bg = [
+    grad(0, 0, c.topLeft),
+    grad(100, 0, c.topRight),
+    grad(0, 100, c.bottomLeft),
+    grad(100, 100, c.bottomRight)
+  ].filter(Boolean);
+  if (!bg.length) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("h-full w-full", className),
+      style: {
+        background: bg.join(", "),
+        mixBlendMode: c.blend,
+        opacity: c.opacity,
+        ...style
+      }
+    }
+  );
 }
-//# sourceMappingURL=vignette.js.map

package/dist/ui/components/poster.d.ts

@@ -12,7 +12,7 @@ import type { AutoPlayPattern } from './image-distortion';
  * - `'dispatch'`: broadcast-card layout with sidebar copy, numbered tags,
  *   and chrome — for when the poster needs to carry information.
  */
-export declare function Poster({ aspect, autoPlay, body, border, channel, children, className, cornerMarks, eyebrow, headline, layout, scale, seal, signature, src, tags, tint, tintStrength, variant, ...rest }: PosterProps): import("react/jsx-runtime").JSX.Element;
+export declare function Poster({ aspect, autoPlay, body, border, channel, children, className, cornerMarks, eyebrow, headline, layout, scale, seal, signature, src, tags, tint, tintStrength, variant, ...rest }: PosterProps): import("react").JSX.Element;
 export type PosterAspect = 'landscape' | 'portrait' | 'square' | 'story' | 'wide';
 export type PosterVariant = 'dispatch' | 'vibe';
 export interface PosterProps {
@@ -60,4 +60,3 @@ export interface PosterProps {
     /** Layout variant. `'vibe'` (default) is full-bleed image; `'dispatch'` is the broadcast-card with sidebar copy. */
     variant?: PosterVariant;
 }
-//# sourceMappingURL=poster.d.ts.map