@koehler8/cms 1.0.0-beta.17 → 1.0.0-beta.19

package/README.md

@@ -5,6 +5,12 @@
 
 Vertex CMS is a lightweight, config-driven Vue 3 framework with theming, extensions, and SSG support.
 
+## Accessibility
+
+Vertex CMS targets **[WCAG 2.2 Level AA](https://www.w3.org/WAI/WCAG22/quickref/?currentsidebar=%23col_overview&versions=2.2&levels=aaa)** as a hard requirement for the bundled components, the `base` theme, and the page wrapper. Sites that ship on this framework with the bundled pieces inherit a skip link, single `<main>` landmark, real form labels with `aria-live` errors, visible focus rings, modal focus trap+restore, AA-verified palette contrast, and `prefers-reduced-motion` support out of the box.
+
+When extending or theming, **don't regress AA**. See the "Accessibility" section of [CLAUDE.md](CLAUDE.md#accessibility-wcag-22-level-aa--hard-requirement) for the requirements, the token naming conventions for safe colors, and the audit checklist to run when changing palette/markup/CSS.
+
 ## Quick Start
 
 ### 1. Create a site repo

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koehler8/cms",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.19",
   "description": "Vertex CMS — lightweight, config-driven Vue 3 framework with theming, extensions, and SSG support",
   "license": "MIT",
   "type": "module",

package/src/components/DraftGate.vue

@@ -0,0 +1,212 @@
+<template>
+  <section
+    class="draft-gate"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="draft-gate-title"
+    aria-describedby="draft-gate-description"
+  >
+    <div class="draft-gate-card" ref="cardRef" tabindex="-1">
+      <p class="draft-gate-eyebrow">Draft</p>
+      <h1 id="draft-gate-title" class="draft-gate-title">
+        This page is not yet public
+      </h1>
+      <p id="draft-gate-description" class="draft-gate-body">
+        {{ bodyText }}
+      </p>
+      <form class="draft-gate-form" @submit.prevent="handleSubmit" novalidate>
+        <label class="draft-gate-label" for="draft-gate-password">
+          Password
+        </label>
+        <input
+          id="draft-gate-password"
+          ref="inputRef"
+          v-model="passwordInput"
+          type="password"
+          autocomplete="current-password"
+          autocapitalize="off"
+          autocorrect="off"
+          spellcheck="false"
+          :aria-invalid="hasError ? 'true' : 'false'"
+          aria-describedby="draft-gate-error"
+          class="draft-gate-input"
+        />
+        <p
+          id="draft-gate-error"
+          class="draft-gate-error"
+          aria-live="polite"
+          role="status"
+        >
+          {{ errorMessage }}
+        </p>
+        <button type="submit" class="draft-gate-submit">
+          {{ submitLabel }}
+        </button>
+      </form>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, nextTick, onMounted, ref } from 'vue';
+
+const props = defineProps({
+  hasPassword: {
+    type: Boolean,
+    default: false,
+  },
+  errorMessage: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['submit']);
+
+const passwordInput = ref('');
+const inputRef = ref(null);
+const cardRef = ref(null);
+const hasError = computed(() => Boolean(props.errorMessage));
+
+const bodyText = computed(() =>
+  props.hasPassword
+    ? 'Enter the password to preview this content.'
+    : 'No password is required — submit to continue.',
+);
+
+const submitLabel = computed(() => (props.hasPassword ? 'Unlock' : 'Continue'));
+
+function handleSubmit() {
+  emit('submit', passwordInput.value);
+}
+
+onMounted(() => {
+  if (import.meta.env.SSR) return;
+  nextTick(() => {
+    inputRef.value?.focus();
+  });
+});
+</script>
+
+<style scoped>
+.draft-gate {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100dvh;
+  padding: clamp(1.5rem, 5vw, 3rem);
+  background: var(--brand-surface, #f7f7f8);
+  color: var(--brand-text, #1f2a44);
+  font-family: var(--ui-font-body, system-ui, -apple-system, sans-serif);
+}
+
+.draft-gate-card {
+  width: 100%;
+  max-width: 28rem;
+  padding: clamp(1.75rem, 4vw, 2.5rem);
+  background: var(--brand-surface-elevated, #ffffff);
+  border: 1px solid var(--brand-border, rgba(31, 42, 68, 0.12));
+  border-radius: clamp(12px, 2vw, 18px);
+  box-shadow: 0 18px 38px rgba(15, 22, 42, 0.08);
+  outline: none;
+}
+
+.draft-gate-eyebrow {
+  margin: 0 0 0.5rem;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--brand-text-muted, rgba(31, 42, 68, 0.6));
+}
+
+.draft-gate-title {
+  margin: 0 0 0.75rem;
+  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
+  line-height: 1.2;
+  font-weight: 700;
+}
+
+.draft-gate-body {
+  margin: 0 0 1.5rem;
+  font-size: 1rem;
+  line-height: 1.55;
+  color: var(--brand-text-muted, rgba(31, 42, 68, 0.75));
+}
+
+.draft-gate-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.draft-gate-label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--brand-text, #1f2a44);
+}
+
+.draft-gate-input {
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.65rem 0.85rem;
+  font-size: 1rem;
+  font-family: inherit;
+  background: var(--brand-surface, #ffffff);
+  color: inherit;
+  border: 1px solid var(--brand-border, rgba(31, 42, 68, 0.25));
+  border-radius: var(--brand-input-radius, 8px);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.draft-gate-input:focus-visible {
+  outline: 2px solid var(--brand-primary, #1f2a44);
+  outline-offset: 2px;
+  border-color: var(--brand-primary, #1f2a44);
+}
+
+.draft-gate-input[aria-invalid='true'] {
+  border-color: var(--brand-criticalText, #b3261e);
+}
+
+.draft-gate-error {
+  min-height: 1.25rem;
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--brand-criticalText, #b3261e);
+}
+
+.draft-gate-submit {
+  margin-top: 0.5rem;
+  min-height: 2.75rem;
+  padding: 0.7rem 1.4rem;
+  font-size: 1rem;
+  font-family: inherit;
+  font-weight: 600;
+  color: var(--brand-primary-cta-text, #ffffff);
+  background: var(--brand-primary-cta, var(--brand-primary, #1f2a44));
+  border: none;
+  border-radius: var(--brand-button-radius, 10px);
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
+}
+
+.draft-gate-submit:hover {
+  transform: translateY(-1px);
+}
+
+.draft-gate-submit:focus-visible {
+  outline: 2px solid var(--brand-primary, #1f2a44);
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .draft-gate-submit,
+  .draft-gate-input {
+    transition: none;
+  }
+  .draft-gate-submit:hover {
+    transform: none;
+  }
+}
+</style>

package/src/components/Home.vue

@@ -1,29 +1,39 @@
 <template>
-  <a class="cms-skip-link" href="#main-content">Skip to main content</a>
-  <IntroGate
-    :enabled="introGateEnabled"
-    v-bind="introGateProps"
-  />
-  <main id="main-content" tabindex="-1">
-    <component
-      v-for="entry in loadedComponents"
-      :is="entry.component"
-      :key="entry.key"
-      v-bind="entry.props"
+  <template v-if="isDraft && !isUnlocked">
+    <DraftGate
+      :has-password="hasPassword"
+      :error-message="errorMessage"
+      @submit="attemptUnlock"
     />
-  </main>
-  <ComingSoonModal
-    :open="isComingSoonVisible"
-    :title="comingSoonTitle"
-    :message="comingSoonMessage"
-    @close="closeComingSoon"
-  />
+  </template>
+  <template v-else>
+    <a class="cms-skip-link" href="#main-content">Skip to main content</a>
+    <IntroGate
+      :enabled="introGateEnabled"
+      v-bind="introGateProps"
+    />
+    <main id="main-content" tabindex="-1">
+      <component
+        v-for="entry in loadedComponents"
+        :is="entry.component"
+        :key="entry.key"
+        v-bind="entry.props"
+      />
+    </main>
+    <ComingSoonModal
+      :open="isComingSoonVisible"
+      :title="comingSoonTitle"
+      :message="comingSoonMessage"
+      @close="closeComingSoon"
+    />
+  </template>
 </template>
 
 <script setup>
 import { computed, nextTick, provide, watch } from 'vue';
 
 import ComingSoonModal from '../components/ComingSoonModal.vue';
+import DraftGate from '../components/DraftGate.vue';
 import IntroGate from '../components/IntroGate.vue';
 
 import { registry } from '../utils/componentRegistry.js';
@@ -31,6 +41,7 @@ import { usePageConfig } from '../composables/usePageConfig.js';
 import { useComponentResolver } from '../composables/useComponentResolver.js';
 import { usePageMeta } from '../composables/usePageMeta.js';
 import { useIntroGate } from '../composables/useIntroGate.js';
+import { useDraftGate } from '../composables/useDraftGate.js';
 import { useEngagementTracking } from '../composables/useEngagementTracking.js';
 import { useComingSoonInterstitial } from '../composables/useComingSoonInterstitial.js';
 
@@ -71,7 +82,15 @@ const { loadedComponents } = useComponentResolver({
 
 const { introGateEnabled, introGateProps } = useIntroGate({ siteData, pageContent });
 
-usePageMeta({ siteData, currentPage });
+const {
+  isDraft,
+  isUnlocked,
+  hasPassword,
+  errorMessage,
+  attemptUnlock,
+} = useDraftGate({ siteData, currentPage });
+
+usePageMeta({ siteData, currentPage, locale: () => props.locale });
 
 const {
   isComingSoonVisible,

package/src/composables/useDraftGate.js

@@ -0,0 +1,89 @@
+/**
+ * Reactive gate state for draft pages.
+ *
+ * - During SSR (vite-ssg pre-render), isUnlocked is always false so the
+ *   pre-rendered HTML on disk contains only the gate component, not the
+ *   page body. Crawlers and `curl` see a noindex page with no content.
+ * - In the browser, isUnlocked hydrates from sessionStorage so the gate
+ *   doesn't re-prompt while the user iterates between draft pages within
+ *   one tab. Closing the tab re-engages the gate (sessionStorage scope).
+ * - Password verification is hash-based: the Vite plugin replaces
+ *   site.draftPassword with site.draftPasswordHash (SHA-256 hex) at build
+ *   time so the plaintext never lands in the bundle. attemptUnlock hashes
+ *   the user's input with the same algorithm and compares.
+ * - Empty/missing hash is a deliberate fail-safe state: the gate still
+ *   appears, but accepts any input including empty. This makes the gate
+ *   visible even when the author hasn't picked a password yet — see
+ *   hasPassword in the return value.
+ */
+
+import { computed, ref } from 'vue';
+import { isPathDraft, getDraftPasswordHash } from '../utils/draftMode.js';
+import { sha256Hex } from '../utils/sha256.js';
+
+const SESSION_KEY = 'cms_draft_unlocked';
+
+function readUnlockedFromSession() {
+  if (typeof window === 'undefined') return false;
+  try {
+    return window.sessionStorage.getItem(SESSION_KEY) === '1';
+  } catch {
+    return false;
+  }
+}
+
+function persistUnlocked() {
+  if (typeof window === 'undefined') return;
+  try {
+    window.sessionStorage.setItem(SESSION_KEY, '1');
+  } catch {
+    /* sessionStorage may be blocked in private mode; gate falls back to
+       in-memory unlock for the lifetime of the page. */
+  }
+}
+
+export function useDraftGate({ siteData, currentPage }) {
+  const isDraft = computed(() => {
+    const page = currentPage.value || {};
+    return isPathDraft(siteData.value, page.path, page);
+  });
+
+  const expectedHash = computed(() => getDraftPasswordHash(siteData.value));
+  const hasPassword = computed(() => expectedHash.value.length > 0);
+
+  const isUnlocked = ref(import.meta.env.SSR ? false : readUnlockedFromSession());
+  const errorMessage = ref('');
+
+  async function attemptUnlock(input) {
+    const hash = expectedHash.value;
+    if (!hash) {
+      isUnlocked.value = true;
+      errorMessage.value = '';
+      persistUnlocked();
+      return true;
+    }
+    const provided = typeof input === 'string' ? input : '';
+    let providedHash = '';
+    try {
+      providedHash = await sha256Hex(provided);
+    } catch {
+      providedHash = '';
+    }
+    if (providedHash && providedHash === hash) {
+      isUnlocked.value = true;
+      errorMessage.value = '';
+      persistUnlocked();
+      return true;
+    }
+    errorMessage.value = 'Incorrect password.';
+    return false;
+  }
+
+  return {
+    isDraft,
+    isUnlocked,
+    hasPassword,
+    errorMessage,
+    attemptUnlock,
+  };
+}

package/src/composables/usePageConfig.js

@@ -26,6 +26,7 @@ export function usePageConfig({ pageId, pagePath, locale, onPageLoaded } = {}) {
     components: [],
     content: {},
     meta: {},
+    draft: undefined,
   });
   const componentKeys = ref([]);
   const isLoading = ref(false);
@@ -48,6 +49,7 @@ export function usePageConfig({ pageId, pagePath, locale, onPageLoaded } = {}) {
         components: Array.isArray(data.components) ? [...data.components] : [],
         content: data.content || {},
         meta: data.meta || {},
+        draft: data.draft,
       };
     };
 
@@ -69,6 +71,7 @@ export function usePageConfig({ pageId, pagePath, locale, onPageLoaded } = {}) {
             components: Array.isArray(data.components) ? [...data.components] : [],
             content: data.content || {},
             meta: data.meta || {},
+            draft: data.draft,
           };
         }
       }
@@ -85,6 +88,7 @@ export function usePageConfig({ pageId, pagePath, locale, onPageLoaded } = {}) {
         components: Array.isArray(firstData.components) ? [...firstData.components] : [],
         content: firstData.content || {},
         meta: firstData.meta || {},
+        draft: firstData.draft,
       };
     }
 
@@ -141,7 +145,7 @@ export function usePageConfig({ pageId, pagePath, locale, onPageLoaded } = {}) {
       if (import.meta.env.DEV) {
         console.error('[PageRenderer] Failed to load page configuration', error);
       }
-      currentPage.value = { id: '', path: '/', components: [], content: {}, meta: {} };
+      currentPage.value = { id: '', path: '/', components: [], content: {}, meta: {}, draft: undefined };
       pageContent.value = {};
       if (typeof onPageLoaded === 'function') {
         onPageLoaded({ config: null, page: null, content: {} });

package/src/composables/usePageMeta.js

@@ -1,5 +1,8 @@
 import { computed } from 'vue';
 import { useHead } from '@unhead/vue';
+import { isPathDraft } from '../utils/draftMode.js';
+import { buildCanonicalUrl } from '../utils/canonicalUrl.js';
+import { availableLocales as configAvailableLocales, baseLocale as configBaseLocale } from '../utils/loadConfig.js';
 
 const SPECIAL_PAGE_LABELS = {
   home: '',
@@ -35,13 +38,30 @@ function inferPageLabel(page) {
     .join(' / ');
 }
 
-export function usePageMeta({ siteData, currentPage }) {
+export function usePageMeta({ siteData, currentPage, locale }) {
   const siteTitle = computed(() => siteData.value?.site?.title || '');
   const siteDescription = computed(() => siteData.value?.site?.description || '');
+  const siteUrl = computed(() => siteData.value?.site?.url || '');
+  const localeValue = computed(() => {
+    if (typeof locale === 'function') return locale() || '';
+    if (typeof locale === 'string') return locale;
+    return '';
+  });
+
+  const isDraft = computed(() =>
+    isPathDraft(siteData.value, currentPage.value?.path, currentPage.value),
+  );
 
   const pageMetaTitle = computed(() => {
     const page = currentPage.value;
     const site = siteTitle.value;
+    // Draft pages emit a generic title so the page slug doesn't leak via
+    // <title> in the SSG-rendered HTML on disk. The tab title remains
+    // generic even after client-side unlock — for "iterate before launch"
+    // the URL bar already identifies the page.
+    if (isDraft.value) {
+      return site ? `Draft — ${site}` : 'Draft';
+    }
     const explicitTitle = page?.meta?.title;
     if (explicitTitle) {
       return explicitTitle;
@@ -54,6 +74,9 @@ export function usePageMeta({ siteData, currentPage }) {
   });
 
   const pageMetaDescription = computed(() => {
+    if (isDraft.value) {
+      return '';
+    }
     const explicitDescription = currentPage.value?.meta?.description;
     if (explicitDescription && explicitDescription.trim()) {
       return explicitDescription.trim();
@@ -61,16 +84,76 @@ export function usePageMeta({ siteData, currentPage }) {
     return siteDescription.value || '';
   });
 
+  // Canonical URL — base-locale URLs have no prefix; non-base locales get
+  // /{locale}/path. Drafts skip canonical (gated content shouldn't advertise
+  // an authoritative URL). Sites without a configured site.url skip too —
+  // we can't build an absolute URL.
+  const canonicalHref = computed(() => {
+    if (isDraft.value) return '';
+    if (!siteUrl.value) return '';
+    return buildCanonicalUrl({
+      siteUrl: siteUrl.value,
+      locale: localeValue.value,
+      baseLocale: configBaseLocale,
+      path: currentPage.value?.path || '/',
+    });
+  });
+
+  // hreflang alternates — only emitted when a site has more than one
+  // locale's content on disk. Includes one entry per available locale plus
+  // an `x-default` pointing at the base-locale URL (Google's preferred
+  // pattern for sites without explicit geo-targeting).
+  const hreflangLinks = computed(() => {
+    if (isDraft.value) return [];
+    if (!siteUrl.value) return [];
+    if (!Array.isArray(configAvailableLocales) || configAvailableLocales.length <= 1) return [];
+    const path = currentPage.value?.path || '/';
+    const links = [];
+    for (const code of configAvailableLocales) {
+      const href = buildCanonicalUrl({
+        siteUrl: siteUrl.value,
+        locale: code,
+        baseLocale: configBaseLocale,
+        path,
+      });
+      if (href) {
+        links.push({ rel: 'alternate', hreflang: code, href, key: `hreflang-${code}` });
+      }
+    }
+    const defaultHref = buildCanonicalUrl({
+      siteUrl: siteUrl.value,
+      locale: configBaseLocale,
+      baseLocale: configBaseLocale,
+      path,
+    });
+    if (defaultHref) {
+      links.push({ rel: 'alternate', hreflang: 'x-default', href: defaultHref, key: 'hreflang-x-default' });
+    }
+    return links;
+  });
+
   useHead(() => {
     const description = pageMetaDescription.value;
-    const meta = description
-      ? [{ name: 'description', content: description, key: 'description' }]
-      : [];
+    const meta = [];
+    if (description) {
+      meta.push({ name: 'description', content: description, key: 'description' });
+    }
+    if (isDraft.value) {
+      meta.push({ name: 'robots', content: 'noindex, nofollow', key: 'robots' });
+    }
+    const link = [];
+    if (canonicalHref.value) {
+      link.push({ rel: 'canonical', href: canonicalHref.value, key: 'canonical' });
+    }
+    for (const entry of hreflangLinks.value) {
+      link.push(entry);
+    }
     return {
       title: pageMetaTitle.value,
       meta,
+      link,
     };
   });
 
-  return { pageMetaTitle, pageMetaDescription };
+  return { pageMetaTitle, pageMetaDescription, isDraft, canonicalHref, hreflangLinks };
 }

package/src/router/index.js

@@ -3,7 +3,7 @@ import { h } from 'vue';
 
 import Home from '../components/Home.vue';
 
-import { SUPPORTED_LOCALES } from '../constants/locales.js';
+import { availableLocales, baseLocale } from '../utils/loadConfig.js';
 
 const LocaleLayout = {
   name: 'LocaleLayout',
@@ -12,57 +12,85 @@ const LocaleLayout = {
   },
 };
 
-export const routes = [
-  {
+// Locales that should match the `/:locale/...` route — every available
+// locale on disk EXCEPT the base. The base locale is served at the
+// unprefixed path; emitting `/{baseLocale}/path` would be a duplicate URL.
+//
+// Read at module-load time. The vite-plugin's generated entry calls
+// setConfigLoader() synchronously before importing the app, so by the
+// time this module is evaluated (inside main.js), the singletons are
+// populated.
+function computeLocalePrefixes() {
+  if (!Array.isArray(availableLocales)) return [];
+  return availableLocales.filter((l) => typeof l === 'string' && l !== baseLocale);
+}
+
+export function buildRoutes(localePrefixes = computeLocalePrefixes()) {
+  const homeRoute = {
     path: '/',
     name: 'Home',
     component: Home,
     props: { pageId: 'home', pagePath: '/' },
-  },
-  {
-    path: `/:locale(${SUPPORTED_LOCALES.join('|')})`,
-    component: LocaleLayout,
-    children: [
-      {
-        path: '',
-        name: 'HomeLocale',
-        component: Home,
-        props: (route) => ({ pageId: 'home', pagePath: '/', locale: route.params.locale }),
-      },
-      {
-        path: ':pathMatch(.*)*',
-        name: 'LocaleDynamicPage',
-        component: Home,
-        props: (route) => {
-          const pathMatch = route.params.pathMatch;
-          const slugSegments = Array.isArray(pathMatch) ? pathMatch : [pathMatch || ''];
-          const rawSlug = `/${slugSegments.filter(Boolean).join('/')}`;
-          const normalizedSlug = rawSlug.replace(/\/+/g, '/').replace(/\/$/, '') || '/';
-          return { pagePath: normalizedSlug, locale: route.params.locale };
-        },
-      },
-    ],
-  },
-  {
+  };
+
+  const catchAllRoute = {
     path: '/:pathMatch(.*)*',
     name: 'DynamicPage',
     component: Home,
     props: (route) => ({ pagePath: route.path || '/' }),
-  },
-];
+  };
+
+  if (!localePrefixes.length) {
+    // Single-locale site: don't register the locale-prefixed route at all.
+    // `/de/about` etc. fall into the catch-all → DynamicPage with a
+    // pagePath that won't match any page → home fallback.
+    return [homeRoute, catchAllRoute];
+  }
+
+  return [
+    homeRoute,
+    {
+      path: `/:locale(${localePrefixes.join('|')})`,
+      component: LocaleLayout,
+      children: [
+        {
+          path: '',
+          name: 'HomeLocale',
+          component: Home,
+          props: (route) => ({ pageId: 'home', pagePath: '/', locale: route.params.locale }),
+        },
+        {
+          path: ':pathMatch(.*)*',
+          name: 'LocaleDynamicPage',
+          component: Home,
+          props: (route) => {
+            const pathMatch = route.params.pathMatch;
+            const slugSegments = Array.isArray(pathMatch) ? pathMatch : [pathMatch || ''];
+            const rawSlug = `/${slugSegments.filter(Boolean).join('/')}`;
+            const normalizedSlug = rawSlug.replace(/\/+/g, '/').replace(/\/$/, '') || '/';
+            return { pagePath: normalizedSlug, locale: route.params.locale };
+          },
+        },
+      ],
+    },
+    catchAllRoute,
+  ];
+}
+
+export const routes = buildRoutes();
 
 function normalizeLocale(value = '') {
   return value.toLowerCase().split('-')[0];
 }
 
-export function applyRouterGuards(router) {
+export function applyRouterGuards(router, localePrefixes = computeLocalePrefixes()) {
   router.beforeEach((to) => {
     const rawLocale = (to.params.locale || '').toString().trim();
 
     if (rawLocale) {
       const normalized = normalizeLocale(rawLocale);
 
-      if (!SUPPORTED_LOCALES.includes(normalized)) {
+      if (!localePrefixes.includes(normalized)) {
         return { path: '/', replace: true };
       }
 
@@ -87,7 +115,7 @@ export function applyRouterGuards(router) {
       const navLang = (navigator.language || navigator.userLanguage || '').toString();
       const shortLang = normalizeLocale(navLang || '');
 
-      if (to.path === '/' && SUPPORTED_LOCALES.includes(shortLang)) {
+      if (to.path === '/' && localePrefixes.includes(shortLang)) {
         return { path: `/${shortLang}`, replace: true };
       }
     }

package/src/utils/canonicalUrl.js

@@ -0,0 +1,44 @@
+/**
+ * Single source of truth for the canonical URL formula.
+ *
+ * Used by:
+ *   - usePageMeta.js (emits <link rel="canonical"> + <link rel="alternate" hreflang>)
+ *   - sitemapGenerator.js (emits <loc> + <xhtml:link rel="alternate" hreflang>)
+ *
+ * URL space rule (matches Google / Stripe / GitHub conventions):
+ *   - Base locale → ${siteUrl}${path}     e.g. https://example.com/about
+ *   - Non-base    → ${siteUrl}/${locale}${path}   e.g. https://example.com/de/about
+ *
+ * Returns '' when siteUrl is missing — sitemaps require absolute URLs and
+ * canonical links without a host are useless. Callers treat '' as "skip".
+ */
+
+function normalizePath(value) {
+  if (typeof value !== 'string') return '/';
+  const trimmed = value.trim();
+  if (!trimmed) return '/';
+  let p = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+  p = p.replace(/\/+/g, '/').replace(/\/+$/, '');
+  return p || '/';
+}
+
+function normalizeLocale(value) {
+  if (typeof value !== 'string') return '';
+  const trimmed = value.trim().toLowerCase();
+  return trimmed;
+}
+
+export function buildCanonicalUrl({ siteUrl, locale, baseLocale, path } = {}) {
+  const host = typeof siteUrl === 'string' ? siteUrl.trim().replace(/\/+$/, '') : '';
+  if (!host) return '';
+
+  const normalizedPath = normalizePath(path);
+  const loc = normalizeLocale(locale);
+  const base = normalizeLocale(baseLocale);
+
+  if (!loc || loc === base) {
+    return normalizedPath === '/' ? `${host}/` : `${host}${normalizedPath}`;
+  }
+
+  return normalizedPath === '/' ? `${host}/${loc}` : `${host}/${loc}${normalizedPath}`;
+}

package/src/utils/draftMode.js

@@ -0,0 +1,65 @@
+/**
+ * Pure helpers for "draft mode" — letting authors mark a whole site, a URL
+ * prefix, or a single page as not-yet-public so search engines and casual
+ * visitors stay out while content is being iterated on.
+ *
+ * Used by:
+ *   - vite-plugin.js: emit Disallow lines in robots.txt, skip URLs in sitemap.xml
+ *   - usePageMeta.js: inject <meta name="robots" content="noindex,nofollow">
+ *   - useDraftGate.js: decide whether to render the password gate instead of
+ *     the page contents
+ *
+ * Resolution rule (page wins both ways, then site, then prefixes):
+ *   1. pageData.draft === true  → draft
+ *   2. pageData.draft === false → published (overrides site/prefix)
+ *   3. site.draft === true      → draft
+ *   4. any draftPaths prefix matches → draft
+ *   5. otherwise                → published
+ *
+ * Prefix match is path-segment-aware: "/blog" matches "/blog" and
+ * "/blog/2026/post" but NOT "/blog-archive". The literal prefix "/" matches
+ * only "/" itself; for whole-site draft, set site.draft = true instead.
+ */
+
+export function normalizeDraftPath(value) {
+  if (typeof value !== 'string') return null;
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  let p = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+  p = p.replace(/\/+/g, '/').replace(/\/+$/, '');
+  return p || '/';
+}
+
+export function pathMatchesPrefix(prefix, path) {
+  const np = normalizeDraftPath(prefix);
+  const target = normalizeDraftPath(path);
+  if (!np || !target) return false;
+  if (np === target) return true;
+  if (np === '/') return false;
+  return target.startsWith(`${np}/`);
+}
+
+export function isPathDraft(siteData, pagePath, pageData) {
+  if (pageData && typeof pageData === 'object') {
+    if (pageData.draft === true) return true;
+    if (pageData.draft === false) return false;
+  }
+
+  const site = siteData?.site;
+  if (!site || typeof site !== 'object') return false;
+
+  if (site.draft === true) return true;
+
+  const draftPaths = Array.isArray(site.draftPaths) ? site.draftPaths : [];
+  for (const prefix of draftPaths) {
+    if (pathMatchesPrefix(prefix, pagePath)) return true;
+  }
+
+  return false;
+}
+
+export function getDraftPasswordHash(siteData) {
+  const raw = siteData?.site?.draftPasswordHash;
+  if (typeof raw !== 'string') return '';
+  return raw.trim().toLowerCase();
+}

package/src/utils/loadConfig.js

@@ -307,13 +307,16 @@ let _loadConfigData = async () => {
 };
 
 let _availableLocales = [];
+let _baseLocale = '';
 
 export function setConfigLoader(instance) {
   if (!instance) return;
   _loadConfigData = instance.loadConfigData;
   _availableLocales = instance.availableLocales || [];
+  _baseLocale = typeof instance.baseLocale === 'string' ? instance.baseLocale : '';
 }
 
 export { _availableLocales as availableLocales };
+export { _baseLocale as baseLocale };
 
 export const loadConfigData = (...args) => _loadConfigData(...args);

package/src/utils/robotsGenerator.js

@@ -0,0 +1,62 @@
+/**
+ * Build robots.txt body from the inflated site config.
+ *
+ * Replaces the static cms/public/robots.txt — the plugin writes this string
+ * to siteRoot/public/robots.txt at config time so per-site draft state
+ * (site.draft, site.draftPaths, page.draft) regenerates the disallow list on
+ * every build.
+ *
+ * Always includes the framework-default disallows (/admin, /privacy, /terms,
+ * /cookies — these routes exist on every CMS site). Adds:
+ *   - "Disallow: /" when site.draft === true
+ *   - "Disallow: <prefix>" for each entry in site.draftPaths
+ *   - "Disallow: <path>" for each page with draft === true
+ *
+ * If sitemapUrl is provided, appends a "Sitemap: <url>" line.
+ */
+
+import { normalizeDraftPath } from './draftMode.js';
+
+const FRAMEWORK_DEFAULTS = ['/admin', '/privacy', '/terms', '/cookies'];
+
+export function buildRobotsTxt(siteConfig, sitemapUrl = '') {
+  const lines = ['User-agent: *'];
+
+  for (const p of FRAMEWORK_DEFAULTS) {
+    lines.push(`Disallow: ${p}`);
+  }
+
+  const site = siteConfig?.site || {};
+  const pages = siteConfig?.pages || {};
+
+  if (site.draft === true) {
+    lines.push('Disallow: /');
+  } else {
+    const additional = new Set();
+
+    const draftPaths = Array.isArray(site.draftPaths) ? site.draftPaths : [];
+    for (const p of draftPaths) {
+      const np = normalizeDraftPath(p);
+      if (np && !FRAMEWORK_DEFAULTS.includes(np)) additional.add(np);
+    }
+
+    for (const [, pageData] of Object.entries(pages)) {
+      if (!pageData || typeof pageData !== 'object') continue;
+      if (pageData.draft !== true) continue;
+      const np = normalizeDraftPath(pageData.path);
+      if (np && !FRAMEWORK_DEFAULTS.includes(np)) additional.add(np);
+    }
+
+    for (const p of Array.from(additional).sort()) {
+      lines.push(`Disallow: ${p}`);
+    }
+  }
+
+  const trimmedSitemap = (sitemapUrl || '').trim();
+  if (trimmedSitemap) {
+    lines.push('');
+    lines.push(`Sitemap: ${trimmedSitemap}`);
+  }
+
+  return `${lines.join('\n')}\n`;
+}

package/src/utils/sha256.js

@@ -0,0 +1,20 @@
+/**
+ * SHA-256 hex digest via Web Crypto API.
+ *
+ * Available in Node 19+ (globalThis.crypto.subtle), modern browsers, and
+ * happy-dom test environment (which inherits Node's globalThis.crypto). The
+ * CMS targets Node 20.19, so a single Web Crypto path is sufficient.
+ *
+ * Used by the draft gate: site.draftPassword is hashed at build time (in
+ * the Vite plugin) so the plaintext never reaches the bundle. At runtime,
+ * the user's input is hashed and compared against the stored hash.
+ */
+
+export async function sha256Hex(input) {
+  const text = typeof input === 'string' ? input : String(input ?? '');
+  const bytes = new TextEncoder().encode(text);
+  const hashBuffer = await globalThis.crypto.subtle.digest('SHA-256', bytes);
+  return Array.from(new Uint8Array(hashBuffer))
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('');
+}

package/src/utils/sitemapGenerator.js

@@ -0,0 +1,102 @@
+/**
+ * Build sitemap.xml from the inflated site config.
+ *
+ * Pages where isPathDraft() is true are skipped — drafts must not be in the
+ * sitemap. Returns '' when site.url is missing (the sitemap protocol requires
+ * absolute URLs); the plugin treats empty output as "do not write the file."
+ *
+ * Single-locale sites emit only <loc> per page. Multi-locale sites add
+ * <xhtml:link rel="alternate" hreflang="..." /> annotations per page (one
+ * per available locale plus an `x-default` pointing at the base-locale
+ * URL). The single-locale output stays byte-identical to pre-hreflang.
+ */
+
+import { isPathDraft, normalizeDraftPath } from './draftMode.js';
+import { buildCanonicalUrl } from './canonicalUrl.js';
+
+function escapeXml(value) {
+  return String(value).replace(/[<>&'"]/g, (c) => ({
+    '<': '&lt;',
+    '>': '&gt;',
+    '&': '&amp;',
+    "'": '&apos;',
+    '"': '&quot;',
+  }[c]));
+}
+
+export function buildSitemap(siteConfig, options = {}) {
+  const siteUrl = (siteConfig?.site?.url || '').trim().replace(/\/+$/, '');
+  if (!siteUrl) return '';
+
+  // Whole-site draft → no sitemap. robots.txt emits "Disallow: /" in this
+  // state, and listing URLs in the sitemap that the same robots blocks
+  // would be inconsistent (and would cause crawl-error noise in Search
+  // Console). Page-level draft:false in a fully-draft site only affects
+  // the runtime gate; it is not advertised to crawlers.
+  if (siteConfig?.site?.draft === true) return '';
+
+  const baseLocale = typeof options.baseLocale === 'string' ? options.baseLocale.toLowerCase() : '';
+  const availableLocales = Array.isArray(options.availableLocales)
+    ? options.availableLocales.map((l) => (typeof l === 'string' ? l.toLowerCase() : '')).filter(Boolean)
+    : [];
+  const isMultiLocale = availableLocales.length > 1;
+
+  const pages = siteConfig?.pages || {};
+  const entries = [];
+  const seenPaths = new Set();
+
+  for (const [, pageData] of Object.entries(pages)) {
+    if (!pageData || typeof pageData !== 'object') continue;
+    const pagePath = normalizeDraftPath(pageData.path) || '/';
+    if (isPathDraft(siteConfig, pagePath, pageData)) continue;
+    if (seenPaths.has(pagePath)) continue;
+    seenPaths.add(pagePath);
+
+    const baseUrl = buildCanonicalUrl({ siteUrl, baseLocale, locale: baseLocale, path: pagePath });
+    if (!baseUrl) continue;
+
+    const alternates = isMultiLocale
+      ? availableLocales.map((loc) => ({
+          hreflang: loc,
+          href: buildCanonicalUrl({ siteUrl, baseLocale, locale: loc, path: pagePath }),
+        }))
+      : [];
+    if (isMultiLocale) {
+      alternates.push({ hreflang: 'x-default', href: baseUrl });
+    }
+
+    entries.push({ loc: baseUrl, alternates });
+  }
+
+  if (entries.length === 0) return '';
+
+  entries.sort((a, b) => a.loc.localeCompare(b.loc));
+
+  const urlsetAttrs = isMultiLocale
+    ? 'xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml"'
+    : 'xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"';
+
+  const renderUrlEntry = (entry) => {
+    if (entry.alternates.length === 0) {
+      return `  <url><loc>${escapeXml(entry.loc)}</loc></url>`;
+    }
+    const altLines = entry.alternates
+      .map((a) => `    <xhtml:link rel="alternate" hreflang="${escapeXml(a.hreflang)}" href="${escapeXml(a.href)}"/>`)
+      .join('\n');
+    return `  <url>\n    <loc>${escapeXml(entry.loc)}</loc>\n${altLines}\n  </url>`;
+  };
+
+  const urlEntries = entries.map(renderUrlEntry).join('\n');
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset ${urlsetAttrs}>
+${urlEntries}
+</urlset>
+`;
+}
+
+export function getSitemapUrl(siteConfig) {
+  const siteUrl = (siteConfig?.site?.url || '').trim().replace(/\/+$/, '');
+  if (!siteUrl) return '';
+  return `${siteUrl}/sitemap.xml`;
+}

package/vite-plugin.js

@@ -12,8 +12,10 @@ import { createRequire } from 'node:module';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import vue from '@vitejs/plugin-vue';
 
-import { SUPPORTED_LOCALES } from './src/constants/locales.js';
 import { inflateFlatConfig } from './src/utils/inflateFlatConfig.js';
+import { buildRobotsTxt } from './src/utils/robotsGenerator.js';
+import { buildSitemap, getSitemapUrl } from './src/utils/sitemapGenerator.js';
+import { sha256Hex } from './src/utils/sha256.js';
 
 // ---- Helpers ----
 
@@ -22,6 +24,15 @@ function loadSplitConfig(contentLocaleDir) {
   if (!fs.existsSync(sitePath)) return null;
 
   const site = inflateFlatConfig(JSON.parse(fs.readFileSync(sitePath, 'utf-8')));
+  // The plaintext password is read at build time so the plugin can produce
+  // robots.txt / sitemap.xml without surfacing it; strip it out of the
+  // in-memory siteConfig so accidental future code paths can't pass it
+  // through to the bundle. The `transform` hook below replaces the
+  // plaintext with a SHA-256 hash before any JSON file is imported by the
+  // runtime.
+  if (site && typeof site === 'object') {
+    delete site.draftPassword;
+  }
   const sharedPath = path.join(contentLocaleDir, 'shared.json');
   const shared = fs.existsSync(sharedPath) ? inflateFlatConfig(JSON.parse(fs.readFileSync(sharedPath, 'utf-8'))) : {};
 
@@ -38,6 +49,29 @@ function loadSplitConfig(contentLocaleDir) {
   return { site, shared, pages };
 }
 
+// Replace site.json's plaintext draftPassword with a SHA-256 hash before
+// the JSON ever enters the bundle. Returns the original code untouched
+// when the file doesn't carry a password (or doesn't parse as JSON), so
+// non-CMS site.json files anywhere else in the project are unaffected.
+async function transformSiteJson(code) {
+  let parsed;
+  try {
+    parsed = JSON.parse(code);
+  } catch {
+    return null;
+  }
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return null;
+
+  const password = typeof parsed.draftPassword === 'string' ? parsed.draftPassword.trim() : '';
+  if (!('draftPassword' in parsed) && !password) return null;
+
+  delete parsed.draftPassword;
+  if (password) {
+    parsed.draftPasswordHash = await sha256Hex(password);
+  }
+  return JSON.stringify(parsed);
+}
+
 function normalizeRoutePath(value = '/') {
   if (typeof value !== 'string') return '/';
   const trimmed = value.trim();
@@ -286,16 +320,22 @@ export default function cmsPlugin(options = {}) {
   const {
     siteDir: siteDirOption = './site',
     frameworkRoot: frameworkRootOption = __dirname,
-    locales = SUPPORTED_LOCALES,
     themes: themePackages = [],
     extensions: extensionPackages = [],
   } = options;
+  // The previous `locales` option is no longer accepted: per-site available
+  // locales are now discovered from on-disk content directories. Passing
+  // `locales` is silently ignored (kept here as a destructure to swallow it
+  // gracefully; the `SUPPORTED_LOCALES` constant remains exported only for
+  // any consumer that imports it directly).
 
   // These are resolved relative to the project cwd at config time
   let siteDir;
   let siteRoot; // project root — parent of siteDir
   let frameworkRoot;
   let siteConfig;
+  let baseLocale = 'en';
+  let availableLocales = [];
   let pagePaths;
   let metadata;
   let tempIndexPath;
@@ -356,6 +396,30 @@ export default function cmsPlugin(options = {}) {
     mirrorDir(frameworkPublicDir, sitePublicDir);
   };
 
+  // Generate robots.txt and sitemap.xml from the inflated site config and
+  // write them to siteRoot/public/. Runs after syncPublicDir so dynamic
+  // output overwrites any framework or stale static copy. Sites pick up
+  // changes by rebuilding (the existing edit-JSON-rebuild-deploy flow).
+  const writeSeoFiles = () => {
+    const sitePublicDir = path.join(siteRoot, 'public');
+    fs.mkdirSync(sitePublicDir, { recursive: true });
+
+    const sitemapXml = buildSitemap(siteConfig, { availableLocales, baseLocale });
+    const sitemapPath = path.join(sitePublicDir, 'sitemap.xml');
+    if (sitemapXml) {
+      fs.writeFileSync(sitemapPath, sitemapXml, 'utf-8');
+    } else if (fs.existsSync(sitemapPath)) {
+      // Stale sitemap from a previous build (e.g. site.url was removed, or
+      // every page is now draft). Drop it so crawlers don't get a list of
+      // URLs that no longer apply.
+      try { fs.unlinkSync(sitemapPath); } catch { /* noop */ }
+    }
+
+    const sitemapUrl = sitemapXml ? getSitemapUrl(siteConfig) : '';
+    const robotsBody = buildRobotsTxt(siteConfig, sitemapUrl);
+    fs.writeFileSync(path.join(sitePublicDir, 'robots.txt'), robotsBody, 'utf-8');
+  };
+
   const cmsCore = {
     name: '@koehler8/cms',
     enforce: 'pre',
@@ -376,12 +440,24 @@ export default function cmsPlugin(options = {}) {
       const contentConfig = fs.existsSync(contentConfigPath)
         ? JSON.parse(fs.readFileSync(contentConfigPath, 'utf-8'))
         : {};
-      const baseLocale = contentConfig.baseLocale || 'en';
+      baseLocale = contentConfig.baseLocale || 'en';
       const configDir = path.join(contentDir, baseLocale);
       siteConfig = loadSplitConfig(configDir);
       if (!siteConfig) {
         throw new Error(`[@koehler8/cms] site config not found at ${configDir}`);
       }
+      // Discover locales actually present on disk: directories under
+      // content/ that contain a site.json. This becomes the authoritative
+      // list for both the SSG route fanout and the runtime locale-aware
+      // canonical/hreflang emission.
+      availableLocales = fs.existsSync(contentDir)
+        ? fs
+            .readdirSync(contentDir, { withFileTypes: true })
+            .filter((d) => d.isDirectory())
+            .map((d) => d.name)
+            .filter((name) => fs.existsSync(path.join(contentDir, name, 'site.json')))
+            .sort()
+        : [];
       pagePaths = collectPagePaths(siteConfig);
       metadata = extractSiteMetadata(siteConfig);
 
@@ -466,8 +542,14 @@ export default function cmsPlugin(options = {}) {
             const staticRoutes = new Set(['/admin']);
             pagePaths.forEach((routePath) => staticRoutes.add(routePath));
 
+            // Pre-render every page under each non-base locale prefix that
+            // actually has a content directory on disk. The base locale is
+            // served at the unprefixed path (it's already covered by
+            // staticRoutes) — emitting `/{baseLocale}/path` would create
+            // duplicate URLs that all render the same content.
+            const localePrefixes = availableLocales.filter((l) => l !== baseLocale);
             const localizedRoutes = new Set();
-            locales.forEach((locale) => {
+            localePrefixes.forEach((locale) => {
               pagePaths.forEach((routePath) => {
                 const localized =
                   routePath === '/' ? `/${locale}` : `/${locale}${routePath}`;
@@ -561,7 +643,12 @@ const loader = createConfigLoader(allModules);
 export const loadConfigData = loader.loadConfigData;
 export const mergeConfigTrees = loader.mergeConfigTrees;
 export const cloneConfig = loader.cloneConfig;
-export const availableLocales = loader.availableLocales;
+// availableLocales + baseLocale are emitted as build-time literals derived
+// from the same on-disk discovery the plugin uses for SSG includedRoutes
+// and sitemap generation. This guarantees the runtime sees the exact same
+// locale list as the build, regardless of glob-based heuristics.
+export const availableLocales = ${JSON.stringify(availableLocales)};
+export const baseLocale = ${JSON.stringify(baseLocale)};
 `;
       }
 
@@ -612,16 +699,37 @@ export const assetUrlMap = resolver.assetUrlMap;
       return null;
     },
 
+    async transform(code, id) {
+      // Strip plaintext draftPassword from any site.json under content/
+      // before it lands in the bundle. The runtime reads the resulting
+      // draftPasswordHash via siteData and verifies user input against
+      // the hash. enforce: 'pre' on this plugin runs the transform before
+      // Vite's built-in JSON plugin converts the file to a JS module.
+      if (!id) return null;
+      const idPath = id.split('?')[0];
+      if (!idPath.endsWith('/site.json')) return null;
+      if (!idPath.includes(`${path.sep}content${path.sep}`) && !idPath.includes('/content/')) {
+        return null;
+      }
+      const transformed = await transformSiteJson(code);
+      if (transformed == null) return null;
+      return { code: transformed, map: null };
+    },
+
     configResolved(resolvedConfig) {
       // Write temp files as soon as config is resolved so vite-ssg's
       // detectEntry (which runs before Vite's build lifecycle) finds them.
       writeTempFiles();
 
       // Mirror framework's public/ into the site's public/ so fonts, maps,
-      // robots.txt, etc. end up in dist. Site-specific files (favicon.ico,
-      // logo.png, og-image.jpg written by generate-public-assets) win over
-      // any accidental collisions because we skip files that already exist.
+      // etc. end up in dist. Site-specific files (favicon.ico, logo.png,
+      // og-image.jpg written by generate-public-assets) win over any
+      // accidental collisions because we skip files that already exist.
       syncPublicDir();
+
+      // robots.txt and sitemap.xml are generated from the inflated site
+      // config (so per-site draft state regenerates on every build).
+      writeSeoFiles();
     },
 
     buildEnd() {

package/public/robots.txt

@@ -1,5 +0,0 @@
-User-agent: *
-Disallow: /admin
-Disallow: /privacy
-Disallow: /terms
-Disallow: /cookies