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:T13f3,"use client"; import * as React from "react"; import {motion,useTransform,type MotionValue} from "motion/react"; import {cva,type VariantProps} from "class-variance-authority"; import {cn} from "@/lib/utils"; import {assignMotionRef} from "@/lib/cojeev-motion/refs"; import {useMotionVisibility} from "@/lib/cojeev-motion/use-motion-visibility"; import {useOrganicValue,usePaintSize} from "@/lib/cojeev-motion/use-organic-value"; import {organicBandPath,organicLinePath,organicOrbitPath,progressRatio,segmentCount} from "@/lib/cojeev-motion/progress-geometry"; const ProgressVariants=cva("v-track",{variants:{variant:{default:"",cream:"-cream",unavail:"-unavail"},size:{default:"",lg:"-lg",sm:"-sm"}},defaultVariants:{variant:"default",size:"default"}}); export type ProgressAppearance="organic"|"line"|"segmented"|"orbit"; export type ProgressProps=React.ComponentProps<"div"> & VariantProps & {value?:number|null;max?:number;appearance?:ProgressAppearance;segments?:number}; function Segment({index,count,width,height,position,energy}:{index:number;count:number;width:MotionValue;height:MotionValue;position:MotionValue;energy:MotionValue}){ const background=useTransform([width,height],([w,h])=>organicBandPath(Math.max(0,Number(w)/count-3),Number(h))); const fill=useTransform([width,height,position,energy],([w,h,p,e])=>organicBandPath(Math.max(0,Number(w)/count-3),Number(h),Math.max(0,Math.min(1,Number(p)*count-index)),Number(e))); const x=useTransform(width,w=>w/count*index); return ; } function ProgressPaint({position,energy,appearance,segments}:{position:MotionValue;energy:MotionValue;appearance:ProgressAppearance;segments:number}){ const ref=React.useRef(null),{width,height}=usePaintSize(ref); const box=useTransform([width,height],([w,h])=>`0 0 ${w} ${h}`); const track=useTransform([width,height],([w,h])=>appearance==="line"?organicLinePath(Number(w),Number(h)):organicBandPath(Number(w),Number(h))); const fill=useTransform([width,height,position,energy],([w,h,p,e])=>appearance==="line"?organicLinePath(Number(w),Number(h),Number(p),Number(e)):organicBandPath(Number(w),Number(h),Number(p),Number(e))); const arc=useTransform([position,energy],([p,e])=>organicOrbitPath(Number(p),Number(e))); const opacity=useTransform(position,p=>p<=0?0:1); if(appearance==="orbit")return ; return ; } export function Progress({ref,className,variant,size,value,max=100,appearance="organic",segments=12,children,style,...props}:ProgressProps){ const total=Number.isFinite(max)&&max>0?max:100,supplied=value??props["aria-valuenow"],current=typeof supplied==="number"&&Number.isFinite(supplied)?Math.max(0,Math.min(supplied,total)):undefined; const unavailable=variant==="unavail"||current===undefined,ratio=unavailable?0:progressRatio(current,total); const host=React.useRef(null),{enabled,inView}=useMotionVisibility(host); const attach=React.useCallback((node:HTMLDivElement|null)=>{host.current=node;const release=assignMotionRef(ref,node);return()=>{host.current=null;release()}},[ref]); const {position,energy}=useOrganicValue(ratio,!enabled||!inView||unavailable||children!==undefined); return

{children??<>{appearance==="orbit"&&}}

; } /** Custom indicators retain their original --p width / --c color composition API. */ export type ProgressIndicatorProps=React.ComponentProps<"i">; export function ProgressIndicator(props:ProgressIndicatorProps){return } 51:T1d0c,@layer cojeev-states { [data-slot="progress"].v-track { --c: var(--v-yellow); position: relative; display: block; width: 100%; min-width: 0; height: var(--track-h, 12px); flex: 1; border-radius: var(--r-pill); color: var(--c); } [data-slot="progress"].-lg { height: var(--track-h-lg, 20px); } [data-slot="progress"].-sm { height: var(--track-h-sm, 6px); } [data-slot="progress"] > [data-slot="progress-indicator"] { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: inherit; background: var(--c, var(--v-yellow)); } [data-slot="progress"][data-custom="true"] { background: var(--v-beige); overflow: hidden; } [data-slot="progress"] > [data-slot="progress-indicator"][data-organic="true"] { width: 100%; height: 100%; background: none; transition: none; } .v-progress__paint { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .v-progress__track { fill: var(--v-beige); } .v-progress__fill { fill: currentColor; } [data-slot="progress"].-cream .v-progress__track { fill: var(--v-canvas); } [data-slot="progress"][data-appearance="line"] { height: 12px; } [data-slot="progress"][data-appearance="line"] :is(.v-progress__track, .v-progress__fill) { fill: none; stroke: var(--v-beige); stroke-width: 3px; stroke-linecap: round; } [data-slot="progress"][data-appearance="line"] .v-progress__fill { stroke: currentColor; } [data-slot="progress"][data-appearance="orbit"] { flex: none; width: var(--progress-diameter, 112px); height: var(--progress-diameter, 112px); display: inline-grid; place-items: center; } [data-slot="progress"][data-appearance="orbit"].-sm { --progress-diameter: 72px; } [data-slot="progress"][data-appearance="orbit"].-lg { --progress-diameter: 148px; } [data-slot="progress"][data-appearance="orbit"] :is(.v-progress__track, .v-progress__fill) { fill: none; stroke: var(--v-beige); stroke-width: 7px; stroke-linecap: round; } [data-slot="progress"][data-appearance="orbit"] .v-progress__fill { stroke: currentColor; } .v-progress__value { color: var(--v-text); font-size: var(--fs-label); font-weight: 600; font-variant-numeric: tabular-nums; } [data-slot="progress"].-unavail { background: repeating-linear-gradient( 135deg, var(--v-skel-edge) 0 3px, transparent 3px 9px ); box-shadow: inset 0 0 0 1px var(--v-skel-edge); } [data-slot="progress"].-unavail > [data-slot="progress-indicator"] { display: none; } [data-slot="progress"].-unavail[data-appearance="orbit"] { border-radius: 50%; } .v-progress-example { width: 100%; min-width: 0; display: grid; gap: 18px; container-type: inline-size; } .v-progress-example__paper { display: grid; gap: 22px; min-width: 0; padding: 24px; background: var(--v-canvas); border: 1px solid var(--v-border); border-radius: 22px; } .v-progress-example__heading { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: var(--v-text-2); letter-spacing: 0.03em; } .v-progress-example__summary { display: flex; justify-content: space-between; gap: 20px; align-items: center; } .v-progress-example__summary h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 22px; line-height: 1.3; } .v-progress-example__summary p { font-size: 13px; line-height: 1.5; color: var(--v-text-2); margin: 0; } .v-progress-example__value { font-family: var(--font-mono); font-size: 30px; font-variant-numeric: tabular-nums; color: var(--v-text); } .v-progress-example__meter { min-width: 0; display: flex; justify-content: center; align-items: center; } .v-progress-example__meter [data-slot="progress"] { --c: var(--v-pink); } .v-progress-example__controls { display: flex; gap: 12px; justify-content: space-between; align-items: start; flex-wrap: wrap; } .v-progress-example__controls > div { display: flex; gap: 6px; flex-wrap: wrap; } .v-progress-example__controls .v-btn { min-height: 44px; } .v-progress-example__hint { margin: 0; font-size: 11px; color: var(--v-text-2); line-height: 1.6; } .v-progress-example[data-presentation="report"] .v-progress-example__paper { grid-template-columns: minmax(0, 1fr) minmax(112px, 0.6fr); border-radius: 4px 24px 24px 24px; border-top: 3px solid var(--v-blue); } .v-progress-example[data-presentation="report"] .v-progress-example__heading { grid-column: 1/-1; padding-bottom: 14px; border-bottom: 1px dashed var(--v-border); } .v-progress-example[data-presentation="report"] .v-progress-example__summary { grid-column: 1; flex-direction: column; align-items: start; } .v-progress-example[data-presentation="report"] .v-progress-example__meter { grid-column: 2; grid-row: 2/4; } .v-progress-example[data-presentation="report"] .v-progress-example__meter [data-slot="progress"] { --c: var(--v-blue); } .v-progress-example__totals { display: flex; gap: 32px; grid-column: 1; } .v-progress-example__totals > div { display: grid; gap: 4px; } .v-progress-example__totals strong { font-family: var(--font-mono); font-size: 24px; font-weight: var(--fw-body); } .v-progress-example__totals span { font-size: 11px; color: var(--v-text-2); } .v-progress-example[data-presentation="milestones"] .v-progress-example__paper { border: none; border-top: 2px solid var(--v-ink); border-radius: 0; padding: 20px 0; background: transparent; } .v-progress-example__milestones { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 16px 0 0; margin: 0; border-top: 1px dashed var(--v-border); } .v-progress-example__milestones li { display: grid; align-content: start; gap: 12px; min-width: 0; } .v-progress-example__checkpoint { display: grid; place-items: center; width: 36px; height: 36px; font-family: var(--font-mono); font-size: 12px; color: var(--v-text-2); border: 1px solid var(--v-border); border-radius: 12px; } .v-progress-example__milestones li[data-state="complete"] .v-progress-example__checkpoint { background: var(--v-olive); color: var(--v-on-accent); border-color: transparent; } .v-progress-example__milestones li[data-state="in-progress"] .v-progress-example__checkpoint { background: var(--v-blue); color: var(--v-on-accent); border-color: transparent; } .v-progress-example__checkpoint .v-icon { width: 18px; height: 18px; } .v-progress-example__milestones li > span:last-child { display: grid; gap: 5px; } .v-progress-example__milestones strong { font-size: 13px; font-weight: var(--fw-title); } .v-progress-example__milestones small { font-size: 10px; line-height: 1.5; color: var(--v-text-2); } @container (max-width:400px) { .v-progress-example__paper { padding: 20px; } .v-progress-example__heading { flex-direction: column; gap: 6px; } .v-progress-example__summary { align-items: start; flex-direction: column; gap: 14px; } .v-progress-example[data-presentation="report"] .v-progress-example__paper { grid-template-columns: minmax(0, 1fr); } .v-progress-example[data-presentation="report"] .v-progress-example__meter { grid-row: auto; grid-column: 1; } .v-progress-example__milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; } } } 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","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"}]]}]}],["$","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"}]]}]}]]}],["$","$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/progress.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/progress.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/progress.css","content":"$51","type":"registry:file","target":"styles/cojeev/progress.css"}],"className":"h-[70svh] min-h-80"}]]}]