@nocturnium/svelte-ide 1.0.0-rc.1

package/dist/components/editor/theme.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Nocturnium theme configuration for the custom editor
+ *
+ * This module exports theme tokens and CSS variable names used by the editor.
+ * The actual styling is applied via CSS variables and token classes.
+ */
+/**
+ * Token color mappings for syntax highlighting
+ */
+export declare const tokenColors: {
+    readonly comment: "var(--ide-text-muted)";
+    readonly string: "var(--color-nocturnium-aurora-green)";
+    readonly stringTemplate: "var(--color-nocturnium-aurora-green)";
+    readonly stringRegex: "var(--color-nocturnium-aurora-pink)";
+    readonly stringEscape: "var(--color-nocturnium-aurora-yellow)";
+    readonly number: "var(--color-nocturnium-aurora-yellow)";
+    readonly keyword: "var(--color-nocturnium-aurora-purple)";
+    readonly keywordControl: "var(--color-nocturnium-aurora-purple)";
+    readonly keywordDefinition: "var(--color-nocturnium-aurora-purple)";
+    readonly keywordModule: "var(--color-nocturnium-aurora-purple)";
+    readonly operator: "var(--ide-text-primary)";
+    readonly variable: "var(--ide-text-primary)";
+    readonly variableDefinition: "var(--color-nocturnium-wave)";
+    readonly variableParameter: "color-mix(in srgb, var(--color-nocturnium-wave) 80%, var(--ide-text-muted))";
+    readonly function: "var(--color-nocturnium-aurora-blue)";
+    readonly functionCall: "var(--color-nocturnium-aurora-blue)";
+    readonly functionDefinition: "var(--color-nocturnium-aurora-blue)";
+    readonly property: "var(--color-nocturnium-wave)";
+    readonly type: "var(--color-nocturnium-teal)";
+    readonly typeClass: "var(--color-nocturnium-teal)";
+    readonly typeBuiltin: "var(--color-nocturnium-teal)";
+    readonly constant: "var(--color-nocturnium-aurora-yellow)";
+    readonly constantBoolean: "var(--color-nocturnium-aurora-yellow)";
+    readonly constantNull: "var(--color-nocturnium-aurora-yellow)";
+    readonly punctuation: "var(--ide-text-secondary)";
+    readonly tag: "var(--color-nocturnium-aurora-pink)";
+    readonly tagAttribute: "var(--color-nocturnium-aurora-yellow)";
+    readonly tagAttributeValue: "var(--color-nocturnium-aurora-green)";
+    readonly markupHeading: "var(--color-nocturnium-aurora-blue)";
+    readonly markupLink: "var(--color-nocturnium-wave)";
+    readonly markupCode: "var(--color-nocturnium-aurora-green)";
+    readonly markupQuote: "var(--ide-text-secondary)";
+    readonly markupList: "var(--color-nocturnium-ember)";
+    readonly invalid: "var(--ide-error)";
+};
+/**
+ * Editor UI colors
+ */
+export declare const editorColors: {
+    readonly background: "var(--ide-bg-primary)";
+    readonly backgroundSecondary: "var(--ide-bg-secondary)";
+    readonly backgroundElevated: "var(--ide-bg-elevated)";
+    readonly backgroundTertiary: "var(--ide-bg-tertiary)";
+    readonly text: "var(--ide-text-primary)";
+    readonly textSecondary: "var(--ide-text-secondary)";
+    readonly textMuted: "var(--ide-text-muted)";
+    readonly cursor: "var(--ide-interactive)";
+    readonly selection: "var(--ide-bg-tertiary)";
+    readonly selectionMatch: "color-mix(in srgb, var(--ide-interactive) 20%, transparent)";
+    readonly searchMatch: "color-mix(in srgb, var(--ide-warning) 30%, transparent)";
+    readonly searchMatchSelected: "color-mix(in srgb, var(--ide-interactive) 30%, transparent)";
+    readonly bracketMatch: "color-mix(in srgb, var(--ide-interactive) 30%, transparent)";
+    readonly bracketMatchOutline: "var(--ide-interactive)";
+    readonly gutter: "var(--ide-bg-secondary)";
+    readonly gutterBorder: "var(--ide-border)";
+    readonly lineNumber: "var(--ide-text-muted)";
+    readonly lineNumberActive: "var(--ide-text-secondary)";
+    readonly activeLine: "var(--ide-bg-elevated)";
+    readonly border: "var(--ide-border)";
+};
+/**
+ * Editor theme configuration
+ */
+export interface EditorTheme {
+    name: string;
+    isDark: boolean;
+    tokenColors: typeof tokenColors;
+    editorColors: typeof editorColors;
+}
+/**
+ * Default Nocturnium theme
+ */
+export declare const nocturniumTheme: EditorTheme;
+/**
+ * Get CSS custom properties for the theme
+ */
+export declare function getThemeCSS(theme?: EditorTheme): string;
+export default nocturniumTheme;

