4d: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"] 4e: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"] 4f: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"] 50: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"] 51:T119c,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { createMotionLane, useChoreography } from "@/lib/cojeev-motion/choreography"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; export type LivingLinkProps = Omit, "href"> & { href: string; /** Anchors have no native disabled attribute: remove href and leave an announced label. */ disabled?: boolean; direction?: "forward" | "up-right"; /** Directional ink reveals or a soft pigment wash; contour preserves the original resting mark. */ treatment?: "contour" | "underline-start" | "underline-end" | "underline-center" | "wash-up" | "wash-across"; tone?: "pink" | "olive" | "blue" | "yellow"; }; /** A native link with an original ink contour. Motion never owns navigation. */ export function LivingLink({ href, disabled = false, direction = "up-right", treatment = "contour", tone = "blue", children, className, ref, onPointerEnter, onPointerLeave, onFocus, onBlur, onClickCapture, onAuxClickCapture, "aria-disabled": ariaDisabled, tabIndex, ...props }: LivingLinkProps) { const host = React.useRef(null); const lane = React.useRef | null>(null); const [hovered, setHovered] = React.useState(false); const [focused, setFocused] = React.useState(false); const [localQuiet, setLocalQuiet] = React.useState(false); const { quiet, transition } = useChoreography(); const { enabled, inView } = useMotionVisibility(host); const blocked = disabled || ariaDisabled === true || ariaDisabled === "true"; const active = !blocked && (hovered || focused); const still = quiet || localQuiet || !enabled || !inView; const bindRef = React.useCallback((element: HTMLAnchorElement | null) => { host.current = element; if (typeof ref === "function") return ref(element); if (ref) ref.current = element; }, [ref]); React.useEffect(() => { const element = host.current; if (!element) return; const painter = createMotionLane(0, value => element.style.setProperty("--link-motion", String(Math.max(0, Math.min(1, value))))); lane.current = painter; return () => { painter.dispose(); lane.current = null; }; }, []); React.useEffect(() => { const element = host.current; if (!element) return; const update = () => setLocalQuiet(Boolean(element.closest('[data-flow="off"],[data-no-glide]'))); const observer = new MutationObserver(update); for (let ancestor: HTMLElement | null = element; ancestor; ancestor = ancestor.parentElement) { observer.observe(ancestor, { attributes: true, attributeFilter: ["data-flow", "data-no-glide"] }); } update(); return () => observer.disconnect(); }, []); React.useEffect(() => { if (still) lane.current?.jump(active ? 1 : 0); else lane.current?.to(active ? 1 : 0, transition); }, [active, still, transition]); return { if (blocked) { event.preventDefault(); event.stopPropagation(); return; } onClickCapture?.(event); }} onAuxClickCapture={event => { if (blocked) { event.preventDefault(); event.stopPropagation(); return; } onAuxClickCapture?.(event); }} onPointerEnter={event => { onPointerEnter?.(event); if (!event.defaultPrevented && event.pointerType !== "touch") setHovered(true); }} onPointerLeave={event => { onPointerLeave?.(event); setHovered(false); }} onFocus={event => { onFocus?.(event); if (!event.defaultPrevented) setFocused(true); }} onBlur={event => { onBlur?.(event); setFocused(false); }}> {children} ; } 52:T18d3,@layer cojeev-states { .v-living-link{--link-open:var(--link-motion,0);display:inline-flex;align-items:baseline;gap:.3em;max-inline-size:100%;min-inline-size:0;position:relative;color:var(--v-text);font:inherit;font-weight:var(--fw-control);text-decoration:none;vertical-align:baseline;cursor:pointer;} .v-living-link:any-link{text-decoration:none;} .v-living-link:hover,.v-living-link:focus-visible{color:var(--v-text);} .v-living-link:focus-visible{outline:2px solid var(--ring);outline-offset:5px;border-radius:var(--r-sm);} .v-living-link__words{position:relative;min-inline-size:0;padding-block-end:.17em;overflow-wrap:anywhere;} .v-living-link__ink{position:absolute;pointer-events:none;inset-inline:0;inset-block-end:-.12em;inline-size:100%;block-size:.42em;overflow:visible;clip-path:inset(-.1em calc(22% * (1 - var(--link-open,0))) -.1em 0);} .v-living-link__ink path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:calc(.55 + .45 * var(--link-open,0));} .v-living-link__arrow{display:inline-flex;flex:none;inline-size:.95em;block-size:.95em;align-self:baseline;translate:calc(var(--link-open,0) * .14em) calc(var(--link-open,0) * -.14em);} .v-living-link__arrow svg{inline-size:100%;block-size:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;} .v-living-link:where([data-direction="forward"]) .v-living-link__arrow{translate:calc(var(--link-open,0) * .2em) 0;} .v-living-link:where(:dir(rtl)[data-direction="forward"]) .v-living-link__arrow{scale:-1 1;translate:calc(var(--link-open,0) * -.2em) 0;} .v-living-link__arrow-window{display:grid;inline-size:100%;block-size:100%;} .v-living-link__arrow-window svg{grid-area:1/1;} .v-living-link__arrow-window [data-arrow="incoming"]{visibility:hidden;} .v-living-link:where(:not([data-treatment="contour"])) .v-living-link__arrow{translate:0 0;} .v-living-link:where(:not([data-treatment="contour"])) .v-living-link__arrow-window{overflow:hidden;} .v-living-link:where(:not([data-treatment="contour"])) .v-living-link__arrow-window [data-arrow="outgoing"]{translate:calc(var(--link-open,0) * 125%) 0;opacity:calc(1 - var(--link-open,0));} .v-living-link:where(:not([data-treatment="contour"])) .v-living-link__arrow-window [data-arrow="incoming"]{visibility:visible;translate:calc((var(--link-open,0) - 1) * 125%) 0;opacity:var(--link-open,0);} .v-living-link:where(:not([data-treatment="contour"])[data-direction="up-right"]) .v-living-link__arrow-window [data-arrow="outgoing"]{translate:calc(var(--link-open,0) * 125%) calc(var(--link-open,0) * -125%);} .v-living-link:where(:not([data-treatment="contour"])[data-direction="up-right"]) .v-living-link__arrow-window [data-arrow="incoming"]{translate:calc((var(--link-open,0) - 1) * 125%) calc((1 - var(--link-open,0)) * 125%);} .v-living-link[data-treatment^="underline"] .v-living-link__ink path{opacity:1;} .v-living-link[data-treatment="underline-start"] .v-living-link__ink, .v-living-link:dir(rtl)[data-treatment="underline-end"] .v-living-link__ink{clip-path:inset(-.1em calc(100% * (1 - var(--link-open,0))) -.1em 0);} .v-living-link[data-treatment="underline-end"] .v-living-link__ink, .v-living-link:dir(rtl)[data-treatment="underline-start"] .v-living-link__ink{clip-path:inset(-.1em 0 -.1em calc(100% * (1 - var(--link-open,0))));} .v-living-link[data-treatment="underline-center"] .v-living-link__ink{clip-path:inset(-.1em calc(50% * (1 - var(--link-open,0))) -.1em);} .v-living-link[data-treatment^="wash"]{--link-pigment:var(--v-blue);} .v-living-link[data-tone="pink"]{--link-pigment:var(--v-pink);} .v-living-link[data-tone="olive"]{--link-pigment:var(--v-olive);} .v-living-link[data-tone="yellow"]{--link-pigment:var(--v-yellow);} .v-living-link[data-treatment^="wash"] .v-living-link__words{isolation:isolate;} .v-living-link[data-treatment^="wash"] .v-living-link__words::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:.04em -.2em .02em;border-radius:38% 62% 43% 57%/20% 22% 28% 23%;background:color-mix(in oklab,var(--link-pigment) 25%,transparent);} .v-living-link[data-treatment="wash-up"] .v-living-link__words::before{transform-origin:50% 100%;scale:1 var(--link-open,0);} .v-living-link[data-treatment="wash-across"] .v-living-link__words::before{transform-origin:0 50%;scale:var(--link-open,0) 1;} .v-living-link:dir(rtl)[data-treatment="wash-across"] .v-living-link__words::before{transform-origin:100% 50%;} .v-living-link[data-treatment^="wash"] .v-living-link__ink{opacity:.45;} .v-living-link[aria-disabled="true"]{color:var(--v-text-3);cursor:not-allowed;} .v-living-link[aria-disabled="true"] .v-living-link__ink{opacity:.45;} .v-living-link[aria-disabled="true"] .v-living-link__words::before{display:none;} .v-living-link[data-quiet="true"] .v-living-link__arrow{translate:0 0;} .v-living-link[data-quiet="true"] .v-living-link__arrow-window [data-arrow="outgoing"]{translate:0 0;opacity:1;} .v-living-link[data-quiet="true"] .v-living-link__arrow-window [data-arrow="incoming"]{visibility:hidden;} /* Immediate paint wins even before React receives a changed preference. */ :where([data-flow="off"],[data-no-glide]) .v-living-link,.v-living-link:where([data-flow="off"],[data-no-glide]){--link-open:0;} :where([data-flow="off"],[data-no-glide]) .v-living-link[data-active="true"],.v-living-link[data-active="true"]:where([data-flow="off"],[data-no-glide]){--link-open:1;} :where([data-flow="off"],[data-no-glide]) .v-living-link__arrow,.v-living-link:where([data-flow="off"],[data-no-glide]) .v-living-link__arrow{--link-open:0;translate:0 0;} [data-flow="off"] .v-living-link .v-living-link__arrow{translate:0 0;} [data-flow="off"] .v-living-link__arrow-window [data-arrow="outgoing"]{translate:0 0;opacity:1;} [data-flow="off"] .v-living-link__arrow-window [data-arrow="incoming"]{visibility:hidden;} @media(prefers-reduced-motion:reduce){.v-living-link__arrow{translate:0 0;}.v-living-link__ink{clip-path:none;}.v-living-link__ink path{opacity:1;}} @media(prefers-reduced-motion:reduce){.v-living-link__arrow-window [data-arrow="outgoing"]{translate:0 0;opacity:1;}.v-living-link__arrow-window [data-arrow="incoming"]{visibility:hidden;}} @media(forced-colors:active){.v-living-link{color:LinkText;}.v-living-link[aria-disabled="true"]{color:GrayText;}} } 4c:["$","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,["$","$L4d",null,{"namespace":"@000h-cojeev","registryDependencies":["https://000h.cojeev.com/r/cojeev.json"]}]]}],["$","$L4e",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":["$","$L4f",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"@/styles/cojeev/living-link.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/living-link.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/living-link.css","content":"$52","type":"registry:file","target":"styles/cojeev/living-link.css"}],"className":"h-[70svh] min-h-80"}]]}]