@devalok/shilp-sutra-karm 0.8.2 → 0.9.0

package/dist/_chunks/task-detail-panel.js

@@ -0,0 +1,1305 @@
+"use client";
+import { jsxs as s, jsx as t, Fragment as ue } from "react/jsx-runtime";
+import * as p from "react";
+import { cn as N } from "@devalok/shilp-sutra/ui/lib/utils";
+import { Sheet as Ve, SheetContent as $e, SheetTitle as je } from "@devalok/shilp-sutra/ui/sheet";
+import { VisuallyHidden as ke } from "@devalok/shilp-sutra/ui/visually-hidden";
+import { Skeleton as P } from "@devalok/shilp-sutra/ui/skeleton";
+import { Progress as Be, Tabs as Fe, TabsList as ze, TabsTrigger as He } from "@devalok/shilp-sutra/ui";
+import { Avatar as _, AvatarImage as V, AvatarFallback as $ } from "@devalok/shilp-sutra/ui/avatar";
+import { Popover as ie, PopoverTrigger as ae, PopoverContent as le } from "@devalok/shilp-sutra/ui/popover";
+import { IconColumns3 as Ye, IconChevronDown as qe, IconCheck as pe, IconUser as Me, IconUsers as Ge, IconX as G, IconPlus as j, IconFlag as he, IconCalendarEvent as xe, IconTag as fe, IconEye as be, IconSquareCheck as Ke, IconSquare as Je, IconListCheck as ge, IconMessage as Ne, IconGitPullRequest as X, IconMessageCircle as ye, IconSend as We, IconUpload as Qe, IconDownload as Xe, IconTrash as Ze, IconPaperclip as Z, IconFile as oe, IconPhoto as Ue, IconFileText as et, IconFileCode as tt, IconFileSpreadsheet as st, IconFileZip as rt, IconActivity as U, IconCircleCheck as nt, IconUserMinus as it, IconUserPlus as at, IconArrowRight as lt, IconEdit as ot } from "@tabler/icons-react";
+import { getInitials as k } from "@devalok/shilp-sutra/composed/lib/string-utils";
+import { MemberPicker as Q } from "@devalok/shilp-sutra/composed/member-picker";
+import { a as ve, P as dt, R as ct } from "./task-constants.js";
+import { EmptyState as B } from "@devalok/shilp-sutra/composed/empty-state";
+import { Badge as mt } from "@devalok/shilp-sutra/ui/badge";
+import { RichTextViewer as ut, RichTextEditor as pt } from "@devalok/shilp-sutra/composed/rich-text-editor";
+import { Dialog as ht, DialogTrigger as xt, DialogContent as ft, DialogHeader as bt, DialogTitle as gt, DialogDescription as Nt, DialogFooter as yt, DialogClose as de } from "@devalok/shilp-sutra/ui/dialog";
+import { Button as ce } from "@devalok/shilp-sutra/ui/button";
+const vt = ["LOW", "MEDIUM", "HIGH", "URGENT"];
+function L({
+  icon: n,
+  label: e,
+  children: b,
+  className: x
+}) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: N(
+        "flex items-center gap-ds-04 py-ds-03",
+        x
+      ),
+      children: [
+        /* @__PURE__ */ s("div", { className: "flex w-[120px] shrink-0 items-center gap-ds-03 text-text-placeholder", children: [
+          /* @__PURE__ */ t(n, { className: "h-ico-sm w-ico-sm", stroke: 1.5 }),
+          /* @__PURE__ */ t("span", { className: "text-ds-sm", children: e })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: b })
+      ]
+    }
+  );
+}
+function wt({ priority: n }) {
+  return /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-02b", children: [
+    /* @__PURE__ */ t("div", { className: N("h-2 w-2 rounded-ds-full", ve[n]) }),
+    /* @__PURE__ */ t("span", { className: "text-ds-md text-text-primary", children: dt[n] || n })
+  ] });
+}
+const we = p.forwardRef(
+  function({
+    task: e,
+    columns: b,
+    members: x,
+    onUpdate: d,
+    onAssign: c,
+    onUnassign: g,
+    className: D,
+    readOnly: f = !1,
+    editableFields: m,
+    renderPriorityIndicator: y,
+    renderDatePicker: v,
+    onConfirmVisibilityChange: w
+  }, l) {
+    const [I, o] = p.useState(""), [i, h] = p.useState(!1), u = e.assignees.map((r) => r.user.id), C = p.useMemo(
+      () => x.map((r) => ({ id: r.id, name: r.name, avatar: r.image ?? void 0 })),
+      [x]
+    ), T = (r) => {
+      d("columnId", r);
+    }, A = (r) => {
+      d("ownerId", r === e.ownerId ? null : r);
+    }, S = (r) => {
+      u.includes(r) ? g(r) : c(r);
+    }, E = (r) => {
+      d("priority", r);
+    }, O = (r) => {
+      d("dueDate", r ? r.toISOString() : null);
+    }, F = () => {
+      const r = I.trim();
+      r && !e.labels.includes(r) && d("labels", [...e.labels, r]), o(""), h(!1);
+    }, K = (r) => {
+      d("labels", e.labels.filter((H) => H !== r));
+    }, J = () => {
+      const r = e.visibility === "INTERNAL" ? "EVERYONE" : "INTERNAL";
+      if (r === "EVERYONE" && w) {
+        w();
+        return;
+      }
+      d("visibility", r);
+    }, z = y || wt;
+    return /* @__PURE__ */ s("div", { ref: l, className: N("space-y-ds-01", D), children: [
+      /* @__PURE__ */ t(L, { icon: Ye, label: "Column", children: f && !(m != null && m.includes("columnId")) ? /* @__PURE__ */ t("span", { className: "px-ds-03 py-ds-02 text-ds-md text-text-primary", children: e.column.name }) : /* @__PURE__ */ s(ie, { children: [
+        /* @__PURE__ */ t(ae, { asChild: !0, children: /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            className: "inline-flex items-center gap-ds-02b rounded-ds-md px-ds-03 py-ds-02 text-ds-md text-text-primary transition-colors hover:bg-field",
+            children: [
+              /* @__PURE__ */ t("span", { children: e.column.name }),
+              /* @__PURE__ */ t(qe, { className: "h-3 w-3 text-text-placeholder" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ t(
+          le,
+          {
+            className: "w-[180px] border-border bg-layer-01 p-ds-02",
+            align: "start",
+            sideOffset: 4,
+            children: b.map((r) => /* @__PURE__ */ s(
+              "button",
+              {
+                type: "button",
+                onClick: () => T(r.id),
+                className: N(
+                  "flex w-full items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-left text-ds-md transition-colors",
+                  "hover:bg-field",
+                  r.id === e.columnId ? "text-interactive" : "text-text-primary"
+                ),
+                children: [
+                  r.name,
+                  r.id === e.columnId && /* @__PURE__ */ t(pe, { className: "ml-auto h-ico-sm w-ico-sm" })
+                ]
+              },
+              r.id
+            ))
+          }
+        )
+      ] }) }),
+      !f && /* @__PURE__ */ t(L, { icon: Me, label: "Owner", children: /* @__PURE__ */ t(
+        Q,
+        {
+          members: C,
+          selectedIds: e.ownerId ? [e.ownerId] : [],
+          onSelect: A,
+          children: /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: "inline-flex items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02 transition-colors hover:bg-field",
+              children: e.owner ? /* @__PURE__ */ s(ue, { children: [
+                /* @__PURE__ */ s(_, { className: "h-ico-md w-ico-md", children: [
+                  e.owner.image && /* @__PURE__ */ t(V, { src: e.owner.image, alt: e.owner.name }),
+                  /* @__PURE__ */ t($, { className: "bg-layer-03 text-ds-xs font-semibold text-text-on-color", children: k(e.owner.name) })
+                ] }),
+                /* @__PURE__ */ t("span", { className: "text-ds-md text-text-primary", children: e.owner.name })
+              ] }) : /* @__PURE__ */ t("span", { className: "text-ds-md text-text-placeholder", children: "No owner" })
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ t(L, { icon: Ge, label: "Assignees", children: /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center gap-ds-02b", children: [
+        e.assignees.map((r) => /* @__PURE__ */ s(
+          "div",
+          {
+            className: "inline-flex items-center gap-ds-02 rounded-ds-full bg-layer-02 py-ds-01 pl-ds-01 pr-ds-03",
+            children: [
+              /* @__PURE__ */ s(_, { className: "h-ico-sm w-ico-sm", children: [
+                r.user.image && /* @__PURE__ */ t(V, { src: r.user.image, alt: r.user.name }),
+                /* @__PURE__ */ t($, { className: "bg-layer-03 text-ds-xs font-semibold text-text-on-color", children: k(r.user.name) })
+              ] }),
+              /* @__PURE__ */ t("span", { className: "text-ds-sm text-text-secondary", children: r.user.name.split(" ")[0] }),
+              !f && /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => g(r.user.id),
+                  className: "ml-ds-01 rounded-ds-full p-ds-01 transition-colors hover:bg-field",
+                  "aria-label": `Remove ${r.user.name}`,
+                  children: /* @__PURE__ */ t(G, { className: "h-ds-03 w-ds-03 text-text-placeholder" })
+                }
+              )
+            ]
+          },
+          r.user.id
+        )),
+        !f && /* @__PURE__ */ t(
+          Q,
+          {
+            members: C,
+            selectedIds: u,
+            onSelect: S,
+            multiple: !0,
+            children: /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded-ds-full border border-dashed border-border-subtle transition-colors hover:bg-field hover:border-text-placeholder",
+                "aria-label": "Add assignee",
+                children: /* @__PURE__ */ t(j, { className: "h-3 w-3 text-text-placeholder" })
+              }
+            )
+          }
+        ),
+        f && e.assignees.length === 0 && /* @__PURE__ */ t("span", { className: "text-ds-md text-text-placeholder", children: "None" })
+      ] }) }),
+      /* @__PURE__ */ t(L, { icon: he, label: "Priority", children: /* @__PURE__ */ s(ie, { children: [
+        /* @__PURE__ */ t(ae, { asChild: !0, children: /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "rounded-ds-md px-ds-03 py-ds-02 transition-colors hover:bg-field",
+            children: /* @__PURE__ */ t(z, { priority: e.priority })
+          }
+        ) }),
+        /* @__PURE__ */ t(
+          le,
+          {
+            className: "w-[160px] border-border bg-layer-01 p-ds-02",
+            align: "start",
+            sideOffset: 4,
+            children: vt.map((r) => /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: () => E(r),
+                className: N(
+                  "flex w-full items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b transition-colors",
+                  "hover:bg-field",
+                  r === e.priority && "bg-field"
+                ),
+                children: /* @__PURE__ */ t(z, { priority: r })
+              },
+              r
+            ))
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ t(L, { icon: xe, label: "Due Date", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-02", children: [
+        v ? v({
+          value: e.dueDate ? new Date(e.dueDate) : null,
+          onChange: O,
+          placeholder: "No due date",
+          className: "h-ds-xs-plus border-none bg-transparent px-ds-03 text-ds-md hover:bg-field"
+        }) : /* @__PURE__ */ t(
+          "input",
+          {
+            type: "date",
+            value: e.dueDate ? new Date(e.dueDate).toISOString().split("T")[0] : "",
+            onChange: (r) => O(r.target.value ? new Date(r.target.value) : null),
+            "aria-label": "Due date",
+            className: "h-ds-xs-plus border-none bg-transparent px-ds-03 text-ds-md text-text-primary outline-none hover:bg-field rounded-ds-md"
+          }
+        ),
+        e.dueDate && /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => O(null),
+            className: "rounded-ds-md p-ds-02 transition-colors hover:bg-field",
+            "aria-label": "Clear due date",
+            children: /* @__PURE__ */ t(G, { className: "h-3 w-3 text-text-placeholder" })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ t(L, { icon: fe, label: "Labels", children: /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center gap-ds-02b", children: [
+        e.labels.map((r) => /* @__PURE__ */ s(
+          "span",
+          {
+            className: "inline-flex items-center gap-ds-02 rounded-ds-full bg-interactive/10 px-ds-03 py-ds-01 text-ds-sm font-medium text-interactive",
+            children: [
+              r,
+              !f && /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => K(r),
+                  className: "rounded-ds-full p-ds-01 transition-colors hover:bg-field",
+                  "aria-label": `Remove label ${r}`,
+                  children: /* @__PURE__ */ t(G, { className: "h-ds-03 w-ds-03" })
+                }
+              )
+            ]
+          },
+          r
+        )),
+        !f && (i ? /* @__PURE__ */ t("div", { className: "inline-flex items-center gap-ds-02", children: /* @__PURE__ */ t(
+          "input",
+          {
+            type: "text",
+            value: I,
+            onChange: (r) => o(r.target.value),
+            "aria-label": "New label name",
+            onKeyDown: (r) => {
+              r.key === "Enter" && F(), r.key === "Escape" && (h(!1), o(""));
+            },
+            onBlur: F,
+            placeholder: "Label name",
+            className: "h-5 w-20 rounded border border-border bg-transparent px-ds-02b text-ds-sm text-text-primary outline-none placeholder:text-text-placeholder focus:border-border-subtle",
+            autoFocus: !0
+          }
+        ) }) : /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => h(!0),
+            className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded-ds-full border border-dashed border-border-subtle transition-colors hover:bg-field hover:border-text-placeholder",
+            "aria-label": "Add label",
+            children: /* @__PURE__ */ t(j, { className: "h-3 w-3 text-text-placeholder" })
+          }
+        )),
+        f && e.labels.length === 0 && /* @__PURE__ */ t("span", { className: "text-ds-md text-text-placeholder", children: "None" })
+      ] }) }),
+      !f && /* @__PURE__ */ t(L, { icon: be, label: "Visibility", children: /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          onClick: J,
+          className: N(
+            "inline-flex items-center gap-ds-02b rounded-ds-full px-ds-03 py-ds-01 text-ds-sm font-semibold tracking-wide transition-colors",
+            e.visibility === "EVERYONE" ? "bg-success-surface text-text-success" : "bg-layer-02 text-text-tertiary"
+          ),
+          children: [
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: N(
+                  "h-ds-02b w-ds-02b rounded-ds-full",
+                  e.visibility === "EVERYONE" ? "bg-success" : "bg-icon-disabled"
+                )
+              }
+            ),
+            e.visibility === "EVERYONE" ? "Everyone" : "Internal"
+          ]
+        }
+      ) })
+    ] });
+  }
+);
+we.displayName = "TaskProperties";
+const Ie = p.forwardRef(
+  function({
+    subtasks: e,
+    terminalColumnId: b,
+    onCreateSubtask: x,
+    onToggleSubtask: d,
+    onClickSubtask: c,
+    className: g,
+    readOnly: D = !1
+  }, f) {
+    const [m, y] = p.useState(""), [v, w] = p.useState(!1), l = p.useRef(null), I = e.filter(
+      (u) => {
+        var C;
+        return ((C = u.column) == null ? void 0 : C.isTerminal) || u.columnId === b;
+      }
+    ).length, o = e.length, i = () => {
+      const u = m.trim();
+      u && (x(u), y(""));
+    }, h = (u) => {
+      u.key === "Enter" && (u.preventDefault(), i()), u.key === "Escape" && (w(!1), y(""));
+    };
+    return p.useEffect(() => {
+      v && l.current && l.current.focus();
+    }, [v]), /* @__PURE__ */ s("div", { ref: f, className: N("flex flex-col", g), children: [
+      o > 0 && /* @__PURE__ */ s("div", { className: "mb-ds-05 flex items-center gap-ds-04", children: [
+        /* @__PURE__ */ t(Be, { value: o > 0 ? I / o * 100 : 0, className: "h-ds-02b" }),
+        /* @__PURE__ */ s("span", { className: "shrink-0 text-ds-sm font-medium text-text-placeholder", children: [
+          I,
+          "/",
+          o
+        ] })
+      ] }),
+      e.length > 0 ? /* @__PURE__ */ t("div", { className: "space-y-ds-01", children: e.map((u) => {
+        var A, S;
+        const C = ((A = u.column) == null ? void 0 : A.isTerminal) || u.columnId === b, T = (S = u.assignees[0]) == null ? void 0 : S.user;
+        return /* @__PURE__ */ s(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            className: N(
+              "group flex items-center gap-ds-03 rounded-ds-lg px-ds-03 py-ds-02b transition-colors",
+              "hover:bg-field cursor-pointer"
+            ),
+            onClick: () => c == null ? void 0 : c(u.id),
+            onKeyDown: (E) => {
+              (E.key === "Enter" || E.key === " ") && (E.preventDefault(), c == null || c(u.id));
+            },
+            children: [
+              /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: (E) => {
+                    E.stopPropagation(), D || d(u.id, !C);
+                  },
+                  className: N(
+                    "shrink-0 rounded p-ds-01 transition-colors",
+                    D ? "cursor-default" : "hover:bg-layer-02"
+                  ),
+                  children: C ? /* @__PURE__ */ t(Ke, { className: "h-ico-sm w-ico-sm text-interactive", stroke: 1.5 }) : /* @__PURE__ */ t(Je, { className: "h-ico-sm w-ico-sm text-text-placeholder", stroke: 1.5 })
+                }
+              ),
+              /* @__PURE__ */ t(
+                "div",
+                {
+                  className: N(
+                    "h-2 w-2 shrink-0 rounded-ds-full",
+                    ve[u.priority]
+                  )
+                }
+              ),
+              /* @__PURE__ */ t(
+                "span",
+                {
+                  className: N(
+                    "flex-1 truncate text-ds-md",
+                    C ? "text-text-placeholder line-through" : "text-text-primary"
+                  ),
+                  children: u.title
+                }
+              ),
+              T && /* @__PURE__ */ s(_, { className: "h-ico-md w-ico-md shrink-0", children: [
+                T.image && /* @__PURE__ */ t(V, { src: T.image, alt: T.name }),
+                /* @__PURE__ */ t($, { className: "bg-layer-03 text-ds-xs font-semibold text-text-on-color", children: k(T.name) })
+              ] })
+            ]
+          },
+          u.id
+        );
+      }) }) : !v && /* @__PURE__ */ t(
+        B,
+        {
+          icon: /* @__PURE__ */ t(ge, {}),
+          title: "No subtasks",
+          description: "Break this task into smaller pieces",
+          compact: !0
+        }
+      ),
+      !D && (v ? /* @__PURE__ */ s("div", { className: "mt-ds-03 flex items-center gap-ds-03 rounded-ds-lg border border-border bg-layer-01 shadow-01 px-ds-04 py-ds-03", children: [
+        /* @__PURE__ */ t(
+          "input",
+          {
+            ref: l,
+            type: "text",
+            value: m,
+            onChange: (u) => y(u.target.value),
+            onKeyDown: h,
+            onBlur: () => {
+              m.trim() || w(!1);
+            },
+            placeholder: "Subtask title...",
+            className: "flex-1 bg-transparent text-ds-md text-text-primary placeholder:text-text-placeholder outline-none"
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: i,
+            disabled: !m.trim(),
+            className: "inline-flex h-6 items-center gap-ds-02 rounded-ds-md bg-interactive px-ds-03 text-ds-sm font-semibold text-text-on-color transition-colors hover:bg-interactive-hover disabled:opacity-[0.38]",
+            children: "Add"
+          }
+        )
+      ] }) : /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          onClick: () => w(!0),
+          className: "mt-ds-03 inline-flex items-center gap-ds-02b rounded-ds-lg px-ds-03 py-ds-02b text-ds-md text-text-placeholder transition-colors hover:bg-field hover:text-text-secondary",
+          children: [
+            /* @__PURE__ */ t(j, { className: "h-ico-sm w-ico-sm", stroke: 1.5 }),
+            "Add subtask"
+          ]
+        }
+      ))
+    ] });
+  }
+);
+Ie.displayName = "SubtasksTab";
+function It(n) {
+  return new Date(n).toLocaleDateString("en-IN", {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+const Dt = [
+  { status: "APPROVED", label: "Approve", icon: pe },
+  { status: "CHANGES_REQUESTED", label: "Request Changes", icon: Ne },
+  { status: "REJECTED", label: "Reject", icon: G }
+], De = p.forwardRef(
+  function({
+    reviews: e,
+    members: b,
+    onRequestReview: x,
+    onUpdateStatus: d,
+    className: c
+  }, g) {
+    const [D, f] = p.useState({}), [m, y] = p.useState(null), v = p.useMemo(
+      () => b.map((l) => ({ id: l.id, name: l.name, avatar: l.image ?? void 0 })),
+      [b]
+    ), w = (l, I) => {
+      d(l, I, D[l]), f((o) => {
+        const i = { ...o };
+        return delete i[l], i;
+      }), y(null);
+    };
+    return /* @__PURE__ */ s("div", { ref: g, className: N("flex flex-col", c), children: [
+      e.length > 0 ? /* @__PURE__ */ t("div", { className: "space-y-ds-04", children: e.map((l) => {
+        const I = ct[l.status], o = m === l.id;
+        return /* @__PURE__ */ s(
+          "div",
+          {
+            className: "rounded-ds-lg border border-border bg-layer-01 shadow-01 p-ds-04",
+            children: [
+              /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
+                /* @__PURE__ */ s(_, { className: "h-ds-xs w-ds-xs shrink-0", children: [
+                  l.reviewer.image && /* @__PURE__ */ t(
+                    V,
+                    {
+                      src: l.reviewer.image,
+                      alt: l.reviewer.name
+                    }
+                  ),
+                  /* @__PURE__ */ t($, { className: "bg-layer-03 text-ds-xs font-semibold text-text-on-color", children: k(l.reviewer.name) })
+                ] }),
+                /* @__PURE__ */ s("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ t("span", { className: "text-ds-md font-medium text-text-primary", children: l.reviewer.name }),
+                  /* @__PURE__ */ s("span", { className: "ml-ds-03 text-ds-sm text-text-placeholder", children: [
+                    "requested by ",
+                    l.requestedBy.name
+                  ] })
+                ] }),
+                /* @__PURE__ */ t(
+                  mt,
+                  {
+                    color: I.color,
+                    children: I.label
+                  }
+                )
+              ] }),
+              l.feedback && /* @__PURE__ */ t("div", { className: "mt-ds-03 rounded-ds-md bg-layer-02 px-ds-04 py-ds-03", children: /* @__PURE__ */ t("p", { className: "text-ds-sm text-text-secondary", children: l.feedback }) }),
+              l.status === "PENDING" && /* @__PURE__ */ t("div", { className: "mt-ds-03", children: o ? /* @__PURE__ */ s("div", { className: "space-y-ds-03", children: [
+                /* @__PURE__ */ t(
+                  "textarea",
+                  {
+                    value: D[l.id] || "",
+                    onChange: (i) => f((h) => ({
+                      ...h,
+                      [l.id]: i.target.value
+                    })),
+                    placeholder: "Add feedback (optional)...",
+                    rows: 2,
+                    className: "w-full resize-none rounded-ds-md border border-border bg-transparent px-ds-03 py-ds-03 text-ds-sm text-text-primary placeholder:text-text-placeholder outline-none focus:border-border-subtle"
+                  }
+                ),
+                /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-02b", children: [
+                  Dt.map((i) => {
+                    const h = i.icon;
+                    return /* @__PURE__ */ s(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => w(l.id, i.status),
+                        className: N(
+                          "inline-flex items-center gap-ds-02 rounded-ds-md px-ds-03 py-ds-02 text-ds-sm font-semibold transition-colors",
+                          i.status === "APPROVED" && "bg-success-surface text-text-success hover:opacity-[0.9]",
+                          i.status === "CHANGES_REQUESTED" && "bg-warning-surface text-text-warning hover:opacity-[0.9]",
+                          i.status === "REJECTED" && "bg-error-surface text-text-error hover:opacity-[0.9]"
+                        ),
+                        children: [
+                          /* @__PURE__ */ t(h, { className: "h-3 w-3", stroke: 2 }),
+                          i.label
+                        ]
+                      },
+                      i.status
+                    );
+                  }),
+                  /* @__PURE__ */ t(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => y(null),
+                      className: "ml-auto text-ds-sm text-text-placeholder hover:text-text-secondary",
+                      children: "Cancel"
+                    }
+                  )
+                ] })
+              ] }) : /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => y(l.id),
+                  className: "text-ds-sm font-medium text-interactive transition-colors hover:underline",
+                  children: "Respond"
+                }
+              ) }),
+              /* @__PURE__ */ t("p", { className: "mt-ds-03 text-ds-xs text-text-placeholder", children: It(l.createdAt) })
+            ]
+          },
+          l.id
+        );
+      }) }) : /* @__PURE__ */ t(
+        B,
+        {
+          icon: /* @__PURE__ */ t(X, {}),
+          title: "No reviews yet",
+          description: "Request a review from a team member",
+          compact: !0
+        }
+      ),
+      /* @__PURE__ */ t(
+        Q,
+        {
+          members: v,
+          selectedIds: [],
+          onSelect: (l) => x(l),
+          children: /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              className: "mt-ds-04 inline-flex items-center gap-ds-02b rounded-ds-lg px-ds-03 py-ds-02b text-ds-md text-text-placeholder transition-colors hover:bg-field hover:text-text-secondary",
+              children: [
+                /* @__PURE__ */ t(j, { className: "h-ico-sm w-ico-sm", stroke: 1.5 }),
+                "Request Review"
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+De.displayName = "ReviewTab";
+function Ct(n) {
+  const e = new Date(n), x = (/* @__PURE__ */ new Date()).getTime() - e.getTime(), d = Math.floor(x / 6e4), c = Math.floor(d / 60), g = Math.floor(c / 24);
+  return d < 1 ? "Just now" : d < 60 ? `${d}m ago` : c < 24 ? `${c}h ago` : g < 7 ? `${g}d ago` : e.toLocaleDateString("en-IN", {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+function Tt(n) {
+  return n.authorType === "INTERNAL" && n.internalAuthor ? n.internalAuthor : n.authorType === "CLIENT" && n.clientAuthor ? {
+    id: n.clientAuthor.id,
+    name: n.clientAuthor.name,
+    email: n.clientAuthor.email,
+    image: null
+  } : { id: n.authorId, name: "Unknown", image: null };
+}
+function Et(n) {
+  return n.replace(/<[^>]*>/g, "");
+}
+const Ce = p.forwardRef(
+  function({
+    comments: e,
+    taskVisibility: b,
+    onPostComment: x,
+    className: d,
+    clientMode: c = !1,
+    richText: g = !1,
+    renderEditor: D,
+    renderViewer: f
+  }, m) {
+    const [y, v] = p.useState(""), w = p.useRef(null), l = D ?? (g ? (i) => /* @__PURE__ */ t(
+      pt,
+      {
+        content: i.content,
+        onChange: i.onChange,
+        placeholder: i.placeholder,
+        editable: !0,
+        className: "min-h-[80px]"
+      }
+    ) : void 0), I = f ?? (g ? (i) => /* @__PURE__ */ t(ut, { content: i.content, className: i.className }) : void 0), o = () => {
+      const i = y.trim();
+      i.replace(/<[^>]*>/g, "").trim() && (x(i, c ? "CLIENT" : "INTERNAL"), v(""));
+    };
+    return p.useEffect(() => {
+      w.current && (w.current.scrollTop = w.current.scrollHeight);
+    }, [e.length]), /* @__PURE__ */ s("div", { ref: m, className: N("flex flex-col", d), children: [
+      e.length > 0 ? /* @__PURE__ */ t(
+        "div",
+        {
+          ref: w,
+          className: "flex-1 space-y-ds-05 overflow-y-auto",
+          children: e.map((i) => {
+            const h = Tt(i), u = i.authorType === "CLIENT";
+            return /* @__PURE__ */ s("div", { className: "flex gap-ds-03", children: [
+              /* @__PURE__ */ s(_, { className: "h-ds-xs-plus w-ds-xs-plus shrink-0 mt-ds-01", children: [
+                h.image && /* @__PURE__ */ t(V, { src: h.image, alt: h.name }),
+                /* @__PURE__ */ t(
+                  $,
+                  {
+                    className: N(
+                      "text-ds-xs font-semibold",
+                      /* avatar initials — below scale, leave as-is */
+                      u ? "bg-warning-surface text-text-warning" : "bg-layer-03 text-text-on-color"
+                    ),
+                    children: k(h.name)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ s("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ s("div", { className: "flex items-baseline gap-ds-03", children: [
+                  /* @__PURE__ */ t("span", { className: "text-ds-md font-medium text-text-primary", children: h.name }),
+                  c ? !u && /* @__PURE__ */ t("span", { className: "rounded bg-layer-03 px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider text-text-on-color", children: "Team" }) : u && /* @__PURE__ */ t("span", { className: "rounded bg-warning-surface px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider text-text-warning", children: "Client" }),
+                  /* @__PURE__ */ t("span", { className: "text-ds-sm text-text-placeholder", children: Ct(i.createdAt) })
+                ] }),
+                /* @__PURE__ */ t("div", { className: "mt-ds-02", children: I ? I({
+                  content: i.content,
+                  className: "[&_.ProseMirror]:!min-h-0 [&_.ProseMirror]:!p-0"
+                }) : /* @__PURE__ */ t("p", { className: "text-ds-md text-text-secondary whitespace-pre-wrap", children: Et(i.content) }) })
+              ] })
+            ] }, i.id);
+          })
+        }
+      ) : /* @__PURE__ */ t(
+        B,
+        {
+          icon: /* @__PURE__ */ t(ye, {}),
+          title: "No comments yet",
+          description: "Start a conversation about this task",
+          compact: !0
+        }
+      ),
+      /* @__PURE__ */ s("div", { className: "mt-ds-05 space-y-ds-03", children: [
+        b === "EVERYONE" && !c && /* @__PURE__ */ t("p", { className: "text-ds-xs text-text-warning", children: "This task is visible to clients. Comments may be seen by external users." }),
+        l ? l({
+          content: y,
+          onChange: v,
+          placeholder: "Write a comment..."
+        }) : /* @__PURE__ */ t(
+          "textarea",
+          {
+            value: y,
+            onChange: (i) => v(i.target.value),
+            placeholder: "Write a comment...",
+            rows: 3,
+            className: "w-full resize-none rounded-ds-md border border-border bg-transparent px-ds-04 py-ds-03 text-ds-md text-text-primary placeholder:text-text-placeholder outline-none focus:border-border-subtle"
+          }
+        ),
+        /* @__PURE__ */ t("div", { className: "flex justify-end", children: /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            onClick: o,
+            disabled: !y.replace(/<[^>]*>/g, "").trim(),
+            className: "inline-flex items-center gap-ds-02b rounded-ds-lg bg-interactive px-ds-04 py-ds-02b text-ds-sm font-semibold text-text-on-color transition-colors hover:bg-interactive-hover disabled:opacity-[0.38] disabled:cursor-not-allowed",
+            children: [
+              /* @__PURE__ */ t(We, { className: "h-ico-sm w-ico-sm", stroke: 2 }),
+              "Comment"
+            ]
+          }
+        ) })
+      ] })
+    ] });
+  }
+);
+Ce.displayName = "ConversationTab";
+function Rt(n) {
+  if (!n) return oe;
+  const e = n.toLowerCase();
+  return ["jpg", "jpeg", "png", "gif", "svg", "webp", "bmp"].includes(e) ? Ue : ["pdf", "doc", "docx", "txt", "rtf"].includes(e) ? et : ["js", "ts", "jsx", "tsx", "py", "rb", "go", "rs", "html", "css", "json"].includes(e) ? tt : ["xls", "xlsx", "csv"].includes(e) ? st : ["zip", "tar", "gz", "rar", "7z"].includes(e) ? rt : oe;
+}
+function At(n) {
+  return new Date(n).toLocaleDateString("en-IN", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+const Te = p.forwardRef(
+  function({
+    files: e,
+    onUpload: b,
+    onDelete: x,
+    isUploading: d = !1,
+    className: c,
+    readOnly: g = !1
+  }, D) {
+    const f = p.useRef(null), [m, y] = p.useState(!1), v = (o) => {
+      var h;
+      const i = (h = o.target.files) == null ? void 0 : h[0];
+      i && b(i), f.current && (f.current.value = "");
+    }, w = (o) => {
+      var h;
+      o.preventDefault(), y(!1);
+      const i = (h = o.dataTransfer.files) == null ? void 0 : h[0];
+      i && b(i);
+    }, l = (o) => {
+      o.preventDefault(), y(!0);
+    }, I = () => {
+      y(!1);
+    };
+    return /* @__PURE__ */ s("div", { ref: D, className: N("flex flex-col", c), children: [
+      !g && /* @__PURE__ */ s(
+        "div",
+        {
+          role: "region",
+          "aria-label": "File upload drop zone",
+          onDrop: w,
+          onDragOver: l,
+          onDragLeave: I,
+          className: N(
+            "rounded-ds-lg border-2 border-dashed transition-colors",
+            m ? "border-interactive bg-interactive/5" : "border-border"
+          ),
+          children: [
+            /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-ds-03 py-ds-06", children: [
+              /* @__PURE__ */ t("div", { className: "flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-lg bg-layer-02", children: /* @__PURE__ */ t(
+                Qe,
+                {
+                  className: "h-ico-sm w-ico-sm text-text-placeholder",
+                  stroke: 1.5
+                }
+              ) }),
+              /* @__PURE__ */ s("div", { className: "text-center", children: [
+                /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      var o;
+                      return (o = f.current) == null ? void 0 : o.click();
+                    },
+                    disabled: d,
+                    className: "text-ds-md font-medium text-interactive transition-colors hover:underline disabled:opacity-[0.38]",
+                    children: d ? "Uploading..." : "Click to upload"
+                  }
+                ),
+                /* @__PURE__ */ s("span", { className: "text-ds-md text-text-placeholder", children: [
+                  " ",
+                  "or drag and drop"
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                ref: f,
+                type: "file",
+                onChange: v,
+                className: "hidden"
+              }
+            )
+          ]
+        }
+      ),
+      e.length > 0 ? /* @__PURE__ */ t("div", { className: "mt-ds-05 space-y-ds-02", children: e.map((o) => {
+        const i = Rt(o.fileType);
+        return /* @__PURE__ */ s(
+          "div",
+          {
+            className: "group flex items-center gap-ds-04 rounded-ds-lg px-ds-03 py-ds-03 transition-colors hover:bg-field",
+            children: [
+              /* @__PURE__ */ t("div", { className: "flex h-ds-sm w-ds-sm shrink-0 items-center justify-center rounded-ds-lg bg-layer-02", children: /* @__PURE__ */ t(
+                i,
+                {
+                  className: "h-ico-sm w-ico-sm text-text-tertiary",
+                  stroke: 1.5
+                }
+              ) }),
+              /* @__PURE__ */ s("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ t("p", { className: "truncate text-ds-md font-medium text-text-primary", children: o.title }),
+                /* @__PURE__ */ s("p", { className: "text-ds-sm text-text-placeholder", children: [
+                  At(o.createdAt),
+                  /* @__PURE__ */ t("span", { className: "mx-ds-02b", children: "by" }),
+                  o.uploadedBy.name
+                ] })
+              ] }),
+              /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-02 opacity-0 transition-opacity group-hover:opacity-100", children: [
+                o.downloadUrl && /* @__PURE__ */ t(
+                  "a",
+                  {
+                    href: /^https?:\/\//.test(o.downloadUrl) ? o.downloadUrl : "#",
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md transition-colors hover:bg-layer-02",
+                    title: "Download",
+                    children: /* @__PURE__ */ t(Xe, { className: "h-ico-sm w-ico-sm text-text-tertiary" })
+                  }
+                ),
+                !g && /* @__PURE__ */ s(ht, { children: [
+                  /* @__PURE__ */ t(xt, { asChild: !0, children: /* @__PURE__ */ t(
+                    "button",
+                    {
+                      type: "button",
+                      className: "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md transition-colors hover:bg-error-surface",
+                      title: "Delete",
+                      children: /* @__PURE__ */ t(Ze, { className: "h-ico-sm w-ico-sm text-text-error" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ s(ft, { children: [
+                    /* @__PURE__ */ s(bt, { children: [
+                      /* @__PURE__ */ t(gt, { children: "Delete file?" }),
+                      /* @__PURE__ */ s(Nt, { children: [
+                        '"',
+                        o.title,
+                        '" will be permanently deleted. This cannot be undone.'
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ s(yt, { children: [
+                      /* @__PURE__ */ t(de, { asChild: !0, children: /* @__PURE__ */ t(ce, { variant: "outline", size: "sm", children: "Cancel" }) }),
+                      /* @__PURE__ */ t(de, { asChild: !0, children: /* @__PURE__ */ t(
+                        ce,
+                        {
+                          variant: "solid",
+                          color: "error",
+                          size: "sm",
+                          onClick: () => x(o.id),
+                          children: "Delete"
+                        }
+                      ) })
+                    ] })
+                  ] })
+                ] })
+              ] })
+            ]
+          },
+          o.id
+        );
+      }) }) : /* @__PURE__ */ t("div", { className: "mt-ds-03", children: /* @__PURE__ */ t(
+        B,
+        {
+          icon: /* @__PURE__ */ t(Z, {}),
+          title: "No files attached",
+          description: "Upload files to share with your team",
+          compact: !0
+        }
+      ) })
+    ] });
+  }
+);
+Te.displayName = "FilesTab";
+const St = {
+  "task.created": {
+    icon: j,
+    color: "text-success-text",
+    dotColor: "bg-success",
+    getDescription: () => "created this task"
+  },
+  "task.updated": {
+    icon: ot,
+    color: "text-category-slate-text",
+    dotColor: "bg-category-slate",
+    getDescription: (n) => {
+      const e = n.metadata;
+      return (e == null ? void 0 : e.field) === "title" ? "updated the title" : (e == null ? void 0 : e.field) === "description" ? "updated the description" : (e == null ? void 0 : e.field) === "priority" ? `changed priority to ${(e == null ? void 0 : e.newValue) || "unknown"}` : (e == null ? void 0 : e.field) === "dueDate" ? "updated the due date" : (e == null ? void 0 : e.field) === "labels" ? "updated labels" : "updated this task";
+    }
+  },
+  "task.moved": {
+    icon: lt,
+    color: "text-warning-text",
+    dotColor: "bg-warning",
+    getDescription: (n) => {
+      const e = n.metadata, b = (e == null ? void 0 : e.fromColumn) || "unknown", x = (e == null ? void 0 : e.toColumn) || "unknown";
+      return `moved from ${b} to ${x}`;
+    }
+  },
+  "task.assigned": {
+    icon: at,
+    color: "text-category-cyan-text",
+    dotColor: "bg-category-cyan",
+    getDescription: (n) => {
+      const e = n.metadata;
+      return `assigned ${(e == null ? void 0 : e.assigneeName) || "a user"}`;
+    }
+  },
+  "task.unassigned": {
+    icon: it,
+    color: "text-text-secondary",
+    dotColor: "bg-icon-disabled",
+    getDescription: (n) => {
+      const e = n.metadata;
+      return `removed ${(e == null ? void 0 : e.assigneeName) || "a user"}`;
+    }
+  },
+  "task.commented": {
+    icon: Ne,
+    color: "text-interactive",
+    dotColor: "bg-interactive",
+    getDescription: () => "added a comment"
+  },
+  "task.file_uploaded": {
+    icon: Z,
+    color: "text-category-indigo-text",
+    dotColor: "bg-category-indigo",
+    getDescription: (n) => {
+      const e = n.metadata;
+      return `uploaded ${(e == null ? void 0 : e.fileName) || "a file"}`;
+    }
+  },
+  "task.review_requested": {
+    icon: X,
+    color: "text-warning-text",
+    dotColor: "bg-warning",
+    getDescription: (n) => {
+      const e = n.metadata;
+      return `requested review from ${(e == null ? void 0 : e.reviewerName) || "a reviewer"}`;
+    }
+  },
+  "task.review_completed": {
+    icon: nt,
+    color: "text-success-text",
+    dotColor: "bg-success",
+    getDescription: (n) => {
+      const e = n.metadata;
+      return `${(e == null ? void 0 : e.status) || "reviewed"} the task`;
+    }
+  },
+  "task.visibility_changed": {
+    icon: be,
+    color: "text-text-tertiary",
+    dotColor: "bg-icon-secondary",
+    getDescription: (n) => {
+      const e = n.metadata;
+      return `changed visibility to ${(e == null ? void 0 : e.visibility) || "unknown"}`;
+    }
+  },
+  "task.priority_changed": {
+    icon: he,
+    color: "text-error-text",
+    dotColor: "bg-error",
+    getDescription: (n) => {
+      const e = n.metadata;
+      return `changed priority to ${(e == null ? void 0 : e.priority) || "unknown"}`;
+    }
+  },
+  "task.labels_changed": {
+    icon: fe,
+    color: "text-category-amber-text",
+    dotColor: "bg-category-amber",
+    getDescription: () => "updated labels"
+  },
+  "task.due_date_changed": {
+    icon: xe,
+    color: "text-warning-text",
+    dotColor: "bg-warning",
+    getDescription: (n) => {
+      const e = n.metadata;
+      return e != null && e.dueDate ? `set due date to ${e.dueDate}` : "updated the due date";
+    }
+  }
+}, Pt = {
+  icon: U,
+  color: "text-text-placeholder",
+  dotColor: "bg-icon-disabled",
+  getDescription: (n) => n.action
+};
+function Lt(n) {
+  const e = new Date(n), x = (/* @__PURE__ */ new Date()).getTime() - e.getTime(), d = Math.floor(x / 6e4), c = Math.floor(d / 60), g = Math.floor(c / 24);
+  return d < 1 ? "Just now" : d < 60 ? `${d}m ago` : c < 24 ? `${c}h ago` : g < 7 ? `${g}d ago` : e.toLocaleDateString("en-IN", {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  });
+}
+function Ot(n) {
+  const e = n.metadata;
+  return e != null && e.actorName ? e.actorName : n.actorType === "SYSTEM" ? "System" : n.actorType === "AGENT" ? "AI Agent" : "Someone";
+}
+const Ee = p.forwardRef(
+  function({ activities: e, className: b }, x) {
+    return e.length === 0 ? /* @__PURE__ */ t(
+      B,
+      {
+        ref: x,
+        icon: /* @__PURE__ */ t(U, {}),
+        title: "No activity yet",
+        description: "Actions on this task will appear here",
+        compact: !0,
+        className: b
+      }
+    ) : /* @__PURE__ */ s("div", { ref: x, className: N("relative", b), children: [
+      /* @__PURE__ */ t("div", { className: "absolute left-[11px] top-2 bottom-2 w-px bg-border" }),
+      /* @__PURE__ */ t("div", { className: "space-y-ds-05", children: e.map((d) => {
+        const c = St[d.action] || Pt, g = c.icon, D = Ot(d), f = c.getDescription(d);
+        return /* @__PURE__ */ s("div", { className: "relative flex gap-ds-04 pl-0", children: [
+          /* @__PURE__ */ t("div", { className: "relative z-raised flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-ds-full bg-layer-01", children: /* @__PURE__ */ t(
+            "div",
+            {
+              className: N(
+                "flex h-ico-md w-ico-md items-center justify-center rounded-ds-full bg-layer-02"
+              ),
+              children: /* @__PURE__ */ t(
+                g,
+                {
+                  className: N("h-3 w-3", c.color),
+                  stroke: 2
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ s("div", { className: "flex-1 min-w-0 pt-ds-01", children: [
+            /* @__PURE__ */ s("p", { className: "text-ds-sm", children: [
+              /* @__PURE__ */ t("span", { className: "font-medium text-text-primary", children: D }),
+              /* @__PURE__ */ s("span", { className: "text-text-tertiary", children: [
+                " ",
+                f
+              ] })
+            ] }),
+            /* @__PURE__ */ t("p", { className: "mt-ds-01 text-ds-xs text-text-placeholder", children: Lt(d.timestamp) })
+          ] })
+        ] }, d.id);
+      }) })
+    ] });
+  }
+);
+Ee.displayName = "ActivityTab";
+const me = [
+  { id: "subtasks", label: "Subtasks", icon: ge },
+  { id: "review", label: "Review", icon: X },
+  { id: "conversation", label: "Conversation", icon: ye },
+  { id: "files", label: "Files", icon: Z },
+  { id: "activity", label: "Activity", icon: U }
+];
+function _t() {
+  return /* @__PURE__ */ s("div", { className: "space-y-ds-06 p-ds-06", children: [
+    /* @__PURE__ */ t(P, { className: "h-ds-xs-plus w-3/4 bg-field" }),
+    /* @__PURE__ */ t("div", { className: "space-y-ds-04", children: Array.from({ length: 6 }).map((n, e) => /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-04", children: [
+      /* @__PURE__ */ t(P, { className: "h-[16px] w-[120px] bg-field" }),
+      /* @__PURE__ */ t(P, { className: "h-[16px] flex-1 bg-field" })
+    ] }, e)) }),
+    /* @__PURE__ */ t("div", { className: "flex gap-ds-05 border-b border-border pb-ds-03", children: Array.from({ length: 5 }).map((n, e) => /* @__PURE__ */ t(P, { className: "h-[12px] w-[64px] bg-field" }, e)) }),
+    /* @__PURE__ */ s("div", { className: "space-y-ds-04", children: [
+      /* @__PURE__ */ t(P, { className: "h-ds-md w-full bg-field" }),
+      /* @__PURE__ */ t(P, { className: "h-ds-md w-full bg-field" }),
+      /* @__PURE__ */ t(P, { className: "h-ds-md w-4/5 bg-field" })
+    ] })
+  ] });
+}
+const Vt = p.forwardRef(function({
+  task: e,
+  loading: b = !1,
+  open: x,
+  onOpenChange: d,
+  columns: c,
+  members: g,
+  activities: D = [],
+  enrichedComments: f,
+  clientMode: m = !1,
+  clientEditableFields: y = ["priority", "dueDate"],
+  onTitleUpdate: v,
+  onPropertyUpdate: w,
+  onAssign: l,
+  onUnassign: I,
+  onCreateSubtask: o,
+  onToggleSubtask: i,
+  onRequestReview: h,
+  onUpdateReviewStatus: u,
+  onPostComment: C,
+  onUploadFile: T,
+  onDeleteFile: A,
+  onTabChange: S,
+  renderEditor: E,
+  renderViewer: O,
+  renderPriorityIndicator: F,
+  renderDatePicker: K,
+  isUploading: J = !1
+}, z) {
+  var se, re, ne;
+  const [r, H] = p.useState(m ? "conversation" : "subtasks"), [W, Y] = p.useState(!1), [ee, q] = p.useState(""), M = p.useRef(null);
+  p.useEffect(() => {
+    e && (q(e.title), Y(!1));
+  }, [e == null ? void 0 : e.id]), p.useEffect(() => {
+    x && H(m ? "conversation" : "subtasks");
+  }, [x, m]);
+  const Re = (a) => {
+    H(a), S == null || S(a);
+  }, te = () => {
+    Y(!1);
+    const a = ee.trim();
+    a && a !== (e == null ? void 0 : e.title) ? v == null || v(a) : e && q(e.title);
+  }, Ae = (a) => {
+    a.key === "Enter" && (a.preventDefault(), te()), a.key === "Escape" && (Y(!1), e && q(e.title));
+  };
+  p.useEffect(() => {
+    W && M.current && (M.current.focus(), M.current.select());
+  }, [W]);
+  const Se = (se = c.find((a) => a.isTerminal)) == null ? void 0 : se.id, Pe = ((re = c.find((a) => a.isDefault)) == null ? void 0 : re.id) || ((ne = c[0]) == null ? void 0 : ne.id) || "", Le = m ? me.filter((a) => a.id === "conversation") : me, Oe = f || (e == null ? void 0 : e.comments) || [];
+  return /* @__PURE__ */ t(Ve, { open: x, onOpenChange: d, children: /* @__PURE__ */ s(
+    $e,
+    {
+      ref: z,
+      side: "right",
+      className: N(
+        /* intentional: task detail side panel takes 40% of screen, min 380px for form usability */
+        "w-full sm:max-w-none sm:w-[40%] min-w-[380px] p-0",
+        "flex flex-col overflow-hidden",
+        "border-l border-border bg-layer-01"
+      ),
+      children: [
+        /* @__PURE__ */ t(ke, { children: /* @__PURE__ */ t(je, { children: (e == null ? void 0 : e.title) || "Task Details" }) }),
+        b || !e ? /* @__PURE__ */ t(_t, {}) : /* @__PURE__ */ s(ue, { children: [
+          /* @__PURE__ */ s("div", { className: "shrink-0 border-b border-border px-ds-06 pb-ds-05 pt-ds-06", children: [
+            !m && W ? /* @__PURE__ */ t(
+              "input",
+              {
+                ref: M,
+                type: "text",
+                value: ee,
+                onChange: (a) => q(a.target.value),
+                onBlur: te,
+                onKeyDown: Ae,
+                className: "w-full bg-transparent text-ds-lg font-semibold text-text-primary outline-none"
+              }
+            ) : (
+              // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+              /* @__PURE__ */ t(
+                "h2",
+                {
+                  onClick: m ? void 0 : () => Y(!0),
+                  className: N(
+                    "text-ds-lg font-semibold text-text-primary",
+                    !m && "cursor-text hover:text-interactive transition-colors"
+                  ),
+                  children: e.title
+                }
+              )
+            ),
+            e.parentTaskId && /* @__PURE__ */ t("p", { className: "mt-ds-02 text-ds-sm text-text-placeholder", children: "Subtask" })
+          ] }),
+          /* @__PURE__ */ s("div", { className: "flex-1 overflow-y-auto", children: [
+            /* @__PURE__ */ t("div", { className: "border-b border-border px-ds-06 py-ds-05", children: /* @__PURE__ */ t(
+              we,
+              {
+                task: e,
+                columns: c,
+                members: g,
+                onUpdate: (a, R) => {
+                  m && !y.includes(a) || w == null || w(a, R);
+                },
+                onAssign: (a) => l == null ? void 0 : l(a),
+                onUnassign: (a) => I == null ? void 0 : I(a),
+                readOnly: m,
+                editableFields: m ? y : void 0,
+                renderPriorityIndicator: F,
+                renderDatePicker: K
+              }
+            ) }),
+            /* @__PURE__ */ t("div", { className: "sticky top-0 z-raised bg-layer-01 px-ds-06", children: /* @__PURE__ */ t(Fe, { value: r, onValueChange: Re, children: /* @__PURE__ */ t(ze, { variant: "line", children: Le.map((a) => /* @__PURE__ */ s(He, { value: a.id, children: [
+              /* @__PURE__ */ t(a.icon, { className: "h-ico-sm w-ico-sm", stroke: 1.5 }),
+              a.label
+            ] }, a.id)) }) }) }),
+            /* @__PURE__ */ s("div", { className: "px-ds-06 py-ds-05", children: [
+              r === "subtasks" && /* @__PURE__ */ t(
+                Ie,
+                {
+                  subtasks: e.subtasks ?? [],
+                  terminalColumnId: Se,
+                  projectId: e.projectId,
+                  parentTaskId: e.id,
+                  defaultColumnId: Pe,
+                  onCreateSubtask: m ? () => {
+                  } : (a) => o == null ? void 0 : o(a),
+                  onToggleSubtask: m ? () => {
+                  } : (a, R) => i == null ? void 0 : i(a, R),
+                  readOnly: m
+                }
+              ),
+              r === "review" && !m && /* @__PURE__ */ t(
+                De,
+                {
+                  reviews: e.reviewRequests,
+                  members: g,
+                  onRequestReview: (a) => h == null ? void 0 : h(a),
+                  onUpdateStatus: (a, R, _e) => u == null ? void 0 : u(a, R, _e)
+                }
+              ),
+              r === "conversation" && /* @__PURE__ */ t(
+                Ce,
+                {
+                  comments: Oe,
+                  taskVisibility: e.visibility,
+                  onPostComment: (a, R) => C == null ? void 0 : C(a, R),
+                  clientMode: m,
+                  renderEditor: E,
+                  renderViewer: O
+                }
+              ),
+              r === "files" && /* @__PURE__ */ t(
+                Te,
+                {
+                  files: e.files ?? [],
+                  onUpload: m ? () => {
+                  } : (a, R) => T == null ? void 0 : T(a, R),
+                  onDelete: m ? () => {
+                  } : (a) => A == null ? void 0 : A(a),
+                  isUploading: J,
+                  readOnly: m
+                }
+              ),
+              r === "activity" && /* @__PURE__ */ t(Ee, { activities: D })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+});
+Vt.displayName = "TaskDetailPanel";
+export {
+  Ee as A,
+  Ce as C,
+  Te as F,
+  De as R,
+  Ie as S,
+  Vt as T,
+  we as a
+};