@alfadocs/ui-kit-debug 1.36.1 → 1.38.0

package/dist/_chunks/notes-panel-CkbfDDzj.js

@@ -0,0 +1,614 @@
+import { jsxs as o, jsx as n, Fragment as $e } from "react/jsx-runtime";
+import { forwardRef as Je, useRef as f, useState as x, useId as Qe, useCallback as w, useEffect as me, useImperativeHandle as Ue, useMemo as Xe } from "react";
+import { c as Ze } from "./index-D2ZczOXr.js";
+import { useTranslation as et } from "react-i18next";
+import { u as tt } from "./registry-DvAUVLHh.js";
+import { C as nt } from "./clinical-note-card-DdsGYMmI.js";
+import { R as at } from "./rich-text-editor-BTXlorm5.js";
+import { T as it } from "./text-area-Bt3p7Pt0.js";
+import { A as z } from "./alert-CiQ5Pa3Q.js";
+import { B as j } from "./button-nJaPh_HC.js";
+import { I as pe } from "./icon-button-8xqRnkdG.js";
+import { C as rt } from "./checkbox-CZkipDn7.js";
+import { C as ge } from "./card-DPmk26CL.js";
+import { C as lt, S as W } from "./skeleton-B1KTdJ4N.js";
+import { D as h } from "./dialog-BJiLqhx6.js";
+import { P as st } from "./panel-header-D_mTdhUp.js";
+import { a as ot, u as dt, R as ct } from "./use-list-reflow-Cw43nxw5.js";
+import { u as ut } from "./use-theme-CAuo6EYT.js";
+import { N as ft } from "./notebook-pen-CO7HoM-W.js";
+import { P as mt } from "./pencil-B1sKKyuT.js";
+import { T as pt } from "./trash-2-uumy3fy1.js";
+function he(i, c) {
+  return typeof i == "object" && i !== null && "message" in i && typeof i.message == "string" && i.message.trim() ? i.message : c;
+}
+const gt = {
+  id: "notes-panel",
+  // 'submit' backs add_note (compose + commit a note). pin / flag are toggles
+  // with no dedicated capability in the closed vocabulary.
+  capabilities: ["submit"],
+  state: {
+    notes: {
+      type: "Array<{ id?: string; pinned: boolean; flagged: boolean; clinical: boolean }>",
+      descriptionKey: "ui.agent.notesPanel.state.notes",
+      description: "Timeline note ids + pinned / flagged / clinical flags. Never the note body or author (both PHI).",
+      read: (i) => i.getNotes()
+    },
+    canAddClinical: {
+      type: "boolean",
+      descriptionKey: "ui.agent.notesPanel.state.canAddClinical",
+      description: "Whether the current user may write clinical notes (the practice_add_clinical_note permission gate).",
+      read: (i) => i.canAddClinical()
+    },
+    currentNoteId: {
+      type: "string | null",
+      descriptionKey: "ui.agent.notesPanel.state.currentNoteId",
+      description: "Id of the note the host has addressed — the one marked, scrolled to and focused. Null when none is. An id only, never note content.",
+      read: (i) => i.getCurrentNoteId()
+    }
+  },
+  actions: {
+    add_note: {
+      // Writes a clinical/admin note body — patient-identifiable content. PHI.
+      safety: "phi",
+      argsType: "{ content: string; clinical: boolean }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          content: {
+            type: "string",
+            description: "Note body. Rich HTML for the rich composer, else plain text."
+          },
+          clinical: {
+            type: "boolean",
+            description: "Whether the note is clinical. Requires the clinical-note permission; the submission is dropped when the gate is closed."
+          }
+        },
+        required: ["content", "clinical"]
+      },
+      openWorld: !0,
+      descriptionKey: "ui.agent.notesPanel.actions.addNote",
+      description: "Compose and commit a new note. A clinical note requires the clinical-note permission (read canAddClinical first).",
+      examples: [
+        {
+          args: { content: "Patient reported improvement.", clinical: !0 },
+          note: "Add a clinical note."
+        }
+      ],
+      invoke: (i, c) => i.addNote(c)
+    },
+    toggle_pin: {
+      // Re-orders the timeline (pinned notes lead) — reversible view write.
+      safety: "write",
+      argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: { id: { type: "string" } },
+        required: ["id"]
+      },
+      idempotent: !1,
+      descriptionKey: "ui.agent.notesPanel.actions.togglePin",
+      description: "Toggle the pinned state of the note with the given id. Refused for a deleted note or one whose actions.pin is false.",
+      invoke: (i, c) => {
+        i.togglePin(c.id);
+      }
+    },
+    toggle_flag: {
+      safety: "write",
+      argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: { id: { type: "string" } },
+        required: ["id"]
+      },
+      idempotent: !1,
+      descriptionKey: "ui.agent.notesPanel.actions.toggleFlag",
+      description: "Toggle the flagged state of the note with the given id.",
+      invoke: (i, c) => {
+        i.toggleFlag(c.id);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "notes-panel",
+      description: "Marks the NotesPanel region."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific notes panel from the agent."
+    }
+  }
+}, ht = Ze(
+  "ds:flex ds:flex-col ds:rounded-[var(--radius-md)] ds:border-s-2 ds:ps-[var(--spacing-sm)]",
+  {
+    variants: {
+      current: {
+        true: "ds:border-[color:var(--info)] ds:bg-[color:var(--info)]/10 ds:focus:outline-[length:var(--focus-ring-width)] ds:focus:outline-solid ds:focus:outline-[color:var(--ring)] ds:focus:outline-offset-[length:var(--focus-ring-offset)]",
+        false: "ds:border-transparent"
+      }
+    },
+    defaultVariants: { current: !1 }
+  }
+), vt = "ds:opacity-0", yt = [
+  "ds:transition-opacity ds:duration-[var(--animation-duration)]",
+  "ds:ease-[var(--ease-out)] ds:motion-reduce:transition-none"
+].join(" "), bt = [3, 2, 3];
+function ve(i) {
+  return i ? /<img\b/i.test(i) ? !0 : i.replace(/<[^>]*>/g, "").replace(/&nbsp;/gi, " ").trim().length > 0 : !1;
+}
+const Kt = Je(
+  function({
+    id: c,
+    notes: L,
+    onAddNote: m,
+    status: y = "ready",
+    onRetry: X,
+    currentNoteId: b,
+    currentNoteKey: ye,
+    composer: p = "rich",
+    editorToolbar: be = "standard",
+    redactor: Ce,
+    imageUploadUrl: Pe,
+    showClinicalToggle: xe = !0,
+    canAddClinicalNote: _ = !0,
+    clinicalGatedReason: we,
+    defaultClinical: R = !1,
+    onRequestAiDraft: Re,
+    aiDraftFormat: Te,
+    aiPrivacyNotice: ke,
+    onDictate: Ne,
+    onProofread: Ve,
+    onAutoFormat: Ee,
+    onTogglePin: A,
+    onToggleFlag: H,
+    noteActions: Z,
+    onEditNote: T,
+    editClinical: Ie = !1,
+    onDeleteNote: g,
+    confirmDelete: G = !0,
+    title: Se,
+    composerPlaceholder: ze,
+    addNoteLabel: je,
+    emptyState: Le,
+    className: _e,
+    "aria-label": Y,
+    ...Ae
+  }, He) {
+    const { t: a, i18n: ee } = et(), v = f(null), [C, k] = x(""), [B, O] = x(R), [u, te] = x(!1), [ne, N] = x(null), [l, $] = x(null), ae = f(!1);
+    y === "loading" && (ae.current = !0);
+    const Be = ae.current ? lt : "", Oe = Se ?? a("notesPanel.title", { defaultValue: "Notes" }), ie = Qe(), re = ze ?? a("notesPanel.placeholder", { defaultValue: "Add a note…" }), le = l !== null ? a("notesPanel.edit", { defaultValue: "Edit note" }) : a("notesPanel.composerLabel", { defaultValue: "New note" }), De = p === "rich" ? ve(C) : C.trim().length > 0, Ke = w(() => {
+      var S;
+      if (!(l !== null ? T : m) || u) return;
+      const t = p === "rich", d = t ? ((S = v.current) == null ? void 0 : S.getHTML()) ?? C : C.trim();
+      if (t ? !ve(d) : !d) return;
+      const s = () => {
+        var P;
+        t && ((P = v.current) == null || P.clear()), k(""), O(R), $(null);
+      };
+      N(null);
+      let r;
+      try {
+        r = l !== null && T ? T(l, { content: d, clinical: B }) : m == null ? void 0 : m({ content: d, clinical: B });
+      } catch (P) {
+        N(he(P, a("notesPanel.addFailed")));
+        return;
+      }
+      if (!r || typeof r.then != "function") return s();
+      te(!0), Promise.resolve(r).then(
+        s,
+        (P) => N(he(P, a("notesPanel.addFailed")))
+      ).finally(() => te(!1));
+    }, [
+      p,
+      C,
+      B,
+      R,
+      l,
+      m,
+      T,
+      u,
+      a
+    ]), se = xe && (l === null || Ie), oe = w(
+      (e) => {
+        try {
+          return new Intl.DateTimeFormat(ee.language, {
+            day: "numeric",
+            month: "long",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit"
+          }).format(new Date(e.dateIso));
+        } catch {
+          return e.dateIso;
+        }
+      },
+      [ee.language]
+    ), qe = w(
+      (e) => {
+        var d, s, r;
+        if (!e.id || u) return;
+        const t = e.content ?? "";
+        N(null), $(e.id), O(e.clinical ?? !1), k(t), p === "rich" && ((d = v.current) == null || d.clear(), (s = v.current) == null || s.insertAtCursor(t, { asHtml: !0 })), (r = v.current) == null || r.focus();
+      },
+      [p, u]
+    ), D = w(() => {
+      var e;
+      p === "rich" && ((e = v.current) == null || e.clear()), k(""), O(R), N(null), $(null);
+    }, [p, R]), de = l === null || L.some((e) => e.id === l && !e.deleted);
+    me(() => {
+      de || D();
+    }, [de, D]);
+    const V = [...L].sort(
+      (e, t) => Number(t.pinned ?? !1) - Number(e.pinned ?? !1)
+    ), { resolvedTheme: Fe } = ut(), ce = Fe.endsWith("-accessible") || void 0, { containerRef: Me } = ot({
+      key: V.map((e) => e.id).join(),
+      reduceMotion: ce
+    }), E = dt({ reduceMotion: ce }), [K, q] = x(null), We = w(
+      (e) => {
+        g && (G ? q(e) : E.leave(e, () => g(e)));
+      },
+      [G, E, g]
+    ), Ge = w(() => {
+      if (!K || !g) return;
+      const e = K;
+      q(null), E.leave(e, () => g(e));
+    }, [K, g, E]), J = f(null);
+    me(() => {
+      var e, t;
+      b && ((e = J.current) == null || e.scrollIntoView({ block: "center" }), (t = J.current) == null || t.focus());
+    }, [b, ye]);
+    const Q = f(L);
+    Q.current = L;
+    const I = f(m);
+    I.current = m;
+    const F = f(A);
+    F.current = A;
+    const M = f(H);
+    M.current = H;
+    const U = f(_);
+    U.current = _;
+    const ue = f(b);
+    ue.current = b;
+    const fe = f(null);
+    Ue(He, () => fe.current, []);
+    const Ye = Xe(
+      () => ({
+        // Ids + flags only — never the note body or author (both PHI).
+        getNotes: () => Q.current.map((e) => ({
+          id: e.id,
+          pinned: !!e.pinned,
+          flagged: !!e.flagged,
+          clinical: !!e.clinical
+        })),
+        canAddNote: () => !!I.current,
+        canAddClinical: () => U.current,
+        getCurrentNoteId: () => ue.current ?? null,
+        addNote: (e) => {
+          var t;
+          if (!(e.clinical && !U.current))
+            return (t = I.current) == null ? void 0 : t.call(I, e);
+        },
+        togglePin: (e) => {
+          var d, s;
+          const t = Q.current.find((r) => r.id === e);
+          t && (t.deleted || ((d = t.actions) == null ? void 0 : d.pin) === !1) || (s = F.current) == null || s.call(F, e);
+        },
+        toggleFlag: (e) => {
+          var t;
+          return (t = M.current) == null ? void 0 : t.call(M, e);
+        }
+      }),
+      []
+    );
+    return tt(gt, Ye, c), /* @__PURE__ */ o(
+      "section",
+      {
+        ref: fe,
+        "data-component": "notes-panel",
+        "data-component-id": c,
+        "aria-labelledby": Y ? void 0 : ie,
+        "aria-label": Y,
+        className: ["ds:flex ds:flex-col", _e].filter(Boolean).join(" "),
+        ...Ae,
+        children: [
+          /* @__PURE__ */ n(
+            st,
+            {
+              title: Oe,
+              icon: /* @__PURE__ */ n(ft, { "aria-hidden": "true" }),
+              headingId: Y ? void 0 : ie,
+              sticky: !0,
+              divider: !0
+            }
+          ),
+          /* @__PURE__ */ o("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)] ds:p-[var(--spacing-md)]", children: [
+            m || l !== null ? /* @__PURE__ */ o(
+              "div",
+              {
+                "data-notes-panel-composer": l !== null ? "edit" : "add",
+                className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+                children: [
+                  p === "rich" ? /* @__PURE__ */ n(
+                    at,
+                    {
+                      ref: v,
+                      ariaLabel: le,
+                      placeholder: re,
+                      toolbar: be,
+                      minHeight: "fill",
+                      redactor: Ce,
+                      imageUploadUrl: Pe,
+                      readOnly: u,
+                      onChange: ({ html: e }) => k(e),
+                      onRequestAiDraft: Re,
+                      aiDraftFormat: Te,
+                      aiPrivacyNotice: ke,
+                      onDictate: Ne,
+                      onProofread: Ve,
+                      onAutoFormat: Ee
+                    }
+                  ) : /* @__PURE__ */ n(
+                    it,
+                    {
+                      value: C,
+                      readOnly: u,
+                      onChange: (e) => k(e.target.value),
+                      placeholder: re,
+                      autoResize: !0,
+                      minRows: 2,
+                      maxRows: 6,
+                      "aria-label": le
+                    }
+                  ),
+                  /* @__PURE__ */ o(
+                    "div",
+                    {
+                      className: [
+                        "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]",
+                        se ? "ds:justify-between" : "ds:justify-end"
+                      ].join(" "),
+                      children: [
+                        se ? /* @__PURE__ */ n(
+                          rt,
+                          {
+                            size: "sm",
+                            label: a("notesPanel.clinicalToggle", {
+                              defaultValue: "Clinical note"
+                            }),
+                            checked: B,
+                            onCheckedChange: (e) => O(e === !0),
+                            disabled: u || !_,
+                            disabledReason: _ ? void 0 : we ?? a("notesPanel.clinicalGated", {
+                              defaultValue: "You do not have permission to write clinical notes."
+                            })
+                          }
+                        ) : null,
+                        /* @__PURE__ */ o("span", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+                          l !== null ? /* @__PURE__ */ n(
+                            j,
+                            {
+                              type: "button",
+                              size: "sm",
+                              intent: "ghost",
+                              onClick: D,
+                              disabled: u,
+                              children: a("notesPanel.cancelEdit", { defaultValue: "Cancel" })
+                            }
+                          ) : null,
+                          /* @__PURE__ */ n(
+                            j,
+                            {
+                              type: "button",
+                              size: "sm",
+                              onClick: Ke,
+                              disabled: !De,
+                              loading: u,
+                              children: l !== null ? a("notesPanel.saveEdit", { defaultValue: "Save note" }) : je ?? a("notesPanel.add", { defaultValue: "Add note" })
+                            }
+                          )
+                        ] })
+                      ]
+                    }
+                  ),
+                  ne ? /* @__PURE__ */ n(z, { variant: "error", children: /* @__PURE__ */ n(z.Description, { children: ne }) }) : null
+                ]
+              }
+            ) : null,
+            y === "loading" && V.length === 0 ? (
+              /* Note-shaped placeholders, not a spinner: the reader sees where
+                 the notes will land and how many to expect. The status text is
+                 for assistive tech only; sighted readers get the motion. */
+              /* @__PURE__ */ o(
+                "div",
+                {
+                  "data-notes-panel-loading": "",
+                  "aria-busy": "true",
+                  className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+                  children: [
+                    /* @__PURE__ */ n("span", { role: "status", className: "ds:sr-only", children: a("notesPanel.loading") }),
+                    bt.map((e, t) => /* @__PURE__ */ n(ge, { variant: "elevated", "aria-hidden": "true", children: /* @__PURE__ */ n(ge.Body, { children: /* @__PURE__ */ o("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
+                      /* @__PURE__ */ o("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+                        /* @__PURE__ */ n(
+                          W,
+                          {
+                            variant: "circular",
+                            size: "sm",
+                            stagger: t * 2
+                          }
+                        ),
+                        /* @__PURE__ */ o("div", { className: "ds:flex ds:flex-1 ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+                          /* @__PURE__ */ n(
+                            W,
+                            {
+                              variant: "text",
+                              size: "sm",
+                              stagger: t * 2,
+                              width: "40%"
+                            }
+                          ),
+                          /* @__PURE__ */ n(
+                            W,
+                            {
+                              variant: "text",
+                              size: "sm",
+                              stagger: t * 2,
+                              width: "25%"
+                            }
+                          )
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ n(
+                        W,
+                        {
+                          variant: "text",
+                          size: "sm",
+                          lines: e,
+                          stagger: t * 2 + 1
+                        }
+                      )
+                    ] }) }) }, t))
+                  ]
+                }
+              )
+            ) : y === "error" ? /* @__PURE__ */ o(z, { variant: "error", children: [
+              /* @__PURE__ */ n(z.Description, { children: a("notesPanel.loadError") }),
+              X ? /* @__PURE__ */ n(z.Action, { children: /* @__PURE__ */ n(j, { intent: "secondary", size: "sm", onClick: X, children: a("notesPanel.retry") }) }) : null
+            ] }) : null,
+            y === "loading" && V.length > 0 ? /* @__PURE__ */ n("span", { role: "status", className: "ds:sr-only", children: a("notesPanel.loading") }) : null,
+            V.length > 0 ? /* @__PURE__ */ n(
+              "ul",
+              {
+                ref: Me,
+                "aria-busy": y === "loading" || void 0,
+                className: `ds:m-0 ds:flex ds:list-none ds:flex-col ds:gap-[var(--spacing-sm)] ds:p-0 ${Be}`.trim(),
+                children: V.map(({ actions: e, ...t }, d) => {
+                  const s = b != null && t.id === b, r = t.id, S = r != null && E.isLeaving(r);
+                  return /* @__PURE__ */ o(
+                    "li",
+                    {
+                      ref: s ? J : void 0,
+                      tabIndex: s ? -1 : void 0,
+                      "aria-current": s ? "true" : void 0,
+                      "data-reflow-id": r,
+                      "data-leaving": S ? "" : void 0,
+                      "data-editing": l === r ? "" : void 0,
+                      className: [
+                        ht({
+                          current: s || l === r
+                        }),
+                        yt,
+                        ct,
+                        S ? vt : ""
+                      ].filter(Boolean).join(" "),
+                      children: [
+                        s ? /* @__PURE__ */ n("span", { className: "ds:sr-only", children: a("notesPanel.current", {
+                          defaultValue: "Current note"
+                        }) }) : null,
+                        /* @__PURE__ */ n(
+                          nt,
+                          {
+                            surface: "elevated",
+                            truncate: !s,
+                            headerActions: /* @__PURE__ */ o($e, { children: [
+                              Z ? Z({ ...t, actions: e }) : null,
+                              T && r && !t.deleted && (e == null ? void 0 : e.edit) !== !1 ? /* @__PURE__ */ n(
+                                pe,
+                                {
+                                  icon: /* @__PURE__ */ n(mt, {}),
+                                  intent: "ghost",
+                                  size: "sm",
+                                  "aria-label": a("notesPanel.editNamed", {
+                                    date: oe(t),
+                                    defaultValue: "Edit note · {{date}}"
+                                  }),
+                                  tooltip: a("notesPanel.edit", {
+                                    defaultValue: "Edit note"
+                                  }),
+                                  "aria-pressed": l === r,
+                                  disabled: u,
+                                  "data-notes-panel-edit": "",
+                                  onClick: () => l === r ? D() : qe(t)
+                                }
+                              ) : null,
+                              g && r && !t.deleted ? /* @__PURE__ */ n(
+                                pe,
+                                {
+                                  icon: /* @__PURE__ */ n(pt, {}),
+                                  intent: "ghost",
+                                  size: "sm",
+                                  "aria-label": a("notesPanel.deleteNamed", {
+                                    date: oe(t),
+                                    defaultValue: "Delete note · {{date}}"
+                                  }),
+                                  tooltip: a("notesPanel.delete", {
+                                    defaultValue: "Delete note"
+                                  }),
+                                  onClick: () => We(r)
+                                }
+                              ) : null
+                            ] }),
+                            ...t,
+                            onTogglePin: A && t.id && (e == null ? void 0 : e.pin) !== !1 && !t.deleted ? () => A(t.id) : void 0,
+                            onToggleFlag: H && t.id ? () => H(t.id) : void 0
+                          }
+                        )
+                      ]
+                    },
+                    t.id ?? d
+                  );
+                })
+              }
+            ) : y !== "ready" ? null : Le ?? /* @__PURE__ */ n("p", { className: "ds:m-0 type-body-sm ds:text-[color:var(--muted-foreground)]", children: a("notesPanel.empty", { defaultValue: "No notes yet." }) })
+          ] }),
+          g && G ? /* @__PURE__ */ n(
+            h,
+            {
+              open: K !== null,
+              onOpenChange: (e) => !e && q(null),
+              children: /* @__PURE__ */ o(h.Content, { variant: "alert", size: "sm", children: [
+                /* @__PURE__ */ n(h.Header, { children: /* @__PURE__ */ n(h.Title, { children: a("notesPanel.deleteConfirmTitle", {
+                  defaultValue: "Delete this note?"
+                }) }) }),
+                /* @__PURE__ */ n(h.Body, { children: /* @__PURE__ */ n(h.Description, { children: a("notesPanel.deleteConfirmBody", {
+                  defaultValue: "The note will be removed from the record."
+                }) }) }),
+                /* @__PURE__ */ o(h.Footer, { children: [
+                  /* @__PURE__ */ n(h.Close, { asChild: !0, children: /* @__PURE__ */ n(
+                    j,
+                    {
+                      intent: "secondary",
+                      size: "sm",
+                      onClick: () => q(null),
+                      children: a("notesPanel.deleteConfirmCancel", {
+                        defaultValue: "Cancel"
+                      })
+                    }
+                  ) }),
+                  /* @__PURE__ */ n(
+                    j,
+                    {
+                      intent: "destructive",
+                      size: "sm",
+                      onClick: Ge,
+                      children: a("notesPanel.deleteConfirmAction", {
+                        defaultValue: "Delete"
+                      })
+                    }
+                  )
+                ] })
+              ] })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  Kt as N,
+  he as g
+};
+//# sourceMappingURL=notes-panel-CkbfDDzj.js.map