package/dist/components/editor/theme.js

@@ -0,0 +1,139 @@
+/**
+ * Nocturnium theme configuration for the custom editor
+ *
+ * This module exports theme tokens and CSS variable names used by the editor.
+ * The actual styling is applied via CSS variables and token classes.
+ */
+/**
+ * Token color mappings for syntax highlighting
+ */
+export const tokenColors = {
+    // Comments
+    comment: 'var(--ide-text-muted)',
+    // Strings
+    string: 'var(--color-nocturnium-aurora-green)',
+    stringTemplate: 'var(--color-nocturnium-aurora-green)',
+    stringRegex: 'var(--color-nocturnium-aurora-pink)',
+    stringEscape: 'var(--color-nocturnium-aurora-yellow)',
+    // Numbers
+    number: 'var(--color-nocturnium-aurora-yellow)',
+    // Keywords
+    keyword: 'var(--color-nocturnium-aurora-purple)',
+    keywordControl: 'var(--color-nocturnium-aurora-purple)',
+    keywordDefinition: 'var(--color-nocturnium-aurora-purple)',
+    keywordModule: 'var(--color-nocturnium-aurora-purple)',
+    // Operators
+    operator: 'var(--ide-text-primary)',
+    // Variables
+    variable: 'var(--ide-text-primary)',
+    variableDefinition: 'var(--color-nocturnium-wave)',
+    variableParameter: 'color-mix(in srgb, var(--color-nocturnium-wave) 80%, var(--ide-text-muted))',
+    // Functions
+    function: 'var(--color-nocturnium-aurora-blue)',
+    functionCall: 'var(--color-nocturnium-aurora-blue)',
+    functionDefinition: 'var(--color-nocturnium-aurora-blue)',
+    // Properties
+    property: 'var(--color-nocturnium-wave)',
+    // Types (distinct teal hue so types read differently from numbers/constants)
+    type: 'var(--color-nocturnium-teal)',
+    typeClass: 'var(--color-nocturnium-teal)',
+    typeBuiltin: 'var(--color-nocturnium-teal)',
+    // Constants
+    constant: 'var(--color-nocturnium-aurora-yellow)',
+    constantBoolean: 'var(--color-nocturnium-aurora-yellow)',
+    constantNull: 'var(--color-nocturnium-aurora-yellow)',
+    // Punctuation
+    punctuation: 'var(--ide-text-secondary)',
+    // Tags (HTML/XML)
+    tag: 'var(--color-nocturnium-aurora-pink)',
+    tagAttribute: 'var(--color-nocturnium-aurora-yellow)',
+    tagAttributeValue: 'var(--color-nocturnium-aurora-green)',
+    // Markup (Markdown)
+    markupHeading: 'var(--color-nocturnium-aurora-blue)',
+    markupLink: 'var(--color-nocturnium-wave)',
+    markupCode: 'var(--color-nocturnium-aurora-green)',
+    markupQuote: 'var(--ide-text-secondary)',
+    markupList: 'var(--color-nocturnium-ember)',
+    // Invalid
+    invalid: 'var(--ide-error)'
+};
+/**
+ * Editor UI colors
+ */
+export const editorColors = {
+    // Backgrounds
+    background: 'var(--ide-bg-primary)',
+    backgroundSecondary: 'var(--ide-bg-secondary)',
+    backgroundElevated: 'var(--ide-bg-elevated)',
+    backgroundTertiary: 'var(--ide-bg-tertiary)',
+    // Text
+    text: 'var(--ide-text-primary)',
+    textSecondary: 'var(--ide-text-secondary)',
+    textMuted: 'var(--ide-text-muted)',
+    // Interactive
+    cursor: 'var(--ide-interactive)',
+    selection: 'var(--ide-bg-tertiary)',
+    selectionMatch: 'color-mix(in srgb, var(--ide-interactive) 20%, transparent)',
+    // Search
+    searchMatch: 'color-mix(in srgb, var(--ide-warning) 30%, transparent)',
+    searchMatchSelected: 'color-mix(in srgb, var(--ide-interactive) 30%, transparent)',
+    // Brackets
+    bracketMatch: 'color-mix(in srgb, var(--ide-interactive) 30%, transparent)',
+    bracketMatchOutline: 'var(--ide-interactive)',
+    // Gutter
+    gutter: 'var(--ide-bg-secondary)',
+    gutterBorder: 'var(--ide-border)',
+    lineNumber: 'var(--ide-text-muted)',
+    lineNumberActive: 'var(--ide-text-secondary)',
+    // Active line
+    activeLine: 'var(--ide-bg-elevated)',
+    // Borders
+    border: 'var(--ide-border)'
+};
+/**
+ * Default Nocturnium theme
+ */
+export const nocturniumTheme = {
+    name: 'nocturnium',
+    isDark: true,
+    tokenColors,
+    editorColors
+};
+/**
+ * Get CSS custom properties for the theme
+ */
+export function getThemeCSS(theme = nocturniumTheme) {
+    return `
+		/* Token Colors */
+		--editor-token-comment: ${theme.tokenColors.comment};
+		--editor-token-string: ${theme.tokenColors.string};
+		--editor-token-number: ${theme.tokenColors.number};
+		--editor-token-keyword: ${theme.tokenColors.keyword};
+		--editor-token-operator: ${theme.tokenColors.operator};
+		--editor-token-variable: ${theme.tokenColors.variable};
+		--editor-token-function: ${theme.tokenColors.function};
+		--editor-token-property: ${theme.tokenColors.property};
+		--editor-token-type: ${theme.tokenColors.type};
+		--editor-token-constant: ${theme.tokenColors.constant};
+		--editor-token-punctuation: ${theme.tokenColors.punctuation};
+		--editor-token-tag: ${theme.tokenColors.tag};
+		--editor-token-invalid: ${theme.tokenColors.invalid};
+
+		/* Editor Colors */
+		--editor-bg: ${theme.editorColors.background};
+		--editor-bg-secondary: ${theme.editorColors.backgroundSecondary};
+		--editor-bg-elevated: ${theme.editorColors.backgroundElevated};
+		--editor-text: ${theme.editorColors.text};
+		--editor-text-secondary: ${theme.editorColors.textSecondary};
+		--editor-text-muted: ${theme.editorColors.textMuted};
+		--editor-cursor: ${theme.editorColors.cursor};
+		--editor-selection: ${theme.editorColors.selection};
+		--editor-gutter: ${theme.editorColors.gutter};
+		--editor-gutter-border: ${theme.editorColors.gutterBorder};
+		--editor-line-number: ${theme.editorColors.lineNumber};
+		--editor-line-number-active: ${theme.editorColors.lineNumberActive};
+		--editor-active-line: ${theme.editorColors.activeLine};
+		--editor-border: ${theme.editorColors.border};
+	`;
+}
+export default nocturniumTheme;

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

