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:T219a,"use client"; import * as React from "react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { cardVariants } from "@/components/ui/card"; import { useMorph } from "@/lib/cojeev-motion/use-morph"; import { AnimatePresence, motion } from "motion/react"; import { motionTokens, useChoreography, } from "@/lib/cojeev-motion/choreography"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; import { assignMotionRef } from "@/lib/cojeev-motion/refs"; const SkeletonVariants = cva( "v-skel [border-radius:999px] [background:var(--v-skel-face)] [background-size:200%_100%] [animation:v-shimmer_1.4s_linear_infinite] [box-shadow:none] [position:relative] [overflow:hidden]", { variants: { variant: { default: "", pill: "-pill [border-radius:var(--r-pill)]", card: "-card [border-radius:20px]", disk: "-disk [border-radius:50%]", line: "-line [height:12px] [border-radius:999px]", "skel-group": "-skel-group", }, size: { default: "" }, }, defaultVariants: { variant: "default", size: "default" }, }, ); export type SkeletonEffect = "shimmer" | "pulse" | "ink"; export type SkeletonProps = React.ComponentProps<"div"> & VariantProps & { as?: React.ElementType; effect?: SkeletonEffect; paused?: boolean; }; export function Skeleton({ as: Tag = "div", className, variant, size, ref, children, effect = "shimmer", paused = false, ...props }: SkeletonProps) { const host = React.useRef(null); const attach = React.useCallback( (element: HTMLDivElement | null) => { host.current = element; const release = assignMotionRef(ref, element); return () => { host.current = null; release(); }; }, [ref], ); const ownedRef = useMorph("skeleton", attach); const { enabled, inView } = useMotionVisibility(host); const active = enabled && inView && !paused && !className?.split(/\s+/).includes("-paused"); const sweeping = effect === "shimmer"; return ( {children} ); } const SkeletonGroupVariants = cva("v-skel-group [gap:8px] [display:grid]", { variants: { variant: { default: "" }, size: { default: "" } }, defaultVariants: { variant: "default", size: "default" }, }); export type SkeletonGroupProps = React.ComponentProps<"div"> & VariantProps & { as?: React.ElementType }; export function SkeletonGroup({ as: Tag = "div", className, variant, size, ...props }: SkeletonGroupProps) { return ( ); } const AsyncContentVariants = cva( "v-async [display:grid] [gap:10px] [padding:18px] [border-radius:16px] [background:var(--v-beige)] [justify-items:start]", { variants: { variant: { default: "" }, size: { default: "" } }, defaultVariants: { variant: "default", size: "default" }, }, ); export type AsyncContentProps = React.ComponentProps<"div"> & VariantProps & { as?: React.ElementType; /** Caller-owned loading state. Omit to preserve the static composition. */ loading?: boolean; fallback?: React.ReactNode; }; export function AsyncContent({ loading, fallback, ...props }: AsyncContentProps) { if (loading !== undefined) return ; const { as: Tag = "div", className, variant, size, ...rest } = props; return ( ); } function LoadingContent({ as: Tag = "div", className, variant, size, ref, children, loading, fallback, ...props }: AsyncContentProps & { loading: boolean }) { const host = React.useRef(null); const attach = React.useCallback( (node: HTMLDivElement | null) => { host.current = node; const release = assignMotionRef(ref, node); return () => { host.current = null; release(); }; }, [ref], ); const { enabled, inView } = useMotionVisibility(host); const { quiet } = useChoreography(); const still = quiet || !enabled || !inView; const transition = { duration: still ? 0 : motionTokens.duration.enter, ease: [...motionTokens.ease.enter] as [number, number, number, number], }; return ( {children} {loading && ( )} ); } const AsyncRowVariants = cva( "v-async__row [display:flex] [align-items:center] [gap:10px] [font-size:14px] [color:var(--v-text-2)]", { variants: { variant: { default: "" }, size: { default: "" } }, defaultVariants: { variant: "default", size: "default" }, }, ); export type AsyncRowProps = React.ComponentProps<"div"> & VariantProps & { as?: React.ElementType }; export function AsyncRow({ as: Tag = "div", className, variant, size, ...props }: AsyncRowProps) { return ( ); } const QuietVariants = cva("v-quiet [color:var(--v-text-2)]", { variants: { variant: { default: "" }, size: { default: "" } }, defaultVariants: { variant: "default", size: "default" }, }); export type QuietProps = React.ComponentProps<"span"> & VariantProps & { as?: React.ElementType }; export function Quiet({ as: Tag = "span", className, variant, size, ...props }: QuietProps) { return ( ); } 51:T181f,@layer cojeev-states { .v-skel[data-slot] { min-width: 0; max-width: 100%; animation: none; } .v-skel[data-slot].-pill { border-radius: var(--r-pill); } .v-skel[data-slot].-card { border-radius: 20px; } .v-skel[data-slot].-disk { border-radius: 50%; } .v-skel[data-slot].-line { height: 12px; border-radius: 999px; } .v-skel[data-slot].-line:nth-of-type(2n) { width: 82%; } .v-skel[data-slot].-line:nth-of-type(3n) { width: 64%; } .v-skel[data-slot]:has(> svg.v-morph) { background: transparent; } .v-skel[data-slot] > svg.v-morph { z-index: 0; } .v-skel-group[data-slot].v-card { padding: 20px; background: var(--card); } .v-skel__sheen { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient( 100deg, transparent 12%, var(--v-skel-sheen) 46%, transparent 78% ); } .v-skel[data-effect="pulse"] > .v-skel__sheen { background: var(--v-text-3); } .v-skel[data-effect="ink"] { --mstroke: var(--v-text-3); background: transparent; box-shadow: inset 0 0 0 1px var(--v-border); } .v-skel[data-effect="ink"]:has(> svg.v-morph) { box-shadow: none; } .v-skel[data-effect="ink"] > .v-skel__sheen { background: repeating-linear-gradient( -45deg, transparent 0 6px, var(--v-text-3) 6px 7px ); } .v-async--controlled[data-slot] { justify-items: stretch; isolation: isolate; } .v-async__content, .v-async__fallback { grid-area: 1 / 1; min-width: 0; } .v-async__content { display: grid; gap: inherit; align-content: start; } .v-async__fallback { z-index: 1; display: grid; align-content: center; pointer-events: none; } .v-async__fallback > [data-slot="skeleton"] { width: 100%; gap: 12px; } /* Authored loading compositions are opt-in; primitive dimensions stay caller-owned. */ .v-loading-example { width: 100%; min-width: 0; display: grid; gap: 20px; } .v-loading-example__heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 13px; } .v-loading-example__heading > span:first-child { font-weight: 600; } .v-loading-example__heading > span:last-child { font-size: 12px; color: var(--v-text-2); } .v-loading-example__surface[data-slot] { width: 100%; padding: 24px; background: var(--v-paper); border: 1px solid var(--v-border); border-radius: 6px 24px 24px 24px; } .v-loading-example__surface .v-async__fallback { align-content: stretch; } .v-loading-template { display: grid; align-content: start; gap: 20px; min-width: 0; } .v-loading-template p { font-size: 13px; line-height: 1.6; color: var(--v-text-2); margin: 6px 0 0; } .v-loading-template strong { font-weight: 600; font-size: 15px; } .v-loading-template__article-head, .v-loading-template__board-head { display: flex; align-items: center; justify-content: space-between; min-height: 28px; gap: 16px; font-size: 11px; letter-spacing: 0.06em; color: var(--v-text-2); } .v-loading-template__article-body { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 24px; align-items: center; min-height: 110px; } .v-loading-template .v-loading-template__illustration { width: 100px; height: 100px; } .v-loading-template__field { width: 100%; height: 80px; } .v-loading-template__name { width: 180px; max-width: 100%; } .v-loading-template__short { width: 100px; max-width: 100%; } .v-loading-template__seal { width: 28px; height: 28px; } .v-loading-template__identity { display: flex; align-items: center; gap: 16px; min-height: 72px; } .v-loading-template__portrait { width: 64px; height: 64px; flex-shrink: 0; } .v-loading-template__monogram { display: grid; place-items: center; border-radius: 50%; background: var(--v-olive); color: var(--v-on-accent); font-weight: 600; font-size: 22px; } .v-loading-template__stats { display: flex; gap: 24px; border-top: 1px solid var(--v-border); padding-top: 16px; color: var(--v-text-2); font-size: 12px; } .v-loading-template__stats strong { color: var(--v-text); margin-right: 4px; } .v-loading-template__stat { height: 24px; width: 120px; } .v-loading-template__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .v-loading-template__tile { min-width: 0; display: grid; align-content: start; justify-items: start; gap: 6px; padding: 12px; border: 1px solid var(--v-border); border-radius: 16px 16px 4px 16px; } .v-loading-template .v-loading-template__tile-art { width: 48px; height: 48px; margin-bottom: 8px; } .v-loading-template__tile p { margin: 0; font-size: 12px; } .v-loading-example__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .v-loading-example__actions > [data-slot="button"] { width: auto; min-height: 44px; } .v-loading-example__blocks { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--v-border); font-size: 13px; } .v-loading-example__blocks p { margin: 4px 0 0; color: var(--v-text-2); } .v-loading-example__block-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 8px; } .v-loading-example__block-grid figure { margin: 0; display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 88px; border-radius: 12px; background: var(--v-paper); font-size: 11px; color: var(--v-text-2); } @media (max-width: 600px) { .v-loading-example__surface[data-slot] { padding: 18px; } .v-loading-template__article-body { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; } .v-loading-template .v-loading-template__illustration { width: 64px; height: 80px; } .v-loading-template__tiles { grid-template-columns: 1fr; } .v-loading-template__tile { grid-template-columns: 42px minmax(0, 1fr); align-items: center; column-gap: 12px; } .v-loading-template .v-loading-template__tile-art { grid-row: span 2; width: 36px; height: 42px; margin: 0; } .v-loading-template__tile p { grid-column: 2; } } } 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","https://000h.cojeev.com/r/card.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/skeleton.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L4f",null,{"files":[{"path":"registry/cojeev/ui/skeleton.tsx","content":"$50","type":"registry:ui"},{"path":"registry/cojeev/styles/skeleton.css","content":"$51","type":"registry:file","target":"styles/cojeev/skeleton.css"}],"className":"h-[70svh] min-h-80"}]]}]