50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 52:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T5494,// Hairline UI · inline-rewrite · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { NumberRoll } from "./number-roll"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * INLINE REWRITE: drag a dial, the paragraph rewrites itself * * dial one thumb on a track of versions (Shorter, Original, * Longer; or Blunt, Neutral, Warm). Drag it, tap the * track or use the arrow keys; its label morphs and * it settles onto the nearest stop with a little throw * rewrite the paragraph changes in place, word by word: the * words both versions share glide to their new places, * the ones that go blur out where they stood, the new * ones rise in one after another and glow for a moment * so you can see what changed. The box eases to its * new height * on demand versions without text are written the first time the * dial settles on them (onRewrite): a spinner opens in * the thumb and a sheen runs over the paragraph until * the new words arrive * count the word count rolls; +added and −cut against the * original roll beside it * ───────────────────────────────────────────────────────── */ export interface RewriteVersion { label: string; /** Leave it out to have onRewrite write it the first time it's chosen. */ text?: string; } export interface RewriteRequest { index: number; label: string; /** The paragraph as it reads now, and the original version. */ current: string; original: string; /** Aborted if the component unmounts first. */ signal: AbortSignal; } export interface InlineRewriteProps extends Omit, "children" | "defaultValue"> { versions: RewriteVersion[]; /** The chosen version's index. */ value?: number; defaultValue?: number; onValueChange?: (index: number) => void; /** The version the counts compare against. Defaults to the one chosen first. */ originalIndex?: number; onRewrite?: (request: RewriteRequest) => Promise; /** The dial's accessible name, e.g. "Length". */ label?: string; /** Let new words glow for a moment after each rewrite. */ highlight?: boolean; } const EASE = "cubic-bezier(0.16,1,0.3,1)"; const THROW = "cubic-bezier(0.34,1.36,0.64,1)"; const SHEEN = "[mask-image:linear-gradient(90deg,rgb(0_0_0/0.4)_35%,#000_50%,rgb(0_0_0/0.4)_65%)] [mask-size:200%_100%] animate-[ui-sheen_1.4s_linear_infinite] motion-reduce:animate-none motion-reduce:[mask-image:none]"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); const split = (text: string) => text.split(/\s+/).filter(Boolean); const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n)); /** Longest common subsequence table over words: dp[i][j] is the match length of a[i..] and b[j..]. */ function table(a: string[], b: string[]) { const dp = Array.from({ length: a.length + 1 }, () => new Uint16Array(b.length + 1)); for (let i = a.length - 1; i >= 0; i--) for (let j = b.length - 1; j >= 0; j--) dp[i][j] = a[i] === b[j] ? dp[i + 1][j + 1] + 1 : Math.max(dp[i + 1][j], dp[i][j + 1]); return dp; } type Word = { key: number; text: string }; type Leaving = Word & { x: number; y: number; batch: number }; /** Keep the words two texts share (and their keys); everything else is new. */ function morphWords(previous: Word[], next: string[], nextKey: () => number): Word[] { const a = previous.map((w) => w.text); const dp = table(a, next); const out: Word[] = []; let i = 0; let j = 0; while (j < next.length) { if (i < a.length && a[i] === next[j]) { out.push(previous[i]); i++; j++; } else if (i < a.length && dp[i + 1][j] >= dp[i][j + 1]) i++; else out.push({ key: nextKey(), text: next[j++] }); } return out; } /** The paragraph: words as their own boxes so each can move, leave or arrive. */ function Words({ text, reduced, highlight, className }: { text: string; reduced: boolean; highlight: boolean; className: string }) { const boxRef = React.useRef(null); const seq = React.useRef(1_000_000); // above the first render's keys const [words, setWords] = React.useState(() => split(text).map((t, i) => ({ key: i + 1, text: t }))); const [leaving, setLeaving] = React.useState([]); const shown = React.useRef(text); const flip = React.useRef<{ first: Map; height: number } | null>(null); const batch = React.useRef(0); // Before the new words render: note where every word is, and keep the leaving ones where they stood. React.useLayoutEffect(() => { if (text === shown.current) return; shown.current = text; const next = morphWords(words, split(text), () => ++seq.current); const box = boxRef.current; if (!box || reduced) { setWords(next); setLeaving([]); return; } const b = box.getBoundingClientRect(); const first = new Map(); box.querySelectorAll("[data-k]").forEach((el) => { // Undo the last glow's reach over the spaces (it never moved anything) so boxes are just the words. el.style.marginLeft = el.style.paddingLeft = el.style.borderRadius = ""; first.set(Number(el.dataset.k), el.getBoundingClientRect()); }); const keep = new Set(next.map((w) => w.key)); const id = ++batch.current; const gone: Leaving[] = []; for (const w of words) { const r = first.get(w.key); if (!keep.has(w.key) && r) gone.push({ ...w, x: r.left - b.left, y: r.top - b.top, batch: id }); } flip.current = { first, height: b.height }; setWords(next); if (gone.length) { setLeaving((l) => [...l, ...gone]); window.setTimeout(() => setLeaving((l) => l.filter((w) => w.batch !== id)), 320); } }, [text, reduced, words]); // After: glide the kept words from where they were, raise the new ones, blur the leaving ones away. React.useLayoutEffect(() => { const f = flip.current; const box = boxRef.current; if (!f || !box) return; flip.current = null; const els = Array.from(box.querySelectorAll("[data-k]")); box.getAnimations().forEach((a) => a.cancel()); els.forEach((el) => el.getAnimations().forEach((a) => a.cancel())); const height = box.getBoundingClientRect().height; const rects = els.map((el) => el.getBoundingClientRect()); if (Math.abs(height - f.height) > 0.5) box.animate([{ height: `${f.height}px` }, { height: `${height}px` }], { duration: 480, easing: EASE }); const primary = highlight ? getComputedStyle(box).getPropertyValue("--primary").trim() : ""; const glow = primary ? `color-mix(in oklab, ${primary} 16%, transparent)` : "rgb(0 0 0 / 0.06)"; const isNew = els.map((el) => !f.first.has(Number(el.dataset.k))); const sameLine = (i: number, j: number) => Math.abs(rects[i].top - rects[j].top) < 2; let fresh = 0; els.forEach((el, i) => { const was = f.first.get(Number(el.dataset.k)); if (was) { const dx = was.left - rects[i].left; const dy = was.top - rects[i].top; if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) el.animate([{ transform: `translate(${dx}px, ${dy}px)` }, { transform: "none" }], { duration: 480, easing: EASE }); return; } const delay = Math.min(90 + fresh++ * 14, 420); el.animate( [ { opacity: 0, transform: "translateY(0.35em)", filter: "blur(4px)" }, { opacity: 1, transform: "none", filter: "blur(0px)" }, ], { duration: 380, delay, easing: EASE, fill: "backwards" }, ); if (!highlight) return; // New words side by side glow as one run: reach back over the space between them, round only the run's ends. const joinsBefore = i > 0 && isNew[i - 1] && sameLine(i - 1, i); const joinsAfter = i < els.length - 1 && isNew[i + 1] && sameLine(i, i + 1); if (joinsBefore) { const gap = Math.max(0, rects[i].left - rects[i - 1].right); el.style.marginLeft = `${-gap}px`; el.style.paddingLeft = `${gap}px`; } el.style.borderRadius = `${joinsBefore ? 0 : 4}px ${joinsAfter ? 0 : 4}px ${joinsAfter ? 0 : 4}px ${joinsBefore ? 0 : 4}px`; el.animate([{ backgroundColor: glow }, { backgroundColor: glow, offset: 0.35 }, { backgroundColor: "transparent" }], { duration: 1800, delay, easing: "ease-out", fill: "backwards", }); }); box.querySelectorAll("[data-leave]:not([data-out])").forEach((el) => { el.dataset.out = ""; el.animate( [ { opacity: 1, transform: "none", filter: "blur(0px)" }, { opacity: 0, transform: "translateY(-0.2em) scale(0.96)", filter: "blur(4px)" }, ], { duration: 240, easing: EASE, fill: "forwards" }, ); }); }, [words, highlight]); return (

