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[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"] 52:T1813,"use client" /* ValueCut: a value that changes in place (a price, a count, "Pending → Paid") punches in. At rest the value is plain text, so copying, find-in-page, screen readers and crawlers all get it once. While a change plays, a copy split into cells rolls over it, hidden from screen readers, and is removed when it lands. */ import * as React from "react" import { easingOf, emitCut, reducedMotion, scaled } from "@/lib/keyframery/motion" import { optedOut } from "@/lib/keyframery/state" import { changedUnits, formatValue, previousUnit, unitsOf } from "@/lib/keyframery/value" export type ValueCutProps = { value: number | string /** Intl.NumberFormat options (numbers only). */ format?: Intl.NumberFormatOptions locale?: string /** Also announce changes to screen readers (aria-live="polite"). */ announce?: boolean /** Duration multiplier for this value. */ pace?: number /** "none" swaps the value instantly. */ cut?: "punch-in" | "none" className?: string } /** The rolling copy: one clipped cell per unit, laid over the real text while a change plays. */ function rollOf(units: string[]): HTMLSpanElement { const roll = document.createElement("span") roll.setAttribute("aria-hidden", "true") roll.setAttribute("data-kf-roll", "") Object.assign(roll.style, { position: "absolute", insetBlockStart: "0", insetInlineStart: "0", display: "inline-flex", whiteSpace: "pre", pointerEvents: "none", userSelect: "none" }) for (const unit of units) { const cell = document.createElement("span") cell.setAttribute("data-kf-cell", "") Object.assign(cell.style, { position: "relative", display: "inline-block", overflow: "clip" }) const glyph = document.createElement("span") glyph.style.display = "inline-block" glyph.textContent = unit cell.append(glyph) roll.append(cell) } return roll } export function ValueCut({ value, format, locale, announce, pace, cut, className }: ValueCutProps) { const text = formatValue(value, locale, format) const units = unitsOf(value, text) const rowRef = React.useRef(null) const textRef = React.useRef(null) const rollRef = React.useRef(null) const before = React.useRef<{ value: number | string; units: string[]; width: number } | null>(null) React.useLayoutEffect(() => { const row = rowRef.current const shown = textRef.current if (!row || !shown) return const prev = before.current const width = row.getBoundingClientRect().width before.current = { value, units, width } // A change that arrives mid-roll ends the roll in flight; this one starts its own, or none. if (rollRef.current) { rollRef.current.remove() rollRef.current = null shown.style.opacity = "" } if (!prev || prev.units.join("") === units.join("") || optedOut(row) || reducedMotion()) return const numeric = typeof value === "number" && typeof prev.value === "number" const up = numeric ? (value as number) >= (prev.value as number) : true const travel = numeric ? "100%" : "6px" const ms = scaled(300, row) const enterEase = easingOf(row) const exitEase = easingOf(row, "exit", "cubic-bezier(0.4, 0, 1, 1)") const changed = changedUnits(prev.units, units) const roll = rollOf(units) row.append(roll) rollRef.current = roll shown.style.opacity = "0" roll.querySelectorAll(":scope > [data-kf-cell]").forEach((cell, i) => { if (!changed[i]) return ;(cell.firstElementChild as HTMLElement).animate( [ { translate: `0 ${up ? travel : `-${travel}`}`, opacity: 0 }, { translate: "0 0", opacity: 1 }, ], { duration: ms, easing: enterEase }, ) const old = previousUnit(prev.units, units, i) if (old === undefined) return const ghost = document.createElement("span") ghost.textContent = old ghost.setAttribute("aria-hidden", "true") ghost.setAttribute("data-kf-ghost", "") Object.assign(ghost.style, { position: "absolute", inset: "0", whiteSpace: "pre" }) cell.append(ghost) const done = () => ghost.remove() ghost .animate( [ { translate: "0 0", opacity: 1 }, { translate: `0 ${up ? `-${travel}` : travel}`, opacity: 0 }, ], { duration: ms * 0.8, easing: exitEase, fill: "forwards" }, ) .finished.then(done, done) }) if (Math.abs(width - prev.width) > 0.5) row.animate([{ width: `${prev.width}px` }, { width: `${width}px` }], { duration: ms, easing: enterEase }) // The punch peaks at 0.35 with this curve; the theme's steeper entrance curves would make it an instant pop. const punch = row.animate([{ scale: "1" }, { scale: "1.06", offset: 0.35 }, { scale: "1" }], { duration: ms, easing: "ease-out" }) // The real text comes back in the same task that removes the roll, so the hand-over never flashes. const land = () => { roll.remove() if (rollRef.current !== roll) return rollRef.current = null shown.style.opacity = "" } punch.finished.then(land, land) emitCut({ cut: "punch-in", component: "value", phase: "enter", ms: Math.round(ms) }) }, [text]) // eslint-disable-line react-hooks/exhaustive-deps return ( {/* Numbers roll as separate cells, which can't kern or ligate; the text at rest matches them, so nothing shifts at the hand-over. */} {text} ) } 53:T43d,/** ValueCut's pure parts: how a value splits into cells and which cells changed. */ /** Numbers split into one cell per character (digits roll); text is a single cell (it crossfades). */ export function unitsOf(value: number | string, text: string): string[] { return typeof value === "number" ? [...text] : [text] } /** Which of `next`'s cells differ from `prev`, aligned from the right so ones line up with ones. */ export function changedUnits(prev: string[], next: string[]): boolean[] { const offset = next.length - prev.length return next.map((unit, i) => i - offset < 0 || prev[i - offset] !== unit) } /** The unit that sat in the same place-value before, if there was one. */ export function previousUnit(prev: string[], next: string[], i: number): string | undefined { const j = i - (next.length - prev.length) return j < 0 ? undefined : prev[j] } export function formatValue(value: number | string, locale?: string, format?: Intl.NumberFormatOptions): string { return typeof value === "number" ? new Intl.NumberFormat(locale, format).format(value) : value } 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":"@keyframery","registryDependencies":["@keyframery/cuts"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/keyframery/value-cut.tsx","content":"$52","type":"registry:component","target":"components/keyframery/value-cut.tsx"},{"path":"lib/keyframery/value.ts","content":"$53","type":"registry:lib","target":"lib/keyframery/value.ts"}],"className":"h-[70svh] min-h-80"}]]}]