@taskforcehq/taskforce 0.3.324 → 0.3.327

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

@@ -0,0 +1,10 @@
+type DiscardChangesDialogProps = {
+    isOpen: boolean;
+    onKeepEditing: () => void;
+    onDiscard: () => void;
+    title?: string;
+    message?: string;
+    theme?: 'light' | 'dawn' | 'dark' | 'midnight';
+};
+export declare function DiscardChangesDialog({ isOpen, onKeepEditing, onDiscard, title, message, theme, }: DiscardChangesDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/DiscardChangesDialog.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangle } from 'lucide-react';
+import { Modal } from './Modal.js';
+import styles from './DiscardChangesDialog.module.css';
+export function DiscardChangesDialog({ isOpen, onKeepEditing, onDiscard, title = 'Unsaved Changes', message = 'Discard your unsaved workflow changes?', theme, }) {
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onKeepEditing, title: _jsxs("span", { className: styles.title, children: [_jsx(AlertTriangle, { size: 18 }), " ", title] }), size: "sm", closeOnOverlayClick: false, theme: theme, footer: (_jsxs("div", { className: styles.actions, children: [_jsx("button", { type: "button", className: "tf-button-secondary", onClick: onKeepEditing, "data-modal-initial-focus": true, children: "Keep Editing" }), _jsx("button", { type: "button", className: "tf-button-destructive", onClick: onDiscard, children: "Discard" })] })), children: _jsx("p", { className: styles.message, children: message }) }));
+}

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

@@ -1,12 +1,15 @@
+import React from 'react';
 interface DisclosureSectionHeaderProps {
     label: string;
     count?: number;
     showZeroCount?: boolean;
+    actions?: React.ReactNode;
     expanded: boolean;
     expandedTitle: string;
     collapsedTitle: string;
     onToggle: () => void;
     className?: string;
+    controlsId?: string;
 }
