@taskforcehq/taskforce 0.3.170 → 0.3.300

package/dist/components/task/TaskStatusActions.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Archive } from 'lucide-react';
+import styles from '../../Taskforce.module.css';
+import { STATUS_DEFINITIONS } from '../../utils/constants';
+import { TaxonomyDropdown } from '../ui/TaxonomyDropdown';
+export function TaskStatusActions({ task, disabled = false, compressed = false, shortLabels = false, showLabel = true, onSetStatus, onArchiveTask }) {
+    const currentStatus = task?.status || 'task';
+    const canArchive = !!task && (currentStatus === 'done' || currentStatus === 'cancelled');
+    const statusOptions = STATUS_DEFINITIONS.map((option) => ({
+        ...option,
+        label: (compressed || shortLabels) ? (option.shortLabel || option.label) : option.label
+    }));
+    return (_jsxs("div", { className: `${styles.statusActionsGroup} ${compressed ? styles.statusActionsGroupCompact : ''}`, children: [canArchive && (_jsx("button", { type: "button", className: `${styles.actionBtn} ${styles.archiveTaskBtn}`, onClick: () => task && !disabled && onArchiveTask?.(task), disabled: disabled, title: "Archive Now", "aria-label": "Archive task", children: _jsx(Archive, { size: compressed ? 12 : 16 }) })), _jsx("div", { className: `${styles.statusSelectWrap} ${styles.statusTaxonomyDropdownWrap}`, children: _jsx(TaxonomyDropdown, { value: currentStatus, options: statusOptions, disabled: disabled || !task, ariaLabel: "Status", hideSelectedLabel: !showLabel, hideChevron: !showLabel, className: `${styles.statusTaxonomyDropdown} ${compressed ? styles.statusTaxonomyDropdownCompact : ''} ${!showLabel ? styles.statusTaxonomyDropdownIconOnly : ''}`, panelClassName: !showLabel ? styles.statusTaxonomyDropdownIconOnlyPanel : '', portalPanel: !showLabel, panelMinWidth: !showLabel ? 144 : undefined, onChange: (value) => {
+                        if (!task)
+                            return;
+                        onSetStatus?.(task, value);
+                    } }) })] }));
+}

package/dist/components/task/TaskStatusActions.test.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { TaskStatusActions } from './TaskStatusActions';
+const makeTask = (overrides = {}) => ({
+    id: 'task-1',
+    title: 'Status Test',
+    description: null,
+    category: 'default',
+    type: 'feature',
+    priority: 2,
+    status: 'task',
+    createdAt: '2026-02-13T00:00:00.000Z',
+    ...overrides
+});
+describe('TaskStatusActions', () => {
+    it('renders the taxonomy dropdown with the current status', () => {
+        render(_jsx(TaskStatusActions, { task: makeTask({ status: 'review' }) }));
+        expect(screen.getByRole('combobox', { name: 'Status' })).toHaveTextContent('Review');
+    });
+    it('shows archive only for terminal statuses', () => {
+        const { rerender } = render(_jsx(TaskStatusActions, { task: makeTask({ status: 'in-progress' }) }));
+        expect(screen.queryByRole('button', { name: 'Archive task' })).not.toBeInTheDocument();
+        rerender(_jsx(TaskStatusActions, { task: makeTask({ status: 'done' }) }));
+        expect(screen.getByRole('button', { name: 'Archive task' })).toBeInTheDocument();
+    });
+    it('uses the compact short label when compressed', () => {
+        render(_jsx(TaskStatusActions, { task: makeTask({ status: 'in-progress' }), compressed: true }));
+        expect(screen.getByRole('combobox', { name: 'Status' })).toHaveTextContent('Working');
+    });
+    it('can hide the closed-state status label', () => {
+        render(_jsx(TaskStatusActions, { task: makeTask({ status: 'review' }), showLabel: false }));
+        expect(screen.getByRole('combobox', { name: 'Status' })).not.toHaveTextContent('Review');
+    });
+    it('calls onSetStatus when the dropdown changes', async () => {
+        const user = userEvent.setup();
+        const task = makeTask({ status: 'task' });
+        const onSetStatus = vi.fn();
+        render(_jsx(TaskStatusActions, { task: task, onSetStatus: onSetStatus }));
+        await user.click(screen.getByRole('combobox', { name: 'Status' }));
+        await user.click(screen.getByRole('option', { name: 'Review' }));
+        expect(onSetStatus).toHaveBeenCalledWith(task, 'review');
+    });
+});

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

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ImageReferenceBadgeProps {
+    copied: boolean;
+    disabled?: boolean;
+    label: React.ReactNode;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    title?: string;
+    ariaLabel?: string;
+    className?: string;
+}
+export declare function ImageReferenceBadge({ copied, disabled, label, onClick, title, ariaLabel, className, }: ImageReferenceBadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/ImageReferenceBadge.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReferenceBadgeButton } from './ReferenceBadgeButton';
+export function ImageReferenceBadge({ copied, disabled = false, label, onClick, title = 'Copy image reference', ariaLabel, className = '', }) {
+    return (_jsx(ReferenceBadgeButton, { copied: copied, disabled: disabled, label: "", onClick: onClick, title: title, ariaLabel: ariaLabel, className: className, children: label }));
+}

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

