64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:T2e05,"use client"; import { useEffect, useId, useRef, useState } from "react"; import type { PointerEvent as ReactPointerEvent, ReactNode } from "react"; /* * A Dynamic-Island-style status pill with no dependencies. * * No width or height is ever specified. The content row is measured with a * ResizeObserver and the shell is driven to that size by a small spring loop * (semi-implicit Euler, written straight to the DOM). Behind the shell two more * bodies chase the same target, one stiffer and one softer, and an SVG "goo" * filter fuses them, so the silhouette stretches and snaps like liquid. * The corner radius is derived from the live height every frame, so it never skews. */ type Snap = { key: string; icon: ReactNode; label: string | null | undefined; detail: string | null | undefined; trailing: ReactNode; }; const PAD = 24; // how far the goo layer extends past the shell on every side const MAX_RADIUS = 28; const CSS = [ ".mi-in{animation:mi-in 340ms cubic-bezier(.22,1,.36,1) 70ms both}", ".mi-out{animation:mi-out 200ms cubic-bezier(.4,0,1,1) both}", "@keyframes mi-in{from{opacity:0;filter:blur(6px);transform:scale(.94)}to{opacity:1;filter:blur(0);transform:scale(1)}}", "@keyframes mi-out{from{opacity:1;filter:blur(0);transform:scale(1)}to{opacity:0;filter:blur(6px);transform:scale(.94)}}", ".mi-glow{opacity:0;transition:opacity 260ms ease}", ".mi-root:hover .mi-glow{opacity:1}", "@media (prefers-reduced-motion:reduce){.mi-in{animation:mi-fade 200ms linear both}.mi-out{animation:mi-fade-out 120ms linear both}.mi-glow{display:none}}", "@keyframes mi-fade{from{opacity:0}to{opacity:1}}", "@keyframes mi-fade-out{from{opacity:1}to{opacity:0}}", ].join("\n"); const markInert = (el: HTMLDivElement | null) => { if (el) el.toggleAttribute("inert", true); }; const nowMs = () => performance.now(); type Spring = { x: number; v: number }; const spring = (): Spring => ({ x: 0, v: 0 }); function Row({ snap }: { snap: Snap }) { const expanded = snap.label != null; return (

