methanol 0.0.6 → 0.0.8

package/src/pages.js

@@ -23,6 +23,7 @@ import { readdir, readFile, stat } from 'fs/promises'
 import { existsSync } from 'fs'
 import { resolve, join, relative } from 'path'
 import { state, cli } from './state.js'
+import { withBase } from './config.js'
 import { compilePageMdx } from './mdx.js'
 import { createStageLogger } from './stage-logger.js'
 
@@ -36,12 +37,11 @@ const pageDerivedCache = new Map()
 const collectLanguagesFromPages = (pages = []) => {
 	const languages = new Map()
 	for (const page of pages) {
-		if (!page?.isIndex) continue
-		const label = page?.frontmatter?.lang
+		if (!page.isIndex) continue
+		const label = page.frontmatter?.lang
 		if (label == null || label === '') continue
 		const routePath = page.routePath || '/'
-		const href = page.routeHref || routePath || '/'
-		const frontmatterCode = page?.frontmatter?.langCode
+		const frontmatterCode = page.frontmatter?.langCode
 		const code =
 			typeof frontmatterCode === 'string' && frontmatterCode.trim()
 				? frontmatterCode.trim()
@@ -50,19 +50,39 @@ const collectLanguagesFromPages = (pages = []) => {
 					: routePath.replace(/^\/+/, '')
 		languages.set(routePath, {
 			routePath,
-			href,
+			routeHref: withBase(routePath),
 			label: String(label),
 			code: code || null
 		})
 	}
-	return Array.from(languages.values()).sort((a, b) => a.href.localeCompare(b.href))
+	return Array.from(languages.values()).sort((a, b) => a.routePath.localeCompare(b.routePath))
 }
 
 const normalizeRoutePath = (value) => {
+	if (!value) return '/'
+	let normalized = value
+	if (!normalized.startsWith('/')) {
+		normalized = `/${normalized}`
+	}
+	normalized = normalized.replace(/\/{2,}/g, '/')
+	if (normalized === '/') return '/'
+	if (normalized.endsWith('/')) {
+		return normalized.replace(/\/+$/, '/')
+	}
+	return normalized
+}
+
+const stripTrailingSlash = (value) => {
 	if (!value || value === '/') return '/'
 	return value.replace(/\/+$/, '')
 }
 
+const toRoutePrefix = (value) => {
+	const normalized = normalizeRoutePath(value)
+	const stripped = stripTrailingSlash(normalized)
+	return stripped === '/' ? '' : stripped
+}
+
 const resolveLanguageForRoute = (languages = [], routePath = '/') => {
 	if (!languages.length) return null
 	const normalizedRoute = normalizeRoutePath(routePath)
@@ -70,16 +90,17 @@ const resolveLanguageForRoute = (languages = [], routePath = '/') => {
 	let bestLength = -1
 	let rootLanguage = null
 	for (const lang of languages) {
-		const base = normalizeRoutePath(lang?.routePath || lang?.href)
+		const base = normalizeRoutePath(lang.routePath)
+		const basePrefix = toRoutePrefix(base)
 		if (!base) continue
 		if (base === '/') {
 			rootLanguage = lang
 			continue
 		}
-		if (normalizedRoute === base || normalizedRoute.startsWith(`${base}/`)) {
-			if (base.length > bestLength) {
+		if (normalizedRoute === base || (basePrefix && normalizedRoute.startsWith(`${basePrefix}/`))) {
+			if (basePrefix.length > bestLength) {
 				best = lang
-				bestLength = base.length
+				bestLength = basePrefix.length
 			}
 		}
 	}
@@ -104,7 +125,7 @@ export const routePathFromFile = (filePath, pagesDir = state.PAGES_DIR) => {
 		return '/'
 	}
 	if (normalized.endsWith('/index')) {
-		return `/${normalized.slice(0, -'/index'.length)}`
+		return `/${normalized.slice(0, -'/index'.length)}/`
 	}
 	return `/${normalized}`
 }
@@ -162,7 +183,8 @@ const stripRootPrefix = (value, rootDir) => {
 
 const buildPagesTree = (pages, options = {}) => {
 	const rootPath = normalizeRoutePath(options.rootPath || '/')
-	const rootDir = rootPath === '/' ? '' : rootPath.replace(/^\/+/, '')
+	const rootPrefix = toRoutePrefix(rootPath)
+	const rootDir = rootPrefix ? rootPrefix.replace(/^\/+/, '') : ''
 	const includeHiddenRoot = Boolean(options.includeHiddenRoot)
 	const currentRoutePath = normalizeRoutePath(options.currentRoutePath || '/')
 	const rootSegments = rootDir ? rootDir.split('/') : []
@@ -170,8 +192,8 @@ const buildPagesTree = (pages, options = {}) => {
 		if (!routePath) return '/'
 		if (!rootDir) return routePath
 		if (routePath === rootPath) return '/'
-		if (routePath.startsWith(`${rootPath}/`)) {
-			const stripped = routePath.slice(rootPath.length)
+		if (rootPrefix && routePath.startsWith(`${rootPrefix}/`)) {
+			const stripped = routePath.slice(rootPrefix.length)
 			return stripped.startsWith('/') ? stripped : `/${stripped}`
 		}
 		return routePath
@@ -179,7 +201,7 @@ const buildPagesTree = (pages, options = {}) => {
 	const currentRouteWithinRoot = resolveRouteWithinRoot(currentRoutePath)
 	const isUnderRoot = (page) => {
 		if (!rootDir) return true
-		return page.routePath === rootPath || page.routePath.startsWith(`${rootPath}/`)
+		return page.routePath === rootPath || (rootPrefix && page.routePath.startsWith(`${rootPrefix}/`))
 	}
 	const treePages = pages
 		.filter((page) => !page.isInternal)
@@ -249,10 +271,10 @@ const buildPagesTree = (pages, options = {}) => {
 			children: [],
 			depth,
 			routePath: null,
+			routeHref: null,
 			title: null,
 			weight: null,
 			date: null,
-			routeHref: null,
 			isRoot: false
 		}
 		dirs.set(path, dir)
@@ -273,7 +295,10 @@ const buildPagesTree = (pages, options = {}) => {
 			const shouldExposeHidden =
 				!isHidden404 &&
 				page.hiddenByFrontmatter === true &&
-				(page.routePath === currentRoutePath || isUnderExposedHiddenDir(page.dir))
+				(
+					page.routePath === currentRoutePath ||
+					(page.isIndex && page.dir && isUnderExposedHiddenDir(page.dir))
+				)
 			if (!shouldExposeHidden) {
 				continue
 			}
@@ -303,7 +328,7 @@ const buildPagesTree = (pages, options = {}) => {
 		if (page.isIndex && page.dir) {
 			const dir = getDirNode(page.dir, page.dir.split('/').pop(), page.depth)
 			dir.routePath = page.routePath
-			dir.routeHref = page.routeHref || page.routePath
+			dir.routeHref = page.routeHref
 			dir.title = page.title
 			dir.weight = page.weight ?? null
 			dir.date = page.date ?? null
@@ -378,9 +403,8 @@ const walkPages = async function* (dir, basePath = '') {
 		const name = entry.replace(/\.(mdx|md)$/, '')
 		const relativePath = join(basePath, name).replace(/\\/g, '/')
 		const isIndex = name === 'index'
-		const routePath = isIndex ? (basePath ? `/${basePath}` : '/') : `/${relativePath}`
-		const routeHref = isIndex && basePath ? `/${basePath}/` : routePath
-		yield { routePath, routeHref, filePath: fullPath, isIndex }
+		const routePath = isIndex ? (basePath ? `/${basePath}/` : '/') : `/${relativePath}`
+		yield { routePath, filePath: fullPath, isIndex }
 	}
 
 	for (const { entry, fullPath } of dirs) {
@@ -397,7 +421,6 @@ export const buildPageEntry = async ({ filePath, pagesDir, source }) => {
 	const dir = name.split('/').slice(0, -1).join('/')
 	const dirName = dir ? dir.split('/').pop() : ''
 	const isIndex = baseName === 'index'
-	const routeHref = isIndex && dir ? `/${dir}/` : routePath
 	const segments = routePath.split('/').filter(Boolean)
 	const stats = await stat(filePath)
 	const cached = pageMetadataCache.get(filePath)
@@ -420,7 +443,7 @@ export const buildPageEntry = async ({ filePath, pagesDir, source }) => {
 			: isNotFoundPage || Boolean(metadata.frontmatter?.isRoot)
 	return {
 		routePath,
-		routeHref,
+		routeHref: withBase(routePath),
 		filePath,
 		source,
 		relativePath: relPath,
@@ -463,7 +486,6 @@ const collectPagesFromDir = async (pagesDir, source) => {
 			source
 		})
 		if (entry) {
-			entry.routeHref = page.routeHref || entry.routeHref
 			entry.isIndex = page.isIndex || entry.isIndex
 			pages.push(entry)
 		}
@@ -526,15 +548,22 @@ const buildIndexFallback = (pages, siteName) => {
 	return lines.join('\n')
 }
 
-const resolveRootPath = (routePath, pagesByRoute, pagesByRouteIndex = null) => {
+const resolveRootPath = (routePath, pagesByRoute) => {
 	const normalized = normalizeRoutePath(routePath || '/')
 	const segments = normalized.split('/').filter(Boolean)
-	const lookup = pagesByRouteIndex || pagesByRoute
 	for (let i = segments.length; i >= 1; i--) {
 		const candidate = `/${segments.slice(0, i).join('/')}`
-		const page = lookup.get(candidate)
+		const page = pagesByRoute.get(candidate)
 		if (page?.isIndex && page?.isRoot) {
-			return candidate
+			return page.routePath
+		}
+		const isExact = normalized === candidate
+		if (!isExact) {
+			const indexCandidate = candidate === '/' ? '/' : `${candidate}/`
+			const indexPage = pagesByRoute.get(indexCandidate)
+			if (indexPage?.isIndex && indexPage?.isRoot) {
+				return indexPage.routePath
+			}
 		}
 	}
 	return '/'
@@ -544,7 +573,7 @@ const buildNavSequence = (nodes, pagesByRoute) => {
 	const result = []
 	const seen = new Set()
 	const addEntry = (entry) => {
-		if (!entry?.routePath) return
+		if (!entry.routePath) return
 		const key = entry.filePath || entry.routePath
 		if (seen.has(key)) return
 		seen.add(key)
@@ -584,54 +613,42 @@ export const buildPagesContext = async ({ compileAll = true } = {}) => {
 	const hasIndex = pages.some((page) => page.routePath === '/')
 	if (!hasIndex) {
 		const content = buildIndexFallback(pages, state.SITE_NAME)
-		pages = [
-			{
-				routePath: '/',
-				routeHref: '/',
-				filePath: resolve(state.PAGES_DIR, 'index.md'),
-				relativePath: 'index.md',
-				name: 'index',
-				dir: '',
-				segments: [],
-				depth: 0,
-				isIndex: true,
-				isInternal: false,
-				title: state.SITE_NAME || 'Methanol Site',
-				weight: null,
-				date: null,
-				isRoot: false,
-				hidden: false,
-				content,
-				frontmatter: {},
-				matter: null,
-				stats: { size: content.length, createdAt: null, updatedAt: null },
-				createdAt: null,
-				updatedAt: null
-			},
-			...pages
-		]
+		pages.unshift({
+			routePath: '/',
+			routeHref: withBase('/'),
+			filePath: resolve(state.PAGES_DIR, 'index.md'),
+			relativePath: 'index.md',
+			name: 'index',
+			dir: '',
+			segments: [],
+			depth: 0,
+			isIndex: true,
+			isInternal: false,
+			title: state.SITE_NAME || 'Methanol Site',
+			weight: null,
+			date: null,
+			isRoot: false,
+			hidden: false,
+			content,
+			frontmatter: {},
+			matter: null,
+			stats: { size: content.length, createdAt: null, updatedAt: null },
+			createdAt: null,
+			updatedAt: null
+		})
 		if (excludedRoutes?.has('/')) {
 			excludedRoutes.delete('/')
 		}
 	}
 
 	const pagesByRoute = new Map()
-	const pagesByRouteIndex = new Map()
 	for (const page of pages) {
-		if (page.isIndex) {
-			pagesByRouteIndex.set(page.routePath, page)
-			if (!pagesByRoute.has(page.routePath)) {
-				pagesByRoute.set(page.routePath, page)
-			}
-			continue
-		}
-		const existing = pagesByRoute.get(page.routePath)
-		if (!existing || existing.isIndex) {
+		if (!pagesByRoute.has(page.routePath)) {
 			pagesByRoute.set(page.routePath, page)
 		}
 	}
 	const getPageByRoute = (routePath, options = {}) => {
-		const { filePath, preferIndex } = options || {}
+		const { filePath } = options || {}
 		if (filePath) {
 			for (const page of pages) {
 				if (page.routePath === routePath && page.filePath === filePath) {
@@ -639,18 +656,12 @@ export const buildPagesContext = async ({ compileAll = true } = {}) => {
 				}
 			}
 		}
-		if (preferIndex === true) {
-			return pagesByRouteIndex.get(routePath) || pagesByRoute.get(routePath) || null
-		}
-		if (preferIndex === false) {
-			return pagesByRoute.get(routePath) || pagesByRouteIndex.get(routePath) || null
-		}
-		return pagesByRoute.get(routePath) || pagesByRouteIndex.get(routePath) || null
+		return pagesByRoute.get(routePath) || null
 	}
 	const pagesTreeCache = new Map()
 	const navSequenceCache = new Map()
 	const getPagesTree = (routePath) => {
-		const rootPath = resolveRootPath(routePath, pagesByRoute, pagesByRouteIndex)
+		const rootPath = resolveRootPath(routePath, pagesByRoute)
 		const normalizedRoute = normalizeRoutePath(routePath || '/')
 		const cacheKey = `${rootPath}::${normalizedRoute}`
 		if (pagesTreeCache.has(cacheKey)) {
@@ -665,7 +676,7 @@ export const buildPagesContext = async ({ compileAll = true } = {}) => {
 		return tree
 	}
 	const getNavSequence = (routePath) => {
-		const rootPath = resolveRootPath(routePath, pagesByRoute, pagesByRouteIndex)
+		const rootPath = resolveRootPath(routePath, pagesByRoute)
 		const normalizedRoute = normalizeRoutePath(routePath || '/')
 		const cacheKey = `${rootPath}::${normalizedRoute}`
 		if (navSequenceCache.has(cacheKey)) {
@@ -680,8 +691,10 @@ export const buildPagesContext = async ({ compileAll = true } = {}) => {
 	const notFound = pagesByRoute.get('/404') || null
 	const languages = collectLanguagesFromPages(pages)
 	const userSite = state.USER_SITE || {}
+	const siteBase = state.VITE_BASE ?? userSite.base ?? null
 	const site = {
 		...userSite,
+		base: siteBase,
 		name: state.SITE_NAME,
 		root: state.ROOT_DIR,
 		pagesDir: state.PAGES_DIR,
@@ -700,7 +713,6 @@ export const buildPagesContext = async ({ compileAll = true } = {}) => {
 	const pagesContext = {
 		pages,
 		pagesByRoute,
-		pagesByRouteIndex,
 		getPageByRoute,
 		pagesTree,
 		getPagesTree,
@@ -734,7 +746,7 @@ export const buildPagesContext = async ({ compileAll = true } = {}) => {
 				if (!entry) return null
 				return {
 					routePath: entry.routePath,
-					routeHref: entry.routeHref || entry.routePath,
+					routeHref: entry.routeHref,
 					title: entry.title || entry.name || entry.routePath,
 					filePath: entry.filePath || null
 				}

package/src/preview-server.js

@@ -28,8 +28,8 @@ import { methanolPreviewRoutingPlugin } from './vite-plugins.js'
 export const runVitePreview = async () => {
 	const baseConfig = {
 		configFile: false,
+		appType: 'mpa',
 		root: state.PAGES_DIR,
-		base: '/',
 		build: {
 			outDir: state.DIST_DIR
 		}

package/src/public-assets.js

@@ -48,7 +48,7 @@ const linkOrCopyFile = async (src, dest) => {
 
 	try {
 		await ensureDir(dirname(dest))
-		
+
 		if (isWindows) {
 			// Windows: Check for different drives first
 			if (parse(src).root.toLowerCase() !== parse(dest).root.toLowerCase()) {
@@ -85,7 +85,7 @@ const processDir = async (sourceDir, targetDir, accumulated = new Set()) => {
 		const sourcePath = resolve(sourceDir, entry)
 		const targetPath = resolve(targetDir, entry)
 		const stats = await stat(sourcePath)
-		
+
 		if (stats.isDirectory()) {
 			await processDir(sourcePath, targetPath, accumulated)
 		} else {
@@ -104,7 +104,7 @@ export const preparePublicAssets = async ({ themeDir, userDir, targetDir }) => {
 	if (themeDir) {
 		await processDir(themeDir, targetDir)
 	}
-	
+
 	if (userDir) {
 		await processDir(userDir, targetDir)
 	}
@@ -112,7 +112,7 @@ export const preparePublicAssets = async ({ themeDir, userDir, targetDir }) => {
 
 export const updateAsset = async ({ type, filePath, themeDir, userDir, targetDir, relPath }) => {
 	const targetPath = resolve(targetDir, relPath)
-	
+
 	if (type === 'unlink') {
 		try {
 			try {
@@ -122,7 +122,7 @@ export const updateAsset = async ({ type, filePath, themeDir, userDir, targetDir
 					await rm(targetPath, { recursive: true, force: true })
 				}
 			}
-			
+
 			if (themeDir) {
 				const themePath = resolve(themeDir, relPath)
 				if (existsSync(themePath)) {
@@ -141,4 +141,4 @@ export const updateAsset = async ({ type, filePath, themeDir, userDir, targetDir
 			return 'updated'
 		}
 	}
-}
+}

package/src/rehype-plugins/link-resolve.js

@@ -27,7 +27,6 @@ import { state } from '../state.js'
 const extensionRegex = /\.(mdx?|html)$/i
 
 const isRelativeHref = (href) => {
-	if (typeof href !== 'string') return false
 	if (!href) return false
 	if (href.startsWith('#') || href.startsWith('?') || href.startsWith('/')) return false
 	if (href.startsWith('//')) return false

package/src/state.js

@@ -148,6 +148,8 @@ export const state = {
 	PROJECT_ROOT,
 	ROOT_DIR: PROJECT_ROOT,
 	SITE_NAME: 'Methanol Site',
+	SITE_BASE: null,
+	VITE_BASE: null,
 	PAGES_DIR: resolve(PROJECT_ROOT, 'pages'),
 	COMPONENTS_DIR: resolve(PROJECT_ROOT, 'components'),
 	STATIC_DIR: resolve(PROJECT_ROOT, 'public'),

package/src/utils.js

@@ -0,0 +1,9 @@
+export const cached = (fn) => {
+	let cache = null
+	return () => (cache ?? (cache = fn()))
+}
+
+export const cachedStr = (fn) => {
+	const cache = Object.create(null)
+	return (key) => (cache[key] ?? (cache[key] = fn(key)))
+}

package/src/virtual-module/inject.js

@@ -21,10 +21,9 @@
 import { createDOMRenderer } from 'refui/dom'
 import { defaults } from 'refui/browser'
 import { lazy } from 'refui'
-import { init } from '/.methanol_virtual_module/loader.js'
-
-const reg = import('/.methanol_virtual_module/registry.js')
+import { init } from 'methanol:loader'
+import { registry } from 'methanol:registry'
 
 const R = createDOMRenderer(defaults)
 
-reg.then((m) => init(m.registry, R))
+init(registry, R)

package/src/virtual-module/{pagefind.js → pagefind-loader.js}

@@ -22,6 +22,27 @@ let pagefindInit = null
 let pagefindUiInit = null
 let pagefindUiReady = false
 
+const resolveBasePrefix = () => {
+	let base = import.meta.env?.BASE_URL || '/'
+	if (!base || base === '/' || base === './') return ''
+	if (base.startsWith('http://') || base.startsWith('https://')) {
+		try {
+			base = new URL(base).pathname
+		} catch {
+			return ''
+		}
+	}
+	if (!base.startsWith('/')) return ''
+	if (base.endsWith('/')) base = base.slice(0, -1)
+	return base
+}
+
+const withBase = (path) => {
+	const prefix = resolveBasePrefix()
+	if (!prefix || path.startsWith(`${prefix}/`)) return path
+	return `${prefix}${path}`
+}
+
 const dynamicImport = (path) => {
 	try {
 		const importer = new Function('p', 'return import(p)')
@@ -38,7 +59,7 @@ export const loadPagefind = async () => {
 			resolve(null)
 			return
 		}
-		dynamicImport('/pagefind/pagefind.js')
+		dynamicImport(withBase('/pagefind/pagefind.js'))
 			.then((mod) => {
 				if (!mod) return resolve(null)
 				if (mod.search) return resolve(mod)
@@ -89,7 +110,7 @@ export const loadPagefindUI = async (options = {}) => {
 			return
 		}
 		const script = document.createElement('script')
-		script.src = '/pagefind/pagefind-ui.js'
+		script.src = withBase('/pagefind/pagefind-ui.js')
 		script.async = true
 		script.onload = () => done(initPagefindUI(options))
 		script.onerror = () => done(false)

package/src/vite-plugins.js

@@ -24,8 +24,9 @@ import { existsSync } from 'node:fs'
 import { resolve } from 'node:path'
 import { normalizePath } from 'vite'
 import { state } from './state.js'
+import { resolveBasePrefix } from './config.js'
 import { genRegistryScript } from './components.js'
-import { INJECT_SCRIPT, LOADER_SCRIPT, PAGEFIND_SCRIPT } from './assets.js'
+import { INJECT_SCRIPT, LOADER_SCRIPT, PAGEFIND_LOADER_SCRIPT } from './assets.js'
 import { projectRequire } from './node-loader.js'
 
 const require = createRequire(import.meta.url)
@@ -60,6 +61,9 @@ export const methanolPreviewRoutingPlugin = (distDir, notFoundPath) => ({
 				cachedHtml = await readFile(notFoundPath, 'utf-8')
 				return cachedHtml
 			}
+
+			const basePrefix = resolveBasePrefix()
+
 			const handler = async (req, res, next) => {
 				if (!req.url || req.method !== 'GET') {
 					return next()
@@ -69,6 +73,13 @@ export const methanolPreviewRoutingPlugin = (distDir, notFoundPath) => ({
 				try {
 					pathname = new URL(req.url, 'http://methanol').pathname
 					pathname = decodeURIComponent(pathname)
+					if (basePrefix) {
+						if (pathname.startsWith(basePrefix)) {
+							pathname = pathname.slice(basePrefix.length)
+						} else {
+							return next()
+						}
+					}
 				} catch {}
 				const hasTrailingSlash = pathname.endsWith('/') && pathname !== '/'
 				if (pathname.includes('.') && !pathname.endsWith('.html')) {
@@ -109,20 +120,43 @@ export const methanolPreviewRoutingPlugin = (distDir, notFoundPath) => ({
 
 const virtualModulePrefix = '/.methanol_virtual_module/'
 const resolvedVirtualModulePrefix = '\0' + virtualModulePrefix
+const virtualModuleScheme = 'methanol:'
 
 const virtualModuleMap = {
+	get registry() {
+		return `export const registry = ${genRegistryScript()}`
+	},
 	get 'registry.js'() {
 		return `export const registry = ${genRegistryScript()}`
 	},
-	'loader.js': LOADER_SCRIPT,
+	loader: LOADER_SCRIPT,
 	'inject.js': INJECT_SCRIPT,
-	'pagefind.js': PAGEFIND_SCRIPT
+	'pagefind-loader': PAGEFIND_LOADER_SCRIPT
 }
 
 const getModuleIdSegment = (id, start) => {
 	return new URL(id.slice(start), 'http://methanol').pathname.slice(1)
 }
 
+const getSchemeModuleKey = (id) => {
+	if (!id.startsWith(virtualModuleScheme)) return null
+	return id.slice(virtualModuleScheme.length)
+}
+
+const resolveVirtualModuleId = (id) => {
+	if (id.startsWith(virtualModulePrefix)) {
+		return id
+	}
+	const basePrefix = resolveBasePrefix()
+	if (basePrefix) {
+		const prefixed = `${basePrefix}${virtualModulePrefix}`
+		if (id.startsWith(prefixed)) {
+			return id.slice(basePrefix.length)
+		}
+	}
+	return null
+}
+
 export const methanolResolverPlugin = () => {
 	return {
 		name: 'methanol-resolver',
@@ -139,10 +173,16 @@ export const methanolResolverPlugin = () => {
 				return require.resolve(id)
 			}
 
-			if (id.startsWith(virtualModulePrefix)) {
-				const _moduleId = getModuleIdSegment(id, virtualModulePrefix.length)
+			const schemeKey = getSchemeModuleKey(id)
+			if (schemeKey && Object.prototype.hasOwnProperty.call(virtualModuleMap, schemeKey)) {
+				return '\0' + id
+			}
+
+			const virtualId = resolveVirtualModuleId(id)
+			if (virtualId) {
+				const _moduleId = getModuleIdSegment(virtualId, virtualModulePrefix.length)
 				if (Object.prototype.hasOwnProperty.call(virtualModuleMap, _moduleId)) {
-					return '\0' + id
+					return '\0' + virtualId
 				}
 			}
 
@@ -164,6 +204,10 @@ export const methanolResolverPlugin = () => {
 			}
 		},
 		load(id) {
+			if (id.startsWith('\0' + virtualModuleScheme)) {
+				const key = id.slice(1 + virtualModuleScheme.length)
+				return virtualModuleMap[key]
+			}
 			if (id.startsWith(resolvedVirtualModulePrefix)) {
 				const _moduleId = getModuleIdSegment(id, resolvedVirtualModulePrefix.length)
 				return virtualModuleMap[_moduleId]

package/themes/default/components/ButtonGroup.jsx

@@ -0,0 +1,38 @@
+/* Copyright Yukino Song, SudoMaker Ltd.
+ *
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ * 	http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export default function ButtonGroup({
+	children,
+	className = '',
+	align = 'left', // left, center, right
+	...props
+}) {
+	const classes = [
+		'button-group',
+		`button-group--${align}`,
+		className
+	].filter(Boolean).join(' ')
+
+	return (
+		<div class={classes} {...props}>
+			{children}
+		</div>
+	)
+}