├── .gitignore
├── README.md
├── components
    ├── anatomy.tsx
    ├── color-mode.tsx
    ├── components-map.ts
    └── visualizer
    │   ├── background.tsx
    │   ├── canvas.tsx
    │   ├── controls
    │       ├── icons.tsx
    │       └── index.tsx
    │   ├── dom-sandbox.tsx
    │   ├── graph
    │       ├── action.tsx
    │       ├── bounds.tsx
    │       ├── edges
    │       │   ├── arrow-marker.tsx
    │       │   ├── edge.tsx
    │       │   ├── index.tsx
    │       │   └── initial-edge.tsx
    │       ├── index.tsx
    │       ├── nav.tsx
    │       ├── skeleton.tsx
    │       ├── state-node
    │       │   ├── actions.tsx
    │       │   ├── header.tsx
    │       │   ├── index.tsx
    │       │   └── layout.ts
    │       ├── transition.tsx
    │       └── wrapper.tsx
    │   ├── index.tsx
    │   ├── simulation
    │       ├── context.tsx
    │       └── machine.ts
    │   ├── types.ts
    │   └── utils
    │       ├── graph
    │           ├── create-graph.ts
    │           ├── create-root-node.ts
    │           ├── elk.machine.ts
    │           ├── elk.types.ts
    │           ├── elk.utils.ts
    │           └── types.ts
    │       ├── hooks
    │           └── use-effect-once.ts
    │       ├── machine
    │           ├── misc.ts
    │           ├── parse-guard.ts
    │           ├── serialize.ts
    │           └── state-node.ts
    │       └── path.ts
├── eslint.config.mjs
├── next.config.ts
├── package.json
├── pages
    ├── [component].tsx
    ├── _app.tsx
    ├── _document.tsx
    └── index.tsx
├── pnpm-lock.yaml
├── public
    └── favicon.ico
