4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T2049,"use client" import * as React from "react" import { cn } from "@/lib/utils" export type SaveBarState = "clean" | "dirty" | "saving" | "saved" | "error" export interface SaveBarProps extends Omit< React.HTMLAttributes, "children" > { /** Whether the form is holding changes nobody has saved yet. */ dirty: boolean /** A rejection is the failed state. Anything else counts as saved. */ onSave: () => void | Promise /** Omit it and no Reset button is drawn. */ onReset?: () => void onSaveError?: (error: unknown) => void message?: string savingMessage?: string savedMessage?: string errorMessage?: string saveLabel?: string resetLabel?: string retryLabel?: string /** Saves on Cmd+S and Ctrl+S while there is something to save. */ shortcut?: boolean /** Asks the browser to confirm a reload or a close while work is unsaved. */ warnOnLeave?: boolean /** The accessible name of the bar. */ label?: string } /** Long enough to cover the check's path once, so it draws rather than jumps. */ const CHECK_LENGTH = 14 export const SaveBar = React.forwardRef( function SaveBar( { className, dirty, errorMessage = "Could not save", label = "Save changes", message = "Unsaved changes", onReset, onSave, onSaveError, resetLabel = "Reset", retryLabel = "Try again", saveLabel = "Save", savedMessage = "Saved", savingMessage = "Saving", shortcut = true, warnOnLeave = true, ...rootProps }, forwardedRef ) { const [status, setStatus] = React.useState< "idle" | "saving" | "saved" | "error" >("idle") const timer = React.useRef | null>(null) React.useEffect( () => () => { if (timer.current) clearTimeout(timer.current) }, [] ) // A failure is worth keeping up only while there is still something to // retry, so a form the host reset takes the message away with it. const state: SaveBarState = status === "saving" ? "saving" : status === "saved" ? "saved" : status === "error" && dirty ? "error" : dirty ? "dirty" : "clean" const shown = state !== "clean" const busy = state === "saving" const save = React.useCallback(async () => { if (timer.current) clearTimeout(timer.current) setStatus("saving") try { await onSave() setStatus("saved") // The confirmation is the reason the bar is still here. Once it has // been read, a clean form has nothing left to say. timer.current = setTimeout(() => setStatus("idle"), 1200) } catch (error) { setStatus("error") onSaveError?.(error) } }, [onSave, onSaveError]) React.useEffect(() => { if (!shortcut || !dirty || busy) return function handleKeyDown(event: KeyboardEvent) { if (!event.metaKey && !event.ctrlKey) return if (event.key.toLowerCase() !== "s") return event.preventDefault() void save() } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [busy, dirty, save, shortcut]) React.useEffect(() => { if (!warnOnLeave || !dirty) return function warn(event: BeforeUnloadEvent) { // preventDefault is the current spec; returnValue is what older // browsers still read the intent from. event.preventDefault() event.returnValue = "" } window.addEventListener("beforeunload", warn) return () => window.removeEventListener("beforeunload", warn) }, [dirty, warnOnLeave]) const text = state === "saving" ? savingMessage : state === "saved" ? savedMessage : state === "error" ? errorMessage : message const action = "min-h-8 rounded-full px-3 text-sm transition-colors duration-150 focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-60 motion-reduce:transition-none" return ( <>

{/* Kept outside the bar, because a live region that was hidden a moment ago is not reliably read when it reappears. */} {shown ? text : ""} ) } ) 4b:["$","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,["$","$L4c",null,{"namespace":"@mischief","registryDependencies":["utils"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/default/save-bar/save-bar.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]