4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T1c6a,"use client"; import { useEffect, useRef } from "react"; // --------------------------------------------------------------------------- // ExpansionGapBreather — a divider between two independently-sized layout // regions, sourced from continuous-welded-rail (CWR) breather switches: the // tapered-blade gap that lets a rail run grow and shrink with temperature // without buckling in heat or pulling apart in cold. The rendered "rail // temperature" is a 14s sine (decoupled from any real diurnal cycle, per the // round-9 rule) that drives the gap's opening between 4px (hot, nearly // closed) and 22px (cold, open) — the element the browser lays out around // its siblings actually resizes with that value, so the divider visibly // absorbs the width mismatch it sits inside, not just draws it. // // The teeth are two interlocking stroked combs, not a rectangular slot: a // left comb whose tongues reach rightward into the gap and a right comb // whose tongues reach leftward, each tongue living in every OTHER pitch // slot down the height so the two combs' tongues occupy disjoint y-ranges — // a tip can cross past the opposite baseline (that is the interlock) with // no collision, exactly a breather switch's tapered blades sliding past // each other. Both combs are drawn inside a small fixed SVG overlay // centred on the layout-affecting spacer div, so the teeth can extend past // the spacer's own width without the spacer itself claiming that space. // // Tooth pitch derives from the container's own height (the one spatial // dimension a full-height divider has to work with), clamped so 5-18 teeth // always read as distinct fingers rather than a blur or a single fat wedge. // --------------------------------------------------------------------------- const MIN_GAP = 4; const MAX_GAP = 22; const MID_GAP = (MIN_GAP + MAX_GAP) / 2; // 13 — reduced-motion freeze value const AMP_GAP = (MAX_GAP - MIN_GAP) / 2; // 9 const PERIOD_MS = 14000; const TOOTH_DEPTH = 18; // px each comb's points reach into the gap const SVG_WIDTH = MAX_GAP + TOOTH_DEPTH * 2 + 8; // 66 — fixed overlay width const CENTER_X = SVG_WIDTH / 2; const MIN_PITCH = 14; const MAX_PITCH = 24; const MIN_TEETH = 5; const MAX_TEETH = 18; /** Comb outline (stroked, never filled): a straight baseline rail at `baseX` * running the full height, with a tapered tongue reaching `direction * * TOOTH_DEPTH` past that baseline in every OTHER pitch slot — `slotParity` * picks which half of the slots belong to this side. Because the left and * right combs are given opposite parities, their tongues occupy disjoint * y-ranges: a tongue tip can cross past the opposite comb's baseline (that * IS the interlock) without ever colliding with the opposite comb's own * geometry, since nothing of the other side exists at that y. */ function buildCombPath( baseX: number, direction: 1 | -1, height: number, slotParity: 0 | 1 ): string { const pitch = Math.max(MIN_PITCH, Math.min(MAX_PITCH, height / 8)); const teeth = Math.max(MIN_TEETH, Math.min(MAX_TEETH, Math.round(height / pitch))); const step = height / teeth; const pts: string[] = [`${baseX.toFixed(1)},0`]; for (let i = 0; i < teeth; i++) { const y0 = i * step; const y1 = (i + 1) * step; if (i % 2 === slotParity) { const tipX = (baseX + direction * TOOTH_DEPTH).toFixed(1); pts.push(`${tipX},${(y0 + step / 2).toFixed(1)}`); } pts.push(`${baseX.toFixed(1)},${y1.toFixed(1)}`); } return `M${pts.join(" L")}`; } export interface ExpansionGapBreatherProps { /** extra classes merged onto the spacer root */ className?: string; } export function ExpansionGapBreather({ className = "" }: ExpansionGapBreatherProps) { const rootRef = useRef(null); const svgRef = useRef(null); const leftRef = useRef(null); const rightRef = useRef(null); useEffect(() => { const root = rootRef.current; const svg = svgRef.current; const left = leftRef.current; const right = rightRef.current; if (!root || !svg || !left || !right) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let disposed = false; let visible = true; let raf = 0; let height = 0; const originMs = performance.now(); // t0 == gap 4 (hot/closed), always const paint = (gap: number) => { // layout write rounded to whole px — the flex row this sits in would // otherwise reflow at 60fps and make sibling text shimmer on subpixel // width changes; the tongues themselves still slide on the float. root.style.width = `${Math.round(gap)}px`; const leftBase = CENTER_X - gap / 2; const rightBase = CENTER_X + gap / 2; left.setAttribute("d", buildCombPath(leftBase, 1, height, 0)); right.setAttribute("d", buildCombPath(rightBase, -1, height, 1)); }; const loop = () => { raf = 0; if (disposed || !visible) return; // a pure function of elapsed real time since mount — pausing/resuming // (tab hidden, scrolled offscreen) never desyncs the phase, it just // stops and resumes drawing the same continuous curve. const t = ((performance.now() - originMs) % PERIOD_MS) / PERIOD_MS; const gap = MID_GAP - AMP_GAP * Math.cos(2 * Math.PI * t); paint(gap); raf = requestAnimationFrame(loop); }; const start = () => { if (reduced) { paint(MID_GAP); // mid-cycle: average width, teeth half-interlocked return; } if (!raf) raf = requestAnimationFrame(loop); }; const ro = new ResizeObserver((entries) => { const h = entries[0]?.contentRect.height ?? root.clientHeight; if (h > 0 && Math.abs(h - height) > 0.5) { height = h; if (reduced) paint(MID_GAP); } }); ro.observe(root); height = root.clientHeight || 120; const io = new IntersectionObserver((entries) => { visible = entries[0]?.isIntersecting ?? true; if (visible && !reduced && !raf) raf = requestAnimationFrame(loop); }); io.observe(root); start(); return () => { disposed = true; cancelAnimationFrame(raf); raf = 0; ro.disconnect(); io.disconnect(); }; }, []); return (

); } 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4d",null,{"files":[{"path":"registry/core/expansion-gap-breather/component.tsx","content":"$4e","type":"registry:ui","target":"components/ui/expansion-gap-breather.tsx"}],"className":"h-[70svh] min-h-80"}]]}]