@devalok/shilp-sutra-karm 0.11.0 → 0.12.0

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

@@ -1,38 +1,38 @@
 "use client";
-import { jsxs as s, jsx as t, Fragment as ue } from "react/jsx-runtime";
+import { jsxs as s, jsx as t, Fragment as xe } 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 je, SheetTitle as $e } 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 He, Tabs as Ge, TabsList as Me, TabsTrigger as Be } from "@devalok/shilp-sutra/ui";
-import { Avatar as _, AvatarImage as V, AvatarFallback as j } 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 Fe, IconChevronDown as ze, IconCheck as pe, IconUser as qe, IconUsers as Ye, IconX as Y, IconPlus as $, IconFlag as he, IconCalendarEvent as xe, IconTag as fe, IconEye as be, IconSquareCheck as Ke, IconSquare as We, IconListCheck as ge, IconMessage as Ne, IconGitPullRequest as X, IconMessageCircle as ye, IconSend as Je, 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 { EmptyState as H } from "@devalok/shilp-sutra/composed/empty-state";
-import { Badge as dt } from "@devalok/shilp-sutra/ui/badge";
-import { RichTextViewer as ct, RichTextEditor as mt } from "@devalok/shilp-sutra/composed/rich-text-editor";
-import { Dialog as ut, DialogTrigger as pt, DialogContent as ht, DialogHeader as xt, DialogTitle as ft, DialogDescription as bt, DialogFooter as gt, DialogClose as de } from "@devalok/shilp-sutra/ui/dialog";
-import { Button as ce } from "@devalok/shilp-sutra/ui/button";
-const Nt = {
+import { Sheet as Me, SheetContent as Fe, SheetTitle as Be } from "@devalok/shilp-sutra/ui/sheet";
+import { VisuallyHidden as ze } from "@devalok/shilp-sutra/ui/visually-hidden";
+import { Skeleton as O } from "@devalok/shilp-sutra/ui/skeleton";
+import { Progress as qe, Tabs as Ye, TabsList as Ke, TabsTrigger as U } from "@devalok/shilp-sutra/ui";
+import { Avatar as j, AvatarImage as V, AvatarFallback as $ } from "@devalok/shilp-sutra/ui/avatar";
+import { Popover as oe, PopoverTrigger as de, PopoverContent as ce } from "@devalok/shilp-sutra/ui/popover";
+import { IconColumns3 as We, IconChevronDown as Je, IconCheck as fe, IconUser as Qe, IconUsers as Ue, IconX as Y, IconPlus as H, IconFlag as be, IconCalendarEvent as ge, IconTag as Ne, IconEye as ye, IconSquareCheck as Xe, IconSquare as Ze, IconListCheck as ve, IconMessage as we, IconGitPullRequest as Z, IconMessageCircle as Ie, IconSend as et, IconUpload as tt, IconExternalLink as st, IconDownload as rt, IconTrash as nt, IconPaperclip as ee, IconFile as me, IconPhoto as it, IconFileText as lt, IconFileCode as at, IconFileSpreadsheet as ot, IconFileZip as dt, IconActivity as te, IconCircleCheck as ct, IconUserMinus as mt, IconUserPlus as ut, IconArrowRight as pt, IconEdit as ht } from "@tabler/icons-react";
+import { getInitials as G } from "@devalok/shilp-sutra/composed/lib/string-utils";
+import { MemberPicker as X } from "@devalok/shilp-sutra/composed/member-picker";
+import { EmptyState as M } from "@devalok/shilp-sutra/composed/empty-state";
+import { Badge as xt } from "@devalok/shilp-sutra/ui/badge";
+import { RichTextViewer as ft, RichTextEditor as bt } from "@devalok/shilp-sutra/composed/rich-text-editor";
+import { Dialog as gt, DialogTrigger as Nt, DialogContent as yt, DialogHeader as vt, DialogTitle as wt, DialogDescription as It, DialogFooter as Dt, DialogClose as ue } from "@devalok/shilp-sutra/ui/dialog";
+import { Button as pe } from "@devalok/shilp-sutra/ui/button";
+const Et = {
   LOW: "Low",
   MEDIUM: "Medium",
   HIGH: "High",
   URGENT: "Urgent"
-}, ve = {
+}, De = {
   LOW: "bg-[var(--color-category-slate)]",
   MEDIUM: "bg-[var(--color-warning)]",
   HIGH: "bg-[var(--color-error)]",
   URGENT: "bg-[var(--color-error)]"
-}, yt = {
+}, Tt = {
   PENDING: { color: "warning", label: "Pending" },
   APPROVED: { color: "success", label: "Approved" },
   CHANGES_REQUESTED: { color: "brand", label: "Changes Requested" },
   REJECTED: { color: "error", label: "Rejected" }
-}, vt = ["LOW", "MEDIUM", "HIGH", "URGENT"];
-function L({
+}, Ct = ["LOW", "MEDIUM", "HIGH", "URGENT"];
+function _({
   icon: n,
   label: e,
   children: b,
@@ -55,13 +55,13 @@ function L({
     }
   );
 }
-function wt({ priority: n }) {
+function Rt({ 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: Nt[n] || n })
+    /* @__PURE__ */ t("div", { className: N("h-2 w-2 rounded-ds-full", De[n]) }),
+    /* @__PURE__ */ t("span", { className: "text-ds-md text-text-primary", children: Et[n] || n })
   ] });
 }
