build/index.html

<!doctype html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="utf-8" />
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="color-scheme" content="dark light" />
    <title>Hanzo Build</title>
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 67 67'%3E%3Cpath fill='%23fff' d='M22.2 0H0v22.2h22.2V0Zm22.3 0v22.2h22.2V0H44.5ZM0 44.5v22.2h22.2V44.5H0Zm44.5 0v22.2h22.2V44.5H44.5ZM22.2 22.2h22.3v22.3H22.2V22.2Z'/%3E%3C/svg%3E" />
    <meta
      name="description"
      content="Say what you want. Hanzo writes it, runs it, and puts it on a live URL."
    />

    <!-- Google Analytics 4 (G-X5XPC4SW2L) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-X5XPC4SW2L"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-X5XPC4SW2L', {
        linker: {
          domains: ['hanzo.ai', 'hanzo.build', 'docs.hanzo.ai', 'hanzo.id', 'platform.hanzo.ai', 'pay.hanzo.ai', 'hanzo.app']
        }
      });
    </script>

    <!-- Meta Pixel (1790308611893001) -->
    <script>
      !function(f,b,e,v,n,t,s)
      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
      n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t,s)}(window, document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');
      fbq('init', '1790308611893001');
      fbq('track', 'PageView');
    </script>

    <!-- Hanzo Analytics — first-party privacy-preserving web analytics -->
    <script defer src="https://analytics.hanzo.ai/script.js" data-website-id="a323a8ae-c811-4061-9626-22caaffc612f"></script>

    <!-- Hanzo Insights — behavioral analytics -->
    <script>
      !function(t,e){var o,n,p,r;e.__SV||(window.hi=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="hi",u.people=u.people||[],u.toString=function(t){var e="hi";return"hi"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture captureException identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on getActiveMatchingSurveys getSurveys getNextSurveyStep onSessionId setPersonProperties".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.hi||[]);
      hi.init('hi_e16a2d5a8033442d87f090b24c606825',{api_host:'https://insights.hanzo.ai',person_profiles:'identified_only'});
      hi.register({app:'build',org:'hanzo'});
    </script>

    <style>
      /* The two things only the host document can answer: how tall the app is,
         and that its one child is a flex item. @hanzo/ui's stylesheet resets and
         paints everything else. Without this the builder grows to fit its
         content instead of filling the window, and every pane that scrolls
         inside it scrolls the page instead. */
      #root {
        display: flex;
        height: 100dvh;
      }
    </style>
    <script>
      /* Keep gui's theme class in step with next-themes'. One decision, two
         names: next-themes writes `light` on <html> and gui reads `t_light` /
         `t_dark`, so without this the account's choice moves one of them and the
         page stays painted the other way.

         `was` is not an optimisation — a `classList.toggle` that changes nothing
         still writes the attribute, and an observer reacting to its own write is
         a loop. Comparing first makes the callback a no-op unless the theme
         moved. Inline and in <head>, because the first paint happens before any
         module runs. */
      ;(function () {
        var e = document.documentElement, was
        function s() {
          var l = e.classList.contains('light')
          if (l === was) return
          was = l
          e.classList.toggle('t_light', l)
          e.classList.toggle('t_dark', !l)
        }
        s()
        new MutationObserver(s).observe(e, { attributes: true, attributeFilter: ['class'] })
      })()
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/app/main.tsx"></script>
  </body>
</html>