@thomas.f/prnext 0.1.16-alpha → 0.1.17-alpha

package/runtime/dev-console.mjs

@@ -0,0 +1,106 @@
+// Browser-only diagnostics. Records stay in this window, never sent to PRNext.
+// Bound both retained entries and formatting work; do not invoke object getters.
+const LIMIT = 500, TEXT_LIMIT = 128_000, TEXT_BUDGET = 2 * 1024 * 1024;
+const clip = text => text.length > TEXT_LIMIT ? text.slice(0,TEXT_LIMIT) + '\n[Message truncated at 128000 characters]' : text;
+const nativeStackGetter = Object.getOwnPropertyDescriptor(new Error(), 'stack')?.get;
+export function formatConsoleValue(value, depth = 0, seen = new WeakSet()) {
+  try {
+    if (typeof value === 'string') return clip(value);
+    if (typeof value === 'function') return '[Function]';
+    if (value === null || typeof value !== 'object') return clip(String(value));
+    if (seen.has(value)) return '[Circular]';
+    seen.add(value);
+    if (value instanceof Error) {
+      // Custom error properties can also be getters. Do not evaluate them.
+      const stack = Object.getOwnPropertyDescriptor(value, 'stack'), message = Object.getOwnPropertyDescriptor(value, 'message');
+      // V8 exposes its lazy stack as a shared native getter. Permit that getter,
+      // but never a custom accessor installed on a logged error object.
+      const nativeStack = nativeStackGetter && stack?.get === nativeStackGetter ? Reflect.apply(nativeStackGetter, value, []) : undefined;
+      const text = typeof nativeStack === 'string' ? nativeStack : stack && 'value' in stack && typeof stack.value === 'string' ? stack.value : message && 'value' in message && typeof message.value === 'string' ? message.value : '[Error]';
+      return clip(text);
+    }
+    if (depth >= 3) return Array.isArray(value) ? '[Array]' : '[Object]';
+    const keys = Object.keys(value), parts = [];
+    let remaining = TEXT_LIMIT;
+    for (const key of keys.slice(0, 20)) {
+      const descriptor = Object.getOwnPropertyDescriptor(value, key);
+      const text = descriptor && 'value' in descriptor ? formatConsoleValue(descriptor.value, depth + 1, seen) : '[Getter]';
+      const part = (Array.isArray(value) ? '' : key.slice(0, 100) + ': ') + text;
+      parts.push(part.slice(0, remaining)); remaining -= part.length;
+      if (remaining <= 0) break;
+    }
+    if (keys.length > parts.length) parts.push('…');
+    return clip(Array.isArray(value) ? '[' + parts.join(', ') + ']' : '{' + parts.join(', ') + '}');
+  } catch { return '[Unavailable]'; }
+}
+
+function formatArguments(args) {
+  const values = args.slice(0, 20);
+  if (typeof values[0] !== 'string') return clip(values.map(value => formatConsoleValue(value)).join(' '));
+  let index = 1;
+  const message = clip(values[0]).replace(/%[%sdifoOc]/g, token => {
+    if (token === '%%') return '%';
+    if (index >= values.length) return token;
+    const value = values[index++];
+    if (token === '%c') return '';
+    // Never coerce user objects through custom toString/valueOf methods.
+    if (/^%[dif]$/.test(token) && (typeof value === 'string' || typeof value === 'number')) return String(token === '%f' ? parseFloat(value) : parseInt(value, 10));
+    return formatConsoleValue(value);
+  });
+  return clip([message, ...values.slice(index).map(value => formatConsoleValue(value))].join(' '));
+}
+
+export function createConsoleCapture(target = globalThis) {
+  const entries = [], subscribers = new Set(), replacements = [];
+  let serial = 0, busy = false, scheduled = false, disposed = false, dropped = 0, retainedChars = 0;
+  function notify() {
+    if (scheduled || disposed) return;
+    scheduled = true;
+    queueMicrotask(() => {
+      scheduled = false;
+      if (!disposed) for (const subscriber of subscribers) { try { subscriber(); } catch {} }
+    });
+  }
+  function record(level, args) {
+    if (busy || disposed) return;
+    busy = true;
+    try {
+      const text=formatArguments(args);entries.push({id:++serial,time:Date.now(),level,text});retainedChars+=text.length;
+      while(entries.length>LIMIT||retainedChars>TEXT_BUDGET){retainedChars-=entries.shift().text.length;dropped++;}
+      notify();
+    } catch {} finally { busy = false; }
+  }
+  function clear() { entries.length = 0; dropped = 0;retainedChars=0;notify(); }
+  for (const method of ['log', 'info', 'warn', 'error', 'debug', 'table', 'trace', 'assert', 'clear']) {
+    const original = target.console?.[method];
+    if (typeof original !== 'function') continue;
+    const replacement = function (...args) {
+      // Keep the native console, return value and exception behavior intact.
+      try { return Reflect.apply(original, target.console, args); }
+      finally {
+        if (method === 'clear') clear();
+        else if (method === 'assert') { if (!args[0]) record('error', ['Assertion failed:', ...args.slice(1)]); }
+        else record(method === 'table' || method === 'trace' ? 'log' : method, args);
+      }
+    };
+    try { target.console[method] = replacement; replacements.push({method, original, replacement}); } catch {}
+  }
+  const onError = event => { if (event.error || event.message) record('error', [event.error || event.message]); };
+  const onRejection = event => record('error', ['Unhandled rejection:', event.reason]);
+  target.addEventListener('error', onError);
+  target.addEventListener('unhandledrejection', onRejection);
+  return {
+    snapshot: () => ({ entries: entries.slice(), dropped }), clear,
+    subscribe(callback) { subscribers.add(callback); return () => subscribers.delete(callback); },
+    dispose() {
+      disposed = true; subscribers.clear(); entries.length = 0;
+      for (const {method, original, replacement} of replacements) if (target.console[method] === replacement) target.console[method] = original;
+      target.removeEventListener('error', onError); target.removeEventListener('unhandledrejection', onRejection);
+    },
+  };
+}
+
+export function isDevicePreview() {
+  try { return globalThis.frameElement?.getAttribute('data-prnext-preview') === 'true'; }
+  catch { return false; }
+}

