slides-grab 1.0.0

package/src/editor/js/editor-init.js

@@ -0,0 +1,284 @@
+// editor-init.js — Entry point: imports, event bindings, init()
+
+import { state, TOOL_MODE_DRAW, TOOL_MODE_SELECT } from './editor-state.js';
+import {
+  btnPrev, btnNext, slideIframe, drawLayer, promptInput, modelSelect,
+  btnSend, btnClearBboxes, slideCounter,
+  toggleBold, toggleItalic, toggleUnderline, toggleStrike,
+  alignLeft, alignCenter, alignRight,
+  popoverTextInput, popoverApplyText, popoverTextColorInput, popoverBgColorInput,
+  popoverSizeInput, popoverApplySize, toolModeDrawBtn, toolModeSelectBtn,
+} from './editor-dom.js';
+import {
+  currentSlideFile, getSlideState, normalizeModelName, setStatus,
+  saveSelectedModel, loadModelOptions, clamp,
+} from './editor-utils.js';
+import { renderChatMessages } from './editor-chat.js';
+import {
+  onBboxChange, renderBboxes, scaleSlide, startDrawing, moveDrawing, endDrawing,
+  clearBboxesForCurrentSlide, initBboxLayerEvents, getXPath,
+} from './editor-bbox.js';
+import {
+  setToolMode, updateToolModeUI, renderObjectSelection, updateObjectEditorControls,
+  getSelectedObjectElement, setSelectedObjectXPath, updateHoveredObjectFromPointer,
+  clearHoveredObject, getSelectableTargetAt, readSelectedObjectStyleState,
+} from './editor-select.js';
+import {
+  mutateSelectedObject, applyTextDecorationToken,
+} from './editor-direct-edit.js';
+import { updateSendState, applyChanges } from './editor-send.js';
+import { goToSlide } from './editor-navigation.js';
+import { connectSSE, loadRunsInitial } from './editor-sse.js';
+
+// Late-binding: connect bbox changes to updateSendState
+onBboxChange(updateSendState);
+
+// Bbox layer events
+initBboxLayerEvents();
+
+// Navigation
+btnPrev.addEventListener('click', () => { void goToSlide(state.currentIndex - 1); });
+btnNext.addEventListener('click', () => { void goToSlide(state.currentIndex + 1); });
+
+// Tool modes
+toolModeDrawBtn.addEventListener('click', () => setToolMode(TOOL_MODE_DRAW));
+toolModeSelectBtn.addEventListener('click', () => setToolMode(TOOL_MODE_SELECT));
+
+// Clear bboxes
+btnClearBboxes.addEventListener('click', clearBboxesForCurrentSlide);
+
+// Drawing
+drawLayer.addEventListener('mousedown', startDrawing);
+drawLayer.addEventListener('mousemove', (event) => {
+  if (state.toolMode !== TOOL_MODE_SELECT) return;
+  updateHoveredObjectFromPointer(event.clientX, event.clientY);
+});
+drawLayer.addEventListener('mouseleave', clearHoveredObject);
+drawLayer.addEventListener('click', (event) => {
+  if (state.toolMode !== TOOL_MODE_SELECT) return;
+  const target = getSelectableTargetAt(event.clientX, event.clientY);
+  if (!target) {
+    setSelectedObjectXPath('', 'No selectable object at this point.');
+    return;
+  }
+
+  const xpath = getXPath(target);
+  setSelectedObjectXPath(xpath, `Object selected on ${currentSlideFile()}.`);
+});
+window.addEventListener('mousemove', moveDrawing);
+window.addEventListener('mouseup', endDrawing);
+
+// Send
+btnSend.addEventListener('click', applyChanges);
+
+// Model select
+modelSelect.addEventListener('change', () => {
+  const nextModel = normalizeModelName(modelSelect.value);
+  if (!state.availableModels.includes(nextModel)) {
+    modelSelect.value = state.selectedModel;
+    return;
+  }
+
+  const slide = currentSlideFile();
+  if (slide) {
+    const ss = getSlideState(slide);
+    ss.model = nextModel;
+  }
+  state.selectedModel = nextModel;
+  state.defaultModel = nextModel;
+  saveSelectedModel(state.selectedModel);
+  updateSendState();
+  setStatus(`Model selected: ${state.selectedModel}`);
+});
+
+// Prompt input
+promptInput.addEventListener('input', () => {
+  const slide = currentSlideFile();
+  if (slide) {
+    const ss = getSlideState(slide);
+    ss.prompt = promptInput.value;
+  }
+  updateSendState();
+});
+
+// Text editing
+popoverApplyText.addEventListener('click', () => {
+  if (popoverApplyText.disabled) return;
+  mutateSelectedObject((el) => {
+    const escaped = popoverTextInput.value
+      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    el.innerHTML = escaped.replace(/\n/g, '<br>');
+  }, 'Object text updated and saved.', { delay: 120 });
+});
+
+popoverApplySize.addEventListener('click', () => {
+  if (popoverApplySize.disabled) return;
+  const size = clamp(Number.parseInt(popoverSizeInput.value || '24', 10) || 24, 8, 180);
+  mutateSelectedObject((el) => {
+    el.style.fontSize = `${size}px`;
+  }, 'Object font size updated and saved.');
+});
+
+popoverTextInput.addEventListener('keydown', (event) => {
+  if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+    event.preventDefault();
+    event.stopPropagation();
+    popoverApplyText.click();
+  }
+});
+
+popoverSizeInput.addEventListener('keydown', (event) => {
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    event.stopPropagation();
+    popoverApplySize.click();
+  }
+});
+
+popoverTextColorInput.addEventListener('input', () => {
+  if (popoverTextColorInput.disabled) return;
+  mutateSelectedObject((el) => {
+    el.style.color = popoverTextColorInput.value;
+  }, 'Text color updated.', { delay: 300 });
+});
+
+popoverBgColorInput.addEventListener('input', () => {
+  if (popoverBgColorInput.disabled) return;
+  mutateSelectedObject((el) => {
+    el.style.backgroundColor = popoverBgColorInput.value;
+  }, 'Background color updated.', { delay: 300 });
+});
+
+// Style toggles
+toggleBold.addEventListener('click', () => {
+  mutateSelectedObject((el) => {
+    const nextBold = !readSelectedObjectStyleState(el).bold;
+    el.style.fontWeight = nextBold ? '700' : '400';
+  }, 'Object font weight updated and saved.');
+});
+
+toggleItalic.addEventListener('click', () => {
+  mutateSelectedObject((el) => {
+    const nextItalic = !readSelectedObjectStyleState(el).italic;
+    el.style.fontStyle = nextItalic ? 'italic' : 'normal';
+  }, 'Object font style updated and saved.');
+});
+
+toggleUnderline.addEventListener('click', () => {
+  mutateSelectedObject((el) => {
+    const nextUnderline = !readSelectedObjectStyleState(el).underline;
+    applyTextDecorationToken(el, 'underline', nextUnderline);
+  }, 'Object underline updated and saved.');
+});
+
+toggleStrike.addEventListener('click', () => {
+  mutateSelectedObject((el) => {
+    const nextStrike = !readSelectedObjectStyleState(el).strike;
+    applyTextDecorationToken(el, 'line-through', nextStrike);
+  }, 'Object strikethrough updated and saved.');
+});
+
+// Alignment
+alignLeft.addEventListener('click', () => {
+  mutateSelectedObject((el) => {
+    el.style.textAlign = 'left';
+  }, 'Object alignment updated and saved.');
+});
+
+alignCenter.addEventListener('click', () => {
+  mutateSelectedObject((el) => {
+    el.style.textAlign = 'center';
+  }, 'Object alignment updated and saved.');
+});
+
+alignRight.addEventListener('click', () => {
+  mutateSelectedObject((el) => {
+    el.style.textAlign = 'right';
+  }, 'Object alignment updated and saved.');
+});
+
+// Global keyboard
+document.addEventListener('keydown', (event) => {
+  const inPromptField = document.activeElement === promptInput;
+
+  if (state.toolMode === TOOL_MODE_SELECT && (event.ctrlKey || event.metaKey) && !inPromptField) {
+    const key = event.key.toLowerCase();
+    if (key === 'b') { event.preventDefault(); if (!toggleBold.disabled) toggleBold.click(); return; }
+    if (key === 'i') { event.preventDefault(); if (!toggleItalic.disabled) toggleItalic.click(); return; }
+    if (key === 'u') { event.preventDefault(); if (!toggleUnderline.disabled) toggleUnderline.click(); return; }
+  }
+
+  if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+    event.preventDefault();
+    applyChanges();
+    return;
+  }
+
+  if (event.key === 'Escape') {
+    if (document.activeElement) document.activeElement.blur();
+    return;
+  }
+
+  if (inPromptField) return;
+
+  if (event.key === 'ArrowLeft') {
+    event.preventDefault();
+    void goToSlide(state.currentIndex - 1);
+  } else if (event.key === 'ArrowRight') {
+    event.preventDefault();
+    void goToSlide(state.currentIndex + 1);
+  }
+});
+
+// Resize
+window.addEventListener('resize', scaleSlide);
+
+// Iframe load
+slideIframe.addEventListener('load', () => {
+  const slide = currentSlideFile();
+  if (slide) {
+    const ss = getSlideState(slide);
+    if (ss.selectedObjectXPath && !getSelectedObjectElement(slide)) {
+      ss.selectedObjectXPath = '';
+    }
+  }
+  state.hoveredObjectXPath = '';
+  renderBboxes();
+  renderObjectSelection();
+  updateObjectEditorControls();
+  updateSendState();
+});
+
+// Init
+async function init() {
+  setStatus('Loading slide list...');
+
+  try {
+    const res = await fetch('/api/slides');
+    if (!res.ok) {
+      throw new Error(`Failed to fetch slide list: ${res.status}`);
+    }
+
+    state.slides = await res.json();
+
+    if (state.slides.length === 0) {
+      setStatus('No slides found.');
+      slideCounter.textContent = '0 / 0';
+      return;
+    }
+
+    await loadModelOptions();
+    updateToolModeUI();
+    await goToSlide(0);
+    scaleSlide();
+    await loadRunsInitial();
+    connectSSE();
+
+    setStatus(`Ready. Model: ${state.selectedModel}. Draw red pending bboxes, run Codex, then review green bboxes.`);
+  } catch (error) {
+    setStatus(`Error loading slides: ${error.message}`);
+    console.error('Init error:', error);
+  }
+}
+
+init();

