trekoon 0.2.7 → 0.2.9

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

@@ -0,0 +1,271 @@
+/**
+ * Base component utilities for the board UI.
+ *
+ * Each component is a factory function returning { mount, update, unmount }.
+ * - mount(container) binds the component to a DOM element.
+ * - update(props)    renders or patches DOM based on new props.
+ * - unmount()        cleans up and removes content.
+ */
+
+/**
+ * Save and restore the value + cursor of an input or textarea across a DOM write.
+ *
+ * @param {HTMLElement} container
+ * @param {string}      selector  CSS selector for the input element
+ * @param {() => void}  writeFn   Function that mutates the DOM
+ */
+export function preserveInput(container, selector, writeFn) {
+  const input = container.querySelector(selector);
+  const state = input
+    ? {
+        value: input.value,
+        selectionStart: input.selectionStart,
+        selectionEnd: input.selectionEnd,
+        focused: document.activeElement === input,
+      }
+    : null;
+
+  writeFn();
+
+  if (state) {
+    const restored = container.querySelector(selector);
+    if (restored) {
+      restored.value = state.value;
+      if (state.focused) {
+        restored.focus({ preventScroll: true });
+        try {
+          restored.setSelectionRange(state.selectionStart, state.selectionEnd);
+        } catch {
+          // setSelectionRange not supported on all input types
+        }
+      }
+    }
+  }
+}
+
+const FORM_ROOT_SELECTOR = [
+  "form",
+  "[data-form-id]",
+  "[data-task-form]",
+  "[data-subtask-form]",
+  "[data-create-subtask-form]",
+  "[data-dependency-form]",
+].join(", ");
+
+function getFormRoot(el) {
+  if (!el) return null;
+  return el.matches(FORM_ROOT_SELECTOR) ? el : el.closest(FORM_ROOT_SELECTOR);
+}
+
+function getNamespacedFormIdentity(form) {
+  if (!form) return "default-form";
+  if (form.hasAttribute("data-form-id")) {
+    return `form:${form.getAttribute("data-form-id")}`;
+  }
+  if (form.hasAttribute("data-task-form")) {
+    return `task:${form.getAttribute("data-task-form")}`;
+  }
+  if (form.hasAttribute("data-subtask-form")) {
+    return `subtask:${form.getAttribute("data-subtask-form")}`;
+  }
+  if (form.hasAttribute("data-create-subtask-form")) {
+    return `create-subtask:${form.getAttribute("data-create-subtask-form")}`;
+  }
+  if (form.hasAttribute("data-dependency-form")) {
+    return `dependency:${form.getAttribute("data-dependency-form")}`;
+  }
+  if (form.id) {
+    return `id:${form.id}`;
+  }
+  return "anonymous-form";
+}
+
+function getManagedControls(root) {
+  return Array.from(root.querySelectorAll("input, textarea, select"));
+}
+
+function getControlIdentity(el, form) {
+  const controlKey = el.getAttribute("data-control-id");
+  if (controlKey) {
+    return `control:${controlKey}`;
+  }
+
+  if (el.id) {
+    return `id:${el.id}`;
+  }
+
+  const name = el.getAttribute("name");
+  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 index = peers.indexOf(el);
+    return `name:${name}:${type}:${index}`;
+  }
+
+  const index = getManagedControls(form).indexOf(el);
+  return `index:${index}:${el.tagName.toLowerCase()}`;
+}
+
+function captureSelection(el) {
+  if (typeof el.selectionStart !== "number") {
+    return { selectionStart: null, selectionEnd: null };
+  }
+
+  return {
+    selectionStart: el.selectionStart,
+    selectionEnd: el.selectionEnd,
+  };
+}
+
+function restoreSelection(el, selectionStart, selectionEnd) {
+  if (typeof selectionStart !== "number") {
+    return;
+  }
+
+  try {
+    el.setSelectionRange(selectionStart, selectionEnd ?? selectionStart);
+  } catch {
+    // setSelectionRange is not supported on all controls
+  }
+}
+
+/**
+ * Capture the full state of every form input inside a container, execute a DOM
+ * write, then restore all captured values and focus.
+ *
+ * It uses a hierarchical identity (closest [data-form-id] or [data-task-form] etc.
+ * plus the input name/id) to ensure correct restoration even when multiple
+ * forms with similar field names exist in the same container.
+ *
+ * @param {HTMLElement} container
+ * @param {() => void}  writeFn
+ */
+export function preserveFormState(container, writeFn, options = {}) {
+  const resetFormIds = new Set(options.resetFormIds ?? []);
+  const inputs = getManagedControls(container);
+
+  const activeElement = document.activeElement;
+  let focusedIdentity = null;
+
+  const savedStates = inputs.map((el) => {
+    const form = getFormRoot(el);
+    const formId = getNamespacedFormIdentity(form);
+    const controlId = form ? getControlIdentity(el, form) : null;
+    const identity = controlId ? { formId, controlId } : null;
+
+    if (activeElement === el) {
+      focusedIdentity = identity;
+    }
+
+    const { selectionStart, selectionEnd } = captureSelection(el);
+
+    return {
+      identity,
+      value: el.value,
+      selectionStart,
+      selectionEnd,
+    };
+  }).filter(s => s.identity);
+
+  writeFn();
+
+  const formsByIdentity = new Map(
+    Array.from(container.querySelectorAll(FORM_ROOT_SELECTOR)).map((form) => [
+      getNamespacedFormIdentity(form),
+      form,
+    ]),
+  );
+
+  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);
+    if (restored && restored.value !== state.value) {
+      restored.value = state.value;
+    }
+
+    if (restored && activeElement === container.ownerDocument?.body) {
+      restoreSelection(restored, state.selectionStart, state.selectionEnd);
+    }
+  }
+
+  if (focusedIdentity) {
+    const { formId, controlId } = focusedIdentity;
+    if (resetFormIds.has(formId)) {
+      return;
+    }
+    const form = formsByIdentity.get(formId) ?? container;
+    const restored = getManagedControls(form).find((control) => getControlIdentity(control, form) === controlId);
+    if (restored) {
+      restored.focus({ preventScroll: true });
+      const focusedState = savedStates.find((state) => state.identity?.formId === formId && state.identity?.controlId === controlId);
+      if (focusedState) {
+        restoreSelection(restored, focusedState.selectionStart, focusedState.selectionEnd);
+      }
+    }
+  }
+}
+
+/**
+ * Capture open/closed state of all `<details>` elements and restore after a DOM write.
+ *
+ * @param {HTMLElement} container
+ * @param {() => void}  writeFn
+ */
+export function preserveDetailsState(container, writeFn) {
+  const details = Array.from(container.querySelectorAll("details"));
+  const openStates = details.map((el, i) => ({
+    index: i,
+    open: el.open,
+  }));
+
+  writeFn();
+
+  const newDetails = Array.from(container.querySelectorAll("details"));
+  for (const state of openStates) {
+    const target = newDetails[state.index];
+    if (target && target.open !== state.open) {
+      target.open = state.open;
+    }
+  }
+}
+
+/**
+ * Create a simple component from a render function.
+ * Replaces innerHTML on every update. Suitable for components that don't
+ * contain user-editable inputs.
+ *
+ * @param {(props: object) => string} renderFn
+ * @returns {{ mount: (el: HTMLElement) => object, update: (props: object) => void, unmount: () => void }}
+ */
+export function createSimpleComponent(renderFn) {
+  let container = null;
+  let lastHtml = null;
+
+  const component = {
+    mount(el) {
+      container = el;
+      lastHtml = null;
+      return component;
+    },
+    update(props) {
+      if (!container) return;
+      const html = renderFn(props);
+      if (html !== lastHtml) {
+        container.innerHTML = html;
+        lastHtml = html;
+      }
+    },
+    unmount() {
+      if (container) container.innerHTML = "";
+      container = null;
+      lastHtml = null;
+    },
+  };
+
+  return component;
+}

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

