From 41bb732ce0f29c7dd97cd82b18d3c821113be8da Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 8 Nov 2025 08:25:19 +0200
Subject: [PATCH 001/143] add multi file config

---
 src/livecodes/config/config.ts          | 22 ++++++++++
 src/livecodes/config/default-config.ts  |  1 +
 src/livecodes/config/validate-config.ts | 47 +++++++++++++++++----
 src/livecodes/core.ts                   | 28 +++++++++----
 src/livecodes/utils/utils.ts            |  2 +-
 src/sdk/index.ts                        |  2 +-
 src/sdk/models.ts                       | 55 +++++++++++++++++++++++--
 7 files changed, 136 insertions(+), 21 deletions(-)

diff --git a/src/livecodes/config/config.ts b/src/livecodes/config/config.ts
index 5f4b765533..8aa0ee2057 100644
--- a/src/livecodes/config/config.ts
+++ b/src/livecodes/config/config.ts
@@ -4,6 +4,8 @@ import type {
   ContentConfig,
   EditorConfig,
   FormatterConfig,
+  MultiFileConfig,
+  SingleFileConfig,
   UserConfig,
 } from '../models';
 import { cloneObject } from '../utils';
@@ -95,5 +97,25 @@ export const getFormatterConfig = (config: Config | UserConfig): FormatterConfig
     trailingComma: config.trailingComma,
   });
 
+export const getSingleFileConfig = (config: Config): SingleFileConfig => {
+  const { files, mainFile, ...SingleFileConfig } = config;
+  return cloneObject(SingleFileConfig);
+};
+
+export const getMultiFileConfig = (config: Config): MultiFileConfig => {
+  const {
+    markup,
+    style,
+    script,
+    stylesheets,
+    scripts,
+    cssPreset,
+    htmlAttrs,
+    head,
+    ...multiFileConfig
+  } = config;
+  return cloneObject(multiFileConfig);
+};
+
 export const upgradeAndValidate = (config: Partial<Config>) =>
   validateConfig(upgradeConfig(config as any));
diff --git a/src/livecodes/config/default-config.ts b/src/livecodes/config/default-config.ts
index b14a80539b..fc53c9ff7a 100644
--- a/src/livecodes/config/default-config.ts
+++ b/src/livecodes/config/default-config.ts
@@ -37,6 +37,7 @@ export const defaultConfig: Config = {
     language: 'javascript',
     content: '',
   },
+  files: [],
   stylesheets: [],
   scripts: [],
   cssPreset: '',
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
index 33bf2d9b3c..5d876b6d45 100644
--- a/src/livecodes/config/validate-config.ts
+++ b/src/livecodes/config/validate-config.ts
@@ -1,6 +1,15 @@
 import { getLanguageByAlias, getLanguageEditorId } from '../languages';
-import type { Config, Editor, EditorId, Language, Tool, ToolsPaneStatus } from '../models';
-import { removeDuplicates } from '../utils';
+import type {
+  Config,
+  Editor,
+  EditorId,
+  Language,
+  MultiFileConfig,
+  SourceFile,
+  Tool,
+  ToolsPaneStatus,
+} from '../models';
+import { getFileExtension, removeDuplicates } from '../utils';
 import { defaultConfig } from './default-config';
 
 export const validateConfig = (config: Partial<Config>): Partial<Config> => {
@@ -45,7 +54,7 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
 
   const isFoldedLines = (x: any) => is(x, 'object') && (is(x.from, 'number') || is(x.to, 'number'));
 
-  const fixSfcLanguage = (lang: Language, editorId: EditorId) =>
+  const fixSfcLanguage = (lang: Language | undefined, editorId: EditorId) =>
     editorId !== 'markup'
       ? lang
       : lang === 'svelte'
@@ -54,13 +63,16 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
           ? 'vue-app'
           : lang;
 
+  const getEditorDefaultLanguage = (editorId: EditorId) => defaultConfig[editorId].language;
+
   const validateEditorProps = (x: Editor, editorId: EditorId): Editor => ({
-    language: fixSfcLanguage(
-      getLanguageEditorId(fixSfcLanguage(x.language, editorId)) === editorId
-        ? getLanguageByAlias(x.language) || defaultConfig[editorId].language
-        : defaultConfig[editorId].language,
-      editorId,
-    ),
+    language:
+      fixSfcLanguage(
+        getLanguageEditorId(fixSfcLanguage(x.language, editorId)) === editorId
+          ? getLanguageByAlias(x.language) || getEditorDefaultLanguage(editorId)
+          : getEditorDefaultLanguage(editorId),
+        editorId,
+      ) || getEditorDefaultLanguage(editorId),
     ...(is(x.title, 'string') ? { title: x.title } : {}),
     ...(is(x.content, 'string') ? { content: x.content } : {}),
     ...(is(x.contentUrl, 'string') ? { contentUrl: x.contentUrl } : {}),
@@ -75,6 +87,16 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
     ...(is(x.position, 'object') ? { position: x.position } : {}),
   });
 
+  const validateFileProps = (x: SourceFile): Required<SourceFile> | null =>
+    is(x.filename, 'string') && x.filename.trim() !== ''
+      ? {
+          filename: x.filename,
+          content: is(x.content, 'string') ? x.content ?? '' : '',
+          language: getLanguageByAlias(x.language || getFileExtension(x.filename)) || 'html',
+          hidden: is(x.hidden, 'boolean') ? x.hidden ?? false : false,
+        }
+      : null;
+
   const validateTestsProps = (x: Partial<Config['tests']>): Partial<Config['tests']> => ({
     ...(x && is(x.language, 'string') ? { language: x.language } : {}),
     ...(x && is(x.content, 'string') ? { content: x.content } : {}),
@@ -147,6 +169,13 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
     ...(is(config.script, 'object')
       ? { script: validateEditorProps(config.script as Editor, 'script') }
       : {}),
+    ...(is((config as MultiFileConfig).files, 'array', 'object')
+      ? {
+          files: (config as MultiFileConfig).files
+            .map((f) => validateFileProps(f))
+            .filter((f) => f != null) as SourceFile[],
+        }
+      : {}),
     ...(is(config.tools, 'object')
       ? { tools: validateToolsProps(config.tools as Config['tools']) }
       : {}),
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index f09d75af7d..cc2963a573 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -576,15 +576,23 @@ const reloadEditors = async (config: Config) => {
 const updateEditors = async (editors: Editors, config: Config) => {
   const editorIds = Object.keys(editors) as Array<keyof Editors>;
   for (const editorId of editorIds) {
-    const language = getLanguageByAlias(config[editorId].language);
+    const language = getLanguageByAlias(
+      config[editorId as EditorId]?.language ||
+        config.files.find((f) => f.filename === editorId)?.language,
+    );
     if (language) {
-      await changeLanguage(language, config[editorId].content, true);
+      await changeLanguage(
+        language,
+        config[editorId as EditorId]?.content ||
+          config.files.find((f) => f.filename === editorId)?.content,
+        true,
+      );
     }
     const editor = editors[editorId];
     if (config.foldRegions) {
       await editor.foldRegions?.();
     }
-    const foldedLines = config[editorId].foldedLines;
+    const foldedLines = config[editorId as EditorId]?.foldedLines;
     if (foldedLines?.length) {
       await editor.foldLines?.(foldedLines);
     }
@@ -693,10 +701,16 @@ const showMode = (mode?: Config['mode'], view?: Config['view']) => {
   window.dispatchEvent(new Event(customEvents.resizeEditor));
 };
 
-const showEditor = (editorId: EditorId = 'markup', isUpdate = false) => {
+const showEditor = (editorId: EditorId | (string & {}) = 'markup', isUpdate = false) => {
   const config = getConfig();
   const allHidden = editorIds.every((editor) => config[editor].hideTitle);
-  if (config[editorId].hideTitle && !allHidden) return;
+  if (
+    (config[editorId as EditorId]?.hideTitle ||
+      config.files.find((f) => f.filename === editorId)?.hidden) &&
+    !allHidden
+  ) {
+    return;
+  }
   const titles = UI.getEditorTitles();
   const editorIsVisible = () =>
     Array.from(titles)
@@ -731,7 +745,7 @@ const showEditor = (editorId: EditorId = 'markup', isUpdate = false) => {
   showEditorModeStatus(editorId);
 };
 
-const showEditorModeStatus = (editorId: EditorId) => {
+const showEditorModeStatus = (editorId: EditorId | (string & {})) => {
   const editorStatusNodes = document.querySelectorAll<HTMLElement>(
     '#editor-status > span[data-status]',
   );
@@ -1976,7 +1990,7 @@ const getAllEditors = (): CodeEditor[] =>
     ...Object.values(editors),
     toolsPane?.console?.getEditor?.(),
     toolsPane?.compiled?.getEditor?.(),
-  ].filter((x) => x != null);
+  ].filter((x) => x != null) as CodeEditor[];
 
 const setTheme = (theme: Theme, editorTheme: Config['editorTheme']) => {
   const themes = ['light', 'dark'];
diff --git a/src/livecodes/utils/utils.ts b/src/livecodes/utils/utils.ts
index 5ae0cc8929..bc789ff484 100644
--- a/src/livecodes/utils/utils.ts
+++ b/src/livecodes/utils/utils.ts
@@ -230,7 +230,7 @@ export const loadStylesheet = (url: string, id?: string, insertBefore?: string)
 };
 
 export const typedArrayToBuffer = /* @__PURE__ */ (array: Uint8Array): ArrayBuffer =>
-  array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset);
+  array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset) as ArrayBuffer;
 
 export const getDate = /* @__PURE__ */ () => {
   let date = new Date();
diff --git a/src/sdk/index.ts b/src/sdk/index.ts
index e8a5c4b2ac..360b19350b 100644
--- a/src/sdk/index.ts
+++ b/src/sdk/index.ts
@@ -3,7 +3,7 @@ import { compressToEncodedURIComponent } from 'lz-string';
 import type {
   API,
   Code,
-  Config,
+  SDKConfig as Config,
   CustomEvents,
   EmbedOptions,
   Language,
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 8464e7cd2a..1bffcbf106 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -343,7 +343,7 @@ export interface EmbedOptions {
    * If supplied and is not an object or a valid URL, an error is thrown.
    * @default {}
    */
-  config?: Partial<Config> | string;
+  config?: Partial<SDKConfig> | string;
 
   /**
    * If `true`, the playground is loaded in [headless mode](https://livecodes.io/docs/sdk/headless).
@@ -405,6 +405,20 @@ export interface EmbedOptions {
  */
 export interface Config extends ContentConfig, AppConfig, UserConfig {}
 
+export interface SingleFileConfig
+  extends Omit<ContentConfig, 'files' | 'mainFile'>,
+    AppConfig,
+    UserConfig {}
+
+export interface MultiFileConfig
+  extends Omit<MultiFileContentConfig, 'files'>,
+    AppConfig,
+    UserConfig {
+  files: Array<{ filename: string } & Partial<SourceFile>>;
+}
+
+export type SDKConfig = SingleFileConfig | MultiFileConfig;
+
 /**
  * The properties that define the content of the current [project](https://livecodes.io/docs/features/projects).
  */
@@ -450,9 +464,9 @@ export interface ContentConfig {
    * Selects the active editor to show.
    *
    * Defaults to the last used editor for user, otherwise `"markup"`
-   * @type {`"markup"` | `"style"` | `"script"` | `undefined`}
+   * @type {`"markup"` | `"style"` | `"script"` | `string` | `undefined`}
    */
-  activeEditor: EditorId | undefined;
+  activeEditor: EditorId | (string & {}) | undefined;
 
   /**
    * List of enabled languages.
@@ -485,6 +499,16 @@ export interface ContentConfig {
    */
   script: Prettify<Editor>;
 
+  /**
+   * List of source files.
+   */
+  files: SourceFile[];
+  /**
+   * The name of the main markup file.
+   * @default "index.html"
+   */
+  mainFile?: string;
+
   /**
    * List of URLs for [external stylesheets](https://livecodes.io/docs/features/external-resources) to add to the [result page](https://livecodes.io/docs/features/result).
    */
@@ -583,6 +607,30 @@ export interface ContentConfig {
   readonly version: string;
 }
 
+export type MultiFileContentConfig = Pick<
+  ContentConfig,
+  | 'title'
+  | 'description'
+  | 'tags'
+  | 'activeEditor'
+  | 'files'
+  | 'mainFile'
+  | 'languages'
+  | 'processors'
+  | 'customSettings'
+  | 'imports'
+  | 'types'
+  | 'tests'
+  | 'version'
+>;
+
+export interface SourceFile {
+  filename: string;
+  content: string;
+  language: Language;
+  hidden: boolean;
+}
+
 /**
  * These are properties that define how the app behaves.
  */
@@ -1173,6 +1221,7 @@ export interface EditorPosition {
 export type EditorId = 'markup' | 'style' | 'script';
 
 export interface Editors {
+  [key: string]: CodeEditor;
   markup: CodeEditor;
   style: CodeEditor;
   script: CodeEditor;

From 86dbd99a1800de86129e81820b934f45f1e46b80 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 8 Nov 2025 08:25:19 +0200
Subject: [PATCH 002/143] add multi-file UI

---
 src/livecodes/UI/create-language-menus.ts     |  84 ++++++++-
 src/livecodes/config/default-config.ts        |  21 ++-
 src/livecodes/config/validate-config.ts       |   4 +-
 src/livecodes/core.ts                         | 161 ++++++++++++++----
 .../i18n/locales/en/translation.lokalise.json |   4 +
 src/livecodes/i18n/locales/en/translation.ts  |   3 +
 src/livecodes/styles/app.scss                 |  25 ++-
 src/sdk/models.ts                             |   1 +
 8 files changed, 263 insertions(+), 40 deletions(-)

diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index 0b64986cfd..697a6cd9a0 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -19,7 +19,7 @@ export const createLanguageMenus = (
   registerMenuButton: (menu: HTMLElement, button: HTMLElement) => void,
 ) => {
   const editorIds: EditorId[] = ['markup', 'style', 'script'];
-  const rootList = document.createElement('ul');
+  const rootList = document.createElement('div');
   document.querySelector('#select-editor')?.appendChild(rootList);
 
   let editorsNumber = editorIds.length;
@@ -30,6 +30,7 @@ export const createLanguageMenus = (
     editorSelector.id = editorId + '-selector';
     editorSelector.classList.add('editor-title', 'noselect');
     editorSelector.dataset.editor = editorId;
+    editorSelector.dataset.singleFile = 'true';
     editorSelector.innerHTML = `
       <span></span>
       <a
@@ -161,6 +162,87 @@ export const createLanguageMenus = (
   }
 };
 
+export const createMultiFileEditorTab = ({
+  title,
+  editFileName,
+  deleteFile,
+  isMainFile,
+}: {
+  title: string;
+  editFileName: (title: string) => void;
+  deleteFile: (title: string) => void;
+  isMainFile: boolean;
+}) => {
+  const selector = document.querySelector(`.editor-title[data-editor="${title}"]`);
+  if (selector) return;
+  const editorSelector = document.createElement('a');
+  editorSelector.href = '#';
+  editorSelector.classList.add('editor-title', 'noselect');
+  editorSelector.dataset.editor = title;
+  editorSelector.dataset.multiFile = 'true';
+
+  const label = document.createElement('span');
+  label.innerHTML = title;
+  editorSelector.appendChild(label);
+
+  if (!isMainFile) {
+    const deleteButton = document.createElement('button');
+    deleteButton.classList.add('delete-file-button');
+    deleteButton.innerHTML = '&times;';
+    deleteButton.addEventListener('click', () => {
+      if (
+        confirm(
+          window.deps.translateString('core.confirm.deleteFile', 'Delete file: {{title}}?', {
+            title,
+          }),
+        )
+      ) {
+        deleteFile(label.innerText);
+        editorSelector.remove();
+      }
+    });
+    editorSelector.appendChild(deleteButton);
+  }
+
+  const selectAll = (element: HTMLElement) => {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  };
+
+  const accept = () => {
+    editFileName(label.innerText);
+    label.contentEditable = 'false';
+    window.removeEventListener('click', onClick);
+    window.removeEventListener('keydown', onEnter);
+    isEditing = false;
+  };
+  const onClick = (event: MouseEvent) => {
+    if (event.target !== editorSelector.querySelector('span')) {
+      accept();
+    }
+  };
+  const onEnter = (event: KeyboardEvent) => {
+    if (event.key === 'Enter') {
+      accept();
+    }
+  };
+
+  let isEditing = false;
+  editorSelector.ondblclick = () => {
+    isEditing = true;
+    label.contentEditable = 'true';
+    requestAnimationFrame(() => label.focus());
+    selectAll(label);
+    window.addEventListener('click', onClick, { capture: true });
+    window.addEventListener('keydown', onEnter);
+  };
+
+  document.querySelector('#select-editor > div')?.appendChild(editorSelector);
+};
+
 export const createProcessorItem = (processor: { name: string; title: string }) => {
   const processorItem = document.createElement('li');
   processorItem.classList.add('language-item', 'processor-item');
diff --git a/src/livecodes/config/default-config.ts b/src/livecodes/config/default-config.ts
index fc53c9ff7a..8550af9528 100644
--- a/src/livecodes/config/default-config.ts
+++ b/src/livecodes/config/default-config.ts
@@ -37,7 +37,26 @@ export const defaultConfig: Config = {
     language: 'javascript',
     content: '',
   },
-  files: [],
+  files: [
+    {
+      filename: 'index.html',
+      content: '<h1>hello world</h1>',
+      language: 'html',
+      hidden: false,
+    },
+    {
+      filename: 'style.css',
+      content: 'body{ color: blue; }',
+      language: 'css',
+      hidden: false,
+    },
+    {
+      filename: 'script.js',
+      content: 'console.log("hi");',
+      language: 'javascript',
+      hidden: false,
+    },
+  ],
   stylesheets: [],
   scripts: [],
   cssPreset: '',
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
index 5d876b6d45..425756716c 100644
--- a/src/livecodes/config/validate-config.ts
+++ b/src/livecodes/config/validate-config.ts
@@ -87,8 +87,8 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
     ...(is(x.position, 'object') ? { position: x.position } : {}),
   });
 
-  const validateFileProps = (x: SourceFile): Required<SourceFile> | null =>
-    is(x.filename, 'string') && x.filename.trim() !== ''
+  const validateFileProps = (x: Partial<SourceFile>): Required<SourceFile> | null =>
+    x.filename && is(x.filename, 'string') && x.filename.includes('.')
       ? {
           filename: x.filename,
           content: is(x.content, 'string') ? x.content ?? '' : '',
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index cc2963a573..7d7cea24ae 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -20,7 +20,11 @@ import type {
   BroadcastResponseError,
 } from './UI/broadcast';
 import { getCommandMenuActions } from './UI/command-menu-actions';
-import { createLanguageMenus, createProcessorItem } from './UI/create-language-menus';
+import {
+  createLanguageMenus,
+  createMultiFileEditorTab,
+  createProcessorItem,
+} from './UI/create-language-menus';
 import { createModal } from './UI/modal';
 import * as UI from './UI/selectors';
 import { themeColors } from './UI/theme-colors';
@@ -39,6 +43,7 @@ import {
   upgradeAndValidate,
 } from './config';
 import { createCustomEditors, createEditor, getFontFamily } from './editor';
+import { createFakeEditor } from './editor/fake-editor';
 import { hasJsx } from './editor/ts-compiler-options';
 import { createEventsManager, createPub } from './events';
 import { customEvents } from './events/custom-events';
@@ -462,6 +467,50 @@ const createCopyButtons = () => {
   });
 };
 
+const createEditorUI = (title: string) => {
+  const editorsElement = UI.getEditorsElement();
+  let container = editorsElement.querySelector<HTMLElement>(`[data-editor-id="${title}"]`);
+  if (!container) {
+    container = document.createElement('div');
+    container.setAttribute('data-editor-id', title);
+    container.classList.add('editor');
+    editorsElement.insertBefore(container, UI.getEditorToolbar());
+  }
+  const editFileName = (filename: string) => {
+    const config = getConfig();
+    setConfig({
+      ...config,
+      files: config.files.map((f) => ({
+        ...f,
+        filename: f.filename === title ? filename : f.filename,
+      })),
+    });
+    if (config.autoupdate) {
+      run();
+    }
+  };
+  const deleteFile = (filename: string) => {
+    const config = getConfig();
+    setConfig({
+      ...config,
+      files: config.files.filter((f) => f.filename !== filename),
+    });
+    if (config.autoupdate) {
+      run();
+    }
+  };
+
+  const config = getConfig();
+  const isMainFile = config.mainFile
+    ? config.mainFile === title
+    : title === 'index.html' ||
+      config.files.find((f) => getLanguageEditorId(f.language) === 'markup')?.filename === title;
+
+  createMultiFileEditorTab({ title, editFileName, deleteFile, isMainFile });
+
+  return container;
+};
+
 const createEditors = async (config: Config) => {
   let isReload = false;
   if (editors) {
@@ -479,7 +528,9 @@ const createEditors = async (config: Config) => {
         ? 'style'
         : config.script.content
           ? 'script'
-          : 'markup');
+          : config.files?.length
+            ? config.files[0].filename
+            : 'markup');
 
   const baseOptions = {
     baseUrl,
@@ -527,27 +578,51 @@ const createEditors = async (config: Config) => {
     value: languageIsEnabled(config.script.language, config) ? config.script.content || '' : '',
   };
 
-  const markupEditor = await createEditor(markupOptions);
-  const styleEditor = await createEditor(styleOptions);
-  const scriptEditor = await createEditor(scriptOptions);
-
-  currentEditorConfig = { ...getEditorConfig(config), ...getFormatterConfig(config) };
+  if (config.files?.length) {
+    editorLanguages = { markup: 'html', style: 'css', script: 'javascript' };
+    editors = {
+      markup: createFakeEditor(markupOptions),
+      style: createFakeEditor(styleOptions),
+      script: createFakeEditor(scriptOptions),
+    };
 
-  setEditorTitle('markup', markupOptions.language);
-  setEditorTitle('style', styleOptions.language);
-  setEditorTitle('script', scriptOptions.language);
+    for (const file of config.files) {
+      const editorId = file.filename;
+      const container = createEditorUI(file.filename);
+      const editorOptions = {
+        ...baseOptions,
+        container,
+        editorId,
+        language: file.language,
+        value: file.content,
+      };
+      const editor = await createEditor(editorOptions);
+      editorLanguages[editorId] = file.language;
+      editors[editorId] = editor;
+    }
+  } else {
+    const markupEditor = await createEditor(markupOptions);
+    const styleEditor = await createEditor(styleOptions);
+    const scriptEditor = await createEditor(scriptOptions);
+
+    setEditorTitle('markup', markupOptions.language);
+    setEditorTitle('style', styleOptions.language);
+    setEditorTitle('script', scriptOptions.language);
+
+    editorLanguages = {
+      markup: markupOptions.language,
+      style: styleOptions.language,
+      script: scriptOptions.language,
+    };
 
-  editorLanguages = {
-    markup: markupOptions.language,
-    style: styleOptions.language,
-    script: scriptOptions.language,
-  };
+    editors = {
+      markup: markupEditor,
+      style: styleEditor,
+      script: scriptEditor,
+    };
+  }
 
-  editors = {
-    markup: markupEditor,
-    style: styleEditor,
-    script: scriptEditor,
-  };
+  currentEditorConfig = { ...getEditorConfig(config), ...getFormatterConfig(config) };
 
   (Object.keys(editors) as EditorId[]).forEach((editorId) => {
     const language = editorLanguages?.[editorId] || 'html';
@@ -703,31 +778,30 @@ const showMode = (mode?: Config['mode'], view?: Config['view']) => {
 
 const showEditor = (editorId: EditorId | (string & {}) = 'markup', isUpdate = false) => {
   const config = getConfig();
-  const allHidden = editorIds.every((editor) => config[editor].hideTitle);
   if (
-    (config[editorId as EditorId]?.hideTitle ||
-      config.files.find((f) => f.filename === editorId)?.hidden) &&
-    !allHidden
+    config[editorId as EditorId]?.hideTitle ||
+    config.files.find((f) => f.filename === editorId)?.hidden
   ) {
     return;
   }
-  const titles = UI.getEditorTitles();
-  const editorIsVisible = () =>
-    Array.from(titles)
-      .map((title) => title.dataset.editor)
-      .includes(editorId);
+  const titles = [...UI.getEditorTitles()];
+  const editorIsVisible = () => titles.map((title) => title.dataset.editor).includes(editorId);
   if (!editorIsVisible()) {
     // select first visible editor instead
-    editorId = (titles[0].dataset.editor as EditorId) || 'markup';
+    editorId = (titles[0]?.dataset.editor as EditorId) || 'markup';
   }
   titles.forEach((selector) => selector.classList.remove('active'));
-  const activeTitle = document.getElementById(editorId + '-selector');
+  const activeTitle = titles.find((title) => title.dataset.editor === editorId);
   activeTitle?.classList.add('active');
-  const editorDivs = UI.getEditorDivs();
+  const editorDivs = [...UI.getEditorDivs()];
   editorDivs.forEach((editor) => (editor.style.display = 'none'));
-  const activeEditor = document.getElementById(editorId) as HTMLElement;
-  activeEditor.style.display = 'block';
-  activeEditor.style.visibility = 'visible';
+  const activeEditor = editorDivs.find(
+    (editor) => editor.id === editorId || editor.dataset.editorId === editorId,
+  ) as HTMLElement;
+  if (activeEditor) {
+    activeEditor.style.display = 'block';
+    activeEditor.style.visibility = 'visible';
+  }
   if (!isEmbed && !isUpdate) {
     editors[editorId]?.focus();
   }
@@ -810,6 +884,22 @@ const configureEditorTools = (language: Language) => {
   return true;
 };
 
+const configureMultiFile = (config: Config) => {
+  const editorTabsContainer = document.querySelector<HTMLElement>('#select-editor > div')!;
+  const singleFileTabs = [
+    ...editorTabsContainer.querySelectorAll<HTMLElement>('[data-single-file]'),
+  ];
+  const multiFileTabs = [...editorTabsContainer.querySelectorAll<HTMLElement>('[data-multi-file]')];
+  const isMultiFile = config.files.length > 0;
+  singleFileTabs.forEach((tab) => {
+    tab.classList.toggle('hidden', isMultiFile);
+  });
+  if (!isMultiFile) {
+    multiFileTabs.forEach((tab) => tab.remove());
+    UI.getEditorDivs().forEach((editor) => editor.remove());
+  }
+};
+
 const addPhpToken = (code: string) =>
   code.includes('<?php') || code.includes('<?=') ? code : '<?php\n' + code;
 
@@ -1456,6 +1546,7 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false, oldConfig
   }
   phpHelper({ editor: editors.script });
   setLoading(true);
+  configureMultiFile(combinedConfig);
   await setActiveEditor(combinedConfig);
 
   if (!isEmbed) {
diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
index 83f8a79203..ed5511e826 100644
--- a/src/livecodes/i18n/locales/en/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -940,6 +940,10 @@
     "notes": "",
     "translation": "Loading {{lang}}. This may take a while!"
   },
+  "core.confirm.deleteFile": {
+    "notes": "",
+    "translation": "Delete file: {{title}}?"
+  },
   "core.copy.copied": {
     "notes": "",
     "translation": "Code copied to clipboard"
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
index 9e7810b549..9c6e0aed6f 100644
--- a/src/livecodes/i18n/locales/en/translation.ts
+++ b/src/livecodes/i18n/locales/en/translation.ts
@@ -379,6 +379,9 @@ const translation = {
       hint: 'Change Language',
       message: 'Loading {{lang}}. This may take a while!',
     },
+    confirm: {
+      deleteFile: 'Delete file: {{title}}?',
+    },
     copy: {
       copied: 'Code copied to clipboard',
       copiedAsDataURL: 'Code copied as data URL',
diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
index 5ef4a2e49a..ed54fac6ad 100644
--- a/src/livecodes/styles/app.scss
+++ b/src/livecodes/styles/app.scss
@@ -1311,7 +1311,7 @@ a.tools-pane-title {
   margin: 0 0 calc(-1 * var(--s2)) var(--s8);
   position: relative;
 
-  > ul {
+  > div {
     display: flex;
     height: 100%;
   }
@@ -1398,6 +1398,29 @@ a.editor-title {
       display: block;
     }
   }
+
+  &[data-multi-file='true'] {
+    width: fit-content;
+
+    > span {
+      padding: 0 4px;
+    }
+  }
+
+  .delete-file-button {
+    background: transparent;
+    border: 0;
+    border-radius: 50%;
+    color: var(--editor-title-color);
+    cursor: pointer;
+    height: 12px;
+    margin-inline-end: -3px;
+    margin-inline-start: 3px;
+
+    &:hover {
+      color: var(--editor-title-active);
+    }
+  }
 }
 
 @import 'inc-menu';
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 1bffcbf106..c4c122f2f7 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1227,6 +1227,7 @@ export interface Editors {
   script: CodeEditor;
 }
 export interface EditorLanguages {
+  [key: string]: Language;
   markup: Language;
   style: Language;
   script: Language;

From d48fea1c5a2c3a1bfd4bad817a381f59640f65e9 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 8 Nov 2025 08:25:19 +0200
Subject: [PATCH 003/143] multi-file result page

---
 src/livecodes/cache/cache.ts                  |   2 +
 .../compiler/__tests__/import-map.spec.ts     | 135 ++++++
 src/livecodes/compiler/import-map.ts          |  84 +++-
 src/livecodes/config/config.ts                |   2 +
 src/livecodes/config/default-config.ts        |  50 +-
 src/livecodes/core.ts                         | 197 ++++++--
 .../processor-tailwindcss-compiler.ts         |   2 +-
 src/livecodes/models.ts                       |   6 +
 .../result/multi-file-result-page.ts          | 442 ++++++++++++++++++
 src/livecodes/result/result-page.ts           |   8 +-
 src/sdk/models.ts                             |   2 +
 11 files changed, 869 insertions(+), 61 deletions(-)
 create mode 100644 src/livecodes/result/multi-file-result-page.ts

diff --git a/src/livecodes/cache/cache.ts b/src/livecodes/cache/cache.ts
index e138d74dad..7c5ebd5004 100644
--- a/src/livecodes/cache/cache.ts
+++ b/src/livecodes/cache/cache.ts
@@ -8,6 +8,8 @@ const initialCache: Cache = {
   style: { ...defaultContentConfig.style, compiled: '', modified: '' },
   script: { ...defaultContentConfig.script, compiled: '', modified: '' },
   tests: { language: 'javascript', ...defaultContentConfig.tests, compiled: '' },
+  files: [],
+  mainFile: undefined,
   result: '',
   styleOnlyUpdate: false,
 };
diff --git a/src/livecodes/compiler/__tests__/import-map.spec.ts b/src/livecodes/compiler/__tests__/import-map.spec.ts
index 5b1209ada8..c5634dc795 100644
--- a/src/livecodes/compiler/__tests__/import-map.spec.ts
+++ b/src/livecodes/compiler/__tests__/import-map.spec.ts
@@ -1,9 +1,11 @@
 import type { Config } from '../../models';
 import {
   createImportMap,
+  getStyleImports,
   hasStyleImports,
   replaceImports,
   replaceStyleImports,
+  resolvePath,
 } from '../import-map';
 
 describe('Import map', () => {
@@ -180,4 +182,137 @@ body {
     const processedCode = replaceStyleImports(code);
     expect(processedCode).toEqual(expectedCode);
   });
+
+  test('get style imports', () => {
+    const code = `
+@import "github-markdown-css-1";
+@import "jsdelivr:github-markdown-css-2";
+@import "https://cdn.jsdelivr.net/npm/github-markdown-css-3";
+@import 'https://cdn.jsdelivr.net/npm/github-markdown-css-4';
+@import url("https://cdn.jsdelivr.net/npm/github-markdown-css-5");
+@import url('https://cdn.jsdelivr.net/npm/github-markdown-css-6');
+@import url(https://cdn.jsdelivr.net/npm/github-markdown-css-7);
+@import url(https://cdn.jsdelivr.net/npm/github-markdown-css-8) print;
+@import "github-markdown-css-9" print;
+@import "github-markdown-css-10" screen and (orientation:landscape);
+@import "github-markdown-css-11" layer(layer-name);
+@import "github-markdown-css-12" layer(layer-name) supports(supports-condition);
+@import "github-markdown-css-13" layer(layer-name) supports(supports-condition) list-of-media-queries;
+@import "github-markdown-css-14" layer(layer-name) list-of-media-queries;
+@import "github-markdown-css-15" supports(supports-condition);
+@import "github-markdown-css-16" supports(supports-condition) list-of-media-queries;
+@import "github-markdown-css-17" list-of-media-queries;
+@import "./styles.css";
+
+body {
+  color: blue;
+}    `;
+
+    const expectedImports = [
+      'github-markdown-css-1',
+      'jsdelivr:github-markdown-css-2',
+      'https://cdn.jsdelivr.net/npm/github-markdown-css-3',
+      'https://cdn.jsdelivr.net/npm/github-markdown-css-4',
+      'https://cdn.jsdelivr.net/npm/github-markdown-css-5',
+      'https://cdn.jsdelivr.net/npm/github-markdown-css-6',
+      'https://cdn.jsdelivr.net/npm/github-markdown-css-7',
+      'https://cdn.jsdelivr.net/npm/github-markdown-css-8',
+      'github-markdown-css-9',
+      'github-markdown-css-10',
+      'github-markdown-css-11',
+      'github-markdown-css-12',
+      'github-markdown-css-13',
+      'github-markdown-css-14',
+      'github-markdown-css-15',
+      'github-markdown-css-16',
+      'github-markdown-css-17',
+      './styles.css',
+    ];
+
+    const imports = getStyleImports(code);
+    expect(imports).toEqual(expectedImports);
+  });
+
+  test('get style imports (deduped)', () => {
+    const code = `
+@import "github-markdown-css";
+@import "jsdelivr:github-markdown-css";
+@import "https://cdn.jsdelivr.net/npm/github-markdown-css";
+@import 'https://cdn.jsdelivr.net/npm/github-markdown-css';
+@import url("https://cdn.jsdelivr.net/npm/github-markdown-css");
+@import url('https://cdn.jsdelivr.net/npm/github-markdown-css');
+@import url(https://cdn.jsdelivr.net/npm/github-markdown-css);
+@import url(https://cdn.jsdelivr.net/npm/github-markdown-css) print;
+@import "github-markdown-css" print;
+@import "github-markdown-css" screen and (orientation:landscape);
+@import "github-markdown-css" layer(layer-name);
+@import "github-markdown-css" layer(layer-name) supports(supports-condition);
+@import "github-markdown-css" layer(layer-name) supports(supports-condition) list-of-media-queries;
+@import "github-markdown-css" layer(layer-name) list-of-media-queries;
+@import "github-markdown-css" supports(supports-condition);
+@import "github-markdown-css" supports(supports-condition) list-of-media-queries;
+@import "github-markdown-css" list-of-media-queries;
+@import "./styles.css";
+
+body {
+  color: blue;
+}    `;
+
+    const expectedImports = [
+      'github-markdown-css',
+      'jsdelivr:github-markdown-css',
+      'https://cdn.jsdelivr.net/npm/github-markdown-css',
+      './styles.css',
+    ];
+
+    const imports = getStyleImports(code);
+    expect(imports).toEqual(expectedImports);
+  });
+
+  test('resolve path', () => {
+    expect(resolvePath('https://someurl/path', './script.js')).toEqual('https://someurl/path');
+    expect(resolvePath('https://someurl/path', 'script.js')).toEqual('https://someurl/path');
+    expect(resolvePath('https://someurl/path', './deep/script.js')).toEqual('https://someurl/path');
+    expect(resolvePath('https://someurl/path', 'deep/script.js')).toEqual('https://someurl/path');
+    expect(resolvePath('https://someurl/path')).toEqual('https://someurl/path');
+
+    const dataUrl =
+      'data:text/javascript;charset=UTF-8;base64,Y29uc29sZS5sb2coIkhlbGxvLCBXb3JsZCEiKTs=';
+    expect(resolvePath(dataUrl, './script.js')).toEqual(dataUrl);
+    expect(resolvePath(dataUrl, 'script.js')).toEqual(dataUrl);
+    expect(resolvePath(dataUrl, './deep/script.js')).toEqual(dataUrl);
+    expect(resolvePath(dataUrl, 'deep/script.js')).toEqual(dataUrl);
+    expect(resolvePath(dataUrl)).toEqual(dataUrl);
+
+    expect(resolvePath('my-lib', './script.js')).toEqual('my-lib');
+    expect(resolvePath('my-lib', 'script.js')).toEqual('my-lib');
+    expect(resolvePath('my-lib', './deep/script.js')).toEqual('my-lib');
+    expect(resolvePath('my-lib', 'deep/script.js')).toEqual('my-lib');
+    expect(resolvePath('my-lib')).toEqual('my-lib');
+
+    expect(resolvePath('/utils.js', './script.js')).toEqual('./utils.js');
+    expect(resolvePath('/utils.js', 'script.js')).toEqual('./utils.js');
+    expect(resolvePath('/utils.js', './deep/script.js')).toEqual('./utils.js');
+    expect(resolvePath('/utils.js', 'deep/script.js')).toEqual('./utils.js');
+    expect(resolvePath('/utils.js')).toEqual('./utils.js');
+
+    expect(resolvePath('./utils.js', './script.js')).toEqual('./utils.js');
+    expect(resolvePath('./utils.js', 'script.js')).toEqual('./utils.js');
+    expect(resolvePath('./utils.js', './deep/script.js')).toEqual('./deep/utils.js');
+    expect(resolvePath('./utils.js', 'deep/script.js')).toEqual('./deep/utils.js');
+    expect(resolvePath('./utils.js')).toEqual('./utils.js');
+
+    expect(resolvePath('../utils.js', './script.js')).toEqual('./utils.js');
+    expect(resolvePath('../utils.js', 'script.js')).toEqual('./utils.js');
+    expect(resolvePath('../utils.js', './deep/script.js')).toEqual('./utils.js');
+    expect(resolvePath('../utils.js', 'deep/script.js')).toEqual('./utils.js');
+    expect(resolvePath('../utils.js')).toEqual('./utils.js');
+
+    expect(resolvePath('../path/utils.js', './script.js')).toEqual('./path/utils.js');
+    expect(resolvePath('../path/utils.js', 'script.js')).toEqual('./path/utils.js');
+    expect(resolvePath('../path/utils.js', './deep/script.js')).toEqual('./path/utils.js');
+    expect(resolvePath('../path/utils.js', 'deep/script.js')).toEqual('./path/utils.js');
+    expect(resolvePath('../path/utils.js', 'very/deep/script.js')).toEqual('./very/path/utils.js');
+    expect(resolvePath('../path/utils.js')).toEqual('./path/utils.js');
+  });
 });
diff --git a/src/livecodes/compiler/import-map.ts b/src/livecodes/compiler/import-map.ts
index a915cd0040..27c1ec9cf8 100644
--- a/src/livecodes/compiler/import-map.ts
+++ b/src/livecodes/compiler/import-map.ts
@@ -11,25 +11,29 @@ import {
 } from '../utils/utils';
 import { compileInCompiler } from './compile-in-compiler';
 
-// https://regexr.com/8a2j7
+// https://regexr.com/8hs1i
 export const importsPattern =
-  /(import\s+?(?:(?:(?:[\w*\s{},\$]*)\s+from\s+?)|))((?:".*?")|(?:'.*?'))([\s]*?(?:;|$|))/g;
+  /((?:im|ex)port\s+?(?:(?:(?:[\w*\s{},\$]*)\s+from\s+?)|))((?:".*?")|(?:'.*?'))([\s]*?(?:;|$|))/g;
 
 // https://regexr.com/8a2ja
 export const dynamicImportsPattern = /(import\s*?\(\s*?((?:".*?")|(?:'.*?'))\s*?\))/g;
 
 export const getImports = (code: string, removeSpecifier = false) =>
-  [
-    ...[...removeComments(code).matchAll(new RegExp(importsPattern))],
-    ...[...removeComments(code).matchAll(new RegExp(dynamicImportsPattern))],
-  ]
-    .map((arr) => arr[2].replace(/"/g, '').replace(/'/g, ''))
-    .map((mod) => {
-      if (!removeSpecifier || !isBare(mod) || !mod.includes(':')) {
-        return mod;
-      }
-      return mod.split(':')[1];
-    });
+  Array.from(
+    new Set(
+      [
+        ...[...removeComments(code).matchAll(new RegExp(importsPattern))],
+        ...[...removeComments(code).matchAll(new RegExp(dynamicImportsPattern))],
+      ]
+        .map((arr) => arr[2].replace(/"/g, '').replace(/'/g, ''))
+        .map((mod) => {
+          if (!removeSpecifier || !isBare(mod) || !mod.includes(':')) {
+            return mod;
+          }
+          return mod.split(':')[1];
+        }),
+    ),
+  );
 
 const needsBundler = /* @__PURE__ */ (mod: string) =>
   !mod.startsWith('https://deno.bundlejs.com/') &&
@@ -61,6 +65,9 @@ const isStylesheet = /* @__PURE__ */ (mod: string) =>
     mod.endsWith('.styl')) &&
   !mod.startsWith('./style');
 
+const isRelative = /* @__PURE__ */ (mod: string) =>
+  mod.startsWith('./') || mod.startsWith('../') || mod.startsWith('/');
+
 export const findImportMapKey = /* @__PURE__ */ (mod: string, importmap: Record<string, string>) =>
   Object.keys(importmap).find((key) => key === mod || mod.startsWith(key + '/'));
 
@@ -71,7 +78,11 @@ export const createImportMap = (
 ) =>
   getImports(code)
     .map((libName) => {
-      if ((!needsBundler(libName) && !isBare(libName)) || isStylesheet(libName)) {
+      if (
+        isRelative(libName) ||
+        (!needsBundler(libName) && !isBare(libName)) ||
+        isStylesheet(libName)
+      ) {
         return {};
       } else {
         const imports = { ...config.imports, ...config.customSettings?.imports };
@@ -116,12 +127,13 @@ export const replaceImports = (
   { importMap, external }: { importMap?: Record<string, string>; external?: string } = {},
 ) => {
   importMap = importMap || createImportMap(code, config, { external });
-  return code.replace(new RegExp(importsPattern), (statement) => {
+
+  const replaceFn = (pattern: RegExp) => (statement: string) => {
     if (!importMap) {
       return statement;
     }
     const libName = statement
-      .replace(new RegExp(importsPattern), '$2')
+      .replace(new RegExp(pattern), '$2')
       .replace(/"/g, '')
       .replace(/'/g, '');
 
@@ -130,7 +142,11 @@ export const replaceImports = (
       return statement;
     }
     return statement.replace(key, importMap[key]);
-  });
+  };
+
+  return code
+    .replace(new RegExp(importsPattern), replaceFn(importsPattern))
+    .replace(new RegExp(dynamicImportsPattern), replaceFn(dynamicImportsPattern));
 };
 
 export const isScriptImport = (mod: string) =>
@@ -236,12 +252,40 @@ export const removeImports = (code: string, mods: string[]) =>
     return mods.includes(libName) ? '' : statement;
   });
 
+export const resolvePath = (path: string, currentPath = './index.html') => {
+  if (!path.startsWith('.') && !path.startsWith('/')) return path;
+  const baseUrl = 'https://localhost';
+  const basePath = new URL(currentPath, baseUrl).href;
+  try {
+    const url = new URL(path, basePath).href;
+    return url.replace(baseUrl, '.');
+  } catch {
+    return null;
+  }
+};
+
+// https://regexr.com/8hrlf
 export const styleimportsPattern =
-  /(?:@import\s+?)((?:".*?")|(?:'.*?')|(?:url\('.*?'\))|(?:url\(".*?"\)))(.*)?;/g;
+  /(?:@import\s+?)((?:".*?")|(?:'.*?')|(?:url\('?.*?'?\))|(?:url\(".*?"\)))(.*)?;/g;
 
 export const hasStyleImports = (code: string) => new RegExp(styleimportsPattern).test(code);
 
-export const replaceStyleImports = (code: string, exceptions?: string[] | RegExp[]) =>
+export const getStyleImports = (code: string) =>
+  Array.from(
+    new Set(
+      [...removeComments(code).matchAll(new RegExp(styleimportsPattern))].map((arr) =>
+        arr[1].replace(/url\(/g, '').replace(/\)/g, '').replace(/"/g, '').replace(/'/g, ''),
+      ),
+    ),
+  );
+
+export const replaceStyleImports = (
+  code: string,
+  {
+    exceptions,
+    stylesImportMap,
+  }: { exceptions?: string[] | RegExp[]; stylesImportMap?: Record<string, string> } = {},
+) =>
   code.replace(new RegExp(styleimportsPattern), (statement, match, media) => {
     if (
       exceptions?.some(
@@ -257,7 +301,7 @@ export const replaceStyleImports = (code: string, exceptions?: string[] | RegExp
       .replace(/'/g, '')
       .replace(/url\(/g, '')
       .replace(/\)/g, '');
-    const modified = '@import "' + modulesService.getUrl(url) + '";';
+    const modified = '@import "' + stylesImportMap?.[url] || modulesService.getUrl(url) + '";';
     const mediaQuery = media?.trim();
     return !isBare(url)
       ? statement
diff --git a/src/livecodes/config/config.ts b/src/livecodes/config/config.ts
index 8aa0ee2057..764807224e 100644
--- a/src/livecodes/config/config.ts
+++ b/src/livecodes/config/config.ts
@@ -32,6 +32,8 @@ export const getContentConfig = (config: Config | ContentConfig): ContentConfig
     markup: config.markup,
     style: config.style,
     script: config.script,
+    files: config.files,
+    mainFile: config.mainFile,
     stylesheets: config.stylesheets,
     scripts: config.scripts,
     cssPreset: config.cssPreset,
diff --git a/src/livecodes/config/default-config.ts b/src/livecodes/config/default-config.ts
index 8550af9528..803f6685d8 100644
--- a/src/livecodes/config/default-config.ts
+++ b/src/livecodes/config/default-config.ts
@@ -40,20 +40,58 @@ export const defaultConfig: Config = {
   files: [
     {
       filename: 'index.html',
-      content: '<h1>hello world</h1>',
+      content: `<h1>hello world</h1>
+
+<link href="styles.css" rel="stylesheet">
+<script type="module" src="script.ts"></script>
+`,
       language: 'html',
       hidden: false,
     },
     {
-      filename: 'style.css',
-      content: 'body{ color: blue; }',
+      filename: 'styles.css',
+      content: `@import "./middle.css";
+`,
+      language: 'css',
+      hidden: false,
+    },
+    {
+      filename: 'middle.css',
+      content: `@import "./colors.css";
+`,
+      language: 'css',
+      hidden: false,
+    },
+    {
+      filename: 'colors.css',
+      content: `h1 {
+  font-family: Arial, Helvetica, sans-serif;
+  color: red;
+}
+`,
       language: 'css',
       hidden: false,
     },
     {
-      filename: 'script.js',
-      content: 'console.log("hi");',
-      language: 'javascript',
+      filename: 'script.ts',
+      content: `import { v4 } from 'uuid';
+      import { msg } from './middle.ts';
+
+      console.log(v4());
+      console.log(msg);`,
+      language: 'typescript',
+      hidden: false,
+    },
+    {
+      filename: 'middle.ts',
+      content: `export { msg } from './message.ts';`,
+      language: 'typescript',
+      hidden: false,
+    },
+    {
+      filename: 'message.ts',
+      content: `export const msg: string = 'Hello!';`,
+      language: 'typescript',
       hidden: false,
     },
   ],
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 7d7cea24ae..0ef70a4e9a 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -118,6 +118,7 @@ import type {
   SDKEvent,
   Screen,
   ShareData,
+  SourceFile,
   Template,
   TestResult,
   Theme,
@@ -129,6 +130,7 @@ import type {
 } from './models';
 import { createNotifications } from './notifications';
 import { cleanResultFromDev, createResultPage } from './result';
+import { createMultiFileResultPage } from './result/multi-file-result-page';
 import { createAuthService, getAppCDN, sandboxService, shareService } from './services';
 import type { GitHubFile } from './services/github';
 import { permanentUrlService } from './services/permanent-url';
@@ -244,7 +246,7 @@ const sdkWatchers = {
   destroy: createPub<void>(),
 } as const satisfies Record<SDKEvent, ReturnType<typeof createPub<any>>>;
 
-const getEditorLanguage = (editorId: EditorId = 'markup') => editorLanguages?.[editorId];
+const getEditorLanguage = (editorId = 'markup') => editorLanguages?.[editorId];
 const getEditorLanguages = () => Object.values(editorLanguages || {});
 const getActiveEditor = () => editors[getConfig().activeEditor || 'markup'];
 const setActiveEditor = async (config: Config) => showEditor(config.activeEditor);
@@ -1021,13 +1023,23 @@ const getResultPage = async ({
   sourceEditor = undefined as EditorId | undefined,
   forExport = false,
   template = resultTemplate,
-  singleFile = true,
+  singleFileResult = true,
   runTests = false,
 }) => {
   updateConfig();
   const config = getConfig();
   const contentConfig = getContentConfig(config);
 
+  if (config.files.length > 0) {
+    return getMultiFileResultPage({
+      sourceEditor,
+      forExport,
+      template,
+      singleFileResult,
+      runTests,
+    });
+  }
+
   const getContent = (editor: Partial<Editor> | undefined) => {
     const editorContent = editor?.content ?? '';
     const hiddenContent = editor?.hiddenContent ?? '';
@@ -1094,17 +1106,10 @@ const getResultPage = async ({
   });
   const compiledScript = scriptCompileResult.code;
 
-  let compileInfo: CompileInfo = {
-    ...markupCompileResult.info,
-    ...scriptCompileResult.info,
-    importedContent:
-      (markupCompileResult.info.importedContent || '') +
-      (scriptCompileResult.info.importedContent || ''),
-    imports: {
-      ...scriptCompileResult.info.imports,
-      ...markupCompileResult.info.imports,
-    },
-  };
+  let compileInfo: CompileInfo = mergeCompileInfo(
+    markupCompileResult.info,
+    scriptCompileResult.info,
+  );
 
   const [styleCompileResult, testsCompileResult] = await Promise.all([
     compiler.compile(styleContent, styleLanguage, config, {
@@ -1120,10 +1125,7 @@ const getResultPage = async ({
   ]);
   const [compiledStyle, compiledTests] = [styleCompileResult, testsCompileResult].map((result) => {
     const { code, info } = getCompileResult(result);
-    compileInfo = {
-      ...compileInfo,
-      ...info,
-    };
+    compileInfo = mergeCompileInfo(compileInfo, info);
     return code;
   });
 
@@ -1155,11 +1157,13 @@ const getResultPage = async ({
       ...contentConfig.tests,
       compiled: compiledTests,
     },
+    files: [],
+    mainFile: undefined,
   };
   compiledCode.script.modified = compiledCode.script.compiled;
 
   if (scriptType != null && scriptType !== 'module') {
-    singleFile = true;
+    singleFileResult = true;
   }
 
   const result = await createResultPage({
@@ -1168,7 +1172,7 @@ const getResultPage = async ({
     forExport,
     template,
     baseUrl,
-    singleFile,
+    singleFileResult,
     runTests,
     compileInfo,
   });
@@ -1183,7 +1187,7 @@ const getResultPage = async ({
   logError(scriptLanguage, scriptCompileResult.info?.errors);
   logError(testsLanguage, getCompileResult(testsCompileResult).info?.errors);
 
-  if (singleFile) {
+  if (singleFileResult) {
     setCache({
       ...getCache(),
       ...compiledCode,
@@ -1202,6 +1206,135 @@ const getResultPage = async ({
   return result;
 };
 
+const getMultiFileResultPage = async ({
+  sourceEditor = undefined as EditorId | undefined,
+  forExport = false,
+  template = resultTemplate,
+  singleFileResult = true,
+  runTests = false,
+}) => {
+  const config = getConfig();
+  const cache = getCache();
+
+  const forceCompileStyles = [...config.processors, ...cache.processors].some((name) =>
+    processors.find((p) => name === p.name && p.needsHTML),
+  );
+
+  const testsNotChanged =
+    (!config.tests?.content && !cache.tests?.content) ||
+    (config.tests?.language === cache.tests?.language &&
+      config.tests?.content === cache.tests?.content &&
+      cache.tests?.compiled);
+
+  if (testsNotChanged && !config.tests?.content) {
+    toolsPane?.tests?.showResults({ results: [] });
+  }
+
+  const compiledFiles: Array<SourceFile & { compiled: string }> = [];
+  let compileInfo: CompileInfo = {};
+  const errors: Array<{ language: Language; filename: string; errors: string[] }> = [];
+
+  for (const file of config.files) {
+    const { filename, language, content } = file;
+    if (getLanguageEditorId(language) === 'style') continue;
+    const compileResult = await compiler.compile(content, language, config, { compileInfo });
+    compiledFiles.push({ ...file, compiled: compileResult.code });
+    compileInfo = mergeCompileInfo(compileInfo, compileResult.info);
+    if (compileInfo.errors?.length) {
+      errors.push({ language, filename, errors: compileInfo.errors || [] });
+    }
+  }
+
+  const compiledContent = compiledFiles.map((file) => file.compiled).join('\n');
+  for (const file of config.files) {
+    const { filename, language, content } = file;
+    if (getLanguageEditorId(language) !== 'style') continue;
+    const compileResult = await compiler.compile(content, language, config, {
+      compileInfo,
+      forceCompile: forceCompileStyles,
+      html: `${compiledContent}<script type="script-for-styles">${compileInfo.importedContent}</script>`,
+    });
+    compiledFiles.push({ ...file, compiled: compileResult.code });
+    compileInfo = mergeCompileInfo(compileInfo, compileResult.info);
+    if (compileInfo.errors?.length) {
+      errors.push({ language, filename, errors: compileInfo.errors || [] });
+    }
+  }
+
+  const testsCompileResult = await (runTests
+    ? testsNotChanged
+      ? Promise.resolve(getCache().tests?.compiled || '')
+      : compiler.compile(
+          config.tests?.content || '',
+          config.tests?.language || 'javascript',
+          config,
+          {},
+        )
+    : Promise.resolve(getCompileResult(getCache().tests?.compiled || '')));
+  const { code: compiledTests, info: testsCompileInfo } = getCompileResult(testsCompileResult);
+  if (testsCompileInfo?.errors?.length) {
+    errors.push({
+      language: config.tests?.language || 'javascript',
+      filename: 'tests',
+      errors: testsCompileInfo.errors || [],
+    });
+  }
+
+  // TODO: handle modified HTML
+
+  const result = await createMultiFileResultPage({
+    compiledFiles,
+    compiledTests,
+    config,
+    forExport,
+    template,
+    baseUrl,
+    singleFileResult,
+    runTests,
+    compileInfo,
+  });
+
+  const styleOnlyUpdate = sourceEditor === 'style' && !compileInfo.cssModules;
+
+  const logError = (language: Language, errors: string[] = []) => {
+    errors.forEach((err) => toolsPane?.console?.error(`[${getLanguageTitle(language)}] ${err}`));
+  };
+  errors.forEach(({ language, errors }) => logError(language, errors));
+
+  if (singleFileResult) {
+    setCache({
+      ...getCache(),
+      files: compiledFiles,
+      mainFile: config.mainFile,
+      result: cleanResultFromDev(result),
+      styleOnlyUpdate,
+    });
+
+    if (broadcastInfo.isBroadcasting) {
+      broadcast();
+    }
+    if (resultPopup && !resultPopup.closed) {
+      resultPopup?.postMessage({ result }, location.origin);
+    }
+  }
+
+  return result;
+};
+
+const mergeCompileInfo = (compileInfo: CompileInfo, newCompileInfo: CompileInfo) => ({
+  ...compileInfo,
+  ...newCompileInfo,
+  cssModules: {
+    ...compileInfo.cssModules,
+    ...newCompileInfo.cssModules,
+  },
+  importedContent: (compileInfo.importedContent || '') + (newCompileInfo.importedContent || ''),
+  imports: {
+    ...compileInfo.imports,
+    ...newCompileInfo.imports,
+  },
+});
+
 const reloadCompiler = async (config: Config, force = false) => {
   if (!compiler.isFake && !force) return;
   compiler = (window as any).compiler = await getCompiler({
@@ -1482,16 +1615,20 @@ const share = async (
 };
 
 const updateConfig = () => {
+  const newConfig = getConfig();
   editorIds.forEach((editorId) => {
-    setConfig({
-      ...getConfig(),
-      [editorId]: {
-        ...getConfig()[editorId],
-        language: getEditorLanguage(editorId),
-        content: editors[editorId].getValue(),
-      },
-    });
+    newConfig[editorId] = {
+      ...newConfig[editorId],
+      language: getEditorLanguage(editorId) as Language,
+      content: editors[editorId].getValue(),
+    };
   });
+  newConfig.files = newConfig.files.map((file) => ({
+    ...file,
+    language: getEditorLanguage(file.filename) as Language,
+    content: editors[file.filename].getValue(),
+  }));
+  setConfig(newConfig);
 };
 
 const loadConfig = async (
@@ -2638,7 +2775,7 @@ const handleChangeContent = () => {
     }
 
     for (const key of Object.keys(customEditors)) {
-      if (config[editorId].language === key) {
+      if (config[editorId]?.language === key) {
         await customEditors[key]?.show(true, {
           baseUrl,
           editors,
@@ -4939,7 +5076,7 @@ const handleResultPopup = () => {
       }
       if (ev.data.type === 'ready') {
         resultPopup?.postMessage(
-          { result: await getResultPage({ singleFile: true }) },
+          { result: await getResultPage({ singleFileResult: true }) },
           location.origin,
         );
       }
diff --git a/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts b/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts
index d9bf67bf17..63fa6bfbfd 100644
--- a/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts
+++ b/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts
@@ -193,7 +193,7 @@ self.createTailwindcssCompiler = (): CompilerFunction => {
 
   const tailwind4: CompilerFunction = async (code, { config, options }) => {
     const prepareCode = (css: string, html: string) => {
-      let result = replaceStyleImports(css, [/tailwindcss/g]);
+      let result = replaceStyleImports(css, { exceptions: [/tailwindcss/g] });
       if (!result.includes('@import')) {
         result = `@import "tailwindcss";${result}`;
       }
diff --git a/src/livecodes/models.ts b/src/livecodes/models.ts
index 353519be3a..9fbb7d2e8d 100644
--- a/src/livecodes/models.ts
+++ b/src/livecodes/models.ts
@@ -1,3 +1,5 @@
+import type { Config, SourceFile } from '../sdk/models';
+
 export type * from '../sdk/models';
 
 export interface ModalOptions {
@@ -46,3 +48,7 @@ export interface INinjaAction {
   ) => boolean;
   keepOpen?: boolean;
 }
+
+export type ConfigWithCompiled = Omit<Config, 'files'> & {
+  files: Array<SourceFile & { compiled: string }>;
+};
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
new file mode 100644
index 0000000000..39a82d3a15
--- /dev/null
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -0,0 +1,442 @@
+import {
+  createImportMap,
+  getImports,
+  getStyleImports,
+  hasImports,
+  replaceImports,
+  resolvePath,
+} from '../compiler/import-map';
+import { getLanguageByAlias, getLanguageCompiler, getLanguageEditorId } from '../languages/utils';
+import type { CompileInfo, Config, SourceFile } from '../models';
+import { getAppCDN, modulesService } from '../services/modules';
+import { testImports } from '../toolspane/test-imports';
+import { escapeScript, getAbsoluteUrl, isRelativeUrl, objectMap, toDataUrl } from '../utils/utils';
+import { browserJestUrl, esModuleShimsPath, spacingJsUrl } from '../vendors';
+
+export const createMultiFileResultPage = async ({
+  compiledFiles,
+  compiledTests,
+  config,
+  forExport,
+  template,
+  baseUrl,
+  // singleFileResult,
+  runTests,
+  compileInfo,
+}: {
+  compiledFiles: Array<SourceFile & { compiled: string }>;
+  compiledTests: string;
+  config: Config;
+  forExport: boolean;
+  template: string;
+  baseUrl: string;
+  singleFileResult: boolean;
+  runTests: boolean;
+  compileInfo: CompileInfo;
+}): Promise<string> => {
+  const absoluteBaseUrl = getAbsoluteUrl(baseUrl);
+
+  const mainFile = getMainFile(config);
+  const mainFileHTML = compiledFiles.find((f) => f.filename === mainFile)?.compiled || '';
+
+  const domParser = new DOMParser();
+  const dom = domParser.parseFromString(mainFileHTML, 'text/html');
+
+  // if export => clean, else => add utils
+  if (forExport) {
+    const utilsScript = dom.createElement('script');
+    utilsScript.innerHTML = 'window.livecodes = window.livecodes || {};';
+    dom.head.appendChild(utilsScript);
+  } else {
+    const templateDomParser = new DOMParser();
+    const templateDom = templateDomParser.parseFromString(template, 'text/html');
+    const script = templateDom.querySelector('script')!;
+    dom.head.appendChild(script.cloneNode(true));
+
+    const utilsScript = dom.createElement('script');
+    utilsScript.src = absoluteBaseUrl + '{{hash:result-utils.js}}';
+    utilsScript.dataset.env = 'development';
+    dom.head.appendChild(utilsScript);
+  }
+
+  // user-defined import map in <script type="importmap">
+  type ImportMap = Partial<{ [key in 'imports' | 'scopes']: Record<string, string> }>;
+  let userDefinedImportmap: ImportMap = {};
+  const importmapScript = dom.querySelector('script[type="importmap"]');
+  if (importmapScript) {
+    try {
+      userDefinedImportmap = JSON.parse(importmapScript.innerHTML.trim());
+    } catch {
+      // ignore
+    }
+    importmapScript.remove();
+  }
+
+  const configImports = {
+    ...config.imports,
+    ...config.customSettings.imports,
+    ...userDefinedImportmap.imports,
+  };
+
+  const isCss = (mod: string, compiledLanguage?: string) =>
+    mod.startsWith('data:text/css') || /\.css(\?|#|$)/i.test(mod) || compiledLanguage === 'css';
+
+  const fileUrls: Record<string, string> = {};
+  const stylesheetImports: Record<string, string> = {};
+  let codeImports: Record<string, string> = {};
+  const relativeImports: Record<string, string> = {};
+
+  // generate data urls for files
+  const getDataUrl = (file: SourceFile & { compiled: string }) => {
+    if (file.filename === mainFile) return;
+    const content = file.compiled;
+    const mimeType = file.filename.endsWith('.json')
+      ? 'application/json'
+      : file.filename.endsWith('.svg')
+        ? 'image/svg+xml'
+        : getLanguageEditorId(file.language) === 'markup'
+          ? 'text/html'
+          : getLanguageEditorId(file.language) === 'style'
+            ? 'text/css'
+            : getLanguageEditorId(file.language) === 'script'
+              ? 'text/javascript'
+              : 'text/plain';
+    const dataUrl = toDataUrl(content, mimeType);
+    fileUrls[file.filename] = dataUrl;
+    return dataUrl;
+  };
+
+  const externalModules = 'react,react-dom,preact,vue';
+
+  // handle imports
+  const stylesImportMap: Record<string, string> = {};
+  const getStylesheetWithImports = (file: SourceFile & { compiled: string }) => {
+    if (stylesImportMap[file.filename]) return file.compiled;
+    const styleImports = getStyleImports(file.compiled)
+      .filter((mod) => {
+        const resolvedImport = resolvePath(mod, './' + file.filename)?.replace('./', '');
+        if (!resolvedImport) return false;
+        return !(resolvedImport in stylesImportMap);
+      })
+      .map((mod) => mod.replace('./', ''));
+    if (styleImports.length > 0) {
+      const nextImport = compiledFiles.find((f) => f.filename === styleImports[0]);
+      if (!nextImport) return file.compiled;
+      return getStylesheetWithImports(nextImport);
+    }
+    const dataUrl = fileUrls[file.filename] || getDataUrl(file);
+    if (!dataUrl) return 'data:text/css;base64,';
+    stylesImportMap[file.filename] = dataUrl;
+    return file.compiled;
+  };
+
+  compiledFiles.forEach((file) => {
+    if (getLanguageEditorId(file.language) === 'style') {
+      file.compiled = getStylesheetWithImports(file);
+      return;
+    }
+
+    codeImports = {
+      ...codeImports,
+      ...createImportMap(file.compiled, config, { external: externalModules }),
+    };
+
+    getImports(file.compiled).forEach((mod) => {
+      const resolvedImport = resolvePath(mod, './' + file.filename);
+      if (
+        !resolvedImport ||
+        resolvedImport.replace('./', '~/') in codeImports ||
+        resolvedImport in stylesheetImports
+      ) {
+        return;
+      }
+      const importedFile = compiledFiles.find(
+        (f) =>
+          './' + f.filename === resolvedImport ||
+          './' + f.filename === resolvedImport + '.js' ||
+          './' + f.filename === resolvedImport + '.ts' ||
+          './' + f.filename === resolvedImport + '.jsx' ||
+          './' + f.filename === resolvedImport + '.tsx',
+      );
+      if (!importedFile) {
+        if (isCss(resolvedImport)) {
+          stylesheetImports[resolvedImport] = resolvedImport;
+        }
+        return;
+      }
+      const compiledLanguage =
+        getLanguageEditorId(importedFile.language) === 'style' ? 'css' : 'javascript';
+      if (isCss(resolvedImport, compiledLanguage)) {
+        const dataUrl = fileUrls[importedFile.filename] || getDataUrl(importedFile);
+        if (!dataUrl) return;
+        stylesheetImports[resolvedImport] = dataUrl;
+      } else {
+        // importmaps cannot override relative imports in data URLs
+        relativeImports[resolvedImport] = resolvedImport.replace('./', '~/');
+        // mark it with null till all relative imports are collected
+        codeImports[resolvedImport.replace('./', '~/')] = null as any;
+      }
+    });
+  });
+
+  if (Object.keys(relativeImports).length > 0) {
+    compiledFiles.forEach((file) => {
+      file.compiled = replaceImports(file.compiled, config, {
+        importMap: relativeImports,
+      });
+      if (codeImports['~/' + file.filename] === null) {
+        const dataUrl = getDataUrl(file);
+        if (!dataUrl) return;
+        codeImports['~/' + file.filename] = dataUrl;
+        fileUrls[file.filename] = dataUrl;
+      }
+    });
+  }
+
+  // imported stylesheets
+  Object.keys(stylesheetImports).forEach((mod) => {
+    const url = configImports[mod] || modulesService.getUrl(stylesheetImports[mod]);
+    const stylesheet = dom.createElement('link');
+    stylesheet.rel = 'stylesheet';
+    stylesheet.href = url;
+    dom.head.appendChild(stylesheet);
+
+    if (Object.keys(configImports).includes(mod)) {
+      // map stylesheets in import map to empty script to avoid loading css as js
+      configImports[mod] = 'data:text/javascript;charset=UTF-8;base64,';
+    }
+  });
+
+  const getRelativePath = (url: string) => url.replace(location.origin + location.pathname, './');
+
+  // stylesheet files added in markup
+  dom.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]').forEach((link) => {
+    const styleFile = compiledFiles.find(
+      (f) => resolvePath(getRelativePath(link.href)) === './' + f.filename,
+    );
+    if (!styleFile) return;
+    const dataUrl = fileUrls[styleFile.filename] || getDataUrl(styleFile);
+    if (!dataUrl) return;
+    link.href = dataUrl;
+  });
+
+  // script added in markup
+  dom.querySelectorAll<HTMLScriptElement>('script').forEach((script) => {
+    if (script.src) {
+      const scriptFile = compiledFiles.find(
+        (f) => resolvePath(getRelativePath(script.src), './' + mainFile) === './' + f.filename,
+      );
+      if (!scriptFile) return;
+      const dataUrl = toDataUrl(
+        replaceImports(scriptFile.compiled, config, {
+          importMap: relativeImports,
+        }),
+      );
+      if (!dataUrl) return;
+      script.src = dataUrl;
+    } else {
+      if (hasImports(script.innerHTML)) {
+        script.innerHTML = replaceImports(script.innerHTML, config, {
+          importMap: relativeImports,
+        });
+      }
+    }
+  });
+
+  // cleanup extra scripts added to detect classes for CSS processors
+  const extra = dom.querySelectorAll('script[type="script-for-styles"]');
+  extra.forEach((el) => el.remove());
+
+  compiledTests = runTests ? compiledTests || '' : '';
+
+  let compilerImports = {};
+  const handledLanguages = new Set<string>();
+
+  for (const { language, compiled } of compiledFiles) {
+    const lang = getLanguageByAlias(language);
+    const compiler = getLanguageCompiler(lang);
+    if (!lang || !compiler || handledLanguages.has(lang)) continue;
+
+    const compilerStyles =
+      typeof compiler.styles === 'function'
+        ? compiler.styles({ compiled, baseUrl: absoluteBaseUrl, config })
+        : compiler.styles || [];
+    compilerStyles.forEach((depStyleUrl) => {
+      const stylesheet = dom.createElement('link');
+      stylesheet.rel = 'stylesheet';
+      stylesheet.href = isRelativeUrl(depStyleUrl) ? absoluteBaseUrl + depStyleUrl : depStyleUrl;
+      dom.head.appendChild(stylesheet);
+    });
+
+    const compilerScripts =
+      typeof compiler.scripts === 'function'
+        ? compiler.scripts({ compiled, baseUrl: absoluteBaseUrl, config })
+        : compiler.scripts || [];
+    compilerScripts.forEach((depScriptUrl) => {
+      const depScript = dom.createElement('script');
+      depScript.src = isRelativeUrl(depScriptUrl) ? absoluteBaseUrl + depScriptUrl : depScriptUrl;
+      if (compiler.deferScripts) {
+        depScript.defer = true;
+      }
+      if (depScriptUrl.includes('-script-esm.')) {
+        depScript.type = 'module';
+      }
+      dom.head.appendChild(depScript);
+    });
+
+    if (compiler.inlineScript) {
+      if (typeof compiler.inlineScript === 'function') {
+        compiler.inlineScript = await compiler.inlineScript({
+          baseUrl,
+        });
+      }
+      const inlineScript = dom.createElement('script');
+      inlineScript.innerHTML = compiler.inlineScript;
+      dom.head.appendChild(inlineScript);
+    }
+
+    if (compiler.inlineModule) {
+      if (typeof compiler.inlineModule === 'function') {
+        compiler.inlineModule = await compiler.inlineModule({
+          baseUrl,
+        });
+      }
+      const inlineModule = dom.createElement('script');
+      inlineModule.innerHTML = compiler.inlineModule;
+      inlineModule.type = 'module';
+      dom.head.appendChild(inlineModule);
+    }
+
+    if (compiler.imports) {
+      compilerImports = {
+        ...compilerImports,
+        ...objectMap(compiler.imports, (url) => getAbsoluteUrl(url, baseUrl)),
+      };
+    }
+
+    handledLanguages.add(lang);
+  }
+
+  // import maps
+  const userImports =
+    config.customSettings.mapImports === false
+      ? {}
+      : {
+          ...codeImports,
+          ...(runTests && !forExport && hasImports(compiledTests)
+            ? createImportMap(compiledTests, config, { external: externalModules })
+            : {}),
+          ...Object.keys(stylesheetImports).reduce(
+            (acc, url) => ({
+              ...acc,
+              [url]: toDataUrl(''),
+            }),
+            {},
+          ),
+          // ...createCSSModulesImportMap(
+          //   code.script.compiled,
+          //   code.style.compiled,
+          //   compileInfo.cssModules,
+          //   styleExtension,
+          // ),
+          // ...createCSSModulesImportMap(
+          //   code.markup.compiled,
+          //   code.style.compiled,
+          //   compileInfo.cssModules,
+          //   styleExtension,
+          // ),
+          ...compileInfo.imports,
+        };
+
+  // allow config imports to override auto-generated user imports
+  // e.g. 'pkg/path/' should override 'pkg/path/mod.mjs'
+  Object.keys(userImports)
+    .filter((userKey) =>
+      Object.keys(configImports).find(
+        (configKey) => configKey.endsWith('/') && userKey.startsWith(configKey),
+      ),
+    )
+    .forEach((userKey) => {
+      delete userImports[userKey as keyof typeof userImports];
+    });
+
+  // avoid duplicate (p)react instances
+  const reactImports = (() => {
+    if (!externalModules) return {};
+    const reactUrl = modulesService.getModuleUrl('react');
+    const reactDomUrl = modulesService.getModuleUrl('react-dom');
+    const preactUrl = modulesService.getModuleUrl('preact');
+    return {
+      react: reactUrl,
+      'react/': reactUrl + '/',
+      'react-dom': reactDomUrl,
+      'react-dom/': reactDomUrl + '/',
+      preact: preactUrl,
+      'preact/': preactUrl + '/',
+    };
+  })();
+
+  const importMaps = {
+    ...userDefinedImportmap, // for "scopes"
+    imports: {
+      ...userImports,
+      ...reactImports,
+      ...compilerImports,
+      ...(runTests ? testImports : {}),
+      ...configImports,
+    },
+  };
+
+  if (Object.keys(importMaps).length > 0) {
+    const esModuleShims = dom.createElement('script');
+    esModuleShims.src = modulesService.getUrl(esModuleShimsPath, getAppCDN());
+    esModuleShims.async = true;
+    dom.head.appendChild(esModuleShims);
+
+    const importMapsScript = dom.createElement('script');
+    importMapsScript.type = 'importmap';
+    importMapsScript.innerHTML = JSON.stringify(importMaps, null, 2);
+    dom.head.appendChild(importMapsScript);
+  }
+
+  // spacing
+  if (config.showSpacing && !forExport) {
+    const spacingScript = dom.createElement('script');
+    spacingScript.src = spacingJsUrl;
+    spacingScript.dataset.env = 'development';
+    dom.body.appendChild(spacingScript);
+  }
+
+  // tests
+  if (runTests && !forExport) {
+    const jestScript = dom.createElement('script');
+    jestScript.src = browserJestUrl;
+    jestScript.dataset.env = 'development';
+    dom.body.appendChild(jestScript);
+
+    const testScript = dom.createElement('script');
+    testScript.type = 'module';
+    testScript.dataset.env = 'development';
+    testScript.innerHTML = `
+const {afterAll, afterEach, beforeAll, beforeEach, describe, fdescribe, xdescribe, it, test, fit, xtest, xit, expect, jest} = window.browserJest;
+${escapeScript(compiledTests)}
+
+window.browserJest.run().then(results => {
+  parent.postMessage({type: 'testResults', payload: {results: results.testResults }}, '*');
+}).catch((error) => {
+  parent.postMessage({type: 'testResults', payload: {error: error.message || String(error)}}, '*');
+});
+    `;
+    dom.body.appendChild(testScript);
+  }
+
+  return '<!DOCTYPE html>\n' + dom.documentElement.outerHTML;
+};
+
+export const getMainFile = (config: Config) =>
+  config.mainFile && config.files.find((f) => f.filename === config.mainFile)
+    ? config.mainFile
+    : config.files.find((f) => f.filename === 'index.html')
+      ? 'index.html'
+      : config.files.find((f) => getLanguageEditorId(f.language) === 'markup')?.filename ||
+        'index.html';
diff --git a/src/livecodes/result/result-page.ts b/src/livecodes/result/result-page.ts
index c269305b90..292ebfccab 100644
--- a/src/livecodes/result/result-page.ts
+++ b/src/livecodes/result/result-page.ts
@@ -33,7 +33,7 @@ export const createResultPage = async ({
   forExport,
   template,
   baseUrl,
-  singleFile,
+  singleFileResult,
   runTests,
   compileInfo,
 }: {
@@ -42,7 +42,7 @@ export const createResultPage = async ({
   forExport: boolean;
   template: string;
   baseUrl: string;
-  singleFile: boolean;
+  singleFileResult: boolean;
   runTests: boolean;
   compileInfo: CompileInfo;
 }): Promise<string> => {
@@ -162,7 +162,7 @@ export const createResultPage = async ({
   });
 
   // editor styles
-  if (singleFile) {
+  if (singleFileResult) {
     const style = code.style.compiled;
     const styleElement = dom.createElement('style');
     styleElement.id = '__livecodes_styles__';
@@ -425,7 +425,7 @@ export const createResultPage = async ({
     // editor script
     const script = code.script.compiled;
     const scriptElement = dom.createElement('script');
-    if (singleFile) {
+    if (singleFileResult) {
       scriptElement.innerHTML = escapeScript(script);
     } else {
       scriptElement.src = './script.js';
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index c4c122f2f7..f7e42171ca 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1954,6 +1954,8 @@ export type Cache = ContentConfig & {
   style: EditorCache;
   script: EditorCache;
   tests?: EditorCache;
+  files?: Array<SourceFile & { compiled: string }>;
+  mainFile?: string;
   result?: string;
   styleOnlyUpdate?: boolean;
 };

From cdc658a300b1ae930c48d28deca62dc6cd30141d Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 8 Nov 2025 08:25:20 +0200
Subject: [PATCH 004/143] scroll file tabs

---
 src/livecodes/UI/create-language-menus.ts |  3 ++-
 src/livecodes/core.ts                     |  4 +++
 src/livecodes/styles/app.scss             | 33 ++++++++++++++++++++---
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index 697a6cd9a0..6bcbf17ec8 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -188,7 +188,7 @@ export const createMultiFileEditorTab = ({
   if (!isMainFile) {
     const deleteButton = document.createElement('button');
     deleteButton.classList.add('delete-file-button');
-    deleteButton.innerHTML = '&times;';
+    deleteButton.innerHTML = deleteIcon;
     deleteButton.addEventListener('click', () => {
       if (
         confirm(
@@ -271,3 +271,4 @@ const getLanguageInfo = async (language: Language | Processor, baseUrl: string)
 };
 
 const infoIcon = '<i class="icon-info"></i>';
+const deleteIcon = '<i class="icon-close"></i>';
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 0ef70a4e9a..b0c90ff425 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -897,9 +897,13 @@ const configureMultiFile = (config: Config) => {
     tab.classList.toggle('hidden', isMultiFile);
   });
   if (!isMultiFile) {
+    document.documentElement.classList.remove('multi-file');
     multiFileTabs.forEach((tab) => tab.remove());
     UI.getEditorDivs().forEach((editor) => editor.remove());
   }
+  if (isMultiFile) {
+    document.documentElement.classList.add('multi-file');
+  }
 };
 
 const addPhpToken = (code: string) =>
diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
index ed54fac6ad..adcaddecb9 100644
--- a/src/livecodes/styles/app.scss
+++ b/src/livecodes/styles/app.scss
@@ -629,6 +629,27 @@ a#result-button {
   display: none !important;
 }
 
+.multi-file {
+  #toolbar {
+    .menu {
+      justify-content: center;
+      min-width: 32px;
+      padding: 0;
+    }
+
+    .menu-text {
+      display: none;
+    }
+
+    #select-editor {
+      width: calc(50vw - 200px);
+      overflow-x: auto;
+      overflow-y: hidden;
+      scrollbar-width: none;
+    }
+  }
+}
+
 @media only screen and (max-width: 1024px) {
   #toolbar {
     .menu {
@@ -1410,12 +1431,16 @@ a.editor-title {
   .delete-file-button {
     background: transparent;
     border: 0;
-    border-radius: 50%;
     color: var(--editor-title-color);
     cursor: pointer;
-    height: 12px;
-    margin-inline-end: -3px;
-    margin-inline-start: 3px;
+    height: 100%;
+    margin-inline-end: -7px;
+    margin-inline-start: 0;
+    width: var(--s16);
+
+    i {
+      font-size: var(--s10);
+    }
 
     &:hover {
       color: var(--editor-title-active);

From a594166ccbc2b1d2e63108041cc3208f94e48cef Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 8 Nov 2025 08:25:20 +0200
Subject: [PATCH 005/143] add file

---
 src/livecodes/UI/create-language-menus.ts |  50 ++++-
 src/livecodes/UI/selectors.ts             |   3 +
 src/livecodes/config/default-config.ts    |  26 ++-
 src/livecodes/core.ts                     | 226 ++++++++++++++--------
 src/livecodes/editor/monaco/monaco.ts     |   2 +-
 src/livecodes/languages/utils.ts          |   2 +
 src/livecodes/styles/app.scss             |  21 +-
 7 files changed, 224 insertions(+), 106 deletions(-)

diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index 6bcbf17ec8..84dcdf003b 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -164,15 +164,20 @@ export const createLanguageMenus = (
 
 export const createMultiFileEditorTab = ({
   title,
-  editFileName,
+  showEditor,
+  renameFile,
   deleteFile,
   isMainFile,
+  isNewFile = false,
 }: {
   title: string;
-  editFileName: (title: string) => void;
-  deleteFile: (title: string) => void;
+  showEditor: (filename: string) => void;
+  renameFile: (filename: string, newName: string) => void;
+  deleteFile: (filename: string) => void;
   isMainFile: boolean;
+  isNewFile: boolean;
 }) => {
+  let currentFileName = title;
   const selector = document.querySelector(`.editor-title[data-editor="${title}"]`);
   if (selector) return;
   const editorSelector = document.createElement('a');
@@ -180,6 +185,7 @@ export const createMultiFileEditorTab = ({
   editorSelector.classList.add('editor-title', 'noselect');
   editorSelector.dataset.editor = title;
   editorSelector.dataset.multiFile = 'true';
+  editorSelector.addEventListener('click', () => showEditor(currentFileName));
 
   const label = document.createElement('span');
   label.innerHTML = title;
@@ -213,26 +219,29 @@ export const createMultiFileEditorTab = ({
   };
 
   const accept = () => {
-    editFileName(label.innerText);
+    renameFile(currentFileName, label.innerText);
     label.contentEditable = 'false';
+    currentFileName = label.innerText;
+    showEditor(currentFileName);
     window.removeEventListener('click', onClick);
     window.removeEventListener('keydown', onEnter);
-    isEditing = false;
   };
+
   const onClick = (event: MouseEvent) => {
     if (event.target !== editorSelector.querySelector('span')) {
       accept();
     }
   };
+
   const onEnter = (event: KeyboardEvent) => {
     if (event.key === 'Enter') {
+      event.preventDefault();
       accept();
     }
   };
 
-  let isEditing = false;
-  editorSelector.ondblclick = () => {
-    isEditing = true;
+  const onDblClick = () => {
+    currentFileName = label.innerText;
     label.contentEditable = 'true';
     requestAnimationFrame(() => label.focus());
     selectAll(label);
@@ -240,7 +249,30 @@ export const createMultiFileEditorTab = ({
     window.addEventListener('keydown', onEnter);
   };
 
-  document.querySelector('#select-editor > div')?.appendChild(editorSelector);
+  editorSelector.ondblclick = onDblClick;
+
+  const scrollTo = document.querySelector('#multi-file-scroll-to');
+  document.querySelector('#select-editor > div')?.insertBefore(editorSelector, scrollTo);
+
+  if (isNewFile) {
+    scrollTo?.scrollIntoView({ behavior: 'smooth', inline: 'end' });
+    onDblClick();
+  }
+};
+
+export const createAddFileButton = (addFile: () => void) => {
+  if (!document.querySelector('#add-file-button')) {
+    const addFileButton = document.createElement('button');
+    addFileButton.id = 'add-file-button';
+    addFileButton.classList.add('app-menu-button', 'menu');
+    addFileButton.innerHTML = '<i class="icon-add" alt="add file"></i>';
+    addFileButton.addEventListener('click', addFile);
+    document.querySelector('#select-editor')?.appendChild(addFileButton);
+
+    const scrollTo = document.createElement('div');
+    scrollTo.id = 'multi-file-scroll-to';
+    document.querySelector('#select-editor > div')?.appendChild(scrollTo);
+  }
 };
 
 export const createProcessorItem = (processor: { name: string; title: string }) => {
diff --git a/src/livecodes/UI/selectors.ts b/src/livecodes/UI/selectors.ts
index ad99f28265..db825acb67 100644
--- a/src/livecodes/UI/selectors.ts
+++ b/src/livecodes/UI/selectors.ts
@@ -116,6 +116,9 @@ export const getEditorTitles = /* @__PURE__ */ () =>
 export const getEditorDivs = /* @__PURE__ */ () =>
   document.querySelectorAll<HTMLElement>('#editors > .editor');
 
+export const getMultiFileEditorDivs = /* @__PURE__ */ () =>
+  document.querySelectorAll<HTMLElement>('#editors > .editor[data-multi-file]');
+
 export const getToolspaneElement = /* @__PURE__ */ () =>
   document.querySelector('#output #tools-pane') as HTMLElement;
 
diff --git a/src/livecodes/config/default-config.ts b/src/livecodes/config/default-config.ts
index 803f6685d8..916bfd5a4f 100644
--- a/src/livecodes/config/default-config.ts
+++ b/src/livecodes/config/default-config.ts
@@ -41,44 +41,42 @@ export const defaultConfig: Config = {
     {
       filename: 'index.html',
       content: `<h1>hello world</h1>
-
-<link href="styles.css" rel="stylesheet">
-<script type="module" src="script.ts"></script>
-`,
+    <link href="styles.css" rel="stylesheet">
+    <script type="module" src="script.ts"></script>
+    `,
       language: 'html',
       hidden: false,
     },
     {
       filename: 'styles.css',
       content: `@import "./middle.css";
-`,
+    `,
       language: 'css',
       hidden: false,
     },
     {
       filename: 'middle.css',
       content: `@import "./colors.css";
-`,
+    `,
       language: 'css',
       hidden: false,
     },
     {
       filename: 'colors.css',
       content: `h1 {
-  font-family: Arial, Helvetica, sans-serif;
-  color: red;
-}
-`,
+      font-family: Arial, Helvetica, sans-serif;
+      color: red;
+    }
+    `,
       language: 'css',
       hidden: false,
     },
     {
       filename: 'script.ts',
       content: `import { v4 } from 'uuid';
-      import { msg } from './middle.ts';
-
-      console.log(v4());
-      console.log(msg);`,
+          import { msg } from './middle.ts';
+          console.log(v4());
+          console.log(msg);`,
       language: 'typescript',
       hidden: false,
     },
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index b0c90ff425..372351469c 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -21,6 +21,7 @@ import type {
 } from './UI/broadcast';
 import { getCommandMenuActions } from './UI/command-menu-actions';
 import {
+  createAddFileButton,
   createLanguageMenus,
   createMultiFileEditorTab,
   createProcessorItem,
@@ -76,6 +77,7 @@ import { importCompressedCode } from './import/code';
 import { importFromFiles } from './import/files';
 import { populateConfig } from './import/utils';
 import {
+  getFileLanguage,
   getLanguageByAlias,
   getLanguageCompiler,
   getLanguageEditorId,
@@ -207,7 +209,7 @@ let typeLoader: ReturnType<typeof createTypeLoader>;
 const screens: Screen[] = [];
 const params = getParams(); // query string params
 const iframeScrollPosition = { x: 0, y: 0 };
-const editorIds: EditorId[] = ['markup', 'style', 'script'];
+const editorIds = ['markup', 'style', 'script'];
 
 let baseUrl: string;
 let isEmbed: boolean;
@@ -417,7 +419,7 @@ const highlightSelectedLanguage = (editorId: EditorId, language: Language) => {
   });
 };
 
-const setEditorTitle = (editorId: EditorId, title: string) => {
+export const setEditorTitle = (editorId: EditorId, title: string) => {
   const editorTitle = document.querySelector(`#${editorId}-selector span`) as HTMLElement;
   const editorTitleContainer = document.querySelector(`#${editorId}-selector`) as HTMLElement;
   const language = getLanguageByAlias(title);
@@ -453,7 +455,10 @@ const createCopyButtons = () => {
     copyButton.innerHTML = copyImgHtml;
     copyButton.classList.add('copy-button', 'tool-buttons');
     copyButton.title = window.deps.translateString('core.copy.title', 'Copy');
-    document.getElementById(editorId)?.appendChild(copyButton);
+    (
+      document.getElementById(editorId) ||
+      document.querySelector(`div[data-editor-id="${editorId}"]`)
+    )?.appendChild(copyButton);
     eventsManager.addEventListener(copyButton, 'click', () => {
       if (copyToClipboard(editors?.[editorId]?.getValue())) {
         copyButton.innerHTML = `<span><img src="${baseUrl}assets/images/tick.svg" alt="copied"></span>`;
@@ -469,47 +474,75 @@ const createCopyButtons = () => {
   });
 };
 
-const createEditorUI = (title: string) => {
-  const editorsElement = UI.getEditorsElement();
-  let container = editorsElement.querySelector<HTMLElement>(`[data-editor-id="${title}"]`);
-  if (!container) {
-    container = document.createElement('div');
-    container.setAttribute('data-editor-id', title);
-    container.classList.add('editor');
-    editorsElement.insertBefore(container, UI.getEditorToolbar());
-  }
-  const editFileName = (filename: string) => {
-    const config = getConfig();
-    setConfig({
-      ...config,
-      files: config.files.map((f) => ({
-        ...f,
-        filename: f.filename === title ? filename : f.filename,
-      })),
-    });
-    if (config.autoupdate) {
-      run();
+const renameFile = (filename: string, newName: string) => {
+  // TODO: validate newName (existing file, extension, valid name)
+  const language = getFileLanguage(newName)!;
+  const config = getConfig();
+  setConfig({
+    ...config,
+    activeEditor: newName,
+    files: config.files.map((f) => ({
+      ...f,
+      language: f.filename === filename ? language : f.language,
+      filename: f.filename === filename ? newName : f.filename,
+    })),
+  });
+  UI.getEditorDivs().forEach((editorDiv) => {
+    if (editorDiv.dataset.editorId === filename) {
+      editorDiv.dataset.editorId = newName;
     }
-  };
-  const deleteFile = (filename: string) => {
-    const config = getConfig();
-    setConfig({
-      ...config,
-      files: config.files.filter((f) => f.filename !== filename),
-    });
-    if (config.autoupdate) {
-      run();
+  });
+  UI.getEditorTitles().forEach((editorTitle) => {
+    if (editorTitle.dataset.editor === filename) {
+      editorTitle.dataset.editor = newName;
     }
-  };
+  });
+  if (editorLanguages && editorLanguages[filename]) {
+    editorLanguages[newName] = editorLanguages[filename];
+    delete editorLanguages[filename];
+  }
+  if (editors[filename]) {
+    editors[newName] = editors[filename];
+    delete editors[filename];
+  }
+  changeLanguage(language, undefined, false, newName);
+};
 
+const deleteFile = (filename: string) => {
   const config = getConfig();
-  const isMainFile = config.mainFile
-    ? config.mainFile === title
-    : title === 'index.html' ||
-      config.files.find((f) => getLanguageEditorId(f.language) === 'markup')?.filename === title;
+  setConfig({
+    ...config,
+    files: config.files.filter((f) => f.filename !== filename),
+  });
+  if (config.autoupdate) {
+    run();
+  }
+};
 
-  createMultiFileEditorTab({ title, editFileName, deleteFile, isMainFile });
+const createEditorUI = (title: string, addTab = false) => {
+  const editorsElement = UI.getEditorsElement();
+  editorsElement.querySelector(`.editor[data-editor-id="${title}"]`)?.remove();
+  const container = document.createElement('div');
+  container.dataset.editorId = title;
+  container.dataset.multiFile = 'true';
+  container.classList.add('editor');
+  editorsElement.insertBefore(container, UI.getEditorToolbar());
+  if (addTab) {
+    const config = getConfig();
+    const isMainFile = config.mainFile
+      ? config.mainFile === title
+      : title === 'index.html' ||
+        config.files.find((f) => getLanguageEditorId(f.language) === 'markup')?.filename === title;
 
+    createMultiFileEditorTab({
+      title,
+      showEditor,
+      renameFile,
+      deleteFile,
+      isMainFile,
+      isNewFile: false,
+    });
+  }
   return container;
 };
 
@@ -581,6 +614,29 @@ const createEditors = async (config: Config) => {
   };
 
   if (config.files?.length) {
+    createAddFileButton(() => {
+      createMultiFileEditorTab({
+        title: 'script.js',
+        showEditor,
+        renameFile: async (filename: string, newName: string) => {
+          renameFile(filename, newName);
+          const fileLanguage = getFileLanguage(filename) || 'javascript';
+          const editor = await createEditor({
+            ...baseOptions,
+            container: createEditorUI(newName, true),
+            editorId: newName as EditorId,
+            language: fileLanguage,
+            value: '',
+          });
+          editorLanguages![newName] = fileLanguage;
+          editors[newName] = editor;
+        },
+        deleteFile,
+        isMainFile: false,
+        isNewFile: true,
+      });
+    });
+
     editorLanguages = { markup: 'html', style: 'css', script: 'javascript' };
     editors = {
       markup: createFakeEditor(markupOptions),
@@ -588,9 +644,10 @@ const createEditors = async (config: Config) => {
       script: createFakeEditor(scriptOptions),
     };
 
+    editorIds.length = 0;
     for (const file of config.files) {
-      const editorId = file.filename;
-      const container = createEditorUI(file.filename);
+      const editorId = file.filename as EditorId;
+      const container = createEditorUI(file.filename, /* addTab */ true);
       const editorOptions = {
         ...baseOptions,
         container,
@@ -601,6 +658,7 @@ const createEditors = async (config: Config) => {
       const editor = await createEditor(editorOptions);
       editorLanguages[editorId] = file.language;
       editors[editorId] = editor;
+      editorIds.push(editorId);
     }
   } else {
     const markupEditor = await createEditor(markupOptions);
@@ -653,23 +711,17 @@ const reloadEditors = async (config: Config) => {
 const updateEditors = async (editors: Editors, config: Config) => {
   const editorIds = Object.keys(editors) as Array<keyof Editors>;
   for (const editorId of editorIds) {
-    const language = getLanguageByAlias(
-      config[editorId as EditorId]?.language ||
-        config.files.find((f) => f.filename === editorId)?.language,
-    );
+    const source =
+      config[editorId as EditorId] || config.files.find((f) => f.filename === editorId);
+    const language = getLanguageByAlias(source.language);
     if (language) {
-      await changeLanguage(
-        language,
-        config[editorId as EditorId]?.content ||
-          config.files.find((f) => f.filename === editorId)?.content,
-        true,
-      );
+      await changeLanguage(language, source.content || '', true);
     }
     const editor = editors[editorId];
     if (config.foldRegions) {
       await editor.foldRegions?.();
     }
-    const foldedLines = config[editorId as EditorId]?.foldedLines;
+    const foldedLines = source.foldedLines;
     if (foldedLines?.length) {
       await editor.foldLines?.(foldedLines);
     }
@@ -795,6 +847,7 @@ const showEditor = (editorId: EditorId | (string & {}) = 'markup', isUpdate = fa
   titles.forEach((selector) => selector.classList.remove('active'));
   const activeTitle = titles.find((title) => title.dataset.editor === editorId);
   activeTitle?.classList.add('active');
+  activeTitle?.scrollIntoView({ behavior: 'smooth' });
   const editorDivs = [...UI.getEditorDivs()];
   editorDivs.forEach((editor) => (editor.style.display = 'none'));
   const activeEditor = editorDivs.find(
@@ -817,7 +870,7 @@ const showEditor = (editorId: EditorId | (string & {}) = 'markup', isUpdate = fa
   if (initialized || config.view !== 'result') {
     split?.show('code');
   }
-  configureEditorTools(getActiveEditor().getLanguage());
+  configureEditorTools(getActiveEditor()?.getLanguage());
   showEditorModeStatus(editorId);
 };
 
@@ -893,16 +946,19 @@ const configureMultiFile = (config: Config) => {
   ];
   const multiFileTabs = [...editorTabsContainer.querySelectorAll<HTMLElement>('[data-multi-file]')];
   const isMultiFile = config.files.length > 0;
+
   singleFileTabs.forEach((tab) => {
     tab.classList.toggle('hidden', isMultiFile);
   });
+  multiFileTabs.forEach((tab) => {
+    tab.classList.toggle('hidden', !isMultiFile);
+  });
+  document.documentElement.classList.toggle('multi-file', isMultiFile);
+
+  // clean up
   if (!isMultiFile) {
-    document.documentElement.classList.remove('multi-file');
     multiFileTabs.forEach((tab) => tab.remove());
-    UI.getEditorDivs().forEach((editor) => editor.remove());
-  }
-  if (isMultiFile) {
-    document.documentElement.classList.add('multi-file');
+    UI.getMultiFileEditorDivs().forEach((editor) => editor.remove());
   }
 };
 
@@ -937,8 +993,13 @@ const applyLanguageConfigs = async (language: Language) => {
   });
 };
 
-const changeLanguage = async (language: Language, value?: string, isUpdate = false) => {
-  const editorId = getLanguageEditorId(language);
+const changeLanguage = async (
+  language: Language,
+  value?: string,
+  isUpdate = false,
+  filename?: string,
+) => {
+  const editorId = filename || getLanguageEditorId(language);
   if (!editorId || !language || !languageIsEnabled(language, getConfig())) return;
   if (getLanguageSpecs(language)?.largeDownload) {
     notifications.info(
@@ -952,11 +1013,14 @@ const changeLanguage = async (language: Language, value?: string, isUpdate = fal
     );
   }
   const editor = editors[editorId];
-  editor.setLanguage(language, value ?? (getConfig()[editorId].content || ''));
+  editor.setLanguage(
+    language,
+    filename ? undefined : value ?? (getConfig()[editorId as EditorId]?.content || ''),
+  );
   if (editorLanguages) {
     editorLanguages[editorId] = language;
   }
-  setEditorTitle(editorId, language);
+  setEditorTitle(editorId as EditorId, language);
   showEditor(editorId, isUpdate);
   phpHelper({ editor: editors.script });
   if (!isEmbed && !isUpdate) {
@@ -1621,16 +1685,18 @@ const share = async (
 const updateConfig = () => {
   const newConfig = getConfig();
   editorIds.forEach((editorId) => {
-    newConfig[editorId] = {
-      ...newConfig[editorId],
-      language: getEditorLanguage(editorId) as Language,
-      content: editors[editorId].getValue(),
-    };
+    if (editorId === 'markup' || editorId === 'style' || editorId === 'script') {
+      newConfig[editorId] = {
+        ...newConfig[editorId],
+        language: getEditorLanguage(editorId) as Language,
+        content: editors[editorId]?.getValue(),
+      };
+    }
   });
   newConfig.files = newConfig.files.map((file) => ({
     ...file,
     language: getEditorLanguage(file.filename) as Language,
-    content: editors[file.filename].getValue(),
+    content: editors[file.filename]?.getValue(),
   }));
   setConfig(newConfig);
 };
@@ -1682,12 +1748,12 @@ const loadConfig = async (
 const applyConfig = async (newConfig: Partial<Config>, reload = false, oldConfig?: Config) => {
   const currentConfig = oldConfig || getConfig();
   const combinedConfig: Config = { ...currentConfig, ...newConfig };
+  configureMultiFile(combinedConfig);
   if (reload) {
     await updateEditors(editors, getConfig());
   }
   phpHelper({ editor: editors.script });
   setLoading(true);
-  configureMultiFile(combinedConfig);
   await setActiveEditor(combinedConfig);
 
   if (!isEmbed) {
@@ -5533,8 +5599,9 @@ const importExternalContent = async (options: {
   const hasContentUrls = (conf: Partial<Config>) =>
     editorIds.filter(
       (editorId) =>
-        (conf[editorId]?.contentUrl && !conf[editorId]?.content) ||
-        (conf[editorId]?.hiddenContentUrl && !conf[editorId]?.hiddenContent),
+        (editorId === 'markup' || editorId === 'style' || editorId === 'script') &&
+        ((conf[editorId]?.contentUrl && !conf[editorId]?.content) ||
+          (conf[editorId]?.hiddenContentUrl && !conf[editorId]?.hiddenContent)),
     ).length > 0;
   const validConfigUrl = getValidUrl(configUrl);
   if (importUrl?.startsWith('config') || importUrl?.startsWith('params')) {
@@ -5597,27 +5664,30 @@ const importExternalContent = async (options: {
     // load content from config contentUrl
     const editorsContent = await Promise.all(
       editorIds.map(async (editorId) => {
-        const contentUrl = config[editorId].contentUrl;
-        const hiddenContentUrl = config[editorId].hiddenContentUrl;
+        if (!['markup', 'style', 'script'].includes(editorId)) return;
+        const src = config[editorId as EditorId];
+        const contentUrl = src.contentUrl;
+        const hiddenContentUrl = src.hiddenContentUrl;
         const [content, hiddenContent] = await Promise.all([
-          contentUrl && getValidUrl(contentUrl) && !config[editorId].content
+          contentUrl && getValidUrl(contentUrl) && !src.content
             ? fetch(contentUrl).then((res) => res.text())
             : Promise.resolve(''),
-          hiddenContentUrl && getValidUrl(hiddenContentUrl) && !config[editorId].hiddenContent
+          hiddenContentUrl && getValidUrl(hiddenContentUrl) && !src.hiddenContent
             ? fetch(hiddenContentUrl).then((res) => res.text())
             : Promise.resolve(''),
         ]);
         return {
-          ...config[editorId],
+          ...src,
           ...(content ? { content } : {}),
           ...(hiddenContent ? { hiddenContent } : {}),
         };
       }),
     );
+    // TODO: handle files
     contentUrlConfig = {
-      markup: editorsContent[0],
-      style: editorsContent[1],
-      script: editorsContent[2],
+      markup: editorsContent[0] || config.markup,
+      style: editorsContent[1] || config.style,
+      script: editorsContent[2] || config.script,
     };
   }
 
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 338c985815..3c5afb42d8 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -300,7 +300,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     language: Language,
   ) => {
     const random = getRandomString();
-    const ext = getLanguageExtension(language);
+    const ext = editorId.split('.').pop() || getLanguageExtension(language);
     const extension =
       monacoMapLanguage(language) === 'typescript' && !ext?.endsWith('ts') && !ext?.endsWith('tsx')
         ? ext + '.tsx'
diff --git a/src/livecodes/languages/utils.ts b/src/livecodes/languages/utils.ts
index 903ca3aa17..27bd6fafe5 100644
--- a/src/livecodes/languages/utils.ts
+++ b/src/livecodes/languages/utils.ts
@@ -13,6 +13,8 @@ export const getLanguageByAlias = (alias: string = ''): Language | undefined =>
   )?.name;
 };
 
+export const getFileLanguage = (filename: string) => getLanguageByAlias(filename.split('.').pop());
+
 export const getLanguageTitle = (language: Language) => {
   const languageSpecs = window.deps.languages.find((lang) => lang.name === language);
   return languageSpecs?.longTitle || languageSpecs?.title || language.toUpperCase();
diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
index adcaddecb9..fd4ef222be 100644
--- a/src/livecodes/styles/app.scss
+++ b/src/livecodes/styles/app.scss
@@ -642,10 +642,23 @@ a#result-button {
     }
 
     #select-editor {
-      width: calc(50vw - 200px);
-      overflow-x: auto;
-      overflow-y: hidden;
-      scrollbar-width: none;
+      display: flex;
+
+      & > div {
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: none;
+        width: calc(50vw - 262px);
+      }
+    }
+
+    #add-file-button {
+      align-items: center;
+      border: 0;
+      cursor: pointer;
+      display: flex;
+      margin-inline-end: 0;
+      margin-top: -1px;
     }
   }
 }

From 9ca7c30aa961359cc25754feafc0dfc1ed6b6acb Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 8 Nov 2025 08:25:20 +0200
Subject: [PATCH 006/143] allow `editorId` to have filename

---
 src/livecodes/config/build-config.ts          | 11 ++-
 src/livecodes/config/utils.ts                 | 18 ++++
 src/livecodes/config/validate-config.ts       | 11 ++-
 src/livecodes/core.ts                         | 99 ++++++++++++++-----
 src/livecodes/editor/codejar/codejar.ts       | 11 ++-
 src/livecodes/editor/codemirror/codemirror.ts | 18 ++--
 src/livecodes/editor/fake-editor.ts           | 11 ++-
 src/livecodes/editor/monaco/monaco.ts         | 17 +++-
 .../result/multi-file-result-page.ts          |  9 +-
 src/sdk/models.ts                             |  3 +-
 10 files changed, 149 insertions(+), 59 deletions(-)
 create mode 100644 src/livecodes/config/utils.ts

diff --git a/src/livecodes/config/build-config.ts b/src/livecodes/config/build-config.ts
index 0d3eae9776..5f644a8399 100644
--- a/src/livecodes/config/build-config.ts
+++ b/src/livecodes/config/build-config.ts
@@ -12,6 +12,8 @@ import { addProp, cloneObject, decodeHTML, removeDuplicates, stringToValidJson }
 import { decompress } from '../utils/compression';
 import { defaultConfig } from './default-config';
 import { upgradeAndValidate } from './index';
+// eslint-disable-next-line import/order
+import { getMainFile, isEditorId } from './utils';
 
 /**
  * Builds and validates a configuration object by merging default config with user config and URL params
@@ -47,11 +49,14 @@ export const buildConfig = (appConfig: Partial<Config>): Config => {
     ...config,
     ...paramsConfig,
   };
-  const activeEditor = config.activeEditor || 'markup';
+
+  const activeEditor = config.activeEditor || config.files[0]?.filename || 'markup';
+  const mainFile = getMainFile(config);
 
   config = fixLanguageNames({
     ...config,
     activeEditor,
+    mainFile,
   });
   return config;
 };
@@ -173,7 +178,7 @@ export const loadParamConfig = (config: Config, params: UrlQueryParams): Partial
     const language = getLanguageByAlias(key);
     if (!language) return;
     const editorId = getLanguageEditorId(language);
-    if (editorId && !paramsConfig[editorId]) {
+    if (editorId && isEditorId(editorId) && !paramsConfig[editorId]) {
       const value = params[key];
       const content = typeof value === 'string' ? decodeHTML(value) : '';
       paramsConfig[editorId] = { language, content };
@@ -186,7 +191,7 @@ export const loadParamConfig = (config: Config, params: UrlQueryParams): Partial
   // ?lang=js
   const lang: any = getLanguageByAlias(params.language || params.lang);
   const editorId = getLanguageEditorId(lang);
-  if (editorId) {
+  if (editorId && isEditorId(editorId)) {
     if (paramsConfig[editorId]?.language === lang) {
       paramsConfig.activeEditor = editorId;
     } else if (!paramsConfig[editorId]?.content && config[editorId]?.language === lang) {
diff --git a/src/livecodes/config/utils.ts b/src/livecodes/config/utils.ts
new file mode 100644
index 0000000000..a7b21ea496
--- /dev/null
+++ b/src/livecodes/config/utils.ts
@@ -0,0 +1,18 @@
+import { getLanguageEditorId } from '../languages/utils';
+import type { Config, EditorId } from '../models';
+
+export const isEditorId = (editorId: string): editorId is 'markup' | 'style' | 'script' =>
+  editorId === 'markup' || editorId === 'style' || editorId === 'script';
+
+export const getSource = (editorId: EditorId, config: Config) =>
+  isEditorId(editorId) ? config[editorId] : config.files.find((f) => f.filename === editorId);
+
+export const getMainFile = (config: Config) =>
+  !config.files?.length
+    ? undefined
+    : config.mainFile && config.files.find((f) => f.filename === config.mainFile)
+      ? config.mainFile
+      : config.files.find((f) => f.filename === 'index.html')
+        ? 'index.html'
+        : config.files.find((f) => getLanguageEditorId(f.language) === 'markup')?.filename ||
+          'index.html';
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
index 425756716c..894d8526f4 100644
--- a/src/livecodes/config/validate-config.ts
+++ b/src/livecodes/config/validate-config.ts
@@ -1,4 +1,4 @@
-import { getLanguageByAlias, getLanguageEditorId } from '../languages';
+import { getFileLanguage, getLanguageByAlias, getLanguageEditorId } from '../languages';
 import type {
   Config,
   Editor,
@@ -11,6 +11,7 @@ import type {
 } from '../models';
 import { getFileExtension, removeDuplicates } from '../utils';
 import { defaultConfig } from './default-config';
+import { isEditorId } from './utils';
 
 export const validateConfig = (config: Partial<Config>): Partial<Config> => {
   type types = 'array' | 'boolean' | 'object' | 'number' | 'string' | 'undefined';
@@ -63,7 +64,8 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
           ? 'vue-app'
           : lang;
 
-  const getEditorDefaultLanguage = (editorId: EditorId) => defaultConfig[editorId].language;
+  const getEditorDefaultLanguage = (editorId: EditorId) =>
+    (isEditorId(editorId) ? defaultConfig[editorId].language : getFileLanguage(editorId)) || 'html';
 
   const validateEditorProps = (x: Editor, editorId: EditorId): Editor => ({
     language:
@@ -97,6 +99,9 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
         }
       : null;
 
+  const validateActiveEditor = (config: Partial<Config>) =>
+    includes([...editorIds, ...(config.files || []).map((f) => f.filename)], config.activeEditor);
+
   const validateTestsProps = (x: Partial<Config['tests']>): Partial<Config['tests']> => ({
     ...(x && is(x.language, 'string') ? { language: x.language } : {}),
     ...(x && is(x.content, 'string') ? { content: x.content } : {}),
@@ -156,7 +161,7 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
     ...(is(config.showSpacing, 'boolean') ? { showSpacing: config.showSpacing } : {}),
     ...(is(config.readonly, 'boolean') ? { readonly: config.readonly } : {}),
     ...(is(config.allowLangChange, 'boolean') ? { allowLangChange: config.allowLangChange } : {}),
-    ...(includes(editorIds, config.activeEditor) ? { activeEditor: config.activeEditor } : {}),
+    ...(validateActiveEditor(config) ? { activeEditor: config.activeEditor } : {}),
     ...(is(config.languages, 'array', 'string')
       ? { languages: removeDuplicates(config.languages) }
       : {}),
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 372351469c..8bf9c6fc95 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -43,6 +43,7 @@ import {
   setConfig,
   upgradeAndValidate,
 } from './config';
+import { getSource, isEditorId } from './config/utils';
 import { createCustomEditors, createEditor, getFontFamily } from './editor';
 import { createFakeEditor } from './editor/fake-editor';
 import { hasJsx } from './editor/ts-compiler-options';
@@ -251,7 +252,6 @@ const sdkWatchers = {
 const getEditorLanguage = (editorId = 'markup') => editorLanguages?.[editorId];
 const getEditorLanguages = () => Object.values(editorLanguages || {});
 const getActiveEditor = () => editors[getConfig().activeEditor || 'markup'];
-const setActiveEditor = async (config: Config) => showEditor(config.activeEditor);
 
 const loadStyles = () =>
   isHeadless
@@ -420,6 +420,7 @@ const highlightSelectedLanguage = (editorId: EditorId, language: Language) => {
 };
 
 export const setEditorTitle = (editorId: EditorId, title: string) => {
+  if (!isEditorId(editorId)) return;
   const editorTitle = document.querySelector(`#${editorId}-selector span`) as HTMLElement;
   const editorTitleContainer = document.querySelector(`#${editorId}-selector`) as HTMLElement;
   const language = getLanguageByAlias(title);
@@ -505,6 +506,10 @@ const renameFile = (filename: string, newName: string) => {
     editors[newName] = editors[filename];
     delete editors[filename];
   }
+  const id = editorIds.findIndex((editorId) => editorId === filename);
+  if (id > -1) {
+    editorIds[id] = newName;
+  }
   changeLanguage(language, undefined, false, newName);
 };
 
@@ -514,6 +519,22 @@ const deleteFile = (filename: string) => {
     ...config,
     files: config.files.filter((f) => f.filename !== filename),
   });
+  if (editorLanguages && editorLanguages[filename]) {
+    delete editorLanguages[filename];
+  }
+  if (editors[filename]) {
+    editors[filename].destroy();
+    delete editors[filename];
+  }
+  const id = editorIds.findIndex((editorId) => editorId === filename);
+  if (id > -1) {
+    editorIds.splice(id, 1);
+  }
+  UI.getEditorDivs().forEach((editorDiv) => {
+    if (editorDiv.dataset.editorId === filename) {
+      editorDiv.remove();
+    }
+  });
   if (config.autoupdate) {
     run();
   }
@@ -624,12 +645,13 @@ const createEditors = async (config: Config) => {
           const editor = await createEditor({
             ...baseOptions,
             container: createEditorUI(newName, true),
-            editorId: newName as EditorId,
+            editorId: newName,
             language: fileLanguage,
             value: '',
           });
           editorLanguages![newName] = fileLanguage;
           editors[newName] = editor;
+          editorIds.push(newName);
         },
         deleteFile,
         isMainFile: false,
@@ -711,17 +733,23 @@ const reloadEditors = async (config: Config) => {
 const updateEditors = async (editors: Editors, config: Config) => {
   const editorIds = Object.keys(editors) as Array<keyof Editors>;
   for (const editorId of editorIds) {
-    const source =
-      config[editorId as EditorId] || config.files.find((f) => f.filename === editorId);
+    if (typeof editorId !== 'string') {
+      continue;
+    }
+    const source = getSource(editorId, config);
+    if (!source) {
+      continue;
+    }
     const language = getLanguageByAlias(source.language);
     if (language) {
-      await changeLanguage(language, source.content || '', true);
+      const filename = 'filename' in source ? source.filename : undefined;
+      await changeLanguage(language, source.content || '', true, filename);
     }
     const editor = editors[editorId];
     if (config.foldRegions) {
       await editor.foldRegions?.();
     }
-    const foldedLines = source.foldedLines;
+    const foldedLines = 'foldedLines' in source ? source.foldedLines : undefined;
     if (foldedLines?.length) {
       await editor.foldLines?.(foldedLines);
     }
@@ -833,7 +861,7 @@ const showMode = (mode?: Config['mode'], view?: Config['view']) => {
 const showEditor = (editorId: EditorId | (string & {}) = 'markup', isUpdate = false) => {
   const config = getConfig();
   if (
-    config[editorId as EditorId]?.hideTitle ||
+    (isEditorId(editorId) && config[editorId].hideTitle) ||
     config.files.find((f) => f.filename === editorId)?.hidden
   ) {
     return;
@@ -1013,9 +1041,12 @@ const changeLanguage = async (
     );
   }
   const editor = editors[editorId];
+  if (filename) {
+    editor.setEditorId(filename);
+  }
   editor.setLanguage(
     language,
-    filename ? undefined : value ?? (getConfig()[editorId as EditorId]?.content || ''),
+    value ?? (filename ? undefined : getSource(editorId, getConfig())?.content || ''),
   );
   if (editorLanguages) {
     editorLanguages[editorId] = language;
@@ -1059,10 +1090,18 @@ const updateCompiledCode = () => {
       style: 'css',
       script: 'javascript',
     };
-    const lang = getLanguageCompiler(getConfig()[editorId].language)?.compiledCodeLanguage;
+    const srcLang = getSource(editorId, getConfig())?.language;
+    const lang = getLanguageCompiler(srcLang)?.compiledCodeLanguage;
     return {
-      language: lang || defaultLang[editorId],
-      label: lang === 'json' ? 'JSON' : getLanguageByAlias(lang) || lang || defaultLang[editorId],
+      language: lang || defaultLang[editorId] || getFileLanguage(editorId) || 'html',
+      label:
+        lang === 'json'
+          ? 'JSON'
+          : getLanguageByAlias(lang) ||
+            lang ||
+            defaultLang[editorId] ||
+            getFileLanguage(editorId) ||
+            'html',
     };
   };
   const compiledLanguages: { [key in EditorId]: { language: Language; label: string } } = {
@@ -1754,7 +1793,7 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false, oldConfig
   }
   phpHelper({ editor: editors.script });
   setLoading(true);
-  await setActiveEditor(combinedConfig);
+  showEditor(combinedConfig.activeEditor);
 
   if (!isEmbed) {
     loadSettings(combinedConfig);
@@ -2844,8 +2883,10 @@ const handleChangeContent = () => {
       await getResultPage({ sourceEditor: editorId });
     }
 
+    const lang = getSource(editorId, config)?.language;
+
     for (const key of Object.keys(customEditors)) {
-      if (config[editorId]?.language === key) {
+      if (lang === key) {
         await customEditors[key]?.show(true, {
           baseUrl,
           editors,
@@ -2984,22 +3025,32 @@ const handleKeyboardShortcuts = () => {
 
     // Ctrl + Alt + (1-3) activates editor 1-3
     // Ctrl + Alt + (ArrowLeft/ArrowRight) activates previous/next editor
-    const editorIds = (['markup', 'style', 'script'] as EditorId[]).filter(
-      (id) => getConfig()[id].hideTitle !== true,
-    );
-    if (ctrl(e) && e.altKey && ['1', '2', '3', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
+    const config = getConfig();
+    const editorIds = (
+      config.files.length
+        ? config.files.map((f) => f.filename)
+        : (['markup', 'style', 'script'] as EditorId[])
+    ).filter((id) => {
+      const src = getSource(id, config);
+      if (!src) return false;
+      if ('hideTitle' in src) return src.hideTitle !== true;
+      if ('hidden' in src) return src.hidden !== true;
+      return true;
+    });
+    const editorNumbers = editorIds.map((_, id) => String(id + 1));
+    if (ctrl(e) && e.altKey && [...editorNumbers, 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
       e.preventDefault();
       split?.show('code');
-      const index = ['1', '2', '3'].includes(e.key)
+      const index = editorNumbers.includes(e.key)
         ? Number(e.key) - 1
         : e.key === 'ArrowLeft'
-          ? editorIds.findIndex((id) => id === getConfig().activeEditor) - 1 || 0
+          ? editorIds.findIndex((id) => id === config.activeEditor) - 1 || 0
           : e.key === 'ArrowRight'
-            ? editorIds.findIndex((id) => id === getConfig().activeEditor) + 1 || 0
+            ? editorIds.findIndex((id) => id === config.activeEditor) + 1 || 0
             : 0;
       const editorIndex =
         index === editorIds.length ? 0 : index === -1 ? editorIds.length - 1 : index;
-      showEditor(editorIds[editorIndex] as EditorId);
+      showEditor(editorIds[editorIndex]);
       lastkeys = 'Ctrl + Alt + ' + e.key;
       return;
     }
@@ -5664,8 +5715,8 @@ const importExternalContent = async (options: {
     // load content from config contentUrl
     const editorsContent = await Promise.all(
       editorIds.map(async (editorId) => {
-        if (!['markup', 'style', 'script'].includes(editorId)) return;
-        const src = config[editorId as EditorId];
+        if (!isEditorId(editorId)) return;
+        const src = config[editorId];
         const contentUrl = src.contentUrl;
         const hiddenContentUrl = src.hiddenContentUrl;
         const [content, hiddenContent] = await Promise.all([
@@ -5916,7 +5967,7 @@ const createApi = (): API => {
       split?.show('code', full);
     } else if (panel === 'console' || panel === 'compiled' || panel === 'tests') {
       split?.show('output');
-      toolsPane?.setActiveTool(panel);
+      toolsPane?.setActiveTool(panel as 'console' | 'compiled' | 'tests');
       if (full) {
         toolsPane?.maximize();
       } else {
diff --git a/src/livecodes/editor/codejar/codejar.ts b/src/livecodes/editor/codejar/codejar.ts
index 400684159a..764a0adabc 100644
--- a/src/livecodes/editor/codejar/codejar.ts
+++ b/src/livecodes/editor/codejar/codejar.ts
@@ -10,6 +10,7 @@ import 'prismjs/components/prism-typescript';
 import 'prismjs/plugins/autoloader/prism-autoloader';
 import 'prismjs/plugins/line-numbers/prism-line-numbers';
 
+import { getFileLanguage } from '../../languages';
 import type {
   CodeEditor,
   CodejarTheme,
@@ -32,11 +33,10 @@ Prism.manual = true;
 Prism.plugins.autoloader.languages_path = prismBaseUrl;
 
 export const createEditor = async (options: EditorOptions): Promise<CodeEditor> => {
-  const { container, mode, editorId, readonly, isEmbed, getFormatterConfig, getFontFamily } =
-    options;
+  const { container, mode, readonly, isEmbed, getFormatterConfig, getFontFamily } = options;
   if (!container) throw new Error('editor container not found');
 
-  let { value, language } = options;
+  let { value, language, editorId } = options;
   let currentPosition: EditorPosition = { lineNumber: 1 };
   const mapLanguage = options.mapLanguage || ((lang: Language) => lang);
   let mappedLanguage = language === 'wat' ? 'wasm' : mapLanguage(language);
@@ -135,6 +135,10 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   // codejar?.onPaste(handleUpdate);
 
   const getEditorId = () => editorId;
+  const setEditorId = (filename: string) => {
+    editorId = filename;
+    language = getFileLanguage(filename) || language;
+  };
   const getValue = () => (codejar ? codejar.toString() : value);
   const setValue = (newValue = '\n') => {
     value = newValue;
@@ -427,6 +431,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     getLanguage,
     setLanguage,
     getEditorId,
+    setEditorId,
     focus,
     getPosition,
     setPosition: (position) => setPosition(position),
diff --git a/src/livecodes/editor/codemirror/codemirror.ts b/src/livecodes/editor/codemirror/codemirror.ts
index 199efa8e0b..d8229d760c 100644
--- a/src/livecodes/editor/codemirror/codemirror.ts
+++ b/src/livecodes/editor/codemirror/codemirror.ts
@@ -29,6 +29,7 @@ import { colorPicker } from '@replit/codemirror-css-color-picker';
 
 // these are imported normally
 import { getEditorModeNode } from '../../UI/selectors';
+import { getFileLanguage } from '../../languages';
 import type {
   CodeEditor,
   CodemirrorTheme,
@@ -56,15 +57,9 @@ let tabFocusMode = false;
 const changeTabFocusMode = debounce(() => (tabFocusMode = !tabFocusMode), 50);
 
 export const createEditor = async (options: EditorOptions): Promise<CodeEditor> => {
-  const {
-    container,
-    readonly,
-    isEmbed,
-    editorId,
-    getFormatterConfig,
-    getFontFamily,
-    getLanguageExtension,
-  } = options;
+  const { container, readonly, isEmbed, getFormatterConfig, getFontFamily, getLanguageExtension } =
+    options;
+  let editorId = options.editorId;
   let editorSettings: EditorConfig = { ...options };
   if (!container) throw new Error('editor container not found');
 
@@ -308,6 +303,10 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   showEditorMode(options.editorMode);
 
   const getEditorId = () => editorId;
+  const setEditorId = (filename: string) => {
+    editorId = filename;
+    language = getFileLanguage(filename) || language;
+  };
   const getValue = () => view.state.doc.toString();
   const setValue = (value = '', newState = true) => {
     if (newState) {
@@ -527,6 +526,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     getLanguage,
     setLanguage,
     getEditorId,
+    setEditorId,
     focus,
     getPosition,
     setPosition,
diff --git a/src/livecodes/editor/fake-editor.ts b/src/livecodes/editor/fake-editor.ts
index ef354afcf3..bcc47e9712 100644
--- a/src/livecodes/editor/fake-editor.ts
+++ b/src/livecodes/editor/fake-editor.ts
@@ -1,9 +1,8 @@
-import { getLanguageEditorId } from '../languages';
+import { getFileLanguage } from '../languages';
 import type { CodeEditor, EditorOptions } from '../models';
 
 export const createFakeEditor = (options: EditorOptions): CodeEditor => {
-  let value = options.value;
-  let language = options.language;
+  let { value, language, editorId } = options;
   return {
     getValue: () => value,
     setValue: (v = '') => {
@@ -16,7 +15,11 @@ export const createFakeEditor = (options: EditorOptions): CodeEditor => {
         value = v;
       }
     },
-    getEditorId: () => getLanguageEditorId(language) || 'markup',
+    getEditorId: () => editorId,
+    setEditorId: (fileName) => {
+      editorId = fileName;
+      language = getFileLanguage(fileName) || language;
+    },
     focus: () => undefined,
     getPosition: () => ({ lineNumber: 1, column: 1 }),
     setPosition: () => undefined,
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 3c5afb42d8..fb8e898563 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -2,6 +2,7 @@ import type * as Monaco from 'monaco-editor';
 
 import { getEditorModeNode } from '../../UI/selectors';
 import { getImports } from '../../compiler/import-map';
+import { getFileLanguage } from '../../languages/utils';
 import type {
   APIError,
   CodeEditor,
@@ -202,7 +203,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     ...consoleOptions,
   };
 
-  const editorId = options.editorId;
+  let editorId = options.editorId;
   const initOptions =
     editorId === 'console'
       ? consoleOptions
@@ -219,7 +220,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     const JSLangs = ['javascript', 'jsx', 'react', 'flow', 'solid', 'react-native'];
     const isJSLang = JSLangs.includes(language);
     if (
-      !['script', 'tests', 'editorSettings'].includes(editorId) ||
+      // !['script', 'tests', 'editorSettings'].includes(editorId) ||
       !['javascript', 'typescript'].includes(monacoMapLanguage(language))
     ) {
       return;
@@ -300,12 +301,14 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     language: Language,
   ) => {
     const random = getRandomString();
-    const ext = editorId.split('.').pop() || getLanguageExtension(language);
+    const ext = getLanguageExtension(language);
     const extension =
       monacoMapLanguage(language) === 'typescript' && !ext?.endsWith('ts') && !ext?.endsWith('tsx')
         ? ext + '.tsx'
         : ext;
-    modelUri = `file:///${editorId}.${random}.${extension}`;
+    modelUri = editorId.includes('.')
+      ? `file:///${editorId}`
+      : `file:///${editorId}.${random}.${extension}`;
     const oldModel = editor.getModel();
     const model = monaco.editor.createModel(
       value || '',
@@ -358,6 +361,11 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   }
 
   const getEditorId = () => editorId;
+  const setEditorId = (filename: string) => {
+    editorId = filename;
+    language = getFileLanguage(filename) || language;
+    setModel(editor, editor.getValue(), language);
+  };
   const getValue = () => editor.getValue();
   const setValue = (value = '') => {
     editor.getModel()?.setValue(value);
@@ -905,6 +913,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     getLanguage,
     setLanguage,
     getEditorId,
+    setEditorId,
     focus,
     getPosition,
     setPosition,
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 39a82d3a15..3065d6c3e8 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -6,6 +6,7 @@ import {
   replaceImports,
   resolvePath,
 } from '../compiler/import-map';
+import { getMainFile } from '../config/utils';
 import { getLanguageByAlias, getLanguageCompiler, getLanguageEditorId } from '../languages/utils';
 import type { CompileInfo, Config, SourceFile } from '../models';
 import { getAppCDN, modulesService } from '../services/modules';
@@ -432,11 +433,3 @@ window.browserJest.run().then(results => {
 
   return '<!DOCTYPE html>\n' + dom.documentElement.outerHTML;
 };
-
-export const getMainFile = (config: Config) =>
-  config.mainFile && config.files.find((f) => f.filename === config.mainFile)
-    ? config.mainFile
-    : config.files.find((f) => f.filename === 'index.html')
-      ? 'index.html'
-      : config.files.find((f) => getLanguageEditorId(f.language) === 'markup')?.filename ||
-        'index.html';
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index f7e42171ca..9b6fc8dd22 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1218,7 +1218,7 @@ export interface EditorPosition {
   column?: number;
 }
 
-export type EditorId = 'markup' | 'style' | 'script';
+export type EditorId = 'markup' | 'style' | 'script' | (string & {});
 
 export interface Editors {
   [key: string]: CodeEditor;
@@ -1574,6 +1574,7 @@ export interface CodeEditor {
   getLanguage: () => Language;
   setLanguage: (language: Language, value?: string) => void;
   getEditorId: () => string;
+  setEditorId: (filename: string) => void;
   focus: () => void;
   getPosition: () => EditorPosition;
   setPosition: (position: EditorPosition) => void;

From 07fee729b2c92245a98e53fd4cd2e89c00e91a32 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 8 Nov 2025 08:25:20 +0200
Subject: [PATCH 007/143] feat(Config): rename `Editor.hideTitle` to
 `Editor.hidden`

---
 .../configuration/configuration-object.mdx    | 20 +++++----
 docs/docs/languages/svelte.mdx                |  2 +-
 docs/docs/languages/vue.mdx                   |  2 +-
 .../config/__tests__/build-config.spec.ts     |  6 +--
 src/livecodes/config/build-config.ts          |  5 +--
 src/livecodes/config/upgrade-config.ts        | 15 +++++++
 src/livecodes/config/validate-config.ts       | 35 ++++++++++++----
 src/livecodes/core.ts                         | 35 ++++++----------
 src/sdk/models.ts                             | 41 ++++++++++++-------
 9 files changed, 100 insertions(+), 61 deletions(-)

diff --git a/docs/docs/configuration/configuration-object.mdx b/docs/docs/configuration/configuration-object.mdx
index fbd5982f6b..b27487477e 100644
--- a/docs/docs/configuration/configuration-object.mdx
+++ b/docs/docs/configuration/configuration-object.mdx
@@ -141,6 +141,12 @@ An object that configures the language and content of the markup editor. This ca
   A URL to load `content` from. It has to be a valid URL that is CORS-enabled.
   The URL is only fetched if `content` property had no value.
 
+- `hidden`:
+  Type: [`boolean | undefined`](../api/interfaces/Config.md#hidden)
+  Default: `""`
+  If `true`, the title of the code editor is hidden, however its code is still evaluated.
+  This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).
+
 - `hiddenContent`:
   Type: [`string | undefined`](../api/interfaces/Config.md#hiddencontent)
   Default: `undefined`
@@ -153,18 +159,12 @@ An object that configures the language and content of the markup editor. This ca
   A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.
   The URL is only fetched if `hiddenContent` property had no value.
 
-- `foldedLines`:
-  Type: [`Array<{ from: number; to: number }> | undefined`](../api/interfaces/Config.md#foldedlines)
-  Default: `undefined`
-  Lines that get folded when the editor loads. The code can be unfolded by clicking on arrow beside the line.
-  This can be useful for less relevant code in embedded playgrounds.
-
 - `title`:
   Type: [`string | undefined`](../api/interfaces/Config.md#title)
   Default: `""`
   If set, this is used as the title of the editor in the UI, overriding the default title set to the language name (e.g. "Python" can be used instead of "Py (Wasm)").
 
-- `hideTitle`:
+- `hideTitle` (**deprecated**, use `hidden` instead):
   Type: [`boolean | undefined`](../api/interfaces/Config.md#hidetitle)
   Default: `""`
   If `true`, the title of the code editor is hidden, however its code is still evaluated.
@@ -186,6 +186,12 @@ An object that configures the language and content of the markup editor. This ca
   The initial position of the cursor in the code editor.
   Example: `{lineNumber: 5, column: 10}`
 
+- `foldedLines`:
+  Type: [`Array<{ from: number; to: number }> | undefined`](../api/interfaces/Config.md#foldedlines)
+  Default: `undefined`
+  Lines that get folded when the editor loads. The code can be unfolded by clicking on arrow beside the line.
+  This can be useful for less relevant code in embedded playgrounds.
+
 ### `style`
 
 Type: [`Editor`](../api/interfaces/Config.md#style)
diff --git a/docs/docs/languages/svelte.mdx b/docs/docs/languages/svelte.mdx
index ce4c89aef0..a78f31998b 100644
--- a/docs/docs/languages/svelte.mdx
+++ b/docs/docs/languages/svelte.mdx
@@ -116,7 +116,7 @@ import Counter from './Counter.svelte';
 
 <LiveCodes config={multi}></LiveCodes>
 
-Please note that LiveCodes [does not have the concept of a file system](../features/projects.mdx). However, you can configure [editor options](../configuration/configuration-object.mdx#markup) like `title`, `order` and `hideTitle` to simulate multiple files, change editor order or even hide editors.
+Please note that LiveCodes [does not have the concept of a file system](../features/projects.mdx). However, you can configure [editor options](../configuration/configuration-object.mdx#markup) like `title`, `order` and `hidden` to simulate multiple files, change editor order or even hide editors.
 
 Example:
 
diff --git a/docs/docs/languages/vue.mdx b/docs/docs/languages/vue.mdx
index ff0928adad..01abb418d0 100644
--- a/docs/docs/languages/vue.mdx
+++ b/docs/docs/languages/vue.mdx
@@ -188,7 +188,7 @@ import Counter from './Counter.vue';
 
 <LiveCodes config={multi}></LiveCodes>
 
-Please note that LiveCodes [does not have the concept of a file system](../features/projects.mdx). However, you can configure [editor options](../configuration/configuration-object.mdx#markup) like `title`, `order` and `hideTitle` to simulate multiple files, change editor order or even hide editors.
+Please note that LiveCodes [does not have the concept of a file system](../features/projects.mdx). However, you can configure [editor options](../configuration/configuration-object.mdx#markup) like `title`, `order` and `hidden` to simulate multiple files, change editor order or even hide editors.
 
 Example:
 
diff --git a/src/livecodes/config/__tests__/build-config.spec.ts b/src/livecodes/config/__tests__/build-config.spec.ts
index db6f2ea8c9..fbe4957839 100644
--- a/src/livecodes/config/__tests__/build-config.spec.ts
+++ b/src/livecodes/config/__tests__/build-config.spec.ts
@@ -505,12 +505,12 @@ describe('loadParamConfig', () => {
     expect(output.customSettings).toEqual({ template: { prerender: false } });
   });
 
-  test('?markup.hideTitle=true&script.title=App.jsx', () => {
+  test('?markup.hidden=true&script.title=App.jsx', () => {
     const output: Partial<Config> = loadParamConfig(defaultConfig, {
-      'markup.hideTitle': true,
+      'markup.hidden': true,
       'script.title': 'App.jsx',
     });
-    expect(output.markup?.hideTitle).toEqual(true);
+    expect(output.markup?.hidden).toEqual(true);
     expect(output.script?.title).toEqual('App.jsx');
   });
 });
diff --git a/src/livecodes/config/build-config.ts b/src/livecodes/config/build-config.ts
index 5f644a8399..94e72dc7db 100644
--- a/src/livecodes/config/build-config.ts
+++ b/src/livecodes/config/build-config.ts
@@ -10,9 +10,8 @@ import type {
 } from '../models';
 import { addProp, cloneObject, decodeHTML, removeDuplicates, stringToValidJson } from '../utils';
 import { decompress } from '../utils/compression';
+import { upgradeAndValidate } from './config';
 import { defaultConfig } from './default-config';
-import { upgradeAndValidate } from './index';
-// eslint-disable-next-line import/order
 import { getMainFile, isEditorId } from './utils';
 
 /**
@@ -370,7 +369,7 @@ export const loadParamConfig = (config: Config, params: UrlQueryParams): Partial
     }
   }
 
-  // ?markup.hideTitle=true&script.title=App.jsx
+  // ?markup.hidden=true&script.title=App.jsx
   // ?customSettings.template.prerender=false
   Object.keys(params).forEach((k) => {
     if (
diff --git a/src/livecodes/config/upgrade-config.ts b/src/livecodes/config/upgrade-config.ts
index 822196d883..8b42d12a58 100644
--- a/src/livecodes/config/upgrade-config.ts
+++ b/src/livecodes/config/upgrade-config.ts
@@ -7,6 +7,21 @@ interface genericConfig extends Config {
 }
 
 const upgradeSteps = [
+  {
+    to: '48',
+    upgrade: (oldConfig: genericConfig, version: string): genericConfig => {
+      const config: genericConfig = clone(oldConfig);
+      ['markup', 'style', 'script'].forEach((prop) => {
+        if ((config[prop] as any)?.hideTitle) {
+          config[prop] = renameProperty(config[prop], 'hideTitle', 'hidden');
+        }
+      });
+      return {
+        ...config,
+        version,
+      };
+    },
+  },
   {
     to: '18',
     upgrade: (oldConfig: genericConfig, version: string): genericConfig => {
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
index 894d8526f4..5dc47eea81 100644
--- a/src/livecodes/config/validate-config.ts
+++ b/src/livecodes/config/validate-config.ts
@@ -78,7 +78,7 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
     ...(is(x.title, 'string') ? { title: x.title } : {}),
     ...(is(x.content, 'string') ? { content: x.content } : {}),
     ...(is(x.contentUrl, 'string') ? { contentUrl: x.contentUrl } : {}),
-    ...(is(x.hideTitle, 'boolean') ? { hideTitle: x.hideTitle } : {}),
+    ...(is(x.hidden, 'boolean') ? { hidden: x.hidden } : {}),
     ...(is(x.hiddenContent, 'string') ? { hiddenContent: x.hiddenContent } : {}),
     ...(is(x.hiddenContentUrl, 'string') ? { hiddenContentUrl: x.hiddenContentUrl } : {}),
     ...(is(x.foldedLines, 'array', 'object') && x.foldedLines?.every(isFoldedLines)
@@ -89,15 +89,30 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
     ...(is(x.position, 'object') ? { position: x.position } : {}),
   });
 
-  const validateFileProps = (x: Partial<SourceFile>): Required<SourceFile> | null =>
-    x.filename && is(x.filename, 'string') && x.filename.includes('.')
+  const removeLeadingSlash = (x: string) =>
+    x.startsWith('/')
+      ? x.slice(1)
+      : x.startsWith('./')
+        ? x.slice(2)
+        : x.startsWith('../')
+          ? x.slice(3)
+          : x.startsWith('~/')
+            ? x.slice(2)
+            : x;
+
+  const validateFileProps = (x: Partial<SourceFile>): SourceFile | undefined =>
+    x.filename && is(x.filename, 'string') && removeLeadingSlash(x.filename).includes('.')
       ? {
-          filename: x.filename,
+          filename: removeLeadingSlash(x.filename),
           content: is(x.content, 'string') ? x.content ?? '' : '',
           language: getLanguageByAlias(x.language || getFileExtension(x.filename)) || 'html',
-          hidden: is(x.hidden, 'boolean') ? x.hidden ?? false : false,
+          ...(is(x.hidden, 'boolean') ? { hidden: x.hidden } : {}),
+          ...(is(x.position, 'object') ? { position: x.position } : {}),
+          ...(is(x.foldedLines, 'array', 'object') && x.foldedLines?.every(isFoldedLines)
+            ? { foldedLines: x.foldedLines }
+            : {}),
         }
-      : null;
+      : undefined;
 
   const validateActiveEditor = (config: Partial<Config>) =>
     includes([...editorIds, ...(config.files || []).map((f) => f.filename)], config.activeEditor);
@@ -176,11 +191,13 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
       : {}),
     ...(is((config as MultiFileConfig).files, 'array', 'object')
       ? {
-          files: (config as MultiFileConfig).files
-            .map((f) => validateFileProps(f))
-            .filter((f) => f != null) as SourceFile[],
+          files:
+            (config.files
+              ?.map((f) => validateFileProps(f))
+              .filter((f) => f != null) as Config['files']) || [],
         }
       : {}),
+    ...(is(config.mainFile, 'string') ? { mainFile: config.mainFile } : {}),
     ...(is(config.tools, 'object')
       ? { tools: validateToolsProps(config.tools as Config['tools']) }
       : {}),
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 8bf9c6fc95..ea2854b202 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -426,7 +426,7 @@ export const setEditorTitle = (editorId: EditorId, title: string) => {
   const language = getLanguageByAlias(title);
   if (!editorTitle || !language) return;
   const config = getConfig();
-  if (config[editorId].hideTitle) {
+  if (config[editorId].hidden) {
     editorTitleContainer.style.display = 'none';
     return;
   }
@@ -674,11 +674,11 @@ const createEditors = async (config: Config) => {
         ...baseOptions,
         container,
         editorId,
-        language: file.language,
-        value: file.content,
+        language: file.language!,
+        value: file.content || '',
       };
       const editor = await createEditor(editorOptions);
-      editorLanguages[editorId] = file.language;
+      editorLanguages[editorId] = file.language!;
       editors[editorId] = editor;
       editorIds.push(editorId);
     }
@@ -749,9 +749,8 @@ const updateEditors = async (editors: Editors, config: Config) => {
     if (config.foldRegions) {
       await editor.foldRegions?.();
     }
-    const foldedLines = 'foldedLines' in source ? source.foldedLines : undefined;
-    if (foldedLines?.length) {
-      await editor.foldLines?.(foldedLines);
+    if (source.foldedLines?.length) {
+      await editor.foldLines?.(source.foldedLines);
     }
   }
 };
@@ -860,12 +859,7 @@ const showMode = (mode?: Config['mode'], view?: Config['view']) => {
 
 const showEditor = (editorId: EditorId | (string & {}) = 'markup', isUpdate = false) => {
   const config = getConfig();
-  if (
-    (isEditorId(editorId) && config[editorId].hideTitle) ||
-    config.files.find((f) => f.filename === editorId)?.hidden
-  ) {
-    return;
-  }
+  if (getSource(editorId, config)?.hidden) return;
   const titles = [...UI.getEditorTitles()];
   const editorIsVisible = () => titles.map((title) => title.dataset.editor).includes(editorId);
   if (!editorIsVisible()) {
@@ -1674,17 +1668,17 @@ const share = async (
         markup: {
           ...config.markup,
           title: undefined,
-          hideTitle: undefined,
+          hidden: undefined,
         },
         style: {
           ...config.style,
           title: undefined,
-          hideTitle: undefined,
+          hidden: undefined,
         },
         script: {
           ...config.script,
           title: undefined,
-          hideTitle: undefined,
+          hidden: undefined,
         },
         tools: {
           ...config.tools,
@@ -2517,6 +2511,7 @@ const loadStarterTemplate = async (templateName: Template['name'], checkSaved =
 };
 
 const getPlaygroundState = (): Config & Code => {
+  // TODO: handle files
   const config = getConfig();
   const cachedCode = getCachedCode();
   return {
@@ -3030,13 +3025,7 @@ const handleKeyboardShortcuts = () => {
       config.files.length
         ? config.files.map((f) => f.filename)
         : (['markup', 'style', 'script'] as EditorId[])
-    ).filter((id) => {
-      const src = getSource(id, config);
-      if (!src) return false;
-      if ('hideTitle' in src) return src.hideTitle !== true;
-      if ('hidden' in src) return src.hidden !== true;
-      return true;
-    });
+    ).filter((id) => getSource(id, config)?.hidden !== true);
     const editorNumbers = editorIds.map((_, id) => String(id + 1));
     if (ctrl(e) && e.altKey && [...editorNumbers, 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
       e.preventDefault();
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 9b6fc8dd22..bbfc5baf6e 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -624,12 +624,15 @@ export type MultiFileContentConfig = Pick<
   | 'version'
 >;
 
-export interface SourceFile {
-  filename: string;
-  content: string;
-  language: Language;
-  hidden: boolean;
-}
+export type SourceFile = Prettify<
+  {
+    /**
+     * Name of the file with extension, including path (e.g. `index.html` or `components/Counter.jsx`).
+     */
+    filename: string;
+  } & Required<Pick<Editor, 'content' | 'language'>> &
+    Partial<Pick<Editor, 'hidden' | 'position' | 'foldedLines'>>
+>;
 
 /**
  * These are properties that define how the app behaves.
@@ -1159,6 +1162,13 @@ export interface Editor {
    */
   contentUrl?: string;
 
+  /**
+   * If `true`, the code editor is hidden, however its code is still evaluated.
+   *
+   * This can be useful in embedded playgrounds (e.g. for hiding irrelevant code).
+   */
+  hidden?: boolean;
+
   /**
    * Hidden content that gets evaluated without being visible in the code editor.
    *
@@ -1173,14 +1183,6 @@ export interface Editor {
    */
   hiddenContentUrl?: string;
 
-  /**
-   * Lines that get folded when the editor loads.
-   *
-   * This can be used for less relevant content.
-   * @example [{ from: 5, to: 8 }, { from: 15, to: 20 }]
-   */
-  foldedLines?: Array<{ from: number; to: number }>;
-
   /**
    * If set, this is used as the title of the editor in the UI,
    * overriding the default title set to the language name
@@ -1189,6 +1191,9 @@ export interface Editor {
   title?: string;
 
   /**
+   * @deprecated
+   * Use `hidden` instead.
+   *
    * If `true`, the title of the code editor is hidden, however its code is still evaluated.
    *
    * This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).
@@ -1206,6 +1211,14 @@ export interface Editor {
    */
   selector?: string;
 
+  /**
+   * Lines that get folded when the editor loads.
+   *
+   * This can be used for less relevant content.
+   * @example [{ from: 5, to: 8 }, { from: 15, to: 20 }]
+   */
+  foldedLines?: Array<{ from: number; to: number }>;
+
   /**
    * The initial position of the cursor in the code editor.
    * @example  {lineNumber: 5, column: 10}

From bc35c7bf365fb26d63dcb16c8c468feace57b5d9 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 9 Nov 2025 00:43:27 +0200
Subject: [PATCH 008/143] add multi-file support in language specs

---
 src/livecodes/config/utils.ts                 | 19 ++++++++++++++++++-
 src/livecodes/config/validate-config.ts       | 19 +++++--------------
 .../art-template/lang-art-template.ts         |  1 +
 .../languages/asciidoc/lang-asciidoc.ts       |  1 +
 src/livecodes/languages/babel/lang-babel.ts   |  1 +
 src/livecodes/languages/bbcode/lang-bbcode.ts |  1 +
 src/livecodes/languages/civet/lang-civet.ts   |  1 +
 .../clojurescript/lang-clojurescript.ts       |  1 +
 .../coffeescript/lang-coffeescript.ts         |  1 +
 src/livecodes/languages/css/lang-css.ts       |  1 +
 .../languages/diagrams/lang-diagrams.ts       |  1 +
 src/livecodes/languages/dot/lang-dot.ts       |  1 +
 src/livecodes/languages/ejs/lang-ejs.ts       |  1 +
 src/livecodes/languages/eta/lang-eta.ts       |  1 +
 src/livecodes/languages/flow/lang-flow.ts     |  1 +
 src/livecodes/languages/haml/lang-haml.ts     |  1 +
 .../languages/handlebars/lang-handlebars.ts   |  1 +
 src/livecodes/languages/html/lang-html.ts     |  1 +
 src/livecodes/languages/imba/lang-imba.ts     |  1 +
 .../languages/javascript/lang-javascript.ts   |  1 +
 src/livecodes/languages/jinja/lang-jinja.ts   |  1 +
 src/livecodes/languages/jsx/lang-jsx.ts       |  1 +
 src/livecodes/languages/jsx/lang-tsx.ts       |  1 +
 src/livecodes/languages/less/lang-less.ts     |  1 +
 src/livecodes/languages/liquid/lang-liquid.ts |  1 +
 .../languages/livescript/lang-livescript.ts   |  1 +
 .../languages/markdown/lang-markdown.ts       |  1 +
 src/livecodes/languages/mdx/lang-mdx.ts       |  1 +
 src/livecodes/languages/mjml/lang-mjml.ts     |  1 +
 .../languages/mustache/lang-mustache.ts       |  1 +
 .../languages/nunjucks/lang-nunjucks.ts       |  1 +
 src/livecodes/languages/pug/lang-pug.ts       |  1 +
 .../react-native/lang-react-native-tsx.ts     |  1 +
 .../react-native/lang-react-native.ts         |  1 +
 .../languages/react/lang-react-tsx.ts         |  1 +
 src/livecodes/languages/react/lang-react.ts   |  1 +
 src/livecodes/languages/reason/lang-reason.ts |  1 +
 .../languages/rescript/lang-rescript.ts       |  1 +
 .../languages/richtext/lang-richtext.ts       |  1 +
 src/livecodes/languages/riot/lang-riot.ts     |  1 +
 src/livecodes/languages/scss/lang-sass.ts     |  1 +
 src/livecodes/languages/scss/lang-scss.ts     |  1 +
 .../languages/solid/lang-solid-tsx.ts         |  3 ++-
 src/livecodes/languages/solid/lang-solid.ts   |  1 +
 .../languages/stencil/lang-stencil.ts         |  1 +
 src/livecodes/languages/stylis/lang-stylis.ts |  1 +
 src/livecodes/languages/stylus/lang-stylus.ts |  1 +
 .../languages/sucrase/lang-sucrase.ts         |  1 +
 src/livecodes/languages/svelte/lang-svelte.ts |  1 +
 src/livecodes/languages/twig/lang-twig.ts     |  1 +
 .../languages/typescript/lang-typescript.ts   |  1 +
 src/livecodes/languages/utils.ts              |  3 +++
 src/livecodes/languages/vento/lang-vento.ts   |  1 +
 src/livecodes/languages/vue/lang-vue.ts       |  1 +
 src/livecodes/languages/vue2/lang-vue2.ts     |  1 +
 src/sdk/models.ts                             |  6 ++++--
 56 files changed, 83 insertions(+), 18 deletions(-)

diff --git a/src/livecodes/config/utils.ts b/src/livecodes/config/utils.ts
index a7b21ea496..deeb74ff8b 100644
--- a/src/livecodes/config/utils.ts
+++ b/src/livecodes/config/utils.ts
@@ -1,5 +1,11 @@
-import { getLanguageEditorId } from '../languages/utils';
+import {
+  getFileLanguage,
+  getLanguageEditorId,
+  languageIsEnabled,
+  supportsMultiFile,
+} from '../languages/utils';
 import type { Config, EditorId } from '../models';
+import { removeLeadingSlash } from '../utils/utils';
 
 export const isEditorId = (editorId: string): editorId is 'markup' | 'style' | 'script' =>
   editorId === 'markup' || editorId === 'style' || editorId === 'script';
@@ -16,3 +22,14 @@ export const getMainFile = (config: Config) =>
         ? 'index.html'
         : config.files.find((f) => getLanguageEditorId(f.language) === 'markup')?.filename ||
           'index.html';
+
+export const validateFileName = (filename: string, config: Partial<Config>) => {
+  filename = removeLeadingSlash(filename);
+  if (!filename) return false;
+  if (filename[0] >= '0' && filename[0] <= '9') return false;
+  const language = getFileLanguage(filename);
+  if (!language || !supportsMultiFile(language) || !languageIsEnabled(language, config as Config)) {
+    return false;
+  }
+  return true;
+};
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
index 5dc47eea81..447ddb1e50 100644
--- a/src/livecodes/config/validate-config.ts
+++ b/src/livecodes/config/validate-config.ts
@@ -9,9 +9,9 @@ import type {
   Tool,
   ToolsPaneStatus,
 } from '../models';
-import { getFileExtension, removeDuplicates } from '../utils';
+import { getFileExtension, removeDuplicates, removeLeadingSlash } from '../utils';
 import { defaultConfig } from './default-config';
-import { isEditorId } from './utils';
+import { isEditorId, validateFileName } from './utils';
 
 export const validateConfig = (config: Partial<Config>): Partial<Config> => {
   type types = 'array' | 'boolean' | 'object' | 'number' | 'string' | 'undefined';
@@ -89,17 +89,6 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
     ...(is(x.position, 'object') ? { position: x.position } : {}),
   });
 
-  const removeLeadingSlash = (x: string) =>
-    x.startsWith('/')
-      ? x.slice(1)
-      : x.startsWith('./')
-        ? x.slice(2)
-        : x.startsWith('../')
-          ? x.slice(3)
-          : x.startsWith('~/')
-            ? x.slice(2)
-            : x;
-
   const validateFileProps = (x: Partial<SourceFile>): SourceFile | undefined =>
     x.filename && is(x.filename, 'string') && removeLeadingSlash(x.filename).includes('.')
       ? {
@@ -194,7 +183,9 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
           files:
             (config.files
               ?.map((f) => validateFileProps(f))
-              .filter((f) => f != null) as Config['files']) || [],
+              .filter(
+                (f) => f != null && validateFileName(f.filename, config),
+              ) as Config['files']) || [],
         }
       : {}),
     ...(is(config.mainFile, 'string') ? { mainFile: config.mainFile } : {}),
diff --git a/src/livecodes/languages/art-template/lang-art-template.ts b/src/livecodes/languages/art-template/lang-art-template.ts
index 264c70a9a8..dead6e3fef 100644
--- a/src/livecodes/languages/art-template/lang-art-template.ts
+++ b/src/livecodes/languages/art-template/lang-art-template.ts
@@ -20,4 +20,5 @@ export const artTemplate: LanguageSpecs = {
   extensions: ['art', 'art-template'],
   editor: 'markup',
   editorLanguage: 'html',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/asciidoc/lang-asciidoc.ts b/src/livecodes/languages/asciidoc/lang-asciidoc.ts
index 85de07c8bd..09ecde27da 100644
--- a/src/livecodes/languages/asciidoc/lang-asciidoc.ts
+++ b/src/livecodes/languages/asciidoc/lang-asciidoc.ts
@@ -19,4 +19,5 @@ export const asciidoc: LanguageSpecs = {
   },
   extensions: ['adoc', 'asciidoc', 'asc'],
   editor: 'markup',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/babel/lang-babel.ts b/src/livecodes/languages/babel/lang-babel.ts
index 61a3d17370..b8ec3ed449 100644
--- a/src/livecodes/languages/babel/lang-babel.ts
+++ b/src/livecodes/languages/babel/lang-babel.ts
@@ -33,4 +33,5 @@ export const babel: LanguageSpecs = {
   extensions: ['es', 'babel'],
   editor: 'script',
   editorLanguage: 'typescript',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/bbcode/lang-bbcode.ts b/src/livecodes/languages/bbcode/lang-bbcode.ts
index b7873e60cc..16918b533f 100644
--- a/src/livecodes/languages/bbcode/lang-bbcode.ts
+++ b/src/livecodes/languages/bbcode/lang-bbcode.ts
@@ -14,4 +14,5 @@ export const bbcode: LanguageSpecs = {
   },
   extensions: ['bbcode', 'bb'],
   editor: 'markup',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/civet/lang-civet.ts b/src/livecodes/languages/civet/lang-civet.ts
index 87402756f8..6e11477209 100644
--- a/src/livecodes/languages/civet/lang-civet.ts
+++ b/src/livecodes/languages/civet/lang-civet.ts
@@ -13,4 +13,5 @@ export const civet: LanguageSpecs = {
   extensions: ['civet'],
   editor: 'script',
   editorLanguage: 'coffeescript',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/clojurescript/lang-clojurescript.ts b/src/livecodes/languages/clojurescript/lang-clojurescript.ts
index 60199edeee..69aacbf785 100644
--- a/src/livecodes/languages/clojurescript/lang-clojurescript.ts
+++ b/src/livecodes/languages/clojurescript/lang-clojurescript.ts
@@ -36,4 +36,5 @@ export const clojurescript: LanguageSpecs = {
   extensions: ['cljs', 'clj', 'cljc', 'edn', 'clojure'],
   editor: 'script',
   editorLanguage: 'clojure',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/coffeescript/lang-coffeescript.ts b/src/livecodes/languages/coffeescript/lang-coffeescript.ts
index 10e8d21e14..3fd64f6910 100644
--- a/src/livecodes/languages/coffeescript/lang-coffeescript.ts
+++ b/src/livecodes/languages/coffeescript/lang-coffeescript.ts
@@ -18,4 +18,5 @@ export const coffeescript: LanguageSpecs = {
   },
   extensions: ['coffee'],
   editor: 'script',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/css/lang-css.ts b/src/livecodes/languages/css/lang-css.ts
index 29d5ac73fc..bfb215b5cd 100644
--- a/src/livecodes/languages/css/lang-css.ts
+++ b/src/livecodes/languages/css/lang-css.ts
@@ -14,4 +14,5 @@ export const css: LanguageSpecs = {
   },
   extensions: ['css'],
   editor: 'style',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/diagrams/lang-diagrams.ts b/src/livecodes/languages/diagrams/lang-diagrams.ts
index 4d067d4a57..7a597d54a5 100644
--- a/src/livecodes/languages/diagrams/lang-diagrams.ts
+++ b/src/livecodes/languages/diagrams/lang-diagrams.ts
@@ -20,4 +20,5 @@ export const diagrams: LanguageSpecs = {
   extensions: ['diagrams', 'diagram', 'graph', 'plt'],
   editor: 'markup',
   editorLanguage: 'html',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/dot/lang-dot.ts b/src/livecodes/languages/dot/lang-dot.ts
index 8e5a4b5946..6ba907844b 100644
--- a/src/livecodes/languages/dot/lang-dot.ts
+++ b/src/livecodes/languages/dot/lang-dot.ts
@@ -19,4 +19,5 @@ export const dot: LanguageSpecs = {
   extensions: ['dot'],
   editor: 'markup',
   editorLanguage: 'html',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/ejs/lang-ejs.ts b/src/livecodes/languages/ejs/lang-ejs.ts
index a18c844071..8cd6e02261 100644
--- a/src/livecodes/languages/ejs/lang-ejs.ts
+++ b/src/livecodes/languages/ejs/lang-ejs.ts
@@ -19,4 +19,5 @@ export const ejs: LanguageSpecs = {
   extensions: ['ejs'],
   editor: 'markup',
   editorLanguage: 'html',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/eta/lang-eta.ts b/src/livecodes/languages/eta/lang-eta.ts
index 3b3cdfa8b7..4222132478 100644
--- a/src/livecodes/languages/eta/lang-eta.ts
+++ b/src/livecodes/languages/eta/lang-eta.ts
@@ -19,4 +19,5 @@ export const eta: LanguageSpecs = {
   extensions: ['eta'],
   editor: 'markup',
   editorLanguage: 'html',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/flow/lang-flow.ts b/src/livecodes/languages/flow/lang-flow.ts
index 198df902b8..ff54aea0fe 100644
--- a/src/livecodes/languages/flow/lang-flow.ts
+++ b/src/livecodes/languages/flow/lang-flow.ts
@@ -25,4 +25,5 @@ export const flow: LanguageSpecs = {
   extensions: ['flow'],
   editor: 'script',
   editorLanguage: 'typescript',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/haml/lang-haml.ts b/src/livecodes/languages/haml/lang-haml.ts
index d3c8384055..df498ae888 100644
--- a/src/livecodes/languages/haml/lang-haml.ts
+++ b/src/livecodes/languages/haml/lang-haml.ts
@@ -13,4 +13,5 @@ export const haml: LanguageSpecs = {
   },
   extensions: ['haml'],
   editor: 'markup',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/handlebars/lang-handlebars.ts b/src/livecodes/languages/handlebars/lang-handlebars.ts
index 54a0311508..30fa5023df 100644
--- a/src/livecodes/languages/handlebars/lang-handlebars.ts
+++ b/src/livecodes/languages/handlebars/lang-handlebars.ts
@@ -22,4 +22,5 @@ export const handlebars: LanguageSpecs = {
   extensions: ['hbs', 'handlebars'],
   editor: 'markup',
   editorLanguage: 'html',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/html/lang-html.ts b/src/livecodes/languages/html/lang-html.ts
index b323d67252..b089dbcd55 100644
--- a/src/livecodes/languages/html/lang-html.ts
+++ b/src/livecodes/languages/html/lang-html.ts
@@ -14,4 +14,5 @@ export const html: LanguageSpecs = {
   },
   extensions: ['html', 'htm'],
   editor: 'markup',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/imba/lang-imba.ts b/src/livecodes/languages/imba/lang-imba.ts
index df40e18c54..adfb7b2721 100644
--- a/src/livecodes/languages/imba/lang-imba.ts
+++ b/src/livecodes/languages/imba/lang-imba.ts
@@ -16,4 +16,5 @@ export const imba: LanguageSpecs = {
   },
   extensions: ['imba'],
   editor: 'script',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/javascript/lang-javascript.ts b/src/livecodes/languages/javascript/lang-javascript.ts
index eab21356ce..4ad3166e35 100644
--- a/src/livecodes/languages/javascript/lang-javascript.ts
+++ b/src/livecodes/languages/javascript/lang-javascript.ts
@@ -15,4 +15,5 @@ export const javascript: LanguageSpecs = {
   },
   extensions: ['js'],
   editor: 'script',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/jinja/lang-jinja.ts b/src/livecodes/languages/jinja/lang-jinja.ts
index 124c5db363..57b82fc218 100644
--- a/src/livecodes/languages/jinja/lang-jinja.ts
+++ b/src/livecodes/languages/jinja/lang-jinja.ts
@@ -27,4 +27,5 @@ export const jinja: LanguageSpecs = {
   extensions: ['jinja'],
   editor: 'markup',
   editorLanguage: 'html',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/jsx/lang-jsx.ts b/src/livecodes/languages/jsx/lang-jsx.ts
index 75043344df..f5ff6837b9 100644
--- a/src/livecodes/languages/jsx/lang-jsx.ts
+++ b/src/livecodes/languages/jsx/lang-jsx.ts
@@ -12,4 +12,5 @@ export const jsx: LanguageSpecs = {
   extensions: ['jsx'],
   editor: 'script',
   editorLanguage: 'javascript',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/jsx/lang-tsx.ts b/src/livecodes/languages/jsx/lang-tsx.ts
index 969228af34..776d4bcb5b 100644
--- a/src/livecodes/languages/jsx/lang-tsx.ts
+++ b/src/livecodes/languages/jsx/lang-tsx.ts
@@ -12,4 +12,5 @@ export const tsx: LanguageSpecs = {
   extensions: ['tsx'],
   editor: 'script',
   editorLanguage: 'typescript',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/less/lang-less.ts b/src/livecodes/languages/less/lang-less.ts
index 5c9e2b2a26..0083c71abb 100644
--- a/src/livecodes/languages/less/lang-less.ts
+++ b/src/livecodes/languages/less/lang-less.ts
@@ -23,4 +23,5 @@ export const less: LanguageSpecs = {
   },
   extensions: ['less'],
   editor: 'style',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/liquid/lang-liquid.ts b/src/livecodes/languages/liquid/lang-liquid.ts
index f2707129d5..d4d837ac83 100644
--- a/src/livecodes/languages/liquid/lang-liquid.ts
+++ b/src/livecodes/languages/liquid/lang-liquid.ts
@@ -19,4 +19,5 @@ export const liquid: LanguageSpecs = {
   extensions: ['liquid', 'liquidjs'],
   editor: 'markup',
   editorLanguage: 'html',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/livescript/lang-livescript.ts b/src/livecodes/languages/livescript/lang-livescript.ts
index a8db1be7fd..0fc601d528 100644
--- a/src/livecodes/languages/livescript/lang-livescript.ts
+++ b/src/livecodes/languages/livescript/lang-livescript.ts
@@ -18,4 +18,5 @@ export const livescript: LanguageSpecs = {
   },
   extensions: ['ls'],
   editor: 'script',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/markdown/lang-markdown.ts b/src/livecodes/languages/markdown/lang-markdown.ts
index 228630bf59..13ec3f4170 100644
--- a/src/livecodes/languages/markdown/lang-markdown.ts
+++ b/src/livecodes/languages/markdown/lang-markdown.ts
@@ -19,4 +19,5 @@ export const markdown: LanguageSpecs = {
   },
   extensions: ['md', 'markdown', 'mdown', 'mkdn'],
   editor: 'markup',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/mdx/lang-mdx.ts b/src/livecodes/languages/mdx/lang-mdx.ts
index 34335ed11b..4a9a370372 100644
--- a/src/livecodes/languages/mdx/lang-mdx.ts
+++ b/src/livecodes/languages/mdx/lang-mdx.ts
@@ -50,4 +50,5 @@ export const mdx: LanguageSpecs = {
   extensions: ['mdx'],
   editor: 'markup',
   editorLanguage: 'markdown',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/mjml/lang-mjml.ts b/src/livecodes/languages/mjml/lang-mjml.ts
index e2b4130b7c..a165494a6b 100644
--- a/src/livecodes/languages/mjml/lang-mjml.ts
+++ b/src/livecodes/languages/mjml/lang-mjml.ts
@@ -32,4 +32,5 @@ export const mjml: LanguageSpecs = {
   extensions: ['mjml'],
   editor: 'markup',
   editorLanguage: 'xml',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/mustache/lang-mustache.ts b/src/livecodes/languages/mustache/lang-mustache.ts
index 1b7f283e8f..dd03c7ab6f 100644
--- a/src/livecodes/languages/mustache/lang-mustache.ts
+++ b/src/livecodes/languages/mustache/lang-mustache.ts
@@ -19,4 +19,5 @@ export const mustache: LanguageSpecs = {
   extensions: ['mustache'],
   editor: 'markup',
   editorLanguage: 'html',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/nunjucks/lang-nunjucks.ts b/src/livecodes/languages/nunjucks/lang-nunjucks.ts
index 2aa99f9fae..57260d40f9 100644
--- a/src/livecodes/languages/nunjucks/lang-nunjucks.ts
+++ b/src/livecodes/languages/nunjucks/lang-nunjucks.ts
@@ -22,4 +22,5 @@ export const nunjucks: LanguageSpecs = {
   extensions: ['njk', 'nunjucks'],
   editor: 'markup',
   editorLanguage: 'html',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/pug/lang-pug.ts b/src/livecodes/languages/pug/lang-pug.ts
index d96e8db06a..698e9975fc 100644
--- a/src/livecodes/languages/pug/lang-pug.ts
+++ b/src/livecodes/languages/pug/lang-pug.ts
@@ -22,4 +22,5 @@ export const pug: LanguageSpecs = {
   },
   extensions: ['pug', 'jade'],
   editor: 'markup',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/react-native/lang-react-native-tsx.ts b/src/livecodes/languages/react-native/lang-react-native-tsx.ts
index 8e55b94dff..f9e90391bc 100644
--- a/src/livecodes/languages/react-native/lang-react-native-tsx.ts
+++ b/src/livecodes/languages/react-native/lang-react-native-tsx.ts
@@ -13,4 +13,5 @@ export const reactNativeTsx: LanguageSpecs = {
   extensions: ['react-native.tsx'],
   editor: 'script',
   editorLanguage: 'typescript',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/react-native/lang-react-native.ts b/src/livecodes/languages/react-native/lang-react-native.ts
index 7d42309368..fa448635c3 100644
--- a/src/livecodes/languages/react-native/lang-react-native.ts
+++ b/src/livecodes/languages/react-native/lang-react-native.ts
@@ -33,4 +33,5 @@ export const reactNative: LanguageSpecs = {
   extensions: ['react-native.jsx'],
   editor: 'script',
   editorLanguage: 'javascript',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/react/lang-react-tsx.ts b/src/livecodes/languages/react/lang-react-tsx.ts
index ac3bdd9de8..d744e3f947 100644
--- a/src/livecodes/languages/react/lang-react-tsx.ts
+++ b/src/livecodes/languages/react/lang-react-tsx.ts
@@ -12,4 +12,5 @@ export const reactTsx: LanguageSpecs = {
   extensions: ['react.tsx'],
   editor: 'script',
   editorLanguage: 'typescript',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/react/lang-react.ts b/src/livecodes/languages/react/lang-react.ts
index 9ed448adf1..71eea740cf 100644
--- a/src/livecodes/languages/react/lang-react.ts
+++ b/src/livecodes/languages/react/lang-react.ts
@@ -39,4 +39,5 @@ export const react: LanguageSpecs = {
   extensions: ['react.jsx', 'react-jsx'],
   editor: 'script',
   editorLanguage: 'javascript',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/reason/lang-reason.ts b/src/livecodes/languages/reason/lang-reason.ts
index 5d87d8d246..abcecfc457 100644
--- a/src/livecodes/languages/reason/lang-reason.ts
+++ b/src/livecodes/languages/reason/lang-reason.ts
@@ -11,4 +11,5 @@ export const reason: LanguageSpecs = {
   extensions: ['re', 'rei'],
   editor: 'script',
   editorLanguage: 'javascript',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/rescript/lang-rescript.ts b/src/livecodes/languages/rescript/lang-rescript.ts
index 96ea1041fb..43fd92bdae 100644
--- a/src/livecodes/languages/rescript/lang-rescript.ts
+++ b/src/livecodes/languages/rescript/lang-rescript.ts
@@ -26,4 +26,5 @@ export const rescript: LanguageSpecs = {
   extensions: ['res', 'resi'],
   editor: 'script',
   editorLanguage: 'javascript',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/richtext/lang-richtext.ts b/src/livecodes/languages/richtext/lang-richtext.ts
index 4f282cf1ea..8d62e4fea6 100644
--- a/src/livecodes/languages/richtext/lang-richtext.ts
+++ b/src/livecodes/languages/richtext/lang-richtext.ts
@@ -14,4 +14,5 @@ export const richtext: LanguageSpecs = {
   extensions: ['rte', 'rte.html', 'rich'],
   editor: 'markup',
   editorLanguage: 'html',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/riot/lang-riot.ts b/src/livecodes/languages/riot/lang-riot.ts
index eb0e5bf11b..5a156b86df 100644
--- a/src/livecodes/languages/riot/lang-riot.ts
+++ b/src/livecodes/languages/riot/lang-riot.ts
@@ -23,4 +23,5 @@ export const riot: LanguageSpecs = {
   },
   extensions: ['riot', 'riotjs'],
   editor: 'script',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/scss/lang-sass.ts b/src/livecodes/languages/scss/lang-sass.ts
index 1559a13880..663b36bc8e 100644
--- a/src/livecodes/languages/scss/lang-sass.ts
+++ b/src/livecodes/languages/scss/lang-sass.ts
@@ -6,4 +6,5 @@ export const sass: LanguageSpecs = {
   compiler: 'scss',
   extensions: ['sass'],
   editor: 'style',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/scss/lang-scss.ts b/src/livecodes/languages/scss/lang-scss.ts
index 4affdd6687..7418199434 100644
--- a/src/livecodes/languages/scss/lang-scss.ts
+++ b/src/livecodes/languages/scss/lang-scss.ts
@@ -18,4 +18,5 @@ export const scss: LanguageSpecs = {
   },
   extensions: ['scss'],
   editor: 'style',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/solid/lang-solid-tsx.ts b/src/livecodes/languages/solid/lang-solid-tsx.ts
index bde8639ca5..a8920710fb 100644
--- a/src/livecodes/languages/solid/lang-solid-tsx.ts
+++ b/src/livecodes/languages/solid/lang-solid-tsx.ts
@@ -9,7 +9,8 @@ export const solidTsx: LanguageSpecs = {
     pluginUrls: [parserPlugins.babel, parserPlugins.html],
   },
   compiler: 'solid',
-  extensions: ['solid.tsx'],
+  extensions: ['solid.tsx', 'solid-tsx'],
   editor: 'script',
   editorLanguage: 'typescript',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/solid/lang-solid.ts b/src/livecodes/languages/solid/lang-solid.ts
index b0c2210cac..e2527ffe90 100644
--- a/src/livecodes/languages/solid/lang-solid.ts
+++ b/src/livecodes/languages/solid/lang-solid.ts
@@ -20,4 +20,5 @@ export const solid: LanguageSpecs = {
   extensions: ['solid.jsx'],
   editor: 'script',
   editorLanguage: 'javascript',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/stencil/lang-stencil.ts b/src/livecodes/languages/stencil/lang-stencil.ts
index 906ee582ac..106727cc64 100644
--- a/src/livecodes/languages/stencil/lang-stencil.ts
+++ b/src/livecodes/languages/stencil/lang-stencil.ts
@@ -34,4 +34,5 @@ export const stencil: LanguageSpecs = {
   extensions: ['stencil.tsx'],
   editor: 'script',
   editorLanguage: 'typescript',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/stylis/lang-stylis.ts b/src/livecodes/languages/stylis/lang-stylis.ts
index 1e80f3da8b..cb34ab4a80 100644
--- a/src/livecodes/languages/stylis/lang-stylis.ts
+++ b/src/livecodes/languages/stylis/lang-stylis.ts
@@ -14,4 +14,5 @@ export const stylis: LanguageSpecs = {
   extensions: ['stylis'],
   editor: 'style',
   editorLanguage: 'scss',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/stylus/lang-stylus.ts b/src/livecodes/languages/stylus/lang-stylus.ts
index 8db5baa648..9dab34e087 100644
--- a/src/livecodes/languages/stylus/lang-stylus.ts
+++ b/src/livecodes/languages/stylus/lang-stylus.ts
@@ -10,4 +10,5 @@ export const stylus: LanguageSpecs = {
   },
   extensions: ['styl'],
   editor: 'style',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/sucrase/lang-sucrase.ts b/src/livecodes/languages/sucrase/lang-sucrase.ts
index 9459ac9fde..6019b08857 100644
--- a/src/livecodes/languages/sucrase/lang-sucrase.ts
+++ b/src/livecodes/languages/sucrase/lang-sucrase.ts
@@ -23,4 +23,5 @@ export const sucrase: LanguageSpecs = {
   extensions: ['sucrase'],
   editor: 'script',
   editorLanguage: 'typescript',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/svelte/lang-svelte.ts b/src/livecodes/languages/svelte/lang-svelte.ts
index 9af5eb0a2e..a20e16be8d 100644
--- a/src/livecodes/languages/svelte/lang-svelte.ts
+++ b/src/livecodes/languages/svelte/lang-svelte.ts
@@ -45,6 +45,7 @@ export const svelte: LanguageSpecs = {
   },
   extensions: ['svelte'],
   editor: 'script',
+  multiFileSupport: true,
 };
 
 export const svelteApp: LanguageSpecs = {
diff --git a/src/livecodes/languages/twig/lang-twig.ts b/src/livecodes/languages/twig/lang-twig.ts
index e262f951f9..9f3e35e1f4 100644
--- a/src/livecodes/languages/twig/lang-twig.ts
+++ b/src/livecodes/languages/twig/lang-twig.ts
@@ -19,4 +19,5 @@ export const twig: LanguageSpecs = {
   extensions: ['twig'],
   editor: 'markup',
   editorLanguage: 'html',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/typescript/lang-typescript.ts b/src/livecodes/languages/typescript/lang-typescript.ts
index 5aad236381..dab7665e80 100644
--- a/src/livecodes/languages/typescript/lang-typescript.ts
+++ b/src/livecodes/languages/typescript/lang-typescript.ts
@@ -46,4 +46,5 @@ export const typescript: LanguageSpecs = {
   },
   extensions: ['ts', 'typescript'],
   editor: 'script',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/utils.ts b/src/livecodes/languages/utils.ts
index 27bd6fafe5..6c467cc913 100644
--- a/src/livecodes/languages/utils.ts
+++ b/src/livecodes/languages/utils.ts
@@ -15,6 +15,9 @@ export const getLanguageByAlias = (alias: string = ''): Language | undefined =>
 
 export const getFileLanguage = (filename: string) => getLanguageByAlias(filename.split('.').pop());
 
+export const supportsMultiFile = (language: Language) =>
+  window.deps.languages.find((l) => l.name === language)?.multiFileSupport === true;
+
 export const getLanguageTitle = (language: Language) => {
   const languageSpecs = window.deps.languages.find((lang) => lang.name === language);
   return languageSpecs?.longTitle || languageSpecs?.title || language.toUpperCase();
diff --git a/src/livecodes/languages/vento/lang-vento.ts b/src/livecodes/languages/vento/lang-vento.ts
index a917ef9835..06d5cd2cf9 100644
--- a/src/livecodes/languages/vento/lang-vento.ts
+++ b/src/livecodes/languages/vento/lang-vento.ts
@@ -19,4 +19,5 @@ export const vento: LanguageSpecs = {
   extensions: ['vto', 'vento'],
   editor: 'markup',
   editorLanguage: 'html',
+  multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/vue/lang-vue.ts b/src/livecodes/languages/vue/lang-vue.ts
index aca5efd655..dc2147cc78 100644
--- a/src/livecodes/languages/vue/lang-vue.ts
+++ b/src/livecodes/languages/vue/lang-vue.ts
@@ -26,6 +26,7 @@ export const vue: LanguageSpecs = {
   extensions: ['vue', 'vue3'],
   editor: 'script',
   editorLanguage: 'html',
+  multiFileSupport: true,
 };
 
 export const vueApp: LanguageSpecs = {
diff --git a/src/livecodes/languages/vue2/lang-vue2.ts b/src/livecodes/languages/vue2/lang-vue2.ts
index d150a15fb3..058cdfba09 100644
--- a/src/livecodes/languages/vue2/lang-vue2.ts
+++ b/src/livecodes/languages/vue2/lang-vue2.ts
@@ -25,4 +25,5 @@ export const vue2: LanguageSpecs = {
   extensions: ['vue2'],
   editor: 'script',
   editorLanguage: 'html',
+  multiFileSupport: true,
 };
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index bbfc5baf6e..5da584e483 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -417,7 +417,7 @@ export interface MultiFileConfig
   files: Array<{ filename: string } & Partial<SourceFile>>;
 }
 
-export type SDKConfig = SingleFileConfig | MultiFileConfig;
+export type SDKConfig = Prettify<SingleFileConfig> | Prettify<MultiFileConfig>;
 
 /**
  * The properties that define the content of the current [project](https://livecodes.io/docs/features/projects).
@@ -1015,6 +1015,7 @@ export type Language =
   | 'solid'
   | 'solid.jsx'
   | 'solid.tsx'
+  | 'solid-tsx'
   | 'riot'
   | 'riotjs'
   | 'malina'
@@ -1270,6 +1271,7 @@ export interface LanguageSpecs {
   editorLanguage?: Language;
   preset?: CssPresetId;
   largeDownload?: boolean;
+  multiFileSupport?: boolean;
 }
 
 export interface ProcessorSpecs {
@@ -1587,7 +1589,7 @@ export interface CodeEditor {
   getLanguage: () => Language;
   setLanguage: (language: Language, value?: string) => void;
   getEditorId: () => string;
-  setEditorId: (filename: string) => void;
+  setEditorId: (filename: string, language?: Language) => void;
   focus: () => void;
   getPosition: () => EditorPosition;
   setPosition: (position: EditorPosition) => void;

From f7274d90239b8b8b4fc9a970bcefa8ad2cfad38a Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 9 Nov 2025 00:43:46 +0200
Subject: [PATCH 009/143] add file

---
 src/livecodes/UI/create-language-menus.ts     |  43 +++---
 src/livecodes/config/upgrade-config.ts        |   2 +-
 src/livecodes/core.ts                         | 133 ++++++++++--------
 src/livecodes/editor/codejar/codejar.ts       |   7 +-
 src/livecodes/editor/codemirror/codemirror.ts |   7 +-
 src/livecodes/editor/monaco/monaco.ts         |  27 ++--
 .../i18n/locales/en/translation.lokalise.json |  10 +-
 src/livecodes/i18n/locales/en/translation.ts  |   6 +-
 src/livecodes/styles/app.scss                 |   1 +
 src/livecodes/utils/utils.ts                  |  11 ++
 10 files changed, 151 insertions(+), 96 deletions(-)

diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index 84dcdf003b..e794af7373 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -165,6 +165,7 @@ export const createLanguageMenus = (
 export const createMultiFileEditorTab = ({
   title,
   showEditor,
+  addFile,
   renameFile,
   deleteFile,
   isMainFile,
@@ -172,23 +173,24 @@ export const createMultiFileEditorTab = ({
 }: {
   title: string;
   showEditor: (filename: string) => void;
-  renameFile: (filename: string, newName: string) => void;
+  addFile?: (filename: string) => Promise<boolean>;
+  renameFile: (filename: string, newName: string) => boolean;
   deleteFile: (filename: string) => void;
   isMainFile: boolean;
   isNewFile: boolean;
 }) => {
   let currentFileName = title;
-  const selector = document.querySelector(`.editor-title[data-editor="${title}"]`);
+  const selector = document.querySelector(`.editor-title[data-editor="${currentFileName}"]`);
   if (selector) return;
   const editorSelector = document.createElement('a');
   editorSelector.href = '#';
   editorSelector.classList.add('editor-title', 'noselect');
-  editorSelector.dataset.editor = title;
+  editorSelector.dataset.editor = currentFileName;
   editorSelector.dataset.multiFile = 'true';
   editorSelector.addEventListener('click', () => showEditor(currentFileName));
 
   const label = document.createElement('span');
-  label.innerHTML = title;
+  label.innerHTML = currentFileName;
   editorSelector.appendChild(label);
 
   if (!isMainFile) {
@@ -198,12 +200,12 @@ export const createMultiFileEditorTab = ({
     deleteButton.addEventListener('click', () => {
       if (
         confirm(
-          window.deps.translateString('core.confirm.deleteFile', 'Delete file: {{title}}?', {
-            title,
+          window.deps.translateString('core.confirm.deleteFile', 'Delete file: {{filename}}?', {
+            filename: currentFileName,
           }),
         )
       ) {
-        deleteFile(label.innerText);
+        deleteFile(currentFileName);
         editorSelector.remove();
       }
     });
@@ -218,21 +220,22 @@ export const createMultiFileEditorTab = ({
     selection?.addRange(range);
   };
 
-  const accept = () => {
-    renameFile(currentFileName, label.innerText);
+  const accept = async () => {
+    const success =
+      isNewFile && typeof addFile === 'function'
+        ? await addFile(label.innerText)
+        : renameFile(currentFileName, label.innerText);
+    if (!success) {
+      onDblClick();
+      return;
+    }
     label.contentEditable = 'false';
     currentFileName = label.innerText;
+    isNewFile = false;
     showEditor(currentFileName);
-    window.removeEventListener('click', onClick);
     window.removeEventListener('keydown', onEnter);
   };
 
-  const onClick = (event: MouseEvent) => {
-    if (event.target !== editorSelector.querySelector('span')) {
-      accept();
-    }
-  };
-
   const onEnter = (event: KeyboardEvent) => {
     if (event.key === 'Enter') {
       event.preventDefault();
@@ -245,7 +248,6 @@ export const createMultiFileEditorTab = ({
     label.contentEditable = 'true';
     requestAnimationFrame(() => label.focus());
     selectAll(label);
-    window.addEventListener('click', onClick, { capture: true });
     window.addEventListener('keydown', onEnter);
   };
 
@@ -260,13 +262,14 @@ export const createMultiFileEditorTab = ({
   }
 };
 
-export const createAddFileButton = (addFile: () => void) => {
+export const createAddFileButton = ({ onclick: handleAddFileClick }: { onclick: () => void }) => {
   if (!document.querySelector('#add-file-button')) {
     const addFileButton = document.createElement('button');
     addFileButton.id = 'add-file-button';
     addFileButton.classList.add('app-menu-button', 'menu');
-    addFileButton.innerHTML = '<i class="icon-add" alt="add file"></i>';
-    addFileButton.addEventListener('click', addFile);
+    addFileButton.innerHTML =
+      '<i class="icon-add" title="Add file" data-i18n="core.addFile" data-i18n-prop="title"></i>';
+    addFileButton.addEventListener('click', handleAddFileClick);
     document.querySelector('#select-editor')?.appendChild(addFileButton);
 
     const scrollTo = document.createElement('div');
diff --git a/src/livecodes/config/upgrade-config.ts b/src/livecodes/config/upgrade-config.ts
index 8b42d12a58..2664a4fd11 100644
--- a/src/livecodes/config/upgrade-config.ts
+++ b/src/livecodes/config/upgrade-config.ts
@@ -12,7 +12,7 @@ const upgradeSteps = [
     upgrade: (oldConfig: genericConfig, version: string): genericConfig => {
       const config: genericConfig = clone(oldConfig);
       ['markup', 'style', 'script'].forEach((prop) => {
-        if ((config[prop] as any)?.hideTitle) {
+        if (config[prop] && 'hideTitle' in config[prop] && !('hidden' in config[prop])) {
           config[prop] = renameProperty(config[prop], 'hideTitle', 'hidden');
         }
       });
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index ea2854b202..c975133feb 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -43,7 +43,7 @@ import {
   setConfig,
   upgradeAndValidate,
 } from './config';
-import { getSource, isEditorId } from './config/utils';
+import { getMainFile, getSource, isEditorId, validateFileName } from './config/utils';
 import { createCustomEditors, createEditor, getFontFamily } from './editor';
 import { createFakeEditor } from './editor/fake-editor';
 import { hasJsx } from './editor/ts-compiler-options';
@@ -475,8 +475,40 @@ const createCopyButtons = () => {
   });
 };
 
+const checkFileName = (filename: string, config: Config) => {
+  if (!validateFileName(filename, config)) {
+    alert(window.deps.translateString('core.file.invalidName', 'Invalid file type!'));
+    return false;
+  }
+  if (config.files?.some((f) => f.filename === filename)) {
+    alert(window.deps.translateString('core.file.exists', 'File already exists!'));
+    return false;
+  }
+  return true;
+};
+
+const addFile = async (
+  filename: string,
+  editorOptions: Omit<EditorOptions, 'container' | 'editorId' | 'language' | 'value'>,
+) => {
+  if (!checkFileName(filename, getConfig())) return false;
+  const fileLanguage = getFileLanguage(filename) || 'javascript';
+  const editor = await createEditor({
+    ...editorOptions,
+    container: createEditorUI(filename, true),
+    editorId: filename,
+    language: fileLanguage,
+    value: '',
+  });
+  editorLanguages![filename] = fileLanguage;
+  editors[filename] = editor;
+  editorIds.push(filename);
+  return true;
+};
+
 const renameFile = (filename: string, newName: string) => {
-  // TODO: validate newName (existing file, extension, valid name)
+  if (filename === newName) return true;
+  if (!checkFileName(newName, getConfig())) return false;
   const language = getFileLanguage(newName)!;
   const config = getConfig();
   setConfig({
@@ -511,6 +543,7 @@ const renameFile = (filename: string, newName: string) => {
     editorIds[id] = newName;
   }
   changeLanguage(language, undefined, false, newName);
+  return true;
 };
 
 const deleteFile = (filename: string) => {
@@ -549,18 +582,12 @@ const createEditorUI = (title: string, addTab = false) => {
   container.classList.add('editor');
   editorsElement.insertBefore(container, UI.getEditorToolbar());
   if (addTab) {
-    const config = getConfig();
-    const isMainFile = config.mainFile
-      ? config.mainFile === title
-      : title === 'index.html' ||
-        config.files.find((f) => getLanguageEditorId(f.language) === 'markup')?.filename === title;
-
     createMultiFileEditorTab({
       title,
       showEditor,
       renameFile,
       deleteFile,
-      isMainFile,
+      isMainFile: title === getMainFile(getConfig()),
       isNewFile: false,
     });
   }
@@ -635,28 +662,17 @@ const createEditors = async (config: Config) => {
   };
 
   if (config.files?.length) {
-    createAddFileButton(() => {
-      createMultiFileEditorTab({
-        title: 'script.js',
-        showEditor,
-        renameFile: async (filename: string, newName: string) => {
-          renameFile(filename, newName);
-          const fileLanguage = getFileLanguage(filename) || 'javascript';
-          const editor = await createEditor({
-            ...baseOptions,
-            container: createEditorUI(newName, true),
-            editorId: newName,
-            language: fileLanguage,
-            value: '',
-          });
-          editorLanguages![newName] = fileLanguage;
-          editors[newName] = editor;
-          editorIds.push(newName);
-        },
-        deleteFile,
-        isMainFile: false,
-        isNewFile: true,
-      });
+    createAddFileButton({
+      onclick: () =>
+        createMultiFileEditorTab({
+          title: '        ',
+          showEditor,
+          addFile: async (filename: string) => addFile(filename, baseOptions),
+          renameFile,
+          deleteFile,
+          isMainFile: false,
+          isNewFile: true,
+        }),
     });
 
     editorLanguages = { markup: 'html', style: 'css', script: 'javascript' };
@@ -866,19 +882,23 @@ const showEditor = (editorId: EditorId | (string & {}) = 'markup', isUpdate = fa
     // select first visible editor instead
     editorId = (titles[0]?.dataset.editor as EditorId) || 'markup';
   }
-  titles.forEach((selector) => selector.classList.remove('active'));
-  const activeTitle = titles.find((title) => title.dataset.editor === editorId);
-  activeTitle?.classList.add('active');
-  activeTitle?.scrollIntoView({ behavior: 'smooth' });
-  const editorDivs = [...UI.getEditorDivs()];
-  editorDivs.forEach((editor) => (editor.style.display = 'none'));
-  const activeEditor = editorDivs.find(
-    (editor) => editor.id === editorId || editor.dataset.editorId === editorId,
-  ) as HTMLElement;
-  if (activeEditor) {
-    activeEditor.style.display = 'block';
-    activeEditor.style.visibility = 'visible';
-  }
+  titles.forEach((title) => {
+    if (title.dataset.editor === editorId) {
+      title.classList.add('active');
+      title.scrollIntoView({ behavior: 'smooth' });
+    } else {
+      title.classList.remove('active');
+    }
+  });
+  UI.getEditorDivs().forEach((editorDiv) => {
+    if (editorDiv.dataset.editorId === editorId || editorDiv.id === editorId) {
+      editorDiv.style.display = 'block';
+      editorDiv.style.visibility = 'visible';
+    } else {
+      editorDiv.style.display = 'none';
+      editorDiv.style.visibility = 'hidden';
+    }
+  });
   if (!isEmbed && !isUpdate) {
     editors[editorId]?.focus();
   }
@@ -1034,19 +1054,17 @@ const changeLanguage = async (
       ),
     );
   }
-  const editor = editors[editorId];
-  if (filename) {
-    editor.setEditorId(filename);
-  }
-  editor.setLanguage(
-    language,
-    value ?? (filename ? undefined : getSource(editorId, getConfig())?.content || ''),
-  );
   if (editorLanguages) {
     editorLanguages[editorId] = language;
   }
-  setEditorTitle(editorId as EditorId, language);
-  showEditor(editorId, isUpdate);
+  const editor = editors[editorId];
+  if (filename) {
+    editor.setEditorId(filename, language);
+  } else {
+    editor.setLanguage(language, value ?? (getSource(editorId, getConfig())?.content || ''));
+    setEditorTitle(editorId as EditorId, language);
+    showEditor(editorId, isUpdate);
+  }
   phpHelper({ editor: editors.script });
   if (!isEmbed && !isUpdate) {
     setTimeout(() => editor.focus());
@@ -1872,10 +1890,11 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false, oldConfig
 
   const hasEditorConfig = Object.keys(editorConfig).some((k) => k in newConfig);
   let shouldReloadEditors = (() => {
-    if (newConfig.editor != null && !(newConfig.editor in editors.markup)) return true;
+    const activeEditor = getActiveEditor();
+    if (newConfig.editor != null && newConfig.editor in activeEditor) return true;
     if (newConfig.mode != null) {
-      if (newConfig.mode !== 'result' && editors.markup.isFake) return true;
-      if (newConfig.mode !== 'codeblock' && editors.markup.codejar) return true;
+      if (newConfig.mode !== 'result' && activeEditor.isFake) return true;
+      if (newConfig.mode !== 'codeblock' && activeEditor.codejar) return true;
     }
     return false;
   })();
diff --git a/src/livecodes/editor/codejar/codejar.ts b/src/livecodes/editor/codejar/codejar.ts
index 764a0adabc..cccb24a235 100644
--- a/src/livecodes/editor/codejar/codejar.ts
+++ b/src/livecodes/editor/codejar/codejar.ts
@@ -135,9 +135,12 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   // codejar?.onPaste(handleUpdate);
 
   const getEditorId = () => editorId;
-  const setEditorId = (filename: string) => {
+  const setEditorId = (filename: string, lang?: Language) => {
     editorId = filename;
-    language = getFileLanguage(filename) || language;
+    const newLang = lang || getFileLanguage(filename);
+    if (newLang && newLang !== language) {
+      setLanguage(newLang);
+    }
   };
   const getValue = () => (codejar ? codejar.toString() : value);
   const setValue = (newValue = '\n') => {
diff --git a/src/livecodes/editor/codemirror/codemirror.ts b/src/livecodes/editor/codemirror/codemirror.ts
index d8229d760c..bfbd84efac 100644
--- a/src/livecodes/editor/codemirror/codemirror.ts
+++ b/src/livecodes/editor/codemirror/codemirror.ts
@@ -303,9 +303,12 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   showEditorMode(options.editorMode);
 
   const getEditorId = () => editorId;
-  const setEditorId = (filename: string) => {
+  const setEditorId = (filename: string, lang?: Language) => {
     editorId = filename;
-    language = getFileLanguage(filename) || language;
+    const newLang = lang || getFileLanguage(filename);
+    if (newLang && newLang !== language) {
+      setLanguage(newLang);
+    }
   };
   const getValue = () => view.state.doc.toString();
   const setValue = (value = '', newState = true) => {
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index fb8e898563..697c828b22 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -294,6 +294,18 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     }
   };
 
+  const getOrCreateModel = (value: string, lang: string | undefined, uri: Monaco.Uri) => {
+    const model = monaco.editor.getModel(uri);
+    if (model) {
+      if (model.getLanguageId() === monacoMapLanguage(lang as Language)) {
+        model.setValue(value);
+        return model;
+      }
+      model.dispose();
+    }
+    return monaco.editor.createModel(value, lang, uri);
+  };
+
   let modelUri = '';
   const setModel = (
     editor: Monaco.editor.IStandaloneCodeEditor,
@@ -310,7 +322,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
       ? `file:///${editorId}`
       : `file:///${editorId}.${random}.${extension}`;
     const oldModel = editor.getModel();
-    const model = monaco.editor.createModel(
+    const model = getOrCreateModel(
       value || '',
       monacoMapLanguage(language),
       monaco.Uri.parse(modelUri),
@@ -335,15 +347,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     }, 50);
   }
 
-  const getOrCreateModel = (value: string, lang: string | undefined, uri: Monaco.Uri) => {
-    const model = monaco.editor.getModel(uri);
-    if (model) {
-      model.setValue(value);
-      return model;
-    }
-    return monaco.editor.createModel(value, lang, uri);
-  };
-
   const contentEditors: Array<EditorOptions['editorId']> = ['markup', 'style', 'script', 'tests'];
   if (contentEditors.includes(editorId)) {
     editors.push(editor);
@@ -361,9 +364,9 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   }
 
   const getEditorId = () => editorId;
-  const setEditorId = (filename: string) => {
+  const setEditorId = (filename: string, lang?: Language) => {
     editorId = filename;
-    language = getFileLanguage(filename) || language;
+    language = lang || getFileLanguage(filename) || language;
     setModel(editor, editor.getValue(), language);
   };
   const getValue = () => editor.getValue();
diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
index ed5511e826..cf21195970 100644
--- a/src/livecodes/i18n/locales/en/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -942,7 +942,7 @@
   },
   "core.confirm.deleteFile": {
     "notes": "",
-    "translation": "Delete file: {{title}}?"
+    "translation": "Delete file: {{filename}}?"
   },
   "core.copy.copied": {
     "notes": "",
@@ -1036,6 +1036,14 @@
     "notes": "",
     "translation": "Creating a public GitHub gist..."
   },
+  "core.file.exists": {
+    "notes": "",
+    "translation": "File already exists!"
+  },
+  "core.file.invalidName": {
+    "notes": "",
+    "translation": "Invalid file type!"
+  },
   "core.fork.success": {
     "notes": "",
     "translation": "Forked as a new project"
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
index 9c6e0aed6f..260024f886 100644
--- a/src/livecodes/i18n/locales/en/translation.ts
+++ b/src/livecodes/i18n/locales/en/translation.ts
@@ -380,7 +380,7 @@ const translation = {
       message: 'Loading {{lang}}. This may take a while!',
     },
     confirm: {
-      deleteFile: 'Delete file: {{title}}?',
+      deleteFile: 'Delete file: {{filename}}?',
     },
     copy: {
       copied: 'Code copied to clipboard',
@@ -411,6 +411,10 @@ const translation = {
     export: {
       gist: 'Creating a public GitHub gist...',
     },
+    file: {
+      exists: 'File already exists!',
+      invalidName: 'Invalid file type!',
+    },
     fork: {
       success: 'Forked as a new project',
     },
diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
index fd4ef222be..7e97cdac9d 100644
--- a/src/livecodes/styles/app.scss
+++ b/src/livecodes/styles/app.scss
@@ -1378,6 +1378,7 @@ a.editor-title {
   > span {
     display: inline-block;
     flex-grow: 1;
+    min-width: 3em;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
diff --git a/src/livecodes/utils/utils.ts b/src/livecodes/utils/utils.ts
index bc789ff484..909eeb1dd9 100644
--- a/src/livecodes/utils/utils.ts
+++ b/src/livecodes/utils/utils.ts
@@ -685,6 +685,17 @@ export const addProp = /* @__PURE__ */ (
   addProp(obj[first] as Record<string, unknown>, rest.join('.'), value);
 };
 
+export const removeLeadingSlash = /* @__PURE__ */ (x: string) =>
+  x.startsWith('/')
+    ? x.slice(1)
+    : x.startsWith('./')
+      ? x.slice(2)
+      : x.startsWith('../')
+        ? x.slice(3)
+        : x.startsWith('~/')
+          ? x.slice(2)
+          : x;
+
 export const predefinedValues = {
   APP_VERSION: process.env.VERSION || '',
   SDK_VERSION: process.env.SDK_VERSION || '',

From c4b3983e5521f8bc54c6ab1b0dd206f4159aa1e5 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 9 Nov 2025 02:46:46 +0200
Subject: [PATCH 010/143] fix types

---
 functions/vendors/templates.js                | 2034 ++---------------
 src/livecodes/cache/cache.ts                  |    6 +-
 src/livecodes/export/utils.ts                 |   41 +-
 src/livecodes/import/dom.ts                   |    9 +-
 src/livecodes/import/utils.ts                 |    5 +-
 .../result/multi-file-result-page.ts          |    2 +-
 src/livecodes/result/result-page.ts           |   12 +-
 7 files changed, 225 insertions(+), 1884 deletions(-)

diff --git a/functions/vendors/templates.js b/functions/vendors/templates.js
index 85dbce5f28..ca34eaa3ae 100644
--- a/functions/vendors/templates.js
+++ b/functions/vendors/templates.js
@@ -1,18 +1,6 @@
 var getTemplateName = (_, templateName) => templateName;
-var d = {
-  name: 'angular',
-  title: getTemplateName('templates.starter.angular', 'Angular Starter'),
-  thumbnail: 'assets/templates/angular.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `<app>Loading...</app>
-`,
-  },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'typescript',
-    content: `
+var d={name:"angular",title:getTemplateName("templates.starter.angular","Angular Starter"),thumbnail:"assets/templates/angular.svg",activeEditor:"script",markup:{language:"html",content:`<app>Loading...</app>
+`},style:{language:"css",content:""},script:{language:"typescript",content:`
 import { Component, Input, NgModule, enableProdMode } from '@angular/core@12.2.13';
 import { CommonModule } from '@angular/common@12.2.13';
 import { BrowserModule } from '@angular/platform-browser@12.2.13';
@@ -82,18 +70,7 @@ class AppModule {}
 platformBrowserDynamic()
   .bootstrapModule(AppModule)
   .catch((err: Error) => console.error(err));
-`.trimStart(),
-  },
-  customSettings: { typescript: { experimentalDecorators: !0 } },
-};
-var u = {
-  name: 'assemblyscript',
-  title: getTemplateName('templates.starter.assemblyscript', 'AssemblyScript Starter'),
-  thumbnail: 'assets/templates/assemblyscript.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},customSettings:{typescript:{experimentalDecorators:!0}}};var u={name:"assemblyscript",title:getTemplateName("templates.starter.assemblyscript","AssemblyScript Starter"),thumbnail:"assets/templates/assemblyscript.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/assemblyscript.svg" />
@@ -126,11 +103,7 @@ var u = {
 
   })();
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -139,33 +112,14 @@ var u = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'assemblyscript',
-    content: `
+`.trimStart()},script:{language:"assemblyscript",content:`
 export function getTitle(): string {
   return "AssemblyScript";
 }
 export function increment(num: i32): i32 {
   return num + 1;
 }
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var g = {
-  name: 'astro',
-  title: getTemplateName('templates.starter.astro', 'Astro Starter'),
-  thumbnail: 'assets/templates/astro.svg',
-  activeEditor: 'markup',
-  markup: {
-    language: 'astro',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var g={name:"astro",title:getTemplateName("templates.starter.astro","Astro Starter"),thumbnail:"assets/templates/astro.svg",activeEditor:"markup",markup:{language:"astro",content:`
 ---
 import {format} from 'date-fns';
 
@@ -222,35 +176,14 @@ const builtAtFormatted = format(builtAt, 'MMMM dd, yyyy -- H:mm:ss.SSS');
 </body>
 
 </html>
-`.trimStart(),
-  },
-  style: { language: 'css', content: '' },
-  script: { language: 'javascript', content: '' },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var h = {
-  name: 'backbone',
-  title: getTemplateName('templates.starter.backbone', 'Backbone Starter'),
-  thumbnail: 'assets/templates/backbone.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},style:{language:"css",content:""},script:{language:"javascript",content:""},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var h={name:"backbone",title:getTemplateName("templates.starter.backbone","Backbone Starter"),thumbnail:"assets/templates/backbone.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/backbone.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -259,11 +192,7 @@ var h = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`
 var Counter = Backbone.Model.extend({
   defaults: {
     value: 0,
@@ -294,40 +223,7 @@ var AppView = Backbone.View.extend({
   }
 });
 var view = new AppView({ model: counter });
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [
-    'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js',
-    'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js',
-    'https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js',
-  ],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var b = {
-  name: 'blank',
-  title: getTemplateName('templates.starter.blank', 'Blank Project'),
-  thumbnail: 'assets/templates/blank.svg',
-  activeEditor: 'markup',
-  markup: { language: 'html', content: '' },
-  style: { language: 'css', content: '' },
-  script: { language: 'javascript', content: '' },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var f = {
-  name: 'blockly',
-  title: getTemplateName('templates.starter.blockly', 'Blockly Starter'),
-  thumbnail: 'assets/templates/blockly.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:["https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js","https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js","https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"],cssPreset:"",imports:{},types:{}};var b={name:"blank",title:getTemplateName("templates.starter.blank","Blank Project"),thumbnail:"assets/templates/blank.svg",activeEditor:"markup",markup:{language:"html",content:""},style:{language:"css",content:""},script:{language:"javascript",content:""},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var f={name:"blockly",title:getTemplateName("templates.starter.blockly","Blockly Starter"),thumbnail:"assets/templates/blockly.svg",activeEditor:"script",markup:{language:"html",content:`
 <xml
   data-src="{{ __CDN_URL__ }}@live-codes/blockly-utils@0.2.0/src/dom-blocks.xml"
   data-type="blockly/xml"
@@ -344,11 +240,7 @@ var f = {
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -357,11 +249,7 @@ var f = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'blockly',
-    content: `
+`.trimStart()},script:{language:"blockly",content:`
 <xml xmlns="https://developers.google.com/blockly/xml">
   <variables>
     <variable id="?\`Dl!ysD-zLY64Lpe)c(">count</variable>
@@ -470,22 +358,7 @@ var f = {
     </statement>
   </block>
 </xml>
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var v = {
-  name: 'bootstrap',
-  title: getTemplateName('templates.starter.bootstrap', 'Bootstrap Starter'),
-  thumbnail: 'assets/templates/bootstrap.svg',
-  activeEditor: 'markup',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var v={name:"bootstrap",title:getTemplateName("templates.starter.bootstrap","Bootstrap Starter"),thumbnail:"assets/templates/bootstrap.svg",activeEditor:"markup",markup:{language:"html",content:`
 <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
@@ -556,11 +429,7 @@ var v = {
     </p>
   </div>
 </main>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 body {
   padding-top: 5rem;
 }
@@ -578,34 +447,14 @@ body {
     font-size: 3.5rem;
   }
 }
-`.trimStart(),
-  },
-  script: { language: 'javascript', content: '' },
-  stylesheets: ['{{ __CDN_URL__ }}bootstrap@5.3.0/dist/css/bootstrap.min.css'],
-  scripts: ['{{ __CDN_URL__ }}bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js'],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var y = {
-  name: 'civet',
-  title: getTemplateName('templates.starter.civet', 'Civet Starter'),
-  thumbnail: 'assets/templates/civet.png',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},script:{language:"javascript",content:""},stylesheets:["{{ __CDN_URL__ }}bootstrap@5.3.0/dist/css/bootstrap.min.css"],scripts:["{{ __CDN_URL__ }}bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"],cssPreset:"",imports:{},types:{}};var y={name:"civet",title:getTemplateName("templates.starter.civet","Civet Starter"),thumbnail:"assets/templates/civet.png",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/civet.png" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -614,11 +463,7 @@ var y = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'civet',
-    content: `
+`.trimStart()},script:{language:"civet",content:`
 titleElement := document.getElementById 'title'
 counterElement := document.getElementById 'counter'
 button := document.getElementById 'counter-button'
@@ -631,33 +476,14 @@ increment := counter 0
 function handleClick: void counterElement.innerText = increment()
 
 button.addEventListener 'click', handleClick
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var x = {
-  name: 'clio',
-  title: getTemplateName('templates.starter.clio', 'Clio Starter'),
-  thumbnail: 'assets/templates/clio.png',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var x={name:"clio",title:getTemplateName("templates.starter.clio","Clio Starter"),thumbnail:"assets/templates/clio.png",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1 id="title">Hello, World!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/clio.png" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button" disabled>Loading...</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -666,11 +492,7 @@ var x = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'clio',
-    content: `
+`.trimStart()},script:{language:"clio",content:`
 fn capitalize str:
   (str.charAt 0 -> .toUpperCase) + (str.slice 1 -> .toLowerCase)
 
@@ -698,28 +520,9 @@ export fn main argv:
   document.querySelector "#counter-button"
     -> activateBtn
     -> .addEventListener "click" onBtnClick
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var w = {
-  name: 'clojurescript',
-  title: getTemplateName('templates.starter.clojurescript', 'ClojureScript Starter'),
-  thumbnail: 'assets/templates/cljs.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var w={name:"clojurescript",title:getTemplateName("templates.starter.clojurescript","ClojureScript Starter"),thumbnail:"assets/templates/cljs.svg",activeEditor:"script",markup:{language:"html",content:`
 <div id="app">Loading...</div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -728,11 +531,7 @@ var w = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'clojurescript',
-    content: `
+`.trimStart()},script:{language:"clojurescript",content:`
 (ns react.component
   (:require
     ;; you may use npm packages
@@ -761,28 +560,14 @@ var w = {
 (print (str "Hello, " title "!"))
 (defonce root (createRoot (js/document.querySelector "#app")))
 (.render root #jsx [Counter #js {:name title}])
-`.trimStart(),
-  },
-};
-var S = {
-  name: 'coffeescript',
-  title: getTemplateName('templates.starter.coffeescript', 'CoffeeScript Starter'),
-  thumbnail: 'assets/templates/coffeescript.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var S={name:"coffeescript",title:getTemplateName("templates.starter.coffeescript","CoffeeScript Starter"),thumbnail:"assets/templates/coffeescript.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/coffeescript.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -791,11 +576,7 @@ var S = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'coffeescript',
-    content: `
+`.trimStart()},script:{language:"coffeescript",content:`
 titleElement = document.getElementById 'title'
 counterElement = document.getElementById 'counter'
 button = document.getElementById 'counter-button'
@@ -808,33 +589,14 @@ increment = counter 0
 
 button.addEventListener('click',
   -> counterElement.innerText = increment())
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var k = {
-  name: 'commonlisp',
-  title: getTemplateName('templates.starter.commonlisp', 'Common Lisp Starter'),
-  thumbnail: 'assets/templates/commonlisp.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var k={name:"commonlisp",title:getTemplateName("templates.starter.commonlisp","Common Lisp Starter"),thumbnail:"assets/templates/commonlisp.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1 id="title">Hello, World!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/commonlisp.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -843,11 +605,7 @@ var k = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'commonlisp',
-    content: `
+`.trimStart()},script:{language:"commonlisp",content:`
 (defun set-attribute (&key selector attribute value)
   (let ((node
          (#j:document:querySelector selector)))
@@ -867,22 +625,7 @@ var k = {
 
 (#j:console:clear)
 (write "Hello, Common Lisp!")
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var _ = {
-  name: 'cpp',
-  title: getTemplateName('templates.starter.cpp', 'C++ Starter'),
-  thumbnail: 'assets/templates/cpp.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var _={name:"cpp",title:getTemplateName("templates.starter.cpp","C++ Starter"),thumbnail:"assets/templates/cpp.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="name">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/cpp.svg" />
@@ -926,11 +669,7 @@ var _ = {
     }
   });
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -939,11 +678,7 @@ var _ = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'cpp',
-    content: `
+`.trimStart()},script:{language:"cpp",content:`
 #include <iostream>
 using namespace std;
 
@@ -958,23 +693,7 @@ int main() {
 
     return 0;
 }
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var j = {
-  name: 'cpp-wasm',
-  aliases: ['clang'],
-  title: getTemplateName('templates.starter.cpp-wasm', 'C++ (Wasm) Starter'),
-  thumbnail: 'assets/templates/cpp.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var j={name:"cpp-wasm",aliases:["clang"],title:getTemplateName("templates.starter.cpp-wasm","C++ (Wasm) Starter"),thumbnail:"assets/templates/cpp.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="name">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/cpp.svg" />
@@ -1021,11 +740,7 @@ var j = {
     }
   });
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -1034,11 +749,7 @@ var j = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'cpp-wasm',
-    content: `
+`.trimStart()},script:{language:"cpp-wasm",content:`
 #include <iostream>
 using namespace std;
 
@@ -1053,17 +764,7 @@ int main() {
 
     return 0;
 }
-`.trimStart(),
-  },
-};
-var T = {
-  name: 'csharp-wasm',
-  title: 'C# (Wasm) Starter',
-  thumbnail: 'assets/templates/csharp.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var T={name:"csharp-wasm",title:"C# (Wasm) Starter",thumbnail:"assets/templates/csharp.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="name">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/csharp.svg" />
@@ -1110,11 +811,7 @@ var T = {
     }
   });
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -1123,11 +820,7 @@ var T = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'csharp-wasm',
-    content: `
+`.trimStart()},script:{language:"csharp-wasm",content:`
 using System;
 
 class Program
@@ -1143,22 +836,8 @@ class Program
         Console.WriteLine(count);
     }
 }
-`.trimStart(),
-  },
-};
-var C = {
-  name: 'd3',
-  title: 'D3 Starter',
-  thumbnail: 'assets/templates/d3.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `<div id="chart">Loading...</div>
-`,
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()}};var C={name:"d3",title:"D3 Starter",thumbnail:"assets/templates/d3.svg",activeEditor:"script",markup:{language:"html",content:`<div id="chart">Loading...</div>
+`},style:{language:"css",content:`
 .bar {
   fill: steelblue;
 }
@@ -1166,11 +845,7 @@ var C = {
 .bar:hover {
   fill: orange;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`
 import * as d3 from "d3";
 
 const data = [150, 230, 180, 90];
@@ -1192,17 +867,7 @@ svg
   .attr("height", 40)
   .attr("y", (d, i) => i * 50 + 10)
   .attr("x", 10);
-`.trimStart(),
-  },
-};
-var U = {
-  name: 'daisyui',
-  title: getTemplateName('templates.starter.daisyui', 'daisyUI Starter'),
-  thumbnail: 'assets/templates/daisyui.svg',
-  activeEditor: 'markup',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var U={name:"daisyui",title:getTemplateName("templates.starter.daisyui","daisyUI Starter"),thumbnail:"assets/templates/daisyui.svg",activeEditor:"markup",markup:{language:"html",content:`
 <!-- based on https://daisyui.com/tailwindplay/ -->
 
 <!-- buttons -->
@@ -1298,11 +963,7 @@ var U = {
   </div>
   <div class="chat-bubble">see all components <a class="link" target="_blank" href="https://daisyui.com/components">Here</a></div>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 @import "tailwindcss";
 @plugin "daisyui"{
   themes: light --default, dark --prefersdark, abyss;
@@ -1348,23 +1009,7 @@ var U = {
   --depth: 1;
   --noise: 1;
 }
-`.trimStart(),
-  },
-  script: { language: 'javascript', content: '' },
-  processors: ['tailwindcss'],
-};
-var E = {
-  name: 'diagrams',
-  title: getTemplateName('templates.starter.diagrams', 'Diagrams Starter'),
-  thumbnail: 'assets/templates/diagrams.svg',
-  activeEditor: 'markup',
-  markup: {
-    language: 'diagrams',
-    contentUrl: '{{ __livecodes_baseUrl__ }}assets/templates/diagrams-starter.html',
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},script:{language:"javascript",content:""},processors:["tailwindcss"]};var E={name:"diagrams",title:getTemplateName("templates.starter.diagrams","Diagrams Starter"),thumbnail:"assets/templates/diagrams.svg",activeEditor:"markup",markup:{language:"diagrams",contentUrl:"{{ __livecodes_baseUrl__ }}assets/templates/diagrams-starter.html"},style:{language:"css",content:`
 .container {
   display: flex;
   flex-direction: column;
@@ -1384,34 +1029,14 @@ var E = {
 .container h3:not(:nth-child(1)) {
   margin-top: 3em;
 }
-`.trimStart(),
-  },
-  script: { language: 'javascript', content: '' },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var q = {
-  name: 'fennel',
-  title: getTemplateName('templates.starter.fennel', 'Fennel Starter'),
-  thumbnail: 'assets/templates/fennel.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},script:{language:"javascript",content:""},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var q={name:"fennel",title:getTemplateName("templates.starter.fennel","Fennel Starter"),thumbnail:"assets/templates/fennel.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/fennel.svg" />
   <p id="counter">You clicked 0 times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -1420,11 +1045,7 @@ var q = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'fennel',
-    content: `
+`.trimStart()},script:{language:"fennel",content:`
 (global js (require :js))
 (global window js.global)
 (global document window.document)
@@ -1442,161 +1063,7 @@ var q = {
 (global counter (Counter:new nil))
 (global button (document:querySelector "#counter-button"))
 (button:addEventListener :click (fn [] (counter:increment) (counter:show)))
-`.trimStart(),
-  },
-};
-var L = [
-    'esm.sh',
-    'skypack',
-    'esm.run',
-    'jsdelivr.esm',
-    'fastly.jsdelivr.esm',
-    'gcore.jsdelivr.esm',
-    'testingcf.jsdelivr.esm',
-    'jsdelivr.b-cdn.esm',
-    'jspm',
-  ],
-  B = [
-    'jsdelivr',
-    'fastly.jsdelivr',
-    'unpkg',
-    'gcore.jsdelivr',
-    'testingcf.jsdelivr',
-    'jsdelivr.b-cdn',
-    'npmcdn',
-  ],
-  M = [
-    'jsdelivr.gh',
-    'fastly.jsdelivr.gh',
-    'statically',
-    'gcore.jsdelivr.gh',
-    'testingcf.jsdelivr.gh',
-    'jsdelivr.b-cdn.gh',
-  ],
-  r = {
-    getModuleUrl: (e, { isModule: s = !0, defaultCDN: i = 'esm.sh', external: o } = {}) => {
-      e = e.replace(/#nobundle/g, '');
-      let a = (n) =>
-          !o || !n.includes('https://esm.sh')
-            ? n
-            : n.includes('?')
-              ? `${n}&external=${o}`
-              : `${n}?external=${o}`,
-        l = $(e, s, i);
-      return l ? a(l) : s ? a('https://esm.sh/' + e) : 'https://cdn.jsdelivr.net/npm/' + e;
-    },
-    getUrl: (e, s) =>
-      e.startsWith('http') || e.startsWith('data:') ? e : $(e, !1, s || qt()) || e,
-    cdnLists: { npm: B, module: L, gh: M },
-    checkCDNs: async (e, s) => {
-      let i = [s, ...r.cdnLists.npm].filter(Boolean);
-      for (let o of i)
-        try {
-          if ((await fetch(r.getUrl(e, o), { method: 'HEAD' })).ok) return o;
-        } catch {}
-      return r.cdnLists.npm[0];
-    },
-  },
-  qt = () => {
-    if (globalThis.appCDN) return globalThis.appCDN;
-    try {
-      return new URL(location.href).searchParams.get('appCDN') || r.cdnLists.npm[0];
-    } catch {
-      return r.cdnLists.npm[0];
-    }
-  },
-  $ = (e, s, i) => {
-    let o = s && e.startsWith('unpkg:') ? '?module' : '';
-    e.startsWith('gh:')
-      ? (e = e.replace('gh', M[0]))
-      : e.includes(':') || (e = (i || (s ? L[0] : B[0])) + ':' + e);
-    for (let a of $t) {
-      let [l, n] = a;
-      if (l.test(e)) return e.replace(l, n) + o;
-    }
-    return null;
-  },
-  $t = [
-    [/^(esm\.sh:)(.+)/i, 'https://esm.sh/$2'],
-    [/^(npm:)(.+)/i, 'https://esm.sh/$2'],
-    [/^(node:)(.+)/i, 'https://esm.sh/$2'],
-    [/^(jsr:)(.+)/i, 'https://esm.sh/jsr/$2'],
-    [/^(pr:)(.+)/i, 'https://esm.sh/pr/$2'],
-    [/^(pkg\.pr\.new:)(.+)/i, 'https://esm.sh/pkg.pr.new/$2'],
-    [/^(skypack:)(.+)/i, 'https://cdn.skypack.dev/$2'],
-    [/^(jsdelivr:)(.+)/i, 'https://cdn.jsdelivr.net/npm/$2'],
-    [/^(fastly\.jsdelivr:)(.+)/i, 'https://fastly.jsdelivr.net/npm/$2'],
-    [/^(gcore\.jsdelivr:)(.+)/i, 'https://gcore.jsdelivr.net/npm/$2'],
-    [/^(testingcf\.jsdelivr:)(.+)/i, 'https://testingcf.jsdelivr.net/npm/$2'],
-    [/^(jsdelivr\.b-cdn:)(.+)/i, 'https://jsdelivr.b-cdn.net/npm/$2'],
-    [/^(jsdelivr\.gh:)(.+)/i, 'https://cdn.jsdelivr.net/gh/$2'],
-    [/^(fastly\.jsdelivr\.gh:)(.+)/i, 'https://fastly.jsdelivr.net/gh/$2'],
-    [/^(gcore\.jsdelivr\.gh:)(.+)/i, 'https://gcore.jsdelivr.net/gh/$2'],
-    [/^(testingcf\.jsdelivr\.gh:)(.+)/i, 'https://testingcf.jsdelivr.net/gh/$2'],
-    [/^(jsdelivr\.b-cdn\.gh:)(.+)/i, 'https://jsdelivr.b-cdn.net/gh/$2'],
-    [/^(statically:)(.+)/i, 'https://cdn.statically.io/gh/$2'],
-    [/^(esm\.run:)(.+)/i, 'https://esm.run/$2'],
-    [/^(jsdelivr\.esm:)(.+)/i, 'https://cdn.jsdelivr.net/npm/$2/+esm'],
-    [/^(fastly\.jsdelivr\.esm:)(.+)/i, 'https://fastly.jsdelivr.net/npm/$2/+esm'],
-    [/^(gcore\.jsdelivr\.esm:)(.+)/i, 'https://gcore.jsdelivr.net/npm/$2/+esm'],
-    [/^(testingcf\.jsdelivr\.esm:)(.+)/i, 'https://testingcf.jsdelivr.net/npm/$2/+esm'],
-    [/^(jsdelivr\.b-cdn\.esm:)(.+)/i, 'https://jsdelivr.b-cdn.net/npm/$2/+esm'],
-    [/^(jspm:)(.+)/i, 'https://jspm.dev/$2'],
-    [/^(esbuild:)(.+)/i, 'https://esbuild.vercel.app/$2'],
-    [/^(bundle\.run:)(.+)/i, 'https://bundle.run/$2'],
-    [/^(unpkg:)(.+)/i, 'https://unpkg.com/$2'],
-    [/^(npmcdn:)(.+)/i, 'https://npmcdn.com/$2'],
-    [/^(bundlejs:)(.+)/i, 'https://deno.bundlejs.com/?file&q=$2'],
-    [/^(bundle:)(.+)/i, 'https://deno.bundlejs.com/?file&q=$2'],
-    [/^(deno:)(.+)/i, 'https://deno.bundlejs.com/?file&q=https://deno.land/x/$2/mod.ts'],
-    [/^(https:\/\/deno\.land\/.+)/i, 'https://deno.bundlejs.com/?file&q=$1'],
-    [
-      /^(github:|https:\/\/github\.com\/)(.[^\/]+?)\/(.[^\/]+?)\/(?!releases\/)(?:(?:blob|raw)\/)?(.+?\/.+)/i,
-      'https://deno.bundlejs.com/?file&q=https://cdn.jsdelivr.net/gh/$2/$3@$4',
-    ],
-    [/^(gist\.github:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i, 'https://gist.githack.com/$2'],
-    [
-      /^(gitlab:|https:\/\/gitlab\.com\/)([^\/]+.*\/[^\/]+)\/(?:raw|blob)\/(.+?)(?:\?.*)?$/i,
-      'https://deno.bundlejs.com/?file&q=https://gl.githack.com/$2/raw/$3',
-    ],
-    [
-      /^(bitbucket:|https:\/\/bitbucket\.org\/)([^\/]+\/[^\/]+)\/(?:raw|src)\/(.+?)(?:\?.*)?$/i,
-      'https://deno.bundlejs.com/?file&q=https://bb.githack.com/$2/raw/$3',
-    ],
-    [
-      /^(bitbucket:)snippets\/([^\/]+\/[^\/]+)\/revisions\/([^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,
-      'https://bb.githack.com/!api/2.0/snippets/$2/$3/files/$4',
-    ],
-    [
-      /^(bitbucket:)snippets\/([^\/]+\/[^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,
-      'https://bb.githack.com/!api/2.0/snippets/$2/HEAD/files/$3',
-    ],
-    [
-      /^(bitbucket:)\!api\/2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,
-      'https://bb.githack.com/!api/2.0/snippets/$2/files/$3',
-    ],
-    [
-      /^(api\.bitbucket:)2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,
-      'https://bb.githack.com/!api/2.0/snippets/$2/files/$3',
-    ],
-    [/^(rawgit:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i, 'https://gist.githack.com/$2'],
-    [
-      /^(rawgit:|https:\/\/raw\.githubusercontent\.com)(\/[^\/]+\/[^\/]+|[0-9A-Za-z-]+\/[0-9a-f]+\/raw)\/(.+)/i,
-      'https://deno.bundlejs.com/?file&q=https://raw.githack.com/$2/$3',
-    ],
-  ];
-var { getUrl: Lt, getModuleUrl: te } = r;
-var c = Lt('gh:live-codes/gleam-precompiled@v0.5.0/');
-var p = c + 'build/packages/plinth/src/plinth/',
-  m = c + 'build/dev/javascript/plinth/plinth/',
-  P = {
-    name: 'gleam',
-    title: getTemplateName('templates.starter.gleam', 'Gleam Starter'),
-    thumbnail: 'assets/templates/gleam.svg',
-    activeEditor: 'script',
-    markup: {
-      language: 'html',
-      content: `
+`.trimStart()}};var L=["esm.sh","skypack","esm.run","jsdelivr.esm","fastly.jsdelivr.esm","gcore.jsdelivr.esm","testingcf.jsdelivr.esm","jsdelivr.b-cdn.esm","jspm"],B=["jsdelivr","fastly.jsdelivr","unpkg","gcore.jsdelivr","testingcf.jsdelivr","jsdelivr.b-cdn","npmcdn"],M=["jsdelivr.gh","fastly.jsdelivr.gh","statically","gcore.jsdelivr.gh","testingcf.jsdelivr.gh","jsdelivr.b-cdn.gh"],r={getModuleUrl:(e,{isModule:s=!0,defaultCDN:i="esm.sh",external:o}={})=>{e=e.replace(/#nobundle/g,"");let a=n=>!o||!n.includes("https://esm.sh")?n:n.includes("?")?`${n}&external=${o}`:`${n}?external=${o}`,l=$(e,s,i);return l?a(l):s?a("https://esm.sh/"+e):"https://cdn.jsdelivr.net/npm/"+e},getUrl:(e,s)=>e.startsWith("http")||e.startsWith("data:")?e:$(e,!1,s||qt())||e,cdnLists:{npm:B,module:L,gh:M},checkCDNs:async(e,s)=>{let i=[s,...r.cdnLists.npm].filter(Boolean);for(let o of i)try{if((await fetch(r.getUrl(e,o),{method:"HEAD"})).ok)return o}catch{}return r.cdnLists.npm[0]}},qt=()=>{if(globalThis.appCDN)return globalThis.appCDN;try{return new URL(location.href).searchParams.get("appCDN")||r.cdnLists.npm[0]}catch{return r.cdnLists.npm[0]}},$=(e,s,i)=>{let o=s&&e.startsWith("unpkg:")?"?module":"";e.startsWith("gh:")?e=e.replace("gh",M[0]):e.includes(":")||(e=(i||(s?L[0]:B[0]))+":"+e);for(let a of $t){let[l,n]=a;if(l.test(e))return e.replace(l,n)+o}return null},$t=[[/^(esm\.sh:)(.+)/i,"https://esm.sh/$2"],[/^(npm:)(.+)/i,"https://esm.sh/$2"],[/^(node:)(.+)/i,"https://esm.sh/$2"],[/^(jsr:)(.+)/i,"https://esm.sh/jsr/$2"],[/^(pr:)(.+)/i,"https://esm.sh/pr/$2"],[/^(pkg\.pr\.new:)(.+)/i,"https://esm.sh/pkg.pr.new/$2"],[/^(skypack:)(.+)/i,"https://cdn.skypack.dev/$2"],[/^(jsdelivr:)(.+)/i,"https://cdn.jsdelivr.net/npm/$2"],[/^(fastly\.jsdelivr:)(.+)/i,"https://fastly.jsdelivr.net/npm/$2"],[/^(gcore\.jsdelivr:)(.+)/i,"https://gcore.jsdelivr.net/npm/$2"],[/^(testingcf\.jsdelivr:)(.+)/i,"https://testingcf.jsdelivr.net/npm/$2"],[/^(jsdelivr\.b-cdn:)(.+)/i,"https://jsdelivr.b-cdn.net/npm/$2"],[/^(jsdelivr\.gh:)(.+)/i,"https://cdn.jsdelivr.net/gh/$2"],[/^(fastly\.jsdelivr\.gh:)(.+)/i,"https://fastly.jsdelivr.net/gh/$2"],[/^(gcore\.jsdelivr\.gh:)(.+)/i,"https://gcore.jsdelivr.net/gh/$2"],[/^(testingcf\.jsdelivr\.gh:)(.+)/i,"https://testingcf.jsdelivr.net/gh/$2"],[/^(jsdelivr\.b-cdn\.gh:)(.+)/i,"https://jsdelivr.b-cdn.net/gh/$2"],[/^(statically:)(.+)/i,"https://cdn.statically.io/gh/$2"],[/^(esm\.run:)(.+)/i,"https://esm.run/$2"],[/^(jsdelivr\.esm:)(.+)/i,"https://cdn.jsdelivr.net/npm/$2/+esm"],[/^(fastly\.jsdelivr\.esm:)(.+)/i,"https://fastly.jsdelivr.net/npm/$2/+esm"],[/^(gcore\.jsdelivr\.esm:)(.+)/i,"https://gcore.jsdelivr.net/npm/$2/+esm"],[/^(testingcf\.jsdelivr\.esm:)(.+)/i,"https://testingcf.jsdelivr.net/npm/$2/+esm"],[/^(jsdelivr\.b-cdn\.esm:)(.+)/i,"https://jsdelivr.b-cdn.net/npm/$2/+esm"],[/^(jspm:)(.+)/i,"https://jspm.dev/$2"],[/^(esbuild:)(.+)/i,"https://esbuild.vercel.app/$2"],[/^(bundle\.run:)(.+)/i,"https://bundle.run/$2"],[/^(unpkg:)(.+)/i,"https://unpkg.com/$2"],[/^(npmcdn:)(.+)/i,"https://npmcdn.com/$2"],[/^(bundlejs:)(.+)/i,"https://deno.bundlejs.com/?file&q=$2"],[/^(bundle:)(.+)/i,"https://deno.bundlejs.com/?file&q=$2"],[/^(deno:)(.+)/i,"https://deno.bundlejs.com/?file&q=https://deno.land/x/$2/mod.ts"],[/^(https:\/\/deno\.land\/.+)/i,"https://deno.bundlejs.com/?file&q=$1"],[/^(github:|https:\/\/github\.com\/)(.[^\/]+?)\/(.[^\/]+?)\/(?!releases\/)(?:(?:blob|raw)\/)?(.+?\/.+)/i,"https://deno.bundlejs.com/?file&q=https://cdn.jsdelivr.net/gh/$2/$3@$4"],[/^(gist\.github:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i,"https://gist.githack.com/$2"],[/^(gitlab:|https:\/\/gitlab\.com\/)([^\/]+.*\/[^\/]+)\/(?:raw|blob)\/(.+?)(?:\?.*)?$/i,"https://deno.bundlejs.com/?file&q=https://gl.githack.com/$2/raw/$3"],[/^(bitbucket:|https:\/\/bitbucket\.org\/)([^\/]+\/[^\/]+)\/(?:raw|src)\/(.+?)(?:\?.*)?$/i,"https://deno.bundlejs.com/?file&q=https://bb.githack.com/$2/raw/$3"],[/^(bitbucket:)snippets\/([^\/]+\/[^\/]+)\/revisions\/([^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,"https://bb.githack.com/!api/2.0/snippets/$2/$3/files/$4"],[/^(bitbucket:)snippets\/([^\/]+\/[^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,"https://bb.githack.com/!api/2.0/snippets/$2/HEAD/files/$3"],[/^(bitbucket:)\!api\/2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,"https://bb.githack.com/!api/2.0/snippets/$2/files/$3"],[/^(api\.bitbucket:)2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,"https://bb.githack.com/!api/2.0/snippets/$2/files/$3"],[/^(rawgit:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i,"https://gist.githack.com/$2"],[/^(rawgit:|https:\/\/raw\.githubusercontent\.com)(\/[^\/]+\/[^\/]+|[0-9A-Za-z-]+\/[0-9a-f]+\/raw)\/(.+)/i,"https://deno.bundlejs.com/?file&q=https://raw.githack.com/$2/$3"]];var{getUrl:Lt,getModuleUrl:te}=r;var c=Lt("gh:live-codes/gleam-precompiled@v0.5.0/");var p=c+"build/packages/plinth/src/plinth/",m=c+"build/dev/javascript/plinth/plinth/",P={name:"gleam",title:getTemplateName("templates.starter.gleam","Gleam Starter"),thumbnail:"assets/templates/gleam.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1 id="title">Hello, World!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/gleam.svg" />
@@ -1604,11 +1071,7 @@ var p = c + 'build/packages/plinth/src/plinth/',
   <button id="counter-button">Click me</button>
 </div>
 
-`.trimStart(),
-    },
-    style: {
-      language: 'css',
-      content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -1617,11 +1080,7 @@ var p = c + 'build/packages/plinth/src/plinth/',
 .logo {
   width: 150px;
 }
-`.trimStart(),
-    },
-    script: {
-      language: 'gleam',
-      content: `
+`.trimStart()},script:{language:"gleam",content:`
 import gleam/int
 import gleam/io
 import gleam/result
@@ -1672,47 +1131,14 @@ pub fn hello(str: String) -> String
 // npm module
 @external(javascript, "npm:cowsay2", "say")
 pub fn cowsay(str: String) -> String
-`.trimStart(),
-    },
-    customSettings: {
-      imports: { 'my_pkg/greet.js': c + 'demo/greet.js' },
-      gleam: {
-        modules: {
-          'plinth/browser/document': {
-            srcUrl: p + 'browser/document.gleam',
-            compiledUrl: m + 'browser/document.mjs',
-          },
-          'plinth/browser/element': {
-            srcUrl: p + 'browser/element.gleam',
-            compiledUrl: m + 'browser/element.mjs',
-          },
-          'plinth/browser/event': {
-            srcUrl: p + 'browser/event.gleam',
-            compiledUrl: m + 'browser/event.mjs',
-          },
-        },
-      },
-    },
-  };
-var R = {
-  name: 'go',
-  title: getTemplateName('templates.starter.go', 'Go Starter'),
-  thumbnail: 'assets/templates/go.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},customSettings:{imports:{"my_pkg/greet.js":c+"demo/greet.js"},gleam:{modules:{"plinth/browser/document":{srcUrl:p+"browser/document.gleam",compiledUrl:m+"browser/document.mjs"},"plinth/browser/element":{srcUrl:p+"browser/element.gleam",compiledUrl:m+"browser/element.mjs"},"plinth/browser/event":{srcUrl:p+"browser/event.gleam",compiledUrl:m+"browser/event.mjs"}}}}};var R={name:"go",title:getTemplateName("templates.starter.go","Go Starter"),thumbnail:"assets/templates/go.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/go.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -1721,11 +1147,7 @@ var R = {
 .logo {
   width: 250px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'go',
-    content: `
+`.trimStart()},script:{language:"go",content:`
 package main
 
 import (
@@ -1772,22 +1194,7 @@ func greet() {
 		fmt.Println("Good evening")
 	}
 }
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var N = {
-  name: 'go-wasm',
-  title: getTemplateName('templates.starter.go-wasm', 'Go (Wasm) Starter'),
-  thumbnail: 'assets/templates/go.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var N={name:"go-wasm",title:getTemplateName("templates.starter.go-wasm","Go (Wasm) Starter"),thumbnail:"assets/templates/go.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Go (Wasm)</h1>
   <img class="logo" alt="Go logo" src="{{ __livecodes_baseUrl__ }}assets/templates/go.svg" />
@@ -1848,11 +1255,7 @@ var N = {
 
   });
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container {
   max-width: 800px;
   margin: 0 auto;
@@ -1919,11 +1322,7 @@ input[type="text"], input[type="number"] {
   color: #333;
   margin-top: 10px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'go-wasm',
-    content: `
+`.trimStart()},script:{language:"go-wasm",content:`
 package main
 
 import (
@@ -1952,19 +1351,7 @@ func main() {
 		fmt.Println("Hello from Go WebAssembly!")
 	}
 }
-`.trimStart(),
-  },
-};
-var H = {
-  name: 'imba',
-  title: getTemplateName('templates.starter.imba', 'Imba Starter'),
-  thumbnail: 'assets/templates/imba.svg',
-  activeEditor: 'script',
-  markup: { language: 'html', content: '' },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'imba',
-    content: `
+`.trimStart()}};var H={name:"imba",title:getTemplateName("templates.starter.imba","Imba Starter"),thumbnail:"assets/templates/imba.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:""},script:{language:"imba",content:`
 tag app-counter
 	prop name = "Imba"
 	prop count = 0
@@ -1982,22 +1369,7 @@ tag app-counter
 		<button.btn @click=count++> "Click me"
 
 imba.mount <app-counter>
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var W = {
-  name: 'java',
-  title: getTemplateName('templates.starter.java', 'Java Starter'),
-  thumbnail: 'assets/templates/java.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var W={name:"java",title:getTemplateName("templates.starter.java","Java Starter"),thumbnail:"assets/templates/java.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="name">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/java.svg" />
@@ -2043,11 +1415,7 @@ var W = {
     }
   });
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2056,11 +1424,7 @@ var W = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'java',
-    content: `
+`.trimStart()},script:{language:"java",content:`
 import java.io.BufferedReader;
 import java.io.IOException;
 import java.io.InputStreamReader;
@@ -2079,28 +1443,14 @@ public class Main {
     System.out.println(count);
   }
 }
-`.trimStart(),
-  },
-};
-var I = {
-  name: 'javascript',
-  title: getTemplateName('templates.starter.javascript', 'JavaScript Starter'),
-  thumbnail: 'assets/templates/javascript.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var I={name:"javascript",title:getTemplateName("templates.starter.javascript","JavaScript Starter"),thumbnail:"assets/templates/javascript.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/javascript.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2109,11 +1459,7 @@ var I = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`
 const title = document.querySelector("#title");
 const counter = document.querySelector("#counter");
 const button = document.querySelector("#counter-button");
@@ -2125,24 +1471,7 @@ button.addEventListener("click", () => {
   count++;
   counter.innerText = count;
 });
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var O = {
-  name: 'jest-react',
-  title: getTemplateName('templates.starter.jest-react', 'Jest/React Starter'),
-  thumbnail: 'assets/templates/jest.svg',
-  activeEditor: 'script',
-  autotest: !0,
-  markup: { language: 'html', content: '' },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var O={name:"jest-react",title:getTemplateName("templates.starter.jest-react","Jest/React Starter"),thumbnail:"assets/templates/jest.svg",activeEditor:"script",autotest:!0,markup:{language:"html",content:""},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2156,11 +1485,7 @@ var O = {
   font-size: 0.9em;
   margin: 2em;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'jsx',
-    content: `
+`.trimStart()},script:{language:"jsx",content:`
 import { useState } from "react";
 
 export const increment = (count) => (count ?? 0) + 1;
@@ -2181,11 +1506,7 @@ function Counter(props) {
 export default function App() {
   return <Counter name="Jest with React" />;
 }
-`.trimStart(),
-  },
-  tests: {
-    language: 'tsx',
-    content: `
+`.trimStart()},tests:{language:"tsx",content:`
 import { render, fireEvent, screen, cleanup } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { assert } from "chai";
@@ -2232,19 +1553,7 @@ describe("Page", () => {
     );
   });
 });
-`.trimStart(),
-  },
-  tools: { enabled: 'all', active: 'tests', status: 'open' },
-};
-var D = {
-  name: 'jest',
-  title: getTemplateName('templates.starter.jest', 'Jest Starter'),
-  thumbnail: 'assets/templates/jest.svg',
-  autotest: !0,
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},tools:{enabled:"all",active:"tests",status:"open"}};var D={name:"jest",title:getTemplateName("templates.starter.jest","Jest Starter"),thumbnail:"assets/templates/jest.svg",autotest:!0,activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/jest.svg" />
@@ -2252,11 +1561,7 @@ var D = {
   <button id="counter-button">Click me</button>
   <p class="info">Run tests in the "Tests" panel below.</p>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2270,11 +1575,7 @@ var D = {
   font-size: 0.9em;
   margin: 2em;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`
 export class Counter {
   count;
   constructor() {
@@ -2302,11 +1603,7 @@ button.addEventListener(
   },
   false
 );
-`.trimStart(),
-  },
-  tests: {
-    language: 'tsx',
-    content: `
+`.trimStart()},tests:{language:"tsx",content:`
 import { fireEvent, screen } from "@testing-library/dom";
 import "@testing-library/jest-dom";
 import { assert } from "chai";
@@ -2346,29 +1643,14 @@ describe("Page", () => {
     );
   });
 });
-`.trimStart(),
-  },
-  tools: { enabled: 'all', active: 'tests', status: 'open' },
-};
-var Y = {
-  name: 'jquery',
-  title: getTemplateName('templates.starter.jquery', 'jQuery Starter'),
-  thumbnail: 'assets/templates/jquery.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},tools:{enabled:"all",active:"tests",status:"open"}};var Y={name:"jquery",title:getTemplateName("templates.starter.jquery","jQuery Starter"),thumbnail:"assets/templates/jquery.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/jquery.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2377,11 +1659,7 @@ var Y = {
 .logo {
   width: 300px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`
 import $ from "jquery";
 
 $("#title").text('jQuery');
@@ -2391,22 +1669,7 @@ $("#counter-button").click(() => {
   count += 1;
   $("#counter").text(count);
 });
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var A = {
-  name: 'julia',
-  title: getTemplateName('templates.starter.julia', 'Julia Starter'),
-  thumbnail: 'assets/templates/julia.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var A={name:"julia",title:getTemplateName("templates.starter.julia","Julia Starter"),thumbnail:"assets/templates/julia.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="name">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/julia.svg" />
@@ -2456,11 +1719,7 @@ var A = {
     }
   });
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2469,11 +1728,7 @@ var A = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'julia',
-    content: `
+`.trimStart()},script:{language:"julia",content:`
 function increment(x)
     if x == ""
         return 0
@@ -2492,33 +1747,14 @@ function formatOutput(args...)
 end
 
 formatOutput(getTitle(), increment(livecodesInput))
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var z = {
-  name: 'knockout',
-  title: getTemplateName('templates.starter.knockout', 'Knockout Starter'),
-  thumbnail: 'assets/templates/knockout.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var z={name:"knockout",title:getTemplateName("templates.starter.knockout","Knockout Starter"),thumbnail:"assets/templates/knockout.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span data-bind="text: title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/knockout.svg" />
   <p>You clicked <span data-bind="text: numberOfClicks">0</span> times.</p>
   <button data-bind="click: registerClick">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2527,11 +1763,7 @@ var z = {
 .logo {
   width: 250px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`
 import ko from "knockout";
 
 class ClickCounterViewModel {
@@ -2546,29 +1778,9 @@ class ClickCounterViewModel {
 }
 
 ko.applyBindings(new ClickCounterViewModel());
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var G = {
-  name: 'lit',
-  title: getTemplateName('templates.starter.lit', 'Lit Starter'),
-  thumbnail: 'assets/templates/lit.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var G={name:"lit",title:getTemplateName("templates.starter.lit","Lit Starter"),thumbnail:"assets/templates/lit.svg",activeEditor:"script",markup:{language:"html",content:`
 <my-counter name="Lit"></my-counter>
-`.trimStart(),
-  },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'typescript',
-    content: `
+`.trimStart()},style:{language:"css",content:""},script:{language:"typescript",content:`
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { SignalWatcher, signal } from "@lit-labs/preact-signals";
@@ -2607,29 +1819,14 @@ export class SignalExample extends SignalWatcher(LitElement) {
     }
   \`;
 }
-`.trimStart(),
-  },
-  customSettings: { typescript: { experimentalDecorators: !0, useDefineForClassFields: !1 } },
-};
-var V = {
-  name: 'livescript',
-  title: getTemplateName('templates.starter.livescript', 'LiveScript Starter'),
-  thumbnail: 'assets/templates/livescript.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},customSettings:{typescript:{experimentalDecorators:!0,useDefineForClassFields:!1}}};var V={name:"livescript",title:getTemplateName("templates.starter.livescript","LiveScript Starter"),thumbnail:"assets/templates/livescript.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/livescript.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2638,11 +1835,7 @@ var V = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'livescript',
-    content: `
+`.trimStart()},script:{language:"livescript",content:`
 { capitalize, join, map, words } = require 'prelude-ls'
 
 title = 'live script'
@@ -2660,33 +1853,14 @@ button = document.getElementById \\counter-button
 
 button.addEventListener \\click,
   -> counter-element.innerText = counter!
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var X = {
-  name: 'lua',
-  title: getTemplateName('templates.starter.lua', 'Lua Starter'),
-  thumbnail: 'assets/templates/lua.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var X={name:"lua",title:getTemplateName("templates.starter.lua","Lua Starter"),thumbnail:"assets/templates/lua.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/lua.svg" />
   <p id="counter">You clicked 0 times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2695,11 +1869,7 @@ var X = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'lua',
-    content: `
+`.trimStart()},script:{language:"lua",content:`
 js = require "js"
 window = js.global
 document = window.document
@@ -2737,28 +1907,14 @@ elseif time >= 12 and time < 18 then
 else
   print ("Good evening")
 end
-`.trimStart(),
-  },
-};
-var F = {
-  name: 'lua-wasm',
-  title: getTemplateName('templates.starter.lua-wasm', 'Lua (Wasm) Starter'),
-  thumbnail: 'assets/templates/lua.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var F={name:"lua-wasm",title:getTemplateName("templates.starter.lua-wasm","Lua (Wasm) Starter"),thumbnail:"assets/templates/lua.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/lua.svg" />
   <p id="counter">You clicked 0 times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2767,11 +1923,7 @@ var F = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'lua-wasm',
-    content: `
+`.trimStart()},script:{language:"lua-wasm",content:`
 document = window.document
 document:getElementById("title").innerHTML = "Lua"
 
@@ -2806,19 +1958,7 @@ elseif time >= 12 and time < 18 then
 else
   print ("Good evening")
 end
-`.trimStart(),
-  },
-};
-var J = {
-  name: 'malina',
-  title: getTemplateName('templates.starter.malina', 'Malina.js Starter'),
-  thumbnail: 'assets/templates/malina.svg',
-  activeEditor: 'script',
-  markup: { language: 'html', content: '' },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'malina',
-    content: `
+`.trimStart()}};var J={name:"malina",title:getTemplateName("templates.starter.malina","Malina.js Starter"),thumbnail:"assets/templates/malina.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:""},script:{language:"malina",content:`
 <script>
   let title = "Malina.js";
   let counter = 0;
@@ -2844,22 +1984,7 @@ var J = {
   <p>You clicked {counter} times.</p>
   <button @click={increment}>Click me</button>
 </div>
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var Z = {
-  name: 'markdown',
-  title: getTemplateName('templates.starter.markdown', 'Markdown Starter'),
-  thumbnail: 'assets/templates/markdown.svg',
-  activeEditor: 'markup',
-  markup: {
-    language: 'markdown',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Z={name:"markdown",title:getTemplateName("templates.starter.markdown","Markdown Starter"),thumbnail:"assets/templates/markdown.svg",activeEditor:"markup",markup:{language:"markdown",content:`
 # Project Title
 
 One Paragraph of project description goes here
@@ -2950,11 +2075,7 @@ This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md
 
 
 Source: https://gist.github.com/PurpleBooth/109311bb0361f32d87a2
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 @import "github-markdown-css";
 
 body {
@@ -2963,27 +2084,8 @@ body {
   padding: 20px;
   margin: 20px !important;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `document.body.classList.add('markdown-body');
-`,
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var K = {
-  name: 'mdx',
-  title: getTemplateName('templates.starter.mdx', 'MDX Starter'),
-  thumbnail: 'assets/templates/mdx.svg',
-  activeEditor: 'markup',
-  markup: {
-    language: 'mdx',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`document.body.classList.add('markdown-body');
+`},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var K={name:"mdx",title:getTemplateName("templates.starter.mdx","MDX Starter"),thumbnail:"assets/templates/mdx.svg",activeEditor:"markup",markup:{language:"mdx",content:`
 import { Greeting, Counter } from './script';
 
 <Greeting name="MDX" />
@@ -2991,11 +2093,7 @@ import { Greeting, Counter } from './script';
 ![MDX Logo]({{ __livecodes_baseUrl__ }}assets/templates/mdx.svg)
 
 <Counter />
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 body,
 body button {
   text-align: center;
@@ -3004,11 +2102,7 @@ body button {
 img {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'jsx',
-    content: `
+`.trimStart()},script:{language:"jsx",content:`
 import { useState } from "react";
 
 export const Greeting = (props) => <h1>Hello, {props.name || "World"}!</h1>;
@@ -3024,22 +2118,8 @@ export function Counter() {
     </div>
   );
 }
-`.trimStart(),
-  },
-};
-var Q = {
-  name: 'ocaml',
-  title: getTemplateName('templates.starter.ocaml', 'Ocaml Starter'),
-  thumbnail: 'assets/templates/ocaml.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `<div id="app">Loading...</div>
-`,
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()}};var Q={name:"ocaml",title:getTemplateName("templates.starter.ocaml","Ocaml Starter"),thumbnail:"assets/templates/ocaml.svg",activeEditor:"script",markup:{language:"html",content:`<div id="app">Loading...</div>
+`},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -3048,11 +2128,7 @@ var Q = {
 .logo {
   width: 250px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'ocaml',
-    content: `
+`.trimStart()},script:{language:"ocaml",content:`
 module App =
   struct
     let make ~name  =
@@ -3091,35 +2167,14 @@ let _ =
   | None  -> ()
 
 let _ = print_endline "Hello, OCaml!"
-`.trimStart(),
-  },
-  customSettings: {
-    imports: {
-      react: 'https://esm.sh/react@18.3.1',
-      'react/': 'https://esm.sh/react@18.3.1/',
-      'react-dom': 'https://esm.sh/react-dom@18.3.1',
-    },
-  },
-};
-var tt = {
-  name: 'perl',
-  title: getTemplateName('templates.starter.perl', 'Perl Starter'),
-  thumbnail: 'assets/templates/perl.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},customSettings:{imports:{react:"https://esm.sh/react@18.3.1","react/":"https://esm.sh/react@18.3.1/","react-dom":"https://esm.sh/react-dom@18.3.1"}}};var tt={name:"perl",title:getTemplateName("templates.starter.perl","Perl Starter"),thumbnail:"assets/templates/perl.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/perl.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -3128,11 +2183,7 @@ var tt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'perl',
-    content: `
+`.trimStart()},script:{language:"perl",content:`
 use strict;
 
 my $title = 'Perl';
@@ -3174,30 +2225,11 @@ if ($hour < 12) {
 } else {
   print "Good evening";
 }
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var et = {
-  name: 'phaser',
-  title: 'Phaser Starter',
-  thumbnail: 'assets/templates/phaser.png',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var et={name:"phaser",title:"Phaser Starter",thumbnail:"assets/templates/phaser.png",activeEditor:"script",markup:{language:"html",content:`
 <div id="app">
   <div id="game-container"></div>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 body {
   margin: 0;
   padding: 0;
@@ -3213,11 +2245,7 @@ body {
   justify-content: center;
   align-items: center;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`
 // based on https://github.com/phaserjs/template-vite
 // and https://phaser.io/sandbox/XyqPcjNr
 
@@ -3391,28 +2419,14 @@ const config = {
 };
 
 export default new Phaser.Game(config);
-`.trimStart(),
-  },
-};
-var st = {
-  name: 'php',
-  title: getTemplateName('templates.starter.php', 'PHP Starter'),
-  thumbnail: 'assets/templates/php.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var st={name:"php",title:getTemplateName("templates.starter.php","PHP Starter"),thumbnail:"assets/templates/php.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">world</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/php.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -3421,11 +2435,7 @@ var st = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'php',
-    content: `
+`.trimStart()},script:{language:"php",content:`
 <?php
 $title = 'PHP';
 $document->getElementById('title')->innerText = $title;
@@ -3439,26 +2449,12 @@ $document
     $document->getElementById('counter')->innerText = $count;
     echo "count: $count";
   });
-`.trimStart(),
-  },
-};
-var ot = {
-  name: 'php-wasm',
-  title: getTemplateName('templates.starter.php-wasm', 'PHP (Wasm) Starter'),
-  thumbnail: 'assets/templates/php.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var ot={name:"php-wasm",title:getTemplateName("templates.starter.php-wasm","PHP (Wasm) Starter"),thumbnail:"assets/templates/php.svg",activeEditor:"script",markup:{language:"html",content:`
 <p>
   <h1>Hello, <span id="title">world</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/php.svg" />
 </p>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 body {
   text-align: center;
   font: 1em sans-serif;
@@ -3466,11 +2462,7 @@ body {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'php-wasm',
-    content: `
+`.trimStart()},script:{language:"php-wasm",content:`
 <?php
 $title = "PHP";
 vrzno_eval('document.getElementById("title").innerText = "' . $title . '"');
@@ -3489,17 +2481,7 @@ if ($time < 12) {
 $date = date("l jS \\of F, Y");
 
 echo $greeting . "<br>Today is:<br>" . $date;
-`.trimStart(),
-  },
-};
-var nt = {
-  name: 'postgresql',
-  title: getTemplateName('templates.starter.postgresql', 'PostgreSQL Starter'),
-  thumbnail: 'assets/templates/postgresql.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var nt={name:"postgresql",title:getTemplateName("templates.starter.postgresql","PostgreSQL Starter"),thumbnail:"assets/templates/postgresql.svg",activeEditor:"script",markup:{language:"html",content:`
 <div id="output">
   <details open>
     <summary>Tables</summary>
@@ -3529,11 +2511,7 @@ var nt = {
     document.querySelector('#obj-result').innerHTML = JSON.stringify(results, null, 2);
   }).catch(console.error);
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 #output {
   color: #3d3d3d;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
@@ -3572,11 +2550,7 @@ var nt = {
   min-width: 95%;
   padding: 1em;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'postgresql',
-    content: `
+`.trimStart()},script:{language:"postgresql",content:`
 -- based on https://stackoverflow.com/q/7745609
 
 CREATE TABLE IF NOT EXISTS quotes (
@@ -3611,22 +2585,8 @@ SELECT a.id, a.rev, a.quote
                ROW_NUMBER() OVER (PARTITION BY id ORDER BY rev DESC) rank
           FROM quotes) a
   WHERE a.rank = 1;
-`.trimStart(),
-  },
-};
-var rt = {
-  name: 'preact',
-  title: getTemplateName('templates.starter.preact', 'Preact Starter'),
-  thumbnail: 'assets/templates/preact.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `<div id="app"></div>
-`,
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()}};var rt={name:"preact",title:getTemplateName("templates.starter.preact","Preact Starter"),thumbnail:"assets/templates/preact.svg",activeEditor:"script",markup:{language:"html",content:`<div id="app"></div>
+`},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -3635,11 +2595,7 @@ var rt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'jsx',
-    content: `
+`.trimStart()},script:{language:"jsx",content:`
 /** @jsx h */
 import { h, render } from 'preact';
 import { useSignal } from "@preact/signals";
@@ -3657,17 +2613,7 @@ function App(props) {
 }
 
 render(<App name="Preact" />, document.body);
-`.trimStart(),
-  },
-};
-var at = {
-  name: 'prolog',
-  title: getTemplateName('templates.starter.prolog', 'Prolog Starter'),
-  thumbnail: 'assets/templates/tau-prolog.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var at={name:"prolog",title:getTemplateName("templates.starter.prolog","Prolog Starter"),thumbnail:"assets/templates/tau-prolog.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/tau-prolog.svg" title="Tau Prolog" />
@@ -3713,11 +2659,7 @@ var at = {
   getTitle();
   runQuery();
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -3741,11 +2683,7 @@ var at = {
 }
 #result.error {
   color: red;
-}`.trimStart(),
-  },
-  script: {
-    language: 'prolog',
-    content: `
+}`.trimStart()},script:{language:"prolog",content:`
 title('Prolog').
 
 male(john).
@@ -3811,33 +2749,14 @@ aunt(X, Y):- parent(Z, Y),
 ancestor(X, Y):- parent(X, Y).
 ancestor(X, Y):- parent(X, Z),
     ancestor(Z, Y).
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var it = {
-  name: 'python',
-  title: getTemplateName('templates.starter.python', 'Python Starter'),
-  thumbnail: 'assets/templates/python.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var it={name:"python",title:getTemplateName("templates.starter.python","Python Starter"),thumbnail:"assets/templates/python.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1 id="header">Hello, World!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/python.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -3846,11 +2765,7 @@ var it = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'python',
-    content: `
+`.trimStart()},script:{language:"python",content:`
 from browser import document
 import time
 
@@ -3874,38 +2789,14 @@ elif 12 <= current_time < 18:
       print('Good afternoon')
 else:
       print('Good evening')
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var lt = {
-  name: 'python-wasm',
-  aliases: ['pyodide'],
-  title: 'Python (Wasm) Starter',
-  thumbnail: 'assets/templates/python.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var lt={name:"python-wasm",aliases:["pyodide"],title:"Python (Wasm) Starter",thumbnail:"assets/templates/python.svg",activeEditor:"script",markup:{language:"html",content:`
 <h1 id="title">Hello, World!</h1>
 <div id="loading">Loading...</div>
 <div id="plots"></div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `h1 {
+`.trimStart()},style:{language:"css",content:`h1 {
   text-align: center;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'python-wasm',
-    content: `
+`.trimStart()},script:{language:"python-wasm",content:`
 from js import document, XMLHttpRequest
 import pandas as pd
 import matplotlib.pyplot as plt
@@ -3961,17 +2852,7 @@ loading.innerHTML = ""
 
 # avoid leaving figures open
 plt.close("all")
-`.trimStart(),
-  },
-};
-var ct = {
-  name: 'r',
-  title: getTemplateName('templates.starter.r', 'R Starter'),
-  thumbnail: 'assets/templates/r.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var ct={name:"r",title:getTemplateName("templates.starter.r","R Starter"),thumbnail:"assets/templates/r.svg",activeEditor:"script",markup:{language:"html",content:`
 <div id="output">Loading...</div>
 
 <script>
@@ -3983,12 +2864,7 @@ var ct = {
   //   canvasBackground: 'transparent',
   // };
 <\/script>
-`.trimStart(),
-  },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'r',
-    content: `
+`.trimStart()},style:{language:"css",content:""},script:{language:"r",content:`
 head(iris)
 
 PW <- iris$Petal.Width
@@ -4024,24 +2900,7 @@ legend("topleft",
 #   summarize(mean_price = mean(price)) %>%
 #   ggplot(aes(x = cut, y = mean_price, fill = cut)) +
 #       geom_bar(stat = "identity")
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var pt = {
-  name: 'react-native',
-  title: getTemplateName('templates.starter.react-native', 'React Native Starter'),
-  thumbnail: 'assets/templates/react.svg',
-  activeEditor: 'script',
-  markup: { language: 'html', content: '' },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'react-native',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var pt={name:"react-native",title:getTemplateName("templates.starter.react-native","React Native Starter"),thumbnail:"assets/templates/react.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:""},script:{language:"react-native",content:`
 import { useState } from "react";
 import { Button, Image, StyleSheet, Text, View } from "react-native";
 
@@ -4118,18 +2977,7 @@ const styles = StyleSheet.create({
     color: "#1B95E0",
   },
 });
-`.trimStart(),
-  },
-};
-var mt = {
-  name: 'react',
-  title: getTemplateName('templates.starter.react', 'React Starter'),
-  thumbnail: 'assets/templates/react.svg',
-  activeEditor: 'script',
-  markup: { language: 'html', content: '' },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()}};var mt={name:"react",title:getTemplateName("templates.starter.react","React Starter"),thumbnail:"assets/templates/react.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -4138,11 +2986,7 @@ var mt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'react',
-    content: `
+`.trimStart()},script:{language:"react",content:`
 import { useState } from "react";
 
 function Counter(props) {
@@ -4160,27 +3004,8 @@ function Counter(props) {
 export default function App() {
   return <Counter name="React" />;
 }
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var dt = {
-  name: 'reason',
-  title: getTemplateName('templates.starter.reason', 'Reason Starter'),
-  thumbnail: 'assets/templates/reason.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `<div id="app">Loading...</div>
-`,
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var dt={name:"reason",title:getTemplateName("templates.starter.reason","Reason Starter"),thumbnail:"assets/templates/reason.svg",activeEditor:"script",markup:{language:"html",content:`<div id="app">Loading...</div>
+`},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -4189,11 +3014,7 @@ var dt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'reason',
-    content: `
+`.trimStart()},script:{language:"reason",content:`
 module App = {
   [@react.component]
   let make = (~name) => {
@@ -4224,29 +3045,8 @@ switch (ReactDOM.querySelector("#app")) {
 }
 
 Js.log("Hello, Reason!");
-`.trimStart(),
-  },
-  customSettings: {
-    imports: {
-      react: 'https://esm.sh/react@18.3.1',
-      'react/': 'https://esm.sh/react@18.3.1/',
-      'react-dom': 'https://esm.sh/react-dom@18.3.1',
-    },
-  },
-};
-var ut = {
-  name: 'rescript',
-  title: getTemplateName('templates.starter.rescript', 'ReScript Starter'),
-  thumbnail: 'assets/templates/rescript.png',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `<div id="app">Loading...</div>
-`,
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},customSettings:{imports:{react:"https://esm.sh/react@18.3.1","react/":"https://esm.sh/react@18.3.1/","react-dom":"https://esm.sh/react-dom@18.3.1"}}};var ut={name:"rescript",title:getTemplateName("templates.starter.rescript","ReScript Starter"),thumbnail:"assets/templates/rescript.png",activeEditor:"script",markup:{language:"html",content:`<div id="app">Loading...</div>
+`},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -4255,11 +3055,7 @@ var ut = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'rescript',
-    content: `
+`.trimStart()},script:{language:"rescript",content:`
 // import npm modules
 @module("canvas-confetti") external confetti: () => unit = "default"
 
@@ -4302,22 +3098,7 @@ switch ReactDOM.querySelector("#app") {
 }
 
 Console.log("Hello, ReScript!")
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var gt = {
-  name: 'riot',
-  title: getTemplateName('templates.starter.riot', 'Riot.js Starter'),
-  thumbnail: 'assets/templates/riot.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var gt={name:"riot",title:getTemplateName("templates.starter.riot","Riot.js Starter"),thumbnail:"assets/templates/riot.svg",activeEditor:"script",markup:{language:"html",content:`
 <counter title="Riot.js"></counter>
 
 <script>
@@ -4325,12 +3106,7 @@ var gt = {
     url: 'https://riot.js.org/'
   }
 <\/script>
-`.trimStart(),
-  },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'riot',
-    content: `
+`.trimStart()},style:{language:"css",content:""},script:{language:"riot",content:`
 <counter>
   <div class="container">
     <h1>Hello, { props.title }!</h1>
@@ -4373,33 +3149,14 @@ var gt = {
     };
   <\/script>
 </counter>
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var ht = {
-  name: 'ruby',
-  title: getTemplateName('templates.starter.ruby', 'Ruby Starter'),
-  thumbnail: 'assets/templates/ruby.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var ht={name:"ruby",title:getTemplateName("templates.starter.ruby","Ruby Starter"),thumbnail:"assets/templates/ruby.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/ruby.svg" />
   <p id="counter">You clicked 0 times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -4408,11 +3165,7 @@ var ht = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'ruby',
-    content: `
+`.trimStart()},script:{language:"ruby",content:`
 require "date"
 require "native"
 
@@ -4440,33 +3193,14 @@ elsif current_time < 18
 else
     puts "Good evening, " + msg
 end
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var bt = {
-  name: 'ruby-wasm',
-  title: getTemplateName('templates.starter.ruby-wasm', 'Ruby (Wasm) Starter'),
-  thumbnail: 'assets/templates/ruby.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var bt={name:"ruby-wasm",title:getTemplateName("templates.starter.ruby-wasm","Ruby (Wasm) Starter"),thumbnail:"assets/templates/ruby.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/ruby.svg" />
   <p id="counter">You clicked 0 times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -4475,11 +3209,7 @@ var bt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'ruby-wasm',
-    content: `
+`.trimStart()},script:{language:"ruby-wasm",content:`
 require "js"
 require "date"
 
@@ -4507,28 +3237,14 @@ elsif current_time < 18
 else
     puts "Good evening, " + msg
 end
-`.trimStart(),
-  },
-};
-var ft = {
-  name: 'scheme',
-  title: getTemplateName('templates.starter.scheme', 'Scheme Starter'),
-  thumbnail: 'assets/templates/scheme.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var ft={name:"scheme",title:getTemplateName("templates.starter.scheme","Scheme Starter"),thumbnail:"assets/templates/scheme.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/scheme.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -4537,11 +3253,7 @@ var ft = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'scheme',
-    content: `
+`.trimStart()},script:{language:"scheme",content:`
 (let ((title "Scheme"))
   (set-content! "#title" title))
 
@@ -4557,30 +3269,10 @@ var ft = {
     (cond ((< time-now 12) "Good morning")
           ((< time-now 18) "Good afternoon")
           (else "Good evening"))))
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var t = 'https://cdn.jsdelivr.net/npm/@hatemhosny/shadcdn@0.0.14/build/',
-  vt = {
-    name: 'shadcn-ui',
-    title: getTemplateName('templates.starter.shadcnui', 'shadcn/ui Starter'),
-    thumbnail: 'assets/templates/shadcn-ui.svg',
-    activeEditor: 'script',
-    markup: {
-      language: 'html',
-      content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var t="https://cdn.jsdelivr.net/npm/@hatemhosny/shadcdn@0.0.14/build/",vt={name:"shadcn-ui",title:getTemplateName("templates.starter.shadcnui","shadcn/ui Starter"),thumbnail:"assets/templates/shadcn-ui.svg",activeEditor:"script",markup:{language:"html",content:`
 <link rel="stylesheet" href="${t}shadcdn.css">
 <link rel="stylesheet" href="${t}themes.css">
-`.trimStart(),
-    },
-    style: {
-      language: 'css',
-      content: `
+`.trimStart()},style:{language:"css",content:`
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -4591,11 +3283,7 @@ var t = 'https://cdn.jsdelivr.net/npm/@hatemhosny/shadcdn@0.0.14/build/',
     --radius: 0.5rem;
   }
 }
-`.trimStart(),
-    },
-    script: {
-      language: 'react-tsx',
-      content: `
+`.trimStart()},script:{language:"react-tsx",content:`
 // from https://ui.shadcn.com/blocks/login#login-03
 import { GalleryVerticalEnd } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -4708,81 +3396,7 @@ function LoginForm({
     </div>
   );
 }
-`.trimStart(),
-    },
-    processors: ['tailwindcss'],
-    imports: {},
-    types: {},
-    customSettings: {
-      imports: {
-        react: 'https://esm.sh/react',
-        'react/': 'https://esm.sh/react/',
-        'react-dom': 'https://esm.sh/react-dom',
-        'react-dom/': 'https://esm.sh/react-dom/',
-        '@': `${t}shadcdn.js`,
-        '@/lib/utils': `${t}shadcdn.js`,
-        '@/components/ui/accordion': `${t}shadcdn.js`,
-        '@/components/ui/alert-dialog': `${t}shadcdn.js`,
-        '@/components/ui/alert': `${t}shadcdn.js`,
-        '@/components/ui/aspect-ratio': `${t}shadcdn.js`,
-        '@/components/ui/avatar': `${t}shadcdn.js`,
-        '@/components/ui/badge': `${t}shadcdn.js`,
-        '@/components/ui/button': `${t}shadcdn.js`,
-        '@/components/ui/calendar': `${t}shadcdn.js`,
-        '@/components/ui/card': `${t}shadcdn.js`,
-        '@/components/ui/checkbox': `${t}shadcdn.js`,
-        '@/components/ui/collapsible': `${t}shadcdn.js`,
-        '@/components/ui/command': `${t}shadcdn.js`,
-        '@/components/ui/context-menu': `${t}shadcdn.js`,
-        '@/components/ui/dialog': `${t}shadcdn.js`,
-        '@/components/ui/dropdown-menu': `${t}shadcdn.js`,
-        '@/components/ui/form': `${t}shadcdn.js`,
-        '@/components/ui/hover-card': `${t}shadcdn.js`,
-        '@/components/ui/input': `${t}shadcdn.js`,
-        '@/components/ui/label': `${t}shadcdn.js`,
-        '@/components/ui/menubar': `${t}shadcdn.js`,
-        '@/components/ui/navigation-menu': `${t}shadcdn.js`,
-        '@/components/ui/popover': `${t}shadcdn.js`,
-        '@/components/ui/progress': `${t}shadcdn.js`,
-        '@/components/ui/radio-group': `${t}shadcdn.js`,
-        '@/components/ui/scroll-area': `${t}shadcdn.js`,
-        '@/components/ui/select': `${t}shadcdn.js`,
-        '@/components/ui/separator': `${t}shadcdn.js`,
-        '@/components/ui/sheet': `${t}shadcdn.js`,
-        '@/components/ui/skeleton': `${t}shadcdn.js`,
-        '@/components/ui/slider': `${t}shadcdn.js`,
-        '@/components/ui/switch': `${t}shadcdn.js`,
-        '@/components/ui/table': `${t}shadcdn.js`,
-        '@/components/ui/tabs': `${t}shadcdn.js`,
-        '@/components/ui/textarea': `${t}shadcdn.js`,
-        '@/components/ui/toast': `${t}shadcdn.js`,
-        '@/components/ui/toaster': `${t}shadcdn.js`,
-        '@/components/ui/toggle': `${t}shadcdn.js`,
-        '@/components/ui/tooltip': `${t}shadcdn.js`,
-        '@/components/ui/use-toast': `${t}shadcdn.js`,
-        '@/components/ui/resizable': `${t}shadcdn.js`,
-        '@/components/ui/input-otp': `${t}shadcdn.js`,
-        '@/components/ui/breadcrumb': `${t}shadcdn.js`,
-        '@/components/ui/toggle-group': `${t}shadcdn.js`,
-        '@/components/ui/sonner': `${t}shadcdn.js`,
-        '@/components/ui/pagination': `${t}shadcdn.js`,
-        '@/components/ui/drawer': `${t}shadcdn.js`,
-        '@/components/ui/carousel': `${t}shadcdn.js`,
-        '@/components/ui/sidebar': `${t}shadcdn.js`,
-        '@/components/ui/chart': `${t}shadcdn.js`,
-      },
-      types: { '@/components': `${t}shadcdn.d.ts`, '@/utils': `${t}shadcdn.d.ts` },
-    },
-  };
-var yt = {
-  name: 'solid',
-  title: getTemplateName('templates.starter.solid', 'Solid Starter'),
-  thumbnail: 'assets/templates/solid.svg',
-  activeEditor: 'script',
-  markup: { language: 'html', content: '' },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},processors:["tailwindcss"],imports:{},types:{},customSettings:{imports:{react:"https://esm.sh/react","react/":"https://esm.sh/react/","react-dom":"https://esm.sh/react-dom","react-dom/":"https://esm.sh/react-dom/","@":`${t}shadcdn.js`,"@/lib/utils":`${t}shadcdn.js`,"@/components/ui/accordion":`${t}shadcdn.js`,"@/components/ui/alert-dialog":`${t}shadcdn.js`,"@/components/ui/alert":`${t}shadcdn.js`,"@/components/ui/aspect-ratio":`${t}shadcdn.js`,"@/components/ui/avatar":`${t}shadcdn.js`,"@/components/ui/badge":`${t}shadcdn.js`,"@/components/ui/button":`${t}shadcdn.js`,"@/components/ui/calendar":`${t}shadcdn.js`,"@/components/ui/card":`${t}shadcdn.js`,"@/components/ui/checkbox":`${t}shadcdn.js`,"@/components/ui/collapsible":`${t}shadcdn.js`,"@/components/ui/command":`${t}shadcdn.js`,"@/components/ui/context-menu":`${t}shadcdn.js`,"@/components/ui/dialog":`${t}shadcdn.js`,"@/components/ui/dropdown-menu":`${t}shadcdn.js`,"@/components/ui/form":`${t}shadcdn.js`,"@/components/ui/hover-card":`${t}shadcdn.js`,"@/components/ui/input":`${t}shadcdn.js`,"@/components/ui/label":`${t}shadcdn.js`,"@/components/ui/menubar":`${t}shadcdn.js`,"@/components/ui/navigation-menu":`${t}shadcdn.js`,"@/components/ui/popover":`${t}shadcdn.js`,"@/components/ui/progress":`${t}shadcdn.js`,"@/components/ui/radio-group":`${t}shadcdn.js`,"@/components/ui/scroll-area":`${t}shadcdn.js`,"@/components/ui/select":`${t}shadcdn.js`,"@/components/ui/separator":`${t}shadcdn.js`,"@/components/ui/sheet":`${t}shadcdn.js`,"@/components/ui/skeleton":`${t}shadcdn.js`,"@/components/ui/slider":`${t}shadcdn.js`,"@/components/ui/switch":`${t}shadcdn.js`,"@/components/ui/table":`${t}shadcdn.js`,"@/components/ui/tabs":`${t}shadcdn.js`,"@/components/ui/textarea":`${t}shadcdn.js`,"@/components/ui/toast":`${t}shadcdn.js`,"@/components/ui/toaster":`${t}shadcdn.js`,"@/components/ui/toggle":`${t}shadcdn.js`,"@/components/ui/tooltip":`${t}shadcdn.js`,"@/components/ui/use-toast":`${t}shadcdn.js`,"@/components/ui/resizable":`${t}shadcdn.js`,"@/components/ui/input-otp":`${t}shadcdn.js`,"@/components/ui/breadcrumb":`${t}shadcdn.js`,"@/components/ui/toggle-group":`${t}shadcdn.js`,"@/components/ui/sonner":`${t}shadcdn.js`,"@/components/ui/pagination":`${t}shadcdn.js`,"@/components/ui/drawer":`${t}shadcdn.js`,"@/components/ui/carousel":`${t}shadcdn.js`,"@/components/ui/sidebar":`${t}shadcdn.js`,"@/components/ui/chart":`${t}shadcdn.js`},types:{"@/components":`${t}shadcdn.d.ts`,"@/utils":`${t}shadcdn.d.ts`}}};var yt={name:"solid",title:getTemplateName("templates.starter.solid","Solid Starter"),thumbnail:"assets/templates/solid.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -4791,11 +3405,7 @@ var yt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'solid.tsx',
-    content: `
+`.trimStart()},script:{language:"solid.tsx",content:`
 import { createSignal } from "solid-js";
 
 function Counter(props: { name: string }) {
@@ -4814,22 +3424,7 @@ function Counter(props: { name: string }) {
 export default function App() {
   return <Counter name="Solid" />;
 }
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var xt = {
-  name: 'sql',
-  title: getTemplateName('templates.starter.sql', 'SQL Starter'),
-  thumbnail: 'assets/templates/sqlite.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var xt={name:"sql",title:getTemplateName("templates.starter.sql","SQL Starter"),thumbnail:"assets/templates/sqlite.svg",activeEditor:"script",markup:{language:"html",content:`
 <div id="output">
   <details open>
     <summary>Tables</summary>
@@ -4859,11 +3454,7 @@ var xt = {
     document.querySelector('#obj-result').innerHTML = JSON.stringify(results, null, 2);
   }).catch(console.error);
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 #output {
   color: #3d3d3d;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
@@ -4902,11 +3493,7 @@ var xt = {
   min-width: 95%;
   padding: 1em;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'sql',
-    content: `
+`.trimStart()},script:{language:"sql",content:`
 -- based on https://stackoverflow.com/q/7745609
 
 CREATE TABLE IF NOT EXISTS quotes (
@@ -4941,23 +3528,8 @@ SELECT a.id, a.rev, a.quote
                ROW_NUMBER() OVER (PARTITION BY id ORDER BY rev DESC) rank
           FROM quotes) a
   WHERE a.rank = 1;
-`.trimStart(),
-  },
-};
-var wt = {
-  name: 'stencil',
-  title: getTemplateName('templates.starter.stencil', 'Stencil Starter'),
-  thumbnail: 'assets/templates/stencil.png',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `<my-app title="Stencil"></my-app>
-`,
-  },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'stencil',
-    content: `
+`.trimStart()}};var wt={name:"stencil",title:getTemplateName("templates.starter.stencil","Stencil Starter"),thumbnail:"assets/templates/stencil.png",activeEditor:"script",markup:{language:"html",content:`<my-app title="Stencil"></my-app>
+`},style:{language:"css",content:""},script:{language:"stencil",content:`
 import { Component, Prop, h, State } from "@stencil/core";
 
 @Component({
@@ -4992,33 +3564,13 @@ export class App {
     );
   }
 }
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var St = {
-  name: 'svelte',
-  title: getTemplateName('templates.starter.svelte', 'Svelte Starter'),
-  thumbnail: 'assets/templates/svelte.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'svelte',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var St={name:"svelte",title:getTemplateName("templates.starter.svelte","Svelte Starter"),thumbnail:"assets/templates/svelte.svg",activeEditor:"script",markup:{language:"svelte",content:`
 <script>
 import Counter from "./Component.svelte";
 <\/script>
 
 <Counter title="Svelte" />
-`.trimStart(),
-  },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'svelte',
-    content: `
+`.trimStart()},style:{language:"css",content:""},script:{language:"svelte",content:`
 <script>
   let { title = "World" } = $props();
   let counter = $state(0);
@@ -5044,22 +3596,7 @@ import Counter from "./Component.svelte";
   <p>You clicked {counter} times.</p>
   <button on:click={increment}>Click me</button>
 </div>
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var kt = {
-  name: 'tailwindcss',
-  title: getTemplateName('templates.starter.tailwindcss', 'Tailwind CSS Starter'),
-  thumbnail: 'assets/templates/tailwindcss.svg',
-  activeEditor: 'markup',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var kt={name:"tailwindcss",title:getTemplateName("templates.starter.tailwindcss","Tailwind CSS Starter"),thumbnail:"assets/templates/tailwindcss.svg",activeEditor:"markup",markup:{language:"html",content:`
 <div class="relative grid min-h-screen grid-cols-[1fr_2.5rem_auto_2.5rem_1fr] grid-rows-[1fr_1px_auto_1px_1fr] bg-white [--pattern-fg:var(--color-gray-950)]/5 dark:bg-gray-950 dark:[--pattern-fg:var(--color-white)]/10">
   <div class="col-start-3 row-start-3 flex max-w-lg flex-col bg-gray-100 p-2 dark:bg-white/10">
     <div class="rounded-xl bg-white p-10 text-sm/7 text-gray-700 dark:bg-gray-950 dark:text-gray-300">
@@ -5132,29 +3669,13 @@ var kt = {
   <div class="relative -bottom-px col-span-full col-start-1 row-start-2 h-px bg-(--pattern-fg)"></div>
   <div class="relative -top-px col-span-full col-start-1 row-start-4 h-px bg-(--pattern-fg)"></div>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 @import "tailwindcss";
 
 @theme {
   /* ... */
 }
-`.trimStart(),
-  },
-  script: { language: 'javascript', content: '' },
-  processors: ['tailwindcss'],
-};
-var _t = {
-  name: 'tcl',
-  title: getTemplateName('templates.starter.tcl', 'Tcl Starter'),
-  thumbnail: 'assets/templates/tcl.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},script:{language:"javascript",content:""},processors:["tailwindcss"]};var _t={name:"tcl",title:getTemplateName("templates.starter.tcl","Tcl Starter"),thumbnail:"assets/templates/tcl.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="name">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/tcl.svg" />
@@ -5178,11 +3699,7 @@ var _t = {
     };
   });
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -5191,11 +3708,7 @@ var _t = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'tcl',
-    content: `
+`.trimStart()},script:{language:"tcl",content:`
 set title "Tcl"
 ::wacl::dom attr "#name" innerText $title
 
@@ -5207,33 +3720,14 @@ if {[info exists count]} {
 }
 ::wacl::dom attr "#counter" innerText $count
 puts $count
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var jt = {
-  name: 'teal',
-  title: getTemplateName('templates.starter.teal', 'Teal Starter'),
-  thumbnail: 'assets/templates/teal.png',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var jt={name:"teal",title:getTemplateName("templates.starter.teal","Teal Starter"),thumbnail:"assets/templates/teal.png",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/teal.png" />
   <p id="counter">You clicked 0 times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -5242,11 +3736,7 @@ var jt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'teal',
-    content: `
+`.trimStart()},script:{language:"teal",content:`
 global record Js
   record global
     record document
@@ -5279,28 +3769,14 @@ button:addEventListener("click", function()
   count = increment(count)
   counter_el.innerHTML = ("You clicked %d times."):format(count)
 end)
-`.trimStart(),
-  },
-};
-var Tt = {
-  name: 'typescript',
-  title: getTemplateName('templates.starter.typescript', 'TypeScript Starter'),
-  thumbnail: 'assets/templates/typescript.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var Tt={name:"typescript",title:getTemplateName("templates.starter.typescript","TypeScript Starter"),thumbnail:"assets/templates/typescript.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/typescript.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -5309,11 +3785,7 @@ var Tt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'typescript',
-    content: `
+`.trimStart()},script:{language:"typescript",content:`
 class Counter {
   private count: number;
   constructor() {
@@ -5341,22 +3813,7 @@ button.addEventListener(
   },
   false
 );
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var Ct = {
-  name: 'vue',
-  title: getTemplateName('templates.starter.vue', 'Vue SFC Starter'),
-  thumbnail: 'assets/templates/vue.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'vue',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Ct={name:"vue",title:getTemplateName("templates.starter.vue","Vue SFC Starter"),thumbnail:"assets/templates/vue.svg",activeEditor:"script",markup:{language:"vue",content:`
 <script setup lang="tsx">
 import Counter from './Component.vue';
 <\/script>
@@ -5364,12 +3821,7 @@ import Counter from './Component.vue';
 <template>
   <Counter name="Vue" />
 </template>
-`.trimStart(),
-  },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'vue',
-    content: `
+`.trimStart()},style:{language:"css",content:""},script:{language:"vue",content:`
 <script setup lang="tsx">
   import { ref } from 'vue';
 
@@ -5405,33 +3857,14 @@ import Counter from './Component.vue';
     width: 150px;
   }
 </style>
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var Ut = {
-  name: 'vue2',
-  title: getTemplateName('templates.starter.vue2', 'Vue 2 Starter'),
-  thumbnail: 'assets/templates/vue.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Ut={name:"vue2",title:getTemplateName("templates.starter.vue2","Vue 2 Starter"),thumbnail:"assets/templates/vue.svg",activeEditor:"script",markup:{language:"html",content:`
 <div id="app">
   <h1>Hello, Vue!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/vue.svg" />
   <p>You clicked {{ counter }} times.</p>
   <button @click="increment()">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 #app,
 #app button {
   text-align: center;
@@ -5440,11 +3873,7 @@ var Ut = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`
 new Vue({
   el: "#app",
   data: {
@@ -5456,22 +3885,7 @@ new Vue({
     },
   },
 });
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: ['{{ __CDN_URL__ }}vue@2'],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var Et = {
-  name: 'wat',
-  title: getTemplateName('templates.starter.wat', 'WebAssembly Text Starter'),
-  thumbnail: 'assets/templates/webassembly.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:["{{ __CDN_URL__ }}vue@2"],cssPreset:"",imports:{},types:{}};var Et={name:"wat",title:getTemplateName("templates.starter.wat","WebAssembly Text Starter"),thumbnail:"assets/templates/webassembly.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/webassembly.svg" />
@@ -5515,11 +3929,7 @@ var Et = {
     );
   })();
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -5528,11 +3938,7 @@ var Et = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'wat',
-    content: `
+`.trimStart()},script:{language:"wat",content:`
 (module
   (import "title" "change" (func $changeTitle (param i32) (param i32)))
   (export "memory" (memory $0))
@@ -5547,82 +3953,4 @@ var Et = {
     (i32.add (local.get $0) (i32.const 1))
   )
 )
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var uo = [
-  b,
-  I,
-  Tt,
-  mt,
-  pt,
-  Ct,
-  d,
-  rt,
-  St,
-  yt,
-  G,
-  wt,
-  K,
-  kt,
-  vt,
-  U,
-  v,
-  g,
-  gt,
-  J,
-  Y,
-  h,
-  z,
-  D,
-  O,
-  C,
-  et,
-  Ut,
-  S,
-  V,
-  y,
-  x,
-  H,
-  ut,
-  dt,
-  Q,
-  it,
-  lt,
-  ct,
-  ht,
-  bt,
-  R,
-  N,
-  st,
-  ot,
-  _,
-  j,
-  W,
-  T,
-  tt,
-  X,
-  F,
-  jt,
-  q,
-  A,
-  ft,
-  k,
-  w,
-  P,
-  _t,
-  Z,
-  u,
-  Et,
-  xt,
-  nt,
-  at,
-  f,
-  E,
-];
-export { uo as starterTemplates };
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var uo=[b,I,Tt,mt,pt,Ct,d,rt,St,yt,G,wt,K,kt,vt,U,v,g,gt,J,Y,h,z,D,O,C,et,Ut,S,V,y,x,H,ut,dt,Q,it,lt,ct,ht,bt,R,N,st,ot,_,j,W,T,tt,X,F,jt,q,A,ft,k,w,P,_t,Z,u,Et,xt,nt,at,f,E];export{uo as starterTemplates};
diff --git a/src/livecodes/cache/cache.ts b/src/livecodes/cache/cache.ts
index 7c5ebd5004..4455c6ff49 100644
--- a/src/livecodes/cache/cache.ts
+++ b/src/livecodes/cache/cache.ts
@@ -1,4 +1,5 @@
 import { defaultConfig, getContentConfig } from '../config';
+import { getSource } from '../config/utils';
 import type { Cache, Code, EditorId, Language } from '../models';
 
 const defaultContentConfig = getContentConfig(defaultConfig);
@@ -43,8 +44,9 @@ export const setCache = (newCache = initialCache) => {
 };
 
 export const updateCache = (editorId: EditorId, language: Language, modified: string) => {
-  if (cache[editorId].language === language) {
-    cache[editorId].modified = modified;
+  const src: any = getSource(editorId, cache as any);
+  if (src && src.language === language) {
+    src.modified = modified;
   }
 };
 
diff --git a/src/livecodes/export/utils.ts b/src/livecodes/export/utils.ts
index b08352c5f6..c6112eab70 100644
--- a/src/livecodes/export/utils.ts
+++ b/src/livecodes/export/utils.ts
@@ -1,4 +1,5 @@
 import { replaceImports } from '../compiler/import-map';
+import { getSource, isEditorId } from '../config/utils';
 import type {
   getLanguageCompiler as getLanguageCompilerFn,
   getLanguageExtension as getLanguageExtensionFn,
@@ -22,16 +23,22 @@ export const getFilesFromConfig = (
     style: 'style',
     script: 'script',
   };
-  const codeFiles = (Object.keys(filenames) as EditorId[]).reduce((files, editorId) => {
-    const filename = filenames[editorId];
-    const language = config[editorId].language;
-    const extension = getLanguageExtension?.(language) || 'md';
-    const content = config[editorId].content || '';
-    return {
-      ...files,
-      ...(content ? { [filename + '.' + extension]: { content } } : {}),
-    };
-  }, {});
+  const codeFiles =
+    config.files.length > 0
+      ? config.files
+      : (Object.keys(filenames) as EditorId[]).reduce((files, editorId) => {
+          if (!isEditorId(editorId)) {
+            return files;
+          }
+          const filename = filenames[editorId];
+          const language = config[editorId].language;
+          const extension = getLanguageExtension?.(language) || 'md';
+          const content = config[editorId].content || '';
+          return {
+            ...files,
+            ...(content ? { [filename + '.' + extension]: { content } } : {}),
+          };
+        }, {});
 
   const externalStyles =
     config.stylesheets.length > 0
@@ -106,10 +113,10 @@ export const getCompilerScripts = ({
   supportedLanguages: { [key in EditorId]: Language[] };
   getLanguageCompiler: typeof getLanguageCompilerFn;
 }) => {
-  if (supportedLanguages[editorId].includes(config[editorId].language)) return [];
-  const compilerScripts = getLanguageCompiler?.(config[editorId].language)?.scripts;
-  const compiledCode =
-    config[editorId].language === 'python' ? config[editorId].content || '' : compiled[editorId];
+  const src = getSource(editorId, config);
+  if (!src || supportedLanguages[editorId].includes(src.language)) return [];
+  const compilerScripts = getLanguageCompiler?.(src.language)?.scripts;
+  const compiledCode = src.language === 'python' ? src.content || '' : compiled[editorId];
   const scripts =
     typeof compilerScripts === 'function'
       ? compilerScripts({ compiled: compiledCode, baseUrl, config })
@@ -150,6 +157,10 @@ export const getContent = ({
               (isScriptSupported ? config.script.content : compiled.script) || '',
               config,
             ),
+    files: config.files.map((file) => ({
+      ...file,
+      content: replaceImports(file.content, config),
+    })),
   };
 
   const scriptType = getLanguageCompiler?.(config.script.language)?.scriptType;
@@ -171,5 +182,5 @@ ${escapeScript(content.script || '')}
       return '';
     }
   }
-  return content[editorId] || '';
+  return getSource(editorId, content as any)?.content || '';
 };
diff --git a/src/livecodes/import/dom.ts b/src/livecodes/import/dom.ts
index fd7f2a7451..57c78b7659 100644
--- a/src/livecodes/import/dom.ts
+++ b/src/livecodes/import/dom.ts
@@ -1,3 +1,4 @@
+import { isEditorId } from '../config/utils';
 import { getLanguageByAlias, getLanguageEditorId } from '../languages';
 import type { Config, EditorId, Language } from '../models';
 import { decodeHTML } from '../utils';
@@ -70,7 +71,7 @@ export const importFromDom = async (
       {} as { [key: string]: string },
     );
 
-  const configSelectors = (['markup', 'style', 'script'] as EditorId[]).reduce(
+  const configSelectors = (['markup', 'style', 'script'] as const).reduce(
     (selectors: Selectors, editorId) => {
       if (config[editorId].language && config[editorId].selector) {
         return {
@@ -89,11 +90,11 @@ export const importFromDom = async (
 
   const defaultSelectors = getLanguageSelectors(defaultParams);
   const paramSelectors = getLanguageSelectors(selectorParams);
-  const languageSelectors: Selectors = {
+  const languageSelectors = {
     ...defaultSelectors,
     ...configSelectors,
     ...paramSelectors,
-  };
+  } as Selectors;
 
   const selectedCode = (Object.keys(languageSelectors) as EditorId[]).reduce(
     (selectedCodeConfig: Partial<Config>, editorId) => {
@@ -119,7 +120,7 @@ export const importFromDom = async (
   const defaults = Object.keys(defaultParams).reduce(
     (defaultsConfig: Partial<Config>, language: string) => {
       const editorId = getLanguageEditorId(language as Language);
-      if (!editorId || selectedCode[editorId]) return defaultsConfig;
+      if (!editorId || !isEditorId(editorId) || selectedCode[editorId]) return defaultsConfig;
       const code = extractCodeFromHTML(dom, defaultParams[language]);
       if (code === undefined) return defaultsConfig;
 
diff --git a/src/livecodes/import/utils.ts b/src/livecodes/import/utils.ts
index aa938bdb98..076b11870a 100644
--- a/src/livecodes/import/utils.ts
+++ b/src/livecodes/import/utils.ts
@@ -1,3 +1,4 @@
+import { isEditorId } from '../config/utils';
 import { getLanguageByAlias, getLanguageEditorId } from '../languages';
 import type { Config, EditorId, Language } from '../models';
 
@@ -41,7 +42,7 @@ export const populateConfig = (
         if (!file) return output;
 
         const editorId = getLanguageEditorId(language);
-        if (!editorId || output[editorId]) return output;
+        if (!editorId || !isEditorId(editorId) || output[editorId]) return output;
 
         return {
           ...output,
@@ -148,7 +149,7 @@ export const populateConfig = (
       }
 
       // code
-      if (!file.editorId || output[file.editorId]) return output;
+      if (!file.editorId || !isEditorId(file.editorId) || output[file.editorId]) return output;
       return {
         ...output,
         [file.editorId]: {
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 3065d6c3e8..ade479f239 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -111,7 +111,7 @@ export const createMultiFileResultPage = async ({
 
   // handle imports
   const stylesImportMap: Record<string, string> = {};
-  const getStylesheetWithImports = (file: SourceFile & { compiled: string }) => {
+  const getStylesheetWithImports = (file: SourceFile & { compiled: string }): string => {
     if (stylesImportMap[file.filename]) return file.compiled;
     const styleImports = getStyleImports(file.compiled)
       .filter((mod) => {
diff --git a/src/livecodes/result/result-page.ts b/src/livecodes/result/result-page.ts
index 292ebfccab..551d8c189a 100644
--- a/src/livecodes/result/result-page.ts
+++ b/src/livecodes/result/result-page.ts
@@ -13,7 +13,7 @@ import { reactRuntime } from '../languages/jsx/react-runtime';
 import { reactNativeRuntime } from '../languages/react-native/react-native-runtime';
 import { solidRuntime } from '../languages/solid/solid-runtime';
 import { hasCustomJsxRuntime } from '../languages/typescript';
-import type { Cache, CompileInfo, Config, EditorId, Language } from '../models';
+import type { Cache, CompileInfo, Config, Language } from '../models';
 import { getAppCDN, modulesService } from '../services';
 import { testImports } from '../toolspane/test-imports';
 import {
@@ -188,12 +188,10 @@ export const createResultPage = async ({
   }
 
   // runtime styles & scripts
-  const runtimeDependencies = (['markup', 'style', 'script'] as EditorId[]).map(
-    (editorId: EditorId) => ({
-      language: code[editorId].language,
-      compiled: code[editorId].compiled,
-    }),
-  );
+  const runtimeDependencies = (['markup', 'style', 'script'] as const).map((editorId) => ({
+    language: code[editorId].language,
+    compiled: code[editorId].compiled,
+  }));
 
   const compiledTests = runTests ? code.tests?.compiled || '' : '';
 

From 2dc05abf600c1372fdbb09a319df9ac3ea009495 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 9 Nov 2025 03:13:58 +0200
Subject: [PATCH 011/143] fix types

---
 src/livecodes/core.ts | 9 +++++----
 src/sdk/models.ts     | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index c975133feb..360056b9c9 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -118,6 +118,7 @@ import type {
   Modal,
   Notifications,
   Processor,
+  SDKConfig,
   SDKEvent,
   Screen,
   ShareData,
@@ -5910,9 +5911,9 @@ const createApi = (): API => {
     return JSON.parse(JSON.stringify(config));
   };
 
-  const apiSetConfig = async (newConfig: Partial<Config>): Promise<Config> => {
+  const apiSetConfig = async (newConfig: Partial<SDKConfig>): Promise<Config> => {
     const currentConfig = getConfig();
-    const newAppConfig = buildConfig({ ...currentConfig, ...newConfig });
+    const newAppConfig = buildConfig({ ...currentConfig, ...(newConfig as Partial<Config>) });
     const hasNewAppLanguage =
       newConfig.appLanguage && newConfig.appLanguage !== i18n?.getLanguage();
     const shouldRun =
@@ -5927,7 +5928,7 @@ const createApi = (): API => {
 
     if (isContentOnlyChange) {
       for (const key of ['markup', 'style', 'script'] as const) {
-        const content = newConfig[key]?.content;
+        const content = (newConfig as Partial<Config>)[key]?.content;
         if (content != null) {
           editors[key].setValue(content);
         }
@@ -5942,7 +5943,7 @@ const createApi = (): API => {
     if (shouldReloadCompiler) {
       await reloadCompiler(newAppConfig);
     }
-    await applyConfig(newConfig, /* reload = */ true, currentConfig);
+    await applyConfig(newConfig as Partial<Config>, /* reload = */ true, currentConfig);
     return newAppConfig;
   };
 
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 5da584e483..f6999b7b25 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -61,7 +61,7 @@ export interface API {
    * });
    * ```
    */
-  getConfig: (contentOnly?: boolean) => Promise<Config>;
+  getConfig: (contentOnly?: boolean) => Promise<SDKConfig>;
 
   /**
    * Loads a new project using the passed configuration object.
@@ -81,7 +81,7 @@ export interface API {
    * });
    * ```
    */
-  setConfig: (config: Partial<Config>) => Promise<Config>;
+  setConfig: (config: Partial<SDKConfig>) => Promise<SDKConfig>;
 
   /**
    * Gets the playground code (including source code, source language and compiled code) for each editor (markup, style, script), in addition to result page HTML.

From 888bf0596fa3bddd3caf02b622640d3cca4782e9 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 9 Nov 2025 23:56:07 +0200
Subject: [PATCH 012/143] fix jsx on typescript

---
 src/livecodes/languages/typescript/lang-typescript.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/livecodes/languages/typescript/lang-typescript.ts b/src/livecodes/languages/typescript/lang-typescript.ts
index dab7665e80..18df294036 100644
--- a/src/livecodes/languages/typescript/lang-typescript.ts
+++ b/src/livecodes/languages/typescript/lang-typescript.ts
@@ -34,14 +34,14 @@ export const typescript: LanguageSpecs = {
     url: typescriptUrl,
     factory:
       () =>
-      async (code, { config }) =>
+      async (code, { config, language }) =>
         (window as any).ts.transpile(code, {
           ...typescriptOptions,
-          ...(['jsx', 'tsx'].includes(config.script.language) && !hasCustomJsxRuntime(code, config)
+          ...(['jsx', 'tsx', 'typescript'].includes(language) && !hasCustomJsxRuntime(code, config)
             ? { jsx: 'react-jsx' }
             : {}),
           ...getLanguageCustomSettings('typescript', config),
-          ...getLanguageCustomSettings(config.script.language, config),
+          ...getLanguageCustomSettings(language, config),
         }),
   },
   extensions: ['ts', 'typescript'],

From 3cad427daf75ff6cad9916a80548f54da0fea0b3 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 31 Dec 2025 23:59:59 +0200
Subject: [PATCH 013/143] fix adding new file tab

---
 src/livecodes/UI/create-language-menus.ts | 36 ++++++++++++-----------
 src/livecodes/core.ts                     | 25 ++++++++--------
 2 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index e794af7373..6beda7ac2c 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -231,16 +231,19 @@ export const createMultiFileEditorTab = ({
     }
     label.contentEditable = 'false';
     currentFileName = label.innerText;
-    isNewFile = false;
     showEditor(currentFileName);
     window.removeEventListener('keydown', onEnter);
+    if (isNewFile) {
+      // a new tab is created. remove this one
+      editorSelector.remove();
+    }
+    isNewFile = false;
   };
 
   const onEnter = (event: KeyboardEvent) => {
-    if (event.key === 'Enter') {
-      event.preventDefault();
-      accept();
-    }
+    if (event.key !== 'Enter') return;
+    event.preventDefault();
+    accept();
   };
 
   const onDblClick = () => {
@@ -263,19 +266,18 @@ export const createMultiFileEditorTab = ({
 };
 
 export const createAddFileButton = ({ onclick: handleAddFileClick }: { onclick: () => void }) => {
-  if (!document.querySelector('#add-file-button')) {
-    const addFileButton = document.createElement('button');
-    addFileButton.id = 'add-file-button';
-    addFileButton.classList.add('app-menu-button', 'menu');
-    addFileButton.innerHTML =
-      '<i class="icon-add" title="Add file" data-i18n="core.addFile" data-i18n-prop="title"></i>';
-    addFileButton.addEventListener('click', handleAddFileClick);
-    document.querySelector('#select-editor')?.appendChild(addFileButton);
+  if (document.querySelector('#add-file-button')) return;
+  const addFileButton = document.createElement('button');
+  addFileButton.id = 'add-file-button';
+  addFileButton.classList.add('app-menu-button', 'menu');
+  addFileButton.innerHTML =
+    '<i class="icon-add" title="Add file" data-i18n="core.addFile" data-i18n-prop="title"></i>';
+  addFileButton.addEventListener('click', handleAddFileClick);
+  document.querySelector('#select-editor')?.appendChild(addFileButton);
 
-    const scrollTo = document.createElement('div');
-    scrollTo.id = 'multi-file-scroll-to';
-    document.querySelector('#select-editor > div')?.appendChild(scrollTo);
-  }
+  const scrollTo = document.createElement('div');
+  scrollTo.id = 'multi-file-scroll-to';
+  document.querySelector('#select-editor > div')?.appendChild(scrollTo);
 };
 
 export const createProcessorItem = (processor: { name: string; title: string }) => {
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 41d5a202bb..9280aec067 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -494,9 +494,10 @@ const addFile = async (
 ) => {
   if (!checkFileName(filename, getConfig())) return false;
   const fileLanguage = getFileLanguage(filename) || 'javascript';
+  const container = createEditorUI(filename);
   const editor = await createEditor({
     ...editorOptions,
-    container: createEditorUI(filename, true),
+    container,
     editorId: filename,
     language: fileLanguage,
     value: '',
@@ -574,7 +575,7 @@ const deleteFile = (filename: string) => {
   }
 };
 
-const createEditorUI = (title: string, addTab = false) => {
+const createEditorUI = (title: string) => {
   const editorsElement = UI.getEditorsElement();
   editorsElement.querySelector(`.editor[data-editor-id="${title}"]`)?.remove();
   const container = document.createElement('div');
@@ -582,16 +583,14 @@ const createEditorUI = (title: string, addTab = false) => {
   container.dataset.multiFile = 'true';
   container.classList.add('editor');
   editorsElement.insertBefore(container, UI.getEditorToolbar());
-  if (addTab) {
-    createMultiFileEditorTab({
-      title,
-      showEditor,
-      renameFile,
-      deleteFile,
-      isMainFile: title === getMainFile(getConfig()),
-      isNewFile: false,
-    });
-  }
+  createMultiFileEditorTab({
+    title,
+    showEditor,
+    renameFile,
+    deleteFile,
+    isMainFile: title === getMainFile(getConfig()),
+    isNewFile: false,
+  });
   return container;
 };
 
@@ -686,7 +685,7 @@ const createEditors = async (config: Config) => {
     editorIds.length = 0;
     for (const file of config.files) {
       const editorId = file.filename as EditorId;
-      const container = createEditorUI(file.filename, /* addTab */ true);
+      const container = createEditorUI(file.filename);
       const editorOptions = {
         ...baseOptions,
         container,

From 44227d6ac94120605f8b5927f40e2500d3eb6c8e Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 3 Jan 2026 07:54:45 +0200
Subject: [PATCH 014/143] add file to config

---
 src/livecodes/core.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index b2b00f52a1..e531df6ea5 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -503,6 +503,19 @@ const addFile = async (
     language: fileLanguage,
     value: '',
   });
+  const config = getConfig();
+  setConfig({
+    ...config,
+    activeEditor: filename,
+    files: [
+      ...config.files,
+      {
+        filename,
+        language: fileLanguage,
+        content: '',
+      },
+    ],
+  });
   editorLanguages![filename] = fileLanguage;
   editors[filename] = editor;
   editorIds.push(filename);

From 49f7c94a46e7e25d73383ce8ee7554d3ed9ac3d4 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 3 Jan 2026 12:40:08 +0200
Subject: [PATCH 015/143] validate file name

---
 src/livecodes/UI/create-language-menus.ts     |  3 +-
 src/livecodes/config/utils.ts                 | 24 ++++---
 src/livecodes/config/validate-config.ts       | 22 +++---
 src/livecodes/core.ts                         | 68 +++++++++++--------
 .../i18n/locales/en/translation.lokalise.json |  4 ++
 src/livecodes/i18n/locales/en/translation.ts  |  3 +-
 src/livecodes/utils/utils.ts                  |  7 +-
 7 files changed, 81 insertions(+), 50 deletions(-)

diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index 6beda7ac2c..1b32ea8587 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -8,6 +8,7 @@ import type {
   Processor,
   Template,
 } from '../models';
+import { handleSlash } from '../utils';
 
 export const createLanguageMenus = (
   config: Config,
@@ -230,6 +231,7 @@ export const createMultiFileEditorTab = ({
       return;
     }
     label.contentEditable = 'false';
+    label.innerText = handleSlash(label.innerText);
     currentFileName = label.innerText;
     showEditor(currentFileName);
     window.removeEventListener('keydown', onEnter);
@@ -247,7 +249,6 @@ export const createMultiFileEditorTab = ({
   };
 
   const onDblClick = () => {
-    currentFileName = label.innerText;
     label.contentEditable = 'true';
     requestAnimationFrame(() => label.focus());
     selectAll(label);
diff --git a/src/livecodes/config/utils.ts b/src/livecodes/config/utils.ts
index deeb74ff8b..573acc4c9b 100644
--- a/src/livecodes/config/utils.ts
+++ b/src/livecodes/config/utils.ts
@@ -5,7 +5,7 @@ import {
   supportsMultiFile,
 } from '../languages/utils';
 import type { Config, EditorId } from '../models';
-import { removeLeadingSlash } from '../utils/utils';
+import { handleSlash } from '../utils/utils';
 
 export const isEditorId = (editorId: string): editorId is 'markup' | 'style' | 'script' =>
   editorId === 'markup' || editorId === 'style' || editorId === 'script';
@@ -23,13 +23,21 @@ export const getMainFile = (config: Config) =>
         : config.files.find((f) => getLanguageEditorId(f.language) === 'markup')?.filename ||
           'index.html';
 
-export const validateFileName = (filename: string, config: Partial<Config>) => {
-  filename = removeLeadingSlash(filename);
-  if (!filename) return false;
-  if (filename[0] >= '0' && filename[0] <= '9') return false;
-  const language = getFileLanguage(filename);
+export const getValidFileName = (
+  filename: string,
+  config: Partial<Config>,
+): string | { error: 'invalid name' | 'invalid type' } => {
+  const name = handleSlash(filename.trim() || '');
+  if (name === '') return { error: 'invalid name' };
+  if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(name[0])) {
+    return { error: 'invalid name' };
+  }
+  if ([':', '*', '?', '"', '<', '>', '|'].some((c) => name.includes(c))) {
+    return { error: 'invalid name' };
+  }
+  const language = getFileLanguage(name);
   if (!language || !supportsMultiFile(language) || !languageIsEnabled(language, config as Config)) {
-    return false;
+    return { error: 'invalid type' };
   }
-  return true;
+  return name;
 };
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
index 447ddb1e50..06cd29bee5 100644
--- a/src/livecodes/config/validate-config.ts
+++ b/src/livecodes/config/validate-config.ts
@@ -9,9 +9,9 @@ import type {
   Tool,
   ToolsPaneStatus,
 } from '../models';
-import { getFileExtension, removeDuplicates, removeLeadingSlash } from '../utils';
+import { getFileExtension, handleSlash, removeDuplicates } from '../utils';
 import { defaultConfig } from './default-config';
-import { isEditorId, validateFileName } from './utils';
+import { getValidFileName, isEditorId } from './utils';
 
 export const validateConfig = (config: Partial<Config>): Partial<Config> => {
   type types = 'array' | 'boolean' | 'object' | 'number' | 'string' | 'undefined';
@@ -89,10 +89,16 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
     ...(is(x.position, 'object') ? { position: x.position } : {}),
   });
 
-  const validateFileProps = (x: Partial<SourceFile>): SourceFile | undefined =>
-    x.filename && is(x.filename, 'string') && removeLeadingSlash(x.filename).includes('.')
+  const validateFileProps = (
+    x: Partial<SourceFile>,
+    config: Partial<Config>,
+  ): SourceFile | undefined =>
+    x.filename && is(x.filename, 'string') && handleSlash(x.filename).includes('.')
       ? {
-          filename: removeLeadingSlash(x.filename),
+          filename: (() => {
+            const name = getValidFileName(x.filename, config);
+            return typeof name === 'string' ? name : '';
+          })(),
           content: is(x.content, 'string') ? x.content ?? '' : '',
           language: getLanguageByAlias(x.language || getFileExtension(x.filename)) || 'html',
           ...(is(x.hidden, 'boolean') ? { hidden: x.hidden } : {}),
@@ -182,10 +188,8 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
       ? {
           files:
             (config.files
-              ?.map((f) => validateFileProps(f))
-              .filter(
-                (f) => f != null && validateFileName(f.filename, config),
-              ) as Config['files']) || [],
+              ?.map((f) => validateFileProps(f, config))
+              .filter((f) => Boolean(f?.filename)) as Config['files']) || [],
         }
       : {}),
     ...(is(config.mainFile, 'string') ? { mainFile: config.mainFile } : {}),
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index e531df6ea5..1d13426c06 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -43,7 +43,7 @@ import {
   setConfig,
   upgradeAndValidate,
 } from './config';
-import { getMainFile, getSource, isEditorId, validateFileName } from './config/utils';
+import { getMainFile, getSource, getValidFileName, isEditorId } from './config/utils';
 import { createCustomEditors, createEditor, getFontFamily } from './editor';
 import { createFakeEditor } from './editor/fake-editor';
 import { hasJsx } from './editor/ts-compiler-options';
@@ -477,88 +477,98 @@ const createCopyButtons = () => {
   });
 };
 
-const checkFileName = (filename: string, config: Config) => {
-  if (!validateFileName(filename, config)) {
-    alert(window.deps.translateString('core.file.invalidName', 'Invalid file type!'));
-    return false;
+const checkFileName = (filename: string, config: Config, currentName?: string) => {
+  const name = getValidFileName(filename, config);
+  if (typeof name === 'string') {
+    if (name !== currentName && config.files?.some((f) => f.filename === name)) {
+      alert(window.deps.translateString('core.file.exists', 'File already exists!'));
+      return null;
+    }
+    return name;
   }
-  if (config.files?.some((f) => f.filename === filename)) {
-    alert(window.deps.translateString('core.file.exists', 'File already exists!'));
-    return false;
+  if (name.error === 'invalid name') {
+    alert(window.deps.translateString('core.file.invalidName', 'Invalid file name!'));
+    return null;
   }
-  return true;
+  if (name.error === 'invalid type') {
+    alert(window.deps.translateString('core.file.invalidType', 'Invalid file type!'));
+    return null;
+  }
+  return null;
 };
 
 const addFile = async (
   filename: string,
   editorOptions: Omit<EditorOptions, 'container' | 'editorId' | 'language' | 'value'>,
 ) => {
-  if (!checkFileName(filename, getConfig())) return false;
-  const fileLanguage = getFileLanguage(filename) || 'javascript';
-  const container = createEditorUI(filename);
+  const validName = checkFileName(filename, getConfig());
+  if (!validName) return false;
+  const fileLanguage = getFileLanguage(validName) || 'javascript';
+  const container = createEditorUI(validName);
   const editor = await createEditor({
     ...editorOptions,
     container,
-    editorId: filename,
+    editorId: validName,
     language: fileLanguage,
     value: '',
   });
   const config = getConfig();
   setConfig({
     ...config,
-    activeEditor: filename,
+    activeEditor: validName,
     files: [
       ...config.files,
       {
-        filename,
+        filename: validName,
         language: fileLanguage,
         content: '',
       },
     ],
   });
-  editorLanguages![filename] = fileLanguage;
-  editors[filename] = editor;
-  editorIds.push(filename);
+  editorLanguages![validName] = fileLanguage;
+  editors[validName] = editor;
+  editorIds.push(validName);
   return true;
 };
 
 const renameFile = (filename: string, newName: string) => {
-  if (filename === newName) return true;
-  if (!checkFileName(newName, getConfig())) return false;
-  const language = getFileLanguage(newName)!;
+  const validName = checkFileName(newName, getConfig(), filename);
+  if (!validName) return false;
+  if (filename === validName) return true;
+  const language = getFileLanguage(validName)!;
   const config = getConfig();
   setConfig({
     ...config,
-    activeEditor: newName,
+    activeEditor: validName,
     files: config.files.map((f) => ({
       ...f,
       language: f.filename === filename ? language : f.language,
-      filename: f.filename === filename ? newName : f.filename,
+      filename: f.filename === filename ? validName : f.filename,
     })),
   });
   UI.getEditorDivs().forEach((editorDiv) => {
     if (editorDiv.dataset.editorId === filename) {
-      editorDiv.dataset.editorId = newName;
+      editorDiv.dataset.editorId = validName;
     }
   });
   UI.getEditorTitles().forEach((editorTitle) => {
     if (editorTitle.dataset.editor === filename) {
-      editorTitle.dataset.editor = newName;
+      editorTitle.dataset.editor = validName;
     }
   });
   if (editorLanguages && editorLanguages[filename]) {
-    editorLanguages[newName] = editorLanguages[filename];
+    editorLanguages[validName] = editorLanguages[filename];
     delete editorLanguages[filename];
   }
   if (editors[filename]) {
-    editors[newName] = editors[filename];
+    editors[validName] = editors[filename];
     delete editors[filename];
   }
   const id = editorIds.findIndex((editorId) => editorId === filename);
   if (id > -1) {
-    editorIds[id] = newName;
+    editorIds[id] = validName;
   }
-  changeLanguage(language, undefined, false, newName);
+  changeLanguage(language, undefined, false, validName);
   return true;
 };
 
diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
index cf21195970..73eb7a8171 100644
--- a/src/livecodes/i18n/locales/en/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -1041,6 +1041,10 @@
     "translation": "File already exists!"
   },
   "core.file.invalidName": {
+    "notes": "",
+    "translation": "Invalid file name!"
+  },
+  "core.file.invalidType": {
     "notes": "",
     "translation": "Invalid file type!"
   },
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
index 260024f886..db1d3bb336 100644
--- a/src/livecodes/i18n/locales/en/translation.ts
+++ b/src/livecodes/i18n/locales/en/translation.ts
@@ -413,7 +413,8 @@ const translation = {
     },
     file: {
       exists: 'File already exists!',
-      invalidName: 'Invalid file type!',
+      invalidName: 'Invalid file name!',
+      invalidType: 'Invalid file type!',
     },
     fork: {
       success: 'Forked as a new project',
diff --git a/src/livecodes/utils/utils.ts b/src/livecodes/utils/utils.ts
index 909eeb1dd9..3364bae37a 100644
--- a/src/livecodes/utils/utils.ts
+++ b/src/livecodes/utils/utils.ts
@@ -685,8 +685,10 @@ export const addProp = /* @__PURE__ */ (
   addProp(obj[first] as Record<string, unknown>, rest.join('.'), value);
 };
 
-export const removeLeadingSlash = /* @__PURE__ */ (x: string) =>
-  x.startsWith('/')
+export const handleSlash = /* @__PURE__ */ (x: string) => {
+  if (!x) return '';
+  x = x.replaceAll('\\', '/');
+  return x.startsWith('/')
     ? x.slice(1)
     : x.startsWith('./')
       ? x.slice(2)
@@ -695,6 +697,7 @@ export const removeLeadingSlash = /* @__PURE__ */ (x: string) =>
         : x.startsWith('~/')
           ? x.slice(2)
           : x;
+};
 
 export const predefinedValues = {
   APP_VERSION: process.env.VERSION || '',

From 92b9d0405639886050d84ab04a9bfc2222a38270 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 4 Jan 2026 00:51:39 +0200
Subject: [PATCH 016/143] fix file types

---
 src/livecodes/core.ts                       | 13 +++++++++++++
 src/livecodes/editor/ts-compiler-options.ts |  2 ++
 2 files changed, 15 insertions(+)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 1d13426c06..e3ec976800 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -760,6 +760,19 @@ const createEditors = async (config: Config) => {
   if (isReload) {
     loadModuleTypes(editors, config, /* loadAll = */ true);
   }
+
+  // TODO: fix this
+  // workaround for reloading types for file models (e.g. `import { msg } from './msg.ts'`)
+  if (config.files?.length) {
+    for (const file of config.files) {
+      const editorId = file.filename as EditorId;
+      if (getLanguageEditorId(file.language!) !== 'script') continue;
+      const editor = editors[editorId];
+      setTimeout(() => {
+        editor.setValue(editor.getValue());
+      }, 50);
+    }
+  }
 };
 
 const reloadEditors = async (config: Config) => {
diff --git a/src/livecodes/editor/ts-compiler-options.ts b/src/livecodes/editor/ts-compiler-options.ts
index 1445a9e86c..fc792f667b 100644
--- a/src/livecodes/editor/ts-compiler-options.ts
+++ b/src/livecodes/editor/ts-compiler-options.ts
@@ -29,7 +29,9 @@ export const getCompilerOptions = (language: Language): CompilerOptions => {
     allowJs: true,
     checkJs: !isJSLang,
     strictNullChecks: !isJSLang,
+    allowImportingTsExtensions: true,
     allowNonTsExtensions: true,
+    allowArbitraryExtensions: true,
     experimentalDecorators: true,
     emitDecoratorMetadata: true,
     allowSyntheticDefaultImports: true,

From 2b73456d41cb23e82bfd49bb28047b0226cf69ab Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 4 Jan 2026 02:21:15 +0200
Subject: [PATCH 017/143] add responsive styles for multi file tabs

---
 src/livecodes/styles/app.scss            | 36 +-----------
 src/livecodes/styles/inc-multi-file.scss | 72 ++++++++++++++++++++++++
 2 files changed, 74 insertions(+), 34 deletions(-)
 create mode 100644 src/livecodes/styles/inc-multi-file.scss

diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
index 7e97cdac9d..56c6b00bfe 100644
--- a/src/livecodes/styles/app.scss
+++ b/src/livecodes/styles/app.scss
@@ -341,6 +341,8 @@ html {
 
 @import 'inc-icons-share';
 
+@import 'inc-multi-file';
+
 a,
 a:visited {
   color: var(--link);
@@ -629,40 +631,6 @@ a#result-button {
   display: none !important;
 }
 
-.multi-file {
-  #toolbar {
-    .menu {
-      justify-content: center;
-      min-width: 32px;
-      padding: 0;
-    }
-
-    .menu-text {
-      display: none;
-    }
-
-    #select-editor {
-      display: flex;
-
-      & > div {
-        overflow-x: auto;
-        overflow-y: hidden;
-        scrollbar-width: none;
-        width: calc(50vw - 262px);
-      }
-    }
-
-    #add-file-button {
-      align-items: center;
-      border: 0;
-      cursor: pointer;
-      display: flex;
-      margin-inline-end: 0;
-      margin-top: -1px;
-    }
-  }
-}
-
 @media only screen and (max-width: 1024px) {
   #toolbar {
     .menu {
diff --git a/src/livecodes/styles/inc-multi-file.scss b/src/livecodes/styles/inc-multi-file.scss
new file mode 100644
index 0000000000..9eb393a78c
--- /dev/null
+++ b/src/livecodes/styles/inc-multi-file.scss
@@ -0,0 +1,72 @@
+.multi-file {
+  #toolbar {
+    .toolbar-app {
+      justify-content: unset;
+    }
+
+    .menu {
+      justify-content: center;
+      min-width: 32px;
+      padding: 0;
+    }
+
+    .menu-text {
+      display: none;
+    }
+
+    #select-editor {
+      display: flex;
+      width: calc(70vw - 252px);
+
+      & > div {
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: none;
+        width: unset;
+      }
+    }
+
+    #add-file-button {
+      align-items: center;
+      border: 0;
+      cursor: pointer;
+      display: flex;
+      margin-inline-end: 0;
+      margin-top: -1px;
+    }
+
+    .toolbar-render {
+      div:first-child {
+        width: calc(100% - 32px);
+      }
+
+      #project-title {
+        max-width: unset;
+      }
+    }
+  }
+
+  @media only screen and (max-width: 1024px) {
+    #toolbar #select-editor {
+      width: calc(70vw - 180px);
+    }
+  }
+
+  @media only screen and (max-width: 768px) {
+    #toolbar #select-editor {
+      width: calc(70vw - 100px);
+    }
+  }
+
+  @media only screen and (max-width: 480px) {
+    #toolbar #select-editor {
+      width: calc(100% - 8px);
+    }
+  }
+
+  .embed {
+    #toolbar #select-editor {
+      width: calc(100vw - 120px);
+    }
+  }
+}

From 806f055d2476b0bc8047c252e94aadaefca16e2f Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 6 Jan 2026 01:05:39 +0200
Subject: [PATCH 018/143] improve file tab UI

---
 src/livecodes/UI/create-language-menus.ts | 11 ++++++++---
 src/livecodes/core.ts                     |  7 +------
 src/livecodes/styles/inc-multi-file.scss  | 14 ++++++++++++++
 src/livecodes/utils/utils.ts              |  6 ++++++
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index 1b32ea8587..b0e7c09847 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -8,7 +8,7 @@ import type {
   Processor,
   Template,
 } from '../models';
-import { handleSlash } from '../utils';
+import { handleSlash, removeFormatting } from '../utils';
 
 export const createLanguageMenus = (
   config: Config,
@@ -192,6 +192,8 @@ export const createMultiFileEditorTab = ({
 
   const label = document.createElement('span');
   label.innerHTML = currentFileName;
+  label.title = currentFileName;
+  label.addEventListener('paste', removeFormatting, false);
   editorSelector.appendChild(label);
 
   if (!isMainFile) {
@@ -231,8 +233,10 @@ export const createMultiFileEditorTab = ({
       return;
     }
     label.contentEditable = 'false';
-    label.innerText = handleSlash(label.innerText);
-    currentFileName = label.innerText;
+    currentFileName = handleSlash(label.innerText);
+    label.title = currentFileName;
+    label.innerText = currentFileName;
+    label.style.maxWidth = '';
     showEditor(currentFileName);
     window.removeEventListener('keydown', onEnter);
     if (isNewFile) {
@@ -250,6 +254,7 @@ export const createMultiFileEditorTab = ({
 
   const onDblClick = () => {
     label.contentEditable = 'true';
+    label.style.maxWidth = 'unset';
     requestAnimationFrame(() => label.focus());
     selectAll(label);
     window.addEventListener('keydown', onEnter);
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index e3ec976800..bdf0d61b5a 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -161,6 +161,7 @@ import {
   isMac,
   loadStylesheet,
   predefinedValues,
+  removeFormatting,
   safeName,
   stringToValidJson,
   stringify,
@@ -2813,12 +2814,6 @@ const handleTitleEdit = () => {
     }
   };
 
-  const removeFormatting = (e: any) => {
-    e.preventDefault();
-    const text = e.clipboardData.getData('text/plain');
-    document.execCommand('insertHTML', false, text);
-  };
-
   eventsManager.addEventListener(projectTitle, 'input', () => setProjectTitle(), false);
   eventsManager.addEventListener(projectTitle, 'blur', () => setProjectTitle(true), false);
   eventsManager.addEventListener(projectTitle, 'keypress', blurOnEnter as any, false);
diff --git a/src/livecodes/styles/inc-multi-file.scss b/src/livecodes/styles/inc-multi-file.scss
index 9eb393a78c..e5533f8163 100644
--- a/src/livecodes/styles/inc-multi-file.scss
+++ b/src/livecodes/styles/inc-multi-file.scss
@@ -24,6 +24,10 @@
         scrollbar-width: none;
         width: unset;
       }
+
+      .editor-title > span {
+        max-width: 13em;
+      }
     }
 
     #add-file-button {
@@ -68,5 +72,15 @@
     #toolbar #select-editor {
       width: calc(100vw - 120px);
     }
+
+    #toolbar .toolbar-render a#result-button {
+      display: none !important;
+    }
+
+    @media only screen and (max-width: 768px) {
+      #toolbar #select-editor {
+        width: calc(100vw - 80px);
+      }
+    }
   }
 }
diff --git a/src/livecodes/utils/utils.ts b/src/livecodes/utils/utils.ts
index 12b0df8bd3..099fa437a3 100644
--- a/src/livecodes/utils/utils.ts
+++ b/src/livecodes/utils/utils.ts
@@ -707,6 +707,12 @@ export const onLoad = /* @__PURE__ */ (fn: (...args: any[]) => any) => {
   }
 };
 
+export const removeFormatting = (e: any) => {
+  e.preventDefault();
+  const text = e.clipboardData.getData('text/plain');
+  document.execCommand('insertHTML', false, text);
+};
+
 export const predefinedValues = {
   APP_VERSION: process.env.VERSION || '',
   SDK_VERSION: process.env.SDK_VERSION || '',

From a2c9d3a2328d6ecf59355a086c98c48dd7f5c3c9 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 6 Jan 2026 01:36:43 +0200
Subject: [PATCH 019/143] set saved status for file changes

---
 src/livecodes/core.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index bdf0d61b5a..f79766a689 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -529,6 +529,11 @@ const addFile = async (
   editorLanguages![validName] = fileLanguage;
   editors[validName] = editor;
   editorIds.push(validName);
+  if (config.autoupdate) {
+    run();
+  }
+  setSavedStatus();
+  dispatchChangeEvent();
   return true;
 };
 
@@ -598,6 +603,8 @@ const deleteFile = (filename: string) => {
   if (config.autoupdate) {
     run();
   }
+  setSavedStatus();
+  dispatchChangeEvent();
 };
 
 const createEditorUI = (title: string) => {
@@ -707,6 +714,7 @@ const createEditors = async (config: Config) => {
       script: createFakeEditor(scriptOptions),
     };
 
+    changingContent = true;
     editorIds.length = 0;
     for (const file of config.files) {
       const editorId = file.filename as EditorId;
@@ -723,6 +731,10 @@ const createEditors = async (config: Config) => {
       editors[editorId] = editor;
       editorIds.push(editorId);
     }
+    setTimeout(() => {
+      setSavedStatus();
+      changingContent = false;
+    }, 300);
   } else {
     const markupEditor = await createEditor(markupOptions);
     const styleEditor = await createEditor(styleOptions);
@@ -1115,7 +1127,7 @@ const changeLanguage = async (
       activeEditor: editorId,
     });
     if (getConfig().autoupdate) {
-      await run();
+      run();
     }
   }
   await setSavedStatus();

From 304806289b6ab1981013861e5490f332fe0b17d5 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 6 Jan 2026 05:42:57 +0200
Subject: [PATCH 020/143] rename file on click outside tab

---
 src/livecodes/UI/create-language-menus.ts | 30 +++++++++++++++++++++--
 src/livecodes/styles/app.scss             | 15 ++++++++++++
 src/livecodes/styles/inc-multi-file.scss  |  2 +-
 3 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index b0e7c09847..b72bde1062 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -9,6 +9,7 @@ import type {
   Template,
 } from '../models';
 import { handleSlash, removeFormatting } from '../utils';
+import { getResultElement } from './selectors';
 
 export const createLanguageMenus = (
   config: Config,
@@ -224,6 +225,7 @@ export const createMultiFileEditorTab = ({
   };
 
   const accept = async () => {
+    cleanup();
     const success =
       isNewFile && typeof addFile === 'function'
         ? await addFile(label.innerText)
@@ -238,7 +240,6 @@ export const createMultiFileEditorTab = ({
     label.innerText = currentFileName;
     label.style.maxWidth = '';
     showEditor(currentFileName);
-    window.removeEventListener('keydown', onEnter);
     if (isNewFile) {
       // a new tab is created. remove this one
       editorSelector.remove();
@@ -252,15 +253,40 @@ export const createMultiFileEditorTab = ({
     accept();
   };
 
+  const onClickOutside = (event: MouseEvent) => {
+    if (!label.contains(event.target as Node)) {
+      accept();
+    }
+  };
+
+  // covers the sandboxed iframe to allow capturing clicks
+  const createResultCover = () => {
+    const cover = document.createElement('div');
+    cover.classList.add('result-cover');
+    getResultElement().appendChild(cover);
+  };
+
+  const removeResultCover = () => {
+    document.querySelector('.result-cover')?.remove();
+  };
+
   const onDblClick = () => {
     label.contentEditable = 'true';
     label.style.maxWidth = 'unset';
     requestAnimationFrame(() => label.focus());
     selectAll(label);
+    createResultCover();
     window.addEventListener('keydown', onEnter);
+    window.addEventListener('click', onClickOutside, { once: true });
+  };
+
+  const cleanup = () => {
+    window.removeEventListener('keydown', onEnter);
+    window.removeEventListener('click', onClickOutside);
+    removeResultCover();
   };
 
-  editorSelector.ondblclick = onDblClick;
+  editorSelector.addEventListener('dblclick', onDblClick);
 
   const scrollTo = document.querySelector('#multi-file-scroll-to');
   document.querySelector('#select-editor > div')?.insertBefore(editorSelector, scrollTo);
diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
index 56c6b00bfe..1685fb8e7c 100644
--- a/src/livecodes/styles/app.scss
+++ b/src/livecodes/styles/app.scss
@@ -1042,6 +1042,7 @@ a#result-button {
 
 #result {
   background-color: #fff;
+  position: relative;
   resize: both;
 
   &.full {
@@ -1070,6 +1071,16 @@ a#result-button {
       width: 400%;
     }
   }
+
+  // covers the sandboxed iframe to allow capturing clicks (e.g. on click outside)
+  .result-cover {
+    height: 100%;
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
 }
 
 #tools-pane-bar {
@@ -2278,4 +2289,8 @@ body {
   .snackbars-right {
     z-index: 3000;
   }
+
+  .result-cover {
+    z-index: 4000;
+  }
 }
diff --git a/src/livecodes/styles/inc-multi-file.scss b/src/livecodes/styles/inc-multi-file.scss
index e5533f8163..feafa9fe71 100644
--- a/src/livecodes/styles/inc-multi-file.scss
+++ b/src/livecodes/styles/inc-multi-file.scss
@@ -18,7 +18,7 @@
       display: flex;
       width: calc(70vw - 252px);
 
-      & > div {
+      > div {
         overflow-x: auto;
         overflow-y: hidden;
         scrollbar-width: none;

From 9648803d15bd447345118b58bfeb9e2c25649bbb Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 8 Jan 2026 20:32:29 +0200
Subject: [PATCH 021/143] fix adding new file

---
 src/livecodes/UI/create-language-menus.ts | 73 +++++++++++++----------
 src/livecodes/UI/selectors.ts             |  5 ++
 src/livecodes/styles/app.scss             | 14 -----
 3 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index b72bde1062..31ab73c63f 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -9,7 +9,7 @@ import type {
   Template,
 } from '../models';
 import { handleSlash, removeFormatting } from '../utils';
-import { getResultElement } from './selectors';
+import { getEditorSelector, getEditorSelectorDiv } from './selectors';
 
 export const createLanguageMenus = (
   config: Config,
@@ -225,7 +225,9 @@ export const createMultiFileEditorTab = ({
   };
 
   const accept = async () => {
-    cleanup();
+    label.contentEditable = 'false';
+    eventAttached = false;
+    label.innerText = label.innerText.trim().replaceAll('\n', '');
     const success =
       isNewFile && typeof addFile === 'function'
         ? await addFile(label.innerText)
@@ -234,7 +236,6 @@ export const createMultiFileEditorTab = ({
       onDblClick();
       return;
     }
-    label.contentEditable = 'false';
     currentFileName = handleSlash(label.innerText);
     label.title = currentFileName;
     label.innerText = currentFileName;
@@ -247,49 +248,57 @@ export const createMultiFileEditorTab = ({
     isNewFile = false;
   };
 
-  const onEnter = (event: KeyboardEvent) => {
-    if (event.key !== 'Enter') return;
-    event.preventDefault();
-    accept();
-  };
-
-  const onClickOutside = (event: MouseEvent) => {
-    if (!label.contains(event.target as Node)) {
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
       accept();
     }
+    if (e.key === 'Tab') {
+      accept();
+    }
+    if (e.key === 'Escape') {
+      label.contentEditable = 'false';
+      if (isNewFile) {
+        editorSelector.remove();
+      } else {
+        label.innerText = currentFileName;
+      }
+    }
   };
 
-  // covers the sandboxed iframe to allow capturing clicks
-  const createResultCover = () => {
-    const cover = document.createElement('div');
-    cover.classList.add('result-cover');
-    getResultElement().appendChild(cover);
-  };
-
-  const removeResultCover = () => {
-    document.querySelector('.result-cover')?.remove();
+  const onBlur = () => {
+    if (label.contentEditable === 'true') {
+      accept();
+    }
   };
 
+  let eventAttached = false;
   const onDblClick = () => {
+    if (!getEditorSelector()?.contains(label)) return;
     label.contentEditable = 'true';
     label.style.maxWidth = 'unset';
-    requestAnimationFrame(() => label.focus());
-    selectAll(label);
-    createResultCover();
-    window.addEventListener('keydown', onEnter);
-    window.addEventListener('click', onClickOutside, { once: true });
+    requestAnimationFrame(() => {
+      label.focus();
+      selectAll(label);
+      if (!eventAttached) {
+        label.addEventListener('blur', onBlur);
+        eventAttached = true;
+      }
+    });
   };
 
-  const cleanup = () => {
-    window.removeEventListener('keydown', onEnter);
-    window.removeEventListener('click', onClickOutside);
-    removeResultCover();
+  const onF2 = (ev: KeyboardEventInit) => {
+    if (ev.key === 'F2') {
+      onDblClick();
+    }
   };
 
   editorSelector.addEventListener('dblclick', onDblClick);
+  editorSelector.addEventListener('keydown', onF2);
+  label.addEventListener('keydown', onKeyDown);
 
   const scrollTo = document.querySelector('#multi-file-scroll-to');
-  document.querySelector('#select-editor > div')?.insertBefore(editorSelector, scrollTo);
+  getEditorSelectorDiv()?.insertBefore(editorSelector, scrollTo);
 
   if (isNewFile) {
     scrollTo?.scrollIntoView({ behavior: 'smooth', inline: 'end' });
@@ -305,11 +314,11 @@ export const createAddFileButton = ({ onclick: handleAddFileClick }: { onclick:
   addFileButton.innerHTML =
     '<i class="icon-add" title="Add file" data-i18n="core.addFile" data-i18n-prop="title"></i>';
   addFileButton.addEventListener('click', handleAddFileClick);
-  document.querySelector('#select-editor')?.appendChild(addFileButton);
+  getEditorSelector()?.appendChild(addFileButton);
 
   const scrollTo = document.createElement('div');
   scrollTo.id = 'multi-file-scroll-to';
-  document.querySelector('#select-editor > div')?.appendChild(scrollTo);
+  getEditorSelectorDiv()?.appendChild(scrollTo);
 };
 
 export const createProcessorItem = (processor: { name: string; title: string }) => {
diff --git a/src/livecodes/UI/selectors.ts b/src/livecodes/UI/selectors.ts
index db825acb67..541e96269e 100644
--- a/src/livecodes/UI/selectors.ts
+++ b/src/livecodes/UI/selectors.ts
@@ -179,6 +179,11 @@ export const getModalUnsavedLastModified = /* @__PURE__ */ () =>
 export const getModalDisableRecoverCheckbox = /* @__PURE__ */ () =>
   document.querySelector('#modal #disable-recover-checkbox') as HTMLInputElement;
 
+export const getEditorSelector = /* @__PURE__ */ () => document.querySelector('#select-editor');
+
+export const getEditorSelectorDiv = /* @__PURE__ */ () =>
+  document.querySelector('#select-editor > div');
+
 export const getLanguageMenuLinks = /* @__PURE__ */ () =>
   document.querySelectorAll<HTMLElement>('#select-editor .language-item a');
 
diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
index 1685fb8e7c..85b5398e9f 100644
--- a/src/livecodes/styles/app.scss
+++ b/src/livecodes/styles/app.scss
@@ -1071,16 +1071,6 @@ a#result-button {
       width: 400%;
     }
   }
-
-  // covers the sandboxed iframe to allow capturing clicks (e.g. on click outside)
-  .result-cover {
-    height: 100%;
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
 }
 
 #tools-pane-bar {
@@ -2289,8 +2279,4 @@ body {
   .snackbars-right {
     z-index: 3000;
   }
-
-  .result-cover {
-    z-index: 4000;
-  }
 }

From 7ed515c4269c30d920f79b91601531d19eeb2ada Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 8 Jan 2026 21:03:25 +0200
Subject: [PATCH 022/143] set projectDir

---
 src/livecodes/core.ts                 | 25 +++++++++++++++++++++----
 src/livecodes/editor/monaco/monaco.ts |  8 +++++++-
 src/sdk/models.ts                     |  2 ++
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index f79766a689..58aa4a6a78 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -157,6 +157,7 @@ import {
   copyToClipboard,
   ctrl,
   debounce,
+  getRandomString,
   getValidUrl,
   isMac,
   loadStylesheet,
@@ -229,6 +230,7 @@ export let authService: ReturnType<typeof createAuthService> | undefined;
 let editorLanguages: EditorLanguages | undefined;
 let resultLanguages: Language[] = [];
 let projectId: string;
+let projectDir: string | undefined;
 let isSaved = true;
 let changingContent = false;
 let consoleInputCodeCompletion: any;
@@ -498,6 +500,13 @@ const checkFileName = (filename: string, config: Config, currentName?: string) =
   return null;
 };
 
+const getProjectDir = (createNew = false) => {
+  if (!projectDir || createNew) {
+    projectDir = getRandomString().replace('0.', 'p').slice(0, 10);
+  }
+  return projectDir;
+};
+
 const addFile = async (
   filename: string,
   editorOptions: Omit<EditorOptions, 'container' | 'editorId' | 'language' | 'value'>,
@@ -508,6 +517,7 @@ const addFile = async (
   const container = createEditorUI(validName);
   const editor = await createEditor({
     ...editorOptions,
+    projectDir: getProjectDir(),
     container,
     editorId: validName,
     language: fileLanguage,
@@ -652,6 +662,7 @@ const createEditors = async (config: Config) => {
     mode: config.mode,
     readonly: config.readonly,
     ...getEditorConfig(config),
+    projectDir: getProjectDir(),
     activeEditor: findActiveEditor(),
     isEmbed,
     isLite,
@@ -776,14 +787,14 @@ const createEditors = async (config: Config) => {
 
   // TODO: fix this
   // workaround for reloading types for file models (e.g. `import { msg } from './msg.ts'`)
-  if (config.files?.length) {
+  if (config.files?.length && editors[config.files[0].filename as EditorId].monaco) {
     for (const file of config.files) {
       const editorId = file.filename as EditorId;
       if (getLanguageEditorId(file.language!) !== 'script') continue;
       const editor = editors[editorId];
       setTimeout(() => {
         editor.setValue(editor.getValue());
-      }, 50);
+      }, 100);
     }
   }
 };
@@ -1032,7 +1043,7 @@ const configureEditorTools = (language: Language) => {
 };
 
 const configureMultiFile = (config: Config) => {
-  const editorTabsContainer = document.querySelector<HTMLElement>('#select-editor > div')!;
+  const editorTabsContainer = UI.getEditorSelectorDiv()!;
   const singleFileTabs = [
     ...editorTabsContainer.querySelectorAll<HTMLElement>('[data-single-file]'),
   ];
@@ -1808,6 +1819,7 @@ const loadConfig = async (
   flush = true,
 ) => {
   changingContent = true;
+  const currentConfig = getConfig();
   const validConfig = upgradeAndValidate(newConfig);
   const content = getContentConfig({
     ...defaultConfig,
@@ -1841,7 +1853,7 @@ const loadConfig = async (
   iframeScrollPosition.x = 0;
   iframeScrollPosition.y = 0;
 
-  await applyConfig(config, /* reload= */ true);
+  await applyConfig(config, /* reload= */ true, currentConfig);
 
   changingContent = false;
 };
@@ -1849,6 +1861,9 @@ const loadConfig = async (
 const applyConfig = async (newConfig: Partial<Config>, reload = false, oldConfig?: Config) => {
   const currentConfig = oldConfig || getConfig();
   const combinedConfig: Config = { ...currentConfig, ...newConfig };
+  for (const file of oldConfig?.files || []) {
+    deleteFile(file.filename);
+  }
   configureMultiFile(combinedConfig);
   if (reload) {
     await updateEditors(editors, getConfig());
@@ -1940,6 +1955,7 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false, oldConfig
 
   const hasEditorConfig = Object.keys(editorConfig).some((k) => k in newConfig);
   let shouldReloadEditors = (() => {
+    if (oldConfig?.files?.length || newConfig.files?.length) return true;
     const activeEditor = getActiveEditor();
     if (newConfig.editor != null && newConfig.editor in activeEditor) return true;
     if (newConfig.mode != null) {
@@ -1961,6 +1977,7 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false, oldConfig
     }
   }
   if (shouldReloadEditors) {
+    getProjectDir(true);
     await reloadEditors(combinedConfig);
   } else if (hasEditorConfig) {
     currentEditorConfig = {
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 2cf2181524..f1ae11e23d 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -204,6 +204,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   };
 
   let editorId = options.editorId;
+  let projectDir = options.projectDir;
   const initOptions =
     editorId === 'console'
       ? consoleOptions
@@ -325,7 +326,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
         ? ext + '.tsx'
         : ext;
     modelUri = editorId.includes('.')
-      ? `file:///${editorId}`
+      ? `file:///${projectDir}/${editorId}`
       : `file:///${editorId}.${random}.${extension}`;
     const oldModel = editor.getModel();
     const model = getOrCreateModel(
@@ -375,6 +376,10 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     language = lang || getFileLanguage(filename) || language;
     setModel(editor, editor.getValue(), language);
   };
+  const setProjectDir = (dir: string) => {
+    projectDir = dir;
+    setModel(editor, editor.getValue(), language);
+  };
   const getValue = () => editor.getValue();
   const setValue = (value = '') => {
     editor.getModel()?.setValue(value);
@@ -923,6 +928,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     setLanguage,
     getEditorId,
     setEditorId,
+    setProjectDir,
     focus,
     getPosition,
     setPosition,
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index a05fa9a53e..4773cfd996 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1598,6 +1598,7 @@ export interface CodeEditor {
   setLanguage: (language: Language, value?: string) => void;
   getEditorId: () => string;
   setEditorId: (filename: string, language?: Language) => void;
+  setProjectDir?: (dir: string) => void;
   focus: () => void;
   getPosition: () => EditorPosition;
   setPosition: (position: EditorPosition) => void;
@@ -1649,6 +1650,7 @@ export interface EditorOptions extends EditorConfig {
     | 'embed'
     | 'snippet'
     | 'add-snippet';
+  projectDir?: string;
   theme: Theme;
   isEmbed: boolean;
   isLite: boolean;

From 999b937290bc15a48d30e32c855c8bd80bf1aa79 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 8 Jan 2026 21:30:56 +0200
Subject: [PATCH 023/143] fix monco formatting

---
 src/livecodes/editor/monaco/monaco.ts | 20 +++++---------------
 1 file changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index f1ae11e23d..368b79220d 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -573,25 +573,15 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   configureEditorMode(options.editorMode);
 
   const registerFormatter = (formatFn: FormatFn | undefined) => {
-    let editorModel = editor.getModel();
-    if (!formatFn || !editorModel) return;
-
+    if (!formatFn) return;
     monaco.languages.registerDocumentFormattingEditProvider(monacoMapLanguage(language), {
-      provideDocumentFormattingEdits: async () => {
-        let currentEditor = editor;
-        // avoid referring to editors destroyed after closing modals
-        if (!editor.getModel()) {
-          currentEditor =
-            editors.find((ed) => ed.getModel()?.getLanguageId() === monacoMapLanguage(language)) ||
-            editor;
-        }
-        editorModel = currentEditor.getModel();
-        if (!editorModel) return [];
-        const val = currentEditor.getValue() || '';
+      provideDocumentFormattingEdits: async (model) => {
+        if (!model || model.isDisposed()) return [];
+        const val = model.getValue() || '';
         const prettyVal = await formatFn(val, 0, getFormatterConfig());
         return [
           {
-            range: editorModel.getFullModelRange(),
+            range: model.getFullModelRange(),
             text: prettyVal.formatted,
           },
         ];

From fa6a278a42146508866bed14e1b20a149bd53b10 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 8 Jan 2026 21:40:05 +0200
Subject: [PATCH 024/143] fix showEditor

---
 src/livecodes/core.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 58aa4a6a78..d328da456b 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -1870,7 +1870,6 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false, oldConfig
   }
   phpHelper({ editor: editors.script });
   setLoading(true);
-  showEditor(combinedConfig.activeEditor);
 
   if (!isEmbed) {
     loadSettings(combinedConfig);
@@ -1986,6 +1985,7 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false, oldConfig
     };
     getAllEditors().forEach((editor) => editor.changeSettings(currentEditorConfig));
   }
+  showEditor(combinedConfig.activeEditor);
 
   parent.dispatchEvent(new Event(customEvents.ready));
 };

From e79cc08f55b95c6fae7f635aeeeae0ce298d07d5 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 9 Jan 2026 00:11:42 +0200
Subject: [PATCH 025/143] support multi-file in cache

---
 src/livecodes/cache/cache.ts                | 20 ++++++++++++++++---
 src/livecodes/cache/utils.ts                | 13 ++++++------
 src/livecodes/compiler/create-compiler.ts   | 21 +++++++++++---------
 src/livecodes/config/utils.ts               |  6 +++---
 src/livecodes/core.ts                       | 22 ++++++++++++++-------
 src/livecodes/editor/ts-compiler-options.ts |  1 +
 src/sdk/models.ts                           | 12 +++++++++--
 7 files changed, 65 insertions(+), 30 deletions(-)

diff --git a/src/livecodes/cache/cache.ts b/src/livecodes/cache/cache.ts
index 4455c6ff49..7070f1d2e4 100644
--- a/src/livecodes/cache/cache.ts
+++ b/src/livecodes/cache/cache.ts
@@ -1,5 +1,5 @@
 import { defaultConfig, getContentConfig } from '../config';
-import { getSource } from '../config/utils';
+import { getMainFile, getSource } from '../config/utils';
 import type { Cache, Code, EditorId, Language } from '../models';
 
 const defaultContentConfig = getContentConfig(defaultConfig);
@@ -39,13 +39,20 @@ export const setCache = (newCache = initialCache) => {
       compiled: '',
       ...newCache.tests,
     },
+    files: newCache.files.map((f) => {
+      const cacheFile = cache.files.find((ff) => ff.filename === f.filename);
+      return {
+        modified: cacheFile?.compiled === f.compiled ? f.modified : '',
+        ...f,
+      };
+    }),
     result: newCache.result || '',
   };
 };
 
 export const updateCache = (editorId: EditorId, language: Language, modified: string) => {
-  const src: any = getSource(editorId, cache as any);
-  if (src && src.language === language) {
+  const src: any = getSource(editorId, cache);
+  if (src?.language === language) {
     src.modified = modified;
   }
 };
@@ -66,5 +73,12 @@ export const getCachedCode = (): Code => ({
     content: cache.script.content || '',
     compiled: cache.script.modified || cache.script.compiled || '',
   },
+  files: cache.files.map((f) => ({
+    filename: f.filename,
+    language: f.language,
+    content: f.content || '',
+    compiled: f.modified || f.compiled || '',
+  })),
+  mainFile: getMainFile(cache) || 'index.html',
   result: cache.result || '',
 });
diff --git a/src/livecodes/cache/utils.ts b/src/livecodes/cache/utils.ts
index 075996ac17..28cee48986 100644
--- a/src/livecodes/cache/utils.ts
+++ b/src/livecodes/cache/utils.ts
@@ -1,9 +1,9 @@
-import type { Cache, ContentConfig, EditorCache } from '../models';
+import type { Cache, ContentConfig } from '../models';
 
-const removeExtra = <T>(editor: T, keys: Array<keyof T>) => {
-  const contentEditor = { ...editor };
-  keys.forEach((key) => delete contentEditor[key]);
-  return contentEditor;
+const removeExtra = <T>(obj: T, keys: Array<keyof T>) => {
+  const newObj = { ...obj };
+  keys.forEach((key) => delete newObj[key]);
+  return newObj;
 };
 export const cacheIsValid = (cache: Cache, config: ContentConfig) => {
   const excludedKeys: Array<keyof ContentConfig> = [
@@ -12,13 +12,14 @@ export const cacheIsValid = (cache: Cache, config: ContentConfig) => {
     'description',
     'tests',
   ];
-  const extraCache: Array<keyof EditorCache> = ['compiled', 'modified'];
+  const extraCache: Array<'compiled' | 'modified'> = ['compiled', 'modified'];
 
   const contentCache = {
     ...removeExtra(cache, ['result', 'styleOnlyUpdate', ...excludedKeys]),
     markup: removeExtra(cache.markup, extraCache),
     style: removeExtra(cache.style, extraCache),
     script: removeExtra(cache.script, extraCache),
+    files: cache.files.map((f) => removeExtra(f, extraCache)),
   };
   const contentConfig = removeExtra(config, excludedKeys);
 
diff --git a/src/livecodes/compiler/create-compiler.ts b/src/livecodes/compiler/create-compiler.ts
index 57778ea587..c84d537051 100644
--- a/src/livecodes/compiler/create-compiler.ts
+++ b/src/livecodes/compiler/create-compiler.ts
@@ -167,7 +167,8 @@ export const createCompiler = async ({
     );
 
   const cache: {
-    [key in Language]?: {
+    [key: string]: {
+      language: Language;
       content: string;
       compiled: string;
       info: string;
@@ -188,17 +189,19 @@ export const createCompiler = async ({
 
     const enabledProcessors = getActivatedProcessors(language, config);
     const languageSettings = stringify(getCustomSettings(language, config));
+    const filename = options.filename;
 
     if (
       !options?.forceCompile &&
-      cache[language]?.content === content &&
-      cache[language]?.processors === enabledProcessors &&
-      cache[language]?.languageSettings === languageSettings &&
-      cache[language]?.compiled
+      cache[filename]?.language === language &&
+      cache[filename]?.content === content &&
+      cache[filename]?.processors === enabledProcessors &&
+      cache[filename]?.languageSettings === languageSettings &&
+      cache[filename]?.compiled
     ) {
       return {
-        code: cache[language]?.compiled || '',
-        info: JSON.parse(cache[language]?.info || '{}'),
+        code: cache[filename]?.compiled || '',
+        info: JSON.parse(cache[filename]?.info || '{}'),
       } as CompileResult;
     }
 
@@ -227,14 +230,14 @@ export const createCompiler = async ({
       ...processed.info,
     };
 
-    cache[language] = {
+    cache[filename] = {
+      language,
       content,
       compiled: processed.code,
       info: JSON.stringify(info),
       processors: enabledProcessors,
       languageSettings: stringify(getCustomSettings(language, config)),
     };
-
     return { code: processed.code, info };
   };
 
diff --git a/src/livecodes/config/utils.ts b/src/livecodes/config/utils.ts
index 573acc4c9b..02b5ebf85b 100644
--- a/src/livecodes/config/utils.ts
+++ b/src/livecodes/config/utils.ts
@@ -4,16 +4,16 @@ import {
   languageIsEnabled,
   supportsMultiFile,
 } from '../languages/utils';
-import type { Config, EditorId } from '../models';
+import type { Cache, Config, EditorId } from '../models';
 import { handleSlash } from '../utils/utils';
 
 export const isEditorId = (editorId: string): editorId is 'markup' | 'style' | 'script' =>
   editorId === 'markup' || editorId === 'style' || editorId === 'script';
 
-export const getSource = (editorId: EditorId, config: Config) =>
+export const getSource = (editorId: EditorId, config: Config | Cache) =>
   isEditorId(editorId) ? config[editorId] : config.files.find((f) => f.filename === editorId);
 
-export const getMainFile = (config: Config) =>
+export const getMainFile = (config: Config | Cache) =>
   !config.files?.length
     ? undefined
     : config.mainFile && config.files.find((f) => f.filename === config.mainFile)
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index d328da456b..f14094f627 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -1267,11 +1267,13 @@ const getResultPage = async ({
       config.script.language !== getCache().script.language);
 
   const markupCompileResult = await compiler.compile(markupContent, markupLanguage, config, {
+    filename: 'markup',
     forceCompile: forceCompileSFC,
   });
   let compiledMarkup = markupCompileResult.code;
 
   const scriptCompileResult = await compiler.compile(scriptContent, scriptLanguage, config, {
+    filename: 'script',
     forceCompile: forceCompileStyles || forceCompileSFC,
     blockly:
       scriptLanguage === 'blockly'
@@ -1293,6 +1295,7 @@ const getResultPage = async ({
 
   const [styleCompileResult, testsCompileResult] = await Promise.all([
     compiler.compile(styleContent, styleLanguage, config, {
+      filename: 'style',
       html: `${compiledMarkup}<script type="script-for-styles">${compiledScript}</script>
         <script type="script-for-styles">${compileInfo.importedContent}</script>`,
       forceCompile: forceCompileStyles,
@@ -1300,7 +1303,7 @@ const getResultPage = async ({
     runTests
       ? testsNotChanged
         ? Promise.resolve(getCache().tests?.compiled || '')
-        : compiler.compile(testsContent, testsLanguage, config, {})
+        : compiler.compile(testsContent, testsLanguage, config, { filename: 'tests' })
       : Promise.resolve(getCompileResult(getCache().tests?.compiled || '')),
   ]);
   const [compiledStyle, compiledTests] = [styleCompileResult, testsCompileResult].map((result) => {
@@ -1417,7 +1420,10 @@ const getMultiFileResultPage = async ({
   for (const file of config.files) {
     const { filename, language, content } = file;
     if (getLanguageEditorId(language) === 'style') continue;
-    const compileResult = await compiler.compile(content, language, config, { compileInfo });
+    const compileResult = await compiler.compile(content, language, config, {
+      filename,
+      compileInfo,
+    });
     compiledFiles.push({ ...file, compiled: compileResult.code });
     compileInfo = mergeCompileInfo(compileInfo, compileResult.info);
     if (compileInfo.errors?.length) {
@@ -1430,6 +1436,7 @@ const getMultiFileResultPage = async ({
     const { filename, language, content } = file;
     if (getLanguageEditorId(language) !== 'style') continue;
     const compileResult = await compiler.compile(content, language, config, {
+      filename,
       compileInfo,
       forceCompile: forceCompileStyles,
       html: `${compiledContent}<script type="script-for-styles">${compileInfo.importedContent}</script>`,
@@ -1448,7 +1455,7 @@ const getMultiFileResultPage = async ({
           config.tests?.content || '',
           config.tests?.language || 'javascript',
           config,
-          {},
+          { filename: 'tests' },
         )
     : Promise.resolve(getCompileResult(getCache().tests?.compiled || '')));
   const { code: compiledTests, info: testsCompileInfo } = getCompileResult(testsCompileResult);
@@ -1567,6 +1574,8 @@ const flushResult = () => {
       content: '',
       compiled: '',
     },
+    files: [],
+    mainFile: undefined,
   });
 
   updateCompiledCode();
@@ -1893,9 +1902,6 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false, oldConfig
 
   setConfig(combinedConfig);
 
-  if (!isEmbed) {
-    setTimeout(() => getActiveEditor().focus());
-  }
   setExternalResourcesMark();
   setProjectInfoMark();
   setCustomSettingsMark();
@@ -1986,7 +1992,9 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false, oldConfig
     getAllEditors().forEach((editor) => editor.changeSettings(currentEditorConfig));
   }
   showEditor(combinedConfig.activeEditor);
-
+  if (!isEmbed) {
+    setTimeout(() => getActiveEditor().focus());
+  }
   parent.dispatchEvent(new Event(customEvents.ready));
 };
 
diff --git a/src/livecodes/editor/ts-compiler-options.ts b/src/livecodes/editor/ts-compiler-options.ts
index fc792f667b..b52bd058dc 100644
--- a/src/livecodes/editor/ts-compiler-options.ts
+++ b/src/livecodes/editor/ts-compiler-options.ts
@@ -26,6 +26,7 @@ export const getCompilerOptions = (language: Language): CompilerOptions => {
   const nonReactJsx = ['solid', 'solid.tsx', 'stencil', 'vue'].includes(language);
 
   const settings: CompilerOptions = {
+    noEmit: true,
     allowJs: true,
     checkJs: !isJSLang,
     strictNullChecks: !isJSLang,
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 4773cfd996..307e7fe620 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1356,6 +1356,7 @@ export interface EditorLibrary {
 }
 
 export interface CompileOptions {
+  filename: string;
   html?: string;
   blockly?: BlocklyContent;
   forceCompile?: boolean;
@@ -1978,12 +1979,12 @@ export type EditorCache = Editor & {
   modified?: string;
 };
 
-export type Cache = ContentConfig & {
+export type Cache = Omit<ContentConfig, 'files'> & {
   markup: EditorCache;
   style: EditorCache;
   script: EditorCache;
   tests?: EditorCache;
-  files?: Array<SourceFile & { compiled: string }>;
+  files: Array<SourceFile & { compiled: string; modified?: string }>;
   mainFile?: string;
   result?: string;
   styleOnlyUpdate?: boolean;
@@ -2011,6 +2012,13 @@ export interface Code {
     content: string;
     compiled: string;
   };
+  files: Array<{
+    filename: string;
+    language: Language;
+    content: string;
+    compiled: string;
+  }>;
+  mainFile: string;
   result: string;
 }
 

From 1614cbf4f907ef993dcab30c6e6e918b3b7f1f65 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 9 Jan 2026 01:17:34 +0200
Subject: [PATCH 026/143] load types for npm modules in multi-file projects

---
 src/livecodes/core.ts | 21 +++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index f14094f627..67d7ff4fd2 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -386,7 +386,8 @@ const loadModuleTypes = async (
   loadAll = false,
   force = false,
 ) => {
-  if (typeof editors?.script?.addTypes !== 'function') return;
+  const addTypes = editors?.[config.files?.[0]?.filename || 'script']?.addTypes;
+  if (typeof addTypes !== 'function') return;
   const scriptLanguage = config.script.language;
   if (['typescript', 'javascript'].includes(mapLanguage(scriptLanguage)) || force) {
     if (compiler.isFake) {
@@ -401,13 +402,17 @@ const loadModuleTypes = async (
       ...config.customSettings.types,
     };
     const reactImport = hasJsx.includes(scriptLanguage) ? `import React from 'react';\n` : '';
-    const libs = await typeLoader.load(
-      reactImport + getConfig().script.content + '\n' + getConfig().markup.content,
-      configTypes,
-      loadAll,
-      force,
-    );
-    libs.forEach((lib) => editors.script.addTypes?.(lib, force));
+    const content = !config.files.length
+      ? config.script.content + '\n' + config.markup.content
+      : config.files.reduce(
+          (acc, file) =>
+            ['script', 'markup'].includes(getLanguageEditorId(file.language) || '')
+              ? acc + file.content + '\n'
+              : acc,
+          '',
+        );
+    const libs = await typeLoader.load(reactImport + content, configTypes, loadAll, force);
+    libs.forEach((lib) => addTypes(lib, force));
   }
 };
 

From 063955028caaa7af251b986a4714bcb0e6e62534 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 9 Jan 2026 06:02:41 +0200
Subject: [PATCH 027/143] load TS types in codemirror in multi-file

---
 src/livecodes/compiler/compile.worker.ts      | 10 ++++++----
 src/livecodes/editor/codemirror/codemirror.ts | 17 ++++++++++++-----
 src/livecodes/editor/ts-compiler-options.ts   |  6 +++---
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/livecodes/compiler/compile.worker.ts b/src/livecodes/compiler/compile.worker.ts
index 34180d33f4..64102b155a 100644
--- a/src/livecodes/compiler/compile.worker.ts
+++ b/src/livecodes/compiler/compile.worker.ts
@@ -1,6 +1,6 @@
 import type TS from 'typescript';
 import { getCompilerOptions } from '../editor/ts-compiler-options';
-import { languages, processors } from '../languages';
+import { getLanguageByAlias, languages, processors } from '../languages';
 import type {
   CompileOptions,
   CompileResult,
@@ -9,7 +9,7 @@ import type {
   EditorLibrary,
   Language,
 } from '../models';
-import { doOnce, getErrorMessage, objectFilter } from '../utils/utils';
+import { doOnce, getErrorMessage, getFileExtension, objectFilter } from '../utils/utils';
 import { codeMirrorBaseUrl, comlinkBaseUrl, vendorsBaseUrl } from '../vendors';
 import { getAllCompilers } from './get-all-compilers';
 import type { CompilerMessage, CompilerMessageEvent, LanguageOrProcessor } from './models';
@@ -100,6 +100,8 @@ const compile = async (
   config: Config,
   options: CompileOptions,
 ) => {
+  language ??= getLanguageByAlias(language || getFileExtension(options.filename)) || 'html';
+
   const compiler = compilers[language]?.fn;
   if (!baseUrl || typeof compiler !== 'function') {
     throw new Error('Failed to load compiler for: ' + language);
@@ -277,11 +279,12 @@ const initCodemirrorTS = doOnce(async () => {
   importScripts(comlinkBaseUrl + 'umd/comlink.js');
   importScripts(typescriptVfsUrl);
   importScripts(codeMirrorBaseUrl + 'codemirror-ts.worker.js');
+  const language = codemirrorWorker.language || 'tsx';
   const { createWorker } = worker.CodemirrorTsWorker;
   const { createDefaultMapFromCDN, createSystem, createVirtualTypeScriptEnvironment } =
     worker.typescriptVFS;
   tsvfsMap = await createDefaultMapFromCDN(
-    { target: worker.ts?.ScriptTarget.ES2022 },
+    getCompilerOptions(language),
     worker.ts?.version,
     false,
     worker.ts,
@@ -291,7 +294,6 @@ const initCodemirrorTS = doOnce(async () => {
     const compilerOpts = getCompilerOptions(lang);
     return createVirtualTypeScriptEnvironment(system, [], worker.ts, compilerOpts);
   };
-  const language = codemirrorWorker.language || 'tsx';
   let env = createTypeScriptEnvironment(language);
   codemirrorWorker = createWorker(() => env);
   codemirrorWorker.language = language;
diff --git a/src/livecodes/editor/codemirror/codemirror.ts b/src/livecodes/editor/codemirror/codemirror.ts
index bfbd84efac..8d1b2136ca 100644
--- a/src/livecodes/editor/codemirror/codemirror.ts
+++ b/src/livecodes/editor/codemirror/codemirror.ts
@@ -59,7 +59,7 @@ const changeTabFocusMode = debounce(() => (tabFocusMode = !tabFocusMode), 50);
 export const createEditor = async (options: EditorOptions): Promise<CodeEditor> => {
   const { container, readonly, isEmbed, getFormatterConfig, getFontFamily, getLanguageExtension } =
     options;
-  let editorId = options.editorId;
+  let { editorId, projectDir } = options;
   let editorSettings: EditorConfig = { ...options };
   if (!container) throw new Error('editor container not found');
 
@@ -153,7 +153,9 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
       mappedLanguage === 'typescript' && !ext?.endsWith('ts') && !ext?.endsWith('tsx')
         ? ext + '.tsx'
         : ext;
-    const path = `/${editorId}.${random}.${extension}`;
+    const path = editorId.includes('.')
+      ? `/${projectDir}/${editorId}`
+      : `/${editorId}.${random}.${extension}`;
 
     codemirrorTS = codemirrorTS || [
       tsFacetWorker.of({ worker: tsWorker, path }),
@@ -309,6 +311,12 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     if (newLang && newLang !== language) {
       setLanguage(newLang);
     }
+    tsLoaded.then(() => loadTS(true));
+  };
+  const setProjectDir = (dir: string) => {
+    if (!codemirrorTS) return;
+    projectDir = dir;
+    tsLoaded.then(() => loadTS(true));
   };
   const getValue = () => view.state.doc.toString();
   const setValue = (value = '', newState = true) => {
@@ -335,9 +343,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
         effects: [languageExtension.reconfigure(mappedLanguageSupport)],
       });
     });
-    tsLoaded.then(() => {
-      loadTS(true);
-    });
+    tsLoaded.then(() => loadTS(true));
     if (value != null) {
       setValue(value);
     }
@@ -530,6 +536,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     setLanguage,
     getEditorId,
     setEditorId,
+    setProjectDir,
     focus,
     getPosition,
     setPosition,
diff --git a/src/livecodes/editor/ts-compiler-options.ts b/src/livecodes/editor/ts-compiler-options.ts
index b52bd058dc..84bf5b0b5c 100644
--- a/src/livecodes/editor/ts-compiler-options.ts
+++ b/src/livecodes/editor/ts-compiler-options.ts
@@ -26,7 +26,7 @@ export const getCompilerOptions = (language: Language): CompilerOptions => {
   const nonReactJsx = ['solid', 'solid.tsx', 'stencil', 'vue'].includes(language);
 
   const settings: CompilerOptions = {
-    noEmit: true,
+    noEmit: true, // required for allowImportingTsExtensions
     allowJs: true,
     checkJs: !isJSLang,
     strictNullChecks: !isJSLang,
@@ -38,10 +38,10 @@ export const getCompilerOptions = (language: Language): CompilerOptions => {
     allowSyntheticDefaultImports: true,
     allowUmdGlobalAccess: true,
     esModuleInterop: true,
-    target: 7, // monaco.languages.typescript.ScriptTarget.ES2020,
+    target: 9 as any, // monaco.languages.typescript.ScriptTarget.ES2022,
     module: 99, // monaco.languages.typescript.ModuleKind.ESNext,
     moduleResolution: 2, // monaco.languages.typescript.ModuleResolutionKind.NodeJs,
-    lib: ['es2021', 'dom', 'dom.iterable'],
+    lib: ['es2022', 'dom', 'dom.iterable'],
   };
 
   const jsxSettings: CompilerOptions = {

From 5282bb5966a81300511c5ce8e14fe755a1f0a32c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 9 Jan 2026 21:53:28 +0200
Subject: [PATCH 028/143] show compiled code in multi-file projects

---
 src/livecodes/config/utils.ts |  5 +++-
 src/livecodes/core.ts         | 55 ++++++++++++++++++-----------------
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/livecodes/config/utils.ts b/src/livecodes/config/utils.ts
index 02b5ebf85b..b8c5231ca9 100644
--- a/src/livecodes/config/utils.ts
+++ b/src/livecodes/config/utils.ts
@@ -10,7 +10,10 @@ import { handleSlash } from '../utils/utils';
 export const isEditorId = (editorId: string): editorId is 'markup' | 'style' | 'script' =>
   editorId === 'markup' || editorId === 'style' || editorId === 'script';
 
-export const getSource = (editorId: EditorId, config: Config | Cache) =>
+export const getSource = <T extends Config | Cache>(
+  editorId: EditorId,
+  config: T,
+): T['markup'] | T['files'][0] | undefined =>
   isEditorId(editorId) ? config[editorId] : config.files.find((f) => f.filename === editorId);
 
 export const getMainFile = (config: Config | Cache) =>
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 67d7ff4fd2..a083ed8156 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -1162,46 +1162,49 @@ const registerRun = (editorId: EditorId, editors: Editors) => {
 };
 
 const updateCompiledCode = () => {
+  const cache = getCache();
   const getCompiledLanguage = (editorId: EditorId) => {
     const defaultLang: { [key in EditorId]: Language } = {
       markup: 'html',
       style: 'css',
       script: 'javascript',
     };
-    const srcLang = getSource(editorId, getConfig())?.language;
-    const lang = getLanguageCompiler(srcLang)?.compiledCodeLanguage;
+    const srcLang = getSource(editorId, cache)?.language;
+    const lang =
+      getLanguageCompiler(srcLang)?.compiledCodeLanguage ||
+      defaultLang[editorId] ||
+      defaultLang[getLanguageSpecs(srcLang)?.editor || ''] ||
+      getFileLanguage(editorId) ||
+      'html';
     return {
-      language: lang || defaultLang[editorId] || getFileLanguage(editorId) || 'html',
-      label:
-        lang === 'json'
-          ? 'JSON'
-          : getLanguageByAlias(lang) ||
-            lang ||
-            defaultLang[editorId] ||
-            getFileLanguage(editorId) ||
-            'html',
+      language: lang,
+      label: lang === 'json' ? 'JSON' : getLanguageByAlias(lang) || lang,
     };
   };
   const compiledLanguages: { [key in EditorId]: { language: Language; label: string } } = {
     markup: getCompiledLanguage('markup'),
     style: getCompiledLanguage('style'),
     script: getCompiledLanguage('script'),
+    ...cache.files.reduce(
+      (acc, f) => ({ ...acc, [f.filename]: getCompiledLanguage(f.filename) }),
+      {},
+    ),
   };
-  if (toolsPane && toolsPane.compiled) {
-    const cache = getCache();
-    Object.keys(cache).forEach((editorId) => {
-      if (editorId !== getConfig().activeEditor) return;
-      let compiledCode = cache[editorId].modified || cache[editorId].compiled || '';
-      if (editorId === 'script' && getConfig().script.language.startsWith('php')) {
-        compiledCode = phpHelper({ code: compiledCode });
-      }
-      toolsPane?.compiled?.update(
-        compiledLanguages[editorId].language,
-        compiledCode,
-        compiledLanguages[editorId].label,
-      );
-    });
-  }
+  if (!toolsPane || !toolsPane.compiled) return;
+  const editorId = getConfig().activeEditor;
+  const active = compiledLanguages[editorId || ''];
+  if (!editorId || !active) return;
+  const src = getSource(editorId, cache);
+  if (!src) return;
+  let compiledCode = src.modified || src.compiled || '';
+  if (editorId === 'script' && getConfig().script.language.startsWith('php')) {
+    compiledCode = phpHelper({ code: compiledCode });
+  }
+  toolsPane?.compiled?.update(
+    compiledLanguages[editorId].language,
+    compiledCode,
+    compiledLanguages[editorId].label,
+  );
 };
 
 const getResultPage = async ({

From d8bdedf1ed258e4a784a065e496652363f8b5a02 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 9 Jan 2026 23:24:58 +0200
Subject: [PATCH 029/143] fix style imports

---
 src/livecodes/compiler/import-map.ts          | 20 +++++++++++
 src/livecodes/config/default-config.ts        |  8 +++++
 .../result/multi-file-result-page.ts          | 35 +++++++++++++------
 3 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/src/livecodes/compiler/import-map.ts b/src/livecodes/compiler/import-map.ts
index 27c1ec9cf8..2a50af83d4 100644
--- a/src/livecodes/compiler/import-map.ts
+++ b/src/livecodes/compiler/import-map.ts
@@ -310,6 +310,26 @@ export const replaceStyleImports = (
         : modified;
   });
 
+export const inlineStyleImports = (
+  code: string,
+  {
+    exceptions,
+    contentMap,
+  }: { exceptions?: string[] | RegExp[]; contentMap: Record<string, string> },
+) =>
+  code.replace(new RegExp(styleimportsPattern), (statement, match) => {
+    if (
+      exceptions?.some(
+        (e) =>
+          (typeof e === 'string' && e === match) ||
+          (typeof e === 'object' && new RegExp(e).test(match)),
+      )
+    ) {
+      return statement;
+    }
+    return contentMap?.[match.replace(/"/g, '').replace(/'/g, '')] || statement;
+  });
+
 // based on https://github.com/sveltejs/svelte-repl/blob/master/src/workers/bundler/plugins/commonjs.js
 export const cjs2esm = (code: string) => {
   const strippedCode = removeComments(code);
diff --git a/src/livecodes/config/default-config.ts b/src/livecodes/config/default-config.ts
index 916bfd5a4f..bd5af6c1b6 100644
--- a/src/livecodes/config/default-config.ts
+++ b/src/livecodes/config/default-config.ts
@@ -50,6 +50,10 @@ export const defaultConfig: Config = {
     {
       filename: 'styles.css',
       content: `@import "./middle.css";
+
+    h1 {
+      color: blue;
+    }
     `,
       language: 'css',
       hidden: false,
@@ -57,6 +61,10 @@ export const defaultConfig: Config = {
     {
       filename: 'middle.css',
       content: `@import "./colors.css";
+
+    h1 {
+      color: green;
+    }
     `,
       language: 'css',
       hidden: false,
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index ade479f239..7a6cc6bb19 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -3,6 +3,7 @@ import {
   getImports,
   getStyleImports,
   hasImports,
+  inlineStyleImports,
   replaceImports,
   resolvePath,
 } from '../compiler/import-map';
@@ -11,7 +12,14 @@ import { getLanguageByAlias, getLanguageCompiler, getLanguageEditorId } from '..
 import type { CompileInfo, Config, SourceFile } from '../models';
 import { getAppCDN, modulesService } from '../services/modules';
 import { testImports } from '../toolspane/test-imports';
-import { escapeScript, getAbsoluteUrl, isRelativeUrl, objectMap, toDataUrl } from '../utils/utils';
+import {
+  cloneObject,
+  escapeScript,
+  getAbsoluteUrl,
+  isRelativeUrl,
+  objectMap,
+  toDataUrl,
+} from '../utils/utils';
 import { browserJestUrl, esModuleShimsPath, spacingJsUrl } from '../vendors';
 
 export const createMultiFileResultPage = async ({
@@ -36,7 +44,7 @@ export const createMultiFileResultPage = async ({
   compileInfo: CompileInfo;
 }): Promise<string> => {
   const absoluteBaseUrl = getAbsoluteUrl(baseUrl);
-
+  compiledFiles = cloneObject(compiledFiles); // avoid mutation
   const mainFile = getMainFile(config);
   const mainFileHTML = compiledFiles.find((f) => f.filename === mainFile)?.compiled || '';
 
@@ -112,18 +120,23 @@ export const createMultiFileResultPage = async ({
   // handle imports
   const stylesImportMap: Record<string, string> = {};
   const getStylesheetWithImports = (file: SourceFile & { compiled: string }): string => {
+    // TODO handle directory imports
+    // (e.g. import "./styles/a.css"; import "./b.css"; import "../c.css";)
     if (stylesImportMap[file.filename]) return file.compiled;
-    const styleImports = getStyleImports(file.compiled)
-      .filter((mod) => {
-        const resolvedImport = resolvePath(mod, './' + file.filename)?.replace('./', '');
-        if (!resolvedImport) return false;
-        return !(resolvedImport in stylesImportMap);
-      })
-      .map((mod) => mod.replace('./', ''));
+    const styleImports = getStyleImports(file.compiled).filter((mod) => {
+      const resolvedImport = resolvePath(mod, './' + file.filename)?.replace('./', '');
+      if (!resolvedImport) return false;
+      return !(resolvedImport in stylesImportMap);
+    });
     if (styleImports.length > 0) {
-      const nextImport = compiledFiles.find((f) => f.filename === styleImports[0]);
+      const nextImport = compiledFiles.find(
+        (f) => f.filename === styleImports[0].replace('./', ''),
+      );
       if (!nextImport) return file.compiled;
-      return getStylesheetWithImports(nextImport);
+      file.compiled = inlineStyleImports(file.compiled, {
+        contentMap: { ['./' + nextImport.filename]: getStylesheetWithImports(nextImport) },
+      });
+      return getStylesheetWithImports(file);
     }
     const dataUrl = fileUrls[file.filename] || getDataUrl(file);
     if (!dataUrl) return 'data:text/css;base64,';

From f63a4a0246e1881ec90e8a2662d44177fc6db2f4 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 10 Jan 2026 01:35:17 +0200
Subject: [PATCH 030/143] allow exporting multi-file projects

---
 src/livecodes/export/utils.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/livecodes/export/utils.ts b/src/livecodes/export/utils.ts
index c6112eab70..531cb62490 100644
--- a/src/livecodes/export/utils.ts
+++ b/src/livecodes/export/utils.ts
@@ -25,7 +25,13 @@ export const getFilesFromConfig = (
   };
   const codeFiles =
     config.files.length > 0
-      ? config.files
+      ? config.files.reduce(
+          (files, file) => ({
+            ...files,
+            [file.filename]: { content: file.content },
+          }),
+          {},
+        )
       : (Object.keys(filenames) as EditorId[]).reduce((files, editorId) => {
           if (!isEditorId(editorId)) {
             return files;

From 0def833bc6bb4befc719d1259eb62264ce9c3912 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 10 Jan 2026 08:10:09 +0200
Subject: [PATCH 031/143] add multifile templates

---
 src/livecodes/UI/selectors.ts                 |  3 +
 src/livecodes/config/default-config.ts        | 66 +------------------
 src/livecodes/core.ts                         | 44 ++++++++-----
 src/livecodes/html/templates.html             | 14 ++++
 .../i18n/locales/en/translation.lokalise.json | 12 ++++
 src/livecodes/i18n/locales/en/translation.ts  |  5 ++
 src/livecodes/styles/app.scss                 |  4 ++
 .../templates/get-starter-templates.ts        |  2 +
 src/livecodes/templates/multifile/blank.ts    | 39 +++++++++++
 src/livecodes/templates/multifile/index.ts    |  3 +
 src/livecodes/templates/starter/index.ts      |  2 +
 src/sdk/models.ts                             |  8 ++-
 12 files changed, 119 insertions(+), 83 deletions(-)
 create mode 100644 src/livecodes/templates/multifile/blank.ts
 create mode 100644 src/livecodes/templates/multifile/index.ts

diff --git a/src/livecodes/UI/selectors.ts b/src/livecodes/UI/selectors.ts
index 541e96269e..a369fe7d61 100644
--- a/src/livecodes/UI/selectors.ts
+++ b/src/livecodes/UI/selectors.ts
@@ -495,6 +495,9 @@ export const getStarterTemplatesTab = /* @__PURE__ */ (templatesContainer: HTMLE
 export const getStarterTemplatesList = /* @__PURE__ */ (templatesContainer: HTMLElement) =>
   templatesContainer.querySelector<HTMLElement>('#starter-templates-list');
 
+export const getMultifileTemplatesList = /* @__PURE__ */ (templatesContainer: HTMLElement) =>
+  templatesContainer.querySelector<HTMLElement>('#multifile-templates-list');
+
 export const getUserTemplatesScreen = /* @__PURE__ */ (templatesContainer: HTMLElement) =>
   templatesContainer.querySelector('#templates-user .modal-screen') as HTMLElement;
 
diff --git a/src/livecodes/config/default-config.ts b/src/livecodes/config/default-config.ts
index bd5af6c1b6..7f08256b90 100644
--- a/src/livecodes/config/default-config.ts
+++ b/src/livecodes/config/default-config.ts
@@ -37,70 +37,8 @@ export const defaultConfig: Config = {
     language: 'javascript',
     content: '',
   },
-  files: [
-    {
-      filename: 'index.html',
-      content: `<h1>hello world</h1>
-    <link href="styles.css" rel="stylesheet">
-    <script type="module" src="script.ts"></script>
-    `,
-      language: 'html',
-      hidden: false,
-    },
-    {
-      filename: 'styles.css',
-      content: `@import "./middle.css";
-
-    h1 {
-      color: blue;
-    }
-    `,
-      language: 'css',
-      hidden: false,
-    },
-    {
-      filename: 'middle.css',
-      content: `@import "./colors.css";
-
-    h1 {
-      color: green;
-    }
-    `,
-      language: 'css',
-      hidden: false,
-    },
-    {
-      filename: 'colors.css',
-      content: `h1 {
-      font-family: Arial, Helvetica, sans-serif;
-      color: red;
-    }
-    `,
-      language: 'css',
-      hidden: false,
-    },
-    {
-      filename: 'script.ts',
-      content: `import { v4 } from 'uuid';
-          import { msg } from './middle.ts';
-          console.log(v4());
-          console.log(msg);`,
-      language: 'typescript',
-      hidden: false,
-    },
-    {
-      filename: 'middle.ts',
-      content: `export { msg } from './message.ts';`,
-      language: 'typescript',
-      hidden: false,
-    },
-    {
-      filename: 'message.ts',
-      content: `export const msg: string = 'Hello!';`,
-      language: 'typescript',
-      hidden: false,
-    },
-  ],
+  mainFile: undefined,
+  files: [],
   stylesheets: [],
   scripts: [],
   cssPreset: '',
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index a083ed8156..8f80c4645b 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -3698,30 +3698,40 @@ const handleNew = () => {
     });
   };
 
-  let starterTemplatesCache: Template[];
+  let templatesCache: Template[];
   const createTemplatesUI = async () => {
-    const starterTemplatesList = UI.getStarterTemplatesList(templatesContainer);
+    const starterTemplatesList = UI.getStarterTemplatesList(templatesContainer)!;
+    const multifileTemplatesList = UI.getMultifileTemplatesList(templatesContainer)!;
     const loadingText = starterTemplatesList?.firstElementChild;
-    if (!starterTemplatesCache) {
+    const multifileLoadingText = multifileTemplatesList?.firstElementChild;
+    const createLink = (template: Template, list: HTMLElement) => {
+      const link = createStarterTemplateLink(template, list, baseUrl);
+      eventsManager.addEventListener(
+        link,
+        'click',
+        (event) => {
+          event.preventDefault();
+          loadStarterTemplate(template.name, /* checkSaved= */ false);
+        },
+        false,
+      );
+    };
+    if (!templatesCache) {
       getTemplates()
-        .then((starterTemplates) => {
-          starterTemplatesCache = starterTemplates;
+        .then((allTemplates) => {
+          templatesCache = allTemplates;
           loadingText?.remove();
-          starterTemplates.forEach((template) => {
-            const link = createStarterTemplateLink(template, starterTemplatesList, baseUrl);
-            eventsManager.addEventListener(
-              link,
-              'click',
-              (event) => {
-                event.preventDefault();
-                loadStarterTemplate(template.name, /* checkSaved= */ false);
-              },
-              false,
-            );
-          });
+          multifileLoadingText?.remove();
+          allTemplates
+            .filter((t) => !t.files?.length)
+            .forEach((template) => createLink(template, starterTemplatesList));
+          allTemplates
+            .filter((t) => t.files?.length)
+            .forEach((template) => createLink(template, multifileTemplatesList));
         })
         .catch(() => {
           loadingText?.remove();
+          multifileLoadingText?.remove();
           notifications.error(
             window.deps.translateString(
               'core.error.failedToLoadTemplates',
diff --git a/src/livecodes/html/templates.html b/src/livecodes/html/templates.html
index 1e2eab56e5..e72468e453 100644
--- a/src/livecodes/html/templates.html
+++ b/src/livecodes/html/templates.html
@@ -7,6 +7,11 @@
           Starter Templates
         </a>
       </li>
+      <li>
+        <a href="#" data-target="templates-multifile" data-i18n="templates.multifile.heading">
+          Multi-file Templates
+        </a>
+      </li>
       <li>
         <a href="#" data-target="templates-user" data-i18n="templates.user.heading">My Templates</a>
       </li>
@@ -21,6 +26,15 @@
         </ul>
       </div>
     </div>
+    <div id="templates-multifile" class="tab-content">
+      <div class="modal-screen">
+        <ul id="multifile-templates-list" class="thumbnails">
+          <li class="loading" data-i18n="templates.multifile.loading">
+            Loading multi-file templates...
+          </li>
+        </ul>
+      </div>
+    </div>
     <div id="templates-user" class="tab-content">
       <div id="list-container" class="modal-screen">
         <div class="loading" data-i18n="templates.user.loading">Loading user templates...</div>
diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
index 5c13464baa..1803e9a6f7 100644
--- a/src/livecodes/i18n/locales/en/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -2556,6 +2556,18 @@
     "notes": "",
     "translation": "New Project"
   },
+  "templates.multifile.blank": {
+    "notes": "",
+    "translation": "Blank Project"
+  },
+  "templates.multifile.heading": {
+    "notes": "",
+    "translation": "Multi-file Templates"
+  },
+  "templates.multifile.loading": {
+    "notes": "",
+    "translation": "Loading multi-file templates..."
+  },
   "templates.noUserTemplates.desc": {
     "notes": "### <tag-1> ###\n<wbr  />\n\n",
     "translation": "You can save a project as a template from <tag-1></tag-1>(App&nbsp;menu&nbsp;&gt;&nbsp;Save&nbsp;as&nbsp;&gt; Template)."
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
index cb09f04e23..ab1236db60 100644
--- a/src/livecodes/i18n/locales/en/translation.ts
+++ b/src/livecodes/i18n/locales/en/translation.ts
@@ -986,6 +986,11 @@ const translation = {
   },
   templates: {
     heading: 'New Project',
+    multifile: {
+      blank: 'Blank Project',
+      heading: 'Multi-file Templates',
+      loading: 'Loading multi-file templates...',
+    },
     noUserTemplates: {
       desc: 'You can save a project as a template from <1></1>(App&nbsp;menu&nbsp;&gt;&nbsp;Save&nbsp;as&nbsp;&gt; Template).',
       heading: 'You have no saved templates.',
diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
index 85b5398e9f..aa78647a68 100644
--- a/src/livecodes/styles/app.scss
+++ b/src/livecodes/styles/app.scss
@@ -580,6 +580,10 @@ kbd {
     }
   }
 
+  #add-file-button {
+    display: none;
+  }
+
   #project-title {
     align-items: center;
     background: var(--project-title-bg-color);
diff --git a/src/livecodes/templates/get-starter-templates.ts b/src/livecodes/templates/get-starter-templates.ts
index d1d1487548..3211cb44c7 100644
--- a/src/livecodes/templates/get-starter-templates.ts
+++ b/src/livecodes/templates/get-starter-templates.ts
@@ -28,6 +28,7 @@ const loadTemplates = async (baseUrl: string): Promise<Template[]> =>
 export const getStarterTemplates = async (config: Config, baseUrl: string): Promise<Template[]> =>
   (await loadTemplates(baseUrl))
     .filter((template) => {
+      if (template.files?.length) return true;
       const enabledLanguages = config.languages?.map(getLanguageByAlias).filter(Boolean);
       if (!enabledLanguages) return true;
       if (template.name === 'blank') return true;
@@ -69,6 +70,7 @@ export const getStarterTemplates = async (config: Config, baseUrl: string): Prom
           ? { contentUrl: mapBaseUrl(template.script?.contentUrl || '', baseUrl) }
           : {}),
       },
+      files: template.files?.map((f) => ({ ...f, content: mapBaseUrl(f.content, baseUrl) })) || [],
       imports: objectMap(template.imports || {}, (url) => mapBaseUrl(url || '', baseUrl)),
       types: objectMap(template.types || {}, (url) => mapBaseUrl(url || '', baseUrl)),
       stylesheets: template.stylesheets?.map((url) => mapBaseUrl(url || '', baseUrl)),
diff --git a/src/livecodes/templates/multifile/blank.ts b/src/livecodes/templates/multifile/blank.ts
new file mode 100644
index 0000000000..70505c9f70
--- /dev/null
+++ b/src/livecodes/templates/multifile/blank.ts
@@ -0,0 +1,39 @@
+import type { Template } from '../../models';
+
+export const blank: Template = {
+  name: 'multifile-blank',
+  title: window.deps.translateString('templates.multifile.blank', 'Blank Project'),
+  thumbnail: 'assets/templates/blank.svg',
+  mainFile: 'index.html',
+  activeEditor: 'index.html',
+  files: [
+    {
+      filename: 'index.html',
+      language: 'html',
+      content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title></title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+  <body>
+
+    <script type="module" src="script.js"></script>
+  </body>
+</html>
+`,
+    },
+    {
+      filename: 'styles.css',
+      language: 'css',
+      content: '',
+    },
+    {
+      filename: 'script.js',
+      language: 'javascript',
+      content: '',
+    },
+  ],
+};
diff --git a/src/livecodes/templates/multifile/index.ts b/src/livecodes/templates/multifile/index.ts
new file mode 100644
index 0000000000..264792df44
--- /dev/null
+++ b/src/livecodes/templates/multifile/index.ts
@@ -0,0 +1,3 @@
+import { blank } from './blank';
+
+export const multifileTemplates = [blank];
diff --git a/src/livecodes/templates/starter/index.ts b/src/livecodes/templates/starter/index.ts
index 4bc1caaf2a..007c0c7b90 100644
--- a/src/livecodes/templates/starter/index.ts
+++ b/src/livecodes/templates/starter/index.ts
@@ -1,5 +1,6 @@
 // this is bundled to build/livecodes/templates.js
 
+import { multifileTemplates } from '../multifile/index';
 import { angularStarter } from './angular-starter';
 import { assemblyscriptStarter } from './assemblyscript-starter';
 import { astroStarter } from './astro-starter';
@@ -140,4 +141,5 @@ export const starterTemplates = [
   minizincStarter,
   blocklyStarter,
   diagramsStarter,
+  ...multifileTemplates,
 ];
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 307e7fe620..28fdd3ed41 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1444,7 +1444,10 @@ export interface Compilers {
   [language: string]: Compiler;
 }
 
-export type Template = Pick<ContentConfig, 'title' | 'markup' | 'style' | 'script'> &
+export type Template = (
+  | Pick<ContentConfig, 'title' | 'markup' | 'style' | 'script'>
+  | Pick<ContentConfig, 'title' | 'mainFile' | 'files'>
+) &
   Partial<ContentConfig> & {
     name: TemplateName;
     aliases?: TemplateName[];
@@ -1524,7 +1527,8 @@ export type TemplateName =
   | 'prolog'
   | 'minizinc'
   | 'blockly'
-  | 'diagrams';
+  | 'diagrams'
+  | 'multifile-blank';
 
 export interface Tool {
   name: 'console' | 'compiled' | 'tests';

From a6ba81bc2d130b4d54e336cb93c441b19549dd3d Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 10 Jan 2026 08:22:24 +0200
Subject: [PATCH 032/143] improve multifile tab styles

---
 src/livecodes/styles/inc-multi-file.scss | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/livecodes/styles/inc-multi-file.scss b/src/livecodes/styles/inc-multi-file.scss
index feafa9fe71..8ab69bb91f 100644
--- a/src/livecodes/styles/inc-multi-file.scss
+++ b/src/livecodes/styles/inc-multi-file.scss
@@ -16,7 +16,7 @@
 
     #select-editor {
       display: flex;
-      width: calc(70vw - 252px);
+      max-width: calc(70vw - 252px);
 
       > div {
         overflow-x: auto;
@@ -43,34 +43,30 @@
       div:first-child {
         width: calc(100% - 32px);
       }
-
-      #project-title {
-        max-width: unset;
-      }
     }
   }
 
   @media only screen and (max-width: 1024px) {
     #toolbar #select-editor {
-      width: calc(70vw - 180px);
+      max-width: calc(70vw - 180px);
     }
   }
 
   @media only screen and (max-width: 768px) {
     #toolbar #select-editor {
-      width: calc(70vw - 100px);
+      max-width: calc(70vw - 100px);
     }
   }
 
   @media only screen and (max-width: 480px) {
     #toolbar #select-editor {
-      width: calc(100% - 8px);
+      max-width: calc(100% - 8px);
     }
   }
 
   .embed {
     #toolbar #select-editor {
-      width: calc(100vw - 120px);
+      max-width: calc(100vw - 120px);
     }
 
     #toolbar .toolbar-render a#result-button {
@@ -79,7 +75,7 @@
 
     @media only screen and (max-width: 768px) {
       #toolbar #select-editor {
-        width: calc(100vw - 80px);
+        max-width: calc(100vw - 80px);
       }
     }
   }

From 8c126382d1ea9e752a7a7531166c165319b2b2c4 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 10 Jan 2026 09:12:01 +0200
Subject: [PATCH 033/143] fix undefined activeEditor

---
 src/livecodes/core.ts                        | 63 +++++++++++---------
 src/livecodes/handlers/keyboard-shortcuts.ts |  6 +-
 2 files changed, 38 insertions(+), 31 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 8f80c4645b..3345c637db 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -256,7 +256,7 @@ const sdkWatchers = {
 
 const getEditorLanguage = (editorId = 'markup') => editorLanguages?.[editorId];
 const getEditorLanguages = () => Object.values(editorLanguages || {});
-const getActiveEditor = () => editors[getConfig().activeEditor || 'markup'];
+const getActiveEditor = (): CodeEditor | undefined => editors[getConfig().activeEditor || 'markup'];
 
 const loadStyles = () =>
   isHeadless
@@ -941,7 +941,7 @@ const showMode = (mode?: Config['mode'], view?: Config['view']) => {
 
 const showEditor = (editorId: EditorId | (string & {}) = 'markup', isUpdate = false) => {
   const config = getConfig();
-  if (getSource(editorId, config)?.hidden) return;
+  if (!editors[editorId] || getSource(editorId, config)?.hidden) return;
   const titles = [...UI.getEditorTitles()];
   const editorIsVisible = () => titles.map((title) => title.dataset.editor).includes(editorId);
   if (!editorIsVisible()) {
@@ -1031,7 +1031,8 @@ const addConsoleInputCodeCompletion = () => {
   }
 };
 
-const configureEditorTools = (language: Language) => {
+const configureEditorTools = (language: Language | undefined) => {
+  if (!language) return false;
   if (getConfig().readonly || language === 'blockly' || language === 'richtext') {
     UI.getEditorToolbar().classList.add('hidden');
     return false;
@@ -1707,11 +1708,11 @@ const format = async (allEditors = true) => {
     );
   } else {
     const activeEditor = getActiveEditor();
-    await activeEditor.format();
+    await activeEditor?.format();
     if (getConfig().foldRegions) {
-      await activeEditor.foldRegions?.();
+      await activeEditor?.foldRegions?.();
     }
-    activeEditor.focus();
+    activeEditor?.focus();
   }
   updateConfig();
 };
@@ -1970,6 +1971,7 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false, oldConfig
   let shouldReloadEditors = (() => {
     if (oldConfig?.files?.length || newConfig.files?.length) return true;
     const activeEditor = getActiveEditor();
+    if (activeEditor == null) return false;
     if (newConfig.editor != null && newConfig.editor in activeEditor) return true;
     if (newConfig.mode != null) {
       if (newConfig.mode !== 'result' && activeEditor.isFake) return true;
@@ -2001,7 +2003,7 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false, oldConfig
   }
   showEditor(combinedConfig.activeEditor);
   if (!isEmbed) {
-    setTimeout(() => getActiveEditor().focus());
+    setTimeout(() => getActiveEditor()?.focus());
   }
   parent.dispatchEvent(new Event(customEvents.ready));
 };
@@ -2584,6 +2586,7 @@ const showLanguageInfo = async (languageInfo: HTMLElement) => {
 };
 
 const loadStarterTemplate = async (templateName: Template['name'], checkSaved = true) => {
+  modal.show(loadingMessage(), { size: 'small' });
   const templates = await getTemplates();
   const { title, thumbnail, ...templateConfig } =
     templates.filter((template) => template.name === templateName)?.[0] || {};
@@ -2613,7 +2616,6 @@ const loadStarterTemplate = async (templateName: Template['name'], checkSaved =
 };
 
 const getPlaygroundState = (): Config & Code => {
-  // TODO: handle files
   const config = getConfig();
   const cachedCode = getCachedCode();
   return {
@@ -2622,18 +2624,22 @@ const getPlaygroundState = (): Config & Code => {
     markup: {
       ...config.markup,
       ...cachedCode.markup,
-      position: editors.markup.getPosition(),
+      position: editors.markup?.getPosition(),
     },
     style: {
       ...config.style,
       ...cachedCode.style,
-      position: editors.style.getPosition(),
+      position: editors.style?.getPosition(),
     },
     script: {
       ...config.script,
       ...cachedCode.script,
-      position: editors.script.getPosition(),
+      position: editors.script?.getPosition(),
     },
+    files: cachedCode.files.map((file) => ({
+      ...file,
+      position: editors[file.filename]?.getPosition(),
+    })),
     tools: {
       enabled: config.tools.enabled,
       active: toolsPane?.getActiveTool() ?? '',
@@ -3212,7 +3218,7 @@ const handleI18nMenu = () => {
 };
 
 const handleEditorTools = () => {
-  if (!configureEditorTools(getActiveEditor().getLanguage())) return;
+  if (!configureEditorTools(getActiveEditor()?.getLanguage())) return;
   const originalMode = getConfig().mode;
   eventsManager.addEventListener(UI.getFocusButton(), 'click', () => {
     const config = getConfig();
@@ -3233,7 +3239,8 @@ const handleEditorTools = () => {
   });
 
   eventsManager.addEventListener(UI.getCopyButton(), 'click', () => {
-    if (copyToClipboard(getActiveEditor().getValue())) {
+    const activeEditor = getActiveEditor();
+    if (activeEditor && copyToClipboard(activeEditor.getValue())) {
       notifications.success(
         window.deps.translateString('core.copy.copied', 'Code copied to clipboard'),
       );
@@ -3246,14 +3253,14 @@ const handleEditorTools = () => {
 
   eventsManager.addEventListener(UI.getUndoButton(), 'click', () => {
     const activeEditor = getActiveEditor();
-    activeEditor.undo();
-    activeEditor.focus();
+    activeEditor?.undo();
+    activeEditor?.focus();
   });
 
   eventsManager.addEventListener(UI.getRedoButton(), 'click', () => {
     const activeEditor = getActiveEditor();
-    activeEditor.redo();
-    activeEditor.focus();
+    activeEditor?.redo();
+    activeEditor?.focus();
   });
 
   eventsManager.addEventListener(UI.getFormatButton(), 'click', async () => {
@@ -3262,9 +3269,9 @@ const handleEditorTools = () => {
 
   eventsManager.addEventListener(UI.getCopyAsUrlButton(), 'click', () => {
     const currentEditor = getActiveEditor();
-    const mimeType = 'text/' + currentEditor.getLanguage();
-    const dataUrl = toDataUrl(currentEditor.getValue(), mimeType);
-    if (copyToClipboard(dataUrl)) {
+    const mimeType = 'text/' + currentEditor?.getLanguage();
+    const dataUrl = toDataUrl(currentEditor?.getValue() || '', mimeType);
+    if (currentEditor && copyToClipboard(dataUrl)) {
       notifications.success(
         window.deps.translateString('core.copy.copiedAsDataURL', 'Code copied as data URL'),
       );
@@ -4496,7 +4503,7 @@ const changeEditorSettings = (newConfig: Partial<UserConfig> | null) => {
     });
   }
   showEditorModeStatus(updatedConfig.activeEditor || 'markup');
-  getActiveEditor().focus();
+  getActiveEditor()?.focus();
 };
 
 const handleEditorSettings = () => {
@@ -4556,8 +4563,8 @@ const handleCodeToImage = () => {
         editor: 'codejar',
         theme: 'dark',
         wordWrap: true,
-        language: activeEditor.getLanguage(),
-        value: activeEditor.getValue(),
+        language: activeEditor?.getLanguage() || 'html',
+        value: activeEditor?.getValue() || '',
         readonly: false,
         editorId: 'codeToImage',
         isEmbed: false,
@@ -4589,13 +4596,13 @@ const handleCodeToImage = () => {
       baseUrl,
       currentUrl,
       fileName: safeName(fileName, '-').toLowerCase(),
-      editorId: getLanguageEditorId(activeEditor.getLanguage()) || 'script',
+      editorId: activeEditor?.getEditorId() || 'script',
       modal,
       notifications,
       eventsManager,
       deps: {
         createEditor: createPreviewEditor,
-        getFormatFn: () => formatter.getFormatFn(activeEditor.getLanguage()),
+        getFormatFn: () => formatter.getFormatFn(activeEditor?.getLanguage() || 'javascript'),
         getShareUrl,
         getSavedPreset,
         savePreset,
@@ -5398,7 +5405,7 @@ const basicHandlers = () => {
     isEmbed,
     onClose: () => {
       if (!isEmbed) {
-        getActiveEditor().focus();
+        getActiveEditor()?.focus();
       }
     },
   });
@@ -5886,8 +5893,8 @@ const createApi = (): API => {
       split?.show('code', full);
       if (typeof line === 'number' && line > 0) {
         const col = typeof column === 'number' && column > -1 ? column : 0;
-        getActiveEditor().setPosition({ lineNumber: line, column: col });
-        getActiveEditor().focus();
+        getActiveEditor()?.setPosition({ lineNumber: line, column: col });
+        getActiveEditor()?.focus();
       }
     } else {
       throw new Error(window.deps.translateString('core.error.invalidPanelId', 'Invalid panel id'));
diff --git a/src/livecodes/handlers/keyboard-shortcuts.ts b/src/livecodes/handlers/keyboard-shortcuts.ts
index ee83911709..516e7b6ea5 100644
--- a/src/livecodes/handlers/keyboard-shortcuts.ts
+++ b/src/livecodes/handlers/keyboard-shortcuts.ts
@@ -9,7 +9,7 @@ import { ctrl } from '../utils';
  */
 export interface KeyboardShortcutDeps {
   eventsManager: EventsManager;
-  getActiveEditor: () => CodeEditor;
+  getActiveEditor: () => CodeEditor | undefined;
   getConfig: () => Config;
   showEditor: (editorId: EditorId) => void;
   run: () => Promise<void>;
@@ -28,7 +28,7 @@ let lastkeys = '';
  */
 const createCommandPaletteHandler = (deps: KeyboardShortcutDeps) => (e: KeyboardEvent) => {
   const activeEditor = deps.getActiveEditor();
-  if (ctrl(e) && e.code === 'KeyP' && activeEditor.monaco) {
+  if (ctrl(e) && e.code === 'KeyP' && activeEditor?.monaco) {
     e.preventDefault();
     activeEditor.monaco.trigger('anyString', 'editor.action.quickCommand');
     lastkeys = 'Ctrl + P';
@@ -109,7 +109,7 @@ const createZoomToggleHandler = () => (e: KeyboardEvent) => {
 const createFocusEditorHandler = (deps: KeyboardShortcutDeps) => (e: KeyboardEvent) => {
   if (ctrl(e) && e.altKey && e.code === 'KeyE') {
     e.preventDefault();
-    deps.getActiveEditor().focus();
+    deps.getActiveEditor()?.focus();
     lastkeys = 'Ctrl + Alt + E';
     return true;
   }

From c4de3d9804f8e8655f5dfc44c2a6c0d445843fc4 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 10 Jan 2026 09:26:15 +0200
Subject: [PATCH 034/143] show loading message in modal when loading templates

---
 src/livecodes/core.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 3345c637db..43d2946a3f 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -5576,8 +5576,7 @@ const importExternalContent = async (options: {
 
   if (!validConfigUrl && !template && !importUrl && !hasContentUrls(config)) return false;
 
-  const loadingMessage = window.deps.translateString('core.import.loading', 'Loading Project...');
-  notifications.info(loadingMessage);
+  modal.show(loadingMessage(), { size: 'small' });
 
   let templateConfig: Partial<Config> = {};
   let importUrlConfig: Partial<Config> = {};
@@ -5681,6 +5680,7 @@ const importExternalContent = async (options: {
     false,
   );
 
+  modal.close();
   loadSelectedScreen();
 
   return true;

From d141e4fbc2ad5e78de6a73981833a79fa8862aaf Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 10 Jan 2026 10:40:03 +0200
Subject: [PATCH 035/143] fix multifile stylesheet import

---
 src/livecodes/result/multi-file-result-page.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 7a6cc6bb19..659e3773c0 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -180,15 +180,17 @@ export const createMultiFileResultPage = async ({
       }
       const compiledLanguage =
         getLanguageEditorId(importedFile.language) === 'style' ? 'css' : 'javascript';
+      // importmaps cannot override relative imports in data URLs
+      const convertedImport = resolvedImport.replace('./', '~/');
       if (isCss(resolvedImport, compiledLanguage)) {
         const dataUrl = fileUrls[importedFile.filename] || getDataUrl(importedFile);
         if (!dataUrl) return;
-        stylesheetImports[resolvedImport] = dataUrl;
+        stylesheetImports[convertedImport] = dataUrl;
+        relativeImports[resolvedImport] = convertedImport;
       } else {
-        // importmaps cannot override relative imports in data URLs
-        relativeImports[resolvedImport] = resolvedImport.replace('./', '~/');
+        relativeImports[resolvedImport] = convertedImport;
         // mark it with null till all relative imports are collected
-        codeImports[resolvedImport.replace('./', '~/')] = null as any;
+        codeImports[convertedImport] = null as any;
       }
     });
   });

From 70477a1fdb2374d26845e19a7cfcb0cd0cd4ae7f Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 10 Jan 2026 11:33:08 +0200
Subject: [PATCH 036/143] allow importing images

---
 docs/docs/languages/html.mdx                  |  2 +-
 src/livecodes/languages/html/lang-html.ts     |  2 +-
 .../result/multi-file-result-page.ts          | 29 +++++++++++++++++--
 src/sdk/models.ts                             |  1 +
 4 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/docs/docs/languages/html.mdx b/docs/docs/languages/html.mdx
index 88498534b8..7d44329f3a 100644
--- a/docs/docs/languages/html.mdx
+++ b/docs/docs/languages/html.mdx
@@ -48,7 +48,7 @@ or adding JavaScript together with a different script editor language (e.g. see
 
 ### Extensions
 
-`.html`, `.htm`
+`.html`, `.htm`, `.svg`
 
 ### Editor
 
diff --git a/src/livecodes/languages/html/lang-html.ts b/src/livecodes/languages/html/lang-html.ts
index b089dbcd55..493502acbf 100644
--- a/src/livecodes/languages/html/lang-html.ts
+++ b/src/livecodes/languages/html/lang-html.ts
@@ -12,7 +12,7 @@ export const html: LanguageSpecs = {
   compiler: {
     factory: () => async (code) => code,
   },
-  extensions: ['html', 'htm'],
+  extensions: ['html', 'htm', 'svg'],
   editor: 'markup',
   multiFileSupport: true,
 };
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 659e3773c0..e6b07a0c98 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -90,8 +90,13 @@ export const createMultiFileResultPage = async ({
   const isCss = (mod: string, compiledLanguage?: string) =>
     mod.startsWith('data:text/css') || /\.css(\?|#|$)/i.test(mod) || compiledLanguage === 'css';
 
+  const isImage = (mod: string) =>
+    mod.startsWith('data:image') ||
+    /\.(svg|jpg|jpeg|png|gif|ico|webp|avif|apng|bmp|tiff)(\?|#|$)/i.test(mod);
+
   const fileUrls: Record<string, string> = {};
   const stylesheetImports: Record<string, string> = {};
+  const imageImports: Record<string, string> = {};
   let codeImports: Record<string, string> = {};
   const relativeImports: Record<string, string> = {};
 
@@ -160,7 +165,8 @@ export const createMultiFileResultPage = async ({
       if (
         !resolvedImport ||
         resolvedImport.replace('./', '~/') in codeImports ||
-        resolvedImport in stylesheetImports
+        resolvedImport in stylesheetImports ||
+        resolvedImport in imageImports
       ) {
         return;
       }
@@ -176,17 +182,27 @@ export const createMultiFileResultPage = async ({
         if (isCss(resolvedImport)) {
           stylesheetImports[resolvedImport] = resolvedImport;
         }
+        if (isImage(resolvedImport)) {
+          imageImports[resolvedImport] = resolvedImport;
+        }
         return;
       }
       const compiledLanguage =
         getLanguageEditorId(importedFile.language) === 'style' ? 'css' : 'javascript';
+
       // importmaps cannot override relative imports in data URLs
       const convertedImport = resolvedImport.replace('./', '~/');
+
       if (isCss(resolvedImport, compiledLanguage)) {
         const dataUrl = fileUrls[importedFile.filename] || getDataUrl(importedFile);
         if (!dataUrl) return;
         stylesheetImports[convertedImport] = dataUrl;
         relativeImports[resolvedImport] = convertedImport;
+      } else if (isImage(resolvedImport)) {
+        const dataUrl = fileUrls[importedFile.filename] || getDataUrl(importedFile);
+        if (!dataUrl) return;
+        imageImports[convertedImport] = dataUrl;
+        relativeImports[resolvedImport] = convertedImport;
       } else {
         relativeImports[resolvedImport] = convertedImport;
         // mark it with null till all relative imports are collected
@@ -217,12 +233,19 @@ export const createMultiFileResultPage = async ({
     stylesheet.href = url;
     dom.head.appendChild(stylesheet);
 
+    // map stylesheets in import map to empty script to avoid loading css as js
+    codeImports[mod] = 'data:text/javascript;charset=UTF-8;base64,';
     if (Object.keys(configImports).includes(mod)) {
-      // map stylesheets in import map to empty script to avoid loading css as js
-      configImports[mod] = 'data:text/javascript;charset=UTF-8;base64,';
+      delete configImports[mod];
     }
   });
 
+  // imported images
+  Object.keys(imageImports).forEach((mod) => {
+    const content = `export default '${imageImports[mod]}'`;
+    codeImports[mod] = toDataUrl(content);
+  });
+
   const getRelativePath = (url: string) => url.replace(location.origin + location.pathname, './');
 
   // stylesheet files added in markup
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 28fdd3ed41..c107ba71db 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -935,6 +935,7 @@ export interface AppData {
 export type Language =
   | 'html'
   | 'htm'
+  | 'svg'
   | 'markdown'
   | 'md'
   | 'mdown'

From 937674a6d6e6d002afa3950b6d2c6a9ed83c391c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 10 Jan 2026 17:21:43 +0200
Subject: [PATCH 037/143] handle changing content for new files

---
 src/livecodes/core.ts | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 43d2946a3f..cc135024f0 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -544,6 +544,7 @@ const addFile = async (
   editorLanguages![validName] = fileLanguage;
   editors[validName] = editor;
   editorIds.push(validName);
+  handleChangeContent(validName);
   if (config.autoupdate) {
     run();
   }
@@ -2966,7 +2967,7 @@ const handleChangeLanguage = () => {
   }
 };
 
-const handleChangeContent = () => {
+const handleChangeContent = (editorId?: EditorId) => {
   const contentChanged = async (editorId: EditorId, loading: boolean) => {
     updateConfig();
     const config = getConfig();
@@ -2976,7 +2977,7 @@ const handleChangeContent = () => {
       await run(editorId);
     }
 
-    if (config.markup.content !== getCache().markup.content) {
+    if (getSource(editorId, config)?.content !== getSource(editorId, getCache())?.content) {
       await getResultPage({ sourceEditor: editorId });
     }
 
@@ -2988,7 +2989,11 @@ const handleChangeContent = () => {
           baseUrl,
           editors,
           config,
-          html: getCache().markup.compiled || config.markup.content || '',
+          html:
+            getCache().markup.compiled ||
+            config.markup.content ||
+            getSource(config.mainFile || getMainFile(config) || 'index.html', config)?.content ||
+            '',
           eventsManager,
         });
       }
@@ -3010,10 +3015,19 @@ const handleChangeContent = () => {
       () => getConfig().delay ?? defaultConfig.delay,
     );
 
-  (Object.keys(editors) as EditorId[]).forEach((editorId) => {
+  const subscribeEditor = (editorId: EditorId) => {
+    if (!editorId || !editors?.[editorId]) return;
     editors[editorId].onContentChanged(debouncecontentChanged(editorId));
     editors[editorId].onContentChanged(setSavedStatus);
-  });
+  };
+
+  if (editorId) {
+    subscribeEditor(editorId);
+  } else {
+    Object.keys(editors).forEach((editorId) => {
+      subscribeEditor(editorId);
+    });
+  }
 };
 
 const handleKeyboardShortcutsScreen = () => {

From 278455397721766448ca98392fb04373736ea50e Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 10 Jan 2026 23:47:04 +0200
Subject: [PATCH 038/143] enable "Go to definition" in monaco

---
 src/livecodes/editor/monaco/monaco.ts | 90 +++++++++++++++++++++++----
 src/livecodes/vendors.ts              |  3 +-
 2 files changed, 79 insertions(+), 14 deletions(-)

diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 368b79220d..0ab7bc597b 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -1,6 +1,6 @@
 import type * as Monaco from 'monaco-editor';
 
-import { getEditorModeNode } from '../../UI/selectors';
+import { getEditorModeNode, getEditorTab } from '../../UI/selectors';
 import { getImports } from '../../compiler/import-map';
 import { getFileLanguage } from '../../languages/utils';
 import type {
@@ -26,6 +26,7 @@ import {
   monacoEmacsUrl,
   monacoVimUrl,
   monacoVolarUrl,
+  typescriptVersion,
   vendorsBaseUrl,
 } from '../../vendors';
 import { getEditorTheme } from '../themes';
@@ -84,16 +85,18 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
   const baseOptions = convertOptions(options);
 
-  const monacoMapLanguage = (language: Language): Language =>
-    language === 'livescript'
-      ? 'coffeescript'
-      : ['rescript', 'reason', 'ocaml'].includes(language)
-        ? 'csharp'
-        : language.startsWith('vue')
-          ? 'vue'
-          : ['svelte', 'malina', 'riot'].includes(language)
-            ? ('razor' as Language) // avoid mixing code between markup & script editors when formatting
-            : mapLanguage(language);
+  const monacoMapLanguage = (language: Language | undefined): Language =>
+    !language
+      ? 'html'
+      : language === 'livescript'
+        ? 'coffeescript'
+        : ['rescript', 'reason', 'ocaml'].includes(language)
+          ? 'csharp'
+          : language.startsWith('vue')
+            ? 'vue'
+            : ['svelte', 'malina', 'riot'].includes(language)
+              ? ('razor' as Language) // avoid mixing code between markup & script editors when formatting
+              : mapLanguage(language);
 
   try {
     (window as any).monaco = (window as any).monaco || (await loadMonaco()).monaco;
@@ -354,8 +357,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     }, 50);
   }
 
-  const contentEditors: Array<EditorOptions['editorId']> = ['markup', 'style', 'script', 'tests'];
-  if (contentEditors.includes(editorId)) {
+  if (editorId.includes('.')) {
     editors.push(editor);
   }
 
@@ -469,6 +471,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
   const getLanguage = () => language;
   const setLanguage = (lang: Language, value?: string) => {
+    if (!lang) return;
     language = lang;
     clearTypes(false);
     const valueToInsert = value ?? editor.getValue();
@@ -906,8 +909,69 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     monaco.languages.registerHoverProvider('html', npmPackageHoverProvider);
   };
 
+  const enableGoToDefinition = () => {
+    // https://github.com/microsoft/vscode/pull/177064
+    monaco.editor.registerEditorOpener({
+      async openCodeEditor(_source, resource, selectionOrPosition) {
+        const lineNumber = !selectionOrPosition
+          ? null
+          : 'lineNumber' in selectionOrPosition
+            ? selectionOrPosition.lineNumber
+            : selectionOrPosition.startLineNumber;
+
+        if (resource.path.startsWith('/lib.')) {
+          const lib = resource.path.replace('/lib.', '');
+          window.open(
+            `https://app.unpkg.com/typescript@${typescriptVersion}/files/lib/lib.${lib}${lineNumber ? '#L' + lineNumber : ''}`,
+            '_blank',
+          );
+          return true;
+        }
+
+        if (resource.path.startsWith('/node_modules/')) {
+          const [part1, part2, ...rest] = resource.path.replace('/node_modules/', '').split('/');
+          const lib = part1.startsWith('@') ? `${part1}/${part2}` : part1;
+          const path = part1.startsWith('@') ? rest.join('/') : `${part2}/${rest.join('/')}`;
+          window.open(
+            `https://app.unpkg.com/${lib}/files/${path}${lineNumber ? '#L' + lineNumber : ''}`,
+            '_blank',
+          );
+          return true;
+        }
+
+        const targetEditor = editors.find((e) => e.getModel()?.uri.path === resource.path);
+        if (targetEditor) {
+          const targetEditorId = resource.path.split('/').splice(2).join('/');
+
+          if (targetEditorId) {
+            const targetEditorTab = getEditorTab(targetEditorId);
+            targetEditorTab?.click();
+
+            if (monaco.Range.isIRange(selectionOrPosition)) {
+              targetEditor?.revealRangeInCenterIfOutsideViewport(
+                selectionOrPosition,
+                monaco.editor.ScrollType.Smooth,
+              );
+              targetEditor?.setSelection(selectionOrPosition);
+            } else if (selectionOrPosition) {
+              targetEditor?.revealPositionInCenterIfOutsideViewport(
+                selectionOrPosition,
+                monaco.editor.ScrollType.Smooth,
+              );
+              targetEditor?.setPosition(selectionOrPosition);
+            }
+            return true;
+          }
+        }
+
+        return false;
+      },
+    });
+  };
+
   if (!monacoGloballyLoaded) {
     registerShowPackageInfo();
+    enableGoToDefinition();
   }
 
   monacoGloballyLoaded = true;
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 2c940244b9..0c47fb6254 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -448,7 +448,8 @@ export const tesseractUrl = /* @__PURE__ */ getUrl('tesseract.js@6.0.1/dist/tess
 
 export const twigUrl = /* @__PURE__ */ getUrl('twig@1.17.1/twig.min.js');
 
-export const typescriptUrl = /* @__PURE__ */ getUrl(`typescript@5.9.3/lib/typescript.js`);
+export const typescriptVersion = '5.9.3';
+export const typescriptUrl = getUrl(`typescript@${typescriptVersion}/lib/typescript.js`);
 
 export const uniterUrl = /* @__PURE__ */ getUrl('uniter@2.18.0/dist/uniter.js');
 

From 29a57ddbcd8db56c4e5f146409bff777e287e7e7 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 10 Jan 2026 23:49:47 +0200
Subject: [PATCH 039/143] fix deleting file (remove tab)

---
 src/livecodes/UI/create-language-menus.ts | 6 ++----
 src/livecodes/UI/selectors.ts             | 3 +++
 src/livecodes/core.ts                     | 7 +------
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index 31ab73c63f..d348805712 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -9,7 +9,7 @@ import type {
   Template,
 } from '../models';
 import { handleSlash, removeFormatting } from '../utils';
-import { getEditorSelector, getEditorSelectorDiv } from './selectors';
+import { getEditorSelector, getEditorSelectorDiv, getEditorTab } from './selectors';
 
 export const createLanguageMenus = (
   config: Config,
@@ -182,8 +182,7 @@ export const createMultiFileEditorTab = ({
   isNewFile: boolean;
 }) => {
   let currentFileName = title;
-  const selector = document.querySelector(`.editor-title[data-editor="${currentFileName}"]`);
-  if (selector) return;
+  if (getEditorTab(currentFileName)) return;
   const editorSelector = document.createElement('a');
   editorSelector.href = '#';
   editorSelector.classList.add('editor-title', 'noselect');
@@ -210,7 +209,6 @@ export const createMultiFileEditorTab = ({
         )
       ) {
         deleteFile(currentFileName);
-        editorSelector.remove();
       }
     });
     editorSelector.appendChild(deleteButton);
diff --git a/src/livecodes/UI/selectors.ts b/src/livecodes/UI/selectors.ts
index a369fe7d61..4fb6fef3f9 100644
--- a/src/livecodes/UI/selectors.ts
+++ b/src/livecodes/UI/selectors.ts
@@ -184,6 +184,9 @@ export const getEditorSelector = /* @__PURE__ */ () => document.querySelector('#
 export const getEditorSelectorDiv = /* @__PURE__ */ () =>
   document.querySelector('#select-editor > div');
 
+export const getEditorTab = /* @__PURE__ */ (editorId: string) =>
+  document.querySelector<HTMLElement>(`#select-editor .editor-title[data-editor="${editorId}"]`);
+
 export const getLanguageMenuLinks = /* @__PURE__ */ () =>
   document.querySelectorAll<HTMLElement>('#select-editor .language-item a');
 
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index cc135024f0..abfa136d5c 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -616,6 +616,7 @@ const deleteFile = (filename: string) => {
       editorDiv.remove();
     }
   });
+  UI.getEditorTab(filename)?.remove();
   if (config.autoupdate) {
     run();
   }
@@ -1064,12 +1065,6 @@ const configureMultiFile = (config: Config) => {
     tab.classList.toggle('hidden', !isMultiFile);
   });
   document.documentElement.classList.toggle('multi-file', isMultiFile);
-
-  // clean up
-  if (!isMultiFile) {
-    multiFileTabs.forEach((tab) => tab.remove());
-    UI.getMultiFileEditorDivs().forEach((editor) => editor.remove());
-  }
 };
 
 const addPhpToken = (code: string) =>

From 2967e1d6eb179650871324c8ac6c9971754d513b Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 10 Jan 2026 23:50:20 +0200
Subject: [PATCH 040/143] fix undefined language

---
 src/livecodes/compiler/compile.worker.ts      | 3 ++-
 src/livecodes/compiler/create-compiler.ts     | 2 +-
 src/livecodes/editor/codejar/codejar.ts       | 6 ++++--
 src/livecodes/editor/codemirror/codemirror.ts | 4 +++-
 src/livecodes/editor/create-editor.ts         | 1 +
 5 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/livecodes/compiler/compile.worker.ts b/src/livecodes/compiler/compile.worker.ts
index 64102b155a..f54db964f6 100644
--- a/src/livecodes/compiler/compile.worker.ts
+++ b/src/livecodes/compiler/compile.worker.ts
@@ -34,10 +34,11 @@ const worker: Worker & {
 (self as any).deps = { languages, processors };
 
 const loadLanguageCompiler = async (
-  language: LanguageOrProcessor,
+  language: LanguageOrProcessor | undefined,
   config: Config,
   baseUrl: string | undefined,
 ) => {
+  if (!language) return;
   if (!baseUrl) {
     throw new Error('baseUrl is not set');
   }
diff --git a/src/livecodes/compiler/create-compiler.ts b/src/livecodes/compiler/create-compiler.ts
index c84d537051..e15db11ef9 100644
--- a/src/livecodes/compiler/create-compiler.ts
+++ b/src/livecodes/compiler/create-compiler.ts
@@ -212,7 +212,7 @@ export const createCompiler = async ({
     const compiler = compilers[language]?.fn;
     if (typeof compiler !== 'function') {
       return new Promise<CompileResult>((res) => {
-        if (language !== 'html' && language !== 'css' && language !== 'javascript') {
+        if (language && language !== 'html' && language !== 'css' && language !== 'javascript') {
           // eslint-disable-next-line no-console
           console.error('Failed to load compiler for: ' + language);
         }
diff --git a/src/livecodes/editor/codejar/codejar.ts b/src/livecodes/editor/codejar/codejar.ts
index cccb24a235..87cb86c59e 100644
--- a/src/livecodes/editor/codejar/codejar.ts
+++ b/src/livecodes/editor/codejar/codejar.ts
@@ -38,8 +38,9 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
   let { value, language, editorId } = options;
   let currentPosition: EditorPosition = { lineNumber: 1 };
-  const mapLanguage = options.mapLanguage || ((lang: Language) => lang);
-  let mappedLanguage = language === 'wat' ? 'wasm' : mapLanguage(language);
+  const mapLanguage = (lang: Language | undefined) =>
+    !lang ? 'html' : lang === 'wat' ? 'wasm' : options.mapLanguage?.(lang) || lang;
+  let mappedLanguage = mapLanguage(language);
   let editorOptions: ReturnType<typeof convertOptions>;
 
   const preElement: HTMLElement = document.createElement('pre');
@@ -164,6 +165,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
   const getLanguage = () => language;
   const setLanguage = (lang: Language, newValue?: string) => {
+    if (!lang) return;
     language = lang;
     mappedLanguage = mapLanguage(language);
     codeElement.className = 'language-' + mappedLanguage;
diff --git a/src/livecodes/editor/codemirror/codemirror.ts b/src/livecodes/editor/codemirror/codemirror.ts
index 8d1b2136ca..a3225acc38 100644
--- a/src/livecodes/editor/codemirror/codemirror.ts
+++ b/src/livecodes/editor/codemirror/codemirror.ts
@@ -66,7 +66,8 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   const getLanguageSupport = async (language: Language): Promise<LanguageSupport> =>
     editorLanguages[language]?.() || (editorLanguages.html?.() as Promise<LanguageSupport>);
 
-  const mapLanguage = (lang: Language) => {
+  const mapLanguage = (lang: Language | undefined) => {
+    if (!lang) return 'html';
     if (lang.startsWith('vue')) return 'vue';
     if (lang.startsWith('svelte')) return 'svelte';
     if (lang === 'liquid') return 'liquid';
@@ -335,6 +336,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   const focus = () => view.focus();
   const getLanguage = () => language;
   const setLanguage = (lang: Language, value?: string) => {
+    if (!lang) return;
     language = lang;
     mappedLanguage = mapLanguage(language);
     getLanguageSupport(mappedLanguage).then((langSupport) => {
diff --git a/src/livecodes/editor/create-editor.ts b/src/livecodes/editor/create-editor.ts
index 5fa27664b0..3c1b53b801 100644
--- a/src/livecodes/editor/create-editor.ts
+++ b/src/livecodes/editor/create-editor.ts
@@ -93,6 +93,7 @@ export const createEditor = async (
   if (!options) throw new Error();
 
   const editorOptions = getEditorOptions(options);
+  if (!options.language) return createFakeEditor(editorOptions);
 
   const editorName = selectEditor(editorOptions);
   if (editorName === 'fake') return createFakeEditor(editorOptions);

From 3896978c20d8d595065ed4b58782b02b911628ba Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 11 Jan 2026 00:40:43 +0200
Subject: [PATCH 041/143] fix jsx

---
 src/livecodes/editor/ts-compiler-options.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/livecodes/editor/ts-compiler-options.ts b/src/livecodes/editor/ts-compiler-options.ts
index 84bf5b0b5c..d1e47a948e 100644
--- a/src/livecodes/editor/ts-compiler-options.ts
+++ b/src/livecodes/editor/ts-compiler-options.ts
@@ -64,5 +64,7 @@ export const getCompilerOptions = (language: Language): CompilerOptions => {
     ...settings,
     ...(isJsx ? jsxSettings : {}),
     ...(nonReactJsx ? nonReactJsxSettings : {}),
+    // TODO: fix (late initialized editors override previous ones)
+    jsx: 1, // monaco.languages.typescript.JsxEmit.Preserve,
   };
 };

From a43b3a820e2347eb0aff9685bc85e238c1fcbdba Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 11 Jan 2026 03:34:38 +0200
Subject: [PATCH 042/143] fix types

---
 src/livecodes/compiler/compile-in-compiler.ts | 2 +-
 src/livecodes/languages/mdx/lang-mdx.ts       | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/livecodes/compiler/compile-in-compiler.ts b/src/livecodes/compiler/compile-in-compiler.ts
index d7169c726c..dc9159f722 100644
--- a/src/livecodes/compiler/compile-in-compiler.ts
+++ b/src/livecodes/compiler/compile-in-compiler.ts
@@ -6,7 +6,7 @@ export const compileInCompiler = async (
   content: string,
   language: LanguageOrProcessor | undefined,
   config: Config,
-  options: CompileOptions = {},
+  options: CompileOptions = { filename: 'script' },
   worker: Worker = self as unknown as Worker,
 ): Promise<CompileResult> =>
   new Promise((resolve) => {
diff --git a/src/livecodes/languages/mdx/lang-mdx.ts b/src/livecodes/languages/mdx/lang-mdx.ts
index 4a9a370372..79916ca27f 100644
--- a/src/livecodes/languages/mdx/lang-mdx.ts
+++ b/src/livecodes/languages/mdx/lang-mdx.ts
@@ -31,7 +31,8 @@ import { createRoot } from "react-dom/client";
 ${escapeCode(jsx, false)}
 createRoot(document.querySelector('#__livecodes_mdx_root__')).render(<MDXContent />,);
 `;
-    const js = (await compileInCompiler(result, 'jsx', config, {}, worker)).code;
+    const js = (await compileInCompiler(result, 'jsx', config, { filename: 'markup' }, worker))
+      .code;
     resolve(`<div id="__livecodes_mdx_root__"></div><script type="module">${js}</script>`);
   });
 

From 79eea5bbca7a9068c7c22def5d187652012aed98 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 11 Jan 2026 03:35:50 +0200
Subject: [PATCH 043/143] fix relative imports with directories

---
 .../result/multi-file-result-page.ts          | 86 ++++++++++++-------
 1 file changed, 57 insertions(+), 29 deletions(-)

diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index e6b07a0c98..7ca63ebb09 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -149,6 +149,16 @@ export const createMultiFileResultPage = async ({
     return file.compiled;
   };
 
+  const findFile = (filename: string) =>
+    compiledFiles.find(
+      (f) =>
+        './' + f.filename === filename ||
+        './' + f.filename === filename + '.js' ||
+        './' + f.filename === filename + '.ts' ||
+        './' + f.filename === filename + '.jsx' ||
+        './' + f.filename === filename + '.tsx',
+    );
+
   compiledFiles.forEach((file) => {
     if (getLanguageEditorId(file.language) === 'style') {
       file.compiled = getStylesheetWithImports(file);
@@ -170,14 +180,7 @@ export const createMultiFileResultPage = async ({
       ) {
         return;
       }
-      const importedFile = compiledFiles.find(
-        (f) =>
-          './' + f.filename === resolvedImport ||
-          './' + f.filename === resolvedImport + '.js' ||
-          './' + f.filename === resolvedImport + '.ts' ||
-          './' + f.filename === resolvedImport + '.jsx' ||
-          './' + f.filename === resolvedImport + '.tsx',
-      );
+      const importedFile = findFile(resolvedImport);
       if (!importedFile) {
         if (isCss(resolvedImport)) {
           stylesheetImports[resolvedImport] = resolvedImport;
@@ -207,23 +210,25 @@ export const createMultiFileResultPage = async ({
         relativeImports[resolvedImport] = convertedImport;
         // mark it with null till all relative imports are collected
         codeImports[convertedImport] = null as any;
+        file.compiled = replaceImports(file.compiled, config, {
+          importMap: {
+            [mod]: convertedImport,
+          },
+        });
       }
     });
   });
 
-  if (Object.keys(relativeImports).length > 0) {
-    compiledFiles.forEach((file) => {
-      file.compiled = replaceImports(file.compiled, config, {
-        importMap: relativeImports,
-      });
-      if (codeImports['~/' + file.filename] === null) {
-        const dataUrl = getDataUrl(file);
-        if (!dataUrl) return;
-        codeImports['~/' + file.filename] = dataUrl;
-        fileUrls[file.filename] = dataUrl;
-      }
+  Object.keys(codeImports)
+    .filter((mod) => codeImports[mod] === null)
+    .forEach((mod) => {
+      const file = findFile(mod.replace('~/', './'));
+      if (!file) return;
+      const dataUrl = fileUrls[file.filename] || getDataUrl(file);
+      if (!dataUrl) return;
+      codeImports[mod] = dataUrl;
+      fileUrls[file.filename] = dataUrl;
     });
-  }
 
   // imported stylesheets
   Object.keys(stylesheetImports).forEach((mod) => {
@@ -246,12 +251,15 @@ export const createMultiFileResultPage = async ({
     codeImports[mod] = toDataUrl(content);
   });
 
-  const getRelativePath = (url: string) => url.replace(location.origin + location.pathname, './');
-
   // stylesheet files added in markup
   dom.querySelectorAll<HTMLLinkElement>('link[rel="stylesheet"]').forEach((link) => {
+    let href = link.getAttribute('href');
+    if (!href || !isRelativeUrl(href)) return;
+    if (!href.startsWith('./')) {
+      href = './' + href;
+    }
     const styleFile = compiledFiles.find(
-      (f) => resolvePath(getRelativePath(link.href)) === './' + f.filename,
+      (f) => resolvePath(href, './' + mainFile) === './' + f.filename,
     );
     if (!styleFile) return;
     const dataUrl = fileUrls[styleFile.filename] || getDataUrl(styleFile);
@@ -261,18 +269,38 @@ export const createMultiFileResultPage = async ({
 
   // script added in markup
   dom.querySelectorAll<HTMLScriptElement>('script').forEach((script) => {
-    if (script.src) {
+    let src = script.getAttribute('src'); // avoid getting absolute paths
+    if (src && isRelativeUrl(src)) {
+      if (!src.startsWith('./')) {
+        src = './' + src;
+      }
       const scriptFile = compiledFiles.find(
-        (f) => resolvePath(getRelativePath(script.src), './' + mainFile) === './' + f.filename,
+        (f) => resolvePath(src!, './' + mainFile) === './' + f.filename,
       );
       if (!scriptFile) return;
+      const scriptImports: Record<string, string> = {};
+      getImports(scriptFile.compiled).forEach((mod) => {
+        if (!isRelativeUrl(mod)) return;
+        const relativeImport = resolvePath(mod, './' + scriptFile.filename);
+        if (!relativeImport) return;
+        scriptImports[mod] = relativeImport.replace('./', '~/');
+      });
       const dataUrl = toDataUrl(
         replaceImports(scriptFile.compiled, config, {
-          importMap: relativeImports,
+          importMap: scriptImports,
         }),
       );
-      if (!dataUrl) return;
-      script.src = dataUrl;
+      if (script.type === 'module') {
+        // preserve relative imports (e.g. srcipt.src="js/script.js")
+        let url = src.replace('./', '~/');
+        if (!url.startsWith('~/')) {
+          url = '~/' + url;
+        }
+        codeImports[url] = dataUrl;
+        script.src = toDataUrl(`import '${url}'`);
+      } else {
+        script.src = dataUrl;
+      }
     } else {
       if (hasImports(script.innerHTML)) {
         script.innerHTML = replaceImports(script.innerHTML, config, {
@@ -357,7 +385,7 @@ export const createMultiFileResultPage = async ({
   }
 
   // import maps
-  const userImports =
+  const userImports: Record<string, string> =
     config.customSettings.mapImports === false
       ? {}
       : {

From 4abe4c2528043d7f22fe758866d7ace1951b56ba Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 11 Jan 2026 13:40:56 +0200
Subject: [PATCH 044/143] fix recursive css imports

---
 src/livecodes/compiler/import-map.ts          |  4 +-
 .../result/multi-file-result-page.ts          | 37 ++++++++++++-------
 2 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/livecodes/compiler/import-map.ts b/src/livecodes/compiler/import-map.ts
index 2a50af83d4..da9fb60a7d 100644
--- a/src/livecodes/compiler/import-map.ts
+++ b/src/livecodes/compiler/import-map.ts
@@ -327,7 +327,9 @@ export const inlineStyleImports = (
     ) {
       return statement;
     }
-    return contentMap?.[match.replace(/"/g, '').replace(/'/g, '')] || statement;
+    const dataUrl = contentMap?.[match.replace(/"/g, '').replace(/'/g, '')];
+    if (!dataUrl) return statement;
+    return `@import "${dataUrl}";`;
   });
 
 // based on https://github.com/sveltejs/svelte-repl/blob/master/src/workers/bundler/plugins/commonjs.js
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 7ca63ebb09..70e02f8a0a 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -123,23 +123,31 @@ export const createMultiFileResultPage = async ({
   const externalModules = 'react,react-dom,preact,vue';
 
   // handle imports
-  const stylesImportMap: Record<string, string> = {};
+
+  // CSS imports are recursively inlined with data URLs
+  // (e.g. @import "./css/styles.css"; => @import "data:text/css;base64,...")
+  const stylesImportMap: Record<string, string | null> = {};
   const getStylesheetWithImports = (file: SourceFile & { compiled: string }): string => {
-    // TODO handle directory imports
-    // (e.g. import "./styles/a.css"; import "./b.css"; import "../c.css";)
     if (stylesImportMap[file.filename]) return file.compiled;
-    const styleImports = getStyleImports(file.compiled).filter((mod) => {
-      const resolvedImport = resolvePath(mod, './' + file.filename)?.replace('./', '');
-      if (!resolvedImport) return false;
-      return !(resolvedImport in stylesImportMap);
-    });
-    if (styleImports.length > 0) {
-      const nextImport = compiledFiles.find(
-        (f) => f.filename === styleImports[0].replace('./', ''),
+    const styleImports = getStyleImports(file.compiled)
+      .map((url) => ({ url, resolved: resolvePath(url, './' + file.filename)?.replace('./', '') }))
+      .filter(
+        (resolvedImport) =>
+          resolvedImport.resolved != null &&
+          !resolvedImport.url.startsWith('data:') &&
+          !(resolvedImport.resolved! in stylesImportMap) &&
+          compiledFiles.find((f) => f.filename === resolvedImport.resolved),
       );
-      if (!nextImport) return file.compiled;
+    if (styleImports.length > 0) {
+      const styleImport = styleImports[0];
+      const nextImport = compiledFiles.find((f) => f.filename === styleImport.resolved);
+      if (!nextImport) return file.compiled; // we should not get here
+      getStylesheetWithImports(nextImport);
+      // by then nextImport.filename should be in stylesImportMap
+      const nextImportDataUrl = stylesImportMap[nextImport.filename];
+      if (!nextImportDataUrl) return file.compiled;
       file.compiled = inlineStyleImports(file.compiled, {
-        contentMap: { ['./' + nextImport.filename]: getStylesheetWithImports(nextImport) },
+        contentMap: { [styleImport.url]: nextImportDataUrl },
       });
       return getStylesheetWithImports(file);
     }
@@ -155,6 +163,8 @@ export const createMultiFileResultPage = async ({
         './' + f.filename === filename ||
         './' + f.filename === filename + '.js' ||
         './' + f.filename === filename + '.ts' ||
+        './' + f.filename === filename + '.mjs' ||
+        './' + f.filename === filename + '.mts' ||
         './' + f.filename === filename + '.jsx' ||
         './' + f.filename === filename + '.tsx',
     );
@@ -165,6 +175,7 @@ export const createMultiFileResultPage = async ({
       return;
     }
 
+    // ESM imports are resolved using importmaps to data URLs
     codeImports = {
       ...codeImports,
       ...createImportMap(file.compiled, config, { external: externalModules }),

From a41e37a4cb520c98faa199e957d8f1098aa4b786 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 11 Jan 2026 21:19:24 +0200
Subject: [PATCH 045/143] hide irrelevant UI elements for multifile

---
 src/livecodes/styles/inc-multi-file.scss | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/livecodes/styles/inc-multi-file.scss b/src/livecodes/styles/inc-multi-file.scss
index 8ab69bb91f..ee0cd66db4 100644
--- a/src/livecodes/styles/inc-multi-file.scss
+++ b/src/livecodes/styles/inc-multi-file.scss
@@ -79,4 +79,21 @@
       }
     }
   }
+
+  #info-container {
+    label[for='head-textarea'],
+    #head-textarea,
+    label[for='html-attrs-textarea'],
+    #html-attrs-textarea {
+      display: none;
+    }
+  }
+
+  #external-resources-btn {
+    display: none;
+  }
+
+  #app-menu-project li:has(#external-resources-link) {
+    display: none;
+  }
 }

From e520e356c8fcc3c56c2dc61a434ab623a8490aab Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 11 Jan 2026 21:40:22 +0200
Subject: [PATCH 046/143] use replaceStyleImports for multifile result

---
 src/livecodes/compiler/import-map.ts          | 41 ++++++-------------
 .../result/multi-file-result-page.ts          |  6 +--
 2 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/src/livecodes/compiler/import-map.ts b/src/livecodes/compiler/import-map.ts
index da9fb60a7d..b40fb9bfcc 100644
--- a/src/livecodes/compiler/import-map.ts
+++ b/src/livecodes/compiler/import-map.ts
@@ -301,35 +301,20 @@ export const replaceStyleImports = (
       .replace(/'/g, '')
       .replace(/url\(/g, '')
       .replace(/\)/g, '');
-    const modified = '@import "' + stylesImportMap?.[url] || modulesService.getUrl(url) + '";';
-    const mediaQuery = media?.trim();
-    return !isBare(url)
-      ? statement
-      : mediaQuery
-        ? `@media ${mediaQuery} {\n${modified}\n}`
-        : modified;
-  });
 
-export const inlineStyleImports = (
-  code: string,
-  {
-    exceptions,
-    contentMap,
-  }: { exceptions?: string[] | RegExp[]; contentMap: Record<string, string> },
-) =>
-  code.replace(new RegExp(styleimportsPattern), (statement, match) => {
-    if (
-      exceptions?.some(
-        (e) =>
-          (typeof e === 'string' && e === match) ||
-          (typeof e === 'object' && new RegExp(e).test(match)),
-      )
-    ) {
-      return statement;
-    }
-    const dataUrl = contentMap?.[match.replace(/"/g, '').replace(/'/g, '')];
-    if (!dataUrl) return statement;
-    return `@import "${dataUrl}";`;
+    if (!url) return statement;
+    const isRelativeUrl = isRelative(url);
+    const modified = `@import "${
+      stylesImportMap?.[url] || (isRelativeUrl ? url : modulesService.getUrl(url))
+    }";`;
+    const mediaQuery = media?.trim();
+    return isRelativeUrl
+      ? modified
+      : !isBare(url)
+        ? statement
+        : mediaQuery
+          ? `@media ${mediaQuery} {\n${modified}\n}`
+          : modified;
   });
 
 // based on https://github.com/sveltejs/svelte-repl/blob/master/src/workers/bundler/plugins/commonjs.js
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 70e02f8a0a..8fb10597ac 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -3,8 +3,8 @@ import {
   getImports,
   getStyleImports,
   hasImports,
-  inlineStyleImports,
   replaceImports,
+  replaceStyleImports,
   resolvePath,
 } from '../compiler/import-map';
 import { getMainFile } from '../config/utils';
@@ -146,8 +146,8 @@ export const createMultiFileResultPage = async ({
       // by then nextImport.filename should be in stylesImportMap
       const nextImportDataUrl = stylesImportMap[nextImport.filename];
       if (!nextImportDataUrl) return file.compiled;
-      file.compiled = inlineStyleImports(file.compiled, {
-        contentMap: { [styleImport.url]: nextImportDataUrl },
+      file.compiled = replaceStyleImports(file.compiled, {
+        stylesImportMap: { [styleImport.url]: nextImportDataUrl },
       });
       return getStylesheetWithImports(file);
     }

From 73b9203ae1b94cf9e5a12746eee7fd6703f0f4c5 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 13 Jan 2026 07:48:55 +0200
Subject: [PATCH 047/143] fix css and image imports

---
 src/livecodes/result/multi-file-result-page.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 8fb10597ac..49c1cb4495 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -221,12 +221,12 @@ export const createMultiFileResultPage = async ({
         relativeImports[resolvedImport] = convertedImport;
         // mark it with null till all relative imports are collected
         codeImports[convertedImport] = null as any;
-        file.compiled = replaceImports(file.compiled, config, {
-          importMap: {
-            [mod]: convertedImport,
-          },
-        });
       }
+      file.compiled = replaceImports(file.compiled, config, {
+        importMap: {
+          [mod]: convertedImport,
+        },
+      });
     });
   });
 
@@ -282,9 +282,9 @@ export const createMultiFileResultPage = async ({
   dom.querySelectorAll<HTMLScriptElement>('script').forEach((script) => {
     let src = script.getAttribute('src'); // avoid getting absolute paths
     if (src && isRelativeUrl(src)) {
-      if (!src.startsWith('./')) {
-        src = './' + src;
-      }
+      if (src.startsWith('/')) src = '.' + src;
+      if (!src.startsWith('./')) src = './' + src;
+
       const scriptFile = compiledFiles.find(
         (f) => resolvePath(src!, './' + mainFile) === './' + f.filename,
       );

From 736ac632cbae26459cb642fe3a2af4d516e1677c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 14 Jan 2026 06:43:22 +0200
Subject: [PATCH 048/143] add multifile react template

---
 .../i18n/locales/en/translation.lokalise.json |   8 +-
 src/livecodes/i18n/locales/en/translation.ts  |   4 +-
 src/livecodes/templates/multifile/index.ts    |   3 +-
 src/livecodes/templates/multifile/react.ts    | 198 ++++++++++++++++++
 src/sdk/models.ts                             |   3 +-
 5 files changed, 207 insertions(+), 9 deletions(-)
 create mode 100644 src/livecodes/templates/multifile/react.ts

diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
index 1803e9a6f7..8cbade6335 100644
--- a/src/livecodes/i18n/locales/en/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -1064,10 +1064,6 @@
     "notes": "",
     "translation": "Generating..."
   },
-  "core.import.loading": {
-    "notes": "",
-    "translation": "Loading Project..."
-  },
   "core.layout.horizontal": {
     "notes": "",
     "translation": "Horizontal layout"
@@ -2568,6 +2564,10 @@
     "notes": "",
     "translation": "Loading multi-file templates..."
   },
+  "templates.multifile.react": {
+    "notes": "",
+    "translation": "React Starter"
+  },
   "templates.noUserTemplates.desc": {
     "notes": "### <tag-1> ###\n<wbr  />\n\n",
     "translation": "You can save a project as a template from <tag-1></tag-1>(App&nbsp;menu&nbsp;&gt;&nbsp;Save&nbsp;as&nbsp;&gt; Template)."
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
index ab1236db60..1f496f9b31 100644
--- a/src/livecodes/i18n/locales/en/translation.ts
+++ b/src/livecodes/i18n/locales/en/translation.ts
@@ -424,9 +424,6 @@ const translation = {
       exit: 'Exit Full Screen',
     },
     generating: 'Generating...',
-    import: {
-      loading: 'Loading Project...',
-    },
     layout: {
       horizontal: 'Horizontal layout',
       responsive: 'Responsive layout',
@@ -990,6 +987,7 @@ const translation = {
       blank: 'Blank Project',
       heading: 'Multi-file Templates',
       loading: 'Loading multi-file templates...',
+      react: 'React Starter',
     },
     noUserTemplates: {
       desc: 'You can save a project as a template from <1></1>(App&nbsp;menu&nbsp;&gt;&nbsp;Save&nbsp;as&nbsp;&gt; Template).',
diff --git a/src/livecodes/templates/multifile/index.ts b/src/livecodes/templates/multifile/index.ts
index 264792df44..226d0e4b9d 100644
--- a/src/livecodes/templates/multifile/index.ts
+++ b/src/livecodes/templates/multifile/index.ts
@@ -1,3 +1,4 @@
 import { blank } from './blank';
+import { react } from './react';
 
-export const multifileTemplates = [blank];
+export const multifileTemplates = [blank, react];
diff --git a/src/livecodes/templates/multifile/react.ts b/src/livecodes/templates/multifile/react.ts
new file mode 100644
index 0000000000..ea44bf242d
--- /dev/null
+++ b/src/livecodes/templates/multifile/react.ts
@@ -0,0 +1,198 @@
+import type { Template } from '../../models';
+
+export const react: Template = {
+  name: 'multifile-react',
+  title: window.deps.translateString('templates.multifile.react', 'React Starter'),
+  thumbnail: 'assets/templates/react.svg',
+  mainFile: 'index.html',
+  activeEditor: 'src/App.tsx',
+  files: [
+    {
+      filename: 'index.html',
+      language: 'html',
+      content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="src/main.tsx"></script>
+  </body>
+</html>
+`,
+    },
+    {
+      filename: 'src/main.tsx',
+      language: 'tsx',
+      content: `import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
+`,
+    },
+    {
+      filename: 'src/index.css',
+      language: 'css',
+      content: `:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+`,
+    },
+    {
+      filename: 'src/App.tsx',
+      language: 'tsx',
+      content: `import { useState } from 'react'
+import reactLogo from './assets/react.svg'
+import './App.css'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <div>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="logo react" alt="React logo" />
+        </a>
+      </div>
+      <h1>React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+      </div>
+      <p className="read-the-docs">
+        Click on the React logo to learn more
+      </p>
+    </>
+  )
+}
+
+export default App
+`,
+    },
+    {
+      filename: 'src/App.css',
+      language: 'css',
+      content: `#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+`,
+    },
+    {
+      filename: 'src/assets/react.svg',
+      language: 'svg',
+      content: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>`,
+    },
+  ],
+};
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index c107ba71db..37e9e1ea68 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1529,7 +1529,8 @@ export type TemplateName =
   | 'minizinc'
   | 'blockly'
   | 'diagrams'
-  | 'multifile-blank';
+  | 'multifile-blank'
+  | 'multifile-react';
 
 export interface Tool {
   name: 'console' | 'compiled' | 'tests';

From 3b09d1685946344902dc92bd1b942b036faf590a Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 14 Jan 2026 06:50:42 +0200
Subject: [PATCH 049/143] replace all file imports once

---
 src/livecodes/result/multi-file-result-page.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 49c1cb4495..a1731a1355 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -181,6 +181,8 @@ export const createMultiFileResultPage = async ({
       ...createImportMap(file.compiled, config, { external: externalModules }),
     };
 
+    const fileImports: Record<string, string> = {};
+
     getImports(file.compiled).forEach((mod) => {
       const resolvedImport = resolvePath(mod, './' + file.filename);
       if (
@@ -222,11 +224,12 @@ export const createMultiFileResultPage = async ({
         // mark it with null till all relative imports are collected
         codeImports[convertedImport] = null as any;
       }
-      file.compiled = replaceImports(file.compiled, config, {
-        importMap: {
-          [mod]: convertedImport,
-        },
-      });
+
+      fileImports[mod] = convertedImport;
+    });
+
+    file.compiled = replaceImports(file.compiled, config, {
+      importMap: fileImports,
     });
   });
 

From 5d8c1c3586a98bedd5a4b52733f24ae720b5265c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 14 Jan 2026 07:08:56 +0200
Subject: [PATCH 050/143] add multifile support for vue and svelte

---
 .../languages/svelte/lang-svelte-compiler.ts      | 15 ++++++++++++---
 src/livecodes/languages/vue/lang-vue-compiler.ts  | 13 ++++++++++---
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/livecodes/languages/svelte/lang-svelte-compiler.ts b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
index 8151f59fa9..669673c9e6 100644
--- a/src/livecodes/languages/svelte/lang-svelte-compiler.ts
+++ b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
@@ -73,12 +73,21 @@ import { getLanguageByAlias, getLanguageCustomSettings } from '../utils';
     };
   };
 
-  return (code, { config, language }) => {
-    const isMainFile = config.markup.language !== 'svelte-app' || language === 'svelte-app';
+  return (code, { config, language, options }) => {
+    const isMultiFileProject = Boolean(config.files.length);
+    const isMainFile = isMultiFileProject
+      ? false
+      : config.markup.language !== 'svelte-app' || language === 'svelte-app';
+    const filename = isMultiFileProject
+      ? options.filename
+      : isMainFile
+        ? MAIN_FILE
+        : SECONDARY_FILE;
+
     return compileSvelteSFC(code, {
       config,
       language: language as Language,
-      filename: isMainFile ? MAIN_FILE : SECONDARY_FILE,
+      filename,
     });
   };
 };
diff --git a/src/livecodes/languages/vue/lang-vue-compiler.ts b/src/livecodes/languages/vue/lang-vue-compiler.ts
index 212947a217..be1ad6c81c 100644
--- a/src/livecodes/languages/vue/lang-vue-compiler.ts
+++ b/src/livecodes/languages/vue/lang-vue-compiler.ts
@@ -362,10 +362,17 @@ import { getLanguageByAlias } from '../utils';
     return compiled;
   }
 
-  return async (code, { config, language }) => {
+  return async (code, { config, language, options }) => {
     try {
-      const isMainFile = config.markup.language !== 'vue-app' || language === 'vue-app';
-      const filename = isMainFile ? MAIN_FILE : SECONDARY_FILE;
+      const isMultiFileProject = Boolean(config.files.length);
+      const isMainFile = isMultiFileProject
+        ? false
+        : config.markup.language !== 'vue-app' || language === 'vue-app';
+      const filename = isMultiFileProject
+        ? options.filename
+        : isMainFile
+          ? MAIN_FILE
+          : SECONDARY_FILE;
       const result = await compileVueSFC(code, { config, filename });
 
       if (result) {

From 6060d62f145e66b479ed505674aed886ca43a4b3 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 14 Jan 2026 11:46:43 +0200
Subject: [PATCH 051/143] enable relative svg imports in multifile svelte

---
 .../languages/svelte/lang-svelte-compiler.ts  | 49 +++++++++++++++++--
 1 file changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/livecodes/languages/svelte/lang-svelte-compiler.ts b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
index 669673c9e6..a9dad82173 100644
--- a/src/livecodes/languages/svelte/lang-svelte-compiler.ts
+++ b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
@@ -1,5 +1,10 @@
 import { compileAllBlocks } from '../../compiler/compile-blocks';
-import { createImportMap, replaceSFCImports } from '../../compiler/import-map';
+import {
+  createImportMap,
+  getImports,
+  replaceImports,
+  replaceSFCImports,
+} from '../../compiler/import-map';
 import { getCompileResult } from '../../compiler/utils';
 import type { CompilerFunction, Config, Language } from '../../models';
 import { getErrorMessage } from '../../utils/utils';
@@ -73,7 +78,7 @@ import { getLanguageByAlias, getLanguageCustomSettings } from '../utils';
     };
   };
 
-  return (code, { config, language, options }) => {
+  return async (code, { config, language, options }) => {
     const isMultiFileProject = Boolean(config.files.length);
     const isMainFile = isMultiFileProject
       ? false
@@ -84,11 +89,49 @@ import { getLanguageByAlias, getLanguageCustomSettings } from '../utils';
         ? MAIN_FILE
         : SECONDARY_FILE;
 
-    return compileSvelteSFC(code, {
+    // handle svg imports
+    // Svelte compiler tries to inline them as dataUrls from file system, resulting in not found error
+    // this workaround converts ./foo.svg to ~/foo.svg, then restores it after compilation
+    let relativeImageImports = {};
+    if (isMultiFileProject) {
+      relativeImageImports = getImports(code)
+        .filter((mod) => (mod.startsWith('.') || mod.startsWith('/')) && mod.endsWith('.svg'))
+        .reduce((acc, mod) => {
+          let converted = mod;
+          if (converted.startsWith('/')) converted = '.' + converted;
+          if (!converted.startsWith('./')) converted = './' + converted; // ../foo -> ./../foo
+          return {
+            ...acc,
+            [mod]: converted.replace('./', '~/'),
+          };
+        }, {});
+    }
+
+    if (Object.keys(relativeImageImports).length) {
+      code = replaceImports(code, config, { importMap: relativeImageImports });
+    }
+
+    const compileResult = await compileSvelteSFC(code, {
       config,
       language: language as Language,
       filename,
     });
+
+    if (Object.keys(relativeImageImports).length) {
+      const restoredImports = Object.keys(relativeImageImports).reduce(
+        (acc, mod) => ({
+          ...acc,
+          [(relativeImageImports as any)[mod]]: mod,
+        }),
+        {},
+      );
+
+      compileResult.code = replaceImports(compileResult.code, config, {
+        importMap: restoredImports,
+      });
+    }
+
+    return compileResult;
   };
 };
 

From f381eef237a2a61793501812df1d892f4fba3b80 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 14 Jan 2026 11:53:49 +0200
Subject: [PATCH 052/143] add multifile vue and svelte templates

---
 .../i18n/locales/en/translation.lokalise.json |   8 +
 src/livecodes/i18n/locales/en/translation.ts  |   2 +
 src/livecodes/templates/multifile/index.ts    |   4 +-
 src/livecodes/templates/multifile/svelte.ts   | 188 ++++++++++++++++++
 src/livecodes/templates/multifile/vue.ts      | 184 +++++++++++++++++
 src/sdk/models.ts                             |   4 +-
 6 files changed, 388 insertions(+), 2 deletions(-)
 create mode 100644 src/livecodes/templates/multifile/svelte.ts
 create mode 100644 src/livecodes/templates/multifile/vue.ts

diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
index 8cbade6335..c45e344135 100644
--- a/src/livecodes/i18n/locales/en/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -2568,6 +2568,14 @@
     "notes": "",
     "translation": "React Starter"
   },
+  "templates.multifile.svelte": {
+    "notes": "",
+    "translation": "Svelte Starter"
+  },
+  "templates.multifile.vue": {
+    "notes": "",
+    "translation": "Vue Starter"
+  },
   "templates.noUserTemplates.desc": {
     "notes": "### <tag-1> ###\n<wbr  />\n\n",
     "translation": "You can save a project as a template from <tag-1></tag-1>(App&nbsp;menu&nbsp;&gt;&nbsp;Save&nbsp;as&nbsp;&gt; Template)."
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
index 1f496f9b31..613284a3b9 100644
--- a/src/livecodes/i18n/locales/en/translation.ts
+++ b/src/livecodes/i18n/locales/en/translation.ts
@@ -988,6 +988,8 @@ const translation = {
       heading: 'Multi-file Templates',
       loading: 'Loading multi-file templates...',
       react: 'React Starter',
+      svelte: 'Svelte Starter',
+      vue: 'Vue Starter',
     },
     noUserTemplates: {
       desc: 'You can save a project as a template from <1></1>(App&nbsp;menu&nbsp;&gt;&nbsp;Save&nbsp;as&nbsp;&gt; Template).',
diff --git a/src/livecodes/templates/multifile/index.ts b/src/livecodes/templates/multifile/index.ts
index 226d0e4b9d..f6ab581323 100644
--- a/src/livecodes/templates/multifile/index.ts
+++ b/src/livecodes/templates/multifile/index.ts
@@ -1,4 +1,6 @@
 import { blank } from './blank';
 import { react } from './react';
+import { svelte } from './svelte';
+import { vue } from './vue';
 
-export const multifileTemplates = [blank, react];
+export const multifileTemplates = [blank, react, vue, svelte];
diff --git a/src/livecodes/templates/multifile/svelte.ts b/src/livecodes/templates/multifile/svelte.ts
new file mode 100644
index 0000000000..264b3d7bf5
--- /dev/null
+++ b/src/livecodes/templates/multifile/svelte.ts
@@ -0,0 +1,188 @@
+import type { Template } from '../../models';
+
+export const svelte: Template = {
+  name: 'multifile-svelte',
+  title: window.deps.translateString('templates.multifile.svelte', 'Svelte Starter'),
+  thumbnail: 'assets/templates/svelte.svg',
+  mainFile: 'index.html',
+  activeEditor: 'src/App.svelte',
+  files: [
+    {
+      filename: 'index.html',
+      language: 'html',
+      content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="src/main.ts"></script>
+  </body>
+</html>
+`,
+    },
+    {
+      filename: 'src/main.ts',
+      language: 'typescript',
+      content: `import { mount } from "svelte";
+import "./app.css";
+import App from "./App.svelte";
+
+const app = mount(App, {
+  target: document.getElementById("app"),
+});
+
+export default app;
+`,
+    },
+    {
+      filename: 'src/app.css',
+      language: 'css',
+      content: `:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+`,
+    },
+    {
+      filename: 'src/App.svelte',
+      language: 'svelte',
+      content: `<script lang="ts">
+  import svelteLogo from './assets/svelte.svg';
+  import Counter from './lib/Counter.svelte';
+</script>
+
+<main>
+  <div>
+    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
+      <img src={svelteLogo} class="logo" alt="Svelte Logo" />
+    </a>
+  </div>
+  <h1>Svelte</h1>
+
+  <div class="card">
+    <Counter />
+  </div>
+
+  <p class="read-the-docs">
+    Click on the Svelte logo to learn more
+  </p>
+</main>
+
+<style>
+  .logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+  }
+  .logo:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+  }
+  .read-the-docs {
+    color: #888;
+  }
+</style>
+`,
+    },
+    {
+      filename: 'src/lib/Counter.svelte',
+      language: 'svelte',
+      content: `<script lang="ts">
+  let count: number = $state(0)
+  const increment = () => {
+    count += 1
+  }
+</script>
+
+<button onclick={increment}>
+  count is {count}
+</button>
+`,
+    },
+    {
+      filename: 'src/assets/svelte.svg',
+      language: 'svg',
+      content: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
+`,
+    },
+  ],
+};
diff --git a/src/livecodes/templates/multifile/vue.ts b/src/livecodes/templates/multifile/vue.ts
new file mode 100644
index 0000000000..f44c8dc67b
--- /dev/null
+++ b/src/livecodes/templates/multifile/vue.ts
@@ -0,0 +1,184 @@
+import type { Template } from '../../models';
+
+export const vue: Template = {
+  name: 'multifile-vue',
+  title: window.deps.translateString('templates.multifile.vue', 'Vue Starter'),
+  thumbnail: 'assets/templates/vue.svg',
+  mainFile: 'index.html',
+  activeEditor: 'src/components/HelloWorld.vue',
+  files: [
+    {
+      filename: 'index.html',
+      language: 'html',
+      content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="src/main.ts"></script>
+  </body>
+</html>
+`,
+    },
+    {
+      filename: 'src/main.ts',
+      language: 'typescript',
+      content: `import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')
+`,
+    },
+    {
+      filename: 'src/style.css',
+      language: 'css',
+      content: `:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+`,
+    },
+    {
+      filename: 'src/App.vue',
+      language: 'vue',
+      content: `<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<template>
+  <div>
+    <a href="https://vuejs.org/" target="_blank">
+      <img src="./assets/vue.svg" class="logo" alt="Vue logo" />
+    </a>
+  </div>
+  <HelloWorld msg="Vue" />
+</template>
+
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>
+`,
+    },
+    {
+      filename: 'src/components/HelloWorld.vue',
+      language: 'vue',
+      content: `<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+  </div>
+
+  <p class="read-the-docs">Click on the Vue logo to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
+`,
+    },
+    {
+      filename: 'src/assets/vue.svg',
+      language: 'svg',
+      content: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`,
+    },
+  ],
+};
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 37e9e1ea68..789426a1ba 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1530,7 +1530,9 @@ export type TemplateName =
   | 'blockly'
   | 'diagrams'
   | 'multifile-blank'
-  | 'multifile-react';
+  | 'multifile-react'
+  | 'multifile-vue'
+  | 'multifile-svelte';
 
 export interface Tool {
   name: 'console' | 'compiled' | 'tests';

From b058a3c70aa7fc23f66feca2c588bfb7c53bec69 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 15 Jan 2026 01:41:46 +0200
Subject: [PATCH 053/143] add multifile templates

---
 .../i18n/locales/en/translation.lokalise.json |  20 ++
 src/livecodes/i18n/locales/en/translation.ts  |   5 +
 src/livecodes/templates/multifile/index.ts    |  17 +-
 .../templates/multifile/javascript.ts         | 173 +++++++++++++++
 src/livecodes/templates/multifile/lit.ts      | 200 ++++++++++++++++++
 src/livecodes/templates/multifile/preact.ts   | 177 ++++++++++++++++
 src/livecodes/templates/multifile/solid.ts    | 182 ++++++++++++++++
 .../templates/multifile/typescript.ts         | 173 +++++++++++++++
 src/sdk/models.ts                             |   7 +-
 9 files changed, 952 insertions(+), 2 deletions(-)
 create mode 100644 src/livecodes/templates/multifile/javascript.ts
 create mode 100644 src/livecodes/templates/multifile/lit.ts
 create mode 100644 src/livecodes/templates/multifile/preact.ts
 create mode 100644 src/livecodes/templates/multifile/solid.ts
 create mode 100644 src/livecodes/templates/multifile/typescript.ts

diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
index c45e344135..faaf6ae312 100644
--- a/src/livecodes/i18n/locales/en/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -2560,18 +2560,38 @@
     "notes": "",
     "translation": "Multi-file Templates"
   },
+  "templates.multifile.javascript": {
+    "notes": "",
+    "translation": "JavaScript Starter"
+  },
+  "templates.multifile.lit": {
+    "notes": "",
+    "translation": "Lit Starter"
+  },
   "templates.multifile.loading": {
     "notes": "",
     "translation": "Loading multi-file templates..."
   },
+  "templates.multifile.preact": {
+    "notes": "",
+    "translation": "Preact Starter"
+  },
   "templates.multifile.react": {
     "notes": "",
     "translation": "React Starter"
   },
+  "templates.multifile.solid": {
+    "notes": "",
+    "translation": "Solid Starter"
+  },
   "templates.multifile.svelte": {
     "notes": "",
     "translation": "Svelte Starter"
   },
+  "templates.multifile.typescript": {
+    "notes": "",
+    "translation": "TypeScript Starter"
+  },
   "templates.multifile.vue": {
     "notes": "",
     "translation": "Vue Starter"
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
index 613284a3b9..7a647a6706 100644
--- a/src/livecodes/i18n/locales/en/translation.ts
+++ b/src/livecodes/i18n/locales/en/translation.ts
@@ -986,9 +986,14 @@ const translation = {
     multifile: {
       blank: 'Blank Project',
       heading: 'Multi-file Templates',
+      javascript: 'JavaScript Starter',
+      lit: 'Lit Starter',
       loading: 'Loading multi-file templates...',
+      preact: 'Preact Starter',
       react: 'React Starter',
+      solid: 'Solid Starter',
       svelte: 'Svelte Starter',
+      typescript: 'TypeScript Starter',
       vue: 'Vue Starter',
     },
     noUserTemplates: {
diff --git a/src/livecodes/templates/multifile/index.ts b/src/livecodes/templates/multifile/index.ts
index f6ab581323..6bf051c567 100644
--- a/src/livecodes/templates/multifile/index.ts
+++ b/src/livecodes/templates/multifile/index.ts
@@ -1,6 +1,21 @@
 import { blank } from './blank';
+import { javascript } from './javascript';
+import { lit } from './lit';
+import { preact } from './preact';
 import { react } from './react';
+import { solid } from './solid';
 import { svelte } from './svelte';
+import { typescript } from './typescript';
 import { vue } from './vue';
 
-export const multifileTemplates = [blank, react, vue, svelte];
+export const multifileTemplates = [
+  blank,
+  javascript,
+  typescript,
+  react,
+  vue,
+  preact,
+  svelte,
+  solid,
+  lit,
+];
diff --git a/src/livecodes/templates/multifile/javascript.ts b/src/livecodes/templates/multifile/javascript.ts
new file mode 100644
index 0000000000..a29c158dd5
--- /dev/null
+++ b/src/livecodes/templates/multifile/javascript.ts
@@ -0,0 +1,173 @@
+import type { Template } from '../../models';
+
+export const javascript: Template = {
+  name: 'multifile-javascript',
+  title: window.deps.translateString('templates.multifile.javascript', 'JavaScript Starter'),
+  thumbnail: 'assets/templates/javascript.svg',
+  mainFile: 'index.html',
+  activeEditor: 'src/main.js',
+  files: [
+    {
+      filename: 'index.html',
+      language: 'html',
+      content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JavaScript</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="src/main.js"></script>
+  </body>
+</html>
+`,
+    },
+    {
+      filename: 'src/main.js',
+      language: 'javascript',
+      content: `import './style.css';
+import javascriptLogo from './javascript.svg';
+import { setupCounter } from './counter.js';
+
+document.querySelector('#app').innerHTML = \`
+  <div>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
+      <img src="\${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
+    </a>
+    <h1>Hello JavaScript!</h1>
+    <div class="card">
+      <button id="counter" type="button"></button>
+    </div>
+    <p class="read-the-docs">
+      Click on the JavaScript logo to learn more
+    </p>
+  </div>
+\`;
+
+setupCounter(document.querySelector('#counter'));
+`,
+    },
+    {
+      filename: 'src/style.css',
+      language: 'css',
+      content: `:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #f7df1eaa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+`,
+    },
+    {
+      filename: 'src/counter.js',
+      language: 'javascript',
+      content: `export function setupCounter(element) {
+  let counter = 0;
+  const setCounter = (count) => {
+    counter = count;
+    element.innerHTML = \`count is \${counter}\`;
+  };
+  element.addEventListener('click', () => setCounter(counter + 1));
+  setCounter(0);
+}
+`,
+    },
+    {
+      filename: 'src/javascript.svg',
+      language: 'svg',
+      content: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>`,
+    },
+  ],
+};
diff --git a/src/livecodes/templates/multifile/lit.ts b/src/livecodes/templates/multifile/lit.ts
new file mode 100644
index 0000000000..643dbb22ed
--- /dev/null
+++ b/src/livecodes/templates/multifile/lit.ts
@@ -0,0 +1,200 @@
+import type { Template } from '../../models';
+
+export const lit: Template = {
+  name: 'multifile-lit',
+  title: window.deps.translateString('templates.multifile.lit', 'Lit Starter'),
+  thumbnail: 'assets/templates/lit.svg',
+  mainFile: 'index.html',
+  activeEditor: 'src/my-element.js',
+  files: [
+    {
+      filename: 'index.html',
+      language: 'html',
+      content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lit</title>
+    <link rel="stylesheet" href="./src/index.css" />
+    <script type="module" src="src/my-element.js"></script>
+  </head>
+  <body>
+    <my-element>
+      <h1>Lit</h1>
+    </my-element>
+  </body>
+</html>
+`,
+    },
+    {
+      filename: 'src/index.css',
+      language: 'css',
+      content: `:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+}
+`,
+    },
+    {
+      filename: 'src/my-element.js',
+      language: 'javascript',
+      content: `import { LitElement, css, html } from "lit";
+import litLogo from "./assets/lit.svg";
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class MyElement extends LitElement {
+  static get properties() {
+    return {
+      /**
+       * Copy for the read the docs hint.
+       */
+      docsHint: { type: String },
+
+      /**
+       * The number of times the button has been clicked.
+       */
+      count: { type: Number },
+    };
+  }
+
+  constructor() {
+    super();
+    this.docsHint = "Click on the Lit logo to learn more";
+    this.count = 0;
+  }
+
+  render() {
+    return html\`
+      <div>
+        <a href="https://lit.dev" target="_blank">
+          <img src=\${litLogo} class="logo" alt="Lit logo" />
+        </a>
+      </div>
+      <slot></slot>
+      <div class="card">
+        <button @click=\${this._onClick} part="button">
+          count is \${this.count}
+        </button>
+      </div>
+      <p class="read-the-docs">\${this.docsHint}</p>
+    \`;
+  }
+
+  _onClick() {
+    this.count++;
+  }
+
+  static get styles() {
+    return css\`
+      :host {
+        max-width: 1280px;
+        margin: 0 auto;
+        padding: 2rem;
+        text-align: center;
+      }
+
+      .logo {
+        height: 6em;
+        padding: 1.5em;
+        will-change: filter;
+        transition: filter 300ms;
+      }
+      .logo:hover {
+        filter: drop-shadow(0 0 2em #325cffaa);
+      }
+
+      .card {
+        padding: 2em;
+      }
+
+      .read-the-docs {
+        color: #888;
+      }
+
+      a {
+        font-weight: 500;
+        color: #646cff;
+        text-decoration: inherit;
+      }
+      a:hover {
+        color: #535bf2;
+      }
+
+      ::slotted(h1) {
+        font-size: 3.2em;
+        line-height: 1.1;
+      }
+
+      button {
+        border-radius: 8px;
+        border: 1px solid transparent;
+        padding: 0.6em 1.2em;
+        font-size: 1em;
+        font-weight: 500;
+        font-family: inherit;
+        background-color: #1a1a1a;
+        cursor: pointer;
+        transition: border-color 0.25s;
+      }
+      button:hover {
+        border-color: #646cff;
+      }
+      button:focus,
+      button:focus-visible {
+        outline: 4px auto -webkit-focus-ring-color;
+      }
+
+      @media (prefers-color-scheme: light) {
+        a:hover {
+          color: #747bff;
+        }
+        button {
+          background-color: #f9f9f9;
+        }
+      }
+    \`;
+  }
+}
+
+window.customElements.define("my-element", MyElement);
+`,
+    },
+    {
+      filename: 'src/assets/lit.svg',
+      language: 'svg',
+      content: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="25.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 320"><path fill="#00E8FF" d="m64 192l25.926-44.727l38.233-19.114l63.974 63.974l10.833 61.754L192 320l-64-64l-38.074-25.615z"></path><path fill="#283198" d="M128 256V128l64-64v128l-64 64ZM0 256l64 64l9.202-60.602L64 192l-37.542 23.71L0 256Z"></path><path fill="#324FFF" d="M64 192V64l64-64v128l-64 64Zm128 128V192l64-64v128l-64 64ZM0 256V128l64 64l-64 64Z"></path><path fill="#0FF" d="M64 320V192l64 64z"></path></svg>
+`,
+    },
+  ],
+};
diff --git a/src/livecodes/templates/multifile/preact.ts b/src/livecodes/templates/multifile/preact.ts
new file mode 100644
index 0000000000..3cf2fbcb10
--- /dev/null
+++ b/src/livecodes/templates/multifile/preact.ts
@@ -0,0 +1,177 @@
+import type { Template } from '../../models';
+
+export const preact: Template = {
+  name: 'multifile-preact',
+  title: window.deps.translateString('templates.multifile.preact', 'Preact Starter'),
+  thumbnail: 'assets/templates/preact.svg',
+  mainFile: 'index.html',
+  activeEditor: 'src/app.jsx',
+  files: [
+    {
+      filename: 'index.html',
+      language: 'html',
+      content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Preact</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="src/main.jsx"></script>
+  </body>
+</html>
+`,
+    },
+    {
+      filename: 'src/main.jsx',
+      language: 'tsx',
+      content: `/** @jsxImportSource preact */
+import { render } from 'preact';
+import './index.css';
+import { App } from './app.jsx';
+
+render(<App />, document.getElementById('app'));
+`,
+    },
+    {
+      filename: 'src/index.css',
+      language: 'css',
+      content: `:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+`,
+    },
+    {
+      filename: 'src/app.jsx',
+      language: 'jsx',
+      content: `/** @jsxImportSource preact */
+import { useState } from 'preact/hooks';
+import preactLogo from './assets/preact.svg';
+import './app.css';
+
+export function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <>
+      <div>
+        <a href="https://preactjs.com" target="_blank">
+          <img src={preactLogo} class="logo" alt="Preact logo" />
+        </a>
+      </div>
+      <h1>Preact</h1>
+      <div class="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+      </div>
+      <p class="read-the-docs">
+        Click on the Preact logo to learn more
+      </p>
+    </>
+  );
+}
+`,
+    },
+    {
+      filename: 'src/app.css',
+      language: 'css',
+      content: `#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #673ab8aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+`,
+    },
+    {
+      filename: 'src/assets/preact.svg',
+      language: 'svg',
+      content: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"></path><path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"></path><path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"></path><path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"></path></svg>
+`,
+    },
+  ],
+};
diff --git a/src/livecodes/templates/multifile/solid.ts b/src/livecodes/templates/multifile/solid.ts
new file mode 100644
index 0000000000..227b19ce0d
--- /dev/null
+++ b/src/livecodes/templates/multifile/solid.ts
@@ -0,0 +1,182 @@
+import type { Template } from '../../models';
+
+export const solid: Template = {
+  name: 'multifile-solid',
+  title: window.deps.translateString('templates.multifile.solid', 'Solid Starter'),
+  thumbnail: 'assets/templates/solid.svg',
+  mainFile: 'index.html',
+  activeEditor: 'src/App.tsx',
+  files: [
+    {
+      filename: 'index.html',
+      language: 'html',
+      content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Solid + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="src/index.tsx"></script>
+  </body>
+</html>
+`,
+    },
+    {
+      filename: 'src/index.tsx',
+      language: 'solid.tsx',
+      content: `/* @refresh reload */
+import { render } from 'solid-js/web'
+import './index.css'
+import App from './App.tsx'
+
+const root = document.getElementById('root')
+
+render(() => <App />, root!)
+`,
+    },
+    {
+      filename: 'src/index.css',
+      language: 'css',
+      content: `:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+`,
+    },
+    {
+      filename: 'src/App.tsx',
+      language: 'solid.tsx',
+      content: `import { createSignal } from "solid-js";
+import solidLogo from "./assets/solid.svg";
+import "./App.css";
+
+function App() {
+  const [count, setCount] = createSignal(0);
+
+  return (
+    <>
+      <div>
+        <a href="https://solidjs.com" target="_blank">
+          <img src={solidLogo} class="logo" alt="Solid logo" />
+        </a>
+      </div>
+      <h1>Solid</h1>
+      <div class="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count()}
+        </button>
+      </div>
+      <p class="read-the-docs">
+        Click on the Solid logo to learn more
+      </p>
+    </>
+  );
+}
+
+export default App;
+`,
+    },
+    {
+      filename: 'src/App.css',
+      language: 'css',
+      content: `#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+`,
+    },
+    {
+      filename: 'src/assets/solid.svg',
+      language: 'svg',
+      content: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
+`,
+    },
+  ],
+};
diff --git a/src/livecodes/templates/multifile/typescript.ts b/src/livecodes/templates/multifile/typescript.ts
new file mode 100644
index 0000000000..5c58704234
--- /dev/null
+++ b/src/livecodes/templates/multifile/typescript.ts
@@ -0,0 +1,173 @@
+import type { Template } from '../../models';
+
+export const typescript: Template = {
+  name: 'multifile-typescript',
+  title: window.deps.translateString('templates.multifile.typescript', 'TypeScript Starter'),
+  thumbnail: 'assets/templates/typescript.svg',
+  mainFile: 'index.html',
+  activeEditor: 'src/main.ts',
+  files: [
+    {
+      filename: 'index.html',
+      language: 'html',
+      content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TypeScript</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="src/main.ts"></script>
+  </body>
+</html>
+`,
+    },
+    {
+      filename: 'src/main.ts',
+      language: 'typescript',
+      content: `import './style.css'
+import typescriptLogo from './typescript.svg'
+import { setupCounter } from './counter.ts'
+
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = \`
+  <div>
+    <a href="https://www.typescriptlang.org/" target="_blank">
+      <img src="\${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
+    </a>
+    <h1>TypeScript</h1>
+    <div class="card">
+      <button id="counter" type="button"></button>
+    </div>
+    <p class="read-the-docs">
+      Click on the TypeScript logos to learn more
+    </p>
+  </div>
+\`
+
+setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
+`,
+    },
+    {
+      filename: 'src/style.css',
+      language: 'css',
+      content: `:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+`,
+    },
+    {
+      filename: 'src/counter.ts',
+      language: 'typescript',
+      content: `export function setupCounter(element: HTMLButtonElement) {
+  let counter = 0
+  const setCounter = (count: number) => {
+    counter = count
+    element.innerHTML = \`count is \${counter}\`
+  }
+  element.addEventListener('click', () => setCounter(counter + 1))
+  setCounter(0)
+}`,
+    },
+    {
+      filename: 'src/typescript.svg',
+      language: 'svg',
+      content: `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>
+`,
+    },
+  ],
+};
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 789426a1ba..342d850aa4 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1530,9 +1530,14 @@ export type TemplateName =
   | 'blockly'
   | 'diagrams'
   | 'multifile-blank'
+  | 'multifile-javascript'
+  | 'multifile-typescript'
   | 'multifile-react'
   | 'multifile-vue'
-  | 'multifile-svelte';
+  | 'multifile-preact'
+  | 'multifile-svelte'
+  | 'multifile-solid'
+  | 'multifile-lit';
 
 export interface Tool {
   name: 'console' | 'compiled' | 'tests';

From ffa2e2bb45f038620d62b4316eca79cd90802f04 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 16 Jan 2026 02:09:56 +0200
Subject: [PATCH 054/143] fix saved status when loading multifile projects

---
 src/livecodes/core.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index abfa136d5c..af46ac3e9c 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -749,10 +749,6 @@ const createEditors = async (config: Config) => {
       editors[editorId] = editor;
       editorIds.push(editorId);
     }
-    setTimeout(() => {
-      setSavedStatus();
-      changingContent = false;
-    }, 300);
   } else {
     const markupEditor = await createEditor(markupOptions);
     const styleEditor = await createEditor(styleOptions);
@@ -800,8 +796,11 @@ const createEditors = async (config: Config) => {
       if (getLanguageEditorId(file.language!) !== 'script') continue;
       const editor = editors[editorId];
       setTimeout(() => {
+        changingContent = true;
         editor.setValue(editor.getValue());
-      }, 100);
+        setSavedStatus();
+        changingContent = false;
+      }, 200);
     }
   }
 };
@@ -5608,6 +5607,7 @@ const importExternalContent = async (options: {
       );
     }
   }
+
   if (importUrl) {
     let validImportUrl = importUrl;
     if (importUrl.startsWith('http') || importUrl.startsWith('data')) {

From 898ff8f8968c0ba8e9389d204d0aff210a84b2dc Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 16 Jan 2026 15:00:16 +0200
Subject: [PATCH 055/143] feat(Config): add `fileLanguages` config option

---
 src/livecodes/config/config.ts             |  1 +
 src/livecodes/config/default-config.ts     |  1 +
 src/livecodes/config/utils.ts              |  2 +-
 src/livecodes/config/validate-config.ts    | 18 ++++++++++++++++--
 src/livecodes/core.ts                      | 19 ++++++++++---------
 src/livecodes/languages/utils.ts           |  5 ++++-
 src/livecodes/templates/multifile/solid.ts |  1 +
 src/sdk/models.ts                          | 15 +++++++++++++--
 8 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/src/livecodes/config/config.ts b/src/livecodes/config/config.ts
index 764807224e..3470506c3c 100644
--- a/src/livecodes/config/config.ts
+++ b/src/livecodes/config/config.ts
@@ -34,6 +34,7 @@ export const getContentConfig = (config: Config | ContentConfig): ContentConfig
     script: config.script,
     files: config.files,
     mainFile: config.mainFile,
+    fileLanguages: config.fileLanguages,
     stylesheets: config.stylesheets,
     scripts: config.scripts,
     cssPreset: config.cssPreset,
diff --git a/src/livecodes/config/default-config.ts b/src/livecodes/config/default-config.ts
index 7f08256b90..effdddbf28 100644
--- a/src/livecodes/config/default-config.ts
+++ b/src/livecodes/config/default-config.ts
@@ -39,6 +39,7 @@ export const defaultConfig: Config = {
   },
   mainFile: undefined,
   files: [],
+  fileLanguages: {},
   stylesheets: [],
   scripts: [],
   cssPreset: '',
diff --git a/src/livecodes/config/utils.ts b/src/livecodes/config/utils.ts
index b8c5231ca9..f0074f40b0 100644
--- a/src/livecodes/config/utils.ts
+++ b/src/livecodes/config/utils.ts
@@ -38,7 +38,7 @@ export const getValidFileName = (
   if ([':', '*', '?', '"', '<', '>', '|'].some((c) => name.includes(c))) {
     return { error: 'invalid name' };
   }
-  const language = getFileLanguage(name);
+  const language = getFileLanguage(name, config.fileLanguages);
   if (!language || !supportsMultiFile(language) || !languageIsEnabled(language, config as Config)) {
     return { error: 'invalid type' };
   }
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
index 06cd29bee5..4be06385bb 100644
--- a/src/livecodes/config/validate-config.ts
+++ b/src/livecodes/config/validate-config.ts
@@ -9,7 +9,7 @@ import type {
   Tool,
   ToolsPaneStatus,
 } from '../models';
-import { getFileExtension, handleSlash, removeDuplicates } from '../utils';
+import { getFileExtension, handleSlash, objectFilter, removeDuplicates } from '../utils';
 import { defaultConfig } from './default-config';
 import { getValidFileName, isEditorId } from './utils';
 
@@ -100,7 +100,12 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
             return typeof name === 'string' ? name : '';
           })(),
           content: is(x.content, 'string') ? x.content ?? '' : '',
-          language: getLanguageByAlias(x.language || getFileExtension(x.filename)) || 'html',
+          language:
+            getLanguageByAlias(
+              x.language ||
+                (validFileLanguages as any)[getFileExtension(x.filename)] ||
+                getFileExtension(x.filename),
+            ) || 'html',
           ...(is(x.hidden, 'boolean') ? { hidden: x.hidden } : {}),
           ...(is(x.position, 'object') ? { position: x.position } : {}),
           ...(is(x.foldedLines, 'array', 'object') && x.foldedLines?.every(isFoldedLines)
@@ -109,6 +114,14 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
         }
       : undefined;
 
+  const validatefileLanguages = (fileLanguages: Record<string, string> = {}) =>
+    objectFilter(
+      fileLanguages,
+      (v, k) => getLanguageByAlias(k) != null && getLanguageByAlias(v) != null,
+    ) as Partial<Record<Language, Language>>;
+
+  const validFileLanguages = validatefileLanguages(config.fileLanguages);
+
   const validateActiveEditor = (config: Partial<Config>) =>
     includes([...editorIds, ...(config.files || []).map((f) => f.filename)], config.activeEditor);
 
@@ -193,6 +206,7 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
         }
       : {}),
     ...(is(config.mainFile, 'string') ? { mainFile: config.mainFile } : {}),
+    ...(is(config.fileLanguages, 'object') ? { fileLanguages: validFileLanguages } : {}),
     ...(is(config.tools, 'object')
       ? { tools: validateToolsProps(config.tools as Config['tools']) }
       : {}),
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index af46ac3e9c..440f9b13b0 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -516,9 +516,10 @@ const addFile = async (
   filename: string,
   editorOptions: Omit<EditorOptions, 'container' | 'editorId' | 'language' | 'value'>,
 ) => {
-  const validName = checkFileName(filename, getConfig());
+  const config = getConfig();
+  const validName = checkFileName(filename, config);
   if (!validName) return false;
-  const fileLanguage = getFileLanguage(validName) || 'javascript';
+  const fileLanguage = getFileLanguage(validName, config.fileLanguages) || 'javascript';
   const container = createEditorUI(validName);
   const editor = await createEditor({
     ...editorOptions,
@@ -528,7 +529,6 @@ const addFile = async (
     language: fileLanguage,
     value: '',
   });
-  const config = getConfig();
   setConfig({
     ...config,
     activeEditor: validName,
@@ -554,11 +554,11 @@ const addFile = async (
 };
 
 const renameFile = (filename: string, newName: string) => {
-  const validName = checkFileName(newName, getConfig(), filename);
+  const config = getConfig();
+  const validName = checkFileName(newName, config, filename);
   if (!validName) return false;
   if (filename === validName) return true;
-  const language = getFileLanguage(validName)!;
-  const config = getConfig();
+  const language = getFileLanguage(validName, config.fileLanguages)!;
   setConfig({
     ...config,
     activeEditor: validName,
@@ -1158,6 +1158,7 @@ const registerRun = (editorId: EditorId, editors: Editors) => {
 };
 
 const updateCompiledCode = () => {
+  const config = getConfig();
   const cache = getCache();
   const getCompiledLanguage = (editorId: EditorId) => {
     const defaultLang: { [key in EditorId]: Language } = {
@@ -1170,7 +1171,7 @@ const updateCompiledCode = () => {
       getLanguageCompiler(srcLang)?.compiledCodeLanguage ||
       defaultLang[editorId] ||
       defaultLang[getLanguageSpecs(srcLang)?.editor || ''] ||
-      getFileLanguage(editorId) ||
+      getFileLanguage(editorId, config.fileLanguages) ||
       'html';
     return {
       language: lang,
@@ -1187,13 +1188,13 @@ const updateCompiledCode = () => {
     ),
   };
   if (!toolsPane || !toolsPane.compiled) return;
-  const editorId = getConfig().activeEditor;
+  const editorId = config.activeEditor;
   const active = compiledLanguages[editorId || ''];
   if (!editorId || !active) return;
   const src = getSource(editorId, cache);
   if (!src) return;
   let compiledCode = src.modified || src.compiled || '';
-  if (editorId === 'script' && getConfig().script.language.startsWith('php')) {
+  if (editorId === 'script' && config.script.language.startsWith('php')) {
     compiledCode = phpHelper({ code: compiledCode });
   }
   toolsPane?.compiled?.update(
diff --git a/src/livecodes/languages/utils.ts b/src/livecodes/languages/utils.ts
index 6c467cc913..473c851322 100644
--- a/src/livecodes/languages/utils.ts
+++ b/src/livecodes/languages/utils.ts
@@ -13,7 +13,10 @@ export const getLanguageByAlias = (alias: string = ''): Language | undefined =>
   )?.name;
 };
 
-export const getFileLanguage = (filename: string) => getLanguageByAlias(filename.split('.').pop());
+export const getFileLanguage = (filename: string, fileLanguages: Record<string, string> = {}) => {
+  const extension = filename.split('.').pop()?.toLowerCase() || '';
+  return getLanguageByAlias(fileLanguages[extension] || extension);
+};
 
 export const supportsMultiFile = (language: Language) =>
   window.deps.languages.find((l) => l.name === language)?.multiFileSupport === true;
diff --git a/src/livecodes/templates/multifile/solid.ts b/src/livecodes/templates/multifile/solid.ts
index 227b19ce0d..ceb1aec867 100644
--- a/src/livecodes/templates/multifile/solid.ts
+++ b/src/livecodes/templates/multifile/solid.ts
@@ -6,6 +6,7 @@ export const solid: Template = {
   thumbnail: 'assets/templates/solid.svg',
   mainFile: 'index.html',
   activeEditor: 'src/App.tsx',
+  fileLanguages: { jsx: 'solid', tsx: 'solid.tsx' },
   files: [
     {
       filename: 'index.html',
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 342d850aa4..a9a259983d 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -406,7 +406,7 @@ export interface EmbedOptions {
 export interface Config extends ContentConfig, AppConfig, UserConfig {}
 
 export interface SingleFileConfig
-  extends Omit<ContentConfig, 'files' | 'mainFile'>,
+  extends Omit<ContentConfig, 'files' | 'mainFile' | 'fileLanguages'>,
     AppConfig,
     UserConfig {}
 
@@ -503,12 +503,22 @@ export interface ContentConfig {
    * List of source files.
    */
   files: SourceFile[];
+
   /**
    * The name of the main markup file.
    * @default "index.html"
    */
   mainFile?: string;
 
+  /**
+   * An object with file extensions and languages to use for them.
+   * This overrides the default mapping of file extensions to languages.
+   * It is ignored for files that have the `language` property explicitly set (see {@link Config.files}).
+   * @example
+   * { jsx: "solid", tsx: "solid.tsx" }
+   */
+  fileLanguages?: Partial<Record<Language, Language>>;
+
   /**
    * List of URLs for [external stylesheets](https://livecodes.io/docs/features/external-resources) to add to the [result page](https://livecodes.io/docs/features/result).
    */
@@ -615,6 +625,7 @@ export type MultiFileContentConfig = Pick<
   | 'activeEditor'
   | 'files'
   | 'mainFile'
+  | 'fileLanguages'
   | 'languages'
   | 'processors'
   | 'customSettings'
@@ -1447,7 +1458,7 @@ export interface Compilers {
 
 export type Template = (
   | Pick<ContentConfig, 'title' | 'markup' | 'style' | 'script'>
-  | Pick<ContentConfig, 'title' | 'mainFile' | 'files'>
+  | Pick<ContentConfig, 'title' | 'mainFile' | 'files' | 'fileLanguages'>
 ) &
   Partial<ContentConfig> & {
     name: TemplateName;

From a570e8f78ee4a6fcd0d59c39ebe7f932b340277c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 16 Jan 2026 19:59:09 +0200
Subject: [PATCH 056/143] fixed-height modals

---
 src/livecodes/UI/import.ts          | 2 +-
 src/livecodes/core.ts               | 2 +-
 src/livecodes/models.ts             | 2 +-
 src/livecodes/styles/inc-modal.scss | 4 ++++
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/livecodes/UI/import.ts b/src/livecodes/UI/import.ts
index 763e9defc8..59e1dafd69 100644
--- a/src/livecodes/UI/import.ts
+++ b/src/livecodes/UI/import.ts
@@ -271,6 +271,6 @@ export const createImportUI = ({
     showScreen('open');
   });
 
-  modal.show(importContainer, { isAsync: true, autoFocus: false });
+  modal.show(importContainer, { isAsync: true, autoFocus: false, size: 'large-fixed' });
   getUrlImportInput(importContainer).focus();
 };
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 440f9b13b0..ef306a25d7 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -3758,7 +3758,7 @@ const handleNew = () => {
     }
 
     setTimeout(() => UI.getStarterTemplatesTab(templatesContainer)?.click());
-    modal.show(templatesContainer, { isAsync: true });
+    modal.show(templatesContainer, { isAsync: true, size: 'large-fixed' });
   };
 
   eventsManager.addEventListener(
diff --git a/src/livecodes/models.ts b/src/livecodes/models.ts
index 9fbb7d2e8d..e15986a633 100644
--- a/src/livecodes/models.ts
+++ b/src/livecodes/models.ts
@@ -3,7 +3,7 @@ import type { Config, SourceFile } from '../sdk/models';
 export type * from '../sdk/models';
 
 export interface ModalOptions {
-  size?: 'large' | 'small' | 'full';
+  size?: 'large' | 'small' | 'full' | 'large-fixed';
   closeButton?: boolean;
   isAsync?: boolean;
   onClose?: () => void;
diff --git a/src/livecodes/styles/inc-modal.scss b/src/livecodes/styles/inc-modal.scss
index 9704789904..fad43d7835 100644
--- a/src/livecodes/styles/inc-modal.scss
+++ b/src/livecodes/styles/inc-modal.scss
@@ -64,6 +64,10 @@
     min-height: 60vh;
   }
 
+  &.large-fixed {
+    height: 85vh;
+  }
+
   #modal-container {
     height: 100%;
     margin-top: 2rem;

From d3edaffc35b0dea40b498ea81b5f55e7d44b10c6 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 16 Jan 2026 22:20:33 +0200
Subject: [PATCH 057/143] edit templates

---
 src/livecodes/UI/command-menu-actions.ts      | 28 +++++++++++++------
 .../i18n/locales/en/translation.lokalise.json | 18 ++++++------
 src/livecodes/i18n/locales/en/translation.ts  | 18 ++++++------
 src/livecodes/templates/multifile/blank.ts    |  2 +-
 .../templates/multifile/javascript.ts         |  2 +-
 src/livecodes/templates/multifile/lit.ts      |  2 +-
 src/livecodes/templates/multifile/preact.ts   |  2 +-
 src/livecodes/templates/multifile/react.ts    |  2 +-
 src/livecodes/templates/multifile/solid.ts    |  2 +-
 src/livecodes/templates/multifile/svelte.ts   |  2 +-
 .../templates/multifile/typescript.ts         |  2 +-
 src/livecodes/templates/multifile/vue.ts      |  2 +-
 .../templates/starter/preact-starter.ts       |  4 +--
 13 files changed, 49 insertions(+), 37 deletions(-)

diff --git a/src/livecodes/UI/command-menu-actions.ts b/src/livecodes/UI/command-menu-actions.ts
index 8626ff3093..5e45f9bfee 100644
--- a/src/livecodes/UI/command-menu-actions.ts
+++ b/src/livecodes/UI/command-menu-actions.ts
@@ -326,14 +326,26 @@ export const getCommandMenuActions = ({
         'minizinc',
         'blockly',
         'diagrams',
-      ).map((template) => ({
-        id: 'Starter template: ' + template,
-        title: window.deps.translateString('commandMenu.template', 'Template') + ': ' + template,
-        content: getContent('Template: ' + template),
-        handler: async () => {
-          await loadStarterTemplate(template);
-        },
-      })),
+        'multifile-blank',
+        'multifile-javascript',
+        'multifile-typescript',
+        'multifile-react',
+        'multifile-vue',
+        'multifile-preact',
+        'multifile-svelte',
+        'multifile-solid',
+        'multifile-lit',
+      ).map((template) => {
+        const label = template.startsWith('multifile-') ? template.replace('-', ' ') : template;
+        return {
+          id: 'Starter template: ' + template,
+          title: window.deps.translateString('commandMenu.template', 'Template') + ': ' + label,
+          content: getContent('Template: ' + label),
+          handler: async () => {
+            await loadStarterTemplate(template);
+          },
+        };
+      }),
     },
     {
       id: 'Run',
diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
index faaf6ae312..d58489cf6b 100644
--- a/src/livecodes/i18n/locales/en/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -2554,7 +2554,7 @@
   },
   "templates.multifile.blank": {
     "notes": "",
-    "translation": "Blank Project"
+    "translation": "Blank Template"
   },
   "templates.multifile.heading": {
     "notes": "",
@@ -2562,11 +2562,11 @@
   },
   "templates.multifile.javascript": {
     "notes": "",
-    "translation": "JavaScript Starter"
+    "translation": "JavaScript Template"
   },
   "templates.multifile.lit": {
     "notes": "",
-    "translation": "Lit Starter"
+    "translation": "Lit Template"
   },
   "templates.multifile.loading": {
     "notes": "",
@@ -2574,27 +2574,27 @@
   },
   "templates.multifile.preact": {
     "notes": "",
-    "translation": "Preact Starter"
+    "translation": "Preact Template"
   },
   "templates.multifile.react": {
     "notes": "",
-    "translation": "React Starter"
+    "translation": "React Template"
   },
   "templates.multifile.solid": {
     "notes": "",
-    "translation": "Solid Starter"
+    "translation": "Solid Template"
   },
   "templates.multifile.svelte": {
     "notes": "",
-    "translation": "Svelte Starter"
+    "translation": "Svelte Template"
   },
   "templates.multifile.typescript": {
     "notes": "",
-    "translation": "TypeScript Starter"
+    "translation": "TypeScript Template"
   },
   "templates.multifile.vue": {
     "notes": "",
-    "translation": "Vue Starter"
+    "translation": "Vue Template"
   },
   "templates.noUserTemplates.desc": {
     "notes": "### <tag-1> ###\n<wbr  />\n\n",
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
index 7a647a6706..10c510dbcf 100644
--- a/src/livecodes/i18n/locales/en/translation.ts
+++ b/src/livecodes/i18n/locales/en/translation.ts
@@ -984,17 +984,17 @@ const translation = {
   templates: {
     heading: 'New Project',
     multifile: {
-      blank: 'Blank Project',
+      blank: 'Blank Template',
       heading: 'Multi-file Templates',
-      javascript: 'JavaScript Starter',
-      lit: 'Lit Starter',
+      javascript: 'JavaScript Template',
+      lit: 'Lit Template',
       loading: 'Loading multi-file templates...',
-      preact: 'Preact Starter',
-      react: 'React Starter',
-      solid: 'Solid Starter',
-      svelte: 'Svelte Starter',
-      typescript: 'TypeScript Starter',
-      vue: 'Vue Starter',
+      preact: 'Preact Template',
+      react: 'React Template',
+      solid: 'Solid Template',
+      svelte: 'Svelte Template',
+      typescript: 'TypeScript Template',
+      vue: 'Vue Template',
     },
     noUserTemplates: {
       desc: 'You can save a project as a template from <1></1>(App&nbsp;menu&nbsp;&gt;&nbsp;Save&nbsp;as&nbsp;&gt; Template).',
diff --git a/src/livecodes/templates/multifile/blank.ts b/src/livecodes/templates/multifile/blank.ts
index 70505c9f70..559f5c0106 100644
--- a/src/livecodes/templates/multifile/blank.ts
+++ b/src/livecodes/templates/multifile/blank.ts
@@ -2,7 +2,7 @@ import type { Template } from '../../models';
 
 export const blank: Template = {
   name: 'multifile-blank',
-  title: window.deps.translateString('templates.multifile.blank', 'Blank Project'),
+  title: window.deps.translateString('templates.multifile.blank', 'Blank Template'),
   thumbnail: 'assets/templates/blank.svg',
   mainFile: 'index.html',
   activeEditor: 'index.html',
diff --git a/src/livecodes/templates/multifile/javascript.ts b/src/livecodes/templates/multifile/javascript.ts
index a29c158dd5..c49aab69c9 100644
--- a/src/livecodes/templates/multifile/javascript.ts
+++ b/src/livecodes/templates/multifile/javascript.ts
@@ -2,7 +2,7 @@ import type { Template } from '../../models';
 
 export const javascript: Template = {
   name: 'multifile-javascript',
-  title: window.deps.translateString('templates.multifile.javascript', 'JavaScript Starter'),
+  title: window.deps.translateString('templates.multifile.javascript', 'JavaScript Template'),
   thumbnail: 'assets/templates/javascript.svg',
   mainFile: 'index.html',
   activeEditor: 'src/main.js',
diff --git a/src/livecodes/templates/multifile/lit.ts b/src/livecodes/templates/multifile/lit.ts
index 643dbb22ed..8718adffb6 100644
--- a/src/livecodes/templates/multifile/lit.ts
+++ b/src/livecodes/templates/multifile/lit.ts
@@ -2,7 +2,7 @@ import type { Template } from '../../models';
 
 export const lit: Template = {
   name: 'multifile-lit',
-  title: window.deps.translateString('templates.multifile.lit', 'Lit Starter'),
+  title: window.deps.translateString('templates.multifile.lit', 'Lit Template'),
   thumbnail: 'assets/templates/lit.svg',
   mainFile: 'index.html',
   activeEditor: 'src/my-element.js',
diff --git a/src/livecodes/templates/multifile/preact.ts b/src/livecodes/templates/multifile/preact.ts
index 3cf2fbcb10..c6331217c7 100644
--- a/src/livecodes/templates/multifile/preact.ts
+++ b/src/livecodes/templates/multifile/preact.ts
@@ -2,7 +2,7 @@ import type { Template } from '../../models';
 
 export const preact: Template = {
   name: 'multifile-preact',
-  title: window.deps.translateString('templates.multifile.preact', 'Preact Starter'),
+  title: window.deps.translateString('templates.multifile.preact', 'Preact Template'),
   thumbnail: 'assets/templates/preact.svg',
   mainFile: 'index.html',
   activeEditor: 'src/app.jsx',
diff --git a/src/livecodes/templates/multifile/react.ts b/src/livecodes/templates/multifile/react.ts
index ea44bf242d..8ee4ec201b 100644
--- a/src/livecodes/templates/multifile/react.ts
+++ b/src/livecodes/templates/multifile/react.ts
@@ -2,7 +2,7 @@ import type { Template } from '../../models';
 
 export const react: Template = {
   name: 'multifile-react',
-  title: window.deps.translateString('templates.multifile.react', 'React Starter'),
+  title: window.deps.translateString('templates.multifile.react', 'React Template'),
   thumbnail: 'assets/templates/react.svg',
   mainFile: 'index.html',
   activeEditor: 'src/App.tsx',
diff --git a/src/livecodes/templates/multifile/solid.ts b/src/livecodes/templates/multifile/solid.ts
index ceb1aec867..4df5ecd38b 100644
--- a/src/livecodes/templates/multifile/solid.ts
+++ b/src/livecodes/templates/multifile/solid.ts
@@ -2,7 +2,7 @@ import type { Template } from '../../models';
 
 export const solid: Template = {
   name: 'multifile-solid',
-  title: window.deps.translateString('templates.multifile.solid', 'Solid Starter'),
+  title: window.deps.translateString('templates.multifile.solid', 'Solid Template'),
   thumbnail: 'assets/templates/solid.svg',
   mainFile: 'index.html',
   activeEditor: 'src/App.tsx',
diff --git a/src/livecodes/templates/multifile/svelte.ts b/src/livecodes/templates/multifile/svelte.ts
index 264b3d7bf5..fc2f069a38 100644
--- a/src/livecodes/templates/multifile/svelte.ts
+++ b/src/livecodes/templates/multifile/svelte.ts
@@ -2,7 +2,7 @@ import type { Template } from '../../models';
 
 export const svelte: Template = {
   name: 'multifile-svelte',
-  title: window.deps.translateString('templates.multifile.svelte', 'Svelte Starter'),
+  title: window.deps.translateString('templates.multifile.svelte', 'Svelte Template'),
   thumbnail: 'assets/templates/svelte.svg',
   mainFile: 'index.html',
   activeEditor: 'src/App.svelte',
diff --git a/src/livecodes/templates/multifile/typescript.ts b/src/livecodes/templates/multifile/typescript.ts
index 5c58704234..5ba9b0dbcc 100644
--- a/src/livecodes/templates/multifile/typescript.ts
+++ b/src/livecodes/templates/multifile/typescript.ts
@@ -2,7 +2,7 @@ import type { Template } from '../../models';
 
 export const typescript: Template = {
   name: 'multifile-typescript',
-  title: window.deps.translateString('templates.multifile.typescript', 'TypeScript Starter'),
+  title: window.deps.translateString('templates.multifile.typescript', 'TypeScript Template'),
   thumbnail: 'assets/templates/typescript.svg',
   mainFile: 'index.html',
   activeEditor: 'src/main.ts',
diff --git a/src/livecodes/templates/multifile/vue.ts b/src/livecodes/templates/multifile/vue.ts
index f44c8dc67b..d99d6734da 100644
--- a/src/livecodes/templates/multifile/vue.ts
+++ b/src/livecodes/templates/multifile/vue.ts
@@ -2,7 +2,7 @@ import type { Template } from '../../models';
 
 export const vue: Template = {
   name: 'multifile-vue',
-  title: window.deps.translateString('templates.multifile.vue', 'Vue Starter'),
+  title: window.deps.translateString('templates.multifile.vue', 'Vue Template'),
   thumbnail: 'assets/templates/vue.svg',
   mainFile: 'index.html',
   activeEditor: 'src/components/HelloWorld.vue',
diff --git a/src/livecodes/templates/starter/preact-starter.ts b/src/livecodes/templates/starter/preact-starter.ts
index b2c2d81cfb..a16fc65c1d 100644
--- a/src/livecodes/templates/starter/preact-starter.ts
+++ b/src/livecodes/templates/starter/preact-starter.ts
@@ -25,8 +25,8 @@ export const preactStarter: Template = {
   script: {
     language: 'jsx',
     content: `
-/** @jsx h */
-import { h, render } from 'preact';
+/** @jsxImportSource preact */
+import { render } from 'preact';
 import { useSignal } from "@preact/signals";
 
 function App(props) {

From 13ddd95a091b8a9e5b28b05057a66b7be3747129 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 16 Jan 2026 22:28:30 +0200
Subject: [PATCH 058/143] remove editor project dir

---
 src/livecodes/editor/codemirror/codemirror.ts | 13 ++-----------
 src/livecodes/editor/monaco/monaco.ts         | 11 ++---------
 src/sdk/models.ts                             |  1 -
 3 files changed, 4 insertions(+), 21 deletions(-)

diff --git a/src/livecodes/editor/codemirror/codemirror.ts b/src/livecodes/editor/codemirror/codemirror.ts
index a3225acc38..0246e9337f 100644
--- a/src/livecodes/editor/codemirror/codemirror.ts
+++ b/src/livecodes/editor/codemirror/codemirror.ts
@@ -59,7 +59,7 @@ const changeTabFocusMode = debounce(() => (tabFocusMode = !tabFocusMode), 50);
 export const createEditor = async (options: EditorOptions): Promise<CodeEditor> => {
   const { container, readonly, isEmbed, getFormatterConfig, getFontFamily, getLanguageExtension } =
     options;
-  let { editorId, projectDir } = options;
+  let { editorId, language } = options;
   let editorSettings: EditorConfig = { ...options };
   if (!container) throw new Error('editor container not found');
 
@@ -87,7 +87,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   const defaultThemes: Record<Theme, CodemirrorTheme> = { dark: 'one-dark', light: 'cm-light' };
   const getActiveTheme = () => themes[theme] || themes[defaultThemes[options.theme]] || [];
 
-  let language = options.language;
   let mappedLanguage = mapLanguage(language);
   let mappedLanguageSupport = await getLanguageSupport(mappedLanguage);
   let theme: CodemirrorTheme = await loadTheme(options.theme, options.editorTheme);
@@ -154,9 +153,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
       mappedLanguage === 'typescript' && !ext?.endsWith('ts') && !ext?.endsWith('tsx')
         ? ext + '.tsx'
         : ext;
-    const path = editorId.includes('.')
-      ? `/${projectDir}/${editorId}`
-      : `/${editorId}.${random}.${extension}`;
+    const path = editorId.includes('.') ? `/${editorId}` : `/${editorId}.${random}.${extension}`;
 
     codemirrorTS = codemirrorTS || [
       tsFacetWorker.of({ worker: tsWorker, path }),
@@ -314,11 +311,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     }
     tsLoaded.then(() => loadTS(true));
   };
-  const setProjectDir = (dir: string) => {
-    if (!codemirrorTS) return;
-    projectDir = dir;
-    tsLoaded.then(() => loadTS(true));
-  };
   const getValue = () => view.state.doc.toString();
   const setValue = (value = '', newState = true) => {
     if (newState) {
@@ -538,7 +530,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     setLanguage,
     getEditorId,
     setEditorId,
-    setProjectDir,
     focus,
     getPosition,
     setPosition,
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 0ab7bc597b..b4579016b2 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -60,7 +60,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     getFormatterConfig,
     getFontFamily,
   } = options;
-  let language = options.language;
+  let { editorId, language } = options;
 
   if (!container) throw new Error('editor container not found');
 
@@ -206,8 +206,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     ...consoleOptions,
   };
 
-  let editorId = options.editorId;
-  let projectDir = options.projectDir;
   const initOptions =
     editorId === 'console'
       ? consoleOptions
@@ -329,7 +327,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
         ? ext + '.tsx'
         : ext;
     modelUri = editorId.includes('.')
-      ? `file:///${projectDir}/${editorId}`
+      ? `file:///${editorId}`
       : `file:///${editorId}.${random}.${extension}`;
     const oldModel = editor.getModel();
     const model = getOrCreateModel(
@@ -378,10 +376,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     language = lang || getFileLanguage(filename) || language;
     setModel(editor, editor.getValue(), language);
   };
-  const setProjectDir = (dir: string) => {
-    projectDir = dir;
-    setModel(editor, editor.getValue(), language);
-  };
   const getValue = () => editor.getValue();
   const setValue = (value = '') => {
     editor.getModel()?.setValue(value);
@@ -982,7 +976,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     setLanguage,
     getEditorId,
     setEditorId,
-    setProjectDir,
     focus,
     getPosition,
     setPosition,
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index a9a259983d..4910cebde4 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1623,7 +1623,6 @@ export interface CodeEditor {
   setLanguage: (language: Language, value?: string) => void;
   getEditorId: () => string;
   setEditorId: (filename: string, language?: Language) => void;
-  setProjectDir?: (dir: string) => void;
   focus: () => void;
   getPosition: () => EditorPosition;
   setPosition: (position: EditorPosition) => void;

From 409b18ed2e95e1416233b27fbae084c731f197e7 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 16 Jan 2026 23:17:00 +0200
Subject: [PATCH 059/143] add getFileExtension utility

---
 src/livecodes/compiler/compile-blocks.ts          |  2 +-
 src/livecodes/compiler/compile.worker.ts          |  4 ++--
 src/livecodes/compiler/import-map.ts              | 15 ++++++++++++---
 src/livecodes/config/validate-config.ts           |  9 +++++++--
 .../languages/svelte/lang-svelte-compiler.ts      |  3 ++-
 src/livecodes/languages/utils.ts                  | 12 +++++++++++-
 src/livecodes/languages/vue/lang-vue-compiler.ts  |  3 ++-
 src/livecodes/utils/utils.ts                      |  3 ---
 8 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/livecodes/compiler/compile-blocks.ts b/src/livecodes/compiler/compile-blocks.ts
index 085af05734..11e21e366c 100644
--- a/src/livecodes/compiler/compile-blocks.ts
+++ b/src/livecodes/compiler/compile-blocks.ts
@@ -1,4 +1,5 @@
 import {
+  getFileExtension,
   getLanguageByAlias,
   getLanguageEditorId,
   processorIsActivated,
@@ -6,7 +7,6 @@ import {
 } from '../languages/utils';
 import type { CompileInfo, Config } from '../models';
 import { modulesService } from '../services/modules';
-import { getFileExtension } from '../utils/utils';
 import { compileInCompiler } from './compile-in-compiler';
 import { hasStyleImports } from './import-map';
 import type { LanguageOrProcessor } from './models';
diff --git a/src/livecodes/compiler/compile.worker.ts b/src/livecodes/compiler/compile.worker.ts
index f54db964f6..3c899a9a0d 100644
--- a/src/livecodes/compiler/compile.worker.ts
+++ b/src/livecodes/compiler/compile.worker.ts
@@ -1,6 +1,6 @@
 import type TS from 'typescript';
 import { getCompilerOptions } from '../editor/ts-compiler-options';
-import { getLanguageByAlias, languages, processors } from '../languages';
+import { getFileExtension, getLanguageByAlias, languages, processors } from '../languages';
 import type {
   CompileOptions,
   CompileResult,
@@ -9,7 +9,7 @@ import type {
   EditorLibrary,
   Language,
 } from '../models';
-import { doOnce, getErrorMessage, getFileExtension, objectFilter } from '../utils/utils';
+import { doOnce, getErrorMessage, objectFilter } from '../utils/utils';
 import { codeMirrorBaseUrl, comlinkBaseUrl, vendorsBaseUrl } from '../vendors';
 import { getAllCompilers } from './get-all-compilers';
 import type { CompilerMessage, CompilerMessageEvent, LanguageOrProcessor } from './models';
diff --git a/src/livecodes/compiler/import-map.ts b/src/livecodes/compiler/import-map.ts
index b40fb9bfcc..5e012543f6 100644
--- a/src/livecodes/compiler/import-map.ts
+++ b/src/livecodes/compiler/import-map.ts
@@ -2,7 +2,6 @@ import type { CompileInfo, Config, Language } from '../models';
 import { modulesService } from '../services/modules';
 import {
   escapeCode,
-  getFileExtension,
   getValidUrl,
   removeComments,
   removeCommentsAndStrings,
@@ -178,6 +177,7 @@ export const replaceSFCImports = async (
     config,
     isSfc,
     getLanguageByAlias,
+    getFileExtension,
     compileSFC,
     external,
   }: {
@@ -185,6 +185,7 @@ export const replaceSFCImports = async (
     filename: string;
     isSfc: (mod: string) => boolean;
     getLanguageByAlias: (alias: string) => Language | undefined;
+    getFileExtension: (filename: string) => string;
     compileSFC: (code: string, options: { filename: string; config: Config }) => Promise<string>;
     external?: string;
   },
@@ -229,11 +230,19 @@ export const replaceSFCImports = async (
             (
               await compileInCompiler(
                 content,
-                getLanguageByAlias(getFileExtension(url)) || 'javascript',
+                getLanguageByAlias(getFileExtension(url.split('/').pop() || '')) || 'javascript',
                 config,
               )
             ).code,
-            { filename: url, config, isSfc, getLanguageByAlias, compileSFC, external },
+            {
+              filename: url,
+              config,
+              isSfc,
+              getLanguageByAlias,
+              getFileExtension,
+              compileSFC,
+              external,
+            },
           );
       if (!compiled) return;
       const dataUrl = toDataUrl(compiled);
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
index 4be06385bb..66cdc39e36 100644
--- a/src/livecodes/config/validate-config.ts
+++ b/src/livecodes/config/validate-config.ts
@@ -1,4 +1,9 @@
-import { getFileLanguage, getLanguageByAlias, getLanguageEditorId } from '../languages';
+import {
+  getFileExtension,
+  getFileLanguage,
+  getLanguageByAlias,
+  getLanguageEditorId,
+} from '../languages';
 import type {
   Config,
   Editor,
@@ -9,7 +14,7 @@ import type {
   Tool,
   ToolsPaneStatus,
 } from '../models';
-import { getFileExtension, handleSlash, objectFilter, removeDuplicates } from '../utils';
+import { handleSlash, objectFilter, removeDuplicates } from '../utils';
 import { defaultConfig } from './default-config';
 import { getValidFileName, isEditorId } from './utils';
 
diff --git a/src/livecodes/languages/svelte/lang-svelte-compiler.ts b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
index a9dad82173..62bcd08d6f 100644
--- a/src/livecodes/languages/svelte/lang-svelte-compiler.ts
+++ b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
@@ -8,7 +8,7 @@ import {
 import { getCompileResult } from '../../compiler/utils';
 import type { CompilerFunction, Config, Language } from '../../models';
 import { getErrorMessage } from '../../utils/utils';
-import { getLanguageByAlias, getLanguageCustomSettings } from '../utils';
+import { getFileExtension, getLanguageByAlias, getLanguageCustomSettings } from '../utils';
 
 (self as any).createSvelteCompiler = (): CompilerFunction => {
   const MAIN_FILE = '__LiveCodes_App__.svelte';
@@ -34,6 +34,7 @@ import { getLanguageByAlias, getLanguageCustomSettings } from '../utils';
       config,
       filename,
       getLanguageByAlias,
+      getFileExtension,
       isSfc,
       compileSFC: async (
         code: string,
diff --git a/src/livecodes/languages/utils.ts b/src/livecodes/languages/utils.ts
index 473c851322..5f70659a49 100644
--- a/src/livecodes/languages/utils.ts
+++ b/src/livecodes/languages/utils.ts
@@ -13,8 +13,18 @@ export const getLanguageByAlias = (alias: string = ''): Language | undefined =>
   )?.name;
 };
 
+export const getFileExtension = /* @__PURE__ */ (filename: string) => {
+  const parts = filename.toLowerCase().split('.');
+  if (parts.length === 1) return ''; // e.g. myfile => ''
+  const extension = parts[parts.length - 1];
+  if (parts.length === 2) return extension; // e.g. App.tsx => 'tsx'
+  const lang = parts[parts.length - 2];
+  if (getLanguageByAlias(`${lang}.${extension}`)) return `${lang}.${extension}`; // e.g. App.react.tsx => 'react.tsx'
+  return extension;
+};
+
 export const getFileLanguage = (filename: string, fileLanguages: Record<string, string> = {}) => {
-  const extension = filename.split('.').pop()?.toLowerCase() || '';
+  const extension = getFileExtension(filename);
   return getLanguageByAlias(fileLanguages[extension] || extension);
 };
 
diff --git a/src/livecodes/languages/vue/lang-vue-compiler.ts b/src/livecodes/languages/vue/lang-vue-compiler.ts
index be1ad6c81c..95e63de469 100644
--- a/src/livecodes/languages/vue/lang-vue-compiler.ts
+++ b/src/livecodes/languages/vue/lang-vue-compiler.ts
@@ -4,7 +4,7 @@ import { createImportMap, replaceSFCImports } from '../../compiler/import-map';
 import type { LanguageOrProcessor } from '../../compiler/models';
 import type { CompilerFunction, Config } from '../../models';
 import { getErrorMessage, getRandomString, replaceAsync } from '../../utils/utils';
-import { getLanguageByAlias } from '../utils';
+import { getFileExtension, getLanguageByAlias } from '../utils';
 
 // based on:
 // https://github.com/vuejs/repl/blob/main/src/transform.ts
@@ -49,6 +49,7 @@ import { getLanguageByAlias } from '../utils';
       filename,
       config,
       getLanguageByAlias,
+      getFileExtension,
       isSfc,
       compileSFC: async (code, { filename, config }) => {
         const compiled = (await compileVueSFC(code, { filename, config }))?.js || '';
diff --git a/src/livecodes/utils/utils.ts b/src/livecodes/utils/utils.ts
index 099fa437a3..353a64882a 100644
--- a/src/livecodes/utils/utils.ts
+++ b/src/livecodes/utils/utils.ts
@@ -348,9 +348,6 @@ export const runOrContinue =
       }
     };
 
-export const getFileExtension = /* @__PURE__ */ (file: string) =>
-  file.split('.')[file.split('.').length - 1];
-
 export const isInIframe = /* @__PURE__ */ () => {
   // TODO allow in storybook
   if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') return false;

From 0224a2bf333ef92b4d6662fc442799423c90de02 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 16 Jan 2026 23:36:47 +0200
Subject: [PATCH 060/143] edit templates

---
 .../templates/multifile/javascript.ts         | 12 +++----
 src/livecodes/templates/multifile/preact.ts   | 14 ++++----
 src/livecodes/templates/multifile/react.ts    | 33 +++++++++----------
 src/livecodes/templates/multifile/solid.ts    |  3 +-
 src/livecodes/templates/multifile/svelte.ts   | 10 +++---
 .../templates/multifile/typescript.ts         | 27 +++++++--------
 6 files changed, 49 insertions(+), 50 deletions(-)

diff --git a/src/livecodes/templates/multifile/javascript.ts b/src/livecodes/templates/multifile/javascript.ts
index c49aab69c9..cbe713e3ab 100644
--- a/src/livecodes/templates/multifile/javascript.ts
+++ b/src/livecodes/templates/multifile/javascript.ts
@@ -27,11 +27,11 @@ export const javascript: Template = {
     {
       filename: 'src/main.js',
       language: 'javascript',
-      content: `import './style.css';
-import javascriptLogo from './javascript.svg';
-import { setupCounter } from './counter.js';
+      content: `import "./style.css";
+import javascriptLogo from "./javascript.svg";
+import { setupCounter } from "./counter.js";
 
-document.querySelector('#app').innerHTML = \`
+document.querySelector("#app").innerHTML = \`
   <div>
     <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
       <img src="\${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
@@ -46,7 +46,7 @@ document.querySelector('#app').innerHTML = \`
   </div>
 \`;
 
-setupCounter(document.querySelector('#counter'));
+setupCounter(document.querySelector("#counter"));
 `,
     },
     {
@@ -159,7 +159,7 @@ button:focus-visible {
     counter = count;
     element.innerHTML = \`count is \${counter}\`;
   };
-  element.addEventListener('click', () => setCounter(counter + 1));
+  element.addEventListener("click", () => setCounter(counter + 1));
   setCounter(0);
 }
 `,
diff --git a/src/livecodes/templates/multifile/preact.ts b/src/livecodes/templates/multifile/preact.ts
index c6331217c7..9c91dbf929 100644
--- a/src/livecodes/templates/multifile/preact.ts
+++ b/src/livecodes/templates/multifile/preact.ts
@@ -28,11 +28,11 @@ export const preact: Template = {
       filename: 'src/main.jsx',
       language: 'tsx',
       content: `/** @jsxImportSource preact */
-import { render } from 'preact';
-import './index.css';
-import { App } from './app.jsx';
+import { render } from "preact";
+import "./index.css";
+import { App } from "./app.jsx";
 
-render(<App />, document.getElementById('app'));
+render(<App />, document.getElementById("app"));
 `,
     },
     {
@@ -112,9 +112,9 @@ button:focus-visible {
       filename: 'src/app.jsx',
       language: 'jsx',
       content: `/** @jsxImportSource preact */
-import { useState } from 'preact/hooks';
-import preactLogo from './assets/preact.svg';
-import './app.css';
+import { useState } from "preact/hooks";
+import preactLogo from "./assets/preact.svg";
+import "./app.css";
 
 export function App() {
   const [count, setCount] = useState(0);
diff --git a/src/livecodes/templates/multifile/react.ts b/src/livecodes/templates/multifile/react.ts
index 8ee4ec201b..28d8b253b6 100644
--- a/src/livecodes/templates/multifile/react.ts
+++ b/src/livecodes/templates/multifile/react.ts
@@ -6,6 +6,7 @@ export const react: Template = {
   thumbnail: 'assets/templates/react.svg',
   mainFile: 'index.html',
   activeEditor: 'src/App.tsx',
+  fileLanguages: { jsx: 'react', tsx: 'react.tsx' },
   files: [
     {
       filename: 'index.html',
@@ -26,17 +27,17 @@ export const react: Template = {
     },
     {
       filename: 'src/main.tsx',
-      language: 'tsx',
-      content: `import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+      language: 'react.tsx',
+      content: `import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
   </StrictMode>,
-)
+);
 `,
     },
     {
@@ -114,13 +115,13 @@ button:focus-visible {
     },
     {
       filename: 'src/App.tsx',
-      language: 'tsx',
-      content: `import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import './App.css'
+      language: 'react.tsx',
+      content: `import { useState } from "react";
+import reactLogo from "./assets/react.svg";
+import "./App.css";
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
 
   return (
     <>
@@ -135,14 +136,12 @@ function App() {
           count is {count}
         </button>
       </div>
-      <p className="read-the-docs">
-        Click on the React logo to learn more
-      </p>
+      <p className="read-the-docs">Click on the React logo to learn more</p>
     </>
-  )
+  );
 }
 
-export default App
+export default App;
 `,
     },
     {
diff --git a/src/livecodes/templates/multifile/solid.ts b/src/livecodes/templates/multifile/solid.ts
index 4df5ecd38b..15b2ca8d40 100644
--- a/src/livecodes/templates/multifile/solid.ts
+++ b/src/livecodes/templates/multifile/solid.ts
@@ -28,8 +28,7 @@ export const solid: Template = {
     {
       filename: 'src/index.tsx',
       language: 'solid.tsx',
-      content: `/* @refresh reload */
-import { render } from 'solid-js/web'
+      content: `import { render } from 'solid-js/web'
 import './index.css'
 import App from './App.tsx'
 
diff --git a/src/livecodes/templates/multifile/svelte.ts b/src/livecodes/templates/multifile/svelte.ts
index fc2f069a38..116e7e1d23 100644
--- a/src/livecodes/templates/multifile/svelte.ts
+++ b/src/livecodes/templates/multifile/svelte.ts
@@ -126,8 +126,8 @@ button:focus-visible {
       filename: 'src/App.svelte',
       language: 'svelte',
       content: `<script lang="ts">
-  import svelteLogo from './assets/svelte.svg';
-  import Counter from './lib/Counter.svelte';
+  import svelteLogo from "./assets/svelte.svg";
+  import Counter from "./lib/Counter.svelte";
 </script>
 
 <main>
@@ -167,10 +167,10 @@ button:focus-visible {
       filename: 'src/lib/Counter.svelte',
       language: 'svelte',
       content: `<script lang="ts">
-  let count: number = $state(0)
+  let count: number = $state(0);
   const increment = () => {
-    count += 1
-  }
+    count += 1;
+  };
 </script>
 
 <button onclick={increment}>
diff --git a/src/livecodes/templates/multifile/typescript.ts b/src/livecodes/templates/multifile/typescript.ts
index 5ba9b0dbcc..6e7f6164b0 100644
--- a/src/livecodes/templates/multifile/typescript.ts
+++ b/src/livecodes/templates/multifile/typescript.ts
@@ -27,11 +27,11 @@ export const typescript: Template = {
     {
       filename: 'src/main.ts',
       language: 'typescript',
-      content: `import './style.css'
-import typescriptLogo from './typescript.svg'
-import { setupCounter } from './counter.ts'
+      content: `import "./style.css";
+import typescriptLogo from "./typescript.svg";
+import { setupCounter } from "./counter.ts";
 
-document.querySelector<HTMLDivElement>('#app')!.innerHTML = \`
+document.querySelector<HTMLDivElement>("#app")!.innerHTML = \`
   <div>
     <a href="https://www.typescriptlang.org/" target="_blank">
       <img src="\${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
@@ -44,9 +44,9 @@ document.querySelector<HTMLDivElement>('#app')!.innerHTML = \`
       Click on the TypeScript logos to learn more
     </p>
   </div>
-\`
+\`;
 
-setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
+setupCounter(document.querySelector<HTMLButtonElement>("#counter")!);
 `,
     },
     {
@@ -154,14 +154,15 @@ button:focus-visible {
       filename: 'src/counter.ts',
       language: 'typescript',
       content: `export function setupCounter(element: HTMLButtonElement) {
-  let counter = 0
+  let counter = 0;
   const setCounter = (count: number) => {
-    counter = count
-    element.innerHTML = \`count is \${counter}\`
-  }
-  element.addEventListener('click', () => setCounter(counter + 1))
-  setCounter(0)
-}`,
+    counter = count;
+    element.innerHTML = \`count is \${counter}\`;
+  };
+  element.addEventListener("click", () => setCounter(counter + 1));
+  setCounter(0);
+}
+`,
     },
     {
       filename: 'src/typescript.svg',

From 4c0889db34772a5d8c68d9001f964fdb33f6b12c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 16 Jan 2026 23:56:48 +0200
Subject: [PATCH 061/143] fix go to definition

---
 src/livecodes/editor/monaco/monaco.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index b4579016b2..8fd673cfbb 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -935,7 +935,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
         const targetEditor = editors.find((e) => e.getModel()?.uri.path === resource.path);
         if (targetEditor) {
-          const targetEditorId = resource.path.split('/').splice(2).join('/');
+          const targetEditorId = resource.path.slice(1); // remove leading slash
 
           if (targetEditorId) {
             const targetEditorTab = getEditorTab(targetEditorId);

From 0749d5d79427ab549c33a1b8255394d46763b8d7 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 17 Jan 2026 01:57:58 +0200
Subject: [PATCH 062/143] fix multifile relative imports

---
 .../languages/svelte/lang-svelte-compiler.ts  | 24 ++++++++++---------
 .../result/multi-file-result-page.ts          | 13 ++++++----
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/livecodes/languages/svelte/lang-svelte-compiler.ts b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
index 62bcd08d6f..b34bfabf61 100644
--- a/src/livecodes/languages/svelte/lang-svelte-compiler.ts
+++ b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
@@ -28,7 +28,8 @@ import { getFileExtension, getLanguageByAlias, getLanguageCustomSettings } from
     if (!code) return getCompileResult('');
 
     const isSfc = (mod: string) =>
-      mod.toLowerCase().endsWith('.svelte') || mod.toLowerCase().startsWith('data:text/svelte');
+      (mod.toLowerCase().endsWith('.svelte') && !mod.startsWith('~/')) ||
+      mod.toLowerCase().startsWith('data:text/svelte');
 
     const fullCode = await replaceSFCImports(code, {
       config,
@@ -90,13 +91,14 @@ import { getFileExtension, getLanguageByAlias, getLanguageCustomSettings } from
         ? MAIN_FILE
         : SECONDARY_FILE;
 
-    // handle svg imports
-    // Svelte compiler tries to inline them as dataUrls from file system, resulting in not found error
+    // handle relative imports in multi-file projects
+    // Svelte compiler tries to inline svg as dataUrls from file system, resulting in not found error
     // this workaround converts ./foo.svg to ~/foo.svg, then restores it after compilation
-    let relativeImageImports = {};
+    // this also works for imports like './stores.js'
+    let relativeFileImports = {};
     if (isMultiFileProject) {
-      relativeImageImports = getImports(code)
-        .filter((mod) => (mod.startsWith('.') || mod.startsWith('/')) && mod.endsWith('.svg'))
+      relativeFileImports = getImports(code)
+        .filter((mod) => mod.startsWith('.') || mod.startsWith('/'))
         .reduce((acc, mod) => {
           let converted = mod;
           if (converted.startsWith('/')) converted = '.' + converted;
@@ -108,8 +110,8 @@ import { getFileExtension, getLanguageByAlias, getLanguageCustomSettings } from
         }, {});
     }
 
-    if (Object.keys(relativeImageImports).length) {
-      code = replaceImports(code, config, { importMap: relativeImageImports });
+    if (Object.keys(relativeFileImports).length) {
+      code = replaceImports(code, config, { importMap: relativeFileImports });
     }
 
     const compileResult = await compileSvelteSFC(code, {
@@ -118,11 +120,11 @@ import { getFileExtension, getLanguageByAlias, getLanguageCustomSettings } from
       filename,
     });
 
-    if (Object.keys(relativeImageImports).length) {
-      const restoredImports = Object.keys(relativeImageImports).reduce(
+    if (Object.keys(relativeFileImports).length) {
+      const restoredImports = Object.keys(relativeFileImports).reduce(
         (acc, mod) => ({
           ...acc,
-          [(relativeImageImports as any)[mod]]: mod,
+          [(relativeFileImports as any)[mod]]: mod,
         }),
         {},
       );
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index a1731a1355..2fb2cdc6cd 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -187,12 +187,20 @@ export const createMultiFileResultPage = async ({
       const resolvedImport = resolvePath(mod, './' + file.filename);
       if (
         !resolvedImport ||
-        resolvedImport.replace('./', '~/') in codeImports ||
         resolvedImport in stylesheetImports ||
         resolvedImport in imageImports
       ) {
         return;
       }
+
+      // importmaps cannot override relative imports in data URLs
+      const convertedImport = resolvedImport.replace('./', '~/');
+
+      if (convertedImport in codeImports) {
+        fileImports[mod] = convertedImport;
+        return;
+      }
+
       const importedFile = findFile(resolvedImport);
       if (!importedFile) {
         if (isCss(resolvedImport)) {
@@ -206,9 +214,6 @@ export const createMultiFileResultPage = async ({
       const compiledLanguage =
         getLanguageEditorId(importedFile.language) === 'style' ? 'css' : 'javascript';
 
-      // importmaps cannot override relative imports in data URLs
-      const convertedImport = resolvedImport.replace('./', '~/');
-
       if (isCss(resolvedImport, compiledLanguage)) {
         const dataUrl = fileUrls[importedFile.filename] || getDataUrl(importedFile);
         if (!dataUrl) return;

From 08c4393edbcb1c223257553f0336c3b7c97571ef Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 18 Jan 2026 09:35:05 +0200
Subject: [PATCH 063/143] enable tailwind in multifile projects

---
 src/livecodes/core.ts                         | 40 +++++++++++++++++++
 .../processor-tailwindcss-compiler.ts         | 27 ++++++++++---
 src/livecodes/languages/tailwindcss/utils.ts  |  5 +++
 3 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index ef306a25d7..bb8397171e 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -92,6 +92,7 @@ import {
   processorIsEnabled,
   processors,
 } from './languages';
+import { hasTailwindImport } from './languages/tailwindcss/utils';
 import type {
   API,
   APICommands,
@@ -1204,6 +1205,44 @@ const updateCompiledCode = () => {
   );
 };
 
+const autoEnableProcessors = () => {
+  const config = getConfig();
+  if (!config.files.length) return;
+
+  const shouldEnableTailwind =
+    config.processors.includes('tailwindcss') ||
+    config.files
+      .filter((f) => getLanguageEditorId(f.language) === 'style')
+      .some((f) => hasTailwindImport(f.content));
+
+  const shouldEnableCSSModules =
+    config.processors.includes('cssmodules') ||
+    config.files
+      .filter((f) => getLanguageEditorId(f.language) === 'style')
+      .some((f) => {
+        const [scriptName, ext] = f.filename.split('.module.');
+        if (getLanguageByAlias(ext) !== 'css') return false;
+        return config.files
+          .filter((f) => getLanguageEditorId(f.language) === 'script')
+          .find((f) => f.filename.split('.').slice(0, -1).join('.') === scriptName);
+      });
+
+  const processors: Processor[] = [...config.processors];
+  if (shouldEnableTailwind && !processors.includes('tailwindcss')) {
+    processors.push('tailwindcss');
+  }
+  if (shouldEnableCSSModules && !processors.includes('cssmodules')) {
+    processors.push('cssmodules');
+  }
+
+  if (processors.length !== config.processors.length) {
+    setConfig({
+      ...config,
+      processors,
+    });
+  }
+};
+
 const getResultPage = async ({
   sourceEditor = undefined as EditorId | undefined,
   forExport = false,
@@ -1212,6 +1251,7 @@ const getResultPage = async ({
   runTests = false,
 }) => {
   updateConfig();
+  autoEnableProcessors();
   const config = getConfig();
   const contentConfig = getContentConfig(config);
 
diff --git a/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts b/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts
index 63fa6bfbfd..3b2203e5c2 100644
--- a/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts
+++ b/src/livecodes/languages/tailwindcss/processor-tailwindcss-compiler.ts
@@ -6,7 +6,8 @@ import { modulesService } from '../../services';
 import { getLanguageCustomSettings } from '../../utils/utils';
 import { tailwindcss3Url, tailwindcssBaseUrl, vendorsBaseUrl } from '../../vendors';
 import { lightningcssFeatures } from '../lightningcss/processor-lightningcss-compiler';
-import { addCodeInStyleBlocks } from './utils';
+import { getLanguageEditorId } from '../utils';
+import { addCodeInStyleBlocks, hasTailwindImport } from './utils';
 
 declare const self: any;
 
@@ -192,16 +193,32 @@ self.createTailwindcssCompiler = (): CompilerFunction => {
   };
 
   const tailwind4: CompilerFunction = async (code, { config, options }) => {
-    const prepareCode = (css: string, html: string) => {
+    const isMultiFile = config.files.length > 0;
+
+    if (isMultiFile && !hasTailwindImport(code)) return code;
+
+    const prepareCode = (css: string, html: string, isMultiFile = false) => {
       let result = replaceStyleImports(css, { exceptions: [/tailwindcss/g] });
-      if (!result.includes('@import')) {
+      if (!result.includes('@import') && !isMultiFile) {
         result = `@import "tailwindcss";${result}`;
       }
       return addCodeInStyleBlocks(result, html);
     };
 
-    const html = `<template>${options.html}\n<script>${config.script.content}</script></template>`;
-    const css = prepareCode(code, html);
+    const html = isMultiFile
+      ? '<template>' +
+        config.files
+          .map((f) => ({
+            type: getLanguageEditorId(f.language),
+            content: f.content,
+          }))
+          .filter((f) => f.type !== 'style')
+          .map((f) => (f.type === 'markup' ? f.content : `<script>${f.content}</script>`))
+          .join('\n') +
+        '</template>'
+      : `<template>${options.html}\n<script>${config.script.content}</script></template>`;
+    const css = prepareCode(code, html, isMultiFile);
+
     try {
       const compiler = await self.tailwindcss.compile(css, {
         base: '/',
diff --git a/src/livecodes/languages/tailwindcss/utils.ts b/src/livecodes/languages/tailwindcss/utils.ts
index ec39c53713..5ade42527a 100644
--- a/src/livecodes/languages/tailwindcss/utils.ts
+++ b/src/livecodes/languages/tailwindcss/utils.ts
@@ -11,3 +11,8 @@ export const addCodeInStyleBlocks = (css: string, html: string) => {
   }
   return css;
 };
+
+export const hasTailwindImport = (css: string) => {
+  const pattern = /@import\s+('tailwindcss')|("tailwindcss")\s*;/g;
+  return new RegExp(pattern).test(css);
+};

From cc36b00c582a7e3b4d9480ce431cadc183f176dd Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Mon, 19 Jan 2026 01:51:40 +0200
Subject: [PATCH 064/143] add css modules support in multifile projects

---
 docs/docs/languages/cssmodules.mdx            | 38 ++++++++++-----
 src/livecodes/compiler/import-map.ts          |  4 +-
 src/livecodes/core.ts                         | 23 ++++++++--
 .../languages/postcss/postcss-plugins.ts      | 19 ++++++--
 .../result/multi-file-result-page.ts          | 46 ++++++++++---------
 src/livecodes/result/result-page.ts           |  4 +-
 src/sdk/models.ts                             |  2 +-
 7 files changed, 89 insertions(+), 47 deletions(-)

diff --git a/docs/docs/languages/cssmodules.mdx b/docs/docs/languages/cssmodules.mdx
index 11579dfd82..95df85639c 100644
--- a/docs/docs/languages/cssmodules.mdx
+++ b/docs/docs/languages/cssmodules.mdx
@@ -8,7 +8,7 @@ The selector names are unique to avoid naming collision. They can then be import
 
 CSS Modules can be enabled from the style editor menu.
 
-Selectors added to the style editor (using any language e.g. CSS, SCSS, Less, etc.) are transformed to unique selectors. The transformed classes are then accessible in the script editor as a JSON object, and are injected into the HTML elements.
+Selectors added to the style editor (using any language e.g. CSS, SCSS, Less, etc.) are transformed to unique selectors. The transformed classes are then accessible in the script editor as a JSON object, and can be injected into the HTML elements.
 
 **Example:**
 
@@ -193,7 +193,7 @@ In addition, the following settings are available:
 
 - `addClassesToHTML`
 
-  Type: `boolean`. Default: `true`.
+  Type: `boolean`. Default: `false`.
 
   The generated classes are injected into the HTML elements, so the styles are applied without having to assign them using JavaScript.
 
@@ -212,7 +212,7 @@ Please note that custom settings should be valid JSON (i.e. functions are not al
   "cssmodules": {
     "exportGlobals": true,
     "localsConvention": "camelCaseOnly",
-    "addClassesToHTML": false
+    "addClassesToHTML": true
   }
 }
 ```
@@ -234,16 +234,30 @@ If you get this working, [please create a pull request](https://github.com/live-
 
 import LiveCodes from '../../src/components/LiveCodes.tsx';
 
-export const params = {
+export const config = {
   activeEditor: 'style',
-  html: '<div class="page">\n <h1>Page Title</h1>\n <p class="small-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur similique facere facilis minima tempora.</p>\n</div>\n',
-  css: ':global .page {\n padding: 20px;\n}\n\n.text {\n color: black;\n font-family: sans-serif;\n}\n\n.small-text {\n composes: text;\n font-size: 20px;\n}\n\n.large-text {\n composes: text;\n font-size: 40px;\n}\n\n.large-text:hover {\n color: red;\n}\n\n.title {\n composes: large-text;\n color: green;\n}\n',
-  js: "import classes from './style.module.css';\n\ndocument.querySelector('h1').className = classes.title;\nconsole.log(classes);\n",
-  processors: 'cssmodules',
-  compiled: 'open',
-};
-
-<LiveCodes params={params} height="400"></LiveCodes>
+  markup: {
+    language: 'html',
+    content: '<div class="page">\n <h1>Page Title</h1>\n <p class="small-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolore earum blanditiis quidem non beatae ipsam autem maiores ut et delectus unde repudiandae, repellendus aut. Aspernatur similique facere facilis minima tempora.</p>\n</div>\n',
+  },
+  style: {
+    language: 'css',
+    content: ':global .page {\n padding: 20px;\n}\n\n.text {\n color: black;\n font-family: sans-serif;\n}\n\n.small-text {\n composes: text;\n font-size: 20px;\n}\n\n.large-text {\n composes: text;\n font-size: 40px;\n}\n\n.large-text:hover {\n color: red;\n}\n\n.title {\n composes: large-text;\n color: green;\n}\n',
+  },
+  script: {
+    language: 'js',
+    content: "import classes from './style.module.css';\n\ndocument.querySelector('h1').className = classes.title;\nconsole.log(classes);\n",
+  },
+  processors: ['cssmodules'],
+  tools: { active: 'compiled' },
+  customSettings: {
+    cssmodules: {
+      addClassesToHTML: true,
+    },
+  }
+}
+
+<LiveCodes config={config} height="400"></LiveCodes>
 
 ## Links
 
diff --git a/src/livecodes/compiler/import-map.ts b/src/livecodes/compiler/import-map.ts
index 5e012543f6..62827d08b2 100644
--- a/src/livecodes/compiler/import-map.ts
+++ b/src/livecodes/compiler/import-map.ts
@@ -1,4 +1,4 @@
-import type { CompileInfo, Config, Language } from '../models';
+import type { Config, Language } from '../models';
 import { modulesService } from '../services/modules';
 import {
   escapeCode,
@@ -371,7 +371,7 @@ export const cjs2esm = (code: string) => {
 export const createCSSModulesImportMap = (
   compiledScript: string,
   compiledStyle: string,
-  cssTokens: CompileInfo['cssModules'] = {},
+  cssTokens: Record<string, string> = {},
   extension: Language = 'css',
 ) => {
   const scriptImports = getImports(compiledScript);
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index bb8397171e..da5ae1064c 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -1251,7 +1251,6 @@ const getResultPage = async ({
   runTests = false,
 }) => {
   updateConfig();
-  autoEnableProcessors();
   const config = getConfig();
   const contentConfig = getContentConfig(config);
 
@@ -1441,6 +1440,7 @@ const getMultiFileResultPage = async ({
   singleFileResult = true,
   runTests = false,
 }) => {
+  autoEnableProcessors();
   const config = getConfig();
   const cache = getCache();
 
@@ -1476,16 +1476,31 @@ const getMultiFileResultPage = async ({
     }
   }
 
-  const compiledContent = compiledFiles.map((file) => file.compiled).join('\n');
+  const mainFile = compiledFiles.find((f) => f.filename === getMainFile(config));
+  const compiledContent =
+    compiledFiles
+      .map((file) =>
+        getLanguageEditorId(file.language) === 'markup'
+          ? file.compiled
+          : `<script type="script-for-styles">${file.compiled}</script>`,
+      )
+      .join('\n') + `<script type="script-for-styles">${compileInfo.importedContent}</script>`;
+
   for (const file of config.files) {
     const { filename, language, content } = file;
     if (getLanguageEditorId(language) !== 'style') continue;
     const compileResult = await compiler.compile(content, language, config, {
       filename,
-      compileInfo,
+      compileInfo: {
+        ...compileInfo,
+        modifiedHTML: mainFile?.compiled || '',
+      },
       forceCompile: forceCompileStyles,
-      html: `${compiledContent}<script type="script-for-styles">${compileInfo.importedContent}</script>`,
+      html: compiledContent,
     });
+    if (mainFile && compileResult.info.modifiedHTML) {
+      mainFile.compiled = compileResult.info.modifiedHTML;
+    }
     compiledFiles.push({ ...file, compiled: compileResult.code });
     compileInfo = mergeCompileInfo(compileInfo, compileResult.info);
     if (compileInfo.errors?.length) {
diff --git a/src/livecodes/languages/postcss/postcss-plugins.ts b/src/livecodes/languages/postcss/postcss-plugins.ts
index f22e2c694f..f11377cc21 100644
--- a/src/livecodes/languages/postcss/postcss-plugins.ts
+++ b/src/livecodes/languages/postcss/postcss-plugins.ts
@@ -139,19 +139,28 @@ export const cssModules: ProcessorSpecs = {
         localsConvention: 'camelCase',
         ...customSettings,
         getJSON(_cssFileName: string, json: Record<string, string>, _outputFileName: string) {
-          const addClasses = customSettings.addClassesToHTML !== false;
+          const isMultiFileProject = options.filename !== 'style';
+          const filename = options.filename;
+          const addClasses = customSettings.addClassesToHTML === true;
           const removeClasses = customSettings.removeOriginalClasses === true;
+          let html = '';
           if (addClasses) {
-            options.html = (self as any).postcssModules.addClassesToHtml(
-              options.html,
+            html = (self as any).postcssModules.addClassesToHtml(
+              options.compileInfo?.modifiedHTML || options.html,
               json,
               removeClasses,
             );
+            if (!isMultiFileProject) {
+              options.html = html;
+            }
           }
           options.compileInfo = {
             ...options.compileInfo,
-            cssModules: json,
-            ...(addClasses ? { modifiedHTML: options.html } : {}),
+            cssModules: {
+              ...options.compileInfo?.cssModules,
+              [filename]: json,
+            },
+            ...(addClasses ? { modifiedHTML: html || options.compileInfo?.modifiedHTML } : {}),
           };
         },
       });
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 2fb2cdc6cd..8aad490e85 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -14,10 +14,12 @@ import { getAppCDN, modulesService } from '../services/modules';
 import { testImports } from '../toolspane/test-imports';
 import {
   cloneObject,
+  escapeCode,
   escapeScript,
   getAbsoluteUrl,
   isRelativeUrl,
   objectMap,
+  toCamelCase,
   toDataUrl,
 } from '../utils/utils';
 import { browserJestUrl, esModuleShimsPath, spacingJsUrl } from '../vendors';
@@ -187,6 +189,7 @@ export const createMultiFileResultPage = async ({
       const resolvedImport = resolvePath(mod, './' + file.filename);
       if (
         !resolvedImport ||
+        resolvedImport in fileImports ||
         resolvedImport in stylesheetImports ||
         resolvedImport in imageImports
       ) {
@@ -202,6 +205,7 @@ export const createMultiFileResultPage = async ({
       }
 
       const importedFile = findFile(resolvedImport);
+      // handle importing external stylesheets or images
       if (!importedFile) {
         if (isCss(resolvedImport)) {
           stylesheetImports[resolvedImport] = resolvedImport;
@@ -211,10 +215,22 @@ export const createMultiFileResultPage = async ({
         }
         return;
       }
+
       const compiledLanguage =
         getLanguageEditorId(importedFile.language) === 'style' ? 'css' : 'javascript';
 
       if (isCss(resolvedImport, compiledLanguage)) {
+        const cssTokens = compileInfo.cssModules?.[resolvedImport.replace('./', '')];
+        if (resolvedImport.includes('.module.') && cssTokens) {
+          // from compiler\import-map.ts#createCSSModulesImportMap
+          const cssModule =
+            `export default ${escapeCode(JSON.stringify(cssTokens))};\n` +
+            Object.keys(cssTokens)
+              .filter((key) => key === toCamelCase(key))
+              .map((key) => `export const ${escapeCode(key)} = "${escapeCode(cssTokens[key])}";`)
+              .join('\n');
+          codeImports[convertedImport] = toDataUrl(cssModule);
+        }
         const dataUrl = fileUrls[importedFile.filename] || getDataUrl(importedFile);
         if (!dataUrl) return;
         stylesheetImports[convertedImport] = dataUrl;
@@ -257,8 +273,6 @@ export const createMultiFileResultPage = async ({
     stylesheet.href = url;
     dom.head.appendChild(stylesheet);
 
-    // map stylesheets in import map to empty script to avoid loading css as js
-    codeImports[mod] = 'data:text/javascript;charset=UTF-8;base64,';
     if (Object.keys(configImports).includes(mod)) {
       delete configImports[mod];
     }
@@ -412,25 +426,15 @@ export const createMultiFileResultPage = async ({
           ...(runTests && !forExport && hasImports(compiledTests)
             ? createImportMap(compiledTests, config, { external: externalModules })
             : {}),
-          ...Object.keys(stylesheetImports).reduce(
-            (acc, url) => ({
-              ...acc,
-              [url]: toDataUrl(''),
-            }),
-            {},
-          ),
-          // ...createCSSModulesImportMap(
-          //   code.script.compiled,
-          //   code.style.compiled,
-          //   compileInfo.cssModules,
-          //   styleExtension,
-          // ),
-          // ...createCSSModulesImportMap(
-          //   code.markup.compiled,
-          //   code.style.compiled,
-          //   compileInfo.cssModules,
-          //   styleExtension,
-          // ),
+          ...Object.keys(stylesheetImports)
+            .filter((s) => !s.includes('.module.'))
+            .reduce(
+              (acc, url) => ({
+                ...acc,
+                [url]: toDataUrl(''),
+              }),
+              {},
+            ),
           ...compileInfo.imports,
         };
 
diff --git a/src/livecodes/result/result-page.ts b/src/livecodes/result/result-page.ts
index 551d8c189a..30d8cb65ff 100644
--- a/src/livecodes/result/result-page.ts
+++ b/src/livecodes/result/result-page.ts
@@ -313,13 +313,13 @@ export const createResultPage = async ({
           ...createCSSModulesImportMap(
             code.script.compiled,
             code.style.compiled,
-            compileInfo.cssModules,
+            compileInfo.cssModules?.style,
             styleExtension,
           ),
           ...createCSSModulesImportMap(
             code.markup.compiled,
             code.style.compiled,
-            compileInfo.cssModules,
+            compileInfo.cssModules?.style,
             styleExtension,
           ),
           ...compileInfo.imports,
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 4910cebde4..0f5b0c1599 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1376,7 +1376,7 @@ export interface CompileOptions {
 }
 
 export interface CompileInfo {
-  cssModules?: Record<string, string>;
+  cssModules?: Record<string, Record<string, string>>;
   modifiedHTML?: string;
   importedContent?: string;
   imports?: Record<string, string>;

From 649f7a5026676c06a733c7e27b2a2f03f97d749c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Mon, 19 Jan 2026 05:05:31 +0200
Subject: [PATCH 065/143] drag and drop file tabs to re-order

---
 src/livecodes/core.ts                      | 45 ++++++++++++++++------
 src/livecodes/templates/multifile/react.ts |  2 +-
 src/livecodes/vendors.ts                   |  4 ++
 src/sdk/models.ts                          |  1 -
 vendor-licenses.md                         |  2 +
 5 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index da5ae1064c..c78f979c7e 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -152,15 +152,16 @@ import { createToolsPane } from './toolspane';
 import { createTypeLoader, getDefaultTypes } from './types';
 import {
   capitalize,
+  cloneObject,
   colorToHex,
   colorToHsla,
   compareObjects,
   copyToClipboard,
   ctrl,
   debounce,
-  getRandomString,
   getValidUrl,
   isMac,
+  loadScript,
   loadStylesheet,
   predefinedValues,
   removeFormatting,
@@ -170,6 +171,7 @@ import {
   toDataUrl,
 } from './utils';
 import {
+  draggableUrl,
   fontInterUrl,
   fontMaterialIconsUrl,
   fscreenUrl,
@@ -231,7 +233,6 @@ export let authService: ReturnType<typeof createAuthService> | undefined;
 let editorLanguages: EditorLanguages | undefined;
 let resultLanguages: Language[] = [];
 let projectId: string;
-let projectDir: string | undefined;
 let isSaved = true;
 let changingContent = false;
 let consoleInputCodeCompletion: any;
@@ -254,6 +255,7 @@ const sdkWatchers = {
   console: createPub<{ method: string; args: any[] }>(),
   destroy: createPub<void>(),
 } as const satisfies Record<SDKEvent, ReturnType<typeof createPub<any>>>;
+let fileSortable: any;
 
 const getEditorLanguage = (editorId = 'markup') => editorLanguages?.[editorId];
 const getEditorLanguages = () => Object.values(editorLanguages || {});
@@ -506,13 +508,6 @@ const checkFileName = (filename: string, config: Config, currentName?: string) =
   return null;
 };
 
-const getProjectDir = (createNew = false) => {
-  if (!projectDir || createNew) {
-    projectDir = getRandomString().replace('0.', 'p').slice(0, 10);
-  }
-  return projectDir;
-};
-
 const addFile = async (
   filename: string,
   editorOptions: Omit<EditorOptions, 'container' | 'editorId' | 'language' | 'value'>,
@@ -524,7 +519,6 @@ const addFile = async (
   const container = createEditorUI(validName);
   const editor = await createEditor({
     ...editorOptions,
-    projectDir: getProjectDir(),
     container,
     editorId: validName,
     language: fileLanguage,
@@ -670,7 +664,6 @@ const createEditors = async (config: Config) => {
     mode: config.mode,
     readonly: config.readonly,
     ...getEditorConfig(config),
-    projectDir: getProjectDir(),
     activeEditor: findActiveEditor(),
     isEmbed,
     isLite,
@@ -1065,6 +1058,35 @@ const configureMultiFile = (config: Config) => {
     tab.classList.toggle('hidden', !isMultiFile);
   });
   document.documentElement.classList.toggle('multi-file', isMultiFile);
+
+  // allow re-ordering file tabs by drag and drop
+  fileSortable?.destroy();
+  if (isMultiFile) {
+    loadScript(draggableUrl, 'Draggable').then((Draggable: any) => {
+      fileSortable = new Draggable.Sortable(editorTabsContainer, {
+        draggable: '[data-multi-file]',
+        distance: 5, // The distance the pointer have moved before drag starts. This is useful for clickable draggable elements.
+      });
+      fileSortable.on('sortable:stop', (ev: any) => {
+        const config = getConfig();
+        const tabs = [...editorTabsContainer.querySelectorAll<HTMLElement>('[data-multi-file]')];
+        const files: Config['files'] = cloneObject(config.files);
+        files.sort((a, b) => {
+          const aIndex = tabs.findIndex((t) => t.dataset.editor === a.filename);
+          const bIndex = tabs.findIndex((t) => t.dataset.editor === b.filename);
+          return aIndex - bIndex;
+        });
+        const activeEditor: string =
+          ev.data?.dragEvent?.originalSource?.dataset?.editor || files[0]?.filename;
+        setConfig({
+          ...config,
+          activeEditor,
+          files,
+        });
+        showEditor(activeEditor);
+      });
+    });
+  }
 };
 
 const addPhpToken = (code: string) =>
@@ -2043,7 +2065,6 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false, oldConfig
     }
   }
   if (shouldReloadEditors) {
-    getProjectDir(true);
     await reloadEditors(combinedConfig);
   } else if (hasEditorConfig) {
     currentEditorConfig = {
diff --git a/src/livecodes/templates/multifile/react.ts b/src/livecodes/templates/multifile/react.ts
index 28d8b253b6..ddc17767d7 100644
--- a/src/livecodes/templates/multifile/react.ts
+++ b/src/livecodes/templates/multifile/react.ts
@@ -127,7 +127,7 @@ function App() {
     <>
       <div>
         <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
+          <img src={reactLogo} className="logo" alt="React logo" />
         </a>
       </div>
       <h1>React</h1>
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 0c47fb6254..83f8574c1e 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -120,6 +120,10 @@ export const doppioJvmBaseUrl = 'https://unpkg.com/@seth0x41/doppio@1.0.0/';
 
 export const dotUrl = /* @__PURE__ */ getUrl('dot@1.1.3/doT.js');
 
+export const draggableUrl = /* @__PURE__ */ getUrl(
+  '@shopify/draggable@1.2.1/build/umd/index.min.js',
+);
+
 export const ejsUrl = /* @__PURE__ */ getUrl('ejs@3.1.10/ejs.js');
 
 export const elkjsBaseUrl = /* @__PURE__ */ getUrl('elkjs@0.8.2/lib/');
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 0f5b0c1599..c7b7e55708 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1674,7 +1674,6 @@ export interface EditorOptions extends EditorConfig {
     | 'embed'
     | 'snippet'
     | 'add-snippet';
-  projectDir?: string;
   theme: Theme;
   isEmbed: boolean;
   isLite: boolean;
diff --git a/vendor-licenses.md b/vendor-licenses.md
index ac70c65302..4509b9d93a 100644
--- a/vendor-licenses.md
+++ b/vendor-licenses.md
@@ -242,6 +242,8 @@ ruby.wasm: [MIT License](https://github.com/ruby/ruby.wasm/blob/097b7ca8d2ed2a98
 
 Sass.js: [MIT License](https://github.com/medialize/sass.js/blob/71d9bed2cad10969efda9905aa1bddacc480f372/LICENSE)
 
+@shopify/draggable: [MIT License](https://github.com/Shopify/draggable/blob/8a1eed57f3ab2dff9371e8ce60fb39ac85871e8d/LICENSE.md)
+
 SnackBar: [MIT License](https://github.com/egoist/snackbar/blob/4bc2fb7afd32d53a39661418fa5189dbb6e4aa86/LICENSE)
 
 Solid: [MIT License](https://github.com/solidjs/solid/blob/0d83a1947aab4bea4223460d6756a38374ba391e/LICENSE)

From d14cbf273a7ef294e74102890aa1fcd623744c29 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 20 Jan 2026 17:01:44 +0200
Subject: [PATCH 066/143] load monaco language before creating the model

---
 src/livecodes/core.ts                 | 16 ----------------
 src/livecodes/editor/monaco/monaco.ts |  3 ++-
 2 files changed, 2 insertions(+), 17 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index c78f979c7e..b0e1f160c9 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -781,22 +781,6 @@ const createEditors = async (config: Config) => {
   if (isReload) {
     loadModuleTypes(editors, config, /* loadAll = */ true);
   }
-
-  // TODO: fix this
-  // workaround for reloading types for file models (e.g. `import { msg } from './msg.ts'`)
-  if (config.files?.length && editors[config.files[0].filename as EditorId].monaco) {
-    for (const file of config.files) {
-      const editorId = file.filename as EditorId;
-      if (getLanguageEditorId(file.language!) !== 'script') continue;
-      const editor = editors[editorId];
-      setTimeout(() => {
-        changingContent = true;
-        editor.setValue(editor.getValue());
-        setSavedStatus();
-        changingContent = false;
-      }, 200);
-    }
-  }
 };
 
 const reloadEditors = async (config: Config) => {
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 8fd673cfbb..c29f75ff4f 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -302,6 +302,8 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     }
   };
 
+  await loadMonacoLanguage(language);
+
   const getOrCreateModel = (value: string, lang: string | undefined, uri: Monaco.Uri) => {
     const model = monaco.editor.getModel(uri);
     if (model) {
@@ -346,7 +348,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     language: language.startsWith('vue') ? 'html' : monacoMapLanguage(language),
   });
   setModel(editor, options.value, language.startsWith('vue') ? 'html' : language);
-  loadMonacoLanguage(language);
 
   // avoid a race condition that prevents loading vue worker
   if (language.startsWith('vue')) {

From 8b3a25fc3bc660c87ec695082f12406875302b7d Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 21 Jan 2026 00:55:25 +0200
Subject: [PATCH 067/143] add editor tab scroll buttons

---
 src/livecodes/UI/create-language-menus.ts | 54 ++++++++++++++++++++---
 src/livecodes/UI/selectors.ts             | 10 ++++-
 src/livecodes/core.ts                     |  2 +-
 src/livecodes/html/app.html               | 10 ++++-
 src/livecodes/styles/app.scss             | 40 ++++++++++++++++-
 src/livecodes/styles/inc-multi-file.scss  |  6 ++-
 src/livecodes/styles/inc-rtl.scss         | 14 ++++++
 7 files changed, 125 insertions(+), 11 deletions(-)

diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index d348805712..961206d7d6 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -9,7 +9,13 @@ import type {
   Template,
 } from '../models';
 import { handleSlash, removeFormatting } from '../utils';
-import { getEditorSelector, getEditorSelectorDiv, getEditorTab } from './selectors';
+import {
+  getEditorScrollerEnd,
+  getEditorScrollerStart,
+  getEditorSelector,
+  getEditorTab,
+  getEditorTabScroller,
+} from './selectors';
 
 export const createLanguageMenus = (
   config: Config,
@@ -21,8 +27,7 @@ export const createLanguageMenus = (
   registerMenuButton: (menu: HTMLElement, button: HTMLElement) => void,
 ) => {
   const editorIds: EditorId[] = ['markup', 'style', 'script'];
-  const rootList = document.createElement('div');
-  document.querySelector('#select-editor')?.appendChild(rootList);
+  const rootList = getEditorTabScroller()!;
 
   let editorsNumber = editorIds.length;
 
@@ -162,6 +167,8 @@ export const createLanguageMenus = (
       editorSelector.classList.add('half-width');
     });
   }
+
+  handleEditorTabScroll();
 };
 
 export const createMultiFileEditorTab = ({
@@ -296,7 +303,7 @@ export const createMultiFileEditorTab = ({
   label.addEventListener('keydown', onKeyDown);
 
   const scrollTo = document.querySelector('#multi-file-scroll-to');
-  getEditorSelectorDiv()?.insertBefore(editorSelector, scrollTo);
+  getEditorTabScroller()?.insertBefore(editorSelector, scrollTo);
 
   if (isNewFile) {
     scrollTo?.scrollIntoView({ behavior: 'smooth', inline: 'end' });
@@ -304,6 +311,43 @@ export const createMultiFileEditorTab = ({
   }
 };
 
+const handleEditorTabScroll = () => {
+  // TODO: use CSS @container scroll-state instead
+
+  const scroller = getEditorTabScroller();
+  const startBtn = getEditorScrollerStart() as HTMLElement;
+  const endBtn = getEditorScrollerEnd() as HTMLElement;
+  if (!scroller || !startBtn || !endBtn) return;
+  const isRTL = () => document.documentElement.dir === 'rtl';
+
+  const updateScrollButtons = () => {
+    if (!scroller || !startBtn || !endBtn) return;
+    const canScrollLeft = scroller.scrollLeft > 0;
+    const canScrollRight = scroller.scrollLeft < scroller.scrollWidth - scroller.clientWidth;
+    startBtn.classList.toggle('hidden', !canScrollLeft && !isRTL());
+    endBtn.classList.toggle('hidden', !canScrollRight && !isRTL());
+  };
+
+  startBtn.addEventListener('click', () => {
+    scroller.scrollBy({
+      left: isRTL() ? scroller.clientWidth : -scroller.clientWidth,
+      behavior: 'smooth',
+    });
+    updateScrollButtons();
+  });
+  endBtn.addEventListener('click', () => {
+    scroller.scrollBy({
+      left: isRTL() ? -scroller.clientWidth : scroller.clientWidth,
+      behavior: 'smooth',
+    });
+    updateScrollButtons();
+  });
+
+  scroller.addEventListener('scroll', updateScrollButtons);
+  window.addEventListener('resize', updateScrollButtons);
+  updateScrollButtons();
+};
+
 export const createAddFileButton = ({ onclick: handleAddFileClick }: { onclick: () => void }) => {
   if (document.querySelector('#add-file-button')) return;
   const addFileButton = document.createElement('button');
@@ -316,7 +360,7 @@ export const createAddFileButton = ({ onclick: handleAddFileClick }: { onclick:
 
   const scrollTo = document.createElement('div');
   scrollTo.id = 'multi-file-scroll-to';
-  getEditorSelectorDiv()?.appendChild(scrollTo);
+  getEditorTabScroller()?.appendChild(scrollTo);
 };
 
 export const createProcessorItem = (processor: { name: string; title: string }) => {
diff --git a/src/livecodes/UI/selectors.ts b/src/livecodes/UI/selectors.ts
index 4fb6fef3f9..9d683ed649 100644
--- a/src/livecodes/UI/selectors.ts
+++ b/src/livecodes/UI/selectors.ts
@@ -181,8 +181,14 @@ export const getModalDisableRecoverCheckbox = /* @__PURE__ */ () =>
 
 export const getEditorSelector = /* @__PURE__ */ () => document.querySelector('#select-editor');
 
-export const getEditorSelectorDiv = /* @__PURE__ */ () =>
-  document.querySelector('#select-editor > div');
+export const getEditorTabScroller = /* @__PURE__ */ () =>
+  document.querySelector('#select-editor > div.editors-scroller');
+
+export const getEditorScrollerStart = /* @__PURE__ */ () =>
+  document.querySelector('#select-editor .editor-scroll-start');
+
+export const getEditorScrollerEnd = /* @__PURE__ */ () =>
+  document.querySelector('#select-editor .editor-scroll-end');
 
 export const getEditorTab = /* @__PURE__ */ (editorId: string) =>
   document.querySelector<HTMLElement>(`#select-editor .editor-title[data-editor="${editorId}"]`);
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index b0e1f160c9..7db9f2965a 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -1028,7 +1028,7 @@ const configureEditorTools = (language: Language | undefined) => {
 };
 
 const configureMultiFile = (config: Config) => {
-  const editorTabsContainer = UI.getEditorSelectorDiv()!;
+  const editorTabsContainer = UI.getEditorTabScroller()!;
   const singleFileTabs = [
     ...editorTabsContainer.querySelectorAll<HTMLElement>('[data-single-file]'),
   ];
diff --git a/src/livecodes/html/app.html b/src/livecodes/html/app.html
index b92bc6710c..5962dbdbe4 100644
--- a/src/livecodes/html/app.html
+++ b/src/livecodes/html/app.html
@@ -131,7 +131,15 @@
             </a>
             <div class="enable-motion"></div>
           </div>
-          <div id="select-editor"></div>
+          <div id="select-editor">
+            <button class="editor-scroll-btn editor-scroll-start">
+              <i class="icon-arrow-down"></i>
+            </button>
+            <div class="editors-scroller"></div>
+            <button class="editor-scroll-btn editor-scroll-end">
+              <i class="icon-arrow-down"></i>
+            </button>
+          </div>
         </div>
         <div class="toolbar-render">
           <div>
diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
index aa78647a68..975d62ea85 100644
--- a/src/livecodes/styles/app.scss
+++ b/src/livecodes/styles/app.scss
@@ -1318,10 +1318,48 @@ a.tools-pane-title {
   margin: 0 0 calc(-1 * var(--s2)) var(--s8);
   position: relative;
 
-  > div {
+  > div.editors-scroller {
     display: flex;
     height: 100%;
   }
+
+  .editor-scroll-btn {
+    align-items: center;
+    background: var(--editor-title-bg-color);
+    border-inline: 2px solid var(--toolbar-bg-color);
+    border-block: 1px solid var(--editor-title-bg-color);
+    border-top-left-radius: var(--editor-title-border-radius);
+    border-top-right-radius: var(--editor-title-border-radius);
+    color: var(--editor-title-color);
+    cursor: pointer;
+    display: none;
+    font-size: inherit;
+    justify-content: center;
+    margin-right: 2px;
+    top: 1px;
+
+    &:hover {
+      background-color: var(--editor-title-bg-active);
+      border-color: var(--editor-title-bg-active);
+      color: var(--editor-title-active);
+    }
+
+    &.hidden {
+      visibility: hidden;
+    }
+
+    &.editor-scroll-start {
+      i.icon-arrow-down {
+        transform: rotate(90deg);
+      }
+    }
+
+    &.editor-scroll-end {
+      i.icon-arrow-down {
+        transform: rotate(270deg);
+      }
+    }
+  }
 }
 
 a.editor-title {
diff --git a/src/livecodes/styles/inc-multi-file.scss b/src/livecodes/styles/inc-multi-file.scss
index ee0cd66db4..bab3622553 100644
--- a/src/livecodes/styles/inc-multi-file.scss
+++ b/src/livecodes/styles/inc-multi-file.scss
@@ -18,13 +18,17 @@
       display: flex;
       max-width: calc(70vw - 252px);
 
-      > div {
+      > div.editors-scroller {
         overflow-x: auto;
         overflow-y: hidden;
         scrollbar-width: none;
         width: unset;
       }
 
+      .editor-scroll-btn {
+        display: flex;
+      }
+
       .editor-title > span {
         max-width: 13em;
       }
diff --git a/src/livecodes/styles/inc-rtl.scss b/src/livecodes/styles/inc-rtl.scss
index 6536fd3800..55be43e8e9 100644
--- a/src/livecodes/styles/inc-rtl.scss
+++ b/src/livecodes/styles/inc-rtl.scss
@@ -29,6 +29,20 @@ html[dir='rtl'] {
     right: 98%;
   }
 
+  #select-editor .editor-scroll-btn {
+    &.editor-scroll-start {
+      i.icon-arrow-down {
+        transform: rotate(270deg);
+      }
+    }
+
+    &.editor-scroll-end {
+      i.icon-arrow-down {
+        transform: rotate(90deg);
+      }
+    }
+  }
+
   #modal .close-button {
     left: 1.5rem;
     right: unset;

From fa66765f2e2c26c83a5149847adfe0da19f660a5 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 21 Jan 2026 23:03:26 +0200
Subject: [PATCH 068/143] fix multifile tab styles

---
 src/livecodes/UI/create-language-menus.ts |  3 +--
 src/livecodes/styles/inc-multi-file.scss  | 30 ++++++++++++++++-------
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index 961206d7d6..d518e37fee 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -312,14 +312,13 @@ export const createMultiFileEditorTab = ({
 };
 
 const handleEditorTabScroll = () => {
-  // TODO: use CSS @container scroll-state instead
-
   const scroller = getEditorTabScroller();
   const startBtn = getEditorScrollerStart() as HTMLElement;
   const endBtn = getEditorScrollerEnd() as HTMLElement;
   if (!scroller || !startBtn || !endBtn) return;
   const isRTL = () => document.documentElement.dir === 'rtl';
 
+  // TODO: use CSS @container scroll-state instead when it has better browser support
   const updateScrollButtons = () => {
     if (!scroller || !startBtn || !endBtn) return;
     const canScrollLeft = scroller.scrollLeft > 0;
diff --git a/src/livecodes/styles/inc-multi-file.scss b/src/livecodes/styles/inc-multi-file.scss
index bab3622553..0ff6f68a44 100644
--- a/src/livecodes/styles/inc-multi-file.scss
+++ b/src/livecodes/styles/inc-multi-file.scss
@@ -16,7 +16,7 @@
 
     #select-editor {
       display: flex;
-      max-width: calc(70vw - 252px);
+      max-width: calc(100vw - 480px);
 
       > div.editors-scroller {
         overflow-x: auto;
@@ -50,15 +50,18 @@
     }
   }
 
-  @media only screen and (max-width: 1024px) {
-    #toolbar #select-editor {
-      max-width: calc(70vw - 180px);
-    }
-  }
+  @media only screen and (max-width: 768px) and (min-width: 481px) {
+    #toolbar {
+      #app-menu-button-help,
+      #app-menu-button-i18n,
+      #light-theme-button,
+      #dark-theme-button {
+        display: none !important;
+      }
 
-  @media only screen and (max-width: 768px) {
-    #toolbar #select-editor {
-      max-width: calc(70vw - 100px);
+      #select-editor {
+        max-width: calc(100vw - 210px);
+      }
     }
   }
 
@@ -84,6 +87,15 @@
     }
   }
 
+  .simple-mode {
+    #toolbar {
+      #add-file-button,
+      .delete-file-button {
+        display: none;
+      }
+    }
+  }
+
   #info-container {
     label[for='head-textarea'],
     #head-textarea,

From 39c619a3c8c3c6d1727253816c9e3d0856623295 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 22 Jan 2026 00:26:07 +0200
Subject: [PATCH 069/143] fixes

---
 src/livecodes/UI/create-language-menus.ts |  5 +++
 src/livecodes/core.ts                     | 51 ++++++++++++++---------
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index d518e37fee..ed5bd9846c 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -179,6 +179,7 @@ export const createMultiFileEditorTab = ({
   deleteFile,
   isMainFile,
   isNewFile = false,
+  isHidden = false,
 }: {
   title: string;
   showEditor: (filename: string) => void;
@@ -187,6 +188,7 @@ export const createMultiFileEditorTab = ({
   deleteFile: (filename: string) => void;
   isMainFile: boolean;
   isNewFile: boolean;
+  isHidden?: boolean;
 }) => {
   let currentFileName = title;
   if (getEditorTab(currentFileName)) return;
@@ -309,6 +311,9 @@ export const createMultiFileEditorTab = ({
     scrollTo?.scrollIntoView({ behavior: 'smooth', inline: 'end' });
     onDblClick();
   }
+  if (isHidden) {
+    editorSelector.style.display = 'none';
+  }
 };
 
 const handleEditorTabScroll = () => {
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 7db9f2965a..4f89fee40c 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -434,8 +434,10 @@ const highlightSelectedLanguage = (editorId: EditorId, language: Language) => {
 
 export const setEditorTitle = (editorId: EditorId, title: string) => {
   if (!isEditorId(editorId)) return;
-  const editorTitle = document.querySelector(`#${editorId}-selector span`) as HTMLElement;
-  const editorTitleContainer = document.querySelector(`#${editorId}-selector`) as HTMLElement;
+  const editorTitleContainer = document.querySelector(
+    `.editor-title[data-editor="${editorId}"]`,
+  ) as HTMLElement;
+  const editorTitle = editorTitleContainer.querySelector('span') as HTMLElement;
   const language = getLanguageByAlias(title);
   if (!editorTitle || !language) return;
   const config = getConfig();
@@ -604,6 +606,8 @@ const deleteFile = (filename: string) => {
   }
   const id = editorIds.findIndex((editorId) => editorId === filename);
   if (id > -1) {
+    const editorIdToShow = id === 0 ? 1 : id - 1;
+    showEditor(editorIds[editorIdToShow]);
     editorIds.splice(id, 1);
   }
   UI.getEditorDivs().forEach((editorDiv) => {
@@ -619,7 +623,7 @@ const deleteFile = (filename: string) => {
   dispatchChangeEvent();
 };
 
-const createEditorUI = (title: string) => {
+const createEditorUI = (title: string, isHidden = false) => {
   const editorsElement = UI.getEditorsElement();
   editorsElement.querySelector(`.editor[data-editor-id="${title}"]`)?.remove();
   const container = document.createElement('div');
@@ -634,6 +638,7 @@ const createEditorUI = (title: string) => {
     deleteFile,
     isMainFile: title === getMainFile(getConfig()),
     isNewFile: false,
+    isHidden,
   });
   return container;
 };
@@ -730,7 +735,7 @@ const createEditors = async (config: Config) => {
     editorIds.length = 0;
     for (const file of config.files) {
       const editorId = file.filename as EditorId;
-      const container = createEditorUI(file.filename);
+      const container = createEditorUI(file.filename, file.hidden);
       const editorOptions = {
         ...baseOptions,
         container,
@@ -1052,22 +1057,30 @@ const configureMultiFile = (config: Config) => {
         distance: 5, // The distance the pointer have moved before drag starts. This is useful for clickable draggable elements.
       });
       fileSortable.on('sortable:stop', (ev: any) => {
-        const config = getConfig();
-        const tabs = [...editorTabsContainer.querySelectorAll<HTMLElement>('[data-multi-file]')];
-        const files: Config['files'] = cloneObject(config.files);
-        files.sort((a, b) => {
-          const aIndex = tabs.findIndex((t) => t.dataset.editor === a.filename);
-          const bIndex = tabs.findIndex((t) => t.dataset.editor === b.filename);
-          return aIndex - bIndex;
-        });
-        const activeEditor: string =
-          ev.data?.dragEvent?.originalSource?.dataset?.editor || files[0]?.filename;
-        setConfig({
-          ...config,
-          activeEditor,
-          files,
+        // wait till DOM changes
+        requestAnimationFrame(() => {
+          const config = getConfig();
+          const tabs = [...editorTabsContainer.querySelectorAll<HTMLElement>('[data-multi-file]')];
+          const files: Config['files'] = cloneObject(config.files);
+          files.sort((a, b) => {
+            const aIndex = tabs.findIndex((t) => t.dataset.editor === a.filename);
+            const bIndex = tabs.findIndex((t) => t.dataset.editor === b.filename);
+            return aIndex - bIndex;
+          });
+          editorIds.sort((a, b) => {
+            const aIndex = tabs.findIndex((t) => t.dataset.editor === a);
+            const bIndex = tabs.findIndex((t) => t.dataset.editor === b);
+            return aIndex - bIndex;
+          });
+          const activeEditor: string =
+            ev.data?.dragEvent?.originalSource?.dataset?.editor || files[0]?.filename;
+          setConfig({
+            ...config,
+            activeEditor,
+            files,
+          });
+          showEditor(activeEditor);
         });
-        showEditor(activeEditor);
       });
     });
   }

From ef138601623f48a3dc77af32fb8d3d0463e9add7 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 23 Jan 2026 02:34:11 +0200
Subject: [PATCH 070/143] feat(Compilers): add support for json/json5

---
 README.md                                     |   2 +-
 docs/docs/languages/json.mdx                  |   3 +
 docs/docs/languages/text.mdx                  |   3 +
 scripts/build.js                              |   1 +
 src/livecodes/UI/create-language-menus.ts     |   6 +-
 .../monaco/languages/monaco-lang-json5.ts     | 127 ++++++++++++++++++
 src/livecodes/editor/monaco/monaco.ts         |  10 +-
 src/livecodes/languages/json/index.ts         |   1 +
 src/livecodes/languages/json/lang-json.ts     |  30 +++++
 src/livecodes/languages/languages.ts          |   4 +
 src/livecodes/languages/text/index.ts         |   1 +
 src/livecodes/languages/text/lang-text.ts     |  13 ++
 .../result/multi-file-result-page.ts          |  55 +++++---
 src/livecodes/vendors.ts                      |   2 +
 src/sdk/models.ts                             |   9 +-
 vendor-licenses.md                            |   2 +
 16 files changed, 247 insertions(+), 22 deletions(-)
 create mode 100644 docs/docs/languages/json.mdx
 create mode 100644 docs/docs/languages/text.mdx
 create mode 100644 src/livecodes/editor/monaco/languages/monaco-lang-json5.ts
 create mode 100644 src/livecodes/languages/json/index.ts
 create mode 100644 src/livecodes/languages/json/lang-json.ts
 create mode 100644 src/livecodes/languages/text/index.ts
 create mode 100644 src/livecodes/languages/text/lang-text.ts

diff --git a/README.md b/README.md
index 85bda62dc4..48048f8743 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ A [feature-rich](https://livecodes.io/docs/features/), open-source, **client-sid
 [![LiveCodes: npm version](https://img.shields.io/npm/v/livecodes)](https://www.npmjs.com/package/livecodes)
 [![LiveCodes: npm downloads](https://img.shields.io/npm/dm/livecodes)](https://www.npmjs.com/package/livecodes)
 [![LiveCodes: jsdelivr downloads](https://data.jsdelivr.com/v1/package/npm/livecodes/badge?style=rounded)](https://www.jsdelivr.com/package/npm/livecodes)
-[![LiveCodes: languages](https://img.shields.io/badge/languages-98-blue)](https://livecodes.io/docs/languages/)
+[![LiveCodes: languages](https://img.shields.io/badge/languages-99-blue)](https://livecodes.io/docs/languages/)
 [![LiveCodes: docs](https://img.shields.io/badge/Documentation-575757?logo=gitbook&logoColor=white)](https://livecodes.io/docs/)
 [![LiveCodes: llms.txt](https://img.shields.io/badge/llms.txt-575757?logo=googledocs&logoColor=white)](https://livecodes.io/docs/llms.txt)
 [![LiveCodes: llms-full.txt](https://img.shields.io/badge/llms--full.txt-575757?logo=googledocs&logoColor=white)](https://livecodes.io/docs/llms-full.txt)
diff --git a/docs/docs/languages/json.mdx b/docs/docs/languages/json.mdx
new file mode 100644
index 0000000000..3c7dbc17c0
--- /dev/null
+++ b/docs/docs/languages/json.mdx
@@ -0,0 +1,3 @@
+# JSON
+
+TODO ...
diff --git a/docs/docs/languages/text.mdx b/docs/docs/languages/text.mdx
new file mode 100644
index 0000000000..d80b25de3c
--- /dev/null
+++ b/docs/docs/languages/text.mdx
@@ -0,0 +1,3 @@
+# Text
+
+TODO ...
diff --git a/scripts/build.js b/scripts/build.js
index 90e5b6023f..06d441a7bc 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -160,6 +160,7 @@ const esmBuild = () =>
       'editor/monaco/languages/monaco-lang-astro.ts',
       'editor/monaco/languages/monaco-lang-clio.ts',
       'editor/monaco/languages/monaco-lang-imba.ts',
+      'editor/monaco/languages/monaco-lang-json5.ts',
       'editor/monaco/languages/monaco-lang-minizinc.ts',
       'editor/monaco/languages/monaco-lang-prolog.ts',
       // 'editor/monaco/languages/monaco-lang-sql.ts',
diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index ed5bd9846c..0d3153d19b 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -62,9 +62,9 @@ export const createLanguageMenus = (
     languageMenu.classList.add('dropdown-menu-' + editorId);
     menuScroller.appendChild(languageMenu);
 
-    const editorLanguages = [...window.deps.languages]
-      .filter((language) => language.editor === editorId)
-      .filter((language) => languageIsEnabled(language.name, config));
+    const editorLanguages = [...window.deps.languages].filter(
+      (language) => language.editor === editorId && languageIsEnabled(language.name, config),
+    );
 
     if (editorLanguages.length === 0) {
       editorSelector.classList.add('hidden');
diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-json5.ts b/src/livecodes/editor/monaco/languages/monaco-lang-json5.ts
new file mode 100644
index 0000000000..d31ab93157
--- /dev/null
+++ b/src/livecodes/editor/monaco/languages/monaco-lang-json5.ts
@@ -0,0 +1,127 @@
+export default {
+  config: {
+    comments: {
+      lineComment: '//',
+      blockComment: ['/*', '*/'],
+    },
+    brackets: [
+      ['{', '}'],
+      ['[', ']'],
+    ],
+    autoClosingPairs: [
+      { open: '{', close: '}' },
+      { open: '[', close: ']' },
+      { open: '"', close: '"' },
+      { open: "'", close: "'" },
+    ],
+    surroundingPairs: [
+      { open: '{', close: '}' },
+      { open: '[', close: ']' },
+      { open: '"', close: '"' },
+      { open: "'", close: "'" },
+    ],
+    folding: {
+      markers: {
+        start: /^\s*\/\*\s*#region\b/,
+        end: /^\s*\/\*\s*#endregion\b/,
+      },
+    },
+  },
+  tokens: {
+    defaultToken: '',
+    tokenPostfix: '.json5',
+
+    keywords: ['true', 'false', 'null', 'Infinity', 'NaN'],
+
+    symbols: /[=><!~?:&|+\-*\/\^%]+/,
+
+    escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
+
+    tokenizer: {
+      root: [
+        // Comments
+        [/\/\/.*$/, 'comment'],
+        [/\/\*/, 'comment', '@comment'],
+
+        // Whitespace
+        { include: '@whitespace' },
+
+        // Numbers
+        [/[+-]?0[xX][0-9a-fA-F]+/, 'number.hex'],
+        [/[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/, 'number'],
+        [/[+-]?Infinity/, 'number'],
+        [/NaN/, 'number'],
+
+        // Strings
+        [/"([^"\\]|\\.)*$/, 'string.invalid'],
+        [/'([^'\\]|\\.)*$/, 'string.invalid'],
+        [/"/, 'string', '@stringDouble'],
+        [/'/, 'string', '@stringSingle'],
+
+        // Keywords/booleans
+        [/true|false|null/, 'keyword'],
+
+        // Unquoted keys (identifier followed by colon)
+        [/[a-zA-Z_$][\w$]*(?=\s*:)/, 'key'],
+
+        // Delimiters
+        [/[{}()\[\]]/, '@brackets'],
+        [/[,:]/, 'delimiter'],
+      ],
+
+      comment: [
+        [/[^\/*]+/, 'comment'],
+        [/\*\//, 'comment', '@pop'],
+        [/[\/*]/, 'comment'],
+      ],
+
+      whitespace: [[/[ \t\r\n]+/, '']],
+
+      stringDouble: [
+        [/[^\\"]+/, 'string'],
+        [/@escapes/, 'string.escape'],
+        [/\\./, 'string.escape.invalid'],
+        [/"/, 'string', '@pop'],
+      ],
+
+      stringSingle: [
+        [/[^\\']+/, 'string'],
+        [/@escapes/, 'string.escape'],
+        [/\\./, 'string.escape.invalid'],
+        [/'/, 'string', '@pop'],
+      ],
+    },
+  },
+  completions: {
+    provideCompletionItems() {
+      const suggestions = [
+        {
+          label: 'true',
+          kind: 17, // monaco.languages.CompletionItemKind.Keyword,
+          insertText: 'true',
+        },
+        {
+          label: 'false',
+          kind: 17, // monaco.languages.CompletionItemKind.Keyword,
+          insertText: 'false',
+        },
+        {
+          label: 'null',
+          kind: 17, // monaco.languages.CompletionItemKind.Keyword,
+          insertText: 'null',
+        },
+        {
+          label: 'Infinity',
+          kind: 17, // monaco.languages.CompletionItemKind.Keyword,
+          insertText: 'Infinity',
+        },
+        {
+          label: 'NaN',
+          kind: 17, // monaco.languages.CompletionItemKind.Keyword,
+          insertText: 'NaN',
+        },
+      ];
+      return { suggestions };
+    },
+  },
+};
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index c29f75ff4f..efdd9d688b 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -96,7 +96,11 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
             ? 'vue'
             : ['svelte', 'malina', 'riot'].includes(language)
               ? ('razor' as Language) // avoid mixing code between markup & script editors when formatting
-              : mapLanguage(language);
+              : language === 'json' && (editorId.endsWith('.json5') || editorId.endsWith('.jsonc'))
+                ? 'json5'
+                : mapLanguage(language) === 'text'
+                  ? 'plaintext'
+                  : mapLanguage(language);
 
   try {
     (window as any).monaco = (window as any).monaco || (await loadMonaco()).monaco;
@@ -257,6 +261,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     astro: baseUrl + '{{hash:monaco-lang-astro.js}}',
     clio: baseUrl + '{{hash:monaco-lang-clio.js}}',
     imba: baseUrl + '{{hash:monaco-lang-imba.js}}',
+    json5: baseUrl + '{{hash:monaco-lang-json5.js}}',
     minizinc: baseUrl + '{{hash:monaco-lang-minizinc.js}}',
     prolog: baseUrl + '{{hash:monaco-lang-prolog.js}}',
     // sql: baseUrl + '{{hash:monaco-lang-sql.js}}', // TODO: add autocomplete
@@ -282,7 +287,8 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   };
 
   const loadMonacoLanguage = async (lang: Language) => {
-    if (monacoMapLanguage(lang) === 'vue') {
+    lang = monacoMapLanguage(lang);
+    if (lang === 'vue') {
       await addVueSupport();
       return;
     }
diff --git a/src/livecodes/languages/json/index.ts b/src/livecodes/languages/json/index.ts
new file mode 100644
index 0000000000..54315964c6
--- /dev/null
+++ b/src/livecodes/languages/json/index.ts
@@ -0,0 +1 @@
+export { json } from './lang-json';
diff --git a/src/livecodes/languages/json/lang-json.ts b/src/livecodes/languages/json/lang-json.ts
new file mode 100644
index 0000000000..355d9d84dd
--- /dev/null
+++ b/src/livecodes/languages/json/lang-json.ts
@@ -0,0 +1,30 @@
+import type { LanguageSpecs } from '../../models';
+import { json5Url } from '../../vendors';
+
+export const json: LanguageSpecs = {
+  name: 'json',
+  title: 'JSON',
+  info: false,
+  compiler: {
+    factory: () => {
+      let JSON5: { parse: (code: string) => any; stringify: (code: any) => string } | undefined;
+      return async (code, { options: { filename } }) => {
+        if (filename.endsWith('.json5') || filename.endsWith('.jsonc')) {
+          if (!JSON5) {
+            (self as any).importScripts(json5Url);
+            JSON5 = (self as any).JSON5;
+          }
+          try {
+            return JSON.stringify(JSON5?.parse(code) || JSON.parse(code), null, 2);
+          } catch {
+            return code;
+          }
+        }
+        return code;
+      };
+    },
+  },
+  extensions: ['json', 'json5', 'jsonc'],
+  editor: '',
+  multiFileSupport: true,
+};
diff --git a/src/livecodes/languages/languages.ts b/src/livecodes/languages/languages.ts
index d642d73002..6157690e78 100644
--- a/src/livecodes/languages/languages.ts
+++ b/src/livecodes/languages/languages.ts
@@ -31,6 +31,7 @@ import { imba } from './imba';
 import { java } from './java';
 import { javascript } from './javascript';
 import { jinja } from './jinja';
+import { json } from './json';
 import { jsx, tsx } from './jsx';
 import { julia } from './julia';
 import { less } from './less';
@@ -74,6 +75,7 @@ import { sucrase } from './sucrase';
 import { svelte, svelteApp } from './svelte';
 import { tcl } from './tcl';
 import { teal } from './teal';
+import { text } from './text';
 import { twig } from './twig';
 import { typescript } from './typescript';
 import { vento } from './vento';
@@ -169,4 +171,6 @@ export const languages: LanguageSpecs[] = [
   prolog,
   minizinc,
   blockly,
+  text,
+  json,
 ];
diff --git a/src/livecodes/languages/text/index.ts b/src/livecodes/languages/text/index.ts
new file mode 100644
index 0000000000..e2fbd1216e
--- /dev/null
+++ b/src/livecodes/languages/text/index.ts
@@ -0,0 +1 @@
+export { text } from './lang-text';
diff --git a/src/livecodes/languages/text/lang-text.ts b/src/livecodes/languages/text/lang-text.ts
new file mode 100644
index 0000000000..c3736812e1
--- /dev/null
+++ b/src/livecodes/languages/text/lang-text.ts
@@ -0,0 +1,13 @@
+import type { LanguageSpecs } from '../../models';
+
+export const text: LanguageSpecs = {
+  name: 'text',
+  title: 'Text',
+  info: false,
+  compiler: {
+    factory: () => async (code) => code,
+  },
+  extensions: ['txt', 'csv', 'tsv', 'plaintext'],
+  editor: '',
+  multiFileSupport: true,
+};
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 8aad490e85..35e3322baf 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -8,7 +8,12 @@ import {
   resolvePath,
 } from '../compiler/import-map';
 import { getMainFile } from '../config/utils';
-import { getLanguageByAlias, getLanguageCompiler, getLanguageEditorId } from '../languages/utils';
+import {
+  getLanguageByAlias,
+  getLanguageCompiler,
+  getLanguageEditorId,
+  mapLanguage,
+} from '../languages/utils';
 import type { CompileInfo, Config, SourceFile } from '../models';
 import { getAppCDN, modulesService } from '../services/modules';
 import { testImports } from '../toolspane/test-imports';
@@ -103,22 +108,25 @@ export const createMultiFileResultPage = async ({
   const relativeImports: Record<string, string> = {};
 
   // generate data urls for files
-  const getDataUrl = (file: SourceFile & { compiled: string }) => {
+  const getDataUrl = (file: SourceFile & { compiled: string }, saveToFileUrls = true) => {
     if (file.filename === mainFile) return;
     const content = file.compiled;
-    const mimeType = file.filename.endsWith('.json')
-      ? 'application/json'
-      : file.filename.endsWith('.svg')
-        ? 'image/svg+xml'
-        : getLanguageEditorId(file.language) === 'markup'
-          ? 'text/html'
-          : getLanguageEditorId(file.language) === 'style'
-            ? 'text/css'
-            : getLanguageEditorId(file.language) === 'script'
-              ? 'text/javascript'
-              : 'text/plain';
+    const mimeType =
+      mapLanguage(file.language) === 'json'
+        ? 'application/json'
+        : file.filename.endsWith('.svg')
+          ? 'image/svg+xml'
+          : getLanguageEditorId(file.language) === 'markup'
+            ? 'text/html'
+            : getLanguageEditorId(file.language) === 'style'
+              ? 'text/css'
+              : getLanguageEditorId(file.language) === 'script'
+                ? 'text/javascript'
+                : 'text/plain';
     const dataUrl = toDataUrl(content, mimeType);
-    fileUrls[file.filename] = dataUrl;
+    if (saveToFileUrls) {
+      fileUrls[file.filename] = dataUrl;
+    }
     return dataUrl;
   };
 
@@ -252,6 +260,17 @@ export const createMultiFileResultPage = async ({
     file.compiled = replaceImports(file.compiled, config, {
       importMap: fileImports,
     });
+
+    // replace relative URL access (e.g. img.src="./logo.svg") or fetching files (e.g. fetch("./data.json"))
+    let dataUrl: string | undefined; // cache data url
+    compiledFiles
+      .filter((f) => getLanguageEditorId(f.language) === 'script')
+      .forEach((f) => {
+        f.compiled = f.compiled.replace(
+          new RegExp(`(['"\`])(\\.\\/)?${file.filename}`, 'g'),
+          `$1${(dataUrl ??= getDataUrl(file, /* saveToFileUrls */ false))}`,
+        );
+      });
   });
 
   Object.keys(codeImports)
@@ -259,7 +278,13 @@ export const createMultiFileResultPage = async ({
     .forEach((mod) => {
       const file = findFile(mod.replace('~/', './'));
       if (!file) return;
-      const dataUrl = fileUrls[file.filename] || getDataUrl(file);
+      const dataUrl =
+        fileUrls[file.filename] ||
+        (mapLanguage(file.language) === 'json'
+          ? toDataUrl(`export default ${file.compiled};`)
+          : mapLanguage(file.language) === 'text'
+            ? toDataUrl(`export default \`${escapeCode(file.compiled)}\`;`)
+            : getDataUrl(file));
       if (!dataUrl) return;
       codeImports[mod] = dataUrl;
       fileUrls[file.filename] = dataUrl;
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 83f8574c1e..77a49014ce 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -270,6 +270,8 @@ export const jsclUrl = /* @__PURE__ */ getUrl(
   'gh:jscl-project/jscl-project.github.io@058adc599f0d012718ef3ad28e704a92c4dd741e/jscl.js',
 );
 
+export const json5Url = /* @__PURE__ */ getUrl('json5@2.2.3/dist/index.min.js');
+
 export const jsZipUrl = /* @__PURE__ */ getUrl('jszip@3.10.1/dist/jszip.js');
 
 export const juliaWasmBaseUrl = /* @__PURE__ */ getUrl('@chriskoch/julia-wasm@1.0.4');
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index c7b7e55708..4a0350e198 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -998,6 +998,8 @@ export type Language =
   | 'js'
   | 'mjs'
   | 'json'
+  | 'json5'
+  | 'jsonc'
   | 'babel'
   | 'es'
   | 'sucrase'
@@ -1157,7 +1159,12 @@ export type Language =
   | 'blockly'
   | 'blockly.xml'
   | 'xml'
-  | 'pintora';
+  | 'pintora'
+  | 'text'
+  | 'txt'
+  | 'csv'
+  | 'tsv'
+  | 'plaintext';
 
 export interface Editor {
   /**
diff --git a/vendor-licenses.md b/vendor-licenses.md
index 4509b9d93a..b663f615b0 100644
--- a/vendor-licenses.md
+++ b/vendor-licenses.md
@@ -116,6 +116,8 @@ JSCL: [MIT License](https://cdn.jsdelivr.net/gh/jscl-project/jscl-project.github
 
 JSCPP: [MIT License](https://github.com/felixhao28/JSCPP/blob/befbd6b48666007151c259c5dd291ab028ad4c04/LICENSE)
 
+JSON5: [MIT License](https://github.com/json5/json5/blob/b935d4a280eafa8835e6182551b63809e61243b0/LICENSE.md)
+
 JSZip: [MIT License](https://github.com/Stuk/jszip/blob/3db5fdc85586ef6c26d15b503c45ce8e42905d77/LICENSE.markdown)
 
 konnors-ninja-keys: [MIT License](https://github.com/KonnorRogers/konnors-ninja-keys/blob/6dde465ab2c64329c4284a1f95d9d7501acdb86a/LICENSE)

From 224c694194ae7dc31b34dfce99348e31061b3701 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 23 Jan 2026 02:54:59 +0200
Subject: [PATCH 071/143] fix handleChangeContent

---
 src/livecodes/core.ts                         | 27 ++++++++++---------
 .../result/multi-file-result-page.ts          |  1 +
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 4f89fee40c..69f89318ad 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -541,7 +541,7 @@ const addFile = async (
   editorLanguages![validName] = fileLanguage;
   editors[validName] = editor;
   editorIds.push(validName);
-  handleChangeContent(validName);
+  handleChangeContent(editor);
   if (config.autoupdate) {
     run();
   }
@@ -3035,8 +3035,9 @@ const handleChangeLanguage = () => {
   }
 };
 
-const handleChangeContent = (editorId?: EditorId) => {
-  const contentChanged = async (editorId: EditorId, loading: boolean) => {
+const handleChangeContent = (editor?: CodeEditor) => {
+  const contentChanged = async (editor: CodeEditor, loading: boolean) => {
+    const editorId = editor.getEditorId();
     updateConfig();
     const config = getConfig();
     addConsoleInputCodeCompletion();
@@ -3075,25 +3076,25 @@ const handleChangeContent = (editorId?: EditorId) => {
     loadModuleTypes(editors, config);
   };
 
-  const debouncecontentChanged = (editorId: EditorId) =>
+  const debouncecontentChanged = (editor: CodeEditor) =>
     debounce(
       async () => {
-        await contentChanged(editorId, changingContent);
+        await contentChanged(editor, changingContent);
       },
       () => getConfig().delay ?? defaultConfig.delay,
     );
 
-  const subscribeEditor = (editorId: EditorId) => {
-    if (!editorId || !editors?.[editorId]) return;
-    editors[editorId].onContentChanged(debouncecontentChanged(editorId));
-    editors[editorId].onContentChanged(setSavedStatus);
+  const subscribeEditor = (editor: CodeEditor) => {
+    if (!editor) return;
+    editor.onContentChanged(debouncecontentChanged(editor));
+    editor.onContentChanged(setSavedStatus);
   };
 
-  if (editorId) {
-    subscribeEditor(editorId);
+  if (editor) {
+    subscribeEditor(editor);
   } else {
-    Object.keys(editors).forEach((editorId) => {
-      subscribeEditor(editorId);
+    Object.values(editors).forEach((editor) => {
+      subscribeEditor(editor);
     });
   }
 };
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 35e3322baf..dc0aef4dfd 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -262,6 +262,7 @@ export const createMultiFileResultPage = async ({
     });
 
     // replace relative URL access (e.g. img.src="./logo.svg") or fetching files (e.g. fetch("./data.json"))
+    // note that the URLs should be relative to the main file (e.g. index.html)
     let dataUrl: string | undefined; // cache data url
     compiledFiles
       .filter((f) => getLanguageEditorId(f.language) === 'script')

From 0350cfcea86dee6b268fadbdf9f6290d8885467c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 24 Jan 2026 10:07:27 +0200
Subject: [PATCH 072/143] add `lockFiles` config option

---
 src/livecodes/UI/create-language-menus.ts |  7 +++--
 src/livecodes/config/config.ts            |  1 +
 src/livecodes/config/default-config.ts    |  7 ++---
 src/livecodes/config/validate-config.ts   |  1 +
 src/livecodes/core.ts                     | 33 +++++++++++++----------
 src/sdk/models.ts                         |  9 ++++++-
 6 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index 0d3153d19b..1d1deb83a8 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -180,6 +180,7 @@ export const createMultiFileEditorTab = ({
   isMainFile,
   isNewFile = false,
   isHidden = false,
+  isLocked = false,
 }: {
   title: string;
   showEditor: (filename: string) => void;
@@ -189,6 +190,7 @@ export const createMultiFileEditorTab = ({
   isMainFile: boolean;
   isNewFile: boolean;
   isHidden?: boolean;
+  isLocked?: boolean;
 }) => {
   let currentFileName = title;
   if (getEditorTab(currentFileName)) return;
@@ -205,7 +207,7 @@ export const createMultiFileEditorTab = ({
   label.addEventListener('paste', removeFormatting, false);
   editorSelector.appendChild(label);
 
-  if (!isMainFile) {
+  if (!isMainFile && !isLocked) {
     const deleteButton = document.createElement('button');
     deleteButton.classList.add('delete-file-button');
     deleteButton.innerHTML = deleteIcon;
@@ -234,6 +236,7 @@ export const createMultiFileEditorTab = ({
   const accept = async () => {
     label.contentEditable = 'false';
     eventAttached = false;
+    if (isLocked) return;
     label.innerText = label.innerText.trim().replaceAll('\n', '');
     const success =
       isNewFile && typeof addFile === 'function'
@@ -281,7 +284,7 @@ export const createMultiFileEditorTab = ({
 
   let eventAttached = false;
   const onDblClick = () => {
-    if (!getEditorSelector()?.contains(label)) return;
+    if (isLocked || !getEditorSelector()?.contains(label)) return;
     label.contentEditable = 'true';
     label.style.maxWidth = 'unset';
     requestAnimationFrame(() => {
diff --git a/src/livecodes/config/config.ts b/src/livecodes/config/config.ts
index 3470506c3c..41d5fc9c14 100644
--- a/src/livecodes/config/config.ts
+++ b/src/livecodes/config/config.ts
@@ -35,6 +35,7 @@ export const getContentConfig = (config: Config | ContentConfig): ContentConfig
     files: config.files,
     mainFile: config.mainFile,
     fileLanguages: config.fileLanguages,
+    lockFiles: config.lockFiles,
     stylesheets: config.stylesheets,
     scripts: config.scripts,
     cssPreset: config.cssPreset,
diff --git a/src/livecodes/config/default-config.ts b/src/livecodes/config/default-config.ts
index effdddbf28..4b106797d8 100644
--- a/src/livecodes/config/default-config.ts
+++ b/src/livecodes/config/default-config.ts
@@ -37,12 +37,13 @@ export const defaultConfig: Config = {
     language: 'javascript',
     content: '',
   },
-  mainFile: undefined,
-  files: [],
-  fileLanguages: {},
   stylesheets: [],
   scripts: [],
   cssPreset: '',
+  files: [],
+  mainFile: undefined,
+  fileLanguages: {},
+  lockFiles: false,
   imports: {},
   types: {},
   tests: {
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
index 66cdc39e36..13ff8cb500 100644
--- a/src/livecodes/config/validate-config.ts
+++ b/src/livecodes/config/validate-config.ts
@@ -212,6 +212,7 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
       : {}),
     ...(is(config.mainFile, 'string') ? { mainFile: config.mainFile } : {}),
     ...(is(config.fileLanguages, 'object') ? { fileLanguages: validFileLanguages } : {}),
+    ...(is(config.lockFiles, 'boolean') ? { lockFiles: config.lockFiles } : {}),
     ...(is(config.tools, 'object')
       ? { tools: validateToolsProps(config.tools as Config['tools']) }
       : {}),
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 69f89318ad..4503810d4c 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -631,14 +631,16 @@ const createEditorUI = (title: string, isHidden = false) => {
   container.dataset.multiFile = 'true';
   container.classList.add('editor');
   editorsElement.insertBefore(container, UI.getEditorToolbar());
+  const config = getConfig();
   createMultiFileEditorTab({
     title,
     showEditor,
     renameFile,
     deleteFile,
-    isMainFile: title === getMainFile(getConfig()),
+    isMainFile: title === getMainFile(config),
     isNewFile: false,
     isHidden,
+    isLocked: config.lockFiles || config.readonly,
   });
   return container;
 };
@@ -711,18 +713,21 @@ const createEditors = async (config: Config) => {
   };
 
   if (config.files?.length) {
-    createAddFileButton({
-      onclick: () =>
-        createMultiFileEditorTab({
-          title: '        ',
-          showEditor,
-          addFile: async (filename: string) => addFile(filename, baseOptions),
-          renameFile,
-          deleteFile,
-          isMainFile: false,
-          isNewFile: true,
-        }),
-    });
+    if (!config.lockFiles && !config.readonly) {
+      createAddFileButton({
+        onclick: () =>
+          createMultiFileEditorTab({
+            title: '        ',
+            showEditor,
+            addFile: async (filename: string) => addFile(filename, baseOptions),
+            renameFile,
+            deleteFile,
+            isMainFile: false,
+            isNewFile: true,
+            isLocked: false,
+          }),
+      });
+    }
 
     editorLanguages = { markup: 'html', style: 'css', script: 'javascript' };
     editors = {
@@ -1050,7 +1055,7 @@ const configureMultiFile = (config: Config) => {
 
   // allow re-ordering file tabs by drag and drop
   fileSortable?.destroy();
-  if (isMultiFile) {
+  if (isMultiFile && !config.lockFiles && !config.readonly) {
     loadScript(draggableUrl, 'Draggable').then((Draggable: any) => {
       fileSortable = new Draggable.Sortable(editorTabsContainer, {
         draggable: '[data-multi-file]',
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 4a0350e198..f2e4675a67 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -406,7 +406,7 @@ export interface EmbedOptions {
 export interface Config extends ContentConfig, AppConfig, UserConfig {}
 
 export interface SingleFileConfig
-  extends Omit<ContentConfig, 'files' | 'mainFile' | 'fileLanguages'>,
+  extends Omit<ContentConfig, 'files' | 'mainFile' | 'fileLanguages' | 'lockFiles'>,
     AppConfig,
     UserConfig {}
 
@@ -519,6 +519,12 @@ export interface ContentConfig {
    */
   fileLanguages?: Partial<Record<Language, Language>>;
 
+  /**
+   * When `true`, the user won't be able to add/rename/re-order/delete files. The file content can still be edited.
+   * @default false
+   */
+  lockFiles?: boolean;
+
   /**
    * List of URLs for [external stylesheets](https://livecodes.io/docs/features/external-resources) to add to the [result page](https://livecodes.io/docs/features/result).
    */
@@ -626,6 +632,7 @@ export type MultiFileContentConfig = Pick<
   | 'files'
   | 'mainFile'
   | 'fileLanguages'
+  | 'lockFiles'
   | 'languages'
   | 'processors'
   | 'customSettings'

From b58be32b4e881a6ad85feb711a370a333367cf0b Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 25 Jan 2026 17:50:40 +0200
Subject: [PATCH 073/143] allow running tests in multifile projects

---
 .../i18n/locales/en/translation.lokalise.json |   4 +
 src/livecodes/i18n/locales/en/translation.ts  |   1 +
 .../result/multi-file-result-page.ts          |  20 ++-
 src/livecodes/templates/multifile/index.ts    |   2 +
 src/livecodes/templates/multifile/jest.ts     | 144 ++++++++++++++++++
 src/sdk/models.ts                             |   3 +-
 6 files changed, 170 insertions(+), 4 deletions(-)
 create mode 100644 src/livecodes/templates/multifile/jest.ts

diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
index d58489cf6b..e62c8a94f5 100644
--- a/src/livecodes/i18n/locales/en/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -2564,6 +2564,10 @@
     "notes": "",
     "translation": "JavaScript Template"
   },
+  "templates.multifile.jest": {
+    "notes": "",
+    "translation": "Jest Template"
+  },
   "templates.multifile.lit": {
     "notes": "",
     "translation": "Lit Template"
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
index 10c510dbcf..bdadbf714b 100644
--- a/src/livecodes/i18n/locales/en/translation.ts
+++ b/src/livecodes/i18n/locales/en/translation.ts
@@ -987,6 +987,7 @@ const translation = {
       blank: 'Blank Template',
       heading: 'Multi-file Templates',
       javascript: 'JavaScript Template',
+      jest: 'Jest Template',
       lit: 'Lit Template',
       loading: 'Loading multi-file templates...',
       preact: 'Preact Template',
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index dc0aef4dfd..c829a96a79 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -22,6 +22,7 @@ import {
   escapeCode,
   escapeScript,
   getAbsoluteUrl,
+  getRandomString,
   isRelativeUrl,
   objectMap,
   toCamelCase,
@@ -36,7 +37,6 @@ export const createMultiFileResultPage = async ({
   forExport,
   template,
   baseUrl,
-  // singleFileResult,
   runTests,
   compileInfo,
 }: {
@@ -51,7 +51,21 @@ export const createMultiFileResultPage = async ({
   compileInfo: CompileInfo;
 }): Promise<string> => {
   const absoluteBaseUrl = getAbsoluteUrl(baseUrl);
-  compiledFiles = cloneObject(compiledFiles); // avoid mutation
+  const testsFilename = `tests.${getRandomString()}.js`;
+  // avoid mutation
+  compiledFiles = cloneObject(
+    [
+      ...compiledFiles,
+      runTests
+        ? {
+            filename: testsFilename,
+            content: config.tests?.content || '',
+            compiled: compiledTests,
+            language: 'js',
+          }
+        : null,
+    ].filter((x) => x != null),
+  );
   const mainFile = getMainFile(config);
   const mainFileHTML = compiledFiles.find((f) => f.filename === mainFile)?.compiled || '';
 
@@ -535,7 +549,7 @@ export const createMultiFileResultPage = async ({
     testScript.dataset.env = 'development';
     testScript.innerHTML = `
 const {afterAll, afterEach, beforeAll, beforeEach, describe, fdescribe, xdescribe, it, test, fit, xtest, xit, expect, jest} = window.browserJest;
-${escapeScript(compiledTests)}
+${escapeScript(compiledFiles.find((f) => f.filename === testsFilename)?.compiled || '')}
 
 window.browserJest.run().then(results => {
   parent.postMessage({type: 'testResults', payload: {results: results.testResults }}, '*');
diff --git a/src/livecodes/templates/multifile/index.ts b/src/livecodes/templates/multifile/index.ts
index 6bf051c567..c17e9dbf64 100644
--- a/src/livecodes/templates/multifile/index.ts
+++ b/src/livecodes/templates/multifile/index.ts
@@ -1,5 +1,6 @@
 import { blank } from './blank';
 import { javascript } from './javascript';
+import { jest } from './jest';
 import { lit } from './lit';
 import { preact } from './preact';
 import { react } from './react';
@@ -18,4 +19,5 @@ export const multifileTemplates = [
   svelte,
   solid,
   lit,
+  jest,
 ];
diff --git a/src/livecodes/templates/multifile/jest.ts b/src/livecodes/templates/multifile/jest.ts
new file mode 100644
index 0000000000..38b105cafd
--- /dev/null
+++ b/src/livecodes/templates/multifile/jest.ts
@@ -0,0 +1,144 @@
+import type { Template } from '../../models';
+
+export const jest: Template = {
+  name: 'multifile-jest',
+  title: window.deps.translateString('templates.multifile.jest', 'Jest Template'),
+  thumbnail: 'assets/templates/jest.svg',
+  mainFile: 'index.html',
+  activeEditor: 'Counter.js',
+  autotest: true,
+  files: [
+    {
+      filename: 'index.html',
+      language: 'html',
+      content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title></title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>Hello, <span id="title">World</span>!</h1>
+      <img class="logo" alt="logo" src="http://127.0.0.1:8080/livecodes/assets/templates/jest.svg" />
+      <p>You clicked <span id="counter">0</span> times.</p>
+      <button id="counter-button">Click me</button>
+      <p class="info">Run tests in the "Tests" panel below.</p>
+    </div>
+
+    <script type="module" src="script.js"></script>
+  </body>
+</html>
+`,
+    },
+    {
+      filename: 'styles.css',
+      language: 'css',
+      content: `.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
+}
+.logo {
+  width: 150px;
+}
+.info {
+  color: #404040;
+  font-size: 0.9em;
+  margin: 2em;
+}
+`,
+    },
+    {
+      filename: 'script.js',
+      language: 'javascript',
+      content: `import { Counter } from './Counter.js';
+
+const title = document.querySelector("#title");
+const count = document.querySelector("#counter");
+const button = document.querySelector("#counter-button");
+
+title.innerText = "Jest";
+const counter = new Counter();
+button.addEventListener(
+  "click",
+  () => {
+    counter.increment();
+    count.innerText = counter.getValue();
+  },
+  false
+);
+`,
+    },
+    {
+      filename: 'Counter.js',
+      language: 'javascript',
+      content: `export class Counter {
+  count;
+
+  constructor() {
+    this.count = 0;
+  }
+
+  increment() {
+    this.count += 1;
+  }
+
+  getValue() {
+    return this.count;
+  }
+}
+`,
+    },
+  ],
+  tests: {
+    language: 'tsx',
+    content: `import { fireEvent, screen } from "@testing-library/dom";
+import "@testing-library/jest-dom";
+import { assert } from "chai";
+import { Counter } from "./Counter.js";
+
+describe("Counter Class", () => {
+  test("Should initialize count with zero", () => {
+    const counter = new Counter();
+    expect(counter.getValue()).toBe(0);
+  });
+
+  test("Should increment", () => {
+    const counter = new Counter();
+    counter.increment();
+    counter.increment();
+    counter.increment();
+    assert.equal(counter.getValue(), 3);
+  });})
+
+describe("Page", () => {
+  test("Should display title", async () => {
+    expect(screen.getByText("Hello", { exact: false })).toHaveTextContent(
+      "Hello, Jest!"
+    );
+  });
+
+  test("Should display logo", async () => {
+    expect(document.querySelector('.logo').src).toContain('jest.svg');
+  });
+
+  test("Should increment counter on button click", async () => {
+    fireEvent.click(screen.getByText("Click me"));
+    fireEvent.click(screen.getByText("Click me"));
+    fireEvent.click(screen.getByText("Click me"));
+    expect(screen.getByText("You clicked", { exact: false })).toHaveTextContent(
+      "You clicked 3 times."
+    );
+  });
+});
+`,
+  },
+  tools: {
+    enabled: 'all',
+    active: 'tests',
+    status: 'open',
+  },
+};
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index f2e4675a67..cd4ab9e3bf 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1562,7 +1562,8 @@ export type TemplateName =
   | 'multifile-preact'
   | 'multifile-svelte'
   | 'multifile-solid'
-  | 'multifile-lit';
+  | 'multifile-lit'
+  | 'multifile-jest';
 
 export interface Tool {
   name: 'console' | 'compiled' | 'tests';

From 0d7a3434504823361c85d3abac2390cbb02d3b9c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Mon, 26 Jan 2026 16:46:35 +0200
Subject: [PATCH 074/143] import as multifile projects

---
 src/livecodes/UI/import.ts          |  17 +-
 src/livecodes/config/utils.ts       |   2 +-
 src/livecodes/core.ts               |  24 ++-
 src/livecodes/import/files.ts       | 259 +++++++++++++++++++++++-----
 src/livecodes/import/github-dir.ts  |  23 +--
 src/livecodes/import/github-gist.ts |   4 +-
 src/livecodes/import/github.ts      |  99 ++---------
 src/livecodes/import/gitlab-dir.ts  |   2 +
 src/livecodes/import/utils.ts       |  75 ++++++--
 src/livecodes/import/zip.ts         |  23 +--
 10 files changed, 336 insertions(+), 192 deletions(-)

diff --git a/src/livecodes/UI/import.ts b/src/livecodes/UI/import.ts
index 59e1dafd69..2eb922e44d 100644
--- a/src/livecodes/UI/import.ts
+++ b/src/livecodes/UI/import.ts
@@ -1,8 +1,7 @@
 import { defaultConfig } from '../config/default-config';
 import { importScreen } from '../html';
-import { importFromFiles } from '../import/files';
+import type { importFromFiles as importFromFilesFn } from '../import/files';
 import { importCode } from '../import/import';
-import type { populateConfig as populateConfigFn } from '../import/utils';
 import type {
   Config,
   ContentConfig,
@@ -63,7 +62,7 @@ export const createImportUI = ({
   eventsManager,
   getUser,
   loadConfig,
-  populateConfig,
+  importFromFiles,
   projectStorage,
   showScreen,
 }: {
@@ -73,7 +72,7 @@ export const createImportUI = ({
   eventsManager: EventsManager;
   getUser: (() => Promise<void | User>) | undefined;
   loadConfig: (newConfig: Partial<ContentConfig>, url?: string) => Promise<void>;
-  populateConfig: typeof populateConfigFn;
+  importFromFiles: typeof importFromFilesFn;
   projectStorage: ProjectStorage | undefined;
   showScreen: (screen: Screen['screen'], options?: any) => Promise<void>;
 }) => {
@@ -111,10 +110,14 @@ export const createImportUI = ({
 
   const codeImportInput = getCodeImportInput(importContainer);
   eventsManager.addEventListener(codeImportInput, 'change', () => {
-    if (!codeImportInput.files?.length) return;
+    const files = codeImportInput.files;
+    if (!files?.length) return;
     notifications.info(window.deps.translateString('generic.loading', 'Loading...'));
-    importFromFiles(codeImportInput.files, populateConfig, eventsManager)
-      .then(loadConfig)
+    importFromFiles({ files })
+      .then((fileConfig) => {
+        if (Object.keys(fileConfig).length === 0) return;
+        return loadConfig(fileConfig);
+      })
       .then(modal.close)
       .catch((message) => {
         notifications.error(message);
diff --git a/src/livecodes/config/utils.ts b/src/livecodes/config/utils.ts
index f0074f40b0..97c99b8da7 100644
--- a/src/livecodes/config/utils.ts
+++ b/src/livecodes/config/utils.ts
@@ -16,7 +16,7 @@ export const getSource = <T extends Config | Cache>(
 ): T['markup'] | T['files'][0] | undefined =>
   isEditorId(editorId) ? config[editorId] : config.files.find((f) => f.filename === editorId);
 
-export const getMainFile = (config: Config | Cache) =>
+export const getMainFile = (config: { mainFile?: string; files?: Config['files'] }) =>
   !config.files?.length
     ? undefined
     : config.mainFile && config.files.find((f) => f.filename === config.mainFile)
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 4503810d4c..2d12400bf9 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -77,7 +77,6 @@ import { appLanguages } from './i18n/app-languages';
 import { isGithub } from './import/check-src';
 import { importCompressedCode } from './import/code';
 import { importFromFiles } from './import/files';
-import { populateConfig } from './import/utils';
 import {
   getFileLanguage,
   getLanguageByAlias,
@@ -3916,7 +3915,7 @@ const handleImport = () => {
       eventsManager,
       getUser: authService?.getUser,
       loadConfig,
-      populateConfig,
+      importFromFiles,
       projectStorage: stores.projects,
       showScreen,
     });
@@ -5284,13 +5283,24 @@ const handleDropFiles = () => {
 
   eventsManager.addEventListener(document, 'drop', (event: DragEvent) => {
     event.preventDefault();
-    const files = event.dataTransfer?.files;
-    if (!files?.length) return;
-
-    importFromFiles(files, populateConfig, eventsManager)
-      .then(loadConfig)
+    if (!event.dataTransfer) return;
+    // TODO: check saved status
+    modal.show(loadingMessage(), { size: 'small', autoFocus: false });
+    const files = event.dataTransfer.files;
+    const items = event.dataTransfer.items; // for directories
+    if (!files?.length && !items?.length) return;
+    const entries = { files, items };
+
+    importFromFiles(entries)
+      .then(async (fileConfig) => {
+        if (Object.keys(fileConfig).length === 0) return;
+        await loadConfig(fileConfig);
+      })
       .catch((message) => {
         notifications.error(message);
+      })
+      .finally(() => {
+        modal.close();
       });
   });
 
diff --git a/src/livecodes/import/files.ts b/src/livecodes/import/files.ts
index 61365e835f..a86ee3a91a 100644
--- a/src/livecodes/import/files.ts
+++ b/src/livecodes/import/files.ts
@@ -1,59 +1,232 @@
-import type { ContentConfig, EventsManager } from '../models';
+import { getFileLanguage } from '../languages';
 import { importFromImage } from './image';
-import type { SourceFile, populateConfig as populateConfigFn } from './utils';
+import { populateConfig } from './utils';
 import { importFromZip } from './zip';
 
 export const importFromFiles = async (
-  files: FileList,
-  populateConfig: typeof populateConfigFn,
-  eventsManager: EventsManager,
+  // Use DataTransferItemList interface for folder support
+  entries: { files: FileList; items?: DataTransferItemList | undefined },
 ) => {
-  const loadFiles = (files: FileList) =>
-    new Promise<Partial<ContentConfig>>((resolve, reject) => {
-      const sourceFiles: SourceFile[] = [];
-
-      for (const file of files) {
-        // Max 100 MB allowed
-        const maxSizeAllowed = 100 * 1024 * 1024;
-        if (file.size > maxSizeAllowed) {
-          reject('Error: Exceeded size 100 MB');
-          return;
+  if (!entries.items?.length && !entries.files?.length) return {};
+
+  if (entries.files?.length === 1) {
+    const file = entries.files[0];
+    if (file.type.startsWith('image/') && file.type !== 'image/svg+xml') {
+      return importFromImage(file);
+    } else if (file.name.endsWith('.zip')) {
+      return importFromZip(file, populateConfig);
+    }
+  }
+
+  const localFiles = filterFiles(await getLocalFiles(entries));
+
+  if (!localFiles?.length) return {};
+  return populateConfig(localFiles, {});
+};
+
+export const filterFiles = (files: LocalFile[]) => {
+  const maxSizeAllowed = 100 * 1024 * 1024; // 100 MB
+  const localFiles = files.filter(
+    (file) =>
+      !file.path.startsWith('.') && // e.g. .git, .vscode
+      !file.path.includes('node_modules') &&
+      !file.path.startsWith('dist') &&
+      !file.filename.includes('-lock.json') &&
+      (!file.size || file.size <= maxSizeAllowed) &&
+      getFileLanguage(file.filename) != null,
+  );
+  localFiles.sort((a, b) => {
+    if (a.filename.endsWith('.md')) return 1;
+    if (b.filename.endsWith('.md')) return -1;
+
+    if (!a.path.includes('/') && a.filename.endsWith('.json')) return 1;
+    if (!b.path.includes('/') && b.filename.endsWith('.json')) return -1;
+
+    if (!a.path.includes('/') && a.filename.includes('.config.')) return 1;
+    if (!b.path.includes('/') && b.filename.includes('.config.')) return -1;
+
+    if (a.path.startsWith('public/')) return 1;
+    if (b.path.startsWith('public/')) return -1;
+
+    return 0;
+  });
+
+  return localFiles;
+};
+
+interface LocalFile {
+  filename: string;
+  content: string;
+  path: string;
+  size?: number;
+  error?: boolean;
+}
+
+export const getLocalFiles = async (
+  entries: { items: DataTransferItemList | undefined } | { files: FileList | undefined },
+): Promise<LocalFile[]> => {
+  interface FileInfo {
+    file: File | FileSystemEntry;
+    path: string;
+  }
+
+  if ('items' in entries) {
+    if (!entries.items?.length) return [];
+    return handleItems(entries.items);
+  } else if ('files' in entries) {
+    if (!entries.files?.length) return [];
+    return handleFiles(entries.files);
+  } else {
+    return [];
+  }
+
+  async function handleItems(items: DataTransferItemList) {
+    const entries: Array<FileInfo['file']> = [];
+
+    for (const item of items) {
+      // Use webkitGetAsEntry for folder support (works in most modern browsers)
+      if (item.webkitGetAsEntry) {
+        const entry = item.webkitGetAsEntry();
+        if (entry) {
+          entries.push(entry);
+        }
+      } else if (item.getAsFile) {
+        // Fallback for browsers without webkitGetAsEntry
+        const file = item.getAsFile();
+        if (file) {
+          entries.push(file);
         }
+      }
+    }
 
-        const reader = new FileReader();
-        eventsManager.addEventListener(reader, 'load', (event: any) => {
-          const text = (event.target?.result as string) || '';
-          sourceFiles.push({
-            filename: file.name,
-            content: text,
-          });
-
-          if (sourceFiles.length === files.length) {
-            resolve(populateConfig(sourceFiles, {}));
-          }
-        });
+    if (entries.length === 0) return [];
+    try {
+      const files = await getAllFiles(entries);
+      return processFiles(files);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Error processing files:', error);
+      return [];
+    }
+  }
+
+  async function handleFiles(files: FileList) {
+    const fileData = [...files].map((file) => ({
+      file,
+      path: file.webkitRelativePath || file.name,
+    }));
+
+    return processFiles(fileData);
+  }
+
+  async function getAllFiles(entries: Array<FileInfo['file']>) {
+    const files: Array<{ file: File; path: string }> = [];
 
-        eventsManager.addEventListener(reader, 'error', () => {
-          reject('Error: Failed to read file');
+    async function traverseEntry(entry: FileInfo['file'], path = '') {
+      if (isFile(entry)) {
+        return new Promise<void>((resolve) => {
+          entry.file(
+            (file) => {
+              files.push({
+                file,
+                path: path + file.name,
+              });
+              resolve();
+            },
+            (error) => {
+              // eslint-disable-next-line no-console
+              console.error('Error reading file:', error);
+              resolve();
+            },
+          );
         });
+      } else if (isDir(entry)) {
+        const dirReader = entry.createReader();
 
-        reader.readAsText(file);
+        return new Promise<void>((resolve) => {
+          const readEntries = () => {
+            dirReader.readEntries(
+              async (entries: FileSystemEntry[]) => {
+                if (entries.length === 0) {
+                  resolve();
+                  return;
+                }
+
+                for (const childEntry of entries) {
+                  await traverseEntry(childEntry, path + entry.name + '/');
+                }
+
+                // Continue reading (directories might have more than 100 entries)
+                readEntries();
+              },
+              (error: Error) => {
+                // eslint-disable-next-line no-console
+                console.error('Error reading directory:', error);
+                resolve();
+              },
+            );
+          };
+
+          readEntries();
+        });
+      } else if (entry instanceof File) {
+        // Fallback for File objects
+        files.push({
+          file: entry,
+          path: entry.name,
+        });
       }
-    });
+    }
+
+    for (const entry of entries) {
+      await traverseEntry(entry);
+    }
+
+    return files;
+  }
 
-  const loadZipFile = (files: FileList) => importFromZip(files[0], populateConfig);
-  const loadImage = (files: FileList) => importFromImage(files[0]);
+  async function processFiles(fileData: Array<{ file: File; path: string }>) {
+    const processedFiles = [];
+    for (const { file, path } of fileData) {
+      try {
+        const content = await readFileContent(file);
+        processedFiles.push({
+          filename: file.name,
+          content,
+          path,
+          size: file.size,
+        });
+      } catch (error: any) {
+        // eslint-disable-next-line no-console
+        console.error(`Error reading file: ${path}.`, error.message || error);
+      }
+    }
+    // Sort by path
+    processedFiles.sort((a, b) => a.path.localeCompare(b.path));
+    return processedFiles;
+  }
 
-  if (!files?.length) return {};
+  function readFileContent(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        let content = reader.result || '';
+        if (typeof content !== 'string') {
+          const decoder = new TextDecoder('utf-8');
+          content = decoder.decode(content);
+        }
+        resolve(content);
+      };
+      reader.onerror = () => reject(reader.error);
+      reader.readAsText(file);
+    });
+  }
 
-  const getConfigFromFiles =
-    files?.length > 1
-      ? loadFiles
-      : files[0].name.endsWith('.zip')
-        ? loadZipFile
-        : files[0].type.startsWith('image/') && files[0].type !== 'image/svg+xml'
-          ? loadImage
-          : loadFiles;
+  function isFile(x: any): x is FileSystemFileEntry {
+    return 'isFile' in x && x.isFile;
+  }
 
-  return getConfigFromFiles(files);
+  function isDir(x: any): x is FileSystemDirectoryEntry {
+    return 'isDirectory' in x && x.isDirectory;
+  }
 };
diff --git a/src/livecodes/import/github-dir.ts b/src/livecodes/import/github-dir.ts
index f468dc78fc..53dee5d7be 100644
--- a/src/livecodes/import/github-dir.ts
+++ b/src/livecodes/import/github-dir.ts
@@ -1,7 +1,6 @@
 import { decode } from 'js-base64';
 import type { User } from '../models';
 import { getGithubHeaders } from '../services/github';
-import { modifyMarkup } from './github';
 import { populateConfig } from './utils';
 
 export const importFromGithubDir = async (
@@ -68,32 +67,16 @@ export const importFromGithubDir = async (
             })
             .then((data) => data.content),
         );
-
+        const relativePath = dir ? file.path.replace(`${dir}/`, '') : file.path;
         return {
           filename,
           content,
-          path: file.path,
+          path: relativePath,
         };
       }),
     );
 
-    const config = populateConfig(files, params);
-
-    return modifyMarkup(
-      config,
-      files
-        .filter((f) =>
-          [config.markup?.content, config.style?.content, config.script?.content].includes(
-            f.content,
-          ),
-        )
-        .map((f) => ({
-          user,
-          repo: repository,
-          ref: branch,
-          path: f.path,
-        })),
-    );
+    return populateConfig(files, params);
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error('Cannot fetch directory: ' + url);
diff --git a/src/livecodes/import/github-gist.ts b/src/livecodes/import/github-gist.ts
index b81306abfe..2f339bb003 100644
--- a/src/livecodes/import/github-gist.ts
+++ b/src/livecodes/import/github-gist.ts
@@ -1,4 +1,4 @@
-import { getLanguageByAlias } from '../languages';
+import { getFileExtension, getLanguageByAlias } from '../languages';
 import { getValidUrl } from './check-src';
 import { populateConfig } from './utils';
 
@@ -18,7 +18,7 @@ export const importFromGithubGist = async (url: string, params: { [key: string]:
       .then((files) =>
         Object.values(files).map((file: any) => {
           const lang = file.language;
-          const extension = file.filename.split('.')[file.filename.split('.').length - 1];
+          const extension = getFileExtension(file.filename);
           const language = getLanguageByAlias(extension) || getLanguageByAlias(lang);
           return {
             ...file,
diff --git a/src/livecodes/import/github.ts b/src/livecodes/import/github.ts
index 1f4c695433..29e686f2ad 100644
--- a/src/livecodes/import/github.ts
+++ b/src/livecodes/import/github.ts
@@ -1,8 +1,7 @@
 import { decode } from 'js-base64';
-import { getLanguageByAlias, getLanguageEditorId, getLanguageExtension } from '../languages/utils';
-import type { Config, EditorId, Language, User } from '../models';
+import { getFileExtension, getLanguageByAlias, getLanguageEditorId } from '../languages/utils';
+import type { Config, Language, User } from '../models';
 import { getGithubHeaders } from '../services/github';
-import { modulesService } from '../services/modules';
 
 const getValidUrl = (url: string) =>
   url.startsWith('https://') ? new URL(url) : new URL('https://' + url);
@@ -15,7 +14,7 @@ const getFileData = (urlObj: URL): FileData => {
   const ref = pathSplit[4];
   const filePath = pathSplit.slice(5, pathSplit.length).join('/');
   const filename = filePath.split('/')[filePath.split('/').length - 1];
-  const extension = (filename.split('.')[filename.split('.').length - 1] || 'md') as Language;
+  const extension = getFileExtension(filename) as Language;
   const lineSplit = urlObj.hash.split('-');
   const startLine = urlObj.hash !== '' ? Number(lineSplit[0].replace('#L', '')) : -1;
   const endLine =
@@ -69,6 +68,18 @@ const getContent = async (
       }
     }
 
+    if (!(startLine > 0)) {
+      return {
+        files: [
+          {
+            filename: fileData.filename,
+            language: getLanguageByAlias(extension) || 'html',
+            content: fileContent,
+          },
+        ],
+      };
+    }
+
     const content =
       startLine > 0
         ? fileContent
@@ -78,14 +89,13 @@ const getContent = async (
         : fileContent;
     const language = getLanguageByAlias(extension) || 'html';
     const editorId = getLanguageEditorId(language) || 'markup';
-    const config = {
+    return {
       [editorId]: {
         language,
         content,
       },
       activeEditor: editorId,
     };
-    return modifyMarkup(config, [fileData]);
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error('Cannot fetch: ' + apiUrl);
@@ -101,80 +111,3 @@ export const importFromGithub = (
   const fileData = getFileData(validUrl);
   return getContent(fileData, loggedInUser);
 };
-
-/**
- * Adds base tag for relative links.
- * Removes <!DOCTYPE html>, <html>, <link> and <script> tags.
- * Extracts html attributes.
- */
-export const modifyMarkup = (
-  config: Partial<Config>,
-  files: Array<{ user: string; repo: string; ref: string; path: string }>,
-): Partial<Config> => {
-  const markupLanguages = ['html', 'markdown', 'mdx'];
-  const markupFile = files.find((file) =>
-    markupLanguages.find((lang) => file.path.endsWith(`.${getLanguageExtension(lang)}`)),
-  );
-  const getFile = (editorId: EditorId) =>
-    files.find((file) => {
-      const extension = file.path.split('.')[file.path.split('.').length - 1];
-      return editorId === getLanguageEditorId(extension);
-    });
-  const styleFile = getFile('style');
-  const scriptFile = getFile('script');
-  if (
-    !markupFile ||
-    !config.markup?.language ||
-    !markupLanguages.includes(config.markup?.language || '') ||
-    config.markup.content?.includes('<base')
-  ) {
-    return config;
-  }
-  const { user, repo, ref, path } = markupFile;
-  const baseUrl = modulesService.getUrl(`gh:${user}/${repo}@${ref}/${path}`);
-  const baseTag = `<base href="${baseUrl}">`;
-  let htmlAttrs = '';
-
-  const removeTags = (markupContent: string, tag: 'html' | 'link' | 'script') => {
-    const file = tag === 'link' ? styleFile : scriptFile;
-    if (!file && tag !== 'html') return markupContent;
-    const filename = file?.path.split('/')[file.path.split('/').length - 1];
-    if (filename && !markupContent.includes(filename)) return markupContent;
-    const linkPattern = new RegExp(
-      `<link[^>]{1,200}?href=["']((?!http(s)?:\\/\\/).){0,200}?${filename}["'][^>]{0,200}?>`,
-      'g',
-    );
-    const scriptPattern = new RegExp(
-      `<script[\\s\\S]{1,200}?src=["']((?!http(s)?:\\/\\/).){0,200}?${filename}["'][\\s\\S]{0,200}?</script>`,
-      'g',
-    );
-    const htmlTagPattern = new RegExp(
-      `(?:<!DOCTYPE\\s+html>\\s*?[\\n\\r]*)|(?:<html([^>]{1,200}?)>\\s*?[\\n\\r]*)|(?:\\s*<\/html>)`,
-      'g',
-    );
-    if (tag === 'html') {
-      const result = [...markupContent.matchAll(htmlTagPattern)];
-      for (const match of result) {
-        if (match[1]) {
-          htmlAttrs = match[1];
-        }
-      }
-    }
-    const pattern = tag === 'html' ? htmlTagPattern : tag === 'link' ? linkPattern : scriptPattern;
-    return markupContent.replace(pattern, '');
-  };
-
-  let content = removeTags(config.markup.content || '', 'html');
-  content = removeTags(content, 'link');
-  content = removeTags(content, 'script');
-
-  return {
-    ...config,
-    ...(htmlAttrs ? { htmlAttrs } : {}),
-    head: `${baseTag}\n${config.head || ''}`,
-    markup: {
-      ...config.markup,
-      content,
-    },
-  };
-};
diff --git a/src/livecodes/import/gitlab-dir.ts b/src/livecodes/import/gitlab-dir.ts
index 460c1aeeac..99348c8b63 100644
--- a/src/livecodes/import/gitlab-dir.ts
+++ b/src/livecodes/import/gitlab-dir.ts
@@ -42,10 +42,12 @@ export const importFromGitlabDir = async (url: string, params: { [key: string]:
           if (!res.ok) throw new Error('Cannot fetch: ' + file.url);
           return res.text();
         });
+        const relativePath = dir ? file.path.replace(`${dir}/`, '') : file.path;
 
         return {
           filename,
           content,
+          path: relativePath,
         };
       }),
     );
diff --git a/src/livecodes/import/utils.ts b/src/livecodes/import/utils.ts
index 076b11870a..f2d10de0c8 100644
--- a/src/livecodes/import/utils.ts
+++ b/src/livecodes/import/utils.ts
@@ -1,14 +1,34 @@
-import { isEditorId } from '../config/utils';
-import { getLanguageByAlias, getLanguageEditorId } from '../languages';
+import { getMainFile, isEditorId } from '../config/utils';
+import { getFileLanguage, getLanguageByAlias, getLanguageEditorId } from '../languages';
 import type { Config, EditorId, Language } from '../models';
 
 export interface SourceFile {
   filename: string;
   content: string;
+  path?: string;
   language?: Language;
   editorId?: EditorId;
 }
 
+const prepareFiles = (config: { files?: Config['files'] }): Partial<Config> => {
+  if (!config.files?.length) return config;
+  const mainFile = getMainFile(config);
+  if (!mainFile || !config.files.find((f) => f.filename === mainFile)) {
+    return config;
+  }
+  const title = config.files
+    .find((f) => f.filename === mainFile)
+    ?.content.match(/<title>(.*?)<\/title>/)?.[1];
+
+  config.files.sort((f1, f2) => (f1.filename === mainFile ? -1 : f2.filename === mainFile ? 1 : 0));
+  return {
+    ...(title ? { title } : {}),
+    mainFile,
+    activeEditor: mainFile,
+    ...config,
+  };
+};
+
 export const populateConfig = (
   files: SourceFile[],
   params: { [key: string]: string },
@@ -22,7 +42,16 @@ export const populateConfig = (
   );
   if (configFile) {
     try {
-      return JSON.parse(configFile.content);
+      const obj = JSON.parse(configFile.content);
+      if (
+        // if is LiveCodes config
+        obj.markup?.language ||
+        obj.style?.language ||
+        obj.script?.language ||
+        (obj.files?.[0]?.filename && obj.files?.[0]?.content)
+      ) {
+        return obj;
+      }
     } catch {
       // invalid JSON
     }
@@ -31,28 +60,40 @@ export const populateConfig = (
   // select files in query params (e.g. ?files=index.html,script.js)
   const filesInParams = params.files;
   if (filesInParams) {
-    return filesInParams
+    const config = filesInParams
       .split(',')
       .map((filename) => filename.trim())
       .reduce((output: Partial<Config>, filename: string) => {
-        const extension = filename.split('.')[filename.split('.').length - 1];
-        const language = getLanguageByAlias(extension);
-        if (!language) return output;
         const file = files.find((file) => file.filename === filename);
         if (!file) return output;
-
-        const editorId = getLanguageEditorId(language);
-        if (!editorId || !isEditorId(editorId) || output[editorId]) return output;
-
+        const language = getFileLanguage(file.filename) as Language;
         return {
           ...output,
-          activeEditor: output.activeEditor || editorId, // set first as active editor
-          [editorId]: {
-            language,
-            content: file.content,
-          },
+          files: [
+            ...(output.files || []),
+            {
+              filename: file.path || file.filename,
+              content: file.content,
+              language,
+            },
+          ],
         };
       }, {} as Partial<Config>);
+    return prepareFiles(config);
+  }
+
+  // external styles and scripts (e.g. github gist exported from codepen)
+  const stylesFile = files.find((file) => file.filename === 'styles');
+  const scriptsFile = files.find((file) => file.filename === 'scripts');
+
+  if (!stylesFile && !scriptsFile) {
+    return prepareFiles({
+      files: files.map((file) => ({
+        filename: file.path || file.filename,
+        content: file.content,
+        language: file.language || (getFileLanguage(file.filename) as Language),
+      })),
+    });
   }
 
   // select languages from files
@@ -161,7 +202,6 @@ export const populateConfig = (
 
   // extract external styles and scripts
   const stylesheets: string[] = [];
-  const stylesFile = files.find((file) => file.filename === 'styles');
   if (stylesFile?.content) {
     try {
       const urls: string[] = [];
@@ -191,7 +231,6 @@ export const populateConfig = (
   }
 
   const scripts: string[] = [];
-  const scriptsFile = files.find((file) => file.filename === 'scripts');
   if (scriptsFile?.content) {
     try {
       const urls: string[] = [];
diff --git a/src/livecodes/import/zip.ts b/src/livecodes/import/zip.ts
index aa57bc9dce..77f259224d 100644
--- a/src/livecodes/import/zip.ts
+++ b/src/livecodes/import/zip.ts
@@ -1,10 +1,15 @@
 import type { ContentConfig } from '../models';
 import { loadScript } from '../utils/utils';
 import { jsZipUrl } from '../vendors';
-import type { populateConfig as populateConfigFn, SourceFile } from './utils';
+import { filterFiles } from './files';
+import type { populateConfig as populateConfigFn } from './utils';
 
 export const importFromZip = async (blob: Blob, populateConfig: typeof populateConfigFn) =>
   new Promise<Partial<ContentConfig>>(async (resolve, reject) => {
+    if (blob.size > 100 * 1024 * 1024) {
+      // > 100 MB
+      reject(new Error('File is too big'));
+    }
     const JSZip: any = await loadScript(jsZipUrl, 'JSZip');
 
     JSZip.loadAsync(blob)
@@ -20,20 +25,16 @@ export const importFromZip = async (blob: Blob, populateConfig: typeof populateC
           return;
         }
 
-        const filesInSrcDir: any[] = zip.file(/((^src\/)|(\/src\/))/);
         const allFiles: any[] = zip.file(/.*/);
-        const rootFiles = allFiles.filter((file) => !file.name.includes('/'));
-        const selectedFiles =
-          filesInSrcDir.length > 0 ? filesInSrcDir : rootFiles.length > 0 ? rootFiles : allFiles;
-
-        if (selectedFiles.length > 0) {
-          const sourceFiles: SourceFile[] = await Promise.all(
-            selectedFiles.map(async (file) => ({
-              filename: file.name,
+        if (allFiles.length > 0) {
+          const sourceFiles = await Promise.all(
+            allFiles.map(async (file) => ({
+              filename: file.name.split('/').pop(),
               content: await file.async('string'),
+              path: file.name,
             })),
           );
-          resolve(populateConfig(sourceFiles, {}));
+          resolve(populateConfig(filterFiles(sourceFiles), {}));
           return;
         }
 

From 453a8c4a7e50b8c484667cafdebfb2e5bbc1e5d9 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 28 Jan 2026 01:26:58 +0200
Subject: [PATCH 075/143] add support for public folder in multifile projects

---
 src/livecodes/result/multi-file-result-page.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index c829a96a79..470b5dd470 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -66,6 +66,16 @@ export const createMultiFileResultPage = async ({
         : null,
     ].filter((x) => x != null),
   );
+
+  const publicFiles = compiledFiles
+    .filter(
+      (f) =>
+        f.filename.startsWith('public/') &&
+        !compiledFiles.find((ff) => ff.filename === f.filename.replace('public/', '')),
+    )
+    .map((f) => ({ ...f, filename: f.filename.replace('public/', '') }));
+  compiledFiles.push(...publicFiles);
+
   const mainFile = getMainFile(config);
   const mainFileHTML = compiledFiles.find((f) => f.filename === mainFile)?.compiled || '';
 

From a3874d13a34f0286fd376bcd908daa56ef745d0e Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 28 Jan 2026 02:33:22 +0200
Subject: [PATCH 076/143] handle common dir

---
 src/livecodes/import/utils.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/livecodes/import/utils.ts b/src/livecodes/import/utils.ts
index f2d10de0c8..e88ec94a17 100644
--- a/src/livecodes/import/utils.ts
+++ b/src/livecodes/import/utils.ts
@@ -35,6 +35,11 @@ export const populateConfig = (
 ): Partial<Config> => {
   if (files.length === 0) return {};
 
+  const commonDir = files[0]?.path?.split('/')[0];
+  if (commonDir && files.every((file) => file.path?.startsWith(`${commonDir}/`))) {
+    files = files.map((file) => ({ ...file, path: file.path?.replace(`${commonDir}/`, '') }));
+  }
+
   const configFile = files.find(
     (file) =>
       file.filename.toLowerCase() === 'livecodes.json' ||

From 1adb5442a489fde9c4ea40e459652e913b4af79b Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 28 Jan 2026 08:46:38 +0200
Subject: [PATCH 077/143] fix importing files from github and gitlab dir

---
 src/livecodes/import/files.ts      |  2 +-
 src/livecodes/import/github-dir.ts | 35 ++++++++++++++++++++++--------
 src/livecodes/import/gitlab-dir.ts | 24 +++++++++++++-------
 3 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/src/livecodes/import/files.ts b/src/livecodes/import/files.ts
index a86ee3a91a..cce8173c8d 100644
--- a/src/livecodes/import/files.ts
+++ b/src/livecodes/import/files.ts
@@ -24,7 +24,7 @@ export const importFromFiles = async (
   return populateConfig(localFiles, {});
 };
 
-export const filterFiles = (files: LocalFile[]) => {
+export const filterFiles = <T extends LocalFile>(files: T[]) => {
   const maxSizeAllowed = 100 * 1024 * 1024; // 100 MB
   const localFiles = files.filter(
     (file) =>
diff --git a/src/livecodes/import/github-dir.ts b/src/livecodes/import/github-dir.ts
index 53dee5d7be..dc53c99118 100644
--- a/src/livecodes/import/github-dir.ts
+++ b/src/livecodes/import/github-dir.ts
@@ -1,8 +1,17 @@
 import { decode } from 'js-base64';
 import type { User } from '../models';
 import { getGithubHeaders } from '../services/github';
+import { filterFiles } from './files';
 import { populateConfig } from './utils';
 
+interface GitHubFile {
+  path: string;
+  type: 'blob' | 'tree';
+  size: number;
+  sha: string;
+  url: string;
+}
+
 export const importFromGithubDir = async (
   url: string,
   params: { [key: string]: string },
@@ -37,7 +46,7 @@ export const importFromGithubDir = async (
     }
     const apiURL = `https://api.github.com/repos/${user}/${repository}/git/trees/${branch}?recursive=true`;
 
-    const tree = await fetch(apiURL, {
+    const tree: GitHubFile[] = await fetch(apiURL, {
       ...(loggedInUser ? { headers: getGithubHeaders(loggedInUser) } : {}),
     })
       .then((res) => {
@@ -46,16 +55,24 @@ export const importFromGithubDir = async (
       })
       .then((data) => data.tree);
 
-    const dirFiles = tree.filter((node: any) =>
-      rootDir
-        ? node.type === 'blob'
-        : node.type === 'blob' &&
-          node.path.startsWith(decodeURIComponent(dir)) &&
-          node.path.split('/').length === dir.split('/').length + 1,
-    );
+    const maxFiles = 20;
+    const dirFiles = filterFiles(
+      tree
+        .filter((node) =>
+          rootDir
+            ? node.type === 'blob'
+            : node.type === 'blob' && node.path.startsWith(decodeURIComponent(dir) + '/'),
+        )
+        // comply to file shape expected by filterFiles
+        .map((file) => ({
+          ...file,
+          filename: file.path.split('/')[file.path.split('/').length - 1],
+          content: '',
+        })),
+    ).filter((_file, index: number) => index < maxFiles);
 
     const files = await Promise.all(
-      Object.values(dirFiles).map(async (file: any) => {
+      dirFiles.map(async (file) => {
         const filename = decodeURIComponent(file.path.split('/')[file.path.split('/').length - 1]);
         const content = decode(
           await fetch(file.url, {
diff --git a/src/livecodes/import/gitlab-dir.ts b/src/livecodes/import/gitlab-dir.ts
index 99348c8b63..7e51e0c6c8 100644
--- a/src/livecodes/import/gitlab-dir.ts
+++ b/src/livecodes/import/gitlab-dir.ts
@@ -22,16 +22,24 @@ export const importFromGitlabDir = async (url: string, params: { [key: string]:
     const branch = pathSplit[5] || repoInfo.default_branch;
     const projectId = repoInfo.id;
     const dir = pathSplit.slice(6, pathSplit.length).join('/');
-    const apiURL = `${urlObj.origin}/api/v4/projects/${projectId}/repository/tree?per_page=100&ref=${branch}&path=${dir}`;
-    const dirFiles = await fetch(apiURL)
-      .then((res) => {
-        if (!res.ok) throw new Error('Cannot fetch: ' + apiURL);
-        return res.json();
-      })
-      .then((data) => data.filter((node: any) => node.type === 'blob'));
+    const getAllFiles = async (dirPath: string) => {
+      const apiURL = `${urlObj.origin}/api/v4/projects/${projectId}/repository/tree?per_page=100&ref=${branch}&path=${dirPath}`;
+      const dirFiles: Array<{ name: string; path: string; type: string }> = await fetch(apiURL)
+        .then((res) => {
+          if (!res.ok) throw new Error('Cannot fetch: ' + apiURL);
+          return res.json();
+        })
+        .then((data) =>
+          Promise.all(
+            data.map((node: any) => (node.type === 'blob' ? node : getAllFiles(node.path))),
+          ),
+        );
+      return dirFiles.flat();
+    };
 
+    const allFiles = await getAllFiles(dir);
     const files = await Promise.all(
-      Object.values(dirFiles).map(async (file: any) => {
+      Object.values(allFiles).map(async (file: any) => {
         const filename = file.path.split('/')[file.path.split('/').length - 1];
         const rawURL = `${
           urlObj.origin

From 434fbe4f3ed812c0a7f549ebce386a7de05b3186 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 30 Jan 2026 00:03:24 +0200
Subject: [PATCH 078/143] allow using binary files (e.g. images)

---
 src/livecodes/import/files.ts                 |  5 +-
 src/livecodes/import/github-dir.ts            | 50 +++++++++++++++----
 src/livecodes/languages/binary/index.ts       |  1 +
 src/livecodes/languages/binary/lang-binary.ts | 43 ++++++++++++++++
 src/livecodes/languages/languages.ts          |  2 +
 .../result/multi-file-result-page.ts          |  3 +-
 src/sdk/models.ts                             | 16 +++++-
 7 files changed, 107 insertions(+), 13 deletions(-)
 create mode 100644 src/livecodes/languages/binary/index.ts
 create mode 100644 src/livecodes/languages/binary/lang-binary.ts

diff --git a/src/livecodes/import/files.ts b/src/livecodes/import/files.ts
index cce8173c8d..8086c49c71 100644
--- a/src/livecodes/import/files.ts
+++ b/src/livecodes/import/files.ts
@@ -1,4 +1,4 @@
-import { getFileLanguage } from '../languages';
+import { getFileLanguage } from '../languages/utils';
 import { importFromImage } from './image';
 import { populateConfig } from './utils';
 import { importFromZip } from './zip';
@@ -31,7 +31,8 @@ export const filterFiles = <T extends LocalFile>(files: T[]) => {
       !file.path.startsWith('.') && // e.g. .git, .vscode
       !file.path.includes('node_modules') &&
       !file.path.startsWith('dist') &&
-      !file.filename.includes('-lock.json') &&
+      !file.filename.endsWith('-lock.json') &&
+      !file.filename.endsWith('.zip') &&
       (!file.size || file.size <= maxSizeAllowed) &&
       getFileLanguage(file.filename) != null,
   );
diff --git a/src/livecodes/import/github-dir.ts b/src/livecodes/import/github-dir.ts
index dc53c99118..eaf3fe1652 100644
--- a/src/livecodes/import/github-dir.ts
+++ b/src/livecodes/import/github-dir.ts
@@ -74,16 +74,39 @@ export const importFromGithubDir = async (
     const files = await Promise.all(
       dirFiles.map(async (file) => {
         const filename = decodeURIComponent(file.path.split('/')[file.path.split('/').length - 1]);
-        const content = decode(
-          await fetch(file.url, {
-            ...(loggedInUser ? { headers: getGithubHeaders(loggedInUser) } : {}),
+        const encodedContent = await fetch(file.url, {
+          ...(loggedInUser ? { headers: getGithubHeaders(loggedInUser) } : {}),
+        })
+          .then((res) => {
+            if (!res.ok) throw new Error('Cannot fetch: ' + file.url);
+            return res.json();
           })
-            .then((res) => {
-              if (!res.ok) throw new Error('Cannot fetch: ' + file.url);
-              return res.json();
-            })
-            .then((data) => data.content),
-        );
+          .then((data) => {
+            const extension = file.path.split('.')[file.path.split('.').length - 1];
+            if (
+              [
+                'png',
+                'jpg',
+                'jpeg',
+                'gif',
+                'webp',
+                'bmp',
+                'tif',
+                'tiff',
+                'ico',
+                'ttf',
+                'otf',
+                'woff',
+                'woff2',
+              ].includes(extension)
+            ) {
+              return `data:${getBinaryMimeType(extension)};charset=UTF-8;base64,${data.content}`;
+            }
+            return data.content;
+          });
+        const content = encodedContent.startsWith('data:')
+          ? encodedContent.replaceAll('\n', '')
+          : decode(encodedContent);
         const relativePath = dir ? file.path.replace(`${dir}/`, '') : file.path;
         return {
           filename,
@@ -102,3 +125,12 @@ export const importFromGithubDir = async (
     return {};
   }
 };
+
+const getBinaryMimeType = (extension: string) => {
+  let type = 'image';
+  if (extension === 'ico') return `${type}/x-icon`;
+  if (extension === 'jpg') return `${type}/jpeg`;
+  if (extension === 'tif') return `${type}/tiff`;
+  if (['ttf', 'otf', 'woff', 'woff2'].includes(extension)) type = 'font';
+  return `${type}/${extension}`;
+};
diff --git a/src/livecodes/languages/binary/index.ts b/src/livecodes/languages/binary/index.ts
new file mode 100644
index 0000000000..545e58bf0b
--- /dev/null
+++ b/src/livecodes/languages/binary/index.ts
@@ -0,0 +1 @@
+export * from './lang-binary';
diff --git a/src/livecodes/languages/binary/lang-binary.ts b/src/livecodes/languages/binary/lang-binary.ts
new file mode 100644
index 0000000000..4897f40b5b
--- /dev/null
+++ b/src/livecodes/languages/binary/lang-binary.ts
@@ -0,0 +1,43 @@
+import type { LanguageSpecs } from '../../models';
+
+export const binary: LanguageSpecs = {
+  name: 'binary',
+  title: 'Binary',
+  info: false,
+  compiler: {
+    factory: () => {
+      const getBinaryMimeType = (extension: string) => {
+        let type = 'image';
+        if (extension === 'ico') return `${type}/x-icon`;
+        if (extension === 'jpg') return `${type}/jpeg`;
+        if (extension === 'tif') return `${type}/tiff`;
+        if (['ttf', 'otf', 'woff', 'woff2'].includes(extension)) type = 'font';
+        return `${type}/${extension}`;
+      };
+
+      return async (code, { options: { filename } }) => {
+        const extension = filename.split('.').pop() || '';
+        return code.startsWith('data:')
+          ? code
+          : `data:${getBinaryMimeType(extension)};base64,${code}`;
+      };
+    },
+  },
+  extensions: [
+    'png',
+    'jpg',
+    'jpeg',
+    'gif',
+    'webp',
+    'bmp',
+    'tif',
+    'tiff',
+    'ico',
+    'ttf',
+    'otf',
+    'woff',
+    'woff2',
+  ],
+  editor: '',
+  multiFileSupport: true,
+};
diff --git a/src/livecodes/languages/languages.ts b/src/livecodes/languages/languages.ts
index 6157690e78..149310acc9 100644
--- a/src/livecodes/languages/languages.ts
+++ b/src/livecodes/languages/languages.ts
@@ -5,6 +5,7 @@ import { assemblyscript } from './assemblyscript';
 import { astro } from './astro';
 import { babel } from './babel';
 import { bbcode } from './bbcode';
+import { binary } from './binary';
 import { blockly } from './blockly';
 import { civet } from './civet';
 import { clio } from './clio';
@@ -173,4 +174,5 @@ export const languages: LanguageSpecs[] = [
   blockly,
   text,
   json,
+  binary,
 ];
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 470b5dd470..8c7bf8fe6c 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -135,6 +135,7 @@ export const createMultiFileResultPage = async ({
   const getDataUrl = (file: SourceFile & { compiled: string }, saveToFileUrls = true) => {
     if (file.filename === mainFile) return;
     const content = file.compiled;
+    if (content.startsWith('data:')) return content;
     const mimeType =
       mapLanguage(file.language) === 'json'
         ? 'application/json'
@@ -292,7 +293,7 @@ export const createMultiFileResultPage = async ({
       .filter((f) => getLanguageEditorId(f.language) === 'script')
       .forEach((f) => {
         f.compiled = f.compiled.replace(
-          new RegExp(`(['"\`])(\\.\\/)?${file.filename}`, 'g'),
+          new RegExp(`(['"\`])(\\.?\\/)?${file.filename}`, 'g'),
           `$1${(dataUrl ??= getDataUrl(file, /* saveToFileUrls */ false))}`,
         );
       });
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index cd4ab9e3bf..8c25c3e4f7 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1171,7 +1171,21 @@ export type Language =
   | 'txt'
   | 'csv'
   | 'tsv'
-  | 'plaintext';
+  | 'plaintext'
+  | 'binary'
+  | 'png'
+  | 'jpg'
+  | 'jpeg'
+  | 'gif'
+  | 'webp'
+  | 'bmp'
+  | 'tif'
+  | 'tiff'
+  | 'ico'
+  | 'ttf'
+  | 'otf'
+  | 'woff'
+  | 'woff2';
 
 export interface Editor {
   /**

From 84c31bdfdfff70eece002c5915fec63cb8b6e2b7 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 30 Jan 2026 21:48:31 +0200
Subject: [PATCH 079/143] handle svg <use>

---
 src/livecodes/result/multi-file-result-page.ts | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 8c7bf8fe6c..9956477974 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -290,8 +290,22 @@ export const createMultiFileResultPage = async ({
     // note that the URLs should be relative to the main file (e.g. index.html)
     let dataUrl: string | undefined; // cache data url
     compiledFiles
-      .filter((f) => getLanguageEditorId(f.language) === 'script')
+      .filter((f) => getLanguageEditorId(f.language) !== 'style')
       .forEach((f) => {
+        if (f.filename === file.filename) return;
+        // handle svg <use href="./logo.svg#svg-logo"> which does not allow data urls
+        if (file.filename.endsWith('.svg') && f.compiled.includes(`<use `)) {
+          f.compiled = f.compiled.replace(
+            new RegExp(`(['"\`])(\\.?\\/)?${file.filename}#`, 'g'),
+            (_match, $1) => {
+              const div = document.createElement('div');
+              div.style.display = 'none';
+              div.innerHTML = file.compiled;
+              dom.body.append(div);
+              return `${$1}#`;
+            },
+          );
+        }
         f.compiled = f.compiled.replace(
           new RegExp(`(['"\`])(\\.?\\/)?${file.filename}`, 'g'),
           `$1${(dataUrl ??= getDataUrl(file, /* saveToFileUrls */ false))}`,

From 64cf310d597c0e996ca84405418c651f8ea4784e Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 30 Jan 2026 22:49:27 +0200
Subject: [PATCH 080/143] improve loading files with drag and drop

---
 src/livecodes/core.ts | 38 +++++++++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 2d12400bf9..14ccf979aa 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -5284,22 +5284,50 @@ const handleDropFiles = () => {
   eventsManager.addEventListener(document, 'drop', (event: DragEvent) => {
     event.preventDefault();
     if (!event.dataTransfer) return;
-    // TODO: check saved status
-    modal.show(loadingMessage(), { size: 'small', autoFocus: false });
     const files = event.dataTransfer.files;
     const items = event.dataTransfer.items; // for directories
     if (!files?.length && !items?.length) return;
     const entries = { files, items };
+    modal.show(loadingMessage(), { size: 'small', autoFocus: false });
 
     importFromFiles(entries)
       .then(async (fileConfig) => {
+        // if in single file project, load as a new project
+        // otherwise, add files to current project
+        const currentConfig = getConfig();
         if (Object.keys(fileConfig).length === 0) return;
-        await loadConfig(fileConfig);
+        if (!currentConfig.files.length) {
+          checkSavedAndExecute(async () => {
+            await loadConfig(fileConfig);
+            modal.close();
+          })();
+        } else {
+          for (const file of fileConfig.files || []) {
+            if (currentConfig.files.find((f) => f.filename === file.filename)) {
+              editors[file.filename]?.setValue(file.content);
+            } else {
+              await addFile(file.filename, {
+                baseUrl,
+                mode: currentConfig.mode,
+                readonly: currentConfig.readonly,
+                ...getEditorConfig(currentConfig),
+                isEmbed,
+                isLite,
+                isHeadless,
+                mapLanguage,
+                getLanguageExtension,
+                getFormatterConfig: () => getFormatterConfig(currentConfig),
+                getFontFamily,
+              });
+              editors[file.filename]?.setValue(file.content);
+            }
+          }
+          showEditor(fileConfig.activeEditor || getMainFile(fileConfig));
+          modal.close();
+        }
       })
       .catch((message) => {
         notifications.error(message);
-      })
-      .finally(() => {
         modal.close();
       });
   });

From b514c8d201362badefabc59e93fbac272facb8b0 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 31 Jan 2026 01:53:38 +0200
Subject: [PATCH 081/143] fix replacing URLs in compiled files

---
 .../result/multi-file-result-page.ts          | 34 +++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 9956477974..6cdbaea6f6 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -9,6 +9,7 @@ import {
 } from '../compiler/import-map';
 import { getMainFile } from '../config/utils';
 import {
+  getFileLanguage,
   getLanguageByAlias,
   getLanguageCompiler,
   getLanguageEditorId,
@@ -288,14 +289,14 @@ export const createMultiFileResultPage = async ({
 
     // replace relative URL access (e.g. img.src="./logo.svg") or fetching files (e.g. fetch("./data.json"))
     // note that the URLs should be relative to the main file (e.g. index.html)
-    let dataUrl: string | undefined; // cache data url
-    compiledFiles
-      .filter((f) => getLanguageEditorId(f.language) !== 'style')
-      .forEach((f) => {
-        if (f.filename === file.filename) return;
+    // do that only for static files (binary, json, text, html), other files are handled later
+    if (['binary', 'json', 'text', 'html'].includes(getFileLanguage(file.filename) || '')) {
+      let dataUrl: string | undefined; // cache data url
+      const replaceUrl = (targetFile: (typeof compiledFiles)[number]) => {
+        if (targetFile.filename === file.filename) return;
         // handle svg <use href="./logo.svg#svg-logo"> which does not allow data urls
-        if (file.filename.endsWith('.svg') && f.compiled.includes(`<use `)) {
-          f.compiled = f.compiled.replace(
+        if (file.filename.endsWith('.svg') && targetFile.compiled.includes(`<use `)) {
+          targetFile.compiled = targetFile.compiled.replace(
             new RegExp(`(['"\`])(\\.?\\/)?${file.filename}#`, 'g'),
             (_match, $1) => {
               const div = document.createElement('div');
@@ -306,11 +307,24 @@ export const createMultiFileResultPage = async ({
             },
           );
         }
-        f.compiled = f.compiled.replace(
-          new RegExp(`(['"\`])(\\.?\\/)?${file.filename}`, 'g'),
+        targetFile.compiled = targetFile.compiled.replace(
+          new RegExp(`(['"\`\()])(\\.?\\/)?${file.filename}`, 'g'),
           `$1${(dataUrl ??= getDataUrl(file, /* saveToFileUrls */ false))}`,
         );
-      });
+      };
+      compiledFiles.forEach(replaceUrl);
+
+      const domFile: (typeof compiledFiles)[number] = {
+        filename: mainFile || 'index.html',
+        compiled: dom.documentElement.innerHTML,
+        content: dom.documentElement.innerHTML,
+        language: 'html',
+      };
+      replaceUrl(domFile);
+      if (domFile.compiled !== dom.documentElement.innerHTML) {
+        dom.documentElement.innerHTML = domFile.compiled;
+      }
+    }
   });
 
   Object.keys(codeImports)

From 4baeded43890ea740d5995186d6a9cc237942a1e Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 31 Jan 2026 03:32:29 +0200
Subject: [PATCH 082/143] binary file editor

---
 src/livecodes/editor/binary-file-editor.ts    | 118 ++++++++++++++++++
 src/livecodes/editor/create-editor.ts         |  31 +++--
 .../i18n/locales/en/translation.lokalise.json |   4 +
 src/livecodes/i18n/locales/en/translation.ts  |   3 +
 src/livecodes/languages/binary/lang-binary.ts |  23 ++++
 src/livecodes/styles/app.scss                 |   2 +-
 src/livecodes/styles/inc-multi-file.scss      |  52 ++++++++
 src/sdk/models.ts                             |  14 ++-
 8 files changed, 232 insertions(+), 15 deletions(-)
 create mode 100644 src/livecodes/editor/binary-file-editor.ts

diff --git a/src/livecodes/editor/binary-file-editor.ts b/src/livecodes/editor/binary-file-editor.ts
new file mode 100644
index 0000000000..bdb2dc593c
--- /dev/null
+++ b/src/livecodes/editor/binary-file-editor.ts
@@ -0,0 +1,118 @@
+import type { CodeEditor, EditorOptions } from '../models';
+import { createFakeEditor } from './fake-editor';
+
+export const createBinaryFileEditor = (options: EditorOptions): CodeEditor => {
+  if (!options.container) return createFakeEditor(options);
+  const container = document.createElement('div');
+  container.classList.add('binary-file-editor');
+  options.container.appendChild(container);
+
+  const editor = createFakeEditor(options);
+
+  type Listener = () => void;
+  const listeners: Listener[] = [];
+  const onContentChanged = (fn: Listener) => {
+    listeners.push(fn);
+  };
+
+  const setValue = (value: string = '') => {
+    editor.setValue(value);
+    listeners.forEach((fn) => fn());
+    if (!value) {
+      showFileSelector();
+    }
+  };
+
+  const fileSelector = document.createElement('input');
+  fileSelector.type = 'file';
+  fileSelector.onchange = (ev) => {
+    const file = (ev.target as HTMLInputElement).files?.[0];
+    if (!file) return;
+
+    // Max 2 MB allowed
+    const maxSizeAllowed = 2 * 1024 * 1024;
+    if (file.size > maxSizeAllowed) {
+      alert(
+        window.deps.translateString(
+          'generic.error.exceededSize',
+          'Error: Exceeded size {{size}} MB',
+          { size: 2 },
+        ),
+      );
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      setValue(reader.result as string);
+      showFile();
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const showFileSelector = () => {
+    const btn = document.createElement('button');
+    btn.innerHTML = window.deps.translateString('app.binaryFileEditor.selectFile', 'Select file');
+    btn.onclick = () => fileSelector.click();
+    container.innerHTML = '';
+    container.appendChild(btn);
+  };
+
+  const showFile = () => {
+    const src = editor.getValue();
+
+    if (!src) {
+      showFileSelector();
+      return;
+    }
+
+    let display;
+    if (src.startsWith('data:video')) {
+      display = document.createElement('video');
+      display.src = src;
+    } else {
+      display = document.createElement('img');
+      if (src.startsWith('data:image')) {
+        display.src = src;
+      } else if (src.startsWith('data:audio')) {
+        display.src = options.baseUrl + 'assets/images/audio.svg';
+        display.classList.add('icon');
+      } else if (src.startsWith('data:font')) {
+        display.src = options.baseUrl + 'assets/images/font.svg';
+        display.classList.add('icon');
+      } else {
+        display.src = options.baseUrl + 'assets/images/file.svg';
+        display.classList.add('icon');
+      }
+    }
+
+    const link = document.createElement('a');
+    link.title = window.deps.translateString('app.binaryFileEditor.selectFile', 'Select file');
+    link.onclick = (ev) => {
+      ev.preventDefault();
+      fileSelector.click();
+    };
+    link.appendChild(display);
+
+    container.innerHTML = '';
+    container.appendChild(link);
+  };
+
+  if (!editor.getValue()) {
+    showFileSelector();
+  } else {
+    showFile();
+  }
+
+  const destroy = () => {
+    listeners.length = 0;
+    container.remove();
+  };
+
+  return {
+    ...editor,
+    setValue,
+    onContentChanged,
+    destroy,
+  };
+};
diff --git a/src/livecodes/editor/create-editor.ts b/src/livecodes/editor/create-editor.ts
index 3c1b53b801..e7e680c0c1 100644
--- a/src/livecodes/editor/create-editor.ts
+++ b/src/livecodes/editor/create-editor.ts
@@ -1,5 +1,7 @@
+import { getFileLanguage } from '../languages/utils';
 import type { CodeEditor, Config, EditorOptions } from '../models';
 import { isMobile, loadStylesheet } from '../utils';
+import { createBinaryFileEditor } from './binary-file-editor';
 import { createFakeEditor } from './fake-editor';
 import { fonts } from './fonts';
 
@@ -30,21 +32,23 @@ const selectEditor = (options: EditorOptions & { activeEditor?: Config['activeEd
   const { editor, mode, editorId, activeEditor, isLite, isHeadless } = options;
   const auto = isMobile() ? 'codemirror' : 'monaco';
   return (
-    (isHeadless
-      ? 'fake'
-      : mode === 'result' && editorId !== 'console' && editorId !== 'compiled'
+    (getFileLanguage(editorId) === 'binary'
+      ? 'binary'
+      : isHeadless
         ? 'fake'
-        : mode === 'simple' && editorId !== activeEditor
+        : mode === 'result' && editorId !== 'console' && editorId !== 'compiled'
           ? 'fake'
-          : ['codemirror', 'monaco', 'codejar'].includes(editor || '')
-            ? editor
-            : editor === 'auto'
-              ? auto
-              : mode === 'simple' && editorId === activeEditor
-                ? 'codemirror'
-                : mode === 'codeblock' || isLite
-                  ? 'codejar'
-                  : auto) || 'monaco'
+          : mode === 'simple' && editorId !== activeEditor
+            ? 'fake'
+            : ['codemirror', 'monaco', 'codejar'].includes(editor || '')
+              ? editor
+              : editor === 'auto'
+                ? auto
+                : mode === 'simple' && editorId === activeEditor
+                  ? 'codemirror'
+                  : mode === 'codeblock' || isLite
+                    ? 'codejar'
+                    : auto) || 'monaco'
   );
 };
 
@@ -97,6 +101,7 @@ export const createEditor = async (
 
   const editorName = selectEditor(editorOptions);
   if (editorName === 'fake') return createFakeEditor(editorOptions);
+  if (editorName === 'binary') return createBinaryFileEditor(editorOptions);
 
   if (editorOptions.fontFamily) {
     loadFont(editorOptions.fontFamily);
diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
index e62c8a94f5..380f957092 100644
--- a/src/livecodes/i18n/locales/en/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -100,6 +100,10 @@
     "notes": "",
     "translation": "SDK Permanent URL"
   },
+  "app.binaryFileEditor.selectFile": {
+    "notes": "",
+    "translation": "Select file"
+  },
   "app.changeTheme.hint": {
     "notes": "",
     "translation": "Change Theme"
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
index bdadbf714b..15bbab3ee3 100644
--- a/src/livecodes/i18n/locales/en/translation.ts
+++ b/src/livecodes/i18n/locales/en/translation.ts
@@ -57,6 +57,9 @@ const translation = {
     },
   },
   app: {
+    binaryFileEditor: {
+      selectFile: 'Select file',
+    },
     changeTheme: {
       hint: 'Change Theme',
     },
diff --git a/src/livecodes/languages/binary/lang-binary.ts b/src/livecodes/languages/binary/lang-binary.ts
index 4897f40b5b..dcf621f09d 100644
--- a/src/livecodes/languages/binary/lang-binary.ts
+++ b/src/livecodes/languages/binary/lang-binary.ts
@@ -12,6 +12,14 @@ export const binary: LanguageSpecs = {
         if (extension === 'jpg') return `${type}/jpeg`;
         if (extension === 'tif') return `${type}/tiff`;
         if (['ttf', 'otf', 'woff', 'woff2'].includes(extension)) type = 'font';
+        if (['mp4', 'mpeg', 'webm', 'ogg'].includes(extension)) type = 'video';
+        if (['midi', 'wav'].includes(extension)) type = 'audio';
+        if (extension === 'ogv') return 'video/ogg';
+        if (extension === 'mov') return 'video/quicktime';
+        if (extension === 'oga') return 'audio/ogg';
+        if (extension === 'mp3') return 'audio/mpeg';
+        if (extension === 'mid') return 'audio/midi';
+        if (extension === 'm4a') return 'audio/mp4';
         return `${type}/${extension}`;
       };
 
@@ -33,10 +41,25 @@ export const binary: LanguageSpecs = {
     'tif',
     'tiff',
     'ico',
+
     'ttf',
     'otf',
     'woff',
     'woff2',
+
+    'mp4',
+    'mpeg',
+    'webm',
+    'ogv',
+    'ogg',
+    'mov',
+
+    'mp3',
+    'm4a',
+    'wav',
+    'oga',
+    'mid',
+    'midi',
   ],
   editor: '',
   multiFileSupport: true,
diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
index 975d62ea85..47285c33c3 100644
--- a/src/livecodes/styles/app.scss
+++ b/src/livecodes/styles/app.scss
@@ -1326,8 +1326,8 @@ a.tools-pane-title {
   .editor-scroll-btn {
     align-items: center;
     background: var(--editor-title-bg-color);
-    border-inline: 2px solid var(--toolbar-bg-color);
     border-block: 1px solid var(--editor-title-bg-color);
+    border-inline: 2px solid var(--toolbar-bg-color);
     border-top-left-radius: var(--editor-title-border-radius);
     border-top-right-radius: var(--editor-title-border-radius);
     color: var(--editor-title-color);
diff --git a/src/livecodes/styles/inc-multi-file.scss b/src/livecodes/styles/inc-multi-file.scss
index 0ff6f68a44..48b05fdc42 100644
--- a/src/livecodes/styles/inc-multi-file.scss
+++ b/src/livecodes/styles/inc-multi-file.scss
@@ -112,4 +112,56 @@
   #app-menu-project li:has(#external-resources-link) {
     display: none;
   }
+
+  .binary-file-editor {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+
+    input {
+      display: none;
+    }
+
+    button {
+      background: var(--btn-modal-bg-color);
+      border: 1px solid var(--btn-modal-border-color);
+      border-radius: var(--btn-modal-border-radius);
+      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.176);
+      color: var(--btn-modal-color);
+      cursor: pointer;
+      font-size: var(--btn-modal-font);
+      padding: var(--s12) var(--s24);
+
+      &:hover,
+      &:active {
+        background-color: var(--btn-modal-bg-active);
+        color: var(--btn-modal-active);
+      }
+
+      &:active {
+        transform: translateY(1px);
+      }
+    }
+
+    a {
+      align-items: center;
+      cursor: pointer;
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      width: 100%;
+
+      img,
+      video {
+        max-height: 80%;
+        max-width: 80%;
+
+        &.icon {
+          min-height: 80px;
+          filter: invert(0.5);
+        }
+      }
+    }
+  }
 }
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 8c25c3e4f7..df18add1cc 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1185,7 +1185,19 @@ export type Language =
   | 'ttf'
   | 'otf'
   | 'woff'
-  | 'woff2';
+  | 'woff2'
+  | 'mp4'
+  | 'mpeg'
+  | 'webm'
+  | 'ogv'
+  | 'ogg'
+  | 'mov'
+  | 'mp3'
+  | 'm4a'
+  | 'wav'
+  | 'oga'
+  | 'mid'
+  | 'midi';
 
 export interface Editor {
   /**

From 13b19c44827df38957fb59b83341c3265c04374f Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 31 Jan 2026 04:20:58 +0200
Subject: [PATCH 083/143] fix importing binary files

---
 src/livecodes/core.ts                      | 4 ++--
 src/livecodes/editor/binary-file-editor.ts | 4 +++-
 src/livecodes/import/files.ts              | 9 +++++++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 14ccf979aa..6d88d92a19 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -5290,7 +5290,7 @@ const handleDropFiles = () => {
     const entries = { files, items };
     modal.show(loadingMessage(), { size: 'small', autoFocus: false });
 
-    importFromFiles(entries)
+    importFromFiles(entries, /* multiFile= */ true)
       .then(async (fileConfig) => {
         // if in single file project, load as a new project
         // otherwise, add files to current project
@@ -5322,7 +5322,7 @@ const handleDropFiles = () => {
               editors[file.filename]?.setValue(file.content);
             }
           }
-          showEditor(fileConfig.activeEditor || getMainFile(fileConfig));
+          showEditor(fileConfig.files?.[0].filename);
           modal.close();
         }
       })
diff --git a/src/livecodes/editor/binary-file-editor.ts b/src/livecodes/editor/binary-file-editor.ts
index bdb2dc593c..046e0029e4 100644
--- a/src/livecodes/editor/binary-file-editor.ts
+++ b/src/livecodes/editor/binary-file-editor.ts
@@ -18,7 +18,9 @@ export const createBinaryFileEditor = (options: EditorOptions): CodeEditor => {
   const setValue = (value: string = '') => {
     editor.setValue(value);
     listeners.forEach((fn) => fn());
-    if (!value) {
+    if (value) {
+      showFile();
+    } else {
       showFileSelector();
     }
   };
diff --git a/src/livecodes/import/files.ts b/src/livecodes/import/files.ts
index 8086c49c71..102bb9a352 100644
--- a/src/livecodes/import/files.ts
+++ b/src/livecodes/import/files.ts
@@ -6,10 +6,11 @@ import { importFromZip } from './zip';
 export const importFromFiles = async (
   // Use DataTransferItemList interface for folder support
   entries: { files: FileList; items?: DataTransferItemList | undefined },
+  multiFile = false,
 ) => {
   if (!entries.items?.length && !entries.files?.length) return {};
 
-  if (entries.files?.length === 1) {
+  if (entries.files?.length === 1 && !multiFile) {
     const file = entries.files[0];
     if (file.type.startsWith('image/') && file.type !== 'image/svg+xml') {
       return importFromImage(file);
@@ -219,7 +220,11 @@ export const getLocalFiles = async (
         resolve(content);
       };
       reader.onerror = () => reject(reader.error);
-      reader.readAsText(file);
+      if (getFileLanguage(file.name) === 'binary') {
+        reader.readAsDataURL(file);
+      } else {
+        reader.readAsText(file);
+      }
     });
   }
 

From 621c3d5f2b670057f4dd759e54b270741569558d Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 31 Jan 2026 04:54:22 +0200
Subject: [PATCH 084/143] edit multi file template thumbnail styles

---
 src/livecodes/styles/inc-modal.scss      | 15 +++++++++++++++
 src/livecodes/styles/inc-multi-file.scss |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/livecodes/styles/inc-modal.scss b/src/livecodes/styles/inc-modal.scss
index fad43d7835..a6adb70d4a 100644
--- a/src/livecodes/styles/inc-modal.scss
+++ b/src/livecodes/styles/inc-modal.scss
@@ -1192,6 +1192,21 @@
     }
   }
 
+  ul#multifile-templates-list li {
+    position: relative;
+
+    a::after {
+      content: 'Multi-file';
+      display: block;
+      font-size: smaller;
+      opacity: 0.5;
+      padding: 4px;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+
   #backup-container {
     #backup-stores {
       align-items: center;
diff --git a/src/livecodes/styles/inc-multi-file.scss b/src/livecodes/styles/inc-multi-file.scss
index 48b05fdc42..8e16d3be89 100644
--- a/src/livecodes/styles/inc-multi-file.scss
+++ b/src/livecodes/styles/inc-multi-file.scss
@@ -158,8 +158,8 @@
         max-width: 80%;
 
         &.icon {
-          min-height: 80px;
           filter: invert(0.5);
+          min-height: 80px;
         }
       }
     }

From 2bdb953dd282ae42a669d6716f0ff82fc6735e0e Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 31 Jan 2026 05:00:29 +0200
Subject: [PATCH 085/143] add basic multifile template

---
 src/livecodes/UI/command-menu-actions.ts      |  2 +
 .../i18n/locales/en/translation.lokalise.json |  4 ++
 src/livecodes/i18n/locales/en/translation.ts  |  1 +
 .../languages/vue/lang-vue-compiler.ts        |  2 +-
 src/livecodes/templates/multifile/basic.ts    | 39 +++++++++++++++++++
 src/livecodes/templates/multifile/blank.ts    | 23 -----------
 src/livecodes/templates/multifile/index.ts    |  2 +
 src/livecodes/utils/utils.ts                  | 11 ++----
 src/sdk/models.ts                             |  1 +
 9 files changed, 54 insertions(+), 31 deletions(-)
 create mode 100644 src/livecodes/templates/multifile/basic.ts

diff --git a/src/livecodes/UI/command-menu-actions.ts b/src/livecodes/UI/command-menu-actions.ts
index 5e45f9bfee..aa2d08d29a 100644
--- a/src/livecodes/UI/command-menu-actions.ts
+++ b/src/livecodes/UI/command-menu-actions.ts
@@ -327,6 +327,7 @@ export const getCommandMenuActions = ({
         'blockly',
         'diagrams',
         'multifile-blank',
+        'multifile-basic',
         'multifile-javascript',
         'multifile-typescript',
         'multifile-react',
@@ -335,6 +336,7 @@ export const getCommandMenuActions = ({
         'multifile-svelte',
         'multifile-solid',
         'multifile-lit',
+        'multifile-jest',
       ).map((template) => {
         const label = template.startsWith('multifile-') ? template.replace('-', ' ') : template;
         return {
diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
index 380f957092..71e01e3562 100644
--- a/src/livecodes/i18n/locales/en/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -2556,6 +2556,10 @@
     "notes": "",
     "translation": "New Project"
   },
+  "templates.multifile.basic": {
+    "notes": "",
+    "translation": "Basic Template"
+  },
   "templates.multifile.blank": {
     "notes": "",
     "translation": "Blank Template"
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
index 15bbab3ee3..022f3b14f6 100644
--- a/src/livecodes/i18n/locales/en/translation.ts
+++ b/src/livecodes/i18n/locales/en/translation.ts
@@ -987,6 +987,7 @@ const translation = {
   templates: {
     heading: 'New Project',
     multifile: {
+      basic: 'Basic Template',
       blank: 'Blank Template',
       heading: 'Multi-file Templates',
       javascript: 'JavaScript Template',
diff --git a/src/livecodes/languages/vue/lang-vue-compiler.ts b/src/livecodes/languages/vue/lang-vue-compiler.ts
index 95e63de469..46deb3fe14 100644
--- a/src/livecodes/languages/vue/lang-vue-compiler.ts
+++ b/src/livecodes/languages/vue/lang-vue-compiler.ts
@@ -330,7 +330,7 @@ import { getFileExtension, getLanguageByAlias } from '../utils';
     content = await compileAllBlocks(content, config, { prepareFn, skipCompilers });
 
     // CSS Modules
-    let cssModules: Record<string, string> | undefined;
+    let cssModules: Record<string, Record<string, string>> | undefined;
     content = await replaceAsync(
       content,
       stylePattern,
diff --git a/src/livecodes/templates/multifile/basic.ts b/src/livecodes/templates/multifile/basic.ts
new file mode 100644
index 0000000000..3f8ae55b38
--- /dev/null
+++ b/src/livecodes/templates/multifile/basic.ts
@@ -0,0 +1,39 @@
+import type { Template } from '../../models';
+
+export const basic: Template = {
+  name: 'multifile-basic',
+  title: window.deps.translateString('templates.multifile.basic', 'Basic Template'),
+  thumbnail: 'assets/templates/blank.svg',
+  mainFile: 'index.html',
+  activeEditor: 'index.html',
+  files: [
+    {
+      filename: 'index.html',
+      language: 'html',
+      content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title></title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+  <body>
+
+    <script type="module" src="script.js"></script>
+  </body>
+</html>
+`,
+    },
+    {
+      filename: 'styles.css',
+      language: 'css',
+      content: '',
+    },
+    {
+      filename: 'script.js',
+      language: 'javascript',
+      content: '',
+    },
+  ],
+};
diff --git a/src/livecodes/templates/multifile/blank.ts b/src/livecodes/templates/multifile/blank.ts
index 559f5c0106..9a01d86f7d 100644
--- a/src/livecodes/templates/multifile/blank.ts
+++ b/src/livecodes/templates/multifile/blank.ts
@@ -10,29 +10,6 @@ export const blank: Template = {
     {
       filename: 'index.html',
       language: 'html',
-      content: `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title></title>
-    <link href="styles.css" rel="stylesheet" />
-  </head>
-  <body>
-
-    <script type="module" src="script.js"></script>
-  </body>
-</html>
-`,
-    },
-    {
-      filename: 'styles.css',
-      language: 'css',
-      content: '',
-    },
-    {
-      filename: 'script.js',
-      language: 'javascript',
       content: '',
     },
   ],
diff --git a/src/livecodes/templates/multifile/index.ts b/src/livecodes/templates/multifile/index.ts
index c17e9dbf64..842328fcf6 100644
--- a/src/livecodes/templates/multifile/index.ts
+++ b/src/livecodes/templates/multifile/index.ts
@@ -1,3 +1,4 @@
+import { basic } from './basic';
 import { blank } from './blank';
 import { javascript } from './javascript';
 import { jest } from './jest';
@@ -11,6 +12,7 @@ import { vue } from './vue';
 
 export const multifileTemplates = [
   blank,
+  basic,
   javascript,
   typescript,
   react,
diff --git a/src/livecodes/utils/utils.ts b/src/livecodes/utils/utils.ts
index 353a64882a..32fb4a7b31 100644
--- a/src/livecodes/utils/utils.ts
+++ b/src/livecodes/utils/utils.ts
@@ -563,13 +563,10 @@ type MustInclude<T, U extends T[]> = [T] extends [ValueOf<U>] ? U : never;
  * converts TypeScript string union to array
  * see https://stackoverflow.com/a/70694878/5054774
  */
-export const stringUnionToArray =
-  /* @__PURE__ */
-
-
-    <T>() =>
-    <U extends NonEmptyArray<T>>(...elements: MustInclude<T, U>) =>
-      elements;
+export const stringUnionToArray = /* @__PURE__ */
+  <T>() =>
+  <U extends NonEmptyArray<T>>(...elements: MustInclude<T, U>) =>
+    elements;
 
 export const preventFocus = /* @__PURE__ */ (container: HTMLElement) => {
   // avoid focus on tab
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index df18add1cc..b183b23deb 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1581,6 +1581,7 @@ export type TemplateName =
   | 'blockly'
   | 'diagrams'
   | 'multifile-blank'
+  | 'multifile-basic'
   | 'multifile-javascript'
   | 'multifile-typescript'
   | 'multifile-react'

From 01ba69f8f44b3756ae4f2f458ee0535019a6cba1 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 31 Jan 2026 05:08:34 +0200
Subject: [PATCH 086/143] edit styles

---
 src/livecodes/styles/inc-modal.scss | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/livecodes/styles/inc-modal.scss b/src/livecodes/styles/inc-modal.scss
index a6adb70d4a..4d9ef92207 100644
--- a/src/livecodes/styles/inc-modal.scss
+++ b/src/livecodes/styles/inc-modal.scss
@@ -1197,10 +1197,9 @@
 
     a::after {
       content: 'Multi-file';
-      display: block;
-      font-size: smaller;
+      font-size: var(--s10);
       opacity: 0.5;
-      padding: 4px;
+      padding: var(--s4);
       position: absolute;
       right: 0;
       top: 0;

From 1371e73e927f800f10b748f4b72704a73fc837e8 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 31 Jan 2026 05:26:03 +0200
Subject: [PATCH 087/143] export binary files

---
 src/livecodes/export/export-src.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/livecodes/export/export-src.ts b/src/livecodes/export/export-src.ts
index 7e4c085ff0..b20dbef67e 100644
--- a/src/livecodes/export/export-src.ts
+++ b/src/livecodes/export/export-src.ts
@@ -1,4 +1,4 @@
-import type { getLanguageExtension as getLanguageExtensionFn } from '../languages';
+import { getFileLanguage, type getLanguageExtension as getLanguageExtensionFn } from '../languages';
 import type { Config, EditorId } from '../models';
 import { downloadFile, loadScript } from '../utils/utils';
 import { jsZipUrl } from '../vendors';
@@ -22,7 +22,12 @@ export const exportSrc = async (
 
   const files = getFilesFromConfig(config, deps);
   (Object.keys(files) as EditorId[]).forEach((filename) => {
-    zip.file(filename, files[filename]?.content);
+    const content = files[filename]?.content || '';
+    if (getFileLanguage(filename) === 'binary') {
+      zip.file(filename, content.split('base64,')[1] || '', { base64: true });
+    } else {
+      zip.file(filename, content);
+    }
   });
   zip.file('result.html', html);
   zip.file('livecodes.json', JSON.stringify(config, null, 2));

From 8e506636531362a8e8ecf19d97fe48ffedbc679f Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 31 Jan 2026 05:57:22 +0200
Subject: [PATCH 088/143] copy binary files as data urls

---
 src/livecodes/core.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 6d88d92a19..3bdf6bb92e 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -3356,8 +3356,10 @@ const handleEditorTools = () => {
 
   eventsManager.addEventListener(UI.getCopyAsUrlButton(), 'click', () => {
     const currentEditor = getActiveEditor();
+    const content = currentEditor?.getValue() || '';
+    const language = currentEditor?.getLanguage();
     const mimeType = 'text/' + currentEditor?.getLanguage();
-    const dataUrl = toDataUrl(currentEditor?.getValue() || '', mimeType);
+    const dataUrl = language === 'binary' ? content : toDataUrl(content, mimeType);
     if (currentEditor && copyToClipboard(dataUrl)) {
       notifications.success(
         window.deps.translateString('core.copy.copiedAsDataURL', 'Code copied as data URL'),

From 2b2c34157ac95b35ad075eb5d55bf6dcc8ee1c3d Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 31 Jan 2026 09:08:24 +0200
Subject: [PATCH 089/143] improve vue support in monaco

---
 src/livecodes/editor/monaco/monaco.ts | 56 +++++++--------------------
 src/livecodes/vendors.ts              |  8 ++--
 2 files changed, 18 insertions(+), 46 deletions(-)

diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index efdd9d688b..2c7c1508ce 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -24,8 +24,8 @@ import {
   emmetMonacoUrl,
   monacoBaseUrl,
   monacoEmacsUrl,
+  monacoLanguagesBaseUrl,
   monacoVimUrl,
-  monacoVolarUrl,
   typescriptVersion,
   vendorsBaseUrl,
 } from '../../vendors';
@@ -44,8 +44,6 @@ let codeiumProvider: { dispose: () => void } | undefined;
 // track editors for providing context for AI
 let editors: Monaco.editor.IStandaloneCodeEditor[] = [];
 let tailwindcssConfig: any;
-let vueRegistered = false;
-let shikiThemes: Record<string, string> = {};
 
 export const createEditor = async (options: EditorOptions): Promise<CodeEditor> => {
   const {
@@ -67,8 +65,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   const loadMonaco = () => import(monacoBaseUrl + 'monaco.js');
 
   let editorMode: any | undefined;
-  let currentTheme = theme;
-  let currentEditorTheme = editorTheme;
 
   const convertOptions = (opt: EditorConfig): Options => ({
     fontFamily: getFontFamily(opt.fontFamily),
@@ -143,9 +139,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
   const setTheme = (theme: Theme, editorTheme: Config['editorTheme']) => {
     loadTheme(theme, editorTheme).then((newTheme) => {
-      monaco.editor.setTheme(shikiThemes[newTheme] ?? newTheme);
-      currentTheme = theme;
-      currentEditorTheme = editorTheme;
+      monaco.editor.setTheme(newTheme);
     });
   };
 
@@ -265,6 +259,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     minizinc: baseUrl + '{{hash:monaco-lang-minizinc.js}}',
     prolog: baseUrl + '{{hash:monaco-lang-prolog.js}}',
     // sql: baseUrl + '{{hash:monaco-lang-sql.js}}', // TODO: add autocomplete
+    vue: monacoLanguagesBaseUrl + 'vue.js',
     wat: baseUrl + '{{hash:monaco-lang-wat.js}}',
   };
 
@@ -272,26 +267,12 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     config?: Monaco.languages.LanguageConfiguration;
     tokens?: Monaco.languages.IMonarchLanguage;
     completions?: Monaco.languages.CompletionItemProvider;
+    definitions?: Monaco.languages.DefinitionProvider;
+    init?: (monaco: typeof Monaco) => void;
   }
 
-  const addVueSupport = async () => {
-    if (vueRegistered) return;
-    vueRegistered = true;
-    const { registerVue, registerHighlighter } = await import(monacoVolarUrl);
-    const tsCompilerOptions = { ...getCompilerOptions('vue'), jsx: 'preserve' };
-    await registerVue({ editor, monaco, tsCompilerOptions, silent: true });
-    shikiThemes = registerHighlighter(monaco);
-    shikiThemes['custom-vs-light'] = shikiThemes.vs;
-    shikiThemes['custom-vs-dark'] = shikiThemes['vs-dark'];
-    setTheme(currentTheme, currentEditorTheme);
-  };
-
   const loadMonacoLanguage = async (lang: Language) => {
     lang = monacoMapLanguage(lang);
-    if (lang === 'vue') {
-      await addVueSupport();
-      return;
-    }
     const langUrl = customLanguages[lang];
     if (langUrl && !monaco.languages.getLanguages().find((l) => l.id === lang)) {
       const mod: CustomLanguageDefinition = (await import(langUrl)).default;
@@ -305,6 +286,12 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
       if (mod.completions) {
         monaco.languages.registerCompletionItemProvider(lang, mod.completions);
       }
+      if (mod.definitions) {
+        monaco.languages.registerDefinitionProvider(lang, mod.definitions);
+      }
+      if (mod.init) {
+        mod.init(monaco);
+      }
     }
   };
 
@@ -351,16 +338,9 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
   const editor = monaco.editor.create(container, {
     ...editorOptions,
-    language: language.startsWith('vue') ? 'html' : monacoMapLanguage(language),
+    language: monacoMapLanguage(language),
   });
-  setModel(editor, options.value, language.startsWith('vue') ? 'html' : language);
-
-  // avoid a race condition that prevents loading vue worker
-  if (language.startsWith('vue')) {
-    setTimeout(() => {
-      setLanguage(language);
-    }, 50);
-  }
+  setModel(editor, options.value, monacoMapLanguage(language));
 
   if (editorId.includes('.')) {
     editors.push(editor);
@@ -476,16 +456,8 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     language = lang;
     clearTypes(false);
     const valueToInsert = value ?? editor.getValue();
-    if (monacoMapLanguage(lang) === 'vue') {
-      // avoid race condition of value changing while valor is loading
-      setValue(valueToInsert);
-    } else {
-      setModel(editor, valueToInsert, language);
-    }
     loadMonacoLanguage(lang).then(() => {
-      if (monacoMapLanguage(lang) === 'vue') {
-        setModel(editor, editor.getValue(), language);
-      }
+      setModel(editor, valueToInsert, language);
     });
   };
 
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 77a49014ce..a1cd3f245b 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -312,14 +312,14 @@ export const monacoBaseUrl = /* @__PURE__ */ getUrl('@live-codes/monaco-editor@0
 
 export const monacoEmacsUrl = /* @__PURE__ */ getUrl('monaco-emacs@0.3.0/dist/monaco-emacs.js');
 
+export const monacoLanguagesBaseUrl = /* @__PURE__ */ getUrl(
+  '@live-codes/monaco-languages@0.1.0/dist/',
+);
+
 export const monacoThemesBaseUrl = /* @__PURE__ */ getUrl('monaco-themes@0.4.4/themes/');
 
 export const monacoVimUrl = /* @__PURE__ */ getUrl('monaco-vim@0.4.1/dist/monaco-vim.js');
 
-export const monacoVolarUrl = /* @__PURE__ */ getUrl(
-  '@live-codes/monaco-volar@0.1.0/dist/index.js',
-);
-
 export const mustacheUrl = /* @__PURE__ */ getUrl('mustache@4.2.0/mustache.js');
 
 export const ninjaKeysUrl = /* @__PURE__ */ getUrl('@hatemhosny/ninja-keys@1.14.0/bundle/index.js');

From 3a24106797d3a39250b7ff732f4edbfe0cc196fa Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 31 Jan 2026 09:22:47 +0200
Subject: [PATCH 090/143] load monaco languages from CDN

---
 scripts/build.js                              |    8 -
 .../monaco/languages/monaco-lang-astro.ts     |  222 ---
 .../monaco/languages/monaco-lang-clio.ts      |  120 --
 .../monaco/languages/monaco-lang-imba.ts      | 1522 -----------------
 .../monaco/languages/monaco-lang-json5.ts     |  127 --
 .../monaco/languages/monaco-lang-minizinc.ts  |  381 -----
 .../monaco/languages/monaco-lang-prolog.ts    |  126 --
 .../monaco/languages/monaco-lang-sql.ts       | 1401 ---------------
 .../monaco/languages/monaco-lang-wat.ts       |  710 --------
 src/livecodes/editor/monaco/monaco.ts         |   18 +-
 10 files changed, 9 insertions(+), 4626 deletions(-)
 delete mode 100644 src/livecodes/editor/monaco/languages/monaco-lang-astro.ts
 delete mode 100644 src/livecodes/editor/monaco/languages/monaco-lang-clio.ts
 delete mode 100644 src/livecodes/editor/monaco/languages/monaco-lang-imba.ts
 delete mode 100644 src/livecodes/editor/monaco/languages/monaco-lang-json5.ts
 delete mode 100644 src/livecodes/editor/monaco/languages/monaco-lang-minizinc.ts
 delete mode 100644 src/livecodes/editor/monaco/languages/monaco-lang-prolog.ts
 delete mode 100644 src/livecodes/editor/monaco/languages/monaco-lang-sql.ts
 delete mode 100644 src/livecodes/editor/monaco/languages/monaco-lang-wat.ts

diff --git a/scripts/build.js b/scripts/build.js
index 06d441a7bc..d7bfa8b37c 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -157,14 +157,6 @@ const esmBuild = () =>
       'headless.ts',
       'templates/starter/index.ts',
       'editor/monaco/monaco.ts',
-      'editor/monaco/languages/monaco-lang-astro.ts',
-      'editor/monaco/languages/monaco-lang-clio.ts',
-      'editor/monaco/languages/monaco-lang-imba.ts',
-      'editor/monaco/languages/monaco-lang-json5.ts',
-      'editor/monaco/languages/monaco-lang-minizinc.ts',
-      'editor/monaco/languages/monaco-lang-prolog.ts',
-      // 'editor/monaco/languages/monaco-lang-sql.ts',
-      'editor/monaco/languages/monaco-lang-wat.ts',
       'editor/codemirror/codemirror.ts',
       'editor/codejar/codejar.ts',
       'editor/blockly/blockly.ts',
diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-astro.ts b/src/livecodes/editor/monaco/languages/monaco-lang-astro.ts
deleted file mode 100644
index 5f15506a50..0000000000
--- a/src/livecodes/editor/monaco/languages/monaco-lang-astro.ts
+++ /dev/null
@@ -1,222 +0,0 @@
-export default {
-  config: {
-    comments: {
-      blockComment: ['<!--', '-->'],
-    },
-    brackets: [
-      ['---', '---'],
-      ['<!--', '-->'],
-      ['<', '>'],
-      ['{', '}'],
-      ['(', ')'],
-    ],
-    autoClosingPairs: [
-      { open: '{', close: '}' },
-      { open: '[', close: ']' },
-      { open: '(', close: ')' },
-      { open: "'", close: "'" },
-      { open: '"', close: '"' },
-      { open: '<!--', close: '-->', notIn: ['comment', 'string'] },
-      { open: '/**', close: ' */', notIn: ['string'] },
-      { open: '<', close: '>', notIn: ['string'] },
-    ],
-    autoCloseBefore: ';:.,=}])>` \n\t',
-    surroundingPairs: [
-      { open: "'", close: "'" },
-      { open: '"', close: '"' },
-      { open: '{', close: '}' },
-      { open: '[', close: ']' },
-      { open: '(', close: ')' },
-      { open: '<', close: '>' },
-    ],
-    folding: {
-      markers: {
-        start: /^\\s*<!--\\s*#region\\b.*-->/,
-        end: /^\\s*<!--\\s*#endregion\\b.*-->/,
-      },
-    },
-  },
-
-  tokens: {
-    defaultToken: '',
-    tokenPostfix: '.astro',
-    ignoreCase: false,
-
-    // non matched elements
-    empty: [
-      'area',
-      'base',
-      'basefont',
-      'br',
-      'col',
-      'frame',
-      'hr',
-      'img',
-      'input',
-      'isindex',
-      'link',
-      'meta',
-      'param',
-    ],
-
-    // The main tokenizer for our languages
-    tokenizer: {
-      root: [
-        [/<!DOCTYPE/, 'metatag', '@doctype'],
-        [/<!--/, 'comment', '@comment'],
-        [/^---/, 'comment', '@frontmatter'],
-        [/{/, '', '@expression'],
-        [/(<)((?:[\w\-]+:)?[\w\-]+)(\s*)(\/>)/, ['delimiter', 'tag', '', 'delimiter']],
-        [/(<)(script)/, ['delimiter', { token: 'tag', next: '@script' }]],
-        [/(<)(style)/, ['delimiter', { token: 'tag', next: '@style' }]],
-        [/(<)((?:[\w\-]+:)?[\w\-]+)/, ['delimiter', { token: 'tag', next: '@otherTag' }]],
-        [/(<\/)((?:[\w\-]+:)?[\w\-]+)/, ['delimiter', { token: 'tag', next: '@otherTag' }]],
-        [/</, 'delimiter'],
-        [/[^<{]+/], // text
-      ],
-
-      doctype: [
-        [/[^>]+/, 'metatag.content'],
-        [/>/, 'metatag', '@pop'],
-      ],
-
-      frontmatter: [
-        [/^---/, { token: 'comment', next: '@pop', nextEmbedded: '@pop' }],
-        [/./, { token: '@rematch', next: '@frontmatterEmbedded', nextEmbedded: 'text/javascript' }],
-      ],
-
-      frontmatterEmbedded: [
-        [/[^-]+|-[^-][^-]+/, { token: '@rematch', next: '@pop' }],
-        [/^---/, { token: 'comment', next: '@root', nextEmbedded: '@pop' }],
-      ],
-
-      expression: [
-        [
-          /[^<{}]/,
-          { token: '@rematch', next: '@expressionEmbedded', nextEmbedded: 'text/javascript' },
-        ],
-        [/</, { token: '@rematch', next: '@pop' }],
-        [/}/, { token: '', next: '@pop' }],
-      ],
-
-      expressionEmbedded: [
-        [/{/, '@rematch', '@push'],
-        [/</, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
-        [/}/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
-      ],
-
-      comment: [
-        [/-->/, 'comment', '@pop'],
-        [/[^-]+/, 'comment.content'],
-        [/./, 'comment.content'],
-      ],
-
-      otherTag: [
-        [/\/?>/, 'delimiter', '@pop'],
-        [/"([^"]*)"/, 'attribute.value'],
-        [/'([^']*)'/, 'attribute.value'],
-        [/[\w\-]+/, 'attribute.name'],
-        [/=/, 'delimiter'],
-        [/[ \t\r\n]+/], // whitespace
-      ],
-
-      // -- BEGIN <script> tags handling
-
-      // After <script
-      script: [
-        [/type/, 'attribute.name', '@scriptAfterType'],
-        [/"([^"]*)"/, 'attribute.value'],
-        [/'([^']*)'/, 'attribute.value'],
-        [/[\w\-]+/, 'attribute.name'],
-        [/=/, 'delimiter'],
-        [/>/, { token: 'delimiter', next: '@scriptEmbedded', nextEmbedded: 'text/javascript' }],
-        [/[ \t\r\n]+/], // whitespace
-        [/(<\/)(script\s*)(>)/, ['delimiter', 'tag', { token: 'delimiter', next: '@pop' }]],
-      ],
-
-      // After <script ... type
-      scriptAfterType: [
-        [/=/, 'delimiter', '@scriptAfterTypeEquals'],
-        [/>/, { token: 'delimiter', next: '@scriptEmbedded', nextEmbedded: 'text/javascript' }], // cover invalid e.g. <script type>
-        [/[ \t\r\n]+/], // whitespace
-        [/<\/script\s*>/, { token: '@rematch', next: '@pop' }],
-      ],
-
-      // After <script ... type =
-      scriptAfterTypeEquals: [
-        [/"([^"]*)"/, { token: 'attribute.value', switchTo: '@scriptWithCustomType.$1' }],
-        [/'([^']*)'/, { token: 'attribute.value', switchTo: '@scriptWithCustomType.$1' }],
-        [/>/, { token: 'delimiter', next: '@scriptEmbedded', nextEmbedded: 'text/javascript' }], // cover invalid e.g. <script type=>
-        [/[ \t\r\n]+/], // whitespace
-        [/<\/script\s*>/, { token: '@rematch', next: '@pop' }],
-      ],
-
-      // After <script ... type = $S2
-      scriptWithCustomType: [
-        [/>/, { token: 'delimiter', next: '@scriptEmbedded.$S2', nextEmbedded: '$S2' }],
-        [/"([^"]*)"/, 'attribute.value'],
-        [/'([^']*)'/, 'attribute.value'],
-        [/[\w\-]+/, 'attribute.name'],
-        [/=/, 'delimiter'],
-        [/[ \t\r\n]+/], // whitespace
-        [/<\/script\s*>/, { token: '@rematch', next: '@pop' }],
-      ],
-
-      scriptEmbedded: [
-        [/<\/script/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
-        [/[^<]+/, ''],
-      ],
-
-      // -- END <script> tags handling
-
-      // -- BEGIN <style> tags handling
-
-      // After <style
-      style: [
-        [/type/, 'attribute.name', '@styleAfterType'],
-        [/"([^"]*)"/, 'attribute.value'],
-        [/'([^']*)'/, 'attribute.value'],
-        [/[\w\-]+/, 'attribute.name'],
-        [/=/, 'delimiter'],
-        [/>/, { token: 'delimiter', next: '@styleEmbedded', nextEmbedded: 'text/css' }],
-        [/[ \t\r\n]+/], // whitespace
-        [/(<\/)(style\s*)(>)/, ['delimiter', 'tag', { token: 'delimiter', next: '@pop' }]],
-      ],
-
-      // After <style ... type
-      styleAfterType: [
-        [/=/, 'delimiter', '@styleAfterTypeEquals'],
-        [/>/, { token: 'delimiter', next: '@styleEmbedded', nextEmbedded: 'text/css' }], // cover invalid e.g. <style type>
-        [/[ \t\r\n]+/], // whitespace
-        [/<\/style\s*>/, { token: '@rematch', next: '@pop' }],
-      ],
-
-      // After <style ... type =
-      styleAfterTypeEquals: [
-        [/"([^"]*)"/, { token: 'attribute.value', switchTo: '@styleWithCustomType.$1' }],
-        [/'([^']*)'/, { token: 'attribute.value', switchTo: '@styleWithCustomType.$1' }],
-        [/>/, { token: 'delimiter', next: '@styleEmbedded', nextEmbedded: 'text/css' }], // cover invalid e.g. <style type=>
-        [/[ \t\r\n]+/], // whitespace
-        [/<\/style\s*>/, { token: '@rematch', next: '@pop' }],
-      ],
-
-      // After <style ... type = $S2
-      styleWithCustomType: [
-        [/>/, { token: 'delimiter', next: '@styleEmbedded.$S2', nextEmbedded: '$S2' }],
-        [/"([^"]*)"/, 'attribute.value'],
-        [/'([^']*)'/, 'attribute.value'],
-        [/[\w\-]+/, 'attribute.name'],
-        [/=/, 'delimiter'],
-        [/[ \t\r\n]+/], // whitespace
-        [/<\/style\s*>/, { token: '@rematch', next: '@pop' }],
-      ],
-
-      styleEmbedded: [
-        [/<\/style/, { token: '@rematch', next: '@pop', nextEmbedded: '@pop' }],
-        [/[^<]+/, ''],
-      ],
-
-      // -- END <style> tags handling
-    },
-  },
-};
diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-clio.ts b/src/livecodes/editor/monaco/languages/monaco-lang-clio.ts
deleted file mode 100644
index e3fb6fa5cf..0000000000
--- a/src/livecodes/editor/monaco/languages/monaco-lang-clio.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-export default {
-  tokens: {
-    // Set defaultToken to invalid to see what you do not tokenize yet
-    // defaultToken: 'invalid',
-
-    keywords: [
-      'import',
-      'export',
-      'from',
-      'as',
-      'fn',
-      'await',
-      '[await]',
-      'if',
-      'else',
-      'true',
-      'false',
-      'and',
-      'or',
-      'not',
-      'type',
-      'list',
-    ],
-
-    typeKeywords: ['Number', 'String', 'Function', 'Array'],
-
-    operators: ['>', '<', ':', '=', '<=', '>=', '!=', '+', '-', '*', '/', '//', '|', '**', '%'],
-
-    // we include these common regular expressions
-    symbols: /[=><!~?:&|+\-*\/\^%]+/,
-
-    // C# style strings
-    escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
-
-    // The main tokenizer for our languages
-    tokenizer: {
-      root: [
-        [/fn/, { token: 'keyword', next: '@function' }],
-        [/->/, { token: 'operators', next: '@chain' }],
-
-        // identifiers and keywords
-        [
-          /[a-zA-Z_$][\w$]*/i,
-          {
-            cases: {
-              '@typeKeywords': 'keyword',
-              '@keywords': 'keyword',
-              '@default': 'identifier',
-            },
-          },
-        ],
-
-        // whitespace
-        { include: '@whitespace' },
-
-        // delimiters and operators
-        [/[{}()\[\]]/, '@brackets'],
-        [/[<>](?!@symbols)/, '@brackets'],
-        [
-          /@symbols/,
-          {
-            cases: {
-              '@operators': 'operator',
-              '@default': '',
-            },
-          },
-        ],
-
-        // @ annotations.
-        // As an example, we emit a debugging log message on these tokens.
-        // Note: message are suppressed during the first load -- change some lines to see them.
-        [/@\s*[a-zA-Z_\$][\w\$]*/, { token: 'annotation' }],
-
-        // numbers
-        [/\d*\.\d+([eE][\-+]?\d+)?/, 'number.float'],
-        [/0[xX][0-9a-fA-F]+/, 'number.hex'],
-        [/\d+/, 'number'],
-
-        // delimiter: after number because of .\d floats
-        [/[;,.]/, 'delimiter'],
-
-        // strings
-        [/"([^"\\]|\\.)*$/, 'string.invalid'], // non-terminated string
-        [/"/, { token: 'string.quote', bracket: '@open', next: '@string' }],
-
-        // single-quote strings
-        [/"([^'\\]|\\.)*$/, 'string.invalid'], // non-terminated string
-        [/'/, { token: 'string.quote', bracket: '@open', next: '@stringSingle' }],
-      ],
-
-      // eslint-disable-next-line id-blacklist
-      string: [
-        [/[^\\"]+/, 'string'],
-        [/@escapes/, 'string.escape'],
-        [/\\./, 'string.escape.invalid'],
-        [/"/, { token: 'string.quote', bracket: '@close', next: '@pop' }],
-      ],
-
-      stringSingle: [
-        [/[^\\']+/, 'string'],
-        [/@escapes/, 'string.escape'],
-        [/\\./, 'string.escape.invalid'],
-        [/'/, { token: 'string.quote', bracket: '@close', next: '@pop' }],
-      ],
-
-      whitespace: [
-        [/[ \t\r\n]+/, 'white'],
-        [/--.*$/, 'comment'],
-      ],
-
-      function: [[/[a-zA-Z0-9_]+/, { token: 'variable', next: '@pop' }]],
-
-      chain: [
-        [/\*/, 'operators'],
-        [/\[?await\]?/, 'keyword'],
-        [/[a-zA-Z]+/, { token: 'variable', next: '@pop' }],
-      ],
-    },
-  },
-};
diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-imba.ts b/src/livecodes/editor/monaco/languages/monaco-lang-imba.ts
deleted file mode 100644
index e53aaac17a..0000000000
--- a/src/livecodes/editor/monaco/languages/monaco-lang-imba.ts
+++ /dev/null
@@ -1,1522 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-
-// from https://github.com/imba/imba.io/blob/master/scripts/lexer/grammar.imba
-// and https://github.com/imba/imba.io/blob/master/src/repl/languages/imba.imba
-
-function iter$__(a) {
-  let v;
-  return a ? ((v = a.toIterable) ? v.call(a) : a) : [];
-}
-
-/*body*/
-const eolpop = [/^/, { token: '@rematch', next: '@pop' }];
-const repop = { token: '@rematch', next: '@pop' };
-const toodeep = { token: 'white.indent', next: '@>illegal_indent' };
-
-const EOF = '§EOF§';
-
-function regexify(array, pattern = '#') {
-  if (typeof array == 'string') {
-    array = array.split(' ');
-  }
-
-  let items = array.slice().sort(function (_0, _1) {
-    return _1.length - _0.length;
-  });
-  items = items.map(function (item) {
-    let escaped = item.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&');
-    return pattern.replace('#', escaped);
-  });
-  return new RegExp('(?:' + items.join('|') + ')');
-}
-
-function denter(indent, outdent, stay, o = {}) {
-  var v$φ;
-
-  if (indent == null) {
-    indent = toodeep;
-  } else if (indent == 1) {
-    indent = { next: '@>' };
-  } else if (indent == 2) {
-    indent = { next: '@>_indent&-_indent' };
-  } else if (typeof indent == 'string') {
-    indent = { next: indent };
-  }
-
-  if (outdent == -1) {
-    outdent = repop;
-  }
-  if (stay == -1) {
-    stay = repop;
-  } else if (stay == 0) {
-    o.comment == null ? (o.comment = true) : o.comment;
-
-    stay = {};
-  }
-
-  indent = Object.assign({ token: 'white.tabs' }, indent || {});
-  stay = Object.assign({ token: 'white.tabs' }, stay || {});
-  outdent = Object.assign({ token: '@rematch', next: '@pop' }, outdent || {});
-
-  let cases = {
-    '$1==$S2\t': indent,
-    '$1==$S2': {
-      cases: { '$1==$S6': stay, '@default': { token: '@rematch', switchTo: '@*$1' } },
-    },
-    '@default': outdent,
-  };
-  v$φ = 0;
-  for (let k of ['next', 'switchTo']) {
-    let v = v$φ++;
-    if (indent[k] && indent[k].indexOf('*') == -1) {
-      indent[k] += '*$1';
-    }
-  }
-
-  // for own k,v of cases
-  let rule = [/^(\t*)(?=[^ \t\n])/, { cases: cases }];
-  if (o.comment) {
-    let clones = {};
-    for (let iφ = 0, keysφ = Object.keys(cases), lφ = keysφ.length, k, v; iφ < lφ; iφ++) {
-      k = keysφ[iφ];
-      v = cases[k];
-      let clone = Object.assign({}, v);
-      if (!clone.next && !clone.switchTo) {
-        clone.next = '@>_comment';
-      }
-      clones[k] = clone;
-    }
-    return [[/^(\t*)(?=#\s|#$)/, { cases: clones }], rule];
-  }
-
-  return rule;
-}
-
-const states = {
-  root: [
-    [/^@comment/, 'comment', '@>_comment'], // want to push this state _ before the token
-    [
-      /^(\t+)(?=[^\t\n])/,
-      {
-        cases: {
-          '$1==$S2\t': { token: 'white.indent', next: '@>_indent*$1' },
-          '@default': 'white.indent',
-        },
-      },
-    ],
-    'block_',
-  ],
-
-  _comment: [
-    [/^([\t\s\n]*)$/, 'comment'],
-    [
-      /^(\t*)([\S\s]*)/,
-      {
-        cases: {
-          // same or deeper indentation
-          '$1~$S2\t*': { token: 'comment' },
-          '@default': { token: '@rematch', next: '@pop' },
-        },
-      },
-    ],
-    [/[\S\s]+/, 'comment'],
-  ],
-
-  illegal_indent: [denter()],
-
-  identifier_: [
-    [/\$\w+\$/, 'identifier.env'],
-    [/\$\d+/, 'identifier.special'],
-    [/\#+@id/, 'identifier.symbol'],
-    [/\¶@id/, 'ivar'], // imba1
-    [
-      /@id\!?/,
-      {
-        cases: {
-          this: 'this',
-          self: 'self',
-          '@keywords': 'keyword.$#',
-          '$0~[A-Z].*': 'identifier.uppercase.$F',
-          '@default': 'identifier.$F',
-        },
-      },
-    ],
-  ],
-
-  block_: [
-    // 'common_'
-    [/^(\t+)(?=[\r\n]|$)/, 'white.tabs'],
-    'class_',
-    'tagclass_',
-    'var_',
-    'func_',
-    'import_',
-    'export_',
-    'flow_',
-    'for_',
-    'try_',
-    'catch_',
-    'while_',
-    'css_',
-    'tag_',
-    'do_',
-    'block_comment_',
-    'expr_',
-    [/[ ]+/, 'white'],
-    'common_',
-  ],
-
-  indentable_: [
-    [/^[ ]+/, 'white'],
-    denter('@>_paren_indent&-_indent', null, null),
-    [/^(\t+)(?=[\r\n]|$)/, 'white.tabs'],
-    'whitespace',
-  ],
-
-  _indent: [denter(2, -1, 0), 'block_'],
-
-  _paren_indent: [denter(2, -1, 0), 'block_', [/\)|\}|\]/, '@rematch', '@pop']],
-
-  block: [denter('@>', -1, 0), 'block_'],
-  bool_: [[/(true|false|yes|no|undefined|null)(?![\:\-\w\.\_])/, 'boolean']],
-
-  op_: [
-    [/\s+\:\s+/, 'operator.ternary'],
-    // [/\s*(\=)/]
-    [
-      /(@unspaced_ops)/,
-      {
-        cases: {
-          '@spread': 'operator.spread',
-          '@access': 'operator.access',
-          '@default': 'operator',
-        },
-      },
-    ],
-    [/\/(?!\/)/, 'operator.math'],
-    [/\&(?=[,\)])/, 'operator.special.blockparam'],
-    [
-      /(\s*)(@symbols)(\s*)/,
-      {
-        cases: {
-          '$2@assignments': 'operator.assign',
-          '$2@math': 'operator.math',
-          '$2@operators': 'operator',
-          '$2@logic': 'operator.logic',
-          '$2@access': 'operator.access',
-          '@default': 'delimiter',
-        },
-      },
-    ],
-    [/\&\b/, 'operator'],
-  ],
-
-  keyword_: [
-    [/new@B/, 'keyword.new'],
-    [/isa@B/, 'keyword.isa'],
-    [/is@B/, 'keyword.is'],
-    [/(switch|when|throw|continue|break|then|await|typeof|by)@B/, 'keyword.$1'],
-    [/delete@B/, 'keyword.delete'],
-    [/and@B|or@B/, 'operator.flow'],
-  ],
-
-  return_: [[/return@B/, 'keyword.new']],
-
-  primitive_: ['string_', 'number_', 'regexp_', 'bool_'],
-
-  value_: [
-    'primitive_',
-    'keyword_',
-    'implicit_call_',
-    'parens_', // call will always capture?
-    'key_',
-    'access_',
-    'identifier_',
-    'array_',
-    'object_',
-  ],
-
-  expr_: ['comment_', 'inline_var_', 'return_', 'value_', 'tag_', 'op_', 'type_', 'spread_'],
-
-  attr_expr_: [
-    'primitive_',
-    'parens_',
-    'access_',
-    'identifier_',
-    'array_',
-    'object_',
-    'tag_',
-    'op_',
-  ],
-
-  access_: [
-    [
-      /(\.\.?)(@propid\!?)/,
-      {
-        cases: {
-          '$2~[A-Z].*': ['operator.access', 'accessor.uppercase'],
-          '$2~#.*': ['operator.access', 'accessor.symbol'],
-          '@default': ['operator.access', 'accessor'],
-        },
-      },
-    ],
-  ],
-
-  call_: [[/\(/, '(', '@call_body']],
-
-  key_: [
-    [/(\#+@id)(\:\s*)/, ['key.symbol', 'operator.assign.key-value']],
-    [
-      /(@propid)(\:\s*)/,
-      {
-        cases: {
-          '@default': ['key', 'operator.assign.key-value'],
-        },
-      },
-    ],
-  ],
-
-  implicit_call_: [
-    [
-      /(\.\.?)(@propid)@implicitCall/,
-      {
-        cases: {
-          '$2~[A-Z].*': ['operator.access', 'accessor.uppercase', '@implicit_call_body'],
-          '@default': ['operator.access', 'accessor', '@implicit_call_body'],
-        },
-      },
-    ],
-    [
-      /(@propid)@implicitCall/,
-      {
-        cases: {
-          '$2~[A-Z].*': ['identifier.uppercase', '@implicit_call_body'],
-          '@default': ['identifier', '@implicit_call_body'],
-        },
-      },
-    ],
-  ],
-
-  implicit_call_body: [eolpop, [/\)|\}|\]|\>/, '@rematch', '@pop'], 'arglist_', 'whitespace'],
-
-  arglist_: ['do_', 'expr_', [/\s*\,\s*/, 'delimiter.comma']],
-
-  params_: [
-    [/\[/, 'array.[', '@array_var_body=decl-param'],
-    [/\{/, 'object.{', '@object_body=decl-param'],
-    [/(@variable)/, 'identifier.decl-param'],
-    // [/(\s*\=\s*)(?=(for|while|until|if|unless)\s)/,'operator','@pop']
-    'spread_',
-    'type_',
-    [/\s*\=\s*/, 'operator', '@var_value='],
-    [/\s*\,\s*/, 'separator'],
-  ],
-
-  object_: [[/\{/, 'object.{', '@object_body']],
-
-  parens_: [[/\(/, 'parens.(', '@parens_body']],
-
-  parens_body: [[/\)/, ')', '@pop'], 'indentable_', 'arglist_'],
-
-  array_: [[/\[/, 'array.[', '@array_body']],
-
-  array_body: [
-    [/\]@implicitCall/, { token: ']', switchTo: '@implicit_call_body=' }],
-    [/\]/, ']', '@pop'],
-    [/\)|\}/, 'invalid'],
-    'indentable_',
-    'expr_',
-    [',', 'delimiter'],
-  ],
-
-  object_body: [
-    [/\}/, '}', '@pop'],
-    [/(@id)(\s*:\s*)/, ['key', 'operator.assign.key-value', '@object_value']],
-    [/(@id)/, 'identifier.$F'],
-    [/\[/, '[', '@object_dynamic_key='], //
-    [/\s*=\s*/, 'operator.assign', '@object_value='],
-    [/:/, 'operator.assign.key-value', '@object_value='],
-    [/\,/, 'delimiter.comma'],
-    'indentable_',
-    'expr_',
-  ],
-
-  object_value: [
-    eolpop,
-    // couldnt this be indented as well?
-    // [/(?=,|\})/, 'delimiter', '@pop']
-    [/,|\}|\]|\)/, '@rematch', '@pop'],
-    'expr_',
-  ],
-
-  object_dynamic_key: [[']', ']', '@pop'], 'expr_'],
-
-  comment_: [[/#(\s.*)?(\n|$)/, 'comment']],
-
-  block_comment_: [[/###/, 'comment.start', '@_block_comment']],
-
-  _block_comment: [
-    [/###/, 'comment.end', '@pop'],
-    [/[^#]+/, 'comment'],
-    [/#(?!##)/, 'comment'],
-  ],
-
-  // add try_start that accepts catch on the same line?
-  try_: [[/try@B/, 'keyword.try', '@>_try&try']],
-
-  catch_: [
-    [/(catch\s+)(?=@id(\s|$))/, 'keyword.catch', '@catch_start&catch'],
-    [/catch@B/, 'keyword.catch', '@catch_start&catch'],
-  ],
-
-  catch_start: [
-    [/@id/, 'identifier.decl-const', { switchTo: '@>_catch' }],
-    [/.?/, '@rematch', { switchTo: '@>_catch' }],
-  ],
-
-  _catch: [denter('@>block', -1, 0), 'block_'],
-
-  _try: [denter('@>block', -1, 0), 'block_'],
-
-  do_: [
-    // [/(do)(\()/,['keyword.do','(','@>_do_params&do']]
-    [/do(?=\()/, 'keyword.do', '@>do_start&do'],
-    [/do(?=\s*\|)/, 'keyword.do', '@>do_piped&do'],
-    [/do@B/, 'keyword.do', '@>_do&do'],
-  ],
-
-  do_start: [
-    denter(null, -1, -1),
-    [/\(/, '(', { switchTo: '@_do_params' }],
-    [/./, '@rematch', { switchTo: '@_do' }],
-  ],
-
-  do_piped: [
-    denter(null, -1, -1),
-    [/\s*\|/, 'args.open', { switchTo: '@_do_piped_params' }],
-    [/./, '@rematch', { switchTo: '@_do' }],
-  ],
-
-  _do_piped_params: [[/\|/, 'args.close', { switchTo: '@_do' }], 'params_'],
-
-  _do_params: [[/\)/, ')', { switchTo: '@_do' }], 'params_'],
-
-  _do: [
-    denter(2, -1, 0),
-    // block in general, no?
-    [/(\}|\)|\])/, '@rematch', '@pop'],
-    'block_',
-  ],
-
-  class_: [
-    [/(extend)(?=\s+class )/, 'keyword.$1'],
-    [/(global)(?=\s+class )/, 'keyword.$1'],
-    [
-      /(class)(\s)(@id)/,
-      ['keyword.$1', 'white.$1name', 'entity.name.class.decl-const', '@class_start='],
-    ],
-    [/(class)(?=\n)/, 'keyword.$1', '@>_class&class='],
-  ],
-
-  class_start: [
-    [/(\s+\<\s+)(@id)/, ['keyword.extends', 'identifier.superclass']],
-    [/@comment/, 'comment'],
-    [/^/, '@rematch', { switchTo: '@>_class&class=' }],
-  ],
-
-  tagclass_: [
-    [/(extend)(?=\s+tag )/, 'keyword.$1'],
-    [/(global)(?=\s+tag )/, 'keyword.$1'],
-    [
-      /(tag)(\s)(@constant)/,
-      ['keyword.tag', 'white.tagname', 'entity.name.component.local', '@tagclass_start='],
-    ], // only when uppercase
-    [
-      /(tag)(\s)(@id)/,
-      ['keyword.tag', 'white.tagname', 'entity.name.component.global', '@tagclass_start='],
-    ], // only when uppercase
-  ],
-
-  tagclass_start: [
-    [/(\s+\<\s+)(@id)/, ['keyword.extends', 'identifier.superclass']],
-    [/@comment/, 'comment'],
-    [/^/, '@rematch', { switchTo: '@>_tagclass&component=' }],
-  ],
-
-  import_: [
-    [/(import)(?=\s+['"])/, 'keyword.import', '@>import_source'],
-    [
-      /(import)(\s+type)(?=\s[\w\$\@\{])/,
-      ['keyword.import', 'keyword.type', '@>import_body&-_imports=decl-import/part'],
-    ],
-    [/(import)@B/, 'keyword.import', '@>import_body&-_imports=decl-import/part'],
-  ],
-
-  import_body: [
-    denter(null, -1, 0),
-    [
-      /(@esmIdentifier)( +from)/,
-      ['identifier.$F.default', 'keyword.from', { switchTo: '@import_source' }],
-    ],
-    [
-      /(\*)(\s+as\s+)(@esmIdentifier)(\s+from)/,
-      [
-        'keyword.star',
-        'keyword.as',
-        'identifier.$F.ns',
-        'keyword.from',
-        { switchTo: '@import_source' },
-      ],
-    ],
-    [
-      /(@esmIdentifier)(\s*,\s*)(\*)(\s+as\s+)(@esmIdentifier)(from)/,
-      [
-        'identifier.$F.default',
-        'delimiter.comma',
-        'keyword.star',
-        'keyword.as',
-        'identifier.$F.ns',
-        'keyword.from',
-        { switchTo: '@import_source' },
-      ],
-    ],
-    // [/(\*)(\s+as\s+)(@esmIdentifier)/, ['keyword.star','keyword.as','identifier.const.import',switchTo: '@/delim']]
-    // [/(@esmIdentifier)(\s+as\s+)(@esmIdentifier)/, ['alias','keyword.as','identifier.const.import']]
-    [/\ *from/, 'keyword.from', { switchTo: '@import_source' }],
-    [/\{/, 'specifiers.{', '@esm_specifiers/part'],
-    [/(@esmIdentifier)/, 'identifier.$F', { switchTo: '@/delim' }],
-    [/\s*\,\s*/, 'delimiter.comma', { switchTo: '@/part' }],
-    'comma_',
-    'common_',
-  ],
-
-  import_source: [denter(null, -1, 0), [/["']/, 'path.open', '@_path=$#'], eolpop],
-
-  export_: [
-    [/(export)( +)(default)@B/, ['keyword.export', 'white', 'keyword.default']], // ,'@>import_body'
-    [/(export)(?= +(let|const|var|class|tag)@B)/, 'keyword.export'], // ,'@>import_body'
-    [/(export)( +)(global)@B/, ['keyword.export', 'white', 'keyword.global']], // ,'@>import_body'
-
-    [
-      /(export)(\s+\*\s+)(from)@B/,
-      ['keyword.export', 'operator.star', 'keyword.from', '@>import_source'],
-    ],
-    [/(export)@B/, 'keyword.export', '@>export_body'],
-  ],
-
-  export_body: [
-    denter(null, -1, 0),
-    [/(\*)(\s+as\s+)(@esmIdentifier)/, ['keyword.star', 'keyword.as', 'identifier.const.export']],
-    [/(@esmIdentifier)(\s+as\s+)(default)/, ['alias', 'keyword.as', 'alias.default']],
-    [
-      /(@esmIdentifier)(\s+as\s+)(@esmIdentifier)/,
-      ['alias', 'keyword.as', 'identifier.const.export'],
-    ],
-    [/from/, 'keyword.from', { switchTo: '@import_source' }],
-    [/\{/, '{', '@esm_specifiers=export/part'],
-    [/(@esmIdentifier)/, 'identifier.const.export'],
-    [/\*/, 'operator.star'],
-    'comma_',
-    'common_',
-  ],
-
-  esm_specifiers: [
-    [/\}/, '}', '@pop'],
-    [
-      /(@esmIdentifier)(\s+as\s+)(@esmIdentifier)/,
-      ['alias', 'keyword.as', 'identifier.const.$F', { switchTo: '@/delim' }],
-    ],
-    [
-      /@esmIdentifier/,
-      {
-        cases: {
-          '$/==part': { token: 'identifier.const.$S4', switchTo: '@/delim' },
-          '@default': { token: 'invalid' },
-        },
-      },
-    ],
-    [/\s*\,\s*/, 'delimiter.comma', { switchTo: '@/part' }],
-    'whitespace',
-  ],
-
-  _path: [
-    [/[^"'\`\{\\]+/, 'path'],
-    [/@escapes/, 'path.escape'],
-    [/\./, 'path.escape.invalid'],
-    [/\{/, 'invalid'],
-    [/["'`]/, { cases: { '$#==$F': { token: 'path.close', next: '@pop' }, '@default': 'path' } }],
-  ],
-
-  member_: [
-    // [/static(?=\s+(get|set|def) )/,'keyword.static'] # only in class and tagclass?
-    [/(constructor)@B/, 'entity.name.constructor', '@>def_params&def/def'],
-    [
-      /(def|get|set)(\s)(@defid)/,
-      ['keyword.$1', 'white.entity', 'entity.name.$1', '@>def_params&$1/$1'],
-    ],
-    [/(def|get|set)(\s)(\[)/, ['keyword.$1', 'white.entity', '$$', '@>def_dynamic_name/$1']],
-  ],
-
-  func_: [
-    [/export(?=\s+(get|set|def|global) )/, 'keyword.export'], // only in class and tagclass?
-    [/global(?=\s+(get|set|def) )/, 'keyword.global'], // only in class and tagclass?
-    [
-      /(def)(\s)(@id)(\.)(@defid)/,
-      [
-        'keyword.$1',
-        'white.entity',
-        'identifier.target',
-        'operator',
-        'entity.name.def',
-        '@>def_params&$1/$1',
-      ],
-    ],
-
-    [
-      /(def)(\s)(@defid)/,
-      ['keyword.$1', 'white.entity', 'entity.name.function.decl-const-func', '@>def_params&$1/$1'],
-    ],
-  ],
-
-  flow_: [
-    // [/(else)(?=\s|$)/, ['keyword.$1','@flow_start.$S2.flow.$S4']]
-    [/(if|else|elif|unless)(?=\s|$)/, ['keyword.$1', '@flow_start=$1']],
-  ],
-
-  flow_start: [
-    denter({ switchTo: '@>_flow&$F' }, -1, -1),
-    // denter({switchTo: '@>_flow&-body'},-1,-1)
-    // denter('@>_flow&block',-1,-1)
-    [/[ \t]+/, 'white'],
-    'expr_',
-  ],
-
-  for_: [
-    [/for(?: own)?@B/, 'keyword.$#', '@for_start&forscope=decl-for'],
-    // [/for@B/,'keyword.$#','@for_start&flow=let']
-  ],
-
-  while_: [[/(while|until)@B/, 'keyword.$#', '@>while_body']],
-  while_body: [denter(2, -1, 0), 'block_'],
-
-  for_start: [
-    denter({ switchTo: '@>for_body' }, -1, -1),
-    [/\[/, 'array.[', '@array_var_body'],
-    [/\{/, 'object.{', '@object_body'], // object_var_body?
-    [/(@variable)/, 'identifier.$F'],
-    [/(\s*\,\s*)/, 'separator', '@=decl-for-index'],
-    [/\s(in|of)@B/, 'keyword.$1', { switchTo: '@>for_source=' }],
-    [/[ \t]+/, 'white'],
-    'type_',
-  ],
-  for_source: [
-    denter({ switchTo: '@>for_body' }, -1, { switchTo: '@for_body' }),
-    'expr_',
-    [/[ \t]+/, 'white'],
-  ],
-
-  for_body: [denter(2, -1, 0), 'block_'],
-
-  decorator_: [
-    [/(@decid)(\()/, ['decorator', '$2', '@_decorator_params']],
-    [/(@decid)/, 'decorator'],
-  ],
-
-  _decorator_params: [[/\)/, ')', '@pop'], 'params_'],
-
-  field_: [
-    [
-      /((?:lazy )?)((?:static )?)(const|let|attr)(?=\s|$)/,
-      ['keyword.lazy', 'keyword.static', 'keyword.$1', '@_vardecl=field-$3'],
-    ], // $2_body.$S2.$2.$S4
-    [/(static\s+)(?=@fieldid)/, 'keyword.static'],
-    [/(@fieldid)(?=$)/, 'entity.name.field'],
-    [/(@fieldid)/, ['entity.name.field', '@_field_1']],
-  ],
-
-  _field_1: [
-    denter(null, -1, -1),
-    'type_',
-    [/(\s*=)(?!\=)/, ['operator.assign', '@>_field_value&field']],
-    [/(\s*(?:\@)set\s*)/, ['keyword.spy', '@>_def&spy']],
-  ],
-
-  _field_value: [
-    denter(2, -1, 0),
-    'block_', // sure?
-    [/(\s*(?:\@)set\s*)/, ['@rematch', '@pop']],
-  ],
-
-  var_: [
-    [
-      /((?:export )?)(const|let)(?=\s[\[\{\$a-zA-Z]|\s*$)/,
-      ['keyword.export', 'keyword.$1', '@_vardecl=decl-$2'],
-    ], // $2_body.$S2.$2.$S4
-    [/((?:export )?)(const|let)(?=\s|$)/, ['keyword.export', 'keyword.$1']],
-  ],
-
-  inline_var_: [
-    [/(const|let)(?=\s[\[\{\$a-zA-Z]|\s*$)/, ['keyword.$1', '@inline_var_body=decl-$1']],
-  ],
-
-  string_: [
-    [/"""/, 'string', '@_herestring="""'],
-    [/'''/, 'string', "@_herestring='''"],
-    [/["'`]/, 'string.open', '@_string=$#'],
-  ],
-
-  number_: [
-    [/0[xX][0-9a-fA-F_]+/, 'number.hex'],
-    [/0[b][01_]+/, 'number.binary'],
-    [/0[o][0-9_]+/, 'number.octal'],
-    [/(\d+)([a-z]+|\%)/, ['number', 'unit']],
-    [/(\d*\.\d+(?:[eE][\-+]?\d+)?)([a-z]+|\%)/, ['number.float', 'unit']],
-    [/\d+[eE]([\-+]?\d+)?/, 'number.float'],
-    [/\d[\d_]*\.\d[\d_]*([eE][\-+]?\d+)?/, 'number.float'],
-    [/\d[\d_]*/, 'number.integer'],
-    [/0[0-7]+(?!\d)/, 'number.octal'],
-    [/\d+/, 'number'],
-  ],
-
-  _string: [
-    [/[^"'\`\{\\]+/, 'string'],
-    [/@escapes/, 'string.escape'],
-    [/\./, 'string.escape.invalid'],
-    [
-      /\{/,
-      {
-        cases: {
-          "$F=='": 'string',
-          '@default': { token: 'string.bracket.open', next: '@interpolation_body' },
-        },
-      },
-    ],
-    [
-      /["'`]/,
-      { cases: { '$#==$F': { token: 'string.close', next: '@pop' }, '@default': 'string' } },
-    ],
-    [/#/, 'string'],
-  ],
-
-  _herestring: [
-    [/("""|''')/, { cases: { '$1==$F': { token: 'string', next: '@pop' }, '@default': 'string' } }],
-    [/[^#\\'"\{]+/, 'string'],
-    [/['"]+/, 'string'],
-    [/@escapes/, 'string.escape'],
-    [/\./, 'string.escape.invalid'],
-    [
-      /\{/,
-      {
-        cases: {
-          '$F=="""': { token: 'string', next: '@interpolation_body' },
-          '@default': 'string',
-        },
-      },
-    ],
-    [/#/, 'string'],
-  ],
-
-  interpolation_body: [[/\}/, 'string.bracket.close', '@pop'], 'expr_'],
-
-  _class: [
-    denter(toodeep, -1, 0),
-    // 'var_'
-    'css_',
-    'member_',
-    'comment_',
-    'decorator_',
-    [/(get|set|def|static|prop|attr)@B/, 'keyword.$0'],
-    'field_',
-    'common_',
-  ],
-
-  _tagclass: [
-    '_class',
-    [/(?=\<self)/, 'entity.name.def.render', '@_render&def'],
-    // self def
-  ],
-
-  def_params: [
-    // denter({switchTo: '@>_def'},-1,{switchTo: '@>_def'})
-    [/\(/, '(', '@def_parens'],
-    [/^/, '@rematch', { switchTo: '@_def' }],
-    [/do@B/, 'keyword.do', { switchTo: '@_def' }],
-    'params_',
-    [/@comment/, 'comment'],
-  ],
-
-  def_parens: [[/\)/, ')', '@pop'], 'params_'],
-
-  def_dynamic_name: [[']', { token: 'square.close', switchTo: '@def_params&$/' }], 'expr_'],
-
-  _render: [denter(2, -1, -1), 'block_'],
-
-  _def: [denter(2, -1, 0), 'block_'],
-
-  _flow: [denter(2, -1, 0), 'block_'],
-
-  _varblock: [
-    denter(1, -1, -1),
-    [/\[/, 'array.[', '@array_var_body'],
-    [/\{/, 'object.{', '@object_body'],
-    [/(@variable)/, 'identifier.$F'],
-    [/\s*\,\s*/, 'separator'],
-    [/(\s*\=\s*)(?=(for|while|until|if|unless|try)\s)/, 'operator', '@pop'],
-    [/(\s*\=\s*)/, 'operator', '@var_value='],
-    'type_',
-    [/#(\s.*)?\n?$/, 'comment'],
-  ],
-
-  _vardecl: [
-    denter(null, -1, -1),
-    [/\[/, 'array.[', '@array_var_body'],
-    [/\{/, 'object.{', '@object_body'],
-    [/(@variable)(?=\n|,|$)/, 'identifier.$F', '@pop'],
-    [/(@variable)/, 'identifier.$F'],
-    [/(\s*\=\s*)/, 'operator.declval', { switchTo: '@var_value&value=' }], // ,switchTo: '@var_value='
-    'type_',
-  ],
-
-  array_var_body: [
-    [/\]/, ']', '@pop'],
-    [/\{/, 'object.{', '@object_body'],
-    [/\[/, 'array.[', '@array_var_body'],
-    'spread_',
-    [/(@variable)/, 'identifier.$F'],
-    [/(\s*\=\s*)/, 'operator.assign', '@array_var_body_value='],
-    // 'expr_'
-    [',', 'delimiter'],
-  ],
-
-  array_var_body_value: [[/(?=,|\)|]|})/, 'delimiter', '@pop'], 'expr_'],
-
-  inline_var_body: [
-    [/\[/, 'array.[', '@array_var_body'],
-    [/\{/, 'object.{', '@object_body'],
-    [/(@variable)/, 'identifier.$F'],
-    [/(\s*\=\s*)/, 'operator', '@pop'], // ,switchTo: '@var_value='
-    'type_',
-  ],
-
-  var_value: [
-    [/(?=,|\)|]|})/, 'delimiter', '@pop'],
-    denter({ switchTo: '@>block' }, -1, -1),
-    'block_',
-    // 'do_'
-    // 'expr_'
-    // 'common_'
-  ],
-
-  common_: [[/^(\t+)(?=\n|$)/, 'white.tabs'], 'whitespace'],
-  comma_: [[/\s*,\s*/, 'delimiter.comma']],
-
-  spread_: [[/\.\.\./, 'operator.spread']],
-
-  type_: [[/\\/, '@rematch', '@_type&-_type/0']],
-
-  _type: [
-    denter(-1, -1, -1),
-    [/\\/, 'delimiter.type.prefix'],
-    // these should probably stack and pair
-    [/\[/, 'delimiter.type', '@/]'],
-    [/\(/, 'delimiter.type', '@/)'],
-    [/\{/, 'delimiter.type', '@/}'],
-    [/\</, 'delimiter.type', '@/>'],
-    [/\|/, 'delimiter.type.union'],
-    [
-      /\,|\s|\=|\./,
-      {
-        cases: {
-          '$/==0': { token: '@rematch', next: '@pop' },
-          '@default': 'type',
-        },
-      },
-    ],
-    [
-      /[\]\}\)\>]/,
-      {
-        cases: {
-          '$#==$/': { token: 'delimiter.type', next: '@pop' },
-          '@default': { token: '@rematch', next: '@pop' },
-        },
-      },
-    ],
-    [/[\w\-\$]+/, 'type'],
-  ],
-
-  css_: [
-    [/global(?=\s+css@B)/, 'keyword.$#'],
-    [/css(?:\s+)?/, 'keyword.css', '@>css_selector&rule-_sel'],
-  ],
-
-  sel_: [
-    [/(\%)((?:@id)?)/, ['style.selector.mixin.prefix', 'style.selector.mixin']],
-    [/(\@)(\.{0,2}[\w\-\<\>\!]*\+?)/, 'style.selector.modifier'],
-    [/(\@)(\.{0,2}[\w\-\<\>\!]*)/, 'style.selector.modifier'],
-    [/\.([\w\-]+)/, 'style.selector.class-name'],
-    [/\#([\w\-]+)/, 'style.selector.id'],
-    [/([\w\-]+)/, 'style.selector.element'],
-    [/(>+|~|\+)/, 'style.selector.operator'],
-    [/(\*+)/, 'style.selector.element.any'],
-    [/(\$)((?:@id)?)/, ['style.selector.reference.prefix', 'style.selector.reference']],
-    [/\&/, 'style.selector.context'],
-    [/\(/, 'delimiter.selector.parens.open', '@css_selector_parens'],
-    [/\[/, 'delimiter.selector.attr.open', '@css_selector_attr'],
-    [/\s+/, 'white'],
-    [/,/, 'style.selector.delimiter'],
-    [/#(\s.*)?\n?$/, 'comment'],
-  ],
-
-  css_props: [
-    denter(null, -1, 0),
-    [/(?=@cssPropertyKey2)/, '', '@css_property&-_styleprop-_stylepropkey'],
-    [/#(\s.*)?\n?$/, 'comment'],
-    [/(?=[\%\*\w\&\$\>\.\[\@\!]|\#[\w\-])/, '', '@>css_selector&rule-_sel'],
-    [/\s+/, 'white'],
-  ],
-
-  css_selector: [
-    denter({ switchTo: '@css_props' }, -1, { token: '@rematch', switchTo: '@css_props&_props' }),
-    [/(\}|\)|\])/, '@rematch', '@pop'],
-    [/(?=\s*@cssPropertyKey2)/, '', { switchTo: '@css_props&_props' }],
-    [/\s*#\s/, '@rematch', { switchTo: '@css_props&_props' }],
-    'sel_',
-  ],
-
-  css_inline: [
-    [/\]/, 'style.close', '@pop'],
-    [/(?=@cssPropertyKey2)/, '', '@css_property&-_styleprop-_stylepropkey'],
-    [/(?=@cssPropertyPath\])/, '', '@css_property&-_styleprop-_stylepropkey'],
-  ],
-
-  css_selector_parens: [[/\)/, 'delimiter.selector.parens.close', '@pop'], 'sel_'],
-
-  css_selector_attr: [[/\]/, 'delimiter.selector.parens.close', '@pop'], 'sel_'],
-
-  css_property: [
-    denter(null, -1, -1),
-    [/\]/, '@rematch', '@pop'],
-    [/(\d+)(@id)/, ['style.property.unit.number', 'style.property.unit.name']],
-    [/((--|\$)@id)/, 'style.property.var'],
-    [/(-*@id)/, 'style.property.name'],
-    // [/(\@+)([\>\<\!]?[\w\-]+)/, ['style.property.modifier.start','style.property.modifier']]
-    [/@cssModifier/, 'style.property.modifier'],
-    [/(\@+|\.+)(@id\-?)/, ['style.property.modifier.start', 'style.property.modifier']],
-    [/\+(@id)/, 'style.property.scope'],
-    [
-      /\s*([\:]\s*)(?=@br|$)/,
-      'style.property.operator',
-      { switchTo: '@>css_multiline_value&_stylevalue' },
-    ],
-    [/\s*([\:]\s*)/, 'style.property.operator', { switchTo: '@>css_value&_stylevalue' }],
-  ],
-
-  css_value_: [
-    [/(x?xs|sm\-?|md\-?|lg\-?|xx*l|\dxl|hg|x+h)\b/, 'style.value.size'],
-    [/\#[0-9a-fA-F]+/, 'style.value.color.hex'],
-    [/((--|\$)@id)/, 'style.value.var'],
-    [
-      /(@optid)(\@+|\.+)(@optid)/,
-      ['style.property.name', 'style.property.modifier.prefix', 'style.property.modifier'],
-    ],
-    'op_',
-    'string_',
-    'number_',
-    'comment_',
-    [/\s+/, 'style.value.white'],
-    [/\(/, 'delimiter.style.parens.open', '@css_expressions'],
-    [/\{/, 'delimiter.style.curly.open', '@css_interpolation&-_styleinterpolation'],
-    [/(@id)/, 'style.value'],
-  ],
-
-  css_value: [
-    denter({ switchTo: '@>css_multiline_value' }, -1, -1),
-    // [/@cssModifier/, '@rematch', '@pop']
-    [/@cssPropertyKey2/, '@rematch', '@pop'],
-    [/;/, 'style.delimiter', '@pop'],
-    [/(\}|\)|\])/, '@rematch', '@pop'],
-    'css_value_',
-  ],
-
-  css_multiline_value: [denter(null, -1, 0), [/@cssPropertyKey2/, 'invalid'], 'css_value_'],
-
-  css_expressions: [
-    [/\)/, 'delimiter.style.parens.close', '@pop'],
-    [/\(/, 'delimiter.style.parens.open', '@css_expressions'],
-    'css_value',
-  ],
-
-  css_interpolation: [[/\}/, 'delimiter.style.curly.close', '@pop'], 'expr_'],
-
-  expressions: [[/\,/, 'delimiter.comma']],
-
-  whitespace: [
-    [/[\r\n]+/, 'br'],
-    [/[ \t\r\n]+/, 'white'],
-  ],
-
-  space: [[/[ \t]+/, 'white']],
-
-  tag_: [
-    [/(\s*)(<)(?=\.)/, ['white', 'tag.open', '@_tag/flag']],
-    [/(\s*)(<)(?=\w|\{|\[|\%|\#|>)/, ['white', 'tag.open', '@_tag/name']],
-  ],
-  tag_content: [
-    denter(2, -1, 0),
-    [/\)|\}|\]/, '@rematch', '@pop'],
-    'common_',
-    'flow_',
-    'var_',
-    'for_',
-    'css_',
-    'expr_',
-    'do_',
-    // dont support object keys directly here
-  ],
-
-  tag_children: [],
-
-  _tag: [
-    [/\/>/, 'tag.close', '@pop'],
-    [/>/, 'tag.close', { switchTo: '@>tag_content=&-_tagcontent' }],
-    // '@>css_selector&rule-_sel'
-    [/>/, 'tag.close', '@pop'],
-    [/(\-?\d+)/, 'tag.$S3'],
-    [/(\%)(@id)/, ['tag.mixin.prefix', 'tag.mixin']],
-    [/\#@id/, 'tag.id'],
-
-    [
-      /\./,
-      {
-        cases: {
-          '$/==event': { token: 'tag.event-modifier.start', switchTo: '@/event-modifier' },
-          '$/==event-modifier': { token: 'tag.event-modifier.start', switchTo: '@/event-modifier' },
-          '$/==modifier': { token: 'tag.modifier.start', switchTo: '@/modifier' },
-          '$/==rule': { token: 'tag.rule-modifier.start', switchTo: '@/rule-modifier' },
-          '$/==rule-modifier': { token: 'tag.rule-modifier.start', switchTo: '@/rule-modifier' },
-          '@default': { token: 'tag.flag.start', switchTo: '@/flag' },
-        },
-      },
-    ],
-
-    [
-      /(\$@id)/,
-      {
-        cases: {
-          '$/==name': 'tag.reference',
-          '@default': 'tag.$/',
-        },
-      },
-    ],
-
-    [/\{/, 'tag.$/.interpolation.open', '@_tag_interpolation'],
-    [/\[/, 'style.open', '@css_inline'],
-    [/(\s*\=\s*)/, 'operator.equals.tagop.tag-$/', '@_tag_value&-value'],
-    [/\:/, { token: 'tag.event.start', switchTo: '@/event' }],
-    'tag_event_',
-    // 'tag_attr_'
-    [
-      /(\-?@tagIdentifier)(\:@id)?/,
-      {
-        cases: {
-          '$/==attr': { token: '@rematch', next: '@_tag_attr&-_tagattr' },
-          '@default': { token: 'tag.$/' },
-        },
-      },
-    ],
-    // [/\@/,token: 'tag.event.start', switchTo: '@/event']
-    // [/\{/,token: 'tag.$/.braces.open', next: '@_tag_interpolation/0']
-    [/\(/, { token: 'tag.$/.parens.open', next: '@_tag_parens/0' }],
-    [/\s+/, { token: 'tag.white', switchTo: '@/attr' }],
-    'comment_',
-  ],
-  tag_event_: [
-    // add an additional slot for name etc?
-    // [/(\@)(@optid)/,['tag.event.start','tag.event.name','@_tag_event&_tagevent/$2']]
-    [/(?=\@@optid)/, '', '@_tag_event&-_listener'],
-  ],
-
-  _tag_part: [[/\)|\}|\]|\>/, '@rematch', '@pop']],
-  _tag_event: [
-    '_tag_part',
-    [/(\@)(@optid)/, ['tag.event.start', 'tag.event.name']],
-    [/(\.)(@optid)/, ['tag.event-modifier.start', 'tag.event-modifier.name']],
-    [/\(/, { token: 'tag.$/.parens.open', next: '@_tag_parens/0' }],
-    [/(\s*\=\s*)/, 'operator.equals.tagop.tag-$/', '@_tag_value&handler'],
-    [/\s+/, '@rematch', '@pop'],
-  ],
-
-  tag_attr_: [
-    // add an additional slot for name etc?
-    // [/(\@)(@optid)/,['tag.event.start','tag.event.name','@_tag_event&_tagevent/$2']]
-    [/(?=@tagIdentifier(\:@id)?)/, '', '@_tag_attr&-_attribute'],
-  ],
-
-  _tag_attr: [
-    '_tag_part',
-    [/(\-?@tagIdentifier)(\:@id)?/, 'tag.attr'],
-    [/\.(@optid)/, 'tag.event-modifierzz'],
-    [/\(/, { token: 'tag.parens.open.$/', next: '@_tag_parens/0' }],
-    [/(\s*\=\s*)/, 'operator.equals.tagop.tag-$/', '@_tag_value&-tagattrvalue'],
-    [/\s+/, '@rematch', '@pop'],
-  ],
-
-  _tag_interpolation: [[/\}/, 'tag.$/.interpolation.close', '@pop'], 'expr_', [/\)|\]/, 'invalid']],
-
-  _tag_parens: [[/\)/, 'tag.$/.parens.close', '@pop'], 'arglist_', [/\]|\}/, 'invalid']],
-
-  _tag_value: [[/(?=(\/?\>|\s))/, '', '@pop'], 'attr_expr_'],
-
-  regexp_: [
-    [
-      /\/(?!\ )(?=([^\\\/]|\\.)+\/)/,
-      { token: 'regexp.slash.open', bracket: '@open', next: '@_regexp' },
-    ],
-    [/\/\/\//, { token: 'regexp.slash.open', bracket: '@open', next: '@_hereregexp' }],
-    [/(\/)(\/)/, ['regexp.slash.open', 'regexp.slash.close']],
-  ],
-
-  _regexp: [
-    [
-      /(\{)(\d+(?:,\d*)?)(\})/,
-      ['regexp.escape.control', 'regexp.escape.control', 'regexp.escape.control'],
-    ],
-    [
-      /(\[)(\^?)(?=(?:[^\]\\\/]|\\.)+)/,
-      ['regexp.escape.control', { token: 'regexp.escape.control', next: '@_regexrange' }],
-    ],
-    [/(\()(\?:|\?=|\?!)/, ['regexp.escape.control', 'regexp.escape.control']],
-    [/[()]/, 'regexp.escape.control'],
-    [/@regexpctl/, 'regexp.escape.control'],
-    [/[^\\\/]/, 'regexp'],
-    [/@regexpesc/, 'regexp.escape'],
-    [/\\:/, 'regexp.escape'],
-    [/\\\./, 'regexp.invalid'],
-    [/(\/)(\w+)/, [{ token: 'regexp.slash.close' }, { token: 'regexp.flags', next: '@pop' }]],
-    ['/', { token: 'regexp.slash.close', next: '@pop' }],
-    [/./, 'regexp.invalid'],
-  ],
-
-  _regexrange: [
-    [/-/, 'regexp.escape.control'],
-    [/\^/, 'regexp.invalid'],
-    [/@regexpesc/, 'regexp.escape'],
-    [/[^\]]/, 'regexp'],
-    [/\]/, 'regexp.escape.control', '@pop'],
-  ],
-
-  _hereregexp: [
-    [/[^\\\/#]/, 'regexp'],
-    [/\\./, 'regexp'],
-    [/#.*$/, 'comment'],
-    ['///[igm]*', 'regexp', '@pop'],
-    [/\//, 'regexp'],
-    'comment_',
-  ],
-};
-
-// states are structured:
-// 1 = the monarch state
-// 2 = the current indentation (I)
-// 3 = the current scope name/type (&)
-// 4 = various flags (F)
-// 5 = the monarch substate -- for identifiers++
-function rewriteΞstate(raw) {
-  let state = ['$S1', '$S2', '$S3', '$S4', '$S5', '$S6'];
-
-  if (raw.match(/\@(pop|push|popall)/)) {
-    return raw;
-  }
-
-  if (raw[0] == '@') {
-    raw = raw.slice(1);
-  }
-
-  if (raw.indexOf('.') >= 0) {
-    return raw;
-  }
-
-  raw = rewriteΞtoken(raw);
-  // if raw.match(/^[\w\$\.\-]+$/)
-  // return raw
-
-  if (raw[0] == '>') {
-    state[1] = '$S6\t';
-    raw = raw.slice(1);
-  }
-
-  for (
-    let iφ2 = 0, itemsφ = iter$__(raw.split(/(?=[\/\&\=\*])/)), lenφ = itemsφ.length;
-    iφ2 < lenφ;
-    iφ2++
-  ) {
-    let part = itemsφ[iφ2];
-    if (part[0] == '&') {
-      if (part[1] == '-' || part[1] == '_') {
-        state[2] = '$S3' + part.slice(1);
-      } else {
-        state[2] = '$S3-' + part.slice(1);
-      }
-    } else if (part[0] == '+') {
-      state[3] = '$S4-' + part.slice(1);
-    } else if (part[0] == '=') {
-      state[3] = part.slice(1);
-    } else if (part[0] == '/') {
-      state[4] = part.slice(1);
-    } else if (part[0] == '*') {
-      state[5] = part.slice(1);
-    } else {
-      state[0] = part;
-    }
-  }
-  return state.join('.');
-}
-
-function rewriteΞtoken(raw) {
-  let orig = raw;
-  raw = raw.replace('$/', '$S5');
-  raw = raw.replace('$F', '$S4');
-  raw = raw.replace('$&', '$S3');
-  raw = raw.replace('$I', '$S2');
-  raw = raw.replace('$T', '$S2');
-
-  // if orig != raw
-  // console.log 'rewriting token',orig,raw
-  return raw;
-}
-
-function rewriteΞactions(actions, add) {
-  if (typeof actions == 'string') {
-    // and parts.indexOf('$') >= 0
-
-    actions = { token: actions };
-  }
-
-  if (actions && actions.token != undefined) {
-    actions.token = rewriteΞtoken(actions.token);
-
-    if (typeof add == 'string') {
-      actions.next = add;
-    } else if (add) {
-      Object.assign(actions, add);
-    }
-
-    if (actions.next) {
-      actions.next = rewriteΞstate(actions.next);
-    }
-    if (actions.switchTo) {
-      actions.switchTo = rewriteΞstate(actions.switchTo);
-    }
-  } else if (actions && actions.cases) {
-    // console.log 'found cases to transform!!'
-    let cases = {};
-    for (
-      let oφ = actions.cases, iφ3 = 0, keysφ2 = Object.keys(oφ), lφ2 = keysφ2.length, k, v;
-      iφ3 < lφ2;
-      iφ3++
-    ) {
-      k = keysφ2[iφ3];
-      v = oφ[k];
-      let newkey = rewriteΞtoken(k);
-      cases[newkey] = rewriteΞactions(v);
-    }
-    actions.cases = cases;
-  } else if (actions instanceof Array) {
-    let result = [];
-    let curr = null;
-    for (let i = 0, itemsφ2 = iter$__(actions), lenφ2 = itemsφ2.length; i < lenφ2; i++) {
-      let action = itemsφ2[i];
-      if (action[0] == '@' && i == actions.length - 1 && curr) {
-        action = { next: action };
-      }
-
-      if (typeof action == 'object') {
-        if (action.token != undefined || action.cases) {
-          result.push((curr = Object.assign({}, action)));
-        } else {
-          Object.assign(curr, action);
-        }
-      } else if (typeof action == 'string') {
-        result.push((curr = { token: rewriteΞtoken(action) }));
-      }
-    }
-    actions = result;
-  }
-
-  if (actions instanceof Array) {
-    for (let i = 0, itemsφ3 = iter$__(actions), lenφ3 = itemsφ3.length; i < lenφ3; i++) {
-      let action = itemsφ3[i];
-      if (action.token && action.token.indexOf('$$') >= 0) {
-        action.token = action.token.replace('$$', '$' + (i + 1));
-      }
-      if (action.next) {
-        action.next = rewriteΞstate(action.next);
-      }
-      if (action.switchTo) {
-        action.switchTo = rewriteΞstate(action.switchTo);
-      }
-    }
-  }
-
-  return actions;
-}
-
-function rewriteΞrule(owner, key) {
-  let rule;
-
-  return (rule = owner[key]);
-}
-
-for (let iφ4 = 0, keysφ3 = Object.keys(states), lφ3 = keysφ3.length, key, rules; iφ4 < lφ3; iφ4++) {
-  key = keysφ3[iφ4];
-  rules = states[key];
-  let i = 0;
-  while (i < rules.length) {
-    let rule = rules[i];
-    if (rule[0] instanceof Array) {
-      rules.splice(i, 1, ...rule);
-      continue;
-    } else if (typeof rule == 'string') {
-      rules[i] = { include: rule };
-    } else if (rule[1] instanceof Array) {
-      rule[1] = rewriteΞactions(rule[1]);
-    } else if (rule instanceof Array) {
-      rule.splice(1, 2, rewriteΞactions(rule[1], rule[2]));
-    }
-    i++;
-  }
-}
-
-const grammar = {
-  defaultToken: 'invalid',
-  ignoreCase: false,
-  tokenPostfix: '',
-  brackets: [
-    { open: '{', close: '}', token: 'bracket.curly' },
-    { open: '[', close: ']', token: 'bracket.square' },
-    { open: '(', close: ')', token: 'bracket.parenthesis' },
-  ],
-  keywords: [
-    'def',
-    'and',
-    'or',
-    'is',
-    'isnt',
-    'not',
-    'on',
-    'yes',
-    '@',
-    'no',
-    'off',
-    'true',
-    'false',
-    'null',
-    'this',
-    'self',
-    'as',
-    'new',
-    'delete',
-    'typeof',
-    'in',
-    'instanceof',
-    'return',
-    'throw',
-    'break',
-    'continue',
-    'debugger',
-    'if',
-    'elif',
-    'else',
-    'switch',
-    'for',
-    'while',
-    'do',
-    'try',
-    'catch',
-    'finally',
-    'class',
-    'extends',
-    'super',
-    'undefined',
-    'then',
-    'unless',
-    'until',
-    'loop',
-    'of',
-    'by',
-    'when',
-    'tag',
-    'prop',
-    'attr',
-    'export',
-    'import',
-    'extend',
-    'var',
-    'let',
-    'const',
-    'require',
-    'isa',
-    'await',
-  ],
-  boolean: ['true', 'false', 'yes', 'no', 'undefined', 'null'],
-  operators: [
-    '=',
-    '!',
-    '~',
-    '?',
-    ':',
-    '!!',
-    '??',
-    '&',
-    '|',
-    '^',
-    '%',
-    '<<',
-    '!&',
-    '>>',
-    '>>>',
-    '+=',
-    '-=',
-    '*=',
-    '/=',
-    '&=',
-    '|=',
-    '?=',
-    '??=',
-    '^=',
-    '%=',
-    '~=',
-    '<<=',
-    '>>=',
-    '>>>=',
-    '..',
-    '...',
-    '||=',
-    `&&=`,
-    '**=',
-    '**',
-    '|=?',
-    '~=?',
-    '^=?',
-    '=?',
-    'and',
-    'or',
-  ],
-  assignments: [
-    '=',
-    '|=?',
-    '~=?',
-    '^=?',
-    '=?',
-    '^=',
-    '%=',
-    '~=',
-    '<<=',
-    '>>=',
-    '>>>=',
-    '||=',
-    `&&=`,
-    '?=',
-    '??=',
-    '+=',
-    '-=',
-    '*=',
-    '/=',
-    '&=',
-    '|=',
-    '**=',
-  ],
-  logic: ['>', '<', '==', '<=', '>=', '!=', '&&', '||', '===', '!=='],
-  ranges: ['..', '...'],
-  spread: ['...'],
-  dot: ['.'],
-  access: ['.', '..'],
-  math: ['+', '-', '*', '/', '++', '--'],
-
-  unspaced_ops: regexify('... . .. + * ++ --'),
-  comment: /#(\s.*)?(\n|$)/,
-  // we include these common regular expressions
-  symbols: /[=><!~?&%|+\-*\^,]+/,
-  escapes: /\\(?:[abfnrtv\\"'$]|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
-  postaccess: /(:(?=\w))?/,
-  ivar: /\@[a-zA-Z_]\w*/,
-  B: /(?=\s|$)/,
-  br: /[\r\n]+/,
-  constant: /[A-Z][\w\$]*(?:\-+[\w\$]+)*/,
-  // subIdentifier: /(?:\-*[\w\$]+)*/
-  // identifier: /[a-z_]@subIdentifier/
-  // anyIdentifier: /[A-Za-z_\$][\w\$]*(?:\-+[\w\$]+)*/
-  // anyIdentifierOpt: /(?:@anyIdentifier)?/
-  id: /[A-Za-z_\$][\w\$]*(?:\-+[\w\$]+)*\??/,
-  plainid: /[A-Za-z_\$][\w\$]*(?:\-+[\w\$]+)*\??/,
-  fieldid: /[\@\#]*@plainid/,
-  propid: /[\@\#]*@plainid/,
-  defid: /[\@\#]*@plainid/,
-  decid: /\@@plainid/,
-  symid: /\#+@plainid/,
-  symref: /\#\#@plainid/,
-  optid: /(?:@id)?/,
-  // (?:\-+[\w\$]+)*\??
-  esmIdentifier: /[A-Za-z_\$\@][\w\$]*(?:\-+[\w\$]+)*\??/,
-  propertyPath: /(?:[A-Za-z_\$][A-Za-z\d\-\_\$]*\.)?(?:[A-Za-z_\$][A-Za-z\d\-\_\$]*)/,
-  tagNameIdentifier: /(?:[\w\-]+\:)?\w+(?:\-\w+)*/,
-  variable: /[\w\$]+(?:-[\w\$]*)*\??/,
-  varKeyword: /var|let|const/,
-  tagIdentifier: /-*[a-zA-Z][\w\-]*/,
-  implicitCall: /(?!\s(?:and|or|is|isa)\s)(?=\s[\w\'\"\/\[\{])/, // not true for or etc
-  cssModifier: /(?:\@+[\<\>\!]?[\w\-]+\+?|\.+@id\-?)/,
-  cssPropertyPath: /[\@\.]*[\w\-\$]+(?:[\@\.]+[\w\-\$]+)*/,
-  cssPropertyKey: /[\@\.]*[\w\-\$]+(?:[\@\.]+[\w\-\$]+)*(?:\s*\:)/,
-
-  cssVariable: /(?:--|\$)[\w\-\$]+/,
-  cssPropertyName: /[\w\-\$]+/,
-  // cssModifier: /\@[\w\-\$]+/
-  cssPropertyKey2: /(?:@cssPropertyName(?:@cssModifier)*|@cssModifier+)(?:\s*\:)/,
-  cssUpModifier: /\.\.[\w\-\$]+/,
-  cssIsModifier: /\.[\w\-\$]+/,
-
-  regEx: /\/(?!\/\/)(?:[^\/\\]|\\.)*\/[igm]*/,
-  regexpctl: /[(){}\[\]\$\^|\-*+?\.]/,
-  regexpesc: /\\(?:[bBdDfnrstvwWn0\\\/]|@regexpctl|c[A-Z]|x[0-9a-fA-F]{2}|u[0-9a-fA-F]{4})/,
-  // The main tokenizer for our languages
-  tokenizer: states,
-};
-
-export default {
-  tokens: grammar,
-
-  config: {
-    wordPattern:
-      /(-?\d*\.\d\w*)|([^\`\~\!\@\#%\^\&\*\(\)\=\$\-\+\[\{\]\}\\\|\;\:\'\"\,\.\<\>\/\?\s]+)/g,
-    comments: {
-      blockComment: ['###', '###'],
-      lineComment: '#',
-    },
-    brackets: [
-      ['{', '}', 'delimiter.curly'],
-      ['[', ']', 'delimiter.square'],
-      ['(', ')', 'delimiter.parenthesis'],
-      ['<', '>', 'delimiter.angle'],
-    ],
-    autoClosingPairs: [
-      { open: '"', close: '"', notIn: ['string', 'comment'] },
-      { open: "'", close: "'", notIn: ['string', 'comment'] },
-      { open: '{', close: '}', notIn: ['comment'] },
-      { open: '[', close: ']', notIn: ['string', 'comment'] },
-      { open: '(', close: ')', notIn: ['string', 'comment'] },
-      { open: '<', close: '>', notIn: ['string', 'comment', 'operators'] },
-    ],
-    onEnterRules: [
-      {
-        beforeText:
-          /^\s*(?:def|get \w|set \w|class|for|if|elif|else|while|try|with|finally|except|async).*?$/,
-        action: { indentAction: 1 },
-      },
-      {
-        beforeText: /\s*(?:do)\s*(\|.*\|\s*)?$/,
-        action: { indentAction: 1 },
-      },
-    ],
-  },
-};
diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-json5.ts b/src/livecodes/editor/monaco/languages/monaco-lang-json5.ts
deleted file mode 100644
index d31ab93157..0000000000
--- a/src/livecodes/editor/monaco/languages/monaco-lang-json5.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-export default {
-  config: {
-    comments: {
-      lineComment: '//',
-      blockComment: ['/*', '*/'],
-    },
-    brackets: [
-      ['{', '}'],
-      ['[', ']'],
-    ],
-    autoClosingPairs: [
-      { open: '{', close: '}' },
-      { open: '[', close: ']' },
-      { open: '"', close: '"' },
-      { open: "'", close: "'" },
-    ],
-    surroundingPairs: [
-      { open: '{', close: '}' },
-      { open: '[', close: ']' },
-      { open: '"', close: '"' },
-      { open: "'", close: "'" },
-    ],
-    folding: {
-      markers: {
-        start: /^\s*\/\*\s*#region\b/,
-        end: /^\s*\/\*\s*#endregion\b/,
-      },
-    },
-  },
-  tokens: {
-    defaultToken: '',
-    tokenPostfix: '.json5',
-
-    keywords: ['true', 'false', 'null', 'Infinity', 'NaN'],
-
-    symbols: /[=><!~?:&|+\-*\/\^%]+/,
-
-    escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
-
-    tokenizer: {
-      root: [
-        // Comments
-        [/\/\/.*$/, 'comment'],
-        [/\/\*/, 'comment', '@comment'],
-
-        // Whitespace
-        { include: '@whitespace' },
-
-        // Numbers
-        [/[+-]?0[xX][0-9a-fA-F]+/, 'number.hex'],
-        [/[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?/, 'number'],
-        [/[+-]?Infinity/, 'number'],
-        [/NaN/, 'number'],
-
-        // Strings
-        [/"([^"\\]|\\.)*$/, 'string.invalid'],
-        [/'([^'\\]|\\.)*$/, 'string.invalid'],
-        [/"/, 'string', '@stringDouble'],
-        [/'/, 'string', '@stringSingle'],
-
-        // Keywords/booleans
-        [/true|false|null/, 'keyword'],
-
-        // Unquoted keys (identifier followed by colon)
-        [/[a-zA-Z_$][\w$]*(?=\s*:)/, 'key'],
-
-        // Delimiters
-        [/[{}()\[\]]/, '@brackets'],
-        [/[,:]/, 'delimiter'],
-      ],
-
-      comment: [
-        [/[^\/*]+/, 'comment'],
-        [/\*\//, 'comment', '@pop'],
-        [/[\/*]/, 'comment'],
-      ],
-
-      whitespace: [[/[ \t\r\n]+/, '']],
-
-      stringDouble: [
-        [/[^\\"]+/, 'string'],
-        [/@escapes/, 'string.escape'],
-        [/\\./, 'string.escape.invalid'],
-        [/"/, 'string', '@pop'],
-      ],
-
-      stringSingle: [
-        [/[^\\']+/, 'string'],
-        [/@escapes/, 'string.escape'],
-        [/\\./, 'string.escape.invalid'],
-        [/'/, 'string', '@pop'],
-      ],
-    },
-  },
-  completions: {
-    provideCompletionItems() {
-      const suggestions = [
-        {
-          label: 'true',
-          kind: 17, // monaco.languages.CompletionItemKind.Keyword,
-          insertText: 'true',
-        },
-        {
-          label: 'false',
-          kind: 17, // monaco.languages.CompletionItemKind.Keyword,
-          insertText: 'false',
-        },
-        {
-          label: 'null',
-          kind: 17, // monaco.languages.CompletionItemKind.Keyword,
-          insertText: 'null',
-        },
-        {
-          label: 'Infinity',
-          kind: 17, // monaco.languages.CompletionItemKind.Keyword,
-          insertText: 'Infinity',
-        },
-        {
-          label: 'NaN',
-          kind: 17, // monaco.languages.CompletionItemKind.Keyword,
-          insertText: 'NaN',
-        },
-      ];
-      return { suggestions };
-    },
-  },
-};
diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-minizinc.ts b/src/livecodes/editor/monaco/languages/monaco-lang-minizinc.ts
deleted file mode 100644
index 12bec7ac62..0000000000
--- a/src/livecodes/editor/monaco/languages/monaco-lang-minizinc.ts
+++ /dev/null
@@ -1,381 +0,0 @@
-/* eslint-disable id-blacklist */
-/* eslint-disable no-template-curly-in-string */
-import type { languages } from 'monaco-editor';
-
-const config: languages.LanguageConfiguration = {
-  comments: {
-    lineComment: '%',
-    blockComment: ['/*', '*/'],
-  },
-  brackets: [
-    ['{', '}'],
-    ['[', ']'],
-    ['(', ')'],
-  ],
-  autoClosingPairs: [
-    { open: '{', close: '}' },
-    { open: '[', close: ']' },
-    { open: '(', close: ')' },
-    { open: '"', close: '"', notIn: ['string'] },
-    { open: "'", close: "'", notIn: ['string', 'comment'] },
-  ],
-  surroundingPairs: [
-    { open: '{', close: '}' },
-    { open: '[', close: ']' },
-    { open: '(', close: ')' },
-    { open: '"', close: '"' },
-    { open: "'", close: "'" },
-  ],
-  folding: {
-    markers: {
-      start: new RegExp('^\\s*%.*region\\b'),
-      end: new RegExp('^\\s*%.*endregion\\b'),
-    },
-  },
-};
-
-const tokens: languages.IMonarchLanguage = {
-  defaultToken: '',
-  tokenPostfix: '.mzn',
-
-  keywords: [
-    'ann',
-    'annotation',
-    'any',
-    'array',
-    'bool',
-    'constraint',
-    'default',
-    'diff',
-    'div',
-    'else',
-    'elseif',
-    'endif',
-    'enum',
-    'false',
-    'float',
-    'function',
-    'if',
-    'in',
-    'include',
-    'int',
-    'intersect',
-    'let',
-    'maximize',
-    'minimize',
-    'mod',
-    'not',
-    'of',
-    'op',
-    'opt',
-    'output',
-    'par',
-    'predicate',
-    'record',
-    'satisfy',
-    'set',
-    'solve',
-    'string',
-    'subset',
-    'superset',
-    'symdiff',
-    'test',
-    'then',
-    'true',
-    'tuple',
-    'type',
-    'union',
-    'var',
-    'where',
-    'xor',
-  ],
-
-  // Standard library functions (kept from original, as grammar doesn't enumerate stdlib)
-  builtins: [
-    'abs',
-    'acos',
-    'acosh',
-    'all_different',
-    'alldifferent',
-    'asin',
-    'asinh',
-    'assert',
-    'atan',
-    'atanh',
-    'bool2int',
-    'card',
-    'ceil',
-    'concat',
-    'cos',
-    'cosh',
-    'count',
-    'cumulative',
-    'dom',
-    'dom_array',
-    'dom_bounds_array',
-    'dom_size',
-    'exp',
-    'fix',
-    'floor',
-    'forall',
-    'index_set',
-    'index_set_1of2',
-    'index_set_2of2',
-    'int2float',
-    'is_fixed',
-    'join',
-    'lb',
-    'lb_array',
-    'length',
-    'ln',
-    'log',
-    'log10',
-    'log2',
-    'max',
-    'min',
-    'pow',
-    'product',
-    'round',
-    'set2array',
-    'show',
-    'show_float',
-    'show_int',
-    'sin',
-    'sinh',
-    'sqrt',
-    'sum',
-    'tan',
-    'tanh',
-    'trace',
-    'ub',
-    'ub_array',
-  ],
-
-  operators: [
-    '=',
-    '==',
-    '!=',
-    '<',
-    '<=',
-    '>',
-    '>=',
-    '+',
-    '-',
-    '*',
-    '/',
-    '++',
-    '->',
-    '<-',
-    '<->',
-    '\\/',
-    '/\\',
-    '..',
-    '::',
-    // Unicode operators from grammar
-    '⟷',
-    '⇔',
-    '→',
-    '⇒',
-    '←',
-    '⇐',
-    '∨',
-    '∧',
-    '⊻',
-    '≠',
-    '≤',
-    '≥',
-    '∈',
-    '⊆',
-    '⊇',
-    '∪',
-    '∩',
-    '∖',
-    '¬',
-  ],
-
-  // Special constants
-  constants: ['infinity', '∞', '∅'],
-
-  // Regular expressions
-  symbols: /[=><!~?:&|+\-*\/\^%]+/,
-
-  // Escape sequences in strings
-  escapes: /\\(?:[0-7]{1,3}|x[0-9A-Fa-f]{1,2}|["\\nrt])/,
-
-  tokenizer: {
-    root: [
-      // Identifiers and keywords
-      [
-        /[a-z_][\w_]*/,
-        {
-          cases: {
-            '@keywords': 'keyword',
-            '@builtins': 'predefined',
-            '@constants': 'constant',
-            '@default': 'identifier',
-          },
-        },
-      ],
-      // Quoted identifiers (e.g. 'My Variable')
-      [/'[^']*'/, 'identifier.quote'],
-
-      // Type identifiers (Capitalized)
-      [/[A-Z][\w_]*/, 'type.identifier'],
-
-      // Anonymous variable
-      [/_/, 'keyword'],
-
-      // Annotations (:: identifier)
-      [/::\s*[a-zA-Z_]\w*/, 'annotation'],
-
-      // Whitespace
-      { include: '@whitespace' },
-
-      // Delimiters and operators
-      [/[{}()\[\]]/, '@brackets'],
-      [/[<>](?!@symbols)/, '@brackets'],
-
-      // Unicode operators and standard symbols
-      [/@symbols/, { cases: { '@operators': 'operator', '@default': '' } }],
-      [/[\u2190-\u22FF]/, { cases: { '@operators': 'operator', '@default': '' } }], // Catch-all for math symbols if not explicitly listed
-
-      // Numbers
-      [/0x[0-9a-fA-F]+/, 'number.hex'],
-      [/0o[0-7]+/, 'number.octal'],
-      [/0b[0-1]+/, 'number.binary'],
-      [/\d*\.\d+([eE][\-+]?\d+)?/, 'number.float'],
-      [/\d+([eE][\-+]?\d+)?/, 'number'],
-
-      // Strings
-      [/"/, { token: 'string.quote', bracket: '@open', next: '@string' }],
-    ],
-
-    string: [
-      [/[^\\"]+/, 'string'],
-      [/@escapes/, 'string.escape'],
-      // String Interpolation: \( expression )
-      [/\\\(/, { token: 'string.escape', bracket: '@open', next: '@interpolation' }],
-      [/\\./, 'string.escape.invalid'],
-      [/"/, { token: 'string.quote', bracket: '@close', next: '@pop' }],
-    ],
-
-    interpolation: [
-      // When inside \( ... ), we switch back to root tokenization until we hit the closing )
-      [/\)/, { token: 'string.escape', bracket: '@close', next: '@pop' }],
-      { include: '@root' },
-    ],
-
-    whitespace: [
-      [/[ \t\r\n]+/, 'white'],
-      [/%(?!\{).*/, 'comment'], // Single line comment
-      [/\/\*/, 'comment', '@comment'], // Block comment start /*
-    ],
-
-    comment: [
-      [/[^*/]+/, 'comment'],
-      [/\/\*/, 'comment', '@push'], // Nested comment
-      [/\*\//, 'comment', '@pop'], // Block comment end */
-      [/[*/]/, 'comment'],
-    ],
-  },
-};
-
-// Completion Item Provider
-const completions: languages.CompletionItemProvider = {
-  provideCompletionItems: (model, position) => {
-    const word = model.getWordUntilPosition(position);
-    const range = {
-      startLineNumber: position.lineNumber,
-      endLineNumber: position.lineNumber,
-      startColumn: word.startColumn,
-      endColumn: word.endColumn,
-    };
-
-    // Helper to create completion items
-    const createItem = (
-      label: string,
-      kind: languages.CompletionItemKind,
-      insertText: string,
-      detail?: string,
-    ) => ({
-      label,
-      kind,
-      insertText,
-      detail: detail || 'MiniZinc Keyword',
-      range,
-    });
-
-    // Keywords from the language definition
-    const keywords = tokens.keywords as string[];
-    const builtins = tokens.builtins as string[];
-
-    const snippets = [
-      {
-        label: 'constraint',
-        insertText: 'constraint ${1:expression};',
-        detail: 'Constraint declaration',
-      },
-      {
-        label: 'solve satisfy',
-        insertText: 'solve satisfy;',
-        detail: 'Solve goal',
-      },
-      {
-        label: 'solve minimize',
-        insertText: 'solve minimize ${1:variable};',
-        detail: 'Optimization goal',
-      },
-      {
-        label: 'solve maximize',
-        insertText: 'solve maximize ${1:variable};',
-        detail: 'Optimization goal',
-      },
-      {
-        label: 'array',
-        insertText: 'array[${1:1..n}] of var ${2:int}: ${3:x};',
-        detail: 'Array declaration',
-      },
-      {
-        label: 'output',
-        insertText: 'output ["${1:text} = ", show(${2:var}), "\\n"];',
-        detail: 'Output statement',
-      },
-      {
-        label: 'if-then-else',
-        insertText: 'if ${1:condition} then\n\t${2:expression}\nelse\n\t${3:expression}\nendif',
-        detail: 'If-Then-Else',
-      },
-      {
-        label: 'let',
-        insertText: 'let {\n\t${1:local_var}\n} in (\n\t${2:expression}\n)',
-        detail: 'Let expression',
-      },
-      {
-        label: 'predicate',
-        insertText: 'predicate ${1:name}(${2:params}) = \n\t${3:body};',
-        detail: 'Predicate definition',
-      },
-    ];
-
-    const suggestions = [
-      ...keywords.map((k) => createItem(k, 17 /* Keyword */, k)),
-      ...builtins.map((b) => createItem(b, 18 /* Function */, b, 'Built-in Function')),
-      ...snippets.map((s) => ({
-        label: s.label,
-        kind: 27 /* Snippet */,
-        insertText: s.insertText,
-        insertTextRules: 4 /* InsertAsSnippet */,
-        documentation: s.detail,
-        range,
-      })),
-    ];
-
-    return { suggestions };
-  },
-};
-
-export default {
-  config,
-  tokens,
-  completions,
-};
diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-prolog.ts b/src/livecodes/editor/monaco/languages/monaco-lang-prolog.ts
deleted file mode 100644
index e8f83de13e..0000000000
--- a/src/livecodes/editor/monaco/languages/monaco-lang-prolog.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-export default {
-  config: {
-    comments: {
-      lineComment: '%',
-      blockComment: ['/*', '*/'],
-    },
-    brackets: [
-      ['{', '}'],
-      ['[', ']'],
-      ['(', ')'],
-    ],
-    autoClosingPairs: [
-      { open: '{', close: '}' },
-      { open: '[', close: ']' },
-      { open: '(', close: ')' },
-      { open: "'", close: "'", notIn: ['string', 'comment'] },
-      { open: '"', close: '"', notIn: ['string', 'comment'] },
-    ],
-    surroundingPairs: [
-      { open: '{', close: '}' },
-      { open: '[', close: ']' },
-      { open: '(', close: ')' },
-      { open: "'", close: "'" },
-      { open: '"', close: '"' },
-    ],
-  },
-  tokens: {
-    defaultToken: '',
-    tokenPostfix: '.prolog',
-
-    // Common regular expressions
-    atom: /[a-z][a-zA-Z0-9_]*/,
-    variable: /[A-Z_][a-zA-Z0-9_]*/,
-
-    builtins: [
-      'write',
-      'writeln',
-      'nl',
-      'read',
-      'get',
-      'put',
-      'assert',
-      'retract',
-      'consult',
-      'fail',
-      'true',
-      'is',
-      'mod',
-      'rem',
-      'not',
-      'repeat',
-      '!',
-      'member',
-      'append',
-      'length',
-      'findall',
-      'bagof',
-      'setof',
-    ],
-
-    tokenizer: {
-      root: [
-        // --- FIXED COMMENT LOGIC ---
-        // Match % followed by anything that is NOT a newline
-        [/%[^\n\r]*/, 'comment'],
-
-        // Block comments
-        [/\/\*/, 'comment', '@commentBlock'],
-
-        // Strings (Double quotes)
-        [/"/, 'string', '@stringDouble'],
-
-        // Quoted Atoms (Single quotes)
-        [/'/, 'string.atom', '@stringSingle'],
-
-        // Cut operator
-        [/!/, 'keyword.cut'],
-
-        // Comparison and Math Operators
-        [/:-|-->/, 'keyword.operator'],
-        [/[=><\\+\-\*\/]+/, 'operator'],
-
-        // Variables
-        [/@variable/, 'variable'],
-
-        // Built-in predicates vs Normal Atoms
-        [
-          /@atom/,
-          {
-            cases: {
-              '@builtins': 'predefined',
-              '@default': 'type.identifier',
-            },
-          },
-        ],
-
-        // Numbers
-        [/\d+(\.\d+)?/, 'number'],
-
-        // Brackets and punctuation
-        [/[[]\{\}\(\)\.,|]/, 'delimiter'],
-
-        // Whitespace
-        [/\s+/, 'white'],
-      ],
-
-      commentBlock: [
-        [/[^\/*]+/, 'comment'],
-        [/\*\//, 'comment', '@pop'],
-        [/[\/*]/, 'comment'],
-      ],
-
-      stringDouble: [
-        [/[^\\"]+/, 'string'],
-        [/\\./, 'string.escape'],
-        [/"/, 'string', '@pop'],
-      ],
-
-      stringSingle: [
-        [/[^\\']+/, 'string.atom'],
-        [/\\./, 'string.escape'],
-        [/'/, 'string.atom', '@pop'],
-      ],
-    },
-  },
-};
diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-sql.ts b/src/livecodes/editor/monaco/languages/monaco-lang-sql.ts
deleted file mode 100644
index 79741e114d..0000000000
--- a/src/livecodes/editor/monaco/languages/monaco-lang-sql.ts
+++ /dev/null
@@ -1,1401 +0,0 @@
-/* eslint-disable id-blacklist */
-// from https://github.com/DTStack/monaco-sql-languages/blob/main/src/sql/sql.ts
-
-export default {
-  config: {
-    comments: {
-      lineComment: '--',
-      blockComment: ['/*', '*/'],
-    },
-    brackets: [
-      ['{', '}'],
-      ['[', ']'],
-      ['(', ')'],
-    ],
-    autoClosingPairs: [
-      { open: '{', close: '}' },
-      { open: '[', close: ']' },
-      { open: '(', close: ')' },
-      { open: '"', close: '"' },
-      { open: "'", close: "'" },
-    ],
-    surroundingPairs: [
-      { open: '{', close: '}' },
-      { open: '[', close: ']' },
-      { open: '(', close: ')' },
-      { open: '"', close: '"' },
-      { open: "'", close: "'" },
-    ],
-  },
-
-  tokens: {
-    defaultToken: '',
-    tokenPostfix: '.sql',
-    ignoreCase: true,
-
-    brackets: [
-      { open: '[', close: ']', token: 'delimiter.square' },
-      { open: '(', close: ')', token: 'delimiter.parenthesis' },
-    ],
-
-    keywords: [
-      'ABORT_AFTER_WAIT',
-      'ABSENT',
-      'ABSOLUTE',
-      'ACCENT_SENSITIVITY',
-      'ACTION',
-      'ACTIVATION',
-      'ACTIVE',
-      'ADD',
-      'ADDRESS',
-      'ADMIN',
-      'AES',
-      'AES_128',
-      'AES_192',
-      'AES_256',
-      'AFFINITY',
-      'AFTER',
-      'AGGREGATE',
-      'ALGORITHM',
-      'ALL_CONSTRAINTS',
-      'ALL_ERRORMSGS',
-      'ALL_INDEXES',
-      'ALL_LEVELS',
-      'ALL_SPARSE_COLUMNS',
-      'ALLOW_CONNECTIONS',
-      'ALLOW_MULTIPLE_EVENT_LOSS',
-      'ALLOW_PAGE_LOCKS',
-      'ALLOW_ROW_LOCKS',
-      'ALLOW_SINGLE_EVENT_LOSS',
-      'ALLOW_SNAPSHOT_ISOLATION',
-      'ALLOWED',
-      'ALTER',
-      'ANONYMOUS',
-      'ANSI_DEFAULTS',
-      'ANSI_NULL_DEFAULT',
-      'ANSI_NULL_DFLT_OFF',
-      'ANSI_NULL_DFLT_ON',
-      'ANSI_NULLS',
-      'ANSI_PADDING',
-      'ANSI_WARNINGS',
-      'APPEND',
-      'APPLICATION',
-      'APPLICATION_LOG',
-      'ARITHABORT',
-      'ARITHIGNORE',
-      'AS',
-      'ASC',
-      'ASSEMBLY',
-      'ASYMMETRIC',
-      'ASYNCHRONOUS_COMMIT',
-      'AT',
-      'ATOMIC',
-      'ATTACH',
-      'ATTACH_REBUILD_LOG',
-      'AUDIT',
-      'AUDIT_GUID',
-      'AUTHENTICATION',
-      'AUTHORIZATION',
-      'AUTO',
-      'AUTO_CLEANUP',
-      'AUTO_CLOSE',
-      'AUTO_CREATE_STATISTICS',
-      'AUTO_SHRINK',
-      'AUTO_UPDATE_STATISTICS',
-      'AUTO_UPDATE_STATISTICS_ASYNC',
-      'AUTOMATED_BACKUP_PREFERENCE',
-      'AUTOMATIC',
-      'AVAILABILITY',
-      'AVAILABILITY_MODE',
-      'BACKUP',
-      'BACKUP_PRIORITY',
-      'BASE64',
-      'BATCHSIZE',
-      'BEGIN',
-      'BEGIN_DIALOG',
-      'BIGINT',
-      'BINARY',
-      'BINDING',
-      'BIT',
-      'BLOCKERS',
-      'BLOCKSIZE',
-      'BOUNDING_BOX',
-      'BREAK',
-      'BROKER',
-      'BROKER_INSTANCE',
-      'BROWSE',
-      'BUCKET_COUNT',
-      'BUFFER',
-      'BUFFERCOUNT',
-      'BULK',
-      'BULK_LOGGED',
-      'BY',
-      'CACHE',
-      'CALL',
-      'CALLED',
-      'CALLER',
-      'CAP_CPU_PERCENT',
-      'CASCADE',
-      'CASE',
-      'CATALOG',
-      'CATCH',
-      'CELLS_PER_OBJECT',
-      'CERTIFICATE',
-      'CHANGE_RETENTION',
-      'CHANGE_TRACKING',
-      'CHANGES',
-      'CHAR',
-      'CHARACTER',
-      'CHECK',
-      'CHECK_CONSTRAINTS',
-      'CHECK_EXPIRATION',
-      'CHECK_POLICY',
-      'CHECKALLOC',
-      'CHECKCATALOG',
-      'CHECKCONSTRAINTS',
-      'CHECKDB',
-      'CHECKFILEGROUP',
-      'CHECKIDENT',
-      'CHECKPOINT',
-      'CHECKTABLE',
-      'CLASSIFIER_FUNCTION',
-      'CLEANTABLE',
-      'CLEANUP',
-      'CLEAR',
-      'CLOSE',
-      'CLUSTER',
-      'CLUSTERED',
-      'CODEPAGE',
-      'COLLATE',
-      'COLLECTION',
-      'COLUMN',
-      'COLUMN_SET',
-      'COLUMNS',
-      'COLUMNSTORE',
-      'COLUMNSTORE_ARCHIVE',
-      'COMMIT',
-      'COMMITTED',
-      'COMPATIBILITY_LEVEL',
-      'COMPRESSION',
-      'COMPUTE',
-      'CONCAT',
-      'CONCAT_NULL_YIELDS_NULL',
-      'CONFIGURATION',
-      'CONNECT',
-      'CONSTRAINT',
-      'CONTAINMENT',
-      'CONTENT',
-      'CONTEXT',
-      'CONTINUE',
-      'CONTINUE_AFTER_ERROR',
-      'CONTRACT',
-      'CONTRACT_NAME',
-      'CONTROL',
-      'CONVERSATION',
-      'COOKIE',
-      'COPY_ONLY',
-      'COUNTER',
-      'CPU',
-      'CREATE',
-      'CREATE_NEW',
-      'CREATION_DISPOSITION',
-      'CREDENTIAL',
-      'CRYPTOGRAPHIC',
-      'CUBE',
-      'CURRENT',
-      'CURRENT_DATE',
-      'CURSOR',
-      'CURSOR_CLOSE_ON_COMMIT',
-      'CURSOR_DEFAULT',
-      'CYCLE',
-      'DATA',
-      'DATA_COMPRESSION',
-      'DATA_PURITY',
-      'DATABASE',
-      'DATABASE_DEFAULT',
-      'DATABASE_MIRRORING',
-      'DATABASE_SNAPSHOT',
-      'DATAFILETYPE',
-      'DATE',
-      'DATE_CORRELATION_OPTIMIZATION',
-      'DATEFIRST',
-      'DATEFORMAT',
-      'DATETIME',
-      'DATETIME2',
-      'DATETIMEOFFSET',
-      'DAY',
-      'DAYOFYEAR',
-      'DAYS',
-      'DB_CHAINING',
-      'DBCC',
-      'DBREINDEX',
-      'DDL_DATABASE_LEVEL_EVENTS',
-      'DEADLOCK_PRIORITY',
-      'DEALLOCATE',
-      'DEC',
-      'DECIMAL',
-      'DECLARE',
-      'DECRYPTION',
-      'DEFAULT',
-      'DEFAULT_DATABASE',
-      'DEFAULT_FULLTEXT_LANGUAGE',
-      'DEFAULT_LANGUAGE',
-      'DEFAULT_SCHEMA',
-      'DEFINITION',
-      'DELAY',
-      'DELAYED_DURABILITY',
-      'DELETE',
-      'DELETED',
-      'DENSITY_VECTOR',
-      'DENY',
-      'DEPENDENTS',
-      'DES',
-      'DESC',
-      'DESCRIPTION',
-      'DESX',
-      'DHCP',
-      'DIAGNOSTICS',
-      'DIALOG',
-      'DIFFERENTIAL',
-      'DIRECTORY_NAME',
-      'DISABLE',
-      'DISABLE_BROKER',
-      'DISABLED',
-      'DISK',
-      'DISTINCT',
-      'DISTRIBUTED',
-      'DOCUMENT',
-      'DOUBLE',
-      'DROP',
-      'DROP_EXISTING',
-      'DROPCLEANBUFFERS',
-      'DUMP',
-      'DURABILITY',
-      'DYNAMIC',
-      'EDITION',
-      'ELEMENTS',
-      'ELSE',
-      'EMERGENCY',
-      'EMPTY',
-      'EMPTYFILE',
-      'ENABLE',
-      'ENABLE_BROKER',
-      'ENABLED',
-      'ENCRYPTION',
-      'END',
-      'ENDPOINT',
-      'ENDPOINT_URL',
-      'ERRLVL',
-      'ERROR',
-      'ERROR_BROKER_CONVERSATIONS',
-      'ERRORFILE',
-      'ESCAPE',
-      'ESTIMATEONLY',
-      'EVENT',
-      'EVENT_RETENTION_MODE',
-      'EXEC',
-      'EXECUTABLE',
-      'EXECUTE',
-      'EXIT',
-      'EXPAND',
-      'EXPIREDATE',
-      'EXPIRY_DATE',
-      'EXPLICIT',
-      'EXTENDED_LOGICAL_CHECKS',
-      'EXTENSION',
-      'EXTERNAL',
-      'EXTERNAL_ACCESS',
-      'FAIL_OPERATION',
-      'FAILOVER',
-      'FAILOVER_MODE',
-      'FAILURE_CONDITION_LEVEL',
-      'FALSE',
-      'FAN_IN',
-      'FAST',
-      'FAST_FORWARD',
-      'FETCH',
-      'FIELDTERMINATOR',
-      'FILE',
-      'FILEGROUP',
-      'FILEGROWTH',
-      'FILELISTONLY',
-      'FILENAME',
-      'FILEPATH',
-      'FILESTREAM',
-      'FILESTREAM_ON',
-      'FILETABLE_COLLATE_FILENAME',
-      'FILETABLE_DIRECTORY',
-      'FILETABLE_FULLPATH_UNIQUE_CONSTRAINT_NAME',
-      'FILETABLE_NAMESPACE',
-      'FILETABLE_PRIMARY_KEY_CONSTRAINT_NAME',
-      'FILETABLE_STREAMID_UNIQUE_CONSTRAINT_NAME',
-      'FILLFACTOR',
-      'FILTERING',
-      'FIRE_TRIGGERS',
-      'FIRST',
-      'FIRSTROW',
-      'FLOAT',
-      'FMTONLY',
-      'FOLLOWING',
-      'FOR',
-      'FORCE',
-      'FORCE_FAILOVER_ALLOW_DATA_LOSS',
-      'FORCE_SERVICE_ALLOW_DATA_LOSS',
-      'FORCED',
-      'FORCEPLAN',
-      'FORCESCAN',
-      'FORCESEEK',
-      'FOREIGN',
-      'FORMATFILE',
-      'FORMSOF',
-      'FORWARD_ONLY',
-      'FREE',
-      'FREEPROCCACHE',
-      'FREESESSIONCACHE',
-      'FREESYSTEMCACHE',
-      'FROM',
-      'FULL',
-      'FULLSCAN',
-      'FULLTEXT',
-      'FUNCTION',
-      'GB',
-      'GEOGRAPHY_AUTO_GRID',
-      'GEOGRAPHY_GRID',
-      'GEOMETRY_AUTO_GRID',
-      'GEOMETRY_GRID',
-      'GET',
-      'GLOBAL',
-      'GO',
-      'GOTO',
-      'GOVERNOR',
-      'GRANT',
-      'GRIDS',
-      'GROUP',
-      'GROUP_MAX_REQUESTS',
-      'HADR',
-      'HASH',
-      'HASHED',
-      'HAVING',
-      'HEADERONLY',
-      'HEALTH_CHECK_TIMEOUT',
-      'HELP',
-      'HIERARCHYID',
-      'HIGH',
-      'HINT',
-      'HISTOGRAM',
-      'HOLDLOCK',
-      'HONOR_BROKER_PRIORITY',
-      'HOUR',
-      'HOURS',
-      'IDENTITY',
-      'IDENTITY_INSERT',
-      'IDENTITY_VALUE',
-      'IDENTITYCOL',
-      'IF',
-      'IGNORE_CONSTRAINTS',
-      'IGNORE_DUP_KEY',
-      'IGNORE_NONCLUSTERED_COLUMNSTORE_INDEX',
-      'IGNORE_TRIGGERS',
-      'IMAGE',
-      'IMMEDIATE',
-      'IMPERSONATE',
-      'IMPLICIT_TRANSACTIONS',
-      'IMPORTANCE',
-      'INCLUDE',
-      'INCREMENT',
-      'INCREMENTAL',
-      'INDEX',
-      'INDEXDEFRAG',
-      'INFINITE',
-      'INFLECTIONAL',
-      'INIT',
-      'INITIATOR',
-      'INPUT',
-      'INPUTBUFFER',
-      'INSENSITIVE',
-      'INSERT',
-      'INSERTED',
-      'INSTEAD',
-      'INT',
-      'INTEGER',
-      'INTO',
-      'IO',
-      'IP',
-      'ISABOUT',
-      'ISOLATION',
-      'JOB',
-      'KB',
-      'KEEP',
-      'KEEP_CDC',
-      'KEEP_NULLS',
-      'KEEP_REPLICATION',
-      'KEEPDEFAULTS',
-      'KEEPFIXED',
-      'KEEPIDENTITY',
-      'KEEPNULLS',
-      'KERBEROS',
-      'KEY',
-      'KEY_SOURCE',
-      'KEYS',
-      'KEYSET',
-      'KILL',
-      'KILOBYTES_PER_BATCH',
-      'LABELONLY',
-      'LANGUAGE',
-      'LAST',
-      'LASTROW',
-      'LEVEL',
-      'LEVEL_1',
-      'LEVEL_2',
-      'LEVEL_3',
-      'LEVEL_4',
-      'LIFETIME',
-      'LIMIT',
-      'LINENO',
-      'LIST',
-      'LISTENER',
-      'LISTENER_IP',
-      'LISTENER_PORT',
-      'LOAD',
-      'LOADHISTORY',
-      'LOB_COMPACTION',
-      'LOCAL',
-      'LOCAL_SERVICE_NAME',
-      'LOCK_ESCALATION',
-      'LOCK_TIMEOUT',
-      'LOGIN',
-      'LOGSPACE',
-      'LOOP',
-      'LOW',
-      'MANUAL',
-      'MARK',
-      'MARK_IN_USE_FOR_REMOVAL',
-      'MASTER',
-      'MAX_CPU_PERCENT',
-      'MAX_DISPATCH_LATENCY',
-      'MAX_DOP',
-      'MAX_DURATION',
-      'MAX_EVENT_SIZE',
-      'MAX_FILES',
-      'MAX_IOPS_PER_VOLUME',
-      'MAX_MEMORY',
-      'MAX_MEMORY_PERCENT',
-      'MAX_QUEUE_READERS',
-      'MAX_ROLLOVER_FILES',
-      'MAX_SIZE',
-      'MAXDOP',
-      'MAXERRORS',
-      'MAXLENGTH',
-      'MAXRECURSION',
-      'MAXSIZE',
-      'MAXTRANSFERSIZE',
-      'MAXVALUE',
-      'MB',
-      'MEDIADESCRIPTION',
-      'MEDIANAME',
-      'MEDIAPASSWORD',
-      'MEDIUM',
-      'MEMBER',
-      'MEMORY_OPTIMIZED',
-      'MEMORY_OPTIMIZED_DATA',
-      'MEMORY_OPTIMIZED_ELEVATE_TO_SNAPSHOT',
-      'MEMORY_PARTITION_MODE',
-      'MERGE',
-      'MESSAGE',
-      'MESSAGE_FORWARD_SIZE',
-      'MESSAGE_FORWARDING',
-      'MICROSECOND',
-      'MILLISECOND',
-      'MIN_CPU_PERCENT',
-      'MIN_IOPS_PER_VOLUME',
-      'MIN_MEMORY_PERCENT',
-      'MINUTE',
-      'MINUTES',
-      'MINVALUE',
-      'MIRROR',
-      'MIRROR_ADDRESS',
-      'MODIFY',
-      'MONEY',
-      'MONTH',
-      'MOVE',
-      'MULTI_USER',
-      'MUST_CHANGE',
-      'NAME',
-      'NANOSECOND',
-      'NATIONAL',
-      'NATIVE_COMPILATION',
-      'NCHAR',
-      'NEGOTIATE',
-      'NESTED_TRIGGERS',
-      'NEW_ACCOUNT',
-      'NEW_BROKER',
-      'NEW_PASSWORD',
-      'NEWNAME',
-      'NEXT',
-      'NO',
-      'NO_BROWSETABLE',
-      'NO_CHECKSUM',
-      'NO_COMPRESSION',
-      'NO_EVENT_LOSS',
-      'NO_INFOMSGS',
-      'NO_TRUNCATE',
-      'NO_WAIT',
-      'NOCHECK',
-      'NOCOUNT',
-      'NOEXEC',
-      'NOEXPAND',
-      'NOFORMAT',
-      'NOINDEX',
-      'NOINIT',
-      'NOLOCK',
-      'NON',
-      'NON_TRANSACTED_ACCESS',
-      'NONCLUSTERED',
-      'NONE',
-      'NORECOMPUTE',
-      'NORECOVERY',
-      'NORESEED',
-      'NORESET',
-      'NOREWIND',
-      'NORMAL',
-      'NOSKIP',
-      'NOTIFICATION',
-      'NOTRUNCATE',
-      'NOUNLOAD',
-      'NOWAIT',
-      'NTEXT',
-      'NTLM',
-      'NUMANODE',
-      'NUMERIC',
-      'NUMERIC_ROUNDABORT',
-      'NVARCHAR',
-      'OBJECT',
-      'OF',
-      'OFF',
-      'OFFLINE',
-      'OFFSET',
-      'OFFSETS',
-      'OLD_ACCOUNT',
-      'OLD_PASSWORD',
-      'ON',
-      'ON_FAILURE',
-      'ONLINE',
-      'ONLY',
-      'OPEN',
-      'OPEN_EXISTING',
-      'OPENTRAN',
-      'OPTIMISTIC',
-      'OPTIMIZE',
-      'OPTION',
-      'ORDER',
-      'OUT',
-      'OUTPUT',
-      'OUTPUTBUFFER',
-      'OVER',
-      'OVERRIDE',
-      'OWNER',
-      'OWNERSHIP',
-      'PAD_INDEX',
-      'PAGE',
-      'PAGE_VERIFY',
-      'PAGECOUNT',
-      'PAGLOCK',
-      'PARAMETERIZATION',
-      'PARSEONLY',
-      'PARTIAL',
-      'PARTITION',
-      'PARTITIONS',
-      'PARTNER',
-      'PASSWORD',
-      'PATH',
-      'PER_CPU',
-      'PER_NODE',
-      'PERCENT',
-      'PERMISSION_SET',
-      'PERSISTED',
-      'PHYSICAL_ONLY',
-      'PLAN',
-      'POISON_MESSAGE_HANDLING',
-      'POOL',
-      'POPULATION',
-      'PORT',
-      'PRECEDING',
-      'PRECISION',
-      'PRIMARY',
-      'PRIMARY_ROLE',
-      'PRINT',
-      'PRIOR',
-      'PRIORITY',
-      'PRIORITY_LEVEL',
-      'PRIVATE',
-      'PRIVILEGES',
-      'PROC',
-      'PROCCACHE',
-      'PROCEDURE',
-      'PROCEDURE_NAME',
-      'PROCESS',
-      'PROFILE',
-      'PROPERTY',
-      'PROPERTY_DESCRIPTION',
-      'PROPERTY_INT_ID',
-      'PROPERTY_SET_GUID',
-      'PROVIDER',
-      'PROVIDER_KEY_NAME',
-      'PUBLIC',
-      'PUT',
-      'QUARTER',
-      'QUERY',
-      'QUERY_GOVERNOR_COST_LIMIT',
-      'QUEUE',
-      'QUEUE_DELAY',
-      'QUOTED_IDENTIFIER',
-      'RAISERROR',
-      'RANGE',
-      'RAW',
-      'RC2',
-      'RC4',
-      'RC4_128',
-      'READ',
-      'READ_COMMITTED_SNAPSHOT',
-      'READ_ONLY',
-      'READ_ONLY_ROUTING_LIST',
-      'READ_ONLY_ROUTING_URL',
-      'READ_WRITE',
-      'READ_WRITE_FILEGROUPS',
-      'READCOMMITTED',
-      'READCOMMITTEDLOCK',
-      'READONLY',
-      'READPAST',
-      'READTEXT',
-      'READUNCOMMITTED',
-      'READWRITE',
-      'REAL',
-      'REBUILD',
-      'RECEIVE',
-      'RECOMPILE',
-      'RECONFIGURE',
-      'RECOVERY',
-      'RECURSIVE',
-      'RECURSIVE_TRIGGERS',
-      'REFERENCES',
-      'REGENERATE',
-      'RELATED_CONVERSATION',
-      'RELATED_CONVERSATION_GROUP',
-      'RELATIVE',
-      'REMOTE',
-      'REMOTE_PROC_TRANSACTIONS',
-      'REMOTE_SERVICE_NAME',
-      'REMOVE',
-      'REORGANIZE',
-      'REPAIR_ALLOW_DATA_LOSS',
-      'REPAIR_FAST',
-      'REPAIR_REBUILD',
-      'REPEATABLE',
-      'REPEATABLEREAD',
-      'REPLICA',
-      'REPLICATION',
-      'REQUEST_MAX_CPU_TIME_SEC',
-      'REQUEST_MAX_MEMORY_GRANT_PERCENT',
-      'REQUEST_MEMORY_GRANT_TIMEOUT_SEC',
-      'REQUIRED',
-      'RESAMPLE',
-      'RESEED',
-      'RESERVE_DISK_SPACE',
-      'RESET',
-      'RESOURCE',
-      'RESTART',
-      'RESTORE',
-      'RESTRICT',
-      'RESTRICTED_USER',
-      'RESULT',
-      'RESUME',
-      'RETAINDAYS',
-      'RETENTION',
-      'RETURN',
-      'RETURNS',
-      'REVERT',
-      'REVOKE',
-      'REWIND',
-      'REWINDONLY',
-      'ROBUST',
-      'ROLE',
-      'ROLLBACK',
-      'ROLLUP',
-      'ROOT',
-      'ROUTE',
-      'ROW',
-      'ROWCOUNT',
-      'ROWGUIDCOL',
-      'ROWLOCK',
-      'ROWS',
-      'ROWS_PER_BATCH',
-      'ROWTERMINATOR',
-      'ROWVERSION',
-      'RSA_1024',
-      'RSA_2048',
-      'RSA_512',
-      'RULE',
-      'SAFE',
-      'SAFETY',
-      'SAMPLE',
-      'SAVE',
-      'SCHEDULER',
-      'SCHEMA',
-      'SCHEMA_AND_DATA',
-      'SCHEMA_ONLY',
-      'SCHEMABINDING',
-      'SCHEME',
-      'SCROLL',
-      'SCROLL_LOCKS',
-      'SEARCH',
-      'SECOND',
-      'SECONDARY',
-      'SECONDARY_ONLY',
-      'SECONDARY_ROLE',
-      'SECONDS',
-      'SECRET',
-      'SECURITY_LOG',
-      'SECURITYAUDIT',
-      'SELECT',
-      'SELECTIVE',
-      'SELF',
-      'SEND',
-      'SENT',
-      'SEQUENCE',
-      'SERIALIZABLE',
-      'SERVER',
-      'SERVICE',
-      'SERVICE_BROKER',
-      'SERVICE_NAME',
-      'SESSION',
-      'SESSION_TIMEOUT',
-      'SET',
-      'SETS',
-      'SETUSER',
-      'SHOW_STATISTICS',
-      'SHOWCONTIG',
-      'SHOWPLAN',
-      'SHOWPLAN_ALL',
-      'SHOWPLAN_TEXT',
-      'SHOWPLAN_XML',
-      'SHRINKDATABASE',
-      'SHRINKFILE',
-      'SHUTDOWN',
-      'SID',
-      'SIGNATURE',
-      'SIMPLE',
-      'SINGLE_BLOB',
-      'SINGLE_CLOB',
-      'SINGLE_NCLOB',
-      'SINGLE_USER',
-      'SINGLETON',
-      'SIZE',
-      'SKIP',
-      'SMALLDATETIME',
-      'SMALLINT',
-      'SMALLMONEY',
-      'SNAPSHOT',
-      'SORT_IN_TEMPDB',
-      'SOURCE',
-      'SPARSE',
-      'SPATIAL',
-      'SPATIAL_WINDOW_MAX_CELLS',
-      'SPECIFICATION',
-      'SPLIT',
-      'SQL',
-      'SQL_VARIANT',
-      'SQLPERF',
-      'STANDBY',
-      'START',
-      'START_DATE',
-      'STARTED',
-      'STARTUP_STATE',
-      'STAT_HEADER',
-      'STATE',
-      'STATEMENT',
-      'STATIC',
-      'STATISTICAL_SEMANTICS',
-      'STATISTICS',
-      'STATISTICS_INCREMENTAL',
-      'STATISTICS_NORECOMPUTE',
-      'STATS',
-      'STATS_STREAM',
-      'STATUS',
-      'STATUSONLY',
-      'STOP',
-      'STOP_ON_ERROR',
-      'STOPAT',
-      'STOPATMARK',
-      'STOPBEFOREMARK',
-      'STOPLIST',
-      'STOPPED',
-      'SUBJECT',
-      'SUBSCRIPTION',
-      'SUPPORTED',
-      'SUSPEND',
-      'SWITCH',
-      'SYMMETRIC',
-      'SYNCHRONOUS_COMMIT',
-      'SYNONYM',
-      'SYSNAME',
-      'SYSTEM',
-      'TABLE',
-      'TABLERESULTS',
-      'TABLESAMPLE',
-      'TABLOCK',
-      'TABLOCKX',
-      'TAKE',
-      'TAPE',
-      'TARGET',
-      'TARGET_RECOVERY_TIME',
-      'TB',
-      'TCP',
-      'TEXT',
-      'TEXTIMAGE_ON',
-      'TEXTSIZE',
-      'THEN',
-      'THESAURUS',
-      'THROW',
-      'TIES',
-      'TIME',
-      'TIMEOUT',
-      'TIMER',
-      'TIMESTAMP',
-      'TINYINT',
-      'TO',
-      'TOP',
-      'TORN_PAGE_DETECTION',
-      'TRACEOFF',
-      'TRACEON',
-      'TRACESTATUS',
-      'TRACK_CAUSALITY',
-      'TRACK_COLUMNS_UPDATED',
-      'TRAN',
-      'TRANSACTION',
-      'TRANSFER',
-      'TRANSFORM_NOISE_WORDS',
-      'TRIGGER',
-      'TRIPLE_DES',
-      'TRIPLE_DES_3KEY',
-      'TRUE',
-      'TRUNCATE',
-      'TRUNCATEONLY',
-      'TRUSTWORTHY',
-      'TRY',
-      'TSQL',
-      'TWO_DIGIT_YEAR_CUTOFF',
-      'TYPE',
-      'TYPE_WARNING',
-      'UNBOUNDED',
-      'UNCHECKED',
-      'UNCOMMITTED',
-      'UNDEFINED',
-      'UNIQUE',
-      'UNIQUEIDENTIFIER',
-      'UNKNOWN',
-      'UNLIMITED',
-      'UNLOAD',
-      'UNSAFE',
-      'UPDATE',
-      'UPDATETEXT',
-      'UPDATEUSAGE',
-      'UPDLOCK',
-      'URL',
-      'USE',
-      'USED',
-      'USER',
-      'USEROPTIONS',
-      'USING',
-      'VALID_XML',
-      'VALIDATION',
-      'VALUE',
-      'VALUES',
-      'VARBINARY',
-      'VARCHAR',
-      'VARYING',
-      'VERIFYONLY',
-      'VERSION',
-      'VIEW',
-      'VIEW_METADATA',
-      'VIEWS',
-      'VISIBILITY',
-      'WAIT_AT_LOW_PRIORITY',
-      'WAITFOR',
-      'WEEK',
-      'WEIGHT',
-      'WELL_FORMED_XML',
-      'WHEN',
-      'WHERE',
-      'WHILE',
-      'WINDOWS',
-      'WITH',
-      'WITHIN',
-      'WITHOUT',
-      'WITNESS',
-      'WORK',
-      'WORKLOAD',
-      'WRITETEXT',
-      'XACT_ABORT',
-      'XLOCK',
-      'XMAX',
-      'XMIN',
-      'XML',
-      'XMLDATA',
-      'XMLNAMESPACES',
-      'XMLSCHEMA',
-      'XQUERY',
-      'XSINIL',
-      'YEAR',
-      'YMAX',
-      'YMIN',
-    ],
-    operators: [
-      // Logical
-      'ALL',
-      'AND',
-      'ANY',
-      'BETWEEN',
-      'EXISTS',
-      'IN',
-      'LIKE',
-      'NOT',
-      'OR',
-      'SOME',
-      // Set
-      'EXCEPT',
-      'INTERSECT',
-      'UNION',
-      // Join
-      'APPLY',
-      'CROSS',
-      'FULL',
-      'INNER',
-      'JOIN',
-      'LEFT',
-      'OUTER',
-      'RIGHT',
-      // Predicates
-      'CONTAINS',
-      'FREETEXT',
-      'IS',
-      'NULL',
-      // Pivoting
-      'PIVOT',
-      'UNPIVOT',
-      // Merging
-      'MATCHED',
-    ],
-    builtinFunctions: [
-      // Aggregate
-      'AVG',
-      'CHECKSUM_AGG',
-      'COUNT',
-      'COUNT_BIG',
-      'GROUPING',
-      'GROUPING_ID',
-      'MAX',
-      'MIN',
-      'SUM',
-      'STDEV',
-      'STDEVP',
-      'VAR',
-      'VARP',
-      // Analytic
-      'CUME_DIST',
-      'FIRST_VALUE',
-      'LAG',
-      'LAST_VALUE',
-      'LEAD',
-      'PERCENTILE_CONT',
-      'PERCENTILE_DISC',
-      'PERCENT_RANK',
-      // Collation
-      'COLLATE',
-      'COLLATIONPROPERTY',
-      'TERTIARY_WEIGHTS',
-      // Azure
-      'FEDERATION_FILTERING_VALUE',
-      // Conversion
-      'CAST',
-      'CONVERT',
-      'PARSE',
-      'TRY_CAST',
-      'TRY_CONVERT',
-      'TRY_PARSE',
-      // Cryptographic
-      'ASYMKEY_ID',
-      'ASYMKEYPROPERTY',
-      'CERTPROPERTY',
-      'CERT_ID',
-      'CRYPT_GEN_RANDOM',
-      'DECRYPTBYASYMKEY',
-      'DECRYPTBYCERT',
-      'DECRYPTBYKEY',
-      'DECRYPTBYKEYAUTOASYMKEY',
-      'DECRYPTBYKEYAUTOCERT',
-      'DECRYPTBYPASSPHRASE',
-      'ENCRYPTBYASYMKEY',
-      'ENCRYPTBYCERT',
-      'ENCRYPTBYKEY',
-      'ENCRYPTBYPASSPHRASE',
-      'HASHBYTES',
-      'IS_OBJECTSIGNED',
-      'KEY_GUID',
-      'KEY_ID',
-      'KEY_NAME',
-      'SIGNBYASYMKEY',
-      'SIGNBYCERT',
-      'SYMKEYPROPERTY',
-      'VERIFYSIGNEDBYCERT',
-      'VERIFYSIGNEDBYASYMKEY',
-      // Cursor
-      'CURSOR_STATUS',
-      // Datatype
-      'DATALENGTH',
-      'IDENT_CURRENT',
-      'IDENT_INCR',
-      'IDENT_SEED',
-      'IDENTITY',
-      'SQL_VARIANT_PROPERTY',
-      // Datetime
-      'CURRENT_TIMESTAMP',
-      'DATEADD',
-      'DATEDIFF',
-      'DATEFROMPARTS',
-      'DATENAME',
-      'DATEPART',
-      'DATETIME2FROMPARTS',
-      'DATETIMEFROMPARTS',
-      'DATETIMEOFFSETFROMPARTS',
-      'DAY',
-      'EOMONTH',
-      'GETDATE',
-      'GETUTCDATE',
-      'ISDATE',
-      'MONTH',
-      'SMALLDATETIMEFROMPARTS',
-      'SWITCHOFFSET',
-      'SYSDATETIME',
-      'SYSDATETIMEOFFSET',
-      'SYSUTCDATETIME',
-      'TIMEFROMPARTS',
-      'TODATETIMEOFFSET',
-      'YEAR',
-      // Logical
-      'CHOOSE',
-      'COALESCE',
-      'IIF',
-      'NULLIF',
-      // Mathematical
-      'ABS',
-      'ACOS',
-      'ASIN',
-      'ATAN',
-      'ATN2',
-      'CEILING',
-      'COS',
-      'COT',
-      'DEGREES',
-      'EXP',
-      'FLOOR',
-      'LOG',
-      'LOG10',
-      'PI',
-      'POWER',
-      'RADIANS',
-      'RAND',
-      'ROUND',
-      'SIGN',
-      'SIN',
-      'SQRT',
-      'SQUARE',
-      'TAN',
-      // Metadata
-      'APP_NAME',
-      'APPLOCK_MODE',
-      'APPLOCK_TEST',
-      'ASSEMBLYPROPERTY',
-      'COL_LENGTH',
-      'COL_NAME',
-      'COLUMNPROPERTY',
-      'DATABASE_PRINCIPAL_ID',
-      'DATABASEPROPERTYEX',
-      'DB_ID',
-      'DB_NAME',
-      'FILE_ID',
-      'FILE_IDEX',
-      'FILE_NAME',
-      'FILEGROUP_ID',
-      'FILEGROUP_NAME',
-      'FILEGROUPPROPERTY',
-      'FILEPROPERTY',
-      'FULLTEXTCATALOGPROPERTY',
-      'FULLTEXTSERVICEPROPERTY',
-      'INDEX_COL',
-      'INDEXKEY_PROPERTY',
-      'INDEXPROPERTY',
-      'OBJECT_DEFINITION',
-      'OBJECT_ID',
-      'OBJECT_NAME',
-      'OBJECT_SCHEMA_NAME',
-      'OBJECTPROPERTY',
-      'OBJECTPROPERTYEX',
-      'ORIGINAL_DB_NAME',
-      'PARSENAME',
-      'SCHEMA_ID',
-      'SCHEMA_NAME',
-      'SCOPE_IDENTITY',
-      'SERVERPROPERTY',
-      'STATS_DATE',
-      'TYPE_ID',
-      'TYPE_NAME',
-      'TYPEPROPERTY',
-      // Ranking
-      'DENSE_RANK',
-      'NTILE',
-      'RANK',
-      'ROW_NUMBER',
-      // Replication
-      'PUBLISHINGSERVERNAME',
-      // Rowset
-      'OPENDATASOURCE',
-      'OPENQUERY',
-      'OPENROWSET',
-      'OPENXML',
-      // Security
-      'CERTENCODED',
-      'CERTPRIVATEKEY',
-      'CURRENT_USER',
-      'HAS_DBACCESS',
-      'HAS_PERMS_BY_NAME',
-      'IS_MEMBER',
-      'IS_ROLEMEMBER',
-      'IS_SRVROLEMEMBER',
-      'LOGINPROPERTY',
-      'ORIGINAL_LOGIN',
-      'PERMISSIONS',
-      'PWDENCRYPT',
-      'PWDCOMPARE',
-      'SESSION_USER',
-      'SESSIONPROPERTY',
-      'SUSER_ID',
-      'SUSER_NAME',
-      'SUSER_SID',
-      'SUSER_SNAME',
-      'SYSTEM_USER',
-      'USER',
-      'USER_ID',
-      'USER_NAME',
-      // String
-      'ASCII',
-      'CHAR',
-      'CHARINDEX',
-      'CONCAT',
-      'DIFFERENCE',
-      'FORMAT',
-      'LEFT',
-      'LEN',
-      'LOWER',
-      'LTRIM',
-      'NCHAR',
-      'PATINDEX',
-      'QUOTENAME',
-      'REPLACE',
-      'REPLICATE',
-      'REVERSE',
-      'RIGHT',
-      'RTRIM',
-      'SOUNDEX',
-      'SPACE',
-      'STR',
-      'STUFF',
-      'SUBSTRING',
-      'UNICODE',
-      'UPPER',
-      // System
-      'BINARY_CHECKSUM',
-      'CHECKSUM',
-      'CONNECTIONPROPERTY',
-      'CONTEXT_INFO',
-      'CURRENT_REQUEST_ID',
-      'ERROR_LINE',
-      'ERROR_NUMBER',
-      'ERROR_MESSAGE',
-      'ERROR_PROCEDURE',
-      'ERROR_SEVERITY',
-      'ERROR_STATE',
-      'FORMATMESSAGE',
-      'GETANSINULL',
-      'GET_FILESTREAM_TRANSACTION_CONTEXT',
-      'HOST_ID',
-      'HOST_NAME',
-      'ISNULL',
-      'ISNUMERIC',
-      'MIN_ACTIVE_ROWVERSION',
-      'NEWID',
-      'NEWSEQUENTIALID',
-      'ROWCOUNT_BIG',
-      'XACT_STATE',
-      // TextImage
-      'TEXTPTR',
-      'TEXTVALID',
-      // Trigger
-      'COLUMNS_UPDATED',
-      'EVENTDATA',
-      'TRIGGER_NESTLEVEL',
-      'UPDATE',
-      // ChangeTracking
-      'CHANGETABLE',
-      'CHANGE_TRACKING_CONTEXT',
-      'CHANGE_TRACKING_CURRENT_VERSION',
-      'CHANGE_TRACKING_IS_COLUMN_IN_MASK',
-      'CHANGE_TRACKING_MIN_VALID_VERSION',
-      // FullTextSearch
-      'CONTAINSTABLE',
-      'FREETEXTTABLE',
-      // SemanticTextSearch
-      'SEMANTICKEYPHRASETABLE',
-      'SEMANTICSIMILARITYDETAILSTABLE',
-      'SEMANTICSIMILARITYTABLE',
-      // FileStream
-      'FILETABLEROOTPATH',
-      'GETFILENAMESPACEPATH',
-      'GETPATHLOCATOR',
-      'PATHNAME',
-      // ServiceBroker
-      'GET_TRANSMISSION_STATUS',
-    ],
-    builtinVariables: [
-      // Configuration
-      '@@DATEFIRST',
-      '@@DBTS',
-      '@@LANGID',
-      '@@LANGUAGE',
-      '@@LOCK_TIMEOUT',
-      '@@MAX_CONNECTIONS',
-      '@@MAX_PRECISION',
-      '@@NESTLEVEL',
-      '@@OPTIONS',
-      '@@REMSERVER',
-      '@@SERVERNAME',
-      '@@SERVICENAME',
-      '@@SPID',
-      '@@TEXTSIZE',
-      '@@VERSION',
-      // Cursor
-      '@@CURSOR_ROWS',
-      '@@FETCH_STATUS',
-      // Datetime
-      '@@DATEFIRST',
-      // Metadata
-      '@@PROCID',
-      // System
-      '@@ERROR',
-      '@@IDENTITY',
-      '@@ROWCOUNT',
-      '@@TRANCOUNT',
-      // Stats
-      '@@CONNECTIONS',
-      '@@CPU_BUSY',
-      '@@IDLE',
-      '@@IO_BUSY',
-      '@@PACKET_ERRORS',
-      '@@PACK_RECEIVED',
-      '@@PACK_SENT',
-      '@@TIMETICKS',
-      '@@TOTAL_ERRORS',
-      '@@TOTAL_READ',
-      '@@TOTAL_WRITE',
-    ],
-    pseudoColumns: ['$ACTION', '$IDENTITY', '$ROWGUID', '$PARTITION'],
-    tokenizer: {
-      root: [
-        { include: '@comments' },
-        { include: '@whitespace' },
-        { include: '@pseudoColumns' },
-        { include: '@numbers' },
-        { include: '@strings' },
-        { include: '@complexIdentifiers' },
-        { include: '@scopes' },
-        [/[;,.]/, 'delimiter'],
-        [/[()]/, '@brackets'],
-        [
-          /[\w@#$]+/,
-          {
-            cases: {
-              '@keywords': 'keyword',
-              '@operators': 'operator',
-              '@builtinVariables': 'predefined',
-              '@builtinFunctions': 'predefined',
-              '@default': 'identifier',
-            },
-          },
-        ],
-        [/[<>=!%&+\-*/|~^]/, 'operator'],
-      ],
-      whitespace: [[/\s+/, 'white']],
-      comments: [
-        [/--+.*/, 'comment'],
-        [/\/\*/, { token: 'comment.quote', next: '@comment' }],
-      ],
-      comment: [
-        [/[^*/]+/, 'comment'],
-        // Not supporting nested comments, as nested comments seem to not be standard?
-        // i.e. http://stackoverflow.com/questions/728172/are-there-multiline-comment-delimiters-in-sql-that-are-vendor-agnostic
-        // [/\/\*/, { token: 'comment.quote', next: '@push' }],    // nested comment not allowed :-(
-        [/\*\//, { token: 'comment.quote', next: '@pop' }],
-        [/./, 'comment'],
-      ],
-      pseudoColumns: [
-        [
-          /[$][A-Za-z_][\w@#$]*/,
-          {
-            cases: {
-              '@pseudoColumns': 'predefined',
-              '@default': 'identifier',
-            },
-          },
-        ],
-      ],
-      numbers: [
-        [/0[xX][0-9a-fA-F]*/, 'number'],
-        [/[$][+-]*\d*(\.\d*)?/, 'number'],
-        [/((\d+(\.\d*)?)|(\.\d+))([eE][\-+]?\d+)?/, 'number'],
-      ],
-      strings: [
-        [/N'/, { token: 'string', next: '@string' }],
-        [/'/, { token: 'string', next: '@string' }],
-      ],
-      string: [
-        [/[^']+/, 'string'],
-        [/''/, 'string'],
-        [/'/, { token: 'string', next: '@pop' }],
-      ],
-      complexIdentifiers: [
-        [/\[/, { token: 'identifier.quote', next: '@bracketedIdentifier' }],
-        [/"/, { token: 'identifier.quote', next: '@quotedIdentifier' }],
-      ],
-      bracketedIdentifier: [
-        [/[^\]]+/, 'identifier'],
-        [/]]/, 'identifier'],
-        [/]/, { token: 'identifier.quote', next: '@pop' }],
-      ],
-      quotedIdentifier: [
-        [/[^"]+/, 'identifier'],
-        [/""/, 'identifier'],
-        [/"/, { token: 'identifier.quote', next: '@pop' }],
-      ],
-      scopes: [
-        [/BEGIN\s+(DISTRIBUTED\s+)?TRAN(SACTION)?\b/i, 'keyword'],
-        [/BEGIN\s+TRY\b/i, { token: 'keyword.try' }],
-        [/END\s+TRY\b/i, { token: 'keyword.try' }],
-        [/BEGIN\s+CATCH\b/i, { token: 'keyword.catch' }],
-        [/END\s+CATCH\b/i, { token: 'keyword.catch' }],
-        [/(BEGIN|CASE)\b/i, { token: 'keyword.block' }],
-        [/END\b/i, { token: 'keyword.block' }],
-        [/WHEN\b/i, { token: 'keyword.choice' }],
-        [/THEN\b/i, { token: 'keyword.choice' }],
-      ],
-    },
-  },
-};
diff --git a/src/livecodes/editor/monaco/languages/monaco-lang-wat.ts b/src/livecodes/editor/monaco/languages/monaco-lang-wat.ts
deleted file mode 100644
index 488e348c53..0000000000
--- a/src/livecodes/editor/monaco/languages/monaco-lang-wat.ts
+++ /dev/null
@@ -1,710 +0,0 @@
-// 'WebAssembly Text Format' Monarch language
-// from https://github.com/AssemblyScript/website/blob/main/src/.vuepress/public/scripts/wat.js
-export default {
-  config: {
-    brackets: [
-      ['(', ')'],
-      ['if', 'end'],
-      ['loop', 'end'],
-      ['block', 'end'],
-    ],
-    autoClosingPairs: [
-      { open: '(', close: ')' },
-      { open: 'if', close: 'end' },
-      { open: 'loop', close: 'end' },
-      { open: 'block', close: 'end' },
-    ],
-    surroundingPairs: [
-      { open: '(', close: ')' },
-      { open: 'if', close: 'end' },
-      { open: 'loop', close: 'end' },
-      { open: 'block', close: 'end' },
-    ],
-  },
-  tokens: {
-    keywords: [
-      'module',
-      'import',
-      'export',
-      'memory',
-      'data',
-      'table',
-      'elem',
-      'start',
-      'func',
-      'tag',
-      'type',
-      'param',
-      'result',
-      'global',
-      'local',
-      'mut',
-      'struct',
-      'array',
-      'field',
-    ],
-    types: [
-      'i8',
-      'i16',
-      'i32',
-      'i64',
-      'f32',
-      'f64',
-      'v128',
-      'i31ref',
-      'eqref',
-      'anyref',
-      'dataref',
-      'externref',
-      'funcref',
-      'exnref',
-      'extern',
-      'null',
-      'any',
-      'eq',
-    ],
-    instructions: [
-      'pop',
-      'nop',
-      'drop',
-      'data.drop',
-      'elem.drop',
-      'local.get',
-      'local.set',
-      'local.tee',
-      'global.get',
-      'global.set',
-      'tuple.make',
-      'tuple.extract',
-      'select',
-      'v128.const',
-      'v128.and',
-      'v128.or',
-      'v128.xor',
-      'v128.not',
-      'v128.andnot',
-      'v128.bitselect',
-      'v128.load',
-      'v128.load8x8_s',
-      'v128.load8x8_u',
-      'v128.load16x4_s',
-      'v128.load16x4_u',
-      'v128.load32x2_s',
-      'v128.load32x2_u',
-      'v128.load8_lane',
-      'v128.load16_lane',
-      'v128.load32_lane',
-      'v128.load64_lane',
-      'v128.load8_splat',
-      'v128.load16_splat',
-      'v128.load32_splat',
-      'v128.load64_splat',
-      'v128.load32_zero',
-      'v128.load64_zero',
-      'v128.store',
-      'v128.store8_lane',
-      'v128.store16_lane',
-      'v128.store32_lane',
-      'v128.store64_lane',
-      'v128.any_true',
-      'i8x16.shuffle',
-      'i8x16.swizzle',
-      'i8x16.bitmask',
-      'i8x16.splat',
-      'i8x16.popcnt',
-      'i8x16.replace_lane',
-      'i8x16.extract_lane_s',
-      'i8x16.extract_lane_u',
-      'i8x16.all_true',
-      'i8x16.abs',
-      'i8x16.add',
-      'i8x16.add_sat_s',
-      'i8x16.add_sat_u',
-      'i8x16.sub',
-      'i8x16.sub_sat_s',
-      'i8x16.sub_sat_u',
-      'i8x16.mul',
-      'i8x16.neg',
-      'i8x16.shl',
-      'i8x16.shr_s',
-      'i8x16.shr_u',
-      'i8x16.eq',
-      'i8x16.ne',
-      'i8x16.lt_s',
-      'i8x16.lt_u',
-      'i8x16.le_s',
-      'i8x16.le_u',
-      'i8x16.gt_s',
-      'i8x16.gt_u',
-      'i8x16.ge_s',
-      'i8x16.ge_u',
-      'i8x16.min_s',
-      'i8x16.min_u',
-      'i8x16.max_s',
-      'i8x16.max_u',
-      'i8x16.avgr_u',
-      'i8x16.narrow_i16x8_s',
-      'i8x16.narrow_i16x8_u',
-      'i16x8.bitmask',
-      'i16x8.splat',
-      'i16x8.load_8x8_s',
-      'i16x8.load_8x8_u',
-      'i16x8.replace_lane',
-      'i16x8.extract_lane_s',
-      'i16x8.extract_lane_u',
-      'i16x8.extend_low_i8x16_s',
-      'i16x8.extend_high_i8x16_s',
-      'i16x8.extend_low_i8x16_u',
-      'i16x8.extend_high_i8x16_u',
-      'i16x8.all_true',
-      'i16x8.abs',
-      'i16x8.add',
-      'i16x8.add_sat_s',
-      'i16x8.add_sat_u',
-      'i16x8.extadd_pairwise_i8x16_s',
-      'i16x8.extadd_pairwise_i8x16_u',
-      'i16x8.sub',
-      'i16x8.sub_sat_s',
-      'i16x8.sub_sat_u',
-      'i16x8.q15mulr_sat_s',
-      'i16x8.mul',
-      'i16x8.extmul_low_i8x16_s',
-      'i16x8.extmul_high_i8x16_s',
-      'i16x8.extmul_low_i8x16_u',
-      'i16x8.extmul_high_i8x16_u',
-      'i16x8.neg',
-      'i16x8.shl',
-      'i16x8.shr_s',
-      'i16x8.shr_u',
-      'i16x8.eq',
-      'i16x8.ne',
-      'i16x8.lt_s',
-      'i16x8.lt_u',
-      'i16x8.le_s',
-      'i16x8.le_u',
-      'i16x8.gt_s',
-      'i16x8.gt_u',
-      'i16x8.ge_s',
-      'i16x8.ge_u',
-      'i16x8.min_s',
-      'i16x8.min_u',
-      'i16x8.max_s',
-      'i16x8.max_u',
-      'i16x8.avgr_u',
-      'i16x8.narrow_i32x4_s',
-      'i16x8.narrow_i32x4_u',
-      'i32x4.bitmask',
-      'i32x4.splat',
-      'i32x4.load_16x4_s',
-      'i32x4.load_16x4_u',
-      'i32x4.replace_lane',
-      'i32x4.extract_lane',
-      'i32x4.extend_low_i16x8_s',
-      'i32x4.extend_high_i16x8_s',
-      'i32x4.extend_low_i16x8_u',
-      'i32x4.extend_high_i16x8_u',
-      'i32x4.all_true',
-      'i32x4.abs',
-      'i32x4.add',
-      'i32x4.extadd_pairwise_i16x8_s',
-      'i32x4.extadd_pairwise_i16x8_u',
-      'i32x4.sub',
-      'i32x4.mul',
-      'i32x4.extmul_low_i16x8_s',
-      'i32x4.extmul_high_i16x8_s',
-      'i32x4.extmul_low_i16x8_u',
-      'i32x4.extmul_high_i16x8_u',
-      'i32x4.neg',
-      'i32x4.shl',
-      'i32x4.shr_s',
-      'i32x4.shr_u',
-      'i32x4.eq',
-      'i32x4.ne',
-      'i32x4.lt_s',
-      'i32x4.lt_u',
-      'i32x4.le_s',
-      'i32x4.le_u',
-      'i32x4.gt_s',
-      'i32x4.gt_u',
-      'i32x4.ge_s',
-      'i32x4.ge_u',
-      'i32x4.min_s',
-      'i32x4.min_u',
-      'i32x4.max_s',
-      'i32x4.max_u',
-      'i32x4.trunc_sat_f32x4_s',
-      'i32x4.trunc_sat_f32x4_u',
-      'i32x4.trunc_sat_f64x2_s_zero',
-      'i32x4.trunc_sat_f64x2_u_zero',
-      'i32x4.dot_i16x8_s',
-      'i64x2.bitmask',
-      'i64x2.splat',
-      'i64x2.load32x2_s',
-      'i64x2.load32x2_u',
-      'i64x2.replace_lane',
-      'i64x2.extract_lane',
-      'i64x2.extend_low_i32x4_s',
-      'i64x2.extend_high_i32x4_s',
-      'i64x2.extend_low_i32x4_u',
-      'i64x2.extend_high_i32x4_u',
-      'i64x2.all_true',
-      'i64x2.abs',
-      'i64x2.add',
-      'i64x2.sub',
-      'i64x2.mul',
-      'i64x2.neg',
-      'i64x2.shl',
-      'i64x2.shr_s',
-      'i64x2.shr_u',
-      'f32x4.splat',
-      'f32x4.replace_lane',
-      'f32x4.extract_lane',
-      'f32x4.add',
-      'f32x4.sub',
-      'f32x4.mul',
-      'i64x2.extmul_low_i32x4_s',
-      'i64x2.extmul_high_i32x4_s',
-      'i64x2.extmul_low_i32x4_u',
-      'i64x2.extmul_high_i32x4_u',
-      'i64x2.eq',
-      'i64x2.ne',
-      'i64x2.lt_s',
-      'i64x2.le_s',
-      'i64x2.gt_s',
-      'i64x2.ge_s',
-      'f32x4.neg',
-      'f32x4.eq',
-      'f32x4.ne',
-      'f32x4.lt',
-      'f32x4.le',
-      'f32x4.gt',
-      'f32x4.ge',
-      'f32x4.abs',
-      'f32x4.min',
-      'f32x4.pmin',
-      'f32x4.max',
-      'f32x4.pmax',
-      'f32x4.div',
-      'f32x4.sqrt',
-      'f32x4.ceil',
-      'f32x4.floor',
-      'f32x4.trunc',
-      'f32x4.nearest',
-      'f32x4.demote_f64x2_zero',
-      'f32x4.convert_i32x4_s',
-      'f32x4.convert_i32x4_u',
-      'f64x2.splat',
-      'f64x2.replace_lane',
-      'f64x2.extract_lane',
-      'f64x2.add',
-      'f64x2.sub',
-      'f64x2.mul',
-      'f64x2.neg',
-      'f64x2.eq',
-      'f64x2.ne',
-      'f64x2.lt',
-      'f64x2.le',
-      'f64x2.gt',
-      'f64x2.ge',
-      'f64x2.abs',
-      'f64x2.min',
-      'f64x2.max',
-      'f64x2.pmin',
-      'f64x2.pmax',
-      'f64x2.div',
-      'f64x2.sqrt',
-      'f64x2.ceil',
-      'f64x2.floor',
-      'f64x2.trunc',
-      'f64x2.nearest',
-      'f64x2.promote_low_f32x4',
-      'f64x2.convert_low_i32x4_s',
-      'f64x2.convert_low_i32x4_u',
-      'i32.atomic.load',
-      'i32.atomic.load8_u',
-      'i32.atomic.load16_u',
-      'i32.atomic.store',
-      'i32.atomic.store8',
-      'i32.atomic.store16',
-      'i32.atomic.rmw.add',
-      'i32.atomic.rmw.sub',
-      'i32.atomic.rmw.and',
-      'i32.atomic.rmw.or',
-      'i32.atomic.rmw.xor',
-      'i32.atomic.rmw.xchg',
-      'i32.atomic.rmw.cmpxchg',
-      'i32.atomic.rmw8.add_u',
-      'i32.atomic.rmw8.sub_u',
-      'i32.atomic.rmw8.and_u',
-      'i32.atomic.rmw8.or_u',
-      'i32.atomic.rmw8.xor_u',
-      'i32.atomic.rmw8.xchg_u',
-      'i32.atomic.rmw8.cmpxchg_u',
-      'i32.atomic.rmw16.add_u',
-      'i32.atomic.rmw16.sub_u',
-      'i32.atomic.rmw16.and_u',
-      'i32.atomic.rmw16.or_u',
-      'i32.atomic.rmw16.xor_u',
-      'i32.atomic.rmw16.xchg_u',
-      'i32.atomic.rmw16.cmpxchg_u',
-      'i64.atomic.load',
-      'i64.atomic.load8_u',
-      'i64.atomic.load16_u',
-      'i64.atomic.load32_u',
-      'i64.atomic.store',
-      'i64.atomic.store8',
-      'i64.atomic.store16',
-      'i64.atomic.store32',
-      'i64.atomic.rmw.add',
-      'i64.atomic.rmw.sub',
-      'i64.atomic.rmw.and',
-      'i64.atomic.rmw.or',
-      'i64.atomic.rmw.xor',
-      'i64.atomic.rmw.xchg',
-      'i64.atomic.rmw.cmpxchg',
-      'i64.atomic.rmw8.add_u',
-      'i64.atomic.rmw8.sub_u',
-      'i64.atomic.rmw8.and_u',
-      'i64.atomic.rmw8.or_u',
-      'i64.atomic.rmw8.xor_u',
-      'i64.atomic.rmw8.xchg_u',
-      'i64.atomic.rmw8.cmpxchg_u',
-      'i64.atomic.rmw16.add_u',
-      'i64.atomic.rmw16.sub_u',
-      'i64.atomic.rmw16.and_u',
-      'i64.atomic.rmw16.or_u',
-      'i64.atomic.rmw16.xor_u',
-      'i64.atomic.rmw16.xchg_u',
-      'i64.atomic.rmw16.cmpxchg_u',
-      'i64.atomic.rmw32.add_u',
-      'i64.atomic.rmw32.sub_u',
-      'i64.atomic.rmw32.and_u',
-      'i64.atomic.rmw32.or_u',
-      'i64.atomic.rmw32.xor_u',
-      'i64.atomic.rmw32.xchg_u',
-      'i64.atomic.rmw32.cmpxchg_u',
-      'atomic.fence',
-      'func.bind',
-      'ref',
-      'ref.eq',
-      'ref.null',
-      'ref.is_null',
-      'ref.is_func',
-      'ref.is_data',
-      'ref.is_i31',
-      'ref.as_func',
-      'ref.as_non_null',
-      'ref.as_data',
-      'ref.as_i31',
-      'ref.func',
-      'ref.cast',
-      'ref.cast_static',
-      'ref.test',
-      'ref.test_static',
-      'table.get',
-      'table.set',
-      'table.size',
-      'table.grow',
-      'table.fill',
-      'table.init',
-      'table.copy',
-      'throw',
-      'rethrow',
-      'i32.load',
-      'i32.load8_s',
-      'i32.load8_u',
-      'i32.load16_s',
-      'i32.load16_u',
-      'i32.store',
-      'i32.store8',
-      'i32.store16',
-      'i32.const',
-      'i32.eqz',
-      'i32.eq',
-      'i32.ne',
-      'i32.lt_s',
-      'i32.lt_u',
-      'i32.le_s',
-      'i32.le_u',
-      'i32.gt_s',
-      'i32.gt_u',
-      'i32.ge_s',
-      'i32.ge_u',
-      'i32.clz',
-      'i32.ctz',
-      'i32.popcnt',
-      'i32.add',
-      'i32.sub',
-      'i32.mul',
-      'i32.div_s',
-      'i32.div_u',
-      'i32.rem_s',
-      'i32.rem_u',
-      'i32.and',
-      'i32.or',
-      'i32.xor',
-      'i32.shl',
-      'i32.shr_s',
-      'i32.shr_u',
-      'i32.rotl',
-      'i32.rotr',
-      'i32.wrap_i64',
-      'i32.trunc_f32_s',
-      'i32.trunc_f32_u',
-      'i32.trunc_f64_s',
-      'i32.trunc_f64_u',
-      'i32.reinterpret_f32',
-      'i64.load',
-      'i64.load8_s',
-      'i64.load8_u',
-      'i64.load16_s',
-      'i64.load16_u',
-      'i64.load32_s',
-      'i64.load32_u',
-      'i64.store',
-      'i64.store8',
-      'i64.store16',
-      'i64.store32',
-      'i64.const',
-      'i64.eqz',
-      'i64.eq',
-      'i64.ne',
-      'i64.lt_s',
-      'i64.lt_u',
-      'i64.le_s',
-      'i64.le_u',
-      'i64.gt_s',
-      'i64.gt_u',
-      'i64.ge_s',
-      'i64.ge_u',
-      'i64.clz',
-      'i64.ctz',
-      'i64.popcnt',
-      'i64.add',
-      'i64.sub',
-      'i64.mul',
-      'i64.div_s',
-      'i64.div_u',
-      'i64.rem_s',
-      'i64.rem_u',
-      'i64.and',
-      'i64.or',
-      'i64.xor',
-      'i64.shl',
-      'i64.shr_s',
-      'i64.shr_u',
-      'i64.rotl',
-      'i64.rotr',
-      'i64.extend_i32_s',
-      'i64.extend_i32_u',
-      'i64.trunc_f32_s',
-      'i64.trunc_f32_u',
-      'i64.trunc_f64_s',
-      'i64.trunc_f64_u',
-      'i64.reinterpret_f64',
-      'f32.load',
-      'f32.store',
-      'f32.const',
-      'f32.eq',
-      'f32.ne',
-      'f32.lt',
-      'f32.le',
-      'f32.gt',
-      'f32.ge',
-      'f32.abs',
-      'f32.neg',
-      'f32.ceil',
-      'f32.floor',
-      'f32.trunc',
-      'f32.nearest',
-      'f32.sqrt',
-      'f32.add',
-      'f32.sub',
-      'f32.mul',
-      'f32.div',
-      'f32.min',
-      'f32.max',
-      'f32.copysign',
-      'f32.convert_i32_s',
-      'f32.convert_i32_u',
-      'f32.convert_i64_s',
-      'f32.convert_i64_u',
-      'f32.demote_f64',
-      'f32.reinterpret_i32',
-      'f64.load',
-      'f64.store',
-      'f64.const',
-      'f64.eq',
-      'f64.ne',
-      'f64.lt',
-      'f64.le',
-      'f64.gt',
-      'f64.ge',
-      'f64.abs',
-      'f64.neg',
-      'f64.ceil',
-      'f64.floor',
-      'f64.trunc',
-      'f64.nearest',
-      'f64.sqrt',
-      'f64.add',
-      'f64.sub',
-      'f64.mul',
-      'f64.div',
-      'f64.min',
-      'f64.max',
-      'f64.copysign',
-      'f64.convert_i32_s',
-      'f64.convert_i32_u',
-      'f64.convert_i64_s',
-      'f64.convert_i64_u',
-      'f64.promote_f32',
-      'f64.reinterpret_i64',
-      'i32.extend8_s',
-      'i32.extend16_s',
-      'i64.extend8_s',
-      'i64.extend16_s',
-      'i64.extend32_s',
-      'i32.trunc_sat_f32_s',
-      'i32.trunc_sat_f32_u',
-      'i32.trunc_sat_f64_s',
-      'i32.trunc_sat_f64_u',
-      'i64.trunc_sat_f32_s',
-      'i64.trunc_sat_f32_u',
-      'i64.trunc_sat_f64_s',
-      'i64.trunc_sat_f64_u',
-      'memory.size',
-      'memory.grow',
-      'memory.copy',
-      'memory.fill',
-      'memory.init',
-      'memory.atomic.notify',
-      'memory.atomic.wait32',
-      'memory.atomic.wait64',
-      'i31.new',
-      'i31.get_u',
-      'i31.get_s',
-      'array.new',
-      'array.new_default',
-      'array.init',
-      'array.init_static',
-      'array.get',
-      'array.get_s',
-      'array.get_u',
-      'array.set',
-      'array.len',
-      'array.copy',
-      'struct.new',
-      'struct.new_default',
-      'struct.new_with_rtt',
-      'struct.new_default_with_rtt',
-      'struct.get',
-      'struct.get_s',
-      'struct.get_u',
-      'struct.set',
-      'rtt.canon',
-      'rtt.sub',
-      'rtt.fresh_sub',
-    ],
-    controlInstructions: [
-      'block',
-      'loop',
-      'if',
-      'else',
-      'then',
-      'end',
-      'do',
-      'let',
-      'br',
-      'br_if',
-      'br_table',
-      'br_on_exn',
-      'br_on_null',
-      'br_on_non_null',
-      'br_on_cast',
-      'br_on_cast_static',
-      'br_on_cast_fail',
-      'br_on_cast_static_fail',
-      'br_on_func',
-      'br_on_non_func',
-      'br_on_data',
-      'br_on_non_data',
-      'br_on_i31',
-      'br_on_non_i31',
-      'call',
-      'call_indirect',
-      'call_ref',
-      'return',
-      'return_call',
-      'return_call_indirect',
-      'return_call_ref',
-      'try',
-      'catch',
-      'catch_all',
-      'delegate',
-      'unreachable',
-    ],
-
-    escapes: /\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,
-    digits: /\d+(_+\d+)*/,
-    octaldigits: /[0-7]+(_+[0-7]+)*/,
-    binarydigits: /[0-1]+(_+[0-1]+)*/,
-    hexdigits: /[[0-9a-fA-F]+(_+[0-9a-fA-F]+)*/,
-
-    tokenizer: {
-      root: [
-        // whitespace
-        { include: '@whitespace' },
-
-        // strings
-        [/"([^"\\]|\\.)*$/, 'string.invalid'], // non-terminated string
-        [/"/, 'string', '@string'],
-
-        // numbers (not all of these are generated, but here to be sure)
-        [/(@digits)[eE]([\-+]?(@digits))?[fFdD]?/, 'number.float'],
-        [/(@digits)\.(@digits)([eE][\-+]?(@digits))?[fFdD]?/, 'number.float'],
-        [/0[xX](@hexdigits)[Ll]?/, 'number.hex'],
-        [/0(@octaldigits)[Ll]?/, 'number.octal'],
-        [/0[bB](@binarydigits)[Ll]?/, 'number.binary'],
-        [/(@digits)[fFdD]/, 'number.float'],
-        [/(@digits)[lL]?/, 'number'],
-
-        // variable names
-        [/\$[^\s\)]*/, { token: 'identifier' }],
-
-        // instructions and types
-        [
-          /[a-z0-9_]+(?:\.[a-z0-9_]+)*/,
-          {
-            cases: {
-              '@types': { token: 'type.$0' },
-              '@keywords': { token: 'keyword.$0' },
-              '@controlInstructions': { token: 'controlInstruction.$0' },
-              '@instructions': { token: 'instruction.$0' },
-              '@default': 'identifier',
-            },
-          },
-        ],
-      ],
-
-      // eslint-disable-next-line id-blacklist
-      string: [
-        [/[^\\"]+/, 'string'],
-        [/@escapes/, 'string.escape'],
-        [/\\./, 'string.escape.invalid'],
-        [/"/, 'string', '@pop'],
-      ],
-
-      whitespace: [
-        [/[ \t\r\n]+/, ''],
-        [/(;; )(ERROR |FAILURE )([^\n]*)/, ['comment', 'error', '']],
-        [/(;; )(WARNING )([^\n]*)/, ['comment', 'warning', '']],
-        [/(;; )(INFO )([^\n]*)/, ['comment', 'info', '']],
-        [/(;; )(PEDANTIC )([^\n]*)/, ['comment', 'pedantic', '']],
-        [/(;;  +)(~+|\^)$/, ['comment', 'underline']],
-        [/(;;  )([^\n]*)/, ['comment', '']],
-        [/;;[^\n]*/, 'comment'],
-      ],
-    },
-  },
-};
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 2c7c1508ce..dae937b04f 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -252,15 +252,15 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   };
 
   const customLanguages: Partial<Record<Language, string>> = {
-    astro: baseUrl + '{{hash:monaco-lang-astro.js}}',
-    clio: baseUrl + '{{hash:monaco-lang-clio.js}}',
-    imba: baseUrl + '{{hash:monaco-lang-imba.js}}',
-    json5: baseUrl + '{{hash:monaco-lang-json5.js}}',
-    minizinc: baseUrl + '{{hash:monaco-lang-minizinc.js}}',
-    prolog: baseUrl + '{{hash:monaco-lang-prolog.js}}',
-    // sql: baseUrl + '{{hash:monaco-lang-sql.js}}', // TODO: add autocomplete
+    astro: monacoLanguagesBaseUrl + 'astro.js',
+    clio: monacoLanguagesBaseUrl + 'clio.js',
+    imba: monacoLanguagesBaseUrl + 'imba.js',
+    json5: monacoLanguagesBaseUrl + 'json5.js',
+    minizinc: monacoLanguagesBaseUrl + 'minizinc.js',
+    prolog: monacoLanguagesBaseUrl + 'prolog.js',
+    // sql: monacoLanguagesBaseUrl + 'sql.js', // TODO: add autocomplete
     vue: monacoLanguagesBaseUrl + 'vue.js',
-    wat: baseUrl + '{{hash:monaco-lang-wat.js}}',
+    wat: monacoLanguagesBaseUrl + 'wat.js',
   };
 
   interface CustomLanguageDefinition {
@@ -275,8 +275,8 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     lang = monacoMapLanguage(lang);
     const langUrl = customLanguages[lang];
     if (langUrl && !monaco.languages.getLanguages().find((l) => l.id === lang)) {
-      const mod: CustomLanguageDefinition = (await import(langUrl)).default;
       monaco.languages.register({ id: lang });
+      const mod: CustomLanguageDefinition = (await import(langUrl)).default;
       if (mod.config) {
         monaco.languages.setLanguageConfiguration(lang, mod.config);
       }

From 5d39151bd1beaa64f1f64840cb1f84bcaa28e561 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 31 Jan 2026 10:50:06 +0200
Subject: [PATCH 091/143] enable search in multifile templates

---
 src/livecodes/UI/templates.ts                 |  5 +-
 src/livecodes/core.ts                         | 79 ++++++++-----------
 .../templates/multifile/javascript.ts         |  1 +
 .../templates/multifile/typescript.ts         |  1 +
 src/sdk/models.ts                             |  4 +-
 5 files changed, 39 insertions(+), 51 deletions(-)

diff --git a/src/livecodes/UI/templates.ts b/src/livecodes/UI/templates.ts
index 9077f1dfe1..6209dbcce3 100644
--- a/src/livecodes/UI/templates.ts
+++ b/src/livecodes/UI/templates.ts
@@ -36,6 +36,7 @@ export const createStarterTemplateLink = (
   baseUrl: string,
 ) => {
   const li = document.createElement('li');
+  li.classList.add('starter-template');
   li.dataset.id = template.id;
   const link = document.createElement('a');
   link.href = '?template=' + template.name;
@@ -96,14 +97,14 @@ export const addTemplateToIndex = ({
   });
 };
 
-export const setupTemplatesSearch = (container: HTMLElement) => {
+const setupTemplatesSearch = (container: HTMLElement) => {
   const input = getTemplatesSearchInput(container);
   if (!input) return;
 
   const filterTemplates = (query: string) => {
     searchIndex?.then(async (index) => {
       const mainItems = container.querySelectorAll(
-        '#templates-starter li',
+        'li.starter-template',
       ) as NodeListOf<HTMLElement>;
       const userItems = container.querySelectorAll('#templates-user li') as NodeListOf<HTMLElement>;
       const items = Array.from(mainItems).concat(Array.from(userItems));
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 2fa24be9aa..7fa90cf14a 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -3797,20 +3797,20 @@ const handleNew = () => {
     });
   };
 
-  let templatesCache: Template[] | undefined;
   const createTemplatesUI = async () => {
     initTemplatesSearchIndex();
     const starterTemplatesList = UI.getStarterTemplatesList(templatesContainer);
     const multifileTemplatesList = UI.getMultifileTemplatesList(templatesContainer);
     if (!starterTemplatesList || !multifileTemplatesList) return;
     starterTemplatesList.innerHTML = '';
+    multifileTemplatesList.innerHTML = '';
     const searchInput = UI.getTemplatesSearchInput(templatesContainer);
     if (searchInput) {
       searchInput.value = '';
     }
     const loadingText = starterTemplatesList?.firstElementChild;
     const multifileLoadingText = multifileTemplatesList?.firstElementChild;
-    const createLink = (template: Template, list: HTMLElement) => {
+    const createLink = (template: Template & { id: string }, list: HTMLElement) => {
       const link = createStarterTemplateLink(template, list, baseUrl);
       eventsManager.addEventListener(
         link,
@@ -3822,54 +3822,37 @@ const handleNew = () => {
         false,
       );
     };
-    if (!templatesCache) {
-      getTemplates()
-        .then((allTemplates) => {
-          templatesCache = allTemplates;
-          loadingText?.remove();
-          multifileLoadingText?.remove();
-          allTemplates
-            .filter((t) => !t.files?.length)
-            .forEach((template, id) => {
-              const link = createLink(template, starterTemplatesList)!;
-              addTemplateToIndex({ id: String(id), ...template });
-              eventsManager.addEventListener(
-                link,
-                'click',
-                (event) => {
-                  event.preventDefault();
-                  loadStarterTemplate(template.name, /* checkSaved= */ false);
-                },
-                false,
-              );
-            });
-          allTemplates
-            .filter((t) => t.files?.length)
-            .forEach((template, id) => {
-              const link = createLink(template, multifileTemplatesList)!;
-              addTemplateToIndex({ id: String(id), ...template });
-              eventsManager.addEventListener(
-                link,
-                'click',
-                (event) => {
-                  event.preventDefault();
-                  loadStarterTemplate(template.name, /* checkSaved= */ false);
-                },
-                false,
-              );
-            });
-        })
-        .catch(() => {
-          loadingText?.remove();
-          multifileLoadingText?.remove();
-          notifications.error(
-            window.deps.translateString(
-              'core.error.failedToLoadTemplates',
-              'Failed loading starter templates',
-            ),
+    getTemplates()
+      .then((allTemplates) => {
+        loadingText?.remove();
+        multifileLoadingText?.remove();
+        allTemplates.forEach((template, id) => {
+          const link = createLink(
+            { id: String(id), ...template },
+            template.files?.length ? multifileTemplatesList : starterTemplatesList,
+          )!;
+          addTemplateToIndex({ id: String(id), ...template });
+          eventsManager.addEventListener(
+            link,
+            'click',
+            (event) => {
+              event.preventDefault();
+              loadStarterTemplate(template.name, /* checkSaved= */ false);
+            },
+            false,
           );
         });
-    }
+      })
+      .catch(() => {
+        loadingText?.remove();
+        multifileLoadingText?.remove();
+        notifications.error(
+          window.deps.translateString(
+            'core.error.failedToLoadTemplates',
+            'Failed loading starter templates',
+          ),
+        );
+      });
     loadUserTemplates();
     requestAnimationFrame(() => UI.getStarterTemplatesTab(templatesContainer)?.click());
     modal.show(templatesContainer, { isAsync: true, size: 'large-fixed' });
diff --git a/src/livecodes/templates/multifile/javascript.ts b/src/livecodes/templates/multifile/javascript.ts
index cbe713e3ab..6ba51f2bba 100644
--- a/src/livecodes/templates/multifile/javascript.ts
+++ b/src/livecodes/templates/multifile/javascript.ts
@@ -4,6 +4,7 @@ export const javascript: Template = {
   name: 'multifile-javascript',
   title: window.deps.translateString('templates.multifile.javascript', 'JavaScript Template'),
   thumbnail: 'assets/templates/javascript.svg',
+  aliases: ['multifile-js'],
   mainFile: 'index.html',
   activeEditor: 'src/main.js',
   files: [
diff --git a/src/livecodes/templates/multifile/typescript.ts b/src/livecodes/templates/multifile/typescript.ts
index 6e7f6164b0..ccddd886ba 100644
--- a/src/livecodes/templates/multifile/typescript.ts
+++ b/src/livecodes/templates/multifile/typescript.ts
@@ -4,6 +4,7 @@ export const typescript: Template = {
   name: 'multifile-typescript',
   title: window.deps.translateString('templates.multifile.typescript', 'TypeScript Template'),
   thumbnail: 'assets/templates/typescript.svg',
+  aliases: ['multifile-ts'],
   mainFile: 'index.html',
   activeEditor: 'src/main.ts',
   files: [
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 2df5855956..e1ab3f15a8 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1621,7 +1621,9 @@ export type TemplateAlias =
   | 'postgres'
   | 'pg'
   | 'pgsql'
-  | 'mzn';
+  | 'mzn'
+  | 'multifile-js'
+  | 'multifile-ts';
 
 export interface Tool {
   name: 'console' | 'compiled' | 'tests';

From 73a4ce8b402946a404fda6d7ffda21e358fe074f Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 31 Jan 2026 11:04:19 +0200
Subject: [PATCH 092/143] cache result page output

---
 .../result/multi-file-result-page.ts          | 19 ++++++++++++++++++-
 src/livecodes/result/result-page.ts           | 19 ++++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 6cdbaea6f6..d6ed6da9f6 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -31,6 +31,9 @@ import {
 } from '../utils/utils';
 import { browserJestUrl, esModuleShimsPath, spacingJsUrl } from '../vendors';
 
+let lastInput = '';
+let lastOutput = '';
+
 export const createMultiFileResultPage = async ({
   compiledFiles,
   compiledTests,
@@ -51,6 +54,19 @@ export const createMultiFileResultPage = async ({
   runTests: boolean;
   compileInfo: CompileInfo;
 }): Promise<string> => {
+  const input = JSON.stringify({
+    compiledFiles,
+    compiledTests,
+    config,
+    forExport,
+    template,
+    baseUrl,
+    runTests,
+    compileInfo,
+  });
+  if (input === lastInput && lastOutput) return lastOutput;
+  lastInput = input;
+
   const absoluteBaseUrl = getAbsoluteUrl(baseUrl);
   const testsFilename = `tests.${getRandomString()}.js`;
   // avoid mutation
@@ -599,5 +615,6 @@ window.browserJest.run().then(results => {
     dom.body.appendChild(testScript);
   }
 
-  return '<!DOCTYPE html>\n' + dom.documentElement.outerHTML;
+  lastOutput = '<!DOCTYPE html>\n' + dom.documentElement.outerHTML;
+  return lastOutput;
 };
diff --git a/src/livecodes/result/result-page.ts b/src/livecodes/result/result-page.ts
index 30d8cb65ff..f06f858126 100644
--- a/src/livecodes/result/result-page.ts
+++ b/src/livecodes/result/result-page.ts
@@ -27,6 +27,9 @@ import {
 } from '../utils';
 import { browserJestUrl, esModuleShimsPath, spacingJsUrl } from '../vendors';
 
+let lastInput = '';
+let lastOutput = '';
+
 export const createResultPage = async ({
   code,
   config,
@@ -46,6 +49,19 @@ export const createResultPage = async ({
   runTests: boolean;
   compileInfo: CompileInfo;
 }): Promise<string> => {
+  const input = JSON.stringify({
+    code,
+    config,
+    forExport,
+    template,
+    baseUrl,
+    singleFileResult,
+    runTests,
+    compileInfo,
+  });
+  if (input === lastInput && lastOutput) return lastOutput;
+  lastInput = input;
+
   const absoluteBaseUrl = getAbsoluteUrl(baseUrl);
 
   const domParser = new DOMParser();
@@ -483,7 +499,8 @@ window.browserJest.run().then(results => {
     dom.body.appendChild(testScript);
   }
 
-  return '<!DOCTYPE html>\n' + dom.documentElement.outerHTML;
+  lastOutput = '<!DOCTYPE html>\n' + dom.documentElement.outerHTML;
+  return lastOutput;
 };
 
 export const cleanResultFromDev = (result: string) => {

From 108a1b7d28f6cc5e28d15ea56a49832572dd8707 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 31 Jan 2026 21:11:02 +0200
Subject: [PATCH 093/143] fix

---
 src/livecodes/editor/monaco/monaco.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index dae937b04f..f196c8bd6b 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -48,7 +48,6 @@ let tailwindcssConfig: any;
 export const createEditor = async (options: EditorOptions): Promise<CodeEditor> => {
   const {
     container,
-    baseUrl,
     readonly,
     theme,
     editorTheme,

From 5fe1689c52edf8bded882ca4ec06a7934c09cbe7 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 31 Jan 2026 21:22:34 +0200
Subject: [PATCH 094/143] do not fail on docs broken links for now

---
 docs/docusaurus.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts
index 9acc45ced2..41af5e68c6 100644
--- a/docs/docusaurus.config.ts
+++ b/docs/docusaurus.config.ts
@@ -20,7 +20,7 @@ const config: Config = {
   tagline: 'A Code Playground That Just Works!',
   url: 'https://livecodes.io/',
   baseUrl,
-  onBrokenLinks: 'throw',
+  onBrokenLinks: 'warn',
   onBrokenMarkdownLinks: 'warn',
   favicon: 'img/favicon.ico',
   organizationName: 'LiveCodes',

From a30451faae85f18ec5ebd5b2f143df3bfbe232fb Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 31 Jan 2026 21:30:36 +0200
Subject: [PATCH 095/143] format

---
 src/livecodes/utils/utils.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/livecodes/utils/utils.ts b/src/livecodes/utils/utils.ts
index 32fb4a7b31..5b426e258d 100644
--- a/src/livecodes/utils/utils.ts
+++ b/src/livecodes/utils/utils.ts
@@ -563,10 +563,12 @@ type MustInclude<T, U extends T[]> = [T] extends [ValueOf<U>] ? U : never;
  * converts TypeScript string union to array
  * see https://stackoverflow.com/a/70694878/5054774
  */
-export const stringUnionToArray = /* @__PURE__ */
-  <T>() =>
-  <U extends NonEmptyArray<T>>(...elements: MustInclude<T, U>) =>
-    elements;
+export const stringUnionToArray =
+  /* @__PURE__ */
+
+    <T>() =>
+    <U extends NonEmptyArray<T>>(...elements: MustInclude<T, U>) =>
+      elements;
 
 export const preventFocus = /* @__PURE__ */ (container: HTMLElement) => {
   // avoid focus on tab

From f7682da1adc51432ad2a465a8b468c7fcf435aef Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 31 Jan 2026 21:41:37 +0200
Subject: [PATCH 096/143] fix img url

---
 src/livecodes/templates/multifile/jest.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/livecodes/templates/multifile/jest.ts b/src/livecodes/templates/multifile/jest.ts
index 38b105cafd..110cc1e7b5 100644
--- a/src/livecodes/templates/multifile/jest.ts
+++ b/src/livecodes/templates/multifile/jest.ts
@@ -22,7 +22,7 @@ export const jest: Template = {
   <body>
     <div class="container">
       <h1>Hello, <span id="title">World</span>!</h1>
-      <img class="logo" alt="logo" src="http://127.0.0.1:8080/livecodes/assets/templates/jest.svg" />
+      <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/jest.svg" />
       <p>You clicked <span id="counter">0</span> times.</p>
       <button id="counter-button">Click me</button>
       <p class="info">Run tests in the "Tests" panel below.</p>

From 75ca5157a9318557c271e4204d6a4cde3469f705 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 1 Feb 2026 07:05:23 +0200
Subject: [PATCH 097/143] do not replaceSFCImports in multifile projects

---
 .../languages/svelte/lang-svelte-compiler.ts  | 77 +++++--------------
 .../languages/vue/lang-vue-compiler.ts        | 27 ++++---
 2 files changed, 34 insertions(+), 70 deletions(-)

diff --git a/src/livecodes/languages/svelte/lang-svelte-compiler.ts b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
index b34bfabf61..6b5edc9dc7 100644
--- a/src/livecodes/languages/svelte/lang-svelte-compiler.ts
+++ b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
@@ -1,10 +1,5 @@
 import { compileAllBlocks } from '../../compiler/compile-blocks';
-import {
-  createImportMap,
-  getImports,
-  replaceImports,
-  replaceSFCImports,
-} from '../../compiler/import-map';
+import { createImportMap, replaceSFCImports } from '../../compiler/import-map';
 import { getCompileResult } from '../../compiler/utils';
 import type { CompilerFunction, Config, Language } from '../../models';
 import { getErrorMessage } from '../../utils/utils';
@@ -26,26 +21,29 @@ import { getFileExtension, getLanguageByAlias, getLanguageCustomSettings } from
       imports = {};
     }
     if (!code) return getCompileResult('');
+    const isMultiFile = config.files.length > 0;
 
     const isSfc = (mod: string) =>
       (mod.toLowerCase().endsWith('.svelte') && !mod.startsWith('~/')) ||
       mod.toLowerCase().startsWith('data:text/svelte');
 
-    const fullCode = await replaceSFCImports(code, {
-      config,
-      filename,
-      getLanguageByAlias,
-      getFileExtension,
-      isSfc,
-      compileSFC: async (
-        code: string,
-        { config, filename }: { config: Config; filename: string },
-      ) => {
-        const compiled = (await compileSvelteSFC(code, { config, language, filename })).code;
-        importedContent += `\n${filename}\n\n${compiled}\n`;
-        return compiled;
-      },
-    });
+    const fullCode = isMultiFile
+      ? code
+      : await replaceSFCImports(code, {
+          config,
+          filename,
+          getLanguageByAlias,
+          getFileExtension,
+          isSfc,
+          compileSFC: async (
+            code: string,
+            { config, filename }: { config: Config; filename: string },
+          ) => {
+            const compiled = (await compileSvelteSFC(code, { config, language, filename })).code;
+            importedContent += `\n${filename}\n\n${compiled}\n`;
+            return compiled;
+          },
+        });
     const processedCode = await compileAllBlocks(fullCode, config, {
       removeEnclosingTemplate: true,
     });
@@ -91,49 +89,12 @@ import { getFileExtension, getLanguageByAlias, getLanguageCustomSettings } from
         ? MAIN_FILE
         : SECONDARY_FILE;
 
-    // handle relative imports in multi-file projects
-    // Svelte compiler tries to inline svg as dataUrls from file system, resulting in not found error
-    // this workaround converts ./foo.svg to ~/foo.svg, then restores it after compilation
-    // this also works for imports like './stores.js'
-    let relativeFileImports = {};
-    if (isMultiFileProject) {
-      relativeFileImports = getImports(code)
-        .filter((mod) => mod.startsWith('.') || mod.startsWith('/'))
-        .reduce((acc, mod) => {
-          let converted = mod;
-          if (converted.startsWith('/')) converted = '.' + converted;
-          if (!converted.startsWith('./')) converted = './' + converted; // ../foo -> ./../foo
-          return {
-            ...acc,
-            [mod]: converted.replace('./', '~/'),
-          };
-        }, {});
-    }
-
-    if (Object.keys(relativeFileImports).length) {
-      code = replaceImports(code, config, { importMap: relativeFileImports });
-    }
-
     const compileResult = await compileSvelteSFC(code, {
       config,
       language: language as Language,
       filename,
     });
 
-    if (Object.keys(relativeFileImports).length) {
-      const restoredImports = Object.keys(relativeFileImports).reduce(
-        (acc, mod) => ({
-          ...acc,
-          [(relativeFileImports as any)[mod]]: mod,
-        }),
-        {},
-      );
-
-      compileResult.code = replaceImports(compileResult.code, config, {
-        importMap: restoredImports,
-      });
-    }
-
     return compileResult;
   };
 };
diff --git a/src/livecodes/languages/vue/lang-vue-compiler.ts b/src/livecodes/languages/vue/lang-vue-compiler.ts
index 46deb3fe14..849bc9eff3 100644
--- a/src/livecodes/languages/vue/lang-vue-compiler.ts
+++ b/src/livecodes/languages/vue/lang-vue-compiler.ts
@@ -38,6 +38,7 @@ import { getFileExtension, getLanguageByAlias } from '../utils';
     }
     if (!code.trim()) return;
 
+    const isMultiFile = config.files.length > 0;
     const isSfc = (mod: string) =>
       mod.toLowerCase().endsWith('.vue') || mod.toLowerCase().startsWith('data:text/vue');
     const testTs = (filename: string) =>
@@ -45,18 +46,20 @@ import { getFileExtension, getLanguageByAlias } from '../utils';
     const testJsx = (filename: string) =>
       !!(filename && /(\.|\b)[jt]sx$/.test(filename.toLowerCase()));
 
-    code = await replaceSFCImports(code, {
-      filename,
-      config,
-      getLanguageByAlias,
-      getFileExtension,
-      isSfc,
-      compileSFC: async (code, { filename, config }) => {
-        const compiled = (await compileVueSFC(code, { filename, config }))?.js || '';
-        importedContent += `\n${filename}\n\n${compiled}\n`;
-        return compiled;
-      },
-    });
+    code = isMultiFile
+      ? code
+      : await replaceSFCImports(code, {
+          filename,
+          config,
+          getLanguageByAlias,
+          getFileExtension,
+          isSfc,
+          compileSFC: async (code, { filename, config }) => {
+            const compiled = (await compileVueSFC(code, { filename, config }))?.js || '';
+            importedContent += `\n${filename}\n\n${compiled}\n`;
+            return compiled;
+          },
+        });
 
     const compiledBlocks = await compileBlocks(code, {
       config,

From a6a6dcaf394c97468563e731ef2d8ca3c1d24955 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 1 Feb 2026 07:43:14 +0200
Subject: [PATCH 098/143] fix svg use

---
 src/livecodes/result/multi-file-result-page.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index d6ed6da9f6..649524b87a 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -311,7 +311,12 @@ export const createMultiFileResultPage = async ({
       const replaceUrl = (targetFile: (typeof compiledFiles)[number]) => {
         if (targetFile.filename === file.filename) return;
         // handle svg <use href="./logo.svg#svg-logo"> which does not allow data urls
-        if (file.filename.endsWith('.svg') && targetFile.compiled.includes(`<use `)) {
+        const usePattern = /<use\s+href\s*=\s*"/g;
+        if (
+          file.filename.endsWith('.svg') &&
+          (targetFile.content?.match(new RegExp(usePattern)) ||
+            targetFile.compiled?.match(new RegExp(usePattern)))
+        ) {
           targetFile.compiled = targetFile.compiled.replace(
             new RegExp(`(['"\`])(\\.?\\/)?${file.filename}#`, 'g'),
             (_match, $1) => {

From 709290bdb1007c4f63331ed9ee87e543bcd68d97 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 1 Feb 2026 08:04:30 +0200
Subject: [PATCH 099/143] fix config with empty files

---
 src/livecodes/core.ts | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 7fa90cf14a..5a9e85738c 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -1552,8 +1552,6 @@ const getMultiFileResultPage = async ({
     });
   }
 
-  // TODO: handle modified HTML
-
   const result = await createMultiFileResultPage({
     compiledFiles,
     compiledTests,
@@ -1891,19 +1889,26 @@ const share = async (
 const updateConfig = () => {
   const newConfig = getConfig();
   editorIds.forEach((editorId) => {
-    if (editorId === 'markup' || editorId === 'style' || editorId === 'script') {
+    if (
+      (editorId === 'markup' || editorId === 'style' || editorId === 'script') &&
+      editors[editorId]
+    ) {
       newConfig[editorId] = {
         ...newConfig[editorId],
         language: getEditorLanguage(editorId) as Language,
-        content: editors[editorId]?.getValue(),
+        content: editors[editorId].getValue(),
       };
     }
   });
-  newConfig.files = newConfig.files.map((file) => ({
-    ...file,
-    language: getEditorLanguage(file.filename) as Language,
-    content: editors[file.filename]?.getValue(),
-  }));
+  newConfig.files = newConfig.files.map((file) =>
+    editors[file.filename]
+      ? {
+          ...file,
+          language: getFileLanguage(file.filename) as Language,
+          content: editors[file.filename].getValue(),
+        }
+      : file,
+  );
   setConfig(newConfig);
 };
 

From fc47415ae6872fdaab83fa13082645d2e9fe54b9 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 1 Feb 2026 08:08:28 +0200
Subject: [PATCH 100/143] format

---
 src/livecodes/utils/utils.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/livecodes/utils/utils.ts b/src/livecodes/utils/utils.ts
index 5b426e258d..353a64882a 100644
--- a/src/livecodes/utils/utils.ts
+++ b/src/livecodes/utils/utils.ts
@@ -566,6 +566,7 @@ type MustInclude<T, U extends T[]> = [T] extends [ValueOf<U>] ? U : never;
 export const stringUnionToArray =
   /* @__PURE__ */
 
+
     <T>() =>
     <U extends NonEmptyArray<T>>(...elements: MustInclude<T, U>) =>
       elements;

From 59bea01550752f7e1c52a6840043aecfd20e2b20 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 1 Feb 2026 08:30:14 +0200
Subject: [PATCH 101/143] fix tab scrollIntoView

---
 src/livecodes/UI/create-language-menus.ts | 2 +-
 src/livecodes/core.ts                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index 1d1deb83a8..806ceaf4da 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -311,7 +311,7 @@ export const createMultiFileEditorTab = ({
   getEditorTabScroller()?.insertBefore(editorSelector, scrollTo);
 
   if (isNewFile) {
-    scrollTo?.scrollIntoView({ behavior: 'smooth', inline: 'end' });
+    scrollTo?.scrollIntoView({ behavior: 'smooth', inline: 'end', block: 'end' });
     onDblClick();
   }
   if (isHidden) {
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 5a9e85738c..6000aa65b5 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -941,7 +941,7 @@ const showEditor = (editorId: EditorId | (string & {}) = 'markup', isUpdate = fa
   titles.forEach((title) => {
     if (title.dataset.editor === editorId) {
       title.classList.add('active');
-      title.scrollIntoView({ behavior: 'smooth' });
+      title.scrollIntoView({ behavior: 'smooth', block: 'end', inline: 'nearest' });
     } else {
       title.classList.remove('active');
     }

From 086839929697b25b6bb61012bf681d1554409f10 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 1 Feb 2026 13:38:03 +0200
Subject: [PATCH 102/143] select active file in params

---
 src/livecodes/config/build-config.ts |  2 +-
 src/livecodes/import/utils.ts        | 26 ++++++++++++++++----------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/livecodes/config/build-config.ts b/src/livecodes/config/build-config.ts
index 94e72dc7db..88f995f34d 100644
--- a/src/livecodes/config/build-config.ts
+++ b/src/livecodes/config/build-config.ts
@@ -221,7 +221,7 @@ export const loadParamConfig = (config: Config, params: UrlQueryParams): Partial
         ? paramsActive
         : paramsActive in editorIds // ?active=1
           ? editorIds[paramsActive]
-          : paramsConfig.activeEditor;
+          : paramsActiveEditor || paramsActive || paramsConfig.activeEditor;
 
   // ?languages=html,md,css,ts
   if (typeof params.languages === 'string') {
diff --git a/src/livecodes/import/utils.ts b/src/livecodes/import/utils.ts
index e88ec94a17..7b647c87e2 100644
--- a/src/livecodes/import/utils.ts
+++ b/src/livecodes/import/utils.ts
@@ -10,7 +10,10 @@ export interface SourceFile {
   editorId?: EditorId;
 }
 
-const prepareFiles = (config: { files?: Config['files'] }): Partial<Config> => {
+const prepareFiles = (
+  config: { files?: Config['files'] },
+  params: { [key: string]: string },
+): Partial<Config> => {
   if (!config.files?.length) return config;
   const mainFile = getMainFile(config);
   if (!mainFile || !config.files.find((f) => f.filename === mainFile)) {
@@ -24,7 +27,7 @@ const prepareFiles = (config: { files?: Config['files'] }): Partial<Config> => {
   return {
     ...(title ? { title } : {}),
     mainFile,
-    activeEditor: mainFile,
+    activeEditor: String(params.activeEditor || params.active || mainFile),
     ...config,
   };
 };
@@ -84,7 +87,7 @@ export const populateConfig = (
           ],
         };
       }, {} as Partial<Config>);
-    return prepareFiles(config);
+    return prepareFiles(config, params);
   }
 
   // external styles and scripts (e.g. github gist exported from codepen)
@@ -92,13 +95,16 @@ export const populateConfig = (
   const scriptsFile = files.find((file) => file.filename === 'scripts');
 
   if (!stylesFile && !scriptsFile) {
-    return prepareFiles({
-      files: files.map((file) => ({
-        filename: file.path || file.filename,
-        content: file.content,
-        language: file.language || (getFileLanguage(file.filename) as Language),
-      })),
-    });
+    return prepareFiles(
+      {
+        files: files.map((file) => ({
+          filename: file.path || file.filename,
+          content: file.content,
+          language: file.language || (getFileLanguage(file.filename) as Language),
+        })),
+      },
+      params,
+    );
   }
 
   // select languages from files

From 2333604ad945cb04ce5292df292e9e323018e0c6 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 3 Feb 2026 07:37:56 +0200
Subject: [PATCH 103/143] support multifile projects in broadcast

---
 server/src/broadcast/code.html | 5 ++++-
 server/src/broadcast/index.ts  | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/server/src/broadcast/code.html b/server/src/broadcast/code.html
index 54acf9b9f0..5464c5a425 100644
--- a/server/src/broadcast/code.html
+++ b/server/src/broadcast/code.html
@@ -74,7 +74,10 @@ <h1>LiveCodes Broadcast</h1>
             readonly: true,
           });
           if (config.activeEditor) {
-            const { lineNumber = 1, column = 1 } = config[config.activeEditor]?.position || {};
+            const editor = config.files?.length
+              ? config.files.find((f) => f.filename === config.activeEditor)
+              : config[config.activeEditor];
+            const { lineNumber = 1, column = 1 } = editor?.position || {};
             await playground.show(config.activeEditor, {
               line: lineNumber,
               column,
diff --git a/server/src/broadcast/index.ts b/server/src/broadcast/index.ts
index c2a30c59d2..bd3064f050 100644
--- a/server/src/broadcast/index.ts
+++ b/server/src/broadcast/index.ts
@@ -89,6 +89,7 @@ export const broadcast = ({
     if (reducedData.markup) reducedData.markup.compiled = '';
     if (reducedData.style) reducedData.style.compiled = '';
     if (reducedData.script) reducedData.script.compiled = '';
+    reducedData.files?.forEach?.((f: any) => (f.compiled = ''));
 
     channels[channel] = {
       channelToken,

From 390994c9261c3459d7a7e48da8cde7afd76646a1 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 4 Feb 2026 01:47:41 +0200
Subject: [PATCH 104/143] resolve type files for vue compiler

---
 .../languages/vue/lang-vue-compiler.ts        | 24 ++++++++++++++++++-
 .../result/multi-file-result-page.ts          |  3 ++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/livecodes/languages/vue/lang-vue-compiler.ts b/src/livecodes/languages/vue/lang-vue-compiler.ts
index 849bc9eff3..d1e73a6d8d 100644
--- a/src/livecodes/languages/vue/lang-vue-compiler.ts
+++ b/src/livecodes/languages/vue/lang-vue-compiler.ts
@@ -122,7 +122,14 @@ import { getFileExtension, getLanguageByAlias } from '../utils';
       clientCode += code;
     };
 
-    const [compiledScript, bindings] = await doCompileScript(descriptor, id, false, isTS, isJSX);
+    const [compiledScript, bindings] = await doCompileScript(
+      descriptor,
+      id,
+      false,
+      isTS,
+      isJSX,
+      config,
+    );
 
     const clientScript =
       isTS || isJSX ? await compileTypescript(compiledScript, { config }) : compiledScript;
@@ -185,6 +192,7 @@ import { getFileExtension, getLanguageByAlias } from '../utils';
     ssr: boolean,
     isTS: boolean,
     isJSX: boolean,
+    config: Config,
   ): Promise<[string, /* BindingMetadata | undefined */ any]> {
     if (descriptor.script || descriptor.scriptSetup) {
       const expressionPlugins = [];
@@ -195,6 +203,16 @@ import { getFileExtension, getLanguageByAlias } from '../utils';
         expressionPlugins.push('jsx');
       }
 
+      const findFile = (filename: string) =>
+        config.files?.find(
+          (f) =>
+            filename === f.filename ||
+            filename === f.filename + '.ts' ||
+            filename === f.filename + '.mts' ||
+            filename === f.filename + '.tsx' ||
+            filename === f.filename + '.d.ts',
+        );
+
       const compiledScript = SFCCompiler.compileScript(descriptor, {
         inlineTemplate: true,
         // ...store.sfcOptions?.script,
@@ -209,6 +227,10 @@ import { getFileExtension, getLanguageByAlias } from '../utils';
             expressionPlugins,
           },
         },
+        fs: {
+          fileExists: (file: string) => findFile(file),
+          readFile: (file: string) => findFile(file)?.content || '',
+        },
       });
       let code = compiledScript.content;
       if (compiledScript.bindings) {
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 649524b87a..62af0fb556 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -218,7 +218,8 @@ export const createMultiFileResultPage = async ({
         './' + f.filename === filename + '.mjs' ||
         './' + f.filename === filename + '.mts' ||
         './' + f.filename === filename + '.jsx' ||
-        './' + f.filename === filename + '.tsx',
+        './' + f.filename === filename + '.tsx' ||
+        './' + f.filename === filename + '.d.ts',
     );
 
   compiledFiles.forEach((file) => {

From 3822251b12ce2a7fa0502c216010ee972d32b519 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Fri, 6 Feb 2026 00:58:42 +0200
Subject: [PATCH 105/143] get types in compiler

---
 src/livecodes/compiler/compile.worker.ts  | 67 ++++++++++-------------
 src/livecodes/compiler/create-compiler.ts | 35 ++++++++++--
 src/livecodes/compiler/get-compiler.ts    |  3 +-
 src/livecodes/compiler/models.ts          |  3 +-
 src/livecodes/core.ts                     |  4 ++
 src/livecodes/types/type-loader.ts        | 13 ++++-
 6 files changed, 81 insertions(+), 44 deletions(-)

diff --git a/src/livecodes/compiler/compile.worker.ts b/src/livecodes/compiler/compile.worker.ts
index 3c899a9a0d..6520576724 100644
--- a/src/livecodes/compiler/compile.worker.ts
+++ b/src/livecodes/compiler/compile.worker.ts
@@ -127,8 +127,13 @@ const loadTypeScript = async () => {
   await loadLanguageCompiler('typescript', {} as Config, baseUrl);
 };
 
-// see https://twitter.com/hatem_hosny_/status/1790644616175235323
-let resolveFn: ((value: EditorLibrary[]) => void) | undefined;
+const loadATA = doOnce(async () => {
+  await loadTypeScript();
+  if (!worker.typescriptATA) {
+    importScripts(typescriptAtaUrl);
+  }
+});
+
 let ata: any;
 
 const getTypesFromAta = async (code: string) =>
@@ -137,47 +142,35 @@ const getTypesFromAta = async (code: string) =>
       resolve([]);
       return;
     }
-
-    // load dependencies
-    await loadTypeScript();
-    if (!worker.typescriptATA) {
-      importScripts(typescriptAtaUrl);
-    }
+    await loadATA();
     const setupTypeAcquisition = worker.typescriptATA.setupTypeAcquisition;
 
-    // setup
     const ataTypes: EditorLibrary[] = [];
-    resolveFn = resolve;
-    ata =
-      ata ||
-      setupTypeAcquisition({
-        projectName: 'Playground',
-        typescript: worker.ts,
-        logger: {
-          log: () => undefined,
-          error: () => undefined,
-          groupCollapsed: () => undefined,
-          groupEnd: () => undefined,
+    ata ??= setupTypeAcquisition({
+      projectName: 'Playground',
+      typescript: worker.ts,
+      logger: {
+        log: () => undefined,
+        error: () => undefined,
+        groupCollapsed: () => undefined,
+        groupEnd: () => undefined,
+      },
+      delegate: {
+        receivedFile: (code: string, path: string) => {
+          ataTypes.push({ content: code, filename: path });
+        },
+        progress: (_downloaded: number, _total: number) => {
+          // console.log({ _downloaded, _total });
+        },
+        started: () => {
+          // console.log('ATA start');
         },
-        delegate: {
-          receivedFile: (code: string, path: string) => {
-            ataTypes.push({ content: code, filename: path });
-          },
-          progress: (_downloaded: number, _total: number) => {
-            // console.log({ _downloaded, _total })
-          },
-          started: () => {
-            // console.log('ATA start');
-          },
-          finished: (_files: Map<string, string>) => {
-            if (typeof resolveFn === 'function') {
-              resolveFn(ataTypes);
-            }
-          },
+        finished: (_files: Map<string, string>) => {
+          resolve(ataTypes);
         },
-      });
+      },
+    });
 
-    // run ATA
     ata(code);
   });
 
diff --git a/src/livecodes/compiler/create-compiler.ts b/src/livecodes/compiler/create-compiler.ts
index e15db11ef9..a548a3b778 100644
--- a/src/livecodes/compiler/create-compiler.ts
+++ b/src/livecodes/compiler/create-compiler.ts
@@ -12,6 +12,7 @@ import type {
   CompilerFunction,
   Compilers,
   Config,
+  EditorLibrary,
   Language,
 } from '../models';
 import { getAppCDN, sandboxService } from '../services';
@@ -32,10 +33,12 @@ export const createCompiler = async ({
   config,
   baseUrl,
   eventsManager,
+  getTypes,
 }: {
   config: Config;
   baseUrl: string;
   eventsManager: any;
+  getTypes: (code: string) => Promise<EditorLibrary[]>;
 }): Promise<Compiler> => {
   let compilers: Compilers;
   let compilerSandbox: Window;
@@ -71,6 +74,8 @@ export const createCompiler = async ({
         scriptUrl: baseUrl + '{{hash:compiler-utils.js}}',
       };
       compilerSandbox.postMessage(configMessage, compilerOrigin);
+
+      sendTypesToCompiler();
     });
 
   const createLanguageCompiler =
@@ -88,7 +93,7 @@ export const createCompiler = async ({
             message.payload.language === language &&
             message.payload.content === content
           ) {
-            window.removeEventListener('message', handler);
+            eventsManager.removeEventListener(window, 'message', handler);
 
             if (message.type === 'compiled') {
               resolve(message.payload.compiled);
@@ -97,7 +102,7 @@ export const createCompiler = async ({
             }
           }
         };
-        window.addEventListener('message', handler);
+        eventsManager.addEventListener(window, 'message', handler);
 
         const compileMessage: CompilerMessage = {
           type: 'compile',
@@ -313,10 +318,10 @@ export const createCompiler = async ({
         ) {
           return;
         }
-        window.removeEventListener('message', handler);
+        eventsManager.removeEventListener(window, 'message', handler);
         resolve(message.payload.data);
       };
-      window.addEventListener('message', handler);
+      eventsManager.addEventListener(window, 'message', handler);
 
       const compileMessage: CompilerMessage = {
         type: 'ts-features',
@@ -325,6 +330,28 @@ export const createCompiler = async ({
       compilerSandbox.postMessage(compileMessage, compilerOrigin);
     });
 
+  const sendTypesToCompiler = () => {
+    const handler = async (event: CompilerMessageEvent) => {
+      const message = event.data;
+      if (
+        event.origin !== compilerOrigin ||
+        event.source !== compilerSandbox ||
+        message.from !== 'compiler' ||
+        message.type !== 'ts-features' ||
+        message.payload.feature !== 'getTypes'
+      ) {
+        return;
+      }
+      const { id, feature, data } = message.payload;
+      const compileMessage: CompilerMessage = {
+        type: 'ts-features',
+        payload: { id, feature, data: await getTypes(data) },
+      };
+      compilerSandbox.postMessage(compileMessage, compilerOrigin);
+    };
+    eventsManager.addEventListener(window, 'message', handler);
+  };
+
   await initialize();
 
   return {
diff --git a/src/livecodes/compiler/get-compiler.ts b/src/livecodes/compiler/get-compiler.ts
index f1846d2129..c2382d658f 100644
--- a/src/livecodes/compiler/get-compiler.ts
+++ b/src/livecodes/compiler/get-compiler.ts
@@ -1,4 +1,4 @@
-import type { Config, EventsManager, Language } from '../models';
+import type { Config, EditorLibrary, EventsManager, Language } from '../models';
 import { createCompiler } from './create-compiler';
 import type { Compiler, LanguageOrProcessor } from './models';
 import { getCompileResult } from './utils';
@@ -7,6 +7,7 @@ export const getCompiler = (options: {
   config: Config;
   baseUrl: string;
   eventsManager: EventsManager;
+  getTypes: (code: string) => Promise<EditorLibrary[]>;
 }): Promise<Compiler> => {
   const mode = options.config.mode;
   if (mode === 'codeblock' || mode === 'editor') {
diff --git a/src/livecodes/compiler/models.ts b/src/livecodes/compiler/models.ts
index 44d58cb06d..3360cb0b97 100644
--- a/src/livecodes/compiler/models.ts
+++ b/src/livecodes/compiler/models.ts
@@ -19,7 +19,8 @@ export type TypescriptFeatures =
   | 'ata'
   | 'initCodeMirrorTS'
   | 'changeCodeMirrorLanguage'
-  | 'addTypes';
+  | 'addTypes'
+  | 'getTypes';
 export interface CompilerMessageEvent extends MessageEvent {
   data: CompilerMessage;
 }
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 6000aa65b5..8be3196065 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -1611,6 +1611,8 @@ const reloadCompiler = async (config: Config, force = false) => {
     config,
     baseUrl,
     eventsManager,
+    getTypes: async (code: string) =>
+      typeLoader.load(code, { ...config.types, ...config.customSettings.types }, true),
   });
   setCache();
   await getResultPage({});
@@ -5919,6 +5921,8 @@ const initializePlayground = async (
     config: getConfig(),
     baseUrl,
     eventsManager,
+    getTypes: async (code: string) =>
+      typeLoader.load(code, { ...getConfig().types, ...getConfig().customSettings.types }, true),
   });
   formatter = getFormatter(getConfig(), baseUrl, isEmbed);
   customEditors = createCustomEditors({ baseUrl, eventsManager });
diff --git a/src/livecodes/types/type-loader.ts b/src/livecodes/types/type-loader.ts
index 4512190145..c6abfd63ee 100644
--- a/src/livecodes/types/type-loader.ts
+++ b/src/livecodes/types/type-loader.ts
@@ -121,6 +121,8 @@ export const createTypeLoader = (baseUrl: string) => {
     ];
   };
 
+  let isRunning = false;
+
   const load = async (
     code: string,
     configTypes: Types,
@@ -128,6 +130,12 @@ export const createTypeLoader = (baseUrl: string) => {
     forceLoad = false,
     callback?: (type: EditorLibrary) => void,
   ) => {
+    if (isRunning) {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      return load(code, configTypes, loadAll, forceLoad, callback);
+    }
+    isRunning = true;
+
     const imports = getImports(code);
 
     const codeTypes: Types = imports.reduce((accTypes, lib) => {
@@ -152,7 +160,9 @@ export const createTypeLoader = (baseUrl: string) => {
       };
     }, {} as Types);
 
-    const typesToGet = Object.keys(codeTypes).filter((key) => codeTypes[key] === '');
+    const typesToGet = Object.keys(codeTypes).filter(
+      (key) => codeTypes[key] === '' && !loadedTypes[key],
+    );
 
     // mark as loaded to avoid re-fetching
     loadedTypes = {
@@ -173,6 +183,7 @@ export const createTypeLoader = (baseUrl: string) => {
 
     const newLibs = await loadTypes({ ...codeTypes, ...fetchedTypes, ...autoloadTypes }, callback);
 
+    isRunning = false;
     return loadAll ? libs : newLibs;
   };
 

From 846e3c40930ca953b94a46441ceb0d8797a276cf Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 8 Feb 2026 01:53:41 +0200
Subject: [PATCH 106/143] enable using defineProps<TYPE> in vue

---
 .../languages/vue/lang-vue-compiler.ts        | 133 ++++++++++++++++--
 1 file changed, 125 insertions(+), 8 deletions(-)

diff --git a/src/livecodes/languages/vue/lang-vue-compiler.ts b/src/livecodes/languages/vue/lang-vue-compiler.ts
index d1e73a6d8d..47f0c76766 100644
--- a/src/livecodes/languages/vue/lang-vue-compiler.ts
+++ b/src/livecodes/languages/vue/lang-vue-compiler.ts
@@ -1,10 +1,16 @@
 import { compileAllBlocks, exportDefaultImports } from '../../compiler/compile-blocks';
 import { compileInCompiler } from '../../compiler/compile-in-compiler';
-import { createImportMap, replaceSFCImports } from '../../compiler/import-map';
-import type { LanguageOrProcessor } from '../../compiler/models';
-import type { CompilerFunction, Config } from '../../models';
+import {
+  createImportMap,
+  getImports,
+  isBare,
+  replaceImports,
+  replaceSFCImports,
+} from '../../compiler/import-map';
+import type { CompilerMessageEvent, LanguageOrProcessor } from '../../compiler/models';
+import type { CompilerFunction, Config, EditorLibrary } from '../../models';
 import { getErrorMessage, getRandomString, replaceAsync } from '../../utils/utils';
-import { getFileExtension, getLanguageByAlias } from '../utils';
+import { getFileExtension, getLanguageByAlias, getLanguageEditorId } from '../utils';
 
 // based on:
 // https://github.com/vuejs/repl/blob/main/src/transform.ts
@@ -160,7 +166,7 @@ import { getFileExtension, getLanguageByAlias } from '../utils';
     }
 
     const createAppCode =
-      filename === MAIN_FILE
+      filename === MAIN_FILE && !isMultiFile
         ? `\nimport { createApp } from 'vue';` +
           `\ncreateApp(${COMP_IDENTIFIER})` +
           `\n  .mount(document.querySelector("#livecodes-app") || document.body.appendChild(document.createElement('div')));\n`
@@ -194,7 +200,8 @@ import { getFileExtension, getLanguageByAlias } from '../utils';
     isJSX: boolean,
     config: Config,
   ): Promise<[string, /* BindingMetadata | undefined */ any]> {
-    if (descriptor.script || descriptor.scriptSetup) {
+    const script = descriptor.script || descriptor.scriptSetup;
+    if (script) {
       const expressionPlugins = [];
       if (isTS) {
         expressionPlugins.push('typescript');
@@ -203,8 +210,11 @@ import { getFileExtension, getLanguageByAlias } from '../utils';
         expressionPlugins.push('jsx');
       }
 
-      const findFile = (filename: string) =>
-        config.files?.find(
+      let types: Record<string, string> = {};
+
+      const findFile = (filename: string) => {
+        filename = filename.replace('/~~~index~~~.d.ts', '');
+        const file = config.files?.find(
           (f) =>
             filename === f.filename ||
             filename === f.filename + '.ts' ||
@@ -212,6 +222,45 @@ import { getFileExtension, getLanguageByAlias } from '../utils';
             filename === f.filename + '.tsx' ||
             filename === f.filename + '.d.ts',
         );
+        if (file) return file;
+
+        const pkgPath = // e.g. '/node_modules/pkg'
+          filename.replace('node_modules/~~/', '/~~/node_modules/').split('/~~').pop() || filename;
+
+        if (types[pkgPath]) {
+          return { filename, content: types[pkgPath] };
+        }
+
+        const packagejson = types[pkgPath + '/package.json'];
+        if (packagejson) {
+          const typesEntry = JSON.parse(packagejson).types?.replace('./', '');
+          if (typesEntry) {
+            return {
+              filename: pkgPath + '/' + typesEntry,
+              content: types[pkgPath + '/' + typesEntry],
+            };
+          }
+        }
+
+        const definitelyTyped =
+          '/node_modules/@types/' + pkgPath.replace('/node_modules/', '/') + 'index.d.ts';
+        const definitelyTypedContent = types[definitelyTyped];
+        if (definitelyTypedContent) {
+          return {
+            filename: definitelyTyped,
+            content: definitelyTypedContent,
+          };
+        }
+        return undefined;
+      };
+
+      const scriptContent: string = script.content;
+      if (hasDefinePropsWithTypes(scriptContent)) {
+        types = (await getTypes(config)).reduce(
+          (acc, t) => ({ ...acc, [t.filename]: t.content }),
+          {},
+        );
+      }
 
       const compiledScript = SFCCompiler.compileScript(descriptor, {
         inlineTemplate: true,
@@ -232,6 +281,7 @@ import { getFileExtension, getLanguageByAlias } from '../utils';
           readFile: (file: string) => findFile(file)?.content || '',
         },
       });
+
       let code = compiledScript.content;
       if (compiledScript.bindings) {
         code =
@@ -388,6 +438,40 @@ import { getFileExtension, getLanguageByAlias } from '../utils';
     return compiled;
   }
 
+  const hasDefinePropsWithTypes = (code: string) => code.match(new RegExp(/defineProps\s*</g));
+
+  async function getTypes(config: Config): Promise<EditorLibrary[]> {
+    const content = !config.files.length
+      ? config.script.content + '\n' + config.markup.content
+      : config.files.reduce(
+          (acc, file) =>
+            ['script', 'markup'].includes(getLanguageEditorId(file.language) || '')
+              ? acc + file.content + '\n'
+              : acc,
+          '',
+        );
+    const id = getRandomString();
+    const type = 'ts-features';
+    const feature = 'getTypes';
+
+    return new Promise((resolve) => {
+      const handler = async (event: CompilerMessageEvent) => {
+        const message = event.data;
+        if (
+          message.type !== type ||
+          message.payload.feature !== feature ||
+          message.payload.id !== id
+        ) {
+          return;
+        }
+        (self as any).removeEventListener('message', handler);
+        resolve(message.payload.data);
+      };
+      (self as any).addEventListener('message', handler);
+      (self as any).postMessage({ type, payload: { id, feature, data: content } });
+    });
+  }
+
   return async (code, { config, language, options }) => {
     try {
       const isMultiFileProject = Boolean(config.files.length);
@@ -399,9 +483,42 @@ import { getFileExtension, getLanguageByAlias } from '../utils';
         : isMainFile
           ? MAIN_FILE
           : SECONDARY_FILE;
+
+      // Vue compiler does not allow importing types from non-relative paths
+      // in addition, the types file lookup fails for bare imports with no file extension!
+      // this workaround converts imports from `lib` to `./node_modules/~~/lib/~~~index~~~.d.ts`, then restores it after compilation
+      let libImports: Record<string, string> = {};
+      const replaceBareImports = (code: string) => {
+        if (!hasDefinePropsWithTypes(code)) return code;
+        libImports = getImports(code)
+          .filter((mod) => isBare(mod))
+          .reduce(
+            (acc, mod) => ({
+              ...acc,
+              [mod]:
+                './node_modules/~~/' +
+                (mod.split('/').pop()?.includes('.') ? mod : mod + '/~~~index~~~.d.ts'),
+            }),
+            {},
+          );
+        if (Object.keys(libImports).length) {
+          code = replaceImports(code, config, { importMap: libImports });
+        }
+        return code;
+      };
+      code = replaceBareImports(code);
+
       const result = await compileVueSFC(code, { config, filename });
 
       if (result) {
+        if (Object.keys(libImports).length) {
+          const restoredImports = Object.keys(libImports).reduce(
+            (acc, mod) => ({ ...acc, [(libImports as any)[mod]]: mod }),
+            {},
+          );
+          result.js = replaceImports(result.js, config, { importMap: restoredImports });
+        }
+
         const { css, js } = result;
 
         const injectCSS = !css.trim()

From 7d74d1e74fbc8fd26de04a190e9eea04cbc0532f Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 8 Feb 2026 02:24:37 +0200
Subject: [PATCH 107/143] fix replaceImports

---
 src/livecodes/compiler/import-map.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/livecodes/compiler/import-map.ts b/src/livecodes/compiler/import-map.ts
index 62827d08b2..392dedc6b1 100644
--- a/src/livecodes/compiler/import-map.ts
+++ b/src/livecodes/compiler/import-map.ts
@@ -127,10 +127,15 @@ export const replaceImports = (
 ) => {
   importMap = importMap || createImportMap(code, config, { external });
 
+  // sort keys (replace `lib/internal` before `lib`)
+  const mapkeys = Object.keys(importMap);
+  mapkeys.sort((a, b) => b.localeCompare(a));
+  const mapCopy = { ...importMap };
+  importMap = mapkeys.reduce((acc, key) => ({ ...acc, [key]: mapCopy[key] }), {});
+
   const replaceFn = (pattern: RegExp) => (statement: string) => {
-    if (!importMap) {
-      return statement;
-    }
+    if (!importMap) return statement;
+
     const libName = statement
       .replace(new RegExp(pattern), '$2')
       .replace(/"/g, '')

From 4715d48b9510c6556dfccae1183cacca109f6aa7 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 10 Feb 2026 02:30:30 +0200
Subject: [PATCH 108/143] truncate long tab titles while keeping filename
 visible

---
 src/livecodes/UI/create-language-menus.ts | 37 ++++++++++++++++++-----
 src/livecodes/styles/inc-multi-file.scss  | 21 +++++++++++++
 2 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/src/livecodes/UI/create-language-menus.ts b/src/livecodes/UI/create-language-menus.ts
index 806ceaf4da..dc638a9565 100644
--- a/src/livecodes/UI/create-language-menus.ts
+++ b/src/livecodes/UI/create-language-menus.ts
@@ -202,11 +202,34 @@ export const createMultiFileEditorTab = ({
   editorSelector.addEventListener('click', () => showEditor(currentFileName));
 
   const label = document.createElement('span');
-  label.innerHTML = currentFileName;
+  setLabelText(currentFileName);
   label.title = currentFileName;
+  label.classList.add('truncate-text');
   label.addEventListener('paste', removeFormatting, false);
   editorSelector.appendChild(label);
 
+  function getLabelText() {
+    return label.innerText.trim().replaceAll('\n', '');
+  }
+
+  function setLabelText(text: string) {
+    const cleanText = text.trim().replaceAll('\n', '');
+    if (cleanText === '') {
+      label.innerText = text.replaceAll('\n', '');
+      return;
+    }
+    label.innerHTML = '';
+    const path = cleanText.split('/');
+    const fileName = path.pop() || '';
+    const folder = path.length > 0 ? path.join('/') + '/' : '';
+    const folderSpan = document.createElement('span');
+    folderSpan.innerText = folder;
+    label.appendChild(folderSpan);
+    const fileNameSpan = document.createElement('span');
+    fileNameSpan.innerText = fileName;
+    label.appendChild(fileNameSpan);
+  }
+
   if (!isMainFile && !isLocked) {
     const deleteButton = document.createElement('button');
     deleteButton.classList.add('delete-file-button');
@@ -237,18 +260,18 @@ export const createMultiFileEditorTab = ({
     label.contentEditable = 'false';
     eventAttached = false;
     if (isLocked) return;
-    label.innerText = label.innerText.trim().replaceAll('\n', '');
+    setLabelText(getLabelText());
     const success =
       isNewFile && typeof addFile === 'function'
-        ? await addFile(label.innerText)
-        : renameFile(currentFileName, label.innerText);
+        ? await addFile(getLabelText())
+        : renameFile(currentFileName, getLabelText());
     if (!success) {
       onDblClick();
       return;
     }
-    currentFileName = handleSlash(label.innerText);
+    currentFileName = handleSlash(getLabelText());
     label.title = currentFileName;
-    label.innerText = currentFileName;
+    setLabelText(currentFileName);
     label.style.maxWidth = '';
     showEditor(currentFileName);
     if (isNewFile) {
@@ -271,7 +294,7 @@ export const createMultiFileEditorTab = ({
       if (isNewFile) {
         editorSelector.remove();
       } else {
-        label.innerText = currentFileName;
+        setLabelText(currentFileName);
       }
     }
   };
diff --git a/src/livecodes/styles/inc-multi-file.scss b/src/livecodes/styles/inc-multi-file.scss
index 8e16d3be89..d88f692c90 100644
--- a/src/livecodes/styles/inc-multi-file.scss
+++ b/src/livecodes/styles/inc-multi-file.scss
@@ -32,6 +32,27 @@
       .editor-title > span {
         max-width: 13em;
       }
+
+      .truncate-text {
+        display: flex;
+        overflow: hidden;
+        white-space: nowrap;
+
+        span {
+          flex: 0 1 auto;
+          overflow: hidden;
+        }
+
+        span:nth-child(1) {
+          flex-shrink: 1;
+          text-overflow: ellipsis;
+        }
+
+        span:nth-child(2) {
+          flex: 1;
+          min-width: fit-content;
+        }
+      }
     }
 
     #add-file-button {

From 239b9b0cb16e166aaa5e7c53c1e8f85f133799a7 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 10 Feb 2026 02:32:15 +0200
Subject: [PATCH 109/143] fix type

---
 src/livecodes/core.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 95ddc951ed..353a6e2c1c 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -4604,7 +4604,8 @@ const handleEmbed = () => {
 const changeEditorSettings = (newConfig: Partial<UserConfig> | null) => {
   if (!newConfig) return;
   const shouldReload =
-    newConfig.editor !== getConfig().editor && !((newConfig.editor || '') in getActiveEditor());
+    newConfig.editor !== getConfig().editor &&
+    !((newConfig.editor || '') in (getActiveEditor() || {}));
 
   setUserConfig(newConfig);
   const updatedConfig = getConfig();

From 33ba8d7d90987e77dd2be9dac0e484a0dbefaa21 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 10 Feb 2026 22:40:36 +0200
Subject: [PATCH 110/143] fix handling content change

---
 src/livecodes/core.ts | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 353a6e2c1c..db6f43285b 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -650,7 +650,15 @@ const createEditors = async (config: Config) => {
   let isReload = false;
   if (editors) {
     isReload = true;
-    Object.values(editors).forEach((editor: CodeEditor) => editor.destroy());
+    Object.keys(editors).forEach((editorId: EditorId) => {
+      if (editorId in editors) {
+        editors[editorId].destroy();
+        delete editors[editorId];
+      }
+      if (editorLanguages && editorId in editorLanguages) delete editorLanguages[editorId];
+      const id = editorIds.indexOf(editorId);
+      if (id > -1) editorIds.splice(id, 1);
+    });
     resetEditorModeStatus();
   }
 
@@ -754,6 +762,7 @@ const createEditors = async (config: Config) => {
       editors[editorId] = editor;
       editorIds.push(editorId);
     }
+    changingContent = false;
   } else {
     const markupEditor = await createEditor(markupOptions);
     const styleEditor = await createEditor(styleOptions);
@@ -792,6 +801,8 @@ const createEditors = async (config: Config) => {
   if (isReload) {
     loadModuleTypes(editors, config, /* loadAll = */ true);
   }
+
+  handleChangeContent();
 };
 
 const reloadEditors = async (config: Config) => {
@@ -799,7 +810,6 @@ const reloadEditors = async (config: Config) => {
   await toolsPane?.console?.reloadEditor(config);
   await toolsPane?.compiled?.reloadEditor(config);
   updateCompiledCode();
-  handleChangeContent();
 };
 
 const updateEditors = async (editors: Editors, config: Config) => {
@@ -5572,7 +5582,6 @@ const basicHandlers = () => {
   handleIframeScroll();
   handleSelectEditor();
   handleChangeLanguage();
-  handleChangeContent();
   // Setup keyboard shortcuts with dependency injection
   handleKeyboardShortcuts({
     eventsManager,

From 3361b7d675489be9b7a129c71f0557f6ffd562c4 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 11 Feb 2026 02:53:04 +0200
Subject: [PATCH 111/143] add `fileLanguages` to `Config.customSettings`

---
 src/livecodes/config/utils.ts                  | 2 +-
 src/livecodes/config/validate-config.ts        | 3 ++-
 src/livecodes/core.ts                          | 8 ++++----
 src/livecodes/editor/codejar/codejar.ts        | 2 +-
 src/livecodes/editor/codemirror/codemirror.ts  | 2 +-
 src/livecodes/editor/create-editor.ts          | 2 +-
 src/livecodes/editor/fake-editor.ts            | 2 +-
 src/livecodes/editor/monaco/monaco.ts          | 2 +-
 src/livecodes/export/export-src.ts             | 2 +-
 src/livecodes/import/files.ts                  | 4 ++--
 src/livecodes/import/utils.ts                  | 4 ++--
 src/livecodes/languages/utils.ts               | 8 ++++++--
 src/livecodes/result/multi-file-result-page.ts | 2 +-
 src/livecodes/templates/multifile/solid.ts     | 2 +-
 src/sdk/models.ts                              | 1 +
 15 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/livecodes/config/utils.ts b/src/livecodes/config/utils.ts
index 97c99b8da7..f90b540b22 100644
--- a/src/livecodes/config/utils.ts
+++ b/src/livecodes/config/utils.ts
@@ -38,7 +38,7 @@ export const getValidFileName = (
   if ([':', '*', '?', '"', '<', '>', '|'].some((c) => name.includes(c))) {
     return { error: 'invalid name' };
   }
-  const language = getFileLanguage(name, config.fileLanguages);
+  const language = getFileLanguage(name, config);
   if (!language || !supportsMultiFile(language) || !languageIsEnabled(language, config as Config)) {
     return { error: 'invalid type' };
   }
diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
index 6e2321b5f9..fb546de155 100644
--- a/src/livecodes/config/validate-config.ts
+++ b/src/livecodes/config/validate-config.ts
@@ -70,7 +70,8 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
           : lang;
 
   const getEditorDefaultLanguage = (editorId: EditorId) =>
-    (isEditorId(editorId) ? defaultConfig[editorId].language : getFileLanguage(editorId)) || 'html';
+    (isEditorId(editorId) ? defaultConfig[editorId].language : getFileLanguage(editorId, config)) ||
+    'html';
 
   const validateEditorProps = (x: Editor, editorId: EditorId): Editor => ({
     language:
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index db6f43285b..33afbf6f02 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -518,7 +518,7 @@ const addFile = async (
   const config = getConfig();
   const validName = checkFileName(filename, config);
   if (!validName) return false;
-  const fileLanguage = getFileLanguage(validName, config.fileLanguages) || 'javascript';
+  const fileLanguage = getFileLanguage(validName, config) || 'javascript';
   const container = createEditorUI(validName);
   const editor = await createEditor({
     ...editorOptions,
@@ -556,7 +556,7 @@ const renameFile = (filename: string, newName: string) => {
   const validName = checkFileName(newName, config, filename);
   if (!validName) return false;
   if (filename === validName) return true;
-  const language = getFileLanguage(validName, config.fileLanguages)!;
+  const language = getFileLanguage(validName, config)!;
   setConfig({
     ...config,
     activeEditor: validName,
@@ -1207,7 +1207,7 @@ const updateCompiledCode = () => {
       getLanguageCompiler(srcLang)?.compiledCodeLanguage ||
       defaultLang[editorId] ||
       defaultLang[getLanguageSpecs(srcLang)?.editor || ''] ||
-      getFileLanguage(editorId, config.fileLanguages) ||
+      getFileLanguage(editorId, config) ||
       'html';
     return {
       language: lang,
@@ -1916,7 +1916,7 @@ const updateConfig = () => {
     editors[file.filename]
       ? {
           ...file,
-          language: getFileLanguage(file.filename) as Language,
+          language: getFileLanguage(file.filename, newConfig) as Language,
           content: editors[file.filename].getValue(),
         }
       : file,
diff --git a/src/livecodes/editor/codejar/codejar.ts b/src/livecodes/editor/codejar/codejar.ts
index 87cb86c59e..719387c2de 100644
--- a/src/livecodes/editor/codejar/codejar.ts
+++ b/src/livecodes/editor/codejar/codejar.ts
@@ -138,7 +138,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   const getEditorId = () => editorId;
   const setEditorId = (filename: string, lang?: Language) => {
     editorId = filename;
-    const newLang = lang || getFileLanguage(filename);
+    const newLang = lang || getFileLanguage(filename, {});
     if (newLang && newLang !== language) {
       setLanguage(newLang);
     }
diff --git a/src/livecodes/editor/codemirror/codemirror.ts b/src/livecodes/editor/codemirror/codemirror.ts
index d77f83d8ac..24fcecc299 100644
--- a/src/livecodes/editor/codemirror/codemirror.ts
+++ b/src/livecodes/editor/codemirror/codemirror.ts
@@ -306,7 +306,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   const getEditorId = () => editorId;
   const setEditorId = (filename: string, lang?: Language) => {
     editorId = filename;
-    const newLang = lang || getFileLanguage(filename);
+    const newLang = lang || getFileLanguage(filename, {});
     if (newLang && newLang !== language) {
       setLanguage(newLang);
     }
diff --git a/src/livecodes/editor/create-editor.ts b/src/livecodes/editor/create-editor.ts
index e7e680c0c1..85dffde055 100644
--- a/src/livecodes/editor/create-editor.ts
+++ b/src/livecodes/editor/create-editor.ts
@@ -32,7 +32,7 @@ const selectEditor = (options: EditorOptions & { activeEditor?: Config['activeEd
   const { editor, mode, editorId, activeEditor, isLite, isHeadless } = options;
   const auto = isMobile() ? 'codemirror' : 'monaco';
   return (
-    (getFileLanguage(editorId) === 'binary'
+    (getFileLanguage(editorId, {}) === 'binary'
       ? 'binary'
       : isHeadless
         ? 'fake'
diff --git a/src/livecodes/editor/fake-editor.ts b/src/livecodes/editor/fake-editor.ts
index bcc47e9712..862a6ffbd4 100644
--- a/src/livecodes/editor/fake-editor.ts
+++ b/src/livecodes/editor/fake-editor.ts
@@ -18,7 +18,7 @@ export const createFakeEditor = (options: EditorOptions): CodeEditor => {
     getEditorId: () => editorId,
     setEditorId: (fileName) => {
       editorId = fileName;
-      language = getFileLanguage(fileName) || language;
+      language = getFileLanguage(fileName, {}) || language;
     },
     focus: () => undefined,
     getPosition: () => ({ lineNumber: 1, column: 1 }),
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 429dab5614..e878a176fd 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -358,7 +358,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   const getEditorId = () => editorId;
   const setEditorId = (filename: string, lang?: Language) => {
     editorId = filename;
-    language = lang || getFileLanguage(filename) || language;
+    language = lang || getFileLanguage(filename, {}) || language;
     setModel(editor, editor.getValue(), language);
   };
   const getValue = () => editor.getValue();
diff --git a/src/livecodes/export/export-src.ts b/src/livecodes/export/export-src.ts
index b20dbef67e..4159d01a91 100644
--- a/src/livecodes/export/export-src.ts
+++ b/src/livecodes/export/export-src.ts
@@ -23,7 +23,7 @@ export const exportSrc = async (
   const files = getFilesFromConfig(config, deps);
   (Object.keys(files) as EditorId[]).forEach((filename) => {
     const content = files[filename]?.content || '';
-    if (getFileLanguage(filename) === 'binary') {
+    if (getFileLanguage(filename, config) === 'binary') {
       zip.file(filename, content.split('base64,')[1] || '', { base64: true });
     } else {
       zip.file(filename, content);
diff --git a/src/livecodes/import/files.ts b/src/livecodes/import/files.ts
index 102bb9a352..2cd87c9f19 100644
--- a/src/livecodes/import/files.ts
+++ b/src/livecodes/import/files.ts
@@ -35,7 +35,7 @@ export const filterFiles = <T extends LocalFile>(files: T[]) => {
       !file.filename.endsWith('-lock.json') &&
       !file.filename.endsWith('.zip') &&
       (!file.size || file.size <= maxSizeAllowed) &&
-      getFileLanguage(file.filename) != null,
+      getFileLanguage(file.filename, {}) != null,
   );
   localFiles.sort((a, b) => {
     if (a.filename.endsWith('.md')) return 1;
@@ -220,7 +220,7 @@ export const getLocalFiles = async (
         resolve(content);
       };
       reader.onerror = () => reject(reader.error);
-      if (getFileLanguage(file.name) === 'binary') {
+      if (getFileLanguage(file.name, {}) === 'binary') {
         reader.readAsDataURL(file);
       } else {
         reader.readAsText(file);
diff --git a/src/livecodes/import/utils.ts b/src/livecodes/import/utils.ts
index 7b647c87e2..140c6d77eb 100644
--- a/src/livecodes/import/utils.ts
+++ b/src/livecodes/import/utils.ts
@@ -74,7 +74,7 @@ export const populateConfig = (
       .reduce((output: Partial<Config>, filename: string) => {
         const file = files.find((file) => file.filename === filename);
         if (!file) return output;
-        const language = getFileLanguage(file.filename) as Language;
+        const language = getFileLanguage(file.filename, {}) as Language;
         return {
           ...output,
           files: [
@@ -100,7 +100,7 @@ export const populateConfig = (
         files: files.map((file) => ({
           filename: file.path || file.filename,
           content: file.content,
-          language: file.language || (getFileLanguage(file.filename) as Language),
+          language: file.language || (getFileLanguage(file.filename, {}) as Language),
         })),
       },
       params,
diff --git a/src/livecodes/languages/utils.ts b/src/livecodes/languages/utils.ts
index 5f70659a49..10a65816eb 100644
--- a/src/livecodes/languages/utils.ts
+++ b/src/livecodes/languages/utils.ts
@@ -23,9 +23,13 @@ export const getFileExtension = /* @__PURE__ */ (filename: string) => {
   return extension;
 };
 
-export const getFileLanguage = (filename: string, fileLanguages: Record<string, string> = {}) => {
+export const getFileLanguage = (filename: string, config: Partial<Config>) => {
   const extension = getFileExtension(filename);
-  return getLanguageByAlias(fileLanguages[extension] || extension);
+  const fileLanguages: Config['fileLanguages'] = {
+    ...config.fileLanguages,
+    ...config.customSettings?.fileLanguages,
+  };
+  return getLanguageByAlias(fileLanguages[extension as Language] || extension);
 };
 
 export const supportsMultiFile = (language: Language) =>
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 62af0fb556..9287b45d45 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -307,7 +307,7 @@ export const createMultiFileResultPage = async ({
     // replace relative URL access (e.g. img.src="./logo.svg") or fetching files (e.g. fetch("./data.json"))
     // note that the URLs should be relative to the main file (e.g. index.html)
     // do that only for static files (binary, json, text, html), other files are handled later
-    if (['binary', 'json', 'text', 'html'].includes(getFileLanguage(file.filename) || '')) {
+    if (['binary', 'json', 'text', 'html'].includes(getFileLanguage(file.filename, config) || '')) {
       let dataUrl: string | undefined; // cache data url
       const replaceUrl = (targetFile: (typeof compiledFiles)[number]) => {
         if (targetFile.filename === file.filename) return;
diff --git a/src/livecodes/templates/multifile/solid.ts b/src/livecodes/templates/multifile/solid.ts
index 15b2ca8d40..f0d2853603 100644
--- a/src/livecodes/templates/multifile/solid.ts
+++ b/src/livecodes/templates/multifile/solid.ts
@@ -6,7 +6,7 @@ export const solid: Template = {
   thumbnail: 'assets/templates/solid.svg',
   mainFile: 'index.html',
   activeEditor: 'src/App.tsx',
-  fileLanguages: { jsx: 'solid', tsx: 'solid.tsx' },
+  customSettings: { fileLanguages: { jsx: 'solid', tsx: 'solid.tsx' } },
   files: [
     {
       filename: 'index.html',
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index bfad353f97..920e948ae7 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -2042,6 +2042,7 @@ export type CustomSettings = Partial<
     convertCommonjs: boolean;
     defaultCDN: CDN;
     types: Types;
+    fileLanguages: Config['fileLanguages'];
   }
 >;
 

From 6b5c2ba01db9422eef992226c8514dcd5e04d3ca Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 11 Feb 2026 18:52:00 +0200
Subject: [PATCH 112/143] set `files` & `fileLanguages` in params

---
 .../config/__tests__/build-config.spec.ts     | 25 +++++++++++++
 src/livecodes/config/build-config.ts          | 36 ++++++++++++++++++-
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/src/livecodes/config/__tests__/build-config.spec.ts b/src/livecodes/config/__tests__/build-config.spec.ts
index fbe4957839..0e238c6775 100644
--- a/src/livecodes/config/__tests__/build-config.spec.ts
+++ b/src/livecodes/config/__tests__/build-config.spec.ts
@@ -513,4 +513,29 @@ describe('loadParamConfig', () => {
     expect(output.markup?.hidden).toEqual(true);
     expect(output.script?.title).toEqual('App.jsx');
   });
+
+  test('?files', () => {
+    const output: Partial<Config> = loadParamConfig(defaultConfig, {
+      files: true,
+    });
+    expect(output.files).toEqual([{ filename: 'index.html', language: 'html', content: '' }]);
+  });
+
+  test('?files=index.html,style.css,script.js', () => {
+    const output: Partial<Config> = loadParamConfig(defaultConfig, {
+      files: 'index.html,style.css,script.js',
+    });
+    expect(output.files).toEqual([
+      { filename: 'index.html', language: 'html', content: '' },
+      { filename: 'style.css', language: 'css', content: '' },
+      { filename: 'script.js', language: 'javascript', content: '' },
+    ]);
+  });
+
+  test('?fileLanguages=jsx:solid,tsx:solid.tsx', () => {
+    const output: Partial<Config> = loadParamConfig(defaultConfig, {
+      fileLanguages: 'jsx:solid,tsx:solid.tsx',
+    });
+    expect(output.fileLanguages).toEqual({ jsx: 'solid', tsx: 'solid.tsx' });
+  });
 });
diff --git a/src/livecodes/config/build-config.ts b/src/livecodes/config/build-config.ts
index 88f995f34d..f201408886 100644
--- a/src/livecodes/config/build-config.ts
+++ b/src/livecodes/config/build-config.ts
@@ -1,4 +1,4 @@
-import { getLanguageByAlias, getLanguageEditorId } from '../languages';
+import { getFileLanguage, getLanguageByAlias, getLanguageEditorId } from '../languages';
 import type {
   Config,
   EditorId,
@@ -159,6 +159,7 @@ export const loadParamConfig = (config: Config, params: UrlQueryParams): Partial
   // ?console
   // ?tests=full
   // ?lite
+  // ?files
 
   // initialize paramsConfig with defaultConfig keys and params values
   const paramsConfig = ([...Object.keys(defaultConfig)] as Array<keyof Config>)
@@ -172,6 +173,39 @@ export const loadParamConfig = (config: Config, params: UrlQueryParams): Partial
     );
   // populate params config from query string params
 
+  // ?fileLanguages=jsx:solid,tsx:solid.tsx
+  if (paramsConfig.fileLanguages) {
+    paramsConfig.fileLanguages = (paramsConfig.fileLanguages as string)
+      .trim()
+      .split(',')
+      .reduce((acc, l) => {
+        const [extension, alias] = l.trim().split(':');
+        const language = getLanguageByAlias(alias);
+        if (!language) return acc;
+        return {
+          ...acc,
+          [extension]: getLanguageByAlias(language),
+        };
+      }, {});
+  }
+
+  // ?files
+  // ?files=index.html,style.css,script.js
+  if (paramsConfig.files) {
+    if (typeof paramsConfig.files === 'string') {
+      paramsConfig.files = (paramsConfig.files as string)
+        .trim()
+        .split(',')
+        .map((f) => ({
+          filename: f.trim(),
+          content: '',
+          language: getFileLanguage(f.trim(), paramsConfig) || 'javascript',
+        }));
+    } else {
+      paramsConfig.files = [{ filename: 'index.html', language: 'html', content: '' }];
+    }
+  }
+
   // ?html=hi&scss&ts
   (Object.keys(params) as Array<keyof UrlQueryParams>).forEach((key) => {
     const language = getLanguageByAlias(key);

From 7be74f8f468efb670497f66a359af6a75eab0cb5 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 11 Feb 2026 20:13:19 +0200
Subject: [PATCH 113/143] enable Vue to defineProps from types in .d.ts files

---
 src/livecodes/compiler/create-compiler.ts        |  1 +
 src/livecodes/languages/vue/lang-vue-compiler.ts | 12 ++++++++++++
 2 files changed, 13 insertions(+)

diff --git a/src/livecodes/compiler/create-compiler.ts b/src/livecodes/compiler/create-compiler.ts
index a548a3b778..004fc6e7a5 100644
--- a/src/livecodes/compiler/create-compiler.ts
+++ b/src/livecodes/compiler/create-compiler.ts
@@ -198,6 +198,7 @@ export const createCompiler = async ({
 
     if (
       !options?.forceCompile &&
+      language !== 'vue' && // Vue SFCs can defineProps from types in other files
       cache[filename]?.language === language &&
       cache[filename]?.content === content &&
       cache[filename]?.processors === enabledProcessors &&
diff --git a/src/livecodes/languages/vue/lang-vue-compiler.ts b/src/livecodes/languages/vue/lang-vue-compiler.ts
index 47f0c76766..d4d28f7e9a 100644
--- a/src/livecodes/languages/vue/lang-vue-compiler.ts
+++ b/src/livecodes/languages/vue/lang-vue-compiler.ts
@@ -508,6 +508,15 @@ import { getFileExtension, getLanguageByAlias, getLanguageEditorId } from '../ut
       };
       code = replaceBareImports(code);
 
+      const dtsSeparator = '\n\n<!---------- livecodes type declarations ---------->\n';
+      const dts = config.files
+        .filter((f) => f.filename.endsWith('.d.ts'))
+        .map((f) => f.content)
+        .join('\n\n');
+      if (dts) {
+        code += `${dtsSeparator}<script lang="ts">${dts}</script>`;
+      }
+
       const result = await compileVueSFC(code, { config, filename });
 
       if (result) {
@@ -518,6 +527,9 @@ import { getFileExtension, getLanguageByAlias, getLanguageEditorId } from '../ut
           );
           result.js = replaceImports(result.js, config, { importMap: restoredImports });
         }
+        if (dts) {
+          result.js = result.js.split(dtsSeparator)[0];
+        }
 
         const { css, js } = result;
 

From 80216974286ddcdcde500686b62aab65cec82f42 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 11 Feb 2026 22:18:47 +0200
Subject: [PATCH 114/143] allow using `replaceSFCImports` in multifile projects

---
 src/livecodes/compiler/import-map.ts          |  4 ++-
 .../languages/svelte/lang-svelte-compiler.ts  | 33 +++++++++----------
 .../languages/vue/lang-vue-compiler.ts        | 26 +++++++--------
 3 files changed, 30 insertions(+), 33 deletions(-)

diff --git a/src/livecodes/compiler/import-map.ts b/src/livecodes/compiler/import-map.ts
index 392dedc6b1..285cb2f961 100644
--- a/src/livecodes/compiler/import-map.ts
+++ b/src/livecodes/compiler/import-map.ts
@@ -195,10 +195,12 @@ export const replaceSFCImports = async (
     external?: string;
   },
 ) => {
+  const isMultiFile = config.files.length > 0;
+  const exclude = (mod: string) => isMultiFile && (mod.startsWith('.') || mod.startsWith('/'));
   const isExtensionless = (mod: string) =>
     mod.startsWith('.') && !mod.split('/')[mod.split('/').length - 1].includes('.');
   const sfcImports = getImports(code).filter(
-    (mod) => isSfc(mod) || isExtensionless(mod) || mod.startsWith('.'),
+    (mod) => !exclude(mod) && (isSfc(mod) || isExtensionless(mod) || mod.startsWith('.')),
   );
   const projectImportMap = {
     ...config.imports,
diff --git a/src/livecodes/languages/svelte/lang-svelte-compiler.ts b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
index 6b5edc9dc7..3d718295bc 100644
--- a/src/livecodes/languages/svelte/lang-svelte-compiler.ts
+++ b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
@@ -21,29 +21,26 @@ import { getFileExtension, getLanguageByAlias, getLanguageCustomSettings } from
       imports = {};
     }
     if (!code) return getCompileResult('');
-    const isMultiFile = config.files.length > 0;
 
     const isSfc = (mod: string) =>
       (mod.toLowerCase().endsWith('.svelte') && !mod.startsWith('~/')) ||
       mod.toLowerCase().startsWith('data:text/svelte');
 
-    const fullCode = isMultiFile
-      ? code
-      : await replaceSFCImports(code, {
-          config,
-          filename,
-          getLanguageByAlias,
-          getFileExtension,
-          isSfc,
-          compileSFC: async (
-            code: string,
-            { config, filename }: { config: Config; filename: string },
-          ) => {
-            const compiled = (await compileSvelteSFC(code, { config, language, filename })).code;
-            importedContent += `\n${filename}\n\n${compiled}\n`;
-            return compiled;
-          },
-        });
+    const fullCode = await replaceSFCImports(code, {
+      config,
+      filename,
+      getLanguageByAlias,
+      getFileExtension,
+      isSfc,
+      compileSFC: async (
+        code: string,
+        { config, filename }: { config: Config; filename: string },
+      ) => {
+        const compiled = (await compileSvelteSFC(code, { config, language, filename })).code;
+        importedContent += `\n${filename}\n\n${compiled}\n`;
+        return compiled;
+      },
+    });
     const processedCode = await compileAllBlocks(fullCode, config, {
       removeEnclosingTemplate: true,
     });
diff --git a/src/livecodes/languages/vue/lang-vue-compiler.ts b/src/livecodes/languages/vue/lang-vue-compiler.ts
index d4d28f7e9a..56f20b7cc3 100644
--- a/src/livecodes/languages/vue/lang-vue-compiler.ts
+++ b/src/livecodes/languages/vue/lang-vue-compiler.ts
@@ -52,20 +52,18 @@ import { getFileExtension, getLanguageByAlias, getLanguageEditorId } from '../ut
     const testJsx = (filename: string) =>
       !!(filename && /(\.|\b)[jt]sx$/.test(filename.toLowerCase()));
 
-    code = isMultiFile
-      ? code
-      : await replaceSFCImports(code, {
-          filename,
-          config,
-          getLanguageByAlias,
-          getFileExtension,
-          isSfc,
-          compileSFC: async (code, { filename, config }) => {
-            const compiled = (await compileVueSFC(code, { filename, config }))?.js || '';
-            importedContent += `\n${filename}\n\n${compiled}\n`;
-            return compiled;
-          },
-        });
+    code = await replaceSFCImports(code, {
+      filename,
+      config,
+      getLanguageByAlias,
+      getFileExtension,
+      isSfc,
+      compileSFC: async (code, { filename, config }) => {
+        const compiled = (await compileVueSFC(code, { filename, config }))?.js || '';
+        importedContent += `\n${filename}\n\n${compiled}\n`;
+        return compiled;
+      },
+    });
 
     const compiledBlocks = await compileBlocks(code, {
       config,

From 42d55487077deae2984a9a8e4554675338bb1c10 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 12 Feb 2026 02:26:54 +0200
Subject: [PATCH 115/143] fix applyConfig

---
 src/livecodes/config/validate-config.ts | 15 ++++-----------
 src/livecodes/core.ts                   | 20 +++++++++++++-------
 src/livecodes/languages/utils.ts        |  2 +-
 3 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/livecodes/config/validate-config.ts b/src/livecodes/config/validate-config.ts
index fb546de155..077237afc5 100644
--- a/src/livecodes/config/validate-config.ts
+++ b/src/livecodes/config/validate-config.ts
@@ -1,9 +1,4 @@
-import {
-  getFileExtension,
-  getFileLanguage,
-  getLanguageByAlias,
-  getLanguageEditorId,
-} from '../languages';
+import { getFileLanguage, getLanguageByAlias, getLanguageEditorId } from '../languages';
 import type {
   Config,
   Editor,
@@ -107,11 +102,9 @@ export const validateConfig = (config: Partial<Config>): Partial<Config> => {
           })(),
           content: is(x.content, 'string') ? x.content ?? '' : '',
           language:
-            getLanguageByAlias(
-              x.language ||
-                (validFileLanguages as any)[getFileExtension(x.filename)] ||
-                getFileExtension(x.filename),
-            ) || 'html',
+            getLanguageByAlias(x.language) ||
+            getFileLanguage(x.filename, { ...config, fileLanguages: validFileLanguages }) ||
+            'text',
           ...(is(x.hidden, 'boolean') ? { hidden: x.hidden } : {}),
           ...(is(x.position, 'object') ? { position: x.position } : {}),
           ...(is(x.foldedLines, 'array', 'object') && x.foldedLines?.every(isFoldedLines)
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 33afbf6f02..870cf52a38 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -754,7 +754,7 @@ const createEditors = async (config: Config) => {
         ...baseOptions,
         container,
         editorId,
-        language: file.language!,
+        language: file.language || getFileLanguage(file.filename, config) || 'text',
         value: file.content || '',
       };
       const editor = await createEditor(editorOptions);
@@ -2072,15 +2072,18 @@ const applyConfig = async (newConfig: Partial<Config>, reload = false, oldConfig
     }
     return false;
   })();
-  if ('configureTailwindcss' in editors.markup) {
+  const markupEditor = oldConfig?.files.length
+    ? editors[getMainFile(oldConfig) || 'index.html']
+    : editors.markup;
+  if (markupEditor && 'configureTailwindcss' in markupEditor) {
     if (newConfig.processors?.includes('tailwindcss')) {
-      editors.markup.configureTailwindcss?.(true);
+      markupEditor.configureTailwindcss?.(true);
     }
     if (
       currentConfig.processors?.includes('tailwindcss') &&
       !newConfig.processors?.includes('tailwindcss')
     ) {
-      editors.markup.configureTailwindcss?.(false);
+      markupEditor.configureTailwindcss?.(false);
       shouldReloadEditors = true;
     }
   }
@@ -5986,6 +5989,7 @@ const createApi = (): API => {
   const apiSetConfig = async (newConfig: Partial<SDKConfig>): Promise<Config> => {
     const currentConfig = getConfig();
     const newAppConfig = buildConfig({ ...currentConfig, ...(newConfig as Partial<Config>) });
+
     const hasNewAppLanguage =
       newConfig.appLanguage && newConfig.appLanguage !== i18n?.getLanguage();
     const shouldRun =
@@ -6000,7 +6004,7 @@ const createApi = (): API => {
 
     if (isContentOnlyChange) {
       for (const key of ['markup', 'style', 'script'] as const) {
-        const content = (newConfig as Partial<Config>)[key]?.content;
+        const content = (newAppConfig as Partial<Config>)[key]?.content;
         if (content != null) {
           editors[key].setValue(content);
         }
@@ -6009,13 +6013,15 @@ const createApi = (): API => {
     }
 
     if (hasNewAppLanguage) {
-      changeAppLanguage(newConfig.appLanguage!);
+      changeAppLanguage(newAppConfig.appLanguage!);
       return newAppConfig;
     }
+
     if (shouldReloadCompiler) {
       await reloadCompiler(newAppConfig);
     }
-    await applyConfig(newConfig as Partial<Config>, /* reload = */ true, currentConfig);
+
+    await applyConfig(newAppConfig as Partial<Config>, /* reload = */ true, currentConfig);
     return newAppConfig;
   };
 
diff --git a/src/livecodes/languages/utils.ts b/src/livecodes/languages/utils.ts
index 10a65816eb..bc97a4b515 100644
--- a/src/livecodes/languages/utils.ts
+++ b/src/livecodes/languages/utils.ts
@@ -29,7 +29,7 @@ export const getFileLanguage = (filename: string, config: Partial<Config>) => {
     ...config.fileLanguages,
     ...config.customSettings?.fileLanguages,
   };
-  return getLanguageByAlias(fileLanguages[extension as Language] || extension);
+  return getLanguageByAlias(fileLanguages[extension as Language]) || getLanguageByAlias(extension);
 };
 
 export const supportsMultiFile = (language: Language) =>

From a1a0405388b34c6974dbc2cb1508163c3a86e17c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 12 Feb 2026 05:41:06 +0200
Subject: [PATCH 116/143] hide export to codepen & jsfiddle in multifile
 projects

---
 src/livecodes/styles/inc-multi-file.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/livecodes/styles/inc-multi-file.scss b/src/livecodes/styles/inc-multi-file.scss
index d88f692c90..0b048203dd 100644
--- a/src/livecodes/styles/inc-multi-file.scss
+++ b/src/livecodes/styles/inc-multi-file.scss
@@ -130,8 +130,12 @@
     display: none;
   }
 
-  #app-menu-project li:has(#external-resources-link) {
-    display: none;
+  #app-menu-project {
+    li:has(> #external-resources-link),
+    li:has(> #export-codepen),
+    li:has(> #export-jsfiddle) {
+      display: none;
+    }
   }
 
   .binary-file-editor {

From 6373f491fd23cb172a103ad1e54b99770e5f5d6d Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 12 Feb 2026 18:02:21 +0200
Subject: [PATCH 117/143] update `createIframe` for multifile projects

---
 src/livecodes/core.ts | 41 +++++++++++++++++++++++++++++------------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 870cf52a38..510dbcac48 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -316,19 +316,24 @@ const createIframe = (container: HTMLElement, result = '', service = sandboxServ
     //   result = '';
     // }
 
+    const config = getConfig();
+    const isMultiFile = config.files.length > 0;
     const scriptLang = getEditorLanguage('script') || 'javascript';
-    const compilers = getAllCompilers(languages, getConfig(), baseUrl);
-    const editorsText = `
-      ${getConfig().markup.hiddenContent || ''}
-      ${getConfig().markup.content}
-      ${getConfig().style.hiddenContent || ''}
-      ${getConfig().style.content}
-      ${getConfig().script.hiddenContent || ''}
-      ${getConfig().script.content}
+    const compilers = getAllCompilers(languages, config, baseUrl);
+    const editorsText = isMultiFile
+      ? config.files.map((f) => f.content).join('\n')
+      : `
+      ${config.markup.hiddenContent || ''}
+      ${config.markup.content}
+      ${config.style.hiddenContent || ''}
+      ${config.style.content}
+      ${config.script.hiddenContent || ''}
+      ${config.script.content}
       `;
     const iframeIsPlaced = iframe.parentElement === container;
     const styleOnlyUpdate = iframeIsPlaced && getCache().styleOnlyUpdate;
     const liveReload =
+      !isMultiFile &&
       iframeIsPlaced &&
       compilers[scriptLang]?.liveReload &&
       resultLanguages.includes(scriptLang) &&
@@ -368,10 +373,22 @@ const createIframe = (container: HTMLElement, result = '', service = sandboxServ
       });
 
       iframe.remove(); // avoid changing browser history
-      const { markup, style, script } = getConfig();
-      const query = `?markup=${markup.language}&style=${style.language}&script=${
-        script.language
-      }&isEmbed=${isEmbed}&isLoggedIn=${Boolean(authService?.isLoggedIn())}&appCDN=${getAppCDN()}`;
+      const { markup, style, script } = config;
+      const usedLanguages = [
+        ...new Set(
+          Object.keys(editorLanguages || {})
+            .filter((editorId) =>
+              isMultiFile ? !['markup', 'style', 'script'].includes(editorId) : true,
+            )
+            .map((editorId) => editorLanguages![editorId]),
+        ),
+      ];
+      const query =
+        (isMultiFile
+          ? '?'
+          : `?markup=${markup.language}&style=${style.language}&script=${script.language}&`) +
+        `languages=${usedLanguages.join(',')}&isMultiFile=${isMultiFile}&isEmbed=${isEmbed}&` +
+        `isLoggedIn=${Boolean(authService?.isLoggedIn())}&appCDN=${getAppCDN()}`;
       const scrollPosition =
         params.scrollPosition === false ||
         (iframeScrollPosition.x === 0 && iframeScrollPosition.y === 0)

From c3fca6e63bbc1bc9e640576d15a299eda2042338 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 12 Feb 2026 22:38:19 +0200
Subject: [PATCH 118/143] upgrade local typescript to v5.9.3

---
 docs/package-lock.json                   |  385 +--
 docs/package.json                        |    8 +-
 docs/src/components/HomepageFeatures.tsx |    2 +-
 docs/src/pages/index.tsx                 |    2 +-
 docs/src/theme/DocItem/Layout/index.tsx  |    2 +-
 eslint.config.mjs                        |    2 +
 package-lock.json                        | 3683 +++++++++++++++-------
 package.json                             |   49 +-
 src/livecodes/_modules.ts                |    4 +-
 storybook/package-lock.json              |   67 +-
 storybook/package.json                   |    3 +-
 tsconfig.json                            |    2 +-
 12 files changed, 2686 insertions(+), 1523 deletions(-)

diff --git a/docs/package-lock.json b/docs/package-lock.json
index b458c03814..7a583cc0e8 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -28,10 +28,10 @@
         "@types/node": "22.13.0",
         "@types/react": "19.0.10",
         "docusaurus-plugin-typedoc": "1.0.5",
-        "typedoc": "0.26.11",
-        "typedoc-plugin-markdown": "4.2.10",
-        "typedoc-plugin-missing-exports": "3.1.0",
-        "typescript": "5.5.4"
+        "typedoc": "0.28.16",
+        "typedoc-plugin-markdown": "4.10.0",
+        "typedoc-plugin-missing-exports": "4.1.2",
+        "typescript": "5.9.3"
       }
     },
     "node_modules/@algolia/autocomplete-core": {
@@ -3818,6 +3818,20 @@
         "node": ">=18.0"
       }
     },
+    "node_modules/@gerrit0/mini-shiki": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@gerrit0/mini-shiki/-/mini-shiki-3.22.0.tgz",
+      "integrity": "sha512-jMpciqEVUBKE1QwU64S4saNMzpsSza6diNCk4MWAeCxO2+LFi2FIFmL2S0VDLzEJCxuvCbU783xi8Hp/gkM5CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/engine-oniguruma": "^3.22.0",
+        "@shikijs/langs": "^3.22.0",
+        "@shikijs/themes": "^3.22.0",
+        "@shikijs/types": "^3.22.0",
+        "@shikijs/vscode-textmate": "^10.0.2"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -4080,169 +4094,6 @@
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
       "integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw=="
     },
-    "node_modules/@rspack/binding": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@rspack/binding/-/binding-1.2.5.tgz",
-      "integrity": "sha512-q9vQmGDFZyFVMULwOFL7488WNSgn4ue94R/njDLMMIPF4K0oEJP2QT02elfG4KVGv2CbP63D7vEFN4ZNreo/Rw==",
-      "optional": true,
-      "peer": true,
-      "optionalDependencies": {
-        "@rspack/binding-darwin-arm64": "1.2.5",
-        "@rspack/binding-darwin-x64": "1.2.5",
-        "@rspack/binding-linux-arm64-gnu": "1.2.5",
-        "@rspack/binding-linux-arm64-musl": "1.2.5",
-        "@rspack/binding-linux-x64-gnu": "1.2.5",
-        "@rspack/binding-linux-x64-musl": "1.2.5",
-        "@rspack/binding-win32-arm64-msvc": "1.2.5",
-        "@rspack/binding-win32-ia32-msvc": "1.2.5",
-        "@rspack/binding-win32-x64-msvc": "1.2.5"
-      }
-    },
-    "node_modules/@rspack/binding-darwin-arm64": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@rspack/binding-darwin-arm64/-/binding-darwin-arm64-1.2.5.tgz",
-      "integrity": "sha512-ou0NXMLp6RxY9Bx8P9lA8ArVjz/WAI/gSu5kKrdKKtMs6WKutl4vvP9A4HHZnISd9Tn00dlvDwNeNSUR7fjoDQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true
-    },
-    "node_modules/@rspack/binding-darwin-x64": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@rspack/binding-darwin-x64/-/binding-darwin-x64-1.2.5.tgz",
-      "integrity": "sha512-RdvH9YongQlDE9+T2Xh5D2+dyiLHx2Gz38Af1uObyBRNWjF1qbuR51hOas0f2NFUdyA03j1+HWZCbE7yZrmI3w==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true
-    },
-    "node_modules/@rspack/binding-linux-arm64-gnu": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@rspack/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.5.tgz",
-      "integrity": "sha512-jznk/CI/wN93fr8I1j3la/CAiGf8aG7ZHIpRBtT4CkNze0c5BcF3AaJVSBHVNQqgSv0qddxMt3SADpzV8rWZ6g==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true
-    },
-    "node_modules/@rspack/binding-linux-arm64-musl": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@rspack/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.5.tgz",
-      "integrity": "sha512-oYzcaJ0xjb1fWbbtPmjjPXeehExEgwJ8fEGYQ5TikB+p9oCLkAghnNjsz9evUhgjByxi+NTZ1YmUNwxRuQDY1Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true
-    },
-    "node_modules/@rspack/binding-linux-x64-gnu": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@rspack/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.5.tgz",
-      "integrity": "sha512-dzEKs8oi86Vi+TFRCPpgmfF5ANL0VmlZN45e1An7HipeI2C5B1xrz/H8V43vPy8XEvQuMmkXO6Sp82A0zlHvIA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true
-    },
-    "node_modules/@rspack/binding-linux-x64-musl": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@rspack/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.5.tgz",
-      "integrity": "sha512-4ENeVPVSD97rRRGr6kJSm4sIPf1tKJ8vlr9hJi4sSvF7eMLWipSwIVmqRXJ2riVMRjYD2einmJ9KzI8rqQ2OwA==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true
-    },
-    "node_modules/@rspack/binding-win32-arm64-msvc": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@rspack/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.5.tgz",
-      "integrity": "sha512-WUoJvX/z43MWeW1JKAQIxdvqH02oLzbaGMCzIikvniZnakQovYLPH6tCYh7qD3p7uQsm+IafFddhFxTtogC3pg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true
-    },
-    "node_modules/@rspack/binding-win32-ia32-msvc": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@rspack/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.2.5.tgz",
-      "integrity": "sha512-YzPvmt/gpiacE6aAacz4dxgEbNWwoKYPaT4WYy/oITobnAui++iCFXC4IICSmlpoA1y7O8K3Qb9jbaB/lLhbwA==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true
-    },
-    "node_modules/@rspack/binding-win32-x64-msvc": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@rspack/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.5.tgz",
-      "integrity": "sha512-QDDshfteMZiglllm7WUh/ITemFNuexwn1Yul7cHBFGQu6HqtqKNAR0kGR8J3e15MPMlinSaygVpfRE4A0KPmjQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true
-    },
-    "node_modules/@rspack/core": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/@rspack/core/-/core-1.2.5.tgz",
-      "integrity": "sha512-x/riOl05gOVGgGQFimBqS5i8XbUpBxPIKUC+tDX4hmNNkzxRaGpspZfNtcL+1HBMyYuoM6fOWGyCp2R290Uy6g==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@module-federation/runtime-tools": "0.8.4",
-        "@rspack/binding": "1.2.5",
-        "@rspack/lite-tapable": "1.0.1",
-        "caniuse-lite": "^1.0.30001616"
-      },
-      "engines": {
-        "node": ">=16.0.0"
-      },
-      "peerDependencies": {
-        "@rspack/tracing": "^1.x",
-        "@swc/helpers": ">=0.5.1"
-      },
-      "peerDependenciesMeta": {
-        "@rspack/tracing": {
-          "optional": true
-        },
-        "@swc/helpers": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@rspack/lite-tapable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@rspack/lite-tapable/-/lite-tapable-1.0.1.tgz",
@@ -4251,66 +4102,45 @@
         "node": ">=16.0.0"
       }
     },
-    "node_modules/@shikijs/core": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.29.2.tgz",
-      "integrity": "sha512-vju0lY9r27jJfOY4Z7+Rt/nIOjzJpZ3y+nYpqtUZInVoXQ/TJZcfGnNOGnKjFdVZb8qexiCuSlZRKcGfhhTTZQ==",
-      "dev": true,
-      "dependencies": {
-        "@shikijs/engine-javascript": "1.29.2",
-        "@shikijs/engine-oniguruma": "1.29.2",
-        "@shikijs/types": "1.29.2",
-        "@shikijs/vscode-textmate": "^10.0.1",
-        "@types/hast": "^3.0.4",
-        "hast-util-to-html": "^9.0.4"
-      }
-    },
-    "node_modules/@shikijs/engine-javascript": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.29.2.tgz",
-      "integrity": "sha512-iNEZv4IrLYPv64Q6k7EPpOCE/nuvGiKl7zxdq0WFuRPF5PAE9PRo2JGq/d8crLusM59BRemJ4eOqrFrC4wiQ+A==",
-      "dev": true,
-      "dependencies": {
-        "@shikijs/types": "1.29.2",
-        "@shikijs/vscode-textmate": "^10.0.1",
-        "oniguruma-to-es": "^2.2.0"
-      }
-    },
     "node_modules/@shikijs/engine-oniguruma": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.29.2.tgz",
-      "integrity": "sha512-7iiOx3SG8+g1MnlzZVDYiaeHe7Ez2Kf2HrJzdmGwkRisT7r4rak0e655AcM/tF9JG/kg5fMNYlLLKglbN7gBqA==",
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.22.0.tgz",
+      "integrity": "sha512-DyXsOG0vGtNtl7ygvabHd7Mt5EY8gCNqR9Y7Lpbbd/PbJvgWrqaKzH1JW6H6qFkuUa8aCxoiYVv8/YfFljiQxA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "1.29.2",
-        "@shikijs/vscode-textmate": "^10.0.1"
+        "@shikijs/types": "3.22.0",
+        "@shikijs/vscode-textmate": "^10.0.2"
       }
     },
     "node_modules/@shikijs/langs": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-1.29.2.tgz",
-      "integrity": "sha512-FIBA7N3LZ+223U7cJDUYd5shmciFQlYkFXlkKVaHsCPgfVLiO+e12FmQE6Tf9vuyEsFe3dIl8qGWKXgEHL9wmQ==",
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.22.0.tgz",
+      "integrity": "sha512-x/42TfhWmp6H00T6uwVrdTJGKgNdFbrEdhaDwSR5fd5zhQ1Q46bHq9EO61SCEWJR0HY7z2HNDMaBZp8JRmKiIA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "1.29.2"
+        "@shikijs/types": "3.22.0"
       }
     },
     "node_modules/@shikijs/themes": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-1.29.2.tgz",
-      "integrity": "sha512-i9TNZlsq4uoyqSbluIcZkmPL9Bfi3djVxRnofUHwvx/h6SRW3cwgBC5SML7vsDcWyukY0eCzVN980rqP6qNl9g==",
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.22.0.tgz",
+      "integrity": "sha512-o+tlOKqsr6FE4+mYJG08tfCFDS+3CG20HbldXeVoyP+cYSUxDhrFf3GPjE60U55iOkkjbpY2uC3It/eeja35/g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@shikijs/types": "1.29.2"
+        "@shikijs/types": "3.22.0"
       }
     },
     "node_modules/@shikijs/types": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.29.2.tgz",
-      "integrity": "sha512-VJjK0eIijTZf0QSTODEXCqinjBn0joAHQ+aPSBzrv4O2d/QSbsMw+ZeSRx03kV34Hy7NzUvV/7NqfYGRLrASmw==",
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.22.0.tgz",
+      "integrity": "sha512-491iAekgKDBFE67z70Ok5a8KBMsQ2IJwOWw3us/7ffQkIBCyOQfm/aNwVMBUriP02QshIfgHCBSIYAl3u2eWjg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@shikijs/vscode-textmate": "^10.0.1",
+        "@shikijs/vscode-textmate": "^10.0.2",
         "@types/hast": "^3.0.4"
       }
     },
@@ -4318,7 +4148,8 @@
       "version": "10.0.2",
       "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz",
       "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@sideway/address": {
       "version": "4.1.5",
@@ -7638,12 +7469,6 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
-    "node_modules/emoji-regex-xs": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex-xs/-/emoji-regex-xs-1.0.0.tgz",
-      "integrity": "sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==",
-      "dev": true
-    },
     "node_modules/emojilib": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/emojilib/-/emojilib-2.4.0.tgz",
@@ -9032,29 +8857,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/hast-util-to-html": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz",
-      "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==",
-      "dev": true,
-      "dependencies": {
-        "@types/hast": "^3.0.0",
-        "@types/unist": "^3.0.0",
-        "ccount": "^2.0.0",
-        "comma-separated-tokens": "^2.0.0",
-        "hast-util-whitespace": "^3.0.0",
-        "html-void-elements": "^3.0.0",
-        "mdast-util-to-hast": "^13.0.0",
-        "property-information": "^7.0.0",
-        "space-separated-tokens": "^2.0.0",
-        "stringify-entities": "^4.0.0",
-        "zwitch": "^2.0.4"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/unified"
-      }
-    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.3.tgz",
@@ -13015,17 +12817,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/oniguruma-to-es": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-2.3.0.tgz",
-      "integrity": "sha512-bwALDxriqfKGfUufKGGepCzu9x7nJQuoRoAFp4AnwehhC2crqrDIAP/uN2qdlsAvSMpeRC3+Yzhqc7hLmle5+g==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex-xs": "^1.0.0",
-        "regex": "^5.1.1",
-        "regex-recursion": "^5.1.1"
-      }
-    },
     "node_modules/open": {
       "version": "8.4.2",
       "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
@@ -15412,31 +15203,6 @@
         "@babel/runtime": "^7.8.4"
       }
     },
-    "node_modules/regex": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/regex/-/regex-5.1.1.tgz",
-      "integrity": "sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==",
-      "dev": true,
-      "dependencies": {
-        "regex-utilities": "^2.3.0"
-      }
-    },
-    "node_modules/regex-recursion": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-5.1.1.tgz",
-      "integrity": "sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==",
-      "dev": true,
-      "dependencies": {
-        "regex": "^5.1.1",
-        "regex-utilities": "^2.3.0"
-      }
-    },
-    "node_modules/regex-utilities": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz",
-      "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==",
-      "dev": true
-    },
     "node_modules/regexpu-core": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.2.0.tgz",
@@ -16282,22 +16048,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/shiki": {
-      "version": "1.29.2",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.29.2.tgz",
-      "integrity": "sha512-njXuliz/cP+67jU2hukkxCNuH1yUi4QfdZZY+sMr5PPrIyXSu5iTb/qYC4BiWWB0vZ+7TbdvYUCeL23zpwCfbg==",
-      "dev": true,
-      "dependencies": {
-        "@shikijs/core": "1.29.2",
-        "@shikijs/engine-javascript": "1.29.2",
-        "@shikijs/engine-oniguruma": "1.29.2",
-        "@shikijs/langs": "1.29.2",
-        "@shikijs/themes": "1.29.2",
-        "@shikijs/types": "1.29.2",
-        "@shikijs/vscode-textmate": "^10.0.1",
-        "@types/hast": "^3.0.4"
-      }
-    },
     "node_modules/side-channel": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
@@ -16975,46 +16725,50 @@
       }
     },
     "node_modules/typedoc": {
-      "version": "0.26.11",
-      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.26.11.tgz",
-      "integrity": "sha512-sFEgRRtrcDl2FxVP58Ze++ZK2UQAEvtvvH8rRlig1Ja3o7dDaMHmaBfvJmdGnNEFaLTpQsN8dpvZaTqJSu/Ugw==",
+      "version": "0.28.16",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.28.16.tgz",
+      "integrity": "sha512-x4xW77QC3i5DUFMBp0qjukOTnr/sSg+oEs86nB3LjDslvAmwe/PUGDWbe3GrIqt59oTqoXK5GRK9tAa0sYMiog==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
+        "@gerrit0/mini-shiki": "^3.17.0",
         "lunr": "^2.3.9",
         "markdown-it": "^14.1.0",
         "minimatch": "^9.0.5",
-        "shiki": "^1.16.2",
-        "yaml": "^2.5.1"
+        "yaml": "^2.8.1"
       },
       "bin": {
         "typedoc": "bin/typedoc"
       },
       "engines": {
-        "node": ">= 18"
+        "node": ">= 18",
+        "pnpm": ">= 10"
       },
       "peerDependencies": {
-        "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x || 5.6.x"
+        "typescript": "5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x || 5.6.x || 5.7.x || 5.8.x || 5.9.x"
       }
     },
     "node_modules/typedoc-plugin-markdown": {
-      "version": "4.2.10",
-      "resolved": "https://registry.npmjs.org/typedoc-plugin-markdown/-/typedoc-plugin-markdown-4.2.10.tgz",
-      "integrity": "sha512-PLX3pc1/7z13UJm4TDE9vo9jWGcClFUErXXtd5LdnoLjV6mynPpqZLU992DwMGFSRqJFZeKbVyqlNNeNHnk2tQ==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/typedoc-plugin-markdown/-/typedoc-plugin-markdown-4.10.0.tgz",
+      "integrity": "sha512-psrg8Rtnv4HPWCsoxId+MzEN8TVK5jeKCnTbnGAbTBqcDapR9hM41bJT/9eAyKn9C2MDG9Qjh3MkltAYuLDoXg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 18"
       },
       "peerDependencies": {
-        "typedoc": "0.26.x"
+        "typedoc": "0.28.x"
       }
     },
     "node_modules/typedoc-plugin-missing-exports": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/typedoc-plugin-missing-exports/-/typedoc-plugin-missing-exports-3.1.0.tgz",
-      "integrity": "sha512-Sogbaj+qDa21NjB3SlIw4JXSwmcl/WOjwiPNaVEcPhpNG/MiRTtpwV81cT7h1cbu9StpONFPbddYWR0KV/fTWA==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/typedoc-plugin-missing-exports/-/typedoc-plugin-missing-exports-4.1.2.tgz",
+      "integrity": "sha512-WNoeWX9+8X3E3riuYPduilUTFefl1K+Z+5bmYqNeH5qcWjtnTRMbRzGdEQ4XXn1WEO4WCIlU0vf46Ca2y/mspg==",
       "dev": true,
+      "license": "MIT",
       "peerDependencies": {
-        "typedoc": "0.26.x || 0.27.x"
+        "typedoc": "^0.28.1"
       }
     },
     "node_modules/typedoc/node_modules/brace-expansion": {
@@ -17042,9 +16796,10 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.5.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
-      "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -18037,15 +17792,19 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
     },
     "node_modules/yaml": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
-      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
+      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
       "dev": true,
+      "license": "ISC",
       "bin": {
         "yaml": "bin.mjs"
       },
       "engines": {
-        "node": ">= 14"
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
       }
     },
     "node_modules/yocto-queue": {
diff --git a/docs/package.json b/docs/package.json
index 438bd7ddd4..e708546b53 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -35,10 +35,10 @@
     "@types/node": "22.13.0",
     "@types/react": "19.0.10",
     "docusaurus-plugin-typedoc": "1.0.5",
-    "typedoc": "0.26.11",
-    "typedoc-plugin-markdown": "4.2.10",
-    "typedoc-plugin-missing-exports": "3.1.0",
-    "typescript": "5.5.4"
+    "typedoc": "0.28.16",
+    "typedoc-plugin-markdown": "4.10.0",
+    "typedoc-plugin-missing-exports": "4.1.2",
+    "typescript": "5.9.3"
   },
   "browserslist": {
     "production": [
diff --git a/docs/src/components/HomepageFeatures.tsx b/docs/src/components/HomepageFeatures.tsx
index 53f03939f1..01e89389df 100644
--- a/docs/src/components/HomepageFeatures.tsx
+++ b/docs/src/components/HomepageFeatures.tsx
@@ -3,7 +3,7 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import CodeBlock from '@theme/CodeBlock';
 
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import HomepageCarousel from './HomepageCarousel';
 import styles from './HomepageFeatures.module.css';
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
index dd21d4c655..a9259a0e6e 100644
--- a/docs/src/pages/index.tsx
+++ b/docs/src/pages/index.tsx
@@ -2,7 +2,7 @@
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { useEffect } from 'react';
 import HomepageFeatures from '../components/HomepageFeatures';
 import { loadAds } from '../custom-content';
diff --git a/docs/src/theme/DocItem/Layout/index.tsx b/docs/src/theme/DocItem/Layout/index.tsx
index 075fb94cad..6a26fed707 100644
--- a/docs/src/theme/DocItem/Layout/index.tsx
+++ b/docs/src/theme/DocItem/Layout/index.tsx
@@ -12,7 +12,7 @@ import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
 import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
 import DocVersionBadge from '@theme/DocVersionBadge';
 import DocVersionBanner from '@theme/DocVersionBanner';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import { type ReactNode } from 'react';
 
 import styles from './styles.module.css';
diff --git a/eslint.config.mjs b/eslint.config.mjs
index aab8c872fb..9d283255e7 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -29,8 +29,10 @@ export default [
       '**/coverage',
       '**/scripts',
       '**/.docusaurus',
+      '**/.cache',
       '**/.jest',
       '**/.storybook',
+      'docs/docs/api',
       'functions/vendors',
     ],
   },
diff --git a/package-lock.json b/package-lock.json
index abf71134b3..38ec59a078 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,12 +43,12 @@
         "@types/live-server": "1.2.0",
         "@types/localforage": "0.0.34",
         "@types/lz-string": "1.3.34",
-        "@types/node": "18.11.9",
+        "@types/node": "25.2.3",
         "@types/prettier": "2.1.6",
         "@types/prismjs": "1.16.3",
         "@types/react": "19.0.10",
-        "@typescript-eslint/eslint-plugin": "8.24.1",
-        "@typescript-eslint/parser": "8.24.1",
+        "@typescript-eslint/eslint-plugin": "8.55.0",
+        "@typescript-eslint/parser": "8.55.0",
         "@typescript/vfs": "1.5.3",
         "@vue/runtime-core": "3.2.45",
         "autoprefixer": "10.4.2",
@@ -62,10 +62,10 @@
         "esbuild-plugin-minify-html": "0.1.2",
         "esbuild-plugin-replace": "1.4.0",
         "eslint": "9.20.1",
-        "eslint-config-prettier": "10.0.1",
-        "eslint-plugin-import": "2.31.0",
-        "eslint-plugin-jest": "28.11.0",
-        "eslint-plugin-jsdoc": "50.6.3",
+        "eslint-config-prettier": "10.1.8",
+        "eslint-plugin-import": "2.32.0",
+        "eslint-plugin-jest": "29.13.0",
+        "eslint-plugin-jsdoc": "62.5.4",
         "eslint-plugin-prefer-arrow": "1.2.3",
         "gh-pages": "6.1.0",
         "globals": "15.15.0",
@@ -84,10 +84,10 @@
         "stylelint": "14.5.0",
         "stylelint-config-sass-guidelines": "9.0.1",
         "ts-jest": "29.1.0",
-        "tslib": "2.6.2",
-        "typedoc": "0.25.13",
-        "typedoc-plugin-missing-exports": "2.2.0",
-        "typescript": "5.4.5"
+        "tslib": "2.8.1",
+        "typedoc": "0.28.16",
+        "typedoc-plugin-missing-exports": "4.1.2",
+        "typescript": "5.9.3"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -745,17 +745,30 @@
       }
     },
     "node_modules/@es-joy/jsdoccomment": {
-      "version": "0.49.0",
-      "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.49.0.tgz",
-      "integrity": "sha512-xjZTSFgECpb9Ohuk5yMX5RhUEbfeQcuOp8IF60e+wyzWEF0M5xeSgqsfLtvPEX8BIyOX9saZqzuGPmZ8oWc+5Q==",
+      "version": "0.84.0",
+      "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.84.0.tgz",
+      "integrity": "sha512-0xew1CxOam0gV5OMjh2KjFQZsKL2bByX1+q4j3E73MpYIdyUxcZb/xQct9ccUb+ve5KGUYbCUxyPnYB7RbuP+w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "comment-parser": "1.4.1",
-        "esquery": "^1.6.0",
-        "jsdoc-type-pratt-parser": "~4.1.0"
+        "@types/estree": "^1.0.8",
+        "@typescript-eslint/types": "^8.54.0",
+        "comment-parser": "1.4.5",
+        "esquery": "^1.7.0",
+        "jsdoc-type-pratt-parser": "~7.1.1"
       },
       "engines": {
-        "node": ">=16"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      }
+    },
+    "node_modules/@es-joy/resolve.exports": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@es-joy/resolve.exports/-/resolve.exports-1.2.0.tgz",
+      "integrity": "sha512-Q9hjxWI5xBM+qW2enxfe8wDKdFWMfd0Z29k5ZJnuBqD/CasY5Zryj09aCA6owbGATWz+39p5uIdaHXpopOcG8g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/@esbuild/aix-ppc64": {
@@ -1127,25 +1140,30 @@
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
-      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
       "devOptional": true,
+      "license": "MIT",
       "dependencies": {
-        "eslint-visitor-keys": "^3.3.0"
+        "eslint-visitor-keys": "^3.4.3"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
       "peerDependencies": {
         "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
-      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
       "devOptional": true,
+      "license": "MIT",
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
@@ -1799,6 +1817,20 @@
       "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.6.1.tgz",
       "integrity": "sha512-9FqhNjKQWpQ3fGnSOCovHOm+yhhiorKEqYLAfd525jWavunDJcx8rOW6i6ozAh+FbwcYMkL7b+3j4UR/30MpoQ=="
     },
+    "node_modules/@gerrit0/mini-shiki": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@gerrit0/mini-shiki/-/mini-shiki-3.22.0.tgz",
+      "integrity": "sha512-jMpciqEVUBKE1QwU64S4saNMzpsSza6diNCk4MWAeCxO2+LFi2FIFmL2S0VDLzEJCxuvCbU783xi8Hp/gkM5CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/engine-oniguruma": "^3.22.0",
+        "@shikijs/langs": "^3.22.0",
+        "@shikijs/themes": "^3.22.0",
+        "@shikijs/types": "^3.22.0",
+        "@shikijs/vscode-textmate": "^10.0.2"
+      }
+    },
     "node_modules/@grpc/grpc-js": {
       "version": "1.8.18",
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.8.18.tgz",
@@ -3773,18 +3805,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@pkgr/core": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
-      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
-      "dev": true,
-      "engines": {
-        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/unts"
-      }
-    },
     "node_modules/@playwright/test": {
       "version": "1.32.3",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.3.tgz",
@@ -3864,12 +3884,74 @@
       "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
       "dev": true
     },
+    "node_modules/@shikijs/engine-oniguruma": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.22.0.tgz",
+      "integrity": "sha512-DyXsOG0vGtNtl7ygvabHd7Mt5EY8gCNqR9Y7Lpbbd/PbJvgWrqaKzH1JW6H6qFkuUa8aCxoiYVv8/YfFljiQxA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.22.0",
+        "@shikijs/vscode-textmate": "^10.0.2"
+      }
+    },
+    "node_modules/@shikijs/langs": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.22.0.tgz",
+      "integrity": "sha512-x/42TfhWmp6H00T6uwVrdTJGKgNdFbrEdhaDwSR5fd5zhQ1Q46bHq9EO61SCEWJR0HY7z2HNDMaBZp8JRmKiIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.22.0"
+      }
+    },
+    "node_modules/@shikijs/themes": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.22.0.tgz",
+      "integrity": "sha512-o+tlOKqsr6FE4+mYJG08tfCFDS+3CG20HbldXeVoyP+cYSUxDhrFf3GPjE60U55iOkkjbpY2uC3It/eeja35/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/types": "3.22.0"
+      }
+    },
+    "node_modules/@shikijs/types": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.22.0.tgz",
+      "integrity": "sha512-491iAekgKDBFE67z70Ok5a8KBMsQ2IJwOWw3us/7ffQkIBCyOQfm/aNwVMBUriP02QshIfgHCBSIYAl3u2eWjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4"
+      }
+    },
+    "node_modules/@shikijs/vscode-textmate": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz",
+      "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
       "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
       "dev": true
     },
+    "node_modules/@sindresorhus/base62": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/base62/-/base62-1.0.0.tgz",
+      "integrity": "sha512-TeheYy0ILzBEI/CO55CP6zJCSdSWeRtGnHy8U8dWSUH4I68iqTsy7HkMktR4xakThc9jotkPQUXT4ITdbV7cHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@sinonjs/commons": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
@@ -3983,10 +4065,11 @@
       "dev": true
     },
     "node_modules/@types/estree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-      "devOptional": true
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "devOptional": true,
+      "license": "MIT"
     },
     "node_modules/@types/glob": {
       "version": "5.0.30",
@@ -4007,6 +4090,16 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
@@ -4110,9 +4203,13 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.11.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
-      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg=="
+      "version": "25.2.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.3.tgz",
+      "integrity": "sha512-m0jEgYlYz+mDJZ2+F4v8D1AyQb+QzsNqRuI7xg1VQX/KlKS0qT9r1Mo16yo5F/MtifXFgaofIFsdFMox2SxIbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
     },
     "node_modules/@types/normalize-package-data": {
       "version": "2.4.1",
@@ -4159,6 +4256,13 @@
       "integrity": "sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==",
       "dev": true
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/yargs": {
       "version": "15.0.12",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.12.tgz",
@@ -4175,20 +4279,20 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.24.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.24.1.tgz",
-      "integrity": "sha512-ll1StnKtBigWIGqvYDVuDmXJHVH4zLVot1yQ4fJtLpL7qacwkxJc1T0bptqw+miBQ/QfUbhl1TcQ4accW5KUyA==",
-      "dev": true,
-      "dependencies": {
-        "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.24.1",
-        "@typescript-eslint/type-utils": "8.24.1",
-        "@typescript-eslint/utils": "8.24.1",
-        "@typescript-eslint/visitor-keys": "8.24.1",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.3.1",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.55.0.tgz",
+      "integrity": "sha512-1y/MVSz0NglV1ijHC8OT49mPJ4qhPYjiK08YUQVbIOyu+5k862LKUHFkpKHWu//zmr7hDR2rhwUm6gnCGNmGBQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.55.0",
+        "@typescript-eslint/type-utils": "8.55.0",
+        "@typescript-eslint/utils": "8.55.0",
+        "@typescript-eslint/visitor-keys": "8.55.0",
+        "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
-        "ts-api-utils": "^2.0.1"
+        "ts-api-utils": "^2.4.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4198,22 +4302,33 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.0.0 || ^8.0.0-alpha.0",
+        "@typescript-eslint/parser": "^8.55.0",
         "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.8.0"
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.24.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.24.1.tgz",
-      "integrity": "sha512-Tqoa05bu+t5s8CTZFaGpCH2ub3QeT9YDkXbPd3uQ4SfsLoh1/vv2GEYAioPoxCWJJNsenXlC88tRjwoHNts1oQ==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.55.0.tgz",
+      "integrity": "sha512-4z2nCSBfVIMnbuu8uinj+f0o4qOeggYJLbjpPHka3KH1om7e+H9yLKTYgksTaHcGco+NClhhY2vyO3HsMH1RGw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.24.1",
-        "@typescript-eslint/types": "8.24.1",
-        "@typescript-eslint/typescript-estree": "8.24.1",
-        "@typescript-eslint/visitor-keys": "8.24.1",
-        "debug": "^4.3.4"
+        "@typescript-eslint/scope-manager": "8.55.0",
+        "@typescript-eslint/types": "8.55.0",
+        "@typescript-eslint/typescript-estree": "8.55.0",
+        "@typescript-eslint/visitor-keys": "8.55.0",
+        "debug": "^4.4.3"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4224,17 +4339,40 @@
       },
       "peerDependencies": {
         "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.8.0"
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.55.0.tgz",
+      "integrity": "sha512-zRcVVPFUYWa3kNnjaZGXSu3xkKV1zXy8M4nO/pElzQhFweb7PPtluDLQtKArEOGmjXoRjnUZ29NjOiF0eCDkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.55.0",
+        "@typescript-eslint/types": "^8.55.0",
+        "debug": "^4.4.3"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.24.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.24.1.tgz",
-      "integrity": "sha512-OdQr6BNBzwRjNEXMQyaGyZzgg7wzjYKfX2ZBV3E04hUCBDv3GQCHiz9RpqdUIiVrMgJGkXm3tcEh4vFSHreS2Q==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.55.0.tgz",
+      "integrity": "sha512-fVu5Omrd3jeqeQLiB9f1YsuK/iHFOwb04bCtY4BSCLgjNbOD33ZdV6KyEqplHr+IlpgT0QTZ/iJ+wT7hvTx49Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.24.1",
-        "@typescript-eslint/visitor-keys": "8.24.1"
+        "@typescript-eslint/types": "8.55.0",
+        "@typescript-eslint/visitor-keys": "8.55.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4244,16 +4382,35 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.55.0.tgz",
+      "integrity": "sha512-1R9cXqY7RQd7WuqSN47PK9EDpgFUK3VqdmbYrvWJZYDd0cavROGn+74ktWBlmJ13NXUQKlZ/iAEQHI/V0kKe0Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.24.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.24.1.tgz",
-      "integrity": "sha512-/Do9fmNgCsQ+K4rCz0STI7lYB4phTtEXqqCAs3gZW0pnK7lWNkvWd5iW545GSmApm4AzmQXmSqXPO565B4WVrw==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.55.0.tgz",
+      "integrity": "sha512-x1iH2unH4qAt6I37I2CGlsNs+B9WGxurP2uyZLRz6UJoZWDBx9cJL1xVN/FiOmHEONEg6RIufdvyT0TEYIgC5g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "8.24.1",
-        "@typescript-eslint/utils": "8.24.1",
-        "debug": "^4.3.4",
-        "ts-api-utils": "^2.0.1"
+        "@typescript-eslint/types": "8.55.0",
+        "@typescript-eslint/typescript-estree": "8.55.0",
+        "@typescript-eslint/utils": "8.55.0",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.4.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4264,14 +4421,15 @@
       },
       "peerDependencies": {
         "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.8.0"
+        "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.24.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.24.1.tgz",
-      "integrity": "sha512-9kqJ+2DkUXiuhoiYIUvIYjGcwle8pcPpdlfkemGvTObzgmYfJ5d0Qm6jwb4NBXP9W1I5tss0VIAnWFumz3mC5A==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.55.0.tgz",
+      "integrity": "sha512-ujT0Je8GI5BJWi+/mMoR0wxwVEQaxM+pi30xuMiJETlX80OPovb2p9E8ss87gnSVtYXtJoU9U1Cowcr6w2FE0w==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -4281,19 +4439,21 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.24.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.24.1.tgz",
-      "integrity": "sha512-UPyy4MJ/0RE648DSKQe9g0VDSehPINiejjA6ElqnFaFIhI6ZEiZAkUI0D5MCk0bQcTf/LVqZStvQ6K4lPn/BRg==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.55.0.tgz",
+      "integrity": "sha512-EwrH67bSWdx/3aRQhCoxDaHM+CrZjotc2UCCpEDVqfCE+7OjKAGWNY2HsCSTEVvWH2clYQK8pdeLp42EVs+xQw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.24.1",
-        "@typescript-eslint/visitor-keys": "8.24.1",
-        "debug": "^4.3.4",
-        "fast-glob": "^3.3.2",
-        "is-glob": "^4.0.3",
-        "minimatch": "^9.0.4",
-        "semver": "^7.6.0",
-        "ts-api-utils": "^2.0.1"
+        "@typescript-eslint/project-service": "8.55.0",
+        "@typescript-eslint/tsconfig-utils": "8.55.0",
+        "@typescript-eslint/types": "8.55.0",
+        "@typescript-eslint/visitor-keys": "8.55.0",
+        "debug": "^4.4.3",
+        "minimatch": "^9.0.5",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.4.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4303,14 +4463,15 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "typescript": ">=4.8.4 <5.8.0"
+        "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -4320,6 +4481,7 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
       "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -4331,10 +4493,11 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -4343,15 +4506,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.24.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.24.1.tgz",
-      "integrity": "sha512-OOcg3PMMQx9EXspId5iktsI3eMaXVwlhC8BvNnX6B5w9a4dVgpkQZuU8Hy67TolKcl+iFWq0XX+jbDGN4xWxjQ==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.55.0.tgz",
+      "integrity": "sha512-BqZEsnPGdYpgyEIkDC1BadNY8oMwckftxBT+C8W0g1iKPdeqKZBtTfnvcq0nf60u7MkjFO8RBvpRGZBPw4L2ow==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.24.1",
-        "@typescript-eslint/types": "8.24.1",
-        "@typescript-eslint/typescript-estree": "8.24.1"
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.55.0",
+        "@typescript-eslint/types": "8.55.0",
+        "@typescript-eslint/typescript-estree": "8.55.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4362,17 +4526,18 @@
       },
       "peerDependencies": {
         "eslint": "^8.57.0 || ^9.0.0",
-        "typescript": ">=4.8.4 <5.8.0"
+        "typescript": ">=4.8.4 <6.0.0"
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.24.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.24.1.tgz",
-      "integrity": "sha512-EwVHlp5l+2vp8CoqJm9KikPZgi3gbdZAtabKT9KPShGeOcJhsv4Zdo3oc8T8I0uKEmYoU4ItyxbptjF08enaxg==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.55.0.tgz",
+      "integrity": "sha512-AxNRwEie8Nn4eFS1FzDMJWIISMGoXMb037sgCBJ3UR6o0fQTzr2tqN9WT+DkWJPhIdQCfV7T6D387566VtnCJA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.24.1",
-        "eslint-visitor-keys": "^4.2.0"
+        "@typescript-eslint/types": "8.55.0",
+        "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4383,10 +4548,11 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
       "dev": true,
+      "license": "Apache-2.0",
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -4462,10 +4628,11 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
-      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "devOptional": true,
+      "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4584,12 +4751,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/ansi-sequence-parser": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.1.tgz",
-      "integrity": "sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==",
-      "dev": true
-    },
     "node_modules/ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -4848,13 +5009,14 @@
       }
     },
     "node_modules/array-buffer-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
-      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.5",
-        "is-array-buffer": "^3.0.4"
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4870,17 +5032,20 @@
       "dev": true
     },
     "node_modules/array-includes": {
-      "version": "3.1.8",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
-      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-object-atoms": "^1.0.0",
-        "get-intrinsic": "^1.2.4",
-        "is-string": "^1.0.7"
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4917,17 +5082,19 @@
       }
     },
     "node_modules/array.prototype.findlastindex": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz",
-      "integrity": "sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
+        "es-abstract": "^1.23.9",
         "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "es-shim-unscopables": "^1.0.2"
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4937,15 +5104,16 @@
       }
     },
     "node_modules/array.prototype.flat": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
-      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0"
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4955,15 +5123,16 @@
       }
     },
     "node_modules/array.prototype.flatmap": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
-      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0"
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4973,19 +5142,19 @@
       }
     },
     "node_modules/arraybuffer.prototype.slice": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
-      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "array-buffer-byte-length": "^1.0.1",
-        "call-bind": "^1.0.5",
+        "call-bind": "^1.0.8",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.22.3",
-        "es-errors": "^1.2.1",
-        "get-intrinsic": "^1.2.3",
-        "is-array-buffer": "^3.0.4",
-        "is-shared-array-buffer": "^1.0.2"
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5033,6 +5202,16 @@
       "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==",
       "dev": true
     },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -5097,6 +5276,7 @@
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
       "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "possible-typed-array-names": "^1.0.0"
       },
@@ -5540,16 +5720,47 @@
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
         "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
         "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -5594,9 +5805,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001696",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001696.tgz",
-      "integrity": "sha512-pDCPkvzfa39ehJtJ+OwGT/2yvT2SbjfHhiIW2LWOAcMQ7BzwxT/XuyUp4OTOd0XFWA6BKw0JalnBHgSi5DGJBQ==",
+      "version": "1.0.30001769",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001769.tgz",
+      "integrity": "sha512-BCfFL1sHijQlBGWBMuJyhZUhzo7wer5sVj9hqekB/7xn0Ypy+pER/edCYQm4exbXj4WiySGp40P8UuTh6w1srg==",
       "dev": true,
       "funding": [
         {
@@ -5611,7 +5822,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/chalk": {
       "version": "2.4.2",
@@ -6000,10 +6212,11 @@
       "dev": true
     },
     "node_modules/comment-parser": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.4.1.tgz",
-      "integrity": "sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==",
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.4.5.tgz",
+      "integrity": "sha512-aRDkn3uyIlCFfk5NUA+VdwMmMsh8JGhc4hapfV4yxymHGQ3BVskMQfoXGpCo5IoBuQ9tS5iiVKhCpTcB4pW4qw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 12.0.0"
       }
@@ -6758,14 +6971,15 @@
       }
     },
     "node_modules/data-view-buffer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
-      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.1"
+        "is-data-view": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6775,29 +6989,31 @@
       }
     },
     "node_modules/data-view-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
-      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.1"
+        "is-data-view": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
       },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "url": "https://github.com/sponsors/inspect-js"
       }
     },
     "node_modules/data-view-byte-offset": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
-      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
         "is-data-view": "^1.0.1"
       },
@@ -6818,10 +7034,11 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
       "devOptional": true,
+      "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -7218,6 +7435,21 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -7290,57 +7522,66 @@
       }
     },
     "node_modules/es-abstract": {
-      "version": "1.23.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
-      "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==",
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
+      "integrity": "sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "array-buffer-byte-length": "^1.0.1",
-        "arraybuffer.prototype.slice": "^1.0.3",
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
         "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
-        "data-view-buffer": "^1.0.1",
-        "data-view-byte-length": "^1.0.1",
-        "data-view-byte-offset": "^1.0.0",
-        "es-define-property": "^1.0.0",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "es-set-tostringtag": "^2.0.3",
-        "es-to-primitive": "^1.2.1",
-        "function.prototype.name": "^1.1.6",
-        "get-intrinsic": "^1.2.4",
-        "get-symbol-description": "^1.0.2",
-        "globalthis": "^1.0.3",
-        "gopd": "^1.0.1",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
         "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.0.3",
-        "has-symbols": "^1.0.3",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
         "hasown": "^2.0.2",
-        "internal-slot": "^1.0.7",
-        "is-array-buffer": "^3.0.4",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
         "is-callable": "^1.2.7",
-        "is-data-view": "^1.0.1",
+        "is-data-view": "^1.0.2",
         "is-negative-zero": "^2.0.3",
-        "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.3",
-        "is-string": "^1.0.7",
-        "is-typed-array": "^1.1.13",
-        "is-weakref": "^1.0.2",
-        "object-inspect": "^1.13.1",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.5",
-        "regexp.prototype.flags": "^1.5.2",
-        "safe-array-concat": "^1.1.2",
-        "safe-regex-test": "^1.0.3",
-        "string.prototype.trim": "^1.2.9",
-        "string.prototype.trimend": "^1.0.8",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
         "string.prototype.trimstart": "^1.0.8",
-        "typed-array-buffer": "^1.0.2",
-        "typed-array-byte-length": "^1.0.1",
-        "typed-array-byte-offset": "^1.0.2",
-        "typed-array-length": "^1.0.6",
-        "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.15"
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
       },
       "engines": {
         "node": ">= 0.4"
@@ -7350,13 +7591,11 @@
       }
     },
     "node_modules/es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
       "dev": true,
-      "dependencies": {
-        "get-intrinsic": "^1.2.4"
-      },
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
@@ -7370,17 +7609,12 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/es-module-lexer": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz",
-      "integrity": "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==",
-      "dev": true
-    },
     "node_modules/es-object-atoms": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
-      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0"
       },
@@ -7389,37 +7623,44 @@
       }
     },
     "node_modules/es-set-tostringtag": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
-      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "get-intrinsic": "^1.2.4",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
         "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.1"
+        "hasown": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/es-shim-unscopables": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
-      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "hasown": "^2.0.0"
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       }
     },
     "node_modules/es-to-primitive": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "is-callable": "^1.1.4",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
       },
       "engines": {
         "node": ">= 0.4"
@@ -7593,12 +7834,16 @@
       }
     },
     "node_modules/eslint-config-prettier": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.0.1.tgz",
-      "integrity": "sha512-lZBts941cyJyeaooiKxAtzoPHTN+GbQTJFAIdQbRhA4/8whaAraEh47Whw/ZFfrjNSnlAxqfm9i0XVAEkULjCw==",
+      "version": "10.1.8",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+      "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
       "dev": true,
+      "license": "MIT",
       "bin": {
-        "eslint-config-prettier": "build/bin/cli.js"
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-config-prettier"
       },
       "peerDependencies": {
         "eslint": ">=7.0.0"
@@ -7625,10 +7870,11 @@
       }
     },
     "node_modules/eslint-module-utils": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz",
-      "integrity": "sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==",
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
+      "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "debug": "^3.2.7"
       },
@@ -7646,34 +7892,36 @@
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
       "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "ms": "^2.1.1"
       }
     },
     "node_modules/eslint-plugin-import": {
-      "version": "2.31.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz",
-      "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==",
+      "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
-        "array-includes": "^3.1.8",
-        "array.prototype.findlastindex": "^1.2.5",
-        "array.prototype.flat": "^1.3.2",
-        "array.prototype.flatmap": "^1.3.2",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
         "debug": "^3.2.7",
         "doctrine": "^2.1.0",
         "eslint-import-resolver-node": "^0.3.9",
-        "eslint-module-utils": "^2.12.0",
+        "eslint-module-utils": "^2.12.1",
         "hasown": "^2.0.2",
-        "is-core-module": "^2.15.1",
+        "is-core-module": "^2.16.1",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
         "object.fromentries": "^2.0.8",
         "object.groupby": "^1.0.3",
-        "object.values": "^1.2.0",
+        "object.values": "^1.2.1",
         "semver": "^6.3.1",
-        "string.prototype.trimend": "^1.0.8",
+        "string.prototype.trimend": "^1.0.9",
         "tsconfig-paths": "^3.15.0"
       },
       "engines": {
@@ -7714,20 +7962,22 @@
       }
     },
     "node_modules/eslint-plugin-jest": {
-      "version": "28.11.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-28.11.0.tgz",
-      "integrity": "sha512-QAfipLcNCWLVocVbZW8GimKn5p5iiMcgGbRzz8z/P5q7xw+cNEpYqyzFMtIF/ZgF2HLOyy+dYBut+DoYolvqig==",
+      "version": "29.13.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-29.13.0.tgz",
+      "integrity": "sha512-VoONe0NsaQLb7ijvg4k35rzchqfyCaBsXammNMCkTyLvKLTpzQOVdXiPC54q7Vp/W7shMcqPBLwAc3yRSiGjSQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/utils": "^6.0.0 || ^7.0.0 || ^8.0.0"
+        "@typescript-eslint/utils": "^8.0.0"
       },
       "engines": {
-        "node": "^16.10.0 || ^18.12.0 || >=20.0.0"
+        "node": "^20.12.0 || ^22.0.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@typescript-eslint/eslint-plugin": "^6.0.0 || ^7.0.0 || ^8.0.0",
-        "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0",
-        "jest": "*"
+        "@typescript-eslint/eslint-plugin": "^8.0.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "jest": "*",
+        "typescript": ">=4.8.4 <6.0.0"
       },
       "peerDependenciesMeta": {
         "@typescript-eslint/eslint-plugin": {
@@ -7735,29 +7985,36 @@
         },
         "jest": {
           "optional": true
+        },
+        "typescript": {
+          "optional": true
         }
       }
     },
     "node_modules/eslint-plugin-jsdoc": {
-      "version": "50.6.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-50.6.3.tgz",
-      "integrity": "sha512-NxbJyt1M5zffPcYZ8Nb53/8nnbIScmiLAMdoe0/FAszwb7lcSiX3iYBTsuF7RV84dZZJC8r3NghomrUXsmWvxQ==",
+      "version": "62.5.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-62.5.4.tgz",
+      "integrity": "sha512-U+Q5ppErmC17VFQl542eBIaXcuq975BzoIHBXyx7UQx/i4gyHXxPiBkonkuxWyFA98hGLALLUuD+NJcXqSGKxg==",
       "dev": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
-        "@es-joy/jsdoccomment": "~0.49.0",
+        "@es-joy/jsdoccomment": "~0.84.0",
+        "@es-joy/resolve.exports": "1.2.0",
         "are-docs-informative": "^0.0.2",
-        "comment-parser": "1.4.1",
-        "debug": "^4.3.6",
+        "comment-parser": "1.4.5",
+        "debug": "^4.4.3",
         "escape-string-regexp": "^4.0.0",
-        "espree": "^10.1.0",
-        "esquery": "^1.6.0",
-        "parse-imports": "^2.1.1",
-        "semver": "^7.6.3",
+        "espree": "^11.1.0",
+        "esquery": "^1.7.0",
+        "html-entities": "^2.6.0",
+        "object-deep-merge": "^2.0.0",
+        "parse-imports-exports": "^0.2.4",
+        "semver": "^7.7.3",
         "spdx-expression-parse": "^4.0.0",
-        "synckit": "^0.9.1"
+        "to-valid-identifier": "^1.0.0"
       },
       "engines": {
-        "node": ">=18"
+        "node": "^20.19.0 || ^22.13.0 || >=24"
       },
       "peerDependencies": {
         "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0"
@@ -7775,11 +8032,43 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/eslint-plugin-jsdoc/node_modules/eslint-visitor-keys": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.0.tgz",
+      "integrity": "sha512-A0XeIi7CXU7nPlfHS9loMYEKxUaONu/hTEzHTGba9Huu94Cq1hPivf+DE5erJozZOky0LfvXAyrV/tcswpLI0Q==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-plugin-jsdoc/node_modules/espree": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-11.1.0.tgz",
+      "integrity": "sha512-WFWYhO1fV4iYkqOOvq8FbqIhr2pYfoDY0kCotMkDeNtGpiGGkZ1iov2u8ydjtgM8yF8rzK7oaTbw2NAzbAbehw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/eslint-plugin-jsdoc/node_modules/semver": {
-      "version": "7.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-      "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
       "dev": true,
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -8196,10 +8485,11 @@
       }
     },
     "node_modules/esquery": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
-      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
       "devOptional": true,
+      "license": "BSD-3-Clause",
       "dependencies": {
         "estraverse": "^5.1.0"
       },
@@ -8872,12 +9162,19 @@
       "devOptional": true
     },
     "node_modules/for-each": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "is-callable": "^1.1.3"
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/for-in": {
@@ -9085,15 +9382,18 @@
       }
     },
     "node_modules/function.prototype.name": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
-      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "functions-have-names": "^1.2.3"
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9107,10 +9407,21 @@
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -9129,16 +9440,22 @@
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
         "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9186,6 +9503,20 @@
         "node": ">=10"
       }
     },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-stdin": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz",
@@ -9211,14 +9542,15 @@
       }
     },
     "node_modules/get-symbol-description": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
-      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.5",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4"
+        "get-intrinsic": "^1.2.6"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9481,12 +9813,14 @@
       }
     },
     "node_modules/globalthis": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
-      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "define-properties": "^1.1.3"
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -9522,12 +9856,13 @@
       "dev": true
     },
     "node_modules/gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
       "dev": true,
-      "dependencies": {
-        "get-intrinsic": "^1.1.3"
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -9538,12 +9873,6 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
-    "node_modules/graphemer": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-      "dev": true
-    },
     "node_modules/handlebars": {
       "version": "4.7.7",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
@@ -9575,10 +9904,14 @@
       }
     },
     "node_modules/has-bigints": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
       "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -9605,10 +9938,14 @@
       }
     },
     "node_modules/has-proto": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
-      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -9617,10 +9954,11 @@
       }
     },
     "node_modules/has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -9633,6 +9971,7 @@
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "has-symbols": "^1.0.3"
       },
@@ -9774,6 +10113,23 @@
         "node": ">=12"
       }
     },
+    "node_modules/html-entities": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.6.0.tgz",
+      "integrity": "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/mdevils"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/mdevils"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -9994,14 +10350,15 @@
       "dev": true
     },
     "node_modules/internal-slot": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
-      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "es-errors": "^1.3.0",
-        "hasown": "^2.0.0",
-        "side-channel": "^1.0.4"
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -10041,13 +10398,15 @@
       }
     },
     "node_modules/is-array-buffer": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
-      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1"
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
       },
       "engines": {
         "node": ">= 0.4"
@@ -10062,13 +10421,37 @@
       "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
       "dev": true
     },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-bigint": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
-      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "has-bigints": "^1.0.1"
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -10087,13 +10470,14 @@
       }
     },
     "node_modules/is-boolean-object": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
-      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -10113,6 +10497,7 @@
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
       "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -10160,11 +10545,14 @@
       }
     },
     "node_modules/is-data-view": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
-      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
         "is-typed-array": "^1.1.13"
       },
       "engines": {
@@ -10175,10 +10563,15 @@
       }
     },
     "node_modules/is-date-object": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
-      "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -10241,6 +10634,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -10258,6 +10667,26 @@
         "node": ">=6"
       }
     },
+    "node_modules/is-generator-function": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -10270,6 +10699,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-negative-zero": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
@@ -10291,12 +10733,14 @@
       }
     },
     "node_modules/is-number-object": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
-      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -10342,13 +10786,16 @@
       "dev": true
     },
     "node_modules/is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -10366,13 +10813,27 @@
         "node": ">=6"
       }
     },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-shared-array-buffer": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
-      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7"
+        "call-bound": "^1.0.3"
       },
       "engines": {
         "node": ">= 0.4"
@@ -10394,12 +10855,14 @@
       }
     },
     "node_modules/is-string": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -10409,12 +10872,15 @@
       }
     },
     "node_modules/is-symbol": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
-      "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "has-symbols": "^1.0.1"
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -10436,12 +10902,13 @@
       }
     },
     "node_modules/is-typed-array": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
-      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "which-typed-array": "^1.1.14"
+        "which-typed-array": "^1.1.16"
       },
       "engines": {
         "node": ">= 0.4"
@@ -10457,13 +10924,47 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-weakref": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2"
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -12840,12 +13341,13 @@
       }
     },
     "node_modules/jsdoc-type-pratt-parser": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz",
-      "integrity": "sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-7.1.1.tgz",
+      "integrity": "sha512-/2uqY7x6bsrpi3i9LVU6J89352C0rpMk0as8trXxCtvd4kPk1ke/Eyif6wqfSLvoNJqcDG9Vk4UsXgygzCt2xA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=20.0.0"
       }
     },
     "node_modules/jsdom": {
@@ -12976,12 +13478,6 @@
         "json5": "lib/cli.js"
       }
     },
-    "node_modules/jsonc-parser": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.1.tgz",
-      "integrity": "sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==",
-      "dev": true
-    },
     "node_modules/jsonfile": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -13138,6 +13634,16 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/live-server": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/live-server/-/live-server-1.2.1.tgz",
@@ -13490,16 +13996,39 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/marked": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
-      "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+    "node_modules/markdown-it": {
+      "version": "14.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
+      "integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
       "dev": true,
-      "bin": {
-        "marked": "bin/marked.js"
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
       },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
+    "node_modules/markdown-it/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">= 12"
+        "node": ">= 0.4"
       }
     },
     "node_modules/mathml-tag-names": {
@@ -13512,6 +14041,13 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -14641,11 +15177,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-deep-merge": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/object-deep-merge/-/object-deep-merge-2.0.0.tgz",
+      "integrity": "sha512-3DC3UMpeffLTHiuXSy/UG4NOIYTLlY9u3V82+djSCLYClWobZiS4ivYzpIUWrRY/nfsJ8cWsKyG3QfyLePmhvg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/object-inspect": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
       "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -14672,14 +15219,17 @@
       }
     },
     "node_modules/object.assign": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
-      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.5",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
         "define-properties": "^1.2.1",
-        "has-symbols": "^1.0.3",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
         "object-keys": "^1.1.1"
       },
       "engines": {
@@ -14734,12 +15284,14 @@
       }
     },
     "node_modules/object.values": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
-      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
         "define-properties": "^1.2.1",
         "es-object-atoms": "^1.0.0"
       },
@@ -14845,6 +15397,24 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/p-limit": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
@@ -14919,17 +15489,14 @@
         "node": ">=6"
       }
     },
-    "node_modules/parse-imports": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/parse-imports/-/parse-imports-2.2.1.tgz",
-      "integrity": "sha512-OL/zLggRp8mFhKL0rNORUTR4yBYujK/uU+xZL+/0Rgm2QE4nLO9v8PzEweSJEbMGKmDRjJE4R3IMJlL2di4JeQ==",
+    "node_modules/parse-imports-exports": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/parse-imports-exports/-/parse-imports-exports-0.2.4.tgz",
+      "integrity": "sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "es-module-lexer": "^1.5.3",
-        "slashes": "^3.0.12"
-      },
-      "engines": {
-        "node": ">= 18"
+        "parse-statements": "1.0.11"
       }
     },
     "node_modules/parse-json": {
@@ -14945,6 +15512,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/parse-statements": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/parse-statements/-/parse-statements-1.0.11.tgz",
+      "integrity": "sha512-HlsyYdMBnbPQ9Jr/VgJ1YF4scnldvJpJxCVx6KgqPL4dxppsWrJHCIIxQXMJrqGnsRkNPATbeMJ8Yxu7JMsYcA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/parse5": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
@@ -15415,10 +15989,11 @@
       }
     },
     "node_modules/possible-typed-array-names": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
-      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
@@ -16011,6 +16586,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/pure-rand": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.1.0.tgz",
@@ -16319,6 +16904,29 @@
         "node": ">=8"
       }
     },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -16338,15 +16946,18 @@
       }
     },
     "node_modules/regexp.prototype.flags": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
-      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bind": "^1.0.8",
         "define-properties": "^1.2.1",
         "es-errors": "^1.3.0",
-        "set-function-name": "^2.0.1"
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -16422,6 +17033,19 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/reserved-identifiers": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/reserved-identifiers/-/reserved-identifiers-1.2.0.tgz",
+      "integrity": "sha512-yE7KUfFvaBFzGPs5H3Ops1RevfUEsDc5Iz65rOwWg4lE8HJSYtle77uul3+573457oHvBKuHYDl/xqUkKpEEdw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -16548,14 +17172,16 @@
       }
     },
     "node_modules/safe-array-concat": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
-      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
-        "get-intrinsic": "^1.2.4",
-        "has-symbols": "^1.0.3",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
         "isarray": "^2.0.5"
       },
       "engines": {
@@ -16569,13 +17195,38 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
       "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-push-apply/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/safe-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
@@ -16586,14 +17237,15 @@
       }
     },
     "node_modules/safe-regex-test": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
-      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.6",
+        "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
-        "is-regex": "^1.1.4"
+        "is-regex": "^1.2.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -16847,6 +17499,7 @@
       "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
       "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",
@@ -16857,6 +17510,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/set-value": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
@@ -16936,28 +17604,74 @@
         "node": ">=4"
       }
     },
-    "node_modules/shiki": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.7.tgz",
-      "integrity": "sha512-dNPAPrxSc87ua2sKJ3H5dQ/6ZaY8RNnaAqK+t0eG7p0Soi2ydiqbGOTaZCqaYvA/uZYfS1LJnemt3Q+mSfcPCg==",
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "ansi-sequence-parser": "^1.1.0",
-        "jsonc-parser": "^3.2.0",
-        "vscode-oniguruma": "^1.7.0",
-        "vscode-textmate": "^8.0.0"
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/side-channel": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
-      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
         "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4",
-        "object-inspect": "^1.13.1"
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
       },
       "engines": {
         "node": ">= 0.4"
@@ -17008,12 +17722,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/slashes": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmjs.org/slashes/-/slashes-3.0.12.tgz",
-      "integrity": "sha512-Q9VME8WyGkc7pJf6QEkj3wE+2CnvZMI+XJhwdTPR8Z/kWQRXi7boAWLDibRPyHRTUTPx5FaU7MsyrjI3yLB4HA==",
-      "dev": true
-    },
     "node_modules/slice-ansi": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
@@ -17479,6 +18187,20 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/stream-combiner": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
@@ -17549,15 +18271,19 @@
       }
     },
     "node_modules/string.prototype.trim": {
-      "version": "1.2.9",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
-      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.0",
-        "es-object-atoms": "^1.0.0"
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -17567,15 +18293,20 @@
       }
     },
     "node_modules/string.prototype.trimend": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
-      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
         "define-properties": "^1.2.1",
         "es-object-atoms": "^1.0.0"
       },
+      "engines": {
+        "node": ">= 0.4"
+      },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -18244,22 +18975,6 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
-    "node_modules/synckit": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz",
-      "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==",
-      "dev": true,
-      "dependencies": {
-        "@pkgr/core": "^0.1.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/unts"
-      }
-    },
     "node_modules/table": {
       "version": "6.8.0",
       "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
@@ -18368,6 +19083,54 @@
         "xtend": "~4.0.1"
       }
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -18444,6 +19207,23 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/to-valid-identifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-valid-identifier/-/to-valid-identifier-1.0.0.tgz",
+      "integrity": "sha512-41wJyvKep3yT2tyPqX/4blcfybknGB4D+oETKLs7Q76UiPqRpUJK3hr1nxelyYO0PHKVzJwlu0aCeEAsGI6rpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@sindresorhus/base62": "^1.0.0",
+        "reserved-identifiers": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/touch": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
@@ -18529,10 +19309,11 @@
       }
     },
     "node_modules/ts-api-utils": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.0.1.tgz",
-      "integrity": "sha512-dnlgjFSVetynI8nzgJ+qF62efpglpWRk8isUEWZGWlJYySCTD6aKvbUDu+zbPeDakk3bg5H4XpitHukgfL1m9w==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
+      "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=18.12"
       },
@@ -18676,9 +19457,10 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/type-check": {
       "version": "0.3.2",
@@ -18702,30 +19484,32 @@
       }
     },
     "node_modules/typed-array-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "is-typed-array": "^1.1.13"
+        "is-typed-array": "^1.1.14"
       },
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/typed-array-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
-      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
         "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
-        "is-typed-array": "^1.1.13"
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
       },
       "engines": {
         "node": ">= 0.4"
@@ -18735,17 +19519,19 @@
       }
     },
     "node_modules/typed-array-byte-offset": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
-      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
         "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
-        "is-typed-array": "^1.1.13"
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
       },
       "engines": {
         "node": ">= 0.4"
@@ -18755,17 +19541,18 @@
       }
     },
     "node_modules/typed-array-length": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
-      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
         "is-typed-array": "^1.1.13",
-        "possible-typed-array-names": "^1.0.0"
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
       },
       "engines": {
         "node": ">= 0.4"
@@ -18785,24 +19572,27 @@
       }
     },
     "node_modules/typedoc": {
-      "version": "0.25.13",
-      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.25.13.tgz",
-      "integrity": "sha512-pQqiwiJ+Z4pigfOnnysObszLiU3mVLWAExSPf+Mu06G/qsc3wzbuM56SZQvONhHLncLUhYzOVkjFFpFfL5AzhQ==",
+      "version": "0.28.16",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.28.16.tgz",
+      "integrity": "sha512-x4xW77QC3i5DUFMBp0qjukOTnr/sSg+oEs86nB3LjDslvAmwe/PUGDWbe3GrIqt59oTqoXK5GRK9tAa0sYMiog==",
       "dev": true,
+      "license": "Apache-2.0",
       "dependencies": {
+        "@gerrit0/mini-shiki": "^3.17.0",
         "lunr": "^2.3.9",
-        "marked": "^4.3.0",
-        "minimatch": "^9.0.3",
-        "shiki": "^0.14.7"
+        "markdown-it": "^14.1.0",
+        "minimatch": "^9.0.5",
+        "yaml": "^2.8.1"
       },
       "bin": {
         "typedoc": "bin/typedoc"
       },
       "engines": {
-        "node": ">= 16"
+        "node": ">= 18",
+        "pnpm": ">= 10"
       },
       "peerDependencies": {
-        "typescript": "4.6.x || 4.7.x || 4.8.x || 4.9.x || 5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x"
+        "typescript": "5.0.x || 5.1.x || 5.2.x || 5.3.x || 5.4.x || 5.5.x || 5.6.x || 5.7.x || 5.8.x || 5.9.x"
       }
     },
     "node_modules/typedoc-default-themes": {
@@ -18821,28 +19611,31 @@
       }
     },
     "node_modules/typedoc-plugin-missing-exports": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/typedoc-plugin-missing-exports/-/typedoc-plugin-missing-exports-2.2.0.tgz",
-      "integrity": "sha512-2+XR1IcyQ5UwXZVJe9NE6HrLmNufT9i5OwoIuuj79VxuA3eYq+Y6itS9rnNV1D7UeQnUSH8kISYD73gHE5zw+w==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/typedoc-plugin-missing-exports/-/typedoc-plugin-missing-exports-4.1.2.tgz",
+      "integrity": "sha512-WNoeWX9+8X3E3riuYPduilUTFefl1K+Z+5bmYqNeH5qcWjtnTRMbRzGdEQ4XXn1WEO4WCIlU0vf46Ca2y/mspg==",
       "dev": true,
+      "license": "MIT",
       "peerDependencies": {
-        "typedoc": "0.24.x || 0.25.x"
+        "typedoc": "^0.28.1"
       }
     },
     "node_modules/typedoc/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
     },
     "node_modules/typedoc/node_modules/minimatch": {
-      "version": "9.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
-      "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -18853,11 +19646,28 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/typedoc/node_modules/yaml": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
+      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
+    },
     "node_modules/typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -18866,6 +19676,13 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/uglify-js": {
       "version": "3.13.6",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.13.6.tgz",
@@ -18880,15 +19697,19 @@
       }
     },
     "node_modules/unbox-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "call-bind": "^1.0.2",
+        "call-bound": "^1.0.3",
         "has-bigints": "^1.0.2",
-        "has-symbols": "^1.0.3",
-        "which-boxed-primitive": "^1.0.2"
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -18906,6 +19727,12 @@
       "integrity": "sha512-hzSoAVtJF+3ZtiFX0VgfFPHEDRm7Y/QPjGyNo4TVdnDTdft3tr8hEkD25a1jC+TjTuE7tkHGKkhwCgs9dgBB2g==",
       "dev": true
     },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "license": "MIT"
+    },
     "node_modules/union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -19147,18 +19974,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/vscode-oniguruma": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
-      "integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==",
-      "dev": true
-    },
-    "node_modules/vscode-textmate": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz",
-      "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==",
-      "dev": true
-    },
     "node_modules/w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
@@ -19274,16 +20089,74 @@
       }
     },
     "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/which-collection": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
-      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "is-bigint": "^1.0.1",
-        "is-boolean-object": "^1.1.0",
-        "is-number-object": "^1.0.4",
-        "is-string": "^1.0.5",
-        "is-symbol": "^1.0.3"
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -19297,15 +20170,18 @@
       "peer": true
     },
     "node_modules/which-typed-array": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
-      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.20.tgz",
+      "integrity": "sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
         "has-tostringtag": "^1.0.2"
       },
       "engines": {
@@ -20013,16 +20889,24 @@
       }
     },
     "@es-joy/jsdoccomment": {
-      "version": "0.49.0",
-      "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.49.0.tgz",
-      "integrity": "sha512-xjZTSFgECpb9Ohuk5yMX5RhUEbfeQcuOp8IF60e+wyzWEF0M5xeSgqsfLtvPEX8BIyOX9saZqzuGPmZ8oWc+5Q==",
+      "version": "0.84.0",
+      "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.84.0.tgz",
+      "integrity": "sha512-0xew1CxOam0gV5OMjh2KjFQZsKL2bByX1+q4j3E73MpYIdyUxcZb/xQct9ccUb+ve5KGUYbCUxyPnYB7RbuP+w==",
       "dev": true,
       "requires": {
-        "comment-parser": "1.4.1",
-        "esquery": "^1.6.0",
-        "jsdoc-type-pratt-parser": "~4.1.0"
+        "@types/estree": "^1.0.8",
+        "@typescript-eslint/types": "^8.54.0",
+        "comment-parser": "1.4.5",
+        "esquery": "^1.7.0",
+        "jsdoc-type-pratt-parser": "~7.1.1"
       }
     },
+    "@es-joy/resolve.exports": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@es-joy/resolve.exports/-/resolve.exports-1.2.0.tgz",
+      "integrity": "sha512-Q9hjxWI5xBM+qW2enxfe8wDKdFWMfd0Z29k5ZJnuBqD/CasY5Zryj09aCA6owbGATWz+39p5uIdaHXpopOcG8g==",
+      "dev": true
+    },
     "@esbuild/aix-ppc64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -20185,18 +21069,18 @@
       "optional": true
     },
     "@eslint-community/eslint-utils": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
-      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
       "devOptional": true,
       "requires": {
-        "eslint-visitor-keys": "^3.3.0"
+        "eslint-visitor-keys": "^3.4.3"
       }
     },
     "@eslint-community/regexpp": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
-      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
       "devOptional": true
     },
     "@eslint/compat": {
@@ -20723,6 +21607,19 @@
       "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.6.1.tgz",
       "integrity": "sha512-9FqhNjKQWpQ3fGnSOCovHOm+yhhiorKEqYLAfd525jWavunDJcx8rOW6i6ozAh+FbwcYMkL7b+3j4UR/30MpoQ=="
     },
+    "@gerrit0/mini-shiki": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@gerrit0/mini-shiki/-/mini-shiki-3.22.0.tgz",
+      "integrity": "sha512-jMpciqEVUBKE1QwU64S4saNMzpsSza6diNCk4MWAeCxO2+LFi2FIFmL2S0VDLzEJCxuvCbU783xi8Hp/gkM5CQ==",
+      "dev": true,
+      "requires": {
+        "@shikijs/engine-oniguruma": "^3.22.0",
+        "@shikijs/langs": "^3.22.0",
+        "@shikijs/themes": "^3.22.0",
+        "@shikijs/types": "^3.22.0",
+        "@shikijs/vscode-textmate": "^10.0.2"
+      }
+    },
     "@grpc/grpc-js": {
       "version": "1.8.18",
       "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.8.18.tgz",
@@ -22194,12 +23091,6 @@
         "fastq": "^1.6.0"
       }
     },
-    "@pkgr/core": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
-      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
-      "dev": true
-    },
     "@playwright/test": {
       "version": "1.32.3",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.3.tgz",
@@ -22271,12 +23162,62 @@
       "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
       "dev": true
     },
+    "@shikijs/engine-oniguruma": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-3.22.0.tgz",
+      "integrity": "sha512-DyXsOG0vGtNtl7ygvabHd7Mt5EY8gCNqR9Y7Lpbbd/PbJvgWrqaKzH1JW6H6qFkuUa8aCxoiYVv8/YfFljiQxA==",
+      "dev": true,
+      "requires": {
+        "@shikijs/types": "3.22.0",
+        "@shikijs/vscode-textmate": "^10.0.2"
+      }
+    },
+    "@shikijs/langs": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.22.0.tgz",
+      "integrity": "sha512-x/42TfhWmp6H00T6uwVrdTJGKgNdFbrEdhaDwSR5fd5zhQ1Q46bHq9EO61SCEWJR0HY7z2HNDMaBZp8JRmKiIA==",
+      "dev": true,
+      "requires": {
+        "@shikijs/types": "3.22.0"
+      }
+    },
+    "@shikijs/themes": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.22.0.tgz",
+      "integrity": "sha512-o+tlOKqsr6FE4+mYJG08tfCFDS+3CG20HbldXeVoyP+cYSUxDhrFf3GPjE60U55iOkkjbpY2uC3It/eeja35/g==",
+      "dev": true,
+      "requires": {
+        "@shikijs/types": "3.22.0"
+      }
+    },
+    "@shikijs/types": {
+      "version": "3.22.0",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.22.0.tgz",
+      "integrity": "sha512-491iAekgKDBFE67z70Ok5a8KBMsQ2IJwOWw3us/7ffQkIBCyOQfm/aNwVMBUriP02QshIfgHCBSIYAl3u2eWjg==",
+      "dev": true,
+      "requires": {
+        "@shikijs/vscode-textmate": "^10.0.2",
+        "@types/hast": "^3.0.4"
+      }
+    },
+    "@shikijs/vscode-textmate": {
+      "version": "10.0.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz",
+      "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==",
+      "dev": true
+    },
     "@sinclair/typebox": {
       "version": "0.27.8",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz",
       "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
       "dev": true
     },
+    "@sindresorhus/base62": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/base62/-/base62-1.0.0.tgz",
+      "integrity": "sha512-TeheYy0ILzBEI/CO55CP6zJCSdSWeRtGnHy8U8dWSUH4I68iqTsy7HkMktR4xakThc9jotkPQUXT4ITdbV7cHA==",
+      "dev": true
+    },
     "@sinonjs/commons": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-3.0.1.tgz",
@@ -22387,9 +23328,9 @@
       "dev": true
     },
     "@types/estree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "devOptional": true
     },
     "@types/glob": {
@@ -22411,6 +23352,15 @@
         "@types/node": "*"
       }
     },
+    "@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dev": true,
+      "requires": {
+        "@types/unist": "*"
+      }
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
@@ -22513,9 +23463,12 @@
       "dev": true
     },
     "@types/node": {
-      "version": "18.11.9",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
-      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg=="
+      "version": "25.2.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.3.tgz",
+      "integrity": "sha512-m0jEgYlYz+mDJZ2+F4v8D1AyQb+QzsNqRuI7xg1VQX/KlKS0qT9r1Mo16yo5F/MtifXFgaofIFsdFMox2SxIbQ==",
+      "requires": {
+        "undici-types": "~7.16.0"
+      }
     },
     "@types/normalize-package-data": {
       "version": "2.4.1",
@@ -22562,6 +23515,12 @@
       "integrity": "sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==",
       "dev": true
     },
+    "@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "dev": true
+    },
     "@types/yargs": {
       "version": "15.0.12",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.12.tgz",
@@ -22578,83 +23537,110 @@
       "dev": true
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "8.24.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.24.1.tgz",
-      "integrity": "sha512-ll1StnKtBigWIGqvYDVuDmXJHVH4zLVot1yQ4fJtLpL7qacwkxJc1T0bptqw+miBQ/QfUbhl1TcQ4accW5KUyA==",
-      "dev": true,
-      "requires": {
-        "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.24.1",
-        "@typescript-eslint/type-utils": "8.24.1",
-        "@typescript-eslint/utils": "8.24.1",
-        "@typescript-eslint/visitor-keys": "8.24.1",
-        "graphemer": "^1.4.0",
-        "ignore": "^5.3.1",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.55.0.tgz",
+      "integrity": "sha512-1y/MVSz0NglV1ijHC8OT49mPJ4qhPYjiK08YUQVbIOyu+5k862LKUHFkpKHWu//zmr7hDR2rhwUm6gnCGNmGBQ==",
+      "dev": true,
+      "requires": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.55.0",
+        "@typescript-eslint/type-utils": "8.55.0",
+        "@typescript-eslint/utils": "8.55.0",
+        "@typescript-eslint/visitor-keys": "8.55.0",
+        "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
-        "ts-api-utils": "^2.0.1"
+        "ts-api-utils": "^2.4.0"
+      },
+      "dependencies": {
+        "ignore": {
+          "version": "7.0.5",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+          "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+          "dev": true
+        }
       }
     },
     "@typescript-eslint/parser": {
-      "version": "8.24.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.24.1.tgz",
-      "integrity": "sha512-Tqoa05bu+t5s8CTZFaGpCH2ub3QeT9YDkXbPd3uQ4SfsLoh1/vv2GEYAioPoxCWJJNsenXlC88tRjwoHNts1oQ==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.55.0.tgz",
+      "integrity": "sha512-4z2nCSBfVIMnbuu8uinj+f0o4qOeggYJLbjpPHka3KH1om7e+H9yLKTYgksTaHcGco+NClhhY2vyO3HsMH1RGw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "8.24.1",
-        "@typescript-eslint/types": "8.24.1",
-        "@typescript-eslint/typescript-estree": "8.24.1",
-        "@typescript-eslint/visitor-keys": "8.24.1",
-        "debug": "^4.3.4"
+        "@typescript-eslint/scope-manager": "8.55.0",
+        "@typescript-eslint/types": "8.55.0",
+        "@typescript-eslint/typescript-estree": "8.55.0",
+        "@typescript-eslint/visitor-keys": "8.55.0",
+        "debug": "^4.4.3"
+      }
+    },
+    "@typescript-eslint/project-service": {
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.55.0.tgz",
+      "integrity": "sha512-zRcVVPFUYWa3kNnjaZGXSu3xkKV1zXy8M4nO/pElzQhFweb7PPtluDLQtKArEOGmjXoRjnUZ29NjOiF0eCDkcQ==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/tsconfig-utils": "^8.55.0",
+        "@typescript-eslint/types": "^8.55.0",
+        "debug": "^4.4.3"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "8.24.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.24.1.tgz",
-      "integrity": "sha512-OdQr6BNBzwRjNEXMQyaGyZzgg7wzjYKfX2ZBV3E04hUCBDv3GQCHiz9RpqdUIiVrMgJGkXm3tcEh4vFSHreS2Q==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.55.0.tgz",
+      "integrity": "sha512-fVu5Omrd3jeqeQLiB9f1YsuK/iHFOwb04bCtY4BSCLgjNbOD33ZdV6KyEqplHr+IlpgT0QTZ/iJ+wT7hvTx49Q==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "8.24.1",
-        "@typescript-eslint/visitor-keys": "8.24.1"
+        "@typescript-eslint/types": "8.55.0",
+        "@typescript-eslint/visitor-keys": "8.55.0"
       }
     },
+    "@typescript-eslint/tsconfig-utils": {
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.55.0.tgz",
+      "integrity": "sha512-1R9cXqY7RQd7WuqSN47PK9EDpgFUK3VqdmbYrvWJZYDd0cavROGn+74ktWBlmJ13NXUQKlZ/iAEQHI/V0kKe0Q==",
+      "dev": true,
+      "requires": {}
+    },
     "@typescript-eslint/type-utils": {
-      "version": "8.24.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.24.1.tgz",
-      "integrity": "sha512-/Do9fmNgCsQ+K4rCz0STI7lYB4phTtEXqqCAs3gZW0pnK7lWNkvWd5iW545GSmApm4AzmQXmSqXPO565B4WVrw==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.55.0.tgz",
+      "integrity": "sha512-x1iH2unH4qAt6I37I2CGlsNs+B9WGxurP2uyZLRz6UJoZWDBx9cJL1xVN/FiOmHEONEg6RIufdvyT0TEYIgC5g==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/typescript-estree": "8.24.1",
-        "@typescript-eslint/utils": "8.24.1",
-        "debug": "^4.3.4",
-        "ts-api-utils": "^2.0.1"
+        "@typescript-eslint/types": "8.55.0",
+        "@typescript-eslint/typescript-estree": "8.55.0",
+        "@typescript-eslint/utils": "8.55.0",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.4.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "8.24.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.24.1.tgz",
-      "integrity": "sha512-9kqJ+2DkUXiuhoiYIUvIYjGcwle8pcPpdlfkemGvTObzgmYfJ5d0Qm6jwb4NBXP9W1I5tss0VIAnWFumz3mC5A==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.55.0.tgz",
+      "integrity": "sha512-ujT0Je8GI5BJWi+/mMoR0wxwVEQaxM+pi30xuMiJETlX80OPovb2p9E8ss87gnSVtYXtJoU9U1Cowcr6w2FE0w==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "8.24.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.24.1.tgz",
-      "integrity": "sha512-UPyy4MJ/0RE648DSKQe9g0VDSehPINiejjA6ElqnFaFIhI6ZEiZAkUI0D5MCk0bQcTf/LVqZStvQ6K4lPn/BRg==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.55.0.tgz",
+      "integrity": "sha512-EwrH67bSWdx/3aRQhCoxDaHM+CrZjotc2UCCpEDVqfCE+7OjKAGWNY2HsCSTEVvWH2clYQK8pdeLp42EVs+xQw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "8.24.1",
-        "@typescript-eslint/visitor-keys": "8.24.1",
-        "debug": "^4.3.4",
-        "fast-glob": "^3.3.2",
-        "is-glob": "^4.0.3",
-        "minimatch": "^9.0.4",
-        "semver": "^7.6.0",
-        "ts-api-utils": "^2.0.1"
+        "@typescript-eslint/project-service": "8.55.0",
+        "@typescript-eslint/tsconfig-utils": "8.55.0",
+        "@typescript-eslint/types": "8.55.0",
+        "@typescript-eslint/visitor-keys": "8.55.0",
+        "debug": "^4.4.3",
+        "minimatch": "^9.0.5",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.4.0"
       },
       "dependencies": {
         "brace-expansion": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+          "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
           "dev": true,
           "requires": {
             "balanced-match": "^1.0.0"
@@ -22670,39 +23656,39 @@
           }
         },
         "semver": {
-          "version": "7.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-          "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+          "version": "7.7.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+          "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
           "dev": true
         }
       }
     },
     "@typescript-eslint/utils": {
-      "version": "8.24.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.24.1.tgz",
-      "integrity": "sha512-OOcg3PMMQx9EXspId5iktsI3eMaXVwlhC8BvNnX6B5w9a4dVgpkQZuU8Hy67TolKcl+iFWq0XX+jbDGN4xWxjQ==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.55.0.tgz",
+      "integrity": "sha512-BqZEsnPGdYpgyEIkDC1BadNY8oMwckftxBT+C8W0g1iKPdeqKZBtTfnvcq0nf60u7MkjFO8RBvpRGZBPw4L2ow==",
       "dev": true,
       "requires": {
-        "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.24.1",
-        "@typescript-eslint/types": "8.24.1",
-        "@typescript-eslint/typescript-estree": "8.24.1"
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.55.0",
+        "@typescript-eslint/types": "8.55.0",
+        "@typescript-eslint/typescript-estree": "8.55.0"
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "8.24.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.24.1.tgz",
-      "integrity": "sha512-EwVHlp5l+2vp8CoqJm9KikPZgi3gbdZAtabKT9KPShGeOcJhsv4Zdo3oc8T8I0uKEmYoU4ItyxbptjF08enaxg==",
+      "version": "8.55.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.55.0.tgz",
+      "integrity": "sha512-AxNRwEie8Nn4eFS1FzDMJWIISMGoXMb037sgCBJ3UR6o0fQTzr2tqN9WT+DkWJPhIdQCfV7T6D387566VtnCJA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "8.24.1",
-        "eslint-visitor-keys": "^4.2.0"
+        "@typescript-eslint/types": "8.55.0",
+        "eslint-visitor-keys": "^4.2.1"
       },
       "dependencies": {
         "eslint-visitor-keys": {
-          "version": "4.2.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-          "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+          "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
           "dev": true
         }
       }
@@ -22769,9 +23755,9 @@
       }
     },
     "acorn": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
-      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "devOptional": true
     },
     "acorn-globals": {
@@ -22857,12 +23843,6 @@
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
     },
-    "ansi-sequence-parser": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-sequence-parser/-/ansi-sequence-parser-1.1.1.tgz",
-      "integrity": "sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==",
-      "dev": true
-    },
     "ansi-styles": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -23075,13 +24055,13 @@
       "dev": true
     },
     "array-buffer-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
-      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.5",
-        "is-array-buffer": "^3.0.4"
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
       }
     },
     "array-ify": {
@@ -23091,17 +24071,19 @@
       "dev": true
     },
     "array-includes": {
-      "version": "3.1.8",
-      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
-      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
-        "es-object-atoms": "^1.0.0",
-        "get-intrinsic": "^1.2.4",
-        "is-string": "^1.0.7"
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
       }
     },
     "array-union": {
@@ -23123,57 +24105,57 @@
       "dev": true
     },
     "array.prototype.findlastindex": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz",
-      "integrity": "sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
+      "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.2",
+        "es-abstract": "^1.23.9",
         "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "es-shim-unscopables": "^1.0.2"
+        "es-object-atoms": "^1.1.1",
+        "es-shim-unscopables": "^1.1.0"
       }
     },
     "array.prototype.flat": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
-      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0"
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
       }
     },
     "array.prototype.flatmap": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
-      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "es-shim-unscopables": "^1.0.0"
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
       }
     },
     "arraybuffer.prototype.slice": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
-      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
       "dev": true,
       "requires": {
         "array-buffer-byte-length": "^1.0.1",
-        "call-bind": "^1.0.5",
+        "call-bind": "^1.0.8",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.22.3",
-        "es-errors": "^1.2.1",
-        "get-intrinsic": "^1.2.3",
-        "is-array-buffer": "^3.0.4",
-        "is-shared-array-buffer": "^1.0.2"
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
       }
     },
     "arrify": {
@@ -23206,6 +24188,12 @@
       "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==",
       "dev": true
     },
+    "async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -23597,16 +24585,35 @@
       }
     },
     "call-bind": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
       "dev": true,
       "requires": {
+        "call-bind-apply-helpers": "^1.0.0",
         "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
         "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
+        "set-function-length": "^1.2.2"
+      }
+    },
+    "call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      }
+    },
+    "call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "dev": true,
+      "requires": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
       }
     },
     "callsites": {
@@ -23633,9 +24640,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001696",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001696.tgz",
-      "integrity": "sha512-pDCPkvzfa39ehJtJ+OwGT/2yvT2SbjfHhiIW2LWOAcMQ7BzwxT/XuyUp4OTOd0XFWA6BKw0JalnBHgSi5DGJBQ==",
+      "version": "1.0.30001769",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001769.tgz",
+      "integrity": "sha512-BCfFL1sHijQlBGWBMuJyhZUhzo7wer5sVj9hqekB/7xn0Ypy+pER/edCYQm4exbXj4WiySGp40P8UuTh6w1srg==",
       "dev": true
     },
     "chalk": {
@@ -23943,9 +24950,9 @@
       "dev": true
     },
     "comment-parser": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.4.1.tgz",
-      "integrity": "sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==",
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/comment-parser/-/comment-parser-1.4.5.tgz",
+      "integrity": "sha512-aRDkn3uyIlCFfk5NUA+VdwMmMsh8JGhc4hapfV4yxymHGQ3BVskMQfoXGpCo5IoBuQ9tS5iiVKhCpTcB4pW4qw==",
       "dev": true
     },
     "commondir": {
@@ -24544,34 +25551,34 @@
       }
     },
     "data-view-buffer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
-      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.6",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.1"
+        "is-data-view": "^1.0.2"
       }
     },
     "data-view-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
-      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.7",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "is-data-view": "^1.0.1"
+        "is-data-view": "^1.0.2"
       }
     },
     "data-view-byte-offset": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
-      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.6",
+        "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
         "is-data-view": "^1.0.1"
       }
@@ -24583,9 +25590,9 @@
       "dev": true
     },
     "debug": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
       "devOptional": true,
       "requires": {
         "ms": "^2.1.3"
@@ -24881,6 +25888,17 @@
         }
       }
     },
+    "dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "dev": true,
+      "requires": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      }
+    },
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
@@ -24938,67 +25956,72 @@
       }
     },
     "es-abstract": {
-      "version": "1.23.3",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
-      "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==",
+      "version": "1.24.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.1.tgz",
+      "integrity": "sha512-zHXBLhP+QehSSbsS9Pt23Gg964240DPd6QCf8WpkqEXxQ7fhdZzYsocOr5u7apWonsS5EjZDmTF+/slGMyasvw==",
       "dev": true,
       "requires": {
-        "array-buffer-byte-length": "^1.0.1",
-        "arraybuffer.prototype.slice": "^1.0.3",
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
         "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
-        "data-view-buffer": "^1.0.1",
-        "data-view-byte-length": "^1.0.1",
-        "data-view-byte-offset": "^1.0.0",
-        "es-define-property": "^1.0.0",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "es-set-tostringtag": "^2.0.3",
-        "es-to-primitive": "^1.2.1",
-        "function.prototype.name": "^1.1.6",
-        "get-intrinsic": "^1.2.4",
-        "get-symbol-description": "^1.0.2",
-        "globalthis": "^1.0.3",
-        "gopd": "^1.0.1",
+        "es-object-atoms": "^1.1.1",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
         "has-property-descriptors": "^1.0.2",
-        "has-proto": "^1.0.3",
-        "has-symbols": "^1.0.3",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
         "hasown": "^2.0.2",
-        "internal-slot": "^1.0.7",
-        "is-array-buffer": "^3.0.4",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
         "is-callable": "^1.2.7",
-        "is-data-view": "^1.0.1",
+        "is-data-view": "^1.0.2",
         "is-negative-zero": "^2.0.3",
-        "is-regex": "^1.1.4",
-        "is-shared-array-buffer": "^1.0.3",
-        "is-string": "^1.0.7",
-        "is-typed-array": "^1.1.13",
-        "is-weakref": "^1.0.2",
-        "object-inspect": "^1.13.1",
+        "is-regex": "^1.2.1",
+        "is-set": "^2.0.3",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.1",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.4",
         "object-keys": "^1.1.1",
-        "object.assign": "^4.1.5",
-        "regexp.prototype.flags": "^1.5.2",
-        "safe-array-concat": "^1.1.2",
-        "safe-regex-test": "^1.0.3",
-        "string.prototype.trim": "^1.2.9",
-        "string.prototype.trimend": "^1.0.8",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.4",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "stop-iteration-iterator": "^1.1.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
         "string.prototype.trimstart": "^1.0.8",
-        "typed-array-buffer": "^1.0.2",
-        "typed-array-byte-length": "^1.0.1",
-        "typed-array-byte-offset": "^1.0.2",
-        "typed-array-length": "^1.0.6",
-        "unbox-primitive": "^1.0.2",
-        "which-typed-array": "^1.1.15"
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.19"
       }
     },
     "es-define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
-      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dev": true,
-      "requires": {
-        "get-intrinsic": "^1.2.4"
-      }
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "dev": true
     },
     "es-errors": {
       "version": "1.3.0",
@@ -25006,50 +26029,45 @@
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
       "dev": true
     },
-    "es-module-lexer": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz",
-      "integrity": "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==",
-      "dev": true
-    },
     "es-object-atoms": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
-      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
       "dev": true,
       "requires": {
         "es-errors": "^1.3.0"
       }
     },
     "es-set-tostringtag": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
-      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
       "dev": true,
       "requires": {
-        "get-intrinsic": "^1.2.4",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
         "has-tostringtag": "^1.0.2",
-        "hasown": "^2.0.1"
+        "hasown": "^2.0.2"
       }
     },
     "es-shim-unscopables": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
-      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
       "dev": true,
       "requires": {
-        "hasown": "^2.0.0"
+        "hasown": "^2.0.2"
       }
     },
     "es-to-primitive": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
-      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
       "dev": true,
       "requires": {
-        "is-callable": "^1.1.4",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.2"
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
       }
     },
     "es6-error": {
@@ -25392,9 +26410,9 @@
       }
     },
     "eslint-config-prettier": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.0.1.tgz",
-      "integrity": "sha512-lZBts941cyJyeaooiKxAtzoPHTN+GbQTJFAIdQbRhA4/8whaAraEh47Whw/ZFfrjNSnlAxqfm9i0XVAEkULjCw==",
+      "version": "10.1.8",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+      "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
       "dev": true,
       "requires": {}
     },
@@ -25421,9 +26439,9 @@
       }
     },
     "eslint-module-utils": {
-      "version": "2.12.0",
-      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz",
-      "integrity": "sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==",
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz",
+      "integrity": "sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==",
       "dev": true,
       "requires": {
         "debug": "^3.2.7"
@@ -25441,29 +26459,29 @@
       }
     },
     "eslint-plugin-import": {
-      "version": "2.31.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz",
-      "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==",
+      "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "requires": {
         "@rtsao/scc": "^1.1.0",
-        "array-includes": "^3.1.8",
-        "array.prototype.findlastindex": "^1.2.5",
-        "array.prototype.flat": "^1.3.2",
-        "array.prototype.flatmap": "^1.3.2",
+        "array-includes": "^3.1.9",
+        "array.prototype.findlastindex": "^1.2.6",
+        "array.prototype.flat": "^1.3.3",
+        "array.prototype.flatmap": "^1.3.3",
         "debug": "^3.2.7",
         "doctrine": "^2.1.0",
         "eslint-import-resolver-node": "^0.3.9",
-        "eslint-module-utils": "^2.12.0",
+        "eslint-module-utils": "^2.12.1",
         "hasown": "^2.0.2",
-        "is-core-module": "^2.15.1",
+        "is-core-module": "^2.16.1",
         "is-glob": "^4.0.3",
         "minimatch": "^3.1.2",
         "object.fromentries": "^2.0.8",
         "object.groupby": "^1.0.3",
-        "object.values": "^1.2.0",
+        "object.values": "^1.2.1",
         "semver": "^6.3.1",
-        "string.prototype.trimend": "^1.0.8",
+        "string.prototype.trimend": "^1.0.9",
         "tsconfig-paths": "^3.15.0"
       },
       "dependencies": {
@@ -25494,31 +26512,34 @@
       }
     },
     "eslint-plugin-jest": {
-      "version": "28.11.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-28.11.0.tgz",
-      "integrity": "sha512-QAfipLcNCWLVocVbZW8GimKn5p5iiMcgGbRzz8z/P5q7xw+cNEpYqyzFMtIF/ZgF2HLOyy+dYBut+DoYolvqig==",
+      "version": "29.13.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-29.13.0.tgz",
+      "integrity": "sha512-VoONe0NsaQLb7ijvg4k35rzchqfyCaBsXammNMCkTyLvKLTpzQOVdXiPC54q7Vp/W7shMcqPBLwAc3yRSiGjSQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/utils": "^6.0.0 || ^7.0.0 || ^8.0.0"
+        "@typescript-eslint/utils": "^8.0.0"
       }
     },
     "eslint-plugin-jsdoc": {
-      "version": "50.6.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-50.6.3.tgz",
-      "integrity": "sha512-NxbJyt1M5zffPcYZ8Nb53/8nnbIScmiLAMdoe0/FAszwb7lcSiX3iYBTsuF7RV84dZZJC8r3NghomrUXsmWvxQ==",
+      "version": "62.5.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-62.5.4.tgz",
+      "integrity": "sha512-U+Q5ppErmC17VFQl542eBIaXcuq975BzoIHBXyx7UQx/i4gyHXxPiBkonkuxWyFA98hGLALLUuD+NJcXqSGKxg==",
       "dev": true,
       "requires": {
-        "@es-joy/jsdoccomment": "~0.49.0",
+        "@es-joy/jsdoccomment": "~0.84.0",
+        "@es-joy/resolve.exports": "1.2.0",
         "are-docs-informative": "^0.0.2",
-        "comment-parser": "1.4.1",
-        "debug": "^4.3.6",
+        "comment-parser": "1.4.5",
+        "debug": "^4.4.3",
         "escape-string-regexp": "^4.0.0",
-        "espree": "^10.1.0",
-        "esquery": "^1.6.0",
-        "parse-imports": "^2.1.1",
-        "semver": "^7.6.3",
+        "espree": "^11.1.0",
+        "esquery": "^1.7.0",
+        "html-entities": "^2.6.0",
+        "object-deep-merge": "^2.0.0",
+        "parse-imports-exports": "^0.2.4",
+        "semver": "^7.7.3",
         "spdx-expression-parse": "^4.0.0",
-        "synckit": "^0.9.1"
+        "to-valid-identifier": "^1.0.0"
       },
       "dependencies": {
         "escape-string-regexp": {
@@ -25527,10 +26548,27 @@
           "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
           "dev": true
         },
+        "eslint-visitor-keys": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.0.tgz",
+          "integrity": "sha512-A0XeIi7CXU7nPlfHS9loMYEKxUaONu/hTEzHTGba9Huu94Cq1hPivf+DE5erJozZOky0LfvXAyrV/tcswpLI0Q==",
+          "dev": true
+        },
+        "espree": {
+          "version": "11.1.0",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-11.1.0.tgz",
+          "integrity": "sha512-WFWYhO1fV4iYkqOOvq8FbqIhr2pYfoDY0kCotMkDeNtGpiGGkZ1iov2u8ydjtgM8yF8rzK7oaTbw2NAzbAbehw==",
+          "dev": true,
+          "requires": {
+            "acorn": "^8.15.0",
+            "acorn-jsx": "^5.3.2",
+            "eslint-visitor-keys": "^5.0.0"
+          }
+        },
         "semver": {
-          "version": "7.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-          "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+          "version": "7.7.4",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+          "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
           "dev": true
         },
         "spdx-expression-parse": {
@@ -25599,9 +26637,9 @@
       "dev": true
     },
     "esquery": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
-      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
       "devOptional": true,
       "requires": {
         "estraverse": "^5.1.0"
@@ -26155,12 +27193,12 @@
       "devOptional": true
     },
     "for-each": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
+      "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
       "dev": true,
       "requires": {
-        "is-callable": "^1.1.3"
+        "is-callable": "^1.2.7"
       }
     },
     "for-in": {
@@ -26303,15 +27341,17 @@
       "dev": true
     },
     "function.prototype.name": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
-      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "define-properties": "^1.2.0",
-        "es-abstract": "^1.22.1",
-        "functions-have-names": "^1.2.3"
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
       }
     },
     "functions-have-names": {
@@ -26320,6 +27360,12 @@
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
       "dev": true
     },
+    "generator-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz",
+      "integrity": "sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==",
+      "dev": true
+    },
     "gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -26332,16 +27378,21 @@
       "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
     },
     "get-intrinsic": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
-      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
       "dev": true,
       "requires": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
         "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
         "function-bind": "^1.1.2",
-        "has-proto": "^1.0.1",
-        "has-symbols": "^1.0.3",
-        "hasown": "^2.0.0"
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
       }
     },
     "get-package-type": {
@@ -26373,6 +27424,16 @@
         }
       }
     },
+    "get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "requires": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      }
+    },
     "get-stdin": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz",
@@ -26386,14 +27447,14 @@
       "dev": true
     },
     "get-symbol-description": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
-      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.5",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4"
+        "get-intrinsic": "^1.2.6"
       }
     },
     "get-value": {
@@ -26589,12 +27650,13 @@
       "dev": true
     },
     "globalthis": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
-      "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
       "dev": true,
       "requires": {
-        "define-properties": "^1.1.3"
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
       }
     },
     "globby": {
@@ -26618,25 +27680,16 @@
       "dev": true
     },
     "gopd": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
-      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
-      "requires": {
-        "get-intrinsic": "^1.1.3"
-      }
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "dev": true
     },
     "graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
-    "graphemer": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
-      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-      "dev": true
-    },
     "handlebars": {
       "version": "4.7.7",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.7.tgz",
@@ -26657,9 +27710,9 @@
       "dev": true
     },
     "has-bigints": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
       "dev": true
     },
     "has-flag": {
@@ -26678,15 +27731,18 @@
       }
     },
     "has-proto": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
-      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
-      "dev": true
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "requires": {
+        "dunder-proto": "^1.0.0"
+      }
     },
     "has-symbols": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
       "dev": true
     },
     "has-tostringtag": {
@@ -26800,6 +27856,12 @@
         "whatwg-encoding": "^2.0.0"
       }
     },
+    "html-entities": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.6.0.tgz",
+      "integrity": "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==",
+      "dev": true
+    },
     "html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -26965,14 +28027,14 @@
       "dev": true
     },
     "internal-slot": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
-      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
       "dev": true,
       "requires": {
         "es-errors": "^1.3.0",
-        "hasown": "^2.0.0",
-        "side-channel": "^1.0.4"
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
       }
     },
     "interpret": {
@@ -27002,13 +28064,14 @@
       }
     },
     "is-array-buffer": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
-      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "get-intrinsic": "^1.2.1"
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
       }
     },
     "is-arrayish": {
@@ -27017,13 +28080,26 @@
       "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
       "dev": true
     },
+    "is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "requires": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      }
+    },
     "is-bigint": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
-      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
       "dev": true,
       "requires": {
-        "has-bigints": "^1.0.1"
+        "has-bigints": "^1.0.2"
       }
     },
     "is-binary-path": {
@@ -27036,13 +28112,13 @@
       }
     },
     "is-boolean-object": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
-      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
+      "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
       }
     },
     "is-buffer": {
@@ -27087,19 +28163,25 @@
       }
     },
     "is-data-view": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
-      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
       "dev": true,
       "requires": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
         "is-typed-array": "^1.1.13"
       }
     },
     "is-date-object": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
-      "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==",
-      "dev": true
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      }
     },
     "is-descriptor": {
       "version": "0.1.6",
@@ -27137,6 +28219,15 @@
       "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
       "devOptional": true
     },
+    "is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.3"
+      }
+    },
     "is-fullwidth-code-point": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
@@ -27148,6 +28239,19 @@
       "integrity": "sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==",
       "dev": true
     },
+    "is-generator-function": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz",
+      "integrity": "sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.4",
+        "generator-function": "^2.0.0",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      }
+    },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -27157,6 +28261,12 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true
+    },
     "is-negative-zero": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
@@ -27169,12 +28279,13 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
     "is-number-object": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
-      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
       "dev": true,
       "requires": {
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
       }
     },
     "is-obj": {
@@ -27205,13 +28316,15 @@
       "dev": true
     },
     "is-regex": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
-      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
       }
     },
     "is-regexp": {
@@ -27220,13 +28333,19 @@
       "integrity": "sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA==",
       "dev": true
     },
+    "is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true
+    },
     "is-shared-array-buffer": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
-      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.7"
+        "call-bound": "^1.0.3"
       }
     },
     "is-stream": {
@@ -27236,21 +28355,24 @@
       "dev": true
     },
     "is-string": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
-      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
       "dev": true,
       "requires": {
-        "has-tostringtag": "^1.0.0"
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
       }
     },
     "is-symbol": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
-      "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
       "dev": true,
       "requires": {
-        "has-symbols": "^1.0.1"
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
       }
     },
     "is-text-path": {
@@ -27263,12 +28385,12 @@
       }
     },
     "is-typed-array": {
-      "version": "1.1.13",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
-      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
       "dev": true,
       "requires": {
-        "which-typed-array": "^1.1.14"
+        "which-typed-array": "^1.1.16"
       }
     },
     "is-typedarray": {
@@ -27278,13 +28400,29 @@
       "dev": true,
       "peer": true
     },
+    "is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true
+    },
     "is-weakref": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
-      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
+      "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2"
+        "call-bound": "^1.0.3"
+      }
+    },
+    "is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
       }
     },
     "is-windows": {
@@ -29056,9 +30194,9 @@
       }
     },
     "jsdoc-type-pratt-parser": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz",
-      "integrity": "sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-7.1.1.tgz",
+      "integrity": "sha512-/2uqY7x6bsrpi3i9LVU6J89352C0rpMk0as8trXxCtvd4kPk1ke/Eyif6wqfSLvoNJqcDG9Vk4UsXgygzCt2xA==",
       "dev": true
     },
     "jsdom": {
@@ -29165,12 +30303,6 @@
         "minimist": "^1.2.0"
       }
     },
-    "jsonc-parser": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.1.tgz",
-      "integrity": "sha512-AilxAyFOAcK5wA1+LeaySVBrHsGQvUFCDWXKpZjzaL0PqW+xfBOttn8GNtWKFWqneyMZj41MWF9Kl6iPWLwgOA==",
-      "dev": true
-    },
     "jsonfile": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -29298,6 +30430,15 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "dev": true,
+      "requires": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "live-server": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/live-server/-/live-server-1.2.1.tgz",
@@ -29603,10 +30744,32 @@
         "object-visit": "^1.0.0"
       }
     },
-    "marked": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
-      "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+    "markdown-it": {
+      "version": "14.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.1.tgz",
+      "integrity": "sha512-BuU2qnTti9YKgK5N+IeMubp14ZUKUUw7yeJbkjtosvHiP0AZ5c8IAgEMk79D0eC8F23r4Ac/q8cAIFdm2FtyoA==",
+      "dev": true,
+      "requires": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+          "dev": true
+        }
+      }
+    },
+    "math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
       "dev": true
     },
     "mathml-tag-names": {
@@ -29615,6 +30778,12 @@
       "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
       "dev": true
     },
+    "mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "dev": true
+    },
     "memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -30478,10 +31647,16 @@
         }
       }
     },
+    "object-deep-merge": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/object-deep-merge/-/object-deep-merge-2.0.0.tgz",
+      "integrity": "sha512-3DC3UMpeffLTHiuXSy/UG4NOIYTLlY9u3V82+djSCLYClWobZiS4ivYzpIUWrRY/nfsJ8cWsKyG3QfyLePmhvg==",
+      "dev": true
+    },
     "object-inspect": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
-      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
       "dev": true
     },
     "object-keys": {
@@ -30500,14 +31675,16 @@
       }
     },
     "object.assign": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
-      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.5",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
         "define-properties": "^1.2.1",
-        "has-symbols": "^1.0.3",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
         "object-keys": "^1.1.1"
       }
     },
@@ -30544,12 +31721,13 @@
       }
     },
     "object.values": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
-      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
         "define-properties": "^1.2.1",
         "es-object-atoms": "^1.0.0"
       }
@@ -30624,6 +31802,17 @@
       "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
     },
+    "own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      }
+    },
     "p-limit": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
@@ -30680,14 +31869,13 @@
         "callsites": "^3.0.0"
       }
     },
-    "parse-imports": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/parse-imports/-/parse-imports-2.2.1.tgz",
-      "integrity": "sha512-OL/zLggRp8mFhKL0rNORUTR4yBYujK/uU+xZL+/0Rgm2QE4nLO9v8PzEweSJEbMGKmDRjJE4R3IMJlL2di4JeQ==",
+    "parse-imports-exports": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/parse-imports-exports/-/parse-imports-exports-0.2.4.tgz",
+      "integrity": "sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ==",
       "dev": true,
       "requires": {
-        "es-module-lexer": "^1.5.3",
-        "slashes": "^3.0.12"
+        "parse-statements": "1.0.11"
       }
     },
     "parse-json": {
@@ -30700,6 +31888,12 @@
         "json-parse-better-errors": "^1.0.1"
       }
     },
+    "parse-statements": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/parse-statements/-/parse-statements-1.0.11.tgz",
+      "integrity": "sha512-HlsyYdMBnbPQ9Jr/VgJ1YF4scnldvJpJxCVx6KgqPL4dxppsWrJHCIIxQXMJrqGnsRkNPATbeMJ8Yxu7JMsYcA==",
+      "dev": true
+    },
     "parse5": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
@@ -31030,9 +32224,9 @@
       "dev": true
     },
     "possible-typed-array-names": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
-      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
+      "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
       "dev": true
     },
     "postcss": {
@@ -31440,6 +32634,12 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "devOptional": true
     },
+    "punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "dev": true
+    },
     "pure-rand": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.1.0.tgz",
@@ -31675,6 +32875,22 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      }
+    },
     "regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -31691,15 +32907,17 @@
       }
     },
     "regexp.prototype.flags": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
-      "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.6",
+        "call-bind": "^1.0.8",
         "define-properties": "^1.2.1",
         "es-errors": "^1.3.0",
-        "set-function-name": "^2.0.1"
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
       }
     },
     "release-zalgo": {
@@ -31754,6 +32972,12 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "reserved-identifiers": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/reserved-identifiers/-/reserved-identifiers-1.2.0.tgz",
+      "integrity": "sha512-yE7KUfFvaBFzGPs5H3Ops1RevfUEsDc5Iz65rOwWg4lE8HJSYtle77uul3+573457oHvBKuHYDl/xqUkKpEEdw==",
+      "dev": true
+    },
     "resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -31836,14 +33060,15 @@
       }
     },
     "safe-array-concat": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
-      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.7",
-        "get-intrinsic": "^1.2.4",
-        "has-symbols": "^1.0.3",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
         "isarray": "^2.0.5"
       },
       "dependencies": {
@@ -31860,6 +33085,24 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
+    "safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+          "dev": true
+        }
+      }
+    },
     "safe-regex": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
@@ -31870,14 +33113,14 @@
       }
     },
     "safe-regex-test": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
-      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.6",
+        "call-bound": "^1.0.2",
         "es-errors": "^1.3.0",
-        "is-regex": "^1.1.4"
+        "is-regex": "^1.2.1"
       }
     },
     "safer-buffer": {
@@ -32082,6 +33325,17 @@
         "has-property-descriptors": "^1.0.2"
       }
     },
+    "set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "requires": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      }
+    },
     "set-value": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
@@ -32142,28 +33396,52 @@
         "rechoir": "^0.6.2"
       }
     },
-    "shiki": {
-      "version": "0.14.7",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-0.14.7.tgz",
-      "integrity": "sha512-dNPAPrxSc87ua2sKJ3H5dQ/6ZaY8RNnaAqK+t0eG7p0Soi2ydiqbGOTaZCqaYvA/uZYfS1LJnemt3Q+mSfcPCg==",
+    "side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
       "dev": true,
       "requires": {
-        "ansi-sequence-parser": "^1.1.0",
-        "jsonc-parser": "^3.2.0",
-        "vscode-oniguruma": "^1.7.0",
-        "vscode-textmate": "^8.0.0"
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
       }
     },
-    "side-channel": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
-      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+    "side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.7",
         "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.4",
-        "object-inspect": "^1.13.1"
+        "object-inspect": "^1.13.3"
+      }
+    },
+    "side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      }
+    },
+    "side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
       }
     },
     "signal-exit": {
@@ -32201,12 +33479,6 @@
       "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
       "dev": true
     },
-    "slashes": {
-      "version": "3.0.12",
-      "resolved": "https://registry.npmjs.org/slashes/-/slashes-3.0.12.tgz",
-      "integrity": "sha512-Q9VME8WyGkc7pJf6QEkj3wE+2CnvZMI+XJhwdTPR8Z/kWQRXi7boAWLDibRPyHRTUTPx5FaU7MsyrjI3yLB4HA==",
-      "dev": true
-    },
     "slice-ansi": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
@@ -32590,6 +33862,16 @@
       "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
       "dev": true
     },
+    "stop-iteration-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
+      "integrity": "sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==",
+      "dev": true,
+      "requires": {
+        "es-errors": "^1.3.0",
+        "internal-slot": "^1.1.0"
+      }
+    },
     "stream-combiner": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
@@ -32648,24 +33930,28 @@
       }
     },
     "string.prototype.trim": {
-      "version": "1.2.9",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
-      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
         "define-properties": "^1.2.1",
-        "es-abstract": "^1.23.0",
-        "es-object-atoms": "^1.0.0"
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
       }
     },
     "string.prototype.trimend": {
-      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
-      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
         "define-properties": "^1.2.1",
         "es-object-atoms": "^1.0.0"
       }
@@ -33171,16 +34457,6 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
       "dev": true
     },
-    "synckit": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz",
-      "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==",
-      "dev": true,
-      "requires": {
-        "@pkgr/core": "^0.1.0",
-        "tslib": "^2.6.2"
-      }
-    },
     "table": {
       "version": "6.8.0",
       "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
@@ -33274,6 +34550,31 @@
         "xtend": "~4.0.1"
       }
     },
+    "tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "requires": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "dependencies": {
+        "fdir": {
+          "version": "6.5.0",
+          "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+          "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+          "dev": true,
+          "requires": {}
+        },
+        "picomatch": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+          "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+          "dev": true
+        }
+      }
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -33334,6 +34635,16 @@
         "is-number": "^7.0.0"
       }
     },
+    "to-valid-identifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-valid-identifier/-/to-valid-identifier-1.0.0.tgz",
+      "integrity": "sha512-41wJyvKep3yT2tyPqX/4blcfybknGB4D+oETKLs7Q76UiPqRpUJK3hr1nxelyYO0PHKVzJwlu0aCeEAsGI6rpw==",
+      "dev": true,
+      "requires": {
+        "@sindresorhus/base62": "^1.0.0",
+        "reserved-identifiers": "^1.0.0"
+      }
+    },
     "touch": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
@@ -33399,9 +34710,9 @@
       }
     },
     "ts-api-utils": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.0.1.tgz",
-      "integrity": "sha512-dnlgjFSVetynI8nzgJ+qF62efpglpWRk8isUEWZGWlJYySCTD6aKvbUDu+zbPeDakk3bg5H4XpitHukgfL1m9w==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
+      "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
       "dev": true,
       "requires": {}
     },
@@ -33479,9 +34790,9 @@
       }
     },
     "tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
     "type-check": {
       "version": "0.3.2",
@@ -33499,55 +34810,56 @@
       "dev": true
     },
     "typed-array-buffer": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
-      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.7",
+        "call-bound": "^1.0.3",
         "es-errors": "^1.3.0",
-        "is-typed-array": "^1.1.13"
+        "is-typed-array": "^1.1.14"
       }
     },
     "typed-array-byte-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
-      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
         "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
-        "is-typed-array": "^1.1.13"
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
       }
     },
     "typed-array-byte-offset": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
-      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
       "dev": true,
       "requires": {
         "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
+        "call-bind": "^1.0.8",
         "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
-        "is-typed-array": "^1.1.13"
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
       }
     },
     "typed-array-length": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
-      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.7",
         "for-each": "^0.3.3",
         "gopd": "^1.0.1",
-        "has-proto": "^1.0.3",
         "is-typed-array": "^1.1.13",
-        "possible-typed-array-names": "^1.0.0"
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
       }
     },
     "typedarray-to-buffer": {
@@ -33561,34 +34873,41 @@
       }
     },
     "typedoc": {
-      "version": "0.25.13",
-      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.25.13.tgz",
-      "integrity": "sha512-pQqiwiJ+Z4pigfOnnysObszLiU3mVLWAExSPf+Mu06G/qsc3wzbuM56SZQvONhHLncLUhYzOVkjFFpFfL5AzhQ==",
+      "version": "0.28.16",
+      "resolved": "https://registry.npmjs.org/typedoc/-/typedoc-0.28.16.tgz",
+      "integrity": "sha512-x4xW77QC3i5DUFMBp0qjukOTnr/sSg+oEs86nB3LjDslvAmwe/PUGDWbe3GrIqt59oTqoXK5GRK9tAa0sYMiog==",
       "dev": true,
       "requires": {
+        "@gerrit0/mini-shiki": "^3.17.0",
         "lunr": "^2.3.9",
-        "marked": "^4.3.0",
-        "minimatch": "^9.0.3",
-        "shiki": "^0.14.7"
+        "markdown-it": "^14.1.0",
+        "minimatch": "^9.0.5",
+        "yaml": "^2.8.1"
       },
       "dependencies": {
         "brace-expansion": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-          "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+          "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
           "dev": true,
           "requires": {
             "balanced-match": "^1.0.0"
           }
         },
         "minimatch": {
-          "version": "9.0.4",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
-          "integrity": "sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==",
+          "version": "9.0.5",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+          "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
           "dev": true,
           "requires": {
             "brace-expansion": "^2.0.1"
           }
+        },
+        "yaml": {
+          "version": "2.8.2",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
+          "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+          "dev": true
         }
       }
     },
@@ -33605,16 +34924,22 @@
       }
     },
     "typedoc-plugin-missing-exports": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/typedoc-plugin-missing-exports/-/typedoc-plugin-missing-exports-2.2.0.tgz",
-      "integrity": "sha512-2+XR1IcyQ5UwXZVJe9NE6HrLmNufT9i5OwoIuuj79VxuA3eYq+Y6itS9rnNV1D7UeQnUSH8kISYD73gHE5zw+w==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/typedoc-plugin-missing-exports/-/typedoc-plugin-missing-exports-4.1.2.tgz",
+      "integrity": "sha512-WNoeWX9+8X3E3riuYPduilUTFefl1K+Z+5bmYqNeH5qcWjtnTRMbRzGdEQ4XXn1WEO4WCIlU0vf46Ca2y/mspg==",
       "dev": true,
       "requires": {}
     },
     "typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true
+    },
+    "uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
       "dev": true
     },
     "uglify-js": {
@@ -33625,15 +34950,15 @@
       "optional": true
     },
     "unbox-primitive": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
-      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
       "dev": true,
       "requires": {
-        "call-bind": "^1.0.2",
+        "call-bound": "^1.0.3",
         "has-bigints": "^1.0.2",
-        "has-symbols": "^1.0.3",
-        "which-boxed-primitive": "^1.0.2"
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
       }
     },
     "undefsafe": {
@@ -33648,6 +34973,11 @@
       "integrity": "sha512-hzSoAVtJF+3ZtiFX0VgfFPHEDRm7Y/QPjGyNo4TVdnDTdft3tr8hEkD25a1jC+TjTuE7tkHGKkhwCgs9dgBB2g==",
       "dev": true
     },
+    "undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="
+    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
@@ -33833,18 +35163,6 @@
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
       "dev": true
     },
-    "vscode-oniguruma": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/vscode-oniguruma/-/vscode-oniguruma-1.7.0.tgz",
-      "integrity": "sha512-L9WMGRfrjOhgHSdOYgCt/yRMsXzLDJSL7BPrOZt73gU0iWO4mpqzqQzOz5srxqTvMBaR0XZTSrVWo4j55Rc6cA==",
-      "dev": true
-    },
-    "vscode-textmate": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/vscode-textmate/-/vscode-textmate-8.0.0.tgz",
-      "integrity": "sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==",
-      "dev": true
-    },
     "w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
@@ -33935,16 +35253,57 @@
       }
     },
     "which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "requires": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      }
+    },
+    "which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "requires": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+          "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+          "dev": true
+        }
+      }
+    },
+    "which-collection": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
-      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
       "dev": true,
       "requires": {
-        "is-bigint": "^1.0.1",
-        "is-boolean-object": "^1.1.0",
-        "is-number-object": "^1.0.4",
-        "is-string": "^1.0.5",
-        "is-symbol": "^1.0.3"
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
       }
     },
     "which-module": {
@@ -33955,15 +35314,17 @@
       "peer": true
     },
     "which-typed-array": {
-      "version": "1.1.15",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
-      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
+      "version": "1.1.20",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.20.tgz",
+      "integrity": "sha512-LYfpUkmqwl0h9A2HL09Mms427Q1RZWuOHsukfVcKRq9q95iQxdw0ix1JQrqbcDR9PH1QDwf5Qo8OZb5lksZ8Xg==",
       "dev": true,
       "requires": {
         "available-typed-arrays": "^1.0.7",
-        "call-bind": "^1.0.7",
-        "for-each": "^0.3.3",
-        "gopd": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "for-each": "^0.3.5",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
         "has-tostringtag": "^1.0.2"
       }
     },
diff --git a/package.json b/package.json
index 30995fb2f9..b7d1d550cc 100644
--- a/package.json
+++ b/package.json
@@ -105,12 +105,12 @@
     "@types/live-server": "1.2.0",
     "@types/localforage": "0.0.34",
     "@types/lz-string": "1.3.34",
-    "@types/node": "18.11.9",
+    "@types/node": "25.2.3",
     "@types/prettier": "2.1.6",
     "@types/prismjs": "1.16.3",
     "@types/react": "19.0.10",
-    "@typescript-eslint/eslint-plugin": "8.24.1",
-    "@typescript-eslint/parser": "8.24.1",
+    "@typescript-eslint/eslint-plugin": "8.55.0",
+    "@typescript-eslint/parser": "8.55.0",
     "@typescript/vfs": "1.5.3",
     "@vue/runtime-core": "3.2.45",
     "autoprefixer": "10.4.2",
@@ -124,10 +124,10 @@
     "esbuild-plugin-minify-html": "0.1.2",
     "esbuild-plugin-replace": "1.4.0",
     "eslint": "9.20.1",
-    "eslint-config-prettier": "10.0.1",
-    "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-jest": "28.11.0",
-    "eslint-plugin-jsdoc": "50.6.3",
+    "eslint-config-prettier": "10.1.8",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-jest": "29.13.0",
+    "eslint-plugin-jsdoc": "62.5.4",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "gh-pages": "6.1.0",
     "globals": "15.15.0",
@@ -146,25 +146,42 @@
     "stylelint": "14.5.0",
     "stylelint-config-sass-guidelines": "9.0.1",
     "ts-jest": "29.1.0",
-    "tslib": "2.6.2",
-    "typedoc": "0.25.13",
-    "typedoc-plugin-missing-exports": "2.2.0",
-    "typescript": "5.4.5"
+    "tslib": "2.8.1",
+    "typedoc": "0.28.16",
+    "typedoc-plugin-missing-exports": "4.1.2",
+    "typescript": "5.9.3"
   },
   "prettier": {
     "semi": true,
     "singleQuote": true,
     "trailingComma": "all",
     "printWidth": 100,
-    "plugins": ["prettier-plugin-organize-imports"]
+    "plugins": [
+      "prettier-plugin-organize-imports"
+    ]
   },
   "jest": {
     "preset": "ts-jest",
     "testEnvironment": "jsdom",
-    "setupFiles": ["<rootDir>/.jest/setup.ts"],
-    "testPathIgnorePatterns": ["/node_modules/", "/build/", "/src/modules/"],
-    "collectCoverageFrom": ["src/**/*.ts", "!**/build/**", "!**/vendor/**", "!src/modules/**"],
-    "coverageReporters": ["json", "html", "lcov"],
+    "setupFiles": [
+      "<rootDir>/.jest/setup.ts"
+    ],
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/build/",
+      "/src/modules/"
+    ],
+    "collectCoverageFrom": [
+      "src/**/*.ts",
+      "!**/build/**",
+      "!**/vendor/**",
+      "!src/modules/**"
+    ],
+    "coverageReporters": [
+      "json",
+      "html",
+      "lcov"
+    ],
     "resolveJsonModule": true
   }
 }
diff --git a/src/livecodes/_modules.ts b/src/livecodes/_modules.ts
index 7b329cd6e8..ed5fd0848c 100644
--- a/src/livecodes/_modules.ts
+++ b/src/livecodes/_modules.ts
@@ -8,8 +8,6 @@
  * @module
  */
 
-export * as UI from './UI';
-export * as modal from './UI/modal';
 export * as cache from './cache';
 export * as compiler from './compiler';
 export * as config from './config';
@@ -30,5 +28,7 @@ export * as sync from './sync';
 export * as templates from './templates';
 export * as toolspane from './toolspane';
 export * as types from './types';
+export * as UI from './UI';
+export * as modal from './UI/modal';
 export * as utils from './utils';
 export * as vendors from './vendors';
diff --git a/storybook/package-lock.json b/storybook/package-lock.json
index 6ed903d459..214b3a82d1 100644
--- a/storybook/package-lock.json
+++ b/storybook/package-lock.json
@@ -26,9 +26,10 @@
         "@types/dedent": "0.7.0",
         "@types/flat": "5.0.2",
         "@types/react": "18.3.18",
+        "@types/webpack-env": "1.18.8",
         "babel-loader": "8.3.0",
         "cross-env": "7.0.3",
-        "typescript": "5.4.5"
+        "typescript": "5.9.3"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -4785,10 +4786,14 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.11.18",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
-      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
-      "dev": true
+      "version": "20.19.33",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.33.tgz",
+      "integrity": "sha512-Rs1bVAIdBs5gbTIKza/tgpMuG1k3U/UMJLWecIMxNdJFDMzcM5LOiLVRYh3PilWEYDIeUDv7bpiHPLPsbydGcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
     },
     "node_modules/@types/node-fetch": {
       "version": "2.6.2",
@@ -4894,10 +4899,11 @@
       }
     },
     "node_modules/@types/webpack-env": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.0.tgz",
-      "integrity": "sha512-56/MAlX5WMsPVbOg7tAxnYvNYMMWr/QJiIp6BxVSW3JJXUVzzOn64qW8TzQyMSqSUFM2+PVI4aUHcHOzIz/1tg==",
-      "dev": true
+      "version": "1.18.8",
+      "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.8.tgz",
+      "integrity": "sha512-G9eAoJRMLjcvN4I08wB5I7YofOb/kaJNd5uoCMX+LbKXTPCF+ZIHuqTnFaK9Jz1rgs035f9JUPUhNFtqgucy/A==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@types/webpack-sources": {
       "version": "3.2.0",
@@ -17009,10 +17015,11 @@
       }
     },
     "node_modules/typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -17049,6 +17056,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/unfetch": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
@@ -22075,10 +22089,13 @@
       "dev": true
     },
     "@types/node": {
-      "version": "18.11.18",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
-      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
-      "dev": true
+      "version": "20.19.33",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.33.tgz",
+      "integrity": "sha512-Rs1bVAIdBs5gbTIKza/tgpMuG1k3U/UMJLWecIMxNdJFDMzcM5LOiLVRYh3PilWEYDIeUDv7bpiHPLPsbydGcw==",
+      "dev": true,
+      "requires": {
+        "undici-types": "~6.21.0"
+      }
     },
     "@types/node-fetch": {
       "version": "2.6.2",
@@ -22184,9 +22201,9 @@
       }
     },
     "@types/webpack-env": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.0.tgz",
-      "integrity": "sha512-56/MAlX5WMsPVbOg7tAxnYvNYMMWr/QJiIp6BxVSW3JJXUVzzOn64qW8TzQyMSqSUFM2+PVI4aUHcHOzIz/1tg==",
+      "version": "1.18.8",
+      "resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.18.8.tgz",
+      "integrity": "sha512-G9eAoJRMLjcvN4I08wB5I7YofOb/kaJNd5uoCMX+LbKXTPCF+ZIHuqTnFaK9Jz1rgs035f9JUPUhNFtqgucy/A==",
       "dev": true
     },
     "@types/webpack-sources": {
@@ -31760,9 +31777,9 @@
       }
     },
     "typescript": {
-      "version": "5.4.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
-      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true
     },
     "uglify-js": {
@@ -31784,6 +31801,12 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true
+    },
     "unfetch": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
diff --git a/storybook/package.json b/storybook/package.json
index 865e539bb5..a5eb9523dd 100644
--- a/storybook/package.json
+++ b/storybook/package.json
@@ -23,9 +23,10 @@
     "@types/dedent": "0.7.0",
     "@types/flat": "5.0.2",
     "@types/react": "18.3.18",
+    "@types/webpack-env": "1.18.8",
     "babel-loader": "8.3.0",
     "cross-env": "7.0.3",
-    "typescript": "5.4.5"
+    "typescript": "5.9.3"
   },
   "dependencies": {
     "dedent": "0.7.0",
diff --git a/tsconfig.json b/tsconfig.json
index 60d238baef..eb853c04e0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -43,7 +43,7 @@
     // "emitDecoratorMetadata": true /* Enables experimental support for emitting type metadata for decorators. */,
 
     "jsx": "react-jsx",
-    "lib": ["es2021", "dom", "dom.iterable"],
+    "lib": ["esnext", "dom", "dom.iterable"],
     "types": ["node", "jest"],
     "typeRoots": ["node_modules/@types"]
   },

From dbde43b3ef7bd3e1bc69261f9f1262e5d17647ee Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Thu, 12 Feb 2026 23:35:19 +0200
Subject: [PATCH 119/143] update SDK methods to support multifile projects

---
 functions/vendors/templates.js             | 3342 +++++++++-----------
 server/src/broadcast/index.ts              |    8 +-
 src/livecodes/UI/code-to-image.ts          |    8 +-
 src/livecodes/UI/import.ts                 |    4 +-
 src/livecodes/cache/cache.ts               |   55 +-
 src/livecodes/config/build-config.ts       |    3 +-
 src/livecodes/config/config.ts             |   14 +-
 src/livecodes/core.ts                      |  229 +-
 src/livecodes/export/utils.ts              |    8 +-
 src/livecodes/import/code.ts               |    4 +-
 src/livecodes/import/image.ts              |    4 +-
 src/livecodes/import/import.ts             |    4 +-
 src/livecodes/import/url.ts                |    2 +-
 src/livecodes/services/share.ts            |    4 +-
 src/livecodes/types/type-loader.ts         |    2 +-
 src/sdk/__tests__/getPlaygroundUrl.test.ts |    5 +-
 src/sdk/models.ts                          |  150 +-
 17 files changed, 1763 insertions(+), 2083 deletions(-)

diff --git a/functions/vendors/templates.js b/functions/vendors/templates.js
index 0b4b914cfa..aa97a86b4c 100644
--- a/functions/vendors/templates.js
+++ b/functions/vendors/templates.js
@@ -1,18 +1,1287 @@
 var getTemplateName = (_, templateName) => templateName;
-var d = {
-  name: 'angular',
-  title: getTemplateName('templates.starter.angular', 'Angular Starter'),
-  thumbnail: 'assets/templates/angular.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `<app>Loading...</app>
-`,
+var d={name:"multifile-basic",title:getTemplateName("templates.multifile.basic","Basic Template"),thumbnail:"assets/templates/blank.svg",mainFile:"index.html",activeEditor:"index.html",files:[{filename:"index.html",language:"html",content:`<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title></title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+  <body>
+
+    <script type="module" src="script.js"><\/script>
+  </body>
+</html>
+`},{filename:"styles.css",language:"css",content:""},{filename:"script.js",language:"javascript",content:""}]};var u={name:"multifile-blank",title:getTemplateName("templates.multifile.blank","Blank Template"),thumbnail:"assets/templates/blank.svg",mainFile:"index.html",activeEditor:"index.html",files:[{filename:"index.html",language:"html",content:""}]};var g={name:"multifile-javascript",title:getTemplateName("templates.multifile.javascript","JavaScript Template"),thumbnail:"assets/templates/javascript.svg",aliases:["multifile-js"],mainFile:"index.html",activeEditor:"src/main.js",files:[{filename:"index.html",language:"html",content:`<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JavaScript</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="src/main.js"><\/script>
+  </body>
+</html>
+`},{filename:"src/main.js",language:"javascript",content:`import "./style.css";
+import javascriptLogo from "./javascript.svg";
+import { setupCounter } from "./counter.js";
+
+document.querySelector("#app").innerHTML = \`
+  <div>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
+      <img src="\${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
+    </a>
+    <h1>Hello JavaScript!</h1>
+    <div class="card">
+      <button id="counter" type="button"></button>
+    </div>
+    <p class="read-the-docs">
+      Click on the JavaScript logo to learn more
+    </p>
+  </div>
+\`;
+
+setupCounter(document.querySelector("#counter"));
+`},{filename:"src/style.css",language:"css",content:`:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #f7df1eaa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+`},{filename:"src/counter.js",language:"javascript",content:`export function setupCounter(element) {
+  let counter = 0;
+  const setCounter = (count) => {
+    counter = count;
+    element.innerHTML = \`count is \${counter}\`;
+  };
+  element.addEventListener("click", () => setCounter(counter + 1));
+  setCounter(0);
+}
+`},{filename:"src/javascript.svg",language:"svg",content:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>'}]};var h={name:"multifile-jest",title:getTemplateName("templates.multifile.jest","Jest Template"),thumbnail:"assets/templates/jest.svg",mainFile:"index.html",activeEditor:"Counter.js",autotest:!0,files:[{filename:"index.html",language:"html",content:`<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title></title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>Hello, <span id="title">World</span>!</h1>
+      <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/jest.svg" />
+      <p>You clicked <span id="counter">0</span> times.</p>
+      <button id="counter-button">Click me</button>
+      <p class="info">Run tests in the "Tests" panel below.</p>
+    </div>
+
+    <script type="module" src="script.js"><\/script>
+  </body>
+</html>
+`},{filename:"styles.css",language:"css",content:`.container,
+.container button {
+  text-align: center;
+  font: 1em sans-serif;
+}
+.logo {
+  width: 150px;
+}
+.info {
+  color: #404040;
+  font-size: 0.9em;
+  margin: 2em;
+}
+`},{filename:"script.js",language:"javascript",content:`import { Counter } from './Counter.js';
+
+const title = document.querySelector("#title");
+const count = document.querySelector("#counter");
+const button = document.querySelector("#counter-button");
+
+title.innerText = "Jest";
+const counter = new Counter();
+button.addEventListener(
+  "click",
+  () => {
+    counter.increment();
+    count.innerText = counter.getValue();
   },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'typescript',
-    content: `
+  false
+);
+`},{filename:"Counter.js",language:"javascript",content:`export class Counter {
+  count;
+
+  constructor() {
+    this.count = 0;
+  }
+
+  increment() {
+    this.count += 1;
+  }
+
+  getValue() {
+    return this.count;
+  }
+}
+`}],tests:{language:"tsx",content:`import { fireEvent, screen } from "@testing-library/dom";
+import "@testing-library/jest-dom";
+import { assert } from "chai";
+import { Counter } from "./Counter.js";
+
+describe("Counter Class", () => {
+  test("Should initialize count with zero", () => {
+    const counter = new Counter();
+    expect(counter.getValue()).toBe(0);
+  });
+
+  test("Should increment", () => {
+    const counter = new Counter();
+    counter.increment();
+    counter.increment();
+    counter.increment();
+    assert.equal(counter.getValue(), 3);
+  });})
+
+describe("Page", () => {
+  test("Should display title", async () => {
+    expect(screen.getByText("Hello", { exact: false })).toHaveTextContent(
+      "Hello, Jest!"
+    );
+  });
+
+  test("Should display logo", async () => {
+    expect(document.querySelector('.logo').src).toContain('jest.svg');
+  });
+
+  test("Should increment counter on button click", async () => {
+    fireEvent.click(screen.getByText("Click me"));
+    fireEvent.click(screen.getByText("Click me"));
+    fireEvent.click(screen.getByText("Click me"));
+    expect(screen.getByText("You clicked", { exact: false })).toHaveTextContent(
+      "You clicked 3 times."
+    );
+  });
+});
+`},tools:{enabled:"all",active:"tests",status:"open"}};var f={name:"multifile-lit",title:getTemplateName("templates.multifile.lit","Lit Template"),thumbnail:"assets/templates/lit.svg",mainFile:"index.html",activeEditor:"src/my-element.js",files:[{filename:"index.html",language:"html",content:`<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lit</title>
+    <link rel="stylesheet" href="./src/index.css" />
+    <script type="module" src="src/my-element.js"><\/script>
+  </head>
+  <body>
+    <my-element>
+      <h1>Lit</h1>
+    </my-element>
+  </body>
+</html>
+`},{filename:"src/index.css",language:"css",content:`:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+}
+`},{filename:"src/my-element.js",language:"javascript",content:`import { LitElement, css, html } from "lit";
+import litLogo from "./assets/lit.svg";
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export class MyElement extends LitElement {
+  static get properties() {
+    return {
+      /**
+       * Copy for the read the docs hint.
+       */
+      docsHint: { type: String },
+
+      /**
+       * The number of times the button has been clicked.
+       */
+      count: { type: Number },
+    };
+  }
+
+  constructor() {
+    super();
+    this.docsHint = "Click on the Lit logo to learn more";
+    this.count = 0;
+  }
+
+  render() {
+    return html\`
+      <div>
+        <a href="https://lit.dev" target="_blank">
+          <img src=\${litLogo} class="logo" alt="Lit logo" />
+        </a>
+      </div>
+      <slot></slot>
+      <div class="card">
+        <button @click=\${this._onClick} part="button">
+          count is \${this.count}
+        </button>
+      </div>
+      <p class="read-the-docs">\${this.docsHint}</p>
+    \`;
+  }
+
+  _onClick() {
+    this.count++;
+  }
+
+  static get styles() {
+    return css\`
+      :host {
+        max-width: 1280px;
+        margin: 0 auto;
+        padding: 2rem;
+        text-align: center;
+      }
+
+      .logo {
+        height: 6em;
+        padding: 1.5em;
+        will-change: filter;
+        transition: filter 300ms;
+      }
+      .logo:hover {
+        filter: drop-shadow(0 0 2em #325cffaa);
+      }
+
+      .card {
+        padding: 2em;
+      }
+
+      .read-the-docs {
+        color: #888;
+      }
+
+      a {
+        font-weight: 500;
+        color: #646cff;
+        text-decoration: inherit;
+      }
+      a:hover {
+        color: #535bf2;
+      }
+
+      ::slotted(h1) {
+        font-size: 3.2em;
+        line-height: 1.1;
+      }
+
+      button {
+        border-radius: 8px;
+        border: 1px solid transparent;
+        padding: 0.6em 1.2em;
+        font-size: 1em;
+        font-weight: 500;
+        font-family: inherit;
+        background-color: #1a1a1a;
+        cursor: pointer;
+        transition: border-color 0.25s;
+      }
+      button:hover {
+        border-color: #646cff;
+      }
+      button:focus,
+      button:focus-visible {
+        outline: 4px auto -webkit-focus-ring-color;
+      }
+
+      @media (prefers-color-scheme: light) {
+        a:hover {
+          color: #747bff;
+        }
+        button {
+          background-color: #f9f9f9;
+        }
+      }
+    \`;
+  }
+}
+
+window.customElements.define("my-element", MyElement);
+`},{filename:"src/assets/lit.svg",language:"svg",content:`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="25.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 320"><path fill="#00E8FF" d="m64 192l25.926-44.727l38.233-19.114l63.974 63.974l10.833 61.754L192 320l-64-64l-38.074-25.615z"></path><path fill="#283198" d="M128 256V128l64-64v128l-64 64ZM0 256l64 64l9.202-60.602L64 192l-37.542 23.71L0 256Z"></path><path fill="#324FFF" d="M64 192V64l64-64v128l-64 64Zm128 128V192l64-64v128l-64 64ZM0 256V128l64 64l-64 64Z"></path><path fill="#0FF" d="M64 320V192l64 64z"></path></svg>
+`}]};var b={name:"multifile-preact",title:getTemplateName("templates.multifile.preact","Preact Template"),thumbnail:"assets/templates/preact.svg",mainFile:"index.html",activeEditor:"src/app.jsx",files:[{filename:"index.html",language:"html",content:`<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Preact</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="src/main.jsx"><\/script>
+  </body>
+</html>
+`},{filename:"src/main.jsx",language:"tsx",content:`/** @jsxImportSource preact */
+import { render } from "preact";
+import "./index.css";
+import { App } from "./app.jsx";
+
+render(<App />, document.getElementById("app"));
+`},{filename:"src/index.css",language:"css",content:`:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+`},{filename:"src/app.jsx",language:"jsx",content:`/** @jsxImportSource preact */
+import { useState } from "preact/hooks";
+import preactLogo from "./assets/preact.svg";
+import "./app.css";
+
+export function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <>
+      <div>
+        <a href="https://preactjs.com" target="_blank">
+          <img src={preactLogo} class="logo" alt="Preact logo" />
+        </a>
+      </div>
+      <h1>Preact</h1>
+      <div class="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+      </div>
+      <p class="read-the-docs">
+        Click on the Preact logo to learn more
+      </p>
+    </>
+  );
+}
+`},{filename:"src/app.css",language:"css",content:`#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #673ab8aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+`},{filename:"src/assets/preact.svg",language:"svg",content:`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="27.68" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 296"><path fill="#673AB8" d="m128 0l128 73.9v147.8l-128 73.9L0 221.7V73.9z"></path><path fill="#FFF" d="M34.865 220.478c17.016 21.78 71.095 5.185 122.15-34.704c51.055-39.888 80.24-88.345 63.224-110.126c-17.017-21.78-71.095-5.184-122.15 34.704c-51.055 39.89-80.24 88.346-63.224 110.126Zm7.27-5.68c-5.644-7.222-3.178-21.402 7.573-39.253c11.322-18.797 30.541-39.548 54.06-57.923c23.52-18.375 48.303-32.004 69.281-38.442c19.922-6.113 34.277-5.075 39.92 2.148c5.644 7.223 3.178 21.403-7.573 39.254c-11.322 18.797-30.541 39.547-54.06 57.923c-23.52 18.375-48.304 32.004-69.281 38.441c-19.922 6.114-34.277 5.076-39.92-2.147Z"></path><path fill="#FFF" d="M220.239 220.478c17.017-21.78-12.169-70.237-63.224-110.126C105.96 70.464 51.88 53.868 34.865 75.648c-17.017 21.78 12.169 70.238 63.224 110.126c51.055 39.889 105.133 56.485 122.15 34.704Zm-7.27-5.68c-5.643 7.224-19.998 8.262-39.92 2.148c-20.978-6.437-45.761-20.066-69.28-38.441c-23.52-18.376-42.74-39.126-54.06-57.923c-10.752-17.851-13.218-32.03-7.575-39.254c5.644-7.223 19.999-8.261 39.92-2.148c20.978 6.438 45.762 20.067 69.281 38.442c23.52 18.375 42.739 39.126 54.06 57.923c10.752 17.85 13.218 32.03 7.574 39.254Z"></path><path fill="#FFF" d="M127.552 167.667c10.827 0 19.603-8.777 19.603-19.604c0-10.826-8.776-19.603-19.603-19.603c-10.827 0-19.604 8.777-19.604 19.603c0 10.827 8.777 19.604 19.604 19.604Z"></path></svg>
+`}]};var v={name:"multifile-react",title:getTemplateName("templates.multifile.react","React Template"),thumbnail:"assets/templates/react.svg",mainFile:"index.html",activeEditor:"src/App.tsx",fileLanguages:{jsx:"react",tsx:"react.tsx"},files:[{filename:"index.html",language:"html",content:`<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="src/main.tsx"><\/script>
+  </body>
+</html>
+`},{filename:"src/main.tsx",language:"react.tsx",content:`import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);
+`},{filename:"src/index.css",language:"css",content:`:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+`},{filename:"src/App.tsx",language:"react.tsx",content:`import { useState } from "react";
+import reactLogo from "./assets/react.svg";
+import "./App.css";
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <>
+      <div>
+        <a href="https://react.dev" target="_blank">
+          <img src={reactLogo} className="logo" alt="React logo" />
+        </a>
+      </div>
+      <h1>React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+      </div>
+      <p className="read-the-docs">Click on the React logo to learn more</p>
+    </>
+  );
+}
+
+export default App;
+`},{filename:"src/App.css",language:"css",content:`#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+`},{filename:"src/assets/react.svg",language:"svg",content:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>'}]};var y={name:"multifile-solid",title:getTemplateName("templates.multifile.solid","Solid Template"),thumbnail:"assets/templates/solid.svg",mainFile:"index.html",activeEditor:"src/App.tsx",customSettings:{fileLanguages:{jsx:"solid",tsx:"solid.tsx"}},files:[{filename:"index.html",language:"html",content:`<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Solid + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="src/index.tsx"><\/script>
+  </body>
+</html>
+`},{filename:"src/index.tsx",language:"solid.tsx",content:`import { render } from 'solid-js/web'
+import './index.css'
+import App from './App.tsx'
+
+const root = document.getElementById('root')
+
+render(() => <App />, root!)
+`},{filename:"src/index.css",language:"css",content:`:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+`},{filename:"src/App.tsx",language:"solid.tsx",content:`import { createSignal } from "solid-js";
+import solidLogo from "./assets/solid.svg";
+import "./App.css";
+
+function App() {
+  const [count, setCount] = createSignal(0);
+
+  return (
+    <>
+      <div>
+        <a href="https://solidjs.com" target="_blank">
+          <img src={solidLogo} class="logo" alt="Solid logo" />
+        </a>
+      </div>
+      <h1>Solid</h1>
+      <div class="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count()}
+        </button>
+      </div>
+      <p class="read-the-docs">
+        Click on the Solid logo to learn more
+      </p>
+    </>
+  );
+}
+
+export default App;
+`},{filename:"src/App.css",language:"css",content:`#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+`},{filename:"src/assets/solid.svg",language:"svg",content:`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
+`}]};var x={name:"multifile-svelte",title:getTemplateName("templates.multifile.svelte","Svelte Template"),thumbnail:"assets/templates/svelte.svg",mainFile:"index.html",activeEditor:"src/App.svelte",files:[{filename:"index.html",language:"html",content:`<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="src/main.ts"><\/script>
+  </body>
+</html>
+`},{filename:"src/main.ts",language:"typescript",content:`import { mount } from "svelte";
+import "./app.css";
+import App from "./App.svelte";
+
+const app = mount(App, {
+  target: document.getElementById("app"),
+});
+
+export default app;
+`},{filename:"src/app.css",language:"css",content:`:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+`},{filename:"src/App.svelte",language:"svelte",content:`<script lang="ts">
+  import svelteLogo from "./assets/svelte.svg";
+  import Counter from "./lib/Counter.svelte";
+<\/script>
+
+<main>
+  <div>
+    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
+      <img src={svelteLogo} class="logo" alt="Svelte Logo" />
+    </a>
+  </div>
+  <h1>Svelte</h1>
+
+  <div class="card">
+    <Counter />
+  </div>
+
+  <p class="read-the-docs">
+    Click on the Svelte logo to learn more
+  </p>
+</main>
+
+<style>
+  .logo {
+    height: 6em;
+    padding: 1.5em;
+    will-change: filter;
+    transition: filter 300ms;
+  }
+  .logo:hover {
+    filter: drop-shadow(0 0 2em #ff3e00aa);
+  }
+  .read-the-docs {
+    color: #888;
+  }
+</style>
+`},{filename:"src/lib/Counter.svelte",language:"svelte",content:`<script lang="ts">
+  let count: number = $state(0);
+  const increment = () => {
+    count += 1;
+  };
+<\/script>
+
+<button onclick={increment}>
+  count is {count}
+</button>
+`},{filename:"src/assets/svelte.svg",language:"svg",content:`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
+`}]};var w={name:"multifile-typescript",title:getTemplateName("templates.multifile.typescript","TypeScript Template"),thumbnail:"assets/templates/typescript.svg",aliases:["multifile-ts"],mainFile:"index.html",activeEditor:"src/main.ts",files:[{filename:"index.html",language:"html",content:`<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TypeScript</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="src/main.ts"><\/script>
+  </body>
+</html>
+`},{filename:"src/main.ts",language:"typescript",content:`import "./style.css";
+import typescriptLogo from "./typescript.svg";
+import { setupCounter } from "./counter.ts";
+
+document.querySelector<HTMLDivElement>("#app")!.innerHTML = \`
+  <div>
+    <a href="https://www.typescriptlang.org/" target="_blank">
+      <img src="\${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
+    </a>
+    <h1>TypeScript</h1>
+    <div class="card">
+      <button id="counter" type="button"></button>
+    </div>
+    <p class="read-the-docs">
+      Click on the TypeScript logos to learn more
+    </p>
+  </div>
+\`;
+
+setupCounter(document.querySelector<HTMLButtonElement>("#counter")!);
+`},{filename:"src/style.css",language:"css",content:`:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+`},{filename:"src/counter.ts",language:"typescript",content:`export function setupCounter(element: HTMLButtonElement) {
+  let counter = 0;
+  const setCounter = (count: number) => {
+    counter = count;
+    element.innerHTML = \`count is \${counter}\`;
+  };
+  element.addEventListener("click", () => setCounter(counter + 1));
+  setCounter(0);
+}
+`},{filename:"src/typescript.svg",language:"svg",content:`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>
+`}]};var S={name:"multifile-vue",title:getTemplateName("templates.multifile.vue","Vue Template"),thumbnail:"assets/templates/vue.svg",mainFile:"index.html",activeEditor:"src/components/HelloWorld.vue",files:[{filename:"index.html",language:"html",content:`<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="src/main.ts"><\/script>
+  </body>
+</html>
+`},{filename:"src/main.ts",language:"typescript",content:`import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')
+`},{filename:"src/style.css",language:"css",content:`:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+`},{filename:"src/App.vue",language:"vue",content:`<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue'
+<\/script>
+
+<template>
+  <div>
+    <a href="https://vuejs.org/" target="_blank">
+      <img src="./assets/vue.svg" class="logo" alt="Vue logo" />
+    </a>
+  </div>
+  <HelloWorld msg="Vue" />
+</template>
+
+<style scoped>
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>
+`},{filename:"src/components/HelloWorld.vue",language:"vue",content:`<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+<\/script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+  </div>
+
+  <p class="read-the-docs">Click on the Vue logo to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>
+`},{filename:"src/assets/vue.svg",language:"svg",content:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>'}]};var k=[u,d,g,w,v,S,b,x,y,f,h];var j={name:"angular",aliases:["ng"],title:getTemplateName("templates.starter.angular","Angular Starter"),thumbnail:"assets/templates/angular.svg",activeEditor:"script",markup:{language:"html",content:`<app>Loading...</app>
+`},style:{language:"css",content:""},script:{language:"typescript",content:`
 import { Component, Input, NgModule, enableProdMode } from '@angular/core@12.2.13';
 import { CommonModule } from '@angular/common@12.2.13';
 import { BrowserModule } from '@angular/platform-browser@12.2.13';
@@ -82,18 +1351,7 @@ class AppModule {}
 platformBrowserDynamic()
   .bootstrapModule(AppModule)
   .catch((err: Error) => console.error(err));
-`.trimStart(),
-  },
-  customSettings: { typescript: { experimentalDecorators: !0 } },
-};
-var u = {
-  name: 'assemblyscript',
-  title: getTemplateName('templates.starter.assemblyscript', 'AssemblyScript Starter'),
-  thumbnail: 'assets/templates/assemblyscript.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},customSettings:{typescript:{experimentalDecorators:!0}}};var _={name:"assemblyscript",aliases:["as"],title:getTemplateName("templates.starter.assemblyscript","AssemblyScript Starter"),thumbnail:"assets/templates/assemblyscript.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/assemblyscript.svg" />
@@ -126,11 +1384,7 @@ var u = {
 
   })();
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -139,33 +1393,14 @@ var u = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'assemblyscript',
-    content: `
+`.trimStart()},script:{language:"assemblyscript",content:`
 export function getTitle(): string {
   return "AssemblyScript";
 }
 export function increment(num: i32): i32 {
   return num + 1;
 }
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var g = {
-  name: 'astro',
-  title: getTemplateName('templates.starter.astro', 'Astro Starter'),
-  thumbnail: 'assets/templates/astro.svg',
-  activeEditor: 'markup',
-  markup: {
-    language: 'astro',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var T={name:"astro",title:getTemplateName("templates.starter.astro","Astro Starter"),thumbnail:"assets/templates/astro.svg",activeEditor:"markup",markup:{language:"astro",content:`
 ---
 import {format} from 'date-fns';
 
@@ -222,35 +1457,14 @@ const builtAtFormatted = format(builtAt, 'MMMM dd, yyyy -- H:mm:ss.SSS');
 </body>
 
 </html>
-`.trimStart(),
-  },
-  style: { language: 'css', content: '' },
-  script: { language: 'javascript', content: '' },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var h = {
-  name: 'backbone',
-  title: getTemplateName('templates.starter.backbone', 'Backbone Starter'),
-  thumbnail: 'assets/templates/backbone.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},style:{language:"css",content:""},script:{language:"javascript",content:""},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var C={name:"backbone",title:getTemplateName("templates.starter.backbone","Backbone Starter"),thumbnail:"assets/templates/backbone.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/backbone.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -259,11 +1473,7 @@ var h = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`
 var Counter = Backbone.Model.extend({
   defaults: {
     value: 0,
@@ -294,40 +1504,7 @@ var AppView = Backbone.View.extend({
   }
 });
 var view = new AppView({ model: counter });
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [
-    'https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js',
-    'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js',
-    'https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js',
-  ],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var b = {
-  name: 'blank',
-  title: getTemplateName('templates.starter.blank', 'Blank Project'),
-  thumbnail: 'assets/templates/blank.svg',
-  activeEditor: 'markup',
-  markup: { language: 'html', content: '' },
-  style: { language: 'css', content: '' },
-  script: { language: 'javascript', content: '' },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var f = {
-  name: 'blockly',
-  title: getTemplateName('templates.starter.blockly', 'Blockly Starter'),
-  thumbnail: 'assets/templates/blockly.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:["https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js","https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js","https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"],cssPreset:"",imports:{},types:{}};var U={name:"blank",title:getTemplateName("templates.starter.blank","Blank Project"),thumbnail:"assets/templates/blank.svg",activeEditor:"markup",markup:{language:"html",content:""},style:{language:"css",content:""},script:{language:"javascript",content:""},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var E={name:"blockly",title:getTemplateName("templates.starter.blockly","Blockly Starter"),thumbnail:"assets/templates/blockly.svg",activeEditor:"script",markup:{language:"html",content:`
 <xml
   data-src="{{ __CDN_URL__ }}@live-codes/blockly-utils@0.2.0/src/dom-blocks.xml"
   data-type="blockly/xml"
@@ -344,11 +1521,7 @@ var f = {
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -357,11 +1530,7 @@ var f = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'blockly',
-    content: `
+`.trimStart()},script:{language:"blockly",content:`
 <xml xmlns="https://developers.google.com/blockly/xml">
   <variables>
     <variable id="?\`Dl!ysD-zLY64Lpe)c(">count</variable>
@@ -470,22 +1639,7 @@ var f = {
     </statement>
   </block>
 </xml>
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var v = {
-  name: 'bootstrap',
-  title: getTemplateName('templates.starter.bootstrap', 'Bootstrap Starter'),
-  thumbnail: 'assets/templates/bootstrap.svg',
-  activeEditor: 'markup',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var L={name:"bootstrap",aliases:["bs"],title:getTemplateName("templates.starter.bootstrap","Bootstrap Starter"),thumbnail:"assets/templates/bootstrap.svg",activeEditor:"markup",markup:{language:"html",content:`
 <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
   <div class="container-fluid">
     <a class="navbar-brand" href="#">Navbar</a>
@@ -556,11 +1710,7 @@ var v = {
     </p>
   </div>
 </main>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 body {
   padding-top: 5rem;
 }
@@ -578,34 +1728,14 @@ body {
     font-size: 3.5rem;
   }
 }
-`.trimStart(),
-  },
-  script: { language: 'javascript', content: '' },
-  stylesheets: ['{{ __CDN_URL__ }}bootstrap@5.3.0/dist/css/bootstrap.min.css'],
-  scripts: ['{{ __CDN_URL__ }}bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js'],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var y = {
-  name: 'civet',
-  title: getTemplateName('templates.starter.civet', 'Civet Starter'),
-  thumbnail: 'assets/templates/civet.png',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},script:{language:"javascript",content:""},stylesheets:["{{ __CDN_URL__ }}bootstrap@5.3.0/dist/css/bootstrap.min.css"],scripts:["{{ __CDN_URL__ }}bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"],cssPreset:"",imports:{},types:{}};var M={name:"civet",title:getTemplateName("templates.starter.civet","Civet Starter"),thumbnail:"assets/templates/civet.png",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/civet.png" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -614,11 +1744,7 @@ var y = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'civet',
-    content: `
+`.trimStart()},script:{language:"civet",content:`
 titleElement := document.getElementById 'title'
 counterElement := document.getElementById 'counter'
 button := document.getElementById 'counter-button'
@@ -631,33 +1757,14 @@ increment := counter 0
 function handleClick: void counterElement.innerText = increment()
 
 button.addEventListener 'click', handleClick
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var x = {
-  name: 'clio',
-  title: getTemplateName('templates.starter.clio', 'Clio Starter'),
-  thumbnail: 'assets/templates/clio.png',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var q={name:"clio",title:getTemplateName("templates.starter.clio","Clio Starter"),thumbnail:"assets/templates/clio.png",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1 id="title">Hello, World!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/clio.png" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button" disabled>Loading...</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -666,11 +1773,7 @@ var x = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'clio',
-    content: `
+`.trimStart()},script:{language:"clio",content:`
 fn capitalize str:
   (str.charAt 0 -> .toUpperCase) + (str.slice 1 -> .toLowerCase)
 
@@ -698,28 +1801,9 @@ export fn main argv:
   document.querySelector "#counter-button"
     -> activateBtn
     -> .addEventListener "click" onBtnClick
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var w = {
-  name: 'clojurescript',
-  title: getTemplateName('templates.starter.clojurescript', 'ClojureScript Starter'),
-  thumbnail: 'assets/templates/cljs.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var $={name:"clojurescript",aliases:["cljs"],title:getTemplateName("templates.starter.clojurescript","ClojureScript Starter"),thumbnail:"assets/templates/cljs.svg",activeEditor:"script",markup:{language:"html",content:`
 <div id="app">Loading...</div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -728,11 +1812,7 @@ var w = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'clojurescript',
-    content: `
+`.trimStart()},script:{language:"clojurescript",content:`
 (ns react.component
   (:require
     ;; you may use npm packages
@@ -761,28 +1841,14 @@ var w = {
 (print (str "Hello, " title "!"))
 (defonce root (createRoot (js/document.querySelector "#app")))
 (.render root #jsx [Counter #js {:name title}])
-`.trimStart(),
-  },
-};
-var S = {
-  name: 'coffeescript',
-  title: getTemplateName('templates.starter.coffeescript', 'CoffeeScript Starter'),
-  thumbnail: 'assets/templates/coffeescript.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var B={name:"coffeescript",aliases:["coffee"],title:getTemplateName("templates.starter.coffeescript","CoffeeScript Starter"),thumbnail:"assets/templates/coffeescript.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/coffeescript.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -791,11 +1857,7 @@ var S = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'coffeescript',
-    content: `
+`.trimStart()},script:{language:"coffeescript",content:`
 titleElement = document.getElementById 'title'
 counterElement = document.getElementById 'counter'
 button = document.getElementById 'counter-button'
@@ -808,33 +1870,14 @@ increment = counter 0
 
 button.addEventListener('click',
   -> counterElement.innerText = increment())
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var k = {
-  name: 'commonlisp',
-  title: getTemplateName('templates.starter.commonlisp', 'Common Lisp Starter'),
-  thumbnail: 'assets/templates/commonlisp.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var H={name:"commonlisp",aliases:["lisp"],title:getTemplateName("templates.starter.commonlisp","Common Lisp Starter"),thumbnail:"assets/templates/commonlisp.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1 id="title">Hello, World!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/commonlisp.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -843,11 +1886,7 @@ var k = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'commonlisp',
-    content: `
+`.trimStart()},script:{language:"commonlisp",content:`
 (defun set-attribute (&key selector attribute value)
   (let ((node
          (#j:document:querySelector selector)))
@@ -867,22 +1906,7 @@ var k = {
 
 (#j:console:clear)
 (write "Hello, Common Lisp!")
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var _ = {
-  name: 'cpp',
-  title: getTemplateName('templates.starter.cpp', 'C++ Starter'),
-  thumbnail: 'assets/templates/cpp.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var A={name:"cpp",aliases:["c++"],title:getTemplateName("templates.starter.cpp","C++ Starter"),thumbnail:"assets/templates/cpp.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="name">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/cpp.svg" />
@@ -926,11 +1950,7 @@ var _ = {
     }
   });
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -939,11 +1959,7 @@ var _ = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'cpp',
-    content: `
+`.trimStart()},script:{language:"cpp",content:`
 #include <iostream>
 using namespace std;
 
@@ -958,23 +1974,7 @@ int main() {
 
     return 0;
 }
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var j = {
-  name: 'cpp-wasm',
-  aliases: ['clang'],
-  title: getTemplateName('templates.starter.cpp-wasm', 'C++ (Wasm) Starter'),
-  thumbnail: 'assets/templates/cpp.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var R={name:"cpp-wasm",aliases:["clang","c++-wasm"],title:getTemplateName("templates.starter.cpp-wasm","C++ (Wasm) Starter"),thumbnail:"assets/templates/cpp.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="name">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/cpp.svg" />
@@ -1021,11 +2021,7 @@ var j = {
     }
   });
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -1034,11 +2030,7 @@ var j = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'cpp-wasm',
-    content: `
+`.trimStart()},script:{language:"cpp-wasm",content:`
 #include <iostream>
 using namespace std;
 
@@ -1053,17 +2045,7 @@ int main() {
 
     return 0;
 }
-`.trimStart(),
-  },
-};
-var T = {
-  name: 'csharp-wasm',
-  title: 'C# (Wasm) Starter',
-  thumbnail: 'assets/templates/csharp.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var P={name:"csharp-wasm",aliases:["c#-wasm"],title:getTemplateName("templates.starter.csharp-wasm","C# (Wasm) Starter"),thumbnail:"assets/templates/csharp.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="name">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/csharp.svg" />
@@ -1110,11 +2092,7 @@ var T = {
     }
   });
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -1123,11 +2101,7 @@ var T = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'csharp-wasm',
-    content: `
+`.trimStart()},script:{language:"csharp-wasm",content:`
 using System;
 
 class Program
@@ -1143,22 +2117,8 @@ class Program
         Console.WriteLine(count);
     }
 }
-`.trimStart(),
-  },
-};
-var C = {
-  name: 'd3',
-  title: 'D3 Starter',
-  thumbnail: 'assets/templates/d3.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `<div id="chart">Loading...</div>
-`,
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()}};var z={name:"d3",title:getTemplateName("templates.starter.d3","D3 Starter"),thumbnail:"assets/templates/d3.svg",activeEditor:"script",markup:{language:"html",content:`<div id="chart">Loading...</div>
+`},style:{language:"css",content:`
 .bar {
   fill: steelblue;
 }
@@ -1166,11 +2126,7 @@ var C = {
 .bar:hover {
   fill: orange;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`
 import * as d3 from "d3";
 
 const data = [150, 230, 180, 90];
@@ -1192,17 +2148,7 @@ svg
   .attr("height", 40)
   .attr("y", (d, i) => i * 50 + 10)
   .attr("x", 10);
-`.trimStart(),
-  },
-};
-var U = {
-  name: 'daisyui',
-  title: getTemplateName('templates.starter.daisyui', 'daisyUI Starter'),
-  thumbnail: 'assets/templates/daisyui.svg',
-  activeEditor: 'markup',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var N={name:"daisyui",title:getTemplateName("templates.starter.daisyui","daisyUI Starter"),thumbnail:"assets/templates/daisyui.svg",activeEditor:"markup",markup:{language:"html",content:`
 <!-- based on https://daisyui.com/tailwindplay/ -->
 
 <!-- buttons -->
@@ -1298,11 +2244,7 @@ var U = {
   </div>
   <div class="chat-bubble">see all components <a class="link" target="_blank" href="https://daisyui.com/components">Here</a></div>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 @import "tailwindcss";
 @plugin "daisyui"{
   themes: light --default, dark --prefersdark, abyss;
@@ -1348,23 +2290,7 @@ var U = {
   --depth: 1;
   --noise: 1;
 }
-`.trimStart(),
-  },
-  script: { language: 'javascript', content: '' },
-  processors: ['tailwindcss'],
-};
-var E = {
-  name: 'diagrams',
-  title: getTemplateName('templates.starter.diagrams', 'Diagrams Starter'),
-  thumbnail: 'assets/templates/diagrams.svg',
-  activeEditor: 'markup',
-  markup: {
-    language: 'diagrams',
-    contentUrl: '{{ __livecodes_baseUrl__ }}assets/templates/diagrams-starter.html',
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},script:{language:"javascript",content:""},processors:["tailwindcss"]};var W={name:"diagrams",title:getTemplateName("templates.starter.diagrams","Diagrams Starter"),thumbnail:"assets/templates/diagrams.svg",activeEditor:"markup",markup:{language:"diagrams",contentUrl:"{{ __livecodes_baseUrl__ }}assets/templates/diagrams-starter.html"},style:{language:"css",content:`
 .container {
   display: flex;
   flex-direction: column;
@@ -1384,34 +2310,14 @@ var E = {
 .container h3:not(:nth-child(1)) {
   margin-top: 3em;
 }
-`.trimStart(),
-  },
-  script: { language: 'javascript', content: '' },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var L = {
-  name: 'fennel',
-  title: getTemplateName('templates.starter.fennel', 'Fennel Starter'),
-  thumbnail: 'assets/templates/fennel.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},script:{language:"javascript",content:""},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var I={name:"fennel",title:getTemplateName("templates.starter.fennel","Fennel Starter"),thumbnail:"assets/templates/fennel.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/fennel.svg" />
   <p id="counter">You clicked 0 times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -1420,11 +2326,7 @@ var L = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'fennel',
-    content: `
+`.trimStart()},script:{language:"fennel",content:`
 (global js (require :js))
 (global window js.global)
 (global document window.document)
@@ -1442,161 +2344,7 @@ var L = {
 (global counter (Counter:new nil))
 (global button (document:querySelector "#counter-button"))
 (button:addEventListener :click (fn [] (counter:increment) (counter:show)))
-`.trimStart(),
-  },
-};
-var $ = [
-    'esm.sh',
-    'skypack',
-    'esm.run',
-    'jsdelivr.esm',
-    'fastly.jsdelivr.esm',
-    'gcore.jsdelivr.esm',
-    'testingcf.jsdelivr.esm',
-    'jsdelivr.b-cdn.esm',
-    'jspm',
-  ],
-  B = [
-    'jsdelivr',
-    'fastly.jsdelivr',
-    'unpkg',
-    'gcore.jsdelivr',
-    'testingcf.jsdelivr',
-    'jsdelivr.b-cdn',
-    'npmcdn',
-  ],
-  M = [
-    'jsdelivr.gh',
-    'fastly.jsdelivr.gh',
-    'statically',
-    'gcore.jsdelivr.gh',
-    'testingcf.jsdelivr.gh',
-    'jsdelivr.b-cdn.gh',
-  ],
-  r = {
-    getModuleUrl: (e, { isModule: s = !0, defaultCDN: i = 'esm.sh', external: o } = {}) => {
-      e = e.replace(/#nobundle/g, '');
-      let a = (n) =>
-          !o || !n.includes('https://esm.sh')
-            ? n
-            : n.includes('?')
-              ? `${n}&external=${o}`
-              : `${n}?external=${o}`,
-        l = q(e, s, i);
-      return l ? a(l) : s ? a('https://esm.sh/' + e) : 'https://cdn.jsdelivr.net/npm/' + e;
-    },
-    getUrl: (e, s) =>
-      e.startsWith('http') || e.startsWith('data:') ? e : q(e, !1, s || qt()) || e,
-    cdnLists: { npm: B, module: $, gh: M },
-    checkCDNs: async (e, s) => {
-      let i = [s, ...r.cdnLists.npm].filter(Boolean);
-      for (let o of i)
-        try {
-          if ((await fetch(r.getUrl(e, o), { method: 'HEAD' })).ok) return o;
-        } catch {}
-      return r.cdnLists.npm[0];
-    },
-  },
-  qt = () => {
-    if (globalThis.appCDN) return globalThis.appCDN;
-    try {
-      return new URL(location.href).searchParams.get('appCDN') || r.cdnLists.npm[0];
-    } catch {
-      return r.cdnLists.npm[0];
-    }
-  },
-  q = (e, s, i) => {
-    let o = s && e.startsWith('unpkg:') ? '?module' : '';
-    e.startsWith('gh:')
-      ? (e = e.replace('gh', M[0]))
-      : e.includes(':') || (e = (i || (s ? $[0] : B[0])) + ':' + e);
-    for (let a of $t) {
-      let [l, n] = a;
-      if (l.test(e)) return e.replace(l, n) + o;
-    }
-    return null;
-  },
-  $t = [
-    [/^(esm\.sh:)(.+)/i, 'https://esm.sh/$2'],
-    [/^(npm:)(.+)/i, 'https://esm.sh/$2'],
-    [/^(node:)(.+)/i, 'https://esm.sh/$2'],
-    [/^(jsr:)(.+)/i, 'https://esm.sh/jsr/$2'],
-    [/^(pr:)(.+)/i, 'https://esm.sh/pr/$2'],
-    [/^(pkg\.pr\.new:)(.+)/i, 'https://esm.sh/pkg.pr.new/$2'],
-    [/^(skypack:)(.+)/i, 'https://cdn.skypack.dev/$2'],
-    [/^(jsdelivr:)(.+)/i, 'https://cdn.jsdelivr.net/npm/$2'],
-    [/^(fastly\.jsdelivr:)(.+)/i, 'https://fastly.jsdelivr.net/npm/$2'],
-    [/^(gcore\.jsdelivr:)(.+)/i, 'https://gcore.jsdelivr.net/npm/$2'],
-    [/^(testingcf\.jsdelivr:)(.+)/i, 'https://testingcf.jsdelivr.net/npm/$2'],
-    [/^(jsdelivr\.b-cdn:)(.+)/i, 'https://jsdelivr.b-cdn.net/npm/$2'],
-    [/^(jsdelivr\.gh:)(.+)/i, 'https://cdn.jsdelivr.net/gh/$2'],
-    [/^(fastly\.jsdelivr\.gh:)(.+)/i, 'https://fastly.jsdelivr.net/gh/$2'],
-    [/^(gcore\.jsdelivr\.gh:)(.+)/i, 'https://gcore.jsdelivr.net/gh/$2'],
-    [/^(testingcf\.jsdelivr\.gh:)(.+)/i, 'https://testingcf.jsdelivr.net/gh/$2'],
-    [/^(jsdelivr\.b-cdn\.gh:)(.+)/i, 'https://jsdelivr.b-cdn.net/gh/$2'],
-    [/^(statically:)(.+)/i, 'https://cdn.statically.io/gh/$2'],
-    [/^(esm\.run:)(.+)/i, 'https://esm.run/$2'],
-    [/^(jsdelivr\.esm:)(.+)/i, 'https://cdn.jsdelivr.net/npm/$2/+esm'],
-    [/^(fastly\.jsdelivr\.esm:)(.+)/i, 'https://fastly.jsdelivr.net/npm/$2/+esm'],
-    [/^(gcore\.jsdelivr\.esm:)(.+)/i, 'https://gcore.jsdelivr.net/npm/$2/+esm'],
-    [/^(testingcf\.jsdelivr\.esm:)(.+)/i, 'https://testingcf.jsdelivr.net/npm/$2/+esm'],
-    [/^(jsdelivr\.b-cdn\.esm:)(.+)/i, 'https://jsdelivr.b-cdn.net/npm/$2/+esm'],
-    [/^(jspm:)(.+)/i, 'https://jspm.dev/$2'],
-    [/^(esbuild:)(.+)/i, 'https://esbuild.vercel.app/$2'],
-    [/^(bundle\.run:)(.+)/i, 'https://bundle.run/$2'],
-    [/^(unpkg:)(.+)/i, 'https://unpkg.com/$2'],
-    [/^(npmcdn:)(.+)/i, 'https://npmcdn.com/$2'],
-    [/^(bundlejs:)(.+)/i, 'https://deno.bundlejs.com/?file&q=$2'],
-    [/^(bundle:)(.+)/i, 'https://deno.bundlejs.com/?file&q=$2'],
-    [/^(deno:)(.+)/i, 'https://deno.bundlejs.com/?file&q=https://deno.land/x/$2/mod.ts'],
-    [/^(https:\/\/deno\.land\/.+)/i, 'https://deno.bundlejs.com/?file&q=$1'],
-    [
-      /^(github:|https:\/\/github\.com\/)(.[^\/]+?)\/(.[^\/]+?)\/(?!releases\/)(?:(?:blob|raw)\/)?(.+?\/.+)/i,
-      'https://deno.bundlejs.com/?file&q=https://cdn.jsdelivr.net/gh/$2/$3@$4',
-    ],
-    [/^(gist\.github:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i, 'https://gist.githack.com/$2'],
-    [
-      /^(gitlab:|https:\/\/gitlab\.com\/)([^\/]+.*\/[^\/]+)\/(?:raw|blob)\/(.+?)(?:\?.*)?$/i,
-      'https://deno.bundlejs.com/?file&q=https://gl.githack.com/$2/raw/$3',
-    ],
-    [
-      /^(bitbucket:|https:\/\/bitbucket\.org\/)([^\/]+\/[^\/]+)\/(?:raw|src)\/(.+?)(?:\?.*)?$/i,
-      'https://deno.bundlejs.com/?file&q=https://bb.githack.com/$2/raw/$3',
-    ],
-    [
-      /^(bitbucket:)snippets\/([^\/]+\/[^\/]+)\/revisions\/([^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,
-      'https://bb.githack.com/!api/2.0/snippets/$2/$3/files/$4',
-    ],
-    [
-      /^(bitbucket:)snippets\/([^\/]+\/[^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,
-      'https://bb.githack.com/!api/2.0/snippets/$2/HEAD/files/$3',
-    ],
-    [
-      /^(bitbucket:)\!api\/2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,
-      'https://bb.githack.com/!api/2.0/snippets/$2/files/$3',
-    ],
-    [
-      /^(api\.bitbucket:)2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,
-      'https://bb.githack.com/!api/2.0/snippets/$2/files/$3',
-    ],
-    [/^(rawgit:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i, 'https://gist.githack.com/$2'],
-    [
-      /^(rawgit:|https:\/\/raw\.githubusercontent\.com)(\/[^\/]+\/[^\/]+|[0-9A-Za-z-]+\/[0-9a-f]+\/raw)\/(.+)/i,
-      'https://deno.bundlejs.com/?file&q=https://raw.githack.com/$2/$3',
-    ],
-  ];
-var { getUrl: Bt, getModuleUrl: ee } = r;
-var c = Bt('gh:live-codes/gleam-precompiled@v0.5.0/');
-var m = c + 'build/packages/plinth/src/plinth/',
-  p = c + 'build/dev/javascript/plinth/plinth/',
-  P = {
-    name: 'gleam',
-    title: getTemplateName('templates.starter.gleam', 'Gleam Starter'),
-    thumbnail: 'assets/templates/gleam.svg',
-    activeEditor: 'script',
-    markup: {
-      language: 'html',
-      content: `
+`.trimStart()}};var Y=["esm.sh","skypack","esm.run","jsdelivr.esm","fastly.jsdelivr.esm","gcore.jsdelivr.esm","testingcf.jsdelivr.esm","jsdelivr.b-cdn.esm","jspm"],D=["jsdelivr","fastly.jsdelivr","unpkg","gcore.jsdelivr","testingcf.jsdelivr","jsdelivr.b-cdn","npmcdn"],F=["jsdelivr.gh","fastly.jsdelivr.gh","statically","gcore.jsdelivr.gh","testingcf.jsdelivr.gh","jsdelivr.b-cdn.gh"],r={getModuleUrl:(e,{isModule:o=!0,defaultCDN:i="esm.sh",external:s}={})=>{e=e.replace(/#nobundle/g,"");let a=n=>!s||!n.includes("https://esm.sh")?n:n.includes("?")?`${n}&external=${s}`:`${n}?external=${s}`,l=O(e,o,i);return l?a(l):o?a("https://esm.sh/"+e):"https://cdn.jsdelivr.net/npm/"+e},getUrl:(e,o)=>e.startsWith("http")||e.startsWith("data:")?e:O(e,!1,o||Yt())||e,cdnLists:{npm:D,module:Y,gh:F},checkCDNs:async(e,o)=>{let i=[o,...r.cdnLists.npm].filter(Boolean);for(let s of i)try{if((await fetch(r.getUrl(e,s),{method:"HEAD"})).ok)return s}catch{}return r.cdnLists.npm[0]}},Yt=()=>{if(globalThis.appCDN)return globalThis.appCDN;try{return new URL(location.href).searchParams.get("appCDN")||r.cdnLists.npm[0]}catch{return r.cdnLists.npm[0]}},O=(e,o,i)=>{let s=o&&e.startsWith("unpkg:")?"?module":"";e.startsWith("gh:")?e=e.replace("gh",F[0]):e.includes(":")||(e=(i||(o?Y[0]:D[0]))+":"+e);for(let a of Dt){let[l,n]=a;if(l.test(e))return e.replace(l,n)+s}return null},Dt=[[/^(esm\.sh:)(.+)/i,"https://esm.sh/$2"],[/^(npm:)(.+)/i,"https://esm.sh/$2"],[/^(node:)(.+)/i,"https://esm.sh/$2"],[/^(jsr:)(.+)/i,"https://esm.sh/jsr/$2"],[/^(pr:)(.+)/i,"https://esm.sh/pr/$2"],[/^(pkg\.pr\.new:)(.+)/i,"https://esm.sh/pkg.pr.new/$2"],[/^(skypack:)(.+)/i,"https://cdn.skypack.dev/$2"],[/^(jsdelivr:)(.+)/i,"https://cdn.jsdelivr.net/npm/$2"],[/^(fastly\.jsdelivr:)(.+)/i,"https://fastly.jsdelivr.net/npm/$2"],[/^(gcore\.jsdelivr:)(.+)/i,"https://gcore.jsdelivr.net/npm/$2"],[/^(testingcf\.jsdelivr:)(.+)/i,"https://testingcf.jsdelivr.net/npm/$2"],[/^(jsdelivr\.b-cdn:)(.+)/i,"https://jsdelivr.b-cdn.net/npm/$2"],[/^(jsdelivr\.gh:)(.+)/i,"https://cdn.jsdelivr.net/gh/$2"],[/^(fastly\.jsdelivr\.gh:)(.+)/i,"https://fastly.jsdelivr.net/gh/$2"],[/^(gcore\.jsdelivr\.gh:)(.+)/i,"https://gcore.jsdelivr.net/gh/$2"],[/^(testingcf\.jsdelivr\.gh:)(.+)/i,"https://testingcf.jsdelivr.net/gh/$2"],[/^(jsdelivr\.b-cdn\.gh:)(.+)/i,"https://jsdelivr.b-cdn.net/gh/$2"],[/^(statically:)(.+)/i,"https://cdn.statically.io/gh/$2"],[/^(esm\.run:)(.+)/i,"https://esm.run/$2"],[/^(jsdelivr\.esm:)(.+)/i,"https://cdn.jsdelivr.net/npm/$2/+esm"],[/^(fastly\.jsdelivr\.esm:)(.+)/i,"https://fastly.jsdelivr.net/npm/$2/+esm"],[/^(gcore\.jsdelivr\.esm:)(.+)/i,"https://gcore.jsdelivr.net/npm/$2/+esm"],[/^(testingcf\.jsdelivr\.esm:)(.+)/i,"https://testingcf.jsdelivr.net/npm/$2/+esm"],[/^(jsdelivr\.b-cdn\.esm:)(.+)/i,"https://jsdelivr.b-cdn.net/npm/$2/+esm"],[/^(jspm:)(.+)/i,"https://jspm.dev/$2"],[/^(esbuild:)(.+)/i,"https://esbuild.vercel.app/$2"],[/^(bundle\.run:)(.+)/i,"https://bundle.run/$2"],[/^(unpkg:)(.+)/i,"https://unpkg.com/$2"],[/^(npmcdn:)(.+)/i,"https://npmcdn.com/$2"],[/^(bundlejs:)(.+)/i,"https://deno.bundlejs.com/?file&q=$2"],[/^(bundle:)(.+)/i,"https://deno.bundlejs.com/?file&q=$2"],[/^(deno:)(.+)/i,"https://deno.bundlejs.com/?file&q=https://deno.land/x/$2/mod.ts"],[/^(https:\/\/deno\.land\/.+)/i,"https://deno.bundlejs.com/?file&q=$1"],[/^(github:|https:\/\/github\.com\/)(.[^\/]+?)\/(.[^\/]+?)\/(?!releases\/)(?:(?:blob|raw)\/)?(.+?\/.+)/i,"https://deno.bundlejs.com/?file&q=https://cdn.jsdelivr.net/gh/$2/$3@$4"],[/^(gist\.github:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i,"https://gist.githack.com/$2"],[/^(gitlab:|https:\/\/gitlab\.com\/)([^\/]+.*\/[^\/]+)\/(?:raw|blob)\/(.+?)(?:\?.*)?$/i,"https://deno.bundlejs.com/?file&q=https://gl.githack.com/$2/raw/$3"],[/^(bitbucket:|https:\/\/bitbucket\.org\/)([^\/]+\/[^\/]+)\/(?:raw|src)\/(.+?)(?:\?.*)?$/i,"https://deno.bundlejs.com/?file&q=https://bb.githack.com/$2/raw/$3"],[/^(bitbucket:)snippets\/([^\/]+\/[^\/]+)\/revisions\/([^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,"https://bb.githack.com/!api/2.0/snippets/$2/$3/files/$4"],[/^(bitbucket:)snippets\/([^\/]+\/[^\/\#\?]+)(?:\?[^#]*)?(?:\#file-(.+?))$/i,"https://bb.githack.com/!api/2.0/snippets/$2/HEAD/files/$3"],[/^(bitbucket:)\!api\/2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,"https://bb.githack.com/!api/2.0/snippets/$2/files/$3"],[/^(api\.bitbucket:)2.0\/snippets\/([^\/]+\/[^\/]+\/[^\/]+)\/files\/(.+?)(?:\?.*)?$/i,"https://bb.githack.com/!api/2.0/snippets/$2/files/$3"],[/^(rawgit:)(.+?\/[0-9a-f]+\/raw\/(?:[0-9a-f]+\/)?.+)$/i,"https://gist.githack.com/$2"],[/^(rawgit:|https:\/\/raw\.githubusercontent\.com)(\/[^\/]+\/[^\/]+|[0-9A-Za-z-]+\/[0-9a-f]+\/raw)\/(.+)/i,"https://deno.bundlejs.com/?file&q=https://raw.githack.com/$2/$3"]];var{getUrl:G,getModuleUrl:Re}=r;var c=G("gh:live-codes/gleam-precompiled@v0.5.0/");var Ft="5.9.3",Pe=G(`typescript@${Ft}/lib/typescript.js`);var m=c+"build/packages/plinth/src/plinth/",p=c+"build/dev/javascript/plinth/plinth/",V={name:"gleam",title:getTemplateName("templates.starter.gleam","Gleam Starter"),thumbnail:"assets/templates/gleam.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1 id="title">Hello, World!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/gleam.svg" />
@@ -1604,11 +2352,7 @@ var m = c + 'build/packages/plinth/src/plinth/',
   <button id="counter-button">Click me</button>
 </div>
 
-`.trimStart(),
-    },
-    style: {
-      language: 'css',
-      content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -1617,11 +2361,7 @@ var m = c + 'build/packages/plinth/src/plinth/',
 .logo {
   width: 150px;
 }
-`.trimStart(),
-    },
-    script: {
-      language: 'gleam',
-      content: `
+`.trimStart()},script:{language:"gleam",content:`
 import gleam/int
 import gleam/io
 import gleam/result
@@ -1672,47 +2412,14 @@ pub fn hello(str: String) -> String
 // npm module
 @external(javascript, "npm:cowsay2", "say")
 pub fn cowsay(str: String) -> String
-`.trimStart(),
-    },
-    customSettings: {
-      imports: { 'my_pkg/greet.js': c + 'demo/greet.js' },
-      gleam: {
-        modules: {
-          'plinth/browser/document': {
-            srcUrl: m + 'browser/document.gleam',
-            compiledUrl: p + 'browser/document.mjs',
-          },
-          'plinth/browser/element': {
-            srcUrl: m + 'browser/element.gleam',
-            compiledUrl: p + 'browser/element.mjs',
-          },
-          'plinth/browser/event': {
-            srcUrl: m + 'browser/event.gleam',
-            compiledUrl: p + 'browser/event.mjs',
-          },
-        },
-      },
-    },
-  };
-var R = {
-  name: 'go',
-  title: getTemplateName('templates.starter.go', 'Go Starter'),
-  thumbnail: 'assets/templates/go.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},customSettings:{imports:{"my_pkg/greet.js":c+"demo/greet.js"},gleam:{modules:{"plinth/browser/document":{srcUrl:m+"browser/document.gleam",compiledUrl:p+"browser/document.mjs"},"plinth/browser/element":{srcUrl:m+"browser/element.gleam",compiledUrl:p+"browser/element.mjs"},"plinth/browser/event":{srcUrl:m+"browser/event.gleam",compiledUrl:p+"browser/event.mjs"}}}}};var X={name:"go",aliases:["golang"],title:getTemplateName("templates.starter.go","Go Starter"),thumbnail:"assets/templates/go.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/go.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -1721,11 +2428,7 @@ var R = {
 .logo {
   width: 250px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'go',
-    content: `
+`.trimStart()},script:{language:"go",content:`
 package main
 
 import (
@@ -1772,22 +2475,7 @@ func greet() {
 		fmt.Println("Good evening")
 	}
 }
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var N = {
-  name: 'go-wasm',
-  title: getTemplateName('templates.starter.go-wasm', 'Go (Wasm) Starter'),
-  thumbnail: 'assets/templates/go.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var J={name:"go-wasm",aliases:["golang-wasm"],title:getTemplateName("templates.starter.go-wasm","Go (Wasm) Starter"),thumbnail:"assets/templates/go.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Go (Wasm)</h1>
   <img class="logo" alt="Go logo" src="{{ __livecodes_baseUrl__ }}assets/templates/go.svg" />
@@ -1848,11 +2536,7 @@ var N = {
 
   });
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container {
   max-width: 800px;
   margin: 0 auto;
@@ -1919,11 +2603,7 @@ input[type="text"], input[type="number"] {
   color: #333;
   margin-top: 10px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'go-wasm',
-    content: `
+`.trimStart()},script:{language:"go-wasm",content:`
 package main
 
 import (
@@ -1952,19 +2632,7 @@ func main() {
 		fmt.Println("Hello from Go WebAssembly!")
 	}
 }
-`.trimStart(),
-  },
-};
-var H = {
-  name: 'imba',
-  title: getTemplateName('templates.starter.imba', 'Imba Starter'),
-  thumbnail: 'assets/templates/imba.svg',
-  activeEditor: 'script',
-  markup: { language: 'html', content: '' },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'imba',
-    content: `
+`.trimStart()}};var Z={name:"imba",title:getTemplateName("templates.starter.imba","Imba Starter"),thumbnail:"assets/templates/imba.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:""},script:{language:"imba",content:`
 tag app-counter
 	prop name = "Imba"
 	prop count = 0
@@ -1982,22 +2650,7 @@ tag app-counter
 		<button.btn @click=count++> "Click me"
 
 imba.mount <app-counter>
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var W = {
-  name: 'java',
-  title: getTemplateName('templates.starter.java', 'Java Starter'),
-  thumbnail: 'assets/templates/java.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var K={name:"java",title:getTemplateName("templates.starter.java","Java Starter"),thumbnail:"assets/templates/java.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="name">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/java.svg" />
@@ -2043,11 +2696,7 @@ var W = {
     }
   });
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2056,11 +2705,7 @@ var W = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'java',
-    content: `
+`.trimStart()},script:{language:"java",content:`
 import java.io.BufferedReader;
 import java.io.IOException;
 import java.io.InputStreamReader;
@@ -2079,28 +2724,14 @@ public class Main {
     System.out.println(count);
   }
 }
-`.trimStart(),
-  },
-};
-var I = {
-  name: 'javascript',
-  title: getTemplateName('templates.starter.javascript', 'JavaScript Starter'),
-  thumbnail: 'assets/templates/javascript.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var Q={name:"javascript",aliases:["js"],title:getTemplateName("templates.starter.javascript","JavaScript Starter"),thumbnail:"assets/templates/javascript.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/javascript.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2109,11 +2740,7 @@ var I = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`
 const title = document.querySelector("#title");
 const counter = document.querySelector("#counter");
 const button = document.querySelector("#counter-button");
@@ -2125,24 +2752,7 @@ button.addEventListener("click", () => {
   count++;
   counter.innerText = count;
 });
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var O = {
-  name: 'jest-react',
-  title: getTemplateName('templates.starter.jest-react', 'Jest/React Starter'),
-  thumbnail: 'assets/templates/jest.svg',
-  activeEditor: 'script',
-  autotest: !0,
-  markup: { language: 'html', content: '' },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var tt={name:"jest-react",title:getTemplateName("templates.starter.jest-react","Jest/React Starter"),thumbnail:"assets/templates/jest.svg",activeEditor:"script",autotest:!0,markup:{language:"html",content:""},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2156,11 +2766,7 @@ var O = {
   font-size: 0.9em;
   margin: 2em;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'jsx',
-    content: `
+`.trimStart()},script:{language:"jsx",content:`
 import { useState } from "react";
 
 export const increment = (count) => (count ?? 0) + 1;
@@ -2181,11 +2787,7 @@ function Counter(props) {
 export default function App() {
   return <Counter name="Jest with React" />;
 }
-`.trimStart(),
-  },
-  tests: {
-    language: 'tsx',
-    content: `
+`.trimStart()},tests:{language:"tsx",content:`
 import { render, fireEvent, screen, cleanup } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { assert } from "chai";
@@ -2232,19 +2834,7 @@ describe("Page", () => {
     );
   });
 });
-`.trimStart(),
-  },
-  tools: { enabled: 'all', active: 'tests', status: 'open' },
-};
-var A = {
-  name: 'jest',
-  title: getTemplateName('templates.starter.jest', 'Jest Starter'),
-  thumbnail: 'assets/templates/jest.svg',
-  autotest: !0,
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},tools:{enabled:"all",active:"tests",status:"open"}};var et={name:"jest",title:getTemplateName("templates.starter.jest","Jest Starter"),thumbnail:"assets/templates/jest.svg",autotest:!0,activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/jest.svg" />
@@ -2252,11 +2842,7 @@ var A = {
   <button id="counter-button">Click me</button>
   <p class="info">Run tests in the "Tests" panel below.</p>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2270,11 +2856,7 @@ var A = {
   font-size: 0.9em;
   margin: 2em;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`
 export class Counter {
   count;
   constructor() {
@@ -2302,11 +2884,7 @@ button.addEventListener(
   },
   false
 );
-`.trimStart(),
-  },
-  tests: {
-    language: 'tsx',
-    content: `
+`.trimStart()},tests:{language:"tsx",content:`
 import { fireEvent, screen } from "@testing-library/dom";
 import "@testing-library/jest-dom";
 import { assert } from "chai";
@@ -2346,29 +2924,14 @@ describe("Page", () => {
     );
   });
 });
-`.trimStart(),
-  },
-  tools: { enabled: 'all', active: 'tests', status: 'open' },
-};
-var D = {
-  name: 'jquery',
-  title: getTemplateName('templates.starter.jquery', 'jQuery Starter'),
-  thumbnail: 'assets/templates/jquery.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},tools:{enabled:"all",active:"tests",status:"open"}};var ot={name:"jquery",title:getTemplateName("templates.starter.jquery","jQuery Starter"),thumbnail:"assets/templates/jquery.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/jquery.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2377,11 +2940,7 @@ var D = {
 .logo {
   width: 300px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`
 import $ from "jquery";
 
 $("#title").text('jQuery');
@@ -2391,22 +2950,7 @@ $("#counter-button").click(() => {
   count += 1;
   $("#counter").text(count);
 });
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var Y = {
-  name: 'julia',
-  title: getTemplateName('templates.starter.julia', 'Julia Starter'),
-  thumbnail: 'assets/templates/julia.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var st={name:"julia",title:getTemplateName("templates.starter.julia","Julia Starter"),thumbnail:"assets/templates/julia.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="name">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/julia.svg" />
@@ -2456,11 +3000,7 @@ var Y = {
     }
   });
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2469,11 +3009,7 @@ var Y = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'julia',
-    content: `
+`.trimStart()},script:{language:"julia",content:`
 function increment(x)
     if x == ""
         return 0
@@ -2492,33 +3028,14 @@ function formatOutput(args...)
 end
 
 formatOutput(getTitle(), increment(livecodesInput))
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var z = {
-  name: 'knockout',
-  title: getTemplateName('templates.starter.knockout', 'Knockout Starter'),
-  thumbnail: 'assets/templates/knockout.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var nt={name:"knockout",title:getTemplateName("templates.starter.knockout","Knockout Starter"),thumbnail:"assets/templates/knockout.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span data-bind="text: title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/knockout.svg" />
   <p>You clicked <span data-bind="text: numberOfClicks">0</span> times.</p>
   <button data-bind="click: registerClick">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2527,11 +3044,7 @@ var z = {
 .logo {
   width: 250px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`
 import ko from "knockout";
 
 class ClickCounterViewModel {
@@ -2546,29 +3059,9 @@ class ClickCounterViewModel {
 }
 
 ko.applyBindings(new ClickCounterViewModel());
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var G = {
-  name: 'lit',
-  title: getTemplateName('templates.starter.lit', 'Lit Starter'),
-  thumbnail: 'assets/templates/lit.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var rt={name:"lit",title:getTemplateName("templates.starter.lit","Lit Starter"),thumbnail:"assets/templates/lit.svg",activeEditor:"script",markup:{language:"html",content:`
 <my-counter name="Lit"></my-counter>
-`.trimStart(),
-  },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'typescript',
-    content: `
+`.trimStart()},style:{language:"css",content:""},script:{language:"typescript",content:`
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { SignalWatcher, signal } from "@lit-labs/preact-signals";
@@ -2607,29 +3100,14 @@ export class SignalExample extends SignalWatcher(LitElement) {
     }
   \`;
 }
-`.trimStart(),
-  },
-  customSettings: { typescript: { experimentalDecorators: !0, useDefineForClassFields: !1 } },
-};
-var V = {
-  name: 'livescript',
-  title: getTemplateName('templates.starter.livescript', 'LiveScript Starter'),
-  thumbnail: 'assets/templates/livescript.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},customSettings:{typescript:{experimentalDecorators:!0,useDefineForClassFields:!1}}};var at={name:"livescript",aliases:["ls"],title:getTemplateName("templates.starter.livescript","LiveScript Starter"),thumbnail:"assets/templates/livescript.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/livescript.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2638,11 +3116,7 @@ var V = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'livescript',
-    content: `
+`.trimStart()},script:{language:"livescript",content:`
 { capitalize, join, map, words } = require 'prelude-ls'
 
 title = 'live script'
@@ -2660,33 +3134,14 @@ button = document.getElementById \\counter-button
 
 button.addEventListener \\click,
   -> counter-element.innerText = counter!
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var X = {
-  name: 'lua',
-  title: getTemplateName('templates.starter.lua', 'Lua Starter'),
-  thumbnail: 'assets/templates/lua.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var it={name:"lua",title:getTemplateName("templates.starter.lua","Lua Starter"),thumbnail:"assets/templates/lua.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/lua.svg" />
   <p id="counter">You clicked 0 times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2695,11 +3150,7 @@ var X = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'lua',
-    content: `
+`.trimStart()},script:{language:"lua",content:`
 js = require "js"
 window = js.global
 document = window.document
@@ -2737,28 +3188,14 @@ elseif time >= 12 and time < 18 then
 else
   print ("Good evening")
 end
-`.trimStart(),
-  },
-};
-var F = {
-  name: 'lua-wasm',
-  title: getTemplateName('templates.starter.lua-wasm', 'Lua (Wasm) Starter'),
-  thumbnail: 'assets/templates/lua.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var lt={name:"lua-wasm",title:getTemplateName("templates.starter.lua-wasm","Lua (Wasm) Starter"),thumbnail:"assets/templates/lua.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/lua.svg" />
   <p id="counter">You clicked 0 times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -2767,11 +3204,7 @@ var F = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'lua-wasm',
-    content: `
+`.trimStart()},script:{language:"lua-wasm",content:`
 document = window.document
 document:getElementById("title").innerHTML = "Lua"
 
@@ -2806,19 +3239,7 @@ elseif time >= 12 and time < 18 then
 else
   print ("Good evening")
 end
-`.trimStart(),
-  },
-};
-var J = {
-  name: 'malina',
-  title: getTemplateName('templates.starter.malina', 'Malina.js Starter'),
-  thumbnail: 'assets/templates/malina.svg',
-  activeEditor: 'script',
-  markup: { language: 'html', content: '' },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'malina',
-    content: `
+`.trimStart()}};var ct={name:"malina",title:getTemplateName("templates.starter.malina","Malina.js Starter"),thumbnail:"assets/templates/malina.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:""},script:{language:"malina",content:`
 <script>
   let title = "Malina.js";
   let counter = 0;
@@ -2844,22 +3265,7 @@ var J = {
   <p>You clicked {counter} times.</p>
   <button @click={increment}>Click me</button>
 </div>
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var Z = {
-  name: 'markdown',
-  title: getTemplateName('templates.starter.markdown', 'Markdown Starter'),
-  thumbnail: 'assets/templates/markdown.svg',
-  activeEditor: 'markup',
-  markup: {
-    language: 'markdown',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var mt={name:"markdown",aliases:["md"],title:getTemplateName("templates.starter.markdown","Markdown Starter"),thumbnail:"assets/templates/markdown.svg",activeEditor:"markup",markup:{language:"markdown",content:`
 # Project Title
 
 One Paragraph of project description goes here
@@ -2950,11 +3356,7 @@ This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md
 
 
 Source: https://gist.github.com/PurpleBooth/109311bb0361f32d87a2
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 @import "github-markdown-css";
 
 body {
@@ -2963,27 +3365,8 @@ body {
   padding: 20px;
   margin: 20px !important;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `document.body.classList.add('markdown-body');
-`,
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var K = {
-  name: 'mdx',
-  title: getTemplateName('templates.starter.mdx', 'MDX Starter'),
-  thumbnail: 'assets/templates/mdx.svg',
-  activeEditor: 'markup',
-  markup: {
-    language: 'mdx',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`document.body.classList.add('markdown-body');
+`},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var pt={name:"mdx",title:getTemplateName("templates.starter.mdx","MDX Starter"),thumbnail:"assets/templates/mdx.svg",activeEditor:"markup",markup:{language:"mdx",content:`
 import { Greeting, Counter } from './script';
 
 <Greeting name="MDX" />
@@ -2991,11 +3374,7 @@ import { Greeting, Counter } from './script';
 ![MDX Logo]({{ __livecodes_baseUrl__ }}assets/templates/mdx.svg)
 
 <Counter />
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 body,
 body button {
   text-align: center;
@@ -3004,11 +3383,7 @@ body button {
 img {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'jsx',
-    content: `
+`.trimStart()},script:{language:"jsx",content:`
 import { useState } from "react";
 
 export const Greeting = (props) => <h1>Hello, {props.name || "World"}!</h1>;
@@ -3024,17 +3399,7 @@ export function Counter() {
     </div>
   );
 }
-`.trimStart(),
-  },
-};
-var Q = {
-  name: 'minizinc',
-  title: getTemplateName('templates.starter.minizinc', 'MiniZinc Starter'),
-  thumbnail: 'assets/templates/minizinc.png',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var dt={name:"minizinc",aliases:["mzn"],title:getTemplateName("templates.starter.minizinc","MiniZinc Starter"),thumbnail:"assets/templates/minizinc.png",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/minizinc.png" title="MiniZinc" />
   <button id="button" onclick="run()">Run</button>
@@ -3106,11 +3471,7 @@ cocoa = 500;
 
   run();
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 * {
   box-sizing: border-box;
 }
@@ -3179,11 +3540,7 @@ cocoa = 500;
 #output.error {
   color: red;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'minizinc',
-    content: String.raw`
+`.trimStart()},script:{language:"minizinc",content:String.raw`
 % from https://docs.minizinc.dev/en/stable/part_2_tutorial.html
 % Baking cakes for the school fete (with data file)
 
@@ -3224,22 +3581,8 @@ solve maximize 400 * b + 450 * c;
 output [
   "no. of banana cakes = \(b)\n",
   "no. of chocolate cakes = \(c)\n"];
-`.trimStart(),
-  },
-};
-var tt = {
-  name: 'ocaml',
-  title: getTemplateName('templates.starter.ocaml', 'Ocaml Starter'),
-  thumbnail: 'assets/templates/ocaml.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `<div id="app">Loading...</div>
-`,
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()}};var ut={name:"ocaml",title:getTemplateName("templates.starter.ocaml","Ocaml Starter"),thumbnail:"assets/templates/ocaml.svg",activeEditor:"script",markup:{language:"html",content:`<div id="app">Loading...</div>
+`},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -3248,11 +3591,7 @@ var tt = {
 .logo {
   width: 250px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'ocaml',
-    content: `
+`.trimStart()},script:{language:"ocaml",content:`
 module App =
   struct
     let make ~name  =
@@ -3291,35 +3630,14 @@ let _ =
   | None  -> ()
 
 let _ = print_endline "Hello, OCaml!"
-`.trimStart(),
-  },
-  customSettings: {
-    imports: {
-      react: 'https://esm.sh/react@18.3.1',
-      'react/': 'https://esm.sh/react@18.3.1/',
-      'react-dom': 'https://esm.sh/react-dom@18.3.1',
-    },
-  },
-};
-var et = {
-  name: 'perl',
-  title: getTemplateName('templates.starter.perl', 'Perl Starter'),
-  thumbnail: 'assets/templates/perl.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},customSettings:{imports:{react:"https://esm.sh/react@18.3.1","react/":"https://esm.sh/react@18.3.1/","react-dom":"https://esm.sh/react-dom@18.3.1"}}};var gt={name:"perl",aliases:["pl"],title:getTemplateName("templates.starter.perl","Perl Starter"),thumbnail:"assets/templates/perl.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/perl.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -3328,11 +3646,7 @@ var et = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'perl',
-    content: `
+`.trimStart()},script:{language:"perl",content:`
 use strict;
 
 my $title = 'Perl';
@@ -3374,30 +3688,11 @@ if ($hour < 12) {
 } else {
   print "Good evening";
 }
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var st = {
-  name: 'phaser',
-  title: 'Phaser Starter',
-  thumbnail: 'assets/templates/phaser.png',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var ht={name:"phaser",title:getTemplateName("templates.starter.phaser","Phaser Starter"),thumbnail:"assets/templates/phaser.png",activeEditor:"script",markup:{language:"html",content:`
 <div id="app">
   <div id="game-container"></div>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 body {
   margin: 0;
   padding: 0;
@@ -3413,11 +3708,7 @@ body {
   justify-content: center;
   align-items: center;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`
 // based on https://github.com/phaserjs/template-vite
 // and https://phaser.io/sandbox/XyqPcjNr
 
@@ -3591,28 +3882,14 @@ const config = {
 };
 
 export default new Phaser.Game(config);
-`.trimStart(),
-  },
-};
-var ot = {
-  name: 'php',
-  title: getTemplateName('templates.starter.php', 'PHP Starter'),
-  thumbnail: 'assets/templates/php.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var ft={name:"php",title:getTemplateName("templates.starter.php","PHP Starter"),thumbnail:"assets/templates/php.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">world</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/php.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -3621,11 +3898,7 @@ var ot = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'php',
-    content: `
+`.trimStart()},script:{language:"php",content:`
 <?php
 $title = 'PHP';
 $document->getElementById('title')->innerText = $title;
@@ -3639,26 +3912,12 @@ $document
     $document->getElementById('counter')->innerText = $count;
     echo "count: $count";
   });
-`.trimStart(),
-  },
-};
-var nt = {
-  name: 'php-wasm',
-  title: getTemplateName('templates.starter.php-wasm', 'PHP (Wasm) Starter'),
-  thumbnail: 'assets/templates/php.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var bt={name:"php-wasm",title:getTemplateName("templates.starter.php-wasm","PHP (Wasm) Starter"),thumbnail:"assets/templates/php.svg",activeEditor:"script",markup:{language:"html",content:`
 <p>
   <h1>Hello, <span id="title">world</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/php.svg" />
 </p>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 body {
   text-align: center;
   font: 1em sans-serif;
@@ -3666,11 +3925,7 @@ body {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'php-wasm',
-    content: `
+`.trimStart()},script:{language:"php-wasm",content:`
 <?php
 $title = "PHP";
 vrzno_eval('document.getElementById("title").innerText = "' . $title . '"');
@@ -3689,17 +3944,7 @@ if ($time < 12) {
 $date = date("l jS \\of F, Y");
 
 echo $greeting . "<br>Today is:<br>" . $date;
-`.trimStart(),
-  },
-};
-var rt = {
-  name: 'postgresql',
-  title: getTemplateName('templates.starter.postgresql', 'PostgreSQL Starter'),
-  thumbnail: 'assets/templates/postgresql.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var vt={name:"postgresql",aliases:["pg","postgres","pgsql"],title:getTemplateName("templates.starter.postgresql","PostgreSQL Starter"),thumbnail:"assets/templates/postgresql.svg",activeEditor:"script",markup:{language:"html",content:`
 <div id="output">
   <details open>
     <summary>Tables</summary>
@@ -3729,11 +3974,7 @@ var rt = {
     document.querySelector('#obj-result').innerHTML = JSON.stringify(results, null, 2);
   }).catch(console.error);
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 #output {
   color: #3d3d3d;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
@@ -3772,11 +4013,7 @@ var rt = {
   min-width: 95%;
   padding: 1em;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'postgresql',
-    content: `
+`.trimStart()},script:{language:"postgresql",content:`
 -- based on https://stackoverflow.com/q/7745609
 
 CREATE TABLE IF NOT EXISTS quotes (
@@ -3811,22 +4048,8 @@ SELECT a.id, a.rev, a.quote
                ROW_NUMBER() OVER (PARTITION BY id ORDER BY rev DESC) rank
           FROM quotes) a
   WHERE a.rank = 1;
-`.trimStart(),
-  },
-};
-var at = {
-  name: 'preact',
-  title: getTemplateName('templates.starter.preact', 'Preact Starter'),
-  thumbnail: 'assets/templates/preact.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `<div id="app"></div>
-`,
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()}};var yt={name:"preact",title:getTemplateName("templates.starter.preact","Preact Starter"),thumbnail:"assets/templates/preact.svg",activeEditor:"script",markup:{language:"html",content:`<div id="app"></div>
+`},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -3835,13 +4058,9 @@ var at = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'jsx',
-    content: `
-/** @jsx h */
-import { h, render } from 'preact';
+`.trimStart()},script:{language:"jsx",content:`
+/** @jsxImportSource preact */
+import { render } from 'preact';
 import { useSignal } from "@preact/signals";
 
 function App(props) {
@@ -3857,17 +4076,7 @@ function App(props) {
 }
 
 render(<App name="Preact" />, document.body);
-`.trimStart(),
-  },
-};
-var it = {
-  name: 'prolog',
-  title: getTemplateName('templates.starter.prolog', 'Prolog Starter'),
-  thumbnail: 'assets/templates/tau-prolog.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var xt={name:"prolog",title:getTemplateName("templates.starter.prolog","Prolog Starter"),thumbnail:"assets/templates/tau-prolog.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/tau-prolog.svg" title="Tau Prolog" />
@@ -3913,11 +4122,7 @@ var it = {
   getTitle();
   runQuery();
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -3941,11 +4146,7 @@ var it = {
 }
 #result.error {
   color: red;
-}`.trimStart(),
-  },
-  script: {
-    language: 'prolog',
-    content: `
+}`.trimStart()},script:{language:"prolog",content:`
 title('Prolog').
 
 male(john).
@@ -4011,33 +4212,14 @@ aunt(X, Y):- parent(Z, Y),
 ancestor(X, Y):- parent(X, Y).
 ancestor(X, Y):- parent(X, Z),
     ancestor(Z, Y).
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var lt = {
-  name: 'python',
-  title: getTemplateName('templates.starter.python', 'Python Starter'),
-  thumbnail: 'assets/templates/python.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var wt={name:"python",aliases:["py"],title:getTemplateName("templates.starter.python","Python Starter"),thumbnail:"assets/templates/python.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1 id="header">Hello, World!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/python.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -4046,11 +4228,7 @@ var lt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'python',
-    content: `
+`.trimStart()},script:{language:"python",content:`
 from browser import document
 import time
 
@@ -4074,38 +4252,14 @@ elif 12 <= current_time < 18:
       print('Good afternoon')
 else:
       print('Good evening')
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var ct = {
-  name: 'python-wasm',
-  aliases: ['pyodide'],
-  title: 'Python (Wasm) Starter',
-  thumbnail: 'assets/templates/python.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var St={name:"python-wasm",aliases:["pyodide","py-wasm"],title:getTemplateName("templates.starter.python-wasm","Python (Wasm) Starter"),thumbnail:"assets/templates/python.svg",activeEditor:"script",markup:{language:"html",content:`
 <h1 id="title">Hello, World!</h1>
 <div id="loading">Loading...</div>
 <div id="plots"></div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `h1 {
+`.trimStart()},style:{language:"css",content:`h1 {
   text-align: center;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'python-wasm',
-    content: `
+`.trimStart()},script:{language:"python-wasm",content:`
 from js import document, XMLHttpRequest
 import pandas as pd
 import matplotlib.pyplot as plt
@@ -4161,17 +4315,7 @@ loading.innerHTML = ""
 
 # avoid leaving figures open
 plt.close("all")
-`.trimStart(),
-  },
-};
-var mt = {
-  name: 'r',
-  title: getTemplateName('templates.starter.r', 'R Starter'),
-  thumbnail: 'assets/templates/r.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var kt={name:"r",aliases:["r-lang","rlang"],title:getTemplateName("templates.starter.r","R Starter"),thumbnail:"assets/templates/r.svg",activeEditor:"script",markup:{language:"html",content:`
 <div id="output">Loading...</div>
 
 <script>
@@ -4183,12 +4327,7 @@ var mt = {
   //   canvasBackground: 'transparent',
   // };
 <\/script>
-`.trimStart(),
-  },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'r',
-    content: `
+`.trimStart()},style:{language:"css",content:""},script:{language:"r",content:`
 head(iris)
 
 PW <- iris$Petal.Width
@@ -4224,24 +4363,7 @@ legend("topleft",
 #   summarize(mean_price = mean(price)) %>%
 #   ggplot(aes(x = cut, y = mean_price, fill = cut)) +
 #       geom_bar(stat = "identity")
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var pt = {
-  name: 'react-native',
-  title: getTemplateName('templates.starter.react-native', 'React Native Starter'),
-  thumbnail: 'assets/templates/react.svg',
-  activeEditor: 'script',
-  markup: { language: 'html', content: '' },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'react-native',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var jt={name:"react-native",title:getTemplateName("templates.starter.react-native","React Native Starter"),thumbnail:"assets/templates/react.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:""},script:{language:"react-native",content:`
 import { useState } from "react";
 import { Button, Image, StyleSheet, Text, View } from "react-native";
 
@@ -4318,18 +4440,7 @@ const styles = StyleSheet.create({
     color: "#1B95E0",
   },
 });
-`.trimStart(),
-  },
-};
-var dt = {
-  name: 'react',
-  title: getTemplateName('templates.starter.react', 'React Starter'),
-  thumbnail: 'assets/templates/react.svg',
-  activeEditor: 'script',
-  markup: { language: 'html', content: '' },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()}};var _t={name:"react",title:getTemplateName("templates.starter.react","React Starter"),thumbnail:"assets/templates/react.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -4338,11 +4449,7 @@ var dt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'react',
-    content: `
+`.trimStart()},script:{language:"react",content:`
 import { useState } from "react";
 
 function Counter(props) {
@@ -4360,27 +4467,8 @@ function Counter(props) {
 export default function App() {
   return <Counter name="React" />;
 }
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var ut = {
-  name: 'reason',
-  title: getTemplateName('templates.starter.reason', 'Reason Starter'),
-  thumbnail: 'assets/templates/reason.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `<div id="app">Loading...</div>
-`,
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Tt={name:"reason",title:getTemplateName("templates.starter.reason","Reason Starter"),thumbnail:"assets/templates/reason.svg",activeEditor:"script",markup:{language:"html",content:`<div id="app">Loading...</div>
+`},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -4389,11 +4477,7 @@ var ut = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'reason',
-    content: `
+`.trimStart()},script:{language:"reason",content:`
 module App = {
   [@react.component]
   let make = (~name) => {
@@ -4424,29 +4508,8 @@ switch (ReactDOM.querySelector("#app")) {
 }
 
 Js.log("Hello, Reason!");
-`.trimStart(),
-  },
-  customSettings: {
-    imports: {
-      react: 'https://esm.sh/react@18.3.1',
-      'react/': 'https://esm.sh/react@18.3.1/',
-      'react-dom': 'https://esm.sh/react-dom@18.3.1',
-    },
-  },
-};
-var gt = {
-  name: 'rescript',
-  title: getTemplateName('templates.starter.rescript', 'ReScript Starter'),
-  thumbnail: 'assets/templates/rescript.png',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `<div id="app">Loading...</div>
-`,
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},customSettings:{imports:{react:"https://esm.sh/react@18.3.1","react/":"https://esm.sh/react@18.3.1/","react-dom":"https://esm.sh/react-dom@18.3.1"}}};var Ct={name:"rescript",title:getTemplateName("templates.starter.rescript","ReScript Starter"),thumbnail:"assets/templates/rescript.png",activeEditor:"script",markup:{language:"html",content:`<div id="app">Loading...</div>
+`},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -4455,11 +4518,7 @@ var gt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'rescript',
-    content: `
+`.trimStart()},script:{language:"rescript",content:`
 // import npm modules
 @module("canvas-confetti") external confetti: () => unit = "default"
 
@@ -4502,22 +4561,7 @@ switch ReactDOM.querySelector("#app") {
 }
 
 Console.log("Hello, ReScript!")
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var ht = {
-  name: 'riot',
-  title: getTemplateName('templates.starter.riot', 'Riot.js Starter'),
-  thumbnail: 'assets/templates/riot.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Ut={name:"riot",title:getTemplateName("templates.starter.riot","Riot.js Starter"),thumbnail:"assets/templates/riot.svg",activeEditor:"script",markup:{language:"html",content:`
 <counter title="Riot.js"></counter>
 
 <script>
@@ -4525,12 +4569,7 @@ var ht = {
     url: 'https://riot.js.org/'
   }
 <\/script>
-`.trimStart(),
-  },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'riot',
-    content: `
+`.trimStart()},style:{language:"css",content:""},script:{language:"riot",content:`
 <counter>
   <div class="container">
     <h1>Hello, { props.title }!</h1>
@@ -4573,33 +4612,14 @@ var ht = {
     };
   <\/script>
 </counter>
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var bt = {
-  name: 'ruby',
-  title: getTemplateName('templates.starter.ruby', 'Ruby Starter'),
-  thumbnail: 'assets/templates/ruby.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Et={name:"ruby",aliases:["rb"],title:getTemplateName("templates.starter.ruby","Ruby Starter"),thumbnail:"assets/templates/ruby.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/ruby.svg" />
   <p id="counter">You clicked 0 times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -4608,11 +4628,7 @@ var bt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'ruby',
-    content: `
+`.trimStart()},script:{language:"ruby",content:`
 require "date"
 require "native"
 
@@ -4640,33 +4656,14 @@ elsif current_time < 18
 else
     puts "Good evening, " + msg
 end
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var ft = {
-  name: 'ruby-wasm',
-  title: getTemplateName('templates.starter.ruby-wasm', 'Ruby (Wasm) Starter'),
-  thumbnail: 'assets/templates/ruby.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Lt={name:"ruby-wasm",aliases:["rb-wasm"],title:getTemplateName("templates.starter.ruby-wasm","Ruby (Wasm) Starter"),thumbnail:"assets/templates/ruby.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/ruby.svg" />
   <p id="counter">You clicked 0 times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -4675,11 +4672,7 @@ var ft = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'ruby-wasm',
-    content: `
+`.trimStart()},script:{language:"ruby-wasm",content:`
 require "js"
 require "date"
 
@@ -4707,28 +4700,14 @@ elsif current_time < 18
 else
     puts "Good evening, " + msg
 end
-`.trimStart(),
-  },
-};
-var vt = {
-  name: 'scheme',
-  title: getTemplateName('templates.starter.scheme', 'Scheme Starter'),
-  thumbnail: 'assets/templates/scheme.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var Mt={name:"scheme",title:getTemplateName("templates.starter.scheme","Scheme Starter"),thumbnail:"assets/templates/scheme.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/scheme.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -4737,11 +4716,7 @@ var vt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'scheme',
-    content: `
+`.trimStart()},script:{language:"scheme",content:`
 (let ((title "Scheme"))
   (set-content! "#title" title))
 
@@ -4757,30 +4732,10 @@ var vt = {
     (cond ((< time-now 12) "Good morning")
           ((< time-now 18) "Good afternoon")
           (else "Good evening"))))
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var t = 'https://cdn.jsdelivr.net/npm/@hatemhosny/shadcdn@0.0.14/build/',
-  yt = {
-    name: 'shadcn-ui',
-    title: getTemplateName('templates.starter.shadcnui', 'shadcn/ui Starter'),
-    thumbnail: 'assets/templates/shadcn-ui.svg',
-    activeEditor: 'script',
-    markup: {
-      language: 'html',
-      content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var t="https://cdn.jsdelivr.net/npm/@hatemhosny/shadcdn@0.0.14/build/",qt={name:"shadcn-ui",title:getTemplateName("templates.starter.shadcnui","shadcn/ui Starter"),thumbnail:"assets/templates/shadcn-ui.svg",activeEditor:"script",markup:{language:"html",content:`
 <link rel="stylesheet" href="${t}shadcdn.css">
 <link rel="stylesheet" href="${t}themes.css">
-`.trimStart(),
-    },
-    style: {
-      language: 'css',
-      content: `
+`.trimStart()},style:{language:"css",content:`
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -4791,11 +4746,7 @@ var t = 'https://cdn.jsdelivr.net/npm/@hatemhosny/shadcdn@0.0.14/build/',
     --radius: 0.5rem;
   }
 }
-`.trimStart(),
-    },
-    script: {
-      language: 'react-tsx',
-      content: `
+`.trimStart()},script:{language:"react-tsx",content:`
 // from https://ui.shadcn.com/blocks/login#login-03
 import { GalleryVerticalEnd } from 'lucide-react';
 import { Button } from '@/components/ui/button';
@@ -4908,81 +4859,7 @@ function LoginForm({
     </div>
   );
 }
-`.trimStart(),
-    },
-    processors: ['tailwindcss'],
-    imports: {},
-    types: {},
-    customSettings: {
-      imports: {
-        react: 'https://esm.sh/react',
-        'react/': 'https://esm.sh/react/',
-        'react-dom': 'https://esm.sh/react-dom',
-        'react-dom/': 'https://esm.sh/react-dom/',
-        '@': `${t}shadcdn.js`,
-        '@/lib/utils': `${t}shadcdn.js`,
-        '@/components/ui/accordion': `${t}shadcdn.js`,
-        '@/components/ui/alert-dialog': `${t}shadcdn.js`,
-        '@/components/ui/alert': `${t}shadcdn.js`,
-        '@/components/ui/aspect-ratio': `${t}shadcdn.js`,
-        '@/components/ui/avatar': `${t}shadcdn.js`,
-        '@/components/ui/badge': `${t}shadcdn.js`,
-        '@/components/ui/button': `${t}shadcdn.js`,
-        '@/components/ui/calendar': `${t}shadcdn.js`,
-        '@/components/ui/card': `${t}shadcdn.js`,
-        '@/components/ui/checkbox': `${t}shadcdn.js`,
-        '@/components/ui/collapsible': `${t}shadcdn.js`,
-        '@/components/ui/command': `${t}shadcdn.js`,
-        '@/components/ui/context-menu': `${t}shadcdn.js`,
-        '@/components/ui/dialog': `${t}shadcdn.js`,
-        '@/components/ui/dropdown-menu': `${t}shadcdn.js`,
-        '@/components/ui/form': `${t}shadcdn.js`,
-        '@/components/ui/hover-card': `${t}shadcdn.js`,
-        '@/components/ui/input': `${t}shadcdn.js`,
-        '@/components/ui/label': `${t}shadcdn.js`,
-        '@/components/ui/menubar': `${t}shadcdn.js`,
-        '@/components/ui/navigation-menu': `${t}shadcdn.js`,
-        '@/components/ui/popover': `${t}shadcdn.js`,
-        '@/components/ui/progress': `${t}shadcdn.js`,
-        '@/components/ui/radio-group': `${t}shadcdn.js`,
-        '@/components/ui/scroll-area': `${t}shadcdn.js`,
-        '@/components/ui/select': `${t}shadcdn.js`,
-        '@/components/ui/separator': `${t}shadcdn.js`,
-        '@/components/ui/sheet': `${t}shadcdn.js`,
-        '@/components/ui/skeleton': `${t}shadcdn.js`,
-        '@/components/ui/slider': `${t}shadcdn.js`,
-        '@/components/ui/switch': `${t}shadcdn.js`,
-        '@/components/ui/table': `${t}shadcdn.js`,
-        '@/components/ui/tabs': `${t}shadcdn.js`,
-        '@/components/ui/textarea': `${t}shadcdn.js`,
-        '@/components/ui/toast': `${t}shadcdn.js`,
-        '@/components/ui/toaster': `${t}shadcdn.js`,
-        '@/components/ui/toggle': `${t}shadcdn.js`,
-        '@/components/ui/tooltip': `${t}shadcdn.js`,
-        '@/components/ui/use-toast': `${t}shadcdn.js`,
-        '@/components/ui/resizable': `${t}shadcdn.js`,
-        '@/components/ui/input-otp': `${t}shadcdn.js`,
-        '@/components/ui/breadcrumb': `${t}shadcdn.js`,
-        '@/components/ui/toggle-group': `${t}shadcdn.js`,
-        '@/components/ui/sonner': `${t}shadcdn.js`,
-        '@/components/ui/pagination': `${t}shadcdn.js`,
-        '@/components/ui/drawer': `${t}shadcdn.js`,
-        '@/components/ui/carousel': `${t}shadcdn.js`,
-        '@/components/ui/sidebar': `${t}shadcdn.js`,
-        '@/components/ui/chart': `${t}shadcdn.js`,
-      },
-      types: { '@/components': `${t}shadcdn.d.ts`, '@/utils': `${t}shadcdn.d.ts` },
-    },
-  };
-var xt = {
-  name: 'solid',
-  title: getTemplateName('templates.starter.solid', 'Solid Starter'),
-  thumbnail: 'assets/templates/solid.svg',
-  activeEditor: 'script',
-  markup: { language: 'html', content: '' },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},processors:["tailwindcss"],imports:{},types:{},customSettings:{imports:{react:"https://esm.sh/react","react/":"https://esm.sh/react/","react-dom":"https://esm.sh/react-dom","react-dom/":"https://esm.sh/react-dom/","@":`${t}shadcdn.js`,"@/lib/utils":`${t}shadcdn.js`,"@/components/ui/accordion":`${t}shadcdn.js`,"@/components/ui/alert-dialog":`${t}shadcdn.js`,"@/components/ui/alert":`${t}shadcdn.js`,"@/components/ui/aspect-ratio":`${t}shadcdn.js`,"@/components/ui/avatar":`${t}shadcdn.js`,"@/components/ui/badge":`${t}shadcdn.js`,"@/components/ui/button":`${t}shadcdn.js`,"@/components/ui/calendar":`${t}shadcdn.js`,"@/components/ui/card":`${t}shadcdn.js`,"@/components/ui/checkbox":`${t}shadcdn.js`,"@/components/ui/collapsible":`${t}shadcdn.js`,"@/components/ui/command":`${t}shadcdn.js`,"@/components/ui/context-menu":`${t}shadcdn.js`,"@/components/ui/dialog":`${t}shadcdn.js`,"@/components/ui/dropdown-menu":`${t}shadcdn.js`,"@/components/ui/form":`${t}shadcdn.js`,"@/components/ui/hover-card":`${t}shadcdn.js`,"@/components/ui/input":`${t}shadcdn.js`,"@/components/ui/label":`${t}shadcdn.js`,"@/components/ui/menubar":`${t}shadcdn.js`,"@/components/ui/navigation-menu":`${t}shadcdn.js`,"@/components/ui/popover":`${t}shadcdn.js`,"@/components/ui/progress":`${t}shadcdn.js`,"@/components/ui/radio-group":`${t}shadcdn.js`,"@/components/ui/scroll-area":`${t}shadcdn.js`,"@/components/ui/select":`${t}shadcdn.js`,"@/components/ui/separator":`${t}shadcdn.js`,"@/components/ui/sheet":`${t}shadcdn.js`,"@/components/ui/skeleton":`${t}shadcdn.js`,"@/components/ui/slider":`${t}shadcdn.js`,"@/components/ui/switch":`${t}shadcdn.js`,"@/components/ui/table":`${t}shadcdn.js`,"@/components/ui/tabs":`${t}shadcdn.js`,"@/components/ui/textarea":`${t}shadcdn.js`,"@/components/ui/toast":`${t}shadcdn.js`,"@/components/ui/toaster":`${t}shadcdn.js`,"@/components/ui/toggle":`${t}shadcdn.js`,"@/components/ui/tooltip":`${t}shadcdn.js`,"@/components/ui/use-toast":`${t}shadcdn.js`,"@/components/ui/resizable":`${t}shadcdn.js`,"@/components/ui/input-otp":`${t}shadcdn.js`,"@/components/ui/breadcrumb":`${t}shadcdn.js`,"@/components/ui/toggle-group":`${t}shadcdn.js`,"@/components/ui/sonner":`${t}shadcdn.js`,"@/components/ui/pagination":`${t}shadcdn.js`,"@/components/ui/drawer":`${t}shadcdn.js`,"@/components/ui/carousel":`${t}shadcdn.js`,"@/components/ui/sidebar":`${t}shadcdn.js`,"@/components/ui/chart":`${t}shadcdn.js`},types:{"@/components":`${t}shadcdn.d.ts`,"@/utils":`${t}shadcdn.d.ts`}}};var $t={name:"solid",title:getTemplateName("templates.starter.solid","Solid Starter"),thumbnail:"assets/templates/solid.svg",activeEditor:"script",markup:{language:"html",content:""},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -4991,11 +4868,7 @@ var xt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'solid.tsx',
-    content: `
+`.trimStart()},script:{language:"solid.tsx",content:`
 import { createSignal } from "solid-js";
 
 function Counter(props: { name: string }) {
@@ -5014,22 +4887,7 @@ function Counter(props: { name: string }) {
 export default function App() {
   return <Counter name="Solid" />;
 }
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var wt = {
-  name: 'sql',
-  title: getTemplateName('templates.starter.sql', 'SQL Starter'),
-  thumbnail: 'assets/templates/sqlite.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Bt={name:"sql",title:getTemplateName("templates.starter.sql","SQL Starter"),thumbnail:"assets/templates/sqlite.svg",activeEditor:"script",markup:{language:"html",content:`
 <div id="output">
   <details open>
     <summary>Tables</summary>
@@ -5059,11 +4917,7 @@ var wt = {
     document.querySelector('#obj-result').innerHTML = JSON.stringify(results, null, 2);
   }).catch(console.error);
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 #output {
   color: #3d3d3d;
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
@@ -5102,11 +4956,7 @@ var wt = {
   min-width: 95%;
   padding: 1em;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'sql',
-    content: `
+`.trimStart()},script:{language:"sql",content:`
 -- based on https://stackoverflow.com/q/7745609
 
 CREATE TABLE IF NOT EXISTS quotes (
@@ -5141,23 +4991,8 @@ SELECT a.id, a.rev, a.quote
                ROW_NUMBER() OVER (PARTITION BY id ORDER BY rev DESC) rank
           FROM quotes) a
   WHERE a.rank = 1;
-`.trimStart(),
-  },
-};
-var St = {
-  name: 'stencil',
-  title: getTemplateName('templates.starter.stencil', 'Stencil Starter'),
-  thumbnail: 'assets/templates/stencil.png',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `<my-app title="Stencil"></my-app>
-`,
-  },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'stencil',
-    content: `
+`.trimStart()}};var Ht={name:"stencil",title:getTemplateName("templates.starter.stencil","Stencil Starter"),thumbnail:"assets/templates/stencil.png",activeEditor:"script",markup:{language:"html",content:`<my-app title="Stencil"></my-app>
+`},style:{language:"css",content:""},script:{language:"stencil",content:`
 import { Component, Prop, h, State } from "@stencil/core";
 
 @Component({
@@ -5192,33 +5027,13 @@ export class App {
     );
   }
 }
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var kt = {
-  name: 'svelte',
-  title: getTemplateName('templates.starter.svelte', 'Svelte Starter'),
-  thumbnail: 'assets/templates/svelte.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'svelte',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var At={name:"svelte",title:getTemplateName("templates.starter.svelte","Svelte Starter"),thumbnail:"assets/templates/svelte.svg",activeEditor:"script",markup:{language:"svelte",content:`
 <script>
 import Counter from "./Component.svelte";
 <\/script>
 
 <Counter title="Svelte" />
-`.trimStart(),
-  },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'svelte',
-    content: `
+`.trimStart()},style:{language:"css",content:""},script:{language:"svelte",content:`
 <script>
   let { title = "World" } = $props();
   let counter = $state(0);
@@ -5244,22 +5059,7 @@ import Counter from "./Component.svelte";
   <p>You clicked {counter} times.</p>
   <button on:click={increment}>Click me</button>
 </div>
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var _t = {
-  name: 'tailwindcss',
-  title: getTemplateName('templates.starter.tailwindcss', 'Tailwind CSS Starter'),
-  thumbnail: 'assets/templates/tailwindcss.svg',
-  activeEditor: 'markup',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Rt={name:"tailwindcss",aliases:["tw","tailwind"],title:getTemplateName("templates.starter.tailwindcss","Tailwind CSS Starter"),thumbnail:"assets/templates/tailwindcss.svg",activeEditor:"markup",markup:{language:"html",content:`
 <div class="relative grid min-h-screen grid-cols-[1fr_2.5rem_auto_2.5rem_1fr] grid-rows-[1fr_1px_auto_1px_1fr] bg-white [--pattern-fg:var(--color-gray-950)]/5 dark:bg-gray-950 dark:[--pattern-fg:var(--color-white)]/10">
   <div class="col-start-3 row-start-3 flex max-w-lg flex-col bg-gray-100 p-2 dark:bg-white/10">
     <div class="rounded-xl bg-white p-10 text-sm/7 text-gray-700 dark:bg-gray-950 dark:text-gray-300">
@@ -5332,29 +5132,13 @@ var _t = {
   <div class="relative -bottom-px col-span-full col-start-1 row-start-2 h-px bg-(--pattern-fg)"></div>
   <div class="relative -top-px col-span-full col-start-1 row-start-4 h-px bg-(--pattern-fg)"></div>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 @import "tailwindcss";
 
 @theme {
   /* ... */
 }
-`.trimStart(),
-  },
-  script: { language: 'javascript', content: '' },
-  processors: ['tailwindcss'],
-};
-var jt = {
-  name: 'tcl',
-  title: getTemplateName('templates.starter.tcl', 'Tcl Starter'),
-  thumbnail: 'assets/templates/tcl.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},script:{language:"javascript",content:""},processors:["tailwindcss"]};var Pt={name:"tcl",title:getTemplateName("templates.starter.tcl","Tcl Starter"),thumbnail:"assets/templates/tcl.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="name">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/tcl.svg" />
@@ -5378,11 +5162,7 @@ var jt = {
     };
   });
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -5391,11 +5171,7 @@ var jt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'tcl',
-    content: `
+`.trimStart()},script:{language:"tcl",content:`
 set title "Tcl"
 ::wacl::dom attr "#name" innerText $title
 
@@ -5407,33 +5183,14 @@ if {[info exists count]} {
 }
 ::wacl::dom attr "#counter" innerText $count
 puts $count
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var Tt = {
-  name: 'teal',
-  title: getTemplateName('templates.starter.teal', 'Teal Starter'),
-  thumbnail: 'assets/templates/teal.png',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var zt={name:"teal",title:getTemplateName("templates.starter.teal","Teal Starter"),thumbnail:"assets/templates/teal.png",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/teal.png" />
   <p id="counter">You clicked 0 times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -5442,11 +5199,7 @@ var Tt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'teal',
-    content: `
+`.trimStart()},script:{language:"teal",content:`
 global record Js
   record global
     record document
@@ -5479,28 +5232,14 @@ button:addEventListener("click", function()
   count = increment(count)
   counter_el.innerHTML = ("You clicked %d times."):format(count)
 end)
-`.trimStart(),
-  },
-};
-var Ct = {
-  name: 'typescript',
-  title: getTemplateName('templates.starter.typescript', 'TypeScript Starter'),
-  thumbnail: 'assets/templates/typescript.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()}};var Nt={name:"typescript",aliases:["ts"],title:getTemplateName("templates.starter.typescript","TypeScript Starter"),thumbnail:"assets/templates/typescript.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/typescript.svg" />
   <p>You clicked <span id="counter">0</span> times.</p>
   <button id="counter-button">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -5509,11 +5248,7 @@ var Ct = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'typescript',
-    content: `
+`.trimStart()},script:{language:"typescript",content:`
 class Counter {
   private count: number;
   constructor() {
@@ -5541,22 +5276,7 @@ button.addEventListener(
   },
   false
 );
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var Ut = {
-  name: 'vue',
-  title: getTemplateName('templates.starter.vue', 'Vue SFC Starter'),
-  thumbnail: 'assets/templates/vue.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'vue',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var Wt={name:"vue",title:getTemplateName("templates.starter.vue","Vue SFC Starter"),thumbnail:"assets/templates/vue.svg",activeEditor:"script",markup:{language:"vue",content:`
 <script setup lang="tsx">
 import Counter from './Component.vue';
 <\/script>
@@ -5564,12 +5284,7 @@ import Counter from './Component.vue';
 <template>
   <Counter name="Vue" />
 </template>
-`.trimStart(),
-  },
-  style: { language: 'css', content: '' },
-  script: {
-    language: 'vue',
-    content: `
+`.trimStart()},style:{language:"css",content:""},script:{language:"vue",content:`
 <script setup lang="tsx">
   import { ref } from 'vue';
 
@@ -5605,33 +5320,14 @@ import Counter from './Component.vue';
     width: 150px;
   }
 </style>
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var Et = {
-  name: 'vue2',
-  title: getTemplateName('templates.starter.vue2', 'Vue 2 Starter'),
-  thumbnail: 'assets/templates/vue.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var It={name:"vue2",title:getTemplateName("templates.starter.vue2","Vue 2 Starter"),thumbnail:"assets/templates/vue.svg",activeEditor:"script",markup:{language:"html",content:`
 <div id="app">
   <h1>Hello, Vue!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/vue.svg" />
   <p>You clicked {{ counter }} times.</p>
   <button @click="increment()">Click me</button>
 </div>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 #app,
 #app button {
   text-align: center;
@@ -5640,11 +5336,7 @@ var Et = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'javascript',
-    content: `
+`.trimStart()},script:{language:"javascript",content:`
 new Vue({
   el: "#app",
   data: {
@@ -5656,22 +5348,7 @@ new Vue({
     },
   },
 });
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: ['{{ __CDN_URL__ }}vue@2'],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var Lt = {
-  name: 'wat',
-  title: getTemplateName('templates.starter.wat', 'WebAssembly Text Starter'),
-  thumbnail: 'assets/templates/webassembly.svg',
-  activeEditor: 'script',
-  markup: {
-    language: 'html',
-    content: `
+`.trimStart()},stylesheets:[],scripts:["{{ __CDN_URL__ }}vue@2"],cssPreset:"",imports:{},types:{}};var Ot={name:"wat",title:getTemplateName("templates.starter.wat","WebAssembly Text Starter"),thumbnail:"assets/templates/webassembly.svg",activeEditor:"script",markup:{language:"html",content:`
 <div class="container">
   <h1>Hello, <span id="title">World</span>!</h1>
   <img class="logo" alt="logo" src="{{ __livecodes_baseUrl__ }}assets/templates/webassembly.svg" />
@@ -5715,11 +5392,7 @@ var Lt = {
     );
   })();
 <\/script>
-`.trimStart(),
-  },
-  style: {
-    language: 'css',
-    content: `
+`.trimStart()},style:{language:"css",content:`
 .container,
 .container button {
   text-align: center;
@@ -5728,11 +5401,7 @@ var Lt = {
 .logo {
   width: 150px;
 }
-`.trimStart(),
-  },
-  script: {
-    language: 'wat',
-    content: `
+`.trimStart()},script:{language:"wat",content:`
 (module
   (import "title" "change" (func $changeTitle (param i32) (param i32)))
   (export "memory" (memory $0))
@@ -5747,83 +5416,4 @@ var Lt = {
     (i32.add (local.get $0) (i32.const 1))
   )
 )
-`.trimStart(),
-  },
-  stylesheets: [],
-  scripts: [],
-  cssPreset: '',
-  imports: {},
-  types: {},
-};
-var bo = [
-  b,
-  I,
-  Ct,
-  dt,
-  pt,
-  Ut,
-  d,
-  at,
-  kt,
-  xt,
-  G,
-  St,
-  K,
-  _t,
-  yt,
-  U,
-  v,
-  g,
-  ht,
-  J,
-  D,
-  h,
-  z,
-  A,
-  O,
-  C,
-  st,
-  Et,
-  S,
-  V,
-  y,
-  x,
-  H,
-  gt,
-  ut,
-  tt,
-  lt,
-  ct,
-  mt,
-  bt,
-  ft,
-  R,
-  N,
-  ot,
-  nt,
-  _,
-  j,
-  W,
-  T,
-  et,
-  X,
-  F,
-  Tt,
-  L,
-  Y,
-  vt,
-  k,
-  w,
-  P,
-  jt,
-  Z,
-  u,
-  Lt,
-  wt,
-  rt,
-  it,
-  Q,
-  f,
-  E,
-];
-export { bo as starterTemplates };
+`.trimStart()},stylesheets:[],scripts:[],cssPreset:"",imports:{},types:{}};var tn=[U,Q,Nt,_t,jt,Wt,j,yt,At,$t,rt,Ht,pt,Rt,qt,N,L,T,Ut,ct,ot,C,nt,et,tt,z,ht,It,B,at,M,q,Z,Ct,Tt,ut,wt,St,kt,Et,Lt,X,J,ft,bt,A,R,K,P,gt,it,lt,zt,I,st,Mt,H,$,V,Pt,mt,_,Ot,Bt,vt,xt,dt,E,W,...k];export{tn as starterTemplates};
diff --git a/server/src/broadcast/index.ts b/server/src/broadcast/index.ts
index bd3064f050..ae6d590281 100644
--- a/server/src/broadcast/index.ts
+++ b/server/src/broadcast/index.ts
@@ -7,6 +7,12 @@ import path from 'node:path';
 import * as socketio from 'socket.io';
 import { dirname, generateId } from '../utils.ts';
 
+interface Channel {
+  channelToken: string;
+  result: string;
+  data: Record<string, any>;
+  lastAccessed: number;
+}
 export const broadcast = ({
   hostname,
   port,
@@ -22,7 +28,7 @@ export const broadcast = ({
   const httpserver = http.createServer(app);
   const io = new socketio.Server(httpserver);
 
-  const channels = {};
+  const channels: Record<string, Channel> = {};
   const broadcastDir = path.resolve(dirname, 'broadcast');
   const broadcastUrl = `https://${hostname}:${port}`;
 
diff --git a/src/livecodes/UI/code-to-image.ts b/src/livecodes/UI/code-to-image.ts
index 971c414047..a0e12afe86 100644
--- a/src/livecodes/UI/code-to-image.ts
+++ b/src/livecodes/UI/code-to-image.ts
@@ -4,13 +4,13 @@ import { codeToImageScreen } from '../html';
 import type {
   CodeEditor,
   CodejarTheme,
-  Config,
   EditorId,
   EditorOptions,
   EventsManager,
   FormatFn,
   Modal,
   Notifications,
+  SDKConfig,
 } from '../models';
 import {
   colorToRgba,
@@ -75,7 +75,7 @@ export const createCodeToImageUI = async ({
   deps: {
     createEditor: (options: PreviewEditorOptions) => Promise<CodeEditor>;
     getFormatFn: () => Promise<FormatFn>;
-    getShareUrl: (config: Partial<Config>, shortUrl?: boolean) => Promise<string>;
+    getShareUrl: (config: Partial<SDKConfig>, shortUrl?: boolean) => Promise<string>;
     getSavedPreset: () => Partial<Preset> | undefined;
     savePreset: (preset: Partial<Preset>) => void;
   };
@@ -307,7 +307,7 @@ export const createCodeToImageUI = async ({
   };
   updateWatermark(currentUrl);
 
-  const getCodeConfig = (): Partial<Config> => ({
+  const getCodeConfig = (): Partial<SDKConfig> => ({
     title: windowControls.querySelector('#code-to-img-title')!.textContent || '',
     activeEditor: editorId,
     [editorId]: {
@@ -315,7 +315,7 @@ export const createCodeToImageUI = async ({
       content: editor.getValue(),
     },
   });
-  let cachedConfig: Partial<Config> | undefined;
+  let cachedConfig: Partial<SDKConfig> | undefined;
 
   let formData: Preset;
 
diff --git a/src/livecodes/UI/import.ts b/src/livecodes/UI/import.ts
index 2eb922e44d..0775331199 100644
--- a/src/livecodes/UI/import.ts
+++ b/src/livecodes/UI/import.ts
@@ -94,7 +94,7 @@ export const createImportUI = ({
         {
           ...defaultConfig,
           ...imported,
-        },
+        } as Partial<ContentConfig>,
         location.origin + location.pathname + '?x=' + encodeURIComponent(url),
       );
       modal.close();
@@ -116,7 +116,7 @@ export const createImportUI = ({
     importFromFiles({ files })
       .then((fileConfig) => {
         if (Object.keys(fileConfig).length === 0) return;
-        return loadConfig(fileConfig);
+        return loadConfig(fileConfig as Partial<ContentConfig>);
       })
       .then(modal.close)
       .catch((message) => {
diff --git a/src/livecodes/cache/cache.ts b/src/livecodes/cache/cache.ts
index 7070f1d2e4..698f9f1333 100644
--- a/src/livecodes/cache/cache.ts
+++ b/src/livecodes/cache/cache.ts
@@ -57,28 +57,33 @@ export const updateCache = (editorId: EditorId, language: Language, modified: st
   }
 };
 
-export const getCachedCode = (): Code => ({
-  markup: {
-    language: cache.markup.language,
-    content: cache.markup.content || '',
-    compiled: cache.markup.modified || cache.markup.compiled || '',
-  },
-  style: {
-    language: cache.style.language,
-    content: cache.style.content || '',
-    compiled: cache.style.modified || cache.style.compiled || '',
-  },
-  script: {
-    language: cache.script.language,
-    content: cache.script.content || '',
-    compiled: cache.script.modified || cache.script.compiled || '',
-  },
-  files: cache.files.map((f) => ({
-    filename: f.filename,
-    language: f.language,
-    content: f.content || '',
-    compiled: f.modified || f.compiled || '',
-  })),
-  mainFile: getMainFile(cache) || 'index.html',
-  result: cache.result || '',
-});
+export const getCachedCode = (): Code =>
+  cache.files.length > 0
+    ? {
+        files: cache.files.map((f) => ({
+          filename: f.filename,
+          language: f.language,
+          content: f.content || '',
+          compiled: f.modified || f.compiled || '',
+        })),
+        mainFile: getMainFile(cache) || 'index.html',
+        result: cache.result || '',
+      }
+    : {
+        markup: {
+          language: cache.markup.language,
+          content: cache.markup.content || '',
+          compiled: cache.markup.modified || cache.markup.compiled || '',
+        },
+        style: {
+          language: cache.style.language,
+          content: cache.style.content || '',
+          compiled: cache.style.modified || cache.style.compiled || '',
+        },
+        script: {
+          language: cache.script.language,
+          content: cache.script.content || '',
+          compiled: cache.script.modified || cache.script.compiled || '',
+        },
+        result: cache.result || '',
+      };
diff --git a/src/livecodes/config/build-config.ts b/src/livecodes/config/build-config.ts
index f201408886..adfc1fdf6d 100644
--- a/src/livecodes/config/build-config.ts
+++ b/src/livecodes/config/build-config.ts
@@ -4,6 +4,7 @@ import type {
   EditorId,
   Language,
   Processor,
+  SDKConfig,
   Tool,
   ToolsPaneStatus,
   UrlQueryParams,
@@ -27,7 +28,7 @@ import { getMainFile, isEditorId } from './utils';
  * 4. Sets active editor
  * 5. Fixes language names in final config
  */
-export const buildConfig = (appConfig: Partial<Config>): Config => {
+export const buildConfig = (appConfig: Partial<Config | SDKConfig>): Config => {
   if (!appConfig) return { ...defaultConfig };
   const userConfig = upgradeAndValidate(appConfig);
 
diff --git a/src/livecodes/config/config.ts b/src/livecodes/config/config.ts
index ae2e1c9fc0..e9ca8422c8 100644
--- a/src/livecodes/config/config.ts
+++ b/src/livecodes/config/config.ts
@@ -5,6 +5,7 @@ import type {
   EditorConfig,
   FormatterConfig,
   MultiFileConfig,
+  SDKConfig,
   SingleFileConfig,
   UserConfig,
 } from '../models';
@@ -101,12 +102,14 @@ export const getFormatterConfig = (config: Config | UserConfig): FormatterConfig
     trailingComma: config.trailingComma,
   });
 
-export const getSingleFileConfig = (config: Config): SingleFileConfig => {
-  const { files, mainFile, ...SingleFileConfig } = config;
+export const getSingleFileConfig = (
+  config: Config | ContentConfig | SDKConfig,
+): SingleFileConfig => {
+  const { files, mainFile, fileLanguages, lockFiles, ...SingleFileConfig } = config;
   return cloneObject(SingleFileConfig);
 };
 
-export const getMultiFileConfig = (config: Config): MultiFileConfig => {
+export const getMultiFileConfig = (config: Config | ContentConfig | SDKConfig): MultiFileConfig => {
   const {
     markup,
     style,
@@ -121,5 +124,8 @@ export const getMultiFileConfig = (config: Config): MultiFileConfig => {
   return cloneObject(multiFileConfig);
 };
 
-export const upgradeAndValidate = (config: Partial<Config>) =>
+export const getSDKConfig = (config: Config | ContentConfig | SDKConfig): SDKConfig =>
+  config.files.length ? getMultiFileConfig(config) : getSingleFileConfig(config);
+
+export const upgradeAndValidate = (config: Partial<Config | SDKConfig>) =>
   validateConfig(upgradeConfig(config as any));
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 510dbcac48..ca10251ef0 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -40,7 +40,10 @@ import {
   getContentConfig,
   getEditorConfig,
   getFormatterConfig,
+  getMultiFileConfig,
   getParams,
+  getSDKConfig,
+  getSingleFileConfig,
   getUserConfig,
   setConfig,
   upgradeAndValidate,
@@ -113,9 +116,11 @@ import type {
   EditorConfig,
   EditorId,
   EditorLanguages,
+  EditorLibrary,
   EditorOptions,
   Editors,
   EventsManager,
+  ExportedConfig,
   GithubScope,
   Language,
   Modal,
@@ -251,7 +256,7 @@ let resultPopup: Window | null = null;
 const sdkWatchers = {
   load: createPub<void>(),
   ready: createPub<void>(),
-  code: createPub<{ code: Code; config: Config }>(),
+  code: createPub<{ code: Code; config: SDKConfig }>(),
   tests: createPub<{ results: TestResult[]; error?: string }>(),
   console: createPub<{ method: string; args: any[] }>(),
   destroy: createPub<void>(),
@@ -433,7 +438,7 @@ const loadModuleTypes = async (
           '',
         );
     const libs = await typeLoader.load(reactImport + content, configTypes, loadAll, force);
-    libs.forEach((lib) => addTypes(lib, force));
+    libs.forEach((lib: EditorLibrary) => addTypes(lib, force));
   }
 };
 
@@ -1862,31 +1867,34 @@ const share = async (
   permanentUrl = false,
 ): Promise<ShareData> => {
   const config = getConfig();
-  const content = contentOnly
-    ? {
-        ...getContentConfig(config),
-        markup: {
-          ...config.markup,
-          title: undefined,
-          hidden: undefined,
-        },
-        style: {
-          ...config.style,
-          title: undefined,
-          hidden: undefined,
-        },
-        script: {
-          ...config.script,
-          title: undefined,
-          hidden: undefined,
-        },
-        tools: {
-          ...config.tools,
-          enabled: defaultConfig.tools.enabled,
-          status: config.tools.status === 'none' ? defaultConfig.tools.status : config.tools.status,
-        },
-      }
-    : config;
+  const content = getSDKConfig(
+    contentOnly
+      ? {
+          ...getContentConfig(config),
+          markup: {
+            ...config.markup,
+            title: undefined,
+            hidden: undefined,
+          },
+          style: {
+            ...config.style,
+            title: undefined,
+            hidden: undefined,
+          },
+          script: {
+            ...config.script,
+            title: undefined,
+            hidden: undefined,
+          },
+          tools: {
+            ...config.tools,
+            enabled: defaultConfig.tools.enabled,
+            status:
+              config.tools.status === 'none' ? defaultConfig.tools.status : config.tools.status,
+          },
+        }
+      : config,
+  );
 
   const currentUrl = (location.origin + location.pathname).split('/').slice(0, -1).join('/') + '/';
   const appUrl = permanentUrl ? permanentUrlService.getAppUrl() : currentUrl;
@@ -1942,7 +1950,7 @@ const updateConfig = () => {
 };
 
 const loadConfig = async (
-  newConfig: Partial<Config | ContentConfig>,
+  newConfig: Partial<Config | ContentConfig | SDKConfig>,
   url?: string,
   flush = true,
 ) => {
@@ -2163,7 +2171,7 @@ const loadTemplate = async (templateId: string) => {
 };
 
 const dispatchChangeEvent = debounce(async () => {
-  let changeEvent: CustomEvent<{ code: Code; config: Config } | void>;
+  let changeEvent: CustomEvent<{ code: Code; config: SDKConfig } | void>;
   if (sdkWatchers.code.hasSubscribers()) {
     if (!cacheIsValid(getCache(), getContentConfig(getConfig()))) {
       await getResultPage({ forExport: true });
@@ -2171,7 +2179,7 @@ const dispatchChangeEvent = debounce(async () => {
     changeEvent = new CustomEvent(customEvents.change, {
       detail: {
         code: getCachedCode(),
-        config: getConfig(),
+        config: getSDKConfig(getConfig()),
       },
     });
   } else {
@@ -2727,37 +2735,51 @@ const loadStarterTemplate = async (templateName: Template['name'], checkSaved =
   }
 };
 
-const getPlaygroundState = (): Config & Code => {
-  const config = getConfig();
+const getPlaygroundState = (): Omit<SDKConfig, 'files'> & Code => {
+  const config = getSDKConfig(getConfig());
   const cachedCode = getCachedCode();
-  return {
-    ...config,
-    ...cachedCode,
-    markup: {
-      ...config.markup,
-      ...cachedCode.markup,
-      position: editors.markup?.getPosition(),
-    },
-    style: {
-      ...config.style,
-      ...cachedCode.style,
-      position: editors.style?.getPosition(),
-    },
-    script: {
-      ...config.script,
-      ...cachedCode.script,
-      position: editors.script?.getPosition(),
-    },
-    files: cachedCode.files.map((file) => ({
-      ...file,
-      position: editors[file.filename]?.getPosition(),
-    })),
-    tools: {
-      enabled: config.tools.enabled,
-      active: toolsPane?.getActiveTool() ?? '',
-      status: toolsPane?.getStatus() ?? '',
-    },
+  const tools: Config['tools'] = {
+    enabled: config.tools.enabled,
+    active: toolsPane?.getActiveTool() ?? '',
+    status: toolsPane?.getStatus() ?? '',
   };
+
+  return 'files' in config && 'files' in cachedCode
+    ? {
+        ...getMultiFileConfig(config),
+        ...cachedCode,
+        files: cachedCode.files.map((file) => ({
+          ...file,
+          position: editors[file.filename]?.getPosition(),
+        })),
+        tools,
+      }
+    : 'markup' in config && 'markup' in cachedCode
+      ? {
+          ...getSingleFileConfig(config),
+          ...cachedCode,
+          markup: {
+            ...config.markup,
+            ...cachedCode.markup,
+            position: editors.markup?.getPosition(),
+          },
+          style: {
+            ...config.style,
+            ...cachedCode.style,
+            position: editors.style?.getPosition(),
+          },
+          script: {
+            ...config.script,
+            ...cachedCode.script,
+            position: editors.script?.getPosition(),
+          },
+          tools,
+        }
+      : ({
+          ...config,
+          ...cachedCode,
+          tools,
+        } as SDKConfig & Code);
 };
 
 const zoom = (level: Config['zoom'] = 1) => {
@@ -4045,11 +4067,14 @@ const handleExport = () => {
         await getResultPage({});
       }
       const cache = getCachedCode();
-      const compiled = {
-        markup: cache.markup.compiled,
-        style: cache.style.compiled,
-        script: cache.script.compiled,
-      };
+      const compiled =
+        'markup' in cache
+          ? {
+              markup: cache.markup.compiled,
+              style: cache.style.compiled,
+              script: cache.script.compiled,
+            }
+          : cache.files.reduce((acc, file) => ({ ...acc, [file.filename]: file.compiled }), {});
       await loadModule();
       exportModule.exportConfig(getConfig(), baseUrl, 'codepen', {
         baseUrl,
@@ -4072,11 +4097,14 @@ const handleExport = () => {
         await getResultPage({});
       }
       const cache = getCachedCode();
-      const compiled = {
-        markup: cache.markup.compiled,
-        style: cache.style.compiled,
-        script: cache.script.compiled,
-      };
+      const compiled =
+        'markup' in cache
+          ? {
+              markup: cache.markup.compiled,
+              style: cache.style.compiled,
+              script: cache.script.compiled,
+            }
+          : cache.files.reduce((acc, file) => ({ ...acc, [file.filename]: file.compiled }), {});
       await loadModule();
       exportModule.exportConfig(getConfig(), baseUrl, 'jsfiddle', {
         baseUrl,
@@ -4724,7 +4752,7 @@ const handleCodeToImage = () => {
 
     const currentUrl = (location.origin + location.pathname).split('/').slice(0, -1).join('/');
 
-    const getShareUrl = async (config: Partial<Config>, shortUrl = true) => {
+    const getShareUrl = async (config: Partial<SDKConfig>, shortUrl = true) => {
       if (shortUrl) {
         const param = '/?x=id/' + (await shareService.shareProject(config));
         return currentUrl + param;
@@ -5738,7 +5766,7 @@ const configureModes = ({
 
 const importExternalContent = async (options: {
   config?: Config;
-  sdkConfig?: Partial<Config>;
+  sdkConfig?: Partial<Config | SDKConfig>;
   configUrl?: string;
   template?: string;
   importUrl?: string;
@@ -5762,7 +5790,7 @@ const importExternalContent = async (options: {
   modal.show(loadingMessage(), { size: 'small' });
 
   let templateConfig: Partial<Config> = {};
-  let importUrlConfig: Partial<Config> = {};
+  let importUrlConfig: Partial<Config | SDKConfig> = {};
   let contentUrlConfig: Partial<Config> = {};
   let configUrlConfig: Partial<Config> = {};
 
@@ -5859,7 +5887,7 @@ const importExternalContent = async (options: {
       ...configUrlConfig,
       ...sdkConfig,
       ...contentUrlConfig,
-    }),
+    } as Partial<Config>),
     parent.location.href,
     false,
   );
@@ -5917,7 +5945,7 @@ const loadDefaults = async () => {
 
 const initializePlayground = async (
   options?: {
-    config?: Partial<Config>;
+    config?: Partial<SDKConfig>;
     baseUrl?: string;
     isEmbed?: boolean;
     isHeadless?: boolean;
@@ -5946,7 +5974,7 @@ const initializePlayground = async (
   window.history.replaceState(null, '', './'); // fix URL from "/app" to "/"
   await initializeStores(stores, isEmbed);
   const userConfig = stores.userConfig?.getValue() ?? {};
-  setConfig(buildConfig({ ...getConfig(), ...userConfig, ...initialConfig }));
+  setConfig(buildConfig({ ...getConfig(), ...userConfig, ...initialConfig } as Partial<Config>));
   configureModes({ config: getConfig(), isEmbed, isLite });
   compiler = (window as any).compiler = await getCompiler({
     config: getConfig(),
@@ -5997,25 +6025,35 @@ const initializePlayground = async (
 const createApi = (): API => {
   const apiGetShareUrl = async (shortUrl = false) => (await share(shortUrl, true, false)).url;
 
-  const apiGetConfig = async (contentOnly = false): Promise<Config> => {
+  const apiGetConfig = async (contentOnly = false): Promise<ExportedConfig> => {
     updateConfig();
     const config = contentOnly ? getContentConfig(getConfig()) : getConfig();
-    return JSON.parse(JSON.stringify(config));
+    return getSDKConfig(config);
   };
 
-  const apiSetConfig = async (newConfig: Partial<SDKConfig>): Promise<Config> => {
+  const apiSetConfig = async (newConfig: Partial<SDKConfig>): Promise<ExportedConfig> => {
     const currentConfig = getConfig();
-    const newAppConfig = buildConfig({ ...currentConfig, ...(newConfig as Partial<Config>) });
-
+    const newAppConfig = buildConfig({
+      ...currentConfig,
+      ...(newConfig as Partial<Config>),
+      // allow changing multifile project to singlefile
+      ...(currentConfig.files.length &&
+      !newConfig.files?.length &&
+      (newConfig.markup?.language || newConfig.style?.language || newConfig.script?.language)
+        ? { files: [] }
+        : {}),
+    });
     const hasNewAppLanguage =
       newConfig.appLanguage && newConfig.appLanguage !== i18n?.getLanguage();
     const shouldRun =
       newConfig.mode != null && newConfig.mode !== 'editor' && newConfig.mode !== 'codeblock';
     const shouldReloadCompiler = shouldRun && compiler.isFake;
-    const isContentOnlyChange = compareObjects(
-      newConfig,
-      currentConfig as Record<string, any>,
-    ).every((k) => ['markup.content', 'style.content', 'script.content'].includes(k));
+    const isContentOnlyChange =
+      !currentConfig.files.length &&
+      !newConfig.files?.length &&
+      compareObjects(newConfig, currentConfig as Record<string, any>).every((k) =>
+        ['markup.content', 'style.content', 'script.content'].includes(k),
+      );
 
     setConfig(newAppConfig);
 
@@ -6026,20 +6064,15 @@ const createApi = (): API => {
           editors[key].setValue(content);
         }
       }
-      return newAppConfig;
-    }
-
-    if (hasNewAppLanguage) {
+    } else if (hasNewAppLanguage) {
       changeAppLanguage(newAppConfig.appLanguage!);
-      return newAppConfig;
-    }
-
-    if (shouldReloadCompiler) {
+    } else if (shouldReloadCompiler) {
       await reloadCompiler(newAppConfig);
+    } else {
+      await applyConfig(newAppConfig as Partial<Config>, /* reload = */ true, currentConfig);
     }
 
-    await applyConfig(newAppConfig as Partial<Config>, /* reload = */ true, currentConfig);
-    return newAppConfig;
+    return getSDKConfig(newAppConfig);
   };
 
   const apiGetCode = async (): Promise<Code> => {
@@ -6047,7 +6080,7 @@ const createApi = (): API => {
     if (!cacheIsValid(getCache(), getContentConfig(getConfig()))) {
       await getResultPage({ forExport: true });
     }
-    return JSON.parse(JSON.stringify(getCachedCode()));
+    return cloneObject(getCachedCode());
   };
 
   const apiShow: API['show'] = async (
@@ -6185,7 +6218,7 @@ const createApi = (): API => {
   };
 };
 
-const initApp = async (config: Partial<Config>, baseUrl: string) => {
+const initApp = async (config: Partial<SDKConfig>, baseUrl: string) => {
   window.deps = {
     showMode,
     translateString: translateStringMock,
@@ -6200,7 +6233,7 @@ const initApp = async (config: Partial<Config>, baseUrl: string) => {
   return createApi();
 };
 
-const initEmbed = async (config: Partial<Config>, baseUrl: string) => {
+const initEmbed = async (config: Partial<SDKConfig>, baseUrl: string) => {
   window.deps = {
     showMode,
     translateString: translateStringMock,
@@ -6216,7 +6249,7 @@ const initEmbed = async (config: Partial<Config>, baseUrl: string) => {
   return createApi();
 };
 
-const initHeadless = async (config: Partial<Config>, baseUrl: string) => {
+const initHeadless = async (config: Partial<SDKConfig>, baseUrl: string) => {
   window.deps = {
     showMode: () => undefined,
     translateString: translateStringMock,
diff --git a/src/livecodes/export/utils.ts b/src/livecodes/export/utils.ts
index 531cb62490..32e516246e 100644
--- a/src/livecodes/export/utils.ts
+++ b/src/livecodes/export/utils.ts
@@ -139,7 +139,7 @@ export const getContent = ({
 }: {
   editorId: EditorId;
   config: Config;
-  compiled: { [key in EditorId]: string };
+  compiled: Partial<{ [key in EditorId]: string }>;
   supportedLanguages: { [key in EditorId]: Language[] };
   getLanguageCompiler: typeof getLanguageCompilerFn;
 }) => {
@@ -150,17 +150,17 @@ export const getContent = ({
   const content = {
     markup: ['html', ...supportedLanguages.markup].includes(config.markup.language)
       ? config.markup.content
-      : compiled.markup,
+      : compiled.markup || '',
     style: ['css', ...supportedLanguages.style].includes(config.style.language)
       ? config.style.content
-      : compiled.style,
+      : compiled.style || '',
     script:
       config.script.language === 'php'
         ? config.script.content?.replace(/<\?php/g, '') || ''
         : config.script.language === 'python'
           ? config.script.content
           : replaceImports(
-              (isScriptSupported ? config.script.content : compiled.script) || '',
+              (isScriptSupported ? config.script.content : compiled.script || '') || '',
               config,
             ),
     files: config.files.map((file) => ({
diff --git a/src/livecodes/import/code.ts b/src/livecodes/import/code.ts
index 1490e9311e..5ef18e89d4 100644
--- a/src/livecodes/import/code.ts
+++ b/src/livecodes/import/code.ts
@@ -1,11 +1,11 @@
-import type { Config } from '../models';
+import type { SDKConfig } from '../models';
 import { decompress } from '../utils/compression';
 import { isCompressedCode } from './check-src';
 
 export const importCompressedCode = (url: string) => {
   if (!isCompressedCode(url)) return {};
   const code = url.slice('code/'.length);
-  let config: Partial<Config>;
+  let config: Partial<SDKConfig>;
   try {
     config = JSON.parse(decompress(code) || '{}');
   } catch (error) {
diff --git a/src/livecodes/import/image.ts b/src/livecodes/import/image.ts
index 1e13b10abf..c795a98ca8 100644
--- a/src/livecodes/import/image.ts
+++ b/src/livecodes/import/image.ts
@@ -1,5 +1,5 @@
 import { detectLanguage, getLanguageByAlias, getLanguageEditorId } from '../languages';
-import type { ContentConfig } from '../models';
+import type { SDKConfig } from '../models';
 import { blobToBase64, loadScript } from '../utils/utils';
 import { metaPngUrl, tesseractUrl } from '../vendors';
 import { importCompressedCode } from './code';
@@ -86,7 +86,7 @@ const cleanUpCode = async (code: string) => {
   return code;
 };
 
-export const importFromImage = async (blob: Blob): Promise<Partial<ContentConfig>> => {
+export const importFromImage = async (blob: Blob): Promise<Partial<SDKConfig>> => {
   try {
     const metaPng: any = await loadScript(metaPngUrl, 'MetaPNG');
     const arrayBuffer = await blob.arrayBuffer();
diff --git a/src/livecodes/import/import.ts b/src/livecodes/import/import.ts
index 9bbbbdf352..5f0aebf627 100644
--- a/src/livecodes/import/import.ts
+++ b/src/livecodes/import/import.ts
@@ -1,4 +1,4 @@
-import type { Config, User } from '../models';
+import type { Config, SDKConfig, User } from '../models';
 import { getValidUrl } from '../utils/utils';
 import {
   isCodepen,
@@ -24,7 +24,7 @@ export const importCode = async (
   config: Config,
   user: User | null | void,
   baseUrl: string,
-): Promise<Partial<Config>> => {
+): Promise<Partial<Config | SDKConfig>> => {
   if (isCompressedCode(url)) {
     return importCompressedCode(url);
   }
diff --git a/src/livecodes/import/url.ts b/src/livecodes/import/url.ts
index 2ab25c3afb..909679e68d 100644
--- a/src/livecodes/import/url.ts
+++ b/src/livecodes/import/url.ts
@@ -58,7 +58,7 @@ export const importFromUrl = async (
     (url.startsWith('data:image/') && !url.startsWith('data:image/svg+xml'))
   ) {
     const image = await res.blob();
-    return importFromImage(image);
+    return importFromImage(image) as Promise<Partial<Config>>;
   }
 
   const fetchedContent = await res.text();
diff --git a/src/livecodes/services/share.ts b/src/livecodes/services/share.ts
index 8320f5fa1c..3be1f6c1d5 100644
--- a/src/livecodes/services/share.ts
+++ b/src/livecodes/services/share.ts
@@ -1,4 +1,4 @@
-import type { Config } from '../models';
+import type { SDKConfig } from '../models';
 import { allowedOrigin } from './allowed-origin';
 
 const dpasteGetUrl = 'https://dpaste.com/';
@@ -8,7 +8,7 @@ const selfHostedUrl = './api/share';
 
 // note: dpaste id length: 9, api id length: 11, self-hosted id length: 14
 
-type ConfigWithResult = Partial<Config & { result: string }>;
+type ConfigWithResult = Partial<SDKConfig & { result: string }>;
 interface ShareService {
   getProject: (id: string) => Promise<ConfigWithResult>;
   shareProject: (config: ConfigWithResult) => Promise<string>;
diff --git a/src/livecodes/types/type-loader.ts b/src/livecodes/types/type-loader.ts
index c6abfd63ee..6ae1969597 100644
--- a/src/livecodes/types/type-loader.ts
+++ b/src/livecodes/types/type-loader.ts
@@ -129,7 +129,7 @@ export const createTypeLoader = (baseUrl: string) => {
     loadAll = false,
     forceLoad = false,
     callback?: (type: EditorLibrary) => void,
-  ) => {
+  ): Promise<EditorLibrary[]> => {
     if (isRunning) {
       await new Promise((resolve) => setTimeout(resolve, 50));
       return load(code, configTypes, loadAll, forceLoad, callback);
diff --git a/src/sdk/__tests__/getPlaygroundUrl.test.ts b/src/sdk/__tests__/getPlaygroundUrl.test.ts
index fa41bd8c2d..959a47b607 100644
--- a/src/sdk/__tests__/getPlaygroundUrl.test.ts
+++ b/src/sdk/__tests__/getPlaygroundUrl.test.ts
@@ -1,6 +1,5 @@
 import { compressToEncodedURIComponent } from 'lz-string';
-import { getPlaygroundUrl } from '../index';
-import type { Config, EmbedOptions, UrlQueryParams } from '../models';
+import { getPlaygroundUrl, type Config, type EmbedOptions } from '../index';
 
 test('empty options object', () => {
   const url = new URL(getPlaygroundUrl());
@@ -16,7 +15,7 @@ test('passing some params, they should be stored in hash params', () => {
     param1: 1,
     param2: 2,
   };
-  const url = new URL(getPlaygroundUrl({ params: params as UrlQueryParams }));
+  const url = new URL(getPlaygroundUrl({ params: params as EmbedOptions['params'] }));
   const searchParams = url.searchParams;
   const receivedParams = searchParams.get('params');
   expect(receivedParams).toBeNull();
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 920e948ae7..fb69e2e759 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -58,10 +58,19 @@ export interface API {
    *
    * createPlayground("#container").then(async (playground) => {
    *   const config = await playground.getConfig();
+   *
+   *   // check if a multi-file project
+   *   if ("files" in config) {
+   *     config.files.forEach((file) => {
+   *       const { filename, content, language } = file;
+   *     })
+   *   } else { // single-file (3-editor) project
+   *     const { content, language } = config.script; // script editor
+   *   }
    * });
    * ```
    */
-  getConfig: (contentOnly?: boolean) => Promise<SDKConfig>;
+  getConfig: (contentOnly?: boolean) => Promise<ExportedConfig>;
 
   /**
    * Loads a new project using the passed configuration object.
@@ -81,7 +90,7 @@ export interface API {
    * });
    * ```
    */
-  setConfig: (config: Partial<SDKConfig>) => Promise<SDKConfig>;
+  setConfig: (config: Partial<SDKConfig>) => Promise<ExportedConfig>;
 
   /**
    * Gets the playground code (including source code, source language and compiled code) for each editor (markup, style, script), in addition to result page HTML.
@@ -94,8 +103,14 @@ export interface API {
    * createPlayground("#container").then(async (playground) => {
    *   const code = await playground.getCode();
    *
-   *   // source code, language and compiled code for the script editor
-   *   const { content, language, compiled } = code.script;
+   *   // check if a multi-file project
+   *   if ("files" in code) {
+   *     code.files.forEach((file) => {
+   *       const { filename, content, language, compiled } = file;
+   *     })
+   *   } else { // single-file (3-editor) project
+   *     const { content, language, compiled } = code.script; // script editor
+   *   }
    *
    *   // result page HTML
    *   const result = code.result;
@@ -139,7 +154,7 @@ export interface API {
    *
    * @deprecated Use [`watch`](https://livecodes.io/docs/sdk/js-ts#watch) method instead.
    */
-  onChange: (fn: (data: { code: Code; config: Config }) => void) => { remove: () => void };
+  onChange: (fn: (data: { code: Code; config: ExportedConfig }) => void) => { remove: () => void };
 
   /**
    * Allows to watch for various playground events.
@@ -229,7 +244,7 @@ export type WatchLoad = (event: 'load', fn: () => void) => { remove: () => void
  */
 export type WatchReady = (
   event: 'ready',
-  fn: (data: { config: Config }) => void,
+  fn: (data: { config: ExportedConfig }) => void,
 ) => { remove: () => void };
 
 /**
@@ -247,7 +262,7 @@ export type WatchReady = (
  */
 export type WatchCode = (
   event: 'code',
-  fn: (data: { code: Code; config: Config }) => void,
+  fn: (data: { code: Code; config: ExportedConfig }) => void,
 ) => { remove: () => void };
 
 export type WatchConsole = (
@@ -275,6 +290,8 @@ export type Prettify<T> = {
   [K in keyof T]: T[K] extends object ? Prettify<T[K]> : T[K];
 } & {};
 
+export type NonEmptyArray<T> = [T, ...T[]];
+
 export type WatchFn = UnionToIntersection<WatchFns>;
 
 export type APICommands = 'setBroadcastToken' | 'showVersion';
@@ -408,16 +425,55 @@ export interface Config extends ContentConfig, AppConfig, UserConfig {}
 export interface SingleFileConfig
   extends Omit<ContentConfig, 'files' | 'mainFile' | 'fileLanguages' | 'lockFiles'>,
     AppConfig,
-    UserConfig {}
+    UserConfig {
+  files: never;
+  mainFile: never;
+  fileLanguages: never;
+  lockFiles: never;
+}
 
 export interface MultiFileConfig
-  extends Omit<MultiFileContentConfig, 'files'>,
+  extends Omit<
+      ContentConfig,
+      | 'files'
+      | 'markup'
+      | 'style'
+      | 'script'
+      | 'stylesheets'
+      | 'scripts'
+      | 'cssPreset'
+      | 'htmlAttrs'
+      | 'head'
+    >,
     AppConfig,
     UserConfig {
-  files: Array<{ filename: string } & Partial<SourceFile>>;
+  files: NonEmptyArray<{ filename: string } & Partial<SourceFile>>;
+  markup: never;
+  style: never;
+  script: never;
+  stylesheets: never;
+  scripts: never;
+  cssPreset: never;
+  htmlAttrs: never;
+  head: never;
 }
 
 export type SDKConfig = Prettify<SingleFileConfig> | Prettify<MultiFileConfig>;
+export type ExportedConfig =
+  | Prettify<Omit<SingleFileConfig, 'files' | 'mainFile' | 'fileLanguages' | 'lockFiles'>>
+  | Prettify<
+      Omit<
+        MultiFileConfig,
+        | 'markup'
+        | 'style'
+        | 'script'
+        | 'stylesheets'
+        | 'scripts'
+        | 'cssPreset'
+        | 'htmlAttrs'
+        | 'head'
+      >
+    >;
 
 /**
  * The properties that define the content of the current [project](https://livecodes.io/docs/features/projects).
@@ -623,25 +679,6 @@ export interface ContentConfig {
   readonly version: string;
 }
 
-export type MultiFileContentConfig = Pick<
-  ContentConfig,
-  | 'title'
-  | 'description'
-  | 'tags'
-  | 'activeEditor'
-  | 'files'
-  | 'mainFile'
-  | 'fileLanguages'
-  | 'lockFiles'
-  | 'languages'
-  | 'processors'
-  | 'customSettings'
-  | 'imports'
-  | 'types'
-  | 'tests'
-  | 'version'
->;
-
 export type SourceFile = Prettify<
   {
     /**
@@ -2089,36 +2126,39 @@ export type Cache = Omit<ContentConfig, 'files'> & {
 };
 
 /**
- * An object that contains the language, content and compiled code for each of the 3 [code editors](https://livecodes.io/docs/features/projects)
+ * An object that contains the language, content and compiled code for each of the [code editors](https://livecodes.io/docs/features/projects)/files
  * and the [result page](https://livecodes.io/docs/features/result) HTML.
  *
  * See [docs](https://livecodes.io/docs/api/interfaces/Code) for details.
  */
-export interface Code {
-  markup: {
-    language: Language;
-    content: string;
-    compiled: string;
-  };
-  style: {
-    language: Language;
-    content: string;
-    compiled: string;
-  };
-  script: {
-    language: Language;
-    content: string;
-    compiled: string;
-  };
-  files: Array<{
-    filename: string;
-    language: Language;
-    content: string;
-    compiled: string;
-  }>;
-  mainFile: string;
-  result: string;
-}
+export type Code = { result: string } & (
+  | {
+      markup: {
+        language: Language;
+        content: string;
+        compiled: string;
+      };
+      style: {
+        language: Language;
+        content: string;
+        compiled: string;
+      };
+      script: {
+        language: Language;
+        content: string;
+        compiled: string;
+      };
+    }
+  | {
+      files: Array<{
+        filename: string;
+        language: Language;
+        content: string;
+        compiled: string;
+      }>;
+      mainFile: string;
+    }
+);
 
 export type Theme = 'light' | 'dark';
 

From 7205bc79c8a8165666ad6f5cb724603ac5141e97 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sat, 14 Feb 2026 13:35:14 +0200
Subject: [PATCH 120/143] update package-lock

---
 package-lock.json | 93 ++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 71 insertions(+), 22 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e6acc9994a..fa1fa03d96 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4351,18 +4351,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/@pkgr/core": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
-      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
-      "dev": true,
-      "engines": {
-        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/unts"
-      }
-    },
     "node_modules/@playwright/test": {
       "version": "1.32.3",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.3.tgz",
@@ -4497,6 +4485,19 @@
       "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
       "dev": true
     },
+    "node_modules/@sindresorhus/base62": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/base62/-/base62-1.0.0.tgz",
+      "integrity": "sha512-TeheYy0ILzBEI/CO55CP6zJCSdSWeRtGnHy8U8dWSUH4I68iqTsy7HkMktR4xakThc9jotkPQUXT4ITdbV7cHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@sindresorhus/merge-streams": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
@@ -10162,6 +10163,20 @@
         "node": ">=10"
       }
     },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -11519,10 +11534,10 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-shared-array-buffer": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
-      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -14761,6 +14776,13 @@
       "dev": true,
       "license": "CC0-1.0"
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -20217,6 +20239,12 @@
       "integrity": "sha512-hzSoAVtJF+3ZtiFX0VgfFPHEDRm7Y/QPjGyNo4TVdnDTdft3tr8hEkD25a1jC+TjTuE7tkHGKkhwCgs9dgBB2g==",
       "dev": true
     },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "license": "MIT"
+    },
     "node_modules/unicorn-magic": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.4.0.tgz",
@@ -23827,12 +23855,6 @@
       "dev": true,
       "optional": true
     },
-    "@pkgr/core": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
-      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
-      "dev": true
-    },
     "@playwright/test": {
       "version": "1.32.3",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.3.tgz",
@@ -23954,6 +23976,12 @@
       "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
       "dev": true
     },
+    "@sindresorhus/base62": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/base62/-/base62-1.0.0.tgz",
+      "integrity": "sha512-TeheYy0ILzBEI/CO55CP6zJCSdSWeRtGnHy8U8dWSUH4I68iqTsy7HkMktR4xakThc9jotkPQUXT4ITdbV7cHA==",
+      "dev": true
+    },
     "@sindresorhus/merge-streams": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-4.0.0.tgz",
@@ -28216,6 +28244,16 @@
         }
       }
     },
+    "get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "dev": true,
+      "requires": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      }
+    },
     "get-stream": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -29150,6 +29188,12 @@
         "hasown": "^2.0.2"
       }
     },
+    "is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true
+    },
     "is-shared-array-buffer": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
@@ -35535,6 +35579,11 @@
       "integrity": "sha512-hzSoAVtJF+3ZtiFX0VgfFPHEDRm7Y/QPjGyNo4TVdnDTdft3tr8hEkD25a1jC+TjTuE7tkHGKkhwCgs9dgBB2g==",
       "dev": true
     },
+    "undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="
+    },
     "unicorn-magic": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.4.0.tgz",

From d59e078222494b889f8c9223274a9a7f5992e410 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 15 Feb 2026 00:01:48 +0200
Subject: [PATCH 121/143] fix styles

---
 src/livecodes/styles/app.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
index 54119a829d..9ef6a451d0 100644
--- a/src/livecodes/styles/app.scss
+++ b/src/livecodes/styles/app.scss
@@ -343,7 +343,7 @@ html {
 
 @include meta.load-css('inc-icons-share');
 
-@import 'inc-multi-file';
+@include meta.load-css('inc-multi-file');
 
 a,
 a:visited {

From 0ad9f573d6f4f82922494b36fdd0367190784c5e Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 15 Feb 2026 22:13:38 +0200
Subject: [PATCH 122/143] mark import as asset using querystring (e.g. ?url ,
 ?raw)

---
 .../result/multi-file-result-page.ts          | 36 ++++++++++++-------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 9287b45d45..945d0964a3 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -142,17 +142,23 @@ export const createMultiFileResultPage = async ({
     mod.startsWith('data:image') ||
     /\.(svg|jpg|jpeg|png|gif|ico|webp|avif|apng|bmp|tiff)(\?|#|$)/i.test(mod);
 
+  const isAsset = (mod: string) =>
+    isImage(mod) || /\?(url|raw|worker|sharedworker|inline|no-inline)/i.test(mod);
+
   const fileUrls: Record<string, string> = {};
   const stylesheetImports: Record<string, string> = {};
-  const imageImports: Record<string, string> = {};
+  const assetImports: Record<string, string> = {};
   let codeImports: Record<string, string> = {};
   const relativeImports: Record<string, string> = {};
 
   // generate data urls for files
-  const getDataUrl = (file: SourceFile & { compiled: string }, saveToFileUrls = true) => {
+  const getDataUrl = (
+    file: SourceFile & { compiled: string },
+    { saveToFileUrls = true, raw = false }: { saveToFileUrls?: boolean; raw?: boolean } = {},
+  ) => {
     if (file.filename === mainFile) return;
-    const content = file.compiled;
-    if (content.startsWith('data:')) return content;
+    const content = raw ? file.content : file.compiled;
+    if (content.startsWith('data:') || raw) return content;
     const mimeType =
       mapLanguage(file.language) === 'json'
         ? 'application/json'
@@ -242,7 +248,7 @@ export const createMultiFileResultPage = async ({
         !resolvedImport ||
         resolvedImport in fileImports ||
         resolvedImport in stylesheetImports ||
-        resolvedImport in imageImports
+        resolvedImport in assetImports
       ) {
         return;
       }
@@ -255,14 +261,14 @@ export const createMultiFileResultPage = async ({
         return;
       }
 
-      const importedFile = findFile(resolvedImport);
+      const importedFile = findFile(resolvedImport.split('?')[0]);
       // handle importing external stylesheets or images
       if (!importedFile) {
         if (isCss(resolvedImport)) {
           stylesheetImports[resolvedImport] = resolvedImport;
         }
         if (isImage(resolvedImport)) {
-          imageImports[resolvedImport] = resolvedImport;
+          assetImports[resolvedImport] = resolvedImport;
         }
         return;
       }
@@ -286,10 +292,14 @@ export const createMultiFileResultPage = async ({
         if (!dataUrl) return;
         stylesheetImports[convertedImport] = dataUrl;
         relativeImports[resolvedImport] = convertedImport;
-      } else if (isImage(resolvedImport)) {
-        const dataUrl = fileUrls[importedFile.filename] || getDataUrl(importedFile);
+      } else if (isAsset(resolvedImport)) {
+        const dataUrl =
+          fileUrls[importedFile.filename] ||
+          getDataUrl(importedFile, {
+            raw: resolvedImport.includes('?raw') || resolvedImport.includes('&raw'),
+          });
         if (!dataUrl) return;
-        imageImports[convertedImport] = dataUrl;
+        assetImports[convertedImport] = dataUrl;
         relativeImports[resolvedImport] = convertedImport;
       } else {
         relativeImports[resolvedImport] = convertedImport;
@@ -331,7 +341,7 @@ export const createMultiFileResultPage = async ({
         }
         targetFile.compiled = targetFile.compiled.replace(
           new RegExp(`(['"\`\()])(\\.?\\/)?${file.filename}`, 'g'),
-          `$1${(dataUrl ??= getDataUrl(file, /* saveToFileUrls */ false))}`,
+          `$1${(dataUrl ??= getDataUrl(file, { saveToFileUrls: false }))}`,
         );
       };
       compiledFiles.forEach(replaceUrl);
@@ -380,8 +390,8 @@ export const createMultiFileResultPage = async ({
   });
 
   // imported images
-  Object.keys(imageImports).forEach((mod) => {
-    const content = `export default '${imageImports[mod]}'`;
+  Object.keys(assetImports).forEach((mod) => {
+    const content = `export default '${assetImports[mod]}'`;
     codeImports[mod] = toDataUrl(content);
   });
 

From dfb74fb0d16503ba08927871295b73049854991c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 15 Feb 2026 23:25:07 +0200
Subject: [PATCH 123/143] fix reloading editors hiding active editor

---
 src/livecodes/core.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
index 4f35cb466c..e1558364ac 100644
--- a/src/livecodes/core.ts
+++ b/src/livecodes/core.ts
@@ -832,6 +832,7 @@ const reloadEditors = async (config: Config) => {
   await toolsPane?.console?.reloadEditor(config);
   await toolsPane?.compiled?.reloadEditor(config);
   updateCompiledCode();
+  showEditor(config.activeEditor);
 };
 
 const updateEditors = async (editors: Editors, config: Config) => {

From b6ac5ff261fba98275dc7ff927ec88c99976272c Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 15 Feb 2026 23:50:22 +0200
Subject: [PATCH 124/143] feat(Compilers): add support for YAML

---
 README.md                                     |  2 +-
 docs/docs/languages/yaml.mdx                  |  3 ++
 .../editor/codemirror/editor-languages.ts     |  2 ++
 src/livecodes/languages/languages.ts          |  2 ++
 src/livecodes/languages/yaml/index.ts         |  1 +
 src/livecodes/languages/yaml/lang-yaml.ts     | 17 +++++++++
 .../result/multi-file-result-page.ts          | 35 ++++++++++---------
 src/livecodes/utils/utils.ts                  |  1 +
 src/livecodes/vendors.ts                      |  4 ++-
 src/sdk/models.ts                             |  2 ++
 vendor-licenses.md                            |  2 ++
 11 files changed, 53 insertions(+), 18 deletions(-)
 create mode 100644 docs/docs/languages/yaml.mdx
 create mode 100644 src/livecodes/languages/yaml/index.ts
 create mode 100644 src/livecodes/languages/yaml/lang-yaml.ts

diff --git a/README.md b/README.md
index 82bd9c5181..ebdf21c220 100644
--- a/README.md
+++ b/README.md
@@ -13,7 +13,7 @@ A [feature-rich](https://livecodes.io/docs/features/), open-source, **client-sid
 [![LiveCodes: npm version](https://img.shields.io/npm/v/livecodes)](https://www.npmjs.com/package/livecodes)
 [![LiveCodes: npm downloads](https://img.shields.io/npm/dm/livecodes)](https://www.npmjs.com/package/livecodes)
 [![LiveCodes: jsdelivr downloads](https://data.jsdelivr.com/v1/package/npm/livecodes/badge?style=rounded)](https://www.jsdelivr.com/package/npm/livecodes)
-[![LiveCodes: languages](https://img.shields.io/badge/languages-99-blue)](https://livecodes.io/docs/languages/)
+[![LiveCodes: languages](https://img.shields.io/badge/languages-100-blue)](https://livecodes.io/docs/languages/)
 [![LiveCodes: docs](https://img.shields.io/badge/Documentation-575757?logo=gitbook&logoColor=white)](https://livecodes.io/docs/)
 [![LiveCodes: llms.txt](https://img.shields.io/badge/llms.txt-575757?logo=googledocs&logoColor=white)](https://livecodes.io/docs/llms.txt)
 [![LiveCodes: llms-full.txt](https://img.shields.io/badge/llms--full.txt-575757?logo=googledocs&logoColor=white)](https://livecodes.io/docs/llms-full.txt)
diff --git a/docs/docs/languages/yaml.mdx b/docs/docs/languages/yaml.mdx
new file mode 100644
index 0000000000..85a014e9c7
--- /dev/null
+++ b/docs/docs/languages/yaml.mdx
@@ -0,0 +1,3 @@
+# YAML
+
+TODO ...
diff --git a/src/livecodes/editor/codemirror/editor-languages.ts b/src/livecodes/editor/codemirror/editor-languages.ts
index 9a3c6731f1..d744b8332e 100644
--- a/src/livecodes/editor/codemirror/editor-languages.ts
+++ b/src/livecodes/editor/codemirror/editor-languages.ts
@@ -51,6 +51,7 @@ const moduleUrls = {
   stylus: getPath('codemirror-lang-stylus.js'),
   rust: getPath('codemirror-lang-rust.js'),
   swift: getPath('codemirror-lang-swift.js'),
+  yaml: getPath('codemirror-lang-yaml.js'),
 };
 
 export const editorLanguages: Partial<{ [key in Language]: () => Promise<LanguageSupport> }> = {
@@ -76,6 +77,7 @@ export const editorLanguages: Partial<{ [key in Language]: () => Promise<Languag
   sass: async () => (await import(moduleUrls.scss)).sass({ indented: true }),
   minizinc: async () => (await import(moduleUrls.minizinc)).MiniZinc(),
   prolog: async () => (await import(moduleUrls.prolog)).prolog(),
+  yaml: async () => (await import(moduleUrls.yaml)).yaml(),
   coffeescript: async () => legacy((await import(moduleUrls.coffeescript)).coffeeScript),
   livescript: async () => legacy((await import(moduleUrls.livescript)).liveScript),
   ruby: async () => legacy((await import(moduleUrls.ruby)).ruby),
diff --git a/src/livecodes/languages/languages.ts b/src/livecodes/languages/languages.ts
index 149310acc9..1bd01c36db 100644
--- a/src/livecodes/languages/languages.ts
+++ b/src/livecodes/languages/languages.ts
@@ -83,6 +83,7 @@ import { vento } from './vento';
 import { vue, vueApp } from './vue';
 import { vue2 } from './vue2';
 import { wat } from './wat';
+import { yaml } from './yaml';
 export const languages: LanguageSpecs[] = [
   html,
   markdown,
@@ -174,5 +175,6 @@ export const languages: LanguageSpecs[] = [
   blockly,
   text,
   json,
+  yaml,
   binary,
 ];
diff --git a/src/livecodes/languages/yaml/index.ts b/src/livecodes/languages/yaml/index.ts
new file mode 100644
index 0000000000..1d552cfa25
--- /dev/null
+++ b/src/livecodes/languages/yaml/index.ts
@@ -0,0 +1 @@
+export { yaml } from './lang-yaml';
diff --git a/src/livecodes/languages/yaml/lang-yaml.ts b/src/livecodes/languages/yaml/lang-yaml.ts
new file mode 100644
index 0000000000..4943829d77
--- /dev/null
+++ b/src/livecodes/languages/yaml/lang-yaml.ts
@@ -0,0 +1,17 @@
+import type { LanguageSpecs } from '../../models';
+import { jsYamlUrl } from '../../vendors';
+
+export const yaml: LanguageSpecs = {
+  name: 'yaml',
+  title: 'YAML',
+  info: false,
+  compiler: {
+    url: jsYamlUrl,
+    factory: () => async (code) =>
+      JSON.stringify((self as any).jsyaml.load(code, { json: true }), null, 2),
+    compiledCodeLanguage: 'json',
+  },
+  extensions: ['yaml', 'yml'],
+  editor: '',
+  multiFileSupport: true,
+};
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 945d0964a3..edcf0e914c 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -159,18 +159,17 @@ export const createMultiFileResultPage = async ({
     if (file.filename === mainFile) return;
     const content = raw ? file.content : file.compiled;
     if (content.startsWith('data:') || raw) return content;
-    const mimeType =
-      mapLanguage(file.language) === 'json'
-        ? 'application/json'
-        : file.filename.endsWith('.svg')
-          ? 'image/svg+xml'
-          : getLanguageEditorId(file.language) === 'markup'
-            ? 'text/html'
-            : getLanguageEditorId(file.language) === 'style'
-              ? 'text/css'
-              : getLanguageEditorId(file.language) === 'script'
-                ? 'text/javascript'
-                : 'text/plain';
+    const mimeType = ['json', 'yaml'].includes(mapLanguage(file.language))
+      ? 'application/json'
+      : file.filename.endsWith('.svg')
+        ? 'image/svg+xml'
+        : getLanguageEditorId(file.language) === 'markup'
+          ? 'text/html'
+          : getLanguageEditorId(file.language) === 'style'
+            ? 'text/css'
+            : getLanguageEditorId(file.language) === 'script'
+              ? 'text/javascript'
+              : 'text/plain';
     const dataUrl = toDataUrl(content, mimeType);
     if (saveToFileUrls) {
       fileUrls[file.filename] = dataUrl;
@@ -317,7 +316,11 @@ export const createMultiFileResultPage = async ({
     // replace relative URL access (e.g. img.src="./logo.svg") or fetching files (e.g. fetch("./data.json"))
     // note that the URLs should be relative to the main file (e.g. index.html)
     // do that only for static files (binary, json, text, html), other files are handled later
-    if (['binary', 'json', 'text', 'html'].includes(getFileLanguage(file.filename, config) || '')) {
+    if (
+      ['binary', 'json', 'yaml', 'text', 'html'].includes(
+        getFileLanguage(file.filename, config) || '',
+      )
+    ) {
       let dataUrl: string | undefined; // cache data url
       const replaceUrl = (targetFile: (typeof compiledFiles)[number]) => {
         if (targetFile.filename === file.filename) return;
@@ -366,7 +369,7 @@ export const createMultiFileResultPage = async ({
       if (!file) return;
       const dataUrl =
         fileUrls[file.filename] ||
-        (mapLanguage(file.language) === 'json'
+        (['json', 'yaml'].includes(mapLanguage(file.language))
           ? toDataUrl(`export default ${file.compiled};`)
           : mapLanguage(file.language) === 'text'
             ? toDataUrl(`export default \`${escapeCode(file.compiled)}\`;`)
@@ -389,9 +392,9 @@ export const createMultiFileResultPage = async ({
     }
   });
 
-  // imported images
+  // imported assets
   Object.keys(assetImports).forEach((mod) => {
-    const content = `export default '${assetImports[mod]}'`;
+    const content = `export default \`${escapeCode(assetImports[mod])}\`;`;
     codeImports[mod] = toDataUrl(content);
   });
 
diff --git a/src/livecodes/utils/utils.ts b/src/livecodes/utils/utils.ts
index 353a64882a..3bfe805991 100644
--- a/src/livecodes/utils/utils.ts
+++ b/src/livecodes/utils/utils.ts
@@ -34,6 +34,7 @@ export const escapeCode = /* @__PURE__ */ (code: string, slash = true) =>
   code
     .replace(/\\/g, slash ? '\\\\' : '\\')
     .replace(/`/g, '\\`')
+    .replace(/\$/g, '\\$')
     .replace(/<\/script>/g, '<\\/script>');
 
 export const pipe = /* @__PURE__ */ (...fns: Function[]) =>
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index a1cd3f245b..29df418e90 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -90,7 +90,7 @@ export const codeiumProviderUrl = /* @__PURE__ */ getUrl(
   '@live-codes/monaco-codeium-provider@0.2.2/dist/index.js',
 );
 
-export const codeMirrorBaseUrl = /* @__PURE__ */ getUrl('@live-codes/codemirror@0.3.4/build/');
+export const codeMirrorBaseUrl = /* @__PURE__ */ getUrl('@live-codes/codemirror@0.3.5/build/');
 
 export const coffeeScriptUrl = /* @__PURE__ */ getUrl(
   'coffeescript@2.7.0/lib/coffeescript-browser-compiler-legacy/coffeescript.js',
@@ -272,6 +272,8 @@ export const jsclUrl = /* @__PURE__ */ getUrl(
 
 export const json5Url = /* @__PURE__ */ getUrl('json5@2.2.3/dist/index.min.js');
 
+export const jsYamlUrl = /* @__PURE__ */ getUrl('js-yaml@4.1.1/dist/js-yaml.min.js');
+
 export const jsZipUrl = /* @__PURE__ */ getUrl('jszip@3.10.1/dist/jszip.js');
 
 export const juliaWasmBaseUrl = /* @__PURE__ */ getUrl('@chriskoch/julia-wasm@1.0.4');
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index fb69e2e759..ef89fb2cc3 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1209,6 +1209,8 @@ export type Language =
   | 'csv'
   | 'tsv'
   | 'plaintext'
+  | 'yaml'
+  | 'yml'
   | 'binary'
   | 'png'
   | 'jpg'
diff --git a/vendor-licenses.md b/vendor-licenses.md
index b663f615b0..6aa5611f7d 100644
--- a/vendor-licenses.md
+++ b/vendor-licenses.md
@@ -118,6 +118,8 @@ JSCPP: [MIT License](https://github.com/felixhao28/JSCPP/blob/befbd6b48666007151
 
 JSON5: [MIT License](https://github.com/json5/json5/blob/b935d4a280eafa8835e6182551b63809e61243b0/LICENSE.md)
 
+js-yaml: [MIT License](https://github.com/nodeca/js-yaml/blob/74a01992953302040be3277c08ba214a06f00b87/LICENSE)
+
 JSZip: [MIT License](https://github.com/Stuk/jszip/blob/3db5fdc85586ef6c26d15b503c45ce8e42905d77/LICENSE.markdown)
 
 konnors-ninja-keys: [MIT License](https://github.com/KonnorRogers/konnors-ninja-keys/blob/6dde465ab2c64329c4284a1f95d9d7501acdb86a/LICENSE)

From d3b2c0842205cbe09c25b6d24e7f805545a1435e Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Mon, 16 Feb 2026 12:04:37 +0200
Subject: [PATCH 125/143] feat(Compilers): add .env file support

---
 .../editor/monaco/monaco-languages.ts         | 37 +++++++++++++++++++
 src/livecodes/editor/monaco/monaco.ts         | 27 ++------------
 src/livecodes/languages/dotenv/index.ts       |  1 +
 src/livecodes/languages/dotenv/lang-dotenv.ts | 24 ++++++++++++
 src/livecodes/languages/languages.ts          |  2 +
 src/livecodes/vendors.ts                      |  2 +-
 src/sdk/models.ts                             |  9 ++++-
 vendor-licenses.md                            |  4 ++
 8 files changed, 81 insertions(+), 25 deletions(-)
 create mode 100644 src/livecodes/editor/monaco/monaco-languages.ts
 create mode 100644 src/livecodes/languages/dotenv/index.ts
 create mode 100644 src/livecodes/languages/dotenv/lang-dotenv.ts

diff --git a/src/livecodes/editor/monaco/monaco-languages.ts b/src/livecodes/editor/monaco/monaco-languages.ts
new file mode 100644
index 0000000000..bed82b6392
--- /dev/null
+++ b/src/livecodes/editor/monaco/monaco-languages.ts
@@ -0,0 +1,37 @@
+import type * as Monaco from 'monaco-editor';
+
+import type { Language } from '../../models';
+import { monacoLanguagesBaseUrl } from '../../vendors';
+
+export interface CustomLanguageDefinition {
+  config?: Monaco.languages.LanguageConfiguration;
+  tokens?: Monaco.languages.IMonarchLanguage;
+  completions?: Monaco.languages.CompletionItemProvider;
+  definitions?: Monaco.languages.DefinitionProvider;
+  init?: (monaco: typeof Monaco) => void;
+}
+
+export const customLanguages: Partial<Record<Language, string | CustomLanguageDefinition>> = {
+  astro: monacoLanguagesBaseUrl + 'astro.js',
+  clio: monacoLanguagesBaseUrl + 'clio.js',
+  imba: monacoLanguagesBaseUrl + 'imba.js',
+  json5: monacoLanguagesBaseUrl + 'json5.js',
+  minizinc: monacoLanguagesBaseUrl + 'minizinc.js',
+  prolog: monacoLanguagesBaseUrl + 'prolog.js',
+  // sql: monacoLanguagesBaseUrl + 'sql.js', // TODO: add autocomplete
+  vue: monacoLanguagesBaseUrl + 'vue.js',
+  wat: monacoLanguagesBaseUrl + 'wat.js',
+
+  dotenv: {
+    config: { comments: { lineComment: '#' } },
+    tokens: {
+      tokenizer: {
+        root: [
+          [/#.*$/, 'comment'],
+          [/([a-zA-Z_][a-zA-Z0-9_]*)(=)([^#]*)(#.*)$/, ['key', 'delimiter', 'value', 'comment']],
+          [/([a-zA-Z_][a-zA-Z0-9_]*)(=)(.*)$/, ['key', 'delimiter', 'value']],
+        ],
+      },
+    },
+  },
+};
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index e878a176fd..96baf6fd6b 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -24,13 +24,13 @@ import {
   emmetMonacoUrl,
   monacoBaseUrl,
   monacoEmacsUrl,
-  monacoLanguagesBaseUrl,
   monacoVimUrl,
   typescriptVersion,
   vendorsBaseUrl,
 } from '../../vendors';
 import { getEditorTheme } from '../themes';
 import { getCompilerOptions, hasJsx } from '../ts-compiler-options';
+import { type CustomLanguageDefinition, customLanguages } from './monaco-languages';
 import { customThemes, monacoThemes } from './monaco-themes';
 import { registerTwoSlash } from './register-twoslash';
 
@@ -38,7 +38,7 @@ type Options = Monaco.editor.IStandaloneEditorConstructionOptions;
 
 let monacoGloballyLoaded = false;
 const disposeEmmet: { html?: any; css?: any; jsx?: any; disabled?: boolean } = {};
-let monaco: typeof Monaco;
+export let monaco: typeof Monaco;
 const loadedThemes = new Set<string>();
 // let codeiumProvider: { dispose: () => void } | undefined;
 let editors: Monaco.editor.IStandaloneCodeEditor[] = [];
@@ -249,32 +249,13 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     listeners.forEach((fn) => editor.getModel()?.onDidChangeContent(fn));
   };
 
-  const customLanguages: Partial<Record<Language, string>> = {
-    astro: monacoLanguagesBaseUrl + 'astro.js',
-    clio: monacoLanguagesBaseUrl + 'clio.js',
-    imba: monacoLanguagesBaseUrl + 'imba.js',
-    json5: monacoLanguagesBaseUrl + 'json5.js',
-    minizinc: monacoLanguagesBaseUrl + 'minizinc.js',
-    prolog: monacoLanguagesBaseUrl + 'prolog.js',
-    // sql: monacoLanguagesBaseUrl + 'sql.js', // TODO: add autocomplete
-    vue: monacoLanguagesBaseUrl + 'vue.js',
-    wat: monacoLanguagesBaseUrl + 'wat.js',
-  };
-
-  interface CustomLanguageDefinition {
-    config?: Monaco.languages.LanguageConfiguration;
-    tokens?: Monaco.languages.IMonarchLanguage;
-    completions?: Monaco.languages.CompletionItemProvider;
-    definitions?: Monaco.languages.DefinitionProvider;
-    init?: (monaco: typeof Monaco) => void;
-  }
-
   const loadMonacoLanguage = async (lang: Language) => {
     lang = monacoMapLanguage(lang);
     const langUrl = customLanguages[lang];
     if (langUrl && !monaco.languages.getLanguages().find((l) => l.id === lang)) {
       monaco.languages.register({ id: lang });
-      const mod: CustomLanguageDefinition = (await import(langUrl)).default;
+      const mod: CustomLanguageDefinition =
+        typeof langUrl === 'string' ? (await import(langUrl)).default : langUrl;
       if (mod.config) {
         monaco.languages.setLanguageConfiguration(lang, mod.config);
       }
diff --git a/src/livecodes/languages/dotenv/index.ts b/src/livecodes/languages/dotenv/index.ts
new file mode 100644
index 0000000000..5c5962ff7d
--- /dev/null
+++ b/src/livecodes/languages/dotenv/index.ts
@@ -0,0 +1 @@
+export { dotenv } from './lang-dotenv';
diff --git a/src/livecodes/languages/dotenv/lang-dotenv.ts b/src/livecodes/languages/dotenv/lang-dotenv.ts
new file mode 100644
index 0000000000..0d13f134b5
--- /dev/null
+++ b/src/livecodes/languages/dotenv/lang-dotenv.ts
@@ -0,0 +1,24 @@
+import type { LanguageSpecs } from '../../models';
+import { vendorsBaseUrl } from '../../vendors';
+
+export const dotenv: LanguageSpecs = {
+  name: 'dotenv',
+  title: '.env',
+  info: false,
+  compiler: {
+    url: vendorsBaseUrl + 'dotenv/dotenv.js',
+    factory: () => async (code) =>
+      JSON.stringify((self as any).dotenv.parseAndExpand(code), null, 2),
+    compiledCodeLanguage: 'json',
+  },
+  extensions: [
+    'env',
+    'env.local',
+    'env.development',
+    'env.production',
+    'env.development.local',
+    'env.production.local',
+  ],
+  editor: '',
+  multiFileSupport: true,
+};
diff --git a/src/livecodes/languages/languages.ts b/src/livecodes/languages/languages.ts
index 1bd01c36db..a1ad902351 100644
--- a/src/livecodes/languages/languages.ts
+++ b/src/livecodes/languages/languages.ts
@@ -18,6 +18,7 @@ import { csharpWasm } from './csharp-wasm';
 import { css } from './css';
 import { diagrams } from './diagrams';
 import { dot } from './dot';
+import { dotenv } from './dotenv/lang-dotenv';
 import { ejs } from './ejs';
 import { eta } from './eta';
 import { fennel } from './fennel';
@@ -177,4 +178,5 @@ export const languages: LanguageSpecs[] = [
   json,
   yaml,
   binary,
+  dotenv,
 ];
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 29df418e90..84be1e87cc 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -3,7 +3,7 @@ import { modulesService } from './services/modules';
 const { getUrl, getModuleUrl } = modulesService;
 
 export const vendorsBaseUrl = // 'http://127.0.0.1:8081/';
-  /* @__PURE__ */ getUrl('@live-codes/browser-compilers@0.22.6/dist/');
+  /* @__PURE__ */ getUrl('@live-codes/browser-compilers@0.22.7/dist/');
 
 export const acornUrl = /* @__PURE__ */ getUrl('acorn@8.12.1/dist/acorn.js');
 
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index ef89fb2cc3..488a99d0d4 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1236,7 +1236,14 @@ export type Language =
   | 'wav'
   | 'oga'
   | 'mid'
-  | 'midi';
+  | 'midi'
+  | 'dotenv'
+  | 'env'
+  | 'env.local'
+  | 'env.development'
+  | 'env.production'
+  | 'env.development.local'
+  | 'env.production.local';
 
 export interface Editor {
   /**
diff --git a/vendor-licenses.md b/vendor-licenses.md
index 6aa5611f7d..b7d2b948d3 100644
--- a/vendor-licenses.md
+++ b/vendor-licenses.md
@@ -62,6 +62,10 @@ dart-sass: [MIT License](https://github.com/sass/dart-sass/blob/e3bf3eb3a3a87088
 
 DoppioJVM: [MIT License](https://github.com/plasma-umass/doppio/blob/9a8bcf705c74f91301a542abfe8b7175ca757259/LICENSE)
 
+dotenv: [BSD 2-Clause License](https://github.com/motdotla/dotenv/blob/9d93f227bd04e1c364da31128a3606f98b321e61/LICENSE)
+
+dotenv-expand: [BSD 2-Clause License](https://github.com/motdotla/dotenv-expand/blob/eac922076a34dbde5c478d05725b0e366bf1751b/LICENSE)
+
 dts-bundle: [MIT License](https://github.com/TypeStrong/dts-bundle/blob/2ca1591e890dc4276efc4bb0893367e6ff32a039/LICENSE-MIT)
 
 EasyQRCodeJS: [MIT License](https://github.com/ushelp/EasyQRCodeJS/blob/573373b110d706132a41cc8abb5b297016b80094/LICENSE)

From 36556b8bb95972aaa8666168474a5627373c7ff6 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Mon, 16 Feb 2026 21:24:54 +0200
Subject: [PATCH 126/143] use env vars in multifile projects

---
 src/livecodes/languages/dotenv/lang-dotenv.ts | 12 ++++-
 src/livecodes/languages/utils.ts              |  3 +-
 src/livecodes/languages/yaml/lang-yaml.ts     |  9 +++-
 .../result/multi-file-result-page.ts          | 19 ++++++++
 src/livecodes/result/utils.ts                 | 48 +++++++++++++++++++
 5 files changed, 86 insertions(+), 5 deletions(-)

diff --git a/src/livecodes/languages/dotenv/lang-dotenv.ts b/src/livecodes/languages/dotenv/lang-dotenv.ts
index 0d13f134b5..24bb1362cf 100644
--- a/src/livecodes/languages/dotenv/lang-dotenv.ts
+++ b/src/livecodes/languages/dotenv/lang-dotenv.ts
@@ -7,8 +7,16 @@ export const dotenv: LanguageSpecs = {
   info: false,
   compiler: {
     url: vendorsBaseUrl + 'dotenv/dotenv.js',
-    factory: () => async (code) =>
-      JSON.stringify((self as any).dotenv.parseAndExpand(code), null, 2),
+    factory: () => async (code) => {
+      const processEnv = {};
+      try {
+        const parsed = (self as any).dotenv.parse(code);
+        (self as any).dotenv.expand({ parsed, processEnv });
+      } catch {
+        //
+      }
+      return JSON.stringify(processEnv, null, 2);
+    },
     compiledCodeLanguage: 'json',
   },
   extensions: [
diff --git a/src/livecodes/languages/utils.ts b/src/livecodes/languages/utils.ts
index bc97a4b515..5e2fefbd38 100644
--- a/src/livecodes/languages/utils.ts
+++ b/src/livecodes/languages/utils.ts
@@ -20,10 +20,11 @@ export const getFileExtension = /* @__PURE__ */ (filename: string) => {
   if (parts.length === 2) return extension; // e.g. App.tsx => 'tsx'
   const lang = parts[parts.length - 2];
   if (getLanguageByAlias(`${lang}.${extension}`)) return `${lang}.${extension}`; // e.g. App.react.tsx => 'react.tsx'
-  return extension;
+  return parts.slice(1).join('.'); // e.g. .env.development.local
 };
 
 export const getFileLanguage = (filename: string, config: Partial<Config>) => {
+  if (filename.startsWith('.env')) return 'dotenv';
   const extension = getFileExtension(filename);
   const fileLanguages: Config['fileLanguages'] = {
     ...config.fileLanguages,
diff --git a/src/livecodes/languages/yaml/lang-yaml.ts b/src/livecodes/languages/yaml/lang-yaml.ts
index 4943829d77..45c6a8af0b 100644
--- a/src/livecodes/languages/yaml/lang-yaml.ts
+++ b/src/livecodes/languages/yaml/lang-yaml.ts
@@ -7,8 +7,13 @@ export const yaml: LanguageSpecs = {
   info: false,
   compiler: {
     url: jsYamlUrl,
-    factory: () => async (code) =>
-      JSON.stringify((self as any).jsyaml.load(code, { json: true }), null, 2),
+    factory: () => async (code) => {
+      try {
+        return JSON.stringify((self as any).jsyaml.load(code, { json: true }), null, 2);
+      } catch {
+        return '{}';
+      }
+    },
     compiledCodeLanguage: 'json',
   },
   extensions: ['yaml', 'yml'],
diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index edcf0e914c..604bda379d 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -26,10 +26,12 @@ import {
   getRandomString,
   isRelativeUrl,
   objectMap,
+  removeCommentsAndStrings,
   toCamelCase,
   toDataUrl,
 } from '../utils/utils';
 import { browserJestUrl, esModuleShimsPath, spacingJsUrl } from '../vendors';
+import { getEnvVars, replaceEnvVars } from './utils';
 
 let lastInput = '';
 let lastOutput = '';
@@ -93,12 +95,29 @@ export const createMultiFileResultPage = async ({
     .map((f) => ({ ...f, filename: f.filename.replace('public/', '') }));
   compiledFiles.push(...publicFiles);
 
+  const envVars = getEnvVars(compiledFiles, forExport);
+  compiledFiles.forEach((f) => {
+    const fileType = getLanguageEditorId(f.language);
+    if (fileType === 'markup') {
+      f.compiled = replaceEnvVars(f.compiled, envVars);
+    } else if (fileType === 'script') {
+      if (removeCommentsAndStrings(f.compiled).match(/\bimport\b/g)) {
+        f.compiled = `import.meta.env=${JSON.stringify(envVars)};${f.compiled}`;
+      }
+    }
+  });
+
   const mainFile = getMainFile(config);
   const mainFileHTML = compiledFiles.find((f) => f.filename === mainFile)?.compiled || '';
 
   const domParser = new DOMParser();
   const dom = domParser.parseFromString(mainFileHTML, 'text/html');
 
+  // env vars
+  const envVarsScript = dom.createElement('script');
+  envVarsScript.innerHTML = `window.process = window.process || {}; window.process.env = ${JSON.stringify(envVars)};`;
+  dom.head.appendChild(envVarsScript);
+
   // if export => clean, else => add utils
   if (forExport) {
     const utilsScript = dom.createElement('script');
diff --git a/src/livecodes/result/utils.ts b/src/livecodes/result/utils.ts
index 0c3e6e3384..45a514a12c 100644
--- a/src/livecodes/result/utils.ts
+++ b/src/livecodes/result/utils.ts
@@ -201,3 +201,51 @@ export const handleScrollPosition = () => {
     });
   }
 };
+
+export const getEnvVars = (
+  compiledFiles: Array<{ filename: string; compiled: string }>,
+  forExport: boolean,
+) => {
+  const getFileVars = (filename: string) => {
+    try {
+      return JSON.parse(compiledFiles.find((f) => f.filename === filename)?.compiled || '{}');
+    } catch {
+      return {};
+    }
+  };
+  const baseEnvVars = getFileVars('.env');
+  const envMode = baseEnvVars.MODE ?? (forExport ? 'production' : 'development');
+  const fileVars: Record<string, string> = compiledFiles
+    .filter((f) => {
+      if (!f.filename.startsWith('.env')) return false;
+      if (f.filename === '.env' || f.filename === '.env.local') return true;
+      const [_, _env, mode, _local] = f.filename.split('.');
+      return mode === envMode;
+    })
+    .toSorted((a, b) => {
+      if (a.filename === '.env') return -1;
+      if (b.filename === '.env') return 1;
+      if (a.filename === '.env.local') return -1;
+      if (b.filename === '.env.local') return 1;
+      if (a.filename.endsWith('.local')) return 1;
+      if (b.filename.endsWith('.local')) return -1;
+      return a.filename.localeCompare(b.filename);
+    })
+    .reduce((acc, f) => ({ ...acc, ...getFileVars(f.filename) }), {});
+  return {
+    NODE_ENV: fileVars.NODE_ENV ?? (forExport ? 'production' : 'development'),
+    MODE: envMode,
+    BASE_URL: '/',
+    PROD: envMode === 'production',
+    DEV: envMode === 'development',
+    SSR: false,
+    ...fileVars,
+  };
+};
+
+export const replaceEnvVars = (code: string, envVars: Record<string, any>) => {
+  Object.entries(envVars).forEach(([key, value]) => {
+    code = code.replaceAll('%' + key + '%', String(value));
+  });
+  return code;
+};

From 19f36a4cdd5af15ce2a7f581f542557ec159c9ed Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 17 Feb 2026 00:44:25 +0200
Subject: [PATCH 127/143] detect framework during import

---
 src/livecodes/import/github-dir.ts |  1 +
 src/livecodes/import/utils.ts      | 21 +++++++++++++++++++++
 src/livecodes/languages/utils.ts   | 14 ++++++++------
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/livecodes/import/github-dir.ts b/src/livecodes/import/github-dir.ts
index eaf3fe1652..e59caaaaac 100644
--- a/src/livecodes/import/github-dir.ts
+++ b/src/livecodes/import/github-dir.ts
@@ -67,6 +67,7 @@ export const importFromGithubDir = async (
         .map((file) => ({
           ...file,
           filename: file.path.split('/')[file.path.split('/').length - 1],
+          size: file.size,
           content: '',
         })),
     ).filter((_file, index: number) => index < maxFiles);
diff --git a/src/livecodes/import/utils.ts b/src/livecodes/import/utils.ts
index 140c6d77eb..0a9295db61 100644
--- a/src/livecodes/import/utils.ts
+++ b/src/livecodes/import/utils.ts
@@ -28,10 +28,31 @@ const prepareFiles = (
     ...(title ? { title } : {}),
     mainFile,
     activeEditor: String(params.activeEditor || params.active || mainFile),
+    ...detectFramework(config.files),
     ...config,
   };
 };
 
+const detectFramework = (files: SourceFile[]): Partial<Config> => {
+  const viteConfig = files.find((f) => f.filename.startsWith('vite.config.'));
+  if (viteConfig) {
+    if (viteConfig.content.includes('vite-plugin-solid')) {
+      return { customSettings: { fileLanguages: { jsx: 'solid', tsx: 'solid.tsx' } } };
+    }
+    if (viteConfig.content.includes('@preact/preset-vite')) {
+      files.forEach((file) => {
+        if (
+          (file.filename.endsWith('.jsx') || file.filename.endsWith('.tsx')) &&
+          !file.content.match(/\/\*\*\s*@jsx/g)
+        ) {
+          file.content = '/** @jsxImportSource preact */\n' + file.content;
+        }
+      });
+    }
+  }
+  return {};
+};
+
 export const populateConfig = (
   files: SourceFile[],
   params: { [key: string]: string },
diff --git a/src/livecodes/languages/utils.ts b/src/livecodes/languages/utils.ts
index 5e2fefbd38..e5b57ce31d 100644
--- a/src/livecodes/languages/utils.ts
+++ b/src/livecodes/languages/utils.ts
@@ -5,12 +5,14 @@ import { highlightjsUrl } from '../vendors';
 export const getLanguageByAlias = (alias: string = ''): Language | undefined => {
   if (!alias) return;
   const aliasLowerCase = alias?.toLowerCase();
-  return window.deps.languages.find(
-    (language) =>
-      language.name === aliasLowerCase ||
-      language.title.toLowerCase() === aliasLowerCase ||
-      language.extensions.map((ext) => ext.toLowerCase()).includes(aliasLowerCase),
-  )?.name;
+  return (
+    window.deps.languages.find(
+      (language) =>
+        language.name === aliasLowerCase ||
+        language.title.toLowerCase() === aliasLowerCase ||
+        language.extensions.map((ext) => ext.toLowerCase()).includes(aliasLowerCase),
+    )?.name || getLanguageByAlias(aliasLowerCase.split('.').slice(1).join('.')) // e.g. 'config.ts' => 'ts'
+  );
 };
 
 export const getFileExtension = /* @__PURE__ */ (filename: string) => {

From e91e162acaefda4a25f62b81ec5d6568b705abaf Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 17 Feb 2026 00:57:05 +0200
Subject: [PATCH 128/143] fix `svg <use ...` in solid

---
 src/livecodes/result/multi-file-result-page.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/livecodes/result/multi-file-result-page.ts b/src/livecodes/result/multi-file-result-page.ts
index 604bda379d..91a31d3006 100644
--- a/src/livecodes/result/multi-file-result-page.ts
+++ b/src/livecodes/result/multi-file-result-page.ts
@@ -344,20 +344,20 @@ export const createMultiFileResultPage = async ({
       const replaceUrl = (targetFile: (typeof compiledFiles)[number]) => {
         if (targetFile.filename === file.filename) return;
         // handle svg <use href="./logo.svg#svg-logo"> which does not allow data urls
-        const usePattern = /<use\s+href\s*=\s*"/g;
+        const usePattern = /<use\s+href\s*=/g;
         if (
           file.filename.endsWith('.svg') &&
           (targetFile.content?.match(new RegExp(usePattern)) ||
             targetFile.compiled?.match(new RegExp(usePattern)))
         ) {
           targetFile.compiled = targetFile.compiled.replace(
-            new RegExp(`(['"\`])(\\.?\\/)?${file.filename}#`, 'g'),
-            (_match, $1) => {
+            new RegExp(`(\\.?\\/)?${file.filename}#`, 'g'),
+            () => {
               const div = document.createElement('div');
               div.style.display = 'none';
               div.innerHTML = file.compiled;
               dom.body.append(div);
-              return `${$1}#`;
+              return `#`;
             },
           );
         }

From 626f4db4152f300180e65c227f185cf816709f67 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 17 Feb 2026 22:22:37 +0200
Subject: [PATCH 129/143] import from preact playground

---
 src/livecodes/import/check-src.ts         |  6 ++
 src/livecodes/import/import-src.ts        |  1 +
 src/livecodes/import/import.ts            |  5 ++
 src/livecodes/import/preact-playground.ts | 92 +++++++++++++++++++++++
 4 files changed, 104 insertions(+)
 create mode 100644 src/livecodes/import/preact-playground.ts

diff --git a/src/livecodes/import/check-src.ts b/src/livecodes/import/check-src.ts
index 59ff522eca..3121904c7b 100644
--- a/src/livecodes/import/check-src.ts
+++ b/src/livecodes/import/check-src.ts
@@ -15,6 +15,7 @@ export const hostPatterns = {
   typescriptPlayground: /^(?:(?:http|https):\/\/)?(?:www\.)?typescriptlang\.org\/play(?:.*)/g,
   vuePlayground: /^(?:(?:http|https):\/\/)?play\.vuejs\.org(?:.*)/g,
   sveltePlayground: /^(?:(?:http|https):\/\/)?svelte\.dev\/repl\/(?:.*)/g,
+  preactPlayground: /^(?:(?:http|https):\/\/)?preactjs\.com\/repl(?:.*)/g,
 };
 
 export const isCompressedCode = (url: string) => url.startsWith('code/');
@@ -109,3 +110,8 @@ export const isSveltePlayground = (
   url: string,
   pattern = new RegExp(hostPatterns.sveltePlayground),
 ) => pattern.test(url);
+
+export const isPreactPlayground = (
+  url: string,
+  pattern = new RegExp(hostPatterns.preactPlayground),
+) => pattern.test(url);
diff --git a/src/livecodes/import/import-src.ts b/src/livecodes/import/import-src.ts
index 27ca5ba69d..815ad8ea66 100644
--- a/src/livecodes/import/import-src.ts
+++ b/src/livecodes/import/import-src.ts
@@ -7,6 +7,7 @@ export { importFromGitlab } from './gitlab';
 export { importFromGitlabDir } from './gitlab-dir';
 export { importFromGitlabSnippet } from './gitlab-snippet';
 export { importFromJsbin } from './jsbin';
+export { importPreactPlayground } from './preact-playground';
 export { importTypescriptPlayground } from './typescript-playground';
 export { importFromUrl } from './url';
 export { importVuePlayground } from './vue-playground';
diff --git a/src/livecodes/import/import.ts b/src/livecodes/import/import.ts
index 5f0aebf627..b2a1c2a69d 100644
--- a/src/livecodes/import/import.ts
+++ b/src/livecodes/import/import.ts
@@ -11,6 +11,7 @@ import {
   isGitlabSnippet,
   isGitlabUrl,
   isJsbin,
+  isPreactPlayground,
   isProjectId,
   isTypescriptPlayground,
   isVuePlayground,
@@ -45,6 +46,7 @@ export const importCode = async (
     importFromJsbin,
     importTypescriptPlayground,
     importVuePlayground,
+    importPreactPlayground,
     importFromUrl,
   } = importSrc;
 
@@ -81,6 +83,9 @@ export const importCode = async (
   if (isVuePlayground(url)) {
     return importVuePlayground(url);
   }
+  if (isPreactPlayground(url)) {
+    return importPreactPlayground(url);
+  }
   if (getValidUrl(url)) {
     return importFromUrl(url, params, config);
   }
diff --git a/src/livecodes/import/preact-playground.ts b/src/livecodes/import/preact-playground.ts
new file mode 100644
index 0000000000..3c660fe304
--- /dev/null
+++ b/src/livecodes/import/preact-playground.ts
@@ -0,0 +1,92 @@
+import type { Config } from '../models';
+import { modulesService } from '../services';
+
+// https://github.com/preactjs/preact-www/blob/master/src/components/controllers/repl/query-encode.js
+function base64ToText(base64: string) {
+  const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
+  return new TextDecoder().decode(bytes);
+}
+
+// https://github.com/preactjs/preact-www/blob/master/src/components/controllers/repl/examples/index.js
+const EXAMPLES = [
+  {
+    slug: 'counter',
+    file: 'counters/counter.txt',
+  },
+  {
+    slug: 'counter-hooks',
+    file: 'counters/counter-hooks.txt',
+  },
+  {
+    slug: 'counter-signals',
+    file: 'counters/counter-signals.txt',
+  },
+  {
+    slug: 'counter-htm',
+    file: 'counters/counter-htm.txt',
+  },
+  {
+    slug: 'todo',
+    file: 'todo-lists/todo-list.txt',
+  },
+  {
+    slug: 'todo-signals',
+    file: 'todo-lists/todo-list-signals.txt',
+  },
+  {
+    slug: 'github-repo-list',
+    file: 'github-repo-list.txt',
+  },
+  {
+    slug: 'context',
+    file: 'context.txt',
+  },
+  {
+    slug: 'spiral',
+    file: 'spiral.txt',
+  },
+];
+
+const getExample = (slug: string) => EXAMPLES.find((e) => e.slug === slug)?.file;
+
+export const importPreactPlayground = async (url: string): Promise<Partial<Config>> => {
+  const exampleQuery = '?example=';
+  const codeQuery = '?code=';
+  const query = url.includes(exampleQuery)
+    ? exampleQuery
+    : url.includes(codeQuery)
+      ? codeQuery
+      : null;
+  if (!query) return {};
+  const code = url.split(query)[1];
+  if (!code?.trim()) return {};
+  const contentUrl =
+    query === exampleQuery
+      ? modulesService.getModuleUrl(
+          `gh:preactjs/preact-www@master/src/components/controllers/repl/examples/` +
+            getExample(code),
+        )
+      : undefined;
+  const content = query === codeQuery ? base64ToText(decodeURIComponent(code)) : undefined;
+  if (!contentUrl && !content) return {};
+  return {
+    activeEditor: 'script',
+    markup: {
+      language: 'html',
+      content: '<div id="app"></div>',
+    },
+    style: {
+      language: 'css',
+      hiddenContent: 'html { font: 100%/1.3 system-ui, sans-serif; background: none; }',
+      contentUrl: modulesService.getModuleUrl(
+        'gh:preactjs/preact-www@master/src/components/controllers/repl/examples/style.css',
+      ),
+    },
+    script: {
+      language: 'jsx',
+      hiddenContent: '/** @jsxImportSource preact */\n',
+      content,
+      contentUrl,
+    },
+  };
+};

From 82e1b65c428e9c89b485e1efc9c4c241c87a8163 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 17 Feb 2026 22:57:47 +0200
Subject: [PATCH 130/143] import from solid playground

---
 src/livecodes/import/check-src.ts        |  6 +++
 src/livecodes/import/import-src.ts       |  1 +
 src/livecodes/import/import.ts           |  5 +++
 src/livecodes/import/solid-playground.ts | 57 ++++++++++++++++++++++++
 4 files changed, 69 insertions(+)
 create mode 100644 src/livecodes/import/solid-playground.ts

diff --git a/src/livecodes/import/check-src.ts b/src/livecodes/import/check-src.ts
index 3121904c7b..37fc91cb25 100644
--- a/src/livecodes/import/check-src.ts
+++ b/src/livecodes/import/check-src.ts
@@ -16,6 +16,7 @@ export const hostPatterns = {
   vuePlayground: /^(?:(?:http|https):\/\/)?play\.vuejs\.org(?:.*)/g,
   sveltePlayground: /^(?:(?:http|https):\/\/)?svelte\.dev\/repl\/(?:.*)/g,
   preactPlayground: /^(?:(?:http|https):\/\/)?preactjs\.com\/repl(?:.*)/g,
+  solidPlayground: /^(?:(?:http|https):\/\/)?playground\.solidjs\.com\/(?:.*)/g,
 };
 
 export const isCompressedCode = (url: string) => url.startsWith('code/');
@@ -115,3 +116,8 @@ export const isPreactPlayground = (
   url: string,
   pattern = new RegExp(hostPatterns.preactPlayground),
 ) => pattern.test(url);
+
+export const isSolidPlayground = (
+  url: string,
+  pattern = new RegExp(hostPatterns.solidPlayground),
+) => pattern.test(url);
diff --git a/src/livecodes/import/import-src.ts b/src/livecodes/import/import-src.ts
index 815ad8ea66..fdcbe7d524 100644
--- a/src/livecodes/import/import-src.ts
+++ b/src/livecodes/import/import-src.ts
@@ -8,6 +8,7 @@ export { importFromGitlabDir } from './gitlab-dir';
 export { importFromGitlabSnippet } from './gitlab-snippet';
 export { importFromJsbin } from './jsbin';
 export { importPreactPlayground } from './preact-playground';
+export { importSolidPlayground } from './solid-playground';
 export { importTypescriptPlayground } from './typescript-playground';
 export { importFromUrl } from './url';
 export { importVuePlayground } from './vue-playground';
diff --git a/src/livecodes/import/import.ts b/src/livecodes/import/import.ts
index b2a1c2a69d..aeddf2dd93 100644
--- a/src/livecodes/import/import.ts
+++ b/src/livecodes/import/import.ts
@@ -13,6 +13,7 @@ import {
   isJsbin,
   isPreactPlayground,
   isProjectId,
+  isSolidPlayground,
   isTypescriptPlayground,
   isVuePlayground,
 } from './check-src';
@@ -47,6 +48,7 @@ export const importCode = async (
     importTypescriptPlayground,
     importVuePlayground,
     importPreactPlayground,
+    importSolidPlayground,
     importFromUrl,
   } = importSrc;
 
@@ -86,6 +88,9 @@ export const importCode = async (
   if (isPreactPlayground(url)) {
     return importPreactPlayground(url);
   }
+  if (isSolidPlayground(url)) {
+    return importSolidPlayground(url);
+  }
   if (getValidUrl(url)) {
     return importFromUrl(url, params, config);
   }
diff --git a/src/livecodes/import/solid-playground.ts b/src/livecodes/import/solid-playground.ts
new file mode 100644
index 0000000000..d8f8aaf95a
--- /dev/null
+++ b/src/livecodes/import/solid-playground.ts
@@ -0,0 +1,57 @@
+import type { Config } from '../models';
+
+interface PlaygroundFile {
+  name: string;
+  content: string;
+}
+
+export const importSolidPlayground = async (url: string): Promise<Partial<Config>> => {
+  const id = url.split('/').pop();
+  if (!id?.trim()) return {};
+  const data = await fetch(`https://api.solidjs.com/repl/${id}`).then((res) => res.json());
+  const files: Config['files'] = data.files
+    ?.filter((file: PlaygroundFile) => file.name !== 'import_map.json')
+    .map((file: PlaygroundFile) => ({
+      filename: file.name,
+      content: file.content,
+    }));
+  if (!files?.length) return {};
+  let imports = {};
+  try {
+    imports = JSON.parse(
+      data.files.find((file: PlaygroundFile) => file.name === 'import_map.json')?.content || '{}',
+    );
+  } catch {
+    // ignore
+  }
+  return {
+    activeEditor: files.find((f) => f.filename === 'main.tsx')?.filename,
+    files: [
+      {
+        filename: 'index.html',
+        language: 'html',
+        content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title></title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="main.tsx"></script>
+  </body>
+</html>
+`,
+      },
+      ...files,
+    ],
+    customSettings: {
+      fileLanguages: {
+        jsx: 'solid',
+        tsx: 'solid.tsx',
+      },
+      imports,
+    },
+  };
+};

From 98a41d39df557eb050a3767b7b32c36c93b5993e Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 17 Feb 2026 23:23:20 +0200
Subject: [PATCH 131/143] use a multifile project when importing from vue
 playground

---
 src/livecodes/import/vue-playground.ts | 51 +++++++++++++++++++++-----
 1 file changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/livecodes/import/vue-playground.ts b/src/livecodes/import/vue-playground.ts
index 00e561486c..5cc9c8aff8 100644
--- a/src/livecodes/import/vue-playground.ts
+++ b/src/livecodes/import/vue-playground.ts
@@ -2,7 +2,7 @@ import type { Config } from '../models';
 import { fflateUrl } from '../vendors';
 
 export const importVuePlayground = async (url: string): Promise<Partial<Config>> => {
-  const code = url.split('#')[1];
+  const code = url.split('#')[1] || parent.location.hash.split('#')[1];
   if (!code?.trim()) return {};
 
   const { unzlibSync, strToU8, strFromU8 } = await import(fflateUrl);
@@ -22,15 +22,48 @@ export const importVuePlayground = async (url: string): Promise<Partial<Config>>
   if (!str) return {};
   try {
     const json = JSON.parse(str);
-    const file =
-      json['App.vue'] ?? json[Object.keys(json).find((key) => key.endsWith('.vue')) || 'App.vue'];
-    if (!file) return {};
+    const files: any = Object.keys(json)
+      .filter((filename) => filename !== 'tsconfig.json' && filename !== 'import-map.json')
+      .map((filename) => ({ filename, content: json[filename] }));
+    if (!files.length) return {};
+    let imports = {};
+    try {
+      imports = JSON.parse(json['import-map.json'] || '{}').imports;
+    } catch {
+      // ignore
+    }
     return {
-      activeEditor: 'script',
-      script: {
-        language: 'vue',
-        content: file,
-      },
+      activeEditor: files.find((f: any) => f.filename === 'App.vue')?.filename,
+      files: [
+        {
+          filename: 'index.html',
+          language: 'html',
+          content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title></title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="main.ts"></script>
+  </body>
+</html>
+`,
+        },
+        {
+          filename: 'main.ts',
+          language: 'typescript',
+          content: `import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
+`,
+        },
+        ...files,
+      ],
+      customSettings: { imports },
     };
   } catch {
     return {};

From 6ab58359e8a4f6197b892f93071aeb712226582f Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Tue, 17 Feb 2026 23:48:31 +0200
Subject: [PATCH 132/143] fix importing from typescript playground

---
 src/livecodes/import/typescript-playground.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/livecodes/import/typescript-playground.ts b/src/livecodes/import/typescript-playground.ts
index b0bec6a2ef..450f08ffdb 100644
--- a/src/livecodes/import/typescript-playground.ts
+++ b/src/livecodes/import/typescript-playground.ts
@@ -2,7 +2,7 @@ import { decompressFromEncodedURIComponent } from 'lz-string';
 import type { Config } from '../models';
 
 export const importTypescriptPlayground = async (url: string): Promise<Partial<Config>> => {
-  const code = url.split('#code/')[1];
+  const code = url.split('#code/')[1] || parent.location.hash.split('#code/')[1];
   if (!code?.trim()) return {};
   const ts = decompressFromEncodedURIComponent(code);
   if (!ts?.trim()) return {};

From 131638e11fb9b029ac68c2aaac75bde075f45a01 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 18 Feb 2026 01:22:52 +0200
Subject: [PATCH 133/143] import from Svelte playground

---
 src/livecodes/import/check-src.ts         |  2 +-
 src/livecodes/import/import-src.ts        |  1 +
 src/livecodes/import/import.ts            |  5 ++
 src/livecodes/import/svelte-playground.ts | 84 +++++++++++++++++++++++
 4 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 src/livecodes/import/svelte-playground.ts

diff --git a/src/livecodes/import/check-src.ts b/src/livecodes/import/check-src.ts
index 37fc91cb25..d5c2c7d6b8 100644
--- a/src/livecodes/import/check-src.ts
+++ b/src/livecodes/import/check-src.ts
@@ -14,7 +14,7 @@ export const hostPatterns = {
   jsbin: /^(?:(?:(?:http|https):\/\/)?(?:\w+.)?)?jsbin\.com\/((\w)+(\/\d+)?)(?:.*)/g,
   typescriptPlayground: /^(?:(?:http|https):\/\/)?(?:www\.)?typescriptlang\.org\/play(?:.*)/g,
   vuePlayground: /^(?:(?:http|https):\/\/)?play\.vuejs\.org(?:.*)/g,
-  sveltePlayground: /^(?:(?:http|https):\/\/)?svelte\.dev\/repl\/(?:.*)/g,
+  sveltePlayground: /^(?:(?:http|https):\/\/)?svelte\.dev\/playground\/(?:.*)/g,
   preactPlayground: /^(?:(?:http|https):\/\/)?preactjs\.com\/repl(?:.*)/g,
   solidPlayground: /^(?:(?:http|https):\/\/)?playground\.solidjs\.com\/(?:.*)/g,
 };
diff --git a/src/livecodes/import/import-src.ts b/src/livecodes/import/import-src.ts
index fdcbe7d524..880bec326d 100644
--- a/src/livecodes/import/import-src.ts
+++ b/src/livecodes/import/import-src.ts
@@ -9,6 +9,7 @@ export { importFromGitlabSnippet } from './gitlab-snippet';
 export { importFromJsbin } from './jsbin';
 export { importPreactPlayground } from './preact-playground';
 export { importSolidPlayground } from './solid-playground';
+export { importSveltePlayground } from './svelte-playground';
 export { importTypescriptPlayground } from './typescript-playground';
 export { importFromUrl } from './url';
 export { importVuePlayground } from './vue-playground';
diff --git a/src/livecodes/import/import.ts b/src/livecodes/import/import.ts
index aeddf2dd93..baa565a35e 100644
--- a/src/livecodes/import/import.ts
+++ b/src/livecodes/import/import.ts
@@ -14,6 +14,7 @@ import {
   isPreactPlayground,
   isProjectId,
   isSolidPlayground,
+  isSveltePlayground,
   isTypescriptPlayground,
   isVuePlayground,
 } from './check-src';
@@ -49,6 +50,7 @@ export const importCode = async (
     importVuePlayground,
     importPreactPlayground,
     importSolidPlayground,
+    importSveltePlayground,
     importFromUrl,
   } = importSrc;
 
@@ -91,6 +93,9 @@ export const importCode = async (
   if (isSolidPlayground(url)) {
     return importSolidPlayground(url);
   }
+  if (isSveltePlayground(url)) {
+    return importSveltePlayground(url);
+  }
   if (getValidUrl(url)) {
     return importFromUrl(url, params, config);
   }
diff --git a/src/livecodes/import/svelte-playground.ts b/src/livecodes/import/svelte-playground.ts
new file mode 100644
index 0000000000..0e85a3bfba
--- /dev/null
+++ b/src/livecodes/import/svelte-playground.ts
@@ -0,0 +1,84 @@
+/* eslint-disable import/no-internal-modules */
+import type { Config } from '../models';
+import { corsService } from '../services/cors';
+
+// https://github.com/sveltejs/svelte.dev/blob/main/apps/svelte.dev/src/routes/(authed)/playground/%5Bid%5D/gzip.js
+async function decode_and_decompress_text(input: string) {
+  const decoded = atob(input.replaceAll('-', '+').replaceAll('_', '/'));
+  // putting it directly into the blob gives a corrupted file
+  const u8 = new Uint8Array(decoded.length);
+  for (let i = 0; i < decoded.length; i++) {
+    u8[i] = decoded.charCodeAt(i);
+  }
+  const stream = new Blob([u8]).stream().pipeThrough(new DecompressionStream('gzip'));
+  return new Response(stream).text();
+}
+
+export const importSveltePlayground = async (url: string): Promise<Partial<Config>> => {
+  const code = url.split('#')[1] || parent.location.hash.split('#')[1];
+  let files = [];
+  try {
+    if (code) {
+      const data = JSON.parse(await decode_and_decompress_text(code));
+      files = data.files
+        .filter((f: any) => f.type === 'file')
+        .map((f: any) => ({
+          filename: f.name,
+          content: f.contents,
+        }));
+    } else {
+      const id = url.split('?')[0].split('/').pop();
+      const dataUrl = `https://svelte.dev/playground/${id}/__data.json?x-sveltekit-invalidated=001`;
+      const res = await corsService.fetch(dataUrl);
+      if (!res.ok) return {};
+      const json = await res.json();
+      const data = json.nodes.find((n: any) => n.data).data;
+      files = data
+        .filter((e: any) => e && typeof e === 'object' && e.name && e.type && e.source)
+        .map((e: any) => ({
+          filename: data[e.name] + '.' + data[e.type],
+          content: data[e.source],
+        }));
+    }
+  } catch {
+    //
+  }
+
+  if (!files?.length) return {};
+  return {
+    activeEditor: files.find((f: any) => f.filename === 'App.svelte')?.filename,
+    files: [
+      {
+        filename: 'index.html',
+        language: 'html',
+        content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title></title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="main.ts"></script>
+  </body>
+</html>
+`,
+      },
+      {
+        filename: 'main.ts',
+        language: 'typescript',
+        content: `import { mount } from "svelte";
+import App from "./App.svelte";
+
+const app = mount(App, {
+  target: document.getElementById("app"),
+});
+
+export default app;
+`,
+      },
+      ...files,
+    ],
+  };
+};

From f5da407559826353f1c1875f427d728cdc8ae1fb Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 18 Feb 2026 01:38:01 +0200
Subject: [PATCH 134/143] docs

---
 docs/docs/features/import.mdx                 | 30 +------------------
 src/livecodes/html/import.html                |  2 +-
 .../i18n/locales/en/translation.lokalise.json |  2 +-
 src/livecodes/i18n/locales/en/translation.ts  |  2 +-
 4 files changed, 4 insertions(+), 32 deletions(-)

diff --git a/docs/docs/features/import.mdx b/docs/docs/features/import.mdx
index adc81f6c4b..bfbb1cbff5 100644
--- a/docs/docs/features/import.mdx
+++ b/docs/docs/features/import.mdx
@@ -81,7 +81,7 @@ Import is supported from any of the following:
 - Local file(s)
 - Code in zip file (Local or URL)
 - Code in image - OCR (Local or URL)
-- Projects shared in official playgrounds of [TypeScript](https://www.typescriptlang.org/play) and [Vue](https://play.vuejs.org/)
+- Projects shared in official playgrounds of [TypeScript](https://www.typescriptlang.org/play), [Vue](https://play.vuejs.org/), [Svelte](https://svelte.dev/playground), [Preact](https://preactjs.com/repl/) and [Solid](https://playground.solidjs.com/)
 - [Exported project JSON](./export.mdx) (single project and bulk import)
 
 Import sources are identified by URL patterns (e.g. origin, pathname and extension).
@@ -90,34 +90,6 @@ Import sources are identified by URL patterns (e.g. origin, pathname and extensi
 Local files can be imported from the "Import Screen" or by dragging and dropping the file(s) in the editor.
 :::
 
-## File Selection
-
-For sources that provide multiple files (e.g. GitHub/GitLab directories, GitHub gists, GitLab snippets and local files), a best guess is tried to load files in respective editors. Best results are when there are 3 files and each file is in a language (identified by file extension) that can be loaded to a different editor, for example:
-
-- index.html, style.css, script.js
-- default.pug, app.scss, main.ts
-
-The following file names are given higher priority:
-
-- Markup files starting with `index.` or `default.`
-- Style files starting with `style.` or `styles.`
-- Script files starting with `script.`, `app.`, `main.` or `index.`
-
-While README, markdown files and files with no extension are given lower priority.
-
-Alternatively, files can be specified using the `files` [query param](../configuration/query-params.mdx). It takes a **comma-separated list** of filenames. The first 3 found files are loaded. If 1 or 2 files are specified, only these will be loaded. The first matching file is shown by default in the active editor.
-
-The query params should have the following format:
-`?x={url}&files={file1},{file2},{file3}`
-
-Example:
-`?x={url}&files=Counter.tsx,counter.scss,counter.html`
-
-The active editor can be specified using the [`activeEditor`](../configuration/configuration-object.mdx#activeeditor) (or its alias `active`) [query param](../configuration/query-params.mdx). It takes the name of the editor (`markup`, `style` or `script`) or its ID (`0`, `1` or `2`) to be shown by default.
-
-Example:
-`?x={url}&activeEditor=style` or `?x={url}&active=1`
-
 ## Import Shared Projects
 
 [Shared Projects](./share.mdx) can be imported using the value of the query param `x` generated by the Share screen. This starts with either:
diff --git a/src/livecodes/html/import.html b/src/livecodes/html/import.html
index 67e831e0d5..7c9dbfe981 100644
--- a/src/livecodes/html/import.html
+++ b/src/livecodes/html/import.html
@@ -56,7 +56,7 @@
             <li>Code in web page DOM</li>
             <li>Code in zip file</li>
             <li>Code in image (OCR)</li>
-            <li>Official playgrounds<br />(TypeScript and Vue)</li>
+            <li>Official playgrounds<br />(TypeScript, Vue, Svelte, Preact and Solid)</li>
           </ul>
           Please visit the
           <a href="{{DOCS_BASE_URL}}features/import" target="_blank" rel="noopener"
diff --git a/src/livecodes/i18n/locales/en/translation.lokalise.json b/src/livecodes/i18n/locales/en/translation.lokalise.json
index 171425c045..ba4eca3770 100644
--- a/src/livecodes/i18n/locales/en/translation.lokalise.json
+++ b/src/livecodes/i18n/locales/en/translation.lokalise.json
@@ -1658,7 +1658,7 @@
   },
   "import.code.desc": {
     "notes": "### <tag-1> ###\n<ul  />\n\n### <tag-2> ###\n<li  />\n\n### <tag-3> ###\n<li  />\n\n### <tag-4> ###\n<li  />\n\n### <tag-5> ###\n<li  />\n\n### <tag-6> ###\n<li  />\n\n### <tag-7> ###\n<li  />\n\n### <tag-8> ###\n<li  />\n\n### <tag-9> ###\n<li  />\n\n### <tag-10> ###\n<li  />\n\n### <tag-11> ###\n<li  />\n\n### <tag-12> ###\n<li  />\n\n### <tag-13> ###\n<li  />\n\n### <tag-14> ###\n<br  />\n\n### <tag-15> ###\n<a href=\"{{DOCS_BASE_URL}}features/import\" target=\"_blank\" rel=\"noopener\" />\n\n",
-    "translation": "Supported Sources: <tag-1> <tag-2>GitHub gist</tag-2> <tag-3>GitHub file</tag-3> <tag-4>Directory in a GitHub repo</tag-4> <tag-5>Gitlab snippet</tag-5> <tag-6>Gitlab file</tag-6> <tag-7>Directory in a Gitlab repo</tag-7> <tag-8>JS Bin</tag-8> <tag-9>Raw code</tag-9> <tag-10>Code in web page DOM</tag-10> <tag-11>Code in zip file</tag-11> <tag-12>Code in image (OCR)</tag-12> <tag-13>Official playgrounds<tag-14></tag-14>(TypeScript and Vue)</tag-13> </tag-1> Please visit the <tag-15>documentations</tag-15> for details."
+    "translation": "Supported Sources: <tag-1> <tag-2>GitHub gist</tag-2> <tag-3>GitHub file</tag-3> <tag-4>Directory in a GitHub repo</tag-4> <tag-5>Gitlab snippet</tag-5> <tag-6>Gitlab file</tag-6> <tag-7>Directory in a Gitlab repo</tag-7> <tag-8>JS Bin</tag-8> <tag-9>Raw code</tag-9> <tag-10>Code in web page DOM</tag-10> <tag-11>Code in zip file</tag-11> <tag-12>Code in image (OCR)</tag-12> <tag-13>Official playgrounds<tag-14></tag-14>(TypeScript, Vue, Svelte, Preact and Solid)</tag-13> </tag-1> Please visit the <tag-15>documentations</tag-15> for details."
   },
   "import.code.fromFile": {
     "notes": "",
diff --git a/src/livecodes/i18n/locales/en/translation.ts b/src/livecodes/i18n/locales/en/translation.ts
index 3b68916b1c..7699e45be4 100644
--- a/src/livecodes/i18n/locales/en/translation.ts
+++ b/src/livecodes/i18n/locales/en/translation.ts
@@ -649,7 +649,7 @@ const translation = {
       started: 'Bulk import started...',
     },
     code: {
-      desc: 'Supported Sources: <1> <2>GitHub gist</2> <3>GitHub file</3> <4>Directory in a GitHub repo</4> <5>Gitlab snippet</5> <6>Gitlab file</6> <7>Directory in a Gitlab repo</7> <8>JS Bin</8> <9>Raw code</9> <10>Code in web page DOM</10> <11>Code in zip file</11> <12>Code in image (OCR)</12> <13>Official playgrounds<14></14>(TypeScript and Vue)</13> </1> Please visit the <15>documentations</15> for details.',
+      desc: 'Supported Sources: <1> <2>GitHub gist</2> <3>GitHub file</3> <4>Directory in a GitHub repo</4> <5>Gitlab snippet</5> <6>Gitlab file</6> <7>Directory in a Gitlab repo</7> <8>JS Bin</8> <9>Raw code</9> <10>Code in web page DOM</10> <11>Code in zip file</11> <12>Code in image (OCR)</12> <13>Official playgrounds<14></14>(TypeScript, Vue, Svelte, Preact and Solid)</13> </1> Please visit the <15>documentations</15> for details.',
       fromFile: 'Import local files',
       fromURL: 'Import from URL',
       heading: 'Import Code',

From 618c6b38086ad16828a3a943a80dbdc5313d8ada Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 18 Feb 2026 13:08:28 +0200
Subject: [PATCH 135/143] use react compiler when importing react projects

---
 src/livecodes/import/utils.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/livecodes/import/utils.ts b/src/livecodes/import/utils.ts
index 0a9295db61..980c18b4bf 100644
--- a/src/livecodes/import/utils.ts
+++ b/src/livecodes/import/utils.ts
@@ -36,6 +36,9 @@ const prepareFiles = (
 const detectFramework = (files: SourceFile[]): Partial<Config> => {
   const viteConfig = files.find((f) => f.filename.startsWith('vite.config.'));
   if (viteConfig) {
+    if (viteConfig.content.includes('@vitejs/plugin-react')) {
+      return { customSettings: { fileLanguages: { jsx: 'react', tsx: 'react.tsx' } } };
+    }
     if (viteConfig.content.includes('vite-plugin-solid')) {
       return { customSettings: { fileLanguages: { jsx: 'solid', tsx: 'solid.tsx' } } };
     }

From 69a468f316102418ba56d666d419af64ff3097b9 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 18 Feb 2026 13:38:11 +0200
Subject: [PATCH 136/143] remove jsx pragma from preact templates

---
 src/livecodes/import/preact-playground.ts         | 7 ++++---
 src/livecodes/import/utils.ts                     | 9 +--------
 src/livecodes/templates/multifile/preact.ts       | 7 +++----
 src/livecodes/templates/starter/preact-starter.ts | 4 ++--
 4 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/livecodes/import/preact-playground.ts b/src/livecodes/import/preact-playground.ts
index 3c660fe304..575dc23332 100644
--- a/src/livecodes/import/preact-playground.ts
+++ b/src/livecodes/import/preact-playground.ts
@@ -73,20 +73,21 @@ export const importPreactPlayground = async (url: string): Promise<Partial<Confi
     activeEditor: 'script',
     markup: {
       language: 'html',
-      content: '<div id="app"></div>',
+      content: `<style> html { font: 100%/1.3 system-ui, sans-serif; } </style>
+<div id="app"></div>
+`,
     },
     style: {
       language: 'css',
-      hiddenContent: 'html { font: 100%/1.3 system-ui, sans-serif; background: none; }',
       contentUrl: modulesService.getModuleUrl(
         'gh:preactjs/preact-www@master/src/components/controllers/repl/examples/style.css',
       ),
     },
     script: {
       language: 'jsx',
-      hiddenContent: '/** @jsxImportSource preact */\n',
       content,
       contentUrl,
     },
+    customSettings: { typescript: { jsxImportSource: 'preact' } },
   };
 };
diff --git a/src/livecodes/import/utils.ts b/src/livecodes/import/utils.ts
index 980c18b4bf..19e7acfd2c 100644
--- a/src/livecodes/import/utils.ts
+++ b/src/livecodes/import/utils.ts
@@ -43,14 +43,7 @@ const detectFramework = (files: SourceFile[]): Partial<Config> => {
       return { customSettings: { fileLanguages: { jsx: 'solid', tsx: 'solid.tsx' } } };
     }
     if (viteConfig.content.includes('@preact/preset-vite')) {
-      files.forEach((file) => {
-        if (
-          (file.filename.endsWith('.jsx') || file.filename.endsWith('.tsx')) &&
-          !file.content.match(/\/\*\*\s*@jsx/g)
-        ) {
-          file.content = '/** @jsxImportSource preact */\n' + file.content;
-        }
-      });
+      return { customSettings: { typescript: { jsxImportSource: 'preact' } } };
     }
   }
   return {};
diff --git a/src/livecodes/templates/multifile/preact.ts b/src/livecodes/templates/multifile/preact.ts
index 9c91dbf929..c47e612ed6 100644
--- a/src/livecodes/templates/multifile/preact.ts
+++ b/src/livecodes/templates/multifile/preact.ts
@@ -27,8 +27,7 @@ export const preact: Template = {
     {
       filename: 'src/main.jsx',
       language: 'tsx',
-      content: `/** @jsxImportSource preact */
-import { render } from "preact";
+      content: `import { render } from "preact";
 import "./index.css";
 import { App } from "./app.jsx";
 
@@ -111,8 +110,7 @@ button:focus-visible {
     {
       filename: 'src/app.jsx',
       language: 'jsx',
-      content: `/** @jsxImportSource preact */
-import { useState } from "preact/hooks";
+      content: `import { useState } from "preact/hooks";
 import preactLogo from "./assets/preact.svg";
 import "./app.css";
 
@@ -174,4 +172,5 @@ export function App() {
 `,
     },
   ],
+  customSettings: { typescript: { jsxImportSource: 'preact' } },
 };
diff --git a/src/livecodes/templates/starter/preact-starter.ts b/src/livecodes/templates/starter/preact-starter.ts
index a16fc65c1d..80796c5828 100644
--- a/src/livecodes/templates/starter/preact-starter.ts
+++ b/src/livecodes/templates/starter/preact-starter.ts
@@ -25,7 +25,6 @@ export const preactStarter: Template = {
   script: {
     language: 'jsx',
     content: `
-/** @jsxImportSource preact */
 import { render } from 'preact';
 import { useSignal } from "@preact/signals";
 
@@ -41,7 +40,8 @@ function App(props) {
   );
 }
 
-render(<App name="Preact" />, document.body);
+render(<App name="Preact" />, document.getElementById("app"));
 `.trimStart(),
   },
+  customSettings: { typescript: { jsxImportSource: 'preact' } },
 };

From 043f32d704ac727904edf4fda2d80a7cd47c0cfd Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 18 Feb 2026 21:20:56 +0200
Subject: [PATCH 137/143] add support for .svelte.ts files

---
 src/livecodes/editor/codejar/codejar.ts       | 10 +++-
 src/livecodes/editor/codemirror/codemirror.ts |  6 ++-
 src/livecodes/editor/monaco/monaco.ts         | 16 +++---
 src/livecodes/languages/malina/lang-malina.ts |  1 +
 src/livecodes/languages/riot/lang-riot.ts     |  1 +
 .../languages/svelte/lang-svelte-compiler.ts  | 51 +++++++++++++------
 src/livecodes/languages/svelte/lang-svelte.ts |  3 +-
 src/sdk/models.ts                             |  2 +
 8 files changed, 65 insertions(+), 25 deletions(-)

diff --git a/src/livecodes/editor/codejar/codejar.ts b/src/livecodes/editor/codejar/codejar.ts
index 719387c2de..8922028a1a 100644
--- a/src/livecodes/editor/codejar/codejar.ts
+++ b/src/livecodes/editor/codejar/codejar.ts
@@ -39,7 +39,15 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   let { value, language, editorId } = options;
   let currentPosition: EditorPosition = { lineNumber: 1 };
   const mapLanguage = (lang: Language | undefined) =>
-    !lang ? 'html' : lang === 'wat' ? 'wasm' : options.mapLanguage?.(lang) || lang;
+    !lang
+      ? 'html'
+      : lang === 'wat'
+        ? 'wasm'
+        : editorId.endsWith('.ts') // e.g. counter.svelte.ts
+          ? 'typescript'
+          : editorId.endsWith('.js')
+            ? 'javascript'
+            : options.mapLanguage?.(lang) || lang;
   let mappedLanguage = mapLanguage(language);
   let editorOptions: ReturnType<typeof convertOptions>;
 
diff --git a/src/livecodes/editor/codemirror/codemirror.ts b/src/livecodes/editor/codemirror/codemirror.ts
index 24fcecc299..45697ec020 100644
--- a/src/livecodes/editor/codemirror/codemirror.ts
+++ b/src/livecodes/editor/codemirror/codemirror.ts
@@ -69,7 +69,11 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   const mapLanguage = (lang: Language | undefined) => {
     if (!lang) return 'html';
     if (lang.startsWith('vue')) return 'vue';
-    if (lang.startsWith('svelte')) return 'svelte';
+    if (lang.startsWith('svelte')) {
+      if (editorId.endsWith('.ts')) return 'typescript';
+      if (editorId.endsWith('.js')) return 'javascript';
+      return 'svelte';
+    }
     if (lang === 'liquid') return 'liquid';
     return options.mapLanguage?.(lang) || lang;
   };
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 96baf6fd6b..9107be74ab 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -88,13 +88,15 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
           ? 'csharp'
           : language.startsWith('vue')
             ? 'vue'
-            : ['svelte', 'malina', 'riot'].includes(language)
-              ? ('razor' as Language) // avoid mixing code between markup & script editors when formatting
-              : language === 'json' && (editorId.endsWith('.json5') || editorId.endsWith('.jsonc'))
-                ? 'json5'
-                : mapLanguage(language) === 'text'
-                  ? 'plaintext'
-                  : mapLanguage(language);
+            : editorId.endsWith('.ts') // e.g. counter.svelte.ts
+              ? 'typescript'
+              : editorId.endsWith('.js')
+                ? 'javascript'
+                : editorId.endsWith('.json5') || editorId.endsWith('.jsonc')
+                  ? 'json5'
+                  : mapLanguage(language) === 'text'
+                    ? 'plaintext'
+                    : mapLanguage(language);
 
   try {
     (window as any).monaco = (window as any).monaco || (await loadMonaco()).monaco;
diff --git a/src/livecodes/languages/malina/lang-malina.ts b/src/livecodes/languages/malina/lang-malina.ts
index c659286fd5..cd9aad971f 100644
--- a/src/livecodes/languages/malina/lang-malina.ts
+++ b/src/livecodes/languages/malina/lang-malina.ts
@@ -20,4 +20,5 @@ export const malina: LanguageSpecs = {
   },
   extensions: ['xht'],
   editor: 'script',
+  editorLanguage: 'html',
 };
diff --git a/src/livecodes/languages/riot/lang-riot.ts b/src/livecodes/languages/riot/lang-riot.ts
index 5a156b86df..9839991350 100644
--- a/src/livecodes/languages/riot/lang-riot.ts
+++ b/src/livecodes/languages/riot/lang-riot.ts
@@ -23,5 +23,6 @@ export const riot: LanguageSpecs = {
   },
   extensions: ['riot', 'riotjs'],
   editor: 'script',
+  editorLanguage: 'html',
   multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/svelte/lang-svelte-compiler.ts b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
index 3d718295bc..257c43d285 100644
--- a/src/livecodes/languages/svelte/lang-svelte-compiler.ts
+++ b/src/livecodes/languages/svelte/lang-svelte-compiler.ts
@@ -1,7 +1,8 @@
+import { compileInCompiler } from '../../compiler';
 import { compileAllBlocks } from '../../compiler/compile-blocks';
 import { createImportMap, replaceSFCImports } from '../../compiler/import-map';
 import { getCompileResult } from '../../compiler/utils';
-import type { CompilerFunction, Config, Language } from '../../models';
+import type { CompileOptions, CompilerFunction, Config, Language } from '../../models';
 import { getErrorMessage } from '../../utils/utils';
 import { getFileExtension, getLanguageByAlias, getLanguageCustomSettings } from '../utils';
 
@@ -75,6 +76,36 @@ import { getFileExtension, getLanguageByAlias, getLanguageCustomSettings } from
     };
   };
 
+  const compileSvelteModule = async (
+    code: string,
+    { config, options, filename }: { config: Config; options: CompileOptions; filename: string },
+  ) => {
+    try {
+      if (filename.endsWith('.ts')) {
+        code = (await compileInCompiler(code, 'typescript', config, options)).code;
+      }
+      const result = (window as any).svelte.compileModule(code, {
+        filename,
+        ...getLanguageCustomSettings('svelte', config),
+      });
+      return result.js;
+    } catch (err) {
+      errors.push(getErrorMessage(err));
+      return {
+        code: '',
+        info: { errors },
+      };
+    }
+  };
+
+  const getMountCode = (code: string) =>
+    `
+import { mount } from "svelte";
+${code}
+
+mount(__LiveCodes_App__, { target: document.querySelector("#livecodes-app") || document.body.appendChild(document.createElement('div')) });
+`.trimStart();
+
   return async (code, { config, language, options }) => {
     const isMultiFileProject = Boolean(config.files.length);
     const isMainFile = isMultiFileProject
@@ -86,20 +117,10 @@ import { getFileExtension, getLanguageByAlias, getLanguageCustomSettings } from
         ? MAIN_FILE
         : SECONDARY_FILE;
 
-    const compileResult = await compileSvelteSFC(code, {
-      config,
-      language: language as Language,
-      filename,
-    });
+    if (filename.endsWith('.svelte.js') || filename.endsWith('.svelte.ts')) {
+      return compileSvelteModule(code, { config, options, filename });
+    }
 
-    return compileResult;
+    return compileSvelteSFC(code, { config, language: language as Language, filename });
   };
 };
-
-const getMountCode = (code: string) =>
-  `
-import { mount } from "svelte";
-${code}
-
-mount(__LiveCodes_App__, { target: document.querySelector("#livecodes-app") || document.body.appendChild(document.createElement('div')) });
-`.trimStart();
diff --git a/src/livecodes/languages/svelte/lang-svelte.ts b/src/livecodes/languages/svelte/lang-svelte.ts
index a20e16be8d..9c74b09041 100644
--- a/src/livecodes/languages/svelte/lang-svelte.ts
+++ b/src/livecodes/languages/svelte/lang-svelte.ts
@@ -43,8 +43,9 @@ export const svelte: LanguageSpecs = {
     },
     inlineScript: 'globalThis.process = { env: { NODE_ENV: "production" } };',
   },
-  extensions: ['svelte'],
+  extensions: ['svelte', 'svelte.js', 'svelte.ts'],
   editor: 'script',
+  editorLanguage: 'html',
   multiFileSupport: true,
 };
 
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index 488a99d0d4..aed8f486d9 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1070,6 +1070,8 @@ export type Language =
   | 'svelte'
   | 'svelte-app'
   | 'app.svelte'
+  | 'svelte.js'
+  | 'svelte.ts'
   | 'stencil'
   | 'stencil.tsx'
   | 'solid'

From f2de3bea4cba144d8cc60ee83aae77378f4bf577 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Wed, 18 Feb 2026 23:09:09 +0200
Subject: [PATCH 138/143] monaco editor support for svelte

---
 src/livecodes/editor/monaco/monaco-languages.ts |  1 +
 src/livecodes/editor/monaco/monaco.ts           | 12 +++++++-----
 src/livecodes/vendors.ts                        |  2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/livecodes/editor/monaco/monaco-languages.ts b/src/livecodes/editor/monaco/monaco-languages.ts
index bed82b6392..5135d08be5 100644
--- a/src/livecodes/editor/monaco/monaco-languages.ts
+++ b/src/livecodes/editor/monaco/monaco-languages.ts
@@ -20,6 +20,7 @@ export const customLanguages: Partial<Record<Language, string | CustomLanguageDe
   prolog: monacoLanguagesBaseUrl + 'prolog.js',
   // sql: monacoLanguagesBaseUrl + 'sql.js', // TODO: add autocomplete
   vue: monacoLanguagesBaseUrl + 'vue.js',
+  svelte: monacoLanguagesBaseUrl + 'svelte.js',
   wat: monacoLanguagesBaseUrl + 'wat.js',
 
   dotenv: {
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 9107be74ab..7b2933690e 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -92,11 +92,13 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
               ? 'typescript'
               : editorId.endsWith('.js')
                 ? 'javascript'
-                : editorId.endsWith('.json5') || editorId.endsWith('.jsonc')
-                  ? 'json5'
-                  : mapLanguage(language) === 'text'
-                    ? 'plaintext'
-                    : mapLanguage(language);
+                : language.startsWith('svelte')
+                  ? 'svelte'
+                  : editorId.endsWith('.json5') || editorId.endsWith('.jsonc')
+                    ? 'json5'
+                    : mapLanguage(language) === 'text'
+                      ? 'plaintext'
+                      : mapLanguage(language);
 
   try {
     (window as any).monaco = (window as any).monaco || (await loadMonaco()).monaco;
diff --git a/src/livecodes/vendors.ts b/src/livecodes/vendors.ts
index 84be1e87cc..20434b89d8 100644
--- a/src/livecodes/vendors.ts
+++ b/src/livecodes/vendors.ts
@@ -315,7 +315,7 @@ export const monacoBaseUrl = /* @__PURE__ */ getUrl('@live-codes/monaco-editor@0
 export const monacoEmacsUrl = /* @__PURE__ */ getUrl('monaco-emacs@0.3.0/dist/monaco-emacs.js');
 
 export const monacoLanguagesBaseUrl = /* @__PURE__ */ getUrl(
-  '@live-codes/monaco-languages@0.1.0/dist/',
+  '@live-codes/monaco-languages@0.1.1/dist/',
 );
 
 export const monacoThemesBaseUrl = /* @__PURE__ */ getUrl('monaco-themes@0.4.4/themes/');

From 875e806a32952d6fcfe4339947a233c3a11b06b3 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 1 Mar 2026 15:01:26 +0200
Subject: [PATCH 139/143] editors mapLanguage

---
 src/livecodes/compiler/compile.worker.ts | 11 ++++----
 src/livecodes/editor/codejar/codejar.ts  |  7 +++++-
 src/livecodes/editor/monaco/monaco.ts    | 32 ++++++++++++------------
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/livecodes/compiler/compile.worker.ts b/src/livecodes/compiler/compile.worker.ts
index 5479b9c0b3..eed1bc19b5 100644
--- a/src/livecodes/compiler/compile.worker.ts
+++ b/src/livecodes/compiler/compile.worker.ts
@@ -283,12 +283,11 @@ const initCodemirrorTS = doOnce(async () => {
   const { createWorker } = worker.CodemirrorTsWorker;
   const { createDefaultMapFromCDN, createSystem, createVirtualTypeScriptEnvironment } =
     worker.typescriptVFS;
-  tsvfsMap = await createDefaultMapFromCDN(
-    getCompilerOptions(language),
-    worker.ts?.version,
-    false,
-    worker.ts,
-  );
+  const compilerOptions = {
+    ...getCompilerOptions(),
+    ...((getLanguageSpecs(language)?.editorSupport?.compilerOptions || {}) as TS.CompilerOptions),
+  };
+  tsvfsMap = await createDefaultMapFromCDN(compilerOptions, worker.ts?.version, false, worker.ts);
   const system = createSystem(tsvfsMap);
   const createTypeScriptEnvironment = (lang: Language) => {
     const compilerOpts = {
diff --git a/src/livecodes/editor/codejar/codejar.ts b/src/livecodes/editor/codejar/codejar.ts
index 4bce3cf169..383ec5ab97 100644
--- a/src/livecodes/editor/codejar/codejar.ts
+++ b/src/livecodes/editor/codejar/codejar.ts
@@ -38,7 +38,12 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
   let { value, language, editorId } = options;
   let currentPosition: EditorPosition = { lineNumber: 1 };
-  const mapLanguage = (lang: Language) => options.mapLanguage?.(lang, 'codejar') || lang;
+  const mapLanguage = (lang: Language) => {
+    if (!lang) return 'html';
+    if (editorId.endsWith('.js')) return 'javascript';
+    if (editorId.endsWith('.ts')) return 'typescript';
+    return options.mapLanguage?.(lang, 'codejar') || lang;
+  };
   let mappedLanguage = mapLanguage(language);
   let editorOptions: ReturnType<typeof convertOptions>;
 
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 8e97a2baec..795b868cb8 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -53,7 +53,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     editorTheme,
     isEmbed,
     getLanguageExtension,
-    mapLanguage,
     getFormatterConfig,
     getFontFamily,
   } = options;
@@ -61,6 +60,13 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
   if (!container) throw new Error('editor container not found');
 
+  const mapLanguage = (lang: Language | undefined) => {
+    if (!lang) return 'html';
+    if (editorId.endsWith('.ts')) return 'typescript';
+    if (editorId.endsWith('.js')) return 'javascript';
+    return options.mapLanguage?.(lang, 'monaco') || lang;
+  };
+
   const loadMonaco = () => import(monacoBaseUrl + 'monaco.js');
 
   let editorMode: any | undefined;
@@ -201,7 +207,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   const configureTypeScriptFeatures = () => {
     const JSLangs = ['javascript', 'jsx', 'react', 'flow', 'solid', 'react-native'];
     const isJSLang = JSLangs.includes(language);
-    if (!['javascript', 'typescript'].includes(mapLanguage(language, 'monaco'))) {
+    if (!['javascript', 'typescript'].includes(mapLanguage(language))) {
       return;
     }
 
@@ -253,7 +259,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
   const getOrCreateModel = (value: string, lang: string | undefined, uri: Monaco.Uri) => {
     const model = monaco.editor.getModel(uri);
     if (model) {
-      if (model.getLanguageId() === mapLanguage(lang as Language, 'monaco')) {
+      if (model.getLanguageId() === mapLanguage(lang as Language)) {
         model.setValue(value);
         return model;
       }
@@ -273,20 +279,14 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     const random = getRandomString();
     const ext = getLanguageExtension(language);
     const extension =
-      mapLanguage(language, 'monaco') === 'typescript' &&
-      !ext?.endsWith('ts') &&
-      !ext?.endsWith('tsx')
+      mapLanguage(language) === 'typescript' && !ext?.endsWith('ts') && !ext?.endsWith('tsx')
         ? ext + '.tsx'
         : ext;
     modelUri = editorId.includes('.')
       ? `file:///${editorId}`
       : `file:///${editorId}.${random}.${extension}`;
     const oldModel = editor.getModel();
-    const model = getOrCreateModel(
-      value || '',
-      mapLanguage(language, 'monaco'),
-      monaco.Uri.parse(modelUri),
-    );
+    const model = getOrCreateModel(value || '', mapLanguage(language), monaco.Uri.parse(modelUri));
     editor.setModel(model);
     setTimeout(() => oldModel?.dispose(), 1000); // avoid race https://github.com/microsoft/monaco-editor/issues/1715
     updateListeners();
@@ -295,9 +295,9 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
   const editor = monaco.editor.create(container, {
     ...editorOptions,
-    language: mapLanguage(language, 'monaco'),
+    language: mapLanguage(language),
   });
-  setModel(editor, options.value, mapLanguage(language, 'monaco'));
+  setModel(editor, options.value, mapLanguage(language));
 
   if (editorId.includes('.')) {
     editors.push(editor);
@@ -507,7 +507,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
   const registerFormatter = (formatFn: FormatFn | undefined) => {
     if (!formatFn) return;
-    monaco.languages.registerDocumentFormattingEditProvider(mapLanguage(language, 'monaco'), {
+    monaco.languages.registerDocumentFormattingEditProvider(mapLanguage(language), {
       provideDocumentFormattingEdits: async (model) => {
         if (!model || model.isDisposed()) return [];
         const val = model.getValue() || '';
@@ -684,8 +684,8 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     const model = editor.getModel();
     if (
       !model ||
-      !addCloseLanguages.includes(mapLanguage(language, 'monaco')) ||
-      (mapLanguage(language, 'monaco') === 'typescript' && !hasJsx(language)) || // avoid autocompleting TS generics
+      !addCloseLanguages.includes(mapLanguage(language)) ||
+      (mapLanguage(language) === 'typescript' && !hasJsx(language)) || // avoid autocompleting TS generics
       editorOptions.autoClosingBrackets === 'never'
     ) {
       return;

From 7ce31d127ef65fdd132ac3ca32d9fe12a22cbe30 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 1 Mar 2026 23:26:25 +0200
Subject: [PATCH 140/143] add json5 and jsonc as separate languages

---
 docs/docs/languages/json5.mdx                 |  3 ++
 docs/docs/languages/jsonc.mdx                 |  3 ++
 src/livecodes/editor/codemirror/codemirror.ts |  5 +--
 .../editor/codemirror/editor-languages.ts     | 11 -----
 src/livecodes/languages/json/index.ts         |  2 +
 src/livecodes/languages/json/lang-json.ts     | 37 +++++++++--------
 src/livecodes/languages/json/lang-json5.ts    | 40 +++++++++++++++++++
 src/livecodes/languages/json/lang-jsonc.ts    | 20 ++++++++++
 src/livecodes/languages/languages.ts          |  4 +-
 src/sdk/models.ts                             |  3 ++
 10 files changed, 93 insertions(+), 35 deletions(-)
 create mode 100644 docs/docs/languages/json5.mdx
 create mode 100644 docs/docs/languages/jsonc.mdx
 delete mode 100644 src/livecodes/editor/codemirror/editor-languages.ts
 create mode 100644 src/livecodes/languages/json/lang-json5.ts
 create mode 100644 src/livecodes/languages/json/lang-jsonc.ts

diff --git a/docs/docs/languages/json5.mdx b/docs/docs/languages/json5.mdx
new file mode 100644
index 0000000000..27bf778a0c
--- /dev/null
+++ b/docs/docs/languages/json5.mdx
@@ -0,0 +1,3 @@
+# JSON5
+
+TODO ...
diff --git a/docs/docs/languages/jsonc.mdx b/docs/docs/languages/jsonc.mdx
new file mode 100644
index 0000000000..030ad2e69f
--- /dev/null
+++ b/docs/docs/languages/jsonc.mdx
@@ -0,0 +1,3 @@
+# JSONC
+
+TODO ...
diff --git a/src/livecodes/editor/codemirror/codemirror.ts b/src/livecodes/editor/codemirror/codemirror.ts
index 3211f2606a..02c5c22c57 100644
--- a/src/livecodes/editor/codemirror/codemirror.ts
+++ b/src/livecodes/editor/codemirror/codemirror.ts
@@ -46,7 +46,6 @@ import { ctrl, debounce, getRandomString } from '../../utils/utils';
 import { codeMirrorBaseUrl, comlinkBaseUrl } from '../../vendors';
 import { getEditorTheme } from '../themes';
 import { codemirrorThemes, customThemes } from './codemirror-themes';
-import { editorLanguages } from './editor-languages';
 
 // export type CodeiumEditor = Pick<CodeEditor, 'getLanguage' | 'getValue'> & {
 //   editorId: EditorOptions['editorId'];
@@ -65,9 +64,7 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
 
   const getLanguageSupport = async (lang: Language): Promise<LanguageSupport> => {
     const langSupport = getLanguageSpecs(lang)?.editorSupport?.codemirror?.languageSupport;
-    if (!langSupport) {
-      return editorLanguages[lang]?.() || editorLanguages.html?.() || [];
-    }
+    if (!langSupport) return [];
     const loadLanguage: () => Promise<LanguageSupport> =
       typeof langSupport === 'string'
         ? (await import(langSupport)).default
diff --git a/src/livecodes/editor/codemirror/editor-languages.ts b/src/livecodes/editor/codemirror/editor-languages.ts
deleted file mode 100644
index b921ceb36b..0000000000
--- a/src/livecodes/editor/codemirror/editor-languages.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/* eslint-disable import/no-unresolved */
-// @ts-ignore
-import type { LanguageSupport } from '@codemirror/language';
-// @ts-ignore
-import { json } from '@codemirror/lang-json';
-
-import type { Language } from '../../models';
-
-export const editorLanguages: Partial<{ [key in Language]: () => Promise<LanguageSupport> }> = {
-  json: async () => json(),
-};
diff --git a/src/livecodes/languages/json/index.ts b/src/livecodes/languages/json/index.ts
index 54315964c6..4904a7a48f 100644
--- a/src/livecodes/languages/json/index.ts
+++ b/src/livecodes/languages/json/index.ts
@@ -1 +1,3 @@
 export { json } from './lang-json';
+export { json5 } from './lang-json5';
+export { jsonc } from './lang-jsonc';
diff --git a/src/livecodes/languages/json/lang-json.ts b/src/livecodes/languages/json/lang-json.ts
index 355d9d84dd..77715f46d9 100644
--- a/src/livecodes/languages/json/lang-json.ts
+++ b/src/livecodes/languages/json/lang-json.ts
@@ -1,30 +1,29 @@
+import { codemirrorImports } from '../../editor/codemirror/utils';
 import type { LanguageSpecs } from '../../models';
-import { json5Url } from '../../vendors';
+import { parserPlugins } from '../prettier';
 
 export const json: LanguageSpecs = {
   name: 'json',
   title: 'JSON',
   info: false,
-  compiler: {
-    factory: () => {
-      let JSON5: { parse: (code: string) => any; stringify: (code: any) => string } | undefined;
-      return async (code, { options: { filename } }) => {
-        if (filename.endsWith('.json5') || filename.endsWith('.jsonc')) {
-          if (!JSON5) {
-            (self as any).importScripts(json5Url);
-            JSON5 = (self as any).JSON5;
-          }
-          try {
-            return JSON.stringify(JSON5?.parse(code) || JSON.parse(code), null, 2);
-          } catch {
-            return code;
-          }
-        }
-        return code;
-      };
+  formatter: {
+    prettier: {
+      name: 'json',
+      pluginUrls: [parserPlugins.babel, parserPlugins.estree],
     },
   },
-  extensions: ['json', 'json5', 'jsonc'],
+  compiler: {
+    factory: () => async (code) => code,
+  },
+  extensions: ['json'],
   editor: '',
+  editorSupport: {
+    codemirror: {
+      languageSupport: async () => {
+        const { json } = await import(codemirrorImports.json);
+        return json();
+      },
+    },
+  },
   multiFileSupport: true,
 };
diff --git a/src/livecodes/languages/json/lang-json5.ts b/src/livecodes/languages/json/lang-json5.ts
new file mode 100644
index 0000000000..6a5fb8df62
--- /dev/null
+++ b/src/livecodes/languages/json/lang-json5.ts
@@ -0,0 +1,40 @@
+import type { LanguageSpecs } from '../../models';
+import { json5Url, monacoLanguagesBaseUrl } from '../../vendors';
+import { parserPlugins } from '../prettier';
+
+export const json5: LanguageSpecs = {
+  name: 'json5',
+  title: 'JSON5',
+  info: false,
+  formatter: {
+    prettier: {
+      name: 'json5',
+      pluginUrls: [parserPlugins.babel, parserPlugins.estree],
+    },
+  },
+  compiler: {
+    factory: () => {
+      let JSON5: { parse: (code: string) => any; stringify: (code: any) => string } | undefined;
+      return async (code) => {
+        if (!JSON5) {
+          (self as any).importScripts(json5Url);
+          JSON5 = (self as any).JSON5;
+        }
+        try {
+          return JSON.stringify(JSON5?.parse(code) || JSON.parse(code), null, 2);
+        } catch {
+          return code;
+        }
+      };
+    },
+    compiledCodeLanguage: 'json',
+  },
+  extensions: ['json5'],
+  editor: '',
+  editorSupport: {
+    monaco: { languageSupport: monacoLanguagesBaseUrl + 'json5.js' },
+    codemirror: { language: 'json' },
+    codejar: { language: 'json' },
+  },
+  multiFileSupport: true,
+};
diff --git a/src/livecodes/languages/json/lang-jsonc.ts b/src/livecodes/languages/json/lang-jsonc.ts
new file mode 100644
index 0000000000..750959d8d5
--- /dev/null
+++ b/src/livecodes/languages/json/lang-jsonc.ts
@@ -0,0 +1,20 @@
+import type { LanguageSpecs } from '../../models';
+import { parserPlugins } from '../prettier';
+import { json5 } from './lang-json5';
+
+export const jsonc: LanguageSpecs = {
+  ...json5,
+  name: 'jsonc',
+  title: 'JSONC',
+  formatter: {
+    prettier: {
+      name: 'jsonc',
+      pluginUrls: [parserPlugins.babel, parserPlugins.estree],
+    },
+  },
+  extensions: ['jsonc'],
+  editorSupport: {
+    ...json5.editorSupport,
+    monaco: { language: 'json5' },
+  },
+};
diff --git a/src/livecodes/languages/languages.ts b/src/livecodes/languages/languages.ts
index a1ad902351..4a09cad9b3 100644
--- a/src/livecodes/languages/languages.ts
+++ b/src/livecodes/languages/languages.ts
@@ -33,7 +33,7 @@ import { imba } from './imba';
 import { java } from './java';
 import { javascript } from './javascript';
 import { jinja } from './jinja';
-import { json } from './json';
+import { json, json5, jsonc } from './json';
 import { jsx, tsx } from './jsx';
 import { julia } from './julia';
 import { less } from './less';
@@ -176,6 +176,8 @@ export const languages: LanguageSpecs[] = [
   blockly,
   text,
   json,
+  json5,
+  jsonc,
   yaml,
   binary,
   dotenv,
diff --git a/src/sdk/models.ts b/src/sdk/models.ts
index e45c2b3e5f..ca62ebb330 100644
--- a/src/sdk/models.ts
+++ b/src/sdk/models.ts
@@ -1437,6 +1437,9 @@ export type ParserName =
   | 'babel'
   | 'babel-ts'
   | 'babel-flow'
+  | 'json'
+  | 'json5'
+  | 'jsonc'
   | 'glimmer'
   | 'html'
   | 'markdown'

From e3af69c116ce31cfee4a692f5e5615dc0337ae9d Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 1 Mar 2026 23:31:04 +0200
Subject: [PATCH 141/143] fix

---
 src/livecodes/editor/monaco/monaco.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 795b868cb8..9ea9c29bdf 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -268,8 +268,6 @@ export const createEditor = async (options: EditorOptions): Promise<CodeEditor>
     return monaco.editor.createModel(value, lang, uri);
   };
 
-  await loadMonacoLanguage(language);
-
   let modelUri = '';
   const setModel = (
     editor: Monaco.editor.IStandaloneCodeEditor,

From 3c38cac1229c4ed5d66e01c02cc1d287a0c81417 Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 1 Mar 2026 23:45:39 +0200
Subject: [PATCH 142/143] fix oEmbed & meta tags description for multifile
 templates

---
 functions/utils.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/functions/utils.ts b/functions/utils.ts
index e2772f8fb4..e0c81d0860 100644
--- a/functions/utils.ts
+++ b/functions/utils.ts
@@ -72,7 +72,8 @@ export const getProjectInfo = async (url: URL): Promise<ProjectInfo> => {
   if (templateName) {
     return {
       title: templateName,
-      description: templateName + ' Template on LiveCodes',
+      description:
+        templateName + (templateName.includes('Template') ? '' : ' Template') + ' on LiveCodes',
     };
   }
   return {

From f006edfb1822b003819a56e6bd414a9e70eca1ef Mon Sep 17 00:00:00 2001
From: Hatem Hosny <hatemhosny@gmail.com>
Date: Sun, 1 Mar 2026 23:56:35 +0200
Subject: [PATCH 143/143] minor fix

---
 src/livecodes/languages/text/lang-text.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/livecodes/languages/text/lang-text.ts b/src/livecodes/languages/text/lang-text.ts
index c3736812e1..73ed05e8b9 100644
--- a/src/livecodes/languages/text/lang-text.ts
+++ b/src/livecodes/languages/text/lang-text.ts
@@ -10,4 +10,5 @@ export const text: LanguageSpecs = {
   extensions: ['txt', 'csv', 'tsv', 'plaintext'],
   editor: '',
   multiFileSupport: true,
+  editorSupport: { monaco: { language: 'plaintext' } },
 };