@kmanueldc/vue-odontogram 0.1.1

package/dist/utils/dentition-layout.d.ts

@@ -0,0 +1,27 @@
+import type { OdontogramLayout } from './layout';
+/** Dentitions that have an SVG composition available to the component. */
+export type RenderableDentition = 'permanent' | 'primary' | 'mixed';
+/**
+ * Only these combinations may select a dataset and a composition internally.
+ * Every listed combination has its own geometry and layout definition.
+ */
+export type SupportedDentitionLayout = {
+    dentition: RenderableDentition;
+    layout: OdontogramLayout;
+};
+export interface DentitionLayoutResolution {
+    requested: SupportedDentitionLayout;
+    resolved: SupportedDentitionLayout;
+    fellBack: boolean;
+}
+export declare const supportedLayoutsByDentition: {
+    readonly permanent: readonly ["arch", "horizontal"];
+    readonly primary: readonly ["arch", "horizontal"];
+    readonly mixed: readonly ["arch", "horizontal"];
+};
+export declare function isLayoutSupported(dentition: RenderableDentition, layout: OdontogramLayout): boolean;
+/**
+ * Resolves a public request into a combination that has its own dataset and
+ * composition. Primary horizontal became available with its independent data.
+ */
+export declare function resolveDentitionLayout(dentition: RenderableDentition, layout: OdontogramLayout): DentitionLayoutResolution;

package/dist/utils/finding-records.d.ts

@@ -0,0 +1,82 @@
+import type { FindingCatalog, FindingDefinition, FindingScope, FindingStatus, FindingTone, OdontogramFinding } from '../types/findings';
+import { type ToothSurface } from '../types/surfaces';
+/**
+ * Helpers to read and edit the `findings` list tooth by tooth, e.g. from a
+ * panel that shows what is recorded on each surface. They never mutate their
+ * input and hold no clinical rules: the app decides what may be recorded.
+ */
+/** A finding of the list, as it applies to one tooth. */
+export interface ToothFindingEntry {
+    /** Position in the `findings` list; `removeSurfaceFinding` takes it back. */
+    index: number;
+    finding: OdontogramFinding;
+    /** Catalog entry; undefined for unknown codes. */
+    definition?: FindingDefinition;
+    scope: FindingScope | 'unknown';
+}
+/** Everything recorded on one tooth. */
+export interface ToothRecord {
+    toothId: string;
+    /** Surface findings on each surface, in list order. */
+    surfaces: Record<ToothSurface, ToothFindingEntry[]>;
+    /**
+     * Every other finding that includes the tooth: whole-tooth symbols, findings
+     * between two teeth, spans whose range covers it and unknown codes.
+     */
+    tooth: ToothFindingEntry[];
+}
+/**
+ * Groups the findings of one tooth by surface. Surface findings (`fill`,
+ * `outline`) go to each surface they cover, or to all five when they list no
+ * surfaces; every other finding that includes the tooth goes to `tooth`.
+ */
+export declare function getToothRecord(toothId: string, findings: readonly OdontogramFinding[], catalog?: FindingCatalog): ToothRecord;
+/** A surface finding to record on one tooth. */
+export interface SurfaceFindingInput {
+    code: string;
+    toothId: string;
+    surfaces: ToothSurface[];
+    status?: FindingStatus;
+    tone?: FindingTone;
+    color?: string;
+}
+/**
+ * Records a surface finding. When the tooth already has a finding with the
+ * same code, status, tone and color on it alone, its surfaces are merged into
+ * that one; otherwise a new finding is appended.
+ */
+export declare function addSurfaceFinding(findings: readonly OdontogramFinding[], input: SurfaceFindingInput): OdontogramFinding[];
+/** A finding to record on one tooth: on some surfaces, or on the whole tooth. */
+export interface ToothFindingInput {
+    code: string;
+    toothId: string;
+    /** Surfaces, for surface findings (`fill`, `outline`). */
+    surfaces?: ToothSurface[];
+    status?: FindingStatus;
+    tone?: FindingTone;
+    color?: string;
+}
+/**
+ * Records a finding on one tooth. Surface findings go through
+ * `addSurfaceFinding` (merging surfaces into the same kind of finding); any
+ * other finding is appended for the whole tooth.
+ */
+export declare function addFinding(findings: readonly OdontogramFinding[], input: ToothFindingInput, catalog?: FindingCatalog): OdontogramFinding[];
+/** Which finding to remove, from a `ToothRecord` entry. */
+export interface SurfaceFindingRemoval {
+    /** `ToothFindingEntry.index` of the finding in the same list. */
+    index: number;
+    toothId: string;
+    /**
+     * Surface to clear, for surface findings only; without it the finding is
+     * removed from the whole tooth (the way to remove any other finding).
+     */
+    surface?: ToothSurface;
+}
+/**
+ * Removes a finding from one surface of a tooth, or from the whole tooth.
+ * Other teeth of the same finding keep it unchanged: a finding on several
+ * teeth is split so only this tooth loses the surface. A finding without
+ * surfaces counts as covering all five.
+ */
+export declare function removeSurfaceFinding(findings: readonly OdontogramFinding[], { index, toothId, surface }: SurfaceFindingRemoval): OdontogramFinding[];