@@ -0,0 +1,40 @@
+/**
+ * Base tokenizer with common functionality
+ */
+import type { Token, TokenizedLine, TokenizerState, TokenType, LanguageGrammar, LanguageTokenizer } from './types';
+/**
+ * Create a token
+ */
+export declare function createToken(type: TokenType, text: string, start: number): Token;
+/**
+ * Base tokenizer class using grammar rules
+ */
+export declare class GrammarTokenizer implements LanguageTokenizer {
+    language: string;
+    private grammar;
+    constructor(grammar: LanguageGrammar);
+    getInitialState(): TokenizerState;
+    tokenizeLine(line: string, lineNumber: number, prevState?: TokenizerState): TokenizedLine;
+    private updateState;
+}
+/**
+ * Simple regex-based tokenizer for basic languages
+ */
+export declare class SimpleTokenizer implements LanguageTokenizer {
+    language: string;
+    private patterns;
+    constructor(language: string, patterns: Array<{
+        type: TokenType;
+        regex: RegExp;
+    }>);
+    getInitialState(): TokenizerState;
+    tokenizeLine(line: string, lineNumber: number, prevState?: TokenizerState): TokenizedLine;
+}
+/**
+ * Plaintext tokenizer - no highlighting
+ */
+export declare class PlaintextTokenizer implements LanguageTokenizer {
+    language: string;
+    getInitialState(): TokenizerState;
+    tokenizeLine(line: string, lineNumber: number): TokenizedLine;
+}

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

