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:Tb8f,"use client" import * as React from "react" import { Fraction } from "@/components/ui/fraction" import { cn } from "@/lib/utils" type StatsProps = React.ComponentProps<"dl"> & { /** * crop: SPECTRA's giant thin figures, their feet cut off by one hairline that runs under the whole row, the * name small beneath. beside: WOVE's 03, a heavy figure with its name and a line about it set beside it. * grid: "Less is more.", each stat a cell of a hairline grid, its name in the top corner and its figure in the far one. */ variant?: "crop" | "beside" | "grid" } /** * A row of named values. Each Stat is a figure and what it counts. The figures in a row share one size, set by the * longest, so they stand on one line. */ function Stats({ className, variant = "crop", style, children, ...props }: StatsProps) { // ponytail: reads the Stats among the direct children; a Stat wrapped in another component keeps its own size. const lens = React.Children.toArray(children).flatMap((c) => React.isValidElement(c) && c.type === Stat ? [figure(c.props.value, c.props.format).length] : [], ) return (

{children} ) } type StatProps = Omit, "children"> & { value: number | string /** What the figure counts: "visits in September". */ label: React.ReactNode /** A line about it, in pencil: "up 12% on August". */ note?: React.ReactNode /** Formats a number. Defaults to en-GB, grouped by a thin space as SI sets figures, since crop cuts off a comma's tail. */ format?: (value: number) => string } const en = new Intl.NumberFormat("en-GB") const grouped = (n: number) => en.format(n).replace(/,/g, "\u202f") const figure = (value: number | string, format = grouped) => (typeof value === "number" ? format(value) : value) /** * A figure and what it counts. When the value changes the figure turns over like a counter's wheels (a Fraction * with no total): only the figures that changed turn, the units first and each carry one arpeggio step behind. * A figure that gains or loses a place turns over whole. The figure is read aloud whole. */ function Stat({ value, label, note, format = grouped, className, style, ...props }: StatProps) { const text = figure(value, format) return (

{label}

{note ?

{note}

: null}

) } export { Stats, Stat, type StatsProps, type StatProps } 55:T133e,@layer components { /* ── ot-stat ── a named value: SPECTRA's giant thin figures, their feet cut off by the one hairline that runs under the row, the name small beneath it. The figure is set to its cell (--len is its length; the row takes its longest, --row-len, so a row shares one size), as large as the cell allows. Its wheels turn inside the crop, so a changed figure drops under the rule and the new one rises out of it, as in a counter's window. */ .ot-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); row-gap: var(--ot-space-7); min-inline-size: min(11rem, 100%); margin: 0; } .ot-stat { --ot-stat-pad: var(--ot-space-5); display: grid; align-content: start; min-width: 0; padding-inline-end: var(--ot-stat-pad); container-type: inline-size; } :where(.ot-stat > dd) { margin: 0; } .ot-stat-label { grid-row: 2; padding-block-start: var(--ot-space-3); font-size: var(--ot-pp); line-height: var(--ot-pp-lh); letter-spacing: var(--ot-pp-tr); color: var(--ot-graphite); } .ot-stat-figure { grid-row: 1; white-space: nowrap; overflow: clip; font-size: clamp(var(--ot-mf), calc(100cqi / (var(--row-len, var(--len)) * 0.6)), var(--ot-fff)); line-height: 0.9; font-weight: 200; letter-spacing: var(--ot-ff-tr); font-variant-numeric: tabular-nums lining-nums; color: var(--ot-ink); /* the rule runs on through the gap to the next stat, so a row stands on one line */ margin-inline-end: calc(-1 * var(--ot-stat-pad)); padding-inline-end: var(--ot-stat-pad); border-block-end: var(--ot-hairline) solid var(--ot-rule-strong); } @supports (text-box: trim-both cap alphabetic) { .ot-stat-figure { line-height: 1; text-box: trim-both cap alphabetic; block-size: calc(1cap - 0.05em); } } /* The figure is a Fraction with no total (its wheels), set in the stat's own face: roman, thin, the cell's size. */ .ot-stat-figure > .ot-fraction { display: inline; font-size: inherit; line-height: inherit; color: inherit; } .ot-stat-figure .ot-fraction > .ot-yours { display: inline-block; font: inherit; letter-spacing: inherit; } .ot-stat-note { grid-row: 3; font-size: var(--ot-pp); line-height: var(--ot-pp-lh); letter-spacing: var(--ot-pp-tr); color: var(--ot-pencil); } /* ── beside ── WOVE's 03: the figure heavy and whole, its name and a line about it set beside it, their caps on its cap line. The stats stand in a list, figures flush to one edge (tabular, so the units line up) and the words in one column. */ .ot-stats[data-variant="beside"] { grid-template-columns: max-content minmax(0, 20rem); gap: var(--ot-space-6) var(--ot-space-4); } .ot-stats[data-variant="beside"] .ot-stat { grid-column: 1 / -1; grid-template-columns: subgrid; padding: 0; container-type: normal; } .ot-stats[data-variant="beside"] .ot-stat-figure { grid-row: 1 / span 2; justify-self: end; margin: 0; padding: 0; border: 0; block-size: auto; overflow: visible; font-size: var(--ot-ff); line-height: 0.9; font-weight: 700; letter-spacing: var(--ot-mf-tr); text-box: trim-both cap alphabetic; } .ot-stats[data-variant="beside"] .ot-stat-label { grid-row: 1; grid-column: 2; padding: 0; font-size: var(--ot-p); line-height: 1.25; font-weight: 600; color: var(--ot-ink); text-box: trim-start cap; } .ot-stats[data-variant="beside"] .ot-stat-note { grid-row: 2; grid-column: 2; font-size: var(--ot-p); line-height: 1.25; color: var(--ot-pencil); } @media (max-width: 40rem) { .ot-stats[data-variant="beside"] .ot-stat-figure { font-size: var(--ot-mf); } } /* ── grid ── "Less is more.": each stat a cell of a hairline grid; the name in the cell's first corner, the figure large in the far one. The lines run between the cells only (the outer ones are cut off), so they stop where the stats do. */ .ot-stats[data-variant="grid"] { overflow: clip; row-gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .ot-stats[data-variant="grid"] .ot-stat { grid-template-rows: auto auto 1fr; min-block-size: 11rem; padding: var(--ot-space-4) var(--ot-space-4) var(--ot-space-4) var(--ot-space-4); margin-block-start: calc(-1 * var(--ot-hairline)); margin-inline-start: calc(-1 * var(--ot-hairline)); border-block-start: var(--ot-hairline) solid var(--ot-rule-strong); border-inline-start: var(--ot-hairline) solid var(--ot-rule-strong); } .ot-stats[data-variant="grid"] .ot-stat-label { grid-row: 1; padding: 0; } .ot-stats[data-variant="grid"] .ot-stat-note { grid-row: 2; } .ot-stats[data-variant="grid"] .ot-stat-figure { grid-row: 3; align-self: end; justify-self: end; margin: 0; padding: var(--ot-space-4) 0 0; border: 0; block-size: auto; overflow: visible; font-size: clamp(var(--ot-mf), calc(80cqi / (var(--row-len, var(--len)) * 0.6)), var(--ot-ff)); line-height: 0.9; font-weight: 500; text-box: trim-both cap alphabetic; } } 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/fraction.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/stat.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/0nlytype/ui/stat.tsx","content":"$54","type":"registry:ui"},{"path":"registry/0nlytype/styles/stat.css","content":"$55","type":"registry:file","target":"styles/0nlytype/stat.css"}],"className":"h-[70svh] min-h-80"}]]}]