heroshot 0.0.2-alpha.1 → 0.0.2-alpha.2

package/toolbar/src/lib/tests/dom.test.ts

@@ -1,262 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import {
-  createOverlay,
-  createToolbar,
-  deepElementFromPoint,
-  getSelector,
-  updateOverlay,
-} from '../dom';
-
-describe('deepElementFromPoint', () => {
-  let originalElementFromPoint: typeof document.elementFromPoint;
-
-  beforeEach(() => {
-    document.body.innerHTML = '';
-    // Store original and create mock
-    originalElementFromPoint = document.elementFromPoint;
-    document.elementFromPoint = vi.fn();
-  });
-
-  afterEach(() => {
-    document.elementFromPoint = originalElementFromPoint;
-  });
-
-  it('should return null when no element at point', () => {
-    vi.mocked(document.elementFromPoint).mockReturnValue(null);
-    expect(deepElementFromPoint(0, 0)).toBeNull();
-  });
-
-  it('should return element when no shadow DOM', () => {
-    const div = document.createElement('div');
-    vi.mocked(document.elementFromPoint).mockReturnValue(div);
-    expect(deepElementFromPoint(100, 100)).toBe(div);
-  });
-
-  it('should pierce shadow DOM', () => {
-    const host = document.createElement('div');
-    const shadow = host.attachShadow({ mode: 'open' });
-    const inner = document.createElement('span');
-    shadow.append(inner);
-
-    vi.mocked(document.elementFromPoint).mockReturnValue(host);
-    shadow.elementFromPoint = vi.fn().mockReturnValue(inner);
-
-    expect(deepElementFromPoint(100, 100)).toBe(inner);
-  });
-
-  it('should stop if shadow returns same element', () => {
-    const host = document.createElement('div');
-    const shadow = host.attachShadow({ mode: 'open' });
-
-    vi.mocked(document.elementFromPoint).mockReturnValue(host);
-    shadow.elementFromPoint = vi.fn().mockReturnValue(host);
-
-    expect(deepElementFromPoint(100, 100)).toBe(host);
-  });
-
-  it('should stop if shadow returns null', () => {
-    const host = document.createElement('div');
-    const shadow = host.attachShadow({ mode: 'open' });
-
-    vi.mocked(document.elementFromPoint).mockReturnValue(host);
-    shadow.elementFromPoint = vi.fn().mockReturnValue(null);
-
-    expect(deepElementFromPoint(100, 100)).toBe(host);
-  });
-});
-
-describe('getSelector', () => {
-  beforeEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('should return id selector if element has id', () => {
-    const div = document.createElement('div');
-    div.id = 'my-element';
-    document.body.append(div);
-
-    expect(getSelector(div)).toBe('#my-element');
-  });
-
-  it('should ignore heroshot-prefixed ids', () => {
-    const div = document.createElement('div');
-    div.id = 'heroshot-toolbar';
-    document.body.append(div);
-
-    const result = getSelector(div);
-    expect(result).not.toContain('#heroshot-toolbar');
-    expect(result).toContain('div');
-  });
-
-  it('should include class names in selector', () => {
-    const div = document.createElement('div');
-    div.className = 'btn primary';
-    document.body.append(div);
-
-    expect(getSelector(div)).toContain('.btn.primary');
-  });
-
-  it('should limit to first 2 classes', () => {
-    const div = document.createElement('div');
-    div.className = 'one two three four';
-    document.body.append(div);
-
-    const result = getSelector(div);
-    expect(result).toContain('.one.two');
-    expect(result).not.toContain('.three');
-  });
-
-  it('should filter out heroshot classes', () => {
-    const div = document.createElement('div');
-    div.className = 'heroshot-active btn';
-    document.body.append(div);
-
-    const result = getSelector(div);
-    expect(result).not.toContain('heroshot');
-    expect(result).toContain('.btn');
-  });
-
-  it('should add nth-of-type for siblings', () => {
-    const parent = document.createElement('div');
-    const child1 = document.createElement('span');
-    const child2 = document.createElement('span');
-    parent.append(child1);
-    parent.append(child2);
-    document.body.append(parent);
-
-    expect(getSelector(child2)).toContain(':nth-of-type(2)');
-  });
-
-  it('should stop at ancestor with id', () => {
-    const parent = document.createElement('div');
-    parent.id = 'container';
-    const child = document.createElement('span');
-    parent.append(child);
-    document.body.append(parent);
-
-    const result = getSelector(child);
-    expect(result).toBe('#container > span');
-  });
-
-  it('should generate shadow DOM piercing selector', () => {
-    const host = document.createElement('div');
-    host.id = 'host';
-    const shadow = host.attachShadow({ mode: 'open' });
-    const inner = document.createElement('span');
-    inner.className = 'inner';
-    shadow.append(inner);
-    document.body.append(host);
-
-    const result = getSelector(inner);
-    expect(result).toContain('>>>');
-    expect(result).toContain('#host');
-    expect(result).toContain('span.inner');
-  });
-
-  it('should limit path depth to 20', () => {
-    let current = document.body;
-    for (let index = 0; index < 30; index++) {
-      const div = document.createElement('div');
-      current.append(div);
-      current = div;
-    }
-
-    const result = getSelector(current);
-    const parts = result.split(' > ');
-    expect(parts.length).toBeLessThanOrEqual(20);
-  });
-});
-
-describe('createToolbar', () => {
-  it('should create toolbar element with correct id', () => {
-    const toolbar = createToolbar();
-    expect(toolbar.id).toBe('heroshot-toolbar');
-  });
-
-  it('should contain picker button', () => {
-    const toolbar = createToolbar();
-    const button = toolbar.querySelector('#heroshot-picker-btn');
-    expect(button).not.toBeNull();
-  });
-
-  it('should contain status element', () => {
-    const toolbar = createToolbar();
-    const status = toolbar.querySelector('#heroshot-status');
-    expect(status).not.toBeNull();
-    expect(status?.textContent).toContain('Click crosshair');
-  });
-
-  it('should contain SVG icon', () => {
-    const toolbar = createToolbar();
-    const svg = toolbar.querySelector('svg');
-    expect(svg).not.toBeNull();
-  });
-});
-
-describe('createOverlay', () => {
-  it('should create overlay element with correct id', () => {
-    const overlay = createOverlay();
-    expect(overlay.id).toBe('heroshot-overlay');
-  });
-
-  it('should be hidden by default', () => {
-    const overlay = createOverlay();
-    expect(overlay.style.display).toBe('none');
-  });
-});
-
-describe('updateOverlay', () => {
-  let overlay: HTMLDivElement;
-
-  beforeEach(() => {
-    overlay = createOverlay();
-    document.body.append(overlay);
-  });
-
-  it('should hide overlay when rect is null', () => {
-    overlay.style.display = 'block';
-    updateOverlay(overlay, null);
-    expect(overlay.style.display).toBe('none');
-  });
-
-  it('should clear previous content when rect is null', () => {
-    overlay.innerHTML = '<div>old content</div>';
-    updateOverlay(overlay, null);
-    expect(overlay.innerHTML).toBe('');
-  });
-
-  it('should show overlay when rect is provided', () => {
-    const rect = new DOMRect(100, 100, 200, 150);
-    updateOverlay(overlay, rect);
-    expect(overlay.style.display).toBe('block');
-  });
-
-  it('should create 4 dark overlay areas', () => {
-    const rect = new DOMRect(100, 100, 200, 150);
-    updateOverlay(overlay, rect);
-
-    const darkAreas = overlay.querySelectorAll('.heroshot-overlay-dark');
-    expect(darkAreas.length).toBe(4);
-  });
-
-  it('should create highlight element', () => {
-    const rect = new DOMRect(100, 100, 200, 150);
-    updateOverlay(overlay, rect);
-
-    const highlight = overlay.querySelector('.heroshot-highlight');
-    expect(highlight).not.toBeNull();
-  });
-
-  it('should position highlight at rect location', () => {
-    const rect = new DOMRect(100, 50, 200, 150);
-    updateOverlay(overlay, rect);
-
-    const highlight = overlay.querySelector('.heroshot-highlight');
-    expect(highlight).not.toBeNull();
-    const highlightElement = highlight as HTMLElement;
-    expect(highlightElement.style.top).toBe('50px');
-    expect(highlightElement.style.left).toBe('100px');
-    expect(highlightElement.style.width).toBe('200px');
-    expect(highlightElement.style.height).toBe('150px');
-  });
-});

