@devalok/shilp-sutra-karm 0.18.1 → 0.20.0

package/dist/tasks/index.js

@@ -1,11 +1,769 @@
 "use client";
-import { A as e, C as T, F as i, R as t, S as b, T as o, a as r } from "../_chunks/task-detail-panel.js";
+import { jsx as e, jsxs as c, Fragment as E } from "react/jsx-runtime";
+import * as i from "react";
+import { cn as p } from "@devalok/shilp-sutra/ui/lib/utils";
+import { Tabs as J, TabsList as ee, TabsTrigger as se, TabsContent as te } from "@devalok/shilp-sutra/ui";
+import { Skeleton as v } from "@devalok/shilp-sutra/ui/skeleton";
+import { P as ae } from "../_chunks/task-detail-panel.js";
+import { c as We, A as qe, d as ze, C as Qe, e as Ue, f as Xe, g as Ze, F as Je, M as es, h as ss, i as ts, j as as, k as rs, l as ns, R as cs, m as is, n as ls, o as os, p as ds, S as us, T as fs, a as ms, b as ps, V as gs } from "../_chunks/task-detail-panel.js";
+import { Avatar as M, AvatarImage as O, AvatarFallback as A } from "@devalok/shilp-sutra/ui/avatar";
+import { MemberPicker as _ } from "@devalok/shilp-sutra/composed/member-picker";
+import { getInitials as L } from "@devalok/shilp-sutra/composed/lib/string-utils";
+import { IconChevronDown as F, IconCheck as V, IconArrowDown as re, IconMinus as ne, IconArrowUp as ce, IconAlertTriangleFilled as ie, IconX as B, IconPlus as j, IconCalendarEvent as le, IconLock as oe, IconWorld as de } from "@tabler/icons-react";
+import { Popover as T, PopoverTrigger as P, PopoverContent as C } from "@devalok/shilp-sutra/ui/popover";
+import { Dialog as ue, DialogContent as fe, DialogHeader as me, DialogTitle as pe, DialogDescription as ge, DialogFooter as he, DialogClose as be } from "@devalok/shilp-sutra/ui/dialog";
+import { Button as Y } from "@devalok/shilp-sutra/ui/button";
+function H(r) {
+  return null;
+}
+H.displayName = "TaskPanelTab";
+const xe = H;
+function K({ children: r, className: s }) {
+  return /* @__PURE__ */ e("div", { className: p("flex flex-col overflow-hidden h-full", s), children: r });
+}
+K.displayName = "TaskPanelRoot";
+function $({ children: r, className: s }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: p(
+        "shrink-0 border-b border-surface-border-strong px-ds-06 pb-ds-05 pt-ds-06",
+        s
+      ),
+      children: r
+    }
+  );
+}
+$.displayName = "TaskPanelHeader";
+function G({
+  value: r,
+  editable: s = !1,
+  onUpdate: n,
+  subtask: l = !1,
+  className: f
+}) {
+  const [u, h] = i.useState(!1), [o, t] = i.useState(r), m = i.useRef(null);
+  i.useEffect(() => {
+    u || t(r);
+  }, [r, u]), i.useEffect(() => {
+    u && m.current && (m.current.focus(), m.current.select());
+  }, [u]);
+  const g = () => {
+    h(!1);
+    const x = o.trim();
+    x && x !== r ? n == null || n(x) : t(r);
+  };
+  return /* @__PURE__ */ c("div", { className: f, children: [
+    l && /* @__PURE__ */ e("p", { className: "text-ds-xs text-surface-fg-subtle uppercase tracking-wide mb-ds-01", children: "Subtask" }),
+    s && u ? /* @__PURE__ */ e(
+      "input",
+      {
+        ref: m,
+        type: "text",
+        value: o,
+        onChange: (x) => t(x.target.value),
+        onBlur: g,
+        onKeyDown: (x) => {
+          x.key === "Enter" && (x.preventDefault(), g()), x.key === "Escape" && (h(!1), t(r));
+        },
+        className: "w-full bg-transparent text-ds-lg font-semibold text-surface-fg outline-none"
+      }
+    ) : s ? /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          s && h(!0);
+        },
+        className: "w-full cursor-text text-left text-ds-lg font-semibold text-surface-fg transition-colors hover:text-accent-11",
+        children: r
+      }
+    ) : /* @__PURE__ */ e("h2", { className: "text-ds-lg font-semibold text-surface-fg", children: r })
+  ] });
+}
+G.displayName = "TaskPanelTitle";
+function W({ children: r, className: s }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: p(
+        "border-b border-surface-border-strong px-ds-06 py-ds-05 space-y-0",
+        s
+      ),
+      children: r
+    }
+  );
+}
+W.displayName = "TaskPanelProperties";
+function q({ icon: r, label: s, children: n, className: l }) {
+  return /* @__PURE__ */ c("div", { className: p("flex items-center gap-ds-04 py-ds-03", l), children: [
+    /* @__PURE__ */ c("div", { className: "flex items-center gap-ds-03 w-[120px] shrink-0 text-ds-sm text-surface-fg-muted [&>svg]:h-ico-sm [&>svg]:w-ico-sm", children: [
+      r,
+      /* @__PURE__ */ e("span", { children: s })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: n })
+  ] });
+}
+q.displayName = "TaskPanelProperty";
+function z({
+  defaultTab: r,
+  onTabChange: s,
+  children: n,
+  className: l
+}) {
+  const [f, u] = i.useState(r), h = i.useCallback(
+    (t) => {
+      u(t), s == null || s(t);
+    },
+    [s]
+  ), o = [];
+  return i.Children.toArray(n).forEach((t) => {
+    i.isValidElement(t) && t.type === xe && o.push(t.props);
+  }), /* @__PURE__ */ c(
+    J,
+    {
+      value: f,
+      onValueChange: h,
+      className: p("flex flex-col flex-1 min-h-0", l),
+      children: [
+        /* @__PURE__ */ e("div", { className: "sticky top-0 bg-surface-2 z-raised px-ds-06", children: /* @__PURE__ */ e(ee, { variant: "line", children: o.map((t) => /* @__PURE__ */ c(se, { value: t.id, children: [
+          t.icon && /* @__PURE__ */ e("span", { className: "[&>svg]:h-ico-sm [&>svg]:w-ico-sm [&>svg]:stroke-[1.5] shrink-0", children: t.icon }),
+          t.label
+        ] }, t.id)) }) }),
+        /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto px-ds-06 py-ds-05", children: o.map((t) => /* @__PURE__ */ e(te, { value: t.id, className: "mt-0", children: t.children }, t.id)) })
+      ]
+    }
+  );
+}
+z.displayName = "TaskPanelTabs";
+function Q({ className: r }) {
+  return /* @__PURE__ */ c("div", { className: p("space-y-ds-06 p-ds-06", r), children: [
+    /* @__PURE__ */ e(v, { className: "h-ds-xs-plus w-3/4 bg-surface-3" }),
+    /* @__PURE__ */ e("div", { className: "space-y-ds-04", children: Array.from({ length: 6 }).map((s, n) => /* @__PURE__ */ c("div", { className: "flex items-center gap-ds-04", children: [
+      /* @__PURE__ */ e(v, { className: "h-[16px] w-[120px] bg-surface-3" }),
+      /* @__PURE__ */ e(v, { className: "h-[16px] flex-1 bg-surface-3" })
+    ] }, n)) }),
+    /* @__PURE__ */ e("div", { className: "flex gap-ds-05 border-b border-surface-border-strong pb-ds-03", children: Array.from({ length: 5 }).map((s, n) => /* @__PURE__ */ e(v, { className: "h-[12px] w-[64px] bg-surface-3" }, n)) }),
+    /* @__PURE__ */ c("div", { className: "space-y-ds-04", children: [
+      /* @__PURE__ */ e(v, { className: "h-ds-md w-full bg-surface-3" }),
+      /* @__PURE__ */ e(v, { className: "h-ds-md w-full bg-surface-3" }),
+      /* @__PURE__ */ e(v, { className: "h-ds-md w-4/5 bg-surface-3" })
+    ] })
+  ] });
+}
+Q.displayName = "TaskPanelLoading";
+const Ke = Object.assign(K, {
+  Header: $,
+  Title: G,
+  Properties: W,
+  Property: q,
+  Tabs: z,
+  Tab: H,
+  Loading: Q
+}), Ne = i.forwardRef(
+  function({ columns: s, value: n, onChange: l, readOnly: f, className: u }, h) {
+    const [o, t] = i.useState(!1), m = s.find((a) => a.id === n), g = (m == null ? void 0 : m.name) ?? "Select column";
+    return f ? /* @__PURE__ */ e("span", { className: p("px-ds-03 py-ds-02 text-ds-md text-surface-fg", u), children: g }) : /* @__PURE__ */ c(T, { open: o, onOpenChange: t, children: [
+      /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ c(
+        "button",
+        {
+          ref: h,
+          type: "button",
+          className: p(
+            "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",
+            u
+          ),
+          children: [
+            /* @__PURE__ */ e("span", { children: g }),
+            /* @__PURE__ */ e(F, { className: "h-3 w-3 text-surface-fg-subtle" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e(
+        C,
+        {
+          className: "w-[180px] border-surface-border-strong bg-surface-1 p-ds-02",
+          align: "start",
+          sideOffset: 4,
+          children: s.map((a) => /* @__PURE__ */ c(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                l(a.id), t(!1);
+              },
+              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",
+                a.id === n ? "text-accent-11" : "text-surface-fg"
+              ),
+              children: [
+                a.name,
+                a.id === n && /* @__PURE__ */ e(V, { className: "ml-auto h-ico-sm w-ico-sm" })
+              ]
+            },
+            a.id
+          ))
+        }
+      )
+    ] });
+  }
+);
+Ne.displayName = "TaskColumnPicker";
+const ye = {
+  URGENT: { icon: ie, className: "text-error-9" },
+  HIGH: { icon: ce, className: "text-warning-9" },
+  MEDIUM: { icon: ne, className: "text-surface-fg-muted" },
+  LOW: { icon: re, className: "text-surface-fg-subtle" }
+}, ke = ["URGENT", "HIGH", "MEDIUM", "LOW"];
+function I({ priority: r }) {
+  const s = ye[r], n = s.icon;
+  return /* @__PURE__ */ c("div", { className: "flex items-center gap-ds-02b", children: [
+    /* @__PURE__ */ e(n, { className: p("h-ico-sm w-ico-sm", s.className) }),
+    /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg", children: ae[r] ?? r })
+  ] });
+}
+const we = i.forwardRef(
+  function({ value: s, onChange: n, readOnly: l, className: f }, u) {
+    const [h, o] = i.useState(!1);
+    return l ? /* @__PURE__ */ e("div", { className: p("px-ds-03 py-ds-02", f), children: /* @__PURE__ */ e(I, { priority: s }) }) : /* @__PURE__ */ c(T, { open: h, onOpenChange: o, children: [
+      /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ c(
+        "button",
+        {
+          ref: u,
+          type: "button",
+          className: p(
+            "inline-flex items-center gap-ds-02b rounded-ds-md px-ds-03 py-ds-02 transition-colors hover:bg-surface-3",
+            f
+          ),
+          children: [
+            /* @__PURE__ */ e(I, { priority: s }),
+            /* @__PURE__ */ e(F, { className: "h-3 w-3 text-surface-fg-subtle" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e(
+        C,
+        {
+          className: "w-[180px] border-surface-border-strong bg-surface-1 p-ds-02",
+          align: "start",
+          sideOffset: 4,
+          children: ke.map((t) => /* @__PURE__ */ c(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                n(t), o(!1);
+              },
+              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",
+                t === s && "bg-surface-3"
+              ),
+              children: [
+                /* @__PURE__ */ e(I, { priority: t }),
+                t === s && /* @__PURE__ */ e(V, { className: "ml-auto h-ico-sm w-ico-sm text-accent-11" })
+              ]
+            },
+            t
+          ))
+        }
+      )
+    ] });
+  }
+);
+we.displayName = "TaskPriorityPicker";
+const ve = i.forwardRef(
+  function({ members: s, value: n, onChange: l, placeholder: f = "No owner", readOnly: u, className: h }, o) {
+    const t = s.find((a) => a.id === n) ?? null, m = i.useMemo(
+      () => s.map((a) => ({ id: a.id, name: a.name, avatar: a.image ?? void 0 })),
+      [s]
+    ), g = i.useCallback(
+      (a) => {
+        l(a === n ? null : a);
+      },
+      [l, n]
+    );
+    return u ? /* @__PURE__ */ e("div", { className: p("inline-flex items-center gap-ds-03 px-ds-03 py-ds-02", h), children: t ? /* @__PURE__ */ c(E, { children: [
+      /* @__PURE__ */ c(M, { className: "h-ico-md w-ico-md", children: [
+        t.image && /* @__PURE__ */ e(O, { src: t.image, alt: t.name }),
+        /* @__PURE__ */ e(A, { className: "bg-surface-3 text-ds-xs font-semibold text-accent-fg", children: L(t.name) })
+      ] }),
+      /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg", children: t.name })
+    ] }) : /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg-subtle", children: f }) }) : /* @__PURE__ */ e(
+      _,
+      {
+        members: m,
+        selectedIds: n ? [n] : [],
+        onSelect: g,
+        children: /* @__PURE__ */ e(
+          "button",
+          {
+            ref: o,
+            type: "button",
+            className: p(
+              "inline-flex items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02 transition-colors hover:bg-surface-3",
+              h
+            ),
+            children: t ? /* @__PURE__ */ c(E, { children: [
+              /* @__PURE__ */ c(M, { className: "h-ico-md w-ico-md", children: [
+                t.image && /* @__PURE__ */ e(O, { src: t.image, alt: t.name }),
+                /* @__PURE__ */ e(A, { className: "bg-surface-3 text-ds-xs font-semibold text-accent-fg", children: L(t.name) })
+              ] }),
+              /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg", children: t.name })
+            ] }) : /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg-subtle", children: f })
+          }
+        )
+      }
+    );
+  }
+);
+ve.displayName = "TaskMemberPicker";
+const Te = i.forwardRef(
+  function({ members: s, value: n, onAssign: l, onUnassign: f, readOnly: u, className: h }, o) {
+    const t = n.map((a) => a.id), m = i.useMemo(
+      () => s.map((a) => ({ id: a.id, name: a.name, avatar: a.image ?? void 0 })),
+      [s]
+    ), g = i.useCallback(
+      (a) => {
+        t.includes(a) ? f(a) : l(a);
+      },
+      [t, l, f]
+    );
+    return /* @__PURE__ */ c("div", { ref: o, className: p("flex flex-wrap items-center gap-ds-02b", h), children: [
+      n.map((a) => /* @__PURE__ */ c(
+        "div",
+        {
+          className: "inline-flex items-center gap-ds-02 rounded-ds-full bg-surface-2 py-ds-01 pl-ds-01 pr-ds-03",
+          children: [
+            /* @__PURE__ */ c(M, { className: "h-ico-sm w-ico-sm", children: [
+              a.image && /* @__PURE__ */ e(O, { src: a.image, alt: a.name }),
+              /* @__PURE__ */ e(A, { className: "bg-surface-3 text-ds-xs font-semibold text-accent-fg", children: L(a.name) })
+            ] }),
+            /* @__PURE__ */ e("span", { className: "text-ds-sm text-surface-fg-muted", children: a.name.split(" ")[0] }),
+            !u && /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                onClick: () => f(a.id),
+                className: "ml-ds-01 rounded-ds-full p-ds-01 transition-colors hover:bg-surface-3",
+                "aria-label": `Remove ${a.name}`,
+                children: /* @__PURE__ */ e(B, { className: "h-ds-03 w-ds-03 text-surface-fg-subtle" })
+              }
+            )
+          ]
+        },
+        a.id
+      )),
+      !u && /* @__PURE__ */ e(
+        _,
+        {
+          members: m,
+          selectedIds: t,
+          onSelect: g,
+          multiple: !0,
+          children: /* @__PURE__ */ e(
+            "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",
+              "aria-label": "Add assignee",
+              children: /* @__PURE__ */ e(j, { className: "h-3 w-3 text-surface-fg-subtle" })
+            }
+          )
+        }
+      ),
+      u && n.length === 0 && /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg-subtle", children: "None" })
+    ] });
+  }
+);
+Te.displayName = "TaskAssigneePicker";
+function Pe(r) {
+  return r.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function Ce(r) {
+  const s = r.getFullYear(), n = String(r.getMonth() + 1).padStart(2, "0"), l = String(r.getDate()).padStart(2, "0");
+  return `${s}-${n}-${l}`;
+}
+function De() {
+  const r = /* @__PURE__ */ new Date(), s = r.getDay(), n = s === 0 ? 1 : 8 - s, l = new Date(r);
+  return l.setDate(r.getDate() + n), l;
+}
+function R(r) {
+  const s = /* @__PURE__ */ new Date();
+  return s.setDate(s.getDate() + r), s;
+}
+const Ie = i.forwardRef(
+  function({ value: s, onChange: n, presets: l = !0, readOnly: f, className: u }, h) {
+    const [o, t] = i.useState(!1), m = i.useMemo(() => s ? s instanceof Date ? s : new Date(s) : null, [s]), g = m ? Pe(m) : "No date", a = (y) => {
+      n(y), t(!1);
+    }, k = (y) => {
+      n(y.target.value ? new Date(y.target.value) : null);
+    }, x = (y) => {
+      y.stopPropagation(), n(null);
+    };
+    return f ? /* @__PURE__ */ e("span", { className: p("px-ds-03 py-ds-02 text-ds-md text-surface-fg", u), children: g }) : /* @__PURE__ */ c("div", { className: p("inline-flex items-center gap-ds-02", u), children: [
+      /* @__PURE__ */ c(T, { open: o, onOpenChange: t, children: [
+        /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ c(
+          "button",
+          {
+            ref: h,
+            type: "button",
+            className: "inline-flex items-center gap-ds-02b rounded-ds-md px-ds-03 py-ds-02 text-ds-md transition-colors hover:bg-surface-3",
+            children: [
+              /* @__PURE__ */ e(le, { className: "h-ico-sm w-ico-sm text-surface-fg-subtle", stroke: 1.5 }),
+              /* @__PURE__ */ e("span", { className: m ? "text-surface-fg" : "text-surface-fg-subtle", children: g })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          C,
+          {
+            className: "w-[220px] border-surface-border-strong bg-surface-1 p-ds-03",
+            align: "start",
+            sideOffset: 4,
+            children: /* @__PURE__ */ c("div", { className: "space-y-ds-03", children: [
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  type: "date",
+                  value: m ? Ce(m) : "",
+                  onChange: k,
+                  "aria-label": "Select date",
+                  className: "w-full rounded-ds-md border border-surface-border-strong bg-transparent px-ds-03 py-ds-02 text-ds-md text-surface-fg outline-none focus:border-accent-7"
+                }
+              ),
+              l && /* @__PURE__ */ c("div", { className: "space-y-ds-01", children: [
+                /* @__PURE__ */ e("p", { className: "text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle", children: "Quick select" }),
+                /* @__PURE__ */ c("div", { className: "grid grid-cols-2 gap-ds-02", children: [
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => a(/* @__PURE__ */ new Date()),
+                      className: "rounded-ds-md px-ds-03 py-ds-02 text-left text-ds-sm text-surface-fg transition-colors hover:bg-surface-3",
+                      children: "Today"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => a(R(1)),
+                      className: "rounded-ds-md px-ds-03 py-ds-02 text-left text-ds-sm text-surface-fg transition-colors hover:bg-surface-3",
+                      children: "Tomorrow"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => a(De()),
+                      className: "rounded-ds-md px-ds-03 py-ds-02 text-left text-ds-sm text-surface-fg transition-colors hover:bg-surface-3",
+                      children: "Next Monday"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => a(R(7)),
+                      className: "rounded-ds-md px-ds-03 py-ds-02 text-left text-ds-sm text-surface-fg transition-colors hover:bg-surface-3",
+                      children: "+7 days"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => a(R(14)),
+                      className: "rounded-ds-md px-ds-03 py-ds-02 text-left text-ds-sm text-surface-fg transition-colors hover:bg-surface-3",
+                      children: "+14 days"
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => a(null),
+                      className: "rounded-ds-md px-ds-03 py-ds-02 text-left text-ds-sm text-surface-fg-subtle transition-colors hover:bg-surface-3",
+                      children: "Clear"
+                    }
+                  )
+                ] })
+              ] })
+            ] })
+          }
+        )
+      ] }),
+      m && /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: x,
+          className: "rounded-ds-md p-ds-02 transition-colors hover:bg-surface-3",
+          "aria-label": "Clear due date",
+          children: /* @__PURE__ */ e(B, { className: "h-3 w-3 text-surface-fg-subtle" })
+        }
+      )
+    ] });
+  }
+);
+Ie.displayName = "TaskDatePicker";
+const Re = i.forwardRef(
+  function({ value: s, onChange: n, availableLabels: l = [], readOnly: f, className: u }, h) {
+    const [o, t] = i.useState(""), [m, g] = i.useState(!1), [a, k] = i.useState(!1), x = i.useRef(null), y = i.useRef(!1), N = i.useMemo(() => {
+      const d = /* @__PURE__ */ new Map();
+      for (const b of l)
+        d.set(b.name, b.color);
+      return d;
+    }, [l]), w = i.useMemo(() => {
+      if (!o.trim()) return [];
+      const d = o.toLowerCase();
+      return l.filter(
+        (b) => b.name.toLowerCase().includes(d) && !s.includes(b.name)
+      );
+    }, [o, l, s]), D = (d) => {
+      const b = d.trim();
+      b && !s.includes(b) && n([...s, b]), t(""), g(!1), k(!1);
+    }, U = (d) => {
+      n(s.filter((b) => b !== d));
+    }, X = (d) => {
+      d.key === "Enter" && (d.preventDefault(), w.length > 0 ? D(w[0].name) : D(o)), d.key === "Escape" && (g(!1), t(""), k(!1));
+    }, Z = (d) => {
+      t(d.target.value);
+    };
+    return i.useEffect(() => {
+      k(o.trim().length > 0 && w.length > 0);
+    }, [w, o]), /* @__PURE__ */ c("div", { ref: h, className: p("flex flex-wrap items-center gap-ds-02b", u), children: [
+      s.map((d) => {
+        const b = N.get(d);
+        return /* @__PURE__ */ c(
+          "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: [
+              b && /* @__PURE__ */ e(
+                "span",
+                {
+                  className: "h-2 w-2 shrink-0 rounded-ds-full",
+                  style: { backgroundColor: b }
+                }
+              ),
+              d,
+              !f && /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => U(d),
+                  className: "rounded-ds-full p-ds-01 transition-colors hover:bg-surface-3",
+                  "aria-label": `Remove label ${d}`,
+                  children: /* @__PURE__ */ e(B, { className: "h-ds-03 w-ds-03" })
+                }
+              )
+            ]
+          },
+          d
+        );
+      }),
+      !f && (m ? /* @__PURE__ */ c(T, { open: a, onOpenChange: k, children: [
+        /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "inline-flex items-center gap-ds-02", children: /* @__PURE__ */ e(
+          "input",
+          {
+            ref: x,
+            type: "text",
+            value: o,
+            onChange: Z,
+            onKeyDown: X,
+            onBlur: () => {
+              if (y.current) {
+                y.current = !1;
+                return;
+              }
+              o.trim() ? D(o) : (g(!1), k(!1));
+            },
+            placeholder: "Label name",
+            "aria-label": "New label name",
+            className: "h-5 w-24 rounded border border-surface-border-strong bg-transparent px-ds-02b text-ds-sm text-surface-fg outline-none placeholder:text-surface-fg-subtle focus:border-surface-border",
+            autoFocus: !0
+          }
+        ) }) }),
+        w.length > 0 && /* @__PURE__ */ e(
+          C,
+          {
+            className: "w-[180px] border-surface-border-strong bg-surface-1 p-ds-02",
+            align: "start",
+            sideOffset: 4,
+            onOpenAutoFocus: (d) => d.preventDefault(),
+            children: w.map((d) => /* @__PURE__ */ c(
+              "button",
+              {
+                type: "button",
+                onMouseDown: (b) => {
+                  b.preventDefault(), y.current = !0, D(d.name);
+                },
+                className: "flex w-full items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-left text-ds-sm transition-colors hover:bg-surface-3",
+                children: [
+                  d.color && /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: "h-2 w-2 shrink-0 rounded-ds-full",
+                      style: { backgroundColor: d.color }
+                    }
+                  ),
+                  /* @__PURE__ */ e("span", { className: "text-surface-fg", children: d.name })
+                ]
+              },
+              d.name
+            ))
+          }
+        )
+      ] }) : /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: () => g(!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",
+          "aria-label": "Add label",
+          children: /* @__PURE__ */ e(j, { className: "h-3 w-3 text-surface-fg-subtle" })
+        }
+      )),
+      f && s.length === 0 && /* @__PURE__ */ e("span", { className: "text-ds-md text-surface-fg-subtle", children: "None" })
+    ] });
+  }
+);
+Re.displayName = "TaskLabelEditor";
+const S = [
+  {
+    value: "INTERNAL",
+    icon: oe,
+    label: "Internal",
+    description: "Only team members"
+  },
+  {
+    value: "EVERYONE",
+    icon: de,
+    label: "Everyone",
+    description: "Visible to clients"
+  }
+], Se = i.forwardRef(
+  function({ value: s, onChange: n, confirmOnPublic: l, readOnly: f, className: u }, h) {
+    const [o, t] = i.useState(!1), [m, g] = i.useState(!1), a = S.find((N) => N.value === s) ?? S[0], k = a.icon, x = (N) => {
+      if (N === s) {
+        t(!1);
+        return;
+      }
+      if (N === "EVERYONE" && l) {
+        t(!1), g(!0);
+        return;
+      }
+      n(N), t(!1);
+    }, y = () => {
+      n("EVERYONE"), g(!1);
+    };
+    return f ? /* @__PURE__ */ c("div", { className: p("inline-flex items-center gap-ds-02b px-ds-03 py-ds-02 text-ds-md text-surface-fg", u), children: [
+      /* @__PURE__ */ e(k, { className: "h-ico-sm w-ico-sm", stroke: 1.5 }),
+      /* @__PURE__ */ e("span", { children: a.label })
+    ] }) : /* @__PURE__ */ c(E, { children: [
+      /* @__PURE__ */ c(T, { open: o, onOpenChange: t, children: [
+        /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ c(
+          "button",
+          {
+            ref: h,
+            type: "button",
+            className: p(
+              "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",
+              u
+            ),
+            children: [
+              /* @__PURE__ */ e(k, { className: "h-ico-sm w-ico-sm", stroke: 1.5 }),
+              /* @__PURE__ */ e("span", { children: a.label }),
+              /* @__PURE__ */ e(F, { className: "h-3 w-3 text-surface-fg-subtle" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          C,
+          {
+            className: "w-[220px] border-surface-border-strong bg-surface-1 p-ds-02",
+            align: "start",
+            sideOffset: 4,
+            children: S.map((N) => {
+              const w = N.icon;
+              return /* @__PURE__ */ c(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => x(N.value),
+                  className: p(
+                    "flex w-full items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-left transition-colors",
+                    "hover:bg-surface-3",
+                    N.value === s && "bg-surface-3"
+                  ),
+                  children: [
+                    /* @__PURE__ */ e(w, { className: "h-ico-sm w-ico-sm shrink-0 text-surface-fg-muted", stroke: 1.5 }),
+                    /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ e("div", { className: "text-ds-md text-surface-fg", children: N.label }),
+                      /* @__PURE__ */ e("div", { className: "text-ds-xs text-surface-fg-subtle", children: N.description })
+                    ] }),
+                    N.value === s && /* @__PURE__ */ e(V, { className: "h-ico-sm w-ico-sm shrink-0 text-accent-11" })
+                  ]
+                },
+                N.value
+              );
+            })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(ue, { open: m, onOpenChange: g, children: /* @__PURE__ */ c(fe, { children: [
+        /* @__PURE__ */ c(me, { children: [
+          /* @__PURE__ */ e(pe, { children: "Make visible to everyone?" }),
+          /* @__PURE__ */ e(ge, { children: "This task will become visible to clients. Team-only comments and internal details may be exposed. Are you sure you want to continue?" })
+        ] }),
+        /* @__PURE__ */ c(he, { children: [
+          /* @__PURE__ */ e(be, { asChild: !0, children: /* @__PURE__ */ e(Y, { variant: "outline", children: "Cancel" }) }),
+          /* @__PURE__ */ e(Y, { onClick: y, children: "Confirm" })
+        ] })
+      ] }) })
+    ] });
+  }
+);
+Se.displayName = "TaskVisibilityPicker";
 export {
-  e as ActivityTab,
-  T as ConversationTab,
-  i as FilesTab,
-  t as ReviewTab,
-  b as SubtasksTab,
-  o as TaskDetailPanel,
-  r as TaskProperties
+  We as ActivityEntry,
+  qe as ActivityTab,
+  ze as ActivityTimeline,
+  Qe as ConversationTab,
+  Ue as FileDropZone,
+  Xe as FileItem,
+  Ze as FileList,
+  Je as FilesTab,
+  es as MessageBubble,
+  ss as MessageInput,
+  ts as MessageList,
+  as as ReviewCard,
+  rs as ReviewRequestButton,
+  ns as ReviewResponseForm,
+  cs as ReviewTab,
+  is as SubtaskAddForm,
+  ls as SubtaskItem,
+  os as SubtaskList,
+  ds as SubtaskProgress,
+  us as SubtasksTab,
+  fs as TaskActionRow,
+  Te as TaskAssigneePicker,
+  Ne as TaskColumnPicker,
+  Ie as TaskDatePicker,
+  ms as TaskDetailPanel,
+  Re as TaskLabelEditor,
+  ve as TaskMemberPicker,
+  Ke as TaskPanel,
+  we as TaskPriorityPicker,
+  ps as TaskProperties,
+  Se as TaskVisibilityPicker,
+  gs as VisibilityWarning
 };