package/dist/utils/findings.d.ts

@@ -0,0 +1,74 @@
+import type { FindingCatalog, FindingDefinition, FindingScope, FindingStatus, FindingSymbol, FindingTone, OdontogramFinding } from '../types/findings';
+import { type ToothSurface } from '../types/surfaces';
+import { type SurfaceDiagram, type SurfaceDiagramLayout } from './surfaces';
+import { type Box } from './svg-geometry';
+import { type ToothFrames } from './tooth-frames';
+/**
+ * A drawing instruction, in viewBox coordinates, in the finding color:
+ * paths and circles are stroked, areas and text are filled.
+ */
+export type FindingPrimitive = {
+    type: 'path';
+    d: string;
+} | {
+    type: 'area';
+    d: string;
+} | {
+    type: 'circle';
+    cx: number;
+    cy: number;
+    r: number;
+} | {
+    type: 'text';
+    x: number;
+    y: number;
+    text: string;
+    fontSize: number;
+};
+/** A finding ready to draw. */
+export interface RenderedFinding {
+    /** Stable key: finding index and, for single-tooth findings, the tooth. */
+    key: string;
+    code: string;
+    name: string;
+    status: FindingStatus;
+    /** Resolved default color; `color`, when set, overrides it. */
+    tone: FindingTone;
+    color?: string;
+    /** Every tooth the finding covers (a span includes its whole range). */
+    teeth: string[];
+    /** Surfaces drawn by a surface finding, in `toothSurfaces` order. */
+    surfaces?: ToothSurface[];
+    strokeWidth: number;
+    primitives: FindingPrimitive[];
+    /** Area covered by the drawing. */
+    box: Box;
+}
+export interface FindingLayout {
+    findings: RenderedFinding[];
+    /** Findings that could not be drawn, and why. */
+    issues: string[];
+}
+export declare function getFindingScope(symbol: FindingSymbol): FindingScope;
+/**
+ * Default color of a finding: its own tone, else red while planned and blue
+ * once done, else the catalog tone.
+ */
+export declare function resolveFindingTone(finding: Pick<OdontogramFinding, 'status' | 'tone'>, definition: Pick<FindingDefinition, 'tone'>): FindingTone;
+/**
+ * Lays out findings on the visible teeth. Unknown codes, hidden teeth,
+ * invalid tooth groups and surface findings without surface diagrams are
+ * skipped and reported in `issues`.
+ *
+ * With `surfaceLayout`, surface findings are drawn on its diagrams and
+ * vestibular marks are placed past them.
+ */
+export declare function layoutFindings(findings: readonly OdontogramFinding[], catalog: FindingCatalog, { frames, order, fontSize, gap }: ToothFrames, surfaceLayout?: SurfaceDiagramLayout): FindingLayout;
+/**
+ * Draws the surface findings of one tooth on a given diagram, e.g. the
+ * enlarged one of a surface guide. Strips and drawing order match the chart.
+ * Findings of other teeth and non-surface findings are ignored.
+ */
+export declare function layoutToothSurfaceFindings(findings: readonly OdontogramFinding[], catalog: FindingCatalog, diagram: SurfaceDiagram): RenderedFinding[];
+/** Miniature of a finding symbol for legends, in a `0 0 16 16` viewBox. */
+export declare function getFindingIcon(symbol: FindingSymbol): FindingPrimitive[];

package/dist/utils/labels.d.ts

@@ -0,0 +1,4 @@
+import type { OdontogramLabels, OdontogramLabelsInput } from '../types/odontogram';
+export declare const defaultOdontogramLabels: Readonly<OdontogramLabels>;
+/** Merges partial overrides, including nested maps, over the defaults. */
+export declare function resolveOdontogramLabels(labels?: OdontogramLabelsInput): OdontogramLabels;

package/dist/utils/layout.d.ts

@@ -0,0 +1,19 @@
+/** Presentation-only layouts for an odontogram. */
+export type OdontogramLayout = 'arch' | 'horizontal';
+export type PermanentQuadrant = 1 | 2 | 3 | 4;
+export interface QuadrantTransform {
+    quadrant: PermanentQuadrant;
+    transform: string;
+}
+/**
+ * SVG geometry used to place a complete permanent odontogram.
+ *
+ * This model does not assign FDI identifiers, infer dentition, or define tooth
+ * geometry. It only describes the presentation space and group transforms.
+ */
+export interface LayoutDefinition {
+    viewBox: string;
+    quadrants: readonly QuadrantTransform[];
+}
+export declare const layoutDefinitions: Readonly<Record<OdontogramLayout, LayoutDefinition>>;
+export declare function getLayoutDefinition(layout: OdontogramLayout): LayoutDefinition;

