4c: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/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"],"RegistryDependencies"] 4d: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/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"],"ItemStyles"] 4e:I[34002,["/_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"],"CodeEditor"] 4f: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"] 50:T1df3,"use client"; import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { motion } from "motion/react"; import { motionTokens } from "@/lib/cojeev-motion/choreography"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; import { assignMotionRef } from "@/lib/cojeev-motion/refs"; import { cn } from "@/lib/utils"; const SpinnerVariants = cva( "v-pulse [display:inline-grid] [place-items:center] [width:var(--pulse,34px)] [height:var(--pulse,34px)] [position:relative]", { variants: { variant: { default: "", point: "-point" }, size: { default: "" }, }, defaultVariants: { variant: "default", size: "default" }, }, ); function seedPath(radius: (angle: number) => number) { return ( "M" + Array.from({ length: 64 }, (_, i) => { const angle = (i / 64) * Math.PI * 2; const r = radius(angle); return `${(50 + r * Math.cos(angle)).toFixed(2)} ${(50 + r * Math.sin(angle)).toFixed(2)}`; }).join("L") + "Z" ); } const pebble = seedPath( (t) => 41 + 2.4 * Math.cos(3 * t + 0.6) + 1.4 * Math.sin(5 * t), ); const star = seedPath( (t) => 21 + 23 * Math.pow(Math.abs(Math.cos(2 * t)), 1.9), ); const puff = seedPath((t) => 36 + 6 * Math.abs(Math.cos(4 * t))); const point = seedPath( (t) => 12 + 32 * Math.pow(Math.abs(Math.cos(2 * t)), 2.4), ); const pointSoft = seedPath( (t) => 16 + 28 * Math.pow(Math.abs(Math.cos(2 * t)), 2.2), ); export type SpinnerAppearance = "bloom" | "orbit" | "relay"; export type SpinnerProps = React.ComponentProps<"span"> & VariantProps & { label?: string; appearance?: SpinnerAppearance; paused?: boolean; }; export function Spinner({ ref, className, variant, size, label, children, appearance = "bloom", paused = false, ...props }: SpinnerProps) { const host = React.useRef(null); const { enabled, inView } = useMotionVisibility(host); const active = enabled && inView && !paused && !className?.split(/\s+/).includes("-paused"); const attach = React.useCallback( (element: HTMLSpanElement | null) => { host.current = element; const release = assignMotionRef(ref, element); return () => { host.current = null; release(); }; }, [ref], ); const pointed = variant === "point", still = pointed ? point : star; const caption = label ?? ((props as Record)["data-label"] as string | undefined); return ( {caption && {caption}} {children} ); } const SpinnerLabelVariants = cva( "v-pulse__label [font-weight:500] [color:var(--v-text-2)] [opacity:1] [position:absolute] [inset:auto_auto_-20px_50%] [transform:translateX(-50%)] [font-size:11px] [white-space:nowrap]", { variants: { variant: { default: "" }, size: { default: "" } }, defaultVariants: { variant: "default", size: "default" }, }, ); export type SpinnerLabelProps = React.ComponentProps<"span"> & VariantProps; export function SpinnerLabel({ className, variant, size, ...props }: SpinnerLabelProps) { return ( ); } 51:Tbe4,@layer cojeev-states { /* Motion owns the indicator's contour, rotation, and pulse. */ .v-pulse[data-slot] { flex-shrink: 0; } .v-pulse[data-slot] svg { width: 100%; height: 100%; overflow: visible; } .v-pulse[data-slot] .seed { fill: var(--pulse-c, var(--v-pink)); } .v-pulse[data-slot] .core { fill: var(--v-on-accent); } .v-pulse[data-slot]:has([data-slot="spinner-label"]) { margin-bottom: 28px; } .v-pulse__label[data-slot] { width: max-content; max-width: min(32ch, 70vw); white-space: normal; text-align: center; line-height: 1.4; top: calc(100% + 8px); bottom: auto; } .v-pulse__orbit { fill: none; stroke: var(--v-border); stroke-width: 1.5; } .v-pulse__hub { fill: var(--v-text); } .v-pulse__mark--0 { fill: var(--pulse-c, var(--v-pink)); } .v-pulse__mark--1 { fill: var(--v-blue); } .v-pulse__mark--2 { fill: var(--v-olive); } .v-loader-example { min-width: 0; width: 100%; display: grid; gap: 20px; } .v-loader-example__stage { position: relative; display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 28px; row-gap: 20px; padding: 28px; border: 1px solid var(--v-border); border-radius: 28px 28px 8px 28px; background: var(--v-paper); } .v-loader-example__index { grid-column: 1/-1; font-size: 10px; letter-spacing: 0.12em; color: var(--v-text-2); } .v-loader-example__drawing { display: grid; place-items: center; width: 120px; min-height: 120px; position: relative; } .v-loader-example__drawing:before { content: ""; pointer-events: none; position: absolute; inset: 0; border-radius: 45% 55% 52% 48%; background: color-mix(in srgb, var(--v-pink) 12%, transparent); } .v-loader-example[data-appearance="orbit"] .v-loader-example__drawing:before { background: color-mix(in srgb, var(--v-blue) 12%, transparent); border-radius: 50%; } .v-loader-example[data-appearance="relay"] .v-loader-example__drawing:before { background: color-mix(in srgb, var(--v-olive) 12%, transparent); border-radius: 24px 8px 24px 8px; } .v-loader-example__copy { align-self: center; min-width: 0; } .v-loader-example__copy h3 { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -0.025em; } .v-loader-example__copy p { margin: 10px 0 0; font-size: 14px; color: var(--v-text-2); line-height: 1.65; max-width: 45ch; } .v-loader-example__status { grid-column: 1/-1; border-top: 1px solid var(--v-border); padding-top: 14px; font-size: 12px; color: var(--v-text-2); } .v-loader-example__done[data-slot] { --is: 36px; color: var(--v-text); } .v-loader-example > .v-loading-example__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .v-loader-example > .v-loading-example__actions > [data-slot="button"] { width: auto; min-height: 44px; } @media (max-width: 600px) { .v-loader-example__stage { grid-template-columns: 1fr; padding: 22px; gap: 20px; } .v-loader-example__drawing { justify-self: start; } } } 4b:["$","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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}],["$","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"}]]}]}]]}],["$","$L4c",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json"]}]]}],["$","$L4d",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L4e",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/spinner.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/spinner.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/spinner.css","content":"$51","type":"registry:file","target":"styles/cojeev/spinner.css"}],"className":"h-[70svh] min-h-80"}]]}]