odontogram 0.0.1 → 0.1.2

package/dist/index.d.mts

@@ -0,0 +1,35 @@
+import * as lit from "lit";
+import { LitElement } from "lit";
+
+//#region src/og-tooth.d.ts
+interface ToothSurfaces {
+  vestibular: boolean;
+  distal: boolean;
+  palatine: boolean;
+  mesial: boolean;
+  occlusal: boolean;
+}
+declare class OgTooth extends LitElement {
+  toothId: string;
+  colorClick: string;
+  selections: ToothSurfaces;
+  private _toggle;
+  render(): lit.TemplateResult<1>;
+  static styles: lit.CSSResult;
+}
+//#endregion
+//#region src/og-odontogram.d.ts
+type PatientMode = 'adult' | 'baby' | 'old';
+declare class OgDontogram extends LitElement {
+  mode: PatientMode;
+  chartData: Record<string, ToothSurfaces>;
+  private teethState;
+  private layouts;
+  willUpdate(changedProperties: Map<string, any>): void;
+  private _updateState;
+  renderTooth(id: number): lit.TemplateResult<1>;
+  render(): lit.TemplateResult<1>;
+  static styles: lit.CSSResult;
+}
+//#endregion
+export { OgDontogram, OgTooth, PatientMode, ToothSurfaces };

package/dist/index.mjs

