50: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"] 51: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"] 52: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"] 53: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"] 54:T16f3,"use client" import * as React from "react" import { cn } from "@/lib/utils" import { roll } from "@/lib/0nlytype/roll" const Slide = React.createContext({ index: 0, total: 0, current: false, shelf: false, choose: () => {} }) const pad = (n: number) => String(n).padStart(2, "0") type CarouselProps = React.ComponentProps<"div"> & { /** * poster: one slide at a time, the name sinking under a hairline. * line: every name on one line of type, read along; the one at the start inks and takes the accent full stop. * shelf: the slides stand as spines, their names running up them; the one you take out faces you. */ variant?: "poster" | "line" | "shelf" /** Names the slides for the keyboard: the track takes focus, so it needs a name. */ trackLabel?: string previousLabel?: string nextLabel?: string } /** * One slide at a time. The count between the arrows rolls the way you travel. * Swipe, scroll, use the arrows, or focus the track and press the arrow keys. * Slides are CarouselItems, as direct children. */ function Carousel({ variant = "poster", trackLabel = "Slides", previousLabel = "Previous", nextLabel = "Next", className, children, ...props }: CarouselProps) { const track = React.useRef(null) const now = React.useRef(null) const items = React.Children.toArray(children) const total = items.length const shelf = variant === "shelf" const [at, setAt] = React.useState(0) const [shown, setShown] = React.useState(0) const was = React.useRef(0) const settle = React.useCallback((i: number) => { if (i === was.current) return const dir = i > was.current ? 1 : -1 was.current = i setAt(i) if (now.current) roll(now.current, () => setShown(i), "0.6em", dir) else setShown(i) }, []) // The slide whose start edge is nearest the track's start is the one you're on, while you swipe or scroll. React.useEffect(() => { const t = track.current if (!t || shelf) return let frame = 0 const read = () => { frame = 0 const side = getComputedStyle(t).direction === "rtl" ? "right" : "left" const edge = t.getBoundingClientRect()[side] let best = 0 let near = Infinity ;[...t.children].forEach((c, i) => { const d = Math.abs(c.getBoundingClientRect()[side] - edge) if (d < near) [near, best] = [d, i] }) settle(best) } const onScroll = () => void (frame ||= requestAnimationFrame(read)) t.addEventListener("scroll", onScroll, { passive: true }) return () => { t.removeEventListener("scroll", onScroll) cancelAnimationFrame(frame) } }, [total, shelf, settle]) const go = (i: number) => { const to = Math.max(0, Math.min(total - 1, i)) // The shelf doesn't scroll: taking a spine out is the move. if (shelf) return settle(to) track.current?.children[to]?.scrollIntoView({ inline: "start", block: "nearest", behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" }) } return (

{ const target = e.target as HTMLElement if (e.defaultPrevented || (target !== e.currentTarget && (target.isContentEditable || target.closest("input, textarea, select")))) return const rtl = getComputedStyle(e.currentTarget).direction === "rtl" const to = { ArrowLeft: at + (rtl ? 1 : -1), ArrowRight: at + (rtl ? -1 : 1), Home: 0, End: total - 1 }[e.key] if (to === undefined) return e.preventDefault() go(to) }} > {items.map((item, index) => ( go(index) }}> {item} ))}

