feat: add text overrides and rename toolbar to editor (#15)

## Summary

- Add **textOverrides** support for inline text editing in screenshots
- Rename `toolbar/` to `editor/` for clarity
- Remove 'auto'/'both' color scheme options (keep only light/dark)
- Clear selection when picker mode is activated
- Remove animation from picker button

## Text Overrides Feature

Users can now click on text elements within a picked screenshot and edit
the text inline. Changes are:
- Saved to config as `textOverrides: { "relative > selector": "new text"
}`
- Applied during sync capture
- Hydrated when re-selecting existing screenshots in the editor

---------

Co-authored-by: Ondrej Machala <[email protected]>

Author: omachala

.changeset/text-overrides-editor.md

@@ -0,0 +1,12 @@
+---
+'heroshot': minor
+---
+
+Add text overrides and rename toolbar to editor
+
+- Add textOverrides support for inline text editing in screenshots
+- Rename toolbar/ to editor/ for clarity
+- Merge sidebar and toolbar into unified EditorBar component
+- Add commit-msg hook to block AI co-authors
+- Remove sync command, add --clean flag to default command
+- Real-time config saving on screenshot changes

.github/workflows/ci.yml

@@ -29,14 +29,14 @@ jobs:
       - name: Lint
         run: pnpm lint
 
-      - name: Lint toolbar
-        run: pnpm lint:toolbar
+      - name: Lint editor
+        run: pnpm lint:editor
 
       - name: Typecheck
         run: pnpm typecheck
 
-      - name: Typecheck toolbar
-        run: pnpm typecheck:toolbar
+      - name: Typecheck editor
+        run: pnpm typecheck:editor
 
       - name: Svelte warnings check
         run: pnpm check:svelte
@@ -47,13 +47,13 @@ jobs:
       - name: Unit tests with coverage
         run: pnpm vitest run --coverage
 
-      - name: Toolbar unit tests with coverage
-        run: pnpm test:toolbar:coverage
+      - name: Editor unit tests with coverage
+        run: pnpm test:editor:coverage
 
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v4
         with:
-          files: ./coverage/lcov.info,./coverage/toolbar/lcov.info
+          files: ./coverage/lcov.info,./coverage/editor/lcov.info
           fail_ci_if_error: false
 
       - name: Changeset status
@@ -76,21 +76,21 @@ jobs:
 
       - run: pnpm install --frozen-lockfile
 
-      - name: Build toolbar
-        run: pnpm build:toolbar
+      - name: Build editor
+        run: pnpm build:editor
 
       - name: Install Playwright browsers
         run: pnpm exec playwright install chromium
 
       - name: Run e2e tests
-        run: pnpm test:toolbar:e2e
+        run: pnpm test:editor:e2e
 
       - name: Upload test artifacts
         if: failure()
         uses: actions/upload-artifact@v4
         with:
           name: playwright-report
-          path: toolbar/test-results/
+          path: editor/test-results/
           retention-days: 7
 
   # CLI integration tests - run after check passes (parallel with e2e)

.github/workflows/release.yml

@@ -25,7 +25,7 @@ jobs:
       - run: pnpm install --frozen-lockfile
 
       - name: Build
-        run: pnpm build && pnpm build:toolbar
+        run: pnpm build && pnpm build:editor
 
       - name: Create Release PR or Publish
         uses: changesets/action@v1

.github/workflows/update-screenshots.yml

@@ -23,13 +23,13 @@ jobs:
       - name: Build heroshot
         run: pnpm build
 
-      - name: Build toolbar
-        run: pnpm build:toolbar
+      - name: Build editor
+        run: pnpm build:editor
 
       - name: Install Playwright browsers
         run: pnpm exec playwright install chromium
 
-      - name: Run heroshot sync
+      - name: Run heroshot
         run: node dist/cli.js
 
       - name: Commit updated screenshots

.heroshot/config.json

@@ -8,19 +8,18 @@
   "screenshots": [
     {
       "id": "5dytme8m",
+      "viewports": [
+        "desktop",
+        "tablet",
+        "mobile"
+      ],
       "name": "Hero",
       "url": "https://heroshot.sh/",
-      "filename": "hero.png",
       "selector": "#VPContent > div.VPHome > div.VPHero.has-image:nth-of-type(1)",
       "scroll": {
         "x": 0,
         "y": 0
-      },
-      "viewports": [
-        "mobile",
-        "tablet",
-        "desktop"
-      ]
+      }
     }
   ]
 }

README.md

@@ -12,13 +12,11 @@
   <a href="https://heroshot.sh"><img src="https://img.shields.io/badge/docs-heroshot.sh-blue?style=for-the-badge" alt="docs"></a>
 </p>
 
-Documentation screenshots rot. Your UI changes, but the images in your README, docs, and tutorials become outdated. The manual fix is painful: navigate, log in, screenshot, crop, save, commit. Repeat for every image.
+Your app changes constantly. New features, design tweaks, bug fixes. Meanwhile, the screenshots in your README and docs quietly become lies.
 
