<commit_before>import * as React from 'react';
import clsx from 'clsx';
import { inspect } from '@xstate/inspect';
import { worker } from '../../mocks/browser';

function ToolsIcon(props) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      width="32"
      height="32"
      {...props}
    >
      <path
        fillRule="evenodd"
        d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 192.168.127.121 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 192.168.127.12 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z"
      ></path>
    </svg>
  );
}

function CloseIcon(props) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width="48"
      height="48"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <line x1="18" y1="6" x2="6" y2="18"></line>
      <line x1="6" y1="6" x2="18" y2="18"></line>
    </svg>
  );
}

function DevTools() {
  const [isOpen, setIsOpen] = React.useState(false);

  function toggleVisibility() {
    setIsOpen(!isOpen);
  }

  function toggleMocking(e) {
    if (e.target.checked) worker.start();
    else worker.stop();
  }

  React.useEffect(() => {
    const inspector = inspect({
      url: 'https://statecharts.io/inspect',
      iframe: false,
    });

    return () => {
      inspector.disconnect();<commit_msg>chore: update XState inspect URL to use the new viz<commit_after>import * as React from 'react';
import clsx from 'clsx';
import { inspect } from '@xstate/inspect';
import { worker } from '../../mocks/browser';

function ToolsIcon(props) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 16 16"
      width="32"
      height="32"
      {...props}
    >
      <path
        fillRule="evenodd"
        d="M4.48 7.27c.26.26 1.28 1.33 1.28 1.33l.56-.58-.88-.91 1.69-1.8s-.76-.74-.43-.45c.32-1.19.03-2.51-.87-3.44C4.93.5 3.66.2 2.52.51l1.93 2-.51 1.96-1.89.52-1.93-2C-.19 4.17.1 5.48 1 6.4c.94.98 2.29 1.26 3.48.87zm6.44 1.94l-2.33 2.3 3.84 3.98c.31.33.73.49 1.14.49.41 0 .82-.16 1.14-.49.63-.65.63-1.7 0-2.35l-3.79-3.93zM16 2.53L13.55 0 6.33 7.46l.88.91-4.31 4.46-.99.53-1.39 2.27.35.37 2.2-1.44.51-1.02L7.9 9.08l.88.91L16 2.53z"
      ></path>
    </svg>
  );
}

function CloseIcon(props) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width="48"
      height="48"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <line x1="18" y1="6" x2="6" y2="18"></line>
      <line x1="6" y1="6" x2="18" y2="18"></line>
    </svg>
  );
}

function DevTools() {
  const [isOpen, setIsOpen] = React.useState(false);

  function toggleVisibility() {
    setIsOpen(!isOpen);
  }

  function toggleMocking(e) {
    if (e.target.checked) worker.start();
    else worker.stop();
  }

  React.useEffect(() => {
    const inspector = inspect({
      url: 'https://stately.ai/viz?inspect',
      iframe: false,
    });

    return () => {
      inspector.disconnect();
{'fraction_non_alphanumeric': 0.20659468923256494, 'fraction_numerical': 0.172454041435658, 'mean_word_length': 2.150735294117647, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 27, 'https://': 2, 'lorem ipsum': 0, 'www.': 4, 'xml': 4}, 'pii_count': 6, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3377821', 'n_tokens_mistral': 1791, 'n_tokens_neox': 1475, 'n_words': 254}