angular-grab 0.1.0 → 0.1.2

package/packages/angular-grab/src/core/toolbar/comment-popover.ts

@@ -0,0 +1,235 @@
+import { Z_INDEX_POPOVER, TOOLBAR_POPOVER_OFFSET } from '../constants';
+
+const POPOVER_ID = '__ag-comment-popover__';
+const STYLE_ID = '__ag-comment-styles__';
+
+export interface CommentPopover {
+  show(): void;
+  hide(): void;
+  isVisible(): boolean;
+  isPopoverElement(el: Element): boolean;
+  dispose(): void;
+}
+
+export interface CommentPopoverCallbacks {
+  onSubmit: (comment: string) => void;
+  onCancel: () => void;
+}
+
+export function createCommentPopover(callbacks: CommentPopoverCallbacks): CommentPopover {
+  let popover: HTMLDivElement | null = null;
+  let textarea: HTMLTextAreaElement | null = null;
+  let visible = false;
+  let keydownHandler: ((e: KeyboardEvent) => void) | null = null;
+
+  function injectStyles(): void {
+    if (document.getElementById(STYLE_ID)) return;
+
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+      #${POPOVER_ID} {
+        position: fixed;
+        bottom: ${TOOLBAR_POPOVER_OFFSET};
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: ${Z_INDEX_POPOVER};
+        background: var(--ag-popover-bg, #0f172a);
+        border: 1px solid var(--ag-popover-border, #1e293b);
+        border-radius: 12px;
+        box-shadow: 0 8px 24px var(--ag-popover-shadow, rgba(0, 0, 0, 0.5));
+        width: 340px;
+        padding: 14px;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.15s ease, visibility 0.15s ease;
+        pointer-events: auto;
+      }
+      #${POPOVER_ID}.ag-comment-visible {
+        opacity: 1;
+        visibility: visible;
+      }
+      #${POPOVER_ID} textarea {
+        width: 100%;
+        min-height: 80px;
+        padding: 8px 10px;
+        border: 1px solid var(--ag-popover-border, #1e293b);
+        border-radius: 8px;
+        background: var(--ag-surface, #1e293b);
+        color: var(--ag-popover-text, #e2e8f0);
+        font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        resize: vertical;
+        outline: none;
+        box-sizing: border-box;
+      }
+      #${POPOVER_ID} textarea:focus {
+        border-color: var(--ag-accent, #3b82f6);
+      }
+      #${POPOVER_ID} textarea::placeholder {
+        color: var(--ag-text-muted, #64748b);
+      }
+      #${POPOVER_ID} .ag-comment-footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+        margin-top: 10px;
+      }
+      #${POPOVER_ID} .ag-comment-btn {
+        padding: 6px 14px;
+        border: none;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background 0.15s ease;
+      }
+      #${POPOVER_ID} .ag-comment-cancel {
+        background: transparent;
+        color: var(--ag-text-muted, #64748b);
+      }
+      #${POPOVER_ID} .ag-comment-cancel:hover {
+        background: var(--ag-popover-hover, #1e293b);
+        color: var(--ag-popover-text, #e2e8f0);
+      }
+      #${POPOVER_ID} .ag-comment-submit {
+        background: var(--ag-accent, #3b82f6);
+        color: #fff;
+      }
+      #${POPOVER_ID} .ag-comment-submit:hover {
+        background: var(--ag-accent-hover, #2563eb);
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  function ensurePopover(): HTMLDivElement {
+    if (popover) return popover;
+
+    injectStyles();
+
+    popover = document.createElement('div');
+    popover.id = POPOVER_ID;
+    popover.setAttribute('role', 'dialog');
+    popover.setAttribute('aria-label', 'Add comment');
+
+    textarea = document.createElement('textarea');
+    textarea.placeholder = 'Add a comment...';
+    textarea.rows = 3;
+
+    const footer = document.createElement('div');
+    footer.className = 'ag-comment-footer';
+
+    const cancelBtn = document.createElement('button');
+    cancelBtn.className = 'ag-comment-btn ag-comment-cancel';
+    cancelBtn.textContent = 'Cancel';
+    cancelBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      doHide();
+      callbacks.onCancel();
+    });
+
+    const submitBtn = document.createElement('button');
+    submitBtn.className = 'ag-comment-btn ag-comment-submit';
+    submitBtn.textContent = 'Copy with Comment';
+    submitBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const comment = textarea!.value.trim();
+      if (comment) {
+        doHide();
+        callbacks.onSubmit(comment);
+      } else {
+        textarea!.style.borderColor = 'var(--ag-accent, #3b82f6)';
+        textarea!.setAttribute('placeholder', 'Please enter a comment...');
+        textarea!.focus();
+        setTimeout(() => {
+          if (textarea) {
+            textarea.style.borderColor = '';
+            textarea.setAttribute('placeholder', 'Add a comment...');
+          }
+        }, 2000);
+      }
+    });
+
+    footer.appendChild(cancelBtn);
+    footer.appendChild(submitBtn);
+    popover.appendChild(textarea);
+    popover.appendChild(footer);
+
+    document.body.appendChild(popover);
+    return popover;
+  }
+
+  function attachKeydownInterceptor(): void {
+    if (keydownHandler) return;
+
+    keydownHandler = (e: KeyboardEvent) => {
+      // When textarea is focused, prevent keyboard handler from intercepting
+      if (textarea && document.activeElement === textarea) {
+        e.stopImmediatePropagation();
+
+        if (e.key === 'Escape') {
+          doHide();
+          callbacks.onCancel();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', keydownHandler, true);
+  }
+
+  function detachKeydownInterceptor(): void {
+    if (keydownHandler) {
+      document.removeEventListener('keydown', keydownHandler, true);
+      keydownHandler = null;
+    }
+  }
+
+  function doHide(): void {
+    visible = false;
+    popover?.classList.remove('ag-comment-visible');
+    detachKeydownInterceptor();
+  }
+
+  return {
+    show(): void {
+      const el = ensurePopover();
+      textarea!.value = '';
+      visible = true;
+      void el.offsetHeight;
+      el.classList.add('ag-comment-visible');
+      attachKeydownInterceptor();
+      // Focus after transition starts
+      requestAnimationFrame(() => textarea?.focus());
+    },
+
+    hide(): void {
+      doHide();
+    },
+
+    isVisible(): boolean {
+      return visible;
+    },
+
+    isPopoverElement(el: Element): boolean {
+      if (!popover) return false;
+      let current: Element | null = el;
+      while (current) {
+        if (current === popover || current.id === POPOVER_ID) return true;
+        current = current.parentElement;
+      }
+      return false;
+    },
+
+    dispose(): void {
+      detachKeydownInterceptor();
+      popover?.remove();
+      document.getElementById(STYLE_ID)?.remove();
+      popover = null;
+      textarea = null;
+      visible = false;
+    },
+  };
+}

package/packages/angular-grab/src/core/toolbar/copy-actions.ts

@@ -0,0 +1,98 @@
+import type { ElementContext } from '../types';
+import type { PluginRegistry } from '../plugins/plugin-registry';
+import { generateSnippet } from '../clipboard/generate-snippet';
+import { showToast } from '../overlay/toast';
+import { cleanAngularAttrs } from '../utils';
+
+export async function copyElementSnippet(
+  context: ElementContext,
+  maxLines: number,
+  pluginRegistry?: PluginRegistry,
+): Promise<boolean> {
+  let snippet = generateSnippet(context, maxLines);
+  if (pluginRegistry) {
+    snippet = pluginRegistry.callTransformHook(snippet, context);
+  }
+  const ok = await writeAndToast(snippet, 'Copied to clipboard', context);
+  if (ok) pluginRegistry?.callHook('onCopySuccess', snippet, context, undefined);
+  return ok;
+}
+
+export async function copyElementHtml(
+  context: ElementContext,
+  pluginRegistry?: PluginRegistry,
+): Promise<boolean> {
+  const cleaned = cleanAngularAttrs(context.html);
+  const ok = await writeAndToast(cleaned, 'HTML copied to clipboard', context);
+  if (ok) pluginRegistry?.callHook('onCopySuccess', cleaned, context, undefined);
+  return ok;
+}
+
+export async function copyElementStyles(element: Element): Promise<boolean> {
+  if (!element.isConnected) {
+    showToast('Element is no longer on the page');
+    return false;
+  }
+
+  const computed = window.getComputedStyle(element);
+  const tag = element.tagName.toLowerCase();
+  const lines: string[] = [`/* Computed styles for <${tag}> */`, `${tag} {`];
+
+  const props = [
+    'display', 'position', 'top', 'right', 'bottom', 'left',
+    'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height',
+    'margin', 'padding',
+    'border', 'border-radius',
+    'background', 'background-color',
+    'color', 'font', 'font-size', 'font-weight', 'font-family', 'line-height',
+    'text-align', 'text-decoration', 'text-transform',
+    'opacity', 'overflow', 'z-index',
+    'flex-direction', 'justify-content', 'align-items', 'gap',
+    'grid-template-columns', 'grid-template-rows',
+    'box-shadow', 'cursor', 'transition', 'transform',
+  ];
+
+  for (const prop of props) {
+    const value = computed.getPropertyValue(prop);
+    if (value && value !== 'none' && value !== 'normal' && value !== 'auto' && value !== '0px' && value !== 'visible') {
+      lines.push(`  ${prop}: ${value};`);
+    }
+  }
+
+  lines.push('}');
+  const css = lines.join('\n');
+
+  return writeAndToast(css, 'Styles copied to clipboard');
+}
+
+export async function copyWithComment(
+  context: ElementContext,
+  comment: string,
+  maxLines: number,
+  pluginRegistry?: PluginRegistry,
+): Promise<boolean> {
+  let snippet = generateSnippet(context, maxLines);
+  if (pluginRegistry) {
+    snippet = pluginRegistry.callTransformHook(snippet, context);
+  }
+  const full = `${snippet}\n\n/* Comment: ${comment} */`;
+  const ok = await writeAndToast(full, 'Copied with comment', context);
+  if (ok) pluginRegistry?.callHook('onCopySuccess', full, context, comment);
+  return ok;
+}
+
+async function writeAndToast(text: string, message: string, context?: ElementContext): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text);
+    showToast(message, context ? {
+      componentName: context.componentName,
+      filePath: context.filePath,
+      line: context.line,
+      column: context.column,
+      cssClasses: context.cssClasses,
+    } : undefined);
+    return true;
+  } catch {
+    return false;
+  }
+}