@@ -0,0 +1,81 @@
+import {
+  buttonClasses,
+  escapeHtml,
+  panelClasses,
+  renderIcon,
+  sectionLabelClasses,
+} from "./helpers.js";
+
+/**
+ * ConfirmDialog component — modal for destructive actions.
+ * Shows confirmation with cancel/confirm buttons before executing.
+ */
+export function createConfirmDialog() {
+  let container = null;
+  let lastProps = null;
+
+  return {
+    mount(el) {
+      container = el;
+      return this;
+    },
+
+    /**
+     * @param {{
+     *   open: boolean,
+     *   title?: string,
+     *   message?: string,
+     *   confirmLabel?: string,
+     *   cancelLabel?: string,
+     *   tone?: string,
+     * } | null} props
+     */
+    update(props) {
+      if (!container) return;
+
+      if (!props || !props.open) {
+        if (lastProps?.open) {
+          container.innerHTML = "";
+        }
+        lastProps = props;
+        return;
+      }
+
+      const {
+        title = "Confirm action",
+        message = "This action cannot be undone. Are you sure?",
+        confirmLabel = "Confirm",
+        cancelLabel = "Cancel",
+        tone = "destructive",
+      } = props;
+
+      container.innerHTML = `
+        <div class="board-confirm-backdrop fixed inset-0 z-50 grid place-items-center bg-slate-950/70 p-4 backdrop-blur-md" data-close-confirm role="presentation">
+          <section class="${panelClasses("w-full max-w-md p-6")}" role="alertdialog" aria-modal="true" aria-labelledby="confirm-dialog-title" aria-describedby="confirm-dialog-desc" data-overlay-root tabindex="-1">
+            <div class="flex items-start gap-4">
+              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-red-500/10 text-red-300 ring-1 ring-red-500/20">
+                ${renderIcon("warning", "text-[20px]")}
+              </div>
+              <div class="min-w-0">
+                <p class="${sectionLabelClasses()}">Destructive action</p>
+                <h3 id="confirm-dialog-title" class="mt-2 text-lg font-semibold text-[var(--board-text)]">${escapeHtml(title)}</h3>
+                <p id="confirm-dialog-desc" class="mt-2 text-sm leading-6 text-[var(--board-text-muted)]">${escapeHtml(message)}</p>
+              </div>
+            </div>
+            <div class="mt-6 flex justify-end gap-3">
+              <button type="button" class="${buttonClasses()}" data-action="cancel-delete" data-overlay-initial-focus>${escapeHtml(cancelLabel)}</button>
+              <button type="button" class="${buttonClasses({ kind: "primary" })} ${tone === "destructive" ? "board-button--destructive" : ""}" data-action="confirm-delete">${escapeHtml(confirmLabel)}</button>
+            </div>
+          </section>
+        </div>
+      `;
+      lastProps = props;
+    },
+
+    unmount() {
+      if (container) container.innerHTML = "";
+      container = null;
+      lastProps = null;
+    },
+  };
+}

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

