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:T11e0,import { emergeDroplet } from "./emerge"; import { type Blob, bridgeNecks, type Neck } from "./geometry"; export type FabLayout = "line" | "arc"; export type FabDirection = "up" | "down" | "left" | "right"; export interface FabSlot { x: number; y: number; } /** Real trigger and bead radii plus the constant edge gap between neighbours. */ export interface FabSpacing { triggerR: number; beadR: number; gap: number; } /** Per-bead launch delay, as a fraction of open progress. Nearer beads lead. */ export const FAB_STAGGER = 0.08; /** The arc fan spans this many degrees, centred on the layout direction. */ const ARC_SPAN = (100 * Math.PI) / 180; const UNIT: Record = { up: { x: 0, y: -1 }, down: { x: 0, y: 1 }, left: { x: -1, y: 0 }, right: { x: 1, y: 0 }, }; function lineSlots( count: number, direction: FabDirection, { triggerR, beadR, gap }: FabSpacing, ): FabSlot[] { const unit = UNIT[direction]; /* Edge gaps are constant: the trigger edge to bead0 edge is `gap`, and every * bead edge to the next bead edge is `gap`, whatever the two radii are. */ const first = triggerR + beadR + gap; const step = 2 * beadR + gap; return Array.from({ length: count }, (_, i) => { const distance = first + i * step; return { x: unit.x * distance, y: unit.y * distance }; }); } function arcSlots( count: number, direction: FabDirection, { triggerR, beadR, gap }: FabSpacing, ): FabSlot[] { /* Fan evenly across ARC_SPAN centred on the direction's axis. A single bead * sits on that axis. Every bead is one radius from the trigger centre, so the * trigger edge to bead edge gap is `gap`. */ const unit = UNIT[direction]; const center = Math.atan2(unit.y, unit.x); const radius = triggerR + beadR + gap; return Array.from({ length: count }, (_, i) => { const frac = count === 1 ? 0.5 : i / (count - 1); const angle = center - ARC_SPAN / 2 + frac * ARC_SPAN; return { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius }; }); } /** Slot centres for the actions, relative to the trigger centre at (0,0). */ export function fabSlots( count: number, layout: FabLayout, direction: FabDirection, spacing: FabSpacing, ): FabSlot[] { if (count <= 0) return []; return layout === "arc" ? arcSlots(count, direction, spacing) : lineSlots(count, direction, spacing); } /** A fully rounded blob from a measured rect, relative to the stage box. */ export function blobFromRect(rect: { left: number; top: number; width: number; height: number; }): Blob { const hw = rect.width / 2; const hh = rect.height / 2; return { cx: rect.left + hw, cy: rect.top + hh, hw, hh, r: Math.min(hw, hh), }; } /** * The field at open-progress `t` (0 closed, 1 open; may pass 1 for spring * overshoot): the trigger blob plus one bead per action, each emerging from the * trigger to its slot, staggered so nearer beads lead. Necks tether the beads * that are still travelling. `slots` are the beads at their rest slot positions. */ export function fabPhase( trigger: Blob, slots: Blob[], t: number, ): { blobs: Blob[]; necks: Neck[] } { const blobs: Blob[] = [trigger]; const necks: Neck[] = []; for (let i = 0; i < slots.length; i++) { const slot = slots[i] as Blob; /* Later beads launch after the nearer ones, but every local timeline maps * global t=1 back to exactly 1. This preserves the cascade without leaving * the early beads stranded at different overshoot positions at rest. */ const delay = i * FAB_STAGGER; const ti = (t - delay) / (1 - delay); const { blob, neck } = emergeDroplet(trigger, slot, ti); blobs.push(blob); if (neck) necks.push(neck); } return { blobs, necks }; } /** Resting surface tension follows the layout's visual topology. Arc actions * radiate from the trigger. Line actions form a strong chain, with only the first * action tied weakly to the trigger so the menu reads as one strand that can be * pulled back into the FAB. */ export function fabBridges( blobs: Blob[], k: number, merge: number, layout: FabLayout, ): Neck[] { const trigger = blobs[0]; if (!trigger) return []; const actions = blobs.slice(1); if (layout === "arc") { return actions.flatMap((bead) => bridgeNecks([trigger, bead], k, merge)); } const actionChain = bridgeNecks(actions, k, merge); const first = actions[0]; const triggerTie = first ? bridgeNecks([trigger, first], k, merge * 0.5) : []; return [...actionChain, ...triggerTie]; } 52:T5c88,"use client"; import { animate, useReducedMotion } from "motion/react"; import * as React from "react"; import { cn } from "@/lib/utils"; import { createField, type FieldColors, resolveColor, shineForBackdrop, } from "./field"; import { type Blob, type Neck, packHover, packUniforms, } from "./geometry"; import { createPauseGate } from "./pause"; import { useContextRecovery } from "./recovery"; import { useFieldRetune } from "./retune"; import { clamp01, smoothstep } from "./curves"; import { createEnergyTracker } from "./energy"; import { sideSpring } from "./springs"; import { FAB_STAGGER, type FabDirection, type FabLayout, fabBridges, fabPhase, fabSlots, } from "./fab-geometry"; export interface SulaFabAction { icon: React.ReactNode; /** The accessible name and the tooltip text. */ label: string; onClick?: () => void; href?: string; } export type SulaFabTooltipPosition = "left" | "right" | "top"; export interface SulaFabProps extends Omit, "onChange"> { actions: SulaFabAction[]; /** The trigger glyph. Defaults to a plus. */ icon?: React.ReactNode; /** The trigger's accessible name. Defaults to "Actions". */ label?: string; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; layout?: FabLayout; direction?: FabDirection; /** Tooltip side. Defaults to left for line layouts and top for arcs. */ tooltipPosition?: SulaFabTooltipPosition; /** Constant edge gap in px between the trigger and beads, and between beads. */ gap?: number; /** false or reduced-motion renders a plain stacked menu with no canvas. */ fluid?: boolean; accentColor?: string; backdrop?: string; tint?: string; shine?: number; } /** Edge gap between neighbours in px. Kept tight so open beads sit within bridge * reach and hold the rest necks. */ const GAP_DEFAULT = 12; /** Nominal trigger radius from the `size-14` class (56px box), for the non-fluid * fallback layout before any measurement runs. */ const NOMINAL_TRIGGER_R = 28; /** Nominal bead radius from the `size-11` class (44px box). */ const NOMINAL_BEAD_R = 22; /** Room past the outermost bead so its cap and neck are never clipped. */ const SLACK = 26; const MAX_DPR = 2; /** Merge radius at rest: firm glass. */ const REST_K = 16; /** Merge radius while beads travel: gooey. */ const K_ACTIVE = 26; /** Peak surface undulation in px, alive only while beads move. */ const WOBBLE = 0.6; /** Merge floor while open: adjacent beads hold a soft surface-tension waist at * rest instead of floating apart. Kept low so the chain never fuses. */ const REST_MERGE = 0.32; /** Peak edge displacement of the hover ripple, in px. Local to the hovered * part, so it can run hotter than the global settle wobble. */ const HOVER_WOBBLE = 1.1; /** Per-frame ease toward the hover target, in and out. */ const HOVER_EASE = 0.16; 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), }; } const DefaultPlus = ( ); export const SulaFab = React.forwardRef( ( { actions, icon = DefaultPlus, label = "Actions", open: openProp, defaultOpen = false, onOpenChange, layout = "line", direction = "up", tooltipPosition, gap = GAP_DEFAULT, fluid = true, accentColor, backdrop, tint, shine, className, ...props }, forwardedRef, ) => { const reduced = useReducedMotion(); const rootRef = React.useRef(null); const canvasRef = React.useRef(null); const stageRef = React.useRef(null); const triggerRef = React.useRef(null); const actionRefs = React.useRef>([]); 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; const gapRef = React.useRef(gap); gapRef.current = gap; const fieldRef = React.useRef>(null); const wakeRef = React.useRef<(() => void) | null>(null); const measureRef = React.useRef<(() => void) | null>(null); const [mounted, setMounted] = React.useState(false); React.useEffect(() => setMounted(true), []); const isFluid = fluid && !reduced && !failed && mounted; /* Kept mounted through a failure so the context can be handed back. */ const keepCanvas = fluid && !reduced && mounted; const resolvedTooltipPosition = tooltipPosition ?? (layout === "arc" ? "top" : "left"); const isControlled = openProp !== undefined; const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen); const open = isControlled ? openProp : uncontrolledOpen; const openRef = React.useRef(open); openRef.current = open; const setOpen = React.useCallback( (next: boolean) => { if (!isControlled) setUncontrolledOpen(next); onOpenChange?.(next); }, [isControlled, onOpenChange], ); const slotOffsets = React.useMemo( () => fabSlots(actions.length, layout, direction, { triggerR: NOMINAL_TRIGGER_R, beadR: NOMINAL_BEAD_R, gap, }), [actions.length, layout, direction, gap], ); const openTargetRef = React.useRef<(next: boolean) => void>(() => {}); // biome-ignore lint/correctness/useExhaustiveDependencies: `generation` is not read here, it is what rebuilds the field on a restored context React.useEffect(() => { if (!isFluid) return; const canvas = canvasRef.current; const stage = stageRef.current; const root = rootRef.current; const trigger = triggerRef.current; if (!canvas || !stage || !root || !trigger) return; const field = createField({ canvas, colors: readColors(root, overridesRef.current), onContextLost, }); if (!field) { onContextLost(); return; } fieldRef.current = field; onContextReady(); let triggerBlob: Blob = { cx: 0, cy: 0, hw: 0, hh: 0, r: 0 }; let triggerCenter = { x: 0, y: 0 }; let slotBlobs: Blob[] = []; let canvasH = 0; let dpr = 1; let raf = 0; let running = 0; let hoverIndex = -1; let hoverAmt = 0; let hoverBlob: Blob | null = null; const energy = createEnergyTracker(); const start = performance.now(); const oT = { value: openRef.current ? 1 : 0 }; let pOpen = oT.value; /* Index 0 is the trigger, i + 1 the beads, matching fabPhase's blob order. * On leave the last blob is kept so the ripple fades in place. */ const updateHover = (blobs: Blob[]) => { const focus = hoverIndex >= 0 ? blobs[hoverIndex] : null; hoverAmt += ((focus ? 1 : 0) - hoverAmt) * HOVER_EASE; if (focus) hoverBlob = focus; }; let lastW = 0; let lastH = 0; const measure = () => { const rootBox = root.getBoundingClientRect(); const triggerRect = trigger.getBoundingClientRect(); /* Layout sizes, never rect sizes: the open trigger carries rotate-45, * which inflates its client-rect AABB by sqrt(2). Measured that way the * first slot sat a near-doubled edge gap out. The rect centre is still * exact under any rotation, so positions may keep using it. */ const tw = trigger.offsetWidth || triggerRect.width; const th = trigger.offsetHeight || triggerRect.height; const firstNode = actionRefs.current[0]; const beadH = firstNode ? firstNode.offsetHeight : th * 0.7; const triggerR = Math.min(tw, th) / 2; const beadR = firstNode ? Math.min(firstNode.offsetWidth, firstNode.offsetHeight) / 2 : beadH / 2; const offsets = fabSlots(actions.length, layout, direction, { triggerR, beadR, gap: gapRef.current, }); // Stage bounds in root coords, covering the trigger and every slot. const cx0 = triggerRect.left - rootBox.left + triggerRect.width / 2; const cy0 = triggerRect.top - rootBox.top + triggerRect.height / 2; let minX = -tw / 2; let maxX = tw / 2; let minY = -th / 2; let maxY = th / 2; for (const [i, off] of offsets.entries()) { const node = actionRefs.current[i]; const bw = (node?.offsetWidth || beadH) / 2; const bh = (node?.offsetHeight || beadH) / 2; minX = Math.min(minX, off.x - bw); maxX = Math.max(maxX, off.x + bw); minY = Math.min(minY, off.y - bh); maxY = Math.max(maxY, off.y + bh); } stage.style.left = `${cx0 + minX - SLACK}px`; stage.style.top = `${cy0 + minY - SLACK}px`; stage.style.width = `${maxX - minX + SLACK * 2}px`; stage.style.height = `${maxY - minY + SLACK * 2}px`; const stageBox = stage.getBoundingClientRect(); const width = Math.ceil(stageBox.width); const height = Math.ceil(stageBox.height); const nextDpr = Math.min(window.devicePixelRatio || 1, MAX_DPR); if (width !== lastW || height !== lastH || nextDpr !== dpr) { canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; field.resize(width, height, nextDpr); lastW = width; lastH = height; } canvasH = height; dpr = nextDpr; triggerBlob = { cx: triggerRect.left + triggerRect.width / 2 - stageBox.left, cy: triggerRect.top + triggerRect.height / 2 - stageBox.top, hw: tw / 2, hh: th / 2, r: triggerR, }; triggerCenter = { x: triggerBlob.cx, y: triggerBlob.cy }; slotBlobs = offsets.map((off, i) => { const node = actionRefs.current[i]; const bw = (node?.offsetWidth || beadH) / 2; const bh = (node?.offsetHeight || beadH) / 2; return { cx: triggerCenter.x + off.x, cy: triggerCenter.y + off.y, hw: bw, hh: bh, r: Math.min(bw, bh), }; }); }; const paint = (blobs: Blob[], necks: Neck[], liveK: number) => { field.draw({ packed: packUniforms({ blobs, necks, k: liveK }, dpr, canvasH), k: liveK * dpr, time: (performance.now() - start) / 1000, wobble: WOBBLE * energy.value, alpha: 1, hover: hoverBlob && hoverAmt > 0.01 ? packHover(hoverBlob, hoverAmt * HOVER_WOBBLE, dpr, canvasH) : null, }); }; const liveK = () => REST_K + (K_ACTIVE - REST_K) * energy.value; const tick = () => { const t = oT.value; const prog = clamp01(t); const v = t - pOpen; pOpen = t; energy.bump(Math.abs(v)); const { blobs, necks } = fabPhase(triggerBlob, slotBlobs, t); updateHover(blobs); const k = liveK(); /* Melt the neck as the fab closes: the whole merge fades to zero by the * time the beads absorb, so the trigger-to-bead neck recedes by strength * instead of snapping off at the clean-close cut. At settled open the * floor keeps a faint pull; mid-travel the sine drives the full goo. * Floor the neck merge while open so settled-open beads keep a faint * pull; necks still fully retract as prog falls to 0 on close. */ const merge = prog > 0 ? Math.max(REST_MERGE, Math.sin(Math.PI * prog)) * smoothstep(0.02, 0.28, prog) : 0; const bridge = fabBridges(blobs, k, merge, layout); /* Below this the field settles to a clean trigger, no absorbed-bead halo. */ const closed = prog < 0.06; const drawBlobs = closed ? [triggerBlob] : blobs; const drawNecks = closed ? [] : [...necks, ...bridge]; paint(drawBlobs, drawNecks, k); // Beads are DOM parts moved to match their blob each frame. const last = slotBlobs.length; for (let i = 0; i < last; i++) { const node = actionRefs.current[i]; const bead = blobs[i + 1]; if (!node || !bead) continue; node.style.transform = `translate(-50%, -50%) translate(${ bead.cx - triggerCenter.x }px, ${bead.cy - triggerCenter.y}px)`; node.style.opacity = closed ? "0" : `${clamp01((prog - i * FAB_STAGGER) / 0.22)}`; } if ( running === 0 && energy.parked() && hoverIndex < 0 && hoverAmt < 0.02 ) { return; } raf = requestAnimationFrame(tick); }; const wake = () => { if (!gate.awake()) return; cancelAnimationFrame(raf); raf = requestAnimationFrame(tick); }; wakeRef.current = wake; measureRef.current = measure; const gate = createPauseGate({ target: root, onPause: () => cancelAnimationFrame(raf), onResume: () => wake(), }); const controls = new Set>(); const run = (to: [number, number]) => { running += 1; const control = animate(oT, { value: to }, sideSpring); controls.add(control); const finish = () => { running = Math.max(0, running - 1); controls.delete(control); }; void control.finished.then(finish, finish); wake(); return control; }; let openControl: ReturnType | null = null; const toOpen = (next: boolean) => { measure(); openControl?.stop(); /* Motion caches one visual element per animated subject and reads the * next "from" out of it, so a bare oT.value reset is invisible to it. * The explicit [0,1] / [1,0] keyframes are what make the second and * every later toggle animate instead of snapping. */ openControl = run(next ? [0, 1] : [1, 0]); }; openTargetRef.current = toOpen; measure(); wake(); /* Hovering the trigger or a bead wakes a ripple on that part alone; the * rest of the chain stays a calm sheet of glass. */ const hoverNodes = [trigger, ...actionRefs.current].filter( (node): node is HTMLElement => node != null, ); const hoverHandlers = hoverNodes.map((node, index) => { const enter = () => { hoverIndex = index; wake(); }; const leave = () => { if (hoverIndex === index) hoverIndex = -1; }; node.addEventListener("pointerenter", enter); node.addEventListener("pointerleave", leave); return { node, enter, leave }; }); const remeasure = () => { measure(); wake(); }; const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(remeasure); observer?.observe(root); window.addEventListener("resize", remeasure); void document.fonts?.ready.then(remeasure).catch(() => undefined); const themeObserver = typeof MutationObserver === "undefined" ? null : new MutationObserver(() => { field.setColors(readColors(root, overridesRef.current)); wake(); }); themeObserver?.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "class"], }); return () => { for (const control of controls) control.stop(); openTargetRef.current = () => {}; for (const { node, enter, leave } of hoverHandlers) { node.removeEventListener("pointerenter", enter); node.removeEventListener("pointerleave", leave); } window.removeEventListener("resize", remeasure); observer?.disconnect(); themeObserver?.disconnect(); gate.dispose(); cancelAnimationFrame(raf); field.dispose(); fieldRef.current = null; wakeRef.current = null; measureRef.current = null; canvas.style.width = ""; canvas.style.height = ""; for (const node of actionRefs.current) { if (!node) continue; node.style.transform = ""; node.style.opacity = ""; } }; }, [isFluid, actions.length, layout, direction, generation]); useFieldRetune( fieldRef, () => (rootRef.current ? readColors(rootRef.current, overrides) : null), overrides, wakeRef, ); /* gap moves every slot, so the field has to re-measure, and a parked loop * needs waking or the new spacing waits for the pointer. */ // biome-ignore lint/correctness/useExhaustiveDependencies: `gap` is not read here, the effect closure reads it live React.useEffect(() => { measureRef.current?.(); wakeRef.current?.(); }, [gap]); // Drive the field toggle from the open state. const previousOpen = React.useRef(open); React.useLayoutEffect(() => { const was = previousOpen.current; previousOpen.current = open; if (isFluid && was !== open) openTargetRef.current(open); }, [open, isFluid]); // Hide the actions from AT and the tab order while closed, and move focus. React.useEffect(() => { const nodes = actionRefs.current; for (const node of nodes) { if (!node) continue; if (open) node.removeAttribute("inert"); else node.setAttribute("inert", ""); } if (open) { const first = nodes[0]?.querySelector( "a, button, [tabindex]", ); first?.focus(); } }, [open]); const onRootKeyDown = (event: React.KeyboardEvent) => { if (event.key === "Escape" && openRef.current) { event.stopPropagation(); setOpen(false); triggerRef.current?.focus(); } }; const runAction = (action: SulaFabAction) => { action.onClick?.(); setOpen(false); }; return ( // biome-ignore lint/a11y/noStaticElementInteractions: the root is a plain container; the keydown only closes the menu on Escape, while the real controls are the trigger button and the action buttons inside it

{ rootRef.current = node; if (typeof forwardedRef === "function") forwardedRef(node); else if (forwardedRef) forwardedRef.current = node; }} data-fluid={isFluid ? "on" : "off"} data-open={open || undefined} onKeyDown={onRootKeyDown} className={cn("relative inline-flex", className)} {...props} > {keepCanvas ? ( ) : null} {actions.map((action, index) => { const offset = slotOffsets[index] ?? { x: 0, y: 0 }; const restTransform = `translate(-50%, -50%) translate(${ open ? offset.x : 0 }px, ${open ? offset.y : 0}px)`; const domStyle: React.CSSProperties | undefined = isFluid ? undefined : { transform: restTransform, opacity: open ? 1 : 0, }; const Tag = action.href ? "a" : "button"; return (

{ actionRefs.current[index] = node; }} style={domStyle} className={cn( "absolute top-1/2 left-1/2 z-10", !isFluid && "transition-[transform,opacity] duration-slow ease-spring motion-reduce:transition-none", !isFluid && !open && "pointer-events-none", )} > runAction(action)} className={cn( "peer grid size-11 place-items-center rounded-full outline-none", "border border-border bg-surface/80 text-ink shadow-raised backdrop-blur-md", "transition-tint duration-fast ease-soft hover:text-accent", "focus-visible:ring-focus", )} >

); })}

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