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:T19d7,import { type Blob, bridgeNecks, type Neck } from "./geometry"; import { clamp01, smoother } from "./curves"; export interface DriftOpts { width: number; height: number; /** Feeds every path phase, so a seed reproduces the same wander. */ seed: number; } export interface FieldGeometry { /** Two huge, dark, shoulder-off-canvas masses: the atmosphere, no rim. */ back: Blob[]; /** Lit actors and glints that drift, kiss and part in front. */ front: Blob[]; /** Scheduled-kiss bridges among the front actors. */ necks: Neck[]; } const TAU = Math.PI * 2; /** The full loop closes at 96 s: every band's cycle count is an integer, so the * whole field returns to its start seamlessly and deterministically. */ export const LOOP_T = 96; /** Fraction of the short side used as the front merge radius. Higher than the * old single-pass k so a kiss reads as a fat waist, not a thread. */ export const FRONT_K_FRACTION = 0.11; /** The back pass merges soupy and huge, so its two anchors read as one cloud. */ export const BACK_K_FRACTION = 0.2; /** Eased approach of the pointer lean, per frame. */ export const POINTER_EASE = 0.08; /** The heavy wake that drags a blob toward the cursor is slower still: a liquid * has mass, so it lags. */ export const WAKE_EASE = 0.03; /** * A deterministic hash in [0, 1) from an integer stream and the seed. Only has to * look unpatterned and stay identical across renders so the drift is stable for * SSR and tests. */ function hash(n: number, seed: number): number { const x = Math.sin((n + 1) * 12.9898 + seed * 78.233) * 43758.5453; return x - Math.floor(x); } const clamp = (v: number, lo: number, hi: number): number => Math.min(hi, Math.max(lo, v)); /** Three incommensurate sine bands with descending weight. Integer cycle counts * over LOOP_T keep it seamless; the coprime-ish triples keep the period from * ever visibly repeating inside two minutes. */ const BAND_WEIGHTS = [0.6, 0.3, 0.1]; function drift( time: number, amp: number, cycles: readonly [number, number, number], phase: number, ): number { let s = 0; for (let j = 0; j < 3; j++) { const f = ((cycles[j] as number) * TAU) / LOOP_T; s += (BAND_WEIGHTS[j] as number) * Math.sin(time * f + phase + j * 2.399); } return amp * s; } interface Spec { baseX: number; baseY: number; r: number; amp: number; cyclesX: readonly [number, number, number]; cyclesY: readonly [number, number, number]; breath: number; offCanvas: boolean; } function place(spec: Spec, time: number, opts: DriftOpts, id: number): Blob { const { width, height, seed } = opts; const px = hash(id * 16 + 6, seed) * TAU; const py = hash(id * 16 + 7, seed) * TAU; const breathe = 1 + spec.breath * Math.sin((time * TAU) / LOOP_T + hash(id * 16 + 8, seed) * TAU); const r = spec.r * breathe; const dx = drift(time, spec.amp, spec.cyclesX, px); const dy = drift(time, spec.amp, spec.cyclesY, py); const slackX = spec.offCanvas ? 0.35 * r : r; const slackY = spec.offCanvas ? 0.35 * r : r; const cx = clamp(spec.baseX * width + dx, -slackX, width + slackX); const cy = clamp(spec.baseY * height + dy, -slackY, height + slackY); return { cx, cy, hw: r, hh: r, r }; } /** One scheduled encounter: which two front actors meet, when in the loop, and * how wide the window is (as loop fractions). */ const KISSES: ReadonlyArray<{ i: number; j: number; at: number; half: number; }> = [ { i: 0, j: 1, at: 0.22, half: 0.06 }, { i: 1, j: 2, at: 0.61, half: 0.06 }, { i: 0, j: 2, at: 0.87, half: 0.05 }, ]; export function fieldFrame(time: number, opts: DriftOpts): FieldGeometry { const { width, height } = opts; const short = Math.min(width, height); const backSpecs: Spec[] = [ { baseX: 0.16, baseY: 0.84, r: short * 0.45, amp: short * 0.04, cyclesX: [1, 3, 7], cyclesY: [2, 5, 11], breath: 0.06, offCanvas: true, }, { baseX: 0.86, baseY: 0.2, r: short * 0.34, amp: short * 0.045, cyclesX: [3, 7, 13], cyclesY: [1, 5, 9], breath: 0.06, offCanvas: true, }, ]; const midSpecs: Spec[] = [ { baseX: 0.3, baseY: 0.68, r: short * 0.16 }, { baseX: 0.52, baseY: 0.5, r: short * 0.13 }, { baseX: 0.68, baseY: 0.36, r: short * 0.11 }, ].map((s) => ({ ...s, amp: short * 0.12, cyclesX: [2, 5, 11], cyclesY: [3, 8, 13], breath: 0.05, offCanvas: false, })); const glintSpecs: Spec[] = [ { baseX: 0.72, baseY: 0.72, r: short * 0.05 }, { baseX: 0.34, baseY: 0.24, r: short * 0.035 }, ].map((s) => ({ ...s, amp: short * 0.18, cyclesX: [3, 8, 13], cyclesY: [5, 13, 21], breath: 0.04, offCanvas: false, })); const back = backSpecs.map((s, i) => place(s, time, opts, i)); const mid = midSpecs.map((s, i) => place(s, time, opts, 10 + i)); const glints = glintSpecs.map((s, i) => place(s, time, opts, 20 + i)); const k = short * FRONT_K_FRACTION; const loopPhase = (((time % LOOP_T) + LOOP_T) % LOOP_T) / LOOP_T; const necks: Neck[] = []; for (const kiss of KISSES) { const w = 1 - clamp01(Math.abs(loopPhase - kiss.at) / kiss.half); if (w <= 0) continue; const ramp = smoother(w); const a = mid[kiss.i] as Blob; const b = mid[kiss.j] as Blob; const dx = b.cx - a.cx; const dy = b.cy - a.cy; const dist = Math.hypot(dx, dy) || 1; const ux = dx / dist; const uy = dy / dist; const midX = (a.cx + b.cx) / 2; const midY = (a.cy + b.cy) / 2; const pull = ramp * 0.92; a.cx += (midX - ux * (a.r + 0.15 * k) - a.cx) * pull; a.cy += (midY - uy * (a.r + 0.15 * k) - a.cy) * pull; b.cx += (midX + ux * (b.r + 0.15 * k) - b.cx) * pull; b.cy += (midY + uy * (b.r + 0.15 * k) - b.cy) * pull; const stretch = 1 + 0.1 * ramp; a.hw *= stretch; b.hw *= stretch; necks.push(...bridgeNecks([a, b], k, ramp)); } return { back, front: [...mid, ...glints], necks }; } /** Finds the surface under pressure, rather than making the whole veil follow * the pointer through its first (and largest) blob. */ export function nearestBlob( blobs: Blob[], point: { x: number; y: number }, ): Blob | undefined { let nearest: Blob | undefined; let nearestDistance = Number.POSITIVE_INFINITY; for (const blob of blobs) { const distance = Math.hypot(blob.cx - point.x, blob.cy - point.y) - Math.max(blob.hw, blob.hh); if (distance < nearestDistance) { nearest = blob; nearestDistance = distance; } } return nearest; } 52:Tf61,import type { Blob, Neck } from "./geometry"; import { BACK_K_FRACTION, FRONT_K_FRACTION, fieldFrame, } from "./field-geometry"; /** * How many bodies each depth plane may hold, and how many necks the whole frame * may hold. The shader's uniform arrays are fixed, so these are hard ceilings: * a drive that hands back more is clamped to the first N, and told so once in * development. Silently dropping the tail is how a tear ends up with no neck. */ export const MAX_FIELD_BLOBS = 12; export const MAX_FIELD_NECKS = 8; /** A rounded box of fluid, in CSS pixels from the field's top-left corner. */ export interface SulaBlob { cx: number; cy: number; /** Corner radius. A body with hw = hh = r is a circle. */ r: number; /** Half-width. Defaults to `r`. */ hw?: number; /** Half-height. Defaults to `r`. */ hh?: number; } /** * A capsule joining two points: the tether of a tear, or the waist of a merge. * `strength` fades the bridge back into the surface without thinning it, which * is the only way a neck melts instead of snapping. Defaults to a solid bridge. */ export interface SulaNeck { ax: number; ay: number; bx: number; by: number; r: number; strength?: number; } /** The field's box, in CSS pixels, plus the seed the consumer was handed. */ export interface SulaFieldBounds { width: number; height: number; seed: number; } /** * What the fluid is doing at one instant. The consumer says what the material is * doing; the field decides how to paint it. */ export interface SulaDriveFrame { /** Matte bodies behind everything, drawn without a rim. Depth, not actors. */ back?: SulaBlob[]; /** The lit bodies. */ front?: SulaBlob[]; /** Bridges among the front bodies. */ necks?: SulaNeck[]; /** Merge radius of the front plane, in px. Defaults to 11% of the short side. */ mergeRadius?: number; /** Merge radius of the back plane, in px. Defaults to 20% of the short side. */ backMergeRadius?: number; } /** * A pure function of time. Given the seconds elapsed (already scaled by `speed`) * and the field's bounds, it returns the frame. Deterministic by contract: the * same time and bounds must give the same frame, so a drive can be unit-tested * and a still frame under reduced motion is just the frame at t = 0. */ export type SulaFieldDrive = ( time: number, bounds: SulaFieldBounds, ) => SulaDriveFrame; export interface ResolvedDriveFrame { back: Blob[]; front: Blob[]; necks: Neck[]; kFront: number; kBack: number; /** True when the drive handed back more than a plane can hold. */ clamped: boolean; } const toBlob = (b: SulaBlob): Blob => ({ cx: b.cx, cy: b.cy, hw: b.hw ?? b.r, hh: b.hh ?? b.r, r: b.r, }); /** * Turns whatever the drive said into exactly what the renderer can take: plane * budgets enforced, half-extents filled in, merge radii defaulted off the short * side so a drive never has to know the field's pixel size to look right. */ export function resolveDriveFrame( frame: SulaDriveFrame, bounds: SulaFieldBounds, ): ResolvedDriveFrame { const short = Math.min(bounds.width, bounds.height); const back = frame.back ?? []; const front = frame.front ?? []; const necks = frame.necks ?? []; return { back: back.slice(0, MAX_FIELD_BLOBS).map(toBlob), front: front.slice(0, MAX_FIELD_BLOBS).map(toBlob), necks: necks.slice(0, MAX_FIELD_NECKS).map((n) => ({ ...n })), kFront: frame.mergeRadius ?? short * FRONT_K_FRACTION, kBack: frame.backMergeRadius ?? short * BACK_K_FRACTION, clamped: back.length > MAX_FIELD_BLOBS || front.length > MAX_FIELD_BLOBS || necks.length > MAX_FIELD_NECKS, }; } /** The built-in choreography: the ambient drift the field has always had. */ export const ambientDrift: SulaFieldDrive = (time, bounds) => { const { back, front, necks } = fieldFrame(time, bounds); return { back, front, necks }; }; 53:T3450,"use client"; import { useReducedMotion } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; import { createField, type FieldColors, liftTint, resolveColor, shineForBackdrop, } from "./field"; import { packHover, packUniforms } from "./geometry"; import { createPauseGate } from "./pause"; import { useContextRecovery } from "./recovery"; import { ambientDrift, MAX_FIELD_BLOBS, MAX_FIELD_NECKS, resolveDriveFrame, type SulaFieldDrive, } from "./drive"; import { nearestBlob, POINTER_EASE, WAKE_EASE } from "./field-geometry"; // Bundlers replace this expression statically, but a Vite app types itself with // `types: ["vite/client"]` and has no `process`, so copied source fails tsc // without a local declaration. Module scope, so it shadows nothing in Next. declare const process: { env: { NODE_ENV?: string } }; export interface SulaFieldProps extends React.HTMLAttributes { /** Drift-rate multiplier; higher drifts faster. Defaults to 1. */ speed?: number; /** * The choreography: a pure function of time and the field's bounds, returning * the bodies and necks for that instant. Defaults to the ambient drift. Each * depth plane holds up to MAX_FIELD_BLOBS bodies and the frame up to * MAX_FIELD_NECKS necks; anything past that is clamped away, so keep inside it. */ drive?: SulaFieldDrive; /** When on, blobs lean toward the eased cursor. Defaults to false. */ interactive?: boolean; /** Reproduces the same wander for a given value. Defaults to 0. */ seed?: number; /** false mounts no canvas; reduced-motion paints one static frame. */ fluid?: boolean; /** * Which instant of the drive the reduced-motion still frame is taken from, in * seconds. Defaults to 0, which is right for a drive that is already composed * at rest, and wrong for one that has to run before there is anything to see: * a cycle that lifts bodies out of a pool is an empty pool at t=0. Pick the * moment that reads as the whole idea, held. */ stillTime?: number; accentColor?: string; backdrop?: string; tint?: string; shine?: number; children?: React.ReactNode; } const MAX_DPR = 2; /** Peak surface undulation, per depth pass. The back cloud heaves slowly; the * front actors shimmer tighter. */ const BACK_WOBBLE = 2.5; const FRONT_WOBBLE = 1.2; /** Peak edge displacement of the pointer lean, in px. */ const HOVER_WOBBLE = 1.4; /** Peak position lean toward the cursor, as a fraction of the short side: the * heavy wake that trails the pointer. */ const WAKE_REACH = 0.06; /** Gaussian falloff radius of the wake, as a fraction of the short side. Every * actor within it leans, weighted by proximity, so the pull glides across the * field instead of snapping from one nearest blob to the next. */ const WAKE_SPREAD = 0.45; 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"); return { backdrop, tint: resolveColor(tintToken || token("--usva-surface")), accent: resolveColor(overrides.accent ?? token("--usva-accent")), shine: overrides.shine ?? shineForBackdrop(backdrop), }; } export const SulaField = React.forwardRef( ( { speed = 1, drive, interactive = false, seed = 0, fluid = true, stillTime = 0, accentColor, backdrop, tint, shine, className, children, ...props }, forwardedRef, ) => { const reduced = useReducedMotion(); const containerRef = React.useRef(null); const canvasRef = React.useRef(null); /* These tune what the loop draws, not the GL field, so they ride refs rather * than effect deps: a live prop change must never tear the context down and * rebuild it on the same canvas, which races a scheduled frame. */ const speedRef = React.useRef(speed); speedRef.current = speed; const seedRef = React.useRef(seed); seedRef.current = seed; const interactiveRef = React.useRef(interactive); interactiveRef.current = interactive; const driveRef = React.useRef(drive ?? ambientDrift); driveRef.current = drive ?? ambientDrift; const { failed, generation, onContextLost, onContextReady } = useContextRecovery(canvasRef); const overrides = React.useMemo( () => ({ backdrop, tint, accent: accentColor, shine }), [backdrop, tint, accentColor, shine], ); const overridesRef = React.useRef(overrides); overridesRef.current = overrides; /* This surface swaps two colour sets per pass, so a retune recomputes both * rather than pushing one through setColors, which the next pass would * overwrite anyway. */ const refreshRef = React.useRef<(() => void) | null>(null); const [mounted, setMounted] = React.useState(false); React.useEffect(() => setMounted(true), []); const animated = fluid && !reduced && !failed && mounted; const still = fluid && reduced && !failed && mounted; const fieldOn = animated || still; // biome-ignore lint/correctness/useExhaustiveDependencies: `generation` is not read here, it is what rebuilds the field on a restored context React.useEffect(() => { if (!fieldOn) return; const canvas = canvasRef.current; const container = containerRef.current; if (!canvas || !container) return; let base = readColors(container, overridesRef.current); let backColors: FieldColors = { ...base, shine: 0 }; let frontColors: FieldColors = { ...base, tint: liftTint(base.tint, base.accent), }; const refreshColors = () => { base = readColors(container, overridesRef.current); backColors = { ...base, shine: 0 }; frontColors = { ...base, tint: liftTint(base.tint, base.accent) }; }; refreshRef.current = refreshColors; const field = createField({ canvas, colors: frontColors, onContextLost, }); if (!field) { onContextLost(); return; } onContextReady(); let width = 0; let height = 0; let dpr = 1; const measure = () => { const box = container.getBoundingClientRect(); const w = Math.ceil(box.width); const h = Math.ceil(box.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; }; let hoverAmt = 0; let hoverTarget = 0; let wakeAmt = 0; const pointer = { x: 0, y: 0 }; /* Two passes into one context: a dark, soupy back cloud clears the frame, * then the lit actors composite over it (clear:false). Colors are set per * pass, so the back stays matte (shine 0) and the front carries the rim. */ let warned = false; const draw = (elapsed: number) => { const bounds = { width, height, seed: seedRef.current }; const resolved = resolveDriveFrame( driveRef.current(elapsed * speedRef.current, bounds), bounds, ); const { back, front, necks, kFront, kBack } = resolved; if (resolved.clamped && !warned) { warned = true; if (process.env.NODE_ENV !== "production") { console.warn( `SulaField: the drive returned more than ${MAX_FIELD_BLOBS} bodies in a plane or ${MAX_FIELD_NECKS} necks. The surplus is not drawn.`, ); } } const short = Math.min(width, height); const focus = nearestBlob(front, pointer); if (interactiveRef.current && wakeAmt > 0.001) { const reach = wakeAmt * WAKE_REACH * short; const spread = short * WAKE_SPREAD; for (const b of front) { const dx = pointer.x - b.cx; const dy = pointer.y - b.cy; const dist = Math.hypot(dx, dy) || 1; const fall = Math.exp(-((dist / spread) ** 2)); b.cx += (dx / dist) * reach * fall; b.cy += (dy / dist) * reach * fall; } } field.setColors(backColors); field.draw({ packed: packUniforms( { blobs: back, necks: [], k: kBack }, dpr, height, ), k: kBack * dpr, time: elapsed, wobble: BACK_WOBBLE, alpha: 1, hover: null, clear: true, }); field.setColors(frontColors); field.draw({ packed: packUniforms({ blobs: front, necks, k: kFront }, dpr, height), k: kFront * dpr, time: elapsed, wobble: FRONT_WOBBLE, alpha: 1, hover: interactiveRef.current && focus && hoverAmt > 0.01 ? packHover(focus, hoverAmt * HOVER_WOBBLE, dpr, height, pointer) : null, clear: false, }); }; const start = performance.now(); if (!measure()) return; if (still) { draw(stillTime); const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => { if (measure()) draw(stillTime); }); observer?.observe(container); return () => { observer?.disconnect(); field.dispose(); refreshRef.current = null; canvas.style.width = ""; canvas.style.height = ""; }; } let raf = 0; let elapsed = 0; let last = start; let killed = false; const tick = () => { if (killed) return; const now = performance.now(); elapsed += (now - last) / 1000; last = now; hoverAmt += (hoverTarget - hoverAmt) * POINTER_EASE; wakeAmt += (hoverTarget - wakeAmt) * WAKE_EASE; draw(elapsed); raf = requestAnimationFrame(tick); }; const stop = () => cancelAnimationFrame(raf); const run = () => { last = performance.now(); stop(); raf = requestAnimationFrame(tick); }; const onMove = (event: PointerEvent) => { if (!interactiveRef.current) return; const box = container.getBoundingClientRect(); pointer.x = event.clientX - box.left; pointer.y = event.clientY - box.top; hoverTarget = 1; }; const onLeave = () => { hoverTarget = 0; }; container.addEventListener("pointermove", onMove); container.addEventListener("pointerleave", onLeave); const gate = createPauseGate({ target: container, onPause: stop, onResume: run, }); const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => measure()); observer?.observe(container); const themeObserver = typeof MutationObserver === "undefined" ? null : new MutationObserver(() => refreshColors()); themeObserver?.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "class"], }); run(); return () => { killed = true; container.removeEventListener("pointermove", onMove); container.removeEventListener("pointerleave", onLeave); gate.dispose(); observer?.disconnect(); themeObserver?.disconnect(); stop(); field.dispose(); canvas.style.width = ""; canvas.style.height = ""; }; }, [fieldOn, still, stillTime, generation]); // biome-ignore lint/correctness/useExhaustiveDependencies: `overrides` is not read here, the effect closure reads it live React.useEffect(() => { refreshRef.current?.(); }, [overrides]); return (

{ containerRef.current = node; if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef) forwardedRef.current = node; }} data-fluid={fieldOn ? "on" : "off"} className={cn("relative isolate overflow-hidden", className)} {...props} > {fieldOn ? ( ) : null} {children}

); }, ); SulaField.displayName = "SulaField"; 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":"field-geometry.ts","content":"$51","type":"registry:ui","target":"components/ui/field-geometry.ts"},{"path":"drive.ts","content":"$52","type":"registry:ui","target":"components/ui/drive.ts"},{"path":"sula-field.tsx","content":"$53","type":"registry:ui","target":"components/ui/sula-field.tsx"}],"className":"h-[70svh] min-h-80"}]]}]