@alfadocs/ui-kit 0.75.0 → 0.78.0

package/dist/_chunks/periodontal-chart-CYBhr9vc.js

@@ -0,0 +1,1305 @@
+import { jsx as n, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as et, useRef as Re, useState as tt, useCallback as O, useMemo as Ie, useImperativeHandle as st } from "react";
+import { c as qe } from "./index-D2ZczOXr.js";
+import { useTranslation as rt } from "react-i18next";
+import { u as nt } from "./registry-DvAUVLHh.js";
+import { P as ve, f as ye, e as at, d as ot, F as it, t as lt } from "./tooth-data-BwuoKFf4.js";
+import { P as Fe } from "./periodontal-chart-card-WVjJAheq.js";
+const F = {
+  type: "string",
+  description: "FDI tooth id ('11'–'48' permanent, '51'–'85' primary)."
+}, $ = {
+  enum: ["db", "b", "mb", "dl", "l", "ml"],
+  description: "Probing site: (m/d)b = mesio-/disto-/mid buccal, (m/d)l = mesio-/disto-/mid lingual."
+}, fe = {
+  type: "integer",
+  description: "Whole millimetres — perio probing is recorded in integer mm."
+}, ct = {
+  type: "object",
+  properties: {
+    meanPocketDepthMm: { type: ["number", "null"] },
+    meanAttachmentLevelMm: { type: ["number", "null"] },
+    plaquePercent: { type: ["number", "null"] },
+    bleedingPercent: { type: ["number", "null"] },
+    scoredSiteCount: { type: "number" },
+    deepPocketCount: { type: "number" }
+  }
+}, dt = {
+  type: "array",
+  description: "One entry per flagged tooth, in clinical order; each tooth’s pockets are deepest-first.",
+  items: {
+    type: "object",
+    properties: {
+      fdi: F,
+      status: {
+        enum: ["present", "missing", "implant"],
+        description: "Structural status of the tooth."
+      },
+      severity: {
+        enum: ["normal", "moderate", "severe"],
+        description: "Worst pocket severity band across the tooth."
+      },
+      maxPocketDepthMm: { type: ["integer", "null"] },
+      pockets: {
+        type: "array",
+        description: "Sites at/above the moderate threshold, deepest first.",
+        items: {
+          type: "object",
+          properties: {
+            site: $,
+            pocketDepthMm: fe,
+            severity: { enum: ["moderate", "severe"] }
+          }
+        }
+      },
+      bleedingSites: { type: "array", items: $ },
+      plaqueSites: { type: "array", items: $ },
+      suppurationSites: { type: "array", items: $ },
+      maxRecessionMm: { type: ["number", "null"] },
+      mobility: {
+        type: ["integer", "null"],
+        description: "Miller mobility grade 1–3, or null when none."
+      },
+      furcation: { type: "array", items: { enum: ["buccal", "lingual"] } }
+    }
+  }
+};
+function ut(s) {
+  if (!s) return null;
+  const t = { ...s };
+  return delete t.note, t;
+}
+const pt = {
+  id: "periodontal-chart",
+  // pick — focus a measurement input (transient); set_value / edit_inline —
+  // record per-site probing readings and per-tooth flags.
+  capabilities: ["pick", "set_value", "edit_inline"],
+  state: {
+    indices: {
+      type: "object",
+      descriptionKey: "ui.agent.periodontalChart.state.indices",
+      description: "Derived whole-mouth indices: mean probing depth, mean attachment level, plaque %, bleeding %, scored-site and deep-pocket counts. Aggregates only — no per-site or patient data.",
+      read: (s) => s.getIndices()
+    },
+    findings: {
+      type: "object[]",
+      descriptionKey: "ui.agent.periodontalChart.state.findings",
+      description: "Narratable per-tooth problem list — one entry per flagged tooth (missing, implant, a pocket at/above the moderate threshold, bleeding, suppuration, mobility ≥ 1, or furcation), in clinical order with each tooth’s pockets deepest-first. Each entry carries fdi, status, severity, maxPocketDepthMm, pockets, bleeding/plaque/suppuration sites, maxRecessionMm, mobility and furcation. Read this to summarise the chart aloud. Structural readings + FDI ids only — never the free-text note or patient identity.",
+      read: (s) => s.getFindings()
+    },
+    missingTeeth: {
+      type: "string[]",
+      descriptionKey: "ui.agent.periodontalChart.state.missingTeeth",
+      description: "FDI ids of every tooth flagged as missing.",
+      read: (s) => s.missingTeeth()
+    },
+    chartedTeeth: {
+      type: "string[]",
+      descriptionKey: "ui.agent.periodontalChart.state.chartedTeeth",
+      description: "FDI ids of teeth carrying at least one probing reading or flag. Identifiers only — never patient identity or the free-text note.",
+      read: (s) => Object.entries(s.getValue()).filter(([, t]) => t.missing || t.implant || t.mobility != null || t.furcation && Object.keys(t.furcation).length > 0 ? !0 : (t.sites ? Object.values(t.sites) : []).some(
+        (d) => d != null && (d.pocketDepthMm != null || d.recessionMm != null || d.bleeding || d.plaque || d.suppuration)
+      )).map(([t]) => t)
+    }
+  },
+  actions: {
+    focus_site: {
+      safety: "read",
+      argsType: '{ fdi: string; site: PeriodontalSiteId; field: "pocketDepthMm" | "recessionMm" }',
+      argsSchema: {
+        type: "object",
+        properties: {
+          fdi: F,
+          site: $,
+          field: { enum: ["pocketDepthMm", "recessionMm"] }
+        },
+        required: ["fdi", "site", "field"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.focusSite",
+      description: "Move focus to a specific probing-measurement input.",
+      invoke: (s, t) => {
+        s.focusSite(t.fdi, t.site, t.field);
+      }
+    },
+    get_tooth: {
+      safety: "read",
+      argsType: "{ fdi: string }",
+      argsSchema: {
+        type: "object",
+        properties: { fdi: F },
+        required: ["fdi"]
+      },
+      returns: "object | null",
+      returnsSchema: { type: ["object", "null"] },
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.getTooth",
+      description: "Read one tooth’s structural readings (sites, flags, mobility, furcation). The free-text note is never returned.",
+      invoke: (s, t) => ut(s.getTooth(t.fdi))
+    },
+    get_indices: {
+      safety: "read",
+      argsType: "{}",
+      argsSchema: { type: "object", properties: {} },
+      returns: "PeriodontalIndices",
+      returnsSchema: ct,
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.getIndices",
+      description: "Read the derived whole-mouth summary indices.",
+      invoke: (s) => s.getIndices()
+    },
+    get_findings: {
+      safety: "read",
+      argsType: "{}",
+      argsSchema: { type: "object", properties: {} },
+      returns: "PeriodontalToothFinding[]",
+      returnsSchema: dt,
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.getFindings",
+      description: "Read the narratable per-tooth problem list (flagged teeth only). Use it to summarise the chart aloud — e.g. “46: 8 mm disto-buccal pocket, bleeding, grade 2 mobility”. Structural readings and FDI ids only; the free-text note is never returned.",
+      invoke: (s) => s.getFindings()
+    },
+    set_depth: {
+      safety: "write",
+      argsType: "{ fdi: string; site: PeriodontalSiteId; mm: number }",
+      argsSchema: {
+        type: "object",
+        properties: { fdi: F, site: $, mm: fe },
+        required: ["fdi", "site", "mm"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.setDepth",
+      description: "Record the probing pocket depth (mm) at a site.",
+      invoke: (s, t) => {
+        s.setSite(t.fdi, t.site, {
+          pocketDepthMm: Math.max(0, t.mm)
+        });
+      }
+    },
+    set_recession: {
+      safety: "write",
+      argsType: "{ fdi: string; site: PeriodontalSiteId; mm: number }",
+      argsSchema: {
+        type: "object",
+        properties: { fdi: F, site: $, mm: fe },
+        required: ["fdi", "site", "mm"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.setRecession",
+      description: "Record the gingival recession (mm) at a site.",
+      invoke: (s, t) => {
+        s.setSite(t.fdi, t.site, { recessionMm: t.mm });
+      }
+    },
+    toggle_bleeding: {
+      safety: "write",
+      argsType: "{ fdi: string; site: PeriodontalSiteId; value: boolean }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          fdi: F,
+          site: $,
+          value: { type: "boolean" }
+        },
+        required: ["fdi", "site", "value"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.toggleBleeding",
+      description: "Set bleeding on probing at a site.",
+      invoke: (s, t) => {
+        s.setSite(t.fdi, t.site, { bleeding: t.value });
+      }
+    },
+    toggle_plaque: {
+      safety: "write",
+      argsType: "{ fdi: string; site: PeriodontalSiteId; value: boolean }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          fdi: F,
+          site: $,
+          value: { type: "boolean" }
+        },
+        required: ["fdi", "site", "value"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.togglePlaque",
+      description: "Set plaque presence at a site.",
+      invoke: (s, t) => {
+        s.setSite(t.fdi, t.site, { plaque: t.value });
+      }
+    },
+    set_mobility: {
+      safety: "write",
+      argsType: "{ fdi: string; grade: 0 | 1 | 2 | 3 }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          fdi: F,
+          grade: { enum: [0, 1, 2, 3] }
+        },
+        required: ["fdi", "grade"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.setMobility",
+      description: "Set a tooth’s Miller mobility grade (0–3).",
+      invoke: (s, t) => {
+        s.setTooth(t.fdi, { mobility: t.grade });
+      }
+    },
+    set_missing: {
+      safety: "write",
+      argsType: "{ fdi: string; value: boolean }",
+      argsSchema: {
+        type: "object",
+        properties: { fdi: F, value: { type: "boolean" } },
+        required: ["fdi", "value"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.setMissing",
+      description: "Flag a tooth present or absent.",
+      invoke: (s, t) => {
+        s.setTooth(t.fdi, { missing: t.value });
+      }
+    },
+    clear_tooth: {
+      safety: "destructive",
+      argsType: "{ fdi: string }",
+      argsSchema: {
+        type: "object",
+        properties: { fdi: F },
+        required: ["fdi"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.clearTooth",
+      description: "Clear every reading from a tooth.",
+      invoke: (s, t) => {
+        s.clearTooth(t.fdi);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "periodontal-chart",
+      description: "Marks the PeriodontalChart root group."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-fdi",
+      description: "Each tooth column header carries its FDI id as `data-fdi`. Every measurement input also carries `data-fdi` + `data-site` + `data-field`. The root `data-mode` exposes interactive vs display."
+    }
+  }
+}, be = ["db", "b", "mb"], mt = ["dl", "l", "ml"];
+function Ae(s) {
+  return s === "buccal" ? be : mt;
+}
+const xe = 4, ie = 6, ht = 20, gt = 5;
+function je(s, t = xe, h = ie) {
+  return s == null || !Number.isFinite(s) ? "normal" : s >= h ? "severe" : s >= t ? "moderate" : "normal";
+}
+const ft = {
+  18: { buccal: 1, lingual: 2 },
+  17: { buccal: 1, lingual: 2 },
+  16: { buccal: 1, lingual: 2 },
+  15: { buccal: 2, lingual: 2 },
+  14: { buccal: 0, lingual: 2 },
+  24: { buccal: 0, lingual: 2 },
+  25: { buccal: 2, lingual: 2 },
+  26: { buccal: 1, lingual: 2 },
+  27: { buccal: 1, lingual: 2 },
+  28: { buccal: 1, lingual: 2 },
+  48: { buccal: 1, lingual: 1 },
+  47: { buccal: 1, lingual: 1 },
+  46: { buccal: 1, lingual: 1 },
+  36: { buccal: 1, lingual: 1 },
+  37: { buccal: 1, lingual: 1 },
+  38: { buccal: 1, lingual: 1 }
+};
+function bt(s, t) {
+  var h;
+  return ((h = ft[s]) == null ? void 0 : h[t]) ?? 0;
+}
+const vt = ve.slice(0, 16), yt = ve.slice(16), xt = ye.slice(0, 10), Nt = ye.slice(10);
+function Oe(s) {
+  return s === "primary" ? { upper: xt, lower: Nt } : {
+    upper: vt,
+    lower: yt
+  };
+}
+function _e(s, t) {
+  return t === "universal" ? at[s] ?? s : t === "palmer" ? ot[s] ?? s : s;
+}
+function oe(s) {
+  const t = Math.round(s * 10) / 10;
+  return t === 0 ? 0 : t;
+}
+function Le(s) {
+  let t = 0, h = 0, d = 0, f = 0, E = 0, S = 0;
+  for (const L of Object.values(s))
+    if (!(L.missing || !L.sites))
+      for (const P of Object.values(L.sites)) {
+        if (!P) continue;
+        const y = P.pocketDepthMm;
+        y == null || !Number.isFinite(y) || (d += 1, t += y, h += y + (P.recessionMm ?? 0), y >= ie && (S += 1), P.bleeding && (f += 1), P.plaque && (E += 1));
+      }
+  return d === 0 ? {
+    meanPocketDepthMm: null,
+    meanAttachmentLevelMm: null,
+    plaquePercent: null,
+    bleedingPercent: null,
+    scoredSiteCount: 0,
+    deepPocketCount: 0
+  } : {
+    meanPocketDepthMm: oe(t / d),
+    meanAttachmentLevelMm: oe(h / d),
+    plaquePercent: oe(E / d * 100),
+    bleedingPercent: oe(f / d * 100),
+    scoredSiteCount: d,
+    deepPocketCount: S
+  };
+}
+const Mt = [...ve, ...ye];
+function kt(s, t) {
+  var L, P;
+  const h = (t == null ? void 0 : t.moderate) ?? xe, d = (t == null ? void 0 : t.severe) ?? ie, f = /* @__PURE__ */ new Map();
+  Mt.forEach((y, C) => f.set(y, C));
+  const E = Object.keys(s).sort(
+    (y, C) => (f.get(y) ?? Number.MAX_SAFE_INTEGER) - (f.get(C) ?? Number.MAX_SAFE_INTEGER)
+  ), S = [];
+  for (const y of E) {
+    const C = s[y];
+    if (!C) continue;
+    if (C.missing) {
+      S.push({
+        fdi: y,
+        status: "missing",
+        severity: "normal",
+        maxPocketDepthMm: null,
+        pockets: [],
+        bleedingSites: [],
+        plaqueSites: [],
+        suppurationSites: [],
+        maxRecessionMm: null,
+        mobility: null,
+        furcation: []
+      });
+      continue;
+    }
+    const G = C.implant ? "implant" : "present", q = [], Z = [], te = [], z = [];
+    let Y = null, X = null;
+    for (const M of Fe) {
+      const V = (L = C.sites) == null ? void 0 : L[M];
+      if (!V) continue;
+      const { pocketDepthMm: K, recessionMm: B, bleeding: b, plaque: H, suppuration: D } = V;
+      if (K != null && Number.isFinite(K)) {
+        Y = Y == null ? K : Math.max(Y, K);
+        const j = je(K, h, d);
+        j !== "normal" && q.push({ site: M, pocketDepthMm: K, severity: j });
+      }
+      B != null && Number.isFinite(B) && B > 0 && (X = X == null ? B : Math.max(X, B)), b && Z.push(M), H && te.push(M), D && z.push(M);
+    }
+    q.sort((M, V) => V.pocketDepthMm - M.pocketDepthMm);
+    const se = C.mobility != null && C.mobility >= 1 ? C.mobility : null, o = [];
+    if (C.furcation)
+      for (const M of ["buccal", "lingual"])
+        (P = C.furcation[M]) != null && P.some(Boolean) && o.push(M);
+    const le = q.some(
+      (M) => M.severity === "severe"
+    ) ? "severe" : q.length > 0 ? "moderate" : "normal";
+    (G === "implant" || q.length > 0 || Z.length > 0 || z.length > 0 || se != null || o.length > 0) && S.push({
+      fdi: y,
+      status: G,
+      severity: le,
+      maxPocketDepthMm: Y,
+      pockets: q,
+      bleedingSites: Z,
+      plaqueSites: te,
+      suppurationSites: z,
+      maxRecessionMm: X,
+      mobility: se,
+      furcation: o
+    });
+  }
+  return S;
+}
+function jt(s = "permanent") {
+  const { upper: t, lower: h } = Oe(s), d = {};
+  for (const f of [...t, ...h]) d[f] = {};
+  return d;
+}
+function Ot(s) {
+  const t = [];
+  for (const [h, d] of Object.entries(s))
+    if (!(d.missing || !d.sites))
+      for (const f of Fe) {
+        const E = d.sites[f];
+        if (!E) continue;
+        const { pocketDepthMm: S, recessionMm: L, bleeding: P, suppuration: y } = E;
+        S == null && L == null && !P && !y || t.push({
+          tooth: h,
+          site: f,
+          pocketDepthMm: S,
+          recessionMm: L,
+          bleeding: P,
+          suppuration: y
+        });
+      }
+  return t;
+}
+function $t(s) {
+  const t = {};
+  for (const [h, d] of Object.entries(s))
+    d.mobility != null && (t[h] = d.mobility);
+  return t;
+}
+const Ct = qe(
+  "ds:w-full ds:flex ds:flex-col ds:gap-[var(--spacing-lg)] ds:text-[color:var(--foreground)]",
+  {
+    variants: {
+      // Disabled is conveyed by the inputs' own `disabled` state (native
+      // disabled controls are excluded from the axe contrast check). We must
+      // NOT dim the whole root with opacity — that would drop the legend,
+      // captions and headers below the AA contrast floor.
+      disabled: { true: "ds:cursor-not-allowed", false: "" }
+    },
+    defaultVariants: { disabled: !1 }
+  }
+), wt = qe(
+  "ds:h-6 ds:w-[3.5ch] ds:rounded-[var(--radius-sm)] ds:border ds:bg-[var(--background)] ds:text-center ds:tabular-nums ds:[font-variant-numeric:var(--font-feature-tabular)] ds:outline-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
+  {
+    variants: {
+      severity: {
+        normal: "ds:border-[color:var(--input)] ds:text-[color:var(--foreground)]",
+        moderate: "ds:border-[color:var(--warning)] ds:font-semibold ds:text-[color:var(--warning-foreground)]",
+        severe: "ds:border-[color:var(--destructive)] ds:font-bold ds:text-[color:var(--destructive)]"
+      }
+    },
+    defaultVariants: { severity: "normal" }
+  }
+);
+function St(s, t, h) {
+  return { ...s, [t]: { ...s[t], ...h } };
+}
+function Pt(s, t, h, d) {
+  const f = s[t] ?? {}, E = f.sites ?? {};
+  return {
+    ...s,
+    [t]: {
+      ...f,
+      sites: { ...E, [h]: { ...E[h], ...d } }
+    }
+  };
+}
+function Tt(s) {
+  return s === "severe" ? "ds:font-bold ds:text-[color:var(--destructive)]" : s === "moderate" ? "ds:font-semibold ds:text-[color:var(--warning-foreground)]" : "";
+}
+const Et = {
+  db: "disto-buccal",
+  b: "buccal",
+  mb: "mesio-buccal",
+  dl: "disto-lingual",
+  l: "lingual",
+  ml: "mesio-lingual"
+}, Dt = et(
+  ({
+    value: s,
+    defaultValue: t,
+    onChange: h,
+    mode: d = "interactive",
+    disabled: f = !1,
+    dentition: E = "permanent",
+    numbering: S = "fdi",
+    showTeeth: L = !0,
+    assetBaseUrl: P = "/toothscheme/teeth",
+    showCurves: y = !0,
+    showIndices: C = !0,
+    moderatePocketMm: G = xe,
+    severePocketMm: q = ie,
+    locale: Z,
+    "aria-label": te,
+    id: z,
+    className: Y,
+    ...X
+  }, se) => {
+    const { t: o, i18n: le } = rt(), ce = Z ?? le.language ?? "en", M = Re(null), V = s !== void 0, [K, B] = tt(
+      () => t ?? {}
+    ), b = V ? s : K, H = d === "display", D = Re(b);
+    D.current = b;
+    const j = O(
+      (e) => {
+        D.current = e, V || B(e), h == null || h(e);
+      },
+      [V, h]
+    ), re = O(
+      (e, r, a) => j(Pt(D.current, e, r, a)),
+      [j]
+    ), Q = O(
+      (e, r) => j(St(D.current, e, r)),
+      [j]
+    ), Ne = O(
+      (e) => {
+        const r = { ...D.current };
+        delete r[e], j(r);
+      },
+      [j]
+    ), Me = O(
+      (e, r, a) => {
+        var i, l;
+        try {
+          (l = (i = M.current) == null ? void 0 : i.querySelector(
+            `[data-perio-input][data-fdi="${e}"][data-site="${r}"][data-field="${a}"]`
+          )) == null || l.focus();
+        } catch {
+        }
+      },
+      []
+    ), R = Ie(
+      () => Le(b),
+      [b]
+    ), de = Ie(
+      () => ({
+        getValue: () => D.current,
+        getTooth: (e) => D.current[e],
+        getIndices: () => Le(D.current),
+        getFindings: () => kt(D.current, {
+          moderate: G,
+          severe: q
+        }),
+        missingTeeth: () => Object.entries(D.current).filter(([, e]) => e.missing).map(([e]) => e),
+        setSite: re,
+        setTooth: Q,
+        clearTooth: Ne,
+        focusSite: Me
+      }),
+      [
+        re,
+        Q,
+        Ne,
+        Me,
+        G,
+        q
+      ]
+    );
+    st(se, () => de, [de]), nt(pt, de, z);
+    const ke = Oe(E), $e = te ?? o("periodontalChart.ariaLabel", "Periodontal chart"), ee = O(
+      (e) => {
+        try {
+          return new Intl.NumberFormat(ce, {
+            maximumFractionDigits: 1
+          }).format(e);
+        } catch {
+          return String(e);
+        }
+      },
+      [ce]
+    ), Ce = O(
+      (e) => o(`periodontalChart.site.${e}`, {
+        defaultValue: Et[e]
+      }),
+      [o]
+    ), U = O(
+      (e) => _e(e, S),
+      [S]
+    ), I = /* @__PURE__ */ n(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "ds:text-[color:var(--muted-foreground)]",
+        children: o("periodontalChart.cell.empty", "–")
+      }
+    ), Ve = O((e) => {
+      var k;
+      const r = e.target;
+      if (!((k = r.matches) != null && k.call(r, "[data-perio-input]"))) return;
+      const a = e.key;
+      if (a !== "ArrowLeft" && a !== "ArrowRight" && a !== "ArrowUp" && a !== "ArrowDown")
+        return;
+      e.preventDefault();
+      const i = M.current;
+      if (!i) return;
+      if (a === "ArrowUp" || a === "ArrowDown") {
+        const v = r.getAttribute("data-fdi"), A = r.getAttribute("data-site"), N = r.getAttribute("data-field") === "pocketDepthMm" ? "recessionMm" : "pocketDepthMm", _ = i.querySelector(
+          `[data-perio-input][data-fdi="${v}"][data-site="${A}"][data-field="${N}"]`
+        );
+        _ == null || _.focus(), _ == null || _.select();
+        return;
+      }
+      const l = Array.from(
+        i.querySelectorAll("[data-perio-input]")
+      ), p = l.indexOf(r);
+      if (p === -1) return;
+      const c = l[p + (a === "ArrowRight" ? 1 : -1)];
+      c == null || c.focus(), c == null || c.select();
+    }, []), T = "ds:px-[var(--spacing-2xs)] ds:py-[var(--spacing-2xs)] ds:text-center ds:border-b ds:border-[color:var(--border)]", W = "ds:px-[var(--spacing-xs)] ds:py-[var(--spacing-2xs)] ds:text-start ds:font-medium ds:border-b ds:border-[color:var(--border)] ds:whitespace-nowrap", Ke = (e, r, a) => {
+      var c, k, v;
+      const i = (v = (k = (c = b[e]) == null ? void 0 : c.sites) == null ? void 0 : k[r]) == null ? void 0 : v[a], l = a === "pocketDepthMm" ? je(i, G, q) : "normal", p = o(`periodontalChart.input.${a}`, {
+        tooth: U(e),
+        site: Ce(r),
+        defaultValue: a === "pocketDepthMm" ? "Tooth {{tooth}} {{site}} pocket depth, millimetres" : "Tooth {{tooth}} {{site}} recession, millimetres"
+      }), g = l === "severe" ? o("periodontalChart.flag.severe", "severe pocket") : l === "moderate" ? o("periodontalChart.flag.moderate", "moderate pocket") : "";
+      return H ? i == null || !Number.isFinite(i) ? /* @__PURE__ */ n("span", { className: "ds:inline-block ds:w-[3.5ch]", children: I }) : /* @__PURE__ */ m(
+        "span",
+        {
+          className: `ds:inline-block ds:w-[3.5ch] ds:tabular-nums ds:[font-variant-numeric:var(--font-feature-tabular)] ${Tt(
+            l
+          )}`,
+          children: [
+            /* @__PURE__ */ n("span", { children: ee(i) }),
+            g ? /* @__PURE__ */ m("span", { className: "ds:sr-only", children: [
+              " ",
+              g
+            ] }) : null
+          ]
+        }
+      ) : /* @__PURE__ */ n(
+        "input",
+        {
+          type: "text",
+          inputMode: "numeric",
+          autoComplete: "off",
+          disabled: f,
+          "aria-label": g ? `${p}, ${g}` : p,
+          "data-perio-input": "",
+          "data-fdi": e,
+          "data-site": r,
+          "data-field": a,
+          value: i == null ? "" : String(i),
+          onFocus: (A) => A.currentTarget.select(),
+          onChange: (A) => {
+            const x = A.target.value.trim();
+            let N;
+            if (x === "" || x === "-")
+              N = void 0;
+            else {
+              const _ = Number(x);
+              if (!Number.isFinite(_)) return;
+              N = a === "pocketDepthMm" ? Math.max(0, _) : _;
+            }
+            re(
+              e,
+              r,
+              a === "pocketDepthMm" ? { pocketDepthMm: N } : { recessionMm: N }
+            );
+          },
+          className: wt({ severity: l })
+        }
+      );
+    }, He = (e, r, a) => {
+      var g, c, k;
+      const i = !!((k = (c = (g = b[e]) == null ? void 0 : g.sites) == null ? void 0 : c[r]) != null && k[a]), l = o(`periodontalChart.toggle.${a}`, {
+        tooth: U(e),
+        site: Ce(r),
+        defaultValue: a === "bleeding" ? "Tooth {{tooth}} {{site}} bleeding on probing" : "Tooth {{tooth}} {{site}} plaque"
+      }), p = a === "bleeding" ? "ds:accent-[var(--destructive)]" : "ds:accent-[var(--warning)]";
+      return H ? i ? /* @__PURE__ */ n(
+        "span",
+        {
+          role: "img",
+          "aria-label": l,
+          className: `ds:inline-block ds:size-2 ds:rounded-[var(--radius-full)] ${a === "bleeding" ? "ds:bg-[var(--destructive)]" : "ds:bg-[var(--warning)]"}`
+        }
+      ) : /* @__PURE__ */ n("span", { className: "ds:inline-block ds:size-6", children: I }) : /* @__PURE__ */ m("label", { className: "ds:inline-flex ds:size-6 ds:cursor-pointer ds:items-center ds:justify-center", children: [
+        /* @__PURE__ */ n("span", { className: "ds:sr-only", children: l }),
+        /* @__PURE__ */ n(
+          "input",
+          {
+            type: "checkbox",
+            disabled: f,
+            checked: i,
+            onChange: (v) => re(
+              e,
+              r,
+              a === "bleeding" ? { bleeding: v.target.checked } : { plaque: v.target.checked }
+            ),
+            className: `ds:size-4 ${p} ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:disabled:cursor-not-allowed ds:disabled:opacity-50`
+          }
+        )
+      ] });
+    }, ze = (e, r) => {
+      var p;
+      const a = b[e], i = bt(e, r);
+      if (a != null && a.missing || i === 0) return I;
+      const l = ((p = a == null ? void 0 : a.furcation) == null ? void 0 : p[r]) ?? [];
+      return /* @__PURE__ */ n("span", { className: "ds:inline-flex ds:items-center ds:justify-center ds:gap-[var(--spacing-2xs)]", children: Array.from({ length: i }, (g, c) => {
+        const k = !!l[c], v = o("periodontalChart.toggle.furcation", {
+          tooth: U(e),
+          side: o(`periodontalChart.side.${r}`, {
+            defaultValue: r === "buccal" ? "buccal" : "lingual"
+          }),
+          n: c + 1,
+          defaultValue: "Tooth {{tooth}} {{side}} furcation {{n}}"
+        });
+        return H ? k ? /* @__PURE__ */ n(
+          "span",
+          {
+            role: "img",
+            "aria-label": v,
+            className: "ds:inline-block ds:size-2 ds:rounded-[var(--radius-full)] ds:bg-[var(--primary)]"
+          },
+          c
+        ) : /* @__PURE__ */ n(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ds:inline-block ds:size-2 ds:rounded-[var(--radius-full)] ds:border ds:border-[color:var(--border)]"
+          },
+          c
+        ) : /* @__PURE__ */ m(
+          "label",
+          {
+            className: "ds:inline-flex ds:size-6 ds:cursor-pointer ds:items-center ds:justify-center",
+            children: [
+              /* @__PURE__ */ n("span", { className: "ds:sr-only", children: v }),
+              /* @__PURE__ */ n(
+                "input",
+                {
+                  type: "checkbox",
+                  disabled: f,
+                  checked: k,
+                  onChange: (A) => {
+                    var N;
+                    const x = [...((N = a == null ? void 0 : a.furcation) == null ? void 0 : N[r]) ?? []];
+                    for (; x.length < i; ) x.push(!1);
+                    x[c] = A.target.checked, Q(e, {
+                      furcation: { ...a == null ? void 0 : a.furcation, [r]: x }
+                    });
+                  },
+                  className: "ds:size-4 ds:accent-[var(--primary)] ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:disabled:cursor-not-allowed ds:disabled:opacity-50"
+                }
+              )
+            ]
+          },
+          c
+        );
+      }) });
+    }, ne = (e, r, a, i, l) => /* @__PURE__ */ m("tr", { children: [
+      /* @__PURE__ */ n("th", { scope: "row", className: W, children: o(r, a) }),
+      e.map((p) => {
+        var g;
+        return /* @__PURE__ */ n("td", { className: T, children: (g = b[p]) != null && g.missing ? I : /* @__PURE__ */ n("span", { className: "ds:flex ds:items-center ds:justify-center ds:gap-[var(--spacing-2xs)]", children: Ae(i).map((c) => /* @__PURE__ */ n("span", { children: Ke(p, c, l) }, c)) }) }, p);
+      })
+    ] }), ae = (e, r, a, i, l) => /* @__PURE__ */ m("tr", { children: [
+      /* @__PURE__ */ n("th", { scope: "row", className: W, children: o(r, a) }),
+      e.map((p) => {
+        var g;
+        return /* @__PURE__ */ n("td", { className: T, children: (g = b[p]) != null && g.missing ? I : /* @__PURE__ */ n("span", { className: "ds:flex ds:items-center ds:justify-center ds:gap-[var(--spacing-2xs)]", children: Ae(i).map((c) => /* @__PURE__ */ n("span", { children: He(p, c, l) }, c)) }) }, p);
+      })
+    ] }), we = (e, r) => /* @__PURE__ */ m("tr", { children: [
+      /* @__PURE__ */ n("th", { scope: "row", className: W, children: o("periodontalChart.row.furcation", "Furcation") }),
+      e.map((a) => /* @__PURE__ */ n("td", { className: T, children: ze(a, r) }, a))
+    ] }), Se = (e, r, a, i) => /* @__PURE__ */ m("tr", { children: [
+      /* @__PURE__ */ n("th", { scope: "row", className: W, children: o(r, a) }),
+      e.map((l) => {
+        var c, k;
+        if (i === "implant" && ((c = b[l]) != null && c.missing))
+          return /* @__PURE__ */ n("td", { className: T, children: I }, l);
+        const p = !!((k = b[l]) != null && k[i]), g = o(`periodontalChart.flag.${i}Label`, {
+          tooth: U(l),
+          defaultValue: i === "missing" ? "Tooth {{tooth}} missing" : "Tooth {{tooth}} implant"
+        });
+        return /* @__PURE__ */ n("td", { className: T, children: H ? p ? /* @__PURE__ */ n(
+          "span",
+          {
+            role: "img",
+            "aria-label": g,
+            className: "type-meta ds:font-semibold",
+            children: i === "missing" ? o("periodontalChart.flag.missingShort", "×") : o("periodontalChart.flag.implantShort", "I")
+          }
+        ) : I : /* @__PURE__ */ m("label", { className: "ds:inline-flex ds:size-6 ds:cursor-pointer ds:items-center ds:justify-center", children: [
+          /* @__PURE__ */ n("span", { className: "ds:sr-only", children: g }),
+          /* @__PURE__ */ n(
+            "input",
+            {
+              type: "checkbox",
+              disabled: f,
+              checked: p,
+              onChange: (v) => Q(
+                l,
+                i === "missing" ? { missing: v.target.checked } : { implant: v.target.checked }
+              ),
+              className: "ds:size-4 ds:accent-[var(--primary)] ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:disabled:cursor-not-allowed ds:disabled:opacity-50"
+            }
+          )
+        ] }) }, l);
+      })
+    ] }), Be = (e) => /* @__PURE__ */ m("tr", { children: [
+      /* @__PURE__ */ n("th", { scope: "row", className: W, children: o("periodontalChart.row.mobility", "Mobility") }),
+      e.map((r) => {
+        var l, p;
+        if ((l = b[r]) != null && l.missing)
+          return /* @__PURE__ */ n("td", { className: T, children: I }, r);
+        const a = (p = b[r]) == null ? void 0 : p.mobility, i = o("periodontalChart.mobility.label", {
+          tooth: U(r),
+          defaultValue: "Tooth {{tooth}} mobility grade"
+        });
+        return H ? /* @__PURE__ */ n("td", { className: T, children: a == null ? I : /* @__PURE__ */ n("span", { role: "img", "aria-label": i, className: "type-meta", children: a }) }, r) : /* @__PURE__ */ n("td", { className: T, children: /* @__PURE__ */ m(
+          "select",
+          {
+            disabled: f,
+            "aria-label": i,
+            value: a == null ? "" : String(a),
+            onChange: (g) => Q(r, {
+              mobility: g.target.value === "" ? void 0 : Number(g.target.value)
+            }),
+            className: "ds:h-6 ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--input)] ds:bg-[var(--background)] ds:text-[color:var(--foreground)] ds:text-center ds:outline-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ n("option", { value: "", children: o("periodontalChart.mobility.none", "–") }),
+              /* @__PURE__ */ n("option", { value: "0", children: "0" }),
+              /* @__PURE__ */ n("option", { value: "1", children: "1" }),
+              /* @__PURE__ */ n("option", { value: "2", children: "2" }),
+              /* @__PURE__ */ n("option", { value: "3", children: "3" })
+            ]
+          }
+        ) }, r);
+      })
+    ] }), Ue = (e) => /* @__PURE__ */ m("tr", { children: [
+      /* @__PURE__ */ n("th", { scope: "row", className: W, children: o("periodontalChart.row.note", "Note") }),
+      e.map((r) => {
+        var l, p;
+        if ((l = b[r]) != null && l.missing)
+          return /* @__PURE__ */ n("td", { className: T, children: I }, r);
+        const a = ((p = b[r]) == null ? void 0 : p.note) ?? "", i = o("periodontalChart.note.label", {
+          tooth: U(r),
+          defaultValue: "Tooth {{tooth}} note"
+        });
+        return H ? /* @__PURE__ */ n("td", { className: `${T} ds:text-start`, children: a ? /* @__PURE__ */ n("span", { className: "type-meta", children: a }) : I }, r) : /* @__PURE__ */ n("td", { className: T, children: /* @__PURE__ */ n(
+          "input",
+          {
+            type: "text",
+            disabled: f,
+            "aria-label": i,
+            value: a,
+            onChange: (g) => Q(r, { note: g.target.value }),
+            className: "ds:h-6 ds:w-[6ch] ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--input)] ds:bg-[var(--background)] ds:text-[color:var(--foreground)] ds:px-[var(--spacing-2xs)] ds:outline-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:disabled:cursor-not-allowed ds:disabled:opacity-50"
+          }
+        ) }, r);
+      })
+    ] }), We = (e) => /* @__PURE__ */ m("tr", { children: [
+      /* @__PURE__ */ n("th", { scope: "row", className: W, children: o("periodontalChart.row.tooth", "Tooth") }),
+      e.map((r) => {
+        const a = b[r], i = it[r];
+        if (a != null && a.missing || !i)
+          return /* @__PURE__ */ n("td", { className: T, children: I }, r);
+        const l = a != null && a.implant ? "implant" : "default";
+        return /* @__PURE__ */ n("td", { className: T, children: /* @__PURE__ */ n(
+          "img",
+          {
+            src: lt(i, P, l, "side"),
+            alt: "",
+            "aria-hidden": "true",
+            loading: "lazy",
+            className: "ds:mx-auto ds:h-12 ds:w-auto ds:max-w-full ds:object-contain"
+          }
+        ) }, r);
+      })
+    ] }), Ge = (e) => {
+      var Te, Ee, De;
+      const c = (u) => 38 + Math.min(Math.max(0, u), 13) * 6, k = (u) => 38 - Math.min(Math.max(0, u), 5) * 6, v = [], A = [];
+      let x = [], N = [];
+      const _ = () => {
+        x.length && v.push(x), N.length && A.push(N), x = [], N = [];
+      };
+      let ue = 12;
+      for (const u of e) {
+        const w = (Te = b[u]) == null ? void 0 : Te.missing;
+        for (const Ze of be) {
+          const J = w || (De = (Ee = b[u]) == null ? void 0 : Ee.sites) == null ? void 0 : De[Ze], he = J == null ? void 0 : J.pocketDepthMm, ge = J == null ? void 0 : J.recessionMm;
+          he != null && Number.isFinite(he) ? x.push({ x: ue, y: c(he) }) : x.length && (v.push(x), x = []), ge != null && Number.isFinite(ge) ? N.push({ x: ue, y: k(ge) }) : N.length && (A.push(N), N = []), ue += 24;
+        }
+      }
+      _();
+      const pe = e.length * be.length * 24, me = (u) => u.map((w) => `${w.x},${w.y}`).join(" "), Qe = v.flat(), Je = A.flat();
+      return /* @__PURE__ */ m(
+        "svg",
+        {
+          viewBox: `0 0 ${pe} 124`,
+          className: "ds:h-[132px] ds:w-full",
+          preserveAspectRatio: "none",
+          "aria-hidden": "true",
+          focusable: "false",
+          children: [
+            [3, 6, 9, 12].map((u) => /* @__PURE__ */ n(
+              "line",
+              {
+                x1: 0,
+                x2: pe,
+                y1: c(u),
+                y2: c(u),
+                stroke: "var(--border)",
+                strokeWidth: 1,
+                strokeDasharray: "2 4"
+              },
+              u
+            )),
+            /* @__PURE__ */ n(
+              "line",
+              {
+                x1: 0,
+                x2: pe,
+                y1: 38,
+                y2: 38,
+                stroke: "var(--border)",
+                strokeWidth: 1.5
+              }
+            ),
+            v.map(
+              (u, w) => u.length >= 2 ? /* @__PURE__ */ n(
+                "polygon",
+                {
+                  points: `${u[0].x},38 ${me(u)} ${u[u.length - 1].x},38`,
+                  fill: "var(--success)",
+                  fillOpacity: 0.14
+                },
+                `fill-${w}`
+              ) : null
+            ),
+            v.map(
+              (u, w) => u.length >= 2 ? /* @__PURE__ */ n(
+                "polyline",
+                {
+                  points: me(u),
+                  fill: "none",
+                  stroke: "var(--success)",
+                  strokeWidth: 2.5,
+                  strokeLinejoin: "round",
+                  strokeLinecap: "round"
+                },
+                `depth-${w}`
+              ) : null
+            ),
+            A.map(
+              (u, w) => u.length >= 2 ? /* @__PURE__ */ n(
+                "polyline",
+                {
+                  points: me(u),
+                  fill: "none",
+                  stroke: "var(--accent)",
+                  strokeWidth: 2.5,
+                  strokeLinejoin: "round",
+                  strokeLinecap: "round"
+                },
+                `margin-${w}`
+              ) : null
+            ),
+            Qe.map((u, w) => /* @__PURE__ */ n(
+              "circle",
+              {
+                cx: u.x,
+                cy: u.y,
+                r: 2,
+                fill: "var(--success)"
+              },
+              `dp-${w}`
+            )),
+            Je.map((u, w) => /* @__PURE__ */ n(
+              "circle",
+              {
+                cx: u.x,
+                cy: u.y,
+                r: 2,
+                fill: "var(--accent)"
+              },
+              `mp-${w}`
+            ))
+          ]
+        }
+      );
+    }, Pe = (e, r, a) => /* @__PURE__ */ n("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: /* @__PURE__ */ m(
+      "div",
+      {
+        tabIndex: 0,
+        role: "group",
+        dir: "ltr",
+        "aria-label": o(r, a),
+        className: "ds:overflow-x-auto ds:rounded-[var(--radius-sm)] ds:outline-none ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+        children: [
+          /* @__PURE__ */ m("table", { className: "type-body-sm ds:w-full ds:border-collapse", children: [
+            /* @__PURE__ */ n("caption", { className: "type-label ds:text-start ds:mb-[var(--spacing-2xs)] ds:text-[color:var(--muted-foreground)]", children: o(r, a) }),
+            /* @__PURE__ */ n("thead", { children: /* @__PURE__ */ m("tr", { children: [
+              /* @__PURE__ */ n(
+                "th",
+                {
+                  scope: "col",
+                  className: "ds:px-[var(--spacing-xs)] ds:py-[var(--spacing-2xs)] ds:text-start ds:border-b ds:border-[color:var(--border)]",
+                  children: o("periodontalChart.column.measure", "Measurement")
+                }
+              ),
+              e.map((i) => /* @__PURE__ */ m(
+                "th",
+                {
+                  scope: "col",
+                  "data-fdi": i,
+                  className: "ds:px-[var(--spacing-2xs)] ds:py-[var(--spacing-2xs)] ds:text-center ds:border-b ds:border-[color:var(--border)] ds:tabular-nums ds:[font-variant-numeric:var(--font-feature-tabular)]",
+                  children: [
+                    /* @__PURE__ */ n("span", { className: "ds:sr-only", children: o("periodontalChart.toothHeader", {
+                      tooth: U(i),
+                      defaultValue: "Tooth {{tooth}}"
+                    }) }),
+                    /* @__PURE__ */ n("span", { "aria-hidden": "true", children: _e(i, S) })
+                  ]
+                },
+                i
+              ))
+            ] }) }),
+            /* @__PURE__ */ m("tbody", { children: [
+              Se(
+                e,
+                "periodontalChart.row.missing",
+                "Missing",
+                "missing"
+              ),
+              Se(
+                e,
+                "periodontalChart.row.implant",
+                "Implant",
+                "implant"
+              ),
+              Be(e),
+              ne(
+                e,
+                "periodontalChart.row.pocketDepthBuccal",
+                "Pocket depth — buccal",
+                "buccal",
+                "pocketDepthMm"
+              ),
+              ne(
+                e,
+                "periodontalChart.row.recessionBuccal",
+                "Recession — buccal",
+                "buccal",
+                "recessionMm"
+              ),
+              ae(
+                e,
+                "periodontalChart.row.bleedingBuccal",
+                "Bleeding — buccal",
+                "buccal",
+                "bleeding"
+              ),
+              ae(
+                e,
+                "periodontalChart.row.plaqueBuccal",
+                "Plaque — buccal",
+                "buccal",
+                "plaque"
+              ),
+              we(e, "buccal"),
+              L ? We(e) : null,
+              ne(
+                e,
+                "periodontalChart.row.pocketDepthLingual",
+                "Pocket depth — lingual",
+                "lingual",
+                "pocketDepthMm"
+              ),
+              ne(
+                e,
+                "periodontalChart.row.recessionLingual",
+                "Recession — lingual",
+                "lingual",
+                "recessionMm"
+              ),
+              ae(
+                e,
+                "periodontalChart.row.bleedingLingual",
+                "Bleeding — lingual",
+                "lingual",
+                "bleeding"
+              ),
+              ae(
+                e,
+                "periodontalChart.row.plaqueLingual",
+                "Plaque — lingual",
+                "lingual",
+                "plaque"
+              ),
+              we(e, "lingual"),
+              Ue(e)
+            ] })
+          ] }),
+          y ? /* @__PURE__ */ n(
+            "figure",
+            {
+              className: "ds:m-0 ds:mt-[var(--spacing-2xs)]",
+              "aria-label": o("periodontalChart.curve.label", {
+                arch: o(r, a),
+                defaultValue: "{{arch}} probing depth and recession profile"
+              }),
+              children: Ge(e)
+            }
+          ) : null
+        ]
+      }
+    ) }), Ye = () => {
+      const e = [
+        {
+          key: "meanPd",
+          label: o("periodontalChart.index.meanPocketDepth", "Mean PD"),
+          value: R.meanPocketDepthMm == null ? "–" : o("periodontalChart.unit.mm", {
+            value: ee(R.meanPocketDepthMm),
+            defaultValue: "{{value}} mm"
+          }),
+          elevated: !1
+        },
+        {
+          key: "meanCal",
+          label: o("periodontalChart.index.meanAttachment", "Mean CAL"),
+          value: R.meanAttachmentLevelMm == null ? "–" : o("periodontalChart.unit.mm", {
+            value: ee(R.meanAttachmentLevelMm),
+            defaultValue: "{{value}} mm"
+          }),
+          elevated: !1
+        },
+        {
+          key: "plaque",
+          label: o("periodontalChart.index.plaque", "Plaque"),
+          value: R.plaquePercent == null ? "–" : o("periodontalChart.unit.percent", {
+            value: ee(R.plaquePercent),
+            defaultValue: "{{value}}%"
+          }),
+          elevated: R.plaquePercent != null && R.plaquePercent > ht
+        },
+        {
+          key: "bleeding",
+          label: o("periodontalChart.index.bleeding", "BoP"),
+          value: R.bleedingPercent == null ? "–" : o("periodontalChart.unit.percent", {
+            value: ee(R.bleedingPercent),
+            defaultValue: "{{value}}%"
+          }),
+          elevated: R.bleedingPercent != null && R.bleedingPercent > gt
+        }
+      ];
+      return /* @__PURE__ */ n(
+        "dl",
+        {
+          className: "type-body-sm ds:flex ds:flex-wrap ds:gap-[var(--spacing-lg)] ds:m-0",
+          "aria-label": o("periodontalChart.index.label", "Summary indices"),
+          children: e.map((r) => /* @__PURE__ */ m(
+            "div",
+            {
+              className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]",
+              children: [
+                /* @__PURE__ */ n("dt", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: r.label }),
+                /* @__PURE__ */ m(
+                  "dd",
+                  {
+                    className: `ds:m-0 ds:tabular-nums ds:[font-variant-numeric:var(--font-feature-tabular)] ${r.elevated ? "ds:font-bold ds:text-[color:var(--destructive)]" : "ds:text-[color:var(--foreground)]"}`,
+                    children: [
+                      /* @__PURE__ */ n("span", { children: r.value }),
+                      r.elevated ? /* @__PURE__ */ m("span", { className: "ds:sr-only", children: [
+                        " ",
+                        o("periodontalChart.index.elevated", "elevated")
+                      ] }) : null
+                    ]
+                  }
+                )
+              ]
+            },
+            r.key
+          ))
+        }
+      );
+    }, Xe = /* @__PURE__ */ m(
+      "div",
+      {
+        role: "group",
+        "aria-label": o("periodontalChart.legend.label", "Chart legend"),
+        className: "type-meta ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-md)] ds:text-[color:var(--muted-foreground)]",
+        children: [
+          /* @__PURE__ */ m("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
+            /* @__PURE__ */ n(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:inline-block ds:h-[2px] ds:w-4 ds:bg-[var(--success)]"
+              }
+            ),
+            o("periodontalChart.legend.depth", "Pocket depth")
+          ] }),
+          /* @__PURE__ */ m("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
+            /* @__PURE__ */ n(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:inline-block ds:h-[2px] ds:w-4 ds:bg-[var(--accent)]"
+              }
+            ),
+            o("periodontalChart.legend.recession", "Recession")
+          ] }),
+          /* @__PURE__ */ m("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
+            /* @__PURE__ */ n(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:inline-block ds:size-2 ds:rounded-[var(--radius-full)] ds:bg-[var(--destructive)]"
+              }
+            ),
+            o("periodontalChart.legend.bleeding", "Bleeding on probing")
+          ] }),
+          /* @__PURE__ */ m("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
+            /* @__PURE__ */ n(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:inline-block ds:size-2 ds:rounded-[var(--radius-full)] ds:bg-[var(--warning)]"
+              }
+            ),
+            o("periodontalChart.legend.plaque", "Plaque")
+          ] })
+        ]
+      }
+    );
+    return (
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- roving-tabindex arrow-key nav across the chart group; each input is individually focusable and labelled
+      /* @__PURE__ */ m(
+        "div",
+        {
+          ref: M,
+          role: "group",
+          "aria-label": $e,
+          "data-component": "periodontal-chart",
+          "data-component-id": z,
+          "data-mode": d,
+          id: z,
+          ...X,
+          onKeyDown: Ve,
+          className: Ct({ disabled: f, className: Y }),
+          children: [
+            C ? Ye() : null,
+            Pe(ke.upper, "periodontalChart.arch.upper", "Upper arch"),
+            Pe(ke.lower, "periodontalChart.arch.lower", "Lower arch"),
+            Xe
+          ]
+        }
+      )
+    );
+  }
+);
+Dt.displayName = "PeriodontalChart";
+export {
+  gt as B,
+  xe as M,
+  be as P,
+  ie as S,
+  ft as a,
+  mt as b,
+  ht as c,
+  Dt as d,
+  kt as e,
+  Le as f,
+  jt as g,
+  bt as h,
+  pt as i,
+  _e as j,
+  je as k,
+  Ot as l,
+  Oe as p,
+  Ae as s,
+  $t as t
+};
+//# sourceMappingURL=periodontal-chart-CYBhr9vc.js.map