64: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/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"],"RegistryDependencies"] 65:I[544296,["/_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"],"ItemStyles"] 66:I[8513,["/_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"],"ScrollArea"] 67:I[8513,["/_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"],"ScrollBar"] 68: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"] 69:T46f1,"use client"; import { useEffect, useRef, useState } from "react"; // --------------------------------------------------------------------------- // MetaballMerge — group membership drawn as an IMPLICIT SURFACE. Every item is // a charge in an inverse-square scalar field, F(x,y) = Σ rᵢ² / (dᵢ² + 1e-3), // and the only thing ever painted is the marching-squares isoline at F = 1, // stroked as a bare hairline. Nothing is filled, so the frame stays almost // entirely empty and the SHAPE carries the whole message: charges close enough // together share one necked contour, and an item that leaves visibly pinches // off into its own closed loop. No legend, no caption, no colour code. // --------------------------------------------------------------------------- export interface MetaballItem { id: string; label: string; /** starts inside the group (default true) */ member?: boolean; } export interface MetaballMergeProps { /** the mergeable blobs */ items?: MetaballItem[]; /** names the group for assistive tech */ label?: string; /** called with the full list of selected (merged) ids after any toggle */ onChange?: (memberIds: string[]) => void; /** extra classes merged onto the rendered root element */ className?: string; } const DEFAULT_ITEMS: MetaballItem[] = [ { id: "mara", label: "Mara Chen" }, { id: "jonas", label: "Jonas Weber" }, { id: "aiko", label: "Aiko Tanaka" }, { id: "ravi", label: "Ravi Patel", member: false }, ]; // --- field / isoline ------------------------------------------------------ const GRID = 4; // px lattice for marching squares const ISO = 1.0; // threshold — a lone charge's contour is exactly its radius const EPS = 1e-3; // softening, keeps F finite at a charge centre const STROKE_W = 1.25; const STROKE_A = 0.85; // --- layout --------------------------------------------------------------- const IN_F = 0.5; // member anchor, as a fraction of the cluster radius Rc const OUT_F = 1.35; // non-member anchor — comfortably past the merge distance const FIT = 0.47; // outermost anchor + its radius, as a fraction of min(w,h) // Charge radius is derived from the member-to-member chord rather than picked // by eye: two equal charges a chord S apart neck at half-width // √(2r² − S²/4), so r = 0.4·S puts the waist at ~0.66r — thin enough to read // as a genuine neck, thick enough that the ±6% ambient breathing never // severs it. Member slots sit one ARC step apart, so that chord is constant. const R_OF_CHORD = 0.4; const HOVER_SWELL = 1.18; // --- motion --------------------------------------------------------------- const K = 120; // spring stiffness, s^-2 const ZETA = 1.0; // critically damped const C = 2 * ZETA * Math.sqrt(K); const ORBIT_R = 3; // px ambient orbit radius const ORBIT_HZ = 0.11; const BREATHE = 0.06; // ±6% radius const BREATHE_HZ = 0.07; const DT_MAX = 0.05; const SETTLED = 0.02; const TAU = Math.PI * 2; // 16-case marching-squares segment table; corner bits are TL=1 TR=2 BR=4 BL=8 // and an edge index is 0=top 1=right 2=bottom 3=left. Cases 5 and 10 are the // saddles and are resolved from the cell-centre sample instead. const CASES: number[][] = [ [], [3, 0], [0, 1], [3, 1], [1, 2], [], [0, 2], [3, 2], [2, 3], [2, 0], [], [2, 1], [1, 3], [1, 0], [0, 3], [], ]; function hash01(s: string): number { let h = 2166136261; for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); } return ((h >>> 0) % 10000) / 10000; } /** shortest signed angle from a to b, in (-π, π] */ function angleDelta(a: number, b: number): number { let d = (b - a) % TAU; if (d > Math.PI) d -= TAU; if (d <= -Math.PI) d += TAU; return d; } type Charge = { id: string; home: number; // the item's own direction from the centroid slot: number; // the direction it is currently anchored along dist: number; // anchor distance as a fraction of Rc x: number; y: number; vx: number; vy: number; r: number; vr: number; phase: number; breathPhase: number; member: boolean; hover: boolean; }; export function MetaballMerge({ items = DEFAULT_ITEMS, label = "Group", onChange, className = "", }: MetaballMergeProps) { const canvasRef = useRef(null); const [members, setMembers] = useState(() => items.filter((it) => it.member !== false).map((it) => it.id) ); const membersRef = useRef(members); membersRef.current = members; const engineRef = useRef<{ sync: () => void; setHover: (index: number, on: boolean) => void; } | null>(null); useEffect(() => { engineRef.current?.sync(); }, [members]); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const reduced = window.matchMedia( "(prefers-reduced-motion: reduce)" ).matches; const n = items.length; // Member slots are one ARC_STEP apart on the inner circle. 2π/(n+2) // guarantees the arc still has a 3-step gap even with every item inside, // so the cluster is always an open chain and never closes into a ring // with a hole punched through the middle. const ARC_STEP = TAU / (n + 2); const CHORD = 2 * IN_F * Math.sin(ARC_STEP / 2); // in units of Rc const R_F = R_OF_CHORD * CHORD; // charge radius, in units of Rc const charges: Charge[] = items.map((it, i) => { const home = -Math.PI / 2 + (TAU * i) / Math.max(1, n); return { id: it.id, home, slot: home, dist: OUT_F, x: 0, y: 0, vx: 0, vy: 0, r: 0, vr: 0, phase: hash01(it.id) * TAU, breathPhase: hash01(it.id + "~b") * TAU, member: false, hover: false, }; }); let ink = "currentColor"; let w = 0; let h = 0; let cx = 0; let cy = 0; let rc = 0; let gw = 0; let gh = 0; let field = new Float32Array(0); let sized = false; let seeded = false; let raf = 0; let last = 0; let t = 0; const readInk = () => { ink = getComputedStyle(canvas).color; }; const resize = () => { const rect = canvas.getBoundingClientRect(); if (rect.width < 8 || rect.height < 8) { sized = false; return; } w = rect.width; h = rect.height; const dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = Math.max(1, Math.round(w * dpr)); canvas.height = Math.max(1, Math.round(h * dpr)); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); cx = w / 2; cy = h / 2; // the outermost anchor plus its own radius has to stay inside the box rc = (FIT * Math.min(w, h)) / (OUT_F + R_F); gw = Math.floor(w / GRID) + 1; gh = Math.floor(h / GRID) + 1; if (field.length !== gw * gh) field = new Float32Array(gw * gh); sized = true; }; // Membership decides BOTH the anchor distance and which slot the item // takes: members are packed onto consecutive slots of an arc centred on // their own mean direction, so every member is a neighbour of another // member and the group is always one connected contour — never two // "grouped" items sitting too far apart to merge. Non-members keep their // own direction and are pushed out to 1.35·Rc. const relayout = () => { const set = membersRef.current; for (const c of charges) c.member = set.includes(c.id); const mem = charges.filter((c) => c.member); for (const c of charges) { if (!c.member) { c.slot = c.home; c.dist = OUT_F; } } if (mem.length === 0) return; let sx = 0; let sy = 0; for (const c of mem) { sx += Math.cos(c.home); sy += Math.sin(c.home); } const mean = sx === 0 && sy === 0 ? charges[0]!.home : Math.atan2(sy, sx); // keep the members' original circular order so slots never cross mem.sort((a, b) => angleDelta(mean, a.home) - angleDelta(mean, b.home)); const half = (mem.length - 1) / 2; mem.forEach((c, k) => { c.slot = mean + (k - half) * ARC_STEP; c.dist = IN_F; }); }; const targetOf = (c: Charge) => ({ x: cx + Math.cos(c.slot) * c.dist * rc, y: cy + Math.sin(c.slot) * c.dist * rc, r: R_F * rc * (c.hover ? HOVER_SWELL : 1), }); const seed = () => { for (const c of charges) { const tg = targetOf(c); c.x = tg.x; c.y = tg.y; c.r = tg.r; c.vx = c.vy = c.vr = 0; } seeded = true; }; // integrate every spring one step; returns true while anything still moves const step = (dt: number) => { let moving = false; for (const c of charges) { const tg = targetOf(c); const ax = -K * (c.x - tg.x) - C * c.vx; const ay = -K * (c.y - tg.y) - C * c.vy; const ar = -K * (c.r - tg.r) - C * c.vr; c.vx += ax * dt; c.vy += ay * dt; c.vr += ar * dt; c.x += c.vx * dt; c.y += c.vy * dt; c.r += c.vr * dt; if ( Math.abs(c.x - tg.x) > SETTLED || Math.abs(c.y - tg.y) > SETTLED || Math.abs(c.r - tg.r) > SETTLED || Math.abs(c.vx) > SETTLED || Math.abs(c.vy) > SETTLED || Math.abs(c.vr) > SETTLED ) { moving = true; } } return moving; }; // resolved charge positions/radii for this frame, ambient pulse folded in const px = new Float64Array(n); const py = new Float64Array(n); const pr2 = new Float64Array(n); const resolve = (time: number) => { for (let i = 0; i < n; i++) { const c = charges[i]!; if (reduced) { px[i] = c.x; py[i] = c.y; pr2[i] = c.r * c.r; continue; } const a = TAU * ORBIT_HZ * time + c.phase; px[i] = c.x + Math.cos(a) * ORBIT_R; py[i] = c.y + Math.sin(a) * ORBIT_R; const br = c.r * (1 + BREATHE * Math.sin(TAU * BREATHE_HZ * time + c.breathPhase)); pr2[i] = br * br; } }; const fieldAt = (x: number, y: number) => { let f = 0; for (let i = 0; i < n; i++) { const dx = x - px[i]!; const dy = y - py[i]!; f += pr2[i]! / (dx * dx + dy * dy + EPS); } return f; }; const render = () => { if (!sized) return; ctx.clearRect(0, 0, w, h); for (let gy = 0; gy < gh; gy++) { const y = gy * GRID; const row = gy * gw; for (let gx = 0; gx < gw; gx++) { field[row + gx] = fieldAt(gx * GRID, y); } } const path = new Path2D(); // linear interpolation along a cell edge — a midpoint placement here is // what makes a marching-squares contour look visibly stair-stepped const lerp = (fa: number, fb: number) => { const d = fb - fa; if (Math.abs(d) < 1e-9) return 0.5; const tx = (ISO - fa) / d; return tx < 0 ? 0 : tx > 1 ? 1 : tx; }; for (let gy = 0; gy < gh - 1; gy++) { const r0 = gy * gw; const r1 = r0 + gw; const y0 = gy * GRID; const y1 = y0 + GRID; for (let gx = 0; gx < gw - 1; gx++) { const f00 = field[r0 + gx]!; const f10 = field[r0 + gx + 1]!; const f11 = field[r1 + gx + 1]!; const f01 = field[r1 + gx]!; let mask = 0; if (f00 >= ISO) mask |= 1; if (f10 >= ISO) mask |= 2; if (f11 >= ISO) mask |= 4; if (f01 >= ISO) mask |= 8; if (mask === 0 || mask === 15) continue; const x0 = gx * GRID; const x1 = x0 + GRID; let segs = CASES[mask]!; if (mask === 5 || mask === 10) { // saddle: the cell-centre sample decides whether the two inside // corners are joined through the middle or genuinely separate, // which is what makes a neck pinch instead of resolving as an X const inside = fieldAt(x0 + GRID / 2, y0 + GRID / 2) >= ISO; if (mask === 5) segs = inside ? [0, 1, 2, 3] : [3, 0, 1, 2]; else segs = inside ? [3, 0, 1, 2] : [0, 1, 2, 3]; } for (let s = 0; s < segs.length; s += 2) { const ea = segs[s]!; const eb = segs[s + 1]!; for (let k = 0; k < 2; k++) { const e = k === 0 ? ea : eb; let ptx = 0; let pty = 0; if (e === 0) { ptx = x0 + lerp(f00, f10) * GRID; pty = y0; } else if (e === 1) { ptx = x1; pty = y0 + lerp(f10, f11) * GRID; } else if (e === 2) { ptx = x1 - lerp(f11, f01) * GRID; pty = y1; } else { ptx = x0; pty = y1 - lerp(f01, f00) * GRID; } if (k === 0) path.moveTo(ptx, pty); else path.lineTo(ptx, pty); } } } } ctx.strokeStyle = ink; ctx.lineWidth = STROKE_W; ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.globalAlpha = STROKE_A; ctx.stroke(path); ctx.globalAlpha = 1; }; const drawStill = () => { if (!sized) return; resolve(0); render(); }; const loop = (now: number) => { const dt = last ? Math.min(DT_MAX, (now - last) / 1000) : 1 / 60; last = now; t += dt; const moving = step(dt); resolve(t); render(); // the loop only sleeps when the springs have settled AND there is no // ambient pulse left to render — i.e. never, unless motion is reduced raf = document.hidden || (reduced && !moving) ? 0 : requestAnimationFrame(loop); }; const start = () => { if (reduced || raf) return; last = 0; raf = requestAnimationFrame(loop); }; const sync = () => { relayout(); if (!sized) return; if (reduced) { // no ambient motion, no glide: jump the anchors and repaint one frame seed(); drawStill(); } else { start(); } }; engineRef.current = { sync, setHover: (index, on) => { // reduced motion: the swell is a pointer-driven animation, so it is // dropped entirely rather than jumped to — the chip's own focus ring // still carries the cue if (reduced) return; const c = charges[index]; if (!c) return; c.hover = on; start(); }, }; const ro = new ResizeObserver(() => { const before = sized; resize(); if (!sized) return; if (!before || !seeded) seed(); if (reduced) drawStill(); else start(); }); ro.observe(canvas); const mo = new MutationObserver(() => { readInk(); if (reduced) drawStill(); }); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class"], }); const onVis = () => { if (!document.hidden) start(); }; document.addEventListener("visibilitychange", onVis); readInk(); relayout(); resize(); if (sized) seed(); if (reduced) drawStill(); else start(); return () => { engineRef.current = null; cancelAnimationFrame(raf); ro.disconnect(); mo.disconnect(); document.removeEventListener("visibilitychange", onVis); }; }, [items]); const toggle = (id: string) => { setMembers((prev) => { const next = prev.includes(id) ? prev.filter((m) => m !== id) : [...prev, id]; onChange?.(next); return next; }); }; const count = members.length; return (

{items.map((it, i) => { const isMember = members.includes(it.id); return ( ); })}

{count} of {items.length} in {label}

{`${count} ${count === 1 ? "item" : "items"} grouped`}

); } 63:["$","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":[null,["$","$L64",null,{"namespace":"@registrydirectory","registryDependencies":[]}]]}],["$","$L65",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4d4d4d"}]]}],["$","div","ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#006bff"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#8f8f8f"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L66",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-ns-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-muted)"}]]}],["$","div","color-ns-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-ns-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--ns-accent)"}]]}]]}],["$","$L67",null,{"orientation":"horizontal"}]]}]}]]}],null]}]}]}]]}],["$","$L68",null,{"files":[{"path":"registry/core/status-metaball-merge/component.tsx","content":"$69","type":"registry:ui","target":"components/ui/status-metaball-merge.tsx"}],"className":"h-[70svh] min-h-80"}]]}]