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:Tc99,"use client" import * as React from "react" import { cn } from "@/lib/utils" import { AspectRatio } from "@/components/ui/aspect-ratio" import { Meta } from "@/components/ui/meta" type FigureProps = Omit, "children"> & { src: string /** What the picture shows. Read aloud, and set in the frame in its place if the picture can't be loaded. */ alt: string srcSet?: string sizes?: string /** Width over height of the crop. 3 / 2 by default, the 35mm negative. Change it and the picture recrops as the frame eases. */ ratio?: number /** Where the crop holds the picture, as CSS object-position. */ position?: string /** The figure's number, set as data before the caption: 01. */ number?: React.ReactNode caption?: React.ReactNode /** Who made it, spread to the far end of the caption row. */ credit?: React.ReactNode /** plate: the caption under the picture. margin: the caption in the margin beside it, the number at its head. */ variant?: "plate" | "margin" loading?: "lazy" | "eager" } /** A picture cropped to a ratio and marked like a printer's proof, with its number, caption and credit set as type. */ function Figure({ src, alt, srcSet, sizes, ratio = 3 / 2, position, number, caption, credit, variant = "plate", loading = "lazy", className, ...props }: FigureProps) { const img = React.useRef(null) // A picture that failed before hydration fires no error event we can hear: look once it's mounted. React.useEffect(() => { const el = img.current if (el) el.closest("figure")?.toggleAttribute("data-missing", el.complete && el.naturalWidth === 0) }, [src]) const mark = (on: boolean) => (e: React.SyntheticEvent) => e.currentTarget.closest("figure")?.toggleAttribute("data-missing", on) return (

{alt} — {number != null ? ( Figure {number} ) : null} {caption ? {caption} : null} {credit ? {credit} : null}

) } export { Figure, type FigureProps } 55:Tc43,@layer components { /* ── ot-figure ── a picture cropped to a ratio and marked like a printer's proof (the aspect ratio's trim marks), then named in type: its number as data, the caption in the voice, the credit spread to the far end on the same baseline, as "the silence that heals" sets its camera and its archive under the picture. No filter, no mask, no zoom: the picture is shown as it is. */ .ot-figure { display: grid; gap: var(--ot-space-6); margin: 0; min-width: 0; container-type: inline-size; } .ot-figure-frame { width: 100%; overflow: visible; } .ot-figure-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } /* The picture that isn't there is described in its place, inside the marks, the way a layout holds a place for one. */ .ot-figure-alt { display: none; max-width: 30ch; padding: var(--ot-space-4); text-align: center; font-size: var(--ot-pp); line-height: var(--ot-pp-lh); color: var(--ot-pencil); } .ot-figure[data-missing] .ot-figure-img { opacity: 0; } .ot-figure[data-missing] .ot-figure-alt { display: block; } .ot-figure-caption { display: flex; align-items: first baseline; gap: var(--ot-space-4); min-width: 0; } .ot-figure-number { flex: none; font-size: var(--ot-mp); line-height: 1; font-weight: 300; letter-spacing: var(--ot-mp-tr); font-variant-numeric: tabular-nums lining-nums; color: var(--ot-ink); } .ot-figure-lines { flex: 1; min-width: 0; } .ot-figure-text { max-width: 44ch; text-wrap: pretty; } .ot-figure-credit { max-width: 24ch; color: var(--ot-pencil); text-align: end; } /* Narrow: no room to spread the credit to the far end, so it steps under the caption and the hairline goes. */ @container (width < 26rem) { .ot-figure-lines { flex-direction: column; align-items: start; gap: var(--ot-space-1); } .ot-figure-lines > hr { display: none; } .ot-figure-credit { text-align: start; } } /* margin: the caption stands in the margin beside the picture, as a book sets a side caption in the columns kept for notes (3 of 12): the number at the head, level with the picture's top, the caption and credit at the foot, level with its foot. Where the two can't stand side by side the caption falls under the picture. */ .ot-figure[data-variant="margin"] { display: flex; flex-flow: row-reverse wrap; gap: var(--ot-space-5) var(--ot-space-6); } .ot-figure[data-variant="margin"] > .ot-figure-frame { flex: 9 1 0; min-width: min(100%, 20rem); } .ot-figure[data-variant="margin"] > .ot-figure-caption { flex: 3 1 0; min-width: 9rem; flex-direction: column; justify-content: space-between; align-items: stretch; gap: var(--ot-space-4); } .ot-figure[data-variant="margin"] .ot-figure-number { font-size: var(--ot-mf); letter-spacing: var(--ot-mf-tr); font-weight: 200; } .ot-figure[data-variant="margin"] .ot-figure-lines { flex: none; flex-direction: column; align-items: start; gap: var(--ot-space-2); } .ot-figure[data-variant="margin"] .ot-figure-lines > hr { display: none; } .ot-figure[data-variant="margin"] .ot-figure-credit { text-align: start; } } 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","https://thedirectors.agency/ui/r/aspect-ratio.json","https://thedirectors.agency/ui/r/meta.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/figure.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/0nlytype/ui/figure.tsx","content":"$54","type":"registry:ui"},{"path":"registry/0nlytype/styles/figure.css","content":"$55","type":"registry:file","target":"styles/0nlytype/figure.css"}],"className":"h-[70svh] min-h-80"}]]}]