package/src/editor/js/editor-navigation.js

@@ -0,0 +1,54 @@
+// editor-navigation.js — Slide navigation (goToSlide, persistDraft)
+
+import { state } from './editor-state.js';
+import {
+  slideIframe, slideCounter, btnPrev, btnNext, sessionFileChip,
+  promptInput, modelSelect,
+} from './editor-dom.js';
+import { currentSlideFile, getSlideState, normalizeModelName, setStatus } from './editor-utils.js';
+import { renderChatMessages } from './editor-chat.js';
+import { renderBboxes, scaleSlide } from './editor-bbox.js';
+import { renderObjectSelection, updateObjectEditorControls } from './editor-select.js';
+import { flushDirectSaveForSlide } from './editor-direct-edit.js';
+import { updateSendState } from './editor-send.js';
+
+export function persistCurrentSlideDraft() {
+  const slide = currentSlideFile();
+  if (!slide) return;
+  const ss = getSlideState(slide);
+  ss.prompt = promptInput.value;
+  ss.model = normalizeModelName(modelSelect.value) || ss.model || state.defaultModel;
+}
+
+export async function goToSlide(index) {
+  if (index < 0 || index >= state.slides.length) return;
+
+  const previousSlide = currentSlideFile();
+  persistCurrentSlideDraft();
+  if (previousSlide) {
+    await flushDirectSaveForSlide(previousSlide);
+  }
+
+  state.currentIndex = index;
+  const slide = currentSlideFile();
+  slideIframe.src = `/slides/${slide}`;
+  if (sessionFileChip) sessionFileChip.textContent = slide;
+  slideCounter.textContent = `${state.currentIndex + 1} / ${state.slides.length}`;
+  btnPrev.disabled = state.currentIndex === 0;
+  btnNext.disabled = state.currentIndex === state.slides.length - 1;
+
+  const ss = getSlideState(slide);
+  if (!state.availableModels.includes(normalizeModelName(ss.model))) {
+    ss.model = state.defaultModel;
+  }
+  state.selectedModel = ss.model;
+  modelSelect.value = state.selectedModel;
+  promptInput.value = ss.prompt || '';
+  state.hoveredObjectXPath = '';
+  renderChatMessages();
+  renderBboxes();
+  renderObjectSelection();
+  updateObjectEditorControls();
+  updateSendState();
+  setStatus(`Loaded ${slide}`);
+}

