@studio-vaai/js-machine

Framework-agnostic state machines for the studio vaai virtual try-on journey, built on XState v5. No React — HTTP calls go through a StudioVaaiClient you inject from @studio-vaai/js-client.

Using React? Reach for @studio-vaai/react-headless, which wraps these machines in hooks and a provider. Use js-machine directly only for non-React hosts or a custom integration.

Install

npm install @studio-vaai/js-machine @studio-vaai/js-client

Flows

globalFlowMachine

Cross-product steps, in order:

1. sessionIntro — consent + session creation.
2. photoUpload — intro → upload → accept/reject loop.
3. bodyHeightCalibration — runs after a successful capture; "use another image" routes back toward photo capture.

productFlowMachine

One product at a time. The root is a parallel region with three siblings (recommendation does not wrap try-on):

| Region | Role | | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | variant | Variant / overview. The host passes a product with a declarative variants[] list; the machine resolves the picked variant from its attributes and threads it through to createTryOn. | | recommendation | hidden → loading → visible | error; dismissed when dismissed. | | tryOnPipeline | Sequential: tryOnRequest → tryOnResult. |

Also exported: tryOnRequestMachine, tryOnResultMachine.

defaultRootMachine

A reference composition: the global prefix (sessionIntro → photoUpload → bodyHeightCalibration) followed by the product parallel region. It handles:

• PRODUCT_CHANGED — reset the product flow and update productId / selection.
• BACK_TO_HEIGHT — jump back to body height calibration.
• RESET_PRODUCT — clear the variant selection while keeping the current product id.

Usage

Pass { client } (and any product-specific fields) through each machine's input. To build a custom top-level flow, reuse globalFlowMachine and/or productFlowMachine — or inline their regions — as long as the event contracts stay aligned.

License

MIT