{pad(shown + 1)} / {pad(total)}

) } function CarouselItem({ className, children, ...props }: React.ComponentProps<"div">) { const { index, total, current, shelf, choose } = React.useContext(Slide) return (

{children} {/* A spine on the shelf is taken out with a click; the keyboard has the track's arrows and the buttons. */} {shelf && !current ?

) } /** A name set so large the frame crops it. */ function CarouselTitle({ className, ...props }: React.ComponentProps<"p">) { return

} export { Carousel, CarouselItem, CarouselTitle, type CarouselProps } 55:T18b1,@layer components { /* ── ot-carousel ── one poster at a time; the count rolls the way you travel. The arrows are bare words, no brackets. */ .ot-carousel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ot-space-5); min-width: 0; } .ot-carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; outline-offset: var(--ot-space-3); } .ot-carousel-track::-webkit-scrollbar { display: none; } .ot-carousel-slide { position: relative; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 1fr); align-content: end; gap: var(--ot-space-4); min-width: 0; min-height: 19rem; overflow: clip; } /* The name sinks under a hairline, its feet cut off by it, the way SPECTRA's rule crops its word. */ .ot-carousel-title { height: 0.7em; margin-inline-start: -0.05em; overflow: clip; white-space: nowrap; border-bottom: var(--ot-hairline) solid var(--ot-rule-strong); font-size: var(--ot-fff); line-height: var(--ot-fff-lh); letter-spacing: var(--ot-fff-tr); font-weight: 200; color: var(--ot-ink); } .ot-carousel-title:is([dir="rtl"], [dir="rtl"] *) { margin-inline-start: 0; } .ot-carousel-nav { display: flex; align-items: baseline; gap: var(--ot-space-5); font-size: var(--ot-mp); } .ot-carousel-arrow { appearance: none; border: 0; background: none; padding: 0.1em; font: inherit; color: var(--ot-ink); cursor: pointer; transition: translate var(--ot-allegro) var(--ot-exhale); } .ot-carousel-arrow:first-child { margin-inline-start: -0.1em; } .ot-carousel-arrow:first-child:hover:not(:disabled) { translate: -3px 0; } .ot-carousel-arrow:last-child:hover:not(:disabled) { translate: 3px 0; } .ot-carousel-arrow:disabled { color: var(--ot-rule-strong); cursor: default; } /* An arrow has a direction: flip the glyph and its nudge. */ .ot-carousel-arrow:is([dir="rtl"], [dir="rtl"] *) { scale: -1 1; } .ot-carousel-arrow:first-child:is([dir="rtl"], [dir="rtl"] *):hover:not(:disabled) { translate: 3px 0; } .ot-carousel-arrow:last-child:is([dir="rtl"], [dir="rtl"] *):hover:not(:disabled) { translate: -3px 0; } .ot-carousel-count { color: var(--ot-pencil); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } .ot-carousel-now { display: inline-block; color: var(--ot-ink); } /* Line: the names run on as one line of display type, each closed by a full stop, and you read along it. The name at the start is the one you're on: it inks and its full stop takes the accent; the rest wait in pencil, the next one cropped by the frame's end. A spacer after the last lets it, too, come to the start. */ .ot-carousel[data-variant="line"] .ot-carousel-track { grid-auto-columns: max-content; column-gap: var(--ot-space-6); container-type: inline-size; } .ot-carousel[data-variant="line"] .ot-carousel-track::after { content: ""; width: 60cqi; } .ot-carousel[data-variant="line"] .ot-carousel-slide { min-height: 0; align-content: start; gap: var(--ot-space-3); overflow: visible; } .ot-carousel[data-variant="line"] .ot-carousel-title { height: auto; overflow: visible; border: 0; padding-bottom: 0.14em; color: var(--ot-pencil); transition: color var(--ot-moderato) var(--ot-breath); } .ot-carousel[data-variant="line"] .ot-carousel-title::after { content: "." / ""; transition: color var(--ot-moderato) var(--ot-breath); } .ot-carousel[data-variant="line"] .ot-carousel-slide > :not(.ot-carousel-title) { opacity: 0; transition: opacity var(--ot-moderato) var(--ot-breath); } .ot-carousel[data-variant="line"] .ot-carousel-slide[data-current] > * { opacity: 1; } .ot-carousel[data-variant="line"] [data-current] > .ot-carousel-title { color: var(--ot-ink); } .ot-carousel[data-variant="line"] [data-current] > .ot-carousel-title::after { color: var(--ot-accent); } /* Shelf: every slide stands as a spine, a hairline between each, its name running up it in pencil. Take one out and it widens and turns to face you, the name sinking under its hairline; the other goes back. */ .ot-carousel[data-variant="shelf"] { --spine: var(--ot-space-7); } .ot-carousel[data-variant="shelf"] .ot-carousel-track { display: flex; overflow: clip; scroll-snap-type: none; } .ot-carousel[data-variant="shelf"] .ot-carousel-slide { flex: 0 0 var(--spine); padding-inline: var(--ot-space-3); border-inline-start: var(--ot-hairline) solid var(--ot-rule); transition: flex-grow var(--ot-andante) var(--ot-breath); } .ot-carousel[data-variant="shelf"] .ot-carousel-slide:first-child { border-inline-start: 0; padding-inline-start: 0; } .ot-carousel[data-variant="shelf"] .ot-carousel-slide[data-current] { flex-grow: 1; } .ot-carousel[data-variant="shelf"] .ot-carousel-slide:not([data-current]) > :not(.ot-carousel-title, .ot-carousel-spine) { display: none; } .ot-carousel[data-variant="shelf"] .ot-carousel-slide:not([data-current]) > .ot-carousel-title { justify-self: start; height: auto; margin: 0; border: 0; writing-mode: vertical-rl; rotate: 180deg; font-size: var(--ot-mp); line-height: 1; letter-spacing: var(--ot-mp-tr); font-weight: 300; color: var(--ot-pencil); transition: color var(--ot-allegro) var(--ot-exhale); } .ot-carousel[data-variant="shelf"] .ot-carousel-slide:not([data-current]):has(.ot-carousel-spine:hover) > .ot-carousel-title { color: var(--ot-ink); } .ot-carousel[data-variant="shelf"] .ot-carousel-slide[data-current] > * { animation: ot-carousel-face var(--ot-moderato) var(--ot-exhale) var(--ot-allegro) backwards; } @keyframes ot-carousel-face { from { opacity: 0; } } .ot-carousel-spine { position: absolute; inset: 0; appearance: none; border: 0; padding: 0; background: none; cursor: pointer; } @media (max-width: 859px) { .ot-carousel[data-variant="shelf"] { --spine: var(--ot-space-6); } } @media (forced-colors: active) { .ot-carousel[data-variant="line"] .ot-carousel-title { color: GrayText; } .ot-carousel[data-variant="line"] [data-current] > .ot-carousel-title, .ot-carousel[data-variant="line"] [data-current] > .ot-carousel-title::after { color: CanvasText; } .ot-carousel[data-variant="shelf"] .ot-carousel-slide { border-color: CanvasText; } } } 4f:["$","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,["$","$L50",null,{"namespace":"@0nlytype","registryDependencies":["https://thedirectors.agency/ui/r/0nlytype.json"]}]]}],["$","$L51",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":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"../styles/0nlytype/carousel.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/0nlytype/ui/carousel.tsx","content":"$54","type":"registry:ui"},{"path":"registry/0nlytype/styles/carousel.css","content":"$55","type":"registry:file","target":"styles/0nlytype/carousel.css"}],"className":"h-[70svh] min-h-80"}]]}]