playwriter 0.0.25 → 0.0.29

package/dist/editor-examples.js

@@ -0,0 +1,124 @@
+import { page, getCDPSession, createEditor, console } from './debugger-examples-types.js';
+// Example: List available scripts
+async function listScripts() {
+    const cdp = await getCDPSession({ page });
+    const editor = createEditor({ cdp });
+    await editor.enable();
+    const scripts = editor.list({ pattern: /app/ });
+    console.log(scripts);
+}
+// Example: Read a script with line numbers
+async function readScript() {
+    const cdp = await getCDPSession({ page });
+    const editor = createEditor({ cdp });
+    await editor.enable();
+    const { content, totalLines } = await editor.read({
+        url: 'https://example.com/app.js',
+    });
+    console.log('Total lines:', totalLines);
+    console.log(content);
+    const { content: partial } = await editor.read({
+        url: 'https://example.com/app.js',
+        offset: 100,
+        limit: 50,
+    });
+    console.log(partial);
+}
+// Example: Edit a script (exact string replacement)
+async function editScript() {
+    const cdp = await getCDPSession({ page });
+    const editor = createEditor({ cdp });
+    await editor.enable();
+    await editor.edit({
+        url: 'https://example.com/app.js',
+        oldString: 'const DEBUG = false',
+        newString: 'const DEBUG = true',
+    });
+    const dryRunResult = await editor.edit({
+        url: 'https://example.com/app.js',
+        oldString: 'old code',
+        newString: 'new code',
+        dryRun: true,
+    });
+    console.log('Dry run result:', dryRunResult);
+}
+// Example: Search across all scripts
+async function searchScripts() {
+    const cdp = await getCDPSession({ page });
+    const editor = createEditor({ cdp });
+    await editor.enable();
+    const matches = await editor.grep({ regex: /console\.log/ });
+    console.log(matches);
+    const todoMatches = await editor.grep({
+        regex: /TODO|FIXME/i,
+        pattern: /app/,
+    });
+    console.log(todoMatches);
+}
+// Example: Write entire script content
+async function writeScript() {
+    const cdp = await getCDPSession({ page });
+    const editor = createEditor({ cdp });
+    await editor.enable();
+    const { content } = await editor.read({ url: 'https://example.com/app.js' });
+    const newContent = content.replace(/console\.log/g, 'console.debug');
+    await editor.write({
+        url: 'https://example.com/app.js',
+        content: newContent,
+    });
+}
+// Example: Edit an inline script (scripts without URL get inline://{id} URLs)
+async function editInlineScript() {
+    const cdp = await getCDPSession({ page });
+    const editor = createEditor({ cdp });
+    await editor.enable();
+    const matches = await editor.grep({ regex: /myFunction/ });
+    if (matches.length > 0) {
+        const { url } = matches[0];
+        console.log('Found in:', url);
+        await editor.edit({
+            url,
+            oldString: 'return false',
+            newString: 'return true',
+        });
+    }
+}
+// Example: List and read CSS stylesheets
+async function readStylesheet() {
+    const cdp = await getCDPSession({ page });
+    const editor = createEditor({ cdp });
+    await editor.enable();
+    const stylesheets = await editor.list({ pattern: /\.css/ });
+    console.log('Stylesheets:', stylesheets);
+    if (stylesheets.length > 0) {
+        const { content, totalLines } = await editor.read({
+            url: stylesheets[0],
+        });
+        console.log('Total lines:', totalLines);
+        console.log(content);
+    }
+}
+// Example: Edit a CSS stylesheet
+async function editStylesheet() {
+    const cdp = await getCDPSession({ page });
+    const editor = createEditor({ cdp });
+    await editor.enable();
+    await editor.edit({
+        url: 'https://example.com/styles.css',
+        oldString: 'color: red',
+        newString: 'color: blue',
+    });
+}
+// Example: Search CSS for specific properties
+async function searchStyles() {
+    const cdp = await getCDPSession({ page });
+    const editor = createEditor({ cdp });
+    await editor.enable();
+    const matches = await editor.grep({
+        regex: /background-color/,
+        pattern: /\.css/,
+    });
+    console.log(matches);
+}
+export { listScripts, readScript, editScript, searchScripts, writeScript, editInlineScript, readStylesheet, editStylesheet, searchStyles };
+//# sourceMappingURL=editor-examples.js.map