-export declare function DisclosureSectionHeader({ label, count, showZeroCount, expanded, expandedTitle, collapsedTitle, onToggle, className, }: DisclosureSectionHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function DisclosureSectionHeader({ label, count, showZeroCount, actions, expanded, expandedTitle, collapsedTitle, onToggle, className, controlsId, }: DisclosureSectionHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ui/DisclosureSectionHeader.js

@@ -1,8 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import styles from './DisclosureSectionHeader.module.css';
-export function DisclosureSectionHeader({ label, count, showZeroCount = false, expanded, expandedTitle, collapsedTitle, onToggle, className = '', }) {
+export function DisclosureSectionHeader({ label, count, showZeroCount = false, actions, expanded, expandedTitle, collapsedTitle, onToggle, className = '', controlsId, }) {
     const shouldShowCount = typeof count === 'number' && (showZeroCount || count > 0);
     const Icon = expanded ? ChevronDown : ChevronRight;
-    return (_jsxs("button", { type: "button", className: `${styles.header} ${className}`.trim(), onClick: onToggle, "aria-expanded": expanded, title: expanded ? expandedTitle : collapsedTitle, children: [_jsxs("span", { className: styles.title, children: [label, shouldShowCount ? ` (${count})` : ''] }), _jsx(Icon, { className: styles.icon, size: 14, "aria-hidden": "true" })] }));
+    return (_jsxs("div", { className: `${styles.header} ${className}`.trim(), children: [_jsxs("span", { className: styles.title, children: [label, shouldShowCount ? ` (${count})` : ''] }), actions ? _jsx("span", { className: styles.actions, children: actions }) : null, _jsx("button", { type: "button", className: `tf-control-icon ${styles.toggle}`.trim(), onClick: onToggle, "aria-expanded": expanded, "aria-controls": controlsId, "aria-label": expanded ? expandedTitle : collapsedTitle, title: expanded ? expandedTitle : collapsedTitle, children: _jsx(Icon, { size: 14, "aria-hidden": "true" }) })] }));
 }

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

@@ -2,6 +2,7 @@ import React from 'react';
 interface EditableAvatarButtonProps {
     label: string;
     imageUrl?: string | null;
+    fallbackImageUrl?: string | null;
     fallback?: React.ReactNode;
     accentColor?: string | null;
     size?: number;
@@ -11,8 +12,12 @@ interface EditableAvatarButtonProps {
     editBadgeSize?: number | string;
     editIconSize?: number;
     disabled?: boolean;
+    loading?: boolean;
+    loadingLabel?: string;
+    error?: boolean;
+    errorLabel?: string;
     className?: string;
     onClick: () => void;
 }
-export declare function EditableAvatarButton({ label, imageUrl, fallback, accentColor, size, width, height, radius, editBadgeSize, editIconSize, disabled, className, onClick, }: EditableAvatarButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditableAvatarButton({ label, imageUrl, fallbackImageUrl, fallback, accentColor, size, width, height, radius, editBadgeSize, editIconSize, disabled, loading, loadingLabel, error, errorLabel, className, onClick, }: EditableAvatarButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ui/EditableAvatarButton.js

@@ -1,18 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Pencil } from 'lucide-react';
+import { AlertTriangle, Loader2, Pencil } from 'lucide-react';
 import styles from './EditableAvatarButton.module.css';
-export function EditableAvatarButton({ label, imageUrl, fallback, accentColor, size = 52, width, height, radius, editBadgeSize, editIconSize = 16, disabled = false, className = '', onClick, }) {
-    const normalizedImageUrl = String(imageUrl || '').trim();
+import { useFallbackImageUrl } from './useFallbackImageUrl';
+export function EditableAvatarButton({ label, imageUrl, fallbackImageUrl, fallback, accentColor, size = 52, width, height, radius, editBadgeSize, editIconSize = 16, disabled = false, loading = false, loadingLabel = 'Updating profile photo', error = false, errorLabel = 'Profile photo update failed', className = '', onClick, }) {
+    const { activeImageUrl, handleImageError } = useFallbackImageUrl(imageUrl, fallbackImageUrl);
     const resolvedWidth = width ?? size;
     const resolvedHeight = height ?? size;
     const resolvedRadius = typeof radius === 'number' ? `${radius}px` : radius;
     const resolvedEditBadgeSize = typeof editBadgeSize === 'number' ? `${editBadgeSize}px` : editBadgeSize;
-    return (_jsxs("button", { type: "button", className: `${styles.editableAvatarButton} ${className}`.trim(), "aria-label": label, title: label, onClick: onClick, disabled: disabled, style: {
+    return (_jsxs("button", { type: "button", className: `${styles.editableAvatarButton} ${className}`.trim(), "aria-label": label, "aria-busy": loading, title: label, onClick: onClick, disabled: disabled, style: {
             ['--editable-avatar-size']: `${size}px`,
             ['--editable-avatar-width']: `${resolvedWidth}px`,
             ['--editable-avatar-height']: `${resolvedHeight}px`,
             ...(resolvedRadius ? { ['--editable-avatar-radius']: resolvedRadius } : {}),
             ...(resolvedEditBadgeSize ? { ['--editable-avatar-badge-size']: resolvedEditBadgeSize } : {}),
             ...(accentColor ? { ['--editable-avatar-accent']: accentColor } : {})
-        }, children: [normalizedImageUrl ? (_jsx("img", { src: normalizedImageUrl, alt: "", className: styles.editableAvatarImage })) : (_jsx("span", { className: styles.editableAvatarFallback, children: fallback })), _jsx("span", { className: styles.editableAvatarBadge, "aria-hidden": "true", children: _jsx(Pencil, { size: editIconSize }) })] }));
+        }, children: [activeImageUrl ? (_jsx("img", { src: activeImageUrl, alt: "", className: styles.editableAvatarImage, onError: handleImageError })) : (_jsx("span", { className: styles.editableAvatarFallback, children: fallback })), _jsx("span", { className: styles.editableAvatarBadge, "aria-hidden": "true", children: _jsx(Pencil, { size: editIconSize }) }), loading ? (_jsx("span", { className: styles.editableAvatarProgress, role: "status", "aria-label": loadingLabel, children: _jsx(Loader2, { size: Math.max(16, Math.round(size * 0.24)) }) })) : error ? (_jsx("span", { className: `${styles.editableAvatarProgress} ${styles.editableAvatarProgressError}`, role: "status", "aria-label": errorLabel, children: _jsx(AlertTriangle, { size: Math.max(16, Math.round(size * 0.24)) }) })) : null] }));
 }

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

@@ -1,10 +1,11 @@
 import React from 'react';
 interface HierarchyActionBadgeProps {
+    ariaExpanded?: boolean;
     ariaLabel: string;
     children: React.ReactNode;
     disabled?: boolean;
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     title: string;
 }
-export declare function HierarchyActionBadge({ ariaLabel, children, disabled, onClick, title, }: HierarchyActionBadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function HierarchyActionBadge({ ariaExpanded, ariaLabel, children, disabled, onClick, title, }: HierarchyActionBadgeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ui/HierarchyActionBadge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from '../../Taskforce.module.css';
-export function HierarchyActionBadge({ ariaLabel, children, disabled = false, onClick, title, }) {
-    return (_jsx("button", { type: "button", className: `${styles.taskIdBadge} ${styles.taskHierarchyActionBtn}`, onClick: onClick, disabled: disabled, title: title, "aria-label": ariaLabel, children: children }));
+export function HierarchyActionBadge({ ariaExpanded, ariaLabel, children, disabled = false, onClick, title, }) {
+    return (_jsx("button", { type: "button", className: `${styles.referenceBadge} ${styles.taskHierarchyActionBtn}`, onClick: onClick, disabled: disabled, title: title, "aria-label": ariaLabel, "aria-expanded": ariaExpanded, children: children }));
 }

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

@@ -1,5 +1,15 @@
-export declare const Markdown: ({ children, className, onTaskIdClick }: {
+import React from 'react';
+import { type Components } from 'react-markdown';
+import { type TaskReferenceContract } from '../../utils/taskReferences';
+import { type ImageReferenceContract } from '../../utils/imageReferences';
+export type MarkdownVariant = 'compact' | 'detail' | 'conversation' | 'document';
+export type DocumentMarkdownOverrides = Partial<Pick<Components, 'input' | 'ul' | 'ol' | 'li' | 'p'>>;
+export interface MarkdownProps {
     children: string | null | undefined;
+    variant: MarkdownVariant;
     className?: string;
-    onTaskIdClick?: (taskId: string) => void;
-}) => import("react/jsx-runtime").JSX.Element | null;
+    taskReferences?: TaskReferenceContract;
+    imageReferences?: ImageReferenceContract;
+    documentOverrides?: DocumentMarkdownOverrides;
+}
+export declare const Markdown: React.MemoExoticComponent<({ children, variant, className, taskReferences, imageReferences, documentOverrides, }: MarkdownProps) => import("react/jsx-runtime").JSX.Element | null>;

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

@@ -0,0 +1 @@
+export declare const MARKDOWN_SURFACE_FIXTURE = "# Primary heading\n\n## Secondary heading\n\nParagraph with **strong text**, _emphasis_, `inline code`, [an external link](https://example.com), and T-42.\n\n> A quoted note with LT-7.\n\n- First item\n- [x] Completed item\n- [ ] Open item\n\n| Field | Value |\n| --- | --- |\n| State | Ready |\n\n```ts\nconst ready = true;\n```\n\n![Interface preview](https://example.com/preview.png)\n\n---";

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

@@ -0,0 +1,23 @@
+export const MARKDOWN_SURFACE_FIXTURE = `# Primary heading
+
+## Secondary heading
+
+Paragraph with **strong text**, _emphasis_, \`inline code\`, [an external link](https://example.com), and T-42.
+
+> A quoted note with LT-7.
+
+- First item
+- [x] Completed item
+- [ ] Open item
+
+| Field | Value |
+| --- | --- |
+| State | Ready |
+
+\`\`\`ts
+const ready = true;
+\`\`\`
+
+![Interface preview](https://example.com/preview.png)
+
+---`;

package/dist/components/ui/Markdown.js

@@ -1,83 +1,173 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
+import rehypeSanitize from 'rehype-sanitize';
 import remarkBreaks from 'remark-breaks';
-import styles from '../../Taskforce.module.css';
-export const Markdown = ({ children, className, onTaskIdClick }) => {
+import remarkGfm from 'remark-gfm';
+import { TASK_REFERENCE_TOKEN_PATTERN, } from '../../utils/taskReferences';
+import { IMAGE_REFERENCE_TOKEN_PATTERN, } from '../../utils/imageReferences';
+import { CANONICAL_ENTITY_REFERENCE_TOKEN_PATTERN } from '../../utils/entityReferences';
+import styles from './Markdown.module.css';
+function transformSafeUrl(value) {
+    const normalized = value.trim();
+    if (!normalized)
+        return '';
+    if (/^(?:#|\/|\.\/|\.\.\/)/.test(normalized))
+        return normalized;
+    const scheme = normalized.match(/^([a-z][a-z0-9+.-]*):/i)?.[1]?.toLowerCase();
+    if (!scheme)
+        return normalized;
+    return scheme === 'http' || scheme === 'https' || scheme === 'mailto' ? normalized : '';
+}
+function isExternalUrl(value) {
+    return /^(?:https?:)?\/\//i.test(String(value || ''));
+}
+function getLanguageLabel(className) {
+    return String(className || '').match(/(?:^|\s)language-([\w-]+)/)?.[1] || '';
+}
+const MarkdownInner = ({ children, variant, className, taskReferences, imageReferences, documentOverrides, }) => {
     if (!children)
         return null;
-    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 (documentOverrides && variant !== 'document') {
+        throw new Error('documentOverrides are only supported by the document Markdown variant.');
+    }
+    const linkifyReferences = (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;
+            const tokenize = (value, pattern, resolve, render) => {
+                const matches = Array.from(value.matchAll(pattern));
+                if (!matches.length)
+                    return [value];
+                const output = [];
+                let cursor = 0;
+                matches.forEach((match, index) => {
+                    const token = match[1];
+                    const start = match.index ?? -1;
+                    if (start < cursor)
+                        return;
+                    if (start > cursor)
+                        output.push(value.slice(cursor, start));
+                    const resolved = resolve(token);
+                    output.push(resolved ? render(resolved, token, `${token}-${start}-${index}`) : token);
+                    cursor = start + token.length;
+                });
+                if (cursor < value.length)
+                    output.push(value.slice(cursor));
+                return output;
+            };
+            let output = [node];
+            if (taskReferences) {
+                output = output.flatMap((part) => typeof part === 'string'
+                    ? tokenize(part, TASK_REFERENCE_TOKEN_PATTERN, taskReferences.resolve, (taskId, token, key) => (_jsx("button", { type: "button", className: styles.taskReference, onClick: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            taskReferences.activate(taskId);
+                        }, children: token }, `task-${key}`)))
+                    : [part]);
+            }
+            if (imageReferences) {
+                output = output.flatMap((part) => typeof part === 'string'
+                    ? tokenize(part, IMAGE_REFERENCE_TOKEN_PATTERN, imageReferences.resolve, (attachment, token, key) => (_jsx("button", { type: "button", className: styles.taskReference, onClick: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            imageReferences.activate(attachment);
+                        }, children: token }, `image-${key}`)))
+                    : [part]);
+            }
+            if (taskReferences?.entityReferences) {
+                const entityReferences = taskReferences.entityReferences;
+                output = output.flatMap((part) => typeof part === 'string'
+                    ? tokenize(part, CANONICAL_ENTITY_REFERENCE_TOKEN_PATTERN, entityReferences.resolve, (reference, token, key) => (_jsx("button", { type: "button", className: styles.taskReference, title: `Open ${reference.kind} ${reference.token}`, onClick: (event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            entityReferences.activate(reference);
+                        }, children: token }, `entity-${key}`)))
+                    : [part]);
             }
-            if (cursor < node.length)
-                output.push(node.slice(cursor));
-            return output;
+            return output.length === 1 ? output[0] : output;
         }
         if (Array.isArray(node))
-            return node.map(linkifyTaskIds);
+            return node.map(linkifyReferences);
         if (!React.isValidElement(node))
             return node;
-        const type = typeof node.type === 'string' ? node.type : '';
-        if (type === 'code' || type === 'pre' || type === 'a')
+        const elementProps = node.props;
+        const type = typeof node.type === 'string' ? node.type : elementProps.node?.tagName || '';
+        if (type === 'a' || type === 'button' || type === 'code' || type === 'pre' || type === 'p')
             return node;
-        const childNodes = node.props?.children;
-        if (childNodes === undefined)
+        if (elementProps.children === undefined)
             return node;
-        return React.cloneElement(node, {}, React.Children.map(childNodes, linkifyTaskIds));
+        return React.cloneElement(node, undefined, React.Children.map(elementProps.children, linkifyReferences));
+    };
+    const renderHeading = (level, headingChildren) => {
+        const content = linkifyReferences(headingChildren);
+        if (variant === 'compact') {
+            return _jsx("div", { className: styles.compactHeading, children: content });
+        }
+        if (variant === 'conversation') {
+            return _jsx("h3", { className: styles.conversationHeading, children: content });
+        }
+        return React.createElement(`h${level}`, undefined, content);
+    };
+    const components = {
+        h1: ({ children: headingChildren }) => renderHeading(1, headingChildren),
+        h2: ({ children: headingChildren }) => renderHeading(2, headingChildren),
+        h3: ({ children: headingChildren }) => renderHeading(3, headingChildren),
+        h4: ({ children: headingChildren }) => renderHeading(4, headingChildren),
+        h5: ({ children: headingChildren }) => renderHeading(5, headingChildren),
+        h6: ({ children: headingChildren }) => renderHeading(6, headingChildren),
+        p: ({ children: paragraphChildren }) => _jsx("p", { children: linkifyReferences(paragraphChildren) }),
+        ul: ({ children: listChildren, className: listClassName, node: _node, ...props }) => (_jsx("ul", { ...props, className: `${listClassName || ''} ${String(listClassName || '').includes('contains-task-list') ? styles.taskList : ''}`.trim(), children: listChildren })),
+        ol: ({ children: listChildren, className: listClassName, node: _node, ...props }) => (_jsx("ol", { ...props, className: `${listClassName || ''} ${String(listClassName || '').includes('contains-task-list') ? styles.taskList : ''}`.trim(), children: listChildren })),
+        li: ({ children: itemChildren, className: itemClassName, node: _node, ...props }) => {
+            const isTaskItem = String(itemClassName || '').includes('task-list-item');
+            return (_jsx("li", { ...props, className: `${itemClassName || ''} ${isTaskItem ? styles.taskListItem : ''}`.trim(), children: linkifyReferences(itemChildren) }));
+        },
+        input: ({ type, checked, node: _node, ...props }) => {
+            if (type !== 'checkbox')
+                return _jsx("input", { type: type, checked: checked, readOnly: true, ...props });
+            return (_jsx("input", { ...props, type: "checkbox", checked: Boolean(checked), readOnly: true, className: styles.taskCheckbox }));
+        },
+        a: ({ href, children: linkChildren, node: _node, ...props }) => {
+            if (!href)
+                return _jsx("span", { children: linkChildren });
+            const external = isExternalUrl(href);
+            return (_jsx("a", { ...props, href: href, ...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {}), onClick: (event) => event.stopPropagation(), children: linkChildren }));
+        },
+        strong: ({ children: strongChildren }) => _jsx("strong", { children: strongChildren }),
+        em: ({ children: emphasisChildren }) => _jsx("em", { children: emphasisChildren }),
+        code: ({ children: codeChildren, className: codeClassName, node: _node, ...props }) => (_jsx("code", { className: codeClassName, ...props, children: codeChildren })),
+        pre: ({ children: preChildren }) => {
+            const codeElement = React.Children.toArray(preChildren).find(React.isValidElement);
+            const language = getLanguageLabel(codeElement?.props.className);
+            if (variant === 'compact') {
+                return (_jsxs("div", { className: styles.compactCodePreview, children: [language ? _jsx("span", { className: styles.codeLanguage, children: language }) : null, _jsx("pre", { children: preChildren })] }));
+            }
+            return _jsx("div", { className: styles.blockScroll, children: _jsx("pre", { children: preChildren }) });
+        },
+        blockquote: ({ children: quoteChildren }) => _jsx("blockquote", { children: quoteChildren }),
+        table: ({ children: tableChildren, node: _node, ...props }) => {
+            if (variant === 'compact')
+                return _jsx("span", { className: styles.contentIndicator, children: "[Table]" });
+            return (_jsx("div", { className: styles.tableScroll, role: "region", "aria-label": "Scrollable table", tabIndex: 0, children: _jsx("table", { ...props, children: tableChildren }) }));
+        },
+        img: ({ src, alt }) => {
+            const label = String(alt || '').trim();
+            if (variant === 'compact' || variant === 'conversation') {
+                if (!label)
+                    return null;
+                const indicator = `[Image: ${label}]`;
+                if (!src)
+                    return _jsx("span", { className: styles.contentIndicator, children: indicator });
+                const external = isExternalUrl(src);
+                return (_jsx("a", { href: src, className: styles.contentIndicator, ...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {}), onClick: (event) => event.stopPropagation(), children: indicator }));
+            }
+            return _jsx("img", { src: src, alt: label });
+        },
+        hr: () => variant === 'compact' ? null : _jsx("hr", {}),
     };
-    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 });
-                    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$/, '');
-                    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 }) }));
+    const resolvedComponents = variant === 'document' && documentOverrides
+        ? { ...components, ...documentOverrides }
+        : components;
+    const remarkPlugins = variant === 'document' ? [remarkGfm] : [remarkGfm, remarkBreaks];
+    return (_jsx("div", { className: `${styles.prose} ${styles[variant]} ${className || ''}`.trim(), "data-markdown-surface": variant, children: _jsx(ReactMarkdown, { skipHtml: true, remarkPlugins: remarkPlugins, rehypePlugins: [rehypeSanitize], urlTransform: transformSafeUrl, components: resolvedComponents, children: children }) }));
 };
