51: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 53: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 54: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 55:Te4b,"use client" import * as React from "react" import { Corners } from "@/components/ui/corners" import { Meta } from "@/components/ui/meta" import { useComposedRefs } from "@/lib/0nlytype/refs" import { cn } from "@/lib/utils" type ScrollExpandProps = Omit, "children"> & { /** What the plate holds. It is all there for readers from the start; only the view of it is cropped. */ children: React.ReactNode /** The words in the meta row under the plate, held apart by hairlines. The row grows with the crop. */ caption?: React.ReactNode /** mark: the crop opens from a small square in the middle. horizon: from a hairline across the whole measure, up and down. */ variant?: "mark" | "horizon" /** Pins how far it has opened, 0 to 1, instead of following the scroll. */ progress?: number } /** * A plate cropped by four corner marks that open as the page scrolls, from a small mark to the full * measure. It is scrubbed: it opens only as far as the scroll has gone, stops when the scroll stops and * closes again when you scroll back. The share of the measure it has reached is read out at the end of * the caption. Under reduced motion, or without script, it stands open. */ function ScrollExpand({ children, caption, variant = "mark", progress, className, ref: forwardedRef, ...props }: ScrollExpandProps) { const ref = React.useRef(null) const composedRef = useComposedRefs(ref, forwardedRef) const share = React.useRef(null) React.useEffect(() => { const el = ref.current if (!el) return const set = (p: number) => { el.style.setProperty("--p", p.toFixed(4)) if (share.current) share.current.textContent = p.toFixed(2) } if (progress !== undefined) return set(Math.min(1, Math.max(0, progress))) if (matchMedia("(prefers-reduced-motion: reduce)").matches) return set(1) // 0 as the plate's top comes in at the foot of the view, 1 once its middle is at the middle of the view // (or as far as the page can scroll). Read from the real layout, so it follows a smooth scroller that // moves the page itself. let frame = 0 const read = () => { const box = el.getBoundingClientRect(), h = innerHeight const top = box.top + scrollY const from = Math.max(0, top - h), to = Math.min(document.documentElement.scrollHeight - h, top + box.height / 2 - h / 2) set(to <= from ? 1 : Math.min(1, Math.max(0, (scrollY - from) / (to - from)))) } // Asked for from the scroll event, the frame runs after a smooth scroller's own frame has moved the page, // so the crop and the page move in the same frame. const onScroll = () => { cancelAnimationFrame(frame) frame = requestAnimationFrame(read) } read() addEventListener("scroll", onScroll, { passive: true }) addEventListener("resize", onScroll) return () => { cancelAnimationFrame(frame) removeEventListener("scroll", onScroll) removeEventListener("resize", onScroll) } }, [progress]) return (

{children}

{React.Children.toArray(caption)}

) } export { ScrollExpand, type ScrollExpandProps } 56:T91c,@layer components { /* ── ot-expand ── a plate cropped by four corner marks that open with the scroll, from a small mark to the measure. --p (0 to 1) is set by the hook from the real scroll position; without it the plate stands open. The crop is a clip-path, so the whole plate is in the flow and read from the start; the corner marks stand a step outside it, as a printer's crop marks stand outside the trim. Nothing eases: the crop is exactly where the scroll is. */ .ot-expand { --q: calc(1 - var(--p, 1)); --m: var(--ot-expand-mark, var(--ot-space-8)); margin: 0; display: grid; gap: var(--ot-space-4); min-width: 0; } .ot-expand-frame { --cx: calc(var(--q) * max(0px, 50% - var(--m) / 2)); --cy: var(--cx); --ot-corner: var(--ot-space-4); --ot-corner-inset: calc(var(--cy) - var(--ot-space-2)) calc(var(--cx) - var(--ot-space-2)); min-width: 0; } .ot-expand-plate { clip-path: inset(var(--cy) var(--cx)); } /* The caption's row is as wide as the crop (never narrower than it can read), so its hairlines draw out as it opens, the rule of SHAPES / GRADIENTS carrying the date and the name. The share of the measure closes the row. */ .ot-expand-caption { inline-size: max(min(100%, 20rem), calc(var(--m) + var(--p, 1) * (100% - var(--m)))); justify-self: center; } .ot-expand-share { color: var(--ot-pencil); font-variant-numeric: tabular-nums lining-nums; } /* horizon: after Eclipse, where the disc stands on one line. The crop starts as a hairline across the whole measure and opens up and down from it; the horizon itself is drawn while it's shut and fades as the plate opens. */ .ot-expand[data-variant="horizon"] .ot-expand-frame { --cx: 0px; --cy: calc(var(--q) * (50% - var(--ot-hairline) / 2)); } .ot-expand[data-variant="horizon"] .ot-expand-frame::before { content: ""; position: absolute; inset-inline: 0; top: calc(50% - var(--ot-hairline) / 2); block-size: var(--ot-hairline); background: var(--ot-rule-strong); opacity: calc(1 - min(1, 4 * var(--p, 1))); pointer-events: none; /* gone by a quarter open */ } .ot-expand[data-variant="horizon"] .ot-expand-caption { inline-size: 100%; } @media (forced-colors: active) { .ot-expand[data-variant="horizon"] .ot-expand-frame::before { background: CanvasText; } } } 50:["$","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,["$","$L51",null,{"namespace":"@0nlytype","registryDependencies":["https://thedirectors.agency/ui/r/0nlytype.json","https://thedirectors.agency/ui/r/corners.json","https://thedirectors.agency/ui/r/meta.json"]}]]}],["$","$L52",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":["$","$L53",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"../styles/0nlytype/scroll-expand.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L54",null,{"files":[{"path":"registry/0nlytype/ui/scroll-expand.tsx","content":"$55","type":"registry:ui"},{"path":"registry/0nlytype/styles/scroll-expand.css","content":"$56","type":"registry:file","target":"styles/0nlytype/scroll-expand.css"}],"className":"h-[70svh] min-h-80"}]]}]