fix: use custom chart minimap reset button

[graphieros]

When the minimap range inputs are in use, a built-in reset button is displayed, which did not match our design.
A dedicated slot is used to inject a button with its icon to fix that.

Before	After

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 14, 2026 6:33pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 14, 2026 6:33pm
npmx-lunaria	Ignored		Feb 14, 2026 6:33pm

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request modifies two Vue chart components to enable minimap reset functionality in the VueUiXy chart library. The changes involve enabling the useResetSlot option in the chart configurations and adding custom minimap reset buttons to the chart templates. Both TrendsChart.vue and VersionDistribution.vue receive identical modifications that inject reset-action slots, wiring them to resetMinimap methods. No public APIs or method signatures were altered; the changes are purely internal configuration and template updates.

Possibly related PRs

• chore: bump vue-data-ui from 3.14.10 to 3.15.0 #1455: Modifies the same chart components and their VueUiXy configurations with minimap-related settings and UI slot adjustments.

Suggested reviewers

• danielroe
• ghostdevv

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the motivation (built-in reset button didn't match design) and the solution (custom reset button via dedicated slot).
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into main

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

app/components/Package/TrendsChart.vue (1)

1809-1820: Remove inline focus-visible:outline-accent/70 utility class from button.

The project applies focus-visible styling for buttons globally via main.css. Inline focus-visible utilities on button elements should be avoided for consistency and maintainability.

Additionally, this button implementation is identical to the one in VersionDistribution.vue. Consider extracting to a shared component to reduce duplication.

♻️ Proposed fix to remove inline focus-visible class

             <template `#reset-action`="{ reset: resetMinimap }">
               <button
                 type="button"
                 aria-label="reset minimap"
-                class="absolute inset-is-1/2 -translate-x-1/2 -bottom-18 sm:inset-is-unset sm:translate-x-0 sm:bottom-auto sm:-inset-ie-20 sm:-top-3 flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
+                class="absolute inset-is-1/2 -translate-x-1/2 -bottom-18 sm:inset-is-unset sm:translate-x-0 sm:bottom-auto sm:-inset-ie-20 sm:-top-3 flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border sm:mb-0"
                 style="pointer-events: all !important"
                 `@click`="resetMinimap"
               >
                 <span class="i-lucide:undo-2 w-5 h-5" aria-hidden="true" />
               </button>
             </template>

Based on learnings: "In the npmx.dev project, focus-visible styling for buttons and selects is applied globally via main.css... Therefore, individual buttons or selects in Vue components should not rely on inline focus-visible utility classes like focus-visible:outline-accent/70."

app/components/Package/VersionDistribution.vue (1)

525-536: Remove inline focus-visible:outline-accent/70 utility class from button.

The project applies focus-visible styling for buttons globally via main.css. Inline focus-visible utilities on button elements should be avoided for consistency and maintainability.

♻️ Proposed fix to remove inline focus-visible class

             <template `#reset-action`="{ reset: resetMinimap }">
               <button
                 type="button"
                 aria-label="reset minimap"
-                class="absolute inset-is-1/2 -translate-x-1/2 -bottom-18 sm:inset-is-unset sm:translate-x-0 sm:bottom-auto sm:-inset-ie-20 sm:-top-3 flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
+                class="absolute inset-is-1/2 -translate-x-1/2 -bottom-18 sm:inset-is-unset sm:translate-x-0 sm:bottom-auto sm:-inset-ie-20 sm:-top-3 flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border sm:mb-0"
                 style="pointer-events: all !important"
                 `@click`="resetMinimap"
               >
                 <span class="i-lucide:undo-2 w-5 h-5" aria-hidden="true" />
               </button>
             </template>

Based on learnings: "In the npmx.dev project, focus-visible styling for buttons and selects is applied globally via main.css... Therefore, individual buttons or selects in Vue components should not rely on inline focus-visible utility classes like focus-visible:outline-accent/70."

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

❌ Patch coverage is 0% with 4 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Package/TrendsChart.vue	0.00%	2 Missing ⚠️
app/components/Package/VersionDistribution.vue	0.00%	2 Missing ⚠️

📢 Thoughts on this report? Let us know!