{"_id":"@dain-os/retune","_rev":"3-59d214aba527e84f8a5ac972fdd0e403","name":"@dain-os/retune","dist-tags":{"latest":"0.5.1"},"versions":{"0.5.0":{"name":"@dain-os/retune","version":"0.5.0","license":"MIT","_id":"@dain-os/retune@0.5.0","maintainers":[{"name":"dane-krambergar","email":"hello@dain.agency"}],"homepage":"https://github.com/dain-group/dain-os#readme","bugs":{"url":"https://github.com/dain-group/dain-os/issues"},"bin":{"retune":"dist/cli.js"},"dist":{"shasum":"161b6c4ce92447673615a646bf3248eb6152ece5","tarball":"https://registry.npmjs.org/@dain-os/retune/-/retune-0.5.0.tgz","fileCount":6,"integrity":"sha512-n1QbKxXVX6q+WF8emaRxGtsT03yS4zb25SSKHwbU0YeUm1rTRzUJ+3QIzyLW6oZeWb6zsRT2PPUgRSfmSLT6Lg==","signatures":[{"sig":"MEUCIG4a8q04DX/VHUX3x2gGcrpN6Tk+tNFeKTqM9wUQa7k/AiEA63E3/h6nyv/uZISCmfE0DKbrdSA3gUtPST6bp+hYzGA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1530637},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"6d753bb9d764af98300181c7f393b488a9ffb633","scripts":{"dev":"npm run build:css && tsup --watch","build":"npm run build:css && tsup","build:css":"node scripts/build-css.js"},"_npmUser":{"name":"dane-krambergar","email":"hello@dain.agency"},"repository":{"url":"git+https://github.com/dain-group/dain-os.git","type":"git","directory":"packages/retune/packages/overlay"},"_npmVersion":"11.5.1","description":"The visual layer for vibe coding.","directories":{},"_nodeVersion":"24.5.0","dependencies":{"ws":"^8.18.0","zod":"^3.24.0","@medv/finder":"^3.2.0","@modelcontextprotocol/sdk":"^1.12.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","react":"^19.0.0","@types/ws":"^8.5.0","react-dom":"^19.0.0","typescript":"^5.5.0","@types/react":"^19.0.0","@hugeicons/react":"^1.1.4","@types/react-dom":"^19.0.0","@hugeicons/core-free-icons":"^3.1.1"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/retune_0.5.0_1774023006540_0.301977317620189","host":"s3://npm-registry-packages-npm-production"}},"0.5.1":{"name":"@dain-os/retune","version":"0.5.1","type":"module","repository":{"type":"git","url":"git+https://github.com/dain-group/dain-os.git","directory":"packages/retune/packages/overlay"},"license":"MIT","publishConfig":{"access":"public"},"main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"bin":{"dain-retune":"dist/cli.js"},"scripts":{"build:css":"node scripts/build-css.js","build":"npm run build:css && tsup","dev":"npm run build:css && tsup --watch","postinstall":"echo \"\n  @dain-os/retune installed. Run 'npx dain-retune setup' to configure MCP for your AI tool.\n\""},"peerDependencies":{"react":">=18","react-dom":">=18"},"dependencies":{"@medv/finder":"^3.2.0","@modelcontextprotocol/sdk":"^1.12.1","ws":"^8.18.0","zod":"^3.24.0"},"devDependencies":{"@hugeicons/core-free-icons":"^3.1.1","@hugeicons/react":"^1.1.4","@types/react":"^19.0.0","@types/react-dom":"^19.0.0","@types/ws":"^8.5.0","react":"^19.0.0","react-dom":"^19.0.0","tsup":"^8.0.0","typescript":"^5.5.0"},"_id":"@dain-os/retune@0.5.1","gitHead":"6d753bb9d764af98300181c7f393b488a9ffb633","description":"The visual layer for vibe coding.","bugs":{"url":"https://github.com/dain-group/dain-os/issues"},"homepage":"https://github.com/dain-group/dain-os#readme","_nodeVersion":"24.5.0","_npmVersion":"11.5.1","dist":{"integrity":"sha512-mIPnFeE0ab+vG4ulTUtWJ/aI1bMVJBIFav5xFggvUGFz4hHJv/7LAo/torTrj6tJrnNTSKqy8T8qa2ITBy4uJw==","shasum":"81df54b758d04c7fbc1ee9c7a8d73e61a8bf189a","tarball":"https://registry.npmjs.org/@dain-os/retune/-/retune-0.5.1.tgz","fileCount":6,"unpackedSize":1533171,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFWLIhNu8Sn0Z3WmPD5fI7VpPP7NQeMVVr9QEH6qGwi9AiBR63tEguR8x9Q46dTL72VXqTbjnYLYmExDVPus4il1iQ=="}]},"_npmUser":{"name":"dane-krambergar","email":"hello@dain.agency"},"directories":{},"maintainers":[{"name":"dane-krambergar","email":"hello@dain.agency"},{"name":"jack-dain","email":"jack.taylor@dain.agency"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/retune_0.5.1_1774023459174_0.9762527216631396"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-20T16:10:06.480Z","modified":"2026-03-20T16:17:39.672Z","0.5.0":"2026-03-20T16:10:06.711Z","0.5.1":"2026-03-20T16:17:39.454Z"},"bugs":{"url":"https://github.com/dain-group/dain-os/issues"},"license":"MIT","homepage":"https://github.com/dain-group/dain-os#readme","repository":{"type":"git","url":"git+https://github.com/dain-group/dain-os.git","directory":"packages/retune/packages/overlay"},"description":"The visual layer for vibe coding.","maintainers":[{"name":"dane-krambergar","email":"hello@dain.agency"},{"name":"jack-dain","email":"jack.taylor@dain.agency"}],"readme":"# Retune\r\n\r\nThe visual layer for vibe coding.\r\n\r\nClick any element in your running app, adjust spacing, colors, typography, and more, and your AI agent writes the changes to source. No more prompting for pixels.\r\n\r\n## Quick Start\r\n\r\n```bash\r\nnpm install retune\r\n```\r\n\r\nAdd the overlay to your app layout — it only renders in development by default:\r\n\r\n```tsx\r\nimport { Retune } from \"retune\";\r\n\r\nexport default function Layout({ children }) {\r\n  return (\r\n    <html>\r\n      <body>\r\n        {children}\r\n        <Retune />\r\n      </body>\r\n    </html>\r\n  );\r\n}\r\n```\r\n\r\nPress **Alt+D** (or **Option+D** on macOS) to toggle edit mode, then click any element to start tweaking.\r\n\r\n## How It Works\r\n\r\n1. **Select** — Click any element in your app to inspect it\r\n2. **Tweak** — Adjust properties with visual controls (sliders, color pickers, etc.)\r\n3. **Apply** — Changes are sent to your AI coding tool via MCP to persist in source code\r\n\r\nChanges preview instantly in the browser (like devtools), then get written to your actual files.\r\n\r\n## Features\r\n\r\n### Dynamic Controls\r\n\r\nControls appear based on the selected element:\r\n\r\n| Element type | Controls |\r\n|---|---|\r\n| Any element | padding, margin, border-radius, background, opacity, shadow |\r\n| Text | font-size, weight, line-height, letter-spacing, color, alignment |\r\n| Flex container | direction, gap, align, justify, wrap |\r\n| Grid container | columns, rows, gap |\r\n| Image | object-fit, aspect-ratio, border-radius |\r\n| Positioned | position offsets, z-index |\r\n\r\n### Pseudo-State Editing\r\n\r\nToggle between `:hover`, `:focus`, and `:active` states to inspect and edit styles that only apply in those states — without needing to hold the mouse in place.\r\n\r\n### Class Selector Picker\r\n\r\nWhen you select an element, Retune shows its CSS classes as clickable tags. Pick \"This element\" to scope changes to just that element, or pick a class to apply changes everywhere that class is used. Each tag shows how many elements share the class.\r\n\r\n### Styling Approach Detection\r\n\r\nRetune analyzes your stylesheets at runtime to detect whether you're using utility CSS (Tailwind, UnoCSS, etc.) or semantic CSS (CSS Modules, plain CSS). This context helps your AI agent write changes in the right format. No hardcoded framework patterns — it works by analyzing rule complexity in `document.styleSheets`.\r\n\r\n### Scrub-to-Adjust\r\n\r\nClick and drag on any numeric value to scrub it up or down. Hold Shift for 10x increments, Alt for 0.1x precision.\r\n\r\n## AI Integration (MCP Server)\r\n\r\nRetune includes a built-in MCP server. Configure your AI tool to use it:\r\n\r\n```json\r\n{\r\n  \"mcpServers\": {\r\n    \"retune\": {\r\n      \"command\": \"npx\",\r\n      \"args\": [\"-y\", \"retune\"]\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### MCP Tools\r\n\r\n| Tool | Description |\r\n|---|---|\r\n| `retune_get_selection` | Get the currently selected element with its selector, component tree, and styles |\r\n| `retune_get_pending_changes` | Get all visual changes as before/after diffs |\r\n| `retune_get_formatted_changes` | Get changes as structured markdown, ready to apply to code |\r\n| `retune_watch_changes` | Wait for new changes (blocks up to 30s) |\r\n| `retune_clear_changes` | Clear pending changes after applying them |\r\n| `retune_status` | Check overlay connection status |\r\n\r\n## Configuration\r\n\r\n```tsx\r\n<Retune\r\n  port={9223}              // WebSocket port for MCP bridge\r\n  hotkey=\"alt+d\"           // Toggle hotkey\r\n  fidelity=\"standard\"      // Output detail: \"minimal\" | \"standard\" | \"full\"\r\n  position=\"bottom-right\"  // Toolbar position\r\n  force                    // Show in production (default: false)\r\n/>\r\n```\r\n\r\n## Element Identification\r\n\r\nRetune uses layered identification to help AI agents find elements in your code:\r\n\r\n1. **DOM-level** — CSS selector, text content, classes, computed styles\r\n2. **React-specific** — Component name, props, component ancestry (via fiber tree)\r\n3. **Source-level** — File path + line number (optional, via `__source` metadata)\r\n\r\n## Compatibility\r\n\r\n- **Frameworks:** Next.js, Vite, Remix\r\n- **Styling:** Tailwind CSS, CSS Modules, plain CSS, any utility-first framework\r\n- **AI tools:** Claude Code and Cursor via MCP, plus clipboard fallback for others\r\n- **Viewport:** Desktop only (hidden below 768px)\r\n\r\n## Tech Stack\r\n\r\nReact, TypeScript. Single package with two entry points:\r\n\r\n- `import { Retune } from \"retune\"` — React overlay component\r\n- `npx retune` — MCP server for AI tool integration\r\n\r\n## Development\r\n\r\n```bash\r\nnpm install\r\nnpm run build\r\nnpm run dev    # Watch mode\r\n```\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}