@wonderwhy-er/desktop-commander 0.2.39 → 0.2.40

package/dist/ui/file-preview/src/components/Toolbar.js

@@ -1,75 +0,0 @@
-import { renderToolHeader } from '../../../shared/tool-header.js';
-function inferFilePill(payload) {
-    if (payload.fileType === 'markdown') {
-        return { label: 'MD', className: 'file-pill--md' };
-    }
-    if (payload.fileType === 'html') {
-        return { label: 'HTML', className: 'file-pill--html' };
-    }
-    const extensionMatch = payload.filePath.toLowerCase().match(/\.([a-z0-9]+)$/);
-    const extension = extensionMatch ? extensionMatch[1] : 'txt';
-    if (extension === 'json') {
-        return { label: 'JSON', className: 'file-pill--json' };
-    }
-    return { label: extension.slice(0, 4).toUpperCase(), className: 'file-pill--text' };
-}
-export function renderToolbar(payload, canCopy, htmlMode, isExpanded, canOpenInFolder) {
-    const supportsPreview = payload.fileType !== 'unsupported';
-    const copyDisabled = canCopy ? '' : 'disabled';
-    const copyTitle = canCopy ? 'Copy source' : 'Copy unavailable';
-    const copyIcon = `
-      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-        <path d="M8 8h10v12H8z"></path>
-        <path d="M6 4h10v2H8v10H6z"></path>
-      </svg>
-    `;
-    const folderDisabled = canOpenInFolder ? '' : 'disabled';
-    const folderTitle = canOpenInFolder ? 'Open in folder' : 'Open in folder unavailable';
-    const folderIcon = `
-      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-        <path d="M10 4l2 2h8v12H4V4z"></path>
-      </svg>
-    `;
-    const previewIcon = isExpanded
-        ? `<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 14l5-5 5 5z"></path></svg>`
-        : `<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M7 10l5 5 5-5z"></path></svg>`;
-    const htmlModeButton = payload.fileType === 'html'
-        ? `
-          <button class="icon-button icon-button--secondary" id="toggle-html-mode" title="${htmlMode === 'rendered' ? 'Show source' : 'Show rendered'}" aria-label="${htmlMode === 'rendered' ? 'Show source' : 'Show rendered'}">
-            ${htmlMode === 'rendered'
-            ? `<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 5c5.2 0 9.3 4.4 10.6 6-1.3 1.6-5.4 6-10.6 6S2.7 12.6 1.4 11C2.7 9.4 6.8 5 12 5zm0 2.2A3.8 3.8 0 1 0 12 14.8a3.8 3.8 0 0 0 0-7.6z"></path></svg>`
-            : `<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6 2 12l6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path></svg>`}
-          </button>
-        `
-        : '';
-    const filePill = inferFilePill(payload);
-    const leadingActions = supportsPreview
-        ? `
-          <button class="icon-button" id="toggle-expand" title="${isExpanded ? 'Hide preview' : 'Show preview'}" aria-label="${isExpanded ? 'Hide preview' : 'Show preview'}">
-            ${previewIcon}
-          </button>
-        `
-        : '';
-    const trailingActions = supportsPreview
-        ? `
-          ${htmlModeButton}
-          <button class="icon-button" id="copy-source" ${copyDisabled} title="${copyTitle}" aria-label="${copyTitle}">
-            ${copyIcon}
-          </button>
-        `
-        : '';
-    return renderToolHeader({
-        pillLabel: filePill.label,
-        pillClassName: filePill.className,
-        title: payload.fileName,
-        subtitle: payload.filePath,
-        badges: [],
-        actionsHtml: `
-          ${leadingActions}
-          <button class="icon-button" id="open-in-folder" ${folderDisabled} title="${folderTitle}" aria-label="${folderTitle}">
-            ${folderIcon}
-          </button>
-          ${trailingActions}
-        `
-    });
-}

package/dist/ui/file-preview/src/components/editor-toolbar.d.ts

@@ -1,15 +0,0 @@
-/**
- * Floating formatting toolbar for the WYSIWYG markdown editor. Appears above
- * selected text and provides inline formatting: bold, italic, strikethrough,
- * code, link, text color, and font size.
- */
-export interface EditorToolbar {
-    element: HTMLElement;
-    show: (anchorRect: DOMRect, containerRect: DOMRect) => void;
-    hide: () => void;
-    destroy: () => void;
-    readonly isVisible: boolean;
-    readonly hasOpenDropdown: boolean;
-}
-export declare function createEditorToolbar(onFormatApplied?: () => void): EditorToolbar;
-export declare function handleFormatKeydown(e: KeyboardEvent): boolean;

package/dist/ui/file-preview/src/components/editor-toolbar.js

@@ -1,384 +0,0 @@
-/**
- * Floating formatting toolbar for the WYSIWYG markdown editor. Appears above
- * selected text and provides inline formatting: bold, italic, strikethrough,
- * code, link, text color, and font size.
- */
-// ---------------------------------------------------------------------------
-// Preset palettes
-// ---------------------------------------------------------------------------
-const COLORS = [
-    { label: 'Default', value: '' },
-    { label: 'Red', value: '#ef4444' },
-    { label: 'Orange', value: '#f97316' },
-    { label: 'Amber', value: '#f59e0b' },
-    { label: 'Green', value: '#22c55e' },
-    { label: 'Blue', value: '#3b82f6' },
-    { label: 'Purple', value: '#a855f7' },
-    { label: 'Pink', value: '#ec4899' },
-    { label: 'Gray', value: '#6b7280' },
-];
-const FONT_SIZES = [
-    { label: 'Small', value: '0.85em' },
-    { label: 'Normal', value: '' },
-    { label: 'Large', value: '1.25em' },
-    { label: 'X-Large', value: '1.5em' },
-];
-// ---------------------------------------------------------------------------
-// SVG icons (inline, 16×16, matching project style)
-// ---------------------------------------------------------------------------
-const ICONS = {
-    bold: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/></svg>`,
-    italic: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>`,
-    strike: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17.3 4.9c-1.2-.9-2.7-1.4-4.3-1.4-3.3 0-5 2-5 4 0 .8.2 1.5.5 2"/><path d="M5 12h14"/><path d="M6.7 19.1c1.2.9 2.7 1.4 4.3 1.4 3.3 0 5-2 5-4 0-.8-.2-1.5-.5-2"/></svg>`,
-    code: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`,
-    link: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>`,
-    color: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l5.5 14H6.5z"/><line x1="4" y1="22" x2="20" y2="22" stroke-width="3"/></svg>`,
-    fontSize: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7V4h16v3"/><path d="M12 4v16"/><path d="M8 20h8"/></svg>`,
-    chevron: `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>`,
-};
-// ---------------------------------------------------------------------------
-// Selection save/restore (needed before opening dropdowns)
-// ---------------------------------------------------------------------------
-let savedRange = null;
-function saveSelection() {
-    const sel = document.getSelection();
-    if (sel && sel.rangeCount > 0 && !sel.isCollapsed) {
-        savedRange = sel.getRangeAt(0).cloneRange();
-    }
-}
-function restoreSelection() {
-    if (!savedRange)
-        return false;
-    const sel = document.getSelection();
-    if (!sel)
-        return false;
-    sel.removeAllRanges();
-    sel.addRange(savedRange);
-    return !sel.isCollapsed;
-}
-// ---------------------------------------------------------------------------
-// Format helpers
-// ---------------------------------------------------------------------------
-/**
- * After a format command the browser typically collapses the selection.
- * Force-restore the pre-command range so the user can chain operations.
- */
-function forceReselect() {
-    // The original savedRange still points at the right text — the browser
-    // mutated the DOM in-place (bold wraps in <b>, etc.) but the range
-    // endpoints stay valid.  Re-add it.
-    restoreSelection();
-}
-function execFormat(command, value) {
-    if (!restoreSelection())
-        return;
-    document.execCommand(command, false, value);
-    forceReselect();
-}
-function wrapSelectionHtml(tag, attrs = '') {
-    if (!restoreSelection())
-        return;
-    const sel = document.getSelection();
-    if (!sel || sel.isCollapsed)
-        return;
-    const selectedText = sel.toString();
-    const html = `<${tag}${attrs ? ' ' + attrs : ''}>${escapeForInsert(selectedText)}</${tag}>`;
-    document.execCommand('insertHTML', false, html);
-    forceReselect();
-}
-function escapeForInsert(text) {
-    return text
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-}
-function applyColor(color) {
-    if (!color) {
-        execFormat('removeFormat');
-        return;
-    }
-    if (!restoreSelection())
-        return;
-    document.execCommand('foreColor', false, color);
-    forceReselect();
-}
-function applyFontSize(size) {
-    if (!size) {
-        execFormat('removeFormat');
-        return;
-    }
-    if (!restoreSelection())
-        return;
-    document.execCommand('fontSize', false, '7');
-    // Find the <font size="7"> the browser just created and swap it for a span
-    const editableRoot = document.getSelection()?.anchorNode?.parentElement?.closest('[contenteditable="true"]');
-    if (editableRoot) {
-        const fonts = editableRoot.querySelectorAll('font[size="7"]');
-        fonts.forEach(font => {
-            const span = document.createElement('span');
-            span.style.fontSize = size;
-            span.innerHTML = font.innerHTML;
-            font.replaceWith(span);
-        });
-    }
-    forceReselect();
-}
-function applyCode() {
-    wrapSelectionHtml('code');
-}
-/**
- * Link insertion via inline input (prompt() is blocked in sandboxed iframes).
- * The `linkInputContainer` ref is set by the factory below after the toolbar
- * DOM is built.
- */
-let linkInputContainer = null;
-let linkApplyCallback = null;
-function applyLink() {
-    if (!linkInputContainer)
-        return;
-    saveSelection();
-    linkInputContainer.classList.add('md-tb-link-input--visible');
-    const input = linkInputContainer.querySelector('input');
-    if (input) {
-        input.value = 'https://';
-        input.focus();
-        input.select();
-    }
-    linkApplyCallback = (url) => {
-        if (!url)
-            return;
-        restoreSelection();
-        document.execCommand('createLink', false, url);
-        forceReselect();
-    };
-}
-// ---------------------------------------------------------------------------
-// Toolbar DOM construction
-// ---------------------------------------------------------------------------
-function btn(icon, title, className = '') {
-    return `<button class="md-tb-btn ${className}" title="${title}" aria-label="${title}" type="button" tabindex="-1">${icon}</button>`;
-}
-function buildToolbarHTML() {
-    // Color swatches
-    const colorSwatches = COLORS.map(c => `<button class="md-tb-swatch${c.value === '' ? ' md-tb-swatch--default' : ''}" data-color="${c.value}" title="${c.label}" style="${c.value ? `background:${c.value}` : ''}" type="button" tabindex="-1">${c.value === '' ? '&times;' : ''}</button>`).join('');
-    // Font size options
-    const sizeOptions = FONT_SIZES.map(s => `<button class="md-tb-size-opt${s.value === '' ? ' md-tb-size-opt--active' : ''}" data-size="${s.value}" type="button" tabindex="-1">${s.label}</button>`).join('');
-    return `
-        <div class="md-tb-group">
-            ${btn(ICONS.bold, 'Bold (Ctrl+B)', 'md-tb-bold')}
-            ${btn(ICONS.italic, 'Italic (Ctrl+I)', 'md-tb-italic')}
-            ${btn(ICONS.strike, 'Strikethrough', 'md-tb-strike')}
-            ${btn(ICONS.code, 'Inline code', 'md-tb-code')}
-            ${btn(ICONS.link, 'Insert link (Ctrl+K)', 'md-tb-link')}
-        </div>
-        <div class="md-tb-sep"></div>
-        <div class="md-tb-group">
-            <div class="md-tb-dropdown">
-                <button class="md-tb-btn md-tb-color-trigger" title="Text color" aria-label="Text color" type="button" tabindex="-1">
-                    ${ICONS.color}${ICONS.chevron}
-                </button>
-                <div class="md-tb-dropdown-panel md-tb-color-panel">${colorSwatches}</div>
-            </div>
-            <div class="md-tb-dropdown">
-                <button class="md-tb-btn md-tb-size-trigger" title="Font size" aria-label="Font size" type="button" tabindex="-1">
-                    ${ICONS.fontSize}${ICONS.chevron}
-                </button>
-                <div class="md-tb-dropdown-panel md-tb-size-panel">${sizeOptions}</div>
-            </div>
-        </div>
-        <div class="md-tb-link-input">
-            <input type="text" class="md-tb-link-url" placeholder="https://" spellcheck="false" />
-            <button class="md-tb-link-apply" type="button" tabindex="-1">Go</button>
-        </div>
-    `;
-}
-export function createEditorToolbar(onFormatApplied) {
-    const el = document.createElement('div');
-    el.className = 'md-toolbar';
-    el.setAttribute('role', 'toolbar');
-    el.innerHTML = buildToolbarHTML();
-    // Wire up inline link input
-    linkInputContainer = el.querySelector('.md-tb-link-input');
-    const linkInput = el.querySelector('.md-tb-link-url');
-    const linkApplyBtn = el.querySelector('.md-tb-link-apply');
-    function commitLink() {
-        const url = linkInput?.value.trim();
-        linkInputContainer?.classList.remove('md-tb-link-input--visible');
-        if (url && linkApplyCallback) {
-            linkApplyCallback(url);
-            linkApplyCallback = null;
-        }
-    }
-    function cancelLink() {
-        linkInputContainer?.classList.remove('md-tb-link-input--visible');
-        linkApplyCallback = null;
-        restoreSelection();
-    }
-    linkApplyBtn?.addEventListener('click', commitLink);
-    linkInput?.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            commitLink();
-        }
-        if (e.key === 'Escape') {
-            e.preventDefault();
-            cancelLink();
-        }
-    });
-    let visible = false;
-    let openDropdown = null;
-    // --- Positioning ---
-    function show(anchorRect, containerRect) {
-        if (!el.parentElement)
-            return;
-        visible = true;
-        el.classList.add('md-toolbar--visible');
-        // Measure toolbar
-        const tbWidth = el.offsetWidth || 320;
-        const tbHeight = el.offsetHeight || 40;
-        // Center above selection
-        let left = anchorRect.left + anchorRect.width / 2 - tbWidth / 2 - containerRect.left;
-        let top = anchorRect.top - tbHeight - 8 - containerRect.top + (el.parentElement?.scrollTop ?? 0);
-        // Clamp horizontal
-        left = Math.max(4, Math.min(left, containerRect.width - tbWidth - 4));
-        // If not enough space above, show below
-        if (anchorRect.top - containerRect.top < tbHeight + 12) {
-            top = anchorRect.bottom + 8 - containerRect.top + (el.parentElement?.scrollTop ?? 0);
-        }
-        el.style.left = `${left}px`;
-        el.style.top = `${top}px`;
-    }
-    function hide() {
-        visible = false;
-        el.classList.remove('md-toolbar--visible');
-        closeDropdown();
-        linkInputContainer?.classList.remove('md-tb-link-input--visible');
-        linkApplyCallback = null;
-    }
-    function closeDropdown() {
-        if (openDropdown) {
-            openDropdown.classList.remove('md-tb-dropdown--open');
-            openDropdown = null;
-        }
-    }
-    function toggleDropdown(dropdown) {
-        if (openDropdown === dropdown) {
-            closeDropdown();
-            return;
-        }
-        closeDropdown();
-        saveSelection();
-        openDropdown = dropdown;
-        dropdown.classList.add('md-tb-dropdown--open');
-    }
-    // --- Event handling ---
-    el.addEventListener('mousedown', (e) => {
-        const target = e.target;
-        // Let the link URL input receive focus normally
-        if (target.closest('.md-tb-link-input'))
-            return;
-        // Save the selection NOW — at mousedown time the browser hasn't
-        // cleared it yet.  Every subsequent format operation will restore
-        // from this snapshot.
-        saveSelection();
-        // Prevent toolbar clicks from blurring the editable element
-        e.preventDefault();
-    });
-    el.addEventListener('click', (e) => {
-        const target = e.target;
-        const button = target.closest('button');
-        if (!button)
-            return;
-        // Dropdown triggers
-        const dropdown = button.closest('.md-tb-dropdown');
-        if (button.classList.contains('md-tb-color-trigger') || button.classList.contains('md-tb-size-trigger')) {
-            if (dropdown)
-                toggleDropdown(dropdown);
-            return;
-        }
-        // Color swatch
-        if (button.classList.contains('md-tb-swatch')) {
-            const color = button.dataset.color ?? '';
-            applyColor(color);
-            closeDropdown();
-            onFormatApplied?.();
-            return;
-        }
-        // Font size option
-        if (button.classList.contains('md-tb-size-opt')) {
-            const size = button.dataset.size ?? '';
-            applyFontSize(size);
-            closeDropdown();
-            onFormatApplied?.();
-            return;
-        }
-        // Inline format buttons
-        closeDropdown();
-        if (button.classList.contains('md-tb-bold')) {
-            execFormat('bold');
-        }
-        else if (button.classList.contains('md-tb-italic')) {
-            execFormat('italic');
-        }
-        else if (button.classList.contains('md-tb-strike')) {
-            execFormat('strikeThrough');
-        }
-        else if (button.classList.contains('md-tb-code')) {
-            applyCode();
-        }
-        else if (button.classList.contains('md-tb-link')) {
-            applyLink();
-        }
-        onFormatApplied?.();
-    });
-    // Close dropdown on outside click
-    function handleDocClick(e) {
-        if (openDropdown && !el.contains(e.target)) {
-            closeDropdown();
-        }
-    }
-    document.addEventListener('click', handleDocClick);
-    function destroy() {
-        document.removeEventListener('click', handleDocClick);
-        el.remove();
-    }
-    return {
-        element: el,
-        show,
-        hide,
-        destroy,
-        get isVisible() { return visible; },
-        get hasOpenDropdown() { return openDropdown !== null; },
-    };
-}
-// ---------------------------------------------------------------------------
-// Keyboard shortcut handler (call from within contentEditable keydown)
-// ---------------------------------------------------------------------------
-export function handleFormatKeydown(e) {
-    const mod = e.metaKey || e.ctrlKey;
-    if (!mod)
-        return false;
-    switch (e.key.toLowerCase()) {
-        case 'b':
-            e.preventDefault();
-            saveSelection();
-            execFormat('bold');
-            return true;
-        case 'i':
-            e.preventDefault();
-            saveSelection();
-            execFormat('italic');
-            return true;
-        case 'k':
-            e.preventDefault();
-            applyLink();
-            return true;
-        case 'e':
-            e.preventDefault();
-            saveSelection();
-            applyCode();
-            return true;
-        default:
-            return false;
-    }
-}

