@alfadocs/ui-kit 0.70.0 → 0.71.0

package/dist/_chunks/radiograph-panel.agent-tWjN2nHX.js

@@ -0,0 +1,553 @@
+import { jsxs as c, Fragment as j, jsx as e } from "react/jsx-runtime";
+import { forwardRef as X, useState as h, useRef as ee, useImperativeHandle as ae, useMemo as re, useCallback as _, useEffect as ie } from "react";
+import { useTranslation as S } from "react-i18next";
+import { D as y } from "./dialog-ZNuboNmy.js";
+import { B as T } from "./button-DD_0Xdmr.js";
+import { I as v } from "./icon-button-LqoiKcUN.js";
+import { B as L } from "./badge-DCOqV9mI.js";
+import { F as V } from "./form-field-BOm9hK35.js";
+import { T as oe } from "./text-area-Bt3p7Pt0.js";
+import { F as de, U as te } from "./file-upload-DwZcAK8D.js";
+import { D as le } from "./date-picker-Dl9RKxaV.js";
+import { D as ne } from "./date-range-picker-CTUeR6Bj.js";
+import { E as A } from "./empty-state-BLy7tigq.js";
+import { P as se } from "./panel-header-D313n_9-.js";
+import { c as Z } from "./createLucideIcon-CrFbzy84.js";
+import { E as ce } from "./eye-LHlSU38h.js";
+import { T as pe } from "./trash-2-rPAKaRgB.js";
+import { C as me } from "./chevron-left-CX1jqD2M.js";
+import { C as ue } from "./chevron-right-BrpYejk0.js";
+import { Z as he, a as ge } from "./zoom-out-CgVtf2Wx.js";
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const fe = [
+  ["circle", { cx: "5", cy: "6", r: "3", key: "1qnov2" }],
+  ["path", { d: "M12 6h5a2 2 0 0 1 2 2v7", key: "1yj91y" }],
+  ["path", { d: "m15 9-3-3 3-3", key: "1lwv8l" }],
+  ["circle", { cx: "19", cy: "18", r: "3", key: "1qljk2" }],
+  ["path", { d: "M12 18H7a2 2 0 0 1-2-2V9", key: "16sdep" }],
+  ["path", { d: "m9 15 3 3-3 3", key: "1m3kbl" }]
+], E = Z("git-compare-arrows", fe);
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const ve = [
+  ["path", { d: "M12 12h.01", key: "1mp3jc" }],
+  [
+    "path",
+    {
+      d: "M14 15.4641a4 4 0 0 1-4 0L7.52786 19.74597 A 1 1 0 0 0 7.99303 21.16211 10 10 0 0 0 16.00697 21.16211 1 1 0 0 0 16.47214 19.74597z",
+      key: "1y4lzb"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M16 12a4 4 0 0 0-2-3.464l2.472-4.282a1 1 0 0 1 1.46-.305 10 10 0 0 1 4.006 6.94A1 1 0 0 1 21 12z",
+      key: "163ggk"
+    }
+  ],
+  [
+    "path",
+    {
+      d: "M8 12a4 4 0 0 1 2-3.464L7.528 4.254a1 1 0 0 0-1.46-.305 10 10 0 0 0-4.006 6.94A1 1 0 0 0 3 12z",
+      key: "1l9i0b"
+    }
+  ]
+], xe = Z("radiation", ve), M = ["ds:scale-100", "ds:scale-150", "ds:scale-200"];
+function ye(a, i) {
+  return [...a].sort((o, p) => o.date === p.date ? 0 : o.date ? p.date ? (o.date < p.date ? -1 : 1) * (i ? -1 : 1) : -1 : 1);
+}
+function be(a, i) {
+  if (!a.date) return !i.from && !i.to;
+  const o = /* @__PURE__ */ new Date(`${a.date}T00:00:00`);
+  return !(i.from && o < i.from || i.to && o > i.to);
+}
+function we(a) {
+  const i = (o) => String(o).padStart(2, "0");
+  return `${a.getFullYear()}-${i(a.getMonth() + 1)}-${i(a.getDate())}`;
+}
+function Pe({ kind: a }) {
+  const { t: i } = S(), o = i(`radiographPanel.kind.${a}`, {
+    defaultValue: {
+      periapical: "Periapical",
+      bitewing: "Bitewing",
+      panoramic: "Panoramic",
+      other: "Other"
+    }[a]
+  });
+  return /* @__PURE__ */ e(L, { variant: "neutral", size: "sm", children: o });
+}
+function ke({
+  state: a,
+  toothLabel: i,
+  onClose: o,
+  onIndexChange: p
+}) {
+  const { t: n } = S(), [m, g] = h(0);
+  ie(() => {
+    g(0);
+  }, [a == null ? void 0 : a.index, a == null ? void 0 : a.compare]);
+  const f = (a == null ? void 0 : a.films) ?? [], l = a ? f[a.index] : void 0;
+  return /* @__PURE__ */ e(
+    y.Root,
+    {
+      open: a !== null,
+      onOpenChange: (s) => {
+        s || (g(0), o());
+      },
+      children: /* @__PURE__ */ c(y.Content, { size: "fullscreen", "aria-describedby": void 0, children: [
+        /* @__PURE__ */ e(y.Header, { children: /* @__PURE__ */ e(y.Title, { children: a != null && a.compare ? n("radiographPanel.viewer.compareTitle", {
+          defaultValue: "{{tooth}} — comparison",
+          tooth: i
+        }) : n("radiographPanel.viewer.title", {
+          defaultValue: "{{tooth}} — radiograph",
+          tooth: i
+        }) }) }),
+        /* @__PURE__ */ e(y.Body, { children: a != null && a.compare ? /* @__PURE__ */ e("div", { className: "ds:grid ds:grid-cols-2 ds:gap-[var(--spacing-md)]", children: f.slice(0, 2).map((s) => /* @__PURE__ */ c(
+          "figure",
+          {
+            className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-xs)]",
+            children: [
+              /* @__PURE__ */ e("div", { className: "ds:flex ds:items-center ds:justify-center ds:overflow-hidden ds:rounded-[var(--radius-md)] ds:bg-[var(--muted)] ds:p-[var(--spacing-xs)]", children: /* @__PURE__ */ e(
+                "img",
+                {
+                  src: s.thumbnailUrl ?? s.url,
+                  alt: s.alt ?? i,
+                  className: "ds:max-h-full ds:max-w-full ds:object-contain"
+                }
+              ) }),
+              /* @__PURE__ */ e("figcaption", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: s.date })
+            ]
+          },
+          s.id
+        )) }) : /* @__PURE__ */ c("div", { className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+          /* @__PURE__ */ e("div", { className: "ds:flex ds:max-h-full ds:items-center ds:justify-center ds:overflow-hidden ds:rounded-[var(--radius-md)] ds:bg-[var(--muted)] ds:p-[var(--spacing-sm)]", children: /* @__PURE__ */ e(
+            "img",
+            {
+              src: (l == null ? void 0 : l.thumbnailUrl) ?? (l == null ? void 0 : l.url),
+              alt: (l == null ? void 0 : l.alt) ?? i,
+              className: [
+                "ds:max-h-full ds:max-w-full ds:object-contain",
+                "ds:origin-center ds:transition-transform ds:motion-reduce:transition-none",
+                M[m]
+              ].join(" ")
+            }
+          ) }),
+          /* @__PURE__ */ c("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+            /* @__PURE__ */ e(
+              v,
+              {
+                icon: /* @__PURE__ */ e(me, { "aria-hidden": "true" }),
+                "aria-label": n("radiographPanel.viewer.prev", {
+                  defaultValue: "Previous radiograph"
+                }),
+                size: "sm",
+                flipIconInRtl: !0,
+                disabled: !a || a.index === 0,
+                onClick: () => a && p(Math.max(0, a.index - 1))
+              }
+            ),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                "aria-live": "polite",
+                className: "type-meta ds:text-[color:var(--muted-foreground)]",
+                children: n("radiographPanel.viewer.position", {
+                  defaultValue: "{{current}} / {{total}}",
+                  current: ((a == null ? void 0 : a.index) ?? 0) + 1,
+                  total: f.length
+                })
+              }
+            ),
+            /* @__PURE__ */ e(
+              v,
+              {
+                icon: /* @__PURE__ */ e(ue, { "aria-hidden": "true" }),
+                "aria-label": n("radiographPanel.viewer.next", {
+                  defaultValue: "Next radiograph"
+                }),
+                size: "sm",
+                flipIconInRtl: !0,
+                disabled: !a || a.index >= f.length - 1,
+                onClick: () => a && p(Math.min(f.length - 1, a.index + 1))
+              }
+            ),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "ds:ms-[var(--spacing-xs)] ds:me-[var(--spacing-xs)] ds:h-[var(--spacing-md)] ds:w-px ds:bg-[var(--border)]"
+              }
+            ),
+            /* @__PURE__ */ e(
+              v,
+              {
+                icon: /* @__PURE__ */ e(he, { "aria-hidden": "true" }),
+                "aria-label": n("radiographPanel.viewer.zoomOut", {
+                  defaultValue: "Zoom out"
+                }),
+                size: "sm",
+                disabled: m === 0,
+                onClick: () => g((s) => Math.max(0, s - 1))
+              }
+            ),
+            /* @__PURE__ */ e(
+              v,
+              {
+                icon: /* @__PURE__ */ e(ge, { "aria-hidden": "true" }),
+                "aria-label": n("radiographPanel.viewer.zoomIn", {
+                  defaultValue: "Zoom in"
+                }),
+                size: "sm",
+                disabled: m === M.length - 1,
+                onClick: () => g((s) => Math.min(M.length - 1, s + 1))
+              }
+            )
+          ] }),
+          l != null && l.note ? /* @__PURE__ */ e("p", { className: "type-body-sm ds:text-[color:var(--muted-foreground)]", children: l.note }) : null
+        ] }) })
+      ] })
+    }
+  );
+}
+const $e = X(function({
+  id: i,
+  toothId: o,
+  toothLabel: p,
+  radiographs: n = [],
+  onAddRadiograph: m,
+  onDeleteRadiograph: g,
+  title: f,
+  "aria-label": l,
+  className: s,
+  ...$
+}, H) {
+  const { t: d } = S(), [q, x] = h(null), [N, K] = h([]), [C, G] = h(!0), [z, Y] = h({}), [b, B] = h(null), [w, F] = h(void 0), [D, I] = h(""), P = ee(n);
+  P.current = n, ae(
+    H,
+    () => ({
+      getRadiographs: () => P.current,
+      openViewer: (r) => {
+        const t = P.current.findIndex((u) => u.id === r);
+        t >= 0 && x({ films: P.current, index: t, compare: !1 });
+      },
+      closeViewer: () => x(null)
+    }),
+    []
+  );
+  const O = f ?? d("radiographPanel.title", { defaultValue: "Imaging" }), U = p ?? (o ? d("radiographPanel.toothLabel", {
+    defaultValue: "Tooth {{id}}",
+    id: o
+  }) : ""), R = re(
+    () => ye(
+      n.filter((r) => be(r, z)),
+      C
+    ),
+    [n, z, C]
+  ), J = _((r) => {
+    K(
+      (t) => t.includes(r) ? t.filter((u) => u !== r) : [...t, r].slice(-2)
+    );
+  }, []), Q = _(() => {
+    !b || !m || (m({
+      fileName: b,
+      date: w ? we(w) : void 0,
+      note: D || void 0
+    }), B(null), I(""), F(void 0));
+  }, [b, w, D, m]), W = o ? /* @__PURE__ */ c(j, { children: [
+    /* @__PURE__ */ e(
+      V,
+      {
+        label: d("radiographPanel.history.range", {
+          defaultValue: "Date range"
+        }),
+        children: /* @__PURE__ */ e(ne, { value: z, onChange: Y })
+      }
+    ),
+    /* @__PURE__ */ c("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+      /* @__PURE__ */ e(T, { intent: "ghost", size: "sm", onClick: () => G((r) => !r), children: C ? d("radiographPanel.history.sortNewest", {
+        defaultValue: "Newest first"
+      }) : d("radiographPanel.history.sortOldest", {
+        defaultValue: "Oldest first"
+      }) }),
+      /* @__PURE__ */ e(
+        T,
+        {
+          intent: "ghost",
+          size: "sm",
+          startIcon: /* @__PURE__ */ e(E, { "aria-hidden": "true" }),
+          disabled: N.length !== 2,
+          onClick: () => {
+            const r = n.filter((t) => N.includes(t.id));
+            r.length === 2 && x({ films: r, index: 0, compare: !0 });
+          },
+          children: d("radiographPanel.history.compare", {
+            defaultValue: "Compare"
+          })
+        }
+      )
+    ] })
+  ] }) : void 0;
+  return /* @__PURE__ */ c(
+    "section",
+    {
+      "data-component": "radiograph-panel",
+      "data-component-id": i,
+      "data-tooth": o ?? void 0,
+      "aria-label": l ?? O,
+      className: ["ds:flex ds:flex-col", s].filter(Boolean).join(" "),
+      ...$,
+      children: [
+        /* @__PURE__ */ e(
+          se,
+          {
+            sticky: !0,
+            icon: /* @__PURE__ */ e(xe, { "aria-hidden": "true" }),
+            title: /* @__PURE__ */ c(j, { children: [
+              o ? U : O,
+              o ? /* @__PURE__ */ e(L, { variant: "info", size: "sm", children: n.length }) : null
+            ] }),
+            filters: W
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)] ds:p-[var(--spacing-md)]", children: o ? /* @__PURE__ */ c(j, { children: [
+          m ? /* @__PURE__ */ c("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
+            /* @__PURE__ */ e(
+              V,
+              {
+                label: d("radiographPanel.upload.file", {
+                  defaultValue: "Image file"
+                }),
+                children: /* @__PURE__ */ e(
+                  de,
+                  {
+                    accept: { "image/*": [".png", ".jpg", ".jpeg", ".webp"] },
+                    variant: "both",
+                    showPreview: !0,
+                    onDrop: (r) => {
+                      var t;
+                      return B(((t = r[0]) == null ? void 0 : t.name) ?? null);
+                    }
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ e(
+              V,
+              {
+                label: d("radiographPanel.upload.date", {
+                  defaultValue: "Acquisition date"
+                }),
+                children: /* @__PURE__ */ e(le, { value: w, onChange: (r) => F(r) })
+              }
+            ),
+            /* @__PURE__ */ e(
+              V,
+              {
+                label: d("radiographPanel.upload.note", {
+                  defaultValue: "Note (optional)"
+                }),
+                children: /* @__PURE__ */ e(
+                  oe,
+                  {
+                    rows: 2,
+                    value: D,
+                    onChange: (r) => I(r.target.value),
+                    placeholder: d("radiographPanel.upload.notePlaceholder", {
+                      defaultValue: "E.g. routine check, apical lesion…"
+                    })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ e(
+              T,
+              {
+                intent: "primary",
+                size: "sm",
+                startIcon: /* @__PURE__ */ e(te, { "aria-hidden": "true" }),
+                disabled: !b,
+                onClick: Q,
+                className: "ds:self-start",
+                children: d("radiographPanel.upload.submit", {
+                  defaultValue: "Upload"
+                })
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ e("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: R.length === 0 ? /* @__PURE__ */ e(
+            A,
+            {
+              variant: "first-use",
+              title: d("radiographPanel.history.emptyTitle", {
+                defaultValue: "No radiographs yet"
+              }),
+              description: d("radiographPanel.history.emptyBody", {
+                defaultValue: "Upload the first film for this tooth."
+              })
+            }
+          ) : /* @__PURE__ */ e("ul", { className: "ds:m-0 ds:flex ds:list-none ds:flex-col ds:gap-[var(--spacing-xs)] ds:p-0", children: R.map((r, t) => {
+            const u = N.includes(r.id), k = r.date ?? String(t + 1);
+            return /* @__PURE__ */ c(
+              "li",
+              {
+                "data-radiograph-id": r.id,
+                "data-selected": u,
+                className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:rounded-[var(--radius-md)] ds:border ds:border-[color:var(--card-border)] ds:bg-[var(--card)] ds:p-[var(--spacing-xs)] ds:data-[selected=true]:border-[color:var(--info-foreground)]",
+                children: [
+                  /* @__PURE__ */ e(
+                    "img",
+                    {
+                      src: r.thumbnailUrl ?? r.url,
+                      alt: r.alt ?? "",
+                      className: "ds:h-16 ds:w-12 ds:shrink-0 ds:rounded-[var(--radius-sm)] ds:object-cover"
+                    }
+                  ),
+                  /* @__PURE__ */ c("div", { className: "ds:flex ds:min-w-0 ds:flex-1 ds:flex-col ds:gap-[var(--spacing-2xs)]", children: [
+                    /* @__PURE__ */ e("span", { className: "type-body-sm ds:text-[color:var(--foreground)]", children: r.date }),
+                    /* @__PURE__ */ e(Pe, { kind: r.kind ?? "periapical" })
+                  ] }),
+                  /* @__PURE__ */ e(
+                    v,
+                    {
+                      icon: /* @__PURE__ */ e(ce, { "aria-hidden": "true" }),
+                      "aria-label": d("radiographPanel.history.view", {
+                        defaultValue: "View radiograph {{film}}",
+                        film: k
+                      }),
+                      size: "sm",
+                      intent: "ghost",
+                      onClick: () => x({
+                        films: R,
+                        index: t,
+                        compare: !1
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    v,
+                    {
+                      icon: /* @__PURE__ */ e(E, { "aria-hidden": "true" }),
+                      "aria-label": u ? d("radiographPanel.history.compareRemove", {
+                        defaultValue: "Remove {{film}} from comparison",
+                        film: k
+                      }) : d("radiographPanel.history.compareAdd", {
+                        defaultValue: "Select {{film}} for comparison",
+                        film: k
+                      }),
+                      "aria-pressed": u,
+                      size: "sm",
+                      intent: u ? "secondary" : "ghost",
+                      onClick: () => J(r.id)
+                    }
+                  ),
+                  g ? /* @__PURE__ */ e(
+                    v,
+                    {
+                      icon: /* @__PURE__ */ e(pe, { "aria-hidden": "true" }),
+                      "aria-label": d("radiographPanel.history.delete", {
+                        defaultValue: "Delete radiograph {{film}}",
+                        film: k
+                      }),
+                      size: "sm",
+                      intent: "ghost",
+                      onClick: () => g(r.id)
+                    }
+                  ) : null
+                ]
+              },
+              r.id
+            );
+          }) }) })
+        ] }) : /* @__PURE__ */ e(
+          A,
+          {
+            variant: "first-use",
+            title: d("radiographPanel.noTooth.title", {
+              defaultValue: "No tooth selected"
+            }),
+            description: d("radiographPanel.noTooth.body", {
+              defaultValue: "Select a tooth on the chart to view its radiographs."
+            })
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          ke,
+          {
+            state: q,
+            toothLabel: U,
+            onClose: () => x(null),
+            onIndexChange: (r) => x((t) => t && { ...t, index: r })
+          }
+        )
+      ]
+    }
+  );
+}), He = {
+  id: "radiograph-panel",
+  // pick — open a specific film in the viewer; view_change — the viewer is a
+  // view surface over the host-owned films.
+  capabilities: ["pick", "view_change"],
+  state: {
+    radiographs: {
+      // A9: structural refs only (id + kind) — never the free-text `note`,
+      // service dates, or consumer-hosted image URLs in the always-on snapshot.
+      type: "Array<{ id: string; kind?: string }>",
+      descriptionKey: "ui.agent.radiographPanel.state.radiographs",
+      description: "Structural references (id + kind) to the films shown for the selected tooth.",
+      read: (a) => a.getRadiographs().map((i) => ({ id: i.id, kind: i.kind ?? "periapical" }))
+    }
+  },
+  actions: {
+    view_radiograph: {
+      safety: "read",
+      argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: { id: { type: "string" } },
+        required: ["id"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.radiographPanel.actions.viewRadiograph",
+      description: "Open a film in the fullscreen viewer by id.",
+      invoke: (a, i) => {
+        a.openViewer(i.id);
+      }
+    },
+    close_viewer: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.radiographPanel.actions.closeViewer",
+      description: "Close the fullscreen radiograph viewer.",
+      invoke: (a) => {
+        a.closeViewer();
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "radiograph-panel" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-radiograph-id",
+      description: "Each film row (`<li>`) carries its radiograph id as `data-radiograph-id`. The panel root additionally carries the selected tooth's FDI id as `data-tooth`."
+    }
+  }
+};
+export {
+  $e as R,
+  xe as a,
+  He as r
+};
+//# sourceMappingURL=radiograph-panel.agent-tWjN2nHX.js.map