{"_id":"@axiom-core/vue-adapter","_rev":"2-9b313da066986e2e77a981318a65cd35","name":"@axiom-core/vue-adapter","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@axiom-core/vue-adapter","version":"0.1.0","author":{"name":"Axiom Platform Architecture Team"},"license":"MIT","_id":"@axiom-core/vue-adapter@0.1.0","maintainers":[{"name":"haneefkhan001","email":"haneefkhan18@outlook.com"}],"homepage":"https://github.com/Haneefe/Axiom-Core","bugs":{"url":"https://github.com/Haneefe/Axiom-Core/issues"},"dist":{"shasum":"9ad57d869d289d90c73ed5fecc2f281eeb4628cc","tarball":"https://registry.npmjs.org/@axiom-core/vue-adapter/-/vue-adapter-0.1.0.tgz","fileCount":38,"integrity":"sha512-gzQRa2ng1Hxg7TwgHYQwqW0FlJguFUXWII6L/LYlgkUjrRBOMW5eM9Xbw8f8yi4XIcE63SMY+fyVdQhqsX6lwg==","signatures":[{"sig":"MEYCIQDvsH4QI4+KW+aDObbIAPwnTFwG8zH0WxfiR2Oo7jFS2AIhAIVC+Fkclb3AOhw4uJTTu0rCmv7l7HFzaESpNhUvTMfB","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":62221},"main":"./dist/index.js","type":"module","_from":"file:axiom-core-vue-adapter-0.1.0.tgz","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":"./dist/index.js","./runtime":"./dist/runtime.js"},"scripts":{"test":"vitest run","build":"tsc --build","clean":"rimraf dist","verify":"pnpm verify:boundaries && pnpm verify:hash && pnpm verify:size && pnpm verify:determinism","postbuild":"pnpm verify:boundaries","verify:hash":"node scripts/validate-golden-hash.js","verify:size":"node scripts/validate-bundle-size.js","verify:boundaries":"node scripts/validate-bundle-boundaries.js","verify:determinism":"node scripts/test-determinism-matrix.js"},"_npmUser":{"name":"haneefkhan001","email":"haneefkhan18@outlook.com"},"_resolved":"C:\\Users\\hanee\\AppData\\Local\\Temp\\fe3a4e401079aff760e35e7cc9754c6f\\axiom-core-vue-adapter-0.1.0.tgz","_integrity":"sha512-gzQRa2ng1Hxg7TwgHYQwqW0FlJguFUXWII6L/LYlgkUjrRBOMW5eM9Xbw8f8yi4XIcE63SMY+fyVdQhqsX6lwg==","repository":{"url":"git+https://github.com/Haneefe/Axiom-Core.git","type":"git"},"_npmVersion":"10.9.2","description":"Official Axiom Design System adapter for Vue 3","directories":{},"sideEffects":false,"_nodeVersion":"22.14.0","dependencies":{"@axiom-core/ssr-utils":"0.1.0","@axiom-core/css-bridge":"0.1.0","@axiom-core/dom-injector":"0.1.0","@axiom-core/token-schema":"0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","vitest":"^1.0.0","esbuild":"^0.19.0","happy-dom":"^20.8.3","typescript":"^5.3.0","@types/node":"^20.0.0","@axiom-core/core-engine":"0.1.0","@axiom-core/invariant-engine":"0.1.0"},"peerDependencies":{"vue":">=3.0.0","@axiom-core/core-engine":">=0.1.0","@axiom-core/invariant-engine":">=0.1.0"},"peerDependenciesMeta":{"@axiom-core/core-engine":{"optional":true},"@axiom-core/invariant-engine":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/vue-adapter_0.1.0_1772634761136_0.12139794656339098","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@axiom-core/vue-adapter","version":"0.1.1","description":"Official Axiom Design System adapter for Vue 3","author":{"name":"Axiom Platform Architecture Team"},"license":"MIT","type":"module","sideEffects":false,"exports":{".":"./dist/index.js","./runtime":"./dist/runtime.js"},"main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","dependencies":{"@axiom-core/css-bridge":"0.1.1","@axiom-core/ssr-utils":"0.1.1","@axiom-core/token-schema":"0.1.1","@axiom-core/dom-injector":"0.1.1"},"devDependencies":{"@types/node":"^20.0.0","esbuild":"^0.19.0","happy-dom":"^20.8.3","typescript":"^5.3.0","vitest":"^1.0.0","vue":"^3.4.0","@axiom-core/invariant-engine":"0.1.1","@axiom-core/core-engine":"0.1.1"},"peerDependencies":{"@axiom-core/core-engine":">=0.1.1","@axiom-core/invariant-engine":">=0.1.1","vue":">=3.0.0"},"peerDependenciesMeta":{"@axiom-core/core-engine":{"optional":true},"@axiom-core/invariant-engine":{"optional":true}},"repository":{"type":"git","url":"git+https://github.com/Haneefe/Axiom-Core.git"},"homepage":"https://github.com/Haneefe/Axiom-Core","bugs":{"url":"https://github.com/Haneefe/Axiom-Core/issues"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc --build","clean":"rimraf dist","test":"vitest run","verify:boundaries":"node scripts/validate-bundle-boundaries.js","verify:hash":"node scripts/validate-golden-hash.js","verify:size":"node scripts/validate-bundle-size.js","verify:determinism":"node scripts/test-determinism-matrix.js","verify":"pnpm verify:boundaries && pnpm verify:hash && pnpm verify:size && pnpm verify:determinism","postbuild":"pnpm verify:boundaries"},"_id":"@axiom-core/vue-adapter@0.1.1","_integrity":"sha512-gVDXS7s160sA8h8t+5dpsq33y/rndeRfHKTZXfiejkQP5ueSICm3Srmj9TtkpGY3Ily3OKf+4L+5wa/0NEFSoA==","_resolved":"C:\\Users\\hanee\\AppData\\Local\\Temp\\f8a8a95654fb6cc70fbb078531f87e5e\\axiom-core-vue-adapter-0.1.1.tgz","_from":"file:axiom-core-vue-adapter-0.1.1.tgz","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-gVDXS7s160sA8h8t+5dpsq33y/rndeRfHKTZXfiejkQP5ueSICm3Srmj9TtkpGY3Ily3OKf+4L+5wa/0NEFSoA==","shasum":"38601121ae9aba678dfb4db8f2320a919a0139ff","tarball":"https://registry.npmjs.org/@axiom-core/vue-adapter/-/vue-adapter-0.1.1.tgz","fileCount":38,"unpackedSize":66697,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDiHYmWu2sZ06Q/QuZxjK8hEteobGSLibnqX1FRBaXSgwIhALI2s5kvM9MxtpdZ7YhRyj28Bp1IUufMXUOqFNt5Mt6u"}]},"_npmUser":{"name":"haneefkhan001","email":"haneefkhan18@outlook.com"},"directories":{},"maintainers":[{"name":"haneefkhan001","email":"haneefkhan18@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-adapter_0.1.1_1772637962642_0.9663669869431071"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-04T14:32:41.038Z","modified":"2026-03-04T15:26:02.943Z","0.1.0":"2026-03-04T14:32:41.266Z","0.1.1":"2026-03-04T15:26:02.789Z"},"bugs":{"url":"https://github.com/Haneefe/Axiom-Core/issues"},"author":{"name":"Axiom Platform Architecture Team"},"license":"MIT","homepage":"https://github.com/Haneefe/Axiom-Core","repository":{"type":"git","url":"git+https://github.com/Haneefe/Axiom-Core.git"},"description":"Official Axiom Design System adapter for Vue 3","maintainers":[{"name":"haneefkhan001","email":"haneefkhan18@outlook.com"}],"readme":"# @axiom-core/vue-adapter\r\n\r\nThe official Axiom Design System adapter for Vue 3. Connects `@axiom-core/runtime-engine` resolved themes to Vue applications by providing a provider component, deterministic CSS variable injection, and reactive theme updates through the Vue Composition API.\r\n\r\n## Responsibilities\r\n\r\n- **Provider component** — exposes the current resolved theme to the Vue component tree via `provide`/`inject`\r\n- **CSS variable injection** — emits deterministic CSS custom properties into the DOM using `@axiom-core/css-bridge` and `@axiom-core/dom-injector`\r\n- **Reactive theme updates** — watches the theme manager and triggers re-injection when the resolved theme changes\r\n- **SSR support** — renders a `<style>` tag on the server via `@axiom-core/ssr-utils` for hydration-safe style delivery\r\n\r\nThis package does **not** contain runtime composition logic. Theme composition is handled by `@axiom-core/runtime-engine`.\r\n\r\n---\r\n\r\n## Installation\r\n\r\n## Installation\r\n\r\n```bash\r\npnpm add @axiom-core/runtime-engine\r\npnpm add @axiom-core/vue-adapter\r\n```\r\n\r\nVue 3 is a peer dependency:\r\n\r\n```bash\r\npnpm add vue\r\n```\r\n\r\n---\r\n\r\n## Usage\r\n\r\n### Base Entry — Pre-Resolved Theme\r\n\r\nUse the base entry when you have a pre-resolved theme (e.g., statically exported JSON) and do not need runtime axis switching:\r\n\r\n```vue\r\n<script setup>\r\nimport { AxiomProvider } from '@axiom-core/vue-adapter';\r\nimport resolvedTheme from './theme.resolved.json';\r\n</script>\r\n\r\n<template>\r\n  <AxiomProvider :resolvedTheme=\"resolvedTheme\" scope=\"global\">\r\n    <YourApp />\r\n  </AxiomProvider>\r\n</template>\r\n```\r\n\r\n### Runtime Entry — Dynamic Theme Composition\r\n\r\nUse the runtime entry when you need dynamic axis switching (e.g., light/dark mode toggle, brand switching, density control):\r\n\r\n```vue\r\n<script setup>\r\nimport { AxiomProviderRuntime } from '@axiom-core/vue-adapter/runtime';\r\nimport { createThemeManager } from '@axiom-core/runtime-engine';\r\nimport { enterprisePrimitives } from '@axiom-core/primitives';\r\nimport { baseSemantic, semanticAxes } from '@axiom-core/semantic-baseline';\r\n\r\nconst manager = createThemeManager({\r\n  primitives: enterprisePrimitives,\r\n  baseSemantic,\r\n  registry: semanticAxes,\r\n  initialConfig: { mode: 'light' },\r\n});\r\n</script>\r\n\r\n<template>\r\n  <AxiomProviderRuntime :manager=\"manager\">\r\n    <YourApp />\r\n  </AxiomProviderRuntime>\r\n</template>\r\n```\r\n\r\n---\r\n\r\n## Provider Setup\r\n\r\n`AxiomProvider` (base) and `AxiomProviderRuntime` (runtime) are both Vue 3 components that call Vue's `provide()` to make the Axiom context available to all descendant components.\r\n\r\n#### Props — `AxiomProvider` (base entry)\r\n\r\n| Prop | Type | Required | Description |\r\n|---|---|---|---|\r\n| `resolvedTheme` | `ResolvedSemanticTokens` | Yes | Pre-resolved theme object. All token references must already be resolved to primitive values. |\r\n| `scope` | `string` | No | CSS scope identifier. Defaults to `'global'`. Use unique values for nested scoped providers. |\r\n| `mode` | `'dev' \\| 'prod'` | No | CSS variable naming mode. `dev` = readable names, `prod` = hashed names. |\r\n\r\n#### Props — `AxiomProviderRuntime` (runtime entry)\r\n\r\n| Prop | Type | Required | Description |\r\n|---|---|---|---|\r\n| `manager` | `ThemeManager` | Yes | A theme manager created by `createThemeManager()` from `@axiom-core/runtime-engine`. |\r\n| `scope` | `string` | No | CSS scope identifier. |\r\n| `mode` | `'dev' \\| 'prod'` | No | CSS variable naming mode. |\r\n\r\n---\r\n\r\n## Reactive Updates\r\n\r\nThe Vue adapter integrates with Vue's reactivity system. When using the runtime entry, axis changes propagate automatically:\r\n\r\n```vue\r\n<script setup>\r\nimport { useAxiomTheme } from '@axiom-core/vue-adapter';\r\n\r\nconst { resolvedTheme, config, updateAxis } = useAxiomTheme();\r\n\r\nfunction toggleDarkMode() {\r\n  updateAxis('mode', config.value.mode === 'light' ? 'dark' : 'light');\r\n}\r\n</script>\r\n\r\n<template>\r\n  <button @click=\"toggleDarkMode\">Toggle Dark Mode</button>\r\n</template>\r\n```\r\n\r\n### `useAxiomTheme()` Composable\r\n\r\nReturns reactive Axiom context from the nearest `AxiomProvider` ancestor.\r\n\r\n| Return Value | Type | Description |\r\n|---|---|---|\r\n| `resolvedTheme` | `Ref<ResolvedSemanticTokens>` | Reactive resolved theme. Updates automatically when axes change. |\r\n| `config` | `Ref<ThemeConfig>` | Reactive axis configuration. |\r\n| `updateAxis` | `(axis: ThemeAxis, value: string) => void` | Updates a single axis (e.g., `'mode'`, `'brand'`) and triggers re-injection. |\r\n\r\n---\r\n\r\n## Variable Name Modes\r\n\r\n| Mode | Variable Format | Use Case |\r\n|---|---|---|\r\n| `dev` | `--axiom-surface-background` | Human-readable names. Easier to debug in Vue DevTools. |\r\n| `prod` | `--ax-a1b2c3` | Hashed names. Shorter, collision-free, minimal footprint. |\r\n\r\nCSS variable values are identical in both modes. Only the property names differ.\r\n\r\n---\r\n\r\n## SSR Compatibility\r\n\r\n`vue-adapter` is fully compatible with Vue SSR (Nuxt, `renderToString`, etc.). Use `renderAxiomStyles` to produce a `<style>` tag for injection into the server-rendered HTML:\r\n\r\n```typescript\r\nimport { renderAxiomStyles } from '@axiom-core/vue-adapter';\r\n\r\nconst { cssText, attributes } = renderAxiomStyles({\r\n  resolvedTheme,\r\n  mode: 'prod',\r\n  scope: 'global',\r\n});\r\n\r\nconst html = `\r\n<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <style id=\"axiom-ssr\">${cssText}</style>\r\n  </head>\r\n  <body>${appHtml}</body>\r\n</html>\r\n`;\r\n```\r\n\r\nOn hydration, the client-side provider detects the existing SSR style tag and skips the initial injection to avoid a flash of unstyled content.\r\n\r\n#### Nuxt Integration\r\n\r\n```typescript\r\n// plugins/axiom.ts\r\nimport { defineNuxtPlugin } from '#app';\r\nimport { createThemeManager } from '@axiom-core/runtime-engine';\r\nimport { enterprisePrimitives } from '@axiom-core/primitives';\r\nimport { baseSemantic, semanticAxes } from '@axiom-core/semantic-baseline';\r\n\r\nexport default defineNuxtPlugin(() => {\r\n  const manager = createThemeManager({\r\n    primitives: enterprisePrimitives,\r\n    baseSemantic,\r\n    registry: semanticAxes,\r\n    initialConfig: { mode: 'light' },\r\n  });\r\n  return { provide: { axiomManager: manager } };\r\n});\r\n```\r\n\r\n---\r\n\r\n## Bundle Entries\r\n\r\n| Import Path | Contents | When to Use |\r\n|---|---|---|\r\n| `@axiom-core/vue-adapter` | Provider + composables (no runtime engine) | Pre-resolved themes |\r\n| `@axiom-core/vue-adapter/runtime` | Above + `AxiomProviderRuntime` component | Dynamic theme composition |\r\n\r\n---\r\n\r\n## Peer Dependencies\r\n\r\n| Package | Version |\r\n|---|---|\r\n| `vue` | `>=3` |\r\n| `@axiom-core/runtime-engine` | `>=0.1.0` (optional — only for runtime entry) |\r\n| `@axiom-core/core-engine` | `>=0.1.0` (optional — only for runtime entry) |\r\n\r\n---\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}