package/dist/editor-examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-examples.js","sourceRoot":"","sources":["../src/editor-examples.ts"],"names":[],"mappings":"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"}

package/dist/editor.d.ts

@@ -0,0 +1,203 @@
+import type { CDPSession } from './cdp-session.js';
+export interface ReadResult {
+    content: string;
+    totalLines: number;
+    startLine: number;
+    endLine: number;
+}
+export interface SearchMatch {
+    url: string;
+    lineNumber: number;
+    lineContent: string;
+}
+export interface EditResult {
+    success: boolean;
+    stackChanged?: boolean;
+}
+/**
+ * A class for viewing and editing web page scripts via Chrome DevTools Protocol.
+ * Provides a Claude Code-like interface: list, read, edit, grep.
+ *
+ * Edits are in-memory only and persist until page reload. They modify the running
+ * V8 instance but are not saved to disk or server.
+ *
+ * @example
+ * ```ts
+ * const cdp = await getCDPSession({ page })
+ * const editor = new Editor({ cdp })
+ * await editor.enable()
+ *
+ * // List available scripts
+ * const scripts = editor.list({ search: 'app' })
+ *
+ * // Read a script
+ * const { content } = await editor.read({ url: 'https://example.com/app.js' })
+ *
+ * // Edit a script
+ * await editor.edit({
+ *   url: 'https://example.com/app.js',
+ *   oldString: 'console.log("old")',
+ *   newString: 'console.log("new")'
+ * })
+ * ```
+ */
+export declare class Editor {
+    private cdp;
+    private enabled;
+    private scripts;
+    private stylesheets;
+    private sourceCache;
+    constructor({ cdp }: {
+        cdp: CDPSession;
+    });
+    private setupEventListeners;
+    /**
+     * Enables the editor. Must be called before other methods.
+     * Scripts are collected from Debugger.scriptParsed events.
+     * Reload the page after enabling to capture all scripts.
+     */
+    enable(): Promise<void>;
+    private getIdByUrl;
+    /**
+     * Lists available script and stylesheet URLs. Use pattern to filter by regex.
+     * Automatically enables the editor if not already enabled.
+     *
+     * @param options - Options
+     * @param options.pattern - Optional regex to filter URLs
+     * @returns Array of URLs
+     *
+     * @example
+     * ```ts
+     * // List all scripts and stylesheets
+     * const urls = await editor.list()
+     *
+     * // List only JS files
+     * const jsFiles = await editor.list({ pattern: /\.js/ })
+     *
+     * // List only CSS files
+     * const cssFiles = await editor.list({ pattern: /\.css/ })
+     *
+     * // Search for specific scripts
+     * const appScripts = await editor.list({ pattern: /app/ })
+     * ```
+     */
+    list({ pattern }?: {
+        pattern?: RegExp;
+    }): Promise<string[]>;
+    /**
+     * Reads a script or stylesheet's source code by URL.
+     * Returns line-numbered content like Claude Code's Read tool.
+     * For inline scripts, use the `inline://` URL from list() or grep().
+     *
+     * @param options - Options
+     * @param options.url - Script or stylesheet URL (inline scripts have `inline://{id}` URLs)
+     * @param options.offset - Line number to start from (0-based, default 0)
+     * @param options.limit - Number of lines to return (default 2000)
+     * @returns Content with line numbers, total lines, and range info
+     *
+     * @example
+     * ```ts
+     * // Read by URL
+     * const { content, totalLines } = await editor.read({
+     *   url: 'https://example.com/app.js'
+     * })
+     *
+     * // Read a CSS file
+     * const { content } = await editor.read({ url: 'https://example.com/styles.css' })
+     *
+     * // Read lines 100-200
+     * const { content } = await editor.read({
+     *   url: 'https://example.com/app.js',
+     *   offset: 100,
+     *   limit: 100
+     * })
+     * ```
+     */
+    read({ url, offset, limit }: {
+        url: string;
+        offset?: number;
+        limit?: number;
+    }): Promise<ReadResult>;
+    private getSource;
+    /**
+     * Edits a script or stylesheet by replacing oldString with newString.
+     * Like Claude Code's Edit tool - performs exact string replacement.
+     *
+     * @param options - Options
+     * @param options.url - Script or stylesheet URL (inline scripts have `inline://{id}` URLs)
+     * @param options.oldString - Exact string to find and replace
+     * @param options.newString - Replacement string
+     * @param options.dryRun - If true, validate without applying (default false)
+     * @returns Result with success status
+     *
+     * @example
+     * ```ts
+     * // Replace a string in JS
+     * await editor.edit({
+     *   url: 'https://example.com/app.js',
+     *   oldString: 'const DEBUG = false',
+     *   newString: 'const DEBUG = true'
+     * })
+     *
+     * // Edit CSS
+     * await editor.edit({
+     *   url: 'https://example.com/styles.css',
+     *   oldString: 'color: red',
+     *   newString: 'color: blue'
+     * })
+     * ```
+     */
+    edit({ url, oldString, newString, dryRun, }: {
+        url: string;
+        oldString: string;
+        newString: string;
+        dryRun?: boolean;
+    }): Promise<EditResult>;
+    private setSource;
+    /**
+     * Searches for a regex across all scripts and stylesheets.
+     * Like Claude Code's Grep tool - returns matching lines with context.
+     *
+     * @param options - Options
+     * @param options.regex - Regular expression to search for in file contents
+     * @param options.pattern - Optional regex to filter which URLs to search
+     * @returns Array of matches with url, line number, and line content
+     *
+     * @example
+     * ```ts
+     * // Search all scripts and stylesheets for "color"
+     * const matches = await editor.grep({ regex: /color/ })
+     *
+     * // Search only CSS files
+     * const matches = await editor.grep({
+     *   regex: /background-color/,
+     *   pattern: /\.css/
+     * })
+     *
+     * // Regex search for console methods in JS
+     * const matches = await editor.grep({
+     *   regex: /console\.(log|error|warn)/,
+     *   pattern: /\.js/
+     * })
+     * ```
+     */
+    grep({ regex, pattern }: {
+        regex: RegExp;
+        pattern?: RegExp;
+    }): Promise<SearchMatch[]>;
+    /**
+     * Writes entire content to a script or stylesheet, replacing all existing code.
+     * Use with caution - prefer edit() for targeted changes.
+     *
+     * @param options - Options
+     * @param options.url - Script or stylesheet URL (inline scripts have `inline://{id}` URLs)
+     * @param options.content - New content
+     * @param options.dryRun - If true, validate without applying (default false, only works for JS)
+     */
+    write({ url, content, dryRun }: {
+        url: string;
+        content: string;
+        dryRun?: boolean;
+    }): Promise<EditResult>;
+}
+//# sourceMappingURL=editor.d.ts.map