package/dist/ui/file-preview/src/components/markdown-editor.d.ts

@@ -1,29 +0,0 @@
-export interface MarkdownBlock {
-    type: 'heading' | 'paragraph' | 'list' | 'code' | 'blockquote' | 'hr' | 'table';
-    source: string;
-    startLine: number;
-    endLine: number;
-    level?: number;
-    listType?: 'ul' | 'ol';
-    editable: boolean;
-}
-export interface EditorCallbacks {
-    callTool: (name: string, args: Record<string, unknown>) => Promise<unknown>;
-    updateContext: (text: string) => void;
-    trackEvent?: (event: string, params?: Record<string, unknown>) => void;
-}
-export interface EditorHandle {
-    /** Remove all event listeners and toolbar DOM. */
-    cleanup: () => void;
-    /** True when a block is actively being edited (contentEditable is on). */
-    isEditing: () => boolean;
-}
-export declare function parseMarkdownBlocks(source: string): MarkdownBlock[];
-export declare function renderEditableMarkdown(source: string): string;
-/**
- * Attach WYSIWYG editing handlers to editable markdown blocks inside
- * the given container. All editable blocks are contentEditable from the
- * start — users can select and type immediately without an activation
- * click. Changes are committed when focus leaves the editor.
- */
-export declare function attachEditorHandlers(container: HTMLElement, source: string, filePath: string, callbacks: EditorCallbacks): EditorHandle;