+export const Markdown = React.memo(MarkdownInner);

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

@@ -8,10 +8,12 @@ interface ModalProps {
     size?: 'sm' | 'md' | 'mdWide' | 'lg' | 'xl' | 'full';
     theme?: 'light' | 'dawn' | 'dark' | 'midnight';
     className?: string;
+    overlayStyle?: React.CSSProperties;
     headerActions?: React.ReactNode;
     draggable?: boolean;
     isSettings?: boolean;
     closeOnOverlayClick?: boolean;
+    closeDisabled?: boolean;
 }
-export declare function Modal({ isOpen, onClose, title, children, footer, size, theme, className, headerActions, draggable, isSettings, closeOnOverlayClick }: ModalProps): React.ReactPortal | null;
+export declare function Modal({ isOpen, onClose, title, children, footer, size, theme, className, overlayStyle, headerActions, draggable, isSettings, closeOnOverlayClick, closeDisabled, }: ModalProps): React.ReactPortal | null;
 export {};

package/dist/components/ui/Modal.js

@@ -1,34 +1,100 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { useEffect, useId, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { X } from 'lucide-react';
 import styles from './Modal.module.css';
 import { useDraggable } from '../../hooks/useDraggable';
 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 openModalStack = [];
+let bodyScrollLockCount = 0;
+let bodyOverflowBeforeModal = '';
+function registerOpenModal(id) {
+    openModalStack.push(id);
+    return () => {
+        const index = openModalStack.lastIndexOf(id);
+        if (index >= 0)
+            openModalStack.splice(index, 1);
+    };
+}
+function lockBodyScroll() {
+    if (bodyScrollLockCount === 0) {
+        bodyOverflowBeforeModal = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+    }
+    bodyScrollLockCount += 1;
+    return () => {
+        bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
+        if (bodyScrollLockCount === 0) {
+            document.body.style.overflow = bodyOverflowBeforeModal;
+            bodyOverflowBeforeModal = '';
+        }
+    };
+}
+export function Modal({ isOpen, onClose, title, children, footer, size = 'md', theme = DEFAULT_TASKFORCE_THEME, className, overlayStyle, headerActions, draggable = false, isSettings = false, closeOnOverlayClick = true, closeDisabled = false, }) {
     const overlayRef = useRef(null);
+    const previouslyFocusedRef = useRef(null);
+    const onCloseRef = useRef(onClose);
+    const closeDisabledRef = useRef(closeDisabled);
+    const modalIdRef = useRef(Symbol('taskforce-modal'));
+    const titleId = useId();
     const { position, isDragging, handleMouseDown, modalRef } = useDraggable();
-    // Close on escape
+    onCloseRef.current = onClose;
+    closeDisabledRef.current = closeDisabled;
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        return registerOpenModal(modalIdRef.current);
+    }, [isOpen]);
+    // Keep keyboard focus inside the active dialog and restore it when the dialog closes.
     useEffect(() => {
         const handleKeyDown = (e) => {
-            if (e.key === 'Escape' && isOpen) {
-                onClose();
+            if (openModalStack[openModalStack.length - 1] !== modalIdRef.current)
+                return;
+            if (e.key === 'Escape' && isOpen && !closeDisabledRef.current) {
+                onCloseRef.current();
+                return;
+            }
+            if (e.key !== 'Tab' || !isOpen || !modalRef.current)
+                return;
+            const focusable = Array.from(modalRef.current.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'));
+            if (focusable.length === 0) {
+                e.preventDefault();
+                modalRef.current.focus();
+                return;
+            }
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            if (e.shiftKey && document.activeElement === first) {
+                e.preventDefault();
+                last.focus();
+            }
+            else if (!e.shiftKey && document.activeElement === last) {
+                e.preventDefault();
+                first.focus();
             }
         };
-        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 = '';
+            previouslyFocusedRef.current = document.activeElement instanceof HTMLElement
+                ? document.activeElement
+                : null;
+            window.requestAnimationFrame(() => {
+                const initialFocus = modalRef.current?.querySelector('[data-modal-initial-focus]')
+                    ?? modalRef.current?.querySelector('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])')
+                    ?? modalRef.current;
+                initialFocus?.focus();
+            });
         }
+        window.addEventListener('keydown', handleKeyDown);
         return () => {
-            document.body.style.overflow = '';
+            window.removeEventListener('keydown', handleKeyDown);
+            previouslyFocusedRef.current?.focus();
         };
+    }, [isOpen, modalRef]);
+    // Prevent body scroll when open
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        return lockBodyScroll();
     }, [isOpen]);
     if (!isOpen)
         return null;