@@ -1,4 +1,4 @@
-export declare function LevelSelector({ label, value, options, onChange, type, hideLabel }: {
+export declare function LevelSelector({ label, value, options, onChange, type, hideLabel, showSelectedLabel }: {
     label: string;
     value: string | number;
     options: Array<{
@@ -10,4 +10,5 @@ export declare function LevelSelector({ label, value, options, onChange, type, h
     onChange: (val: string | number) => void;
     type?: 'priority' | 'complexity' | 'general';
     hideLabel?: boolean;
+    showSelectedLabel?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/LevelSelector.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from '../../Taskforce.module.css';
 import { resolveColor } from '../../utils/constants';
-export function LevelSelector({ label, value, options, onChange, type = 'priority', hideLabel = false }) {
+export function LevelSelector({ label, value, options, onChange, type = 'priority', hideLabel = false, showSelectedLabel = true }) {
     const selectedOption = options.find(o => String(o.value) === String(value));
-    return (_jsxs("div", { className: styles.field, children: [!hideLabel && (_jsxs("div", { className: styles.labelRow, children: [_jsx("label", { className: styles.label, children: label }), selectedOption && (_jsx("span", { className: styles.levelLabel, style: {
+    return (_jsxs("div", { className: styles.field, children: [!hideLabel && (_jsxs("div", { className: styles.labelRow, children: [_jsx("label", { className: styles.label, children: label }), showSelectedLabel && selectedOption && (_jsx("span", { className: styles.levelLabel, style: {
                             color: resolveColor(selectedOption.color) || (type === 'priority'
                                 ? `var(--priority-${value})`
                                 : (type === 'complexity' ? `var(--complexity-${value})` : 'var(--text-secondary)')),

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

@@ -1,6 +1,5 @@
-export declare const Markdown: ({ children, className, onChecklistToggle, onTaskIdClick }: {
+export declare const Markdown: ({ children, className, onTaskIdClick }: {
     children: string | null | undefined;
     className?: string;
-    onChecklistToggle?: (lineIndex: number, completed: boolean) => void;
     onTaskIdClick?: (taskId: string) => void;
 }) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/ui/Markdown.js

@@ -4,12 +4,9 @@ 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 }) => {
+export const Markdown = ({ children, className, 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) => {
@@ -70,15 +67,7 @@ export const Markdown = ({ children, className, onChecklistToggle, onTaskIdClick
                 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 } }));
+                    return (_jsx("input", { type: "checkbox", checked: Boolean(checked), readOnly: true, style: { cursor: 'default', marginRight: 8 } }));
                 },
                 code: ({ children, className, ...props }) => {
                     const content = String(children || '').replace(/\n$/, '');

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

@@ -6,11 +6,12 @@ interface ModalProps {
     children: React.ReactNode;
     footer?: React.ReactNode;
     size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
-    theme?: 'light' | 'dark' | 'midnight';
+    theme?: 'light' | 'dawn' | 'dark' | 'midnight';
     className?: string;
+    headerActions?: React.ReactNode;
     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 declare function Modal({ isOpen, onClose, title, children, footer, size, theme, className, headerActions, draggable, isSettings, closeOnOverlayClick }: ModalProps): React.ReactPortal | null;
 export {};

package/dist/components/ui/Modal.js

@@ -4,7 +4,8 @@ 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 }) {
+import { DEFAULT_TASKFORCE_THEME } from '../../utils/theme';
+export function Modal({ isOpen, onClose, title, children, footer, size = 'md', theme = DEFAULT_TASKFORCE_THEME, className, headerActions, draggable = false, isSettings = false, closeOnOverlayClick = true }) {
     const overlayRef = useRef(null);
     const { position, isDragging, handleMouseDown, modalRef } = useDraggable();
     // Close on escape
@@ -42,8 +43,8 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', t
     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: {
+        }, children: _jsxs("div", { ref: modalRef, className: `tf-surface-modal tf-modal-shell ${styles.modal} tf-scrollbar-scope ${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);
+            }, children: [_jsxs("div", { className: `tf-modal-header ${draggable ? styles.draggableHeader : ''}`, onMouseDown: draggable ? handleMouseDown : undefined, style: { cursor: draggable ? (isDragging ? 'grabbing' : 'grab') : 'default' }, children: [_jsx("div", { className: "tf-modal-title", children: title }), _jsxs("div", { className: styles.headerActions, children: [headerActions, _jsx("button", { className: "tf-control-icon", 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

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

package/dist/components/ui/MultiSelectFilter.js

@@ -15,7 +15,7 @@ function pluralize(label) {
     // Default: just add 's'
     return `${label}s`;
 }
-export function MultiSelectFilter({ label, options, selected, onChange, variant = 'label' }) {
+export function MultiSelectFilter({ label, options, selected, onChange, variant = 'label', containerStyle, }) {
     const [isOpen, setIsOpen] = useState(false);
     const containerRef = useRef(null);
     useEffect(() => {
@@ -63,7 +63,7 @@ export function MultiSelectFilter({ label, options, selected, onChange, variant
             : 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 => {
+    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 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/ReferenceBadgeButton.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface ReferenceBadgeButtonProps {
+    label: string;
+    title: string;
+    ariaLabel?: string;
+    copied?: boolean;
+    disabled?: boolean;
+    className?: string;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+}
+export declare function ReferenceBadgeButton({ label, title, ariaLabel, copied, disabled, className, onClick, children, }: ReferenceBadgeButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/ReferenceBadgeButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Copy } from 'lucide-react';
+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", { children: children ?? label })] }));
+}

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

@@ -13,5 +13,11 @@ export interface TaxonomyDropdownProps {
     disabled?: boolean;
     className?: string;
     ariaLabelledBy?: string;
+    ariaLabel?: string;
+    hideSelectedLabel?: boolean;
+    hideChevron?: boolean;
+    panelClassName?: string;
+    portalPanel?: boolean;
+    panelMinWidth?: number;
 }
-export declare function TaxonomyDropdown({ value, options, onChange, placeholder, required, disabled, className, ariaLabelledBy }: TaxonomyDropdownProps): import("react/jsx-runtime").JSX.Element;
+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;

package/dist/components/ui/TaxonomyDropdown.js

@@ -1,14 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import * as Icons from 'lucide-react';
 import { ChevronDown, HelpCircle } from 'lucide-react';
-import styles from '../../Taskforce.module.css';
+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 }) {
+export function TaxonomyDropdown({ value, options, onChange, placeholder = 'Select...', required = false, disabled = false, className = '', ariaLabelledBy, ariaLabel, hideSelectedLabel = false, hideChevron = false, panelClassName = '', portalPanel = false, panelMinWidth }) {
     const [isOpen, setIsOpen] = useState(false);
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [panelPosition, setPanelPosition] = useState({});
     const dropdownRef = useRef(null);
     const buttonRef = useRef(null);
+    const panelRef = useRef(null);
     // Find the currently selected option
     const selectedOption = options.find(opt => String(opt.value) === String(value));
     // Close dropdown when clicking outside
@@ -16,7 +19,10 @@ export function TaxonomyDropdown({ value, options, onChange, placeholder = 'Sele
         if (!isOpen)
             return;
         const handleClickOutside = (event) => {
-            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+            const target = event.target;
+            const clickedInsideTrigger = Boolean(dropdownRef.current?.contains(target));
+            const clickedInsidePanel = Boolean(panelRef.current?.contains(target));
+            if (!clickedInsideTrigger && !clickedInsidePanel) {
                 setIsOpen(false);
                 setHighlightedIndex(-1);
             }
@@ -35,6 +41,33 @@ export function TaxonomyDropdown({ value, options, onChange, placeholder = 'Sele
             setHighlightedIndex(currentIndex >= 0 ? currentIndex : 0);
         }
     }, [isOpen, options, value]);
+    useEffect(() => {
+        if (!isOpen || !portalPanel)
+            return;
+        const updatePosition = () => {
+            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;
+            setPanelPosition({
+                position: 'fixed',
+                top,
+                left,
+                minWidth,
+                zIndex: 2000,
+            });
+        };
+        updatePosition();
+        window.addEventListener('resize', updatePosition);
+        window.addEventListener('scroll', updatePosition, true);
+        return () => {
+            window.removeEventListener('resize', updatePosition);
+            window.removeEventListener('scroll', updatePosition, true);
+        };
+    }, [isOpen, portalPanel, panelMinWidth]);
     const handleToggle = () => {
         if (!disabled) {
             setIsOpen(!isOpen);
@@ -102,14 +135,32 @@ export function TaxonomyDropdown({ value, options, onChange, placeholder = 'Sele
                 break;
         }
     };
-    const renderOptionContent = (option) => {
+    const renderOptionContent = (option, config) => {
         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 })] }));
+        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("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: (() => {
+    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: (() => {
                     if (!selectedOption)
                         return {};
                     const colorVal = selectedOption.color;
@@ -125,21 +176,5 @@ export function TaxonomyDropdown({ value, options, onChange, placeholder = 'Sele
                         '--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)));
-                }) }))] }));
+                })(), 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] }));
 }

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

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

package/dist/components/ui/TopNoticeLayer.js

@@ -0,0 +1,14 @@
+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 }) {
+    if (!notice)
+        return null;
+    const toneClass = notice.tone === 'error'
+        ? styles.topNoticeError
+        : notice.tone === 'success'
+            ? 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 }) }))] }) }));
+}

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { TopNoticeLayer } from './TopNoticeLayer';
+describe('TopNoticeLayer', () => {
+    it('renders nothing when no notice is provided', () => {
+        const { container } = render(_jsx(TopNoticeLayer, { notice: null }));
+        expect(container.firstChild).toBeNull();
+    });
+    it('renders success notices as status role', () => {
+        render(_jsx(TopNoticeLayer, { notice: { message: 'Saved', tone: 'success' } }));
+        expect(screen.getByRole('status')).toHaveTextContent('Saved');
+    });
+    it('renders error notices as alert role', () => {
+        render(_jsx(TopNoticeLayer, { notice: { message: 'Failed', tone: 'error' } }));
+        expect(screen.getByRole('alert')).toHaveTextContent('Failed');
+    });
+    it('calls dismiss handler', async () => {
+        const onDismiss = vi.fn();
+        render(_jsx(TopNoticeLayer, { notice: { message: 'Saved', tone: 'info' }, onDismiss: onDismiss }));
+        const button = screen.getByRole('button', { name: 'Dismiss notice' });
+        button.click();
+        expect(onDismiss).toHaveBeenCalledTimes(1);
+    });
+});

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { TaskforceTheme } from '../../types';
+interface AppShellHeaderProps {
+    projectName?: string | null;
+    currentWorkspaceId?: string | null;
+    brandLabel?: string;
+    runtimeMode?: 'local' | 'cloud';
+    theme?: TaskforceTheme;
+    meta?: React.ReactNode;
+    actions?: React.ReactNode;
+}
+export declare function AppShellHeader({ projectName, currentWorkspaceId, brandLabel, runtimeMode, theme, meta, actions }: AppShellHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/views/AppShellHeader.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 favicon from '../../assets/favicon/favicon.svg';
+import { DEFAULT_TASKFORCE_THEME, isLightThemeFamily } from '../../utils/theme';
+export function AppShellHeader({ projectName, currentWorkspaceId, brandLabel = 'TaskForce', runtimeMode = 'local', theme = DEFAULT_TASKFORCE_THEME, meta, actions }) {
+    const logo = isLightThemeFamily(theme) ? logoDark : logoLight;
+    return (_jsxs("div", { className: `${styles.header} ${shellStyles.standaloneHeader}`, children: [_jsxs("div", { className: `${styles.headerTitle} ${shellStyles.standaloneTitle}`, children: [_jsx("img", { src: logo, alt: "Taskforce Logo", className: styles.brandIcon, onError: (event) => {
+                            const target = event.currentTarget;
+                            if (target.src !== favicon) {
+                                target.src = favicon;
+                            }
+                            else {
+                                target.style.display = 'none';
+                            }
+                        } }), _jsx("span", { children: brandLabel }), runtimeMode === 'cloud' && (_jsx("span", { className: styles.brandCloudSuffix, children: "HQ" })), projectName && (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.projectSlash, children: "/" }), _jsx("span", { className: styles.projectName, title: currentWorkspaceId ? `Workspace ID: ${currentWorkspaceId}` : undefined, children: projectName })] })), meta] }), _jsx("div", { className: styles.headerActions, style: { gap: '16px' }, children: actions })] }));
+}

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { AppShellHeader } from './AppShellHeader';
+import logoDark from '../../assets/branding/logos/logo_dark.svg';
+describe('AppShellHeader', () => {
+    it('shows HQ suffix in cloud runtime', () => {
+        render(_jsx(AppShellHeader, { runtimeMode: "cloud" }));
+        expect(screen.getByText('TaskForce')).toBeInTheDocument();
+        expect(screen.getByText('HQ')).toBeInTheDocument();
+    });
+    it('does not show HQ suffix in local runtime', () => {
+        render(_jsx(AppShellHeader, { runtimeMode: "local" }));
+        expect(screen.getByText('TaskForce')).toBeInTheDocument();
+        expect(screen.queryByText('HQ')).not.toBeInTheDocument();
+    });
+    it('uses the dark logo for light-family themes', () => {
+        render(_jsx(AppShellHeader, { runtimeMode: "local", theme: "dawn" }));
+        expect(screen.getByAltText('Taskforce Logo')).toHaveAttribute('src', logoDark);
+    });
+});

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

@@ -0,0 +1,73 @@
+import React from 'react';
+export type BillingInterval = 'month' | 'year';
+export type BillingPricingType = 'stripe' | 'free';
+export interface PublicPricingPlan {
+    planId: string;
+    displayName: string;
+    status: string;
+    defaultVersion: {
+        planVersionId: string;
+        versionNumber: number;
+        seatLimit: number | null;
+        metadata: Record<string, unknown>;
+    } | null;
+    features: Array<{
+        featureKey: string;
+        access: string;
+        config?: Record<string, unknown>;
+    }>;
+    pricing: {
+        month: {
+            pricingType: BillingPricingType;
+            stripePriceId: string | null;
+            unitAmount: number | null;
+            currency: string | null;
+            interval: string;
+        } | null;
+        year: {
+            pricingType: BillingPricingType;
+            stripePriceId: string | null;
+            unitAmount: number | null;
+            currency: string | null;
+            interval: string;
+        } | null;
+    };
+}
+interface PricingSourceDetails {
+    environment?: string | null;
+    runtimeMode?: string | null;
+}
+export interface PlanSelectionIntent {
+    planId: string;
+    planVersionId: string;
+    interval: BillingInterval;
+    pricingType: BillingPricingType;
+    isCurrentPlan: boolean;
+}
+interface PlanComparisonPageProps {
+    heading: string;
+    subtitle?: string;
+    variant?: 'app' | 'site';
+    chrome?: React.ReactNode;
+    footer?: React.ReactNode;
+    isAuthenticated: boolean;
+    authSessionResolved?: boolean;
+    currentPlanId?: string | null;
+    currentPlanVersionId?: string | null;
+    currentEntitlementState?: string | null;
+    canManageCurrentPlan?: boolean;
+    pricingEndpoint?: string;
+    statusBanner?: {
+        type: 'success' | 'error';
+        message: string;
+    } | null;
+    onBack: () => void;
+    backLabel: string;
+    topActions?: React.ReactNode;
+    shellOwnsScroll?: boolean;
+    showPageBackButton?: boolean;
+    fallbackPricingSource?: PricingSourceDetails | null;
+    onSelectPlan: (intent: PlanSelectionIntent) => void | Promise<void>;
+}
+export declare function PlanComparisonPage({ heading, subtitle, variant, chrome, footer, isAuthenticated, authSessionResolved, currentPlanId, currentPlanVersionId, currentEntitlementState, canManageCurrentPlan, pricingEndpoint, statusBanner, onBack, backLabel, topActions, shellOwnsScroll, showPageBackButton, fallbackPricingSource, onSelectPlan }: PlanComparisonPageProps): import("react/jsx-runtime").JSX.Element;
+export {};