@taskforcehq/taskforce 0.3.168

package/dist/components/ui/Markdown.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkBreaks from 'remark-breaks';
+import styles from '../../Taskforce.module.css';
+import { parseChecklistLines } from '../../utils/checklistMarkdown';
+export const Markdown = ({ children, className, onChecklistToggle, onTaskIdClick }) => {
+    if (!children)
+        return null;
+    const parsedChecklist = parseChecklistLines(children || '');
+    let checklistRenderIndex = 0;
+    const isTaskListChildren = (nodeChildren) => {
+        const childArray = React.Children.toArray(nodeChildren);
+        return childArray.some((child) => {
+            if (!React.isValidElement(child))
+                return false;
+            const className = String(child.props?.className || '');
+            return className.includes('task-list-item');
+        });
+    };
+    const taskIdPattern = /\b(task-\d{10,}-[a-z0-9]+)\b/gi;
+    const linkifyTaskIds = (node) => {
+        if (!onTaskIdClick)
+            return node;
+        if (typeof node === 'string') {
+            const matches = Array.from(node.matchAll(taskIdPattern));
+            if (!matches.length)
+                return node;
+            const output = [];
+            let cursor = 0;
+            for (let i = 0; i < matches.length; i += 1) {
+                const match = matches[i];
+                const id = match[1];
+                const start = match.index ?? -1;
+                if (start < cursor)
+                    continue;
+                if (start > cursor)
+                    output.push(node.slice(cursor, start));
+                output.push(_jsx("button", { type: "button", className: styles.taskIdInlineLink, onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onTaskIdClick(id);
+                    }, children: id }, `${id}-${start}-${i}`));
+                cursor = start + id.length;
+            }
+            if (cursor < node.length)
+                output.push(node.slice(cursor));
+            return output;
+        }
+        if (Array.isArray(node))
+            return node.map(linkifyTaskIds);
+        if (!React.isValidElement(node))
+            return node;
+        const type = typeof node.type === 'string' ? node.type : '';
+        if (type === 'code' || type === 'pre' || type === 'a')
+            return node;
+        const childNodes = node.props?.children;
+        if (childNodes === undefined)
+            return node;
+        return React.cloneElement(node, {}, React.Children.map(childNodes, linkifyTaskIds));
+    };
+    return (_jsx("div", { className: className, children: _jsx(ReactMarkdown, { remarkPlugins: [remarkGfm, remarkBreaks], components: {
+                p: ({ children }) => _jsx("p", { children: linkifyTaskIds(children) }),
+                ul: ({ children }) => (_jsx("ul", { style: isTaskListChildren(children) ? { paddingLeft: 0 } : undefined, children: children })),
+                li: ({ children, className }) => {
+                    const isTaskListItem = String(className || '').includes('task-list-item');
+                    return (_jsx("li", { className: className, style: isTaskListItem ? { listStyle: 'none' } : undefined, children: linkifyTaskIds(children) }));
+                },
+                input: ({ type, checked }) => {
+                    if (type !== 'checkbox')
+                        return _jsx("input", { type: type, checked: checked, readOnly: true });
+                    const currentChecklistItem = parsedChecklist[checklistRenderIndex];
+                    checklistRenderIndex += 1;
+                    const isInteractive = Boolean(onChecklistToggle && currentChecklistItem);
+                    return (_jsx("input", { type: "checkbox", checked: Boolean(checked), readOnly: !isInteractive, onClick: (e) => {
+                            if (!isInteractive || !currentChecklistItem)
+                                return;
+                            e.stopPropagation();
+                            onChecklistToggle?.(currentChecklistItem.lineIndex, !Boolean(checked));
+                        }, style: { cursor: isInteractive ? 'pointer' : 'default', marginRight: 8 } }));
+                },
+                code: ({ children, className, ...props }) => {
+                    const content = String(children || '').replace(/\n$/, '');
+                    const hasLanguage = /language-(\w+)/.test(className || '');
+                    // It's a block if it has a language tag OR if it contains multiple lines
+                    const isBlock = hasLanguage || content.includes('\n');
+                    if (isBlock) {
+                        return (_jsx("pre", { className: styles.codeBlock, children: _jsx("code", { className: className, ...props, children: content }) }));
+                    }
+                    return (_jsx("code", { className: styles.inlineCode, ...props, children: content }));
+                },
+            }, children: children }) }));
+};