@@ -0,0 +1,203 @@
+/**
+ * Base tokenizer with common functionality
+ */
+/**
+ * Create a token
+ */
+export function createToken(type, text, start) {
+    return {
+        type,
+        text,
+        start,
+        end: start + text.length
+    };
+}
+/**
+ * Base tokenizer class using grammar rules
+ */
+export class GrammarTokenizer {
+    language;
+    grammar;
+    constructor(grammar) {
+        this.language = grammar.language;
+        this.grammar = grammar;
+    }
+    getInitialState() {
+        return {};
+    }
+    tokenizeLine(line, lineNumber, prevState) {
+        const tokens = [];
+        let pos = 0;
+        const state = { ...prevState };
+        let currentRuleSet = 'root';
+        // Determine starting rule set based on state
+        if (state.inBlockComment) {
+            currentRuleSet = 'blockComment';
+        }
+        else if (state.inTemplateLiteral) {
+            currentRuleSet = 'templateLiteral';
+        }
+        else if (state.inMultilineString) {
+            currentRuleSet = 'multilineString';
+        }
+        while (pos < line.length) {
+            const remaining = line.slice(pos);
+            let matched = false;
+            // Try to match rules in current rule set
+            const rules = this.grammar.rules[currentRuleSet] || this.grammar.rules['root'] || [];
+            for (const rule of rules) {
+                const match = remaining.match(rule.pattern);
+                if (match && match.index === 0) {
+                    const text = match[0];
+                    tokens.push(createToken(rule.type, text, pos));
+                    pos += text.length;
+                    matched = true;
+                    // Handle state transitions
+                    if (rule.nextState) {
+                        currentRuleSet = rule.nextState;
+                        this.updateState(state, rule.nextState, true);
+                    }
+                    if (rule.popState) {
+                        currentRuleSet = 'root';
+                        this.updateState(state, currentRuleSet, false);
+                    }
+                    break;
+                }
+            }
+            // No match - consume single character as text
+            if (!matched) {
+                const char = line[pos];
+                // Try to merge with previous text token
+                const lastToken = tokens[tokens.length - 1];
+                if (lastToken && lastToken.type === 'text' && lastToken.end === pos) {
+                    lastToken.text += char;
+                    lastToken.end += 1;
+                }
+                else {
+                    tokens.push(createToken('text', char, pos));
+                }
+                pos += 1;
+            }
+        }
+        // Handle empty lines
+        if (tokens.length === 0) {
+            tokens.push(createToken('text', '', 0));
+        }
+        return {
+            lineNumber,
+            tokens,
+            text: line,
+            state: { ...state }
+        };
+    }
+    updateState(state, ruleSet, entering) {
+        switch (ruleSet) {
+            case 'blockComment':
+                state.inBlockComment = entering;
+                break;
+            case 'templateLiteral':
+                state.inTemplateLiteral = entering;
+                break;
+            case 'multilineString':
+                state.inMultilineString = entering;
+                break;
+        }
+    }
+}
+/**
+ * Simple regex-based tokenizer for basic languages
+ */
+export class SimpleTokenizer {
+    language;
+    patterns;
+    constructor(language, patterns) {
+        this.language = language;
+        this.patterns = patterns;
+    }
+    getInitialState() {
+        return {};
+    }
+    tokenizeLine(line, lineNumber, prevState) {
+        const tokens = [];
+        let pos = 0;
+        const state = { ...prevState };
+        // Handle block comment continuation
+        if (state.inBlockComment) {
+            const endMatch = line.indexOf('*/');
+            if (endMatch !== -1) {
+                tokens.push(createToken('comment.block', line.slice(0, endMatch + 2), 0));
+                pos = endMatch + 2;
+                state.inBlockComment = false;
+            }
+            else {
+                tokens.push(createToken('comment.block', line, 0));
+                return { lineNumber, tokens, text: line, state };
+            }
+        }
+        while (pos < line.length) {
+            const remaining = line.slice(pos);
+            let matched = false;
+            // Check for block comment start
+            if (remaining.startsWith('/*')) {
+                const endMatch = remaining.indexOf('*/', 2);
+                if (endMatch !== -1) {
+                    const text = remaining.slice(0, endMatch + 2);
+                    tokens.push(createToken('comment.block', text, pos));
+                    pos += text.length;
+                }
+                else {
+                    tokens.push(createToken('comment.block', remaining, pos));
+                    state.inBlockComment = true;
+                    pos = line.length;
+                }
+                matched = true;
+                continue;
+            }
+            // Try each pattern
+            for (const { type, regex } of this.patterns) {
+                const match = remaining.match(regex);
+                if (match && match.index === 0) {
+                    const text = match[0];
+                    tokens.push(createToken(type, text, pos));
+                    pos += text.length;
+                    matched = true;
+                    break;
+                }
+            }
+            // No match - consume character
+            if (!matched) {
+                const char = remaining[0];
+                const lastToken = tokens[tokens.length - 1];
+                if (lastToken && lastToken.type === 'text' && lastToken.end === pos) {
+                    lastToken.text += char;
+                    lastToken.end += 1;
+                }
+                else {
+                    tokens.push(createToken('text', char, pos));
+                }
+                pos += 1;
+            }
+        }
+        if (tokens.length === 0) {
+            tokens.push(createToken('text', '', 0));
+        }
+        return { lineNumber, tokens, text: line, state };
+    }
+}
+/**
+ * Plaintext tokenizer - no highlighting
+ */
+export class PlaintextTokenizer {
+    language = 'plaintext';
+    getInitialState() {
+        return {};
+    }
+    tokenizeLine(line, lineNumber) {
+        return {
+            lineNumber,
+            tokens: [createToken('text', line, 0)],
+            text: line,
+            state: {}
+        };
+    }
+}

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