-**Heroshot treats screenshots as code** - define them once, regenerate with one command.
+The manual fix is tedious: open browser, navigate, log in, screenshot, crop, save, commit. Now do that for every image. Now do it again next month.
 
-- **Visual picker** - Point and click to select elements, generates config for you
-- **Multi-variant** - Desktop, tablet, mobile + light/dark from a single definition
-- **CI/CD ready** - Automate updates with encrypted session support
+**Heroshot fixes this.** Define your screenshots once - point and click, no CSS selectors - and regenerate them with one command whenever you need.
 
 <table align="center">
   <tr>
@@ -43,57 +41,48 @@ Documentation screenshots rot. Your UI changes, but the images in your README, d
   </tr>
 </table>
 
+<p align="center"><em>6 screenshots from one config entry - always in sync with the live site.</em></p>
+
 ## Get Started
 
 ```bash
 npx heroshot
 ```
 
-**First run** opens an interactive browser:
+That's it. First time, a browser opens with a visual picker. Navigate to your app, click on elements you want to capture, name them, close when done.
 
-1. Navigate to any URL
-2. Click on elements you want to screenshot
-3. Name your screenshots and adjust settings
-4. Close the browser when done
+Your screenshots land in `heroshots/` and a config is saved to `.heroshot/config.json`.
 
-**Subsequent runs** regenerate all screenshots headlessly:
+Next time you run `npx heroshot`, it regenerates everything headlessly. No browser, no clicking - just fresh screenshots.
 
-```bash
-npx heroshot
-```
+## What Makes It Useful
 
-**Reconfigure** anytime by running:
-
-```bash
-npx heroshot config
-```
+**Point and click, not CSS selectors.** The visual picker figures out how to find elements. You just click what you want.
 
-## Why heroshot?
+**Light and dark mode in one go.** If your site has themes, heroshot captures both variants automatically. One config, two screenshots.
 
-Heroshot automates **documentation screenshots** - not visual regression testing. Define once, generate everywhere.
+**Desktop, tablet, mobile from one definition.** Add `"viewports": ["desktop", "tablet", "mobile"]` and get all three sizes. Combined with both color schemes, that's 6 screenshots from one entry.
 
-**The math:** 3 components × 5 pages × 3 viewports × 2 color schemes = **90 screenshots** from one config.
+**Log in once, capture forever.** First time, log into your app manually. Heroshot encrypts and saves your session. Headless runs are already authenticated - no login scripts needed.
 
-- **Visual picker** - Point and click to select elements, no DevTools needed
-- **Viewport variants** - Desktop, tablet, mobile from a single definition
-- **Light & Dark mode** - Both color schemes captured automatically
-- **Pixel-perfect** - Element-precise capture with masked padding
-- **One command** - Regenerate all screenshots when your UI changes
-- **CI ready** - Automate updates with encrypted session support
+**CI-ready.** Export your session key, add it to GitHub secrets, run `heroshot` in a workflow. Screenshots update automatically.
 
 ## Automated Updates
 
-Run heroshot in CI to keep screenshots always current. See the [full guide](https://heroshot.sh/docs/guide/automated-updates).
+Keep screenshots always current by running heroshot in CI. Quick setup:
 
-**Quick setup:**
+```bash
+# Get your session key (for authenticated sites)
+npx heroshot session-key
+
+# Add to GitHub secrets
+gh secret set HEROSHOT_SESSION_KEY
+```
 
-1. Get your session key: `npx heroshot session-key`
-2. Add as GitHub secret: `gh secret set HEROSHOT_SESSION_KEY`
-3. Create workflow:
+Then create `.github/workflows/heroshot.yml`:
 
 ```yaml
-# .github/workflows/heroshot.yaml
-name: Heroshot
+name: Update Screenshots
 
 on:
   workflow_dispatch:
@@ -106,20 +95,26 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 20
-      - run: npx heroshot --session-key=${{ secrets.HEROSHOT_SESSION_KEY }}
+      - run: npx heroshot
+        env:
+          HEROSHOT_SESSION_KEY: ${{ secrets.HEROSHOT_SESSION_KEY }}
       - run: |
           git config user.name "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"
           git add heroshots/
           git diff --staged --quiet || git commit -m "chore: update screenshots" && git push
 ```
 
----
+Go to Actions → Update Screenshots → Run workflow. Done.
 
-**Status:** Early alpha. [See releases](https://github.com/omachala/heroshot/releases) for current version.
+For more options (scheduled runs, PR creation, debugging), see the [full CI guide](https://heroshot.sh/docs/guide/automated-updates).
+
+## Learn More
 
 **Docs:** [heroshot.sh](https://heroshot.sh)
 
+**Status:** Early alpha. [See releases](https://github.com/omachala/heroshot/releases) for current version.
+
 ## License
 
 MIT