package/toolbar/src/main.ts

@@ -1,74 +0,0 @@
-/**
- * Heroshot Toolbar Entry Point
- *
- * Browser-injected UI for selecting elements and managing screenshots.
- * Injected by Playwright during `heroshot setup`.
- */
-
-import { mount, unmount } from 'svelte';
-import Toolbar from './components/Toolbar.svelte';
-
-/**
- * Initialize the toolbar
- */
-export function initToolbar(): (() => void) | null {
-  // Ensure __heroshot namespace exists
-  if (!globalThis.__heroshot) {
-    globalThis.__heroshot = {
-      initialized: false,
-      screenshots: [],
-      pendingJob: null,
-      emit: () => {
-        // No-op if not injected by CLI
-      },
-    };
-  }
-
-  // Prevent double initialization
-  if (globalThis.__heroshot.initialized) {
-    return null;
-  }
-  globalThis.__heroshot.initialized = true;
-
-  // Create mount target with Shadow DOM
-  // We use Shadow DOM to encapsulate styles - this toolbar is injected into
-  // arbitrary websites, and without style isolation the host page's CSS could
-  // override our styles. Shadow DOM provides complete style encapsulation,
-  // eliminating the need for !important declarations.
-  const host = document.createElement('div');
-  host.id = 'heroshot-root';
-  document.body.append(host);
-
-  const shadow = host.attachShadow({ mode: 'closed' });
-
-  // Mount Svelte component into shadow root
-  let component: ReturnType<typeof mount>;
-  try {
-    component = mount(Toolbar, {
-      target: shadow,
-      props: {
-        initialScreenshots: [...globalThis.__heroshot.screenshots],
-        pendingJob: globalThis.__heroshot.pendingJob,
-      },
-    });
-  } catch {
-    return null;
-  }
-
-  /**
-   * Cleanup function to remove toolbar
-   */
-  function cleanup(): void {
-    void unmount(component);
-    host.remove();
-
-    if (globalThis.__heroshot) {
-      globalThis.__heroshot.initialized = false;
-    }
-  }
-
-  return cleanup;
-}
-
-// Auto-initialize when script loads
-initToolbar();

