PageSourceSearch

https://www.todesktop.com/electron/docs/introduction/building-application

html todesktop.com collected 2026-10-03 20:25:31 UTC 115,298 bytes, 235 lines download raw bytes

1<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><meta content="width=device-width, initial-scale=1" name="viewport">
1<script>(function(){const docsColorSchemeStorageKey = "td-docs-color-scheme";
2const supportsDocsTheme = true;
3
4      (() => {
5        try {
6          if (!supportsDocsTheme) {
7            document.documentElement.classList.remove('dark');
8            delete document.documentElement.dataset.theme;
9            document.documentElement.style.removeProperty('color-scheme');
10            return;
11          }
12
13          const stored = localStorage.getItem(docsColorSchemeStorageKey);
14          const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
15          const isDarkMode =
16            stored === 'dark' || (stored !== 'light' && prefersDark);
17
18          document.documentElement.classList.toggle('dark', isDarkMode);
19          document.documentElement.dataset.theme = isDarkMode ? 'dark' : 'light';
20          document.documentElement.style.colorScheme = isDarkMode
21            ? 'dark'
22            : 'light';
23        } catch {
24          // Ignore storage or media-query access failures during bootstrap.
25        }
26      })();
27    })();</script>
27<link href="/favicon.png" rel="icon"><link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/TTHovesPro-DmBd.woff2"><link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/inter-v13-latin-regular.woff2"><link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/inter-v13-latin-600.woff2"><title>Introduction: Building an application | ToDesktop Documentation</title>
28<meta name="description" content="Learn how to build an Electron application that is managed by ToDesktop." />
29<link rel="canonical" href="https://www.todesktop.com/electron/docs/introduction/building-application" />
30<meta property="og:type" content="article" />
31<meta property="og:title" content="Introduction: Building an application | ToDesktop Documentation" />
32<meta property="og:description" content="Learn how to build an Electron application that is managed by ToDesktop." />
33<meta property="og:url" content="https://www.todesktop.com/electron/docs/introduction/building-application" />
34<meta name="twitter:card" content="summary" />
35<meta name="twitter:title" content="Introduction: Building an application | ToDesktop Documentation" />
36<meta name="twitter:description" content="Learn how to build an Electron application that is managed by ToDesktop." /><meta content="https://www.todesktop.com/og/electron/docs/introduction/building-application?variant=empty" property="og:image"><meta content="1200" property="og:image:width"><meta content="630" property="og:image:height"><meta content="https://www.todesktop.com/og/electron/docs/introduction/building-application?variant=empty" name="twitter:image"><link rel="stylesheet" href="/_astro/style.BCY8mYhV.css"></head> <body>  <style is:global>:root,.prefers-light-scheme{--kd-color-brand: 255 64 0;--kd-color-focus: 79 70 229;--kd-color-soft: 68 78 94;--kd-color-body: 250 250 250;--kd-color-elevate: 243 244 246;--kd-color-inverse: 5 11 23;--kd-color-border: 209 213 219}:root{font-size:16px;scroll-padding-top:6rem;--kd-font-family-sans: Inter VF, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--kd-font-family-mono: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation, Mono, Fira Code VF, monospace;--kd-navbar-height: 4rem;--kd-navbar-padding: 1rem .5rem;--kd-navbar-max-width: 1440px;--kd-navbar-border-bottom: 1px solid rgb(var(--kd-color-border));--kd-breadcrumbs-height: 5rem;--kd-sidebar-min-width: 320px;--kd-sidebar-max-width: screen;--kd-sidebar-padding: 0 1.75rem 2rem;--kd-sidebar-border-active: rgb(var(--kd-color-brand));--kd-content-max-width: 1440px;--kd-article-max-width: 85ch;--kd-main-padding-x: 1rem}@media screen and (min-width:992px){:root{--kd-main-padding-x: 4rem;--kd-breadcrumbs-height: 0px;--kd-sidebar-min-width: 15rem;--kd-sidebar-max-width: 17rem;--kd-sidebar-padding: 0 .5rem 2rem 1.5rem}}@media screen and (min-width:1200px){:root{--kd-navbar-padding: 1.25rem 1.25rem}}@media screen and (min-width:1460px){:root{--kd-navbar-padding: 1.25rem 0;--kd-sidebar-padding: 0 .5rem 2rem .25rem}}:root.dark,.prefers-dark-scheme{color-scheme:dark;--kd-color-brand: 255 83 26;--kd-color-soft: 150 155 166;--kd-color-inverse: 245 245 245;--kd-color-border: 38 48 64;--kd-color-elevate: 10 19 33;--kd-color-body: 5 11 23;--kd-color-focus: 129 140 248}.code-fence{--kd-code-fence-bg: rgb(var(--kd-color-body));--kd-code-fence-top-bar-bg: rgb(var(--kd-color-body) / .6);--kd-code-copied-bg-color: rgb(var(--kd-color-brand) / .8);--kd-terminal-line-pointer: rgb(var(--kd-color-brand));--kd-code-highlight-border: rgb(var(--kd-color-brand));--kd-code-highlight-color: rgb(var(--kd-color-brand) / .08)}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;
36--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media(min-width:420px){.container{max-width:420px}}@media(min-width:576px){.container{max-width:576px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:992px){.container{max-width:992px}}@media(min-width:1200px){.container{max-width:1200px}}@media(min-width:1280px){.container{max-width:1280px}}@media(min-width:1440px){.container{max-width:1440px}}@media(min-width:1460px){.container{max-width:1460px}}.prose{color:rgb(var(--kd-color-soft));max-width:none}.prose :where(p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where([class~=lead]):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-top:1.2em;margin-bottom:1.2em}.prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-links);text-decoration:none;font-weight:400;border-bottom:1px solid rgb(var(--kd-color-brand))}.prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-bold);font-weight:600}.prose :where(a strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:inherit}.prose :where(blockquote strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th strong):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(ol):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.625em}.prose :where(ol[type=A]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=A s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-alpha}.prose :where(ol[type=a s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-alpha}.prose :where(ol[type=I]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type=I s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:upper-roman}.prose :where(ol[type=i s]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:lower-roman}.prose :where(ol[type="1"]):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:decimal}.prose :where(ul):not(:where([class~=not-prose],[class~=not-prose] *)){list-style-type:disc;margin-top:1.25em;margin-bottom:1.25em;padding-left:1.25rem}.prose :where(ol>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{font-weight:400;color:var(--tw-prose-counters)}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *))::marker{color:rgb(var(--kd-color-inverse))}.prose :where(dt):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.25em}.prose :where(hr):not(:where([class~=not-prose],[class~=not-prose] *)){border-color:rgb(var(--kd-color-border));border-top-width:1px;margin-top:3em;margin-bottom:3em}.prose :where(blockquote):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-style:italic;color:var(--tw-prose-quotes);border-left-width:.25rem;border-left-color:var(--tw-prose-quote-borders);quotes:"“""”""‘""’";margin-top:1.6em;margin-bottom:1.6em;padding-left:1em}.prose :where(blockquote p:first-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:open-quote}.prose :where(blockquote p:last-of-type):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:close-quote}.prose :where(h1):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:800;font-size:2.25em;margin-top:0;margin-bottom:.8888889em;line-height:1.1111111}.prose :where(h1 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:900;color:inherit}.prose :where(h2):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:700;font-size:1.5em;margin-top:1.75em;margin-bottom:.6666666666666666em;line-height:1.3333333}.prose :where(h2 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:800;color:inherit}.prose :where(h3):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;font-size:1.25em;margin-top:2.4em;margin-bottom:.6em;line-height:1.4}.prose :where(h3 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(h4):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;margin-top:1.75em;margin-bottom:.5em;line-height:1.5;font-size:1.125em}.prose :where(h4 strong):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:700;color:inherit}.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(picture):not(:where([class~=not-prose],[class~=not-prose] *)){display:block;margin-top:2em;margin-bottom:2em}.prose :where(kbd):not(:where([class~=not-prose],[class~=not-prose] *)){font-weight:500;font-family:inherit;color:var(--tw-prose-kbd);box-shadow:0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%),0 3px rgb(var(--tw-prose-kbd-shadows) / 10%);font-size:.875em;border-radius:.3125rem;padding:.1875em .375em}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-code);font-weight:600;font-size:.875em;font-variant-ligatures:none}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"`"}.prose :where(code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:"`"}.prose :where(a code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-weight:inherit}.prose :where(h1 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(h2 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.875em}.prose :where(h3 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit;font-size:.9em}.prose :where(h4 code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(blockquote code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(thead th code):not(:where([class~=not-prose],[class~=not-prose] *)){color:inherit}.prose :where(pre):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-pre-code);background-color:var(--kd-code-fence-bg);overflow-x:auto;font-weight:400;font-size:.875em;line-height:1.7142857;margin-top:1.7142857em;margin-bottom:1.7142857em;border-radius:.375rem;padding:.8571429em 1.1428571em;box-shadow:none;display:flex}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)){background-color:transparent;border-width:0;border-radius:0;padding:0;font-weight:inherit;color:inherit;font-size:inherit;font-family:inherit;line-height:inherit;flex:none;min-width:100%}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:none}.prose :where(pre code):not(:where([class~=not-prose],[class~=not-prose] *)):after{content:none}.prose :where(table):not(:where([class~=not-prose],[class~=not-prose] *)){width:100%;table-layout:auto;text-align:left;font-size:.875em;line-height:1.7142857;margin:0;border-collapse:collapse}.prose :where(thead):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:rgb(var(--kd-color-border));color:rgb(var(--kd-color-inverse))}.prose :where(thead th):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-headings);font-weight:600;vertical-align:bottom;padding:0 .5714286em .5714286em}.prose :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px;border-bottom-color:rgb(var(--kd-color-border));font-size:.875rem}.prose :where(tbody tr:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:1px}.prose :where(tbody td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline;white-space:nowrap}.prose :where(tfoot):not(:where([class~=not-prose],[class~=not-prose] *)){border-top-width:1px;border-top-color:var(--tw-prose-th-borders)}.prose :where(tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:top}.prose :where(figure>*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose{--tw-prose-body: #374151;--tw-prose-headings: #111827;--tw-prose-lead: #4b5563;--tw-prose-links: #111827;--tw-prose-bold: #111827;--tw-prose-counters: rgb(var(--kd-color-inverse));--tw-prose-bullets: #d1d5db;--tw-prose-hr: #e5e7eb;--tw-prose-quotes: #111827;--tw-prose-quote-borders: #e5e7eb;--tw-prose-captions: #6b7280;--tw-prose-kbd: #111827;--tw-prose-kbd-shadows: 17 24 39;--tw-prose-code: #111827;--tw-prose-pre-code: #e5e7eb;--tw-prose-pre-bg: #1f2937;--tw-prose-th-borders: #d1d5db;--tw-prose-td-borders: #e5e7eb;--tw-prose-invert-body: #d1d5db;--tw-prose-invert-headings: #fff;--tw-prose-invert-lead: #9ca3af;--tw-prose-invert-links: #fff;--tw-prose-invert-bold: #fff;--tw-prose-invert-counters: rgb(var(--kd-color-inverse));--tw-prose-invert-bullets: #4b5563;--tw-prose-invert-hr: #374151;--tw-prose-invert-quotes: #f3f4f6;--tw-prose-invert-quote-borders: #374151;--tw-prose-invert-captions: #9ca3af;--tw-prose-invert-kbd: #fff;--tw-prose-invert-kbd-shadows: 255 255 255;--tw-prose-invert-code: #fff;--tw-prose-invert-pre-code: #d1d5db;--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);--tw-prose-invert-th-borders: #4b5563;--tw-prose-invert-td-borders: #374151;font-size:18px;line-height:1.75}.prose :where(picture>img):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0;margin-bottom:0}.prose :where(video):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(li):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;margin-bottom:.5em}.prose :where(ol>
36li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:.375em}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:.25rem;position:relative}.prose :where(.prose>ul>li p):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(.prose>ul>li>*:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ul>li>*:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(.prose>ol>li>*:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em}.prose :where(.prose>ol>li>*:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:1.25em}.prose :where(ul ul,ul ol,ol ul,ol ol):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.75em;margin-bottom:.75em}.prose :where(dl):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:1.25em;margin-bottom:1.25em}.prose :where(dd):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.5em;padding-left:1.625em}.prose :where(hr+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h2+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}
36.prose :where(h3+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(h4+*):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(thead th:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:.5714286em}.prose :where(thead th:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-right:.5714286em}.prose :where(tbody td,tfoot td):not(:where([class~=not-prose],[class~=not-prose] *)){padding:.5714286em}.prose :where(tbody td:first-child,tfoot td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:0}.prose :where(tbody td:last-child,tfoot td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-right:0}.prose :where(figure):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:2em;margin-bottom:2em}.prose :where(.prose>:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:0}.prose :where(.prose>:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){margin-bottom:0}.prose :where(h1,h2,h3):not(:where([class~=not-prose],[class~=not-prose] *)){letter-spacing:-.025em}.prose :where(h2 small,h3 small,h4 small):not(:where([class~=not-prose],[class~=not-prose] *)){font-family:var(--kd-font-family-mono);font-weight:500}.prose :where(h2 small):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1.125rem;line-height:1.75rem}.prose :where(h3 small):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:1rem;line-height:1.5rem}.prose :where(h4 small):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.875rem;line-height:1.25rem}.prose :where(ul>li):not(:where([class~=not-prose],[class~=not-prose] *)):before{content:"";width:.75em;height:.125em;position:absolute;top:.8125em;left:0;border-radius:999px}.prose :where(li>p):not(:where([class~=not-prose],[class~=not-prose] *)){margin:0}.prose :where(a:hover):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-width:2px}.prose :where(p+pre):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:-.2857142857142857em}.prose :where(tbody):not(:where([class~=not-prose],[class~=not-prose] *)){vertical-align:baseline}.prose :where(tbody code):not(:where([class~=not-prose],[class~=not-prose] *)){font-size:.875rem}.prose :where(tbody td:first-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-left:.5714286em}.prose :where(tbody td:last-child):not(:where([class~=not-prose],[class~=not-prose] *)){padding-right:.5714286em}.prose :where(tbody tr td:first-child code):not(:where([class~=not-prose],[class~=not-prose] *)){color:#6366f1;padding-left:8px}.prose :where(tbody tr td:first-child code):not(:where([class~=not-prose],[class~=not-prose] *)):before{display:none}.prose :where(tbody tr td:first-child code):not(:where([class~=not-prose],[class~=not-prose] *)):after{display:none}.prose :where(figure figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){text-align:center;font-style:italic}.prose :where(figure>figcaption):not(:where([class~=not-prose],[class~=not-prose] *)){margin-top:.8571428571428571em}.prose :where(blockQuote):not(:where([class~=not-prose],[class~=not-prose] *)){color:rgb(var(--kd-color-inverse));border-radius:2px;border-color:currentColor}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-right-0{right:-0px}.-top-4{top:-1rem}.left-0{left:0}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-2{top:.5rem}.top-2\.5{top:.625rem}.top-3{top:.75rem}.top-3\.5{top:.875rem}.top-\[var\(--kd--navbar-height\)\]{top:var(--kd--navbar-height)}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.col-span-2{grid-column:span 2 / span 2}.col-span-3{grid-column:span 3 / span 3}.col-span-4{grid-column:span 4 / span 4}.m-0{margin:0}.-mx-6{margin-left:-1.5rem;margin-right:-1.5rem}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-10{margin-top:2.5rem;margin-bottom:2.5rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.my-\[2em\]{margin-top:2em;margin-bottom:2em}.-mb-px{margin-bottom:-1px}.-ml-0{margin-left:-0px}.-ml-0\.5{margin-left:-.125rem}.-ml-1{margin-left:-.25rem}.-ml-px{margin-left:-1px}.-mr-2{margin-right:-.5rem}.-mt-\[2\.5rem\]{margin-top:-2.5rem}.mb-3{margin-bottom:.75rem}.mb-3\.5{margin-bottom:.875rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-2\.5{margin-left:.625rem}.ml-3{margin-left:.75rem}.ml-3\.5{margin-left:.875rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.ml-\[var\(--kd-arrow-margin-left\,0\.1rem\)\]{margin-left:var(--kd-arrow-margin-left,.1rem)}.ml-auto{margin-left:auto}.mr-1{margin-right:.25rem}.mr-1\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.mr-2\.5{margin-right:.625rem}.mr-3{margin-right:.75rem}.mr-\[0\.125rem\]{margin-right:.125rem}.mr-px{margin-right:1px}
36.mt-0{margin-top:0}.mt-0\.5{margin-top:.125rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.mt-\[0\.125rem\]{margin-top:.125rem}.mt-\[0\.7em\]{margin-top:.7em}.mt-px{margin-top:1px}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.contents{display:contents}.hidden{display:none}.h-12{height:3rem}.h-2{height:.5rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-\[var\(--kd--navbar-height\)\]{height:var(--kd--navbar-height)}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[60vh\]{max-height:60vh}.max-h-\[calc\(100vh-var\(--kd--navbar-height\)\)\]{max-height:calc(100vh - var(--kd--navbar-height))}.max-h-screen{max-height:100vh}.min-h-\[24px\]{min-height:24px}.min-h-\[40px\]{min-height:40px}.min-h-\[60px\]{min-height:60px}.min-h-\[80px\]{min-height:80px}.min-h-\[calc\(100vh-var\(--kd--navbar-height\)\)\]{min-height:calc(100vh - var(--kd--navbar-height))}.min-h-full{min-height:100%}.min-h-screen{min-height:100vh}.w-12{width:3rem}.w-40{width:10rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-full{width:100%}.w-screen{width:100vw}.min-w-\[160px\]{min-width:160px}.min-w-\[24px\]{min-width:24px}.min-w-\[340px\]{min-width:340px}.min-w-\[40px\]{min-width:40px}.min-w-\[85px\]{min-width:85px}.min-w-\[var\(--kd-sidebar-min-width\)\]{min-width:var(--kd-sidebar-min-width)}.min-w-full{min-width:100%}.max-w-\[var\(--kd-article-max-width\)\]{max-width:var(--kd-article-max-width)}.max-w-\[var\(--kd-content-max-width\)\]{max-width:var(--kd-content-max-width)}.max-w-\[var\(--kd-navbar-max-width\)\]{max-width:var(--kd-navbar-max-width)}.max-w-\[var\(--kd-sidebar-max-width\)\]{max-width:var(--kd-sidebar-max-width)}.flex-1{flex:1 1 0%}.flex-none{flex:none}.origin-top-right{transform-origin:top right}.-translate-x-3{--tw-translate-x: -.75rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-full{--tw-translate-x: -100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-\[calc\(calc\(var\(--kd--navbar-height\)-var\(--kd-breadcrumbs-height\)\)\+1px\)\]{--tw-translate-y: calc(calc(calc(var(--kd--navbar-height) - var(--kd-breadcrumbs-height)) + 1px) * -1);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-2{--tw-translate-x: .5rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-0{--tw-translate-y: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-x-\[1\.1\]{--tw-scale-x: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-x-\[1\.3\]{--tw-scale-x: 1.3;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-y-\[1\.1\]{--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-y-\[1\.3\]{--tw-scale-y: 1.3;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-center{justify-content:center}.gap-10{gap:2.5rem}.gap-4{gap:1rem}.space-x-0>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(0px * var(--tw-space-x-reverse));margin-left:calc(0px * calc(1 - var(--tw-space-x-reverse)))}.space-x-0\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.125rem * var(--tw-space-x-reverse));margin-left:calc(.125rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-6>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1.5rem * var(--tw-space-x-reverse));margin-left:calc(1.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.self-start{align-self:flex-start}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-scroll{overflow:scroll}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}
36.rounded-md{border-radius:.375rem}.rounded-sm{border-radius:.125rem}.border{border-width:1px}.border-0{border-width:0px}.border-2{border-width:2px}.border-\[1\.5px\]{border-width:1.5px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l{border-left-width:1px}.border-l-8{border-left-width:8px}.border-l-\[5px\]{border-left-width:5px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-blue-600{--tw-border-opacity: 1;border-color:rgb(37 99 235 / var(--tw-border-opacity))}.border-border{--tw-border-opacity: 1;border-color:rgb(var(--kd-color-border) / var(--tw-border-opacity))}.border-current{border-color:currentColor}.border-green-600{--tw-border-opacity: 1;border-color:rgb(22 163 74 / var(--tw-border-opacity))}.border-indigo-600{--tw-border-opacity: 1;border-color:rgb(79 70 229 / var(--tw-border-opacity))}.border-inverse{--tw-border-opacity: 1;border-color:rgb(var(--kd-color-inverse) / var(--tw-border-opacity))}.border-pink-600{--tw-border-opacity: 1;border-color:rgb(219 39 119 / var(--tw-border-opacity))}.border-red-600{--tw-border-opacity: 1;border-color:rgb(220 38 38 / var(--tw-border-opacity))}.border-transparent{border-color:transparent}.border-yellow-600{--tw-border-opacity: 1;border-color:rgb(202 138 4 / var(--tw-border-opacity))}.bg-body{--tw-bg-opacity: 1;background-color:rgb(var(--kd-color-body) / var(--tw-bg-opacity))}.bg-body\/20{background-color:rgb(var(--kd-color-body) / .2)}.bg-elevate{--tw-bg-opacity: 1;background-color:rgb(var(--kd-color-elevate) / var(--tw-bg-opacity))}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-green-400{--tw-bg-opacity: 1;background-color:rgb(74 222 128 / var(--tw-bg-opacity))}.bg-inverse{--tw-bg-opacity: 1;background-color:rgb(var(--kd-color-inverse) / var(--tw-bg-opacity))}.bg-rose-400{--tw-bg-opacity: 1;background-color:rgb(251 113 133 / var(--tw-bg-opacity))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.from-body{--tw-gradient-from: rgb(var(--kd-color-body) / 1) var(--tw-gradient-from-position);--tw-gradient-to: rgb(var(--kd-color-body) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-\[var\(--kd-navbar-padding\)\]{padding:var(--kd-navbar-padding)}.p-\[var\(--kd-sidebar-padding\)\]{padding:var(--kd-sidebar-padding)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-0{padding-top:0;padding-bottom:0}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pb-2{padding-bottom:.5rem}.pb-2\.5{padding-bottom:.625rem}.pb-20{padding-bottom:5rem}.pb-28{padding-bottom:7rem}.pb-6{padding-bottom:1.5rem}.pb-8{padding-bottom:2rem}.pl-0{padding-left:0}.pl-0\.5{padding-left:.125rem}.pl-1{padding-left:.25rem}.pl-10{padding-left:2.5rem}.pl-2{padding-left:.5rem}.pl-2\.5{padding-left:.625rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pr-1{padding-right:.25rem}.pr-4{padding-right:1rem}.pt-12{padding-top:3rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-8{padding-top:2rem}.pt-\[var\(--kd--navbar-height\)\]{padding-top:var(--kd--navbar-height)}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:var(--kd-font-family-mono)}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[17px\]{font-size:17px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.leading-7{line-height:1.75rem}.leading-\[27px\]{line-height:27px}.tracking-wide{letter-spacing:.025em}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity))}.text-body{--tw-text-opacity: 1;color:rgb(var(--kd-color-body) / var(--tw-text-opacity))}.text-brand{--tw-text-opacity: 1;color:rgb(var(--kd-color-brand) / var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity))}.text-indigo-600{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity))}.text-inverse{--tw-text-opacity: 1;color:rgb(var(--kd-color-inverse) / var(--tw-text-opacity))}.text-pink-600{--tw-text-opacity: 1;color:rgb(219 39 119 / var(--tw-text-opacity))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity))}.text-slate-900{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity))}.text-soft{--tw-text-opacity: 1;color:rgb(var(--kd-color-soft) / var(--tw-text-opacity))}.text-soft\/40{color:rgb(var(--kd-color-soft) / .4)}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-yellow-600{--tw-text-opacity: 1;color:rgb(202 138 4 / var(--tw-text-opacity))}.opacity-0{opacity:0}
36.opacity-100{opacity:1}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur: blur(8px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-75{transition-duration:75ms}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.will-change-transform{will-change:transform}body{min-height:100vh;width:100vw}.js-focus-visible :focus:not([data-focus-visible-added]){outline:2px solid transparent;outline-offset:2px}.js-focus-visible [data-focus-visible-added]{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-sha
36dow, 0 0 #0000);--tw-ring-color: var(--kd-color-focus)}*{-webkit-tap-highlight-color:transparent}.no-scrollbar{scrollbar-width:none}.no-scrollbar::-webkit-scrollbar{display:none}@media screen and (min-width:1280px){.scroll-contain{overscroll-behavior:contain}}.scroll-contain-mobile{overscroll-behavior:contain}.scrollbar{scrollbar-width:thin;--kd-scrollbar-track-bg: rgb(var(--kd-color-border) / .3);--kd-scrollbar-thumb-bg: rgb(var(--kd-color-border))}.dark .scrollbar{--kd-scrollbar-track-bg: rgb(var(--kd-color-border) / .2)}@media screen and (prefers-reduced-motion:no-preference){.scrollbar{scroll-behavior:smooth}}.scrollbar::-webkit-scrollbar{height:.375rem!important;width:5px!important;background-color:transparent!important}.scrollbar::-webkit-scrollbar-track{border-radius:.25rem!important;background-color:var(--kd-scrollbar-track-bg)!important}.scrollbar::-webkit-scrollbar-thumb{border-radius:.25rem!important;background-color:var(--kd-scrollbar-thumb-bg)!important}.blur-bg{--tw-bg-opacity: 1;background-color:rgb(var(--kd-color-body) / var(--tw-bg-opacity));--tw-backdrop-blur: blur(8px);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}:is(.dark .blur-bg){--tw-bg-opacity: 1;background-color:rgb(var(--kd-color-body) / var(--tw-bg-opacity))}@supports (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0)){.blur-bg{background-color:rgb(var(--kd-color-body) / .2)}:is(.dark .blur-bg){background-color:rgb(var(--kd-color-body) / .6)}}.svg-responsive>svg{width:100%;height:100%}.kit-docs pre{tab-size:2;-o-tab-size:2;-moz-tab-size:2}.kit-docs p+.admonition,.kit-docs p+.steps{margin-top:2.5rem}.kit-docs .steps+p{margin-top:4rem}.kit-docs .admonition+.steps{margin-top:3.5rem}.kit-docs .admonition+table{margin-top:4rem}.kit-docs .code-fence .code pre{margin:0}.kit-docs .code-fence.lang-bash pre span{color:#fafafa!important}.kit-docs .code-fence.lang-bash pre .line:not(:empty):before{content:"> ";font-weight:700;color:var(--kd-terminal-line-pointer)}.kit-docs .step .description>code{color:var(--kd-color-inverse)}.kit-docs .step .code-fence{margin:0;padding:0}.kit-docs .code-fence+.code-fence{margin-top:.5rem}.kit-docs h1+.steps,.kit-docs h2+.steps,.kit-docs h3+.steps{margin-top:2.5rem}.kit-docs .header-anchor{margin-left:-1.25em;padding:0 .23em;font-size:.9em;opacity:0;border:0;background-color:none}.kit-docs h1:focus,.kit-docs h2:focus,.kit-docs h3:focus,.kit-docs h4:focus,.kit-docs h5:focus,.kit-docs h6:focus{outline:none}@media(hover:hover)and (pointer:fine){.kit-docs h1:hover .header-anchor,.kit-docs h2:hover .header-anchor,.kit-docs h3:hover .header-anchor,.kit-docs h4:hover .header-anchor,.kit-docs h5:hover .header-anchor,.kit-docs h6:hover .header-anchor{opacity:1}}@media(pointer:coarse){.kit-docs h1:focus .header-anchor,.kit-docs h2:focus .header-anchor,.kit-docs h3:focus .header-anchor,.kit-docs h4:focus .header-anchor,.kit-docs h5:focus .header-anchor,.kit-docs h6:focus .header-anchor{opacity:1}}.kit-docs .header-anchor:focus{opacity:1}:is(.dark .dark\:prose-invert){--tw-prose-body: var(--tw-prose-invert-body);--tw-prose-headings: var(--tw-prose-invert-headings);--tw-prose-lead: var(--tw-prose-invert-lead);--tw-prose-links: var(--tw-prose-invert-links);--tw-prose-bold: var(--tw-prose-invert-bold);--tw-prose-counters: var(--tw-prose-invert-counters);--tw-prose-bullets: var(--tw-prose-invert-bullets);--tw-prose-hr: var(--tw-prose-invert-hr);--tw-prose-quotes: var(--tw-prose-invert-quotes);--tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);--tw-prose-captions: var(--tw-prose-invert-captions);--tw-prose-kbd: var(--tw-prose-invert-kbd);--tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);--tw-prose-code: var(--tw-prose-invert-code);--tw-prose-pre-code: var(--tw-prose-invert-pre-code);--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);--tw-prose-th-borders: var(--tw-prose-invert-th-borders);--tw-prose-td-borders: var(--tw-prose-invert-td-borders);color:rgb(var(--kd-color-soft))}:is(.dark .dark\:prose-invert) :where(tbody tr td:first-child code):not(:where([class~=not-prose],[class~=not-prose] *)){color:#a5b4fc}:is(.dark .dark\:prose-invert) :where(tbody tr):not(:where([class~=not-prose],[class~=not-prose] *)){border-bottom-color:rgb(var(--kd-color-border))}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:left-0:before{content:var(--tw-content);left:0}.before\:flex:before{content:var(--tw-content);display:flex}.before\:h-\[calc\(1\.375rem\+1px\)\]:before{content:var(--tw-content);height:calc(1.375rem + 1px)}.before\:w-\[calc\(1\.375rem\+1px\)\]:before{content:var(--tw-content);width:calc(1.375rem + 1px)}.before\:items-center:before{content:var(--tw-content);align-items:center}.before\:justify-center:before{content:var(--tw-content);justify-content:center}.before\:rounded-md:before{content:var(--tw-content);border-radius:.375rem}.before\:border:before{content:var(--tw-content);border-width:1px}.before\:border-soft:before{content:var(--tw-content);--tw-border-opacity: 1;border-color:rgb(var(--kd-color-soft) / var(--tw-border-opacity))}.before\:bg-inverse:before{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(var(--kd-color-inverse) / var(--tw-bg-opacity))}.before\:text-\[0\.7rem\]:before{content:var(--tw-content);font-size:.7rem}.before\:font-bold:before{content:var(--tw-content);font-weight:700}.before\:text-white:before{content:var(--tw-content);--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.before\:shadow-md:before{content:var(--tw-content);--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
36--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.before\:content-\[counter\(step\)\]:before{--tw-content: counter(step);content:var(--tw-content)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:bottom-0:after{content:var(--tw-content);bottom:0}.after\:left-\[0\.6875rem\]:after{content:var(--tw-content);left:.6875rem}.after\:top-\[calc\(1\.875rem\+1px\)\]:after{content:var(--tw-content);top:calc(1.875rem + 1px)}.after\:w-px:after{content:var(--tw-content);width:1px}.after\:bg-border:after{content:var(--tw-content);--tw-bg-opacity: 1;background-color:rgb(var(--kd-color-border) / var(--tw-bg-opacity))}.first\:mt-0:first-child{margin-top:0}.first\:mt-6:first-child{margin-top:1.5rem}.focus-within\:text-inverse:focus-within{--tw-text-opacity: 1;color:rgb(var(--kd-color-inverse) / var(--tw-text-opacity))}.focus-within\:ring-2:focus-within{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-sha
36dow, 0 0 #0000)}.hover\:scale-105:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-\[1\.025\]:hover{--tw-scale-x: 1.025;--tw-scale-y: 1.025;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-\[1\.1\]:hover{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:cursor-pointer:hover{cursor:pointer}.hover\:border-b-2:hover{border-bottom-width:2px}.hover\:border-inverse:hover{--tw-border-opacity: 1;border-color:rgb(var(--kd-color-inverse) / var(--tw-border-opacity))}.hover\:bg-inverse\/90:hover{background-color:rgb(var(--kd-color-inverse) / .9)}.hover\:font-medium:hover{font-weight:500}.hover\:text-brand:hover{--tw-text-opacity: 1;color:rgb(var(--kd-color-brand) / var(--tw-text-opacity))}.hover\:text-inverse:hover{--tw-text-opacity: 1;color:rgb(var(--kd-color-inverse) / var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.focus-visible\:border-inverse:focus-visible{--tw-border-opacity: 1;border-color:rgb(var(--kd-color-inverse) / var(--tw-border-opacity))}.focus-visible\:text-inverse:focus-visible{--tw-text-opacity: 1;color:rgb(var(--kd-color-inverse) / var(--tw-text-opacity))}.group:hover .group-hover\:visible{visibility:visible}.group:hover .group-hover\:translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:text-inverse{--tw-text-opacity: 1;color:rgb(var(--kd-color-inverse) / var(--tw-text-opacity))}.group:hover .group-hover\:opacity-100{opacity:1}:is(.dark .dark\:border-blue-400){--tw-border-opacity: 1;border-color:rgb(96 165 250 / var(--tw-border-opacity))}:is(.dark .dark\:border-green-400){--tw-border-opacity: 1;border-color:rgb(74 222 128 / var(--tw-border-opacity))}:is(.dark .dark\:border-indigo-400){--tw-border-opacity: 1;border-color:rgb(129 140 248 / var(--tw-border-opacity))}:is(.dark .dark\:border-pink-400){--tw-border-opacity: 1;border-color:rgb(244 114 182 / var(--tw-border-opacity))}:is(.dark .dark\:border-red-400){--tw-border-opacity: 1;border-color:rgb(248 113 113 / var(--tw-border-opacity))}:is(.dark .dark\:border-yellow-400){--tw-border-opacity: 1;border-color:rgb(250 204 21 / var(--tw-border-opacity))}:is(.dark .dark\:bg-body\/60){background-color:rgb(var(--kd-color-body) / .6)}:is(.dark .dark\:bg-gray-800){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}:is(.dark .dark\:text-blue-400){--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity))}:is(.dark .dark\:text-green-400){--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity))}:is(.dark .dark\:text-indigo-400){--tw-text-opacity: 1;color:rgb(129 140 248 / var(--tw-text-opacity))}:is(.dark .dark\:text-pink-400){--tw-text-opacity: 1;color:rgb(244 114 182 / var(--tw-text-opacity))}:is(.dark .dark\:text-red-400){--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity))}:is(.dark .dark\:text-slate-200){--tw-text-opacity: 1;color:rgb(226 232 240 / var(--tw-text-opacity))}:is(.dark .dark\:text-yellow-400){--tw-text-opacity: 1;color:rgb(250 204 21 / var(--tw-text-opacity))}:is(.dark .dark\:before\:text-black):before{content:var(--tw-content);--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}@media(min-width:576px){.\35 76\:max-h-\[32rem\]{max-height:32rem}}@media(min-width:992px){.\39 92\:sticky{position:sticky}.\39 92\:top-0{top:0}.\39 92\:top-\[var\(--kd--navbar-height\)\]{top:var(--kd--navbar-height)}.\39 92\:z-0{z-index:0}.\39 92\:mb-3{margin-bottom:.75rem}.\39 92\:mt-0{margin-top:0}.\39 92\:mt-10{margin-top:2.5rem}.\39 92\:mt-32{margin-top:8rem}.\39 92\:block{display:block}.\39 92\:flex{display:flex}.\39 92\:hidden{display:none}.\39 92\:h-6{height:1.5rem}.\39 92\:max-h-\[calc\(100vh-var\(--kd--navbar-height\)\)\]{max-height:calc(100vh - var(--kd--navbar-height))}.\39 92\:min-h-\[calc\(100vh-var\(--kd--navbar-height\)\)\]{min-height:calc(100vh - var(--kd--navbar-height))}.\39 92\:flex-1{flex:1 1 0%}.\39 92\:translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\39 92\:items-center{align-items:center}.\39 92\:space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.\39 92\:px-1{padding-left:.25rem;padding-right:.25rem}.\39 92\:px-16{padding-left:4rem;padding-right:4rem}.\39 92\:px-5{padding-left:1.25rem;padding-right:1.25rem}.\39 92\:py-1{padding-top:.25rem;padding-bottom:.25rem}.\39 92\:pb-0{padding-bottom:0}.\39 92\:pl-10{padding-left:2.5rem}.\39 92\:text-xl{font-size:1.25rem;line-height:1.75rem}}@media(min-width:1200px){.\31 200\:mb-2{margin-bottom:.5rem}.\31 200\:grid{display:grid}}@media(min-width:1280px){.\31 280\:block{display:block}}@media(min-width:1440px){.\31 440\:right-6{right:1.5rem}.\31 440\:pr-2{padding-right:.5rem}}:root{color-scheme:light;font-size:16px;scroll-padding-top:5rem;--background: oklch(1 0 0);--foreground: oklch(.145 0 0);--card: oklch(1 0 0);--card-foreground: oklch(.145 0 0);--popover: oklch(1 0 0);--popover-foreground: oklch(.145 0 0);--primary: oklch(.205 0 0);--primary-foreground: oklch(.985 0 0);--secondary: oklch(.97 0 0);--secondary-foreground: oklch(.205 0 0);--muted: oklch(.97 0 0);--muted-foreground: oklch(.556 0 0);--accent: oklch(.97 0 0);--accent-foreground: oklch(.205 0 0);--border: oklch(.922 0 0);--input: oklch(.922 0 0);--ring: oklch(.708 0 0);
36--code-background: oklch(.97 0 286);--mark-background: oklch(.92 0 286);--radius: .5rem;--docs-border-soft: color-mix(in oklab, var(--border) 55%, transparent);--docs-shadow: 0 18px 48px -32px color-mix(in oklab, var(--foreground) 18%, transparent);--docs-header-bg: color-mix(in oklab, var(--background) 82%, transparent);--docs-code-token-base: #334155;--docs-code-token-accent: #0f5f8f;--docs-code-token-blue: #1d4ed8;--docs-code-token-green: #3f7f1f;--docs-code-token-orange: #c2410c;--docs-code-token-purple: #6d28d9;--docs-code-token-red: #b42318;--docs-code-token-yellow: #9a6700;--docs-code-token-muted: #64748b;--kd-font-family-sans: "Geist Sans", Inter VF, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--kd-font-family-mono: "Geist Mono", ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation, Mono, Fira Code VF, monospace;--kd-color-brand: 15 23 42;--kd-color-brand-rgb: 15, 23, 42;--kd-color-focus: 113 113 122;--kd-color-soft: 82 82 91;--kd-color-body: 255 255 255;--kd-color-elevate: 250 250 250;--kd-color-inverse: 10 10 10;--kd-color-border: 229 229 229;--kd-navbar-height: 3.5rem !important;--kd-navbar-padding: 0 1rem;--kd-navbar-max-width: 1536px;--kd-navbar-border-bottom: 1px solid var(--docs-border-soft);--kd-breadcrumbs-height: 0px !important;--kd-sidebar-min-width: 17rem;--kd-sidebar-max-width: 17rem;--kd-sidebar-padding: 1.5rem 1rem 2rem 0;--kd-sidebar-border-active: color-mix( in oklab, var(--foreground) 16%, transparent );--kd-content-max-width: 1536px;--kd-article-max-width: 82ch;--kd-main-padding-x: 1.5rem}@media screen and (min-width:992px){:root{--kd-main-padding-x: 2.5rem;--kd-sidebar-padding: 2rem 1.25rem 2rem 0}}@media screen and (min-width:1280px){:root{--kd-main-padding-x: 3rem}}@media screen and (min-width:1536px){:root{--kd-navbar-padding: 0 1.5rem}}:root.dark,:root[data-theme=dark]{color-scheme:dark;--background: oklch(.145 0 0);--foreground: oklch(.985 0 0);--card: oklch(.205 0 0);--card-foreground: oklch(.985 0 0);--popover: oklch(.269 0 0);--popover-foreground: oklch(.985 0 0);--primary: oklch(.922 0 0);--primary-foreground: oklch(.205 0 0);--secondary: oklch(.269 0 0);--secondary-foreground: oklch(.985 0 0);--muted: oklch(.269 0 0);--muted-foreground: oklch(.708 0 0);--accent: oklch(.371 0 0);--accent-foreground: oklch(.985 0 0);--border: oklch(1 0 0 / 10%);--input: oklch(1 0 0 / 15%);--ring: oklch(.556 0 0);--code-background: oklch(.21 .01 286);--mark-background: oklch(.37 .01 286);--docs-header-bg: color-mix(in oklab, var(--background) 72%, transparent);--docs-code-token-base: #cbd5e1;--docs-code-token-accent: #7dd3fc;--docs-code-token-blue: #60a5fa;--docs-code-token-green: #a3e635;--docs-code-token-orange: #fb923c;--docs-code-token-purple: #c084fc;--docs-code-token-red: #f87171;--docs-code-token-yellow: #facc15;--docs-code-token-muted: #94a3b8;--kd-color-brand: 250 250 250;--kd-color-brand-rgb: 250, 250, 250;--kd-color-focus: 161 161 170;--kd-color-soft: 161 161 170;--kd-color-body: 10 10 10;--kd-color-elevate: 23 23 23;--kd-color-inverse: 250 250 250;--kd-color-border: 38 38 38}.kit-docs-root{background:var(--background);color:var(--foreground);font-family:var(--kd-font-family-sans, inherit);min-height:100vh;--kd--navbar-height: calc( var(--kd-navbar-height) + var(--kd-breadcrumbs-height) )}.kit-docs-root *,.kit-docs-root *:before,.kit-docs-root *:after{border-color:var(--docs-border-soft);box-sizing:border-box}.kit-docs-root a{color:inherit}.docs-topbar{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--docs-header-bg);border-bottom:1px solid var(--docs-border-soft);inset:0 auto auto 0;position:sticky;width:100%;z-index:40}.docs-header-shell{align-items:center;display:flex;flex-direction:column;height:var(--kd--navbar-height);justify-content:center;margin:0 auto;max-width:var(--kd-navbar-max-width);padding:var(--kd-navbar-padding);width:100%}.docs-header-mobile{align-items:center;display:flex;gap:1rem;justify-content:space-between;width:100%}.docs-header-mobile-left{align-items:center;display:flex;gap:.75rem;min-width:0}.docs-home-link{align-items:center;display:inline-flex;flex:0 0 auto;justify-content:center}.docs-home-logo{display:block;height:2rem;width:2rem}
36.docs-sidebar-trigger.docs-sidebar-trigger-text{gap:.5rem;height:2rem;padding:0 .75rem;width:auto}.docs-sidebar-trigger-text span{font-size:.875rem;font-weight:600;line-height:1}.docs-header-mobile-actions,.docs-header-desktop-actions{align-items:center;display:flex;gap:.5rem}.docs-header-mobile-actions{flex:0 0 auto}.docs-search-trigger,.scheme-toggle{align-items:center;background:transparent;border:1px solid color-mix(in oklab,var(--border) 80%,transparent);border-radius:calc(var(--radius) - 2px);color:inherit;cursor:pointer;display:inline-flex;height:2rem;justify-content:center;transition:border-color .15s ease,background-color .15s ease}.docs-search-trigger{font:inherit}.scheme-toggle{transition:border-color .15s ease,background-color .15s ease,color .15s ease;width:2rem}.docs-search-trigger:hover,.scheme-toggle:hover{background:var(--accent);border-color:color-mix(in oklab,var(--border) 100%,transparent)}.docs-search-trigger svg{fill:none;height:.95rem;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;width:.95rem}.scheme-icon{display:block;height:.95rem;width:.95rem}.docs-search-trigger-mobile{width:2rem}.docs-search-trigger-desktop{gap:.45rem;padding:0 .45rem 0 .62rem}.docs-search-trigger-desktop span{color:var(--muted-foreground);font-size:.78rem}.docs-search-trigger-desktop kbd{background:var(--muted);border:1px solid var(--docs-border-soft);border-radius:.3rem;color:var(--muted-foreground);font:inherit;font-size:.65rem;padding:.08rem .28rem;white-space:nowrap}.docs-header-desktop{display:none;width:100%}.docs-header-desktop .header-nav{display:none}@media screen and (min-width:992px){.docs-header-mobile{display:none}.docs-header-desktop{display:block}}.kit-docs-root .header{z-index:auto}.kit-docs-root .header-compact .header-inner{background:transparent;border-radius:0;box-shadow:none;max-width:none;padding:.5rem 0}.kit-docs-root .header-compact .header-logo,.kit-docs-root .header-compact .header-actions{width:auto}.kit-docs-root .header-logo:before{display:none}.docs-sidebar-trigger{align-items:center;background:var(--background);border:1px solid var(--docs-border-soft);border-radius:calc(var(--radius) - 2px);cursor:pointer;display:inline-flex;height:2rem;justify-content:center;width:2rem}@media screen and (min-width:992px){.docs-sidebar-trigger{display:none}}.kit-docs-root .logo :is(a,button){align-items:center;display:flex;justify-content:center}.docs-navbar-left{align-items:center;display:flex;gap:.75rem}.kit-docs-root .logo :is(a.nav-link,a.electron){justify-content:flex-start}.kit-docs-root .logo svg{height:36px;overflow:hidden}.kit-docs-root .quick-link .circled-icon{align-items:center;aspect-ratio:1 / 1;border-radius:9999px;display:inline-grid;flex-shrink:0;height:2rem;justify-items:center;line-height:0;place-items:center;width:2rem}.kit-docs-root .quick-link .circled-icon-inner{background-position:center;background-repeat:no-repeat;background-size:100%;display:grid;height:1rem;line-height:0;place-items:center;width:1rem}.kit-docs-root .quick-link .circled-icon-glyph{display:grid;height:100%;line-height:0;place-items:center;width:100%}.kit-docs-root .quick-link .circled-icon :is(svg,img){display:block;height:100%;margin:auto;width:100%}@media screen and (min-width:1024px){.kit-docs-root .quick-link .circled-icon{height:3rem;width:3rem}.kit-docs-root .quick-link .circled-icon-inner{height:1.5rem;width:1.5rem}}.docs-main-wrap{display:flex;gap:0;margin:0 auto;max-width:var(--kd-content-max-width);min-height:calc(100vh - var(--kd--navbar-height));padding:0 1rem;width:100%}.docs-sidebar-panel{background:color-mix(in oklab,var(--background) 96%,var(--muted));border-right:1px solid var(--docs-border-soft);flex:0 0 var(--kd-sidebar-max-width);max-height:calc(100vh - var(--kd--navbar-height));overflow-y:auto;padding:var(--kd-sidebar-padding);position:sticky;top:var(--kd--navbar-height)}.docs-content-panel{flex:1 1 auto;min-width:0;padding:2rem var(--kd-main-padding-x) 4rem}.docs-article{max-width:var(--kd-article-max-width)}.docs-spacer,.on-this-page{display:none}@media screen and (min-width:1280px){.docs-main-wrap{align-items:flex-start;gap:2rem}.docs-spacer{display:block;flex:0 0 .25rem}.on-this-page{display:block;flex:0 0 14rem;max-height:calc(100vh - var(--kd--navbar-height));overflow:auto;padding:2.5rem 0 2rem;position:sticky;top:var(--kd--navbar-height)}}@media screen and (max-width:991px){.docs-main-wrap{padding:0}.docs-sidebar-panel{border-right:1px solid var(--docs-border-soft);box-shadow:var(--docs-shadow);
36height:calc(100vh - var(--kd--navbar-height));left:1rem;max-height:none;max-width:min(22rem,calc(100vw - 2rem));opacity:0;position:fixed;top:var(--kd--navbar-height);transform:translate(calc(-100% - 1.5rem));transition:transform .18s ease;visibility:hidden;width:calc(100vw - 2rem);z-index:60}.kit-docs-root[data-docs-sidebar-open=true] .docs-sidebar-panel{opacity:1;transform:translate(0);visibility:visible}.docs-mobile-overlay{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#0000006b;border:0;cursor:pointer;inset:0;opacity:0;pointer-events:none;position:fixed;transition:opacity .18s ease;z-index:50}.kit-docs-root[data-docs-sidebar-open=true] .docs-mobile-overlay{opacity:1;pointer-events:auto}}.docs-sidebar-nav{display:grid;gap:1.75rem;padding-bottom:2rem}.docs-sidebar-section{display:grid;gap:.55rem}.docs-sidebar-heading{color:var(--muted-foreground);font-size:.76rem;font-weight:700;letter-spacing:.14em;margin:0;padding-left:.15rem;text-transform:uppercase}.docs-sidebar-list{display:grid;gap:.2rem;list-style:none;margin:0;padding:0}.docs-sidebar-link{border:1px solid transparent;border-radius:calc(var(--radius) - 2px);display:block;font-size:.93rem;line-height:1.35;padding:.55rem .75rem;text-decoration:none;transition:background-color .15s ease,border-color .15s ease,color .15s ease}.docs-sidebar-link-idle{color:var(--muted-foreground)}.docs-sidebar-link-idle:hover,.docs-sidebar-link-idle:focus-visible{background:var(--accent);border-color:var(--docs-border-soft);color:var(--foreground)}.docs-sidebar-link-active{background:color-mix(in oklab,var(--muted) 68%,transparent);border-color:var(--docs-border-soft);color:var(--foreground);font-weight:600}.docs-toc{display:grid;gap:.85rem}.docs-toc-heading{color:var(--muted-foreground);font-size:.76rem;font-weight:700;letter-spacing:.14em;margin:0;text-transform:uppercase}.docs-toc-list,.docs-toc-sublist{list-style:none;margin:0;padding:0}.docs-toc-list{display:grid;gap:.55rem}.docs-toc-sublist{display:grid;gap:.35rem;margin-left:.35rem;margin-top:.35rem}.docs-toc-link{color:var(--muted-foreground);display:inline-flex;font-size:.88rem;line-height:1.4;text-decoration:none;transition:color .15s ease}.docs-toc-link:hover{color:var(--foreground)}.docs-toc-subitem{align-items:flex-start;display:flex;gap:.15rem}.docs-toc-caret{color:var(--muted-foreground);flex:0 0 auto;height:1rem;margin-top:.18rem;width:1rem}.kit-docs-root .prose{color:var(--foreground);font-size:1rem;max-width:var(--kd-article-max-width)}.kit-docs-root ol li.truncate{color:inherit!important}.docs-fallback-title{margin:0 0 1.5rem}.kit-docs-root .prose :is(h1,h2,h3,h4,h5,h6){position:relative}.kit-docs-root .prose h1,.kit-docs-root .prose h2,.kit-docs-root .prose h3,.kit-docs-root .prose h4{color:var(--foreground);letter-spacing:-.025em}.kit-docs-root .prose h1{font-size:clamp(2.4rem,5vw,3.15rem);font-weight:800;line-height:1;margin:0}.kit-docs-root .prose h2{border-bottom:1px solid var(--docs-border-soft);font-size:clamp(1.85rem,2vw,2.1rem);font-weight:650;margin-top:3rem;padding-bottom:.65rem}.kit-docs-root .prose h3{font-size:1.45rem;font-weight:650;margin-top:2.25rem}.kit-docs-root .prose h4{font-size:1.15rem;font-weight:650;margin-top:1.75rem}.kit-docs-root .prose p,.kit-docs-root .prose li,.kit-docs-root .prose td,.kit-docs-root .prose th{color:var(--foreground);line-height:1.8}.kit-docs-root .prose :where(strong):not(:where([class~=not-prose],[class~=not-prose] *)),.kit-docs-root .prose strong{color:var(--foreground)!important}.kit-docs-root .prose .description{color:var(--muted-foreground);font-size:1.1rem}.kit-docs-root .prose :where(a):not(:where([class~=not-prose],[class~=not-prose] *)),.kit-docs-root .prose a{color:var(--foreground)!important;font-weight:500;text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--foreground) 30%,transparent);text-decoration-thickness:1px;text-underline-offset:.22em}.kit-docs-root .prose a:hover{text-decoration-color:var(--foreground)}.kit-docs-root .prose blockquote{border-left:2px solid var(--docs-border-soft);color:var(--muted-foreground);font-style:italic;margin:1.75rem 0;padding-left:1.25rem}.kit-docs-root .prose table{border-collapse:collapse;width:100%}.kit-docs-root .prose thead tr,.kit-docs-root .prose tbody tr{border-top:1px solid var(--docs-border-soft)}.kit-docs-root .prose tbody tr:nth-child(2n){background:color-mix(in oklab,var(--muted) 72%,transparent)}.kit-docs-root .prose th,.kit-docs-root .prose td{border:1px solid var(--docs-border-soft);padding:.7rem 1rem;text-align:left}.kit-docs-root .prose ul{list-style:disc}.kit-docs-root .prose ol{list-style:decimal}.kit-docs-root .prose :is(ul,ol){margin:1.25rem 0 1.5rem 1.5rem}.kit-docs-root .prose img,.kit-docs-root .prose video,.kit-docs-root .prose iframe{border:1px solid var(--docs-border-soft);border-radius:calc(var(--radius) + 4px);box-shadow:var(--docs-shadow)}:root.dark .kit-docs-root img[data-docs-image-type=svg],:root[data-theme=dark] .kit-docs-root img[data-docs-image-type=svg]{background:#fff}.kit-docs-root .prose iframe{display:block;height:auto;max-width:100%;width:100%;aspect-ratio:16 / 9}.kit-docs-root .prose .quick-link{border:1px solid var(--docs-border-soft);box-shadow:var(--docs-shadow);h2{margin-top:1rem}}.kit-docs-root .prose .quick-link-bg{background:linear-gradient(180deg,color-mix(in oklab,var(--background) 98%,transparent),color-mix(in oklab,var(--muted) 26%,transparent)) padding-box,linear-gradient(180deg,color-mix(in oklab,var(--border) 75%,transparent),color-mix(in oklab,var(--border) 30%,transparent)) border-box}.kit-docs-root .admonition{background:color-mix(in oklab,var(--muted) 55%,transparent);border-radius:calc(var(--radius) + 2px);box-shadow:var(--docs-shadow)}.code-fence{--kd-code-fence-bg: var(--code-background);--kd-code-fence-top-bar-bg: color-mix( in oklab, var(--code-background) 78%, transparent );--kd-code-copied-bg-color: color-mix( in oklab, var(--foreground) 85%, transparent );--kd-terminal-line-pointer: var(--muted-foreground);--kd-code-highlight-border: color-mix( in oklab, var(--foreground) 18%, transparent );--kd-code-highlight-color: color-mix( in oklab, var(--foreground) 7%, transparent )}.kit-docs-root .code-fence{border-radius:calc(var(--radius) + 4px);box-shadow:var(--docs-shadow)}.kit-docs-root .code-fence .code pre{margin:0;padding:1rem 1rem 1.15rem}.kit-docs-root .code-fence.lang-bash pre span{color:var(--foreground)!important}.kit-docs-root .code-fence.lang-bash pre .line:not(:empty):before{color:var(--kd-terminal-line-pointer);content:"> ";font-weight:700}.kit-docs-root .code-fence+.code-fence{margin-top:.5rem}.kit-docs-root .code-fence [style*="color:#89ddff" i]{color:var(--docs-code-token-accent)!important}.kit-docs-root .code-fence [style*="color:#babed8" i],.kit-docs-root .code-fence [style*="color:#b2ccd6" i]{color:var(--docs-code-token-base)!important}.kit-docs-root .code-fence [style*="color:#c3e88d" i]{color:var(--docs-code-token-green)!important}.kit-docs-root .code-fence [style*="color:#f07178" i],.kit-docs-root .code-fence [style*="color:#ff9cac" i]{color:var(--docs-code-token-red)!important}.kit-docs-root .code-fence [style*="color:#c792ea" i]{color:var(--docs-code-token-purple)!important}.kit-docs-root .code-fence [style*="color:#82aaff" i]{color:var(--docs-code-token-blue)!important}.kit-docs-root .code-fence [style*="color:#ffcb6b" i]{color:var(--docs-code-token-yellow)!important}.kit-docs-root .code-fence [style*="color:#676e95" i]{color:var(--docs-code-token-muted)!important}.kit-docs-root .code-fence [style*="color:#f78c6c" i]{color:var(--docs-code-token-orange)!important}.kit-docs-root .step .description>
36code{color:var(--foreground)}.kit-docs-root .step .description>code,.kit-docs-root :not(pre)>code{background-color:var(--muted);border-radius:.35rem;color:var(--foreground)!important;display:inline-block;font-size:.875rem;font-weight:600;padding:.15rem .35rem}.kit-docs-root code:before,.kit-docs-root code:after{content:none!important}.kit-docs-root .step:before{color:var(--background);margin-top:3px}.kit-docs-root .step{padding-left:1.625rem}.kit-docs-root .prose>ol.steps>li.step>*:first-child{margin-top:0}.kit-docs-root .step :is(h2,h3,h4,h5,h6){margin:0;margin-left:.5rem}.kit-docs-root .step .code-fence{margin:0;padding:0}.kit-docs-root .steps>.step:last-child:after{content:none}.kit-docs-root .steps>.step:last-child{padding-bottom:0}.kit-docs-root p+.admonition,.kit-docs-root p+.steps{margin-top:2.5rem}.kit-docs-root .steps+p{margin-top:4rem}.kit-docs-root .admonition+.steps{margin-top:3.5rem}.kit-docs-root .admonition+table{margin-top:4rem}.kit-docs-root h1+.steps,.kit-docs-root h2+.steps,.kit-docs-root h3+.steps{margin-top:2.5rem}.kit-docs-root .table-wrapper{margin:2em 0;overflow-x:auto;position:relative;scrollbar-gutter:stable both-edges}.kit-docs-root .table-wrapper>table{margin:0;min-width:min(44rem,100%)}.kit-docs-root .header-anchor{background-color:transparent;border:0;color:transparent;display:inline-flex;font-size:0;height:1.1em;justify-content:center;left:0;margin-left:0;opacity:0;padding:0;position:absolute;text-decoration:none;top:50%;transform:translate(-1.25rem,-50%);width:1rem}.kit-docs-root .header-anchor:before{color:var(--muted-foreground);content:"#";font-size:.85rem;line-height:1}.kit-docs-root h1:focus,.kit-docs-root h2:focus,.kit-docs-root h3:focus,.kit-docs-root h4:focus,.kit-docs-root h5:focus,.kit-docs-root h6:focus{outline:none}@media(hover:hover)and (pointer:fine){.kit-docs-root h1:hover .header-anchor,.kit-docs-root h2:hover .header-anchor,.kit-docs-root h3:hover .header-anchor,.kit-docs-root h4:hover .header-anchor,.kit-docs-root h5:hover .header-anchor,.kit-docs-root h6:hover .header-anchor{opacity:1}}@media(pointer:coarse){.kit-docs-root h1:focus .header-anchor,.kit-docs-root h2:focus .header-anchor,.kit-docs-root h3:focus .header-anchor,.kit-docs-root h4:focus .header-anchor,.kit-docs-root h5:focus .header-anchor,.kit-docs-root h6:focus .header-anchor{opacity:1}}.kit-docs-root .header-anchor:focus{opacity:1}@media screen and (max-width:767px){.kit-docs-root .table-wrapper{border:1px solid var(--docs-border-soft);border-radius:calc(var(--radius) + 2px);margin-top:1.5rem;padding-bottom:.75rem}.kit-docs-root .table-wrapper:before{color:var(--muted-foreground);content:"Scroll horizontally";display:block;font-size:.72rem;font-weight:600;letter-spacing:.04em;padding:.65rem .85rem .35rem;text-transform:uppercase}.kit-docs-root .table-wrapper:after{background:linear-gradient(90deg,#fff0,color-mix(in oklab,var(--background) 96%,transparent));content:"";inset:2.2rem 0 0 auto;pointer-events:none;position:sticky;width:2rem}:root.dark .kit-docs-root .table-wrapper:after,:root[data-theme=dark] .kit-docs-root .table-wrapper:after{background:linear-gradient(90deg,#0000,color-mix(in oklab,var(--background) 96%,transparent))}.kit-docs-root .table-wrapper>table{min-width:42rem}}.docs-pagination-rule{border-color:var(--docs-border-soft);margin-top:4rem}.docs-pagination{display:flex;flex-direction:column;gap:1rem;padding:1.75rem 0 .5rem}.docs-pagination-card{display:flex;flex-direction:column;gap:.35rem}.docs-pagination-card-next{align-items:flex-end;margin-left:auto}.docs-pagination-label{color:var(--muted-foreground);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.docs-pagination-link{align-items:center;border-radius:calc(var(--radius) - 2px);display:inline-flex;gap:.5rem;min-height:2.25rem;padding:.5rem 1rem;text-decoration:none;transition:background-color .15s ease,color .15s ease}.docs-pagination-link:hover{background:var(--accent)}.docs-pagination-icon{color:var(--muted-foreground)}@media screen and (min-width:768px){.docs-pagination{align-items:center;flex-direction:row;justify-content:space-between}}@media screen and (max-width:1020px){.kit-docs-root .getting-started svg{height:.8em;width:.8em}}</style> <div class="kit-docs kit-docs-root" data-docs-sidebar-open="false"> <div class="blur-bg docs-topbar"> <div class="docs-header-shell"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style>
36<script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();</script>
36<script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script>
36<astro-island uid="1Tn45M" component-url="/_astro/DocsHeader.DJYataGi.js" component-export="default" renderer-url="/_astro/client.svelte.DcdGH0kg.js" props="{&quot;product&quot;:[0,&quot;electron&quot;]}" ssr client="load" opts="{&quot;name&quot;:&quot;DocsHeader&quot;,&quot;value&quot;:true}" await-children><!--[--><div class="docs-header-mobile"><div class="docs-header-mobile-left"><a class="docs-home-link" href="/" aria-label="Go to ToDesktop home"><img alt="Logo" class="docs-home-logo" decoding="async" fetchpriority="low" height="32" src="/images/header/logo.png" width="32"/></a> <button type="button" aria-controls="docs-sidebar-panel" aria-expanded="false" aria-label="Open contents" class="docs-sidebar-trigger docs-sidebar-trigger-text"><svg aria-hidden="true" viewBox="0 0 28 28" class="h-4 w-4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M8 8h12"></path><path d="M8 14h12"></path><path d="M8 20h12"></path></svg> <span>Contents</span></button></div> <!--[0--><div class="docs-header-mobile-actions"><button aria-expanded="false" aria-haspopup="dialog" aria-label="Search documentation" class="docs-search-trigger docs-search-trigger-mobile" type="button"><svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-4-4"></path></svg></button> <button class="scheme-toggle" type="button" aria-label="Toggle dark mode"><!--[-1--><svg aria-hidden="true" viewBox="0 0 24 24" class="scheme-icon"><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle><path d="M12 2v2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path><path d="M12 20v2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path><path d="m4.93 4.93 1.41 1.41" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path><path d="m17.66 17.66 1.41 1.41" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path><path d="M2 12h2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path><path d="M20 12h2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path><path d="m6.34 17.66-1.41 1.41" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path><path d="m19.07 4.93-1.41 1.41" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path></svg><!--]--></button><!----></div><!--]--></div> <div class="docs-header-desktop"><!--[-1--><!--]--> <div class="header w-full relative z-[3000] svelte-pm7uep header-light header-compact"><header class="header-inner mx-auto w-full max-w-[1128px] rounded-full px-6 py-[22px] md:px-4 svelte-pm7uep"><div class="flex items-center justify-between"><div class="header-logo relative z-10 w-32 overflow-hidden svelte-pm7uep"><a class="relative z-10 flex w-max cursor-pointer items-center gap-3.5" href="/"><div class="p-0.5"><img alt="Logo" class="rounded-md" decoding="async" fetchpriority="low" height="32" src="/images/header/logo.png" style="box-shadow: 0px 1.5px 2px -0.75px rgba(4, 8, 34, 0.06), 0px 1px 1.5px -0.5px rgba(3, 8, 35, 0.12), 0px 0.5px 0.75px -0.25px rgba(3, 8, 35, 0.12), 0px 0.25px 0.5px -0.125px rgba(3, 8, 35, 0.12), 0px 0.125px 0.25px -0.062px rgba(3, 8, 35, 0.12), 0px 0.062px 0.125px 0px rgba(0, 0, 0, 0.12);" width="32"/></div></a></div> <nav class="header-nav relative md:flex-1 max-md:hidden svelte-pm7uep"><div class="header-nav-list mx-auto flex gap-2 text-[28px] leading-9 max-md:w-full max-md:flex-1 max-md:flex-col md:w-max md:text-sm md:leading-5 svelte-pm7uep"><div class="header-nav-item-background pointer-events-none absolute left-0 top-0 h-9 rounded-full opacity-0 bg-gray-900/[.06]"></div> <!--[-1--><!--]--> <div role="button" tabindex="0" aria-expanded="false" aria-haspopup="menu" class="header-nav-item group relative hidden cursor-pointer items-center gap-1.5 rounded-full transition-all duration-200 md:flex h-9 px-5 py-2 text-gray-900 md:px-3"><span class="inline-flex items-center gap-1.5 whitespace-nowrap pl-1 align-middle"><span>Products</span> <svg class="hidden h-5 w-5 rotate-90 opacity-50 transition-transform duration-150 group-hover:opacity-100 md:block" fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M9.29289 7.29289C9.68342 6.90237 10.3166 6.90237 10.7071 7.29289L13.6464 10.2322C14.6228 11.2085 14.6228 12.7915 13.6464 13.7678L10.7071 16.7071C10.3166 17.0976 9.68342 17.0976 9.29289 16.7071C8.90237 16.3166 8.90237 15.6834 9.29289 15.2929L12.2322 12.3536C12.4275 12.1583 12.4275 11.8417 12.2322 11.6464L9.29289 8.70711C8.90237 8.31658 8.90237 7.68342 9.29289 7.29289Z" fill="black" fill-rule="evenodd"></path></svg><!----></span></div><!----> <!--[--><a class="header-nav-item flex items-center justify-between rounded-full px-5 py-2 transition-all duration-200 md:px-3  text-gray-900  svelte-pm7uep" href="/electron/docs" style="--delay-on-mobile: 0ms;">Docs <!--[-1--><!--]--></a><a class="header-nav-item flex items-center justify-between rounded-full px-5 py-2 transition-all duration-200 md:px-3  text-gray-900  svelte-pm7uep" href="/changelog" style="--delay-on-mobile: 50ms;">Changelog <!--[-1--><!--]--></a><a class="header-nav-item flex items-center justify-between rounded-full px-5 py-2 transition-all duration-200 md:px-3  text-gray-900  svelte-pm7uep" href="/blog" style="--delay-on-mobile: 100ms;">Blog <!--[-1--><!--]--></a>
36<!--]--></div> <!--[-1--><!--]--></nav> <div class="header-actions relative z-10 flex items-center justify-end gap-3 transition-all md:w-32 svelte-pm7uep"><!--[0--><!--[--><div class="docs-header-desktop-actions" slot="dark-mode-toggle"><button aria-expanded="false" aria-haspopup="dialog" class="docs-search-trigger docs-search-trigger-desktop" type="button"><svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-4-4"></path></svg> <span>Search</span> <kbd>⌘/Ctrl K</kbd></button> <button class="scheme-toggle" type="button" aria-label="Toggle dark mode"><!--[-1--><svg aria-hidden="true" viewBox="0 0 24 24" class="scheme-icon"><circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle><path d="M12 2v2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path><path d="M12 20v2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path><path d="m4.93 4.93 1.41 1.41" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path><path d="m17.66 17.66 1.41 1.41" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path><path d="M2 12h2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path><path d="M20 12h2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path><path d="m6.34 17.66-1.41 1.41" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path><path d="m19.07 4.93-1.41 1.41" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"></path></svg><!--]--></button><!----></div><!--]--><!--]--> <!--[-1--><!--]--> <!--[0--><div class="compact-menu-container relative md:hidden"><button aria-label="Open menu" aria-expanded="false" class="rounded-xl p-[7px] transition-colors bg-gray-900/10 text-gray-900 hover:bg-gray-900/20"><!--[1--><svg fill="none" height="22" viewBox="0 0 22 22" width="22" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M2.66663 5.99984C2.66663 5.5396 3.03972 5.1665 3.49996 5.1665H18.5C18.9602 5.1665 19.3333 5.5396 19.3333 5.99984C19.3333 6.46007 18.9602 6.83317 18.5 6.83317H3.49996C3.03972 6.83317 2.66663 6.46007 2.66663 5.99984ZM2.66663 10.9998C2.66663 10.5396 3.03972 10.1665 3.49996 10.1665H18.5C18.9602 10.1665 19.3333 10.5396 19.3333 10.9998C19.3333 11.4601 18.9602 11.8332 18.5 11.8332H3.49996C3.03972 11.8332 2.66663 11.4601 2.66663 10.9998ZM2.66663 15.9998C2.66663 15.5396 3.03972 15.1665 3.49996 15.1665H18.5C18.9602 15.1665 19.3333 15.5396 19.3333 15.9998C19.3333 16.4601 18.9602 16.8332 18.5 16.8332H3.49996C3.03972 16.8332 2.66663 16.4601 2.66663 15.9998Z" fill="url(#paint0_linear_bars_light)" fill-rule="evenodd"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="paint0_linear_bars_light" x1="11" x2="11" y1="5.1665" y2="16.8332"><stop stop-color="#1f2937"></stop><stop offset="1" stop-color="#374151"></stop></linearGradient></defs></svg><!--]--></button> <!--[-1--><!--]--></div><!--]--> <a class="block shrink-0 max-md:hidden" href="https://app.todesktop.com/"><button aria-label="Log in" class="header-btn whitespace-nowrap rounded-full px-4 py-[7px] transition-all duration-200 active:duration-[50ms] max-md:hidden header-btn-outline svelte-pm7uep"><span class="relative z-10 flex items-center justify-center gap-1 text-sm font-medium -tracking-[0.14px] text-gray-900 svelte-pm7uep">Log in</span></button></a> <div class="header-sign-up-wrapper w-0 shrink-0 overflow-hidden max-md:hidden svelte-pm7uep"><a class="block" href="https://app.todesktop.com/signup"><button aria-label="Sign up" class="header-btn header-btn-primary whitespace-nowrap rounded-full px-4 py-[7px] transition-all duration-200 active:duration-[50ms] svelte-pm7uep"><span class="relative z-10 flex items-center justify-center gap-1 text-sm font-medium -tracking-[0.14px] text-white">Sign up</span></button></a></div></div></div></header></div><!----></div> <!--[-1--><!--]--><!----><!--]--><!--astro:end--></astro-island> </div> </div> <div class="docs-main-wrap"> <aside id="docs-sidebar-panel" class="docs-sidebar-panel"> <div class="switcher" data-astro-cid-yfaadjzu> <nav class="hybrid-nav" aria-label="Documentation product switcher" data-astro-cid-yfaadjzu> <a href="/electron/docs/" class="hybrid-link active" aria-current="page" data-astro-cid-yfaadjzu> for Electron </a><a href="/builder/docs/" class="hybrid-link" data-astro-cid-yfaadjzu> Builder </a> </nav> </div>  <nav aria-label="Documentation navigation" class="992:px-1"> <div class="docs-sidebar-nav"> <section class="docs-sidebar-section"> <h2 class="docs-sidebar-heading">Introduction</h2> <ul class="docs-sidebar-list"> <li> <a href="/electron/docs/introduction/building-application" aria-current="page" class="docs-sidebar-link docs-sidebar-link-active"> Building an application </a> </li><li> <a href="/electron/docs/introduction/signing-application" class="docs-sidebar-link docs-sidebar-link-idle"> Signing an application </a> </li><li> <a href="/electron/docs/introduction/releasing-application" class="docs-sidebar-link docs-sidebar-link-idle"> Releasing an application </a> </li> </ul> </section><section class="docs-sidebar-section"> <h2 class="docs-sidebar-heading">Guides</h2> <ul class="docs-sidebar-list"> <li> <a href="/electron/docs/guides/automating-releases-from-ci" class="docs-sidebar-link docs-sidebar-link-idle">
36 Automating releases from CI </a> </li><li> <a href="/electron/docs/guides/development-staging-apps" class="docs-sidebar-link docs-sidebar-link-idle"> Creating a development or staging app </a> </li><li> <a href="/electron/docs/guides/debian-apt-repository-support" class="docs-sidebar-link docs-sidebar-link-idle"> Debian APT repository support </a> </li><li> <a href="/electron/docs/guides/distributing-mac-app-store" class="docs-sidebar-link docs-sidebar-link-idle"> Distributing builds to Mac App Store </a> </li><li> <a href="/electron/docs/guides/distributing-microsoft-store" class="docs-sidebar-link docs-sidebar-link-idle"> Distributing builds to Microsoft Store </a> </li><li> <a href="/electron/docs/guides/release-webhooks" class="docs-sidebar-link docs-sidebar-link-idle"> Release Webhooks </a> </li><li> <a href="/electron/docs/guides/restricting-downloads-by-ip" class="docs-sidebar-link docs-sidebar-link-idle"> Restricting downloads by IP address </a> </li><li> <a href="/electron/docs/guides/mac-notarization-timeouts" class="docs-sidebar-link docs-sidebar-link-idle"> Mac notarization timeouts </a> </li> </ul> </section><section class="docs-sidebar-section"> <h2 class="docs-sidebar-heading">Libraries</h2> <ul class="docs-sidebar-list"> <li> <a href="/electron/docs/libraries/cli" class="docs-sidebar-link docs-sidebar-link-idle"> ToDesktop CLI </a> </li><li> <a href="/electron/docs/libraries/runtime" class="docs-sidebar-link docs-sidebar-link-idle"> ToDesktop Runtime </a> </li> </ul> </section><section class="docs-sidebar-section"> <h2 class="docs-sidebar-heading">Migrations</h2> <ul class="docs-sidebar-list"> <li> <a href="/electron/docs/migrations/integrate-electron-application" class="docs-sidebar-link docs-sidebar-link-idle"> Integrate ToDesktop into an electron project </a> </li><li> <a href="/electron/docs/migrations/integrate-electron-webpack" class="docs-sidebar-link docs-sidebar-link-idle"> Integrate ToDesktop into an electron-webpack project </a> </li><li> <a href="/electron/docs/migrations/migrate-electron-builder" class="docs-sidebar-link docs-sidebar-link-idle"> Migrate from electron-builder to ToDesktop </a> </li><li> <a href="/electron/docs/migrations/migrate-electron-forge" class="docs-sidebar-link docs-sidebar-link-idle"> Migrate from electron-forge to ToDesktop </a> </li><li> <a href="/electron/docs/migrations/migrate-electron-packager" class="docs-sidebar-link docs-sidebar-link-idle"> Migrate from electron-packager to ToDesktop </a> </li> </ul> </section><section class="docs-sidebar-section"> <h2 class="docs-sidebar-heading">API</h2> <ul class="docs-sidebar-list"> <li> <a href="/electron/docs/api" class="docs-sidebar-link docs-sidebar-link-idle"> API Reference </a> </li><li> <a href="/electron/docs/api/get-release-status" class="docs-sidebar-link docs-sidebar-link-idle"> getReleaseStatus </a> </li><li> <a href="/electron/docs/api/get-release-build-ids" class="docs-sidebar-link docs-sidebar-link-idle"> getReleaseBuildIds </a> </li><li> <a href="/electron/docs/api/get-build" class="docs-sidebar-link docs-sidebar-link-idle"> getBuild </a> </li><li> <a href="/electron/docs/api/release-build" class="docs-sidebar-link docs-sidebar-link-idle"> releaseBuild </a> </li><li> <a href="/electron/docs/api/get-build-labels" class="docs-sidebar-link docs-sidebar-link-idle"> getBuildLabels </a> </li><li> <a href="/electron/docs/api/set-build-label" class="docs-sidebar-link docs-sidebar-link-idle"> setBuildLabel </a> </li><li> <a href="/electron/docs/api/remove-build-label" class="docs-sidebar-link docs-sidebar-link-idle"> removeBuildLabel </a> </li><li> <a href="/electron/docs/api/download-access" class="docs-sidebar-link docs-sidebar-link-idle"> downloadAccess </a> </li> </ul> </section><section class="docs-sidebar-section"> <h2 class="docs-sidebar-heading">Resources</h2> <ul class="docs-sidebar-list"> <li> <a href="/electron/docs/resources/helpful-electron-resources" class="docs-sidebar-link docs-sidebar-link-idle"> Helpful Electron resources </a> </li> </ul> </section> </div> </nav> </aside> <main class="docs-content-panel"> <article data-docs-article data-docs-product="electron" data-docs-section="Introduction" data-docs-title="Building an application" data-docs-type="guide" data-pagefind-body data-pagefind-filter="product[data-docs-product], type[data-docs-type]" data-pagefind-meta="title[data-docs-title], product[data-docs-product], section[data-docs-section], type[data-docs-type]" class="docs-article markdown prose">  <div class="prose docs-markdown"> <h1 id="building-an-application" tabindex="-1"><a class="header-anchor" aria-hidden="true" href="#building-an-application">#</a>Building an application</h1>
37<p>Using ToDesktop to manage your Electron app allows you to build, test, and release your app with confidence. To get started, navigate to <a href="https://app.todesktop.com">ToDesktop</a>, click <strong>Create new app</strong>, enter an application name, and choose an Electron plan from the dialog.</p>
38<img alt="Application modal for creating a new Electron application in ToDesktop" class src="/docs-assets/electron/introduction/building-application/create-new-app-new.png" width="820">
39<div class="admonition bg-elevate my-8 mx-auto rounded-md border-2 border-l-8 p-4 border-blue-600 dark:border-blue-400"> <div class="flex h-full items-center font-bold text-blue-600 dark:text-blue-400"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em" class="mr-1.5 text-xl"> <path fill="currentColor" d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m-1-11v6h2v-6zm0-4v2h2V7z"></path> </svg> <span class="flex items-center">INFO</span> </div> <div class="text-inverse pl-1 text-lg"> <p>The <a href="/builder/docs/introduction/getting-started">todesktop builder</a> option is our no-code solution if you&#39;d rather avoid writing Electron code and re-use your existing web application.</p> </div> </div>
40<h2 id="generating-an-app" tabindex="-1"><a class="header-anchor" aria-hidden="true" href="#generating-an-app">#</a>Generating an app</h2>
41<p>If you don&#39;t have an existing Electron app, you can use our <a href="https://www.npmjs.com/package/create-todesktop-app">create-desktop-app</a> NPM package to create a basic application that comes pre-installed with <code>@todesktop/cli</code> and <code>@todesktop/runtime</code>:</p>
42<div class="code-fence 576:max-h-[32rem] relative my-8 mx-auto max-h-[60vh] overflow-y-auto rounded-md prefers-dark-scheme scrollbar shadow-xl border-border border lang-bash" style="background-color: var(--kd-code-fence-bg);">  <div class="code relative z-0 overflow-hidden"> <div> <pre class="relative scrollbar overflow-x-auto overflow-y-hidden pl-3">        <code><span class="line"><span style="color:#FFCB6B">npx</span><span style="color:#C3E88D"> create-todesktop-app</span><span style="color:#C3E88D"> your-app-name</span><span style="color:#C3E88D"> your-app-id</span><span style="color:#89DDFF">`</span></span>
43<span class="line"></span></code>
44      </pre> </div>   </div> </div>
45<p>You can then build your desktop app with the following command:</p>
46<div class="code-fence 576:max-h-[32rem] relative my-8 mx-auto max-h-[60vh] overflow-y-auto rounded-md prefers-dark-scheme scrollbar shadow-xl border-border border lang-bash" style="background-color: var(--kd-code-fence-bg);">  <div class="code relative z-0 overflow-hidden"> <div> <pre class="relative scrollbar overflow-x-auto overflow-y-hidden pl-3">        <code><span class="line"><span style="color:#FFCB6B">npm</span><span style="color:#C3E88D"> run</span><span style="color:#C3E88D"> build</span></span>
47<span class="line"></span></code>
48      </pre> </div>   </div> </div>
49<p>This will execute the <code>@todesktop/cli</code> build command and prompt you to log in and enter your registered email address and access token. You can find your access token by clicking your profile dropdown in the web interface and selecting the <strong>manage access token</strong> option.</p>
50<h2 id="using-an-existing-app" tabindex="-1"><a class="header-anchor" aria-hidden="true" href="#using-an-existing-app">#</a>Using an existing app</h2>
51<p>If you have an existing application, you can instead install <code>@todesktop/cli</code> as a global dependency. The <code>@todesktop/cli</code> package will take care of authentication and programmatically interacting with the ToDesktop platform.</p>
52<div class="code-fence 576:max-h-[32rem] relative my-8 mx-auto max-h-[60vh] overflow-y-auto rounded-md prefers-dark-scheme scrollbar shadow-xl border-border border lang-bash" style="background-color: var(--kd-code-fence-bg);">  <div class="code relative z-0 overflow-hidden"> <div> <pre class="relative scrollbar overflow-x-auto overflow-y-hidden pl-3">        <code><span class="line"><span style="color:#FFCB6B">npm</span><span style="color:#C3E88D"> install</span><span style="color:#C3E88D"> @todesktop/cli</span><span style="color:#C3E88D"> -g</span></span>
53<span class="line"></span></code>
54      </pre> </div>   </div> </div>
55<p>Create a <code>todesktop.json</code> file in the root of your Electron project, using the following configuration and changing the properties as needed:</p>
56<div class="code-fence 576:max-h-[32rem] relative my-8 mx-auto max-h-[60vh] overflow-y-auto rounded-md prefers-dark-scheme scrollbar shadow-xl border-border border lang-json" style="background-color: var(--kd-code-fence-bg);">  <div class="code relative z-0 overflow-hidden"> <div> <pre class="relative scrollbar overflow-x-auto overflow-y-hidden pl-3">        <code><span class="line"><span style="color:#89DDFF">{</span></span>
57<span class="line"><span style="color:#89DDFF">
57  "</span><span style="color:#C792EA">id</span><span style="color:#89DDFF">"</span><span style="color:#89DDFF">:</span><span style="color:#89DDFF"> "</span><span style="color:#C3E88D">your-app-id</span><span style="color:#89DDFF">"</span><span style="color:#89DDFF">,</span></span>
58<span class="line"><span style="color:#89DDFF">  "</span><span style="color:#C792EA">icon</span><span style="color:#89DDFF">"</span><span style="color:#89DDFF">:</span><span style="color:#89DDFF"> "</span><span style="color:#C3E88D">./path-to-icon.png</span><span style="color:#89DDFF">"</span><span style="color:#89DDFF">,</span></span>
59<span class="line"><span style="color:#89DDFF">  "</span><span style="color:#C792EA">appPath</span><span style="color:#89DDFF">"</span><span style="color:#89DDFF">:</span><span style="color:#89DDFF"> "</span><span style="color:#C3E88D">.</span><span style="color:#89DDFF">"</span><span style="color:#89DDFF">,</span></span>
60<span class="line"><span style="color:#89DDFF">  "</span><span style="color:#C792EA">schemaVersion</span><span style="color:#89DDFF">"</span><span style="color:#89DDFF">:</span><span style="color:#F78C6C"> 1</span></span>
61<span class="line"><span style="color:#89DDFF">}</span></span>
62<span class="line"></span></code>
63      </pre> </div>   </div> </div>
64<p>You may optionally want to include the <code>appFiles</code> property in your todesktop.json. This allows you to decide which files get packed into your app using an array of glob patterns. For example, the following will match all files in the <code>src</code> directory (any level of nesting) that have the <code>.js</code> extension. The <code>package.json</code>, <code>package-lock.json</code> and <code>yarn.lock</code> files are always included if they exist.</p>
65<div class="code-fence 576:max-h-[32rem] relative my-8 mx-auto max-h-[60vh] overflow-y-auto rounded-md prefers-dark-scheme scrollbar shadow-xl border-border border lang-json" style="background-color: var(--kd-code-fence-bg);">  <div class="code relative z-0 overflow-hidden"> <div> <pre class="relative scrollbar overflow-x-auto overflow-y-hidden pl-3">        <code><span class="line"><span style="color:#89DDFF">{</span></span>
66<span class="line"><span style="color:#BABED8">  ...,</span></span>
67<span class="line"><span style="color:#89DDFF">  "</span><span style="color:#C792EA">appFiles</span><span style="color:#89DDFF">"</span><span style="color:#89DDFF">:</span><span style="color:#89DDFF"> [</span><span style="color:#89DDFF">"</span><span style="color:#C3E88D">src/**/*.js</span><span style="color:#89DDFF">"</span><span style="color:#89DDFF">]</span></span>
68<span class="line"><span style="color:#89DDFF">}</span></span>
69<span class="line"></span></code>
70      </pre> </div>   </div> </div>
71<p>Next, install the <code>@todesktop/runtime</code> package as a project dependency. This will take care of application auto-updating, crash reporting, and more:</p>
72<div class="code-fence 576:max-h-[32rem] relative my-8 mx-auto max-h-[60vh] overflow-y-auto rounded-md prefers-dark-scheme scrollbar shadow-xl border-border border lang-bash" style="background-color: var(--kd-code-fence-bg);">  <div class="code relative z-0 overflow-hidden"> <div> <pre class="relative scrollbar overflow-x-auto overflow-y-hidden pl-3">        <code><span class="line"><span style="color:#FFCB6B">npm</span><span style="color:#C3E88D"> install</span><span style="color:#C3E88D"> @todesktop/runtime</span></span>
73<span class="line"></span></code>
74      </pre> </div>   </div> </div>
75<p>In your main (background process) script, import the package and call the <code>init</code> function. The function should be called as early as possible:</p>
76<div class="code-fence 576:max-h-[32rem] relative my-8 mx-auto max-h-[60vh] overflow-y-auto rounded-md prefers-dark-scheme scrollbar shadow-xl border-border border lang-javascript" style="background-color: var(--kd-code-fence-bg);">  <div class="code relative z-0 overflow-hidden"> <div> <pre class="relative scrollbar overflow-x-auto overflow-y-hidden pl-3">        <code><span class="line"><span style="color:#C792EA">const</span><span style="color:#89DDFF"> {</span><span style="color:#BABED8"> app</span><span style="color:#89DDFF">,</span><span style="color:#BABED8"> BrowserWindow </span><span style="color:#89DDFF">}</span><span style="color:#89DDFF"> =</span><span style="color:#82AAFF"> require</span><span style="color:#BABED8">(</span><span style="color:#89DDFF">'</span><span style="color:#C3E88D">electron</span><span style="color:#89DDFF">'</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span>
77<span class="line"><span style="color:#C792EA">const</span><span style="color:#BABED8"> todesktop </span><span style="color:#89DDFF">=</span><span style="color:#82AAFF"> require</span><span style="color:#BABED8">(</span><span style="color:#89DDFF">'</span><span style="color:#C3E88D">@todesktop/runtime</span><span style="color:#89DDFF">'</span><span style="color:#BABED8">)</span><span style="color:#89DDFF">;</span></span>
78<span class="line"></span>
79<span class="line"><span style="color:#BABED8">todesktop</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">init</span><span style="color:#BABED8">()</span><span style="color:#89DDFF">;</span></span>
80<span class="line"></span>
81<span class="line"><span style="color:#C792EA">function</span><span style="color:#82AAFF"> createWindow</span><span style="color:#89DDFF">()</span><span style="color:#89DDFF"> {</span></span>
82<span class="line"><span style="color:#676E95;font-style:italic">  // Create the browser window.</span></span>
83<span class="line"><span style="color:#C792EA">
83  let</span><span style="color:#BABED8"> win</span><span style="color:#89DDFF"> =</span><span style="color:#89DDFF"> new</span><span style="color:#82AAFF"> BrowserWindow</span><span style="color:#F07178">(</span><span style="color:#89DDFF">{</span></span>
84<span class="line"><span style="color:#F07178">    width</span><span style="color:#89DDFF">:</span><span style="color:#F78C6C"> 800</span><span style="color:#89DDFF">,</span></span>
85<span class="line"><span style="color:#F07178">    height</span><span style="color:#89DDFF">:</span><span style="color:#F78C6C"> 600</span><span style="color:#89DDFF">,</span></span>
86<span class="line"><span style="color:#F07178">    webPreferences</span><span style="color:#89DDFF">:</span><span style="color:#89DDFF"> {</span></span>
87<span class="line"><span style="color:#F07178">      nodeIntegration</span><span style="color:#89DDFF">:</span><span style="color:#FF9CAC"> true</span></span>
88<span class="line"><span style="color:#89DDFF">    }</span></span>
89<span class="line"><span style="color:#89DDFF">  }</span><span style="color:#F07178">)</span><span style="color:#89DDFF">;</span></span>
90<span class="line"></span>
91<span class="line"><span style="color:#676E95;font-style:italic">  // and load the index.html of the app.</span></span>
92<span class="line"><span style="color:#BABED8">  win</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">loadFile</span><span style="color:#F07178">(</span><span style="color:#89DDFF">'</span><span style="color:#C3E88D">index.html</span><span style="color:#89DDFF">'</span><span style="color:#F07178">)</span><span style="color:#89DDFF">;</span></span>
93<span class="line"><span style="color:#89DDFF">}</span></span>
94<span class="line"></span>
95<span class="line"><span style="color:#BABED8">app</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">whenReady</span><span style="color:#BABED8">()</span><span style="color:#89DDFF">.</span><span style="color:#82AAFF">then</span><span style="color:#BABED8">(createWindow)</span><span style="color:#89DDFF">;</span></span>
96<span class="line"></span></code>
97      </pre> </div>   </div> </div>
98<p>You can then proceed to build your desktop app with the following command:</p>
99<div class="code-fence 576:max-h-[32rem] relative my-8 mx-auto max-h-[60vh] overflow-y-auto rounded-md prefers-dark-scheme scrollbar shadow-xl border-border border lang-bash" style="background-color: var(--kd-code-fence-bg);">  <div class="code relative z-0 overflow-hidden"> <div> <pre class="relative scrollbar overflow-x-auto overflow-y-hidden pl-3">        <code><span class="line"><span style="color:#FFCB6B">todesktop</span><span style="color:#C3E88D"> build</span></span>
100<span class="line"></span></code>
101      </pre> </div>   </div> </div>
102<p>This will first prompt you to log in and enter your registered email address and access token. You can find your access token by clicking your profile dropdown in the web interface and selecting the <strong>manage access token</strong> option.</p>
103<p>As your application is building, progress updates will be streamed to your project terminal (as a response to invoking the <code>build</code> command) and in the build view on the <a href="https://app.todesktop.com">ToDesktop</a> web interface.</p>
104<p>Visit <a href="/electron/docs/introduction/signing-application">Part 2</a> of this guide to learn how to sign your build to make it eligible for distribution.</p> </div> </article>  <hr class="docs-pagination-rule"> <div class="docs-pagination">  <div class="docs-pagination-card docs-pagination-card-next"> <span class="docs-pagination-label">Next</span> <a href="/electron/docs/introduction/signing-application" class="docs-pagination-link"> <span>Signing an application</span> <span aria-hidden="true" class="docs-pagination-icon">
105&rarr;
106</span> </a> </div> </div>  </main> <div class="docs-spacer"></div> <aside class="on-this-page"> <nav aria-label="On this page" class="docs-toc"><h5 class="docs-toc-heading">On this page</h5><ul class="docs-toc-list"><li class="docs-toc-item"><a class="docs-toc-link" href="#generating-an-app">#Generating an app</a></li><li class="docs-toc-item"><a class="docs-toc-link" href="#using-an-existing-app">#Using an existing app</a></li></ul></nav> </aside> </div> <button class="docs-mobile-overlay" type="button" aria-label="Close contents"></button> </div> 
106<script>
107    (() => {
108      const root = document.querySelector('.kit-docs-root');
109      const sidebar = document.querySelector('.docs-sidebar-panel');
110      const activeLink = sidebar?.querySelector('.docs-sidebar-link-active');
111      const overlay = document.querySelector('.docs-mobile-overlay');
112      const mobileTrigger = document.querySelector('.docs-sidebar-trigger');
113
114      if (!(root instanceof HTMLElement) || !(sidebar instanceof HTMLElement)) {
115        return;
116      }
117
118      const mobileMedia = window.matchMedia('(max-width: 991px)');
119      let lastFocusedElement = null;
120
121      const isDrawerOpen = () => root.dataset.docsSidebarOpen === 'true';
122
123      const setDrawerOpen = (nextOpen) => {
124        root.dataset.docsSidebarOpen = nextOpen ? 'true' : 'false';
125
126        if (mobileTrigger instanceof HTMLElement) {
127          mobileTrigger.setAttribute('aria-expanded', nextOpen ? 'true' : 'false');
128        }
129
130        if (mobileMedia.matches) {
131          sidebar.toggleAttribute('inert', !nextOpen);
132          sidebar.setAttribute('aria-hidden', nextOpen ? 'false' : 'true');
133          overlay?.setAttribute('tabindex', nextOpen ? '0' : '-1');
134        } else {
135          sidebar.removeAttribute('inert');
136          sidebar.removeAttribute('aria-hidden');
137          overlay?.setAttribute('tabindex', '-1');
138        }
139      };
140
141      const closeDrawer = () => {
142        const wasOpen = isDrawerOpen();
143        setDrawerOpen(false);
144
145        if (wasOpen && lastFocusedElement instanceof HTMLElement) {
146          requestAnimationFrame(() => {
147            lastFocusedElement?.focus();
148          });
149        }
150      };
151
152      const openDrawer = () => {
153        lastFocusedElement = document.activeElement instanceof HTMLElement
154          ? document.activeElement
155          : mobileTrigger instanceof HTMLElement
156            ? mobileTrigger
157            : null;
158        setDrawerOpen(true);
159      };
160
161      if (!(activeLink instanceof HTMLElement)) {
162        setDrawerOpen(false);
163      } else {
164        setDrawerOpen(false);
165      }
166
167      const scrollActiveLinkIntoView = () => {
168        const sidebarRect = sidebar.getBoundingClientRect();
169        const linkRect = activeLink.getBoundingClientRect();
170        const isAbove = linkRect.top < sidebarRect.top;
171        const isBelow = linkRect.bottom > sidebarRect.bottom;
172
173        if (isAbove || isBelow) {
174          const relativeTop = linkRect.top - sidebarRect.top + sidebar.scrollTop;
175          const targetTop = relativeTop - (sidebar.clientHeight / 2) + (activeLink.clientHeight / 2);
176          sidebar.scrollTop = Math.max(0, targetTop);
177        }
178      };
179
180      if (document.readyState === 'loading') {
181        document.addEventListener('DOMContentLoaded', scrollActiveLinkIntoView, { once: true });
182      } else {
183        scrollActiveLinkIntoView();
184      }
185
186      mobileTrigger?.addEventListener('click', () => {
187        const nextOpen = !isDrawerOpen();
188        if (nextOpen) {
189          openDrawer();
190        } else {
191          closeDrawer();
192        }
193
194        if (nextOpen) {
195          requestAnimationFrame(() => {
196            requestAnimationFrame(() => {
197              scrollActiveLinkIntoView();
198              (activeLink instanceof HTMLElement ? activeLink : sidebar.querySelector('a'))?.focus();
199            });
200          });
201        }
202      });
203
204      overlay?.addEventListener('click', closeDrawer);
205
206      document.addEventListener('keydown', (event) => {
207        if (event.key === 'Escape' && isDrawerOpen()) {
208          closeDrawer();
209        }
210      });
211
212      sidebar.addEventListener('click', (event) => {
213        const target = event.target;
214        if (mobileMedia.matches && target instanceof Element && target.closest('a')) {
215          closeDrawer();
216        }
217      });
218
219      mobileMedia.addEventListener('change', () => {
220        if (!mobileMedia.matches) {
221          closeDrawer();
222        } else {
223          setDrawerOpen(false);
224        }
225      });
226    })();
227  </script>
227  
227<script>(function(){const rudderDataPlaneUrl = "";
228const rudderWriteKey = "";
229
230      window.__TD_RUDDER_CONFIG__ = {
231        writeKey: rudderWriteKey,
232        dataPlaneUrl: rudderDataPlaneUrl
233      };
234    })();</script>
234 
234<script type="module" src="/_astro/ReduxShell.astro_astro_type_script_index_0_lang.DsfjqyHH.js"></script>
234 
234<script src="data:text/javascript;base64,Y29uc3QgSU5URVJDT01fQVBQX0lEID0gJ2VzZDZkcm9kJzsKCmZ1bmN0aW9uIGxvYWRJbnRlcmNvbVNjcmlwdCgpIHsKICBpZiAoZG9jdW1lbnQucXVlcnlTZWxlY3Rvcihgc2NyaXB0W2RhdGEtaW50ZXJjb20tYXBwLWlkPSIke0lOVEVSQ09NX0FQUF9JRH0iXWApKSB7CiAgICByZXR1cm47CiAgfQoKICBjb25zdCBzY3JpcHQgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdzY3JpcHQnKTsKICBzY3JpcHQudHlwZSA9ICd0ZXh0L2phdmFzY3JpcHQnOwogIHNjcmlwdC5hc3luYyA9IHRydWU7CiAgc2NyaXB0LnNyYyA9IGBodHRwczovL3dpZGdldC5pbnRlcmNvbS5pby93aWRnZXQvJHtJTlRFUkNPTV9BUFBfSUR9YDsKICBzY3JpcHQuZGF0YXNldC5pbnRlcmNvbUFwcElkID0gSU5URVJDT01fQVBQX0lEOwoKICBjb25zdCBmaXJzdFNjcmlwdCA9IGRvY3VtZW50LmdldEVsZW1lbnRzQnlUYWdOYW1lKCdzY3JpcHQnKVswXTsKICBmaXJzdFNjcmlwdD8ucGFyZW50Tm9kZT8uaW5zZXJ0QmVmb3JlKHNjcmlwdCwgZmlyc3RTY3JpcHQpOwp9CgpleHBvcnQgZnVuY3Rpb24gYm9vdEludGVyY29tKCkgewogIHdpbmRvdy5pbnRlcmNvbVNldHRpbmdzID0gewogICAgYXBpX2Jhc2U6ICdodHRwczovL2FwaS1pYW0uaW50ZXJjb20uaW8nLAogICAgYXBwX2lkOiBJTlRFUkNPTV9BUFBfSUQKICB9OwoKICBjb25zdCBpbnRlcmNvbSA9IHdpbmRvdy5JbnRlcmNvbTsKCiAgaWYgKHR5cGVvZiBpbnRlcmNvbSA9PT0gJ2Z1bmN0aW9uJykgewogICAgaW50ZXJjb20oJ3JlYXR0YWNoX2FjdGl2YXRvcicpOwogICAgaW50ZXJjb20oJ3VwZGF0ZScsIHdpbmRvdy5pbnRlcmNvbVNldHRpbmdzKTsKICAgIHJldHVybjsKICB9CgogIGNvbnN0IHF1ZXVlID0gZnVuY3Rpb24oLi4uYXJncykgewogICAgcXVldWUucS5wdXNoKGFyZ3MpOwogIH07CgogIHF1ZXVlLnEgPSBbXTsKICB3aW5kb3cuSW50ZXJjb20gPSBxdWV1ZTsKCiAgaWYgKGRvY3VtZW50LnJlYWR5U3RhdGUgPT09ICdjb21wbGV0ZScpIHsKICAgIGxvYWRJbnRlcmNvbVNjcmlwdCgpOwogIH0gZWxzZSBpZiAod2luZG93LmF0dGFjaEV2ZW50KSB7CiAgICB3aW5kb3cuYXR0YWNoRXZlbnQoJ29ubG9hZCcsIGxvYWRJbnRlcmNvbVNjcmlwdCk7CiAgfSBlbHNlIHsKICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdsb2FkJywgbG9hZEludGVyY29tU2NyaXB0LCB7IG9uY2U6IHRydWUgfSk7CiAgfQp9Cgpib290SW50ZXJjb20oKTsK" type="module"></script>
234 
234<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"346f412abf7f4bceb93f98e2372db8c2","spa":2}' crossorigin="anonymous"></script>
234
235</body> </html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.