@koehler8/cms 1.0.0-beta.5

package/src/components/icons/IconX.vue

@@ -0,0 +1,22 @@
+<template>
+  <svg
+    class="icon-x"
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+  >
+    <path
+      d="M4 4h4.6l3.5 4.7L15.6 4H20l-5.7 7.1L20 20h-4.6l-3.8-5.1L7.8 20H4l6-7.4L4 4Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
+
+<style scoped>
+.icon-x {
+  display: block;
+}
+</style>

package/src/components/ui/SbCard.vue

@@ -0,0 +1,52 @@
+<template>
+  <component
+    :is="tag"
+    class="sb-card"
+    :class="[attrs.class, { 'sb-card--padded': padded }]"
+    v-bind="forwardedAttrs"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { computed, useAttrs } from 'vue';
+
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  padded: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const attrs = useAttrs();
+const forwardedAttrs = computed(() => {
+  const { class: _ignoredClass, ...rest } = attrs;
+  return rest;
+});
+</script>
+
+<style scoped>
+.sb-card {
+  background: var(--brand-surface-card-bg, #141216);
+  border: 1px solid var(--brand-surface-card-border, rgba(255, 255, 255, 0.08));
+  border-radius: var(--brand-card-radius, 24px);
+  box-shadow: var(--brand-surface-card-shadow, 0 8px 24px rgba(217, 22, 75, 0.18));
+  backdrop-filter: blur(12px);
+  transition: box-shadow 0.25s ease, transform 0.25s ease;
+}
+
+.sb-card--padded {
+  padding: 24px;
+}
+
+@media (min-width: 992px) {
+  .sb-card--padded {
+    padding: 32px;
+  }
+}
+</style>

package/src/components/ui/SkeletonPulse.vue

@@ -0,0 +1,117 @@
+<template>
+  <component
+    :is="rootTag"
+    class="skeleton-pulse"
+    :class="{ 'skeleton-pulse--inline': inline }"
+    v-bind="rootAttrs"
+  >
+    <span class="skeleton-pulse__shimmer" :style="shimmerStyle" aria-hidden="true"></span>
+    <span v-if="srText" class="skeleton-pulse__sr">{{ srText }}</span>
+  </component>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  width: {
+    type: String,
+    default: '100%',
+  },
+  height: {
+    type: String,
+    default: '1rem',
+  },
+  radius: {
+    type: String,
+    default: '999px',
+  },
+  inline: {
+    type: Boolean,
+    default: false,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+});
+
+const srText = computed(() =>
+  typeof props.label === 'string' ? props.label.trim() : ''
+);
+const hasLabel = computed(() => srText.value.length > 0);
+const rootTag = computed(() => (props.inline ? 'span' : 'div'));
+const shimmerStyle = computed(() => ({
+  width: props.width,
+  minWidth: props.width,
+  height: props.height,
+  borderRadius: props.radius,
+}));
+const rootAttrs = computed(() =>
+  hasLabel.value
+    ? { role: 'status', 'aria-live': 'polite' }
+    : { 'aria-hidden': 'true' }
+);
+</script>
+
+<style scoped>
+.skeleton-pulse {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.skeleton-pulse--inline {
+  display: inline-flex;
+}
+
+.skeleton-pulse__shimmer {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(
+    90deg,
+    rgba(32, 24, 39, 0.4) 0%,
+    rgba(39, 243, 255, 0.28) 45%,
+    rgba(255, 45, 134, 0.3) 60%,
+    rgba(32, 24, 39, 0.4) 100%
+  );
+  background-size: 200% 100%;
+  animation: skeletonPulse 1.6s ease-in-out infinite;
+  box-shadow:
+    0 0 12px rgba(39, 243, 255, 0.18),
+    0 0 24px rgba(255, 45, 134, 0.12);
+}
+
+.skeleton-pulse__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes skeletonPulse {
+  0% {
+    background-position: 100% 0;
+  }
+  50% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-pulse__shimmer {
+    animation: none;
+    background-position: 50% 0;
+  }
+}
+</style>

package/src/components/ui/UnitChip.vue

@@ -0,0 +1,69 @@
+<template>
+  <span class="unit-chip">
+    <span v-if="icon" class="unit-chip__icon">
+      <img :src="icon" :alt="iconAlt" />
+    </span>
+    <span class="unit-chip__label">{{ label }}</span>
+  </span>
+</template>
+
+<script setup>
+const props = defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  iconAlt: {
+    type: String,
+    default: 'Token icon',
+  },
+});
+</script>
+
+<style scoped>
+.unit-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 10px;
+  min-height: 24px;
+  border-radius: 999px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--brand-fg-200);
+  background: var(--brand-bg-800);
+  border: 1px solid var(--brand-surface-card-border);
+  line-height: 1;
+  vertical-align: baseline;
+  white-space: nowrap;
+}
+
+.unit-chip__icon {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.unit-chip__icon img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.unit-chip__label {
+  display: inline-block;
+}
+</style>

package/src/composables/useComingSoonConfig.js

@@ -0,0 +1,120 @@
+import { computed } from 'vue';
+
+const DEFAULT_MODAL = {
+  title: 'Coming Soon',
+  message: "We're putting the finishing touches on this experience. Check back soon.",
+};
+
+const COMING_SOON_PREFIX = 'coming-soon';
+
+function normalizeModal(source, fallback = null) {
+  if (!source || typeof source !== 'object') {
+    return fallback;
+  }
+
+  const modal = source.modal && typeof source.modal === 'object' ? source.modal : null;
+  const titleCandidate = [
+    source.title,
+    modal?.title,
+    fallback?.title,
+    DEFAULT_MODAL.title,
+  ].find((value) => typeof value === 'string' && value.trim());
+  const messageCandidate = [
+    source.message,
+    modal?.message,
+    fallback?.message,
+    DEFAULT_MODAL.message,
+  ].find((value) => typeof value === 'string' && value.trim());
+
+  if (!titleCandidate || !messageCandidate) {
+    return fallback;
+  }
+
+  return {
+    title: titleCandidate.trim(),
+    message: messageCandidate.trim(),
+  };
+}
+
+function parseComingSoonAction(rawValue) {
+  if (rawValue === undefined || rawValue === null) {
+    return null;
+  }
+
+  const value = String(rawValue).trim();
+  if (!value) {
+    return null;
+  }
+
+  const lowerValue = value.toLowerCase();
+  const prefix = COMING_SOON_PREFIX;
+
+  if (lowerValue === prefix) {
+    return { variant: null };
+  }
+
+  if (lowerValue.startsWith(`${prefix}:`)) {
+    const variant = value.slice(prefix.length + 1).trim();
+    return { variant: variant || null };
+  }
+
+  return null;
+}
+
+function resolveVariant(config, variant) {
+  const baseModal = normalizeModal(config, DEFAULT_MODAL);
+  if (!baseModal) {
+    return null;
+  }
+
+  if (!variant) {
+    return baseModal;
+  }
+
+  const variants = config?.variants;
+  if (!variants || typeof variants !== 'object') {
+    return baseModal;
+  }
+
+  const variantConfig = variants[variant] || variants[variant.toLowerCase()];
+  if (!variantConfig) {
+    return baseModal;
+  }
+
+  return normalizeModal(variantConfig, baseModal) || baseModal;
+}
+
+/**
+ * Build a resolver that checks action href values for the "coming-soon"
+ * directive and returns the modal payload to show when present.
+ * @param {Ref<Record<string, any>>} pageContentRef
+ * @returns {{ resolve(options: { href?: string | null }): { title: string, message: string, variant: string | null } | null, isComingSoonAction(href: string): boolean }}
+ */
+export function useComingSoonResolver(pageContentRef) {
+  const comingSoonConfig = computed(() => pageContentRef?.value?.comingSoon || null);
+
+  return {
+    resolve(options = {}) {
+      const parsed = parseComingSoonAction(options?.href);
+      if (!parsed) {
+        return null;
+      }
+
+      const config = comingSoonConfig.value || {};
+      const modal = resolveVariant(config, parsed.variant);
+      if (!modal) {
+        return null;
+      }
+
+      return {
+        ...modal,
+        variant: parsed.variant ? parsed.variant.toLowerCase() : null,
+      };
+    },
+    isComingSoonAction(href) {
+      return Boolean(parseComingSoonAction(href));
+    },
+  };
+}
+
+export { COMING_SOON_PREFIX };

package/src/composables/useComingSoonInterstitial.js

@@ -0,0 +1,27 @@
+import { ref } from 'vue';
+
+const isVisible = ref(false);
+const modalTitle = ref('Coming Soon');
+const modalMessage = ref("We're putting the finishing touches on this experience. Check back soon!");
+
+export function useComingSoonInterstitial() {
+  const openComingSoon = ({ title, message } = {}) => {
+    modalTitle.value = title || 'Coming Soon';
+    modalMessage.value =
+      message ||
+      "We're putting the finishing touches on this experience. Check back soon!";
+    isVisible.value = true;
+  };
+
+  const closeComingSoon = () => {
+    isVisible.value = false;
+  };
+
+  return {
+    isComingSoonVisible: isVisible,
+    comingSoonTitle: modalTitle,
+    comingSoonMessage: modalMessage,
+    openComingSoon,
+    closeComingSoon,
+  };
+}

package/src/composables/useComponentResolver.js

@@ -0,0 +1,196 @@
+import { computed } from 'vue';
+import { extensionComponentDefinitionsBySource, extensionComponentSources, getExtensionContentDefaults } from '../extensions/extensionLoader.js';
+import { APP_VERSION } from '../utils/appInfo.js';
+import { satisfiesMinVersion } from '../utils/semver.js';
+import { validateRequiredContentPaths } from '../utils/contentRequirements.js';
+import { mergeConfigTrees } from '../utils/loadConfig.js';
+
+const extensionDefinitionsBySource = extensionComponentDefinitionsBySource || {};
+const extensionSourcesByName = extensionComponentSources || {};
+
+const normalizePageKey = (value) => (value || '').toString().trim().toLowerCase();
+const normalizeSourceKey = (value) => (value || '').toString().trim().toLowerCase();
+
+const reportExtensionIssue = (message, context = {}) => {
+  if (!import.meta.env.DEV) return;
+  const contextEntries = Object.entries(context)
+    .filter(([, value]) => value !== undefined && value !== null);
+  if (contextEntries.length) {
+    console.warn('[extensions]', message, Object.fromEntries(contextEntries));
+  } else {
+    console.warn('[extensions]', message);
+  }
+};
+
+const resolveExtensionDefinition = (name, sourceSlug) => {
+  if (!name) return null;
+  const normalizedSource = normalizeSourceKey(sourceSlug);
+  if (!normalizedSource) return null;
+  const sourceKey = `${normalizedSource}:${name}`;
+  return extensionDefinitionsBySource[sourceKey] || null;
+};
+
+export function useComponentResolver({ componentKeys, pageContent, currentPage, registry }) {
+  const loadedComponents = computed(() => {
+    const pageKey = normalizePageKey(currentPage.value.id);
+    return componentKeys.value
+      .map((entry, index) => {
+        let name = '';
+        let enabled = true;
+        let configKey;
+        let source;
+
+        if (entry && typeof entry === 'object') {
+          name = typeof entry.name === 'string' ? entry.name : '';
+          enabled = entry.enabled !== false;
+          configKey = typeof entry.configKey === 'string' ? entry.configKey : undefined;
+          source = typeof entry.source === 'string' ? entry.source : undefined;
+        } else if (typeof entry === 'string') {
+          name = entry;
+        }
+
+        if (!enabled) return null;
+
+        const availableSources = Array.isArray(extensionSourcesByName[name])
+          ? extensionSourcesByName[name]
+          : null;
+        let normalizedSource = normalizeSourceKey(source) || null;
+
+        if (availableSources && availableSources.length) {
+          if (!normalizedSource) {
+            if (availableSources.length === 1 && !registry[name]) {
+              // Single unambiguous extension source and no base component — auto-resolve.
+              normalizedSource = normalizeSourceKey(availableSources[0]);
+            } else {
+              reportExtensionIssue(
+                `Component "${name}" comes from an extension. Specify the source slug (available: ${availableSources.join(', ')}) in the component entry.`,
+                { component: name, availableSources },
+              );
+              return null;
+            }
+          }
+          if (!availableSources.includes(normalizedSource)) {
+            reportExtensionIssue(
+              `Component "${name}" is not provided by the "${source}" extension.`,
+              { component: name, requestedSource: normalizedSource, availableSources },
+            );
+            return null;
+          }
+        } else if (normalizedSource) {
+          reportExtensionIssue(
+            `Component "${name}" does not belong to an extension, so the "source" field should be omitted.`,
+            { component: name, requestedSource: normalizedSource },
+          );
+          return null;
+        }
+
+        const definition = resolveExtensionDefinition(name, normalizedSource);
+        if (availableSources && availableSources.length && !definition) {
+          reportExtensionIssue(
+            `Component "${name}" could not resolve extension definition for source "${normalizedSource}".`,
+            { component: name, requestedSource: normalizedSource },
+          );
+          return null;
+        }
+        const isExtension = Boolean(definition);
+        let component = isExtension ? definition.component : registry[name];
+
+        if (!component && name && name.startsWith('Spacer')) {
+          component = registry.Spacer;
+        }
+
+        if (!component) {
+          if (import.meta.env.DEV) {
+            console.warn(
+              `[PageRenderer] Component "${name}"${
+                source ? ` from source "${source}"` : ''
+              } is not registered in the component registry.`,
+            );
+          }
+          return null;
+        }
+
+        const resolvedSource = definition?.slug || normalizedSource || null;
+        const keyBase = definition ? `${resolvedSource || 'extension'}-${name}` : (name || `component-${index}`);
+
+        const defaultConfigKey = isExtension ? definition.configKey : undefined;
+        const resolvedConfigKey = configKey || defaultConfigKey || null;
+        const rawContent =
+          resolvedConfigKey && pageContent.value && typeof pageContent.value === 'object'
+            ? pageContent.value[resolvedConfigKey]
+            : undefined;
+        const contentDefaults = isExtension
+          ? getExtensionContentDefaults(definition.normalizedSlug, resolvedConfigKey)
+          : undefined;
+        const resolvedContent = contentDefaults
+          ? mergeConfigTrees(contentDefaults, rawContent || {}, { skipEmpty: true })
+          : rawContent;
+
+        if (isExtension) {
+          if (Array.isArray(definition.allowedPages) && definition.allowedPages.length) {
+            const normalizedAllowed = definition.allowedPages
+              .map((slug) => normalizePageKey(slug))
+              .filter(Boolean);
+            if (normalizedAllowed.length && !normalizedAllowed.includes(pageKey)) {
+              reportExtensionIssue(`Component "${name}" is not allowed on page "${currentPage.value.id}".`, {
+                component: name,
+                source: resolvedSource || undefined,
+                page: currentPage.value.id,
+                allowedPages: normalizedAllowed,
+              });
+              return null;
+            }
+          }
+
+          if (definition.minAppVersion && !satisfiesMinVersion(APP_VERSION, definition.minAppVersion)) {
+            reportExtensionIssue(
+              `Component "${name}" requires app version ${definition.minAppVersion} or higher.`,
+              {
+                component: name,
+                source: resolvedSource || undefined,
+                required: definition.minAppVersion,
+                current: APP_VERSION,
+              },
+            );
+            return null;
+          }
+
+          if (Array.isArray(definition.requiredContent) && definition.requiredContent.length) {
+            const { isValid, missing } = validateRequiredContentPaths(
+              resolvedContent,
+              definition.requiredContent,
+            );
+            if (!isValid) {
+              reportExtensionIssue(
+                `Component "${name}" is missing required content.`,
+                {
+                  component: name,
+                  source: resolvedSource || undefined,
+                  page: currentPage.value.id,
+                  missing,
+                  configKey: resolvedConfigKey,
+                },
+              );
+              return null;
+            }
+          }
+        }
+
+        const props = {};
+        if (isExtension) {
+          props.content = resolvedContent !== undefined ? resolvedContent : null;
+          props.configKey = resolvedConfigKey;
+        }
+
+        return {
+          key: `${keyBase}-${index}`,
+          component,
+          configKey: resolvedConfigKey,
+          props,
+        };
+      })
+      .filter(Boolean);
+  });
+
+  return { loadedComponents };
+}