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:T3e91,"use client" import * as React from "react" import { cn } from "@/lib/utils" import { roll } from "@/lib/0nlytype/roll" const DAY = 86_400_000 const startOfDay = (d: Date) => new Date(d.getFullYear(), d.getMonth(), d.getDate()) const startOfMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth(), 1) const addDays = (d: Date, n: number) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n) const sameDay = (a?: Date | null, b?: Date | null) => !!a && !!b && +startOfDay(a) === +startOfDay(b) const sameMonth = (a?: Date | null, b?: Date | null) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() const daysIn = (d: Date) => new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate() /** Whole days from a to b (a clock change can't make it 11.96). */ const between = (a: Date, b: Date) => Math.round((+startOfDay(b) - +startOfDay(a)) / DAY) /** Monday is 0. */ const weekday = (d: Date) => (d.getDay() + 6) % 7 const two = (n: number) => String(n).padStart(2, "0") /** Today's date after mount only, so the server and the first client render agree. */ const noop = () => () => {} const useToday = () => { const day = React.useSyncExternalStore(noop, () => startOfDay(new Date()).getTime(), () => null) return day === null ? null : new Date(day) } type CalendarProps = Omit, "defaultValue" | "onChange"> & { /** The chosen day. */ value?: Date defaultValue?: Date onValueChange?: (date: Date) => void /** Any date in the month on show. */ month?: Date defaultMonth?: Date onMonthChange?: (month: Date) => void /** Which day is today. Left out, it's the device's, known once the page has loaded. */ today?: Date /** Days before today can't be chosen. */ disablePast?: boolean locale?: string /** * How time is drawn. Dots, the poster: a large disc for every day, ink for the days gone, the accent * for today, hairline rings for the days to come, and half-moons for the wait. Ruler: the month as one * measured line, a tick a day, with the wait between today and your day drawn as a dimension. * Ghost: the days as figures only, read through the chosen day and its month set huge and faint * behind them. Parenthesis: the month set as one running line of figures, the time from today to your * day enclosed in parentheses. */ variant?: "dots" | "ruler" | "ghost" | "parenthesis" /** The tracked line at the foot. Left out, it counts the days (in English); null leaves it out. */ caption?: React.ReactNode } /** * A month drawn as time: the days gone, today, the days to come, and the wait for the day you choose. * The big numeral in the head is the chosen day (else today); the day you choose is yours, in italic. * Arrow keys move by day and week, Page Up and Page Down by month, Home and End to the ends of the week. */ function Calendar({ value: valueProp, defaultValue, onValueChange, month: monthProp, defaultMonth, onMonthChange, today: todayProp, disablePast = false, locale = "en-GB", variant = "dots", caption: captionProp, className, ...props }: CalendarProps) { const id = React.useId() const clock = useToday() const today = todayProp ? startOfDay(todayProp) : clock const ruler = variant === "ruler" const ghost = variant === "ghost" const [innerValue, setInnerValue] = React.useState(defaultValue) const value = valueProp ?? innerValue const [innerMonth, setInnerMonth] = React.useState(defaultMonth) const shown = monthProp ?? innerMonth ?? value ?? today const view = shown ? startOfMonth(shown) : null const last = view ? daysIn(view) : 0 const [focus, setFocus] = React.useState() const [turn, setTurn] = React.useState<0 | 1 | -1>(0) const [acted, setActed] = React.useState(false) const [scrub, setScrub] = React.useState(false) const moved = React.useRef(false) const grid = React.useRef(null) const goTo = (to: Date, dir: 1 | -1) => { if (monthProp === undefined) setInnerMonth(to) onMonthChange?.(to) setTurn(dir) } const step = (delta: number) => goTo(new Date(view!.getFullYear(), view!.getMonth() + delta, 1), delta > 0 ? 1 : -1) const disabled = (date: Date) => disablePast && !!today && date < today const pick = (date: Date) => { if (disabled(date)) return if (valueProp === undefined) setInnerValue(date) onValueChange?.(date) setFocus(date) setTurn(0) setActed(true) } // The one tab stop: where you were, else the chosen day, else today, else the 1st. const stop = (view && [focus, value, today].find((d) => d && sameMonth(d, view))) || view // After a key moves the stop (perhaps into another month), focus follows it. React.useEffect(() => { if (!moved.current) return moved.current = false grid.current?.querySelector('[tabindex="0"]')?.focus() }) // The head: the chosen day, else today, else the 1st, with its weekday. It rolls when it changes. const headDay = view ? (value && sameMonth(value, view) ? value : today && sameMonth(today, view) ? today : view) : null const yours = !!headDay && sameDay(headDay, value) const short = new Intl.DateTimeFormat(locale, { weekday: "short" }) const target = headDay ? `${two(headDay.getDate())}|${short.format(headDay)}|${two(headDay.getMonth() + 1)}` : "" const [seen, setSeen] = React.useState(target) const [held, setHeld] = React.useState(null) if (target !== seen) { setSeen(target) if (seen && !ruler && !ghost) setHeld(seen) // keep the old numeral up while it rolls out; the ruler's glides, the ghost surfaces } const date = React.useRef(null) const name = React.useRef(null) React.useEffect(() => { if (held === null) return const dir = turn || (target > held ? 1 : -1) if (!date.current || !name.current) return setHeld(null) roll(date.current, () => setHeld(null), "0.4em", dir) roll(name.current, () => {}, "0.6em", dir) }, [held, target, turn]) const [numeral, dayName, monthNo] = (held ?? target).split("|") const narrow = new Intl.DateTimeFormat(locale, { weekday: "narrow" }) const long = new Intl.DateTimeFormat(locale, { weekday: "long" }) const dated = new Intl.DateTimeFormat(locale, { day: "numeric", month: "long", year: "numeric" }) const spoken = (day: Date) => `${long.format(day)} ${dated.format(day)}` // "Wednesday 30 September 2026" const monthName = view?.toLocaleString(locale, { month: "long" }) ?? "" const monday = new Date(2024, 0, 1) const titleId = `${id}-title` // Weeks as rows of seven, Monday first. Before the 1st there is only paper; after the last day, nothing. const weeks: (Date | null)[][] = [] if (view) { const cells = [...Array(weekday(view)).fill(null), ...Array.from({ length: last }, (_, i) => addDays(view, i))] for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7)) } // The wait: the days between today and the chosen day. Counted, so the moons wax in turn toward yours. const waits = (day: Date) => !!value && !!today && day > today && day < startOfDay(value) let wait = 0 // The ruler numbers the weeks' first days, but gives way to a neighbouring today or yours. const near = (day: Date) => [today, value].some((d) => d && !sameDay(d, day) && Math.abs(between(d, day)) === 1) // The foot says something true about the days on show. const gap = value && today ? between(today, value) : null const count = (n: number, one: string, many: string) => (n === 1 ? one : `${n} ${many}`) const told = !today || !view ? null : gap !== null ? gap > 1 ? `${gap} days to go` : gap === 1 ? "Tomorrow" : gap === 0 ? "Today is the day" : gap === -1 ? "Yesterday" : `${-gap} days ago` : sameMonth(today, view) ? last === today.getDate() ? `The last day of ${monthName}` : `${count(last - today.getDate(), "One day", "days")} left in ${monthName}` : view < today ? `All ${last} days gone` : `${last} days to come` // The aside encloses the time from today to your day, whichever comes first, both ends included. const [lo, hi] = variant === "parenthesis" && value && today ? (gap! >= 0 ? [today, startOfDay(value)] : [startOfDay(value), today]) : [] const paren = (day: Date) => [sameDay(day, lo) && "open", sameDay(day, hi) && "close"].filter(Boolean).join(" ") || undefined // The ruler measures the wait as a dimension, from today to your day. An end off this month stays open. let span: { a: number; b: number; open: string } | null = null if (ruler && view && value && today && gap) { const [lo, hi] = gap > 0 ? [today, value] : [value, today] const end = new Date(view.getFullYear(), view.getMonth(), last) if (lo <= end && hi >= view) { const a = sameMonth(lo, view) ? lo.getDate() - 0.5 : 0 const b = sameMonth(hi, view) ? hi.getDate() - 0.5 : last span = { a, b, open: [a === 0 && "start", b === last && "end"].filter(Boolean).join(" ") } } } const onKeyDown = (e: React.KeyboardEvent) => { if (!stop) return // Right to left, the next day is on the left. const rtl = getComputedStyle(e.currentTarget).direction === "rtl" const to = { ArrowLeft: addDays(stop, rtl ? 1 : -1), ArrowRight: addDays(stop, rtl ? -1 : 1), ArrowUp: addDays(stop, -7), ArrowDown: addDays(stop, 7), Home: addDays(stop, -weekday(stop)), End: addDays(stop, 6 - weekday(stop)), PageUp: new Date(stop.getFullYear(), stop.getMonth() - 1, Math.min(stop.getDate(), new Date(stop.getFullYear(), stop.getMonth(), 0).getDate())), PageDown: new Date(stop.getFullYear(), stop.getMonth() + 1, Math.min(stop.getDate(), new Date(stop.getFullYear(), stop.getMonth() + 2, 0).getDate())), }[e.key] if (!to) return e.preventDefault() moved.current = true setFocus(to) if (!sameMonth(to, view)) goTo(startOfMonth(to), to > stop ? 1 : -1) } // The ruler's ticks are narrow, so the hand draws along it: pressing and moving sketches the day // under the pointer, and letting go chooses it. const dayAt = (e: React.PointerEvent) => { const box = e.currentTarget.getBoundingClientRect() let x = (e.clientX - box.left) / box.width if (getComputedStyle(e.currentTarget).direction === "rtl") x = 1 - x return new Date(view!.getFullYear(), view!.getMonth(), Math.min(last, Math.max(1, Math.ceil(x * last)))) } const scrubbing = ruler && view ? { onPointerDown: (e: React.PointerEvent) => { if (e.button !== 0) return e.currentTarget.setPointerCapture(e.pointerId) setScrub(true) setFocus(dayAt(e)) }, onPointerMove: (e: React.PointerEvent) => scrub && setFocus(dayAt(e)), onPointerUp: (e: React.PointerEvent) => { if (!scrub) return setScrub(false) moved.current = true pick(dayAt(e)) }, onPointerCancel: () => setScrub(false), } : {} const p = headDay ? (headDay.getDate() - 0.5) / last : 0 return (

{monthName} {view ? ` ${view.getFullYear()}` : null}

0 ? "next" : "prev") : undefined} data-acted={acted ? "" : undefined} data-scrub={scrub ? "" : undefined} style={{ "--days": last } as React.CSSProperties} className="ot-month-grid" onKeyDown={onKeyDown} {...scrubbing} >

