v1.4.2 — Per-Tooth Notes System

What's New

Per-Tooth Notes

• Double-click any tooth tile to open a note editor popover
• Popover positioned near the tooth with viewport clamping
• Save and Delete buttons for note management
• Note icon (📝) displayed next to the tooth number in label cells
• Note text shown in hover tooltips with 📝 prefix
• Touch support: "Note" button in the zoom popover on touch devices
• Read-only mode guard: editor does not open in read-only mode

Togglable via Prop

• New enableNotes prop on the App component (default: false)
• New setNotesEnabled(value) / getNotesEnabled() API functions
• Notes are opt-in — host app controls whether notes are available

JSON Export/Import

• Notes included in JSON export (optional field, only when non-empty)
• Notes restored on JSON import
• JSON version bumped to 1.3 (backward compatible)

New i18n Keys

• note.title, note.save, note.delete, note.placeholder — all 8 languages (HU/EN/DE/ES/IT/SK/PL/RU)

Testing

• 2 new tests for note i18n — 163 total tests across 9 files
• All tests passing

Full Changelog: v1.4.1...v1.4.2

v1.4.1 — Keyboard Accessibility, Read-only Mode & Selection Animations

What's New

Keyboard Accessibility (WCAG)

• ARIA listbox/option roles on the tooth grid and tiles
• aria-selected synced with selection state, aria-multiselectable on grid
• Enter/Space to toggle tooth selection
• Arrow keys to navigate between teeth (Left/Right within row, Up/Down between arches)
• Escape to clear selection
• :focus-visible outline styles in both light and dark mode
• Hidden wisdom teeth are properly removed from tab order (tabindex="-1", aria-hidden)

Read-only Mode

• New readOnly prop on the App component
• New setReadOnly(value) / getReadOnly() API functions
• Disables all click, touch, and keyboard interactions
• Control panel dimmed with opacity: 0.5 and pointer-events: none
• All tiles removed from tab order
• Ideal for print views, reports, and view-only displays

Selection Animations

• Pulsing dashed border via ::after pseudo-element around selected teeth
• Glowing drop-shadow effect on selected tooth SVGs
• Smooth .25s ease transitions for selection/deselection
• Full dark mode support with dedicated keyframes
• prefers-reduced-motion: reduce — static fallback for motion-sensitive users

New i18n Keys

• readOnly.label added to all 8 languages (HU/EN/DE/ES/IT/SK/PL/RU)

Testing

• 7 new tests in a11y.test.ts — 161 total tests across 9 files
• All tests passing

Full Changelog: v1.4.0...v1.4.1

v1.4.0 — Mobile Touch UX & Custom SVG Plugin System

What's New

Mobile Touch UX Interactions

• Tap-to-zoom — touch a tooth tile to see a magnified SVG popover
• Long-press (500ms) — context menu showing the tooth's full status summary
• Pinch-to-zoom — two-finger zoom gesture on the tooth chart grid
• Arch toggle — switch between upper/lower arches on narrow screens (≤600px)
• WCAG 44px touch targets via @media (pointer: coarse) for accessibility
• 112 new i18n translations for touch interactions across all 8 languages

Custom SVG Plugin System

• New OdontogramPlugin type for injecting custom SVG content into tooth renderings
• 3-layer z-order priority: base (z=0), restoration (z=3), overlay (z=6)
• Per-tooth customStates for plugin data, automatically included in JSON export/import
• State tooltip displaying all active statuses when hovering/tapping a tooth
• State validation with 5 built-in rules and localized warning messages
• JSON export/import version bumped to 1.2

New Public API

Function	Description
registerPlugins(plugins)	Register custom SVG plugins
setPluginState(toothNo, pluginId, value)	Set custom state for a tooth
getPluginState(toothNo, pluginId)	Get custom state for a tooth
getToothStateSummary(toothNo)	Get localized state summary

New plugins prop on the App component for declarative plugin registration.

Testing

• 26 new tests (10 touch + 16 plugin) — 154 total tests across 8 files
• All tests passing

Documentation

• TypeDoc API documentation updated with new exports
• README updated in all 4 languages (EN/DE/ES/HU)
• CHANGELOG rewritten fully in English

