@alfadocs/ui-kit-debug 0.72.2 → 0.75.0

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

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