Add CSS Border-Image Generator component and update sidebar

[trishantpahwa]

📝 Description

Adds a new CSS Border-Image Generator utility to the Dev Utilities Sandbox. The border-image property is hard to write by hand because it requires slicing an asset into nine regions with specific metrics — this tool makes it visual:

• Load Asset — 4 built-in geometric border patterns (Diamonds, Dots, Frame, Stripes) generated as inline SVG data URIs (fully offline), plus drag-and-drop / click-to-browse for custom images (loaded client-side via FileReader).
• Slice Guides — 4 sliders (Top / Right / Bottom / Left) with number inputs, a Linked/Unlinked toggle to move all sides together, a unit selector (unitless or %), and an optional fill keyword checkbox.
• Repeat Controls — dropdowns for border-image-repeat on horizontal and vertical edges (stretch, repeat, round, space), plus a border-width slider.
• Live Preview — a user-resizable box (resize: both) with the active border-image applied, showing how round vs stretch alters rendering as the box changes size.
• CSS Code Output — copy-ready border-style / border-width / border-image-source / border-image-slice / border-image-repeat block. Long data URLs are truncated in the display, but the copied CSS always contains the full source.

Wired up in all three required places:

• Route registered at /devutilities/border-image in src/App.jsx
• Nav item added to the Dev Utilities section in src/config/sidebarSections.js
• Utility card added to the cards array in src/pages/DevUtilities/DevUtilities.jsx (searchable on the overview page)

The component follows the same conventions as the existing CSS Gradient Generator (theme object via useTheme with light/dark variants, sonner toasts, react-icons, Tailwind card styling).

🔗 Related Issue

Closes #376

🎯 Type of Change

• fix: Bug fix
• feat: New feature
• style: UI/Theme changes (Monochrome)
• chore: Build/Maintenance

✅ Checklist

• Follows project's Monochrome design (Black/Grey/White) 🎨
• Follows Conventional Commits 📜
• Added screenshots (if UI was changed) 📸
• Tested locally on the latest version 🧪 (npm run build + ESLint clean, verified rendering in browser)

📸 Screenshots (if applicable)

Before	After
Tool did not exist

[vercel]

@trishantpahwa is attempting to deploy a commit to the shamilahmdt's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

👋 Hello, @trishantpahwa!

Thank you for your contribution to DevTasks.

The maintainer has been notified and will review your pull request shortly. If any changes are needed, we will let you know in the comments below.