@koehler8/cms 1.0.0-beta.5

package/src/styles/layout.css

@@ -0,0 +1,342 @@
+:root {
+  --layout-container-max-width: min(1180px, 92vw);
+  --layout-container-padding: clamp(16px, 4vw, 48px);
+  --layout-section-padding: clamp(48px, 12vw, 120px);
+  --layout-section-padding-tight: clamp(32px, 10vw, 80px);
+  --layout-grid-gutter: clamp(16px, 4vw, 32px);
+  --layout-stack-gap-tight: var(--ui-space-12, 12px);
+  --layout-stack-gap: var(--ui-space-16, 16px);
+  --layout-stack-gap-lg: var(--ui-space-24, 24px);
+  --layout-stack-gap-xl: var(--ui-space-40, 40px);
+  --layout-breakpoint-sm: 600px;
+  --layout-breakpoint-md: 768px;
+  --layout-breakpoint-lg: 1024px;
+  --layout-breakpoint-xl: 1280px;
+}
+
+/* Containers */
+.container {
+  width: min(var(--layout-container-max-width), 100%);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--layout-container-padding);
+  padding-right: var(--layout-container-padding);
+}
+
+.container-fluid {
+  width: 100%;
+  margin: 0;
+  padding-left: var(--layout-container-padding);
+  padding-right: var(--layout-container-padding);
+}
+
+.section-shell {
+  padding-block: var(--layout-section-padding);
+}
+
+.section-shell--tight {
+  padding-block: var(--layout-section-padding-tight);
+}
+
+/* Spacing helpers */
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.mb-1 {
+  margin-bottom: var(--ui-space-8, 8px) !important;
+}
+
+.mb-2 {
+  margin-bottom: var(--ui-space-12, 12px) !important;
+}
+
+.mb-3 {
+  margin-bottom: var(--ui-space-16, 16px) !important;
+}
+
+.mb-4 {
+  margin-bottom: var(--ui-space-24, 24px) !important;
+}
+
+.mt-1 {
+  margin-top: var(--ui-space-8, 8px) !important;
+}
+
+.mt-2 {
+  margin-top: var(--ui-space-12, 12px) !important;
+}
+
+.mt-3 {
+  margin-top: var(--ui-space-16, 16px) !important;
+}
+
+.mt-4 {
+  margin-top: var(--ui-space-24, 24px) !important;
+}
+
+/* Grid */
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: calc(var(--layout-grid-gutter) * -0.5);
+  margin-right: calc(var(--layout-grid-gutter) * -0.5);
+  row-gap: var(--layout-grid-gutter);
+}
+
+.row--tight {
+  column-gap: var(--ui-gap-md, 16px);
+  row-gap: var(--ui-gap-md, 16px);
+}
+
+.row > [class*='col-'] {
+  padding-left: calc(var(--layout-grid-gutter) * 0.5);
+  padding-right: calc(var(--layout-grid-gutter) * 0.5);
+  flex: 0 0 auto;
+  width: 100%;
+  max-width: 100%;
+  --col-span: 12;
+}
+
+.row .col-auto {
+  flex: 0 0 auto;
+  width: auto;
+  max-width: none;
+}
+
+.row .col {
+  flex: 1 1 0;
+  width: auto;
+  max-width: none;
+}
+
+.row .col-1 { --col-span: 1; }
+.row .col-2 { --col-span: 2; }
+.row .col-3 { --col-span: 3; }
+.row .col-4 { --col-span: 4; }
+.row .col-5 { --col-span: 5; }
+.row .col-6 { --col-span: 6; }
+.row .col-7 { --col-span: 7; }
+.row .col-8 { --col-span: 8; }
+.row .col-9 { --col-span: 9; }
+.row .col-10 { --col-span: 10; }
+.row .col-11 { --col-span: 11; }
+.row .col-12 { --col-span: 12; }
+
+.row > [class*='col-']:not(.col-auto):not(.col) {
+  flex-basis: calc((var(--col-span) / 12) * 100%);
+  max-width: calc((var(--col-span) / 12) * 100%);
+}
+
+@media (min-width: 600px) {
+  .row .col-sm-1 { --col-span: 1; }
+  .row .col-sm-2 { --col-span: 2; }
+  .row .col-sm-3 { --col-span: 3; }
+  .row .col-sm-4 { --col-span: 4; }
+  .row .col-sm-5 { --col-span: 5; }
+  .row .col-sm-6 { --col-span: 6; }
+  .row .col-sm-7 { --col-span: 7; }
+  .row .col-sm-8 { --col-span: 8; }
+  .row .col-sm-9 { --col-span: 9; }
+  .row .col-sm-10 { --col-span: 10; }
+  .row .col-sm-11 { --col-span: 11; }
+  .row .col-sm-12 { --col-span: 12; }
+}
+
+@media (min-width: 768px) {
+  .row .col-md-1 { --col-span: 1; }
+  .row .col-md-2 { --col-span: 2; }
+  .row .col-md-3 { --col-span: 3; }
+  .row .col-md-4 { --col-span: 4; }
+  .row .col-md-5 { --col-span: 5; }
+  .row .col-md-6 { --col-span: 6; }
+  .row .col-md-7 { --col-span: 7; }
+  .row .col-md-8 { --col-span: 8; }
+  .row .col-md-9 { --col-span: 9; }
+  .row .col-md-10 { --col-span: 10; }
+  .row .col-md-11 { --col-span: 11; }
+  .row .col-md-12 { --col-span: 12; }
+}
+
+@media (min-width: 1024px) {
+  .row .col-lg-1 { --col-span: 1; }
+  .row .col-lg-2 { --col-span: 2; }
+  .row .col-lg-3 { --col-span: 3; }
+  .row .col-lg-4 { --col-span: 4; }
+  .row .col-lg-5 { --col-span: 5; }
+  .row .col-lg-6 { --col-span: 6; }
+  .row .col-lg-7 { --col-span: 7; }
+  .row .col-lg-8 { --col-span: 8; }
+  .row .col-lg-9 { --col-span: 9; }
+  .row .col-lg-10 { --col-span: 10; }
+  .row .col-lg-11 { --col-span: 11; }
+  .row .col-lg-12 { --col-span: 12; }
+}
+
+@media (min-width: 1280px) {
+  .row .col-xl-1 { --col-span: 1; }
+  .row .col-xl-2 { --col-span: 2; }
+  .row .col-xl-3 { --col-span: 3; }
+  .row .col-xl-4 { --col-span: 4; }
+  .row .col-xl-5 { --col-span: 5; }
+  .row .col-xl-6 { --col-span: 6; }
+  .row .col-xl-7 { --col-span: 7; }
+  .row .col-xl-8 { --col-span: 8; }
+  .row .col-xl-9 { --col-span: 9; }
+  .row .col-xl-10 { --col-span: 10; }
+  .row .col-xl-11 { --col-span: 11; }
+  .row .col-xl-12 { --col-span: 12; }
+}
+
+/* Stack helpers */
+.stack-tight {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-stack-gap-tight);
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-stack-gap);
+}
+
+.stack-lg {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-stack-gap-lg);
+}
+
+.stack-xl {
+  display: flex;
+  flex-direction: column;
+  gap: var(--layout-stack-gap-xl);
+}
+
+.gap-sm {
+  gap: var(--layout-stack-gap-tight);
+}
+
+.gap-md {
+  gap: var(--layout-stack-gap);
+}
+
+.gap-lg {
+  gap: var(--layout-stack-gap-lg);
+}
+
+.gap-xl {
+  gap: var(--layout-stack-gap-xl);
+}
+
+/* Typography helpers */
+.text-center {
+  text-align: center !important;
+}
+
+.text-left {
+  text-align: left !important;
+}
+
+.text-right {
+  text-align: right !important;
+}
+
+.text-muted {
+  color: var(--ui-text-muted, var(--brand-fg-300, #54627b));
+}
+
+.text-primary {
+  color: var(--ui-text-primary, var(--brand-fg-100, #1f2a44));
+}
+
+.text-uppercase {
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.eyebrow-label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--ui-text-muted, var(--brand-fg-300, #54627b));
+}
+
+/* Flexbox + alignment helpers */
+.d-flex {
+  display: flex !important;
+}
+
+.flex-column {
+  flex-direction: column !important;
+}
+
+.flex-wrap {
+  flex-wrap: wrap !important;
+}
+
+.justify-between {
+  justify-content: space-between !important;
+}
+
+.justify-center {
+  justify-content: center !important;
+}
+
+.align-center {
+  align-items: center !important;
+}
+
+.align-start {
+  align-items: flex-start !important;
+}
+
+.align-end {
+  align-items: flex-end !important;
+}
+
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.rounded {
+  border-radius: 12px;
+}
+
+.rounded-lg {
+  border-radius: 24px;
+}
+
+.img-fluid {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.text-break {
+  overflow-wrap: anywhere;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Legal pages */

package/src/styles/theme-base.css

@@ -0,0 +1,84 @@
+:root {
+  --about-image-surface: rgba(10, 10, 13, 0.94);
+  --about-image-placeholder: linear-gradient(135deg, rgba(20, 18, 22, 0.55), rgba(10, 10, 13, 0.75));
+  --responsive-picture-surface: var(--about-image-surface);
+  --responsive-picture-placeholder: var(--about-image-placeholder);
+  --brand-neon-pink: #e44b8d;
+  --brand-crimson-red: #d04f4f;
+  --brand-sultry-purple: #5c6ac4;
+  --brand-electric-blue: #4f6cf0;
+  --brand-amber-heat: #f18f3b;
+  --brand-deep-violet: #2f3a68;
+
+  --brand-bg-900: #f5f7ff;
+  --brand-bg-800: #edf1ff;
+  --brand-bg-700: #dce4ff;
+  --brand-fg-050: #243a80;
+  --brand-fg-100: #1f2a44;
+  --brand-fg-200: #334261;
+  --brand-fg-300: #54627b;
+
+  --brand-radius-sm: 8px;
+  --brand-radius-md: 14px;
+  --brand-radius-lg: 24px;
+
+  --brand-gradient-ignition: linear-gradient(135deg, #4f6cf0 0%, #243a80 100%);
+  --brand-shadow-glow: 0 16px 32px rgba(28, 42, 96, 0.28);
+  --brand-shadow-glow-strong: 0 22px 44px rgba(23, 35, 80, 0.32);
+  --brand-chart-track: rgba(236, 241, 255, 0.85);
+  --brand-chart-center-text: var(--brand-fg-100);
+  --brand-cta-text: #ffffff;
+
+  --brand-accent-electric: var(--brand-electric-blue);
+  --brand-accent-electric-soft: rgba(79, 108, 240, 0.18);
+  --brand-accent-warm: var(--brand-amber-heat);
+
+  --brand-card-soft: #ffffff;
+  --brand-card-border: rgba(79, 108, 240, 0.16);
+  --brand-card-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
+
+  --brand-primary-cta-gradient: var(--brand-gradient-ignition);
+  --brand-primary-cta-text: var(--brand-cta-text);
+  --brand-primary-cta-shadow: var(--brand-shadow-glow);
+  --brand-primary-cta-hover-shadow: var(--brand-shadow-glow-strong);
+  --brand-primary-cta-hover-translate: translateY(-2px);
+
+  --brand-surface-card-bg: var(--brand-card-soft);
+  --brand-surface-card-border: var(--brand-card-border);
+  --brand-surface-card-shadow: var(--brand-card-shadow);
+  --brand-surface-helper-bg: rgba(79, 108, 240, 0.08);
+  --brand-surface-helper-hover-bg: rgba(79, 108, 240, 0.14);
+  --brand-card-radius: var(--brand-radius-lg);
+  --brand-button-radius: var(--brand-radius-md);
+
+  --brand-icon-badge-bg: rgba(79, 108, 240, 0.12);
+  --brand-icon-badge-color: var(--brand-deep-violet);
+
+  --brand-pill-gradient: linear-gradient(135deg, var(--brand-electric-blue) 0%, #2b3d7b 100%);
+  --brand-pill-alt-gradient: linear-gradient(135deg, var(--brand-sultry-purple) 0%, var(--brand-electric-blue) 100%);
+  --brand-pill-contrast: #ffffff;
+
+  --brand-border-highlight: rgba(79, 108, 240, 0.28);
+  --brand-border-glow: rgba(79, 108, 240, 0.32);
+
+  --brand-status-success: #239c65;
+  --brand-status-error: var(--brand-crimson-red);
+  --brand-status-error-soft: rgba(208, 79, 79, 0.18);
+
+  --brand-input-bg: #ffffff;
+  --brand-input-border: rgba(79, 108, 240, 0.25);
+  --brand-input-border-active: rgba(79, 108, 240, 0.45);
+  --brand-input-text: var(--brand-fg-100);
+  --brand-input-placeholder: rgba(84, 98, 123, 0.64);
+  --brand-focus-ring: 0 0 0 2px rgba(79, 108, 240, 0.3);
+  --brand-focus-glow: 0 0 22px rgba(79, 108, 240, 0.22);
+
+  --brand-modal-backdrop: rgba(15, 23, 42, 0.55);
+  --brand-modal-surface: rgba(255, 255, 255, 0.97);
+  --brand-modal-border: rgba(79, 108, 240, 0.18);
+  --brand-modal-shadow: 0 24px 48px rgba(15, 23, 42, 0.18);
+  --brand-modal-radius: var(--brand-radius-lg);
+
+  --brand-countdown-digit: var(--brand-accent-electric);
+  --brand-countdown-label: rgba(84, 98, 123, 0.75);
+}

package/src/themes/themeLoader.js

@@ -0,0 +1,124 @@
+import baseManifest from '../../themes/base/theme.config.js';
+const cssModules = import.meta.glob('../../themes/**/theme.css', { eager: true });
+import { validateThemeManifest } from './themeValidator.js';
+
+const manifestModules = import.meta.glob(
+  [
+    '../../themes/**/theme.config.js',
+    '../../themes/**/theme.config.mjs',
+    '../../themes/**/theme.config.json',
+  ],
+  { eager: true }
+);
+
+const catalog = {};
+
+const normalizeSlug = (slug) =>
+  typeof slug === 'string' && slug.trim().length > 0 ? slug.trim().toLowerCase() : null;
+
+const cssMap = Object.keys(cssModules).reduce((acc, key) => {
+  const slugMatch = key.match(/\/themes\/([^/]+)\/theme\.css$/);
+  if (slugMatch) {
+    acc[slugMatch[1]] = key;
+  }
+  return acc;
+}, {});
+
+const addToCatalog = (manifest, sourceId, cssPath) => {
+  if (!manifest || typeof manifest !== 'object') return;
+  const normalized = normalizeSlug(manifest.slug);
+  try {
+    validateThemeManifest(manifest);
+  } catch (error) {
+    const message = error?.message || 'Unknown theme validation error';
+    throw new Error(`[theme-loader] ${message} (source: ${sourceId})`);
+  }
+  if (!normalized) {
+    throw new Error(`[theme-loader] Theme manifest missing slug (source: ${sourceId})`);
+  }
+  if (catalog[normalized]) {
+    console.warn(
+      `[theme-loader] Duplicate theme slug "${normalized}" detected. Source ${sourceId} skipped.`
+    );
+    return;
+  }
+
+  catalog[normalized] = {
+    ...manifest,
+    slug: normalized,
+    assets: {
+      ...manifest.assets,
+      css: manifest.assets?.css || cssPath || undefined,
+    },
+  };
+};
+
+// Auto-discover bundled themes (i.e. base)
+Object.entries(manifestModules).forEach(([path, module]) => {
+  const manifest = module?.default ?? module;
+  const slug = normalizeSlug(manifest?.slug);
+  const bundledCssPath = slug ? cssMap[slug] : undefined;
+  addToCatalog(manifest, path, bundledCssPath ? bundledCssPath.replace('../../', '') : undefined);
+});
+
+if (!catalog.base) {
+  addToCatalog(baseManifest, 'themes/base/theme.config.js', undefined);
+}
+
+/**
+ * Register an external theme package.
+ *
+ * Called by the Vite plugin for each theme passed via the `themes` option.
+ * Must be called before the first render (during app initialisation).
+ *
+ * @param {object} themeModule - Default export from a @koehler8/cms-theme-* package
+ *   Expected shape: { manifest, css? } or just the manifest object directly.
+ */
+export function registerTheme(themeModule) {
+  if (!themeModule || typeof themeModule !== 'object') {
+    throw new Error('[theme-loader] registerTheme() requires a theme module object');
+  }
+
+  const manifest = themeModule.manifest || themeModule;
+  const cssContent = themeModule.css;
+  const sourceId = `external:${manifest?.slug || 'unknown'}`;
+
+  addToCatalog(manifest, sourceId, undefined);
+
+  // If the theme package shipped inline CSS, inject it into the document head.
+  if (cssContent && typeof cssContent === 'string' && typeof document !== 'undefined') {
+    const slug = normalizeSlug(manifest.slug);
+    const existingStyle = document.getElementById(`theme-css-${slug}`);
+    if (!existingStyle) {
+      const style = document.createElement('style');
+      style.id = `theme-css-${slug}`;
+      style.textContent = cssContent;
+      document.head.appendChild(style);
+    }
+  }
+}
+
+export function getThemeCatalog() {
+  return catalog;
+}
+
+export function getThemeManifest(themeKey) {
+  if (typeof themeKey !== 'string') return null;
+  return catalog[themeKey.trim().toLowerCase()] || null;
+}
+
+export function resolveThemeManifest(themeKey) {
+  return (
+    getThemeManifest(themeKey) ||
+    catalog.base ||
+    Object.values(catalog)[0] ||
+    null
+  );
+}
+
+export function listThemeMetadata() {
+  return Object.values(catalog).map((manifest) => ({
+    slug: manifest.slug,
+    meta: manifest.meta,
+  }));
+}