@@ -0,0 +1,64 @@
+import {
+  escapeHtml,
+  formatDate,
+  neutralChipClasses,
+  renderIcon,
+  renderStatusBadge,
+} from "./helpers.js";
+
+/**
+ * Render a single epic row for the overview table.
+ *
+ * @param {object} props
+ * @param {object} props.epic
+ * @param {boolean} [props.selected]
+ * @returns {string}
+ */
+export function renderEpicRow(props) {
+  const { epic, selected = false } = props;
+
+  const totalTasks = Array.isArray(epic.taskIds) ? epic.taskIds.length : 0;
+  const counts = epic.counts || { blocked: 0, done: 0, in_progress: 0 };
+  const statusLabel = String(epic.status ?? "todo").replace(/_/g, " ");
+  const openLabel = `Open epic ${epic.title}`;
+  const tooltip = `${openLabel}. ${totalTasks} task${totalTasks === 1 ? "" : "s"}.`;
+  const descriptionMarkup = epic.description?.trim()
+    ? `<p class="board-epic-row__description text-sm text-[var(--board-text-muted)] board-clamped-text__preview board-clamped-text__preview--2">${escapeHtml(epic.description.trim())}</p>`
+    : "";
+
+  return `
+    <button
+      type="button"
+      class="board-epic-row ${selected ? "board-epic-row--selected" : ""}"
+      aria-current="${selected}"
+      aria-label="${escapeHtml(`${openLabel}. ${totalTasks} tasks. Status ${statusLabel}.`)}"
+      title="${escapeHtml(tooltip)}"
+      data-open-epic="${escapeHtml(epic.id)}"
+    >
+      <span class="board-epic-row__summary">
+        <span class="board-epic-row__title-row">
+          <span class="${neutralChipClasses()}">${escapeHtml(epic.id)}</span>
+          <strong class="board-epic-row__title">${escapeHtml(epic.title)}</strong>
+        </span>
+        ${descriptionMarkup}
+      </span>
+      <span class="board-epic-row__status">${renderStatusBadge(epic.status ?? "todo")}</span>
+      <span class="board-epic-row__counts" aria-label="Epic progress counts">
+        <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>
+        ${(counts.blocked ?? 0) > 0 ? `<span class="${neutralChipClasses()}">${counts.blocked} blocked</span>` : ""}
+      </span>
+      <span class="board-epic-row__updated">
+        <span class="board-epic-row__label">Updated</span>
+        <span>${escapeHtml(formatDate(epic.updatedAt))}</span>
+      </span>
+      <span class="board-epic-row__action-wrap" aria-hidden="true">
+        <span class="board-epic-row__action">
+          <span>View</span>
+          ${renderIcon("chevron_right", "text-[16px]")}
+        </span>
+      </span>
+    </button>
+  `;
+}

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

