@ugoku/core 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 David Skewis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,32 @@
 {
   "name": "@ugoku/core",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ugokujs/ugoku.git",
+    "directory": "packages/core"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./edit": "./src/edit/editor.ts",
+    "./ts": "./src/ts/strip.ts",
+    "./styles.css": "./src/output-panel/styles.css"
+  },
+  "dependencies": {
+    "shiki": "^4.5.0",
+    "sucrase": "^3.35.1"
+  },
+  "devDependencies": {
+    "esbuild": "^0.24.0"
+  },
+  "scripts": {
+    "build:edit-chunk": "node scripts/build-edit-chunk.mjs",
+    "build:ts-chunk": "node scripts/build-ts-chunk.mjs"
+  }
 }

package/scripts/build-edit-chunk.mjs

@@ -0,0 +1,12 @@
+import { build } from 'esbuild';
+
+await build({
+  entryPoints: ['src/edit/standalone-entry.ts'],
+  bundle: true,
+  format: 'esm',
+  platform: 'browser',
+  minify: true,
+  outfile: 'dist/edit-standalone.js',
+});
+
+console.log('built dist/edit-standalone.js');

package/scripts/build-ts-chunk.mjs

@@ -0,0 +1,12 @@
+import { build } from 'esbuild';
+
+await build({
+  entryPoints: ['src/ts/strip.ts'],
+  bundle: true,
+  format: 'esm',
+  platform: 'browser',
+  minify: true,
+  outfile: 'dist/ts-standalone.js',
+});
+
+console.log('built dist/ts-standalone.js');

package/src/css.d.ts

@@ -0,0 +1,5 @@
+declare module '*.css';
+declare module '*.css?url' {
+  const url: string;
+  export default url;
+}

package/src/edit/editor.browser.test.ts

@@ -0,0 +1,52 @@
+import { expect, test } from 'vitest';
+import { highlightInto } from './editor';
+
+function createPre(opts: { lang: string; theme?: string; themeLight?: string; themeDark?: string }): HTMLElement {
+  const pre = document.createElement('pre');
+  pre.dataset.ugokuLang = opts.lang;
+  if (opts.theme) pre.dataset.ugokuTheme = opts.theme;
+  if (opts.themeLight) pre.dataset.ugokuThemeLight = opts.themeLight;
+  if (opts.themeDark) pre.dataset.ugokuThemeDark = opts.themeDark;
+  const code = document.createElement('code');
+  code.textContent = 'placeholder';
+  pre.appendChild(code);
+  document.body.appendChild(pre);
+  return pre;
+}
+
+test('highlightInto re-highlights a single-theme block', async () => {
+  const pre = createPre({ lang: 'javascript', theme: 'github-light' });
+
+  await highlightInto(pre, 'let x = 1;');
+
+  expect(pre.className).toContain('shiki');
+  expect(pre.querySelector('code')?.innerHTML).toContain('span');
+
+  pre.remove();
+});
+
+test('highlightInto re-highlights a dual-theme block', async () => {
+  const pre = createPre({ lang: 'typescript', themeLight: 'github-light', themeDark: 'github-dark' });
+
+  await highlightInto(pre, 'let x: number = 1;');
+
+  expect(pre.querySelector('code')?.innerHTML).toContain('--shiki-dark');
+
+  pre.remove();
+});
+
+test('highlightInto rejects when the lang is unsupported, leaving the pre untouched', async () => {
+  const pre = createPre({ lang: 'not-a-real-lang', theme: 'github-light' });
+  const before = pre.querySelector('code')!.innerHTML;
+
+  await expect(highlightInto(pre, 'x')).rejects.toThrow();
+  expect(pre.querySelector('code')?.innerHTML).toBe(before);
+
+  pre.remove();
+});
+
+test('highlightInto is a no-op when no theme attributes are present', async () => {
+  const pre = createPre({ lang: 'javascript' });
+  await expect(highlightInto(pre, 'let x = 1;')).resolves.toBeUndefined();
+  pre.remove();
+});

package/src/edit/editor.ts

