@devalok/shilp-sutra-karm 0.20.2 → 0.21.0

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

@@ -1,27 +1,28 @@
 "use client";
 import { jsxs as o, jsx as s, Fragment as ke } from "react/jsx-runtime";
 import * as n from "react";
-import { cn as h } from "@devalok/shilp-sutra/ui/lib/utils";
+import { cn as p } from "@devalok/shilp-sutra/ui/lib/utils";
 import { Checkbox as Ss } from "@devalok/shilp-sutra/ui/checkbox";
-import { PriorityIndicator as Ls } from "@devalok/shilp-sutra/composed/priority-indicator";
+import { PriorityIndicator as Ps } from "@devalok/shilp-sutra/composed/priority-indicator";
 import { Badge as W } from "@devalok/shilp-sutra/ui/badge";
-import { StatusBadge as Ps } from "@devalok/shilp-sutra/composed/status-badge";
-import { IconSquareCheck as js, IconSquare as Os, IconPlus as _, IconSend as _s, IconUpload as Fs, IconExternalLink as Bs, IconDownload as Vs, IconTrash as zs, IconFile as we, IconPhoto as Hs, IconFileText as Ms, IconFileCode as $s, IconFileSpreadsheet as qs, IconFileZip as Gs, IconCheck as Ee, IconMessage as Ae, IconX as K, IconCalendarEvent as Se, IconTag as Le, IconFlag as Pe, IconEye as je, IconCircleCheck as Ys, IconGitPullRequest as te, IconPaperclip as re, IconUserMinus as Ks, IconUserPlus as Ws, IconArrowRight as Us, IconEdit as Zs, IconActivity as ae, IconListCheck as Oe, IconMessageCircle as _e, IconChevronRight as Js, IconColumns3 as Qs, IconChevronDown as Xs, IconUser as et, IconUsers as st } from "@tabler/icons-react";
+import { StatusBadge as Ls } from "@devalok/shilp-sutra/composed/status-badge";
+import { IconSquareCheck as js, IconSquare as Os, IconPlus as _, IconSend as _s, IconUpload as Fs, IconExternalLink as Bs, IconDownload as Vs, IconTrash as zs, IconFile as we, IconPhoto as Hs, IconFileText as Ms, IconFileCode as $s, IconFileSpreadsheet as qs, IconFileZip as Gs, IconCheck as Ee, IconMessage as Ae, IconX as K, IconCalendarEvent as Se, IconTag as Pe, IconFlag as Le, IconEye as je, IconCircleCheck as Ys, IconGitPullRequest as te, IconPaperclip as re, IconUserMinus as Ks, IconUserPlus as Ws, IconArrowRight as Us, IconEdit as Zs, IconActivity as ae, IconListCheck as Oe, IconMessageCircle as _e, IconChevronRight as Js, IconColumns3 as Qs, IconChevronDown as Xs, IconUser as et, IconUsers as st } from "@tabler/icons-react";
 import { IconButton as tt } from "@devalok/shilp-sutra/ui/icon-button";
-import { Sheet as rt, SheetContent as at, SheetTitle as nt } from "@devalok/shilp-sutra/ui/sheet";
-import { VisuallyHidden as it } from "@devalok/shilp-sutra/ui/visually-hidden";
+import { AnimatePresence as rt, motion as at } from "framer-motion";
+import { Sheet as nt, SheetContent as it, SheetTitle as ot } from "@devalok/shilp-sutra/ui/sheet";
+import { VisuallyHidden as ct } from "@devalok/shilp-sutra/ui/visually-hidden";
 import { Skeleton as A } from "@devalok/shilp-sutra/ui/skeleton";
-import { Progress as ot, Tabs as ct, TabsList as lt, TabsTrigger as ee } from "@devalok/shilp-sutra/ui";
+import { Progress as lt, Tabs as dt, TabsList as ut, TabsTrigger as ee } from "@devalok/shilp-sutra/ui";
 import { Avatar as F, AvatarImage as B, AvatarFallback as V } from "@devalok/shilp-sutra/ui/avatar";
 import { Popover as ye, PopoverTrigger as Re, PopoverContent as Ce } from "@devalok/shilp-sutra/ui/popover";
 import { getInitials as z } from "@devalok/shilp-sutra/composed/lib/string-utils";
 import { MemberPicker as se } from "@devalok/shilp-sutra/composed/member-picker";
 import { EmptyState as H } from "@devalok/shilp-sutra/composed/empty-state";
-import { RichTextViewer as dt, RichTextEditor as ut } from "@devalok/shilp-sutra/composed/rich-text-editor";
-import { formatRelativeTime as mt } from "@devalok/shilp-sutra/ui/lib/date-utils";
-import { Dialog as ft, DialogTrigger as pt, DialogContent as ht, DialogHeader as gt, DialogTitle as bt, DialogDescription as xt, DialogFooter as Nt, DialogClose as De } from "@devalok/shilp-sutra/ui/dialog";
+import { RichTextViewer as mt, RichTextEditor as ft } from "@devalok/shilp-sutra/composed/rich-text-editor";
+import { formatRelativeTime as ht } from "@devalok/shilp-sutra/ui/lib/date-utils";
+import { Dialog as pt, DialogTrigger as bt, DialogContent as gt, DialogHeader as xt, DialogTitle as vt, DialogDescription as Nt, DialogFooter as wt, DialogClose as De } from "@devalok/shilp-sutra/ui/dialog";
 import { Button as Ie } from "@devalok/shilp-sutra/ui/button";
