{"_id":"@abvx/ascii-theme","_rev":"2-69c7fb056182fa5a42b46e53130b15bf","name":"@abvx/ascii-theme","dist-tags":{"latest":"0.3.1"},"versions":{"0.2.0":{"name":"@abvx/ascii-theme","version":"0.2.0","keywords":["ascii","theme","plugin","css","terminal"],"license":"MIT","_id":"@abvx/ascii-theme@0.2.0","maintainers":[{"name":"abvx","email":"a.biletskiy@gmail.com"}],"dist":{"shasum":"84d6179c2323d9147c44b5f6baf3926c54e3310e","tarball":"https://registry.npmjs.org/@abvx/ascii-theme/-/ascii-theme-0.2.0.tgz","fileCount":11,"integrity":"sha512-286VZkG9Fsg3qlq5+qPbqPRRKrZcaNJG5hp51cxrMoKRLsvlZUJSfc/Ul7FuhO+erv+fVTnLhOobN5A4AR570Q==","signatures":[{"sig":"MEUCIQDDsqWNthukPvUAklJYQEmvbfM7VbDJZLg08SbtMbiBSAIgNP7nbLHnX4Ex/x+RkBgJOdFP6rBoYvVVgSaANLb+48A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":52803},"main":"./dist/ascii-theme.umd.js","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","unpkg":"./dist/ascii-theme.umd.js","module":"./dist/ascii-theme.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/ascii-theme.es.js","require":"./dist/ascii-theme.umd.js"},"./base.css":"./dist/base.css","./style.css":"./dist/style.css"},"gitHead":"64e96d2f410fa626a9c4578239087ac8dc3a7c59","scripts":{"dev":"npm run demo:dev","build":"npm run build:types && vite build && cp src/base.css dist/base.css","preview":"npm run demo:preview","demo:dev":"vite --mode demo","demo:build":"vite build --mode demo","build:types":"tsc -p tsconfig.json --emitDeclarationOnly","demo:preview":"vite preview --mode demo"},"_npmUser":{"name":"abvx","email":"a.biletskiy@gmail.com"},"jsdelivr":"./dist/ascii-theme.umd.js","_npmVersion":"10.9.4","description":"Framework-agnostic ASCII theme layer with style/mode toggles and box-drawing stickers.","directories":{},"sideEffects":["dist/style.css","dist/base.css"],"_nodeVersion":"22.22.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^6.1.0","typescript":"^5.7.3"},"_npmOperationalInternal":{"tmp":"tmp/ascii-theme_0.2.0_1771686620013_0.286924529127327","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"_id":"@abvx/ascii-theme@0.3.1","bugs":{"url":"https://github.com/markoblogo/AsciiTheme/issues"},"dist":{"shasum":"161508a1a999c8495598ec5e093de652c4463ef1","tarball":"https://registry.npmjs.org/@abvx/ascii-theme/-/ascii-theme-0.3.1.tgz","fileCount":30,"integrity":"sha512-BeBbNIFESC/iK7H5jZew8cY4x9WXFghHgAdQKk/OX/eFSSKuxr/sOrYuiC/hkYwgMGO4mdqd4m/yqpfvPe6PSQ==","signatures":[{"sig":"MEUCIGtmufniIZv0rgnKL/IXqMnVPnSAmVK6Hgr8F+GGry+DAiEA0UUidmziqV4DNnCUg9D78kWtGwOfWAZc9oYjJjQJWWE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCID1YZLP+PyxQOKWudSpdMxSx91A9bpNtrGb7H0nQTHQhAiEAndd16THzkS67YR2LjknuBdScE9BdIHPUYuT+vteTeuo="}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@abvx%2fascii-theme@0.3.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":121206},"main":"./dist/index.cjs","name":"@abvx/ascii-theme","type":"module","style":"./dist/style.css","types":"./dist/index.d.ts","unpkg":"./dist/ascii-theme.umd.js","module":"./dist/ascii-theme.es.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/ascii-theme.es.js","require":"./dist/index.cjs"},"./vue":{"types":"./packages/vue/dist/index.d.ts","import":"./packages/vue/dist/index.js","require":"./packages/vue/dist/index.cjs"},"./react":{"types":"./packages/react/dist/index.d.ts","import":"./packages/react/dist/index.js","require":"./packages/react/dist/index.cjs"},"./base.css":"./dist/base.css","./stickers":{"types":"./dist/stickers.d.ts","import":"./dist/stickers.es.js","require":"./dist/stickers.cjs"},"./style.css":"./dist/style.css","./web-component":{"types":"./packages/web-component/dist/index.d.ts","import":"./packages/web-component/dist/index.js","require":"./packages/web-component/dist/index.cjs"}},"gitHead":"4254251c792335fc0158c7b2314d4187980cb156","license":"MIT","scripts":{"dev":"npm run demo:dev","test":"vitest run","build":"npm run build:types && vite build && cp src/base.css dist/base.css && npm run build:modules","check":"npm run verify:integration && npm run verify:package && npm run demo:build && npm audit --audit-level=high","preview":"npm run demo:preview","demo:dev":"vite --mode demo","demo:build":"vite build --mode demo","build:types":"tsc -p tsconfig.json --emitDeclarationOnly && tsc -p packages/react/tsconfig.json --emitDeclarationOnly && tsc -p packages/vue/tsconfig.json --emitDeclarationOnly && tsc -p packages/web-component/tsconfig.json --emitDeclarationOnly","demo:preview":"vite preview --mode demo","docs:capture":"node scripts/visual-regression.mjs --update","build:modules":"node scripts/build-modules.mjs","verify:visual":"npm run demo:build && node scripts/visual-regression.mjs","prepublishOnly":"npm run check","verify:package":"node scripts/verify-package.mjs","verify:integration":"vitest run tests/integration-smoke.test.ts tests/web-component.test.ts tests/core.test.ts tests/stickers.test.ts tests/react.test.tsx tests/vue.test.ts"},"version":"0.3.1","_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:4b58ab4e-79af-4cb4-9da4-dfee47ac6487"}},"homepage":"https://github.com/markoblogo/AsciiTheme#readme","jsdelivr":"./dist/ascii-theme.umd.js","keywords":["ascii","theme","plugin","css","terminal","retro","theme-toggle","dark-mode","terminal-ui","framework-agnostic","react","vue","web-components"],"repository":{"url":"git+https://github.com/markoblogo/AsciiTheme.git","type":"git"},"_npmVersion":"11.19.0","description":"Drop-in ASCII theme layer for Vanilla, React, Vue, and Web Components.","directories":{},"maintainers":[{"name":"abvx","email":"a.biletskiy@gmail.com"}],"sideEffects":["dist/style.css","dist/base.css","packages/web-component/dist/index.js","packages/web-component/dist/index.cjs"],"_nodeVersion":"24.20.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.42","vite":"^7.3.6","jsdom":"^27.4.0","pngjs":"^7.0.0","react":"^19.3.0","vitest":"^4.1.11","esbuild":"^0.28.2","react-dom":"^19.3.0","pixelmatch":"^7.2.0","playwright":"^1.63.0","typescript":"^6.0.3","@types/react":"^19.3.0","@types/react-dom":"^19.3.0"},"peerDependencies":{"vue":"^3.4.0 || ^3.5.0","react":"^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"vue":{"optional":true},"react":{"optional":true}},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ascii-theme_0.3.1_1789134621359_0.6379945136155469"}}},"time":{"created":"2026-02-21T15:10:19.935Z","modified":"2026-09-11T13:50:21.758Z","0.2.0":"2026-02-21T15:10:20.167Z","0.3.1":"2026-09-11T13:50:21.442Z"},"license":"MIT","keywords":["ascii","theme","plugin","css","terminal","retro","theme-toggle","dark-mode","terminal-ui","framework-agnostic","react","vue","web-components"],"description":"Drop-in ASCII theme layer for Vanilla, React, Vue, and Web Components.","maintainers":[{"name":"abvx","email":"a.biletskiy@gmail.com"}],"readme":"# AsciiTheme\n\n[![npm](https://img.shields.io/npm/v/%40abvx%2Fascii-theme)](https://www.npmjs.com/package/@abvx/ascii-theme)\n[![CI](https://github.com/markoblogo/AsciiTheme/actions/workflows/ci.yml/badge.svg)](https://github.com/markoblogo/AsciiTheme/actions/workflows/ci.yml)\n[![demo](https://img.shields.io/badge/demo-live-22c55e)](https://markoblogo.github.io/AsciiTheme/)\n[![license](https://img.shields.io/github/license/markoblogo/AsciiTheme)](LICENSE)\n\nAdd an optional ASCII visual layer to an existing site without replacing its design system.\nAsciiTheme can respect the host theme, manage its own theme, or provide an ASCII-first base preset.\n\n**[Try the live playground](https://markoblogo.github.io/AsciiTheme/)** · **[Install from npm](https://www.npmjs.com/package/@abvx/ascii-theme)**\n\n![AsciiTheme playground](docs/assets/playground/playground-overview.gif)\n\n## What it includes\n\n- `default` / `ascii` style switching with persistent state\n- built-in `light`, `dark`, `sepia`, and `matrix` themes\n- optional theme and style toggle controls\n- ASCII stickers and live `progress`, `clock`, `status-badge`, and `spinner` widgets\n- one package with Vanilla, React, Vue, and Web Component entry points\n- zero runtime dependencies\n\n## Install\n\n```bash\nnpm install @abvx/ascii-theme\n```\n\n```ts\nimport { initAsciiTheme } from \"@abvx/ascii-theme\";\nimport \"@abvx/ascii-theme/style.css\";\n\ninitAsciiTheme({\n  integrateTheme: \"auto\",\n  addStyleToggle: true,\n});\n```\n\n`auto` detects an existing light/dark theme and leaves it in control. If none exists, AsciiTheme can manage the mode itself.\n\n## Choose an integration\n\n| Use case | Import | Start with |\n| --- | --- | --- |\n| Existing site | `@abvx/ascii-theme` | `integrateTheme: \"auto\"` |\n| ASCII-first page | `@abvx/ascii-theme/base.css` | `base: true` |\n| React | `@abvx/ascii-theme/react` | `AsciiThemeBoot` |\n| Vue | `@abvx/ascii-theme/vue` | `createAsciiThemePlugin` |\n| Web Component | `@abvx/ascii-theme/web-component` | `<ascii-theme-toggle>` |\n\n### Managed theme and injected controls\n\n```ts\nimport { initAsciiTheme } from \"@abvx/ascii-theme\";\nimport \"@abvx/ascii-theme/style.css\";\n\ninitAsciiTheme({\n  integrateTheme: \"managed\",\n  defaultTheme: \"matrix\",\n  addThemeToggle: true,\n  addStyleToggle: true,\n  mountSelector: \"#theme-controls\",\n});\n```\n\n### React\n\n```tsx\nimport { AsciiThemeBoot, useAsciiTheme } from \"@abvx/ascii-theme/react\";\nimport \"@abvx/ascii-theme/style.css\";\n\nexport function ThemeControls() {\n  const theme = useAsciiTheme();\n\n  return (\n    <>\n      <AsciiThemeBoot options={{ integrateTheme: \"auto\" }} />\n      <button onClick={theme.toggleStyle}>ASCII: {theme.style}</button>\n    </>\n  );\n}\n```\n\n### Vue\n\n```ts\nimport { createApp } from \"vue\";\nimport { createAsciiThemePlugin } from \"@abvx/ascii-theme/vue\";\nimport \"@abvx/ascii-theme/style.css\";\n\ncreateApp(App)\n  .use(createAsciiThemePlugin({ integrateTheme: \"auto\" }))\n  .mount(\"#app\");\n```\n\n### Web Component\n\n```ts\nimport \"@abvx/ascii-theme/style.css\";\nimport \"@abvx/ascii-theme/web-component\";\n```\n\n```html\n<ascii-theme-toggle controls=\"both\"></ascii-theme-toggle>\n```\n\n### CDN\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@abvx/ascii-theme@0.3.1/dist/style.css\">\n<script src=\"https://unpkg.com/@abvx/ascii-theme@0.3.1/dist/ascii-theme.umd.js\"></script>\n<script>\n  AsciiTheme.initAsciiTheme({ addStyleToggle: true });\n</script>\n```\n\nPin the version in production so a future release cannot change the page unexpectedly.\n\n## Themes\n\n```ts\nimport { registerTheme, setTheme } from \"@abvx/ascii-theme\";\n\nregisterTheme(\"amber\", {\n  label: \"Amber terminal\",\n  mode: \"dark\",\n  ascii: {\n    bg: \"#160f00\",\n    fg: \"#ffbf47\",\n    muted: \"#b9822d\",\n    accent: \"#ffd27a\",\n    border: \"#8f611f\",\n  },\n});\n\nsetTheme(\"amber\");\n```\n\n## Stickers and widgets\n\n```ts\nimport { addSticker, updateSticker } from \"@abvx/ascii-theme/stickers\";\n\naddSticker({\n  id: \"deploy\",\n  preset: \"progress\",\n  target: \"#build-status\",\n  value: 35,\n  max: 100,\n  ariaLabel: \"Deployment progress\",\n});\n\nupdateSticker(\"deploy\", { value: 80 });\n```\n\nUse `decorative: true` for purely visual stickers. Supply `ariaLabel` when a widget communicates state.\n\n## Visual states\n\n| Default | ASCII |\n| --- | --- |\n| ![Default light](docs/assets/playground/default-light.png) | ![ASCII light](docs/assets/playground/ascii-light.png) |\n| ![Default dark](docs/assets/playground/default-dark.png) | ![ASCII matrix](docs/assets/playground/ascii-matrix.png) |\n\nThe playground also includes `ascii + dark` and `ascii + sepia` baselines. See [all captured states](docs/assets/playground).\n\n## Public API\n\nThe root export provides:\n\n- setup: `initAsciiTheme`, `AsciiTheme`\n- style: `setAsciiStyle`, `toggleAsciiStyle`, `getAsciiThemeState`\n- themes: `setTheme`, `registerTheme`, `getThemes`\n- mode compatibility: `setAsciiMode`, `toggleAsciiMode`\n- events: `subscribeAsciiTheme`\n- stickers: `renderAsciiStickers`, `addSticker`, `updateSticker`, `removeSticker`\n\nTypeScript declarations ship with every entry point. The package is SSR-safe: initialization becomes a no-op when the DOM is unavailable.\n\n## Browser support and scope\n\nAsciiTheme targets modern evergreen browsers. It styles supported HTML patterns and its own utilities; it does not automatically convert arbitrary hardcoded colors or third-party component markup. Start with `integrateTheme: \"auto\"` on an established site and review the affected pages visually.\n\n## Development\n\nRequires Node.js 20.19+ for the development toolchain.\n\n```bash\nnpm ci\nnpm run check\nnpm run demo:dev\n```\n\n`npm run check` builds the package, runs integration tests, verifies the packed ESM/CJS/framework entry points, builds the demo, and audits dependencies.\n\nMore detail:\n\n- [playground and visual capture](docs/playground.md)\n- [integration smoke checks](docs/integration-smoke-check.md)\n- [release verification](docs/release-surface.md)\n- [contributing](CONTRIBUTING.md)\n- [security policy](SECURITY.md)\n\n## Related ABVX projects\n\n- [ABVX Lab](https://lab.abvx.xyz/) — public project catalog\n- [AGENTS.md Generator](https://github.com/markoblogo/AGENTS.md_generator), [SET](https://github.com/markoblogo/SET), and [ABVX Agent Skills](https://github.com/markoblogo/abvx-agent-skills) — adjacent agent tooling\n- [Toki Pona Translator](https://github.com/markoblogo/toki-pona-translator) — consolidated Toki Pona toolkit with visual-language integrations\n\n## License\n\n[MIT](LICENSE)\n","readmeFilename":"README.md","homepage":"https://github.com/markoblogo/AsciiTheme#readme","repository":{"url":"git+https://github.com/markoblogo/AsciiTheme.git","type":"git"},"bugs":{"url":"https://github.com/markoblogo/AsciiTheme/issues"}}