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:T101e,"use client" import * as React from "react" import { useComposedRefs } from "@/lib/0nlytype/refs" import { useFormPresentation } from "@/lib/0nlytype/use-form-presentation" import { cn } from "@/lib/utils" import { Fraction } from "@/components/ui/fraction" const GroupSync = React.createContext<(() => void) | null>(null) type CheckboxProps = Omit, "type"> & { /** The words are the control. */ children: React.ReactNode /** * strike: checking strikes the words through, for things done. * stet: checking sets a row of dots under them, the proofreader's "let it stand", for things kept. * circled: checking rings them in one pen loop, as you circle a word on a page, for things chosen. */ variant?: "strike" | "stet" | "circled" /** Classes for the label, which is the root. className goes to the input. */ labelClassName?: string /** Pins a state for documentation ("hover", "focus"); set on the root. */ "data-force"?: string } /** No box. The words are the control; checking marks them, by default striking them through in the accent. */ function Checkbox({ children, variant = "strike", className, labelClassName, "data-force": force, ...props }: CheckboxProps) { const sync = React.useContext(GroupSync) React.useLayoutEffect(() => { sync?.() }) return ( {children} {variant === "circled" ? ( ) : null} ) } type CheckboxGroupProps = React.ComponentProps<"fieldset"> & { legend?: React.ReactNode /** Show how many are done, as a fraction under the list. */ tally?: boolean /** What the tally says: done(count, total). */ done?: (count: number, total: number) => React.ReactNode } const defaultDone = (count: number, total: number) => (count === total ? "done. Ready when you are." : "done") /** A list of checkboxes under a small legend, with an optional tally whose figures turn like a counter's wheels. */ function CheckboxGroup({ legend, tally = false, done = defaultDone, className, children, onChange, ref: forwardedRef, ...props }: CheckboxGroupProps) { const set = React.useRef(null) const composedRef = useComposedRefs(set, forwardedRef) // null until the first count, so the fraction arrives with its figures and doesn't turn over on load. const [state, setState] = React.useState<{ count: number; total: number } | null>(null) const count = React.useCallback(() => { const boxes = [...(set.current?.querySelectorAll("input[type=checkbox]") ?? [])] const next = { count: boxes.filter((b) => b.checked).length, total: boxes.length } setState((was) => was?.count === next.count && was.total === next.total ? was : next) }, []) useFormPresentation(set, count) return (

{ onChange?.(e) if (tally) count() }} {...props} > {legend ? {legend} : null} {children}

