clay-server 4.0.0-beta.2 → 4.0.0-beta.21

package/lib/public/modules/sticky-notes-card.js

@@ -0,0 +1,360 @@
+// One floating sticky-note card: its markup, its drag and resize behaviour, and
+// its header controls (colour, minimize, close, bring to front).
+//
+// The card knows how to build and wire itself. It does not own the board, so it
+// never touches the notes map or the badges; the canvas module holds those and
+// calls renderNote for each note.
+
+import { refreshIcons, iconHtml } from './icons.js';
+import { VENDOR_AVATARS } from './app-rendering.js';
+import { getTitle, renderMiniMarkdown } from './sticky-note-markdown.js';
+import { enhanceClayLogLinks } from './clay-log-links.js';
+import {
+  NOTE_COLORS,
+  isClosedNote,
+  send,
+  clampPos,
+  clampSize,
+  debouncedUpdate,
+} from './sticky-notes-shared.js';
+import { setupTextEdit } from './sticky-notes-editor.js';
+
+var colorPickerEl = null;
+
+// --- Note rendering ---
+
+export function renderNote(data) {
+  var el = document.createElement("div");
+  el.className = "sticky-note";
+  el.dataset.noteId = data.id;
+  var clamped = clampPos(data.x, data.y, data.w, data.h);
+  el.style.left = clamped.x + "px";
+  el.style.top = clamped.y + "px";
+  el.style.width = data.w + "px";
+  el.style.height = data.h + "px";
+  el.style.zIndex = 100 + (data.zIndex || 0);
+  el.dataset.color = data.color || "purple";
+
+  if (data.minimized) el.classList.add("minimized");
+  if (isClosedNote(data)) el.classList.add("hidden");
+
+  // Header
+  var header = document.createElement("div");
+  header.className = "sticky-note-header";
+
+  if (data.origin && VENDOR_AVATARS[data.origin.vendor]) {
+    var originBadge = document.createElement("img");
+    originBadge.className = "sticky-note-agent-badge";
+    originBadge.src = VENDOR_AVATARS[data.origin.vendor];
+    originBadge.alt = "";
+    originBadge.title = "Created by " + data.origin.vendor;
+    header.appendChild(originBadge);
+  }
+
+  var closeBtn = document.createElement("button");
+  closeBtn.className = "sticky-note-btn sticky-note-close";
+  closeBtn.title = "Close";
+  closeBtn.innerHTML = iconHtml("x");
+  header.appendChild(closeBtn);
+
+  var minBtn = document.createElement("button");
+  minBtn.className = "sticky-note-btn sticky-note-min-btn";
+  minBtn.title = data.minimized ? "Expand" : "Minimize";
+  minBtn.innerHTML = data.minimized ? iconHtml("maximize-2") : iconHtml("minus");
+  header.appendChild(minBtn);
+
+  var spacer = document.createElement("div");
+  spacer.className = "sticky-note-spacer";
+  spacer.textContent = getTitle(data.text) || "Untitled";
+  header.appendChild(spacer);
+
+  var addBtn = document.createElement("button");
+  addBtn.className = "sticky-note-btn";
+  addBtn.title = "New note";
+  addBtn.innerHTML = iconHtml("plus");
+  addBtn.addEventListener("click", function (e) {
+    e.stopPropagation();
+    createNote();
+  });
+  header.appendChild(addBtn);
+
+  var colorBtn = document.createElement("button");
+  colorBtn.className = "sticky-note-color-btn";
+  colorBtn.title = "Change color";
+  colorBtn.innerHTML = iconHtml("palette");
+  header.appendChild(colorBtn);
+
+  var mdBtn = document.createElement("button");
+  mdBtn.className = "sticky-note-btn sticky-note-md-btn";
+  mdBtn.title = "Edit markdown";
+  mdBtn.innerHTML = "<span class='sn-md-label'>MD</span>";
+  header.appendChild(mdBtn);
+
+  var opacityWrap = document.createElement("div");
+  opacityWrap.className = "sticky-note-opacity";
+  var opacitySlider = document.createElement("input");
+  opacitySlider.type = "range";
+  opacitySlider.min = "20";
+  opacitySlider.max = "100";
+  opacitySlider.value = String(Math.round((typeof data.opacity === "number" ? data.opacity : 0.64) * 100));
+  opacitySlider.className = "sticky-note-opacity-slider";
+  opacitySlider.title = "Opacity";
+  opacityWrap.appendChild(opacitySlider);
+  header.appendChild(opacityWrap);
+
+  // Apply saved opacity via CSS variable (not element opacity, so header stays visible on hover)
+  if (typeof data.opacity === "number") {
+    el.style.setProperty("--note-opacity", data.opacity);
+  }
+
+  opacitySlider.addEventListener("input", function (e) {
+    e.stopPropagation();
+    var val = parseInt(opacitySlider.value, 10) / 100;
+    el.style.setProperty("--note-opacity", val);
+  });
+  opacitySlider.addEventListener("change", function (e) {
+    e.stopPropagation();
+    var val = parseInt(opacitySlider.value, 10) / 100;
+    el.style.setProperty("--note-opacity", val);
+    debouncedUpdate(data.id, { opacity: val }, 300);
+  });
+  opacitySlider.addEventListener("mousedown", function (e) { e.stopPropagation(); });
+
+  el.appendChild(header);
+
+  // Body
+  var body = document.createElement("div");
+  body.className = "sticky-note-body";
+
+  // Hidden textarea as markdown data store
+  var textarea = document.createElement("textarea");
+  textarea.className = "sticky-note-text";
+  textarea.value = data.text || "";
+  textarea.style.display = "none";
+  body.appendChild(textarea);
+
+  // Contenteditable rendered view (primary editing surface)
+  var rendered = document.createElement("div");
+  rendered.className = "sticky-note-rendered";
+  rendered.contentEditable = "true";
+  rendered.spellcheck = true;
+  if (data.text && data.text.trim()) {
+    rendered.innerHTML = renderMiniMarkdown(data.text);
+    enhanceClayLogLinks(rendered);
+  } else {
+    rendered.classList.add("is-empty");
+  }
+  body.appendChild(rendered);
+
+  el.appendChild(body);
+
+  // Resize handle
+  var resizeHandle = document.createElement("div");
+  resizeHandle.className = "sticky-note-resize";
+  el.appendChild(resizeHandle);
+
+  // --- Event handlers ---
+  setupDrag(el, spacer, data.id);
+  setupResize(el, resizeHandle, data.id);
+  setupTextEdit(textarea, rendered, data.id, mdBtn);
+  setupColorPicker(colorBtn, el, data.id);
+  setupMinimize(minBtn, el, data.id);
+  setupClose(closeBtn, el, data.id);
+  setupBringToFront(el, data.id);
+
+  refreshIcons();
+  return el;
+}
+// --- Drag ---
+
+function setupDrag(noteEl, spacerEl, noteId) {
+  var dragging = false;
+  var pointerId = null;
+  var startX, startY, origX, origY;
+
+  spacerEl.addEventListener("pointerdown", function (e) {
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+    e.preventDefault();
+    dragging = true;
+    pointerId = e.pointerId;
+    startX = e.clientX;
+    startY = e.clientY;
+    origX = parseInt(noteEl.style.left) || 0;
+    origY = parseInt(noteEl.style.top) || 0;
+    noteEl.classList.add("dragging");
+    document.body.classList.add("sticky-note-interacting");
+    spacerEl.setPointerCapture(pointerId);
+  });
+
+  function onMove(e) {
+    if (!dragging || e.pointerId !== pointerId) return;
+    var dx = e.clientX - startX;
+    var dy = e.clientY - startY;
+    var c = clampPos(origX + dx, origY + dy, noteEl.offsetWidth, noteEl.offsetHeight);
+    noteEl.style.left = c.x + "px";
+    noteEl.style.top = c.y + "px";
+  }
+
+  function onUp(e) {
+    if (!dragging || (e && e.pointerId !== pointerId)) return;
+    dragging = false;
+    noteEl.classList.remove("dragging");
+    document.body.classList.remove("sticky-note-interacting");
+    if (pointerId !== null && spacerEl.hasPointerCapture(pointerId)) spacerEl.releasePointerCapture(pointerId);
+    pointerId = null;
+    debouncedUpdate(noteId, {
+      x: parseInt(noteEl.style.left),
+      y: parseInt(noteEl.style.top),
+    }, 200);
+  }
+
+  spacerEl.addEventListener("pointermove", onMove);
+  spacerEl.addEventListener("pointerup", onUp);
+  spacerEl.addEventListener("pointercancel", onUp);
+  spacerEl.addEventListener("lostpointercapture", onUp);
+}
+
+// --- Resize ---
+
+function setupResize(noteEl, handle, noteId) {
+  var resizing = false;
+  var pointerId = null;
+  var startX, startY, origW, origH;
+  var MIN_W = 160;
+  var MIN_H = 80;
+
+  handle.addEventListener("pointerdown", function (e) {
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    resizing = true;
+    pointerId = e.pointerId;
+    startX = e.clientX;
+    startY = e.clientY;
+    origW = noteEl.offsetWidth;
+    origH = noteEl.offsetHeight;
+    noteEl.classList.add("resizing");
+    document.body.classList.add("sticky-note-interacting");
+    handle.setPointerCapture(pointerId);
+  });
+
+  function onMove(e) {
+    if (!resizing || e.pointerId !== pointerId) return;
+    var rawW = Math.max(MIN_W, origW + (e.clientX - startX));
+    var rawH = Math.max(MIN_H, origH + (e.clientY - startY));
+    var cs = clampSize(parseInt(noteEl.style.left) || 0, parseInt(noteEl.style.top) || 0, rawW, rawH);
+    noteEl.style.width = Math.max(MIN_W, cs.w) + "px";
+    noteEl.style.height = Math.max(MIN_H, cs.h) + "px";
+  }
+
+  function onUp(e) {
+    if (!resizing || (e && e.pointerId !== pointerId)) return;
+    resizing = false;
+    noteEl.classList.remove("resizing");
+    document.body.classList.remove("sticky-note-interacting");
+    if (pointerId !== null && handle.hasPointerCapture(pointerId)) handle.releasePointerCapture(pointerId);
+    pointerId = null;
+    debouncedUpdate(noteId, {
+      w: noteEl.offsetWidth,
+      h: noteEl.offsetHeight,
+    }, 200);
+  }
+
+  handle.addEventListener("pointermove", onMove);
+  handle.addEventListener("pointerup", onUp);
+  handle.addEventListener("pointercancel", onUp);
+  handle.addEventListener("lostpointercapture", onUp);
+}
+
+// --- Color picker ---
+
+export function closeColorPicker() {
+  if (colorPickerEl) {
+    colorPickerEl.remove();
+    colorPickerEl = null;
+  }
+}
+
+function setupColorPicker(btn, noteEl, noteId) {
+  btn.addEventListener("click", function (e) {
+    e.stopPropagation();
+    showColorPicker(btn, noteEl, noteId);
+  });
+}
+
+function showColorPicker(anchor, noteEl, noteId) {
+  closeColorPicker();
+
+  var picker = document.createElement("div");
+  picker.className = "sticky-note-color-picker";
+
+  for (var i = 0; i < NOTE_COLORS.length; i++) {
+    (function (color) {
+      var dot = document.createElement("button");
+      dot.className = "sticky-note-color-dot";
+      dot.dataset.color = color;
+      if (noteEl.dataset.color === color) dot.classList.add("active");
+      dot.addEventListener("click", function (e) {
+        e.stopPropagation();
+        noteEl.dataset.color = color;
+        send({ type: "note_update", id: noteId, color: color });
+        closeColorPicker();
+      });
+      picker.appendChild(dot);
+    })(NOTE_COLORS[i]);
+  }
+
+  document.body.appendChild(picker);
+  colorPickerEl = picker;
+
+  // Position relative to anchor
+  var rect = anchor.getBoundingClientRect();
+  picker.style.left = rect.left + "px";
+  picker.style.top = (rect.bottom + 4) + "px";
+
+  // Close on outside click
+  setTimeout(function () {
+    document.addEventListener("click", function closeHandler() {
+      closeColorPicker();
+      document.removeEventListener("click", closeHandler);
+    });
+  }, 0);
+}
+
+// --- Minimize ---
+
+function setupMinimize(btn, noteEl, noteId) {
+  btn.addEventListener("click", function (e) {
+    e.stopPropagation();
+    var isMinimized = noteEl.classList.toggle("minimized");
+    btn.innerHTML = isMinimized ? iconHtml("maximize-2") : iconHtml("minus");
+    btn.title = isMinimized ? "Expand" : "Minimize";
+    refreshIcons();
+    send({ type: "note_update", id: noteId, minimized: isMinimized });
+  });
+}
+
+// --- Close note ---
+//
+// Completing a note closes it. The record is kept and stays reachable in the
+// browser's Closed tab; nothing is ever deleted from this control.
+
+function setupClose(btn, noteEl, noteId) {
+  btn.addEventListener("click", function (e) {
+    e.stopPropagation();
+    noteEl.classList.add("hidden");
+    send({ type: "note_close", id: noteId });
+  });
+}
+
+// --- Bring to front ---
+
+function setupBringToFront(noteEl, noteId) {
+  noteEl.addEventListener("mousedown", function (e) {
+    // Skip bring-to-front when clicking header buttons to avoid
+    // race condition where server response replaces innerHTML
+    // between mousedown and click, causing the click event to be lost
+    if (e.target.closest("button")) return;
+    send({ type: "note_bring_front", id: noteId });
+  });
+}

