4e: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"] 4f: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"] 50:T2b21,"use client"; import { cn } from "@/lib/utils"; import gsap from "gsap"; import React, { useEffect, useLayoutEffect, useRef, useState } from "react"; import { bezierEase, gsapTicker } from "./gsap-motion"; import { createSpringFollower, MOTION_EASE, LAYOUT_TRANSITION } from "./motion-curves"; export interface DockItem { id: string; label: string; icon: React.ReactNode; onClick?: () => void; isActive?: boolean; badge?: string | number; } export interface DockProps extends React.HTMLAttributes { items: DockItem[]; baseSize?: number; magnification?: number; distance?: number; containerHeight?: number | string; gap?: number; } /** Magnification spring — the same constants the Motion build uses. */ const SIZE_SPRING = { mass: 0.1, stiffness: 150, damping: 12 }; /** * Tooltip in/out: 0.15s tweens with no ease given, which Motion resolves to * `easeOut` for every value (animateMotionValue's default). */ const TOOLTIP_EASE = bezierEase(MOTION_EASE.easeOut); const DOT_EASE = bezierEase(LAYOUT_TRANSITION.ease); /** Pointer position shared by every icon; `Infinity` while the pointer is away. */ type PointerBus = { x: number; listeners: Set<(x: number) => void>; }; /** Where the active dot last sat, so the next one can fly in from there. */ type DotMemory = { rect: DOMRect | null }; /** A `useRef` box handed to the icons (typed locally so React 18 and 19 types agree). */ type Held = { readonly current: T }; export const Dock = React.forwardRef( ( { items, baseSize = 48, magnification = 80, distance = 140, containerHeight = 64, gap = 12, className, style, onMouseMove, onMouseLeave, ...props }, ref, ) => { const bus = useRef({ x: Infinity, listeners: new Set() }); const dot = useRef({ rect: null }); const [screenTier, setScreenTier] = useState<"desktop" | "tablet" | "mobile">("desktop"); // Automatically detect small screens to scale down physics on touch devices useEffect(() => { const handleResize = () => { const w = window.innerWidth; if (w < 480) { setScreenTier("mobile"); } else if (w < 640) { setScreenTier("tablet"); } else { setScreenTier("desktop"); } }; handleResize(); window.addEventListener("resize", handleResize); return () => window.removeEventListener("resize", handleResize); }, []); const isSmallMobile = screenTier === "mobile"; const isTablet = screenTier === "tablet"; const isMobile = isSmallMobile || isTablet; const isCrowded = items.length >= 7; // Responsive physics sizing fallbacks for mobile viewports: // When a large item set (7+ items) is rendered on narrow mobile screens (<480px), // scale resting size down to 28px and gap to 4px so the dock stays neatly within the screen bounds. const effectiveBaseSize = isSmallMobile && isCrowded ? Math.min(baseSize, 28) : isMobile ? Math.min(baseSize, isCrowded ? 34 : 36) : baseSize; const effectiveMagnification = isSmallMobile && isCrowded ? Math.min(magnification, 40) : isMobile ? Math.min(magnification, isCrowded ? 48 : 52) : magnification; const effectiveDistance = isSmallMobile && isCrowded ? Math.min(distance, 70) : isMobile ? Math.min(distance, 100) : distance; const effectiveGap = isSmallMobile && isCrowded ? Math.min(gap, 4) : isMobile ? Math.min(gap, 6) : gap; const dynamicHeight = typeof containerHeight === "number" ? `${ isSmallMobile && isCrowded ? Math.min(containerHeight, 52) : isMobile ? Math.min(containerHeight, 60) : containerHeight }px` : containerHeight; const publish = (x: number) => { bus.current.x = x; bus.current.listeners.forEach((listener) => listener(x)); }; return (

{ publish(e.clientX); onMouseMove?.(e); }} onMouseLeave={(e) => { publish(Infinity); onMouseLeave?.(e); }} style={{ height: dynamicHeight, gap: `${effectiveGap}px`, ...style, }} className={cn( "mx-auto flex items-end justify-center rounded-2xl shadow-2xl transition-all duration-300", isSmallMobile && isCrowded ? "px-1.5 pt-1 pb-0.5" : "px-2 sm:px-4 pt-1 sm:pt-2.5 pb-0.5 sm:pb-2.5", "bg-card/70 backdrop-blur-xl border border-border/80", "ring-1 ring-foreground/5", "w-fit max-w-[calc(100%-0.5rem)] sm:max-w-full overflow-visible", className, )} {...props} > {items.map((item) => ( ))}

); }, ); Dock.displayName = "Dock"; interface DockIconProps { item: DockItem; busRef: Held; dotRef: Held; baseSize: number; magnification: number; distance: number; } const DockIcon: React.FC = ({ item, busRef, dotRef, baseSize, magnification, distance, }) => { const iconRef = useRef(null); const tooltipRef = useRef(null); const [isHovered, setIsHovered] = useState(false); // Size follows the pointer through a spring, every frame, without React: // distance from the icon's centre maps [-distance, 0, distance] onto // [base, magnified, base] (clamped), and the spring chases that target. const sizing = useRef({ baseSize, magnification, distance }); // Synced after every commit (before the effects below read it), not in render. useLayoutEffect(() => { sizing.current = { baseSize, magnification, distance }; }); const retarget = useRef<() => void>(() => {}); useLayoutEffect(() => { const icon = iconRef.current; const bus = busRef.current; if (!icon) return; const apply = (size: number) => { icon.style.width = `${size}px`; icon.style.height = `${size}px`; }; const target = (x: number) => { const { baseSize: base, magnification: peak, distance: reach } = sizing.current; if (!Number.isFinite(x)) return base; const bounds = icon.getBoundingClientRect(); const offset = Math.abs(x - bounds.x - bounds.width / 2); if (offset >= reach) return base; return peak + (base - peak) * (offset / reach); }; const spring = createSpringFollower(target(bus.x), apply, { ...SIZE_SPRING, ticker: gsapTicker, }); apply(spring.get()); const listener = (x: number) => spring.set(target(x)); retarget.current = () => listener(bus.x); bus.listeners.add(listener); return () => { bus.listeners.delete(listener); spring.destroy(); }; }, [busRef]); // New sizes (the mobile fallbacks kicking in) spring over from where it is. useEffect(() => { retarget.current(); }, [baseSize, magnification, distance]); // Tooltip: stays mounted, so its exit can play before it hides. useLayoutEffect(() => { const tip = tooltipRef.current; if (!tip) return; gsap.killTweensOf(tip); if (isHovered) { gsap.fromTo( tip, { autoAlpha: 0, y: 10, scale: 0.8 }, { autoAlpha: 1, y: 0, scale: 1, duration: 0.15, ease: TOOLTIP_EASE }, ); } else if (gsap.getProperty(tip, "opacity") !== 0) { gsap.to(tip, { autoAlpha: 0, y: 5, scale: 0.8, duration: 0.15, ease: TOOLTIP_EASE }); } }, [isHovered]); return (

{/* Floating Tooltip (Renders on all devices on hover/touch) */}

{item.label}

{/* Interactive Dock Button */} {/* Active Dot Indicator */}

{item.isActive && }

); }; /** * The running-app dot. Only the active icon renders one, so when the active * app changes the new dot flies in from where the old one sat — the shared * layout animation, on Motion's default layout curve (0.45s, [0.4, 0, 0.1, 1]). */ function ActiveDot({ memoryRef }: { memoryRef: Held }) { const ref = useRef(null); useLayoutEffect(() => { const el = ref.current; const memory = memoryRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const from = memory.rect; if (from && (from.x !== rect.x || from.y !== rect.y)) { gsap.fromTo( el, { x: from.x - rect.x, y: from.y - rect.y }, { x: 0, y: 0, duration: LAYOUT_TRANSITION.duration, ease: DOT_EASE }, ); } memory.rect = rect; return () => { // Remember where it left from, including mid-flight, for the next dot. memory.rect = el.getBoundingClientRect(); }; }, [memoryRef]); return (

); } 51:T248f,/** * Motion curves with no animation library behind them. * * The components here ship as CSS, GSAP or Motion builds that must move * identically, so the curves are computed once, from the same numbers, and * handed to whichever engine runs them: * * - `cubicBezier(x1, y1, x2, y2)` → an easing function (GSAP accepts any * `(progress) => value` as `ease`), exact for Motion's `ease: [..]` arrays * and for CSS `cubic-bezier()`. * - `spring({ stiffness, damping, mass })` → the analytic solution Motion * Motion uses, as an easing function plus the time it takes to settle, or * as a CSS `linear()` string for a fixed start and end. * - `createSpringFollower` → a value that chases a moving target through the * same spring every frame, like Motion's `useSpring`, for pointer-driven * motion that no fixed curve can describe. */ // --------------------------------------------------------------------------- // Cubic bezier // --------------------------------------------------------------------------- /** * The CSS / Motion cubic-bezier as a function of progress. Newton-Raphson * with a bisection fallback, the same solver browsers use. */ export function cubicBezier(x1: number, y1: number, x2: number, y2: number) { if (x1 === y1 && x2 === y2) return (t: number) => t; const a = (p1: number, p2: number) => 1 - 3 * p2 + 3 * p1; const b = (p1: number, p2: number) => 3 * p2 - 6 * p1; const c = (p1: number) => 3 * p1; const at = (t: number, p1: number, p2: number) => ((a(p1, p2) * t + b(p1, p2)) * t + c(p1)) * t; const slope = (t: number, p1: number, p2: number) => 3 * a(p1, p2) * t * t + 2 * b(p1, p2) * t + c(p1); const solveX = (x: number) => { let t = x; for (let i = 0; i < 8; i++) { const s = slope(t, x1, x2); if (Math.abs(s) < 1e-6) break; const err = at(t, x1, x2) - x; if (Math.abs(err) < 1e-7) return t; t -= err / s; } let lo = 0; let hi = 1; t = x; for (let i = 0; i < 30 && hi - lo > 1e-7; i++) { const value = at(t, x1, x2); if (value < x) lo = t; else hi = t; t = (lo + hi) / 2; } return t; }; return (x: number) => (x <= 0 ? 0 : x >= 1 ? 1 : at(solveX(x), y1, y2)); } /** Motion's named eases, as the cubic-beziers they are. */ export const MOTION_EASE = { linear: [0, 0, 1, 1], easeIn: [0.42, 0, 1, 1], easeOut: [0, 0, 0.58, 1], easeInOut: [0.42, 0, 0.58, 1], circIn: [0.55, 0, 1, 0.45], circOut: [0.55, 0, 0.45, 1], circInOut: [0.85, 0, 0.15, 1], backIn: [0.31, 0.01, 0.66, -0.59], backOut: [0.33, 1.53, 0.69, 0.99], anticipate: [0.66, -0.56, 0.34, 1.35], } as const; /** * Motion's default layout transition (`layout` / `layoutId`): * `{ duration: 0.45, ease: [0.4, 0, 0.1, 1] }`. */ export const LAYOUT_TRANSITION = { duration: 0.45, ease: [0.4, 0, 0.1, 1] as const }; // --------------------------------------------------------------------------- // Spring // --------------------------------------------------------------------------- export interface SpringOptions { /** Motion default 100. */ stiffness?: number; /** Motion default 10. */ damping?: number; /** Motion default 1. */ mass?: number; /** Starting velocity, in units of the whole distance per second. */ velocity?: number; /** How close to the end counts as settled, as a fraction of the distance. */ restDelta?: number; } /** * Normalised position (0 → 1) of a spring released from 0 towards 1, at time * `t` seconds. The closed-form solution Motion's `spring()` generator * uses for the under-, critically and over-damped cases. */ export function springAt(options: SpringOptions = {}) { const { stiffness = 100, damping = 10, mass = 1, velocity = 0 } = options; const zeta = damping / (2 * Math.sqrt(stiffness * mass)); const omega0 = Math.sqrt(stiffness / mass); // Motion's convention: distance still to cover, velocity toward it negated. const delta = 1; const v0 = -velocity; if (zeta < 1) { const omegaD = omega0 * Math.sqrt(1 - zeta * zeta); return (t: number) => { const envelope = Math.exp(-zeta * omega0 * t); return ( 1 - envelope * (((v0 + zeta * omega0 * delta) / omegaD) * Math.sin(omegaD * t) + delta * Math.cos(omegaD * t)) ); }; } if (zeta === 1) { return (t: number) => 1 - Math.exp(-omega0 * t) * (delta + (v0 + omega0 * delta) * t); } const omegaD = omega0 * Math.sqrt(zeta * zeta - 1); return (t: number) => { const envelope = Math.exp(-zeta * omega0 * t); const freq = Math.min(omegaD * t, 300); return ( 1 - (envelope * ((v0 + zeta * omega0 * delta) * Math.sinh(freq) + omegaD * delta * Math.cosh(freq))) / omegaD ); }; } /** Seconds until the spring stays within `restDelta` of its end. */ export function springDuration(options: SpringOptions = {}) { const at = springAt(options); const restDelta = options.restDelta ?? 0.001; const step = 1 / 240; let lastOutside = 0; for (let t = 0; t <= 10; t += step) { if (Math.abs(1 - at(t)) > restDelta) lastOutside = t; else if (t - lastOutside > 0.1) break; } return Math.max(lastOutside + step, step); } /** * A spring as a duration and an easing function over it — what GSAP takes: * * const { duration, ease } = springEase({ stiffness: 300, damping: 20 }); * gsap.to(el, { y: 0, duration, ease }); * * Exact for a fixed start and end; a spring that has to react mid-flight to a * new target needs `createSpringFollower` instead. */ export function springEase(options: SpringOptions = {}) { const duration = springDuration(options); const at = springAt(options); return { duration, ease: (progress: number) => (progress >= 1 ? 1 : at(progress * duration)), }; } /** * A spring as a CSS `linear()` easing and its duration in ms, for * `transition` / `animation` with a fixed start and end. * * const { easing, duration } = springLinear({ stiffness: 400, damping: 30 }); * el.style.transition = `transform ${duration}ms ${easing}`; */ export function springLinear(options: SpringOptions = {}, pointsPerSecond = 60) { const duration = springDuration(options); const at = springAt(options); const count = Math.max(Math.ceil(duration * pointsPerSecond), 8); const points: string[] = []; for (let i = 0; i <= count; i++) { const t = (i / count) * duration; points.push(String(Math.round((i === count ? 1 : at(t)) * 10000) / 10000)); } return { easing: `linear(${points.join(", ")})`, duration: Math.round(duration * 1000) }; } // --------------------------------------------------------------------------- // Spring follower (useSpring equivalent) // --------------------------------------------------------------------------- /** Something that calls back once per frame with the time since the last, in ms. */ export interface FrameTicker { add: (callback: (deltaMs: number) => void) => () => void; } /** requestAnimationFrame as a ticker — the library-free default. */ export const rafTicker: FrameTicker = { add(callback) { let last = performance.now(); let frame = requestAnimationFrame(function tick(now) { callback(now - last); last = now; frame = requestAnimationFrame(tick); }); return () => cancelAnimationFrame(frame); }, }; export interface SpringFollower { /** Chase a new target from wherever the value is now, keeping its velocity. */ set: (target: number) => void; /** Move to a value instantly, with no motion. */ jump: (value: number) => void; get: () => number; destroy: () => void; } /** * A value that follows its target through a spring, integrating the same * equation of motion Motion's `useSpring` solves — so a pointer-driven spring * reads the same in every build. Runs only while moving; `onUpdate` receives * each new value. */ export function createSpringFollower( initial: number, onUpdate: (value: number) => void, options: SpringOptions & { restSpeed?: number; ticker?: FrameTicker } = {}, ): SpringFollower { const { stiffness = 100, damping = 10, mass = 1, ticker = rafTicker } = options; const restDelta = options.restDelta ?? 0.01; const restSpeed = options.restSpeed ?? 0.01; let value = initial; let target = initial; let velocity = 0; let stop: (() => void) | null = null; const step = (deltaMs: number) => { // Fixed 1ms sub-steps keep the integration stable for stiff springs and // independent of the frame rate. const steps = Math.min(Math.max(Math.round(deltaMs), 1), 250); for (let i = 0; i < steps; i++) { const force = -stiffness * (value - target) - damping * velocity; velocity += (force / mass) * 0.001; value += velocity * 0.001; } if (Math.abs(target - value) < restDelta && Math.abs(velocity) < restSpeed) { value = target; velocity = 0; stop?.(); stop = null; } onUpdate(value); }; return { set(next) { target = next; if (!stop && value !== target) stop = ticker.add(step); }, jump(next) { stop?.(); stop = null; value = target = next; velocity = 0; onUpdate(value); }, get: () => value, destroy() { stop?.(); stop = null; }, }; } 4d:["$","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","gsap",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","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":"gsap"}]]}]}]]}],["$","$L4e",null,{"namespace":"@avara-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/components/custom/blocks/DockBlock.tsx","content":"$50","type":"registry:component","target":"components/custom/blocks/DockBlock.tsx"},{"path":"src/components/custom/blocks/gsap-motion.ts","content":"import gsap from \"gsap\";\nimport { cubicBezier, type FrameTicker } from \"./motion-curves\";\n\n/**\n * GSAP-side glue for the GSAP builds of components that also ship a Motion\n * Motion twin. Kept apart from motion-curves.ts so the library-free curves\n * never pull GSAP into a CSS or Motion build.\n */\n\n/** `gsap.ticker` as a FrameTicker, so spring followers run on GSAP's loop. */\nexport const gsapTicker: FrameTicker = {\n add(callback) {\n const tick = (_time: number, deltaTime: number) => callback(deltaTime);\n gsap.ticker.add(tick);\n return () => gsap.ticker.remove(tick);\n },\n};\n\n/** A Motion / CSS cubic-bezier array as a GSAP ease. */\nexport const bezierEase = (curve: readonly [number, number, number, number] | readonly number[]) =>\n cubicBezier(curve[0], curve[1], curve[2], curve[3]);\n\n/** `(prefers-reduced-motion: reduce)` right now. */\nexport const prefersReducedMotion = () =>\n typeof window !== \"undefined\" &&\n window.matchMedia?.(\"(prefers-reduced-motion: reduce)\").matches === true;\n","type":"registry:component","target":"components/custom/blocks/gsap-motion.ts"},{"path":"src/components/custom/blocks/motion-curves.ts","content":"$51","type":"registry:component","target":"components/custom/blocks/motion-curves.ts"}],"className":"h-[70svh] min-h-80"}]]}]