@koehler8/cms 1.0.0-beta.5

package/src/components/ComingSoon.vue

@@ -0,0 +1,411 @@
+<template>
+  <section
+    v-if="shouldRender"
+    id="coming-soon"
+    class="coming-soon-section section-shell"
+    data-analytics-section="coming-soon"
+  >
+    <div class="container">
+      <div class="coming-soon-shell brand-card">
+        <div class="coming-soon-preamble">
+          <span
+            v-if="eyebrow"
+            class="coming-soon-eyebrow ui-label-sm text-uppercase"
+          >
+            {{ eyebrow }}
+          </span>
+          <span
+            v-if="badge.text"
+            class="coming-soon-badge"
+          >
+            {{ badge.text }}
+          </span>
+        </div>
+        <h2 class="coming-soon-title ui-title-md">
+          {{ title }}
+        </h2>
+        <p class="coming-soon-message">
+          {{ message }}
+        </p>
+        <ul
+          v-if="highlights.length"
+          class="coming-soon-highlights"
+        >
+          <li
+            v-for="(highlight, index) in highlights"
+            :key="`coming-soon-highlight-${index}`"
+            class="coming-soon-highlight brand-card"
+          >
+            <span
+              v-if="highlight.icon"
+              class="coming-soon-highlight-icon"
+              aria-hidden="true"
+            >
+              {{ highlight.icon }}
+            </span>
+            <span class="coming-soon-highlight-text">
+              {{ highlight.text }}
+            </span>
+          </li>
+        </ul>
+        <p
+          v-if="note"
+          class="coming-soon-note"
+        >
+          {{ note }}
+        </p>
+        <div
+          v-if="actions.length"
+          class="coming-soon-actions"
+        >
+          <a
+            v-for="action in actions"
+            :key="action.key"
+            class="coming-soon-action"
+            :class="[
+              action.variant === 'secondary'
+                ? 'coming-soon-action--secondary'
+                : 'coming-soon-action--primary',
+            ]"
+            :href="action.href"
+            :target="action.target"
+            :rel="action.rel"
+            @click="(event) => handleActionClick(event, action)"
+          >
+            <span>{{ action.text }}</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed, inject, ref } from 'vue';
+
+import { useComingSoonResolver } from '../composables/useComingSoonConfig.js';
+import { useComingSoonInterstitial } from '../composables/useComingSoonInterstitial.js';
+import { trackEvent } from '../utils/analytics.js';
+
+const pageContent = inject('pageContent', ref({}));
+const siteData = inject('siteData', ref({}));
+
+const comingSoonSource = computed(() => {
+  const pageBlock = pageContent.value?.comingSoon;
+  if (pageBlock && typeof pageBlock === 'object') {
+    return pageBlock;
+  }
+  const sharedBlock = siteData.value?.shared?.content?.comingSoon;
+  if (sharedBlock && typeof sharedBlock === 'object') {
+    return sharedBlock;
+  }
+  return null;
+});
+
+const fallbackTitle = 'Coming Soon';
+const fallbackMessage = "We're putting the finishing touches on this experience. Check back soon!";
+
+const stringOrFallback = (value, fallback = '') => {
+  if (typeof value === 'string' && value.trim()) {
+    return value.trim();
+  }
+  return fallback;
+};
+
+const title = computed(() =>
+  stringOrFallback(comingSoonSource.value?.title, fallbackTitle)
+);
+const message = computed(() =>
+  stringOrFallback(comingSoonSource.value?.message, fallbackMessage)
+);
+const eyebrow = computed(() => stringOrFallback(comingSoonSource.value?.eyebrow));
+const note = computed(() => stringOrFallback(comingSoonSource.value?.note));
+
+const badge = computed(() => {
+  const rawBadge = comingSoonSource.value?.badge;
+  if (typeof rawBadge === 'string') {
+    return { text: rawBadge.trim(), variant: null };
+  }
+  if (!rawBadge || typeof rawBadge !== 'object') {
+    return { text: '', variant: null };
+  }
+  return {
+    text: stringOrFallback(rawBadge.text),
+    variant: stringOrFallback(rawBadge.variant),
+  };
+});
+
+function normalizeHighlights(source) {
+  if (!source) return [];
+
+  const candidates = Array.isArray(source) ? source : [];
+  return candidates
+    .map((entry) => {
+      if (typeof entry === 'string') {
+        const trimmed = entry.trim();
+        return trimmed ? { text: trimmed, icon: '' } : null;
+      }
+      if (!entry || typeof entry !== 'object') {
+        return null;
+      }
+      const text = stringOrFallback(entry.text);
+      const icon = stringOrFallback(entry.icon);
+      if (!text) return null;
+      return { text, icon };
+    })
+    .filter(Boolean);
+}
+
+const highlights = computed(() => {
+  const sourceHighlights =
+    comingSoonSource.value?.highlights ??
+    comingSoonSource.value?.bullets ??
+    comingSoonSource.value?.items;
+  return normalizeHighlights(sourceHighlights);
+});
+
+function normalizeAction(raw, fallbackVariant = 'primary', index = 0) {
+  if (!raw) return null;
+
+  let base = raw;
+  if (typeof raw === 'string') {
+    base = { text: raw, href: raw.startsWith('#') ? raw : 'coming-soon' };
+  }
+  if (typeof base !== 'object') {
+    return null;
+  }
+
+  const text = stringOrFallback(base.text);
+  const href = stringOrFallback(base.href, 'coming-soon');
+  if (!text || !href) {
+    return null;
+  }
+
+  const variant = stringOrFallback(base.variant, fallbackVariant).toLowerCase() === 'secondary'
+    ? 'secondary'
+    : 'primary';
+
+  const openInNewTab =
+    typeof base.openInNewTab === 'boolean'
+      ? base.openInNewTab
+      : base.target === '_blank';
+
+  const rel = openInNewTab ? base.rel || 'noopener noreferrer' : base.rel || null;
+  const target = openInNewTab ? '_blank' : base.target || null;
+
+  return {
+    key: `${text}-${href}-${variant}-${index}`,
+    text,
+    href,
+    variant,
+    target,
+    rel,
+    trigger: stringOrFallback(
+      base.analyticsTrigger || base.trigger,
+      variant === 'secondary' ? 'coming-soon-secondary' : 'coming-soon-primary'
+    ),
+  };
+}
+
+function dedupeActions(items) {
+  const map = new Map();
+  for (const action of items) {
+    if (!action) continue;
+    const key = `${action.text}|${action.href}|${action.variant}`;
+    if (!map.has(key)) {
+      map.set(key, action);
+    }
+  }
+  return Array.from(map.values());
+}
+
+const actions = computed(() => {
+  if (!comingSoonSource.value) {
+    return [];
+  }
+
+  const rawActions = [];
+  const source = comingSoonSource.value;
+
+  if (Array.isArray(source.actions)) {
+    rawActions.push(
+      ...source.actions.map((action, index) =>
+        normalizeAction(action, index === 0 ? 'primary' : 'secondary', index)
+      )
+    );
+  }
+
+  if (source.cta) {
+    rawActions.push(normalizeAction(source.cta, 'primary', rawActions.length));
+  }
+
+  if (source.primaryAction) {
+    rawActions.push(normalizeAction(source.primaryAction, 'primary', rawActions.length));
+  }
+
+  if (source.secondaryAction) {
+    rawActions.push(normalizeAction(source.secondaryAction, 'secondary', rawActions.length));
+  }
+
+  return dedupeActions(rawActions).filter(Boolean);
+});
+
+const shouldRender = computed(() => !!comingSoonSource.value);
+
+const { openComingSoon } = useComingSoonInterstitial();
+const { resolve: resolveComingSoon } = useComingSoonResolver(pageContent);
+
+function handleActionClick(event, action) {
+  if (!event || !action) return;
+
+  const modalPayload = resolveComingSoon({ href: action.href });
+  if (!modalPayload) {
+    return;
+  }
+
+  event.preventDefault();
+  openComingSoon(modalPayload);
+
+  trackEvent('coming_soon_interstitial_shown', {
+    trigger: action.trigger || 'coming-soon-cta',
+    label: action.text ? action.text.toLowerCase() : 'coming-soon',
+  });
+}
+</script>
+
+<style scoped>
+.coming-soon-section {
+  position: relative;
+  padding-block: clamp(80px, 12vw, 160px);
+}
+
+.coming-soon-shell {
+  --coming-soon-text: var(--brand-card-text, var(--ui-text-primary, #ffffff));
+  --coming-soon-text-muted: color-mix(in srgb, var(--coming-soon-text) 70%, transparent);
+  --coming-soon-text-subtle: color-mix(in srgb, var(--coming-soon-text) 55%, transparent);
+  padding: clamp(2rem, 4vw, 3.5rem);
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  border-radius: var(--brand-surface-card-radius, 28px);
+  background: var(--brand-surface-card, rgba(9, 6, 20, 0.92));
+  color: var(--coming-soon-text);
+}
+
+.coming-soon-preamble {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.coming-soon-eyebrow {
+  letter-spacing: 0.12em;
+  color: var(--coming-soon-text-muted, var(--ui-text-muted, rgba(255, 255, 255, 0.72)));
+}
+
+.coming-soon-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--coming-soon-text);
+}
+
+.coming-soon-title {
+  margin: 0;
+  color: var(--coming-soon-text);
+}
+
+.coming-soon-message {
+  margin: 0;
+  font-size: 1.125rem;
+  line-height: 1.7;
+  color: var(--coming-soon-text-muted, var(--ui-text-muted, rgba(255, 255, 255, 0.86)));
+}
+
+.coming-soon-highlights {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1rem;
+}
+
+.coming-soon-highlight {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem;
+  border-radius: clamp(16px, 2vw, 20px);
+  background: var(--surface-tabs-bg, rgba(255, 255, 255, 0.04));
+}
+
+.coming-soon-highlight-icon {
+  font-size: 1.5rem;
+}
+
+.coming-soon-highlight-text {
+  color: var(--coming-soon-text);
+  line-height: 1.4;
+}
+
+.coming-soon-note {
+  margin: 0;
+  font-size: 0.95rem;
+  color: var(--coming-soon-text-subtle, var(--ui-text-muted, rgba(255, 255, 255, 0.72)));
+}
+
+.coming-soon-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.coming-soon-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.9rem 1.75rem;
+  border-radius: var(--brand-button-radius, 999px);
+  font-weight: 600;
+  text-decoration: none;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.coming-soon-action--primary {
+  background: var(
+    --brand-cta-gradient,
+    linear-gradient(90deg, #ff42a5 0%, #7f5dff 50%, #48d5ff 100%)
+  );
+  color: #0b0418;
+}
+
+.coming-soon-action--secondary {
+  border: 1px solid rgba(255, 255, 255, 0.35);
+  color: var(--coming-soon-text);
+}
+
+.coming-soon-action:hover,
+.coming-soon-action:focus {
+  transform: translateY(-2px);
+  opacity: 0.92;
+}
+
+@media (max-width: 767px) {
+  .coming-soon-shell {
+    padding: 1.75rem;
+  }
+
+  .coming-soon-highlights {
+    grid-template-columns: 1fr;
+  }
+
+  .coming-soon-action {
+    width: 100%;
+  }
+}
+</style>

package/src/components/ComingSoonModal.vue

@@ -0,0 +1,230 @@
+<template>
+  <teleport to="body">
+    <div
+      v-if="open"
+      class="coming-soon-overlay"
+      role="presentation"
+      @keydown.esc.prevent="emitClose"
+    >
+      <div
+        class="coming-soon-backdrop"
+        @click.self="emitClose"
+      >
+        <div
+          class="coming-soon-dialog"
+          role="dialog"
+          aria-modal="true"
+          :aria-labelledby="dialogTitleId"
+          :aria-describedby="dialogDescriptionId"
+          ref="dialogRef"
+          tabindex="-1"
+          @keydown.esc.prevent.stop="emitClose"
+        >
+          <button
+            type="button"
+            class="coming-soon-close"
+            @click="emitClose"
+            aria-label="Close"
+          >
+            &times;
+          </button>
+          <h2 class="coming-soon-title" :id="dialogTitleId">
+            {{ title }}
+          </h2>
+          <p class="coming-soon-message" :id="dialogDescriptionId">
+            {{ message }}
+          </p>
+          <button
+            type="button"
+            class="coming-soon-cta"
+            @click="emitClose"
+          >
+            Got it
+          </button>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script setup>
+import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue';
+
+const props = defineProps({
+  open: {
+    type: Boolean,
+    default: false,
+  },
+  title: {
+    type: String,
+    default: 'Coming Soon',
+  },
+  message: {
+    type: String,
+    default: "We're putting the finishing touches on this experience. Check back soon!",
+  },
+});
+
+const emit = defineEmits(['close']);
+
+const dialogRef = ref(null);
+const focusableSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+const dialogTitleId = computed(() => 'coming-soon-title');
+const dialogDescriptionId = computed(() => 'coming-soon-message');
+
+const emitClose = () => {
+  emit('close');
+};
+
+const trapFocus = (event) => {
+  if (!props.open) 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();
+  }
+};
+
+watch(
+  () => props.open,
+  (isOpen) => {
+    if (typeof document === 'undefined') return;
+    if (isOpen) {
+      if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
+        window.requestAnimationFrame(() => {
+          dialogRef.value?.focus();
+        });
+      } else {
+        dialogRef.value?.focus();
+      }
+      document.addEventListener('keydown', trapFocus);
+    } else {
+      document.removeEventListener('keydown', trapFocus);
+    }
+  }
+);
+
+onMounted(() => {
+  if (typeof document === 'undefined') return;
+  if (props.open) {
+    document.addEventListener('keydown', trapFocus);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (typeof document === 'undefined') return;
+  document.removeEventListener('keydown', trapFocus);
+});
+</script>
+
+<style scoped>
+.coming-soon-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+}
+
+.coming-soon-backdrop {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: rgba(15, 15, 20, 0.85);
+  padding: 1.5rem;
+}
+
+.coming-soon-dialog {
+  position: relative;
+  max-width: 28rem;
+  width: 100%;
+  padding: 2.5rem 2rem 2rem;
+  border-radius: var(--brand-modal-radius, 24px);
+  background: var(
+    --brand-modal-surface,
+    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 240, 255, 0.92))
+  );
+  box-shadow: var(--brand-modal-shadow, 0 18px 48px rgba(8, 4, 18, 0.35));
+  text-align: center;
+  color: var(--brand-fg-100, #0a0a0d);
+}
+
+.coming-soon-title {
+  margin: 0 0 1rem;
+  font-size: clamp(1.8rem, 4vw, 2.5rem);
+  font-family: 'Space Grotesk', 'Inter', sans-serif;
+  font-weight: 700;
+  color: var(--brand-fg-100, #0a0a0d);
+}
+
+.coming-soon-message {
+  margin: 0 0 1.75rem;
+  font-size: clamp(1rem, 2.4vw, 1.125rem);
+  font-family: 'Inter', 'Helvetica Neue', sans-serif;
+  color: var(--brand-fg-200, rgba(8, 8, 18, 0.75));
+}
+
+.coming-soon-cta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 8rem;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--brand-button-radius, 14px);
+  border: none;
+  font-weight: 600;
+  font-family: 'Inter', 'Helvetica Neue', sans-serif;
+  color: var(--brand-primary-cta-text, #0b0418);
+  background: var(
+    --brand-primary-cta-gradient,
+    linear-gradient(90deg, #ff42a5 0%, #7f5dff 50%, #48d5ff 100%)
+  );
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.2s ease;
+}
+
+.coming-soon-cta:hover,
+.coming-soon-cta:focus {
+  opacity: 0.92;
+  transform: translateY(-1px);
+}
+
+.coming-soon-cta:focus {
+  outline: 2px solid #111111;
+  outline-offset: 2px;
+}
+
+.coming-soon-close {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  background: transparent;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  color: #888;
+  padding: 0.25rem;
+}
+
+.coming-soon-close:hover,
+.coming-soon-close:focus {
+  color: #111111;
+}
+</style>