@@ -0,0 +1,297 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+//#region \0@oxc-project+runtime@0.114.0/helpers/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+//#endregion
+//#region src/og-tooth.ts
+let OgTooth = class OgTooth extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.toothId = "";
+		this.colorClick = "#ff6961";
+		this.selections = {
+			vestibular: false,
+			distal: false,
+			palatine: false,
+			mesial: false,
+			occlusal: false
+		};
+	}
+	_toggle(surface, clickFn, unclickFn) {
+		const isSelected = !this.selections[surface];
+		this.selections = {
+			...this.selections,
+			[surface]: isSelected
+		};
+		const eventName = isSelected ? clickFn : unclickFn;
+		this.dispatchEvent(new CustomEvent(eventName, {
+			detail: {
+				toothId: this.toothId,
+				surface,
+				state: isSelected
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		return html`
+      <div class="tooth-container">
+        <span class="label">${this.toothId}</span>
+        <div class="tooth-relative">
+          <div class="surface top ${this.selections.vestibular ? "selected" : ""}" 
+            @click=${() => this._toggle("vestibular", "vestibularC", "vestibularU")}></div>
+          
+          <div class="surface left ${this.selections.distal ? "selected" : ""}" 
+            @click=${() => this._toggle("distal", "distalC", "distalU")}></div>
+
+          <div class="surface bottom ${this.selections.palatine ? "selected" : ""}" 
+            @click=${() => this._toggle("palatine", "palatineC", "palatineU")}></div>
+
+          <div class="surface right ${this.selections.mesial ? "selected" : ""}" 
+            @click=${() => this._toggle("mesial", "mesialC", "mesialU")}></div>
+
+          <div class="surface center ${this.selections.occlusal ? "selected" : ""}" 
+            @click=${() => this._toggle("occlusal", "occlusalC", "occlusalU")}></div>
+        </div>
+      </div>
+    `;
+	}
+	static {
+		this.styles = css`
+    .tooth-container { display: flex; flex-direction: column; align-items: center; width: 50px; }
+    .label { font-size: 12px; margin-bottom: 5px; font-weight: bold; color: #333; }
+    .tooth-relative { position: relative; width: 44px; height: 44px; background: #eee; }
+    .surface {
+      position: absolute; width: 20px; height: 20px; outline: 2px solid #000;
+      background-color: #fff; cursor: pointer; box-sizing: border-box; transition: background-color 0.2s;
+    }
+    .selected { background-color: var(--click-color, #ff6961) !important; }
+    .top    { top: 0; left: 0; border-top-left-radius: 100%; }
+    .left   { bottom: 0; left: 0; border-bottom-left-radius: 100%; }
+    .bottom { bottom: 0; right: 0; border-bottom-right-radius: 100%; }
+    .right  { top: 0; right: 0; border-top-right-radius: 100%; }
+    .center { top: 25%; right: 25%; border-radius: 50%; z-index: 2; }
+  `;
+	}
+};
+__decorate([property({ type: String })], OgTooth.prototype, "toothId", void 0);
+__decorate([property({ type: String })], OgTooth.prototype, "colorClick", void 0);
+__decorate([property({ type: Object })], OgTooth.prototype, "selections", void 0);
+OgTooth = __decorate([customElement("og-tooth")], OgTooth);
+
+//#endregion
+//#region src/og-odontogram.ts
+let OgDontogram = class OgDontogram extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.mode = "adult";
+		this.chartData = {};
+		this.teethState = {};
+		this.layouts = {
+			adult: {
+				upperRight: [
+					18,
+					17,
+					16,
+					15,
+					14,
+					13,
+					12,
+					11
+				],
+				upperLeft: [
+					21,
+					22,
+					23,
+					24,
+					25,
+					26,
+					27,
+					28
+				],
+				lowerRight: [
+					48,
+					47,
+					46,
+					45,
+					44,
+					43,
+					42,
+					41
+				],
+				lowerLeft: [
+					31,
+					32,
+					33,
+					34,
+					35,
+					36,
+					37,
+					38
+				]
+			},
+			baby: {
+				upperRight: [
+					55,
+					54,
+					53,
+					52,
+					51
+				],
+				upperLeft: [
+					61,
+					62,
+					63,
+					64,
+					65
+				],
+				lowerRight: [
+					85,
+					84,
+					83,
+					82,
+					81
+				],
+				lowerLeft: [
+					71,
+					72,
+					73,
+					74,
+					75
+				]
+			},
+			old: {
+				upperRight: [
+					17,
+					16,
+					15,
+					14,
+					13,
+					12,
+					11
+				],
+				upperLeft: [
+					21,
+					22,
+					23,
+					24,
+					25,
+					26,
+					27
+				],
+				lowerRight: [
+					47,
+					46,
+					45,
+					44,
+					43,
+					42,
+					41
+				],
+				lowerLeft: [
+					31,
+					32,
+					33,
+					34,
+					35,
+					36,
+					37
+				]
+			}
+		};
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("chartData")) this.teethState = { ...this.chartData };
+	}
+	_updateState(id, region, value) {
+		const toothId = id.toString();
+		const newState = { ...this.teethState };
+		if (!newState[toothId]) newState[toothId] = {
+			vestibular: false,
+			distal: false,
+			palatine: false,
+			mesial: false,
+			occlusal: false
+		};
+		newState[toothId] = {
+			...newState[toothId],
+			[region]: value
+		};
+		this.teethState = newState;
+		this.dispatchEvent(new CustomEvent("odontogram-change", {
+			detail: {
+				data: this.teethState,
+				mode: this.mode
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	renderTooth(id) {
+		const state = this.teethState[id.toString()] || {
+			vestibular: false,
+			distal: false,
+			palatine: false,
+			mesial: false,
+			occlusal: false
+		};
+		return html`
+      <og-tooth 
+        .toothId=${id.toString()} 
+        .selections=${state}
+        @vestibularC=${() => this._updateState(id, "vestibular", true)}
+        @vestibularU=${() => this._updateState(id, "vestibular", false)}
+        @distalC=${() => this._updateState(id, "distal", true)}
+        @distalU=${() => this._updateState(id, "distal", false)}
+        @palatineC=${() => this._updateState(id, "palatine", true)}
+        @palatineU=${() => this._updateState(id, "palatine", false)}
+        @mesialC=${() => this._updateState(id, "mesial", true)}
+        @mesialU=${() => this._updateState(id, "mesial", false)}
+        @occlusalC=${() => this._updateState(id, "occlusal", true)}
+        @occlusalU=${() => this._updateState(id, "occlusal", false)}
+      ></og-tooth>
+    `;
+	}
+	render() {
+		const layout = this.layouts[this.mode] || this.layouts.adult;
+		return html`
+      <div class="odontogram-wrapper mode-${this.mode}">
+        <div class="arch">
+          <div class="quadrant">${layout.upperRight.map((id) => this.renderTooth(id))}</div>
+          <div class="quadrant">${layout.upperLeft.map((id) => this.renderTooth(id))}</div>
+        </div>
+        <div class="arch">
+          <div class="quadrant">${layout.lowerRight.map((id) => this.renderTooth(id))}</div>
+          <div class="quadrant">${layout.lowerLeft.map((id) => this.renderTooth(id))}</div>
+        </div>
+      </div>
+    `;
+	}
+	static {
+		this.styles = css`
+    :host { display: block; padding: 20px; }
+    .odontogram-wrapper { display: flex; flex-direction: column; gap: 40px; align-items: center; }
+    .arch { display: flex; gap: 40px; }
+    .quadrant { display: flex; gap: 4px; }
+    
+    /* You can add specific colors or spacing per mode if you want */
+    .mode-baby { gap: 20px; }
+    .mode-baby og-tooth { transform: scale(0.9); }
+  `;
+	}
+};
+__decorate([property({ type: String })], OgDontogram.prototype, "mode", void 0);
+__decorate([property({ type: Object })], OgDontogram.prototype, "chartData", void 0);
+__decorate([state()], OgDontogram.prototype, "teethState", void 0);
+OgDontogram = __decorate([customElement("og-dontogram")], OgDontogram);
+
+//#endregion
+export { OgDontogram, OgTooth };

package/package.json

@@ -1,120 +1,68 @@
 {
   "name": "odontogram",
-  "version": "0.0.1",
-  "description": "An Simple Web Component library for odontogram",
-  "author": "Pratik Sharma <sharma.pratik2016@gmail.com>",
+  "version": "0.1.2",
+  "description": "A lightweight, interactive web component odontogram built with Lit.",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "**/*.js",
+    "**/*.ts"
+  ],
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  },
   "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
   "keywords": [
     "odontogram",
     "react",
     "dental-chart"
   ],
-  "publishConfig": {
-    "access": "public"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/biomathcode/odontogram"
   },
-  "main": "dist/index.js",
   "type": "module",
   "scripts": {
-    "analyze": "cem analyze",
-    "analyze:dev": "cem analyze --watch",
-    "clean": "git clean -fqdx",
-    "dev": "npm run build && concurrently -k -r \"npm run analyze:dev\" \"npm run build:watch\" \"npm run storybook\"",
-    "test": "web-test-runner --group default",
-    "build": "tsc && npm run analyze && npm run build:kitchen-sink",
-    "build:cdn": "npx cross-env BUILD_TARGET=cdn vite build && npm run analyze",
-    "build:html": "npx cross-env BUILD_TARGET=html vite build",
-    "build:react": "npx cross-env BUILD_TARGET=react vite build && npx rimraf -rf ./public/react/html",
-    "build:kitchen-sink": "npx rimraf ./public && npm run build:cdn && npm run build:html && npm run build:react",
-    "build:watch": "concurrently -k -r \"tsc --watch\" \"npx cross-env BUILD_TARGET=cdn vite build --watch\"",
-    "new": "plop",
-    "deploy": "npm run build && npm publish",
-    "format": "npm run format:eslint && npm run format:prettier",
-    "format:eslint": "npx eslint --fix",
-    "format:prettier": "npx prettier . --write",
-    "lint": "wctools validate && npm run lint:eslint && npm run lint:prettier",
-    "lint:eslint": "npx eslint",
-    "lint:prettier": "npx prettier . --check",
-    "prepare": "husky && npx playwright install-deps",
+    "dev": "vite",
+    "build": "tsdown",
+    "build:vite": "tsc && vite build",
+    "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "deploy-storybook": "gh-pages -d storybook-static"
   },
   "dependencies": {
-    "code-bubble": "^1.3.3",
-    "lit": "^3.2.1",
-    "wc-dox": "^1.3.5"
+    "lit": "^3.3.1"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@eslint/js": "^9.16.0",
-    "@eslint/json": "^0.8.0",
-    "@eslint/markdown": "^6.2.1",
-    "@open-wc/testing": "^4.0.0",
-    "@playwright/test": "^1.46.1",
-    "@storybook/addon-a11y": "^10.1.11",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-links": "^10.1.11",
-    "@storybook/web-components": "^10.1.11",
-    "@storybook/web-components-vite": "^10.1.11",
-    "@types/mocha": "^10.0.2",
-    "@wc-toolkit/cem-inheritance": "^1.2.2",
-    "@wc-toolkit/cem-sorter": "^1.0.1",
-    "@wc-toolkit/cem-validator": "^1.0.3",
-    "@wc-toolkit/jsdoc-tags": "^1.1.0",
-    "@wc-toolkit/jsx-types": "^1.5.2",
-    "@wc-toolkit/lazy-loader": "^1.0.1",
-    "@wc-toolkit/module-path-resolver": "^1.0.0",
-    "@wc-toolkit/react-wrappers": "^1.1.1",
-    "@wc-toolkit/storybook-helpers": "^10.0.0",
-    "@wc-toolkit/type-parser": "^1.2.0",
-    "@wc-toolkit/wctools": "^0.0.18",
-    "@web/dev-server-esbuild": "^1.0.4",
-    "@web/test-runner": "^0.20.2",
-    "@web/test-runner-commands": "^0.9.0",
-    "@web/test-runner-playwright": "^0.11.1",
-    "concurrently": "^9.1.0",
-    "custom-element-svelte-integration": "^1.1.2",
-    "custom-element-vuejs-integration": "^1.3.3",
-    "custom-elements-manifest-deprecator": "^1.1.1",
-    "eslint": "^9.16.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-lit": "^1.15.0",
-    "eslint-plugin-lit-a11y": "^5.1.1",
-    "eslint-plugin-require-extensions": "^0.1.3",
-    "eslint-plugin-storybook": "^10.1.11",
-    "glob": "^11.0.0",
-    "globals": "^15.13.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.7",
-    "plop": "^4.0.1",
-    "prettier": "^3.3.2",
-    "rollup-plugin-summary": "^3.0.0",
-    "storybook": "^10.1.11",
-    "typescript": "^5.5.3",
-    "typescript-eslint": "^8.17.0",
-    "vite": "^7.3.0",
-    "vite-plugin-dts": "^4.5.4"
-  },
-  "lint-staged": {
-    "*.js": "eslint --cache --fix",
-    "*.format:prettier": "prettier --write"
-  },
-  "files": [
-    "cdn",
-    "eslint",
-    "dist",
-    "react",
-    "types",
-    "index.d.ts",
-    "index.js",
-    "package.json",
-    "custom-elements.json",
-    "vscode.css-custom-data.json",
-    "vscode.html-custom-data.json",
-    "web-types.json"
-  ],
-  "customElements": "custom-elements.json"
+    "@chromatic-com/storybook": "^5.0.1",
+    "@storybook/addon-a11y": "^10.2.13",
+    "@storybook/addon-docs": "^10.2.13",
+    "@storybook/addon-vitest": "^10.2.13",
+    "@storybook/web-components-vite": "^10.2.13",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "gh-pages": "^6.3.0",
+    "playwright": "^1.58.2",
+    "storybook": "^10.2.13",
+    "tsdown": "0.21.0-beta.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18"
+  }
 }

package/readme.md

@@ -0,0 +1,140 @@
+# 🦷 Og-odontogram
+
+A lightweight, interactive, and highly customizable **Web Component Ogdontogram** built with [Lit](https://lit.dev/). Perfect for dental software, patient records, and educational tools.
+
+## ✨ Features
+
+* **Zero Framework Dependency**: Works with React, Vue, Angular, or plain HTML.
+* **Multi-Mode Support**: Toggle between `adult` (32 teeth), `baby` (20 primary teeth), and `old` (geriatric) layouts.
+* **Interactive Regions**: Supports 5 surfaces per tooth: Vestibular, Distal, Palatine, Mesial, and Occlusal.
+* **JSON Powered**: Export and rehydrate the entire chart state via a simple JSON object.
+* **CSS Theming**: Customize selection colors using CSS variables.
+* **Open-WC Compliant**: Shipped as unoptimized ESM for maximum bundler compatibility.
+
+---
+
+## 📦 Installation
+
+Install via NPM:
+
+```bash
+npm install odontogram
+
+```
+
+---
+
+## 🚀 Quick Start
+
+### Plain HTML / Vanilla JS
+
+```html
+<script type="module">
+  import 'odontogram';
+</script>
+
+<og-odontogram id="my-chart" mode="adult"></og-odontogram>
+
+<script>
+  const chart = document.getElementById('my-chart');
+
+  // Listen for changes
+  chart.addEventListener('oodontogram-change', (e) => {
+    console.log('New State:', e.detail.data);
+  });
+</script>
+
+```
+
+### React / Next.js
+
+```jsx
+import 'oodontogram';
+
+function App() {
+  return (
+    <og-odontogram 
+      mode="baby" 
+      onoodontogram-change={(e) => console.log(e.detail.data)}
+    />
+  );
+}
+
+```
+
+---
+
+## 🛠 API & Configuration
+
+### Properties
+
+| Property    | Type     | Default   | Description                              |
+| ----------- | -------- | --------- | ---------------------------------------- |
+| `mode`      | `string` | `'adult'` | Patient type: `adult`, `baby`, or `old`. |
+| `chartData` | `object` | `{}`      | Initial state to pre-fill the chart.     |
+
+### Custom Events
+
+| Event                | Detail                      | Description                                |
+| -------------------- | --------------------------- | ------------------------------------------ |
+| `oodontogram-change` | `{ data: {}, mode: string}` | Fired whenever a tooth surface is toggled. |
+
+### CSS Variables
+
+Customize the look of the selected regions:
+
+```css
+og-odontogram {
+  --click-color: #ff6961; /* The color of selected surfaces */
+}
+
+```
+
+---
+
+## 📊 Data Structure
+
+The component exports a clean JSON structure representing the "history" or "state" of the teeth.
+
+```json
+{
+  "16": {
+    "vestibular": true,
+    "distal": false,
+    "palatine": false,
+    "mesial": true,
+    "occlusal": true
+  }
+}
+
+```
+
+---
+
+## 🎨 Storybook (Development & Demo)
+
+We use Storybook to showcase all modes and test interactivity. You can see the "Adult", "Pediatric", and "Senior" layouts in isolation.
+
+To run Storybook locally:
+
+1. Clone the repo.
+2. `npm install`
+3. `npm run storybook`
+
+---
+
+## 🏗 Developing
+
+If you want to contribute or build from source:
+
+* **Build for Production**: `npm run build` (uses `tsdown` to generate `.mjs` and `.d.mts`).
+* **Test**: `npm run test` (uses Vitest + Playwright for browser testing).
+* **Lint**: `npm run lint`.
+
+## 📄 License
+
+MIT © [Biomathcode](https://github.com/biomathcode)
+
+---
+
+**Would you like me to help you set up a GitHub Action to automatically publish this to NPM whenever you create a new release?**

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './og-tooth';
+export * from './og-odontogram';