@starlove/orbit 1.1.2 → 1.2.0

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
   });
 }
 
@@ -213,17 +269,18 @@ function renderColumn(column, tickets) {
   // are the queue the claim-next MCP tool pulls from. Mark it so humans can
   // instantly see where agent-facing staging lives.
   const isAiReady = column.name === "AI Ready";
-  const columnClasses = ["column"];
+  const columnClasses = ["column", "lane"];
   if (isAiReady) columnClasses.push("column--ai-ready");
+  const accentAttr = isAiReady ? ' data-accent="ai-ready"' : "";
 
   return `
-    <section class="${columnClasses.join(" ")}" data-state-id="${column.id}" data-state-name="${escapeHtml(column.name)}">
-      <div class="column-head">
-        <h2${isAiReady ? ' title="Agent staging — cards here are picked up by the claim-next tool when unblocked"' : ""}>
+    <section class="${columnClasses.join(" ")}" data-flat${accentAttr} data-state-id="${column.id}" data-state-name="${escapeHtml(column.name)}">
+      <div class="column-head lane-head">
+        <h2 class="lane-title"${isAiReady ? ' title="Agent staging — cards here are picked up by the claim-next tool when unblocked"' : ""}>
           ${isAiReady ? '<span class="agent-dot" aria-hidden="true"></span>' : ""}${escapeHtml(column.name)}
         </h2>
-        <div class="column-head-actions">
-          <button type="button" class="column-add-btn ghost" data-add-to-state="${escapeHtml(column.id)}" title="New card">+</button>
+        <div class="column-head-actions lane-actions">
+          <button type="button" class="column-add-btn" data-variant="plus" data-add-to-state="${escapeHtml(column.id)}" title="New card">+</button>
           <span class="count">${columnTickets.length}</span>
         </div>
       </div>
@@ -319,7 +376,7 @@ function renderEpicMiniHeader(epic) {
 export function renderPriorityPill(priority) {
   const key = priorityKeyFor(priority);
   const label = priorityLabel(priority);
-  return `<div class="card-priority-id priority-pill priority-pill-${escapeHtml(key)}"><span class="card-priority-label">${escapeHtml(label)}</span></div>`;
+  return `<div class="card-priority-id priority-pill" data-variant="${escapeHtml(key)}"><span class="card-priority-label">${escapeHtml(label)}</span></div>`;
 }
 
 export function renderTypeIcon(type) {
@@ -378,28 +435,37 @@ function renderCard(ticket, { asEpicChild = false } = {}) {
       : `<span class="card-unread-dot has-count" role="status" aria-label="${unreadN} unread updates">${unreadN > 99 ? "99+" : unreadN}</span>`;
 
   return `
-    <article class="card type-${escapeHtml(canonicalType)} priority-${escapeHtml(priorityKey)}${isExpanded ? " is-expanded" : ""}${asEpicChild ? " is-epic-child" : ""} ${ticket.id === state.selectedTicketId ? "selected" : ""}" draggable="true" data-ticket-id="${ticket.id}">
+    <article class="card type-${escapeHtml(canonicalType)} priority-${escapeHtml(priorityKey)}${isExpanded ? " is-expanded" : ""}${asEpicChild ? " is-epic-child" : ""} ${ticket.id === state.selectedTicketId ? "selected" : ""}" data-variant="${escapeHtml(canonicalType)}" draggable="true" data-ticket-id="${ticket.id}">
       ${unreadDot}
       <h3>${escapeHtml(ticket.title)}</h3>
 
       <div class="card-meta">
         ${hasExpandable
-          ? `<button type="button" class="card-expand-trigger" data-card-toggle aria-expanded="${isExpanded ? "true" : "false"}">${triggerInner}</button>`
+          ? `<button type="button" class="card-expand-trigger" data-variant="card-accordion" data-card-toggle aria-expanded="${isExpanded ? "true" : "false"}">${triggerInner}</button>`
           : `<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/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 });
 }

package/public/js/search.js

@@ -32,7 +32,7 @@ export async function runSearch() {
             <strong>${escapeHtml(ticketLabel(ticket))}</strong>
             <span class="search-hit-title">${escapeHtml(ticket.title)}</span>
           </span>
-          <span class="search-hit-state state-pill-${escapeHtml(stateClassFor(ticket))}">${escapeHtml(ticket.state_name || "State")}</span>
+          <span class="search-hit-state" data-variant="${escapeHtml(stateClassFor(ticket))}">${escapeHtml(ticket.state_name || "State")}</span>
         </div>
       `
     )