@starlove/orbit 1.1.2 → 1.2.0

package/SKILL-ORBIT.md

@@ -75,6 +75,8 @@ Use board-level memory entries for durable history:
 - `decision`: UX or architecture choices agents should follow instead of defaulting to generic codegen.
 - `lesson`: mistakes or discoveries distilled as "do X instead of Y when working with Z."
 
+Board entries are durable project memory, not general notes or persona guidance. Keep active entries focused on mechanisms, architectural/product boundaries, workflow invariants, public-product implications, and reusable pitfalls. Prefer ticket comments/implementation fields for one-run chronology, and strike or consolidate stale overlapping entries once a doctrine stabilizes.
+
 ## Ticket Relationships
 
 Two distinct, non-overlapping mechanisms:

package/build.mjs

@@ -1,10 +1,11 @@
 #!/usr/bin/env node
-// Two-edition static build. Bundles public/js/main.js with esbuild, copies
-// HTML/CSS/images alongside, and rewrites the script tag to point at the
-// hashed bundle. Edition is selected via `--edition=full|preview`; preview
+// Two-edition static build. Bundles public/js/main.js and public/styles.css
+// with esbuild, copies HTML/images alongside, and rewrites asset tags to point
+// at hashed bundles. Edition is selected via `--edition=full|preview`; preview
 // substitutes `__ORBIT_EDITION__` so config.js reports edition="preview".
 
 import { build } from "esbuild";
+import { bundleCss } from "./src/core/css-bundle.js";
 import {
   cpSync,
   existsSync,
@@ -143,9 +144,14 @@ async function run() {
   writeFileSync(join(outDir, "js", jsName), jsFile.contents);
   if (mapFile) writeFileSync(join(outDir, "js", `${jsName}.map`), mapFile.contents);
 
-  // 2. Hash + copy CSS.
+  // 2. Bundle CSS package imports, then hash + copy the flattened output.
   const cssSrc = join(PUBLIC_DIR, "styles.css");
-  const cssBuf = readFileSync(cssSrc);
+  const cssBundle = await bundleCss({
+    entryPoint: cssSrc,
+    outfile: join(outDir, "styles.css"),
+    minify: true
+  });
+  const cssBuf = cssBundle.cssFile.contents;
   const cssHash = hashContent(cssBuf);
   const cssName = `styles.${cssHash}.css`;
   writeFileSync(join(outDir, cssName), cssBuf);

package/dist/full/index.html

@@ -15,9 +15,129 @@
             sizes="180x180"
             href="./apple-touch-icon.png"
         />
-        <link rel="stylesheet" href="styles.836872e7.css" />
+        <!-- Apply the stored theme + motion preference before first paint, so
+             the app underneath the splash paints in the right theme (no flash)
+             and the splash respects an explicit reduce-motion choice. Mirrors
+             theme-preference.js (mab_theme) and motion-preference.js
+             (mab_reduce_motion → data-motion); main.js reconciles on load. -->
+        <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");
+            } catch (e) {}
+        </script>
+        <link rel="preload" as="image" href="./orbits-logo.png" />
+        <link rel="stylesheet" href="styles.baccc8e3.css" />
+        <!-- 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.
+             Keyframes namespaced `ss-loader-*`. Under reduced motion the grow-in
+             is dropped and the dot grid stops; the gentle breathe stays. -->
+        <style>
+            .ss-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;
+            }
+            .ss-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: ss-loader-drift 20s linear infinite;
+            }
+            .ss-loader.is-hiding {
+                opacity: 0;
+                pointer-events: none;
+            }
+            .ss-loader__logo {
+                width: 120px;
+                height: 120px;
+                object-fit: contain;
+                filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
+                transform-origin: center;
+                will-change: transform;
+                animation:
+                    ss-loader-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1) both,
+                    ss-loader-breathe 3s ease-in-out 0.6s infinite;
+            }
+            .ss-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 ss-loader-drift {
+                from { transform: translate(0, 0); }
+                to { transform: translate(-50px, -50px); }
+            }
+            @keyframes ss-loader-grow {
+                from { transform: scale(0); opacity: 0; }
+                to { transform: scale(1); opacity: 1; }
+            }
+            @keyframes ss-loader-breathe {
+                0%, 100% { transform: scale(1); }
+                50% { transform: scale(1.06); }
+            }
+            @media (prefers-reduced-motion: reduce) {
+                :root:not([data-motion="full"]) .ss-loader::before {
+                    animation: none;
+                }
+                :root:not([data-motion="full"]) .ss-loader__logo {
+                    animation: ss-loader-breathe 3s ease-in-out infinite;
+                }
+            }
+            [data-motion="reduce"] .ss-loader::before {
+                animation: none;
+            }
+            [data-motion="reduce"] .ss-loader__logo {
+                animation: ss-loader-breathe 3s ease-in-out infinite;
+            }
+        </style>
     </head>
     <body>
