@parche/core 0.3.0-alpha.0

package/src/integration/vite-plugin-parche.ts

@@ -0,0 +1,432 @@
+import fs from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import type { Plugin } from 'vite';
+import type { ResolvedRegistry } from './types.js';
+
+/**
+ * Resolve a bare specifier to an absolute path from @parche/core's own location.
+ *
+ * Generated virtual modules have no place on disk, so a bare `import ... from 'zod'`
+ * inside one is resolved by Vite relative to the consuming project root — which under
+ * pnpm's isolated node_modules will not see core's dependencies. Emitting the absolute
+ * path instead pins the import to the copy core itself declares.
+ *
+ * Uses `import.meta.resolve` rather than `require.resolve` so the package's `import`
+ * export condition wins: `require.resolve` picks the CJS entry, which Vite then inlines
+ * as ESM and blows up with "exports is not defined".
+ */
+function resolveFromCore(specifier: string): string {
+  try {
+    return fileURLToPath(import.meta.resolve(specifier));
+  } catch {
+    // Fall back to the bare specifier; the consumer may hoist or declare it itself.
+    return specifier;
+  }
+}
+
+/**
+ * A single variant of default props for a widget.
+ * Widgets can provide multiple variants (e.g., "minimal", "with image")
+ * so the builder can randomly pick one when adding a new section.
+ */
+interface DefaultVariant {
+  label?: string;
+  props: Record<string, unknown>;
+}
+
+/**
+ * Load widget default variants from a sibling `.defaults.json` file.
+ * Supports two formats:
+ *   - Array of variants: [{ label?: string, props: {...} }, ...]
+ *   - Single props object: { title: "...", ... } (wrapped as one variant)
+ * Returns null if the file doesn't exist or can't be parsed.
+ */
+function loadWidgetDefaults(astroFilePath: string): DefaultVariant[] | null {
+  const defaultsPath = astroFilePath.replace(/\.astro$/, '.defaults.json');
+  try {
+    const raw = JSON.parse(fs.readFileSync(defaultsPath, 'utf-8'));
+    if (Array.isArray(raw)) {
+      // Array format: each element must have a `props` field
+      return raw.map((entry: unknown) => {
+        if (entry && typeof entry === 'object' && 'props' in entry) {
+          return entry as DefaultVariant;
+        }
+        // Bare props object inside array
+        return { props: entry as Record<string, unknown> };
+      });
+    }
+    // Single object format: wrap as one variant
+    return [{ props: raw as Record<string, unknown> }];
+  } catch {
+    return null;
+  }
+}
+
+const PARCHE_PREFIX = 'parche:';
+const VIRTUAL_PREFIX = '\0parche:';
+const WIDGET_MAP_ID = 'parche:registry/widgets';
+const WIDGET_MAP_VIRTUAL = '\0parche:registry/widgets';
+const TEMPLATE_MAP_ID = 'parche:registry/templates';
+const TEMPLATE_MAP_VIRTUAL = '\0parche:registry/templates';
+const I18N_CONFIG_ID = 'parche:config/i18n';
+const I18N_CONFIG_VIRTUAL = '\0parche:config/i18n';
+const THEMES_CONFIG_ID = 'parche:config/themes';
+const THEMES_CONFIG_VIRTUAL = '\0parche:config/themes';
+const STYLES_CONFIG_ID = 'parche:config/styles';
+const STYLES_CONFIG_VIRTUAL = '\0parche:config/styles';
+
+// Core's base.css is the Tailwind root (it has `@import "tailwindcss"`). We
+// append each parche's absolute @source globs into it at transform time —
+// Tailwind v4 only honors @source in the root's own cascade, and only absolute
+// paths reach sibling packages once installed from npm.
+const BASE_CSS_PATH = fileURLToPath(new URL('../styles/base.css', import.meta.url));
+const WIDGET_SCHEMAS_ID = 'parche:registry/widgetSchemas';
+const WIDGET_SCHEMAS_VIRTUAL = '\0parche:registry/widgetSchemas';
+const RESOLVERS_ID = 'parche:registry/resolvers';
+const RESOLVERS_VIRTUAL = '\0parche:registry/resolvers';
+const APP_CONFIG_PREFIX = 'parche:app/';
+const APP_CONFIG_VIRTUAL_PREFIX = '\0parche:app/';
+
+/**
+ * Extract a widget key from a virtual module ID.
+ * Widgets use the full path after the prefix to avoid collisions.
+ * Atoms use the short name (last segment).
+ *
+ * 'parche:widgets/hero/Hero'    → 'hero/Hero'
+ * 'parche:widgets/legacy/Hero'  → 'legacy/Hero'
+ * 'parche:primitives/Button'         → 'Button'
+ */
+function extractWidgetKey(virtualId: string): string {
+  if (virtualId.startsWith('parche:widgets/')) {
+    return virtualId.replace('parche:widgets/', '');
+  }
+  const path = virtualId.replace('parche:', '');
+  return path.split('/').pop()!;
+}
+
+/**
+ * Extract a template key from a virtual module ID.
+ * 'parche:templates/contact' → 'contact'
+ */
+function extractTemplateKey(virtualId: string): string {
+  return virtualId.replace('parche:templates/', '');
+}
+
+/**
+ * Generate a JS module that exports the widget map.
+ */
+function generateWidgetMapModule(registry: ResolvedRegistry): string {
+  const entries: { varName: string; key: string; importPath: string }[] = [];
+  let index = 0;
+
+  for (const virtualId of Object.keys(registry.modules)) {
+    if (virtualId.startsWith('parche:widgets/') || virtualId.startsWith('parche:primitives/')) {
+      const key = extractWidgetKey(virtualId);
+      entries.push({ varName: `W${index}`, key, importPath: virtualId });
+      index++;
+    }
+  }
+
+  const imports = entries.map((e) => `import ${e.varName} from '${e.importPath}';`).join('\n');
+  const mapEntries = entries.map((e) => `  '${e.key}': ${e.varName},`).join('\n');
+
+  return `${imports}
+
+export const widgetMap = {
+${mapEntries}
+};
+`;
+}
+
+/**
+ * Generate a JS module that exports the template map.
+ * The injected catch-all route imports this to render templates by name.
+ */
+function generateTemplateMapModule(registry: ResolvedRegistry): string {
+  const entries: { varName: string; key: string; virtualId: string }[] = [];
+  let index = 0;
+
+  for (const virtualId of Object.keys(registry.modules)) {
+    if (virtualId.startsWith('parche:templates/')) {
+      const key = extractTemplateKey(virtualId);
+      entries.push({ varName: `T${index}`, key, virtualId });
+      index++;
+    }
+  }
+
+  const imports = entries.map((e) => `import ${e.varName} from '${e.virtualId}';`).join('\n');
+  const mapEntries = entries.map((e) => `  '${e.key}': ${e.varName},`).join('\n');
+
+  return `${imports}
+
+export const templateMap = {
+${mapEntries}
+};
+`;
+}
+
+/**
+ * Generate a JS module that exports i18n config.
+ */
+function generateI18nConfigModule(registry: ResolvedRegistry): string {
+  return `export const locales = ${JSON.stringify(registry.i18n.locales)};
+export const defaultLocale = ${JSON.stringify(registry.i18n.defaultLocale)};
+`;
+}
+
+/**
+ * Generate a JS module that exports available themes.
+ */
+function generateThemesConfigModule(registry: ResolvedRegistry): string {
+  return `export const themes = ${JSON.stringify(registry.themes)};
+export const showPanel = ${JSON.stringify(registry.showPanel)};
+`;
+}
+
+/**
+ * Generate the styles entry: side-effect CSS imports for every file the
+ * imported parches contribute (plus any user entry). Empty when none — the
+ * base look ships via BaseLayout's own base.css regardless.
+ */
+function generateStylesModule(registry: ResolvedRegistry): string {
+  return registry.styleEntries.map((p) => `import ${JSON.stringify(p)};`).join('\n') + '\n';
+}
+
+/**
+ * Tailwind `@source` directives (absolute globs) for every parche's component
+ * files, appended into base.css so the classes those components use are
+ * generated — including when the parches are installed from npm, where relative
+ * @source paths can't reach sibling packages. Absolute paths come from each
+ * parche's factory.
+ */
+function generateSourceDirectives(registry: ResolvedRegistry): string {
+  return registry.contentGlobs.map((g) => `@source ${JSON.stringify(g)};`).join('\n');
+}
+
+/**
+ * Derive the palette category from a widget virtual ID.
+ * 'parche:widgets/hero/Hero'           → 'hero'
+ * 'parche:widgets/call-to-action/CTA'  → 'call-to-action'
+ */
+function extractWidgetCategory(virtualId: string): string {
+  const after = virtualId.replace('parche:widgets/', '');
+  const slashIdx = after.lastIndexOf('/');
+  return slashIdx >= 0 ? after.slice(0, slashIdx) : after;
+}
+
+/**
+ * Convert a PascalCase component name to a human-readable label.
+ * Splits at lowercase→uppercase transitions to preserve acronyms.
+ * 'FeaturesList' → 'Features List'
+ * 'CallToAction' → 'Call To Action'
+ * 'FAQs'         → 'FAQs'   (no lowercase→uppercase transition)
+ */
+function humanLabel(name: string): string {
+  return name.replace(/([a-z])([A-Z])/g, '$1 $2').trim();
+}
+
+/**
+ * Generate a JS module that exports:
+ *  - `widgetSchemas`  — JSON Schema per widget (from Zod v4 toJSONSchema)
+ *  - `widgetMeta`     — label / category / description / defaultProps / ui per widget
+ *
+ * Widgets with a sibling `.props.ts` get a full schema + metadata.
+ * Widgets without one get only basic metadata (no schema / no form in builder).
+ */
+function generateWidgetSchemasModule(registry: ResolvedRegistry): string {
+  const imports: string[] = [`import { z } from ${JSON.stringify(resolveFromCore('zod'))};`];
+  const schemaEntries: string[] = [];
+  const metaEntries: string[] = [];
+  let index = 0;
+
+  for (const [virtualId, filePath] of Object.entries(registry.modules)) {
+    if (!virtualId.startsWith('parche:widgets/')) continue;
+    if (!filePath.endsWith('.astro')) continue;
+
+    const key = extractWidgetKey(virtualId);
+
+    // Layout widgets (layout/Header, layout/Footer) are structural — skip builder palette
+    if (key.startsWith('layout/')) continue;
+
+    const propsPath = filePath.replace(/\.astro$/, '.props.ts');
+    const hasProps = fs.existsSync(propsPath);
+    const variants = loadWidgetDefaults(filePath);
+    const variantsJson = JSON.stringify(variants ?? [{ props: {} }]);
+    const defaultPropsJson = JSON.stringify(variants?.[0]?.props ?? {});
+
+    if (hasProps) {
+      const varName = `p${index}`;
+      imports.push(`import { schema as ${varName}_s, meta as ${varName}_m } from ${JSON.stringify(propsPath)};`);
+
+      schemaEntries.push(`  ${JSON.stringify(key)}: z.toJSONSchema(${varName}_s)`);
+
+      metaEntries.push(`  ${JSON.stringify(key)}: {
+    label: ${varName}_m?.widget?.label ?? ${JSON.stringify(humanLabel(key))},
+    category: ${varName}_m?.widget?.category ?? ${JSON.stringify(extractWidgetCategory(virtualId))},
+    description: ${varName}_m?.widget?.description ?? '',
+    icon: ${varName}_m?.widget?.icon ?? '',
+    defaultProps: ${defaultPropsJson},
+    defaultVariants: ${variantsJson},
+    ui: ${varName}_m?.ui ?? {},
+  }`);
+      index++;
+    } else {
+      // No .props.ts — basic meta only, no schema
+      metaEntries.push(`  ${JSON.stringify(key)}: {
+    label: ${JSON.stringify(humanLabel(key))},
+    category: ${JSON.stringify(extractWidgetCategory(virtualId))},
+    description: '',
+    icon: '',
+    defaultProps: ${defaultPropsJson},
+    defaultVariants: ${variantsJson},
+    ui: {},
+  }`);
+    }
+  }
+
+  return `${imports.join('\n')}
+
+export const widgetSchemas = {
+${schemaEntries.join(',\n')}
+};
+
+export const widgetMeta = {
+${metaEntries.join(',\n')}
+};
+`;
+}
+
+/**
+ * Generate a JS module that aggregates all app resolvers.
+ * Exports resolveContent(slug, locale, opts) and getResolverPaths(locales, defaultLocale, opts).
+ */
+function generateResolversModule(registry: ResolvedRegistry): string {
+  if (registry.resolvers.length === 0) {
+    return `
+export async function resolveContent() { return null; }
+export async function getResolverPaths() { return []; }
+`;
+  }
+
+  const imports: string[] = [];
+  const resolverNames: string[] = [];
+
+  registry.resolvers.forEach((r, i) => {
+    const varResolve = `resolve_${i}`;
+    const varPaths = `getPaths_${i}`;
+    imports.push(
+      `import { resolve as ${varResolve}, getPaths as ${varPaths} } from ${JSON.stringify(r.entrypoint)};`,
+    );
+    resolverNames.push(`{ resolve: ${varResolve}, getPaths: ${varPaths} }`);
+  });
+
+  return `${imports.join('\n')}
+
+const resolvers = [${resolverNames.join(', ')}];
+
+export async function resolveContent(slug, locale, opts) {
+  for (const r of resolvers) {
+    const result = await r.resolve(slug, locale, opts);
+    if (result) return result;
+  }
+  return null;
+}
+
+export async function getResolverPaths(locales, defaultLocale, opts) {
+  const all = [];
+  for (const r of resolvers) {
+    const paths = await r.getPaths(locales, defaultLocale, opts);
+    all.push(...paths);
+  }
+  return all;
+}
+`;
+}
+
+export function vitePluginParche(registry: ResolvedRegistry): Plugin {
+  return {
+    name: 'vite-plugin-parche',
+    enforce: 'pre',
+
+    resolveId(id) {
+      if (id === WIDGET_MAP_ID) return WIDGET_MAP_VIRTUAL;
+      if (id === TEMPLATE_MAP_ID) return TEMPLATE_MAP_VIRTUAL;
+      if (id === I18N_CONFIG_ID) return I18N_CONFIG_VIRTUAL;
+      if (id === THEMES_CONFIG_ID) return THEMES_CONFIG_VIRTUAL;
+      if (id === STYLES_CONFIG_ID) return STYLES_CONFIG_VIRTUAL;
+
+      if (id === WIDGET_SCHEMAS_ID) return WIDGET_SCHEMAS_VIRTUAL;
+      if (id === RESOLVERS_ID) return RESOLVERS_VIRTUAL;
+      if (id.startsWith(APP_CONFIG_PREFIX)) return '\0' + id;
+      if (id.startsWith(PARCHE_PREFIX)) {
+        return '\0' + id;
+      }
+    },
+
+    load(id) {
+      // Feed Tailwind's root (core's base.css) with each parche's absolute
+      // @source globs, appended to the file's own content. Done in `load` (not
+      // `transform`) so @tailwindcss/vite compiles the augmented CSS regardless
+      // of plugin ordering. Absolute paths are the only ones that reach sibling
+      // packages once installed from npm.
+      if (registry.contentGlobs.length > 0 && id.split('?')[0] === BASE_CSS_PATH) {
+        const css = fs.readFileSync(BASE_CSS_PATH, 'utf-8');
+        this.addWatchFile(BASE_CSS_PATH);
+        return `${css}\n${generateSourceDirectives(registry)}\n`;
+      }
+
+      if (id === WIDGET_MAP_VIRTUAL) return generateWidgetMapModule(registry);
+      if (id === TEMPLATE_MAP_VIRTUAL) return generateTemplateMapModule(registry);
+      if (id === I18N_CONFIG_VIRTUAL) return generateI18nConfigModule(registry);
+      if (id === THEMES_CONFIG_VIRTUAL) return generateThemesConfigModule(registry);
+      if (id === STYLES_CONFIG_VIRTUAL) return generateStylesModule(registry);
+      if (id === RESOLVERS_VIRTUAL) return generateResolversModule(registry);
+      if (id === WIDGET_SCHEMAS_VIRTUAL) {
+        // Watch .props.ts and .defaults.json files for HMR
+        for (const [virtualId, filePath] of Object.entries(registry.modules)) {
+          if (!virtualId.startsWith('parche:widgets/') || !filePath.endsWith('.astro')) continue;
+          for (const ext of ['.props.ts', '.defaults.json']) {
+            const sibling = filePath.replace(/\.astro$/, ext);
+            if (fs.existsSync(sibling)) {
+              this.addWatchFile(sibling);
+            }
+          }
+        }
+        return generateWidgetSchemasModule(registry);
+      }
+
+      // App config virtual modules: parche:app/{name}
+      if (id.startsWith(APP_CONFIG_VIRTUAL_PREFIX)) {
+        const appName = id.slice(APP_CONFIG_VIRTUAL_PREFIX.length);
+        const app = registry.apps.find((a) => a.name === appName);
+        return `export default ${JSON.stringify(app?.config ?? {})};\n`;
+      }
+
+      if (!id.startsWith(VIRTUAL_PREFIX)) return;
+
+      const virtualId = id.slice(1); // strip \0
+      const resolved = registry.modules[virtualId];
+
+      if (!resolved) {
+        this.error(`[parche] Unknown virtual module: ${virtualId}`);
+        return;
+      }
+
+      // Watch the resolved file for HMR
+      this.addWatchFile(resolved);
+
+      const quotedPath = JSON.stringify(resolved);
+
+      // CSS files are side-effect imports (no exports)
+      if (resolved.endsWith('.css')) {
+        return `import ${quotedPath};`;
+      }
+
+      // Use named exports for utility modules, default export for components
+      if (registry.namedExportModules.has(virtualId)) {
+        return `export * from ${quotedPath};`;
+      }
+      return `export { default } from ${quotedPath};`;
+    },
+  };
+}

