@nous-research/ui 0.13.2 → 0.14.1

package/dist/ui/components/scene-canvas.js

@@ -1,128 +1,178 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Canvas, useFrame, useThree } from '@react-three/fiber';
-import { Suspense, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import * as THREE from 'three';
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import {
+  Suspense,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import * as THREE from "three";
 const GL = {
-    alpha: true,
-    antialias: true,
-    depth: true,
-    outputColorSpace: 'srgb',
-    powerPreference: 'high-performance',
-    stencil: false
+  alpha: true,
+  antialias: true,
+  depth: true,
+  outputColorSpace: "srgb",
+  powerPreference: "high-performance",
+  stencil: false
 };
 const tmp = {
-    camDir: new THREE.Vector3(),
-    hit: new THREE.Vector3(),
-    ndc: new THREE.Vector2(),
-    origin: new THREE.Vector3(0, 0, 0),
-    plane: new THREE.Plane(),
-    ray: new THREE.Raycaster()
+  camDir: new THREE.Vector3(),
+  hit: new THREE.Vector3(),
+  ndc: new THREE.Vector2(),
+  origin: new THREE.Vector3(0, 0, 0),
+  plane: new THREE.Plane(),
+  ray: new THREE.Raycaster()
 };
 function useBounds(target) {
-    const bounds = useRef(null);
-    useLayoutEffect(() => {
-        if (!target) {
-            return;
-        }
-        const measure = () => {
-            const b = target.getBoundingClientRect();
-            bounds.current = {
-                height: b.height,
-                pageX: b.left + window.scrollX,
-                pageY: b.top + window.scrollY,
-                width: b.width
-            };
-        };
-        measure();
-        const ro = new ResizeObserver(measure);
-        ro.observe(target);
-        ro.observe(document.body);
-        window.addEventListener('resize', measure, { passive: true });
-        return () => {
-            ro.disconnect();
-            window.removeEventListener('resize', measure);
-        };
-    }, [target]);
-    return bounds;
+  const bounds = useRef(null);
+  useLayoutEffect(() => {
+    if (!target) {
+      return;
+    }
+    const measure = () => {
+      const b = target.getBoundingClientRect();
+      bounds.current = {
+        height: b.height,
+        pageX: b.left + window.scrollX,
+        pageY: b.top + window.scrollY,
+        width: b.width
+      };
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(target);
+    ro.observe(document.body);
+    window.addEventListener("resize", measure, { passive: true });
+    return () => {
+      ro.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [target]);
+  return bounds;
 }
-function PositionedGroup({ baseZoom, bounds, children }) {
-    const ref = useRef(null);
-    const { camera, size, viewport } = useThree();
-    useFrame(() => {
-        const g = ref.current;
-        const b = bounds.current;
-        if (!g || !b) {
-            return;
-        }
-        const left = b.pageX - window.scrollX;
-        const top = b.pageY - window.scrollY;
-        tmp.ndc.set(((left + b.width / 2) / size.width) * 2 - 1, 1 - ((top + b.height / 2) / size.height) * 2);
-        camera.getWorldDirection(tmp.camDir);
-        tmp.plane.setFromNormalAndCoplanarPoint(tmp.camDir, tmp.origin);
-        tmp.ray.setFromCamera(tmp.ndc, camera);
-        const hit = tmp.ray.ray.intersectPlane(tmp.plane, tmp.hit);
-        if (hit) {
-            g.position.copy(hit);
-        }
-        const zoom = camera.zoom ?? 1;
-        g.scale.setScalar(Math.min((b.width / size.width) * viewport.width, (b.height / size.height) * viewport.height) * (baseZoom > 0 ? zoom / baseZoom : 1));
-    });
-    return _jsx("group", { ref: ref, children: children });
+function PositionedGroup({
+  baseZoom,
+  bounds,
+  children
+}) {
+  const ref = useRef(null);
+  const { camera, size, viewport } = useThree();
+  useFrame(() => {
+    const g = ref.current;
+    const b = bounds.current;
+    if (!g || !b) {
+      return;
+    }
+    const left = b.pageX - window.scrollX;
+    const top = b.pageY - window.scrollY;
+    tmp.ndc.set(
+      (left + b.width / 2) / size.width * 2 - 1,
+      1 - (top + b.height / 2) / size.height * 2
+    );
+    camera.getWorldDirection(tmp.camDir);
+    tmp.plane.setFromNormalAndCoplanarPoint(tmp.camDir, tmp.origin);
+    tmp.ray.setFromCamera(tmp.ndc, camera);
+    const hit = tmp.ray.ray.intersectPlane(tmp.plane, tmp.hit);
+    if (hit) {
+      g.position.copy(hit);
+    }
+    const zoom = camera.zoom ?? 1;
+    g.scale.setScalar(
+      Math.min(
+        b.width / size.width * viewport.width,
+        b.height / size.height * viewport.height
+      ) * (baseZoom > 0 ? zoom / baseZoom : 1)
+    );
+  });
+  return /* @__PURE__ */ jsx("group", { ref, children });
 }
-export function SceneCanvas({ camera, children, className, contained, frameloop = 'always', noEvents, style }) {
-    const [container, setContainer] = useState(null);
-    const baseZoom = camera?.zoom ?? 150;
-    const bounds = useBounds(contained ? (container?.parentElement ?? null) : null);
-    useEffect(() => {
-        const el = contained && !noEvents ? container : null;
-        if (!el) {
-            return;
+export function SceneCanvas({
+  camera,
+  children,
+  className,
+  contained,
+  frameloop = "always",
+  noEvents,
+  style
+}) {
+  const [container, setContainer] = useState(null);
+  const baseZoom = camera?.zoom ?? 150;
+  const bounds = useBounds(
+    contained ? container?.parentElement ?? null : null
+  );
+  useEffect(() => {
+    const el = contained && !noEvents ? container : null;
+    if (!el) {
+      return;
+    }
+    const lock = () => document.body.style.userSelect = "none";
+    const unlock = () => document.body.style.userSelect = "";
+    el.addEventListener("pointerdown", lock);
+    window.addEventListener("pointerup", unlock);
+    return () => {
+      el.removeEventListener("pointerdown", lock);
+      window.removeEventListener("pointerup", unlock);
+    };
+  }, [container, contained, noEvents]);
+  const [pageHidden, setPageHidden] = useState(
+    typeof document !== "undefined" && document.hidden
+  );
+  useEffect(() => {
+    const onVisibility = () => setPageHidden(document.hidden);
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => document.removeEventListener("visibilitychange", onVisibility);
+  }, []);
+  const effectiveFrameloop = pageHidden ? "never" : frameloop;
+  const cam = useMemo(
+    () => ({
+      far: camera?.far ?? 100,
+      near: camera?.near ?? -100,
+      position: camera?.position ?? [0, 0, 10],
+      zoom: baseZoom * (contained ? 1 : 2)
+    }),
+    [baseZoom, camera, contained]
+  );
+  const canvas = /* @__PURE__ */ jsx(
+    Canvas,
+    {
+      camera: cam,
+      className,
+      dpr: [1, 2],
+      eventPrefix: contained ? "client" : "offset",
+      eventSource: contained ? container ?? void 0 : void 0,
+      frameloop: effectiveFrameloop,
+      gl: GL,
+      orthographic: true,
+      style: contained ? {
+        height: "100dvh",
+        inset: 0,
+        pointerEvents: "none",
+        position: "fixed",
+        width: "100dvw",
+        zIndex: 0,
+        ...style
+      } : { height: "100%", width: "100%", ...style },
+      children: contained ? /* @__PURE__ */ jsx(PositionedGroup, { baseZoom, bounds, children: children() }) : children()
+    }
+  );
+  return contained ? /* @__PURE__ */ jsxs(Suspense, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setContainer,
+        style: {
+          height: "100%",
+          inset: 0,
+          pointerEvents: noEvents ? "none" : "auto",
+          position: "absolute",
+          width: "100%",
+          zIndex: 1
         }
-        const lock = () => (document.body.style.userSelect = 'none');
-        const unlock = () => (document.body.style.userSelect = '');
-        el.addEventListener('pointerdown', lock);
-        window.addEventListener('pointerup', unlock);
-        return () => {
-            el.removeEventListener('pointerdown', lock);
-            window.removeEventListener('pointerup', unlock);
-        };
-    }, [container, contained, noEvents]);
-    // Pause the R3F render loop when the tab is hidden. Even on
-    // `frameloop="always"` scenes we don't want the GPU running while the
-    // user can't see anything — this is the dominant fix for the "fans
-    // crank up after hours of idle" symptom.
-    const [pageHidden, setPageHidden] = useState(typeof document !== 'undefined' && document.hidden);
-    useEffect(() => {
-        const onVisibility = () => setPageHidden(document.hidden);
-        document.addEventListener('visibilitychange', onVisibility);
-        return () => document.removeEventListener('visibilitychange', onVisibility);
-    }, []);
-    const effectiveFrameloop = pageHidden ? 'never' : frameloop;
-    const cam = useMemo(() => ({
-        far: camera?.far ?? 100,
-        near: camera?.near ?? -100,
-        position: camera?.position ?? [0, 0, 10],
-        zoom: baseZoom * (contained ? 1 : 2)
-    }), [baseZoom, camera, contained]);
-    const canvas = (_jsx(Canvas, { camera: cam, className: className, dpr: [1, 2], eventPrefix: contained ? 'client' : 'offset', eventSource: contained ? (container ?? undefined) : undefined, frameloop: effectiveFrameloop, gl: GL, orthographic: true, style: contained
-            ? {
-                height: '100dvh',
-                inset: 0,
-                pointerEvents: 'none',
-                position: 'fixed',
-                width: '100dvw',
-                zIndex: 0,
-                ...style
-            }
-            : { height: '100%', width: '100%', ...style }, children: contained ? (_jsx(PositionedGroup, { baseZoom: baseZoom, bounds: bounds, children: children() })) : (children()) }));
-    return contained ? (_jsxs(Suspense, { children: [_jsx("div", { ref: setContainer, style: {
-                    height: '100%',
-                    inset: 0,
-                    pointerEvents: noEvents ? 'none' : 'auto',
-                    position: 'absolute',
-                    width: '100%',
-                    zIndex: 1
-                } }), canvas] })) : (canvas);
+      }
+    ),
+    canvas
+  ] }) : canvas;
 }
-//# sourceMappingURL=scene-canvas.js.map

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

@@ -1,5 +1,5 @@
 import type { RefObject } from 'react';
-export declare function Scramble({ children, dur, spread, target }: ScrambleProps): import("react/jsx-runtime").JSX.Element;
+export declare function Scramble({ children, dur, spread, target }: ScrambleProps): import("react").JSX.Element;
 interface ScrambleProps {
     children: string;
     dur?: number;
@@ -7,4 +7,3 @@ interface ScrambleProps {
     target?: RefObject<HTMLElement | null>;
 }
 export {};
-//# sourceMappingURL=scramble.d.ts.map

package/dist/ui/components/scramble.js

@@ -1,61 +1,62 @@
-'use client';
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-const CHARS = '.,·-─~+:;=*π""┐┌┘┴┬╗╔╝╚╬╠╣╩╦║░▒▓█▄▀▌▐■!?&#$@0123456789*';
-export function Scramble({ children, dur = 666, spread = 1, target }) {
-    const text = String(children);
-    const len = text.length;
-    const [display, setDisplay] = useState(text);
-    const frame = useRef(null);
-    const waves = useRef([]);
-    useEffect(() => {
-        const el = target?.current;
-        if (!el) {
-            return;
-        }
-        const animate = () => {
-            const t = Date.now();
-            waves.current = waves.current.filter(w => t - w.time < dur);
-            if (!waves.current.length) {
-                setDisplay(text);
-                frame.current = null;
-                return;
-            }
-            setDisplay(text
-                .split('')
-                .map((c, i) => {
-                if (c === ' ') {
-                    return c;
-                }
-                for (const w of waves.current) {
-                    const age = t - w.time;
-                    const rad = (Math.min(age / dur, 1) *
-                        (Math.max(w.pos, len - w.pos - 1) + 5)) /
-                        spread;
-                    const dist = Math.abs(i - w.pos);
-                    const int = rad - dist;
-                    if (dist <= rad && int > 0 && int <= 3) {
-                        return CHARS[(dist * 3 + ((age / 40) | 0)) % CHARS.length];
-                    }
-                }
-                return c;
-            })
-                .join(''));
-            frame.current = requestAnimationFrame(animate);
-        };
-        const onEnter = () => {
-            waves.current.push({ pos: len >> 1, time: Date.now() });
-            frame.current ?? (frame.current = requestAnimationFrame(animate));
-        };
-        el.addEventListener('mouseenter', onEnter);
-        return () => {
-            el.removeEventListener('mouseenter', onEnter);
-            frame.current && cancelAnimationFrame(frame.current);
-        };
-    }, [target, text, len, dur, spread]);
-    useEffect(() => {
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+const CHARS = '.,\xB7-\u2500~+:;=*\u03C0""\u2510\u250C\u2518\u2534\u252C\u2557\u2554\u255D\u255A\u256C\u2560\u2563\u2569\u2566\u2551\u2591\u2592\u2593\u2588\u2584\u2580\u258C\u2590\u25A0!?&#$@0123456789*';
+export function Scramble({
+  children,
+  dur = 666,
+  spread = 1,
+  target
+}) {
+  const text = String(children);
+  const len = text.length;
+  const [display, setDisplay] = useState(text);
+  const frame = useRef(null);
+  const waves = useRef([]);
+  useEffect(() => {
+    const el = target?.current;
+    if (!el) {
+      return;
+    }
+    const animate = () => {
+      const t = Date.now();
+      waves.current = waves.current.filter((w) => t - w.time < dur);
+      if (!waves.current.length) {
         setDisplay(text);
-    }, [text]);
-    return _jsx(_Fragment, { children: display });
+        frame.current = null;
+        return;
+      }
+      setDisplay(
+        text.split("").map((c, i) => {
+          if (c === " ") {
+            return c;
+          }
+          for (const w of waves.current) {
+            const age = t - w.time;
+            const rad = Math.min(age / dur, 1) * (Math.max(w.pos, len - w.pos - 1) + 5) / spread;
+            const dist = Math.abs(i - w.pos);
+            const int = rad - dist;
+            if (dist <= rad && int > 0 && int <= 3) {
+              return CHARS[(dist * 3 + (age / 40 | 0)) % CHARS.length];
+            }
+          }
+          return c;
+        }).join("")
+      );
+      frame.current = requestAnimationFrame(animate);
+    };
+    const onEnter = () => {
+      waves.current.push({ pos: len >> 1, time: Date.now() });
+      frame.current ??= requestAnimationFrame(animate);
+    };
+    el.addEventListener("mouseenter", onEnter);
+    return () => {
+      el.removeEventListener("mouseenter", onEnter);
+      frame.current && cancelAnimationFrame(frame.current);
+    };
+  }, [target, text, len, dur, spread]);
+  useEffect(() => {
+    setDisplay(text);
+  }, [text]);
+  return /* @__PURE__ */ jsx(Fragment, { children: display });
 }
-//# sourceMappingURL=scramble.js.map

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

@@ -1,6 +1,6 @@
 import { type ReactNode } from 'react';
-export declare function Segmented<T extends string>({ className, onChange, options, size, value }: SegmentedProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare function FilterGroup({ children, className, label }: FilterGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function Segmented<T extends string>({ className, onChange, options, size, value }: SegmentedProps<T>): import("react").JSX.Element;
+export declare function FilterGroup({ children, className, label }: FilterGroupProps): import("react").JSX.Element;
 interface FilterGroupProps {
     children: ReactNode;
     className?: string;
@@ -18,4 +18,3 @@ interface SegmentedProps<T extends string> {
     value: T;
 }
 export {};
-//# sourceMappingURL=segmented.d.ts.map

package/dist/ui/components/segmented.js

@@ -1,15 +1,50 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../utils';
-export function Segmented({ className, onChange, options, size = 'sm', value }) {
-    return (_jsx("div", { className: cn('inline-flex border border-midground/15 bg-background/30', className), role: "radiogroup", children: options.map(opt => {
-            const active = opt.value === value;
-            return (_jsx("button", { "aria-checked": active, className: cn('font-mondwest tracking-[0.1em] uppercase', 'transition-colors cursor-pointer whitespace-nowrap', 'border-r border-midground/15 last:border-r-0', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/30', size === 'sm' && 'h-7 px-2.5 text-[0.65rem]', size === 'md' && 'h-8 px-3 text-xs', active
-                    ? 'bg-midground text-background'
-                    : 'text-midground/60 hover:bg-midground/10 hover:text-midground'), onClick: () => onChange(opt.value), role: "radio", type: "button", children: opt.label }, opt.value));
-        }) }));
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/index.js";
+export function Segmented({
+  className,
+  onChange,
+  options,
+  size = "sm",
+  value
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex border border-midground/15 bg-background/30",
+        className
+      ),
+      role: "radiogroup",
+      children: options.map((opt) => {
+        const active = opt.value === value;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            "aria-checked": active,
+            className: cn(
+              "font-mondwest tracking-[0.1em] uppercase",
+              "transition-colors cursor-pointer whitespace-nowrap",
+              "border-r border-midground/15 last:border-r-0",
+              "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/30",
+              size === "sm" && "h-7 px-2.5 text-[0.65rem]",
+              size === "md" && "h-8 px-3 text-xs",
+              active ? "bg-midground text-background" : "text-midground/60 hover:bg-midground/10 hover:text-midground"
+            ),
+            onClick: () => onChange(opt.value),
+            role: "radio",
+            type: "button",
+            children: opt.label
+          },
+          opt.value
+        );
+      })
+    }
+  );
 }
 export function FilterGroup({ children, className, label }) {
-    return (_jsxs("div", { className: cn('flex items-center gap-2', className), children: [_jsx("span", { className: "font-mondwest text-[0.65rem] tracking-[0.12em] uppercase text-midground/50", children: label }), children] }));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "font-mondwest text-[0.65rem] tracking-[0.12em] uppercase text-midground/50", children: label }),
+    children
+  ] });
 }
-//# sourceMappingURL=segmented.js.map

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

@@ -1,5 +1,5 @@
 import { type CSSProperties, type ReactNode } from 'react';
-export declare function Select({ children, className, disabled, id, onValueChange, placeholder, style, value }: SelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function Select({ children, className, disabled, id, onValueChange, placeholder, style, value }: SelectProps): import("react").JSX.Element;
 export declare function SelectOption(_props: SelectOptionProps): null;
 interface SelectOptionProps {
     children: ReactNode;
@@ -16,4 +16,3 @@ interface SelectProps {
     value?: string;
 }
 export {};
-//# sourceMappingURL=select.d.ts.map