package/dist/utils/mixed-layout.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Mixed dentition compositions, as in the NTS odontogram form: the permanent
+ * teeth keep their own composition, and the primary teeth are drawn as an
+ * inner set of rows or arches between them. No geometry is new; each primary
+ * quadrant reuses its dataset and quadrant transform, wrapped in a scale and
+ * translation that places it.
+ */
+export interface MixedQuadrantTransform {
+    quadrant: number;
+    transform: string;
+}
+export interface MixedLayoutDefinition {
+    viewBox: string;
+    permanent: readonly MixedQuadrantTransform[];
+    primary: readonly MixedQuadrantTransform[];
+}
+export declare const mixedLayoutDefinitions: {
+    readonly arch: MixedLayoutDefinition;
+    readonly horizontal: MixedLayoutDefinition;
+};

package/dist/utils/navigation.d.ts

@@ -0,0 +1,11 @@
+import type { ToothAnchor } from './anchors';
+export type ToothNavigationKey = 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown' | 'Home' | 'End';
+export declare const toothNavigationKeys: ReadonlySet<string>;
+/**
+ * Finds the tooth to focus after a navigation key, following what is on
+ * screen: left/right move along the same row, up/down jump to the closest
+ * tooth of the nearest row drawn above or below, and Home/End go to the first
+ * and last tooth of the row. A row is an arch of one dentition, so mixed
+ * charts have two per arch. Returns `undefined` when there is nowhere to go.
+ */
+export declare function findNavigationTarget(anchors: readonly ToothAnchor[], fromId: string, key: ToothNavigationKey): string | undefined;

package/dist/utils/notation.d.ts

@@ -0,0 +1,26 @@
+import type { ToothNotation, ToothType } from '../types/odontogram';
+import { type NumberedDentition } from './quadrants';
+/**
+ * Builds a tooth identifier from its dental position.
+ *
+ * Tooth IDs are always FDI, whatever notation a chart displays; use
+ * `formatToothNumber` to show them in another notation.
+ */
+export declare function buildToothId(dentition: NumberedDentition, quadrant: number, position: number, notation?: ToothNotation): string;
+/** Quadrant of the patient's mouth, as used by the Palmer notation. */
+export type PalmerQuadrant = 'upper-right' | 'upper-left' | 'lower-left' | 'lower-right';
+/** Type of an FDI tooth, e.g. `First Molar` for 16 or `Primary Canine` for 53. */
+export declare function getToothType(toothId: string): ToothType;
+/** Palmer quadrant of an FDI tooth. */
+export declare function getPalmerQuadrant(toothId: string): PalmerQuadrant;
+/**
+ * How a notation writes an FDI tooth:
+ * - `FDI`: the ID itself (`11`, `85`).
+ * - `Universal`: `1`–`32` from the upper right third molar clockwise to the
+ *   lower right third molar; primary teeth `A`–`T` in the same order.
+ * - `Palmer`: the position in its quadrant (`1`–`8`, primary `A`–`E`) with the
+ *   quadrant corner. `style: 'symbol'` uses box-drawing corners (`1┘`,
+ *   `└A`); `style: 'text'` writes the quadrant (`UR1`, `ULA`), which reads
+ *   well aloud.
+ */
+export declare function formatToothNumber(toothId: string, notation: ToothNotation, style?: 'symbol' | 'text'): string;

package/dist/utils/numbers.d.ts

@@ -0,0 +1,28 @@
+import type { ToothNotation } from '../types/odontogram';
+import type { ToothAnchor } from './anchors';
+import type { OdontogramLayout } from './layout';
+import type { Box } from './svg-geometry';
+/** A tooth number placed next to its tooth, in viewBox coordinates. */
+export interface ToothNumberLabel {
+    toothId: string;
+    /** The number in the chart's notation, without the Palmer corner. */
+    text: string;
+    /** Center of the text; render with `text-anchor="middle"`. */
+    x: number;
+    y: number;
+    fontSize: number;
+    /** Palmer quadrant corner drawn around the text, as a stroked path. */
+    corner?: string;
+    /** Approximate area covered by the text and corner. */
+    box: Box;
+}
+/**
+ * Places each tooth number on the occlusal side of its tooth: perpendicular
+ * to the arch on its inner side in `arch`, and between both rows in
+ * `horizontal`. The
+ * font size follows the teeth, so every layout keeps the same proportion.
+ *
+ * `chart` is the full composition viewBox, so positions stay stable when a
+ * half of the chart is hidden.
+ */
+export declare function getToothNumberLabels(anchors: readonly ToothAnchor[], chart: Box, layout: OdontogramLayout, notation?: ToothNotation): ToothNumberLabel[];

package/dist/utils/primary-horizontal-layout.d.ts

@@ -0,0 +1,13 @@
+import type { PrimaryQuadrantTransform } from './primary-layout';
+/**
+ * Presentation-only composition for the provisional horizontal primary
+ * dataset. Its transforms are independent from permanent and primary-arch
+ * layouts.
+ */
+export interface PrimaryHorizontalLayoutDefinition {
+    layout: 'horizontal';
+    viewBox: string;
+    quadrants: readonly PrimaryQuadrantTransform[];
+    provisional: true;
+}
+export declare const primaryHorizontalLayoutDefinition: PrimaryHorizontalLayoutDefinition;

