@pyreon/code 0.5.0

package/src/languages.ts

@@ -0,0 +1,77 @@
+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()),
+  typescript: () =>
+    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) =>
+      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()),
+  ruby: () => Promise.resolve([]),
+  shell: () => Promise.resolve([]),
+  plain: () => Promise.resolve([]),
+}
+
+// Cache loaded language extensions
+const loaded = new Map<EditorLanguage, Extension>()
+
+/**
+ * Load a language extension. Returns cached if already loaded.
+ * Language grammars are lazy-imported — zero cost until used.
+ *
+ * @example
+ * ```ts
+ * const ext = await loadLanguage('typescript')
+ * ```
+ */
+export async function loadLanguage(
+  language: EditorLanguage,
+): Promise<Extension> {
+  const cached = loaded.get(language)
+  if (cached) return cached
+
+  const loader = languageLoaders[language]
+  if (!loader) return []
+
+  try {
+    const ext = await loader()
+    loaded.set(language, ext)
+    return ext
+  } catch {
+    // Language package not installed — return empty extension
+    return []
+  }
+}
+
+/**
+ * Get available languages.
+ */
+export function getAvailableLanguages(): EditorLanguage[] {
+  return Object.keys(languageLoaders) as EditorLanguage[]
+}

package/src/minimap.ts

@@ -0,0 +1,160 @@
+import type { Extension } from '@codemirror/state'
+import { EditorView, ViewPlugin, type ViewUpdate } from '@codemirror/view'
+
+/**
+ * Canvas-based minimap extension for CodeMirror 6.
+ * Renders a scaled-down overview of the document on the right side.
+ */
+
+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)'
+
+function createMinimapCanvas(): HTMLCanvasElement {
+  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')
+  if (!ctx) return
+
+  const doc = view.state.doc
+  const totalLines = doc.lines
+  const height = canvas.clientHeight
+  canvas.height = height * 2 // retina
+
+  const isDark = view.dom.classList.contains('cm-dark')
+  const bg = isDark ? MINIMAP_BG : MINIMAP_BG_LIGHT
+  const textColor = isDark ? TEXT_COLOR : TEXT_COLOR_LIGHT
+
+  const scale = 2 // retina
+  ctx.setTransform(scale, 0, 0, scale, 0, 0)
+
+  // Background
+  ctx.fillStyle = bg
+  ctx.fillRect(0, 0, MINIMAP_WIDTH, height)
+
+  // Calculate visible range in minimap
+  const contentHeight = totalLines * LINE_HEIGHT
+  const scrollFraction =
+    contentHeight > height
+      ? view.scrollDOM.scrollTop /
+        (view.scrollDOM.scrollHeight - view.scrollDOM.clientHeight || 1)
+      : 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,
+  )
+
+  for (let i = startLine; i <= endLine; i++) {
+    const line = doc.line(i)
+    const y = (i - 1) * LINE_HEIGHT - offset
+    if (y < -LINE_HEIGHT || y > height) continue
+
+    const text = line.text
+    let x = 4
+    for (let j = 0; j < Math.min(text.length, 60); j++) {
+      if (text[j] !== ' ' && text[j] !== '\t') {
+        ctx.fillRect(x, y, CHAR_WIDTH, 1.5)
+      }
+      x += CHAR_WIDTH
+    }
+  }
+
+  // Viewport indicator
+  const viewportTop = view.scrollDOM.scrollTop
+  const viewportHeight = view.scrollDOM.clientHeight
+  const docHeight = view.scrollDOM.scrollHeight || 1
+
+  const vpY = (viewportTop / docHeight) * Math.min(contentHeight, height)
+  const vpH = (viewportHeight / docHeight) * Math.min(contentHeight, height)
+
+  ctx.fillStyle = VIEWPORT_COLOR
+  ctx.fillRect(0, vpY, MINIMAP_WIDTH, vpH)
+  ctx.strokeStyle = VIEWPORT_BORDER
+  ctx.lineWidth = 1
+  ctx.strokeRect(0.5, vpY + 0.5, MINIMAP_WIDTH - 1, vpH - 1)
+}
+
+/**
+ * CodeMirror 6 minimap extension.
+ * Renders a canvas-based code overview on the right side of the editor.
+ *
+ * @example
+ * ```ts
+ * import { minimapExtension } from '@pyreon/code'
+ * // Add to editor extensions
+ * ```
+ */
+export function minimapExtension(): Extension {
+  return [
+    ViewPlugin.fromClass(
+      class {
+        canvas: HTMLCanvasElement
+        view: EditorView
+        animFrame: number | null = null
+
+        constructor(view: EditorView) {
+          this.view = view
+          this.canvas = createMinimapCanvas()
+          view.dom.style.position = 'relative'
+          view.dom.appendChild(this.canvas)
+
+          // Click to scroll
+          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' })
+          })
+
+          this.render()
+        }
+
+        render() {
+          renderMinimap(this.canvas, this.view)
+        }
+
+        update(update: ViewUpdate) {
+          if (
+            update.docChanged ||
+            update.viewportChanged ||
+            update.geometryChanged
+          ) {
+            if (this.animFrame) cancelAnimationFrame(this.animFrame)
+            this.animFrame = requestAnimationFrame(() => this.render())
+          }
+        }
+
+        destroy() {
+          if (this.animFrame) cancelAnimationFrame(this.animFrame)
+          this.canvas.remove()
+        }
+      },
+    ),
+    // Add padding on the right for the minimap
+    EditorView.theme({
+      '.cm-scroller': {
+        paddingRight: `${MINIMAP_WIDTH + 8}px`,
+      },
+    }),
+  ]
+}

