{"_id":"@allystudio/element-outliner","name":"@allystudio/element-outliner","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@allystudio/element-outliner","version":"0.1.0","description":"A modern CSS-based element outliner for web development debugging, inspired by Pesticide CSS","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"build":"tsup","dev":"tsup --watch","test":"vitest","test:watch":"vitest --watch","test:coverage":"vitest --coverage","clean":"rimraf dist","prepublishOnly":"npm run clean && npm run build && npm run test"},"keywords":["css","debugging","web-development","dom","outline","pesticide","developer-tools","accessibility","frontend"],"author":{"name":"AllyStudio"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/allystudio/packages.git","directory":"packages/element-outliner"},"bugs":{"url":"https://github.com/allystudio/packages/issues"},"homepage":"https://github.com/allystudio/packages/tree/main/packages/element-outliner#readme","devDependencies":{"@types/jsdom":"^21.1.6","@types/node":"^20.11.5","jsdom":"^24.0.0","rimraf":"^5.0.5","tsup":"^8.0.1","typescript":"^5.3.3","vitest":"^1.2.1"},"engines":{"node":">=16"},"_id":"@allystudio/element-outliner@0.1.0","gitHead":"5143accf8e81b183d4d397f7467047899b660330","_nodeVersion":"23.11.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-YOf/3dZf8T42h/cENrRD9L/5eruULvSE2b4Ecd3gbIjF0S48f3TLKadFRKyi1E4g7o5YQ8jNYnG6MOajFeefPA==","shasum":"329a81f57f194079b9ad2cea905d2d9afdca8bf1","tarball":"https://registry.npmjs.org/@allystudio/element-outliner/-/element-outliner-0.1.0.tgz","fileCount":9,"unpackedSize":42037,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHwptjJ6/kSfm/uZtqtnMjszcAfI0nk2r+B91n8ata3TAiEA58fF3M8EZK+U74TtIQhYNJaYE6olS8+94I24bjUqHI8="}]},"_npmUser":{"name":"allystudio","email":"privat@aleksejdix.com","actor":{"name":"allystudio","email":"privat@aleksejdix.com","type":"user"}},"directories":{},"maintainers":[{"name":"allystudio","email":"privat@aleksejdix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/element-outliner_0.1.0_1750401923298_0.14493236287875177"},"_hasShrinkwrap":false}},"time":{"created":"2025-06-20T06:45:23.215Z","0.1.0":"2025-06-20T06:45:23.497Z","modified":"2025-06-20T06:45:23.767Z"},"maintainers":[{"name":"allystudio","email":"privat@aleksejdix.com"}],"description":"A modern CSS-based element outliner for web development debugging, inspired by Pesticide CSS","homepage":"https://github.com/allystudio/packages/tree/main/packages/element-outliner#readme","keywords":["css","debugging","web-development","dom","outline","pesticide","developer-tools","accessibility","frontend"],"repository":{"type":"git","url":"git+https://github.com/allystudio/packages.git","directory":"packages/element-outliner"},"author":{"name":"AllyStudio"},"bugs":{"url":"https://github.com/allystudio/packages/issues"},"license":"MIT","readme":"# @allystudio/element-outliner\n\nA modern CSS-based element outliner for web development debugging, inspired by Pesticide CSS with enhanced features and better performance.\n\n## Features\n\n- 🎨 **80+ Element Types** - Distinct colors for every HTML element\n- ⚡ **Zero Dependencies** - Lightweight and fast\n- 🔧 **Configurable** - Custom colors, exclusions, and hover effects\n- 🧹 **Clean API** - Functional programming approach with proper cleanup\n- 📦 **TypeScript** - Full type safety and IntelliSense support\n- 🧪 **Well Tested** - Comprehensive test suite with 100% coverage\n\n## Installation\n\n```bash\nnpm install @allystudio/element-outliner\n```\n\n## Quick Start\n\n```typescript\nimport { createElementOutliner } from '@allystudio/element-outliner'\n\n// Create an outliner instance\nconst outliner = createElementOutliner()\n\n// Start outlining elements\noutliner.start()\n\n// Toggle on/off\noutliner.toggle()\n\n// Stop outlining\noutliner.stop()\n\n// Clean up when done\noutliner.destroy()\n```\n\n## API Reference\n\n### `createElementOutliner(options?)`\n\nCreates a new element outliner instance.\n\n#### Options\n\n```typescript\ninterface ElementOutlinerOptions {\n  /** Whether to show hover effects (default: true) */\n  enableHover?: boolean\n\n  /** Custom colors for specific elements */\n  customColors?: Record<string, string>\n\n  /** Elements to exclude from outlining */\n  excludeSelectors?: string[]\n\n  /** CSS selector for elements to exclude from hover effects */\n  excludeFromHover?: string\n}\n```\n\n#### Returns\n\nAn `ElementOutliner` instance with the following methods:\n\n- `start()` - Start outlining elements\n- `stop()` - Stop outlining elements\n- `toggle()` - Toggle outlining on/off, returns current state\n- `isActive()` - Check if outlining is currently active\n- `configure(options)` - Update configuration at runtime\n- `destroy()` - Clean up and remove all styles\n\n## Examples\n\n### Basic Usage\n\n```typescript\nimport { createElementOutliner } from '@allystudio/element-outliner'\n\nconst outliner = createElementOutliner()\noutliner.start()\n\n// Elements will now be outlined with distinct colors\n```\n\n### Custom Colors\n\n```typescript\nconst outliner = createElementOutliner({\n  customColors: {\n    'div': '#ff0000',\n    'p': '#00ff00',\n    'span': '#0000ff'\n  }\n})\n\noutliner.start()\n```\n\n### Exclude Elements\n\n```typescript\nconst outliner = createElementOutliner({\n  excludeSelectors: ['.no-outline', '[data-test]'],\n  excludeFromHover: '.tooltip, .modal'\n})\n\noutliner.start()\n```\n\n### Disable Hover Effects\n\n```typescript\nconst outliner = createElementOutliner({\n  enableHover: false\n})\n\noutliner.start()\n```\n\n### Runtime Configuration\n\n```typescript\nconst outliner = createElementOutliner()\noutliner.start()\n\n// Later, update configuration\noutliner.configure({\n  customColors: { 'button': '#purple' },\n  enableHover: false\n})\n```\n\n### Toggle with Keyboard Shortcut\n\n```typescript\nconst outliner = createElementOutliner()\n\ndocument.addEventListener('keydown', (e) => {\n  if (e.ctrlKey && e.key === 'o') {\n    e.preventDefault()\n    outliner.toggle()\n  }\n})\n```\n\n## Color Palette\n\nThe outliner includes a comprehensive color palette for 80+ HTML elements:\n\n```typescript\nimport { OUTLINE_COLORS } from '@allystudio/element-outliner'\n\nconsole.log(OUTLINE_COLORS.div)    // '#036cdb'\nconsole.log(OUTLINE_COLORS.p)      // '#ac050b'\nconsole.log(OUTLINE_COLORS.button) // '#da8301'\n```\n\n### Element Categories\n\n- **Structure**: `body`, `main`, `header`, `footer`, `nav`, `aside`, `section`, `article`\n- **Typography**: `h1-h6`, `p`, `span`, `strong`, `em`, `code`, `pre`\n- **Forms**: `form`, `input`, `button`, `select`, `textarea`, `label`, `fieldset`\n- **Lists**: `ul`, `ol`, `li`, `dl`, `dt`, `dd`\n- **Tables**: `table`, `thead`, `tbody`, `tfoot`, `tr`, `th`, `td`\n- **Media**: `img`, `video`, `audio`, `canvas`, `svg`\n- **Interactive**: `a`, `button`, `details`, `summary`\n\n## Browser Support\n\n- Chrome/Edge 60+\n- Firefox 55+\n- Safari 12+\n- All modern browsers with CSS outline support\n\n## Performance\n\n- **Lightweight**: ~3KB minified + gzipped\n- **Fast**: CSS-only approach, no DOM manipulation\n- **Memory Efficient**: Single style element, automatic cleanup\n- **Non-blocking**: No impact on page performance\n\n## Use Cases\n\n- **Development Debugging** - Visualize page structure\n- **CSS Layout Issues** - Identify spacing and positioning problems\n- **Accessibility Testing** - See element hierarchy\n- **Design System Validation** - Verify semantic markup\n- **Teaching/Learning** - Understand HTML structure\n\n## Framework Integration\n\n### React\n\n```typescript\nimport { useEffect, useRef } from 'react'\nimport { createElementOutliner } from '@allystudio/element-outliner'\n\nfunction useElementOutliner(enabled: boolean) {\n  const outlinerRef = useRef(createElementOutliner())\n\n  useEffect(() => {\n    const outliner = outlinerRef.current\n\n    if (enabled) {\n      outliner.start()\n    } else {\n      outliner.stop()\n    }\n\n    return () => outliner.destroy()\n  }, [enabled])\n\n  return outlinerRef.current\n}\n```\n\n### Vue\n\n```typescript\nimport { ref, watchEffect, onUnmounted } from 'vue'\nimport { createElementOutliner } from '@allystudio/element-outliner'\n\nexport function useElementOutliner() {\n  const enabled = ref(false)\n  const outliner = createElementOutliner()\n\n  watchEffect(() => {\n    if (enabled.value) {\n      outliner.start()\n    } else {\n      outliner.stop()\n    }\n  })\n\n  onUnmounted(() => {\n    outliner.destroy()\n  })\n\n  return { enabled, outliner }\n}\n```\n\n## Contributing\n\nContributions are welcome! Please read our contributing guidelines and submit pull requests to our GitHub repository.\n\n## License\n\nMIT License - see LICENSE file for details.\n\n## Inspiration\n\nThis project is inspired by the classic [Pesticide CSS](https://pesticide.io/) by Adam Morse, enhanced with modern features, TypeScript support, and a clean functional API.\n\n## Related Packages\n\n- [`@allystudio/element-inspector`](https://npmjs.com/package/@allystudio/element-inspector) - Interactive element inspection\n- [`@allystudio/focus-order-visualizer`](https://npmjs.com/package/@allystudio/focus-order-visualizer) - Focus order visualization\n- [`@allystudio/accessibility-utils`](https://npmjs.com/package/@allystudio/accessibility-utils) - Accessibility utilities\n","readmeFilename":"README.md","_rev":"1-830bfb5ffd7b0698b55586cf6b6917c6"}