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:T1301,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { useReferenceRef } from "@/lib/cojeev/reference-ref"; import { useMotionVisibility } from "@/lib/cojeev-motion/use-motion-visibility"; import { decodeHeading,headingTiming } from "@/lib/cojeev/reference-additions-math"; export type ArticleHeadingItem={id:string;title:string;meta?:string;href?:string}; export type ArticleHeadingsProps=Omit,"children">&{ items:readonly ArticleHeadingItem[];label?:string;headingLevel?:2|3|4;duration?:number;stagger?:number; scrambleLength?:number;preserveChance?:number;tailChance?:number;paused?:boolean;replayKey?:string|number; size?:"sm"|"default"|"lg";onDecodeComplete?:()=>void; }; /** Semantic article headings stay intact while a decorative noise frontier resolves over them. */ export function ArticleHeadings({items,label="Field notes",headingLevel=2,duration=700,stagger=140,scrambleLength=10,preserveChance=.25,tailChance=.12,paused=false,replayKey=0,size="default",onDecodeComplete,className,ref,...props}:ArticleHeadingsProps){ const host=React.useRef(null),consumed=React.useRef(""),callback=React.useRef(onDecodeComplete); const attach=useReferenceRef(host,ref); const {enabled,inView}=useMotionVisibility(host),running=enabled&&inView&&!paused; const Heading=headingLevel===3?"h3":headingLevel===4?"h4":"h2"; const segmenter=React.useMemo(()=>new Intl.Segmenter(undefined,{granularity:"grapheme"}),[]); const timing=headingTiming(duration,stagger,items.length),content=JSON.stringify(items.map(item=>item.title)); const token=JSON.stringify([content,replayKey,timing.duration,timing.delay,scrambleLength,preserveChance,tailChance]); React.useEffect(()=>{callback.current=onDecodeComplete;},[onDecodeComplete]); React.useEffect(()=>{ const root=host.current;if(!root)return; const rows=Array.from(root.querySelectorAll("[data-heading-visual]")); const originals=rows.map(row=>Array.from(row.querySelectorAll("[data-decode-value]"),node=>({node,text:node.textContent??""}))); const restore=()=>{originals.forEach(row=>row.forEach(({node,text})=>{node.textContent=text;}));root.dataset.running="false";}; if(!running){restore();root.dataset.state="still";return;} if(consumed.current===token){root.dataset.state="complete";return;} consumed.current=token; const titles=JSON.parse(content) as string[]; let frame=0,start=0,lastPaint=-100; const draw=(now:number)=>{ if(!start)start=now; const elapsed=now-start,done=elapsed>=timing.duration+timing.delay*Math.max(0,rows.length-1); if(elapsed-lastPaint>=40||done){ lastPaint=elapsed; originals.forEach((glyphs,index)=>{ const p=Math.max(0,Math.min(1,(elapsed-index*timing.delay)/timing.duration)); if(elapsed1000||index>=80)return; const output=decodeHeading(titles[index],p,Math.floor(elapsed/40)+index,{scrambleLength,preserveChance,tailChance}); glyphs.forEach(({node},i)=>{node.textContent=output[i]??"";}); }); } root.dataset.state=done?"complete":"decoding";root.dataset.running=String(!done); if(done){restore();callback.current?.();}else frame=requestAnimationFrame(draw); }; frame=requestAnimationFrame(draw); return()=>{cancelAnimationFrame(frame);restore();root.dataset.state="still";}; },[running,token,content,timing.duration,timing.delay,scrambleLength,preserveChance,tailChance]); const title=(text:string)=><>{text}; return

{label}{items.length} {items.length===1?"entry":"entries"}

{items.map((item,index)=>

{item.href?{title(item.title)}:title(item.title)}{item.meta&&

{item.meta}

}

)}

; } 52:T894,@layer cojeev-states { .v-article-headings {inline-size:100%;min-inline-size:0;color:var(--v-text);background:var(--v-paper);border-radius:var(--r-panel,24px);padding:24px;} .v-article-headings__header {display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--v-text-2);padding-block-end:16px;border-block-end:1px solid var(--v-border);} .v-article-headings__entry {display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:16px;padding-block:24px;border-block-end:1px solid var(--v-border);} .v-article-headings__entry:last-child {border:0;padding-block-end:8px;} .v-article-headings__index {font-size:12px;color:var(--v-text-2);padding-block-start:8px;font-variant-numeric:tabular-nums;} .v-article-headings h2,.v-article-headings h3,.v-article-headings h4 {font-family:var(--font-display);font-weight:500;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.18;letter-spacing:-.02em;margin:0;min-inline-size:0;overflow-wrap:anywhere;} .v-article-headings a {color:inherit;text-decoration:none;border-radius:4px;} .v-article-headings a:hover {text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em;} .v-article-headings a:focus-visible {outline:2px solid var(--v-accent-ink);outline-offset:5px;} .v-article-headings__meta {grid-column:2;font-size:12px;color:var(--v-text-2);margin:12px 0 0;} .v-article-headings__word {display:inline-block;max-inline-size:100%;} .v-article-headings__glyph {display:inline-grid;vertical-align:baseline;white-space:pre;position:relative;} .v-article-headings__measure {grid-area:1/1;visibility:hidden;} .v-article-headings [data-decode-value] {grid-area:1/1;position:absolute;inset-inline-start:0;} .v-article-headings__accessible {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;} .v-article-headings[data-size="sm"] {padding:16px;} .v-article-headings[data-size="sm"] h2,.v-article-headings[data-size="sm"] h3,.v-article-headings[data-size="sm"] h4 {font-size:1.5rem;} .v-article-headings[data-size="lg"] h2,.v-article-headings[data-size="lg"] h3,.v-article-headings[data-size="lg"] h4 {font-size:clamp(1.75rem,4vw,3rem);} } 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/article-headings.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L50",null,{"files":[{"path":"registry/cojeev/ui/article-headings.tsx","content":"$51","type":"registry:ui"},{"path":"registry/cojeev/styles/article-headings.css","content":"$52","type":"registry:file","target":"styles/cojeev/article-headings.css"}],"className":"h-[70svh] min-h-80"}]]}]