@burdenoff/planmagnet-fe-sdk 2026.706.5 → 2026.706.6

package/dist/index.d.ts

@@ -740,6 +740,19 @@ interface TaskTimelineCoreProps {
     resolveAssignee?: ResolveAssignee;
     /** Fetch + flag project milestones on the timeline (default true). */
     showMilestones?: boolean;
+    /**
+     * Allow creating milestones from the timeline (an inline name + due-date
+     * form in the milestones strip). Requires a create project (see
+     * `milestoneProjectId`). Gate on the host's manage permission. Default false.
+     */
+    canCreateMilestone?: boolean;
+    /**
+     * Project new milestones are created under. Defaults to `projectId`. Set this
+     * when the timeline's task-filter project differs from the project milestones
+     * should belong to — e.g. an unscoped "all tasks" board that still has a
+     * default create-project.
+     */
+    milestoneProjectId?: string;
     className?: string;
     workspaceId?: string;
 }
@@ -752,7 +765,7 @@ interface TaskTimelineCoreProps {
  * honest to the data. Overdue and undated work is surfaced explicitly so nothing
  * hides. BYO-Apollo, semantic-token only, farm-free.
  */
-declare function TaskTimelineCore({ projectId, priority, type, search, assigneeId, defaultMode, onSelect, resolveAssignee, showMilestones, className, workspaceId: workspaceIdProp, }: TaskTimelineCoreProps): react.JSX.Element;
+declare function TaskTimelineCore({ projectId, priority, type, search, assigneeId, defaultMode, onSelect, resolveAssignee, showMilestones, canCreateMilestone, milestoneProjectId, className, workspaceId: workspaceIdProp, }: TaskTimelineCoreProps): react.JSX.Element;
 
 /** The three task views the toolbar can switch between. */
 type TaskView = "board" | "list" | "timeline";
@@ -946,6 +959,9 @@ interface TaskLabels {
     overdue: string;
     noDueDate: string;
     milestones: string;
+    addMilestone: string;
+    milestoneNamePlaceholder: string;
+    failedToCreateMilestone: string;
     today: string;
     week: string;
     month: string;
@@ -1061,6 +1077,11 @@ interface TasksPageCoreProps {
     columns?: BoardColumn[];
     /** Read-only — hides the "New task" button, disables drag + detail editing. */
     readonly?: boolean;
+    /**
+     * Allow creating milestones from the Timeline view (inline form in the
+     * milestones strip). Requires a `boardProjectId`. Defaults to `!readonly`.
+     */
+    canCreateMilestone?: boolean;
     /**
      * Field names to hide across the board cards, create form, and detail view.
      * A product-agnostic hook so hosts can suppress fields that don't apply.
@@ -1137,7 +1158,7 @@ interface TasksPageCoreProps {
  * BYO-Apollo: reads the ambient `<ApolloProvider>` and takes `workspaceId` from
  * a prop or the PlanMagnetProvider context. Semantic tokens only, farm-free.
  */
-declare function TasksPageCore({ workspaceId: workspaceIdProp, projectId, boardProjectId, columns, readonly, hiddenFields, views, defaultView, confirmMove, resolveAssignee, linkSourceProduct, renderLinkIcon, assigneeOptions, currentActorId, commentsEntityType, onMention, labels, openItemId, header, onTaskSaved, createSurface, detailSurface, className, }: TasksPageCoreProps): react.JSX.Element;
+declare function TasksPageCore({ workspaceId: workspaceIdProp, projectId, boardProjectId, columns, readonly, canCreateMilestone, hiddenFields, views, defaultView, confirmMove, resolveAssignee, linkSourceProduct, renderLinkIcon, assigneeOptions, currentActorId, commentsEntityType, onMention, labels, openItemId, header, onTaskSaved, createSurface, detailSurface, className, }: TasksPageCoreProps): react.JSX.Element;
 
 interface TasksPageProps extends TasksPageCoreProps {
     /** Workspace API gateway URL (URL mode). */
@@ -1255,11 +1276,28 @@ interface UseWorkItemLinksResult {
  */
 declare function useWorkItemLinks(workspaceId: string | undefined, sourceProduct: string | undefined, limit?: number): UseWorkItemLinksResult;
 
+/** Args for creating a milestone (subset of PlanmagnetCreateMilestoneInput). */
+interface CreateMilestoneArgs {
+    projectId: string;
+    name: string;
+    /** A `yyyy-MM-dd` day; stored on the DateTime column at local noon. */
+    dueDate?: string | null;
+    status?: MilestoneStatus;
+    description?: string | null;
+}
 interface UseMilestonesResult {
     milestones: Milestone[];
     /** Milestones grouped by their due day (yyyy-MM-dd), for timeline flags. */
     byDay: Map<string, Milestone[]>;
     loading: boolean;
+    /** True while a create mutation is in flight. */
+    creating: boolean;
+    /**
+     * Create a milestone and refetch the list. Returns the created milestone, or
+     * throws so the caller can surface a toast. A `yyyy-MM-dd` dueDate is stored
+     * at local noon so it lands on the intended day regardless of timezone.
+     */
+    createMilestone: (args: CreateMilestoneArgs) => Promise<Milestone | null>;
 }
 /**
  * useMilestones — fetch a project's milestones (e.g. a harvest window) for the

package/dist/index.js

@@ -6,7 +6,7 @@ import { onError } from '@apollo/client/link/error';
 import { CombinedGraphQLErrors } from '@apollo/client/errors';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { gql } from '@apollo/client';
-import { CircleX, CircleCheckBig, CircleDotDashed, CircleDot, Circle, CircleDashed, User, Link2, CalendarDays, ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Flag, CalendarRange, List, LayoutGrid, Search, Plus, Trash2 } from 'lucide-react';
+import { CircleX, CircleCheckBig, CircleDotDashed, CircleDot, Circle, CircleDashed, User, Link2, CalendarDays, ChevronUp, ChevronDown, ChevronLeft, ChevronRight, Flag, Plus, CalendarRange, List, LayoutGrid, Search, Trash2 } from 'lucide-react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { addWeeks, startOfWeek, endOfWeek, eachDayOfInterval, addMonths, startOfMonth, endOfMonth, format, isToday, isSameMonth, startOfDay, parseISO, isValid } from 'date-fns';
@@ -507,6 +507,14 @@ var LIST_MILESTONES = gql`
   }
   ${MILESTONE_FIELDS}
 `;
+var CREATE_MILESTONE = gql`
+  mutation CreateMilestone($input: PlanmagnetCreateMilestoneInput!) {
+    planmagnetCreateMilestone(input: $input) {
+      ...MilestoneFields
+    }
+  }
+  ${MILESTONE_FIELDS}
+`;
 var DELETE_WORK_ITEM = gql`
   mutation DeleteWorkItem($id: ID!) {
     planmagnetDeleteWorkItem(id: $id)
@@ -772,6 +780,9 @@ var DEFAULT_TASK_LABELS = {
   overdue: "{n} overdue",
   noDueDate: "No due date ({n})",
   milestones: "Milestones",
+  addMilestone: "Add milestone",
+  milestoneNamePlaceholder: "Milestone name",
+  failedToCreateMilestone: "Failed to create milestone",
   today: "Today",
   week: "Week",
   month: "Month",
@@ -1996,17 +2007,52 @@ function TaskList({
     }
   );
 }
+function dayToLocalNoonIso(day) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(day);
+  if (!m) return void 0;
+  return new Date(
+    Number(m[1]),
+    Number(m[2]) - 1,
+    Number(m[3]),
+    12,
+    0,
+    0
+  ).toISOString();
+}
 function useMilestones(workspaceId, opts = {}) {
   const { projectId, enabled = true, limit = 100 } = opts;
-  const { data, loading } = useQuery(LIST_MILESTONES, {
-    variables: {
-      workspaceId,
-      ...projectId ? { filter: { projectId } } : {},
-      pagination: { first: limit }
+  const { data, loading, refetch } = useQuery(
+    LIST_MILESTONES,
+    {
+      variables: {
+        workspaceId,
+        ...projectId ? { filter: { projectId } } : {},
+        pagination: { first: limit }
+      },
+      skip: !workspaceId || !enabled,
+      errorPolicy: "all"
+    }
+  );
+  const [createMutation, { loading: creating }] = useMutation(CREATE_MILESTONE);
+  const createMilestone = useCallback(
+    async (args) => {
+      const iso = args.dueDate ? dayToLocalNoonIso(args.dueDate) : void 0;
+      const res = await createMutation({
+        variables: {
+          input: {
+            projectId: args.projectId,
+            name: args.name,
+            ...iso ? { dueDate: iso } : {},
+            ...args.status ? { status: args.status } : {},
+            ...args.description ? { description: args.description } : {}
+          }
+        }
+      });
+      await refetch();
+      return res.data?.planmagnetCreateMilestone ?? null;
     },
-    skip: !workspaceId || !enabled,
-    errorPolicy: "all"
-  });
+    [createMutation, refetch]
+  );
   const milestones = useMemo(
     () => data?.planmagnetMilestones?.items ?? [],
     [data]
@@ -2023,7 +2069,7 @@ function useMilestones(workspaceId, opts = {}) {
     }
     return map;
   }, [milestones]);
-  return { milestones, byDay, loading };
+  return { milestones, byDay, loading, creating, createMilestone };
 }
 var WEEK_OPTS = { weekStartsOn: 1 };
 function dayKey(d) {
@@ -2039,18 +2085,49 @@ function TaskTimelineCore({
   onSelect,
   resolveAssignee,
   showMilestones = true,
+  canCreateMilestone = false,
+  milestoneProjectId,
   className,
   workspaceId: workspaceIdProp
 }) {
   const ctx = usePlanMagnetContextSafe();
   const workspaceId = workspaceIdProp ?? ctx?.workspaceId;
   const L = useTaskLabels();
-  const { milestones, byDay: milestonesByDay } = useMilestones(workspaceId, {
+  const {
+    milestones,
+    byDay: milestonesByDay,
+    creating: creatingMilestone,
+    createMilestone
+  } = useMilestones(workspaceId, {
     projectId,
     enabled: showMilestones
   });
   const [mode, setMode] = useState(defaultMode);
   const [offset, setOffset] = useState(0);
+  const milestoneProject = milestoneProjectId ?? projectId;
+  const canAddMilestone = canCreateMilestone && Boolean(milestoneProject);
+  const [showMilestoneForm, setShowMilestoneForm] = useState(false);
+  const [milestoneName, setMilestoneName] = useState("");
+  const [milestoneDue, setMilestoneDue] = useState("");
+  const [milestoneError, setMilestoneError] = useState(null);
+  const submitMilestone = async (e) => {
+    e.preventDefault();
+    const name = milestoneName.trim();
+    if (!name || !milestoneProject) return;
+    setMilestoneError(null);
+    try {
+      await createMilestone({
+        projectId: milestoneProject,
+        name,
+        dueDate: milestoneDue || void 0
+      });
+      setMilestoneName("");
+      setMilestoneDue("");
+      setShowMilestoneForm(false);
+    } catch {
+      setMilestoneError(L.failedToCreateMilestone);
+    }
+  };
   const { data, loading, error } = useQuery(
     LIST_WORK_ITEMS,
     {
@@ -2198,12 +2275,82 @@ function TaskTimelineCore({
         t.id
       )) })
     ] }),
-    milestones.length > 0 && /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-primary/30 bg-primary/5 px-3 py-2", children: [
-      /* @__PURE__ */ jsxs("p", { className: "mb-1 flex items-center gap-1 text-xs font-semibold text-primary", children: [
-        /* @__PURE__ */ jsx(Flag, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
-        L.milestones
+    (milestones.length > 0 || canAddMilestone) && /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-primary/30 bg-primary/5 px-3 py-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1 text-xs font-semibold text-primary", children: [
+          /* @__PURE__ */ jsx(Flag, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+          L.milestones
+        ] }),
+        canAddMilestone && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setShowMilestoneForm((v) => !v);
+              setMilestoneError(null);
+            },
+            "aria-label": L.addMilestone,
+            "aria-expanded": showMilestoneForm,
+            title: L.addMilestone,
+            className: "flex h-6 w-6 items-center justify-center rounded-md border border-primary/40 text-primary hover:bg-primary/10",
+            children: /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: milestones.map((m) => /* @__PURE__ */ jsx(MilestoneFlag, { milestone: m }, m.id)) })
+      showMilestoneForm && canAddMilestone && /* @__PURE__ */ jsxs(
+        "form",
+        {
+          onSubmit: submitMilestone,
+          className: "mb-2 flex flex-wrap items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: milestoneName,
+                onChange: (e) => setMilestoneName(e.target.value),
+                placeholder: L.milestoneNamePlaceholder,
+                "aria-label": L.milestoneNamePlaceholder,
+                autoFocus: true,
+                className: "h-8 min-w-40 flex-1 rounded-md border border-border bg-background px-2 text-xs text-foreground"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "date",
+                value: milestoneDue,
+                onChange: (e) => setMilestoneDue(e.target.value),
+                "aria-label": L.dueDateLabel,
+                className: "h-8 rounded-md border border-border bg-background px-2 text-xs text-foreground"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "submit",
+                disabled: !milestoneName.trim() || creatingMilestone,
+                className: "h-8 rounded-md bg-primary px-3 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50",
+                children: creatingMilestone ? L.creating : L.addMilestone
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  setShowMilestoneForm(false);
+                  setMilestoneError(null);
+                },
+                className: "h-8 rounded-md border border-border px-3 text-xs font-medium text-foreground hover:bg-muted/50",
+                children: L.cancel
+              }
+            )
+          ]
+        }
+      ),
+      milestoneError && /* @__PURE__ */ jsx("p", { className: "mb-1 text-[11px] text-destructive", children: milestoneError }),
+      milestones.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: milestones.map((m) => /* @__PURE__ */ jsx(MilestoneFlag, { milestone: m }, m.id)) })
     ] }),
     mode === "week" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-2", children: days.map((day) => {
       const items = byDay.get(dayKey(day)) ?? [];
@@ -3342,6 +3489,7 @@ function TasksPageCore({
   boardProjectId,
   columns,
   readonly,
+  canCreateMilestone,
   hiddenFields,
   views,
   defaultView = "board",
@@ -3539,7 +3687,9 @@ function TasksPageCore({
         search,
         assigneeId: mineAssignee,
         resolveAssignee,
-        onSelect: handleSelect
+        onSelect: handleSelect,
+        canCreateMilestone: canCreateMilestone ?? !readonly,
+        milestoneProjectId: boardProjectId ?? projectId
       }
     ),
     showInlineDetail && /* @__PURE__ */ jsx("div", { className: "pb-6", children: detailView }),