{"_id":"@cybertramp/vitepress-image-preview","name":"@cybertramp/vitepress-image-preview","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@cybertramp/vitepress-image-preview","version":"0.1.0","description":"Image preview for VitePress.","homepage":"https://github.com/cybertramp/vitepress-image-preview#readme","repository":{"type":"git","url":"git+https://github.com/cybertramp/vitepress-image-preview.git"},"bugs":{"url":"https://github.com/cybertramp/vitepress-image-preview/issues"},"license":"MIT","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./src/style.css","./package.json":"./package.json"},"sideEffects":["./src/style.css"],"scripts":{"build":"bunx tsc && bun build ./src/index.ts --outdir ./dist --target browser --format esm --external vue --external vitepress","typecheck":"bunx tsc --noEmit","demo":"vitepress dev ./tests","demo:build":"vitepress build ./tests","demo:preview":"vitepress preview ./tests","prepare":"bun run build","prepublishOnly":"bun run build"},"peerDependencies":{"vitepress":">=1.0.0","vue":">=3.3.0"},"devDependencies":{"typescript":"^5.7.3","vitepress":"^2.0.0-alpha.19","vue":"^3.5.13"},"publishConfig":{"access":"public"},"_id":"@cybertramp/vitepress-image-preview@0.1.0","gitHead":"524423ccb8af3e9ece88fb822b4ed6d779cfce27","_nodeVersion":"24.3.0","_npmVersion":"11.4.2","dist":{"integrity":"sha512-3uj2r4+lF2LS9CemmjVCg4a4zoHt4VTNm3SSPPA4VD/3LxPxyYqFM5brrwtzMJxm7nWM/MCGah2SCw6+YG8J+w==","shasum":"76d6fcdda2d3a3da4c1f71d2dcd92f285f546a74","tarball":"https://registry.npmjs.org/@cybertramp/vitepress-image-preview/-/vitepress-image-preview-0.1.0.tgz","fileCount":6,"unpackedSize":31797,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCAJz88MZ8qKCF/PaholUw0L1BD8+8wFYQ2vBNYAer7+QIhAKSVdiZZYNEsF3iBJ02HwrHZrlcIkO9IX4HKLzqDsU2p"}]},"_npmUser":{"name":"cybertramp","email":"paran_son@outlook.com"},"directories":{},"maintainers":[{"name":"cybertramp","email":"paran_son@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vitepress-image-preview_0.1.0_1787923975133_0.6910907641751733"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-28T13:32:54.929Z","0.1.0":"2026-08-28T13:32:55.274Z","modified":"2026-08-28T13:32:55.499Z"},"maintainers":[{"name":"cybertramp","email":"paran_son@outlook.com"}],"description":"Image preview for VitePress.","homepage":"https://github.com/cybertramp/vitepress-image-preview#readme","repository":{"type":"git","url":"git+https://github.com/cybertramp/vitepress-image-preview.git"},"bugs":{"url":"https://github.com/cybertramp/vitepress-image-preview/issues"},"license":"MIT","readme":"# VitePress Image Preview\n\nA lightweight image preview plugin for [VitePress](https://vitepress.dev/) that provides modal-based image viewing with zoom, pan, copy, and download functionality.\n\n![](./screenshot.png)\n\n## Features\n\n- 🔍 **Image Preview Modal** - Click images in your documentation to open an interactive preview\n- 🔎 **Zoom Control** - Zoom in/out with mouse wheel or buttons (0.5x - 3.0x)\n- 🖱️ **Pan & Drag** - Drag enlarged images to view different areas\n- 📋 **Copy URL** - Copy image URL to clipboard with visual feedback\n- ⬇️ **Download** - Direct image download with automatic filename detection\n- ⌨️ **Keyboard Navigation** - Full keyboard support (Esc, +/-, Tab, arrows)\n- 📱 **Responsive** - Mobile-optimized with touch support\n- ♿ **Accessible** - WCAG 2.1 compliant with focus management and screen reader support\n\n## Installation\n\n### npm\n\n```bash\nnpm install @cybertramp/vitepress-image-preview\n```\n\n### yarn\n\n```bash\nyarn add @cybertramp/vitepress-image-preview\n```\n\n### bun\n\n```bash\nbun add @cybertramp/vitepress-image-preview\n# OR\nbun add github:cybertramp/vitepress-image-preview\n```\n\n## Usage\n\nUpdate your VitePress theme configuration file (`theme/index.ts`):\n\n```ts\nimport DefaultTheme from \"vitepress/theme\";\nimport { withImagePreview } from \"@cybertramp/vitepress-image-preview\";\nimport \"@cybertramp/vitepress-image-preview/style.css\";\n\nexport default withImagePreview(DefaultTheme, {\n  selector: \".vp-doc img\",    // CSS selector for previewable images\n  initialScale: 1,            // Initial zoom level when modal opens\n  zoomStep: 0.25,             // Zoom increment for buttons/wheel\n  minScale: 0.5,              // Minimum zoom level\n  maxScale: 3,                // Maximum zoom level\n  closeOnBackdrop: true,      // Close modal when clicking backdrop\n});\n```\n\n## Configuration\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `selector` | string | `.vp-doc img` | CSS selector for images to preview |\n| `initialScale` | number | `1` | Initial zoom level (1 = 100%) |\n| `zoomStep` | number | `0.25` | Zoom increment per action |\n| `minScale` | number | `0.5` | Minimum allowed zoom (0.5 = 50%) |\n| `maxScale` | number | `3` | Maximum allowed zoom (3 = 300%) |\n| `closeOnBackdrop` | boolean | `true` | Close modal on backdrop click |\n\n## Excluding Images\n\nTo exclude specific images from preview functionality, add either attribute or class:\n\n```html\n<!-- Using data attribute -->\n<img src=\"/logo.svg\" alt=\"Logo\" data-no-image-preview>\n\n<!-- Using class on parent -->\n<a class=\"no-image-preview\" href=\"/original.png\">\n  <img src=\"/thumbnail.png\" alt=\"Thumbnail\">\n</a>\n```\n\n## Controls\n\n### Keyboard Shortcuts\n\n| Key | Action |\n|-----|--------|\n| `Esc` | Close preview |\n| `+` / `=` | Zoom in |\n| `-` | Zoom out |\n| `Tab` | Navigate controls |\n| `Shift + Tab` | Navigate controls (reverse) |\n\n### Mouse\n\n| Action | Behavior |\n|--------|----------|\n| Scroll wheel | Zoom in/out |\n| Drag (zoomed) | Pan image |\n| Click backdrop | Close (if enabled) |\n\n## Project Structure\n\n```\nsrc/\n├── index.ts       # Vue component + theme wrapper\n└── style.css      # Modal styles and animations\n```\n\n## Development\n\n### Install Dependencies\n\n```bash\nbun install\n```\n\n### Build\n\n```bash\nbun run build\n```\n\nType declarations and CSS are automatically included in the bundle.\n\n### Preview Demo\n\n```bash\nbun run demo\n```\n\nOpens a local VitePress dev server at `http://localhost:5173`.\n\n### Build Static Demo\n\n```bash\nbun run demo:build\n```\n\n### Preview Built Demo\n\n```bash\nbun run demo:preview\n```\n\n## Technical Details\n\n- **Type**: ES Module with TypeScript declarations\n- **Peer Dependencies**: `vue >= 3.3.0`, `vitepress >= 1.0.0`\n- **Build**: TypeScript + Vite\n- **CSS**: Scoped to plugin, separate import to avoid bundle duplication\n- **Bundle Size**: Minimal (render functions only, no unnecessary abstractions)\n\n## Browser Support\n\nModern browsers with support for:\n- ES2022\n- CSS Grid & Flexbox\n- ResizeObserver\n- Clipboard API (with fallback)\n- Pointer Events\n\n## License\n\nMIT\n\n---\n\nDeveloped for [VitePress](https://vitepress.dev/) documentation sites.\n","readmeFilename":"README.md","_rev":"1-955821d33589ea24226675dbeee84e29"}