package/lib/public/modules/sticky-notes-editor.js

@@ -0,0 +1,291 @@
+// Sticky-note text editing: the WYSIWYG format toolbar and the contenteditable
+// surface behind it.
+//
+// Split out of sticky-notes.js to keep every module under the size limit. It
+// owns the toolbar element and nothing else, and depends only on the leaf
+// helpers, so it never has to reach back into the canvas.
+
+import { refreshIcons, iconHtml } from './icons.js';
+import { extractMarkdown, renderMiniMarkdown } from './sticky-note-markdown.js';
+import { enhanceClayLogLinks } from './clay-log-links.js';
+import { debouncedTextUpdate, syncTitle } from './sticky-notes-shared.js';
+
+var formatToolbarEl = null;
+
+// --- Text edit (contenteditable) ---
+
+// --- Format toolbar (WYSIWYG) ---
+
+var FORMAT_BUTTONS = [
+  { label: "B", title: "Bold", cls: "sn-fmt-bold", command: "bold" },
+  { label: "I", title: "Italic", cls: "sn-fmt-italic", command: "italic" },
+  { label: "S", title: "Strikethrough", cls: "sn-fmt-strike", command: "strikethrough" },
+  { label: "code-2", title: "Code", cls: "sn-fmt-code", command: "code", isIcon: true },
+];
+
+// The canvas asks this before deciding an outside click should dismiss the
+// toolbar, so the element itself stays private to this module.
+export function isFormatToolbarOpen() {
+  return !!formatToolbarEl;
+}
+export function closeFormatToolbar() {
+  if (formatToolbarEl) {
+    formatToolbarEl.remove();
+    formatToolbarEl = null;
+  }
+}
+
+function applyFormat(command, rendered) {
+  if (command === "code") {
+    var sel = window.getSelection();
+    if (!sel.rangeCount || sel.isCollapsed) return;
+    var range = sel.getRangeAt(0);
+    var ancestor = range.commonAncestorContainer;
+    var codeParent = (ancestor.nodeType === 3 ? ancestor.parentElement : ancestor);
+    if (codeParent && codeParent.closest && codeParent.closest("code")) {
+      // Unwrap: replace <code> with its text content
+      var codeEl = codeParent.closest("code");
+      var textNode = document.createTextNode(codeEl.textContent);
+      codeEl.parentNode.replaceChild(textNode, codeEl);
+      var newRange = document.createRange();
+      newRange.selectNodeContents(textNode);
+      sel.removeAllRanges();
+      sel.addRange(newRange);
+    } else {
+      // Wrap selection in <code>
+      var code = document.createElement("code");
+      try { range.surroundContents(code); } catch (e) {
+        var frag = range.extractContents();
+        code.appendChild(frag);
+        range.insertNode(code);
+      }
+    }
+  } else {
+    document.execCommand(command, false, null);
+  }
+  // Trigger sync
+  rendered.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function showFormatToolbar(rendered) {
+  closeFormatToolbar();
+
+  var sel = window.getSelection();
+  if (!sel || !sel.rangeCount || sel.isCollapsed) return;
+  if (!sel.toString().trim()) return;
+
+  var range = sel.getRangeAt(0);
+  // When dragging outside the note, commonAncestorContainer may be a parent
+  // of rendered. Clamp the range to the rendered element so the toolbar shows.
+  if (!rendered.contains(range.commonAncestorContainer)) {
+    try {
+      var clampedRange = range.cloneRange();
+      if (range.startContainer === rendered || rendered.contains(range.startContainer)) {
+        clampedRange.selectNodeContents(rendered);
+        clampedRange.setStart(range.startContainer, range.startOffset);
+      } else if (range.endContainer === rendered || rendered.contains(range.endContainer)) {
+        clampedRange.selectNodeContents(rendered);
+        clampedRange.setEnd(range.endContainer, range.endOffset);
+      } else {
+        return;
+      }
+      range = clampedRange;
+    } catch (e) {
+      return;
+    }
+  }
+
+  var toolbar = document.createElement("div");
+  toolbar.className = "sn-format-toolbar";
+
+  for (var i = 0; i < FORMAT_BUTTONS.length; i++) {
+    (function (cfg) {
+      var btn = document.createElement("button");
+      btn.className = "sn-fmt-btn " + cfg.cls;
+      btn.title = cfg.title;
+      btn.innerHTML = cfg.isIcon ? iconHtml(cfg.label) : cfg.label;
+      btn.addEventListener("mousedown", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        applyFormat(cfg.command, rendered);
+        setTimeout(function () {
+          var s = window.getSelection();
+          if (s && !s.isCollapsed) {
+            showFormatToolbar(rendered);
+          } else {
+            closeFormatToolbar();
+          }
+        }, 0);
+      });
+      toolbar.appendChild(btn);
+    })(FORMAT_BUTTONS[i]);
+  }
+
+  refreshIcons();
+  document.body.appendChild(toolbar);
+  formatToolbarEl = toolbar;
+  positionToolbarAtRange(toolbar, range);
+}
+
+function positionToolbarAtRange(toolbar, range) {
+  var rect = range.getBoundingClientRect();
+  var toolbarX = rect.left + rect.width / 2;
+  var toolbarY = rect.top - 4;
+
+  toolbar.style.left = toolbarX + "px";
+  toolbar.style.top = toolbarY + "px";
+
+  requestAnimationFrame(function () {
+    var tw = toolbar.offsetWidth;
+    var th = toolbar.offsetHeight;
+    var x = Math.max(8, Math.min(toolbarX - tw / 2, window.innerWidth - tw - 8));
+    var y = Math.max(8, toolbarY - th);
+    toolbar.style.left = x + "px";
+    toolbar.style.top = y + "px";
+  });
+}
+
+export function setupTextEdit(textarea, rendered, noteId, mdBtn) {
+  var noteEl = textarea.closest(".sticky-note");
+  var mdMode = false;
+
+  function saveRenderedMarkdown() {
+    var markdown = extractMarkdown(rendered);
+    textarea.value = markdown;
+    debouncedTextUpdate(noteId, markdown);
+    syncTitle(noteEl, markdown);
+    rendered.classList.toggle("is-empty", !markdown.trim());
+  }
+
+  function toggleChecklistItem(check) {
+    var checked = !check.classList.contains("checked");
+    check.classList.toggle("checked", checked);
+    check.textContent = checked ? "✓" : "☐";
+    check.setAttribute("aria-checked", checked ? "true" : "false");
+    saveRenderedMarkdown();
+  }
+
+  // MD button: toggle between contenteditable rendered view and raw textarea
+  mdBtn.addEventListener("click", function (e) {
+    e.stopPropagation();
+    mdMode = !mdMode;
+    if (mdMode) {
+      // Switch to raw markdown editing
+      var md = extractMarkdown(rendered);
+      textarea.value = md;
+      textarea.style.display = "";
+      rendered.style.display = "none";
+      mdBtn.classList.add("active");
+      textarea.focus();
+    } else {
+      // Switch back to contenteditable rendered view
+      var md = textarea.value;
+      debouncedTextUpdate(noteId, md);
+      syncTitle(noteEl, md);
+      if (md.trim()) {
+        rendered.innerHTML = renderMiniMarkdown(md);
+        enhanceClayLogLinks(rendered);
+        rendered.classList.remove("is-empty");
+      } else {
+        rendered.innerHTML = "";
+        rendered.classList.add("is-empty");
+      }
+      textarea.style.display = "none";
+      rendered.style.display = "";
+      mdBtn.classList.remove("active");
+      rendered.focus();
+    }
+  });
+
+  // Sync contenteditable changes to textarea (data store) and save
+  rendered.addEventListener("input", function () {
+    saveRenderedMarkdown();
+  });
+
+  rendered.addEventListener("click", function (e) {
+    var check = e.target.closest && e.target.closest(".sn-check");
+    if (!check || !rendered.contains(check)) return;
+    e.preventDefault();
+    e.stopPropagation();
+    toggleChecklistItem(check);
+  });
+
+  // On blur, re-render to normalize HTML structure
+  rendered.addEventListener("blur", function (e) {
+    // Don't re-render if clicking format toolbar (it prevents default, but just in case)
+    if (e.relatedTarget && e.relatedTarget.closest && e.relatedTarget.closest(".sn-format-toolbar")) return;
+    closeFormatToolbar();
+    var md = extractMarkdown(rendered);
+    textarea.value = md;
+    if (md.trim()) {
+      rendered.innerHTML = renderMiniMarkdown(md);
+      enhanceClayLogLinks(rendered);
+      rendered.classList.remove("is-empty");
+    } else {
+      rendered.innerHTML = "";
+      rendered.classList.add("is-empty");
+    }
+  });
+
+  // Show format toolbar when selecting text
+  rendered.addEventListener("mouseup", function (e) {
+    if (e.target.tagName === "A") return;
+    setTimeout(function () {
+      var sel = window.getSelection();
+      if (sel && !sel.isCollapsed && sel.toString().trim()) {
+        showFormatToolbar(rendered);
+      } else {
+        closeFormatToolbar();
+      }
+    }, 10);
+  });
+
+  // Keyboard selection
+  rendered.addEventListener("keyup", function (e) {
+    if (e.shiftKey || e.key === "Shift") {
+      var sel = window.getSelection();
+      if (sel && !sel.isCollapsed) {
+        showFormatToolbar(rendered);
+      } else {
+        closeFormatToolbar();
+      }
+    }
+  });
+
+  // Insert <br> on Enter instead of <div>
+  rendered.addEventListener("keydown", function (e) {
+    if (e.target.classList && e.target.classList.contains("sn-check") &&
+        (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      toggleChecklistItem(e.target);
+      return;
+    }
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      document.execCommand("insertLineBreak");
+    }
+  });
+
+  // Paste as plain text to avoid importing HTML formatting
+  rendered.addEventListener("paste", function (e) {
+    e.preventDefault();
+    var text = (e.clipboardData || window.clipboardData).getData("text/plain");
+    document.execCommand("insertText", false, text);
+  });
+
+  // Prevent drag when clicking body
+  rendered.addEventListener("mousedown", function (e) {
+    e.stopPropagation();
+  });
+
+  // Sync textarea edits when in MD mode
+  textarea.addEventListener("input", function () {
+    if (!mdMode) return;
+    debouncedTextUpdate(noteId, textarea.value);
+    syncTitle(noteEl, textarea.value);
+  });
+
+  textarea.addEventListener("mousedown", function (e) {
+    e.stopPropagation();
+  });
+}