{Array.from({ length: 7 }, (_, i) => { const day = addDays(monday, i) return ( {narrow.format(day)} ) })}

{weeks.map((week, w) => (

{week.map((day, i) => { // --d is the cell's place in reading order: turning the month, the days sweep in by it. const d = w * 7 + i if (!day) return const when = today ? (day < today ? "past" : sameDay(day, today) ? "today" : "future") : undefined const inWait = waits(day) const off = disabled(day) return ( ) })}

))}

{ruler ? ( ) : null} {captionProp === null ? null :

{captionProp ?? told ?? "\u00a0"}

}

) } export { Calendar, type CalendarProps } 55:T60a3,@layer components { /* ── ot-month ── a month drawn as time. Two faces: dots (the "28 December" poster: a huge numeral over a grid of large discs) and ruler (the month as one measured line, after Paul Rand's dimension lines and SPECTRA). Before the page knows the date (data-when unset) every day is still to come. --big is the head numeral's size; a popover lowers it. */ @property --sweep { syntax: ""; inherits: false; initial-value: 0deg; } .ot-month { --big: max(var(--ot-fff), min(24vw, var(--ot-ff) * 1.5)); --flip: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ot-space-6); max-width: 32rem; } .ot-month:is([dir="rtl"], [dir="rtl"] *) { --flip: -1; } /* The head, as the poster sets it: the numeral alone on top; the month over the year at the start, the weekday at the far side on the year's line; the turn, small, under them. */ .ot-month-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date date" "title day" "nav nav"; align-items: last baseline; row-gap: var(--ot-space-6); } .ot-month-at { display: contents; } .ot-month-date { grid-area: date; justify-self: start; font-size: var(--big); font-weight: 700; line-height: 0.8; letter-spacing: var(--ot-fff-tr); color: var(--ot-ink); font-variant-numeric: tabular-nums; padding-inline-end: 0.04em; } /* the tight tracking lets the last figure's ink past its advance */ .ot-month-at[data-yours] .ot-month-date { font-family: var(--ot-expression); font-style: italic; font-weight: 400; font-size: calc(var(--big) * var(--ot-expression-scale)); letter-spacing: -0.02em; } .ot-month-dayname { grid-area: day; font-size: var(--ot-mp); line-height: 1.15; color: var(--ot-ink); } .ot-month-title { grid-area: title; display: grid; line-height: 1.15; font-size: var(--ot-mp); } .ot-month-name { color: var(--ot-ink); text-transform: uppercase; letter-spacing: 0.02em; } .ot-month-year { color: var(--ot-pencil); font-variant-numeric: tabular-nums; } /* The turn is quiet: two hairline chevrons in pencil, each a corner mark turned to point. */ .ot-month-nav { grid-area: nav; display: flex; gap: var(--ot-space-4); margin-inline-start: -0.55em; } .ot-month-nav > button { appearance: none; border: 0; background: none; padding: 0.55em; margin: 0; font-size: var(--ot-mp); color: var(--ot-pencil); cursor: pointer; transition: color var(--ot-allegro), translate var(--ot-allegro) var(--ot-exhale); } .ot-month-nav > button > span { display: block; width: 0.42em; aspect-ratio: 1; border-top: var(--ot-hairline) solid currentColor; border-left: var(--ot-hairline) solid currentColor; rotate: -45deg; translate: 0.1em 0; } .ot-month-nav > button:last-child > span { rotate: 135deg; translate: -0.1em 0; } .ot-month-nav > button:is([dir="rtl"], [dir="rtl"] *) { scale: -1 1; } /* a chevron has a direction */ .ot-month-nav > button:hover { color: var(--ot-ink); } .ot-month-nav > button:first-child:hover { translate: calc(-2px * var(--flip)) 0; } .ot-month-nav > button:last-child:hover { translate: calc(2px * var(--flip)) 0; } .ot-month-nav > button:disabled { color: var(--ot-rule-strong); cursor: default; translate: 0 0; } .ot-month-grid { container-type: inline-size; display: grid; gap: var(--ot-space-2); --size: var(--ot-pp); } @container (min-width: 26rem) { .ot-month-day { --size: var(--ot-p); } } .ot-month-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ot-space-1); } .ot-month-week > abbr { text-align: center; text-decoration: none; font-size: var(--ot-pp); line-height: 2; color: var(--ot-pencil); } /* A day is a disc, one per day of this month only: before the 1st there is paper. Gone: solid ink. Today: the one accent disc. To come: a hairline ring. The number is reversed out of whatever ink it sits on (paper on ink, paper on the accent), and set in pencil inside a ring, so the days to come stay back as the poster's pale rings do. --f is how full of ink the disc is, from the bottom. */ .ot-month-day { --fill: var(--ot-ink); --f: 0%; --ring: var(--ot-rule-strong); --tone: var(--ot-pencil); position: relative; aspect-ratio: 1; min-width: 0; display: grid; place-items: center; appearance: none; border: 0; margin: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--ot-ink); font: inherit; } .ot-month-day[data-when="past"] { --f: 100%; --ring: transparent; } .ot-month-day[data-when="today"] { --fill: var(--ot-accent); --f: 100%; --ring: transparent; } .ot-month-day[aria-disabled="true"] { cursor: default; } .ot-month-disc { position: relative; width: 78%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(var(--fill), var(--fill)) no-repeat 50% 100% / 100% var(--f); box-shadow: inset 0 0 0 var(--ot-hairline) var(--ring); } .ot-month[data-variant="dots"] .ot-month-n { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 0.06em; font-size: var(--size); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: transparent; background: linear-gradient(var(--ot-paper), var(--ot-paper)) no-repeat 50% 100% / 100% var(--f) var(--tone); -webkit-background-clip: text; background-clip: text; } .ot-month[data-variant="dots"] .ot-month-day[data-when="today"] .ot-month-n { font-weight: 800; } /* The wait, after the eclipse poster: the days between today and yours are half-moons set under one horizon, a hairline that runs on through the gaps from today to yours, with the number in the sky above it. The moon is smaller than its day, as the poster's disc is narrower than its horizon, so the wait stays lighter than the days gone. Choosing (or turning the month), they wax in turn toward yours. */ .ot-month-day[data-between] { --f: 50%; --ring: transparent; --tone: var(--ot-ink); } .ot-month[data-variant="dots"] .ot-month-day[data-between] .ot-month-disc { width: 52%; } .ot-month[data-variant="dots"] .ot-month-day[data-between]::after { content: ""; position: absolute; inset-inline: calc(var(--ot-space-1) / -2); top: 50%; height: var(--ot-hairline); background: var(--ot-rule-strong); } .ot-month[data-variant="dots"] .ot-month-day[data-between] .ot-month-n { inset: -50% -40% 50%; place-items: end center; padding: 0 0 0.3em; line-height: 0.72; background-size: 100% 0%; } .ot-month[data-variant="dots"] .ot-month-grid:is([data-acted], [data-turn]) .ot-month-day[data-between] .ot-month-disc { animation: ot-wax var(--ot-andante) var(--ot-exhale) backwards; animation-delay: calc(var(--k, 0) * var(--ot-arpeggio)); } @keyframes ot-wax { from { background-size: 100% 0%; } } /* Pointing sketches a pencil ring round the disc, drawn from the top like a pencil going round it; choosing inks the ring, circled like a date on a paper calendar, and it lands with one small rebound. Yours is set in the italic. The accent stays with today. */ .ot-month[data-variant="dots"] .ot-month-day::before { content: ""; position: absolute; inset: 1%; border-radius: 50%; box-shadow: inset 0 0 0 var(--ot-hairline) var(--ot-pencil); mask: conic-gradient(black var(--sweep), transparent 0); transition: --sweep var(--ot-moderato) var(--ot-breath), box-shadow var(--ot-allegro); } .ot-month[data-variant="dots"] .ot-month-day:not([aria-disabled="true"]):is(:hover, [data-force~="hover"] [tabindex="0"])::before { --sweep: 360deg; } .ot-month[data-variant="dots"] .ot-month-day[aria-selected="true"]::before { --sweep: 360deg; box-shadow: inset 0 0 0 var(--ot-stroke) var(--ot-ink); } .ot-month[data-variant="dots"] .ot-month-grid[data-acted] .ot-month-day[aria-selected="true"]::before { animation: ot-land var(--ot-moderato) var(--ot-spiccato); } @keyframes ot-land { from { scale: 0.84; } } .ot-month[data-variant="dots"] .ot-month-day[aria-selected="true"] { --tone: var(--ot-ink); } .ot-month[data-variant="dots"] .ot-month-day[aria-selected="true"] .ot-month-n { font-family: var(--ot-expression); font-style: italic; font-weight: 400; font-size: calc(var(--size) * 1.2 * var(--ot-expression-scale)); padding-top: 0; } /* A pinned focus (docs) sits on the day that holds the tab stop, not on the whole month. */ .ot-month[data-force~="focus"] { outline: 0; } .ot-month[data-force~="focus"] .ot-month-day[tabindex="0"] { outline: var(--ot-stroke) solid var(--ot-accent); outline-offset: 4px; } .ot-month[data-variant="parenthesis"][data-force~="focus"] .ot-month-day[tabindex="0"] { outline-offset: 0; } /* The tracked line at the foot, as the poster ends: something true about the days on show. */ .ot-month-foot { margin-top: var(--ot-space-2); font-size: var(--ot-pp); line-height: var(--ot-pp-lh); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ot-pencil); text-align: center; } /* Turning the month, the days sweep in, in reading order, from the side you turned to (backwards when you go back). Right to left, that side is mirrored. */ .ot-month-grid[data-turn] .ot-month-day { animation: ot-turn var(--ot-moderato) var(--ot-exhale) backwards; animation-delay: calc(var(--d, 0) * var(--ot-arpeggio) / 4); } .ot-month-grid[data-turn="prev"] .ot-month-day { --from: -1; animation-delay: calc((41 - var(--d, 0)) * var(--ot-arpeggio) / 4); } @keyframes ot-turn { from { opacity: 0; translate: calc(var(--from, 1) * var(--flip) * 12px) 0; } } /* ── ruler: the month as one measured line. A tick a day on a baseline that is ink as far as today; the weeks' first days stand taller and carry their number; today is the accent tick with a dot at its head; yours is a full ink tick with a ring at its head. The big numeral stands over its tick and glides along the line to the day you choose, and under the line the wait is measured as a dimension from today to your day, open where it runs off the month. */ .ot-month[data-variant="ruler"] { max-width: none; gap: var(--ot-space-5); } .ot-month[data-variant="ruler"] .ot-month-head { grid-template-areas: "title nav" "at at"; align-items: center; row-gap: var(--ot-space-6); } .ot-month[data-variant="ruler"] .ot-month-nav { margin-inline: 0 -0.55em; } .ot-month[data-variant="ruler"] .ot-month-at { --em: var(--big); --x: clamp(calc(var(--em) * 0.62), calc(var(--p) * 100%), calc(100% - var(--em) * 0.62)); grid-area: at; display: block; position: relative; height: calc(var(--big) * 0.8); margin-bottom: calc(var(--ot-space-2) * -1); } .ot-month[data-variant="ruler"] .ot-month-at[data-yours] { --em: calc(var(--big) * var(--ot-expression-scale)); } .ot-month[data-variant="ruler"] .ot-month-at[data-yours] .ot-month-dayname { bottom: calc(var(--big) * 0.02); } /* the italic sits lower in its line */ .ot-month[data-variant="ruler"] .ot-month-date { position: absolute; bottom: 0; inset-inline-start: var(--x); translate: calc(-50% * var(--flip)) 0; padding: 0; transition: inset-inline-start var(--ot-andante) var(--ot-exhale); } .ot-month[data-variant="ruler"] .ot-month-dayname { position: absolute; bottom: calc(var(--big) * -0.015); inset-inline-start: calc(var(--x) + var(--em) * 0.62 + var(--ot-space-3)); white-space: nowrap; transition: inset-inline-start var(--ot-andante) var(--ot-exhale); } .ot-month[data-variant="ruler"] .ot-month-at[data-side="start"] .ot-month-dayname { inset-inline-start: calc(var(--x) - var(--em) * 0.62 - var(--ot-space-3)); translate: calc(-100% * var(--flip)) 0; } .ot-month[data-variant="ruler"] .ot-month-grid { grid-template-columns: repeat(var(--days), minmax(0, 1fr)); gap: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .ot-month[data-variant="ruler"] .ot-month-week { display: contents; } .ot-month[data-variant="ruler"] .ot-month-week:first-child { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ot-month[data-variant="ruler"] .ot-month-gap { display: none; } .ot-month[data-variant="ruler"] .ot-month-day { --tick: 3.25rem; --tick-c: var(--ot-rule-strong); --line: var(--ot-rule-strong); aspect-ratio: auto; height: calc(var(--tick) + 2.2em); border-radius: 0; font-size: var(--ot-pp); background: linear-gradient(var(--line), var(--line)) no-repeat 0 var(--tick) / 100% var(--ot-hairline); } @container (min-width: 40rem) { .ot-month[data-variant="ruler"] .ot-month-day { --tick: 4.5rem; } } .ot-month[data-variant="ruler"] .ot-month-day[data-when="past"] { --tick-c: var(--ot-ink); --line: var(--ot-ink); } .ot-month[data-variant="ruler"] .ot-month-disc { position: absolute; top: auto; bottom: calc(100% - var(--tick)); inset-inline-start: 50%; width: var(--ot-hairline); height: calc(var(--tick) * 0.3); aspect-ratio: auto; translate: calc(-50% * var(--flip)) 0; border-radius: 0; background: var(--tick-c); box-shadow: none; transition: height var(--ot-moderato) var(--ot-exhale), background-color var(--ot-allegro); } .ot-month[data-variant="ruler"] .ot-month-day[data-label] .ot-month-disc { height: calc(var(--tick) * 0.55); } .ot-month[data-variant="ruler"] .ot-month-day:not([aria-disabled="true"]):is(:hover, [data-force~="hover"] [tabindex="0"], [data-scrub] [tabindex="0"]) { --tick-c: var(--ot-pencil); } .ot-month[data-variant="ruler"] .ot-month-day:is([data-when="today"], [aria-selected="true"]) .ot-month-disc, .ot-month[data-variant="ruler"] .ot-month-day:not([aria-disabled="true"]):is(:hover, [data-force~="hover"] [tabindex="0"], [data-scrub] [tabindex="0"]) .ot-month-disc { height: var(--tick); } .ot-month[data-variant="ruler"] .ot-month-day[data-when="today"] { --tick-c: var(--ot-accent); } .ot-month[data-variant="ruler"] .ot-month-day[aria-selected="true"] { --tick-c: var(--ot-ink); } .ot-month[data-variant="ruler"] .ot-month-day:is([data-when="today"], [aria-selected="true"]) .ot-month-disc { width: var(--ot-stroke); } /* The heads: today's dot, your ring. Choosing lands the ring with one small rebound. */ .ot-month[data-variant="ruler"] .ot-month-day::before { content: ""; position: absolute; top: 0; inset-inline-start: 50%; width: var(--ot-dot); aspect-ratio: 1; translate: calc(-50% * var(--flip)) -50%; border-radius: 50%; scale: 0; transition: scale var(--ot-moderato) var(--ot-spiccato); } .ot-month[data-variant="ruler"] .ot-month-day[data-when="today"]::before { background: var(--ot-accent); scale: 1; } .ot-month[data-variant="ruler"] .ot-month-day[aria-selected="true"]::before { width: calc(var(--ot-dot) * 1.7); box-shadow: inset 0 0 0 var(--ot-stroke) var(--ot-ink); scale: 1; } /* The figures under the line: the weeks' first days (and the 1st) always; every day once the line is long enough; the one you point at, in pencil. Today's in the accent, yours in italic. */ .ot-month[data-variant="ruler"] .ot-month-n { position: absolute; top: calc(100% + 0.55em); inset-inline-start: 50%; translate: calc(-50% * var(--flip)) 0; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ot-pencil); opacity: 0; transition: opacity var(--ot-allegro); } .ot-month[data-variant="ruler"] .ot-month-day[data-label] .ot-month-n { color: var(--ot-graphite); } .ot-month[data-variant="ruler"] .ot-month-day:is([data-label], [data-when="today"], [aria-selected="true"], :hover, [data-force~="hover"] [tabindex="0"], [data-scrub] [tabindex="0"]) .ot-month-n { opacity: 1; } @container (min-width: 40rem) { .ot-month[data-variant="ruler"] .ot-month-n { opacity: 1; } } .ot-month[data-variant="ruler"] .ot-month-day[data-when="today"] .ot-month-n { color: var(--ot-accent); font-weight: 700; } .ot-month[data-variant="ruler"] .ot-month-day[aria-selected="true"] .ot-month-n { color: var(--ot-ink); font-family: var(--ot-expression); font-style: italic; font-size: calc(1em * var(--ot-expression-scale)); } /* The dimension: a hairline with a tick at each end (none where it runs off the month) and the count of days under its middle. It stretches after the numeral. */ .ot-month-span { position: relative; height: 2.6em; margin-top: calc(var(--ot-space-3) * -1); font-size: var(--ot-pp); } .ot-month-span > span { position: absolute; top: 0; inset-inline-start: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); height: 0.8em; border-inline: var(--ot-hairline) solid var(--ot-graphite); background: linear-gradient(var(--ot-graphite), var(--ot-graphite)) no-repeat 0 50% / 100% var(--ot-hairline); transition: inset-inline-start var(--ot-andante) var(--ot-exhale), width var(--ot-andante) var(--ot-exhale); } .ot-month-span > span[data-open~="start"] { border-inline-start: 0; } .ot-month-span > span[data-open~="end"] { border-inline-end: 0; } .ot-month-span > span > span { position: absolute; top: 100%; inset-inline-start: 50%; translate: calc(-50% * var(--flip)) 0; padding-top: 0.35em; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ot-graphite); } .ot-month[data-variant="ruler"] .ot-month-foot { margin-top: 0; text-align: start; } /* ── ghost, after "the silence that heals": numbers as data, set against huge ghost numerals. The days are figures only, no discs; behind them the chosen day (else today) stands over its month's number, faint and cropped by the month's edge, and the grid is read through it. Gone is pencil, to come is ink, today the accent figure, yours the italic, and the ghost turns italic with it. Choosing (or turning the month), the new ghost surfaces. */ .ot-month[data-variant="ghost"] { position: relative; overflow: clip; isolation: isolate; container-type: inline-size; } .ot-month[data-variant="ghost"] .ot-month-head { grid-template-areas: "title nav"; align-items: center; } .ot-month[data-variant="ghost"] .ot-month-nav { margin-inline: 0 -0.55em; } .ot-month[data-variant="ghost"] .ot-month-at { --em: 58cqi; position: absolute; z-index: -1; inset-block-end: calc(var(--em) * -0.06); inset-inline-end: calc(var(--em) * -0.12); display: grid; justify-items: end; pointer-events: none; font-size: var(--em); font-weight: 200; line-height: 0.76; letter-spacing: -0.06em; color: color-mix(in srgb, var(--ot-rule) 55%, transparent); font-variant-numeric: tabular-nums; } .ot-month[data-variant="ghost"] .ot-month-at .ot-month-date { all: unset; } .ot-month[data-variant="ghost"] .ot-month-dayname { display: none; } .ot-month[data-variant="ghost"] .ot-month-at[data-yours] { font-family: var(--ot-expression); font-style: italic; font-weight: 400; font-size: calc(var(--em) * 0.8); line-height: 0.95; letter-spacing: -0.02em; } .ot-month[data-variant="ghost"] .ot-month-at[data-acted] > span { animation: ot-surface var(--ot-andante) var(--ot-exhale) backwards; } .ot-month[data-variant="ghost"] .ot-month-at[data-acted] > span + span { animation-delay: var(--ot-arpeggio); } @keyframes ot-surface { from { opacity: 0; translate: 0 0.04em; } } .ot-month[data-variant="ghost"] .ot-month-grid { gap: var(--ot-space-1); } .ot-month[data-variant="ghost"] .ot-month-day { --tone: var(--ot-ink); aspect-ratio: 1.25; border-radius: 50%; font-size: var(--size); } /* the round corner only shapes focus: a ring, not a box */ .ot-month[data-variant="ghost"] .ot-month-day[data-when="past"] { --tone: var(--ot-pencil); } .ot-month[data-variant="ghost"] .ot-month-disc { display: contents; } .ot-month[data-variant="ghost"] .ot-month-n { position: relative; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tone); } .ot-month[data-variant="ghost"] .ot-month-day[data-when="today"] .ot-month-n { color: var(--ot-accent); font-weight: 700; } .ot-month[data-variant="ghost"] .ot-month-day[aria-selected="true"] .ot-month-n { color: var(--ot-ink); font-family: var(--ot-expression); font-style: italic; font-size: calc(1.35em * var(--ot-expression-scale)); } .ot-month[data-variant="ghost"] .ot-month-day[data-when="today"][aria-selected="true"] .ot-month-n { color: var(--ot-accent); font-weight: 400; } /* Pointing sketches a pencil hairline under the figure, drawn out from its middle. */ .ot-month[data-variant="ghost"] .ot-month-n::after { content: ""; position: absolute; inset-inline: -0.1em; bottom: -0.3em; height: var(--ot-hairline); background: var(--ot-pencil); scale: 0 1; transition: scale var(--ot-moderato) var(--ot-exhale); } .ot-month[data-variant="ghost"] .ot-month-day:not([aria-disabled="true"]):is(:hover, [data-force~="hover"] [tabindex="0"]) .ot-month-n::after { scale: 1 1; } /* ── parenthesis, after "20(25)": the month set as one running line of figures that wraps like a sentence, a wider space closing each week. The time from today to your day is an aside: a parenthesis opens before the first of the two and closes after the other, hung in the space between figures so nothing reflows; the figures inside it are set heavier. An aside that began last month only closes here. Gone is pencil, to come is ink, today the accent, yours the italic. Pointing sketches pencil parentheses round a figure; choosing inks the aside and its parentheses land. The weekday heads stay for screen readers only. */ .ot-month[data-variant="parenthesis"] .ot-month-grid { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ot-space-2) 0; --size: var(--ot-mp); } .ot-month[data-variant="parenthesis"] .ot-month-week { display: contents; } .ot-month[data-variant="parenthesis"] .ot-month-week:first-child { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .ot-month[data-variant="parenthesis"] .ot-month-gap { display: none; } .ot-month[data-variant="parenthesis"] .ot-month-day { --tone: var(--ot-ink); aspect-ratio: auto; min-inline-size: 1.25em; padding: 0.1em 0.36em; border-radius: 50%; outline-offset: 0; font-size: var(--size); line-height: 1.2; } .ot-month[data-variant="parenthesis"] .ot-month-week > .ot-month-day:nth-child(7) { margin-inline-end: 0.6em; } .ot-month[data-variant="parenthesis"] .ot-month-day[data-when="past"] { --tone: var(--ot-pencil); } .ot-month[data-variant="parenthesis"] .ot-month-disc { display: contents; } .ot-month[data-variant="parenthesis"] .ot-month-n { font-variant-numeric: tabular-nums; color: var(--tone); } .ot-month[data-variant="parenthesis"] .ot-month-day:is([data-between], [data-paren]) .ot-month-n { font-weight: 650; } .ot-month[data-variant="parenthesis"] .ot-month-day[data-when="today"] .ot-month-n { color: var(--ot-accent); font-weight: 700; } .ot-month[data-variant="parenthesis"] .ot-month-day[aria-selected="true"] .ot-month-n { color: var(--ot-ink); font-family: var(--ot-expression); font-style: italic; font-weight: 400; font-size: calc(1.1em * var(--ot-expression-scale)); } .ot-month[data-variant="parenthesis"] .ot-month-day[data-when="today"][aria-selected="true"] .ot-month-n { color: var(--ot-accent); } .ot-month[data-variant="parenthesis"] .ot-month-day::before, .ot-month[data-variant="parenthesis"] .ot-month-day::after { position: absolute; top: 50%; font-family: var(--ot-voice); font-style: normal; font-weight: 200; font-size: 1.3em; line-height: 1; color: var(--ot-pencil); opacity: 0; translate: 0 -54%; transition: opacity var(--ot-allegro); } .ot-month[data-variant="parenthesis"] .ot-month-day::before { content: "("; inset-inline-end: calc(100% - 0.28em); } .ot-month[data-variant="parenthesis"] .ot-month-day::after { content: ")"; inset-inline-start: calc(100% - 0.28em); } .ot-month[data-variant="parenthesis"] .ot-month-day:not([aria-disabled="true"]):is(:hover, [data-force~="hover"] [tabindex="0"])::before, .ot-month[data-variant="parenthesis"] .ot-month-day:not([aria-disabled="true"]):is(:hover, [data-force~="hover"] [tabindex="0"])::after { opacity: 1; } .ot-month[data-variant="parenthesis"] .ot-month-day[data-paren~="open"]::before, .ot-month[data-variant="parenthesis"] .ot-month-day[data-paren~="close"]::after { color: var(--ot-ink); opacity: 1; transition: none; } .ot-month[data-variant="parenthesis"] .ot-month-grid[data-acted] .ot-month-day[data-paren~="open"]::before, .ot-month[data-variant="parenthesis"] .ot-month-grid[data-acted] .ot-month-day[data-paren~="close"]::after { animation: ot-hang var(--ot-moderato) var(--ot-spiccato); } @keyframes ot-hang { from { opacity: 0; scale: 0.6 1; } } @media (forced-colors: active) { .ot-month[data-variant="ghost"] .ot-month-at { display: none; } .ot-month { forced-color-adjust: none; --ot-paper: Canvas; --ot-ink: CanvasText; --ot-graphite: CanvasText; --ot-pencil: GrayText; --ot-rule-strong: GrayText; --ot-accent: Highlight; } } } 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/calendar.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/0nlytype/ui/calendar.tsx","content":"$54","type":"registry:ui"},{"path":"registry/0nlytype/styles/calendar.css","content":"$55","type":"registry:file","target":"styles/0nlytype/calendar.css"}],"className":"h-[70svh] min-h-80"}]]}]