formanitor 0.2.2 → 0.2.4

package/dist/chunk-X4AJCTON.cjs

@@ -0,0 +1,607 @@
+'use strict';
+
+var chunkPHADAQSH_cjs = require('./chunk-PHADAQSH.cjs');
+var chunkRILRMRXB_cjs = require('./chunk-RILRMRXB.cjs');
+var chunkO3VQBPEW_cjs = require('./chunk-O3VQBPEW.cjs');
+var chunkTB33A4PD_cjs = require('./chunk-TB33A4PD.cjs');
+var chunkFHHISVCH_cjs = require('./chunk-FHHISVCH.cjs');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/core/dentalChart.ts
+var CONDITION_CONFIG = {
+  cavity: { label: "Cavity", color: "#ef4444" },
+  filled: { label: "Filled", color: "#3b82f6" },
+  crown: { label: "Crown", color: "#f59e0b" },
+  missing: { label: "Missing", color: "#9ca3af" },
+  root_canal: { label: "Root Canal (RCT)", color: "#a855f7" },
+  bridge: { label: "Bridge", color: "#f97316" },
+  implant: { label: "Implant", color: "#14b8a6" },
+  fractured: { label: "Fractured", color: "#eab308" },
+  impacted: { label: "Impacted", color: "#6366f1" }
+};
+var ALL_CONDITIONS = Object.keys(CONDITION_CONFIG);
+var QUADRANTS = {
+  upperRight: [11, 12, 13, 14, 15, 16, 17, 18],
+  upperLeft: [21, 22, 23, 24, 25, 26, 27, 28],
+  lowerLeft: [31, 32, 33, 34, 35, 36, 37, 38],
+  lowerRight: [41, 42, 43, 44, 45, 46, 47, 48]
+};
+var TOOTH_NAMES = {
+  11: "UR Central Incisor",
+  12: "UR Lateral Incisor",
+  13: "UR Canine",
+  14: "UR 1st Premolar",
+  15: "UR 2nd Premolar",
+  16: "UR 1st Molar",
+  17: "UR 2nd Molar",
+  18: "UR 3rd Molar",
+  21: "UL Central Incisor",
+  22: "UL Lateral Incisor",
+  23: "UL Canine",
+  24: "UL 1st Premolar",
+  25: "UL 2nd Premolar",
+  26: "UL 1st Molar",
+  27: "UL 2nd Molar",
+  28: "UL 3rd Molar",
+  31: "LL Central Incisor",
+  32: "LL Lateral Incisor",
+  33: "LL Canine",
+  34: "LL 1st Premolar",
+  35: "LL 2nd Premolar",
+  36: "LL 1st Molar",
+  37: "LL 2nd Molar",
+  38: "LL 3rd Molar",
+  41: "LR Central Incisor",
+  42: "LR Lateral Incisor",
+  43: "LR Canine",
+  44: "LR 1st Premolar",
+  45: "LR 2nd Premolar",
+  46: "LR 1st Molar",
+  47: "LR 2nd Molar",
+  48: "LR 3rd Molar"
+};
+function toothLabel(id) {
+  return TOOTH_NAMES[id] ?? `Tooth ${id}`;
+}
+var SURFACE_CONDITIONS = ["cavity", "filled", "fractured"];
+var ANTERIOR_TEETH = /* @__PURE__ */ new Set([13, 12, 11, 21, 22, 23, 43, 42, 41, 31, 32, 33]);
+function getToothSurfaces(id) {
+  const isUpper = id >= 11 && id <= 28;
+  const isAnterior = ANTERIOR_TEETH.has(id);
+  return [
+    "Buccal",
+    "Mesial",
+    "Distal",
+    isAnterior ? "Incisal" : "Occlusal",
+    isUpper ? "Palatal" : "Lingual"
+  ];
+}
+function normalizeDentalChart(value) {
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    const v = value;
+    if (v.teeth && typeof v.teeth === "object" && !Array.isArray(v.teeth)) {
+      return value;
+    }
+  }
+  return { teeth: {} };
+}
+function ToothEditor({
+  id,
+  entry,
+  onChange
+}) {
+  const conditions = entry?.conditions ?? [];
+  const surfaces = entry?.surfaces ?? {};
+  const notes = entry?.notes ?? "";
+  const availableSurfaces = getToothSurfaces(id);
+  const buildEntry = (nextConditions, nextSurfaces, nextNotes) => ({
+    conditions: nextConditions,
+    surfaces: Object.keys(nextSurfaces).length ? nextSurfaces : void 0,
+    notes: nextNotes || void 0
+  });
+  const toggle = (c) => {
+    const isActive = conditions.includes(c);
+    const nextConditions = isActive ? conditions.filter((x) => x !== c) : [...conditions, c];
+    const nextSurfaces = { ...surfaces };
+    if (isActive) delete nextSurfaces[c];
+    onChange(buildEntry(nextConditions, nextSurfaces, notes));
+  };
+  const toggleSurface = (c, surface) => {
+    const current = surfaces[c] ?? [];
+    const next = current.includes(surface) ? current.filter((s) => s !== surface) : [...current, surface];
+    const nextSurfaces = { ...surfaces, [c]: next.length ? next : [] };
+    onChange(buildEntry(conditions, nextSurfaces, notes));
+  };
+  const updateNotes = (v) => onChange(buildEntry(conditions, surfaces, v));
+  const activeSurfaceConditions = SURFACE_CONDITIONS.filter(
+    (c) => conditions.includes(c)
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs font-semibold text-foreground", children: [
+          "Tooth ",
+          id
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground", children: toothLabel(id) })
+      ] }),
+      conditions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange({ conditions: [] }),
+          className: "flex shrink-0 items-center gap-1 text-[10px] text-destructive hover:underline",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-3 w-3" }),
+            "Clear"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: ALL_CONDITIONS.map((c) => {
+      const cfg = CONDITION_CONFIG[c];
+      const active = conditions.includes(c);
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => toggle(c),
+          className: chunkFHHISVCH_cjs.cn(
+            "rounded-full border px-2.5 py-0.5 text-[10px] font-medium transition-all",
+            active ? "text-white" : "border-border bg-background text-muted-foreground hover:border-gray-400"
+          ),
+          style: active ? { backgroundColor: cfg.color, borderColor: cfg.color } : void 0,
+          children: cfg.label
+        },
+        c
+      );
+    }) }),
+    activeSurfaceConditions.map((c) => {
+      const cfg = CONDITION_CONFIG[c];
+      const selected = surfaces[c] ?? [];
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "p",
+          {
+            className: "text-[10px] font-semibold uppercase tracking-wide",
+            style: { color: cfg.color },
+            children: [
+              cfg.label,
+              " \u2014 surfaces"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: availableSurfaces.map((surface) => {
+          const on = selected.includes(surface);
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => toggleSurface(c, surface),
+              className: chunkFHHISVCH_cjs.cn(
+                "rounded border px-2 py-0.5 text-[10px] font-medium transition-all",
+                on ? "text-white" : "border-border bg-background text-muted-foreground hover:border-gray-400"
+              ),
+              style: on ? { backgroundColor: cfg.color, borderColor: cfg.color } : void 0,
+              children: surface
+            },
+            surface
+          );
+        }) })
+      ] }, c);
+    }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      chunkPHADAQSH_cjs.Textarea,
+      {
+        value: notes,
+        onChange: (e) => updateNotes(e.target.value),
+        placeholder: "Notes for this tooth\u2026",
+        className: "h-16 resize-none text-xs"
+      }
+    )
+  ] });
+}
+function ToothButton({
+  id,
+  entry,
+  isUpper,
+  onChange
+}) {
+  const conditions = entry?.conditions ?? [];
+  const isMissing = conditions.includes("missing");
+  const primary = isMissing ? "missing" : conditions[0] ?? null;
+  const primaryColor = primary ? CONDITION_CONFIG[primary].color : null;
+  const multiCount = conditions.length > 1 ? conditions.length : null;
+  const boxStyle = {
+    position: "relative",
+    width: 46,
+    height: 58,
+    flexShrink: 0,
+    display: "flex",
+    flexDirection: "column",
+    borderRadius: 6,
+    border: "1px solid",
+    borderColor: !isMissing && primaryColor ? primaryColor : isMissing ? "#d1d5db" : "#e5e7eb",
+    backgroundColor: isMissing ? "#f3f4f6" : "#ffffff",
+    cursor: "pointer",
+    userSelect: "none",
+    outline: "none",
+    transition: "box-shadow 0.15s"
+  };
+  const numberStyle = {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 11,
+    fontWeight: 700,
+    color: isMissing ? "#9ca3af" : "#374151",
+    lineHeight: 1
+  };
+  const stripStyle = (rounded) => ({
+    height: 10,
+    flexShrink: 0,
+    borderRadius: rounded === "bottom" ? "0 0 5px 5px" : "5px 5px 0 0",
+    backgroundColor: !isMissing && primaryColor ? primaryColor : "transparent"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkRILRMRXB_cjs.Popover, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkRILRMRXB_cjs.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        title: toothLabel(id),
+        style: boxStyle,
+        className: "hover:ring-2 hover:ring-primary/30 focus:ring-2 focus:ring-primary/40",
+        children: [
+          isUpper ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: numberStyle, children: isMissing ? "\u2715" : id }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: stripStyle("bottom") })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: stripStyle("top") }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: numberStyle, children: isMissing ? "\u2715" : id })
+          ] }),
+          multiCount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1.5 -right-1.5 z-10 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-primary text-[7px] font-bold text-primary-foreground", children: multiCount })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkRILRMRXB_cjs.PopoverContent, { className: "w-72 p-3", side: isUpper ? "top" : "bottom", align: "center", sideOffset: 6, children: /* @__PURE__ */ jsxRuntime.jsx(ToothEditor, { id, entry, onChange }) })
+  ] });
+}
+var ANTERIOR_IDS = /* @__PURE__ */ new Set([13, 12, 11, 21, 22, 23, 43, 42, 41, 31, 32, 33]);
+function buildSurfaceColorMap(entry) {
+  if (!entry?.surfaces) return {};
+  const map = {};
+  for (const cond of SURFACE_CONDITIONS) {
+    const surfs = entry.surfaces[cond];
+    if (!surfs?.length) continue;
+    const color = CONDITION_CONFIG[cond]?.color;
+    if (!color) continue;
+    for (const s of surfs) map[s] = color;
+  }
+  return map;
+}
+function ToothDiagram({ id, entry }) {
+  const colorMap = buildSurfaceColorMap(entry);
+  const hasSurfaces = Object.keys(colorMap).length > 0;
+  const isUpper = id >= 11 && id <= 28;
+  const bottomLabel = isUpper ? "Palatal" : "Lingual";
+  const centerLabel = ANTERIOR_IDS.has(id) ? "Incisal" : "Occlusal";
+  const S = 46;
+  const I = 11;
+  const segments = [
+    { key: "Buccal", d: `M0,0 L${S},0 L${S - I},${I} L${I},${I}Z` },
+    { key: "Mesial", d: `M0,0 L0,${S} L${I},${S - I} L${I},${I}Z` },
+    { key: "Distal", d: `M${S},0 L${S},${S} L${S - I},${S - I} L${S - I},${I}Z` },
+    { key: bottomLabel, d: `M0,${S} L${S},${S} L${S - I},${S - I} L${I},${S - I}Z` },
+    { key: centerLabel, d: `M${I},${I} L${S - I},${I} L${S - I},${S - I} L${I},${S - I}Z` }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: S,
+      height: S,
+      viewBox: `0 0 ${S} ${S}`,
+      style: { flexShrink: 0, opacity: hasSurfaces ? 1 : 0.3 },
+      children: segments.map(({ key, d }) => {
+        const color = colorMap[key];
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d,
+            fill: color ?? "#f1f5f9",
+            stroke: color ? color : "#cbd5e1",
+            strokeWidth: "1",
+            strokeLinejoin: "round"
+          },
+          key
+        );
+      })
+    }
+  );
+}
+function ArchRow({
+  teeth: toothIds,
+  isUpper,
+  data,
+  onChange,
+  reverseOrder = false
+}) {
+  const ordered = reverseOrder ? [...toothIds].reverse() : toothIds;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: ordered.map((id) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
+    isUpper && /* @__PURE__ */ jsxRuntime.jsx(ToothDiagram, { id, entry: data[String(id)] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ToothButton,
+      {
+        id,
+        entry: data[String(id)],
+        isUpper,
+        onChange: (entry) => onChange(id, entry)
+      }
+    ),
+    !isUpper && /* @__PURE__ */ jsxRuntime.jsx(ToothDiagram, { id, entry: data[String(id)] })
+  ] }, id)) });
+}
+function ChartLegend() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-1.5", children: ALL_CONDITIONS.map((c) => {
+    const cfg = CONDITION_CONFIG[c];
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { backgroundColor: cfg.color } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: cfg.label })
+    ] }, c);
+  }) });
+}
+var DentalChartWidget = ({ fieldId }) => {
+  const { value, setValue, setTouched, disabled } = chunkTB33A4PD_cjs.useField(fieldId);
+  const data = normalizeDentalChart(value);
+  const teeth = data.teeth;
+  const handleToothChange = react.useCallback(
+    (id, entry) => {
+      const next = { ...teeth };
+      if (entry.conditions.length === 0 && !entry.notes) {
+        delete next[String(id)];
+      } else {
+        next[String(id)] = entry;
+      }
+      setValue({ teeth: next });
+      setTouched();
+    },
+    [teeth, setValue, setTouched]
+  );
+  const markedCount = Object.keys(teeth).length;
+  if (disabled) {
+    return /* @__PURE__ */ jsxRuntime.jsx(DentalChartDisplay, { data });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl border border-border/60 bg-card shadow-sm", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-border/60 px-4 py-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Intra Oral Examination \u2013 Dental Chart" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-0.5 text-[11px] text-muted-foreground", children: [
+          "Click any tooth to mark conditions",
+          markedCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-1 font-medium text-foreground", children: [
+            "\xB7 ",
+            markedCount,
+            " ",
+            markedCount !== 1 ? "teeth" : "tooth",
+            " marked"
+          ] })
+        ] })
+      ] }),
+      markedCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+        chunkO3VQBPEW_cjs.Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          onClick: () => {
+            setValue({ teeth: {} });
+            setTouched();
+          },
+          className: "h-7 gap-1 text-xs text-destructive hover:text-destructive",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" }),
+            "Clear all"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "UR" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ArchRow, { teeth: QUADRANTS.upperRight, isUpper: true, data: teeth, onChange: handleToothChange, reverseOrder: true })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-2 h-[58px] w-px bg-border" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "UL" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ArchRow, { teeth: QUADRANTS.upperLeft, isUpper: true, data: teeth, onChange: handleToothChange })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-2 flex w-full items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Occlusal" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ArchRow, { teeth: QUADRANTS.lowerRight, isUpper: false, data: teeth, onChange: handleToothChange, reverseOrder: true }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "LR" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-2 h-[58px] w-px bg-border" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ArchRow, { teeth: QUADRANTS.lowerLeft, isUpper: false, data: teeth, onChange: handleToothChange }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "LL" })
+        ] })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-border/60 px-4 py-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Legend" }),
+      /* @__PURE__ */ jsxRuntime.jsx(ChartLegend, {})
+    ] })
+  ] });
+};
+function DentalChartDisplay({ data }) {
+  const teeth = data.teeth ?? {};
+  const markedCount = Object.keys(teeth).length;
+  if (markedCount === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl border border-border/60 bg-card px-4 py-8 text-center text-sm text-muted-foreground shadow-sm", children: "No dental findings recorded" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(DentalChartReadOnly, { data });
+}
+function DentalChartReadOnly({
+  data,
+  className
+}) {
+  const teeth = data.teeth ?? {};
+  const markedCount = Object.keys(teeth).length;
+  const usedConditions = new Set(
+    Object.values(teeth).flatMap((e) => e.conditions ?? [])
+  );
+  const toothNotes = Object.entries(teeth).filter(([, e]) => e.notes).map(([id, e]) => ({ id: Number(id), label: toothLabel(Number(id)), notes: e.notes }));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkFHHISVCH_cjs.cn("rounded-xl border border-border/60 bg-card shadow-sm", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between border-b border-border/60 px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-foreground", children: "Intra Oral Examination \u2013 Dental Chart" }),
+      markedCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "mt-0.5 text-[11px] text-muted-foreground", children: [
+        markedCount,
+        " ",
+        markedCount !== 1 ? "teeth" : "tooth",
+        " marked"
+      ] })
+    ] }) }),
+    markedCount === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-8 text-center text-sm text-muted-foreground", children: "No dental findings recorded" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "UR" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyArchRow, { teeth: QUADRANTS.upperRight, isUpper: true, data: teeth, reverseOrder: true })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-2 h-[58px] w-px bg-border" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "UL" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyArchRow, { teeth: QUADRANTS.upperLeft, isUpper: true, data: teeth })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "my-2 flex w-full items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Occlusal" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-px flex-1 bg-border" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyArchRow, { teeth: QUADRANTS.lowerRight, isUpper: false, data: teeth, reverseOrder: true }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "LR" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-2 h-[58px] w-px bg-border" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyArchRow, { teeth: QUADRANTS.lowerLeft, isUpper: false, data: teeth }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "LL" })
+          ] })
+        ] })
+      ] }) }) }),
+      usedConditions.size > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-border/60 px-4 py-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Legend" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyLegend, { usedConditions })
+      ] }),
+      toothNotes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-border/60 px-4 py-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground", children: "Tooth Notes" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1.5", children: toothNotes.map(({ id, label, notes }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 text-xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 font-medium text-foreground", children: id }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground", children: [
+            label,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: notes })
+        ] }, id)) })
+      ] })
+    ] })
+  ] });
+}
+function ReadOnlyTooth({
+  id,
+  entry,
+  isUpper
+}) {
+  const conditions = entry?.conditions ?? [];
+  const isMissing = conditions.includes("missing");
+  const primary = isMissing ? "missing" : conditions[0] ?? null;
+  const primaryColor = primary ? CONDITION_CONFIG[primary].color : null;
+  const multiCount = conditions.length > 1 ? conditions.length : null;
+  const tooltipParts = [
+    `Tooth ${id}: ${toothLabel(id)}`,
+    conditions.length > 0 ? conditions.map((c) => CONDITION_CONFIG[c]?.label ?? c).join(", ") : "Healthy",
+    entry?.notes ? `Notes: ${entry.notes}` : null
+  ].filter(Boolean);
+  const boxStyle = {
+    position: "relative",
+    width: 46,
+    height: 58,
+    flexShrink: 0,
+    display: "flex",
+    flexDirection: "column",
+    borderRadius: 6,
+    border: "1px solid",
+    borderColor: !isMissing && primaryColor ? primaryColor : isMissing ? "#d1d5db" : "#e5e7eb",
+    backgroundColor: isMissing ? "#f3f4f6" : "#ffffff",
+    userSelect: "none"
+  };
+  const numberStyle = {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: 11,
+    fontWeight: 700,
+    color: isMissing ? "#9ca3af" : "#374151",
+    lineHeight: 1
+  };
+  const stripStyle = (rounded) => ({
+    height: 10,
+    flexShrink: 0,
+    borderRadius: rounded === "bottom" ? "0 0 5px 5px" : "5px 5px 0 0",
+    backgroundColor: !isMissing && primaryColor ? primaryColor : "transparent"
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { title: tooltipParts.join("\n"), style: boxStyle, children: [
+    isUpper ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: numberStyle, children: isMissing ? "\u2715" : id }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: stripStyle("bottom") })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: stripStyle("top") }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: numberStyle, children: isMissing ? "\u2715" : id })
+    ] }),
+    multiCount && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1.5 -right-1.5 z-10 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-primary text-[7px] font-bold text-primary-foreground", children: multiCount })
+  ] });
+}
+function ReadOnlyArchRow({
+  teeth: toothIds,
+  isUpper,
+  data,
+  reverseOrder = false
+}) {
+  const ordered = reverseOrder ? [...toothIds].reverse() : toothIds;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1", children: ordered.map((id) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5", children: [
+    isUpper && /* @__PURE__ */ jsxRuntime.jsx(ToothDiagram, { id, entry: data[String(id)] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ReadOnlyTooth, { id, entry: data[String(id)], isUpper }),
+    !isUpper && /* @__PURE__ */ jsxRuntime.jsx(ToothDiagram, { id, entry: data[String(id)] })
+  ] }, id)) });
+}
+function ReadOnlyLegend({ usedConditions }) {
+  const active = ALL_CONDITIONS.filter((c) => usedConditions.has(c));
+  if (active.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-x-4 gap-y-1.5", children: active.map((c) => {
+    const cfg = CONDITION_CONFIG[c];
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-2.5 w-2.5 shrink-0 rounded-full", style: { backgroundColor: cfg.color } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground", children: cfg.label })
+    ] }, c);
+  }) });
+}
+
+exports.CONDITION_CONFIG = CONDITION_CONFIG;
+exports.DentalChartReadOnly = DentalChartReadOnly;
+exports.DentalChartWidget = DentalChartWidget;
+exports.QUADRANTS = QUADRANTS;
+exports.normalizeDentalChart = normalizeDentalChart;
+exports.toothLabel = toothLabel;
+//# sourceMappingURL=chunk-X4AJCTON.cjs.map
+//# sourceMappingURL=chunk-X4AJCTON.cjs.map