Full Changelog: v1.3.0...v1.4.0

v1.3.0

v1.3.0 — Automated Testing, API Documentation, Custom Theme Config

New Features

🧪 Vitest Testing Framework

• 128 tests across 6 test files with full coverage of the public API
• Tested areas: numbering (FDI/Universal/Palmer), translations (8 languages), presets, i18n system, App component, theme configuration
• Scripts: npm run test, npm run test:watch, npm run test:coverage

📖 TypeDoc API Documentation

• JSDoc comments on all exported types and functions
• npm run docs generates the docs/ directory (GitHub Pages compatible)

🎨 Theme Configuration (OdontogramThemeConfig)

• 8 color properties: background, panel, card, text, muted, line, accent, accent2
• CSS custom properties (--odon-*) with fallback defaults
• New themeConfig prop on the App component
• Compatible with both dark mode and custom themes simultaneously
• Works with Tailwind CSS and vanilla CSS projects alike

Example

<App
  themeConfig={{
    colors: {
      accent: '#e74c3c',
      background: '#fafafa',
    },
  }}
/>

Full changelog: CHANGELOG.md

v1.2.0 — Dark Mode Support

Dark Mode Support

Full light/dark theme switching for the odontogram editor.

New Features

• Dark mode toggle — sun/moon icon button in the topbar, placed between language and numbering selectors
• Standalone mode — omit darkMode prop and the component manages its own theme, toggling .dark on <html>
• Controlled mode — pass darkMode and onDarkModeChange props to let the parent app control the theme
• 40+ CSS overrides — topbar, chart header, panel, cards, buttons, inputs, selects, tooltips, scrollbars, tooth labels, and all interactive elements
• i18n — "Light mode" / "Dark mode" labels for all 8 languages (HU/EN/DE/ES/IT/SK/PL/RU)

Integration Example

<App
  darkMode={false}
  onDarkModeChange={(dark) => console.log(dark)}
/>

Files Changed

• src/App.tsx — dark mode state management, toggle button, .dark class lifecycle
• src/index.css — comprehensive .dark CSS block
• src/i18n/translations.ts — theme.light / theme.dark keys
• README.md — dark mode docs in EN/DE/ES/HU
• CHANGELOG.md — v1.2.0 entry
• package.json — version bump to 1.2.0

Full Changelog: v1.1.0...v1.2.0

v1.1.0 — Multi-language expansion & README overhaul

🌐 What's New in v1.1.0

✨ Added

• 5 new UI languages: Spanish (ES), Italian (IT), Slovak (SK), Polish (PL), Russian (RU) — total: 8 languages
• Flag emojis (🇭🇺🇬🇧🇩🇪🇪🇸🇮🇹🇸🇰🇵🇱🇷🇺) in language switcher
• 162 translation keys per language (extended with language.es/it/sk/pl/ru)
• README in 4 languages: English, German, Spanish, Hungarian — with badges and emojis
• CHANGELOG.md for version tracking

🐛 Fixed

• Dropdown localization bug: crown, bridge unit, endo, filling, and mobility selects now properly update labels when switching languages

🔄 Changed

• Language type extended from 3 to 8 languages
• LANGUAGE_OPTIONS extended from 3 to 8 entries
• README.md fully rewritten with download/version/license/React/TypeScript badges

Full Changelog: v1.0.0...v1.1.0

v1.0.0 - First Stable Release

React Odontogram Module v1.0.0

First stable release of the React Odontogram Module — an interactive, SVG-based dental chart editor.

Features

Core

• Interactive SVG-based odontogram with per-tooth visualization
• Multi-tooth annotation and selection system
• Topbar toggle controls for layer visibility

Visual Layers

• Crown replace, crown needed, missing closed
• Radix, endo-filling-incomplete, parapulpal pin
• Icon-based layer references

Integration

• Submodule-ready architecture for embedding in parent projects
• Exposed selection controls API (start unselected by default)
• Asset-import based build with Vite + React + TypeScript

Documentation

• English README with usage instructions
• ISO dental notation reference PDFs
• GitHub Pages support