-const vt = {
+const yt = {
   LOW: "Low",
   MEDIUM: "Medium",
   HIGH: "High",
@@ -31,15 +32,15 @@ const vt = {
   MEDIUM: "bg-warning-9",
   HIGH: "bg-error-9",
   URGENT: "bg-error-9"
-}, wt = {
+}, Rt = {
   PENDING: { color: "warning", label: "Pending" },
   APPROVED: { color: "success", label: "Approved" },
   CHANGES_REQUESTED: { color: "brand", label: "Changes Requested" },
   REJECTED: { color: "error", label: "Rejected" }
 }, Be = n.forwardRef(
   function({ completed: e, total: r, className: a, ...i }, d) {
-    return /* @__PURE__ */ o("div", { ref: d, className: h("mb-ds-05 flex items-center gap-ds-04", a), ...i, children: [
-      /* @__PURE__ */ s(ot, { value: r > 0 ? e / r * 100 : 0, className: "h-ds-02b" }),
+    return /* @__PURE__ */ o("div", { ref: d, className: p("mb-ds-05 flex items-center gap-ds-04", a), ...i, children: [
+      /* @__PURE__ */ s(lt, { value: r > 0 ? e / r * 100 : 0, className: "h-ds-02b" }),
       /* @__PURE__ */ o("span", { className: "shrink-0 text-ds-sm font-medium text-surface-fg-subtle", children: [
         e,
         "/",
@@ -51,23 +52,23 @@ const vt = {
 Be.displayName = "SubtaskProgress";
 const Ve = n.forwardRef(
   function({ children: e, className: r, ...a }, i) {
-    return /* @__PURE__ */ s("div", { ref: i, className: h("space-y-ds-01", r), ...a, children: e });
+    return /* @__PURE__ */ s("div", { ref: i, className: p("space-y-ds-01", r), ...a, children: e });
   }
 );
 Ve.displayName = "SubtaskList";
 const ze = n.forwardRef(
   function({ subtask: e, isComplete: r, onToggle: a, onClick: i, className: d, ...f }, m) {
     var u;
-    const p = (u = e.assignees[0]) == null ? void 0 : u.user;
+    const h = (u = e.assignees[0]) == null ? void 0 : u.user;
     return /* @__PURE__ */ o(
       "div",
       {
         ref: m,
         role: "button",
         tabIndex: 0,
-        className: h(
+        className: p(
           "group flex items-center gap-ds-03 rounded-ds-lg px-ds-03 py-ds-02b transition-colors",
-          "hover:bg-surface-3 cursor-pointer",
+          "hover:bg-surface-raised-hover cursor-pointer",
           d
         ),
         onClick: () => i == null ? void 0 : i(e.id),
@@ -83,9 +84,9 @@ const ze = n.forwardRef(
               onClick: (x) => {
                 x.stopPropagation(), a == null || a(e.id, !r);
               },
-              className: h(
+              className: p(
                 "shrink-0 rounded p-ds-01 transition-colors",
-                a ? "hover:bg-surface-3" : "cursor-default"
+                a ? "hover:bg-surface-raised-hover" : "cursor-default"
               ),
               children: r ? /* @__PURE__ */ s(js, { className: "h-ico-sm w-ico-sm text-accent-11", stroke: 1.5 }) : /* @__PURE__ */ s(Os, { className: "h-ico-sm w-ico-sm text-surface-fg-subtle", stroke: 1.5 })
             }
@@ -93,7 +94,7 @@ const ze = n.forwardRef(
           /* @__PURE__ */ s(
             "div",
             {
-              className: h(
+              className: p(
                 "h-2 w-2 shrink-0 rounded-ds-full",
                 Fe[e.priority]
               )
@@ -102,16 +103,16 @@ const ze = n.forwardRef(
           /* @__PURE__ */ s(
             "span",
             {
-              className: h(
+              className: p(
                 "flex-1 truncate text-ds-md",
                 r ? "text-surface-fg-subtle line-through" : "text-surface-fg"
               ),
               children: e.title
             }
           ),
-          p && /* @__PURE__ */ o(F, { className: "h-ico-md w-ico-md shrink-0", children: [
-            p.image && /* @__PURE__ */ s(B, { src: p.image, alt: p.name }),
-            /* @__PURE__ */ s(V, { className: "bg-surface-3 text-ds-xs font-semibold text-accent-fg", children: z(p.name) })
+          h && /* @__PURE__ */ o(F, { className: "h-ico-md w-ico-md shrink-0", children: [
+            h.image && /* @__PURE__ */ s(B, { src: h.image, alt: h.name }),
+            /* @__PURE__ */ s(V, { className: "bg-surface-raised-hover text-ds-xs font-semibold text-surface-fg", children: z(h.name) })
           ] })
         ]
       }
@@ -121,23 +122,23 @@ const ze = n.forwardRef(
 ze.displayName = "SubtaskItem";
 const He = n.forwardRef(
   function({ onCreate: e, placeholder: r = "Subtask title...", className: a, ...i }, d) {
-    const [f, m] = n.useState(""), [p, u] = n.useState(!1), x = n.useRef(null), g = () => {
-      const b = f.trim();
-      b && (e(b), m(""));
-    }, N = (b) => {
-      b.key === "Enter" && (b.preventDefault(), g()), b.key === "Escape" && (u(!1), m(""));
+    const [f, m] = n.useState(""), [h, u] = n.useState(!1), x = n.useRef(null), b = () => {
+      const g = f.trim();
+      g && (e(g), m(""));
+    }, v = (g) => {
+      g.key === "Enter" && (g.preventDefault(), b()), g.key === "Escape" && (u(!1), m(""));
     };
     return n.useEffect(() => {
-      p && x.current && x.current.focus();
-    }, [p]), /* @__PURE__ */ s("div", { ref: d, className: h(a), ...i, children: p ? /* @__PURE__ */ o("div", { className: "mt-ds-03 flex items-center gap-ds-03 rounded-ds-lg border border-surface-border-strong bg-surface-2 shadow-01 px-ds-04 py-ds-03", children: [
+      h && x.current && x.current.focus();
+    }, [h]), /* @__PURE__ */ s("div", { ref: d, className: p(a), ...i, children: h ? /* @__PURE__ */ o("div", { className: "mt-ds-03 flex items-center gap-ds-03 rounded-ds-lg border border-surface-border-strong bg-surface-raised shadow-raised px-ds-04 py-ds-03", children: [
       /* @__PURE__ */ s(
         "input",
         {
           ref: x,
           type: "text",
           value: f,
-          onChange: (b) => m(b.target.value),
-          onKeyDown: N,
+          onChange: (g) => m(g.target.value),
+          onKeyDown: v,
           onBlur: () => {
             f.trim() || u(!1);
           },
@@ -149,7 +150,7 @@ const He = n.forwardRef(
         "button",
         {
           type: "button",
-          onClick: g,
+          onClick: b,
           disabled: !f.trim(),
           className: "inline-flex h-6 items-center gap-ds-02 rounded-ds-md bg-accent-9 px-ds-03 text-ds-sm font-semibold text-accent-fg transition-colors hover:bg-accent-10 disabled:opacity-action-disabled",
           children: "Add"
@@ -160,7 +161,7 @@ const He = n.forwardRef(
       {
         type: "button",
         onClick: () => u(!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-surface-fg-subtle transition-colors hover:bg-surface-3 hover:text-surface-fg-muted",
+        className: "mt-ds-03 inline-flex items-center gap-ds-02b rounded-ds-lg px-ds-03 py-ds-02b text-ds-md text-surface-fg-subtle transition-colors hover:bg-surface-raised-hover hover:text-surface-fg-muted",
         children: [
           /* @__PURE__ */ s(_, { className: "h-ico-sm w-ico-sm", stroke: 1.5 }),
           "Add subtask"
@@ -176,7 +177,7 @@ const Me = n.forwardRef(
     n.useEffect(() => {
       r && f.current && (f.current.scrollTop = f.current.scrollHeight);
     }, [r, m]);
-    const p = n.useCallback(
+    const h = n.useCallback(
       (u) => {
         f.current = u, typeof d == "function" ? d(u) : d && (d.current = u);
       },
@@ -185,8 +186,8 @@ const Me = n.forwardRef(
     return /* @__PURE__ */ s(
       "div",
       {
-        ref: p,
-        className: h("flex-1 space-y-ds-05 overflow-y-auto", a),
+        ref: h,
+        className: p("flex-1 space-y-ds-05 overflow-y-auto", a),
         ...i,
         children: e
       }
@@ -196,14 +197,14 @@ const Me = n.forwardRef(
 Me.displayName = "MessageList";
 function $e(t) {
   const e = new Date(t), a = (/* @__PURE__ */ new Date()).getTime() - e.getTime();
-  return Math.floor(a / 864e5) < 7 ? mt(t) : e.toLocaleDateString("en-IN", {
+  return Math.floor(a / 864e5) < 7 ? ht(t) : e.toLocaleDateString("en-IN", {
     month: "short",
     day: "numeric",
     hour: "numeric",
     minute: "2-digit"
   });
 }
-function yt(t) {
+function Ct(t) {
   return t.authorType === "INTERNAL" && t.internalAuthor ? t.internalAuthor : t.authorType === "CLIENT" && t.clientAuthor ? {
     id: t.clientAuthor.id,
     name: t.clientAuthor.name,
@@ -211,21 +212,21 @@ function yt(t) {
     image: null
   } : { id: t.authorId, name: "Unknown", image: null };
 }
-function Rt(t) {
+function Dt(t) {
   return t.replace(/<[^>]*>/g, "");
 }
 const qe = n.forwardRef(
   function({ comment: e, clientMode: r = !1, renderViewer: a, className: i, ...d }, f) {
-    const m = yt(e), p = e.authorType === "CLIENT";
-    return /* @__PURE__ */ o("div", { ref: f, className: h("flex gap-ds-03", i), ...d, children: [
+    const m = Ct(e), h = e.authorType === "CLIENT";
+    return /* @__PURE__ */ o("div", { ref: f, className: p("flex gap-ds-03", i), ...d, children: [
       /* @__PURE__ */ o(F, { className: "h-ds-xs-plus w-ds-xs-plus shrink-0 mt-ds-01", children: [
         m.image && /* @__PURE__ */ s(B, { src: m.image, alt: m.name }),
         /* @__PURE__ */ s(
           V,
           {
-            className: h(
+            className: p(
               "text-ds-xs font-semibold",
-              p ? "bg-warning-3 text-warning-11" : "bg-surface-3 text-accent-fg"
+              h ? "bg-warning-3 text-warning-11" : "bg-surface-raised-hover text-surface-fg"
             ),
             children: z(m.name)
           }
@@ -234,13 +235,13 @@ const qe = n.forwardRef(
       /* @__PURE__ */ o("div", { className: "flex-1 min-w-0", children: [
         /* @__PURE__ */ o("div", { className: "flex items-baseline gap-ds-03", children: [
           /* @__PURE__ */ s("span", { className: "text-ds-md font-medium text-surface-fg", children: m.name }),
-          r ? !p && /* @__PURE__ */ s("span", { className: "rounded bg-surface-3 px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider text-accent-fg", children: "Team" }) : p && /* @__PURE__ */ s("span", { className: "rounded bg-warning-3 px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider text-warning-11", children: "Client" }),
+          r ? !h && /* @__PURE__ */ s("span", { className: "rounded bg-surface-raised-hover px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider text-surface-fg", children: "Team" }) : h && /* @__PURE__ */ s("span", { className: "rounded bg-warning-3 px-ds-02 py-px text-ds-xs font-semibold uppercase tracking-wider text-warning-11", children: "Client" }),
           /* @__PURE__ */ s("span", { className: "text-ds-sm text-surface-fg-subtle", children: $e(e.createdAt) })
         ] }),
         /* @__PURE__ */ s("div", { className: "mt-ds-02", children: a ? a({
           content: e.content,
           className: "[&_.ProseMirror]:!min-h-0 [&_.ProseMirror]:!p-0"
-        }) : /* @__PURE__ */ s("p", { className: "text-ds-md text-surface-fg-muted whitespace-pre-wrap", children: Rt(e.content) }) })
+        }) : /* @__PURE__ */ s("p", { className: "text-ds-md text-surface-fg-muted whitespace-pre-wrap", children: Dt(e.content) }) })
       ] })
     ] });
   }
@@ -255,20 +256,20 @@ const Ge = n.forwardRef(
     className: d,
     ...f
   }, m) {
-    const [p, u] = n.useState(""), x = () => {
-      const g = p.trim();
-      g.replace(/<[^>]*>/g, "").trim() && (e(g, i ? "CLIENT" : "INTERNAL"), u(""));
+    const [h, u] = n.useState(""), x = () => {
+      const b = h.trim();
+      b.replace(/<[^>]*>/g, "").trim() && (e(b, i ? "CLIENT" : "INTERNAL"), u(""));
     };
-    return /* @__PURE__ */ o("div", { ref: m, className: h("space-y-ds-03", d), ...f, children: [
+    return /* @__PURE__ */ o("div", { ref: m, className: p("space-y-ds-03", d), ...f, children: [
       r ? r({
-        content: p,
+        content: h,
         onChange: u,
         placeholder: a
       }) : /* @__PURE__ */ s(
         "textarea",
         {
-          value: p,
-          onChange: (g) => u(g.target.value),
+          value: h,
+          onChange: (b) => u(b.target.value),
           placeholder: a,
           rows: 3,
           className: "w-full resize-none rounded-ds-md border border-surface-border-strong bg-transparent px-ds-04 py-ds-03 text-ds-md text-surface-fg placeholder:text-surface-fg-subtle outline-none focus:border-surface-border"
@@ -279,7 +280,7 @@ const Ge = n.forwardRef(
         {
           type: "button",
           onClick: x,
-          disabled: !p.replace(/<[^>]*>/g, "").trim(),
+          disabled: !h.replace(/<[^>]*>/g, "").trim(),
           className: "inline-flex items-center gap-ds-02b rounded-ds-lg bg-accent-9 px-ds-04 py-ds-02b text-ds-sm font-semibold text-accent-fg transition-colors hover:bg-accent-10 disabled:opacity-action-disabled disabled:cursor-not-allowed",
           children: [
             /* @__PURE__ */ s(_s, { className: "h-ico-sm w-ico-sm", stroke: 2 }),
@@ -297,7 +298,7 @@ const Ye = n.forwardRef(
       "p",
       {
         ref: a,
-        className: h("text-ds-xs text-warning-11", e),
+        className: p("text-ds-xs text-warning-11", e),
         ...r,
         children: "This task is visible to clients. Comments may be seen by external users."
       }
@@ -307,9 +308,9 @@ const Ye = n.forwardRef(
 Ye.displayName = "VisibilityWarning";
 const Ke = n.forwardRef(
   function({ onUpload: e, isUploading: r = !1, accept: a, className: i, ...d }, f) {
-    const m = n.useRef(null), [p, u] = n.useState(!1), x = (v) => {
+    const m = n.useRef(null), [h, u] = n.useState(!1), x = (N) => {
       var w;
-      const y = (w = v.target.files) == null ? void 0 : w[0];
+      const y = (w = N.target.files) == null ? void 0 : w[0];
       y && e(y), m.current && (m.current.value = "");
     };
     return /* @__PURE__ */ o(
@@ -318,27 +319,27 @@ const Ke = n.forwardRef(
         ref: f,
         role: "region",
         "aria-label": "File upload drop zone",
-        onDrop: (v) => {
+        onDrop: (N) => {
           var w;
-          v.preventDefault(), u(!1);
-          const y = (w = v.dataTransfer.files) == null ? void 0 : w[0];
+          N.preventDefault(), u(!1);
+          const y = (w = N.dataTransfer.files) == null ? void 0 : w[0];
           y && e(y);
         },
-        onDragOver: (v) => {
-          v.preventDefault(), u(!0);
+        onDragOver: (N) => {
+          N.preventDefault(), u(!0);
         },
         onDragLeave: () => {
           u(!1);
         },
-        className: h(
+        className: p(
           "rounded-ds-lg border-2 border-dashed transition-colors",
-          p ? "border-accent-7 bg-accent-1" : "border-surface-border-strong",
+          h ? "border-accent-7 bg-accent-1" : "border-surface-border-strong",
           i
         ),
         ...d,
         children: [
           /* @__PURE__ */ o("div", { className: "flex flex-col items-center gap-ds-03 py-ds-06", children: [
-            /* @__PURE__ */ s("div", { className: "flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-lg bg-surface-2", children: /* @__PURE__ */ s(
+            /* @__PURE__ */ s("div", { className: "flex h-ds-sm-plus w-ds-sm-plus items-center justify-center rounded-ds-lg bg-surface-raised", children: /* @__PURE__ */ s(
               Fs,
               {
                 className: "h-ico-sm w-ico-sm text-surface-fg-subtle",
@@ -351,8 +352,8 @@ const Ke = n.forwardRef(
                 {
                   type: "button",
                   onClick: () => {
-                    var v;
-                    return (v = m.current) == null ? void 0 : v.click();
+                    var N;
+                    return (N = m.current) == null ? void 0 : N.click();
                   },
                   disabled: r,
                   className: "text-ds-md font-medium text-accent-11 transition-colors hover:underline disabled:opacity-action-disabled",
@@ -383,16 +384,16 @@ const Ke = n.forwardRef(
 Ke.displayName = "FileDropZone";
 const We = n.forwardRef(
   function({ children: e, className: r, ...a }, i) {
-    return /* @__PURE__ */ s("div", { ref: i, className: h("space-y-ds-02", r), ...a, children: e });
+    return /* @__PURE__ */ s("div", { ref: i, className: p("space-y-ds-02", r), ...a, children: e });
   }
 );
 We.displayName = "FileList";
-function Ct(t) {
+function It(t) {
   if (!t) return we;
   const e = t.toLowerCase();
   return ["jpg", "jpeg", "png", "gif", "svg", "webp", "bmp"].includes(e) ? Hs : ["pdf", "doc", "docx", "txt", "rtf"].includes(e) ? Ms : ["js", "ts", "jsx", "tsx", "py", "rb", "go", "rs", "html", "css", "json"].includes(e) ? $s : ["xls", "xlsx", "csv"].includes(e) ? qs : ["zip", "tar", "gz", "rar", "7z"].includes(e) ? Gs : we;
 }
-function Dt(t) {
+function Tt(t) {
   return new Date(t).toLocaleDateString("en-IN", {
     month: "short",
     day: "numeric",
@@ -401,18 +402,18 @@ function Dt(t) {
 }
 const Ue = n.forwardRef(
   function({ file: e, onDelete: r, readOnly: a = !1, className: i, ...d }, f) {
-    const m = Ct(e.fileType);
+    const m = It(e.fileType);
     return /* @__PURE__ */ o(
       "div",
       {
         ref: f,
-        className: h(
-          "group flex items-center gap-ds-04 rounded-ds-lg px-ds-03 py-ds-03 transition-colors hover:bg-surface-3",
+        className: p(
+          "group flex items-center gap-ds-04 rounded-ds-lg px-ds-03 py-ds-03 transition-colors hover:bg-surface-raised-hover",
           i
         ),
         ...d,
         children: [
-          /* @__PURE__ */ s("div", { className: "flex h-ds-sm w-ds-sm shrink-0 items-center justify-center rounded-ds-lg bg-surface-2", children: /* @__PURE__ */ s(
+          /* @__PURE__ */ s("div", { className: "flex h-ds-sm w-ds-sm shrink-0 items-center justify-center rounded-ds-lg bg-surface-raised", children: /* @__PURE__ */ s(
             m,
             {
               className: "h-ico-sm w-ico-sm text-surface-fg-subtle",
@@ -422,7 +423,7 @@ const Ue = n.forwardRef(
           /* @__PURE__ */ o("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ s("p", { className: "truncate text-ds-md font-medium text-surface-fg", children: e.title }),
             /* @__PURE__ */ o("p", { className: "text-ds-sm text-surface-fg-subtle", children: [
-              Dt(e.createdAt),
+              Tt(e.createdAt),
               /* @__PURE__ */ s("span", { className: "mx-ds-02b", children: "by" }),
               e.uploadedBy.name
             ] })
@@ -434,7 +435,7 @@ const Ue = n.forwardRef(
                 href: /^https?:\/\//.test(e.externalUrl) ? e.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-surface-3",
+                className: "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md transition-colors hover:bg-surface-raised-hover",
                 title: e.externalLabel ?? "Open externally",
                 children: /* @__PURE__ */ s(Bs, { className: "h-ico-sm w-ico-sm text-surface-fg-subtle" })
               }
@@ -445,13 +446,13 @@ const Ue = n.forwardRef(
                 href: /^https?:\/\//.test(e.downloadUrl) ? e.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-surface-3",
+                className: "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md transition-colors hover:bg-surface-raised-hover",
                 title: "Download",
                 children: /* @__PURE__ */ s(Vs, { className: "h-ico-sm w-ico-sm text-surface-fg-subtle" })
               }
             ),
-            !a && r && /* @__PURE__ */ o(ft, { children: [
-              /* @__PURE__ */ s(pt, { asChild: !0, children: /* @__PURE__ */ s(
+            !a && r && /* @__PURE__ */ o(pt, { children: [
+              /* @__PURE__ */ s(bt, { asChild: !0, children: /* @__PURE__ */ s(
                 "button",
                 {
                   type: "button",
@@ -460,16 +461,16 @@ const Ue = n.forwardRef(
                   children: /* @__PURE__ */ s(zs, { className: "h-ico-sm w-ico-sm text-error-11" })
                 }
               ) }),
-              /* @__PURE__ */ o(ht, { children: [
-                /* @__PURE__ */ o(gt, { children: [
-                  /* @__PURE__ */ s(bt, { children: "Delete file?" }),
-                  /* @__PURE__ */ o(xt, { children: [
+              /* @__PURE__ */ o(gt, { children: [
+                /* @__PURE__ */ o(xt, { children: [
+                  /* @__PURE__ */ s(vt, { children: "Delete file?" }),
+                  /* @__PURE__ */ o(Nt, { children: [
                     '"',
                     e.title,
                     '" will be permanently deleted. This cannot be undone.'
                   ] })
                 ] }),
-                /* @__PURE__ */ o(Nt, { children: [
+                /* @__PURE__ */ o(wt, { children: [
                   /* @__PURE__ */ s(De, { asChild: !0, children: /* @__PURE__ */ s(Ie, { variant: "outline", size: "sm", children: "Cancel" }) }),
                   /* @__PURE__ */ s(De, { asChild: !0, children: /* @__PURE__ */ s(
                     Ie,
@@ -491,46 +492,46 @@ const Ue = n.forwardRef(
   }
 );
 Ue.displayName = "FileItem";
-const It = [
+const kt = [
   { status: "APPROVED", label: "Approve", icon: Ee },
   { status: "CHANGES_REQUESTED", label: "Request Changes", icon: Ae },
   { status: "REJECTED", label: "Reject", icon: K }
 ], Ze = n.forwardRef(
   function({ reviewId: e, onSubmit: r, className: a, ...i }, d) {
-    const [f, m] = n.useState(""), [p, u] = n.useState(!1), x = (g) => {
-      r(e, g, f || void 0), m(""), u(!1);
+    const [f, m] = n.useState(""), [h, u] = n.useState(!1), x = (b) => {
+      r(e, b, f || void 0), m(""), u(!1);
     };
-    return /* @__PURE__ */ s("div", { ref: d, className: h(a), ...i, children: p ? /* @__PURE__ */ o("div", { className: "space-y-ds-03", children: [
+    return /* @__PURE__ */ s("div", { ref: d, className: p(a), ...i, children: h ? /* @__PURE__ */ o("div", { className: "space-y-ds-03", children: [
       /* @__PURE__ */ s(
         "textarea",
         {
           value: f,
-          onChange: (g) => m(g.target.value),
+          onChange: (b) => m(b.target.value),
           placeholder: "Add feedback (optional)...",
           rows: 2,
           className: "w-full resize-none rounded-ds-md border border-surface-border-strong bg-transparent px-ds-03 py-ds-03 text-ds-sm text-surface-fg placeholder:text-surface-fg-subtle outline-none focus:border-surface-border"
         }
       ),
       /* @__PURE__ */ o("div", { className: "flex items-center gap-ds-02b", children: [
-        It.map((g) => {
-          const N = g.icon;
+        kt.map((b) => {
+          const v = b.icon;
           return /* @__PURE__ */ o(
             "button",
             {
               type: "button",
-              onClick: () => x(g.status),
-              className: h(
+              onClick: () => x(b.status),
+              className: p(
                 "inline-flex items-center gap-ds-02 rounded-ds-md px-ds-03 py-ds-02 text-ds-sm font-semibold transition-colors",
-                g.status === "APPROVED" && "bg-success-3 text-success-11 hover:opacity-90",
-                g.status === "CHANGES_REQUESTED" && "bg-warning-3 text-warning-11 hover:opacity-90",
-                g.status === "REJECTED" && "bg-error-3 text-error-11 hover:opacity-90"
+                b.status === "APPROVED" && "bg-success-3 text-success-11 hover:opacity-90",
+                b.status === "CHANGES_REQUESTED" && "bg-warning-3 text-warning-11 hover:opacity-90",
+                b.status === "REJECTED" && "bg-error-3 text-error-11 hover:opacity-90"
               ),
               children: [
-                /* @__PURE__ */ s(N, { className: "h-3 w-3", stroke: 2 }),
-                g.label
+                /* @__PURE__ */ s(v, { className: "h-3 w-3", stroke: 2 }),
+                b.label
               ]
             },
-            g.status
+            b.status
           );
         }),
         /* @__PURE__ */ s(
@@ -555,7 +556,7 @@ const It = [
   }
 );
 Ze.displayName = "ReviewResponseForm";
-function Tt(t) {
+function Et(t) {
   return new Date(t).toLocaleDateString("en-IN", {
     month: "short",
     day: "numeric",
@@ -565,13 +566,13 @@ function Tt(t) {
 }
 const Je = n.forwardRef(
   function({ review: e, onUpdateStatus: r, className: a, ...i }, d) {
-    const f = wt[e.status];
+    const f = Rt[e.status];
     return /* @__PURE__ */ o(
       "div",
       {
         ref: d,
-        className: h(
-          "rounded-ds-lg border border-surface-border-strong bg-surface-2 shadow-01 p-ds-04",
+        className: p(
+          "rounded-ds-lg border border-surface-border-strong bg-surface-raised shadow-raised p-ds-04",
           a
         ),
         ...i,
@@ -585,7 +586,7 @@ const Je = n.forwardRef(
                   alt: e.reviewer.name
                 }
               ),
-              /* @__PURE__ */ s(V, { className: "bg-surface-3 text-ds-xs font-semibold text-accent-fg", children: z(e.reviewer.name) })
+              /* @__PURE__ */ s(V, { className: "bg-surface-raised-hover text-ds-xs font-semibold text-surface-fg", children: z(e.reviewer.name) })
             ] }),
             /* @__PURE__ */ o("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ s("span", { className: "text-ds-md font-medium text-surface-fg", children: e.reviewer.name }),
@@ -602,7 +603,7 @@ const Je = n.forwardRef(
               }
             )
           ] }),
-          e.feedback && /* @__PURE__ */ s("div", { className: "mt-ds-03 rounded-ds-md bg-surface-2 px-ds-04 py-ds-03", children: /* @__PURE__ */ s("p", { className: "text-ds-sm text-surface-fg-muted", children: e.feedback }) }),
+          e.feedback && /* @__PURE__ */ s("div", { className: "mt-ds-03 rounded-ds-md bg-surface-raised px-ds-04 py-ds-03", children: /* @__PURE__ */ s("p", { className: "text-ds-sm text-surface-fg-muted", children: e.feedback }) }),
           e.status === "PENDING" && r && /* @__PURE__ */ s("div", { className: "mt-ds-03", children: /* @__PURE__ */ s(
             Ze,
             {
@@ -610,7 +611,7 @@ const Je = n.forwardRef(
               onSubmit: r
             }
           ) }),
-          /* @__PURE__ */ s("p", { className: "mt-ds-03 text-ds-xs text-surface-fg-subtle", children: Tt(e.createdAt) })
+          /* @__PURE__ */ s("p", { className: "mt-ds-03 text-ds-xs text-surface-fg-subtle", children: Et(e.createdAt) })
         ]
       }
     );
@@ -623,7 +624,7 @@ const Qe = n.forwardRef(
       () => e.map((m) => ({ id: m.id, name: m.name, avatar: m.image ?? void 0 })),
       [e]
     );
-    return /* @__PURE__ */ s("div", { ref: d, className: h(a), ...i, children: /* @__PURE__ */ s(
+    return /* @__PURE__ */ s("div", { ref: d, className: p(a), ...i, children: /* @__PURE__ */ s(
       se,
       {
         members: f,
@@ -633,7 +634,7 @@ const Qe = n.forwardRef(
           "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-surface-fg-subtle transition-colors hover:bg-surface-3 hover:text-surface-fg-muted",
+            className: "mt-ds-04 inline-flex items-center gap-ds-02b rounded-ds-lg px-ds-03 py-ds-02b text-ds-md text-surface-fg-subtle transition-colors hover:bg-surface-raised-hover hover:text-surface-fg-muted",
             children: [
               /* @__PURE__ */ s(_, { className: "h-ico-sm w-ico-sm", stroke: 1.5 }),
               "Request Review"
@@ -647,14 +648,14 @@ const Qe = n.forwardRef(
 Qe.displayName = "ReviewRequestButton";
 const Xe = n.forwardRef(
   function({ children: e, className: r, ...a }, i) {
-    return /* @__PURE__ */ o("div", { ref: i, className: h("relative", r), ...a, children: [
+    return /* @__PURE__ */ o("div", { ref: i, className: p("relative", r), ...a, children: [
       /* @__PURE__ */ s("div", { className: "absolute left-[11px] top-2 bottom-2 w-px bg-surface-border" }),
       /* @__PURE__ */ s("div", { className: "space-y-ds-05", children: e })
     ] });
   }
 );
 Xe.displayName = "ActivityTimeline";
-const kt = {
+const At = {
   "task.created": {
     icon: _,
     color: "text-success-11",
@@ -740,7 +741,7 @@ const kt = {
     }
   },
   "task.priority_changed": {
-    icon: Pe,
+    icon: Le,
     color: "text-error-11",
     dotColor: "bg-error-9",
     getDescription: (t) => {
@@ -749,7 +750,7 @@ const kt = {
     }
   },
   "task.labels_changed": {
-    icon: Le,
+    icon: Pe,
     color: "text-category-amber-11",
     dotColor: "bg-category-amber-9",
     getDescription: () => "updated labels"
@@ -763,30 +764,30 @@ const kt = {
       return e != null && e.dueDate ? `set due date to ${e.dueDate}` : "updated the due date";
     }
   }
-}, Et = {
+}, St = {
   icon: ae,
   color: "text-surface-fg-subtle",
   dotColor: "bg-disabled",
   getDescription: (t) => t.action
 };
-function At(t) {
+function Pt(t) {
   const e = t.metadata;
   return e != null && e.actorName ? e.actorName : t.actorType === "SYSTEM" ? "System" : t.actorType === "AGENT" ? "AI Agent" : "Someone";
 }
 const es = n.forwardRef(
   function({ entry: e, className: r, ...a }, i) {
-    const d = kt[e.action] || Et, f = d.icon, m = At(e), p = d.getDescription(e);
-    return /* @__PURE__ */ o("div", { ref: i, className: h("relative flex gap-ds-04 pl-0", r), ...a, children: [
-      /* @__PURE__ */ s("div", { className: "relative z-raised flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-ds-full bg-surface-1", children: /* @__PURE__ */ s(
+    const d = At[e.action] || St, f = d.icon, m = Pt(e), h = d.getDescription(e);
+    return /* @__PURE__ */ o("div", { ref: i, className: p("relative flex gap-ds-04 pl-0", r), ...a, children: [
+      /* @__PURE__ */ s("div", { className: "relative z-raised flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-ds-full bg-surface-base", children: /* @__PURE__ */ s(
         "div",
         {
-          className: h(
-            "flex h-ico-md w-ico-md items-center justify-center rounded-ds-full bg-surface-2"
+          className: p(
+            "flex h-ico-md w-ico-md items-center justify-center rounded-ds-full bg-surface-raised"
           ),
           children: /* @__PURE__ */ s(
             f,
             {
-              className: h("h-3 w-3", d.color),
+              className: p("h-3 w-3", d.color),
               stroke: 2
             }
           )
@@ -797,7 +798,7 @@ const es = n.forwardRef(
           /* @__PURE__ */ s("span", { className: "font-medium text-surface-fg", children: m }),
           /* @__PURE__ */ o("span", { className: "text-surface-fg-subtle", children: [
             " ",
-            p
+            h
           ] })
         ] }),
         /* @__PURE__ */ s("p", { className: "mt-ds-01 text-ds-xs text-surface-fg-subtle", children: $e(e.timestamp) })
@@ -815,28 +816,28 @@ const ss = n.forwardRef(
     onClickSubtask: d,
     className: f,
     readOnly: m = !1,
-    ...p
+    ...h
   }, u) {
     const x = e.filter(
-      (N) => {
-        var b;
-        return ((b = N.column) == null ? void 0 : b.isTerminal) || N.columnId === r;
+      (v) => {
+        var g;
+        return ((g = v.column) == null ? void 0 : g.isTerminal) || v.columnId === r;
       }
-    ).length, g = e.length;
-    return /* @__PURE__ */ o("div", { ref: u, className: h("flex flex-col", f), ...p, children: [
-      g > 0 && /* @__PURE__ */ s(Be, { completed: x, total: g }),
-      e.length > 0 ? /* @__PURE__ */ s(Ve, { children: e.map((N) => {
-        var v;
-        const b = ((v = N.column) == null ? void 0 : v.isTerminal) || N.columnId === r;
+    ).length, b = e.length;
+    return /* @__PURE__ */ o("div", { ref: u, className: p("flex flex-col", f), ...h, children: [
+      b > 0 && /* @__PURE__ */ s(Be, { completed: x, total: b }),
+      e.length > 0 ? /* @__PURE__ */ s(Ve, { children: e.map((v) => {
+        var N;
+        const g = ((N = v.column) == null ? void 0 : N.isTerminal) || v.columnId === r;
         return /* @__PURE__ */ s(
           ze,
           {
-            subtask: N,
-            isComplete: !!b,
+            subtask: v,
+            isComplete: !!g,
             onToggle: m ? void 0 : i,
             onClick: d
           },
-          N.id
+          v.id
         );
       }) }) : !m && /* @__PURE__ */ s(
         H,
@@ -861,28 +862,28 @@ const ts = n.forwardRef(
     clientMode: d = !1,
     richText: f = !0,
     renderEditor: m,
-    renderViewer: p,
+    renderViewer: h,
     ...u
   }, x) {
-    const g = m ?? (f ? (b) => /* @__PURE__ */ s(
-      ut,
+    const b = m ?? (f ? (g) => /* @__PURE__ */ s(
+      ft,
       {
-        content: b.content,
-        onChange: b.onChange,
-        placeholder: b.placeholder,
+        content: g.content,
+        onChange: g.onChange,
+        placeholder: g.placeholder,
         editable: !0,
         className: "min-h-[80px]"
       }
-    ) : void 0), N = p ?? (f ? (b) => /* @__PURE__ */ s(dt, { content: b.content, className: b.className }) : void 0);
-    return /* @__PURE__ */ o("div", { ref: x, className: h("flex flex-col", i), ...u, children: [
-      e.length > 0 ? /* @__PURE__ */ s(Me, { children: e.map((b) => /* @__PURE__ */ s(
+    ) : void 0), v = h ?? (f ? (g) => /* @__PURE__ */ s(mt, { content: g.content, className: g.className }) : void 0);
+    return /* @__PURE__ */ o("div", { ref: x, className: p("flex flex-col", i), ...u, children: [
+      e.length > 0 ? /* @__PURE__ */ s(Me, { children: e.map((g) => /* @__PURE__ */ s(
         qe,
         {
-          comment: b,
+          comment: g,
           clientMode: d,
-          renderViewer: N
+          renderViewer: v
         },
-        b.id
+        g.id
       )) }) : /* @__PURE__ */ s(
         H,
         {
@@ -898,7 +899,7 @@ const ts = n.forwardRef(
           Ge,
           {
             onSubmit: a,
-            renderEditor: g,
+            renderEditor: b,
             clientMode: d
           }
         )
@@ -916,8 +917,8 @@ const rs = n.forwardRef(
     className: d,
     readOnly: f = !1,
     ...m
-  }, p) {
-    return /* @__PURE__ */ o("div", { ref: p, className: h("flex flex-col", d), ...m, children: [
+  }, h) {
+    return /* @__PURE__ */ o("div", { ref: h, className: p("flex flex-col", d), ...m, children: [
       !f && /* @__PURE__ */ s(Ke, { onUpload: r, isUploading: i }),
       e.length > 0 ? /* @__PURE__ */ s(We, { className: "mt-ds-05", children: e.map((u) => /* @__PURE__ */ s(
         Ue,
@@ -949,8 +950,8 @@ const as = n.forwardRef(
     className: d,
     readOnly: f = !1,
     ...m
-  }, p) {
-    return /* @__PURE__ */ o("div", { ref: p, className: h("flex flex-col", d), ...m, children: [
+  }, h) {
+    return /* @__PURE__ */ o("div", { ref: h, className: p("flex flex-col", d), ...m, children: [
       e.length > 0 ? /* @__PURE__ */ s("div", { className: "space-y-ds-04", children: e.map((u) => /* @__PURE__ */ s(
         Je,
         {
@@ -991,12 +992,12 @@ const ns = n.forwardRef(
         className: r,
         ...a
       }
-    ) : /* @__PURE__ */ s(Xe, { ref: i, className: h(r), ...a, children: e.map((d) => /* @__PURE__ */ s(es, { entry: d }, d.id)) });
+    ) : /* @__PURE__ */ s(Xe, { ref: i, className: p(r), ...a, children: e.map((d) => /* @__PURE__ */ s(es, { entry: d }, d.id)) });
   }
 );
 ns.displayName = "ActivityTab";
 const is = n.createContext(null);
-function L() {
+function P() {
   const t = n.useContext(is);
   if (!t)
     throw new Error("useTaskActionRow must be used within a TaskActionRow.Root");
@@ -1005,8 +1006,8 @@ function L() {
 const ne = n.forwardRef(
   ({ task: t, children: e, onClick: r, onContextMenu: a, showSeparator: i = !0, className: d }, f) => {
     const m = n.useCallback(
-      (p) => {
-        r && (p.key === "Enter" || p.key === " ") && (p.preventDefault(), r());
+      (h) => {
+        r && (h.key === "Enter" || h.key === " ") && (h.preventDefault(), r());
       },
       [r]
     );
@@ -1019,9 +1020,9 @@ const ne = n.forwardRef(
         onClick: r,
         onKeyDown: r ? m : void 0,
         onContextMenu: a,
-        className: h(
+        className: p(
           "group flex items-center gap-ds-03 px-ds-04 py-ds-03 rounded-ds-md",
-          r && "hover:bg-surface-3 active:bg-surface-4 transition-colors duration-150",
+          r && "hover:bg-surface-raised-hover active:bg-surface-raised-active transition-colors duration-150",
           i && "border-b border-surface-border",
           d
         ),
@@ -1033,7 +1034,7 @@ const ne = n.forwardRef(
 ne.displayName = "TaskActionRowRoot";
 const ie = n.forwardRef(
   ({ onComplete: t }, e) => {
-    const { task: r } = L(), [a, i] = n.useState(!1), d = n.useCallback(
+    const { task: r } = P(), [a, i] = n.useState(!1), d = n.useCallback(
       (m) => {
         m.stopPropagation();
       },
@@ -1059,9 +1060,9 @@ const ie = n.forwardRef(
 ie.displayName = "TaskActionRowCheckbox";
 const oe = n.forwardRef(
   (t, e) => {
-    const { task: r } = L();
+    const { task: r } = P();
     return /* @__PURE__ */ s(
-      Ls,
+      Ps,
       {
         ref: e,
         priority: r.priority,
@@ -1073,12 +1074,12 @@ const oe = n.forwardRef(
 oe.displayName = "TaskActionRowPriority";
 const ce = n.forwardRef(
   ({ truncate: t, className: e }, r) => {
-    const { task: a } = L();
+    const { task: a } = P();
     return /* @__PURE__ */ s(
       "span",
       {
         ref: r,
-        className: h(
+        className: p(
           "flex-1 text-surface-fg text-ds-md font-medium",
           t && "truncate",
           e
@@ -1091,7 +1092,7 @@ const ce = n.forwardRef(
 ce.displayName = "TaskActionRowTitle";
 const le = n.forwardRef(
   ({ max: t }, e) => {
-    const { task: r } = L();
+    const { task: r } = P();
     if (!r.labels || r.labels.length === 0) return null;
     const a = t != null ? r.labels.slice(0, t) : r.labels, i = t != null ? r.labels.length - t : 0;
     return /* @__PURE__ */ o("div", { ref: e, className: "flex items-center gap-ds-02", children: [
@@ -1106,7 +1107,7 @@ const le = n.forwardRef(
 le.displayName = "TaskActionRowLabels";
 const de = n.forwardRef(
   ({ onClick: t }, e) => {
-    const { task: r } = L(), a = n.useCallback(
+    const { task: r } = P(), a = n.useCallback(
       (i) => {
         t && (i.stopPropagation(), t(i));
       },
@@ -1120,17 +1121,17 @@ const de = n.forwardRef(
         color: "default",
         size: "xs",
         onClick: a,
-        className: h(t && "cursor-pointer hover:bg-surface-4 transition-colors duration-150"),
+        className: p(t && "cursor-pointer hover:bg-surface-raised-active transition-colors duration-150"),
         children: r.projectName
       }
     ) : null;
   }
 );
 de.displayName = "TaskActionRowProjectBadge";
-function St(t) {
+function Lt(t) {
   return (/* @__PURE__ */ new Date(t + "T00:00:00")).toLocaleDateString("en-US", { month: "short", day: "numeric" });
 }
-function Lt(t) {
+function jt(t) {
   const e = /* @__PURE__ */ new Date(), r = [
     e.getFullYear(),
     String(e.getMonth() + 1).padStart(2, "0"),
@@ -1140,26 +1141,26 @@ function Lt(t) {
 }
 const ue = n.forwardRef(
   (t, e) => {
-    const { task: r } = L();
+    const { task: r } = P();
     if (!r.dueDate) return null;
-    const a = r.isOverdue, i = Lt(r.dueDate);
+    const a = r.isOverdue, i = jt(r.dueDate);
     return /* @__PURE__ */ s(
       "span",
       {
         ref: e,
-        className: h(
+        className: p(
           "text-ds-sm whitespace-nowrap",
           a && "text-error-11 font-medium",
           !a && i && "text-warning-11",
           !a && !i && "text-surface-fg-muted"
         ),
-        children: St(r.dueDate)
+        children: Lt(r.dueDate)
       }
     );
   }
 );
 ue.displayName = "TaskActionRowDueDate";
-const Pt = {
+const Ot = {
   active: "active",
   pending: "pending",
   approved: "approved",
@@ -1170,11 +1171,11 @@ const Pt = {
   draft: "draft"
 }, me = n.forwardRef(
   (t, e) => {
-    const { task: r } = L();
+    const { task: r } = P();
     if (!r.stage) return null;
-    const a = r.stage.toLowerCase(), i = Pt[a];
+    const a = r.stage.toLowerCase(), i = Ot[a];
     return i ? /* @__PURE__ */ s(
-      Ps,
+      Ls,
       {
         ref: e,
         status: i,
@@ -1218,13 +1219,13 @@ const os = n.forwardRef(
     showPriority: d,
     showLabels: f,
     showProject: m,
-    showDueDate: p,
+    showDueDate: h,
     showNavigate: u,
     showStatusBadge: x,
-    truncateTitle: g,
-    showSeparator: N,
-    maxLabels: b = 2,
-    navigateHref: v,
+    truncateTitle: b,
+    showSeparator: v,
+    maxLabels: g = 2,
+    navigateHref: N,
     onProjectClick: y,
     onNavigateClick: w,
     className: D
@@ -1235,23 +1236,23 @@ const os = n.forwardRef(
       task: t,
       onClick: e,
       onContextMenu: a,
-      showSeparator: N,
+      showSeparator: v,
       className: D,
       children: [
         i && /* @__PURE__ */ s(ie, { onComplete: r }),
         d && /* @__PURE__ */ s(oe, {}),
-        /* @__PURE__ */ s(ce, { truncate: g }),
-        f && /* @__PURE__ */ s(le, { max: b }),
+        /* @__PURE__ */ s(ce, { truncate: b }),
+        f && /* @__PURE__ */ s(le, { max: g }),
         m && /* @__PURE__ */ s(de, { onClick: y }),
-        p && /* @__PURE__ */ s(ue, {}),
+        h && /* @__PURE__ */ s(ue, {}),
         x && /* @__PURE__ */ s(me, {}),
-        u && /* @__PURE__ */ s(fe, { href: v, onClick: w })
+        u && /* @__PURE__ */ s(fe, { href: N, onClick: w })
       ]
     }
   )
 );
 os.displayName = "TaskActionRow";
-const nr = Object.assign(os, {
+const cr = Object.assign(os, {
   Root: ne,
   Checkbox: ie,
   Priority: oe,
@@ -1261,7 +1262,7 @@ const nr = Object.assign(os, {
   DueDate: ue,
   StatusBadge: me,
   Navigate: fe
-}), jt = ["LOW", "MEDIUM", "HIGH", "URGENT"];
+}), _t = ["LOW", "MEDIUM", "HIGH", "URGENT"];
 function S({
   icon: t,
   label: e,
@@ -1271,7 +1272,7 @@ function S({
   return /* @__PURE__ */ o(
     "div",
     {
-      className: h(
+      className: p(
         "flex items-center gap-ds-04 py-ds-03",
         a
       ),
@@ -1285,10 +1286,10 @@ function S({
     }
   );
 }
-function Ot({ priority: t }) {
+function Ft({ priority: t }) {
   return /* @__PURE__ */ o("div", { className: "flex items-center gap-ds-02b", children: [
-    /* @__PURE__ */ s("div", { className: h("h-2 w-2 rounded-ds-full", Fe[t]) }),
-    /* @__PURE__ */ s("span", { className: "text-ds-md text-surface-fg", children: vt[t] || t })
+    /* @__PURE__ */ s("div", { className: p("h-2 w-2 rounded-ds-full", Fe[t]) }),
+    /* @__PURE__ */ s("span", { className: "text-ds-md text-surface-fg", children: yt[t] || t })
   ] });
 }
 const cs = n.forwardRef(
@@ -1300,22 +1301,22 @@ const cs = n.forwardRef(
     onAssign: d,
     onUnassign: f,
     className: m,
-    readOnly: p = !1,
+    readOnly: h = !1,
     editableFields: u,
     renderPriorityIndicator: x,
-    renderDatePicker: g,
-    onConfirmVisibilityChange: N,
-    ...b
-  }, v) {
-    const [y, w] = n.useState(""), [D, R] = n.useState(!1), T = e.assignees.map((l) => l.user.id), k = n.useMemo(
+    renderDatePicker: b,
+    onConfirmVisibilityChange: v,
+    ...g
+  }, N) {
+    const [y, w] = n.useState(""), [D, R] = n.useState(!1), k = e.assignees.map((l) => l.user.id), E = n.useMemo(
       () => a.map((l) => ({ id: l.id, name: l.name, avatar: l.image ?? void 0 })),
       [a]
-    ), P = (l) => {
+    ), L = (l) => {
       i("columnId", l);
     }, j = (l) => {
       i("ownerId", l === e.ownerId ? null : l);
-    }, pe = (l) => {
-      T.includes(l) ? f(l) : d(l);
+    }, he = (l) => {
+      k.includes(l) ? f(l) : d(l);
     }, O = (l) => {
       i("priority", l);
     }, I = (l) => {
@@ -1327,19 +1328,19 @@ const cs = n.forwardRef(
       i("labels", e.labels.filter((J) => J !== l));
     }, Z = () => {
       const l = e.visibility === "INTERNAL" ? "EVERYONE" : "INTERNAL";
-      if (l === "EVERYONE" && N) {
-        N();
+      if (l === "EVERYONE" && v) {
+        v();
         return;
       }
       i("visibility", l);
-    }, $ = x || Ot;
-    return /* @__PURE__ */ o("div", { ref: v, className: h("space-y-ds-01", m), ...b, children: [
-      /* @__PURE__ */ s(S, { icon: Qs, label: "Column", children: p && !(u != null && u.includes("columnId")) ? /* @__PURE__ */ s("span", { className: "px-ds-03 py-ds-02 text-ds-md text-surface-fg", children: e.column.name }) : /* @__PURE__ */ o(ye, { children: [
+    }, $ = x || Ft;
+    return /* @__PURE__ */ o("div", { ref: N, className: p("space-y-ds-01", m), ...g, children: [
+      /* @__PURE__ */ s(S, { icon: Qs, label: "Column", children: h && !(u != null && u.includes("columnId")) ? /* @__PURE__ */ s("span", { className: "px-ds-03 py-ds-02 text-ds-md text-surface-fg", children: e.column.name }) : /* @__PURE__ */ o(ye, { children: [
         /* @__PURE__ */ s(Re, { asChild: !0, children: /* @__PURE__ */ o(
           "button",
           {
             type: "button",
-            className: "inline-flex items-center gap-ds-02b rounded-ds-md px-ds-03 py-ds-02 text-ds-md text-surface-fg transition-colors hover:bg-surface-3",
+            className: "inline-flex items-center gap-ds-02b rounded-ds-md px-ds-03 py-ds-02 text-ds-md text-surface-fg transition-colors hover:bg-surface-raised-hover",
             children: [
               /* @__PURE__ */ s("span", { children: e.column.name }),
               /* @__PURE__ */ s(Xs, { className: "h-3 w-3 text-surface-fg-subtle" })
@@ -1349,17 +1350,17 @@ const cs = n.forwardRef(
         /* @__PURE__ */ s(
           Ce,
           {
-            className: "w-[180px] border-surface-border-strong bg-surface-1 p-ds-02",
+            className: "w-[180px] border-surface-border-strong bg-surface-overlay p-ds-02",
             align: "start",
             sideOffset: 4,
             children: r.map((l) => /* @__PURE__ */ o(
               "button",
               {
                 type: "button",
-                onClick: () => P(l.id),
-                className: h(
+                onClick: () => L(l.id),
+                className: p(
                   "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-surface-3",
+                  "hover:bg-surface-raised-hover",
                   l.id === e.columnId ? "text-accent-11" : "text-surface-fg"
                 ),
                 children: [
@@ -1372,21 +1373,21 @@ const cs = n.forwardRef(
           }
         )
       ] }) }),
-      !p && /* @__PURE__ */ s(S, { icon: et, label: "Owner", children: /* @__PURE__ */ s(
+      !h && /* @__PURE__ */ s(S, { icon: et, label: "Owner", children: /* @__PURE__ */ s(
         se,
         {
-          members: k,
+          members: E,
           selectedIds: e.ownerId ? [e.ownerId] : [],
           onSelect: j,
           children: /* @__PURE__ */ s(
             "button",
             {
               type: "button",
-              className: "inline-flex items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02 transition-colors hover:bg-surface-3",
+              className: "inline-flex items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02 transition-colors hover:bg-surface-raised-hover",
               children: e.owner ? /* @__PURE__ */ o(ke, { children: [
                 /* @__PURE__ */ o(F, { className: "h-ico-md w-ico-md", children: [
                   e.owner.image && /* @__PURE__ */ s(B, { src: e.owner.image, alt: e.owner.name }),
-                  /* @__PURE__ */ s(V, { className: "bg-surface-3 text-ds-xs font-semibold text-accent-fg", children: z(e.owner.name) })
+                  /* @__PURE__ */ s(V, { className: "bg-surface-raised-hover text-ds-xs font-semibold text-surface-fg", children: z(e.owner.name) })
                 ] }),
                 /* @__PURE__ */ s("span", { className: "text-ds-md text-surface-fg", children: e.owner.name })
               ] }) : /* @__PURE__ */ s("span", { className: "text-ds-md text-surface-fg-subtle", children: "No owner" })
@@ -1398,19 +1399,19 @@ const cs = n.forwardRef(
         e.assignees.map((l) => /* @__PURE__ */ o(
           "div",
           {
-            className: "inline-flex items-center gap-ds-02 rounded-ds-full bg-surface-2 py-ds-01 pl-ds-01 pr-ds-03",
+            className: "inline-flex items-center gap-ds-02 rounded-ds-full bg-surface-raised py-ds-01 pl-ds-01 pr-ds-03",
             children: [
               /* @__PURE__ */ o(F, { className: "h-ico-sm w-ico-sm", children: [
                 l.user.image && /* @__PURE__ */ s(B, { src: l.user.image, alt: l.user.name }),
-                /* @__PURE__ */ s(V, { className: "bg-surface-3 text-ds-xs font-semibold text-accent-fg", children: z(l.user.name) })
+                /* @__PURE__ */ s(V, { className: "bg-surface-raised-hover text-ds-xs font-semibold text-surface-fg", children: z(l.user.name) })
               ] }),
               /* @__PURE__ */ s("span", { className: "text-ds-sm text-surface-fg-muted", children: l.user.name.split(" ")[0] }),
-              !p && /* @__PURE__ */ s(
+              !h && /* @__PURE__ */ s(
                 "button",
                 {
                   type: "button",
                   onClick: () => f(l.user.id),
-                  className: "ml-ds-01 rounded-ds-full p-ds-01 transition-colors hover:bg-surface-3",
+                  className: "ml-ds-01 rounded-ds-full p-ds-01 transition-colors hover:bg-surface-raised-hover",
                   "aria-label": `Remove ${l.user.name}`,
                   children: /* @__PURE__ */ s(K, { className: "h-ds-03 w-ds-03 text-surface-fg-subtle" })
                 }
@@ -1419,50 +1420,50 @@ const cs = n.forwardRef(
           },
           l.user.id
         )),
-        !p && /* @__PURE__ */ s(
+        !h && /* @__PURE__ */ s(
           se,
           {
-            members: k,
-            selectedIds: T,
-            onSelect: pe,
+            members: E,
+            selectedIds: k,
+            onSelect: he,
             multiple: !0,
             children: /* @__PURE__ */ s(
               "button",
               {
                 type: "button",
-                className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded-ds-full border border-dashed border-surface-border transition-colors hover:bg-surface-3 hover:border-surface-border",
+                className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded-ds-full border border-dashed border-surface-border transition-colors hover:bg-surface-raised-hover hover:border-surface-border",
                 "aria-label": "Add assignee",
                 children: /* @__PURE__ */ s(_, { className: "h-3 w-3 text-surface-fg-subtle" })
               }
             )
           }
         ),
-        p && e.assignees.length === 0 && /* @__PURE__ */ s("span", { className: "text-ds-md text-surface-fg-subtle", children: "None" })
+        h && e.assignees.length === 0 && /* @__PURE__ */ s("span", { className: "text-ds-md text-surface-fg-subtle", children: "None" })
       ] }) }),
-      /* @__PURE__ */ s(S, { icon: Pe, label: "Priority", children: /* @__PURE__ */ o(ye, { children: [
+      /* @__PURE__ */ s(S, { icon: Le, label: "Priority", children: /* @__PURE__ */ o(ye, { children: [
         /* @__PURE__ */ s(Re, { asChild: !0, children: /* @__PURE__ */ s(
           "button",
           {
             type: "button",
-            className: "rounded-ds-md px-ds-03 py-ds-02 transition-colors hover:bg-surface-3",
+            className: "rounded-ds-md px-ds-03 py-ds-02 transition-colors hover:bg-surface-raised-hover",
             children: /* @__PURE__ */ s($, { priority: e.priority })
           }
         ) }),
         /* @__PURE__ */ s(
           Ce,
           {
-            className: "w-[160px] border-surface-border-strong bg-surface-1 p-ds-02",
+            className: "w-[160px] border-surface-border-strong bg-surface-overlay p-ds-02",
             align: "start",
             sideOffset: 4,
-            children: jt.map((l) => /* @__PURE__ */ s(
+            children: _t.map((l) => /* @__PURE__ */ s(
               "button",
               {
                 type: "button",
                 onClick: () => O(l),
-                className: h(
+                className: p(
                   "flex w-full items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b transition-colors",
-                  "hover:bg-surface-3",
-                  l === e.priority && "bg-surface-3"
+                  "hover:bg-surface-raised-hover",
+                  l === e.priority && "bg-surface-raised-hover"
                 ),
                 children: /* @__PURE__ */ s($, { priority: l })
               },
@@ -1472,11 +1473,11 @@ const cs = n.forwardRef(
         )
       ] }) }),
       /* @__PURE__ */ s(S, { icon: Se, label: "Due Date", children: /* @__PURE__ */ o("div", { className: "flex items-center gap-ds-02", children: [
-        g ? g({
+        b ? b({
           value: e.dueDate ? new Date(e.dueDate) : null,
           onChange: I,
           placeholder: "No due date",
-          className: "h-ds-xs-plus border-none bg-transparent px-ds-03 text-ds-md hover:bg-surface-3"
+          className: "h-ds-xs-plus border-none bg-transparent px-ds-03 text-ds-md hover:bg-surface-raised-hover"
         }) : /* @__PURE__ */ s(
           "input",
           {
@@ -1484,7 +1485,7 @@ const cs = n.forwardRef(
             value: e.dueDate ? new Date(e.dueDate).toISOString().split("T")[0] : "",
             onChange: (l) => I(l.target.value ? new Date(l.target.value) : null),
             "aria-label": "Due date",
-            className: "h-ds-xs-plus border-none bg-transparent px-ds-03 text-ds-md text-surface-fg outline-none hover:bg-surface-3 rounded-ds-md"
+            className: "h-ds-xs-plus border-none bg-transparent px-ds-03 text-ds-md text-surface-fg outline-none hover:bg-surface-raised-hover rounded-ds-md"
           }
         ),
         e.dueDate && /* @__PURE__ */ s(
@@ -1492,25 +1493,25 @@ const cs = n.forwardRef(
           {
             type: "button",
             onClick: () => I(null),
-            className: "rounded-ds-md p-ds-02 transition-colors hover:bg-surface-3",
+            className: "rounded-ds-md p-ds-02 transition-colors hover:bg-surface-raised-hover",
             "aria-label": "Clear due date",
             children: /* @__PURE__ */ s(K, { className: "h-3 w-3 text-surface-fg-subtle" })
           }
         )
       ] }) }),
-      /* @__PURE__ */ s(S, { icon: Le, label: "Labels", children: /* @__PURE__ */ o("div", { className: "flex flex-wrap items-center gap-ds-02b", children: [
+      /* @__PURE__ */ s(S, { icon: Pe, label: "Labels", children: /* @__PURE__ */ o("div", { className: "flex flex-wrap items-center gap-ds-02b", children: [
         e.labels.map((l) => /* @__PURE__ */ o(
           "span",
           {
             className: "inline-flex items-center gap-ds-02 rounded-ds-full bg-accent-2 px-ds-03 py-ds-01 text-ds-sm font-medium text-accent-11",
             children: [
               l,
-              !p && /* @__PURE__ */ s(
+              !h && /* @__PURE__ */ s(
                 "button",
                 {
                   type: "button",
                   onClick: () => U(l),
-                  className: "rounded-ds-full p-ds-01 transition-colors hover:bg-surface-3",
+                  className: "rounded-ds-full p-ds-01 transition-colors hover:bg-surface-raised-hover",
                   "aria-label": `Remove label ${l}`,
                   children: /* @__PURE__ */ s(K, { className: "h-ds-03 w-ds-03" })
                 }
@@ -1519,7 +1520,7 @@ const cs = n.forwardRef(
           },
           l
         )),
-        !p && (D ? /* @__PURE__ */ s("div", { className: "inline-flex items-center gap-ds-02", children: /* @__PURE__ */ s(
+        !h && (D ? /* @__PURE__ */ s("div", { className: "inline-flex items-center gap-ds-02", children: /* @__PURE__ */ s(
           "input",
           {
             type: "text",
@@ -1539,27 +1540,27 @@ const cs = n.forwardRef(
           {
             type: "button",
             onClick: () => R(!0),
-            className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded-ds-full border border-dashed border-surface-border transition-colors hover:bg-surface-3 hover:border-surface-border",
+            className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded-ds-full border border-dashed border-surface-border transition-colors hover:bg-surface-raised-hover hover:border-surface-border",
             "aria-label": "Add label",
             children: /* @__PURE__ */ s(_, { className: "h-3 w-3 text-surface-fg-subtle" })
           }
         )),
-        p && e.labels.length === 0 && /* @__PURE__ */ s("span", { className: "text-ds-md text-surface-fg-subtle", children: "None" })
+        h && e.labels.length === 0 && /* @__PURE__ */ s("span", { className: "text-ds-md text-surface-fg-subtle", children: "None" })
       ] }) }),
-      !p && /* @__PURE__ */ s(S, { icon: je, label: "Visibility", children: /* @__PURE__ */ o(
+      !h && /* @__PURE__ */ s(S, { icon: je, label: "Visibility", children: /* @__PURE__ */ o(
         "button",
         {
           type: "button",
           onClick: Z,
-          className: h(
+          className: p(
             "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-3 text-success-11" : "bg-surface-2 text-surface-fg-subtle"
+            e.visibility === "EVERYONE" ? "bg-success-3 text-success-11" : "bg-surface-raised text-surface-fg-subtle"
           ),
           children: [
             /* @__PURE__ */ s(
               "span",
               {
-                className: h(
+                className: p(
                   "h-ds-02b w-ds-02b rounded-ds-full",
                   e.visibility === "EVERYONE" ? "bg-success-9" : "bg-disabled"
                 )
@@ -1580,22 +1581,22 @@ const Te = [
   { id: "files", label: "Files", icon: re },
   { id: "activity", label: "Activity", icon: ae }
 ];
-function _t() {
+function Bt() {
   return /* @__PURE__ */ o("div", { className: "space-y-ds-06 p-ds-06", children: [
-    /* @__PURE__ */ s(A, { className: "h-ds-xs-plus w-3/4 bg-surface-3" }),
+    /* @__PURE__ */ s(A, { className: "h-ds-xs-plus w-3/4 bg-surface-raised-hover" }),
     /* @__PURE__ */ s("div", { className: "space-y-ds-04", children: Array.from({ length: 6 }).map((t, e) => /* @__PURE__ */ o("div", { className: "flex items-center gap-ds-04", children: [
-      /* @__PURE__ */ s(A, { className: "h-[16px] w-[120px] bg-surface-3" }),
-      /* @__PURE__ */ s(A, { className: "h-[16px] flex-1 bg-surface-3" })
+      /* @__PURE__ */ s(A, { className: "h-[16px] w-[120px] bg-surface-raised-hover" }),
+      /* @__PURE__ */ s(A, { className: "h-[16px] flex-1 bg-surface-raised-hover" })
     ] }, e)) }),
-    /* @__PURE__ */ s("div", { className: "flex gap-ds-05 border-b border-surface-border-strong pb-ds-03", children: Array.from({ length: 5 }).map((t, e) => /* @__PURE__ */ s(A, { className: "h-[12px] w-[64px] bg-surface-3" }, e)) }),
+    /* @__PURE__ */ s("div", { className: "flex gap-ds-05 border-b border-surface-border-strong pb-ds-03", children: Array.from({ length: 5 }).map((t, e) => /* @__PURE__ */ s(A, { className: "h-[12px] w-[64px] bg-surface-raised-hover" }, e)) }),
     /* @__PURE__ */ o("div", { className: "space-y-ds-04", children: [
-      /* @__PURE__ */ s(A, { className: "h-ds-md w-full bg-surface-3" }),
-      /* @__PURE__ */ s(A, { className: "h-ds-md w-full bg-surface-3" }),
-      /* @__PURE__ */ s(A, { className: "h-ds-md w-4/5 bg-surface-3" })
+      /* @__PURE__ */ s(A, { className: "h-ds-md w-full bg-surface-raised-hover" }),
+      /* @__PURE__ */ s(A, { className: "h-ds-md w-full bg-surface-raised-hover" }),
+      /* @__PURE__ */ s(A, { className: "h-ds-md w-4/5 bg-surface-raised-hover" })
     ] })
   ] });
 }
-const Ft = n.forwardRef(function({
+const Vt = n.forwardRef(function({
   task: e,
   loading: r = !1,
   open: a,
@@ -1603,22 +1604,22 @@ const Ft = n.forwardRef(function({
   columns: d,
   members: f,
   activities: m = [],
-  enrichedComments: p,
+  enrichedComments: h,
   clientMode: u = !1,
   clientEditableFields: x = ["priority", "dueDate"],
-  headerSlot: g,
-  extraTabs: N = [],
-  onTitleUpdate: b,
-  onPropertyUpdate: v,
+  headerSlot: b,
+  extraTabs: v = [],
+  onTitleUpdate: g,
+  onPropertyUpdate: N,
   onAssign: y,
   onUnassign: w,
   onCreateSubtask: D,
   onToggleSubtask: R,
-  onRequestReview: T,
-  onUpdateReviewStatus: k,
-  onPostComment: P,
+  onRequestReview: k,
+  onUpdateReviewStatus: E,
+  onPostComment: L,
   onUploadFile: j,
-  onUploadDeliverable: pe,
+  onUploadDeliverable: he,
   onDeleteFile: O,
   onTabChange: I,
   renderEditor: M,
@@ -1629,73 +1630,73 @@ const Ft = n.forwardRef(function({
   className: J,
   ...ls
 }, ds) {
-  var xe, Ne, ve;
-  const [E, he] = n.useState(u ? "conversation" : "subtasks"), [Q, q] = n.useState(!1), [ge, G] = n.useState(""), Y = n.useRef(null);
+  var xe, ve, Ne;
+  const [T, pe] = n.useState(u ? "conversation" : "subtasks"), [Q, q] = n.useState(!1), [be, G] = n.useState(""), Y = n.useRef(null);
   n.useEffect(() => {
     e && (G(e.title), q(!1));
   }, [e == null ? void 0 : e.id]), n.useEffect(() => {
-    a && he(u ? "conversation" : "subtasks");
+    a && pe(u ? "conversation" : "subtasks");
   }, [a, u]);
   const us = n.useCallback((c) => {
-    he(c), I == null || I(c);
+    pe(c), I == null || I(c);
   }, [I]), ms = n.useCallback((c, C) => {
-    u && !x.includes(c) || v == null || v(c, C);
-  }, [u, x, v]), fs = n.useCallback((c) => {
+    u && !x.includes(c) || N == null || N(c, C);
+  }, [u, x, N]), fs = n.useCallback((c) => {
     y == null || y(c);
-  }, [y]), ps = n.useCallback((c) => {
+  }, [y]), hs = n.useCallback((c) => {
     w == null || w(c);
-  }, [w]), hs = n.useCallback((c) => {
+  }, [w]), ps = n.useCallback((c) => {
     D == null || D(c);
-  }, [D]), gs = n.useCallback((c, C) => {
+  }, [D]), bs = n.useCallback((c, C) => {
     R == null || R(c, C);
-  }, [R]), bs = n.useCallback((c) => {
-    T == null || T(c);
-  }, [T]), xs = n.useCallback((c, C, As) => {
-    k == null || k(c, C, As);
-  }, [k]), Ns = n.useCallback((c, C) => {
-    P == null || P(c, C);
-  }, [P]), vs = n.useCallback((c, C) => {
+  }, [R]), gs = n.useCallback((c) => {
+    k == null || k(c);
+  }, [k]), xs = n.useCallback((c, C, As) => {
+    E == null || E(c, C, As);
+  }, [E]), vs = n.useCallback((c, C) => {
+    L == null || L(c, C);
+  }, [L]), Ns = n.useCallback((c, C) => {
     j == null || j(c, C);
   }, [j]), ws = n.useCallback((c) => {
     O == null || O(c);
   }, [O]), X = n.useCallback((...c) => {
   }, []), ys = n.useCallback((c, C) => {
-  }, []), be = () => {
+  }, []), ge = () => {
     q(!1);
-    const c = ge.trim();
-    c && c !== (e == null ? void 0 : e.title) ? b == null || b(c) : e && G(e.title);
+    const c = be.trim();
+    c && c !== (e == null ? void 0 : e.title) ? g == null || g(c) : e && G(e.title);
   }, Rs = (c) => {
-    c.key === "Enter" && (c.preventDefault(), be()), c.key === "Escape" && (q(!1), e && G(e.title));
+    c.key === "Enter" && (c.preventDefault(), ge()), c.key === "Escape" && (q(!1), e && G(e.title));
   };
   n.useEffect(() => {
     Q && Y.current && (Y.current.focus(), Y.current.select());
   }, [Q]);
-  const Cs = (xe = d.find((c) => c.isTerminal)) == null ? void 0 : xe.id, Ds = ((Ne = d.find((c) => c.isDefault)) == null ? void 0 : Ne.id) || ((ve = d[0]) == null ? void 0 : ve.id) || "", Is = u ? Te.filter((c) => c.id === "conversation") : Te, Ts = N.filter((c) => c.position === "before"), ks = N.filter((c) => c.position !== "before"), Es = p || (e == null ? void 0 : e.comments) || [];
-  return /* @__PURE__ */ s(rt, { open: a, onOpenChange: i, children: /* @__PURE__ */ o(
-    at,
+  const Cs = (xe = d.find((c) => c.isTerminal)) == null ? void 0 : xe.id, Ds = ((ve = d.find((c) => c.isDefault)) == null ? void 0 : ve.id) || ((Ne = d[0]) == null ? void 0 : Ne.id) || "", Is = u ? Te.filter((c) => c.id === "conversation") : Te, Ts = v.filter((c) => c.position === "before"), ks = v.filter((c) => c.position !== "before"), Es = h || (e == null ? void 0 : e.comments) || [];
+  return /* @__PURE__ */ s(nt, { open: a, onOpenChange: i, children: /* @__PURE__ */ o(
+    it,
     {
       ref: ds,
       side: "right",
-      className: h(
+      className: p(
         /* 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-surface-border-strong bg-surface-2",
+        "border-l border-surface-border-strong bg-surface-raised",
         J
       ),
       ...ls,
       children: [
-        /* @__PURE__ */ s(it, { children: /* @__PURE__ */ s(nt, { children: (e == null ? void 0 : e.title) || "Task Details" }) }),
-        r || !e ? /* @__PURE__ */ s(_t, {}) : /* @__PURE__ */ o(ke, { children: [
+        /* @__PURE__ */ s(ct, { children: /* @__PURE__ */ s(ot, { children: (e == null ? void 0 : e.title) || "Task Details" }) }),
+        r || !e ? /* @__PURE__ */ s(Bt, {}) : /* @__PURE__ */ o(ke, { children: [
           /* @__PURE__ */ o("div", { className: "shrink-0 border-b border-surface-border-strong px-ds-06 pb-ds-05 pt-ds-06", children: [
             !u && Q ? /* @__PURE__ */ s(
               "input",
               {
                 ref: Y,
                 type: "text",
-                value: ge,
+                value: be,
                 onChange: (c) => G(c.target.value),
-                onBlur: be,
+                onBlur: ge,
                 onKeyDown: Rs,
                 className: "w-full bg-transparent text-ds-lg font-semibold text-surface-fg outline-none"
               }
@@ -1715,7 +1716,7 @@ const Ft = n.forwardRef(function({
               }
             ),
             e.parentTaskId && /* @__PURE__ */ s("p", { className: "mt-ds-02 text-ds-sm text-surface-fg-subtle", children: "Subtask" }),
-            g && /* @__PURE__ */ s("div", { className: "mt-ds-03 flex items-center gap-ds-03", children: g })
+            b && /* @__PURE__ */ s("div", { className: "mt-ds-03 flex items-center gap-ds-03", children: b })
           ] }),
           /* @__PURE__ */ o("div", { className: "flex-1 overflow-y-auto", children: [
             /* @__PURE__ */ s("div", { className: "border-b border-surface-border-strong px-ds-06 py-ds-05", children: /* @__PURE__ */ s(
@@ -1726,14 +1727,14 @@ const Ft = n.forwardRef(function({
                 members: f,
                 onUpdate: ms,
                 onAssign: fs,
-                onUnassign: ps,
+                onUnassign: hs,
                 readOnly: u,
                 editableFields: u ? x : void 0,
                 renderPriorityIndicator: Z,
                 renderDatePicker: $
               }
             ) }),
-            /* @__PURE__ */ s("div", { className: "sticky top-0 z-raised bg-surface-1 px-ds-06", children: /* @__PURE__ */ s(ct, { value: E, onValueChange: us, children: /* @__PURE__ */ o(lt, { variant: "line", children: [
+            /* @__PURE__ */ s("div", { className: "sticky top-0 z-raised bg-surface-overlay px-ds-06", children: /* @__PURE__ */ s(dt, { value: T, onValueChange: us, children: /* @__PURE__ */ o(ut, { variant: "line", children: [
               Ts.map((c) => /* @__PURE__ */ o(ee, { value: c.id, children: [
                 c.icon && /* @__PURE__ */ s("span", { className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm shrink-0", children: c.icon }),
                 c.label
@@ -1747,73 +1748,84 @@ const Ft = n.forwardRef(function({
                 c.label
               ] }, c.id))
             ] }) }) }),
-            /* @__PURE__ */ o("div", { className: "px-ds-06 py-ds-05", children: [
-              E === "subtasks" && /* @__PURE__ */ s(
-                ss,
-                {
-                  subtasks: e.subtasks ?? [],
-                  terminalColumnId: Cs,
-                  projectId: e.projectId,
-                  parentTaskId: e.id,
-                  defaultColumnId: Ds,
-                  onCreateSubtask: u ? X : hs,
-                  onToggleSubtask: u ? ys : gs,
-                  readOnly: u
-                }
-              ),
-              E === "review" && !u && /* @__PURE__ */ s(
-                as,
-                {
-                  reviews: e.reviewRequests,
-                  members: f,
-                  onRequestReview: bs,
-                  onUpdateStatus: xs
-                }
-              ),
-              E === "conversation" && /* @__PURE__ */ s(
-                ts,
-                {
-                  comments: Es,
-                  taskVisibility: e.visibility,
-                  onPostComment: Ns,
-                  clientMode: u,
-                  renderEditor: M,
-                  renderViewer: U
-                }
-              ),
-              E === "files" && /* @__PURE__ */ s(
-                rs,
-                {
-                  files: e.files ?? [],
-                  onUpload: u ? X : vs,
-                  onDelete: u ? X : ws,
-                  isUploading: l,
-                  readOnly: u
-                }
-              ),
-              E === "activity" && /* @__PURE__ */ s(ns, { activities: m }),
-              N.map(
-                (c) => E === c.id ? /* @__PURE__ */ s(n.Fragment, { children: c.content }, c.id) : null
-              )
-            ] })
+            /* @__PURE__ */ s(rt, { mode: "wait", children: /* @__PURE__ */ o(
+              at.div,
+              {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                transition: { duration: 0.15 },
+                className: "px-ds-06 py-ds-05",
+                children: [
+                  T === "subtasks" && /* @__PURE__ */ s(
+                    ss,
+                    {
+                      subtasks: e.subtasks ?? [],
+                      terminalColumnId: Cs,
+                      projectId: e.projectId,
+                      parentTaskId: e.id,
+                      defaultColumnId: Ds,
+                      onCreateSubtask: u ? X : ps,
+                      onToggleSubtask: u ? ys : bs,
+                      readOnly: u
+                    }
+                  ),
+                  T === "review" && !u && /* @__PURE__ */ s(
+                    as,
+                    {
+                      reviews: e.reviewRequests,
+                      members: f,
+                      onRequestReview: gs,
+                      onUpdateStatus: xs
+                    }
+                  ),
+                  T === "conversation" && /* @__PURE__ */ s(
+                    ts,
+                    {
+                      comments: Es,
+                      taskVisibility: e.visibility,
+                      onPostComment: vs,
+                      clientMode: u,
+                      renderEditor: M,
+                      renderViewer: U
+                    }
+                  ),
+                  T === "files" && /* @__PURE__ */ s(
+                    rs,
+                    {
+                      files: e.files ?? [],
+                      onUpload: u ? X : Ns,
+                      onDelete: u ? X : ws,
+                      isUploading: l,
+                      readOnly: u
+                    }
+                  ),
+                  T === "activity" && /* @__PURE__ */ s(ns, { activities: m }),
+                  v.map(
+                    (c) => T === c.id ? /* @__PURE__ */ s(n.Fragment, { children: c.content }, c.id) : null
+                  )
+                ]
+              },
+              T
+            ) })
           ] })
         ] })
       ]
     }
   ) });
 });
-Ft.displayName = "TaskDetailPanel";
+Vt.displayName = "TaskDetailPanel";
 export {
   ns as A,
   ts as C,
   rs as F,
   qe as M,
-  vt as P,
+  yt as P,
   as as R,
   ss as S,
-  nr as T,
+  cr as T,
   Ye as V,
-  Ft as a,
+  Vt as a,
   cs as b,
   es as c,
   Xe as d,