@taskforcehq/taskforce 0.3.327 → 0.3.329

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from 'react';
 import { useDndContext, useDraggable, useDroppable } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
-import { ArrowUpDown, Archive, ChevronDown, ChevronLeft, ChevronRight, Eye, EyeOff, Filter, GripVertical, Kanban, Link2, Pencil, Plus, RotateCcw, Search, Star, Unlink, X, } from 'lucide-react';
+import { ArrowUpDown, Archive, ChevronDown, ChevronLeft, ChevronRight, Eye, EyeOff, Filter, GripVertical, Kanban, Pencil, Plus, RotateCcw, Search, Star, Unlink, X, } from 'lucide-react';
 import styles from '../../../Taskforce.module.css';
 import panelStyles from './PlanningDrawer.module.css';
 import { HierarchyActionBadge } from '../../ui/HierarchyActionBadge';
@@ -16,6 +16,7 @@ import { getPlanningFavoriteKey, } from '../../../utils/planningFavorites';
 import { TASK_ASSIGNEE_UNASSIGNED_COLOR, TASK_ASSIGNEE_UNASSIGNED_ICON, } from '../../../utils/assignees';
 import { PlanningEntityActivity, PlanningEntityContext, PlanningEntityDescription, } from '../../features/planning/PlanningEntityDetails';
 import { PlanningEntitySummary, PlanningNoTasks, PlanningProgress, PlanningReferenceBadge, PlanningSummaryMeta, } from '../../features/planning/PlanningEntitySummary';
+import { PlanningVisualIdentity } from '../../features/planning/PlanningVisualIdentity';
 import { PlanningTaskCard } from '../../features/planning/PlanningTaskCard';
 import { PlanningTaskArrangeControl } from '../../features/planning/PlanningTaskArrangeControl';
 import planningDropdownStyles from '../../features/planning/PlanningDropdownControl.module.css';
@@ -72,11 +73,10 @@ function countArchivedDetailChildren(detail) {
     }
     return (detail.item.tasks || []).filter((task) => Boolean(task.isArchived)).length;
 }