@@ -41,11 +107,11 @@ export function Modal({ isOpen, onClose, title, children, footer, size = 'md', t
         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)
+    return createPortal(_jsx("div", { className: `${styles.overlay} ${className || ''} ${styles.overlayHighZ}`, style: overlayStyle, ref: overlayRef, onClick: (e) => {
+            if (closeOnOverlayClick && !closeDisabled && e.target === overlayRef.current)
                 onClose();
-        }, 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: {
+        }, 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 : ''}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, tabIndex: -1, "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: `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);
+            }, 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", id: titleId, children: title }), _jsxs("div", { className: styles.headerActions, children: [headerActions, _jsx("button", { className: "tf-control-icon", onClick: onClose, disabled: closeDisabled, title: "Close", "aria-label": "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,5 +1,5 @@
-import { type CSSProperties } from 'react';
-export declare function MultiSelectFilter({ label, options, selected, onChange, variant, containerStyle, }: {
+import { type CSSProperties, type ReactNode } from 'react';
+export declare function MultiSelectFilter({ label, options, selected, onChange, variant, containerStyle, renderOptionContent, searchable, searchPlaceholder, noResultsText, }: {
     label: string;
     options: {
         value: string | number;
@@ -9,4 +9,11 @@ export declare function MultiSelectFilter({ label, options, selected, onChange,
     onChange: (values: (string | number)[]) => void;
     variant?: 'label' | 'value';
     containerStyle?: CSSProperties;
+    renderOptionContent?: (option: {
+        value: string | number;
+        label: string;
+    }) => ReactNode;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    noResultsText?: string;
 }): import("react/jsx-runtime").JSX.Element;