4e: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"] 4f:T490,"use client" import { useEffect, useLayoutEffect } from "react" import { applyMenus, setEnabled, setPace, setResponses, start, type Menus, type Responses } from "@/lib/keyframery/engine" import "./keyframery.css" export type CutsProps = Menus & { /** Duration multiplier for the whole app. Beats --kf-pace in your CSS. */ pace?: number /** false = stock shadcn motion everywhere. */ enabled?: boolean /** "none" keeps the cuts but turns off how controls answer a press, a tick or a drag. */ responses?: Responses } const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect /** Film cuts for shadcn. Render once, in your root layout. */ export function Cuts({ dialog, sheet, drawer, tabs, toast, pace, enabled = true, responses }: CutsProps) { useIsoLayoutEffect(() => { applyMenus({ dialog, sheet, drawer, tabs, toast }) }, [dialog, sheet, drawer, tabs, toast]) useIsoLayoutEffect(() => { setEnabled(enabled) }, [enabled]) useIsoLayoutEffect(() => { setPace(pace) }, [pace]) useIsoLayoutEffect(() => { setResponses(responses) }, [responses]) useEffect(() => start(), []) return null } 50:T7720,/* * Keyframery v0: film cuts for shadcn. https://keyframery.com * * - Unlayered on purpose: it beats Tailwind's @layer utilities, where shadcn's animate-in classes live. * - Everything is scoped under html[data-kf], which sets while enabled. * - The menu choice lives on (data-kf-dialog="punch-in"); an element's own data-cut beats it. * The two selector forms exclude each other, so specificity never decides. * - "Open" matches Radix (data-state) and Base UI (data-open); "closed" likewise. * - Entrances fill backwards only: once in, the part is back to its own styles (a held transform or * filter, even at zero, would make it a containing block for its fixed-position children). * Exits fill both, so the part stays invisible until the library removes it. */ :where(:root) { --kf-pace: 1; --kf-ease: cubic-bezier(0.22, 1, 0.36, 1); --kf-ease-exit: cubic-bezier(0.5, 0, 0.75, 0); --kf-travel: 0.35; --kf-blur: 8px; --kf-depth: 0.94; --kf-hold: 300ms; --kf-cap: 1000s; } /* ---------- Dialog, alert dialog, command: rack focus ---------- */ :is( :where(html[data-kf][data-kf-dialog="rack-focus"]) :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]):not([data-cut], [data-cut="none"] *), :where(html[data-kf]) :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"])[data-cut="rack-focus"] ):is([data-state="open"], [data-open]:not([data-open="false"])) { animation: kf-rack-in min(calc(340ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease) backwards; } :is( :where(html[data-kf][data-kf-dialog="rack-focus"]) :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]):not([data-cut], [data-cut="none"] *), :where(html[data-kf]) :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"])[data-cut="rack-focus"] ):is([data-state="closed"], [data-closed]:not([data-closed="false"])) { animation: kf-rack-out min(calc(220ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease-exit) both; } :is( :where(html[data-kf][data-kf-dialog="rack-focus"]) :is([data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"]):not([data-cut], [data-cut="none"] *), :where(html[data-kf]) :is([data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"])[data-cut="rack-focus"] ):is([data-state="open"], [data-open]:not([data-open="false"])) { animation: kf-veil-in min(calc(340ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease) backwards; } :is( :where(html[data-kf][data-kf-dialog="rack-focus"]) :is([data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"]):not([data-cut], [data-cut="none"] *), :where(html[data-kf]) :is([data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"])[data-cut="rack-focus"] ):is([data-state="closed"], [data-closed]:not([data-closed="false"])) { animation: kf-veil-out min(calc(220ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease-exit) both; } @keyframes kf-rack-in { from { opacity: 0; transform: translate(calc(var(--kf-dx, 0px) * var(--kf-travel)), calc(var(--kf-dy, 0px) * var(--kf-travel))) scale(var(--kf-depth)); filter: blur(var(--kf-blur)); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes kf-rack-out { from { opacity: 1; transform: none; filter: blur(0); } to { opacity: 0; transform: translate(calc(var(--kf-dx, 0px) * var(--kf-travel)), calc(var(--kf-dy, 0px) * var(--kf-travel))) scale(var(--kf-depth)); filter: blur(calc(var(--kf-blur) * 0.75)); } } @keyframes kf-veil-in { from { opacity: 0; } to { opacity: 1; } } @keyframes kf-veil-out { from { opacity: 1; } to { opacity: 0; } } /* ---------- Sheet: travels in from its own edge ---------- */ /* Base UI sheets use CSS transitions, which would beat our keyframes; turn them off wherever we animate. */ :is( :where(html[data-kf]:not([data-kf-sheet="none"])) :is([data-slot="sheet-content"], [data-slot="sheet-overlay"]):not([data-cut], [data-cut="none"] *), :where(html[data-kf]) :is([data-slot="sheet-content"], [data-slot="sheet-overlay"])[data-cut]:not([data-cut="none"]) ) { transition: none; } :where(html[data-kf]) [data-slot="sheet-content"] { --kf-sx: 100%; --kf-sy: 0px; } :where(html[data-kf]) [data-slot="sheet-content"][data-side="left"] { --kf-sx: -100%; } :where(html[data-kf]) [data-slot="sheet-content"][data-side="top"] { --kf-sx: 0px; --kf-sy: -100%; } :where(html[data-kf]) [data-slot="sheet-content"][data-side="bottom"] { --kf-sx: 0px; --kf-sy: 100%; } :is( :where(html[data-kf]:is([data-kf-sheet="slide-sink"], [data-kf-sheet="slide"])) [data-slot="sheet-content"]:not([data-cut], [data-cut="none"] *), :where(html[data-kf]) [data-slot="sheet-content"]:is([data-cut="slide-sink"], [data-cut="slide"]) ):is([data-state="open"], [data-open]:not([data-open="false"])) { animation: kf-panel-in min(calc(460ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease) backwards; } :is( :where(html[data-kf]:is([data-kf-sheet="slide-sink"], [data-kf-sheet="slide"])) [data-slot="sheet-content"]:not([data-cut], [data-cut="none"] *), :where(html[data-kf]) [data-slot="sheet-content"]:is([data-cut="slide-sink"], [data-cut="slide"]) ):is([data-state="closed"], [data-closed]:not([data-closed="false"])) { animation: kf-panel-out min(calc(260ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease-exit) both; } :is( :where(html[data-kf]:is([data-kf-sheet="slide-sink"], [data-kf-sheet="slide"])) [data-slot="sheet-overlay"]:not([data-cut], [data-cut="none"] *), :where(html[data-kf]) [data-slot="sheet-overlay"]:is([data-cut="slide-sink"], [data-cut="slide"]) ):is([data-state="open"], [data-open]:not([data-open="false"])) { animation: kf-veil-in min(calc(460ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease) backwards; } :is( :where(html[data-kf]:is([data-kf-sheet="slide-sink"], [data-kf-sheet="slide"])) [data-slot="sheet-overlay"]:not([data-cut], [data-cut="none"] *), :where(html[data-kf]) [data-slot="sheet-overlay"]:is([data-cut="slide-sink"], [data-cut="slide"]) ):is([data-state="closed"], [data-closed]:not([data-closed="false"])) { animation: kf-veil-out min(calc(260ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease-exit) both; } /* translate: none cancels Base UI's starting/ending-style translate so the two don't stack */ @keyframes kf-panel-in { from { transform: translate(var(--kf-sx), var(--kf-sy)); translate: none; opacity: 1; } to { transform: none; translate: none; opacity: 1; } } @keyframes kf-panel-out { from { transform: none; translate: none; opacity: 1; } to { transform: translate(var(--kf-sx), var(--kf-sy)); translate: none; opacity: 1; } } /* ---------- Sink: the page steps back while a sheet or drawer is up ---------- */ :where(html[data-kf]) [data-kf-sink] { transform-origin: 50% 0; transition: scale min(calc(460ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease), filter min(calc(460ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease), border-radius min(calc(460ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease); } :where(html[data-kf]) [data-kf-sink="off"] { transition-timing-function: var(--kf-ease-exit); } :where(html[data-kf]) [data-kf-sink="on"] { scale: 0.975; filter: brightness(0.94); border-radius: 14px; overflow: hidden; } :where(html[data-kf][data-kf-sinking]) body { background-color: color-mix(in oklab, var(--background) 80%, black); } /* ---------- Dialog menu: punch-in and fade ---------- */ :is( :where(html[data-kf][data-kf-dialog="punch-in"]) :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]):not([data-cut], [data-cut="none"] *), :where(html[data-kf]) :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"])[data-cut="punch-in"] ):is([data-state="open"], [data-open]:not([data-open="false"])) { animation: kf-punch-in min(calc(260ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease) backwards; } :is( :where(html[data-kf][data-kf-dialog="punch-in"]) :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]):not([data-cut], [data-cut="none"] *), :where(html[data-kf]) :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"])[data-cut="punch-in"] ):is([data-state="closed"], [data-closed]:not([data-closed="false"])) { animation: kf-punch-out min(calc(160ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease-exit) both; } :is( :where(html[data-kf][data-kf-dialog="fade"]) :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]):not([data-cut], [data-cut="none"] *), :where(html[data-kf]) :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"])[data-cut="fade"] ):is([data-state="open"], [data-open]:not([data-open="false"])) { animation: kf-fade-in min(calc(200ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease) backwards; } :is( :where(html[data-kf][data-kf-dialog="fade"]) :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"]):not([data-cut], [data-cut="none"] *), :where(html[data-kf]) :is([data-slot="dialog-content"], [data-slot="alert-dialog-content"])[data-cut="fade"] ):is([data-state="closed"], [data-closed]:not([data-closed="false"])) { animation: kf-fade-out min(calc(150ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease-exit) both; } :is( :where(html[data-kf][data-kf-dialog="punch-in"]) :is([data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"]):not([data-cut], [data-cut="none"] *), :where(html[data-kf]) :is([data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"])[data-cut="punch-in"] ):is([data-state="open"], [data-open]:not([data-open="false"])) { animation: kf-veil-in min(calc(260ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease) backwards; } :is( :where(html[data-kf][data-kf-dialog="punch-in"]) :is([data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"]):not([data-cut], [data-cut="none"] *), :where(html[data-kf]) :is([data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"])[data-cut="punch-in"] ):is([data-state="closed"], [data-closed]:not([data-closed="false"])) { animation: kf-veil-out min(calc(160ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease-exit) both; } :is( :where(html[data-kf][data-kf-dialog="fade"]) :is([data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"]):not([data-cut], [data-cut="none"] *), :where(html[data-kf]) :is([data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"])[data-cut="fade"] ):is([data-state="open"], [data-open]:not([data-open="false"])) { animation: kf-veil-in min(calc(200ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease) backwards; } :is( :where(html[data-kf][data-kf-dialog="fade"]) :is([data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"]):not([data-cut], [data-cut="none"] *), :where(html[data-kf]) :is([data-slot="dialog-overlay"], [data-slot="alert-dialog-overlay"])[data-cut="fade"] ):is([data-state="closed"], [data-closed]:not([data-closed="false"])) { animation: kf-veil-out min(calc(150ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease-exit) both; } @keyframes kf-punch-in { 0% { opacity: 0; transform: scale(0.85); } 70% { opacity: 1; transform: scale(1.02); } 100% { opacity: 1; transform: none; } } @keyframes kf-punch-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.96); } } @keyframes kf-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes kf-fade-out { from { opacity: 1; } to { opacity: 0; } } /* ---------- Sheet menu: fade ---------- */ :is( :where(html[data-kf][data-kf-sheet="fade"]) [data-slot="sheet-content"]:not([data-cut], [data-cut="none"] *), :where(html[data-kf]) [data-slot="sheet-content"][data-cut="fade"] ):is([data-state="open"], [data-open]:not([data-open="false"])) { animation: kf-panel-fade-in min(calc(200ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease) backwards; } :is( :where(html[data-kf][data-kf-sheet="fade"]) [data-slot="sheet-content"]:not([data-cut], [data-cut="none"] *), :where(html[data-kf]) [data-slot="sheet-content"][data-cut="fade"] ):is([data-state="closed"], [data-closed]:not([data-closed="false"])) { animation: kf-panel-fade-out min(calc(150ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease-exit) both; } :is( :where(html[data-kf][data-kf-sheet="fade"]) [data-slot="sheet-overlay"]:not([data-cut], [data-cut="none"] *), :where(html[data-kf]) [data-slot="sheet-overlay"][data-cut="fade"] ):is([data-state="open"], [data-open]:not([data-open="false"])) { animation: kf-veil-in min(calc(200ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease) backwards; } :is( :where(html[data-kf][data-kf-sheet="fade"]) [data-slot="sheet-overlay"]:not([data-cut], [data-cut="none"] *), :where(html[data-kf]) [data-slot="sheet-overlay"][data-cut="fade"] ):is([data-state="closed"], [data-closed]:not([data-closed="false"])) { animation: kf-veil-out min(calc(150ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease-exit) both; } @keyframes kf-panel-fade-in { from { opacity: 0; transform: none; translate: none; } to { opacity: 1; transform: none; translate: none; } } @keyframes kf-panel-fade-out { from { opacity: 1; transform: none; translate: none; } to { opacity: 0; transform: none; translate: none; } } /* ---------- Tuned: the libraries' own keyframes, retimed to the film's pace ---------- */ :where(html[data-kf]) :is( [data-slot="popover-content"], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"], [data-slot="context-menu-content"], [data-slot="context-menu-sub-content"], [data-slot="menubar-content"], [data-slot="menubar-sub-content"], [data-slot="select-content"], [data-slot="combobox-content"], [data-slot="hover-card-content"], [data-slot="tooltip-content"], [data-slot="navigation-menu-content"], [data-slot="navigation-menu-viewport"], [data-slot="accordion-content"] ):not([data-cut="none"], [data-cut="none"] *):is( [data-state="open"], [data-state="delayed-open"], [data-state="instant-open"], [data-open]:not([data-open="false"]), [data-state="closed"], [data-closed]:not([data-closed="false"]) ) { animation-duration: min(calc(180ms * var(--kf-pace)), var(--kf-cap)); animation-timing-function: var(--kf-ease); transition-duration: min(calc(180ms * var(--kf-pace)), var(--kf-cap)); transition-timing-function: var(--kf-ease); } :where(html[data-kf]) :is( [data-slot="popover-content"], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"], [data-slot="context-menu-content"], [data-slot="context-menu-sub-content"], [data-slot="menubar-content"], [data-slot="menubar-sub-content"], [data-slot="select-content"], [data-slot="combobox-content"], [data-slot="hover-card-content"], [data-slot="tooltip-content"], [data-slot="navigation-menu-content"], [data-slot="navigation-menu-viewport"], [data-slot="accordion-content"] ):not([data-cut="none"], [data-cut="none"] *):is([data-state="closed"], [data-closed]:not([data-closed="false"])) { animation-timing-function: var(--kf-ease-exit); transition-timing-function: var(--kf-ease-exit); } /* Collapsible ships with no motion at all, which is a jump cut. It gets the accordion's height cut. */ :where(html[data-kf]) [data-slot="collapsible-content"]:not([data-cut="none"], [data-cut="none"] *, [data-kf-static]):is( [data-state="open"], [data-open]:not([data-open="false"]) ) { animation: kf-grow min(calc(180ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease); } :where(html[data-kf]) [data-slot="collapsible-content"]:not([data-cut="none"], [data-cut="none"] *):is( [data-state="closed"], [data-closed]:not([data-closed="false"]) ) { animation: kf-shrink min(calc(180ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease-exit) forwards; } @keyframes kf-grow { from { height: 0; overflow: clip; } to { height: var(--radix-collapsible-content-height, var(--collapsible-panel-height, auto)); overflow: clip; } } @keyframes kf-shrink { from { height: var(--radix-collapsible-content-height, var(--collapsible-panel-height, auto)); overflow: clip; } to { height: 0; overflow: clip; } } /* ---------- Responses: how a control answers the user's own press, tick or drag ---------- */ /* * Cuts animate a change of picture; responses confirm an input on the control itself. Timings follow * IBM Carbon's micro-interaction durations: 70 ms to press in, 110-150 ms for small state changes, * 240 ms for a value bar. turns them all off; data-cut="none" opts a part out. * Where stock shadcn already responds (the button's 1px press nudge, the slider thumb's ring, the switch * thumb's slide, the progress bar's width), these retime or complete it and never stack a second effect. */ /* Toggle: the tick draws itself and the radio dot grows from its centre. The engine marks a control (data-kf-toggled) only when its state flips, so controls that load already checked don't redraw. */ :where(html[data-kf]:not([data-kf-responses="none"])) :is( [data-slot="checkbox"], [data-slot="questionnaire-choice"], [data-slot="command-item"], [data-slot="combobox-item"], [data-slot="dropdown-menu-checkbox-item"], [data-slot="dropdown-menu-radio-item"], [data-slot="context-menu-checkbox-item"], [data-slot="context-menu-radio-item"], [data-slot="menubar-checkbox-item"], [data-slot="menubar-radio-item"] )[data-kf-toggled="on"]:not([data-cut="none"], [data-cut="none"] *) svg :is(path, polyline, line) { stroke-dasharray: 30; animation: kf-draw min(calc(150ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease) backwards; } :where(html[data-kf]:not([data-kf-responses="none"])) :is( [data-slot="radio-group-item"][data-kf-toggled="on"] [data-slot="radio-group-indicator"] > *, [data-slot="questionnaire-choice"][data-kf-toggled="on"] [data-slot="questionnaire-choice-indicator-dot"] ):not([data-cut="none"], [data-cut="none"] *) { animation: kf-dot-in min(calc(150ms * var(--kf-pace)), var(--kf-cap)) var(--kf-ease) backwards; } /* A choice card (a field label holding a checkbox or radio) changes colour instead of jumping. */ :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="field-label"]:not([data-cut="none"], [data-cut="none"] *) { transition-property: color, background-color, border-color, box-shadow; transition-duration: min(calc(150ms * var(--kf-pace)), var(--kf-cap)); transition-timing-function: var(--kf-ease); } @keyframes kf-draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } } @keyframes kf-dot-in { from { transform: scale(0); /* composes after the dot's own centring translate */ } } @media (prefers-reduced-motion: no-preference) { /* Press: compact controls dip while held, quicker in than out. Full-width rows (sidebar items, menu items) don't scale; they get Highlight instead. */ :where(html[data-kf]:not([data-kf-responses="none"])) :is( [data-slot="button"], [data-slot="toggle"], [data-slot="toggle-group-item"], [data-slot="pagination-link"], [data-slot="carousel-previous"], [data-slot="carousel-next"], [data-slot="dialog-close"], [data-slot="sheet-close"], [data-slot="alert-dialog-action"], [data-slot="alert-dialog-cancel"], [data-slot="attachment-action"], [data-slot="combobox-chip-remove"], [data-slot="sidebar-trigger"], [data-slot="message-scroller-button"], [data-slot="calendar"] :is(.rdp-button_previous, .rdp-button_next) ):not([data-cut="none"], [data-cut="none"] *):active { scale: 0.97; transition-duration: calc(70ms * var(--kf-pace)); } /* State icons. The accordion's chevron turns instead of being swapped for an up chevron. An item that loads open shows the turned chevron at once: an icon coming out of display:none has nothing to turn from. */ :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="accordion-trigger"]:not([data-cut="none"], [data-cut="none"] *) > [data-slot="accordion-trigger-icon"]:has(+ [data-slot="accordion-trigger-icon"]) { display: block; transition: rotate calc(200ms * var(--kf-pace)) var(--kf-ease); } :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="accordion-trigger"][aria-expanded="true"]:not([data-cut="none"], [data-cut="none"] *) > [data-slot="accordion-trigger-icon"]:has(+ [data-slot="accordion-trigger-icon"]) { rotate: 180deg; } :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="accordion-trigger"]:not([data-cut="none"], [data-cut="none"] *) > [data-slot="accordion-trigger-icon"] + [data-slot="accordion-trigger-icon"] { display: none; } /* A combobox's chevron turns while its list is open. */ :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="combobox-trigger"]:not([data-cut="none"], [data-cut="none"] *) > svg { transition: rotate calc(200ms * var(--kf-pace)) var(--kf-ease); } :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="combobox-trigger"]:is([data-popup-open], [aria-expanded="true"]):not([data-cut="none"], [data-cut="none"] *) > svg { rotate: 180deg; } /* A close ✕ turns a quarter while pressed; arrows nudge toward where they go. */ :where(html[data-kf]:not([data-kf-responses="none"])) :is( [data-slot="dialog-close"], [data-slot="sheet-close"], [data-slot="toast-close"], [data-slot="combobox-chip-remove"], [data-slot="combobox-clear"], [data-slot="carousel-previous"], [data-slot="carousel-next"], [data-slot="pagination-link"], [data-slot="message-scroller-button"], [data-slot="calendar"] :is(.rdp-button_previous, .rdp-button_next) ):not([data-cut="none"], [data-cut="none"] *) > svg { transition: rotate calc(150ms * var(--kf-pace)) var(--kf-ease), translate calc(150ms * var(--kf-pace)) var(--kf-ease); } :where(html[data-kf]:not([data-kf-responses="none"])) :is([data-slot="dialog-close"], [data-slot="sheet-close"], [data-slot="toast-close"], [data-slot="combobox-chip-remove"], [data-slot="combobox-clear"]):not([data-cut="none"], [data-cut="none"] *):active > svg { rotate: 90deg; } :where(html[data-kf]:not([data-kf-responses="none"])) :is([data-slot="carousel-previous"], [data-slot="pagination-link"][aria-label*="previous" i], [data-slot="calendar"] .rdp-button_previous):not([data-cut="none"], [data-cut="none"] *):active > svg { translate: -2px 0; } :where(html[data-kf]:not([data-kf-responses="none"])) :is([data-slot="carousel-next"], [data-slot="pagination-link"][aria-label*="next" i], [data-slot="calendar"] .rdp-button_next):not([data-cut="none"], [data-cut="none"] *):active > svg { translate: 2px 0; } :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="message-scroller-button"]:not([data-direction="start"], [data-cut="none"], [data-cut="none"] *):active > svg { translate: 0 2px; } /* Switch: the thumb travels on the theme's curve and stretches toward where it's going while held. */ :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="switch-thumb"]:not([data-cut="none"] *) { transition-duration: calc(150ms * var(--kf-pace)); transition-timing-function: var(--kf-ease); } :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="switch"]:not([data-cut="none"], [data-cut="none"] *):active > [data-slot="switch-thumb"] { scale: 1.18 1; transform-origin: left center; } :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="switch"]:is([data-checked]:not([data-checked="false"]), [data-state="checked"]):not([data-cut="none"], [data-cut="none"] *):active > [data-slot="switch-thumb"] { transform-origin: right center; } /* Drag: the slider thumb grows while it's held and settles on release. */ :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="slider-thumb"]:not([data-cut="none"] *) { transition: color var(--default-transition-duration, 150ms) var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow var(--default-transition-duration, 150ms) var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)), scale calc(150ms * var(--kf-pace)) var(--kf-ease); } :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="slider"]:is([data-dragging], :active):not([data-cut="none"], [data-cut="none"] *) [data-slot="slider-thumb"] { scale: 1.25; transition: color var(--default-transition-duration, 150ms) var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow var(--default-transition-duration, 150ms) var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)), scale calc(110ms * var(--kf-pace)) var(--kf-ease); } /* Drag: a resize handle thickens and takes the focus colour while it's being dragged. A box-shadow, not a scale, so the grip inside it keeps its shape. */ :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="resizable-handle"]:not([data-cut="none"] *) { transition: background-color calc(150ms * var(--kf-pace)) var(--kf-ease), box-shadow calc(150ms * var(--kf-pace)) var(--kf-ease); } :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="resizable-handle"][data-separator="active"]:not([data-cut="none"], [data-cut="none"] *) { background-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); } /* Sidebar: the width follows the theme's curve, and the labels leave before it closes and arrive after it opens, the way a J-cut lets the next scene's sound lead. Labels are matched by structure (a span in a menu item's button or link) because a collapsible item's trigger takes over the button's data-slot. */ :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="sidebar"]:not([data-cut="none"], [data-cut="none"] *) :is([data-slot="sidebar-container"], [data-slot="sidebar-gap"]) { transition-duration: calc(240ms * var(--kf-pace)); transition-timing-function: var(--kf-ease); } :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="sidebar"]:not([data-cut="none"], [data-cut="none"] *) :is([data-slot="sidebar-menu-item"], [data-slot="sidebar-menu-sub-item"]) > :is(button, a) > span { transition: opacity calc(150ms * var(--kf-pace)) var(--kf-ease) calc(120ms * var(--kf-pace)); } :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="sidebar"][data-collapsible="icon"]:not([data-cut="none"], [data-cut="none"] *) :is([data-slot="sidebar-menu-item"], [data-slot="sidebar-menu-sub-item"]) > :is(button, a) > span { opacity: 0; transition: opacity calc(80ms * var(--kf-pace)) var(--kf-ease-exit); } /* Fill: a progress bar eases to its new value on the theme's curve. */ :where(html[data-kf]:not([data-kf-responses="none"])) [data-slot="progress-indicator"]:not([data-cut="none"] *) { transition-duration: calc(240ms * var(--kf-pace)); transition-timing-function: var(--kf-ease); } } /* ---------- Reduced motion: same selectors; the cuts become short fades with no movement ---------- */ @media (prefers-reduced-motion: reduce) { :where(:root) { --kf-cap: 120ms; } @keyframes kf-rack-in { from { opacity: 0; } to { opacity: 1; } } @keyframes kf-rack-out { from { opacity: 1; } to { opacity: 0; } } @keyframes kf-punch-in { from { opacity: 0; } to { opacity: 1; } } @keyframes kf-punch-out { from { opacity: 1; } to { opacity: 0; } } @keyframes kf-panel-in { from { opacity: 0; transform: none; translate: none; } to { opacity: 1; transform: none; translate: none; } } @keyframes kf-panel-out { from { opacity: 1; transform: none; translate: none; } to { opacity: 0; transform: none; translate: none; } } @keyframes kf-grow { from { opacity: 0; } to { opacity: 1; } } @keyframes kf-shrink { from { opacity: 1; } to { opacity: 0; } } /* The tuned components' own keyframes move (zoom, slide); under reduced motion they fade instead. */ :where(html[data-kf]) :is( [data-slot="popover-content"], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"], [data-slot="context-menu-content"], [data-slot="context-menu-sub-content"], [data-slot="menubar-content"], [data-slot="menubar-sub-content"], [data-slot="select-content"], [data-slot="combobox-content"], [data-slot="hover-card-content"], [data-slot="tooltip-content"], [data-slot="navigation-menu-content"], [data-slot="navigation-menu-viewport"], [data-slot="accordion-content"] ):not([data-cut="none"], [data-cut="none"] *):is([data-state="open"], [data-state="delayed-open"], [data-state="instant-open"], [data-open]:not([data-open="false"])) { animation-name: kf-fade-in; transition-property: opacity; } :where(html[data-kf]) :is( [data-slot="popover-content"], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"], [data-slot="context-menu-content"], [data-slot="context-menu-sub-content"], [data-slot="menubar-content"], [data-slot="menubar-sub-content"], [data-slot="select-content"], [data-slot="combobox-content"], [data-slot="hover-card-content"], [data-slot="tooltip-content"], [data-slot="navigation-menu-content"], [data-slot="navigation-menu-viewport"], [data-slot="accordion-content"] ):not([data-cut="none"], [data-cut="none"] *):is([data-state="closed"], [data-closed]:not([data-closed="false"])) { animation-name: kf-fade-out; transition-property: opacity; } :where(html[data-kf]) [data-kf-sink="on"] { scale: 1; filter: none; border-radius: 0; } /* Responses: the tick and the radio dot fade in; nothing draws or grows. */ @keyframes kf-draw { from { opacity: 0; } to { opacity: 1; } } @keyframes kf-dot-in { from { opacity: 0; } } } 51:T11b5,/** Starts and stops the layer. Reference-counted: several (or React StrictMode) are safe. */ import { appearAdapter } from "./adapters/appear" import { arrivalAdapter } from "./adapters/arrival" import { calendarAdapter } from "./adapters/calendar" import { errorAdapter } from "./adapters/error" import { highlightAdapter } from "./adapters/highlight" import { overlayAdapter } from "./adapters/overlay" import { panelAdapter } from "./adapters/panel" import { stepsAdapter } from "./adapters/steps" import { tabsAdapter } from "./adapters/tabs" import { toastAdapter } from "./adapters/toast" import { toggleAdapter } from "./adapters/toggle" import { tunedAdapter } from "./adapters/tuned" import { parsePace } from "./motion" import { observe, type Adapter } from "./observe" import { createPressTracker, type Press, type PressTracker } from "./press" export type DialogCut = "rack-focus" | "punch-in" | "fade" | "none" export type SheetCut = "slide-sink" | "slide" | "fade" | "none" export type DrawerCut = "slide-sink" | "none" export type TabsCut = "j-cut" | "whip" | "fade" | "none" export type ToastCut = "cut-on-action" | "none" export type Menus = { dialog?: DialogCut; sheet?: SheetCut; drawer?: DrawerCut; tabs?: TabsCut; toast?: ToastCut } export const DEFAULT_MENUS: Required = { dialog: "rack-focus", sheet: "slide-sink", drawer: "slide-sink", tabs: "j-cut", toast: "cut-on-action", } /** Every adapter the engine runs. Each cut group adds its factory here. */ export const ADAPTER_FACTORIES: Array<(press: PressTracker) => Adapter> = [overlayAdapter, panelAdapter, tabsAdapter, toastAdapter, tunedAdapter, toggleAdapter, highlightAdapter, errorAdapter, arrivalAdapter, appearAdapter, calendarAdapter, stepsAdapter] let refs = 0 let activePress: PressTracker | null = null let stopEngine: (() => void) | null = null function applyPace(el: HTMLElement) { el.style.setProperty("--kf-pace", String(parsePace(el.getAttribute("data-cut-pace")))) } const paceAdapter: Adapter = { match: "[data-cut-pace]", init: () => document.querySelectorAll("[data-cut-pace]").forEach(applyPace), added: applyPace, changed: (el, attribute) => { if (attribute === "data-cut-pace") applyPace(el) }, } function install(): () => void { const press = createPressTracker(document) activePress = press const adapters = [paceAdapter, ...ADAPTER_FACTORIES.map((make) => make(press))] const disconnect = observe(document.body, adapters) adapters.forEach((a) => a.init?.()) return () => { activePress = null disconnect() adapters.forEach((a) => a.dispose?.()) press.dispose() const html = document.documentElement for (const name of [...html.getAttributeNames()]) if (name === "data-kf" || name.startsWith("data-kf-")) html.removeAttribute(name) html.style.removeProperty("--kf-pace") } } export function start(): () => void { refs += 1 if (refs === 1) stopEngine = install() let released = false return () => { if (released) return released = true refs -= 1 if (refs === 0 && stopEngine) { stopEngine() stopEngine = null } } } export function applyMenus(menus: Menus): void { const html = document.documentElement for (const [group, value] of Object.entries({ ...DEFAULT_MENUS, ...stripUndefined(menus) })) html.setAttribute(`data-kf-${group}`, value) } function stripUndefined(menus: Menus): Menus { return Object.fromEntries(Object.entries(menus).filter(([, v]) => v !== undefined)) as Menus } export function setEnabled(on: boolean): void { if (on) document.documentElement.setAttribute("data-kf", "") else document.documentElement.removeAttribute("data-kf") } /** "none" turns off every response (press, toggle, drag, fill); cuts keep playing. */ export type Responses = "on" | "none" export function setResponses(responses: Responses | undefined): void { if (responses === "none") document.documentElement.setAttribute("data-kf-responses", "none") else document.documentElement.removeAttribute("data-kf-responses") } export function setPace(pace: number | undefined): void { if (pace === undefined) document.documentElement.style.removeProperty("--kf-pace") else document.documentElement.style.setProperty("--kf-pace", String(parsePace(String(pace)))) } /** The last press, for helpers that cut from what the user pressed. Null when no is running. */ export function lastPress(maxAgeMs?: number): Press | null { return activePress?.last(maxAgeMs) ?? null } 52:T980,/** Timing, easing, pace, reduced motion, and the keyframery:cut event. Keep in step with keyframery.css. */ export const DURATIONS = { "rack-focus": { enter: 340, exit: 220 }, "punch-in": { enter: 260, exit: 160 }, fade: { enter: 200, exit: 150 }, "slide-sink": { enter: 460, exit: 260 }, slide: { enter: 460, exit: 260 }, tuned: { enter: 180, exit: 180 }, "cut-on-action": { enter: 480, exit: 0 }, } as const export const REDUCED_MS = 120 export type CutPhase = "enter" | "exit" export type CutEventDetail = { cut: string; component: string; phase: CutPhase; ms: number } export function parsePace(raw: string | null | undefined): number { const n = Number.parseFloat(raw ?? "") return Number.isFinite(n) && n > 0 ? n : 1 } export function paceOf(el: Element): number { return parsePace(getComputedStyle(el).getPropertyValue("--kf-pace")) } const EASING = { enter: "cubic-bezier(0.22, 1, 0.36, 1)", exit: "cubic-bezier(0.5, 0, 0.75, 0)" } function validEasing(value: string): boolean { // CSS accepts global keywords and comma-separated animation lists; WAAPI needs one easing. if (!value || /^(inherit|initial|unset|revert|revert-layer)$/i.test(value) || /\b(var|env)\(/i.test(value)) return false let depth = 0 for (const char of value) { if (char === "(") depth++ else if (char === ")") depth-- else if (char === "," && depth === 0) return false } return typeof CSS !== "undefined" && CSS.supports("animation-timing-function", value) } /** Resolve a scoped theme curve, without letting invalid custom properties throw in animate(). */ export function easingOf(el: Element, phase: CutPhase = "enter", fallback = EASING[phase]): string { const value = getComputedStyle(el).getPropertyValue(phase === "exit" ? "--kf-ease-exit" : "--kf-ease").trim() return validEasing(value) ? value : validEasing(fallback) ? fallback : EASING[phase] } export function reducedMotion(): boolean { return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches } /** A base duration for this element: × its pace, or capped to a short fade under reduced motion. */ export function scaled(baseMs: number, el: Element): number { return reducedMotion() ? Math.min(baseMs, REDUCED_MS) : baseMs * paceOf(el) } export function emitCut(detail: CutEventDetail): void { document.dispatchEvent(new CustomEvent("keyframery:cut", { detail })) } 53:T7a5,/** Remembers what the user last pressed: the element that started a cut. */ /** `kind` says whether a pointer or a key started it; `key` names the key. */ export type Press = { el: Element; rect: DOMRect; t: number; kind: "pointer" | "key"; key?: string } export type PressTracker = { /** The last press, if it happened within `maxAgeMs`. */ last(maxAgeMs?: number): Press | null /** Called on every press, before the library handles it (capture phase). */ onPress(fn: (press: Press, target: Element) => void): () => void dispose(): void } const PRESSABLE = 'button,a,input,textarea,[role="button"],[role="menuitem"],[role="tab"],[role="option"],[data-slot$="-trigger"]' const KEYS = new Set(["Enter", " ", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]) export function createPressTracker(doc: Document = document): PressTracker { let last: Press | null = null const subs = new Set<(press: Press, target: Element) => void>() const handle = (e: Event) => { const target = e.target instanceof Element ? e.target : null if (!target) return if (e instanceof KeyboardEvent && !KEYS.has(e.key)) return const el = target.closest(PRESSABLE) ?? target const kind = e instanceof KeyboardEvent ? "key" : "pointer" const press: Press = { el, rect: el.getBoundingClientRect(), t: performance.now(), kind, key: e instanceof KeyboardEvent ? e.key : undefined } last = press subs.forEach((fn) => fn(press, target)) } doc.addEventListener("pointerdown", handle, true) doc.addEventListener("keydown", handle, true) return { last(maxAgeMs = 1500) { return last && performance.now() - last.t < maxAgeMs ? last : null }, onPress(fn) { subs.add(fn) return () => { subs.delete(fn) } }, dispose() { doc.removeEventListener("pointerdown", handle, true) doc.removeEventListener("keydown", handle, true) subs.clear() }, } } 54:Tded,/** Points a cut at the element that started it, and carries that element's settings onto portaled content. */ import type { Press } from "./press" export type RectLike = { left: number; top: number; width: number; height: number } export const KF_VARS = ["--kf-pace", "--kf-ease", "--kf-ease-exit", "--kf-travel", "--kf-blur", "--kf-depth", "--kf-hold"] as const export function centerOf(r: RectLike) { return { x: r.left + r.width / 2, y: r.top + r.height / 2 } } /** Vector from the centre of `to` to the centre of `from`, in px. */ export function offsetBetween(from: RectLike, to: RectLike) { const a = centerOf(from) const b = centerOf(to) const round = (n: number) => Math.round(n * 100) / 100 return { dx: round(a.x - b.x), dy: round(a.y - b.y) } } /** * The element's resting box: an enter animation's first frame is transformed, so measure with every * animation seeked to its end, then put each one back exactly. Nothing is cancelled or restarted, so the * libraries that watch these animations (Radix Presence, Base UI's finished promises) never notice. */ export function restingRect(el: HTMLElement): DOMRect { const saved = el.getAnimations().map((a) => ({ a, t: a.currentTime, state: a.playState })) for (const { a } of saved) { a.pause() a.currentTime = Number(a.effect?.getComputedTiming().endTime ?? 0) } const rect = el.getBoundingClientRect() for (const { a, t, state } of saved) { a.currentTime = t ?? 0 if (state === "finished") a.finish() else if (state !== "paused") a.play() } return rect } /** Writes --kf-dx/--kf-dy so the CSS cut starts toward the opener. No opener (or data-cut-origin) = from the centre. */ export function aimAt(el: HTMLElement, opener: Press | null, atRest: boolean): void { if (!opener || el.hasAttribute("data-cut-origin")) { el.style.setProperty("--kf-dx", "0px") el.style.setProperty("--kf-dy", "0px") return } const from = opener.el.isConnected ? opener.el.getBoundingClientRect() : opener.rect const to = atRest ? restingRect(el) : el.getBoundingClientRect() const { dx, dy } = offsetBetween(from, to) el.style.setProperty("--kf-dx", `${dx}px`) el.style.setProperty("--kf-dy", `${dy}px`) } /** * Portaled content renders at the end of , outside the section it was opened from. * Copy the opener's opt-out and its --kf-* values onto it, only where they differ. * Named cuts are never carried: a tabs cut means nothing to a dialog. */ export function carrySettings(content: HTMLElement, opener: Element | null): void { if (!opener || content.contains(opener)) return if (!content.hasAttribute("data-cut") && opener.closest('[data-cut="none"]')) content.setAttribute("data-cut", "none") const from = getComputedStyle(opener) const here = getComputedStyle(content) for (const name of KF_VARS) { const value = from.getPropertyValue(name).trim() if (value && value !== here.getPropertyValue(name).trim()) content.style.setProperty(name, value) } } /** A per-dialog choice also applies to its backdrop, which renders as an earlier sibling. */ export function mirrorCut(content: HTMLElement, overlaySelector: string): void { const value = content.getAttribute("data-cut") if (!value) return let node = content.previousElementSibling while (node && !node.matches(overlaySelector)) node = node.previousElementSibling const overlay = node ?? content.parentElement?.querySelector(overlaySelector) ?? null if (overlay && !overlay.hasAttribute("data-cut")) overlay.setAttribute("data-cut", value) } 55:T8ed,/** A stand-in copy of an element that is leaving, so no library has to keep the real one mounted. */ export type Snapshot = { clone: HTMLElement; rect: DOMRect } export function snapshot(el: Element): Snapshot { const clone = el.cloneNode(true) as HTMLElement clone.removeAttribute("id") clone.querySelectorAll("[id]").forEach((n) => n.removeAttribute("id")) const slot = clone.getAttribute("data-slot") if (slot) clone.setAttribute("data-slot", `${slot}-ghost`) clone.setAttribute("data-kf-ghost", "") return { clone, rect: el.getBoundingClientRect() } } /** * Places the ghost over the element's last box, plays `keyframes`, and always removes it afterwards. * With `place.host` (an ancestor of the leaving element) the ghost lives inside it, absolutely positioned, * so it stays in the same stacking context: tabs inside a dialog keep their ghost above the dialog. */ export function playGhost(snap: Snapshot, keyframes: Keyframe[], options: KeyframeAnimationOptions, place: { host?: HTMLElement; z?: number } = {}): Animation { const host = place.host const g = snap.clone let left = snap.rect.left let top = snap.rect.top if (host) { const box = host.getBoundingClientRect() left = snap.rect.left - box.left - host.clientLeft + host.scrollLeft top = snap.rect.top - box.top - host.clientTop + host.scrollTop if (getComputedStyle(host).position === "static") { host.style.position = "relative" host.setAttribute("data-kf-relative", "") } } Object.assign(g.style, { position: host ? "absolute" : "fixed", left: `${left}px`, top: `${top}px`, width: `${snap.rect.width}px`, height: `${snap.rect.height}px`, margin: "0", boxSizing: "border-box", pointerEvents: "none", zIndex: String(place.z ?? 1), }) g.hidden = false g.setAttribute("aria-hidden", "true") g.inert = true ;(host ?? document.body).appendChild(g) const anim = g.animate(keyframes, { fill: "forwards", ...options }) const done = () => { g.remove() if (host?.hasAttribute("data-kf-relative") && !host.querySelector(":scope > [data-kf-ghost]")) { host.style.removeProperty("position") host.removeAttribute("data-kf-relative") } } anim.finished.then(done, done) return anim } 56:Ta76,/** One MutationObserver for the whole page; hands each change to the adapter that owns it. */ export type Adapter = { /** Selector for the elements this adapter owns. */ match: string /** Runs once at start, for markup that was already in the page. */ init?(): void /** `root` is the node that was inserted: the element itself, or an ancestor inserted with it. */ added?(el: HTMLElement, root: Element): void changed?(el: HTMLElement, attribute: string): void removed?(el: HTMLElement): void /** Runs once after every mutation batch. */ flush?(): void /** Runs when the engine stops. */ dispose?(): void } export const WATCHED_ATTRIBUTES = ["data-state", "data-open", "data-closed", "hidden", "data-active", "aria-selected", "data-cut", "data-cut-pace", "data-checked", "data-unchecked", "data-pressed", "aria-pressed", "aria-current", "data-selected-single", "aria-invalid", "data-invalid", "data-selected"] const inGhost = (n: Element) => n.closest("[data-kf-ghost]") !== null function eachMatch(node: Element, selector: string, fn: (el: HTMLElement) => void) { if (node.matches(selector)) fn(node as HTMLElement) node.querySelectorAll(selector).forEach(fn) } /** An adapter bug must never break the page: skip the cut, keep the library's own motion. */ function safely(fn: () => void) { try { fn() } catch (err) { console.warn("[keyframery] cut skipped:", err) } } export function observe(root: HTMLElement, adapters: Adapter[]): () => void { const perf = (globalThis as { __kfPerf?: number[] }).__kfPerf const mo = new MutationObserver((records) => { const t0 = performance.now() for (const r of records) { if (r.type === "childList") { r.addedNodes.forEach((n) => { if (!(n instanceof Element) || inGhost(n)) return for (const a of adapters) if (a.added) eachMatch(n, a.match, (el) => safely(() => a.added!(el, n))) }) r.removedNodes.forEach((n) => { if (!(n instanceof Element) || n.hasAttribute("data-kf-ghost")) return for (const a of adapters) if (a.removed) eachMatch(n, a.match, (el) => safely(() => a.removed!(el))) }) } else if (r.target instanceof HTMLElement && !inGhost(r.target)) { const el = r.target for (const a of adapters) if (a.changed && el.matches(a.match)) safely(() => a.changed!(el, r.attributeName ?? "")) } } for (const a of adapters) if (a.flush) safely(() => a.flush!()) perf?.push(performance.now() - t0) }) mo.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: WATCHED_ATTRIBUTES }) return () => mo.disconnect() } 57:T8ca,/** Dialog, alert dialog and command: aim the cut at the opener, carry section settings, report the cut. */ import { aimAt, carrySettings, mirrorCut } from "../aim" import { DURATIONS, emitCut, scaled } from "../motion" import type { Adapter } from "../observe" import type { Press, PressTracker } from "../press" import { optedOut, phaseOf, type Phase } from "../state" const CONTENT = '[data-slot="dialog-content"],[data-slot="alert-dialog-content"]' const OVERLAY = '[data-slot="dialog-overlay"],[data-slot="alert-dialog-overlay"]' const CUTS = ["rack-focus", "punch-in", "fade"] as const type DialogCssCut = (typeof CUTS)[number] export function dialogCutOf(el: Element): string { return el.getAttribute("data-cut") ?? document.documentElement.getAttribute("data-kf-dialog") ?? "rack-focus" } function componentOf(el: Element): string { if (el.querySelector('[data-slot="command"]')) return "command" return el.getAttribute("data-slot") === "alert-dialog-content" ? "alert-dialog" : "dialog" } export function overlayAdapter(press: PressTracker): Adapter { const seen = new WeakMap() const openers = new WeakMap() const handle = (el: HTMLElement, mounted: boolean) => { const phase = phaseOf(el) if (!phase || seen.get(el) === phase) return seen.set(el, phase) if (phase === "open") { const p = press.last() const opener = p && !el.contains(p.el) ? p : null openers.set(el, opener) carrySettings(el, opener?.el ?? null) mirrorCut(el, OVERLAY) if (optedOut(el)) return aimAt(el, opener, true) } else { if (mounted || optedOut(el)) return aimAt(el, openers.get(el) ?? null, false) } const cut = dialogCutOf(el) if (!(CUTS as readonly string[]).includes(cut)) return const d = DURATIONS[cut as DialogCssCut] emitCut({ cut, component: componentOf(el), phase: phase === "open" ? "enter" : "exit", ms: Math.round(scaled(phase === "open" ? d.enter : d.exit, el)) }) } return { match: CONTENT, added: (el) => handle(el, true), changed: (el, attribute) => { if (attribute === "data-state" || attribute === "data-open" || attribute === "data-closed") handle(el, false) }, } } 58:Tf6d,/** Sheet and drawer: the page behind steps back while the panel is up. */ import { carrySettings, mirrorCut } from "../aim" import { DURATIONS, emitCut, reducedMotion, scaled } from "../motion" import type { Adapter } from "../observe" import type { PressTracker } from "../press" import { optedOut, phaseOf, type Phase } from "../state" const PANELS = '[data-slot="sheet-content"],[data-slot="drawer-popup"],[data-slot="drawer-content"][data-vaul-drawer]' const SHEET_OVERLAY = '[data-slot="sheet-overlay"]' /** Top-level children of that are portals or plumbing, never the app. */ const NOT_APP = [ "script", "style", "template", "link", "next-route-announcer", "[hidden]", "[data-base-ui-portal]", "[data-radix-popper-content-wrapper]", "[data-radix-focus-guard]", '[data-slot$="-content"]', '[data-slot$="-overlay"]', '[data-slot$="-popup"]', '[data-slot$="-portal"]', '[data-slot$="-viewport"]', "[data-kf-ghost]", "[data-sonner-toaster]", 'section[aria-label^="Notifications"]', ].join(",") const SHEET_CUTS = ["slide-sink", "slide", "fade"] as const type SheetCssCut = (typeof SHEET_CUTS)[number] const groupOf = (el: Element): "sheet" | "drawer" => (el.getAttribute("data-slot") === "sheet-content" ? "sheet" : "drawer") export function panelCutOf(el: Element): string { if (optedOut(el)) return "none" return el.getAttribute("data-cut") ?? document.documentElement.getAttribute(`data-kf-${groupOf(el)}`) ?? "slide-sink" } /** The top-level child of that holds the opener. If the opener lives in a portal (a nested panel), nothing sinks again. */ export function appRootFor(opener: Element | null): HTMLElement | null { let top: Element | null = opener while (top && top.parentElement && top.parentElement !== document.body) top = top.parentElement if (top && top.parentElement === document.body) return top.matches(NOT_APP) ? null : (top as HTMLElement) return (Array.from(document.body.children).find((c) => !c.matches(NOT_APP)) as HTMLElement | undefined) ?? null } export function panelAdapter(press: PressTracker): Adapter { const seen = new WeakMap() const sunk = new Map() const sinkOn = (panel: HTMLElement, opener: Element | null) => { if (sunk.has(panel) || reducedMotion() || panelCutOf(panel) !== "slide-sink") return const root = appRootFor(opener) if (!root || root.contains(panel)) return root.setAttribute("data-kf-sink", "on") document.documentElement.setAttribute("data-kf-sinking", "") sunk.set(panel, root) } const sinkOff = (panel: Element) => { const root = sunk.get(panel) if (!root) return sunk.delete(panel) if (![...sunk.values()].includes(root)) root.setAttribute("data-kf-sink", "off") if (sunk.size === 0) document.documentElement.removeAttribute("data-kf-sinking") } const handle = (el: HTMLElement, mounted: boolean) => { const phase = phaseOf(el) if (!phase || seen.get(el) === phase) return seen.set(el, phase) if (phase === "closed") { sinkOff(el) if (mounted) return } else { const p = press.last() const opener = p && !el.contains(p.el) ? p.el : null carrySettings(el, opener) mirrorCut(el, SHEET_OVERLAY) sinkOn(el, opener) } const group = groupOf(el) const cut = panelCutOf(el) if (group === "sheet" ? !(SHEET_CUTS as readonly string[]).includes(cut) : cut !== "slide-sink") return const d = DURATIONS[cut as SheetCssCut] emitCut({ cut, component: group, phase: phase === "open" ? "enter" : "exit", ms: Math.round(scaled(phase === "open" ? d.enter : d.exit, el)) }) } return { match: PANELS, added: (el) => handle(el, true), changed: (el, attribute) => { if (attribute === "data-state" || attribute === "data-open" || attribute === "data-closed") handle(el, false) }, removed: sinkOff, dispose: () => [...sunk.keys()].forEach(sinkOff), } } 59:T1e79,/** Tabs: the old panel leaves on a ghost, the tab pill whips across, the new panel follows, the frame resizes smoothly. */ import { playGhost, snapshot, type Snapshot } from "../ghost" import { easingOf, emitCut, reducedMotion, scaled } from "../motion" import type { Adapter } from "../observe" import type { PressTracker } from "../press" import { isActive, optedOut } from "../state" const ROOT = '[data-slot="tabs"]' const PANEL = '[data-slot="tabs-content"]' const TAB = '[data-slot="tabs-trigger"]' const TABS_CUTS = ["j-cut", "whip", "fade"] as const type TabsCut = (typeof TABS_CUTS)[number] type Snap = { panel: Element | null; ghost: Snapshot | null; height: number; fromIndex: number; fromTab: Element | null; fromRect: DOMRect | null; t: number } const own = (root: Element, selector: string) => Array.from(root.querySelectorAll(selector)).filter((n) => n.closest(ROOT) === root) const visible = (el: Element) => !(el as HTMLElement).hidden && el.getClientRects().length > 0 export function tabsCutOf(root: Element): TabsCut | "none" { if (optedOut(root)) return "none" const value = root.getAttribute("data-cut") ?? document.documentElement.getAttribute("data-kf-tabs") ?? "j-cut" return (TABS_CUTS as readonly string[]).includes(value) ? (value as TabsCut) : "none" } /** A pill travels from the old tab to the new one; the real tab hides its own pill until it lands. */ function whip(to: Element, fromRect: DOMRect, vertical: boolean, ms: number) { const list = to.parentElement if (!list) return const toRect = to.getBoundingClientRect() const listRect = list.getBoundingClientRect() const cs = getComputedStyle(to) const pill = document.createElement("span") pill.setAttribute("aria-hidden", "true") pill.setAttribute("data-kf-pill", "") Object.assign(pill.style, { position: "absolute", left: `${toRect.left - listRect.left - list.clientLeft}px`, top: `${toRect.top - listRect.top - list.clientTop}px`, width: `${toRect.width}px`, height: `${toRect.height}px`, borderRadius: cs.borderRadius, background: cs.backgroundColor, boxShadow: cs.boxShadow, pointerEvents: "none", }) if (getComputedStyle(list).position === "static") { list.style.position = "relative" list.setAttribute("data-kf-relative", "") } list.prepend(pill) const dx = fromRect.left + fromRect.width / 2 - (toRect.left + toRect.width / 2) const dy = fromRect.top + fromRect.height / 2 - (toRect.top + toRect.height / 2) const sx = fromRect.width / toRect.width const sy = fromRect.height / toRect.height const at = (f: number) => (vertical ? `0 ${dy * f}px` : `${dx * f}px 0`) const bare = { backgroundColor: "transparent", boxShadow: "none", borderColor: "transparent" } ;(to as HTMLElement).animate([bare, bare], { duration: ms }) const done = () => { pill.remove() if (list.hasAttribute("data-kf-relative") && !list.querySelector(":scope > [data-kf-pill]")) { list.style.removeProperty("position") list.removeAttribute("data-kf-relative") } } pill .animate( [ { translate: at(1), scale: vertical ? `1 ${sy}` : `${sx} 1` }, { translate: at(0.12), scale: vertical ? "1 1.08" : "1.08 1", offset: 0.7 }, { translate: "0 0", scale: "1 1" }, ], // The stretch keyframe at 0.7 is timed for this accelerate-then-settle curve; it is the whip, so the theme curve doesn't replace it. { duration: ms, easing: "cubic-bezier(0.65, 0, 0.35, 1)" }, ) .finished.then(done, done) } export function tabsAdapter(press: PressTracker): Adapter { const snaps = new Map() const dirty = new Set() const morphs = new WeakMap() const unsubscribe = press.onPress((_p, target) => { const root = target.closest(TAB)?.closest(ROOT) if (!root || tabsCutOf(root) === "none") return const panel = own(root, PANEL).find(visible) ?? null const tabs = own(root, TAB) const from = tabs.find(isActive) ?? null snaps.set(root, { panel, ghost: panel ? snapshot(panel) : null, height: root.getBoundingClientRect().height, fromIndex: from ? tabs.indexOf(from) : -1, fromTab: from, fromRect: from?.getBoundingClientRect() ?? null, t: performance.now(), }) }) function play(root: Element, snap: Snap, to: Element) { const cut = tabsCutOf(root) if (cut === "none") return const vertical = root.getAttribute("data-orientation") === "vertical" const dir = own(root, TAB).indexOf(to) >= snap.fromIndex ? 1 : -1 const controlled = to.getAttribute("aria-controls") const panel = (controlled ? document.getElementById(controlled) : null) ?? own(root, PANEL).find((p) => p !== snap.panel && visible(p) && !p.hasAttribute("data-ending-style")) ?? null // Base UI keeps the old panel mounted for a frame (longer if it animates). The ghost plays that exit, // so take the real one out of layout now and hand it back once the library is done with it. if (snap.panel && snap.panel !== panel && visible(snap.panel)) { const old = snap.panel as HTMLElement old.style.display = "none" requestAnimationFrame(() => requestAnimationFrame(() => old.style.removeProperty("display"))) } if (reducedMotion()) { const ms = scaled(120, root) panel?.animate([{ opacity: 0 }, { opacity: 1 }], { duration: ms, easing: easingOf(panel) }) emitCut({ cut, component: "tabs", phase: "enter", ms: Math.round(ms) }) return } const travel = cut === "fade" ? 0 : 28 const shift = (n: number) => (vertical ? `0 ${n}px` : `${n}px 0`) const blur = cut === "fade" ? "blur(0)" : "blur(4px)" const ghostMs = scaled(cut === "whip" ? 160 : 180, root) const enterMs = scaled(cut === "j-cut" ? 300 : cut === "whip" ? 160 : 180, root) const lead = cut === "j-cut" ? scaled(70, root) : 0 if (snap.ghost) { playGhost( snap.ghost, [ { opacity: 1, translate: "0 0", filter: "blur(0)" }, { opacity: 0, translate: shift(-dir * travel), filter: blur }, ], { duration: ghostMs, easing: easingOf(root, "exit", "cubic-bezier(0.4, 0, 1, 1)") }, { host: root as HTMLElement }, ) } if (cut !== "fade" && snap.fromRect) whip(to, snap.fromRect, vertical, scaled(cut === "whip" ? 160 : 200, root)) morphs.get(root)?.cancel() const height = root.getBoundingClientRect().height if (Math.abs(height - snap.height) > 1) { morphs.set( root, (root as HTMLElement).animate( [ { height: `${snap.height}px`, overflow: "clip" }, { height: `${height}px`, overflow: "clip" }, ], { duration: scaled(320, root), easing: easingOf(root) }, ), ) } panel?.animate( [ { opacity: 0, translate: shift(dir * travel), filter: cut === "whip" ? "blur(4px)" : "blur(0)" }, { opacity: 1, translate: "0 0", filter: "blur(0)" }, ], { duration: enterMs, delay: lead, easing: easingOf(panel), fill: "backwards" }, ) emitCut({ cut, component: "tabs", phase: "enter", ms: Math.round(enterMs + lead) }) } const mark = (el: Element) => { const root = el.closest(ROOT) if (root) dirty.add(root) } return { match: `${ROOT},${PANEL},${TAB}`, added: mark, changed: mark, flush() { for (const root of dirty) { const snap = snaps.get(root) if (!snap || performance.now() - snap.t > 1500) continue const to = own(root, TAB).find(isActive) if (!to || to === snap.fromTab) continue snaps.delete(root) play(root, snap, to) } dirty.clear() }, dispose: unsubscribe, } } 5a:T60c,/** Toasts (sonner and Base UI): cut on action, so the toast leaves the element you pressed. */ import { centerOf } from "../aim" import { DURATIONS, easingOf, emitCut, reducedMotion, scaled } from "../motion" import type { Adapter } from "../observe" import type { PressTracker } from "../press" import { optedOut } from "../state" const TOAST = '[data-sonner-toast],[data-slot="toast"]' export function toastAdapter(press: PressTracker): Adapter { const flown = new WeakSet() return { match: TOAST, added(el) { if (flown.has(el)) return flown.add(el) if (document.documentElement.getAttribute("data-kf-toast") === "none" || reducedMotion() || optedOut(el)) return const p = press.last(1000) if (!p || el.contains(p.el) || optedOut(p.el)) return const from = centerOf(p.el.isConnected ? p.el.getBoundingClientRect() : p.rect) const to = centerOf(el.getBoundingClientRect()) const ms = scaled(DURATIONS["cut-on-action"].enter, el) // The individual translate/scale properties compose with the library's own transform transition instead of fighting it. el.animate( [ { translate: `${from.x - to.x}px ${from.y - to.y}px`, scale: "0.4", filter: "blur(6px)" }, { translate: "0 0", scale: "1", filter: "blur(0)" }, ], { duration: ms, easing: easingOf(el) }, ) emitCut({ cut: "cut-on-action", component: el.hasAttribute("data-sonner-toast") ? "sonner" : "toast", phase: "enter", ms: Math.round(ms) }) }, } } 5b:T8f4,/** The 11 tuned components are pure CSS. This carries section settings onto the portaled ones, keeps * load-time collapsibles still, and reports each cut. */ import { carrySettings } from "../aim" import { DURATIONS, emitCut, scaled } from "../motion" import type { Adapter } from "../observe" import type { PressTracker } from "../press" import { optedOut, phaseOf, type Phase } from "../state" export const TUNED_SLOTS = [ "popover-content", "dropdown-menu-content", "dropdown-menu-sub-content", "context-menu-content", "context-menu-sub-content", "menubar-content", "menubar-sub-content", "select-content", "combobox-content", "hover-card-content", "tooltip-content", "navigation-menu-content", "navigation-menu-viewport", "accordion-content", "collapsible-content", ] as const const TUNED = TUNED_SLOTS.map((s) => `[data-slot="${s}"]`).join(",") const COLLAPSIBLE = '[data-slot="collapsible-content"]' const componentOf = (el: Element) => (el.getAttribute("data-slot") ?? "").replace(/-(sub-content|content|viewport)$/, "") export function tunedAdapter(press: PressTracker): Adapter { const seen = new WeakMap() const handle = (el: HTMLElement, mounted: boolean, initial: boolean) => { const phase = phaseOf(el) if (!phase || seen.get(el) === phase) return seen.set(el, phase) if (el.matches(COLLAPSIBLE)) { if (phase === "open" && initial) el.setAttribute("data-kf-static", "") // open before anyone pressed anything: no grow if (phase === "closed") el.removeAttribute("data-kf-static") } if (initial) return if (phase === "open") { const p = press.last() carrySettings(el, p && !el.contains(p.el) ? p.el : null) } else if (mounted) return if (optedOut(el)) return emitCut({ cut: "tuned", component: componentOf(el), phase: phase === "open" ? "enter" : "exit", ms: Math.round(scaled(DURATIONS.tuned.enter, el)) }) } return { match: TUNED, init: () => document.querySelectorAll(TUNED).forEach((el) => handle(el, true, true)), added: (el) => handle(el, true, false), changed: (el, attribute) => { if (attribute === "data-state" || attribute === "data-open" || attribute === "data-closed") handle(el, false, false) }, } } 5c:Ta11,/** Toggles: marks a control for a moment when its own state flips, so the CSS can draw the tick or grow * the dot. Controls that load or mount already checked are never marked, so nothing redraws on page load * or on a route change. */ import { emitCut, scaled } from "../motion" import type { Adapter } from "../observe" import { optedOut } from "../state" export const TOGGLE_SLOTS = [ "checkbox", "radio-group-item", "switch", "questionnaire-choice", "dropdown-menu-checkbox-item", "dropdown-menu-radio-item", "context-menu-checkbox-item", "context-menu-radio-item", "menubar-checkbox-item", "menubar-radio-item", "command-item", "combobox-item", ] as const const TOGGLES = TOGGLE_SLOTS.map((s) => `[data-slot="${s}"]`).join(",") // Base UI sets data-checked / data-unchecked; Radix sets data-state. A combobox item is "on" when selected. // (The command palette uses data-selected for its keyboard highlight, so only data-checked counts there.) const ON = '[data-checked]:not([data-checked="false"]),[data-state="checked"]' const ON_SELECTED = '[data-slot="combobox-item"]:is([data-selected]:not([data-selected="false"]))' const isOn = (el: Element) => el.matches(ON) || el.matches(ON_SELECTED) const STATE_ATTRIBUTES = new Set(["data-checked", "data-unchecked", "data-state", "data-selected"]) // How long the mark stays after the response: long enough for a slowed-down pace to finish. const HOLD_MS = 250 /** True while is set. */ export const responsesOff = () => document.documentElement.getAttribute("data-kf-responses") === "none" export function toggleAdapter(): Adapter { const seen = new WeakMap() const timers = new WeakMap>() const remember = (el: HTMLElement) => seen.set(el, isOn(el)) return { match: TOGGLES, init: () => document.querySelectorAll(TOGGLES).forEach(remember), added: remember, changed: (el, attribute) => { if (!STATE_ATTRIBUTES.has(attribute)) return const on = isOn(el) if (seen.get(el) === on) return seen.set(el, on) if (optedOut(el) || responsesOff()) return clearTimeout(timers.get(el)) el.setAttribute("data-kf-toggled", on ? "on" : "off") const ms = scaled(150, el) timers.set( el, setTimeout(() => el.removeAttribute("data-kf-toggled"), ms + HOLD_MS), ) emitCut({ cut: "toggle", component: el.getAttribute("data-slot") ?? "toggle", phase: on ? "enter" : "exit", ms: Math.round(ms) }) }, } } 5d:T1f0d,/** Highlight: when the selection moves to a sibling, its background travels there instead of jumping. * Toggle groups, pagination, the sidebar and the calendar. A change made from the keyboard stays instant: * people press arrow keys many times in a row, and motion would only slow them down. */ import { easingOf, emitCut, reducedMotion, scaled } from "../motion" import type { Adapter } from "../observe" import type { PressTracker } from "../press" import { optedOut } from "../state" import { responsesOff } from "./toggle" type Row = { /** Where the travelling pill is drawn: an ancestor holding every item, never a table part. */ host: string item: string active: string } export const HIGHLIGHTS: Row[] = [ { host: '[data-slot="toggle-group"]', item: '[data-slot="toggle-group-item"]', active: '[data-pressed]:not([data-pressed="false"]),[data-state="on"]', }, { host: '[data-slot="pagination-content"]', item: '[data-slot="pagination-link"]', active: '[aria-current="page"]' }, { host: '[data-slot="sidebar-content"]', item: '[data-slot="sidebar-menu-button"],[data-slot="sidebar-menu-sub-button"]', active: '[data-active]:not([data-active="false"])', }, { host: '[data-slot="calendar"]', item: "[data-day]", active: '[data-selected-single="true"]' }, ] const ITEMS = HIGHLIGHTS.map((r) => r.item).join(",") const ATTRIBUTES = new Set(["data-pressed", "aria-pressed", "data-state", "aria-current", "data-active", "data-selected-single"]) type Flight = { pill: HTMLElement; anims: Animation[]; restore: () => void } function rowOf(item: Element): Row | undefined { return HIGHLIGHTS.find((r) => item.matches(r.item)) } function activeIn(host: Element, row: Row): Element[] { return [...host.querySelectorAll(row.item)].filter((el) => el.matches(row.active) && host.contains(el)) } /** Position of `r` inside `host`'s padding box, following its scroll. */ function inside(host: HTMLElement, r: DOMRect) { const h = host.getBoundingClientRect() return { left: `${r.left - h.left - host.clientLeft + host.scrollLeft}px`, top: `${r.top - h.top - host.clientTop + host.scrollTop}px`, width: `${r.width}px`, height: `${r.height}px`, } } export function highlightAdapter(press: PressTracker): Adapter { const last = new WeakMap() const flights = new WeakMap() const dirty = new Set() // Where the selection was when the user pressed inside a host. Some components rebuild on select (the // calendar re-renders its whole grid, root included), so by the time the change shows, the old item and // even the old host are gone; this remembers the spot by row, not by element. let pressed: { row: Row; rect: DOMRect; t: number } | null = null const unsubscribe = press.onPress((p) => { pressed = null for (const row of HIGHLIGHTS) { const host = p.el.closest(row.host) const current = host && activeIn(host, row) if (current && current.length === 1) pressed = { row, rect: current[0].getBoundingClientRect(), t: performance.now() } } }) const record = (host: Element, row: Row) => { const now = activeIn(host, row) last.set(host, now.length === 1 ? now[0] : null) } const recordAll = () => { for (const row of HIGHLIGHTS) document.querySelectorAll(row.host).forEach((host) => record(host, row)) } const land = (host: Element) => { const f = flights.get(host) if (!f) return flights.delete(host) f.anims.forEach((a) => a.cancel()) f.pill.remove() f.restore() } const glide = (host: HTMLElement, from: DOMRect, to: HTMLElement, inactiveColor: string) => { const cs = getComputedStyle(to) const toRect = to.getBoundingClientRect() const distance = Math.hypot(toRect.left - from.left, toRect.top - from.top) const ms = scaled(Math.min(320, Math.max(200, 200 + distance * 0.25)), to) const pill = document.createElement("span") pill.setAttribute("aria-hidden", "true") pill.setAttribute("data-kf-pill", "") Object.assign(pill.style, { position: "absolute", zIndex: "-1", boxSizing: "border-box", pointerEvents: "none", borderRadius: cs.borderRadius, background: cs.backgroundColor, boxShadow: cs.boxShadow, border: `${cs.borderTopWidth} ${cs.borderTopStyle} ${cs.borderTopColor}`, ...inside(host, toRect), }) // The pill paints under the labels: the host becomes its own layer for the length of the flight. const undo: (() => void)[] = [] const set = (prop: "position" | "isolation", value: string) => { if (getComputedStyle(host)[prop] !== (prop === "position" ? "static" : "auto")) return host.style[prop] = value undo.push(() => host.style.removeProperty(prop)) } set("position", "relative") set("isolation", "isolate") host.prepend(pill) // The item keeps its label, in the colour it has at rest, until the pill arrives under it. const bare = { backgroundColor: "transparent", boxShadow: "none", borderColor: "transparent", color: inactiveColor } const anims = [ to.animate([bare, bare], { duration: ms }), pill.animate([inside(host, from), inside(host, toRect)], { duration: ms, easing: easingOf(to) }), ] flights.set(host, { pill, anims, restore: () => undo.forEach((u) => u()) }) anims[1].finished.then( () => land(host), () => {}, ) emitCut({ cut: "highlight", component: (host.getAttribute("data-slot") ?? "highlight").replace(/-content$/, ""), phase: "enter", ms: Math.round(ms) }) } const settle = (host: HTMLElement, row: Row) => { const before = last.get(host) ?? null const now = activeIn(host, row) const after = now.length === 1 ? (now[0] as HTMLElement) : null last.set(host, after) if (!after || before === after) return const recent = pressed && pressed.row === row && performance.now() - pressed.t < 800 ? pressed : null // A brand-new host with nothing pressed before it is a first render, not a change. if (!before && !recent) return const flying = flights.get(host) const from = flying ? flying.pill.getBoundingClientRect() : before?.isConnected ? before.getBoundingClientRect() : recent?.rect pressed = null land(host) if (!from || optedOut(after) || responsesOff()) return const p = press.last(800) // Keyboard and programmatic changes stay instant; only a pointer press inside this host glides. // (The pressed item may have been rebuilt too; the record taken at the press says it was in here.) if (!p || p.kind !== "pointer" || !(recent || host.contains(p.el))) return const to = after.getBoundingClientRect() if (Math.abs(to.left - from.left) < 1 && Math.abs(to.top - from.top) < 1) return if (reducedMotion()) { after.animate([{ opacity: 0.4 }, { opacity: 1 }], { duration: scaled(120, after) }) return } const sibling = [...host.querySelectorAll(row.item)].find((el) => el !== after && !el.matches(row.active)) glide(host, from, after, sibling ? getComputedStyle(sibling).color : getComputedStyle(after).color) } return { match: ITEMS, init: recordAll, added: (el) => { const row = rowOf(el) const host = row && (el.closest(row.host) as HTMLElement | null) if (!row || !host) return // Known host: its items were rebuilt. New host: maybe the whole component was rebuilt on select. dirty.add(host) }, changed: (el, attribute) => { if (!ATTRIBUTES.has(attribute)) return const row = rowOf(el) const host = row && (el.closest(row.host) as HTMLElement | null) if (host) dirty.add(host) }, flush: () => { for (const host of dirty) { const row = HIGHLIGHTS.find((r) => host.matches(r.host)) if (row) settle(host, row) } dirty.clear() }, dispose: unsubscribe, } } 5e:Te46,/** Error: when a field turns invalid after a submit or after leaving it, its box gives one short shake, * like a rejected password, and the error message rises in. Never while someone is typing in it. */ import { emitCut, reducedMotion, scaled } from "../motion" import type { Adapter } from "../observe" import type { PressTracker } from "../press" import { optedOut } from "../state" import { responsesOff } from "./toggle" const INVALID = '[aria-invalid="true"],[data-invalid="true"]' const MESSAGE = '[data-slot="field-error"]' // Shake the box people see: an input inside a group shakes the whole group. const BOX = '[data-slot="input-group"],[data-slot="input-otp"],[data-slot="native-select-wrapper"]' export const SHAKE: Keyframe[] = [ { translate: "0 0" }, { translate: "-3px 0", offset: 0.2 }, { translate: "3px 0", offset: 0.45 }, { translate: "-2px 0", offset: 0.7 }, { translate: "0 0" }, ] export function errorAdapter(press: PressTracker): Adapter { const seen = new WeakMap() const shaking = new WeakMap() // Fields that are invalid right now. A field that drops the attribute altogether no longer matches this // adapter, so each batch re-checks them here; otherwise its next error would look like no change. const invalid = new Set() let ready = false const remember = (el: Element) => { const now = el.matches(INVALID) seen.set(el, now) if (now) invalid.add(el) } /** A submit (pointer or Enter) just happened, or focus has already left the field: blur validation. */ const intended = (el: Element) => { const p = press.last(600) if (p && (p.kind === "pointer" || p.key === "Enter")) return true const focused = document.activeElement return !(focused && (focused === el || el.contains(focused))) } const shake = (el: HTMLElement) => { const box = (el.closest(BOX) as HTMLElement | null) ?? el if (shaking.get(box)?.playState === "running") return const ms = scaled(240, box) shaking.set(box, box.animate(SHAKE, { duration: ms, easing: "ease-out" })) emitCut({ cut: "error", component: box.getAttribute("data-slot") ?? box.tagName.toLowerCase(), phase: "enter", ms: Math.round(ms) }) } return { match: `${INVALID},[aria-invalid],[data-invalid],${MESSAGE}`, init: () => { document.querySelectorAll(`[aria-invalid],[data-invalid]`).forEach(remember) ready = true }, added: (el) => { if (el.matches(MESSAGE)) { if (!ready || optedOut(el) || responsesOff()) return el.animate( reducedMotion() ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 0, translate: "0 -4px" }, { opacity: 1, translate: "0 0" }], { duration: scaled(160, el), easing: "cubic-bezier(0.22, 1, 0.36, 1)" }, ) return } remember(el) }, changed: (el, attribute) => { if (attribute !== "aria-invalid" && attribute !== "data-invalid") return const now = el.matches(INVALID) const was = seen.get(el) ?? false seen.set(el, now) if (now) invalid.add(el) else invalid.delete(el) if (!now || was) return // A field-level flag repeats what its control already says; shake the control only. if (el.matches('[data-slot="field"]') && el.querySelector('[aria-invalid="true"]')) return if (optedOut(el) || responsesOff() || reducedMotion() || !intended(el)) return shake(el) }, flush: () => { for (const el of invalid) { if (el.isConnected && el.matches(INVALID)) continue invalid.delete(el) seen.set(el, false) } }, } } 5f:T9ae,/** Arrival icons: a toast's status icon and an alert dialog's icon play once as they arrive, a beat after * the cut that brings them in. A success tick and an error cross draw themselves, a warning rocks once, * information drops in, and a loading spinner keeps its own spin. */ import { emitCut, reducedMotion, scaled } from "../motion" import { isOutline, punch, redraw } from "../icon" import type { Adapter } from "../observe" import { optedOut } from "../state" import { responsesOff } from "./toggle" const HOSTS = '[data-sonner-toast],[data-slot="toast"],[data-slot="alert-dialog-media"]' /** The status icon: sonner keeps it in [data-icon]; elsewhere it's the first icon outside a button. */ function iconIn(host: Element): SVGElement | null { const sonner = host.querySelector("[data-icon] svg") if (sonner) return sonner as SVGElement return ([...host.querySelectorAll("svg")].find((svg) => !svg.closest("button")) as SVGElement | undefined) ?? null } export function arrivalAdapter(): Adapter { let ready = false // Base UI inserts a dialog in two steps, so the same icon can be reported as added twice. const played = new WeakSet() const play = (host: HTMLElement) => { if (!ready || played.has(host) || optedOut(host) || responsesOff() || reducedMotion()) return played.add(host) const svg = iconIn(host) if (!svg) return const type = host.closest("[data-type]")?.getAttribute("data-type") ?? (host.matches('[data-slot="alert-dialog-media"]') ? "media" : "") if (type === "loading") return const ms = scaled(320, host) const delay = scaled(120, host) svg.style.transformOrigin = "50% 50%" if (type === "warning") { svg.style.transformOrigin = "50% 85%" svg.animate([{ rotate: "0deg" }, { rotate: "-12deg" }, { rotate: "10deg" }, { rotate: "-6deg" }, { rotate: "0deg" }], { duration: ms * 1.3, delay, easing: "ease-out" }) } else if (type === "info") { svg.animate([{ translate: "0 -4px", opacity: 0 }, { translate: "0 0", opacity: 1 }], { duration: ms, delay, easing: "cubic-bezier(0.22, 1, 0.36, 1)", fill: "backwards" }) } else if (isOutline(svg)) redraw(svg, ms, delay) else punch(svg, ms, delay) emitCut({ cut: "icon", component: host.matches('[data-slot="alert-dialog-media"]') ? "alert-dialog" : "toast", phase: "enter", ms: Math.round(ms + delay) }) } return { match: HOSTS, init: () => { ready = true }, added: play, } } 60:Tc4a,/** Arrivals in place: an alert, a combobox chip, an attachment or an avatar's photo that shows up after * the page has loaded eases in instead of popping. Only when it is itself inserted (`{show && }`), * never as part of a whole new page on a route change. An attachment's upload also gets the response it * deserves: a small punch when it's done, the error shake when it fails. */ import { emitCut, reducedMotion, scaled } from "../motion" import type { Adapter } from "../observe" import { optedOut } from "../state" import { SHAKE } from "./error" import { responsesOff } from "./toggle" const ENTER: Record = { alert: [{ opacity: 0, translate: "0 -6px" }, { opacity: 1, translate: "0 0" }], attachment: [{ opacity: 0, scale: "0.96" }, { opacity: 1, scale: "1" }], "combobox-chip": [{ opacity: 0, scale: "0.85" }, { opacity: 1, scale: "1" }], "avatar-image": [{ opacity: 0 }, { opacity: 1 }], } const MATCH = Object.keys(ENTER) .map((s) => `[data-slot="${s}"]`) .join(",") const EASE = "cubic-bezier(0.22, 1, 0.36, 1)" export function appearAdapter(): Adapter { let ready = false const states = new WeakMap() return { match: MATCH, init: () => { document.querySelectorAll('[data-slot="attachment"]').forEach((el) => states.set(el, el.getAttribute("data-state"))) ready = true }, added: (el, root) => { const slot = el.getAttribute("data-slot") ?? "" if (slot === "attachment") states.set(el, el.getAttribute("data-state")) // Part of a bigger insertion (a new page, a remounted list): that arrival isn't this element's change. if (!ready || (root && root !== el) || optedOut(el) || responsesOff()) return const ms = scaled(slot === "avatar-image" ? 200 : 220, el) el.animate(reducedMotion() ? [{ opacity: 0 }, { opacity: 1 }] : ENTER[slot], { duration: ms, easing: EASE }) emitCut({ cut: "appear", component: slot, phase: "enter", ms: Math.round(ms) }) }, changed: (el, attribute) => { if (attribute !== "data-state" || !el.matches('[data-slot="attachment"]')) return const now = el.getAttribute("data-state") const was = states.get(el) ?? null states.set(el, now) if (now === was || optedOut(el) || responsesOff()) return // The content crossfades in every case; the shake and the punch are movement, so reduced motion skips them. el.querySelector('[data-slot="attachment-content"]')?.animate([{ opacity: 0.5 }, { opacity: 1 }], { duration: scaled(160, el), easing: EASE }) if (!reducedMotion()) { if (now === "error") el.animate(SHAKE, { duration: scaled(240, el), easing: "ease-out" }) else if (now === "done" && (was === "uploading" || was === "processing")) { el.querySelector('[data-slot="attachment-media"]')?.animate([{ scale: "1" }, { scale: "1.08", offset: 0.4 }, { scale: "1" }], { duration: scaled(300, el), easing: "ease-out" }) } } emitCut({ cut: now === "error" ? "error" : "appear", component: "attachment", phase: "enter", ms: Math.round(scaled(240, el)) }) }, } } 61:T69e,/** Calendar: a new month slides in from the side you went toward (next from the right, previous from the * left), the way tabs switch to a neighbour. A month stepped with the keyboard (arrow keys, Page Down) * changes instantly. The calendar keeps its grid and replaces the week rows, so the rows slide together. */ import { easingOf, emitCut, reducedMotion, scaled } from "../motion" import type { Adapter } from "../observe" import type { PressTracker } from "../press" import { optedOut } from "../state" import { responsesOff } from "./toggle" const NAV = '[data-slot="calendar"] :is(.rdp-button_previous, .rdp-button_next)' const WEEKS = '[data-slot="calendar"] .rdp-week' export function calendarAdapter(press: PressTracker): Adapter { let pending: { dir: 1 | -1; t: number; told: boolean } | null = null const unsubscribe = press.onPress((p) => { const nav = p.el.closest(NAV) if (!nav || (p.kind === "key" && p.key !== "Enter" && p.key !== " ")) return pending = { dir: nav.matches(".rdp-button_next") ? 1 : -1, t: performance.now(), told: false } }) return { match: WEEKS, added: (el) => { if (!pending || performance.now() - pending.t > 800) return if (optedOut(el) || responsesOff()) return const ms = scaled(260, el) el.animate(reducedMotion() ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 0, translate: `${pending.dir * 16}px 0` }, { opacity: 1, translate: "0 0" }], { duration: ms, easing: easingOf(el), }) if (pending.told) return pending.told = true emitCut({ cut: "j-cut", component: "calendar", phase: "enter", ms: Math.round(ms) }) }, dispose: unsubscribe, } } 62:T648,/** Questionnaire: the next question slides in from the right and the previous one from the left, the way * tabs switch to a neighbour. The question you leave hides at once, so focus never waits for motion. */ import { easingOf, emitCut, reducedMotion, scaled } from "../motion" import type { Adapter } from "../observe" import { optedOut } from "../state" import { responsesOff } from "./toggle" const ROOT = '[data-slot="questionnaire"]' const ITEM = '[data-slot="questionnaire-item"]' export function stepsAdapter(): Adapter { const current = new WeakMap() return { match: ITEM, init: () => document.querySelectorAll(ROOT).forEach((root) => { const active = root.querySelector(`${ITEM}[data-active]`) if (active) current.set(root, active) }), changed: (el, attribute) => { if (attribute !== "data-active" || !el.hasAttribute("data-active")) return const root = el.closest(ROOT) if (!root) return const before = current.get(root) current.set(root, el) if (!before || before === el || optedOut(el) || responsesOff()) return const items = [...root.querySelectorAll(ITEM)] const dir = items.indexOf(el) > items.indexOf(before) ? 1 : -1 const ms = scaled(260, el) el.animate(reducedMotion() ? [{ opacity: 0 }, { opacity: 1 }] : [{ opacity: 0, translate: `${dir * 16}px 0` }, { opacity: 1, translate: "0 0" }], { duration: ms, easing: easingOf(el), }) emitCut({ cut: "j-cut", component: "questionnaire", phase: "enter", ms: Math.round(ms) }) }, } } 63:T64d,/** Motion on an icon's own strokes, shared by the state icons in and by . */ export const STROKES = "path,circle,rect,line,polyline,polygon,ellipse" export function strokesOf(svg: Element): SVGGeometryElement[] { return [...svg.querySelectorAll(STROKES)] } /** Outline icons (lucide, tabler) can redraw their strokes; filled ones (phosphor's fill weight) can't. */ export function isOutline(svg: Element): boolean { return (svg.getAttribute("fill") ?? getComputedStyle(svg).fill) === "none" } /** One stroke draws itself. A pathLength of 1 lets a single dash cover any shape exactly. */ export function draw(el: SVGGeometryElement, duration: number, delay = 0, easing = "cubic-bezier(0.65, 0, 0.35, 1)"): Animation { el.setAttribute("pathLength", "1") el.style.strokeDasharray = "1" const anim = el.animate([{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }], { duration, delay, easing, fill: "backwards" }) const clean = () => { el.style.strokeDasharray = "" el.removeAttribute("pathLength") } anim.finished.then(clean, clean) return anim } /** Every stroke of an icon redraws, one after another. */ export function redraw(svg: Element, duration: number, delay = 0): Animation[] { return strokesOf(svg).map((part, i) => draw(part, duration, delay + i * (duration / 6))) } /** A short scale punch, for icons that can't redraw. */ export function punch(svg: Element, duration: number, delay = 0): Animation { return svg.animate([{ scale: "1" }, { scale: "1.2", offset: 0.4 }, { scale: "1" }], { duration, delay, easing: "ease-out" }) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"components/keyframery/cuts.tsx","content":"$4f","type":"registry:component","target":"components/keyframery/cuts.tsx"},{"path":"components/keyframery/keyframery.css","content":"$50","type":"registry:file","target":"components/keyframery/keyframery.css"},{"path":"lib/keyframery/engine.ts","content":"$51","type":"registry:lib","target":"lib/keyframery/engine.ts"},{"path":"lib/keyframery/state.ts","content":"/** Reads open / closed / active the same way across Base UI and Radix. */\n\nexport const OPEN =\n '[data-state=\"open\"],[data-state=\"delayed-open\"],[data-state=\"instant-open\"],[data-open]:not([data-open=\"false\"])'\nexport const CLOSED = '[data-state=\"closed\"],[data-closed]:not([data-closed=\"false\"])'\nexport const ACTIVE = '[data-state=\"active\"],[data-active]:not([data-active=\"false\"]),[aria-selected=\"true\"]'\n\nexport type Phase = \"open\" | \"closed\"\n\nexport function phaseOf(el: Element): Phase | null {\n if (el.matches(OPEN)) return \"open\"\n if (el.matches(CLOSED)) return \"closed\"\n return null\n}\n\nexport function isActive(el: Element): boolean {\n return el.matches(ACTIVE)\n}\n\n/** True while is disabled, or when this element or an ancestor says data-cut=\"none\". */\nexport function optedOut(el: Element): boolean {\n return !document.documentElement.hasAttribute(\"data-kf\") || el.closest('[data-cut=\"none\"]') !== null\n}\n","type":"registry:lib","target":"lib/keyframery/state.ts"},{"path":"lib/keyframery/motion.ts","content":"$52","type":"registry:lib","target":"lib/keyframery/motion.ts"},{"path":"lib/keyframery/press.ts","content":"$53","type":"registry:lib","target":"lib/keyframery/press.ts"},{"path":"lib/keyframery/aim.ts","content":"$54","type":"registry:lib","target":"lib/keyframery/aim.ts"},{"path":"lib/keyframery/ghost.ts","content":"$55","type":"registry:lib","target":"lib/keyframery/ghost.ts"},{"path":"lib/keyframery/observe.ts","content":"$56","type":"registry:lib","target":"lib/keyframery/observe.ts"},{"path":"lib/keyframery/adapters/overlay.ts","content":"$57","type":"registry:lib","target":"lib/keyframery/adapters/overlay.ts"},{"path":"lib/keyframery/adapters/panel.ts","content":"$58","type":"registry:lib","target":"lib/keyframery/adapters/panel.ts"},{"path":"lib/keyframery/adapters/tabs.ts","content":"$59","type":"registry:lib","target":"lib/keyframery/adapters/tabs.ts"},{"path":"lib/keyframery/adapters/toast.ts","content":"$5a","type":"registry:lib","target":"lib/keyframery/adapters/toast.ts"},{"path":"lib/keyframery/adapters/tuned.ts","content":"$5b","type":"registry:lib","target":"lib/keyframery/adapters/tuned.ts"},{"path":"lib/keyframery/adapters/toggle.ts","content":"$5c","type":"registry:lib","target":"lib/keyframery/adapters/toggle.ts"},{"path":"lib/keyframery/adapters/highlight.ts","content":"$5d","type":"registry:lib","target":"lib/keyframery/adapters/highlight.ts"},{"path":"lib/keyframery/adapters/error.ts","content":"$5e","type":"registry:lib","target":"lib/keyframery/adapters/error.ts"},{"path":"lib/keyframery/adapters/arrival.ts","content":"$5f","type":"registry:lib","target":"lib/keyframery/adapters/arrival.ts"},{"path":"lib/keyframery/adapters/appear.ts","content":"$60","type":"registry:lib","target":"lib/keyframery/adapters/appear.ts"},{"path":"lib/keyframery/adapters/calendar.ts","content":"$61","type":"registry:lib","target":"lib/keyframery/adapters/calendar.ts"},{"path":"lib/keyframery/adapters/steps.ts","content":"$62","type":"registry:lib","target":"lib/keyframery/adapters/steps.ts"},{"path":"lib/keyframery/icon.ts","content":"$63","type":"registry:lib","target":"lib/keyframery/icon.ts"}],"className":"h-[70svh] min-h-80"}]]}]