@alfadocs/ui-kit 1.54.3 → 1.56.0

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

@@ -0,0 +1,1413 @@
+import { jsx as o, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as pt, useRef as ie, useState as mt, useCallback as O, useEffect as Be, useMemo as He, useImperativeHandle as ht } from "react";
+import { c as pe } from "./index-D2ZczOXr.js";
+import { useTranslation as gt } from "react-i18next";
+import { u as ft } from "./registry-DvAUVLHh.js";
+import { o as bt } from "./floating-clearance-nIx9fFLy.js";
+import { P as Se, i as Te, h as vt, g as yt, f as xt, Y as Nt } from "./tooth-data-DR8Kdnup.js";
+import { P as Ye } from "./periodontal-chart-card-CxdXvsPU.js";
+const j = {
+  type: "string",
+  description: "FDI tooth id ('11'–'48' permanent, '51'–'85' primary)."
+}, K = {
+  enum: ["db", "b", "mb", "dl", "l", "ml"],
+  description: "Probing site: (m/d)b = mesio-/disto-/mid buccal, (m/d)l = mesio-/disto-/mid lingual."
+}, Ce = {
+  type: "integer",
+  description: "Whole millimetres — perio probing is recorded in integer mm."
+}, kt = {
+  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" }
+  }
+}, Mt = {
+  type: "array",
+  description: "One entry per flagged tooth, in clinical order; each tooth’s pockets are deepest-first.",
+  items: {
+    type: "object",
+    properties: {
+      fdi: j,
+      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: K,
+            pocketDepthMm: Ce,
+            severity: { enum: ["moderate", "severe"] }
+          }
+        }
+      },
+      bleedingSites: { type: "array", items: K },
+      plaqueSites: { type: "array", items: K },
+      suppurationSites: { type: "array", items: K },
+      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 Ct(r) {
+  if (!r) return null;
+  const n = { ...r };
+  return delete n.note, n;
+}
+const wt = {
+  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: (r) => r.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: (r) => r.getFindings()
+    },
+    missingTeeth: {
+      type: "string[]",
+      descriptionKey: "ui.agent.periodontalChart.state.missingTeeth",
+      description: "FDI ids of every tooth flagged as missing.",
+      read: (r) => r.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: (r) => Object.entries(r.getValue()).filter(([, n]) => n.missing || n.implant || n.mobility != null || n.furcation && Object.keys(n.furcation).length > 0 ? !0 : (n.sites ? Object.values(n.sites) : []).some(
+        (d) => d != null && (d.pocketDepthMm != null || d.recessionMm != null || d.bleeding || d.plaque || d.suppuration)
+      )).map(([n]) => n)
+    }
+  },
+  actions: {
+    focus_site: {
+      safety: "read",
+      argsType: '{ fdi: string; site: PeriodontalSiteId; field: "pocketDepthMm" | "recessionMm" | "bleeding" | "plaque" }',
+      argsSchema: {
+        type: "object",
+        properties: {
+          fdi: j,
+          site: K,
+          field: {
+            enum: ["pocketDepthMm", "recessionMm", "bleeding", "plaque"]
+          }
+        },
+        required: ["fdi", "site", "field"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.focusSite",
+      description: "Move focus to one per-site input: a probing measurement (pocket depth, recession) or the bleeding or plaque checkbox.",
+      invoke: (r, n) => {
+        r.focusSite(n.fdi, n.site, n.field);
+      }
+    },
+    get_tooth: {
+      safety: "read",
+      argsType: "{ fdi: string }",
+      argsSchema: {
+        type: "object",
+        properties: { fdi: j },
+        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: (r, n) => Ct(r.getTooth(n.fdi))
+    },
+    get_indices: {
+      safety: "read",
+      argsType: "{}",
+      argsSchema: { type: "object", properties: {} },
+      returns: "PeriodontalIndices",
+      returnsSchema: kt,
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.getIndices",
+      description: "Read the derived whole-mouth summary indices.",
+      invoke: (r) => r.getIndices()
+    },
+    get_findings: {
+      safety: "read",
+      argsType: "{}",
+      argsSchema: { type: "object", properties: {} },
+      returns: "PeriodontalToothFinding[]",
+      returnsSchema: Mt,
+      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: (r) => r.getFindings()
+    },
+    set_depth: {
+      safety: "write",
+      argsType: "{ fdi: string; site: PeriodontalSiteId; mm: number }",
+      argsSchema: {
+        type: "object",
+        properties: { fdi: j, site: K, mm: Ce },
+        required: ["fdi", "site", "mm"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.setDepth",
+      description: "Record the probing pocket depth (mm) at a site.",
+      invoke: (r, n) => {
+        r.setSite(n.fdi, n.site, {
+          pocketDepthMm: Math.max(0, n.mm)
+        });
+      }
+    },
+    set_recession: {
+      safety: "write",
+      argsType: "{ fdi: string; site: PeriodontalSiteId; mm: number }",
+      argsSchema: {
+        type: "object",
+        properties: { fdi: j, site: K, mm: Ce },
+        required: ["fdi", "site", "mm"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.setRecession",
+      description: "Record the gingival recession (mm) at a site.",
+      invoke: (r, n) => {
+        r.setSite(n.fdi, n.site, { recessionMm: n.mm });
+      }
+    },
+    toggle_bleeding: {
+      safety: "write",
+      argsType: "{ fdi: string; site: PeriodontalSiteId; value: boolean }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          fdi: j,
+          site: K,
+          value: { type: "boolean" }
+        },
+        required: ["fdi", "site", "value"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.toggleBleeding",
+      description: "Set bleeding on probing at a site.",
+      invoke: (r, n) => {
+        r.setSite(n.fdi, n.site, { bleeding: n.value });
+      }
+    },
+    toggle_plaque: {
+      safety: "write",
+      argsType: "{ fdi: string; site: PeriodontalSiteId; value: boolean }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          fdi: j,
+          site: K,
+          value: { type: "boolean" }
+        },
+        required: ["fdi", "site", "value"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.togglePlaque",
+      description: "Set plaque presence at a site.",
+      invoke: (r, n) => {
+        r.setSite(n.fdi, n.site, { plaque: n.value });
+      }
+    },
+    set_mobility: {
+      safety: "write",
+      argsType: "{ fdi: string; grade: 0 | 1 | 2 | 3 }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          fdi: j,
+          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: (r, n) => {
+        r.setTooth(n.fdi, { mobility: n.grade });
+      }
+    },
+    set_missing: {
+      safety: "write",
+      argsType: "{ fdi: string; value: boolean }",
+      argsSchema: {
+        type: "object",
+        properties: { fdi: j, value: { type: "boolean" } },
+        required: ["fdi", "value"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.setMissing",
+      description: "Flag a tooth present or absent.",
+      invoke: (r, n) => {
+        r.setTooth(n.fdi, { missing: n.value });
+      }
+    },
+    clear_tooth: {
+      safety: "destructive",
+      argsType: "{ fdi: string }",
+      argsSchema: {
+        type: "object",
+        properties: { fdi: j },
+        required: ["fdi"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.periodontalChart.actions.clearTooth",
+      description: "Clear every reading from a tooth.",
+      invoke: (r, n) => {
+        r.clearTooth(n.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."
+    }
+  }
+}, we = ["db", "b", "mb"], St = ["dl", "l", "ml"];
+function ze(r) {
+  return r === "buccal" ? we : St;
+}
+const Pe = 4, me = 6, Tt = 20, Pt = 5;
+function Xe(r, n = Pe, h = me) {
+  return r == null || !Number.isFinite(r) ? "normal" : r >= h ? "severe" : r >= n ? "moderate" : "normal";
+}
+const Et = {
+  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 Dt(r, n) {
+  var h;
+  return ((h = Et[r]) == null ? void 0 : h[n]) ?? 0;
+}
+const Rt = Se.slice(0, 16), It = Se.slice(16), At = Te.slice(0, 10), _t = Te.slice(10);
+function Qe(r) {
+  return r === "primary" ? { upper: At, lower: _t } : {
+    upper: Rt,
+    lower: It
+  };
+}
+function Ue(r, n) {
+  return n === "universal" ? vt[r] ?? r : n === "palmer" ? yt[r] ?? r : r;
+}
+function ue(r) {
+  const n = Math.round(r * 10) / 10;
+  return n === 0 ? 0 : n;
+}
+function We(r) {
+  let n = 0, h = 0, d = 0, f = 0, D = 0, S = 0;
+  for (const A of Object.values(r))
+    if (!(A.missing || !A.sites))
+      for (const T of Object.values(A.sites)) {
+        if (!T) continue;
+        const y = T.pocketDepthMm;
+        y == null || !Number.isFinite(y) || (d += 1, n += y, h += y + (T.recessionMm ?? 0), y >= me && (S += 1), T.bleeding && (f += 1), T.plaque && (D += 1));
+      }
+  return d === 0 ? {
+    meanPocketDepthMm: null,
+    meanAttachmentLevelMm: null,
+    plaquePercent: null,
+    bleedingPercent: null,
+    scoredSiteCount: 0,
+    deepPocketCount: 0
+  } : {
+    meanPocketDepthMm: ue(n / d),
+    meanAttachmentLevelMm: ue(h / d),
+    plaquePercent: ue(D / d * 100),
+    bleedingPercent: ue(f / d * 100),
+    scoredSiteCount: d,
+    deepPocketCount: S
+  };
+}
+const qt = [...Se, ...Te];
+function Lt(r, n) {
+  var A, T;
+  const h = (n == null ? void 0 : n.moderate) ?? Pe, d = (n == null ? void 0 : n.severe) ?? me, f = /* @__PURE__ */ new Map();
+  qt.forEach((y, M) => f.set(y, M));
+  const D = Object.keys(r).sort(
+    (y, M) => (f.get(y) ?? Number.MAX_SAFE_INTEGER) - (f.get(M) ?? Number.MAX_SAFE_INTEGER)
+  ), S = [];
+  for (const y of D) {
+    const M = r[y];
+    if (!M) continue;
+    if (M.missing) {
+      S.push({
+        fdi: y,
+        status: "missing",
+        severity: "normal",
+        maxPocketDepthMm: null,
+        pockets: [],
+        bleedingSites: [],
+        plaqueSites: [],
+        suppurationSites: [],
+        maxRecessionMm: null,
+        mobility: null,
+        furcation: []
+      });
+      continue;
+    }
+    const X = M.implant ? "implant" : "present", L = [], ne = [], _ = [], z = [];
+    let $ = null, Q = null;
+    for (const a of Ye) {
+      const Z = (A = M.sites) == null ? void 0 : A[a];
+      if (!Z) continue;
+      const { pocketDepthMm: V, recessionMm: q, bleeding: oe, plaque: ge, suppuration: fe } = Z;
+      if (V != null && Number.isFinite(V)) {
+        $ = $ == null ? V : Math.max($, V);
+        const b = Xe(V, h, d);
+        b !== "normal" && L.push({ site: a, pocketDepthMm: V, severity: b });
+      }
+      q != null && Number.isFinite(q) && q > 0 && (Q = Q == null ? q : Math.max(Q, q)), oe && ne.push(a), ge && _.push(a), fe && z.push(a);
+    }
+    L.sort((a, Z) => Z.pocketDepthMm - a.pocketDepthMm);
+    const J = M.mobility != null && M.mobility >= 1 ? M.mobility : null, se = [];
+    if (M.furcation)
+      for (const a of ["buccal", "lingual"])
+        (T = M.furcation[a]) != null && T.some(Boolean) && se.push(a);
+    const he = L.some(
+      (a) => a.severity === "severe"
+    ) ? "severe" : L.length > 0 ? "moderate" : "normal";
+    (X === "implant" || L.length > 0 || ne.length > 0 || z.length > 0 || J != null || se.length > 0) && S.push({
+      fdi: y,
+      status: X,
+      severity: he,
+      maxPocketDepthMm: $,
+      pockets: L,
+      bleedingSites: ne,
+      plaqueSites: _,
+      suppurationSites: z,
+      maxRecessionMm: Q,
+      mobility: J,
+      furcation: se
+    });
+  }
+  return S;
+}
+function rr(r = "permanent") {
+  const { upper: n, lower: h } = Qe(r), d = {};
+  for (const f of [...n, ...h]) d[f] = {};
+  return d;
+}
+function nr(r) {
+  const n = [];
+  for (const [h, d] of Object.entries(r))
+    if (!(d.missing || !d.sites))
+      for (const f of Ye) {
+        const D = d.sites[f];
+        if (!D) continue;
+        const { pocketDepthMm: S, recessionMm: A, bleeding: T, suppuration: y } = D;
+        S == null && A == null && !T && !y || n.push({
+          tooth: h,
+          site: f,
+          pocketDepthMm: S,
+          recessionMm: A,
+          bleeding: T,
+          suppuration: y
+        });
+      }
+  return n;
+}
+function sr(r) {
+  const n = {};
+  for (const [h, d] of Object.entries(r))
+    d.mobility != null && (n[h] = d.mobility);
+  return n;
+}
+const Ft = pe(
+  "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 }
+  }
+), Ee = "ds:outline-[length:var(--focus-ring-width)] ds:outline-dashed ds:outline-[color:var(--ring)] ds:outline-offset-[length:var(--focus-ring-offset)]", Ot = pe(
+  "ds:h-6 ds:w-[3.5ch] ds:rounded-[var(--radius-sm)] ds:border ds:text-center ds:tabular-nums ds:[font-variant-numeric:var(--font-feature-tabular)] 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: {
+      // The host cursor (e.g. voice control): the outline lives in the
+      // variant, never beside a base `outline-none`, so the two can't race on
+      // stylesheet order.
+      active: {
+        false: "ds:outline-none ds:bg-[var(--background)]",
+        true: `${Ee} ds:bg-[var(--background)]`
+      },
+      severity: {
+        normal: "ds:border-[color:var(--control-border)] 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", active: !1 }
+  }
+), jt = pe(
+  "ds:h-6 ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--control-border)] ds:text-[color:var(--foreground)] ds:text-center 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: {
+      active: {
+        false: "ds:outline-none ds:bg-[var(--background)]",
+        true: `${Ee} ds:bg-[var(--background)]`
+      }
+    },
+    defaultVariants: { active: !1 }
+  }
+), $t = pe(
+  "ds:inline-flex ds:size-6 ds:cursor-pointer ds:items-center ds:justify-center ds:rounded-[var(--radius-sm)]",
+  {
+    variants: {
+      active: { false: "", true: Ee }
+    },
+    defaultVariants: { active: !1 }
+  }
+), Vt = {
+  pocketDepthMm: "data-perio-input",
+  recessionMm: "data-perio-input",
+  bleeding: "data-perio-toggle",
+  plaque: "data-perio-toggle"
+};
+function Ge(r) {
+  return `${r.fdi}:${r.site ?? ""}:${r.field}`;
+}
+function Kt(r, n) {
+  return !r || !n ? !1 : r.fdi === n.fdi && r.field === n.field && r.site === n.site;
+}
+function Bt(r, n, h) {
+  return { ...r, [n]: { ...r[n], ...h } };
+}
+function Ht(r, n, h, d) {
+  const f = r[n] ?? {}, D = f.sites ?? {};
+  return {
+    ...r,
+    [n]: {
+      ...f,
+      sites: { ...D, [h]: { ...D[h], ...d } }
+    }
+  };
+}
+function zt(r) {
+  return r === "severe" ? "ds:font-bold ds:text-[color:var(--destructive)]" : r === "moderate" ? "ds:font-semibold ds:text-[color:var(--warning-foreground)]" : "";
+}
+const Ut = {
+  db: "disto-buccal",
+  b: "buccal",
+  mb: "mesio-buccal",
+  dl: "disto-lingual",
+  l: "lingual",
+  ml: "mesio-lingual"
+}, Wt = pt(
+  ({
+    value: r,
+    defaultValue: n,
+    onChange: h,
+    mode: d = "interactive",
+    disabled: f = !1,
+    dentition: D = "permanent",
+    numbering: S = "fdi",
+    showTeeth: A = !0,
+    assetBaseUrl: T = "/toothscheme/teeth",
+    showCurves: y = !0,
+    showIndices: M = !0,
+    moderatePocketMm: X = Pe,
+    severePocketMm: L = me,
+    locale: ne,
+    activeSite: _,
+    onActiveSiteChange: z,
+    scrollActiveSiteIntoView: $ = !1,
+    "aria-label": Q,
+    id: J,
+    className: se,
+    ...he
+  }, De) => {
+    const { t: a, i18n: Z } = gt("ui"), V = ne ?? Z.language ?? "en", q = ie(null), oe = r !== void 0, [ge, fe] = mt(
+      () => n ?? {}
+    ), b = oe ? r : ge, U = d === "display", F = ie(b);
+    F.current = b;
+    const ee = O(
+      (e) => {
+        F.current = e, oe || fe(e), h == null || h(e);
+      },
+      [oe, h]
+    ), le = O(
+      (e, t, s) => ee(Ht(F.current, e, t, s)),
+      [ee]
+    ), te = O(
+      (e, t) => ee(Bt(F.current, e, t)),
+      [ee]
+    ), Re = O(
+      (e) => {
+        const t = { ...F.current };
+        delete t[e], ee(t);
+      },
+      [ee]
+    ), Ie = O(
+      (e, t, s) => {
+        var l, u;
+        const i = Vt[s];
+        if (i)
+          try {
+            (u = (l = q.current) == null ? void 0 : l.querySelector(
+              `[${i}][data-fdi="${e}"][data-site="${t}"][data-field="${s}"]`
+            )) == null || u.focus();
+          } catch {
+          }
+      },
+      []
+    ), Ae = ie(_);
+    Ae.current = _;
+    const be = (e, t, s) => !U && _ != null && _.fdi === e && _.field === t && _.site === s, ve = ie(""), B = O(
+      (e) => {
+        z && (Kt(Ae.current, e) || (ve.current = Ge(e), z(e)));
+      },
+      [z]
+    ), H = _ ? Ge(_) : "", _e = ie(H);
+    Be(() => {
+      var s;
+      if (H === _e.current) return;
+      _e.current = H;
+      const e = H === ve.current;
+      if (ve.current = "", !$ || !H || e) return;
+      const t = (s = q.current) == null ? void 0 : s.querySelector("[data-active-site]");
+      t && typeof t.scrollIntoView == "function" && t.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }, [$, H]), Be(() => {
+      if (!(!$ || !H))
+        return bt(() => {
+          var t;
+          const e = (t = q.current) == null ? void 0 : t.querySelector("[data-active-site]");
+          e && typeof e.scrollIntoView == "function" && e.scrollIntoView({ block: "nearest", inline: "nearest" });
+        });
+    }, [$, H]);
+    const R = He(
+      () => We(b),
+      [b]
+    ), ye = He(
+      () => ({
+        getValue: () => F.current,
+        getTooth: (e) => F.current[e],
+        getIndices: () => We(F.current),
+        getFindings: () => Lt(F.current, {
+          moderate: X,
+          severe: L
+        }),
+        missingTeeth: () => Object.entries(F.current).filter(([, e]) => e.missing).map(([e]) => e),
+        setSite: le,
+        setTooth: te,
+        clearTooth: Re,
+        focusSite: Ie
+      }),
+      [
+        le,
+        te,
+        Re,
+        Ie,
+        X,
+        L
+      ]
+    );
+    ht(De, () => ye, [ye]), ft(wt, ye, J);
+    const qe = Qe(D), Je = Q ?? a("periodontalChart.ariaLabel", "Periodontal chart"), ae = O(
+      (e) => {
+        try {
+          return new Intl.NumberFormat(V, {
+            maximumFractionDigits: 1
+          }).format(e);
+        } catch {
+          return String(e);
+        }
+      },
+      [V]
+    ), Le = O(
+      (e) => a(`periodontalChart.site.${e}`, {
+        defaultValue: Ut[e]
+      }),
+      [a]
+    ), W = O(
+      (e) => Ue(e, S),
+      [S]
+    ), I = /* @__PURE__ */ o(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "ds:text-[color:var(--muted-foreground)]",
+        children: a("periodontalChart.cell.empty", "–")
+      }
+    ), Ze = O((e) => {
+      var N;
+      const t = e.target;
+      if (!((N = t.matches) != null && N.call(t, "[data-perio-input]"))) return;
+      const s = e.key;
+      if (s !== "ArrowLeft" && s !== "ArrowRight" && s !== "ArrowUp" && s !== "ArrowDown")
+        return;
+      e.preventDefault();
+      const i = q.current;
+      if (!i) return;
+      if (s === "ArrowUp" || s === "ArrowDown") {
+        const v = t.getAttribute("data-fdi"), C = t.getAttribute("data-site"), k = t.getAttribute("data-field") === "pocketDepthMm" ? "recessionMm" : "pocketDepthMm", E = i.querySelector(
+          `[data-perio-input][data-fdi="${v}"][data-site="${C}"][data-field="${k}"]`
+        );
+        E == null || E.focus(), E == null || E.select();
+        return;
+      }
+      const l = Array.from(
+        i.querySelectorAll("[data-perio-input]")
+      ), u = l.indexOf(t);
+      if (u === -1) return;
+      const c = l[u + (s === "ArrowRight" ? 1 : -1)];
+      c == null || c.focus(), c == null || c.select();
+    }, []), P = "ds:px-[var(--spacing-2xs)] ds:py-[var(--spacing-2xs)] ds:text-center ds:border-b ds:border-[color:var(--border)]", G = "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", et = (e, t, s) => {
+      var N, v, C;
+      const i = (C = (v = (N = b[e]) == null ? void 0 : N.sites) == null ? void 0 : v[t]) == null ? void 0 : C[s], l = s === "pocketDepthMm" ? Xe(i, X, L) : "normal", u = a(`periodontalChart.input.${s}`, {
+        tooth: W(e),
+        site: Le(t),
+        defaultValue: s === "pocketDepthMm" ? "Tooth {{tooth}} {{site}} pocket depth, millimetres" : "Tooth {{tooth}} {{site}} recession, millimetres"
+      }), g = l === "severe" ? a("periodontalChart.flag.severe", "severe pocket") : l === "moderate" ? a("periodontalChart.flag.moderate", "moderate pocket") : "";
+      if (U)
+        return i == null || !Number.isFinite(i) ? /* @__PURE__ */ o("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)] ${zt(
+              l
+            )}`,
+            children: [
+              /* @__PURE__ */ o("span", { children: ae(i) }),
+              g ? /* @__PURE__ */ m("span", { className: "ds:sr-only", children: [
+                " ",
+                g
+              ] }) : null
+            ]
+          }
+        );
+      const c = be(e, s, t);
+      return /* @__PURE__ */ o(
+        "input",
+        {
+          type: "text",
+          inputMode: "numeric",
+          autoComplete: "off",
+          disabled: f,
+          "aria-label": g ? `${u}, ${g}` : u,
+          "aria-current": c ? "true" : void 0,
+          "data-active-site": c ? "" : void 0,
+          "data-perio-input": "",
+          "data-fdi": e,
+          "data-site": t,
+          "data-field": s,
+          value: i == null ? "" : String(i),
+          onFocus: (x) => {
+            x.currentTarget.select(), B({ fdi: e, site: t, field: s });
+          },
+          onPointerDown: () => B({ fdi: e, site: t, field: s }),
+          onChange: (x) => {
+            B({ fdi: e, site: t, field: s });
+            const k = x.target.value.trim();
+            let E;
+            if (k === "" || k === "-")
+              E = void 0;
+            else {
+              const Y = Number(k);
+              if (!Number.isFinite(Y)) return;
+              E = s === "pocketDepthMm" ? Math.max(0, Y) : Y;
+            }
+            le(
+              e,
+              t,
+              s === "pocketDepthMm" ? { pocketDepthMm: E } : { recessionMm: E }
+            );
+          },
+          className: Ot({ severity: l, active: c })
+        }
+      );
+    }, tt = (e, t, s) => {
+      var c, N, v;
+      const i = !!((v = (N = (c = b[e]) == null ? void 0 : c.sites) == null ? void 0 : N[t]) != null && v[s]), l = a(`periodontalChart.toggle.${s}`, {
+        tooth: W(e),
+        site: Le(t),
+        defaultValue: s === "bleeding" ? "Tooth {{tooth}} {{site}} bleeding on probing" : "Tooth {{tooth}} {{site}} plaque"
+      }), u = s === "bleeding" ? "ds:accent-[var(--destructive)]" : "ds:accent-[var(--warning)]";
+      if (U)
+        return i ? /* @__PURE__ */ o(
+          "span",
+          {
+            role: "img",
+            "aria-label": l,
+            className: `ds:inline-block ds:size-2 ds:rounded-[var(--radius-full)] ${s === "bleeding" ? "ds:bg-[var(--destructive)]" : "ds:bg-[var(--warning)]"}`
+          }
+        ) : /* @__PURE__ */ o("span", { className: "ds:inline-block ds:size-6", children: I });
+      const g = be(e, s, t);
+      return /* @__PURE__ */ m(
+        "label",
+        {
+          className: $t({ active: g }),
+          "data-active-site": g ? "" : void 0,
+          children: [
+            /* @__PURE__ */ o("span", { className: "ds:sr-only", children: l }),
+            /* @__PURE__ */ o(
+              "input",
+              {
+                type: "checkbox",
+                disabled: f,
+                checked: i,
+                "aria-current": g ? "true" : void 0,
+                "data-perio-toggle": "",
+                "data-fdi": e,
+                "data-site": t,
+                "data-field": s,
+                onFocus: () => B({ fdi: e, site: t, field: s }),
+                onChange: (C) => {
+                  B({ fdi: e, site: t, field: s }), le(
+                    e,
+                    t,
+                    s === "bleeding" ? { bleeding: C.target.checked } : { plaque: C.target.checked }
+                  );
+                },
+                className: `ds:size-4 ${u} 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`
+              }
+            )
+          ]
+        }
+      );
+    }, rt = (e, t) => {
+      var u;
+      const s = b[e], i = Dt(e, t);
+      if (s != null && s.missing || i === 0) return I;
+      const l = ((u = s == null ? void 0 : s.furcation) == null ? void 0 : u[t]) ?? [];
+      return /* @__PURE__ */ o("span", { className: "ds:inline-flex ds:items-center ds:justify-center ds:gap-[var(--spacing-2xs)]", children: Array.from({ length: i }, (g, c) => {
+        const N = !!l[c], v = a("periodontalChart.toggle.furcation", {
+          tooth: W(e),
+          side: a(`periodontalChart.side.${t}`, {
+            defaultValue: t === "buccal" ? "buccal" : "lingual"
+          }),
+          n: c + 1,
+          defaultValue: "Tooth {{tooth}} {{side}} furcation {{n}}"
+        });
+        return U ? N ? /* @__PURE__ */ o(
+          "span",
+          {
+            role: "img",
+            "aria-label": v,
+            className: "ds:inline-block ds:size-2 ds:rounded-[var(--radius-full)] ds:bg-[var(--primary)]"
+          },
+          c
+        ) : /* @__PURE__ */ o(
+          "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__ */ o("span", { className: "ds:sr-only", children: v }),
+              /* @__PURE__ */ o(
+                "input",
+                {
+                  type: "checkbox",
+                  disabled: f,
+                  checked: N,
+                  onChange: (C) => {
+                    var k;
+                    const x = [...((k = s == null ? void 0 : s.furcation) == null ? void 0 : k[t]) ?? []];
+                    for (; x.length < i; ) x.push(!1);
+                    x[c] = C.target.checked, te(e, {
+                      furcation: { ...s == null ? void 0 : s.furcation, [t]: 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
+        );
+      }) });
+    }, ce = (e, t, s, i, l) => /* @__PURE__ */ m("tr", { children: [
+      /* @__PURE__ */ o("th", { scope: "row", className: G, children: a(t, s) }),
+      e.map((u) => {
+        var g;
+        return /* @__PURE__ */ o("td", { className: P, children: (g = b[u]) != null && g.missing ? I : /* @__PURE__ */ o("span", { className: "ds:flex ds:items-center ds:justify-center ds:gap-[var(--spacing-2xs)]", children: ze(i).map((c) => /* @__PURE__ */ o("span", { children: et(u, c, l) }, c)) }) }, u);
+      })
+    ] }), de = (e, t, s, i, l) => /* @__PURE__ */ m("tr", { children: [
+      /* @__PURE__ */ o("th", { scope: "row", className: G, children: a(t, s) }),
+      e.map((u) => {
+        var g;
+        return /* @__PURE__ */ o("td", { className: P, children: (g = b[u]) != null && g.missing ? I : /* @__PURE__ */ o("span", { className: "ds:flex ds:items-center ds:justify-center ds:gap-[var(--spacing-2xs)]", children: ze(i).map((c) => /* @__PURE__ */ o("span", { children: tt(u, c, l) }, c)) }) }, u);
+      })
+    ] }), Fe = (e, t) => /* @__PURE__ */ m("tr", { children: [
+      /* @__PURE__ */ o("th", { scope: "row", className: G, children: a("periodontalChart.row.furcation", "Furcation") }),
+      e.map((s) => /* @__PURE__ */ o("td", { className: P, children: rt(s, t) }, s))
+    ] }), Oe = (e, t, s, i) => /* @__PURE__ */ m("tr", { children: [
+      /* @__PURE__ */ o("th", { scope: "row", className: G, children: a(t, s) }),
+      e.map((l) => {
+        var c, N;
+        if (i === "implant" && ((c = b[l]) != null && c.missing))
+          return /* @__PURE__ */ o("td", { className: P, children: I }, l);
+        const u = !!((N = b[l]) != null && N[i]), g = a(`periodontalChart.flag.${i}Label`, {
+          tooth: W(l),
+          defaultValue: i === "missing" ? "Tooth {{tooth}} missing" : "Tooth {{tooth}} implant"
+        });
+        return /* @__PURE__ */ o("td", { className: P, children: U ? u ? /* @__PURE__ */ o(
+          "span",
+          {
+            role: "img",
+            "aria-label": g,
+            className: "type-meta ds:font-semibold",
+            children: i === "missing" ? a("periodontalChart.flag.missingShort", "×") : a("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__ */ o("span", { className: "ds:sr-only", children: g }),
+          /* @__PURE__ */ o(
+            "input",
+            {
+              type: "checkbox",
+              disabled: f,
+              checked: u,
+              onChange: (v) => te(
+                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);
+      })
+    ] }), nt = (e) => /* @__PURE__ */ m("tr", { children: [
+      /* @__PURE__ */ o("th", { scope: "row", className: G, children: a("periodontalChart.row.mobility", "Mobility") }),
+      e.map((t) => {
+        var u, g;
+        if ((u = b[t]) != null && u.missing)
+          return /* @__PURE__ */ o("td", { className: P, children: I }, t);
+        const s = (g = b[t]) == null ? void 0 : g.mobility, i = a("periodontalChart.mobility.label", {
+          tooth: W(t),
+          defaultValue: "Tooth {{tooth}} mobility grade"
+        });
+        if (U)
+          return /* @__PURE__ */ o("td", { className: P, children: s == null ? I : /* @__PURE__ */ o("span", { role: "img", "aria-label": i, className: "type-meta", children: s }) }, t);
+        const l = be(t, "mobility");
+        return /* @__PURE__ */ o("td", { className: P, children: /* @__PURE__ */ m(
+          "select",
+          {
+            disabled: f,
+            "aria-label": i,
+            "aria-current": l ? "true" : void 0,
+            "data-active-site": l ? "" : void 0,
+            "data-perio-mobility": "",
+            "data-fdi": t,
+            "data-field": "mobility",
+            onFocus: () => B({ fdi: t, field: "mobility" }),
+            onPointerDown: () => B({ fdi: t, field: "mobility" }),
+            value: s == null ? "" : String(s),
+            onChange: (c) => {
+              B({ fdi: t, field: "mobility" }), te(t, {
+                mobility: c.target.value === "" ? void 0 : Number(c.target.value)
+              });
+            },
+            className: jt({ active: l }),
+            children: [
+              /* @__PURE__ */ o("option", { value: "", children: a("periodontalChart.mobility.none", "–") }),
+              /* @__PURE__ */ o("option", { value: "0", children: "0" }),
+              /* @__PURE__ */ o("option", { value: "1", children: "1" }),
+              /* @__PURE__ */ o("option", { value: "2", children: "2" }),
+              /* @__PURE__ */ o("option", { value: "3", children: "3" })
+            ]
+          }
+        ) }, t);
+      })
+    ] }), st = (e) => /* @__PURE__ */ m("tr", { children: [
+      /* @__PURE__ */ o("th", { scope: "row", className: G, children: a("periodontalChart.row.note", "Note") }),
+      e.map((t) => {
+        var l, u;
+        if ((l = b[t]) != null && l.missing)
+          return /* @__PURE__ */ o("td", { className: P, children: I }, t);
+        const s = ((u = b[t]) == null ? void 0 : u.note) ?? "", i = a("periodontalChart.note.label", {
+          tooth: W(t),
+          defaultValue: "Tooth {{tooth}} note"
+        });
+        return U ? /* @__PURE__ */ o("td", { className: `${P} ds:text-start`, children: s ? /* @__PURE__ */ o("span", { className: "type-meta", children: s }) : I }, t) : /* @__PURE__ */ o("td", { className: P, children: /* @__PURE__ */ o(
+          "input",
+          {
+            type: "text",
+            disabled: f,
+            "aria-label": i,
+            value: s,
+            onChange: (g) => te(t, { note: g.target.value }),
+            className: "ds:h-6 ds:w-[6ch] ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--control-border)] 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"
+          }
+        ) }, t);
+      })
+    ] }), ot = (e) => /* @__PURE__ */ m("tr", { children: [
+      /* @__PURE__ */ o("th", { scope: "row", className: G, children: a("periodontalChart.row.tooth", "Tooth") }),
+      e.map((t) => {
+        const s = b[t], i = xt[t];
+        if (s != null && s.missing || !i)
+          return /* @__PURE__ */ o("td", { className: P, children: I }, t);
+        const l = s != null && s.implant ? "implant" : "default";
+        return /* @__PURE__ */ o("td", { className: P, children: /* @__PURE__ */ o(
+          "img",
+          {
+            src: Nt(i, T, 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"
+          }
+        ) }, t);
+      })
+    ] }), at = (e) => {
+      var $e, Ve, Ke;
+      const c = (p) => 38 + Math.min(Math.max(0, p), 13) * 6, N = (p) => 38 - Math.min(Math.max(0, p), 5) * 6, v = [], C = [];
+      let x = [], k = [];
+      const E = () => {
+        x.length && v.push(x), k.length && C.push(k), x = [], k = [];
+      };
+      let Y = 12;
+      for (const p of e) {
+        const w = ($e = b[p]) == null ? void 0 : $e.missing;
+        for (const ut of we) {
+          const re = w || (Ke = (Ve = b[p]) == null ? void 0 : Ve.sites) == null ? void 0 : Ke[ut], ke = re == null ? void 0 : re.pocketDepthMm, Me = re == null ? void 0 : re.recessionMm;
+          ke != null && Number.isFinite(ke) ? x.push({ x: Y, y: c(ke) }) : x.length && (v.push(x), x = []), Me != null && Number.isFinite(Me) ? k.push({ x: Y, y: N(Me) }) : k.length && (C.push(k), k = []), Y += 24;
+        }
+      }
+      E();
+      const xe = e.length * we.length * 24, Ne = (p) => p.map((w) => `${w.x},${w.y}`).join(" "), ct = v.flat(), dt = C.flat();
+      return /* @__PURE__ */ m(
+        "svg",
+        {
+          viewBox: `0 0 ${xe} 124`,
+          className: "ds:h-[132px] ds:w-full",
+          preserveAspectRatio: "none",
+          "aria-hidden": "true",
+          focusable: "false",
+          children: [
+            [3, 6, 9, 12].map((p) => /* @__PURE__ */ o(
+              "line",
+              {
+                x1: 0,
+                x2: xe,
+                y1: c(p),
+                y2: c(p),
+                stroke: "var(--border)",
+                strokeWidth: 1,
+                strokeDasharray: "2 4"
+              },
+              p
+            )),
+            /* @__PURE__ */ o(
+              "line",
+              {
+                x1: 0,
+                x2: xe,
+                y1: 38,
+                y2: 38,
+                stroke: "var(--border)",
+                strokeWidth: 1.5
+              }
+            ),
+            v.map(
+              (p, w) => p.length >= 2 ? /* @__PURE__ */ o(
+                "polygon",
+                {
+                  points: `${p[0].x},38 ${Ne(p)} ${p[p.length - 1].x},38`,
+                  fill: "var(--success)",
+                  fillOpacity: 0.14
+                },
+                `fill-${w}`
+              ) : null
+            ),
+            v.map(
+              (p, w) => p.length >= 2 ? /* @__PURE__ */ o(
+                "polyline",
+                {
+                  points: Ne(p),
+                  fill: "none",
+                  stroke: "var(--success)",
+                  strokeWidth: 2.5,
+                  strokeLinejoin: "round",
+                  strokeLinecap: "round"
+                },
+                `depth-${w}`
+              ) : null
+            ),
+            C.map(
+              (p, w) => p.length >= 2 ? /* @__PURE__ */ o(
+                "polyline",
+                {
+                  points: Ne(p),
+                  fill: "none",
+                  stroke: "var(--accent)",
+                  strokeWidth: 2.5,
+                  strokeLinejoin: "round",
+                  strokeLinecap: "round"
+                },
+                `margin-${w}`
+              ) : null
+            ),
+            ct.map((p, w) => /* @__PURE__ */ o(
+              "circle",
+              {
+                cx: p.x,
+                cy: p.y,
+                r: 2,
+                fill: "var(--success)"
+              },
+              `dp-${w}`
+            )),
+            dt.map((p, w) => /* @__PURE__ */ o(
+              "circle",
+              {
+                cx: p.x,
+                cy: p.y,
+                r: 2,
+                fill: "var(--accent)"
+              },
+              `mp-${w}`
+            ))
+          ]
+        }
+      );
+    }, je = (e, t, s) => /* @__PURE__ */ o("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: /* @__PURE__ */ m(
+      "div",
+      {
+        tabIndex: 0,
+        role: "group",
+        dir: "ltr",
+        "aria-label": a(t, s),
+        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__ */ o("caption", { className: "type-label ds:text-start ds:mb-[var(--spacing-2xs)] ds:text-[color:var(--muted-foreground)]", children: a(t, s) }),
+            /* @__PURE__ */ o("thead", { children: /* @__PURE__ */ m("tr", { children: [
+              /* @__PURE__ */ o(
+                "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: a("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__ */ o("span", { className: "ds:sr-only", children: a("periodontalChart.toothHeader", {
+                      tooth: W(i),
+                      defaultValue: "Tooth {{tooth}}"
+                    }) }),
+                    /* @__PURE__ */ o("span", { "aria-hidden": "true", children: Ue(i, S) })
+                  ]
+                },
+                i
+              ))
+            ] }) }),
+            /* @__PURE__ */ m("tbody", { children: [
+              Oe(
+                e,
+                "periodontalChart.row.missing",
+                "Missing",
+                "missing"
+              ),
+              Oe(
+                e,
+                "periodontalChart.row.implant",
+                "Implant",
+                "implant"
+              ),
+              nt(e),
+              ce(
+                e,
+                "periodontalChart.row.pocketDepthBuccal",
+                "Pocket depth — buccal",
+                "buccal",
+                "pocketDepthMm"
+              ),
+              ce(
+                e,
+                "periodontalChart.row.recessionBuccal",
+                "Recession — buccal",
+                "buccal",
+                "recessionMm"
+              ),
+              de(
+                e,
+                "periodontalChart.row.bleedingBuccal",
+                "Bleeding — buccal",
+                "buccal",
+                "bleeding"
+              ),
+              de(
+                e,
+                "periodontalChart.row.plaqueBuccal",
+                "Plaque — buccal",
+                "buccal",
+                "plaque"
+              ),
+              Fe(e, "buccal"),
+              A ? ot(e) : null,
+              ce(
+                e,
+                "periodontalChart.row.pocketDepthLingual",
+                "Pocket depth — lingual",
+                "lingual",
+                "pocketDepthMm"
+              ),
+              ce(
+                e,
+                "periodontalChart.row.recessionLingual",
+                "Recession — lingual",
+                "lingual",
+                "recessionMm"
+              ),
+              de(
+                e,
+                "periodontalChart.row.bleedingLingual",
+                "Bleeding — lingual",
+                "lingual",
+                "bleeding"
+              ),
+              de(
+                e,
+                "periodontalChart.row.plaqueLingual",
+                "Plaque — lingual",
+                "lingual",
+                "plaque"
+              ),
+              Fe(e, "lingual"),
+              st(e)
+            ] })
+          ] }),
+          y ? /* @__PURE__ */ o(
+            "figure",
+            {
+              className: "ds:m-0 ds:mt-[var(--spacing-2xs)]",
+              "aria-label": a("periodontalChart.curve.label", {
+                arch: a(t, s),
+                defaultValue: "{{arch}} probing depth and recession profile"
+              }),
+              children: at(e)
+            }
+          ) : null
+        ]
+      }
+    ) }), it = () => {
+      const e = [
+        {
+          key: "meanPd",
+          label: a("periodontalChart.index.meanPocketDepth", "Mean PD"),
+          value: R.meanPocketDepthMm == null ? "–" : a("periodontalChart.unit.mm", {
+            value: ae(R.meanPocketDepthMm),
+            defaultValue: "{{value}} mm"
+          }),
+          elevated: !1
+        },
+        {
+          key: "meanCal",
+          label: a("periodontalChart.index.meanAttachment", "Mean CAL"),
+          value: R.meanAttachmentLevelMm == null ? "–" : a("periodontalChart.unit.mm", {
+            value: ae(R.meanAttachmentLevelMm),
+            defaultValue: "{{value}} mm"
+          }),
+          elevated: !1
+        },
+        {
+          key: "plaque",
+          label: a("periodontalChart.index.plaque", "Plaque"),
+          value: R.plaquePercent == null ? "–" : a("periodontalChart.unit.percent", {
+            value: ae(R.plaquePercent),
+            defaultValue: "{{value}}%"
+          }),
+          elevated: R.plaquePercent != null && R.plaquePercent > Tt
+        },
+        {
+          key: "bleeding",
+          label: a("periodontalChart.index.bleeding", "BoP"),
+          value: R.bleedingPercent == null ? "–" : a("periodontalChart.unit.percent", {
+            value: ae(R.bleedingPercent),
+            defaultValue: "{{value}}%"
+          }),
+          elevated: R.bleedingPercent != null && R.bleedingPercent > Pt
+        }
+      ];
+      return /* @__PURE__ */ o(
+        "dl",
+        {
+          className: "type-body-sm ds:flex ds:flex-wrap ds:gap-[var(--spacing-lg)] ds:m-0",
+          "aria-label": a("periodontalChart.index.label", "Summary indices"),
+          children: e.map((t) => /* @__PURE__ */ m(
+            "div",
+            {
+              className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]",
+              children: [
+                /* @__PURE__ */ o("dt", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: t.label }),
+                /* @__PURE__ */ m(
+                  "dd",
+                  {
+                    className: `ds:m-0 ds:tabular-nums ds:[font-variant-numeric:var(--font-feature-tabular)] ${t.elevated ? "ds:font-bold ds:text-[color:var(--destructive)]" : "ds:text-[color:var(--foreground)]"}`,
+                    children: [
+                      /* @__PURE__ */ o("span", { children: t.value }),
+                      t.elevated ? /* @__PURE__ */ m("span", { className: "ds:sr-only", children: [
+                        " ",
+                        a("periodontalChart.index.elevated", "elevated")
+                      ] }) : null
+                    ]
+                  }
+                )
+              ]
+            },
+            t.key
+          ))
+        }
+      );
+    }, lt = /* @__PURE__ */ m(
+      "div",
+      {
+        role: "group",
+        "aria-label": a("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__ */ o(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:inline-block ds:h-[2px] ds:w-4 ds:bg-[var(--success)]"
+              }
+            ),
+            a("periodontalChart.legend.depth", "Pocket depth")
+          ] }),
+          /* @__PURE__ */ m("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
+            /* @__PURE__ */ o(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:inline-block ds:h-[2px] ds:w-4 ds:bg-[var(--accent)]"
+              }
+            ),
+            a("periodontalChart.legend.recession", "Recession")
+          ] }),
+          /* @__PURE__ */ m("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
+            /* @__PURE__ */ o(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:inline-block ds:size-2 ds:rounded-[var(--radius-full)] ds:bg-[var(--destructive)]"
+              }
+            ),
+            a("periodontalChart.legend.bleeding", "Bleeding on probing")
+          ] }),
+          /* @__PURE__ */ m("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)]", children: [
+            /* @__PURE__ */ o(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:inline-block ds:size-2 ds:rounded-[var(--radius-full)] ds:bg-[var(--warning)]"
+              }
+            ),
+            a("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: q,
+          role: "group",
+          "aria-label": Je,
+          "data-component": "periodontal-chart",
+          "data-component-id": J,
+          "data-mode": d,
+          id: J,
+          ...he,
+          onKeyDown: Ze,
+          className: Ft({ disabled: f, className: se }),
+          children: [
+            M ? it() : null,
+            je(qe.upper, "periodontalChart.arch.upper", "Upper arch"),
+            je(qe.lower, "periodontalChart.arch.lower", "Lower arch"),
+            lt
+          ]
+        }
+      )
+    );
+  }
+);
+Wt.displayName = "PeriodontalChart";
+export {
+  Pt as B,
+  Pe as M,
+  we as P,
+  me as S,
+  Et as a,
+  St as b,
+  Tt as c,
+  Wt as d,
+  Lt as e,
+  We as f,
+  rr as g,
+  Dt as h,
+  wt as i,
+  Ue as j,
+  Xe as k,
+  nr as l,
+  Qe as p,
+  ze as s,
+  sr as t
+};
+//# sourceMappingURL=periodontal-chart-DD5C0M3l.js.map