5f: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"] 60: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"] 61:T1e5f,"use client"; import { useEffect, useState, useSyncExternalStore } from "react"; import { AnimatePresence, motion } from "motion/react"; import { useReducedMotion } from "@/hooks/use-reduced-motion"; import { cn } from "@/lib/utils"; import { usePreviewPlay } from "@/lib/preview-play"; // Minute-resolution local time. The server snapshot is null: it can't know // the reader's hour, so it renders a neutral "Hello" and no glyph. function subscribeMinute(onChange: () => void) { let timer: ReturnType; const schedule = () => { timer = setTimeout(() => { onChange(); schedule(); }, 60_000 - (Date.now() % 60_000) + 20); }; schedule(); return () => clearTimeout(timer); } const minuteSnapshot = () => Math.floor(Date.now() / 60_000); const serverSnapshot = () => null; type Period = "morning" | "afternoon" | "evening" | "night"; function periodOf(hour: number): Period { if (hour >= 5 && hour < 12) return "morning"; if (hour >= 12 && hour < 17) return "afternoon"; if (hour >= 17 && hour < 22) return "evening"; return "night"; } // Days since a known new moon, folded into one 29.53 day cycle: // 0 is new, 0.5 is full. Accurate to within a day, plenty for a glyph. const NEW_MOON = Date.UTC(2000, 0, 6, 18, 14); const SYNODIC = 29.530588853 * 86_400_000; const moonPhase = (at: number) => (((at - NEW_MOON) % SYNODIC) + SYNODIC) % SYNODIC / SYNODIC; const round = (n: number) => Math.round(n * 100) / 100; function Sun({ hour }: { hour: number }) { // Height of the sun as 0..1 over a 6:00 to 18:00 day: rays are stubs at // dawn and dusk and longest at noon. const height = Math.max(0, Math.sin(((hour - 6) / 12) * Math.PI)); const inner = 7.5; const outer = inner + 1.2 + height * 2.6; return ( <> {Array.from({ length: 8 }, (_, i) => { const a = (i / 8) * Math.PI * 2; return ( ); })} ); } function Moon({ phase }: { phase: number }) { const r = 7; // The terminator is a half ellipse whose width follows the phase. const rx = round(Math.abs(Math.cos(phase * Math.PI * 2)) * r); const waxing = phase < 0.5; const crescent = phase < 0.25 || phase > 0.75; // Outer limb on the lit side (right while waxing, northern sky), then back // up the terminator, bulging toward the lit side only for a crescent. const outerSweep = waxing ? 1 : 0; const innerSweep = waxing === crescent ? 0 : 1; const d = `M12 ${12 - r}A${r} ${r} 0 0 ${outerSweep} 12 ${12 + r}A${rx} ${r} 0 0 ${innerSweep} 12 ${12 - r}Z`; return ( <> ); } export function Greeting({ name, className }: { name: string; className?: string }) { const minute = useSyncExternalStore(subscribeMinute, minuteSnapshot, serverSnapshot); const reduceMotion = useReducedMotion(); let word = "Hello"; let glyph: React.ReactNode = null; let glyphKey = "none"; if (minute !== null) { const now = new Date(minute * 60_000); const hour = now.getHours() + now.getMinutes() / 60; const period = periodOf(now.getHours()); word = `Good ${period}`; const sunUp = hour >= 6 && hour < 19; glyphKey = sunUp ? "sun" : "moon"; glyph = sunUp ? : ; } return (

{/* The slot is reserved from the first render, so the glyph arriving never nudges the text. */} {glyph && ( {glyph} )} {word} {/* Slides over as the word changes width instead of jumping. */} , {name}

); } export default function GreetingDemo() { const [run, setRun] = useState(0); const play = usePreviewPlay(); // Index preview: presses Replay, so the sun or moon rises along its arc // again, and again after a calm pause while the card stays hovered. useEffect(() => { if (!play) return; const replay = () => setRun((r) => r + 1); const first = setTimeout(replay, 150); // The rise takes 700ms; the rest is a pause to look at it. const again = setInterval(replay, 3200); return () => { clearTimeout(first); clearInterval(again); }; }, [play]); return (

); } 5e:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L5f",null,{"namespace":"@xevrion","registryDependencies":["utils"]}]]}],null]}],["$","$L60",null,{"files":[{"path":"components/greeting.tsx","content":"$61","type":"registry:component"},{"path":"hooks/use-reduced-motion.ts","content":"\"use client\";\n\nimport { useSyncExternalStore } from \"react\";\n\n// Motion's useReducedMotion reads the media query on the very first client\n// render, but the server can't know it, so every component that renders\n// differently under reduced motion broke hydration for those users. This\n// reports false during hydration, matching the server HTML, then the real\n// preference straight after, and follows it if it changes.\nconst query = \"(prefers-reduced-motion: reduce)\";\n\nfunction subscribe(onChange: () => void) {\n const media = window.matchMedia(query);\n media.addEventListener(\"change\", onChange);\n return () => media.removeEventListener(\"change\", onChange);\n}\n\nexport function useReducedMotion() {\n return useSyncExternalStore(\n subscribe,\n () => window.matchMedia(query).matches,\n () => false,\n );\n}\n","type":"registry:hook","target":"hooks/use-reduced-motion.ts"},{"path":"lib/preview-play.ts","content":"\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\n// Lets a demo know whether it's showing in an index card, and whether that\n// card is hovered or focused. Demos use it to act themselves out on hover:\n// a star button stars itself, a checkbox scribbles, and so on.\n//\n// null: not in a preview (the component's own page, or real use).\n// false: in a preview, at rest.\n// true: in a preview, being hovered or focused: play the show.\nexport const PreviewPlayContext = createContext(null);\n\nexport function usePreviewPlay() {\n return useContext(PreviewPlayContext);\n}\n","type":"registry:lib","target":"lib/preview-play.ts"}],"className":"h-[70svh] min-h-80"}]]}]