package/toolbar/src/svelte.d.ts

@@ -1,6 +0,0 @@
-import type { Component } from 'svelte';
-
-declare module '*.svelte' {
-  const component: Component;
-  export default component;
-}

package/toolbar/src/types.ts

@@ -1,43 +0,0 @@
-/**
- * Screenshot item stored in the toolbar
- */
-export interface ScreenshotItem {
-  id: string;
-  name: string;
-  url: string;
-  selector: string;
-}
-
-/**
- * Job types that CLI sends to toolbar
- */
-export type ToolbarJob =
-  | { type: 'highlight'; selector: string }
-  | { type: 'navigate-and-highlight'; url: string; selector: string };
-
-/**
- * Event types that toolbar sends to CLI
- */
-export type ToolbarEvent =
-  | { type: 'screenshot-added'; data: ScreenshotItem }
-  | { type: 'screenshot-selected'; id: string; url: string; selector: string }
-  | { type: 'screenshot-removed'; id: string }
-  | { type: 'job-complete' }
-  | { type: 'done' };
-
-/**
- * Global heroshot namespace
- */
-export interface HeroshotGlobal {
-  initialized: boolean;
-  screenshots: ScreenshotItem[];
-  pendingJob: ToolbarJob | null;
-  emit: (event: ToolbarEvent) => void;
-}
-
-/**
- * Extended globalThis interface
- */
-declare global {
-  var __heroshot: HeroshotGlobal | undefined;
-}