-function PlanningRow({ rowId, rowType, referenceLabel, item, ownerOption, ownerOptions, workstreamCount, active, isArchived = false, detailOpen = false, canExpand = false, expanded = false, controlsId, onToggleExpand, onToggleScope, onOpenDetails, onChangeOwner, initiativeLinkOptions = [], onLinkInitiative, favorite, favoriteReady, onToggleFavorite, onArchiveReady, hierarchyInteractions = true, }) {
+function PlanningRow({ rowId, rowType, referenceLabel, item, ownerOption, ownerOptions, workstreamCount, active, isArchived = false, detailOpen = false, canExpand = false, expanded = false, controlsId, onToggleExpand, onToggleScope, onOpenDetails, onChangeOwner, onChangeIdentity, initiativeLinkOptions = [], onLinkInitiative, favorite, favoriteReady, onToggleFavorite, onArchiveReady, hierarchyInteractions = true, }) {
     const { title } = item;
     const [archiveConfirmationVisible, setArchiveConfirmationVisible] = React.useState(false);
     const [archiveBusy, setArchiveBusy] = React.useState(false);
-    const [initiativePickerVisible, setInitiativePickerVisible] = React.useState(false);
     const [initiativeLinkBusy, setInitiativeLinkBusy] = React.useState(false);
     const { active: dndActive } = useDndContext();
     const dragType = String(dndActive?.data?.current?.type || '');
@@ -91,7 +91,7 @@ function PlanningRow({ rowId, rowType, referenceLabel, item, ownerOption, ownerO
         disabled: !hierarchyInteractions,
     });
     const draggable = hierarchyInteractions && rowType === 'workstream';
-    const { attributes, listeners, setNodeRef: setDragRef, transform, isDragging, } = useDraggable({
+    const { attributes, listeners, setNodeRef: setDragRef, setActivatorNodeRef, transform, isDragging, } = useDraggable({
         id: `planning-workstream:${rowId}`,
         data: { type: 'planning-workstream', workstreamId: rowId },
         disabled: !draggable,
@@ -163,9 +163,7 @@ function PlanningRow({ rowId, rowType, referenceLabel, item, ownerOption, ownerO
             return;
         setInitiativeLinkBusy(true);
         try {
-            const result = await onLinkInitiative(option);
-            if (result !== false)
-                setInitiativePickerVisible(false);
+            await onLinkInitiative(option);
         }
         finally {
             setInitiativeLinkBusy(false);
@@ -178,29 +176,26 @@ function PlanningRow({ rowId, rowType, referenceLabel, item, ownerOption, ownerO
         : initiativeLinkOptions.length === 0
             ? 'No initiatives available'
             : 'Link initiative';
-    return (_jsx("div", { ref: setDropRef, style: dragStyle, className: `${panelStyles.treeRow} ${isArchived ? panelStyles.treeRowArchived : ''} ${detailOpen ? panelStyles.treeRowDetailOpen : ''} ${showDropReady ? panelStyles.treeRowDropReady : ''} ${isOver ? panelStyles.treeRowDropActive : ''} ${isDragging ? panelStyles.treeRowDragging : ''} ${showDropReady ? panelStyles.treeRowDropMode : ''}`, "data-board-scoped": active || undefined, children: _jsxs("div", { className: panelStyles.rowContent, children: [_jsxs("div", { className: panelStyles.rowTopRow, children: [_jsxs("div", { className: panelStyles.rowReferenceActions, children: [canLinkInitiative ? (_jsx(HierarchyActionBadge, { disabled: initiativeLinkDisabled, onClick: (event) => {
-                                        event.stopPropagation();
-                                        setInitiativePickerVisible((current) => !current);
-                                    }, title: initiativeLinkTitle, ariaLabel: "Link initiative", ariaExpanded: initiativePickerVisible, children: _jsx(Link2, { size: 14, "aria-hidden": "true" }) })) : null, _jsx(PlanningReferenceBadge, { label: referenceLabel || 'Reference pending', entityType: rowType, entityName: title, pending: !referenceLabel })] }), _jsxs("div", { className: panelStyles.rowActions, role: "toolbar", "aria-label": `${rowType === 'initiative' ? 'Initiative' : 'Workstream'} actions for ${title}`, "aria-orientation": "horizontal", onKeyDown: handleRowActionKeyDown, children: [_jsx("button", { type: "button", ref: (node) => {
-                                        rowActionRefs.current.favorite = node;
-                                    }, className: `tf-control-icon tf-control-icon-compact ${panelStyles.favoriteButton} ${favorite ? 'tf-control-icon-active' : ''}`.trim(), onClick: onToggleFavorite, onFocus: () => handleRowActionFocus('favorite'), disabled: !favoriteReady, tabIndex: effectiveActiveRowActionId === 'favorite' ? 0 : -1, "data-planning-row-action": "favorite", title: !favoriteReady
-                                        ? 'Loading Favorites'
-                                        : favorite ? `Remove ${rowType} from Favorites` : `Add ${rowType} to Favorites`, "aria-label": !favoriteReady
-                                        ? `Loading Favorites for ${rowType} ${title}`
-                                        : favorite ? `Remove ${rowType} ${title} from Favorites` : `Add ${rowType} ${title} to Favorites`, "aria-pressed": favorite, children: _jsx(Star, { size: 14, fill: favorite ? 'currentColor' : 'none', "aria-hidden": "true" }) }), archiveActionVisible ? (_jsx("button", { type: "button", ref: (node) => {
-                                        rowActionRefs.current.archive = node;
-                                    }, className: "tf-control-icon tf-control-icon-compact", onClick: () => setArchiveConfirmationVisible(true), onFocus: () => handleRowActionFocus('archive'), tabIndex: effectiveActiveRowActionId === 'archive' ? 0 : -1, "data-planning-row-action": "archive", title: `Archive completed ${rowType}`, "aria-label": `Archive completed ${rowType} ${title}`, "aria-expanded": archiveConfirmationVisible, children: _jsx(Archive, { size: 14, "aria-hidden": "true" }) })) : null, _jsx("button", { type: "button", ref: (node) => {
-                                        rowActionRefs.current.scope = node;
-                                    }, className: `tf-control-icon tf-control-icon-compact ${panelStyles.scopeButton} ${active ? 'tf-control-icon-active' : ''}`.trim(), onClick: onToggleScope, onFocus: () => handleRowActionFocus('scope'), tabIndex: effectiveActiveRowActionId === 'scope' ? 0 : -1, "data-planning-row-action": "scope", title: active ? 'Clear board scope' : 'Scope board to this item', "aria-label": active ? `Clear board scope for ${title}` : `Scope board to ${title}`, "aria-pressed": active, children: _jsx(Kanban, { size: 14, "aria-hidden": "true" }) }), _jsx("button", { type: "button", ref: (node) => {
-                                        rowActionRefs.current.disclosure = node;
-                                    }, className: `tf-control-icon tf-control-icon-compact ${panelStyles.treeChevron}`.trim(), onClick: expansionEnabled ? onToggleExpand : undefined, onFocus: () => handleRowActionFocus('disclosure'), tabIndex: effectiveActiveRowActionId === 'disclosure' ? 0 : -1, "data-planning-row-action": "disclosure", title: expansionLabel, "aria-label": expansionLabel, "aria-expanded": expansionEnabled ? expanded : false, "aria-controls": expansionEnabled && expanded ? controlsId : undefined, disabled: !expansionEnabled, children: expanded && expansionEnabled
-                                        ? _jsx(ChevronDown, { size: 14, "aria-hidden": "true" })
-                                        : _jsx(ChevronRight, { size: 14, "aria-hidden": "true" }) })] })] }), canLinkInitiative && initiativePickerVisible ? (_jsxs("div", { className: `${panelStyles.relationshipPickerRow} ${panelStyles.rowRelationshipPicker}`.trim(), role: "group", "aria-label": `Link ${title} to initiative`, children: [_jsx(PlanningLinkPicker, { options: initiativeLinkOptions, entityLabel: "initiative", onSelect: (option) => void handleLinkInitiative(option), disabled: initiativeLinkBusy }), _jsx("button", { type: "button", className: "tf-control-icon tf-control-icon-compact", disabled: initiativeLinkBusy, onClick: () => setInitiativePickerVisible(false), title: "Cancel initiative link", "aria-label": "Cancel initiative link", children: _jsx(X, { size: 14, "aria-hidden": "true" }) })] })) : null, _jsxs("div", { className: panelStyles.rowBody, children: [draggable ? (_jsx("div", { className: panelStyles.rowLeadingActions, "data-planning-leading-actions": "true", children: _jsx("button", { type: "button", ref: setDragRef, className: panelStyles.dragHandle, title: "Drag workstream", "aria-label": `Drag workstream ${title}`, "data-planning-drag-handle": "true", ...attributes, ...listeners, children: _jsx(GripVertical, { size: 15, "aria-hidden": "true" }) }) })) : null, _jsx("div", { role: "button", tabIndex: 0, className: `${panelStyles.rowButton} ${draggable ? panelStyles.rowButtonWithGrip : ''}`.trim(), onClick: onOpenDetails, onKeyDown: (event) => {
-                                if (event.key !== 'Enter' && event.key !== ' ')
-                                    return;
-                                event.preventDefault();
-                                onOpenDetails();
-                            }, "aria-label": `View ${rowType} details for ${title}`, "aria-pressed": detailOpen, children: _jsx(PlanningEntitySummary, { item: item, entityType: rowType, workstreamCount: workstreamCount, ownerOption: ownerOption ? toPlanningAssigneeOption(ownerOption) : undefined, ownerOptions: ownerOptions.map(toPlanningAssigneeOption), onChangeOwner: onChangeOwner }) })] }), archiveConfirmationVisible ? (_jsx(PlanningArchiveConfirmation, { entityType: rowType, title: title, activeTaskCount: item.archiveActiveTaskCount, activeWorkstreamCount: item.archiveActiveWorkstreamCount, busy: archiveBusy, onCancel: () => setArchiveConfirmationVisible(false), onConfirm: () => void handleConfirmArchive() })) : null] }) }));
+    return (_jsxs("div", { ref: setDragRef, style: dragStyle, className: `${panelStyles.treeRowShell} ${draggable ? panelStyles.treeRowShellDraggable : ''} ${isDragging ? panelStyles.treeRowDragging : ''} ${showDropReady ? panelStyles.treeRowShellDropMode : ''}`.trim(), "data-planning-draggable-row": draggable || undefined, children: [draggable ? (_jsx("div", { className: panelStyles.rowDragGutter, "data-planning-drag-gutter": "true", children: _jsx("button", { type: "button", ref: setActivatorNodeRef, className: panelStyles.dragHandle, title: "Drag onto an initiative to move this workstream", "aria-label": `Move workstream ${title} to an initiative`, "data-planning-drag-handle": "true", ...attributes, ...listeners, children: _jsx(GripVertical, { size: 15, "aria-hidden": "true" }) }) })) : null, _jsx("div", { ref: setDropRef, className: `${panelStyles.treeRow} ${isArchived ? panelStyles.treeRowArchived : ''} ${detailOpen ? panelStyles.treeRowDetailOpen : ''} ${showDropReady ? panelStyles.treeRowDropReady : ''} ${isOver ? panelStyles.treeRowDropActive : ''} ${showDropReady ? panelStyles.treeRowDropMode : ''}`, "data-board-scoped": active || undefined, children: _jsxs("div", { className: panelStyles.rowContent, children: [_jsxs("div", { className: panelStyles.rowTopRow, children: [_jsxs("div", { className: panelStyles.rowReferenceActions, children: [canLinkInitiative ? (_jsx(PlanningLinkPicker, { options: initiativeLinkOptions, entityLabel: "initiative", onSelect: (option) => void handleLinkInitiative(option), disabled: initiativeLinkDisabled, iconTrigger: true, triggerTitle: initiativeLinkTitle })) : null, _jsx(PlanningReferenceBadge, { label: referenceLabel || 'Reference pending', entityType: rowType, entityName: title, pending: !referenceLabel })] }), _jsxs("div", { className: panelStyles.rowActions, role: "toolbar", "aria-label": `${rowType === 'initiative' ? 'Initiative' : 'Workstream'} actions for ${title}`, "aria-orientation": "horizontal", onKeyDown: handleRowActionKeyDown, children: [_jsx("button", { type: "button", ref: (node) => {
+                                                rowActionRefs.current.favorite = node;
+                                            }, className: `tf-control-icon tf-control-icon-compact ${panelStyles.favoriteButton} ${favorite ? 'tf-control-icon-active' : ''}`.trim(), onClick: onToggleFavorite, onFocus: () => handleRowActionFocus('favorite'), disabled: !favoriteReady, tabIndex: effectiveActiveRowActionId === 'favorite' ? 0 : -1, "data-planning-row-action": "favorite", title: !favoriteReady
+                                                ? 'Loading Favorites'
+                                                : favorite ? `Remove ${rowType} from Favorites` : `Add ${rowType} to Favorites`, "aria-label": !favoriteReady
+                                                ? `Loading Favorites for ${rowType} ${title}`
+                                                : favorite ? `Remove ${rowType} ${title} from Favorites` : `Add ${rowType} ${title} to Favorites`, "aria-pressed": favorite, children: _jsx(Star, { size: 14, fill: favorite ? 'currentColor' : 'none', "aria-hidden": "true" }) }), archiveActionVisible ? (_jsx("button", { type: "button", ref: (node) => {
+                                                rowActionRefs.current.archive = node;
+                                            }, className: "tf-control-icon tf-control-icon-compact", onClick: () => setArchiveConfirmationVisible(true), onFocus: () => handleRowActionFocus('archive'), tabIndex: effectiveActiveRowActionId === 'archive' ? 0 : -1, "data-planning-row-action": "archive", title: `Archive completed ${rowType}`, "aria-label": `Archive completed ${rowType} ${title}`, "aria-expanded": archiveConfirmationVisible, children: _jsx(Archive, { size: 14, "aria-hidden": "true" }) })) : null, _jsx("button", { type: "button", ref: (node) => {
+                                                rowActionRefs.current.scope = node;
+                                            }, className: `tf-control-icon tf-control-icon-compact ${panelStyles.scopeButton} ${active ? 'tf-control-icon-active' : ''}`.trim(), onClick: onToggleScope, onFocus: () => handleRowActionFocus('scope'), tabIndex: effectiveActiveRowActionId === 'scope' ? 0 : -1, "data-planning-row-action": "scope", title: active ? 'Clear board scope' : 'Scope board to this item', "aria-label": active ? `Clear board scope for ${title}` : `Scope board to ${title}`, "aria-pressed": active, children: _jsx(Kanban, { size: 14, "aria-hidden": "true" }) }), _jsx("button", { type: "button", ref: (node) => {
+                                                rowActionRefs.current.disclosure = node;
+                                            }, className: `tf-control-icon tf-control-icon-compact ${panelStyles.treeChevron}`.trim(), onClick: expansionEnabled ? onToggleExpand : undefined, onFocus: () => handleRowActionFocus('disclosure'), tabIndex: effectiveActiveRowActionId === 'disclosure' ? 0 : -1, "data-planning-row-action": "disclosure", title: expansionLabel, "aria-label": expansionLabel, "aria-expanded": expansionEnabled ? expanded : false, "aria-controls": expansionEnabled && expanded ? controlsId : undefined, disabled: !expansionEnabled, children: expanded && expansionEnabled
+                                                ? _jsx(ChevronDown, { size: 14, "aria-hidden": "true" })
+                                                : _jsx(ChevronRight, { size: 14, "aria-hidden": "true" }) })] })] }), _jsx("div", { className: panelStyles.rowBody, children: _jsx("div", { role: "button", tabIndex: 0, className: panelStyles.rowButton, onClick: onOpenDetails, onKeyDown: (event) => {
+                                    if (event.key !== 'Enter' && event.key !== ' ')
+                                        return;
+                                    event.preventDefault();
+                                    onOpenDetails();
+                                }, "aria-label": `View ${rowType} details for ${title}`, "aria-pressed": detailOpen, children: _jsx(PlanningEntitySummary, { item: item, entityType: rowType, workstreamCount: workstreamCount, ownerOption: ownerOption ? toPlanningAssigneeOption(ownerOption) : undefined, ownerOptions: ownerOptions.map(toPlanningAssigneeOption), onChangeOwner: onChangeOwner, onChangeIdentity: onChangeIdentity }) }) }), archiveConfirmationVisible ? (_jsx(PlanningArchiveConfirmation, { entityType: rowType, title: title, activeTaskCount: item.archiveActiveTaskCount, activeWorkstreamCount: item.archiveActiveWorkstreamCount, busy: archiveBusy, onCancel: () => setArchiveConfirmationVisible(false), onConfirm: () => void handleConfirmArchive() })) : null] }) })] }));
 }
 function PlanningTreeTaskCard({ task, assigneeOption, assigneeOptions, showTaskCardStatusLabel, onOpenTaskById, onChangeTaskAssignee, onSetTaskStatus, onArchivePlanningTask, }) {
     const [archiveBusy, setArchiveBusy] = React.useState(false);
@@ -233,7 +228,7 @@ function RelationshipPane({ label, title, description, onCollapse, action, paneR
             maxWidth: `${PLANNING_DRAWER_DETAIL_WIDTH_PX}px`,
         }, children: [_jsxs("div", { className: panelStyles.paneHeader, children: [_jsx("h2", { className: panelStyles.paneHeaderLabel, tabIndex: -1, "data-planning-pane-heading": true, children: label }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapse, "aria-label": `Collapse ${label} pane`, title: `Collapse ${label} pane`, children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })] }), _jsx("div", { className: `${panelStyles.paneContent} ${isEmptyState ? panelStyles.relationshipPaneContentEmpty : ''}`.trim(), children: _jsxs("div", { className: `${panelStyles.relationshipState} ${isEmptyState ? panelStyles.relationshipStateEmpty : ''}`.trim(), "data-relationship-display": isEmptyState ? 'empty' : 'detail', children: [_jsx("span", { className: panelStyles.relationshipStateTitle, children: title }), description ? _jsx("p", { className: panelStyles.relationshipStateText, children: description }) : null, action ? (_jsx("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: action.onClick, children: action.label })) : null] }) })] }));
 }
-function PlanningDrawerList({ initiatives, standaloneWorkstreams, planningLoadState, taskScope, showArchivedPlanning, currentOwnerId, assigneeOptions, showTaskCardStatusLabel = false, taskArrangeMode = 'execution', activeInitiativeId, activeWorkstreamId, navigatorSort, navigatorSortReady, onNavigatorSortChange, planningFavorites, onTogglePlanningFavorite, favoritesSectionCollapsed, initiativesSectionCollapsed, workstreamsSectionCollapsed, onToggleFavoritesSection, onToggleInitiativesSection, onToggleWorkstreamsSection, expandedInitiativeIds, detail, secondaryPane, onCreateInitiative, onCreateWorkstream, onToggleInitiative, onSelectInitiative, onSelectWorkstream, onOpenInitiativeDetails, onOpenWorkstreamDetails, onOpenNestedWorkstreamDetails, onOpenTaskById, onSetTaskStatus, onChangePlanningOwner, onChangeTaskAssignee, onArchivePlanningTask, onArchiveResolvedWorkstream, onArchiveResolvedInitiative, linkOptions, onAssignInitiativeToWorkstream, onRetryPlanning, }) {
+function PlanningDrawerList({ initiatives, standaloneWorkstreams, planningLoadState, taskScope, showArchivedPlanning, currentOwnerId, assigneeOptions, showTaskCardStatusLabel = false, taskArrangeMode = 'execution', activeInitiativeId, activeWorkstreamId, navigatorSort, navigatorSortReady, onNavigatorSortChange, planningFavorites, onTogglePlanningFavorite, favoritesSectionCollapsed, initiativesSectionCollapsed, workstreamsSectionCollapsed, onToggleFavoritesSection, onToggleInitiativesSection, onToggleWorkstreamsSection, expandedInitiativeIds, detail, secondaryPane, onCreateInitiative, onCreateWorkstream, onToggleInitiative, onSelectInitiative, onSelectWorkstream, onOpenInitiativeDetails, onOpenWorkstreamDetails, onOpenNestedWorkstreamDetails, onOpenTaskById, onSetTaskStatus, onChangePlanningOwner, onChangePlanningIdentity = () => { }, onChangeTaskAssignee, onArchivePlanningTask, onArchiveResolvedWorkstream, onArchiveResolvedInitiative, linkOptions, onAssignInitiativeToWorkstream, onRetryPlanning, }) {
     const [searchQuery, setSearchQuery] = React.useState('');
     const [ownerFilter, setOwnerFilter] = React.useState('all');
     const [filtersExpanded, setFiltersExpanded] = React.useState(false);
@@ -435,7 +430,7 @@ function PlanningDrawerList({ initiatives, standaloneWorkstreams, planningLoadSt
                                     const favoriteControlsId = `planning-${favoriteBranchKey.replaceAll(':', '-')}-children`;
                                     return (_jsxs("li", { children: [_jsx(PlanningRow, { rowId: `favorite:${favorite.type}:${item.id}`, rowType: favorite.type, referenceLabel: favorite.type === 'initiative'
                                                     ? formatInitiativeReference(item)
-                                                    : formatWorkstreamReference(item), item: item, ownerOption: item.ownerId ? assigneeOptionByValue.get(item.ownerId) : undefined, ownerOptions: assigneeOptions, onChangeOwner: (ownerId) => onChangePlanningOwner(favorite.type, item.id, ownerId === 'unassigned' ? '' : ownerId), workstreamCount: favoriteInitiative
+                                                    : formatWorkstreamReference(item), item: item, ownerOption: item.ownerId ? assigneeOptionByValue.get(item.ownerId) : undefined, ownerOptions: assigneeOptions, onChangeOwner: (ownerId) => onChangePlanningOwner(favorite.type, item.id, ownerId === 'unassigned' ? '' : ownerId), onChangeIdentity: (patch) => onChangePlanningIdentity(favorite.type, item.id, patch), workstreamCount: favoriteInitiative
                                                     ? visibleInitiativeWorkstreams.length
                                                     : undefined, active: favorite.type === 'initiative'
                                                     ? activeInitiativeId === item.id && !activeWorkstreamId
@@ -476,7 +471,7 @@ function PlanningDrawerList({ initiatives, standaloneWorkstreams, planningLoadSt
                                                         const childControlsId = `planning-${childBranchKey.replaceAll(':', '-')}-children`;
                                                         return (_jsxs("li", { children: [_jsx(PlanningRow, { rowId: childBranchKey, rowType: "workstream", referenceLabel: formatWorkstreamReference(workstream), item: workstream, ownerOption: workstream.ownerId
                                                                         ? assigneeOptionByValue.get(workstream.ownerId)
-                                                                        : undefined, ownerOptions: assigneeOptions, onChangeOwner: (ownerId) => onChangePlanningOwner('workstream', workstream.id, ownerId === 'unassigned' ? '' : ownerId), active: activeWorkstreamId === workstream.id, isArchived: Boolean(workstream.isArchived), detailOpen: (detail?.type === 'workstream' && detail.item.id === workstream.id)
+                                                                        : undefined, ownerOptions: assigneeOptions, onChangeOwner: (ownerId) => onChangePlanningOwner('workstream', workstream.id, ownerId === 'unassigned' ? '' : ownerId), onChangeIdentity: (patch) => onChangePlanningIdentity('workstream', workstream.id, patch), active: activeWorkstreamId === workstream.id, isArchived: Boolean(workstream.isArchived), detailOpen: (detail?.type === 'workstream' && detail.item.id === workstream.id)
                                                                         || (secondaryPane?.kind === 'detail'
                                                                             && secondaryPane.detail.item.id === workstream.id), canExpand: Boolean(workstream.tasks?.length), expanded: childExpanded, controlsId: childControlsId, onToggleExpand: () => toggleFavoriteBranch(childBranchKey), onToggleScope: () => onSelectWorkstream(workstream.id, favoriteInitiative.id), onOpenDetails: () => {
                                                                         onOpenInitiativeDetails(favoriteInitiative.id);
@@ -503,16 +498,16 @@ function PlanningDrawerList({ initiatives, standaloneWorkstreams, planningLoadSt
                                     const expanded = navigatorResults.hasCriteria
                                         ? displayedWorkstreams.length > 0
                                         : expandedInitiativeIds.has(initiative.id);
-                                    return (_jsxs("li", { children: [_jsx(PlanningRow, { rowId: initiative.id, rowType: "initiative", referenceLabel: formatInitiativeReference(initiative), item: initiative, ownerOption: initiative.ownerId ? assigneeOptionByValue.get(initiative.ownerId) : undefined, ownerOptions: assigneeOptions, onChangeOwner: (ownerId) => onChangePlanningOwner('initiative', initiative.id, ownerId === 'unassigned' ? '' : ownerId), workstreamCount: treeWorkstreams.length, active: activeInitiativeId === initiative.id && !activeWorkstreamId, isArchived: Boolean(initiative.isArchived), detailOpen: detail?.type === 'initiative' && detail.item.id === initiative.id, canExpand: allWorkstreams.length > 0, expanded: expanded, controlsId: `planning-children-${initiative.id}`, onToggleExpand: () => onToggleInitiative(initiative.id), onToggleScope: () => onSelectInitiative(initiative.id), onOpenDetails: () => onOpenInitiativeDetails(initiative.id), favorite: planningFavoriteKeys.has(getPlanningFavoriteKey({ type: 'initiative', id: initiative.id })), favoriteReady: navigatorSortReady, onToggleFavorite: () => onTogglePlanningFavorite({ type: 'initiative', id: initiative.id }), onArchiveReady: onArchiveResolvedInitiative
+                                    return (_jsxs("li", { children: [_jsx(PlanningRow, { rowId: initiative.id, rowType: "initiative", referenceLabel: formatInitiativeReference(initiative), item: initiative, ownerOption: initiative.ownerId ? assigneeOptionByValue.get(initiative.ownerId) : undefined, ownerOptions: assigneeOptions, onChangeOwner: (ownerId) => onChangePlanningOwner('initiative', initiative.id, ownerId === 'unassigned' ? '' : ownerId), onChangeIdentity: (patch) => onChangePlanningIdentity('initiative', initiative.id, patch), workstreamCount: treeWorkstreams.length, active: activeInitiativeId === initiative.id && !activeWorkstreamId, isArchived: Boolean(initiative.isArchived), detailOpen: detail?.type === 'initiative' && detail.item.id === initiative.id, canExpand: allWorkstreams.length > 0, expanded: expanded, controlsId: `planning-children-${initiative.id}`, onToggleExpand: () => onToggleInitiative(initiative.id), onToggleScope: () => onSelectInitiative(initiative.id), onOpenDetails: () => onOpenInitiativeDetails(initiative.id), favorite: planningFavoriteKeys.has(getPlanningFavoriteKey({ type: 'initiative', id: initiative.id })), favoriteReady: navigatorSortReady, onToggleFavorite: () => onTogglePlanningFavorite({ type: 'initiative', id: initiative.id }), onArchiveReady: onArchiveResolvedInitiative
                                                     ? () => onArchiveResolvedInitiative(initiative.id)
-                                                    : undefined }), expanded && displayedWorkstreams.length > 0 && (_jsx("ul", { id: `planning-children-${initiative.id}`, className: panelStyles.treeChildren, "aria-label": `Workstreams in ${initiative.title}`, children: displayedWorkstreams.map((workstream) => (_jsxs("li", { children: [_jsx(PlanningRow, { rowId: workstream.id, rowType: "workstream", referenceLabel: formatWorkstreamReference(workstream), item: workstream, ownerOption: workstream.ownerId ? assigneeOptionByValue.get(workstream.ownerId) : undefined, ownerOptions: assigneeOptions, onChangeOwner: (ownerId) => onChangePlanningOwner('workstream', workstream.id, ownerId === 'unassigned' ? '' : ownerId), active: activeWorkstreamId === workstream.id, isArchived: Boolean(workstream.isArchived), detailOpen: (detail?.type === 'workstream' && detail.item.id === workstream.id)
+                                                    : undefined }), expanded && displayedWorkstreams.length > 0 && (_jsx("ul", { id: `planning-children-${initiative.id}`, className: `${panelStyles.treeChildren} ${panelStyles.treeWorkstreamChildren}`.trim(), "aria-label": `Workstreams in ${initiative.title}`, children: displayedWorkstreams.map((workstream) => (_jsxs("li", { children: [_jsx(PlanningRow, { rowId: workstream.id, rowType: "workstream", referenceLabel: formatWorkstreamReference(workstream), item: workstream, ownerOption: workstream.ownerId ? assigneeOptionByValue.get(workstream.ownerId) : undefined, ownerOptions: assigneeOptions, onChangeOwner: (ownerId) => onChangePlanningOwner('workstream', workstream.id, ownerId === 'unassigned' ? '' : ownerId), onChangeIdentity: (patch) => onChangePlanningIdentity('workstream', workstream.id, patch), active: activeWorkstreamId === workstream.id, isArchived: Boolean(workstream.isArchived), detailOpen: (detail?.type === 'workstream' && detail.item.id === workstream.id)
                                                                 || (secondaryPane?.kind === 'detail' && secondaryPane.detail.item.id === workstream.id), canExpand: (workstream.tasks || []).length > 0, expanded: expandedWorkstreamIds.has(workstream.id), controlsId: `planning-tasks-${workstream.id}`, onToggleExpand: () => toggleWorkstreamTasks(workstream.id), onToggleScope: () => onSelectWorkstream(workstream.id, initiative.id), onOpenDetails: () => {
                                                                 onOpenInitiativeDetails(initiative.id);
                                                                 onOpenNestedWorkstreamDetails(workstream.id);
                                                             }, favorite: planningFavoriteKeys.has(getPlanningFavoriteKey({ type: 'workstream', id: workstream.id })), favoriteReady: navigatorSortReady, onToggleFavorite: () => onTogglePlanningFavorite({ type: 'workstream', id: workstream.id }), onArchiveReady: onArchiveResolvedWorkstream
                                                                 ? () => onArchiveResolvedWorkstream(workstream.id)
                                                                 : undefined }), renderWorkstreamTasks(workstream)] }, workstream.id))) }))] }, initiative.id));
-                                }) })) : null] }), _jsxs("div", { className: panelStyles.sectionGroup, children: [_jsx(DisclosureSectionHeader, { label: "Workstreams", count: navigatorResults.standaloneWorkstreams.length, showZeroCount: true, actions: (planningLoadState.collections.workstreams === 'ready' ? (_jsx("button", { type: "button", className: "tf-control-icon", title: "Create workstream", "aria-label": "Create workstream", onClick: onCreateWorkstream, children: _jsx(Plus, { size: 15 }) })) : null), expanded: !workstreamsSectionCollapsed, expandedTitle: "Collapse workstreams", collapsedTitle: "Expand workstreams", onToggle: onToggleWorkstreamsSection, controlsId: !workstreamsSectionCollapsed ? 'planning-workstreams-section' : undefined }), !workstreamsSectionCollapsed ? (_jsx("ul", { id: "planning-workstreams-section", className: panelStyles.treeList, "aria-label": "Standalone workstreams", children: planningLoadState.collections.workstreams === 'error' ? (_jsx("li", { children: _jsx(PlanningFailureState, { compact: true, title: "Workstreams unavailable", message: "Workstreams could not be loaded.", retrying: planningLoadState.isRefreshing, onRetry: onRetryPlanning }) })) : navigatorResults.standaloneWorkstreams.length === 0 ? (_jsxs("li", { className: panelStyles.emptyPanel, children: [_jsx("div", { className: panelStyles.emptyPanelTitle, children: workstreamEmptyTitle }), _jsx("div", { className: panelStyles.emptyPanelText, children: workstreamEmptyText })] })) : navigatorResults.standaloneWorkstreams.map((workstream) => (_jsxs("li", { children: [_jsx(PlanningRow, { rowId: workstream.id, rowType: "workstream", referenceLabel: formatWorkstreamReference(workstream), item: workstream, ownerOption: workstream.ownerId ? assigneeOptionByValue.get(workstream.ownerId) : undefined, ownerOptions: assigneeOptions, onChangeOwner: (ownerId) => onChangePlanningOwner('workstream', workstream.id, ownerId === 'unassigned' ? '' : ownerId), active: activeWorkstreamId === workstream.id, isArchived: Boolean(workstream.isArchived), detailOpen: (detail?.type === 'workstream' && detail.item.id === workstream.id)
+                                }) })) : null] }), _jsxs("div", { className: panelStyles.sectionGroup, children: [_jsx(DisclosureSectionHeader, { label: "Workstreams", count: navigatorResults.standaloneWorkstreams.length, showZeroCount: true, actions: (planningLoadState.collections.workstreams === 'ready' ? (_jsx("button", { type: "button", className: "tf-control-icon", title: "Create workstream", "aria-label": "Create workstream", onClick: onCreateWorkstream, children: _jsx(Plus, { size: 15 }) })) : null), expanded: !workstreamsSectionCollapsed, expandedTitle: "Collapse workstreams", collapsedTitle: "Expand workstreams", onToggle: onToggleWorkstreamsSection, controlsId: !workstreamsSectionCollapsed ? 'planning-workstreams-section' : undefined }), !workstreamsSectionCollapsed ? (_jsx("ul", { id: "planning-workstreams-section", className: panelStyles.treeList, "aria-label": "Standalone workstreams", children: planningLoadState.collections.workstreams === 'error' ? (_jsx("li", { children: _jsx(PlanningFailureState, { compact: true, title: "Workstreams unavailable", message: "Workstreams could not be loaded.", retrying: planningLoadState.isRefreshing, onRetry: onRetryPlanning }) })) : navigatorResults.standaloneWorkstreams.length === 0 ? (_jsxs("li", { className: panelStyles.emptyPanel, children: [_jsx("div", { className: panelStyles.emptyPanelTitle, children: workstreamEmptyTitle }), _jsx("div", { className: panelStyles.emptyPanelText, children: workstreamEmptyText })] })) : navigatorResults.standaloneWorkstreams.map((workstream) => (_jsxs("li", { children: [_jsx(PlanningRow, { rowId: workstream.id, rowType: "workstream", referenceLabel: formatWorkstreamReference(workstream), item: workstream, ownerOption: workstream.ownerId ? assigneeOptionByValue.get(workstream.ownerId) : undefined, ownerOptions: assigneeOptions, onChangeOwner: (ownerId) => onChangePlanningOwner('workstream', workstream.id, ownerId === 'unassigned' ? '' : ownerId), onChangeIdentity: (patch) => onChangePlanningIdentity('workstream', workstream.id, patch), active: activeWorkstreamId === workstream.id, isArchived: Boolean(workstream.isArchived), detailOpen: (detail?.type === 'workstream' && detail.item.id === workstream.id)
                                                 || (secondaryPane?.kind === 'detail' && secondaryPane.detail.item.id === workstream.id), canExpand: (workstream.tasks || []).length > 0, expanded: expandedWorkstreamIds.has(workstream.id), controlsId: `planning-tasks-${workstream.id}`, onToggleExpand: () => toggleWorkstreamTasks(workstream.id), onToggleScope: () => onSelectWorkstream(workstream.id, null), onOpenDetails: () => onOpenWorkstreamDetails(workstream.id), favorite: planningFavoriteKeys.has(getPlanningFavoriteKey({ type: 'workstream', id: workstream.id })), favoriteReady: navigatorSortReady, onToggleFavorite: () => onTogglePlanningFavorite({ type: 'workstream', id: workstream.id }), onArchiveReady: onArchiveResolvedWorkstream
                                                 ? () => onArchiveResolvedWorkstream(workstream.id)
                                                 : undefined, initiativeLinkOptions: linkOptions.initiatives, onLinkInitiative: (option) => onAssignInitiativeToWorkstream(workstream.id, option.referenceLabel) }), renderWorkstreamTasks(workstream)] }, workstream.id))) })) : null] })] }))] }));
@@ -523,10 +518,9 @@ function PlanningLoadingState() {
 function PlanningFailureState({ title, message, retrying, onRetry, compact = false, }) {
     return (_jsxs("div", { className: `${panelStyles.failureState} ${compact ? panelStyles.failureStateCompact : ''} tf-surface-inset`.trim(), role: "alert", children: [_jsxs("div", { className: panelStyles.failureCopy, children: [_jsx("strong", { children: title }), _jsx("span", { children: message })] }), _jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", disabled: retrying, onClick: onRetry, children: retrying ? 'Retrying…' : 'Retry' })] }));
 }
-function PlanningDrawerDetailView({ detail, showArchivedChildren, inlineEditor, selectedChildWorkstreamId, currentWorkspaceId, currentActorId, theme, onOpenNestedWorkstreamDetails, onArchivePlanningTask, onArchiveResolvedWorkstream, onArchiveResolvedEntity, onEdit, onChangeOwner, onChangePlanningOwner, onArchive, onUnarchive, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onOpenTaskById, onChangeTaskAssignee, taskReferences, onAssignTaskToWorkstream, onAssignInitiativeToWorkstream, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, onAddPlanningContextFile, onRemovePlanningContextFile, onUpdatePlanningContextCaption, parentInitiative = null, assigneeOptions, linkOptions, showTaskCardStatusLabel = false, taskArrangeMode = 'execution', onTaskArrangeModeChange = () => { }, onReorderWorkstreamTasks, onSetTaskStatus, hydrationState, onRetryHydration, }) {
+function PlanningDrawerDetailView({ detail, showArchivedChildren, inlineEditor, selectedChildWorkstreamId, currentWorkspaceId, currentActorId, theme, onOpenNestedWorkstreamDetails, onArchivePlanningTask, onArchiveResolvedWorkstream, onArchiveResolvedEntity, onEdit, onChangeOwner, onChangePlanningOwner, onChangePlanningIdentity, onArchive, onUnarchive, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onOpenTaskById, onChangeTaskAssignee, taskReferences, onAssignTaskToWorkstream, onAssignInitiativeToWorkstream, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, onAddPlanningContextFile, onRemovePlanningContextFile, onUpdatePlanningContextCaption, parentInitiative = null, assigneeOptions, linkOptions, showTaskCardStatusLabel = false, taskArrangeMode = 'execution', onTaskArrangeModeChange = () => { }, onReorderWorkstreamTasks, onSetTaskStatus, hydrationState, onRetryHydration, }) {
     const inlineEditorFormId = React.useId();
     const [isAttachingReference, setIsAttachingReference] = React.useState(false);
-    const [showParentLinkPicker, setShowParentLinkPicker] = React.useState(false);
     const [pendingUnlink, setPendingUnlink] = React.useState(null);
     const [relationshipRecovery, setRelationshipRecovery] = React.useState(null);
     const [isChangingRelationship, setIsChangingRelationship] = React.useState(false);
@@ -595,7 +589,6 @@ function PlanningDrawerDetailView({ detail, showArchivedChildren, inlineEditor,
                 : `Archive ${detailLabel.toLowerCase()}`;
     React.useEffect(() => {
         setIsAttachingReference(false);
-        setShowParentLinkPicker(false);
         setPendingUnlink(null);
         setRelationshipRecovery(null);
         setIsChangingRelationship(false);
@@ -663,9 +656,7 @@ function PlanningDrawerDetailView({ detail, showArchivedChildren, inlineEditor,
             return;
         setIsChangingRelationship(true);
         try {
-            const result = await onAssignInitiativeToWorkstream(detail.item.id, option.referenceLabel);
-            if (result !== false)
-                setShowParentLinkPicker(false);
+            await onAssignInitiativeToWorkstream(detail.item.id, option.referenceLabel);
         }
         finally {
             setIsChangingRelationship(false);
@@ -767,7 +758,7 @@ function PlanningDrawerDetailView({ detail, showArchivedChildren, inlineEditor,
                                                         });
                                                     }, title: "Unlink workstream from initiative", ariaLabel: "Unlink workstream from initiative", children: _jsx(Unlink, { size: 14, "aria-hidden": "true" }) })) : null] })) : null })) : null, detail.type === 'workstream'
                                         && !parentInitiativeReferenceLabel
-                                        && !inlineEditor ? (_jsx(HierarchyActionBadge, { disabled: !onAssignInitiativeToWorkstream, onClick: () => setShowParentLinkPicker(true), title: "Link initiative", ariaLabel: "Link initiative", ariaExpanded: showParentLinkPicker, children: _jsx(Link2, { size: 14, "aria-hidden": "true" }) })) : null, _jsx(PlanningReferenceBadge, { label: detailReferenceLabel || 'Reference pending', entityType: detail.type, entityName: detail.item.title, pending: !detailReferenceLabel })] }), _jsx("div", { className: panelStyles.detailTopActions, children: inlineEditor ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", onClick: inlineEditor.onCancel, disabled: inlineEditor.isSubmitting, children: "Cancel" }), _jsx("button", { type: "submit", form: inlineEditorFormId, className: "tf-button-primary tf-button-compact", disabled: inlineEditor.isSubmitting, children: inlineEditor.isSubmitting ? 'Saving…' : 'Save' })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "tf-control-icon", disabled: archiveDetailState.mode === 'blocked' || archiveDetailState.mode === 'checking', onClick: () => {
+                                        && !inlineEditor ? (_jsx(PlanningLinkPicker, { options: linkOptions.initiatives, entityLabel: "initiative", onSelect: handleLinkInitiative, disabled: !onAssignInitiativeToWorkstream || isChangingRelationship, iconTrigger: true, triggerTitle: "Link initiative" })) : null, _jsx(PlanningReferenceBadge, { label: detailReferenceLabel || 'Reference pending', entityType: detail.type, entityName: detail.item.title, pending: !detailReferenceLabel })] }), _jsx("div", { className: panelStyles.detailTopActions, children: inlineEditor ? (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", onClick: inlineEditor.onCancel, disabled: inlineEditor.isSubmitting, children: "Cancel" }), _jsx("button", { type: "submit", form: inlineEditorFormId, className: "tf-button-primary tf-button-compact", disabled: inlineEditor.isSubmitting, children: inlineEditor.isSubmitting ? 'Saving…' : 'Save' })] })) : (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "tf-control-icon", disabled: archiveDetailState.mode === 'blocked' || archiveDetailState.mode === 'checking', onClick: () => {
                                                 if (archiveDetailState.mode === 'archived') {
                                                     onUnarchive?.();
                                                 }
@@ -781,10 +772,9 @@ function PlanningDrawerDetailView({ detail, showArchivedChildren, inlineEditor,
                                                 ? archiveEntityConfirmationVisible
                                                 : undefined, children: archiveDetailState.mode === 'archived'
                                                 ? _jsx(RotateCcw, { size: 14, "aria-hidden": "true" })
-                                                : _jsx(Archive, { size: 14, "aria-hidden": "true" }) }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: () => {
-                                                setShowParentLinkPicker(false);
-                                                onEdit();
-                                            }, title: `Edit ${detailLabel.toLowerCase()} details`, "aria-label": `Edit ${detailLabel.toLowerCase()} details`, children: _jsx(Pencil, { size: 14, "aria-hidden": "true" }) })] })) })] }), archiveEntityConfirmationVisible && archiveDetailState.mode === 'ready' ? (_jsx(PlanningArchiveConfirmation, { entityType: detail.type, title: detail.item.title, activeTaskCount: detail.item.archiveActiveTaskCount, activeWorkstreamCount: detail.item.archiveActiveWorkstreamCount, busy: archiveEntityBusy, onCancel: () => setArchiveEntityConfirmationVisible(false), onConfirm: () => void handleConfirmArchiveEntity() })) : null, detail.type === 'workstream' ? renderRelationshipFeedback('workstream', detail.item.id) : null, detail.type === 'workstream' && !parentInitiativeReferenceLabel && showParentLinkPicker ? (_jsxs("div", { className: panelStyles.relationshipPickerRow, role: "group", "aria-label": "Link workstream to initiative", children: [_jsx(PlanningLinkPicker, { options: linkOptions.initiatives, entityLabel: "initiative", onSelect: handleLinkInitiative, disabled: !onAssignInitiativeToWorkstream || isChangingRelationship }), _jsx("button", { type: "button", className: "tf-control-icon tf-control-icon-compact", disabled: isChangingRelationship, onClick: () => setShowParentLinkPicker(false), title: "Cancel initiative link", "aria-label": "Cancel initiative link", children: _jsx(X, { size: 14, "aria-hidden": "true" }) })] })) : null, inlineEditor ? (_jsx(PlanningDrawerEditor, { editor: inlineEditor.editor, draftTitle: inlineEditor.draftTitle, draftDescription: inlineEditor.draftDescription, draftOwner: inlineEditor.draftOwner, draftInitiativeId: inlineEditor.draftInitiativeId, assigneeOptions: assigneeOptions, initiativeLinkOptions: linkOptions.initiatives, draftInitiativeSummary: inlineEditor.draftInitiativeSummary, onChangeDraftTitle: inlineEditor.onChangeDraftTitle, onChangeDraftDescription: inlineEditor.onChangeDraftDescription, onChangeDraftOwner: inlineEditor.onChangeDraftOwner, onChangeDraftInitiativeId: inlineEditor.onChangeDraftInitiativeId, onCancel: inlineEditor.onCancel, onSubmit: inlineEditor.onSubmit, isSubmitting: inlineEditor.isSubmitting, inline: true, formId: inlineEditorFormId })) : (_jsxs(_Fragment, { children: [_jsx("h3", { className: panelStyles.detailTitle, children: detail.item.title }), _jsx(PlanningEntityDescription, { description: detail.item.description, label: detailLabel, taskReferences: taskReferences, className: `${panelStyles.detailDescription} ${styles.appScrollbar} tf-scrollbar`.trim(), markdownClassName: panelStyles.detailDescriptionMarkdown })] })), _jsxs("div", { className: panelStyles.detailOwnerField, children: [_jsx("span", { className: panelStyles.detailOwnerLabel, children: "Owner" }), _jsx(PlanningOwnerDropdown, { value: ownerValue, disabled: !onChangeOwner || isSavingOwner, onChange: (nextOwnerId) => void handleOwnerChange(nextOwnerId), ariaLabel: `${detailLabel} owner`, options: assigneeOptions, className: `${planningDropdownStyles.control} ${panelStyles.ownerSelect}` })] }), detail.item.taskCount > 0 ? (_jsx(PlanningProgress, { value: detail.item.progressPercent, label: `${detail.item.progressPercent}% resolved`, statusCounts: detail.item.statusCounts })) : (_jsx(PlanningNoTasks, {})), _jsx(PlanningSummaryMeta, { item: detail.item, workstreamCount: detail.type === 'initiative'
+                                                : _jsx(Archive, { size: 14, "aria-hidden": "true" }) }), _jsx("button", { type: "button", className: "tf-control-icon", onClick: onEdit, title: `Edit ${detailLabel.toLowerCase()} details`, "aria-label": `Edit ${detailLabel.toLowerCase()} details`, children: _jsx(Pencil, { size: 14, "aria-hidden": "true" }) })] })) })] }), archiveEntityConfirmationVisible && archiveDetailState.mode === 'ready' ? (_jsx(PlanningArchiveConfirmation, { entityType: detail.type, title: detail.item.title, activeTaskCount: detail.item.archiveActiveTaskCount, activeWorkstreamCount: detail.item.archiveActiveWorkstreamCount, busy: archiveEntityBusy, onCancel: () => setArchiveEntityConfirmationVisible(false), onConfirm: () => void handleConfirmArchiveEntity() })) : null, detail.type === 'workstream' ? renderRelationshipFeedback('workstream', detail.item.id) : null, inlineEditor ? (_jsx(PlanningDrawerEditor, { editor: inlineEditor.editor, draftTitle: inlineEditor.draftTitle, draftDescription: inlineEditor.draftDescription, draftOwner: inlineEditor.draftOwner, draftInitiativeId: inlineEditor.draftInitiativeId, assigneeOptions: assigneeOptions, initiativeLinkOptions: linkOptions.initiatives, draftInitiativeSummary: inlineEditor.draftInitiativeSummary, onChangeDraftTitle: inlineEditor.onChangeDraftTitle, onChangeDraftDescription: inlineEditor.onChangeDraftDescription, onChangeDraftOwner: inlineEditor.onChangeDraftOwner, onChangeDraftInitiativeId: inlineEditor.onChangeDraftInitiativeId, onCancel: inlineEditor.onCancel, onSubmit: inlineEditor.onSubmit, isSubmitting: inlineEditor.isSubmitting, inline: true, formId: inlineEditorFormId })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: panelStyles.detailTitleRow, children: [_jsx(PlanningVisualIdentity, { entityType: detail.type, entityId: detail.item.id, icon: detail.item.icon, color: detail.item.color, size: "detail", disabled: Boolean(detail.item.isArchived), onChange: onChangePlanningIdentity
+                                            ? (patch) => onChangePlanningIdentity(detail.type, detail.item.id, patch)
+                                            : undefined }), _jsx("h3", { className: panelStyles.detailTitle, children: detail.item.title })] }), _jsx(PlanningEntityDescription, { description: detail.item.description, label: detailLabel, taskReferences: taskReferences, className: `${panelStyles.detailDescription} ${styles.appScrollbar} tf-scrollbar`.trim(), markdownClassName: panelStyles.detailDescriptionMarkdown })] })), _jsxs("div", { className: panelStyles.detailOwnerField, children: [_jsx("span", { className: panelStyles.detailOwnerLabel, children: "Owner" }), _jsx(PlanningOwnerDropdown, { value: ownerValue, disabled: !onChangeOwner || isSavingOwner, onChange: (nextOwnerId) => void handleOwnerChange(nextOwnerId), ariaLabel: `${detailLabel} owner`, options: assigneeOptions, className: `${planningDropdownStyles.control} ${panelStyles.ownerSelect}` })] }), detail.item.taskCount > 0 ? (_jsx(PlanningProgress, { value: detail.item.progressPercent, label: `${detail.item.progressPercent}% resolved`, statusCounts: detail.item.statusCounts })) : (_jsx(PlanningNoTasks, {})), _jsx(PlanningSummaryMeta, { item: detail.item, workstreamCount: detail.type === 'initiative'
                             ? detail.item.workstreamCount ?? detail.item.workstreams.length
                             : undefined, className: panelStyles.detailSummaryMeta }), detail.item.taskCount > 0 ? (_jsx("span", { className: panelStyles.passiveGuidance, children: "Lifetime progress includes archived tasks." })) : null] }), _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: [_jsxs("div", { className: panelStyles.sectionTitle, children: [childLabel, " (", visibleChildCount, ")"] }), _jsx("div", { className: panelStyles.headerActionGroup, children: 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 }) })) })] }), _jsx("div", { className: panelStyles.linkPickerRow, children: _jsx(PlanningLinkPicker, { options: availableLinkOptions, entityLabel: detail.type === 'initiative' ? 'workstream' : 'task', onSelect: handleAttachReference, disabled: !hasAttachReferenceHandler || isAttachingReference }) }), detail.type === 'workstream' ? (_jsx(PlanningTaskArrangeControl, { value: taskArrangeMode, onChange: onTaskArrangeModeChange })) : null, detail.type === 'initiative' ? (visibleChildItems.length > 0 ? visibleChildItems.map((workstream) => {
                         const workstreamReferenceLabel = formatWorkstreamReference(workstream);
@@ -822,6 +812,8 @@ function PlanningDrawerDetailView({ detail, showArchivedChildren, inlineEditor,
                                                 ? toPlanningAssigneeOption(assigneeOptionByValue.get(workstream.ownerId))
                                                 : undefined, ownerOptions: assigneeOptions.map(toPlanningAssigneeOption), onChangeOwner: onChangePlanningOwner
                                                 ? (ownerId) => onChangePlanningOwner('workstream', workstream.id, ownerId === 'unassigned' ? '' : ownerId)
+                                                : undefined, onChangeIdentity: onChangePlanningIdentity
+                                                ? (patch) => onChangePlanningIdentity('workstream', workstream.id, patch)
                                                 : undefined }) })] }) }, workstream.id));
                     }) : (_jsx("div", { className: panelStyles.passiveGuidance, children: "No workstreams are linked to this initiative." }))) : (visibleTaskItems.length > 0 ? (_jsx(PlanningTaskOrderList, { tasks: visibleTaskItems, mode: taskArrangeMode, onReorder: onReorderWorkstreamTasks
                             ? (taskIds) => onReorderWorkstreamTasks(detail.item.id, mergeVisiblePlanningTaskOrder(arrangePlanningTasks(taskItems, 'execution'), taskIds))
@@ -855,7 +847,7 @@ function PlanningDrawerDetailView({ detail, showArchivedChildren, inlineEditor,
                                         }, title: "Archive task", "aria-label": `Archive task ${referenceLabel || task.title}`, children: _jsx(Archive, { size: 14, "aria-hidden": "true" }) })) : undefined }) }, task.id));
                         } })) : (_jsx("div", { className: panelStyles.passiveGuidance, children: "No tasks are linked to this workstream." }))), detachedRelationshipRecovery] }), _jsx("div", { className: panelStyles.listCard, children: _jsx(PlanningEntityContext, { entityType: detail.type, entityId: detail.item.id, referenceLabel: detailReferenceLabel, workspaceId: currentWorkspaceId, attachments: detail.item.attachments, readOnly: Boolean(detail.item.isArchived), onAddAttachment: (file) => onAddPlanningContextFile?.(detail.type, detail.item.id, file), onRemoveAttachment: (index) => onRemovePlanningContextFile?.(detail.type, detail.item.id, index), onUpdateAttachmentCaption: (index, caption) => (onUpdatePlanningContextCaption?.(detail.type, detail.item.id, index, caption)) }) }), _jsx("div", { className: panelStyles.listCard, children: _jsx(PlanningEntityActivity, { entityType: detail.type, item: detail.item, assigneeOptions: assigneeOptions.map(toPlanningAssigneeOption), currentActorId: currentActorId, taskReferences: taskReferences, parentInitiative: parentInitiative, listClassName: panelStyles.activityTimelineList, emptyClassName: panelStyles.activityTimelineEmpty, hydrationState: hydrationState, onRetryHydration: onRetryHydration }) }), _jsx(PlanningUnlinkConfirmation, { item: pendingUnlink, busy: isChangingRelationship, theme: theme, onCancel: () => setPendingUnlink(null), onConfirm: () => void handleConfirmUnlink() })] }));
 }
