@logicsync/pixelprobe 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 LogicSync
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,377 @@
+# pixelprobe
+
+Responsive visual & style diff for web page sections — CLI + MCP.
+
+## What it does
+
+You're rebuilding a section from a live website. You want to know: does my local build match the original? Where are the styling differences? At which breakpoints do things break?
+
+`pixelprobe` answers this by comparing **computed styles**, **layout metrics**, and **pixel-level screenshots** between a source URL and a target URL, across multiple responsive breakpoints.
+
+It works on any element — full page sections, individual cards, buttons, navbars, footers, or any element you can target with a CSS selector.
+
+## Install
+
+```bash
+npm install -g pixelprobe
+
+# Or use directly with npx
+npx pixelprobe compare --help
+```
+
+Requires Node.js 18+. On first run, Playwright will download a Chromium binary (~110MB) if one isn't already installed. You can also install it manually:
+
+```bash
+npx playwright install chromium
+```
+
+## Quick Start
+
+```bash
+# Compare a hero section between production and your local build
+pixelprobe compare \
+  --source https://example.com \
+  --target http://localhost:3000 \
+  --selector ".hero-section"
+```
+
+This will compare the `.hero-section` element at 4 default breakpoints (mobile, tablet, desktop, desktop-lg) and output a color-coded terminal report plus HTML and JSON reports.
+
+## CLI Usage
+
+### `pixelprobe compare`
+
+The main command. Compares a section between two URLs across breakpoints.
+
+```bash
+pixelprobe compare \
+  --source <url> \
+  --target <url> \
+  --selector <css-selector> \
+  [options]
+```
+
+#### Options
+
+| Flag | Short | Description | Default |
+|------|-------|-------------|---------|
+| `--source` | `-s` | Source URL (the reference/original page) | required |
+| `--target` | `-t` | Target URL (your local build or new version) | required |
+| `--selector` | `-S` | CSS selector for the section on the source page | required |
+| `--target-selector` | `-T` | CSS selector on the target page (if different from source) | same as `--selector` |
+| `--index` | `-i` | Element index if selector matches multiple elements | `0` |
+| `--breakpoints` | `-b` | Comma-separated breakpoint names or `WIDTHxHEIGHT` | `mobile,tablet,desktop,desktop-lg` |
+| `--output` | `-o` | Output directory for reports | `./pixelprobe-output` |
+| `--format` | `-f` | Output format: `json`, `html`, or `both` | `both` |
+| `--threshold` | | Pixel comparison sensitivity (0-1, lower = stricter) | `0.1` |
+| `--wait` | `-w` | Wait N milliseconds after page load before capturing | `0` |
+| `--json` | | Output compact JSON to stdout (for piping to other tools) | `false` |
+| `--headed` | | Run browser in visible (non-headless) mode | `false` |
+| `--no-visual` | | Skip pixel-level visual comparison | `false` |
+| `--no-styles` | | Skip computed style comparison | `false` |
+| `--no-layout` | | Skip layout metrics comparison | `false` |
+
+### `pixelprobe enumerate`
+
+List all elements matching a selector on a page. Useful when your selector matches multiple elements and you need to find the right `--index`.
+
+```bash
+pixelprobe enumerate --url <url> --selector <css-selector>
+```
+
+Example output:
+
+```
+Found 3 element(s) matching ".card":
+
+  [0] <div> (320×200 at 32,400) — "Pricing Plan A..."
+  [1] <div> (320×200 at 384,400) — "Pricing Plan B..."
+  [2] <div> (320×200 at 736,400) — "Pricing Plan C..."
+
+Use --index N with the compare command to select a specific element.
+```
+
+### `pixelprobe breakpoints`
+
+List all available breakpoint presets.
+
+```
+Available breakpoint presets:
+
+  mobile-sm      320×568   Mobile Small
+  mobile         375×812   Mobile
+  mobile-lg      428×926   Mobile Large
+  tablet         768×1024  Tablet
+  tablet-lg      1024×1366 Tablet Large
+  desktop        1280×800  Desktop
+  desktop-lg     1920×1080 Desktop Large
+  desktop-xl     2560×1440 Desktop XL
+```
+
+Custom breakpoints use `WIDTHxHEIGHT` format and can be mixed with presets:
+
+```bash
+--breakpoints "mobile,tablet,1440x900,1920x1080"
+```
+
+## Examples
+
+### Compare a header with different selectors on each site
+
+When source and target use different markup (e.g. WordPress vs a custom build):
+
+```bash
+pixelprobe compare \
+  --source "https://mysite.com" \
+  --target "http://localhost:3000" \
+  --selector "#masthead" \
+  --target-selector "header" \
+  --breakpoints "384x812,768x1024,1024x1366,1280x800,1440x900,1920x1080" \
+  --wait 3000
+```
+
+### Compare a specific card in a grid
+
+```bash
+# First, find which index your card is at
+pixelprobe enumerate --url https://mysite.com --selector ".pricing-card"
+
+# Then compare the 2nd card (index 1)
+pixelprobe compare \
+  --source "https://mysite.com" \
+  --target "http://localhost:3000" \
+  --selector ".pricing-card" \
+  --index 1
+```
+
+### Pipe JSON output to another tool
+
+```bash
+# Get machine-readable output for CI/CD
+pixelprobe compare \
+  --source "https://mysite.com" \
+  --target "http://localhost:3000" \
+  --selector ".hero" \
+  --json | jq '.summary'
+```
+
+Exit codes: `0` = no differences (pass), `1` = differences found, `2` = error.
+
+### Compare with strict pixel matching
+
+```bash
+pixelprobe compare \
+  --source "https://mysite.com" \
+  --target "http://localhost:3000" \
+  --selector ".hero" \
+  --threshold 0.05
+```
+
+### Style-only comparison (skip screenshots)
+
+```bash
+pixelprobe compare \
+  --source "https://mysite.com" \
+  --target "http://localhost:3000" \
+  --selector ".footer" \
+  --no-visual
+```
+
+## Output
+
+Each run creates a timestamped directory inside your output folder:
+
+```
+pixelprobe-output/
+├── run_2026-03-25_14-30-22_a1b2c3d4/
+│   ├── comparison-a1b2c3d4.json      # Full JSON report
+│   ├── report-a1b2c3d4.html          # Interactive HTML report
+│   ├── diff-mobile.png               # Visual diff per breakpoint
+│   ├── diff-tablet.png
+│   ├── diff-desktop.png
+│   └── diff-desktop-lg.png
+├── run_2026-03-25_15-10-45_e5f6g7h8/
+│   └── ...
+```
+
+### Console output
+
+Color-coded terminal output with severity indicators (critical, warning, info) for each breakpoint. Shows style property diffs, layout dimension changes, and pixel diff percentages.
+
+### HTML report
+
+Self-contained interactive report with breakpoint tabs, visual diff images, collapsible style diff tables, and layout comparison tables. Open directly in a browser.
+
+### JSON report
+
+Machine-readable diff data. Includes per-breakpoint style differences, layout deviations, pixel diff metrics, and summary statistics. Useful for CI/CD integration and automated pipelines.
+
+## What it compares
+
+### Style Comparison
+
+Extracts `getComputedStyle()` for layout-critical CSS properties organized into categories: layout, flexbox, grid, spacing, sizing, typography, colors, borders, effects, and positioning.
+
+Each difference is classified by severity based on visual impact:
+
+- **Critical** — display, position, width, height, flex-direction, grid-template, font-size, visibility
+- **Warning** — margin, padding, font-family, font-weight, color, background-color, border, gap, alignment
+- **Info** — everything else (transitions, animations, minor effects)
+
+### Pixel Comparison
+
+Uses [pixelmatch](https://github.com/mapbox/pixelmatch) for pixel-level screenshot comparison. Generates diff images highlighting changed pixels in red. Handles size mismatches by padding the smaller image with magenta so dimensional differences are immediately visible.
+
+### Layout Comparison
+
+Compares the box model: bounding box dimensions, margin, padding, border widths, and scroll dimensions. Reports both absolute (px) and percentage deviations. Thresholds: 10px+ = critical, 3px+ = warning.
+
+## MCP Server (for AI Agents)
+
+`pixelprobe` includes an MCP (Model Context Protocol) server so AI agents can use it as a tool.
+
+### Setup
+
+Add to your Claude Desktop or Claude Code MCP config:
+
+```json
+{
+  "mcpServers": {
+    "pixelprobe": {
+      "command": "node",
+      "args": ["/path/to/pixelprobe/dist/mcp/server.js"]
+    }
+  }
+}
+```
+
+### MCP Tools
+
+#### `compare_sections`
+
+Full comparison across breakpoints. Accepts `sourceUrl`, `targetUrl`, `selector`, `targetSelector`, `breakpoints`, `pixelThreshold`, and other options. Returns structured JSON diff and saves HTML/JSON reports.
+
+#### `capture_section`
+
+Inspect and enumerate elements matching a selector on a page. Useful for discovering element structure before running a comparison.
+
+#### `list_breakpoints`
+
+Returns all available breakpoint presets with their dimensions.
+
+## Programmatic API
+
+```typescript
+import { WebSectionComparator } from 'pixelprobe';
+
+const comparator = new WebSectionComparator({ headless: true });
+
+const result = await comparator.compare({
+  sourceUrl: 'https://example.com',
+  targetUrl: 'http://localhost:3000',
+  selector: '.hero-section',
+  targetSelector: '.hero',         // optional, if target uses different markup
+  breakpoints: ['mobile', 'tablet', 'desktop'],
+  pixelThreshold: 0.1,
+});
+
+console.log(result.summary);
+// {
+//   overallSeverity: 'warning',
+//   totalBreakpoints: 3,
+//   breakpointsWithDifferences: 2,
+//   totalStyleDifferences: 12,
+//   totalLayoutDifferences: 4,
+//   averagePixelDiff: 3.5,
+//   worstBreakpoint: 'mobile'
+// }
+
+// Enumerate elements before comparing
+const elements = await comparator.enumerate('https://example.com', '.card');
+// [{ index: 0, tagName: 'div', textPreview: '...', boundingBox: {...} }, ...]
+```
+
+## Tips
+
+- **Use `--wait`** for sites with animations, lazy-loading, or web fonts. 2000-3000ms is usually enough.
+- **Use `--headed`** to watch the browser and debug selector issues.
+- **Use `--target-selector`** when source and target have different markup (e.g. WordPress vs a custom React build).
+- **Use `enumerate`** first when you're unsure which element your selector is matching.
+- **Use `--no-visual`** to speed things up if you only care about computed style differences.
+- **Custom breakpoints** let you test at the exact widths your design uses: `--breakpoints "375x812,768x1024,1440x900"`.
+
+## Contributing
+
+Contributions are welcome! Here's how to get started:
+
+### Setup
+
+```bash
+git clone https://github.com/user/pixelprobe.git
+cd pixelprobe
+npm install
+npx playwright install chromium
+```
+
+### Development
+
+```bash
+# Type-check
+npx tsc --noEmit
+
+# Build
+npx tsc
+
+# Run CLI during development
+node dist/bin/pixelprobe.js compare --help
+
+# Run tests
+npm test
+```
+
+### Project Structure
+
+```
+src/
+├── types/           # TypeScript interfaces (config, comparison results)
+├── browser/         # Playwright browser lifecycle and viewport management
+├── extractor/       # Section selection, style extraction, screenshots
+├── comparator/      # Style diff, pixel diff, layout diff, aggregation
+├── reporter/        # JSON and HTML report generation
+├── cli/             # Terminal output formatting
+├── mcp/             # MCP server (tools and handlers)
+├── bin/             # CLI entry point
+├── core.ts          # Main orchestrator
+└── index.ts         # Public API exports
+```
+
+### Guidelines
+
+- Keep it dependency-light. The core should only need Playwright and pixelmatch.
+- All comparison logic lives in `src/comparator/`. Reporters just format what comparators produce.
+- Add types to `src/types/` before implementing. The types are the contract.
+- Test with real URLs when possible — CSS rendering has endless edge cases.
+- CLI and MCP are thin wrappers over `core.ts`. Don't put business logic in them.
+
+### Reporting Issues
+
+When filing a bug, please include:
+
+- The full command you ran
+- The error message or unexpected output
+- Your Node.js version (`node --version`)
+- Your OS
+
+## Roadmap
+
+- [ ] Pseudo-state comparison (hover, focus, active)
+- [ ] Watch mode for live development
+- [ ] CI/CD integration examples (GitHub Actions, GitLab CI)
+- [ ] Side-by-side source/target screenshots in HTML report
+- [ ] Config file support (`.pixelproberc.json`)
+- [ ] Accessibility attribute comparison
+- [ ] Performance metrics comparison (LCP, CLS)
+
+## License
+
+MIT License — see [LICENSE](LICENSE) for details.

package/dist/bin/pixelprobe.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=pixelprobe.d.ts.map

package/dist/bin/pixelprobe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixelprobe.d.ts","sourceRoot":"","sources":["../../src/bin/pixelprobe.ts"],"names":[],"mappings":""}

package/dist/bin/pixelprobe.js

@@ -0,0 +1,218 @@
+#!/usr/bin/env node
+import { join } from "node:path";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+import { WebSectionComparator } from "../core.js";
+import { JSONReporter } from "../reporter/JSONReporter.js";
+import { HTMLReporter } from "../reporter/HTMLReporter.js";
+import { formatResult } from "../cli/formatter.js";
+import { PRESET_BREAKPOINTS } from "../types/config.js";
+const cli = yargs(hideBin(process.argv))
+    .scriptName("pixelprobe")
+    .usage("$0 <command> [options]")
+    .command("compare", "Compare a section between source and target URLs across breakpoints", (y) => y
+    .option("source", {
+    alias: "s",
+    type: "string",
+    describe: "Source URL (the reference page)",
+    demandOption: true,
+})
+    .option("target", {
+    alias: "t",
+    type: "string",
+    describe: "Target URL (your local build)",
+    demandOption: true,
+})
+    .option("selector", {
+    alias: "S",
+    type: "string",
+    describe: "CSS selector for the section on the source page",
+    demandOption: true,
+})
+    .option("target-selector", {
+    alias: "T",
+    type: "string",
+    describe: "CSS selector for the section on the target page (if different from source). Falls back to --selector.",
+})
+    .option("index", {
+    alias: "i",
+    type: "number",
+    describe: "Element index if selector matches multiple elements",
+    default: 0,
+})
+    .option("breakpoints", {
+    alias: "b",
+    type: "string",
+    describe: 'Comma-separated breakpoint names or WIDTHxHEIGHT (e.g. "mobile,tablet,1440x900")',
+    default: "mobile,tablet,desktop,desktop-lg",
+})
+    .option("output", {
+    alias: "o",
+    type: "string",
+    describe: "Output directory for reports and artifacts",
+    default: "./pixelprobe-output",
+})
+    .option("format", {
+    alias: "f",
+    type: "string",
+    describe: 'Output formats: "json", "html", "both"',
+    default: "both",
+})
+    .option("threshold", {
+    type: "number",
+    describe: "Pixel comparison threshold (0-1, lower = stricter)",
+    default: 0.1,
+})
+    .option("no-visual", {
+    type: "boolean",
+    describe: "Skip visual (pixel) comparison",
+    default: false,
+})
+    .option("no-styles", {
+    type: "boolean",
+    describe: "Skip computed style comparison",
+    default: false,
+})
+    .option("no-layout", {
+    type: "boolean",
+    describe: "Skip layout metrics comparison",
+    default: false,
+})
+    .option("wait", {
+    alias: "w",
+    type: "number",
+    describe: "Wait N ms after page load before capturing",
+    default: 0,
+})
+    .option("headed", {
+    type: "boolean",
+    describe: "Run browser in headed mode (visible)",
+    default: false,
+})
+    .option("json", {
+    type: "boolean",
+    describe: "Output compact JSON to stdout (for piping)",
+    default: false,
+}), async (argv) => {
+    const breakpoints = argv.breakpoints.split(",").map((s) => s.trim());
+    const comparator = new WebSectionComparator({
+        headless: !argv.headed,
+        timeout: 30000,
+    });
+    // Progress display
+    const spinnerFrames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+    let spinnerIdx = 0;
+    let spinnerInterval;
+    if (!argv.json) {
+        spinnerInterval = setInterval(() => {
+            spinnerIdx = (spinnerIdx + 1) % spinnerFrames.length;
+        }, 80);
+    }
+    try {
+        const result = await comparator.compare({
+            sourceUrl: argv.source,
+            targetUrl: argv.target,
+            selector: argv.selector,
+            targetSelector: argv["target-selector"],
+            elementIndex: argv.index,
+            breakpoints,
+            pixelThreshold: argv.threshold,
+            includeVisual: !argv["no-visual"],
+            includeStyles: !argv["no-styles"],
+            includeLayout: !argv["no-layout"],
+            waitForTimeout: argv.wait,
+        }, !argv.json
+            ? (event) => {
+                process.stderr.write(`\r${spinnerFrames[spinnerIdx]} ${event.message} (${Math.round(event.progress)}%)   `);
+            }
+            : undefined);
+        if (spinnerInterval)
+            clearInterval(spinnerInterval);
+        // JSON-only mode (for piping)
+        if (argv.json) {
+            console.log(JSON.stringify(JSONReporter.toCompactSummary(result), null, 2));
+            process.exit(result.summary.overallSeverity === "pass" ? 0 : 1);
+            return;
+        }
+        // Clear spinner line
+        process.stderr.write("\r" + " ".repeat(80) + "\r");
+        // Console output
+        console.log(formatResult(result));
+        // Create a timestamped run directory inside the output dir
+        const timestamp = new Date()
+            .toISOString()
+            .replace(/[:.]/g, "-")
+            .replace("T", "_")
+            .slice(0, 19);
+        const runDir = join(argv.output, `run_${timestamp}_${result.id}`);
+        // Generate reports into the run directory
+        const format = argv.format;
+        if (format === "json" || format === "both") {
+            const jsonPath = await JSONReporter.generate(result, runDir);
+            console.log(`  📄 JSON report: ${jsonPath}`);
+        }
+        if (format === "html" || format === "both") {
+            const htmlPath = await HTMLReporter.generate(result, runDir);
+            console.log(`  🌐 HTML report: ${htmlPath}`);
+        }
+        console.log("");
+        // Exit with non-zero if differences found
+        process.exit(result.summary.overallSeverity === "pass" ? 0 : 1);
+    }
+    catch (err) {
+        if (spinnerInterval)
+            clearInterval(spinnerInterval);
+        process.stderr.write("\r" + " ".repeat(80) + "\r");
+        console.error(`\n❌ Error: ${err.message}`);
+        process.exit(2);
+    }
+})
+    .command("enumerate", "List all elements matching a selector on a page", (y) => y
+    .option("url", {
+    alias: "u",
+    type: "string",
+    describe: "URL to inspect",
+    demandOption: true,
+})
+    .option("selector", {
+    alias: "S",
+    type: "string",
+    describe: "CSS selector",
+    demandOption: true,
+}), async (argv) => {
+    const comparator = new WebSectionComparator({ headless: true });
+    try {
+        const elements = await comparator.enumerate(argv.url, argv.selector);
+        if (elements.length === 0) {
+            console.log(`No elements found matching "${argv.selector}"`);
+            process.exit(1);
+            return;
+        }
+        console.log(`\nFound ${elements.length} element(s) matching "${argv.selector}":\n`);
+        for (const el of elements) {
+            const box = el.boundingBox;
+            console.log(`  [${el.index}] <${el.tagName}> (${box.width}×${box.height} at ${box.x},${box.y})`);
+            if (el.textPreview) {
+                console.log(`      "${el.textPreview}"`);
+            }
+        }
+        console.log(`\nUse --index N with the compare command to select a specific element.`);
+    }
+    catch (err) {
+        console.error(`❌ Error: ${err.message}`);
+        process.exit(2);
+    }
+})
+    .command("breakpoints", "List available breakpoint presets", () => { }, () => {
+    console.log("\nAvailable breakpoint presets:\n");
+    for (const [name, bp] of Object.entries(PRESET_BREAKPOINTS)) {
+        console.log(`  ${name.padEnd(14)} ${bp.width}×${bp.height}  ${bp.label}`);
+    }
+    console.log(`\nYou can also use custom breakpoints in WIDTHxHEIGHT format (e.g. 1440x900).`);
+})
+    .demandCommand(1, "Please specify a command")
+    .help()
+    .version("0.1.0")
+    .strict();
+cli.parse();
+//# sourceMappingURL=pixelprobe.js.map

package/dist/bin/pixelprobe.js.map

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

package/dist/browser/BrowserManager.d.ts

@@ -0,0 +1,20 @@
+import { type Page } from "playwright";
+import type { Breakpoint } from "../types/config.js";
+export interface BrowserManagerOptions {
+    headless?: boolean;
+    timeout?: number;
+}
+export declare class BrowserManager {
+    private browser;
+    private options;
+    constructor(options?: BrowserManagerOptions);
+    launch(): Promise<void>;
+    createPage(breakpoint: Breakpoint): Promise<Page>;
+    navigateAndWait(page: Page, url: string, options?: {
+        waitForSelector?: string;
+        waitForTimeout?: number;
+    }): Promise<void>;
+    close(): Promise<void>;
+    get isLaunched(): boolean;
+}
+//# sourceMappingURL=BrowserManager.d.ts.map

package/dist/browser/BrowserManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrowserManager.d.ts","sourceRoot":"","sources":["../../src/browser/BrowserManager.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+C,KAAK,IAAI,EAAE,MAAM,YAAY,CAAC;AACpF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,qBAAa,cAAc;IACzB,OAAO,CAAC,OAAO,CAAwB;IACvC,OAAO,CAAC,OAAO,CAAkC;gBAErC,OAAO,GAAE,qBAA0B;IAOzC,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAOvB,UAAU,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;IAmBjD,eAAe,CACnB,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,MAAM,EACX,OAAO,GAAE;QACP,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,cAAc,CAAC,EAAE,MAAM,CAAC;KACpB,GACL,OAAO,CAAC,IAAI,CAAC;IAwBV,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAO5B,IAAI,UAAU,IAAI,OAAO,CAExB;CACF"}