{snap.icon} {expanded ? ( ) : null} {expanded && snap.trailing ? {snap.trailing} : null}

); } export function MorphingIslandNotch({ icon, label, detail, stiffness = 420, dark = true, trailing, stateKey, idleWidth = 0, className, }: { icon: ReactNode; /** When label is null/undefined the island collapses to its compact pill. */ label?: string | null; detail?: string | null; /** Spring stiffness of the shell (the goo bodies derive theirs from it). */ stiffness?: number; /** Dark island on a light page, or the inverse. */ dark?: boolean; /** Optional content on the right of the expanded island (controls, a waveform). */ trailing?: ReactNode; /** * Content crossfades when this changes. Defaults to label + detail, so pass one when * the text updates live (a timer) and should change in place instead of crossfading. */ stateKey?: string | number; /** Minimum width of the collapsed pill in px, for a wider resting notch. */ idleWidth?: number; className?: string; }) { const expanded = label != null; const key = stateKey != null ? "k" + String(stateKey) : (expanded ? "1" : "0") + (label ?? "") + "\u0001" + (detail ?? ""); const cur: Snap = { key, icon, label, detail, trailing }; // Keep the outgoing content on screen while it fades, derived during render. const [shown, setShown] = useState(cur); const [prev, setPrev] = useState(null); if (shown.key !== key) { setPrev(shown); setShown(cur); } useEffect(() => { if (!prev) return; const t = window.setTimeout(() => setPrev(null), 460); return () => window.clearTimeout(t); }, [prev]); const fid = "mi" + useId().replace(/[^a-zA-Z0-9]/g, ""); const shellRef = useRef(null); const measRef = useRef(null); const mainRef = useRef(null); const fastRef = useRef(null); const slowRef = useRef(null); const rimRef = useRef(null); const cfg = useRef({ stiffness, idleWidth, expanded }); const wakeRef = useRef<(() => void) | null>(null); useEffect(() => { const shell = shellRef.current; const meas = measRef.current; const main = mainRef.current; const fast = fastRef.current; const slow = slowRef.current; const rim = rimRef.current; if (!shell || !meas || !main || !fast || !slow || !rim) return; const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); const w = spring(); const h = spring(); const fw = spring(); const fh = spring(); const sw = spring(); const sh = spring(); const all = [w, h, fw, fh, sw, sh]; const tgt = { w: 0, h: 0 }; let ready = false; let raf = 0; let last = 0; const place = (el: HTMLDivElement, bw: number, bh: number) => { const ww = Math.max(bw, 2); const hh = Math.max(bh, 2); el.style.width = ww + "px"; el.style.height = hh + "px"; el.style.left = PAD + (w.x - ww) / 2 + "px"; el.style.top = PAD + (h.x - hh) / 2 + "px"; el.style.borderRadius = Math.min(hh / 2, MAX_RADIUS) + "px"; }; const apply = () => { const ww = Math.max(w.x, 2); const hh = Math.max(h.x, 2); const r = Math.min(hh / 2, MAX_RADIUS) + "px"; shell.style.width = ww + "px"; shell.style.height = hh + "px"; shell.style.borderRadius = r; rim.style.borderRadius = r; main.style.borderRadius = r; place(fast, fw.x, fh.x); place(slow, sw.x, sh.x); }; const snap = () => { w.x = fw.x = sw.x = tgt.w; h.x = fh.x = sh.x = tgt.h; for (const s of all) s.v = 0; apply(); }; const integrate = (s: Spring, to: number, k: number, zeta: number, dt: number) => { const m = 0.9; const c = 2 * zeta * Math.sqrt(k * m); s.v += ((-k * (s.x - to) - c * s.v) / m) * dt; s.x += s.v * dt; }; const loop = (t: number) => { raf = 0; let rest = Math.min(0.05, Math.max(0, (t - last) / 1000)); last = t; const k = cfg.current.stiffness; while (rest > 1e-6) { const dt = Math.min(rest, 1 / 120); rest -= dt; integrate(w, tgt.w, k, 0.874, dt); integrate(h, tgt.h, k, 0.874, dt); integrate(fw, tgt.w, k * 2.1, 0.6, dt); integrate(fh, tgt.h, k * 2.1, 0.6, dt); integrate(sw, tgt.w, k * 0.3, 0.82, dt); integrate(sh, tgt.h, k * 0.3, 0.82, dt); } const targets = [tgt.w, tgt.h, tgt.w, tgt.h, tgt.w, tgt.h]; const settled = all.every((s, i) => Math.abs(s.x - (targets[i] ?? 0)) < 0.08 && Math.abs(s.v) < 0.08); if (settled) { snap(); return; } apply(); raf = requestAnimationFrame(loop); }; const wake = () => { const c = cfg.current; tgt.w = Math.max(meas.offsetWidth, c.expanded ? 0 : c.idleWidth); tgt.h = meas.offsetHeight; if (tgt.w === 0 || tgt.h === 0) return; if (!ready || mq.matches) { ready = true; snap(); return; } if (!raf) { last = nowMs(); raf = requestAnimationFrame(loop); } }; wakeRef.current = wake; const ro = new ResizeObserver(wake); ro.observe(meas); mq.addEventListener("change", wake); wake(); return () => { wakeRef.current = null; ro.disconnect(); mq.removeEventListener("change", wake); cancelAnimationFrame(raf); }; }, []); useEffect(() => { cfg.current = { stiffness, idleWidth, expanded }; wakeRef.current?.(); }, [stiffness, idleWidth, expanded]); const onMove = (e: ReactPointerEvent) => { const shell = shellRef.current; if (!shell) return; const r = shell.getBoundingClientRect(); const k = r.width > 0 ? shell.offsetWidth / r.width : 1; shell.style.setProperty("--mi-x", (e.clientX - r.left) * k + "px"); shell.style.setProperty("--mi-y", (e.clientY - r.top) * k + "px"); }; const bg = dark ? "#000" : "#fff"; const fg = dark ? "#fff" : "#0a0c10"; const rimShadow = dark ? "inset 0 0 0 1px rgba(255,255,255,0.1), inset 0 1px 0 rgba(255,255,255,0.14), 0 16px 34px -14px rgba(0,0,0,0.65), 0 2px 6px rgba(0,0,0,0.3)" : "inset 0 0 0 1px rgba(10,12,16,0.09), 0 16px 34px -14px rgba(10,12,16,0.3), 0 2px 6px rgba(10,12,16,0.08)"; const glow = dark ? "rgba(255,255,255,0.11)" : "rgba(10,12,16,0.06)"; const animateIn = prev !== null; return (

); } 63:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L64",null,{"files":[{"path":"components/viberdy/morphing-island-notch.tsx","content":"$65","type":"registry:component","target":"components/viberdy/morphing-island-notch.tsx"}],"className":"h-[70svh] min-h-80"}]]}]