-function PlanningDrawerEditor({ editor, draftTitle, draftDescription, draftOwner, draftInitiativeId, assigneeOptions, initiativeLinkOptions, draftInitiativeSummary, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onCancel, onSubmit, isSubmitting, inline = false, formId, }) {
+function PlanningDrawerEditor({ editor, draftTitle, draftDescription, draftOwner, draftInitiativeId, draftIcon, draftColor, assigneeOptions, initiativeLinkOptions, draftInitiativeSummary, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onChangeDraftIcon, onChangeDraftColor, onCancel, onSubmit, isSubmitting, inline = false, formId, }) {
     const entityLabel = editor.entityType === 'initiative' ? 'Initiative' : 'Workstream';
     const titleInputId = React.useId();
     const titleErrorId = React.useId();
@@ -881,7 +873,12 @@ function PlanningDrawerEditor({ editor, draftTitle, draftDescription, draftOwner
         event.preventDefault();
         onCancel();
     }, [inline, isSubmitting, onCancel]);
-    return (_jsxs("form", { id: formId, className: `${panelStyles.editorCard} ${inline ? panelStyles.inlineEditorCard : ''}`.trim(), onSubmit: handleSubmit, onKeyDown: handleKeyDown, noValidate: true, children: [_jsxs("div", { className: panelStyles.editorField, children: [_jsxs("label", { className: panelStyles.editorLabel, htmlFor: titleInputId, children: [entityLabel, " title"] }), _jsx("input", { ref: titleInputRef, id: titleInputId, "data-planning-editor-title": true, className: styles.input, disabled: isSubmitting, required: true, "aria-invalid": titleError ? 'true' : undefined, "aria-describedby": titleError ? titleErrorId : undefined, value: draftTitle, onChange: (event) => {
+    return (_jsxs("form", { id: formId, className: `${panelStyles.editorCard} ${inline ? panelStyles.inlineEditorCard : ''}`.trim(), onSubmit: handleSubmit, onKeyDown: handleKeyDown, noValidate: true, children: [editor.mode === 'create' && onChangeDraftIcon && onChangeDraftColor ? (_jsxs("div", { className: panelStyles.editorIdentityField, children: [_jsx(PlanningVisualIdentity, { entityType: editor.entityType, entityId: "create-preview", icon: draftIcon, color: draftColor || 'blue', size: "detail", onChange: (patch) => {
+                            if (Object.prototype.hasOwnProperty.call(patch, 'icon'))
+                                onChangeDraftIcon(patch.icon ?? null);
+                            if (Object.prototype.hasOwnProperty.call(patch, 'color'))
+                                onChangeDraftColor(patch.color ?? null);
+                        } }), _jsx("span", { children: "Choose an icon and color" })] })) : null, _jsxs("div", { className: panelStyles.editorField, children: [_jsxs("label", { className: panelStyles.editorLabel, htmlFor: titleInputId, children: [entityLabel, " title"] }), _jsx("input", { ref: titleInputRef, id: titleInputId, "data-planning-editor-title": true, className: styles.input, disabled: isSubmitting, required: true, "aria-invalid": titleError ? 'true' : undefined, "aria-describedby": titleError ? titleErrorId : undefined, value: draftTitle, onChange: (event) => {
                             if (titleError)
                                 setTitleError(null);
                             onChangeDraftTitle(event.target.value);
@@ -889,7 +886,7 @@ function PlanningDrawerEditor({ editor, draftTitle, draftDescription, draftOwner
                             ? '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("span", { className: panelStyles.editorLabel, children: "Initiative" }), _jsxs("div", { className: panelStyles.editorRelationshipRow, children: [_jsx(PlanningLinkPicker, { options: initiativeLinkOptions, selectedId: draftInitiativeSummary?.id || '', entityLabel: "initiative", disabled: isSubmitting, onSelect: (option) => onChangeDraftInitiativeId(option.referenceLabel) }), draftInitiativeId.trim() ? (_jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", disabled: isSubmitting, onClick: () => onChangeDraftInitiativeId(''), children: "Remove" })) : null] })] })), !inline ? _jsxs("div", { className: panelStyles.editorField, children: [_jsxs("span", { className: panelStyles.editorLabel, children: [entityLabel, " owner"] }), _jsx(PlanningOwnerDropdown, { disabled: isSubmitting, value: draftOwner, onChange: onChangeDraftOwner, ariaLabel: `${entityLabel} owner`, options: assigneeOptions, className: panelStyles.editorSelect })] }) : null, !inline ? _jsxs("div", { className: panelStyles.editorActions, children: [_jsx("button", { type: "button", className: styles.secondaryHeaderBtn, onClick: onCancel, disabled: isSubmitting, children: "Cancel" }), _jsx("button", { type: "submit", className: styles.primaryUpdateBtn, disabled: isSubmitting, children: submitLabel })] }) : null] }));
 }
-export function PlanningDrawer({ open, leftOffset = 0, returnFocusRef, onWidthChange, initiatives, standaloneWorkstreams, planningLoadState, onRetryPlanning, taskScope, activeInitiativeId, activeWorkstreamId, navigatorSort, navigatorSortReady, onNavigatorSortChange, taskArrangeMode = 'execution', onTaskArrangeModeChange = () => { }, onReorderWorkstreamTasks, planningFavorites, onTogglePlanningFavorite, favoritesSectionCollapsed, initiativesSectionCollapsed, workstreamsSectionCollapsed, onToggleFavoritesSection, onToggleInitiativesSection, onToggleWorkstreamsSection, expandedInitiativeIds, detail, editor, secondaryEditor = null, secondaryPane, primaryHydrationState, secondaryHydrationState, onRetryPrimaryHydration, onRetrySecondaryHydration, currentWorkspaceId, currentOwnerId, theme, assigneeOptions, linkOptions, showTaskCardStatusLabel = false, draftInitiativeSummary, draftTitle, draftDescription, draftOwner, draftInitiativeId, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onCollapseTreePane, onExpandTreePane, onCollapsePrimaryPane, onExpandPrimaryPane, onCollapseSecondaryPane, onExpandSecondaryPane, onBackFromSecondary, treeCollapsed, primaryCollapsed, secondaryCollapsed, onCancelEditor, onCancelSecondaryEditor, onSubmitEditor, isSubmittingEditor, onCreateInitiative, onCreateWorkstream, onToggleInitiative, onSelectInitiative, onSelectWorkstream, onOpenInitiativeDetails, onOpenWorkstreamDetails, onOpenNestedWorkstreamDetails, onEditInitiative, onEditWorkstream, onChangePlanningOwner, onChangeTaskAssignee, onArchiveInitiative, onUnarchiveInitiative, onArchiveWorkstream, onUnarchiveWorkstream, onArchivePlanningTask, onArchiveResolvedWorkstream, onArchiveResolvedInitiative, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onAssignInitiativeToWorkstream, onOpenTaskById, onSetTaskStatus, taskReferences, onAssignTaskToWorkstream, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, onAddPlanningContextFile, onRemovePlanningContextFile, onUpdatePlanningContextCaption, }) {
+export function PlanningDrawer({ open, leftOffset = 0, returnFocusRef, onWidthChange, initiatives, standaloneWorkstreams, planningLoadState, onRetryPlanning, taskScope, activeInitiativeId, activeWorkstreamId, navigatorSort, navigatorSortReady, onNavigatorSortChange, taskArrangeMode = 'execution', onTaskArrangeModeChange = () => { }, onReorderWorkstreamTasks, planningFavorites, onTogglePlanningFavorite, favoritesSectionCollapsed, initiativesSectionCollapsed, workstreamsSectionCollapsed, onToggleFavoritesSection, onToggleInitiativesSection, onToggleWorkstreamsSection, expandedInitiativeIds, detail, editor, secondaryEditor = null, secondaryPane, primaryHydrationState, secondaryHydrationState, onRetryPrimaryHydration, onRetrySecondaryHydration, currentWorkspaceId, currentOwnerId, theme, assigneeOptions, linkOptions, showTaskCardStatusLabel = false, draftInitiativeSummary, draftTitle, draftDescription, draftOwner, draftInitiativeId, draftIcon = null, draftColor = null, onChangeDraftTitle, onChangeDraftDescription, onChangeDraftOwner, onChangeDraftInitiativeId, onChangeDraftIcon = () => { }, onChangeDraftColor = () => { }, onCollapseTreePane, onExpandTreePane, onCollapsePrimaryPane, onExpandPrimaryPane, onCollapseSecondaryPane, onExpandSecondaryPane, onBackFromSecondary, treeCollapsed, primaryCollapsed, secondaryCollapsed, onCancelEditor, onCancelSecondaryEditor, onSubmitEditor, isSubmittingEditor, onCreateInitiative, onCreateWorkstream, onToggleInitiative, onSelectInitiative, onSelectWorkstream, onOpenInitiativeDetails, onOpenWorkstreamDetails, onOpenNestedWorkstreamDetails, onEditInitiative, onEditWorkstream, onChangePlanningOwner, onChangePlanningIdentity = () => { }, onChangeTaskAssignee, onArchiveInitiative, onUnarchiveInitiative, onArchiveWorkstream, onUnarchiveWorkstream, onArchivePlanningTask, onArchiveResolvedWorkstream, onArchiveResolvedInitiative, onCreateTaskInWorkstream, onCreateWorkstreamInInitiative, onAssignInitiativeToWorkstream, onOpenTaskById, onSetTaskStatus, taskReferences, onAssignTaskToWorkstream, onAttachTaskToWorkstreamByReference, onAttachWorkstreamToInitiativeByReference, onAddPlanningContextFile, onRemovePlanningContextFile, onUpdatePlanningContextCaption, }) {
     const primaryInlineEditor = editor?.mode === 'edit'
         && detail
         && editor.entityType === detail.type
@@ -1088,7 +1085,7 @@ export function PlanningDrawer({ open, leftOffset = 0, returnFocusRef, onWidthCh
             pointerEvents: open ? 'auto' : 'none',
             transition: 'left 220ms cubic-bezier(0.4, 0, 0.2, 1)',
             willChange: 'left',
-        }, children: _jsxs("div", { className: panelStyles.drawerBody, children: [showTreePane && (effectiveTreeCollapsed ? (_jsx(CollapsedPane, { label: "Planning", onExpand: onExpandTreePane })) : (_jsxs("div", { ref: treePaneRef, "data-planning-pane": "tree", className: `${panelStyles.paneShell} ${styles.appScrollbar} tf-scrollbar ${panelStyles.treePane} ${hasPrimaryPane && !primaryCollapsed ? panelStyles.treePaneSplit : ''}`.trim(), style: paneWidthStyle(layoutMode === 'narrow' ? drawerWidth : PLANNING_DRAWER_TREE_WIDTH_PX), children: [_jsxs("div", { className: panelStyles.paneHeader, children: [_jsx("h2", { className: panelStyles.paneHeaderLabel, tabIndex: -1, "data-planning-pane-heading": true, children: "Planning" }), _jsxs("div", { className: panelStyles.headerActionGroup, children: [_jsx(ArchiveVisibilityToggle, { visible: showArchivedPlanning, disabled: taskScope === 'deleted' || archivedPlanningItemCount === 0, disabledLabel: taskScope === 'deleted' ? 'Archive visibility unavailable in Trash' : undefined, itemLabel: "planning items", onToggle: () => setShowArchivedPlanning((current) => !current) }), wideLayout ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapseTreePane, "aria-label": "Collapse Planning pane", title: "Collapse Planning pane", children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })) : null] })] }), _jsx("div", { className: panelStyles.paneContent, "aria-busy": planningLoadState.status === 'loading' || planningLoadState.isRefreshing, children: _jsx(PlanningDrawerList, { initiatives: initiatives, standaloneWorkstreams: standaloneWorkstreams, planningLoadState: planningLoadState, taskScope: taskScope, showArchivedPlanning: showArchivedPlanning, currentOwnerId: currentOwnerId, assigneeOptions: assigneeOptions, showTaskCardStatusLabel: showTaskCardStatusLabel, taskArrangeMode: taskArrangeMode, activeInitiativeId: activeInitiativeId, activeWorkstreamId: activeWorkstreamId, navigatorSort: navigatorSort, navigatorSortReady: navigatorSortReady, onNavigatorSortChange: onNavigatorSortChange, planningFavorites: planningFavorites, onTogglePlanningFavorite: onTogglePlanningFavorite, favoritesSectionCollapsed: favoritesSectionCollapsed, initiativesSectionCollapsed: initiativesSectionCollapsed, workstreamsSectionCollapsed: workstreamsSectionCollapsed, onToggleFavoritesSection: onToggleFavoritesSection, onToggleInitiativesSection: onToggleInitiativesSection, onToggleWorkstreamsSection: onToggleWorkstreamsSection, expandedInitiativeIds: expandedInitiativeIds, detail: detail, secondaryPane: secondaryPane, onCreateInitiative: onCreateInitiative, onCreateWorkstream: onCreateWorkstream, onToggleInitiative: onToggleInitiative, onSelectInitiative: onSelectInitiative, onSelectWorkstream: onSelectWorkstream, onOpenInitiativeDetails: onOpenInitiativeDetails, onOpenWorkstreamDetails: onOpenWorkstreamDetails, onOpenNestedWorkstreamDetails: onOpenNestedWorkstreamDetails, onOpenTaskById: onOpenTaskById, onSetTaskStatus: onSetTaskStatus, onChangePlanningOwner: onChangePlanningOwner, onChangeTaskAssignee: onChangeTaskAssignee, onArchivePlanningTask: onArchivePlanningTask, onArchiveResolvedWorkstream: onArchiveResolvedWorkstream, onArchiveResolvedInitiative: onArchiveResolvedInitiative, linkOptions: linkOptions, onAssignInitiativeToWorkstream: onAssignInitiativeToWorkstream, onRetryPlanning: onRetryPlanning }) })] }))), wideLayout && !primaryIsInitiative && (initiativeRelationshipExpanded ? (_jsx(RelationshipPane, { label: "Initiative", title: initiativeRelationship.title, description: initiativeRelationship.description, action: initiativeRelationship.action, onCollapse: () => setInitiativeRelationshipExpanded(false), paneRef: initiativeRelationshipPaneRef })) : (_jsx(CollapsedPane, { label: "Initiative", muted: !hasInitiativeRelationship, onExpand: () => setInitiativeRelationshipExpanded(true) }))), showPrimaryPane && (effectivePrimaryCollapsed ? (_jsx(CollapsedPane, { label: primaryEntityType === 'initiative' ? 'Initiative' : 'Workstream', onExpand: onExpandPrimaryPane })) : (_jsxs("div", { ref: primaryPaneRef, "data-planning-pane": "primary", className: `${panelStyles.paneShell} ${styles.appScrollbar} tf-scrollbar ${panelStyles.detailPane}`.trim(), style: paneWidthStyle(wideLayout ? PLANNING_DRAWER_DETAIL_WIDTH_PX : adaptiveDetailWidth), children: [_jsxs("div", { className: panelStyles.paneHeader, children: [layoutMode === 'narrow' ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: handleBackFromPrimary, "aria-label": "Back to Planning", title: "Back to Planning", children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })) : null, _jsx("h2", { className: panelStyles.paneHeaderLabel, tabIndex: -1, "data-planning-pane-heading": true, children: primaryPaneLabel }), _jsxs("div", { className: panelStyles.headerActionGroup, children: [primaryArchiveDetail ? (_jsx(ArchiveVisibilityToggle, { visible: archivedDetailVisibility[primaryArchiveDetail.type], disabled: countArchivedDetailChildren(primaryArchiveDetail) === 0, itemLabel: primaryArchiveDetail.type === 'initiative' ? 'workstreams' : 'tasks', onToggle: () => toggleArchivedDetailVisibility(primaryArchiveDetail.type) })) : null, wideLayout ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapsePrimaryPane, "aria-label": `Collapse ${primaryPaneLabel} pane`, title: `Collapse ${primaryPaneLabel} pane`, children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })) : null] })] }), _jsx("div", { className: panelStyles.paneContent, "aria-busy": primaryHydrationState?.status === 'loading', children: dedicatedPrimaryEditor ? (_jsx(PlanningDrawerEditor, { editor: dedicatedPrimaryEditor, draftTitle: draftTitle, draftDescription: draftDescription, draftOwner: draftOwner, draftInitiativeId: draftInitiativeId, assigneeOptions: assigneeOptions, initiativeLinkOptions: linkOptions.initiatives, draftInitiativeSummary: draftInitiativeSummary, onChangeDraftTitle: onChangeDraftTitle, onChangeDraftDescription: onChangeDraftDescription, onChangeDraftOwner: onChangeDraftOwner, onChangeDraftInitiativeId: onChangeDraftInitiativeId, onCancel: onCancelEditor, onSubmit: onSubmitEditor, isSubmitting: isSubmittingEditor })) : detail ? (_jsx(PlanningDrawerDetailView, { detail: detail, showArchivedChildren: archivedDetailVisibility[detail.type], inlineEditor: primaryInlineEditor ? {
+        }, children: _jsxs("div", { className: panelStyles.drawerBody, children: [showTreePane && (effectiveTreeCollapsed ? (_jsx(CollapsedPane, { label: "Planning", onExpand: onExpandTreePane })) : (_jsxs("div", { ref: treePaneRef, "data-planning-pane": "tree", className: `${panelStyles.paneShell} ${styles.appScrollbar} tf-scrollbar ${panelStyles.treePane} ${hasPrimaryPane && !primaryCollapsed ? panelStyles.treePaneSplit : ''}`.trim(), style: paneWidthStyle(layoutMode === 'narrow' ? drawerWidth : PLANNING_DRAWER_TREE_WIDTH_PX), children: [_jsxs("div", { className: panelStyles.paneHeader, children: [_jsx("h2", { className: panelStyles.paneHeaderLabel, tabIndex: -1, "data-planning-pane-heading": true, children: "Planning" }), _jsxs("div", { className: panelStyles.headerActionGroup, children: [_jsx(ArchiveVisibilityToggle, { visible: showArchivedPlanning, disabled: taskScope === 'deleted' || archivedPlanningItemCount === 0, disabledLabel: taskScope === 'deleted' ? 'Archive visibility unavailable in Trash' : undefined, itemLabel: "planning items", onToggle: () => setShowArchivedPlanning((current) => !current) }), wideLayout ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapseTreePane, "aria-label": "Collapse Planning pane", title: "Collapse Planning pane", children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })) : null] })] }), _jsx("div", { className: panelStyles.paneContent, "aria-busy": planningLoadState.status === 'loading' || planningLoadState.isRefreshing, children: _jsx(PlanningDrawerList, { initiatives: initiatives, standaloneWorkstreams: standaloneWorkstreams, planningLoadState: planningLoadState, taskScope: taskScope, showArchivedPlanning: showArchivedPlanning, currentOwnerId: currentOwnerId, assigneeOptions: assigneeOptions, showTaskCardStatusLabel: showTaskCardStatusLabel, taskArrangeMode: taskArrangeMode, activeInitiativeId: activeInitiativeId, activeWorkstreamId: activeWorkstreamId, navigatorSort: navigatorSort, navigatorSortReady: navigatorSortReady, onNavigatorSortChange: onNavigatorSortChange, planningFavorites: planningFavorites, onTogglePlanningFavorite: onTogglePlanningFavorite, favoritesSectionCollapsed: favoritesSectionCollapsed, initiativesSectionCollapsed: initiativesSectionCollapsed, workstreamsSectionCollapsed: workstreamsSectionCollapsed, onToggleFavoritesSection: onToggleFavoritesSection, onToggleInitiativesSection: onToggleInitiativesSection, onToggleWorkstreamsSection: onToggleWorkstreamsSection, expandedInitiativeIds: expandedInitiativeIds, detail: detail, secondaryPane: secondaryPane, onCreateInitiative: onCreateInitiative, onCreateWorkstream: onCreateWorkstream, onToggleInitiative: onToggleInitiative, onSelectInitiative: onSelectInitiative, onSelectWorkstream: onSelectWorkstream, onOpenInitiativeDetails: onOpenInitiativeDetails, onOpenWorkstreamDetails: onOpenWorkstreamDetails, onOpenNestedWorkstreamDetails: onOpenNestedWorkstreamDetails, onOpenTaskById: onOpenTaskById, onSetTaskStatus: onSetTaskStatus, onChangePlanningOwner: onChangePlanningOwner, onChangePlanningIdentity: onChangePlanningIdentity, onChangeTaskAssignee: onChangeTaskAssignee, onArchivePlanningTask: onArchivePlanningTask, onArchiveResolvedWorkstream: onArchiveResolvedWorkstream, onArchiveResolvedInitiative: onArchiveResolvedInitiative, linkOptions: linkOptions, onAssignInitiativeToWorkstream: onAssignInitiativeToWorkstream, onRetryPlanning: onRetryPlanning }) })] }))), wideLayout && !primaryIsInitiative && (initiativeRelationshipExpanded ? (_jsx(RelationshipPane, { label: "Initiative", title: initiativeRelationship.title, description: initiativeRelationship.description, action: initiativeRelationship.action, onCollapse: () => setInitiativeRelationshipExpanded(false), paneRef: initiativeRelationshipPaneRef })) : (_jsx(CollapsedPane, { label: "Initiative", muted: !hasInitiativeRelationship, onExpand: () => setInitiativeRelationshipExpanded(true) }))), showPrimaryPane && (effectivePrimaryCollapsed ? (_jsx(CollapsedPane, { label: primaryEntityType === 'initiative' ? 'Initiative' : 'Workstream', onExpand: onExpandPrimaryPane })) : (_jsxs("div", { ref: primaryPaneRef, "data-planning-pane": "primary", className: `${panelStyles.paneShell} ${styles.appScrollbar} tf-scrollbar ${panelStyles.detailPane}`.trim(), style: paneWidthStyle(wideLayout ? PLANNING_DRAWER_DETAIL_WIDTH_PX : adaptiveDetailWidth), children: [_jsxs("div", { className: panelStyles.paneHeader, children: [layoutMode === 'narrow' ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: handleBackFromPrimary, "aria-label": "Back to Planning", title: "Back to Planning", children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })) : null, _jsx("h2", { className: panelStyles.paneHeaderLabel, tabIndex: -1, "data-planning-pane-heading": true, children: primaryPaneLabel }), _jsxs("div", { className: panelStyles.headerActionGroup, children: [primaryArchiveDetail ? (_jsx(ArchiveVisibilityToggle, { visible: archivedDetailVisibility[primaryArchiveDetail.type], disabled: countArchivedDetailChildren(primaryArchiveDetail) === 0, itemLabel: primaryArchiveDetail.type === 'initiative' ? 'workstreams' : 'tasks', onToggle: () => toggleArchivedDetailVisibility(primaryArchiveDetail.type) })) : null, wideLayout ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapsePrimaryPane, "aria-label": `Collapse ${primaryPaneLabel} pane`, title: `Collapse ${primaryPaneLabel} pane`, children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })) : null] })] }), _jsx("div", { className: panelStyles.paneContent, "aria-busy": primaryHydrationState?.status === 'loading', children: dedicatedPrimaryEditor ? (_jsx(PlanningDrawerEditor, { editor: dedicatedPrimaryEditor, draftTitle: draftTitle, draftDescription: draftDescription, draftOwner: draftOwner, draftInitiativeId: draftInitiativeId, draftIcon: draftIcon, draftColor: draftColor, assigneeOptions: assigneeOptions, initiativeLinkOptions: linkOptions.initiatives, draftInitiativeSummary: draftInitiativeSummary, onChangeDraftTitle: onChangeDraftTitle, onChangeDraftDescription: onChangeDraftDescription, onChangeDraftOwner: onChangeDraftOwner, onChangeDraftInitiativeId: onChangeDraftInitiativeId, onChangeDraftIcon: onChangeDraftIcon, onChangeDraftColor: onChangeDraftColor, onCancel: onCancelEditor, onSubmit: onSubmitEditor, isSubmitting: isSubmittingEditor })) : detail ? (_jsx(PlanningDrawerDetailView, { detail: detail, showArchivedChildren: archivedDetailVisibility[detail.type], inlineEditor: primaryInlineEditor ? {
                                     editor: primaryInlineEditor,
                                     draftTitle,
                                     draftDescription,
@@ -1108,13 +1105,13 @@ export function PlanningDrawer({ open, leftOffset = 0, returnFocusRef, onWidthCh
                                     ? onArchiveResolvedInitiative
                                     : onArchiveResolvedWorkstream, onOpenNestedWorkstreamDetails: detail.type === 'initiative' ? onOpenNestedWorkstreamDetails : undefined, onCreateTaskInWorkstream: detail.type === 'workstream' ? onCreateTaskInWorkstream : undefined, onCreateWorkstreamInInitiative: detail.type === 'initiative' ? onCreateWorkstreamInInitiative : undefined, onOpenTaskById: detail.type === 'workstream' ? onOpenTaskById : undefined, onChangeTaskAssignee: detail.type === 'workstream' ? onChangeTaskAssignee : undefined, taskReferences: taskReferences, onAssignTaskToWorkstream: detail.type === 'workstream' ? onAssignTaskToWorkstream : undefined, onAssignInitiativeToWorkstream: onAssignInitiativeToWorkstream, onAttachTaskToWorkstreamByReference: detail.type === 'workstream' ? onAttachTaskToWorkstreamByReference : undefined, onAttachWorkstreamToInitiativeByReference: detail.type === 'initiative' ? onAttachWorkstreamToInitiativeByReference : undefined, parentInitiative: detail.type === 'workstream' ? resolveParentInitiative(detail.item) : null, onEdit: () => detail.type === 'initiative'
                                     ? onEditInitiative(detail.item.id)
-                                    : onEditWorkstream(detail.item.id), onChangeOwner: (ownerId) => onChangePlanningOwner(detail.type, detail.item.id, ownerId), onChangePlanningOwner: onChangePlanningOwner, onArchive: () => detail.type === 'initiative'
+                                    : onEditWorkstream(detail.item.id), onChangeOwner: (ownerId) => onChangePlanningOwner(detail.type, detail.item.id, ownerId), onChangePlanningOwner: onChangePlanningOwner, onChangePlanningIdentity: onChangePlanningIdentity, onArchive: () => detail.type === 'initiative'
                                     ? onArchiveInitiative(detail.item.id)
                                     : onArchiveWorkstream(detail.item.id), onUnarchive: () => detail.type === 'initiative'
                                     ? onUnarchiveInitiative(detail.item.id)
                                     : onUnarchiveWorkstream(detail.item.id), onAddPlanningContextFile: onAddPlanningContextFile, onRemovePlanningContextFile: onRemovePlanningContextFile, onUpdatePlanningContextCaption: onUpdatePlanningContextCaption })) : null })] }))), wideLayout && !primaryIsWorkstream && !hasSecondaryPane && (workstreamRelationshipExpanded ? (_jsx(RelationshipPane, { label: "Workstream", title: workstreamRelationship.title, description: workstreamRelationship.description, action: workstreamRelationship.action, onCollapse: () => setWorkstreamRelationshipExpanded(false), paneRef: workstreamRelationshipPaneRef })) : (_jsx(CollapsedPane, { label: "Workstream", muted: true, onExpand: () => setWorkstreamRelationshipExpanded(true) }))), showSecondaryPane && (effectiveSecondaryCollapsed ? (_jsx(CollapsedPane, { label: "Workstream", onExpand: onExpandSecondaryPane })) : (_jsxs("div", { ref: secondaryPaneRef, "data-planning-pane": "secondary", className: `${panelStyles.paneShell} ${styles.appScrollbar} tf-scrollbar ${panelStyles.detailPane}`.trim(), style: paneWidthStyle(wideLayout ? PLANNING_DRAWER_DETAIL_WIDTH_PX : adaptiveDetailWidth), children: [_jsxs("div", { className: panelStyles.paneHeader, children: [!wideLayout ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: secondaryInlineEditor
                                         ? (onCancelSecondaryEditor || onBackFromSecondary)
-                                        : onBackFromSecondary, "aria-label": secondaryInlineEditor ? 'Cancel workstream editing' : `Back to ${primaryPaneLabel}`, title: secondaryInlineEditor ? 'Cancel workstream editing' : `Back to ${primaryPaneLabel}`, children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })) : null, _jsx("h2", { className: panelStyles.paneHeaderLabel, tabIndex: -1, "data-planning-pane-heading": true, children: secondaryPaneLabel }), _jsxs("div", { className: panelStyles.headerActionGroup, children: [secondaryArchiveDetail ? (_jsx(ArchiveVisibilityToggle, { visible: archivedDetailVisibility.workstream, disabled: countArchivedDetailChildren(secondaryArchiveDetail) === 0, itemLabel: "tasks", onToggle: () => toggleArchivedDetailVisibility('workstream') })) : null, wideLayout ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapseSecondaryPane, "aria-label": `Collapse ${secondaryPaneLabel} pane`, title: `Collapse ${secondaryPaneLabel} pane`, children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })) : null] })] }), _jsx("div", { className: panelStyles.paneContent, "aria-busy": secondaryHydrationState?.status === 'loading', children: secondaryPane?.kind === 'editor' ? (_jsx(PlanningDrawerEditor, { editor: secondaryPane.editor, draftTitle: draftTitle, draftDescription: draftDescription, draftOwner: draftOwner, draftInitiativeId: draftInitiativeId, assigneeOptions: assigneeOptions, initiativeLinkOptions: linkOptions.initiatives, draftInitiativeSummary: draftInitiativeSummary, onChangeDraftTitle: onChangeDraftTitle, onChangeDraftDescription: onChangeDraftDescription, onChangeDraftOwner: onChangeDraftOwner, onChangeDraftInitiativeId: onChangeDraftInitiativeId, onCancel: onBackFromSecondary, onSubmit: onSubmitEditor, isSubmitting: isSubmittingEditor })) : secondaryPane ? (_jsx(PlanningDrawerDetailView, { detail: secondaryPane.detail, showArchivedChildren: archivedDetailVisibility.workstream, inlineEditor: secondaryInlineEditor ? {
+                                        : onBackFromSecondary, "aria-label": secondaryInlineEditor ? 'Cancel workstream editing' : `Back to ${primaryPaneLabel}`, title: secondaryInlineEditor ? 'Cancel workstream editing' : `Back to ${primaryPaneLabel}`, children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })) : null, _jsx("h2", { className: panelStyles.paneHeaderLabel, tabIndex: -1, "data-planning-pane-heading": true, children: secondaryPaneLabel }), _jsxs("div", { className: panelStyles.headerActionGroup, children: [secondaryArchiveDetail ? (_jsx(ArchiveVisibilityToggle, { visible: archivedDetailVisibility.workstream, disabled: countArchivedDetailChildren(secondaryArchiveDetail) === 0, itemLabel: "tasks", onToggle: () => toggleArchivedDetailVisibility('workstream') })) : null, wideLayout ? (_jsx("button", { type: "button", className: "tf-control-icon", onClick: onCollapseSecondaryPane, "aria-label": `Collapse ${secondaryPaneLabel} pane`, title: `Collapse ${secondaryPaneLabel} pane`, children: _jsx(ChevronLeft, { size: 16, "aria-hidden": "true" }) })) : null] })] }), _jsx("div", { className: panelStyles.paneContent, "aria-busy": secondaryHydrationState?.status === 'loading', children: secondaryPane?.kind === 'editor' ? (_jsx(PlanningDrawerEditor, { editor: secondaryPane.editor, draftTitle: draftTitle, draftDescription: draftDescription, draftOwner: draftOwner, draftInitiativeId: draftInitiativeId, draftIcon: draftIcon, draftColor: draftColor, assigneeOptions: assigneeOptions, initiativeLinkOptions: linkOptions.initiatives, draftInitiativeSummary: draftInitiativeSummary, onChangeDraftTitle: onChangeDraftTitle, onChangeDraftDescription: onChangeDraftDescription, onChangeDraftOwner: onChangeDraftOwner, onChangeDraftInitiativeId: onChangeDraftInitiativeId, onChangeDraftIcon: onChangeDraftIcon, onChangeDraftColor: onChangeDraftColor, onCancel: onBackFromSecondary, onSubmit: onSubmitEditor, isSubmitting: isSubmittingEditor })) : secondaryPane ? (_jsx(PlanningDrawerDetailView, { detail: secondaryPane.detail, showArchivedChildren: archivedDetailVisibility.workstream, inlineEditor: secondaryInlineEditor ? {
                                     editor: secondaryInlineEditor,
                                     draftTitle,
                                     draftDescription,
@@ -1128,5 +1125,5 @@ export function PlanningDrawer({ open, leftOffset = 0, returnFocusRef, onWidthCh
                                     onCancel: onCancelSecondaryEditor || onBackFromSecondary,
                                     onSubmit: onSubmitEditor,
                                     isSubmitting: isSubmittingEditor,
-                                } : null, currentWorkspaceId: currentWorkspaceId, currentActorId: currentOwnerId, theme: theme, assigneeOptions: assigneeOptions, linkOptions: linkOptions, showTaskCardStatusLabel: showTaskCardStatusLabel, taskArrangeMode: taskArrangeMode, onTaskArrangeModeChange: onTaskArrangeModeChange, onReorderWorkstreamTasks: onReorderWorkstreamTasks, hydrationState: secondaryHydrationState, onRetryHydration: onRetrySecondaryHydration, onSetTaskStatus: onSetTaskStatus, onArchivePlanningTask: onArchivePlanningTask, onArchiveResolvedEntity: onArchiveResolvedWorkstream, onCreateTaskInWorkstream: onCreateTaskInWorkstream, onOpenTaskById: onOpenTaskById, onChangeTaskAssignee: onChangeTaskAssignee, taskReferences: taskReferences, onAssignTaskToWorkstream: onAssignTaskToWorkstream, onAssignInitiativeToWorkstream: onAssignInitiativeToWorkstream, onAttachTaskToWorkstreamByReference: onAttachTaskToWorkstreamByReference, parentInitiative: resolveParentInitiative(secondaryPane.detail.item), onEdit: () => onEditWorkstream(secondaryPane.detail.item.id), onChangeOwner: (ownerId) => onChangePlanningOwner('workstream', secondaryPane.detail.item.id, ownerId), onChangePlanningOwner: onChangePlanningOwner, onArchive: () => onArchiveWorkstream(secondaryPane.detail.item.id), onUnarchive: () => onUnarchiveWorkstream(secondaryPane.detail.item.id), onAddPlanningContextFile: onAddPlanningContextFile, onRemovePlanningContextFile: onRemovePlanningContextFile, onUpdatePlanningContextCaption: onUpdatePlanningContextCaption })) : null })] })))] }) }));
+                                } : null, currentWorkspaceId: currentWorkspaceId, currentActorId: currentOwnerId, theme: theme, assigneeOptions: assigneeOptions, linkOptions: linkOptions, showTaskCardStatusLabel: showTaskCardStatusLabel, taskArrangeMode: taskArrangeMode, onTaskArrangeModeChange: onTaskArrangeModeChange, onReorderWorkstreamTasks: onReorderWorkstreamTasks, hydrationState: secondaryHydrationState, onRetryHydration: onRetrySecondaryHydration, onSetTaskStatus: onSetTaskStatus, onArchivePlanningTask: onArchivePlanningTask, onArchiveResolvedEntity: onArchiveResolvedWorkstream, onCreateTaskInWorkstream: onCreateTaskInWorkstream, onOpenTaskById: onOpenTaskById, onChangeTaskAssignee: onChangeTaskAssignee, taskReferences: taskReferences, onAssignTaskToWorkstream: onAssignTaskToWorkstream, onAssignInitiativeToWorkstream: onAssignInitiativeToWorkstream, onAttachTaskToWorkstreamByReference: onAttachTaskToWorkstreamByReference, parentInitiative: resolveParentInitiative(secondaryPane.detail.item), onEdit: () => onEditWorkstream(secondaryPane.detail.item.id), onChangeOwner: (ownerId) => onChangePlanningOwner('workstream', secondaryPane.detail.item.id, ownerId), onChangePlanningOwner: onChangePlanningOwner, onChangePlanningIdentity: onChangePlanningIdentity, onArchive: () => onArchiveWorkstream(secondaryPane.detail.item.id), onUnarchive: () => onUnarchiveWorkstream(secondaryPane.detail.item.id), onAddPlanningContextFile: onAddPlanningContextFile, onRemovePlanningContextFile: onRemovePlanningContextFile, onUpdatePlanningContextCaption: onUpdatePlanningContextCaption })) : null })] })))] }) }));
 }

