Install Impeccable skill for Codex

.agents/skills/impeccable/scripts/live-insert-ui.mjs

@@ -0,0 +1,458 @@
+/**
+ * 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;
+}