tricu

module-inspector.ts (5081B)

---

 import type { SourceEditor } from './source-editor.js';
 import { importSites } from './import-folds.js';
 import { loadLibraries, renderLibraryExports } from './library-browser.js';
 
 export function moduleInspector(input: SourceEditor, local: () => { label: string; manifest: string; names: string[] }[]) {
   const card = document.createElement('section'); card.className = 'definition-card module-card'; card.hidden = true;
   card.setAttribute('aria-label', 'Imported module');
   const heading = document.createElement('div'); heading.className = 'definition-card-controls';
   const title = document.createElement('strong'), close = document.createElement('button');
   close.type = 'button'; close.textContent = '×'; close.className = 'definition-card-close'; close.setAttribute('aria-label', 'Close module inspection');
   const search = document.createElement('input'); search.type = 'search'; search.placeholder = 'Filter definitions…'; search.setAttribute('aria-label', 'Search module definitions');
   const list = document.createElement('div'); list.className = 'module-exports';
   const status = document.createElement('p'); status.className = 'hint'; status.setAttribute('role', 'status');
   const identity = document.createElement('div'); identity.className = 'inspection-title';
   const kind = document.createElement('span'); kind.className = 'inspection-kind'; kind.textContent = 'Imported module';
   const description = document.createElement('p'); description.className = 'module-description'; description.hidden = true;
   identity.append(kind, title); heading.append(identity, close); card.append(heading, description, search, list, status); input.dom.append(card);
   let selected: {hash: string; from: number} | undefined, names: string[] = [], revision = 0;
   function hide(): void { revision++; selected = undefined; card.hidden = true; }
   function position(): void {
     if (!selected) return;
     const site = importSites(input.view.state).find(site => site.from === selected!.from && site.hash === selected!.hash);
     if (!site || input.view.state.doc.lineAt(input.view.state.selection.main.head).number !== site.line) { hide(); return; }
     const rect = input.view.coordsAtPos(site.to), height = input.dom.clientHeight;
     card.style.maxHeight = `${Math.max(80, Math.min(height - 16, innerHeight * .75, 400))}px`;
     const top = rect ? rect.bottom - input.dom.getBoundingClientRect().top + 4 : 8;
     card.style.top = `${Math.max(8, Math.min(top, height - card.offsetHeight - 8))}px`;
   }
   function render(): void {
     renderLibraryExports(list, names, search.value, name => {
       void navigator.clipboard.writeText(name).then(() => { status.textContent = 'Definition name copied.'; }, () => { status.textContent = name; });
     });
     position();
   }
   async function show(target: HTMLElement): Promise<void> {
     const hash = target.dataset.importHash;
     const site = importSites(input.view.state).find(site => site.hash === hash && site.line === input.view.state.doc.lineAt(input.view.state.selection.main.head).number);
     if (!site) return;
     const current = ++revision;
     selected = { hash: site.hash, from: site.from }; names = []; search.value = ''; list.replaceChildren(); description.hidden = true; description.textContent = '';
     title.textContent = 'Imported module'; status.textContent = 'Loading module definitions…'; card.hidden = false; position(); search.focus({preventScroll:true});
     try {
       const nearby = local().find(row => row.manifest === hash);
       const published = nearby ? undefined : (await loadLibraries()).find(row => row.manifest === hash);
       if (current !== revision) return;
       title.textContent = nearby?.label ?? published?.title ?? 'Imported module';
       description.textContent = published?.description ?? (nearby ? 'Local module' : ''); description.hidden = !description.textContent;
       names = nearby?.names ?? published?.names ?? [];
       status.textContent = nearby || published ? `${names.length} definitions · Click a name to copy it.` : 'This module is not in the library index or local modules.';
       render();
     } catch (error) { if (current === revision) status.textContent = `Could not load module definitions: ${String(error)}`; }
   }
   input.dom.addEventListener('click', event => {
     const target = (event.target as Element).closest<HTMLElement>('.import-hash-full');
     if (target && event.detail <= 1) void show(target);
   });
   input.dom.addEventListener('keydown', event => {
     const target = (event.target as Element).closest<HTMLElement>('.import-hash-full');
     if (target && (event.key === 'Enter' || event.key === ' ')) { event.preventDefault(); event.stopPropagation(); void show(target); }
   }, true);
   function dismiss(): void { hide(); input.focus(); }
   close.onclick = dismiss;
   card.addEventListener('keydown', event => { if (event.key === 'Escape') { event.preventDefault(); dismiss(); } });
   search.oninput = render; input.onLayout(position); input.onChange(hide);
   new ResizeObserver(position).observe(card);
   return { hide };
 }