package/src/layouts/BaseLayout.astro

@@ -0,0 +1,121 @@
+---
+import '../styles/base.css';
+import { ClientRouter } from 'astro:transitions';
+import Font from 'astro/components/Font.astro';
+import { parcheFontDefs } from '../config/font-variables.js';
+import type { ResolvedMetadata } from '../utils/metadata';
+import { buildRobotsContent, buildBreadcrumbs, buildJsonLdGraph } from '../utils/metadata';
+import type { SiteConfig } from '../types/config';
+
+interface Props {
+  metadata: ResolvedMetadata;
+  config: SiteConfig;
+  lang?: string;
+}
+
+const { metadata, config, lang } = Astro.props;
+
+const locale = lang ?? metadata.locale ?? 'en';
+const canonicalURL = metadata.canonical
+  || (Astro.site ? new URL(Astro.url.pathname, Astro.site).href : Astro.url.pathname);
+const ogImageURL = metadata.ogImage && Astro.site
+  ? new URL(metadata.ogImage, Astro.site).href
+  : metadata.ogImage;
+
+const robotsContent = buildRobotsContent(metadata);
+const siteUrl = Astro.site?.href ?? config.site.url ?? '';
+const breadcrumbs = siteUrl ? buildBreadcrumbs(Astro.url.pathname, siteUrl, metadata.title) : undefined;
+const jsonLdGraph = buildJsonLdGraph(metadata, canonicalURL, siteUrl, config, breadcrumbs);
+
+const verification = config.seo?.verification;
+const preconnect = config.seo?.preconnect ?? [];
+const twitterHandle = config.metadata?.twitterHandle;
+const article = metadata.ogType === 'article' ? metadata.article : undefined;
+---
+
+<html lang={locale}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="generator" content={Astro.generator} />
+
+    <title>{metadata.title}</title>
+    {metadata.description && <meta name="description" content={metadata.description} />}
+    {metadata.keywords && <meta name="keywords" content={metadata.keywords} />}
+    <link rel="canonical" href={canonicalURL} />
+    <meta name="robots" content={robotsContent} />
+
+    {/* Verification tokens */}
+    {verification?.google && <meta name="google-site-verification" content={verification.google} />}
+    {verification?.bing && <meta name="msvalidate.01" content={verification.bing} />}
+    {verification?.yandex && <meta name="yandex-verification" content={verification.yandex} />}
+    {verification?.pinterest && <meta name="p:domain_verify" content={verification.pinterest} />}
+
+    {/* Open Graph */}
+    <meta property="og:title" content={metadata.ogTitle} />
+    {metadata.ogDescription && <meta property="og:description" content={metadata.ogDescription} />}
+    <meta property="og:url" content={canonicalURL} />
+    <meta property="og:type" content={metadata.ogType} />
+    <meta property="og:site_name" content={metadata.siteName} />
+    {ogImageURL && <meta property="og:image" content={ogImageURL} />}
+    <meta property="og:locale" content={locale} />
+
+    {/* Article-specific OG tags */}
+    {article?.author && <meta name="author" content={article.author} />}
+    {article?.publishedDate && <meta property="article:published_time" content={article.publishedDate} />}
+    {article?.modifiedDate && <meta property="article:modified_time" content={article.modifiedDate} />}
+    {article?.section && <meta property="article:section" content={article.section} />}
+    {article?.tags?.map((tag) => <meta property="article:tag" content={tag} />)}
+
+    {/* Twitter Card */}
+    <meta name="twitter:card" content={metadata.twitterCard} />
+    <meta name="twitter:title" content={metadata.ogTitle} />
+    {metadata.ogDescription && <meta name="twitter:description" content={metadata.ogDescription} />}
+    {ogImageURL && <meta name="twitter:image" content={ogImageURL} />}
+    {twitterHandle && <meta name="twitter:site" content={twitterHandle} />}
+
+    {/* Resource hints */}
+    {preconnect.map((url) => <link rel="preconnect" href={url} />)}
+
+    {/* JSON-LD Structured Data (@graph) */}
+    <script type="application/ld+json" set:html={jsonLdGraph} />
+
+    {/* Fonts: driven by parcheFonts (single source of truth), never hardcoded here. */}
+    {parcheFontDefs.map((f) => <Font cssVariable={f.cssVariable} preload={f.preload} />)}
+
+    {/* Theme init: runs before body renders to prevent flash */}
+    <script is:inline>
+      (function() {
+        var d = document.documentElement;
+        var stored = localStorage.getItem('theme');
+        if (stored === 'dark' || (!stored && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+          d.classList.add('dark');
+        }
+        var siteTheme = localStorage.getItem('site-theme');
+        if (siteTheme) {
+          d.setAttribute('data-theme', siteTheme);
+        }
+
+        // Preserve theme state across View Transitions
+        document.addEventListener('astro:before-swap', function(e) {
+          var html = document.documentElement;
+          var newHtml = e.newDocument.documentElement;
+          if (html.classList.contains('dark')) {
+            newHtml.classList.add('dark');
+          }
+          var theme = html.getAttribute('data-theme');
+          if (theme) {
+            newHtml.setAttribute('data-theme', theme);
+          }
+        });
+      })();
+    </script>
+
+    <ClientRouter />
+
+    <slot name="head" />
+  </head>
+  <body class="min-h-screen bg-background text-text flex flex-col">
+    <slot />
+  </body>
+</html>

package/src/routes/404.astro

@@ -0,0 +1,46 @@
+---
+import 'parche:config/styles';
+import BaseLayout from 'parche:layouts/BaseLayout';
+import ThemePanel from 'parche:components/ThemePanel';
+import LayoutRenderer from 'parche:LayoutRenderer';
+import config from 'parche:config';
+import { showPanel } from 'parche:config/themes';
+import { defaultLocale } from 'parche:config/i18n';
+import { resolveMetadata } from 'parche:utils/metadata';
+import { resolveLayout } from 'parche:utils/layout';
+
+const locale = Astro.currentLocale || defaultLocale;
+const layoutSections = await resolveLayout('default', locale, defaultLocale);
+
+const metadata = resolveMetadata(
+  {
+    title: `Page Not Found — ${config.site.name}`,
+    description: "The page you're looking for doesn't exist.",
+    metadata: { noindex: true },
+  },
+  config,
+  { locale },
+);
+---
+
+<BaseLayout metadata={metadata} config={config} lang={locale}>
+  <LayoutRenderer layoutSections={layoutSections} pageTemplate="dynamic">
+    <section class="py-16 md:py-24">
+      <div class="mx-auto max-w-6xl px-4 text-center md:px-6">
+        <p class="mb-4 text-8xl font-bold text-primary">404</p>
+        <h1 class="type-h1 mb-4">Page not found</h1>
+        <p class="type-body mx-auto mb-8 max-w-md text-muted">
+          Sorry, the page you're looking for doesn't exist or has been moved.
+        </p>
+        <a
+          href="/"
+          class="inline-flex items-center justify-center gap-2 rounded-full bg-primary px-5 py-2.5 text-sm font-semibold text-on-primary no-underline shadow-sm transition-all hover:opacity-90"
+        >
+          Back to Home
+        </a>
+      </div>
+    </section>
+  </LayoutRenderer>
+
+  {showPanel && <ThemePanel />}
+</BaseLayout>