@@ -0,0 +1,29 @@
+import { ensureLoaded } from './highlighter-cache.ts';
+import { spliceHighlightedHtml } from './splice.ts';
+
+export async function highlightInto(pre: HTMLElement, code: string): Promise<void> {
+  const lang = pre.dataset.ugokuLang ?? '';
+  const singleTheme = pre.dataset.ugokuTheme;
+  const lightTheme = pre.dataset.ugokuThemeLight;
+  const darkTheme = pre.dataset.ugokuThemeDark;
+
+  const themeNames = singleTheme ? [singleTheme] : [lightTheme, darkTheme].filter((t): t is string => !!t);
+  if (themeNames.length === 0) return;
+
+  const highlighter = await ensureLoaded(lang, themeNames);
+
+  // defaultColor: false matches VitePress's own shiki output: spans carry only
+  // --shiki-light/--shiki-dark custom properties, no baseline inline `color`.
+  // VitePress's CSS (.dark .vp-code span { color: var(--shiki-dark) }) has no
+  // !important, so a plain inline `color` (shiki's default) would always win
+  // and the block would stay stuck on the light theme after any rehighlight.
+  const html = singleTheme
+    ? highlighter.codeToHtml(code, { lang, theme: singleTheme })
+    : highlighter.codeToHtml(code, {
+        lang,
+        themes: { light: lightTheme!, dark: darkTheme! },
+        defaultColor: false,
+      });
+
+  spliceHighlightedHtml(pre, html);
+}

package/src/edit/highlighter-cache.test.ts

@@ -0,0 +1,31 @@
+import { expect, test } from 'vitest';
+import { ensureLoaded } from './highlighter-cache';
+
+test('ensureLoaded loads a supported language and theme and returns a usable highlighter', async () => {
+  const highlighter = await ensureLoaded('javascript', ['github-light']);
+  const html = highlighter.codeToHtml('let x = 1;', { lang: 'javascript', theme: 'github-light' });
+  expect(html).toContain('<pre');
+  expect(html).toContain('<code>');
+});
+
+test('ensureLoaded is idempotent for a language/theme already loaded', async () => {
+  await ensureLoaded('javascript', ['github-light']);
+  await expect(ensureLoaded('javascript', ['github-light'])).resolves.toBeDefined();
+});
+
+test('ensureLoaded rejects an unsupported language', async () => {
+  await expect(ensureLoaded('not-a-real-lang', ['github-light'])).rejects.toThrow();
+});
+
+test('ensureLoaded rejects an unsupported theme', async () => {
+  await expect(ensureLoaded('javascript', ['not-a-real-theme'])).rejects.toThrow();
+});
+
+test('ensureLoaded loads multiple themes for a dual-theme block', async () => {
+  const highlighter = await ensureLoaded('typescript', ['github-light', 'github-dark']);
+  const html = highlighter.codeToHtml('let x: number = 1;', {
+    lang: 'typescript',
+    themes: { light: 'github-light', dark: 'github-dark' },
+  });
+  expect(html).toContain('--shiki-dark');
+});

package/src/edit/highlighter-cache.ts

@@ -0,0 +1,39 @@
+import { createHighlighterCore } from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+import { bundledLanguages } from 'shiki/langs';
+import { bundledThemes } from 'shiki/themes';
+import type { HighlighterCore } from 'shiki/core';
+
+let highlighterPromise: Promise<HighlighterCore> | null = null;
+
+function getHighlighter(): Promise<HighlighterCore> {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighterCore({
+      engine: createJavaScriptRegexEngine(),
+    });
+  }
+  return highlighterPromise;
+}
+
+export async function ensureLoaded(lang: string, themeNames: string[]): Promise<HighlighterCore> {
+  if (!(lang in bundledLanguages)) {
+    throw new Error(`ugoku: unsupported language "${lang}" for live re-highlighting`);
+  }
+
+  const highlighter = await getHighlighter();
+
+  if (!highlighter.getLoadedLanguages().includes(lang)) {
+    await highlighter.loadLanguage(bundledLanguages[lang as keyof typeof bundledLanguages]());
+  }
+
+  for (const theme of themeNames) {
+    if (!(theme in bundledThemes)) {
+      throw new Error(`ugoku: unsupported theme "${theme}" for live re-highlighting`);
+    }
+    if (!highlighter.getLoadedThemes().includes(theme)) {
+      await highlighter.loadTheme(bundledThemes[theme as keyof typeof bundledThemes]());
+    }
+  }
+
+  return highlighter;
+}

package/src/edit/overlay.browser.test.ts

