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="{"product":[0,"electron"]}" ssr client="load" opts="{"name":"DocsHeader","value":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'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'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→ 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.