62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T50d3,"use client"; import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; /** * The step engine for Eased onboarding flows: which step is open, which way the last move * went, what has been entered, and whether the open step may continue. Headless: the * Onboarding Shell draws it, but any layout can. */ /** 1 after next, skip or a jump forward; -1 after back or a jump back; 0 before the first move. */ export type StepDirection = 1 | -1 | 0; export type StepStatus = "complete" | "current" | "skipped" | "upcoming"; export type StepDef = { id: Id; /** The step's heading, also announced on arrival: "Step 2 of 4: Pick your URL". */ title: string; /** One line under the heading. */ description?: string; /** The primary button's label on this step. Default: the shell's "Continue", or its finish label on the last step. */ action?: string; /** * Whether the step may continue. Default true. Called on every render, so it can read * `data` or close over your own state. */ valid?: (data: Data) => boolean; /** Offer Skip on this step. */ optional?: boolean; /** Include the step only while this returns true: branching on an earlier answer. */ when?: (data: Data) => boolean; /** * Runs on Continue, before the flow moves. Return a promise to hold the step busy while it * runs; throw (or reject) to stay, with the error on `error`. */ onNext?: (data: Data) => void | Promise; }; /** * Where progress is saved. `get` and `set` may return promises (a server-backed resume). Every * call is wrapped in try/catch, so a full, blocked or offline store never breaks the flow. */ export type StepsStorage = { get: (key: string) => string | null | Promise; set: (key: string, value: string) => void | Promise; remove: (key: string) => void | Promise; }; export type StepsPersist = { /** The storage key, e.g. `"lumen:workspace-setup"`. */ key: string; /** Default `webStorage("local")`. */ storage?: StepsStorage; /** Bump when `Data` changes shape. Default 1. */ version?: number; /** Turns data saved by an older `version` into today's shape; return null to drop it. Without it, other versions are ignored. */ migrate?: (saved: unknown, from: number) => Data | null; /** * Forget the save once the flow completes. Default true: a finished wizard starts fresh. Set * false for a checklist, whose done state must survive a reload: `completed` is saved and restored. */ clearOnComplete?: boolean; }; export type StepsOptions = StepDef> = { /** The steps in order. Extra fields on your step type (a tour's `target`, a quiz's `options`) come back typed on `step`. */ steps: readonly S[]; /** What the flow starts with, what `reset()` returns to, and what a saved resume is merged over. */ initialData: Data; /** Controlled data, e.g. from a form library or a parent that chains flows. Pair with `onDataChange`. */ data?: Data; onDataChange?: (data: Data) => void; /** Open on this step instead of the first. */ initialStep?: Id; /** * Runs on Continue from the last step, or on `finish()`. Return a promise to hold the flow * busy until it settles; a rejection keeps it open with the error on `error`. */ onComplete?: (data: Data) => void | Promise; onStepChange?: (id: Id, direction: StepDirection) => void; /** Save progress so a reload resumes where the person left off. Off by default; cleared on completion and reset. */ persist?: StepsPersist; }; export type Steps = StepDef> = { /** The steps in play: `when` applied. */ steps: readonly S[]; step: S; id: Id; /** 0-based position in `steps`. */ index: number; count: number; direction: StepDirection; data: Data; /** Merge a patch, or map the data. Safe to call several times in one tick. */ setData: (update: Partial | ((data: Data) => Data)) => void; /** Valid and not busy. */ canNext: boolean; canBack: boolean; canSkip: boolean; isFirst: boolean; isLast: boolean; /** An `onNext` or `onComplete` promise is running. */ busy: boolean; /** What the last `onNext` or `onComplete` threw. Cleared on the next move. */ error: unknown; completed: boolean; /** Steps marked complete, by Continue or `mark`, in that order. */ visited: readonly Id[]; skipped: readonly Id[]; statusOf: (id: Id) => StepStatus; /** Continue: validates, runs `onNext`, then moves (or completes on the last step). Resolves true when it moved. */ next: () => Promise; back: () => void; /** Move on without validating; only on optional steps. */ skip: () => void; /** Jump to a step in play, forward or back. */ goTo: (id: Id) => void; /** Set a step's status without moving: a checklist done out of order. */ mark: (id: Id, status: "complete" | "skipped" | "upcoming") => void; /** Run `onComplete` from any step and complete: a checklist's "all done". Resolves true when it completed. */ finish: () => Promise; /** Back to the first step and `initialData`, forget saved progress, and drop any async step still running. */ reset: () => void; /** "Step 2 of 4: Pick your URL": for a polite live region. */ announcement: string; }; type State = { id: Id; direction: StepDirection; data: Data; visited: Id[]; skipped: Id[]; busy: boolean; error: unknown; completed: boolean; }; type Saved = { v: number; id: Id; data: unknown; visited: Id[]; skipped: Id[]; completed?: boolean }; /** The fields a save is made of: a change to any of them schedules one. */ type Persisted = { id: Id; data: Data; visited: readonly Id[]; skipped: readonly Id[]; completed: boolean }; /** Whether `next` differs from `prev` in anything a save holds. */ export function persistedChange(prev: Persisted, next: Persisted) { return next.data !== prev.data || next.id !== prev.id || next.completed !== prev.completed || next.visited !== prev.visited || next.skipped !== prev.skipped; } /** What to store for `state`: the JSON to save, or null to remove the save (a completed wizard). */ export function serializeSteps(state: Persisted, persist: StepsPersist): string | null { const keepDone = persist.clearOnComplete === false; if (state.completed && !keepDone) return null; const saved: Saved = { v: persist.version ?? 1, id: state.id, data: state.data, visited: [...state.visited], skipped: [...state.skipped] }; if (keepDone) saved.completed = state.completed; return JSON.stringify(saved); } /** localStorage or sessionStorage behind try/catch: private windows and full quotas read as empty. */ export function webStorage(kind: "local" | "session" = "local"): StepsStorage { const store = () => (kind === "local" ? window.localStorage : window.sessionStorage); return { get: (key) => { try { return store().getItem(key); } catch { return null; } }, set: (key, value) => { try { store().setItem(key, value); } catch {} }, remove: (key) => { try { store().removeItem(key); } catch {} }, }; } const append = (list: Id[], id: Id) => (list.includes(id) ? list : [...list, id]); const without = (list: Id[], id: Id) => list.filter((x) => x !== id); /** The steps in play for `data`. The open step always stays in, so an answer never pulls the floor away. */ function inPlay>(steps: readonly S[], data: Data, open: Id) { return steps.filter((s) => s.id === open || !s.when || s.when(data)); } /** Calls a storage method, sync or async, and swallows whatever it throws or rejects with. */ function quietly(run: () => unknown) { try { Promise.resolve(run()).catch(() => {}); } catch {} } const isRecord = (v: unknown): v is Record => typeof v === "object" && v !== null && !Array.isArray(v); /** * A saved session as today's state, or null: merged over `initialData`, migrated across * versions, unknown ids dropped; `completed` only with `clearOnComplete: false`. */ export function restoreSteps(raw: string | null, persist: StepsPersist, steps: readonly StepDef[], initialData: Data) { if (!raw) return null; let saved: Saved; try { saved = JSON.parse(raw) as Saved; } catch { return null; } const version = persist.version ?? 1; const data = saved.v === version ? saved.data : persist.migrate ? persist.migrate(saved.data, saved.v) : null; if (data === null || data === undefined || !steps.some((s) => s.id === saved.id)) return null; const known = (list: unknown) => (Array.isArray(list) ? (list as Id[]).filter((id) => steps.some((s) => s.id === id)) : []); return { id: saved.id, data: (isRecord(initialData) && isRecord(data) ? { ...initialData, ...data } : data) as Data, visited: known(saved.visited), skipped: known(saved.skipped), completed: persist.clearOnComplete === false && saved.completed === true, }; } const fresh = (id: Id, data: Data): State => ({ id, direction: 0, data, visited: [], skipped: [], busy: false, error: undefined, completed: false }); type PersistContext = { persist?: StepsPersist; /** The live state, the step list and the defaults, read when saving or resuming. */ read: () => { state: State; steps: readonly StepDef[]; initialData: Data; touched: boolean }; apply: (s: Partial>) => void; }; /** Saves progress 300ms after the last change (not on every keystroke), resumes once after hydration, and flushes on unmount. */ function usePersistence(context: PersistContext) { const ctx = useRef(context); useLayoutEffect(() => { ctx.current = context; }); const timer = useRef(undefined); const write = useCallback(() => { window.clearTimeout(timer.current); timer.current = undefined; const p = ctx.current.persist; if (!p) return; const storage = p.storage ?? webStorage(); const json = serializeSteps(ctx.current.read().state, p); quietly(() => (json === null ? storage.remove(p.key) : storage.set(p.key, json))); }, []); const schedule = useCallback( (now = false) => { if (!ctx.current.persist) return; window.clearTimeout(timer.current); if (now) return write(); timer.current = window.setTimeout(write, 300); }, [write], ); const forget = useCallback(() => { window.clearTimeout(timer.current); timer.current = undefined; const p = ctx.current.persist; if (p) quietly(() => (p.storage ?? webStorage()).remove(p.key)); }, []); const key = context.persist?.key; useEffect(() => { const p = ctx.current.persist; if (!p) return; let live = true; let pending: Promise | string | null = null; try { pending = (p.storage ?? webStorage()).get(p.key); } catch {} Promise.resolve(pending) .catch(() => null) .then((raw) => { const now = ctx.current.read(); // Someone typed or moved before an async store answered: their session wins. if (!live || now.touched) return; const saved = restoreSteps(raw, p, now.steps, now.initialData); if (saved) ctx.current.apply({ ...saved, direction: 0 }); }); return () => { live = false; if (timer.current !== undefined) write(); }; }, [key, write]); return { schedule, forget }; } /** * The step machine. Keep everything a step shows a function of `data`, and `back`, `goTo` * and a saved resume all agree with no extra state. * * const flow = useSteps({ steps, initialData: { name: "" }, onComplete: create }); * flow.setData({ name }); flow.next(); flow.direction; flow.announcement */ export function useSteps = StepDef>(options: StepsOptions): Steps { const { steps: allSteps, initialData, initialStep } = options; const controlled = options.data !== undefined; const [state, setState] = useState>(() => fresh(initialStep ?? allSteps[0].id, options.data ?? initialData)); // The latest state and options, for async moves and scripted calls in the same tick. const latest = useRef(state); const opts = useRef(options as StepsOptions>); // Bumped by reset(): an await that comes back to another generation does nothing. const gen = useRef(0); const touched = useRef(false); useLayoutEffect(() => { opts.current = options as StepsOptions>; if (controlled && latest.current.data !== options.data) latest.current = { ...latest.current, data: options.data as Data }; }); const applyRef = useRef<(s: Partial>) => void>(() => {}); const { schedule, forget } = usePersistence({ persist: options.persist, read: () => ({ state: latest.current, steps: opts.current.steps, initialData: opts.current.initialData, touched: touched.current }), apply: (s) => applyRef.current(s), }); const commit = useCallback( (update: (s: State) => State) => { const prev = latest.current; const next = update(prev); if (next === prev) return; latest.current = next; setState(next); if (next.data !== prev.data) opts.current.onDataChange?.(next.data); // Visited and skipped count too: a checklist's mark() changes nothing else. if (persistedChange(prev, next)) schedule(next.completed); if (next.id !== prev.id) opts.current.onStepChange?.(next.id, next.direction); }, [schedule], ); useLayoutEffect(() => { applyRef.current = (s) => commit((x) => ({ ...x, ...s })); }, [commit]); // Any change by the person or a script, before an async resume lands, keeps their session. const act = useCallback( (update: (s: State) => State) => { touched.current = true; commit(update); }, [commit], ); const play = useCallback(() => inPlay(opts.current.steps, latest.current.data, latest.current.id), []); const neighbour = useCallback( (offset: 1 | -1) => { const list = play(); return list[list.findIndex((x) => x.id === latest.current.id) + offset]; }, [play], ); const move = useCallback( (to: Id, mark?: { visited?: Id; skipped?: Id }) => act((s) => { const list = inPlay(opts.current.steps, s.data, s.id); const from = list.findIndex((x) => x.id === s.id); const target = list.findIndex((x) => x.id === to); if (target === -1 || to === s.id) return s; const done = mark?.visited; const passed = mark?.skipped; const visited = done ? append(s.visited, done) : passed ? without(s.visited, passed) : s.visited; const skipped = passed ? append(s.skipped, passed) : done ? without(s.skipped, done) : s.skipped; return { ...s, id: to, direction: target > from ? 1 : -1, visited, skipped, error: undefined }; }), [act], ); /** Runs `work` with the flow busy. False when it threw, or when reset() started a new generation meanwhile. */ const busyWhile = useCallback( async (work: () => unknown) => { const g = gen.current; act((x) => ({ ...x, busy: true, error: undefined })); try { await work(); } catch (error) { if (gen.current === g) commit((x) => ({ ...x, busy: false, error })); return false; } if (gen.current !== g) return false; commit((x) => ({ ...x, busy: false })); return true; }, [act, commit], ); const complete = useCallback( (how: "visited" | "skipped") => act((x) => ({ ...x, completed: true, direction: 1, visited: how === "visited" ? append(x.visited, x.id) : x.visited, skipped: how === "skipped" ? append(x.skipped, x.id) : x.skipped, error: undefined, })), [act], ); const next = useCallback(async () => { const s = latest.current; const def = opts.current.steps.find((x) => x.id === s.id); if (!def || s.busy || s.completed || (def.valid && !def.valid(s.data))) return false; const after = neighbour(1); const work = after ? def.onNext && (() => def.onNext!(s.data)) : async () => { await def.onNext?.(s.data); await opts.current.onComplete?.(s.data); }; if (work && !(await busyWhile(work))) return false; if (after) move(after.id, { visited: s.id }); else complete("visited"); return true; }, [busyWhile, complete, move, neighbour]); const back = useCallback(() => { const s = latest.current; if (s.busy) return; if (s.completed) return act((x) => ({ ...x, completed: false, direction: -1 })); const before = neighbour(-1); if (before) move(before.id); }, [act, move, neighbour]); const skip = useCallback(() => { const s = latest.current; const def = opts.current.steps.find((x) => x.id === s.id); if (!def?.optional || s.busy || s.completed) return; const after = neighbour(1); if (after) return move(after.id, { skipped: s.id }); // Skipping the last step finishes the flow, without its onNext. void busyWhile(() => opts.current.onComplete?.(s.data)).then((ok) => ok && complete("skipped")); }, [busyWhile, complete, move, neighbour]); const finish = useCallback(async () => { const s = latest.current; if (s.busy || s.completed) return false; if (!(await busyWhile(() => opts.current.onComplete?.(s.data)))) return false; complete("visited"); return true; }, [busyWhile, complete]); const goTo = useCallback( (id: Id) => { if (latest.current.busy) return; act((x) => (x.completed ? { ...x, completed: false } : x)); move(id); }, [act, move], ); const mark = useCallback( (id: Id, status: "complete" | "skipped" | "upcoming") => act((x) => ({ ...x, visited: status === "complete" ? append(x.visited, id) : without(x.visited, id), skipped: status === "skipped" ? append(x.skipped, id) : without(x.skipped, id), })), [act], ); const setData = useCallback( (update: Partial | ((data: Data) => Data)) => act((s) => ({ ...s, data: typeof update === "function" ? update(s.data) : { ...s.data, ...update } })), [act], ); const reset = useCallback(() => { gen.current++; // A late async resume must not overwrite a reset (a demo's replay). touched.current = true; forget(); const o = opts.current; const s = fresh(o.initialStep ?? o.steps[0].id, o.initialData); const changed = s.data !== latest.current.data; latest.current = s; setState(s); if (changed) o.onDataChange?.(s.data); }, [forget]); const data = controlled ? (options.data as Data) : state.data; const steps = useMemo(() => inPlay(allSteps, data, state.id), [allSteps, data, state.id]); const index = Math.max(0, steps.findIndex((s) => s.id === state.id)); const step = steps[index]; const count = steps.length; const valid = step.valid ? step.valid(data) : true; const statusOf = useCallback( (id: Id): StepStatus => { if (id === state.id && !state.completed) return "current"; if (state.skipped.includes(id)) return "skipped"; return state.visited.includes(id) ? "complete" : "upcoming"; }, [state.id, state.completed, state.skipped, state.visited], ); return { steps, step, id: state.id, index, count, direction: state.direction, data, setData, canNext: valid && !state.busy && !state.completed, canBack: !state.busy && (index > 0 || state.completed), canSkip: Boolean(step.optional) && !state.busy && !state.completed, isFirst: index === 0, isLast: index === count - 1, busy: state.busy, error: state.error, completed: state.completed, visited: state.visited, skipped: state.skipped, statusOf, next, back, skip, goTo, mark, finish, reset, announcement: `Step ${index + 1} of ${count}: ${step.title}`, }; } 65:T1251,"use client"; import { useCallback, useEffect, useRef, useState, type SyntheticEvent } from "react"; import { useSafeReducedMotion } from "../../lib/motion"; /** What a script gets: waits that end early when someone takes over, and a typist. */ export type AutoplayContext = { /** Resolves after `ms`; rejects (and so ends the script) once the visitor takes over. */ wait: (ms: number) => Promise; /** Types `text` into `onText` a character at a time, `perChar` ms apart (default 70). */ type: (text: string, onText: (value: string) => void, perChar?: number) => Promise; signal: AbortSignal; }; export type AutoplayScript = (play: AutoplayContext) => Promise; export type AutoplayOptions = { /** Start once this turns true, e.g. when the stage scrolls into view. Default true. */ enabled?: boolean; /** The beat before the first move, ms. Default 900. */ delay?: number; }; export type Autoplay = { /** The script is running. */ playing: boolean; /** Someone pressed or typed inside the stage, so the script stopped for good. */ takenOver: boolean; /** Run the script again from the top. Your script resets the flow first. */ replay: () => void; /** * Whether the visitor caused the change landing now: true from the first real press or key * inside the stage until `replay()`, so every reader agrees and a second read changes nothing. * Script moves, the first mount and the script ending never count. Pass it as the shell's `manageFocus`, so focus follows the * visitor's moves only, under reduced motion (where no script runs) too. */ byVisitor: () => boolean; /** Spread on the stage: a real press or key inside it stops the script. */ stageProps: { onPointerDownCapture: (event: SyntheticEvent) => void; onKeyDownCapture: (event: SyntheticEvent) => void; }; }; const STOPPED = "eased-autoplay-stopped"; /** * Plays a flow on its own for a demo: a beat after `enabled`, the script types and picks as * a person would, through the same calls a person's input makes. The first real press or key * inside the stage hands over: the script stops where it is and never resumes until Replay. * Under reduced motion it never starts by itself; Replay still runs it. */ export function useAutoplay(script: AutoplayScript, { enabled = true, delay = 900 }: AutoplayOptions = {}): Autoplay { const reduced = useSafeReducedMotion(); const [playing, setPlaying] = useState(false); const [takenOver, setTakenOver] = useState(false); const [run, setRun] = useState(0); const controller = useRef(null); const pressed = useRef(false); const latest = useRef(script); useEffect(() => { latest.current = script; }); // Run 0 is the automatic one: it waits for `enabled`, and never plays under reduced motion. const auto = run === 0; const go = !takenOver && (auto ? enabled && !reduced : true); useEffect(() => { if (!go) return; const ctrl = new AbortController(); controller.current = ctrl; const { signal } = ctrl; const wait = (ms: number) => new Promise((resolve, reject) => { if (signal.aborted) return reject(new Error(STOPPED)); const t = window.setTimeout(resolve, ms); const abort = () => { window.clearTimeout(t); reject(new Error(STOPPED)); }; signal.addEventListener("abort", abort, { once: true }); }); const type = async (text: string, onText: (value: string) => void, perChar = 70) => { for (let i = 1; i <= text.length; i++) { await wait(perChar); onText(text.slice(0, i)); } }; const start = window.setTimeout(() => { setPlaying(true); latest .current({ wait, type, signal }) .catch(() => {}) .finally(() => { if (!signal.aborted) setPlaying(false); }); }, auto ? delay : 250); return () => { window.clearTimeout(start); ctrl.abort(); }; }, [go, auto, run, delay]); const stop = useCallback((event: SyntheticEvent) => { if (!event.nativeEvent.isTrusted) return; pressed.current = true; if (!controller.current) return; controller.current.abort(); controller.current = null; setPlaying(false); setTakenOver(true); }, []); const replay = useCallback(() => { controller.current?.abort(); pressed.current = false; setTakenOver(false); setPlaying(false); setRun((r) => r + 1); }, []); const byVisitor = useCallback(() => pressed.current, []); return { playing, takenOver, replay, byVisitor, stageProps: { onPointerDownCapture: stop, onKeyDownCapture: stop } }; } 61:["$","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,["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://eased.dev/r/eased-motion.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"src/registry/eased/_primitives/onboarding-core/onboarding-core.ts","content":"$64","type":"registry:lib","target":"@components/eased/_primitives/onboarding-core/onboarding-core.ts"},{"path":"src/registry/eased/_primitives/onboarding-core/autoplay.ts","content":"$65","type":"registry:lib","target":"@components/eased/_primitives/onboarding-core/autoplay.ts"}],"className":"h-[70svh] min-h-80"}]]}]