trekoon 0.2.8 → 0.3.0

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

@@ -0,0 +1,261 @@
+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 renderCopyIcon(className = "") {
+  return `
+    <svg class="${cx("board-inline-icon", className)}" aria-hidden="true" viewBox="0 0 16 16" fill="none">
+      <rect x="5" y="2.75" width="7" height="9" rx="1.5" stroke="currentColor" stroke-width="1.35"></rect>
+      <path d="M4 5.75H3.5C2.67157 5.75 2 6.42157 2 7.25V12C2 12.8284 2.67157 13.5 3.5 13.5H8.25C9.07843 13.5 9.75 12.8284 9.75 12V11.5" stroke="currentColor" stroke-width="1.35" stroke-linecap="round" stroke-linejoin="round"></path>
+    </svg>
+  `;
+}
+
+export function renderCheckIcon(className = "") {
+  return `
+    <svg class="${cx("board-inline-icon", className)}" aria-hidden="true" viewBox="0 0 16 16" fill="none">
+      <path d="M3.5 8.4L6.4 11.1L12.5 4.9" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"></path>
+    </svg>
+  `;
+}
+
+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

@@ -3,72 +3,35 @@
   <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="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Material+Symbols+Rounded:FILL@0&display=swap"
-    />
-    <script>
-      tailwind = window.tailwind || {};
-      tailwind.config = {
-        theme: {
-          extend: {
-            fontFamily: {
-              sans: ["Inter", "ui-sans-serif", "system-ui", "sans-serif"],
-            },
-            boxShadow: {
-              panel: "var(--board-shadow)",
-              lift: "0 18px 52px rgba(0, 0, 0, 0.34)",
-              focus: "0 0 0 1px var(--board-border-strong), 0 16px 40px rgba(88, 28, 135, 0.2)",
-            },
-          },
-        },
-      };
-    </script>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="./styles/fonts.css" />
     <link rel="stylesheet" href="./styles/board.css" />
-    <style>
-      .material-symbols-rounded {
-        font-family: "Material Symbols Rounded";
-        font-weight: 400;
-        font-style: normal;
-        font-size: 20px;
-        line-height: 1;
-        letter-spacing: normal;
-        text-transform: none;
-        display: inline-block;
-        white-space: nowrap;
-        direction: ltr;
-        font-variation-settings:
-          "FILL" 0,
-          "wght" 400,
-          "GRAD" 0,
-          "opsz" 20;
-      }
-    </style>
   </head>
   <body>
-    <main id="app" aria-live="polite" class="min-h-screen">
-      <section class="mx-auto flex min-h-screen max-w-4xl items-center justify-center px-4 py-10 sm:px-6">
-        <div class="w-full rounded-[32px] border border-[var(--board-border)] bg-[var(--board-surface)]/95 p-8 text-center shadow-panel backdrop-blur-xl">
-          <div class="mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-[var(--board-accent-soft)] text-[var(--board-accent)] ring-1 ring-[var(--board-border-strong)]">
-            <span class="material-symbols-rounded" aria-hidden="true">rocket_launch</span>
-          </div>
-          <div class="mb-3 inline-flex items-center gap-2 rounded-full border border-[var(--board-border)] bg-white/5 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--board-text-soft)]">
-            Trekoon board
+    <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>
-          <h1 class="text-3xl font-semibold tracking-tight text-[var(--board-text)]">Preparing your local workspace…</h1>
-          <p class="mx-auto mt-3 max-w-2xl text-sm leading-6 text-[var(--board-text-muted)] sm:text-base">
-            Loading epics, tasks, and saved board context from your repo-shared storage.
-          </p>
-        </div>
-      </section>
+        </section>
+      </div>
     </main>
 
     <script type="module" src="./main.js"></script>

package/src/board/assets/main.js

@@ -1,20 +1,6 @@
-import { createApp, nextTick } from "https://unpkg.com/vue@3.5.13/dist/vue.esm-browser.js";
-
-import { createBoardShellComponent } from "./components/AppShell.js";
-
 window.__TREKOON_BOARD_BOOTSTRAP__ = "main";
 
-const appRoot = document.querySelector("#app");
-
-if (!(appRoot instanceof HTMLElement)) {
-  throw new Error("Board shell could not find the app root.");
-}
-
-const shellApp = createApp(createBoardShellComponent());
-shellApp.mount(appRoot);
-await nextTick();
-
-const runtimeRoot = appRoot.querySelector("[data-board-runtime-root]");
+const runtimeRoot = document.querySelector("[data-board-runtime-root]");
 
 if (!(runtimeRoot instanceof HTMLElement)) {
   throw new Error("Board shell could not find the runtime mount root.");
@@ -22,6 +8,4 @@ if (!(runtimeRoot instanceof HTMLElement)) {
 
 const { bootLegacyBoard } = await import("./app.js");
 
-await bootLegacyBoard({
-  mountElement: runtimeRoot,
-});
+await bootLegacyBoard({ mountElement: runtimeRoot });

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

@@ -0,0 +1,34 @@
+export async function copyTextToClipboard(value) {
+  const text = typeof value === "string" ? value : String(value ?? "");
+
+  if (!text) {
+    throw new Error("Clipboard text is empty.");
+  }
+
+  if (navigator?.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "true");
+  textarea.setAttribute("aria-hidden", "true");
+  textarea.style.position = "fixed";
+  textarea.style.top = "0";
+  textarea.style.left = "0";
+  textarea.style.opacity = "0";
+  textarea.style.pointerEvents = "none";
+
+  document.body.append(textarea);
+  textarea.focus({ preventScroll: true });
+  textarea.select();
+  textarea.setSelectionRange(0, text.length);
+
+  const didCopy = document.execCommand("copy");
+  textarea.remove();
+
+  if (!didCopy) {
+    throw new Error("Clipboard API unavailable.");
+  }
+}