package/src/tabbed-editor.ts

@@ -0,0 +1,231 @@
+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.
+ *
+ * Wraps `createEditor()` with tab state. Switching tabs saves the current
+ * tab's content and restores the target tab's content/language.
+ *
+ * @param config - Tabbed editor configuration
+ * @returns A TabbedEditorInstance with tab management + underlying editor
+ *
+ * @example
+ * ```tsx
+ * const editor = createTabbedEditor({
+ *   tabs: [
+ *     { name: 'index.ts', language: 'typescript', value: 'const x = 1' },
+ *     { name: 'style.css', language: 'css', value: '.app { }' },
+ *   ],
+ *   theme: 'dark',
+ * })
+ *
+ * editor.activeTab()           // current tab
+ * editor.switchTab('style.css')
+ * editor.openTab({ name: 'utils.ts', language: 'typescript', value: '' })
+ * editor.closeTab('style.css')
+ *
+ * <TabbedEditor instance={editor} />
+ * ```
+ */
+export function createTabbedEditor(
+  config: TabbedEditorConfig = {},
+): TabbedEditorInstance {
+  const { tabs: initialTabs = [], theme, editorConfig = {} } = config
+
+  // Ensure all tabs have IDs
+  const tabsWithIds = initialTabs.map((t) => ({
+    ...t,
+    id: t.id ?? t.name,
+    closable: t.closable ?? true,
+  }))
+
+  // ── State ──────────────────────────────────────────────────────────────
+
+  const tabs = signal<Tab[]>(tabsWithIds)
+  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)
+  }
+
+  // ── Editor instance ────────────────────────────────────────────────────
+
+  const firstTab = tabsWithIds[0]
+  const editor = createEditor({
+    value: firstTab?.value ?? '',
+    language: (firstTab?.language ?? 'plain') as EditorLanguage,
+    theme,
+    ...editorConfig,
+    onChange: (value) => {
+      // Save content to cache and mark as modified
+      const id = activeTabId.peek()
+      if (id) {
+        contentCache.set(id, value)
+        const originalTab = tabsWithIds.find((t) => t.id === id)
+        if (originalTab && value !== originalTab.value) {
+          setModified(id, true)
+        }
+      }
+      editorConfig.onChange?.(value)
+    },
+  })
+
+  // ── Computed ───────────────────────────────────────────────────────────
+
+  const activeTab = computed(() => {
+    const id = activeTabId()
+    return tabs().find((t) => (t.id ?? t.name) === id) ?? null
+  })
+
+  // ── Tab operations ─────────────────────────────────────────────────────
+
+  function saveCurrentTab(): void {
+    const id = activeTabId.peek()
+    if (id) {
+      contentCache.set(id, editor.value.peek())
+    }
+  }
+
+  function switchTab(id: string): void {
+    const tab = tabs.peek().find((t) => (t.id ?? t.name) === id)
+    if (!tab) return
+
+    // Save current tab content
+    saveCurrentTab()
+
+    // Switch
+    activeTabId.set(id)
+
+    // Restore target tab content
+    const cached = contentCache.get(id)
+    editor.value.set(cached ?? tab.value)
+    editor.language.set((tab.language ?? 'plain') as EditorLanguage)
+  }
+
+  function openTab(tab: Tab): void {
+    const id = tab.id ?? tab.name
+    const existing = tabs.peek().find((t) => (t.id ?? t.name) === id)
+
+    if (existing) {
+      // Already open — just switch to it
+      switchTab(id)
+      return
+    }
+
+    const newTab = { ...tab, id, closable: tab.closable ?? true }
+    tabs.update((t) => [...t, newTab])
+    contentCache.set(id, tab.value)
+    switchTab(id)
+  }
+
+  function closeTab(id: string): void {
+    const currentTabs = tabs.peek()
+    const tabIndex = currentTabs.findIndex((t) => (t.id ?? t.name) === id)
+    if (tabIndex === -1) return
+
+    const tab = currentTabs[tabIndex]!
+    if (tab.closable === false) return
+
+    // Remove from state
+    tabs.update((t) => t.filter((item) => (item.id ?? item.name) !== id))
+    contentCache.delete(id)
+
+    // If closing the active tab, switch to adjacent
+    if (activeTabId.peek() === id) {
+      const remaining = tabs.peek()
+      if (remaining.length > 0) {
+        const nextIndex = Math.min(tabIndex, remaining.length - 1)
+        switchTab(remaining[nextIndex]!.id ?? remaining[nextIndex]!.name)
+      } else {
+        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)),
+    )
+  }
+
+  function setModified(id: string, modified: boolean): void {
+    tabs.update((t) =>
+      t.map((tab) =>
+        (tab.id ?? tab.name) === id ? { ...tab, modified } : tab,
+      ),
+    )
+  }
+
+  function moveTab(fromIndex: number, toIndex: number): void {
+    tabs.update((t) => {
+      const arr = [...t]
+      const [moved] = arr.splice(fromIndex, 1)
+      if (moved) arr.splice(toIndex, 0, moved)
+      return arr
+    })
+  }
+
+  function getTab(id: string): Tab | undefined {
+    return tabs.peek().find((t) => (t.id ?? t.name) === id)
+  }
+
+  function closeAll(): void {
+    const closable = tabs.peek().filter((t) => t.closable !== false)
+    for (const tab of closable) {
+      contentCache.delete(tab.id ?? tab.name)
+    }
+    tabs.update((t) => t.filter((tab) => tab.closable === false))
+    const remaining = tabs.peek()
+    if (remaining.length > 0) {
+      switchTab(remaining[0]!.id ?? remaining[0]!.name)
+    } else {
+      activeTabId.set('')
+      editor.value.set('')
+    }
+  }
+
+  function closeOthers(id: string): void {
+    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),
+    )
+    switchTab(id)
+  }
+
+  function dispose(): void {
+    contentCache.clear()
+    editor.dispose()
+  }
+
+  return {
+    editor,
+    tabs,
+    activeTab,
+    activeTabId,
+    openTab,
+    closeTab,
+    switchTab,
+    renameTab,
+    setModified,
+    moveTab,
+    getTab,
+    closeAll,
+    closeOthers,
+    dispose,
+  }
+}