{"_id":"@andrewaitken/spektr","name":"@andrewaitken/spektr","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@andrewaitken/spektr","version":"0.1.0","description":"Design spec overlay for React. Alt+hover any element to inspect spacing, typography, colors.","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"scripts":{"build":"tsup","dev":"tsup --watch","test":"node --test"},"peerDependencies":{"react":">=18","react-dom":">=18"},"devDependencies":{"@types/react":"^19.0.0","@types/react-dom":"^19.0.0","react":"^19.0.0","react-dom":"^19.0.0","tsup":"^8.0.0","typescript":"^5.7.0"},"repository":{"type":"git","url":"git+https://github.com/AndrewAntoshkin/spektr.git"},"homepage":"https://antoshkin.tech/spektr","keywords":["react","design-system","inspect","overlay","spacing","typography","figma","devtools"],"author":{"name":"Andrew Antoshkin"},"license":"MIT","_id":"@andrewaitken/spektr@0.1.0","gitHead":"9fad0ffbaca8e1ba4000165742bd9e9117fd3cbe","bugs":{"url":"https://github.com/AndrewAntoshkin/spektr/issues"},"_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-aF/fffgU0zTICzcFOSWvXnzwd1tJAxbNYHZZm7Ltm4KenbT08ddSgVUzNfNR+tPAhFDaEoX8pCocgzLWZMch5g==","shasum":"4bf376b2d634740c815bb84b0c682ca9b6911632","tarball":"https://registry.npmjs.org/@andrewaitken/spektr/-/spektr-0.1.0.tgz","fileCount":7,"unpackedSize":38048,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCID8iAykHLtcJvHyJFXdt+FOuJp8tbnUfVNM2rniayjy8AiEAiN6Vo/kxz093BtMhE4YL0BrE5vpiJRhQLT+kDYoXjtY="}]},"_npmUser":{"name":"andrewaitken","email":"andrew.antoshkin@gmail.com"},"directories":{},"maintainers":[{"name":"andrewaitken","email":"andrew.antoshkin@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/spektr_0.1.0_1774617041722_0.801750081528616"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-27T13:10:41.629Z","0.1.0":"2026-03-27T13:10:41.872Z","modified":"2026-03-27T13:10:42.079Z"},"maintainers":[{"name":"andrewaitken","email":"andrew.antoshkin@gmail.com"}],"description":"Design spec overlay for React. Alt+hover any element to inspect spacing, typography, colors.","homepage":"https://antoshkin.tech/spektr","keywords":["react","design-system","inspect","overlay","spacing","typography","figma","devtools"],"repository":{"type":"git","url":"git+https://github.com/AndrewAntoshkin/spektr.git"},"author":{"name":"Andrew Antoshkin"},"bugs":{"url":"https://github.com/AndrewAntoshkin/spektr/issues"},"license":"MIT","readme":"# Spektr\n\nDesign spec overlay for React. Hold Alt and hover any element to inspect spacing, typography, and colors — like Figma Inspect, but in the browser.\n\n## Installation\n\n```bash\nnpm i spektr\n```\n\nRequires **React 18+**.\n\n## Usage\n\nWrap your app (or any section) with `<Spektr>`:\n\n```tsx\nimport { Spektr } from 'spektr';\n\nfunction App() {\n  return (\n    <Spektr>\n      <YourApp />\n    </Spektr>\n  );\n}\n```\n\nThen hold **Alt** and hover any element.\n\n### What you see\n\n- **Blue outline** — element boundary with dimensions\n- **Green overlay** — padding areas\n- **Orange overlay** — margin areas\n- **Spec tooltip** — typography (font, size, weight, line-height, color), spacing (padding, margin, gap), visual properties (background, border-radius, shadow), and layout info\n\n### Pin inspections\n\n**Alt+click** on any element to pin the overlay. **Alt+click** again to unpin.\n\n### Development-only\n\n```tsx\n<Spektr enabled={process.env.NODE_ENV === 'development'}>\n  <App />\n</Spektr>\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `enabled` | `boolean` | `true` | Enable/disable the overlay |\n| `children` | `ReactNode` | — | Your app content |\n\n## How it works\n\nSpektr uses `getComputedStyle()` and `getBoundingClientRect()` to read the actual rendered properties of any element. The overlay is rendered via React Portal so it doesn't interfere with your app's layout or z-index.\n\nNo CSS files needed — all styles are inline.\n\n## Features\n\n- Zero dependencies (only React peer dep)\n- No CSS imports required\n- TypeScript support with full type exports\n- Portal-based overlay (no z-index conflicts)\n- Works with Alt key (Option on Mac)\n- Pin/unpin inspections\n- Responsive tooltip positioning\n- Box model visualization (padding, margin, dimensions)\n\n## Exports\n\n```tsx\n// Component\nimport { Spektr } from 'spektr';\n\n// Utilities (for custom integrations)\nimport { computeSpecs, formatColor, formatSides, hasMeaningfulValue } from 'spektr';\n\n// Types\nimport type { SpektrProps, ElementSpecs, BoxSides } from 'spektr';\n```\n\n## Development\n\n```bash\ngit clone https://github.com/AndrewAntoshkin/spektr.git\ncd spektr\nnpm install\n\n# Build the component\nnpm run build\n\n# Run tests\nnpm test\n\n# Demo website\ncd website && npm install && npm run dev\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-802cd4d62df7fa75107301b3582c0039"}