@starlove/orbit 1.1.2 → 1.2.0

package/public/index.html

@@ -15,9 +15,129 @@
             sizes="180x180"
             href="./apple-touch-icon.png"
         />
+        <!-- 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.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"
@@ -310,5 +425,39 @@
         </dialog>
 
         <script src="/js/main.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>

package/public/js/board-menu.js

@@ -23,11 +23,25 @@ export function closeMenuFlyouts() {
   closeBoardFlyout();
 }
 
+const boardChipIcon = `
+  <svg
+    class="topbar-icon"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden="true"
+  >
+    <rect x="4" y="4" width="6" height="16" rx="0.75" stroke="currentColor" stroke-width="2" />
+    <rect x="14" y="4" width="6" height="16" rx="0.75" stroke="currentColor" stroke-width="2" />
+  </svg>`;
+
 export function updateTopbarChips() {
   if (!state.data) return;
   const board = (state.data.boards || []).find((b) => b.id === state.boardId);
   if (boardMenuBtn) {
-    boardMenuBtn.textContent = board?.name || "Board";
+    const label = board?.name || "Board";
+    boardMenuBtn.innerHTML = `${boardChipIcon}<span class="topbar-chip-label">${escapeHtml(label)}</span>`;
     boardMenuBtn.title = board ? `${board.name} — slug: ${board.slug}` : "Choose board";
   }
 }