@@ -0,0 +1,78 @@
+import { expect, test } from 'vitest';
+import { createOverlay, syncOverlayFallbacks } from './overlay';
+
+function createPre(): HTMLElement {
+  const pre = document.createElement('pre');
+  const code = document.createElement('code');
+  code.textContent = 'let x = 1;';
+  pre.appendChild(code);
+  document.body.appendChild(pre);
+  return pre;
+}
+
+test('createOverlay appends a textarea with the overlay class as a child of pre', () => {
+  const pre = createPre();
+  const overlay = createOverlay(pre);
+
+  expect(overlay.tagName).toBe('TEXTAREA');
+  expect(overlay.className).toBe('ugoku-edit-overlay');
+  expect(overlay.parentElement).toBe(pre);
+
+  pre.remove();
+});
+
+test('createOverlay disables spellcheck and native autocomplete', () => {
+  const pre = createPre();
+  const overlay = createOverlay(pre);
+
+  expect(overlay.spellcheck).toBe(false);
+  expect(overlay.getAttribute('autocomplete')).toBe('off');
+
+  pre.remove();
+});
+
+test('syncOverlayFallbacks copies the real rendered font metrics and colors from pre/code onto the overlay as CSS custom properties', () => {
+  const pre = document.createElement('pre');
+  pre.style.backgroundColor = 'rgb(36, 41, 46)';
+  pre.style.color = 'rgb(225, 228, 232)';
+
+  const code = document.createElement('code');
+  code.style.fontFamily = 'Menlo, monospace';
+  code.style.fontSize = '13px';
+  code.style.lineHeight = '20px';
+  code.textContent = 'let x = 1;';
+  pre.appendChild(code);
+  document.body.appendChild(pre);
+
+  const overlay = createOverlay(pre);
+  syncOverlayFallbacks(pre, overlay);
+
+  expect(overlay.style.getPropertyValue('--ugoku-color-edit-bg')).toBe('rgb(36, 41, 46)');
+  expect(overlay.style.getPropertyValue('--ugoku-color-edit-text')).toBe('rgb(225, 228, 232)');
+  expect(overlay.style.getPropertyValue('--ugoku-font-edit-family')).toBe('Menlo, monospace');
+  expect(overlay.style.getPropertyValue('--ugoku-font-edit-size')).toBe('13px');
+  expect(overlay.style.getPropertyValue('--ugoku-font-edit-line-height')).toBe('20px');
+
+  pre.remove();
+});
+
+test("syncOverlayFallbacks sums pre's and code's real padding onto the overlay, so edit mode doesn't shift text that a host (e.g. VitePress) splits padding for between the two elements", () => {
+  const pre = document.createElement('pre');
+  pre.style.padding = '20px 0px';
+
+  const code = document.createElement('code');
+  code.style.padding = '0px 24px';
+  code.textContent = 'let x = 1;';
+  pre.appendChild(code);
+  document.body.appendChild(pre);
+
+  const overlay = createOverlay(pre);
+  syncOverlayFallbacks(pre, overlay);
+
+  expect(overlay.style.getPropertyValue('--ugoku-padding-edit-top')).toBe('20px');
+  expect(overlay.style.getPropertyValue('--ugoku-padding-edit-right')).toBe('24px');
+  expect(overlay.style.getPropertyValue('--ugoku-padding-edit-bottom')).toBe('20px');
+  expect(overlay.style.getPropertyValue('--ugoku-padding-edit-left')).toBe('24px');
+
+  pre.remove();
+});

package/src/edit/overlay.ts