package/toolbar/svelte.config.js

@@ -1,8 +0,0 @@
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-
-export default {
-  preprocess: vitePreprocess(),
-  compilerOptions: {
-    css: 'injected',
-  },
-};

package/toolbar/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": ["vitest/globals"]
-  },
-  "include": ["src/**/*.ts", "src/**/*.svelte"],
-  "exclude": ["node_modules", "dist"]
-}

package/toolbar/vite.config.ts

@@ -1,52 +0,0 @@
-import { resolve } from 'node:path';
-import { svelte } from '@sveltejs/vite-plugin-svelte';
-import { defineConfig } from 'vitest/config';
-
-export default defineConfig({
-  root: __dirname,
-  plugins: [
-    svelte({
-      compilerOptions: {
-        // Generate JS that works without Svelte runtime
-        css: 'injected',
-      },
-    }),
-  ],
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src/main.ts'),
-      name: 'HeroshotToolbar',
-      formats: ['iife'],
-      fileName: () => 'toolbar.js',
-    },
-    outDir: 'dist',
-    emptyOutDir: true,
-    minify: false,
-    rollupOptions: {
-      output: {
-        // Ensure the IIFE is self-executing
-        extend: true,
-        // Inline all dynamic imports
-        inlineDynamicImports: true,
-      },
-    },
-  },
-  test: {
-    globals: true,
-    environment: 'jsdom',
-    include: ['src/**/*.test.ts'],
-    coverage: {
-      provider: 'v8',
-      reporter: ['text', 'html', 'lcov'],
-      reportsDirectory: '../coverage/toolbar',
-      include: ['src/**/*.ts', 'src/**/*.svelte'],
-      exclude: ['src/**/*.d.ts'],
-      thresholds: {
-        lines: 90,
-        functions: 90,
-        branches: 90,
-        statements: 90,
-      },
-    },
-  },
-});

package/tsconfig.json

@@ -1,34 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "lib": ["ES2022"],
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "forceConsistentCasingInFileNames": true,
-    "skipLibCheck": true,
-    "noEmit": true,
-
-    // Strict type checking
-    "strict": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "strictFunctionTypes": true,
-    "strictBindCallApply": true,
-    "strictPropertyInitialization": true,
-    "noImplicitThis": true,
-    "alwaysStrict": true,
-
-    // Additional strict checks
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedIndexedAccess": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true
-  },
-  "include": ["src/**/*.ts", "tests/**/*.ts"],
-  "exclude": ["node_modules", "dist"]
-}

package/tsup.config.ts

@@ -1,12 +0,0 @@
-import { defineConfig } from 'tsup';
-
-export default defineConfig({
-  entry: ['src/cli.ts'],
-  format: ['esm'],
-  dts: true,
-  clean: true,
-  shims: true,
-  banner: {
-    js: '#!/usr/bin/env node',
-  },
-});

package/vitest.config.ts

@@ -1,15 +0,0 @@
-import { defineConfig } from 'vitest/config';
-
-export default defineConfig({
-  test: {
-    globals: true,
-    include: ['src/**/*.test.ts', 'tests/**/*.test.ts'],
-    coverage: {
-      provider: 'v8',
-      exclude: ['src/index.ts', 'src/types.ts', 'vitest.config.ts', 'eslint.config.js', 'dist/**'],
-      thresholds: {
-        lines: 90,
-      },
-    },
-  },
-});