@starlove/orbit 1.1.1 → 1.1.11

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/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-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.
   ["“", '"'],
   ["”", '"'],
   ["‘", "'"],

package/public/js/kanban.js

@@ -19,106 +19,162 @@ import { api, withBoardQuery } from "./api.js";
 import { navigate } from "./router.js";
 import { closeCreateFlyout, openCreateFlyout } from "./create-card.js";
 import { load } from "./app.js";
-import { bindCardContextMenu, closeCardActionMenu, createCardActionHandlers, setCardActionDragInFlight } from "./card-actions.js";
+import { bindCardContextMenuDelegated, closeCardActionMenu, createCardActionHandlers, setCardActionDragInFlight } from "./card-actions.js";
 import { unreadCount } from "./unread.js";
 
+// Lookup for the current board's tickets, keyed by id. Refreshed on every
+// renderBoard() so the single, persistent set of delegated listeners can
+// resolve a card's ticket in O(1) without re-binding anything per render.
+let boardTicketsById = new Map();
+// Created once (lazily) and reused — handlers are stateless w.r.t. a given card.
+let cardActionHandlers = null;
+// HTML5 DnD ends with a synthetic click on the drag source; this flag lets the
+// delegated click handler swallow that one click so a drop doesn't also open
+// the ticket drawer. Module-scoped because there's now one shared listener.
+let suppressClickAfterDrag = false;
+
+// renderBoard() is hot: it runs on every drag-drop, every SSE board event, and
+// every settings toggle. Keep it to a single innerHTML write plus a Map refresh.
+// All interaction wiring lives in enableKanbanInteractions(), attached ONCE to
+// the persistent `kanban` element (see below), so re-rendering never re-binds
+// per-card/column/button listeners or rescans the ticket list.
 export function renderBoard() {
   const states = visibleStatesForProject();
   const tickets = ticketsForProject();
+  boardTicketsById = new Map(tickets.map((ticket) => [ticket.id, ticket]));
   kanban.innerHTML = states.map((column) => renderColumn(column, tickets)).join("");
+}
 