@@ -0,0 +1,34 @@
+export function createOverlay(pre: HTMLElement): HTMLTextAreaElement {
+  const textarea = document.createElement('textarea');
+  textarea.className = 'ugoku-edit-overlay';
+  textarea.spellcheck = false;
+  textarea.setAttribute('autocomplete', 'off');
+  textarea.setAttribute('autocapitalize', 'off');
+  pre.appendChild(textarea);
+  return textarea;
+}
+
+export function syncOverlayFallbacks(pre: HTMLElement, overlay: HTMLTextAreaElement): void {
+  const codeEl = pre.querySelector('code') ?? pre;
+  const codeStyle = getComputedStyle(codeEl);
+  overlay.style.setProperty('--ugoku-font-edit-family', codeStyle.fontFamily);
+  overlay.style.setProperty('--ugoku-font-edit-size', codeStyle.fontSize);
+  overlay.style.setProperty('--ugoku-font-edit-line-height', codeStyle.lineHeight);
+
+  const preStyle = getComputedStyle(pre);
+  overlay.style.setProperty('--ugoku-color-edit-bg', preStyle.backgroundColor);
+  overlay.style.setProperty('--ugoku-color-edit-text', preStyle.color);
+
+  // Some hosts (e.g. VitePress) split a code block's padding between <pre>
+  // and <code> rather than putting it all on one element. Summing both
+  // sides here reproduces the real text inset regardless of how a host
+  // divides it, instead of guessing a single fixed value.
+  const sumPx = (a: string, b: string) => `${parseFloat(a) + parseFloat(b)}px`;
+  overlay.style.setProperty('--ugoku-padding-edit-top', sumPx(preStyle.paddingTop, codeStyle.paddingTop));
+  overlay.style.setProperty('--ugoku-padding-edit-right', sumPx(preStyle.paddingRight, codeStyle.paddingRight));
+  overlay.style.setProperty(
+    '--ugoku-padding-edit-bottom',
+    sumPx(preStyle.paddingBottom, codeStyle.paddingBottom),
+  );
+  overlay.style.setProperty('--ugoku-padding-edit-left', sumPx(preStyle.paddingLeft, codeStyle.paddingLeft));
+}

package/src/edit/persistence.test.ts

@@ -0,0 +1,43 @@
+import { expect, test, vi } from 'vitest';
+import { loadSavedEdit, saveEdit, clearSavedEdit } from './persistence';
+
+test('saveEdit then loadSavedEdit round-trips a value', () => {
+  saveEdit('hash-a', 'let x = 1;');
+  expect(loadSavedEdit('hash-a')).toBe('let x = 1;');
+  clearSavedEdit('hash-a');
+});
+
+test('loadSavedEdit returns null when nothing is saved', () => {
+  expect(loadSavedEdit('never-saved-hash')).toBeNull();
+});
+
+test('clearSavedEdit removes the saved value', () => {
+  saveEdit('hash-b', 'console.log(1)');
+  clearSavedEdit('hash-b');
+  expect(loadSavedEdit('hash-b')).toBeNull();
+});
+
+test('different hashes do not collide', () => {
+  saveEdit('hash-c', 'one');
+  saveEdit('hash-d', 'two');
+  expect(loadSavedEdit('hash-c')).toBe('one');
+  expect(loadSavedEdit('hash-d')).toBe('two');
+  clearSavedEdit('hash-c');
+  clearSavedEdit('hash-d');
+});
+
+test('saveEdit does not throw when localStorage.setItem throws', () => {
+  const spy = vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+    throw new Error('quota exceeded');
+  });
+  expect(() => saveEdit('hash-e', 'x')).not.toThrow();
+  spy.mockRestore();
+});
+
+test('loadSavedEdit returns null when localStorage.getItem throws', () => {
+  const spy = vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+    throw new Error('disabled');
+  });
+  expect(loadSavedEdit('hash-f')).toBeNull();
+  spy.mockRestore();
+});

package/src/edit/persistence.ts

@@ -0,0 +1,26 @@
+const PREFIX = 'ugoku:edit:';
+
+export function loadSavedEdit(hash: string): string | null {
+  try {
+    return localStorage.getItem(PREFIX + hash);
+  } catch {
+    return null;
+  }
+}
+
+export function saveEdit(hash: string, value: string): void {
+  try {
+    localStorage.setItem(PREFIX + hash, value);
+  } catch {
+    // Private browsing, quota exceeded, or storage disabled — degrade to
+    // in-memory-only editing for this page view.
+  }
+}
+
+export function clearSavedEdit(hash: string): void {
+  try {
+    localStorage.removeItem(PREFIX + hash);
+  } catch {
+    // See saveEdit.
+  }
+}

package/src/edit/splice.browser.test.ts