package/dist/utils/primary-layout.d.ts

@@ -0,0 +1,34 @@
+import type { PrimaryToothType } from '../types/geometry';
+/** FDI quadrants used by primary (deciduous) dentition. */
+export type PrimaryQuadrant = 5 | 6 | 7 | 8;
+export interface PrimaryQuadrantTransform {
+    quadrant: PrimaryQuadrant;
+    transform: string;
+}
+/**
+ * Provisional arch composition for the five pediatric SVG approximations.
+ *
+ * The 461-unit height is intentionally independent from the permanent arch's
+ * 694-unit viewBox. It keeps every lower-arch spacing intact while leaving
+ * more than 30 units between the upper and lower second molars.
+ */
+/**
+ * Mirrors an upper primary quadrant across the horizontal axis of its SVG
+ * workspace. It preserves every path's size and curvature, yielding the
+ * corresponding mandibular quadrant.
+ */
+export declare function mirrorPrimaryQuadrant(width: number, height: number, mirrorHorizontally?: boolean): string;
+/**
+ * Presentation offsets applied to each provisional primary shape inside its
+ * quadrant. They never modify the SVG paths and, because quadrant groups are
+ * mirrored, the same local offset is valid for Q5, Q6, Q8 and Q7.
+ */
+export declare const primaryArchToothTransforms: Readonly<Partial<Record<PrimaryToothType, string>>>;
+export interface PrimaryArchLayoutDefinition {
+    layout: 'arch';
+    viewBox: string;
+    quadrants: readonly PrimaryQuadrantTransform[];
+    toothTransforms: Readonly<Partial<Record<PrimaryToothType, string>>>;
+    provisional: true;
+}
+export declare const primaryArchLayoutDefinition: PrimaryArchLayoutDefinition;

package/dist/utils/quadrants.d.ts

@@ -0,0 +1,6 @@
+import type { DentalArch, DentalSide, Dentition } from '../types/odontogram';
+/** Dentitions whose FDI quadrant is unambiguous for a single tooth. */
+export type NumberedDentition = Exclude<Dentition, 'mixed'>;
+/** Returns the FDI quadrant for a dentition, arch and patient side. */
+export declare function getQuadrant(dentition: NumberedDentition, arch: DentalArch, side: DentalSide): number;
+export declare function isQuadrantForDentition(dentition: NumberedDentition, quadrant: number): boolean;

package/dist/utils/state-marks.d.ts

@@ -0,0 +1,35 @@
+import type { OdontogramToothStates, ToothState } from '../types/odontogram';
+import type { ToothAnchor } from './anchors';
+import type { Box } from './svg-geometry';
+export interface Line {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+}
+/** An "X" across an extracted tooth. */
+export interface CrossMark {
+    kind: 'cross';
+    toothId: string;
+    lines: [Line, Line];
+    strokeWidth: number;
+}
+/** A threaded implant fixture over an implant tooth. */
+export interface ImplantMark {
+    kind: 'implant';
+    toothId: string;
+    /** Fixture body. */
+    body: Box;
+    /** Threads across the body. */
+    threads: Line[];
+    strokeWidth: number;
+}
+export type ToothStateMark = CrossMark | ImplantMark;
+/** States drawn without the crown: only a dashed outline remains. */
+export declare const absentToothStates: ReadonlySet<ToothState>;
+export declare function resolveToothState(states: OdontogramToothStates | undefined, toothId: string): ToothState;
+/**
+ * Marks drawn over teeth whose state needs a symbol, in the layout's viewBox
+ * coordinates. Their size follows each tooth, so they fit every layout.
+ */
+export declare function getToothStateMarks(anchors: readonly ToothAnchor[], states: OdontogramToothStates | undefined): ToothStateMark[];

package/dist/utils/surfaces.d.ts