+        <!-- Boot splash - shown immediately, removed once the app is ready. -->
+        <div id="ss-loader" class="ss-loader" role="status" aria-live="polite">
+            <img
+                class="ss-loader__logo"
+                src="./orbits-logo.png"
+                alt="Orbit"
+                width="120"
+                height="120"
+            />
+            <p class="ss-loader__label">Loading Orbit…</p>
+        </div>
+
         <div class="grain">
             <div class="milky-way" aria-hidden="true"></div>
         </div>
@@ -39,6 +159,7 @@
                     id="newTicketBtn"
                     type="button"
                     class="topbar-btn btn-sun topbar-ctl-shrink"
+                    data-variant="cta"
                 >
                     <span class="btn-plus" aria-hidden="true">+</span>
                     <span class="btn-sun-label">New Card</span>
@@ -48,6 +169,7 @@
                         type="button"
                         id="boardMenuBtn"
                         class="topbar-chip topbar-ctl-shrink"
+                        data-variant="board-chip"
                         aria-expanded="false"
                         aria-haspopup="true"
                         aria-controls="boardFlyout"
@@ -65,7 +187,7 @@
                                 y="4"
                                 width="6"
                                 height="16"
-                                rx="1.5"
+                                rx="0.75"
                                 stroke="currentColor"
                                 stroke-width="2"
                             />
@@ -74,12 +196,12 @@
                                 y="4"
                                 width="6"
                                 height="16"
-                                rx="1.5"
+                                rx="0.75"
                                 stroke="currentColor"
                                 stroke-width="2"
                             />
                         </svg>
-                        Board
+                        <span class="topbar-chip-label">Board</span>
                     </button>
                     <div
                         id="boardFlyout"
@@ -91,7 +213,8 @@
                 <button
                     id="themeToggle"
                     type="button"
-                    class="topbar-btn ghost topbar-ctl-shrink"
+                    class="topbar-btn topbar-ctl-shrink"
+                    data-variant="theme"
                     aria-label="Toggle theme"
                 >
                     <svg
@@ -115,7 +238,8 @@
                 <button
                     id="settingsBtn"
                     type="button"
-                    class="topbar-btn ghost topbar-ctl-shrink"
+                    class="topbar-btn topbar-ctl-shrink"
+                    data-variant="translucent"
                 >
                     <svg
                         class="topbar-icon"
@@ -170,19 +294,10 @@
         ></div>
         <aside id="drawer" class="drawer" hidden aria-label="Panel">
             <header class="drawer-header">
-                <div class="drawer-title-block">
-                    <span
-                        id="drawerEyebrow"
-                        class="drawer-eyebrow"
-                        hidden
-                    ></span>
-                    <h2 id="drawerTitle" class="drawer-title-text"></h2>
-                    <div
-                        id="drawerSubtitle"
-                        class="drawer-subtitle"
-                        hidden
-                    ></div>
-                </div>
+                <div
+                    id="drawerTitleBlock"
+                    class="drawer-title-block"
+                ></div>
                 <nav
                     id="drawerTabs"
                     class="drawer-tabs"
@@ -309,6 +424,40 @@
             </div>
         </dialog>
 
-        <script src="js/app.a4f045fc.js" type="module"></script>
+        <script src="js/app.ccc442f7.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. -->
+        <script>
+            (function () {
+                function hideSplash() {
+                    var splash = document.getElementById("ss-loader");
+                    if (!splash) return;
+                    // Keep the splash up for a minimum of 786ms (measured from
+                    // navigation start) so a fast load doesn't flash it in and out.
+                    var wait = Math.max(0, 786 - performance.now());
+                    setTimeout(function () {
+                        splash.classList.add("is-hiding");
+                        splash.addEventListener(
+                            "transitionend",
+                            function () {
+                                splash.remove();
+                            },
+                            { once: true }
+                        );
+                        setTimeout(function () {
+                            splash.remove();
+                        }, 600);
+                    }, wait);
+                }
+                if (document.readyState === "loading") {
+                    document.addEventListener("DOMContentLoaded", hideSplash, {
+                        once: true
+                    });
+                } else {
+                    hideSplash();
+                }
+            })();
+        </script>
     </body>
 </html>