,
,
+ // , ,
, etc.). Rejects non-HTML like "".
+ const trimmed = value.trim();
+ if (
+ /^<(?:[a-zA-Z][a-zA-Z0-9-]*[\s/>]|!(?:DOCTYPE|--))/.test(trimmed) &&
+ trimmed.endsWith('>')
+ ) {
+ return {
+ 'text/html': value,
+ 'text/plain': value
+ };
+ }
+ return { 'text/plain': `'${value}'` };
+ }
+ if (typeof value === 'number' || typeof value === 'boolean') {
+ return { 'text/plain': String(value) };
+ }
+
+ // Handle Symbol
+ if (typeof value === 'symbol') {
+ return { 'text/plain': value.toString() };
+ }
+
+ // Handle BigInt
+ if (typeof value === 'bigint') {
+ return { 'text/plain': `${value.toString()}n` };
+ }
+
+ // Handle functions
+ if (typeof value === 'function') {
+ const funcString = value.toString();
+ const name = value.name || 'anonymous';
+ return {
+ 'text/plain': `[Function: ${name}]`,
+ 'text/html': `${this._escapeHtml(funcString)}
`
+ };
+ }
+
+ // Handle Error objects
+ if (this._isInstanceOfRealm(value, 'Error')) {
+ const errorValue = value as Error;
+ return {
+ 'text/plain': errorValue.stack || errorValue.toString(),
+ 'application/json': {
+ name: errorValue.name,
+ message: errorValue.message,
+ stack: errorValue.stack
+ }
+ };
+ }
+
+ // Handle Date objects
+ if (this._isInstanceOfRealm(value, 'Date')) {
+ const dateValue = value as Date;
+ return {
+ 'text/plain': dateValue.toISOString(),
+ 'application/json': dateValue.toISOString()
+ };
+ }
+
+ // Handle RegExp objects
+ if (this._isInstanceOfRealm(value, 'RegExp')) {
+ return { 'text/plain': (value as RegExp).toString() };
+ }
+
+ // Handle Map
+ if (this._isInstanceOfRealm(value, 'Map')) {
+ const mapValue = value as Map;
+ const entries = Array.from(mapValue.entries());
+ try {
+ return {
+ 'text/plain': `Map(${mapValue.size}) { ${entries.map(([k, v]) => `${String(k)} => ${String(v)}`).join(', ')} }`,
+ 'application/json': Object.fromEntries(entries)
+ };
+ } catch {
+ return { 'text/plain': `Map(${mapValue.size})` };
+ }
+ }
+
+ // Handle Set
+ if (this._isInstanceOfRealm(value, 'Set')) {
+ const setValue = value as Set;
+ const items = Array.from(setValue);
+ try {
+ return {
+ 'text/plain': `Set(${setValue.size}) { ${items.map(v => String(v)).join(', ')} }`,
+ 'application/json': items
+ };
+ } catch {
+ return { 'text/plain': `Set(${setValue.size})` };
+ }
+ }
+
+ // Handle DOM elements (Canvas, HTMLElement, etc.)
+ if (this._isDOMElement(value)) {
+ return this._getDOMElementMimeBundle(value);
+ }
+
+ // Handle arrays
+ if (Array.isArray(value)) {
+ try {
+ const preview = this._formatArrayPreview(value);
+ return {
+ 'application/json': value,
+ 'text/plain': preview
+ };
+ } catch {
+ return { 'text/plain': `Array(${value.length})` };
+ }
+ }
+
+ // Handle typed arrays
+ if (ArrayBuffer.isView(value)) {
+ const typedArray = value as unknown as { length: number };
+ return {
+ 'text/plain': `${value.constructor.name}(${typedArray.length})`
+ };
+ }
+
+ // Handle Promise (show as pending)
+ if (this._isInstanceOfRealm(value, 'Promise')) {
+ return { 'text/plain': 'Promise { }' };
+ }
+
+ // Handle generic objects
+ if (typeof value === 'object') {
+ // Check if it's already a mime bundle (has data with MIME-type keys)
+ if (value.data && typeof value.data === 'object') {
+ const dataKeys = Object.keys(value.data);
+ const hasMimeKeys = dataKeys.some(key => key.includes('/'));
+ if (hasMimeKeys) {
+ return value.data;
+ }
+ }
+
+ try {
+ const preview = this._formatObjectPreview(value);
+ return {
+ 'application/json': value,
+ 'text/plain': preview
+ };
+ } catch {
+ // Object might have circular references or be non-serializable
+ return { 'text/plain': this._formatNonSerializableObject(value) };
+ }
+ }
+
+ // Fallback
+ return { 'text/plain': String(value) };
+ }
+
+ /**
+ * Complete code at cursor position.
+ *
+ * @param codeLine - The line of code to complete.
+ * @param globalScope - The global scope for variable lookup.
+ * @returns The completion result with matches and cursor position.
+ */
+ completeLine(
+ codeLine: string,
+ globalScope: any = this._globalScope
+ ): ICompletionResult {
+ // Remove unwanted left part
+ const stopChars = ' {}()=+-*/%&|^~<>,:;!?@#';
+ let codeBegin = 0;
+ for (let i = codeLine.length - 1; i >= 0; i--) {
+ if (stopChars.includes(codeLine[i])) {
+ codeBegin = i + 1;
+ break;
+ }
+ }
+
+ const pseudoExpression = codeLine.substring(codeBegin);
+
+ // Find part right of dot/bracket
+ const expStopChars = '.]';
+ let splitPos = pseudoExpression.length;
+ let found = false;
+
+ for (let i = splitPos - 1; i >= 0; i--) {
+ if (expStopChars.includes(pseudoExpression[i])) {
+ splitPos = i;
+ found = true;
+ break;
+ }
+ }
+
+ let rootObjectStr = '';
+ let toMatch = pseudoExpression;
+ let cursorStart = codeBegin;
+
+ if (found) {
+ rootObjectStr = pseudoExpression.substring(0, splitPos);
+ toMatch = pseudoExpression.substring(splitPos + 1);
+ cursorStart += splitPos + 1;
+ }
+
+ // Find root object
+ let rootObject = globalScope;
+ if (rootObjectStr !== '') {
+ try {
+ const evalFunc = this._createScopedFunction(
+ 'scope',
+ `with(scope) { return ${rootObjectStr}; }`
+ ) as (scope: any) => any;
+ rootObject = evalFunc(globalScope);
+ } catch {
+ return {
+ matches: [],
+ cursorStart,
+ status: 'error'
+ };
+ }
+ }
+
+ // Collect all properties including from prototype chain
+ const matches = this._getAllProperties(rootObject, toMatch);
+
+ return {
+ matches,
+ cursorStart
+ };
+ }
+
+ /**
+ * Complete request with multi-line support.
+ *
+ * @param code - The full code content.
+ * @param cursorPos - The cursor position in the code.
+ * @returns The completion result with matches and cursor positions.
+ */
+ completeRequest(code: string, cursorPos: number): ICompletionResult {
+ const lines = code.split('\n');
+
+ // Find line the cursor is on
+ let lineIndex = 0;
+ let cursorPosInLine = 0;
+ let lineBegin = 0;
+
+ for (let i = 0; i < lines.length; i++) {
+ if (cursorPos >= lineBegin && cursorPos <= lineBegin + lines[i].length) {
+ lineIndex = i;
+ cursorPosInLine = cursorPos - lineBegin;
+ break;
+ }
+ lineBegin += lines[i].length + 1; // +1 for \n
+ }
+
+ const codeLine = lines[lineIndex];
+
+ const codePrefix = codeLine.slice(0, cursorPosInLine);
+ const lineRes = this.completeLine(codePrefix);
+ const matches = lineRes.matches;
+ const inLineCursorStart = lineRes.cursorStart;
+ const tail = codeLine.slice(cursorPosInLine);
+ const cursorTail = tail.match(/^[\w$]*/)?.[0] ?? '';
+
+ return {
+ matches,
+ cursorStart: lineBegin + inLineCursorStart,
+ cursorEnd: cursorPos + cursorTail.length,
+ status: lineRes.status || 'ok'
+ };
+ }
+
+ /**
+ * Clean stack trace to remove internal frames.
+ *
+ * @param error - The error with stack trace to clean.
+ * @returns The cleaned stack trace string.
+ */
+ cleanStackTrace(error: Error): string {
+ const errStackStr = error.stack || '';
+ const errStackLines = errStackStr.split('\n');
+ const usedLines: string[] = [];
+
+ for (const line of errStackLines) {
+ // Stop at internal implementation details
+ if (
+ line.includes('makeAsyncFromCode') ||
+ line.includes('new Function') ||
+ line.includes('asyncFunction')
+ ) {
+ break;
+ }
+ usedLines.push(line);
+ }
+
+ return usedLines.join('\n');
+ }
+
+ /**
+ * Check if code is syntactically complete.
+ * Used for multi-line input in console-style interfaces.
+ *
+ * @param code - The code to check.
+ * @returns The completeness status and suggested indentation.
+ */
+ isComplete(code: string): IIsCompleteResult {
+ if (code.trim().length === 0) {
+ return { status: 'complete' };
+ }
+
+ try {
+ parseScript(code, {
+ ranges: true,
+ module: true
+ });
+ return { status: 'complete' };
+ } catch (e: any) {
+ const message = e.message || '';
+
+ // Common patterns indicating incomplete code
+ const incompletePatterns = [
+ /unexpected end of input/i,
+ /unterminated string/i,
+ /unterminated template/i,
+ /unexpected token.*eof/i,
+ /expected.*but.*end/i
+ ];
+
+ for (const pattern of incompletePatterns) {
+ if (pattern.test(message)) {
+ // Determine indentation for next line
+ const lines = code.split('\n');
+ const lastLine = lines[lines.length - 1];
+ const currentIndent = lastLine.match(/^(\s*)/)?.[1] || '';
+
+ // Add more indent if we're opening a block
+ const opensBlock = /[{([]$/.test(lastLine.trim());
+ const indent = opensBlock ? currentIndent + ' ' : currentIndent;
+
+ return { status: 'incomplete', indent };
+ }
+ }
+
+ // Syntax error that's not about incompleteness
+ return { status: 'invalid' };
+ }
+ }
+
+ /**
+ * Inspect an object at the cursor position.
+ * Returns documentation/type information for tooltips.
+ *
+ * @param code - The code containing the expression to inspect.
+ * @param cursorPos - The cursor position in the code.
+ * @param detailLevel - The level of detail (0 for basic, higher for more).
+ * @returns The inspection result with documentation data.
+ */
+ inspect(
+ code: string,
+ cursorPos: number,
+ detailLevel: KernelMessage.IInspectRequestMsg['content']['detail_level'] = 0
+ ): IInspectResult {
+ // Extract the word/expression at cursor position
+ const expression = this._extractExpressionAtCursor(code, cursorPos);
+
+ if (!expression) {
+ return {
+ status: 'ok',
+ found: false,
+ data: {},
+ metadata: {}
+ };
+ }
+
+ try {
+ // Try to evaluate the expression in the global scope
+ const evalFunc = this._createScopedFunction(
+ 'scope',
+ `with(scope) { return ${expression}; }`
+ ) as (scope: any) => any;
+ const value = evalFunc(this._globalScope);
+
+ // Build inspection data
+ const inspectionData = this._buildInspectionData(
+ expression,
+ value,
+ detailLevel
+ );
+
+ return {
+ status: 'ok',
+ found: true,
+ data: inspectionData,
+ metadata: {}
+ };
+ } catch {
+ // Try to provide info even if we can't evaluate
+ return this.inspectBuiltin(expression, detailLevel);
+ }
+ }
+
+ /**
+ * Provide inspection info for built-in objects.
+ * First tries runtime lookup, then falls back to predefined docs.
+ *
+ * @param expression - The expression to look up.
+ * @param detailLevel - The level of detail requested.
+ * @returns The inspection result.
+ */
+ protected inspectBuiltin(
+ expression: string,
+ detailLevel: number
+ ): IInspectResult {
+ // First, try to find the expression in the global scope at runtime
+ const runtimeResult = this._inspectAtRuntime(expression, detailLevel);
+ if (runtimeResult.found) {
+ return runtimeResult;
+ }
+
+ // Fall back to predefined documentation
+ const doc = this.getBuiltinDocumentation(expression);
+ if (doc) {
+ return {
+ status: 'ok',
+ found: true,
+ data: {
+ 'text/plain': `${expression}: ${doc}`,
+ 'text/markdown': `**${expression}**\n\n${doc}`
+ },
+ metadata: {}
+ };
+ }
+
+ // Try to find similar names in global scope for suggestions
+ const suggestions = this._findSimilarNames(expression);
+ if (suggestions.length > 0) {
+ return {
+ status: 'ok',
+ found: true,
+ data: {
+ 'text/plain': `'${expression}' not found. Did you mean: ${suggestions.join(', ')}?`,
+ 'text/markdown': `\`${expression}\` not found.\n\n**Did you mean:**\n${suggestions.map(s => `- \`${s}\``).join('\n')}`
+ },
+ metadata: {}
+ };
+ }
+
+ return {
+ status: 'ok',
+ found: false,
+ data: {},
+ metadata: {}
+ };
+ }
+
+ /**
+ * Get predefined documentation for built-in JavaScript objects.
+ * Subclasses can override this to add domain-specific documentation.
+ *
+ * @param expression - The expression to get documentation for.
+ * @returns The documentation string, or null if not found.
+ */
+ protected getBuiltinDocumentation(expression: string): string | null {
+ // Common JavaScript built-ins documentation
+ const builtins: Record = {
+ console:
+ 'The console object provides access to the browser debugging console.',
+ Math: 'The Math object provides mathematical constants and functions.',
+ JSON: 'The JSON object provides methods for parsing and stringifying JSON.',
+ Array:
+ 'The Array object is used to store multiple values in a single variable.',
+ Object: "The Object class represents one of JavaScript's data types.",
+ String:
+ 'The String object is used to represent and manipulate a sequence of characters.',
+ Number: 'The Number object is a wrapper object for numeric values.',
+ Date: 'The Date object represents a single moment in time.',
+ Promise:
+ 'The Promise object represents the eventual completion of an async operation.',
+ Map: 'The Map object holds key-value pairs and remembers the original insertion order.',
+ Set: 'The Set object lets you store unique values of any type.'
+ };
+
+ return builtins[expression] ?? null;
+ }
+
+ /**
+ * Add code to export top-level variables to global scope.
+ */
+ private _addToGlobalThisCode(key: string, identifier = key): string {
+ // Keep declarations on both globalThis and this for compatibility with
+ // different runtime invocation paths.
+ return `globalThis["${key}"] = this["${key}"] = ${identifier};`;
+ }
+
+ /**
+ * Create a function using the runtime realm's Function constructor.
+ */
+ private _createScopedFunction(...args: string[]): JSCallable {
+ const scopeFunction = this._globalScope.Function;
+ const functionConstructor =
+ typeof scopeFunction === 'function'
+ ? (scopeFunction as FunctionConstructor)
+ : Function;
+ return functionConstructor(...args) as JSCallable;
+ }
+
+ /**
+ * Replace a section of code with new code.
+ */
+ private _replaceCode(
+ code: string,
+ start: number,
+ end: number,
+ newCode: string
+ ): string {
+ return code.substring(0, start) + newCode + code.substring(end);
+ }
+
+ /**
+ * Add top-level variables to global scope.
+ */
+ private _addToGlobalScope(ast: any): string {
+ const extraCode: string[] = [];
+
+ for (const node of ast.body) {
+ if (node.type === 'FunctionDeclaration') {
+ const name = node.id.name;
+ extraCode.push(this._addToGlobalThisCode(name));
+ } else if (node.type === 'ClassDeclaration') {
+ const name = node.id.name;
+ extraCode.push(this._addToGlobalThisCode(name));
+ } else if (node.type === 'VariableDeclaration') {
+ const declarations = node.declarations;
+
+ for (const declaration of declarations) {
+ const identifiers: string[] = [];
+ this._collectDeclaredIdentifiers(declaration.id, identifiers);
+ for (const name of identifiers) {
+ extraCode.push(this._addToGlobalThisCode(name));
+ }
+ }
+ }
+ }
+
+ return extraCode.join('\n');
+ }
+
+ /**
+ * Collect identifiers from a declaration pattern.
+ */
+ private _collectDeclaredIdentifiers(
+ pattern: any,
+ identifiers: string[]
+ ): void {
+ if (!pattern) {
+ return;
+ }
+
+ switch (pattern.type) {
+ case 'Identifier':
+ identifiers.push(pattern.name);
+ break;
+ case 'ObjectPattern':
+ for (const prop of pattern.properties) {
+ if (prop.type === 'Property') {
+ this._collectDeclaredIdentifiers(prop.value, identifiers);
+ } else if (prop.type === 'RestElement') {
+ this._collectDeclaredIdentifiers(prop.argument, identifiers);
+ }
+ }
+ break;
+ case 'ArrayPattern':
+ for (const element of pattern.elements) {
+ this._collectDeclaredIdentifiers(element, identifiers);
+ }
+ break;
+ case 'AssignmentPattern':
+ this._collectDeclaredIdentifiers(pattern.left, identifiers);
+ break;
+ case 'RestElement':
+ this._collectDeclaredIdentifiers(pattern.argument, identifiers);
+ break;
+ default:
+ break;
+ }
+ }
+
+ /**
+ * Handle the last statement to auto-return if it's an expression.
+ */
+ private _handleLastStatement(
+ code: string,
+ ast: any
+ ): {
+ withReturn: boolean;
+ modifiedUserCode: string;
+ extraReturnCode: string;
+ } {
+ if (ast.body.length === 0) {
+ return {
+ withReturn: false,
+ modifiedUserCode: code,
+ extraReturnCode: ''
+ };
+ }
+
+ const lastNode = ast.body[ast.body.length - 1];
+
+ // If the last node is an expression statement (and not an assignment)
+ if (
+ lastNode.type === 'ExpressionStatement' &&
+ lastNode.expression.type !== 'AssignmentExpression'
+ ) {
+ const lastNodeExprStart = lastNode.expression.start;
+ const lastNodeExprEnd = lastNode.expression.end;
+ const lastNodeRestEnd = lastNode.end;
+
+ // Check for semicolon after the expression
+ let semicolonFound = false;
+ for (let i = lastNodeExprEnd; i < lastNodeRestEnd; i++) {
+ if (code[i] === ';') {
+ semicolonFound = true;
+ break;
+ }
+ }
+
+ if (!semicolonFound) {
+ // Remove the last node from the code
+ const modifiedUserCode =
+ code.substring(0, lastNodeExprStart) +
+ code.substring(lastNodeExprEnd);
+ const codeOfLastNode = code.substring(
+ lastNodeExprStart,
+ lastNodeExprEnd
+ );
+ const extraReturnCode = `return ${codeOfLastNode};`;
+
+ return {
+ withReturn: true,
+ modifiedUserCode,
+ extraReturnCode
+ };
+ }
+ }
+
+ return {
+ withReturn: false,
+ modifiedUserCode: code,
+ extraReturnCode: ''
+ };
+ }
+
+ /**
+ * Transform import source with magic imports.
+ */
+ private _transformImportSource(source: string): string {
+ if (!this._config.magicImports.enabled) {
+ return source;
+ }
+
+ // Keep absolute, relative and import-map style specifiers unchanged.
+ if (this._isDirectImportSource(source)) {
+ return source;
+ }
+
+ const { path: sourcePath, suffix } = this._splitImportSourceSuffix(source);
+
+ const transformedPath =
+ ['npm/', 'gh/'].some(start => sourcePath.startsWith(start)) ||
+ !this._config.magicImports.enableAutoNpm
+ ? sourcePath
+ : `npm/${sourcePath}`;
+
+ let transformedSource = `${this._joinBaseAndPath(
+ this._config.magicImports.baseUrl,
+ transformedPath
+ )}${suffix}`;
+
+ if (this._shouldAppendEsmSuffix(sourcePath)) {
+ transformedSource = this._appendEsmSuffix(transformedSource);
+ }
+
+ return transformedSource;
+ }
+
+ /**
+ * Whether an import source should bypass magic import transformation.
+ */
+ private _isDirectImportSource(source: string): boolean {
+ return (
+ /^(?:[a-zA-Z][a-zA-Z\d+.-]*:|\/\/)/.test(source) ||
+ source.startsWith('./') ||
+ source.startsWith('../') ||
+ source.startsWith('/') ||
+ source.startsWith('#')
+ );
+ }
+
+ /**
+ * Whether a transformed import should include the jsDelivr `+esm` suffix.
+ */
+ private _shouldAppendEsmSuffix(sourcePath: string): boolean {
+ const noEsmEnds = ['.js', '.mjs', '.cjs', '.wasm', '+esm'];
+ return !noEsmEnds.some(end => sourcePath.endsWith(end));
+ }
+
+ /**
+ * Append `+esm` before query/hash suffixes.
+ */
+ private _appendEsmSuffix(source: string): string {
+ const { path, suffix } = this._splitImportSourceSuffix(source);
+ const esmSuffix = path.endsWith('/') ? '+esm' : '/+esm';
+ return `${path}${esmSuffix}${suffix}`;
+ }
+
+ /**
+ * Split an import source into path and query/hash suffix.
+ */
+ private _splitImportSourceSuffix(source: string): {
+ path: string;
+ suffix: string;
+ } {
+ const queryIndex = source.indexOf('?');
+ const hashIndex = source.indexOf('#');
+ const splitIndex =
+ queryIndex === -1
+ ? hashIndex
+ : hashIndex === -1
+ ? queryIndex
+ : Math.min(queryIndex, hashIndex);
+
+ if (splitIndex === -1) {
+ return { path: source, suffix: '' };
+ }
+
+ return {
+ path: source.slice(0, splitIndex),
+ suffix: source.slice(splitIndex)
+ };
+ }
+
+ /**
+ * Join a base URL and import path while preserving origin semantics.
+ */
+ private _joinBaseAndPath(baseUrl: string, path: string): string {
+ const normalizedBase = baseUrl.endsWith('/') ? baseUrl : `${baseUrl}/`;
+ const normalizedPath = path.replace(/^\/+/, '');
+
+ try {
+ return new URL(normalizedPath, normalizedBase).toString();
+ } catch {
+ return `${normalizedBase}${normalizedPath}`;
+ }
+ }
+
+ /**
+ * Rewrite import statements to dynamic imports.
+ */
+ private _rewriteImportStatements(
+ code: string,
+ ast: any
+ ): {
+ modifiedUserCode: string;
+ codeAddToGlobalScope: string;
+ } {
+ let modifiedUserCode = code;
+ let codeAddToGlobalScope = '';
+
+ // Process imports in reverse order to maintain correct positions
+ for (let i = ast.body.length - 1; i >= 0; i--) {
+ const node = ast.body[i];
+
+ if (node.type === 'ImportDeclaration') {
+ const importSource = this._transformImportSource(node.source.value);
+ const importSourceCode = JSON.stringify(importSource);
+
+ if (node.specifiers.length === 0) {
+ // Side-effect import: import 'module'
+ modifiedUserCode = this._replaceCode(
+ modifiedUserCode,
+ node.start,
+ node.end,
+ `await import(${importSourceCode});\n`
+ );
+ } else {
+ let hasDefaultImport = false;
+ let defaultImportName = '';
+ let hasNamespaceImport = false;
+ let namespaceImportName = '';
+ const importedNames: string[] = [];
+ const localNames: string[] = [];
+
+ // Get imported and local names
+ for (const specifier of node.specifiers) {
+ if (specifier.type === 'ImportSpecifier') {
+ if (specifier.imported.name === 'default') {
+ hasDefaultImport = true;
+ defaultImportName = specifier.local.name;
+ } else {
+ importedNames.push(specifier.imported.name);
+ localNames.push(specifier.local.name);
+ }
+ } else if (specifier.type === 'ImportDefaultSpecifier') {
+ hasDefaultImport = true;
+ defaultImportName = specifier.local.name;
+ } else if (specifier.type === 'ImportNamespaceSpecifier') {
+ hasNamespaceImport = true;
+ namespaceImportName = specifier.local.name;
+ }
+ }
+
+ const importBinding = `__jsKernelImport${i}`;
+ let newCodeOfNode = `const ${importBinding} = await import(${importSourceCode});\n`;
+
+ const destructuredNames: string[] = [];
+ if (hasDefaultImport) {
+ destructuredNames.push(`default: ${defaultImportName}`);
+ codeAddToGlobalScope +=
+ this._addToGlobalThisCode(defaultImportName);
+ }
+
+ if (importedNames.length > 0) {
+ for (let j = 0; j < importedNames.length; j++) {
+ // Handle aliased imports: import { foo as bar } -> const { foo: bar }
+ destructuredNames.push(
+ importedNames[j] !== localNames[j]
+ ? `${importedNames[j]}: ${localNames[j]}`
+ : importedNames[j]
+ );
+ // Use local name for globalThis assignment since that's what's in scope
+ codeAddToGlobalScope += this._addToGlobalThisCode(localNames[j]);
+ }
+ }
+
+ if (destructuredNames.length > 0) {
+ newCodeOfNode += `const { ${destructuredNames.join(
+ ', '
+ )} } = ${importBinding};\n`;
+ }
+
+ if (hasNamespaceImport) {
+ newCodeOfNode += `const ${namespaceImportName} = ${importBinding};\n`;
+ codeAddToGlobalScope +=
+ this._addToGlobalThisCode(namespaceImportName);
+ }
+
+ modifiedUserCode = this._replaceCode(
+ modifiedUserCode,
+ node.start,
+ node.end,
+ newCodeOfNode
+ );
+ }
+ }
+ }
+
+ return {
+ modifiedUserCode,
+ codeAddToGlobalScope
+ };
+ }
+
+ /**
+ * Escape HTML special characters.
+ */
+ private _escapeHtml(text: string): string {
+ const htmlEscapes: Record = {
+ '&': '&',
+ '<': '<',
+ '>': '>',
+ '"': '"',
+ "'": '''
+ };
+ return text.replace(/[&<>"']/g, char => htmlEscapes[char]);
+ }
+
+ /**
+ * Get custom MIME bundle from object methods.
+ * Checks for _toHtml, _toSvg, _toPng, _toJpeg, _toMime, inspect.
+ */
+ private _getCustomMimeBundle(value: any): IMimeBundle | null {
+ // Check for _toMime() first - returns a full MIME bundle directly.
+ if (typeof value._toMime === 'function') {
+ try {
+ const mimeResult = value._toMime();
+ if (mimeResult && typeof mimeResult === 'object') {
+ return mimeResult;
+ }
+ } catch {
+ // Ignore errors in custom methods
+ }
+ }
+
+ // Try each custom output method. Each returns a string for its MIME type.
+ const customMimeMethods: [string, string][] = [
+ ['_toHtml', 'text/html'],
+ ['_toSvg', 'image/svg+xml'],
+ ['_toPng', 'image/png'],
+ ['_toJpeg', 'image/jpeg'],
+ ['_toMarkdown', 'text/markdown'],
+ ['_toLatex', 'text/latex']
+ ];
+
+ const bundle: IMimeBundle = {};
+ let hasCustomOutput = false;
+
+ for (const [method, mimeType] of customMimeMethods) {
+ if (typeof value[method] === 'function') {
+ try {
+ const result = value[method]();
+ if (typeof result === 'string') {
+ bundle[mimeType] = result;
+ hasCustomOutput = true;
+ }
+ } catch {
+ // Ignore errors in custom methods
+ }
+ }
+ }
+
+ if (!hasCustomOutput) {
+ return null;
+ }
+
+ // Add text/plain representation using inspect() if available.
+ if (typeof value.inspect === 'function') {
+ try {
+ bundle['text/plain'] = value.inspect();
+ } catch {
+ bundle['text/plain'] = String(value);
+ }
+ } else {
+ bundle['text/plain'] = String(value);
+ }
+
+ return bundle;
+ }
+
+ /**
+ * Check if value is a DOM element.
+ */
+ private _isDOMElement(value: any): boolean {
+ return (
+ this._isInstanceOfRealm(value, 'HTMLElement') ||
+ this._isInstanceOfRealm(value, 'SVGElement')
+ );
+ }
+
+ /**
+ * Get MIME bundle for DOM elements.
+ */
+ private _getDOMElementMimeBundle(element: any): IMimeBundle {
+ const isCanvasElement =
+ this._isInstanceOfRealm(element, 'HTMLCanvasElement') ||
+ (typeof element?.toDataURL === 'function' &&
+ typeof element?.getContext === 'function');
+
+ // For canvas elements, try to get image data
+ if (isCanvasElement) {
+ const canvas = element as HTMLCanvasElement;
+ try {
+ const dataUrl = canvas.toDataURL('image/png');
+ const base64 = dataUrl.split(',')[1];
+ return {
+ 'image/png': base64,
+ 'text/plain': `