@@ -0,0 +1,118 @@
+import type { OdontogramSurfaces, SurfaceShapeKind, ToothSurface, ToothSurfaceName } from '../types/surfaces';
+import { type Box, type Point } from './svg-geometry';
+import { type ToothFrames } from './tooth-frames';
+/** One clickable surface of a diagram. */
+export interface SurfaceShape {
+    surface: ToothSurface;
+    /** Clinical name on this tooth, e.g. `incisal` or `palatal`. */
+    name: ToothSurfaceName;
+    /** Closed polygon, in viewBox coordinates. */
+    d: string;
+    /** Corners of the polygon, in viewBox coordinates. */
+    points: Point[];
+}
+/**
+ * A five-surface diagram drawn next to a tooth: a square split into a central
+ * occlusal square and four trapezoids. It is rotated with the tooth frame, so
+ * the vestibular side faces out of the arch and the mesial side faces the
+ * midline in every layout.
+ */
+export interface SurfaceDiagram {
+    toothId: string;
+    center: Point;
+    /** Side of the square. */
+    size: number;
+    /** Unit directions of the diagram: out of the arch, and toward the midline. */
+    axes: {
+        vestibular: Point;
+        mesial: Point;
+    };
+    strokeWidth: number;
+    /** In `toothSurfaces` order. */
+    surfaces: SurfaceShape[];
+    /** Area covered by the diagram, stroke included. */
+    box: Box;
+}
+export interface SurfaceDiagramLayout {
+    diagrams: SurfaceDiagram[];
+    /**
+     * Distance the diagrams use beyond the vestibular edge of each tooth, so
+     * vestibular marks such as abbreviations can be placed past them.
+     */
+    reserved: number;
+}
+/**
+ * Extra space, in viewBox units, between the symbols drawn over a tooth and
+ * its diagram, and between the diagram and the marks placed past it.
+ */
+export declare const surfaceMargin = 3;
+/**
+ * Clinical name of a surface on an FDI tooth: incisal instead of occlusal on
+ * incisors and canines, palatal instead of lingual on upper teeth.
+ */
+export declare function getSurfaceName(surface: ToothSurface, toothId: string): ToothSurfaceName;
+/** Closed SVG path through some points. */
+export declare function polygonPath(points: readonly Point[]): string;
+/**
+ * Part of a convex polygon between two lines perpendicular to `axis`: the
+ * points whose projection on `axis` lies in `[from, to]`.
+ */
+export declare function clipPolygon(points: readonly Point[], axis: Point, from: number, to: number): Point[];
+/**
+ * Splits a surface into `count` equal strips and returns strip `index`. The
+ * strips run across the surface: mesial–distal on the vestibular, lingual and
+ * occlusal surfaces, vestibular–lingual on the mesial and distal ones.
+ */
+export declare function surfaceStrip(diagram: SurfaceDiagram, shape: SurfaceShape, index: number, count: number): Point[];
+/**
+ * Builds the diagram of a tooth: a square (or circle) of side (diameter)
+ * `size` centered at `center`, with its vestibular side along `vestibular` and its mesial side
+ * along `mesial` (both unit vectors).
+ */
+export declare function buildSurfaceDiagram(toothId: string, center: Point, axes: {
+    vestibular: Point;
+    mesial: Point;
+}, size: number, strokeWidth?: number, shape?: SurfaceShapeKind): SurfaceDiagram;
+/**
+ * Screen orientation of a tooth's diagram in the horizontal layout, which
+ * surface guides also use: vestibular up on upper teeth and down on lower
+ * ones, mesial toward the midline (right on the patient's right side).
+ */
+export declare function getSurfaceAxes(toothId: string): {
+    vestibular: Point;
+    mesial: Point;
+};
+/** Middle of a surface polygon, where its letter goes. */
+export declare function surfaceCenter({ points }: Pick<SurfaceShape, 'points'>): Point;
+/**
+ * Places one surface diagram on the vestibular side of every tooth. All
+ * diagrams share one size, which follows the teeth like the tooth numbers.
+ *
+ * Each diagram keeps clear of its tooth and of the widest symbol drawn over
+ * it (the circle of a crown). Along each row, diagrams that stick out of the
+ * curve are brought back onto it (they may then give up that extra margin,
+ * never the tooth outline), and the distances are smoothed so the diagrams
+ * follow the arch instead of jumping out next to larger teeth.
+ */
+export declare function getSurfaceDiagrams({ frames, order, fontSize, gap }: ToothFrames, options?: {
+    /**
+     * Brings diagrams that stick out of a curved row back onto it (see
+     * `fairDistances`). Meant for the `arch` layout; rows of `horizontal` are
+     * straight and keep every margin.
+     */
+    fairCurve?: boolean;
+    /** Square (default) or circular diagrams. */
+    shape?: SurfaceShapeKind;
+    /**
+     * Places every diagram of a row on one line, at the level of the tooth
+     * that needs the most room; the others end up farther from their tooth.
+     * Meant for the `horizontal` layout, whose rows share one vestibular
+     * direction.
+     */
+    alignRows?: boolean;
+}): SurfaceDiagramLayout;
+/**
+ * Returns a new surfaces model with one surface of a tooth toggled. Surfaces
+ * keep the `toothSurfaces` order and teeth without surfaces are removed.
+ */
+export declare function toggleSurface(surfaces: OdontogramSurfaces | undefined, toothId: string, surface: ToothSurface): OdontogramSurfaces;

