@starlove/orbit 1.4.0 → 2.0.0

package/dist/full/index.html

@@ -4,37 +4,30 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>Orbit</title>
-        <link
-            rel="icon"
+        <link rel="icon"
             type="image/png"
             sizes="32x32"
             href="./favicon-32x32.png"
         />
-        <link
-            rel="apple-touch-icon"
+        <link rel="apple-touch-icon"
             sizes="180x180"
             href="./apple-touch-icon.png"
         />
-        <!-- Apply the stored theme + motion + font/size preferences before first
-             paint, so the app underneath the splash paints in the right theme
-             (no flash) and at the right type size (no layout jump), and the
-             splash respects an explicit reduce-motion choice. Mirrors
-             theme-preference.js (mab_theme), motion-preference.js
-             (mab_reduce_motion → data-motion), and font-preference.js
-             (orbit_font_preferences → --orbit-font-* / --type-*); main.js
-             reconciles on load. -->
+        <!-- Apply the saved theme, motion and font/size preferences before
+             first paint, so the app underneath the splash paints in the right
+             theme (no flash) and at the right type size (no layout jump), and
+             the splash respects an explicit reduce-motion choice.
+             ss-ui's theme-init.js applies the theme and motion (starscape-theme,
+             starscape-motion, and the ?theme, ?motion and ?shot previews);
+             the app does the rest once it runs. -->
+        <script src="./vendor/starlove-ui/theme-init.js"></script>
+        <!-- The fonts and text size from font-preference (orbit_font_preferences
+             → --orbit-font-* / --type-*), before first paint. -->
         <script>
             try {
-                var t = localStorage.getItem("mab_theme");
-                if (t === "light" || t === "dark")
-                    document.documentElement.setAttribute("data-theme", t);
-                var rm = localStorage.getItem("mab_reduce_motion");
-                if (rm === "true")
-                    document.documentElement.setAttribute("data-motion", "reduce");
-                else if (rm === "false")
-                    document.documentElement.setAttribute("data-motion", "full");
                 var fp = JSON.parse(localStorage.getItem("orbit_font_preferences") || "{}");
                 var stacks = {
+                    monaSans: '"Orbit Mona Sans", "Mona Sans", system-ui, "Segoe UI Variable", "Segoe UI", Arial, sans-serif',
                     inter: '"Orbit Inter", "Inter", "Segoe UI Variable", "Segoe UI", Arial, sans-serif',
                     openSans: '"Orbit Open Sans", "Open Sans", "Segoe UI Variable", "Segoe UI", Arial, sans-serif',
                     jetBrainsMono: '"Orbit JetBrains Mono", "JetBrains Mono", "Cascadia Mono", "SFMono-Regular", Consolas, monospace',
@@ -45,11 +38,17 @@
                     openRing: '"Orbit Open Ring", "Segoe UI Variable", "Segoe UI", Arial, sans-serif'
                 };
                 var defaults = {
-                    control: "inter",
-                    heading: "inter",
-                    label: "inter",
-                    badge: "orbitron"
+                    control: "monaSans",
+                    heading: "monaSans",
+                    label: "monaSans",
+                    badge: "monaSans"
                 };
+                // The defaults before Mona Sans, saved whole by any change in
+                // Appearance, read as never chosen (the size stays).
+                if (fp.site === "inter" && fp.heading === "orbitron" && fp.control === "inter" &&
+                    fp.label === "inter" && fp.badge === "orbitron") {
+                    fp = { userScale: fp.userScale };
+                }
                 var aliases = { ui: "control" };
                 var targets = {
                     control: "--orbit-font-control",
@@ -76,7 +75,7 @@
                     document.documentElement.style.setProperty(targets[target], stacks[id]);
                     document.documentElement.setAttribute(dataAttrs[target], id);
                 });
-                var siteFont = stacks[fp.site] ? fp.site : "inter";
+                var siteFont = stacks[fp.site] ? fp.site : "monaSans";
                 // Body text always follows the primary font.
                 document.documentElement.style.setProperty("--orbit-font-body", stacks[siteFont]);
                 var userScale = Number(fp.userScale);
@@ -87,107 +86,22 @@
             } catch (e) {}
         </script>
         <link rel="preload" as="image" href="./orbits-logo.png" />
