4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T1536,import { clamp01, easeOutCubic, smoothstep } from "./curves"; /** Band width in CSS px when the consumer passes nothing. */ export const DEFAULT_THICKNESS = 2; /** Corner radius for a fixed viewport frame when none is given, before the * width scale. */ export const DEFAULT_RADIUS = 16; /** CSS-px radius of the disc that goos toward the cursor. */ export const BLOB_RADIUS = 26; /** CSS-px smooth-min radius merging the pointer disc into the band. Wide enough * that the neck reads as surface tension, not a butt-join. */ export const BLOB_K = 42; /** Idle edge undulation, always on while the frame is visible. */ export const WOBBLE_REST = 0.6; /** Extra edge displacement added at full hover/focus energy. */ export const WOBBLE_ENERGY = 3.0; /** Within this CSS distance of the band the pointer goo is at full strength. */ export const EDGE_NEAR = 8; /** Past this CSS distance the pointer goo has faded out entirely. */ export const EDGE_FAR = 120; /** Per-frame easing of the pointer position and the energy scalar. */ export const POINTER_EASE = 0.16; export const ENERGY_EASE = 0.09; /** Perimeter highlight travel, in turns per second. */ export const SWEEP_SPEED = 0.12; /** Duration of the one-time intro reveal, in seconds. */ export const INTRO_DELAY_SECONDS = 0.1; export const INTRO_SECONDS = 4; /** A rounded-box ring in CSS space: centre, half-extents, corner radius. */ export interface Ring { cx: number; cy: number; hx: number; hy: number; r: number; } export interface IntroFrame { progress: number; radius: number; } /** Geometry for the one-time edge-to-frame flow. The shell front itself is * resolved in the shader; the CPU grows the corners on the same eased clock. */ export function introFrame(ring: Ring, progress: number): IntroFrame { const eased = easeOutCubic(clamp01(progress)); return { progress: eased, radius: ring.r * (0.18 + 0.82 * eased), }; } /** The same ring flattened to device px with Y flipped, ready for the shader. */ export interface PackedRing { center: [number, number]; half: [number, number]; radius: number; } /** * Signed distance to a rounded box (Inigo Quilez, MIT). Negative inside, zero on * the edge, positive outside. Ported to JS so the pointer gate and the tests can * reason about the same edge the shader draws. */ export function sdRoundBox( px: number, py: number, bx: number, by: number, r: number, ): number { const qx = Math.abs(px) - bx + r; const qy = Math.abs(py) - by + r; const outside = Math.hypot(Math.max(qx, 0), Math.max(qy, 0)); return Math.min(Math.max(qx, qy), 0) + outside - r; } /** * Corner radius for a fixed viewport frame: a gentle scale with width, clamped so * a phone still rounds and an ultrawide does not turn into a stadium. Mirrors the * frame radius the source LiquidBorder used. */ export function fixedRadius(width: number): number { return Math.min(Math.max(38, width * 0.02), 78); } /** * Resolves the corner radius from, in order: an explicit prop, the wrapped box's * computed border-radius, or a default (width-scaled in fixed mode). Never * negative. */ export function resolveRadius(options: { explicit?: number; computed?: number; fixed: boolean; width: number; }): number { const { explicit, computed, fixed, width } = options; if (typeof explicit === "number") return Math.max(0, explicit); if (fixed) return fixedRadius(width); if (typeof computed === "number") return Math.max(0, computed); return DEFAULT_RADIUS; } /** * The ring inscribed in a canvas of the given CSS size, pulled in by `inset` and * with the radius clamped to what the half-extents can hold. */ export function frameRing(box: { width: number; height: number; inset: number; radius: number; }): Ring { const hx = Math.max(box.width / 2 - box.inset, 1); const hy = Math.max(box.height / 2 - box.inset, 1); return { cx: box.width / 2, cy: box.height / 2, hx, hy, r: Math.max(0, Math.min(box.radius, hx, hy)), }; } /** Flattens a CSS-space ring to device px, flipping Y for `gl_FragCoord`. */ export function packRing( ring: Ring, dpr: number, canvasHeight: number, ): PackedRing { return { center: [ring.cx * dpr, (canvasHeight - ring.cy) * dpr], half: [ring.hx * dpr, ring.hy * dpr], radius: ring.r * dpr, }; } /** * How hard the pointer goos the nearest edge: `presence` (0 away, 1 hovering) * gated by proximity to the band, so a cursor drifting through the middle of a * wrapped card never raises a blob, and one grazing the edge raises a full one. */ export function pointerStrength( px: number, py: number, ring: Ring, presence: number, ): number { const dist = Math.abs( sdRoundBox(px - ring.cx, py - ring.cy, ring.hx, ring.hy, ring.r), ); const gate = 1 - smoothstep(EDGE_NEAR, EDGE_FAR, dist); return clamp01(presence) * gate; } /** One pointer disc as a flat vec4 (x, y, radius, strength) in device px, Y flipped. */ export function packBlob( px: number, py: number, radiusCss: number, strength: number, dpr: number, canvasHeight: number, ): [number, number, number, number] { return [px * dpr, (canvasHeight - py) * dpr, radiusCss * dpr, strength]; } /** Idle-plus-energy edge amplitude in CSS px for a given energy scalar. */ export function wobbleFor(energy: number): number { return WOBBLE_REST + WOBBLE_ENERGY * clamp01(energy); } 52:T34dc,"use client"; import { useReducedMotion } from "motion/react"; import * as React from "react"; import { createPortal } from "react-dom"; import { cn } from "@/lib/utils"; import { createBorderField } from "./border"; import { type FieldColors, liftTint, resolveColor, shineForBackdrop, } from "./field"; import { useContextRecovery } from "./recovery"; import { clamp01 } from "./curves"; import { BLOB_K, BLOB_RADIUS, DEFAULT_RADIUS, DEFAULT_THICKNESS, ENERGY_EASE, frameRing, INTRO_DELAY_SECONDS, INTRO_SECONDS, introFrame, POINTER_EASE, packBlob, packRing, pointerStrength, resolveRadius, SWEEP_SPEED, wobbleFor, } from "./frame-geometry"; export interface SulaFrameProps extends React.HTMLAttributes { /** false wraps its own box; true is a position:fixed viewport frame. */ fixed?: boolean; /** Corner radius in px. Wrapper mode defaults to the box's computed * border-radius; fixed mode to a width scale. */ radius?: number; /** Band width in px. Defaults to 2. */ thickness?: number; /** Gap between the frame and the edge in px. Defaults to 0. */ inset?: number; /** false mounts no canvas; reduced motion paints the static border. */ fluid?: boolean; /** One-time reveal ramp on mount. Skipped under reduced motion. Defaults true. */ intro?: boolean; accentColor?: string; backdrop?: string; tint?: string; shine?: number; children?: React.ReactNode; } const MAX_DPR = 2; function readColors( node: HTMLElement, overrides: { backdrop?: string; tint?: string; accent?: string; shine?: number; }, ): FieldColors { const styles = getComputedStyle(node); const token = (name: string) => styles.getPropertyValue(name).trim(); const backdrop = resolveColor(overrides.backdrop ?? token("--usva-bg")); const tintToken = overrides.tint ?? token("--usva-surface-2") ?? token("--usva-surface"); const base: FieldColors = { backdrop, tint: resolveColor(tintToken || token("--usva-surface")), accent: resolveColor(overrides.accent ?? token("--usva-accent")), shine: overrides.shine ?? shineForBackdrop(backdrop), }; return { ...base, tint: liftTint(base.tint, base.accent) }; } /** Parses the top-left corner radius of an element, in px. */ function computedRadius(node: HTMLElement): number { const value = Number.parseFloat(getComputedStyle(node).borderTopLeftRadius); return Number.isFinite(value) ? value : 0; } export const SulaFrame = React.forwardRef( ( { fixed = false, radius, thickness = DEFAULT_THICKNESS, inset = 0, fluid = true, intro = true, accentColor, backdrop, tint, shine, className, style, children, ...props }, forwardedRef, ) => { const reduced = useReducedMotion(); const containerRef = React.useRef(null); const layerRef = React.useRef(null); const canvasRef = React.useRef(null); const thicknessRef = React.useRef(thickness); thicknessRef.current = thickness; const insetRef = React.useRef(inset); insetRef.current = inset; const radiusRef = React.useRef(radius); radiusRef.current = radius; const introRef = React.useRef(intro); introRef.current = intro; const overrides = React.useMemo( () => ({ backdrop, tint, accent: accentColor, shine }), [backdrop, tint, accentColor, shine], ); const overridesRef = React.useRef(overrides); overridesRef.current = overrides; const fieldRef = React.useRef>(null); const { failed, generation, onContextLost, onContextReady } = useContextRecovery(canvasRef); const [mounted, setMounted] = React.useState(false); React.useEffect(() => setMounted(true), []); const animated = fluid && !reduced && !failed && mounted; const staticBorder = mounted && (!fluid || reduced || failed); const keepCanvas = fluid && !reduced && mounted; // biome-ignore lint/correctness/useExhaustiveDependencies: `generation` is not read here, it is what rebuilds the field on a restored context React.useEffect(() => { if (!animated) return; const canvas = canvasRef.current; const layer = layerRef.current; const container = containerRef.current; const measureNode = fixed ? layer : container; if (!canvas || !layer || !measureNode) return; const field = createBorderField({ canvas, colors: readColors(measureNode, overridesRef.current), onContextLost, }); if (!field) { onContextLost(); return; } fieldRef.current = field; onContextReady(); const refreshColors = () => field.setColors(readColors(measureNode, overridesRef.current)); let width = 0; let height = 0; let dpr = 1; const measure = (): boolean => { const w = fixed ? window.innerWidth : Math.ceil(measureNode.getBoundingClientRect().width); const h = fixed ? window.innerHeight : Math.ceil(measureNode.getBoundingClientRect().height); if (w <= 0 || h <= 0) return false; const nextDpr = Math.min(window.devicePixelRatio || 1, MAX_DPR); if (w !== width || h !== height || nextDpr !== dpr) { canvas.style.width = `${w}px`; canvas.style.height = `${h}px`; field.resize(w, h, nextDpr); } width = w; height = h; dpr = nextDpr; return true; }; const pointer = { x: -1e5, y: -1e5 }; let pointerTarget = 0; let presence = 0; let focusTarget = 0; let focus = 0; const ringFor = () => frameRing({ width, height, inset: insetRef.current, radius: resolveRadius({ explicit: radiusRef.current, computed: fixed ? undefined : computedRadius(measureNode as HTMLElement), fixed, width, }), }); const draw = (elapsed: number) => { presence += (pointerTarget - presence) * POINTER_EASE; focus += (focusTarget - focus) * ENERGY_EASE; const introActive = introRef.current; const introT = introActive ? clamp01((elapsed - INTRO_DELAY_SECONDS) / INTRO_SECONDS) : 1; const energy = clamp01(Math.max(presence, focus)); const ring = ringFor(); const introGeometry = introFrame(ring, introT); const packed = packRing( { ...ring, r: introGeometry.radius }, dpr, height, ); const strength = pointerStrength(pointer.x, pointer.y, ring, presence); const blobs = new Array(2 * 4).fill(0); let blobCount = 0; if (strength > 0.01) { const b = packBlob( pointer.x, pointer.y, BLOB_RADIUS, strength, dpr, height, ); blobs[0] = b[0]; blobs[1] = b[1]; blobs[2] = b[2]; blobs[3] = b[3]; blobCount = 1; } field.draw({ center: packed.center, half: packed.half, radius: packed.radius, thickness: (thicknessRef.current / 2) * dpr, wobble: wobbleFor(Math.max(energy, 1 - introGeometry.progress)) * dpr, energy, sweep: (elapsed * SWEEP_SPEED) % 1, time: elapsed, blobs, blobCount, blobK: BLOB_K * dpr, intro: introGeometry.progress, }); }; if (!measure()) return; let raf = 0; let elapsed = 0; let last = performance.now(); let killed = false; const tick = () => { if (killed) return; const now = performance.now(); elapsed += (now - last) / 1000; last = now; draw(elapsed); raf = requestAnimationFrame(tick); }; const stop = () => cancelAnimationFrame(raf); const run = () => { last = performance.now(); stop(); raf = requestAnimationFrame(tick); }; const pointerHost = fixed ? window : container; const onMove = (event: Event) => { const e = event as PointerEvent; if (fixed) { pointer.x = e.clientX; pointer.y = e.clientY; } else { const box = (container as HTMLElement).getBoundingClientRect(); pointer.x = e.clientX - box.left; pointer.y = e.clientY - box.top; } pointerTarget = 1; }; const onLeave = () => { pointerTarget = 0; }; pointerHost?.addEventListener("pointermove", onMove as EventListener); pointerHost?.addEventListener("pointerleave", onLeave); const onFocusIn = (event: FocusEvent) => { const target = event.target as HTMLElement | null; if (target?.matches?.(":focus-visible")) focusTarget = 1; }; const onFocusOut = () => { if (!container?.querySelector(":focus-visible")) focusTarget = 0; }; if (!fixed) { container?.addEventListener("focusin", onFocusIn); container?.addEventListener("focusout", onFocusOut); } let visible = true; const io = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver((entries) => { visible = entries[0]?.isIntersecting ?? true; if (visible && !document.hidden) run(); else stop(); }); io?.observe(measureNode); const onVisibility = () => { if (document.hidden || !visible) stop(); else run(); }; document.addEventListener("visibilitychange", onVisibility); const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => measure()); if (fixed) window.addEventListener("resize", measure); else ro?.observe(measureNode); const themeObserver = typeof MutationObserver === "undefined" ? null : new MutationObserver(() => refreshColors()); themeObserver?.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "class"], }); run(); return () => { killed = true; pointerHost?.removeEventListener( "pointermove", onMove as EventListener, ); pointerHost?.removeEventListener("pointerleave", onLeave); container?.removeEventListener("focusin", onFocusIn); container?.removeEventListener("focusout", onFocusOut); io?.disconnect(); document.removeEventListener("visibilitychange", onVisibility); window.removeEventListener("resize", measure); ro?.disconnect(); themeObserver?.disconnect(); stop(); field.dispose(); fieldRef.current = null; canvas.style.width = ""; canvas.style.height = ""; }; }, [animated, fixed, generation]); React.useEffect(() => { const measureNode = fixed ? layerRef.current : containerRef.current; if (!measureNode) return; fieldRef.current?.setColors(readColors(measureNode, overrides)); }, [overrides, fixed]); const staticRingStyle: React.CSSProperties = { position: fixed ? "fixed" : "absolute", inset: `${inset}px`, borderRadius: fixed ? `${radius ?? DEFAULT_RADIUS}px` : "inherit", border: `${thickness}px solid color-mix(in oklab, var(--usva-accent) 55%, transparent)`, boxShadow: "0 0 24px color-mix(in oklab, var(--usva-accent) 22%, transparent)", }; const layer = keepCanvas ? ( ) : null; const ring = staticBorder ? (

) : null; if (fixed) { return (

{ containerRef.current = node; if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef) forwardedRef.current = node; }} data-fluid={animated ? "on" : "off"} style={{ display: "contents" }} {...props} > {layer ? createPortal(layer, document.body) : null} {ring ? createPortal(ring, document.body) : null} {children}

); } return (

{ containerRef.current = node; if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef) forwardedRef.current = node; }} data-fluid={animated ? "on" : "off"} className={cn("relative isolate", className)} style={style} {...props} > {layer} {ring} {children}

); }, ); SulaFrame.displayName = "SulaFrame"; 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"clsx"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","ogl",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/ogl","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"ogl"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-merge"}]]}]}]]}],["$","$L4f",null,{"namespace":"@usva","registryDependencies":["https://usva.build/r/sula-motion.json","https://usva.build/r/sula-core.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"frame-geometry.ts","content":"$51","type":"registry:ui","target":"components/ui/frame-geometry.ts"},{"path":"sula-frame.tsx","content":"$52","type":"registry:ui","target":"components/ui/sula-frame.tsx"}],"className":"h-[70svh] min-h-80"}]]}]