@devalok/shilp-sutra-karm 0.1.0

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

@@ -0,0 +1,208 @@
+import { jsx as r, jsxs as c, Fragment as U } from "react/jsx-runtime";
+import * as d from "react";
+import { cn as _ } from "@devalok/shilp-sutra/ui";
+import { Sheet as ee, SheetContent as ie, SheetTitle as re } from "@devalok/shilp-sutra/ui";
+import { VisuallyHidden as se } from "@devalok/shilp-sutra/ui";
+import { Skeleton as t } from "@devalok/shilp-sutra/ui";
+import { Tabs as le, TabsList as ce, TabsTrigger as de } from "@devalok/shilp-sutra/ui";
+import { TaskProperties as te } from "./task-properties.js";
+import { SubtasksTab as ae } from "./subtasks-tab.js";
+import { ReviewTab as me } from "./review-tab.js";
+import { ConversationTab as fe } from "./conversation-tab.js";
+import { FilesTab as ne } from "./files-tab.js";
+import { ActivityTab as oe } from "./activity-tab.js";
+import { IconListCheck as be, IconGitPullRequest as he, IconMessageCircle as ue, IconPaperclip as pe, IconActivity as ve } from "@tabler/icons-react";
+const z = [
+  { id: "subtasks", label: "Subtasks", icon: be },
+  { id: "review", label: "Review", icon: he },
+  { id: "conversation", label: "Conversation", icon: ue },
+  { id: "files", label: "Files", icon: pe },
+  { id: "activity", label: "Activity", icon: ve }
+];
+function xe() {
+  return /* @__PURE__ */ c("div", { className: "space-y-ds-06 p-ds-06", children: [
+    /* @__PURE__ */ r(t, { className: "h-ds-xs-plus w-3/4 bg-field" }),
+    /* @__PURE__ */ r("div", { className: "space-y-ds-04", children: Array.from({ length: 6 }).map((i, m) => /* @__PURE__ */ c("div", { className: "flex items-center gap-ds-04", children: [
+      /* @__PURE__ */ r(t, { className: "h-4 w-[120px] bg-field" }),
+      /* @__PURE__ */ r(t, { className: "h-4 flex-1 bg-field" })
+    ] }, m)) }),
+    /* @__PURE__ */ r("div", { className: "flex gap-ds-05 border-b border-border pb-ds-03", children: Array.from({ length: 5 }).map((i, m) => /* @__PURE__ */ r(t, { className: "h-3 w-16 bg-field" }, m)) }),
+    /* @__PURE__ */ c("div", { className: "space-y-ds-04", children: [
+      /* @__PURE__ */ r(t, { className: "h-ds-md w-full bg-field" }),
+      /* @__PURE__ */ r(t, { className: "h-ds-md w-full bg-field" }),
+      /* @__PURE__ */ r(t, { className: "h-ds-md w-4/5 bg-field" })
+    ] })
+  ] });
+}
+function ye({
+  task: i,
+  loading: m = !1,
+  open: h,
+  onOpenChange: G,
+  columns: f,
+  members: j,
+  activities: H = [],
+  enrichedComments: J,
+  clientMode: s = !1,
+  clientEditableFields: A = ["priority", "dueDate"],
+  onTitleUpdate: u,
+  onPropertyUpdate: p,
+  onAssign: v,
+  onUnassign: x,
+  onCreateSubtask: y,
+  onToggleSubtask: N,
+  onRequestReview: T,
+  onUpdateReviewStatus: w,
+  onPostComment: g,
+  onUploadFile: I,
+  onDeleteFile: D,
+  onTabChange: E,
+  renderEditor: Q,
+  renderViewer: W,
+  renderPriorityIndicator: X,
+  renderDatePicker: Y,
+  isUploading: Z = !1
+}) {
+  var C, K, L;
+  const [a, B] = d.useState(s ? "conversation" : "subtasks"), [V, n] = d.useState(!1), [O, o] = d.useState(""), b = d.useRef(null);
+  d.useEffect(() => {
+    i && (o(i.title), n(!1));
+  }, [i == null ? void 0 : i.id]), d.useEffect(() => {
+    h && B(s ? "conversation" : "subtasks");
+  }, [h, s]);
+  const $ = (e) => {
+    B(e), E == null || E(e);
+  }, S = () => {
+    n(!1);
+    const e = O.trim();
+    e && e !== (i == null ? void 0 : i.title) ? u == null || u(e) : i && o(i.title);
+  }, q = (e) => {
+    e.key === "Enter" && (e.preventDefault(), S()), e.key === "Escape" && (n(!1), i && o(i.title));
+  };
+  d.useEffect(() => {
+    V && b.current && (b.current.focus(), b.current.select());
+  }, [V]);
+  const P = (C = f.find((e) => e.isTerminal)) == null ? void 0 : C.id, R = ((K = f.find((e) => e.isDefault)) == null ? void 0 : K.id) || ((L = f[0]) == null ? void 0 : L.id) || "", F = s ? z.filter((e) => e.id === "conversation") : z, k = J || (i == null ? void 0 : i.comments) || [];
+  return /* @__PURE__ */ r(ee, { open: h, onOpenChange: G, children: /* @__PURE__ */ c(
+    ie,
+    {
+      side: "right",
+      className: _(
+        /* intentional: task detail side panel takes 40% of screen, min 380px for form usability */
+        "w-full sm:max-w-none sm:w-[40%] min-w-[380px] p-0",
+        "flex flex-col overflow-hidden",
+        "border-l border-border bg-layer-01"
+      ),
+      children: [
+        /* @__PURE__ */ r(se, { children: /* @__PURE__ */ r(re, { children: (i == null ? void 0 : i.title) || "Task Details" }) }),
+        m || !i ? /* @__PURE__ */ r(xe, {}) : /* @__PURE__ */ c(U, { children: [
+          /* @__PURE__ */ c("div", { className: "shrink-0 border-b border-border px-ds-06 pb-ds-05 pt-ds-06", children: [
+            !s && V ? /* @__PURE__ */ r(
+              "input",
+              {
+                ref: b,
+                type: "text",
+                value: O,
+                onChange: (e) => o(e.target.value),
+                onBlur: S,
+                onKeyDown: q,
+                className: "w-full bg-transparent text-ds-lg font-semibold text-text-primary outline-none"
+              }
+            ) : (
+              // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+              /* @__PURE__ */ r(
+                "h2",
+                {
+                  onClick: s ? void 0 : () => n(!0),
+                  className: _(
+                    "text-ds-lg font-semibold text-text-primary",
+                    !s && "cursor-text hover:text-interactive transition-colors"
+                  ),
+                  children: i.title
+                }
+              )
+            ),
+            i.parentTaskId && /* @__PURE__ */ r("p", { className: "mt-ds-02 text-ds-sm text-text-placeholder", children: "Subtask" })
+          ] }),
+          /* @__PURE__ */ c("div", { className: "flex-1 overflow-y-auto", children: [
+            /* @__PURE__ */ r("div", { className: "border-b border-border px-ds-06 py-ds-05", children: /* @__PURE__ */ r(
+              te,
+              {
+                task: i,
+                columns: f,
+                members: j,
+                onUpdate: (e, l) => {
+                  s && !A.includes(e) || p == null || p(e, l);
+                },
+                onAssign: (e) => v == null ? void 0 : v(e),
+                onUnassign: (e) => x == null ? void 0 : x(e),
+                readOnly: s,
+                editableFields: s ? A : void 0,
+                renderPriorityIndicator: X,
+                renderDatePicker: Y
+              }
+            ) }),
+            /* @__PURE__ */ r("div", { className: "sticky top-0 z-raised bg-layer-01 px-ds-06", children: /* @__PURE__ */ r(le, { value: a, onValueChange: $, children: /* @__PURE__ */ r(ce, { variant: "line", children: F.map((e) => /* @__PURE__ */ c(de, { value: e.id, children: [
+              /* @__PURE__ */ r(e.icon, { className: "h-ico-sm w-ico-sm", stroke: 1.5 }),
+              e.label
+            ] }, e.id)) }) }) }),
+            /* @__PURE__ */ c("div", { className: "px-ds-06 py-ds-05", children: [
+              a === "subtasks" && /* @__PURE__ */ r(
+                ae,
+                {
+                  subtasks: i.subtasks ?? [],
+                  terminalColumnId: P,
+                  projectId: i.projectId,
+                  parentTaskId: i.id,
+                  defaultColumnId: R,
+                  onCreateSubtask: s ? () => {
+                  } : (e) => y == null ? void 0 : y(e),
+                  onToggleSubtask: s ? () => {
+                  } : (e, l) => N == null ? void 0 : N(e, l),
+                  readOnly: s
+                }
+              ),
+              a === "review" && !s && /* @__PURE__ */ r(
+                me,
+                {
+                  reviews: i.reviewRequests,
+                  members: j,
+                  onRequestReview: (e) => T == null ? void 0 : T(e),
+                  onUpdateStatus: (e, l, M) => w == null ? void 0 : w(e, l, M)
+                }
+              ),
+              a === "conversation" && /* @__PURE__ */ r(
+                fe,
+                {
+                  comments: k,
+                  taskVisibility: i.visibility,
+                  onPostComment: (e, l) => g == null ? void 0 : g(e, l),
+                  clientMode: s,
+                  renderEditor: Q,
+                  renderViewer: W
+                }
+              ),
+              a === "files" && /* @__PURE__ */ r(
+                ne,
+                {
+                  files: i.files ?? [],
+                  onUpload: s ? () => {
+                  } : (e, l) => I == null ? void 0 : I(e, l),
+                  onDelete: s ? () => {
+                  } : (e) => D == null ? void 0 : D(e),
+                  isUploading: Z,
+                  readOnly: s
+                }
+              ),
+              a === "activity" && /* @__PURE__ */ r(oe, { activities: H })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+ye.displayName = "TaskDetailPanel";
+export {
+  ye as TaskDetailPanel
+};

package/dist/tasks/task-properties.d.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+export interface Member {
+    id: string;
+    name: string;
+    email?: string;
+    image?: string | null;
+}
+export interface Column {
+    id: string;
+    name: string;
+    isDefault?: boolean;
+    isTerminal?: boolean;
+}
+interface TaskData {
+    id: string;
+    columnId: string;
+    column: {
+        id: string;
+        name: string;
+    };
+    ownerId: string | null;
+    owner: Member | null;
+    assignees: {
+        user: Member;
+    }[];
+    priority: 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT';
+    dueDate: string | null;
+    labels: string[];
+    visibility: 'INTERNAL' | 'EVERYONE';
+}
+interface TaskPropertiesProps {
+    task: TaskData;
+    columns: Column[];
+    members: Member[];
+    onUpdate: (field: string, value: unknown) => void;
+    onAssign: (userId: string) => void;
+    onUnassign: (userId: string) => void;
+    className?: string;
+    /** When true, most fields are display-only except those in editableFields */
+    readOnly?: boolean;
+    /** Field names the client can still edit (e.g. ['priority', 'dueDate']) */
+    editableFields?: string[];
+    /** Optional priority indicator component. Falls back to text label. */
+    renderPriorityIndicator?: (props: {
+        priority: string;
+    }) => React.ReactNode;
+    /** Optional date picker component. Falls back to native date input. */
+    renderDatePicker?: (props: {
+        value: Date | null;
+        onChange: (date: Date | null) => void;
+        placeholder: string;
+        className?: string;
+    }) => React.ReactNode;
+    /** Called when switching visibility to EVERYONE. If omitted, the change applies immediately. */
+    onConfirmVisibilityChange?: () => void;
+}
+declare const TaskProperties: React.ForwardRefExoticComponent<TaskPropertiesProps & React.RefAttributes<HTMLDivElement>>;
+export { TaskProperties };
+export type { TaskPropertiesProps, TaskData };
+//# sourceMappingURL=task-properties.d.ts.map

package/dist/tasks/task-properties.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-properties.d.ts","sourceRoot":"","sources":["../../src/tasks/task-properties.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAiC9B,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACpC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,SAAS,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAC7B,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAA;IAC9C,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,UAAU,EAAE,UAAU,GAAG,UAAU,CAAA;CACpC;AAED,UAAU,mBAAmB;IAC3B,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACjD,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,UAAU,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,uEAAuE;IACvE,uBAAuB,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IAC1E,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE;QACzB,KAAK,EAAE,IAAI,GAAG,IAAI,CAAA;QAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;QACrC,WAAW,EAAE,MAAM,CAAA;QACnB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,gGAAgG;IAChG,yBAAyB,CAAC,EAAE,MAAM,IAAI,CAAA;CACvC;AA0DD,QAAA,MAAM,cAAc,4FA4WnB,CAAA;AAID,OAAO,EAAE,cAAc,EAAE,CAAA;AACzB,YAAY,EAAE,mBAAmB,EAAE,QAAQ,EAAE,CAAA"}

package/dist/tasks/task-properties.js

@@ -0,0 +1,316 @@
+import { jsxs as l, jsx as t, Fragment as z } from "react/jsx-runtime";
+import * as c from "react";
+import { cn as i } from "@devalok/shilp-sutra/ui";
+import { Avatar as C, AvatarImage as R, AvatarFallback as D } from "@devalok/shilp-sutra/ui";
+import { Popover as P, PopoverTrigger as T, PopoverContent as L } from "@devalok/shilp-sutra/ui";
+import { IconColumns3 as F, IconChevronDown as J, IconCheck as Q, IconUser as Z, IconUsers as $, IconX as x, IconPlus as S, IconFlag as U, IconCalendarEvent as k, IconTag as ee, IconEye as te } from "@tabler/icons-react";
+import { getInitials as O } from "@devalok/shilp-sutra/composed";
+import { MemberPicker as A } from "@devalok/shilp-sutra/composed";
+import { PRIORITY_DOT_COLORS as se, PRIORITY_LABELS as le } from "./task-constants.js";
+const ne = ["LOW", "MEDIUM", "HIGH", "URGENT"];
+function d({
+  icon: o,
+  label: s,
+  children: m,
+  className: a
+}) {
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: i(
+        "flex items-center gap-ds-04 py-ds-03",
+        a
+      ),
+      children: [
+        /* @__PURE__ */ l("div", { className: "flex w-[120px] shrink-0 items-center gap-ds-03 text-text-placeholder", children: [
+          /* @__PURE__ */ t(o, { className: "h-ico-sm w-ico-sm", stroke: 1.5 }),
+          /* @__PURE__ */ t("span", { className: "text-ds-sm", children: s })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex-1 min-w-0", children: m })
+      ]
+    }
+  );
+}
+function re({ priority: o }) {
+  return /* @__PURE__ */ l("div", { className: "flex items-center gap-ds-02b", children: [
+    /* @__PURE__ */ t("div", { className: i("h-2 w-2 rounded-ds-full", se[o]) }),
+    /* @__PURE__ */ t("span", { className: "text-ds-md text-text-primary", children: le[o] || o })
+  ] });
+}
+const de = c.forwardRef(
+  function({
+    task: s,
+    columns: m,
+    members: a,
+    onUpdate: r,
+    onAssign: V,
+    onUnassign: f,
+    className: Y,
+    readOnly: n = !1,
+    editableFields: u,
+    renderPriorityIndicator: M,
+    renderDatePicker: g,
+    onConfirmVisibilityChange: N
+  }, j) {
+    const [y, p] = c.useState(""), [_, h] = c.useState(!1), v = s.assignees.map((e) => e.user.id), w = c.useMemo(
+      () => a.map((e) => ({ id: e.id, name: e.name, avatar: e.image ?? void 0 })),
+      [a]
+    ), B = (e) => {
+      r("columnId", e);
+    }, G = (e) => {
+      r("ownerId", e === s.ownerId ? null : e);
+    }, H = (e) => {
+      v.includes(e) ? f(e) : V(e);
+    }, K = (e) => {
+      r("priority", e);
+    }, b = (e) => {
+      r("dueDate", e ? e.toISOString() : null);
+    }, I = () => {
+      const e = y.trim();
+      e && !s.labels.includes(e) && r("labels", [...s.labels, e]), p(""), h(!1);
+    }, W = (e) => {
+      r("labels", s.labels.filter((q) => q !== e));
+    }, X = () => {
+      const e = s.visibility === "INTERNAL" ? "EVERYONE" : "INTERNAL";
+      if (e === "EVERYONE" && N) {
+        N();
+        return;
+      }
+      r("visibility", e);
+    }, E = M || re;
+    return /* @__PURE__ */ l("div", { ref: j, className: i("space-y-ds-01", Y), children: [
+      /* @__PURE__ */ t(d, { icon: F, label: "Column", children: n && !(u != null && u.includes("columnId")) ? /* @__PURE__ */ t("span", { className: "px-ds-03 py-ds-02 text-ds-md text-text-primary", children: s.column.name }) : /* @__PURE__ */ l(P, { children: [
+        /* @__PURE__ */ t(T, { asChild: !0, children: /* @__PURE__ */ l(
+          "button",
+          {
+            type: "button",
+            className: "inline-flex items-center gap-ds-02b rounded-ds-md px-ds-03 py-ds-02 text-ds-md text-text-primary transition-colors hover:bg-field",
+            children: [
+              /* @__PURE__ */ t("span", { children: s.column.name }),
+              /* @__PURE__ */ t(J, { className: "h-3 w-3 text-text-placeholder" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ t(
+          L,
+          {
+            className: "w-[180px] border-border bg-layer-01 p-ds-02",
+            align: "start",
+            sideOffset: 4,
+            children: m.map((e) => /* @__PURE__ */ l(
+              "button",
+              {
+                type: "button",
+                onClick: () => B(e.id),
+                className: i(
+                  "flex w-full items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b text-left text-ds-md transition-colors",
+                  "hover:bg-field",
+                  e.id === s.columnId ? "text-interactive" : "text-text-primary"
+                ),
+                children: [
+                  e.name,
+                  e.id === s.columnId && /* @__PURE__ */ t(Q, { className: "ml-auto h-ico-sm w-ico-sm" })
+                ]
+              },
+              e.id
+            ))
+          }
+        )
+      ] }) }),
+      !n && /* @__PURE__ */ t(d, { icon: Z, label: "Owner", children: /* @__PURE__ */ t(
+        A,
+        {
+          members: w,
+          selectedIds: s.ownerId ? [s.ownerId] : [],
+          onSelect: G,
+          children: /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: "inline-flex items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02 transition-colors hover:bg-field",
+              children: s.owner ? /* @__PURE__ */ l(z, { children: [
+                /* @__PURE__ */ l(C, { className: "h-ico-md w-ico-md", children: [
+                  s.owner.image && /* @__PURE__ */ t(R, { src: s.owner.image, alt: s.owner.name }),
+                  /* @__PURE__ */ t(D, { className: "bg-layer-03 text-ds-xs font-semibold text-text-on-color", children: O(s.owner.name) })
+                ] }),
+                /* @__PURE__ */ t("span", { className: "text-ds-md text-text-primary", children: s.owner.name })
+              ] }) : /* @__PURE__ */ t("span", { className: "text-ds-md text-text-placeholder", children: "No owner" })
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ t(d, { icon: $, label: "Assignees", children: /* @__PURE__ */ l("div", { className: "flex flex-wrap items-center gap-ds-02b", children: [
+        s.assignees.map((e) => /* @__PURE__ */ l(
+          "div",
+          {
+            className: "inline-flex items-center gap-ds-02 rounded-ds-full bg-layer-02 py-ds-01 pl-ds-01 pr-ds-03",
+            children: [
+              /* @__PURE__ */ l(C, { className: "h-ico-sm w-ico-sm", children: [
+                e.user.image && /* @__PURE__ */ t(R, { src: e.user.image, alt: e.user.name }),
+                /* @__PURE__ */ t(D, { className: "bg-layer-03 text-ds-xs font-semibold text-text-on-color", children: O(e.user.name) })
+              ] }),
+              /* @__PURE__ */ t("span", { className: "text-ds-sm text-text-secondary", children: e.user.name.split(" ")[0] }),
+              !n && /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => f(e.user.id),
+                  className: "ml-ds-01 rounded-ds-full p-ds-01 transition-colors hover:bg-field",
+                  children: /* @__PURE__ */ t(x, { className: "h-ds-03 w-ds-03 text-text-placeholder" })
+                }
+              )
+            ]
+          },
+          e.user.id
+        )),
+        !n && /* @__PURE__ */ t(
+          A,
+          {
+            members: w,
+            selectedIds: v,
+            onSelect: H,
+            multiple: !0,
+            children: /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded-ds-full border border-dashed border-border-subtle transition-colors hover:bg-field hover:border-text-placeholder",
+                children: /* @__PURE__ */ t(S, { className: "h-3 w-3 text-text-placeholder" })
+              }
+            )
+          }
+        ),
+        n && s.assignees.length === 0 && /* @__PURE__ */ t("span", { className: "text-ds-md text-text-placeholder", children: "None" })
+      ] }) }),
+      /* @__PURE__ */ t(d, { icon: U, label: "Priority", children: /* @__PURE__ */ l(P, { children: [
+        /* @__PURE__ */ t(T, { asChild: !0, children: /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            className: "rounded-ds-md px-ds-03 py-ds-02 transition-colors hover:bg-field",
+            children: /* @__PURE__ */ t(E, { priority: s.priority })
+          }
+        ) }),
+        /* @__PURE__ */ t(
+          L,
+          {
+            className: "w-[160px] border-border bg-layer-01 p-ds-02",
+            align: "start",
+            sideOffset: 4,
+            children: ne.map((e) => /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: () => K(e),
+                className: i(
+                  "flex w-full items-center gap-ds-03 rounded-ds-md px-ds-03 py-ds-02b transition-colors",
+                  "hover:bg-field",
+                  e === s.priority && "bg-field"
+                ),
+                children: /* @__PURE__ */ t(E, { priority: e })
+              },
+              e
+            ))
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ t(d, { icon: k, label: "Due Date", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-ds-02", children: [
+        g ? g({
+          value: s.dueDate ? new Date(s.dueDate) : null,
+          onChange: b,
+          placeholder: "No due date",
+          className: "h-ds-xs-plus border-none bg-transparent px-ds-03 text-ds-md hover:bg-field"
+        }) : /* @__PURE__ */ t(
+          "input",
+          {
+            type: "date",
+            value: s.dueDate ? new Date(s.dueDate).toISOString().split("T")[0] : "",
+            onChange: (e) => b(e.target.value ? new Date(e.target.value) : null),
+            className: "h-ds-xs-plus border-none bg-transparent px-ds-03 text-ds-md text-text-primary outline-none hover:bg-field rounded-ds-md"
+          }
+        ),
+        s.dueDate && /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => b(null),
+            className: "rounded-ds-md p-ds-02 transition-colors hover:bg-field",
+            children: /* @__PURE__ */ t(x, { className: "h-3 w-3 text-text-placeholder" })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ t(d, { icon: ee, label: "Labels", children: /* @__PURE__ */ l("div", { className: "flex flex-wrap items-center gap-ds-02b", children: [
+        s.labels.map((e) => /* @__PURE__ */ l(
+          "span",
+          {
+            className: "inline-flex items-center gap-ds-02 rounded-ds-full bg-interactive/10 px-ds-03 py-ds-01 text-ds-sm font-medium text-interactive",
+            children: [
+              e,
+              !n && /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => W(e),
+                  className: "rounded-ds-full p-ds-01 transition-colors hover:bg-field",
+                  children: /* @__PURE__ */ t(x, { className: "h-ds-03 w-ds-03" })
+                }
+              )
+            ]
+          },
+          e
+        )),
+        !n && (_ ? /* @__PURE__ */ t("div", { className: "inline-flex items-center gap-ds-02", children: /* @__PURE__ */ t(
+          "input",
+          {
+            type: "text",
+            value: y,
+            onChange: (e) => p(e.target.value),
+            onKeyDown: (e) => {
+              e.key === "Enter" && I(), e.key === "Escape" && (h(!1), p(""));
+            },
+            onBlur: I,
+            placeholder: "Label name",
+            className: "h-5 w-20 rounded border border-border bg-transparent px-ds-02b text-ds-sm text-text-primary outline-none placeholder:text-text-placeholder focus:border-border-subtle",
+            autoFocus: !0
+          }
+        ) }) : /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            onClick: () => h(!0),
+            className: "inline-flex h-ico-md w-ico-md items-center justify-center rounded-ds-full border border-dashed border-border-subtle transition-colors hover:bg-field hover:border-text-placeholder",
+            children: /* @__PURE__ */ t(S, { className: "h-3 w-3 text-text-placeholder" })
+          }
+        )),
+        n && s.labels.length === 0 && /* @__PURE__ */ t("span", { className: "text-ds-md text-text-placeholder", children: "None" })
+      ] }) }),
+      !n && /* @__PURE__ */ t(d, { icon: te, label: "Visibility", children: /* @__PURE__ */ l(
+        "button",
+        {
+          type: "button",
+          onClick: X,
+          className: i(
+            "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",
+            s.visibility === "EVERYONE" ? "bg-success-surface text-text-success" : "bg-layer-02 text-text-tertiary"
+          ),
+          children: [
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: i(
+                  "h-ds-02b w-ds-02b rounded-ds-full",
+                  s.visibility === "EVERYONE" ? "bg-success" : "bg-icon-disabled"
+                )
+              }
+            ),
+            s.visibility === "EVERYONE" ? "Everyone" : "Internal"
+          ]
+        }
+      ) })
+    ] });
+  }
+);
+de.displayName = "TaskProperties";
+export {
+  de as TaskProperties
+};

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@devalok/shilp-sutra-karm",
+  "version": "0.1.0",
+  "description": "Domain components for Karm — board, tasks, chat, dashboard, client, and admin",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./board": {
+      "import": "./dist/board/index.js",
+      "types": "./dist/board/index.d.ts"
+    },
+    "./tasks": {
+      "import": "./dist/tasks/index.js",
+      "types": "./dist/tasks/index.d.ts"
+    },
+    "./chat": {
+      "import": "./dist/chat/index.js",
+      "types": "./dist/chat/index.d.ts"
+    },
+    "./dashboard": {
+      "import": "./dist/dashboard/index.js",
+      "types": "./dist/dashboard/index.d.ts"
+    },
+    "./client": {
+      "import": "./dist/client/index.js",
+      "types": "./dist/client/index.d.ts"
+    },
+    "./admin": {
+      "import": "./dist/admin/index.js",
+      "types": "./dist/admin/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "@devalok/shilp-sutra": ">=0.1.0",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@devalok/shilp-sutra": "workspace:*"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@tabler/icons-react": "^3.37.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "react-markdown": "^10.1.0",
+    "tailwind-merge": "^3.0.1"
+  }
+}