package/src/editor/js/editor-select.js

@@ -0,0 +1,264 @@
+// editor-select.js — Object selection, hover, tool mode UI
+
+import { state, TOOL_MODE_DRAW, TOOL_MODE_SELECT, SLIDE_W, SLIDE_H, NON_SELECTABLE_TAGS, DIRECT_TEXT_TAGS } from './editor-state.js';
+import {
+  slideIframe, slidePanel, drawBox, toolModeDrawBtn, toolModeSelectBtn,
+  bboxToolbar, selectToolbar, editorHint, objectSelectedBox, objectHoverBox,
+  selectedObjectMini, miniTag, miniText, selectEmptyHint,
+  toggleBold, toggleItalic, toggleUnderline, toggleStrike,
+  alignLeft, alignCenter, alignRight,
+  popoverTextInput, popoverApplyText, popoverTextColorInput, popoverBgColorInput,
+  popoverSizeInput, popoverApplySize,
+} from './editor-dom.js';
+import {
+  currentSlideFile, getSlideState, setStatus, clamp,
+  normalizeHexColor, parsePixelValue, isBoldFontWeight,
+} from './editor-utils.js';
+import { renderBboxes, scaleSlide, clientToSlidePoint, getXPath } from './editor-bbox.js';
+
+function isElementNode(node) {
+  return Boolean(node) && node.nodeType === Node.ELEMENT_NODE;
+}
+
+export function resolveXPath(doc, xpath) {
+  if (!doc || typeof xpath !== 'string' || xpath.trim() === '') return null;
+  try {
+    return doc.evaluate(xpath, doc, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+  } catch {
+    return null;
+  }
+}
+
+export function getSelectedObjectElement(slide = currentSlideFile()) {
+  if (!slide) return null;
+  const ss = getSlideState(slide);
+  const xpath = ss.selectedObjectXPath;
+  if (!xpath) return null;
+
+  const doc = slideIframe.contentDocument;
+  const el = resolveXPath(doc, xpath);
+  return isElementNode(el) ? el : null;
+}
+
+export function isSelectableElement(el) {
+  if (!isElementNode(el)) return false;
+  const tag = el.tagName.toLowerCase();
+  if (NON_SELECTABLE_TAGS.has(tag)) return false;
+  const rect = el.getBoundingClientRect();
+  return rect.width > 1 && rect.height > 1;
+}
+
+export function isTextEditableElement(el) {
+  if (!isElementNode(el)) return false;
+  const tag = el.tagName.toLowerCase();
+  if (!DIRECT_TEXT_TAGS.has(tag)) return false;
+  const INLINE_TAGS = new Set(['BR','B','STRONG','I','EM','U','S','SPAN','A','SMALL','SUB','SUP','MARK','CODE']);
+  return Array.from(el.children).every(c => INLINE_TAGS.has(c.tagName));
+}
+
+export function getSelectableTargetAt(clientX, clientY) {
+  const doc = slideIframe.contentDocument;
+  if (!doc) return null;
+
+  const point = clientToSlidePoint(clientX, clientY);
+  let node = doc.elementFromPoint(point.x, point.y);
+  while (node && !isSelectableElement(node)) {
+    node = node.parentElement;
+  }
+  return isElementNode(node) ? node : null;
+}
+
+export function elementToSlideRect(el) {
+  if (!isElementNode(el)) return null;
+  const rect = el.getBoundingClientRect();
+  if (!rect.width || !rect.height) return null;
+  return {
+    x: clamp(Math.round(rect.left), 0, SLIDE_W),
+    y: clamp(Math.round(rect.top), 0, SLIDE_H),
+    width: Math.max(1, Math.round(rect.width)),
+    height: Math.max(1, Math.round(rect.height)),
+  };
+}
+
+export function applyOverlayRect(node, rect) {
+  if (!node || !rect) {
+    if (node) node.style.display = 'none';
+    return;
+  }
+
+  node.style.display = 'block';
+  node.style.left = `${rect.x}px`;
+  node.style.top = `${rect.y}px`;
+  node.style.width = `${rect.width}px`;
+  node.style.height = `${rect.height}px`;
+}
+
+export function readSelectedObjectStyleState(el) {
+  const frameWindow = slideIframe.contentWindow;
+  const styles = frameWindow?.getComputedStyle ? frameWindow.getComputedStyle(el) : null;
+  const textDecorationLine = styles?.textDecorationLine || '';
+  return {
+    textEditable: isTextEditableElement(el),
+    textValue: (el.innerHTML || '').replace(/<br\s*\/?>/gi, '\n').replace(/<[^>]*>/g, '').trim(),
+    textColor: normalizeHexColor(styles?.color, '#111111'),
+    backgroundColor: normalizeHexColor(styles?.backgroundColor, '#ffffff'),
+    fontSize: parsePixelValue(styles?.fontSize, 24),
+    bold: isBoldFontWeight(styles?.fontWeight),
+    italic: styles?.fontStyle === 'italic',
+    underline: /\bunderline\b/.test(textDecorationLine),
+    strike: /\bline-through\b/.test(textDecorationLine),
+    textAlign: styles?.textAlign || 'left',
+  };
+}
+
+function setToggleActive(button, active) {
+  if (!button) return;
+  button.classList.toggle('active', Boolean(active));
+  button.setAttribute('aria-pressed', active ? 'true' : 'false');
+}
+
+function setControlEnabled(button, enabled) {
+  if (!button) return;
+  button.disabled = !enabled;
+  button.setAttribute('aria-disabled', enabled ? 'false' : 'true');
+}
+
+export function getSelectedObjectCapabilities(el) {
+  const textEditable = isTextEditableElement(el);
+  return {
+    textEditable,
+    textColorEditable: textEditable,
+    backgroundEditable: isElementNode(el),
+    sizeEditable: textEditable,
+    emphasisEditable: textEditable,
+    alignEditable: textEditable,
+  };
+}
+
+function syncInlineInputs(snapshot) {
+  if (!document.activeElement || !document.activeElement.closest?.('#select-toolbar')) {
+    popoverTextInput.value = snapshot?.textValue || '';
+    popoverSizeInput.value = String(snapshot?.fontSize || 24);
+  }
+  popoverTextColorInput.value = snapshot?.textColor || '#111111';
+  popoverBgColorInput.value = snapshot?.backgroundColor || '#ffffff';
+}
+
+export function updateObjectEditorControls() {
+  const selected = state.toolMode === TOOL_MODE_SELECT ? getSelectedObjectElement() : null;
+  const snapshot = selected ? readSelectedObjectStyleState(selected) : null;
+  const capabilities = getSelectedObjectCapabilities(selected);
+
+  if (bboxToolbar) {
+    bboxToolbar.hidden = state.toolMode !== TOOL_MODE_DRAW;
+  }
+  if (selectToolbar) {
+    selectToolbar.hidden = state.toolMode !== TOOL_MODE_SELECT;
+  }
+
+  if (selectedObjectMini && selectEmptyHint) {
+    if (selected) {
+      const tag = selected.tagName.toLowerCase();
+      const fullText = (selected.textContent || '').trim();
+      const preview = fullText.slice(0, 24);
+      miniTag.textContent = `<${tag}>`;
+      miniText.textContent = preview ? ` ${preview}${fullText.length > 24 ? '\u2026' : ''}` : '';
+      selectedObjectMini.style.display = '';
+      selectEmptyHint.style.display = 'none';
+    } else {
+      selectedObjectMini.style.display = 'none';
+      selectEmptyHint.style.display = state.toolMode === TOOL_MODE_SELECT ? '' : 'none';
+    }
+  }
+
+  popoverTextInput.disabled = !capabilities.textEditable;
+  popoverApplyText.disabled = !capabilities.textEditable;
+  popoverTextColorInput.disabled = !capabilities.textColorEditable;
+  popoverBgColorInput.disabled = !capabilities.backgroundEditable;
+  popoverSizeInput.disabled = !capabilities.sizeEditable;
+  popoverApplySize.disabled = !capabilities.sizeEditable;
+
+  setControlEnabled(toggleBold, capabilities.emphasisEditable);
+  setControlEnabled(toggleItalic, capabilities.emphasisEditable);
+  setControlEnabled(toggleUnderline, capabilities.emphasisEditable);
+  setControlEnabled(toggleStrike, capabilities.emphasisEditable);
+  setControlEnabled(alignLeft, capabilities.alignEditable);
+  setControlEnabled(alignCenter, capabilities.alignEditable);
+  setControlEnabled(alignRight, capabilities.alignEditable);
+
+  setToggleActive(toggleBold, capabilities.emphasisEditable && snapshot?.bold);
+  setToggleActive(toggleItalic, capabilities.emphasisEditable && snapshot?.italic);
+  setToggleActive(toggleUnderline, capabilities.emphasisEditable && snapshot?.underline);
+  setToggleActive(toggleStrike, capabilities.emphasisEditable && snapshot?.strike);
+  setToggleActive(alignLeft, capabilities.alignEditable && (snapshot?.textAlign === 'left' || snapshot?.textAlign === 'start'));
+  setToggleActive(alignCenter, capabilities.alignEditable && snapshot?.textAlign === 'center');
+  setToggleActive(alignRight, capabilities.alignEditable && (snapshot?.textAlign === 'right' || snapshot?.textAlign === 'end'));
+
+  syncInlineInputs(snapshot);
+}
+
+export function renderObjectSelection() {
+  const selectedEl = state.toolMode === TOOL_MODE_SELECT ? getSelectedObjectElement() : null;
+  const hoveredEl = state.toolMode === TOOL_MODE_SELECT
+    ? resolveXPath(slideIframe.contentDocument, state.hoveredObjectXPath)
+    : null;
+
+  const selectedRect = selectedEl ? elementToSlideRect(selectedEl) : null;
+  const hoveredRect = hoveredEl && hoveredEl !== selectedEl ? elementToSlideRect(hoveredEl) : null;
+  applyOverlayRect(objectSelectedBox, selectedRect);
+  applyOverlayRect(objectHoverBox, hoveredRect);
+}
+
+export function updateToolModeUI() {
+  const isDraw = state.toolMode === TOOL_MODE_DRAW;
+  slidePanel.classList.toggle('mode-draw', isDraw);
+  slidePanel.classList.toggle('mode-select', !isDraw);
+  toolModeDrawBtn.classList.toggle('active', isDraw);
+  toolModeSelectBtn.classList.toggle('active', !isDraw);
+  toolModeDrawBtn.setAttribute('aria-pressed', isDraw ? 'true' : 'false');
+  toolModeSelectBtn.setAttribute('aria-pressed', !isDraw ? 'true' : 'false');
+  editorHint.textContent = isDraw
+    ? 'Drag on the slide to add red bboxes. Cmd/Ctrl+Enter to run.'
+    : 'Click an object to edit. \u2318B bold \u00b7 \u2318I italic \u00b7 \u2318U underline';
+  renderBboxes();
+  renderObjectSelection();
+  updateObjectEditorControls();
+  scaleSlide();
+}
+
+export function setToolMode(mode) {
+  state.toolMode = mode === TOOL_MODE_SELECT ? TOOL_MODE_SELECT : TOOL_MODE_DRAW;
+  state.drawing = false;
+  state.drawStart = null;
+  drawBox.style.display = 'none';
+  if (state.toolMode !== TOOL_MODE_SELECT) {
+    state.hoveredObjectXPath = '';
+  }
+  updateToolModeUI();
+  setStatus(state.toolMode === TOOL_MODE_SELECT ? 'Select mode enabled.' : 'BBox draw mode enabled.');
+}
+
+export function setSelectedObjectXPath(xpath, statusMessage = 'Object selected.') {
+  const slide = currentSlideFile();
+  if (!slide) return;
+  const ss = getSlideState(slide);
+  ss.selectedObjectXPath = xpath || '';
+  state.hoveredObjectXPath = xpath || '';
+  renderObjectSelection();
+  updateObjectEditorControls();
+  if (statusMessage) {
+    setStatus(statusMessage);
+  }
+}
+
+export function updateHoveredObjectFromPointer(clientX, clientY) {
+  if (state.toolMode !== TOOL_MODE_SELECT) return;
+  const target = getSelectableTargetAt(clientX, clientY);
+  state.hoveredObjectXPath = target ? getXPath(target) : '';
+  renderObjectSelection();
+}
+
+export function clearHoveredObject() {
+  state.hoveredObjectXPath = '';
+  renderObjectSelection();
+}