package/dist/components/ui/Markdown.test.d.ts

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

package/dist/components/ui/Markdown.test.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Markdown } from './Markdown';
+describe('Markdown Component', () => {
+    it('1.10 Renders basic text', () => {
+        render(_jsx(Markdown, { children: "Hello World" }));
+        expect(screen.getByText('Hello World')).toBeInTheDocument();
+    });
+    it('1.11 Renders inline code', () => {
+        render(_jsx(Markdown, { children: "`code`" }));
+        const code = screen.getByText('code');
+        expect(code.tagName).toBe('CODE');
+    });
+    it('1.12 Renders links', () => {
+        render(_jsx(Markdown, { children: "[Link](https://example.com)" }));
+        const link = screen.getByRole('link', { name: 'Link' });
+        expect(link).toHaveAttribute('href', 'https://example.com');
+    });
+    it('1.13 Renders GFM checkbox', () => {
+        render(_jsx(Markdown, { children: "- [ ] Task" }));
+        const checkbox = screen.getByRole('checkbox');
+        expect(checkbox).toBeInTheDocument();
+        expect(checkbox).not.toBeChecked();
+    });
+    it('1.14 Renders GFM checked checkbox', () => {
+        render(_jsx(Markdown, { children: "- [x] Done" }));
+        const checkbox = screen.getByRole('checkbox');
+        expect(checkbox).toBeChecked();
+    });
+    it('1.15 Linkifies task IDs when callback is provided', () => {
+        const onTaskIdClick = vi.fn();
+        render(_jsx(Markdown, { onTaskIdClick: onTaskIdClick, children: "See task-1771422284342-ummpvmvb7 for details" }));
+        const button = screen.getByRole('button', { name: 'task-1771422284342-ummpvmvb7' });
+        fireEvent.click(button);
+        expect(onTaskIdClick).toHaveBeenCalledWith('task-1771422284342-ummpvmvb7');
+    });
+});

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

@@ -0,0 +1,16 @@
+import React from 'react';
+interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    theme?: 'light' | 'dark' | 'midnight';
+    className?: string;
+    draggable?: boolean;
+    isSettings?: boolean;
+    closeOnOverlayClick?: boolean;
+}
+export declare function Modal({ isOpen, onClose, title, children, footer, size, theme, className, draggable, isSettings, closeOnOverlayClick }: ModalProps): React.ReactPortal | null;
+export {};

package/dist/components/ui/Modal.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+import styles from './Modal.module.css';
+import { useDraggable } from '../../hooks/useDraggable';
+export function Modal({ isOpen, onClose, title, children, footer, size = 'md', theme = 'dark', className, draggable = false, isSettings = false, closeOnOverlayClick = true }) {
+    const overlayRef = useRef(null);
+    const { position, isDragging, handleMouseDown, modalRef } = useDraggable();
+    // Close on escape
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' && isOpen) {
+                onClose();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, onClose]);
+    // Prevent body scroll when open
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = '';
+        }
+        return () => {
+            document.body.style.overflow = '';
+        };
+    }, [isOpen]);
+    if (!isOpen)
+        return null;
+    // Map size to CSS class
+    const sizeClassMap = {
+        sm: styles.modalSizeSm,
+        md: styles.modalSizeMd,
+        lg: styles.modalSizeLg,
+        xl: styles.modalSizeXl,
+        full: styles.modalSizeFull
+    };
+    return createPortal(_jsx("div", { className: `${styles.overlay} ${className || ''} ${styles.overlayHighZ}`, ref: overlayRef, onClick: (e) => {
+            if (closeOnOverlayClick && e.target === overlayRef.current)
+                onClose();
+        }, children: _jsxs("div", { ref: modalRef, className: `${styles.modal} ${sizeClassMap[size]} ${draggable ? styles.draggableModal : ''} ${isSettings ? styles.settingsViewModal : ''}`, "data-theme": theme, style: {
+                transform: draggable ? `translate(${position.x}px, ${position.y}px)` : undefined,
+                transition: isDragging ? 'none' : 'transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease-out'
+            }, children: [_jsxs("div", { className: `${styles.header} ${draggable ? styles.draggableHeader : ''}`, onMouseDown: draggable ? handleMouseDown : undefined, style: { cursor: draggable ? (isDragging ? 'grabbing' : 'grab') : 'default' }, children: [_jsx("div", { className: styles.headerTitle, children: title }), _jsx("div", { className: styles.headerActions, children: _jsx("button", { className: styles.headerActionBtn, onClick: onClose, title: "Close", children: _jsx(X, { size: 20 }) }) })] }), _jsx("div", { className: styles.modalContent, children: children }), footer && (_jsx("div", { className: `${styles.formActions} ${styles.modalFooter}`, children: footer }))] }) }), document.body);
+}

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

