pixelpick 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 bilune
+
+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,233 @@
+# PixelPick
+
+[![npm version](https://img.shields.io/npm/v/pixelpick.svg)](https://www.npmjs.com/package/pixelpick)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+**Visual UI inspector for Claude Code.** Cmd+Shift+Click on any element in your browser and Claude Code automatically knows which component you're referring to.
+
+## Why PixelPick?
+
+Stop wasting time describing UI elements to Claude Code ("the blue button in the top right corner"). Just **point and click** -- Claude Code will automatically see what you selected.
+
+```
+You: *Cmd+Shift+Click on a button*
+You: "make the hover transition smoother"
+Claude: *already knows which button, its file location, and current styles*
+```
+
+## Installation
+
+### 1. Install the Chrome Extension
+
+Load the extension from `node_modules/pixelpick/dist/chrome-mv3/`:
+
+1. Open `chrome://extensions`
+2. Enable **Developer mode** (toggle in top right)
+3. Click **Load unpacked**
+4. Select `node_modules/pixelpick/dist/chrome-mv3/`
+
+### 2. Set Up Claude Code Integration
+
+```bash
+npx pixelpick@latest init
+```
+
+This registers the MCP server and installs the auto-injection hook. Done.
+
+## Usage
+
+1. **Run your app** in Chrome (localhost only)
+   ```bash
+   npm run dev  # or your dev command
+   ```
+
+2. **Select elements** with **Cmd+Shift+Click** (Mac) or **Ctrl+Shift+Click** (Windows/Linux)
+   - Select multiple elements (up to 10) -- they accumulate automatically
+   - View your selections in the extension's side panel
+   - Remove individual selections or clear all
+
+3. **Switch to Claude Code** and describe what you want to change
+   ```
+   "make this button's padding bigger"
+   "change the color to blue"
+   "add a loading spinner"
+   ```
+
+4. **Claude automatically sees** all selected elements' context
+   - Selections are auto-cleared after being injected into your prompt
+
+## What Gets Captured
+
+### For React Components
+- Component name (e.g., `TestButton`)
+- Props with values
+- File location with line:column (e.g., `src/components/Button.tsx:24:5`)
+- Component tree (parent > child hierarchy)
+
+### For Any Element
+- CSS selector
+- Computed styles (colors, spacing, typography, etc.)
+- Tailwind classes (auto-detected)
+- Accessibility info (role, aria-label, etc.)
+- Bounding box (position and size)
+
+## Framework Support
+
+| Framework | Status | Component Detection | File Location | Props |
+|-----------|--------|---------------------|---------------|-------|
+| **React 18** | Full Support | Yes | Yes (line + column) | Yes |
+| **React 19** | Supported | Yes | Partial (line only) | Yes |
+| **Non-framework** | Supported | - | - | - |
+| Vue, Svelte | Coming Soon | - | - | - |
+
+### React 19 Note
+React 19 removed precise source location metadata (`_debugSource`). File locations will show line number only (no column). This is a React limitation, not a PixelPick issue.
+
+## Commands
+
+```bash
+# Setup (one-time)
+npx pixelpick init            # Register with Claude Code
+npx pixelpick init --project  # Use project scope
+
+# Server management
+npx pixelpick start           # Start MCP server manually
+npx pixelpick status          # Check connection status
+
+# Help
+npx pixelpick help            # Show all commands
+npx pixelpick --version       # Show version
+```
+
+## How It Works
+
+PixelPick uses a three-component architecture:
+
+```
+Chrome Extension  <--WebSocket-->  MCP Server  <--MCP+Hook-->  Claude Code
+  (Element UI)                  (Selection Buffer)             (AI Assistant)
+```
+
+1. **Chrome Extension**: Captures element selections via Cmd+Shift+Click, detects React components, maintains multi-selection list, sends via WebSocket
+2. **MCP Server**: Maintains selection buffer (up to 10 active + 50 history), exposes MCP tools, runs WebSocket + IPC servers
+3. **UserPromptSubmit Hook**: Automatically injects all active selections on every prompt (deterministic, <500ms), auto-clears after injection
+
+### Why This Approach?
+
+- **Zero-config**: `npx pixelpick init` sets up everything automatically
+- **Deterministic**: Hook fires on EVERY prompt (doesn't rely on Claude deciding to call a tool)
+- **Framework-aware**: Extracts React component names, props, and file locations from Fiber internals
+- **Localhost-only**: Security-focused, never runs on production URLs
+- **Fast**: Hook checks selection in <500ms via HTTP IPC endpoint
+
+## Troubleshooting
+
+### Extension shows "disconnected" (yellow badge)
+
+```bash
+npx pixelpick status
+```
+
+If server not running:
+- Make sure you have a Claude Code session running (MCP servers start with Claude)
+- Or manually start: `npx pixelpick start`
+
+### Selection not appearing in Claude Code
+
+**Check hook is installed:**
+```bash
+cat ~/.claude/settings.json | grep pixelpick
+```
+
+**Re-run setup if missing:**
+```bash
+npx pixelpick init
+```
+
+### Port already in use
+
+**Check what's using the port:**
+```bash
+lsof -i :9315
+```
+
+**Use different port:**
+```bash
+PIXELPICK_PORT=9999 npx pixelpick start
+```
+
+### React component name not detected
+
+**Possible causes:**
+- Not a React app (PixelPick will fall back to CSS selector)
+- Minified production build (component names are stripped)
+- React DevTools disabled (check React Fiber is accessible)
+
+**Debug:**
+```javascript
+// In browser console
+$0  // Selected element
+Object.keys($0).find(k => k.startsWith('__reactFiber'))  // Should return fiber key
+```
+
+### File location missing (React 19)
+
+This is expected. React 19 removed `_debugSource` metadata. PixelPick will fall back to stack trace parsing, which provides line numbers only (no column).
+
+## Environment Variables
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `PIXELPICK_PORT` | `9315` | WebSocket server port |
+| `PIXELPICK_IPC_PORT` | `9316` | HTTP IPC server port (for hook) |
+
+## Security
+
+PixelPick only runs on **localhost** (127.0.0.1 and localhost). It will never activate on production websites.
+
+The Chrome extension has minimal permissions:
+- `activeTab`: Only active tab access
+- `scripting`: Inject inspector on localhost only
+- `host_permissions`: For inspector injection on any localhost port
+
+No data is sent to external servers. Everything runs locally. See [PRIVACY.md](PRIVACY.md) for the full privacy policy.
+
+## Advanced Usage
+
+### Activate Picker Programmatically
+
+Use the `pick_element` MCP tool:
+
+```
+You: "activate the element picker"
+Claude: *calls pick_element tool*
+You: *clicks on element in browser*
+```
+
+### Access Selection History
+
+```
+You: "show me the last 5 elements I selected"
+Claude: *calls get_selection_history tool*
+```
+
+### Clear Selections
+
+```
+You: "clear all selections"
+Claude: *calls clear_selection tool*
+```
+
+Note: Selections are automatically cleared after being injected into your prompt, so manual clearing is rarely needed.
+
+## Contributing
+
+Issues and PRs welcome at [GitHub](https://github.com/bilune/pixelpick).
+
+## License
+
+MIT - see [LICENSE](LICENSE) for details.
+
+---
+
+**Made for developers who ship fast.** Stop describing, start pointing.

package/dist/chrome-mv3/assets/sidepanel-D7qwGDau.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap";@layer properties,theme,base,components,utilities;@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-green-700:oklch(52.7% .154 150.069);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-gray-700:oklch(37.3% .034 259.733);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--font-weight-medium:500;--font-weight-semibold:600;--radius-md:.375rem;--radius-lg:.5rem;--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-font-feature-settings:var(--font-sans--font-feature-settings);--default-font-variation-settings:var(--font-sans--font-variation-settings);--default-mono-font-family:var(--font-mono);--default-mono-font-feature-settings:var(--font-mono--font-feature-settings);--default-mono-font-variation-settings:var(--font-mono--font-variation-settings);--color-brand:#d97757;--color-brand-hover:#c96647;--color-dark-bg:#2d2d2d;--color-darker-bg:#1d1d1d;--color-light-bg:#3d3d3d;--color-dark-border:#4d4d4d;--color-brand-border:#e6704e;--color-light-text:#fff;--color-gray-text:#9d9d9d;--color-dim-text:#6d6d6d;--color-react-bg:#164e634d;--color-vue-bg:#14532d4d;--color-vue-text:#86efac;--color-vue-border:#16a34a;--color-svelte-bg:#7c2d124d;--color-success:#22c55e;--color-warning:#e6704e;--color-danger:#ef4444;--font-jetbrains:"JetBrains Mono",monospace}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}body{line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1;color:currentColor}::placeholder{opacity:1;color:currentColor}@supports (color:color-mix(in lab,red,red)){::-moz-placeholder{color:color-mix(in oklab,currentColor 50%,transparent)}::placeholder{color:color-mix(in oklab,currentColor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.fixed{position:fixed}.inset-0{inset:calc(var(--spacing)*0)}.z-\[1000\]{z-index:1000}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing)*0)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-4{margin-top:calc(var(--spacing)*4)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-2{height:calc(var(--spacing)*2)}.h-4{height:calc(var(--spacing)*4)}.h-8{height:calc(var(--spacing)*8)}.h-screen{height:100vh}.max-h-\[300px\]{max-height:300px}.min-h-screen{min-height:100vh}.w-2{width:calc(var(--spacing)*2)}.w-4{width:calc(var(--spacing)*4)}.w-8{width:calc(var(--spacing)*8)}.w-full{width:100%}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing)*0)}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-\[\#e6704e\]{border-color:#e6704e}.border-blue-300{border-color:var(--color-blue-300)}.border-brand{border-color:var(--color-brand)}.border-brand-border{border-color:var(--color-brand-border)}.border-danger{border-color:var(--color-danger)}.border-dark-border{border-color:var(--color-dark-border)}.border-success{border-color:var(--color-success)}.border-vue-border{border-color:var(--color-vue-border)}.bg-\[\#2d2d2d\]{background-color:#2d2d2d}.bg-black\/70{background-color:#000000b3}@supports (color:color-mix(in lab,red,red)){.bg-black\/70{background-color:color-mix(in oklab,var(--color-black)70%,transparent)}}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-brand{background-color:var(--color-brand)}.bg-danger{background-color:var(--color-danger)}.bg-dark-bg{background-color:var(--color-dark-bg)}.bg-darker-bg{background-color:var(--color-darker-bg)}.bg-react-bg{background-color:var(--color-react-bg)}.bg-success{background-color:var(--color-success)}.bg-svelte-bg{background-color:var(--color-svelte-bg)}.bg-vue-bg{background-color:var(--color-vue-bg)}.bg-warning{background-color:var(--color-warning)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-1\.5{padding-inline:calc(var(--spacing)*1.5)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-8{padding-block:calc(var(--spacing)*8)}.pb-3{padding-bottom:calc(var(--spacing)*3)}.font-jetbrains{font-family:var(--font-jetbrains)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.text-\[32px\]{font-size:32px}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-\[\#ffffff\]{color:#fff}.text-dim-text{color:var(--color-dim-text)}.text-gray-700{color:var(--color-gray-700)}.text-gray-text{color:var(--color-gray-text)}.text-light-text{color:var(--color-light-text)}.text-vue-text{color:var(--color-vue-text)}.text-white{color:var(--color-white)}.opacity-50{opacity:.5}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}@media(hover:hover){.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-brand:hover{background-color:var(--color-brand)}.hover\:bg-light-bg:hover{background-color:var(--color-light-bg)}.hover\:text-white:hover{color:var(--color-white)}.enabled\:hover\:border-brand:enabled:hover{border-color:var(--color-brand)}.enabled\:hover\:border-brand-border:enabled:hover{border-color:var(--color-brand-border)}.enabled\:hover\:bg-brand:enabled:hover{background-color:var(--color-brand)}.enabled\:hover\:bg-brand-hover:enabled:hover{background-color:var(--color-brand-hover)}.enabled\:hover\:bg-danger:enabled:hover{background-color:var(--color-danger)}.enabled\:hover\:bg-green-700:enabled:hover{background-color:var(--color-green-700)}.enabled\:hover\:bg-light-bg:enabled:hover{background-color:var(--color-light-bg)}}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}}*{font-family:JetBrains Mono,monospace}html,body{background-color:#2d2d2d;margin:0;padding:0}#root{min-height:100vh}@keyframes pulse{50%{opacity:.5}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.picker-btn.active{animation:2s ease-in-out infinite pulse}.status-dot{animation:1.5s ease-in-out infinite blink}.settings-overlay{animation:.2s ease-out fadeIn}.settings-panel{animation:.2s ease-out slideIn}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#1d1d1d}::-webkit-scrollbar-thumb{background:#4d4d4d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#e6704e}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}

package/dist/chrome-mv3/background.js

@@ -0,0 +1 @@
+var background=(function(){"use strict";function b(t){return t==null||typeof t=="function"?{main:t}:t}const N="ws://localhost:9315",E={HEARTBEAT_INTERVAL:2e4,RECONNECT_DELAYS:[3e3,6e3,12e3,24e3,6e4],MAX_RECONNECT_ATTEMPTS:10},p={CONNECTED:{color:"#10b981",text:""},DISCONNECTED:{color:"#f59e0b",text:"!"},ERROR:{color:"#ef4444",text:"X"}},y=b(()=>{const t=E.HEARTBEAT_INTERVAL,f=E.RECONNECT_DELAYS,h=E.MAX_RECONNECT_ATTEMPTS;let r=null,d=null,m=null,c=0;const i=p;function a(e){chrome.action.setBadgeBackgroundColor({color:e.color}),chrome.action.setBadgeText({text:e.text})}function _(){T(),d=setInterval(()=>{r?.readyState===WebSocket.OPEN&&r.send(JSON.stringify({type:"ping",timestamp:Date.now()}))},t)}function T(){d&&(clearInterval(d),d=null)}function l(){if(!(r&&(r.readyState===WebSocket.CONNECTING||r.readyState===WebSocket.OPEN))){console.log("[PixelPick] Connecting to WebSocket server..."),a(i.DISCONNECTED);try{r=new WebSocket(N),r.onopen=()=>{console.log("[PixelPick] WebSocket connected"),a(i.CONNECTED),_(),c=0},r.onmessage=e=>{try{const n=JSON.parse(e.data);switch(n.type){case"pong":break;case"activate_picker":chrome.tabs.query({active:!0,currentWindow:!0},o=>{o[0]&&chrome.tabs.sendMessage(o[0].id,{type:"activate_picker"})});break;default:console.log("[PixelPick] Unknown message from server:",n.type)}}catch(n){console.error("[PixelPick] Invalid message from server:",n)}},r.onerror=e=>{console.error("[PixelPick] WebSocket error:",e),a(i.ERROR)},r.onclose=()=>{console.log("[PixelPick] WebSocket closed"),a(i.DISCONNECTED),T(),S()}}catch(e){console.error("[PixelPick] Failed to create WebSocket:",e),a(i.ERROR),S()}}}function S(){if(c>=h){console.error("[PixelPick] Max reconnect attempts reached"),a(i.ERROR);return}const e=f[Math.min(c,f.length-1)];c++,console.log(`[PixelPick] Reconnecting in ${e}ms (attempt ${c}/${h})`),m&&clearTimeout(m),m=setTimeout(()=>{l()},e)}chrome.runtime.onMessage.addListener((e,n,o)=>{if(e.type==="selection")return r?.readyState===WebSocket.OPEN?(r.send(JSON.stringify({type:"selection",data:e.data,tabId:n.tab?.id,url:n.tab?.url})),o({success:!0})):(console.error("[PixelPick] Cannot send selection - WebSocket not connected"),o({success:!1,error:"Not connected to server"})),!0;if(e.type==="get_connection_status")return o({connected:r?.readyState===WebSocket.OPEN,readyState:r?.readyState,reconnectAttempts:c}),!0;if(e.type==="toggle_picker")return chrome.tabs.query({active:!0,currentWindow:!0},async k=>{if(!k||k.length===0){o({success:!1,error:"No active tab found"});return}const s=k[0];if(!s.url||s.url.startsWith("chrome://")||s.url.startsWith("chrome-extension://")||s.url.startsWith("edge://")){o({success:!1,error:"Cannot activate picker on browser internal pages. Open a regular webpage first."});return}if(s.status==="loading"){o({success:!1,error:"Page is still loading. Wait a moment and try again."});return}chrome.tabs.sendMessage(s.id,{type:"activate_picker"},A=>{if(chrome.runtime.lastError){const P=chrome.runtime.lastError.message;console.error("[PixelPick] Error sending activate_picker:",P),P?.includes("Receiving end does not exist")?o({success:!1,error:"PixelPick not ready on this page. Reload the extension and try again."}):o({success:!1,error:P})}else console.log("[PixelPick] Picker activated successfully"),o({success:!0})})}),!0;if(e.type==="picker_deactivated")return chrome.runtime.sendMessage({type:"picker_deactivated"}).catch(()=>{console.log("[PixelPick] Sidepanel not open, picker_deactivated not forwarded")}),!0}),l(),chrome.runtime.onStartup.addListener(()=>{console.log("[PixelPick] Service worker started"),l()}),chrome.runtime.onInstalled.addListener(()=>{console.log("[PixelPick] Extension installed"),l()}),chrome.alarms.create("keepalive",{periodInMinutes:1}),chrome.alarms.onAlarm.addListener(e=>{e.name==="keepalive"&&r?.readyState!==WebSocket.OPEN&&l()}),chrome.action.onClicked.addListener(e=>{chrome.sidePanel.open({windowId:e.windowId})})});function v(){}globalThis.browser?.runtime?.id?globalThis.browser:globalThis.chrome;function u(t,...f){}const C={debug:(...t)=>u(console.debug,...t),log:(...t)=>u(console.log,...t),warn:(...t)=>u(console.warn,...t),error:(...t)=>u(console.error,...t)};let g;try{g=y.main(),g instanceof Promise&&console.warn("The background's main() function return a promise, but it must be synchronous")}catch(t){throw C.error("The background crashed on startup!"),t}var O=g;return O})();