@taskforcehq/taskforce 0.3.170 → 0.3.301

package/dist/components/views/panels/PlanningDrawer.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { useDndContext, useDraggable, useDroppable } from '@dnd-kit/core';
+import { CSS } from '@dnd-kit/utilities';
+import { ChevronLeft, ChevronRight, ChevronsDown, ChevronsRight, Filter, Plus, } from 'lucide-react';
+import styles from '../../../Taskforce.module.css';
+import panelStyles from './PlanningDrawer.module.css';
+import { ReferenceBadgeButton } from '../../ui/ReferenceBadgeButton';
+import { formatInitiativeReference, formatWorkstreamReference, } from '../../../utils/planningReferences.js';
+export const PLANNING_DRAWER_TREE_WIDTH_PX = 332;
+export const PLANNING_DRAWER_DETAIL_WIDTH_PX = 392;
+export const PLANNING_DRAWER_COLLAPSED_PANE_WIDTH_PX = 56;
+export function getPlanningDrawerWidthPx(treeCollapsed, hasPrimaryPane, primaryCollapsed, hasSecondaryPane, secondaryCollapsed) {
+    return (treeCollapsed ? PLANNING_DRAWER_COLLAPSED_PANE_WIDTH_PX : PLANNING_DRAWER_TREE_WIDTH_PX)
+        + (hasPrimaryPane ? (primaryCollapsed ? PLANNING_DRAWER_COLLAPSED_PANE_WIDTH_PX : PLANNING_DRAWER_DETAIL_WIDTH_PX) : 0)
+        + (hasSecondaryPane ? (secondaryCollapsed ? PLANNING_DRAWER_COLLAPSED_PANE_WIDTH_PX : PLANNING_DRAWER_DETAIL_WIDTH_PX) : 0);
+}
+function formatTaskStatusLabel(status) {
+    if (!status)
+        return 'No status';
+    return status
+        .split(/[-_\s]+/g)
+        .filter(Boolean)
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(' ');
+}
+function PlanningReferenceBadge({ label, entityType, interactive = true, }) {
+    const [copied, setCopied] = React.useState(false);
+    const handleClick = React.useCallback(async (event) => {
+        event.stopPropagation();
+        try {
+            await navigator.clipboard.writeText(label);
+            setCopied(true);
+            window.setTimeout(() => setCopied(false), 1200);
+        }
+        catch {
+            setCopied(false);
+        }
+    }, [label]);
+    if (!interactive) {
+        return (_jsx("span", { className: `${styles.taskIdBadge} ${panelStyles.referenceBadgeStatic}`.trim(), children: _jsx("span", { children: label }) }));
+    }
+    return (_jsx(ReferenceBadgeButton, { copied: copied, label: label, onClick: handleClick, title: `Copy ${entityType} reference`, ariaLabel: copied ? `Copied ${entityType} reference` : `Copy ${entityType} reference`, className: panelStyles.referenceBadgeButton, children: label }));
+}
+function PlanningRow({ rowId, rowType, referenceLabel, title, meta, active, detailOpen = false, canExpand = false, expanded = false, onToggleExpand, onToggleScope, onToggleDetails, }) {
+    const { active: dndActive } = useDndContext();
+    const dragType = String(dndActive?.data?.current?.type || '');
+    const canDropTask = rowType === 'workstream' && dragType === 'task-card';
+    const canDropWorkstream = rowType === 'initiative' && dragType === 'planning-workstream';
+    const droppableType = rowType === 'workstream' ? 'planning-workstream-target' : 'planning-initiative-target';
+    const { setNodeRef: setDropRef, isOver, } = useDroppable({
+        id: `${droppableType}:${rowId}`,
+        data: rowType === 'workstream'
+            ? { type: droppableType, workstreamId: rowId }
+            : { type: droppableType, initiativeId: rowId },
+    });
+    const draggable = rowType === 'workstream';
+    const { attributes, listeners, setNodeRef: setDragRef, transform, isDragging, } = useDraggable({
+        id: `planning-workstream:${rowId}`,
+        data: { type: 'planning-workstream', workstreamId: rowId },
+        disabled: !draggable,
+    });
+    const dragStyle = draggable && transform
+        ? { transform: CSS.Translate.toString(transform) }
+        : undefined;
+    const showDropReady = canDropTask || canDropWorkstream;
+    return (_jsxs("div", { ref: setDropRef, style: dragStyle, className: `${panelStyles.treeRow} ${detailOpen ? panelStyles.treeRowDetailOpen : ''} ${showDropReady ? panelStyles.treeRowDropReady : ''} ${isOver ? panelStyles.treeRowDropActive : ''} ${isDragging ? panelStyles.treeRowDragging : ''} ${showDropReady ? panelStyles.treeRowDropMode : ''}`, children: [canExpand ? (_jsx("button", { type: "button", className: panelStyles.treeChevron, onClick: onToggleExpand, title: expanded ? 'Collapse workstreams' : 'Expand workstreams', children: expanded ? _jsx(ChevronsDown, { size: 15 }) : _jsx(ChevronsRight, { size: 15 }) })) : (_jsx("span", { className: panelStyles.treeChevron, "aria-hidden": "true", children: _jsx(ChevronRight, { size: 14 }) })), _jsxs("div", { className: panelStyles.rowContent, children: [_jsxs("div", { className: panelStyles.rowTopRow, children: [referenceLabel ? (_jsx(PlanningReferenceBadge, { label: referenceLabel, entityType: rowType })) : _jsx("span", { "aria-hidden": "true" }), _jsx("button", { type: "button", className: `${panelStyles.detailsButton} ${active ? panelStyles.detailsButtonActive : ''}`, onClick: onToggleScope, title: active ? 'Clear board scope' : 'Scope board to this item', children: _jsx(Filter, { size: 14 }) })] }), _jsxs("button", { type: "button", ref: draggable ? setDragRef : undefined, className: panelStyles.rowButton, onClick: onToggleDetails, ...(draggable ? attributes : {}), ...(draggable ? listeners : {}), children: [_jsx("span", { className: panelStyles.rowTitle, children: title }), _jsx("span", { className: panelStyles.rowMeta, children: meta })] })] })] }));
+}
+function CollapsedPane({ label, onExpand, }) {
+    return (_jsx("div", { className: `${panelStyles.paneShell} ${panelStyles.collapsedPaneShell}`.trim(), children: _jsxs("div", { className: panelStyles.collapsedPaneHeader, children: [_jsx("button", { type: "button", className: "tf-control-icon", onClick: onExpand, title: `Expand ${label}`, children: _jsx(ChevronRight, { size: 16 }) }), _jsx("span", { className: panelStyles.collapsedPaneLabel, children: label })] }) }));
+}
+function PlanningUnlinkZone({ targetType, label, }) {
+    const { active } = useDndContext();
+    const dragType = String(active?.data?.current?.type || '');
+    const matches = (targetType === 'task' && dragType === 'task-card')
+        || (targetType === 'workstream' && dragType === 'planning-workstream');
+    const { setNodeRef, isOver } = useDroppable({
+        id: targetType === 'task' ? 'planning-task-unlink' : 'planning-workstream-unlink',
+        data: { type: targetType === 'task' ? 'planning-task-unlink' : 'planning-workstream-unlink' },
+    });
+    if (!matches)
+        return null;
+    return (_jsx("div", { ref: setNodeRef, className: `${panelStyles.unlinkZone} ${isOver ? panelStyles.unlinkZoneActive : ''}`, children: label }));
+}
+function PlanningDrawerList({ initiatives, standaloneWorkstreams, activeInitiativeId, activeWorkstreamId, expandedInitiativeIds, detail, secondaryPane, onCreateInitiative, onCreateWorkstream, onToggleInitiative, onSelectInitiative, onSelectWorkstream, onOpenInitiativeDetails, onOpenWorkstreamDetails, }) {
+    const { active } = useDndContext();
+    const dragType = String(active?.data?.current?.type || '');
+    const workstreamUnlinkEnabled = dragType === 'planning-workstream';
+    const { setNodeRef: setStandaloneWorkstreamsDropRef, isOver: isStandaloneWorkstreamsDropOver, } = useDroppable({
+        id: 'planning-workstream-unlink',
+        data: { type: 'planning-workstream-unlink' },
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(PlanningUnlinkZone, { targetType: "task", label: "Drop here to make task standalone" }), _jsxs("div", { className: panelStyles.sectionGroup, children: [_jsxs("div", { className: panelStyles.sectionHeaderRow, children: [_jsx("div", { className: panelStyles.sectionTitle, children: "Initiatives" }), _jsx("button", { type: "button", className: "tf-control-icon", title: "Create initiative", "aria-label": "Create initiative", onClick: onCreateInitiative, children: _jsx(Plus, { size: 15 }) })] }), _jsx("div", { className: panelStyles.treeList, children: initiatives.length === 0 ? (_jsxs("div", { className: panelStyles.emptyPanel, children: [_jsx("div", { className: panelStyles.emptyPanelTitle, children: "No initiatives yet" }), _jsxs("div", { className: panelStyles.emptyPanelText, children: ["Initiatives give larger efforts a clear home without crowding the task board. Use the ", _jsx("code", { children: "+" }), " action above to create the first one."] })] })) : initiatives.map((initiative) => {
+                            const expanded = expandedInitiativeIds.has(initiative.id);
+                            const meta = `${initiative.workstreamCount || 0} workstreams • ${initiative.taskCount} tasks${initiative.isArchived ? ' • archived' : ''}`;
+                            return (_jsxs("div", { children: [_jsx(PlanningRow, { rowId: initiative.id, rowType: "initiative", referenceLabel: formatInitiativeReference(initiative), title: initiative.title, meta: meta, active: activeInitiativeId === initiative.id && !activeWorkstreamId, detailOpen: detail?.type === 'initiative' && detail.item.id === initiative.id, canExpand: initiative.workstreams.length > 0, expanded: expanded, onToggleExpand: () => onToggleInitiative(initiative.id), onToggleScope: () => onSelectInitiative(initiative.id), onToggleDetails: () => {
+                                            if (detail?.type === 'initiative' && detail.item.id === initiative.id) {
+                                                onOpenInitiativeDetails('');
+                                                return;
+                                            }
+                                            onOpenInitiativeDetails(initiative.id);
+                                        } }), expanded && initiative.workstreams.length > 0 && (_jsx("div", { className: panelStyles.treeChildren, children: initiative.workstreams.map((workstream) => (_jsx(PlanningRow, { rowId: workstream.id, rowType: "workstream", referenceLabel: formatWorkstreamReference(workstream), title: workstream.title, meta: `${workstream.taskCount} tasks • ${workstream.progressPercent}% complete${workstream.isArchived ? ' • archived' : ''}`, active: activeWorkstreamId === workstream.id, detailOpen: (detail?.type === 'workstream' && detail.item.id === workstream.id)
+                                                || (secondaryPane?.kind === 'detail' && secondaryPane.detail.item.id === workstream.id), onToggleScope: () => onSelectWorkstream(workstream.id, initiative.id), onToggleDetails: () => {
+                                                if (secondaryPane?.kind === 'detail' && secondaryPane.detail.item.id === workstream.id) {
+                                                    onOpenWorkstreamDetails('');
+                                                    return;
+                                                }
+                                                if (detail?.type === 'workstream' && detail.item.id === workstream.id) {
+                                                    onOpenWorkstreamDetails('');
+                                                    return;
+                                                }
+                                                onOpenWorkstreamDetails(workstream.id);
+                                            } }, workstream.id))) }))] }, initiative.id));
+                        }) })] }), _jsxs("div", { ref: setStandaloneWorkstreamsDropRef, className: `${panelStyles.sectionGroup} ${workstreamUnlinkEnabled ? panelStyles.sectionDropReady : ''} ${isStandaloneWorkstreamsDropOver ? panelStyles.sectionDropActive : ''}`.trim(), children: [_jsxs("div", { className: panelStyles.sectionHeaderRow, children: [_jsx("div", { className: panelStyles.sectionTitle, children: "Workstreams" }), _jsx("button", { type: "button", className: "tf-control-icon", title: "Create workstream", "aria-label": "Create workstream", onClick: onCreateWorkstream, children: _jsx(Plus, { size: 15 }) })] }), _jsx("div", { className: panelStyles.treeList, children: standaloneWorkstreams.length === 0 ? (_jsxs("div", { className: panelStyles.emptyPanel, children: [_jsx("div", { className: panelStyles.emptyPanelTitle, children: "No standalone workstreams yet" }), _jsxs("div", { className: panelStyles.emptyPanelText, children: ["Smaller projects can still use workstreams without needing initiative-level structure. Use the ", _jsx("code", { children: "+" }), " action above to add one."] })] })) : standaloneWorkstreams.map((workstream) => (_jsx(PlanningRow, { rowId: workstream.id, rowType: "workstream", referenceLabel: formatWorkstreamReference(workstream), title: workstream.title, meta: `${workstream.taskCount} tasks • ${workstream.progressPercent}% complete${workstream.isArchived ? ' • archived' : ''}`, active: activeWorkstreamId === workstream.id, detailOpen: (detail?.type === 'workstream' && detail.item.id === workstream.id)
+                                || (secondaryPane?.kind === 'detail' && secondaryPane.detail.item.id === workstream.id), onToggleScope: () => onSelectWorkstream(workstream.id, null), onToggleDetails: () => {
+                                if (detail?.type === 'workstream' && detail.item.id === workstream.id) {
+                                    onOpenWorkstreamDetails('');
+                                    return;
+                                }
+                                onOpenWorkstreamDetails(workstream.id);
+                            } }, workstream.id))) })] })] }));
+}
+function PlanningDrawerDetailView({ detail, onOpenNestedWorkstreamDetails, onEdit, onArchive, onUnarchive, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onOpenTaskById, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, }) {
+    const [attachReference, setAttachReference] = React.useState('');
+    const { active } = useDndContext();
+    const dragType = String(active?.data?.current?.type || '');
+    const canDropTask = detail.type === 'workstream' && dragType === 'task-card';
+    const canDropWorkstream = detail.type === 'initiative' && dragType === 'planning-workstream';
+    const childDropType = detail.type === 'initiative' ? 'planning-initiative-target' : 'planning-workstream-target';
+    const { setNodeRef: setChildDropRef, isOver: isChildDropOver, } = useDroppable({
+        id: `${childDropType}:detail:${detail.item.id}`,
+        data: detail.type === 'initiative'
+            ? { type: childDropType, initiativeId: detail.item.id }
+            : { type: childDropType, workstreamId: detail.item.id },
+    });
+    const childLabel = detail.type === 'initiative' ? 'Workstreams' : 'Tasks';
+    const childItems = detail.type === 'initiative' ? detail.item.workstreams : [];
+    const detailLabel = detail.type === 'initiative' ? 'Initiative' : 'Workstream';
+    const detailReferenceLabel = detail.type === 'initiative'
+        ? formatInitiativeReference(detail.item)
+        : formatWorkstreamReference(detail.item);
+    React.useEffect(() => {
+        setAttachReference('');
+    }, [detail.item.id, detail.type]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: panelStyles.detailHero, children: [detailReferenceLabel ? (_jsx("div", { className: panelStyles.detailReferenceRow, children: _jsx(PlanningReferenceBadge, { label: detailReferenceLabel, entityType: detail.type }) })) : null, _jsx("h3", { className: panelStyles.detailTitle, children: detail.item.title }), _jsx("p", { className: panelStyles.detailDescription, children: detail.item.description?.trim() || (detail.type === 'initiative'
+                            ? 'A top-level planning container that groups related workstreams.'
+                            : 'A coordination lane that groups related tasks and keeps execution organized.') }), _jsx("div", { className: panelStyles.progressTrack, "aria-label": `${detail.item.progressPercent}% complete`, children: _jsx("div", { className: panelStyles.progressFill, style: { width: `${detail.item.progressPercent}%` } }) }), _jsxs("div", { className: panelStyles.detailActionRow, children: [_jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: onEdit, children: _jsxs("span", { children: ["Edit ", detailLabel] }) }), detail.item.isArchived ? (_jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: onUnarchive, children: _jsx("span", { children: "Unarchive" }) })) : (_jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: onArchive, children: _jsx("span", { children: "Archive" }) }))] })] }), _jsxs("div", { className: panelStyles.metricGrid, children: [_jsxs("div", { className: panelStyles.metricCard, children: [_jsx("span", { className: panelStyles.metricValue, children: detail.item.taskCount }), _jsx("span", { className: panelStyles.metricLabel, children: "Tasks in scope" })] }), _jsxs("div", { className: panelStyles.metricCard, children: [_jsx("span", { className: panelStyles.metricValue, children: detail.item.completedTaskCount }), _jsx("span", { className: panelStyles.metricLabel, children: "Done / terminal" })] }), _jsxs("div", { className: panelStyles.metricCard, children: [_jsx("span", { className: panelStyles.metricValue, children: detail.item.ownerLabel || 'Unassigned' }), _jsx("span", { className: panelStyles.metricLabel, children: "Owner" })] }), _jsxs("div", { className: panelStyles.metricCard, children: [_jsx("span", { className: panelStyles.metricValue, children: (detail.item.commentCount || 0) + (detail.item.attachmentCount || 0) }), _jsx("span", { className: panelStyles.metricLabel, children: "Context items" })] })] }), _jsxs("div", { ref: setChildDropRef, className: `${panelStyles.listCard} ${canDropTask || canDropWorkstream ? panelStyles.sectionDropReady : ''} ${isChildDropOver ? panelStyles.sectionDropActive : ''} ${canDropTask || canDropWorkstream ? panelStyles.sectionDropMode : ''}`.trim(), children: [_jsxs("div", { className: panelStyles.sectionHeaderRow, children: [_jsx("div", { className: panelStyles.sectionTitle, children: childLabel }), detail.type === 'initiative' ? (_jsx("button", { type: "button", className: "tf-control-icon", title: "Create workstream in this initiative", "aria-label": "Create workstream in this initiative", onClick: () => onCreateWorkstreamInInitiative?.(detail.item.id), children: _jsx(Plus, { size: 15 }) })) : (_jsx("button", { type: "button", className: "tf-control-icon", title: "Create task in this workstream", "aria-label": "Create task in this workstream", onClick: () => onCreateTaskInWorkstream?.(detail.item.id), children: _jsx(Plus, { size: 15 }) }))] }), _jsxs("div", { className: panelStyles.attachReferenceRow, children: [_jsx("input", { type: "text", className: styles.input, placeholder: detail.type === 'initiative'
+                                    ? 'Paste workstream reference (e.g. WS-123)'
+                                    : 'Paste task reference (e.g. T-123)', value: attachReference, onChange: (event) => setAttachReference(event.target.value) }), _jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: () => {
+                                    const value = attachReference.trim();
+                                    if (!value)
+                                        return;
+                                    if (detail.type === 'initiative') {
+                                        onAttachWorkstreamToInitiativeByReference?.(detail.item.id, value);
+                                    }
+                                    else {
+                                        onAttachTaskToWorkstreamByReference?.(detail.item.id, value);
+                                    }
+                                    setAttachReference('');
+                                }, children: "Attach" })] }), detail.type === 'initiative' ? (childItems.length > 0 ? childItems.map((workstream) => (_jsx("button", { type: "button", className: panelStyles.listItemButton, onClick: () => onOpenNestedWorkstreamDetails?.(workstream.id), children: _jsx("div", { className: panelStyles.listItem, children: _jsxs("div", { className: panelStyles.listItemText, children: [_jsx("span", { className: panelStyles.listItemTitle, children: workstream.title }), _jsxs("span", { className: panelStyles.listItemMeta, children: [workstream.taskCount, " tasks \u2022 ", workstream.progressPercent, "% complete"] })] }) }) }, workstream.id))) : (_jsxs("div", { className: panelStyles.emptyPanel, children: [_jsx("div", { className: panelStyles.emptyPanelTitle, children: "No workstreams yet" }), _jsx("div", { className: panelStyles.emptyPanelText, children: "Add the first workstream to break the initiative into clearer lanes of execution." })] }))) : (detail.item.tasks && detail.item.tasks.length > 0 ? detail.item.tasks.map((task) => (_jsx("button", { type: "button", className: panelStyles.listItemButton, onClick: () => onOpenTaskById?.(task.id), children: _jsx("div", { className: panelStyles.listItem, children: _jsxs("div", { className: panelStyles.listItemText, children: [_jsx("span", { className: panelStyles.listItemTitle, children: task.title }), _jsxs("span", { className: panelStyles.listItemMeta, children: [task.referenceNumber ? `T-${task.referenceNumber} • ` : '', formatTaskStatusLabel(task.status)] })] }) }) }, task.id))) : (_jsxs("div", { className: panelStyles.sectionNote, children: ["No tasks are linked to this workstream yet. Use the ", _jsx("code", { children: "+" }), " action above to add the first one."] })))] }), _jsxs("div", { className: panelStyles.listCard, children: [_jsx("div", { className: panelStyles.sectionTitle, children: "Context" }), _jsx("div", { className: panelStyles.sectionNote, children: "Comments, attachments, and planning notes can live here without pushing that context down into task cards." })] })] }));
+}
+function PlanningDrawerEditor({ editor, draftTitle, draftDescription, draftOwner, draftInitiativeId, assigneeOptions, draftInitiativeSummary, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onCancel, onSubmit, onAssignInitiativeToWorkstream, }) {
+    const entityLabel = editor.entityType === 'initiative' ? 'Initiative' : 'Workstream';
+    const submitLabel = editor.mode === 'create' ? `Create ${entityLabel}` : `Save ${entityLabel}`;
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: panelStyles.editorCard, children: [_jsxs("div", { className: panelStyles.editorField, children: [_jsx("label", { className: panelStyles.editorLabel, children: "Title" }), _jsx("input", { className: styles.input, value: draftTitle, onChange: (event) => onChangeDraftTitle(event.target.value), placeholder: editor.entityType === 'initiative' ? 'Q3 Product Launch' : 'Content Production' })] }), _jsxs("div", { className: panelStyles.editorField, children: [_jsx("label", { className: panelStyles.editorLabel, children: "Description" }), _jsx("textarea", { className: styles.textarea, value: draftDescription, onChange: (event) => onChangeDraftDescription(event.target.value), placeholder: editor.entityType === 'initiative'
+                                ? 'Describe the broader outcome this initiative is meant to achieve.'
+                                : 'Describe the lane of work this workstream will coordinate.', rows: 5 })] }), editor.entityType === 'workstream' && (_jsxs("div", { className: panelStyles.editorField, children: [_jsx("label", { className: panelStyles.editorLabel, children: "Initiative" }), draftInitiativeSummary && (_jsxs("div", { className: panelStyles.editorHint, children: ["Current: ", draftInitiativeSummary.title] })), _jsxs("div", { className: styles.pathInputGroup, children: [_jsx("input", { type: "text", className: styles.input, placeholder: "Paste initiative reference (e.g. IN-123)", value: draftInitiativeId, onChange: (event) => onChangeDraftInitiativeId(event.target.value) }), editor.mode === 'edit' && (_jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: () => onAssignInitiativeToWorkstream?.(editor.targetId), children: "Set Initiative" }))] }), editor.mode === 'edit' && (_jsx("div", { className: panelStyles.editorSubActions, children: _jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: () => onAssignInitiativeToWorkstream?.(editor.targetId, null), children: "Clear Initiative" }) }))] })), _jsxs("div", { className: panelStyles.editorField, children: [_jsx("label", { className: panelStyles.editorLabel, children: "Owner" }), _jsxs("select", { className: `${styles.select} ${styles.groupBySelect}`, value: draftOwner, onChange: (event) => onChangeDraftOwner(event.target.value), children: [_jsx("option", { value: "", children: "Unassigned" }), assigneeOptions.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] })] }), _jsxs("div", { className: panelStyles.editorActions, children: [_jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: onCancel, children: "Cancel" }), _jsx("button", { type: "button", className: styles.primaryUpdateBtn, onClick: onSubmit, children: submitLabel })] })] }) }));
+}
+export function PlanningDrawer({ open, leftOffset = 0, initiatives, standaloneWorkstreams, activeInitiativeId, activeWorkstreamId, expandedInitiativeIds, detail, editor, secondaryPane, assigneeOptions, draftInitiativeSummary, draftTitle, draftDescription, draftOwner, draftInitiativeId, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onCollapseTreePane, onExpandTreePane, onCollapsePrimaryPane, onExpandPrimaryPane, onCollapseSecondaryPane, onExpandSecondaryPane, onBackFromSecondary, treeCollapsed, primaryCollapsed, secondaryCollapsed, onCancelEditor, onSubmitEditor, onCreateInitiative, onCreateWorkstream, onToggleInitiative, onSelectInitiative, onSelectWorkstream, onOpenInitiativeDetails, onOpenWorkstreamDetails, onOpenNestedWorkstreamDetails, onEditInitiative, onEditWorkstream, onArchiveInitiative, onUnarchiveInitiative, onArchiveWorkstream, onUnarchiveWorkstream, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onAssignInitiativeToWorkstream, onOpenTaskById, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, }) {
+    const hasPrimaryPane = Boolean(detail || editor);
+    const hasSecondaryPane = Boolean(secondaryPane);
+    const drawerWidth = getPlanningDrawerWidthPx(treeCollapsed, hasPrimaryPane, primaryCollapsed, hasSecondaryPane, secondaryCollapsed);
+    const primaryPaneLabel = editor
+        ? (editor.entityType === 'initiative'
+            ? (editor.mode === 'create' ? 'New Initiative' : 'Edit Initiative')
+            : (editor.mode === 'create' ? 'New Workstream' : 'Edit Workstream'))
+        : (detail?.type === 'initiative' ? 'Initiative' : 'Workstream');
+    const secondaryPaneLabel = secondaryPane?.kind === 'editor'
+        ? (secondaryPane.editor.mode === 'create' ? 'New Workstream' : 'Edit Workstream')
+        : 'Workstream';
+    return (_jsx("aside", { style: {
+            position: 'absolute',
+            top: 0,
+            left: open ? `${leftOffset}px` : `${leftOffset - drawerWidth - 24}px`,
+            bottom: 0,
+            width: `${drawerWidth}px`,
+            minWidth: `${drawerWidth}px`,
+            borderRight: '1px solid var(--border-color)',
+            background: 'var(--bg-secondary)',
+            boxSizing: 'border-box',
+            display: 'flex',
+            flexDirection: 'column',
+            zIndex: 35,
+            overflow: 'hidden',
+            pointerEvents: open ? 'auto' : 'none',
+            transition: 'left 220ms cubic-bezier(0.4, 0, 0.2, 1)',
+            willChange: 'left',
+        }, children: _jsxs("div", { className: panelStyles.drawerBody, children: [treeCollapsed ? (_jsx(CollapsedPane, { label: "Planning", onExpand: onExpandTreePane })) : (_jsxs("div", { className: `${panelStyles.paneShell} ${styles.appScrollbar} tf-scrollbar ${panelStyles.treePane} ${hasPrimaryPane && !primaryCollapsed ? panelStyles.treePaneSplit : ''}`.trim(), style: {
+                        flex: `0 0 ${PLANNING_DRAWER_TREE_WIDTH_PX}px`,
+                        width: `${PLANNING_DRAWER_TREE_WIDTH_PX}px`,
+                        minWidth: `${PLANNING_DRAWER_TREE_WIDTH_PX}px`,
+                        maxWidth: `${PLANNING_DRAWER_TREE_WIDTH_PX}px`,
+                    }, children: [_jsxs("div", { className: panelStyles.paneHeader, children: [_jsx("span", { className: panelStyles.paneHeaderLabel, children: "Planning" }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapseTreePane, children: _jsx(ChevronLeft, { size: 16 }) })] }), _jsx("div", { className: panelStyles.paneContent, children: _jsx(PlanningDrawerList, { initiatives: initiatives, standaloneWorkstreams: standaloneWorkstreams, activeInitiativeId: activeInitiativeId, activeWorkstreamId: activeWorkstreamId, expandedInitiativeIds: expandedInitiativeIds, detail: detail, secondaryPane: secondaryPane, onCreateInitiative: onCreateInitiative, onCreateWorkstream: onCreateWorkstream, onToggleInitiative: onToggleInitiative, onSelectInitiative: onSelectInitiative, onSelectWorkstream: onSelectWorkstream, onOpenInitiativeDetails: onOpenInitiativeDetails, onOpenWorkstreamDetails: onOpenWorkstreamDetails }) })] })), hasPrimaryPane && (primaryCollapsed ? (_jsx(CollapsedPane, { label: primaryPaneLabel, onExpand: onExpandPrimaryPane })) : (_jsxs("div", { className: `${panelStyles.paneShell} ${styles.appScrollbar} tf-scrollbar ${panelStyles.detailPane}`.trim(), style: {
+                        flex: `0 0 ${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
+                        width: `${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
+                        minWidth: `${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
+                        maxWidth: `${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
+                    }, children: [_jsxs("div", { className: panelStyles.paneHeader, children: [_jsx("span", { className: panelStyles.paneHeaderLabel, children: primaryPaneLabel }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapsePrimaryPane, children: _jsx(ChevronLeft, { size: 16 }) })] }), _jsx("div", { className: panelStyles.paneContent, children: editor ? (_jsx(PlanningDrawerEditor, { editor: editor, draftTitle: draftTitle, draftDescription: draftDescription, draftOwner: draftOwner, draftInitiativeId: draftInitiativeId, assigneeOptions: assigneeOptions, draftInitiativeSummary: draftInitiativeSummary, onChangeDraftTitle: onChangeDraftTitle, onChangeDraftDescription: onChangeDraftDescription, onChangeDraftOwner: onChangeDraftOwner, onChangeDraftInitiativeId: onChangeDraftInitiativeId, onCancel: onCancelEditor, onSubmit: onSubmitEditor, onAssignInitiativeToWorkstream: onAssignInitiativeToWorkstream })) : detail ? (_jsx(PlanningDrawerDetailView, { detail: detail, onOpenNestedWorkstreamDetails: detail.type === 'initiative' ? onOpenNestedWorkstreamDetails : undefined, onCreateTaskInWorkstream: detail.type === 'workstream' ? onCreateTaskInWorkstream : undefined, onCreateWorkstreamInInitiative: detail.type === 'initiative' ? onCreateWorkstreamInInitiative : undefined, onOpenTaskById: detail.type === 'workstream' ? onOpenTaskById : undefined, onAttachTaskToWorkstreamByReference: detail.type === 'workstream' ? onAttachTaskToWorkstreamByReference : undefined, onAttachWorkstreamToInitiativeByReference: detail.type === 'initiative' ? onAttachWorkstreamToInitiativeByReference : undefined, onEdit: () => detail.type === 'initiative'
+                                    ? onEditInitiative(detail.item.id)
+                                    : onEditWorkstream(detail.item.id), onArchive: () => detail.type === 'initiative'
+                                    ? onArchiveInitiative(detail.item.id)
+                                    : onArchiveWorkstream(detail.item.id), onUnarchive: () => detail.type === 'initiative'
+                                    ? onUnarchiveInitiative(detail.item.id)
+                                    : onUnarchiveWorkstream(detail.item.id) })) : null })] }))), hasSecondaryPane && (secondaryCollapsed ? (_jsx(CollapsedPane, { label: secondaryPaneLabel, onExpand: onExpandSecondaryPane })) : (_jsxs("div", { className: `${panelStyles.paneShell} ${styles.appScrollbar} tf-scrollbar ${panelStyles.detailPane}`.trim(), style: {
+                        flex: `0 0 ${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
+                        width: `${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
+                        minWidth: `${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
+                        maxWidth: `${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
+                    }, children: [_jsxs("div", { className: panelStyles.paneHeader, children: [_jsx("span", { className: panelStyles.paneHeaderLabel, children: secondaryPaneLabel }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapseSecondaryPane, children: _jsx(ChevronLeft, { size: 16 }) })] }), _jsx("div", { className: panelStyles.paneContent, children: secondaryPane?.kind === 'editor' ? (_jsx(PlanningDrawerEditor, { editor: secondaryPane.editor, draftTitle: draftTitle, draftDescription: draftDescription, draftOwner: draftOwner, draftInitiativeId: draftInitiativeId, assigneeOptions: assigneeOptions, draftInitiativeSummary: draftInitiativeSummary, onChangeDraftTitle: onChangeDraftTitle, onChangeDraftDescription: onChangeDraftDescription, onChangeDraftOwner: onChangeDraftOwner, onChangeDraftInitiativeId: onChangeDraftInitiativeId, onCancel: onBackFromSecondary, onSubmit: onSubmitEditor, onAssignInitiativeToWorkstream: onAssignInitiativeToWorkstream })) : secondaryPane ? (_jsx(PlanningDrawerDetailView, { detail: secondaryPane.detail, onCreateTaskInWorkstream: onCreateTaskInWorkstream, onOpenTaskById: onOpenTaskById, onAttachTaskToWorkstreamByReference: onAttachTaskToWorkstreamByReference, onEdit: () => onEditWorkstream(secondaryPane.detail.item.id), onArchive: () => onArchiveWorkstream(secondaryPane.detail.item.id), onUnarchive: () => onUnarchiveWorkstream(secondaryPane.detail.item.id) })) : null })] })))] }) }));
+}

package/dist/components/views/panels/ScheduleSidebar.d.ts

@@ -0,0 +1,52 @@
+/**
+ * ScheduleSidebar — the slide-in panel rendered to the right of the board
+ * when `groupBy === 'schedule'`.
+ *
+ * Displays a monthly mini-calendar for week navigation, display toggles
+ * (weekends, backlog, only-expired), and bulk-reschedule actions for
+ * expired/overdue tasks.
+ *
+ * Key props:
+ * - open / onClose — controls the slide-in visibility
+ * - scheduleSelectedDate / setScheduleSelectedDate — currently selected day
+ * - scheduleCalendarMonth / setScheduleCalendarMonth — calendar month key (YYYY-MM)
+ * - scheduleShow* / setScheduleShow* — display option toggles
+ * - expiredScheduledCount / overdueDueCount / expiredLeafCandidates / expiredRecoveryCandidates — expired task data
+ * - onMoveExpiredToSelectedWeek / onMoveExpiredToBacklog — bulk reschedule actions
+ * - scheduleBulkBusy — loading state for bulk operations
+ * - globalWeekStartsOn — 'sunday' | 'monday' preference
+ * - resolvedLocale — locale string for date formatting
+ */
+import { WeekStartsOn } from './scheduleUtils';
+import type { TaskItem } from '../../../types';
+export declare const SCHEDULE_SIDEBAR_WIDTH_PX = 320;
+export interface ScheduleSidebarProps {
+    open: boolean;
+    onClose: () => void;
+    scheduleSelectedDate: string;
+    setScheduleSelectedDate: (date: string) => void;
+    scheduleCalendarMonth: string;
+    setScheduleCalendarMonth: (month: string) => void;
+    scheduleShowWeekends: boolean;
+    setScheduleShowWeekends: (val: boolean) => void;
+    scheduleShowBacklog: boolean;
+    setScheduleShowBacklog: (val: boolean) => void;
+    scheduleOnlyExpired: boolean;
+    setScheduleOnlyExpired: (val: boolean) => void;
+    expiredScheduledCount: number;
+    overdueDueCount: number;
+    expiredLeafCandidates: TaskItem[];
+    expiredRecoveryCandidates: TaskItem[];
+    onMoveExpiredToSelectedWeek: () => void;
+    onMoveExpiredToBacklog: () => void;
+    scheduleBulkBusy: boolean;
+    globalWeekStartsOn: WeekStartsOn;
+    resolvedLocale: string;
+    /** Today's date as YYYY-MM-DD */
+    todayDateOnly: string;
+    /** The tasks used to compute calendar dot signals (non-archived) */
+    scheduleBaseTasks: TaskItem[];
+    scheduleWeekStart: Date;
+    scheduleWeekLabel: string;
+}
+export declare function ScheduleSidebar({ open, onClose, scheduleSelectedDate, setScheduleSelectedDate, scheduleCalendarMonth, setScheduleCalendarMonth, scheduleShowWeekends, setScheduleShowWeekends, scheduleShowBacklog, setScheduleShowBacklog, scheduleOnlyExpired, setScheduleOnlyExpired, expiredScheduledCount, overdueDueCount, expiredLeafCandidates, expiredRecoveryCandidates, onMoveExpiredToSelectedWeek, onMoveExpiredToBacklog, scheduleBulkBusy, globalWeekStartsOn, resolvedLocale, todayDateOnly, scheduleBaseTasks, scheduleWeekStart, scheduleWeekLabel, }: ScheduleSidebarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/views/panels/ScheduleSidebar.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ScheduleSidebar — the slide-in panel rendered to the right of the board
+ * when `groupBy === 'schedule'`.
+ *
+ * Displays a monthly mini-calendar for week navigation, display toggles
+ * (weekends, backlog, only-expired), and bulk-reschedule actions for
+ * expired/overdue tasks.
+ *
+ * Key props:
+ * - open / onClose — controls the slide-in visibility
+ * - scheduleSelectedDate / setScheduleSelectedDate — currently selected day
+ * - scheduleCalendarMonth / setScheduleCalendarMonth — calendar month key (YYYY-MM)
+ * - scheduleShow* / setScheduleShow* — display option toggles
+ * - expiredScheduledCount / overdueDueCount / expiredLeafCandidates / expiredRecoveryCandidates — expired task data
+ * - onMoveExpiredToSelectedWeek / onMoveExpiredToBacklog — bulk reschedule actions
+ * - scheduleBulkBusy — loading state for bulk operations
+ * - globalWeekStartsOn — 'sunday' | 'monday' preference
+ * - resolvedLocale — locale string for date formatting
+ */
+// === SECTION: imports ===
+import React from 'react';
+import { CalendarDays, ChevronLeft, ChevronRight } from 'lucide-react';
+import { formatDate } from '../../../utils/formatting';
+import styles from '../../../Taskforce.module.css';
+import sidebarStyles from './ScheduleSidebar.module.css';
+import { toDateOnlyLocal, parseDateOnlyLocal, startOfWeek, addDays, } from './scheduleUtils';
+export const SCHEDULE_SIDEBAR_WIDTH_PX = 320;
+// === SECTION: component ===
+export function ScheduleSidebar({ open, onClose, scheduleSelectedDate, setScheduleSelectedDate, scheduleCalendarMonth, setScheduleCalendarMonth, scheduleShowWeekends, setScheduleShowWeekends, scheduleShowBacklog, setScheduleShowBacklog, scheduleOnlyExpired, setScheduleOnlyExpired, expiredScheduledCount, overdueDueCount, expiredLeafCandidates, expiredRecoveryCandidates, onMoveExpiredToSelectedWeek, onMoveExpiredToBacklog, scheduleBulkBusy, globalWeekStartsOn, resolvedLocale, todayDateOnly, scheduleBaseTasks, scheduleWeekStart, scheduleWeekLabel, }) {
+    // === SECTION: derived calendar values ===
+    const scheduleMonthDate = React.useMemo(() => {
+        const [yearRaw, monthRaw] = scheduleCalendarMonth.split('-');
+        const year = Number(yearRaw);
+        const month = Number(monthRaw);
+        if (!Number.isInteger(year) || !Number.isInteger(month) || month < 1 || month > 12) {
+            const selectedDateObj = parseDateOnlyLocal(scheduleSelectedDate) || new Date();
+            return new Date(selectedDateObj.getFullYear(), selectedDateObj.getMonth(), 1);
+        }
+        return new Date(year, month - 1, 1);
+    }, [scheduleCalendarMonth, scheduleSelectedDate]);
+    const scheduleCalendarMonthLabel = React.useMemo(() => formatDate(scheduleMonthDate, { month: 'long', year: 'numeric' }, resolvedLocale), [scheduleMonthDate, resolvedLocale]);
+    const calendarCells = React.useMemo(() => {
+        const start = startOfWeek(scheduleMonthDate, globalWeekStartsOn);
+        return Array.from({ length: 42 }, (_, i) => addDays(start, i));
+    }, [scheduleMonthDate, globalWeekStartsOn]);
+    const calendarTaskSignals = React.useMemo(() => {
+        const byDate = new Map();
+        for (const task of scheduleBaseTasks) {
+            const dateOnly = task.scheduledDate || '';
+            if (!dateOnly)
+                continue;
+            const isTerminal = task.status === 'done' || task.status === 'cancelled';
+            const isExpired = !isTerminal && dateOnly < todayDateOnly;
+            const existing = byDate.get(dateOnly);
+            if (existing) {
+                existing.count += 1;
+                if (isExpired)
+                    existing.hasExpired = true;
+            }
+            else {
+                byDate.set(dateOnly, { count: 1, hasExpired: isExpired });
+            }
+        }
+        return byDate;
+    }, [scheduleBaseTasks, todayDateOnly]);
+    const calendarWeekdayLabels = React.useMemo(() => (globalWeekStartsOn === 'sunday'
+        ? ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+        : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']), [globalWeekStartsOn]);
+    // === SECTION: render ===
+    return (_jsxs("aside", { className: `${styles.appScrollbar} tf-scrollbar tf-sidebar-shell`, style: {
+            transform: open ? 'translateX(0)' : 'translateX(108%)',
+            pointerEvents: open ? 'auto' : 'none',
+            transition: 'transform 220ms cubic-bezier(0.4, 0, 0.2, 1)',
+            willChange: 'transform',
+            width: `${SCHEDULE_SIDEBAR_WIDTH_PX}px`,
+            minWidth: `${SCHEDULE_SIDEBAR_WIDTH_PX}px`,
+        }, children: [_jsxs("div", { className: "tf-sidebar-header", children: [_jsxs("div", { className: "tf-sidebar-title", children: [_jsx(CalendarDays, { size: 16 }), _jsx("span", { children: "Schedule Controls" })] }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: onClose, title: "Hide Schedule Sidebar", children: _jsx(ChevronRight, { size: 16 }) })] }), _jsxs("div", { className: sidebarStyles.weekLabel, children: ["Week of ", scheduleWeekLabel] }), _jsxs("div", { className: "tf-sidebar-section tf-surface-panel", children: [_jsxs("div", { className: sidebarStyles.calendarHeader, children: [_jsx("button", { className: "tf-control-icon", onClick: () => {
+                                    const prev = new Date(scheduleMonthDate);
+                                    prev.setMonth(scheduleMonthDate.getMonth() - 1);
+                                    setScheduleCalendarMonth(`${prev.getFullYear()}-${String(prev.getMonth() + 1).padStart(2, '0')}`);
+                                }, title: "Previous month", children: _jsx(ChevronLeft, { size: 14 }) }), _jsx("div", { className: sidebarStyles.monthLabel, children: scheduleCalendarMonthLabel }), _jsx("button", { className: "tf-control-icon", onClick: () => {
+                                    const next = new Date(scheduleMonthDate);
+                                    next.setMonth(scheduleMonthDate.getMonth() + 1);
+                                    setScheduleCalendarMonth(`${next.getFullYear()}-${String(next.getMonth() + 1).padStart(2, '0')}`);
+                                }, title: "Next month", children: _jsx(ChevronRight, { size: 14 }) })] }), _jsx("div", { className: sidebarStyles.weekdayGrid, children: calendarWeekdayLabels.map((label) => (_jsx("div", { className: sidebarStyles.weekdayLabel, children: label }, label))) }), _jsx("div", { className: sidebarStyles.calendarGrid, children: calendarCells.map((date) => {
+                            const dateOnly = toDateOnlyLocal(date);
+                            const isOutsideMonth = date.getMonth() !== scheduleMonthDate.getMonth();
+                            const weekStartForCell = startOfWeek(date, globalWeekStartsOn);
+                            const isSelectedWeek = toDateOnlyLocal(weekStartForCell) === toDateOnlyLocal(scheduleWeekStart);
+                            const isSelectedDate = dateOnly === scheduleSelectedDate;
+                            const isToday = dateOnly === todayDateOnly;
+                            const isPast = dateOnly < todayDateOnly;
+                            const signal = calendarTaskSignals.get(dateOnly);
+                            const hasScheduledTasks = !!signal;
+                            const hasExpiredScheduledTasks = !!signal?.hasExpired;
+                            return (_jsxs("button", { onClick: () => {
+                                    setScheduleSelectedDate(dateOnly);
+                                    setScheduleCalendarMonth(`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`);
+                                }, className: sidebarStyles.calendarDay, style: {
+                                    '--calendar-day-border': isSelectedDate
+                                        ? '1px solid #2563eb'
+                                        : isToday
+                                            ? '1px solid rgba(245, 158, 11, 0.95)'
+                                            : '1px solid transparent',
+                                    '--calendar-day-background': isSelectedDate
+                                        ? 'rgba(59,130,246,0.22)'
+                                        : isToday
+                                            ? 'rgba(245,158,11,0.16)'
+                                            : isSelectedWeek
+                                                ? 'rgba(59,130,246,0.18)'
+                                                : 'transparent',
+                                    '--calendar-day-color': isOutsideMonth ? 'var(--text-helper)' : 'var(--text-primary)',
+                                    '--calendar-day-font-weight': isSelectedDate || isToday ? 700 : 500,
+                                    '--calendar-day-opacity': isPast ? 0.42 : 1
+                                }, title: `${isToday ? `${dateOnly} (Today)` : dateOnly}`
+                                    + (hasScheduledTasks ? ` • ${signal?.count} scheduled` : '')
+                                    + (hasExpiredScheduledTasks ? ' • includes expired' : ''), children: [date.getDate(), hasScheduledTasks && (_jsx("span", { className: sidebarStyles.calendarDayDot, style: {
+                                            '--calendar-dot-background': hasExpiredScheduledTasks ? '#ef4444' : '#3b82f6',
+                                            '--calendar-dot-opacity': isOutsideMonth ? 0.6 : 0.95
+                                        } }))] }, dateOnly));
+                        }) }), _jsx("div", { className: sidebarStyles.jumpRow, children: _jsx("button", { className: "tf-control-icon", onClick: () => {
+                                const now = new Date();
+                                setScheduleSelectedDate(toDateOnlyLocal(now));
+                                setScheduleCalendarMonth(`${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`);
+                            }, title: "Jump to current week", children: "Today" }) })] }), _jsxs("div", { className: `tf-sidebar-section tf-surface-panel ${sidebarStyles.displaySection}`, children: [_jsx("div", { className: sidebarStyles.sectionTitle, children: "Display" }), _jsxs("label", { className: sidebarStyles.toggleLabel, children: [_jsx("input", { type: "checkbox", checked: scheduleShowWeekends, onChange: (e) => setScheduleShowWeekends(e.target.checked) }), "Show weekends"] }), _jsxs("label", { className: sidebarStyles.toggleLabel, children: [_jsx("input", { type: "checkbox", checked: scheduleShowBacklog, onChange: (e) => setScheduleShowBacklog(e.target.checked) }), "Show backlog"] }), _jsxs("label", { className: sidebarStyles.toggleLabel, children: [_jsx("input", { type: "checkbox", checked: scheduleOnlyExpired, onChange: (e) => setScheduleOnlyExpired(e.target.checked) }), "Only expired/overdue"] })] }), expiredScheduledCount > 0 && (_jsxs("div", { className: "tf-sidebar-section tf-surface-panel", children: [_jsx("div", { className: sidebarStyles.sectionTitle, children: "Expired Tasks" }), _jsxs("div", { className: sidebarStyles.expiredSummary, children: [_jsxs("span", { children: [expiredScheduledCount, " expired"] }), _jsxs("span", { children: [overdueDueCount, " overdue"] })] }), _jsx("button", { className: `tf-control-icon ${sidebarStyles.actionButton}`, onClick: onMoveExpiredToSelectedWeek, disabled: scheduleBulkBusy || expiredLeafCandidates.length === 0, title: "Move expired leaf tasks to the selected week while keeping weekday alignment", children: scheduleBulkBusy ? 'Working...' : 'Schedule to selected week' }), _jsx("button", { className: `tf-control-icon ${sidebarStyles.actionButton}`, onClick: onMoveExpiredToBacklog, disabled: scheduleBulkBusy || expiredRecoveryCandidates.length === 0, title: "Unschedule expired/overdue tasks back to backlog", children: scheduleBulkBusy ? 'Working...' : 'Unschedule to backlog' })] }))] }));
+}

package/dist/components/views/panels/scheduleUtils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Schedule-specific date utility functions used by the ScheduleSidebar panel
+ * and the parent StandaloneLayout component for column/date calculations.
+ */
+export type ScheduleDayKey = 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun';
+export type WeekStartsOn = 'sunday' | 'monday';
+export declare const SCHEDULE_DAY_KEYS: ScheduleDayKey[];
+export declare const SCHEDULE_DAY_LABELS: Record<ScheduleDayKey, string>;
+export declare function toDateOnlyLocal(date: Date): string;
+export declare function parseDateOnlyLocal(dateOnly: string): Date | null;
+export declare function startOfWeek(date: Date, weekStartsOn: WeekStartsOn): Date;
+export declare function getDayOffsetFromWeekStart(dayKey: ScheduleDayKey, weekStartsOn: WeekStartsOn): number;
+export declare function addDays(base: Date, days: number): Date;
+export declare function dateOnlyToIsoWeekKey(dateOnly: string): string | null;

package/dist/components/views/panels/scheduleUtils.js

@@ -0,0 +1,79 @@
+/**
+ * Schedule-specific date utility functions used by the ScheduleSidebar panel
+ * and the parent StandaloneLayout component for column/date calculations.
+ */
+export const SCHEDULE_DAY_KEYS = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
+export const SCHEDULE_DAY_LABELS = {
+    mon: 'Mon',
+    tue: 'Tue',
+    wed: 'Wed',
+    thu: 'Thu',
+    fri: 'Fri',
+    sat: 'Sat',
+    sun: 'Sun'
+};
+export function toDateOnlyLocal(date) {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, '0');
+    const d = String(date.getDate()).padStart(2, '0');
+    return `${y}-${m}-${d}`;
+}
+export function parseDateOnlyLocal(dateOnly) {
+    const match = dateOnly.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (!match)
+        return null;
+    const parsed = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+    if (Number.isNaN(parsed.getTime()))
+        return null;
+    return parsed;
+}
+export function startOfWeek(date, weekStartsOn) {
+    const day = date.getDay();
+    const delta = weekStartsOn === 'sunday'
+        ? -day
+        : (day === 0 ? -6 : 1 - day);
+    const result = new Date(date);
+    result.setHours(0, 0, 0, 0);
+    result.setDate(result.getDate() + delta);
+    return result;
+}
+export function getDayOffsetFromWeekStart(dayKey, weekStartsOn) {
+    if (weekStartsOn === 'sunday') {
+        const sundayFirst = {
+            sun: 0,
+            mon: 1,
+            tue: 2,
+            wed: 3,
+            thu: 4,
+            fri: 5,
+            sat: 6
+        };
+        return sundayFirst[dayKey];
+    }
+    const mondayFirst = {
+        mon: 0,
+        tue: 1,
+        wed: 2,
+        thu: 3,
+        fri: 4,
+        sat: 5,
+        sun: 6
+    };
+    return mondayFirst[dayKey];
+}
+export function addDays(base, days) {
+    const next = new Date(base);
+    next.setDate(base.getDate() + days);
+    return next;
+}
+export function dateOnlyToIsoWeekKey(dateOnly) {
+    const match = dateOnly.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+    if (!match)
+        return null;
+    const dt = new Date(Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3])));
+    const day = dt.getUTCDay() || 7;
+    dt.setUTCDate(dt.getUTCDate() + 4 - day);
+    const yearStart = new Date(Date.UTC(dt.getUTCFullYear(), 0, 1));
+    const week = Math.ceil((((dt.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
+    return `${dt.getUTCFullYear()}-W${String(week).padStart(2, '0')}`;
+}

package/dist/components/views/teamManagementAccess.d.ts

@@ -0,0 +1,6 @@
+export type TeamPlanMode = 'personal' | 'team' | 'unknown';
+export type TeamWorkspaceRole = 'owner' | 'admin' | 'member' | 'read-only';
+export declare function normalizeTeamWorkspaceRole(value: unknown): TeamWorkspaceRole | null;
+export declare function canManageTeamWorkspace(canManageCloudWorkspaces: boolean, currentWorkspaceRole: TeamWorkspaceRole | null): boolean;
+export declare function resolveTeamPlanModeFromEntitlements(payload: unknown): Exclude<TeamPlanMode, 'unknown'>;
+export declare function canOpenTeamManagement(canManageCloudWorkspaces: boolean, currentWorkspaceRole: TeamWorkspaceRole | null, _teamPlanMode: TeamPlanMode): boolean;

package/dist/components/views/teamManagementAccess.js

@@ -0,0 +1,18 @@
+export function normalizeTeamWorkspaceRole(value) {
+    const role = String(value || '').trim().toLowerCase();
+    if (role === 'owner' || role === 'admin' || role === 'member' || role === 'read-only')
+        return role;
+    return null;
+}
+export function canManageTeamWorkspace(canManageCloudWorkspaces, currentWorkspaceRole) {
+    return canManageCloudWorkspaces && (currentWorkspaceRole === 'owner' || currentWorkspaceRole === 'admin');
+}
+export function resolveTeamPlanModeFromEntitlements(payload) {
+    const state = String(payload?.state || '').trim().toLowerCase();
+    const teamAllowed = payload?.features?.['collaboration.team_management']?.allowed === true;
+    const stateAllows = state === 'active' || state === 'trialing' || state === 'grace';
+    return teamAllowed && stateAllows ? 'team' : 'personal';
+}
+export function canOpenTeamManagement(canManageCloudWorkspaces, currentWorkspaceRole, _teamPlanMode) {
+    return canManageTeamWorkspace(canManageCloudWorkspaces, currentWorkspaceRole);
+}

package/dist/components/views/teamManagementAccess.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/views/teamManagementAccess.test.js

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+import { canManageTeamWorkspace, canOpenTeamManagement, normalizeTeamWorkspaceRole, resolveTeamPlanModeFromEntitlements } from './teamManagementAccess';
+describe('teamManagementAccess', () => {
+    it('normalizes supported workspace roles', () => {
+        expect(normalizeTeamWorkspaceRole('owner')).toBe('owner');
+        expect(normalizeTeamWorkspaceRole('Admin')).toBe('admin');
+        expect(normalizeTeamWorkspaceRole('read-only')).toBe('read-only');
+        expect(normalizeTeamWorkspaceRole('viewer')).toBeNull();
+    });
+    it('allows team management eligibility only for cloud owners and admins', () => {
+        expect(canManageTeamWorkspace(true, 'owner')).toBe(true);
+        expect(canManageTeamWorkspace(true, 'admin')).toBe(true);
+        expect(canManageTeamWorkspace(true, 'member')).toBe(false);
+        expect(canManageTeamWorkspace(false, 'owner')).toBe(false);
+    });
+    it('resolves team plan mode only when team management is allowed in an active team entitlement', () => {
+        expect(resolveTeamPlanModeFromEntitlements({
+            state: 'active',
+            features: {
+                'collaboration.team_management': { allowed: true, access: 'enabled', config: {} }
+            }
+        })).toBe('team');
+        expect(resolveTeamPlanModeFromEntitlements({
+            state: 'canceled',
+            features: {
+                'collaboration.team_management': { allowed: true, access: 'enabled', config: {} }
+            }
+        })).toBe('personal');
+        expect(resolveTeamPlanModeFromEntitlements({
+            state: 'active',
+            features: {
+                'collaboration.team_management': { allowed: false, access: 'disabled', config: {} }
+            }
+        })).toBe('personal');
+    });
+    it('opens Team Management whenever the workspace admin role is present', () => {
+        expect(canOpenTeamManagement(true, 'owner', 'team')).toBe(true);
+        expect(canOpenTeamManagement(true, 'admin', 'team')).toBe(true);
+        expect(canOpenTeamManagement(true, 'owner', 'personal')).toBe(true);
+        expect(canOpenTeamManagement(true, 'owner', 'unknown')).toBe(true);
+        expect(canOpenTeamManagement(true, 'member', 'team')).toBe(false);
+        expect(canOpenTeamManagement(false, 'owner', 'team')).toBe(false);
+    });
+});

package/dist/config/clientDeployment.d.ts

@@ -0,0 +1,2 @@
+import { type ResolvedDeploymentConfig } from './deployment.js';
+export declare function resolveClientDeploymentConfig(env: Record<string, unknown>): ResolvedDeploymentConfig;