@@ -0,0 +1,63 @@
+import { expect, test } from 'vitest';
+import { spliceHighlightedHtml } from './splice';
+
+function createPre(): HTMLElement {
+  const pre = document.createElement('pre');
+  pre.className = 'shiki original-theme';
+  pre.setAttribute('style', 'background-color:#fff');
+  pre.dataset.ugokuMode = 'run-edit';
+  const code = document.createElement('code');
+  code.innerHTML = '<span class="line">original</span>';
+  pre.appendChild(code);
+  document.body.appendChild(pre);
+  return pre;
+}
+
+test('spliceHighlightedHtml unions classes (preserving the pre\'s own) and replaces style and code innerHTML', () => {
+  const pre = createPre();
+  const freshHtml =
+    '<pre class="shiki new-theme" style="background-color:#000"><code><span class="line">updated</span></code></pre>';
+
+  spliceHighlightedHtml(pre, freshHtml);
+
+  // "original-theme" simulates a host-added class (e.g. VitePress's `vp-code`)
+  // that shiki's raw rehighlight output never knows about — it must survive.
+  expect(pre.className).toBe('shiki original-theme new-theme');
+  expect(pre.getAttribute('style')).toBe('background-color:#000');
+  expect(pre.querySelector('code')?.innerHTML).toBe('<span class="line">updated</span>');
+
+  pre.remove();
+});
+
+test('spliceHighlightedHtml preserves data-ugoku-* attributes', () => {
+  const pre = createPre();
+  const freshHtml = '<pre class="shiki new-theme"><code><span class="line">updated</span></code></pre>';
+
+  spliceHighlightedHtml(pre, freshHtml);
+
+  expect(pre.dataset.ugokuMode).toBe('run-edit');
+
+  pre.remove();
+});
+
+test('spliceHighlightedHtml removes the style attribute when the fresh markup has none', () => {
+  const pre = createPre();
+  const freshHtml = '<pre class="shiki new-theme"><code><span class="line">updated</span></code></pre>';
+
+  spliceHighlightedHtml(pre, freshHtml);
+
+  expect(pre.hasAttribute('style')).toBe(false);
+
+  pre.remove();
+});
+
+test('spliceHighlightedHtml is a no-op when the fresh markup has no code element', () => {
+  const pre = createPre();
+  const originalInnerHTML = pre.querySelector('code')!.innerHTML;
+
+  spliceHighlightedHtml(pre, '<div>not a pre/code structure</div>');
+
+  expect(pre.querySelector('code')?.innerHTML).toBe(originalInnerHTML);
+
+  pre.remove();
+});

package/src/edit/splice.ts

@@ -0,0 +1,27 @@
+export function spliceHighlightedHtml(pre: HTMLElement, freshHtml: string): void {
+  const container = document.createElement('div');
+  container.innerHTML = freshHtml;
+  const freshPre = container.firstElementChild as HTMLElement | null;
+  const freshCode = freshPre?.querySelector('code');
+  const codeEl = pre.querySelector('code');
+  if (!freshPre || !freshCode || !codeEl) return;
+
+  // Union rather than replace: hosts (e.g. VitePress's `vp-code`) add classes
+  // of their own to the build-time <pre> that shiki's raw output doesn't know
+  // about. Dropping them here can break host CSS that depends on them (e.g.
+  // VitePress's dark-mode span-color rule is scoped to `.vp-code span`).
+  const mergedClasses = new Set(pre.className.split(/\s+/).filter(Boolean));
+  freshPre.className
+    .split(/\s+/)
+    .filter(Boolean)
+    .forEach((c) => mergedClasses.add(c));
+  pre.className = Array.from(mergedClasses).join(' ');
+  const style = freshPre.getAttribute('style');
+  if (style) {
+    pre.setAttribute('style', style);
+  } else {
+    pre.removeAttribute('style');
+  }
+
+  codeEl.innerHTML = freshCode.innerHTML;
+}

package/src/edit/standalone-entry.browser.test.ts

@@ -0,0 +1,35 @@
+import { expect, test } from 'vitest';
+import { highlightInto } from './standalone-entry';
+
+function createPre(lang: string): HTMLElement {
+  const pre = document.createElement('pre');
+  pre.dataset.ugokuLang = lang;
+  pre.dataset.ugokuTheme = 'github-light';
+  const code = document.createElement('code');
+  code.textContent = 'placeholder';
+  pre.appendChild(code);
+  document.body.appendChild(pre);
+  return pre;
+}
+
+test('highlightInto recognizes the "ts" shorthand, not just "typescript"', async () => {
+  const pre = createPre('ts');
+  await highlightInto(pre, 'let x: number = 1;');
+  expect(pre.className).toContain('shiki');
+  pre.remove();
+});
+
+test('highlightInto recognizes the "js" shorthand, not just "javascript"', async () => {
+  const pre = createPre('js');
+  await highlightInto(pre, 'let x = 1;');
+  expect(pre.className).toContain('shiki');
+  pre.remove();
+});
+
+test('highlightInto still rejects genuinely unsupported langs', async () => {
+  const pre = createPre('python');
+  const before = pre.querySelector('code')!.innerHTML;
+  await highlightInto(pre, 'x = 1');
+  expect(pre.querySelector('code')?.innerHTML).toBe(before);
+  pre.remove();
+});