@@ -0,0 +1,56 @@
+/**
+ * Tokenizer module for syntax highlighting
+ *
+ * This module provides zero-dependency syntax highlighting through custom tokenizers.
+ * Each language has its own tokenizer that produces tokens for styling.
+ */
+export * from './types';
+export * from './base';
+export { JavaScriptTokenizer, createJavaScriptTokenizer, createTypeScriptTokenizer, createJSXTokenizer, createTSXTokenizer } from './languages/javascript';
+export { HTMLTokenizer, createHTMLTokenizer, createXMLTokenizer } from './languages/html';
+export { CSSTokenizer, createCSSTokenizer } from './languages/css';
+export { JSONTokenizer, createJSONTokenizer } from './languages/json';
+export { PythonTokenizer, createPythonTokenizer } from './languages/python';
+export { GoTokenizer, createGoTokenizer } from './languages/go';
+export { MarkdownTokenizer, createMarkdownTokenizer } from './languages/markdown';
+export { SvelteTokenizer, createSvelteTokenizer } from './languages/svelte';
+import type { LanguageTokenizer, Token, TokenizedLine, TokenizerState, TokenType } from './types';
+/**
+ * Get the canonical language name from an alias or extension
+ */
+export declare function resolveLanguage(language: string): string;
+/**
+ * Get a tokenizer for a language (with LRU cache eviction)
+ */
+export declare function getTokenizer(language: string): LanguageTokenizer;
+/**
+ * Clear the tokenizer cache (useful for testing or memory management)
+ */
+export declare function clearTokenizerCache(): void;
+/**
+ * Check if a language is supported
+ */
+export declare function isLanguageSupported(language: string): boolean;
+/**
+ * Get list of supported languages
+ */
+export declare function getSupportedLanguages(): string[];
+/**
+ * Tokenize content for a given language
+ */
+export declare function tokenize(content: string, language: string): TokenizedLine[];
+/**
+ * Get CSS class for a token type
+ * Sanitizes input to prevent XSS through class name injection
+ */
+export declare function getTokenClass(type: TokenType): string;
+/**
+ * Convert tokens to HTML spans for rendering
+ */
+export declare function tokensToHTML(tokens: Token[]): string;
+/**
+ * Escape HTML special characters
+ * Unified HTML escaping function for all editor components
+ */
+export declare function escapeHTML(text: string): string;
+export type { Token, TokenizedLine, TokenizerState, TokenType, LanguageTokenizer };