1/**
2 * Impeccable Live Variant Mode - Browser Script
3 *
4 * Injected into the user's page via <script src="http://localhost:PORT/live.js">.
5 * The server prepends window.__IMPECCABLE_TOKEN__ and window.__IMPECCABLE_PORT__
6 * before this code.
7 *
8 * UI: a single floating bar that morphs between three states -
9 * configure (pick action + go), generating (progressive dots), and cycling
10 * (prev/next + accept/discard). Feels like Spotlight, not a modal.
11 */
12(function () {
13  'use strict';
14  if (typeof window === 'undefined') return;
15 
16  // Guard against double-init. Bun's HTML loader may process the <script> tag
17  // and create a bundled copy alongside the external load, or HMR may re-execute.
18  // Check BEFORE reading token/port to catch all cases.
19  if (window.__IMPECCABLE_LIVE_INIT__) return;
20  window.__IMPECCABLE_LIVE_INIT__ = true;
21 
22  const TOKEN = window.__IMPECCABLE_TOKEN__;
23  const PORT = window.__IMPECCABLE_PORT__;
24  if (!TOKEN || !PORT) {
25    window.__IMPECCABLE_LIVE_INIT__ = false; // reset so the real load can init
26    return;
27  }
28 
29  //
30  // Design tokens
31  //
32 
33  // Brand kinpaku (gold) is pinned to the site's neo-kinpaku tokens
34  // (see site/styles/kinpaku-tokens.css) so Accept / knobs / cycle-dots /
35  // the selection outline / the comment tag all match the site's accent,
36  // not a washed theme-adjusted one. These mirror the kit's picker
37  // colors in site/styles/kinpaku-kit.css; keep them in sync by hand.
38  const C = {
39    brand:     'oklch(84% 0.19 80.46)',         // kinpaku gold
40    brandHov:  'oklch(86% 0.07 84)',            // kinpaku-pale (hover lift)
41    brandSoft: 'oklch(84% 0.19 80.46 / 0.18)',  // kinpaku-dim
42    ink:       'oklch(4% 0.004 95)',            // lacquer-deep
43    ash:       'oklch(55% 0.018 82)',           // warm muted text
44    paper:     'oklch(98% 0.005 95 / 0.92)',    // light overlay on user pages
45    paperSolid:'oklch(98% 0.005 95)',
46    mist:      'oklch(90% 0.008 82 / 0.6)',     // light hairline
47    white:     'oklch(99% 0 0)',
48  };
49  // Picker bar chrome - mirrors .live-demo-gbar / .live-demo-ctx in kinpaku-kit.css.
50  // Quiet neutral elevation: no gold halo ring (gold is reserved for the brand
51  // mark and the active control, not the container outline).
52  const PICKER_SHADOW =
53    '0 16px 36px -12px oklch(0% 0 0 / 0.6)';
54  const FONT = 'system-ui, -apple-system, sans-serif';
55  const MONO = 'ui-monospace, SFMono-Regular, Menlo, monospace';
56  // z-index: detect overlays use 99999, so our UI must be above them
57  const Z = { highlight: 100001, bar: 100005, picker: 100007, toast: 100010 };
58  const EASE = 'cubic-bezier(0.22, 1, 0.36, 1)'; // ease-out-quint
59  const PREFIX = 'impeccable-live';
60  const PICK_CURSOR_CLASS = PREFIX + '-pick-cursor';
61  const MANUAL_APPLY_STATE_TTL_MS = 15 * 60 * 1000;
62  const sessionState = window.__IMPECCABLE_LIVE_SESSION__?.createLiveBrowserSessionState({
63    prefix: PREFIX,
64    storage: localStorage,
65    idFactory: () => crypto.randomUUID().replace(/-/g, '').slice(0, 8),
66  });
67  if (!sessionState) {
68    console.error('[impeccable] live-browser-session.js was not loaded. Live mode cannot start safely.');
69    window.__IMPECCABLE_LIVE_INIT__ = false;
70    return;
71  }
72  const HIGHLIGHT_TRANSITION =
73    'top 140ms ' + EASE +
74    ', left 140ms ' + EASE +
75    ', width 140ms ' + EASE +
76    ', height 140ms ' + EASE +
77    ', opacity 150ms ease';
78  const TOOLTIP_TRANSITION =
79    'top 140ms ' + EASE + ', left 140ms ' + EASE + ', opacity 150ms ease';
80 
81  const SKIP_TAGS = new Set([
82    'html', 'head', 'body', 'script', 'style', 'link', 'meta', 'noscript', 'br', 'wbr',
83  ]);
84 
85  // Command vocabulary (values + labels + icons) comes from the canonical source,
86  // skill/scripts/live/vocabulary.mjs, which live-server.mjs serializes into
87  // window.__IMPECCABLE_VOCAB__ when it serves /live.js (same injection path as
88  // the token/port above, so it is always present here). The icons stack above
89  // each chip label and recolor to C.brand when selected (strokes use
90  // currentColor). ACTIONS drives the picker grid; ICONS maps value -> svg.
91  const VOCAB = Array.isArray(window.__IMPECCABLE_VOCAB__) ? window.__IMPECCABLE_VOCAB__ : [];
92  const ICONS = {};
93  const ACTIONS = VOCAB.map((c) => {
94    ICONS[c.value] = c.icon;
95    return { value: c.value, label: c.label };
96  });
97 
98  const LIVE_CHROME_MOUNT_CONTRACT = ['root', 'transport', 'state', 'actions'];
99  const LIVE_UI_SURFACES = [
100    { key: 'global-bottom-bar', ids: [PREFIX + '-global-bar', PREFIX + '-global-bar-brand', PREFIX + '-pick-toggle', PREFIX + '-insert-toggle', PREFIX + '-detect-toggle', PREFIX + '-detect-badge', PREFIX + '-design-toggle', PREFIX + '-page-chat', PREFIX + '-page-chat-input', PREFIX + '-page-chat-voice'] },
101    { key: 'pending-copy-edit-dock', ids: [PREFIX + '-pending-dock'] },
102    { key: 'element-selection-chrome', ids: [PREFIX + '-highlight', PREFIX + '-tooltip', PREFIX + '-bar', PREFIX + '-selection-pill', PREFIX + '-input', PREFIX + '-configure-voice', PREFIX + '-configure-bar-tooltip'] },
103    { key: 'action-picker', ids: [PREFIX + '-picker'] },
104    { key: 'edit-chrome', ids: [PREFIX + '-edit-badge'] },
105    { key: 'generating-row', ids: [PREFIX + '-bar', PREFIX + '-shader'] },
106    { key: 'variant-cycling-row', ids: [PREFIX + '-bar', PREFIX + '-params-panel'] },
107    { key: 'variant-params-panel', ids: [PREFIX + '-params-panel'] },
108    { key: 'saving-confirmed-rows', ids: [PREFIX + '-bar'] },
109    { key: 'insert-mode-chrome', ids: [PREFIX + '-insert-line', PREFIX + '-insert-placeholder', PREFIX + '-placeholder-resize', PREFIX + '-insert-input', PREFIX + '-insert-voice', PREFIX + '-insert-create', PREFIX + '-insert-create-tooltip'] },
110    { key: 'annotation-chrome', ids: [PREFIX + '-annot', PREFIX + '-annot-svg', PREFIX + '-annot-pins', PREFIX + '-annot-clear'] },
111    { key: 'design-system-panel', ids: [PREFIX + '-design-host'] },
112    { key: 'toasts-and-errors', ids: [PREFIX + '-toast'] },
113    { key: 'css-isolation-boundary', ids: [PREFIX + '-root'] },
114  ];
115  const LIVE_UI_COMPONENT_IDS = [...new Set(LIVE_UI_SURFACES.flatMap((surface) => surface.ids))];
116 
117  //
118  // State
119  //
120 
121  let state = 'IDLE';
122  let hoveredElement = null;
123  let selectedElement = null;
124  let currentSessionId = null;
125  let expectedVariants = 0;
126  let arrivedVariants = 0;
127  let visibleVariant = 0;
128  let svelteComponentSession = null;
129  let svelteRuntimePromise = null;
130  let pendingSvelteComponentRetryObserver = null;
131  let currentSourceFile = null;
132  let currentPreviewFile = null;
133  let currentPreviewMode = null;
134  let recoveryWaitingForAnchor = false;
135  let pickedAnchorSnapshot = null;
136  let pendingVariantAnchorRetryObserver = null;
137  let pendingAcceptedSession = null;
138  let variantObserver = null;
139  let variantSelectionInFlight = false;
140  let variantSelectionPromise = null;
141  let recoveringEmptyCycling = false;
142  let hasProjectContext = false;
143  let selectedAction = 'impeccable';
144  let selectedCount = 3;
145  const browserOwner = sessionState.owner;
146  let checkpointTimer = null;
147 
148  // Scroll lock - holds window.scrollY at a fixed value while the session is
149  // active, so HMR DOM patches and variant swaps can't drift the page. See
150  // startScrollLock / stopScrollLock below.
151  let scrollLockObserver = null;
152  let scrollLockTargetY = null;
153  let scrollLockRaf = null;
154  let scrollLockAbort = null;
155 
156  // Dedicated key for scroll position - SEPARATE from LS_KEY so that
157  // saveSession's state updates don't clobber a carefully-captured scrollY.
158  // (Previously: saveSession wrote scrollY alongside state, so every call
159  // during resume overwrote the pre-reload value with whatever the browser
160  // had landed on, typically 0.)
161  function writeScrollY(y) { sessionState.writeScrollY(y); }
162  function readScrollY() { return sessionState.readScrollY(); }
163  function clearScrollY() { sessionState.clearScrollY(); }
164 
165  // Pre-empt the browser: apply manual scroll restoration and jump to the
166  // saved scrollY at script-parse time. Retries on fonts.ready and load
167  // are essential: scrollTo(y) clamps to the current document.scrollHeight,
168  // which is often hundreds of pixels short of the final value until
169  // async-loaded fonts swap in and reflow.
170  try {
171    history.scrollRestoration = 'manual';
172    const savedY = readScrollY();
173    if (savedY != null) {
174      const apply = () => {
175        if (Math.abs(window.scrollY - savedY) > 0.5) {
176          window.scrollTo(0, savedY);
177        }
178      };
179      apply();
180      if (document.fonts?.ready) document.fonts.ready.then(apply).catch(() => {});
181      window.addEventListener('load', apply, { once: true });
182    }
183  } catch {}
184 
185  // UI refs
186  let highlightEl = null;
187  let tooltipEl = null;
188  let barEl = null;
189  let barHideSeq = 0;
190  let pickerEl = null;
191  let toastEl = null;
192  let scrollRaf = null;
193  let editBadgeEl = null;
194  let editBadgeProxyRoot = null;
195  let editBadgeProxyByTarget = new Map();
196 
197  //
198  // Helpers
199  //
200 
201  const domHelpers = window.__IMPECCABLE_LIVE_DOM__?.createLiveBrowserDomHelpers({
202    prefix: PREFIX,
203    skipTags: SKIP_TAGS,
204    document,
205  });
206  if (!domHelpers) {
207    console.error('[impeccable] live-browser-dom.js was not loaded. Live mode cannot start safely.');
208    window.__IMPECCABLE_LIVE_INIT__ = false;
209    return;
210  }
211  const {
212    own,
213    pickable,
214    desc,
215    rectIsUsableAnchor,
216    makeFrozenAnchor,
217    id8,
218    cssId,
219    liveUiRoot,
220    uiAppend,
221    uiAppendStyle,
222    uiGetById,
223    activeElementDeep,
224    defangOutsideHandlers,
225  } = domHelpers;
226 
227  window.__IMPECCABLE_LIVE_CHROME_CORE__ = {
228    version: 1,
229    adapter: window.__IMPECCABLE_LIVE_ADAPTER__ || 'dom',
230    mountContract: LIVE_CHROME_MOUNT_CONTRACT,
231    surfaces: LIVE_UI_SURFACES,
232    componentIds: LIVE_UI_COMPONENT_IDS,
233    root: liveUiRoot,
234    append: uiAppend,
235    appendStyle: uiAppendStyle,
236    getById: uiGetById,
237    activeElementDeep,
238    debugState: () => ({
239      state,
240      currentSessionId,
241      expectedVariants,
242      arrivedVariants,
243      visibleVariant,
244      savedSession: loadSession(),
245      sourceFile: currentSourceFile,
246      previewFile: currentPreviewFile,
247      previewMode: currentPreviewMode,
248      barText: barEl?.textContent || null,
249      barConnected: !!barEl?.isConnected,
250      hasSvelteComponentSession: !!svelteComponentSession,
251      mountedSvelteVariant: svelteComponentSession?.mountedVariant || 0,
252      pendingSvelteComponentRetry: !!pendingSvelteComponentRetryObserver,
253      recoveryWaitingForAnchor,
254      evtSourceReadyState: evtSource ? evtSource.readyState : null,
255    }),
256  };
257 
258  //
259  // Highlight overlay
260  //
261 
262  function initHighlight() {
263    highlightEl = document.createElement('div');
264    highlightEl.id = PREFIX + '-highlight';
265    Object.assign(highlightEl.style, {
266      position: 'fixed', top: '0', left: '0', width: '0', height: '0',
267      border: '2px solid ' + C.brand, borderRadius: '3px',
268      pointerEvents: 'none', zIndex: Z.highlight, boxSizing: 'border-box',
269      transition: HIGHLIGHT_TRANSITION,
270      display: 'none', opacity: '0',
271    });
272    uiAppend(highlightEl);
273 
274    tooltipEl = document.createElement('div');
275    tooltipEl.id = PREFIX + '-tooltip';
276    Object.assign(tooltipEl.style, {
277      position: 'fixed',
278      background: C.ink, color: C.white,
279      fontFamily: MONO, fontSize: '10px', fontWeight: '500',
280      padding: '2px 6px', borderRadius: '3px',
281      zIndex: Z.highlight + 1, pointerEvents: 'none',
282      whiteSpace: 'nowrap', display: 'none',
283      letterSpacing: '0.02em',
284      transition: TOOLTIP_TRANSITION,
285    });
286    uiAppend(tooltipEl);
287  }
288 
289  function shouldShowHighlightTagTooltip() {
290    // Configure/edit carry the tag in the bar selection pill, so keep only the outline.
291    return state !== 'CONFIGURING' && state !== 'EDITING';
292  }
293 
294  function hideHighlightTagTooltip() {
295    if (!tooltipEl) return;
296    tooltipEl.style.opacity = '0';
297    tooltipEl.style.display = 'none';
298  }
299 
300  function showHighlight(el) {
301    if (!el || !highlightEl) return;
302    if (el.hasAttribute?.('data-impeccable-insert-placeholder')) return;
303    const r = el.getBoundingClientRect();
304    const top = (r.top - 2) + 'px', left = (r.left - 2) + 'px';
305    const width = (r.width + 4) + 'px', height = (r.height + 4) + 'px';
306    const showTagTooltip = shouldShowHighlightTagTooltip();
307 
308    const hiWasHidden = highlightEl.style.display === 'none' || highlightEl.style.opacity === '0';
309    if (hiWasHidden) {
310      // Snap to first target without animating from (0,0), then fade in.
311      highlightEl.style.transition = 'none';
312      Object.assign(highlightEl.style, { top, left, width, height, display: 'block' });
313      void highlightEl.offsetWidth;
314      highlightEl.style.transition = HIGHLIGHT_TRANSITION;
315      highlightEl.style.opacity = '1';
316    } else {
317      Object.assign(highlightEl.style, { top, left, width, height, display: 'block', opacity: '1' });
318    }
319 
320    if (!showTagTooltip) {
321      hideHighlightTagTooltip();
322      return;
323    }
324 
325    const tipTop = r.top - 20;
326    const tipY = (tipTop < 4 ? r.bottom + 4 : tipTop) + 'px';
327    const tipX = Math.max(4, r.left) + 'px';
328    tooltipEl.textContent = desc(el);
329    if (hiWasHidden) {
330      tooltipEl.style.transition = 'none';
331      Object.assign(tooltipEl.style, { top: tipY, left: tipX, display: 'block' });
332      void tooltipEl.offsetWidth;
333      tooltipEl.style.transition = TOOLTIP_TRANSITION;
334      tooltipEl.style.opacity = '1';
335    } else {
336      Object.assign(tooltipEl.style, { top: tipY, left: tipX, display: 'block', opacity: '1' });
337    }
338  }
339 
340  function hideHighlight() {
341    if (highlightEl) { highlightEl.style.opacity = '0'; highlightEl.style.display = 'none'; }
342    if (tooltipEl) { tooltipEl.style.opacity = '0'; tooltipEl.style.display = 'none'; }
343  }
344 
345  //
346  // Annotation overlay (comment pins + kinpaku strokes)
347  //
348  // Active while state === 'CONFIGURING'. The overlay is a fixed-positioned
349  // sibling of <body> mirroring selectedElement's bounding rect. Click (no
350  // drag) drops a comment pin; drag paints a kinpaku SVG stroke. All coords
351  // are stored in element-local CSS px so they survive scroll / resize and
352  // correlate directly with the captured PNG.
353  //
354 
355  const DRAG_THRESHOLD = 5;       // px - below this, treat pointerup as a click
356  const PIN_DBL_CLICK_MS = 300;   // two clicks on the same pin within this delete it
357  let annotOverlayEl = null;
358  let annotSvgEl = null;
359  let annotPinsEl = null;
360  let annotClearChipEl = null;
361  let annotState = { comments: [], strokes: [] };
362  let annotActive = false;
363  // `annotPointer` is either:
364  //   { kind: 'new',   x0, y0, moved, strokeEl, strokePoints }   creating a stroke/pin
365  //   { kind: 'pin',   idx, startPointer, startPin, moved }     dragging an existing pin
366  let annotPointer = null;
367  let annotEditing = null;        // { idx, input, wrapEl }
368  let annotLastPinClick = { idx: -1, time: 0 }; // for click-click-to-delete
369  let placeholderResizeLayerEl = null;
370  let placeholderResizeDrag = null;
371 
372  function initAnnotOverlay() {
373    annotOverlayEl = document.createElement('div');
374    annotOverlayEl.id = PREFIX + '-annot';
375    Object.assign(annotOverlayEl.style, {
376      position: 'fixed', top: '0', left: '0', width: '0', height: '0',
377      pointerEvents: 'auto', zIndex: Z.highlight + 2,
378      display: 'none', overflow: 'visible',
379      cursor: 'crosshair', touchAction: 'none',
380    });
381 
382    annotSvgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
383    annotSvgEl.id = PREFIX + '-annot-svg';
384    Object.assign(annotSvgEl.style, {
385      position: 'absolute', top: '0', left: '0',
386      width: '100%', height: '100%',
387      // The SVG itself doesn't absorb clicks; individual hit-paths opt-in via
388      // pointer-events=stroke so gaps still fall through to the overlay.
389      pointerEvents: 'none', overflow: 'visible',
390    });
391    annotOverlayEl.appendChild(annotSvgEl);
392 
393    annotPinsEl = document.createElement('div');
394    annotPinsEl.id = PREFIX + '-annot-pins';
395    Object.assign(annotPinsEl.style, {
396      position: 'absolute', inset: '0',
397      pointerEvents: 'none',
398    });
399    annotOverlayEl.appendChild(annotPinsEl);
400 
401    annotClearChipEl = document.createElement('div');
402    annotClearChipEl.id = PREFIX + '-annot-clear';
403    annotClearChipEl.dataset.annotClear = 'true';
404    annotClearChipEl.textContent = 'Clear';
405    Object.assign(annotClearChipEl.style, {
406      position: 'absolute', top: '8px', right: '8px',
407      background: C.ink, color: C.white,
408      fontFamily: FONT, fontSize: '10px', fontWeight: '500',
409      letterSpacing: '0.08em', textTransform: 'uppercase',
410      padding: '5px 12px', borderRadius: '999px',
411      cursor: 'pointer', pointerEvents: 'auto',
412      display: 'none', userSelect: 'none',
413      boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
414    });
415    annotOverlayEl.appendChild(annotClearChipEl);
416 
417    placeholderResizeLayerEl = document.createElement('div');
418    placeholderResizeLayerEl.id = PREFIX + '-placeholder-resize';
419    Object.assign(placeholderResizeLayerEl.style, {
420      position: 'absolute',
421      inset: '0',
422      pointerEvents: 'none',
423      display: 'none',
424      zIndex: '2',
425    });
426    annotOverlayEl.appendChild(placeholderResizeLayerEl);
427 
428    annotOverlayEl.addEventListener('pointerdown', onAnnotDown);
429    annotOverlayEl.addEventListener('pointermove', onAnnotMove);
430    annotOverlayEl.addEventListener('pointerup', onAnnotUp);
431    annotOverlayEl.addEventListener('pointercancel', onAnnotUp);
432    uiAppend(annotOverlayEl);
433    // Modal-host friendliness: pointer-events is already 'auto' on this
434    // overlay; we only need to silence the host's outside-interaction
435    // listeners. Don't override pointer-events here (the overlay toggles
436    // visibility via display:none, which is fine).
437    defangOutsideHandlers(annotOverlayEl, { setPointerEvents: false });
438  }
439 
440  function updateClearChip() {
441    if (!annotClearChipEl) return;
442    const hasAny = annotState.comments.length > 0 || annotState.strokes.length > 0;
443    annotClearChipEl.style.display = hasAny ? 'block' : 'none';
444  }
445 
446  function showAnnotOverlay(el) {
447    if (!annotOverlayEl || !el) return;
448    annotActive = true;
449    positionAnnotOverlay(el);
450    annotOverlayEl.style.display = 'block';
451    syncPlaceholderResizeHandles();
452  }
453 
454  function hideAnnotOverlay() {
455    annotActive = false;
456    placeholderResizeDrag = null;
457    if (annotOverlayEl) annotOverlayEl.style.display = 'none';
458    syncPlaceholderResizeHandles();
459    // Drop any in-progress edit without touching annotState - clearAnnotations
460    // (if the caller is exiting configure mode) handles state reset.
461    annotEditing = null;
462  }
463 
464  function positionAnnotOverlay(el) {
465    if (!annotOverlayEl || !el) return;
466    const r = el.getBoundingClientRect();
467    Object.assign(annotOverlayEl.style, {
468      top: r.top + 'px', left: r.left + 'px',
469      width: r.width + 'px', height: r.height + 'px',
470    });
471    annotSvgEl.setAttribute('viewBox', '0 0 ' + r.width + ' ' + r.height);
472    syncPlaceholderResizeHandles();
473  }
474 
475  function clearAnnotations() {
476    annotState.comments = [];
477    annotState.strokes = [];
478    if (annotSvgEl) while (annotSvgEl.firstChild) annotSvgEl.removeChild(annotSvgEl.firstChild);
479    if (annotPinsEl) annotPinsEl.innerHTML = '';
480    annotPointer = null;
481    annotEditing = null;
482    annotLastPinClick = { idx: -1, time: 0 };
483    updateClearChip();
484  }
485 
486  // Rebuild the SVG layer. Each stroke gets a wider invisible hit path
487  // beneath the visible kinpaku path so clicks register on thin lines.
488  function redrawStrokes() {
489    while (annotSvgEl.firstChild) annotSvgEl.removeChild(annotSvgEl.firstChild);
490    annotState.strokes.forEach((s, idx) => {
491      const d = pointsToPath(s.points);
492      const hit = document.createElementNS('http://www.w3.org/2000/svg', 'path');
493      hit.setAttribute('d', d);
494      hit.setAttribute('stroke', 'transparent');
495      hit.setAttribute('stroke-width', '16');
496      hit.setAttribute('stroke-linecap', 'round');
497      hit.setAttribute('stroke-linejoin', 'round');
498      hit.setAttribute('fill', 'none');
499      hit.setAttribute('pointer-events', 'stroke');
500      hit.style.cursor = 'pointer';
501      hit.dataset.annotStroke = String(idx);
502      annotSvgEl.appendChild(hit);
503      const visible = document.createElementNS('http://www.w3.org/2000/svg', 'path');
504      visible.setAttribute('d', d);
505      visible.setAttribute('stroke', C.brand);
506      visible.setAttribute('stroke-width', '3');
507      visible.setAttribute('stroke-linecap', 'round');
508      visible.setAttribute('stroke-linejoin', 'round');
509      visible.setAttribute('fill', 'none');
510      visible.setAttribute('pointer-events', 'none');
511      annotSvgEl.appendChild(visible);
512    });
513    updateClearChip();
514  }
515 
516  function localCoords(e) {
517    const rect = annotOverlayEl.getBoundingClientRect();
518    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
519  }
520 
521  function onAnnotDown(e) {
522    if (!annotActive) return;
523 
524    // 0) Insert placeholder edge resize - wins over draw / pins.
525    const resizeEdge = e.target.closest?.('[data-impeccable-placeholder-resize]')?.dataset.impeccablePlaceholderResize;
526    if (resizeEdge && configureKind === 'insert' && placeholderElement) {
527      startPlaceholderEdgeResize(resizeEdge, e);
528      return;
529    }
530 
531    // 1) Clear chip → wipe all annotations
532    if (e.target.closest?.('[data-annot-clear]')) {
533      if (annotEditing) annotEditing = null;
534      clearAnnotations();
535      renderAllPins();
536      redrawStrokes();
537      e.stopPropagation(); e.preventDefault();
538      return;
539    }
540 
541    // 2) Stroke hit path → delete that stroke
542    const strokeHit = e.target.closest?.('[data-annot-stroke]');
543    if (strokeHit) {
544      const idx = parseInt(strokeHit.dataset.annotStroke, 10);
545      if (Number.isInteger(idx)) {
546        annotState.strokes.splice(idx, 1);
547        redrawStrokes();
548      }
549      e.stopPropagation(); e.preventDefault();
550      return;
551    }
552 
553    // 3) Pin → drag, edit, or delete-on-double-click
554    const pinWrap = e.target.closest?.('[data-annot-pin]');
555    if (pinWrap) {
556      const idx = parseInt(pinWrap.dataset.annotPin, 10);
557      if (!Number.isInteger(idx)) return;
558      // Double-click (two pointerdowns on the same pin within window) → delete.
559      const now = Date.now();
560      if (annotLastPinClick.idx === idx && now - annotLastPinClick.time < PIN_DBL_CLICK_MS) {
561        if (annotEditing && annotEditing.idx === idx) annotEditing = null;
562        annotState.comments.splice(idx, 1);
563        annotLastPinClick = { idx: -1, time: 0 };
564        renderAllPins();
565        e.stopPropagation(); e.preventDefault();
566        return;
567      }
568      annotLastPinClick = { idx, time: now };
569      // If editing a different pin, commit that edit before starting here.
570      if (annotEditing && annotEditing.idx !== idx) finalizeEditingPin();
571      // If already editing THIS pin and the user clicked the dot, let the
572      // input keep focus (don't start a drag - the click wasn't meant as one).
573      if (annotEditing && annotEditing.idx === idx) return;
574      const p = localCoords(e);
575      const pin = annotState.comments[idx];
576      annotPointer = {
577        kind: 'pin', idx,
578        startPointer: p,
579        startPin: { x: pin.x, y: pin.y },
580        moved: false,
581      };
582      try { annotOverlayEl.setPointerCapture(e.pointerId); } catch {}
583      e.stopPropagation(); e.preventDefault();
584      return;
585    }
586 
587    // 4) Empty area → commit any open edit, then start new annotation
588    if (annotEditing) {
589      finalizeEditingPin();
590      e.stopPropagation(); e.preventDefault();
591      return;
592    }
593    const p = localCoords(e);
594    annotPointer = { kind: 'new', x0: p.x, y0: p.y, moved: false, strokeEl: null, strokePoints: null };
595    try { annotOverlayEl.setPointerCapture(e.pointerId); } catch {}
596    e.stopPropagation(); e.preventDefault();
597  }
598 
599  function onAnnotMove(e) {
600    if (!annotActive) return;
601 
602    if (placeholderResizeDrag) {
603      const d = placeholderResizeDrag;
604      const next = resizePlaceholderFromEdge(
605        d.start,
606        d.edge,
607        e.clientX - d.startX,
608        e.clientY - d.startY,
609        d.parentWidth,
610      );
611      applyPlaceholderDimensions(next);
612      e.stopPropagation();
613      return;
614    }
615 
616    if (!annotPointer) return;
617    const p = localCoords(e);
618 
619    if (annotPointer.kind === 'pin') {
620      const dx = p.x - annotPointer.startPointer.x;
621      const dy = p.y - annotPointer.startPointer.y;
622      if (!annotPointer.moved) {
623        if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
624        annotPointer.moved = true;
625      }
626      const pin = annotState.comments[annotPointer.idx];
627      if (!pin) { annotPointer = null; return; }
628      pin.x = annotPointer.startPin.x + dx;
629      pin.y = annotPointer.startPin.y + dy;
630      renderAllPins();
631      e.stopPropagation();
632      return;
633    }
634 
635    // kind === 'new'
636    const dx = p.x - annotPointer.x0, dy = p.y - annotPointer.y0;
637    if (!annotPointer.moved) {
638      if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
639      annotPointer.moved = true;
640      const strokeEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
641      strokeEl.setAttribute('stroke', C.brand);
642      strokeEl.setAttribute('stroke-width', '3');
643      strokeEl.setAttribute('stroke-linecap', 'round');
644      strokeEl.setAttribute('stroke-linejoin', 'round');
645      strokeEl.setAttribute('fill', 'none');
646      strokeEl.setAttribute('pointer-events', 'none');
647      annotSvgEl.appendChild(strokeEl);
648      annotPointer.strokeEl = strokeEl;
649      annotPointer.strokePoints = [[annotPointer.x0, annotPointer.y0]];
650    }
651    annotPointer.strokePoints.push([p.x, p.y]);
652    annotPointer.strokeEl.setAttribute('d', pointsToPath(annotPointer.strokePoints));
653    e.stopPropagation();
654  }
655 
656  function pointsToPath(points) {
657    if (!points || points.length === 0) return '';
658    let d = 'M' + points[0][0].toFixed(1) + ' ' + points[0][1].toFixed(1);
659    for (let i = 1; i < points.length; i++) {
660      d += ' L' + points[i][0].toFixed(1) + ' ' + points[i][1].toFixed(1);
661    }
662    return d;
663  }
664 
665  function onAnnotUp(e) {
666    if (placeholderResizeDrag) {
667      try { annotOverlayEl.releasePointerCapture(e.pointerId); } catch {}
668      placeholderResizeDrag = null;
669      e.stopPropagation();
670      return;
671    }
672    if (!annotActive || !annotPointer) return;
673 
674    if (annotPointer.kind === 'pin') {
675      const wasDrag = annotPointer.moved;
676      const idx = annotPointer.idx;
677      try { annotOverlayEl.releasePointerCapture(e.pointerId); } catch {}
678      annotPointer = null;
679      if (wasDrag) {
680        // A drag is an intentional reposition; a follow-up click shouldn't be
681        // interpreted as a double-click-to-delete.
682        annotLastPinClick = { idx: -1, time: 0 };
683      } else {
684        beginEditPin(idx);
685      }
686      e.stopPropagation();
687      return;
688    }
689 
690    // kind === 'new'
691    const wasDrag = annotPointer.moved;
692    if (wasDrag) {
693      annotState.strokes.push({ points: annotPointer.strokePoints });
694      // Swap the temporary preview SVG path for the full render with hit paths.
695      redrawStrokes();
696    } else {
697      const idx = annotState.comments.length;
698      annotState.comments.push({ x: annotPointer.x0, y: annotPointer.y0, text: '' });
699      renderAllPins();
700      beginEditPin(idx);
701    }
702    try { annotOverlayEl.releasePointerCapture(e.pointerId); } catch {}
703    annotPointer = null;
704    if (configureKind === 'insert') syncInsertCreateButton();
705    e.stopPropagation();
706  }
707 
708  function renderAllPins() {
709    annotPinsEl.innerHTML = '';
710    annotState.comments.forEach((c, idx) => {
711      annotPinsEl.appendChild(buildPinElement(c, idx));
712    });
713    updateClearChip();
714  }
715 
716  function buildPinElement(comment, idx) {
717    const interactive = idx >= 0;
718    const wrap = document.createElement('div');
719    if (interactive) wrap.dataset.annotPin = String(idx);
720    Object.assign(wrap.style, {
721      position: 'absolute',
722      left: (comment.x - 7) + 'px', top: (comment.y - 7) + 'px',
723      pointerEvents: interactive ? 'auto' : 'none',
724      display: 'flex', alignItems: 'flex-start', gap: '6px',
725      cursor: interactive ? 'grab' : 'default',
726      touchAction: 'none',
727    });
728    const dot = document.createElement('div');
729    Object.assign(dot.style, {
730      width: '14px', height: '14px', borderRadius: '50%',
731      background: C.brand, border: '2px solid ' + C.white,
732      boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
733      flexShrink: '0',
734    });
735    wrap.appendChild(dot);
736 
737    if (comment.text) {
738      const bubble = document.createElement('div');
739      bubble.textContent = comment.text;
740      Object.assign(bubble.style, {
741        background: C.ink, color: C.white,
742        fontFamily: FONT, fontSize: '12px', lineHeight: '1.4',
743        padding: '4px 8px', borderRadius: '3px',
744        marginTop: '-2px', maxWidth: '220px',
745        pointerEvents: 'none', whiteSpace: 'pre-wrap',
746        wordBreak: 'break-word',
747      });
748      wrap.appendChild(bubble);
749    }
750    return wrap;
751  }
752 
753  function beginEditPin(idx) {
754    const wrapEl = annotPinsEl.querySelector('[data-annot-pin="' + idx + '"]');
755    if (!wrapEl) return;
756    // Strip any existing bubble (but keep the dot)
757    wrapEl.querySelectorAll('div:not(:first-child)').forEach(n => n.remove());
758    const input = document.createElement('input');
759    input.type = 'text';
760    input.placeholder = 'Note…';
761    Object.assign(input.style, {
762      background: C.ink, color: C.white,
763      fontFamily: FONT, fontSize: '12px', lineHeight: '1.4',
764      padding: '4px 8px', borderRadius: '3px',
765      border: '1px solid ' + C.brand,
766      outline: 'none', marginTop: '-2px',
767      width: '220px', pointerEvents: 'auto',
768    });
769    const originalText = annotState.comments[idx].text || '';
770    input.value = originalText;
771    wrapEl.appendChild(input);
772    annotEditing = { idx, input, wrapEl, originalText };
773    input.addEventListener('keydown', onAnnotInputKey, true);
774    input.addEventListener('blur', () => {
775      // Fires on both focus-loss and programmatic blur; commit unless we
776      // already handled it.
777      if (annotEditing && annotEditing.input === input) finalizeEditingPin();
778    });
779    // Stop clicks/pointerdowns inside the input from bubbling to the overlay
780    ['pointerdown', 'click'].forEach(ev => {
781      input.addEventListener(ev, e => e.stopPropagation());
782    });
783    setTimeout(() => input.focus(), 0);
784  }
785 
786  function onAnnotInputKey(e) {
787    if (e.key === 'Enter') {
788      e.preventDefault(); e.stopPropagation();
789      finalizeEditingPin();
790    } else if (e.key === 'Escape') {
791      e.preventDefault(); e.stopPropagation();
792      cancelEditingPin();
793    } else {
794      // Keep arrows / backspace from hitting global handlers
795      e.stopPropagation();
796    }
797  }
798 
799  function finalizeEditingPin() {
800    if (!annotEditing) return;
801    const { idx, input } = annotEditing;
802    const text = input.value.trim();
803    annotEditing = null;
804    if (text) annotState.comments[idx].text = text;
805    else annotState.comments.splice(idx, 1);
806    renderAllPins();
807  }
808 
809  function cancelEditingPin() {
810    if (!annotEditing) return;
811    const { idx, originalText } = annotEditing;
812    annotEditing = null;
813    // If the pin had text before this edit, restore it. If it was a
814    // just-created empty pin, Escape removes it.
815    if (originalText) {
816      annotState.comments[idx].text = originalText;
817    } else {
818      annotState.comments.splice(idx, 1);
819    }
820    renderAllPins();
821  }
822 
823  // Build a detached annotation subtree suitable for injection into the clone
824  // modern-screenshot creates. Coordinates are element-local so this slots
825  // straight into an element that's been made position:relative. Takes an
826  // explicit snapshot so it works after annotState has been cleared.
827  function buildAnnotationsForCapture(rect, snapshot) {
828    const comments = snapshot ? snapshot.comments : annotState.comments;
829    const strokes = snapshot ? snapshot.strokes : annotState.strokes;
830    if (comments.length === 0 && strokes.length === 0) return null;
831    const wrap = document.createElement('div');
832    Object.assign(wrap.style, {
833      position: 'absolute', top: '0', left: '0',
834      width: rect.width + 'px', height: rect.height + 'px',
835      pointerEvents: 'none', overflow: 'visible',
836    });
837    if (strokes.length > 0) {
838      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
839      svg.setAttribute('viewBox', '0 0 ' + rect.width + ' ' + rect.height);
840      Object.assign(svg.style, {
841        position: 'absolute', top: '0', left: '0',
842        width: '100%', height: '100%', overflow: 'visible',
843      });
844      for (const s of strokes) {
845        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
846        path.setAttribute('stroke', C.brand);
847        path.setAttribute('stroke-width', '3');
848        path.setAttribute('stroke-linecap', 'round');
849        path.setAttribute('stroke-linejoin', 'round');
850        path.setAttribute('fill', 'none');
851        path.setAttribute('d', pointsToPath(s.points));
852        svg.appendChild(path);
853      }
854      wrap.appendChild(svg);
855    }
856    for (const c of comments) {
857      // idx=-1 means non-interactive; pointerEvents stay off in the clone
858      wrap.appendChild(buildPinElement(c, -1));
859    }
860    return wrap;
861  }
862 
863  //
864  // Element context extraction
865  //
866 
867  function stripManualEditRuntimeState(root) {
868    if (!root || root.nodeType !== 1) return;
869    unwrapMixedContentTextNodes(root);
870    const nodes = [root, ...root.querySelectorAll('[data-impeccable-editable], [data-impeccable-original-text], [data-impeccable-text-wrap]')];
871    for (const node of nodes) {
872      const runtimeEditable = node.hasAttribute('data-impeccable-editable')
873        || node.hasAttribute('data-impeccable-original-text');
874      node.removeAttribute('data-impeccable-editable');
875      node.removeAttribute('data-impeccable-original-text');
876      node.removeAttribute('data-impeccable-text-wrap');
877      if (runtimeEditable) {
878        node.removeAttribute('contenteditable');
879        if (node.style) {
880          node.style.userSelect = '';
881          node.style.cursor = '';
882          node.style.outline = '';
883          node.style.webkitUserModify = '';
884          if (!node.getAttribute('style')?.trim()) node.removeAttribute('style');
885        }
886      }
887    }
888  }
889 
890  function sanitizedContextOuterHTML(el, maxLength) {
891    if (!el || !el.cloneNode) return '';
892    const clone = el.cloneNode(true);
893    stripManualEditRuntimeState(clone);
894    return clone.outerHTML ? clone.outerHTML.slice(0, maxLength) : '';
895  }
896 
897  function extractContext(el) {
898    const cs = getComputedStyle(el);
899    const r = el.getBoundingClientRect();
900    const props = {};
901    for (const sheet of document.styleSheets) {
902      try {
903        for (const rule of sheet.cssRules) {
904          if (rule.style) for (let i = 0; i < rule.style.length; i++) {
905            const p = rule.style[i];
906            if (p.startsWith('--') && !props[p]) {
907              const v = cs.getPropertyValue(p).trim();
908              if (v) props[p] = v;
909            }
910          }
911        }
912      } catch { /* cross-origin */ }
913    }
914    return {
915      tagName: el.tagName.toLowerCase(), id: el.id || null,
916      classes: [...el.classList],
917      textContent: (el.textContent || '').slice(0, 500),
918      outerHTML: sanitizedContextOuterHTML(el, 10000),
919      computedStyles: {
920        'font-family': cs.fontFamily, 'font-size': cs.fontSize,
921        'font-weight': cs.fontWeight, 'line-height': cs.lineHeight,
922        'color': cs.color, 'background': cs.background,
923        'background-color': cs.backgroundColor,
924        'padding': cs.padding, 'margin': cs.margin,
925        'display': cs.display, 'position': cs.position,
926        'gap': cs.gap, 'border-radius': cs.borderRadius,
927        'box-shadow': cs.boxShadow,
928      },
929      cssCustomProperties: props,
930      parentContext: el.parentElement
931        ? '<' + el.parentElement.tagName.toLowerCase()
932          + (el.parentElement.id ? ' id="' + el.parentElement.id + '"' : '')
933          + (el.parentElement.className ? ' class="' + el.parentElement.className + '"' : '')
934          + '>'
935        : null,
936      boundingRect: { width: Math.round(r.width), height: Math.round(r.height) },
937    };
938  }
939 
940  const MANUAL_CONTEXT_SKIP = { script: 1, style: 1, template: 1, noscript: 1, svg: 1, code: 1, pre: 1 };
941 
942  function contextElementForManualEdit(selectedEl, rows, ops) {
943    if (!selectedEl) return selectedEl;
944    const leafOnly =
945      rows && rows.length === 1 && rows[0] && rows[0].el === selectedEl;
946    if (!leafOnly) return selectedEl;
947 
948    const editedTexts = new Set();
949    for (const row of rows || []) addManualContextText(editedTexts, row.text);
950    for (const op of ops || []) {
951      addManualContextText(editedTexts, op.originalText);
952      addManualContextText(editedTexts, op.newText);
953    }
954 
955    let cur = selectedEl.parentElement;
956    let depth = 0;
957    while (cur && cur !== document.body && cur !== document.documentElement && depth < 4) {
958      if (own(cur)) break;
959      if (isUsefulManualEditContext(cur, selectedEl, editedTexts)) return cur;
960      cur = cur.parentElement;
961      depth++;
962    }
963    return selectedEl;
964  }
965 
966  function isUsefulManualEditContext(candidate, leafEl, editedTexts) {
967    if (!candidate || !candidate.contains(leafEl)) return false;
968    if (!candidate.id && candidate.classList.length === 0 && candidate.children.length < 2) return false;
969    return collectManualContextPieces(candidate, editedTexts).length > 0;
970  }
971 
972  function collectManualContextPieces(rootEl, editedTexts) {
973    const pieces = [];
974    function walk(node) {
975      if (!node) return;
976      if (node.nodeType === 3) {
977        const text = normalizeManualContextText(node.nodeValue);
978        if (isMeaningfulManualContextPiece(text, editedTexts)) pieces.push(text);
979        return;
980      }
981      if (node.nodeType !== 1) return;
982      const tag = node.tagName.toLowerCase();
983      if (MANUAL_CONTEXT_SKIP[tag]) return;
984      if (node !== rootEl && own(node)) return;
985      for (const child of node.childNodes) walk(child);
986    }
987    walk(rootEl);
988    return pieces.slice(0, 12);
989  }
990 
991  function addManualContextText(set, value) {
992    const text = normalizeManualContextText(value);
993    if (text) set.add(text);
994  }
995 
996  function isMeaningfulManualContextPiece(text, editedTexts) {
997    if (!text || text.length < 3 || text.length > 160) return false;
998    if (/^[\d.,+\-%\s]+$/.test(text)) return false;
999    return !editedTexts.has(text);
1000  }
1001 
1002  function normalizeManualContextText(value) {
1003    return String(value || '').replace(/\s+/g, ' ').trim();
1004  }
1005 
1006  //
1007  // The Bar - one floating element, three modes
1008  //
1009 
1010  // Contextual-bar palette. Cached at init so every build*Row reads a
1011  // consistent set of colors; detectPageTheme runs once rather than on every
1012  // phase transition.
1013  let BP = null;
1014 
1015  // Bar shadow variants. The default projects down + subtle around. When
1016  // the Tune popover opens below the bar, a downward shadow lands on the
1017  // dark popover and reads as a bright ghost line. We swap to UP-only while
1018  // tune is open below so the popover's top edge is clean.
1019  const BAR_SHADOW_DEFAULT = '0 4px 20px oklch(0% 0 0 / 0.08), 0 1px 3px oklch(0% 0 0 / 0.06)';
1020  const BAR_SHADOW_UP = '0 -4px 20px oklch(0% 0 0 / 0.08), 0 -1px 3px oklch(0% 0 0 / 0.06)';
1021  const BAR_SHADOW_DOWN = BAR_SHADOW_DEFAULT;
1022 
1023  function initBar() {
1024    BP = barPaletteForTheme(detectPageTheme());
1025    barEl = document.createElement('div');
1026    barEl.id = PREFIX + '-bar';
1027    Object.assign(barEl.style, {
1028      position: 'fixed', zIndex: Z.bar,
1029      display: 'none', opacity: '0',
1030      transform: 'translateY(6px)',
1031      transition: 'opacity 0.25s ' + EASE + ', transform 0.3s ' + EASE,
1032      background: BP.surface,
1033      border: '1px solid ' + BP.border,
1034      borderRadius: '8px',
1035      boxShadow: BP.shadow,
1036      transition: 'box-shadow 0.2s ease, opacity 0.25s ' + EASE + ', transform 0.3s ' + EASE,
1037      fontFamily: FONT, fontSize: '13px', color: BP.text,
1038      padding: '5px',
1039      maxWidth: '560px', minWidth: '340px',
1040    });
1041    uiAppend(barEl);
1042    defangOutsideHandlers(barEl);
1043  }
1044 
1045  function positionBar() {
1046    if (!barEl) return;
1047    const barH = barEl.offsetHeight || 44;
1048    const barW = barEl.offsetWidth || 380;
1049    const GLOBAL_BAR_RESERVE = 64; // global bar height + bottom margin + breathing room
1050    const GAP = 8;
1051 
1052    // Recovery pins to document.body when the picked element is off-screen or
1053    // missing. Center the generating bar above the global bar instead of
1054    // stacking a duplicate toast in the same slot.
1055    if (recoveryWaitingForAnchor) {
1056      const barRect = globalBarEl?.getBoundingClientRect();
1057      const reserve = barRect && barRect.height > 0
1058        ? Math.max(GLOBAL_BAR_RESERVE, window.innerHeight - barRect.top + 12)
1059        : GLOBAL_BAR_RESERVE;
1060      const top = window.innerHeight - barH - reserve;
1061      const left = Math.max(GAP, (window.innerWidth - barW) / 2);
1062      Object.assign(barEl.style, { top: top + 'px', left: left + 'px' });
1063      return;
1064    }
1065 
1066    const anchor = resolveBarAnchor();
1067    if (!anchor) return;
1068    const r = anchor.getBoundingClientRect();
1069 
1070    // Prefer below the element; fall back to above; if neither fits (element
1071    // taller than viewport), pin to a stable viewport anchor so the bar
1072    // doesn't teleport between top and bottom as the user scrolls.
1073    let top;
1074    const belowTop = r.bottom + GAP;
1075    const aboveTop = r.top - barH - GAP;
1076    if (belowTop + barH + GAP <= window.innerHeight - GLOBAL_BAR_RESERVE) {
1077      top = belowTop;
1078    } else if (aboveTop >= GAP) {
1079      top = aboveTop;
1080    } else {
1081      top = window.innerHeight - barH - GLOBAL_BAR_RESERVE;
1082    }
1083 
1084    let left = r.left + (r.width - barW) / 2;
1085    if (left < GAP) left = GAP;
1086    if (left + barW > window.innerWidth - GAP) left = window.innerWidth - barW - GAP;
1087    Object.assign(barEl.style, { top: top + 'px', left: left + 'px' });
1088  }
1089 
1090  function showBar(mode) {
1091    barHideSeq += 1;
1092    if (mode === 'cycling' && !ensureCyclingRenderable('show-bar')) return;
1093    barEl.innerHTML = '';
1094    if (mode === 'configure') {
1095      barEl.appendChild(configureKind === 'insert' ? buildInsertConfigureRow() : buildConfigureRow());
1096      if (configureKind === 'insert') syncInsertCreateButton();
1097      applyConfigureBarChrome();
1098    } else {
1099      restorePickerBarChrome();
1100      if (mode === 'generating') {
1101        if (recoveryWaitingForAnchor) dismissToast();
1102        barEl.appendChild(buildGeneratingRow());
1103      } else if (mode === 'cycling') barEl.appendChild(buildCyclingRow());
1104    }
1105    barEl.style.display = 'block';
1106    positionBar();
1107    requestAnimationFrame(() => {
1108      barEl.style.opacity = '1';
1109      barEl.style.transform = 'translateY(0)';
1110      syncPageChatFocus('show-bar');
1111    });
1112  }
1113 
1114  function hideBar() {
1115    if (!barEl) return;
1116    const hideSeq = ++barHideSeq;
1117    stopVoice({ suppressSubmit: true });
1118    if (configureKind === 'insert') clearInsertPicking();
1119    barEl.style.opacity = '0';
1120    barEl.style.transform = 'translateY(6px)';
1121    setTimeout(() => { if (barEl && hideSeq === barHideSeq) barEl.style.display = 'none'; }, 250);
1122    hideActionPicker();
1123    closeTunePopover();
1124    hideConfigureBarTooltip();
1125    if (state === 'EDITING') restoreInlineEditDrafts();
1126    disableInlineEdit();
1127  }
1128 
1129  function updateBarContent(mode) {
1130    if (!barEl || barEl.style.display === 'none') return;
1131    if (mode === 'cycling' && !ensureCyclingRenderable('update-bar')) return;
1132    barEl.innerHTML = '';
1133    if (mode === 'configure') {
1134      barEl.appendChild(configureKind === 'insert' ? buildInsertConfigureRow() : buildConfigureRow());
1135      if (configureKind === 'insert') syncInsertCreateButton();
1136      applyConfigureBarChrome();
1137    } else {
1138      restorePickerBarChrome();
1139      if (mode === 'generating') barEl.appendChild(buildGeneratingRow());
1140      else if (mode === 'cycling') barEl.appendChild(buildCyclingRow());
1141      else if (mode === 'saving') barEl.appendChild(buildSavingRow());
1142      else if (mode === 'confirmed') {
1143        barEl.appendChild(buildConfirmedRow());
1144        barEl.style.background = 'oklch(95% 0.05 145)';
1145        barEl.style.border = '1px solid oklch(75% 0.12 145 / 0.4)';
1146      }
1147    }
1148    syncPageChatFocus('update-bar-content');
1149  }
1150 
1151  // Configure row: the floating bar surface IS the input; modifier pills sit left of the field.
1152 
1153  const CONFIGURE_BAR_H = '36px';
1154  // Compact selection pill + 7px inset balances vertical centering in the 36px bar.
1155  const CONFIGURE_BAR_INSET = '7px';
1156  const CONFIGURE_PILL_RADIUS = '7px';
1157  const CONFIGURE_SELECTION_PILL_BORDER = '1px solid oklch(70% 0.12 188)';
1158  const CONFIGURE_SELECTION_PILL_PAD = '1px 4px';
1159  const CONFIGURE_ROW_FONT_SIZE = '12px';
1160  const CONFIGURE_ROW_TRACK_H = '18px';
1161  const CONFIGURE_PILL_PAD_Y = '3px';
1162  const CONFIGURE_BAR_SURFACE = 'oklch(15% 0.008 95)';
1163  const CONFIGURE_PILL_TEXT = 'oklch(94% 0.02 82)';
1164  const ICON_CONFIGURE_SUBMIT =
1165    '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>';
1166 
1167  function applyConfigureBarChrome() {
1168    if (!barEl) return;
1169    barEl.dataset.configureSurface = 'true';
1170    barEl.style.padding = '0';
1171    barEl.style.background = CONFIGURE_BAR_SURFACE;
1172    barEl.style.overflow = 'hidden';
1173    syncConfigureInputChrome();
1174  }
1175 
1176  function restorePickerBarChrome() {
1177    if (!barEl) return;
1178    barEl.dataset.configureSurface = 'false';
1179    barEl.removeAttribute('data-input-focused');
1180    barEl.removeAttribute('data-voice-listening');
1181    barEl.style.padding = '5px';
1182    barEl.style.background = BP.surface;
1183    barEl.style.overflow = '';
1184    barEl.style.border = '1px solid ' + BP.border;
1185    barEl.style.borderColor = BP.border;
1186    barEl.style.boxShadow = BP.shadow;
1187  }
1188 
1189  function syncConfigureInputChrome() {
1190    const input = uiGetById(PREFIX + '-input') || uiGetById(PREFIX + '-insert-input');
1191    const surface = barEl?.dataset.configureSurface === 'true' ? barEl : null;
1192    if (!surface || !input) return;
1193    const focused = activeElementDeep() === input;
1194    const listening = voiceListening && voiceCtx?.mode === 'configure';
1195    surface.dataset.inputFocused = focused ? 'true' : 'false';
1196    surface.dataset.voiceListening = listening ? 'true' : 'false';
1197    surface.style.borderColor = listening
1198      ? BP.patinaSoft
1199      : (focused ? BP.accentSoft : BP.border);
1200    surface.style.boxShadow = BP.shadow;
1201  }
1202 
1203  function configureBarPalette() {
1204    return BP || barPaletteForTheme(detectPageTheme());
1205  }
1206 
1207  function configureRowTextMetrics(extra = {}) {
1208    return {
1209      fontFamily: FONT,
1210      fontSize: CONFIGURE_ROW_FONT_SIZE,
1211      fontWeight: '500',
1212      lineHeight: CONFIGURE_ROW_TRACK_H,
1213      ...extra,
1214    };
1215  }
1216 
1217  function configureInputFieldStyle(extra = {}) {
1218    return {
1219      flex: '1', minWidth: '0', width: '100%',
1220      padding: '0', margin: '0',
1221      border: 'none', background: 'transparent',
1222      boxSizing: 'border-box',
1223      height: CONFIGURE_ROW_TRACK_H,
1224      color: CONFIGURE_PILL_TEXT,
1225      caretColor: CONFIGURE_PILL_TEXT,
1226      outline: 'none',
1227      ...configureRowTextMetrics(),
1228      ...extra,
1229    };
1230  }
1231 
1232  function configureInputShellStyle() {
1233    return {
1234      display: 'flex', alignItems: 'center', gap: '6px',
1235      flex: '1', minWidth: '0', height: '100%',
1236      padding: '0 6px 0 ' + CONFIGURE_BAR_INSET,
1237    };
1238  }
1239 
1240  function configureSelectionPillStyle(extra = {}) {
1241    const P = configureBarPalette();
1242    return {
1243      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
1244      gap: '2px', height: 'auto', flexShrink: '0',
1245      padding: CONFIGURE_SELECTION_PILL_PAD,
1246      boxSizing: 'border-box',
1247      border: CONFIGURE_SELECTION_PILL_BORDER,
1248      borderRadius: CONFIGURE_PILL_RADIUS,
1249      background: 'transparent',
1250      color: P.patina,
1251      cursor: 'pointer',
1252      transition: 'background 0.15s ease, color 0.15s ease, border-color 0.15s ease',
1253      whiteSpace: 'nowrap',
1254      ...configureRowTextMetrics({
1255        fontFamily: MONO, fontWeight: '600', letterSpacing: '-0.01em',
1256      }),
1257      ...extra,
1258    };
1259  }
1260 
1261  function configureModifierPillStyle(extra = {}) {
1262    const P = configureBarPalette();
1263    return {
1264      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
1265      gap: '2px', height: 'auto', minHeight: CONFIGURE_ROW_TRACK_H,
1266      padding: CONFIGURE_PILL_PAD_Y + ' 8px', flexShrink: '0',
1267      boxSizing: 'border-box',
1268      border: '1px solid transparent',
1269      borderRadius: CONFIGURE_PILL_RADIUS,
1270      background: 'transparent',
1271      color: P.textDim, cursor: 'pointer',
1272      transition: 'background 0.15s ease, color 0.15s ease, border-color 0.15s ease',
1273      whiteSpace: 'nowrap',
1274      ...configureRowTextMetrics(),
1275      ...extra,
1276    };
1277  }
1278 
1279  function configureInlineControlStyle(extra = {}) {
1280    const P = configureBarPalette();
1281    return {
1282      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
1283      gap: '2px', height: CONFIGURE_ROW_TRACK_H, flexShrink: '0',
1284      padding: '0', margin: '0',
1285      boxSizing: 'border-box',
1286      border: 'none', borderRadius: '0',
1287      background: 'transparent',
1288      color: P.textDim, cursor: 'pointer',
1289      transition: 'color 0.12s ease, background 0.12s ease',
1290      whiteSpace: 'nowrap',
1291      ...configureRowTextMetrics(),
1292      ...extra,
1293    };
1294  }
1295 
1296  function bindConfigureInlineControlHover(btn, controlsLocked) {
1297    btn.addEventListener('mouseenter', () => {
1298      if (controlsLocked) return;
1299      const P = configureBarPalette();
1300      btn.style.color = P.text;
1301    });
1302    btn.addEventListener('mouseleave', () => {
1303      if (controlsLocked) return;
1304      btn.style.color = configureBarPalette().textDim;
1305    });
1306  }
1307 
1308  function bindConfigureModifierPillHover(btn, controlsLocked) {
1309    btn.addEventListener('mouseenter', () => {
1310      if (controlsLocked) return;
1311      const P = configureBarPalette();
1312      btn.style.color = P.text;
1313      btn.style.background = P.toggleActive;
1314    });
1315    btn.addEventListener('mouseleave', () => {
1316      if (controlsLocked) return;
1317      const P = configureBarPalette();
1318      btn.style.color = P.textDim;
1319      btn.style.background = 'transparent';
1320    });
1321  }
1322 
1323  let configureBarTooltipEl = null;
1324 
1325  function ensureConfigureBarTooltip() {
1326    if (configureBarTooltipEl) return configureBarTooltipEl;
1327    const P = configureBarPalette();
1328    configureBarTooltipEl = el('div', {
1329      position: 'fixed',
1330      display: 'none',
1331      zIndex: String(Z.bar + 7),
1332      pointerEvents: 'none',
1333      maxWidth: 'min(360px, calc(100vw - 16px))',
1334      padding: '6px 9px',
1335      borderRadius: '7px',
1336      background: P.chatSurface,
1337      border: '1px solid ' + P.hairline,
1338      boxShadow: P.shadow,
1339      color: P.text,
1340      fontFamily: FONT,
1341      fontSize: '11px',
1342      fontWeight: '500',
1343      lineHeight: '1.35',
1344      letterSpacing: '0.01em',
1345      whiteSpace: 'normal',
1346      wordBreak: 'break-word',
1347    });
1348    configureBarTooltipEl.id = PREFIX + '-configure-bar-tooltip';
1349    uiAppend(configureBarTooltipEl);
1350    return configureBarTooltipEl;
1351  }
1352 
1353  function showConfigureBarTooltip(anchor, message) {
1354    if (!anchor || !message) return;
1355    const tip = ensureConfigureBarTooltip();
1356    tip.textContent = message;
1357    tip.style.transition = 'none';
1358    tip.style.display = 'block';
1359    tip.style.opacity = '1';
1360    const r = anchor.getBoundingClientRect();
1361    const tipW = tip.offsetWidth;
1362    const tipH = tip.offsetHeight;
1363    const left = Math.max(8, Math.min(window.innerWidth - tipW - 8, r.left + r.width / 2 - tipW / 2));
1364    const top = Math.max(8, r.top - tipH - 8);
1365    tip.style.left = left + 'px';
1366    tip.style.top = top + 'px';
1367  }
1368 
1369  function hideConfigureBarTooltip() {
1370    if (!configureBarTooltipEl) return;
1371    configureBarTooltipEl.style.display = 'none';
1372    configureBarTooltipEl.style.opacity = '0';
1373  }
1374 
1375  function selectionTagLabel(el) {
1376    if (!el) return '';
1377    if (el.hasAttribute?.('data-impeccable-insert-placeholder')) return 'slot';
1378    return el.tagName.toLowerCase();
1379  }
1380 
1381  function elementPath(el, maxDepth = 8) {
1382    if (!el) return '';
1383    const parts = [];
1384    let node = el;
1385    while (node && node.nodeType === 1 && node !== document.body) {
1386      let part = node.tagName.toLowerCase();
1387      if (node.id) part += '#' + node.id;
1388      else if (node.classList?.length) part += '.' + [...node.classList].slice(0, 2).join('.');
1389      parts.unshift(part);
1390      node = node.parentElement;
1391      if (parts.length >= maxDepth) break;
1392    }
1393    return parts.join(' \u203a ');
1394  }
1395 
1396  function variantCountTooltipText(count) {
1397    const n = Number(count) || selectedCount;
1398    const word = n === 1 ? 'variant' : 'variants';
1399    return 'Click to change \u00b7 ' + n + ' ' + word;
1400  }
1401 
1402  function removeConfigureSelection() {
1403    hideConfigureBarTooltip();
1404    if (configureKind === 'insert') {
1405      cancelInsertConfigure();
1406      return;
1407    }
1408    selectedElement = null;
1409    exitConfigureToPicking('selection-pill-remove', { clearHover: true });
1410  }
1411 
1412  function buildSelectionPill({ el: targetEl, controlsLocked }) {
1413    const tag = selectionTagLabel(targetEl);
1414    const path = elementPath(targetEl);
1415    const P = configureBarPalette();
1416    const pill = el('button', configureSelectionPillStyle({ minWidth: '32px' }));
1417    pill.id = PREFIX + '-selection-pill';
1418    pill.type = 'button';
1419    pill.setAttribute('aria-label', 'Selected element: ' + tag);
1420    pill.disabled = controlsLocked;
1421    pill.style.cursor = controlsLocked ? 'not-allowed' : 'pointer';
1422    pill.style.opacity = controlsLocked ? '0.58' : '1';
1423    pill.style.flexShrink = '0';
1424 
1425    const faceStack = el('span', {
1426      display: 'grid', placeItems: 'center',
1427      width: '100%', minWidth: '1.25em',
1428      lineHeight: CONFIGURE_ROW_TRACK_H,
1429    });
1430    const tagFace = el('span', {
1431      gridArea: '1 / 1',
1432      transition: 'opacity 0.12s ease',
1433      color: P.patina,
1434    });
1435    const clearFace = el('span', {
1436      gridArea: '1 / 1',
1437      opacity: '0',
1438      transition: 'opacity 0.12s ease',
1439      color: 'oklch(58% 0.15 35)',
1440    });
1441    tagFace.textContent = tag;
1442    clearFace.textContent = '\u00D7';
1443    faceStack.appendChild(tagFace);
1444    faceStack.appendChild(clearFace);
1445    pill.appendChild(faceStack);
1446 
1447    const setArmed = (armed) => {
1448      tagFace.style.opacity = armed ? '0' : '1';
1449      clearFace.style.opacity = armed ? '1' : '0';
1450      pill.style.background = armed ? P.toggleActive : 'transparent';
1451      pill.style.border = CONFIGURE_SELECTION_PILL_BORDER;
1452      pill.setAttribute('aria-label', armed ? 'Clear selection' : 'Selected element: ' + tag);
1453    };
1454    const arm = () => {
1455      if (controlsLocked) {
1456        showConfigureBarTooltip(pill, 'Apply is still running');
1457        return;
1458      }
1459      setArmed(true);
1460      if (path) showConfigureBarTooltip(pill, path);
1461    };
1462    const disarm = () => {
1463      hideConfigureBarTooltip();
1464      setArmed(false);
1465    };
1466    pill.addEventListener('mouseenter', arm);
1467    pill.addEventListener('mouseleave', disarm);
1468    pill.addEventListener('focus', arm);
1469    pill.addEventListener('blur', disarm);
1470    pill.addEventListener('click', (e) => {
1471      e.stopPropagation();
1472      if (controlsLocked) { showManualApplyBusyToast(); return; }
1473      removeConfigureSelection();
1474    });
1475    return pill;
1476  }
1477 
1478  function bindConfigureCountPillTooltip(count, controlsLocked) {
1479    count.removeAttribute('title');
1480    count.addEventListener('mouseenter', () => {
1481      if (controlsLocked) {
1482        showConfigureBarTooltip(count, 'Apply is still running');
1483        return;
1484      }
1485      showConfigureBarTooltip(count, variantCountTooltipText(selectedCount));
1486    });
1487    count.addEventListener('mouseleave', hideConfigureBarTooltip);
1488  }
1489 
1490  function buildConfigureActionControl({ controlsLocked, onClick }) {
1491    const control = el('button', configureInlineControlStyle());
1492    const label = document.createElement('span');
1493    label.textContent = actionLabel();
1494    const caret = el('span', {
1495      fontSize: '10px', lineHeight: '1',
1496      marginLeft: '2px', pointerEvents: 'none',
1497      color: 'inherit',
1498    });
1499    caret.textContent = '\u25BE';
1500    caret.setAttribute('aria-hidden', 'true');
1501    control.appendChild(label);
1502    control.appendChild(caret);
1503    control.disabled = controlsLocked;
1504    control.style.cursor = controlsLocked ? 'not-allowed' : 'pointer';
1505    control.style.opacity = controlsLocked ? '0.58' : '1';
1506    bindConfigureInlineControlHover(control, controlsLocked);
1507    control.addEventListener('click', onClick);
1508    return control;
1509  }
1510 
1511  const VARIANT_COUNT_MIN = 1;
1512  const VARIANT_COUNT_MAX = 4;
1513 
1514  function cycleSelectedCount() {
1515    if (selectedCount >= VARIANT_COUNT_MAX) selectedCount = VARIANT_COUNT_MIN;
1516    else selectedCount += 1;
1517    return selectedCount;
1518  }
1519 
1520  function buildConfigureCountControl({ controlsLocked, onClick }) {
1521    const count = el('button', configureInlineControlStyle({
1522      fontFamily: MONO, fontWeight: '600', letterSpacing: '0',
1523    }));
1524    count.textContent = '\u00D7' + selectedCount;
1525    count.disabled = controlsLocked;
1526    count.style.cursor = controlsLocked ? 'not-allowed' : 'pointer';
1527    count.style.opacity = controlsLocked ? '0.58' : '1';
1528    bindConfigureInlineControlHover(count, controlsLocked);
1529    bindConfigureCountPillTooltip(count, controlsLocked);
1530    count.addEventListener('click', onClick);
1531    return count;
1532  }
1533 
1534  function buildConfigureVoiceButton({ id, controlsLocked, onClick }) {
1535    const voiceBtn = el('button', {
1536      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
1537      boxSizing: 'border-box',
1538      width: CONFIGURE_BAR_H, height: '100%', flexShrink: '0',
1539      padding: '0', margin: '0',
1540      border: 'none', borderRight: '1px solid ' + BP.hairline,
1541      borderRadius: '0', background: 'transparent',
1542      color: BP.textDim, cursor: 'pointer',
1543      transition: 'color 0.12s ease, background 0.12s ease',
1544    });
1545    voiceBtn.id = id;
1546    voiceBtn.type = 'button';
1547    voiceBtn.setAttribute('aria-label', 'Voice input');
1548    voiceBtn.innerHTML = ICON_PAGE_VOICE;
1549    voiceBtn.disabled = controlsLocked;
1550    voiceBtn.style.cursor = controlsLocked ? 'not-allowed' : 'pointer';
1551    voiceBtn.style.opacity = controlsLocked ? '0.58' : '1';
1552    voiceBtn.addEventListener('mousedown', (e) => e.stopPropagation());
1553    voiceBtn.addEventListener('click', onClick);
1554    return voiceBtn;
1555  }
1556 
1557  function buildConfigureTrailingCluster(controls, voiceBtn, submitBtn) {
1558    const cluster = el('div', {
1559      display: 'inline-flex', alignItems: 'stretch', flexShrink: '0',
1560      height: '100%', borderLeft: '1px solid ' + BP.hairline,
1561    });
1562    if (controls.length) {
1563      const controlsWrap = el('div', {
1564        display: 'inline-flex', alignItems: 'center', gap: '8px',
1565        padding: '0 10px', flexShrink: '0', height: '100%',
1566      });
1567      controls.forEach((control) => controlsWrap.appendChild(control));
1568      cluster.appendChild(controlsWrap);
1569    }
1570    voiceBtn.style.borderLeft = '1px solid ' + BP.hairline;
1571    cluster.appendChild(voiceBtn);
1572    cluster.appendChild(submitBtn);
1573    return cluster;
1574  }
1575 
1576  function buildConfigureSubmitButton({ controlsLocked, onClick, ariaLabel }) {
1577    const btn = el('button', {
1578      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
1579      boxSizing: 'border-box', width: CONFIGURE_BAR_H, height: CONFIGURE_BAR_H,
1580      padding: '0', flexShrink: '0',
1581      border: 'none', borderLeft: '1px solid ' + BP.hairline,
1582      borderRadius: '0',
1583      background: BP.accent, color: C.ink,
1584      cursor: controlsLocked ? 'not-allowed' : 'pointer',
1585      transition: 'filter 0.12s ease, transform 0.1s ease',
1586    });
1587    btn.type = 'button';
1588    btn.setAttribute('aria-label', ariaLabel);
1589    btn.innerHTML = ICON_CONFIGURE_SUBMIT;
1590    btn.disabled = controlsLocked;
1591    btn.style.opacity = controlsLocked ? '0.58' : '1';
1592    if (controlsLocked) btn.title = 'Apply is still running';
1593    btn.addEventListener('mouseenter', () => { if (!controlsLocked) btn.style.filter = 'brightness(1.1)'; });
1594    btn.addEventListener('mouseleave', () => btn.style.filter = 'none');
1595    btn.addEventListener('mousedown', () => { if (!controlsLocked) btn.style.transform = 'scale(0.97)'; });
1596    btn.addEventListener('mouseup', () => btn.style.transform = 'scale(1)');
1597    btn.addEventListener('click', onClick);
1598    return btn;
1599  }
1600 
1601  // Insert mode helpers (mirrors skill/scripts/live/insert-ui.mjs)
1602 
1603  function detectInsertAxisFromStyle(style) {
1604    const display = style?.display || 'block';
1605    if (display.includes('flex')) {
1606      const dir = style.flexDirection || 'row';
1607      return dir.startsWith('row') ? 'row' : 'column';
1608    }
1609    if (display === 'grid' || display === 'inline-grid') {
1610      const flow = style.gridAutoFlow || 'row';
1611      if (flow.includes('column')) return 'column';
1612      const cols = (style.gridTemplateColumns || '').trim();
1613      if (cols && cols !== 'none') {
1614        const colCount = cols.split(/\s+/).filter(Boolean).length;
1615        if (colCount > 1) return 'row';
1616      }
1617      return 'row';
1618    }
1619    return 'column';
1620  }
1621 
1622  function detectInsertAxis(parent) {
1623    if (!parent || parent.nodeType !== 1) return 'column';
1624    const st = getComputedStyle(parent);
1625    return detectInsertAxisFromStyle({
1626      display: st.display,
1627      flexDirection: st.flexDirection,
1628      gridTemplateColumns: st.gridTemplateColumns,
1629      gridAutoFlow: st.gridAutoFlow,
1630    });
1631  }
1632 
1633  function layoutFlowChildren(parent) {
1634    if (!parent) return [];
1635    return [...parent.children]
1636      .filter(pickable)
1637      .map((el) => ({ el, rect: el.getBoundingClientRect() }));
1638  }
1639 
1640  function computeInsertPosition(clientX, clientY, rect, axis) {
1641    axis = axis || 'column';
1642    if (!rect) return 'after';
1643    if (axis === 'row') {
1644      if (!Number.isFinite(rect.width) || rect.width <= 0) return 'after';
1645      return clientX < rect.left + rect.width / 2 ? 'before' : 'after';
1646    }
1647    if (!Number.isFinite(rect.height) || rect.height <= 0) return 'after';
1648    return clientY < rect.top + rect.height / 2 ? 'before' : 'after';
1649  }
1650 
1651  function groupSiblingRows(siblings, rowThreshold) {
1652    rowThreshold = rowThreshold ?? 8;
1653    const sorted = [...siblings].sort((a, b) => a.rect.top - b.rect.top || a.rect.left - b.rect.left);
1654    const rows = [];
1655    for (const entry of sorted) {
1656      let placed = false;
1657      for (const row of rows) {
1658        if (Math.abs(entry.rect.top - row[0].rect.top) <= rowThreshold) {
1659          row.push(entry);
1660          placed = true;
1661          break;
1662        }
1663      }
1664      if (!placed) rows.push([entry]);
1665    }
1666    return rows;
1667  }
1668 
1669  function horizontalOverlap(a, b) {
1670    const left = Math.max(a.left, b.left);
1671    const right = Math.min(a.right, b.right);
1672    return Math.max(0, right - left);
1673  }
1674 
1675  function hitSiblingInsertGap(clientX, clientY, siblings, opts) {
1676    opts = opts || {};
1677    if (!siblings || siblings.length < 2) return null;
1678    const slop = opts.slop ?? 12;
1679    const minOverlap = opts.minOverlap ?? 0.25;
1680 
1681    for (const row of groupSiblingRows(siblings)) {
1682      if (row.length < 2) continue;
1683      const sorted = [...row].sort((a, b) => a.rect.left - b.rect.left);
1684      for (let i = 0; i < sorted.length - 1; i++) {
1685        const a = sorted[i];
1686        const b = sorted[i + 1];
1687        const aRight = a.rect.right;
1688        const bLeft = b.rect.left;
1689        if (bLeft <= aRight) continue;
1690        const top = Math.max(a.rect.top, b.rect.top);
1691        const bottom = Math.min(a.rect.bottom, b.rect.bottom);
1692        const span = bottom - top;
1693        const minH = Math.min(a.rect.height, b.rect.height);
1694        if (span < minH * minOverlap) continue;
1695        const inX = clientX >= aRight - slop && clientX <= bLeft + slop;
1696        const inY = clientY >= top - slop && clientY <= bottom + slop;
1697        if (!inX || !inY) continue;
1698        return {
1699          anchor: b.el,
1700          position: 'before',
1701          axis: 'row',
1702          line: { axis: 'row', left: (aRight + bLeft) / 2, top, width: 0, height: span },
1703        };
1704      }
1705    }
1706 
1707    const sortedCol = [...siblings].sort((a, b) => a.rect.top - b.rect.top || a.rect.left - b.rect.left);
1708    for (let i = 0; i < sortedCol.length - 1; i++) {
1709      const a = sortedCol[i];
1710      const b = sortedCol[i + 1];
1711      const overlap = horizontalOverlap(a.rect, b.rect);
1712      const minW = Math.min(a.rect.width, b.rect.width);
1713      if (overlap < minW * minOverlap) continue;
1714      const gapTop = a.rect.bottom;
1715      const gapBottom = b.rect.top;
1716      if (gapBottom <= gapTop) continue;
1717      const overlapLeft = Math.max(a.rect.left, b.rect.left);
1718      const overlapRight = Math.min(a.rect.right, b.rect.right);
1719      const inY = clientY >= gapTop - slop && clientY <= gapBottom + slop;
1720      const inX = clientX >= overlapLeft - slop && clientX <= overlapRight + slop;
1721      if (!inY || !inX) continue;
1722      return {
1723        anchor: b.el,
1724        position: 'before',
1725        axis: 'column',
1726        line: { axis: 'column', top: (gapTop + gapBottom) / 2, left: overlapLeft, width: overlap, height: 0 },
1727      };
1728    }
1729    return null;
1730  }
1731 
1732  function insertLineCoords(rect, position, axis) {
1733    axis = axis || 'column';
1734    if (axis === 'row') {
1735      const x = position === 'before' ? rect.left - 2 : rect.right + 2;
1736      return { axis: 'row', top: rect.top, left: x, width: 0, height: rect.height };
1737    }
1738    const y = position === 'before' ? rect.top - 2 : rect.bottom + 2;
1739    return { axis: 'column', top: y, left: rect.left, width: rect.width, height: 0 };
1740  }
1741 
1742  function resolveInsertHover({ clientX, clientY, target, rect, axis, siblings }) {
1743    const gap = hitSiblingInsertGap(clientX, clientY, siblings);
1744    if (gap) return gap;
1745    const position = computeInsertPosition(clientX, clientY, rect, axis);
1746    const line = insertLineCoords(rect, position, axis);
1747    return { anchor: target, position, axis, line };
1748  }
1749 
1750  function cursorForInsertAxis(axis) {
1751    return axis === 'row' ? 'ew-resize' : 'ns-resize';
1752  }
1753 
1754  function placeholderSizing({ axis, parentDisplay, parentWidth, anchorFlex }) {
1755    const display = parentDisplay || 'block';
1756    const w = Number.isFinite(parentWidth) ? parentWidth : 0;
1757    if (axis === 'row') {
1758      if (display.includes('flex')) {
1759        const flex = anchorFlex && anchorFlex !== 'none' && anchorFlex !== '0 1 auto'
1760          ? anchorFlex
1761          : '1 1 0';
1762        return { kind: 'flex', flex, minWidth: 0 };
1763      }
1764      if (display === 'grid' || display === 'inline-grid') return { kind: 'auto' };
1765    }
1766    if (w >= PLACEHOLDER_MIN_WIDTH) return { kind: 'percent' };
1767    return {
1768      kind: 'explicit',
1769      width: Math.max(PLACEHOLDER_MIN_WIDTH, w || PLACEHOLDER_MIN_WIDTH),
1770    };
1771  }
1772 
1773  function placeholderWidthIsImplicit(kind) {
1774    return kind === 'flex' || kind === 'percent' || kind === 'auto';
1775  }
1776 
1777  function applyPlaceholderSizingStyles(placeholder, sizing) {
1778    placeholder.dataset.impeccablePlaceholderWidth = sizing.kind;
1779    placeholder.style.flex = '';
1780    placeholder.style.minWidth = '';
1781    placeholder.style.maxWidth = '';
1782    placeholder.style.width = '';
1783    if (sizing.kind === 'flex') {
1784      placeholder.style.flex = sizing.flex;
1785      placeholder.style.minWidth = sizing.minWidth + 'px';
1786    } else if (sizing.kind === 'percent') {
1787      placeholder.style.width = '100%';
1788      placeholder.style.maxWidth = '100%';
1789    } else if (sizing.kind === 'explicit') {
1790      placeholder.style.width = sizing.width + 'px';
1791    }
1792  }
1793 
1794  function materializePlaceholderWidth(placeholder) {
1795    if (!placeholder) return;
1796    const kind = placeholder.dataset.impeccablePlaceholderWidth;
1797    if (!placeholderWidthIsImplicit(kind)) return;
1798    const w = Math.max(PLACEHOLDER_MIN_WIDTH, Math.round(placeholder.offsetWidth));
1799    placeholder.style.flex = '';
1800    placeholder.style.minWidth = '';
1801    placeholder.style.maxWidth = '';
1802    placeholder.style.width = w + 'px';
1803    placeholder.dataset.impeccablePlaceholderWidth = 'explicit';
1804  }
1805 
1806  function canCreateInsert({ prompt, comments, strokes }) {
1807    const hasPrompt = typeof prompt === 'string' && prompt.trim().length > 0;
1808    const hasComments = Array.isArray(comments) && comments.length > 0;
1809    const hasStrokes = Array.isArray(strokes) && strokes.some(
1810      (s) => Array.isArray(s?.points) && s.points.length >= 2,
1811    );
1812    return hasPrompt || hasComments || hasStrokes;
1813  }
1814 
1815  function insertCreateDisabledReason({ prompt, comments, strokes }) {
1816    if (canCreateInsert({ prompt, comments, strokes })) return null;
1817    return 'Add a prompt or annotate the placeholder to create';
1818  }
1819 
1820  function clampPlaceholderSize(width, height, parentWidth) {
1821    const maxW = Math.max(PLACEHOLDER_MIN_WIDTH, parentWidth || PLACEHOLDER_MIN_WIDTH);
1822    return {
1823      width: Math.min(maxW, Math.max(PLACEHOLDER_MIN_WIDTH, Math.round(width))),
1824      height: Math.max(PLACEHOLDER_MIN_HEIGHT, Math.round(height)),
1825    };
1826  }
1827 
1828  function cursorForPlaceholderEdge(edge) {
1829    if (edge === 'n' || edge === 's') return 'ns-resize';
1830    if (edge === 'e' || edge === 'w') return 'ew-resize';
1831    return 'default';
1832  }
1833 
1834  function resizePlaceholderFromEdge(start, edge, dx, dy, parentWidth) {
1835    const base = {
1836      width: start.width,
1837      height: start.height,
1838      marginLeft: start.marginLeft ?? 0,
1839      marginTop: start.marginTop ?? 0,
1840    };
1841    if (edge === 'e') base.width = start.width + dx;
1842    else if (edge === 'w') {
1843      base.width = start.width - dx;
1844      base.marginLeft = start.marginLeft + dx;
1845    } else if (edge === 's') base.height = start.height + dy;
1846    else if (edge === 'n') {
1847      base.height = start.height - dy;
1848      base.marginTop = start.marginTop + dy;
1849    }
1850    const clamped = clampPlaceholderSize(base.width, base.height, parentWidth);
1851    if (edge === 'w') base.marginLeft = start.marginLeft + start.width - clamped.width;
1852    else if (edge === 'n') base.marginTop = start.marginTop + start.height - clamped.height;
1853    return {
1854      width: clamped.width,
1855      height: clamped.height,
1856      marginLeft: Math.round(base.marginLeft),
1857      marginTop: Math.round(base.marginTop),
1858    };
1859  }
1860 
1861  function ensureInsertLine() {
1862    if (insertLineEl) return insertLineEl;
1863    insertLineEl = document.createElement('div');
1864    insertLineEl.id = PREFIX + '-insert-line';
1865    Object.assign(insertLineEl.style, {
1866      position: 'fixed',
1867      zIndex: String(Z.highlight),
1868      height: '0',
1869      borderTop: '2px dotted ' + C.brand,
1870      pointerEvents: 'none',
1871      display: 'none',
1872      opacity: '0.9',
1873    });
1874    uiAppend(insertLineEl);
1875    defangOutsideHandlers(insertLineEl);
1876    return insertLineEl;
1877  }
1878 
1879  function showInsertLine(resolved) {
1880    if (!resolved?.anchor || !resolved.line) return;
1881    const line = ensureInsertLine();
1882    const coords = resolved.line;
1883    if (coords.axis === 'row') {
1884      Object.assign(line.style, {
1885        display: 'block',
1886        top: coords.top + 'px',
1887        left: coords.left + 'px',
1888        width: '0',
1889        height: coords.height + 'px',
1890        borderTop: 'none',
1891        borderLeft: '2px dotted ' + C.brand,
1892      });
1893    } else {
1894      Object.assign(line.style, {
1895        display: 'block',
1896        top: coords.top + 'px',
1897        left: coords.left + 'px',
1898        width: coords.width + 'px',
1899        height: '0',
1900        borderLeft: 'none',
1901        borderTop: '2px dotted ' + C.brand,
1902      });
1903    }
1904    insertHoverAnchor = resolved.anchor;
1905    insertHoverPosition = resolved.position;
1906    insertHoverAxis = resolved.axis || 'column';
1907  }
1908 
1909  function hideInsertLine() {
1910    if (!insertLineEl) return;
1911    insertLineEl.style.display = 'none';
1912    insertHoverAnchor = null;
1913    insertHoverPosition = null;
1914    insertHoverAxis = null;
1915    syncPageInteractionCursor();
1916  }
1917 
1918  let pageInteractionCursorActive = false;
1919 
1920  function ensurePickCursorStyle() {
1921    if (document.getElementById(PREFIX + '-pick-cursor-style')) return;
1922    const style = document.createElement('style');
1923    style.id = PREFIX + '-pick-cursor-style';
1924    style.textContent =
1925      'html.' + PICK_CURSOR_CLASS + ' * { cursor: crosshair !important; }\n'
1926      + 'html.' + PICK_CURSOR_CLASS + ' [id^="' + PREFIX + '"],\n'
1927      + 'html.' + PICK_CURSOR_CLASS + ' [id^="' + PREFIX + '"] * { cursor: revert !important; }';
1928    // Styles the host page, not the chrome - inside the adapter's shadow UI
1929    // root (uiAppendStyle's target) these selectors would match nothing.
1930    document.head.appendChild(style);
1931  }
1932 
1933  /** Page-level cursor while pick or insert mode is targeting page elements. */
1934  function syncPageInteractionCursor() {
1935    const pickCursor = state === 'PICKING' && pickActive && !insertActive;
1936    let axisCursor = '';
1937    if (state === 'PICKING' && insertActive) {
1938      axisCursor = insertHoverAnchor ? cursorForInsertAxis(insertHoverAxis || 'column') : '';
1939    }
1940 
1941    if (pickCursor) {
1942      ensurePickCursorStyle();
1943      document.documentElement.classList.add(PICK_CURSOR_CLASS);
1944      document.documentElement.style.cursor = '';
1945      pageInteractionCursorActive = true;
1946      return;
1947    }
1948 
1949    document.documentElement.classList.remove(PICK_CURSOR_CLASS);
1950    if (axisCursor) {
1951      document.documentElement.style.cursor = axisCursor;
1952      pageInteractionCursorActive = true;
1953    } else if (pageInteractionCursorActive) {
1954      document.documentElement.style.cursor = '';
1955      pageInteractionCursorActive = false;
1956    }
1957  }
1958 
1959  /**
1960   * Single entry point for interaction-state transitions. The pick-mode
1961   * crosshair is derived from `state`, so a bare `state = ...` assignment
1962   * leaves the page cursor out of sync with the mode it advertises.
1963   */
1964  function setLiveState(next) {
1965    state = next;
1966    syncPageInteractionCursor();
1967  }
1968 
1969  /** Element used to position the floating bar / shader during a session. */
1970  function resolveBarAnchor() {
1971    if (svelteComponentSession?.sessionId === currentSessionId && (state === 'GENERATING' || state === 'CYCLING')) {
1972      const anchor = resolveSvelteComponentAnchor();
1973      if (anchor) return anchor;
1974    }
1975    if (currentSessionId && (state === 'GENERATING' || state === 'CYCLING')) {
1976      const wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]');
1977      if (wrapper) {
1978        const variantCount = wrapper.querySelectorAll('[data-impeccable-variant]:not([data-impeccable-variant="original"])').length;
1979        if (variantCount > 0 && visibleVariant > 0) {
1980          const visEl = pickVariantContent(wrapper, visibleVariant);
1981          if (visEl) return visEl;
1982        }
1983        if (state === 'GENERATING') {
1984          const ph = ensureInsertPlaceholder();
1985          if (ph) return ph;
1986          if (insertAnchorElement && document.body.contains(insertAnchorElement)) return insertAnchorElement;
1987        }
1988      }
1989    }
1990    if (selectedElement && document.body.contains(selectedElement)) return selectedElement;
1991    if (placeholderElement && document.body.contains(placeholderElement)) return placeholderElement;
1992    if (insertAnchorElement && document.body.contains(insertAnchorElement)) return insertAnchorElement;
1993    return null;
1994  }
1995 
1996  function removeInsertPlaceholderDom() {
1997    if (placeholderElement) {
1998      placeholderElement.remove();
1999      placeholderElement = null;
2000    }
2001    placeholderResizeDrag = null;
2002    syncPlaceholderResizeHandles();
2003  }
2004 
2005  function finalizeInsertSession() {
2006    removeInsertPlaceholderDom();
2007    insertAnchorElement = null;
2008    insertAnchorPosition = null;
2009    insertAnchorLayoutAxis = null;
2010    insertPlaceholderSnapshot = null;
2011    if (configureKind === 'insert') configureKind = 'replace';
2012  }
2013 
2014  function buildInsertPlaceholderSnapshotFromDom(anchor, placeholder) {
2015    return {
2016      width: Math.round(placeholder.offsetWidth || 0),
2017      height: Math.round(placeholder.offsetHeight || PLACEHOLDER_DEFAULT_HEIGHT),
2018      marginLeft: parseFloat(placeholder.style.marginLeft) || 0,
2019      marginTop: parseFloat(placeholder.style.marginTop) || 0,
2020      position: insertAnchorPosition || 'before',
2021      layoutAxis: insertAnchorLayoutAxis || 'column',
2022      anchorTag: anchor.tagName || 'DIV',
2023      anchorClasses: anchor.className || '',
2024      anchorText: (anchor.textContent || '').trim().slice(0, 120),
2025    };
2026  }
2027 
2028  function findInsertAnchorInDom() {
2029    if (insertAnchorElement && document.body.contains(insertAnchorElement)) return insertAnchorElement;
2030    const snap = insertPlaceholderSnapshot;
2031    if (!snap) return null;
2032    const tag = (snap.anchorTag || 'div').toLowerCase();
2033    const cls = (snap.anchorClasses || '').split(/\s+/).filter(Boolean)[0];
2034    const needle = snap.anchorText || '';
2035    const sel = cls ? tag + '.' + cls : tag;
2036    const candidates = document.querySelectorAll(sel);
2037    for (const candidate of candidates) {
2038      if (own(candidate)) continue;
2039      if (needle && !(candidate.textContent || '').includes(needle.slice(0, 40))) continue;
2040      return candidate;
2041    }
2042    return null;
2043  }
2044 
2045  function isInsertGeneratingSession() {
2046    if (state !== 'GENERATING' || !currentSessionId) return false;
2047    const wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]');
2048    return !!wrapper && wrapper.dataset.impeccableMode === 'insert';
2049  }
2050 
2051  /** Recreate the dotted placeholder if Astro/Vite HMR removed it mid-generation. */
2052  function ensureInsertPlaceholder() {
2053    if (!isInsertGeneratingSession()) return placeholderElement;
2054    const wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]');
2055    const variantCount = wrapper.querySelectorAll('[data-impeccable-variant]:not([data-impeccable-variant="original"])').length;
2056    if (variantCount > 0) return placeholderElement;
2057    if (placeholderElement && document.body.contains(placeholderElement)) return placeholderElement;
2058 
2059    const anchor = findInsertAnchorInDom();
2060    if (!anchor) return null;
2061 
2062    insertAnchorElement = anchor;
2063    const position = insertPlaceholderSnapshot?.position || insertAnchorPosition || 'before';
2064    const axis = insertPlaceholderSnapshot?.layoutAxis || insertAnchorLayoutAxis;
2065    const ph = createInsertPlaceholder(anchor, position, axis);
2066    if (!ph) return null;
2067 
2068    if (insertPlaceholderSnapshot) {
2069      applyPlaceholderDimensions({
2070        width: insertPlaceholderSnapshot.width,
2071        height: insertPlaceholderSnapshot.height,
2072        marginLeft: insertPlaceholderSnapshot.marginLeft,
2073        marginTop: insertPlaceholderSnapshot.marginTop,
2074      });
2075    }
2076    selectedElement = ph;
2077    return ph;
2078  }
2079 
2080  function applyPlaceholderDimensions({ width, height, marginLeft, marginTop }) {
2081    const ph = placeholderElement;
2082    if (!ph) return;
2083    materializePlaceholderWidth(ph);
2084    ph.style.width = width + 'px';
2085    ph.style.height = height + 'px';
2086    ph.style.marginLeft = marginLeft ? marginLeft + 'px' : '';
2087    ph.style.marginTop = marginTop ? marginTop + 'px' : '';
2088    positionAnnotOverlay(ph);
2089    positionBar();
2090  }
2091 
2092  function showOrUpdateCyclingBar() {
2093    if (barEl && barEl.style.display !== 'none') updateBarContent('cycling');
2094    else showBar('cycling');
2095  }
2096 
2097  function buildPlaceholderResizeHandles() {
2098    if (!placeholderResizeLayerEl) return;
2099    placeholderResizeLayerEl.innerHTML = '';
2100    const hit = 10;
2101    const half = hit / 2;
2102    const specs = [
2103      { edge: 'n', top: -half, left: 0, right: 0, height: hit },
2104      { edge: 's', bottom: -half, left: 0, right: 0, height: hit },
2105      { edge: 'e', top: 0, bottom: 0, right: -half, width: hit },
2106      { edge: 'w', top: 0, bottom: 0, left: -half, width: hit },
2107    ];
2108    for (const spec of specs) {
2109      const handle = el('div', {
2110        position: 'absolute',
2111        pointerEvents: 'auto',
2112        cursor: cursorForPlaceholderEdge(spec.edge),
2113      });
2114      if (spec.top != null) handle.style.top = spec.top + 'px';
2115      if (spec.bottom != null) handle.style.bottom = spec.bottom + 'px';
2116      if (spec.left != null) handle.style.left = spec.left + 'px';
2117      if (spec.right != null) handle.style.right = spec.right + 'px';
2118      if (spec.width != null) handle.style.width = spec.width + 'px';
2119      if (spec.height != null) handle.style.height = spec.height + 'px';
2120      handle.dataset.impeccablePlaceholderResize = spec.edge;
2121      handle.setAttribute('aria-label', 'Resize placeholder');
2122      handle.title = 'Drag to resize';
2123      placeholderResizeLayerEl.appendChild(handle);
2124    }
2125  }
2126 
2127  function syncPlaceholderResizeHandles() {
2128    if (!placeholderResizeLayerEl) return;
2129    const show = configureKind === 'insert' && annotActive && !!placeholderElement && state === 'CONFIGURING';
2130    placeholderResizeLayerEl.style.display = show ? 'block' : 'none';
2131    if (!show) {
2132      placeholderResizeLayerEl.innerHTML = '';
2133      return;
2134    }
2135    if (!placeholderResizeLayerEl.childElementCount) buildPlaceholderResizeHandles();
2136  }
2137 
2138  function startPlaceholderEdgeResize(edge, e) {
2139    const ph = placeholderElement;
2140    if (!ph || configureKind !== 'insert') return;
2141    materializePlaceholderWidth(ph);
2142    placeholderResizeDrag = {
2143      edge,
2144      startX: e.clientX,
2145      startY: e.clientY,
2146      start: {
2147        width: ph.offsetWidth,
2148        height: ph.offsetHeight,
2149        marginLeft: parseFloat(ph.style.marginLeft) || 0,
2150        marginTop: parseFloat(ph.style.marginTop) || 0,
2151      },
2152      parentWidth: ph.parentNode?.getBoundingClientRect().width || PLACEHOLDER_MIN_WIDTH,
2153      pointerId: e.pointerId,
2154    };
2155    try { annotOverlayEl.setPointerCapture(e.pointerId); } catch {}
2156    e.stopPropagation();
2157    e.preventDefault();
2158  }
2159 
2160  function createInsertPlaceholder(anchor, position, layoutAxis) {
2161    removeInsertPlaceholderDom();
2162    const parent = anchor.parentNode;
2163    if (!parent) return null;
2164    const axis = layoutAxis || detectInsertAxis(parent);
2165    const pst = getComputedStyle(parent);
2166    const ast = getComputedStyle(anchor);
2167    const sizing = placeholderSizing({
2168      axis,
2169      parentDisplay: pst.display,
2170      parentWidth: parent.getBoundingClientRect().width,
2171      anchorFlex: ast.flex,
2172    });
2173    const placeholder = document.createElement('div');
2174    placeholder.id = PREFIX + '-insert-placeholder';
2175    placeholder.setAttribute('data-impeccable-insert-placeholder', 'true');
2176    placeholder.setAttribute('aria-hidden', 'true');
2177    Object.assign(placeholder.style, {
2178      boxSizing: 'border-box',
2179      height: PLACEHOLDER_DEFAULT_HEIGHT + 'px',
2180      minHeight: PLACEHOLDER_MIN_HEIGHT + 'px',
2181      border: '2px dotted ' + BP.accent,
2182      borderRadius: '0',
2183      background: 'transparent',
2184      opacity: '1',
2185      position: 'relative',
2186      marginLeft: '',
2187      marginTop: '',
2188    });
2189    applyPlaceholderSizingStyles(placeholder, sizing);
2190    if (position === 'before') parent.insertBefore(placeholder, anchor);
2191    else parent.insertBefore(placeholder, anchor.nextSibling);
2192    placeholderElement = placeholder;
2193    insertAnchorElement = anchor;
2194    insertAnchorPosition = position;
2195    insertAnchorLayoutAxis = axis;
2196    return placeholder;
2197  }
2198 
2199  function clearInsertPicking() {
2200    hideInsertLine();
2201    finalizeInsertSession();
2202  }
2203 
2204  function isInsertCreateEnabled(btn) {
2205    btn = btn || uiGetById(PREFIX + '-insert-create');
2206    return !!btn && btn.getAttribute('aria-disabled') !== 'true';
2207  }
2208 
2209  let insertCreateTooltipEl = null;
2210 
2211  function ensureInsertCreateTooltip() {
2212    if (insertCreateTooltipEl) return insertCreateTooltipEl;
2213    insertCreateTooltipEl = el('div', {
2214      position: 'fixed',
2215      display: 'none',
2216      zIndex: String(Z.bar + 7),
2217      pointerEvents: 'none',
2218      maxWidth: '240px',
2219      padding: '6px 9px',
2220      borderRadius: '7px',
2221      background: BP.chatSurface,
2222      border: '1px solid ' + BP.hairline,
2223      boxShadow: BP.shadow,
2224      color: BP.text,
2225      fontFamily: FONT,
2226      fontSize: '11px',
2227      fontWeight: '500',
2228      lineHeight: '1.35',
2229    });
2230    insertCreateTooltipEl.id = PREFIX + '-insert-create-tooltip';
2231    uiAppend(insertCreateTooltipEl);
2232    return insertCreateTooltipEl;
2233  }
2234 
2235  function showInsertCreateTooltip(anchor, message) {
2236    if (!anchor || !message) return;
2237    const tip = ensureInsertCreateTooltip();
2238    tip.textContent = message;
2239    tip.style.display = 'block';
2240    const r = anchor.getBoundingClientRect();
2241    const tipW = tip.offsetWidth;
2242    const tipH = tip.offsetHeight;
2243    const left = Math.max(8, Math.min(window.innerWidth - tipW - 8, r.left + r.width / 2 - tipW / 2));
2244    const top = Math.max(8, r.top - tipH - 8);
2245    tip.style.left = left + 'px';
2246    tip.style.top = top + 'px';
2247  }
2248 
2249  function hideInsertCreateTooltip() {
2250    if (!insertCreateTooltipEl) return;
2251    insertCreateTooltipEl.style.display = 'none';
2252  }
2253 
2254  function insertCreateGateState(input) {
2255    return {
2256      prompt: input?.value ?? '',
2257      comments: annotState.comments,
2258      strokes: annotState.strokes,
2259    };
2260  }
2261 
2262  function syncInsertCreateButton(btn, input) {
2263    btn = btn || uiGetById(PREFIX + '-insert-create');
2264    input = input || uiGetById(PREFIX + '-insert-input');
2265    if (!btn || !input) return;
2266    const gate = insertCreateGateState(input);
2267    const ok = canCreateInsert(gate);
2268    const reason = ok ? 'Create variants' : insertCreateDisabledReason(gate);
2269    btn.setAttribute('aria-disabled', ok ? 'false' : 'true');
2270    btn.setAttribute('aria-label', reason);
2271    if (ok) {
2272      hideInsertCreateTooltip();
2273      btn.style.background = BP.accent;
2274      btn.style.color = C.ink;
2275      btn.style.border = 'none';
2276      btn.style.opacity = '1';
2277      btn.style.cursor = 'pointer';
2278    } else {
2279      btn.style.background = 'transparent';
2280      btn.style.color = BP.textDim;
2281      btn.style.border = '1px solid ' + BP.hairline;
2282      btn.style.opacity = '0.72';
2283      btn.style.cursor = 'not-allowed';
2284    }
2285  }
2286 
2287  /** Stylesheet shared by the replace and insert configure rows. */
2288  function ensureConfigureInputStyle() {
2289    if (uiGetById(PREFIX + '-configure-input-style')) return;
2290    const s = document.createElement('style');
2291    s.id = PREFIX + '-configure-input-style';
2292    s.textContent =
2293      '@keyframes impeccable-configure-voice-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }' +
2294      '#' + PREFIX + '-input, #' + PREFIX + '-insert-input { box-sizing: border-box; height: ' + CONFIGURE_ROW_TRACK_H + '; line-height: ' + CONFIGURE_ROW_TRACK_H + '; padding: 0; margin: 0; caret-color: ' + CONFIGURE_PILL_TEXT + '; }' +
2295      '#' + PREFIX + '-input::placeholder, #' + PREFIX + '-insert-input::placeholder { color: ' + BP.textDim + '; opacity: 1; }' +
2296      '#' + PREFIX + '-configure-voice[data-listening="true"] svg, #' + PREFIX + '-insert-voice[data-listening="true"] svg { animation: impeccable-configure-voice-pulse 1.1s ease-in-out infinite; }' +
2297      '@media (prefers-reduced-motion: reduce) { #' + PREFIX + '-configure-voice[data-listening="true"] svg, #' + PREFIX + '-insert-voice[data-listening="true"] svg { animation: none; opacity: 1; } }' +
2298      '#' + PREFIX + '-configure-voice:hover, #' + PREFIX + '-insert-voice:hover { background: oklch(27% 0 0); color: ' + BP.accent + '; }';
2299    uiAppendStyle(s);
2300  }
2301 
2302  function buildConfigureRow() {
2303    const controlsLocked = pendingApplyInFlight === true;
2304    const row = el('div', {
2305      display: 'flex', alignItems: 'stretch', width: '100%', height: CONFIGURE_BAR_H,
2306    });
2307 
2308    const inputShell = el('div', configureInputShellStyle());
2309 
2310    const input = document.createElement('input');
2311    input.id = PREFIX + '-input';
2312    input.type = 'text';
2313    input.placeholder = '';
2314    input.setAttribute('aria-label', 'Describe the change');
2315    Object.assign(input.style, configureInputFieldStyle());
2316    input.disabled = controlsLocked;
2317    if (controlsLocked) {
2318      input.placeholder = 'apply is running...';
2319      input.style.cursor = 'not-allowed';
2320      input.style.opacity = '0.58';
2321    }
2322 
2323    const action = buildConfigureActionControl({
2324      controlsLocked,
2325      onClick: (e) => {
2326        e.stopPropagation();
2327        if (controlsLocked) { showManualApplyBusyToast(); return; }
2328        toggleActionPicker();
2329      },
2330    });
2331 
2332    const count = buildConfigureCountControl({
2333      controlsLocked,
2334      onClick: (e) => {
2335        e.stopPropagation();
2336        if (controlsLocked) { showManualApplyBusyToast(); return; }
2337        count.textContent = '\u00D7' + cycleSelectedCount();
2338        if (count.matches(':hover')) {
2339          showConfigureBarTooltip(count, variantCountTooltipText(selectedCount));
2340        }
2341      },
2342    });
2343 
2344    inputShell.appendChild(buildSelectionPill({ el: selectedElement, controlsLocked }));
2345    inputShell.appendChild(input);
2346 
2347    ensureConfigureInputStyle();
2348 
2349    input.addEventListener('focus', () => syncConfigureInputChrome());
2350    input.addEventListener('blur', () => syncConfigureInputChrome());
2351    input.addEventListener('keydown', (e) => {
2352      if (e.key === 'Enter') { e.stopPropagation(); e.preventDefault(); handleGo(); return; }
2353      if (e.key === 'Escape') {
2354        e.stopPropagation();
2355        e.preventDefault();
2356        input.blur();
2357        exitConfigureToPicking('configure-input-escape');
2358        return;
2359      }
2360      if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !input.value) return;
2361      e.stopPropagation();
2362    });
2363 
2364    const voiceBtn = buildConfigureVoiceButton({
2365      id: PREFIX + '-configure-voice',
2366      controlsLocked,
2367      onClick: (e) => {
2368        e.stopPropagation();
2369        if (controlsLocked) { showManualApplyBusyToast(); return; }
2370        toggleConfigureVoice();
2371      },
2372    });
2373 
2374    const go = buildConfigureSubmitButton({
2375      controlsLocked,
2376      ariaLabel: 'Generate variants',
2377      onClick: (e) => { e.stopPropagation(); handleGo(); },
2378    });
2379 
2380    row.appendChild(inputShell);
2381    row.appendChild(buildConfigureTrailingCluster([action, count], voiceBtn, go));
2382    syncConfigureInputChrome();
2383 
2384    if (!controlsLocked) setTimeout(() => input.focus(), 60);
2385 
2386    return row;
2387  }
2388 
2389  function buildInsertConfigureRow() {
2390    const controlsLocked = pendingApplyInFlight === true;
2391    const row = el('div', {
2392      display: 'flex', alignItems: 'stretch', width: '100%', height: CONFIGURE_BAR_H,
2393    });
2394    row.addEventListener('pointerdown', (e) => e.stopPropagation());
2395    row.addEventListener('mousedown', (e) => e.stopPropagation());
2396    row.addEventListener('click', (e) => e.stopPropagation());
2397 
2398    const inputShell = el('div', configureInputShellStyle());
2399 
2400    const input = document.createElement('input');
2401    input.id = PREFIX + '-insert-input';
2402    input.type = 'text';
2403    input.placeholder = '';
2404    input.setAttribute('aria-label', 'Describe the new element');
2405    Object.assign(input.style, configureInputFieldStyle());
2406    input.disabled = controlsLocked;
2407    if (controlsLocked) {
2408      input.placeholder = 'apply is running...';
2409      input.style.cursor = 'not-allowed';
2410      input.style.opacity = '0.58';
2411    }
2412 
2413    const count = buildConfigureCountControl({
2414      controlsLocked,
2415      onClick: (e) => {
2416        e.stopPropagation();
2417        if (controlsLocked) { showManualApplyBusyToast(); return; }
2418        count.textContent = '\u00D7' + cycleSelectedCount();
2419        if (count.matches(':hover')) {
2420          showConfigureBarTooltip(count, variantCountTooltipText(selectedCount));
2421        }
2422      },
2423    });
2424 
2425    inputShell.appendChild(buildSelectionPill({ el: selectedElement, controlsLocked }));
2426    inputShell.appendChild(input);
2427 
2428    ensureConfigureInputStyle();
2429 
2430    input.addEventListener('input', () => syncInsertCreateButton());
2431    input.addEventListener('pointerdown', (e) => e.stopPropagation());
2432    input.addEventListener('mousedown', (e) => e.stopPropagation());
2433    input.addEventListener('click', (e) => {
2434      e.stopPropagation();
2435      try { input.focus({ preventScroll: true }); } catch { input.focus(); }
2436    });
2437    input.addEventListener('keydown', (e) => {
2438      if (e.key === 'Enter') {
2439        e.stopPropagation(); e.preventDefault();
2440        if (isInsertCreateEnabled()) handleInsertCreate();
2441        return;
2442      }
2443      if (e.key === 'Escape') {
2444        e.stopPropagation(); e.preventDefault();
2445        cancelInsertConfigure();
2446        return;
2447      }
2448      e.stopPropagation();
2449    });
2450    input.addEventListener('focus', () => syncConfigureInputChrome());
2451    input.addEventListener('blur', () => syncConfigureInputChrome());
2452 
2453    const voiceBtn = buildConfigureVoiceButton({
2454      id: PREFIX + '-insert-voice',
2455      controlsLocked,
2456      onClick: (e) => {
2457        e.stopPropagation();
2458        if (controlsLocked) { showManualApplyBusyToast(); return; }
2459        toggleConfigureVoice();
2460      },
2461    });
2462 
2463    const create = buildConfigureSubmitButton({
2464      controlsLocked,
2465      ariaLabel: 'Create variants',
2466      onClick: (e) => {
2467        e.preventDefault();
2468        e.stopPropagation();
2469        if (controlsLocked) { showManualApplyBusyToast(); return; }
2470        if (!isInsertCreateEnabled(create)) return;
2471        handleInsertCreate();
2472      },
2473    });
2474    create.id = PREFIX + '-insert-create';
2475    create.addEventListener('mouseenter', () => {
2476      if (controlsLocked) return;
2477      if (isInsertCreateEnabled(create)) {
2478        hideInsertCreateTooltip();
2479        return;
2480      }
2481      showInsertCreateTooltip(create, insertCreateDisabledReason(insertCreateGateState(input)));
2482    });
2483    create.addEventListener('mouseleave', hideInsertCreateTooltip);
2484    row.appendChild(inputShell);
2485    row.appendChild(buildConfigureTrailingCluster([count], voiceBtn, create));
2486    syncInsertCreateButton(create, input);
2487    syncConfigureInputChrome();
2488    if (!controlsLocked) setTimeout(() => input.focus(), 60);
2489    return row;
2490  }
2491 
2492  // Generating row
2493 
2494  function buildGeneratingRow() {
2495    const row = el('div', {
2496      display: 'flex', alignItems: 'center', gap: '8px',
2497      padding: '2px 4px',
2498    });
2499 
2500    // Action label
2501    const label = el('span', {
2502      fontWeight: '600', fontSize: '12px', color: BP.text,
2503      flexShrink: '0', whiteSpace: 'nowrap',
2504    });
2505    label.textContent = configureKind === 'insert' ? 'Insert' : actionLabel();
2506    row.appendChild(label);
2507 
2508    // Dots
2509    row.appendChild(buildDots(false));
2510 
2511    // Status
2512    const status = el('span', {
2513      fontSize: '11px', color: BP.textDim, whiteSpace: 'nowrap',
2514      marginLeft: 'auto',
2515    });
2516    // Variants currently arrive atomically in a single file edit, so a
2517    // per-variant counter would lie. Say what's true.
2518    status.textContent = recoveryWaitingForAnchor
2519      ? 'Variants ready. Reveal the selected element to resume.'
2520      : (arrivedVariants < expectedVariants
2521        ? 'Generating ' + expectedVariants + ' variants...'
2522        : 'Done');
2523    row.appendChild(status);
2524 
2525    return row;
2526  }
2527 
2528  // Cycling row
2529 
2530  const TUNE_ICON_SVG = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" style="flex-shrink:0"><line x1="4" y1="8" x2="20" y2="8"/><circle cx="14" cy="8" r="2.4" fill="currentColor" stroke="none"/><line x1="4" y1="16" x2="20" y2="16"/><circle cx="10" cy="16" r="2.4" fill="currentColor" stroke="none"/></svg>';
2531 
2532  function buildCyclingRow() {
2533    if (!ensureCyclingRenderable('build-cycling-row')) {
2534      return el('div', { display: 'none' });
2535    }
2536    const row = el('div', {
2537      display: 'flex', alignItems: 'center', gap: '6px',
2538      padding: '1px 2px',
2539    });
2540 
2541    // Prev
2542    const prev = navBtn('\u2190');
2543    prev.id = PREFIX + '-variant-prev';
2544    prev.addEventListener('click', (e) => { e.stopPropagation(); cycleVariant(-1); });
2545    if (visibleVariant <= 1) prev.style.opacity = '0.3';
2546    row.appendChild(prev);
2547 
2548    // Dots (clickable)
2549    row.appendChild(buildDots(true));
2550 
2551    // Counter
2552    const counter = el('span', {
2553      fontFamily: MONO, fontSize: '11px', fontWeight: '500',
2554      color: BP.textDim, minWidth: '24px', textAlign: 'center',
2555    });
2556    counter.id = PREFIX + '-variant-counter';
2557    counter.textContent = visibleVariant + '/' + arrivedVariants;
2558    row.appendChild(counter);
2559 
2560    // Next
2561    const next = navBtn('\u2192');
2562    next.id = PREFIX + '-variant-next';
2563    next.addEventListener('click', (e) => { e.stopPropagation(); cycleVariant(1); });
2564    if (visibleVariant >= arrivedVariants) next.style.opacity = '0.3';
2565    row.appendChild(next);
2566 
2567    // Tune chip - only when the visible variant exposes params
2568    const visParams = parseVariantParams(getVisibleVariantEl());
2569    const hasParams = visParams.length > 0;
2570    if (hasParams) {
2571      const tune = el('button', {
2572        display: 'inline-flex', alignItems: 'center', gap: '6px',
2573        padding: '4px 10px', borderRadius: '5px',
2574        border: '1px solid transparent',
2575        background: tuneOpen ? BP.accentSoft : 'transparent',
2576        color: tuneOpen ? BP.accent : BP.text,
2577        fontFamily: FONT, fontSize: '11px', fontWeight: '500',
2578        cursor: 'pointer',
2579        transition: 'color 0.12s ease, background 0.12s ease',
2580        whiteSpace: 'nowrap',
2581      });
2582      tune.innerHTML = TUNE_ICON_SVG;
2583      const tuneLabel = document.createElement('span');
2584      tuneLabel.textContent = 'Tune';
2585      tune.appendChild(tuneLabel);
2586      const tuneBadge = document.createElement('span');
2587      Object.assign(tuneBadge.style, {
2588        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
2589        minWidth: '16px', height: '16px', padding: '0 4px',
2590        borderRadius: '999px',
2591        background: tuneOpen ? C.brand : BP.hairline,
2592        color: tuneOpen ? 'oklch(98% 0 0)' : 'inherit',
2593        fontFamily: MONO, fontSize: '9.5px', fontWeight: '600',
2594        lineHeight: '1',
2595        boxSizing: 'border-box',
2596      });
2597      tuneBadge.textContent = String(visParams.length);
2598      tune.appendChild(tuneBadge);
2599      tune.title = 'Tune this variant (' + visParams.length + ' knob' + (visParams.length === 1 ? '' : 's') + ')';
2600      tune.addEventListener('mouseenter', () => {
2601        if (!tuneOpen) tune.style.background = BP.accentSoft;
2602      });
2603      tune.addEventListener('mouseleave', () => {
2604        if (!tuneOpen) tune.style.background = 'transparent';
2605      });
2606      tune.addEventListener('click', (e) => { e.stopPropagation(); toggleTunePopover(); });
2607      tune.dataset.iceqTune = '1';
2608      row.appendChild(tune);
2609    }
2610 
2611    // Spacer
2612    row.appendChild(el('div', { flex: '1' }));
2613 
2614    // Accept - primary action, kinpaku gold + lacquer-deep (matches demo .live-demo-ctx-accept)
2615    const accept = el('button', {
2616      padding: '5px 14px', borderRadius: '5px',
2617      border: 'none', background: C.brand, color: C.ink,
2618      fontFamily: FONT, fontSize: '11px', fontWeight: '600',
2619      cursor: 'pointer', transition: 'filter 0.12s ease, transform 0.1s ease',
2620      whiteSpace: 'nowrap',
2621    });
2622    accept.textContent = '\u2713 Accept';
2623    accept.addEventListener('mouseenter', () => accept.style.filter = 'brightness(1.08)');
2624    accept.addEventListener('mouseleave', () => accept.style.filter = 'none');
2625    accept.addEventListener('mousedown', () => accept.style.transform = 'scale(0.97)');
2626    accept.addEventListener('mouseup', () => accept.style.transform = 'scale(1)');
2627    accept.addEventListener('click', (e) => { e.stopPropagation(); handleAccept(); });
2628    if (arrivedVariants === 0) { accept.style.opacity = '0.3'; accept.style.pointerEvents = 'none'; }
2629    row.appendChild(accept);
2630 
2631    // Discard
2632    const discard = el('button', {
2633      padding: '4px 6px', borderRadius: '5px',
2634      border: '1px solid ' + BP.hairline, background: 'transparent',
2635      fontFamily: FONT, fontSize: '11px', color: BP.textDim,
2636      cursor: 'pointer', transition: 'color 0.12s ease, border-color 0.12s ease',
2637    });
2638    discard.textContent = '\u2715';
2639    discard.title = 'Discard all variants';
2640    discard.addEventListener('mouseenter', () => { discard.style.color = BP.text; discard.style.borderColor = BP.text; });
2641    discard.addEventListener('mouseleave', () => { discard.style.color = BP.textDim; discard.style.borderColor = BP.hairline; });
2642    discard.addEventListener('click', (e) => { e.stopPropagation(); handleDiscard(); });
2643    row.appendChild(discard);
2644 
2645    return row;
2646  }
2647 
2648  // Shared UI builders
2649 
2650  // Saving row (waiting for agent to process accept/discard)
2651 
2652  function buildSavingRow() {
2653    const row = el('div', {
2654      display: 'flex', alignItems: 'center', gap: '8px',
2655      padding: '2px 8px',
2656    });
2657    const spinner = el('div', {
2658      width: '14px', height: '14px', borderRadius: '50%',
2659      border: '2px solid ' + BP.hairline,
2660      borderTopColor: BP.accent,
2661      animation: 'impeccable-spin 0.6s linear infinite',
2662      flexShrink: '0',
2663    });
2664    row.appendChild(spinner);
2665    const label = el('span', {
2666      fontSize: '12px', color: BP.textDim, fontWeight: '500',
2667    });
2668    label.textContent = 'Applying variant...';
2669    row.appendChild(label);
2670 
2671    ensureSpinKeyframes();
2672    return row;
2673  }
2674 
2675  // Confirmed row (green success, auto-dismisses)
2676 
2677  function buildConfirmedRow() {
2678    const row = el('div', {
2679      display: 'flex', alignItems: 'center', gap: '8px',
2680      padding: '2px 8px',
2681    });
2682    const check = el('span', {
2683      fontSize: '15px', lineHeight: '1', flexShrink: '0',
2684      color: 'oklch(45% 0.18 145)',
2685    });
2686    check.textContent = '\u2713';
2687    row.appendChild(check);
2688    const label = el('span', {
2689      fontSize: '12px', color: 'oklch(49% 0.08 188)', fontWeight: '600',
2690    });
2691    label.textContent = 'Variant applied';
2692    row.appendChild(label);
2693    return row;
2694  }
2695 
2696  // Shared UI builders
2697 
2698  function buildDots(clickable) {
2699    const container = el('div', {
2700      display: 'flex', alignItems: 'center', gap: '4px',
2701    });
2702    for (let i = 1; i <= expectedVariants; i++) {
2703      const arrived = i <= arrivedVariants;
2704      const active = i === visibleVariant;
2705      // active: solid site-brand kinpaku dot. arrived+inactive: muted neutral.
2706      // pending (not yet arrived): faint outline ring. No borders on arrived
2707      // dots - the previous "accent ring + ash fill" combo read as noisy
2708      // kinpaku chips, especially when all variants had arrived and every
2709      // dot wore an accent ring.
2710      const dotBg = active ? C.brand
2711        : arrived ? BP.textDim
2712        : 'transparent';
2713      const dotBorder = arrived ? 'none' : '1.5px solid ' + BP.hairline;
2714      const dot = el('div', {
2715        width: active ? '8px' : '6px',
2716        height: active ? '8px' : '6px',
2717        borderRadius: '50%',
2718        background: dotBg,
2719        border: dotBorder,
2720        boxSizing: 'border-box',
2721        transition: 'all 0.2s ' + EASE,
2722        cursor: (clickable && arrived) ? 'pointer' : 'default',
2723        transform: arrived ? 'scale(1)' : 'scale(0.85)',
2724        opacity: arrived ? (active ? '1' : '0.6') : '0.4',
2725      });
2726      if (clickable && arrived) {
2727        const idx = i;
2728        dot.addEventListener('click', (e) => {
2729          e.stopPropagation();
2730          selectVariant(idx, 'variant_changed');
2731        });
2732      }
2733      container.appendChild(dot);
2734    }
2735    return container;
2736  }
2737 
2738  function navBtn(text) {
2739    const b = el('button', {
2740      width: '26px', height: '26px', borderRadius: '5px',
2741      border: '1px solid ' + BP.hairline, background: 'transparent',
2742      color: BP.text, fontFamily: FONT, fontSize: '13px',
2743      cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
2744      transition: 'border-color 0.12s ease, background 0.12s ease',
2745      padding: '0', lineHeight: '1',
2746    });
2747    b.textContent = text;
2748    b.addEventListener('mouseenter', () => { b.style.borderColor = BP.text; });
2749    b.addEventListener('mouseleave', () => { b.style.borderColor = BP.hairline; });
2750    return b;
2751  }
2752 
2753  function actionLabel() {
2754    const a = ACTIONS.find(a => a.value === selectedAction);
2755    return a ? a.label : 'Freeform';
2756  }
2757 
2758  function el(tag, styles) {
2759    const e = document.createElement(tag);
2760    if (String(tag).toLowerCase() === 'button') e.type = 'button';
2761    if (styles) Object.assign(e.style, styles);
2762    return e;
2763  }
2764 
2765  //
2766  // Action picker popover
2767  //
2768 
2769  function initActionPicker() {
2770    const P = barPaletteForTheme(detectPageTheme());
2771    pickerEl = document.createElement('div');
2772    pickerEl.id = PREFIX + '-picker';
2773    Object.assign(pickerEl.style, {
2774      position: 'fixed', zIndex: Z.picker,
2775      display: 'none', opacity: '0',
2776      transform: 'scale(0.96) translateY(4px)',
2777      transformOrigin: 'bottom right',
2778      transition: 'opacity 0.18s ' + EASE + ', transform 0.2s ' + EASE,
2779      background: P.surface,
2780      border: '1px solid ' + P.border,
2781      borderRadius: '8px',
2782      boxShadow: P.shadow,
2783      padding: '6px',
2784      fontFamily: FONT,
2785    });
2786 
2787    // Build the chip grid
2788    const grid = el('div', {
2789      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '3px',
2790    });
2791 
2792    ACTIONS.forEach(action => {
2793      const chip = el('button', {
2794        display: 'flex', flexDirection: 'column', alignItems: 'center',
2795        gap: '4px',
2796        padding: '8px 6px', borderRadius: '6px',
2797        border: 'none',
2798        background: action.value === selectedAction ? P.accentSoft : 'transparent',
2799        color: action.value === selectedAction ? P.accent : P.text,
2800        fontFamily: FONT, fontSize: '11px', fontWeight: '500',
2801        cursor: 'pointer',
2802        transition: 'background 0.1s ease, color 0.1s ease',
2803        textAlign: 'center', whiteSpace: 'nowrap',
2804      });
2805      const iconWrap = el('span', {
2806        display: 'flex', alignItems: 'center', justifyContent: 'center',
2807        height: '20px', opacity: '0.9',
2808      });
2809      iconWrap.innerHTML = ICONS[action.value] || '';
2810      const labelEl = el('span', { lineHeight: '1' });
2811      labelEl.textContent = action.label;
2812      chip.appendChild(iconWrap);
2813      chip.appendChild(labelEl);
2814      chip.dataset.action = action.value;
2815      chip.addEventListener('mouseenter', () => {
2816        if (action.value !== selectedAction) chip.style.background = P.accentSoft;
2817      });
2818      chip.addEventListener('mouseleave', () => {
2819        chip.style.background = action.value === selectedAction ? P.accentSoft : 'transparent';
2820      });
2821      chip.addEventListener('click', (e) => {
2822        e.preventDefault();
2823        e.stopPropagation();
2824        const prompt = uiGetById(PREFIX + '-input')?.value || '';
2825        selectedAction = action.value;
2826        hideActionPicker();
2827        updateBarContent('configure');
2828        const input = uiGetById(PREFIX + '-input');
2829        if (input && prompt) input.value = prompt;
2830      });
2831      grid.appendChild(chip);
2832    });
2833 
2834    pickerEl.appendChild(grid);
2835    uiAppend(pickerEl);
2836    defangOutsideHandlers(pickerEl);
2837 
2838    // Cache the palette on the picker so toggleActionPicker's state refresh
2839    // uses the same theme-aware colors when it repaints chips.
2840    pickerEl.__iceq_palette = P;
2841  }
2842 
2843  function toggleActionPicker() {
2844    if (pendingApplyInFlight) { showManualApplyBusyToast(); return; }
2845    if (pickerEl.style.display !== 'none') { hideActionPicker(); return; }
2846    // Rebuild chips to reflect current selection
2847    const P = pickerEl.__iceq_palette || barPaletteForTheme(detectPageTheme());
2848    pickerEl.querySelectorAll('button').forEach(chip => {
2849      const isActive = chip.dataset.action === selectedAction;
2850      chip.style.background = isActive ? P.accentSoft : 'transparent';
2851      chip.style.color = isActive ? P.accent : P.text;
2852    });
2853    // Position above the bar, right-aligned to the configure bar edge.
2854    const barRect = barEl.getBoundingClientRect();
2855    const pickerH = 170; // approximate; grows with icon + label rows
2856    let top = barRect.top - pickerH - 6;
2857    if (top < 8) top = barRect.bottom + 6;
2858    pickerEl.style.display = 'block';
2859    const pickerW = pickerEl.offsetWidth;
2860    let left = barRect.right - pickerW;
2861    left = Math.max(8, Math.min(left, window.innerWidth - pickerW - 8));
2862    Object.assign(pickerEl.style, {
2863      top: top + 'px',
2864      left: left + 'px',
2865    });
2866    requestAnimationFrame(() => {
2867      pickerEl.style.opacity = '1';
2868      pickerEl.style.transform = 'scale(1) translateY(0)';
2869    });
2870  }
2871 
2872  function hideActionPicker() {
2873    if (!pickerEl) return;
2874    pickerEl.style.opacity = '0';
2875    pickerEl.style.transform = 'scale(0.96) translateY(4px)';
2876    setTimeout(() => { if (pickerEl) pickerEl.style.display = 'none'; }, 180);
2877  }
2878 
2879  function ensureCyclingRenderable(reason) {
2880    if (arrivedVariants > 0) {
2881      if (visibleVariant < 1 || visibleVariant > arrivedVariants) visibleVariant = 1;
2882      return true;
2883    }
2884    recoverEmptyCycling(reason);
2885    return false;
2886  }
2887 
2888  function recoverEmptyCycling(reason) {
2889    if (recoveringEmptyCycling) return;
2890    recoveringEmptyCycling = true;
2891    try {
2892      console.warn('[impeccable] Refusing to render empty variant cycling state:', reason);
2893      const message = 'No variants were mounted. Please try again.';
2894      if (svelteComponentSession?.sessionId === currentSessionId) {
2895        abortSvelteComponentInjection(currentSessionId, message);
2896        return;
2897      }
2898      cleanup();
2899      showToast(message, 5000);
2900    } finally {
2901      recoveringEmptyCycling = false;
2902    }
2903  }
2904 
2905  //
2906  // Params panel (per-variant coarse controls)
2907  //
2908  // Variants may declare a parameter manifest via a JSON attribute on the
2909  // variant wrapper:
2910  //
2911  //   <div data-impeccable-variant="1"
2912  //        data-impeccable-params='[{"id":"density","kind":"steps",...}]'>
2913  //
2914  // The panel docks to the right edge of the outline during CYCLING and
2915  // exposes 2-5 coarse knobs. Values apply to the variant wrapper so scoped
2916  // CSS can respond instantly without regeneration:
2917  //
2918  //   range  / numeric toggle  -> CSS custom property used by variant styles
2919  //   steps  / boolean toggle  → data-p-<id> attribute  used via :scope[data-p-foo="..."]
2920  //
2921  // On variant switch, values reset to that variant's declared defaults.
2922  // On accept, current values are sent in the event payload so the agent
2923  // can bake them into the source-file write.
2924  //
2925 
2926  let paramsPanelEl = null;     // outer wrapper (overflow:hidden, clips the slide)
2927  let paramsPanelInner = null;  // translating content (carries bg, padding, knobs)
2928  let paramsPanelBody = null;   // grid holding the knob cells
2929  let paramsCurrentValues = {}; // {paramId: value} - mirror of the visible variant's live values
2930  let tuneOpen = false;         // whether the Tune popover is open right now
2931 
2932  // Theme-aware Tune popover. Appears as a drawer that slides out from the
2933  // contextual bar's bar-facing edge (below if the bar sits below the
2934  // element, above otherwise). Same width as the bar. Auto-wraps to extra
2935  // rows when the knobs exceed one row. The bar's border-radius on the
2936  // popover side goes flat while open so the two shapes read as one.
2937  let paramsPanelPalette = null;
2938 
2939  function initParamsPanel() {
2940    paramsPanelPalette = barPaletteForTheme(detectPageTheme());
2941    const P = paramsPanelPalette;
2942 
2943    // Single element, always in the DOM. The slide animation is a CSS mask
2944    // with mask-size growing from 0% to 100% along the bar-facing axis - no
2945    // display toggle, no opacity toggle, no transform trickery. The mask
2946    // hides everything initially; as it grows, content is revealed from
2947    // the bar edge outward.
2948    paramsPanelEl = document.createElement('div');
2949    paramsPanelEl.id = PREFIX + '-params-panel';
2950    Object.assign(paramsPanelEl.style, {
2951      position: 'fixed', zIndex: String(Z.bar - 1),
2952      background: P.surfaceDeep,
2953      color: P.text,
2954      fontFamily: FONT,
2955      padding: '14px 18px',
2956      boxSizing: 'border-box',
2957      borderRadius: '0 0 10px 10px',
2958      pointerEvents: 'none',
2959 
2960      // clip-path is the same conceptual reveal as mask but with rock-solid
2961      // transition support across engines. Closed state clips from the far
2962      // edge; open = inset(0) shows everything.
2963      clipPath: 'inset(0 0 100% 0)',
2964      transition: 'clip-path 0.44s ' + EASE,
2965 
2966      // Park off-screen until positionParamsPanel places it. These are NOT
2967      // in the transition list, so they snap instantly - no fly-in from the
2968      // top-left when first shown.
2969      top: '-9999px', left: '-9999px', width: '0',
2970    });
2971 
2972    paramsPanelBody = el('div', {
2973      display: 'grid',
2974      gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
2975      gap: '12px 16px',
2976    });
2977 
2978    paramsPanelEl.appendChild(paramsPanelBody);
2979    uiAppend(paramsPanelEl);
2980    // Don't override pointer-events: the panel toggles between 'none' (closed,
2981    // click-through) and 'auto' (open) on its own. Just silence the host's
2982    // outside-interaction listeners while the panel is open.
2983    defangOutsideHandlers(paramsPanelEl, { setPointerEvents: false });
2984    paramsPanelInner = paramsPanelEl; // compatibility alias for the rest of the code
2985  }
2986 
2987 
2988  function getMountedSvelteComponentAnchor(session = svelteComponentSession) {
2989    const el = session?.mountTargetEl?.firstElementChild || null;
2990    if (!el || !document.body.contains(el)) return null;
2991    return rectIsUsableAnchor(el.getBoundingClientRect()) ? el : null;
2992  }
2993 
2994  function resolveSvelteComponentAnchor(session = svelteComponentSession) {
2995    return getMountedSvelteComponentAnchor(session)
2996      || session?.swapAnchor
2997      || null;
2998  }
2999 
3000  function getVisibleVariantEl() {
3001    if (!currentSessionId) return null;
3002    if (svelteComponentSession?.sessionId === currentSessionId) {
3003      return resolveSvelteComponentAnchor()
3004        || svelteComponentSession.wrapperEl
3005        || null;
3006    }
3007    const wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]');
3008    if (!wrapper) return null;
3009    return wrapper.querySelector('[data-impeccable-variant="' + visibleVariant + '"]');
3010  }
3011 
3012  function parseVariantParams(variantEl) {
3013    // Svelte component variants can't carry a `data-impeccable-params` attribute:
3014    // the compiler reads `{` inside attribute values as expression delimiters, so
3015    // JSON-with-braces breaks the build. For that path the params live in a sidecar
3016    // params.json keyed by variant number, loaded into the session at mount time.
3017    if (svelteComponentSession?.sessionId === currentSessionId) {
3018      const byVariant = svelteComponentSession.paramsByVariant || {};
3019      const params = byVariant[String(visibleVariant)] || byVariant[visibleVariant];
3020      return Array.isArray(params) ? params : [];
3021    }
3022    if (!variantEl) return [];
3023    const raw = variantEl.getAttribute('data-impeccable-params');
3024    if (!raw) return [];
3025    try {
3026      const parsed = JSON.parse(raw);
3027      return Array.isArray(parsed) ? parsed : [];
3028    } catch (err) {
3029      console.warn('[impeccable] Invalid data-impeccable-params JSON:', err.message);
3030      return [];
3031    }
3032  }
3033 
3034  function applyParamValue(variantEl, param, value) {
3035    if (!variantEl) return;
3036    const attr = 'data-p-' + param.id;
3037    if (param.kind === 'range') {
3038      variantEl.style.setProperty('--p-' + param.id, String(value));
3039    } else if (param.kind === 'toggle') {
3040      const on = !!value;
3041      variantEl.style.setProperty('--p-' + param.id, on ? '1' : '0');
3042      if (on) variantEl.setAttribute(attr, 'on');
3043      else variantEl.removeAttribute(attr);
3044    } else if (param.kind === 'steps') {
3045      variantEl.setAttribute(attr, String(value));
3046    }
3047  }
3048 
3049  function applyParamDefaults(variantEl, params) {
3050    paramsCurrentValues = {};
3051    for (const p of params) {
3052      paramsCurrentValues[p.id] = p.default;
3053      applyParamValue(variantEl, p, p.default);
3054    }
3055  }
3056 
3057  function formatRangeValue(input) {
3058    const max = parseFloat(input.max), min = parseFloat(input.min);
3059    const v = parseFloat(input.value);
3060    if (!isFinite(v)) return input.value;
3061    return (max - min) <= 2 ? v.toFixed(2) : String(Math.round(v));
3062  }
3063 
3064  function buildParamsPanel(variantEl, params) {
3065    const P = paramsPanelPalette || barPaletteForTheme(detectPageTheme());
3066    paramsPanelBody.innerHTML = '';
3067    for (const p of params) {
3068      const row = el('div', { display: 'flex', flexDirection: 'column', gap: '6px' });
3069      const labelRow = el('div', {
3070        display: 'flex', justifyContent: 'space-between',
3071        alignItems: 'baseline', gap: '8px',
3072      });
3073      const lbl = el('span', {
3074        fontSize: '10.5px', fontWeight: '600', color: P.text,
3075        letterSpacing: '0.03em',
3076      });
3077      lbl.textContent = p.label || p.id;
3078      labelRow.appendChild(lbl);
3079      const readout = el('span', {
3080        fontSize: '10.5px', color: P.textDim,
3081        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
3082      });
3083      labelRow.appendChild(readout);
3084      row.appendChild(labelRow);
3085 
3086      if (p.kind === 'range') {
3087        const input = document.createElement('input');
3088        input.type = 'range';
3089        input.min = String(p.min != null ? p.min : 0);
3090        input.max = String(p.max != null ? p.max : 1);
3091        input.step = String(p.step != null ? p.step : 0.05);
3092        input.value = String(p.default);
3093        Object.assign(input.style, {
3094          width: '100%', accentColor: C.brand, cursor: 'pointer',
3095        });
3096        readout.textContent = formatRangeValue(input);
3097        input.addEventListener('input', (e) => {
3098          e.stopPropagation();
3099          const v = parseFloat(input.value);
3100          paramsCurrentValues[p.id] = v;
3101          readout.textContent = formatRangeValue(input);
3102          applyParamValue(variantEl, p, v);
3103          queueCheckpoint('param_changed');
3104        });
3105        row.appendChild(input);
3106      } else if (p.kind === 'toggle') {
3107        const initial = !!p.default;
3108        readout.textContent = initial ? 'On' : 'Off';
3109        const track = el('button', {
3110          position: 'relative', width: '36px', height: '20px',
3111          borderRadius: '10px', border: 'none', padding: '0',
3112          cursor: 'pointer',
3113          background: initial ? C.brand : P.hairline,
3114          transition: 'background 0.15s ease',
3115          alignSelf: 'flex-start',
3116        });
3117        const knob = el('span', {
3118          position: 'absolute', top: '2px',
3119          left: initial ? '18px' : '2px',
3120          width: '16px', height: '16px', borderRadius: '50%',
3121          background: 'oklch(98% 0 0)',
3122          transition: 'left 0.18s ' + EASE,
3123          boxShadow: '0 1px 2px oklch(0% 0 0 / 0.2)',
3124        });
3125        track.appendChild(knob);
3126        track.addEventListener('click', (e) => {
3127          e.stopPropagation();
3128          const next = !paramsCurrentValues[p.id];
3129          paramsCurrentValues[p.id] = next;
3130          track.style.background = next ? C.brand : P.hairline;
3131          knob.style.left = next ? '18px' : '2px';
3132          readout.textContent = next ? 'On' : 'Off';
3133          applyParamValue(variantEl, p, next);
3134          queueCheckpoint('param_changed');
3135        });
3136        row.appendChild(track);
3137      } else if (p.kind === 'steps') {
3138        const opts = (p.options || []).map(o =>
3139          typeof o === 'string' ? { value: o, label: o } : o
3140        );
3141        const activeOpt = opts.find(o => o.value === p.default) || opts[0];
3142        readout.textContent = activeOpt ? activeOpt.label : String(p.default);
3143        const segRow = el('div', {
3144          display: 'grid',
3145          gridTemplateColumns: 'repeat(' + opts.length + ', 1fr)',
3146          gap: '1px', padding: '2px',
3147          background: P.hairline, borderRadius: '5px',
3148        });
3149        const segBtns = [];
3150        opts.forEach(o => {
3151          const active = o.value === p.default;
3152          const b = el('button', {
3153            padding: '5px 4px', border: 'none', borderRadius: '3px',
3154            background: active ? C.brand : 'transparent',
3155            color: active ? 'oklch(98% 0 0)' : P.text,
3156            fontFamily: FONT, fontSize: '10.5px', fontWeight: '500',
3157            cursor: 'pointer', whiteSpace: 'nowrap',
3158            transition: 'background 0.1s ease, color 0.1s ease',
3159          });
3160          b.textContent = o.label;
3161          b.addEventListener('click', (e) => {
3162            e.stopPropagation();
3163            paramsCurrentValues[p.id] = o.value;
3164            readout.textContent = o.label;
3165            segBtns.forEach(({ btn, val }) => {
3166              const on = val === o.value;
3167              btn.style.background = on ? C.brand : 'transparent';
3168              btn.style.color = on ? 'oklch(98% 0 0)' : P.text;
3169            });
3170            applyParamValue(variantEl, p, o.value);
3171            queueCheckpoint('param_changed');
3172          });
3173          segRow.appendChild(b);
3174          segBtns.push({ btn: b, val: o.value });
3175        });
3176        row.appendChild(segRow);
3177      }
3178 
3179      paramsPanelBody.appendChild(row);
3180    }
3181  }
3182 
3183  //
3184  // Inline text editing - makes pure-text descendants of the picked element
3185  // directly contenteditable. Save stages copy edits in the live buffer; the
3186  // Apply copy edits dock later asks the AI to apply the staged batch.
3187  //
3188 
3189  let inlineEditRows = [];
3190  let inlineEditDrafts = new Map();
3191 
3192  // Mixed-content elements (e.g. <p>text<code>x</code>text</p>) skip the row
3193  // walker's "all-children-are-text-nodes" rule. Wrap each non-whitespace direct
3194  // text-node child in a marker span so the walker emits a row for it. The
3195  // wrappers are inline display by default and inherit styles, so the page
3196  // shouldn't visually shift. We unwrap in disableInlineEdit.
3197  const MIXED_WRAP_SKIP = { script: 1, style: 1, template: 1, noscript: 1, svg: 1, code: 1, pre: 1 };
3198 
3199  function collectEditableTextRows(rootEl, opts) {
3200    if (!rootEl || rootEl.nodeType !== 1) return [];
3201    const isOwn = (opts && opts.isOwn) || (() => false);
3202    const rows = [];
3203 
3204    function visit(el) {
3205      if (!el || el.nodeType !== 1) return;
3206      const tag = el.tagName.toLowerCase();
3207      if (MIXED_WRAP_SKIP[tag]) return;
3208      if (el.hasAttribute && el.hasAttribute('contenteditable')) return;
3209      if (el !== rootEl && isOwn(el)) return;
3210 
3211      const children = Array.from(el.childNodes);
3212      const textNodes = [];
3213      let allText = children.length > 0;
3214      let hasNonWhitespaceText = false;
3215      for (const node of children) {
3216        if (node.nodeType === 3) {
3217          textNodes.push(node);
3218          if (node.nodeValue && /\S/.test(node.nodeValue)) hasNonWhitespaceText = true;
3219        } else {
3220          allText = false;
3221        }
3222      }
3223      if (allText && hasNonWhitespaceText) {
3224        rows.push({
3225          el,
3226          ref: documentRefForElement(el) || el.tagName.toLowerCase(),
3227          text: textNodes.map((node) => node.nodeValue).join(''),
3228          textNodes,
3229        });
3230      }
3231 
3232      for (const child of children) {
3233        if (child.nodeType === 1) visit(child);
3234      }
3235    }
3236 
3237    visit(rootEl);
3238    return rows;
3239  }
3240 
3241  function wrapMixedContentTextNodes(rootEl) {
3242    if (!rootEl || rootEl.nodeType !== 1) return;
3243    const tag = rootEl.tagName.toLowerCase();
3244    if (MIXED_WRAP_SKIP[tag]) return;
3245    if (rootEl.hasAttribute('contenteditable')) return;
3246    const children = Array.from(rootEl.childNodes);
3247    const hasText = children.some((n) => n.nodeType === 3 && /\S/.test(n.nodeValue || ''));
3248    const hasElement = children.some((n) => n.nodeType === 1);
3249    if (hasText && hasElement) {
3250      for (const node of children) {
3251        if (node.nodeType === 3 && /\S/.test(node.nodeValue || '')) {
3252          const wrap = document.createElement('span');
3253          wrap.dataset.impeccableTextWrap = 'true';
3254          wrap.textContent = node.nodeValue;
3255          rootEl.insertBefore(wrap, node);
3256          rootEl.removeChild(node);
3257        }
3258      }
3259    }
3260    for (const child of Array.from(rootEl.children)) {
3261      if (!child.dataset || !child.dataset.impeccableTextWrap) {
3262        wrapMixedContentTextNodes(child);
3263      }
3264    }
3265  }
3266  function unwrapMixedContentTextNodes(rootEl) {
3267    if (!rootEl || rootEl.nodeType !== 1) return;
3268    const wraps = rootEl.querySelectorAll('[data-impeccable-text-wrap="true"]');
3269    for (const wrap of wraps) {
3270      const parent = wrap.parentNode;
3271      if (!parent) continue;
3272      const textNode = document.createTextNode(wrap.textContent);
3273      parent.replaceChild(textNode, wrap);
3274      parent.normalize();
3275    }
3276  }
3277  let inlineEditRoot = null;
3278 
3279  function enableInlineEdit(targetEl) {
3280    if (!targetEl) return;
3281    inlineEditRoot = targetEl;
3282    wrapMixedContentTextNodes(targetEl);
3283    const rows = collectEditableTextRows(targetEl, { isOwn: own });
3284    inlineEditRows = rows;
3285    inlineEditDrafts = new Map();
3286    for (const row of rows) {
3287      row.inlineWhiteSpace = row.el.style.whiteSpace;
3288      row.el.style.whiteSpace = getComputedStyle(row.el).whiteSpace;
3289      row.el.setAttribute('contenteditable', 'true');
3290      row.el.dataset.impeccableEditable = 'true';
3291      row.el.dataset.impeccableOriginalText = row.text;
3292      row.el.style.userSelect = 'text';
3293      row.el.style.cursor = 'text';
3294      row.el.style.outline = 'none';
3295      row.el.addEventListener('input', onInlineInput);
3296    }
3297  }
3298 
3299  function disableInlineEdit(opts = {}) {
3300    for (const row of inlineEditRows) {
3301      if (activeElementDeep() === row.el) row.el.blur();
3302      row.el.removeAttribute('contenteditable');
3303      delete row.el.dataset.impeccableEditable;
3304      delete row.el.dataset.impeccableOriginalText;
3305      row.el.style.whiteSpace = row.inlineWhiteSpace || '';
3306      row.el.style.userSelect = '';
3307      row.el.style.cursor = '';
3308      row.el.style.outline = '';
3309      row.el.removeEventListener('input', onInlineInput);
3310    }
3311    inlineEditRows = [];
3312    inlineEditDrafts = new Map();
3313    if (inlineEditRoot && !opts.preserveMixedWraps) {
3314      unwrapMixedContentTextNodes(inlineEditRoot);
3315      inlineEditRoot = null;
3316    }
3317  }
3318 
3319  function onInlineInput(e) {
3320    inlineEditDrafts.set(e.currentTarget, e.currentTarget.textContent);
3321  }
3322 
3323  function hasTextRows(el) {
3324    if (!el) return false;
3325    // Lightweight: any descendant outside SKIP_SUBTREE_TAGS with at least one
3326    // non-whitespace direct text-node child means we have something editable
3327    // (mixed-content paragraphs included). Mirrors what the wrap+walk path
3328    // will produce in enableInlineEdit.
3329    function check(node) {
3330      if (!node || node.nodeType !== 1) return false;
3331      const tag = node.tagName.toLowerCase();
3332      if (MIXED_WRAP_SKIP[tag]) return false;
3333      if (node !== el && own(node)) return false;
3334      for (const child of node.childNodes) {
3335        if (child.nodeType === 3 && /\S/.test(child.nodeValue || '')) return true;
3336      }
3337      for (const child of node.children) {
3338        if (check(child)) return true;
3339      }
3340      return false;
3341    }
3342    return check(el);
3343  }
3344 
3345  function enterEditingMode() {
3346    if (pendingApplyInFlight) { showManualApplyBusyToast(); return; }
3347    setLiveState('EDITING');
3348    hideBar();
3349    hideAnnotOverlay();
3350    renderEditBadge('editing');
3351    enableInlineEdit(selectedElement);
3352    // Focus first editable element and position cursor at end
3353    if (inlineEditRows.length > 0) {
3354      const firstEditable = inlineEditRows[0] && inlineEditRows[0].el;
3355      setTimeout(() => {
3356        const el = firstEditable;
3357        if (!el || !el.isConnected || state !== 'EDITING') return;
3358        el.focus();
3359        const range = document.createRange();
3360        const sel = window.getSelection();
3361        range.selectNodeContents(el);
3362        range.collapse(false);
3363        sel.removeAllRanges();
3364        sel.addRange(range);
3365      }, 50);
3366    }
3367  }
3368 
3369  function restoreInlineEditDrafts() {
3370    for (const row of inlineEditRows) {
3371      if (inlineEditDrafts.has(row.el)) {
3372        row.el.textContent = row.el.dataset.impeccableOriginalText;
3373      }
3374    }
3375  }
3376 
3377  function cancelEditing() {
3378    restoreInlineEditDrafts();
3379    disableInlineEdit();
3380    setLiveState('CONFIGURING');
3381    showBar('configure');
3382    showAnnotOverlay(selectedElement);
3383    renderEditBadge('idle');
3384  }
3385 
3386  function cancelEditingToPicking() {
3387    restoreInlineEditDrafts();
3388    disableInlineEdit();
3389    hideBar();
3390    stopScrollTracking();
3391    hideAnnotOverlay();
3392    clearAnnotations();
3393    renderEditBadge('hidden');
3394    setLiveState('PICKING');
3395    hoveredElement = null;
3396    hideHighlight();
3397    syncPageChatFocus('editing-outside-click');
3398  }
3399 
3400  function teardownConfigureChrome() {
3401    hideConfigureBarTooltip();
3402    // hideBar() restores unsaved EDITING drafts before it disables inline
3403    // edit; disabling here first would wipe the draft metadata it needs.
3404    hideBar();
3405    stopScrollTracking();
3406    hideAnnotOverlay();
3407    clearAnnotations();
3408    renderEditBadge('hidden');
3409  }
3410 
3411  function exitConfigureToPicking(reason, opts = {}) {
3412    teardownConfigureChrome();
3413    setLiveState('PICKING');
3414    if (opts.clearHover) {
3415      hoveredElement = null;
3416      hideHighlight();
3417    }
3418    syncPageChatFocus(reason);
3419  }
3420 
3421  // Prefer the leaf's own id/class; if it has neither (e.g. a bare <em>),
3422  // climb to the nearest ancestor with one. The CLI uses tag+class together,
3423  // so tag must come from the same node as the locator.
3424  function buildLocatorForLeaf(leafEl, fallbackEl) {
3425    if (leafEl && (leafEl.id || leafEl.classList.length > 0)) {
3426      return {
3427        tag: leafEl.tagName.toLowerCase(),
3428        elementId: leafEl.id || null,
3429        classes: [...leafEl.classList],
3430      };
3431    }
3432    let cur = leafEl?.parentElement;
3433    while (cur && cur !== document.body) {
3434      if (cur.id || cur.classList.length > 0) {
3435        return {
3436          tag: cur.tagName.toLowerCase(),
3437          elementId: cur.id || null,
3438          classes: [...cur.classList],
3439        };
3440      }
3441      cur = cur.parentElement;
3442    }
3443    return {
3444      tag: (fallbackEl || leafEl).tagName.toLowerCase(),
3445      elementId: (fallbackEl || leafEl).id || null,
3446      classes: [...((fallbackEl || leafEl).classList || [])],
3447    };
3448  }
3449 
3450  function sourceHintForElement(el) {
3451    if (!el || !el.getAttribute) return null;
3452    const file = el.getAttribute('data-astro-source-file');
3453    const loc = el.getAttribute('data-astro-source-loc');
3454    if (file || loc) {
3455      const parsed = parseSourceLoc(loc);
3456      return {
3457        file: file || '',
3458        loc: loc || '',
3459        line: parsed.line,
3460        column: parsed.column,
3461      };
3462    }
3463    return null;
3464  }
3465 
3466  function parseSourceLoc(loc) {
3467    const match = String(loc || '').match(/^(\d+)(?::(\d+))?/);
3468    return {
3469      line: match ? Number(match[1]) : null,
3470      column: match && match[2] ? Number(match[2]) : null,
3471    };
3472  }
3473 
3474  function documentRefForElement(el) {
3475    if (!el || el.nodeType !== 1) return null;
3476    const parts = [];
3477    let cur = el;
3478    while (cur && cur.nodeType === 1) {
3479      const tag = cur.tagName.toLowerCase();
3480      if (tag === 'html') break;
3481      if (tag === 'body') {
3482        parts.unshift('body');
3483        break;
3484      }
3485      parts.unshift(documentRefSegment(cur));
3486      cur = cur.parentElement;
3487    }
3488    return parts.join('>') || null;
3489  }
3490 
3491  function documentRefSegment(el) {
3492    const tag = el.tagName.toLowerCase();
3493    return tag + documentRefIdSuffix(el) + documentRefClassSuffix(el) + ':nth-of-type(' + indexAmongSameTag(el) + ')';
3494  }
3495 
3496  function documentRefIdSuffix(el) {
3497    return el.id ? '#' + normalizeDocumentRefToken(el.id) : '';
3498  }
3499 
3500  function documentRefClassSuffix(el) {
3501    if (!el.classList || el.classList.length === 0) return '';
3502    const classes = [];
3503    for (const cls of el.classList) {
3504      if (!cls || cls.indexOf('impeccable-') === 0) continue;
3505      classes.push(normalizeDocumentRefToken(cls));
3506      if (classes.length === 2) break;
3507    }
3508    return classes.length ? '.' + classes.join('.') : '';
3509  }
3510 
3511  function normalizeDocumentRefToken(value) {
3512    return String(value || '').replace(/[>\s]+/g, '_');
3513  }
3514 
3515  function indexAmongSameTag(el) {
3516    const parent = el.parentElement;
3517    if (!parent) return 1;
3518    const tag = el.tagName.toLowerCase();
3519    let n = 0;
3520    for (const sib of parent.children) {
3521      if (sib.tagName.toLowerCase() === tag) {
3522        n++;
3523        if (sib === el) return n;
3524      }
3525    }
3526    return 1;
3527  }
3528 
3529  function copyEditLeafContext(el, originalText, newText) {
3530    if (!el) return null;
3531    return {
3532      ref: documentRefForElement(el),
3533      tagName: el.tagName ? el.tagName.toLowerCase() : null,
3534      id: el.id || null,
3535      classes: el.classList ? [...el.classList].filter((cls) => cls.indexOf('impeccable-') !== 0) : [],
3536      originalText,
3537      newText,
3538      textContent: (el.textContent || '').slice(0, 500),
3539      outerHTML: sanitizedContextOuterHTML(el, 3000) || null,
3540    };
3541  }
3542 
3543  function nearbyEditableTextsForManualEdit(rows, activeEl, originalText, newText) {
3544    const out = [];
3545    const seen = new Set();
3546    const skip = new Set([normalizeManualContextText(originalText), normalizeManualContextText(newText)]);
3547    for (const row of rows || []) {
3548      if (!row || row.el === activeEl) continue;
3549      const text = normalizeManualContextText(row.text);
3550      if (!text || text.length < 2 || seen.has(text) || skip.has(text)) continue;
3551      seen.add(text);
3552      out.push({
3553        ref: documentRefForElement(row.el),
3554        tag: row.el?.tagName ? row.el.tagName.toLowerCase() : null,
3555        classes: row.el?.classList ? [...row.el.classList].filter((cls) => cls.indexOf('impeccable-') !== 0) : [],
3556        text,
3557      });
3558      if (out.length >= 12) break;
3559    }
3560    return out;
3561  }
3562 
3563  function copyEditContainerContext(el) {
3564    if (!el) return null;
3565    return {
3566      ref: documentRefForElement(el),
3567      tagName: el.tagName ? el.tagName.toLowerCase() : null,
3568      id: el.id || null,
3569      classes: el.classList ? [...el.classList].filter((cls) => cls.indexOf('impeccable-') !== 0) : [],
3570      textContent: (el.textContent || '').slice(0, 1000),
3571      outerHTML: sanitizedContextOuterHTML(el, 10000) || null,
3572    };
3573  }
3574 
3575  function forbiddenManualTextChars(text) {
3576    const out = [];
3577    for (const ch of ['<', '{', '}', '`']) {
3578      if (String(text || '').includes(ch)) out.push(ch);
3579    }
3580    return out;
3581  }
3582 
3583  async function applyEditing() {
3584    if (pendingApplyInFlight) { showManualApplyBusyToast(); return; }
3585    const ops = [];
3586    for (const row of inlineEditRows) {
3587      const newText = inlineEditDrafts.get(row.el);
3588      if (newText !== undefined && newText !== row.text) {
3589        if (String(newText || '').trim() === '') {
3590          showToast('Save rejected: copy edits cannot be empty.', 5500);
3591          return;
3592        }
3593        const forbidden = forbiddenManualTextChars(newText);
3594        if (forbidden.length > 0) {
3595          showToast('Save rejected: newText cannot contain ' + forbidden.join(' ') + ' (plain text only; ask the AI to insert markup)', 5500);
3596          return;
3597        }
3598        const locator = buildLocatorForLeaf(row.el, selectedElement);
3599        const op = {
3600          ref: row.ref,
3601          tag: locator.tag,
3602          elementId: locator.elementId,
3603          classes: locator.classes,
3604          originalText: row.text,
3605          newText,
3606        };
3607        op.leaf = copyEditLeafContext(row.el, row.text, newText);
3608        op.nearbyEditableTexts = nearbyEditableTextsForManualEdit(inlineEditRows, row.el, row.text, newText);
3609        const restoreHint = mixedTextWrapRestoreHint(row.el);
3610        if (restoreHint) op.restore = restoreHint;
3611        const sourceHint = sourceHintForElement(row.el);
3612        if (sourceHint) op.sourceHint = sourceHint;
3613        ops.push(op);
3614      }
3615    }
3616    if (ops.length === 0) { cancelEditing(); return; }
3617    const contextElement = contextElementForManualEdit(selectedElement, inlineEditRows, ops);
3618    const contextRef = documentRefForElement(contextElement);
3619    if (contextRef) for (const op of ops) op.contextRef = contextRef;
3620    const container = copyEditContainerContext(contextElement);
3621    if (container) for (const op of ops) op.container = container;
3622    try {
3623      const res = await fetch('http://localhost:' + PORT + '/manual-edit-stash', {
3624        method: 'POST',
3625        headers: { 'Content-Type': 'application/json' },
3626        body: JSON.stringify({
3627          token: TOKEN,
3628          id: id8(),
3629          pageUrl: location.pathname,
3630          element: extractContext(contextElement),
3631          ops,
3632        }),
3633      });
3634      if (!res.ok) {
3635        const errBody = await res.json().catch(() => ({}));
3636        throw new Error(errBody.error || ('HTTP ' + res.status));
3637      }
3638      const stashResult = await res.json();
3639      updatePendingCounter(stashResult.pendingCount || 0);
3640      maybeShowFirstSaveToast();
3641      disableInlineEdit();
3642      setLiveState('CONFIGURING');
3643      showBar('configure');
3644      showAnnotOverlay(selectedElement);
3645      renderEditBadge('idle');
3646    } catch (err) {
3647      console.error('[impeccable] manual edit stash failed:', err);
3648      const detail = String(err?.message || '');
3649      if (detail.includes('newText cannot contain') || detail.includes('newText cannot be empty')) {
3650        showToast('Save rejected: ' + detail.replace(/^manual_edits:\s*/, ''), 5500);
3651      } else {
3652        showToast('Save failed - retry or cancel', 4000);
3653      }
3654    }
3655  }
3656 
3657  function schedulePendingDockPosition() {
3658    if (!pendingDockEl || !globalBarEl) return;
3659    requestAnimationFrame(positionPendingDock);
3660  }
3661 
3662  function positionPendingDock() {
3663    if (!pendingDockEl || !globalBarEl) return;
3664    const width = globalBarEl.offsetWidth;
3665    const height = globalBarEl.offsetHeight;
3666    if (!width || !height) return;
3667    pendingDockEl.style.left = Math.round((window.innerWidth / 2) - (width / 2) - 18) + 'px';
3668    pendingDockEl.style.top = 'auto';
3669    pendingDockEl.style.bottom = Math.round(14 + (height / 2)) + 'px';
3670  }
3671 
3672  function playPendingIntroAnimation() {
3673    if (!pendingPillEl || !pendingPillEl.animate || (matchMedia?.('(prefers-reduced-motion: reduce)').matches)) return;
3674    if (pendingIntroAnimation) pendingIntroAnimation.cancel();
3675    pendingIntroAnimation = pendingPillEl.animate([
3676      {
3677        opacity: 0,
3678        transform: 'scale(0.82)',
3679        filter: 'brightness(1.2)',
3680        boxShadow: '0 0 0 0 oklch(84% 0.19 80.46 / 0.45), 0 8px 24px oklch(0% 0 0 / 0.16)',
3681      },
3682      {
3683        opacity: 1,
3684        transform: 'scale(1.08)',
3685        filter: 'brightness(1.15)',
3686        boxShadow: '0 0 0 12px oklch(84% 0.19 80.46 / 0), 0 12px 34px oklch(0% 0 0 / 0.22)',
3687        offset: 0.55,
3688      },
3689      {
3690        opacity: 1,
3691        transform: 'scale(1)',
3692        filter: 'none',
3693        boxShadow: '0 4px 16px oklch(0% 0 0 / 0.16), 0 1px 3px oklch(0% 0 0 / 0.1)',
3694      },
3695    ], { duration: 620, easing: EASE });
3696    pendingIntroAnimation.addEventListener('finish', () => { pendingIntroAnimation = null; }, { once: true });
3697  }
3698 
3699  function ensureSpinKeyframes() {
3700    if (uiGetById(PREFIX + '-keyframes')) return;
3701    const style = document.createElement('style');
3702    style.id = PREFIX + '-keyframes';
3703    style.textContent = '@keyframes impeccable-spin { to { transform: rotate(360deg); } }';
3704    uiAppendStyle(style);
3705  }
3706 
3707  function pendingApplyLabel(count) {
3708    return count === 1 ? 'Apply copy edit' : 'Apply copy edits';
3709  }
3710 
3711  function showManualApplyBusyToast() {
3712    showToast('Apply is still running. Wait for it to finish.', 2800);
3713  }
3714 
3715  function manualApplyStateKey() {
3716    return PREFIX + ':manual-apply:' + PORT + ':' + TOKEN + ':' + location.pathname;
3717  }
3718 
3719  function readStoredManualApplyState() {
3720    try {
3721      const raw = sessionStorage.getItem(manualApplyStateKey());
3722      if (!raw) return null;
3723      const storedState = JSON.parse(raw);
3724      if (!storedState || storedState.pageUrl !== location.pathname || Date.now() > Number(storedState.expiresAt || 0)) {
3725        sessionStorage.removeItem(manualApplyStateKey());
3726        return null;
3727      }
3728      return storedState;
3729    } catch {
3730      return null;
3731    }
3732  }
3733 
3734  function writeManualApplyState(applyState) {
3735    try {
3736      sessionStorage.setItem(manualApplyStateKey(), JSON.stringify({
3737        ...applyState,
3738        pageUrl: location.pathname,
3739        updatedAt: Date.now(),
3740        expiresAt: Date.now() + MANUAL_APPLY_STATE_TTL_MS,
3741      }));
3742    } catch {
3743      // Best-effort only. The in-memory flag still covers non-reload flows.
3744    }
3745  }
3746 
3747  function storeManualApplyState(count, patch) {
3748    const currentCount = Number(count) || 0;
3749    const existing = readStoredManualApplyState() || {};
3750    const totalOps = Number(existing.totalOps) || Number(existing.count) || currentCount;
3751    if (totalOps <= 0 && currentCount <= 0) return;
3752    writeManualApplyState({
3753      count: Number(existing.count) || currentCount || totalOps,
3754      totalOps: totalOps || currentCount,
3755      completedOps: Number(existing.completedOps) || 0,
3756      remainingCount: Number.isFinite(Number(existing.remainingCount)) ? Number(existing.remainingCount) : currentCount,
3757      phase: existing.phase || 'applying',
3758      startedAt: Number(existing.startedAt) || Date.now(),
3759      ...(patch || {}),
3760    });
3761  }
3762 
3763  function clearStoredManualApplyState() {
3764    try {
3765      sessionStorage.removeItem(manualApplyStateKey());
3766    } catch {
3767      // Ignore storage failures; UI state can still clear in memory.
3768    }
3769  }
3770 
3771  function shouldResumeManualApplyLoading(count) {
3772    return Number(count) > 0 && readStoredManualApplyState() !== null;
3773  }
3774 
3775  function manualApplyLoadingText(fallbackCount) {
3776    const stored = readStoredManualApplyState();
3777    if (stored?.phase === 'repair-decision') return 'Apply needs attention';
3778    if (stored?.phase === 'repairing') {
3779      const attempt = Number(stored.repairAttempt) || 1;
3780      const max = Number(stored.repairMaxAttempts) || 3;
3781      return 'Fixing apply issue, attempt ' + attempt + '/' + max;
3782    }
3783    if (stored?.phase === 'verifying') return 'Verifying copy edits';
3784    const remaining = Number.isFinite(Number(stored?.remainingCount))
3785      ? Number(stored.remainingCount)
3786      : Number(fallbackCount) || 0;
3787    return remaining > 0
3788      ? 'Applying ' + remaining + ' copy edit' + (remaining === 1 ? '' : 's')
3789      : 'Verifying copy edits';
3790  }
3791 
3792  function resetManualApplyProgress(count) {
3793    const total = Number(count) || 0;
3794    if (total <= 0) return;
3795    writeManualApplyState({
3796      count: total,
3797      totalOps: total,
3798      completedOps: 0,
3799      remainingCount: total,
3800      phase: 'applying',
3801      startedAt: Date.now(),
3802    });
3803  }
3804 
3805  function updateManualApplyProgressFromChunk(chunk) {
3806    if (!chunk || !pendingApplyInFlight) return;
3807    const stored = readStoredManualApplyState() || {};
3808    const totalOps = Number(chunk.totalOpCount) || Number(stored.totalOps) || Number(stored.count) || parseInt(pendingPillEl?.dataset.count || '0', 10) || 0;
3809    const completedOps = Math.min(totalOps, (Number(stored.completedOps) || 0) + (Number(chunk.opCount) || 0));
3810    const remainingCount = Math.max(0, totalOps - completedOps);
3811    storeManualApplyState(Number(stored.count) || totalOps, {
3812      totalOps,
3813      completedOps,
3814      remainingCount,
3815      phase: remainingCount > 0 ? 'applying' : 'verifying',
3816    });
3817    setPendingApplyLoading(true, remainingCount);
3818  }
3819 
3820  function updateManualApplyRepairState(repair, phase) {
3821    const count = parseInt(pendingPillEl?.dataset.count || '0', 10) || Number(readStoredManualApplyState()?.count) || 0;
3822    if (count <= 0) return;
3823    storeManualApplyState(count, {
3824      phase,
3825      repairAttempt: Number(repair?.attempt || repair?.attempts) || 1,
3826      repairMaxAttempts: Number(repair?.maxAttempts) || 3,
3827    });
3828    setPendingApplyLoading(true, count);
3829  }
3830 
3831  function refreshLiveControlsForManualApply() {
3832    if (pendingApplyInFlight) {
3833      hideActionPicker();
3834      closeTunePopover();
3835    }
3836    if (barEl && barEl.style.display !== 'none' && state === 'CONFIGURING') {
3837      const input = uiGetById(PREFIX + '-input');
3838      const prompt = input ? input.value : '';
3839      updateBarContent('configure');
3840      const nextInput = uiGetById(PREFIX + '-input');
3841      if (nextInput) nextInput.value = prompt;
3842    }
3843    if (editBadgeEl && editBadgeEl.style.display !== 'none') {
3844      if (pendingApplyInFlight) renderEditBadge('idle-disabled');
3845      else if (state === 'CONFIGURING' && selectedElement && hasTextRows(selectedElement)) renderEditBadge('idle');
3846    }
3847    updateGlobalBarState();
3848  }
3849 
3850  function hidePendingApplyDock() {
3851    pendingApplyInFlight = false;
3852    clearStoredManualApplyState();
3853    if (pendingIntroAnimation) { pendingIntroAnimation.cancel(); pendingIntroAnimation = null; }
3854    if (pendingDockEl) pendingDockEl.style.display = 'none';
3855    if (pendingPillEl) {
3856      pendingPillEl.dataset.count = '0';
3857      pendingPillEl.style.display = 'none';
3858      pendingPillEl.disabled = false;
3859      pendingPillEl.setAttribute('aria-busy', 'false');
3860      pendingPillEl.setAttribute('aria-label', 'Apply copy edits to source');
3861      pendingPillEl.style.cursor = 'pointer';
3862      pendingPillEl.style.filter = 'none';
3863      pendingPillEl.style.transform = 'scale(1)';
3864    }
3865    if (pendingPillSpinnerEl) pendingPillSpinnerEl.style.display = 'none';
3866    if (pendingPillLabelEl) pendingPillLabelEl.textContent = pendingApplyLabel(0);
3867    if (pendingPillCountEl) {
3868      pendingPillCountEl.textContent = '0';
3869      pendingPillCountEl.style.display = 'inline-flex';
3870    }
3871    if (pendingTrashBtn) {
3872      pendingTrashBtn.style.display = 'none';
3873      pendingTrashBtn.disabled = false;
3874      pendingTrashBtn.style.cursor = 'pointer';
3875      pendingTrashBtn.style.opacity = '1';
3876    }
3877    if (pendingKeepFixingBtn) pendingKeepFixingBtn.style.display = 'none';
3878    if (pendingRollbackBtn) pendingRollbackBtn.style.display = 'none';
3879    refreshLiveControlsForManualApply();
3880  }
3881 
3882  function setPendingApplyLoading(loading, count) {
3883    if (!pendingPillEl || !pendingPillLabelEl || !pendingPillCountEl || !pendingTrashBtn) return;
3884    pendingApplyInFlight = loading === true;
3885    const currentCount = count || parseInt(pendingPillEl.dataset.count || '0', 10) || 0;
3886    if (pendingApplyInFlight) storeManualApplyState(currentCount);
3887    else clearStoredManualApplyState();
3888    if (pendingPillSpinnerEl) pendingPillSpinnerEl.style.display = pendingApplyInFlight ? 'inline-block' : 'none';
3889    pendingPillLabelEl.textContent = pendingApplyInFlight
3890      ? manualApplyLoadingText(currentCount)
3891      : pendingApplyLabel(currentCount);
3892    pendingPillCountEl.style.display = pendingApplyInFlight ? 'none' : 'inline-flex';
3893    pendingPillEl.disabled = pendingApplyInFlight;
3894    pendingPillEl.setAttribute('aria-busy', pendingApplyInFlight ? 'true' : 'false');
3895    pendingPillEl.style.cursor = pendingApplyInFlight ? 'wait' : 'pointer';
3896    pendingPillEl.style.filter = pendingApplyInFlight ? 'brightness(0.98)' : 'none';
3897    pendingPillEl.style.transform = 'scale(1)';
3898    pendingTrashBtn.disabled = pendingApplyInFlight;
3899    pendingTrashBtn.style.cursor = pendingApplyInFlight ? 'not-allowed' : 'pointer';
3900    pendingTrashBtn.style.opacity = pendingApplyInFlight ? '0.58' : '1';
3901    if (pendingApplyInFlight) {
3902      if (pendingKeepFixingBtn) pendingKeepFixingBtn.style.display = 'none';
3903      if (pendingRollbackBtn) pendingRollbackBtn.style.display = 'none';
3904      pendingTrashBtn.style.display = 'inline-flex';
3905    }
3906    schedulePendingDockPosition();
3907    refreshLiveControlsForManualApply();
3908  }
3909 
3910  function updatePendingCounter(currentPageCount) {
3911    if (!pendingDockEl || !pendingPillEl || !pendingPillLabelEl || !pendingPillCountEl || !pendingTrashBtn) return;
3912    const previousCount = parseInt(pendingPillEl.dataset.count || '0', 10);
3913    if (!currentPageCount || currentPageCount <= 0) {
3914      hidePendingApplyDock();
3915      return;
3916    }
3917    pendingPillLabelEl.textContent = pendingApplyLabel(currentPageCount);
3918    pendingPillCountEl.textContent = String(currentPageCount);
3919    pendingPillEl.setAttribute('aria-label', 'Apply ' + currentPageCount + ' copy edit' + (currentPageCount === 1 ? '' : 's') + ' to source');
3920    pendingPillEl.style.display = 'inline-flex';
3921    pendingTrashBtn.style.display = 'inline-flex';
3922    pendingDockEl.style.display = 'inline-flex';
3923    pendingPillEl.dataset.count = String(currentPageCount);
3924    if (pendingApplyInFlight || shouldResumeManualApplyLoading(currentPageCount)) setPendingApplyLoading(true, currentPageCount);
3925    schedulePendingDockPosition();
3926    if (previousCount <= 0) playPendingIntroAnimation();
3927  }
3928 
3929  function maybeShowFirstSaveToast() {
3930    if (!firstSaveOfSession) return;
3931    firstSaveOfSession = false;
3932    showToast('Saved. Click "Apply copy edits" to write changes.', 4500);
3933  }
3934 
3935  async function fetchPendingCount() {
3936    try {
3937      const res = await fetch(
3938        'http://localhost:' + PORT + '/manual-edit-stash?token=' + encodeURIComponent(TOKEN) + '&pageUrl=' + encodeURIComponent(location.pathname),
3939      );
3940      if (!res.ok) return;
3941      const data = await res.json();
3942      updatePendingCounter(data.count || 0);
3943    } catch (err) {
3944      console.warn('[impeccable] failed to fetch pending count:', err);
3945    }
3946  }
3947 
3948  async function onPendingPillClick() {
3949    const count = parseInt(pendingPillEl?.dataset.count || '0', 10);
3950    if (count <= 0 || pendingApplyInFlight) return;
3951    const ok = confirm('Apply ' + count + ' copy edit' + (count === 1 ? '' : 's') + ' to source?');
3952    if (!ok) return;
3953    let waitForSseCompletion = false;
3954    resetManualApplyProgress(count);
3955    setPendingApplyLoading(true, count);
3956    try {
3957      const res = await fetch(
3958        'http://localhost:' + PORT + '/manual-edit-commit?token=' + encodeURIComponent(TOKEN) + '&pageUrl=' + encodeURIComponent(location.pathname) + '&async=1',
3959        { method: 'POST', keepalive: true },
3960      );
3961      if (!res.ok) {
3962        const errBody = await res.json().catch(() => ({}));
3963        throw new Error(errBody.error || ('HTTP ' + res.status));
3964      }
3965      const result = await res.json();
3966      if (res.status === 202 || result.status === 'started') {
3967        waitForSseCompletion = true;
3968        return;
3969      }
3970      const remaining = remainingManualEditCount(result);
3971      updatePendingCounter(remaining);
3972      if (result.failed && result.failed.length > 0) {
3973        console.warn('[impeccable] some copy edits failed:', result.failed);
3974        showToast('Applied ' + (result.applied?.length || 0) + ', ' + result.failed.length + ' failed - see console', 5000);
3975      } else {
3976        const n = Array.isArray(result.applied) ? result.applied.length : (result.cleared || 0);
3977        if (n > 0) {
3978          showToast('Applied ' + n + ' edit' + (n === 1 ? '' : 's'), 2500);
3979        } else {
3980          console.warn('[impeccable] apply returned no verified edits:', result);
3981          showToast('No edits applied - see console', 4000);
3982        }
3983      }
3984    } catch (err) {
3985      console.error('[impeccable] commit failed:', err);
3986      showToast('Apply failed - see console', 4000);
3987    } finally {
3988      if (waitForSseCompletion) return;
3989      const remainingCount = parseInt(pendingPillEl?.dataset.count || '0', 10) || 0;
3990      if (remainingCount > 0) setPendingApplyLoading(false);
3991      else hidePendingApplyDock();
3992    }
3993  }
3994 
3995  async function onPendingTrashClick() {
3996    const count = parseInt(pendingPillEl?.dataset.count || '0', 10);
3997    if (count <= 0 || pendingApplyInFlight) return;
3998    const ok = confirm('Discard ' + count + ' copy edit' + (count === 1 ? '' : 's') + ' on this page?');
3999    if (!ok) return;
4000    try {
4001      const res = await fetch(
4002        'http://localhost:' + PORT + '/manual-edit-discard?token=' + encodeURIComponent(TOKEN) + '&pageUrl=' + encodeURIComponent(location.pathname),
4003        { method: 'POST' },
4004      );
4005      if (!res.ok) throw new Error('HTTP ' + res.status);
4006      const result = await res.json().catch(() => ({}));
4007      const restoreFailures = restoreDiscardedManualEdits(result.entries || []);
4008      updatePendingCounter(0);
4009      if (restoreFailures > 0) {
4010        showToast('Discarded ' + count + ' copy edit' + (count === 1 ? '' : 's') + ' - refresh to reset ' + restoreFailures, 4000);
4011      } else {
4012        showToast('Discarded ' + count + ' copy edit' + (count === 1 ? '' : 's'), 2500);
4013      }
4014    } catch (err) {
4015      console.error('[impeccable] discard failed:', err);
4016      showToast('Discard failed - see console', 4000);
4017    }
4018  }
4019 
4020  function showManualApplyDecision(msg) {
4021    const count = parseInt(pendingPillEl?.dataset.count || '0', 10) || numberOrNull(msg?.remainingCount) || 0;
4022    pendingApplyInFlight = false;
4023    storeManualApplyState(count, {
4024      phase: 'repair-decision',
4025      repairAttempt: numberOrNull(msg?.repair?.attempts) || numberOrNull(msg?.repair?.attempt) || 3,
4026      repairMaxAttempts: numberOrNull(msg?.repair?.maxAttempts) || 3,
4027    });
4028    if (pendingPillSpinnerEl) pendingPillSpinnerEl.style.display = 'none';
4029    if (pendingPillLabelEl) pendingPillLabelEl.textContent = 'Apply needs attention';
4030    if (pendingPillCountEl) pendingPillCountEl.style.display = 'none';
4031    if (pendingPillEl) {
4032      pendingPillEl.disabled = true;
4033      pendingPillEl.setAttribute('aria-busy', 'false');
4034      pendingPillEl.style.cursor = 'default';
4035      pendingPillEl.style.display = 'inline-flex';
4036    }
4037    if (pendingTrashBtn) pendingTrashBtn.style.display = 'none';
4038    if (pendingKeepFixingBtn) pendingKeepFixingBtn.style.display = 'inline-flex';
4039    if (pendingRollbackBtn) pendingRollbackBtn.style.display = 'inline-flex';
4040    if (pendingDockEl) pendingDockEl.style.display = 'inline-flex';
4041    schedulePendingDockPosition();
4042    refreshLiveControlsForManualApply();
4043  }
4044 
4045  async function onPendingKeepFixingClick() {
4046    const count = parseInt(pendingPillEl?.dataset.count || '0', 10) || numberOrNull(readStoredManualApplyState()?.count) || 0;
4047    if (count <= 0) return;
4048    updateManualApplyRepairState({ attempt: 1, maxAttempts: 3 }, 'repairing');
4049    try {
4050      const res = await fetch(
4051        'http://localhost:' + PORT + '/manual-edit-commit?token=' + encodeURIComponent(TOKEN) + '&pageUrl=' + encodeURIComponent(location.pathname) + '&async=1&repair=1',
4052        { method: 'POST', keepalive: true },
4053      );
4054      if (!res.ok) throw new Error('HTTP ' + res.status);
4055      if (pendingKeepFixingBtn) pendingKeepFixingBtn.style.display = 'none';
4056      if (pendingRollbackBtn) pendingRollbackBtn.style.display = 'none';
4057      if (pendingTrashBtn) pendingTrashBtn.style.display = 'inline-flex';
4058    } catch (err) {
4059      console.error('[impeccable] repair retry failed:', err);
4060      showToast('Repair retry failed - see console', 4000);
4061      showManualApplyDecision({ remainingCount: count, repair: readStoredManualApplyState() });
4062    }
4063  }
4064 
4065  async function onPendingRollbackClick() {
4066    const ok = confirm('Rollback source files to before this Apply and keep the edits staged?');
4067    if (!ok) return;
4068    try {
4069      const res = await fetch(
4070        'http://localhost:' + PORT + '/manual-edit-repair-decision?token=' + encodeURIComponent(TOKEN) + '&pageUrl=' + encodeURIComponent(location.pathname),
4071        {
4072          method: 'POST',
4073          headers: { 'Content-Type': 'application/json' },
4074          body: JSON.stringify({ token: TOKEN, pageUrl: location.pathname, action: 'rollback' }),
4075        },
4076      );
4077      if (!res.ok) throw new Error('HTTP ' + res.status);
4078      const result = await res.json().catch(() => ({}));
4079      clearStoredManualApplyState();
4080      updatePendingCounter(numberOrNull(result.remainingCount) || 0);
4081      showToast('Rolled back source; copy edits are still staged.', 3500);
4082    } catch (err) {
4083      console.error('[impeccable] manual Apply rollback failed:', err);
4084      showToast('Rollback failed - see console', 4000);
4085    }
4086  }
4087 
4088  function manualEditEventForCurrentPage(msg) {
4089    return !msg?.pageUrl || msg.pageUrl === location.pathname;
4090  }
4091 
4092  function numberOrNull(value) {
4093    const n = Number(value);
4094    return Number.isFinite(n) ? n : null;
4095  }
4096 
4097  function remainingManualEditCount(payload) {
4098    const perPageCount = numberOrNull(payload?.perPage?.[location.pathname]);
4099    if (perPageCount !== null) return perPageCount;
4100    const remainingCount = numberOrNull(payload?.remainingCount);
4101    if (remainingCount !== null) return remainingCount;
4102    const totalCount = numberOrNull(payload?.totalCount);
4103    if (totalCount === 0) return 0;
4104    return null;
4105  }
4106 
4107  function handleManualEditActivity(msg) {
4108    if (!manualEditEventForCurrentPage(msg)) return;
4109 
4110    if (msg.type === 'manual_edit_stashed') {
4111      const pendingCount = numberOrNull(msg.pendingCount);
4112      if (pendingCount !== null) updatePendingCounter(pendingCount);
4113      return;
4114    }
4115 
4116    if (msg.type === 'manual_edit_commit_started') {
4117      const pendingCount = numberOrNull(msg.pendingCount);
4118      if (pendingCount !== null && pendingCount > 0) updatePendingCounter(pendingCount);
4119      if (!msg.repairOnly && pendingCount !== null && pendingCount > 0) resetManualApplyProgress(pendingCount);
4120      if (msg.repairOnly) updateManualApplyRepairState({ attempt: 1, maxAttempts: 3 }, 'repairing');
4121      setPendingApplyLoading(true, pendingCount || undefined);
4122      return;
4123    }
4124 
4125    if (msg.type === 'manual_edit_apply_reply_received') {
4126      if (msg.chunk) updateManualApplyProgressFromChunk(msg.chunk);
4127      if (msg.repair) updateManualApplyRepairState(msg.repair, 'repairing');
4128      return;
4129    }
4130 
4131    if (msg.type === 'manual_edit_apply_dispatched' && msg.repair) {
4132      updateManualApplyRepairState(msg.repair, 'repairing');
4133      return;
4134    }
4135 
4136    if (msg.type === 'manual_edit_repair_needs_decision') {
4137      showManualApplyDecision(msg);
4138      return;
4139    }
4140 
4141    if (msg.type === 'manual_edit_repair_rollback_done') {
4142      clearStoredManualApplyState();
4143      fetchPendingCount();
4144      return;
4145    }
4146 
4147    if (msg.type === 'manual_edit_commit_done') {
4148      if (msg.reason === 'manual_edit_repair_needs_decision' || msg.needsManualDecision === true) {
4149        showManualApplyDecision(msg);
4150        return;
4151      }
4152      // Clear the in-flight flag BEFORE updating the counter. updatePendingCounter
4153      // re-asserts setPendingApplyLoading(true) whenever the flag is still set and
4154      // edits remain (failed entries stay staged), which would otherwise leave the
4155      // picker frozen forever after a partial/failed apply.
4156      const wasApplying = pendingApplyInFlight;
4157      setPendingApplyLoading(false);
4158      const remainingCount = remainingManualEditCount(msg);
4159      updatePendingCounter(remainingCount === null ? 0 : remainingCount);
4160      if (wasApplying) {
4161        const failedCount = numberOrNull(msg.failedCount) || 0;
4162        const appliedCount = numberOrNull(msg.appliedCount) || numberOrNull(msg.cleared) || 0;
4163        if (failedCount > 0) {
4164          showToast('Applied ' + appliedCount + ', ' + failedCount + ' failed - see console', 5000);
4165        } else if (appliedCount > 0) {
4166          showToast('Applied ' + appliedCount + ' edit' + (appliedCount === 1 ? '' : 's'), 2500);
4167        }
4168      }
4169      return;
4170    }
4171 
4172    if (msg.type === 'manual_edit_commit_failed') {
4173      setPendingApplyLoading(false);
4174      fetchPendingCount();
4175      return;
4176    }
4177 
4178    if (msg.type === 'manual_edit_discarded') {
4179      fetchPendingCount();
4180    }
4181  }
4182 
4183  function restoreDiscardedManualEdits(entries) {
4184    let failures = 0;
4185    for (const entry of entries || []) {
4186      for (const op of entry.ops || []) {
4187        if (restoreMixedTextNodeManualEdit(op)) continue;
4188        const el = findManualEditRestoreElement(op);
4189        if (!el || typeof op.originalText !== 'string' || !canRestoreManualEditElement(el, op)) {
4190          failures += 1;
4191          continue;
4192        }
4193        el.textContent = op.originalText;
4194      }
4195    }
4196    if (failures > 0) {
4197      console.warn('[impeccable] skipped unsafe copy edit DOM restore for', failures, 'edit(s). Refresh to reset the page DOM.');
4198    }
4199    return failures;
4200  }
4201 
4202  function canRestoreManualEditElement(el, op) {
4203    if (!el || typeof op?.originalText !== 'string') return false;
4204    if (el.children && el.children.length > 0) return false;
4205    return normalizeManualContextText(el.textContent) === normalizeManualContextText(op.newText);
4206  }
4207 
4208  function mixedTextWrapRestoreHint(el) {
4209    if (!el || !el.dataset || el.dataset.impeccableTextWrap !== 'true' || !el.parentElement) return null;
4210    const siblings = directMixedTextRestoreNodes(el.parentElement);
4211    const textIndex = siblings.indexOf(el);
4212    return {
4213      kind: 'mixedTextNode',
4214      parentRef: documentRefForElement(el.parentElement),
4215      textIndex,
4216    };
4217  }
4218 
4219  function restoreMixedTextNodeManualEdit(op) {
4220    const restore = op?.restore;
4221    if (!restore || restore.kind !== 'mixedTextNode' || typeof op?.originalText !== 'string') return false;
4222    const parent = queryManualEditRef(restore.parentRef);
4223    if (!parent) return false;
4224    const textNodes = directMixedTextRestoreNodes(parent).filter((node) => node.nodeType === 3);
4225    const newText = normalizeManualContextText(op.newText);
4226    const byIndex = textNodes[Number(restore.textIndex)];
4227    if (byIndex && normalizeManualContextText(byIndex.nodeValue) === newText) {
4228      byIndex.nodeValue = op.originalText;
4229      return true;
4230    }
4231    const matches = textNodes.filter((node) => normalizeManualContextText(node.nodeValue) === newText);
4232    if (matches.length !== 1) return false;
4233    matches[0].nodeValue = op.originalText;
4234    return true;
4235  }
4236 
4237  function directMixedTextRestoreNodes(parent) {
4238    return Array.from(parent?.childNodes || []).filter((node) => {
4239      if (node.nodeType === 3) return /\S/.test(node.nodeValue || '');
4240      return node.nodeType === 1
4241        && node.dataset
4242        && node.dataset.impeccableTextWrap === 'true'
4243        && /\S/.test(node.textContent || '');
4244    });
4245  }
4246 
4247  function findManualEditRestoreElement(op) {
4248    for (const ref of [op?.ref, op?.leaf?.ref]) {
4249      const byRef = queryManualEditRef(ref);
4250      if (byRef) return byRef;
4251    }
4252    const tag = op?.tag || op?.leaf?.tagName || '*';
4253    const classes = Array.isArray(op?.classes) ? op.classes : (Array.isArray(op?.leaf?.classes) ? op.leaf.classes : []);
4254    const selector = (tag === '*' ? '' : tag) + classes.map((cls) => '.' + cssIdent(cls)).join('') || '*';
4255    let matches = [];
4256    try {
4257      matches = Array.from(document.querySelectorAll(selector));
4258    } catch {
4259      matches = [];
4260    }
4261    const newText = normalizeManualContextText(op?.newText);
4262    const filtered = matches.filter((el) => normalizeManualContextText(el.textContent) === newText);
4263    return filtered.length === 1 ? filtered[0] : null;
4264  }
4265 
4266  function queryManualEditRef(ref) {
4267    if (!ref || typeof ref !== 'string') return null;
4268    const parts = ref.split('>').map((part) => part.trim()).filter(Boolean);
4269    let current = null;
4270    for (let index = 0; index < parts.length; index += 1) {
4271      const segment = parseManualEditRefSegment(parts[index]);
4272      if (!segment) return null;
4273      if (index === 0 && segment.tag === 'body') {
4274        current = document.body;
4275        if (!elementMatchesManualRefSegment(current, segment)) return null;
4276        continue;
4277      }
4278      const scope = current || document.body;
4279      const children = Array.from(scope.children || []);
4280      current = children.find((child) => elementMatchesManualRefSegment(child, segment)) || null;
4281      if (!current) return null;
4282    }
4283    return current;
4284  }
4285 
4286  function parseManualEditRefSegment(segment) {
4287    const nthMatch = String(segment || '').match(/:nth-of-type\((\d+)\)$/);
4288    const nth = nthMatch ? Number(nthMatch[1]) : null;
4289    const base = nthMatch ? segment.slice(0, nthMatch.index) : segment;
4290    const tagMatch = base.match(/^[^#.:\s]+/);
4291    const tag = tagMatch ? tagMatch[0].toLowerCase() : null;
4292    if (!tag) return null;
4293    const idMatch = base.match(/#([^#.]+)/);
4294    const classes = base
4295      .slice(tag.length)
4296      .replace(/#[^#.]+/, '')
4297      .split('.')
4298      .filter(Boolean);
4299    return { tag, id: idMatch ? idMatch[1] : null, classes, nth };
4300  }
4301 
4302  function elementMatchesManualRefSegment(el, segment) {
4303    if (!el || !segment) return false;
4304    if (el.tagName.toLowerCase() !== segment.tag) return false;
4305    if (segment.id && el.id !== segment.id) return false;
4306    for (const cls of segment.classes) {
4307      if (!el.classList || !el.classList.contains(cls)) return false;
4308    }
4309    if (segment.nth && indexAmongSameTag(el) !== segment.nth) return false;
4310    return true;
4311  }
4312 
4313  function cssIdent(value) {
4314    if (window.CSS && typeof window.CSS.escape === 'function') return window.CSS.escape(String(value));
4315    return String(value).replace(/[^a-zA-Z0-9_-]/g, '\\$&');
4316  }
4317 
4318  //
4319  // Edit content badge - floating button at element top-right to enter EDITING mode
4320  //
4321 
4322  const EDIT_COPY_LABEL = 'Edit copy';
4323  const EDIT_COPY_ICON =
4324    '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
4325    '<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/>' +
4326    '</svg>';
4327 
4328  function usesShadowChromeRoot() {
4329    const root = liveUiRoot();
4330    return root && root !== document.body && root.host && root.host.id === PREFIX + '-root';
4331  }
4332 
4333  function setImportantStyle(el, name, value) {
4334    el.style.setProperty(name, value, 'important');
4335  }
4336 
4337  function initEditBadgeHitProxies() {
4338    if (!usesShadowChromeRoot() || editBadgeProxyRoot) return;
4339    editBadgeProxyRoot = document.createElement('div');
4340    editBadgeProxyRoot.id = PREFIX + '-edit-badge-hit-proxies';
4341    editBadgeProxyRoot.setAttribute('aria-hidden', 'true');
4342    const styles = {
4343      all: 'initial',
4344      position: 'fixed',
4345      inset: '0',
4346      width: '100vw',
4347      height: '100vh',
4348      zIndex: String(Z.toast + 1),
4349      pointerEvents: 'none',
4350      background: 'transparent',
4351      overflow: 'visible',
4352    };
4353    for (const [name, value] of Object.entries(styles)) {
4354      setImportantStyle(editBadgeProxyRoot, name.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase()), value);
4355    }
4356    document.body.appendChild(editBadgeProxyRoot);
4357  }
4358 
4359  function styleEditBadgeProxy(proxy, target) {
4360    const rect = target.getBoundingClientRect();
4361    const cursor = getComputedStyle(target).cursor || 'pointer';
4362    const styles = {
4363      all: 'initial',
4364      position: 'fixed',
4365      left: rect.left + 'px',
4366      top: rect.top + 'px',
4367      width: rect.width + 'px',
4368      height: rect.height + 'px',
4369      margin: '0',
4370      padding: '0',
4371      border: '0',
4372      borderRadius: '0',
4373      background: 'transparent',
4374      color: 'transparent',
4375      opacity: '0.001',
4376      pointerEvents: 'auto',
4377      cursor,
4378      zIndex: String(Z.toast + 2),
4379    };
4380    for (const [name, value] of Object.entries(styles)) {
4381      setImportantStyle(proxy, name.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase()), value);
4382    }
4383  }
4384 
4385  function proxyMouseEvent(type, source, target) {
4386    let event;
4387    try {
4388      event = new MouseEvent(type, {
4389        bubbles: type !== 'mouseenter' && type !== 'mouseleave',
4390        cancelable: true,
4391        composed: true,
4392        clientX: source.clientX,
4393        clientY: source.clientY,
4394        screenX: source.screenX,
4395        screenY: source.screenY,
4396        button: source.button || 0,
4397        buttons: source.buttons || 0,
4398        ctrlKey: source.ctrlKey,
4399        metaKey: source.metaKey,
4400        shiftKey: source.shiftKey,
4401        altKey: source.altKey,
4402      });
4403      target.dispatchEvent(event);
4404    } catch {}
4405  }
4406 
4407  function bindEditBadgeProxy(proxy, target) {
4408    const stop = (event) => {
4409      event.preventDefault();
4410      event.stopPropagation();
4411    };
4412    proxy.addEventListener('mouseenter', (event) => {
4413      stop(event);
4414      proxyMouseEvent('mouseenter', event, target);
4415      proxyMouseEvent('mouseover', event, target);
4416    });
4417    proxy.addEventListener('mouseleave', (event) => {
4418      stop(event);
4419      proxyMouseEvent('mouseleave', event, target);
4420      proxyMouseEvent('mouseout', event, target);
4421    });
4422    proxy.addEventListener('mousedown', (event) => {
4423      stop(event);
4424      target.focus?.({ preventScroll: true });
4425      proxyMouseEvent('mousedown', event, target);
4426    });
4427    proxy.addEventListener('mouseup', (event) => {
4428      stop(event);
4429      proxyMouseEvent('mouseup', event, target);
4430    });
4431    proxy.addEventListener('click', (event) => {
4432      stop(event);
4433      target.click();
4434      syncEditBadgeHitProxies();
4435    });
4436  }
4437 
4438  function editBadgeProxyTargets() {
4439    if (!usesShadowChromeRoot() || !editBadgeEl || editBadgeEl.style.display === 'none') return [];
4440    return [...editBadgeEl.querySelectorAll('button')].filter((target) => {
4441      if (target.disabled) return false;
4442      const rect = target.getBoundingClientRect();
4443      if (rect.width < 1 || rect.height < 1) return false;
4444      const style = getComputedStyle(target);
4445      return style.display !== 'none' && style.visibility !== 'hidden';
4446    });
4447  }
4448 
4449  function syncEditBadgeHitProxies() {
4450    if (!usesShadowChromeRoot()) {
4451      if (editBadgeProxyRoot) editBadgeProxyRoot.remove();
4452      editBadgeProxyRoot = null;
4453      editBadgeProxyByTarget = new Map();
4454      return;
4455    }
4456    initEditBadgeHitProxies();
4457    if (!editBadgeProxyRoot) return;
4458    const targets = editBadgeProxyTargets();
4459    const active = new Set(targets);
4460    for (const [target, proxy] of editBadgeProxyByTarget) {
4461      if (!active.has(target) || !target.isConnected) {
4462        proxy.remove();
4463        editBadgeProxyByTarget.delete(target);
4464      }
4465    }
4466    for (const target of targets) {
4467      let proxy = editBadgeProxyByTarget.get(target);
4468      if (!proxy) {
4469        proxy = document.createElement('button');
4470        proxy.type = 'button';
4471        proxy.tabIndex = -1;
4472        proxy.dataset.impeccableEditBadgeProxy = 'true';
4473        proxy.setAttribute('aria-hidden', 'true');
4474        bindEditBadgeProxy(proxy, target);
4475        editBadgeProxyRoot.appendChild(proxy);
4476        editBadgeProxyByTarget.set(target, proxy);
4477      }
4478      proxy.title = target.title || target.getAttribute('aria-label') || target.textContent || EDIT_COPY_LABEL;
4479      styleEditBadgeProxy(proxy, target);
4480    }
4481  }
4482 
4483  function initEditBadge() {
4484    editBadgeEl = document.createElement('div');
4485    editBadgeEl.id = PREFIX + '-edit-badge';
4486    Object.assign(editBadgeEl.style, {
4487      position: 'fixed',
4488      zIndex: String(Z.highlight + 1),
4489      cursor: 'default',
4490      display: 'none',
4491      userSelect: 'none',
4492    });
4493    uiAppend(editBadgeEl);
4494    initEditBadgeHitProxies();
4495 
4496    // Remove focus rings on edit badge buttons + contenteditable elements
4497    if (!uiGetById(PREFIX + '-edit-badge-focus-style')) {
4498      const s = document.createElement('style');
4499      s.id = PREFIX + '-edit-badge-focus-style';
4500      s.textContent =
4501        '#' + PREFIX + '-edit-badge button { outline: none !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; }' +
4502        '#' + PREFIX + '-edit-badge button:focus { outline: none !important; }' +
4503        '#' + PREFIX + '-edit-badge button:focus-visible { outline: none !important; }' +
4504        '[data-impeccable-editable="true"] { outline: none !important; box-shadow: none !important; }' +
4505        '[data-impeccable-editable="true"]:focus { outline: none !important; box-shadow: none !important; }' +
4506        '[data-impeccable-editable="true"]:focus-visible { outline: none !important; box-shadow: none !important; }';
4507      uiAppendStyle(s);
4508    }
4509  }
4510 
4511  function positionEditBadge() {
4512    if (!selectedElement || !editBadgeEl || editBadgeEl.style.display === 'none') {
4513      syncEditBadgeHitProxies();
4514      return;
4515    }
4516    const r = selectedElement.getBoundingClientRect();
4517    const bw = editBadgeEl.offsetWidth;
4518    // Match showHighlight's 2px outset so the badge right edge lines up with the outline.
4519    const outlineRight = r.right + 2;
4520    editBadgeEl.style.top = Math.max(4, r.top - 28) + 'px';
4521    editBadgeEl.style.left = Math.min(window.innerWidth - bw - 4, outlineRight - bw) + 'px';
4522    syncEditBadgeHitProxies();
4523  }
4524 
4525  function renderEditBadge(mode) {
4526    if (mode === 'hidden' || !editBadgeEl) {
4527      hideConfigureBarTooltip();
4528      if (editBadgeEl) editBadgeEl.style.display = 'none';
4529      syncEditBadgeHitProxies();
4530      return;
4531    }
4532    editBadgeEl.style.display = 'flex';
4533    editBadgeEl.style.alignItems = 'center';
4534    editBadgeEl.style.cursor = 'default';
4535    const P = BP || barPaletteForTheme(detectPageTheme());
4536    const ACCENT = P.accent;
4537    const PRIMARY_TEXT = C.ink;
4538    const SURFACE = P.chatSurface;
4539    const MUTED = P.textDim;
4540    const HAIRLINE = P.hairline;
4541    const calloutStyle = (color, borderColor) => ({
4542      fontFamily: FONT,
4543      fontSize: '10px',
4544      fontWeight: '600',
4545      lineHeight: '16px',
4546      letterSpacing: '0.06em',
4547      color: color,
4548      background: SURFACE,
4549      padding: '2px 8px',
4550      border: '1px solid ' + (borderColor || color),
4551      borderRadius: '6px',
4552      boxSizing: 'border-box',
4553      minHeight: '22px',
4554      margin: '0',
4555      appearance: 'none',
4556      whiteSpace: 'nowrap',
4557      boxShadow: '0 4px 16px oklch(0% 0 0 / 0.16), 0 1px 3px oklch(0% 0 0 / 0.08)',
4558      cursor: 'pointer',
4559      transition: 'background 0.18s ease, color 0.18s ease, border-color 0.18s ease, filter 0.18s ease',
4560    });
4561    if (mode === 'idle' || mode === 'idle-disabled') {
4562      const disabled = mode === 'idle-disabled';
4563      editBadgeEl.innerHTML = '';
4564      const btn = document.createElement('button');
4565      btn.type = 'button';
4566      btn.innerHTML = EDIT_COPY_ICON;
4567      btn.setAttribute('aria-label', EDIT_COPY_LABEL);
4568      Object.assign(btn.style, calloutStyle(
4569        disabled ? MUTED : PRIMARY_TEXT,
4570        disabled ? HAIRLINE : ACCENT,
4571      ));
4572      Object.assign(btn.style, {
4573        padding: '4px',
4574        minWidth: '22px',
4575        width: '22px',
4576        height: '22px',
4577        minHeight: '22px',
4578        display: 'inline-flex',
4579        alignItems: 'center',
4580        justifyContent: 'center',
4581        lineHeight: '0',
4582        letterSpacing: '0',
4583        background: disabled ? SURFACE : ACCENT,
4584      });
4585      if (disabled) {
4586        btn.style.cursor = 'not-allowed';
4587        btn.style.opacity = '0.55';
4588        btn.disabled = true;
4589        const disabledTip = EDIT_COPY_LABEL + ' is disabled while the current copy edit is applying';
4590        btn.addEventListener('mouseenter', () => showConfigureBarTooltip(btn, disabledTip));
4591        btn.addEventListener('mouseleave', hideConfigureBarTooltip);
4592      } else {
4593        btn.addEventListener('mouseenter', () => showConfigureBarTooltip(btn, EDIT_COPY_LABEL));
4594        btn.addEventListener('mouseleave', hideConfigureBarTooltip);
4595        btn.onclick = enterEditingMode;
4596      }
4597      editBadgeEl.appendChild(btn);
4598    } else {
4599      // 'editing' - show Cancel + Save separated
4600      editBadgeEl.innerHTML = '';
4601      editBadgeEl.style.gap = '8px';
4602      const cancel = document.createElement('button');
4603      cancel.textContent = 'Cancel';
4604      Object.assign(cancel.style, calloutStyle(MUTED, HAIRLINE));
4605      cancel.addEventListener('mouseenter', () => { cancel.style.color = P.text; });
4606      cancel.addEventListener('mouseleave', () => { cancel.style.color = P.textDim; });
4607      cancel.onclick = cancelEditing;
4608      const save = document.createElement('button');
4609      save.textContent = 'Save';
4610      Object.assign(save.style, calloutStyle(PRIMARY_TEXT, ACCENT));
4611      save.style.background = ACCENT;
4612      save.onclick = applyEditing;
4613      editBadgeEl.append(cancel, save);
4614    }
4615    positionEditBadge();
4616  }
4617 
4618  // Decide which way the popover opens: away from the picked element. If the
4619  // bar landed below the element, popover slides DOWN from the bar's bottom.
4620  // If the bar landed above, popover slides UP from the bar's top.
4621  function popoverDirection() {
4622    if (!barEl || !selectedElement) return 'below';
4623    const br = barEl.getBoundingClientRect();
4624    const er = selectedElement.getBoundingClientRect();
4625    return br.top >= er.bottom - 4 ? 'below' : 'above';
4626  }
4627 
4628  // The popover overlaps the bar by OVERLAP px on the bar-facing side. With
4629  // popover z-index below bar, that overlap sits behind bar (invisible) and
4630  // reinforces the "tucked behind" feel. Padding compensates so the real
4631  // content starts flush with bar's outer edge.
4632  const TUNE_OVERLAP = 6;
4633 
4634  // Closed clip-path depends on direction: for 'below' clip from the far
4635  // (bottom) edge so the reveal grows downward from the bar; for 'above'
4636  // clip from the top edge so the reveal grows upward from the bar.
4637  function closedClipPath(direction) {
4638    return direction === 'below' ? 'inset(0 0 100% 0)' : 'inset(100% 0 0 0)';
4639  }
4640 
4641  function setClipPath(value, withTransition) {
4642    const saved = paramsPanelEl.style.transition;
4643    if (!withTransition) paramsPanelEl.style.transition = 'none';
4644    paramsPanelEl.style.clipPath = value;
4645    if (!withTransition) {
4646      void paramsPanelEl.offsetHeight;
4647      paramsPanelEl.style.transition = saved;
4648    }
4649  }
4650 
4651  function positionParamsPanel() {
4652    if (!paramsPanelEl || !barEl || barEl.style.display === 'none') return;
4653    const br = barEl.getBoundingClientRect();
4654    const direction = popoverDirection();
4655    const prevDirection = paramsPanelEl.dataset.tuneDirection;
4656 
4657    // top/left/width are NOT in the transition list, so they snap instantly.
4658    paramsPanelEl.style.left = br.left + 'px';
4659    paramsPanelEl.style.width = br.width + 'px';
4660 
4661    if (direction === 'below') {
4662      paramsPanelEl.style.top = (br.bottom - TUNE_OVERLAP) + 'px';
4663      paramsPanelEl.style.borderRadius = '0 0 10px 10px';
4664      paramsPanelEl.style.paddingTop = (14 + TUNE_OVERLAP) + 'px';
4665      paramsPanelEl.style.paddingBottom = '14px';
4666    } else {
4667      const ih = paramsPanelEl.offsetHeight || 80;
4668      paramsPanelEl.style.top = (br.top - ih + TUNE_OVERLAP) + 'px';
4669      paramsPanelEl.style.borderRadius = '10px 10px 0 0';
4670      paramsPanelEl.style.paddingTop = '14px';
4671      paramsPanelEl.style.paddingBottom = (14 + TUNE_OVERLAP) + 'px';
4672    }
4673    paramsPanelEl.dataset.tuneDirection = direction;
4674 
4675    // If currently closed and direction flipped (or first-time setup),
4676    // snap the clip-path to the new direction's closed pose without
4677    // transitioning (so the clip doesn't slide across the element).
4678    if (!tuneOpen && (!prevDirection || prevDirection !== direction)) {
4679      setClipPath(closedClipPath(direction), false);
4680    }
4681  }
4682 
4683  function showParamsPanel() {
4684    if (!paramsPanelEl) return;
4685    positionParamsPanel();
4686    paramsPanelEl.style.pointerEvents = 'auto';
4687    // rAF so the positioning paint commits before the transition fires.
4688    requestAnimationFrame(() => {
4689      setClipPath('inset(0 0 0 0)', true);
4690    });
4691  }
4692 
4693  function hideParamsPanel() {
4694    if (!paramsPanelEl) return;
4695    paramsPanelEl.style.pointerEvents = 'none';
4696    const direction = paramsPanelEl.dataset.tuneDirection || 'below';
4697    setClipPath(closedClipPath(direction), true);
4698  }
4699 
4700  // Build/rebuild the panel's contents for the current variant AND apply
4701  // its defaults to the variant wrapper (so scoped CSS responds even before
4702  // the user opens the popover). Visibility is governed by tuneOpen.
4703  function refreshParamsPanel() {
4704    if (state !== 'CYCLING') {
4705      paramsCurrentValues = {};
4706      tuneOpen = false;
4707      hideParamsPanel();
4708      return;
4709    }
4710    const variantEl = getVisibleVariantEl();
4711    const params = parseVariantParams(variantEl);
4712    if (!variantEl || params.length === 0) {
4713      paramsCurrentValues = {};
4714      tuneOpen = false;
4715      hideParamsPanel();
4716      return;
4717    }
4718    applyParamDefaults(variantEl, params);
4719    buildParamsPanel(variantEl, params);
4720    if (tuneOpen) {
4721      // If already visible (variant cycled while open), refresh in place
4722      // instead of re-running the clip-path animation.
4723      const alreadyVisible = paramsPanelEl.style.display === 'block'
4724        && paramsPanelEl.style.opacity === '1';
4725      if (alreadyVisible) positionParamsPanel();
4726      else showParamsP