package/dist/editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../src/editor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAElD,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,OAAO,CAAA;IAChB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,MAAM;IACjB,OAAO,CAAC,GAAG,CAAY;IACvB,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,OAAO,CAA4B;IAC3C,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,WAAW,CAA4B;gBAEnC,EAAE,GAAG,EAAE,EAAE;QAAE,GAAG,EAAE,UAAU,CAAA;KAAE;IAKxC,OAAO,CAAC,mBAAmB;IAoB3B;;;;OAIG;IACG,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAkC7B,OAAO,CAAC,UAAU;IAclB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACG,IAAI,CAAC,EAAE,OAAO,EAAE,GAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAO,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;IAcrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA4BG;IACG,IAAI,CAAC,EAAE,GAAG,EAAE,MAAU,EAAE,KAAY,EAAE,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,UAAU,CAAC;YAqBtG,SAAS;IAmBvB;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACG,IAAI,CAAC,EACT,GAAG,EACH,SAAS,EACT,SAAS,EACT,MAAc,GACf,EAAE;QACD,GAAG,EAAE,MAAM,CAAA;QACX,SAAS,EAAE,MAAM,CAAA;QACjB,SAAS,EAAE,MAAM,CAAA;QACjB,MAAM,CAAC,EAAE,OAAO,CAAA;KACjB,GAAG,OAAO,CAAC,UAAU,CAAC;YAiBT,SAAS;IAuBvB;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACG,IAAI,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC;IA+B3F;;;;;;;;OAQG;IACG,KAAK,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,MAAc,EAAE,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,OAAO,CAAC,UAAU,CAAC;CAKvH"}

