/**
|
* 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;
|
}
|