-const we = p.forwardRef(
+const Ee = p.forwardRef(
   function({
     task: e,
     columns: b,
@@ -73,89 +73,89 @@ const we = p.forwardRef(
     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), E = p.useMemo(
-      () => x.map((r) => ({ id: r.id, name: r.name, avatar: r.image ?? void 0 })),
+    renderDatePicker: I,
+    onConfirmVisibilityChange: v
+  }, a) {
+    const [w, o] = p.useState(""), [l, h] = p.useState(!1), u = e.assignees.map((i) => i.user.id), E = p.useMemo(
+      () => x.map((i) => ({ id: i.id, name: i.name, avatar: i.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);
-    }, C = (r) => {
-      d("priority", r);
-    }, O = (r) => {
-      d("dueDate", r ? r.toISOString() : null);
-    }, G = () => {
-      const r = I.trim();
-      r && !e.labels.includes(r) && d("labels", [...e.labels, r]), o(""), h(!1);
-    }, K = (r) => {
-      d("labels", e.labels.filter((B) => B !== r));
+    ), T = (i) => {
+      d("columnId", i);
+    }, R = (i) => {
+      d("ownerId", i === e.ownerId ? null : i);
+    }, A = (i) => {
+      u.includes(i) ? g(i) : c(i);
+    }, S = (i) => {
+      d("priority", i);
+    }, P = (i) => {
+      d("dueDate", i ? i.toISOString() : null);
+    }, k = () => {
+      const i = w.trim();
+      i && !e.labels.includes(i) && d("labels", [...e.labels, i]), o(""), h(!1);
+    }, K = (i) => {
+      d("labels", e.labels.filter((J) => J !== i));
     }, W = () => {
-      const r = e.visibility === "INTERNAL" ? "EVERYONE" : "INTERNAL";
-      if (r === "EVERYONE" && w) {
-        w();
+      const i = e.visibility === "INTERNAL" ? "EVERYONE" : "INTERNAL";
+      if (i === "EVERYONE" && v) {
+        v();
         return;
       }
-      d("visibility", r);
-    }, M = y || wt;
-    return /* @__PURE__ */ s("div", { ref: l, className: N("space-y-ds-01", D), children: [
-      /* @__PURE__ */ t(L, { icon: Fe, 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(
+      d("visibility", i);
+    }, F = y || Rt;
+    return /* @__PURE__ */ s("div", { ref: a, className: N("space-y-ds-01", D), children: [
+      /* @__PURE__ */ t(_, { icon: We, 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(oe, { children: [
+        /* @__PURE__ */ t(de, { 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(ze, { className: "h-3 w-3 text-text-placeholder" })
+              /* @__PURE__ */ t(Je, { className: "h-3 w-3 text-text-placeholder" })
             ]
           }
         ) }),
         /* @__PURE__ */ t(
-          le,
+          ce,
           {
             className: "w-[180px] border-border bg-layer-01 p-ds-02",
             align: "start",
             sideOffset: 4,
-            children: b.map((r) => /* @__PURE__ */ s(
+            children: b.map((i) => /* @__PURE__ */ s(
               "button",
               {
                 type: "button",
-                onClick: () => T(r.id),
+                onClick: () => T(i.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"
+                  i.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" })
+                  i.name,
+                  i.id === e.columnId && /* @__PURE__ */ t(fe, { className: "ml-auto h-ico-sm w-ico-sm" })
                 ]
               },
-              r.id
+              i.id
             ))
           }
         )
       ] }) }),
-      !f && /* @__PURE__ */ t(L, { icon: qe, label: "Owner", children: /* @__PURE__ */ t(
-        Q,
+      !f && /* @__PURE__ */ t(_, { icon: Qe, label: "Owner", children: /* @__PURE__ */ t(
+        X,
         {
           members: E,
           selectedIds: e.ownerId ? [e.ownerId] : [],
-          onSelect: A,
+          onSelect: R,
           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: [
+              children: e.owner ? /* @__PURE__ */ s(xe, { children: [
+                /* @__PURE__ */ s(j, { className: "h-ico-md w-ico-md", children: [
                   e.owner.image && /* @__PURE__ */ t(V, { src: e.owner.image, alt: e.owner.name }),
-                  /* @__PURE__ */ t(j, { className: "bg-layer-03 text-ds-xs font-semibold text-text-on-color", children: k(e.owner.name) })
+                  /* @__PURE__ */ t($, { className: "bg-layer-03 text-ds-xs font-semibold text-text-on-color", children: G(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" })
@@ -163,37 +163,37 @@ const we = p.forwardRef(
           )
         }
       ) }),
-      /* @__PURE__ */ t(L, { icon: Ye, label: "Assignees", children: /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center gap-ds-02b", children: [
-        e.assignees.map((r) => /* @__PURE__ */ s(
+      /* @__PURE__ */ t(_, { icon: Ue, label: "Assignees", children: /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center gap-ds-02b", children: [
+        e.assignees.map((i) => /* @__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(j, { className: "bg-layer-03 text-ds-xs font-semibold text-text-on-color", children: k(r.user.name) })
+              /* @__PURE__ */ s(j, { className: "h-ico-sm w-ico-sm", children: [
+                i.user.image && /* @__PURE__ */ t(V, { src: i.user.image, alt: i.user.name }),
+                /* @__PURE__ */ t($, { className: "bg-layer-03 text-ds-xs font-semibold text-text-on-color", children: G(i.user.name) })
               ] }),
-              /* @__PURE__ */ t("span", { className: "text-ds-sm text-text-secondary", children: r.user.name.split(" ")[0] }),
+              /* @__PURE__ */ t("span", { className: "text-ds-sm text-text-secondary", children: i.user.name.split(" ")[0] }),
               !f && /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
-                  onClick: () => g(r.user.id),
+                  onClick: () => g(i.user.id),
                   className: "ml-ds-01 rounded-ds-full p-ds-01 transition-colors hover:bg-field",
-                  "aria-label": `Remove ${r.user.name}`,
+                  "aria-label": `Remove ${i.user.name}`,
                   children: /* @__PURE__ */ t(Y, { className: "h-ds-03 w-ds-03 text-text-placeholder" })
                 }
               )
             ]
           },
-          r.user.id
+          i.user.id
         )),
         !f && /* @__PURE__ */ t(
-          Q,
+          X,
           {
             members: E,
             selectedIds: u,
-            onSelect: S,
+            onSelect: A,
             multiple: !0,
             children: /* @__PURE__ */ t(
               "button",
@@ -201,49 +201,49 @@ const we = p.forwardRef(
                 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($, { className: "h-3 w-3 text-text-placeholder" })
+                children: /* @__PURE__ */ t(H, { 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(
+      /* @__PURE__ */ t(_, { icon: be, label: "Priority", children: /* @__PURE__ */ s(oe, { children: [
+        /* @__PURE__ */ t(de, { 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(M, { priority: e.priority })
+            children: /* @__PURE__ */ t(F, { priority: e.priority })
           }
         ) }),
         /* @__PURE__ */ t(
-          le,
+          ce,
           {
             className: "w-[160px] border-border bg-layer-01 p-ds-02",
             align: "start",
             sideOffset: 4,
-            children: vt.map((r) => /* @__PURE__ */ t(
+            children: Ct.map((i) => /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
-                onClick: () => C(r),
+                onClick: () => S(i),
                 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"
+                  i === e.priority && "bg-field"
                 ),
-                children: /* @__PURE__ */ t(M, { priority: r })
+                children: /* @__PURE__ */ t(F, { priority: i })
               },
-              r
+              i
             ))
           }
         )
       ] }) }),
-      /* @__PURE__ */ t(L, { icon: xe, label: "Due Date", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-02", children: [
-        v ? v({
+      /* @__PURE__ */ t(_, { icon: ge, label: "Due Date", children: /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-02", children: [
+        I ? I({
           value: e.dueDate ? new Date(e.dueDate) : null,
-          onChange: O,
+          onChange: P,
           placeholder: "No due date",
           className: "h-ds-xs-plus border-none bg-transparent px-ds-03 text-ds-md hover:bg-field"
         }) : /* @__PURE__ */ t(
@@ -251,7 +251,7 @@ const we = p.forwardRef(
           {
             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),
+            onChange: (i) => P(i.target.value ? new Date(i.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"
           }
@@ -260,45 +260,45 @@ const we = p.forwardRef(
           "button",
           {
             type: "button",
-            onClick: () => O(null),
+            onClick: () => P(null),
             className: "rounded-ds-md p-ds-02 transition-colors hover:bg-field",
             "aria-label": "Clear due date",
             children: /* @__PURE__ */ t(Y, { 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(
+      /* @__PURE__ */ t(_, { icon: Ne, label: "Labels", children: /* @__PURE__ */ s("div", { className: "flex flex-wrap items-center gap-ds-02b", children: [
+        e.labels.map((i) => /* @__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,
+              i,
               !f && /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
-                  onClick: () => K(r),
+                  onClick: () => K(i),
                   className: "rounded-ds-full p-ds-01 transition-colors hover:bg-field",
-                  "aria-label": `Remove label ${r}`,
+                  "aria-label": `Remove label ${i}`,
                   children: /* @__PURE__ */ t(Y, { className: "h-ds-03 w-ds-03" })
                 }
               )
             ]
           },
-          r
+          i
         )),
-        !f && (i ? /* @__PURE__ */ t("div", { className: "inline-flex items-center gap-ds-02", children: /* @__PURE__ */ t(
+        !f && (l ? /* @__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),
+            value: w,
+            onChange: (i) => o(i.target.value),
             "aria-label": "New label name",
-            onKeyDown: (r) => {
-              r.key === "Enter" && G(), r.key === "Escape" && (h(!1), o(""));
+            onKeyDown: (i) => {
+              i.key === "Enter" && k(), i.key === "Escape" && (h(!1), o(""));
             },
-            onBlur: G,
+            onBlur: k,
             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
@@ -310,12 +310,12 @@ const we = p.forwardRef(
             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($, { className: "h-3 w-3 text-text-placeholder" })
+            children: /* @__PURE__ */ t(H, { 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(
+      !f && /* @__PURE__ */ t(_, { icon: ye, label: "Visibility", children: /* @__PURE__ */ s(
         "button",
         {
           type: "button",
@@ -341,8 +341,8 @@ const we = p.forwardRef(
     ] });
   }
 );
-we.displayName = "TaskProperties";
-const Ie = p.forwardRef(
+Ee.displayName = "TaskProperties";
+const Te = p.forwardRef(
   function({
     subtasks: e,
     terminalColumnId: b,
@@ -352,31 +352,31 @@ const Ie = p.forwardRef(
     className: g,
     readOnly: D = !1
   }, f) {
-    const [m, y] = p.useState(""), [v, w] = p.useState(!1), l = p.useRef(null), I = e.filter(
+    const [m, y] = p.useState(""), [I, v] = p.useState(!1), a = p.useRef(null), w = e.filter(
       (u) => {
         var E;
         return ((E = u.column) == null ? void 0 : E.isTerminal) || u.columnId === b;
       }
-    ).length, o = e.length, i = () => {
+    ).length, o = e.length, l = () => {
       const u = m.trim();
       u && (x(u), y(""));
     }, h = (u) => {
-      u.key === "Enter" && (u.preventDefault(), i()), u.key === "Escape" && (w(!1), y(""));
+      u.key === "Enter" && (u.preventDefault(), l()), u.key === "Escape" && (v(!1), y(""));
     };
     return p.useEffect(() => {
-      v && l.current && l.current.focus();
-    }, [v]), /* @__PURE__ */ s("div", { ref: f, className: N("flex flex-col", g), children: [
+      I && a.current && a.current.focus();
+    }, [I]), /* @__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(He, { value: o > 0 ? I / o * 100 : 0, className: "h-ds-02b" }),
+        /* @__PURE__ */ t(qe, { value: o > 0 ? w / o * 100 : 0, className: "h-ds-02b" }),
         /* @__PURE__ */ s("span", { className: "shrink-0 text-ds-sm font-medium text-text-placeholder", children: [
-          I,
+          w,
           "/",
           o
         ] })
       ] }),
       e.length > 0 ? /* @__PURE__ */ t("div", { className: "space-y-ds-01", children: e.map((u) => {
-        var A, S;
-        const E = ((A = u.column) == null ? void 0 : A.isTerminal) || u.columnId === b, T = (S = u.assignees[0]) == null ? void 0 : S.user;
+        var R, A;
+        const E = ((R = u.column) == null ? void 0 : R.isTerminal) || u.columnId === b, T = (A = u.assignees[0]) == null ? void 0 : A.user;
         return /* @__PURE__ */ s(
           "div",
           {
@@ -387,22 +387,22 @@ const Ie = p.forwardRef(
               "hover:bg-field cursor-pointer"
             ),
             onClick: () => c == null ? void 0 : c(u.id),
-            onKeyDown: (C) => {
-              (C.key === "Enter" || C.key === " ") && (C.preventDefault(), c == null || c(u.id));
+            onKeyDown: (S) => {
+              (S.key === "Enter" || S.key === " ") && (S.preventDefault(), c == null || c(u.id));
             },
             children: [
               /* @__PURE__ */ t(
                 "button",
                 {
                   type: "button",
-                  onClick: (C) => {
-                    C.stopPropagation(), D || d(u.id, !E);
+                  onClick: (S) => {
+                    S.stopPropagation(), D || d(u.id, !E);
                   },
                   className: N(
                     "shrink-0 rounded p-ds-01 transition-colors",
                     D ? "cursor-default" : "hover:bg-layer-02"
                   ),
-                  children: E ? /* @__PURE__ */ t(Ke, { className: "h-ico-sm w-ico-sm text-interactive", stroke: 1.5 }) : /* @__PURE__ */ t(We, { className: "h-ico-sm w-ico-sm text-text-placeholder", stroke: 1.5 })
+                  children: E ? /* @__PURE__ */ t(Xe, { className: "h-ico-sm w-ico-sm text-interactive", stroke: 1.5 }) : /* @__PURE__ */ t(Ze, { className: "h-ico-sm w-ico-sm text-text-placeholder", stroke: 1.5 })
                 }
               ),
               /* @__PURE__ */ t(
@@ -410,7 +410,7 @@ const Ie = p.forwardRef(
                 {
                   className: N(
                     "h-2 w-2 shrink-0 rounded-ds-full",
-                    ve[u.priority]
+                    De[u.priority]
                   )
                 }
               ),
@@ -424,34 +424,34 @@ const Ie = p.forwardRef(
                   children: u.title
                 }
               ),
-              T && /* @__PURE__ */ s(_, { className: "h-ico-md w-ico-md shrink-0", children: [
+              T && /* @__PURE__ */ s(j, { className: "h-ico-md w-ico-md shrink-0", children: [
                 T.image && /* @__PURE__ */ t(V, { src: T.image, alt: T.name }),
-                /* @__PURE__ */ t(j, { className: "bg-layer-03 text-ds-xs font-semibold text-text-on-color", children: k(T.name) })
+                /* @__PURE__ */ t($, { className: "bg-layer-03 text-ds-xs font-semibold text-text-on-color", children: G(T.name) })
               ] })
             ]
           },
           u.id
         );
-      }) }) : !v && /* @__PURE__ */ t(
-        H,
+      }) }) : !I && /* @__PURE__ */ t(
+        M,
         {
-          icon: /* @__PURE__ */ t(ge, {}),
+          icon: /* @__PURE__ */ t(ve, {}),
           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: [
+      !D && (I ? /* @__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,
+            ref: a,
             type: "text",
             value: m,
             onChange: (u) => y(u.target.value),
             onKeyDown: h,
             onBlur: () => {
-              m.trim() || w(!1);
+              m.trim() || v(!1);
             },
             placeholder: "Subtask title...",
             className: "flex-1 bg-transparent text-ds-md text-text-primary placeholder:text-text-placeholder outline-none"
@@ -461,7 +461,7 @@ const Ie = p.forwardRef(
           "button",
           {
             type: "button",
-            onClick: i,
+            onClick: l,
             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"
@@ -471,10 +471,10 @@ const Ie = p.forwardRef(
         "button",
         {
           type: "button",
-          onClick: () => w(!0),
+          onClick: () => v(!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($, { className: "h-ico-sm w-ico-sm", stroke: 1.5 }),
+            /* @__PURE__ */ t(H, { className: "h-ico-sm w-ico-sm", stroke: 1.5 }),
             "Add subtask"
           ]
         }
@@ -482,8 +482,8 @@ const Ie = p.forwardRef(
     ] });
   }
 );
-Ie.displayName = "SubtasksTab";
-function It(n) {
+Te.displayName = "SubtasksTab";
+function At(n) {
   return new Date(n).toLocaleDateString("en-IN", {
     month: "short",
     day: "numeric",
@@ -491,11 +491,11 @@ function It(n) {
     minute: "2-digit"
   });
 }
-const Dt = [
-  { status: "APPROVED", label: "Approve", icon: pe },
-  { status: "CHANGES_REQUESTED", label: "Request Changes", icon: Ne },
+const St = [
+  { status: "APPROVED", label: "Approve", icon: fe },
+  { status: "CHANGES_REQUESTED", label: "Request Changes", icon: we },
   { status: "REJECTED", label: "Reject", icon: Y }
-], De = p.forwardRef(
+], Ce = p.forwardRef(
   function({
     reviews: e,
     members: b,
@@ -503,58 +503,58 @@ const Dt = [
     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 })),
+    const [D, f] = p.useState({}), [m, y] = p.useState(null), I = p.useMemo(
+      () => b.map((a) => ({ id: a.id, name: a.name, avatar: a.image ?? void 0 })),
       [b]
-    ), w = (l, I) => {
-      d(l, I, D[l]), f((o) => {
-        const i = { ...o };
-        return delete i[l], i;
+    ), v = (a, w) => {
+      d(a, w, D[a]), f((o) => {
+        const l = { ...o };
+        return delete l[a], l;
       }), 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 = yt[l.status], o = m === l.id;
+      e.length > 0 ? /* @__PURE__ */ t("div", { className: "space-y-ds-04", children: e.map((a) => {
+        const w = Tt[a.status], o = m === a.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(
+                /* @__PURE__ */ s(j, { className: "h-ds-xs w-ds-xs shrink-0", children: [
+                  a.reviewer.image && /* @__PURE__ */ t(
                     V,
                     {
-                      src: l.reviewer.image,
-                      alt: l.reviewer.name
+                      src: a.reviewer.image,
+                      alt: a.reviewer.name
                     }
                   ),
-                  /* @__PURE__ */ t(j, { className: "bg-layer-03 text-ds-xs font-semibold text-text-on-color", children: k(l.reviewer.name) })
+                  /* @__PURE__ */ t($, { className: "bg-layer-03 text-ds-xs font-semibold text-text-on-color", children: G(a.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__ */ t("span", { className: "text-ds-md font-medium text-text-primary", children: a.reviewer.name }),
                   /* @__PURE__ */ s("span", { className: "ml-ds-03 text-ds-sm text-text-placeholder", children: [
                     "requested by ",
-                    l.requestedBy.name
+                    a.requestedBy.name
                   ] })
                 ] }),
                 /* @__PURE__ */ t(
-                  dt,
+                  xt,
                   {
-                    color: I.color,
-                    children: I.label
+                    color: w.color,
+                    children: w.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: [
+              a.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: a.feedback }) }),
+              a.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) => ({
+                    value: D[a.id] || "",
+                    onChange: (l) => f((h) => ({
                       ...h,
-                      [l.id]: i.target.value
+                      [a.id]: l.target.value
                     })),
                     placeholder: "Add feedback (optional)...",
                     rows: 2,
@@ -562,25 +562,25 @@ const Dt = [
                   }
                 ),
                 /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-02b", children: [
-                  Dt.map((i) => {
-                    const h = i.icon;
+                  St.map((l) => {
+                    const h = l.icon;
                     return /* @__PURE__ */ s(
                       "button",
                       {
                         type: "button",
-                        onClick: () => w(l.id, i.status),
+                        onClick: () => v(a.id, l.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]"
+                          l.status === "APPROVED" && "bg-success-surface text-text-success hover:opacity-[0.9]",
+                          l.status === "CHANGES_REQUESTED" && "bg-warning-surface text-text-warning hover:opacity-[0.9]",
+                          l.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
+                          l.label
                         ]
                       },
-                      i.status
+                      l.status
                     );
                   }),
                   /* @__PURE__ */ t(
@@ -597,38 +597,38 @@ const Dt = [
                 "button",
                 {
                   type: "button",
-                  onClick: () => y(l.id),
+                  onClick: () => y(a.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) })
+              /* @__PURE__ */ t("p", { className: "mt-ds-03 text-ds-xs text-text-placeholder", children: At(a.createdAt) })
             ]
           },
-          l.id
+          a.id
         );
       }) }) : /* @__PURE__ */ t(
-        H,
+        M,
         {
-          icon: /* @__PURE__ */ t(X, {}),
+          icon: /* @__PURE__ */ t(Z, {}),
           title: "No reviews yet",
           description: "Request a review from a team member",
           compact: !0
         }
       ),
       /* @__PURE__ */ t(
-        Q,
+        X,
         {
-          members: v,
+          members: I,
           selectedIds: [],
-          onSelect: (l) => x(l),
+          onSelect: (a) => x(a),
           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($, { className: "h-ico-sm w-ico-sm", stroke: 1.5 }),
+                /* @__PURE__ */ t(H, { className: "h-ico-sm w-ico-sm", stroke: 1.5 }),
                 "Request Review"
               ]
             }
@@ -638,8 +638,8 @@ const Dt = [
     ] });
   }
 );
-De.displayName = "ReviewTab";
-function Et(n) {
+Ce.displayName = "ReviewTab";
+function Pt(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",
@@ -648,7 +648,7 @@ function Et(n) {
     minute: "2-digit"
   });
 }
-function Tt(n) {
+function Lt(n) {
   return n.authorType === "INTERNAL" && n.internalAuthor ? n.internalAuthor : n.authorType === "CLIENT" && n.clientAuthor ? {
     id: n.clientAuthor.id,
     name: n.clientAuthor.name,
@@ -656,10 +656,10 @@ function Tt(n) {
     image: null
   } : { id: n.authorId, name: "Unknown", image: null };
 }
-function Ct(n) {
+function Ot(n) {
   return n.replace(/<[^>]*>/g, "");
 }
-const Ee = p.forwardRef(
+const Re = p.forwardRef(
   function({
     comments: e,
     taskVisibility: b,
@@ -670,41 +670,41 @@ const Ee = p.forwardRef(
     renderEditor: D,
     renderViewer: f
   }, m) {
-    const [y, v] = p.useState(""), w = p.useRef(null), l = D ?? (g ? (i) => /* @__PURE__ */ t(
-      mt,
+    const [y, I] = p.useState(""), v = p.useRef(null), a = D ?? (g ? (l) => /* @__PURE__ */ t(
+      bt,
       {
-        content: i.content,
-        onChange: i.onChange,
-        placeholder: i.placeholder,
+        content: l.content,
+        onChange: l.onChange,
+        placeholder: l.placeholder,
         editable: !0,
         className: "min-h-[80px]"
       }
-    ) : void 0), I = f ?? (g ? (i) => /* @__PURE__ */ t(ct, { content: i.content, className: i.className }) : void 0), o = () => {
-      const i = y.trim();
-      i.replace(/<[^>]*>/g, "").trim() && (x(i, c ? "CLIENT" : "INTERNAL"), v(""));
+    ) : void 0), w = f ?? (g ? (l) => /* @__PURE__ */ t(ft, { content: l.content, className: l.className }) : void 0), o = () => {
+      const l = y.trim();
+      l.replace(/<[^>]*>/g, "").trim() && (x(l, c ? "CLIENT" : "INTERNAL"), I(""));
     };
     return p.useEffect(() => {
-      w.current && (w.current.scrollTop = w.current.scrollHeight);
+      v.current && (v.current.scrollTop = v.current.scrollHeight);
     }, [e.length]), /* @__PURE__ */ s("div", { ref: m, className: N("flex flex-col", d), children: [
       e.length > 0 ? /* @__PURE__ */ t(
         "div",
         {
-          ref: w,
+          ref: v,
           className: "flex-1 space-y-ds-05 overflow-y-auto",
-          children: e.map((i) => {
-            const h = Tt(i), u = i.authorType === "CLIENT";
+          children: e.map((l) => {
+            const h = Lt(l), u = l.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: [
+              /* @__PURE__ */ s(j, { 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(
-                  j,
+                  $,
                   {
                     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)
+                    children: G(h.name)
                   }
                 )
               ] }),
@@ -712,20 +712,20 @@ const Ee = p.forwardRef(
                 /* @__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: Et(i.createdAt) })
+                  /* @__PURE__ */ t("span", { className: "text-ds-sm text-text-placeholder", children: Pt(l.createdAt) })
                 ] }),
-                /* @__PURE__ */ t("div", { className: "mt-ds-02", children: I ? I({
-                  content: i.content,
+                /* @__PURE__ */ t("div", { className: "mt-ds-02", children: w ? w({
+                  content: l.content,
                   className: "[&_.ProseMirror]:!min-h-0 [&_.ProseMirror]:!p-0"
-                }) : /* @__PURE__ */ t("p", { className: "text-ds-md text-text-secondary whitespace-pre-wrap", children: Ct(i.content) }) })
+                }) : /* @__PURE__ */ t("p", { className: "text-ds-md text-text-secondary whitespace-pre-wrap", children: Ot(l.content) }) })
               ] })
-            ] }, i.id);
+            ] }, l.id);
           })
         }
       ) : /* @__PURE__ */ t(
-        H,
+        M,
         {
-          icon: /* @__PURE__ */ t(ye, {}),
+          icon: /* @__PURE__ */ t(Ie, {}),
           title: "No comments yet",
           description: "Start a conversation about this task",
           compact: !0
@@ -733,15 +733,15 @@ const Ee = p.forwardRef(
       ),
       /* @__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({
+        a ? a({
           content: y,
-          onChange: v,
+          onChange: I,
           placeholder: "Write a comment..."
         }) : /* @__PURE__ */ t(
           "textarea",
           {
             value: y,
-            onChange: (i) => v(i.target.value),
+            onChange: (l) => I(l.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"
@@ -755,7 +755,7 @@ const Ee = p.forwardRef(
             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(Je, { className: "h-ico-sm w-ico-sm", stroke: 2 }),
+              /* @__PURE__ */ t(et, { className: "h-ico-sm w-ico-sm", stroke: 2 }),
               "Comment"
             ]
           }
@@ -764,20 +764,20 @@ const Ee = p.forwardRef(
     ] });
   }
 );
-Ee.displayName = "ConversationTab";
-function Rt(n) {
-  if (!n) return oe;
+Re.displayName = "ConversationTab";
+function _t(n) {
+  if (!n) return me;
   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;
+  return ["jpg", "jpeg", "png", "gif", "svg", "webp", "bmp"].includes(e) ? it : ["pdf", "doc", "docx", "txt", "rtf"].includes(e) ? lt : ["js", "ts", "jsx", "tsx", "py", "rb", "go", "rs", "html", "css", "json"].includes(e) ? at : ["xls", "xlsx", "csv"].includes(e) ? ot : ["zip", "tar", "gz", "rar", "7z"].includes(e) ? dt : me;
 }
-function At(n) {
+function kt(n) {
   return new Date(n).toLocaleDateString("en-IN", {
     month: "short",
     day: "numeric",
     year: "numeric"
   });
 }
-const Te = p.forwardRef(
+const Ae = p.forwardRef(
   function({
     files: e,
     onUpload: b,
@@ -786,18 +786,18 @@ const Te = p.forwardRef(
     className: c,
     readOnly: g = !1
   }, D) {
-    const f = p.useRef(null), [m, y] = p.useState(!1), v = (o) => {
+    const f = p.useRef(null), [m, y] = p.useState(!1), I = (o) => {
       var h;
-      const i = (h = o.target.files) == null ? void 0 : h[0];
-      i && b(i), f.current && (f.current.value = "");
-    }, w = (o) => {
+      const l = (h = o.target.files) == null ? void 0 : h[0];
+      l && b(l), f.current && (f.current.value = "");
+    }, v = (o) => {
       var h;
       o.preventDefault(), y(!1);
-      const i = (h = o.dataTransfer.files) == null ? void 0 : h[0];
-      i && b(i);
-    }, l = (o) => {
+      const l = (h = o.dataTransfer.files) == null ? void 0 : h[0];
+      l && b(l);
+    }, a = (o) => {
       o.preventDefault(), y(!0);
-    }, I = () => {
+    }, w = () => {
       y(!1);
     };
     return /* @__PURE__ */ s("div", { ref: D, className: N("flex flex-col", c), children: [
@@ -806,9 +806,9 @@ const Te = p.forwardRef(
         {
           role: "region",
           "aria-label": "File upload drop zone",
-          onDrop: w,
-          onDragOver: l,
-          onDragLeave: I,
+          onDrop: v,
+          onDragOver: a,
+          onDragLeave: w,
           className: N(
             "rounded-ds-lg border-2 border-dashed transition-colors",
             m ? "border-interactive bg-interactive/5" : "border-border"
@@ -816,7 +816,7 @@ const Te = p.forwardRef(
           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,
+                tt,
                 {
                   className: "h-ico-sm w-ico-sm text-text-placeholder",
                   stroke: 1.5
@@ -847,7 +847,7 @@ const Te = p.forwardRef(
               {
                 ref: f,
                 type: "file",
-                onChange: v,
+                onChange: I,
                 className: "hidden"
               }
             )
@@ -855,14 +855,14 @@ const Te = p.forwardRef(
         }
       ),
       e.length > 0 ? /* @__PURE__ */ t("div", { className: "mt-ds-05 space-y-ds-02", children: e.map((o) => {
-        const i = Rt(o.fileType);
+        const l = _t(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,
+                l,
                 {
                   className: "h-ico-sm w-ico-sm text-text-tertiary",
                   stroke: 1.5
@@ -871,12 +871,23 @@ const Te = p.forwardRef(
               /* @__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),
+                  kt(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.externalUrl && /* @__PURE__ */ t(
+                  "a",
+                  {
+                    href: o.externalUrl,
+                    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: o.externalLabel ?? "Open externally",
+                    children: /* @__PURE__ */ t(st, { className: "h-ico-sm w-ico-sm text-text-tertiary" })
+                  }
+                ),
                 o.downloadUrl && /* @__PURE__ */ t(
                   "a",
                   {
@@ -885,32 +896,32 @@ const Te = p.forwardRef(
                     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" })
+                    children: /* @__PURE__ */ t(rt, { className: "h-ico-sm w-ico-sm text-text-tertiary" })
                   }
                 ),
-                !g && /* @__PURE__ */ s(ut, { children: [
-                  /* @__PURE__ */ t(pt, { asChild: !0, children: /* @__PURE__ */ t(
+                !g && /* @__PURE__ */ s(gt, { children: [
+                  /* @__PURE__ */ t(Nt, { 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" })
+                      children: /* @__PURE__ */ t(nt, { className: "h-ico-sm w-ico-sm text-text-error" })
                     }
                   ) }),
-                  /* @__PURE__ */ s(ht, { children: [
-                    /* @__PURE__ */ s(xt, { children: [
-                      /* @__PURE__ */ t(ft, { children: "Delete file?" }),
-                      /* @__PURE__ */ s(bt, { children: [
+                  /* @__PURE__ */ s(yt, { children: [
+                    /* @__PURE__ */ s(vt, { children: [
+                      /* @__PURE__ */ t(wt, { children: "Delete file?" }),
+                      /* @__PURE__ */ s(It, { children: [
                         '"',
                         o.title,
                         '" will be permanently deleted. This cannot be undone.'
                       ] })
                     ] }),
-                    /* @__PURE__ */ s(gt, { 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,
+                    /* @__PURE__ */ s(Dt, { children: [
+                      /* @__PURE__ */ t(ue, { asChild: !0, children: /* @__PURE__ */ t(pe, { variant: "outline", size: "sm", children: "Cancel" }) }),
+                      /* @__PURE__ */ t(ue, { asChild: !0, children: /* @__PURE__ */ t(
+                        pe,
                         {
                           variant: "solid",
                           color: "error",
@@ -928,9 +939,9 @@ const Te = p.forwardRef(
           o.id
         );
       }) }) : /* @__PURE__ */ t("div", { className: "mt-ds-03", children: /* @__PURE__ */ t(
-        H,
+        M,
         {
-          icon: /* @__PURE__ */ t(Z, {}),
+          icon: /* @__PURE__ */ t(ee, {}),
           title: "No files attached",
           description: "Upload files to share with your team",
           compact: !0
@@ -939,16 +950,16 @@ const Te = p.forwardRef(
     ] });
   }
 );
-Te.displayName = "FilesTab";
-const St = {
+Ae.displayName = "FilesTab";
+const jt = {
   "task.created": {
-    icon: $,
+    icon: H,
     color: "text-success-text",
     dotColor: "bg-success",
     getDescription: () => "created this task"
   },
   "task.updated": {
-    icon: ot,
+    icon: ht,
     color: "text-category-slate-text",
     dotColor: "bg-category-slate",
     getDescription: (n) => {
@@ -957,7 +968,7 @@ const St = {
     }
   },
   "task.moved": {
-    icon: lt,
+    icon: pt,
     color: "text-warning-text",
     dotColor: "bg-warning",
     getDescription: (n) => {
@@ -966,7 +977,7 @@ const St = {
     }
   },
   "task.assigned": {
-    icon: at,
+    icon: ut,
     color: "text-category-cyan-text",
     dotColor: "bg-category-cyan",
     getDescription: (n) => {
@@ -975,7 +986,7 @@ const St = {
     }
   },
   "task.unassigned": {
-    icon: it,
+    icon: mt,
     color: "text-text-secondary",
     dotColor: "bg-icon-disabled",
     getDescription: (n) => {
@@ -984,13 +995,13 @@ const St = {
     }
   },
   "task.commented": {
-    icon: Ne,
+    icon: we,
     color: "text-interactive",
     dotColor: "bg-interactive",
     getDescription: () => "added a comment"
   },
   "task.file_uploaded": {
-    icon: Z,
+    icon: ee,
     color: "text-category-indigo-text",
     dotColor: "bg-category-indigo",
     getDescription: (n) => {
@@ -999,7 +1010,7 @@ const St = {
     }
   },
   "task.review_requested": {
-    icon: X,
+    icon: Z,
     color: "text-warning-text",
     dotColor: "bg-warning",
     getDescription: (n) => {
@@ -1008,7 +1019,7 @@ const St = {
     }
   },
   "task.review_completed": {
-    icon: nt,
+    icon: ct,
     color: "text-success-text",
     dotColor: "bg-success",
     getDescription: (n) => {
@@ -1017,7 +1028,7 @@ const St = {
     }
   },
   "task.visibility_changed": {
-    icon: be,
+    icon: ye,
     color: "text-text-tertiary",
     dotColor: "bg-icon-secondary",
     getDescription: (n) => {
@@ -1026,7 +1037,7 @@ const St = {
     }
   },
   "task.priority_changed": {
-    icon: he,
+    icon: be,
     color: "text-error-text",
     dotColor: "bg-error",
     getDescription: (n) => {
@@ -1035,13 +1046,13 @@ const St = {
     }
   },
   "task.labels_changed": {
-    icon: fe,
+    icon: Ne,
     color: "text-category-amber-text",
     dotColor: "bg-category-amber",
     getDescription: () => "updated labels"
   },
   "task.due_date_changed": {
-    icon: xe,
+    icon: ge,
     color: "text-warning-text",
     dotColor: "bg-warning",
     getDescription: (n) => {
@@ -1049,13 +1060,13 @@ const St = {
       return e != null && e.dueDate ? `set due date to ${e.dueDate}` : "updated the due date";
     }
   }
-}, Pt = {
-  icon: U,
+}, Vt = {
+  icon: te,
   color: "text-text-placeholder",
   dotColor: "bg-icon-disabled",
   getDescription: (n) => n.action
 };
-function Lt(n) {
+function $t(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",
@@ -1064,17 +1075,17 @@ function Lt(n) {
     minute: "2-digit"
   });
 }
-function Ot(n) {
+function Ht(n) {
   const e = n.metadata;
   return e != null && e.actorName ? e.actorName : n.actorType === "SYSTEM" ? "System" : n.actorType === "AGENT" ? "AI Agent" : "Someone";
 }
-const Ce = p.forwardRef(
+const Se = p.forwardRef(
   function({ activities: e, className: b }, x) {
     return e.length === 0 ? /* @__PURE__ */ t(
-      H,
+      M,
       {
         ref: x,
-        icon: /* @__PURE__ */ t(U, {}),
+        icon: /* @__PURE__ */ t(te, {}),
         title: "No activity yet",
         description: "Actions on this task will appear here",
         compact: !0,
@@ -1083,7 +1094,7 @@ const Ce = p.forwardRef(
     ) : /* @__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);
+        const c = jt[d.action] || Vt, g = c.icon, D = Ht(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",
@@ -1108,37 +1119,37 @@ const Ce = p.forwardRef(
                 f
               ] })
             ] }),
-            /* @__PURE__ */ t("p", { className: "mt-ds-01 text-ds-xs text-text-placeholder", children: Lt(d.timestamp) })
+            /* @__PURE__ */ t("p", { className: "mt-ds-01 text-ds-xs text-text-placeholder", children: $t(d.timestamp) })
           ] })
         ] }, d.id);
       }) })
     ] });
   }
 );
-Ce.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 }
+Se.displayName = "ActivityTab";
+const he = [
+  { id: "subtasks", label: "Subtasks", icon: ve },
+  { id: "review", label: "Review", icon: Z },
+  { id: "conversation", label: "Conversation", icon: Ie },
+  { id: "files", label: "Files", icon: ee },
+  { id: "activity", label: "Activity", icon: te }
 ];
-function _t() {
+function Gt() {
   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(O, { 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" })
+      /* @__PURE__ */ t(O, { className: "h-[16px] w-[120px] bg-field" }),
+      /* @__PURE__ */ t(O, { 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__ */ t("div", { className: "flex gap-ds-05 border-b border-border pb-ds-03", children: Array.from({ length: 5 }).map((n, e) => /* @__PURE__ */ t(O, { 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" })
+      /* @__PURE__ */ t(O, { className: "h-ds-md w-full bg-field" }),
+      /* @__PURE__ */ t(O, { className: "h-ds-md w-full bg-field" }),
+      /* @__PURE__ */ t(O, { className: "h-ds-md w-4/5 bg-field" })
     ] })
   ] });
 }
-const Vt = p.forwardRef(function({
+const Mt = p.forwardRef(function({
   task: e,
   loading: b = !1,
   open: x,
@@ -1149,48 +1160,51 @@ const Vt = p.forwardRef(function({
   enrichedComments: f,
   clientMode: m = !1,
   clientEditableFields: y = ["priority", "dueDate"],
-  onTitleUpdate: v,
+  headerSlot: I,
+  extraTabs: v = [],
+  onTitleUpdate: a,
   onPropertyUpdate: w,
-  onAssign: l,
-  onUnassign: I,
-  onCreateSubtask: o,
-  onToggleSubtask: i,
-  onRequestReview: h,
-  onUpdateReviewStatus: u,
-  onPostComment: E,
-  onUploadFile: T,
-  onDeleteFile: A,
-  onTabChange: S,
-  renderEditor: C,
-  renderViewer: O,
-  renderPriorityIndicator: G,
-  renderDatePicker: K,
-  isUploading: W = !1
-}, M) {
-  var se, re, ne;
-  const [r, B] = p.useState(m ? "conversation" : "subtasks"), [J, F] = p.useState(!1), [ee, z] = p.useState(""), q = p.useRef(null);
+  onAssign: o,
+  onUnassign: l,
+  onCreateSubtask: h,
+  onToggleSubtask: u,
+  onRequestReview: E,
+  onUpdateReviewStatus: T,
+  onPostComment: R,
+  onUploadFile: A,
+  onUploadDeliverable: S,
+  onDeleteFile: P,
+  onTabChange: k,
+  renderEditor: K,
+  renderViewer: W,
+  renderPriorityIndicator: F,
+  renderDatePicker: i,
+  isUploading: J = !1
+}, Pe) {
+  var ie, le, ae;
+  const [L, se] = p.useState(m ? "conversation" : "subtasks"), [Q, B] = p.useState(!1), [re, z] = p.useState(""), q = p.useRef(null);
   p.useEffect(() => {
-    e && (z(e.title), F(!1));
+    e && (z(e.title), B(!1));
   }, [e == null ? void 0 : e.id]), p.useEffect(() => {
-    x && B(m ? "conversation" : "subtasks");
+    x && se(m ? "conversation" : "subtasks");
   }, [x, m]);
-  const Re = (a) => {
-    B(a), S == null || S(a);
-  }, te = () => {
-    F(!1);
-    const a = ee.trim();
-    a && a !== (e == null ? void 0 : e.title) ? v == null || v(a) : e && z(e.title);
-  }, Ae = (a) => {
-    a.key === "Enter" && (a.preventDefault(), te()), a.key === "Escape" && (F(!1), e && z(e.title));
+  const Le = (r) => {
+    se(r), k == null || k(r);
+  }, ne = () => {
+    B(!1);
+    const r = re.trim();
+    r && r !== (e == null ? void 0 : e.title) ? a == null || a(r) : e && z(e.title);
+  }, Oe = (r) => {
+    r.key === "Enter" && (r.preventDefault(), ne()), r.key === "Escape" && (B(!1), e && z(e.title));
   };
   p.useEffect(() => {
-    J && q.current && (q.current.focus(), q.current.select());
-  }, [J]);
-  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(
-    je,
+    Q && q.current && (q.current.focus(), q.current.select());
+  }, [Q]);
+  const _e = (ie = c.find((r) => r.isTerminal)) == null ? void 0 : ie.id, ke = ((le = c.find((r) => r.isDefault)) == null ? void 0 : le.id) || ((ae = c[0]) == null ? void 0 : ae.id) || "", je = m ? he.filter((r) => r.id === "conversation") : he, Ve = v.filter((r) => r.position === "before"), $e = v.filter((r) => r.position !== "before"), He = f || (e == null ? void 0 : e.comments) || [];
+  return /* @__PURE__ */ t(Me, { open: x, onOpenChange: d, children: /* @__PURE__ */ s(
+    Fe,
     {
-      ref: M,
+      ref: Pe,
       side: "right",
       className: N(
         /* intentional: task detail side panel takes 40% of screen, min 380px for form usability */
@@ -1199,18 +1213,18 @@ const Vt = p.forwardRef(function({
         "border-l border-border bg-layer-01"
       ),
       children: [
-        /* @__PURE__ */ t(ke, { children: /* @__PURE__ */ t($e, { children: (e == null ? void 0 : e.title) || "Task Details" }) }),
-        b || !e ? /* @__PURE__ */ t(_t, {}) : /* @__PURE__ */ s(ue, { children: [
+        /* @__PURE__ */ t(ze, { children: /* @__PURE__ */ t(Be, { children: (e == null ? void 0 : e.title) || "Task Details" }) }),
+        b || !e ? /* @__PURE__ */ t(Gt, {}) : /* @__PURE__ */ s(xe, { children: [
           /* @__PURE__ */ s("div", { className: "shrink-0 border-b border-border px-ds-06 pb-ds-05 pt-ds-06", children: [
-            !m && J ? /* @__PURE__ */ t(
+            !m && Q ? /* @__PURE__ */ t(
               "input",
               {
                 ref: q,
                 type: "text",
-                value: ee,
-                onChange: (a) => z(a.target.value),
-                onBlur: te,
-                onKeyDown: Ae,
+                value: re,
+                onChange: (r) => z(r.target.value),
+                onBlur: ne,
+                onKeyDown: Oe,
                 className: "w-full bg-transparent text-ds-lg font-semibold text-text-primary outline-none"
               }
             ) : (
@@ -1218,7 +1232,7 @@ const Vt = p.forwardRef(function({
               /* @__PURE__ */ t(
                 "h2",
                 {
-                  onClick: m ? void 0 : () => F(!0),
+                  onClick: m ? void 0 : () => B(!0),
                   className: N(
                     "text-ds-lg font-semibold text-text-primary",
                     !m && "cursor-text hover:text-interactive transition-colors"
@@ -1227,79 +1241,93 @@ const Vt = p.forwardRef(function({
                 }
               )
             ),
-            e.parentTaskId && /* @__PURE__ */ t("p", { className: "mt-ds-02 text-ds-sm text-text-placeholder", children: "Subtask" })
+            e.parentTaskId && /* @__PURE__ */ t("p", { className: "mt-ds-02 text-ds-sm text-text-placeholder", children: "Subtask" }),
+            I && /* @__PURE__ */ t("div", { className: "mt-ds-03 flex items-center gap-ds-03", children: I })
           ] }),
           /* @__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,
+              Ee,
               {
                 task: e,
                 columns: c,
                 members: g,
-                onUpdate: (a, R) => {
-                  m && !y.includes(a) || w == null || w(a, R);
+                onUpdate: (r, C) => {
+                  m && !y.includes(r) || w == null || w(r, C);
                 },
-                onAssign: (a) => l == null ? void 0 : l(a),
-                onUnassign: (a) => I == null ? void 0 : I(a),
+                onAssign: (r) => o == null ? void 0 : o(r),
+                onUnassign: (r) => l == null ? void 0 : l(r),
                 readOnly: m,
                 editableFields: m ? y : void 0,
-                renderPriorityIndicator: G,
-                renderDatePicker: K
+                renderPriorityIndicator: F,
+                renderDatePicker: i
               }
             ) }),
-            /* @__PURE__ */ t("div", { className: "sticky top-0 z-raised bg-layer-01 px-ds-06", children: /* @__PURE__ */ t(Ge, { value: r, onValueChange: Re, children: /* @__PURE__ */ t(Me, { variant: "line", children: Le.map((a) => /* @__PURE__ */ s(Be, { value: a.id, children: [
-              /* @__PURE__ */ t(a.icon, { className: "h-ico-sm w-ico-sm", stroke: 1.5 }),
-              a.label
-            ] }, a.id)) }) }) }),
+            /* @__PURE__ */ t("div", { className: "sticky top-0 z-raised bg-layer-01 px-ds-06", children: /* @__PURE__ */ t(Ye, { value: L, onValueChange: Le, children: /* @__PURE__ */ s(Ke, { variant: "line", children: [
+              Ve.map((r) => /* @__PURE__ */ s(U, { value: r.id, children: [
+                r.icon && /* @__PURE__ */ t("span", { className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0", children: r.icon }),
+                r.label
+              ] }, r.id)),
+              je.map((r) => /* @__PURE__ */ s(U, { value: r.id, children: [
+                /* @__PURE__ */ t(r.icon, { className: "h-ico-sm w-ico-sm", stroke: 1.5 }),
+                r.label
+              ] }, r.id)),
+              $e.map((r) => /* @__PURE__ */ s(U, { value: r.id, children: [
+                r.icon && /* @__PURE__ */ t("span", { className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0", children: r.icon }),
+                r.label
+              ] }, r.id))
+            ] }) }) }),
             /* @__PURE__ */ s("div", { className: "px-ds-06 py-ds-05", children: [
-              r === "subtasks" && /* @__PURE__ */ t(
-                Ie,
+              L === "subtasks" && /* @__PURE__ */ t(
+                Te,
                 {
                   subtasks: e.subtasks ?? [],
-                  terminalColumnId: Se,
+                  terminalColumnId: _e,
                   projectId: e.projectId,
                   parentTaskId: e.id,
-                  defaultColumnId: Pe,
+                  defaultColumnId: ke,
                   onCreateSubtask: m ? () => {
-                  } : (a) => o == null ? void 0 : o(a),
+                  } : (r) => h == null ? void 0 : h(r),
                   onToggleSubtask: m ? () => {
-                  } : (a, R) => i == null ? void 0 : i(a, R),
+                  } : (r, C) => u == null ? void 0 : u(r, C),
                   readOnly: m
                 }
               ),
-              r === "review" && !m && /* @__PURE__ */ t(
-                De,
+              L === "review" && !m && /* @__PURE__ */ t(
+                Ce,
                 {
                   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)
+                  onRequestReview: (r) => E == null ? void 0 : E(r),
+                  onUpdateStatus: (r, C, Ge) => T == null ? void 0 : T(r, C, Ge)
                 }
               ),
-              r === "conversation" && /* @__PURE__ */ t(
-                Ee,
+              L === "conversation" && /* @__PURE__ */ t(
+                Re,
                 {
-                  comments: Oe,
+                  comments: He,
                   taskVisibility: e.visibility,
-                  onPostComment: (a, R) => E == null ? void 0 : E(a, R),
+                  onPostComment: (r, C) => R == null ? void 0 : R(r, C),
                   clientMode: m,
-                  renderEditor: C,
-                  renderViewer: O
+                  renderEditor: K,
+                  renderViewer: W
                 }
               ),
-              r === "files" && /* @__PURE__ */ t(
-                Te,
+              L === "files" && /* @__PURE__ */ t(
+                Ae,
                 {
                   files: e.files ?? [],
                   onUpload: m ? () => {
-                  } : (a, R) => T == null ? void 0 : T(a, R),
+                  } : (r, C) => A == null ? void 0 : A(r, C),
                   onDelete: m ? () => {
-                  } : (a) => A == null ? void 0 : A(a),
-                  isUploading: W,
+                  } : (r) => P == null ? void 0 : P(r),
+                  isUploading: J,
                   readOnly: m
                 }
               ),
-              r === "activity" && /* @__PURE__ */ t(Ce, { activities: D })
+              L === "activity" && /* @__PURE__ */ t(Se, { activities: D }),
+              v.map(
+                (r) => L === r.id ? /* @__PURE__ */ t(p.Fragment, { children: r.content }, r.id) : null
+              )
             ] })
           ] })
         ] })
@@ -1307,13 +1335,13 @@ const Vt = p.forwardRef(function({
     }
   ) });
 });
-Vt.displayName = "TaskDetailPanel";
+Mt.displayName = "TaskDetailPanel";
 export {
-  Ce as A,
-  Ee as C,
-  Te as F,
-  De as R,
-  Ie as S,
-  Vt as T,
-  we as a
+  Se as A,
+  Re as C,
+  Ae as F,
+  Ce as R,
+  Te as S,
+  Mt as T,
+  Ee as a
 };