trekoon 0.4.0 → 0.4.2

package/src/board/assets/components/Component.js

@@ -80,11 +80,18 @@ function getNamespacedFormIdentity(form) {
   return "anonymous-form";
 }
 
-function getManagedControls(root) {
+function getManagedControls(root, cache) {
+  if (cache) {
+    const cached = cache.get(root);
+    if (cached) return cached;
+    const controls = Array.from(root.querySelectorAll("input, textarea, select"));
+    cache.set(root, controls);
+    return controls;
+  }
   return Array.from(root.querySelectorAll("input, textarea, select"));
 }
 
-function getControlIdentity(el, form) {
+function getControlIdentity(el, form, cache) {
   const controlKey = el.getAttribute("data-control-id");
   if (controlKey) {
     return `control:${controlKey}`;
@@ -98,12 +105,12 @@ function getControlIdentity(el, form) {
   if (name) {
     const tagName = el.tagName.toLowerCase();
     const type = tagName === "input" ? (el.getAttribute("type") ?? "text") : tagName;
-    const peers = getManagedControls(form).filter((candidate) => candidate.getAttribute("name") === name);
+    const peers = getManagedControls(form, cache).filter((candidate) => candidate.getAttribute("name") === name);
     const index = peers.indexOf(el);
     return `name:${name}:${type}:${index}`;
   }
 
-  const index = getManagedControls(form).indexOf(el);
+  const index = getManagedControls(form, cache).indexOf(el);
   return `index:${index}:${el.tagName.toLowerCase()}`;
 }
 
@@ -143,7 +150,11 @@ function restoreSelection(el, selectionStart, selectionEnd) {
  */
 export function preserveFormState(container, writeFn, options = {}) {
   const resetFormIds = new Set(options.resetFormIds ?? []);
-  const inputs = getManagedControls(container);
+
+  // Per-form cache for getManagedControls: avoids the O(n^2) re-query that
+  // occurs when many controls share the same form root.
+  const captureCache = new Map();
+  const inputs = getManagedControls(container, captureCache);
 
   const activeElement = document.activeElement;
   let focusedIdentity = null;
@@ -151,7 +162,7 @@ export function preserveFormState(container, writeFn, options = {}) {
   const savedStates = inputs.map((el) => {
     const form = getFormRoot(el);
     const formId = getNamespacedFormIdentity(form);
-    const controlId = form ? getControlIdentity(el, form) : null;
+    const controlId = form ? getControlIdentity(el, form, captureCache) : null;
     const identity = controlId ? { formId, controlId } : null;
 
     if (activeElement === el) {
@@ -177,13 +188,16 @@ export function preserveFormState(container, writeFn, options = {}) {
     ]),
   );
 
+  // Fresh cache for the restore pass (DOM was replaced by writeFn).
+  const restoreCache = new Map();
+
   for (const state of savedStates) {
     const { formId, controlId } = state.identity;
     if (resetFormIds.has(formId)) {
       continue;
     }
     const form = formsByIdentity.get(formId) ?? container;
-    const restored = getManagedControls(form).find((control) => getControlIdentity(control, form) === controlId);
+    const restored = getManagedControls(form, restoreCache).find((control) => getControlIdentity(control, form, restoreCache) === controlId);
     if (restored && restored.value !== state.value) {
       restored.value = state.value;
     }
@@ -199,7 +213,7 @@ export function preserveFormState(container, writeFn, options = {}) {
       return;
     }
     const form = formsByIdentity.get(formId) ?? container;
-    const restored = getManagedControls(form).find((control) => getControlIdentity(control, form) === controlId);
+    const restored = getManagedControls(form, restoreCache).find((control) => getControlIdentity(control, form, restoreCache) === controlId);
     if (restored) {
       restored.focus({ preventScroll: true });
       const focusedState = savedStates.find((state) => state.identity?.formId === formId && state.identity?.controlId === controlId);

package/src/board/assets/components/Workspace.js

@@ -166,7 +166,7 @@ function renderWorkspaceHeader(props) {
 // ---------------------------------------------------------------------------
 
 function renderKanbanColumns(props) {
-  const { visibleTasks, selectedTaskId, isMutating, taskStatusFilter } = props;
+  const { visibleTasks, selectedTaskId, isMutating, taskStatusFilter, dragFeedback } = props;
   const filter = taskStatusFilter || { ...DEFAULT_STATUS_FILTER };
 
   const columnsMarkup = STATUS_ORDER
@@ -178,6 +178,12 @@ function renderKanbanColumns(props) {
       ? renderEmptyState(`No ${columnTitle.toLowerCase()} work`, "Adjust search or switch epics to inspect more tasks.")
       : columnTasks.map((task) => renderTaskCard({ task, selected: selectedTaskId === task.id, isMutating })).join("");
 
+    // Re-apply drag-feedback class from store so a rerender during drag does
+    // not silently wipe the visual feedback that was set by handleDragover.
+    const feedbackClass = dragFeedback?.targetStatus === status
+      ? (dragFeedback.kind === "valid" ? " board-drop-valid" : " board-drop-invalid")
+      : "";
+
     return `
       <section class="board-column board-column--dense ${secondaryPanelClasses("flex min-h-[20rem] min-w-0 flex-col p-3")}" aria-labelledby="column-${status}">
         <header class="board-column__header flex items-start justify-between gap-3 border-b border-[var(--board-border)] pb-3">
@@ -190,7 +196,7 @@ function renderKanbanColumns(props) {
           </div>
           ${columnTasks.length > 0 ? `<span class="board-column__count text-xs font-medium text-[var(--board-text-soft)]">${columnTasks.length === 1 ? "1 task" : `${columnTasks.length} tasks`}</span>` : ""}
         </header>
-        <div class="board-column__tasks mt-3 grid min-h-0 flex-1 content-start gap-2.5 overflow-auto pr-1 overscroll-contain" id="column-${status}" data-drop-status="${escapeHtml(status)}">${content}</div>
+        <div class="board-column__tasks mt-3 grid min-h-0 flex-1 content-start gap-2.5 overflow-auto pr-1 overscroll-contain${feedbackClass}" id="column-${status}" data-drop-status="${escapeHtml(status)}">${content}</div>
       </section>
     `;
   }).join("");
@@ -292,7 +298,7 @@ function render(props) {
   });
 
   const contentMarkup = store.view === "kanban"
-    ? renderKanbanColumns({ visibleTasks, selectedTaskId, isMutating: store.isMutating, taskStatusFilter: store.taskStatusFilter })
+    ? renderKanbanColumns({ visibleTasks, selectedTaskId, isMutating: store.isMutating, taskStatusFilter: store.taskStatusFilter, dragFeedback: store.dragFeedback ?? null })
     : renderListView({ visibleTasks, selectedTaskId });
 
   return `

package/src/board/assets/components/helpers.js

@@ -252,7 +252,11 @@ export function isCompactViewport() {
 }
 
 export function shouldUseTaskModal(boardState, store) {
-  return Boolean(boardState?.selectedTask);
+  return Boolean(boardState?.taskModalOpen && boardState?.selectedTask);
+}
+
+export function shouldUseSubtaskModal(boardState) {
+  return Boolean(boardState?.subtaskModalOpen && boardState?.selectedSubtask);
 }
 
 export function lookupNode(snapshot, id) {

package/src/board/assets/runtime/delegation.js

@@ -310,6 +310,8 @@ export function createDelegation(rootElement, actions) {
     for (const el of rootElement.querySelectorAll(".board-drop-valid, .board-drop-invalid")) {
       el.classList.remove("board-drop-valid", "board-drop-invalid");
     }
+    // Clear feedback in store so rerenders do not re-apply stale classes.
+    actions.setDragFeedback?.(null);
   }
 
   function handleDragstart(event) {
@@ -336,11 +338,15 @@ export function createDelegation(rootElement, actions) {
     const targetStatus = column.dataset.dropStatus;
     if (draggedTaskStatus && isValidTransition(draggedTaskStatus, targetStatus)) {
       event.preventDefault();
+      // Fast path: apply directly to DOM for immediate visual feedback.
       column.classList.add("board-drop-valid");
       column.classList.remove("board-drop-invalid");
+      // Also persist in store so a rerender during drag restores the class.
+      actions.setDragFeedback?.({ targetStatus, kind: "valid" });
     } else if (draggedTaskStatus && targetStatus !== draggedTaskStatus) {
       column.classList.add("board-drop-invalid");
       column.classList.remove("board-drop-valid");
+      actions.setDragFeedback?.({ targetStatus, kind: "invalid" });
     }
   }
 
@@ -348,6 +354,8 @@ export function createDelegation(rootElement, actions) {
     const column = event.target.closest("[data-drop-status]");
     if (column && !column.contains(event.relatedTarget)) {
       column.classList.remove("board-drop-valid", "board-drop-invalid");
+      // Clear store feedback when leaving the column.
+      actions.setDragFeedback?.(null);
     }
   }
 

package/src/board/assets/runtime/focus-trap.js

@@ -0,0 +1,48 @@
+/**
+ * Lazy overlay focus-trap controller.
+ *
+ * Attaches the document-level keydown/focusin listeners only while an overlay
+ * is actually open, and detaches them on close. Without this, plain Tab outside
+ * any overlay can be intercepted by a stale handler in the microtask window
+ * between overlay close and rerender.
+ *
+ * @param {{
+ *   doc?: Document,
+ *   onTabKey: (event: KeyboardEvent) => void,
+ *   onFocusIn: (event: FocusEvent) => void,
+ * }} options
+ */
+export function createOverlayFocusTrap(options) {
+  const doc = options.doc ?? (typeof document !== "undefined" ? document : null);
+  if (!doc) {
+    return {
+      attach() {},
+      detach() {},
+      isAttached() { return false; },
+    };
+  }
+
+  const onKeyDown = options.onTabKey;
+  const onFocusIn = options.onFocusIn;
+  let attached = false;
+
+  function attach() {
+    if (attached) return;
+    doc.addEventListener("keydown", onKeyDown, true);
+    doc.addEventListener("focusin", onFocusIn, true);
+    attached = true;
+  }
+
+  function detach() {
+    if (!attached) return;
+    doc.removeEventListener("keydown", onKeyDown, true);
+    doc.removeEventListener("focusin", onFocusIn, true);
+    attached = false;
+  }
+
+  return {
+    attach,
+    detach,
+    isAttached() { return attached; },
+  };
+}

package/src/board/assets/state/actions.js

@@ -142,6 +142,13 @@ export function createBoardActions(options) {
     searchFocusKeys,
   } = options;
   const { store, persist, getBoardState, getTaskById, syncState } = model;
+  // Direct mutations of `store.*` (filter toggles, notice changes, drag
+  // feedback) bypass setState/syncState, so `getBoardState()`'s memo would
+  // otherwise return a stale reference until the next syncState/notify.
+  // Route these through invalidateBoardStateMemo() before rerender.
+  const invalidateMemo = typeof model.invalidateBoardStateMemo === "function"
+    ? () => model.invalidateBoardStateMemo()
+    : () => {};
 
   const transition = (patch = {}, options = {}) => {
     const { persistState = true, rerenderBoard = true } = options;
@@ -263,6 +270,7 @@ export function createBoardActions(options) {
         selectedEpicId: epicId || null,
         selectedTaskId: null,
         selectedSubtaskId: null,
+        taskModalOpen: false,
       });
     },
     selectEpic(epicId) {
@@ -271,6 +279,7 @@ export function createBoardActions(options) {
         selectedEpicId: epicId || null,
         selectedTaskId: null,
         selectedSubtaskId: null,
+        taskModalOpen: false,
       });
     },
     showEpics() {
@@ -278,6 +287,7 @@ export function createBoardActions(options) {
         screen: "epics",
         selectedTaskId: null,
         selectedSubtaskId: null,
+        taskModalOpen: false,
       });
     },
     showBoard() {
@@ -295,6 +305,7 @@ export function createBoardActions(options) {
         selectedEpicId: fallbackEpicId,
         selectedTaskId: null,
         selectedSubtaskId: null,
+        taskModalOpen: false,
       });
     },
     setView(view) {
@@ -340,16 +351,25 @@ export function createBoardActions(options) {
         screen: "tasks",
         selectedEpicId: task.epicId,
         selectedTaskId: taskId,
+        taskModalOpen: true,
       });
     },
     closeTask() {
-      transition({ selectedTaskId: null, selectedSubtaskId: null });
+      transition({
+        selectedTaskId: null,
+        selectedSubtaskId: null,
+        taskModalOpen: false,
+        subtaskModalOpen: false,
+      });
     },
     openSubtask(subtaskId) {
-      transition({ selectedSubtaskId: subtaskId || null }, { persistState: false });
+      transition(
+        { selectedSubtaskId: subtaskId || null, subtaskModalOpen: Boolean(subtaskId) },
+        { persistState: false },
+      );
     },
     closeSubtask() {
-      transition({ selectedSubtaskId: null }, { persistState: false });
+      transition({ selectedSubtaskId: null, subtaskModalOpen: false }, { persistState: false });
     },
     submitTaskForm(taskId, formData) {
       const updates = {
@@ -408,12 +428,31 @@ export function createBoardActions(options) {
       const task = getTaskById(taskId);
       return task?.status ?? null;
     },
+    /**
+     * Record the current drag-over feedback in store state so it survives a
+     * rerender triggered by an unrelated event (e.g. a server SSE push).
+     * Pass null to clear feedback (dragend / drop / dragleave).
+     *
+     * @param {{ targetStatus: string, kind: 'valid'|'invalid' }|null} feedback
+     */
+    setDragFeedback(feedback) {
+      // Reference equality on freshly-allocated `{ targetStatus, kind }` always
+      // fails, so dragover would rerender on every move. Compare by primitive
+      // key so repeats over the same column become a no-op.
+      const prev = store.dragFeedback;
+      const prevKey = prev ? `${prev.targetStatus}|${prev.kind}` : null;
+      const nextKey = feedback ? `${feedback.targetStatus}|${feedback.kind}` : null;
+      if (prevKey === nextKey) return;
+      store.dragFeedback = feedback;
+      rerender();
+    },
     dropTaskStatus(taskId, nextStatus) {
       const task = getTaskById(taskId);
       if (!task || !nextStatus || task.status === nextStatus) {
         return;
       }
-      transition({ selectedTaskId: taskId }, { rerenderBoard: false });
+      // Drag/drop is a status change only; do not mutate selection or modal state,
+      // otherwise dropping a card while another task modal is open hijacks it.
       api.patchTask(taskId, { status: nextStatus }, (snapshot) => updateTaskInSnapshot(snapshot, taskId, { status: nextStatus }, normalizeSnapshot));
     },
     changeEpicStatus(epicId, newStatus) {
@@ -433,22 +472,26 @@ export function createBoardActions(options) {
     toggleEpicStatusFilter(status) {
       const current = store.epicStatusFilter || { ...DEFAULT_STATUS_FILTER };
       store.epicStatusFilter = { ...current, [status]: !current[status] };
+      invalidateMemo();
       persist();
       rerender();
     },
     toggleTaskStatusFilter(status) {
       const current = store.taskStatusFilter || { ...DEFAULT_STATUS_FILTER };
       store.taskStatusFilter = { ...current, [status]: !current[status] };
+      invalidateMemo();
       persist();
       rerender();
     },
     resetEpicFilter() {
       store.epicStatusFilter = { ...DEFAULT_STATUS_FILTER };
+      invalidateMemo();
       persist();
       rerender();
     },
     resetTaskFilter() {
       store.taskStatusFilter = { ...DEFAULT_STATUS_FILTER };
+      invalidateMemo();
       persist();
       rerender();
     },