package/dist/components/views/standalone/modals/AccountSettingsModal.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { CreditCard, KeyRound, Link2, RefreshCw, ShieldCheck, User } from 'lucide-react';
 import { Modal } from '../../../ui/Modal';
 import { EditableAvatarButton } from '../../../ui/EditableAvatarButton';
@@ -9,6 +9,7 @@ import styles from '../../../../Taskforce.module.css';
 import settingsStyles from './AccountSettingsModal.module.css';
 import { resolveCommercialLifecyclePresentation } from '../../../../utils/commercialLifecyclePresentation';
 import { getPasswordPolicyGuidance, validatePasswordPolicy } from '../../../../shared/passwordPolicy';
+import { PasswordInput } from '../../../ui/PasswordInput';
 const PROVIDER_LABELS = {
     password: 'Email & Password',
     google: 'Google',
@@ -53,11 +54,7 @@ export function AccountSettingsModal({ isOpen, theme, displayName, email, avatar
     const linkedProviders = new Set(loginMethods.map((method) => method.provider));
     const hasPassword = linkedProviders.has('password');
     const linkableProviders = availableAuthProviders.filter((provider) => provider !== 'password' && !linkedProviders.has(provider));
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        setActiveSection('profile');
-        setUnlinkError(null);
+    const clearCredentialState = useCallback(() => {
         setShowAddPassword(false);
         setAddPasswordValue('');
         setAddPasswordError(null);
@@ -68,16 +65,28 @@ export function AccountSettingsModal({ isOpen, theme, displayName, email, avatar
         setConfirmPasswordValue('');
         setChangePasswordError(null);
         setChangePasswordDone(false);
-    }, [isOpen]);
+    }, []);
+    const handleClose = () => {
+        clearCredentialState();
+        onClose();
+    };
+    const handleSectionChange = (section) => {
+        if (section !== 'security')
+            clearCredentialState();
+        setActiveSection(section);
+    };
+    useEffect(() => {
+        setUnlinkError(null);
+        clearCredentialState();
+        if (!isOpen)
+            return;
+        setActiveSection('profile');
+    }, [clearCredentialState, isOpen]);
     useEffect(() => {
         if (activeSection === 'security')
             return;
-        setShowChangePassword(false);
-        setCurrentPasswordValue('');
-        setNewPasswordValue('');
-        setConfirmPasswordValue('');
-        setChangePasswordError(null);
-    }, [activeSection]);
+        clearCredentialState();
+    }, [activeSection, clearCredentialState]);
     useEffect(() => {
         if (!isOpen || activeSection !== 'security' || !cloudAuthEnabled)
             return;
@@ -173,7 +182,7 @@ export function AccountSettingsModal({ isOpen, theme, displayName, email, avatar
                                 setShowChangePassword(true);
                                 setChangePasswordDone(false);
                                 setChangePasswordError(null);
-                            }, children: "Change password" }) })), showChangePassword && (_jsxs("div", { className: settingsStyles.addPasswordForm, children: [_jsxs("label", { className: settingsStyles.fieldLabel, children: [_jsx("span", { children: "Current password" }), _jsx("input", { type: "password", className: styles.input, value: currentPasswordValue, onChange: (event) => setCurrentPasswordValue(event.target.value), disabled: changePasswordBusy, autoComplete: "current-password" })] }), _jsxs("label", { className: settingsStyles.fieldLabel, children: [_jsx("span", { children: "New password" }), _jsx("input", { type: "password", className: styles.input, value: newPasswordValue, onChange: (event) => setNewPasswordValue(event.target.value), disabled: changePasswordBusy, autoComplete: "new-password" })] }), _jsxs("label", { className: settingsStyles.fieldLabel, children: [_jsx("span", { children: "Confirm new password" }), _jsx("input", { type: "password", className: styles.input, value: confirmPasswordValue, onChange: (event) => setConfirmPasswordValue(event.target.value), disabled: changePasswordBusy, autoComplete: "new-password" })] }), _jsx("p", { className: "tf-text-helper", children: addPasswordGuidance.join(' ') }), changePasswordError && _jsx("p", { className: "tf-text-error", role: "alert", children: changePasswordError }), _jsxs("div", { className: settingsStyles.inlineActions, children: [_jsx("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: () => {
+                            }, children: "Change password" }) })), showChangePassword && (_jsxs("div", { className: settingsStyles.addPasswordForm, children: [_jsxs("div", { className: settingsStyles.fieldLabel, children: [_jsx("label", { htmlFor: "account-current-password", children: "Current password" }), _jsx(PasswordInput, { id: "account-current-password", className: styles.input, value: currentPasswordValue, onChange: (event) => setCurrentPasswordValue(event.target.value), disabled: changePasswordBusy, autoComplete: "current-password", visibilityLabel: "current password" })] }), _jsxs("div", { className: settingsStyles.fieldLabel, children: [_jsx("label", { htmlFor: "account-new-password", children: "New password" }), _jsx(PasswordInput, { id: "account-new-password", className: styles.input, value: newPasswordValue, onChange: (event) => setNewPasswordValue(event.target.value), disabled: changePasswordBusy, autoComplete: "new-password", visibilityLabel: "new password" })] }), _jsxs("div", { className: settingsStyles.fieldLabel, children: [_jsx("label", { htmlFor: "account-confirm-password", children: "Confirm new password" }), _jsx(PasswordInput, { id: "account-confirm-password", className: styles.input, value: confirmPasswordValue, onChange: (event) => setConfirmPasswordValue(event.target.value), disabled: changePasswordBusy, autoComplete: "new-password", visibilityLabel: "confirm new password" })] }), _jsx("p", { className: "tf-text-helper", children: addPasswordGuidance.join(' ') }), changePasswordError && _jsx("p", { className: "tf-text-error", role: "alert", children: changePasswordError }), _jsxs("div", { className: settingsStyles.inlineActions, children: [_jsx("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: () => {
                                             setShowChangePassword(false);
                                             setCurrentPasswordValue('');
                                             setNewPasswordValue('');
@@ -183,15 +192,15 @@ export function AccountSettingsModal({ isOpen, theme, displayName, email, avatar
                                 setShowAddPassword(true);
                                 setAddPasswordDone(false);
                                 setAddPasswordError(null);
-                            }, children: "Add password login" }) })), showAddPassword && (_jsxs("div", { className: settingsStyles.addPasswordForm, children: [_jsxs("label", { className: settingsStyles.fieldLabel, children: [_jsx("span", { children: "New password" }), _jsx("input", { type: "password", className: styles.input, placeholder: "Use 12+ characters", value: addPasswordValue, onChange: (event) => setAddPasswordValue(event.target.value), disabled: addPasswordBusy, autoComplete: "new-password" })] }), _jsx("p", { className: "tf-text-helper", children: addPasswordGuidance.join(' ') }), addPasswordError && _jsx("p", { className: "tf-text-error", role: "alert", children: addPasswordError }), _jsxs("div", { className: settingsStyles.inlineActions, children: [_jsx("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: () => {
+                            }, children: "Add password login" }) })), showAddPassword && (_jsxs("div", { className: settingsStyles.addPasswordForm, children: [_jsxs("div", { className: settingsStyles.fieldLabel, children: [_jsx("label", { htmlFor: "account-add-password", children: "New password" }), _jsx(PasswordInput, { id: "account-add-password", className: styles.input, placeholder: "Use 12+ characters", value: addPasswordValue, onChange: (event) => setAddPasswordValue(event.target.value), disabled: addPasswordBusy, autoComplete: "new-password", visibilityLabel: "new password" })] }), _jsx("p", { className: "tf-text-helper", children: addPasswordGuidance.join(' ') }), addPasswordError && _jsx("p", { className: "tf-text-error", role: "alert", children: addPasswordError }), _jsxs("div", { className: settingsStyles.inlineActions, children: [_jsx("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: () => {
                                             setShowAddPassword(false);
                                             setAddPasswordValue('');
                                             setAddPasswordError(null);
                                         }, disabled: addPasswordBusy, children: "Cancel" }), _jsx("button", { type: "button", className: "tf-button-primary tf-button-compact", onClick: () => { void handleAddPassword(); }, disabled: addPasswordBusy || !addPasswordValue, children: addPasswordBusy ? 'Saving…' : 'Save password' })] })] })), !loginMethodsLoading && !loginMethodsError && linkableProviders.length > 0 && (_jsxs("div", { className: settingsStyles.linkProviderBlock, children: [_jsx("p", { className: "tf-label-micro", children: "Link another account" }), _jsx("div", { className: settingsStyles.inlineActions, children: linkableProviders.map((provider) => (_jsxs("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: () => onLinkProvider(provider), children: [_jsx(Link2, { size: 15 }), PROVIDER_LABELS[provider] || provider] }, provider))) })] }))] })] }));
     const renderBillingSection = () => (_jsxs("section", { className: settingsStyles.section, "aria-labelledby": "account-billing-heading", children: [_jsxs("div", { className: settingsStyles.sectionHeader, children: [_jsxs("div", { children: [_jsx("h2", { className: "tf-heading-card", id: "account-billing-heading", children: "Plan & Billing" }), _jsx("p", { className: "tf-text-secondary", children: "Review your plan and open the secure billing portal." })] }), _jsxs("button", { type: "button", className: "tf-button-ghost tf-button-compact", onClick: onRefreshBilling, disabled: billingActionBusy || billingLoading, children: [_jsx(RefreshCw, { size: 14 }), "Refresh"] })] }), _jsxs("div", { className: `${settingsStyles.sectionCard} tf-surface-panel`, children: [billingLoading && _jsx("p", { className: "tf-text-secondary", children: "Loading billing status\u2026" }), billingError && _jsx("p", { className: "tf-text-error", role: "alert", children: billingError }), billingActionError && _jsx("p", { className: "tf-text-error", role: "alert", children: billingActionError }), billingNotice && _jsx("p", { className: "tf-text-secondary", role: "status", children: billingNotice }), _jsxs("div", { className: settingsStyles.planSummary, children: [_jsxs("div", { children: [_jsx("p", { className: "tf-label-micro", children: "Current plan" }), _jsx("strong", { className: settingsStyles.planName, children: resolvedPlanLabel })] }), _jsx("span", { className: `tf-chip ${lifecyclePresentation.isActive ? 'tf-chip-success' : 'tf-chip-neutral'}`, children: formatStatusLabel(accountProfileSummary?.entitlementState) })] }), lifecyclePresentation.message && (_jsx("p", { className: lifecyclePresentation.statusTone === 'error' ? 'tf-text-error' : 'tf-text-secondary', children: lifecyclePresentation.message })), accountProfileSummary?.stripeSubscriptionId && (_jsxs("div", { className: settingsStyles.intervalRow, children: [_jsxs("label", { className: settingsStyles.fieldLabel, children: [_jsx("span", { children: "Billing interval" }), _jsxs("select", { className: styles.input, value: billingIntervalChoice, onChange: (event) => onBillingIntervalChange(event.target.value === 'year' ? 'year' : 'month'), disabled: billingActionBusy, children: [_jsx("option", { value: "month", children: "Monthly" }), _jsx("option", { value: "year", children: "Yearly" })] })] }), _jsx("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: onUpdateInterval, disabled: billingActionBusy, children: "Update interval" })] })), _jsxs("div", { className: settingsStyles.sectionActions, children: [(lifecyclePresentation.primaryAction === 'manage_billing' || lifecyclePresentation.primaryAction === 'none') && (_jsx("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: onOpenPlans, disabled: billingActionBusy, children: "View plans" })), lifecyclePresentation.showManageBilling && lifecyclePresentation.primaryAction !== 'manage_billing' && (_jsx("button", { type: "button", className: "tf-button-secondary tf-button-compact", onClick: onManageBilling, disabled: billingActionBusy, children: "Manage billing" })), lifecyclePresentation.primaryLabel && (_jsx("button", { type: "button", className: "tf-button-primary tf-button-compact", onClick: handlePrimaryBillingAction, disabled: billingActionBusy, children: billingActionBusy ? 'Working…' : lifecyclePresentation.primaryLabel }))] })] })] }));
-    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Account Settings", size: "mdWide", theme: theme, draggable: true, children: _jsx("div", { className: `${modalStyles.form} ${settingsStyles.modalBody}`, children: _jsxs("div", { className: settingsStyles.layout, children: [_jsx("div", { className: settingsStyles.sectionTabs, role: "tablist", "aria-label": "Account settings sections", "aria-orientation": "vertical", children: SECTION_META.map((section) => {
+    return (_jsx(Modal, { isOpen: isOpen, onClose: handleClose, title: "Account Settings", size: "mdWide", theme: theme, draggable: true, children: _jsx("div", { className: `${modalStyles.form} ${settingsStyles.modalBody}`, children: _jsxs("div", { className: settingsStyles.layout, children: [_jsx("div", { className: settingsStyles.sectionTabs, role: "tablist", "aria-label": "Account settings sections", "aria-orientation": "vertical", children: SECTION_META.map((section) => {
                             const Icon = section.icon;
                             const selected = section.id === activeSection;
-                            return (_jsxs("button", { type: "button", role: "tab", id: `account-settings-tab-${section.id}`, "aria-controls": `account-settings-panel-${section.id}`, "aria-selected": selected, className: settingsStyles.sectionTab, onClick: () => setActiveSection(section.id), children: [_jsx(Icon, { size: 16 }), _jsx("span", { children: section.label })] }, section.id));
+                            return (_jsxs("button", { type: "button", role: "tab", id: `account-settings-tab-${section.id}`, "aria-controls": `account-settings-panel-${section.id}`, "aria-selected": selected, className: settingsStyles.sectionTab, onClick: () => handleSectionChange(section.id), children: [_jsx(Icon, { size: 16 }), _jsx("span", { children: section.label })] }, section.id));
                         }) }), _jsxs("div", { className: settingsStyles.sectionPanel, role: "tabpanel", id: `account-settings-panel-${activeSection}`, "aria-labelledby": `account-settings-tab-${activeSection}`, children: [activeSection === 'profile' && renderProfileSection(), activeSection === 'security' && renderSecuritySection(), activeSection === 'billing' && renderBillingSection()] })] }) }) }));
 }