@nocturnium/svelte-ide 1.1.0 → 1.2.0

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

@@ -17,5 +17,6 @@ export * from './snippet-manager';
 export * from './quick-actions';
 export * from './diagnostics';
 export * from './breakpoints';
+export * from './extract-function';
 export type { Position } from './state';
 export type { Diagnostic, Range } from './quick-actions';

package/dist/components/editor/core/index.js

@@ -21,3 +21,4 @@ export * from './snippet-manager';
 export * from './quick-actions';
 export * from './diagnostics';
 export * from './breakpoints';
+export * from './extract-function';

package/dist/components/editor/core/state.d.ts

@@ -36,18 +36,38 @@ export interface Line {
     /** Tokenized content for syntax highlighting */
     tokens?: TokenizedLine;
 }
+/**
+ * A primitive document change, expressed against the document state at the
+ * moment it was applied.
+ */
+export interface HistoryChange {
+    /** Start position of the replaced range */
+    from: Position;
+    /** End position of the replaced range before the change */
+    to: Position;
+    /** Inserted text */
+    text: string;
+    /** Removed text */
+    removed: string;
+}
 /**
  * History entry for undo/redo
  */
 export interface HistoryEntry {
-    /** Document content before this change */
-    content: string;
+    /** Primitive changes in the order they were applied */
+    changes: HistoryChange[];
     /** Selection state before this change (deprecated, use cursors) */
     selection: Selection;
     /** All cursors state before this change */
     cursors?: Cursor[];
     /** Primary cursor ID */
     primaryCursorId?: string;
+    /** Selection state after this change (deprecated, use afterCursors) */
+    afterSelection: Selection;
+    /** All cursors state after this change */
+    afterCursors?: Cursor[];
+    /** Primary cursor ID after this change */
+    afterPrimaryCursorId?: string;
     /** Timestamp of the change */
     timestamp: number;
 }
