{"_id":"@artidev/vue-odontogram","_rev":"5-c1f179fc2b0074da429615053961c5bb","name":"@artidev/vue-odontogram","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.0":{"name":"@artidev/vue-odontogram","version":"0.1.0","keywords":["odontogram","vue","vue3","dentistry","dental-chart"],"license":"MIT","_id":"@artidev/vue-odontogram@0.1.0","maintainers":[{"name":"artidev","email":"olanda188@gmail.com"}],"homepage":"https://github.com/ArnoldOlanda/odontogram-packages/tree/main/packages/vue","bugs":{"url":"https://github.com/ArnoldOlanda/odontogram-packages/issues"},"dist":{"shasum":"23b9f9d564d78f1eb11bb3ccc1f809a8eb93625d","tarball":"https://registry.npmjs.org/@artidev/vue-odontogram/-/vue-odontogram-0.1.0.tgz","fileCount":7,"integrity":"sha512-QmpzRZYT+MDixGkHzx5L3pPR5jZBZPBZN/nGLpxUiUbo5Jhfv7sC8rnHVaCzRo0/iTZHI2Bap109aWYsBZ+AVQ==","signatures":[{"sig":"MEUCIFiYshcUujHeD/mAqZyBRYCt243NSemYmOoxQFH984iOAiEAv3dlyeSnMm5ge7+JGdz2IBbCEedGWmJgGvcAxTV1Bug=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32261},"main":"./dist/index.js","type":"module","style":"./dist/index.css","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/index.css","./package.json":"./package.json"},"gitHead":"d4e82fabfa57a23aa0ff41c6a4173fff28fd64cd","scripts":{"build":"vite build && vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"artidev","email":"olanda188@gmail.com"},"repository":{"url":"git+https://github.com/ArnoldOlanda/odontogram-packages.git","type":"git","directory":"packages/vue"},"_npmVersion":"10.8.2","description":"Vue 3 wrapper for the Artidev odontogram runtime. It provides a ready-to-use odontogram component with `v-model`, readonly mode, bundled UI controls, and packaged styles.","directories":{},"_nodeVersion":"20.19.6","dependencies":{"@artidev/odontogram-core":"0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-odontogram_0.1.0_1781716417786_0.45670163067744096","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@artidev/vue-odontogram","version":"0.1.1","keywords":["odontogram","vue","vue3","dentistry","dental-chart"],"license":"MIT","_id":"@artidev/vue-odontogram@0.1.1","maintainers":[{"name":"artidev","email":"olanda188@gmail.com"}],"homepage":"https://github.com/ArnoldOlanda/odontogram-packages/tree/main/packages/vue","bugs":{"url":"https://github.com/ArnoldOlanda/odontogram-packages/issues"},"dist":{"shasum":"d8ac530929133161afaa005957e5990c6c2eb032","tarball":"https://registry.npmjs.org/@artidev/vue-odontogram/-/vue-odontogram-0.1.1.tgz","fileCount":7,"integrity":"sha512-rqL+jAzHe6v0UbaMBg0zhfGti0yXUV/by9/XDRyiXrlAC2NzPPzf+Zme6+Pv0oZrctoucwp1BREb1T9J5uQu2Q==","signatures":[{"sig":"MEQCIALr7JHBMc6/hVffDNb8QIy5wtPuA6TU0BBT+9mYnXwFAiAwVz4tRQbU5OOGCzOLgs5GCixjPSKmQeLke5vBJw+qKA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32359},"main":"./dist/index.js","type":"module","style":"./dist/index.css","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/index.css","./package.json":"./package.json"},"gitHead":"d87d5b61dbe93d7c10b36d225d81d6ac119e257c","scripts":{"build":"vite build && vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"artidev","email":"olanda188@gmail.com"},"repository":{"url":"git+https://github.com/ArnoldOlanda/odontogram-packages.git","type":"git","directory":"packages/vue"},"_npmVersion":"10.8.2","description":"Vue 3 wrapper for the Artidev odontogram runtime. It provides a ready-to-use odontogram component with `v-model`, readonly mode, bundled UI controls, and packaged styles.","directories":{},"_nodeVersion":"20.19.6","dependencies":{"@artidev/odontogram-core":"0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-odontogram_0.1.1_1781730423979_0.5424558650608937","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@artidev/vue-odontogram","version":"0.1.2","keywords":["odontogram","vue","vue3","dentistry","dental-chart"],"license":"MIT","_id":"@artidev/vue-odontogram@0.1.2","maintainers":[{"name":"artidev","email":"olanda188@gmail.com"}],"homepage":"https://github.com/ArnoldOlanda/odontogram-packages/tree/main/packages/vue","bugs":{"url":"https://github.com/ArnoldOlanda/odontogram-packages/issues"},"dist":{"shasum":"a72057dde3f0bf488a55c3936f7ec995b5c67f8e","tarball":"https://registry.npmjs.org/@artidev/vue-odontogram/-/vue-odontogram-0.1.2.tgz","fileCount":7,"integrity":"sha512-VKTMuY44VzmceJim9JujpWaJy5FPyeeSzw2kIVqPVn8txVKsBYj53YBrtItBH1Coew7vekFH6sxLLpvr0jR6wg==","signatures":[{"sig":"MEQCIE6r9eKAmwTMMHMAisFSmSIgvzD1wjtTFkA775ps2NYXAiBGT5jPP0niB+5tM/OzfnBEj4729emcoMUiCpYphqW8KA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35399},"main":"./dist/index.js","type":"module","style":"./dist/index.css","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/index.css","./package.json":"./package.json"},"gitHead":"af0d6d0f7ea1813038304789fbfb9ff707d29cc6","scripts":{"build":"vite build && vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"artidev","email":"olanda188@gmail.com"},"repository":{"url":"git+https://github.com/ArnoldOlanda/odontogram-packages.git","type":"git","directory":"packages/vue"},"_npmVersion":"10.8.2","description":"Ready-to-use Vue 3 odontogram component with built-in layout, controls, styles, and `v-model` support.","directories":{},"_nodeVersion":"20.19.6","dependencies":{"@artidev/odontogram-core":"0.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-odontogram_0.1.2_1782184206340_0.18994453490749996","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@artidev/vue-odontogram","version":"0.1.3","keywords":["odontogram","vue","vue3","dentistry","dental-chart"],"license":"MIT","_id":"@artidev/vue-odontogram@0.1.3","maintainers":[{"name":"artidev","email":"olanda188@gmail.com"}],"homepage":"https://github.com/ArnoldOlanda/odontogram-packages/tree/main/packages/vue","bugs":{"url":"https://github.com/ArnoldOlanda/odontogram-packages/issues"},"dist":{"shasum":"817c6324d2d6fd8bb9f76f0d294a9988ff37a865","tarball":"https://registry.npmjs.org/@artidev/vue-odontogram/-/vue-odontogram-0.1.3.tgz","fileCount":7,"integrity":"sha512-4mI6f488FEY7qJgSEWF3Y1t62dUoJzCUFGlMvk/18wjBOgqhP+FrN3tx1KOJZaWEQ9EuGgceaOjn+nX9Xob0yA==","signatures":[{"sig":"MEQCIAXaUzKFQAAucvlELM3v1aIKYFJtNF29hUt1u1NfydSIAiBPoqNp3yGM1LbVlPqitgm9fBPlTjFuVp5Aci3P+BwWPg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35400},"main":"./dist/index.js","type":"module","style":"./dist/index.css","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/index.css","./package.json":"./package.json"},"gitHead":"fa9c7b4ed9019985f7f11516e7ff170c16bc19a8","scripts":{"build":"vite build && vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json","typecheck":"vue-tsc --noEmit"},"_npmUser":{"name":"artidev","email":"olanda188@gmail.com"},"repository":{"url":"git+https://github.com/ArnoldOlanda/odontogram-packages.git","type":"git","directory":"packages/vue"},"_npmVersion":"10.8.2","description":"Ready-to-use Vue 3 odontogram component with built-in layout, controls, styles, and `v-model` support.","directories":{},"_nodeVersion":"20.19.6","dependencies":{"@artidev/odontogram-core":"^0.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"vue":"^3.5.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-odontogram_0.1.3_1784742154878_0.9684590434997686","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@artidev/vue-odontogram","version":"0.1.4","license":"MIT","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","style":"./dist/index.css","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./style.css":"./dist/index.css","./package.json":"./package.json"},"keywords":["odontogram","vue","vue3","dentistry","dental-chart"],"repository":{"type":"git","url":"git+https://github.com/ArnoldOlanda/odontogram-packages.git","directory":"packages/vue"},"homepage":"https://github.com/ArnoldOlanda/odontogram-packages/tree/main/packages/vue","bugs":{"url":"https://github.com/ArnoldOlanda/odontogram-packages/issues"},"publishConfig":{"access":"public"},"peerDependencies":{"vue":"^3.5.0"},"dependencies":{"@artidev/odontogram-core":"^0.2.0"},"scripts":{"build":"vite build && vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build.json","typecheck":"vue-tsc --noEmit"},"_id":"@artidev/vue-odontogram@0.1.4","gitHead":"c506c2ad548ccc70861e5bd870691637cb011677","description":"Ready-to-use Vue 3 odontogram component with built-in layout, controls, styles, and `v-model` support.","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-O9HpqDelAQgq1X3eWLkCnChlTyZRKK0xCobgDWmqeycHkdoLjOIHzI6TBVVsBjMpzLiT/YJkNHVQ1dC2y/2qcQ==","shasum":"1d4e87c45113ab34605bdd86088bc5289b529cc9","tarball":"https://registry.npmjs.org/@artidev/vue-odontogram/-/vue-odontogram-0.1.4.tgz","fileCount":7,"unpackedSize":42046,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDviuGGP+2PDTq2MwMFlU3YpCUMGKwTzuVhmUmvO5bRMAiEAn3c5Ik2KSUUI689mC4JLBr2X87D8nW7FTy67+Plf244="}]},"_npmUser":{"name":"artidev","email":"olanda188@gmail.com"},"directories":{},"maintainers":[{"name":"artidev","email":"olanda188@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-odontogram_0.1.4_1784906406593_0.3923074503058428"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-17T17:13:37.559Z","modified":"2026-07-24T15:20:06.915Z","0.1.0":"2026-06-17T17:13:37.936Z","0.1.1":"2026-06-17T21:07:04.108Z","0.1.2":"2026-06-23T03:10:06.549Z","0.1.3":"2026-07-22T17:42:35.011Z","0.1.4":"2026-07-24T15:20:06.772Z"},"bugs":{"url":"https://github.com/ArnoldOlanda/odontogram-packages/issues"},"license":"MIT","homepage":"https://github.com/ArnoldOlanda/odontogram-packages/tree/main/packages/vue","keywords":["odontogram","vue","vue3","dentistry","dental-chart"],"repository":{"type":"git","url":"git+https://github.com/ArnoldOlanda/odontogram-packages.git","directory":"packages/vue"},"description":"Ready-to-use Vue 3 odontogram component with built-in layout, controls, styles, and `v-model` support.","maintainers":[{"name":"artidev","email":"olanda188@gmail.com"}],"readme":"# @artidev/vue-odontogram\r\n\r\nReady-to-use Vue 3 odontogram component with built-in layout, controls, styles, and `v-model` support.\r\n\r\nThis package wraps [`@artidev/odontogram-core`](../core/README.md) with a fully styled UI. If you want a working chart in minutes, start here.\r\n\r\n## Quick path\r\n\r\n1. Install the package and its core dependency (npm installs the core automatically).\r\n2. Import the stylesheet once in your app entry.\r\n3. Bind the component with `v-model`.\r\n\r\n```bash\r\nnpm install @artidev/vue-odontogram\r\n```\r\n\r\n```ts\r\n// app entry or any module that mounts the component\r\nimport '@artidev/vue-odontogram/style.css'\r\n```\r\n\r\n```vue\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue'\r\nimport Odontogram from '@artidev/vue-odontogram'\r\n\r\nconst chartState = ref({})\r\n</script>\r\n\r\n<template>\r\n  <Odontogram v-model=\"chartState\" />\r\n</template>\r\n```\r\n\r\n## When to use this package\r\n\r\n| Use it when | Don't use it when |\r\n|---|---|\r\n| You are in a Vue 3 app (>= 3.5). | You need a non-Vue wrapper. Use `@artidev/odontogram-core`. |\r\n| You want a plug-and-play chart with built-in controls. | You need raw runtime methods exposed in templates. |\r\n| You want to ship less custom CSS. | You have very specific UI requirements — use the core and roll your own. |\r\n| You want theming through CSS variables. | |\r\n\r\n## How it works\r\n\r\nThe component instantiates `@artidev/odontogram-core` against a `.odontogram-root` element on mount, wires the engine's `onChange` to `update:modelValue`, and tears it down on unmount. Internal markup is owned by the engine; the wrapper only provides layout, theme variables, and prop plumbing.\r\n\r\nIf the engine API changes (new `init` option, additional events, etc.) you only need to upgrade `@artidev/odontogram-core`. This wrapper follows the core's lifecycle but exposes a stable Vue surface.\r\n\r\n## Props\r\n\r\n| Prop | Type | Default | Description |\r\n|---|---|---|---|\r\n| `modelValue` | `object` | `{}` | Full chart state controlled by the parent. Pass `{}` to reset |\r\n| `readonly` | `boolean` | `false` | Blocks editing interactions in the chart and the control panel |\r\n| `hideControls` | `boolean` | `false` | Hides the top toolbar and right-side control panel — chart only |\r\n\r\n## Emits\r\n\r\n| Event | Payload | When |\r\n|---|---|---|\r\n| `update:modelValue` | `OdontogramState` | After any chart change. Full state object, not deltas |\r\n\r\nThe component does **not** expose per-tooth-click or toolbar-toggle events. If you need them, drop down to `@artidev/odontogram-core` and bind a custom wrapper.\r\n\r\n## Slots\r\n\r\nThis component does not expose slots. The toolbar and control panel are part of the engine's UI surface; customization happens through:\r\n\r\n- CSS variables for theming (see [Styling](#styling))\r\n- The `readonly` and `hideControls` props\r\n- Asset overrides via the core\r\n\r\n## v-model flow\r\n\r\n```\r\nparent                         <Odontogram>                  core engine\r\n  │                                │                              │\r\n  │  setProps({ modelValue })      │                              │\r\n  │ ─────────────────────────────► │  importState(value)          │\r\n  │                                │ ───────────────────────────► │\r\n  │                                │                              │\r\n  │                                │  onChange(fullState)         │\r\n  │                                │ ◄─────────────────────────── │\r\n  │  update:modelValue(fullState)  │                              │\r\n  │ ◄───────────────────────────── │                              │\r\n```\r\n\r\n### Guarantees\r\n\r\n- The component suppresses re-import of the same object it just emitted upward, so `v-model` doesn't loop.\r\n- Pass `{}` to `modelValue` to reset the chart.\r\n- Internal state changes (driven by `importState`) never emit `update:modelValue` redundantly — the engine's `onChange` is gated by a microtask-based \"ignored depth\" counter.\r\n- When `readonly` changes, the engine is updated through `setReadOnly()`.\r\n\r\n## TypeScript\r\n\r\n```vue\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue'\r\nimport type { OdontogramState } from '@artidev/odontogram-core'\r\nimport Odontogram from '@artidev/vue-odontogram'\r\nimport '@artidev/vue-odontogram/style.css'\r\n\r\nconst chartState = ref<OdontogramState>({})\r\n</script>\r\n\r\n<template>\r\n  <Odontogram v-model=\"chartState\" />\r\n</template>\r\n```\r\n\r\nFor the full per-tooth schema and accepted enum values, see the [State schema](../core/README.md#state-schema) section of the core package.\r\n\r\n## Styling\r\n\r\n### Import the stylesheet once\r\n\r\n```ts\r\nimport '@artidev/vue-odontogram/style.css'\r\n```\r\n\r\nIf you skip this, the component will render but the chart grid, tooth tiles, icons, and control panel will be unstyled. The stylesheet is also what makes the engine's dynamically injected nodes (`.tooth-grid`, `.tooth-tile`, `.odon-ctx-menu`) render correctly.\r\n\r\n### Theme variables\r\n\r\nOverride these CSS custom properties on a parent element to theme the chart:\r\n\r\n| Variable | Default | Description |\r\n|---|---|---|\r\n| `--odon-line` | `#d7e0ec` | Border color for cards, tiles, and the panel |\r\n| `--odon-text` | `#1e2a3a` | Primary text color |\r\n| `--odon-muted` | `#5b6b7d` | Secondary text color (hints, subtitles) |\r\n| `--odon-accent` | `#3b7bff` | Primary accent (selected tile border, focus ring) |\r\n| `--odon-accent2` | `#12b981` | Success accent (toggles in `aria-pressed=\"true\"` state) |\r\n\r\n```vue\r\n<style scoped>\r\n.dark-chart {\r\n  --odon-line: #2a3651;\r\n  --odon-text: #e8eef9;\r\n  --odon-muted: #98a4ba;\r\n  --odon-accent: #5a9bff;\r\n  --odon-accent2: #34d399;\r\n}\r\n</style>\r\n\r\n<template>\r\n  <div class=\"dark-chart\">\r\n    <Odontogram v-model=\"chartState\" />\r\n  </div>\r\n</template>\r\n```\r\n\r\n### Scoped vs global CSS\r\n\r\nThe component ships two style blocks internally:\r\n\r\n- `<style scoped>` — applies to the wrapper's own elements (toolbar, panel, card structure).\r\n- `<style>` (global) — applies to classes the engine injects dynamically at runtime (`.tooth-grid`, `.tooth-tile`, `.odon-ctx-menu`, etc.).\r\n\r\nThe global block is required because the engine creates DOM nodes outside Vue's scoped-style attribute mechanism. The `@artidev/vue-odontogram/style.css` bundle includes both.\r\n\r\n## Examples\r\n\r\n### Basic usage\r\n\r\n```vue\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue'\r\nimport Odontogram from '@artidev/vue-odontogram'\r\nimport '@artidev/vue-odontogram/style.css'\r\n\r\nconst chartState = ref({})\r\n</script>\r\n\r\n<template>\r\n  <Odontogram v-model=\"chartState\" />\r\n</template>\r\n```\r\n\r\n### Read-only review screen\r\n\r\n```vue\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue'\r\nimport Odontogram from '@artidev/vue-odontogram'\r\nimport '@artidev/vue-odontogram/style.css'\r\n\r\nconst chartState = ref({\r\n  11: { toothSelection: 'implant', crownMaterial: 'zircon' },\r\n  21: { toothSelection: 'tooth-base', crownMaterial: 'broken' },\r\n})\r\n</script>\r\n\r\n<template>\r\n  <Odontogram v-model=\"chartState\" readonly />\r\n</template>\r\n```\r\n\r\n### Embed chart only (no toolbar, no panel)\r\n\r\n```vue\r\n<template>\r\n  <Odontogram v-model=\"chartState\" hide-controls />\r\n</template>\r\n```\r\n\r\n### Reset from the parent\r\n\r\n```vue\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue'\r\nimport Odontogram from '@artidev/vue-odontogram'\r\nimport '@artidev/vue-odontogram/style.css'\r\n\r\nconst chartState = ref<Record<number, object>>({})\r\n\r\nfunction clearChart() {\r\n  chartState.value = {}\r\n}\r\n</script>\r\n\r\n<template>\r\n  <button type=\"button\" @click=\"clearChart\">Clear chart</button>\r\n  <Odontogram v-model=\"chartState\" />\r\n</template>\r\n```\r\n\r\n### Persist with `localStorage`\r\n\r\n```vue\r\n<script setup lang=\"ts\">\r\nimport { ref, watch } from 'vue'\r\nimport Odontogram from '@artidev/vue-odontogram'\r\nimport '@artidev/vue-odontogram/style.css'\r\nimport type { OdontogramState } from '@artidev/odontogram-core'\r\n\r\nconst STORAGE_KEY = 'odontogram-state'\r\nconst chartState = ref<OdontogramState>(\r\n  JSON.parse(localStorage.getItem(STORAGE_KEY) ?? '{}'),\r\n)\r\n\r\nwatch(chartState, (state) => {\r\n  localStorage.setItem(STORAGE_KEY, JSON.stringify(state))\r\n}, { deep: true })\r\n</script>\r\n\r\n<template>\r\n  <Odontogram v-model=\"chartState\" />\r\n</template>\r\n```\r\n\r\n### Inspect the serialized state\r\n\r\n```vue\r\n<script setup lang=\"ts\">\r\nimport { computed, ref } from 'vue'\r\nimport Odontogram from '@artidev/vue-odontogram'\r\nimport '@artidev/vue-odontogram/style.css'\r\n\r\nconst chartState = ref({})\r\nconst serialized = computed(() => JSON.stringify(chartState.value, null, 2))\r\n</script>\r\n\r\n<template>\r\n  <Odontogram v-model=\"chartState\" />\r\n  <pre>{{ serialized }}</pre>\r\n</template>\r\n```\r\n\r\n### Dark theme\r\n\r\n```vue\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue'\r\nimport Odontogram from '@artidev/vue-odontogram'\r\nimport '@artidev/vue-odontogram/style.css'\r\n\r\nconst chartState = ref({})\r\n</script>\r\n\r\n<style scoped>\r\n.dark-chart {\r\n  --odon-line: #2a3651;\r\n  --odon-text: #e8eef9;\r\n  --odon-muted: #98a4ba;\r\n  --odon-accent: #5a9bff;\r\n  --odon-accent2: #34d399;\r\n}\r\n</style>\r\n\r\n<template>\r\n  <div class=\"dark-chart\">\r\n    <Odontogram v-model=\"chartState\" />\r\n  </div>\r\n</template>\r\n```\r\n\r\n## Browser support\r\n\r\nModern browsers with ES2020 + `import.meta.url` support. No IE11. Tested on the latest Chrome, Firefox, Safari, and Edge.\r\n\r\n## Peer dependencies\r\n\r\n| Package | Version |\r\n|---|---|\r\n| `vue` | `^3.5.0` |\r\n\r\nThe runtime depends on `@artidev/odontogram-core` as a normal dependency. You do not need to install it explicitly.\r\n\r\n## Migration from 0.1.x\r\n\r\nThere are **no API changes** in 0.1.3. The only change is bumping the `@artidev/odontogram-core` dependency to `^0.2.0` so the consumer build emits the bundled SVG assets. If you saw 404 errors on tooth SVGs in production before, they should be gone after upgrading.\r\n\r\nIf you were on `vue@^3.4.0`, bump to `^3.5.0` to match this package's peer dependency.\r\n\r\n## Related packages\r\n\r\n- [`@artidev/odontogram-core`](../core/README.md) — the underlying runtime. Read this if you need asset overrides, custom wrappers, or the full state schema.\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}