@koehler8/cms 1.0.0-beta.9 → 1.1.0

package/src/components/StickyCTA.vue

@@ -220,9 +220,13 @@ function scrollTargetWithOffset(target) {
   padding: 14px 24px;
   border: none;
   border-radius: var(--brand-button-radius, 14px);
+  /* The default 3-stop gradient previously failed contrast at the mid stop
+     (#0a0a0d on #9a2eff = 3.96:1). Mid stop darkened to #7e23d5 → 5.34:1
+     with the dark text. Sites overriding --brand-primary-cta-gradient
+     are responsible for verifying contrast against --brand-primary-cta-text. */
   background: var(
     --brand-primary-cta-gradient,
-    linear-gradient(135deg, #ff2d86 0%, #9a2eff 55%, #27f3ff 100%)
+    linear-gradient(135deg, #ff2d86 0%, #7e23d5 55%, #2bb8d9 100%)
   );
   color: var(--brand-primary-cta-text, #0a0a0d);
   font-size: clamp(0.95rem, 2.5vw, 1.05rem);
@@ -260,4 +264,22 @@ function scrollTargetWithOffset(target) {
   transform: translateY(30%);
   opacity: 0;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .sticky-cta__button,
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    transition: none;
+  }
+
+  .sticky-cta__button:hover,
+  .sticky-cta__button:active {
+    transform: none;
+  }
+
+  .slide-up-enter-from,
+  .slide-up-leave-to {
+    transform: none;
+  }
+}
 </style>

package/src/components/Team.vue

@@ -337,7 +337,9 @@ const buildSocialAriaLabel = (memberName, social) => {
   font-size: 0.72rem;
   letter-spacing: 0.18em;
   text-transform: uppercase;
-  color: var(--ui-text-muted, var(--brand-border-highlight, rgba(79, 108, 240, 0.8)));
+  /* AA-safe muted text on the white card. Don't fall through to a brand
+     color rgba — it composites below 4.5:1. */
+  color: var(--team-role-color, var(--ui-text-muted, #54627b));
 }
 
 .team-card__bio {

package/src/composables/useComponentResolver.js

@@ -1,5 +1,6 @@
 import { computed } from 'vue';
 import { extensionComponentDefinitionsBySource, extensionComponentSources, getExtensionContentDefaults } from '../extensions/extensionLoader.js';
+import { getSiteComponent } from '../utils/componentRegistry.js';
 import { APP_VERSION } from '../utils/appInfo.js';
 import { satisfiesMinVersion } from '../utils/semver.js';
 import { validateRequiredContentPaths } from '../utils/contentRequirements.js';
@@ -8,6 +9,8 @@ import { mergeConfigTrees } from '../utils/loadConfig.js';
 const extensionDefinitionsBySource = extensionComponentDefinitionsBySource || {};
 const extensionSourcesByName = extensionComponentSources || {};
 
+const SITE_SOURCE = 'site';
+
 const normalizePageKey = (value) => (value || '').toString().trim().toLowerCase();
 const normalizeSourceKey = (value) => (value || '').toString().trim().toLowerCase();
 
@@ -49,12 +52,57 @@ export function useComponentResolver({ componentKeys, pageContent, currentPage,
           name = entry;
         }
 
+        // Source-qualified string syntax ("site:Name", "slug:Name") — same
+        // meaning as a { name, source } object entry. Component names can
+        // never contain a colon (^[A-Z][A-Za-z0-9]+$), so the split is safe.
+        if (!source && name.includes(':')) {
+          const splitAt = name.indexOf(':');
+          source = name.slice(0, splitAt);
+          name = name.slice(splitAt + 1);
+        }
+
         if (!enabled) return null;
 
+        let normalizedSource = normalizeSourceKey(source) || null;
+
+        // ---- Site-local components ---------------------------------
+        // Pages can reference Vue files dropped into `site/components/`
+        // by basename (e.g. site/components/PropertyCard.vue → "PropertyCard").
+        // Resolution priority: site > extension > bundled. Use `site:Name`
+        // to disambiguate when both site and extension/bundled define a
+        // component with the same name.
+        if (normalizedSource === SITE_SOURCE) {
+          const siteComp = getSiteComponent(name);
+          if (!siteComp) {
+            reportExtensionIssue(
+              `Component "site:${name}" is not registered. Add a Vue file to site/components/${name}.vue.`,
+              { component: name, requestedSource: SITE_SOURCE },
+            );
+            return null;
+          }
+          return {
+            key: `site-${name}-${index}`,
+            component: siteComp,
+            configKey: configKey || null,
+            props: {},
+          };
+        }
+        if (!normalizedSource) {
+          const siteComp = getSiteComponent(name);
+          if (siteComp) {
+            return {
+              key: `site-${name}-${index}`,
+              component: siteComp,
+              configKey: configKey || null,
+              props: {},
+            };
+          }
+        }
+        // -------------------------------------------------------------
+
         const availableSources = Array.isArray(extensionSourcesByName[name])
           ? extensionSourcesByName[name]
           : null;
-        let normalizedSource = normalizeSourceKey(source) || null;
 
         if (availableSources && availableSources.length) {
           if (!normalizedSource) {

package/src/composables/useDraftGate.js

@@ -0,0 +1,93 @@
+/**
+ * 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 {
+      // crypto.subtle only exists in secure contexts — on plain http://
+      // (LAN preview, staging by IP) hashing itself fails. Say that,
+      // instead of telling the user their correct password is wrong.
+      errorMessage.value = 'Unlocking requires a secure connection — reload this page over HTTPS (or localhost) and try again.';
+      return false;
+    }
+    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/useFocusTrap.js

@@ -0,0 +1,85 @@
+import { nextTick, onBeforeUnmount, unref, watch } from 'vue';
+
+// Selector shared by every modal in the framework. Kept intentionally simple:
+// visible-but-disabled edge cases are handled by the browser refusing focus.
+export const FOCUSABLE_SELECTOR =
+  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+/**
+ * Keyboard focus containment for modal dialogs (WCAG 2.4.3 Focus Order).
+ *
+ * While `active` is truthy:
+ *   - Tab / Shift+Tab wrap within `containerRef`.
+ *   - Escape calls `options.onEscape` when provided (omit it for gates that
+ *     must not be dismissible, e.g. the draft password gate).
+ * On activation, focus moves to `options.initialFocusRef` (or the container);
+ * on deactivation, focus returns to the element focused before.
+ *
+ * `active` may be a ref or a getter. SSR-safe: does nothing on the server.
+ */
+export function useFocusTrap(containerRef, active, options = {}) {
+  const { initialFocusRef = null, onEscape = null } = options;
+
+  let previousFocused = null;
+
+  const isActive = () => Boolean(typeof active === 'function' ? active() : unref(active));
+
+  const handleKeydown = (event) => {
+    if (!isActive()) return;
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      if (typeof onEscape === 'function') {
+        event.preventDefault();
+        onEscape();
+      }
+      return;
+    }
+    if (event.key !== 'Tab') return;
+    const container = unref(containerRef);
+    if (!container) return;
+    const focusable = container.querySelectorAll(FOCUSABLE_SELECTOR);
+    if (!focusable.length) {
+      event.preventDefault();
+      return;
+    }
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+    } else if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  };
+
+  const activate = () => {
+    previousFocused =
+      typeof HTMLElement !== 'undefined' && document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    nextTick(() => {
+      const target = unref(initialFocusRef) || unref(containerRef);
+      if (target && typeof target.focus === 'function') target.focus();
+    });
+    document.addEventListener('keydown', handleKeydown);
+  };
+
+  const deactivate = () => {
+    document.removeEventListener('keydown', handleKeydown);
+    if (previousFocused && typeof previousFocused.focus === 'function') {
+      previousFocused.focus();
+    }
+    previousFocused = null;
+  };
+
+  if (!import.meta.env.SSR) {
+    watch(isActive, (open, wasOpen) => {
+      if (open && !wasOpen) activate();
+      else if (!open && wasOpen) deactivate();
+    }, { immediate: true });
+
+    onBeforeUnmount(() => {
+      document.removeEventListener('keydown', handleKeydown);
+    });
+  }
+}

package/src/composables/usePageConfig.js

@@ -1,5 +1,7 @@
 import { onServerPrefetch, ref, watch } from 'vue';
-import { loadConfigData, mergeConfigTrees } from '../utils/loadConfig.js';
+import { loadConfigData, mergeConfigTrees, peekConfigSync } from '../utils/loadConfig.js';
+import { readStoredLocale } from '../utils/webStorage.js';
+import { isNotFoundPage, NOT_FOUND_PAGE_ID } from '../utils/notFound.js';
 
 function normalizePath(value) {
   if (!value || typeof value !== 'string') return '/';
@@ -26,6 +28,7 @@ export function usePageConfig({ pageId, pagePath, locale, onPageLoaded } = {}) {
     components: [],
     content: {},
     meta: {},
+    draft: undefined,
   });
   const componentKeys = ref([]);
   const isLoading = ref(false);
@@ -42,13 +45,22 @@ export function usePageConfig({ pageId, pagePath, locale, onPageLoaded } = {}) {
     const resolveById = (id) => {
       const data = pages[id];
       if (!data) return null;
-      return {
+      const resolved = {
         id,
         path: data.path ?? '/',
         components: Array.isArray(data.components) ? [...data.components] : [],
         content: data.content || {},
         meta: data.meta || {},
+        draft: data.draft,
+        jsonld: data.jsonld,
       };
+      // A site-authored pages/404.json resolves like any other route (it has a
+      // real path so the plugin can pre-render it), so the flag has to be set
+      // here rather than only on the not-found fallback below. Otherwise a
+      // direct hit on /404 yields a page usePageMeta treats as ordinary —
+      // canonical emitted, noindex omitted — and sitemapGenerator lists it.
+      if (isNotFoundPage(id, resolved.path)) resolved.isNotFound = true;
+      return resolved;
     };
 
     const currentPageId = typeof pageId === 'function' ? pageId() : pageId;
@@ -63,15 +75,35 @@ export function usePageConfig({ pageId, pagePath, locale, onPageLoaded } = {}) {
       const requestedPath = normalizePath(currentPagePath);
       for (const [id, data] of entries) {
         if (normalizePath(data.path) === requestedPath) {
-          return {
-            id,
-            path: data.path ?? '/',
-            components: Array.isArray(data.components) ? [...data.components] : [],
-            content: data.content || {},
-            meta: data.meta || {},
-          };
+          return resolveById(id);
         }
       }
+
+      // No page matches the requested path. If it's anything other than
+      // the home path "/" — or the explicit /404 SSG route — treat it as
+      // a not-found page (instead of silently returning home content with
+      // HTTP 200, which is what the framework used to do).
+      //
+      // Sites can override the rendered 404 by authoring pages/404.json
+      // with their own components[]; otherwise the synthesized sentinel
+      // renders the bundled NotFound component.
+      if (requestedPath !== '/') {
+        const customNotFound = resolveById(NOT_FOUND_PAGE_ID);
+        if (customNotFound) {
+          // resolveById already flags this; kept explicit so the guarantee is
+          // visible at the call site that depends on it.
+          return { ...customNotFound, isNotFound: true };
+        }
+        return {
+          id: '__not_found__',
+          path: requestedPath,
+          components: [{ name: 'NotFound', enabled: true }],
+          content: {},
+          meta: {},
+          draft: undefined,
+          isNotFound: true,
+        };
+      }
     }
 
     const homeFallback = resolveById('home');
@@ -85,13 +117,47 @@ export function usePageConfig({ pageId, pagePath, locale, onPageLoaded } = {}) {
         components: Array.isArray(firstData.components) ? [...firstData.components] : [],
         content: firstData.content || {},
         meta: firstData.meta || {},
+        draft: firstData.draft,
+        jsonld: firstData.jsonld,
       };
     }
 
     return null;
   }
 
-  async function syncPage() {
+  // Synchronously apply a resolved config to the reactive refs. Kept pure and
+  // synchronous so it can run during the first client render (matching the
+  // prerendered DOM) as well as after an async load. Throws if the config has
+  // no selectable page, so callers can fall back.
+  function applyConfig(config) {
+    siteData.value = config;
+    const selectedPage = selectPage(config);
+
+    if (!selectedPage) {
+      throw new Error('No pages defined in configuration.');
+    }
+
+    const sharedContent = config?.shared?.content;
+    const mergedContent = mergeWithSharedContent(sharedContent, selectedPage.content);
+    currentPage.value = {
+      ...selectedPage,
+      content: mergedContent,
+    };
+    pageContent.value = mergedContent;
+
+    if (typeof onPageLoaded === 'function') {
+      onPageLoaded({ config, page: selectedPage, content: mergedContent });
+    }
+
+    componentKeys.value = Array.isArray(selectedPage.components)
+      ? selectedPage.components.map((entry) => (entry && typeof entry === 'object' ? { ...entry } : entry))
+      : [];
+  }
+
+  // soft: when true, keep the currently-rendered components visible while the
+  // new config loads (no blank-out). Used by the post-hydration locale
+  // reconcile so a saved-locale switch doesn't reintroduce a flash.
+  async function syncPage({ soft = false } = {}) {
     const requestId = ++activeRequest;
     const currentLocale = typeof locale === 'function' ? locale() : locale;
     const localeKey = (currentLocale || '').toString().toLowerCase() || 'default';
@@ -100,7 +166,7 @@ export function usePageConfig({ pageId, pagePath, locale, onPageLoaded } = {}) {
 
     if (requestId === activeRequest) {
       isLoading.value = true;
-      if (shouldReload) {
+      if (shouldReload && !soft) {
         componentKeys.value = [];
       }
       loadError.value = null;
@@ -114,34 +180,20 @@ export function usePageConfig({ pageId, pagePath, locale, onPageLoaded } = {}) {
 
       if (requestId !== activeRequest) return;
 
-      siteData.value = cachedConfig;
-      const selectedPage = selectPage(cachedConfig);
-
-      if (!selectedPage) {
-        throw new Error('No pages defined in configuration.');
-      }
-
-      const sharedContent = cachedConfig?.shared?.content;
-      const mergedContent = mergeWithSharedContent(sharedContent, selectedPage.content);
-      currentPage.value = {
-        ...selectedPage,
-        content: mergedContent,
-      };
-      pageContent.value = mergedContent;
-
-      if (typeof onPageLoaded === 'function') {
-        onPageLoaded({ config: cachedConfig, page: selectedPage, content: mergedContent });
-      }
-
-      componentKeys.value = Array.isArray(selectedPage.components)
-        ? selectedPage.components.map((entry) => (entry && typeof entry === 'object' ? { ...entry } : entry))
-        : [];
+      applyConfig(cachedConfig);
     } catch (error) {
       if (requestId !== activeRequest) return;
-      if (import.meta.env.DEV) {
+      if (import.meta.env.SSR) {
+        // Machine-grepable marker: cms-ssg-build scans captured child output
+        // for this exact string and FAILS the build. A page whose config
+        // didn't load during pre-render must never ship silently as chrome
+        // around an empty <main> — the empty-root detector can't see it,
+        // because the shell (skip link, header, footer) still renders.
+        console.error(`[cms-ssg] PAGE CONFIG LOAD FAILED locale=${localeKey}`, error);
+      } else 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: {} });
@@ -155,11 +207,59 @@ export function usePageConfig({ pageId, pagePath, locale, onPageLoaded } = {}) {
     }
   }
 
+  // Client-only: populate refs synchronously from the config the server pass
+  // already resolved + serialized (primed into a sync cache by main.js before
+  // mount). This makes the first client render reproduce the prerendered DOM
+  // instead of an empty <main> while the async loader runs — the fix for the
+  // paint -> blank -> paint white-flash. Returns false on a cache miss, so the
+  // caller falls back to the async path (previous behavior).
+  function hydrateFromSyncCache() {
+    const currentLocale = typeof locale === 'function' ? locale() : locale;
+    const localeKey = (currentLocale || '').toString().toLowerCase() || 'default';
+    const localeForConfig = localeKey === 'default' ? undefined : localeKey;
+
+    const primed = peekConfigSync(localeForConfig);
+    if (!primed) return false;
+
+    try {
+      applyConfig(primed);
+    } catch {
+      return false;
+    }
+    cachedConfig = primed;
+    lastLocaleKey = localeKey;
+
+    // Decide whether a soft (no blank-out) background reload of the FULL config
+    // is needed after this first synchronous paint. Two independent triggers,
+    // both satisfied by the same single reload:
+    //
+    //  1. Partial embed: the server trimmed the embedded config to just this
+    //     page (site.trimInitialState), so the primed config can't resolve
+    //     OTHER pages for in-SPA navigation. Load the full config now; the
+    //     current page re-applies identically, so there's no visible change.
+    //  2. Saved-locale switch: the server has no localStorage, so a base-locale
+    //     route rendered the base locale. If a returning visitor stored a
+    //     different locale, reconcile to it. (loadConfigData reads localStorage
+    //     when no explicit locale is passed, so the same reload resolves it.)
+    let needsFullReload = Boolean(primed && primed.pagesPartial);
+
+    if (localeForConfig === undefined) {
+      const stored = (readStoredLocale() || '').trim().toLowerCase();
+      if (stored) needsFullReload = true;
+    }
+
+    if (needsFullReload) {
+      lastLocaleKey = null; // force syncPage to reload (localStorage-resolved for base routes)
+      syncPage({ soft: true });
+    }
+    return true;
+  }
+
   if (import.meta.env.SSR) {
     onServerPrefetch(async () => {
       await syncPage();
     });
-  } else {
+  } else if (!hydrateFromSyncCache()) {
     syncPage();
   }