package/dist/utils/svg-geometry.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Framework-independent SVG geometry: path bounding boxes and transform
+ * matrices. It needs no DOM, so it also works in SSR and tests.
+ */
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface Box {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/** Affine matrix `[a, b, c, d, e, f]`, as in SVG `matrix(a b c d e f)`. */
+export type Matrix = readonly [number, number, number, number, number, number];
+export declare const identityMatrix: Matrix;
+/** Returns `left · right`: `right` is applied to points first. */
+export declare function multiplyMatrices(left: Matrix, right: Matrix): Matrix;
+export declare function applyMatrix([a, b, c, d, e, f]: Matrix, { x, y }: Point): Point;
+/** Parses an SVG `transform` attribute into a single matrix. */
+export declare function parseTransform(transform: string | undefined): Matrix;
+/** Axis-aligned box that contains every point. */
+export declare function boxFromPoints(points: readonly Point[]): Box;
+/**
+ * Transforms a box and returns the box that contains the result. It is exact
+ * for translations, scales and reflections, the transforms used by layouts.
+ */
+export declare function transformBox(matrix: Matrix, box: Box): Box;
+/** Exact bounding box of an SVG path `d` attribute. */
+export declare function getPathBox(path: string): Box;
+/**
+ * Endpoints plus curve and arc extrema of a path. The box of these points is
+ * the path's exact bounding box.
+ */
+export declare function getPathExtremePoints(path: string): Point[];

package/dist/utils/tooth-frames.d.ts

@@ -0,0 +1,51 @@
+import type { DentalArch } from '../types/odontogram';
+import type { ToothAnchor, ToothRow } from './anchors';
+import type { OdontogramLayout } from './layout';
+import type { Box, Point } from './svg-geometry';
+/**
+ * Local orientation of a tooth on screen, derived from the anchors. Numbers,
+ * symbols and multi-tooth marks are placed with it, so they follow the arch
+ * in every layout.
+ */
+export interface ToothFrame {
+    toothId: string;
+    arch: DentalArch;
+    row: ToothRow;
+    box: Box;
+    center: Point;
+    /** Smallest side of the box; symbols scale with it. */
+    size: number;
+    /** Unit direction to the inner side: the arch's lingual side, or the other row. */
+    inner: Point;
+    /** Opposite of `inner`: the arch's vestibular side, or away from the other row. */
+    outer: Point;
+    /** Unit direction toward the other arch, on the vertical axis. */
+    occlusal: Point;
+    /** Unit direction along the arch toward the midline. */
+    mesial: Point;
+}
+export interface ToothFrames {
+    frames: Map<string, ToothFrame>;
+    /** Teeth of each row in arch order: right back to midline to left back. */
+    order: Map<ToothRow, string[]>;
+    /** Text size that keeps the same proportion to the teeth in every layout. */
+    fontSize: number;
+    /** Standard spacing between a tooth and what is drawn around it. */
+    gap: number;
+}
+export declare function normalize({ x, y }: Point): Point;
+/** Distance from a box center to its edge along a unit direction. */
+export declare function halfExtent(width: number, height: number, direction: Point): number;
+/**
+ * Radius of the circle drawn around a whole tooth (e.g. a crown). It is the
+ * widest symbol drawn over a tooth, so marks placed next to the tooth keep
+ * clear of it.
+ */
+export declare function toothCircleRadius(box: Box): number;
+/** Stroke width of the symbols drawn over a tooth of a given size. */
+export declare function toothSymbolStrokeWidth(size: number): number;
+/**
+ * Computes the frame of every tooth. `chart` is the full composition viewBox,
+ * so frames stay stable when a half of the chart is hidden.
+ */
+export declare function getToothFrames(anchors: readonly ToothAnchor[], chart: Box, layout: OdontogramLayout): ToothFrames;

package/dist/vue-odontogram.css

@@ -0,0 +1 @@
+.odontogram-condition-labels{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-family:sans-serif;font-size:14px;list-style:none}.odontogram-condition-labels__item{display:flex;align-items:center;gap:8px;text-transform:capitalize}.odontogram-condition-labels__item[data-state],.odontogram-condition-labels__item[data-finding]{text-transform:none}.odontogram-condition-labels__swatch{display:inline-block;width:14px;height:14px;border:2px solid;border-radius:4px}.odontogram-condition-labels__icon{width:16px;height:16px;overflow:visible}.odontogram-condition-labels__icon-tooth{stroke:var(--odontogram-stroke-color, #8a98be);stroke-width:1.5}.odontogram-condition-labels__icon line,.odontogram-condition-labels__icon .odontogram-state-mark--implant rect{stroke-width:1.5}.odontogram-condition-labels__icon-tooth--missing,.odontogram-condition-labels__icon-tooth--extracted{opacity:var(--odontogram-absent-opacity, .55)}.odontogram-condition-labels__icon-tooth--unerupted{opacity:var(--odontogram-unerupted-opacity, .45)}.odontogram-tooltip{z-index:1000;pointer-events:none;padding:6px 10px;border-radius:6px;background:var(--odontogram-tooltip-bg, rgba(0, 0, 0, .85));color:var(--odontogram-tooltip-fg, #fff);font-size:12px;line-height:1.3;white-space:nowrap;box-shadow:0 2px 8px #00000026;transition:opacity .15s ease}.odontogram-tooltip__summary{padding-left:.5rem}.odontogram-tooltip__letter{display:inline-block;min-width:1.1em;font-weight:700}.odontogram-tooltip__description{max-width:16rem;margin-bottom:2px;opacity:.8;white-space:normal}.odontogram-tooltip__arrow{position:absolute;bottom:-6px;left:50%;width:0;height:0;border-top:6px solid var(--odontogram-tooltip-bg, rgba(0, 0, 0, .85));border-right:6px solid transparent;border-left:6px solid transparent;transform:translate(-50%)}.odontogram-tooltip__arrow--below{top:-6px;bottom:auto;border-top:0;border-bottom:6px solid var(--odontogram-tooltip-bg, rgba(0, 0, 0, .85))}.odontogram{--odontogram-stroke-color: #8a98be;--odontogram-selected-color: #c6ccf8;--odontogram-selected-stroke-color: #b8c0cc;--odontogram-focus-outline-color: rgb(184 167 232 / 70%);width:100%;color:var(--odontogram-stroke-color)}.odontogram__svg{display:block;width:100%;height:auto;margin-top:.5rem;overflow:visible;-webkit-user-select:none;user-select:none;touch-action:manipulation}.odontogram__numbers,.odontogram__surface-letters,.odontogram__state-marks,.odontogram__findings{pointer-events:none}.odontogram-finding--good{color:var(--odontogram-finding-good-color, #1d4ed8)}.odontogram-finding--bad{color:var(--odontogram-finding-bad-color, #dc2626)}.odontogram-finding__stroke{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}.odontogram-finding__area{fill:currentColor;stroke:var(--odontogram-surface-stroke-color, var(--odontogram-stroke-color));stroke-linejoin:round}.odontogram-finding--planned .odontogram-finding__stroke{stroke-dasharray:var(--odontogram-finding-planned-dasharray)}.odontogram-finding--planned .odontogram-finding__area{stroke-dasharray:none;fill-opacity:var(--odontogram-finding-planned-fill-opacity, .45)}.odontogram-condition-labels .odontogram-finding--planned .odontogram-finding__stroke{stroke-dasharray:var(--odontogram-finding-planned-dasharray, 2 1.5)}.odontogram-finding__text{fill:currentColor;font-family:inherit;font-weight:700}.odontogram-tooth--absent{opacity:var(--odontogram-absent-opacity, .55)}.odontogram-tooth--unerupted{opacity:var(--odontogram-unerupted-opacity, .45)}.odontogram-state-mark--cross line{stroke:var(--odontogram-extracted-color, #dc2626);stroke-linecap:round}.odontogram-state-mark--implant rect,.odontogram-state-mark--implant line{stroke:var(--odontogram-implant-color, #0f766e);stroke-linecap:round}.odontogram-state-mark--implant rect{fill:var(--odontogram-implant-fill, #ccfbf1)}.odontogram__number{fill:var(--odontogram-number-color, #64748b);font-family:inherit;font-variant-numeric:tabular-nums}.odontogram__number-corner{fill:none;stroke:var(--odontogram-number-color, #64748b);stroke-linecap:round;stroke-linejoin:round}.odontogram__number-corner--selected{stroke:var(--odontogram-number-selected-color, #4338ca)}.odontogram__number--selected{fill:var(--odontogram-number-selected-color, #4338ca);font-weight:700}.odontogram-surface{fill:var(--odontogram-surface-fill, #fff);stroke:var(--odontogram-surface-stroke-color, var(--odontogram-stroke-color));stroke-linejoin:round;cursor:pointer;transition:fill .15s ease-in}.odontogram:not([aria-disabled=true]) .odontogram-surfaces:not(.odontogram-surfaces--inactive) .odontogram-surface:hover{fill:var(--odontogram-surface-hover-color, var(--odontogram-selected-color))}.odontogram-surface--selected,.odontogram-surface--selected:hover{fill:var(--odontogram-surface-selected-color, #6366f1)}.odontogram-surface:focus{outline:none}.odontogram-surface:focus-visible{stroke:var(--odontogram-surface-focus-color, #4338ca);stroke-width:2px}.odontogram-surfaces--inactive{opacity:var(--odontogram-absent-opacity, .55)}.odontogram-surfaces--inactive .odontogram-surface,.odontogram[aria-disabled=true] .odontogram-surface{cursor:default}.odontogram__surface-letter{fill:var(--odontogram-surface-letter-color, #334155);font-family:inherit;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:.12em}.odontogram-surface-menu{z-index:1000;min-width:12rem;max-width:min(22rem,calc(100vw - 16px));padding:.75rem;border:1px solid var(--odontogram-surface-menu-border, #cbd5e1);border-radius:.5rem;color:var(--odontogram-surface-menu-fg, #1e293b);background:var(--odontogram-surface-menu-bg, #fff);box-shadow:0 8px 24px #0f172a2e}.odontogram__overlay{pointer-events:none}.odontogram-tooth path:nth-of-type(2){opacity:0;transition:opacity .2s ease-in}.odontogram-tooth path[data-colored=true],.odontogram-tooth--selected path:nth-of-type(2),.odontogram-tooth:not(.odontogram-tooth--disabled):hover path:nth-of-type(2){opacity:1}.odontogram-tooth--selected path:nth-of-type(2),.odontogram-tooth:not(.odontogram-tooth--disabled):hover path:nth-of-type(2){fill:var(--odontogram-selected-color)}.odontogram-tooth:focus,.odontogram-tooth:focus-visible{outline:.5px solid var(--odontogram-focus-outline-color);filter:drop-shadow(0 0 .5px rgb(221 214 254 / 60%)) drop-shadow(0 0 1.5px rgb(167 139 250 / 21%))}.odontogram-surface-guide{--odontogram-stroke-color: #8a98be;--odontogram-selected-color: #c6ccf8;display:grid;grid-template-columns:minmax(7rem,10rem) minmax(0,1fr);gap:.5rem 1rem;align-items:start;color:#1e293b;font-family:inherit}.odontogram-surface-guide__title{grid-column:1 / -1;margin:0;font-weight:700}.odontogram-surface-guide__diagram{width:100%;height:auto;overflow:visible}.odontogram-surface-guide__diagram .odontogram-surface:hover{fill:var(--odontogram-surface-hover-color, var(--odontogram-selected-color))}.odontogram-surface-guide__highlight{fill:none;stroke:var(--odontogram-surface-focus-color, #4338ca);stroke-width:2.4;stroke-linejoin:round;pointer-events:none}.odontogram-surface-guide__findings{pointer-events:none}.odontogram-surface-guide__letter{fill:var(--odontogram-surface-letter-color, #334155);font-size:10px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:2.5px;pointer-events:none}.odontogram-surface-guide__letter--active{fill:var(--odontogram-surface-focus-color, #4338ca)}.odontogram-surface-guide__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.25rem .75rem;align-content:start;margin:0;padding:0;list-style:none}.odontogram-surface-guide .odontogram-surface-guide__item{display:flex;gap:.5rem;width:100%;padding:.35rem .5rem;border:1px solid transparent;border-radius:.375rem;color:inherit;font:inherit;font-size:.875rem;text-align:left;background:none;cursor:pointer}.odontogram-surface-guide .odontogram-surface-guide__item:disabled{cursor:default;opacity:1}.odontogram-surface-guide .odontogram-surface-guide__item--active{border-color:var(--odontogram-surface-focus-color, #4338ca);background:var(--odontogram-surface-guide-active-bg, #eef2ff)}.odontogram-surface-guide__item[aria-pressed=true] .odontogram-surface-guide__badge{color:#fff;background:var(--odontogram-surface-selected-color, #6366f1)}.odontogram-surface-guide__badge{flex:none;display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;font-weight:700;background:#e2e8f0}.odontogram-surface-guide__text{display:grid;gap:.1rem}.odontogram-surface-guide__findings-text{color:#475569;font-size:.8125rem}.odontogram-inspector{display:grid;gap:.75rem;color:#1e293b;font-family:inherit;font-size:.875rem}.odontogram-inspector__header{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}.odontogram-inspector__title{font-size:1rem}.odontogram-inspector__type{color:#64748b}.odontogram-inspector__state{padding:0 .4rem;border-radius:999px;color:#b91c1c;background:#fee2e2}.odontogram-inspector__body{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start}.odontogram-inspector__guide{flex:0 0 9rem;grid-template-columns:1fr}.odontogram-inspector__details{flex:1 1 14rem}.odontogram-inspector__guide .odontogram-surface-guide__title{display:none}.odontogram-inspector__details{display:grid;gap:.75rem}.odontogram-inspector__section{display:grid;gap:.35rem;margin:0}.odontogram-inspector__heading{margin:0;font-weight:700}.odontogram-inspector__list{display:grid;gap:.35rem;margin:0;padding:0;list-style:none}.odontogram-inspector__list li{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem}.odontogram-inspector__badge{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;font-weight:700;background:#e2e8f0}.odontogram-inspector__surface-name{font-weight:600}.odontogram-inspector__entries{display:flex;flex-wrap:wrap;gap:.25rem}.odontogram-inspector__entry{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .25rem .1rem .5rem;border-radius:999px;background:#f1f5f9}.odontogram-inspector .odontogram-inspector__remove{width:1.25rem;height:1.25rem;padding:0;border:0;border-radius:50%;color:#475569;font:inherit;line-height:1;background:transparent;cursor:pointer}.odontogram-inspector .odontogram-inspector__remove:hover,.odontogram-inspector .odontogram-inspector__remove:focus-visible{color:#fff;background:#dc2626}.odontogram-inspector__empty,.odontogram-inspector__hint{margin:0;color:#64748b}.odontogram-inspector__field{display:grid;gap:.25rem}.odontogram-inspector__status{display:flex;flex-wrap:wrap;gap:.25rem .75rem;margin:0;padding:0;border:0}.odontogram-inspector__status legend{padding:0;margin-bottom:.25rem}.odontogram-inspector .odontogram-inspector__add{justify-self:start;padding:.35rem .9rem;border:1px solid var(--odontogram-surface-selected-color, #6366f1);border-radius:.375rem;color:#fff;font:inherit;background:var(--odontogram-surface-selected-color, #6366f1);cursor:pointer}.odontogram-inspector .odontogram-inspector__add:disabled{opacity:.5;cursor:not-allowed}