├── styles
    └── globals.css
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.*
 7 | .yarn/*
 8 | !.yarn/patches
 9 | !.yarn/plugins
10 | !.yarn/releases
11 | !.yarn/versions
12 | 
13 | # testing
14 | /coverage
15 | 
16 | # next.js
17 | /.next/
18 | /out/
19 | 
20 | # production
21 | /build
22 | 
23 | # misc
24 | .DS_Store
25 | *.pem
26 | 
27 | # debug
28 | npm-debug.log*
29 | yarn-debug.log*
30 | yarn-error.log*
31 | .pnpm-debug.log*
32 | 
33 | # env files (can opt-in for committing if needed)
34 | .env*
35 | 
36 | # vercel
37 | .vercel
38 | 
39 | # typescript
40 | *.tsbuildinfo
41 | next-env.d.ts
42 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Zag Visualizer
 2 | 
 3 | Explore Zag's state machines through interactive graphs
 4 | 
 5 | ## Sponsors ✨
 6 | 
 7 | Thanks goes to these wonderful people
 8 | 
 9 | <p align="center">
10 |   <a href="https://patreon.com/anubra266?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=creatorshare_creator&utm_content=join_link">
11 |     <img src='https://cdn.jsdelivr.net/gh/anubra266/static@main/sponsors.svg'/>
12 |   </a>
13 | </p>
14 | 


--------------------------------------------------------------------------------
/components/anatomy.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentAnatomyName, getComponent } from "@zag-js/anatomy-icons";
2 | 
3 | export function Anatomy(props: { component: string }) {
4 |   const Component = getComponent(props.component as ComponentAnatomyName);
5 | 
6 |   if (!Component) return null;
7 |   return <Component accentColor="#6eeb6e" className="anatomy-icon" />;
8 | }
9 | 


--------------------------------------------------------------------------------
/components/color-mode.tsx:
--------------------------------------------------------------------------------
 1 | import { SunIcon } from "@/components/visualizer/controls/icons"
 2 | 
 3 | import { MoonIcon } from "@/components/visualizer/controls/icons"
 4 | import { useTheme } from "next-themes"
 5 | 
 6 | export function ColorMode() {
 7 |   const { theme, setTheme } = useTheme()
 8 | 
 9 |   return (
10 |     <button
11 |       title="toggle theme"
12 |       aria-label="toggle theme"
13 |       className="theme-toggle"
14 |       onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
15 |     >
16 |       <MoonIcon className="moon" />
17 |       <SunIcon className="sun" />
18 |     </button>
19 |   )
20 | }
21 | 


--------------------------------------------------------------------------------
/components/components-map.ts:
--------------------------------------------------------------------------------
  1 | import * as accordion from "@zag-js/accordion"
  2 | import * as angleSlider from "@zag-js/angle-slider"
  3 | import * as avatar from "@zag-js/avatar"
  4 | import * as carousel from "@zag-js/carousel"
  5 | import * as checkbox from "@zag-js/checkbox"
  6 | import * as clipboard from "@zag-js/clipboard"
  7 | import * as collapsible from "@zag-js/collapsible"
  8 | import * as colorPicker from "@zag-js/color-picker"
  9 | import * as combobox from "@zag-js/combobox"
 10 | import * as datePicker from "@zag-js/date-picker"
 11 | import * as dialog from "@zag-js/dialog"
 12 | import * as editable from "@zag-js/editable"
 13 | import * as fileUpload from "@zag-js/file-upload"
 14 | import * as floatingPanel from "@zag-js/floating-panel"
 15 | import * as hoverCard from "@zag-js/hover-card"
 16 | import * as menu from "@zag-js/menu"
 17 | // import * as navigationMenu from "@zag-js/navigation-menu"
 18 | import * as numberInput from "@zag-js/number-input"
 19 | import * as pagination from "@zag-js/pagination"
 20 | import * as pinInput from "@zag-js/pin-input"
 21 | import * as popover from "@zag-js/popover"
 22 | import * as presence from "@zag-js/presence"
 23 | import * as progress from "@zag-js/progress"
 24 | import * as qrCode from "@zag-js/qr-code"
 25 | import * as radioGroup from "@zag-js/radio-group"
 26 | import * as ratingGroup from "@zag-js/rating-group"
 27 | import * as select from "@zag-js/select"
 28 | import * as signaturePad from "@zag-js/signature-pad"
 29 | import * as slider from "@zag-js/slider"
 30 | import * as splitter from "@zag-js/splitter"
 31 | import * as steps from "@zag-js/steps"
 32 | import * as zagSwitch from "@zag-js/switch"
 33 | import * as tabs from "@zag-js/tabs"
 34 | import * as tagsInput from "@zag-js/tags-input"
 35 | import * as timePicker from "@zag-js/time-picker"
 36 | import * as timer from "@zag-js/timer"
 37 | import * as toast from "@zag-js/toast"
 38 | import * as toggleGroup from "@zag-js/toggle-group"
 39 | import * as tooltip from "@zag-js/tooltip"
 40 | import * as tour from "@zag-js/tour"
 41 | import * as treeView from "@zag-js/tree-view"
 42 | import type { Machine as ZagMachine } from "@zag-js/core"
 43 | 
 44 | type ComponentInfo = {
 45 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 46 |   component: ZagMachine<any>
 47 |   title: string
 48 | }
 49 | 
 50 | export type Component = keyof typeof componentsMap
 51 | 
 52 | export const componentsMap = {
 53 |   accordion: { component: accordion, title: "Accordion" },
 54 |   "angle-slider": { component: angleSlider, title: "Angle Slider" },
 55 |   avatar: { component: avatar, title: "Avatar" },
 56 |   carousel: { component: carousel, title: "Carousel" },
 57 |   checkbox: { component: checkbox, title: "Checkbox" },
 58 |   clipboard: { component: clipboard, title: "Clipboard" },
 59 |   collapsible: { component: collapsible, title: "Collapsible" },
 60 |   "color-picker": { component: colorPicker, title: "Color Picker" },
 61 |   combobox: { component: combobox, title: "Combobox" },
 62 |   "date-picker": { component: datePicker, title: "Date Picker" },
 63 |   dialog: { component: dialog, title: "Dialog" },
 64 |   editable: { component: editable, title: "Editable" },
 65 |   "file-upload": { component: fileUpload, title: "File Upload" },
 66 |   "floating-panel": { component: floatingPanel, title: "Floating Panel" },
 67 |   "hover-card": { component: hoverCard, title: "Hover Card" },
 68 |   menu: { component: menu, title: "Menu" },
 69 |   // "navigation-menu": { component: navigationMenu, title: "Navigation Menu" },
 70 |   "number-input": { component: numberInput, title: "Number Input" },
 71 |   pagination: { component: pagination, title: "Pagination" },
 72 |   "pin-input": { component: pinInput, title: "Pin Input" },
 73 |   popover: { component: popover, title: "Popover" },
 74 |   presence: { component: presence, title: "Presence" },
 75 |   progress: { component: progress, title: "Progress" },
 76 |   "qr-code": { component: qrCode, title: "QR Code" },
 77 |   "radio-group": { component: radioGroup, title: "Radio Group" },
 78 |   "rating-group": { component: ratingGroup, title: "Rating Group" },
 79 |   select: { component: select, title: "Select" },
 80 |   "signature-pad": { component: signaturePad, title: "Signature Pad" },
 81 |   slider: { component: slider, title: "Slider" },
 82 |   splitter: { component: splitter, title: "Splitter" },
 83 |   steps: { component: steps, title: "Steps" },
 84 |   switch: { component: zagSwitch, title: "Switch" },
 85 |   tabs: { component: tabs, title: "Tabs" },
 86 |   "tags-input": { component: tagsInput, title: "Tags Input" },
 87 |   "time-picker": { component: timePicker, title: "Time Picker" },
 88 |   timer: { component: timer, title: "Timer" },
 89 |   toast: { component: toast, title: "Toast" },
 90 |   "toggle-group": { component: toggleGroup, title: "Toggle Group" },
 91 |   tooltip: { component: tooltip, title: "Tooltip" },
 92 |   tour: { component: tour, title: "Tour" },
 93 |   "tree-view": { component: treeView, title: "Tree View" },
 94 | } as const
 95 | 
 96 | export type ComponentsMap = {
 97 |   [K in Component]: ComponentInfo
 98 | }
 99 | 
100 | export const settingsMap: Partial<Record<Component, Record<string, unknown>>> = {
101 |   carousel: {
102 |     // others
103 |     // ...
104 | 
105 |     // required
106 |     slideCount: 2,
107 |   },
108 |   toast: {
109 |     // others
110 |     // ...
111 | 
112 |     // required
113 |     id: "toast",
114 |     type: "success",
115 |     removeDelay: 1000,
116 |     parent: {
117 |       // To prevent errors when toast tries to communicate with the non existent service
118 |       send() {},
119 |     },
120 |   },
121 |   "floating-panel": {
122 |     // others
123 |     // ...
124 | 
125 |     // required
126 |     id: "floating-panel",
127 |   },
128 | }
129 | 


--------------------------------------------------------------------------------
/components/visualizer/background.tsx:
--------------------------------------------------------------------------------
 1 | import { useId } from "react"
 2 | import { useTransformComponent } from "react-zoom-pan-pinch"
 3 | 
 4 | export const Background = () => {
 5 |   const _patternId = useId()
 6 | 
 7 |   const background = useTransformComponent(({ state }) => {
 8 |     const { scale, positionX, positionY } = state
 9 | 
10 |     const patternSize = 1
11 |     const gapXY: [number, number] = [20, 20]
12 |     const offsetXY: [number, number] = [0, 0]
13 | 
14 |     const scaledSize = patternSize * scale
15 |     const scaledGap: [number, number] = [gapXY[0] * scale || 1, gapXY[1] * scale || 1]
16 |     const patternDimensions: [number, number] = scaledGap
17 |     const scaledOffset: [number, number] = [
18 |       offsetXY[0] * scale || 1 + patternDimensions[0] / 2,
19 |       offsetXY[1] * scale || 1 + patternDimensions[1] / 2,
20 |     ]
21 | 
22 |     const radius = scaledSize / 2
23 | 
24 |     return (
25 |       <svg className="background">
26 |         <pattern
27 |           id={_patternId}
28 |           x={positionX % scaledGap[0]}
29 |           y={positionY % scaledGap[1]}
30 |           width={scaledGap[0]}
31 |           height={scaledGap[1]}
32 |           patternUnits="userSpaceOnUse"
33 |           patternTransform={`translate(-${scaledOffset[0]},-${scaledOffset[1]})`}
34 |         >
35 |           <circle cx={radius} cy={radius} r={radius} className="pattern" />
36 |         </pattern>
37 |         <rect x="0" y="0" width="100%" height="100%" fill={`url(#${_patternId})`} />
38 |       </svg>
39 |     )
40 |   })
41 | 
42 |   return background
43 | }
44 | 


--------------------------------------------------------------------------------
/components/visualizer/canvas.tsx:
--------------------------------------------------------------------------------
 1 | import { TransformComponent } from "react-zoom-pan-pinch";
 2 | 
 3 | type CanvasProps = {
 4 |   children: React.ReactNode;
 5 | };
 6 | 
 7 | export default function Canvas(props: CanvasProps) {
 8 |   return (
 9 |     <>
10 |       <TransformComponent wrapperClass="wrapper" contentClass="content">
11 |         {props.children}
12 |       </TransformComponent>
13 |     </>
14 |   );
15 | }
16 | 


--------------------------------------------------------------------------------
/components/visualizer/controls/icons.tsx:
--------------------------------------------------------------------------------
  1 | export function FitIcon() {
  2 |   return (
  3 |     <svg
  4 |       xmlns="http://www.w3.org/2000/svg"
  5 |       viewBox="0 0 32 30"
  6 |       fill="currentColor"
  7 |     >
  8 |       <path d="M3.692 4.63c0-.53.4-.938.939-.938h5.215V0H4.708C2.13 0 0 2.054 0 4.63v5.216h3.692V4.631zM27.354 0h-5.2v3.692h5.17c.53 0 .984.4.984.939v5.215H32V4.631A4.624 4.624 0 0027.354 0zm.954 24.83c0 .532-.4.94-.939.94h-5.215v3.768h5.215c2.577 0 4.631-2.13 4.631-4.707v-5.139h-3.692v5.139zm-23.677.94c-.531 0-.939-.4-.939-.94v-5.138H0v5.139c0 2.577 2.13 4.707 4.708 4.707h5.138V25.77H4.631z" />
  9 |     </svg>
 10 |   );
 11 | }
 12 | 
 13 | export function PlusIcon() {
 14 |   return (
 15 |     <svg
 16 |       xmlns="http://www.w3.org/2000/svg"
 17 |       viewBox="0 0 32 32"
 18 |       fill="currentColor"
 19 |     >
 20 |       <path d="M32 18.133H18.133V32h-4.266V18.133H0v-4.266h13.867V0h4.266v13.867H32z" />
 21 |     </svg>
 22 |   );
 23 | }
 24 | 
 25 | export function MinusIcon() {
 26 |   return (
 27 |     <svg
 28 |       xmlns="http://www.w3.org/2000/svg"
 29 |       viewBox="0 0 32 5"
 30 |       fill="currentColor"
 31 |     >
 32 |       <path d="M0 0h32v4.2H0z" />
 33 |     </svg>
 34 |   );
 35 | }
 36 | 
 37 | export function ResetIcon() {
 38 |   return (
 39 |     <svg
 40 |       xmlns="http://www.w3.org/2000/svg"
 41 |       width="24"
 42 |       height="24"
 43 |       viewBox="0 0 24 24"
 44 |       fill="none"
 45 |       stroke="currentColor"
 46 |       strokeWidth="2.3"
 47 |       strokeLinecap="round"
 48 |       strokeLinejoin="round"
 49 |     >
 50 |       <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
 51 |       <path d="M3 3v5h5" />
 52 |       <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
 53 |       <path d="M16 16h5v5" />
 54 |     </svg>
 55 |   );
 56 | }
 57 | 
 58 | export function MoonIcon(props: { className?: string }) {
 59 |   return (
 60 |     <svg
 61 |       xmlns="http://www.w3.org/2000/svg"
 62 |       width="24"
 63 |       height="24"
 64 |       viewBox="0 0 24 24"
 65 |       fill="none"
 66 |       stroke="currentColor"
 67 |       strokeWidth="2.3"
 68 |       strokeLinecap="round"
 69 |       strokeLinejoin="round"
 70 |       {...props}
 71 |     >
 72 |       <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
 73 |     </svg>
 74 |   );
 75 | }
 76 | 
 77 | export const SunIcon = (props: { className?: string }) => {
 78 |   return (
 79 |     <svg
 80 |       xmlns="http://www.w3.org/2000/svg"
 81 |       width="24"
 82 |       height="24"
 83 |       viewBox="0 0 24 24"
 84 |       fill="none"
 85 |       stroke="currentColor"
 86 |       strokeWidth="2.3"
 87 |       strokeLinecap="round"
 88 |       strokeLinejoin="round"
 89 |       {...props}
 90 |     >
 91 |       <path d="M12 8a2.83 2.83 0 0 0 4 4 4 4 0 1 1-4-4" />
 92 |       <path d="M12 2v2" />
 93 |       <path d="M12 20v2" />
 94 |       <path d="m4.9 4.9 1.4 1.4" />
 95 |       <path d="m17.7 17.7 1.4 1.4" />
 96 |       <path d="M2 12h2" />
 97 |       <path d="M20 12h2" />
 98 |       <path d="m6.3 17.7-1.4 1.4" />
 99 |       <path d="m19.1 4.9-1.4 1.4" />
100 |     </svg>
101 |   );
102 | };
103 | 
104 | export function GithubIcon() {
105 |   return (
106 |     <svg
107 |       xmlns="http://www.w3.org/2000/svg"
108 |       width="24"
109 |       height="24"
110 |       viewBox="0 0 24 24"
111 |       fill="none"
112 |       stroke="currentColor"
113 |       strokeWidth="2"
114 |       strokeLinecap="round"
115 |       strokeLinejoin="round"
116 |     >
117 |       <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
118 |       <path d="M9 18c-4.51 2-5-2-7-2" />
119 |     </svg>
120 |   );
121 | }
122 | 
123 | export function HomeIcon() {
124 |   return (
125 |     <svg
126 |       xmlns="http://www.w3.org/2000/svg"
127 |       width="24"
128 |       height="24"
129 |       viewBox="0 0 24 24"
130 |       fill="none"
131 |       stroke="currentColor"
132 |       strokeWidth="2"
133 |       strokeLinecap="round"
134 |       strokeLinejoin="round"
135 |     >
136 |       <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
137 |       <path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
138 |     </svg>
139 |   );
140 | }
141 | 
142 | export function ZagIcon() {
143 |   return (
144 |     <svg
145 |       width="120"
146 |       height="120"
147 |       viewBox="0 0 120 120"
148 |       fill="none"
149 |       xmlns="http://www.w3.org/2000/svg"
150 |     >
151 |       <path
152 |         fillRule="evenodd"
153 |         clipRule="evenodd"
154 |         d="M105 32.7162L37.214 101L27.2472 94.0613L45.6346 53.9632L22.7996 72.6744L15 63.1073L58.4609 27.4951L67.9597 34.8593L52.915 67.6676L96.2643 24L105 32.7162Z"
155 |         fill="currentColor"
156 |       />
157 |     </svg>
158 |   );
159 | }
160 | 


--------------------------------------------------------------------------------
/components/visualizer/controls/index.tsx:
--------------------------------------------------------------------------------
 1 | import { FitIcon, MinusIcon, PlusIcon, ResetIcon } from "./icons"
 2 | import { useControls, useTransformComponent, useTransformContext } from "react-zoom-pan-pinch"
 3 | import { useSimulation } from "@/components/visualizer/simulation/context"
 4 | import { ColorMode } from "@/components/color-mode"
 5 | 
 6 | export const Controls = () => {
 7 |   const { child, service } = useSimulation()
 8 | 
 9 |   const {
10 |     setup: { minScale, maxScale },
11 |   } = useTransformContext()
12 | 
13 |   const { zoomIn, zoomOut, zoomToElement } = useControls()
14 |   const transformControls = useTransformComponent(({ state }) => {
15 |     const { scale } = state
16 | 
17 |     return (
18 |       <>
19 |         <button title="zoom in" aria-label="zoom in" disabled={scale >= maxScale} onClick={() => zoomIn()}>
20 |           <PlusIcon />
21 |         </button>
22 |         <button title="zoom out" aria-label="zoom out" disabled={scale <= minScale} onClick={() => zoomOut()}>
23 |           <MinusIcon />
24 |         </button>
25 |         <button title="zoom to element" aria-label="zoom to element" onClick={() => zoomToElement("graph-bounds")}>
26 |           <FitIcon />
27 |         </button>
28 |       </>
29 |     )
30 |   })
31 | 
32 |   const reset = () => {
33 |     child?.state.set(child.state.initial)
34 |     const settings = service.refs.get("settings") ?? {}
35 |     Object.entries(settings).forEach(([key, value]) => {
36 |       child?.context.set(key, value)
37 |     })
38 |   }
39 | 
40 |   return (
41 |     <div className="controls" aria-label="visualizer controls">
42 |       {transformControls}
43 |       <button title="reset" aria-label="reset" onClick={() => reset()}>
44 |         <ResetIcon />
45 |       </button>
46 |       <ColorMode />
47 |     </div>
48 |   )
49 | }
50 | 


--------------------------------------------------------------------------------
/components/visualizer/dom-sandbox.tsx:
--------------------------------------------------------------------------------
 1 | import { useRef } from "react"
 2 | 
 3 | /** Creates an isolated DOM environment for state machine services
 4 |  *
 5 |  * Why is this needed?
 6 |  * ------------------
 7 |  * When visualizing state machines, we want to see the state transitions and structure,
 8 |  * but we don't want the actual DOM operations (like scroll locks, focus management,
 9 |  * or drag and drop) to affect the visualization UI.
10 |  *
11 |  */
12 | export function useDOMSandbox() {
13 |   const sandboxRef = useRef<HTMLIFrameElement>(null)
14 | 
15 |   const DomSandbox = () => (
16 |     <iframe
17 |       ref={sandboxRef}
18 |       style={{
19 |         width: 0,
20 |         height: 0,
21 |         position: "absolute",
22 |         visibility: "hidden",
23 |       }}
24 |       title="DOM Operations Sandbox"
25 |     />
26 |   )
27 | 
28 |   return {
29 |     DomSandbox,
30 |     getRootNode: () => sandboxRef.current?.contentDocument ?? document,
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/components/visualizer/graph/action.tsx:
--------------------------------------------------------------------------------
 1 | export const Action: React.FC<{
 2 |   action: string
 3 |   kind: "entry" | "exit" | "do" | "effect"
 4 | }> = (props) => {
 5 |   const { action, kind } = props
 6 | 
 7 |   return (
 8 |     <div data-part="action" data-action={kind}>
 9 |       <div data-part="action-type" title={action}>
10 |         <strong>{action}</strong>
11 |       </div>
12 |     </div>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/components/visualizer/graph/bounds.tsx:
--------------------------------------------------------------------------------
 1 | import { DirectedGraphEdge, DirectedGraphNode } from "@/components/visualizer/utils/graph/create-graph"
 2 | import { useEffect } from "react"
 3 | import { useControls as useZoomControls } from "react-zoom-pan-pinch"
 4 | 
 5 | export const GraphBounds = (props: { rootNode: DirectedGraphNode; edges: DirectedGraphEdge[] }) => {
 6 |   const { rootNode, edges } = props
 7 |   const { zoomToElement } = useZoomControls()
 8 |   useEffect(() => {
 9 |     setTimeout(() => {
10 |       zoomToElement("graph-bounds")
11 |     }, 10)
12 |     // eslint-disable-next-line react-hooks/exhaustive-deps
13 |   }, [])
14 | 
15 |   const rootNodeTop = rootNode.layout?.y ?? 0
16 |   const rootNodeLeft = rootNode.layout?.x ?? 0
17 |   const rootNodeHeight = rootNode.layout?.height ?? 0
18 |   const rootNodeWidth = rootNode.layout?.width ?? 0
19 | 
20 |   const bounds = edges.reduce(
21 |     (acc, edge) => ({
22 |       minX: Math.min(acc.minX, edge.label?.x ?? acc.minX),
23 |       maxX: Math.max(acc.maxX, edge.label?.x ?? acc.maxX),
24 |       minY: Math.min(acc.minY, edge.label?.y ?? acc.minY),
25 |       maxY: Math.max(acc.maxY, edge.label?.y ?? acc.maxY),
26 |     }),
27 |     {
28 |       minX: rootNodeLeft,
29 |       maxX: rootNodeLeft + rootNodeWidth,
30 |       minY: rootNodeTop,
31 |       maxY: rootNodeTop + rootNodeHeight,
32 |     },
33 |   )
34 | 
35 |   const padding = 120
36 | 
37 |   return (
38 |     <div
39 |       id="graph-bounds"
40 |       style={{
41 |         position: "absolute",
42 |         width: bounds.maxX - bounds.minX + padding * 2,
43 |         height: bounds.maxY - bounds.minY + padding * 2,
44 |         top: bounds.minY - padding,
45 |         left: bounds.minX - padding,
46 |       }}
47 |     />
48 |   )
49 | }
50 | 


--------------------------------------------------------------------------------
/components/visualizer/graph/edges/arrow-marker.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | 
 3 | export const ArrowMarker: React.FC<{ id: string }> = ({ id }) => {
 4 |   return (
 5 |     <marker
 6 |       id={id}
 7 |       viewBox="0 0 10 10"
 8 |       markerWidth="5"
 9 |       markerHeight="5"
10 |       refX="0"
11 |       refY="5"
12 |       markerUnits="strokeWidth"
13 |       orient="auto"
14 |     >
15 |       <path d="M0,0 L0,10 L10,5 z" data-part="edge-arrow" />
16 |     </marker>
17 |   )
18 | }
19 | 


--------------------------------------------------------------------------------
/components/visualizer/graph/edges/edge.tsx:
--------------------------------------------------------------------------------
 1 | import type { Point } from "@zag-js/rect-utils"
 2 | import { DirectedGraphEdge } from "../../utils/graph/create-graph"
 3 | import { ArrowMarker } from "./arrow-marker"
 4 | import type { LPathParam, SvgPath } from "../../utils/path"
 5 | import { pathToD, roundPath } from "../../utils/path"
 6 | import { useSimulation } from "../../simulation/context"
 7 | import { dataAttr } from "@zag-js/dom-query"
 8 | import { isStateNodeActive } from "../../utils/machine/state-node"
 9 | 
10 | function translatePoint(point: Point, vector: Point): Point {
11 |   return {
12 |     x: point.x + vector.x,
13 |     y: point.y + vector.y,
14 |   }
15 | }
16 | 
17 | export function translate(path: SvgPath, vector: Point): SvgPath {
18 |   return path.map((cmd) => {
19 |     switch (cmd[0]) {
20 |       case "M":
21 |         return ["M", translatePoint(cmd[1], vector)]
22 |       case "L":
23 |         return ["L", translatePoint(cmd[1], vector)]
24 |       default:
25 |         return cmd
26 |     }
27 |   }) as SvgPath
28 | }
29 | 
30 | export const Edge: React.FC<{ edge: DirectedGraphEdge; order: number }> = ({ edge, order }) => {
31 |   const { service, child } = useSimulation()
32 | 
33 |   const machine = service.refs.get("machine")
34 |   if (!machine) return null
35 |   const machineState = child.state.get()
36 |   const isActive = isStateNodeActive(edge.source, machine.id, machineState)
37 | 
38 |   let path: SvgPath | undefined
39 | 
40 |   if (edge.sections?.length) {
41 |     const section = edge.sections[0]
42 | 
43 |     path = [["M", section.startPoint], ...(section.bendPoints?.map((point: Point) => ["L", point] as LPathParam) || [])]
44 | 
45 |     const preLastPoint = path[path.length - 1][1]!
46 |     const xSign = Math.sign(section.endPoint.x - preLastPoint.x)
47 |     const ySign = Math.sign(section.endPoint.y - preLastPoint.y)
48 |     const endPoint = {
49 |       x: section.endPoint.x - 5 * xSign,
50 |       y: section.endPoint.y - 5 * ySign,
51 |     }
52 |     path.push(["L", endPoint])
53 |   }
54 | 
55 |   const markerId = `${edge.source.order}-${order}`
56 | 
57 |   return path ? (
58 |     <g data-part="edge-group" data-edge-id={edge.id} data-active={dataAttr(isActive)}>
59 |       <defs>
60 |         <ArrowMarker id={markerId} />
61 |       </defs>
62 |       <path
63 |         stroke="#fff4"
64 |         strokeWidth={2}
65 |         fill="none"
66 |         d={pathToD(roundPath(path))}
67 |         data-part="edge"
68 |         markerEnd={`url(#${markerId})`}
69 |       ></path>
70 |     </g>
71 |   ) : null
72 | }
73 | 


--------------------------------------------------------------------------------
/components/visualizer/graph/edges/index.tsx:
--------------------------------------------------------------------------------
 1 | import { DirectedGraphNode } from "../../utils/graph/create-graph"
 2 | import { getAllEdges } from "../../utils/graph/elk.utils"
 3 | import { InitialEdge } from "./initial-edge"
 4 | import { Edge } from "./edge"
 5 | 
 6 | export const Edges = (props: { graph: DirectedGraphNode }) => {
 7 |   const { graph } = props
 8 | 
 9 |   const edges = getAllEdges(graph)
10 |   const nodes = getInitialDigraphNodes(graph)
11 | 
12 |   return (
13 |     <svg
14 |       style={{
15 |         position: "absolute",
16 |         height: "100vh",
17 |         width: "100vw",
18 |         top: 0,
19 |         left: 0,
20 |         pointerEvents: "none",
21 |         overflow: "visible",
22 |       }}
23 |       id="edges"
24 |     >
25 |       {nodes.map((initialNode) => {
26 |         return <InitialEdge node={initialNode} key={initialNode.id} />
27 |       })}
28 |       {edges.map((edge, i) => {
29 |         return <Edge key={edge.id} edge={edge} order={i} />
30 |       })}
31 |     </svg>
32 |   )
33 | }
34 | 
35 | function getInitialDigraphNodes(digraph: DirectedGraphNode): DirectedGraphNode[] {
36 |   const nodes: DirectedGraphNode[] = []
37 |   if (digraph.data.parent?.initial === digraph.data.key) {
38 |     nodes.push(digraph)
39 |   }
40 | 
41 |   digraph.children.forEach((childNode) => {
42 |     nodes.push(...getInitialDigraphNodes(childNode))
43 |   })
44 | 
45 |   return nodes
46 | }
47 | 


--------------------------------------------------------------------------------
/components/visualizer/graph/edges/initial-edge.tsx:
--------------------------------------------------------------------------------
 1 | import type { Point } from "@zag-js/rect-utils"
 2 | import { DirectedGraphNode } from "../../utils/graph/create-graph"
 3 | import { ArrowMarker } from "./arrow-marker"
 4 | import { useSimulation } from "../../simulation/context"
 5 | import { dataAttr } from "@zag-js/dom-query"
 6 | import { isStateNodeActive } from "../../utils/machine/state-node"
 7 | 
 8 | export const InitialEdge: React.FC<{ node: DirectedGraphNode }> = ({ node }) => {
 9 |   const { service, child } = useSimulation()
10 | 
11 |   const machine = service.refs.get("machine")
12 |   if (!machine) return null
13 |   const machineState = child.state.get()
14 |   const stateNode = node.data
15 | 
16 |   const isActive = isStateNodeActive(stateNode, machine.id, machineState)
17 | 
18 |   if (!node.absolute) {
19 |     return null
20 |   }
21 | 
22 |   const endPoint: Point = {
23 |     x: node.absolute.x - 10,
24 |     y: node.absolute.y + 10,
25 |   }
26 | 
27 |   const startPoint: Point = {
28 |     x: endPoint.x - 5,
29 |     y: endPoint.y - 10,
30 |   }
31 | 
32 |   const markerId = `n${Math.floor(Math.random() * 1000)}`
33 | 
34 |   return (
35 |     <g data-part="edge-group" data-active={dataAttr(isActive)}>
36 |       <defs>
37 |         <ArrowMarker id={markerId} />
38 |       </defs>
39 |       <circle data-part="initial-edge-circle" r="4" cx={startPoint.x} cy={startPoint.y} />
40 |       <path
41 |         data-part="edge"
42 |         d={`M ${startPoint.x},${startPoint.y} Q ${startPoint.x},${endPoint.y} ${
43 |           endPoint.x
44 |         },${endPoint.y} L ${endPoint.x + 1}, ${endPoint.y}`}
45 |         strokeWidth={2}
46 |         fill="none"
47 |         markerEnd={`url(#${markerId})`}
48 |         pathLength={1}
49 |       />
50 |     </g>
51 |   )
52 | }
53 | 


--------------------------------------------------------------------------------
/components/visualizer/graph/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useMachine } from "@zag-js/react";
 2 | import { DirectedGraphNode } from "../utils/graph/create-graph";
 3 | import { elkMachine } from "../utils/graph/elk.machine";
 4 | import { useSimulation } from "../simulation/context";
 5 | import { GraphSkeleton } from "./skeleton";
 6 | import { useMemo, memo } from "react";
 7 | import { getAllEdges } from "../utils/graph/elk.utils";
 8 | import { Edges } from "./edges";
 9 | import { StateNode } from "./state-node";
10 | import Canvas from "../canvas";
11 | import { Transition } from "./transition";
12 | import { GraphBounds } from "@/components/visualizer/graph/bounds";
13 | import type { FC } from "react";
14 | 
15 | const MemoizedEdges = memo(Edges);
16 | const MemoizedStateNode = memo(StateNode);
17 | const MemoizedTransition = memo(Transition);
18 | 
19 | export const Graph: FC<{ graph: DirectedGraphNode }> = ({ graph }) => {
20 |   const { service } = useSimulation();
21 |   const elkService = useMachine(elkMachine, {
22 |     graph,
23 |     onPrepareElkGraph() {
24 |       service?.send({ type: "PREPARE_ELK_GRAPH" });
25 |     },
26 |     onElkGraphReady() {
27 |       service?.send({ type: "ELK_GRAPH_READY" });
28 |     },
29 |   });
30 | 
31 |   const elkGraph = elkService.context.get("elkGraph");
32 | 
33 |   const isElkGraphReady = elkService.state.matches("success") && elkGraph;
34 | 
35 |   const graphEdges = useMemo(() => getAllEdges(graph), [graph]);
36 | 
37 |   //   When the elk graph is ready, we render this
38 |   if (isElkGraphReady) {
39 |     const rootNode = elkGraph.children![0]!.node;
40 | 
41 |     return (
42 |       <Canvas>
43 |         <GraphBounds rootNode={rootNode} edges={graphEdges} />
44 |         <MemoizedEdges graph={graph} />
45 |         <MemoizedStateNode node={rootNode} />
46 |         {graphEdges.map((edge) => {
47 |           return (
48 |             <MemoizedTransition
49 |               edge={edge}
50 |               key={edge.id}
51 |               position={
52 |                 edge.label && {
53 |                   x: edge.label.x,
54 |                   y: edge.label.y,
55 |                 }
56 |               }
57 |             />
58 |           );
59 |         })}
60 |       </Canvas>
61 |     );
62 |   }
63 | 
64 |   return <GraphSkeleton graph={graph} />;
65 | };
66 | 


--------------------------------------------------------------------------------
/components/visualizer/graph/nav.tsx:
--------------------------------------------------------------------------------
 1 | import { HomeIcon } from "@/components/visualizer/controls/icons"
 2 | 
 3 | import { GithubIcon } from "@/components/visualizer/controls/icons"
 4 | import Link from "next/link"
 5 | import { useRouter } from "next/router"
 6 | 
 7 | export const Nav = () => {
 8 |   const {
 9 |     query: { component },
10 |   } = useRouter()
11 | 
12 |   return (
13 |     <div className="nav">
14 |       <Link href="/">
15 |         <HomeIcon />
16 |       </Link>
17 |       <Link
18 |         href={`https://github.com/chakra-ui/zag/blob/main/packages/machines/${component}/src/${component}.machine.ts`}
19 |         target="_blank"
20 |       >
21 |         <GithubIcon />
22 |       </Link>
23 |     </div>
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/components/visualizer/graph/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { memo, useMemo } from "react"
 2 | import { DirectedGraphNode } from "../utils/graph/create-graph"
 3 | import { getAllEdges } from "../utils/graph/elk.utils"
 4 | import { StateNode } from "./state-node"
 5 | import { Transition } from "./transition"
 6 | 
 7 | export const GraphSkeleton = memo((props: { graph: DirectedGraphNode }) => {
 8 |   const { graph } = props
 9 | 
10 |   const edges = useMemo(() => getAllEdges(graph), [graph])
11 | 
12 |   return (
13 |     <div data-part="skeleton" data-graph-id={graph.id}>
14 |       <StateNode node={graph} />
15 |       {edges.map((edge) => {
16 |         return (
17 |           <Transition
18 |             edge={edge}
19 |             key={edge.id}
20 |             position={
21 |               edge.label && {
22 |                 x: edge.label.x,
23 |                 y: edge.label.y,
24 |               }
25 |             }
26 |           />
27 |         )
28 |       })}
29 |     </div>
30 |   )
31 | })
32 | 
33 | GraphSkeleton.displayName = "GraphSkeleton"
34 | 


--------------------------------------------------------------------------------
/components/visualizer/graph/state-node/actions.tsx:
--------------------------------------------------------------------------------
 1 | import { useMemo } from "react"
 2 | import type { StateNode } from "../../utils/graph/types"
 3 | import { isConditionalActions, formatConditionalActions } from "../../utils/machine/state-node"
 4 | import { ELSE_GUARD } from "../../utils/machine/serialize"
 5 | import { Action } from "../action"
 6 | 
 7 | interface ConditionalActionsProps {
 8 |   node: StateNode
 9 |   kind: "entry" | "exit" | "effect"
10 | }
11 | 
12 | export const StateNodeActions: React.FC<ConditionalActionsProps> = ({ node, kind }) => {
13 |   const actions = node.definition[kind]
14 |   const formattedActions = useMemo(
15 |     () => (actions && isConditionalActions(actions) ? formatConditionalActions(actions) : null),
16 |     [actions],
17 |   )
18 | 
19 |   if (!actions) return null
20 | 
21 |   if (isConditionalActions(actions)) {
22 |     return (
23 |       <div data-part="state-node-actions" data-part-actions={kind}>
24 |         {formattedActions!.map(([condition, actionList]) => (
25 |           <div key={`${node.id}-${kind}-${condition}`}>
26 |             <span data-part="state-node-action-condition">
27 |               {condition !== ELSE_GUARD ? `if(${condition})` : "else"}:{" "}
28 |             </span>
29 |             {actionList.map((action, idx) => (
30 |               <Action key={`${node.id}-${kind}-${condition}-${idx}`} action={action} kind={kind} />
31 |             ))}
32 |           </div>
33 |         ))}
34 |       </div>
35 |     )
36 |   }
37 | 
38 |   if (Array.isArray(actions) && actions.length > 0) {
39 |     return (
40 |       <div data-part="state-node-actions" data-part-actions={kind}>
41 |         {actions.map((action, index) => (
42 |           <Action action={action} kind={kind} key={`${node.id}-${kind}-${index}`} />
43 |         ))}
44 |       </div>
45 |     )
46 |   }
47 | 
48 |   return null
49 | }
50 | 


--------------------------------------------------------------------------------
/components/visualizer/graph/state-node/header.tsx:
--------------------------------------------------------------------------------
 1 | interface StateNodeHeaderProps {
 2 |   value: string
 3 |   tags: string[]
 4 | }
 5 | 
 6 | export const StateNodeHeader: React.FC<StateNodeHeaderProps> = ({ value, tags }) => {
 7 |   return (
 8 |     <div data-part="state-node-header">
 9 |       <div data-part="state-node-key">
10 |         <div data-part="state-node-key-text" title={value}>
11 |           {value}
12 |         </div>
13 |       </div>
14 |       {tags.length > 0 && (
15 |         <div data-part="state-node-tags">
16 |           {tags.map((tag, i) => (
17 |             <div data-part="state-node-tag" key={i}>
18 |               {tag}
19 |             </div>
20 |           ))}
21 |         </div>
22 |       )}
23 |     </div>
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/components/visualizer/graph/state-node/index.tsx:
--------------------------------------------------------------------------------
 1 | import { dataAttr } from "@zag-js/dom-query"
 2 | import { DirectedGraphNode } from "../../utils/graph/create-graph"
 3 | import { useSimulation } from "../../simulation/context"
 4 | import { useMemo } from "react"
 5 | import { getNextTransitions } from "../../utils/machine/misc"
 6 | import { isStateNodeActive } from "../../utils/machine/state-node"
 7 | import { StateNodeHeader } from "./header"
 8 | import { StateNodeActions } from "./actions"
 9 | import { getLayoutStyles } from "./layout"
10 | 
11 | export const StateNode: React.FC<{
12 |   node: DirectedGraphNode
13 | }> = ({ node }) => {
14 |   const { service, child } = useSimulation()
15 |   const machine = service.refs.get("machine")
16 |   const machineState = child.state.get()
17 |   const stateNode = node.data
18 | 
19 |   const isActiveStateNode = machine && isStateNodeActive(stateNode, machine.id, machineState)
20 | 
21 |   const previewedEvent = service?.context.get("previewedEvent")
22 |   const isPreviewedState = useMemo(() => {
23 |     if (!previewedEvent || !machine) return false
24 |     const possibleTransitions = getNextTransitions(machine, machineState, previewedEvent)
25 | 
26 |     return possibleTransitions.some((t) => t.target === stateNode)
27 |   }, [previewedEvent, machine, machineState, stateNode])
28 | 
29 |   const layout = useMemo(() => getLayoutStyles(node.layout), [node.layout])
30 | 
31 |   return (
32 |     <div
33 |       data-part="state-node-group"
34 |       data-active={dataAttr(isActiveStateNode)}
35 |       data-previewed={dataAttr(isPreviewedState)}
36 |       style={{ position: "absolute", ...layout.position }}
37 |     >
38 |       <div
39 |         data-part="state-node"
40 |         data-type={stateNode.type}
41 |         data-parent-type={stateNode.parent?.type}
42 |         data-atomic={dataAttr(stateNode.type === "atomic")}
43 |         data-rect-id={stateNode.id}
44 |         style={layout.dimensions}
45 |       >
46 |         <div
47 |           data-part="state-node-content"
48 |           data-atomic={dataAttr(stateNode.type === "atomic")}
49 |           data-rect-id={`${stateNode.id}:content`}
50 |         >
51 |           <StateNodeHeader value={stateNode.key} tags={stateNode.tags} />
52 | 
53 |           <StateNodeActions node={stateNode} kind="effect" />
54 |           <StateNodeActions node={stateNode} kind="entry" />
55 |           <StateNodeActions node={stateNode} kind="exit" />
56 |         </div>
57 | 
58 |         {"states" in stateNode && (
59 |           <div data-part="state-node-states">
60 |             {node.children.map((childNode) => (
61 |               <StateNode key={childNode.id} node={childNode} />
62 |             ))}
63 |           </div>
64 |         )}
65 |       </div>
66 |     </div>
67 |   )
68 | }
69 | 


--------------------------------------------------------------------------------
/components/visualizer/graph/state-node/layout.ts:
--------------------------------------------------------------------------------
 1 | import { DirectedGraphNode } from "../../utils/graph/create-graph"
 2 | 
 3 | export interface LayoutStyles {
 4 |   position: {
 5 |     left?: string
 6 |     top?: string
 7 |   }
 8 |   dimensions?: {
 9 |     width: string
10 |     height: string
11 |   }
12 | }
13 | 
14 | export const getLayoutStyles = (layout: DirectedGraphNode["layout"]): LayoutStyles => {
15 |   if (!layout) return { position: {} }
16 | 
17 |   return {
18 |     position: {
19 |       left: `${layout.x}px`,
20 |       top: `${layout.y}px`,
21 |     },
22 |     dimensions: {
23 |       width: `${layout.width}px`,
24 |       height: `${layout.height}px`,
25 |     },
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/components/visualizer/graph/transition.tsx:
--------------------------------------------------------------------------------
 1 | import type { Point } from "@zag-js/rect-utils"
 2 | import { DirectedGraphEdge } from "../utils/graph/create-graph"
 3 | import { dataAttr } from "@zag-js/dom-query"
 4 | import { useSimulation } from "../simulation/context"
 5 | import { Action } from "./action"
 6 | import { getNextEvents } from "../utils/machine/misc"
 7 | import { parseGuardCondition } from "../utils/machine/parse-guard"
 8 | import { isStateNodeActive } from "../utils/machine/state-node"
 9 | 
10 | export const Transition: React.FC<{
11 |   edge: DirectedGraphEdge
12 |   position?: Point
13 | }> = ({ edge, position }) => {
14 |   const { service, child } = useSimulation()
15 | 
16 |   const machine = service.refs.get("machine")
17 |   if (!machine) return null
18 |   const machineState = child.state.get()
19 | 
20 |   const nextEvents = getNextEvents(machine, machineState)
21 | 
22 |   const isPossibleTransition = nextEvents.includes(edge.transition.eventType)
23 | 
24 |   const sourceIsActive = isStateNodeActive(edge.source, machine.id, machineState)
25 |   const isPotential = isPossibleTransition && sourceIsActive
26 | 
27 |   return (
28 |     <button
29 |       data-part="transition"
30 |       data-potential={dataAttr(isPotential)}
31 |       data-disabled={dataAttr(!isPossibleTransition)}
32 |       disabled={!isPossibleTransition}
33 |       data-rect-id={edge.id}
34 |       style={{
35 |         position: "absolute",
36 |         ...(position && {
37 |           left: `${position.x}px`,
38 |           top: `${position.y}px`,
39 |         }),
40 |       }}
41 |       onMouseEnter={() => {
42 |         if (!isPotential) return
43 |         service.send({
44 |           type: "PREVIEW_EVENT",
45 |           eventType: edge.transition.eventType,
46 |         })
47 |       }}
48 |       onMouseLeave={() => {
49 |         service.send({
50 |           type: "UNPREVIEW_EVENT",
51 |         })
52 |       }}
53 |       onClick={() => {
54 |         if (!isPossibleTransition) return
55 |         service.send({
56 |           type: "CHILD_TRANSITION",
57 |           eventType: edge.transition.eventType,
58 |         })
59 |       }}
60 |     >
61 |       <div data-part="transition-label">
62 |         <span data-part="transition-event">
63 |           <div data-part="event-type">
64 |             <div data-part="event-type-text">{edge.transition.eventType}</div>
65 |           </div>
66 |         </span>
67 |         {edge.transition.condition && (
68 |           <span
69 |             data-part="transition-guard"
70 |             dangerouslySetInnerHTML={{
71 |               __html: parseGuardCondition(edge.transition.condition),
72 |             }}
73 |           />
74 |         )}
75 |       </div>
76 |       <div data-part="transition-content">
77 |         {edge.transition.actions && edge.transition.actions.length > 0 && (
78 |           <div data-part="transition-actions">
79 |             {edge.transition.actions.map((action, index) => {
80 |               return <Action key={index} action={action} kind="do" />
81 |             })}
82 |           </div>
83 |         )}
84 |       </div>
85 |     </button>
86 |   )
87 | }
88 | 


--------------------------------------------------------------------------------
/components/visualizer/graph/wrapper.tsx:
--------------------------------------------------------------------------------
 1 | /* eslint-disable react/no-children-prop */
 2 | 
 3 | import { memo, useMemo } from "react";
 4 | 
 5 | import { createDirectedGraph } from "@/components/visualizer/utils/graph/create-graph";
 6 | import { useSimulation } from "@/components/visualizer/simulation/context";
 7 | 
 8 | import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 9 | import { Graph } from "@/components/visualizer/graph";
10 | import { Background } from "@/components/visualizer/background";
11 | import { Controls } from "@/components/visualizer/controls";
12 | import { Nav } from "@/components/visualizer/graph/nav";
13 | 
14 | export const GraphWrapper = memo(function GraphWrapper() {
15 |   const { service } = useSimulation();
16 | 
17 |   const machine = service.refs.get("machine");
18 | 
19 |   const graph = useMemo(
20 |     () => (machine ? createDirectedGraph(machine) : undefined),
21 | 
22 |     // eslint-disable-next-line react-hooks/exhaustive-deps
23 |     [machine?.id]
24 |   );
25 | 
26 |   return (
27 |     <div className="graph-wrapper">
28 |       <TransformWrapper
29 |         limitToBounds={false}
30 |         minScale={0.05}
31 |         doubleClick={{
32 |           disabled: true,
33 |         }}
34 |       >
35 |         <div id="graph-content" className="graph-content">
36 |           {graph ? (
37 |             <Graph graph={graph} />
38 |           ) : (
39 |             // Just because the wrapper always needs a content in the dom
40 |             <TransformComponent children=" " />
41 |           )}
42 |         </div>
43 | 
44 |         <Background />
45 |         <Controls />
46 |         <Nav />
47 |       </TransformWrapper>
48 |     </div>
49 |   );
50 | });
51 | 
52 | GraphWrapper.displayName = "GraphWrapper";
53 | 


--------------------------------------------------------------------------------
/components/visualizer/index.tsx:
--------------------------------------------------------------------------------
 1 | import { useMachine } from "@zag-js/react";
 2 | import type { Machine as ZagMachine } from "@zag-js/core";
 3 | 
 4 | import { SimulationProvider } from "@/components/visualizer/simulation/context";
 5 | import { simMachine } from "@/components/visualizer/simulation/machine";
 6 | import { useEffectOnce } from "@/components/visualizer/utils/hooks/use-effect-once";
 7 | import { createRootNode } from "@/components/visualizer/utils/graph/create-root-node";
 8 | import type { Machine } from "@/components/visualizer/types";
 9 | import { GraphWrapper } from "@/components/visualizer/graph/wrapper";
10 | import { useDOMSandbox } from "./dom-sandbox";
11 | 
12 | interface VisualizerProps {
13 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any
14 |   machine: ZagMachine<any>;
15 |   serializedMachine: Machine;
16 |   settings: Record<string, unknown>;
17 | }
18 | 
19 | export function Visualizer(props: VisualizerProps) {
20 |   const { machine, serializedMachine, settings } = props;
21 |   const { DomSandbox, getRootNode } = useDOMSandbox();
22 | 
23 |   const simService = useMachine(simMachine);
24 | 
25 |   const childService = useMachine(machine, {
26 |     ...settings,
27 |     getRootNode,
28 |   });
29 | 
30 |   useEffectOnce(() => {
31 |     const child = childService;
32 |     const machine = createRootNode(
33 |       serializedMachine.id,
34 |       serializedMachine,
35 |       child?.state?.initial ?? ""
36 |     );
37 |     simService.send({ type: "SET_CHILD", child, machine, settings });
38 |   });
39 | 
40 |   return (
41 |     <SimulationProvider value={{ service: simService, child: childService }}>
42 |       <GraphWrapper />
43 |       <DomSandbox />
44 |     </SimulationProvider>
45 |   );
46 | }
47 | 


--------------------------------------------------------------------------------
/components/visualizer/simulation/context.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext, useContext } from "react"
 2 | import type { SimulationSchema } from "./machine"
 3 | import type { Service } from "@zag-js/core"
 4 | 
 5 | export type SimulationContextValue = {
 6 |   service: Service<SimulationSchema>
 7 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 8 |   child: Service<any>
 9 | }
10 | 
11 | const SimulationContext = createContext<SimulationContextValue | undefined>(undefined)
12 | 
13 | export const SimulationProvider: React.FC<{
14 |   children: React.ReactNode
15 |   value: SimulationContextValue
16 | }> = ({ children, value }) => {
17 |   return <SimulationContext.Provider value={value}>{children}</SimulationContext.Provider>
18 | }
19 | 
20 | export const useSimulation = (): SimulationContextValue => {
21 |   const context = useContext(SimulationContext)
22 |   if (!context) {
23 |     throw new Error("useSimulation must be used within a SimulationProvider")
24 |   }
25 |   return context
26 | }
27 | 


--------------------------------------------------------------------------------
/components/visualizer/simulation/machine.ts:
--------------------------------------------------------------------------------
  1 | import { createMachine } from "@zag-js/core"
  2 | import type { Service } from "@zag-js/core"
  3 | import type { StateNode } from "../utils/graph/types"
  4 | 
  5 | export const simMachine = createMachine<SimulationSchema>({
  6 |   initialState() {
  7 |     return "idle"
  8 |   },
  9 | 
 10 |   on: {
 11 |     SET_CHILD: {
 12 |       actions: ["setChild"],
 13 |       target: "registered",
 14 |     },
 15 |     PREPARE_ELK_GRAPH: {
 16 |       target: "pending",
 17 |     },
 18 |     PREVIEW_EVENT: {
 19 |       actions: ["previewEvent"],
 20 |     },
 21 |     UNPREVIEW_EVENT: {
 22 |       actions: ["unpreviewEvent"],
 23 |     },
 24 |     CHILD_TRANSITION: {
 25 |       actions: ["childTransition"],
 26 |     },
 27 |   },
 28 | 
 29 |   states: {
 30 |     idle: {},
 31 |     registered: {},
 32 |     pending: {
 33 |       on: {
 34 |         ELK_GRAPH_READY: {
 35 |           target: "ready",
 36 |         },
 37 |       },
 38 |     },
 39 | 
 40 |     ready: {},
 41 |   },
 42 | 
 43 |   context({ bindable }) {
 44 |     return {
 45 |       previewedEvent: bindable<string | undefined>(() => ({
 46 |         defaultValue: undefined,
 47 |       })),
 48 |     }
 49 |   },
 50 | 
 51 |   refs() {
 52 |     return {
 53 |       child: undefined,
 54 |       machine: undefined,
 55 |       settings: undefined,
 56 |     }
 57 |   },
 58 | 
 59 |   implementations: {
 60 |     actions: {
 61 |       setChild({ refs, event }) {
 62 |         refs.set("child", event.child)
 63 |         refs.set("machine", event.machine)
 64 |         refs.set("settings", event.settings)
 65 |       },
 66 |       previewEvent({ context, event }) {
 67 |         context.set("previewedEvent", event.eventType)
 68 |       },
 69 |       unpreviewEvent({ context }) {
 70 |         context.set("previewedEvent", undefined)
 71 |       },
 72 |       childTransition({ refs, event }) {
 73 |         refs.get("child")?.send({ type: event.eventType })
 74 |       },
 75 |     },
 76 |   },
 77 | })
 78 | 
 79 | interface SimulationContext {
 80 |   previewedEvent: string | undefined
 81 | }
 82 | 
 83 | export interface SimulationSchema {
 84 |   context: SimulationContext
 85 |   initial: "idle"
 86 |   refs: {
 87 |     // eslint-disable-next-line @typescript-eslint/no-explicit-any
 88 |     child: Service<any> | undefined
 89 |     machine: StateNode | undefined
 90 |     settings: Record<string, unknown> | undefined
 91 |   }
 92 |   action: "setChild" | "previewEvent" | "unpreviewEvent" | "childTransition"
 93 |   event:
 94 |     | {
 95 |         type: "SET_CHILD"
 96 |         // eslint-disable-next-line @typescript-eslint/no-explicit-any
 97 |         child: Service<any>
 98 |         machine: StateNode
 99 |         settings: Record<string, unknown>
100 |       }
101 |     | { type: "PREPARE_ELK_GRAPH" }
102 |     | { type: "ELK_GRAPH_READY" }
103 |     | { type: "PREVIEW_EVENT"; eventType: string }
104 |     | { type: "UNPREVIEW_EVENT" }
105 |     | { type: "CHILD_TRANSITION"; eventType: string }
106 |   state: "idle" | "registered" | "pending" | "ready"
107 | }
108 | 


--------------------------------------------------------------------------------
/components/visualizer/types.ts:
--------------------------------------------------------------------------------
 1 | import type { Machine as ZagMachine, Transition as ZagTransition } from "@zag-js/core"
 2 | 
 3 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
 4 | export interface Machine extends ZagMachine<any> {
 5 |   id: string
 6 | }
 7 | 
 8 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
 9 | export interface Transition extends ZagTransition<any> {
10 |   guard?: string
11 | }
12 | 


--------------------------------------------------------------------------------
/components/visualizer/utils/graph/create-graph.ts:
--------------------------------------------------------------------------------
  1 | import type { StateNode, StateTransition } from "./types"
  2 | import type { Point } from "@zag-js/rect-utils"
  3 | import type { ElkExtendedEdge } from "elkjs"
  4 | 
  5 | export type DirectedGraphLabel = {
  6 |   text: string
  7 |   x: number
  8 |   y: number
  9 | }
 10 | 
 11 | export type DirectedGraphPort = {
 12 |   id: string
 13 | }
 14 | 
 15 | export type DirectedGraphEdgeConfig = {
 16 |   id: string
 17 |   source: StateNode
 18 |   target: StateNode
 19 |   label: DirectedGraphLabel
 20 |   transition: StateTransition
 21 |   sections: ElkExtendedEdge["sections"]
 22 | }
 23 | 
 24 | export type DirectedGraphNodeConfig = {
 25 |   id: string
 26 |   stateNode: StateNode
 27 |   children: DirectedGraphNode[]
 28 |   ports: DirectedGraphPort[]
 29 |   /**
 30 |    * The edges representing all transitions from this `stateNode`.
 31 |    */
 32 |   edges: DirectedGraphEdge[]
 33 | }
 34 | 
 35 | export type NodeLayout = {
 36 |   x: number
 37 |   y: number
 38 |   width: number
 39 |   height: number
 40 | }
 41 | 
 42 | export class DirectedGraphNode {
 43 |   public id: string
 44 |   public data: StateNode
 45 |   public children: DirectedGraphNode[]
 46 |   public ports: DirectedGraphPort[]
 47 |   public edges: DirectedGraphEdge[]
 48 | 
 49 |   /**
 50 |    * The position of the graph node (relative to parent)
 51 |    * and its dimensions
 52 |    */
 53 |   public layout?: NodeLayout
 54 | 
 55 |   /**
 56 |    * Gets the absolute position of the graph node
 57 |    */
 58 |   public get absolute(): Point | undefined {
 59 |     if (!this.layout) return undefined
 60 |     if (!this.parent) return this.layout
 61 |     const parentPos = this.parent.absolute
 62 |     if (!parentPos) return undefined
 63 | 
 64 |     return {
 65 |       x: this.layout.x + parentPos.x,
 66 |       y: this.layout.y + parentPos.y,
 67 |     }
 68 |   }
 69 | 
 70 |   constructor(
 71 |     config: DirectedGraphNodeConfig,
 72 |     public parent?: DirectedGraphNode,
 73 |   ) {
 74 |     this.id = config.id
 75 |     this.data = config.stateNode
 76 |     this.children = config.children
 77 |     this.children.forEach((child) => {
 78 |       child.parent = this
 79 |     })
 80 |     this.ports = config.ports
 81 |     this.edges = config.edges.map((edgeConfig) => new DirectedGraphEdge(edgeConfig))
 82 |   }
 83 | 
 84 |   public get level(): number {
 85 |     return (this.parent?.level ?? -1) + 1
 86 |   }
 87 | }
 88 | 
 89 | export class DirectedGraphEdge {
 90 |   public id: string
 91 |   public source: StateNode
 92 |   public target: StateNode
 93 |   public label: DirectedGraphLabel
 94 |   public transition: StateTransition
 95 |   public sections: ElkExtendedEdge["sections"]
 96 | 
 97 |   constructor({ id, source, target, label, transition, sections }: DirectedGraphEdgeConfig) {
 98 |     this.id = id
 99 |     this.source = source
100 |     this.target = target
101 |     this.label = label
102 |     this.transition = transition
103 |     this.sections = sections
104 |   }
105 | 
106 |   /**
107 |    * Checks if this edge points back to its source node
108 |    */
109 |   public get isLoop(): boolean {
110 |     return this.source === this.target
111 |   }
112 | 
113 |   /**
114 |    * Updates the sections of this edge with translated coordinates
115 |    */
116 |   public updateSectionsWithTranslation(sections: ElkExtendedEdge["sections"], translation: Point): void {
117 |     if (!sections) {
118 |       this.sections = []
119 |       return
120 |     }
121 | 
122 |     this.sections = sections.map((section) => ({
123 |       ...section,
124 |       startPoint: {
125 |         x: section.startPoint.x + translation.x,
126 |         y: section.startPoint.y + translation.y,
127 |       },
128 |       endPoint: {
129 |         x: section.endPoint.x + translation.x,
130 |         y: section.endPoint.y + translation.y,
131 |       },
132 |       bendPoints:
133 |         section.bendPoints?.map((point) => ({
134 |           x: point.x + translation.x,
135 |           y: point.y + translation.y,
136 |         })) ?? [],
137 |     }))
138 |   }
139 | 
140 |   /**
141 |    * Updates the label position with translation
142 |    */
143 |   public updateLabelWithTranslation(x: number, y: number, translation: Point): void {
144 |     this.label.x = x + translation.x
145 |     this.label.y = y + translation.y
146 |   }
147 | }
148 | 
149 | function flatten<T>(array: T[][]): T[] {
150 |   return ([] as T[]).concat(...array)
151 | }
152 | 
153 | const createEdge = (
154 |   node: StateNode,
155 |   transition: StateTransition,
156 |   transitionIndex: number,
157 |   targetIndex: number,
158 |   target: StateNode,
159 | ): DirectedGraphEdge => {
160 |   return new DirectedGraphEdge({
161 |     id: `${node.id}:${transitionIndex}:${targetIndex}`,
162 |     source: node,
163 |     target,
164 |     label: { text: transition.eventType, x: 0, y: 0 },
165 |     transition,
166 |     sections: [],
167 |   })
168 | }
169 | 
170 | const createEdgesForNode = (node: StateNode): DirectedGraphEdge[] => {
171 |   return flatten(
172 |     node.transitions.map((transition, transitionIndex) => {
173 |       const targets = transition.target ? [transition.target] : [node]
174 |       return targets.map((target, targetIndex) => createEdge(node, transition, transitionIndex, targetIndex, target))
175 |     }),
176 |   )
177 | }
178 | 
179 | export const createDirectedGraph = (node: StateNode): DirectedGraphNode => {
180 |   return new DirectedGraphNode({
181 |     id: node.id,
182 |     stateNode: node,
183 |     children: getChildren(node).map(createDirectedGraph),
184 |     ports: [],
185 |     edges: createEdgesForNode(node),
186 |   })
187 | }
188 | 
189 | export function getChildren(stateNode: StateNode): StateNode[] {
190 |   if (!stateNode.states) return []
191 | 
192 |   return Object.entries(stateNode.states)
193 |     .map(([, node]) => node)
194 |     .sort((a, b) => b.order - a.order)
195 | }
196 | 


--------------------------------------------------------------------------------
/components/visualizer/utils/graph/create-root-node.ts:
--------------------------------------------------------------------------------
  1 | import type { ActionsOrFn } from "@zag-js/core"
  2 | import type { StateDefinition, StateNode, StateTransition } from "./types"
  3 | import type { Machine, Transition } from "../../types"
  4 | import { findTargetState } from "../machine/state-node"
  5 | 
  6 | export const createRootNode = (id: string, machineObj: Machine, initial: string): StateNode => {
  7 |   // Create a wrapper state that represents the root
  8 |   const rootState = {
  9 |     id,
 10 |     states: machineObj.states,
 11 |     on: machineObj.on,
 12 |     entry: machineObj.entry,
 13 |     exit: machineObj.exit,
 14 |     effects: machineObj.effects,
 15 |   }
 16 | 
 17 |   const rootNode = createNode({ id, state: rootState, initial })
 18 | 
 19 |   // Set machine reference on root node and establish hierarchy
 20 |   rootNode.machine = rootNode
 21 | 
 22 |   // Set machine reference on all child nodes and establish parent-child relationships
 23 |   const setMachineAndParentRefs = (node: StateNode, parent?: StateNode) => {
 24 |     node.machine = rootNode
 25 |     node.parent = parent
 26 |     Object.values(node.states).forEach((child) => setMachineAndParentRefs(child, node))
 27 |   }
 28 |   setMachineAndParentRefs(rootNode)
 29 | 
 30 |   // Now that the hierarchy is established, create transitions
 31 |   const createTransitionsForNode = (node: StateNode, stateDefinition: Machine["states"][number]) => {
 32 |     node.transitions = createTransitions(stateDefinition, node)
 33 |     Object.entries(node.states).forEach(([id, childNode]) => {
 34 |       createTransitionsForNode(childNode, machineObj.states[id])
 35 |     })
 36 |   }
 37 |   createTransitionsForNode(rootNode, rootState)
 38 | 
 39 |   return rootNode
 40 | }
 41 | 
 42 | interface CreateNodeProps {
 43 |   state: Machine["states"][number] & {
 44 |     states?: Record<string, Machine["states"][number]>
 45 |     id?: string
 46 |   }
 47 |   id: string
 48 |   initial?: string | null
 49 |   order?: number
 50 | }
 51 | 
 52 | const createNode = ({ state, id, initial = null, order = 0 }: CreateNodeProps): StateNode => {
 53 |   const states = state.states ?? {}
 54 |   const stateEntries = Object.entries(states)
 55 | 
 56 |   const node: StateNode = {
 57 |     id,
 58 |     key: id,
 59 |     initial,
 60 |     order,
 61 |     tags: state.tags ?? [],
 62 |     type: stateEntries.length > 0 ? "compound" : "atomic",
 63 |     states: {},
 64 |     parent: undefined, // Will be set after creation
 65 |     definition: createDefinition(state),
 66 |     transitions: [],
 67 |     machine: undefined as unknown as StateNode, // Will be set after root node is created
 68 |   }
 69 | 
 70 |   // Create all states first
 71 |   node.states = stateEntries.reduce(
 72 |     (acc, [stateId, stateDefinition], index) => {
 73 |       const childNode = createNode({
 74 |         state: stateDefinition,
 75 |         id: `${id}.${stateId}`, // Create hierarchical ID
 76 |         order: order + index + 1,
 77 |       })
 78 |       childNode.key = stateId // Keep original key
 79 |       acc[stateId] = childNode
 80 |       return acc
 81 |     },
 82 |     {} as Record<string, StateNode>,
 83 |   )
 84 | 
 85 |   return node
 86 | }
 87 | 
 88 | const createDefinition = (state: Machine["states"][number]): StateDefinition => {
 89 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 90 |   const resolveAction = (action: ActionsOrFn<any> | undefined) => {
 91 |     if (!action) return []
 92 |     if (typeof action === "function") return ["function"]
 93 |     return action
 94 |   }
 95 | 
 96 |   return {
 97 |     entry: resolveAction(state.entry),
 98 |     exit: resolveAction(state.exit),
 99 |     effect: resolveAction(state.effects),
100 |   }
101 | }
102 | 
103 | const createTransitions = (state: Machine["states"][number], currentNode: StateNode): StateTransition[] => {
104 |   const transitions: StateTransition[] = []
105 | 
106 |   const addTransition = (eventType: string, transition: Transition) => {
107 |     // If no target specified, it's a self-transition
108 |     const targetState = transition.target
109 |       ? (findTargetState(currentNode, transition.target) ?? currentNode)
110 |       : currentNode
111 | 
112 |     if (transition.target && targetState === currentNode) {
113 |       console.warn(
114 |         `Target state "${transition.target}" not found for transition in "${eventType}" from state "${currentNode.id}"`,
115 |         "\nCurrent node:",
116 |         currentNode,
117 |         "\nParent node:",
118 |         currentNode.parent,
119 |       )
120 |       return
121 |     }
122 | 
123 |     transitions.push({
124 |       eventType,
125 |       actions: typeof transition.actions === "string" ? [transition.actions] : (transition.actions ?? []),
126 |       condition: transition.guard,
127 |       target: targetState,
128 |     })
129 |   }
130 | 
131 |   const stateOn = state.on ?? {}
132 |   for (const [eventType, transitionData] of Object.entries(stateOn)) {
133 |     if (Array.isArray(transitionData)) {
134 |       transitionData.forEach((transition) => addTransition(eventType, transition))
135 |     } else {
136 |       if (transitionData) addTransition(eventType, transitionData)
137 |     }
138 |   }
139 | 
140 |   return transitions
141 | }
142 | 


--------------------------------------------------------------------------------
/components/visualizer/utils/graph/elk.machine.ts:
--------------------------------------------------------------------------------
 1 | import { createMachine } from "@zag-js/core"
 2 | import type { StateElkNode } from "@/components/visualizer/utils/graph/elk.types"
 3 | import { DirectedGraphNode } from "./create-graph"
 4 | import { getElkGraph } from "./elk.utils"
 5 | 
 6 | export const elkMachine = createMachine<ElkSchema>({
 7 |   initialState() {
 8 |     return "loading"
 9 |   },
10 | 
11 |   states: {
12 |     loading: {
13 |       entry: ["invokePrepareElkGraph", "setElkGraph", "invokeOnElkGraphReady"],
14 |       on: {
15 |         ELK_GRAPH_SUCCESS: {
16 |           target: "success",
17 |         },
18 |       },
19 |     },
20 |     success: {},
21 |   },
22 | 
23 |   refs({ prop }) {
24 |     return {
25 |       graph: prop("graph"),
26 |     }
27 |   },
28 | 
29 |   context({ bindable }) {
30 |     return {
31 |       elkGraph: bindable<StateElkNode | undefined>(() => ({
32 |         defaultValue: undefined,
33 |       })),
34 |     }
35 |   },
36 | 
37 |   implementations: {
38 |     actions: {
39 |       invokePrepareElkGraph: ({ prop }) => {
40 |         prop("onPrepareElkGraph")?.()
41 |       },
42 |       setElkGraph: ({ refs, context }) => {
43 |         // Get the elk graph
44 |         const graph = refs.get("graph")
45 |         if (!graph) return
46 |         getElkGraph(graph).then((elkGraph) => {
47 |           context.set("elkGraph", elkGraph as StateElkNode)
48 |         })
49 |       },
50 |       invokeOnElkGraphReady: ({ prop, send }) => {
51 |         prop("onElkGraphReady")?.()
52 |         send({ type: "ELK_GRAPH_SUCCESS" })
53 |       },
54 |       updateElkGraph: ({ event, refs }) => {
55 |         const graph = event.graph
56 |         refs.set("graph", graph)
57 |       },
58 |     },
59 |   },
60 | })
61 | 
62 | interface ElkContext {
63 |   elkGraph: StateElkNode | undefined
64 | }
65 | 
66 | export interface ElkSchema {
67 |   props: {
68 |     graph: DirectedGraphNode
69 |     onPrepareElkGraph: () => void
70 |     onElkGraphReady: () => void
71 |   }
72 |   refs: {
73 |     graph: DirectedGraphNode | undefined
74 |   }
75 |   context: ElkContext
76 |   initial: "loading"
77 |   action: "invokePrepareElkGraph" | "setElkGraph" | "invokeOnElkGraphReady" | "updateElkGraph"
78 |   event: { type: "ELK_GRAPH_READY" } | { type: "ELK_GRAPH_SUCCESS" }
79 |   state: "loading" | "success"
80 | }
81 | 


--------------------------------------------------------------------------------
/components/visualizer/utils/graph/elk.types.ts:
--------------------------------------------------------------------------------
 1 | import type { ElkExtendedEdge, ElkNode } from "elkjs"
 2 | import { DirectedGraphEdge, DirectedGraphNode } from "./create-graph"
 3 | import type { Point } from "@zag-js/rect-utils"
 4 | import type { StateNode } from "./types"
 5 | 
 6 | export interface StateElkNode extends ElkNode {
 7 |   node: DirectedGraphNode
 8 |   absolutePosition: Point
 9 |   edges: StateElkEdge[]
10 |   children: StateElkNode[]
11 | }
12 | 
13 | export interface StateElkEdge extends ElkExtendedEdge {
14 |   edge: DirectedGraphEdge
15 | }
16 | 
17 | export type RelativeNodeEdgeMap = [Map<StateNode | undefined, DirectedGraphEdge[]>, Map<string, StateNode | undefined>]
18 | 
19 | export type DOMRectMap = Map<string, DOMRect>
20 | 
21 | export type DigraphBackLinkMap = Map<StateNode, Set<DirectedGraphEdge>>
22 | 
23 | export interface ElkRunContext {
24 |   previousError?: Error
25 |   relativeNodeEdgeMap: RelativeNodeEdgeMap
26 |   backLinkMap: DigraphBackLinkMap
27 |   rectMap: DOMRectMap
28 | }
29 | 
30 | export interface ElkNodeJSON {
31 |   id: string
32 |   layoutOptions?: Record<string, string>
33 |   width?: number
34 |   height?: number
35 |   children?: ElkNodeJSON[]
36 |   ports?: Array<{
37 |     id: string
38 |     width?: number
39 |     height?: number
40 |   }>
41 |   edges?: Array<{
42 |     id: string
43 |     labels?: Array<{
44 |       id: string
45 |       width?: number
46 |       height?: number
47 |       text?: string
48 |       layoutOptions?: Record<string, string>
49 |     }>
50 |     layoutOptions?: Record<string, string>
51 |     sources?: string[]
52 |     targets?: string[]
53 |   }>
54 | }
55 | 


--------------------------------------------------------------------------------
/components/visualizer/utils/graph/elk.utils.ts:
--------------------------------------------------------------------------------
  1 | import type { ELK, ElkNode, ElkExtendedEdge, ElkEdgeSection } from "elkjs/lib/elk.bundled"
  2 | import ELKConstructor from "elkjs/lib/elk.bundled"
  3 | 
  4 | import { DirectedGraphEdge, DirectedGraphNode } from "./create-graph"
  5 | import type { StateNode } from "./types"
  6 | import type {
  7 |   StateElkNode,
  8 |   StateElkEdge,
  9 |   ElkRunContext,
 10 |   DOMRectMap,
 11 |   DigraphBackLinkMap,
 12 |   RelativeNodeEdgeMap,
 13 |   ElkNodeJSON,
 14 | } from "./elk.types"
 15 | 
 16 | declare global {
 17 |   export const ELK: typeof import("elkjs/lib/elk.bundled").default
 18 | }
 19 | 
 20 | // Initialize ELK instance
 21 | const elk: ELK =
 22 |   typeof window !== "undefined"
 23 |     ? new ELKConstructor({ workerUrl: undefined }) // Browser - no web worker
 24 |     : new ELKConstructor() // Node.js
 25 | 
 26 | export function getAllNodes(rootNode: DirectedGraphNode): Array<DirectedGraphNode> {
 27 |   const nodes: DirectedGraphNode[] = []
 28 |   const traverse = (node: DirectedGraphNode) => {
 29 |     nodes.push(node)
 30 |     node.children.forEach(traverse)
 31 |   }
 32 |   traverse(rootNode)
 33 |   return nodes
 34 | }
 35 | 
 36 | function getBackLinkMap(digraph: DirectedGraphNode): DigraphBackLinkMap {
 37 |   const nodes = getAllNodes(digraph)
 38 |   const backLinkMap: DigraphBackLinkMap = new Map()
 39 | 
 40 |   const addMapping = (node: StateNode, edge: DirectedGraphEdge): void => {
 41 |     if (!backLinkMap.get(node)) {
 42 |       backLinkMap.set(node, new Set())
 43 |     }
 44 | 
 45 |     backLinkMap.get(node)!.add(edge)
 46 |   }
 47 | 
 48 |   nodes.forEach((node) => {
 49 |     node.edges.forEach((edge) => {
 50 |       addMapping(edge.target, edge)
 51 |     })
 52 |   })
 53 | 
 54 |   return backLinkMap
 55 | }
 56 | 
 57 | export function isStateElkNode(node: ElkNode): node is StateElkNode {
 58 |   return "absolutePosition" in node
 59 | }
 60 | 
 61 | export function getAllEdges(digraph: DirectedGraphNode): DirectedGraphEdge[] {
 62 |   const edges: DirectedGraphEdge[] = []
 63 |   const getEdgesRecursive = (dnode: DirectedGraphNode) => {
 64 |     edges.push(...dnode.edges)
 65 | 
 66 |     dnode.children.forEach(getEdgesRecursive)
 67 |   }
 68 |   getEdgesRecursive(digraph)
 69 | 
 70 |   return edges
 71 | }
 72 | 
 73 | /**
 74 |  * Returns the node that contains the `source` and `target` of the edges, which may be
 75 |  * the `source` or `target` itself.
 76 |  *
 77 |  * See https://www.eclipse.org/elk/documentation/tooldevelopers/graphdatastructure/coordinatesystem.html
 78 |  *
 79 |  * @param edge
 80 |  * @returns containing node
 81 |  */
 82 | function getContainingNode(edge: DirectedGraphEdge): StateNode | undefined {
 83 |   if (edge.isLoop) return edge.source.parent
 84 | 
 85 |   const sourceAncestors = new Set<StateNode>()
 86 |   let node = edge.source
 87 |   while (node) {
 88 |     sourceAncestors.add(node)
 89 |     node = node.parent!
 90 |   }
 91 | 
 92 |   node = edge.target
 93 |   while (node) {
 94 |     if (sourceAncestors.has(node)) return node
 95 |     node = node.parent!
 96 |   }
 97 | 
 98 |   return edge.source.machine
 99 | }
100 | 
101 | function getRelativeNodeEdgeMap(digraph: DirectedGraphNode): RelativeNodeEdgeMap {
102 |   const edges = getAllEdges(digraph)
103 | 
104 |   const map: RelativeNodeEdgeMap[0] = new Map()
105 |   const edgeMap: RelativeNodeEdgeMap[1] = new Map()
106 | 
107 |   edges.forEach((edge) => {
108 |     const containingNode = getContainingNode(edge)
109 | 
110 |     if (!map.has(containingNode)) {
111 |       map.set(containingNode, [])
112 |     }
113 | 
114 |     map.get(containingNode)!.push(edge)
115 |     edgeMap.set(edge.id, containingNode)
116 |   })
117 | 
118 |   return [map, edgeMap]
119 | }
120 | 
121 | function getElkId(id: string): string {
122 |   return id.replaceAll(".", "_").replaceAll(":", "__")
123 | }
124 | 
125 | export function toJSON(elkNode: ElkNode): ElkNodeJSON {
126 |   const { id, layoutOptions, width, height, children, edges, ports } = elkNode
127 | 
128 |   return {
129 |     id: getElkId(id),
130 |     layoutOptions,
131 |     width,
132 |     height,
133 |     children: children?.map((node) => toJSON(node as StateElkNode)),
134 |     ports: ports?.map((port) => ({
135 |       id: getElkId(port.id),
136 |       width: port.width,
137 |       height: port.height,
138 |     })),
139 |     edges: edges?.map((_edge) => {
140 |       const edge = _edge as ElkExtendedEdge
141 | 
142 |       return {
143 |         id: getElkId(edge.id),
144 |         labels: edge.labels?.map((label) => ({
145 |           id: getElkId(label.id || ""),
146 |           width: label.width,
147 |           height: label.height,
148 |           text: label.text,
149 |           layoutOptions: label.layoutOptions,
150 |         })),
151 |         layoutOptions: edge.layoutOptions,
152 |         sources: edge.sources?.map((id) => getElkId(id)),
153 |         targets: edge.targets?.map((id) => getElkId(id)),
154 |       }
155 |     }),
156 |   }
157 | }
158 | 
159 | function getElkEdge(edge: DirectedGraphEdge, rectMap: DOMRectMap): ElkExtendedEdge & { edge: DirectedGraphEdge } {
160 |   const edgeRect = rectMap.get(edge.id)!
161 |   const targetPortId = getPortId(edge)
162 | 
163 |   const isInitialEdge = edge.source.parent?.initial === edge.source.key
164 | 
165 |   const sources = [edge.source.id]
166 |   const targets = edge.isLoop ? [getSelfPortId(edge.target.id)] : [targetPortId]
167 | 
168 |   return {
169 |     id: edge.id,
170 |     sources,
171 |     targets,
172 | 
173 |     labels: [
174 |       {
175 |         id: "label:" + edge.id,
176 |         width: edgeRect.width,
177 |         height: edgeRect.height,
178 |         text: edge.label.text,
179 |         layoutOptions: {
180 |           "edgeLabels.inline": !edge.isLoop ? "true" : "false",
181 |           "edgeLabels.placement": "CENTER",
182 |           "edgeLabels.centerLabelPlacementStrategy": "TAIL_LAYER",
183 |         },
184 |       },
185 |     ],
186 |     edge,
187 |     sections: [],
188 |     layoutOptions: {
189 |       // Ensure that all edges originating from initial states point RIGHT
190 |       // (give them direction priority) so that the initial states can end up on the top left
191 |       "elk.layered.priority.direction": isInitialEdge ? "1" : "0",
192 |     },
193 |   }
194 | }
195 | 
196 | function getPortId(edge: DirectedGraphEdge): string {
197 |   return `port:${edge.id}`
198 | }
199 | 
200 | function getSelfPortId(nodeId: string): string {
201 |   return `self:${nodeId}`
202 | }
203 | 
204 | function getElkChild(node: DirectedGraphNode, runContext: ElkRunContext): StateElkNode {
205 |   const { relativeNodeEdgeMap, backLinkMap, rectMap } = runContext
206 |   const nodeRect = rectMap.get(node.id)!
207 |   const contentRect = rectMap.get(`${node.id}:content`)!
208 | 
209 |   // Edges whose source is this node
210 |   const edges = relativeNodeEdgeMap[0].get(node.data) || []
211 |   // Edges whose target is this node
212 |   const backEdges = Array.from(backLinkMap.get(node.data) ?? [])
213 | 
214 |   const hasSelfEdges = backEdges.some((edge) => edge.source === edge.target)
215 | 
216 |   // Nodes should only wrap if they have non-atomic child nodes
217 |   const shouldWrap = getDeepestNodeLevel(node) > node.level + 1
218 | 
219 |   // Compaction should apply if there was no previous error, since errors can occur
220 |   // sometimes with compaction:
221 |   // https://github.com/kieler/elkjs/issues/98
222 |   const shouldCompact = shouldWrap && !runContext.previousError
223 | 
224 |   return {
225 |     id: node.id,
226 |     ...(!node.children.length
227 |       ? {
228 |           width: nodeRect.width,
229 |           height: nodeRect.height,
230 |         }
231 |       : undefined),
232 |     node,
233 |     children: getElkChildren(node, runContext),
234 |     absolutePosition: { x: 0, y: 0 },
235 |     edges: edges.map((edge) => {
236 |       return getElkEdge(edge, rectMap)
237 |     }),
238 |     ports: backEdges
239 |       .map((backEdge) => {
240 |         return {
241 |           id: getPortId(backEdge),
242 |           width: 5, // TODO: don't hardcode, find way to reference arrow marker size
243 |           height: 5,
244 |           layoutOptions: {},
245 |         }
246 |       })
247 |       .concat(
248 |         hasSelfEdges
249 |           ? [
250 |               {
251 |                 id: getSelfPortId(node.id),
252 |                 width: 5,
253 |                 height: 5,
254 |                 layoutOptions: {},
255 |               },
256 |             ]
257 |           : [],
258 |       ),
259 |     layoutOptions: {
260 |       "elk.padding": `[top=${contentRect.height + 30}, left=30, right=30, bottom=30]`,
261 |       "elk.spacing.labelLabel": "10",
262 |       ...(shouldWrap && {
263 |         "elk.aspectRatio": "2",
264 |         "elk.layered.wrapping.strategy": "MULTI_EDGE",
265 |         ...(shouldCompact && {
266 |           "elk.layered.compaction.postCompaction.strategy": "LEFT",
267 |         }),
268 |       }),
269 |     },
270 |   }
271 | }
272 | 
273 | function getDeepestNodeLevel(node: DirectedGraphNode): number {
274 |   let maxLevel = node.level
275 | 
276 |   function traverse(n: DirectedGraphNode) {
277 |     if (n.level > maxLevel) maxLevel = n.level
278 |     n.children.forEach(traverse)
279 |   }
280 | 
281 |   traverse(node)
282 |   return maxLevel
283 | }
284 | 
285 | function getElkChildren(node: DirectedGraphNode, runContext: ElkRunContext): StateElkNode[] {
286 |   return node.children.map((childNode) => {
287 |     return getElkChild(childNode, runContext)
288 |   })
289 | }
290 | 
291 | const getRectMap = (): Promise<DOMRectMap> => {
292 |   return new Promise((resolve, reject) => {
293 |     const rectMap: DOMRectMap = new Map()
294 |     let attempts = 0
295 |     const MAX_ATTEMPTS = 50 // 5 seconds total with 100ms interval
296 | 
297 |     const collectMeasurements = () => {
298 |       const graphContent = document.querySelector("#graph-content")
299 |       if (!graphContent) {
300 |         attempts++
301 |         if (attempts >= MAX_ATTEMPTS) {
302 |           reject(new Error("Timeout waiting for graph content"))
303 |           return
304 |         }
305 |         return false
306 |       }
307 | 
308 |       const elements = graphContent.querySelectorAll("[data-rect-id]")
309 |       if (elements.length === 0) {
310 |         attempts++
311 |         if (attempts >= MAX_ATTEMPTS) {
312 |           reject(new Error("Timeout waiting for elements"))
313 |           return
314 |         }
315 |         return false
316 |       }
317 | 
318 |       // Get measurements for all elements
319 |       elements.forEach((el) => {
320 |         const rectId = (el as HTMLElement).dataset.rectId!
321 |         const rect = el.getBoundingClientRect()
322 |         rectMap.set(rectId, rect)
323 |       })
324 | 
325 |       return true
326 |     }
327 | 
328 |     const intervalId = setInterval(() => {
329 |       if (collectMeasurements()) {
330 |         clearInterval(intervalId)
331 |         resolve(rectMap)
332 |       }
333 |     }, 100)
334 |   })
335 | }
336 | 
337 | export async function getElkGraph(rootDigraphNode: DirectedGraphNode): Promise<ElkNode> {
338 |   const rectMap = await getRectMap()
339 |   const relativeNodeEdgeMap = getRelativeNodeEdgeMap(rootDigraphNode)
340 |   const backLinkMap = getBackLinkMap(rootDigraphNode)
341 |   const rootEdges = relativeNodeEdgeMap[0].get(undefined) || []
342 |   const initialRunContext: ElkRunContext = {
343 |     relativeNodeEdgeMap,
344 |     backLinkMap,
345 |     rectMap,
346 |   }
347 | 
348 |   // The root node is an invisible node; the machine node is a direct child of this node.
349 |   // It is wrapped so we can have self-loops, which cannot be placed in the root node.
350 |   const getRootElkNodeData = (runContext: ElkRunContext): ElkNode => ({
351 |     id: "root",
352 |     edges: rootEdges.map((edge) => getElkEdge(edge, rectMap)),
353 |     children: [getElkChild(rootDigraphNode, runContext)],
354 |     layoutOptions: {
355 |       "elk.hierarchyHandling": "INCLUDE_CHILDREN",
356 |       "elk.algorithm": "layered",
357 |       "elk.layered.considerModelOrder": "NODES_AND_EDGES",
358 |       "elk.layered.wrapping.strategy": "MULTI_EDGE",
359 |       "elk.aspectRatio": "2",
360 |       "elk.direction": "RIGHT",
361 |     },
362 |   })
363 | 
364 |   let rootElkNode: ElkNode | undefined = undefined
365 |   let attempts = 0
366 | 
367 |   // Make multiple attempts to layout ELK node.
368 |   // Depending on the error, certain heuristics may be applied to mitigate the error on the next attempt.
369 |   // These heuristics read the `initialRunContext.previousError` to determine what layout options to change.
370 |   while (attempts <= 2 && !rootElkNode) {
371 |     attempts++
372 |     try {
373 |       rootElkNode = await elk.layout(getRootElkNodeData(initialRunContext))
374 |     } catch (err) {
375 |       console.error(err)
376 |       initialRunContext.previousError = err as Error
377 |     }
378 |   }
379 | 
380 |   if (!rootElkNode) {
381 |     throw new Error("Unable to layout ELK node.")
382 |   }
383 | 
384 |   const stateNodeToElkNodeMap = new Map<StateNode, StateElkNode>()
385 | 
386 |   const setEdgeLayout = (edge: StateElkEdge) => {
387 |     const containingNode = relativeNodeEdgeMap[1].get(edge.id)
388 |     const elkContainingNode = containingNode && stateNodeToElkNodeMap.get(containingNode)!
389 | 
390 |     const translatedSections: ElkEdgeSection[] =
391 |       elkContainingNode && edge.sections
392 |         ? edge.sections.map((section) => {
393 |             return {
394 |               ...section,
395 |               startPoint: {
396 |                 x: section.startPoint.x + elkContainingNode.absolutePosition.x,
397 |                 y: section.startPoint.y + elkContainingNode.absolutePosition.y,
398 |               },
399 |               endPoint: {
400 |                 x: section.endPoint.x + elkContainingNode.absolutePosition.x,
401 |                 y: section.endPoint.y + elkContainingNode.absolutePosition.y,
402 |               },
403 |               bendPoints:
404 |                 section.bendPoints?.map((bendPoint) => {
405 |                   return {
406 |                     x: bendPoint.x + elkContainingNode.absolutePosition.x,
407 |                     y: bendPoint.y + elkContainingNode.absolutePosition.y,
408 |                   }
409 |                 }) ?? [],
410 |             }
411 |           })
412 |         : (edge.sections ?? [])
413 | 
414 |     edge.edge.sections = translatedSections
415 |     edge.edge.label.x = (edge.labels?.[0].x || 0) + (elkContainingNode?.absolutePosition.x || 0)
416 |     edge.edge.label.y = (edge.labels?.[0].y || 0) + (elkContainingNode?.absolutePosition.y || 0)
417 |   }
418 | 
419 |   const setLayout = (elkNode: StateElkNode, parent: StateElkNode | undefined) => {
420 |     stateNodeToElkNodeMap.set(elkNode.node.data, elkNode)
421 |     elkNode.absolutePosition = {
422 |       x: (parent?.absolutePosition.x ?? 0) + elkNode.x!,
423 |       y: (parent?.absolutePosition.y ?? 0) + elkNode.y!,
424 |     }
425 | 
426 |     elkNode.node.layout = {
427 |       width: elkNode.width!,
428 |       height: elkNode.height!,
429 |       x: elkNode.x!,
430 |       y: elkNode.y!,
431 |     }
432 | 
433 |     elkNode.edges?.forEach((edge) => {
434 |       setEdgeLayout(edge)
435 |     })
436 | 
437 |     elkNode.children?.forEach((cn) => {
438 |       if (isStateElkNode(cn)) {
439 |         setLayout(cn, elkNode)
440 |       }
441 |     })
442 |   }
443 | 
444 |   ;(rootElkNode.edges as StateElkEdge[])?.forEach(setEdgeLayout)
445 | 
446 |   // Uncomment this for graph debugging:
447 |   // if (process.env.NODE_ENV !== "production") {
448 |   //   console.log(JSON.stringify(toJSON(rootElkNode as StateElkNode), null, 2))
449 |   // }
450 | 
451 |   // unwrap from the "fake" ancestor node created in the `elkNode` structure
452 |   const machineElkNode = rootElkNode.children![0] as StateElkNode
453 | 
454 |   setLayout(machineElkNode, undefined)
455 | 
456 |   return rootElkNode
457 | }
458 | 


--------------------------------------------------------------------------------
/components/visualizer/utils/graph/types.ts:
--------------------------------------------------------------------------------
 1 | export type StateDefinition = Partial<Record<"effect" | "entry" | "exit", string[] | { [key: string]: string[] }>>
 2 | 
 3 | export interface StateNode {
 4 |   /**
 5 |    * The unique identifier for this node.
 6 |    */
 7 |   id: string
 8 | 
 9 |   /**
10 |    * The key for this node.
11 |    */
12 |   key: string
13 | 
14 |   /**
15 |    * The initial state for this node.
16 |    */
17 |   initial?: string | null
18 | 
19 |   /**
20 |    * An ordered list of possible transitions from this node.
21 |    */
22 |   transitions: StateTransition[]
23 | 
24 |   /**
25 |    * An array of any child state nodes (sub-states).
26 |    */
27 |   states: Record<string, StateNode>
28 | 
29 |   /**
30 |    * The position or definition order of this node (e.g., 1, 2, 3).
31 |    */
32 |   order: number
33 | 
34 |   /**
35 |    * References to invoke, entry, and exit actions.
36 |    * For instance: { name: "onEnter", id: "logEvent" }
37 |    */
38 |   definition: StateDefinition
39 | 
40 |   /**
41 |    * Any descriptive tags applied to this node.
42 |    */
43 |   tags: string[]
44 | 
45 |   /**
46 |    * A reference to this node’s parent, if any.
47 |    */
48 |   parent?: StateNode | undefined
49 | 
50 |   /**
51 |    * The node’s type. Only the root node is typically "compound".
52 |    * Other nodes are "atomic".
53 |    */
54 |   type: "atomic" | "compound"
55 | 
56 |   /**
57 |    * The machine that contains this node.
58 |    */
59 |   machine: StateNode
60 | }
61 | 
62 | export interface StateTransition {
63 |   /**
64 |    * The event that triggers this transition.
65 |    */
66 |   eventType: string
67 | 
68 |   /**
69 |    * A condition or guard to check before this transition is taken.
70 |    */
71 |   condition?: string
72 | 
73 |   /**
74 |    * A list of actions to perform on transition.
75 |    */
76 |   actions?: string[]
77 | 
78 |   /**
79 |    * The target state node for this transition.
80 |    */
81 |   target: StateNode
82 | }
83 | 


--------------------------------------------------------------------------------
/components/visualizer/utils/hooks/use-effect-once.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react"
2 | 
3 | export function useEffectOnce(fn: VoidFunction) {
4 |   // eslint-disable-next-line react-hooks/exhaustive-deps
5 |   useEffect(fn, [])
6 | }
7 | 


--------------------------------------------------------------------------------
/components/visualizer/utils/machine/misc.ts:
--------------------------------------------------------------------------------
 1 | import type { StateNode } from "../graph/types"
 2 | 
 3 | export const getNextEvents = (machine: StateNode, state: string) => {
 4 |   const stateTransitions = machine.states[state].transitions.concat(machine.transitions)
 5 |   return stateTransitions.map((t) => t.eventType)
 6 | }
 7 | 
 8 | export const getNextTransitions = (machine: StateNode, state: string, event: string) => {
 9 |   const stateTransitions = machine.states[state].transitions.concat(machine.transitions)
10 |   return stateTransitions.filter((t) => t.eventType === event)
11 | }
12 | 


--------------------------------------------------------------------------------
/components/visualizer/utils/machine/parse-guard.ts:
--------------------------------------------------------------------------------
 1 | export function parseGuardCondition(condition: string): string {
 2 |   // Tokenize the input string
 3 |   const tokens: { type: "condition" | "bracket" | "name" | "comma" | "space"; value: string }[] = []
 4 | 
 5 |   let currentIndex = 0
 6 | 
 7 |   while (currentIndex < condition.length) {
 8 |     const char = condition[currentIndex]
 9 | 
10 |     // Handle conditions (and, or, not)
11 |     if (condition.substring(currentIndex).match(/^(and|or|not)(?=\(|\s)/)) {
12 |       const match = condition.substring(currentIndex).match(/^(and|or|not)/)![0]
13 |       tokens.push({ type: "condition", value: match })
14 |       currentIndex += match.length
15 |       continue
16 |     }
17 | 
18 |     // Handle brackets
19 |     if (char === "(" || char === ")") {
20 |       tokens.push({ type: "bracket", value: char })
21 |       currentIndex++
22 |       continue
23 |     }
24 | 
25 |     // Handle quoted strings
26 |     if (char === '"') {
27 |       const endQuoteIndex = condition.indexOf('"', currentIndex + 1)
28 |       if (endQuoteIndex !== -1) {
29 |         const quotedString = condition.substring(currentIndex, endQuoteIndex + 1)
30 |         tokens.push({ type: "name", value: quotedString })
31 |         currentIndex = endQuoteIndex + 1
32 |         continue
33 |       }
34 |     }
35 | 
36 |     // Handle commas
37 |     if (char === ",") {
38 |       tokens.push({ type: "comma", value: char })
39 |       currentIndex++
40 |       continue
41 |     }
42 | 
43 |     // Handle spaces
44 |     if (char === " ") {
45 |       tokens.push({ type: "space", value: char })
46 |       currentIndex++
47 |       continue
48 |     }
49 | 
50 |     // Handle unquoted function arguments (likely identifiers)
51 |     if (/[a-zA-Z0-9_]/.test(char)) {
52 |       let identifier = ""
53 |       let i = currentIndex
54 | 
55 |       while (i < condition.length && /[a-zA-Z0-9_]/.test(condition[i])) {
56 |         identifier += condition[i]
57 |         i++
58 |       }
59 | 
60 |       tokens.push({ type: "name", value: `"${identifier}"` })
61 |       currentIndex = i
62 |       continue
63 |     }
64 | 
65 |     // Skip unknown characters
66 |     currentIndex++
67 |   }
68 | 
69 |   // Convert tokens to HTML
70 |   let html = ""
71 | 
72 |   for (const token of tokens) {
73 |     switch (token.type) {
74 |       case "condition":
75 |         html += `<span class="condition">${token.value}</span>`
76 |         break
77 |       case "bracket":
78 |         html += `<span class="bracket">${token.value}</span>`
79 |         break
80 |       case "name":
81 |         html += `<span class="name">${token.value}</span>`
82 |         break
83 |       case "comma":
84 |         html += token.value
85 |         break
86 |       case "space":
87 |         html += token.value
88 |         break
89 |     }
90 |   }
91 | 
92 |   return html
93 | }
94 | 


--------------------------------------------------------------------------------
/components/visualizer/utils/machine/serialize.ts:
--------------------------------------------------------------------------------
  1 | import ts from "typescript"
  2 | import type { Machine } from "../../types"
  3 | export const ELSE_GUARD = "else_guard"
  4 | 
  5 | const TOP_LEVEL_KEYS_TO_EXTRACT = ["on", "effects", "entry", "exit", "states"] as const
  6 | 
  7 | function isTopLevelKey(key: string): key is (typeof TOP_LEVEL_KEYS_TO_EXTRACT)[number] {
  8 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any
  9 |   return TOP_LEVEL_KEYS_TO_EXTRACT.includes(key as any)
 10 | }
 11 | 
 12 | function parseChooseExpression(node: ts.CallExpression, sourceFile: ts.SourceFile) {
 13 |   const result: Record<string, string[]> = {}
 14 | 
 15 |   if (node.arguments.length === 0) return result
 16 | 
 17 |   const arrayArg = node.arguments[0]
 18 |   if (!ts.isArrayLiteralExpression(arrayArg)) return result
 19 | 
 20 |   for (const element of arrayArg.elements) {
 21 |     if (!ts.isObjectLiteralExpression(element)) continue
 22 | 
 23 |     let guard: string | null = null
 24 |     let actions: string[] = []
 25 | 
 26 |     for (const prop of element.properties) {
 27 |       if (!ts.isPropertyAssignment(prop)) continue
 28 | 
 29 |       const propName = prop.name.getText(sourceFile)
 30 | 
 31 |       if (propName === "guard") {
 32 |         // For string literals, use the text without quotes
 33 |         if (ts.isStringLiteral(prop.initializer)) {
 34 |           guard = prop.initializer.text
 35 |         } else {
 36 |           // For function calls and other expressions, use getText
 37 |           guard = prop.initializer.getText(sourceFile)
 38 |         }
 39 |       } else if (propName === "actions") {
 40 |         if (ts.isArrayLiteralExpression(prop.initializer)) {
 41 |           actions = prop.initializer.elements.map((e) => (ts.isStringLiteral(e) ? e.text : e.getText(sourceFile)))
 42 |         }
 43 |       }
 44 |     }
 45 | 
 46 |     const key = guard || ELSE_GUARD
 47 |     result[key] = actions
 48 |   }
 49 | 
 50 |   return result
 51 | }
 52 | 
 53 | export function serializeMachine(code: string) {
 54 |   // Create a source file
 55 |   const sourceFile = ts.createSourceFile("temp.ts", code, ts.ScriptTarget.Latest, true)
 56 | 
 57 |   const result = { id: "" } as Machine
 58 |   let schemaType: string | null = null
 59 | 
 60 |   // Visit nodes to find the createMachine call
 61 |   function visit(node: ts.Node) {
 62 |     // Find the createMachine call expression
 63 |     if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === "createMachine") {
 64 |       // Extract schema type from type arguments if present
 65 |       if (node.typeArguments && node.typeArguments.length > 0) {
 66 |         const typeArg = node.typeArguments[0]
 67 |         if (ts.isTypeReferenceNode(typeArg) && ts.isIdentifier(typeArg.typeName)) {
 68 |           schemaType = typeArg.typeName.text
 69 |           // Convert SchemaType to kebab-case id
 70 |           if (schemaType.endsWith("Schema")) {
 71 |             const baseName = schemaType.slice(0, -6) // Remove 'Schema' string
 72 |             result.id = baseName.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()
 73 |           }
 74 |         }
 75 |       }
 76 | 
 77 |       // Process the object literal argument
 78 |       if (node.arguments.length > 0 && ts.isObjectLiteralExpression(node.arguments[0])) {
 79 |         const configObj = node.arguments[0]
 80 | 
 81 |         // Extract properties
 82 |         for (const prop of configObj.properties) {
 83 |           if (ts.isPropertyAssignment(prop)) {
 84 |             const propName = prop.name.getText(sourceFile)
 85 | 
 86 |             if (isTopLevelKey(propName)) {
 87 |               result[propName] = parseObjectLiteralToJSON(prop.initializer, sourceFile)
 88 |             }
 89 |           }
 90 |         }
 91 |       }
 92 |     }
 93 | 
 94 |     ts.forEachChild(node, visit)
 95 |   }
 96 | 
 97 |   visit(sourceFile)
 98 |   return result
 99 | }
100 | 
101 | function parseObjectLiteralToJSON(
102 |   node: ts.Node,
103 |   sourceFile: ts.SourceFile,
104 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any
105 | ): any {
106 |   // Handle object literals
107 |   if (ts.isObjectLiteralExpression(node)) {
108 |     // eslint-disable-next-line @typescript-eslint/no-explicit-any
109 |     const result: Record<string, any> = {}
110 | 
111 |     for (const prop of node.properties) {
112 |       if (ts.isPropertyAssignment(prop)) {
113 |         const propName = getPropertyName(prop.name, sourceFile)
114 |         if (propName) {
115 |           result[propName] = parseObjectLiteralToJSON(prop.initializer, sourceFile)
116 |         }
117 |       }
118 |     }
119 | 
120 |     return result
121 |   }
122 | 
123 |   // Handle arrays
124 |   if (ts.isArrayLiteralExpression(node)) {
125 |     return node.elements.map((element) => parseObjectLiteralToJSON(element, sourceFile))
126 |   }
127 | 
128 |   // Handle choose() expressions
129 |   if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === "choose") {
130 |     return parseChooseExpression(node, sourceFile)
131 |   }
132 | 
133 |   // Handle string literals
134 |   if (ts.isStringLiteral(node)) {
135 |     return node.text
136 |   }
137 | 
138 |   // Handle numeric literals
139 |   if (ts.isNumericLiteral(node)) {
140 |     return Number(node.text)
141 |   }
142 | 
143 |   // Handle boolean literals
144 |   if (node.kind === ts.SyntaxKind.TrueKeyword) {
145 |     return true
146 |   }
147 | 
148 |   if (node.kind === ts.SyntaxKind.FalseKeyword) {
149 |     return false
150 |   }
151 | 
152 |   // Handle null
153 |   if (node.kind === ts.SyntaxKind.NullKeyword) {
154 |     return null
155 |   }
156 | 
157 |   // Handle function calls (like guard functions)
158 |   if (ts.isCallExpression(node)) {
159 |     return node.getText(sourceFile)
160 |   }
161 | 
162 |   // Handle other expressions
163 |   return node.getText(sourceFile)
164 | }
165 | 
166 | function getPropertyName(node: ts.PropertyName, sourceFile: ts.SourceFile): string | null {
167 |   if (ts.isIdentifier(node)) {
168 |     return node.text
169 |   }
170 | 
171 |   if (ts.isStringLiteral(node)) {
172 |     return node.text
173 |   }
174 | 
175 |   if (ts.isComputedPropertyName(node)) {
176 |     return node.expression.getText(sourceFile)
177 |   }
178 | 
179 |   return null
180 | }
181 | 


--------------------------------------------------------------------------------
/components/visualizer/utils/machine/state-node.ts:
--------------------------------------------------------------------------------
 1 | import type { StateNode } from "../graph/types"
 2 | import { ELSE_GUARD } from "./serialize"
 3 | 
 4 | export type ConditionalActions = Record<string, string[]>
 5 | 
 6 | /**
 7 |  * Checks if a value represents conditional actions (from choose call expression)
 8 |  */
 9 | export function isConditionalActions(value: unknown): value is ConditionalActions {
10 |   return typeof value === "object" && value !== null && !Array.isArray(value)
11 | }
12 | 
13 | /**
14 |  * Format conditional actions for display
15 |  * @returns Array of [condition, actions[]] pairs, with else condition at the end if present
16 |  */
17 | export function formatConditionalActions(actions: ConditionalActions): [string, string[]][] {
18 |   const entries = Object.entries(actions)
19 |   // Sort to ensure else_guard is always last
20 |   return entries
21 |     .sort(([a], [b]) => {
22 |       if (a === ELSE_GUARD) return 1
23 |       if (b === ELSE_GUARD) return -1
24 |       return 0
25 |     })
26 |     .map(([condition, actions]) => [condition === ELSE_GUARD ? "else" : condition, actions])
27 | }
28 | 
29 | /**
30 |  * Checks if a state node is active in the current machine state
31 |  */
32 | export function isStateNodeActive(stateNode: StateNode, machineId: string, machineState: string): boolean {
33 |   return [machineId, machineState].includes(stateNode.key)
34 | }
35 | 
36 | /**
37 |  * Finds a target state by ID in the state hierarchy
38 |  */
39 | export function findTargetState(currentNode: StateNode, targetId: string): StateNode | undefined {
40 |   // Check in current node's states (for parent -> child transitions)
41 |   if (currentNode.states[targetId]) {
42 |     return currentNode.states[targetId]
43 |   }
44 | 
45 |   // Check in parent's states (for sibling transitions)
46 |   if (currentNode.parent?.states[targetId]) {
47 |     return currentNode.parent.states[targetId]
48 |   }
49 | 
50 |   // Check in parent's parent states (for uncle transitions)
51 |   if (currentNode.parent?.parent?.states[targetId]) {
52 |     return currentNode.parent.parent.states[targetId]
53 |   }
54 | 
55 |   // If we're in a child state, check the root node's states
56 |   let node = currentNode
57 |   while (node.parent) {
58 |     node = node.parent
59 |   }
60 | 
61 |   return node.states[targetId]
62 | }
63 | 
64 | /**
65 |  * Gets all ancestors of a state node up to the root
66 |  */
67 | export function getStateNodeAncestors(node: StateNode): Set<StateNode> {
68 |   const ancestors = new Set<StateNode>()
69 |   let current = node
70 |   while (current) {
71 |     ancestors.add(current)
72 |     if (!current.parent) break
73 |     current = current.parent
74 |   }
75 |   return ancestors
76 | }
77 | 
78 | /**
79 |  * Type guard to check if a node is a compound state
80 |  */
81 | export function isCompoundState(node: StateNode): boolean {
82 |   return node.type === "compound"
83 | }
84 | 
85 | /**
86 |  * Gets the root machine node from any state node
87 |  */
88 | export function getRootMachineNode(node: StateNode): StateNode {
89 |   let current = node
90 |   while (current.parent) {
91 |     current = current.parent
92 |   }
93 |   return current
94 | }
95 | 


--------------------------------------------------------------------------------
/components/visualizer/utils/path.ts:
--------------------------------------------------------------------------------
  1 | import type { Point } from "@zag-js/rect-utils"
  2 | 
  3 | interface Vector extends Point {
  4 |   type: "vector"
  5 | }
  6 | 
  7 | interface CubicCurve {
  8 |   p1: Point
  9 |   p2: Point
 10 |   p: Point
 11 | }
 12 | 
 13 | export type MPathParam = ["M", Point]
 14 | export type LPathParam = ["L", Point]
 15 | export type ZPathParam = ["Z"]
 16 | export type CPathParam = ["C", Point, Point, Point]
 17 | export type QPathParam = ["Q", Point, Point]
 18 | export type PathParam = MPathParam | LPathParam | ZPathParam | CPathParam | QPathParam
 19 | 
 20 | export type SvgPath = [MPathParam, ...PathParam[]]
 21 | export type SvgPathPortion = PathParam[]
 22 | 
 23 | /**
 24 |  * Removes midpoints from a set of points.
 25 |  *
 26 |  * @param points
 27 |  * @returns Points with midpoints removed
 28 |  */
 29 | export function simplifyPoints(points: Point[]): Point[] {
 30 |   const pointHashes = new Set<string>()
 31 | 
 32 |   const result: Point[] = []
 33 | 
 34 |   points.forEach((point, i) => {
 35 |     const prevPoint = points[i - 1]
 36 |     const nextPoint = points[i + 1]
 37 | 
 38 |     if (prevPoint?.x === point.x && point.x === nextPoint?.x) {
 39 |       return
 40 |     }
 41 |     if (prevPoint?.y === point.y && point.y === nextPoint?.y) {
 42 |       return
 43 |     }
 44 | 
 45 |     const hash = `${point.x}|${point.y}`
 46 | 
 47 |     if (pointHashes.has(hash)) {
 48 |       return
 49 |     }
 50 | 
 51 |     result.push(point)
 52 |   })
 53 | 
 54 |   return result
 55 | }
 56 | 
 57 | /**
 58 |  * Adds midpoints to the center of line segments represented by an array of points.
 59 |  *
 60 |  * @param points Points without midpoints
 61 |  * @returns Points with midpoints
 62 |  */
 63 | export function withMidpoints(points: Point[]): Point[] {
 64 |   const pointsWithMid: Point[] = []
 65 | 
 66 |   points.forEach((pt, i) => {
 67 |     const [ptA, ptB, ptC] = [pt, points[i + 1], points[i + 2]]
 68 | 
 69 |     if (!ptC || !ptB) {
 70 |       pointsWithMid.push(ptA)
 71 |       return
 72 |     }
 73 | 
 74 |     const midpt = {
 75 |       x: ptA.x + (ptB.x - ptA.x) / 2,
 76 |       y: ptA.y + (ptB.y - ptA.y) / 2,
 77 |       color: "green",
 78 |       label: "midpoint",
 79 |     }
 80 | 
 81 |     pointsWithMid.push(ptA, midpt)
 82 |   })
 83 | 
 84 |   return pointsWithMid
 85 | }
 86 | 
 87 | export function pathToD(path: SvgPath): string {
 88 |   return path
 89 |     .map(([cmd, ...points]) => [cmd, ...points.map((point: Point) => `${point.x},${point.y}`)].join(" "))
 90 |     .join(" ")
 91 | }
 92 | 
 93 | const lineToVector = (p1: Point, p2: Point): Vector => {
 94 |   const vector = {
 95 |     type: "vector" as const,
 96 |     x: p2.x - p1.x,
 97 |     y: p2.y - p1.y,
 98 |   }
 99 | 
100 |   return vector
101 | }
102 | 
103 | const vectorToUnitVector = (v: Vector): Vector => {
104 |   let magnitude = v.x * v.x + v.y * v.y
105 |   magnitude = Math.sqrt(magnitude)
106 |   const unitVector = {
107 |     type: "vector" as const,
108 |     x: v.x / magnitude,
109 |     y: v.y / magnitude,
110 |   }
111 |   return unitVector
112 | }
113 | 
114 | export const roundOneCorner = (p1: Point, corner: Point, p2: Point, radius: number = 20): CubicCurve => {
115 |   const corner_to_p1 = lineToVector(corner, p1)
116 |   const corner_to_p2 = lineToVector(corner, p2)
117 |   const p1dist = Math.hypot(corner_to_p1.x, corner_to_p1.y)
118 |   const p2dist = Math.hypot(corner_to_p2.x, corner_to_p2.y)
119 |   if (p1dist * p2dist === 0) {
120 |     return {
121 |       p1: corner,
122 |       p2: corner,
123 |       p: corner,
124 |     }
125 |   }
126 |   const resolvedRadius = Math.min(radius, p1dist - 0.1, p2dist - 0.1)
127 |   const corner_to_p1_unit = vectorToUnitVector(corner_to_p1)
128 |   const corner_to_p2_unit = vectorToUnitVector(corner_to_p2)
129 | 
130 |   const curve_p1 = {
131 |     x: corner.x + corner_to_p1_unit.x * resolvedRadius,
132 |     y: corner.y + corner_to_p1_unit.y * resolvedRadius,
133 |   }
134 |   const curve_p2 = {
135 |     x: corner.x + corner_to_p2_unit.x * resolvedRadius,
136 |     y: corner.y + corner_to_p2_unit.y * resolvedRadius,
137 |   }
138 |   const path = {
139 |     p1: curve_p1,
140 |     p2: curve_p2,
141 |     p: corner,
142 |   }
143 | 
144 |   return path
145 | }
146 | 
147 | export function isBendable(p1: Point, corner: Point, p2: Point): boolean {
148 |   return !((p1.x === corner.x && p2.x === corner.x) || (p1.y === corner.y && p2.y === corner.y))
149 | }
150 | 
151 | /**
152 |  * Rounds the corners of an SVG path.
153 |  *
154 |  * @param path The SVG path to round
155 |  * @returns A rounded SVG path
156 |  */
157 | export function roundPath(path: SvgPath): SvgPath {
158 |   const contiguousLinePaths: SvgPathPortion[] = []
159 |   const bentPath: SvgPathPortion = []
160 |   const current: SvgPathPortion = []
161 | 
162 |   for (const svgPoint of path) {
163 |     const [cmd] = svgPoint
164 |     if (cmd !== "L") {
165 |       if (current.length > 1) {
166 |         contiguousLinePaths.push([...current])
167 |         current.length = 0
168 |       }
169 |     }
170 |     if (cmd === "M") {
171 |       current.push(svgPoint)
172 |     } else if (cmd === "L") {
173 |       current.push(svgPoint)
174 |     }
175 |   }
176 |   if (current.length > 1) {
177 |     contiguousLinePaths.push([...current])
178 |   }
179 | 
180 |   for (const linePath of contiguousLinePaths) {
181 |     const points = linePath.map(([, point]) => point as Point)
182 |     const pointsWithMid = withMidpoints(simplifyPoints(points))
183 |     const bentPathPortion: SvgPath = [linePath[0] as MPathParam]
184 | 
185 |     pointsWithMid.forEach((pt, i, pts) => {
186 |       if (i >= 2 && i <= pts.length - 2 && isBendable(pts[i - 1], pt, pts[i + 1])) {
187 |         const { p1, p2, p } = roundOneCorner(pts[i - 1], pt, pts[i + 1], /* radius = */ 10)
188 | 
189 |         bentPathPortion.push(["L", p1], ["C", p1, p, p2])
190 |       } else {
191 |         bentPathPortion.push(["L", pt])
192 |       }
193 |     })
194 | 
195 |     bentPath.push(...bentPathPortion)
196 |   }
197 | 
198 |   return bentPath as SvgPath
199 | }
200 | 


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { dirname } from "path"
 2 | import { fileURLToPath } from "url"
 3 | import { FlatCompat } from "@eslint/eslintrc"
 4 | 
 5 | const __filename = fileURLToPath(import.meta.url)
 6 | const __dirname = dirname(__filename)
 7 | 
 8 | const compat = new FlatCompat({
 9 |   baseDirectory: __dirname,
10 | })
11 | 
12 | const eslintConfig = [...compat.extends("next/core-web-vitals", "next/typescript")]
13 | 
14 | export default eslintConfig
15 | 


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 | 
3 | const nextConfig: NextConfig = {
4 |   /* config options here */
5 |   reactStrictMode: true
6 | };
7 | 
8 | export default nextConfig;
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "visualizer",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "scripts": {
 6 |     "dev": "next dev --turbopack",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint",
10 |     "typecheck": "tsc --noEmit"
11 |   },
12 |   "dependencies": {
13 |     "@zag-js/accordion": "latest",
14 |     "@zag-js/anatomy-icons": "latest",
15 |     "@zag-js/angle-slider": "latest",
16 |     "@zag-js/avatar": "latest",
17 |     "@zag-js/carousel": "latest",
18 |     "@zag-js/checkbox": "latest",
19 |     "@zag-js/clipboard": "latest",
20 |     "@zag-js/collapsible": "latest",
21 |     "@zag-js/color-picker": "latest",
22 |     "@zag-js/combobox": "latest",
23 |     "@zag-js/core": "latest",
24 |     "@zag-js/date-picker": "latest",
25 |     "@zag-js/dialog": "latest",
26 |     "@zag-js/dom-query": "latest",
27 |     "@zag-js/editable": "latest",
28 |     "@zag-js/file-upload": "latest",
29 |     "@zag-js/floating-panel": "latest",
30 |     "@zag-js/hover-card": "latest",
31 |     "@zag-js/menu": "latest",
32 |     "@zag-js/number-input": "latest",
33 |     "@zag-js/pagination": "latest",
34 |     "@zag-js/pin-input": "latest",
35 |     "@zag-js/popover": "latest",
36 |     "@zag-js/presence": "latest",
37 |     "@zag-js/progress": "latest",
38 |     "@zag-js/qr-code": "latest",
39 |     "@zag-js/radio-group": "latest",
40 |     "@zag-js/rating-group": "latest",
41 |     "@zag-js/react": "latest",
42 |     "@zag-js/rect-utils": "latest",
43 |     "@zag-js/select": "latest",
44 |     "@zag-js/signature-pad": "latest",
45 |     "@zag-js/slider": "latest",
46 |     "@zag-js/splitter": "latest",
47 |     "@zag-js/steps": "latest",
48 |     "@zag-js/switch": "latest",
49 |     "@zag-js/tabs": "latest",
50 |     "@zag-js/tags-input": "latest",
51 |     "@zag-js/time-picker": "latest",
52 |     "@zag-js/timer": "latest",
53 |     "@zag-js/toast": "latest",
54 |     "@zag-js/toggle-group": "latest",
55 |     "@zag-js/tooltip": "latest",
56 |     "@zag-js/tour": "latest",
57 |     "@zag-js/tree-view": "latest",
58 |     "elkjs": "^0.9.3",
59 |     "next": "15.2.0",
60 |     "next-themes": "^0.4.4",
61 |     "react": "^19.0.0",
62 |     "react-dom": "^19.0.0",
63 |     "react-zoom-pan-pinch": "^3.7.0"
64 |   },
65 |   "devDependencies": {
66 |     "@eslint/eslintrc": "^3",
67 |     "@types/node": "^20",
68 |     "@types/react": "^19",
69 |     "@types/react-dom": "^19",
70 |     "eslint": "^9",
71 |     "eslint-config-next": "15.2.0",
72 |     "typescript": "^5"
73 |   }
74 | }


--------------------------------------------------------------------------------
/pages/[component].tsx:
--------------------------------------------------------------------------------
 1 | import Head from "next/head";
 2 | import type { GetServerSideProps } from "next";
 3 | import { Geist, Geist_Mono } from "next/font/google";
 4 | 
 5 | import { Visualizer } from "@/components/visualizer";
 6 | import { serializeMachine } from "@/components/visualizer/utils/machine/serialize";
 7 | import type { Machine } from "@/components/visualizer/types";
 8 | import type { Component } from "@/components/components-map";
 9 | import { componentsMap, settingsMap } from "@/components/components-map";
10 | 
11 | const geistSans = Geist({
12 |   variable: "--font-geist-sans",
13 |   subsets: ["latin"],
14 | });
15 | 
16 | const geistMono = Geist_Mono({
17 |   variable: "--font-geist-mono",
18 |   subsets: ["latin"],
19 | });
20 | 
21 | interface ComponentProps {
22 |   component: Component;
23 |   serializedMachine: Machine;
24 | }
25 | 
26 | export default function Component(props: ComponentProps) {
27 |   const { component, serializedMachine } = props;
28 |   const { component: child, title } = componentsMap[component];
29 |   const settings = settingsMap[component] ?? {};
30 | 
31 |   return (
32 |     <>
33 |       <Head>
34 |         <title>{`Visualize the ${title} machine - Zag JS`}</title>
35 |         <meta name="description" content="Generated by create next app" />
36 |         <meta name="viewport" content="width=device-width, initial-scale=1" />
37 |         <link rel="icon" href="/favicon.ico" />
38 |       </Head>
39 |       <main className={`${geistSans.variable} ${geistMono.variable}`}>
40 |         <Visualizer
41 |           machine={child.machine}
42 |           serializedMachine={serializedMachine}
43 |           settings={settings}
44 |         />
45 |       </main>
46 |     </>
47 |   );
48 | }
49 | 
50 | export const getServerSideProps: GetServerSideProps = async (context) => {
51 |   const component = context.params?.component;
52 | 
53 |   const machinePath = `https://raw.githubusercontent.com/chakra-ui/zag/main/packages/machines/${component}/src/${component}.machine.ts`;
54 |   const machineSource = await fetch(machinePath).then((r) => r.text());
55 | 
56 |   const isNotFound = machineSource === "404: Not Found";
57 | 
58 |   if (isNotFound) {
59 |     return {
60 |       redirect: {
61 |         destination: "/",
62 |         permanent: false,
63 |       },
64 |     };
65 |   }
66 | 
67 |   const serializedMachine = machineSource
68 |     ? serializeMachine(machineSource)
69 |     : null;
70 | 
71 |   return {
72 |     props: { component, serializedMachine },
73 |   };
74 | };
75 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import "@/styles/globals.css"
 2 | import type { AppProps } from "next/app"
 3 | import { ThemeProvider } from "next-themes"
 4 | export default function App({ Component, pageProps }: AppProps) {
 5 |   return (
 6 |     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
 7 |       <Component {...pageProps} />
 8 |     </ThemeProvider>
 9 |   )
10 | }
11 | 


--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import { Html, Head, Main, NextScript } from "next/document"
 2 | 
 3 | export default function Document() {
 4 |   return (
 5 |     <Html lang="en">
 6 |       <Head />
 7 |       <body>
 8 |         <Main />
 9 |         <NextScript />
10 |       </body>
11 |     </Html>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import Head from "next/head";
 2 | import { Geist, Geist_Mono } from "next/font/google";
 3 | 
 4 | import { GithubIcon, ZagIcon } from "@/components/visualizer/controls/icons";
 5 | import { componentsMap } from "@/components/components-map";
 6 | import Link from "next/link";
 7 | import { ColorMode } from "@/components/color-mode";
 8 | import { Anatomy } from "@/components/anatomy";
 9 | 
10 | const geistSans = Geist({
11 |   variable: "--font-geist-sans",
12 |   subsets: ["latin"],
13 | });
14 | 
15 | const geistMono = Geist_Mono({
16 |   variable: "--font-geist-mono",
17 |   subsets: ["latin"],
18 | });
19 | 
20 | export default function Home() {
21 |   return (
22 |     <>
23 |       <Head>
24 |         <title>Zag JS Visualizer</title>
25 |         <meta name="description" content="Generated by create next app" />
26 |         <meta name="viewport" content="width=device-width, initial-scale=1" />
27 |         <link rel="icon" href="/favicon.ico" />
28 |       </Head>
29 |       <main className={`${geistSans.variable} ${geistMono.variable}`}>
30 |         <div className="page-header">
31 |           <h1>Zag Visualizer</h1>
32 |           <p>Explore Zag&apos;s state machines through interactive graphs</p>
33 |           <div className="toolbar">
34 |             <ColorMode />
35 |             <Link
36 |               href="https://github.com/anubra266/zag-visualizer"
37 |               target="_blank"
38 |               aria-label="Go to Zag Visualizer GitHub repository"
39 |             >
40 |               <GithubIcon />
41 |             </Link>
42 |             <Link
43 |               href="https://github.com/chakra-ui/zag"
44 |               aria-label="Go to Zag GitHub repository"
45 |               target="_blank"
46 |             >
47 |               <ZagIcon />
48 |             </Link>
49 |           </div>
50 |         </div>
51 |         <div className="machine-list">
52 |           {Object.entries(componentsMap).map(([key, { title }]) => {
53 |             return (
54 |               <Link key={key} href={`/${key}`} className="machine-item">
55 |                 <span>
56 |                   {title}
57 |                   <button
58 |                     className="github-link"
59 |                     onClick={() =>
60 |                       window.open(
61 |                         `https://github.com/chakra-ui/zag/blob/main/packages/machines/${key}/src/${key}.machine.ts`,
62 |                         "_blank"
63 |                       )
64 |                     }
65 |                   >
66 |                     <GithubIcon />
67 |                   </button>
68 |                 </span>
69 |                 <Anatomy component={key} />
70 |               </Link>
71 |             );
72 |           })}
73 |         </div>
74 |       </main>
75 |     </>
76 |   );
77 | }
78 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anubra266/zag-visualizer/3e17015adacf5f742573453fbe120e114fddce07/public/favicon.ico


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
  1 | main {
  2 |   height: 100vh;
  3 |   width: 100vw;
  4 | }
  5 | 
  6 | :root {
  7 |   --background: rgb(247, 249, 251);
  8 |   --foreground: #171717;
  9 | }
 10 | 
 11 | .dark:root {
 12 |   --background: #0a0a0a;
 13 |   --foreground: #ededed;
 14 | }
 15 | 
 16 | html,
 17 | body {
 18 |   max-width: 100vw;
 19 |   overflow-x: hidden;
 20 | }
 21 | 
 22 | body {
 23 |   color: var(--foreground);
 24 |   background: var(--background);
 25 |   font-family: Arial, Helvetica, sans-serif;
 26 |   -webkit-font-smoothing: antialiased;
 27 |   -moz-osx-font-smoothing: grayscale;
 28 | }
 29 | 
 30 | * {
 31 |   box-sizing: border-box;
 32 |   padding: 0;
 33 |   margin: 0;
 34 | }
 35 | 
 36 | a {
 37 |   color: inherit;
 38 |   text-decoration: none;
 39 | }
 40 | 
 41 | html.dark {
 42 |   color-scheme: dark;
 43 | }
 44 | 
 45 | /* ------------------------------------------------------------ */
 46 | 
 47 | *,
 48 | *:before,
 49 | *:after {
 50 |   position: relative;
 51 | }
 52 | 
 53 | *::before,
 54 | *::after {
 55 |   border-width: 0;
 56 |   border-style: solid;
 57 |   box-sizing: border-box;
 58 | }
 59 | 
 60 | .graph-wrapper {
 61 |   line-height: 1.5;
 62 |   -webkit-text-size-adjust: 100%;
 63 |   font-family: system-ui, sans-serif;
 64 |   -webkit-font-smoothing: antialiased;
 65 |   text-rendering: optimizeLegibility;
 66 |   -moz-osx-font-smoothing: grayscale;
 67 |   touch-action: manipulation;
 68 | 
 69 |   font-feature-settings: "kern";
 70 | }
 71 | 
 72 | button {
 73 |   font-family: inherit;
 74 |   font-size: 100%;
 75 |   line-height: 1.15;
 76 |   margin: 0;
 77 |   overflow: visible;
 78 |   text-transform: none;
 79 |   border-style: none;
 80 |   padding: 0;
 81 | }
 82 | 
 83 | /* ------------------------------------------------------------ */
 84 | 
 85 | .page-header {
 86 |   text-align: center;
 87 |   padding-top: 1rem;
 88 | }
 89 | 
 90 | .page-header h1 {
 91 |   font-size: 2.5rem;
 92 |   font-weight: 700;
 93 |   margin-bottom: 0.5rem;
 94 |   background: linear-gradient(to right, #16a34a, #0ea5e9);
 95 |   -webkit-background-clip: text;
 96 |   -webkit-text-fill-color: transparent;
 97 |   background-clip: text;
 98 | }
 99 | 
100 | .dark .page-header h1 {
101 |   background: linear-gradient(to right, #6eeb6e, #5ccfee);
102 |   background-clip: text;
103 | }
104 | 
105 | .page-header p {
106 |   font-size: 1.1rem;
107 |   color: var(--foreground);
108 |   opacity: 0.7;
109 | }
110 | 
111 | .page-header .toolbar {
112 |   display: flex;
113 |   flex-direction: row;
114 |   gap: 0.3rem;
115 |   justify-content: center;
116 |   align-items: center;
117 |   margin-top: 0.5rem;
118 | 
119 |   & > * {
120 |     border-radius: 999999px;
121 |     padding: 0.17rem;
122 | 
123 |     &:hover {
124 |       box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
125 |       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
126 | 
127 |       .dark & {
128 |         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
129 |         background: rgba(255, 255, 255, 0.06);
130 |       }
131 |     }
132 |   }
133 | }
134 | 
135 | .machine-list {
136 |   padding: 1.5rem 3rem;
137 |   display: grid;
138 |   grid-gap: 1.5rem;
139 |   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
140 | }
141 | 
142 | .machine-item {
143 |   display: flex;
144 |   flex-direction: column;
145 |   width: 100%;
146 |   cursor: pointer;
147 |   padding: 0.75rem;
148 |   border-radius: 0.375rem;
149 |   background: var(--background);
150 |   border: 1px solid rgba(128, 128, 128, 0.2);
151 |   transition: all 0.2s ease-in-out;
152 |   gap: 0.5rem;
153 | }
154 | 
155 | .machine-item span {
156 |   font-size: 1.1rem;
157 |   font-weight: 500;
158 |   color: var(--foreground);
159 |   opacity: 0.9;
160 | 
161 |   display: flex;
162 |   align-items: center;
163 | }
164 | 
165 | .machine-item:hover {
166 |   transform: translateY(-2px);
167 |   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
168 |   border-color: rgba(128, 128, 128, 0.3);
169 | }
170 | 
171 | .dark .machine-item {
172 |   background: rgba(255, 255, 255, 0.03);
173 | }
174 | 
175 | .dark .machine-item:hover {
176 |   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
177 |   background: rgba(255, 255, 255, 0.06);
178 | }
179 | 
180 | .machine-item .github-link {
181 |   margin-left: auto;
182 |   display: flex;
183 |   align-items: center;
184 |   justify-content: center;
185 |   width: 27px;
186 |   height: 27px;
187 |   border-radius: 50%;
188 |   background: transparent;
189 |   cursor: pointer;
190 | 
191 |   &:hover {
192 |     background: rgba(255, 255, 255, 0.1);
193 |   }
194 | }
195 | 
196 | .machine-item .github-link svg {
197 |   width: 14px;
198 |   height: 14px;
199 | }
200 | 
201 | .machine-item .anatomy-icon {
202 |   width: 100%;
203 |   height: 100%;
204 | }
205 | 
206 | /* ------------------------------------------------------------ */
207 | 
208 | .wrapper {
209 |   width: 100% !important;
210 |   height: 100% !important;
211 | }
212 | 
213 | .wrapper {
214 |   z-index: 2;
215 | }
216 | 
217 | .graph-wrapper {
218 |   height: 100%;
219 |   width: 100%;
220 | }
221 | 
222 | .graph-content {
223 |   -webkit-font-smoothing: auto;
224 | 
225 |   width: 100%;
226 |   height: 100%;
227 | }
228 | 
229 | .background {
230 |   width: 100%;
231 |   height: 100%;
232 |   position: absolute;
233 |   top: 0;
234 |   left: 0;
235 | 
236 |   z-index: 1;
237 | }
238 | 
239 | .background .pattern {
240 |   fill: rgb(145, 145, 154);
241 | }
242 | 
243 | .dark .background .pattern {
244 |   fill: rgb(119, 119, 119);
245 | }
246 | 
247 | .context-editor,
248 | .controls,
249 | .nav {
250 |   display: flex;
251 |   margin: 15px;
252 |   z-index: 5;
253 |   bottom: 0px;
254 |   position: absolute;
255 |   pointer-events: all;
256 | }
257 | 
258 | .context-editor {
259 |   top: 0px;
260 |   bottom: unset;
261 |   right: 0px;
262 |   flex-direction: column;
263 | }
264 | 
265 | .controls {
266 |   left: 0px;
267 |   flex-direction: column;
268 |   box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
269 | }
270 | 
271 | .context-editor,
272 | .nav {
273 |   right: 0px;
274 |   gap: 10px;
275 | 
276 |   & > * {
277 |     box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
278 |     border-radius: 999999px;
279 |   }
280 | }
281 | 
282 | .context-editor > *,
283 | .controls > *,
284 | .toolbar > *,
285 | .nav > * {
286 |   display: flex;
287 |   justify-content: center;
288 |   align-items: center;
289 |   height: 26px;
290 |   width: 26px;
291 |   padding: 4px;
292 |   border: none;
293 |   background: transparent;
294 |   cursor: pointer;
295 |   -webkit-user-select: none;
296 |   -moz-user-select: none;
297 |   user-select: none;
298 |   box-sizing: content-box;
299 | 
300 |   &:focus {
301 |     outline: none;
302 |   }
303 | 
304 |   & svg {
305 |     width: 100%;
306 |     max-width: 14px;
307 |     max-height: 14px;
308 |   }
309 | }
310 | 
311 | .context-editor > *,
312 | .controls > *,
313 | .nav > * {
314 |   background: rgb(254, 254, 254);
315 |   border-bottom: rgb(238, 238, 238);
316 | 
317 |   color: rgb(0, 0, 0);
318 |   .dark & {
319 |     background: rgb(43, 43, 43);
320 |     color: #fff;
321 |   }
322 | 
323 |   &:hover {
324 |     background: rgb(244, 244, 244);
325 |   }
326 | 
327 |   .dark &:hover {
328 |     background: rgb(62, 62, 62);
329 |   }
330 | 
331 |   &:disabled {
332 |     pointer-events: none;
333 |   }
334 | 
335 |   &:disabled svg {
336 |     fill-opacity: 0.4;
337 |   }
338 | }
339 | 
340 | .theme-toggle .moon {
341 |   display: none;
342 | }
343 | 
344 | .dark .theme-toggle .sun {
345 |   display: none;
346 | }
347 | 
348 | .dark .theme-toggle .moon {
349 |   display: block;
350 | }
351 | 
352 | /* ------------------------------------------------------------ */
353 | 
354 | .graph-content {
355 |   --color-bg: #fff;
356 |   --color-fg: #111;
357 |   --node-color-bg: #ddd;
358 |   --edge-color: #111;
359 | }
360 | 
361 | .dark .graph-content {
362 |   --color-fg: #fff;
363 |   --color-bg: #111;
364 |   --node-color-bg: #2d2d2d;
365 |   --edge-color: #fff;
366 | }
367 | 
368 | .graph-content {
369 |   --color-transparent: #fff6;
370 |   --color-active: #679ae7;
371 |   --border-color: var(--node-color-bg);
372 |   --border-width: 2px;
373 |   --border: var(--border-width) solid var(--border-color);
374 |   --radius: 0.25rem;
375 |   --node-border-style: solid;
376 |   --node-parallel-border-style: dashed;
377 |   --font-size-base: 14px;
378 |   --font-size-sm: 12px;
379 | }
380 | 
381 | [data-part="skeleton"] {
382 |   opacity: 0.001;
383 | }
384 | 
385 | /* ------------------------------------------------------------ */
386 | 
387 | [data-part="edge-group"]:not([data-active]) {
388 |   opacity: 0.25;
389 | }
390 | 
391 | [data-part="edge"] {
392 |   stroke: var(--edge-color);
393 | }
394 | 
395 | [data-part="edge-arrow"],
396 | [data-part="initial-edge-circle"] {
397 |   fill: var(--edge-color);
398 | }
399 | 
400 | /* ------------------------------------------------------------ */
401 | 
402 | [data-part="state-node-group"] {
403 |   --node-border-color: var(--border-color);
404 |   --node-active: 0;
405 |   --transition-color: #555;
406 | }
407 | 
408 | [data-part="state-node-group"][data-active] {
409 |   --node-border-color: var(--color-active);
410 |   --node-active: 1;
411 |   --transition-color: var(--color-active);
412 | }
413 | 
414 | [data-part="state-node-group"][data-previewed]:not([data-active]) {
415 |   --node-border-color: var(--color-active);
416 | }
417 | 
418 | [data-part="state-node"] {
419 |   color: var(--color-fg);
420 |   align-self: start;
421 |   opacity: calc(0.7 * (1 - var(--node-active)) + var(--node-active));
422 |   font-size: 1em;
423 |   border-radius: var(--radius);
424 |   overflow: hidden;
425 | }
426 | 
427 | [data-part="state-node"]:before {
428 |   content: "";
429 |   position: absolute;
430 |   top: 0;
431 |   left: 0;
432 |   width: 100%;
433 |   height: 100%;
434 |   border: var(--border);
435 |   border-color: var(--node-border-color);
436 |   border-style: var(--node-border-style);
437 |   border-radius: inherit;
438 |   z-index: 1;
439 |   pointer-events: none;
440 | }
441 | 
442 | [data-part="state-node-header"] {
443 |   display: grid;
444 |   grid-template-columns: auto 1fr auto;
445 |   grid-template-areas: "type key tags";
446 |   align-items: center;
447 | }
448 | [data-part="state-node-header"] > [data-part="state-node-key"] {
449 |   grid-area: key;
450 | }
451 | [data-part="state-node-header"] > [data-part="state-node-tags"] {
452 |   grid-area: tags;
453 | }
454 | 
455 | [data-part="state-node-content"] {
456 |   background: var(--node-color-bg);
457 |   &:empty {
458 |     display: none;
459 |   }
460 | }
461 | 
462 | [data-part="state-node-states"] {
463 |   padding: 2rem;
464 |   display: flex;
465 |   flex-wrap: wrap;
466 |   gap: 2rem;
467 |   position: absolute;
468 |   top: 0;
469 |   left: 0;
470 |   &:empty {
471 |     display: none;
472 |   }
473 | }
474 | 
475 | [data-part="state-node-type"] {
476 |   height: 1.5rem;
477 |   width: 1.5rem;
478 |   margin: 0.5rem;
479 |   border-radius: var(--radius);
480 |   background: var(--color-transparent);
481 |   display: flex;
482 |   justify-content: center;
483 |   align-items: center;
484 | 
485 |   &::before {
486 |     display: block;
487 |     font-weight: bold;
488 |   }
489 | }
490 | 
491 | [data-part="state-node-key"] {
492 |   padding: 0.5rem;
493 |   font-weight: bold;
494 | }
495 | 
496 | [data-part="state-node-key-text"] {
497 |   max-width: 20ch;
498 |   white-space: nowrap;
499 |   overflow: hidden;
500 |   text-overflow: ellipsis;
501 | }
502 | 
503 | [data-part="state-node-actions"] {
504 |   padding: 0.5rem;
505 |   &:empty {
506 |     display: none;
507 |   }
508 | }
509 | 
510 | [data-part="state-node-action-condition"] {
511 |   font-weight: bold;
512 |   font-size: 0.75rem;
513 | }
514 | 
515 | [data-part="state-node-tags"] {
516 |   display: flex;
517 |   flex-direction: row;
518 |   text-overflow: ellipsis;
519 |   padding: 0.5rem;
520 | }
521 | 
522 | [data-part="state-node-tag"] {
523 |   display: inline-block;
524 |   font-size: 0.75rem;
525 |   font-weight: bold;
526 |   padding: 0.25rem;
527 |   border-radius: 0.25rem;
528 |   background-color: #fff5;
529 |   & + [data-part="state-node-tag"] {
530 |     margin-left: 1ch;
531 |   }
532 | }
533 | 
534 | /* ------------------------------------------------------------ */
535 | 
536 | [data-part="action"] {
537 |   color: var(--color-fg);
538 |   display: flex;
539 |   flex-direction: row;
540 |   gap: 1ch;
541 |   align-items: baseline;
542 |   justify-content: flex-start;
543 | 
544 |   &[data-action] {
545 |     &:before {
546 |       content: attr(data-action) " / ";
547 |       font-size: var(--font-size-sm);
548 |       text-transform: uppercase;
549 |       font-weight: bold;
550 |       opacity: 0.5;
551 |       display: inline-block;
552 |       white-space: nowrap;
553 |     }
554 |   }
555 | }
556 | 
557 | [data-part="action-type"] {
558 |   font-size: var(--font-size-sm);
559 | }
560 | 
561 | [data-part="state-node-content"][data-atomic] [data-part="action-type"] {
562 |   max-width: 15ch;
563 |   text-overflow: ellipsis;
564 |   overflow: hidden;
565 |   white-space: nowrap;
566 | }
567 | 
568 | [data-part="transition"] {
569 |   --transition-color: gray;
570 |   display: block;
571 |   border-radius: 1rem;
572 |   background-color: var(--transition-color);
573 |   appearance: none;
574 |   cursor: pointer;
575 | 
576 |   &[data-potential] {
577 |     --transition-color: var(--color-active);
578 |   }
579 | 
580 |   & > [data-part="transition-label"] {
581 |     align-self: center;
582 |   }
583 | }
584 | 
585 | [data-part="transition-label"] {
586 |   flex-shrink: 0;
587 |   font-size: var(--font-size-sm);
588 |   font-weight: bold;
589 |   color: white;
590 |   display: flex;
591 |   flex-direction: row;
592 |   align-items: center;
593 |   justify-content: flex-start;
594 |   overflow: hidden;
595 | }
596 | 
597 | [data-part="transition-event"] {
598 |   display: flex;
599 |   flex-direction: row;
600 |   align-items: enter;
601 |   gap: 1ch;
602 |   padding: 0.25rem 0.5rem;
603 | }
604 | 
605 | [data-part="event-type"] {
606 |   white-space: nowrap;
607 |   overflow: hidden;
608 |   display: flex;
609 |   flex-direction: row;
610 |   justify-content: flex-start;
611 |   align-items: center;
612 |   gap: 1ch;
613 | }
614 | 
615 | [data-part="transition-guard"] {
616 |   padding: 0 0.5rem;
617 |   .bracket {
618 |     font-family: monospace;
619 |   }
620 |   .condition {
621 |     color: #00ffff;
622 |     font-weight: bold;
623 |   }
624 | 
625 |   .bracket {
626 |     color: #ffa94d;
627 |     font-weight: bold;
628 |   }
629 | 
630 |   .name {
631 |     color: #ffffff;
632 |   }
633 | }
634 | 
635 | [data-part="transition-actions"] {
636 |   &:empty {
637 |     display: none;
638 |   }
639 | }
640 | 
641 | [data-part="transition-content"] {
642 |   &:empty {
643 |     display: none;
644 |   }
645 |   padding: 0rem 0.5rem 0.5rem;
646 | }
647 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es6",
 4 |     "allowJs": true,
 5 |     "baseUrl": ".",
 6 |     "jsx": "preserve",
 7 |     "exactOptionalPropertyTypes": false,
 8 |     "paths": {
 9 |       "@/*": [
10 |         "./*"
11 |       ]
12 |     },
13 |     "verbatimModuleSyntax": false,
14 |     "isolatedModules": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "strictNullChecks": true,
21 |     "allowSyntheticDefaultImports": true,
22 |     "declaration": true,
23 |     "downlevelIteration": true,
24 |     "esModuleInterop": true,
25 |     "incremental": true,
26 |     "forceConsistentCasingInFileNames": true,
27 |     "noEmit": true,
28 |     "lib": [
29 |       "dom",
30 |       "dom.iterable",
31 |       "esnext"
32 |     ],
33 |     "module": "esnext",
34 |     "moduleResolution": "node",
35 |     "noImplicitReturns": false,
36 |     "resolveJsonModule": true,
37 |     "skipLibCheck": true,
38 |     "strict": true,
39 |     "stripInternal": true,
40 |     "ignoreDeprecations": "5.0",
41 |   },
42 |   "plugins": [
43 |     {
44 |       "name": "next"
45 |     }
46 |   ],
47 |   "include": [
48 |     "next-env.d.ts",
49 |     "**/*.ts",
50 |     "**/*.tsx",
51 |     ".next/types/**/*.ts"
52 |   ],
53 |   "exclude": [
54 |     "node_modules"
55 |   ]
56 | }


--------------------------------------------------------------------------------