-        <link rel="stylesheet" href="styles.4e60d824.css" />
+        <link rel="stylesheet" href="./styles.2b154ffe.css" />
+        <!-- The app mounts here; its topbar, board and footer are the body's own flex items. -->
+        <style>#root{display:contents}</style>
         <!-- Boot splash — the canonical ss-ui loading screen (see the package's
              components/loader.css). Inline critical CSS so it paints before
-             /js/main.js loads. The logo grows in then breathes; no spinner.
+             the app loads. The logo grows in then breathes; no spinner.
              Keyframes namespaced `starscape-loader-*`. Under reduced motion the grow-in
              is dropped and the dot grid stops; the gentle breathe stays. -->
-        <style>
-            .loader {
-                position: fixed;
-                inset: 0;
-                z-index: 99999;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                gap: 2rem;
-                overflow: hidden;
-                background: linear-gradient(
-                    135deg,
-                    #1a1a2e 0%,
-                    #16213e 50%,
-                    #0f3460 100%
-                );
-                transition: opacity 0.4s ease;
-                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
-                    Roboto, "Helvetica Neue", Arial, sans-serif;
-            }
-            .loader::before {
-                content: "";
-                position: absolute;
-                width: 200%;
-                height: 200%;
-                background-image: radial-gradient(
-                    circle,
-                    rgba(168, 192, 255, 0.15) 1px,
-                    transparent 1px
-                );
-                background-size: 50px 50px;
-                will-change: transform;
-                animation: starscape-loader-drift 20s linear infinite;
-            }
-            .loader.is-hiding {
-                opacity: 0;
-                pointer-events: none;
-            }
-            .loader__logo {
-                width: 120px;
-                height: 120px;
-                object-fit: contain;
-                filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
-                transform-origin: center;
-                /* translateZ in the keyframes + backface-visibility keep the star
-                   on a stable GPU layer, so it doesn't snap ~1px as the grow
-                   starts. Keep in sync with the package components/loader.css. */
-                backface-visibility: hidden;
-                will-change: transform;
-                animation:
-                    starscape-loader-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) both,
-                    starscape-loader-breathe 3s ease-in-out 0.6s infinite;
-            }
-            .loader__label {
-                margin: 0;
-                color: #fff;
-                font-size: 1.25rem;
-                font-weight: 600;
-                letter-spacing: 0.5px;
-                text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-            }
-            @keyframes starscape-loader-drift {
-                from { transform: translate(0, 0); }
-                to { transform: translate(-50px, -50px); }
-            }
-            @keyframes starscape-loader-grow {
-                from { transform: scale(0) translateZ(0); opacity: 0; }
-                to { transform: scale(1) translateZ(0); opacity: 1; }
-            }
-            @keyframes starscape-loader-breathe {
-                0%, 100% { transform: scale(1) translateZ(0); }
-                50% { transform: scale(1.06) translateZ(0); }
-            }
-            @media (prefers-reduced-motion: reduce) {
-                :root:not([data-motion="full"]) .loader::before {
-                    animation: none;
-                }
-                :root:not([data-motion="full"]) .loader__logo {
-                    animation: starscape-loader-breathe 3s ease-in-out infinite;
-                }
-            }
-            [data-motion="reduce"] .loader::before {
-                animation: none;
-            }
-            [data-motion="reduce"] .loader__logo {
-                animation: starscape-loader-breathe 3s ease-in-out infinite;
-            }
-        </style>
+        <style>.loader{z-index:99999;font-family:var(--orbit-font-body,"Orbit Mona Sans", "Mona Sans", system-ui, "Segoe UI Variable", "Segoe UI", Arial, sans-serif);background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);flex-direction:column;justify-content:center;align-items:center;gap:2rem;transition:opacity .4s;display:flex;position:fixed;inset:0;overflow:hidden}.loader:before{content:"";will-change:transform;background-image:radial-gradient(circle,#a8c0ff26 1px,#0000 1px);background-size:50px 50px;width:200%;height:200%;animation:20s linear infinite starscape-loader-drift;position:absolute}.loader.is-hiding{opacity:0;pointer-events:none}.loader__logo{object-fit:contain;filter:drop-shadow(0 0 20px #ffffff4d);transform-origin:50%;backface-visibility:hidden;will-change:transform;width:120px;height:120px;animation:.6s cubic-bezier(.22,1,.36,1) both starscape-loader-grow,3s ease-in-out .6s infinite starscape-loader-breathe}.loader__label{color:#fff;letter-spacing:.5px;text-shadow:0 2px 10px #0000004d;margin:0;font-size:1.25rem;font-weight:600}@keyframes starscape-loader-drift{0%{transform:translate(0)}to{transform:translate(-50px,-50px)}}@keyframes starscape-loader-grow{0%{opacity:0;transform:scale(0)translateZ(0)}to{opacity:1;transform:scale(1)translateZ(0)}}@keyframes starscape-loader-breathe{0%,to{transform:scale(1)translateZ(0)}50%{transform:scale(1.06)translateZ(0)}}@media (prefers-reduced-motion:reduce){:root:not([data-motion=full]) .loader:before{animation:none}:root:not([data-motion=full]) .loader__logo{animation:3s ease-in-out infinite starscape-loader-breathe}}[data-motion=reduce] .loader:before{animation:none}[data-motion=reduce] .loader__logo{animation:3s ease-in-out infinite starscape-loader-breathe}</style>
+      <script type="module" crossorigin src="./js/app.BmuponPJ.js"></script>
+        <script type="module" src="./js/warm.f260bbbc.js"></script>
     </head>
     <body>
         <!-- Boot splash - shown immediately, removed once the app is ready. -->
         <div id="loader" class="loader" role="status" aria-live="polite">
-            <img
-                class="loader__logo"
+            <img class="loader__logo"
                 src="./orbits-logo.png"
                 alt="Orbit"
                 width="120"
@@ -199,541 +113,10 @@
         <div class="grain">
             <div class="milky-way" aria-hidden="true"></div>
         </div>
-        <header class="topbar">
-            <div class="brand" aria-label="Orbit">
-                <button
-                    id="brandFocusBtn"
-                    type="button"
-                    class="brand-focus-btn"
-                    data-variant="brand-focus"
-                    aria-label="Show board notes"
-                    aria-expanded="false"
-                    aria-controls="brandFocusPopover"
-                >
-                    <img class="mark" src="./orbits-logo.png" alt="Orbits logo" />
-                </button>
-                <div
-                    id="brandFocusPopover"
-                    class="brand-focus-popover"
-                    role="dialog"
-                    aria-label="Notes For You"
-                    hidden
-                >
-                    <div class="inline-md-field brand-focus-notes-field">
-                        <span class="inline-md-field-label font-orbitron">Notes For You</span>
-                        <div id="brandFocusNotes" class="brand-focus-notes-body"></div>
-                    </div>
-                </div>
-            </div>
-            <div class="controls">
-                <button
-                    id="brandNotesBtn"
-                    type="button"
-                    class="topbar-notes brand-notes-strip"
-                    data-variant="topbar-notes"
-                    aria-label="Show board notes"
-                    aria-expanded="false"
-                    aria-controls="brandFocusPopover"
-                >
-                    <span id="brandNotesText" class="topbar-notes__text"></span>
-                </button>
-                <span class="topbar-controls-gap" aria-hidden="true"></span>
-                <div class="topbar-search" id="topbarSearch">
-                    <input
-                        id="searchInput"
-                        placeholder="Search tickets, comments, decisions..."
-                        autocomplete="off"
-                    />
-                    <div id="searchResults" class="search-results" hidden></div>
-                </div>
-                <button
-                    id="newTicketBtn"
-                    type="button"
-                    class="topbar-btn topbar-ctl-shrink"
-                    data-variant="cta"
-                    aria-label="New Card"
-                >
-                    <span class="btn-plus" aria-hidden="true"></span>
-                    <span class="topbar-btn-label">New Card</span>
-                </button>
-                <div class="topbar-menu">
-                    <button
-                        type="button"
-                        id="boardMenuBtn"
-                        class="topbar-chip topbar-ctl-shrink"
-                        data-variant="board-chip"
-                        aria-expanded="false"
-                        aria-haspopup="true"
-                        aria-controls="boardFlyout"
-                    >
-                        <svg
-                            class="topbar-icon"
-                            width="16"
-                            height="16"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            aria-hidden="true"
-                        >
-                            <rect
-                                x="4"
-                                y="2"
-                                width="6"
-                                height="20"
-                                rx="0.75"
-                                stroke="currentColor"
-                                stroke-width="2"
-                            />
-                            <rect
-                                x="14"
-                                y="2"
-                                width="6"
-                                height="20"
-                                rx="0.75"
-                                stroke="currentColor"
-                                stroke-width="2"
-                            />
-                        </svg>
-                        <span class="topbar-chip-label">Board</span>
-                    </button>
-                    <div
-                        id="boardFlyout"
-                        class="menu-flyout menu-flyout--align-end"
-                        hidden
-                        role="menu"
-                    ></div>
-                </div>
-                <button
-                    id="themeToggle"
-                    type="button"
-                    class="topbar-btn topbar-ctl-shrink"
-                    data-variant="theme"
-                    aria-label="Toggle theme"
-                >
-                    <svg
-                        class="topbar-icon"
-                        id="themeIcon"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        aria-hidden="true"
-                    >
-                        <circle cx="12" cy="12" r="5" />
-                        <path
-                            d="M12 1v2m0 18v2M4.2 4.2l1.4 1.4m12.8 12.8l1.4 1.4M1 12h2m18 0h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"
-                        />
-                    </svg>
-                </button>
-                <button
-                    id="helpBtn"
-                    type="button"
-                    class="topbar-btn topbar-ctl-shrink"
-                    data-variant="translucent"
-                    aria-haspopup="dialog"
-                    aria-controls="helpDialog"
-                >
-                    <svg
-                        class="topbar-icon"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        aria-hidden="true"
-                    >
-                        <circle cx="12" cy="12" r="10" />
-                        <path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" />
-                        <path d="M12 17h.01" />
-                    </svg>
-                    <span class="topbar-btn-label">Help</span>
-                </button>
-                <button
-                    id="settingsBtn"
-                    type="button"
-                    class="topbar-btn topbar-ctl-shrink"
-                    data-variant="translucent"
-                >
-                    <svg
-                        class="topbar-icon"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        aria-hidden="true"
-                    >
-                        <path
-                            d="M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.39a2 2 0 00-.73-2.73l-.15-.08a2 2 0 01-1-1.74v-.5a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z"
-                        />
-                        <circle cx="12" cy="12" r="3" />
-                    </svg>
-                    <span class="topbar-btn-label">Settings</span>
-                    <span class="topbar-update-dot" title="Update available" hidden></span>
-                </button>
-            </div>
-        </header>
-
-        <div
-            id="createFlyoutBackdrop"
-            class="create-flyout-backdrop"
-            hidden
-            aria-hidden="true"
-        ></div>
-        <div
-            id="createFlyout"
-            class="create-flyout"
-            hidden
-            aria-label="New card"
-        >
-            <div id="createFlyoutInner" class="create-flyout-inner"></div>
-        </div>
-
-        <main class="board-main">
-            <div id="kanban" class="kanban" aria-live="polite"></div>
-        </main>
-        <footer class="frame-footer" aria-label="Application signature">
-            <span class="frame-footer-title">Orbit</span>
-            <span class="frame-footer-subtitle"><em>a Starscape app</em></span>
-        </footer>
-
-        <div
-            id="drawerBackdrop"
-            class="drawer-backdrop"
-            hidden
-            aria-hidden="true"
-        ></div>
-        <aside id="drawer" class="drawer" hidden aria-label="Panel">
-            <header class="drawer-header">
-                <div
-                    id="drawerTitleBlock"
-                    class="drawer-title-block"
-                ></div>
-                <div id="drawerTabsShell" class="drawer-tabs-shell" hidden>
-                    <nav
-                        id="drawerTabs"
-                        class="drawer-tabs"
-                        role="tablist"
-                    ></nav>
-                </div>
-                <button
-                    type="button"
-                    id="drawerArchiveBtn"
-                    class="drawer-archive"
-                    aria-label="Archive card"
-                    title="Archive card"
-                    hidden
-                >
-                    <svg
-                        viewBox="0 0 24 24"
-                        width="18"
-                        height="18"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        aria-hidden="true"
-                    >
-                        <path d="M3 6h18" />
-                        <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
-                        <path
-                            d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"
-                        />
-                        <path d="M10 11v6" />
-                        <path d="M14 11v6" />
-                    </svg>
-                </button>
-                <button
-                    type="button"
-                    id="drawerCloseBtn"
-                    class="drawer-close"
-                    aria-label="Close panel"
-                >
-                    <svg
-                        class="ui-icon ui-icon-x"
-                        viewBox="0 0 24 24"
-                        aria-hidden="true"
-                        focusable="false"
-                    >
-                        <path d="M6 6l12 12M18 6 6 18" />
-                    </svg>
-                </button>
-            </header>
-            <div id="drawerInner" class="drawer-inner"></div>
-        </aside>
-
-        <div
-            id="artifactDrawerBackdrop"
-            class="artifact-drawer-backdrop"
-            hidden
-            aria-hidden="true"
-        ></div>
-        <aside
-            id="artifactDrawer"
-            class="artifact-drawer"
-            hidden
-            aria-label="Linked markdown artifact"
-        >
-            <header class="artifact-drawer-header">
-                <div class="artifact-drawer-title-block">
-                    <h2 id="artifactDrawerTitle" class="artifact-drawer-title">Artifact</h2>
-                    <p id="artifactDrawerMeta" class="artifact-drawer-meta"></p>
-                </div>
-                <button
-                    type="button"
-                    id="artifactDrawerCloseBtn"
-                    class="drawer-close artifact-drawer-close"
-                    aria-label="Close artifact"
-                >
-                    <svg
-                        class="ui-icon ui-icon-x"
-                        viewBox="0 0 24 24"
-                        aria-hidden="true"
-                        focusable="false"
-                    >
-                        <path d="M6 6l12 12M18 6 6 18" />
-                    </svg>
-                </button>
-            </header>
-            <div id="artifactDrawerBody" class="artifact-drawer-body"></div>
-        </aside>
-
-        <template id="commentFormTemplate">
-            <form class="comment-form">
-                <textarea
-                    name="body"
-                    placeholder="Add a comment, decision, or instruction..."
-                    required
-                ></textarea>
-                <button type="submit">Comment</button>
-            </form>
-        </template>
-
-        <!-- Generic modal dialog — content varies by use-case.
-         The welcome dialog auto-shows on the preview edition via main.js.
-         Other uses: call openModal(el) from any module that imports modal.js. -->
-        <dialog
-            id="welcomeDialog"
-            class="orbit-dialog"
-            aria-labelledby="welcomeDialogTitle"
-        >
-            <div class="welcome-dialog-inner">
-                <div class="welcome-dialog-head">
-                    <img
-                        class="welcome-dialog-logo"
-                        src="./orbits-logo.png"
-                        alt=""
-                        aria-hidden="true"
-                    />
-                    <span class="welcome-dialog-edition-pill"
-                        >Preview Edition</span
-                    >
-                </div>
-                <div class="welcome-dialog-body">
-                    <h2 id="welcomeDialogTitle" class="welcome-dialog-title">
-                        No-AI Browser Preview
-                    </h2>
-                    <p class="welcome-dialog-lede">
-                        You're using the local, browser-only preview of
-                        <strong>Orbit</strong> — a developer-first kanban board
-                        built for teams working alongside AI agents.
-                    </p>
-                    <ul class="welcome-dialog-notices">
-                        <li>
-                            <span class="welcome-dialog-notice-label"
-                                >No AI</span
-                            >
-                            Boards are stored in your browser only. AI features,
-                            MCP server, and server-side sync require the full
-                            install.
-                        </li>
-                        <li>
-                            <span class="welcome-dialog-notice-label"
-                                >Download</span
-                            >
-                            Get the full app at
-                            <a
-                                class="welcome-dialog-link"
-                                href="https://orbit.starscape.app/install"
-                                >orbit.starscape.app/install</a
-                            >
-                        </li>
-                        <li>
-                            <span class="welcome-dialog-notice-label"
-                                >Coming soon</span
-                            >
-                            Paid cloud hosting for teams — no install required.
-                        </li>
-                    </ul>
-                </div>
-                <footer class="welcome-dialog-footer">
-                    <button
-                        type="button"
-                        class="welcome-dialog-cta"
-                        data-modal-initial-focus
-                        data-modal-close
-                    >
-                        Get started
-                    </button>
-                </footer>
-            </div>
-        </dialog>
-
-        <!-- Help & About. Reuses the .orbit-dialog shell + welcome-dialog-*
-             styling so it inherits the modal chrome; opened from the topbar
-             Help button and wired through modal.js (Escape/backdrop close). -->
-        <dialog
-            id="helpDialog"
-            class="orbit-dialog"
-            aria-labelledby="helpDialogTitle"
-        >
-            <div class="welcome-dialog-inner help-dialog-inner">
-                <div class="welcome-dialog-head">
-                    <img
-                        class="welcome-dialog-logo"
-                        src="./orbits-logo.png"
-                        alt=""
-                        aria-hidden="true"
-                    />
-                    <span
-                        class="welcome-dialog-edition-pill"
-                        id="helpDialogVersion"
-                        >Orbit</span
-                    >
-                    <button
-                        type="button"
-                        class="help-dialog-close"
-                        aria-label="Close"
-                        data-modal-close
-                    >
-                        <svg
-                            class="ui-icon ui-icon-x"
-                            viewBox="0 0 24 24"
-                            aria-hidden="true"
-                            focusable="false"
-                        >
-                            <path d="M6 6l12 12M18 6 6 18" />
-                        </svg>
-                    </button>
-                </div>
-                <div class="welcome-dialog-body">
-                    <h2 id="helpDialogTitle" class="welcome-dialog-title">
-                        Starscape Orbit
-                    </h2>
-                    <p class="welcome-dialog-lede">
-                        A developer-first kanban board built for teams working
-                        alongside AI agents. Track the motion of your project —
-                        and hand work to your coding agent through the Orbit MCP
-                        tools.
-                    </p>
-
-                    <section
-                        class="help-dialog-section"
-                        aria-label="Getting started"
-                    >
-                        <h3 class="help-dialog-heading">Getting started</h3>
-                        <ol class="help-dialog-steps">
-                            <li class="help-dialog-step">
-                                <span class="help-dialog-step__index">01</span>
-                                <div>
-                                    <h4>Create a board</h4>
-                                    <p>
-                                        Use the <strong>Board</strong> menu →
-                                        New board. Optionally point it at a
-                                        coding project folder so Orbit can drop
-                                        <code>SKILL-ORBIT.md</code> and
-                                        <code>AGENTS.md</code> for your agent.
-                                    </p>
-                                </div>
-                            </li>
-                            <li class="help-dialog-step">
-                                <span class="help-dialog-step__index">02</span>
-                                <div>
-                                    <h4>Add cards &amp; the AI Ready lane</h4>
-                                    <p>
-                                        Capture work with
-                                        <strong>New Card</strong>. Move cards
-                                        into <strong>AI Ready</strong> to stage
-                                        them for an agent to claim.
-                                    </p>
-                                </div>
-                            </li>
-                            <li class="help-dialog-step">
-                                <span class="help-dialog-step__index">03</span>
-                                <div>
-                                    <h4>Connect your coding agent</h4>
-                                    <p>
-                                        Add the Orbit MCP server from
-                                        <strong>Settings</strong>, then ask your
-                                        agent to read <code>AGENTS.md</code> and
-                                        claim the next ticket.
-                                    </p>
-                                </div>
-                            </li>
-                        </ol>
-                    </section>
-
-                    <section
-                        class="help-dialog-section"
-                        aria-label="Links"
-                    >
-                        <h3 class="help-dialog-heading">Links</h3>
-                        <ul class="help-dialog-links">
-                            <li>
-                                <a
-                                    class="welcome-dialog-link"
-                                    href="https://orbit.starscape.app"
-                                    target="_blank"
-                                    rel="noopener"
-                                    >Documentation</a
-                                >
-                            </li>
-                            <li>
-                                <a
-                                    class="welcome-dialog-link"
-                                    href="https://github.com/brucestarlove/ss-orbit/blob/master/docs/MCP_SETUP.md"
-                                    target="_blank"
-                                    rel="noopener"
-                                    >MCP setup</a
-                                >
-                            </li>
-                            <li>
-                                <a
-                                    class="welcome-dialog-link"
-                                    href="https://orbit.starscape.app/support"
-                                    target="_blank"
-                                    rel="noopener"
-                                    >Support / Tip</a
-                                >
-                            </li>
-                        </ul>
-                    </section>
-                </div>
-                <footer class="welcome-dialog-footer">
-                    <button
-                        type="button"
-                        class="welcome-dialog-cta"
-                        data-modal-close
-                    >
-                        Got it
-                    </button>
-                </footer>
-            </div>
-        </dialog>
-
-        <script src="js/app.62905fcb.js" type="module"></script>
-        <!-- Fade out the boot splash once the DOM is ready. The /js/main.js
-             module runs before DOMContentLoaded, so theme/motion + wiring are
-             already applied by the time this fires. -->
+        <div id="root"></div>
+        <!-- Fade out the boot splash once the DOM is ready. The app's module
+             runs before DOMContentLoaded, so theme/motion are already applied
+             by the time this fires. -->
         <script>
             (function () {
                 function hideSplash() {