@@ -0,0 +1,10 @@
+export declare function MultiSelectFilter({ label, options, selected, onChange, variant }: {
+    label: string;
+    options: {
+        value: string | number;
+        label: string;
+    }[];
+    selected: (string | number)[];
+    onChange: (values: (string | number)[]) => void;
+    variant?: 'label' | 'value';
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/MultiSelectFilter.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { ChevronDown } from 'lucide-react';
+import styles from '../../Taskforce.module.css';
+// Helper to correctly pluralize filter labels (e.g., Category -> Categories)
+function pluralize(label) {
+    const key = label.charAt(0).toUpperCase() + label.slice(1).toLowerCase();
+    const irregulars = {
+        'Category': 'Categories',
+        'Priority': 'Priorities',
+        'Status': 'Statuses',
+    };
+    if (irregulars[key])
+        return irregulars[key];
+    // Default: just add 's'
+    return `${label}s`;
+}
+export function MultiSelectFilter({ label, options, selected, onChange, variant = 'label' }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const toggleOption = (value) => {
+        if (selected.includes(value)) {
+            onChange(selected.filter(v => v !== value));
+        }
+        else {
+            onChange([...selected, value]);
+        }
+    };
+    const isAllSelected = options.length > 0 && options.every(opt => {
+        const val = variant === 'label' ? opt.label : opt.value;
+        return selected.includes(val);
+    });
+    const isNoneSelected = !options.some(opt => {
+        const val = variant === 'label' ? opt.label : opt.value;
+        return selected.includes(val);
+    });
+    const toggleAll = () => {
+        if (isAllSelected) {
+            onChange([]);
+        }
+        else {
+            onChange(options.map(o => variant === 'label' ? o.label : o.value));
+        }
+    };
+    const visibleSelectedCount = options.filter(opt => {
+        const val = variant === 'label' ? opt.label : opt.value;
+        return selected.includes(val);
+    }).length;
+    const plural = pluralize(label);
+    const displayText = isAllSelected
+        ? `All ${plural}`
+        : isNoneSelected
+            ? `No ${plural}`
+            : visibleSelectedCount === 1
+                ? `1 ${label}`
+                : `${visibleSelectedCount} ${plural}`;
+    return (_jsxs("div", { className: styles.filterContainer, ref: containerRef, 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}`, 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 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));
+                    })] }))] }));
+}

package/dist/components/ui/MultiSelectFilter.test.d.ts

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

package/dist/components/ui/MultiSelectFilter.test.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { MultiSelectFilter } from './MultiSelectFilter';
+describe('MultiSelectFilter Component', () => {
+    const defaultProps = {
+        label: 'Category',
+        options: [
+            { value: 'General', label: 'General' },
+            { value: 'Backend', label: 'Backend' },
+            { value: 'Frontend', label: 'Frontend' }
+        ],
+        selected: ['General', 'Backend', 'Frontend'], // All selected initially
+        onChange: vi.fn(),
+        type: 'category'
+    };
+    const renderComponent = (props = {}) => {
+        return render(_jsx(MultiSelectFilter, { ...defaultProps, ...props }));
+    };
+    it('1.1 Renders correctly with label', () => {
+        renderComponent();
+        // Should show "All Categories" since all are selected and label is "Category"
+        expect(screen.getByText('All Categories')).toBeInTheDocument();
+    });
+    it('1.2 Opens dropdown on click', async () => {
+        const user = userEvent.setup();
+        renderComponent();
+        const button = screen.getByRole('button');
+        await user.click(button);
+        // Dropdown content should appear
+        expect(screen.getByText('Toggle All')).toBeInTheDocument();
+        expect(screen.getByText('General')).toBeInTheDocument();
+        expect(screen.getByText('Backend')).toBeInTheDocument();
+    });
+    it('1.3 Toggle selection', async () => {
+        const user = userEvent.setup();
+        renderComponent();
+        await user.click(screen.getByRole('button')); // Open
+        // Click the option div or checkbox? Implementation has onClick on div.
+        const backendOption = screen.getByText('Backend');
+        await user.click(backendOption);
+        // Should call onChange with new array (removing Backend)
+        expect(defaultProps.onChange).toHaveBeenCalledWith(['General', 'Frontend']);
+    });
+    it('1.4 Toggle All', async () => {
+        const user = userEvent.setup();
+        // Case: Some selected -> Click Toggle All -> Select All
+        renderComponent({ selected: ['General'] });
+        await user.click(screen.getByRole('button'));
+        const toggleAll = screen.getByText('Toggle All');
+        await user.click(toggleAll);
+        // Should select all
+        expect(defaultProps.onChange).toHaveBeenCalledWith(['General', 'Backend', 'Frontend']);
+    });
+    it('1.5 Shows count when partially selected', () => {
+        renderComponent({ selected: ['General', 'Backend'] }); // 2 out of 3
+        // Should show "2" or "2 selected" or similar. Implementation check:
+        // Text is `selected.length === options.length ? 'All' : selected.length === 0 ? 'None' : pluralize(selected.length, 'Category', 'Categories')`
+        // pluralize: `${count} ${count === 1 ? singular : plural}`. But wait, `pluralize` usually returns string "2 Categories".
+        // Let's check implementation if needed, but "2 Categories" is expected.
+        expect(screen.getByText('2 Categories')).toBeInTheDocument();
+    });
+    it('1.6 Closes on outside click', async () => {
+        const user = userEvent.setup();
+        renderComponent();
+        await user.click(screen.getByRole('button'));
+        expect(screen.getByText('Toggle All')).toBeVisible();
+        await user.click(document.body);
+        // Expect dropdown to be gone/hidden. 
+        // Note: checking visibility might require checking if element is removed from DOM.
+        expect(screen.queryByText('Toggle All')).not.toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,17 @@
+export interface TaxonomyOption {
+    value: string | number;
+    label: string;
+    icon?: string;
+    color?: string;
+}
+export interface TaxonomyDropdownProps {
+    value: string | number;
+    options: TaxonomyOption[];
+    onChange: (value: string | number) => void;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    ariaLabelledBy?: string;
+}
+export declare function TaxonomyDropdown({ value, options, onChange, placeholder, required, disabled, className, ariaLabelledBy }: TaxonomyDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/TaxonomyDropdown.js

@@ -0,0 +1,145 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import * as Icons from 'lucide-react';
+import { ChevronDown, HelpCircle } from 'lucide-react';
+import styles from '../../Taskforce.module.css';
+import { resolveColor } from '../../utils/constants';
+export function TaxonomyDropdown({ value, options, onChange, placeholder = 'Select...', required = false, disabled = false, className = '', ariaLabelledBy }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const dropdownRef = useRef(null);
+    const buttonRef = useRef(null);
+    // Find the currently selected option
+    const selectedOption = options.find(opt => String(opt.value) === String(value));
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setHighlightedIndex(-1);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [isOpen]);
+    // Reset highlighted index when dropdown closes
+    useEffect(() => {
+        if (!isOpen) {
+            setHighlightedIndex(-1);
+        }
+        else {
+            // Set highlighted index to current selection when opening
+            const currentIndex = options.findIndex(opt => String(opt.value) === String(value));
+            setHighlightedIndex(currentIndex >= 0 ? currentIndex : 0);
+        }
+    }, [isOpen, options, value]);
+    const handleToggle = () => {
+        if (!disabled) {
+            setIsOpen(!isOpen);
+        }
+    };
+    const handleSelect = (option) => {
+        onChange(option.value);
+        setIsOpen(false);
+        buttonRef.current?.focus();
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        switch (e.key) {
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (!isOpen) {
+                    setIsOpen(true);
+                }
+                else if (highlightedIndex >= 0) {
+                    handleSelect(options[highlightedIndex]);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                setIsOpen(false);
+                buttonRef.current?.focus();
+                break;
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!isOpen) {
+                    setIsOpen(true);
+                }
+                else {
+                    setHighlightedIndex(prev => prev < options.length - 1 ? prev + 1 : 0);
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (!isOpen) {
+                    setIsOpen(true);
+                }
+                else {
+                    setHighlightedIndex(prev => prev > 0 ? prev - 1 : options.length - 1);
+                }
+                break;
+            case 'Home':
+                e.preventDefault();
+                if (isOpen) {
+                    setHighlightedIndex(0);
+                }
+                break;
+            case 'End':
+                e.preventDefault();
+                if (isOpen) {
+                    setHighlightedIndex(options.length - 1);
+                }
+                break;
+            case 'Tab':
+                // Allow natural tab behavior
+                setIsOpen(false);
+                break;
+            default:
+                break;
+        }
+    };
+    const renderOptionContent = (option) => {
+        const IconComp = option.icon && Icons[option.icon]
+            ? Icons[option.icon]
+            : HelpCircle;
+        const color = option.color ? resolveColor(option.color) : 'var(--text-secondary)';
+        return (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.taxonomyDropdownIcon, style: { color }, children: _jsx(IconComp, { size: 16 }) }), _jsx("span", { className: styles.taxonomyDropdownLabel, children: option.label })] }));
+    };
+    return (_jsxs("div", { ref: dropdownRef, className: `${styles.taxonomyDropdown} ${className}`, children: [_jsxs("button", { ref: buttonRef, type: "button", className: `${styles.taxonomyDropdownButton} ${isOpen ? 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, 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';
+                    return {
+                        '--field-color': resolved || 'var(--text-primary)',
+                        '--field-border': `${borderBase}${opacityBorder}`,
+                        '--field-bg': `${borderBase}${opacityBg}`
+                    };
+                })(), children: [_jsx("span", { className: styles.taxonomyDropdownButtonContent, children: selectedOption ? renderOptionContent(selectedOption) : (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.taxonomyDropdownIcon, children: _jsx(HelpCircle, { size: 16 }) }), _jsx("span", { className: styles.taxonomyDropdownLabel, children: placeholder })] })) }), _jsx(ChevronDown, { size: 16, className: `${styles.taxonomyDropdownChevron} ${isOpen ? styles.taxonomyDropdownChevronOpen : ''}` })] }), isOpen && (_jsx("div", { id: `taxonomy-listbox-${placeholder.replace(/\s+/g, '-')}`, className: styles.taxonomyDropdownPanel, role: "listbox", "aria-labelledby": ariaLabelledBy, children: options.map((option, index) => {
+                    const isSelected = String(option.value) === String(value);
+                    const isHighlighted = index === highlightedIndex;
+                    return (_jsx("div", { className: `${styles.taxonomyDropdownOption} ${isSelected ? styles.taxonomyDropdownOptionSelected : ''} ${isHighlighted ? 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)));
+                }) }))] }));
+}

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

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