trekoon 0.2.7 → 0.2.9

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

@@ -0,0 +1,244 @@
+import { escapeHtml, formatDate, normalizeStatus, STATUS_ORDER } from "../state/utils.js";
+
+export { escapeHtml, formatDate, normalizeStatus, STATUS_ORDER };
+
+// ---------------------------------------------------------------------------
+// Status labels & styles
+// ---------------------------------------------------------------------------
+
+export const STATUS_LABELS = {
+  todo: "Todo",
+  blocked: "Blocked",
+  in_progress: "In progress",
+  done: "Done",
+};
+
+const STATUS_BADGE_STYLES = {
+  todo: "border-white/10 bg-white/[0.05] text-[var(--board-text-muted)]",
+  blocked: "border-amber-500/20 bg-amber-500/10 text-amber-300",
+  in_progress: "border-sky-400/20 bg-sky-400/10 text-sky-300",
+  done: "border-emerald-500/20 bg-emerald-500/10 text-emerald-300",
+  default: "border-[var(--board-border)] bg-white/[0.04] text-[var(--board-text-muted)]",
+};
+
+// ---------------------------------------------------------------------------
+// Class-name helpers
+// ---------------------------------------------------------------------------
+
+export function cx(...classNames) {
+  return classNames.filter(Boolean).join(" ");
+}
+
+export function panelClasses(extra = "") {
+  return cx(
+    "rounded-[28px] border border-[var(--board-border)] bg-[var(--board-surface)] shadow-panel",
+    extra,
+  );
+}
+
+export function secondaryPanelClasses(extra = "") {
+  return cx(
+    "rounded-[24px] border border-[var(--board-border)] bg-[var(--board-surface-2)]",
+    extra,
+  );
+}
+
+export function sectionLabelClasses() {
+  return "text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--board-text-soft)]";
+}
+
+export function neutralChipClasses() {
+  return "inline-flex items-center gap-1 rounded-full border border-[var(--board-border)] bg-white/[0.04] px-2.5 py-1 text-[11px] font-medium text-[var(--board-text-muted)]";
+}
+
+export function buttonClasses(options = {}) {
+  const kind = options.kind ?? "secondary";
+  const iconOnly = options.iconOnly ?? false;
+
+  return cx(
+    "inline-flex items-center justify-center gap-2 rounded-2xl border text-sm font-medium transition duration-200",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--board-border-strong)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--board-bg)]",
+    iconOnly ? "h-10 w-10 px-0" : "min-h-10 px-4 py-2.5",
+    kind === "primary"
+      ? "border-[var(--board-accent)] bg-[var(--board-accent)] text-white hover:bg-[var(--board-accent-strong)] hover:border-[var(--board-accent-strong)]"
+      : "border-[var(--board-border)] bg-white/[0.04] text-[var(--board-text)] hover:bg-white/[0.08] hover:border-[var(--board-border-strong)]",
+  );
+}
+
+export function fieldClasses() {
+  return cx(
+    "w-full rounded-2xl border border-[var(--board-border)] bg-[var(--board-surface-2)] px-3.5 py-3 text-sm text-[var(--board-text)] shadow-sm transition",
+    "placeholder:text-[var(--board-text-soft)] focus:border-[var(--board-border-strong)] focus:outline-none focus:ring-2 focus:ring-[var(--board-accent-soft)]",
+    "disabled:cursor-not-allowed disabled:opacity-60",
+  );
+}
+
+function statusBadgeClasses(status) {
+  return cx(
+    "inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.14em]",
+    STATUS_BADGE_STYLES[normalizeStatus(status)] ?? STATUS_BADGE_STYLES.default,
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Render helpers
+// ---------------------------------------------------------------------------
+
+export function renderIcon(name, className = "") {
+  return `<span class="${cx("material-symbols-rounded shrink-0", className)}" aria-hidden="true">${name}</span>`;
+}
+
+export function readStatusLabel(rawStatus) {
+  if (typeof rawStatus !== "string" || rawStatus.trim().length === 0) {
+    return "Unknown";
+  }
+
+  const normalized = normalizeStatus(rawStatus);
+  if (STATUS_LABELS[normalized]) {
+    return STATUS_LABELS[normalized];
+  }
+
+  return rawStatus.replaceAll("_", " ").replaceAll("-", " ");
+}
+
+export function renderStatusBadge(rawStatus, label = readStatusLabel(rawStatus)) {
+  return `<span class="${statusBadgeClasses(rawStatus)}">${escapeHtml(label)}</span>`;
+}
+
+export function renderStatusSelect(name, selectedStatus, disabled = false) {
+  return `
+    <select class="${fieldClasses()}" name="${escapeHtml(name)}" ${disabled ? "disabled" : ""}>
+      ${STATUS_ORDER.map((status) => `
+        <option value="${escapeHtml(status)}" ${selectedStatus === status ? "selected" : ""}>${escapeHtml(STATUS_LABELS[status] ?? status)}</option>
+      `).join("")}
+    </select>
+  `;
+}
+
+export function renderEmptyState(title, description, shortcut) {
+  return `
+    <div class="rounded-[24px] border border-dashed border-[var(--board-border-strong)] bg-[var(--board-accent-soft)]/40 px-5 py-6 text-center">
+      <strong class="block text-base font-semibold text-[var(--board-text)]">${escapeHtml(title)}</strong>
+      <p class="mt-2 text-sm leading-6 text-[var(--board-text-muted)]">${escapeHtml(description)}</p>
+      ${shortcut
+        ? `<p class="mt-3 text-xs text-[var(--board-text-soft)]">Try <span class="inline-flex items-center rounded-lg border border-[var(--board-border)] bg-white/[0.04] px-2 py-1 font-medium text-[var(--board-text-muted)]">${escapeHtml(shortcut)}</span></p>`
+        : ""}
+    </div>
+  `;
+}
+
+// ---------------------------------------------------------------------------
+// Description rendering helpers
+// ---------------------------------------------------------------------------
+
+export function renderDescriptionPreview(description, className = "mt-1 text-sm leading-6 text-[var(--board-text-muted)]") {
+  if (!description || description.trim().length === 0) return "";
+  return `<p class="${escapeHtml(className)}">${escapeHtml(description)}</p>`;
+}
+
+export function renderDescriptionBody(description, className = "text-sm leading-7 text-[var(--board-text-muted)]") {
+  if (!description || description.trim().length === 0) {
+    return `<p class="${escapeHtml(className)}">No description provided.</p>`;
+  }
+  return `<div class="${escapeHtml(className)}" style="white-space:pre-wrap;word-break:break-word">${escapeHtml(description)}</div>`;
+}
+
+export function shouldCollapseDescription(description) {
+  if (!description) return false;
+  const trimmed = description.trim();
+  return trimmed.length > 260 || trimmed.split("\n").length > 5;
+}
+
+export function renderDescriptionSection(title, description, options = {}) {
+  const {
+    open = false,
+    compact = false,
+    emptyText = "Add context so collaborators know what done looks like.",
+  } = options;
+
+  if (!description || description.trim().length === 0) {
+    return `
+      <section class="${secondaryPanelClasses("board-detail-card p-4")}">
+        <div class="board-section__header flex items-center justify-between gap-3">
+          <strong class="text-sm font-semibold text-[var(--board-text)]">${escapeHtml(title)}</strong>
+          <span class="${neutralChipClasses()}">Empty</span>
+        </div>
+        <p class="mt-3 text-sm leading-6 text-[var(--board-text-muted)]">${escapeHtml(emptyText)}</p>
+      </section>
+    `;
+  }
+
+  if (!shouldCollapseDescription(description)) {
+    return `
+      <section class="${secondaryPanelClasses("board-detail-card p-4")}">
+        <div class="board-section__header flex items-center justify-between gap-3">
+          <strong class="text-sm font-semibold text-[var(--board-text)]">${escapeHtml(title)}</strong>
+          <span class="${neutralChipClasses()}">${escapeHtml(`${description.trim().length} chars`)}</span>
+        </div>
+        <div class="mt-3 ${compact ? "board-detail-copy board-detail-copy--compact" : "board-detail-copy"}">
+          ${renderDescriptionBody(description)}
+        </div>
+      </section>
+    `;
+  }
+
+  return `
+    <details class="board-disclosure ${secondaryPanelClasses("board-detail-card p-4")}" ${open ? "open" : ""}>
+      <summary class="board-detail-summary-row cursor-pointer list-none text-sm font-semibold text-[var(--board-text)]">
+        <span>${escapeHtml(title)}</span>
+        <span class="${neutralChipClasses()}">Long</span>
+      </summary>
+      <div class="mt-3 board-detail-copy ${compact ? "board-detail-copy--compact" : ""}">
+        ${renderDescriptionBody(description)}
+      </div>
+    </details>
+  `;
+}
+
+// ---------------------------------------------------------------------------
+// Misc shared helpers
+// ---------------------------------------------------------------------------
+
+export function readNodeLabel(kind, title) {
+  if (kind === "task") return `Task: ${title}`;
+  if (kind === "subtask") return `Subtask: ${title}`;
+  return title;
+}
+
+export function renderEpicCountSummary(epic) {
+  const totalTasks = Array.isArray(epic.taskIds) ? epic.taskIds.length : 0;
+  const counts = epic.counts || { todo: 0, blocked: 0, in_progress: 0, done: 0 };
+  return `
+    <span class="${neutralChipClasses()}">${totalTasks} task${totalTasks === 1 ? "" : "s"}</span>
+    <span class="${neutralChipClasses()}">${counts.in_progress ?? 0} doing</span>
+    <span class="${neutralChipClasses()}">${counts.done ?? 0} done</span>
+  `;
+}
+
+export function renderTaskMeta(task, includeStatus = false) {
+  return `
+    ${includeStatus ? renderStatusBadge(task.status) : ""}
+    <span class="${neutralChipClasses()}">${task.subtasks.length} subtask${task.subtasks.length === 1 ? "" : "s"}</span>
+    ${task.blockedBy.length > 0 ? `<span class="${neutralChipClasses()}">${task.blockedBy.length} blocker${task.blockedBy.length === 1 ? "" : "s"}</span>` : ""}
+  `;
+}
+
+export function hasLongTaskTitle(title) {
+  if (!title) return false;
+  const trimmed = title.trim();
+  return trimmed.length > 72 || trimmed.split("\n").length > 2;
+}
+
+export function isCompactViewport() {
+  return typeof window !== "undefined" && window.matchMedia?.("(max-width: 900px)")?.matches;
+}
+
+export function shouldUseTaskModal(boardState, store) {
+  return Boolean(boardState?.selectedTask);
+}
+
+export function lookupNode(snapshot, id) {
+  return snapshot.tasks.find((task) => task.id === id)
+    ?? snapshot.subtasks.find((subtask) => subtask.id === id)
+    ?? null;
+}

package/src/board/assets/index.html

@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en" data-theme="dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="dark light" />
+    <meta name="theme-color" content="#0b0d12" data-board-theme-color="active" />
+    <meta name="theme-color" content="#0b0d12" media="(prefers-color-scheme: dark)" />
+    <meta name="theme-color" content="#f4f6fb" media="(prefers-color-scheme: light)" />
+    <meta
+      name="description"
+      content="Trekoon board — local-first workspace for browsing epics, tasks, and flow states."
+    />
+    <title>Trekoon Board</title>
+    <link rel="stylesheet" href="./styles/fonts.css" />
+    <link rel="stylesheet" href="./styles/board.css" />
+  </head>
+  <body>
+    <a href="#board-runtime-root" class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-50 focus:rounded-lg focus:bg-[var(--board-accent)] focus:px-4 focus:py-2 focus:text-white">
+      Skip to content
+    </a>
+
+    <main id="app">
+      <div class="board-shell-v2">
+        <section class="board-shell-v2__frame">
+          <div class="board-shell-v2__runtime-shell">
+            <div
+              id="board-runtime-root"
+              class="board-shell-v2__runtime"
+              data-board-runtime-root
+            ></div>
+          </div>
+        </section>
+      </div>
+    </main>
+
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>

package/src/board/assets/main.js

@@ -0,0 +1,11 @@
+window.__TREKOON_BOARD_BOOTSTRAP__ = "main";
+
+const runtimeRoot = document.querySelector("[data-board-runtime-root]");
+
+if (!(runtimeRoot instanceof HTMLElement)) {
+  throw new Error("Board shell could not find the runtime mount root.");
+}
+
+const { bootLegacyBoard } = await import("./app.js");
+
+await bootLegacyBoard({ mountElement: runtimeRoot });

package/src/board/assets/manifest.json

@@ -0,0 +1,12 @@
+{
+  "name": "trekoon-board-assets",
+  "contractVersion": "1.0.0",
+  "entryFile": "index.html",
+  "files": [
+    "app.js",
+    "components/AppShell.js",
+    "index.html",
+    "main.js",
+    "styles/board.css"
+  ]
+}

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

@@ -0,0 +1,309 @@
+/**
+ * Event delegation system for the board runtime.
+ *
+ * Attaches a single listener per event type on the root element.
+ * Uses event.target.closest() to match data-attributes, so dynamically
+ * rendered content is handled automatically without rebinding.
+ *
+ * @param {HTMLElement} rootElement  Mount root for delegated listeners.
+ * @param {object}      actions     Callback map the delegation dispatches into.
+ * @returns {() => void} Teardown function that removes every listener.
+ */
+export function createDelegation(rootElement, actions) {
+  // ---------------------------------------------------------------------------
+  // Click delegation
+  // ---------------------------------------------------------------------------
+  function handleClick(event) {
+    const { target } = event;
+
+    // -- Destructive / mutation buttons (most specific first) -----------------
+
+    const deleteSubtaskEl = target.closest("[data-delete-subtask]");
+    if (deleteSubtaskEl) {
+      if (actions.isMutating()) return;
+      const subtaskId = deleteSubtaskEl.dataset.deleteSubtask;
+      if (subtaskId) actions.deleteSubtask(subtaskId, deleteSubtaskEl);
+      return;
+    }
+
+    const removeDependencyEl = target.closest("[data-remove-dependency-source]");
+    if (removeDependencyEl) {
+      if (actions.isMutating()) return;
+      const sourceId = removeDependencyEl.dataset.removeDependencySource;
+      const dependsOnId = removeDependencyEl.dataset.removeDependencyTarget;
+      actions.removeDependency(sourceId, dependsOnId, removeDependencyEl);
+      return;
+    }
+
+    // -- Disclosure openers ---------------------------------------------------
+
+    const openSubtaskEl = target.closest("[data-open-subtask]");
+    if (openSubtaskEl) {
+      actions.openSubtask(openSubtaskEl.dataset.openSubtask || null, openSubtaskEl);
+      return;
+    }
+
+    // -- Backdrop-style close handlers ----------------------------------------
+    // Only close when the click lands directly on the backdrop element itself,
+    // not on any child content rendered inside the overlay.
+
+    const closeSubtaskEl = target.closest("[data-close-subtask]");
+    if (closeSubtaskEl) {
+      if (
+        closeSubtaskEl.classList.contains("board-modal-backdrop") &&
+        target !== closeSubtaskEl
+      ) {
+        return;
+      }
+      actions.closeSubtask();
+      return;
+    }
+
+    const closeTaskEl = target.closest("[data-close-task]");
+    if (closeTaskEl) {
+      if (
+        closeTaskEl.classList.contains("board-task-modal-backdrop") &&
+        target !== closeTaskEl
+      ) {
+        return;
+      }
+      actions.closeTask();
+      return;
+    }
+
+    const closeConfirmEl = target.closest("[data-close-confirm]");
+    if (closeConfirmEl) {
+      if (
+        closeConfirmEl.classList.contains("board-confirm-backdrop") &&
+        target !== closeConfirmEl
+      ) {
+        return;
+      }
+      actions.cancelDelete();
+      return;
+    }
+
+    // -- Navigation -----------------------------------------------------------
+
+    const navEl = target.closest("[data-nav]");
+    if (navEl) {
+      if (navEl.dataset.nav === "epics") actions.showEpics();
+      return;
+    }
+
+    const navBoardEl = target.closest("[data-nav-board]");
+    if (navBoardEl) {
+      actions.showBoard();
+      return;
+    }
+
+    const navDetailEl = target.closest("[data-nav-detail]");
+    if (navDetailEl) {
+      actions.scrollToDetail();
+      return;
+    }
+
+    // -- Notes panel toggle ---------------------------------------------------
+
+    const toggleNotesEl = target.closest("[data-toggle-notes]");
+    if (toggleNotesEl) {
+      actions.toggleNotesPanel();
+      return;
+    }
+
+    // -- View switching -------------------------------------------------------
+
+    const viewEl = target.closest("[data-view]");
+    if (viewEl) {
+      actions.setView(viewEl.dataset.view);
+      return;
+    }
+
+    // -- Generic actions (toggle-theme, confirm-delete, cancel-delete) --------
+
+    const actionEl = target.closest("[data-action]");
+    if (actionEl) {
+      const action = actionEl.dataset.action;
+      if (action === "toggle-theme") actions.toggleTheme();
+      if (action === "confirm-delete") actions.confirmDelete();
+      if (action === "cancel-delete") actions.cancelDelete();
+      return;
+    }
+
+    // -- Epic selection -------------------------------------------------------
+
+    const openEpicEl = target.closest("[data-open-epic]");
+    if (openEpicEl) {
+      actions.openEpic(openEpicEl.dataset.openEpic || null);
+      return;
+    }
+
+    // -- Task selection (broadest — checked last) -----------------------------
+
+    const taskEl = target.closest("[data-task-id]");
+    if (taskEl) {
+      actions.selectTask(taskEl.dataset.taskId, taskEl);
+      return;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Input delegation (#board-search-input)
+  // ---------------------------------------------------------------------------
+  function handleInput(event) {
+    if (event.target.id === "board-search-input") {
+      actions.updateSearch(event.target.value);
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Change delegation (#board-epic-select)
+  // ---------------------------------------------------------------------------
+  function handleChange(event) {
+    if (event.target.id === "board-epic-select") {
+      actions.selectEpic(event.target.value || null);
+      return;
+    }
+
+    const epicStatusForm = event.target.closest("[data-epic-status-form]");
+    if (epicStatusForm) {
+      if (actions.isMutating()) return;
+      actions.changeEpicStatus(epicStatusForm.dataset.epicStatusForm, event.target.value);
+      return;
+    }
+
+    const bulkStatusForm = event.target.closest("[data-bulk-status-form]");
+    if (bulkStatusForm) {
+      if (actions.isMutating()) return;
+      const newStatus = event.target.value;
+      if (newStatus) {
+        actions.bulkSetStatus(bulkStatusForm.dataset.bulkStatusForm, newStatus);
+        event.target.value = "";
+      }
+      return;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Submit delegation (data-task-form, data-subtask-form, etc.)
+  // ---------------------------------------------------------------------------
+  function handleSubmit(event) {
+    const form = event.target;
+
+    const taskForm = form.closest("[data-task-form]");
+    if (taskForm) {
+      event.preventDefault();
+      if (actions.isMutating()) return;
+      actions.submitTaskForm(taskForm.dataset.taskForm, new FormData(taskForm));
+      return;
+    }
+
+    const subtaskForm = form.closest("[data-subtask-form]");
+    if (subtaskForm) {
+      event.preventDefault();
+      if (actions.isMutating()) return;
+      actions.submitSubtaskForm(
+        subtaskForm.dataset.subtaskForm,
+        new FormData(subtaskForm),
+      );
+      return;
+    }
+
+    const createSubtaskForm = form.closest("[data-create-subtask-form]");
+    if (createSubtaskForm) {
+      event.preventDefault();
+      if (actions.isMutating()) return;
+      actions.submitCreateSubtask(
+        createSubtaskForm.dataset.createSubtaskForm,
+        new FormData(createSubtaskForm),
+      );
+      return;
+    }
+
+    const dependencyForm = form.closest("[data-dependency-form]");
+    if (dependencyForm) {
+      event.preventDefault();
+      if (actions.isMutating()) return;
+      actions.addDependency(
+        dependencyForm.dataset.dependencyForm,
+        new FormData(dependencyForm),
+      );
+      return;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Keyboard shortcuts (window-level)
+  // ---------------------------------------------------------------------------
+  function handleKeydown(event) {
+    if (event.defaultPrevented) {
+      return;
+    }
+    actions.handleKeydown(event);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Drag-and-drop delegation
+  // ---------------------------------------------------------------------------
+  function handleDragstart(event) {
+    const draggable = event.target.closest("[data-draggable-task]");
+    if (!draggable) return;
+
+    if (actions.isMutating()) {
+      event.preventDefault();
+      return;
+    }
+
+    const taskId = draggable.dataset.taskId;
+    if (!taskId) return;
+
+    event.dataTransfer?.setData("text/task-id", taskId);
+    event.dataTransfer?.setData("text/plain", taskId);
+  }
+
+  function handleDragover(event) {
+    if (event.target.closest("[data-drop-status]")) {
+      event.preventDefault();
+    }
+  }
+
+  function handleDrop(event) {
+    const column = event.target.closest("[data-drop-status]");
+    if (!column) return;
+
+    event.preventDefault();
+    if (actions.isMutating()) return;
+
+    const taskId =
+      event.dataTransfer?.getData("text/task-id") ||
+      event.dataTransfer?.getData("text/plain");
+    const nextStatus = column.dataset.dropStatus;
+    actions.dropTaskStatus(taskId, nextStatus);
+  }
+
+  // ---------------------------------------------------------------------------
+  // Attach
+  // ---------------------------------------------------------------------------
+  rootElement.addEventListener("click", handleClick);
+  rootElement.addEventListener("input", handleInput);
+  rootElement.addEventListener("change", handleChange);
+  rootElement.addEventListener("submit", handleSubmit);
+  rootElement.addEventListener("dragstart", handleDragstart);
+  rootElement.addEventListener("dragover", handleDragover);
+  rootElement.addEventListener("drop", handleDrop);
+  window.addEventListener("keydown", handleKeydown);
+
+  // ---------------------------------------------------------------------------
+  // Teardown
+  // ---------------------------------------------------------------------------
+  return function teardown() {
+    rootElement.removeEventListener("click", handleClick);
+    rootElement.removeEventListener("input", handleInput);
+    rootElement.removeEventListener("change", handleChange);
+    rootElement.removeEventListener("submit", handleSubmit);
+    rootElement.removeEventListener("dragstart", handleDragstart);
+    rootElement.removeEventListener("dragover", handleDragover);
+    rootElement.removeEventListener("drop", handleDrop);
+    window.removeEventListener("keydown", handleKeydown);
+  };
+}