@pyreon/code 0.10.0 → 0.11.0

package/src/editor.ts

@@ -3,7 +3,7 @@ import {
   closeBrackets,
   closeBracketsKeymap,
   completionKeymap,
-} from '@codemirror/autocomplete'
+} from "@codemirror/autocomplete"
 import {
   redo as cmRedo,
   undo as cmUndo,
@@ -11,7 +11,7 @@ import {
   history,
   historyKeymap,
   indentWithTab,
-} from '@codemirror/commands'
+} from "@codemirror/commands"
 import {
   bracketMatching,
   defaultHighlightStyle,
@@ -20,13 +20,10 @@ import {
   indentOnInput,
   indentUnit,
   syntaxHighlighting,
-} from '@codemirror/language'
-import {
-  setDiagnostics as cmSetDiagnostics,
-  lintKeymap,
-} from '@codemirror/lint'
-import { highlightSelectionMatches, searchKeymap } from '@codemirror/search'
-import { Compartment, EditorState, type Extension } from '@codemirror/state'
+} from "@codemirror/language"
+import { setDiagnostics as cmSetDiagnostics, lintKeymap } from "@codemirror/lint"
+import { highlightSelectionMatches, searchKeymap } from "@codemirror/search"
+import { Compartment, EditorState, type Extension } from "@codemirror/state"
 import {
   GutterMarker as CMGutterMarker,
   crosshairCursor,
@@ -44,17 +41,12 @@ import {
   rectangularSelection,
   ViewPlugin,
   type ViewUpdate,
-} from '@codemirror/view'
-import { computed, effect, signal } from '@pyreon/reactivity'
-import { loadLanguage } from './languages'
-import { minimapExtension } from './minimap'
-import { resolveTheme } from './themes'
-import type {
-  EditorConfig,
-  EditorInstance,
-  EditorLanguage,
-  EditorTheme,
-} from './types'
+} from "@codemirror/view"
+import { computed, effect, signal } from "@pyreon/reactivity"
+import { loadLanguage } from "./languages"
+import { minimapExtension } from "./minimap"
+import { resolveTheme } from "./themes"
+import type { EditorConfig, EditorInstance, EditorLanguage, EditorTheme } from "./types"
 
 /**
  * Create a reactive code editor instance.
@@ -82,9 +74,9 @@ import type {
  */
 export function createEditor(config: EditorConfig = {}): EditorInstance {
   const {
-    value: initialValue = '',
-    language: initialLanguage = 'plain',
-    theme: initialTheme = 'light',
+    value: initialValue = "",
+    language: initialLanguage = "plain",
+    theme: initialTheme = "light",
     lineNumbers: showLineNumbers = true,
     readOnly: initialReadOnly = false,
     foldGutter: showFoldGutter = true,
@@ -136,7 +128,7 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
   const selection = computed(() => {
     docVersion()
     const v = view.peek()
-    if (!v) return { from: 0, to: 0, text: '' }
+    if (!v) return { from: 0, to: 0, text: "" }
     const sel = v.state.selection.main
     return {
       from: sel.from,
@@ -148,7 +140,7 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
   const lineCount = computed(() => {
     docVersion()
     const v = view.peek()
-    return v ? v.state.doc.lines : initialValue.split('\n').length
+    return v ? v.state.doc.lines : initialValue.split("\n").length
   })
 
   // ── Line highlight support ──────────────────────────────────────────
@@ -175,9 +167,7 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
           }
         }
         return Decoration.set(
-          ranges
-            .sort((a, b) => a.from - b.from)
-            .map((d) => d.deco.range(d.from)),
+          ranges.sort((a, b) => a.from - b.from).map((d) => d.deco.range(d.from)),
         )
       }
 
@@ -192,10 +182,7 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
 
   // ── Gutter marker support ──────────────────────────────────────────
 
-  const gutterMarkers = new Map<
-    number,
-    { class?: string; text?: string; title?: string }
-  >()
+  const gutterMarkers = new Map<number, { class?: string; text?: string; title?: string }>()
 
   class CustomGutterMarker extends CMGutterMarker {
     markerText: string
@@ -204,31 +191,30 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
 
     constructor(opts: { class?: string; text?: string; title?: string }) {
       super()
-      this.markerText = opts.text ?? ''
-      this.markerTitle = opts.title ?? ''
-      this.markerClass = opts.class ?? ''
+      this.markerText = opts.text ?? ""
+      this.markerTitle = opts.title ?? ""
+      this.markerClass = opts.class ?? ""
     }
 
     override toDOM() {
-      const el = document.createElement('span')
+      const el = document.createElement("span")
       el.textContent = this.markerText
       el.title = this.markerTitle
       if (this.markerClass) el.className = this.markerClass
-      el.style.cssText =
-        'cursor: pointer; display: inline-block; width: 100%; text-align: center;'
+      el.style.cssText = "cursor: pointer; display: inline-block; width: 100%; text-align: center;"
       return el
     }
   }
 
   const gutterMarkerExtension = gutter({
-    class: 'pyreon-code-gutter-markers',
+    class: "pyreon-code-gutter-markers",
     lineMarker: (gutterView, line) => {
       const lineNo = gutterView.state.doc.lineAt(line.from).number
       const marker = gutterMarkers.get(lineNo)
       if (!marker) return null
       return new CustomGutterMarker(marker)
     },
-    initialSpacer: () => new CustomGutterMarker({ text: ' ' }),
+    initialSpacer: () => new CustomGutterMarker({ text: " " }),
   })
 
   // ── Build extensions ─────────────────────────────────────────────────
@@ -246,7 +232,7 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
       highlightSelectionMatches(),
       indentOnInput(),
       syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-      indentUnit.of(' '.repeat(configTabSize)),
+      indentUnit.of(" ".repeat(configTabSize)),
 
       // Keymaps
       keymap.of([
@@ -297,11 +283,10 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
     if (enableIndentGuides) {
       exts.push(
         EditorView.theme({
-          '.cm-line': {
-            backgroundImage:
-              'linear-gradient(to right, #e5e7eb 1px, transparent 1px)',
+          ".cm-line": {
+            backgroundImage: "linear-gradient(to right, #e5e7eb 1px, transparent 1px)",
             backgroundSize: `${configTabSize}ch 100%`,
-            backgroundPosition: '0 0',
+            backgroundPosition: "0 0",
           },
         }),
       )
@@ -419,9 +404,7 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
   function goToLine(line: number): void {
     const v = view.peek()
     if (!v) return
-    const lineInfo = v.state.doc.line(
-      Math.min(Math.max(1, line), v.state.doc.lines),
-    )
+    const lineInfo = v.state.doc.line(Math.min(Math.max(1, line), v.state.doc.lines))
     v.dispatch({
       selection: { anchor: lineInfo.from },
       scrollIntoView: true,
@@ -442,20 +425,20 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
   function foldAll(): void {
     const v = view.peek()
     if (!v) return
-    const { foldAll: foldAllCmd } = require('@codemirror/language')
+    const { foldAll: foldAllCmd } = require("@codemirror/language")
     foldAllCmd(v)
   }
 
   function unfoldAll(): void {
     const v = view.peek()
     if (!v) return
-    const { unfoldAll: unfoldAllCmd } = require('@codemirror/language')
+    const { unfoldAll: unfoldAllCmd } = require("@codemirror/language")
     unfoldAllCmd(v)
   }
 
   // ── Diagnostics ────────────────────────────────────────────────────
 
-  function setDiagnostics(diagnostics: import('./types').Diagnostic[]): void {
+  function setDiagnostics(diagnostics: import("./types").Diagnostic[]): void {
     const v = view.peek()
     if (!v) return
     v.dispatch(
@@ -464,7 +447,7 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
         diagnostics.map((d) => ({
           from: d.from,
           to: d.to,
-          severity: d.severity === 'hint' ? 'info' : d.severity,
+          severity: d.severity === "hint" ? "info" : d.severity,
           message: d.message,
           ...(d.source != null ? { source: d.source } : {}),
         })),
@@ -495,10 +478,7 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
 
   // ── Gutter markers ────────────────────────────────────────────────
 
-  function setGutterMarker(
-    line: number,
-    marker: import('./types').GutterMarker,
-  ): void {
+  function setGutterMarker(line: number, marker: import("./types").GutterMarker): void {
     gutterMarkers.set(line, marker)
     const v = view.peek()
     if (v) v.dispatch({ effects: [] })
@@ -514,10 +494,7 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
 
   const customKeybindings: Array<{ key: string; run: () => boolean }> = []
 
-  function addKeybinding(
-    key: string,
-    handler: () => boolean | undefined,
-  ): void {
+  function addKeybinding(key: string, handler: () => boolean | undefined): void {
     customKeybindings.push({
       key,
       run: () => {
@@ -536,14 +513,14 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
 
   function getLine(line: number): string {
     const v = view.peek()
-    if (!v) return ''
+    if (!v) return ""
     const clamped = Math.min(Math.max(1, line), v.state.doc.lines)
     return v.state.doc.line(clamped).text
   }
 
   function getWordAtCursor(): string {
     const v = view.peek()
-    if (!v) return ''
+    if (!v) return ""
     const pos = v.state.selection.main.head
     const line = v.state.doc.lineAt(pos)
     const col = pos - line.from
@@ -552,8 +529,8 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
     // Find word boundaries
     let start = col
     let end = col
-    while (start > 0 && /\w/.test(text[start - 1]!)) start--
-    while (end < text.length && /\w/.test(text[end]!)) end++
+    while (start > 0 && /\w/.test(text.charAt(start - 1))) start--
+    while (end < text.length && /\w/.test(text.charAt(end))) end++
 
     return text.slice(start, end)
   }
@@ -562,7 +539,7 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
     const v = view.peek()
     if (!v) return
     v.dispatch({
-      effects: EditorView.scrollIntoView(pos, { y: 'center' }),
+      effects: EditorView.scrollIntoView(pos, { y: "center" }),
     })
   }
 
@@ -573,8 +550,8 @@ export function createEditor(config: EditorConfig = {}): EditorInstance {
     if (!v) return
 
     // Use string concat to prevent Vite from statically analyzing these optional imports
-    const vimPkg = '@replit/codemirror-' + 'vim'
-    const emacsPkg = '@replit/codemirror-' + 'emacs'
+    const vimPkg = "@replit/codemirror-" + "vim"
+    const emacsPkg = "@replit/codemirror-" + "emacs"
 
     if (enableVim) {
       try {

package/src/index.ts

@@ -24,17 +24,17 @@
  */
 
 // Components
-export { CodeEditor } from './components/code-editor'
-export { DiffEditor } from './components/diff-editor'
-export { TabbedEditor } from './components/tabbed-editor'
+export { CodeEditor } from "./components/code-editor"
+export { DiffEditor } from "./components/diff-editor"
+export { TabbedEditor } from "./components/tabbed-editor"
 // Core
-export { createEditor } from './editor'
+export { createEditor } from "./editor"
 // Languages
-export { getAvailableLanguages, loadLanguage } from './languages'
+export { getAvailableLanguages, loadLanguage } from "./languages"
 // Minimap
-export { minimapExtension } from './minimap'
+export { minimapExtension } from "./minimap"
 // Themes
-export { darkTheme, lightTheme, resolveTheme } from './themes'
+export { darkTheme, lightTheme, resolveTheme } from "./themes"
 
 // Types
 export type {
@@ -49,4 +49,4 @@ export type {
   TabbedEditorConfig,
   TabbedEditorInstance,
   TabbedEditorProps,
-} from './types'
+} from "./types"

package/src/languages.ts

@@ -1,38 +1,32 @@
-import type { Extension } from '@codemirror/state'
-import type { EditorLanguage } from './types'
+import type { Extension } from "@codemirror/state"
+import type { EditorLanguage } from "./types"
 
 /**
  * Language extension loaders — lazy-loaded on demand.
  * Only the requested language is imported, keeping the initial bundle small.
  */
 const languageLoaders: Record<EditorLanguage, () => Promise<Extension>> = {
-  javascript: () =>
-    import('@codemirror/lang-javascript').then((m) => m.javascript()),
+  javascript: () => import("@codemirror/lang-javascript").then((m) => m.javascript()),
   typescript: () =>
-    import('@codemirror/lang-javascript').then((m) =>
-      m.javascript({ typescript: true }),
-    ),
-  jsx: () =>
-    import('@codemirror/lang-javascript').then((m) =>
-      m.javascript({ jsx: true }),
-    ),
+    import("@codemirror/lang-javascript").then((m) => m.javascript({ typescript: true })),
+  jsx: () => import("@codemirror/lang-javascript").then((m) => m.javascript({ jsx: true })),
   tsx: () =>
-    import('@codemirror/lang-javascript').then((m) =>
+    import("@codemirror/lang-javascript").then((m) =>
       m.javascript({ typescript: true, jsx: true }),
     ),
-  html: () => import('@codemirror/lang-html').then((m) => m.html()),
-  css: () => import('@codemirror/lang-css').then((m) => m.css()),
-  json: () => import('@codemirror/lang-json').then((m) => m.json()),
-  markdown: () => import('@codemirror/lang-markdown').then((m) => m.markdown()),
-  python: () => import('@codemirror/lang-python').then((m) => m.python()),
-  rust: () => import('@codemirror/lang-rust').then((m) => m.rust()),
-  sql: () => import('@codemirror/lang-sql').then((m) => m.sql()),
-  xml: () => import('@codemirror/lang-xml').then((m) => m.xml()),
-  yaml: () => import('@codemirror/lang-yaml').then((m) => m.yaml()),
-  cpp: () => import('@codemirror/lang-cpp').then((m) => m.cpp()),
-  java: () => import('@codemirror/lang-java').then((m) => m.java()),
-  go: () => import('@codemirror/lang-go').then((m) => m.go()),
-  php: () => import('@codemirror/lang-php').then((m) => m.php()),
+  html: () => import("@codemirror/lang-html").then((m) => m.html()),
+  css: () => import("@codemirror/lang-css").then((m) => m.css()),
+  json: () => import("@codemirror/lang-json").then((m) => m.json()),
+  markdown: () => import("@codemirror/lang-markdown").then((m) => m.markdown()),
+  python: () => import("@codemirror/lang-python").then((m) => m.python()),
+  rust: () => import("@codemirror/lang-rust").then((m) => m.rust()),
+  sql: () => import("@codemirror/lang-sql").then((m) => m.sql()),
+  xml: () => import("@codemirror/lang-xml").then((m) => m.xml()),
+  yaml: () => import("@codemirror/lang-yaml").then((m) => m.yaml()),
+  cpp: () => import("@codemirror/lang-cpp").then((m) => m.cpp()),
+  java: () => import("@codemirror/lang-java").then((m) => m.java()),
+  go: () => import("@codemirror/lang-go").then((m) => m.go()),
+  php: () => import("@codemirror/lang-php").then((m) => m.php()),
   ruby: () => Promise.resolve([]),
   shell: () => Promise.resolve([]),
   plain: () => Promise.resolve([]),
@@ -50,9 +44,7 @@ const loaded = new Map<EditorLanguage, Extension>()
  * const ext = await loadLanguage('typescript')
  * ```
  */
-export async function loadLanguage(
-  language: EditorLanguage,
-): Promise<Extension> {
+export async function loadLanguage(language: EditorLanguage): Promise<Extension> {
   const cached = loaded.get(language)
   if (cached) return cached
 

package/src/minimap.ts

@@ -1,5 +1,5 @@
-import type { Extension } from '@codemirror/state'
-import { EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view'
+import type { Extension } from "@codemirror/state"
+import { EditorView, ViewPlugin, type ViewUpdate } from "@codemirror/view"
 
 /**
  * Canvas-based minimap extension for CodeMirror 6.
@@ -9,22 +9,22 @@ import { EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view'
 const MINIMAP_WIDTH = 80
 const CHAR_WIDTH = 1.2
 const LINE_HEIGHT = 2.5
-const MINIMAP_BG = '#1e1e2e'
-const MINIMAP_BG_LIGHT = '#f8fafc'
-const TEXT_COLOR = '#585b70'
-const TEXT_COLOR_LIGHT = '#94a3b8'
-const VIEWPORT_COLOR = 'rgba(59, 130, 246, 0.15)'
-const VIEWPORT_BORDER = 'rgba(59, 130, 246, 0.4)'
+const MINIMAP_BG = "#1e1e2e"
+const MINIMAP_BG_LIGHT = "#f8fafc"
+const TEXT_COLOR = "#585b70"
+const TEXT_COLOR_LIGHT = "#94a3b8"
+const VIEWPORT_COLOR = "rgba(59, 130, 246, 0.15)"
+const VIEWPORT_BORDER = "rgba(59, 130, 246, 0.4)"
 
 function createMinimapCanvas(): HTMLCanvasElement {
-  const canvas = document.createElement('canvas')
+  const canvas = document.createElement("canvas")
   canvas.style.cssText = `position: absolute; right: 0; top: 0; width: ${MINIMAP_WIDTH}px; height: 100%; cursor: pointer; z-index: 5;`
   canvas.width = MINIMAP_WIDTH * 2 // retina
   return canvas
 }
 
 function renderMinimap(canvas: HTMLCanvasElement, view: EditorView): void {
-  const ctx = canvas.getContext('2d')
+  const ctx = canvas.getContext("2d")
   if (!ctx) return
 
   const doc = view.state.doc
@@ -32,7 +32,7 @@ function renderMinimap(canvas: HTMLCanvasElement, view: EditorView): void {
   const height = canvas.clientHeight
   canvas.height = height * 2 // retina
 
-  const isDark = view.dom.classList.contains('cm-dark')
+  const isDark = view.dom.classList.contains("cm-dark")
   const bg = isDark ? MINIMAP_BG : MINIMAP_BG_LIGHT
   const textColor = isDark ? TEXT_COLOR : TEXT_COLOR_LIGHT
 
@@ -47,19 +47,14 @@ function renderMinimap(canvas: HTMLCanvasElement, view: EditorView): void {
   const contentHeight = totalLines * LINE_HEIGHT
   const scrollFraction =
     contentHeight > height
-      ? view.scrollDOM.scrollTop /
-        (view.scrollDOM.scrollHeight - view.scrollDOM.clientHeight || 1)
+      ? view.scrollDOM.scrollTop / (view.scrollDOM.scrollHeight - view.scrollDOM.clientHeight || 1)
       : 0
-  const offset =
-    contentHeight > height ? scrollFraction * (contentHeight - height) : 0
+  const offset = contentHeight > height ? scrollFraction * (contentHeight - height) : 0
 
   // Render text lines
   ctx.fillStyle = textColor
   const startLine = Math.max(1, Math.floor(offset / LINE_HEIGHT))
-  const endLine = Math.min(
-    totalLines,
-    startLine + Math.ceil(height / LINE_HEIGHT) + 1,
-  )
+  const endLine = Math.min(totalLines, startLine + Math.ceil(height / LINE_HEIGHT) + 1)
 
   for (let i = startLine; i <= endLine; i++) {
     const line = doc.line(i)
@@ -69,7 +64,7 @@ function renderMinimap(canvas: HTMLCanvasElement, view: EditorView): void {
     const text = line.text
     let x = 4
     for (let j = 0; j < Math.min(text.length, 60); j++) {
-      if (text[j] !== ' ' && text[j] !== '\t') {
+      if (text[j] !== " " && text[j] !== "\t") {
         ctx.fillRect(x, y, CHAR_WIDTH, 1.5)
       }
       x += CHAR_WIDTH
@@ -112,18 +107,17 @@ export function minimapExtension(): Extension {
         constructor(view: EditorView) {
           this.view = view
           this.canvas = createMinimapCanvas()
-          view.dom.style.position = 'relative'
+          view.dom.style.position = "relative"
           view.dom.appendChild(this.canvas)
 
           // Click to scroll
-          this.canvas.addEventListener('click', (e) => {
+          this.canvas.addEventListener("click", (e) => {
             const rect = this.canvas.getBoundingClientRect()
             const clickY = e.clientY - rect.top
             const fraction = clickY / rect.height
             const scrollTarget =
-              fraction *
-              (view.scrollDOM.scrollHeight - view.scrollDOM.clientHeight)
-            view.scrollDOM.scrollTo({ top: scrollTarget, behavior: 'smooth' })
+              fraction * (view.scrollDOM.scrollHeight - view.scrollDOM.clientHeight)
+            view.scrollDOM.scrollTo({ top: scrollTarget, behavior: "smooth" })
           })
 
           this.render()
@@ -134,11 +128,7 @@ export function minimapExtension(): Extension {
         }
 
         update(update: ViewUpdate) {
-          if (
-            update.docChanged ||
-            update.viewportChanged ||
-            update.geometryChanged
-          ) {
+          if (update.docChanged || update.viewportChanged || update.geometryChanged) {
             if (this.animFrame) cancelAnimationFrame(this.animFrame)
             this.animFrame = requestAnimationFrame(() => this.render())
           }
@@ -152,7 +142,7 @@ export function minimapExtension(): Extension {
     ),
     // Add padding on the right for the minimap
     EditorView.theme({
-      '.cm-scroller': {
+      ".cm-scroller": {
         paddingRight: `${MINIMAP_WIDTH + 8}px`,
       },
     }),

package/src/tabbed-editor.ts

@@ -1,11 +1,6 @@
-import { computed, signal } from '@pyreon/reactivity'
-import { createEditor } from './editor'
-import type {
-  EditorLanguage,
-  Tab,
-  TabbedEditorConfig,
-  TabbedEditorInstance,
-} from './types'
+import { computed, signal } from "@pyreon/reactivity"
+import { createEditor } from "./editor"
+import type { EditorLanguage, Tab, TabbedEditorConfig, TabbedEditorInstance } from "./types"
 
 /**
  * Create a tabbed code editor — multiple files with tab management.
@@ -34,9 +29,7 @@ import type {
  * <TabbedEditor instance={editor} />
  * ```
  */
-export function createTabbedEditor(
-  config: TabbedEditorConfig = {},
-): TabbedEditorInstance {
+export function createTabbedEditor(config: TabbedEditorConfig = {}): TabbedEditorInstance {
   const { tabs: initialTabs = [], theme, editorConfig = {} } = config
 
   // Ensure all tabs have IDs
@@ -49,12 +42,13 @@ export function createTabbedEditor(
   // ── State ──────────────────────────────────────────────────────────────
 
   const tabs = signal<Tab[]>(tabsWithIds)
-  const activeTabId = signal(tabsWithIds[0]?.id ?? '')
+  const activeTabId = signal(tabsWithIds[0]?.id ?? "")
 
   // Content cache — stores each tab's current content
   const contentCache = new Map<string, string>()
   for (const tab of tabsWithIds) {
-    contentCache.set(tab.id!, tab.value)
+    const tabId = tab.id ?? tab.name
+    contentCache.set(tabId, tab.value)
   }
 
   // ── Editor instance ────────────────────────────────────────────────────
@@ -65,8 +59,8 @@ export function createTabbedEditor(
     Object.entries(editorConfig).filter(([_, v]) => v !== undefined),
   )
   const editor = createEditor({
-    value: firstTab?.value ?? '',
-    language: (firstTab?.language ?? 'plain') as EditorLanguage,
+    value: firstTab?.value ?? "",
+    language: (firstTab?.language ?? "plain") as EditorLanguage,
     ...(theme != null ? { theme } : {}),
     ...filteredConfig,
     onChange: (value) => {
@@ -112,7 +106,7 @@ export function createTabbedEditor(
     // Restore target tab content
     const cached = contentCache.get(id)
     editor.value.set(cached ?? tab.value)
-    editor.language.set((tab.language ?? 'plain') as EditorLanguage)
+    editor.language.set((tab.language ?? "plain") as EditorLanguage)
   }
 
   function openTab(tab: Tab): void {
@@ -136,8 +130,8 @@ export function createTabbedEditor(
     const tabIndex = currentTabs.findIndex((t) => (t.id ?? t.name) === id)
     if (tabIndex === -1) return
 
-    const tab = currentTabs[tabIndex]!
-    if (tab.closable === false) return
+    const tab = currentTabs[tabIndex]
+    if (!tab || tab.closable === false) return
 
     // Remove from state
     tabs.update((t) => t.filter((item) => (item.id ?? item.name) !== id))
@@ -148,26 +142,21 @@ export function createTabbedEditor(
       const remaining = tabs.peek()
       if (remaining.length > 0) {
         const nextIndex = Math.min(tabIndex, remaining.length - 1)
-        switchTab(remaining[nextIndex]!.id ?? remaining[nextIndex]!.name)
+        const nextTab = remaining[nextIndex]
+        if (nextTab) switchTab(nextTab.id ?? nextTab.name)
       } else {
-        activeTabId.set('')
-        editor.value.set('')
+        activeTabId.set("")
+        editor.value.set("")
       }
     }
   }
 
   function renameTab(id: string, name: string): void {
-    tabs.update((t) =>
-      t.map((tab) => ((tab.id ?? tab.name) === id ? { ...tab, name } : tab)),
-    )
+    tabs.update((t) => t.map((tab) => ((tab.id ?? tab.name) === id ? { ...tab, name } : tab)))
   }
 
   function setModified(id: string, modified: boolean): void {
-    tabs.update((t) =>
-      t.map((tab) =>
-        (tab.id ?? tab.name) === id ? { ...tab, modified } : tab,
-      ),
-    )
+    tabs.update((t) => t.map((tab) => ((tab.id ?? tab.name) === id ? { ...tab, modified } : tab)))
   }
 
   function moveTab(fromIndex: number, toIndex: number): void {
@@ -191,23 +180,20 @@ export function createTabbedEditor(
     tabs.update((t) => t.filter((tab) => tab.closable === false))
     const remaining = tabs.peek()
     if (remaining.length > 0) {
-      switchTab(remaining[0]!.id ?? remaining[0]!.name)
+      const first = remaining[0]
+      if (first) switchTab(first.id ?? first.name)
     } else {
-      activeTabId.set('')
-      editor.value.set('')
+      activeTabId.set("")
+      editor.value.set("")
     }
   }
 
   function closeOthers(id: string): void {
-    const toClose = tabs
-      .peek()
-      .filter((t) => (t.id ?? t.name) !== id && t.closable !== false)
+    const toClose = tabs.peek().filter((t) => (t.id ?? t.name) !== id && t.closable !== false)
     for (const tab of toClose) {
       contentCache.delete(tab.id ?? tab.name)
     }
-    tabs.update((t) =>
-      t.filter((tab) => (tab.id ?? tab.name) === id || tab.closable === false),
-    )
+    tabs.update((t) => t.filter((tab) => (tab.id ?? tab.name) === id || tab.closable === false))
     switchTab(id)
   }