angular-grab-monorepo 0.1.3

package/packages/angular-grab/src/core/clipboard/copy.ts

@@ -0,0 +1,104 @@
+import type { ElementContext, ComponentStackEntry, ComponentResolver, SourceResolver } from '../types';
+import type { PluginRegistry } from '../plugins/plugin-registry';
+import { generateSnippet } from './generate-snippet';
+import { showToast, type ToastDetail } from '../overlay/toast';
+import { filterAngularClasses } from '../utils';
+
+export interface CopyDeps {
+  getComponentResolver: () => ComponentResolver | null;
+  getSourceResolver: () => SourceResolver | null;
+  getMaxContextLines: () => number;
+  pluginRegistry: PluginRegistry;
+}
+
+function buildSelector(el: Element): string {
+  const tag = el.tagName.toLowerCase();
+  const id = el.id ? `#${el.id}` : '';
+  const classes = filterAngularClasses(el.classList)
+    .map((c) => `.${c}`)
+    .join('');
+  return `${tag}${id}${classes}`;
+}
+
+function getCssClasses(el: Element): string[] {
+  return filterAngularClasses(el.classList);
+}
+
+export function buildElementContext(
+  element: Element,
+  componentResolver: ComponentResolver | null,
+  sourceResolver: SourceResolver | null,
+): ElementContext {
+  const compResult = componentResolver?.(element);
+  const srcResult = sourceResolver?.(element);
+
+  // Build component stack from resolver result
+  const componentStack: ComponentStackEntry[] = [];
+  if (compResult?.stack) {
+    for (const entry of compResult.stack) {
+      let filePath: string | null = null;
+      let line: number | null = null;
+      let column: number | null = null;
+
+      if (entry.hostElement && sourceResolver) {
+        const src = sourceResolver(entry.hostElement);
+        if (src) {
+          filePath = src.filePath;
+          line = src.line;
+          column = src.column;
+        }
+      }
+
+      componentStack.push({ name: entry.name, filePath, line, column });
+    }
+  }
+
+  return {
+    element,
+    html: element.outerHTML,
+    componentName: compResult?.name ?? null,
+    filePath: srcResult?.filePath ?? null,
+    line: srcResult?.line ?? null,
+    column: srcResult?.column ?? null,
+    componentStack,
+    selector: buildSelector(element),
+    cssClasses: getCssClasses(element),
+  };
+}
+
+export interface CopyResult {
+  context: ElementContext;
+  snippet: string;
+}
+
+export async function copyElement(element: Element, deps: CopyDeps): Promise<CopyResult | null> {
+  const context = buildElementContext(
+    element,
+    deps.getComponentResolver(),
+    deps.getSourceResolver(),
+  );
+
+  deps.pluginRegistry.callHook('onElementSelect', context);
+  deps.pluginRegistry.callHook('onBeforeCopy', context);
+
+  let snippet = generateSnippet(context, deps.getMaxContextLines());
+  snippet = deps.pluginRegistry.callTransformHook(snippet, context);
+
+  try {
+    await navigator.clipboard.writeText(snippet);
+    const detail: ToastDetail = {
+      componentName: context.componentName,
+      filePath: context.filePath,
+      line: context.line,
+      column: context.column,
+      cssClasses: context.cssClasses,
+    };
+    showToast('Copied to clipboard', detail);
+    deps.pluginRegistry.callHook('onCopySuccess', snippet, context, undefined);
+    return { context, snippet };
+  } catch (err) {
+    const error = err instanceof Error ? err : new Error(String(err));
+    deps.pluginRegistry.callHook('onCopyError', error);
+    return null;
+  }
+}

package/packages/angular-grab/src/core/clipboard/generate-snippet.ts

@@ -0,0 +1,38 @@
+import type { ElementContext } from '../types';
+import { cleanAngularAttrs } from '../utils';
+
+function truncateHtml(html: string, maxLines: number): string {
+  const lines = html.split('\n');
+  if (lines.length <= maxLines) return html;
+
+  return lines.slice(0, maxLines).join('\n') + '\n  ...';
+}
+
+function formatLocation(name: string | null, filePath: string | null, line: number | null, column: number | null): string {
+  let locationLine = '';
+  if (name) locationLine += `in ${name}`;
+  if (filePath) {
+    const loc = filePath +
+      (line != null ? `:${line}` : '') +
+      (line != null && column != null ? `:${column}` : '');
+    locationLine += locationLine ? ` at ${loc}` : `at ${loc}`;
+  }
+  return locationLine;
+}
+
+export function generateSnippet(context: ElementContext, maxContextLines: number): string {
+  const cleaned = cleanAngularAttrs(context.html);
+  const truncated = truncateHtml(cleaned, maxContextLines);
+
+  const parts: string[] = [truncated];
+
+  if (context.componentStack.length > 0) {
+    for (const entry of context.componentStack) {
+      parts.push(formatLocation(entry.name, entry.filePath, entry.line, entry.column));
+    }
+  } else if (context.componentName || context.filePath) {
+    parts.push(formatLocation(context.componentName, context.filePath, context.line, context.column));
+  }
+
+  return parts.join('\n');
+}

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

@@ -0,0 +1,10 @@
+export const Z_INDEX_FREEZE = 2147483644;
+export const Z_INDEX_CROSSHAIR = 2147483645;
+export const Z_INDEX_OVERLAY = 2147483646;
+export const Z_INDEX_LABEL = 2147483647;
+export const Z_INDEX_TOOLBAR = 2147483646;
+export const Z_INDEX_TOAST = 2147483647;
+export const Z_INDEX_POPOVER = 2147483647;
+
+export const TOOLBAR_TOAST_OFFSET = '72px';
+export const TOOLBAR_POPOVER_OFFSET = '68px';