50: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"] 51: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"] 52:T12ce,"use client"; import { useEffect, useRef, useState } from "react"; import type { CSSProperties } from "react"; import { cn } from "../../utils"; import { useLiveRef } from "../../internals/dom/use-live-ref"; import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr"; import "./focus.css"; /** * Focus - Sentence with a roving focus frame * * Splits a sentence into words, blurs all but the current one, and moves a * cornered frame over the word in focus. Cycles automatically on an interval, * or follows the hovered word in manual mode. */ export interface FocusProps { /** Sentence to split into words */ sentence?: string; /** Follow the hovered word instead of auto-cycling */ manualMode?: boolean; /** Blur applied to out-of-focus words, in px */ blurAmount?: number; /** Color of the focus frame corners */ borderColor?: string; /** Focus transition duration in seconds */ animationDuration?: number; /** Pause between auto-cycle steps in seconds */ pauseBetweenAnimations?: number; /** Additional CSS classes */ className?: string; } export function Focus({ sentence = "Fancy Focus", manualMode = false, blurAmount = 5, borderColor = "green", animationDuration = 0.5, pauseBetweenAnimations = 1, className = "", }: FocusProps) { const words = sentence.split(" "); const containerRef = useRef(null); const wordElements = useRef<(HTMLSpanElement | null)[]>([]); const [currentIndex, setCurrentIndex] = useState(0); const [focusRect, setFocusRect] = useState({ x: 0, y: 0, width: 0, height: 0 }); // The interval callback reads the live word count, as the Svelte closure // does over its derived value, without restarting the interval. const wordCount = useLiveRef(words.length); function handleMouseEnter(index: number) { if (manualMode) { setCurrentIndex(index); } } function handleMouseLeave() { if (manualMode) { setCurrentIndex(0); } } // Pre-paint, the counterpart of `$effect` + `tick()`: measures the current word // once the DOM reflects `currentIndex`, before the browser paints. Covers mount // too. A passive effect would paint the zero-size frame at the container origin // first, then transition it into place — a visible slide-and-grow from (0,0). useIsomorphicLayoutEffect(() => { const wordEl = wordElements.current[currentIndex]; const container = containerRef.current; if (!wordEl || !container) return; const parentRect = container.getBoundingClientRect(); const wordRect = wordEl.getBoundingClientRect(); setFocusRect({ x: wordRect.left - parentRect.left, y: wordRect.top - parentRect.top, width: wordRect.width, height: wordRect.height, }); }, [currentIndex]); // Mount-only, as the Svelte side starts its interval in onMount: the timing // props are captured once and a later change does not restart the cycle. A // plain ref holds them — it is never written after the first render, so the // mount effect reads the same values a Svelte `onMount` closure would. const startupRef = useRef({ manualMode, animationDuration, pauseBetweenAnimations }); useEffect(() => { const { manualMode, animationDuration, pauseBetweenAnimations } = startupRef.current; if (manualMode) return; const intervalMs = animationDuration * 1000 + pauseBetweenAnimations * 1000; const id = setInterval(() => { setCurrentIndex((index) => (index + 1) % wordCount.current); }, intervalMs); return () => clearInterval(id); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return (

{words.map((word, index) => ( { wordElements.current[index] = node; }} className={cn( "focus-word", manualMode && "manual", index === currentIndex && !manualMode && "active" )} style={ { filter: index === currentIndex ? "blur(0px)" : `blur(${blurAmount}px)`, "--focus-duration": `${animationDuration}s`, "--border-color": borderColor, } as CSSProperties } onMouseEnter={() => handleMouseEnter(index)} onMouseLeave={handleMouseLeave} > {word} ))}

= 0 ? 1 : 0, "--focus-duration": `${animationDuration}s`, "--border-color": borderColor, } as CSSProperties } >

); } 53:T656,/* Rules below .focus-container are anchored on the root class (port-added anchoring — the Svelte compiler scoped them; as plain CSS they would leak into any consumer element named .focus-word or .corner). See PORTING.md, styling rule 2. */ .focus-container { position: relative; display: flex; gap: 1em; justify-content: center; align-items: center; flex-wrap: wrap; } .focus-container .focus-word { position: relative; font-size: 3rem; font-weight: 900; cursor: pointer; transition: color 0.3s ease; } .focus-container .focus-word.active { filter: blur(0); } @media (prefers-reduced-motion: no-preference) { .focus-container .focus-word { transition: filter var(--focus-duration, 0.3s) ease, color 0.3s ease; } .focus-container .focus-frame { transition: all var(--focus-duration, 0.5s) ease; } } .focus-container .focus-frame { position: absolute; top: 0; left: 0; pointer-events: none; box-sizing: content-box; border: none; } .focus-container .corner { position: absolute; width: 1rem; height: 1rem; border: 3px solid var(--border-color, #fff); filter: drop-shadow(0px 0px 4px var(--border-color, #fff)); border-radius: 3px; transition: none; } .focus-container .top-left { top: -10px; left: -10px; border-right: none; border-bottom: none; } .focus-container .top-right { top: -10px; right: -10px; border-left: none; border-bottom: none; } .focus-container .bottom-left { bottom: -10px; left: -10px; border-right: none; border-top: none; } .focus-container .bottom-right { bottom: -10px; right: -10px; border-left: none; border-top: none; } 4f:["$","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,["$","$L50",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"react/src/components/focus/Focus.tsx","content":"$52","type":"registry:ui","target":"@ui/fancy/components/focus/Focus.tsx"},{"path":"react/src/components/focus/focus.css","content":"$53","type":"registry:ui","target":"@ui/fancy/components/focus/focus.css"},{"path":"react/src/components/focus/index.ts","content":"\"use client\";\n\nexport { Focus } from \"./Focus\";\nexport type { FocusProps } from \"./Focus\";\n","type":"registry:ui","target":"@ui/fancy/components/focus/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]