package/runtime/dev-dependency-graph.mjs

@@ -0,0 +1,40 @@
+// Keep inherited-stdio RPC frames below the native listener's 64 KiB limit.
+const FRAME_BYTES=48*1024,MAX_FILES=100000,MAX_RECORDS=50000,MAX_EDGES=1000000,MAX_BYTES=16*1024*1024;
+function batches(values){
+  const result=[];let batch=[],bytes=2;
+  for(const value of values){const size=Buffer.byteLength(JSON.stringify(value))+1;if(size>FRAME_BYTES)throw Error('Development graph entry exceeds the control frame budget');if(bytes+size>FRAME_BYTES){result.push(batch);batch=[];bytes=2;}batch.push(value);bytes+=size;}
+  if(batch.length)result.push(batch);return result;
+}
+export function compactDependencyGraph(manifest){
+  if(manifest.devDependencyStatus?.complete===false)throw Error(manifest.devDependencyStatus.reason||'Incomplete development graph');
+  const files=[],ids=new Map(),records=[];let edges=0,bytes=0;
+  const intern=file=>{if(typeof file!=='string'||!file||Buffer.byteLength(file)>8192)throw Error('Invalid development dependency');if(!ids.has(file)){bytes+=Buffer.byteLength(file);ids.set(file,files.length);files.push(file);}return ids.get(file);};
+  for(const record of [...manifest.devDependencies||[],...manifest.devModules||[]]){
+    const entries=[...new Set(record.files)].map(intern);edges+=entries.length;bytes+=Buffer.byteLength(record.route)+entries.length*4;
+    // Split a single very broad route too; the native builder merges its parts.
+    for(let offset=0;offset<Math.max(entries.length,1);offset+=4000)records.push({route:record.route,module:!!record.module,files:entries.slice(offset,offset+4000)});
+    if(files.length>MAX_FILES||records.length>MAX_RECORDS||edges>MAX_EDGES||bytes>MAX_BYTES)throw Error('Development graph exceeds its bounded file, edge or memory budget');
+  }
+  return {files,records,edges};
+}
+export async function publishDependencyGraph(gateway,manifest){
+  const graph=compactDependencyGraph(manifest),transaction=String(manifest.buildId);
+  await gateway.request('graph-begin',{transaction,files:graph.files.length,records:graph.records.length,edges:graph.edges});
+  try{
+    for(const files of batches(graph.files))await gateway.request('graph-files',{transaction,files});
+    for(const records of batches(graph.records))await gateway.request('graph-records',{transaction,records});
+    return await gateway.request('graph-commit',{transaction});
+  }catch(error){await gateway.request('graph-abort',{transaction}).catch(()=>{});throw error;}
+}
+export async function affectedDependencies(gateway,files){
+  const routes=new Set(),modules=new Set(),unknown=new Set();let complete=true;
+  for(const batch of batches(files).flatMap(batch=>{const chunks=[];for(let i=0;i<batch.length;i+=512)chunks.push(batch.slice(i,i+512));return chunks;})){
+    const result=await gateway.request('affected',{files:batch,transitive:true});
+    complete&&=result.complete!==false;
+    for(const value of result.routes||[])routes.add(value);for(const value of result.modules||[])modules.add(value);for(const value of result.unknown||[])unknown.add(value);
+  }
+  // HMR compiler messages and frontend notifications also have finite budgets.
+  if(Buffer.byteLength(JSON.stringify([...routes]))>32*1024||Buffer.byteLength(JSON.stringify([...modules]))>256*1024)complete=false;
+  return {routes:complete?[...routes]:[],modules:complete?[...modules]:[],unknown:[...unknown],complete};
+}
+export const canSkipUnopenedRoutes=(result,files,dormant,indexValid)=>indexValid&&result.complete!==false&&files.length>0&&result.unknown.length===files.length&&result.unknown.every(file=>dormant.has(file));

package/runtime/dev-element-picker-style.mjs