package/src/edit/standalone-entry.ts

@@ -0,0 +1,53 @@
+import { createHighlighterCore } from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+import javascript from 'shiki/langs/javascript.mjs';
+import typescript from 'shiki/langs/typescript.mjs';
+import githubLight from 'shiki/themes/github-light.mjs';
+import githubDark from 'shiki/themes/github-dark.mjs';
+import { spliceHighlightedHtml } from './splice.ts';
+import { normalizeLang } from '../lang.ts';
+import type { HighlighterCore } from 'shiki/core';
+
+const SUPPORTED_LANGS = new Set(['javascript', 'typescript']);
+const SUPPORTED_THEMES = new Set(['github-light', 'github-dark']);
+
+let highlighterPromise: Promise<HighlighterCore> | null = null;
+
+function getHighlighter(): Promise<HighlighterCore> {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighterCore({
+      engine: createJavaScriptRegexEngine(),
+      langs: [javascript, typescript],
+      themes: [githubLight, githubDark],
+    });
+  }
+  return highlighterPromise;
+}
+
+export async function highlightInto(pre: HTMLElement, code: string): Promise<void> {
+  const lang = pre.dataset.ugokuLang ?? '';
+  const singleTheme = pre.dataset.ugokuTheme;
+  const lightTheme = pre.dataset.ugokuThemeLight;
+  const darkTheme = pre.dataset.ugokuThemeDark;
+  const themeNames = singleTheme ? [singleTheme] : [lightTheme, darkTheme].filter((t): t is string => !!t);
+
+  const unsupported =
+    !SUPPORTED_LANGS.has(normalizeLang(lang) ?? '') ||
+    themeNames.length === 0 ||
+    !themeNames.every((t) => SUPPORTED_THEMES.has(t));
+  if (unsupported) return;
+
+  const highlighter = await getHighlighter();
+  // See editor.ts: defaultColor: false matches VitePress's own shiki output
+  // format (--shiki-light/--shiki-dark only, no baseline inline `color`),
+  // which its non-!important dark-mode CSS rule depends on.
+  const html = singleTheme
+    ? highlighter.codeToHtml(code, { lang, theme: singleTheme })
+    : highlighter.codeToHtml(code, {
+        lang,
+        themes: { light: lightTheme!, dark: darkTheme! },
+        defaultColor: false,
+      });
+
+  spliceHighlightedHtml(pre, html);
+}

package/src/index.ts

@@ -0,0 +1,19 @@
+import './output-panel/styles.css';
+
+export { runCode } from './runner/index.ts';
+export type {
+  RunCodeCallbacks,
+  RunHandle,
+  SerializedValue,
+  SerializedError,
+  RunMessage,
+  ConsoleMessage,
+  DoneMessage,
+  ErrorMessage,
+  MainToWorkerMessage,
+  WorkerToMainMessage,
+} from './runner/index.ts';
+
+export { OutputPanel, renderValue } from './output-panel/index.ts';
+
+export { mount, unmount } from './mount/index.ts';

package/src/lang.test.ts

@@ -0,0 +1,23 @@
+import { expect, test } from 'vitest';
+import { normalizeLang } from './lang';
+
+test('normalizes the "ts" shorthand to "typescript"', () => {
+  expect(normalizeLang('ts')).toBe('typescript');
+});
+
+test('normalizes the "js" shorthand to "javascript"', () => {
+  expect(normalizeLang('js')).toBe('javascript');
+});
+
+test('passes already-canonical lang names through unchanged', () => {
+  expect(normalizeLang('typescript')).toBe('typescript');
+  expect(normalizeLang('javascript')).toBe('javascript');
+});
+
+test('passes unrecognized langs through unchanged', () => {
+  expect(normalizeLang('python')).toBe('python');
+});
+
+test('passes undefined through unchanged', () => {
+  expect(normalizeLang(undefined)).toBeUndefined();
+});

package/src/lang.ts

@@ -0,0 +1,9 @@
+const LANG_ALIASES: Record<string, string> = {
+  ts: 'typescript',
+  js: 'javascript',
+};
+
+export function normalizeLang(lang: string | undefined): string | undefined {
+  if (!lang) return lang;
+  return LANG_ALIASES[lang] ?? lang;
+}