@koehler8/cms 1.0.0-beta.9 → 1.0.0

package/src/components/Home.vue

@@ -1,43 +1,39 @@
 <template>
-  <IntroGate
-    :enabled="introGateEnabled"
-    v-bind="introGateProps"
-  />
-  <main>
-    <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"
     />
-    <div
-      v-if="showLoadingIndicator"
-      class="page-loading-placeholder"
-      role="status"
-      aria-live="polite"
-    >
-      Loading…
-    </div>
-    <div
-      v-else-if="loadErrorMessage"
-      class="page-error-message"
-      role="alert"
-    >
-      {{ loadErrorMessage }}
-    </div>
-  </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, onMounted, provide, ref, watch } from 'vue';
+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';
@@ -45,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';
 
@@ -85,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,
@@ -106,25 +111,13 @@ provide('pageContent', pageContent);
 provide('pageConfig', currentPage);
 provide('currentPageId', computed(() => currentPage.value.id));
 
-// Suppress the loading placeholder during the initial hydration tick
-// so SSG-rendered pages don't flash "Loading…" while the client-side
-// syncPage briefly resets componentKeys to []. After the first mount
-// completes, genuine slow loads (real navigation) can still surface
-// the placeholder.
-const isHydrating = ref(true);
-onMounted(() => {
-  nextTick().then(() => {
-    isHydrating.value = false;
-  });
-});
-
-const showLoadingIndicator = computed(() =>
-  !isHydrating.value &&
-  isLoading.value &&
-  componentKeys.value.length === 0 &&
-  !loadError.value
-);
-const loadErrorMessage = computed(() => loadError.value ? (loadError.value.message || 'Unable to load page content.') : '');
+// Loading + error state are exposed via inject so sites can build their
+// own preloader / error surface as a component (e.g. site/components/
+// Preloader.vue or the bundled Preloader). Home itself no longer renders
+// any built-in placeholder UI — sites that want one opt in by listing a
+// preloader component in their pages/{pageId}.json `components[]`.
+provide('pageIsLoading', isLoading);
+provide('pageLoadError', loadError);
 
 watch(componentKeys, async () => {
   await nextTick();
@@ -142,20 +135,43 @@ watch(
 );
 </script>
 
-<style scoped>
-.page-loading-placeholder,
-.page-error-message {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 40vh;
-  font-size: 1.125rem;
+<style>
+/* Visually-hidden until focused. The skip link is the first focusable
+   element on the page; pressing Tab once reveals it and Enter jumps
+   focus past the sticky header into <main>. WCAG 2.4.1 (Bypass Blocks). */
+.cms-skip-link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 12px 20px;
+  background: #ffffff;
+  color: #1f2a44;
+  border: 2px solid #1f2a44;
+  border-radius: 0 0 8px 0;
+  font-family: var(--ui-font-body, system-ui, -apple-system, sans-serif);
   font-weight: 600;
-  color: #111;
-  text-align: center;
+  text-decoration: none;
+  z-index: 9999;
+  transform: translateY(-100%);
+  transition: transform 0.15s ease;
 }
-
-.page-error-message {
-  color: #b00020;
+.cms-skip-link:focus {
+  transform: translateY(0);
+  outline: 2px solid #1f2a44;
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .cms-skip-link { transition: none; }
 }
+
+/* When the skip link sends focus to <main>, browsers don't render an
+   outline on the [tabindex="-1"] element by default — strip it so the
+   page doesn't get an unexpected ring around its main region. */
+#main-content:focus { outline: none; }
+
+/* Sticky header offset for in-page anchor jumps and skip-link landing.
+   Without this, the focused element is hidden under the sticky header
+   (fails 2.4.11 Focus Not Obscured). */
+html { scroll-padding-top: 88px; }
 </style>
+

package/src/components/Intro.vue

@@ -1,5 +1,5 @@
 <template>
-  <section id="about" class="section-shell intro-section" data-analytics-section="intro">
+  <section v-if="hasContent" id="intro" class="section-shell intro-section" data-analytics-section="intro">
     <div class="container">
       <div class="intro-grid">
         <div class="intro-column">
@@ -61,12 +61,14 @@
   const pageContent = inject('pageContent', ref({}));
 
   const introData = computed(() => pageContent.value?.intro || {});
+  // components[] contract: no content.intro block → render nothing (never an
+  // empty heading, divider, and image column).
+  const hasContent = computed(() => Object.keys(introData.value).length > 0);
 
   const introTitle = computed(() => introData.value?.title || '');
   const introText = computed(() => introData.value?.text || '');
 
   const introImage = useResponsiveImage('img/intro', {
-    widths: [320, 540],
     fallbackFormat: 'jpg',
   });
   const introImageHandleError = introImage.handleError;

package/src/components/IntroGate.vue

@@ -57,8 +57,9 @@
 </template>
 
 <script setup>
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { trackEvent } from '../utils/analytics.js';
+import { useFocusTrap } from '../composables/useFocusTrap.js';
 
 const props = defineProps({
   enabled: {
@@ -101,11 +102,9 @@ const props = defineProps({
 
 const isOpen = ref(false);
 const dialogRef = ref(null);
-const previousFocusedElement = ref(null);
 
 const dialogTitleId = computed(() => 'intro-gate-title');
 const dialogDescriptionId = computed(() => 'intro-gate-description');
-const focusableSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 const eyebrowText = computed(() => (typeof props.eyebrow === 'string' ? props.eyebrow.trim() : ''));
 const titleText = computed(() => (typeof props.title === 'string' ? props.title.trim() : ''));
 const bodyText = computed(() => (typeof props.body === 'string' ? props.body.trim() : ''));
@@ -166,67 +165,7 @@ function handlePrimaryClick() {
   handleDismiss('continue');
 }
 
-function focusDialog() {
-  if (typeof window === 'undefined') return;
-  nextTick(() => {
-    dialogRef.value?.focus();
-  });
-}
-
-function restoreFocus() {
-  if (!previousFocusedElement.value) return;
-  if (typeof previousFocusedElement.value.focus === 'function') {
-    previousFocusedElement.value.focus();
-  }
-  previousFocusedElement.value = null;
-}
-
-function trapFocus(event) {
-  if (!isOpen.value) return;
-  if (typeof document === 'undefined') return;
-  if (event.key !== 'Tab') return;
-  const dialogEl = dialogRef.value;
-  if (!dialogEl) return;
-  const focusable = dialogEl.querySelectorAll(focusableSelector);
-  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();
-  }
-}
-
-function handleKeydown(event) {
-  if (!isOpen.value) return;
-  if (event.key === 'Escape') {
-    event.preventDefault();
-    handleDismiss('escape');
-  } else if (event.key === 'Tab') {
-    trapFocus(event);
-  }
-}
-
-watch(
-  () => isOpen.value,
-  (open) => {
-    if (import.meta.env.SSR) return;
-    if (open) {
-      previousFocusedElement.value = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-      focusDialog();
-      document.addEventListener('keydown', handleKeydown);
-    } else {
-      document.removeEventListener('keydown', handleKeydown);
-      restoreFocus();
-    }
-  }
-);
+useFocusTrap(dialogRef, isOpen, { onEscape: () => handleDismiss('escape') });
 
 function maybeOpenGate() {
   if (import.meta.env.SSR) return;
@@ -251,11 +190,6 @@ onMounted(() => {
   if (import.meta.env.SSR) return;
   maybeOpenGate();
 });
-
-onBeforeUnmount(() => {
-  if (import.meta.env.SSR) return;
-  document.removeEventListener('keydown', handleKeydown);
-});
 </script>
 
 <style scoped>
@@ -319,7 +253,7 @@ onBeforeUnmount(() => {
 }
 
 .intro-gate-close:hover,
-.intro-gate-close:focus {
+.intro-gate-close:focus-visible {
   color: #ffffff;
   transform: scale(1.05);
 }
@@ -389,7 +323,7 @@ onBeforeUnmount(() => {
 }
 
 .intro-gate-primary:hover,
-.intro-gate-primary:focus {
+.intro-gate-primary:focus-visible {
   transform: translateY(-2px);
   box-shadow: var(--brand-primary-cta-hover-shadow, 0 20px 44px rgba(255, 45, 134, 0.55));
 }
@@ -404,7 +338,7 @@ onBeforeUnmount(() => {
 }
 
 .intro-gate-primary:hover::after,
-.intro-gate-primary:focus::after {
+.intro-gate-primary:focus-visible::after {
   transform: translateX(0%);
 }
 
@@ -421,7 +355,7 @@ onBeforeUnmount(() => {
 }
 
 .intro-gate-secondary:hover,
-.intro-gate-secondary:focus {
+.intro-gate-secondary:focus-visible {
   color: var(--brand-neon-pink, #ff2d86);
   border-color: rgba(255, 45, 134, 0.55);
   transform: translateY(-1px);
@@ -441,4 +375,27 @@ onBeforeUnmount(() => {
     padding-inline: 1.2rem;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .intro-gate-close,
+  .intro-gate-primary,
+  .intro-gate-secondary,
+  .intro-gate-primary::after {
+    transition: none;
+  }
+
+  .intro-gate-close:hover,
+  .intro-gate-close:focus-visible,
+  .intro-gate-primary:hover,
+  .intro-gate-primary:focus-visible,
+  .intro-gate-secondary:hover,
+  .intro-gate-secondary:focus-visible {
+    transform: none;
+  }
+
+  .intro-gate-primary:hover::after,
+  .intro-gate-primary:focus-visible::after {
+    transform: translateX(-120%);
+  }
+}
 </style>

package/src/components/NotFound.vue

@@ -0,0 +1,100 @@
+<template>
+  <section class="not-found" aria-labelledby="not-found-heading">
+    <p class="not-found__eyebrow" aria-hidden="true">404</p>
+    <h1 id="not-found-heading" class="not-found__title">{{ heading }}</h1>
+    <p class="not-found__body">{{ body }}</p>
+    <a class="not-found__home" :href="homeHref">{{ homeLabel }}</a>
+  </section>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue';
+
+const pageContent = inject('pageContent', null);
+const siteData = inject('siteData', null);
+
+const config = computed(() => {
+  const fromShared = siteData?.value?.shared?.content?.notFound;
+  const fromPage = pageContent?.value?.notFound;
+  return { ...(fromShared || {}), ...(fromPage || {}) };
+});
+
+const heading = computed(() => config.value.heading || 'Page not found');
+const body = computed(
+  () => config.value.body || "We couldn't find the page you're looking for.",
+);
+const homeLabel = computed(() => config.value.homeLabel || 'Return home');
+const homeHref = computed(() => config.value.homeHref || '/');
+</script>
+
+<style scoped>
+.not-found {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 4vw, 2rem);
+  text-align: center;
+  color: var(--brand-text, #1f2a44);
+  background: var(--brand-surface, transparent);
+  font-family: var(--ui-font-body, system-ui, -apple-system, sans-serif);
+}
+
+.not-found__eyebrow {
+  margin: 0 0 0.25rem;
+  font-size: clamp(2.5rem, 8vw, 4rem);
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  color: var(--brand-text-muted, rgba(31, 42, 68, 0.55));
+}
+
+.not-found__title {
+  margin: 0 0 0.75rem;
+  font-size: clamp(1.5rem, 4vw, 2.25rem);
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.not-found__body {
+  margin: 0 0 1.5rem;
+  max-width: 32rem;
+  font-size: 1rem;
+  line-height: 1.6;
+  color: var(--brand-text-muted, rgba(31, 42, 68, 0.7));
+}
+
+.not-found__home {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.75rem;
+  padding: 0.7rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 600;
+  text-decoration: none;
+  color: var(--brand-primary-cta-text, #ffffff);
+  background: var(--brand-primary-cta, var(--brand-primary, #1f2a44));
+  border-radius: var(--brand-button-radius, 10px);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.not-found__home:hover {
+  transform: translateY(-1px);
+}
+
+.not-found__home:focus-visible {
+  outline: 2px solid var(--brand-primary, #1f2a44);
+  outline-offset: 3px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .not-found__home {
+    transition: none;
+  }
+  .not-found__home:hover {
+    transform: none;
+  }
+}
+</style>

package/src/components/Plan.vue

@@ -1,5 +1,5 @@
 <template>
-  <section id="plan" class="section-shell plan-section" data-analytics-section="plan">
+  <section v-if="hasContent" id="plan" class="section-shell plan-section" data-analytics-section="plan">
     <div class="container">
       <header class="plan-heading text-center">
         <div class="plan-heading__divider" aria-hidden="true"></div>
@@ -35,6 +35,9 @@ import { computed, inject, ref } from 'vue';
 const pageContent = inject('pageContent', ref({}));
 
 const planData = computed(() => pageContent.value?.plan || {});
+// components[] contract: no content.plan block → render nothing (never a
+// placeholder heading over an empty grid).
+const hasContent = computed(() => Object.keys(planData.value).length > 0);
 
 const planTitle = computed(() => planData.value?.title || 'The Plan');
 const planSubtitle = computed(() => planData.value?.subtitle || '');
@@ -94,7 +97,8 @@ const planItems = computed(() =>
   width: 70px;
   height: 70px;
   border-radius: 50%;
-  border: 3px solid var(--plan-step-border, rgba(255, 255, 255, 0.3));
+  /* 3:1+ against the dark plan-card surface (WCAG 1.4.11). */
+  border: 3px solid var(--plan-step-border, var(--brand-plan-step-ring, rgba(255, 255, 255, 0.5)));
   color: var(--plan-step-color, #ffffff);
   display: inline-flex;
   align-items: center;
@@ -107,10 +111,12 @@ const planItems = computed(() =>
   font-size: 1.15rem;
   font-weight: 600;
   margin: 0;
-  color: var(--plan-card-title, var(--ui-text-primary, #ffffff));
+  /* Dark plan-card surface needs light text. Don't fall through to
+     --ui-text-primary (dark) — that's the FOUC trap that bit FooterMinimal. */
+  color: var(--plan-card-title, var(--brand-plan-card-text, #ffffff));
 }
 
 .plan-card__description {
-  color: var(--ui-text-muted, rgba(255, 255, 255, 0.78));
+  color: var(--plan-card-description, var(--brand-plan-card-muted-text, #c8c2cf));
 }
 </style>

package/src/components/Portfolio.vue

@@ -72,7 +72,7 @@
             </div>
             <span class="portfolio-tag ui-label-sm">{{ project.displayTags || project.tags }}</span>
             <h3 class="portfolio-title ui-title-md">{{ project.title }}</h3>
-            <a class="portfolio-card__link" :href="project.href" aria-label="Visit portfolio link"></a>
+            <a class="portfolio-card__link" :href="project.href" :aria-label="`View ${project.title}`"></a>
           </div>
         </div>
       </transition-group>
@@ -340,10 +340,14 @@ function handleAfterLeave() {
 
 .portfolio-filter:hover,
 .portfolio-filter:focus-visible {
-  color: var(--portfolio-filter-hover-color, var(--brand-accent-electric, #4f6cf0));
-  border-color: var(--portfolio-filter-hover-border, rgba(79, 108, 240, 0.5));
+  color: var(--portfolio-filter-hover-color, var(--brand-accent-electric, #4361dd));
+  border-color: var(--portfolio-filter-hover-border, rgba(67, 97, 221, 0.55));
   transform: translateY(-1px);
 }
+.portfolio-filter:focus-visible {
+  outline: 2px solid var(--portfolio-filter-focus-outline, var(--brand-accent-electric, #4361dd));
+  outline-offset: 2px;
+}
 
 .portfolio-filter--active {
   color: var(--portfolio-filter-active-color, #fff);
@@ -456,4 +460,26 @@ function handleAfterLeave() {
   transform: translateY(24px) scale(0.96);
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .portfolio-filter,
+  .portfolio-card,
+  .portfolio-move,
+  .portfolio-enter-active,
+  .portfolio-leave-active {
+    transition: none;
+  }
+
+  .portfolio-filter:hover,
+  .portfolio-filter:focus-visible,
+  .portfolio-filter--active:hover,
+  .portfolio-filter--active:focus-visible,
+  .portfolio-card:hover {
+    transform: none;
+  }
+
+  .portfolio-enter-from,
+  .portfolio-leave-to {
+    transform: none;
+  }
+}
 </style>

package/src/components/Principles.vue

@@ -1,5 +1,5 @@
 <template>
-  <section id="principles" class="section-shell principles-section" data-analytics-section="principles">
+  <section v-if="hasContent" id="principles" class="section-shell principles-section" data-analytics-section="principles">
     <div class="container">
       <header class="section-header text-center">
         <div class="section-heading">
@@ -29,6 +29,8 @@ import { computed, inject, ref } from 'vue';
 const pageContent = inject('pageContent', ref({}));
 
 const principlesData = computed(() => pageContent.value?.principles || {});
+// components[] contract: no content.principles block → render nothing.
+const hasContent = computed(() => Object.keys(principlesData.value).length > 0);
 
 const principlesTitle = computed(() => principlesData.value?.title || 'Principles');
 const principlesSubtitle = computed(() => principlesData.value?.subtitle || '');

package/src/components/Spacer.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="ui-spacer" aria-hidden="true" :style="spacerStyle"></div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+// Vertical spacing utility. The numeric-suffixed names (Spacer15/30/40/60)
+// used in pages/*.json components[] are thin aliases wrapping this with a
+// fixed size.
+const props = defineProps({
+  size: {
+    type: [Number, String],
+    default: 30,
+  },
+});
+
+const spacerStyle = computed(() => {
+  const parsed = Number.parseInt(props.size, 10);
+  const px = Number.isFinite(parsed) && parsed >= 0 ? parsed : 30;
+  return { '--ui-spacer-size': `${px}px` };
+});
+</script>

package/src/components/Spacer15.vue

@@ -1,9 +1,8 @@
 <template>
-  <div class="ui-spacer" aria-hidden="true" :style="spacerStyle"></div>
+  <Spacer :size="15" />
 </template>
 
 <script setup>
-const spacerStyle = {
-  '--ui-spacer-size': '15px',
-};
+// Alias kept for existing pages/*.json components[] references.
+import Spacer from './Spacer.vue';
 </script>

package/src/components/Spacer30.vue

@@ -1,9 +1,8 @@
 <template>
-  <div class="ui-spacer" aria-hidden="true" :style="spacerStyle"></div>
+  <Spacer :size="30" />
 </template>
 
 <script setup>
-const spacerStyle = {
-  '--ui-spacer-size': '30px',
-};
+// Alias kept for existing pages/*.json components[] references.
+import Spacer from './Spacer.vue';
 </script>

package/src/components/Spacer40.vue

@@ -1,9 +1,8 @@
 <template>
-  <div class="ui-spacer" aria-hidden="true" :style="spacerStyle"></div>
+  <Spacer :size="40" />
 </template>
 
 <script setup>
-const spacerStyle = {
-  '--ui-spacer-size': '40px',
-};
+// Alias kept for existing pages/*.json components[] references.
+import Spacer from './Spacer.vue';
 </script>

package/src/components/Spacer60.vue

@@ -1,9 +1,8 @@
 <template>
-  <div class="ui-spacer" aria-hidden="true" :style="spacerStyle"></div>
+  <Spacer :size="60" />
 </template>
 
 <script setup>
-const spacerStyle = {
-  '--ui-spacer-size': '60px',
-};
+// Alias kept for existing pages/*.json components[] references.
+import Spacer from './Spacer.vue';
 </script>