@@ -289,10 +309,17 @@ export declare class EditorState {
      */
     insertTab(): void;
     /**
-     * Save current state to history with optional grouping
-     * @param changeType - Type of change for grouping consecutive edits
+     * Create or reuse a history entry for a text-editing operation.
+     */
+    private beginHistory;
+    /**
+     * Commit a history entry after its edit operation has finished.
+     */
+    private commitHistory;
+    /**
+     * Create a redo/undo entry representing the current state and inverse target.
      */
-    private saveHistory;
+    private createHistoryEntryFromCurrent;
     /**
      * Undo last change
      */
@@ -301,10 +328,16 @@ export declare class EditorState {
      * Redo last undone change
      */
     redo(): boolean;
+    private applyHistoryChanges;
+    private replaceRangeInternal;
+    private resetHistoryGrouping;
     /**
      * Deep copy a selection to prevent reference issues in history
      */
     private deepCopySelection;
+    private copyPosition;
+    private getTextInRange;
+    private positionAfterText;
     private transformCursorUpdatesForInsert;
     private transformPositionForInsert;
     private transformCursorUpdatesForDelete;

package/dist/components/editor/core/state.js

@@ -349,7 +349,7 @@ export class EditorState {
      * Insert text at all cursor positions
      */
     insert(text) {
-        this.saveHistory('insert');
+        const history = this.beginHistory('insert');
         // Get cursors in reverse order (bottom to top) to maintain position validity
         const cursors = this._cursorManager.getSortedCursorsReverse();
         // Store cursor updates to apply after all insertions
@@ -360,12 +360,12 @@ export class EditorState {
             if (!isSelectionEmpty(cursor.selection)) {
                 const start = getSelectionStart(cursor.selection);
                 const end = getSelectionEnd(cursor.selection);
-                this.deleteRangeInternal(start, end);
+                this.deleteRangeInternal(start, end, history.entry.changes);
                 this.transformCursorUpdatesForDelete(updates, start, end);
                 currentPos = start;
             }
             // Insert text
-            const newPos = this.insertAtInternal(currentPos, text);
+            const newPos = this.insertAtInternal(currentPos, text, history.entry.changes);
             this.transformCursorUpdatesForInsert(updates, currentPos, text);
             updates.push({ id: cursor.id, position: newPos });
         }
@@ -374,13 +374,22 @@ export class EditorState {
         this.emitChange({ type: 'insert', from: this.cursor, text });
         this.emitSelectionChange();
         this.emitCursorChange();
+        this.commitHistory(history, 'insert');
     }
     /**
      * Insert text at a specific position (internal, doesn't update cursor)
      * @returns New position after insert
      */
-    insertAtInternal(position, text) {
+    insertAtInternal(position, text, changes) {
         const pos = this.clampPosition(position);
+        if (changes) {
+            changes.push({
+                from: this.copyPosition(pos),
+                to: this.copyPosition(pos),
+                text,
+                removed: ''
+            });
+        }
         const line = this._lines[pos.line];
         const textLines = text.split('\n');
         if (textLines.length === 1) {
@@ -429,10 +438,11 @@ export class EditorState {
      * Insert text at a specific position (public API - single cursor)
      */
     insertAt(position, text) {
-        this.saveHistory('insert');
-        const newPos = this.insertAtInternal(position, text);
+        const history = this.beginHistory('insert');
+        const newPos = this.insertAtInternal(position, text, history.entry.changes);
         this.setCursor(newPos);
         this.emitChange({ type: 'insert', from: position, text });
+        this.commitHistory(history, 'insert');
     }
     /**
      * Delete the current selection (all cursors)
@@ -448,13 +458,13 @@ export class EditorState {
         if (!hasAnySelection) {
             return;
         }
-        this.saveHistory('delete');
+        const history = this.beginHistory('delete');
         const updates = [];
         for (const cursor of cursors) {
             if (!isSelectionEmpty(cursor.selection)) {
                 const start = getSelectionStart(cursor.selection);
                 const end = getSelectionEnd(cursor.selection);
-                this.deleteRangeInternal(start, end);
+                this.deleteRangeInternal(start, end, history.entry.changes);
                 this.transformCursorUpdatesForDelete(updates, start, end);
                 updates.push({ id: cursor.id, position: start });
             }
@@ -464,33 +474,48 @@ export class EditorState {
         this.emitChange({ type: 'delete', from: this.cursor, to: this.cursor });
         this.emitSelectionChange();
         this.emitCursorChange();
+        this.commitHistory(history, 'delete');
     }
     /**
      * Delete a range of text (internal, doesn't update cursor)
      */
-    deleteRangeInternal(from, to) {
-        if (from.line === to.line) {
+    deleteRangeInternal(from, to, changes) {
+        const start = this.clampPosition(from);
+        const end = this.clampPosition(to);
+        if (comparePositions(start, end) >= 0) {
+            return;
+        }
+        const removed = this.getTextInRange(start, end);
+        if (changes) {
+            changes.push({
+                from: this.copyPosition(start),
+                to: this.copyPosition(end),
+                text: '',
+                removed
+            });
+        }
+        if (start.line === end.line) {
             // Single line deletion
-            const line = this._lines[from.line];
-            line.text = line.text.slice(0, from.column) + line.text.slice(to.column);
+            const line = this._lines[start.line];
+            line.text = line.text.slice(0, start.column) + line.text.slice(end.column);
             // Re-tokenize to end of document so removing a multi-line construct
             // delimiter (e.g. a closing `*/`) re-propagates state to lines below.
-            this.retokenize(from.line, this._lines.length);
+            this.retokenize(start.line, this._lines.length);
         }
         else {
             // Multi-line deletion
-            const firstLine = this._lines[from.line];
-            const lastLine = this._lines[to.line];
+            const firstLine = this._lines[start.line];
+            const lastLine = this._lines[end.line];
             // Merge first and last lines
-            firstLine.text = firstLine.text.slice(0, from.column) + lastLine.text.slice(to.column);
+            firstLine.text = firstLine.text.slice(0, start.column) + lastLine.text.slice(end.column);
             // Remove intermediate lines
-            const removedCount = to.line - from.line;
-            this._lines.splice(from.line + 1, removedCount);
-            this._tokenizerStates.splice(from.line + 1, removedCount);
+            const removedCount = end.line - start.line;
+            this._lines.splice(start.line + 1, removedCount);
+            this._tokenizerStates.splice(start.line + 1, removedCount);
             // Renumber lines
-            this.renumberLines(from.line + 1);
+            this.renumberLines(start.line + 1);
             // Retokenize from affected line to end
-            this.retokenize(from.line, this._lines.length);
+            this.retokenize(start.line, this._lines.length);
         }
     }
     /**
@@ -517,35 +542,23 @@ export class EditorState {
             this.deleteSelection();
             return;
         }
-        this.saveHistory('delete');
+        const history = this.beginHistory('delete');
         const updates = [];
         for (const cursor of cursors) {
             const { line, column } = cursor.selection.head;
             if (column > 0) {
                 const from = { line, column: column - 1 };
                 const to = { line, column };
-                // Delete within line
-                const currentLine = this._lines[line];
-                currentLine.text =
-                    currentLine.text.slice(0, from.column) + currentLine.text.slice(to.column);
-                // Re-tokenize to end of document so deleting a multi-line construct
-                // delimiter re-propagates state to lines below.
-                this.retokenize(line, this._lines.length);
+                this.deleteRangeInternal(from, to, history.entry.changes);
                 this.transformCursorUpdatesForDelete(updates, from, to);
                 updates.push({ id: cursor.id, position: from });
             }
             else if (line > 0) {
                 // Join with previous line
-                const prevLine = this._lines[line - 1];
-                const currentLine = this._lines[line];
-                const newColumn = prevLine.text.length;
+                const newColumn = this._lines[line - 1].text.length;
                 const from = { line: line - 1, column: newColumn };
                 const to = { line, column: 0 };
-                prevLine.text += currentLine.text;
-                this._lines.splice(line, 1);
-                this._tokenizerStates.splice(line, 1);
-                this.renumberLines(line);
-                this.retokenize(line - 1, this._lines.length);
+                this.deleteRangeInternal(from, to, history.entry.changes);
                 this.transformCursorUpdatesForDelete(updates, from, to);
                 updates.push({ id: cursor.id, position: from });
             }
@@ -555,6 +568,7 @@ export class EditorState {
         this.emitChange({ type: 'delete', from: this.cursor, to: this.cursor });
         this.emitSelectionChange();
         this.emitCursorChange();
+        this.commitHistory(history, 'delete');
     }
     /**
      * Delete character after all cursors (delete key)
@@ -573,7 +587,7 @@ export class EditorState {
             this.deleteSelection();
             return;
         }
-        this.saveHistory('delete');
+        const history = this.beginHistory('delete');
         const updates = [];
         for (const cursor of cursors) {
             const { line, column } = cursor.selection.head;
@@ -581,25 +595,15 @@ export class EditorState {
             if (column < currentLine.text.length) {
                 const from = { line, column };
                 const to = { line, column: column + 1 };
-                // Delete within line
-                currentLine.text =
-                    currentLine.text.slice(0, from.column) + currentLine.text.slice(to.column);
-                // Re-tokenize to end of document so deleting a multi-line construct
-                // delimiter re-propagates state to lines below.
-                this.retokenize(line, this._lines.length);
+                this.deleteRangeInternal(from, to, history.entry.changes);
                 this.transformCursorUpdatesForDelete(updates, from, to);
                 updates.push({ id: cursor.id, position: from });
             }
             else if (line < this._lines.length - 1) {
                 // Join with next line
-                const nextLine = this._lines[line + 1];
                 const from = { line, column };
                 const to = { line: line + 1, column: 0 };
-                currentLine.text += nextLine.text;
-                this._lines.splice(line + 1, 1);
-                this._tokenizerStates.splice(line + 1, 1);
-                this.renumberLines(line + 1);
-                this.retokenize(line, this._lines.length);
+                this.deleteRangeInternal(from, to, history.entry.changes);
                 this.transformCursorUpdatesForDelete(updates, from, to);
                 updates.push({ id: cursor.id, position: from });
             }
@@ -609,6 +613,7 @@ export class EditorState {
         this.emitChange({ type: 'delete', from: this.cursor, to: this.cursor });
         this.emitSelectionChange();
         this.emitCursorChange();
+        this.commitHistory(history, 'delete');
     }
     /**
      * Insert a new line (enter key)
@@ -627,42 +632,73 @@ export class EditorState {
     // History (Undo/Redo)
     // ============================================
     /**
-     * Save current state to history with optional grouping
-     * @param changeType - Type of change for grouping consecutive edits
+     * Create or reuse a history entry for a text-editing operation.
      */
-    saveHistory(changeType) {
+    beginHistory(changeType) {
         const now = Date.now();
-        // Check if we should merge with the last history entry
-        const shouldMerge = changeType &&
-            changeType === this.lastHistoryType &&
+        const shouldMerge = changeType === this.lastHistoryType &&
             this._undoStack.length > 0 &&
             now - this.lastHistoryTimestamp < this.historyGroupTimeout;
-        // Save cursor state
+        if (shouldMerge) {
+            return {
+                entry: this._undoStack[this._undoStack.length - 1],
+                isNew: false
+            };
+        }
         const cursorState = this._cursorManager.clone();
-        const entry = {
-            content: this.getContent(),
-            selection: this.deepCopySelection(this.selection),
-            cursors: cursorState.cursors,
-            primaryCursorId: cursorState.primaryId,
-            timestamp: now
+        return {
+            entry: {
+                changes: [],
+                selection: this.deepCopySelection(this.selection),
+                cursors: cursorState.cursors,
+                primaryCursorId: cursorState.primaryId,
+                afterSelection: this.deepCopySelection(this.selection),
+                afterCursors: cursorState.cursors,
+                afterPrimaryCursorId: cursorState.primaryId,
+                timestamp: now
+            },
+            isNew: true
         };
-        if (shouldMerge) {
-            // Keep the original restore snapshot; only extend the group's recency.
-            this._undoStack[this._undoStack.length - 1].timestamp = now;
+    }
+    /**
+     * Commit a history entry after its edit operation has finished.
+     */
+    commitHistory(history, changeType) {
+        if (history.entry.changes.length === 0) {
+            return;
         }
-        else {
-            this._undoStack.push(entry);
-            // Limit history size
-            if (this._undoStack.length > this.maxHistorySize) {
+        const now = Date.now();
+        const cursorState = this._cursorManager.clone();
+        history.entry.afterSelection = this.deepCopySelection(this.selection);
+        history.entry.afterCursors = cursorState.cursors;
+        history.entry.afterPrimaryCursorId = cursorState.primaryId;
+        history.entry.timestamp = now;
+        if (history.isNew) {
+            this._undoStack.push(history.entry);
+            while (this._undoStack.length > this.maxHistorySize) {
                 this._undoStack.shift();
             }
         }
-        // Update grouping state
         this.lastHistoryTimestamp = now;
-        this.lastHistoryType = changeType ?? null;
-        // Clear redo stack on new edit
+        this.lastHistoryType = changeType;
         this._redoStack = [];
     }
+    /**
+     * Create a redo/undo entry representing the current state and inverse target.
+     */
+    createHistoryEntryFromCurrent(changes) {
+        const cursorState = this._cursorManager.clone();
+        return {
+            changes,
+            selection: this.deepCopySelection(this.selection),
+            cursors: cursorState.cursors,
+            primaryCursorId: cursorState.primaryId,
+            afterSelection: this.deepCopySelection(this.selection),
+            afterCursors: cursorState.cursors,
+            afterPrimaryCursorId: cursorState.primaryId,
+            timestamp: Date.now()
+        };
+    }
     /**
      * Undo last change
      */
@@ -671,17 +707,8 @@ export class EditorState {
         if (!entry) {
             return false;
         }
-        // Save current state to redo stack
-        const currentCursorState = this._cursorManager.clone();
-        this._redoStack.push({
-            content: this.getContent(),
-            selection: this.deepCopySelection(this.selection),
-            cursors: currentCursorState.cursors,
-            primaryCursorId: currentCursorState.primaryId,
-            timestamp: Date.now()
-        });
-        // Restore state
-        this.setContent(entry.content);
+        this._redoStack.push(this.createHistoryEntryFromCurrent(entry.changes));
+        this.applyHistoryChanges(entry.changes, 'undo');
         // Restore cursor state
         if (entry.cursors && entry.primaryCursorId) {
             this._cursorManager.restore(entry.cursors, entry.primaryCursorId);
@@ -690,8 +717,10 @@ export class EditorState {
             // Fallback for old history entries
             this._cursorManager.setSingleSelection(entry.selection.anchor, entry.selection.head);
         }
+        this.emitChange({ type: 'replace', from: { line: 0, column: 0 } });
         this.emitSelectionChange();
         this.emitCursorChange();
+        this.resetHistoryGrouping();
         return true;
     }
     /**
@@ -702,33 +731,53 @@ export class EditorState {
         if (!entry) {
             return false;
         }
-        // Save current state to undo stack (with size limit)
-        const currentCursorState = this._cursorManager.clone();
-        this._undoStack.push({
-            content: this.getContent(),
-            selection: this.deepCopySelection(this.selection),
-            cursors: currentCursorState.cursors,
-            primaryCursorId: currentCursorState.primaryId,
-            timestamp: Date.now()
-        });
+        const undoEntry = this.createHistoryEntryFromCurrent(entry.changes);
+        undoEntry.selection = entry.selection;
+        undoEntry.cursors = entry.cursors;
+        undoEntry.primaryCursorId = entry.primaryCursorId;
+        undoEntry.afterSelection = entry.afterSelection;
+        undoEntry.afterCursors = entry.afterCursors;
+        undoEntry.afterPrimaryCursorId = entry.afterPrimaryCursorId;
+        this._undoStack.push(undoEntry);
         // Enforce history size limit
         while (this._undoStack.length > this.maxHistorySize) {
             this._undoStack.shift();
         }
-        // Restore state
-        this.setContent(entry.content);
+        this.applyHistoryChanges(entry.changes, 'redo');
         // Restore cursor state
-        if (entry.cursors && entry.primaryCursorId) {
-            this._cursorManager.restore(entry.cursors, entry.primaryCursorId);
+        if (entry.afterCursors && entry.afterPrimaryCursorId) {
+            this._cursorManager.restore(entry.afterCursors, entry.afterPrimaryCursorId);
         }
         else {
             // Fallback for old history entries
-            this._cursorManager.setSingleSelection(entry.selection.anchor, entry.selection.head);
+            this._cursorManager.setSingleSelection(entry.afterSelection.anchor, entry.afterSelection.head);
         }
+        this.emitChange({ type: 'replace', from: { line: 0, column: 0 } });
         this.emitSelectionChange();
         this.emitCursorChange();
+        this.resetHistoryGrouping();
         return true;
     }
+    applyHistoryChanges(changes, direction) {
+        const ordered = direction === 'undo' ? [...changes].reverse() : changes;
+        for (const change of ordered) {
+            if (direction === 'redo') {
+                this.replaceRangeInternal(change.from, change.to, change.text);
+            }
+            else {
+                const insertedEnd = this.positionAfterText(change.from, change.text);
+                this.replaceRangeInternal(change.from, insertedEnd, change.removed);
+            }
+        }
+    }
+    replaceRangeInternal(from, to, text) {
+        this.deleteRangeInternal(from, to);
+        return text.length > 0 ? this.insertAtInternal(from, text) : this.clampPosition(from);
+    }
+    resetHistoryGrouping() {
+        this.lastHistoryTimestamp = 0;
+        this.lastHistoryType = null;
+    }
     /**
      * Deep copy a selection to prevent reference issues in history
      */
@@ -738,6 +787,34 @@ export class EditorState {
             head: { line: sel.head.line, column: sel.head.column }
         };
     }
+    copyPosition(pos) {
+        return { line: pos.line, column: pos.column };
+    }
+    getTextInRange(from, to) {
+        if (comparePositions(from, to) >= 0) {
+            return '';
+        }
+        if (from.line === to.line) {
+            return this._lines[from.line].text.slice(from.column, to.column);
+        }
+        const lines = [];
+        lines.push(this._lines[from.line].text.slice(from.column));
+        for (let i = from.line + 1; i < to.line; i++) {
+            lines.push(this._lines[i].text);
+        }
+        lines.push(this._lines[to.line].text.slice(0, to.column));
+        return lines.join('\n');
+    }
+    positionAfterText(from, text) {
+        const textLines = text.split('\n');
+        if (textLines.length === 1) {
+            return { line: from.line, column: from.column + text.length };
+        }
+        return {
+            line: from.line + textLines.length - 1,
+            column: textLines[textLines.length - 1].length
+        };
+    }
     transformCursorUpdatesForInsert(updates, at, text) {
         for (const update of updates) {
             update.position = this.transformPositionForInsert(update.position, at, text);

package/dist/components/editor/core/timeline.js

@@ -103,8 +103,13 @@ export class TimelineManager {
      * Capture snapshot on significant edit
      */
     captureOnEdit(content, author) {
+        const lastSnapshot = this.snapshots[this.snapshots.length - 1];
+        if (lastSnapshot?.content === content) {
+            this.lastContent = content;
+            return;
+        }
         const lineCount = content.split('\n').length;
-        const lastLineCount = this.snapshots.length > 0 ? this.snapshots[this.snapshots.length - 1].lineCount : 0;
+        const lastLineCount = this.snapshots.length > 0 ? lastSnapshot.lineCount : 0;
         const linesDiff = Math.abs(lineCount - lastLineCount);
         const timeSinceLastSnapshot = Date.now() - this.lastSnapshotTime;
         // Capture if significant change or enough time passed

package/dist/components/editor/editor-find.js

@@ -96,11 +96,23 @@ export function createEditorFind(deps) {
         const firstVisibleRow = Math.max(0, Math.floor(scrollTop / lineHeight) - 1);
         const lastVisibleRow = Math.max(0, Math.ceil((scrollTop + viewportHeight) / lineHeight) + 1);
         const rects = [];
-        for (let i = 0; i < matches.length; i++) {
+        let low = 0;
+        let high = matches.length;
+        while (low < high) {
+            const mid = Math.floor((low + high) / 2);
+            const visualRow = lineToVisualRow(matches[mid].line);
+            if (visualRow < firstVisibleRow) {
+                low = mid + 1;
+            }
+            else {
+                high = mid;
+            }
+        }
+        for (let i = low; i < matches.length; i++) {
             const match = matches[i];
             const visualRow = lineToVisualRow(match.line);
-            if (visualRow < firstVisibleRow || visualRow > lastVisibleRow)
-                continue;
+            if (visualRow > lastVisibleRow)
+                break;
             const width = (match.endColumn - match.startColumn) * charWidth;
             if (width <= 0)
                 continue;

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

@@ -16,8 +16,10 @@ export declare const tokenColors: {
     readonly number: "var(--color-nocturnium-aurora-yellow)";
     readonly keyword: "var(--color-nocturnium-aurora-purple)";
     readonly keywordControl: "var(--color-nocturnium-aurora-purple)";
+    readonly keywordOperator: "var(--color-nocturnium-aurora-purple)";
     readonly keywordDefinition: "var(--color-nocturnium-aurora-purple)";
     readonly keywordModule: "var(--color-nocturnium-aurora-purple)";
+    readonly keywordStorage: "var(--color-nocturnium-aurora-purple)";
     readonly operator: "var(--ide-text-primary)";
     readonly variable: "var(--ide-text-primary)";
     readonly variableDefinition: "var(--color-nocturnium-wave)";
@@ -26,16 +28,22 @@ export declare const tokenColors: {
     readonly functionCall: "var(--color-nocturnium-aurora-blue)";
     readonly functionDefinition: "var(--color-nocturnium-aurora-blue)";
     readonly property: "var(--color-nocturnium-wave)";
+    readonly propertyDefinition: "var(--color-nocturnium-wave)";
     readonly type: "var(--color-nocturnium-teal)";
     readonly typeClass: "var(--color-nocturnium-teal)";
+    readonly typeInterface: "var(--color-nocturnium-teal)";
+    readonly typeNamespace: "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 constantBuiltin: "var(--color-nocturnium-aurora-yellow)";
     readonly punctuation: "var(--ide-text-secondary)";
+    readonly punctuationBrace: "var(--color-nocturnium-aurora-yellow)";
     readonly tag: "var(--color-nocturnium-aurora-pink)";
     readonly tagAttribute: "var(--color-nocturnium-aurora-yellow)";
     readonly tagAttributeValue: "var(--color-nocturnium-aurora-green)";
+    readonly tagPunctuation: "var(--ide-text-secondary)";
     readonly markupHeading: "var(--color-nocturnium-aurora-blue)";
     readonly markupLink: "var(--color-nocturnium-wave)";
     readonly markupCode: "var(--color-nocturnium-aurora-green)";