package/packages/angular-grab/src/core/toolbar/history-popover.ts

@@ -0,0 +1,245 @@
+import type { HistoryEntry } from '../types';
+import { escapeHtml } from '../utils';
+import { Z_INDEX_POPOVER, TOOLBAR_POPOVER_OFFSET } from '../constants';
+
+const POPOVER_ID = '__ag-history-popover__';
+const STYLE_ID = '__ag-history-styles__';
+
+export interface HistoryPopover {
+  show(entries: HistoryEntry[]): void;
+  hide(): void;
+  isVisible(): boolean;
+  isPopoverElement(el: Element): boolean;
+  dispose(): void;
+}
+
+export interface HistoryPopoverCallbacks {
+  onEntryClick: (entry: HistoryEntry) => void;
+}
+
+function formatRelativeTime(timestamp: number): string {
+  const diff = Date.now() - timestamp;
+  const seconds = Math.floor(diff / 1000);
+
+  if (seconds < 60) return 'just now';
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+}
+
+function shortPath(filePath: string): string {
+  const parts = filePath.split('/');
+  return parts[parts.length - 1];
+}
+
+function buildVsCodeUri(filePath: string, line: number | null, column: number | null): string {
+  let uri = `vscode://file/${encodeURI(filePath)}`;
+  if (line != null) uri += `:${line}`;
+  if (line != null && column != null) uri += `:${column}`;
+  return uri;
+}
+
+export function createHistoryPopover(callbacks: HistoryPopoverCallbacks): HistoryPopover {
+  let popover: HTMLDivElement | null = null;
+  let visible = false;
+
+  function injectStyles(): void {
+    if (document.getElementById(STYLE_ID)) return;
+
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+      #${POPOVER_ID} {
+        position: fixed;
+        bottom: ${TOOLBAR_POPOVER_OFFSET};
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: ${Z_INDEX_POPOVER};
+        background: var(--ag-popover-bg, #0f172a);
+        border: 1px solid var(--ag-popover-border, #1e293b);
+        border-radius: 12px;
+        box-shadow: 0 8px 24px var(--ag-popover-shadow, rgba(0, 0, 0, 0.5));
+        min-width: 320px;
+        max-width: 420px;
+        max-height: 360px;
+        overflow-y: auto;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.15s ease, visibility 0.15s ease;
+        pointer-events: auto;
+      }
+      #${POPOVER_ID}.ag-popover-visible {
+        opacity: 1;
+        visibility: visible;
+      }
+      #${POPOVER_ID} .ag-history-header {
+        padding: 10px 14px 8px;
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--ag-text-muted, #64748b);
+        border-bottom: 1px solid var(--ag-popover-border, #1e293b);
+      }
+      #${POPOVER_ID} .ag-history-empty {
+        padding: 24px 14px;
+        text-align: center;
+        color: var(--ag-text-muted, #64748b);
+        font-size: 13px;
+      }
+      #${POPOVER_ID} .ag-history-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        padding: 8px 14px;
+        cursor: pointer;
+        border: none;
+        border-bottom: 1px solid var(--ag-popover-border, #1e293b);
+        background: transparent;
+        width: 100%;
+        text-align: left;
+        font: inherit;
+        color: inherit;
+        transition: background 0.1s ease;
+      }
+      #${POPOVER_ID} .ag-history-item:last-child {
+        border-bottom: none;
+      }
+      #${POPOVER_ID} .ag-history-item:hover {
+        background: var(--ag-popover-hover, #1e293b);
+      }
+      #${POPOVER_ID} .ag-history-info {
+        flex: 1;
+        min-width: 0;
+      }
+      #${POPOVER_ID} .ag-history-selector {
+        font: 12px/1.3 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+        color: var(--ag-popover-text, #e2e8f0);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      #${POPOVER_ID} .ag-history-meta {
+        font-size: 11px;
+        color: var(--ag-text-muted, #64748b);
+        margin-top: 2px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      #${POPOVER_ID} .ag-history-time {
+        font-size: 11px;
+        color: var(--ag-text-muted, #64748b);
+        flex-shrink: 0;
+      }
+      #${POPOVER_ID} .ag-history-file-link {
+        color: var(--ag-text-muted, #64748b);
+        text-decoration: none;
+      }
+      #${POPOVER_ID} .ag-history-file-link:hover {
+        text-decoration: underline;
+        color: var(--ag-accent, #3b82f6);
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  function ensurePopover(): HTMLDivElement {
+    if (popover) return popover;
+
+    injectStyles();
+    popover = document.createElement('div');
+    popover.id = POPOVER_ID;
+    popover.setAttribute('role', 'dialog');
+    popover.setAttribute('aria-label', 'Grab history');
+    document.body.appendChild(popover);
+    return popover;
+  }
+
+  function render(entries: HistoryEntry[]): void {
+    const el = ensurePopover();
+
+    let html = '<div class="ag-history-header">History</div>';
+
+    if (entries.length === 0) {
+      html += '<div class="ag-history-empty">No elements grabbed yet</div>';
+    } else {
+      for (const entry of entries) {
+        const selector = escapeHtml(entry.context.selector);
+        const comp = entry.context.componentName ? escapeHtml(entry.context.componentName) : '';
+        const time = formatRelativeTime(entry.timestamp);
+        let meta = comp ? `in ${comp}` : '';
+        if (entry.context.filePath) {
+          const uri = buildVsCodeUri(entry.context.filePath, entry.context.line, entry.context.column);
+          const fileName = escapeHtml(shortPath(entry.context.filePath));
+          const sep = meta ? ' \u2014 ' : '';
+          meta += `${sep}<a class="ag-history-file-link" href="${escapeHtml(uri)}" title="Open in VS Code">${fileName}</a>`;
+        }
+
+        html += `<button class="ag-history-item" data-ag-history-id="${escapeHtml(entry.id)}" aria-label="Re-copy ${selector}">`;
+        html += `<div class="ag-history-info">`;
+        html += `<div class="ag-history-selector">${selector}</div>`;
+        if (meta) html += `<div class="ag-history-meta">${meta}</div>`;
+        html += `</div>`;
+        html += `<span class="ag-history-time">${time}</span>`;
+        html += `</button>`;
+      }
+    }
+
+    el.innerHTML = html;
+
+    // Attach click handlers
+    const items = el.querySelectorAll('.ag-history-item');
+    items.forEach((item) => {
+      item.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const id = (item as HTMLElement).dataset.agHistoryId;
+        const entry = entries.find((ent) => ent.id === id);
+        if (entry) {
+          callbacks.onEntryClick(entry);
+        }
+      });
+    });
+  }
+
+  return {
+    show(entries: HistoryEntry[]): void {
+      render(entries);
+      visible = true;
+      // Force reflow for transition
+      void ensurePopover().offsetHeight;
+      ensurePopover().classList.add('ag-popover-visible');
+    },
+
+    hide(): void {
+      visible = false;
+      popover?.classList.remove('ag-popover-visible');
+    },
+
+    isVisible(): boolean {
+      return visible;
+    },
+
+    isPopoverElement(el: Element): boolean {
+      if (!popover) return false;
+      let current: Element | null = el;
+      while (current) {
+        if (current === popover || current.id === POPOVER_ID) return true;
+        current = current.parentElement;
+      }
+      return false;
+    },
+
+    dispose(): void {
+      popover?.remove();
+      document.getElementById(STYLE_ID)?.remove();
+      popover = null;
+      visible = false;
+    },
+  };
+}