package/dist/editor.js

@@ -0,0 +1,335 @@
+/**
+ * A class for viewing and editing web page scripts via Chrome DevTools Protocol.
+ * Provides a Claude Code-like interface: list, read, edit, grep.
+ *
+ * Edits are in-memory only and persist until page reload. They modify the running
+ * V8 instance but are not saved to disk or server.
+ *
+ * @example
+ * ```ts
+ * const cdp = await getCDPSession({ page })
+ * const editor = new Editor({ cdp })
+ * await editor.enable()
+ *
+ * // List available scripts
+ * const scripts = editor.list({ search: 'app' })
+ *
+ * // Read a script
+ * const { content } = await editor.read({ url: 'https://example.com/app.js' })
+ *
+ * // Edit a script
+ * await editor.edit({
+ *   url: 'https://example.com/app.js',
+ *   oldString: 'console.log("old")',
+ *   newString: 'console.log("new")'
+ * })
+ * ```
+ */
+export class Editor {
+    cdp;
+    enabled = false;
+    scripts = new Map();
+    stylesheets = new Map();
+    sourceCache = new Map();
+    constructor({ cdp }) {
+        this.cdp = cdp;
+        this.setupEventListeners();
+    }
+    setupEventListeners() {
+        this.cdp.on('Debugger.scriptParsed', (params) => {
+            if (!params.url.startsWith('chrome') && !params.url.startsWith('devtools')) {
+                const url = params.url || `inline://${params.scriptId}`;
+                this.scripts.set(url, params.scriptId);
+                this.sourceCache.delete(params.scriptId);
+            }
+        });
+        this.cdp.on('CSS.styleSheetAdded', (params) => {
+            const header = params.header;
+            if (header.sourceURL?.startsWith('chrome') || header.sourceURL?.startsWith('devtools')) {
+                return;
+            }
+            const url = header.sourceURL || `inline-css://${header.styleSheetId}`;
+            this.stylesheets.set(url, header.styleSheetId);
+            this.sourceCache.delete(header.styleSheetId);
+        });
+    }
+    /**
+     * Enables the editor. Must be called before other methods.
+     * Scripts are collected from Debugger.scriptParsed events.
+     * Reload the page after enabling to capture all scripts.
+     */
+    async enable() {
+        if (this.enabled) {
+            return;
+        }
+        await this.cdp.send('Debugger.disable');
+        await this.cdp.send('CSS.disable');
+        this.scripts.clear();
+        this.stylesheets.clear();
+        this.sourceCache.clear();
+        const resourcesReady = new Promise((resolve) => {
+            let timeout;
+            const listener = () => {
+                clearTimeout(timeout);
+                timeout = setTimeout(() => {
+                    this.cdp.off('Debugger.scriptParsed', listener);
+                    this.cdp.off('CSS.styleSheetAdded', listener);
+                    resolve();
+                }, 100);
+            };
+            this.cdp.on('Debugger.scriptParsed', listener);
+            this.cdp.on('CSS.styleSheetAdded', listener);
+            timeout = setTimeout(() => {
+                this.cdp.off('Debugger.scriptParsed', listener);
+                this.cdp.off('CSS.styleSheetAdded', listener);
+                resolve();
+            }, 100);
+        });
+        await this.cdp.send('Debugger.enable');
+        await this.cdp.send('DOM.enable');
+        await this.cdp.send('CSS.enable');
+        await resourcesReady;
+        this.enabled = true;
+    }
+    getIdByUrl(url) {
+        const scriptId = this.scripts.get(url);
+        if (scriptId) {
+            return { scriptId };
+        }
+        const styleSheetId = this.stylesheets.get(url);
+        if (styleSheetId) {
+            return { styleSheetId };
+        }
+        const allUrls = [...Array.from(this.scripts.keys()), ...Array.from(this.stylesheets.keys())];
+        const available = allUrls.slice(0, 5);
+        throw new Error(`Resource not found: ${url}\nAvailable: ${available.join(', ')}${allUrls.length > 5 ? '...' : ''}`);
+    }
+    /**
+     * Lists available script and stylesheet URLs. Use pattern to filter by regex.
+     * Automatically enables the editor if not already enabled.
+     *
+     * @param options - Options
+     * @param options.pattern - Optional regex to filter URLs
+     * @returns Array of URLs
+     *
+     * @example
+     * ```ts
+     * // List all scripts and stylesheets
+     * const urls = await editor.list()
+     *
+     * // List only JS files
+     * const jsFiles = await editor.list({ pattern: /\.js/ })
+     *
+     * // List only CSS files
+     * const cssFiles = await editor.list({ pattern: /\.css/ })
+     *
+     * // Search for specific scripts
+     * const appScripts = await editor.list({ pattern: /app/ })
+     * ```
+     */
+    async list({ pattern } = {}) {
+        await this.enable();
+        const urls = [...Array.from(this.scripts.keys()), ...Array.from(this.stylesheets.keys())];
+        if (!pattern) {
+            return urls;
+        }
+        return urls.filter((url) => {
+            const matches = pattern.test(url);
+            pattern.lastIndex = 0;
+            return matches;
+        });
+    }
+    /**
+     * Reads a script or stylesheet's source code by URL.
+     * Returns line-numbered content like Claude Code's Read tool.
+     * For inline scripts, use the `inline://` URL from list() or grep().
+     *
+     * @param options - Options
+     * @param options.url - Script or stylesheet URL (inline scripts have `inline://{id}` URLs)
+     * @param options.offset - Line number to start from (0-based, default 0)
+     * @param options.limit - Number of lines to return (default 2000)
+     * @returns Content with line numbers, total lines, and range info
+     *
+     * @example
+     * ```ts
+     * // Read by URL
+     * const { content, totalLines } = await editor.read({
+     *   url: 'https://example.com/app.js'
+     * })
+     *
+     * // Read a CSS file
+     * const { content } = await editor.read({ url: 'https://example.com/styles.css' })
+     *
+     * // Read lines 100-200
+     * const { content } = await editor.read({
+     *   url: 'https://example.com/app.js',
+     *   offset: 100,
+     *   limit: 100
+     * })
+     * ```
+     */
+    async read({ url, offset = 0, limit = 2000 }) {
+        await this.enable();
+        const id = this.getIdByUrl(url);
+        const source = await this.getSource(id);
+        const lines = source.split('\n');
+        const totalLines = lines.length;
+        const startLine = Math.min(offset, totalLines);
+        const endLine = Math.min(offset + limit, totalLines);
+        const selectedLines = lines.slice(startLine, endLine);
+        const content = selectedLines.map((line, i) => `${String(startLine + i + 1).padStart(5)}| ${line}`).join('\n');
+        return {
+            content,
+            totalLines,
+            startLine: startLine + 1,
+            endLine,
+        };
+    }
+    async getSource(id) {
+        if ('styleSheetId' in id) {
+            const cached = this.sourceCache.get(id.styleSheetId);
+            if (cached) {
+                return cached;
+            }
+            const response = await this.cdp.send('CSS.getStyleSheetText', { styleSheetId: id.styleSheetId });
+            this.sourceCache.set(id.styleSheetId, response.text);
+            return response.text;
+        }
+        const cached = this.sourceCache.get(id.scriptId);
+        if (cached) {
+            return cached;
+        }
+        const response = await this.cdp.send('Debugger.getScriptSource', { scriptId: id.scriptId });
+        this.sourceCache.set(id.scriptId, response.scriptSource);
+        return response.scriptSource;
+    }
+    /**
+     * Edits a script or stylesheet by replacing oldString with newString.
+     * Like Claude Code's Edit tool - performs exact string replacement.
+     *
+     * @param options - Options
+     * @param options.url - Script or stylesheet URL (inline scripts have `inline://{id}` URLs)
+     * @param options.oldString - Exact string to find and replace
+     * @param options.newString - Replacement string
+     * @param options.dryRun - If true, validate without applying (default false)
+     * @returns Result with success status
+     *
+     * @example
+     * ```ts
+     * // Replace a string in JS
+     * await editor.edit({
+     *   url: 'https://example.com/app.js',
+     *   oldString: 'const DEBUG = false',
+     *   newString: 'const DEBUG = true'
+     * })
+     *
+     * // Edit CSS
+     * await editor.edit({
+     *   url: 'https://example.com/styles.css',
+     *   oldString: 'color: red',
+     *   newString: 'color: blue'
+     * })
+     * ```
+     */
+    async edit({ url, oldString, newString, dryRun = false, }) {
+        await this.enable();
+        const id = this.getIdByUrl(url);
+        const source = await this.getSource(id);
+        const matchCount = source.split(oldString).length - 1;
+        if (matchCount === 0) {
+            throw new Error(`oldString not found in ${url}`);
+        }
+        if (matchCount > 1) {
+            throw new Error(`oldString found ${matchCount} times in ${url}. Provide more context to make it unique.`);
+        }
+        const newSource = source.replace(oldString, newString);
+        return this.setSource(id, newSource, dryRun);
+    }
+    async setSource(id, content, dryRun = false) {
+        if ('styleSheetId' in id) {
+            await this.cdp.send('CSS.setStyleSheetText', { styleSheetId: id.styleSheetId, text: content });
+            if (!dryRun) {
+                this.sourceCache.set(id.styleSheetId, content);
+            }
+            return { success: true };
+        }
+        const response = await this.cdp.send('Debugger.setScriptSource', {
+            scriptId: id.scriptId,
+            scriptSource: content,
+            dryRun,
+        });
+        if (!dryRun) {
+            this.sourceCache.set(id.scriptId, content);
+        }
+        return { success: true, stackChanged: response.stackChanged };
+    }
+    /**
+     * Searches for a regex across all scripts and stylesheets.
+     * Like Claude Code's Grep tool - returns matching lines with context.
+     *
+     * @param options - Options
+     * @param options.regex - Regular expression to search for in file contents
+     * @param options.pattern - Optional regex to filter which URLs to search
+     * @returns Array of matches with url, line number, and line content
+     *
+     * @example
+     * ```ts
+     * // Search all scripts and stylesheets for "color"
+     * const matches = await editor.grep({ regex: /color/ })
+     *
+     * // Search only CSS files
+     * const matches = await editor.grep({
+     *   regex: /background-color/,
+     *   pattern: /\.css/
+     * })
+     *
+     * // Regex search for console methods in JS
+     * const matches = await editor.grep({
+     *   regex: /console\.(log|error|warn)/,
+     *   pattern: /\.js/
+     * })
+     * ```
+     */
+    async grep({ regex, pattern }) {
+        await this.enable();
+        const matches = [];
+        const urls = await this.list({ pattern });
+        for (const url of urls) {
+            let source;
+            try {
+                const id = this.getIdByUrl(url);
+                source = await this.getSource(id);
+            }
+            catch {
+                continue;
+            }
+            const lines = source.split('\n');
+            for (let i = 0; i < lines.length; i++) {
+                if (regex.test(lines[i])) {
+                    matches.push({
+                        url,
+                        lineNumber: i + 1,
+                        lineContent: lines[i].trim().slice(0, 200),
+                    });
+                    regex.lastIndex = 0;
+                }
+            }
+        }
+        return matches;
+    }
+    /**
+     * Writes entire content to a script or stylesheet, replacing all existing code.
+     * Use with caution - prefer edit() for targeted changes.
+     *
+     * @param options - Options
+     * @param options.url - Script or stylesheet URL (inline scripts have `inline://{id}` URLs)
+     * @param options.content - New content
+     * @param options.dryRun - If true, validate without applying (default false, only works for JS)
+     */
+    async write({ url, content, dryRun = false }) {
+        await this.enable();
+        const id = this.getIdByUrl(url);
+        return this.setSource(id, content, dryRun);
+    }
+}
+//# sourceMappingURL=editor.js.map