{words.map((w, i) => ( {i > 0 && " "} {w.text} ))} {leaving.map((w) => ( ))}

); } /** The dial: stops on a track, one thumb that follows the pointer and settles on the nearest stop. */ function Dial({ labels, index, busy, label, reduced, onMove, }: { labels: string[]; index: number; busy: boolean; label: string; reduced: boolean; onMove: (index: number, settled: boolean) => void; }) { const trackRef = React.useRef(null); const thumbRef = React.useRef(null); const measureRef = React.useRef(null); const [size, setSize] = React.useState({ width: 0, pad: 48 }); const [ready, setReady] = React.useState(false); const [drag, setDrag] = React.useState(null); const live = React.useRef({ index, drag: null as number | null }); live.current = { index, drag }; const n = labels.length; const key = labels.join("|"); // Stops sit far enough in from the ends that the widest label never leaves the track. React.useLayoutEffect(() => { const track = trackRef.current; if (!track) return; const measure = () => { const widest = Math.max(0, ...Array.from(measureRef.current?.children ?? []).map((c) => (c as HTMLElement).offsetWidth)); setSize({ width: track.clientWidth, pad: widest / 2 + 4 }); }; measure(); // Only glide once the thumb has been placed, so it doesn't fly in from the edge. const frame = requestAnimationFrame(() => setReady(true)); const observer = new ResizeObserver(measure); observer.observe(track); return () => { cancelAnimationFrame(frame); observer.disconnect(); }; }, [key]); const span = Math.max(1, size.width - size.pad * 2); const stopX = (i: number) => (n < 2 ? size.width / 2 : size.pad + (i * span) / (n - 1)); const nearest = (x: number) => (n < 2 ? 0 : clamp(Math.round(((x - size.pad) / span) * (n - 1)), 0, n - 1)); const x = drag === null ? stopX(index) : clamp(drag, size.pad, size.width - size.pad); const at = (e: React.PointerEvent) => e.clientX - (trackRef.current?.getBoundingClientRect().left ?? 0); const follow = (px: number, settled: boolean) => { const i = nearest(px); if (i !== live.current.index || settled) onMove(i, settled); }; const onKey = (e: React.KeyboardEvent) => { const steps: Record = { ArrowLeft: -1, ArrowDown: -1, ArrowRight: 1, ArrowUp: 1 }; let next: number | null = null; if (e.key in steps) next = clamp(index + steps[e.key], 0, n - 1); if (e.key === "Home") next = 0; if (e.key === "End") next = n - 1; if (next === null) return; e.preventDefault(); if (next !== index) onMove(next, true); }; return (

{ if (e.button !== 0) return; e.currentTarget.setPointerCapture(e.pointerId); const px = at(e); setDrag(px); follow(px, false); thumbRef.current?.focus({ preventScroll: true }); }} onPointerMove={(e) => { if (live.current.drag === null) return; const px = at(e); setDrag(px); follow(px, false); }} onPointerUp={() => { // Settle where the pointer last was; some touch screens report the lift-off point as 0. const px = live.current.drag; if (px === null) return; setDrag(null); follow(px, true); }} onPointerCancel={() => { if (live.current.drag === null) return; setDrag(null); onMove(live.current.index, true); }} className="relative h-10 w-full cursor-pointer touch-pan-y select-none rounded-full border border-border bg-muted/40" > {size.width > 0 && labels.map((l, i) => (

); } export function InlineRewrite({ versions, value, defaultValue = 0, onValueChange, originalIndex, onRewrite, label = "Rewrite", highlight = true, className = "", ...props }: InlineRewriteProps) { const reduced = useReducedMotion(); const [own, setOwn] = React.useState(defaultValue); const index = clamp(value ?? own, 0, versions.length - 1); const [first] = React.useState(index); const original = originalIndex ?? first; const [made, setMade] = React.useState>({}); const textAt = (i: number) => versions[i]?.text ?? made[i]; const [shown, setShown] = React.useState(() => (textAt(index) !== undefined ? index : original)); const [settled, setSettled] = React.useState(true); const [busy, setBusy] = React.useState(null); const [failed, setFailed] = React.useState(false); const inflight = React.useRef(new Set()); const controllers = React.useRef(new Set()); const latest = React.useRef({ shown, original, value, onValueChange, onRewrite, versions, made }); latest.current = { shown, original, value, onValueChange, onRewrite, versions, made }; const choose = (i: number, done: boolean) => { setSettled(done); if (i === index) return; setFailed(false); if (value === undefined) setOwn(i); onValueChange?.(i); }; // Show the chosen version as soon as it has words; write it first if it has none (once the dial settles). React.useEffect(() => { if (textAt(index) !== undefined) { setShown(index); return; } const { onRewrite: rewrite } = latest.current; if (!settled || !rewrite || inflight.current.has(index)) return; const i = index; const controller = new AbortController(); controllers.current.add(controller); inflight.current.add(i); setBusy(i); setFailed(false); const at = (n: number) => latest.current.versions[n]?.text ?? latest.current.made[n] ?? ""; rewrite({ index: i, label: versions[i].label, current: at(latest.current.shown), original: at(latest.current.original), signal: controller.signal }) .then((t) => { if (!controller.signal.aborted) setMade((m) => ({ ...m, [i]: t })); }) .catch(() => { if (controller.signal.aborted) return; // It didn't work: the dial goes back to what the paragraph says. setFailed(true); const back = latest.current.shown; if (latest.current.value === undefined) setOwn(back); latest.current.onValueChange?.(back); }) .finally(() => { inflight.current.delete(i); controllers.current.delete(controller); setBusy((b) => (b === i ? null : b)); }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [index, settled, made, versions]); React.useEffect(() => { if (!failed) return; const timer = window.setTimeout(() => setFailed(false), 4000); return () => window.clearTimeout(timer); }, [failed]); React.useEffect(() => { const all = controllers.current; return () => all.forEach((c) => c.abort()); }, []); const words = split(textAt(shown) ?? ""); const base = split(textAt(original) ?? ""); const common = React.useMemo(() => table(base, words)[0][0], [base.join(" "), words.join(" ")]); // eslint-disable-line react-hooks/exhaustive-deps const added = words.length - common; const cut = base.length - common; const working = busy !== null && busy === index; const status = failed ? "Couldn’t rewrite it" : working ? "Rewriting" : ""; return (

v.label)} index={index} busy={working} label={label} reduced={reduced} onMove={choose} />

{words.length === 1 ? "word" : "words"}

{failed ? "Couldn’t rewrite it. Try again." : `${versions[shown]?.label ?? ""}, ${words.length} words`}

); } 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":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-sheen {\n\tfrom {\n\t\tmask-position: 150% 0;\n\t}\n\tto {\n\t\tmask-position: -50% 0;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/inline-rewrite.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]