angular-grab 0.1.1 → 0.1.2

package/packages/angular-grab/src/core/overlay/select-feedback.ts

@@ -0,0 +1,108 @@
+import { Z_INDEX_OVERLAY, Z_INDEX_LABEL } from '../constants';
+
+const STYLE_ID = '__ag-feedback-styles__';
+
+function injectStyles(): void {
+  if (document.getElementById(STYLE_ID)) return;
+
+  const style = document.createElement('style');
+  style.id = STYLE_ID;
+  style.textContent = `
+    @keyframes ag-flash {
+      0%   { opacity: 1; }
+      100% { opacity: 0; transform: scale(1.02); }
+    }
+    @keyframes ag-pill-in {
+      0%   { opacity: 0; transform: translateY(4px) scale(0.9); }
+      30%  { opacity: 1; transform: translateY(0) scale(1); }
+      70%  { opacity: 1; transform: translateY(0) scale(1); }
+      100% { opacity: 0; transform: translateY(-8px) scale(0.95); }
+    }
+    .ag-select-flash {
+      position: fixed;
+      pointer-events: none;
+      z-index: ${Z_INDEX_OVERLAY};
+      border: 2px solid #22c55e;
+      background: rgba(34, 197, 94, 0.12);
+      border-radius: 3px;
+      box-sizing: border-box;
+      animation: ag-flash 0.45s ease-out forwards;
+    }
+    .ag-select-pill {
+      position: fixed;
+      pointer-events: none;
+      z-index: ${Z_INDEX_LABEL};
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      background: #22c55e;
+      color: #fff;
+      font: 600 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      padding: 3px 8px;
+      border-radius: 10px;
+      white-space: nowrap;
+      letter-spacing: 0.03em;
+      text-transform: uppercase;
+      box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
+      animation: ag-pill-in 0.9s ease-out forwards;
+    }
+    .ag-select-pill svg {
+      width: 10px;
+      height: 10px;
+      flex-shrink: 0;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+const CHECK_SVG = `<svg viewBox="0 0 10 10" fill="none"><path d="M2 5.5l2 2 4-4" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+
+export function showSelectFeedback(element: Element): void {
+  injectStyles();
+
+  const rect = element.getBoundingClientRect();
+
+  // Green flash overlay on the element
+  const flash = document.createElement('div');
+  flash.className = 'ag-select-flash';
+  flash.style.top = `${rect.top}px`;
+  flash.style.left = `${rect.left}px`;
+  flash.style.width = `${rect.width}px`;
+  flash.style.height = `${rect.height}px`;
+  document.body.appendChild(flash);
+
+  // "Copied" pill above the element
+  const pill = document.createElement('div');
+  pill.className = 'ag-select-pill';
+  pill.innerHTML = `${CHECK_SVG} Copied`;
+  document.body.appendChild(pill);
+
+  // Position pill centered above the element (or below if no room)
+  const pillWidth = 70; // approximate
+  let pillLeft = rect.left + rect.width / 2 - pillWidth / 2;
+  let pillTop = rect.top - 24;
+  if (pillTop < 4) {
+    pillTop = rect.bottom + 6;
+  }
+  // Clamp to viewport
+  const vw = document.documentElement.clientWidth;
+  if (pillLeft + pillWidth > vw - 4) pillLeft = vw - pillWidth - 4;
+  if (pillLeft < 4) pillLeft = 4;
+
+  pill.style.top = `${pillTop}px`;
+  pill.style.left = `${pillLeft}px`;
+
+  // Clean up after animations complete
+  const cleanup = () => {
+    flash.remove();
+    pill.remove();
+  };
+  pill.addEventListener('animationend', cleanup);
+
+  // Safety fallback
+  setTimeout(cleanup, 1200);
+}
+
+export function disposeFeedbackStyles(): void {
+  document.getElementById(STYLE_ID)?.remove();
+}

package/packages/angular-grab/src/core/overlay/toast.ts

@@ -0,0 +1,175 @@
+import { escapeHtml } from '../utils';
+import { Z_INDEX_TOAST } from '../constants';
+
+const TOAST_ID = '__ag-toast__';
+const TOAST_STYLE_ID = '__ag-toast-styles__';
+
+// Note: toast state is shared across instances (module-level singleton)
+let activeTimer: ReturnType<typeof setTimeout> | null = null;
+
+export interface ToastDetail {
+  componentName: string | null;
+  filePath: string | null;
+  line: number | null;
+  column: number | null;
+  cssClasses?: string[];
+}
+
+function injectToastStyles(): void {
+  if (document.getElementById(TOAST_STYLE_ID)) return;
+
+  const style = document.createElement('style');
+  style.id = TOAST_STYLE_ID;
+  style.textContent = `
+    #${TOAST_ID} {
+      position: fixed;
+      bottom: var(--ag-toast-bottom, 24px);
+      left: 50%;
+      transform: translateX(-50%) translateY(100%);
+      z-index: ${Z_INDEX_TOAST};
+      background: var(--ag-toast-bg, #0f172a);
+      color: var(--ag-toast-text, #e2e8f0);
+      font: 500 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      padding: 12px 18px;
+      border-radius: 10px;
+      box-shadow: 0 8px 24px var(--ag-toast-shadow, rgba(0, 0, 0, 0.4));
+      pointer-events: none;
+      opacity: 0;
+      transition: transform 0.25s ease, opacity 0.25s ease;
+      letter-spacing: 0.01em;
+      max-width: 480px;
+      min-width: 260px;
+    }
+    #${TOAST_ID}.ag-toast-visible {
+      transform: translateX(-50%) translateY(0);
+      opacity: 1;
+    }
+    #${TOAST_ID} .ag-toast-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 0;
+    }
+    #${TOAST_ID} .ag-toast-icon {
+      flex-shrink: 0;
+      width: 16px;
+      height: 16px;
+    }
+    #${TOAST_ID} .ag-toast-title {
+      font-weight: 600;
+      color: var(--ag-toast-title, #fff);
+    }
+    #${TOAST_ID} .ag-toast-details {
+      margin-top: 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      font-size: 12px;
+      font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
+    }
+    #${TOAST_ID} .ag-toast-row {
+      display: flex;
+      gap: 8px;
+      align-items: baseline;
+    }
+    #${TOAST_ID} .ag-toast-label {
+      color: var(--ag-toast-label, #64748b);
+      flex-shrink: 0;
+      min-width: 72px;
+    }
+    #${TOAST_ID} .ag-toast-value {
+      color: var(--ag-toast-text, #e2e8f0);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    #${TOAST_ID} .ag-toast-file-link {
+      color: var(--ag-toast-text, #e2e8f0);
+      text-decoration: none;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      pointer-events: auto;
+      cursor: pointer;
+    }
+    #${TOAST_ID} .ag-toast-file-link:hover {
+      text-decoration: underline;
+      color: var(--ag-accent, #3b82f6);
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+function getOrCreateToast(): HTMLDivElement {
+  let toast = document.getElementById(TOAST_ID) as HTMLDivElement | null;
+  if (!toast) {
+    injectToastStyles();
+    toast = document.createElement('div');
+    toast.id = TOAST_ID;
+    document.body.appendChild(toast);
+  }
+  return toast;
+}
+
+const CHECKMARK_SVG = `<svg class="ag-toast-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="7" fill="#22c55e"/><path d="M5 8l2 2 4-4" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+
+export function showToast(message: string, detail?: ToastDetail, durationMs = 3500): void {
+  const toast = getOrCreateToast();
+
+  let html = `<div class="ag-toast-header">${CHECKMARK_SVG}<span class="ag-toast-title">${escapeHtml(message)}</span></div>`;
+
+  if (detail) {
+    html += '<div class="ag-toast-details">';
+
+    if (detail.componentName) {
+      html += `<div class="ag-toast-row"><span class="ag-toast-label">Component</span><span class="ag-toast-value">${escapeHtml(detail.componentName)}</span></div>`;
+    }
+
+    if (detail.filePath) {
+      let loc = detail.filePath;
+      if (detail.line != null) loc += `:${detail.line}`;
+
+      let vsCodeUri = `vscode://file/${encodeURI(detail.filePath)}`;
+      if (detail.line != null) vsCodeUri += `:${detail.line}`;
+      if (detail.line != null && detail.column != null) vsCodeUri += `:${detail.column}`;
+
+      html += `<div class="ag-toast-row"><span class="ag-toast-label">File</span>`;
+      html += `<a class="ag-toast-file-link" href="${escapeHtml(vsCodeUri)}" title="Open in VS Code">${escapeHtml(loc)}</a>`;
+      html += `</div>`;
+    }
+
+    if (detail.cssClasses && detail.cssClasses.length > 0) {
+      const classes = detail.cssClasses.map((c) => `.${escapeHtml(c)}`).join(' ');
+      html += `<div class="ag-toast-row"><span class="ag-toast-label">Classes</span><span class="ag-toast-value">${classes}</span></div>`;
+    }
+
+    html += '</div>';
+  }
+
+  toast.innerHTML = html;
+
+  if (activeTimer) {
+    clearTimeout(activeTimer);
+    activeTimer = null;
+  }
+
+  // Force reflow to restart animation if already visible
+  toast.classList.remove('ag-toast-visible');
+  void toast.offsetHeight;
+
+  toast.classList.add('ag-toast-visible');
+
+  activeTimer = setTimeout(() => {
+    toast.classList.remove('ag-toast-visible');
+    activeTimer = null;
+  }, durationMs);
+}
+
+export function disposeToast(): void {
+  if (activeTimer) {
+    clearTimeout(activeTimer);
+    activeTimer = null;
+  }
+  document.getElementById(TOAST_ID)?.remove();
+  document.getElementById(TOAST_STYLE_ID)?.remove();
+}

package/packages/angular-grab/src/core/picker/element-picker.ts

@@ -0,0 +1,114 @@
+import type { OverlayRenderer } from '../overlay/overlay-renderer';
+import type { Crosshair } from '../overlay/crosshair';
+import type { ComponentResolver, SourceResolver } from '../types';
+import { filterAngularClasses } from '../utils';
+
+export interface ElementPicker {
+  activate(): void;
+  deactivate(): void;
+  getHoveredElement(): Element | null;
+  dispose(): void;
+}
+
+export interface ElementPickerDeps {
+  overlay: OverlayRenderer;
+  crosshair: Crosshair;
+  getComponentResolver: () => ComponentResolver | null;
+  getSourceResolver: () => SourceResolver | null;
+  isToolbarElement?: (el: Element) => boolean;
+  getFreezeElement?: () => HTMLElement | null;
+  onHover: (element: Element | null) => void;
+  onSelect: (element: Element) => void;
+}
+
+export function createElementPicker(deps: ElementPickerDeps): ElementPicker {
+  let hoveredElement: Element | null = null;
+  let listening = false;
+
+  function resolveComponentName(el: Element): string | null {
+    const resolver = deps.getComponentResolver();
+    if (!resolver) return null;
+
+    const result = resolver(el);
+    return result?.name ?? null;
+  }
+
+  function resolveSourcePath(el: Element): string | null {
+    const resolver = deps.getSourceResolver();
+    if (!resolver) return null;
+
+    const result = resolver(el);
+    if (!result?.filePath) return null;
+
+    let path = result.filePath;
+    if (result.line != null) {
+      path += `:${result.line}`;
+    }
+    return path;
+  }
+
+  function elementAtPoint(x: number, y: number): Element | null {
+    // Temporarily hide freeze overlay so elementFromPoint can see through it
+    const freezeEl = deps.getFreezeElement?.();
+    if (freezeEl) freezeEl.style.pointerEvents = 'none';
+    const target = document.elementFromPoint(x, y);
+    if (freezeEl) freezeEl.style.pointerEvents = 'auto';
+    return target;
+  }
+
+  function handleMouseMove(e: MouseEvent): void {
+    const target = elementAtPoint(e.clientX, e.clientY);
+    if (!target || deps.overlay.isOverlayElement(target)) return;
+    if (deps.crosshair.isCrosshairElement(target)) return;
+    if (deps.isToolbarElement?.(target)) return;
+    if (target === hoveredElement) return;
+
+    hoveredElement = target;
+    const componentName = resolveComponentName(target);
+    const sourcePath = resolveSourcePath(target);
+    const cssClasses = filterAngularClasses(target.classList);
+    deps.overlay.show(target, componentName, sourcePath, cssClasses);
+    deps.onHover(target);
+  }
+
+  function handleClick(e: MouseEvent): void {
+    const target = elementAtPoint(e.clientX, e.clientY);
+    if (target && (deps.isToolbarElement?.(target) || deps.crosshair.isCrosshairElement(target))) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (hoveredElement) {
+      deps.onSelect(hoveredElement);
+    }
+  }
+
+  return {
+    activate(): void {
+      if (listening) return;
+      listening = true;
+      deps.crosshair.activate();
+      document.addEventListener('mousemove', handleMouseMove, true);
+      document.addEventListener('click', handleClick, true);
+    },
+
+    deactivate(): void {
+      if (!listening) return;
+      listening = false;
+      hoveredElement = null;
+      deps.crosshair.deactivate();
+      document.removeEventListener('mousemove', handleMouseMove, true);
+      document.removeEventListener('click', handleClick, true);
+      deps.overlay.hide();
+      deps.onHover(null);
+    },
+
+    getHoveredElement(): Element | null {
+      return hoveredElement;
+    },
+
+    dispose(): void {
+      this.deactivate();
+    },
+  };
+}

package/packages/angular-grab/src/core/plugins/plugin-registry.ts

@@ -0,0 +1,83 @@
+import type { Plugin, PluginHooks, PluginCleanup, ElementContext, AngularGrabAPI } from '../types';
+
+export interface PluginRegistry {
+  register(plugin: Plugin, api: AngularGrabAPI): void;
+  unregister(name: string): void;
+  callHook<K extends keyof PluginHooks>(hookName: K, ...args: Parameters<NonNullable<PluginHooks[K]>>): void;
+  callTransformHook(text: string, context: ElementContext): string;
+  getPlugins(): ReadonlyArray<Plugin>;
+  dispose(): void;
+}
+
+export function createPluginRegistry(): PluginRegistry {
+  const plugins = new Map<string, Plugin>();
+  const cleanups = new Map<string, PluginCleanup>();
+
+  return {
+    register(plugin: Plugin, api: AngularGrabAPI): void {
+      if (plugins.has(plugin.name)) {
+        this.unregister(plugin.name);
+      }
+      plugins.set(plugin.name, plugin);
+
+      if (plugin.setup) {
+        const cleanup = plugin.setup(api);
+        if (cleanup) {
+          cleanups.set(plugin.name, cleanup);
+        }
+      }
+    },
+
+    unregister(name: string): void {
+      const cleanup = cleanups.get(name);
+      if (cleanup) {
+        cleanup();
+        cleanups.delete(name);
+      }
+      plugins.delete(name);
+    },
+
+    callHook<K extends keyof PluginHooks>(hookName: K, ...args: Parameters<NonNullable<PluginHooks[K]>>): void {
+      for (const plugin of plugins.values()) {
+        const hook = plugin.hooks?.[hookName];
+        if (hook) {
+          try {
+            (hook as (...a: any[]) => void)(...args);
+          } catch (err) {
+            console.warn(`[angular-grab] Plugin "${plugin.name}" hook "${hookName}" threw:`, err);
+          }
+        }
+      }
+    },
+
+    callTransformHook(text: string, context: ElementContext): string {
+      let result = text;
+      for (const plugin of plugins.values()) {
+        const transform = plugin.hooks?.transformCopyContent;
+        if (transform) {
+          try {
+            result = transform(result, context);
+          } catch (err) {
+            console.warn(`[angular-grab] Plugin "${plugin.name}" transformCopyContent threw:`, err);
+          }
+        }
+      }
+      return result;
+    },
+
+    getPlugins(): ReadonlyArray<Plugin> {
+      return Array.from(plugins.values());
+    },
+
+    dispose(): void {
+      for (const [name] of plugins) {
+        const cleanup = cleanups.get(name);
+        if (cleanup) {
+          try { cleanup(); } catch { /* ignore */ }
+        }
+      }
+      cleanups.clear();
+      plugins.clear();
+    },
+  };
+}

package/packages/angular-grab/src/core/store.ts

@@ -0,0 +1,52 @@
+import type { AngularGrabOptions, ToolbarState } from './types';
+
+export interface GrabState {
+  active: boolean;
+  frozen: boolean;
+  hoveredElement: Element | null;
+  options: AngularGrabOptions;
+  toolbar: ToolbarState;
+}
+
+export type StateListener = (state: GrabState, key: keyof GrabState) => void;
+
+export interface Store {
+  state: GrabState;
+  subscribe(listener: StateListener): () => void;
+}
+
+export function createStore(initialOptions: AngularGrabOptions): Store {
+  const listeners = new Set<StateListener>();
+
+  const raw: GrabState = {
+    active: false,
+    frozen: false,
+    hoveredElement: null,
+    options: initialOptions,
+    toolbar: {
+      visible: initialOptions.showToolbar,
+      themeMode: initialOptions.themeMode,
+      history: [],
+      pendingAction: null,
+    },
+  };
+
+  const state = new Proxy(raw, {
+    set(target, prop, value) {
+      const key = prop as keyof GrabState;
+      if (target[key] === value) return true;
+
+      Reflect.set(target, key, value);
+      listeners.forEach((fn) => fn(state, key));
+      return true;
+    },
+  });
+
+  return {
+    state,
+    subscribe(listener: StateListener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+}

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

@@ -0,0 +1,178 @@
+import { ICON_COPY, ICON_STYLES, ICON_CODE, ICON_COMMENT, ICON_TRASH } from './toolbar-icons';
+import { escapeHtml } from '../utils';
+import { Z_INDEX_POPOVER, TOOLBAR_POPOVER_OFFSET } from '../constants';
+
+const MENU_ID = '__ag-actions-menu__';
+const STYLE_ID = '__ag-actions-styles__';
+
+export interface ActionsMenuCallbacks {
+  onCopyElement: () => void;
+  onCopyStyles: () => void;
+  onCopyHtml: () => void;
+  onComment: () => void;
+  onClearHistory: () => void;
+}
+
+export interface ActionsMenu {
+  show(): void;
+  hide(): void;
+  isVisible(): boolean;
+  isMenuElement(el: Element): boolean;
+  dispose(): void;
+}
+
+interface MenuItem {
+  icon: string;
+  label: string;
+  action: () => void;
+  separator?: false;
+}
+
+interface MenuSeparator {
+  separator: true;
+}
+
+type MenuEntry = MenuItem | MenuSeparator;
+
+export function createActionsMenu(callbacks: ActionsMenuCallbacks): ActionsMenu {
+  let menu: HTMLDivElement | null = null;
+  let visible = false;
+
+  const items: MenuEntry[] = [
+    { icon: ICON_COPY, label: 'Copy Element', action: callbacks.onCopyElement },
+    { icon: ICON_STYLES, label: 'Copy Styles', action: callbacks.onCopyStyles },
+    { icon: ICON_CODE, label: 'Copy HTML', action: callbacks.onCopyHtml },
+    { icon: ICON_COMMENT, label: 'Comment', action: callbacks.onComment },
+    { separator: true },
+    { icon: ICON_TRASH, label: 'Clear History', action: callbacks.onClearHistory },
+  ];
+
+  function injectStyles(): void {
+    if (document.getElementById(STYLE_ID)) return;
+
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+      #${MENU_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: 10px;
+        box-shadow: 0 8px 24px var(--ag-popover-shadow, rgba(0, 0, 0, 0.5));
+        min-width: 200px;
+        padding: 4px;
+        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;
+      }
+      #${MENU_ID}.ag-menu-visible {
+        opacity: 1;
+        visibility: visible;
+      }
+      #${MENU_ID} .ag-menu-item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 8px 12px;
+        border: none;
+        border-radius: 6px;
+        background: transparent;
+        color: var(--ag-popover-text, #e2e8f0);
+        font-size: 13px;
+        cursor: pointer;
+        width: 100%;
+        text-align: left;
+        transition: background 0.1s ease;
+      }
+      #${MENU_ID} .ag-menu-item:hover {
+        background: var(--ag-popover-hover, #1e293b);
+      }
+      #${MENU_ID} .ag-menu-item svg {
+        flex-shrink: 0;
+        opacity: 0.7;
+      }
+      #${MENU_ID} .ag-menu-sep {
+        height: 1px;
+        background: var(--ag-popover-border, #1e293b);
+        margin: 4px 8px;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  function ensureMenu(): HTMLDivElement {
+    if (menu) return menu;
+
+    injectStyles();
+    menu = document.createElement('div');
+    menu.id = MENU_ID;
+    menu.setAttribute('role', 'menu');
+    menu.setAttribute('aria-label', 'Actions');
+
+    for (const entry of items) {
+      if (entry.separator) {
+        const sep = document.createElement('div');
+        sep.className = 'ag-menu-sep';
+        menu.appendChild(sep);
+        continue;
+      }
+
+      const btn = document.createElement('button');
+      btn.className = 'ag-menu-item';
+      btn.setAttribute('role', 'menuitem');
+      btn.innerHTML = `${entry.icon}<span>${escapeHtml(entry.label)}</span>`;
+      btn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        visible = false;
+        menu?.classList.remove('ag-menu-visible');
+        entry.action();
+      });
+      menu.appendChild(btn);
+    }
+
+    document.body.appendChild(menu);
+    return menu;
+  }
+
+  return {
+    show(): void {
+      const el = ensureMenu();
+      visible = true;
+      void el.offsetHeight;
+      el.classList.add('ag-menu-visible');
+    },
+
+    hide(): void {
+      visible = false;
+      menu?.classList.remove('ag-menu-visible');
+    },
+
+    isVisible(): boolean {
+      return visible;
+    },
+
+    isMenuElement(el: Element): boolean {
+      if (!menu) return false;
+      let current: Element | null = el;
+      while (current) {
+        if (current === menu || current.id === MENU_ID) return true;
+        current = current.parentElement;
+      }
+      return false;
+    },
+
+    dispose(): void {
+      menu?.remove();
+      document.getElementById(STYLE_ID)?.remove();
+      menu = null;
+      visible = false;
+    },
+  };
+}