4b: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"] 4c: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"] 4d:T3b8d,"use client" import { zodResolver } from "@hookform/resolvers/zod" import { Children, isValidElement, useCallback, useEffect, useMemo, useRef, useState, type CSSProperties, type ReactNode, } from "react" import { FormProvider, useForm, useWatch, type DefaultValues, type FieldErrors, type FieldPath, type FieldValues, } from "react-hook-form" import { z } from "zod" export interface FormSubmissionResult { success: boolean message?: string fieldErrors?: Record formError?: string } export interface FormAutosaveConfig { onSave: (values: TValues) => Promise delay?: number enabled?: boolean } export interface FormWorkflowProps< TInput extends FieldValues, TOutput extends FieldValues = TInput, > { schema: z.ZodType defaultValues: TInput onSubmit: (values: TOutput) => Promise children: ReactNode mode?: "single" | "multi-step" autosave?: FormAutosaveConfig warnOnUnsavedChanges?: boolean successBehavior?: "message" | "reset" | "preserve" } export interface FormWorkflowStepProps { title: string children: ReactNode description?: string fields?: string[] } type AutosaveStatus = "idle" | "saving" | "saved" | "error" type SubmissionStatus = "idle" | "submitting" | "success" | "error" function fieldErrorEntries(errors: FieldErrors): Array<[string, string]> { const entries: Array<[string, string]> = [] const visit = (value: unknown, path: string) => { if (!value || typeof value !== "object") return const candidate = value as Record if (typeof candidate.message === "string") { entries.push([path, candidate.message]) return } Object.entries(candidate).forEach(([key, child]) => { if (key === "ref" || key === "type" || key === "types") return visit(child, path ? `${path}.${key}` : key) }) } Object.entries(errors).forEach(([key, value]) => visit(value, key)) return entries } export function FormWorkflowStep({ title, description, children, }: FormWorkflowStepProps) { return (

{title} {description ? (

{description}

) : null} {children}

) } function getStepFields(step: ReactNode) { if (!isValidElement(step)) return [] return step.props.fields ?? [] } function getStepTitle(step: ReactNode, index: number) { if (!isValidElement(step)) return `Step ${index + 1}` return step.props.title } export function FormWorkflow< TInput extends FieldValues, TOutput extends FieldValues = TInput, >({ schema, defaultValues, onSubmit, children, mode = "single", autosave, warnOnUnsavedChanges = false, successBehavior = "message", }: FormWorkflowProps) { const form = useForm({ resolver: zodResolver(schema), defaultValues: defaultValues as DefaultValues, shouldFocusError: false, }) const { control, formState, getValues, handleSubmit, reset, setError, trigger, } = form const values = useWatch({ control }) const steps = useMemo(() => Children.toArray(children), [children]) const [currentStep, setCurrentStep] = useState(0) const [formError, setFormError] = useState() const [successMessage, setSuccessMessage] = useState() const [submissionStatus, setSubmissionStatus] = useState("idle") const [autosaveStatus, setAutosaveStatus] = useState("idle") const [autosaveError, setAutosaveError] = useState() const summaryRef = useRef(null) const submitInFlight = useRef(false) const autosaveInFlight = useRef(false) const autosaveTimer = useRef(undefined) const mounted = useRef(false) const isMultiStep = mode === "multi-step" && steps.length > 1 const visibleContent = isMultiStep ? steps[currentStep] : children const errorEntries = fieldErrorEntries(formState.errors) const hasErrors = Boolean(formError) || errorEntries.length > 0 const focusSummary = useCallback(() => { window.requestAnimationFrame(() => summaryRef.current?.focus()) }, []) const clearMessages = () => { setFormError(undefined) setSuccessMessage(undefined) setSubmissionStatus("idle") } const applySubmissionFailure = useCallback( (result: FormSubmissionResult) => { Object.entries(result.fieldErrors ?? {}).forEach(([field, message]) => setError(field as FieldPath, { type: "server", message, }), ) setFormError( result.formError ?? (Object.keys(result.fieldErrors ?? {}).length === 0 ? (result.message ?? "The form could not be saved.") : undefined), ) setSubmissionStatus("error") focusSummary() }, [focusSummary, setError], ) const submitValid = async (submittedValues: TOutput) => { if (submitInFlight.current) return submitInFlight.current = true setSubmissionStatus("submitting") setFormError(undefined) setSuccessMessage(undefined) try { const result = await onSubmit(submittedValues) if (!result.success) { applySubmissionFailure(result) return } const message = result.message ?? "Changes saved." setSuccessMessage(message) setSubmissionStatus("success") if (successBehavior === "reset") { reset(defaultValues as DefaultValues) setCurrentStep(0) } else { reset(getValues() as DefaultValues, { keepValues: true }) } } catch { applySubmissionFailure({ success: false, formError: "The form could not be saved. Try again.", }) } finally { submitInFlight.current = false } } const submitInvalid = (errors: FieldErrors) => { setSubmissionStatus("error") setFormError(undefined) if (isMultiStep) { const firstError = fieldErrorEntries(errors)[0]?.[0] const errorStep = steps.findIndex((step) => getStepFields(step).some( (field) => firstError === field || firstError?.startsWith(`${field}.`), ), ) if (errorStep >= 0) setCurrentStep(errorStep) } focusSummary() } const saveDraft = useCallback(async () => { if ( !autosave || autosave.enabled === false || autosaveInFlight.current || submitInFlight.current ) { return } const parsed = schema.safeParse(getValues()) if (!parsed.success) return autosaveInFlight.current = true setAutosaveStatus("saving") setAutosaveError(undefined) try { const result = await autosave.onSave(parsed.data) if (result && !result.success) { setAutosaveStatus("error") setAutosaveError( result.formError ?? result.message ?? "Draft could not be saved.", ) return } setAutosaveStatus("saved") reset(getValues() as DefaultValues, { keepValues: true }) } catch { setAutosaveStatus("error") setAutosaveError("Draft could not be saved.") } finally { autosaveInFlight.current = false } }, [autosave, getValues, reset, schema]) useEffect(() => { if (!mounted.current) { mounted.current = true return } if ( !autosave || autosave.enabled === false || !formState.isDirty || formState.isSubmitting ) { return } if (autosaveTimer.current) window.clearTimeout(autosaveTimer.current) autosaveTimer.current = window.setTimeout( () => void saveDraft(), autosave.delay ?? 800, ) return () => { if (autosaveTimer.current) window.clearTimeout(autosaveTimer.current) } }, [autosave, formState.isDirty, formState.isSubmitting, saveDraft, values]) useEffect(() => { if (!warnOnUnsavedChanges || !formState.isDirty) return const beforeUnload = (event: BeforeUnloadEvent) => { event.preventDefault() event.returnValue = "" } const click = (event: MouseEvent) => { const target = event.target if (!(target instanceof Element)) return const anchor = target.closest("a[href]") if (!anchor || anchor.getAttribute("target") === "_blank") return if (!window.confirm("You have unsaved changes. Leave this page?")) { event.preventDefault() event.stopPropagation() } } window.addEventListener("beforeunload", beforeUnload) document.addEventListener("click", click, true) return () => { window.removeEventListener("beforeunload", beforeUnload) document.removeEventListener("click", click, true) } }, [formState.isDirty, warnOnUnsavedChanges]) const nextStep = async () => { const fields = getStepFields(steps[currentStep]) as FieldPath[] const valid = fields.length === 0 ? true : await trigger(fields) if (!valid) { setSubmissionStatus("error") focusSummary() return } clearMessages() setCurrentStep((step) => Math.min(step + 1, steps.length - 1)) } return (

void handleSubmit(submitValid, submitInvalid)(event) } > {isMultiStep ? (

Step {currentStep + 1} of {steps.length}

{getStepTitle(step, index)} {index === currentStep ? ", current step" : ""}

) : null} {hasErrors ? (

Check the form

{formError ? (

{formError}

) : null} {errorEntries.length > 0 ? (

) : null}

) : null} {visibleContent} {autosave ? (

{autosaveStatus === "saving" ? "Saving draft…" : autosaveStatus === "saved" ? "Draft saved" : autosaveStatus === "error" ? autosaveError : "Changes save automatically"} {autosaveStatus === "error" ? ( ) : null}

) : null} {submissionStatus === "success" && successMessage ? (

{successMessage}

) : null}

{isMultiStep && currentStep > 0 ? ( ) : ( )} {isMultiStep && currentStep < steps.length - 1 ? ( ) : ( )}

) } 4a:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@hookform/resolvers@^5.8.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hookform%2Fresolvers","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@hookform/resolvers@^5.8.0"}]]}]}],["$","li","react-hook-form@^7.85.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-hook-form","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-hook-form@^7.85.0"}]]}]}],["$","li","zod@^4.4.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/zod","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"zod@^4.4.3"}]]}]}]]}],["$","$L4b",null,{"namespace":"@elsecase","registryDependencies":[]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/form-workflow/form-workflow.tsx","content":"$4d","type":"registry:component","target":"components/form-workflow.tsx"}],"className":"h-[70svh] min-h-80"}]]}]