@@ -37,7 +51,7 @@ function renderBoardFlyoutInner() {
   const rows = boards
     .map(
       (b) => `
-      <button type="button" class="menu-flyout-item ${b.id === state.boardId ? "is-current" : ""}" data-pick-board="${escapeHtml(b.id)}" role="menuitem">
+      <button type="button" class="menu-flyout-item ${b.id === state.boardId ? "is-current" : ""}" data-variant="menu-item" data-pick-board="${escapeHtml(b.id)}" role="menuitem">
         <span class="menu-flyout-item-title">${escapeHtml(b.name)}</span>
         <span class="menu-flyout-item-meta">${escapeHtml(b.slug)}</span>
       </button>`

package/public/js/card-actions.js

@@ -245,6 +245,25 @@ export function bindCardContextMenu(card, ticket, { handlers = createCardActionH
   });
 }
 
+// Delegated variant: a single listener on the board container resolves the card
+// and its ticket per event. Lets renderBoard() swap innerHTML freely without
+// re-binding a contextmenu listener onto every card on every render.
+export function bindCardContextMenuDelegated(container, resolveTicket, { handlers = createCardActionHandlers(), onBeforeOpen = null } = {}) {
+  container.addEventListener("contextmenu", (event) => {
+    const card = event.target instanceof Element ? event.target.closest(".card") : null;
+    if (!card) return;
+    const ticket = resolveTicket(card.dataset.ticketId);
+    if (!ticket) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (dragInFlight) {
+      closeCardActionMenu();
+      return;
+    }
+    openCardActionMenu({ ticket, anchor: card, x: event.clientX, y: event.clientY, handlers, onBeforeOpen });
+  });
+}
+
 function renderMenuItems(items) {
   return `<ul class="card-action-menu-list" role="none">${items.map(renderMenuItem).join("")}</ul>`;
 }

package/public/js/create-card.js

@@ -86,7 +86,7 @@ function renderCreateForm(preselectedLaneId) {
         <label>
           Type
           <select id="createTicketType" name="type" class="select-chevron-field" aria-label="Ticket type">
-            <option value="epic">Epic / Story</option>
+            <option value="epic">Epic</option>
             <option value="feature">Feature</option>
             <option value="task" selected>Task</option>
             <option value="bug">Bug</option>

package/public/js/drawer.js

@@ -36,19 +36,9 @@ export function closeDrawer() {
     drawer.hidden = true;
     drawerBackdrop.hidden = true;
     drawerInner.innerHTML = "";
-    const eyebrowEl = document.getElementById("drawerEyebrow");
-    const titleEl = document.getElementById("drawerTitle");
-    const subtitleEl = document.getElementById("drawerSubtitle");
+    const titleBlockEl = document.getElementById("drawerTitleBlock");
     const tabsEl = document.getElementById("drawerTabs");
-    if (eyebrowEl) { eyebrowEl.textContent = ""; eyebrowEl.hidden = true; }
-    if (titleEl) {
-      for (const attr of Array.from(titleEl.attributes)) {
-        if (attr.name !== "id") titleEl.removeAttribute(attr.name);
-      }
-      titleEl.className = "drawer-title-text";
-      titleEl.textContent = "";
-    }
-    if (subtitleEl) { subtitleEl.innerHTML = ""; subtitleEl.hidden = true; }
+    if (titleBlockEl) titleBlockEl.innerHTML = "";
     if (tabsEl) { tabsEl.innerHTML = ""; tabsEl.hidden = true; }
     drawer.classList.remove("is-wide");
   };
@@ -77,40 +67,24 @@ export function closeDrawer() {
 export function renderDrawerShell({ eyebrow, title, titleAttrs, subtitleHtml, tabs, activeTab, onTabSelect, body, mode }) {
   drawer.classList.toggle("is-settings", mode === "settings");
   drawer.classList.toggle("is-wide", mode === "ticket" || mode === "settings");
-  const eyebrowEl = document.getElementById("drawerEyebrow");
-  const titleEl = document.getElementById("drawerTitle");
-  const subtitleEl = document.getElementById("drawerSubtitle");
+  const titleBlockEl = document.getElementById("drawerTitleBlock");
   const tabsEl = document.getElementById("drawerTabs");
 
-  if (eyebrow) {
-    eyebrowEl.textContent = eyebrow;
-    eyebrowEl.hidden = false;
-  } else {
-    eyebrowEl.textContent = "";
-    eyebrowEl.hidden = true;
-  }
-
-  if (subtitleHtml) {
-    subtitleEl.innerHTML = subtitleHtml;
-    subtitleEl.hidden = false;
-  } else {
-    subtitleEl.innerHTML = "";
-    subtitleEl.hidden = true;
-  }
-
-  // Reset prior edit-attrs / classes each render so different modes don't
-  // carry state from one another.
-  for (const attr of Array.from(titleEl.attributes)) {
-    if (attr.name !== "id") titleEl.removeAttribute(attr.name);
-  }
-  titleEl.className = "drawer-title-text";
-  if (titleAttrs) {
-    for (const [key, value] of Object.entries(titleAttrs)) {
-      if (key === "class") titleEl.className = `drawer-title-text ${value}`;
-      else titleEl.setAttribute(key, value);
-    }
+  // Rebuild the eyebrow / title / subtitle wholesale each render. Like
+  // drawerInner.innerHTML below, this means any listeners the caller attached
+  // last render (e.g. the inline title editor's click handler) die with the
+  // old nodes, instead of stacking on persistent shell elements.
+  const extraTitleClass = titleAttrs?.class ? ` ${titleAttrs.class}` : "";
+  let titleAttrHtml = ` class="drawer-title drawer-title-text${extraTitleClass}"`;
+  for (const [key, value] of Object.entries(titleAttrs || {})) {
+    if (key === "class") continue;
+    titleAttrHtml += ` ${key}="${escapeHtml(String(value))}"`;
   }
-  titleEl.textContent = title ?? "";
+  const segments = [];
+  if (eyebrow) segments.push(`<span class="drawer-eyebrow">${escapeHtml(eyebrow)}</span>`);
+  segments.push(`<h2${titleAttrHtml}>${escapeHtml(title ?? "")}</h2>`);
+  if (subtitleHtml) segments.push(`<div class="drawer-subtitle">${subtitleHtml}</div>`);
+  titleBlockEl.innerHTML = segments.join("");
 
   if (tabs && tabs.length) {
     tabsEl.hidden = false;

package/public/js/format.js

@@ -11,9 +11,9 @@ export function escapeHtml(value) {
 }
 
 // UTF-8 bytes mis-decoded as CP-437 (the typical Windows-tmux artifact).
-// Ported from aeva-dashboard's fix-newlines tool — every entry is
-// [mojibake sequence, what it should have been]. Long sequences first so
-// shorter prefixes do not eat them.
+// Ported from a local fix-newlines utility — every entry is [mojibake sequence,
+// what it should have been]. Long sequences first so shorter prefixes do not
+// eat them.
 const MOJIBAKE_REPLACEMENTS = [
   // General Punctuation (UTF-8 E2 80 XX → CP-437 "ΓÇ" + glyph)
   ["ΓÇô", "–"],
@@ -84,8 +84,8 @@ const MOJIBAKE_REPLACEMENTS = [
   ["┬º", "§"],
   ["┬╖", "·"],
 
-  // Stray curly quotes that survived as proper Unicode — Bruce writes with
-  // ASCII straight quotes, so normalize for consistency.
+  // Stray curly quotes that survived as proper Unicode; normalize to ASCII
+  // straight quotes so pasted terminal/log text stays consistent.
   ["“", '"'],
   ["”", '"'],
   ["‘", "'"],
@@ -389,11 +389,10 @@ export function typeLabel(type) {
   return labels[canonicalTicketType(type)] || "Task";
 }
 
-// Long, hierarchy-aware label for dropdowns where we have the room. Epic/Story
-// pairs older vocabulary so existing terminology still resonates.
+// Long, hierarchy-aware label for dropdowns where we have the room.
 export function typeLabelLong(type) {
   const labels = {
-    epic: "Epic / Story",
+    epic: "Epic",
     feature: "Feature",
     task: "Task",
     bug: "Bug"