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:T15f4,"use client" import * as React from "react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" type ToastOptions = { /** An action keeps its name: "Undo", then the toast says what happened. */ action?: { label: string; onClick: () => void } /** How long it stays, in milliseconds. Pointing at it holds the pause. */ duration?: number } type ToastVariant = "fermata" | "footnote" | "dateline" type ToastItem = { id: string message: React.ReactNode action?: ToastOptions["action"] duration: number leaving: boolean /** The footnote's number: counts up while notes stand, and starts again at 1 on an empty page. */ n: number at: number } // A tiny module-level store: toast() can be called from anywhere, renders it. let items: ToastItem[] = [] let count = 0 // Every mounted Toaster, in mount order. Only the latest one shows and announces the toasts, so a page that // mounts its own Toaster inside an app that already has one doesn't say everything twice. let toasters: string[] = [] const listeners = new Set<() => void>() const none: ToastItem[] = [] function set(next: ToastItem[]) { items = next listeners.forEach((l) => l()) } /** Say one thing, once. Returns the id, for dismiss(). At most three stay on screen. */ function toast(message: React.ReactNode, opts: ToastOptions = {}): string { const id = `toast-${++count}` const n = (items.at(-1)?.n ?? 0) + 1 set([...items, { id, message, action: opts.action, duration: opts.duration ?? 5000, leaving: false, n, at: Date.now() }].slice(-3)) return id } /** Send one toast away (or all of them). It sinks, then it is removed. */ function dismiss(id?: string) { set(items.map((t) => (id === undefined || t.id === id ? { ...t, leaving: true } : t))) } const remove = (id: string) => set(items.filter((t) => t.id !== id)) const subscribe = (l: () => void) => (listeners.add(l), () => void listeners.delete(l)) const speaker = () => toasters.at(-1) const clock = (at: number) => new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit" }).format(at) type ToastProps = Omit, "id"> & Partial> & { message: React.ReactNode; variant?: ToastVariant } /** One toast. renders these from the store; render one yourself only to show it still (documentation). */ function Toast({ id = "", message, action, duration = 5000, leaving = false, n = 1, at, variant = "fermata", className, style, ...props }: ToastProps) { return (

{ if (leaving && e.target === e.currentTarget) remove(id) }} {...props} > {variant === "footnote" ? : null}

{message}

