// tools/define-ui-contract-extensions.ts — Extension UI contract generation (SPEC-014a)
// Generates UI contracts for browser extensions and IDE extensions.
const EXTENSION_CATEGORIES = new Set(['browser-extension', 'ide-extension']);
/**
 * Returns true if the project is a browser or IDE extension.
 */
export function isExtensionProject(knowledge) {
    return (knowledge.projectCategory !== undefined && EXTENSION_CATEGORIES.has(knowledge.projectCategory));
}
/**
 * Generate extension UI contract based on extension type (browser vs IDE).
 */
export function generateExtensionUIContract(screens, knowledge) {
    if (knowledge.projectCategory === 'ide-extension') {
        return generateIDEExtensionUIContract(screens, knowledge);
    }
    return generateBrowserExtensionUIContract(screens, knowledge);
}
// --- Browser Extension -------------------------------------------------------
function generateBrowserExtensionUIContract(screens, knowledge) {
    const platform = knowledge.framework ?? 'chrome';
    const platformTitle = platform.charAt(0).toUpperCase() + platform.slice(1);
    const components = buildBrowserExtensionComponents(screens);
    const lines = [
        `## Browser Extension UI Contract — ${platformTitle}`,
        '',
        '### Popup (Toolbar Icon Click)',
        ...buildPopupSection(),
        '',
        '### Options/Settings Page',
        ...buildOptionsSection(),
        '',
        '### Content Script Overlay',
        ...buildContentOverlaySection(),
        '',
        '### Toolbar Badge',
        ...buildBadgeSection(),
        '',
        '### Component Tree',
        '```json',
        JSON.stringify(components, null, 2),
        '```',
    ];
    return lines.join('\n');
}
function buildPopupSection() {
    return [
        '- **PopupContainer**: 400x600px max, no horizontal scroll',
        '- **PopupHeader**: extension name, logo, close button',
        '- **MainContent**: primary extension functionality (varies)',
        '- **Footer**: version, settings link, feedback button',
    ];
}
function buildOptionsSection() {
    return [
        '- **OptionsPage**: full page at chrome-extension://...options.html',
        '- **SettingsForm**: grouped settings with labels and descriptions',
        '- **SaveButton**: auto-save on change OR explicit save with feedback',
        '- **ResetButton**: restore defaults with confirmation dialog',
    ];
}
function buildContentOverlaySection() {
    return [
        '- **ContentOverlay**: injected div, z-index 2147483647 (max), non-blocking',
        '- **FloatingPanel**: draggable, resizable, position memory via localStorage',
        '- **HighlightLayer**: SVG overlay for element highlighting/annotation',
        '- **TooltipInjection**: contextual tooltips on target elements',
    ];
}
function buildBadgeSection() {
    return [
        '- **BadgeText**: 4-char max, auto-resize, visible on icon',
        '- **BadgeColor**: semantic colors (green=ok, red=error, orange=warning)',
        '- **IconState**: active/inactive icon variant (requires icon sizes: 16, 48, 128px)',
    ];
}
function buildBrowserExtensionComponents(screens) {
    const overlayScreens = screens.filter((s) => s.toLowerCase().includes('overlay') || s.toLowerCase().includes('content'));
    return [
        {
            name: 'BrowserExtension',
            type: 'client',
            justification: 'All extension UI runs in the browser renderer — fully client-side',
            props: [
                { name: 'type', type: 'string', required: false, description: 'Extension type identifier' },
            ],
            children: [
                {
                    name: 'Popup',
                    type: 'client',
                    justification: 'Popup rendered in isolated extension context on toolbar click',
                    props: [
                        {
                            name: 'maxWidth',
                            type: 'number',
                            required: false,
                            description: 'Max popup width in px',
                        },
                    ],
                    children: [],
                },
                {
                    name: 'OptionsPage',
                    type: 'client',
                    justification: 'Full settings page opened in a dedicated extension tab',
                    props: [
                        {
                            name: 'fullPage',
                            type: 'boolean',
                            required: false,
                            description: 'Renders as full browser tab',
                        },
                    ],
                    children: [],
                },
                {
                    name: 'ContentScript',
                    type: 'client',
                    justification: 'Injected overlay runs in the host page renderer context',
                    props: [
                        {
                            name: 'injected',
                            type: 'boolean',
                            required: false,
                            description: 'True when injected into host page',
                        },
                    ],
                    children: overlayScreens.map((s) => ({
                        name: s,
                        type: 'client',
                        justification: 'Content script component injected into the host page DOM',
                        props: [],
                        children: [],
                    })),
                },
            ],
        },
    ];
}
// --- IDE Extension -----------------------------------------------------------
function generateIDEExtensionUIContract(screens, knowledge) {
    const ide = knowledge.framework ?? 'vscode';
    const components = buildIDEExtensionComponents(screens);
    const lines = [
        `## IDE Extension UI Contract — ${ide}`,
        '',
        '### Tree View (Explorer Panel)',
        ...buildTreeViewSection(),
        '',
        '### Webview Panel',
        ...buildWebviewSection(),
        '',
        '### Status Bar Item',
        ...buildStatusBarSection(),
        '',
        '### Command Palette',
        ...buildCommandPaletteSection(),
        '',
        '### Component Tree',
        '```json',
        JSON.stringify(components, null, 2),
        '```',
    ];
    return lines.join('\n');
}
function buildTreeViewSection() {
    return [
        '- **TreeDataProvider**: implements vscode.TreeDataProvider<T>',
        '- **TreeItem**: icon, label, collapsibleState, command on click',
        '- **TreeItemContextMenu**: right-click actions per item type',
        '- **Refresh button**: in view title bar (vscode.commands.registerCommand)',
    ];
}
function buildWebviewSection() {
    return [
        '- **WebviewPanel**: vscode.window.createWebviewPanel(), retainContextWhenHidden: true',
        '- **MessageAPI**: postMessage()/onDidReceiveMessage() for bidirectional communication',
        '- **ContentSecurityPolicy**: strict CSP header in webview HTML',
        '- **ThemeSupport**: CSS variables for VS Code theme colors (--vscode-*)',
    ];
}
function buildStatusBarSection() {
    return [
        '- **StatusBarItem**: left/right alignment, priority, text with icons ($(icon-name))',
        '- **ProgressItem**: spinning indicator for async operations',
        '- **ClickCommand**: command executed on status bar item click',
    ];
}
function buildCommandPaletteSection() {
    return [
        '- **Commands**: registered in package.json contributes.commands[]',
        '- **Title format**: "Extension Name: Action Description"',
        '- **Keybindings**: optional shortcuts in package.json contributes.keybindings[]',
        '- **When clause**: conditional visibility (when: "resourceExtname == .ts")',
    ];
}
function buildIDEExtensionComponents(screens) {
    const extraScreens = screens.map((s) => ({
        name: s,
        type: 'client',
        justification: 'Custom IDE extension view rendered inside the webview',
        props: [],
        children: [],
    }));
    return [
        {
            name: 'IDEExtension',
            type: 'client',
            justification: 'IDE extension activates in the VS Code extension host — UI is client-rendered in webviews',
            props: [
                { name: 'type', type: 'string', required: false, description: 'Extension type identifier' },
            ],
            children: [
                {
                    name: 'TreeView',
                    type: 'client',
                    justification: 'Sidebar tree view registered via contributes.views in package.json',
                    props: [
                        {
                            name: 'viewId',
                            type: 'string',
                            required: true,
                            description: 'VS Code view contribution ID',
                        },
                    ],
                    children: [],
                },
                {
                    name: 'WebviewPanel',
                    type: 'client',
                    justification: 'Full webview panel for rich UI beyond VS Code native components',
                    props: [
                        {
                            name: 'retainContext',
                            type: 'boolean',
                            required: false,
                            description: 'Keep webview alive when hidden',
                        },
                    ],
                    children: [],
                },
                {
                    name: 'StatusBarItem',
                    type: 'client',
                    justification: 'Status bar entry reflecting live extension state',
                    props: [
                        {
                            name: 'alignment',
                            type: 'string',
                            required: false,
                            description: '"left" or "right" alignment in status bar',
                        },
                    ],
                    children: [],
                },
                ...extraScreens,
            ],
        },
    ];
}
//# sourceMappingURL=define-ui-contract-extensions.js.map