@@ -0,0 +1,27 @@
+// This chrome lives in its own shadow root and never changes application styles.
+export const elementPickerStyle = `
+  :host{all:initial;position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:2147483647;color-scheme:dark;color:#ededed;font:12px/1.4 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:left;direction:ltr}
+  *,*::before,*::after{box-sizing:border-box}[hidden]{display:none!important}svg{display:block;width:16px;height:16px;flex:none}
+  .target{position:fixed;left:0;top:0;outline:1px dashed #e8e5ee;outline-offset:0;box-shadow:0 0 0 1px #17141b80;background:transparent;pointer-events:none}
+  .corner{position:absolute;width:5px;height:5px;background:#f4f2f8;box-shadow:0 0 0 1px #17141b;pointer-events:none}
+  .corner[data-corner=tl]{left:-3px;top:-3px}.corner[data-corner=t]{left:calc(50% - 2.5px);top:-3px}.corner[data-corner=tr]{right:-3px;top:-3px}.corner[data-corner=r]{right:-3px;top:calc(50% - 2.5px)}
+  .corner[data-corner=bl]{left:-3px;bottom:-3px}.corner[data-corner=b]{left:calc(50% - 2.5px);bottom:-3px}.corner[data-corner=br]{right:-3px;bottom:-3px}.corner[data-corner=l]{left:-3px;top:calc(50% - 2.5px)}
+  .picker-tag{position:fixed;left:0;top:0;width:max-content;max-width:min(280px,calc(100vw - 16px));padding:4px 6px;border-radius:5px;background:#101014ed;pointer-events:none}
+  .picker-tag-top{display:flex;align-items:center;min-width:0}
+  .picker-dimensions{color:#b6b2bd;font:10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap;font-variant-numeric:tabular-nums;flex:none}
+  .picker-source{display:flex;align-items:center;gap:6px;margin-top:4px;color:#f0edf5;font:500 11px/16px ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap;min-width:0}
+  .picker-source-name{min-width:0;overflow:hidden;text-overflow:ellipsis}.picker-source-line{flex:none;margin-left:-6px;color:#b6b2bd;font-variant-numeric:tabular-nums}
+  .picker-source-parent{flex:none;color:#a6a1ae;font:10px/16px ui-sans-serif,system-ui}
+  .picker-file-icon{display:grid;place-items:center;flex:none;width:15px;height:15px;border-radius:2px;color:#dad6e2;font:800 9px/1 ui-sans-serif,system-ui;letter-spacing:-.5px}.picker-file-icon svg{width:15px;height:15px}
+  .picker-file-icon[data-language=javascript]{background:#f7df1e;color:#17150b}.picker-file-icon[data-language=typescript]{background:#3178c6;color:#fff}.picker-file-icon[data-language=html]{background:#e34f26;color:#fff}.picker-file-icon[data-language=css]{background:#7956b5;color:#fff;font-size:12px}.picker-file-icon[data-language=json]{color:#f7df1e}.picker-file-icon[data-language=vue]{color:#60c59a}.picker-file-icon[data-language=svelte]{color:#ff7c55}.picker-file-icon[data-language=python]{color:#80b9ef}.picker-file-icon[data-language=rust]{color:#ebaa8e}
+  .hint{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 24px);padding:6px 6px 6px 14px;border:0;border-radius:22px;background:#080808;box-shadow:0 3px 8px #0006,0 12px 32px #0007;pointer-events:auto}
+  .picker-instruction{font-size:12px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+  .picker-enter{margin-left:4px}.hint kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border:1px solid #343238;border-radius:5px;color:#939098;background:transparent;font:10px/1 ui-sans-serif,system-ui}
+  .picker-cancel{display:flex;align-items:center;justify-content:center;gap:9px;min-height:34px;padding:6px 10px;border:0;border-radius:15px;background:#191919;color:#ededed;font:500 11px/1.4 ui-sans-serif,system-ui;cursor:pointer;white-space:nowrap;flex:none;-webkit-tap-highlight-color:transparent}
+  .picker-cancel:hover{background:#252525}.picker-cancel:focus-visible{outline:1px solid #aaa;outline-offset:-3px;background:#252525}
+  .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
+  @media(max-width:350px){.hint{gap:8px}.hint .picker-enter{display:none}.picker-tag{max-width:calc(100vw - 16px)}}
+  @media(pointer:coarse){.picker-cancel{min-width:64px;min-height:44px;padding-inline:12px}.picker-cancel kbd,.hint .picker-enter{display:none}.hint{border-radius:28px}.picker-cancel{border-radius:21px}}
+  @media(prefers-reduced-motion:no-preference){.picker-cancel{transition:background-color 120ms}.target,.picker-tag{animation:picker-mark-in 110ms ease-out}.target[data-motion=true]{transition:translate 110ms cubic-bezier(.22,.8,.2,1),width 110ms cubic-bezier(.22,.8,.2,1),height 110ms cubic-bezier(.22,.8,.2,1)}.picker-tag[data-motion=true]{transition:translate 110ms cubic-bezier(.22,.8,.2,1)}.hint{animation:picker-bar-in 180ms cubic-bezier(.16,1,.3,1)}@keyframes picker-mark-in{from{opacity:0}to{opacity:1}}@keyframes picker-bar-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}}
+  @media(forced-colors:active){.target{outline-color:Highlight;box-shadow:none;background:transparent}.corner{background:Highlight;box-shadow:0 0 0 1px Canvas}.picker-tag,.hint{background:Canvas;color:CanvasText;border:1px solid ButtonText;box-shadow:none}.picker-dimensions,.picker-source,.picker-source-line,.picker-source-parent{color:CanvasText}.picker-file-icon[data-language]{color:CanvasText;background:Canvas}.picker-cancel{background:ButtonFace;color:ButtonText;border:1px solid ButtonText}.picker-cancel:focus-visible{outline:2px solid Highlight;outline-offset:-3px}.hint kbd{color:ButtonText;border-color:ButtonText}}
+`;

package/runtime/dev-element-picker.mjs

