methanol 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "methanol",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Static site generator powered by rEFui and MDX",
   "main": "./index.js",
   "type": "module",

package/src/build-system.js

@@ -28,7 +28,7 @@ import { renderHtml } from './mdx.js'
 import { buildComponentRegistry } from './components.js'
 import { methanolVirtualHtmlPlugin, methanolResolverPlugin } from './vite-plugins.js'
 import { createStageLogger } from './stage-logger.js'
-import { copyPublicDir } from './public-assets.js'
+import { preparePublicAssets } from './public-assets.js'
 
 const ensureDir = async (dir) => {
 	await mkdir(dir, { recursive: true })
@@ -163,11 +163,11 @@ export const buildHtmlEntries = async () => {
 }
 
 export const runViteBuild = async (entry, htmlCache) => {
-	if (state.STATIC_DIR !== false) {
-		await copyPublicDir({
-			sourceDir: state.THEME_PUBLIC_DIR,
-			targetDir: state.STATIC_DIR,
-			label: 'theme public'
+	if (state.STATIC_DIR !== false && state.MERGED_ASSETS_DIR) {
+		await preparePublicAssets({
+			themeDir: state.THEME_ASSETS_DIR,
+			userDir: state.USER_ASSETS_DIR,
+			targetDir: state.MERGED_ASSETS_DIR
 		})
 	}
 	const copyPublicDirEnabled = state.STATIC_DIR !== false

package/src/config.js

@@ -216,6 +216,7 @@ export const applyConfig = async (config, mode) => {
 	state.ROOT_DIR = root
 	const configSiteName = cli.CLI_SITE_NAME ?? config.site?.name ?? null
 	state.SITE_NAME = configSiteName || basename(root) || 'Methanol Site'
+	state.USER_SITE = config.site && typeof config.site === 'object' ? { ...config.site } : null
 	if (mode) {
 		state.CURRENT_MODE = mode
 	}
@@ -289,15 +290,36 @@ export const applyConfig = async (config, mode) => {
 	if (hasOwn(state.USER_THEME, 'publicDir') && state.THEME_PUBLIC_DIR && !existsSync(state.THEME_PUBLIC_DIR)) {
 		throw new Error(`Theme public directory not found: ${state.THEME_PUBLIC_DIR}`)
 	}
-	if (
-		state.STATIC_DIR !== false &&
-		!userSpecifiedPublicDir &&
-		!existsSync(state.STATIC_DIR) &&
-		state.THEME_PUBLIC_DIR &&
-		existsSync(state.THEME_PUBLIC_DIR)
-	) {
-		state.STATIC_DIR = state.THEME_PUBLIC_DIR
+
+	// Asset Merging Logic
+	const userAssetsDir = userSpecifiedPublicDir 
+		? resolveFromRoot(root, publicDirValue, 'public')
+		: resolveFromRoot(root, 'public', 'public')
+	
+	const hasUserAssets = existsSync(userAssetsDir)
+	state.USER_ASSETS_DIR = hasUserAssets ? userAssetsDir : null
+	state.THEME_ASSETS_DIR = state.THEME_PUBLIC_DIR && existsSync(state.THEME_PUBLIC_DIR) ? state.THEME_PUBLIC_DIR : null
+
+	if (state.STATIC_DIR !== false) {
+		if (!hasUserAssets) {
+			// Optimization: No user assets, just use theme assets directly
+			state.STATIC_DIR = state.THEME_ASSETS_DIR
+			state.MERGED_ASSETS_DIR = null
+		} else {
+			// We need to merge
+			const nodeModulesPath = resolve(root, 'node_modules')
+			if (existsSync(nodeModulesPath)) {
+				state.MERGED_ASSETS_DIR = resolve(nodeModulesPath, '.methanol/assets')
+			} else {
+				state.MERGED_ASSETS_DIR = resolve(state.PAGES_DIR || resolve(root, 'pages'), '.methanol/assets')
+			}
+			state.STATIC_DIR = state.MERGED_ASSETS_DIR
+		}
+	} else {
+		state.STATIC_DIR = false
+		state.MERGED_ASSETS_DIR = null
 	}
+
 	state.SOURCES = normalizeSources(state.USER_THEME.sources, themeRoot)
 	state.USER_VITE_CONFIG = config.vite || null
 	state.USER_MDX_CONFIG = config.mdx || null

package/src/dev-server.js

@@ -39,10 +39,13 @@ import {
 import { buildPagesContext, buildPageEntry, routePathFromFile } from './pages.js'
 import { compilePageMdx, renderHtml } from './mdx.js'
 import { methanolResolverPlugin } from './vite-plugins.js'
-import { copyPublicDir } from './public-assets.js'
+import { preparePublicAssets, updateAsset } from './public-assets.js'
 
 export const runViteDev = async () => {
 	const baseFsAllow = [state.ROOT_DIR, state.USER_THEME.root].filter(Boolean)
+	if (state.MERGED_ASSETS_DIR) {
+		baseFsAllow.push(state.MERGED_ASSETS_DIR)
+	}
 	const baseConfig = {
 		configFile: false,
 		root: state.PAGES_DIR,
@@ -63,11 +66,11 @@ export const runViteDev = async () => {
 	}
 	const userConfig = await resolveUserViteConfig('serve')
 	const finalConfig = userConfig ? mergeConfig(baseConfig, userConfig) : baseConfig
-	if (state.STATIC_DIR !== false) {
-		await copyPublicDir({
-			sourceDir: state.THEME_PUBLIC_DIR,
-			targetDir: state.STATIC_DIR,
-			label: 'theme public'
+	if (state.STATIC_DIR !== false && state.MERGED_ASSETS_DIR) {
+		await preparePublicAssets({
+			themeDir: state.THEME_ASSETS_DIR,
+			userDir: state.USER_ASSETS_DIR,
+			targetDir: state.MERGED_ASSETS_DIR
 		})
 	}
 	if (cli.CLI_PORT != null) {
@@ -94,6 +97,28 @@ export const runViteDev = async () => {
 	}
 	const server = await createServer(finalConfig)
 
+	if (state.MERGED_ASSETS_DIR && state.USER_ASSETS_DIR) {
+		const assetWatcher = chokidar.watch(state.USER_ASSETS_DIR, {
+			ignoreInitial: true
+		})
+		const handleAssetUpdate = (type, filePath) => {
+			const relPath = relative(state.USER_ASSETS_DIR, filePath)
+			enqueue(async () => {
+				await updateAsset({
+					type,
+					filePath,
+					relPath,
+					themeDir: state.THEME_ASSETS_DIR,
+					userDir: state.USER_ASSETS_DIR,
+					targetDir: state.MERGED_ASSETS_DIR
+				})
+			})
+		}
+		assetWatcher.on('add', (filePath) => handleAssetUpdate('add', filePath))
+		assetWatcher.on('change', (filePath) => handleAssetUpdate('change', filePath))
+		assetWatcher.on('unlink', (filePath) => handleAssetUpdate('unlink', filePath))
+	}
+
 	const themeComponentsDir = state.THEME_COMPONENTS_DIR
 	const themeEnv = state.THEME_ENV
 	const themeRegistry = themeComponentsDir

package/src/main.js

@@ -62,6 +62,7 @@ const main = async () => {
 	const mode = isDev ? 'development' : 'production'
 	const config = await loadUserConfig(mode, cli.CLI_CONFIG_PATH)
 	await applyConfig(config, mode)
+	const userSite = state.USER_SITE || {}
 	const hookContext = {
 		mode,
 		root: state.ROOT_DIR,
@@ -71,6 +72,7 @@ const main = async () => {
 		isPreview,
 		HTMLRenderer,
 		site: {
+			...userSite,
 			name: state.SITE_NAME,
 			root: state.ROOT_DIR,
 			pagesDir: state.PAGES_DIR,

package/src/pages.js

@@ -273,7 +273,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
 			}
@@ -679,7 +682,9 @@ export const buildPagesContext = async ({ compileAll = true } = {}) => {
 	let pagesTree = getPagesTree('/')
 	const notFound = pagesByRoute.get('/404') || null
 	const languages = collectLanguagesFromPages(pages)
+	const userSite = state.USER_SITE || {}
 	const site = {
+		...userSite,
 		name: state.SITE_NAME,
 		root: state.ROOT_DIR,
 		pagesDir: state.PAGES_DIR,

package/src/public-assets.js

@@ -18,56 +18,127 @@
  * under the License.
  */
 
-import { readdir, stat, copyFile, mkdir } from 'fs/promises'
+import { readdir, stat, lstat, copyFile, mkdir, symlink, unlink, rm, link } from 'fs/promises'
 import { existsSync } from 'fs'
-import { resolve, dirname, relative } from 'path'
+import { resolve, dirname, relative, parse } from 'path'
 
 const ensureDir = async (dir) => {
 	await mkdir(dir, { recursive: true })
 }
 
-const copyDir = async (sourceDir, targetDir, onFile) => {
-	await ensureDir(targetDir)
+const isWindows = process.platform === 'win32'
+
+const linkOrCopyFile = async (src, dest) => {
+	try {
+		try {
+			await lstat(dest)
+			await unlink(dest)
+		} catch (e) {
+			if (e.code !== 'ENOENT') {
+				try {
+					await rm(dest, { recursive: true, force: true })
+				} catch (e2) {
+					console.error(`Methanol: Failed to clean destination ${dest}`, e2)
+				}
+			}
+		}
+	} catch (err) {
+		console.error(`Methanol: Failed to remove existing file at ${dest}`, err)
+	}
+
+	try {
+		await ensureDir(dirname(dest))
+
+		if (isWindows) {
+			// Windows: Check for different drives first
+			if (parse(src).root.toLowerCase() !== parse(dest).root.toLowerCase()) {
+				await copyFile(src, dest)
+				return 'copied'
+			}
+
+			// Try hard link (no admin required)
+			try {
+				await link(src, dest)
+				return 'hardlinked'
+			} catch (err) {
+				// Fallback to copy
+				// console.warn(`Methanol: Hardlink failed for ${src} -> ${dest}. Falling back to copy.`, err.message)
+				await copyFile(src, dest)
+				return 'copied (fallback)'
+			}
+		} else {
+			// macOS/Linux: Symlink
+			await symlink(src, dest)
+			return 'symlinked'
+		}
+	} catch (err) {
+		console.error(`Methanol: Failed to link ${src} to ${dest}`, err)
+		return 'failed'
+	}
+}
+
+const processDir = async (sourceDir, targetDir, accumulated = new Set()) => {
+	if (!existsSync(sourceDir)) return
 	const entries = await readdir(sourceDir)
 	for (const entry of entries) {
-		if (entry.startsWith('.')) {
-			continue
-		}
+		if (entry.startsWith('.')) continue
 		const sourcePath = resolve(sourceDir, entry)
 		const targetPath = resolve(targetDir, entry)
 		const stats = await stat(sourcePath)
+
 		if (stats.isDirectory()) {
-			await copyDir(sourcePath, targetPath, onFile)
+			await processDir(sourcePath, targetPath, accumulated)
 		} else {
-			if (existsSync(targetPath)) {
-				if (onFile) {
-					onFile(sourcePath, targetPath, { skipped: true })
-				}
-				continue
-			}
-			await ensureDir(dirname(targetPath))
-			await copyFile(sourcePath, targetPath)
-			if (onFile) {
-				onFile(sourcePath, targetPath, { skipped: false })
-			}
+			await linkOrCopyFile(sourcePath, targetPath)
+			accumulated.add(relative(targetDir, targetPath))
 		}
 	}
 }
 
-export const copyPublicDir = async ({ sourceDir, targetDir, label = 'public' }) => {
-	if (!sourceDir || !targetDir) return
-	if (!existsSync(sourceDir)) return
-	const resolvedSource = resolve(sourceDir)
-	const resolvedTarget = resolve(targetDir)
-	if (resolvedSource === resolvedTarget) return
-	const created = !existsSync(resolvedTarget)
-	await ensureDir(resolvedTarget)
-	if (created) {
-		console.log(`Methanol: created ${label} directory`)
+export const preparePublicAssets = async ({ themeDir, userDir, targetDir }) => {
+	if (existsSync(targetDir)) {
+		await rm(targetDir, { recursive: true, force: true })
+	}
+	await ensureDir(targetDir)
+
+	if (themeDir) {
+		await processDir(themeDir, targetDir)
+	}
+
+	if (userDir) {
+		await processDir(userDir, targetDir)
+	}
+}
+
+export const updateAsset = async ({ type, filePath, themeDir, userDir, targetDir, relPath }) => {
+	const targetPath = resolve(targetDir, relPath)
+
+	if (type === 'unlink') {
+		try {
+			try {
+				await unlink(targetPath)
+			} catch (e) {
+				if (e.code !== 'ENOENT') {
+					await rm(targetPath, { recursive: true, force: true })
+				}
+			}
+
+			if (themeDir) {
+				const themePath = resolve(themeDir, relPath)
+				if (existsSync(themePath)) {
+					await linkOrCopyFile(themePath, targetPath)
+					return 'restored theme asset'
+				}
+			}
+		} catch (err) {
+			console.error(`Methanol: Error updating asset ${relPath}`, err)
+		}
+		return 'removed'
+	} else {
+		const sourcePath = userDir ? resolve(userDir, relPath) : null
+		if (sourcePath && existsSync(sourcePath)) {
+			await linkOrCopyFile(sourcePath, targetPath)
+			return 'updated'
+		}
 	}
-	await copyDir(resolvedSource, resolvedTarget, (sourcePath, targetPath, info) => {
-		const rel = relative(resolvedSource, sourcePath).replace(/\\/g, '/')
-		if (info?.skipped) return
-		console.log(`Methanol: copied ${label}/${rel}`)
-	})
 }

package/src/state.js

@@ -160,6 +160,7 @@ export const state = {
 	THEME_PUBLIC_DIR: null,
 	THEME_ENV: null,
 	USER_THEME: null,
+	USER_SITE: null,
 	USER_VITE_CONFIG: null,
 	USER_MDX_CONFIG: null,
 	USER_PUBLIC_OVERRIDE: false,

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>
+	)
+}

package/themes/default/components/LinkButton.jsx

@@ -0,0 +1,37 @@
+/* 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 LinkButton({
+	children,
+	variant = 'primary', // primary, secondary, outline, ghost
+	size = 'md', // sm, md, lg
+	class: className = '',
+	...props
+}) {
+	const classes = ['link-button', `link-button--${variant}`, `link-button--${size}`, className]
+		.filter(Boolean)
+		.join(' ')
+
+	return (
+		<a class={classes} {...props}>
+			{children}
+		</a>
+	)
+}

package/themes/default/page.jsx

@@ -21,6 +21,8 @@
 import { HTMLRenderer as R } from 'methanol'
 import { renderToc } from './components/ThemeToCContainer.static.jsx'
 
+const DOCHTML = R.rawHTML`<!DOCTYPE html>`
+
 const renderPageTree = (nodes = [], currentRoute, depth = 0) => {
 	const items = []
 	let hasActive = false
@@ -87,8 +89,9 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 	const logo = pageFrontmatter.logo ?? rootFrontmatter.logo ?? ctx.site?.logo ?? themeLogo
 	const favicon = pageFrontmatter.favicon ?? rootFrontmatter.favicon ?? ctx.site?.favicon ?? themeFavIcon
 	const excerpt = pageFrontmatter.excerpt ?? `${title} | ${siteName} - Powered by Methanol`
-	const ogTitle = pageFrontmatter.ogTitle ?? null
-	const ogDescription = pageFrontmatter.ogDescription ?? null
+	const _ogTitle = pageFrontmatter.ogTitle ?? title ?? null
+	const ogTitle = _ogTitle ? `${_ogTitle} | ${siteName}` : null
+	const ogDescription = pageFrontmatter.ogDescription ?? excerpt ?? null
 	const ogImage = pageFrontmatter.ogImage ?? null
 	const ogUrl = pageFrontmatter.ogUrl ?? null
 	const twitterTitle = pageFrontmatter.twitterTitle ?? ogTitle
@@ -142,7 +145,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 	) : null
 	return (
 		<>
-			{R.rawHTML`<!DOCTYPE html>`}
+			{DOCHTML}
 			<html lang={htmlLang}>
 				<head>
 					<meta charset="UTF-8" />
@@ -151,7 +154,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 						{title} | {siteName}
 					</title>
 					{baseHref ? <base href={baseHref} /> : null}
-					<link rel="icon" href={favicon} />
+					{favicon ? <link rel="icon" href={favicon} /> : null}
 					<meta name="description" content={excerpt} />
 					{ogTitle ? <meta property="og:title" content={ogTitle} /> : null}
 					{ogDescription ? <meta property="og:description" content={ogDescription} /> : null}
@@ -163,23 +166,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 					{twitterImage ? <meta name="twitter:image" content={twitterImage} /> : null}
 					<ExtraHead />
 					<link rel="preload stylesheet" as="style" href="/.methanol_theme_default/style.css" />
-					{R.rawHTML`
-						<script>
-							(function() {
-								const savedTheme = localStorage.getItem('methanol-theme');
-								const systemTheme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
-								const theme = savedTheme || systemTheme;
-								document.documentElement.classList.toggle('light', theme === 'light');
-								document.documentElement.classList.toggle('dark', theme === 'dark');
-
-								const savedAccent = localStorage.getItem('methanol-accent');
-								if (savedAccent && savedAccent !== 'default') {
-									document.documentElement.classList.add('accent-' + savedAccent);
-								}
-							})();
-						</script>
-					`}
-					<script type="module" src="/.methanol_theme_default/prefetch.js" defer></script>
+					<script src="/theme-prepare.js"></script>
 				</head>
 				<body>
 					<input type="checkbox" id="nav-toggle" class="nav-toggle" />
@@ -244,7 +231,7 @@ const PAGE_TEMPLATE = ({ Page, ExtraHead, components, ctx }) => {
 						<aside class="sidebar">
 							<div class="sidebar-header">
 								<div class="logo">
-									<img src={logo} alt="logo" fetchpriority="high"/>
+									{logo ? <img src={logo} alt="logo" fetchpriority="high"/> : null}
 									<span>{siteName}</span>
 								</div>
 								{pagefindEnabled ? <ThemeSearchBox options={pagefindOptions} /> : null}

package/themes/default/{sources/prefetch.js → public/theme-prepare.js}

@@ -18,7 +18,19 @@
  * under the License.
  */
 
-(() => {
+;(function initThemeColor() {
+	const savedTheme = localStorage.getItem('methanol-theme')
+	const systemTheme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'
+	const theme = savedTheme || systemTheme
+	document.documentElement.classList.toggle('light', theme === 'light')
+	document.documentElement.classList.toggle('dark', theme === 'dark')
+
+	const savedAccent = localStorage.getItem('methanol-accent')
+	if (savedAccent && savedAccent !== 'default') {
+		document.documentElement.classList.add('accent-' + savedAccent)
+	}
+})()
+;(function initPrefetch() {
 	const prefetched = new Set()
 	const canPrefetch = (anchor) => {
 		if (!anchor || !anchor.href) return false

package/themes/default/sources/style.css

@@ -270,7 +270,7 @@ a {
 .sidebar {
 	position: sticky;
 	top: 0;
-	height: 100vh;
+	height: 100dvh;
 	overflow: visible;
 	padding: 2rem 0;
 	display: flex;
@@ -1420,6 +1420,7 @@ a {
 	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 	position: relative;
 	overflow: hidden;
+	-webkit-tap-highlight-color: transparent;
 
 	&:hover {
 		border-color: var(--accent);
@@ -1473,7 +1474,7 @@ a {
 
 .page-nav-card.next {
 	text-align: right;
-	align-items: flex-end;
+	align-items: stretch;
 
 	.page-nav-label {
 		justify-content: flex-end;
@@ -1493,26 +1494,6 @@ a {
 		grid-template-columns: 1fr;
 		gap: 1rem;
 	}
-
-	.page-nav-card.next {
-		text-align: left;
-		align-items: flex-start;
-
-		.page-nav-label {
-			flex-direction: row;
-		}
-
-		.page-nav-label::after {
-			display: none;
-		}
-
-		.page-nav-label::before {
-			content: '→';
-			font-family: system-ui;
-			margin-right: 0.1rem;
-			transition: transform 0.2s ease;
-		}
-	}
 }
 
 /* --- Mobile / Toggles --- */
@@ -1566,7 +1547,7 @@ a {
 	.toc-panel {
 		position: fixed;
 		top: 0;
-		bottom: 0;
+		height: 100dvh;
 		width: 280px;
 		background: var(--surface);
 		border: 1px solid var(--border);
@@ -1646,6 +1627,110 @@ a {
 	}
 }
 
+/* --- Components --- */
+
+.link-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: 600;
+	border-radius: 999px;
+	text-decoration: none !important;
+	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	cursor: pointer;
+	line-height: 1;
+	gap: 0.5rem;
+	white-space: nowrap;
+}
+
+.link-button:active {
+	transform: scale(0.96);
+}
+
+/* Variants */
+.link-button--primary {
+	background-color: var(--accent);
+	color: var(--accent-foreground);
+	border: 1px solid transparent;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+	&:hover {
+		opacity: 0.9;
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+		transform: translateY(-1px);
+	}
+}
+
+.link-button--secondary {
+	background-color: var(--surface-elevated);
+	color: var(--text);
+	border: 1px solid var(--border);
+
+	&:hover {
+		background-color: var(--surface-muted);
+		border-color: var(--muted);
+	}
+}
+
+.link-button--outline {
+	background-color: transparent;
+	color: var(--text);
+	border: 1px solid var(--border);
+
+	&:hover {
+		border-color: var(--accent);
+		color: var(--accent);
+		background-color: var(--accent-soft);
+	}
+}
+
+.link-button--ghost {
+	background-color: transparent;
+	color: var(--muted);
+	border: 1px solid transparent;
+
+	&:hover {
+		color: var(--accent);
+		background-color: var(--accent-soft);
+	}
+}
+
+/* Sizes */
+.link-button--sm {
+	padding: 0.375rem 0.75rem;
+	font-size: 0.85rem;
+}
+
+.link-button--md {
+	padding: 0.625rem 1.25rem;
+	font-size: 0.95rem;
+}
+
+.link-button--lg {
+	padding: 0.875rem 1.75rem;
+	font-size: 1.1rem;
+}
+
+.button-group {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+	margin: 1.5rem 0;
+	align-items: center;
+}
+
+.button-group--left {
+	justify-content: flex-start;
+}
+
+.button-group--center {
+	justify-content: center;
+}
+
+.button-group--right {
+	justify-content: flex-end;
+}
+
 /* --- View Transitions --- */
 
 @view-transition {