-  kanban.querySelectorAll(".column").forEach((column) => {
-    column.addEventListener("dragover", (event) => {
-      event.preventDefault();
-      column.classList.add("drag-over");
-    });
-    column.addEventListener("dragleave", () => column.classList.remove("drag-over"));
-    column.addEventListener("drop", async (event) => {
-      event.preventDefault();
-      column.classList.remove("drag-over");
-      const ticketId = event.dataTransfer.getData("text/plain");
-      if (!ticketId) return;
-      closeCreateFlyout();
-      await api(withBoardQuery(`/api/tickets/${ticketId}`), {
-        method: "PATCH",
-        body: { state_id: column.dataset.stateId }
-      });
-      // Refresh board only; do not open the ticket drawer (DnD also fires a
-      // synthetic click on the card — suppressed in the card listener).
-      await load();
-    });
+function toggleCardExpansion(card) {
+  if (!card) return;
+  const id = card.dataset.ticketId;
+  const willExpand = !state.expandedCardIds.has(id);
+  if (willExpand) {
+    state.expandedCardIds.add(id);
+    // Build the expandable body (markdown parse + labels + relations) the first
+    // time a card opens. Collapsed cards — the overwhelming majority on render —
+    // never pay this cost. Once built it stays cached in the DOM for re-toggles.
+    if (!card.querySelector(".card-expandable")) {
+      const ticket = boardTicketsById.get(id);
+      const meta = card.querySelector(".card-meta");
+      if (ticket && meta) meta.insertAdjacentHTML("afterend", renderCardExpandable(ticket));
+    }
+  } else {
+    state.expandedCardIds.delete(id);
+  }
+  card.classList.toggle("is-expanded", willExpand);
+  const toggleBtn = card.querySelector("button.card-expand-trigger");
+  if (toggleBtn) toggleBtn.setAttribute("aria-expanded", willExpand ? "true" : "false");
+}
+
+// One-time setup: attach delegated listeners to the persistent board container.
+// Because events bubble to `kanban`, these survive every innerHTML swap, so
+// renderBoard() does zero listener work regardless of card count.
+export function enableKanbanInteractions() {
+  cardActionHandlers = cardActionHandlers || createCardActionHandlers({ navigator: navigate });
+
+  // --- Drag & drop (HTML5 DnD events bubble, so one set covers all cards) ---
+  let dragOverColumn = null;
+  const setDragOverColumn = (column) => {
+    if (dragOverColumn === column) return;
+    if (dragOverColumn) dragOverColumn.classList.remove("drag-over");
+    dragOverColumn = column;
+    if (dragOverColumn) dragOverColumn.classList.add("drag-over");
+  };
+
+  kanban.addEventListener("dragstart", (event) => {
+    const card = event.target instanceof Element ? event.target.closest(".card") : null;
+    if (!card) return;
+    closeCardActionMenu();
+    setCardActionDragInFlight(true);
+    event.dataTransfer.setData("text/plain", card.dataset.ticketId);
+    event.dataTransfer.effectAllowed = "move";
   });
 
-  kanban.querySelectorAll("[data-add-to-state]").forEach((btn) => {
-    btn.addEventListener("click", (event) => {
-      event.stopPropagation();
-      openCreateFlyout(btn.dataset.addToState || "");
-    });
+  kanban.addEventListener("dragover", (event) => {
+    const column = event.target instanceof Element ? event.target.closest(".column") : null;
+    if (!column) return;
+    event.preventDefault();
+    setDragOverColumn(column);
   });
 
-  kanban.querySelectorAll(".epic-mini-header[data-ticket-id]").forEach((header) => {
-    header.addEventListener("click", () => {
-      closeCreateFlyout();
-      navigate({
-        boardId: state.boardId,
-        view: "ticket",
-        ticketId: header.dataset.ticketId
-      });
+  kanban.addEventListener("dragend", () => {
+    setCardActionDragInFlight(false);
+    setDragOverColumn(null);
+    suppressClickAfterDrag = true;
+    // If no synthetic click follows (e.g. drag cancelled oddly), don't eat the
+    // next real click.
+    setTimeout(() => {
+      suppressClickAfterDrag = false;
+    }, 0);
+  });
+
+  kanban.addEventListener("drop", async (event) => {
+    const column = event.target instanceof Element ? event.target.closest(".column") : null;
+    if (!column) return;
+    event.preventDefault();
+    setDragOverColumn(null);
+    const ticketId = event.dataTransfer.getData("text/plain");
+    if (!ticketId) return;
+    closeCreateFlyout();
+    await api(withBoardQuery(`/api/tickets/${ticketId}`), {
+      method: "PATCH",
+      body: { state_id: column.dataset.stateId }
     });
+    // Refresh board only; do not open the ticket drawer (DnD also fires a
+    // synthetic click on the card — suppressed by suppressClickAfterDrag).
+    await load();
   });
 
-  const cardActionHandlers = createCardActionHandlers({ navigator: navigate });
-  kanban.querySelectorAll(".card").forEach((card) => {
-    const ticket = tickets.find((item) => item.id === card.dataset.ticketId);
-    if (ticket) bindCardContextMenu(card, ticket, { handlers: cardActionHandlers, onBeforeOpen: closeCreateFlyout });
-    // HTML5 DnD ends with a synthetic click on the source element; ignore that
-    // follow-up click so dropping a card does not also open the detail drawer.
-    let suppressClickAfterDrag = false;
-    card.addEventListener("click", async (event) => {
-      const clickTarget = event.target instanceof Element ? event.target : event.target?.parentElement;
-      if (clickTarget?.closest("a")) {
-        event.stopPropagation();
-        return;
-      }
-      if (suppressClickAfterDrag) {
-        suppressClickAfterDrag = false;
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      }
+  // --- Clicks (precedence: add-button > expand toggle > link > epic header > card) ---
+  kanban.addEventListener("click", (event) => {
+    const target = event.target instanceof Element ? event.target : event.target?.parentElement;
+    if (!target) return;
+
+    const addBtn = target.closest("[data-add-to-state]");
+    if (addBtn) {
+      event.stopPropagation();
+      openCreateFlyout(addBtn.dataset.addToState || "");
+      return;
+    }
+
+    const toggle = target.closest("button.card-expand-trigger");
+    if (toggle) {
+      event.stopPropagation();
+      event.preventDefault();
+      toggleCardExpansion(toggle.closest(".card"));
+      return;
+    }
+
+    // Anchors inside a card keep their native behavior.
+    if (target.closest("a")) {
+      event.stopPropagation();
+      return;
+    }
+
+    const epicHeader = target.closest(".epic-mini-header[data-ticket-id]");
+    if (epicHeader) {
       closeCreateFlyout();
-      navigate({
-        boardId: state.boardId,
-        view: "ticket",
-        ticketId: card.dataset.ticketId
-      });
-    });
-    const toggleBtn = card.querySelector("button.card-expand-trigger");
-    if (toggleBtn) {
-      toggleBtn.addEventListener("click", (event) => {
-        event.stopPropagation();
-        event.preventDefault();
-        const id = card.dataset.ticketId;
-        if (state.expandedCardIds.has(id)) state.expandedCardIds.delete(id);
-        else state.expandedCardIds.add(id);
-        const expanded = card.classList.toggle("is-expanded");
-        toggleBtn.setAttribute("aria-expanded", expanded ? "true" : "false");
-      });
+      navigate({ boardId: state.boardId, view: "ticket", ticketId: epicHeader.dataset.ticketId });
+      return;
     }
-    card.addEventListener("dragstart", (event) => {
-      closeCardActionMenu();
-      setCardActionDragInFlight(true);
-      event.dataTransfer.setData("text/plain", card.dataset.ticketId);
-      event.dataTransfer.effectAllowed = "move";
-    });
-    card.addEventListener("dragend", () => {
-      setCardActionDragInFlight(false);
-      suppressClickAfterDrag = true;
-      // If no click follows (e.g. drag cancelled oddly), do not eat the next real click.
-      setTimeout(() => {
-        suppressClickAfterDrag = false;
-      }, 0);
-    });
+
+    const card = target.closest(".card");
+    if (!card) return;
+    if (suppressClickAfterDrag) {
+      suppressClickAfterDrag = false;
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    closeCreateFlyout();
+    navigate({ boardId: state.boardId, view: "ticket", ticketId: card.dataset.ticketId });
+  });
+
+  // --- Context menu ---
+  bindCardContextMenuDelegated(kanban, (id) => boardTicketsById.get(id), {
+    handlers: cardActionHandlers,
+    onBeforeOpen: closeCreateFlyout
   });
 }
 
@@ -388,18 +444,27 @@ function renderCard(ticket, { asEpicChild = false } = {}) {
           : `<div class="card-expand-trigger card-expand-trigger--static">${triggerInner}</div>`}
       </div>
 
-      ${hasExpandable ? `
-        <div class="card-expandable">
-          ${hasDescription ? `<div class="card-description markdown-body">${renderMarkdown(ticket.description)}</div>` : ""}
-          ${renderLabels(ticket.labels)}
-          ${ticket.parent_ticket ? `<div class="parent-line">-> ${escapeHtml(ticketLabel(ticket.parent_ticket))}</div>` : ""}
-          ${ticket.child_count ? `<div class="child-count">${ticket.child_count} feature${ticket.child_count === 1 ? "" : "s"} inside</div>` : ""}
-        </div>
-      ` : ""}
+      ${hasExpandable && isExpanded ? renderCardExpandable(ticket) : ""}
     </article>
   `;
 }
 
+// The expandable body holds the only genuinely expensive per-card work: a full
+// markdown parse of the description. It's rendered eagerly only for cards that
+// are already expanded; collapsed cards get it injected on first open (see
+// toggleCardExpansion). Kept as its own function so both paths share one source.
+function renderCardExpandable(ticket) {
+  const hasDescription = Boolean(String(ticket.description || "").trim());
+  return `
+    <div class="card-expandable">
+      ${hasDescription ? `<div class="card-description markdown-body">${renderMarkdown(ticket.description)}</div>` : ""}
+      ${renderLabels(ticket.labels)}
+      ${ticket.parent_ticket ? `<div class="parent-line">-> ${escapeHtml(ticketLabel(ticket.parent_ticket))}</div>` : ""}
+      ${ticket.child_count ? `<div class="child-count">${ticket.child_count} feature${ticket.child_count === 1 ? "" : "s"} inside</div>` : ""}
+    </div>
+  `;
+}
+
 /**
  * Click-and-drag horizontal panning on the kanban container.
  * Skipped when the pointer starts on a .card (cards own their own click + HTML5 DnD),

package/public/js/local-backend.js

@@ -726,7 +726,7 @@ async function handleTicketArchive(ticketId, archive) {
   });
 }
 
-async function handleTicketContext(ticketId) {
+async function handleTicketContext(ticketId, { includeProjectContext = false } = {}) {
   const db = await openDb();
   const snap = await readBoardSnapshot(db);
   const ticket = snap.tickets.find((t) => t.id === ticketId);
@@ -776,16 +776,26 @@ async function handleTicketContext(ticketId) {
         other_ticket: compact(other)
       };
     });
-  return {
+  const context = {
     ticket: { ...ticket, labels },
-    board: snap.board,
-    board_manual: { entries: snap.boardEntries.filter((e) => !e.struck_at) },
+    board: includeProjectContext
+      ? snap.board
+      : {
+          id: snap.board.id,
+          slug: snap.board.slug,
+          name: snap.board.name,
+          repo_path: snap.board.system_path || "",
+          system_path: snap.board.system_path || "",
+          default_branch: snap.board.default_branch || "main"
+        },
     parent_ticket: compact(parent),
     child_tickets: childTickets,
     relations,
     blockers: [],
     related_tickets: [...childTickets, ...(parent ? [parent] : [])]
   };
+  if (includeProjectContext) context.board_manual = { entries: snap.boardEntries.filter((e) => !e.struck_at) };
+  return context;
 }
 
 async function handleTicketComments(ticketId) {
@@ -955,6 +965,7 @@ const ROUTES = [
   { m: "DELETE", re: /^\/api\/tickets\/([^/]+)$/, fn: (m) => handleTicketDelete(decodeURIComponent(m[1])) },
   { m: "POST", re: /^\/api\/tickets\/([^/]+)\/archive$/, fn: (m) => handleTicketArchive(decodeURIComponent(m[1]), true) },
   { m: "POST", re: /^\/api\/tickets\/([^/]+)\/restore$/, fn: (m) => handleTicketArchive(decodeURIComponent(m[1]), false) },
+  { m: "GET", re: /^\/api\/tickets\/([^/]+)\/context\/full$/, fn: (m) => handleTicketContext(decodeURIComponent(m[1]), { includeProjectContext: true }) },
   { m: "GET", re: /^\/api\/tickets\/([^/]+)\/context$/, fn: (m) => handleTicketContext(decodeURIComponent(m[1])) },
   { m: "GET", re: /^\/api\/tickets\/([^/]+)\/comments$/, fn: (m) => handleTicketComments(decodeURIComponent(m[1])) },
   { m: "GET", re: /^\/api\/tickets\/([^/]+)\/history$/, fn: (m) => handleTicketHistory(decodeURIComponent(m[1])) },

package/public/js/main.js

@@ -36,7 +36,7 @@ import {
   closeCreateFlyout,
   isCreateFlyoutOpen
 } from "./create-card.js";
-import { enableKanbanDragScroll } from "./kanban.js";
+import { enableKanbanDragScroll, enableKanbanInteractions } from "./kanban.js";
 import { runSearch, hideSearch } from "./search.js";
 import { load } from "./app.js";
 import { edition } from "./config.js";
@@ -131,6 +131,7 @@ async function init() {
   });
 
   enableKanbanDragScroll();
+  enableKanbanInteractions();
 
   const initialRoute = currentRoute();
   if (initialRoute.boardSlug) state.boardSlug = initialRoute.boardSlug;

package/public/js/motion-preference.js

@@ -47,7 +47,18 @@ export function applyReducedMotionPreference({
   storage = safeStorage(),
   mediaMatcher = defaultMediaMatcher
 } = {}) {
-  const reduce = effectiveReducedMotionPreference({ storage, mediaMatcher });
-  doc?.documentElement?.setAttribute("data-reduced-motion", reduce ? "reduce" : "allow");
-  return reduce;
+  // Starscape v3 `data-motion` contract (three-state; shared with the
+  // ui-system-v3 package and ss-nebula). Replaces the legacy two-state
+  // `data-reduced-motion="reduce|allow"`:
+  //   • stored reduce → data-motion="reduce" (always reduce)
+  //   • stored allow  → data-motion="full"   (ignore OS reduce)
+  //   • no stored pref → no attribute        (follow OS prefers-reduced-motion)
+  const root = doc?.documentElement;
+  const stored = storedReducedMotionPreference(storage);
+  if (root) {
+    if (stored === true) root.setAttribute("data-motion", "reduce");
+    else if (stored === false) root.setAttribute("data-motion", "full");
+    else root.removeAttribute("data-motion");
+  }
+  return effectiveReducedMotionPreference({ storage, mediaMatcher });
 }