@@ -0,0 +1,213 @@
+import { elementPickerStyle } from './dev-element-picker-style.mjs';
+
+const PROPERTIES = ['display', 'position', 'width', 'height', 'color', 'background-color', 'font-family', 'font-size', 'font-weight', 'line-height', 'padding', 'margin', 'gap', 'border-radius', 'align-items', 'justify-content', 'grid-template-columns'];
+const HOVER_HOLD = 35, SMALL_HOVER_HOLD = 75, POINTER_REST = 50;
+const pickerEpochs=new WeakMap();
+const toolNode = node => {
+  for(let current=node;current;current=current.getRootNode?.().host)
+    if(current.closest?.('prnext-dev-tools,prnext-dev-picker,#__prnext_dev_error__'))return true;
+  return false;
+};
+
+function sourceLocation(element) {
+  for(let owner=element;owner;owner=owner.parentElement||owner.getRootNode?.().host) {
+    const source=owner.getAttribute?.('data-prnext-source');
+    if(source)return {source,sourceRelation:owner===element?'element':'ancestor'};
+  }
+  return {source:null,sourceRelation:null};
+}
+
+export function describeElement(element, view = globalThis) {
+  const bounds = element.getBoundingClientRect(), style = view.getComputedStyle(element);
+  const {source,sourceRelation}=sourceLocation(element);
+  const tag = element.tagName.toLowerCase(), selector = element.id ? '#' + view.CSS.escape(element.id) : tag + [...element.classList].slice(0, 3).map(name => '.' + view.CSS.escape(name)).join('');
+  let text = '';
+  if (['input', 'textarea', 'select'].includes(tag)) text = '[Form value omitted]';
+  else {
+    const walker = view.document.createTreeWalker(element, view.NodeFilter.SHOW_TEXT);
+    while (walker.nextNode() && text.length < 4000) {
+      if (!walker.currentNode.parentElement?.closest('input,textarea,select,script,style,[hidden],[aria-hidden="true"]')) text += walker.currentNode.textContent + ' ';
+    }
+    text = text.trim().replace(/\s+/g, ' ').slice(0, 4000);
+  }
+  return { kind: 'element', path: view.location.pathname, selector, tag, text, source, sourceRelation,
+    bounds: { x: Math.round(bounds.x), y: Math.round(bounds.y), width: Math.round(bounds.width), height: Math.round(bounds.height) },
+    styles: Object.fromEntries(PROPERTIES.map(property => [property, style.getPropertyValue(property)])) };
+}
+
+// User-triggered capture only. Form controls, scripts, frames and development UI
+// never enter an image; a CORS/CSP failure is reported rather than hidden.
+export async function captureElementImage(element) {
+  const { toPng } = await import('html-to-image');
+  const bounds = element.getBoundingClientRect();
+  if (!bounds.width || !bounds.height) throw Error('The element has no visible size.');
+  if (['INPUT', 'TEXTAREA', 'SELECT', 'IFRAME', 'VIDEO'].includes(element.tagName)) throw Error('Form values and embedded content are excluded from images.');
+  const scale = Math.min(1, 1400 / bounds.width, 1000 / bounds.height);
+  const result = await toPng(element, { pixelRatio: scale, skipFonts: true, cacheBust: false,
+    filter: node => !toolNode(node) && !['SCRIPT', 'IFRAME', 'INPUT', 'TEXTAREA', 'SELECT', 'VIDEO', 'AUDIO'].includes(node.tagName),
+  });
+  if (result.length > 349525) throw Error('The image exceeds the 256 KB context limit. Select a smaller element.');
+  return { mimeType: 'image/png', data: result.slice(result.indexOf(',') + 1), width: Math.round(bounds.width * scale), height: Math.round(bounds.height * scale) };
+}
+
+export function createElementPicker({ tools, onSelect, onCancel = () => {}, view = globalThis }) {
+  const document = view.document, controller = new AbortController(), options = { signal: controller.signal, capture: true };
+  const epoch=(pickerEpochs.get(tools)||0)+1;pickerEpochs.set(tools,epoch);
+  const host = document.createElement('prnext-dev-picker'), shadow = host.attachShadow({ mode: 'open' });
+  const style = document.createElement('style'); style.textContent=elementPickerStyle;
+  const node=(tag,className,text)=>{const result=document.createElement(tag);if(className)result.className=className;if(text!==undefined)result.textContent=text;return result;};
+  const icon=paths=>`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+  const box = node('div','target'); box.hidden = true; box.setAttribute('aria-hidden','true');
+  for(const corner of ['tl','t','tr','r','br','b','bl','l']){const mark=node('span','corner');mark.dataset.corner=corner;box.append(mark);}
+  const tag=node('div','picker-tag');tag.hidden=true;tag.setAttribute('aria-hidden','true');
+  const tagTop=node('div','picker-tag-top'),dimensions=node('span','picker-dimensions'),source=node('span','picker-source');
+  const fileIcon=node('span','picker-file-icon'),fileName=node('span','picker-source-name'),fileLine=node('span','picker-source-line'),parentSource=node('span','picker-source-parent','Parent');
+  source.append(fileIcon,fileName,fileLine,parentSource);tagTop.append(dimensions);tag.append(tagTop,source);
+  const fileTypes={js:['javascript','JS'],jsx:['javascript','JS'],mjs:['javascript','JS'],cjs:['javascript','JS'],ts:['typescript','TS'],tsx:['typescript','TS'],mts:['typescript','TS'],cts:['typescript','TS'],html:['html','<>'],htm:['html','<>'],css:['css','#'],scss:['css','#'],json:['json','{}'],vue:['vue','V'],svelte:['svelte','S'],md:['markdown','M'],mdx:['markdown','M'],py:['python','Py'],rs:['rust','Rs']};
+  let fileIconKey;
+  function updateFileIcon(filename) {
+    const extension=filename?.split('.').at(-1)?.toLowerCase(),type=Object.hasOwn(fileTypes,extension)?fileTypes[extension]:null,key=type?.[0]||'file';
+    if(fileIconKey===key)return;fileIconKey=key;fileIcon.dataset.language=key;
+    if(type){fileIcon.textContent=type[1];fileIcon.title=key;}
+    else{fileIcon.innerHTML=icon('<path d="M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8Z"/><path d="M14 3v5h5"/>');fileIcon.title='File';}
+  }
+  const hint=node('div','hint');hint.setAttribute('role','region');hint.setAttribute('aria-label','Element picker');
+  const instruction=node('span','picker-instruction','Pick an element'),enter=node('kbd','picker-enter','↵');enter.setAttribute('aria-hidden','true');
+  const cancelButton=node('button','picker-cancel','Cancel');cancelButton.type='button';cancelButton.setAttribute('aria-label','Cancel');
+  const escape=node('kbd','','esc');escape.setAttribute('aria-hidden','true');cancelButton.append(escape);cancelButton.onclick=()=>cancel();
+  const live=node('span','sr-only');live.setAttribute('role','status');
+  hint.append(instruction,enter,cancelButton);shadow.append(style,box,tag,hint,live);document.documentElement.append(host);
+  const previous = document.activeElement; let active, frame, pending, hoverTimer, pointer, stopped = false, viewportKey, placed = false;
+  const viewport=()=>({left:view.visualViewport?.offsetLeft||0,top:view.visualViewport?.offsetTop||0,width:view.visualViewport?.width||view.innerWidth,height:view.visualViewport?.height||view.innerHeight});
+  function placeHint() {
+    const visible=viewport(),key=[visible.left,visible.top,visible.width,visible.height].join(':');
+    if(viewportKey!==key){viewportKey=key;hint.style.maxWidth=Math.max(1,visible.width-24)+'px';}
+    const height=hint.offsetHeight,width=hint.offsetWidth;let top=Math.max(visible.top+8,visible.top+visible.height-height-16),left=visible.left+(visible.width-width)/2;
+    const hud=document.querySelector('prnext-dev-tools')?.getBoundingClientRect();
+    if(hud?.width&&left<hud.right&&left+width>hud.left&&top<hud.bottom&&top+height>hud.top){
+      const candidates=[hud.right+8,hud.left-width-8],fitting=candidates.find(candidate=>candidate>=visible.left+12&&candidate+width<=visible.left+visible.width-12);
+      if(fitting!==undefined)left=fitting;else top=Math.max(visible.top+8,hud.top-height-12);
+    }
+    hint.style.left=(left+width/2)+'px';hint.style.bottom='auto';hint.style.top=top+'px';
+    return {visible,hint:{top,height}};
+  }
+  function placeTag(rect, animate) {
+    const {visible,hint:bar}=placeHint(),margin=8,gap=9;
+    tag.style.maxWidth=Math.max(1,Math.min(280,visible.width-margin*2))+'px';
+    const size=tag.getBoundingClientRect(),minX=visible.left+margin,maxX=visible.left+visible.width-size.width-margin;
+    const maxY=Math.min(visible.top+visible.height-size.height-margin,bar.top-size.height-margin),minY=visible.top+margin;
+    if(maxY<minY){tag.hidden=true;return;}
+    const above=rect.top-size.height-gap,below=rect.bottom+gap;
+    const top=above>=minY&&above<=maxY?above:below>=minY&&below<=maxY?below:Math.min(maxY,Math.max(minY,above));
+    const left=Math.min(Math.max(minX,maxX),Math.max(minX,rect.left));
+    // A wider filename must not travel outside the viewport from its old anchor.
+    // Otherwise CSS can retarget the current animation without restarting it.
+    tag.dataset.motion=String(animate&&size.left>=minX&&size.left<=maxX&&size.top>=minY&&size.top<=maxY);
+    tag.style.translate=left+'px '+top+'px';tag.dataset.side=top+size.height<=rect.top?'above':'below';
+  }
+  function highlight(element, keyboard=false, animate=true) {
+    const node=element;
+    if (!node || toolNode(node) || node === document.documentElement || node === document.body) return;
+    active = node; const rect = node.getBoundingClientRect();
+    if(!rect.width||!rect.height){box.hidden=true;tag.hidden=true;placed=false;return;}
+    const moving=animate&&placed;
+    box.dataset.motion=String(moving);box.hidden = false; Object.assign(box.style, { translate: rect.left+'px '+rect.top+'px', width: rect.width+'px', height: rect.height+'px' });
+    const location=sourceLocation(node),parsed=location.source?.match(/^(.*?):(\d+)(?::(\d+))?$/),filename=parsed?.[1].replaceAll('\\','/').split('/').at(-1);
+    dimensions.textContent=Math.round(rect.width)+' × '+Math.round(rect.height);
+    updateFileIcon(filename);fileName.textContent=filename||location.source||'<'+node.tagName.toLowerCase()+'>';
+    fileLine.textContent=parsed?':'+parsed[2]:'';fileLine.hidden=!parsed;parentSource.hidden=location.sourceRelation!=='ancestor';
+    source.title=location.source?(location.sourceRelation==='ancestor'?'Parent source: ':'')+location.source:'Source location unavailable';source.dataset.ancestor=String(location.sourceRelation==='ancestor');
+    tag.hidden=false;placeTag(rect,moving);
+    // Commit the first rectangle in place; later targets interpolate from it.
+    // The existing layout read in placeTag also commits the frame's geometry.
+    placed=true;
+    if(keyboard)live.textContent=node.tagName.toLowerCase()+', '+Math.round(rect.width)+' by '+Math.round(rect.height)+' pixels'+(filename?', '+(location.sourceRelation==='ancestor'?'parent source ':'source ')+filename+', line '+parsed[2]:'')+'. Enter selects.';
+  }
+  function clearHover(resetPointer=true) {
+    view.clearTimeout(hoverTimer);view.cancelAnimationFrame(frame);
+    hoverTimer=undefined;frame=undefined;pending=undefined;if(resetPointer)pointer=undefined;
+  }
+  function hoverReadyAt() {
+    const minimum=pending.since+pending.hold;
+    const slow=pending.slowSince===undefined?Infinity:Math.max(minimum,pending.slowSince+pending.hold);
+    return Math.min(slow,Math.max(minimum,pointer.lastMove+POINTER_REST));
+  }
+  function queueHover() {
+    view.clearTimeout(hoverTimer);hoverTimer=undefined;
+    if(stopped||!pending)return;
+    const remaining=hoverReadyAt()-view.performance.now();
+    if(frame!==undefined){if(remaining<=0)return;view.cancelAnimationFrame(frame);frame=undefined;}
+    if(remaining>0){hoverTimer=view.setTimeout(queueHover,remaining);return;}
+    frame=view.requestAnimationFrame(()=>{
+      frame=undefined;
+      // Acceleration between the timer and paint must not commit a stale hover.
+      if(stopped||!pending)return;
+      if(hoverReadyAt()>view.performance.now()){queueHover();return;}
+      const candidate=pending.node;pending=undefined;
+      if(candidate.isConnected)highlight(candidate);
+    });
+  }
+  function hover(node,event) {
+    if(!node||toolNode(node)||node===document.documentElement||node===document.body){clearHover();return;}
+    const now=view.performance.now(),x=event.clientX,y=event.clientY;
+    if(!pointer)pointer={x,y,time:now,lastMove:now,speed:0,instant:0};
+    else{
+      const distance=Math.hypot(x-pointer.x,y-pointer.y),elapsed=now-pointer.time;
+      // Compare with the last meaningful position so subpixel steps accumulate.
+      if(distance>1){
+        const instant=distance/Math.max(1,Math.min(elapsed,64));
+        pointer={x,y,time:now,lastMove:now,instant,speed:elapsed>120?instant:pointer.speed*.35+instant*.65};
+      }
+    }
+    if(node===active){
+      clearHover(false);frame=view.requestAnimationFrame(()=>{frame=undefined;if(!stopped&&node.isConnected)highlight(node);});return;
+    }
+    if(node!==pending?.node){
+      clearHover(false);const rect=node.getBoundingClientRect();
+      pending={node,since:now,hold:Math.min(rect.width,rect.height)<28||active?.contains(node)?SMALL_HOVER_HOLD:HOVER_HOLD};
+    }
+    // Hysteresis accepts deliberate slow movement, while a sudden acceleration
+    // cancels that decision. A short pause also confirms intent after a fast move.
+    if(pointer.instant>=.85||pointer.speed>=.65)pending.slowSince=undefined;
+    else if(pointer.speed<=.45&&pending.slowSince===undefined)pending.slowSince=now;
+    queueHover();
+  }
+  function stop(restore = true) { if (stopped) return; stopped = true; controller.abort(); clearHover(); host.remove(); if (restore && previous?.isConnected) previous.focus({ preventScroll: true }); }
+  function cancel(){if(stopped)return;stop();onCancel();}
+  async function select(node) {
+    if (!node || toolNode(node)) return;
+    const context = describeElement(node, view); stop(false); onSelect(context);
+    let expectedContext,knownContext=false;
+    try{const state=tools.snapshot?.();knownContext=Boolean(state&&Object.hasOwn(state,'context'));expectedContext=state?.context;}catch{}
+    const image = captureElementImage(node).then(screenshot => ({ screenshot })).catch(error => ({ screenshot: null, screenshotError: error.message }));
+    const mapped = context.source ? tools.call('dev_source', { source: context.source }).catch(error => ({ mapped: false, error: error.message })) : Promise.resolve({ mapped: false, error: 'No source location was emitted for this element.' });
+    const [capture, source] = await Promise.all([image, mapped]);
+    if(pickerEpochs.get(tools)!==epoch)return;
+    if(knownContext){try{if(tools.snapshot().context!==expectedContext)return;}catch{return;}}
+    const complete = { ...context, ...capture, mappedSource: source }; tools.setContext(complete); void tools.browser('selection', { selection: complete }); onSelect(complete);
+  }
+  document.addEventListener('pointermove', event => {
+    hover(event.composedPath().find(item => item instanceof view.Element),event);
+  }, options);
+  document.addEventListener('pointerout',event=>{if(!event.relatedTarget)clearHover();},options);
+  document.addEventListener('pointercancel',clearHover,options);view.addEventListener('blur',clearHover,options);
+  document.addEventListener('click', event => {
+    const node = event.composedPath().find(item => item instanceof view.Element); if (toolNode(node)) return;
+    event.preventDefault(); event.stopImmediatePropagation(); void select(node);
+  }, options);
+  document.addEventListener('keydown', event => {
+    if (event.key === 'Escape') { event.preventDefault(); event.stopImmediatePropagation(); cancel(); }
+    else if (event.key === 'Enter' && active && !toolNode(event.composedPath().find(item=>item instanceof view.Element))) { event.preventDefault(); event.stopImmediatePropagation(); void select(active); }
+  }, options);
+  document.addEventListener('focusin', event => {clearHover();highlight(event.composedPath().find(item=>item instanceof view.Element),true);}, options);
+  // Scrolling and resizing keep the outline attached, without a trailing frame.
+  const reposition=()=>{clearHover();placeHint();if(active)highlight(active,false,false);};
+  view.addEventListener('scroll',reposition,options);view.addEventListener('resize',reposition,options);
+  view.visualViewport?.addEventListener('scroll',reposition,options);view.visualViewport?.addEventListener('resize',reposition,options);
+  placeHint();queueMicrotask(()=>{if(!stopped)live.textContent='Pick an element. Click, or use Tab and Enter. Escape or Cancel exits.';});
+  // Leave the inert logo menu's tab sequence. The next Tab starts with the
+  // application's first control rather than cycling back through tool buttons.
+  const tabindex=document.body.getAttribute('tabindex');document.body.tabIndex=-1;document.body.focus({preventScroll:true});
+  if(tabindex===null)document.body.removeAttribute('tabindex');else document.body.setAttribute('tabindex',tabindex);
+  return { dispose: stop };
+}

package/runtime/dev-error-overlay-style.mjs

@@ -0,0 +1,41 @@
+// Development-only error dialog; application styles never enter this shadow root.
+export const devErrorOverlayStyle = `
+  :host{all:initial;position:fixed;inset:0;z-index:2147483647;background:#080808;color-scheme:dark;color:#ededed;font:13px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-align:left;direction:ltr;-webkit-font-smoothing:antialiased}
+  *,*::before,*::after{box-sizing:border-box}[hidden]{display:none!important}
+  dialog{position:fixed;inset:0;margin:auto;width:min(960px,calc(100vw - 48px));height:fit-content;max-width:none;max-height:calc(100dvh - 48px);padding:0;border:0;border-radius:14px;background:#080808;color:#ededed;box-shadow:0 0 0 1px #242424;overflow:hidden;overscroll-behavior:contain;font:inherit;text-align:left}
+  dialog[open]{display:flex;flex-direction:column}dialog::backdrop{background:#080808}
+  .error-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;padding:14px 20px;border-bottom:1px solid #202020;flex:none}
+  .error-brand{display:flex;align-items:center;gap:8px;min-width:0;color:#aaa;font-size:12px}.error-brand strong{color:#ededed;font-weight:600}.error-brand-label::before{content:'/';margin-right:8px;color:#555}.error-count{min-width:20px;padding:1px 5px;border-radius:5px;background:#1b1b1b;color:#bbb;text-align:center;font:11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums}
+  .error-header-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-left:auto;max-width:100%}.icon{display:inline-flex;flex:none}.icon svg{display:block;width:14px;height:14px;flex:none}
+  button,a{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 10px;border:1px solid #303030;border-radius:8px;background:#111;color:#ddd;font:500 12px/1.5 ui-sans-serif,system-ui;white-space:nowrap;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
+  button:hover,a:hover{background:#1a1a1a;color:#fff}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:none;background:#242424;color:#fff;box-shadow:inset 0 0 0 1px #555}
+  dialog[open]:focus,dialog[open]:focus-visible{outline:none}.error-ai:focus-visible{background:#fff;color:#080808;box-shadow:inset 0 0 0 1px #777}
+  .error-dismiss{flex:none;width:36px;padding:0;background:transparent;border-color:transparent;color:#999}.error-dismiss .icon svg{width:16px;height:16px}.error-copy{min-width:108px}.error-copy[data-status=copied]{color:#a8dabd}.error-copy[data-status=error]{color:#f39199}
+  .error-ai{background:#e5e5e5;border-color:transparent;color:#111}.error-ai:hover{background:#fff;color:#080808}
+  .error-issue-region{flex:none;min-width:0;padding:8px 12px;border-bottom:1px solid #202020}.error-list{max-height:min(216px,28dvh);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#333 #080808}
+  .error-row{display:grid;grid-template-columns:126px minmax(0,1fr) 8px;align-items:center;gap:3px 12px;width:100%;min-height:40px;padding:10px 12px;border:0;border-radius:7px;background:transparent;text-align:left;font-weight:400;white-space:normal}
+  .error-row:hover{background:#111}.error-row[aria-pressed=true]{background:#191919;color:#eee}.error-row-type{display:flex;align-items:center;gap:7px;min-width:0;color:#aaa;font-size:11px;white-space:nowrap}.error-row-dot{width:5px;height:5px;border-radius:50%;background:#eb707b;flex:none}.error-row[data-recoverable=true] .error-row-dot{background:transparent;box-shadow:inset 0 0 0 1px #eb707b}
+  .error-row-message{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c6c6c6;font-size:12px}.error-row-file{grid-column:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#888;font:10px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}.error-list-note{margin:6px 12px 2px;color:#888;font-size:11px}
+  .error-row[data-kind=hydration]{grid-template-columns:minmax(0,1fr) 8px}.error-row[data-kind=hydration] .error-row-type{font-size:12px;color:#ddd}.error-row[data-kind=hydration] .error-row-file{grid-column:1}.error-row[aria-expanded=false] .error-row-file{display:none}.error-row:focus-visible{background:#242424;box-shadow:inset 0 0 0 1px #555}
+  .error-row-chevron{grid-column:-2;grid-row:1;justify-self:end;width:6px;height:6px;border-right:1px solid #888;border-bottom:1px solid #888;rotate:45deg;translate:0 -2px}.error-row[aria-expanded=true] .error-row-chevron{rotate:225deg;translate:0 1px}
+  .error-body{min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px;scrollbar-width:thin;scrollbar-color:#333 #080808}
+  .error-intro{margin-bottom:18px}.error-intro h1{margin:0;color:#f0f0f0;font-size:20px;line-height:1.3;letter-spacing:-.025em;font-weight:600;text-wrap:balance}
+  .error-title-toggle{justify-content:flex-start;gap:12px;max-width:100%;min-height:32px;padding:2px 0;border:0;border-radius:4px;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;white-space:normal;text-align:left}.error-title-toggle::after{content:'';width:7px;height:7px;flex:none;border-right:1px solid #888;border-bottom:1px solid #888;rotate:225deg;translate:0 2px}.error-title-toggle:hover{background:transparent;color:#fff}
+  .error-summary{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;max-width:70ch;margin:9px 0 0;color:#b8b8b8;font-size:13px;line-height:1.6;overflow-wrap:anywhere;text-wrap:pretty}
+  .error-editor-actions{display:flex;justify-content:flex-end;margin:-6px 0 18px}.error-editor-actions a{min-height:32px;padding:5px 8px;font-size:11px;background:transparent;color:#aaa;border-color:transparent}.error-editor-actions a:hover{color:#eee;background:#191919}
+  .source{margin:0 0 18px;min-width:0;border-radius:11px;background:#111;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff08}
+  .source-head{display:flex;align-items:center;gap:8px;min-width:0;padding:11px 16px;border-bottom:1px solid #222;color:#bbb}.source-head svg{width:14px;height:14px;flex:none;color:#888}.location{min-width:0;overflow-wrap:anywhere;font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}
+  .source pre{max-height:310px;margin:0;padding:14px 16px;overflow:auto;overscroll-behavior:contain;white-space:pre;overflow-wrap:normal;tab-size:2;color:#d4d4d4;font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;scrollbar-width:thin;scrollbar-color:#3b3b3b #111}
+  .source pre:focus-visible{outline-offset:-2px}
+  .error-disclosures{border-top:1px solid #202020}.error-disclosure+.error-disclosure{border-top:1px solid #202020}
+  summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:10px 2px;color:#aaa;font-size:12px;list-style:none;cursor:pointer}
+  summary::-webkit-details-marker{display:none}summary::after{content:'';width:6px;height:6px;flex:none;margin-right:4px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;rotate:45deg;translate:0 -2px}details[open]>summary::after{rotate:225deg;translate:0 1px}summary:hover{color:#eee}
+  .error-full{max-height:min(260px,35dvh);margin:0 0 14px;padding:14px 16px;border-radius:8px;background:#111;color:#bbb;overflow:auto;overscroll-behavior:contain;white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.65 ui-sans-serif,system-ui;tab-size:2;scrollbar-width:thin;scrollbar-color:#333 #111}
+  .error-stack{white-space:pre;overflow-wrap:normal;font:11px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace}
+  .error-full:focus-visible{outline-offset:-2px}.error-source-status{margin:14px 0 0;color:#888;font-size:12px;line-height:1.5;overflow-wrap:anywhere}.error-source-status:empty{display:none}
+  .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
+  @media(max-width:600px){dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 24px);border-radius:12px}.error-header{padding:12px 16px}.error-header-actions{flex:1 1 100%;justify-content:flex-start}.error-header-actions .error-dismiss{margin-left:auto}.error-issue-region{padding:7px 8px}.error-row{grid-template-columns:minmax(0,1fr) 8px;gap:3px;padding:9px 10px}.error-row-message,.error-row-file{grid-column:1}.error-list-note{margin-inline:10px}.error-body{padding:18px 16px}.error-intro h1{font-size:18px}.source-head{padding:10px 12px}.source pre{padding:12px;max-height:260px;font-size:11px}.error-full{padding:12px}}
+  @media(pointer:coarse){button,a,summary,.error-editor-actions a,.error-row,.error-title-toggle{min-height:44px}.error-dismiss{width:44px}}
+  @media(prefers-reduced-motion:no-preference){button:not(.error-row),a,summary{transition:background-color 120ms ease-out,color 120ms ease-out}}
+  @media(forced-colors:active){:host,dialog,dialog::backdrop{background:Canvas;color:CanvasText}dialog{border:1px solid CanvasText}.error-header,.error-issue-region,.error-disclosures,.error-disclosure+.error-disclosure,.source-head{border-color:CanvasText}.error-intro h1,.error-brand,.error-brand strong,.error-count,.error-summary,.error-row-type,.error-row-message,.error-row-file,.error-list-note,summary,.error-source-status,.location{color:CanvasText}.error-count,.error-row[aria-pressed=true]{background:Canvas}.error-row[aria-pressed=true]{outline:1px solid Highlight;outline-offset:-1px}.error-row-dot,.error-row[data-recoverable=true] .error-row-dot{background:CanvasText;box-shadow:none}.source,.error-full{background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none}.source pre{color:CanvasText}.error-ai,button,a{background:ButtonFace;color:ButtonText;border-color:ButtonText}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:1px solid Highlight;outline-offset:-2px;box-shadow:none}}
+`;