@taskforcehq/taskforce 0.3.326 → 0.3.328

package/dist/components/ui/MultiSelectFilter.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
-import { ChevronDown } from 'lucide-react';
+import { ChevronDown, Search } from 'lucide-react';
 import styles from '../../Taskforce.module.css';
 // Helper to correctly pluralize filter labels (e.g., Category -> Categories)
 function pluralize(label) {
@@ -15,9 +15,15 @@ function pluralize(label) {
     // Default: just add 's'
     return `${label}s`;
 }
-export function MultiSelectFilter({ label, options, selected, onChange, variant = 'label', containerStyle, }) {
+export function MultiSelectFilter({ label, options, selected, onChange, variant = 'label', containerStyle, renderOptionContent, searchable = false, searchPlaceholder = 'Search options...', noResultsText = 'No matching options.', }) {
     const [isOpen, setIsOpen] = useState(false);
+    const [searchQuery, setSearchQuery] = useState('');
     const containerRef = useRef(null);
+    const buttonRef = useRef(null);
+    const searchInputRef = useRef(null);
+    const visibleOptions = searchable && searchQuery.trim()
+        ? options.filter((option) => option.label.toLocaleLowerCase().includes(searchQuery.trim().toLocaleLowerCase()))
+        : options;
     useEffect(() => {
         const handleClickOutside = (event) => {
             if (containerRef.current && !containerRef.current.contains(event.target)) {
@@ -27,6 +33,11 @@ export function MultiSelectFilter({ label, options, selected, onChange, variant
         document.addEventListener('mousedown', handleClickOutside);
         return () => document.removeEventListener('mousedown', handleClickOutside);
     }, []);
+    useEffect(() => {
+        if (isOpen && searchable) {
+            searchInputRef.current?.focus();
+        }
+    }, [isOpen, searchable]);
     const toggleOption = (value) => {
         if (selected.includes(value)) {
             onChange(selected.filter(v => v !== value));
@@ -63,9 +74,19 @@ export function MultiSelectFilter({ label, options, selected, onChange, variant
             : visibleSelectedCount === 1
                 ? `1 ${label}`
                 : `${visibleSelectedCount} ${plural}`;
-    return (_jsxs("div", { className: styles.filterContainer, ref: containerRef, style: containerStyle, children: [_jsxs("button", { className: `${styles.filterButton} ${!isAllSelected ? styles.filterActive : ''}`, onClick: () => setIsOpen(!isOpen), title: `Filter by ${label}`, children: [_jsx("span", { children: displayText }), _jsx(ChevronDown, { size: 14, style: { transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s', opacity: 0.5 } })] }), isOpen && (_jsxs("div", { className: `${styles.filterDropdown} ${styles.appScrollbar} tf-scrollbar`, children: [_jsxs("div", { className: styles.filterOption, onClick: toggleAll, children: [_jsx("input", { type: "checkbox", checked: isAllSelected, onChange: () => { } }), _jsx("span", { style: { fontWeight: 600 }, children: "Toggle All" })] }), _jsx("div", { className: styles.filterDivider }), options.map(opt => {
+    const toggleOpen = () => {
+        setSearchQuery('');
+        setIsOpen((open) => !open);
+    };
+    return (_jsxs("div", { className: styles.filterContainer, ref: containerRef, style: containerStyle, children: [_jsxs("button", { ref: buttonRef, type: "button", className: `${styles.filterButton} ${!isAllSelected ? styles.filterActive : ''}`, onClick: toggleOpen, title: `Filter by ${label}`, "aria-expanded": isOpen, children: [_jsx("span", { children: displayText }), _jsx(ChevronDown, { size: 14, style: { transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s', opacity: 0.5 } })] }), isOpen && (_jsxs("div", { className: `${styles.filterDropdown} ${styles.appScrollbar} tf-scrollbar`, onKeyDown: (event) => {
+                    if (event.key === 'Escape') {
+                        event.preventDefault();
+                        setIsOpen(false);
+                        buttonRef.current?.focus();
+                    }
+                }, children: [searchable ? (_jsxs("div", { className: styles.filterSearch, children: [_jsx(Search, { size: 14, className: styles.filterSearchIcon, "aria-hidden": "true" }), _jsx("input", { ref: searchInputRef, type: "search", role: "searchbox", className: `tf-field-shell ${styles.filterSearchInput}`, value: searchQuery, placeholder: searchPlaceholder, "aria-label": searchPlaceholder, onChange: (event) => setSearchQuery(event.target.value) })] })) : null, _jsxs("label", { className: styles.filterOption, children: [_jsx("input", { type: "checkbox", checked: isAllSelected, onChange: toggleAll }), _jsx("span", { style: { fontWeight: 600 }, children: "Toggle All" })] }), _jsx("div", { className: styles.filterDivider }), visibleOptions.map(opt => {
                         const val = variant === 'label' ? opt.label : opt.value;
                         const isChecked = selected.includes(val);
-                        return (_jsxs("div", { className: styles.filterOption, onClick: () => toggleOption(val), children: [_jsx("input", { type: "checkbox", checked: isChecked, onChange: () => { } }), _jsx("span", { children: opt.label })] }, opt.value));
-                    })] }))] }));
+                        return (_jsxs("label", { className: styles.filterOption, children: [_jsx("input", { type: "checkbox", checked: isChecked, onChange: () => toggleOption(val) }), renderOptionContent ? renderOptionContent(opt) : _jsx("span", { children: opt.label })] }, opt.value));
+                    }), visibleOptions.length === 0 ? (_jsx("div", { className: styles.filterEmpty, role: "status", children: noResultsText })) : null] }))] }));
 }

package/dist/components/ui/ReferenceBadgeButton.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Check, Copy } from 'lucide-react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import styles from '../../Taskforce.module.css';
 export function ReferenceBadgeButton({ label, title, ariaLabel, copied = false, disabled = false, className = '', onClick, children, }) {
-    return (_jsxs("button", { type: "button", className: `${styles.taskIdBadge} ${copied ? styles.copiedId : ''} ${className}`.trim(), onClick: onClick, disabled: disabled, title: title, "aria-label": ariaLabel, children: [copied ? _jsx(Check, { size: 13 }) : _jsx(Copy, { size: 13 }), _jsx("span", { className: styles.taskIdBadgeLabel, children: children ?? label })] }));
+    return (_jsx("button", { type: "button", className: `${styles.referenceBadge} ${copied ? styles.copiedReference : ''} ${className}`.trim(), onClick: onClick, disabled: disabled, title: title, "aria-label": ariaLabel, children: _jsx("span", { className: styles.referenceBadgeLabel, children: children ?? label }) }));
 }

package/dist/components/ui/TaxonomyDropdown.d.ts

@@ -1,9 +1,17 @@
+import React from 'react';
 export interface TaxonomyOption {
     value: string | number;
     label: string;
     icon?: string;
     color?: string;
 }
+export interface TaxonomyDropdownAction {
+    id: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    onSelect: () => void;
+}
 export interface TaxonomyDropdownProps {
     value: string | number;
     options: TaxonomyOption[];
@@ -14,10 +22,19 @@ export interface TaxonomyDropdownProps {
     className?: string;
     ariaLabelledBy?: string;
     ariaLabel?: string;
+    title?: string;
     hideSelectedLabel?: boolean;
     hideChevron?: boolean;
     panelClassName?: string;
     portalPanel?: boolean;
     panelMinWidth?: number;
+    panelAlign?: 'start' | 'end';
+    renderOptionContent?: (option: TaxonomyOption) => React.ReactNode;
+    triggerContent?: React.ReactNode;
+    optionLabelColor?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    noResultsText?: string;
+    panelActions?: TaxonomyDropdownAction[];
 }
-export declare function TaxonomyDropdown({ value, options, onChange, placeholder, required, disabled, className, ariaLabelledBy, ariaLabel, hideSelectedLabel, hideChevron, panelClassName, portalPanel, panelMinWidth }: TaxonomyDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function TaxonomyDropdown({ value, options, onChange, placeholder, required, disabled, className, ariaLabelledBy, ariaLabel, title, hideSelectedLabel, hideChevron, panelClassName, portalPanel, panelMinWidth, panelAlign, renderOptionContent: customRenderOptionContent, triggerContent, optionLabelColor, searchable, searchPlaceholder, noResultsText, panelActions, }: TaxonomyDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/TaxonomyDropdown.js

@@ -1,19 +1,39 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import * as Icons from 'lucide-react';
-import { ChevronDown, HelpCircle } from 'lucide-react';
+import { ChevronDown, HelpCircle, Search } from 'lucide-react';
 import styles from './TaxonomyDropdown.module.css';
 import { resolveColor } from '../../utils/constants';
-export function TaxonomyDropdown({ value, options, onChange, placeholder = 'Select...', required = false, disabled = false, className = '', ariaLabelledBy, ariaLabel, hideSelectedLabel = false, hideChevron = false, panelClassName = '', portalPanel = false, panelMinWidth }) {
+function resolveTint(color, opacity) {
+    const resolved = color || 'var(--brand-primary)';
+    if (/^#[0-9a-f]{6}$/i.test(resolved)) {
+        return `${resolved}${Math.round(opacity * 255).toString(16).padStart(2, '0')}`;
+    }
+    return `color-mix(in srgb, ${resolved} ${Math.round(opacity * 100)}%, transparent)`;
+}
+export function TaxonomyDropdown({ value, options, onChange, placeholder = 'Select...', required = false, disabled = false, className = '', ariaLabelledBy, ariaLabel, title, hideSelectedLabel = false, hideChevron = false, panelClassName = '', portalPanel = false, panelMinWidth, panelAlign = 'end', renderOptionContent: customRenderOptionContent, triggerContent, optionLabelColor, searchable = false, searchPlaceholder = 'Search options...', noResultsText = 'No matching options.', panelActions = [], }) {
     const [isOpen, setIsOpen] = useState(false);
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     const [panelPosition, setPanelPosition] = useState({});
+    const [portalTheme, setPortalTheme] = useState();
+    const [searchQuery, setSearchQuery] = useState('');
     const dropdownRef = useRef(null);
     const buttonRef = useRef(null);
     const panelRef = useRef(null);
+    const portalPanelWidthRef = useRef(null);
+    const optionRefs = useRef([]);
+    const panelActionRefs = useRef([]);
+    const searchInputRef = useRef(null);
+    const listboxId = `taxonomy-listbox-${React.useId().replace(/:/g, '')}`;
     // Find the currently selected option
     const selectedOption = options.find(opt => String(opt.value) === String(value));
+    const visibleOptions = React.useMemo(() => {
+        const normalizedQuery = searchQuery.trim().toLocaleLowerCase();
+        if (!searchable || !normalizedQuery)
+            return options;
+        return options.filter((option) => option.label.toLocaleLowerCase().includes(normalizedQuery));
+    }, [options, searchQuery, searchable]);
     // Close dropdown when clicking outside
     useEffect(() => {
         if (!isOpen)
@@ -37,59 +57,132 @@ export function TaxonomyDropdown({ value, options, onChange, placeholder = 'Sele
         }
         else {
             // Set highlighted index to current selection when opening
-            const currentIndex = options.findIndex(opt => String(opt.value) === String(value));
-            setHighlightedIndex(currentIndex >= 0 ? currentIndex : 0);
+            const currentIndex = visibleOptions.findIndex(opt => String(opt.value) === String(value));
+            setHighlightedIndex(currentIndex >= 0 ? currentIndex : (visibleOptions.length > 0 ? 0 : -1));
+        }
+    }, [isOpen, value, visibleOptions]);
+    useEffect(() => {
+        if (isOpen && searchable) {
+            searchInputRef.current?.focus();
         }
-    }, [isOpen, options, value]);
+    }, [isOpen, searchable]);
+    useEffect(() => {
+        if (!isOpen || highlightedIndex < 0)
+            return;
+        optionRefs.current[highlightedIndex]?.scrollIntoView?.({ block: 'nearest' });
+    }, [highlightedIndex, isOpen]);
     useEffect(() => {
         if (!isOpen || !portalPanel)
             return;
-        const updatePosition = () => {
+        const updatePosition = (remeasureWidth) => {
             const button = buttonRef.current;
             if (!button)
                 return;
             const rect = button.getBoundingClientRect();
-            const minWidth = Math.max(panelMinWidth || 0, rect.width);
-            const left = Math.max(8, rect.right - minWidth);
-            const top = rect.bottom;
+            const viewportPadding = 8;
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const maxPanelWidth = Math.max(0, viewportWidth - viewportPadding * 2);
+            if (remeasureWidth || portalPanelWidthRef.current === null) {
+                portalPanelWidthRef.current = Math.min(Math.max(panelMinWidth || 0, rect.width), maxPanelWidth);
+            }
+            const panelWidth = Math.min(portalPanelWidthRef.current, maxPanelWidth);
+            const preferredLeft = panelAlign === 'start' ? rect.left : rect.right - panelWidth;
+            const left = Math.min(Math.max(viewportPadding, preferredLeft), Math.max(viewportPadding, viewportWidth - panelWidth - viewportPadding));
+            const availableBelow = Math.max(0, viewportHeight - rect.bottom - viewportPadding);
+            const availableAbove = Math.max(0, rect.top - viewportPadding);
+            const desiredHeight = Math.min(panelRef.current?.scrollHeight || 280, 280);
+            const placeBelow = availableBelow >= desiredHeight || availableBelow >= availableAbove;
+            const availableHeight = placeBelow ? availableBelow : availableAbove;
             setPanelPosition({
                 position: 'fixed',
-                top,
+                top: placeBelow ? rect.bottom : undefined,
+                bottom: placeBelow ? undefined : viewportHeight - rect.top,
                 left,
-                minWidth,
+                width: panelWidth,
+                minWidth: panelWidth,
+                maxWidth: maxPanelWidth,
+                maxHeight: Math.min(desiredHeight, availableHeight),
                 zIndex: 2000,
             });
         };
-        updatePosition();
-        window.addEventListener('resize', updatePosition);
-        window.addEventListener('scroll', updatePosition, true);
+        const handleScroll = (event) => {
+            const target = event.target;
+            if (target instanceof Node && panelRef.current?.contains(target))
+                return;
+            updatePosition(false);
+        };
+        const handleResize = () => updatePosition(true);
+        portalPanelWidthRef.current = null;
+        updatePosition(true);
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('scroll', handleScroll, true);
         return () => {
-            window.removeEventListener('resize', updatePosition);
-            window.removeEventListener('scroll', updatePosition, true);
+            window.removeEventListener('resize', handleResize);
+            window.removeEventListener('scroll', handleScroll, true);
+            portalPanelWidthRef.current = null;
         };
-    }, [isOpen, portalPanel, panelMinWidth]);
+    }, [isOpen, panelAlign, portalPanel, panelMinWidth]);
+    const openDropdown = () => {
+        if (searchable) {
+            setSearchQuery('');
+        }
+        if (portalPanel) {
+            const themeRoot = dropdownRef.current?.closest('[data-theme]');
+            setPortalTheme(themeRoot?.dataset.theme);
+        }
+        setIsOpen(true);
+    };
     const handleToggle = () => {
-        if (!disabled) {
-            setIsOpen(!isOpen);
+        if (disabled)
+            return;
+        if (isOpen) {
+            setIsOpen(false);
+            return;
         }
+        openDropdown();
     };
     const handleSelect = (option) => {
         onChange(option.value);
+        setSearchQuery('');
+        setIsOpen(false);
+        buttonRef.current?.focus();
+    };
+    const handlePanelAction = (action) => {
+        if (action.disabled)
+            return;
+        action.onSelect();
+        setSearchQuery('');
         setIsOpen(false);
         buttonRef.current?.focus();
     };
     const handleKeyDown = (e) => {
         if (disabled)
             return;
+        const isSearchInput = e.currentTarget === searchInputRef.current;
         switch (e.key) {
             case 'Enter':
+                e.preventDefault();
+                if (!isOpen) {
+                    openDropdown();
+                }
+                else if (highlightedIndex >= 0) {
+                    const highlightedOption = visibleOptions[highlightedIndex];
+                    if (highlightedOption)
+                        handleSelect(highlightedOption);
+                }
+                break;
             case ' ':
+                if (isSearchInput)
+                    return;
                 e.preventDefault();
                 if (!isOpen) {
-                    setIsOpen(true);
+                    openDropdown();
                 }
                 else if (highlightedIndex >= 0) {
-                    handleSelect(options[highlightedIndex]);
+                    const highlightedOption = visibleOptions[highlightedIndex];
+                    if (highlightedOption)
+                        handleSelect(highlightedOption);
                 }
                 break;
             case 'Escape':
@@ -100,81 +193,106 @@ export function TaxonomyDropdown({ value, options, onChange, placeholder = 'Sele
             case 'ArrowDown':
                 e.preventDefault();
                 if (!isOpen) {
-                    setIsOpen(true);
+                    openDropdown();
+                }
+                else if (visibleOptions.length === 0) {
+                    setHighlightedIndex(-1);
                 }
                 else {
-                    setHighlightedIndex(prev => prev < options.length - 1 ? prev + 1 : 0);
+                    setHighlightedIndex(prev => prev < visibleOptions.length - 1 ? prev + 1 : 0);
                 }
                 break;
             case 'ArrowUp':
                 e.preventDefault();
                 if (!isOpen) {
-                    setIsOpen(true);
+                    openDropdown();
+                }
+                else if (visibleOptions.length === 0) {
+                    setHighlightedIndex(-1);
                 }
                 else {
-                    setHighlightedIndex(prev => prev > 0 ? prev - 1 : options.length - 1);
+                    setHighlightedIndex(prev => prev > 0 ? prev - 1 : visibleOptions.length - 1);
                 }
                 break;
             case 'Home':
+                if (isSearchInput)
+                    return;
                 e.preventDefault();
                 if (isOpen) {
-                    setHighlightedIndex(0);
+                    setHighlightedIndex(visibleOptions.length > 0 ? 0 : -1);
                 }
                 break;
             case 'End':
+                if (isSearchInput)
+                    return;
                 e.preventDefault();
                 if (isOpen) {
-                    setHighlightedIndex(options.length - 1);
+                    setHighlightedIndex(visibleOptions.length > 0 ? visibleOptions.length - 1 : -1);
                 }
                 break;
             case 'Tab':
-                // Allow natural tab behavior
+                if (isOpen && !e.shiftKey && panelActions.length > 0) {
+                    e.preventDefault();
+                    panelActionRefs.current[0]?.focus();
+                    break;
+                }
                 setIsOpen(false);
                 break;
             default:
                 break;
         }
     };
-    const renderOptionContent = (option, config) => {
+    const renderDefaultOptionContent = (option, config) => {
         const IconComp = option.icon && Icons[option.icon]
             ? Icons[option.icon]
             : HelpCircle;
         const color = option.color ? resolveColor(option.color) : 'var(--text-secondary)';
         const hideLabel = config?.hideLabel === true;
-        return (_jsxs(_Fragment, { children: [_jsx("span", { className: `taxonomyDropdownIcon ${styles.taxonomyDropdownIcon}`, style: { color }, children: _jsx(IconComp, { size: 16 }) }), !hideLabel && _jsx("span", { className: `taxonomyDropdownLabel ${styles.taxonomyDropdownLabel}`, children: option.label })] }));
+        return (_jsxs(_Fragment, { children: [_jsx("span", { className: `taxonomyDropdownIcon ${styles.taxonomyDropdownIcon}`, style: { color }, children: _jsx(IconComp, { size: 16 }) }), !hideLabel && (_jsx("span", { className: `taxonomyDropdownLabel ${styles.taxonomyDropdownLabel}`, style: config?.labelColor ? { color: config.labelColor } : undefined, children: option.label }))] }));
     };
-    const panel = isOpen ? (_jsx("div", { ref: panelRef, id: `taxonomy-listbox-${placeholder.replace(/\s+/g, '-')}`, className: `taxonomyDropdownPanel ${styles.taxonomyDropdownPanel} ${portalPanel ? styles.taxonomyDropdownPanelPortal : ''} ${panelClassName}`, role: "listbox", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, style: portalPanel ? panelPosition : undefined, children: options.map((option, index) => {
-            const isSelected = String(option.value) === String(value);
-            const isHighlighted = index === highlightedIndex;
-            return (_jsx("div", { className: `taxonomyDropdownOption ${styles.taxonomyDropdownOption} ${isSelected ? `taxonomyDropdownOptionSelected ${styles.taxonomyDropdownOptionSelected}` : ''} ${isHighlighted ? `taxonomyDropdownOptionHighlighted ${styles.taxonomyDropdownOptionHighlighted}` : ''}`, role: "option", "aria-selected": isSelected, onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), style: (() => {
-                    const colorVal = option.color;
-                    const resolved = resolveColor(colorVal);
-                    const isCssVar = !resolved || resolved.startsWith('var(');
-                    const borderBase = isCssVar ? '#8b5cf6' : resolved;
-                    const opacityBorder = isCssVar ? '20' : '30';
-                    const opacityBg = isCssVar ? '05' : '10';
-                    return {
-                        '--option-color': resolved || 'var(--text-primary)',
-                        '--option-border': `${borderBase}${opacityBorder}`,
-                        '--option-bg': `${borderBase}${opacityBg}`
-                    };
-                })(), children: renderOptionContent(option) }, String(option.value)));
-        }) })) : null;
-    return (_jsxs("div", { ref: dropdownRef, className: `taxonomyDropdown ${styles.taxonomyDropdown} ${isOpen ? `taxonomyDropdownActive ${styles.taxonomyDropdownActive}` : ''} ${className}`, children: [_jsxs("button", { ref: buttonRef, type: "button", className: `taxonomyDropdownButton ${styles.taxonomyDropdownButton} ${isOpen ? `taxonomyDropdownOpen ${styles.taxonomyDropdownOpen}` : ''}`, onClick: handleToggle, onKeyDown: handleKeyDown, disabled: disabled, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": `taxonomy-listbox-${placeholder.replace(/\s+/g, '-')}`, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, style: (() => {
+    const renderOptionContent = (option, config) => {
+        if (!config?.hideLabel && customRenderOptionContent) {
+            return customRenderOptionContent(option);
+        }
+        return renderDefaultOptionContent(option, config);
+    };
+    const panel = isOpen ? (_jsxs("div", { ref: panelRef, id: `${listboxId}-panel`, className: `taxonomyDropdownPanel ${styles.taxonomyDropdownPanel} ${portalPanel ? styles.taxonomyDropdownPanelPortal : ''} ${panelClassName}`, "data-theme": portalPanel ? portalTheme : undefined, style: portalPanel ? panelPosition : undefined, children: [searchable ? (_jsxs("div", { className: styles.taxonomyDropdownSearch, children: [_jsx(Search, { size: 15, className: styles.taxonomyDropdownSearchIcon, "aria-hidden": "true" }), _jsx("input", { ref: searchInputRef, type: "search", role: "searchbox", className: `tf-field-shell ${styles.taxonomyDropdownSearchInput}`, value: searchQuery, placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : undefined, onChange: (event) => setSearchQuery(event.target.value), onKeyDown: handleKeyDown })] })) : null, _jsx("div", { id: listboxId, className: `tf-scrollbar tf-scrollbar--compact ${styles.taxonomyDropdownOptions}`, role: "listbox", "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, children: visibleOptions.map((option, index) => {
+                    const isSelected = String(option.value) === String(value);
+                    const isHighlighted = index === highlightedIndex;
+                    return (_jsx("div", { ref: (node) => { optionRefs.current[index] = node; }, id: `${listboxId}-option-${index}`, className: `taxonomyDropdownOption ${styles.taxonomyDropdownOption} ${isSelected ? `taxonomyDropdownOptionSelected ${styles.taxonomyDropdownOptionSelected}` : ''} ${isHighlighted ? `taxonomyDropdownOptionHighlighted ${styles.taxonomyDropdownOptionHighlighted}` : ''}`, role: "option", "aria-selected": isSelected, onClick: () => handleSelect(option), onMouseEnter: () => setHighlightedIndex(index), style: (() => {
+                            const colorVal = option.color;
+                            const resolved = resolveColor(colorVal);
+                            const accent = resolved || 'var(--brand-primary)';
+                            return {
+                                '--option-color': accent,
+                                '--option-border': resolveTint(accent, 0.18),
+                                '--option-bg': resolveTint(accent, 0.06)
+                            };
+                        })(), children: renderOptionContent(option, { labelColor: optionLabelColor }) }, String(option.value)));
+                }) }), visibleOptions.length === 0 ? (_jsx("div", { className: styles.taxonomyDropdownEmpty, role: "status", children: noResultsText })) : null, panelActions.length > 0 ? (_jsx("div", { className: styles.taxonomyDropdownActions, role: "group", "aria-label": "Actions", children: panelActions.map((action, index) => {
+                    const ActionIcon = action.icon && Icons[action.icon]
+                        ? Icons[action.icon]
+                        : null;
+                    return (_jsxs("button", { ref: (node) => { panelActionRefs.current[index] = node; }, type: "button", className: styles.taxonomyDropdownAction, disabled: action.disabled, onClick: () => handlePanelAction(action), onKeyDown: (event) => {
+                            if (event.key === 'Escape') {
+                                event.preventDefault();
+                                setIsOpen(false);
+                                buttonRef.current?.focus();
+                            }
+                            else if (event.key === 'Tab' && !event.shiftKey) {
+                                setIsOpen(false);
+                            }
+                        }, children: [ActionIcon ? _jsx(ActionIcon, { size: 16, "aria-hidden": "true" }) : null, _jsx("span", { children: action.label })] }, action.id));
+                }) })) : null] })) : null;
+    return (_jsxs("div", { ref: dropdownRef, className: `taxonomyDropdown ${styles.taxonomyDropdown} ${isOpen ? `taxonomyDropdownActive ${styles.taxonomyDropdownActive}` : ''} ${className}`, children: [_jsxs("button", { ref: buttonRef, type: "button", className: `taxonomyDropdownButton ${styles.taxonomyDropdownButton} ${isOpen ? `taxonomyDropdownOpen ${styles.taxonomyDropdownOpen}` : ''}`, onClick: handleToggle, onKeyDown: handleKeyDown, disabled: disabled, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-activedescendant": isOpen && highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : undefined, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, title: title, style: (() => {
                     if (!selectedOption)
                         return {};
                     const colorVal = selectedOption.color;
                     const resolved = resolveColor(colorVal);
-                    // If it's a CSS variable or missing, use a subtle violet theme for the border/bg
-                    // but keep the original resolved color for the icon/text
-                    const isCssVar = !resolved || resolved.startsWith('var(');
-                    const borderBase = isCssVar ? '#8b5cf6' : resolved;
-                    const opacityBorder = isCssVar ? '30' : '50';
-                    const opacityBg = isCssVar ? '05' : '10';
+                    // Keep taxonomy colors as a subtle tint. Text and borders use
+                    // semantic field tokens so light accents remain readable.
                     return {
-                        '--field-color': resolved || 'var(--text-primary)',
-                        '--field-border': `${borderBase}${opacityBorder}`,
-                        '--field-bg': `${borderBase}${opacityBg}`
+                        '--field-bg': resolveTint(resolved, 0.06)
                     };
-                })(), children: [_jsx("span", { className: `taxonomyDropdownButtonContent ${styles.taxonomyDropdownButtonContent}`, children: selectedOption ? renderOptionContent(selectedOption, { hideLabel: hideSelectedLabel }) : (_jsxs(_Fragment, { children: [_jsx("span", { className: `taxonomyDropdownIcon ${styles.taxonomyDropdownIcon}`, children: _jsx(HelpCircle, { size: 16 }) }), _jsx("span", { className: `taxonomyDropdownLabel ${styles.taxonomyDropdownLabel}`, children: placeholder })] })) }), !hideChevron && (_jsx(ChevronDown, { size: 16, className: `taxonomyDropdownChevron ${styles.taxonomyDropdownChevron} ${isOpen ? `taxonomyDropdownChevronOpen ${styles.taxonomyDropdownChevronOpen}` : ''}` }))] }), portalPanel ? (panel ? createPortal(panel, document.body) : null) : panel] }));
+                })(), children: [_jsx("span", { className: `taxonomyDropdownButtonContent ${styles.taxonomyDropdownButtonContent}`, children: triggerContent ?? (selectedOption ? renderOptionContent(selectedOption, { hideLabel: hideSelectedLabel }) : (_jsxs(_Fragment, { children: [_jsx("span", { className: `taxonomyDropdownIcon ${styles.taxonomyDropdownIcon}`, children: _jsx(HelpCircle, { size: 16 }) }), _jsx("span", { className: `taxonomyDropdownLabel ${styles.taxonomyDropdownLabel}`, children: placeholder })] }))) }), !hideChevron && (_jsx(ChevronDown, { size: 16, className: `taxonomyDropdownChevron ${styles.taxonomyDropdownChevron} ${isOpen ? `taxonomyDropdownChevronOpen ${styles.taxonomyDropdownChevronOpen}` : ''}` }))] }), portalPanel ? (panel ? createPortal(panel, document.body) : null) : panel] }));
 }

package/dist/components/ui/TopNoticeLayer.d.ts

@@ -2,6 +2,7 @@ import type { UiNotice } from '../../utils/uiNotice';
 type TopNoticeLayerProps = {
     notice: UiNotice | null;
     onDismiss?: () => void;
+    placement?: 'top' | 'task';
 };
-export declare function TopNoticeLayer({ notice, onDismiss }: TopNoticeLayerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function TopNoticeLayer({ notice, onDismiss, placement }: TopNoticeLayerProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/ui/TopNoticeLayer.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertTriangle, Check, Info, X } from 'lucide-react';
 import styles from './TopNoticeLayer.module.css';
-export function TopNoticeLayer({ notice, onDismiss }) {
+export function TopNoticeLayer({ notice, onDismiss, placement = 'top' }) {
     if (!notice)
         return null;
     const toneClass = notice.tone === 'error'
@@ -10,5 +10,8 @@ export function TopNoticeLayer({ notice, onDismiss }) {
             ? styles.topNoticeSuccess
             : styles.topNoticeInfo;
     const statusRole = notice.tone === 'error' ? 'alert' : 'status';
-    return (_jsx("div", { className: styles.topNoticeLayer, children: _jsxs("div", { className: `${styles.topNotice} ${toneClass}`, role: statusRole, "aria-live": notice.tone === 'error' ? 'assertive' : 'polite', children: [notice.tone === 'error' ? _jsx(AlertTriangle, { size: 14 }) : notice.tone === 'success' ? _jsx(Check, { size: 14 }) : _jsx(Info, { size: 14 }), _jsx("span", { className: styles.topNoticeMessage, children: notice.message }), onDismiss && (_jsx("button", { type: "button", className: styles.topNoticeDismiss, onClick: onDismiss, "aria-label": "Dismiss notice", title: "Dismiss notice", children: _jsx(X, { size: 14 }) }))] }) }));
+    const layerClassName = placement === 'task'
+        ? `${styles.topNoticeLayer} ${styles.taskNoticeLayer}`
+        : styles.topNoticeLayer;
+    return (_jsx("div", { className: layerClassName, children: _jsxs("div", { className: `${styles.topNotice} ${toneClass}`, role: statusRole, "aria-live": notice.tone === 'error' ? 'assertive' : 'polite', children: [notice.tone === 'error' ? _jsx(AlertTriangle, { size: 14 }) : notice.tone === 'success' ? _jsx(Check, { size: 14 }) : _jsx(Info, { size: 14 }), _jsx("span", { className: styles.topNoticeMessage, children: notice.message }), notice.actionLabel && notice.onAction && (_jsx("button", { type: "button", className: "tf-button-ghost tf-button-compact", onClick: notice.onAction, children: notice.actionLabel })), onDismiss && (_jsx("button", { type: "button", className: styles.topNoticeDismiss, onClick: onDismiss, "aria-label": "Dismiss notice", title: "Dismiss notice", children: _jsx(X, { size: 14 }) }))] }) }));
 }

package/dist/components/ui/useFallbackImageUrl.d.ts

@@ -0,0 +1,4 @@
+export declare function useFallbackImageUrl(imageUrl?: string | null, fallbackImageUrl?: string | null): {
+    activeImageUrl: string;
+    handleImageError: () => void;
+};

package/dist/components/ui/useFallbackImageUrl.js

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+export function useFallbackImageUrl(imageUrl, fallbackImageUrl) {
+    const normalizedImageUrl = String(imageUrl || '').trim();
+    const normalizedFallbackImageUrl = String(fallbackImageUrl || '').trim();
+    const [activeImageUrl, setActiveImageUrl] = useState(normalizedImageUrl || normalizedFallbackImageUrl);
+    useEffect(() => {
+        setActiveImageUrl(normalizedImageUrl || normalizedFallbackImageUrl);
+    }, [normalizedImageUrl, normalizedFallbackImageUrl]);
+    const handleImageError = () => {
+        if (activeImageUrl && normalizedFallbackImageUrl && activeImageUrl !== normalizedFallbackImageUrl) {
+            setActiveImageUrl(normalizedFallbackImageUrl);
+            return;
+        }
+        setActiveImageUrl('');
+    };
+    return {
+        activeImageUrl,
+        handleImageError,
+    };
+}

package/dist/components/views/AppShellHeader.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import styles from '../../Taskforce.module.css';
 import shellStyles from './WorkspaceShell.module.css';
-import logoLight from '../../assets/branding/logos/logo_light.svg';
-import logoDark from '../../assets/branding/logos/logo_dark.svg';
+import logoLight from '../../assets/branding/logos/logo_light_no_bg.svg';
+import logoDark from '../../assets/branding/logos/logo_dark_no_bg.svg';
 import favicon from '../../assets/favicon/favicon.svg';
 import { DEFAULT_TASKFORCE_THEME, isLightThemeFamily } from '../../utils/theme';
 export function AppShellHeader({ projectName, currentWorkspaceId, brandLabel = 'TaskForce', brandHomeLabel = 'Go to Kanban', onBrandClick, runtimeMode = 'local', theme = DEFAULT_TASKFORCE_THEME, meta, actions }) {

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { type UseTaskforceResult } from '../../hooks/useTaskforce';
 export type StandaloneLayoutProps = UseTaskforceResult & {
     resolveCloudAuthUrl?: (path: string) => string;
+    initialActivityEntryId?: string;
     onHeaderMouseDown?: (e: React.MouseEvent) => void;
     isDragging?: boolean;
     onClose?: () => void;