@@ -0,0 +1,80 @@
+import { renderEpicRow } from "./EpicRow.js";
+import {
+  panelClasses,
+  renderEmptyState,
+  sectionLabelClasses,
+} from "./helpers.js";
+
+/**
+ * Render the epics overview HTML.
+ *
+ * @param {object} props
+ * @param {object[]} props.visibleEpics
+ * @param {string|null} props.selectedEpicId
+ * @param {{ snapshot: object, isMutating: boolean }} props.store
+ * @returns {string}
+ */
+function render(props) {
+  const { visibleEpics, selectedEpicId, store } = props;
+
+  return `
+    <div class="board-root board-root--epics">
+      <section class="board-overview ${panelClasses("board-overview--dense p-4 sm:p-5")}" aria-label="Epics overview">
+        <header class="board-section-head board-overview__header">
+          <div>
+            <span class="${sectionLabelClasses()}">Epics overview</span>
+            <h2 class="board-overview__title">Open an initiative and drive the next move</h2>
+            <p class="board-overview__summary">Each card is the entry point, so status, task counts, and freshness stay visible at a glance.</p>
+          </div>
+          <div class="board-legend board-overview__legend">
+            <span class="board-chip board-chip--neutral">${visibleEpics.length} visible epic${visibleEpics.length === 1 ? "" : "s"}</span>
+            <span class="board-chip board-chip--neutral">${store.snapshot.tasks.length} total tasks</span>
+            ${store.isMutating ? '<span class="board-chip board-chip--neutral">Saving\u2026</span>' : ""}
+          </div>
+        </header>
+        <div class="board-table board-table--epics">
+          <div class="board-table__header board-table__header--epics hidden md:grid">
+            <span>Epic</span>
+            <span>Status</span>
+            <span>Counts</span>
+            <span>Updated</span>
+            <span>Action</span>
+          </div>
+          <div class="board-table__rows board-table__rows--epics">
+            ${visibleEpics.length === 0
+              ? renderEmptyState("No matching epics", "Try a different search or publish more work to the board.", "/")
+              : visibleEpics.map((epic) => renderEpicRow({ epic, selected: selectedEpicId === epic.id })).join("")}
+          </div>
+        </div>
+      </section>
+    </div>
+  `;
+}
+
+/**
+ * EpicsOverview component with mount/update/unmount lifecycle.
+ */
+export function createEpicsOverview() {
+  let container = null;
+  let lastHtml = null;
+
+  return {
+    mount(el) {
+      container = el;
+      return this;
+    },
+    update(props) {
+      if (!container) return;
+      const html = render(props);
+      if (html !== lastHtml) {
+        container.innerHTML = html;
+        lastHtml = html;
+      }
+    },
+    unmount() {
+      if (container) container.innerHTML = "";
+      container = null;
+      lastHtml = null;
+    },
+  };
+}