{tally ? (

{state ? ( <> {done(state.count, state.total)} ) : null}

) : null} ) } export { Checkbox, CheckboxGroup, type CheckboxProps, type CheckboxGroupProps } 55:T1935,@layer components { /* ── ot-check ── the words only; checking strikes them through */ .ot-check { position: relative; display: inline-block; cursor: pointer; color: var(--ot-graphite); -webkit-tap-highlight-color: transparent; } .ot-check > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .ot-check > span { --y: 60%; padding-inline: 0.18em; margin-inline: -0.18em; /* the pen runs past the words, as a hand does */ background: linear-gradient(var(--ot-accent), var(--ot-accent)) no-repeat 100% var(--y) / 0% var(--ot-stroke), linear-gradient(var(--ot-rule-strong), var(--ot-rule-strong)) no-repeat 100% var(--y) / 0% var(--ot-hairline); -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size var(--ot-moderato) var(--ot-breath), background-position 0s, color var(--ot-moderato) var(--ot-breath), font-weight var(--ot-moderato) var(--ot-breath); } .ot-check:is(:hover, [data-force~="hover"]) > span { color: var(--ot-ink); } /* Pointing sketches the strike in pencil; checking inks it. */ .ot-check:is(:hover, [data-force~="hover"]) > input:not(:checked, :disabled) + span { background-position: 100% var(--y), 0 var(--y); background-size: 0% var(--ot-stroke), 100% var(--ot-hairline); } .ot-check > input:checked + span { background-position: 0 var(--y), 100% var(--y); background-size: 100% var(--ot-stroke), 0% var(--ot-hairline); color: var(--ot-pencil); font-weight: 300; } .ot-check:is([dir="rtl"], [dir="rtl"] *) > span { background-position: 0 var(--y), 0 var(--y); } .ot-check:is([dir="rtl"], [dir="rtl"] *):is(:hover, [data-force~="hover"]) > input:not(:checked, :disabled) + span { background-position: 0 var(--y), 100% var(--y); } .ot-check:is([dir="rtl"], [dir="rtl"] *) > input:checked + span { background-position: 100% var(--y), 0 var(--y); } .ot-check > input:focus-visible + span, .ot-check[data-force~="focus"] > span { outline: var(--ot-stroke) solid var(--ot-accent); outline-offset: 4px; } .ot-check[data-force~="focus"] { outline: 0; } .ot-check:has(input:disabled) { cursor: not-allowed; } .ot-check > input:disabled + span { color: var(--ot-pencil); opacity: 0.55; } .ot-checklist { border: 0; margin: 0; padding: 0; display: grid; justify-items: start; gap: var(--ot-space-3); font-size: var(--ot-mp); line-height: var(--ot-mp-lh); } .ot-checklist > legend { padding: 0; margin-bottom: var(--ot-space-4); } /* The tally: how many are done, as a fraction whose count rolls the way it moves. */ .ot-tally { display: flex; align-items: baseline; gap: var(--ot-space-3); margin: var(--ot-space-5) 0 0; font-size: var(--ot-p); color: var(--ot-pencil); } .ot-tally > .ot-fraction > .ot-yours { display: inline-block; } /* ── stet and circled ── for things kept or chosen rather than done, where a strike would read as "no". Checked, the words are yours, so they turn italic; 1lh keeps the list's line so nothing below moves. */ .ot-check:is([data-variant="stet"], [data-variant="circled"]) > span { background: none; } .ot-check:is([data-variant="stet"], [data-variant="circled"]) > input:checked + span { font-family: var(--ot-expression); font-style: italic; font-weight: 400; font-size: calc(var(--ot-expression-scale) * 1em); line-height: 1lh; color: var(--ot-ink); } /* Stet: the proofreader's "let it stand", a row of dots under the words. Pointing pencils the dots in; checking sets them down in the accent, a touch lower, with spiccato. */ .ot-check[data-variant="stet"] > span { text-decoration: underline dotted transparent; text-decoration-thickness: max(2px, 0.09em); text-underline-offset: 0.2em; text-decoration-skip-ink: none; transition: text-decoration-color var(--ot-allegro) var(--ot-exhale), text-underline-offset var(--ot-moderato) var(--ot-spiccato), color var(--ot-moderato) var(--ot-breath); } .ot-check[data-variant="stet"]:is(:hover, [data-force~="hover"]) > input:not(:checked, :disabled) + span { text-decoration-color: var(--ot-rule-strong); } .ot-check[data-variant="stet"] > input:checked + span { text-decoration-color: var(--ot-accent); text-underline-offset: 0.3em; } /* Circled: one pen loop round the words, the accent rings of the collage. It comes in at the upper left and runs on past where it began, as a hand never quite closes a circle. Pointing draws it in pencil; checking inks it. A loop has no heading to leave by, so it fades, then resets unseen. */ .ot-check-loop { position: absolute; left: calc(-7% - 0.4em); top: -0.44em; width: calc(114% + 0.8em); height: calc(100% + 0.84em); max-width: none; /* an ellipse must stand wider than the words to clear their corners */ overflow: visible; pointer-events: none; fill: none; stroke: var(--ot-rule-strong); stroke-width: var(--ot-hairline); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: opacity var(--ot-allegro) var(--ot-breath), stroke-dashoffset 0s var(--ot-allegro), stroke var(--ot-allegro), stroke-width var(--ot-allegro); } .ot-check-loop > path { vector-effect: non-scaling-stroke; } .ot-check:is([dir="rtl"], [dir="rtl"] *) > .ot-check-loop { scale: -1 1; } .ot-check:is(:hover, [data-force~="hover"]) > input:not(:checked, :disabled) ~ .ot-check-loop, .ot-check > input:checked ~ .ot-check-loop { opacity: 1; stroke-dashoffset: 0; transition: opacity 0s, stroke-dashoffset var(--ot-andante) var(--ot-exhale), stroke var(--ot-allegro), stroke-width var(--ot-allegro); } .ot-check > input:checked ~ .ot-check-loop { stroke: var(--ot-accent); stroke-width: var(--ot-stroke); } .ot-check > input:disabled ~ .ot-check-loop { opacity: 0.35; } /* Forced colours drop background images, which draw the strike, and force the stet dots' transparent colour to text: restate both as plain text decoration, so checked and unchecked still differ. */ @media (forced-colors: active) { .ot-check:not([data-variant="stet"], [data-variant="circled"]) > input:checked + span { text-decoration: line-through; } .ot-check[data-variant="stet"] > span { text-decoration-line: none; } .ot-check[data-variant="stet"] > input:checked + span { text-decoration-line: underline; } .ot-check-loop { stroke: CanvasText; } .ot-check > input:checked ~ .ot-check-loop { stroke: 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","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/checkbox.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/0nlytype/ui/checkbox.tsx","content":"$54","type":"registry:ui"},{"path":"registry/0nlytype/styles/checkbox.css","content":"$55","type":"registry:file","target":"styles/0nlytype/checkbox.css"}],"className":"h-[70svh] min-h-80"}]]}]