{/* The timer is a fermata held over the sentence's last note: its arc empties, and when it's gone so is the toast. The footnote and the dateline keep it, unseen, as their clock. */} {variant === "dateline" ? ( <>

) } type ToasterProps = React.ComponentProps<"section"> & { /** * fermata: each toast is framed, with a fermata over its last word whose arc empties while it stays. * footnote: notes at the foot of the page under a short rule, numbered as they come. * dateline: the sentence and the time it happened on one hairline, which runs out toward the time. */ variant?: ToastVariant } /** Render once, near the root. Toasts rise from the bottom-left and are announced politely. If more than one is mounted, the latest speaks and the rest stay quiet. */ function Toaster({ className, variant = "fermata", ...props }: ToasterProps) { const me = React.useId() React.useEffect(() => { toasters = [...toasters, me] listeners.forEach((l) => l()) return () => { toasters = toasters.filter((t) => t !== me) listeners.forEach((l) => l()) } }, [me]) const all = React.useSyncExternalStore(subscribe, () => items, () => none) const list = React.useSyncExternalStore(subscribe, speaker, () => undefined) === me ? all : none return (

{list.map((item) => ( ))}

) } export { toast, dismiss, Toast, Toaster, type ToastOptions, type ToastVariant } 55:T1677,@layer components { /* ── ot-toast ── one line rises; a fermata held over its last word empties while it stays */ .ot-toaster { position: fixed; z-index: 50; inset-inline-start: var(--ot-margin); inset-block-end: var(--ot-space-6); display: grid; justify-items: start; gap: var(--ot-space-2); pointer-events: none; } .ot-toast { position: relative; pointer-events: auto; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--ot-space-5); row-gap: var(--ot-space-2); max-inline-size: min(34rem, calc(100vw - 2 * var(--ot-margin))); padding: var(--ot-space-4) var(--ot-space-5) calc(var(--ot-space-4) + 2px); background: var(--ot-paper); box-shadow: inset 0 0 0 var(--ot-hairline) var(--ot-rule); color: var(--ot-ink); animation: ot-toast-rise var(--ot-andante) var(--ot-exhale); } /* The timer is a fermata over the sentence's last note: its arc empties while the toast stays. Point at the toast and the pause is held, which is what a fermata means. It hangs up against the full stop, the way the sign is written over the note it holds. */ .ot-toast-timer { flex: none; align-self: flex-start; width: 22px; height: 14px; margin-inline-start: calc(var(--ot-space-1) - var(--ot-space-5)); margin-block-start: -0.1em; overflow: visible; } .ot-toast-timer path { fill: none; stroke: var(--ot-ink); stroke-width: 1.5; stroke-linecap: round; animation: ot-toast-deplete var(--life, 5s) linear forwards; } .ot-toast-timer circle { fill: var(--ot-accent); } .ot-toast:is(:hover, :focus-within, [data-force~="hover"]) :is(.ot-toast-timer path, .ot-toast-rule) { animation-play-state: paused; } .ot-toast > p { animation: ot-toast-write var(--ot-andante) var(--ot-exhale) 140ms backwards; } .ot-toast[data-leaving] { overflow: clip; animation: ot-toast-sink var(--ot-andante) var(--ot-breath) forwards; } @keyframes ot-toast-rise { from { opacity: 0; translate: 0 12px; } } @keyframes ot-toast-write { from { clip-path: inset(0 100% 0 0); } } :is([dir="rtl"], [dir="rtl"] *).ot-toast > p { animation-name: ot-toast-write-rtl; } @keyframes ot-toast-write-rtl { from { clip-path: inset(0 0 0 100%); } } @keyframes ot-toast-sink { 45% { opacity: 0; translate: 0 8px; } 100% { opacity: 0; translate: 0 8px; block-size: 0; padding-block: 0; margin-block-start: calc(-1 * var(--gap, var(--ot-space-2))); } } @keyframes ot-toast-deplete { to { stroke-dashoffset: -1; } } /* The footnote and the dateline keep the fermata as their clock, unseen. */ .ot-toaster[data-variant] .ot-toast-timer { position: absolute; inset: 0 auto auto 0; width: 1px; height: 1px; margin: 0; opacity: 0; } /* Footnote: the book's note at the foot of the page. One frame holds the foot: a short rule, then the notes, numbered as they come; each number hangs in the margin so the sentences keep one edge under the rule. The newest number takes the accent. */ .ot-toaster[data-variant="footnote"] { --gap: 0px; gap: 0; } .ot-toaster[data-variant="footnote"]:has(> .ot-toast) { padding: var(--ot-space-4) var(--ot-space-5) var(--ot-space-4) var(--ot-space-6); background: var(--ot-paper); box-shadow: inset 0 0 0 var(--ot-hairline) var(--ot-rule); max-inline-size: min(34rem, calc(100vw - 2 * var(--ot-margin))); } .ot-toaster[data-variant="footnote"]:has(> .ot-toast)::before { content: ""; inline-size: var(--ot-space-8); block-size: var(--ot-hairline); margin-block-end: var(--ot-space-3); background: var(--ot-ink); transform-origin: 0 50%; animation: ot-draw-x var(--ot-andante) var(--ot-exhale) backwards; } :is([dir="rtl"], [dir="rtl"] *).ot-toaster[data-variant="footnote"]::before { transform-origin: 100% 50%; } .ot-toaster[data-variant="footnote"] .ot-toast { column-gap: var(--ot-space-4); padding: var(--ot-space-1) 0; box-shadow: none; background: none; color: var(--ot-graphite); } .ot-toast-n { position: absolute; inset-inline-end: calc(100% + 0.35em); inset-block-start: calc(var(--ot-space-1) + 0.1em); font-size: var(--ot-pp); line-height: 1; font-feature-settings: "lnum", "tnum"; color: var(--ot-pencil); animation: ot-land var(--ot-moderato) var(--ot-spiccato) 160ms backwards; } .ot-toast:last-child .ot-toast-n { color: var(--ot-accent); } /* Dateline: the frame row of a poster. The sentence, a hairline, the time it happened; the hairline runs out toward the time while the toast stays, and holds while you point at it. */ .ot-toaster[data-variant="dateline"] { grid-template-columns: minmax(0, 1fr); } .ot-toaster[data-variant="dateline"] .ot-toast { column-gap: var(--ot-space-4); inline-size: min(30rem, calc(100vw - 2 * var(--ot-margin))); max-inline-size: 100%; } .ot-toaster[data-variant="dateline"] .ot-toast > p { flex: none; max-inline-size: 70%; } .ot-toast-rule { flex: 1; min-inline-size: var(--ot-space-5); block-size: var(--ot-hairline); align-self: center; background: var(--ot-rule-strong); transform-origin: 100% 50%; animation: ot-toast-run var(--life, 5s) linear forwards; } :is([dir="rtl"], [dir="rtl"] *) .ot-toast-rule { transform-origin: 0 50%; } .ot-toast-time { flex: none; font-size: var(--ot-pp); font-variant-numeric: tabular-nums lining-nums; color: var(--ot-graphite); } @keyframes ot-toast-run { to { scale: 0 1; } } @media (forced-colors: active) { .ot-toast { border: var(--ot-hairline) solid CanvasText; } .ot-toaster[data-variant="footnote"] .ot-toast { border: 0; } .ot-toaster[data-variant="footnote"]:has(> .ot-toast) { border: var(--ot-hairline) solid CanvasText; } .ot-toast-rule { forced-color-adjust: none; background: CanvasText; } .ot-toaster[data-variant="footnote"]::before { forced-color-adjust: none; background: 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","https://thedirectors.agency/ui/r/button.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/toast.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/0nlytype/ui/toast.tsx","content":"$54","type":"registry:ui"},{"path":"registry/0nlytype/styles/toast.css","content":"$55","type":"registry:file","target":"styles/0nlytype/toast.css"}],"className":"h-[70svh] min-h-80"}]]}]