@monoes/monomindcli 2.15.6 → 2.16.0

package/.claude/skills/monodesign/scripts/live/insert-ui.mjs

@@ -1,458 +0,0 @@
-/**
- * Pure helpers for live-mode insert UI (browser + tests).
- * Kept separate from live-browser.js so insert logic is unit-testable.
- */
-
-export const PLACEHOLDER_DEFAULT_HEIGHT = 80;
-export const PLACEHOLDER_MIN_HEIGHT = 48;
-export const PLACEHOLDER_MIN_WIDTH = 120;
-
-/** @typedef {'before' | 'after'} InsertPosition */
-/** @typedef {'row' | 'column'} InsertAxis */
-
-/**
- * Infer sibling flow axis from a container's computed layout styles.
- * @param {{ display?: string, flexDirection?: string, gridTemplateColumns?: string, gridAutoFlow?: string }} style
- * @returns {InsertAxis}
- */
-export function detectInsertAxisFromStyle(style) {
-  const display = style?.display || 'block';
-  if (display.includes('flex')) {
-    const dir = style.flexDirection || 'row';
-    return dir.startsWith('row') ? 'row' : 'column';
-  }
-  if (display === 'grid' || display === 'inline-grid') {
-    const flow = style.gridAutoFlow || 'row';
-    if (flow.includes('column')) return 'column';
-    const cols = (style.gridTemplateColumns || '').trim();
-    if (cols && cols !== 'none') {
-      const colCount = cols.split(/\s+/).filter(Boolean).length;
-      if (colCount > 1) return 'row';
-    }
-    return 'row';
-  }
-  return 'column';
-}
-
-/**
- * Pick insertion side from pointer position against an anchor element box.
- * @param {number} clientX
- * @param {number} clientY
- * @param {{ top: number, left: number, width: number, height: number, bottom?: number, right?: number }} rect
- * @param {InsertAxis} [axis]
- * @returns {InsertPosition}
- */
-export function computeInsertPosition(clientX, clientY, rect, axis = 'column') {
-  if (!rect) return 'after';
-  if (axis === 'row') {
-    if (!Number.isFinite(rect.left) || !Number.isFinite(rect.width) || rect.width <= 0) return 'after';
-    const mid = rect.left + rect.width / 2;
-    return clientX < mid ? 'before' : 'after';
-  }
-  if (!Number.isFinite(rect.top) || !Number.isFinite(rect.height) || rect.height <= 0) return 'after';
-  const mid = rect.top + rect.height / 2;
-  return clientY < mid ? 'before' : 'after';
-}
-
-/**
- * Whether Create is allowed for an insert session.
- * Requires a non-empty prompt OR at least one annotation.
- */
-export function canCreateInsert({ prompt, comments, strokes }) {
-  const hasPrompt = typeof prompt === 'string' && prompt.trim().length > 0;
-  const hasComments = Array.isArray(comments) && comments.length > 0;
-  const hasStrokes = Array.isArray(strokes) && strokes.some(
-    (s) => Array.isArray(s?.points) && s.points.length >= 2,
-  );
-  return hasPrompt || hasComments || hasStrokes;
-}
-
-/** Tooltip/title when Create is disabled. */
-export function insertCreateDisabledReason({ prompt, comments, strokes }) {
-  if (canCreateInsert({ prompt, comments, strokes })) return null;
-  return 'Add a prompt or annotate the placeholder to create';
-}
-
-/**
- * Fixed-position insert line coordinates (viewport px).
- * @param {{ top: number, left: number, width: number, height: number, bottom?: number, right?: number }} rect
- * @param {InsertPosition} position
- * @param {InsertAxis} [axis]
- */
-export function insertLineCoords(rect, position, axis = 'column') {
-  if (axis === 'row') {
-    const right = rect.right ?? rect.left + rect.width;
-    const x = position === 'before' ? rect.left - 2 : right + 2;
-    return { axis: 'row', top: rect.top, left: x, width: 0, height: rect.height };
-  }
-  const bottom = rect.bottom ?? rect.top + rect.height;
-  const y = position === 'before' ? rect.top - 2 : bottom + 2;
-  return { axis: 'column', top: y, left: rect.left, width: rect.width, height: 0 };
-}
-
-/** Cursor while hovering an insert boundary. */
-export function cursorForInsertAxis(axis) {
-  return axis === 'row' ? 'ew-resize' : 'ns-resize';
-}
-
-function groupSiblingRows(siblings, rowThreshold = 8) {
-  const sorted = [...siblings].sort((a, b) => a.rect.top - b.rect.top || a.rect.left - b.rect.left);
-  const rows = [];
-  for (const entry of sorted) {
-    let placed = false;
-    for (const row of rows) {
-      if (Math.abs(entry.rect.top - row[0].rect.top) <= rowThreshold) {
-        row.push(entry);
-        placed = true;
-        break;
-      }
-    }
-    if (!placed) rows.push([entry]);
-  }
-  return rows;
-}
-
-function horizontalOverlap(a, b) {
-  const left = Math.max(a.left, b.left);
-  const right = Math.min(a.right ?? a.left + a.width, b.right ?? b.left + b.width);
-  return Math.max(0, right - left);
-}
-
-/**
- * Hit-test the gap between adjacent siblings (flex rows, grid columns, stacked blocks).
- * @param {number} clientX
- * @param {number} clientY
- * @param {Array<{ el: unknown, rect: { top: number, left: number, width: number, height: number, bottom?: number, right?: number } }>} siblings
- * @param {{ slop?: number, minOverlap?: number }} [opts]
- */
-export function hitSiblingInsertGap(clientX, clientY, siblings, opts = {}) {
-  if (!Array.isArray(siblings) || siblings.length < 2) return null;
-  const slop = opts.slop ?? 12;
-  const minOverlap = opts.minOverlap ?? 0.25;
-
-  for (const row of groupSiblingRows(siblings)) {
-    if (row.length < 2) continue;
-    const sorted = [...row].sort((a, b) => a.rect.left - b.rect.left);
-    for (let i = 0; i < sorted.length - 1; i++) {
-      const a = sorted[i];
-      const b = sorted[i + 1];
-      const aRight = a.rect.right ?? a.rect.left + a.rect.width;
-      const bLeft = b.rect.left;
-      if (bLeft <= aRight) continue;
-      const top = Math.max(a.rect.top, b.rect.top);
-      const aBottom = a.rect.bottom ?? a.rect.top + a.rect.height;
-      const bBottom = b.rect.bottom ?? b.rect.top + b.rect.height;
-      const bottom = Math.min(aBottom, bBottom);
-      const span = bottom - top;
-      const minH = Math.min(a.rect.height, b.rect.height);
-      if (span < minH * minOverlap) continue;
-
-      const inX = clientX >= aRight - slop && clientX <= bLeft + slop;
-      const inY = clientY >= top - slop && clientY <= bottom + slop;
-      if (!inX || !inY) continue;
-
-      const midX = (aRight + bLeft) / 2;
-      return {
-        anchor: b.el,
-        position: 'before',
-        axis: 'row',
-        line: { axis: 'row', left: midX, top, width: 0, height: span },
-      };
-    }
-  }
-
-  const sortedCol = [...siblings].sort((a, b) => a.rect.top - b.rect.top || a.rect.left - b.rect.left);
-  for (let i = 0; i < sortedCol.length - 1; i++) {
-    const a = sortedCol[i];
-    const b = sortedCol[i + 1];
-    const overlap = horizontalOverlap(a.rect, b.rect);
-    const minW = Math.min(a.rect.width, b.rect.width);
-    if (overlap < minW * minOverlap) continue;
-
-    const aBottom = a.rect.bottom ?? a.rect.top + a.rect.height;
-    const gapTop = aBottom;
-    const gapBottom = b.rect.top;
-    if (gapBottom <= gapTop) continue;
-
-    const overlapLeft = Math.max(a.rect.left, b.rect.left);
-    const overlapRight = Math.min(
-      a.rect.right ?? a.rect.left + a.rect.width,
-      b.rect.right ?? b.rect.left + b.rect.width,
-    );
-    const inY = clientY >= gapTop - slop && clientY <= gapBottom + slop;
-    const inX = clientX >= overlapLeft - slop && clientX <= overlapRight + slop;
-    if (!inY || !inX) continue;
-
-    const midY = (gapTop + gapBottom) / 2;
-    return {
-      anchor: b.el,
-      position: 'before',
-      axis: 'column',
-      line: { axis: 'column', top: midY, left: overlapLeft, width: overlap, height: 0 },
-    };
-  }
-
-  return null;
-}
-
-/**
- * Resolve insert hover target, side, axis, and indicator line for the pointer.
- */
-export function resolveInsertHover({ clientX, clientY, target, rect, axis, siblings }) {
-  const gap = hitSiblingInsertGap(clientX, clientY, siblings);
-  if (gap) return gap;
-
-  const position = computeInsertPosition(clientX, clientY, rect, axis);
-  const line = insertLineCoords(rect, position, axis);
-  return { anchor: target, position, axis, line };
-}
-
-/**
- * How the in-flow placeholder should participate in layout.
- * Prefer implicit sizing (flex / %) so row inserts don't inherit the full parent width in px.
- * @returns {{ kind: 'flex', flex: string, minWidth: number } | { kind: 'percent' } | { kind: 'auto' } | { kind: 'explicit', width: number }}
- */
-export function placeholderSizing({ axis, parentDisplay, parentWidth, anchorFlex }) {
-  const display = parentDisplay || 'block';
-  const w = Number.isFinite(parentWidth) ? parentWidth : 0;
-
-  if (axis === 'row') {
-    if (display.includes('flex')) {
-      const flex = anchorFlex && anchorFlex !== 'none' && anchorFlex !== '0 1 auto'
-        ? anchorFlex
-        : '1 1 0';
-      return { kind: 'flex', flex, minWidth: 0 };
-    }
-    if (display === 'grid' || display === 'inline-grid') {
-      return { kind: 'auto' };
-    }
-  }
-
-  if (w >= PLACEHOLDER_MIN_WIDTH) {
-    return { kind: 'percent' };
-  }
-
-  return {
-    kind: 'explicit',
-    width: Math.max(PLACEHOLDER_MIN_WIDTH, w || PLACEHOLDER_MIN_WIDTH),
-  };
-}
-
-/** Width kinds that need materializing to px before edge-resize. */
-export function placeholderWidthIsImplicit(kind) {
-  return kind === 'flex' || kind === 'percent' || kind === 'auto';
-}
-
-/**
- * Clamp user-resized placeholder dimensions.
- */
-export function clampPlaceholderSize(width, height, parentWidth, opts = {}) {
-  const minW = opts.minWidth ?? PLACEHOLDER_MIN_WIDTH;
-  const minH = opts.minHeight ?? PLACEHOLDER_MIN_HEIGHT;
-  const maxW = opts.maxWidth ?? Math.max(minW, parentWidth || minW);
-  return {
-    width: Math.min(maxW, Math.max(minW, Math.round(width))),
-    height: Math.max(minH, Math.round(height)),
-  };
-}
-
-/** CSS cursor for a placeholder edge resize handle. */
-export function cursorForPlaceholderEdge(edge) {
-  if (edge === 'n' || edge === 's') return 'ns-resize';
-  if (edge === 'e' || edge === 'w') return 'ew-resize';
-  return 'default';
-}
-
-/**
- * Compute placeholder box after dragging one edge (in-flow margins shift for n/w).
- * @param {{ width: number, height: number, marginLeft?: number, marginTop?: number }} start
- * @param {'n'|'e'|'s'|'w'} edge
- * @param {number} dx pointer delta X since drag start
- * @param {number} dy pointer delta Y since drag start
- * @param {number} parentWidth
- */
-export function resizePlaceholderFromEdge(start, edge, dx, dy, parentWidth, opts = {}) {
-  const base = {
-    width: start.width,
-    height: start.height,
-    marginLeft: start.marginLeft ?? 0,
-    marginTop: start.marginTop ?? 0,
-  };
-  if (edge === 'e') base.width = start.width + dx;
-  else if (edge === 'w') {
-    base.width = start.width - dx;
-    base.marginLeft = start.marginLeft + dx;
-  } else if (edge === 's') base.height = start.height + dy;
-  else if (edge === 'n') {
-    base.height = start.height - dy;
-    base.marginTop = start.marginTop + dy;
-  }
-
-  const clamped = clampPlaceholderSize(base.width, base.height, parentWidth, opts);
-  if (edge === 'w') {
-    base.marginLeft = start.marginLeft + start.width - clamped.width;
-  } else if (edge === 'n') {
-    base.marginTop = start.marginTop + start.height - clamped.height;
-  }
-
-  return {
-    width: clamped.width,
-    height: clamped.height,
-    marginLeft: Math.round(base.marginLeft),
-    marginTop: Math.round(base.marginTop),
-  };
-}
-
-/** Pick and insert toggles are independent but turning one ON turns the other OFF. */
-export function applyPickToggle(pickActive, insertActive) {
-  const nextPick = !pickActive;
-  return {
-    pickActive: nextPick,
-    insertActive: nextPick ? false : insertActive,
-  };
-}
-
-export function applyInsertToggle(pickActive, insertActive) {
-  const nextInsert = !insertActive;
-  return {
-    pickActive: nextInsert ? false : pickActive,
-    insertActive: nextInsert,
-  };
-}
-
-/**
- * Build the browser generate payload for insert mode.
- */
-export function buildInsertGeneratePayload({
-  id,
-  count,
-  pageUrl,
-  anchorContext,
-  position,
-  placeholder,
-  freeformPrompt,
-  comments,
-  strokes,
-  screenshotPath,
-}) {
-  const payload = {
-    type: 'generate',
-    mode: 'insert',
-    id,
-    count,
-    pageUrl,
-    insert: {
-      position,
-      anchor: anchorContext,
-    },
-    placeholder,
-    freeformPrompt: freeformPrompt?.trim() || undefined,
-  };
-  if (comments?.length) payload.comments = comments;
-  if (strokes?.length) payload.strokes = strokes;
-  if (screenshotPath) payload.screenshotPath = screenshotPath;
-  return payload;
-}
-
-/**
- * Whether a variant wrapper is currently shown (handles `hidden` and display:none).
- * @param {{ hidden?: boolean, style?: { display?: string } } | null | undefined} el
- */
-export function isVariantShown(el) {
-  if (!el) return false;
-  if (el.hidden) return false;
-  if (el.style?.display === 'none') return false;
-  return true;
-}
-
-/**
- * Show or hide a variant wrapper for cycling.
- * @param {{ hidden?: boolean, style?: { display?: string }, removeAttribute?: (name: string) => void, setAttribute?: (name: string, value?: string) => void } | null | undefined} el
- * @param {boolean} shown
- */
-export function setVariantShown(el, shown) {
-  if (!el) return;
-  if (shown) {
-    el.removeAttribute?.('hidden');
-    if (el.style) el.style.display = '';
-  } else {
-    el.setAttribute?.('hidden', '');
-    if (el.style) el.style.display = 'none';
-  }
-}
-
-/**
- * Pick the best live anchor during an insert session (placeholder until variants land).
- * @param {{
- *   wrapper?: unknown,
- *   variantCount?: number,
- *   visibleVariant?: number,
- *   placeholder?: unknown,
- *   insertAnchor?: unknown,
- *   pickVariantContent?: (wrapper: unknown, index: number) => unknown,
- * }} opts
- */
-export function resolveInsertSessionAnchor(opts) {
-  const {
-    wrapper,
-    variantCount = 0,
-    visibleVariant = 0,
-    placeholder,
-    insertAnchor,
-    pickVariantContent,
-  } = opts || {};
-  if (wrapper && variantCount > 0 && visibleVariant > 0 && pickVariantContent) {
-    const vis = pickVariantContent(wrapper, visibleVariant);
-    if (vis) return vis;
-  }
-  return placeholder || insertAnchor || null;
-}
-
-/**
- * Snapshot placeholder geometry + anchor fingerprint so HMR can recreate the box.
- * @param {{
- *   tagName?: string,
- *   className?: string,
- *   textContent?: string,
- * }} anchor
- * @param {{
- *   offsetWidth?: number,
- *   offsetHeight?: number,
- *   style?: { marginLeft?: string, marginTop?: string },
- * }} placeholder
- * @param {{ position: 'before' | 'after', layoutAxis?: 'row' | 'column' }} meta
- */
-export function buildInsertPlaceholderSnapshot(anchor, placeholder, { position, layoutAxis }) {
-  return {
-    width: Math.round(placeholder.offsetWidth || 0),
-    height: Math.round(placeholder.offsetHeight || PLACEHOLDER_DEFAULT_HEIGHT),
-    marginLeft: parseFloat(placeholder.style?.marginLeft || '') || 0,
-    marginTop: parseFloat(placeholder.style?.marginTop || '') || 0,
-    position,
-    layoutAxis: layoutAxis || 'column',
-    anchorTag: anchor.tagName || 'DIV',
-    anchorClasses: anchor.className || '',
-    anchorText: (anchor.textContent || '').trim().slice(0, 120),
-  };
-}
-
-/**
- * Re-find an insert anchor after framework HMR replaced the live DOM node.
- * @param {Pick<Document, 'body' | 'querySelectorAll'>} doc
- * @param {ReturnType<typeof buildInsertPlaceholderSnapshot> | null | undefined} snapshot
- * @param {Element | null | undefined} liveAnchor
- */
-export function findInsertAnchorInDom(doc, snapshot, liveAnchor = null) {
-  if (liveAnchor && doc.body.contains(liveAnchor)) return liveAnchor;
-  if (!snapshot) return null;
-  const tag = (snapshot.anchorTag || 'div').toLowerCase();
-  const cls = (snapshot.anchorClasses || '').split(/\s+/).filter(Boolean)[0];
-  const needle = snapshot.anchorText || '';
-  const sel = cls ? `${tag}.${cls}` : tag;
-  const candidates = doc.querySelectorAll(sel);
-  for (const candidate of candidates) {
-    if (needle && !(candidate.textContent || '').includes(needle.slice(0, 40))) continue;
-    return candidate;
-  }
-  return null;
-}