{"_id":"@5mts/theme-utilities","name":"@5mts/theme-utilities","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@5mts/theme-utilities","version":"1.1.0","description":"Lightweight utility modules for WordPress themes","type":"module","main":"src/index.js","exports":{".":"./src/index.js","./scroll-detector":"./src/scroll-detector.js"},"repository":{"type":"git","url":"git+https://github.com/5mts/theme-utilities.git"},"keywords":["wordpress","theme","scroll","utilities"],"author":{"name":"5MT Studio"},"license":"MIT","_id":"@5mts/theme-utilities@1.1.0","gitHead":"00fe33d417aea6c9b14a466dc7b490728f184d21","bugs":{"url":"https://github.com/5mts/theme-utilities/issues"},"homepage":"https://github.com/5mts/theme-utilities#readme","_nodeVersion":"23.6.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-6ejVv7rX6FvqqBzX4jEv7AqDdyHepRspoSzmJEDAblOkGiT3QxURwQ2v5tGsT32IfLolN6fP4MGkZ6c4l1cQ+A==","shasum":"75ade5af34e78356cd498bdf60382dc70ea685d7","tarball":"https://registry.npmjs.org/@5mts/theme-utilities/-/theme-utilities-1.1.0.tgz","fileCount":6,"unpackedSize":15213,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCzJJxh1kQlyfSl263pIoxo78eAqjNbBIZgskSBsPtmwQIgKNiU7ZD34GFyUpHTvUZtQThpV3/AGkgtm8FgBaBzn48="}]},"_npmUser":{"name":"5mts","email":"david@fivemountains.co"},"directories":{},"maintainers":[{"name":"5mts","email":"david@fivemountains.co"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/theme-utilities_1.1.0_1779420836157_0.8672999592348225"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-22T03:33:55.986Z","1.1.0":"2026-05-22T03:33:56.329Z","modified":"2026-05-22T03:33:56.558Z"},"maintainers":[{"name":"5mts","email":"david@fivemountains.co"}],"description":"Lightweight utility modules for WordPress themes","homepage":"https://github.com/5mts/theme-utilities#readme","keywords":["wordpress","theme","scroll","utilities"],"repository":{"type":"git","url":"git+https://github.com/5mts/theme-utilities.git"},"author":{"name":"5MT Studio"},"bugs":{"url":"https://github.com/5mts/theme-utilities/issues"},"license":"MIT","readme":"# @5mts/theme-utilities\n\nLightweight utility modules for WordPress themes.\n\n## Installation\n\n**JavaScript** (npm):\n\n```bash\nnpm install @5mts/theme-utilities\n```\n\n**PHP** (Composer):\n\nAdd the repository to your theme's `composer.json`:\n\n```json\n{\n \"repositories\": [\n {\n \"type\": \"vcs\",\n \"url\": \"git@github.com:5mts/theme-utilities.git\",\n \"no-api\": true\n }\n ]\n}\n```\n\nThen require the package:\n\n```bash\ncomposer require 5mts/theme-utilities:dev-main\n```\n\n## Modules\n\n### Scroll Detector\n\nAdds scroll-related state to the `` element via data attributes or classes. Useful for styling sticky headers, back-to-top buttons, and scroll-aware UI.\n\n#### Basic Usage\n\n```js\nimport { initScrollDetector } from '@5mts/theme-utilities';\n\ninitScrollDetector();\n```\n\nThis adds the following data attributes to ``:\n\n| Attribute | Values | Description |\n|-----------|--------|-------------|\n| `data-scroll-dir` | `up` / `down` | Current scroll direction |\n| `data-at-top` | `1` / `0` | Within 50px of page top |\n| `data-at-bottom` | `1` / `0` | Within 50px of page bottom |\n| `data-near-top` | `1` / `0` | Within 50% of viewport height from top |\n| `data-near-bottom` | `1` / `0` | Within 50% of viewport height from bottom |\n\n#### CSS Examples\n\n```css\n/* Hide header on scroll down, show on scroll up */\n.site-header {\n transition: transform 0.3s ease;\n}\n[data-scroll-dir=\"down\"] .site-header {\n transform: translateY(-100%);\n}\n\n/* Transparent header at top of page */\n[data-at-top=\"1\"] .site-header {\n background: transparent;\n}\n\n/* Show back-to-top button when not near top */\n.back-to-top {\n opacity: 0;\n transition: opacity 0.3s;\n}\n[data-near-top=\"0\"] .back-to-top {\n opacity: 1;\n}\n```\n\n#### Custom Configuration\n\n```js\nimport { initScrollDetector } from '@5mts/theme-utilities';\n\nconst cleanup = initScrollDetector({\n // Thresholds\n hideAfterPx: 120, // scroll distance before hiding header (default: 120)\n upIntentPx: 18, // upward travel needed to reveal (default: 18)\n minDeltaPx: 2, // ignore movements smaller than this (default: 2)\n edgeThresholdPx: 50, // distance for at-top/at-bottom (default: 50)\n zoneThreshold: 0.5, // viewport fraction for near-top/near-bottom (default: 0.5)\n\n // Features - set to false to disable\n scrollDir: true,\n atTop: true,\n atBottom: true,\n nearTop: true,\n nearBottom: false, // disable this one\n\n // Output mode\n mode: 'data', // 'data' for data-attributes, 'class' for classes\n\n // Target element (default: document.documentElement)\n target: document.documentElement,\n});\n\n// Later, to remove listener and clean up attributes:\ncleanup();\n```\n\n#### Class Mode\n\nUse `mode: 'class'` to add classes instead of data attributes:\n\n```js\ninitScrollDetector({ mode: 'class' });\n```\n\nThis adds classes like:\n- `scroll-dir-up` / `scroll-dir-down`\n- `at-top` / `at-bottom` (present when true)\n- `near-top` / `near-bottom` (present when true)\n\n```css\n/* Class-based styling */\n.scroll-dir-down .site-header {\n transform: translateY(-100%);\n}\n\n.at-top .site-header {\n background: transparent;\n}\n```\n\n### SVG Logo Inliner (PHP)\n\nReplaces the Site Logo block's `` with inline SVG markup server-side. This enables full CSS control over the logo (fill color, hover effects, transitions) with no flash of unstyled content and no JavaScript required.\n\n#### Usage\n\nIn your theme's `functions.php`:\n\n```php\nuse FiveMTS\\ThemeUtilities\\SvgLogoInliner;\nSvgLogoInliner::init();\n```\n\nThat's it. When the Site Logo is an SVG, the block output will contain inline `