@nocturnium/svelte-ide 1.0.0-rc.1

package/dist/components/editor/tokenizer/languages/svelte.js

@@ -0,0 +1,326 @@
+/**
+ * Svelte tokenizer for syntax highlighting
+ *
+ * Supports:
+ * - Template directives: {#if}, {#each}, {@html}, etc.
+ * - JavaScript expressions in curly braces
+ * - Svelte-specific attributes: bind:, on:, use:, transition:, etc.
+ * - Script and style sections
+ * - HTML template parts
+ */
+import { createTypeScriptTokenizer } from './javascript';
+import { createCSSTokenizer } from './css';
+/**
+ * Assign sequential start/end positions to tokens in document order.
+ * Token N starts where token N-1 ended, since tokens render left-to-right.
+ */
+function reindexTokens(tokens) {
+    let cursor = 0;
+    return tokens.map((t) => {
+        const start = cursor;
+        const end = start + t.text.length;
+        cursor = end;
+        return { type: t.type, text: t.text, start, end };
+    });
+}
+/**
+ * Svelte keywords and directives
+ */
+const SVELTE_BLOCK_KEYWORDS = new Set([
+    'if', 'else', 'each', 'await', 'then', 'catch', 'key', 'snippet'
+]);
+const SVELTE_TAG_KEYWORDS = new Set([
+    'html', 'debug', 'const', 'render'
+]);
+const SVELTE_ATTRIBUTE_PREFIXES = [
+    'bind:', 'on:', 'use:', 'transition:', 'in:', 'out:', 'animate:', 'let:', 'class:'
+];
+/**
+ * Svelte tokenizer
+ */
+export class SvelteTokenizer {
+    language = 'svelte';
+    tsTokenizer;
+    cssTokenizer;
+    constructor() {
+        this.tsTokenizer = createTypeScriptTokenizer();
+        this.cssTokenizer = createCSSTokenizer();
+    }
+    getInitialState() {
+        return {
+            context: 'template',
+            tagDepth: 0
+        };
+    }
+    tokenizeLine(line, lineNumber, state) {
+        const tokens = [];
+        let pos = 0;
+        // Handle script context
+        if (state.context === 'script') {
+            const closeScriptMatch = line.match(/<\/script>/i);
+            if (closeScriptMatch) {
+                // Tokenize JavaScript part
+                const scriptPart = line.substring(0, closeScriptMatch.index);
+                if (scriptPart) {
+                    const result = this.tsTokenizer.tokenizeLine(scriptPart, lineNumber, state.innerState || this.tsTokenizer.getInitialState());
+                    tokens.push(...result.tokens);
+                    state.innerState = result.state;
+                }
+                // Add closing tag
+                tokens.push({ type: 'tag.punctuation', text: '</' });
+                tokens.push({ type: 'tag.name', text: 'script' });
+                tokens.push({ type: 'tag.punctuation', text: '>' });
+                // Continue with template for remainder
+                state.context = 'template';
+                state.innerState = undefined;
+                pos = closeScriptMatch.index + closeScriptMatch[0].length;
+                if (pos < line.length) {
+                    const remaining = this.tokenizeTemplate(line.substring(pos), state);
+                    tokens.push(...remaining);
+                }
+            }
+            else {
+                // Entire line is JavaScript
+                const result = this.tsTokenizer.tokenizeLine(line, lineNumber, state.innerState || this.tsTokenizer.getInitialState());
+                tokens.push(...result.tokens);
+                state.innerState = result.state;
+            }
+            return { lineNumber, tokens: reindexTokens(tokens), text: line, state };
+        }
+        // Handle style context
+        if (state.context === 'style') {
+            const closeStyleMatch = line.match(/<\/style>/i);
+            if (closeStyleMatch) {
+                // Tokenize CSS part
+                const cssPart = line.substring(0, closeStyleMatch.index);
+                if (cssPart) {
+                    const result = this.cssTokenizer.tokenizeLine(cssPart, lineNumber, state.innerState || this.cssTokenizer.getInitialState());
+                    tokens.push(...result.tokens);
+                    state.innerState = result.state;
+                }
+                // Add closing tag
+                tokens.push({ type: 'tag.punctuation', text: '</' });
+                tokens.push({ type: 'tag.name', text: 'style' });
+                tokens.push({ type: 'tag.punctuation', text: '>' });
+                // Continue with template for remainder
+                state.context = 'template';
+                state.innerState = undefined;
+                pos = closeStyleMatch.index + closeStyleMatch[0].length;
+                if (pos < line.length) {
+                    const remaining = this.tokenizeTemplate(line.substring(pos), state);
+                    tokens.push(...remaining);
+                }
+            }
+            else {
+                // Entire line is CSS
+                const result = this.cssTokenizer.tokenizeLine(line, lineNumber, state.innerState || this.cssTokenizer.getInitialState());
+                tokens.push(...result.tokens);
+                state.innerState = result.state;
+            }
+            return { lineNumber, tokens: reindexTokens(tokens), text: line, state };
+        }
+        // Template context
+        const templateTokens = this.tokenizeTemplate(line, state);
+        tokens.push(...templateTokens);
+        return { lineNumber, tokens: reindexTokens(tokens), text: line, state };
+    }
+    tokenizeTemplate(line, state) {
+        const tokens = [];
+        let pos = 0;
+        while (pos < line.length) {
+            const char = line[pos];
+            // Check for <script> tag
+            if (line.substring(pos).match(/^<script(?:\s|>)/i)) {
+                const scriptMatch = line.substring(pos).match(/^<script(?:\s+[^>]*)?>?/i);
+                if (scriptMatch) {
+                    tokens.push(...this.tokenizeTag(scriptMatch[0]));
+                    pos += scriptMatch[0].length;
+                    if (scriptMatch[0].endsWith('>')) {
+                        state.context = 'script';
+                        state.innerState = this.tsTokenizer.getInitialState();
+                    }
+                    continue;
+                }
+            }
+            // Check for <style> tag
+            if (line.substring(pos).match(/^<style(?:\s|>)/i)) {
+                const styleMatch = line.substring(pos).match(/^<style(?:\s+[^>]*)?>?/i);
+                if (styleMatch) {
+                    tokens.push(...this.tokenizeTag(styleMatch[0]));
+                    pos += styleMatch[0].length;
+                    if (styleMatch[0].endsWith('>')) {
+                        state.context = 'style';
+                        state.innerState = this.cssTokenizer.getInitialState();
+                    }
+                    continue;
+                }
+            }
+            // Svelte template directives: {#if}, {@html}, etc.
+            if (char === '{' && pos + 1 < line.length) {
+                const nextChar = line[pos + 1];
+                if (nextChar === '#' || nextChar === '/' || nextChar === ':' || nextChar === '@') {
+                    const directiveMatch = line.substring(pos).match(/^\{([#\/:@])(\w+)(?:\s+([^}]+))?\}/);
+                    if (directiveMatch) {
+                        const [full, prefix, keyword, expression] = directiveMatch;
+                        // Opening brace
+                        tokens.push({ type: 'punctuation.brace', text: '{' });
+                        // Prefix (#, /, :, @)
+                        tokens.push({ type: 'keyword.control', text: prefix });
+                        // Keyword
+                        const isBlockKeyword = SVELTE_BLOCK_KEYWORDS.has(keyword);
+                        const isTagKeyword = SVELTE_TAG_KEYWORDS.has(keyword);
+                        if (isBlockKeyword || isTagKeyword) {
+                            tokens.push({ type: 'keyword.control', text: keyword });
+                        }
+                        else {
+                            tokens.push({ type: 'text', text: keyword });
+                        }
+                        // Expression (if any)
+                        if (expression) {
+                            tokens.push({ type: 'text', text: ' ' });
+                            tokens.push(...this.tokenizeJSExpression(expression));
+                        }
+                        // Closing brace
+                        tokens.push({ type: 'punctuation.brace', text: '}' });
+                        pos += full.length;
+                        continue;
+                    }
+                }
+                // Regular JavaScript expression
+                const exprMatch = line.substring(pos).match(/^\{([^}]+)\}/);
+                if (exprMatch) {
+                    const [full, expression] = exprMatch;
+                    tokens.push({ type: 'punctuation.brace', text: '{' });
+                    tokens.push(...this.tokenizeJSExpression(expression));
+                    tokens.push({ type: 'punctuation.brace', text: '}' });
+                    pos += full.length;
+                    continue;
+                }
+            }
+            // HTML tags
+            if (char === '<') {
+                const tagMatch = line.substring(pos).match(/^<\/?[\w-]+(?:\s+[^>]*)?>?/);
+                if (tagMatch) {
+                    tokens.push(...this.tokenizeTag(tagMatch[0]));
+                    pos += tagMatch[0].length;
+                    continue;
+                }
+            }
+            // HTML comments
+            if (line.substring(pos).startsWith('<!--')) {
+                const commentMatch = line.substring(pos).match(/^<!--.*?(?:-->|$)/);
+                if (commentMatch) {
+                    tokens.push({ type: 'comment', text: commentMatch[0] });
+                    pos += commentMatch[0].length;
+                    continue;
+                }
+            }
+            // Regular text
+            const textMatch = line.substring(pos).match(/^[^<{]+/);
+            if (textMatch) {
+                tokens.push({ type: 'text', text: textMatch[0] });
+                pos += textMatch[0].length;
+                continue;
+            }
+            // Fallback: single character
+            tokens.push({ type: 'text', text: char });
+            pos++;
+        }
+        return tokens;
+    }
+    tokenizeTag(tag) {
+        const tokens = [];
+        let pos = 0;
+        // Opening bracket
+        if (tag.startsWith('</')) {
+            tokens.push({ type: 'tag.punctuation', text: '</' });
+            pos = 2;
+        }
+        else {
+            tokens.push({ type: 'tag.punctuation', text: '<' });
+            pos = 1;
+        }
+        // Tag name
+        const nameMatch = tag.substring(pos).match(/^[\w-]+/);
+        if (nameMatch) {
+            const tagName = nameMatch[0];
+            tokens.push({ type: 'tag.name', text: tagName });
+            pos += tagName.length;
+        }
+        // Attributes
+        while (pos < tag.length) {
+            // Skip whitespace
+            const wsMatch = tag.substring(pos).match(/^\s+/);
+            if (wsMatch) {
+                tokens.push({ type: 'text', text: wsMatch[0] });
+                pos += wsMatch[0].length;
+                continue;
+            }
+            // Closing bracket
+            if (tag[pos] === '>' || tag.substring(pos).startsWith('/>')) {
+                const closing = tag.substring(pos);
+                tokens.push({ type: 'tag.punctuation', text: closing });
+                break;
+            }
+            // Attribute name
+            const attrMatch = tag.substring(pos).match(/^([\w:-]+)(?:=)?/);
+            if (attrMatch) {
+                const attrName = attrMatch[1];
+                const isSvelteAttr = SVELTE_ATTRIBUTE_PREFIXES.some(prefix => attrName.startsWith(prefix));
+                if (isSvelteAttr) {
+                    // Highlight Svelte-specific attributes
+                    const prefixMatch = SVELTE_ATTRIBUTE_PREFIXES.find(p => attrName.startsWith(p));
+                    if (prefixMatch) {
+                        tokens.push({ type: 'keyword.control', text: prefixMatch });
+                        tokens.push({ type: 'tag.attribute', text: attrName.substring(prefixMatch.length) });
+                    }
+                    else {
+                        tokens.push({ type: 'tag.attribute', text: attrName });
+                    }
+                }
+                else {
+                    tokens.push({ type: 'tag.attribute', text: attrName });
+                }
+                pos += attrName.length;
+                // Equals sign
+                if (attrMatch[0].endsWith('=')) {
+                    tokens.push({ type: 'punctuation', text: '=' });
+                    pos++;
+                    // Attribute value
+                    const valueMatch = tag.substring(pos).match(/^(?:"([^"]*)"|'([^']*)'|\{([^}]+)\})/);
+                    if (valueMatch) {
+                        if (valueMatch[0].startsWith('{')) {
+                            // JavaScript expression
+                            tokens.push({ type: 'punctuation.brace', text: '{' });
+                            tokens.push(...this.tokenizeJSExpression(valueMatch[3]));
+                            tokens.push({ type: 'punctuation.brace', text: '}' });
+                        }
+                        else {
+                            // String value
+                            const quote = valueMatch[0][0];
+                            const value = valueMatch[1] || valueMatch[2];
+                            tokens.push({ type: 'string', text: quote + value + quote });
+                        }
+                        pos += valueMatch[0].length;
+                    }
+                }
+                continue;
+            }
+            // Shouldn't reach here, but just in case
+            tokens.push({ type: 'text', text: tag[pos] });
+            pos++;
+        }
+        return tokens;
+    }
+    tokenizeJSExpression(expression) {
+        // Simple JavaScript expression tokenization
+        const result = this.tsTokenizer.tokenizeLine(expression, 1, this.tsTokenizer.getInitialState());
+        return result.tokens;
+    }
+}
+/**
+ * Create a Svelte tokenizer
+ */
+export function createSvelteTokenizer() {
+    return new SvelteTokenizer();
+}

package/dist/components/editor/tokenizer/types.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Token types for syntax highlighting
+ */
+export type TokenType = 'comment' | 'comment.line' | 'comment.block' | 'comment.doc' | 'string' | 'string.template' | 'string.regex' | 'string.escape' | 'number' | 'number.integer' | 'number.float' | 'number.hex' | 'number.binary' | 'keyword' | 'keyword.control' | 'keyword.operator' | 'keyword.definition' | 'keyword.module' | 'keyword.storage' | 'operator' | 'operator.arithmetic' | 'operator.comparison' | 'operator.logical' | 'operator.assignment' | 'variable' | 'variable.definition' | 'variable.parameter' | 'function' | 'function.definition' | 'function.call' | 'property' | 'property.definition' | 'type' | 'type.class' | 'type.interface' | 'type.namespace' | 'type.builtin' | 'constant' | 'constant.boolean' | 'constant.null' | 'constant.builtin' | 'punctuation' | 'punctuation.bracket' | 'punctuation.brace' | 'punctuation.paren' | 'punctuation.separator' | 'punctuation.accessor' | 'tag' | 'tag.name' | 'tag.attribute' | 'tag.attribute.value' | 'tag.punctuation' | 'markup.heading' | 'markup.bold' | 'markup.italic' | 'markup.link' | 'markup.code' | 'markup.quote' | 'markup.list' | 'invalid' | 'text';
+/**
+ * A single token in the tokenized output
+ */
+export interface Token {
+    /** Token type for styling */
+    type: TokenType;
+    /** The actual text content */
+    text: string;
+    /** Starting position in the line */
+    start: number;
+    /** Ending position in the line */
+    end: number;
+}
+/**
+ * A tokenized line
+ */
+export interface TokenizedLine {
+    /** Line number (1-based) */
+    lineNumber: number;
+    /** Array of tokens in the line */
+    tokens: Token[];
+    /** Raw text of the line */
+    text: string;
+    /** State to carry forward to next line (for multi-line constructs) */
+    state?: TokenizerState;
+}
+/**
+ * State carried between lines for multi-line constructs
+ */
+export interface TokenizerState {
+    /** Currently in a multi-line comment */
+    inBlockComment?: boolean;
+    /** Currently in a template literal */
+    inTemplateLiteral?: boolean;
+    /** Currently in a multi-line string */
+    inMultilineString?: boolean;
+    /** String delimiter if in string */
+    stringDelimiter?: string;
+    /** Nesting depth for template literals */
+    templateDepth?: number;
+    /** Custom state data */
+    custom?: Record<string, unknown>;
+}
+/**
+ * Language tokenizer interface
+ */
+export interface LanguageTokenizer {
+    /** Language identifier */
+    language: string;
+    /** Tokenize a single line */
+    tokenizeLine(line: string, lineNumber: number, state?: TokenizerState): TokenizedLine;
+    /** Get initial state */
+    getInitialState(): TokenizerState;
+}
+/**
+ * Token rule for regex-based tokenization
+ */
+export interface TokenRule {
+    /** Token type to assign */
+    type: TokenType;
+    /** Regex pattern to match */
+    pattern: RegExp;
+    /** Optional: next state after matching */
+    nextState?: string;
+    /** Optional: pop state after matching */
+    popState?: boolean;
+}
+/**
+ * Grammar definition for a language
+ */
+export interface LanguageGrammar {
+    /** Language identifier */
+    language: string;
+    /** File extensions */
+    extensions: string[];
+    /** Line comment prefix */
+    lineComment?: string;
+    /** Block comment start/end */
+    blockComment?: [string, string];
+    /** Token rules by state */
+    rules: Record<string, TokenRule[]>;
+}

package/dist/components/editor/tokenizer/types.js

@@ -0,0 +1,4 @@
+/**
+ * Token types for syntax highlighting
+ */
+export {};

package/dist/components/layout/IDELayout.svelte

@@ -0,0 +1,274 @@
+<script lang="ts">
+	/**
+	 * IDELayout - Main IDE layout with resizable panels
+	 *
+	 * Provides a VS Code-like layout with:
+	 * - Activity bar (left icons)
+	 * - Resizable left sidebar (file explorer, search, etc.)
+	 * - Main editor area
+	 * - Resizable right sidebar (AI panel, etc.)
+	 * - Resizable bottom panel (terminal, output, etc.)
+	 * - Status bar
+	 */
+
+	import { ResizeHandle } from '../core';
+	import {
+		getLeftSidebarVisible,
+		getLeftSidebarWidth,
+		setLeftSidebarWidth,
+		getRightSidebarVisible,
+		getRightSidebarWidth,
+		setRightSidebarWidth,
+		getBottomPanelVisible,
+		getBottomPanelHeight,
+		setBottomPanelHeight,
+		getStatusBarVisible,
+		constraints
+	} from '../../stores/layout.svelte';
+
+	interface Props {
+		/** Additional CSS class */
+		class?: string;
+	}
+
+	let { class: className = '' }: Props = $props();
+
+	// Track resize state for visual feedback
+	let isResizingLeft = $state(false);
+	let isResizingRight = $state(false);
+	let isResizingBottom = $state(false);
+</script>
+
+<div
+	class="ide-layout {className}"
+	class:ide-layout--resizing={isResizingLeft || isResizingRight || isResizingBottom}
+>
+	<!-- Top Row: Activity Bar + Content -->
+	<div class="ide-layout__row">
+		<!-- Activity Bar -->
+		<aside class="ide-layout__activity-bar">
+			<slot name="activity-bar" />
+		</aside>
+
+		<!-- Content Area: Left Sidebar + Main + Right Sidebar -->
+		<div class="ide-layout__content">
+			<!-- Left Sidebar -->
+			{#if getLeftSidebarVisible()}
+				<aside
+					class="ide-layout__sidebar ide-layout__sidebar--left"
+					class:ide-layout__sidebar--resizing={isResizingLeft}
+					style="width: {getLeftSidebarWidth()}px;"
+				>
+					<slot name="left-sidebar" />
+				</aside>
+				<ResizeHandle
+					direction="vertical"
+					position="end"
+					size={getLeftSidebarWidth()}
+					min={constraints.sidebarMinWidth}
+					max={constraints.sidebarMaxWidth}
+					onResize={setLeftSidebarWidth}
+					onResizeStart={() => (isResizingLeft = true)}
+					onResizeEnd={() => (isResizingLeft = false)}
+				/>
+			{/if}
+
+			<!-- Main Content Area -->
+			<main class="ide-layout__main">
+				<!-- Editor Area -->
+				<div class="ide-layout__editor">
+					<slot name="editor" />
+				</div>
+
+				<!-- Bottom Panel -->
+				{#if getBottomPanelVisible()}
+					<ResizeHandle
+						direction="horizontal"
+						position="start"
+						size={getBottomPanelHeight()}
+						min={constraints.panelMinHeight}
+						max={constraints.panelMaxHeight}
+						onResize={setBottomPanelHeight}
+						onResizeStart={() => (isResizingBottom = true)}
+						onResizeEnd={() => (isResizingBottom = false)}
+					/>
+					<aside
+						class="ide-layout__panel ide-layout__panel--bottom"
+						class:ide-layout__panel--resizing={isResizingBottom}
+						style="height: {getBottomPanelHeight()}px;"
+					>
+						<slot name="bottom-panel" />
+					</aside>
+				{/if}
+			</main>
+
+			<!-- Right Sidebar -->
+			{#if getRightSidebarVisible()}
+				<ResizeHandle
+					direction="vertical"
+					position="start"
+					size={getRightSidebarWidth()}
+					min={constraints.sidebarMinWidth}
+					max={constraints.sidebarMaxWidth}
+					onResize={setRightSidebarWidth}
+					onResizeStart={() => (isResizingRight = true)}
+					onResizeEnd={() => (isResizingRight = false)}
+				/>
+				<aside
+					class="ide-layout__sidebar ide-layout__sidebar--right"
+					class:ide-layout__sidebar--resizing={isResizingRight}
+					style="width: {getRightSidebarWidth()}px;"
+				>
+					<slot name="right-sidebar" />
+				</aside>
+			{/if}
+		</div>
+	</div>
+
+	<!-- Status Bar -->
+	{#if getStatusBarVisible()}
+		<footer class="ide-layout__status-bar">
+			<slot name="status-bar" />
+		</footer>
+	{/if}
+</div>
+
+<style>
+	.ide-layout {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		width: 100vw;
+		overflow: hidden;
+		background: var(--ide-bg-primary);
+	}
+
+	/* Optimize during resize - reduce reflows */
+	.ide-layout--resizing {
+		contain: layout;
+	}
+
+	/* Disable pointer events on content during resize for smoother performance */
+	.ide-layout--resizing .ide-layout__editor,
+	.ide-layout--resizing .ide-layout__panel--bottom {
+		pointer-events: none;
+	}
+
+	/* Top row: activity bar + content area */
+	.ide-layout__row {
+		display: flex;
+		flex-direction: row;
+		flex: 1;
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	.ide-layout__activity-bar {
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+		width: 48px;
+		background: var(--ide-bg-secondary);
+		border-right: 1px solid var(--ide-border);
+	}
+
+	/* Content area: sidebars + main in a row */
+	.ide-layout__content {
+		display: flex;
+		flex-direction: row;
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+	}
+
+	.ide-layout__sidebar {
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+		background: var(--ide-bg-secondary);
+		overflow: hidden;
+		/* Smooth transition when size is applied on mouse up */
+		transition: width 0.08s ease-out;
+	}
+
+	.ide-layout__sidebar--left {
+		border-right: 1px solid var(--ide-border);
+	}
+
+	.ide-layout__sidebar--right {
+		border-left: 1px solid var(--ide-border);
+	}
+
+	.ide-layout__sidebar--resizing {
+		/* Disable transition during drag for instant ghost line feedback */
+		transition: none;
+		will-change: width;
+		contain: layout style;
+	}
+
+	/* Fade/blur content during resize to hide ugly text reflow */
+	.ide-layout--resizing .ide-layout__sidebar > :global(*) {
+		opacity: 0.5;
+		filter: blur(1px);
+		transition: opacity 0.1s ease, filter 0.1s ease;
+	}
+
+	.ide-layout__main {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-width: 0;
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	.ide-layout__editor {
+		flex: 1;
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	/* Fade editor during resize */
+	.ide-layout--resizing .ide-layout__editor > :global(*) {
+		opacity: 0.7;
+		transition: opacity 0.1s ease;
+	}
+
+	.ide-layout__panel {
+		flex-shrink: 0;
+		background: var(--ide-bg-secondary);
+		overflow: hidden;
+		/* Smooth transition when size is applied on mouse up */
+		transition: height 0.08s ease-out;
+	}
+
+	.ide-layout__panel--bottom {
+		border-top: 1px solid var(--ide-border);
+	}
+
+	.ide-layout__panel--resizing {
+		/* Disable transition during drag */
+		transition: none;
+		will-change: height;
+		contain: layout style;
+	}
+
+	/* Fade panel content during resize */
+	.ide-layout--resizing .ide-layout__panel > :global(*) {
+		opacity: 0.5;
+		filter: blur(1px);
+		transition: opacity 0.1s ease, filter 0.1s ease;
+	}
+
+	.ide-layout__status-bar {
+		flex-shrink: 0;
+		height: 24px;
+		display: flex;
+		align-items: center;
+		padding: 0 var(--ide-spacing-sm);
+		background: var(--ide-bg-tertiary);
+		border-top: 1px solid var(--ide-border);
+		font-size: var(--ide-font-size-xs);
+		color: var(--ide-text-secondary);
+	}
+</style>