@koehler8/cms 1.0.0-beta.15 → 1.0.0-beta.17

package/src/components/Home.vue

@@ -1,9 +1,10 @@
 <template>
+  <a class="cms-skip-link" href="#main-content">Skip to main content</a>
   <IntroGate
     :enabled="introGateEnabled"
     v-bind="introGateProps"
   />
-  <main>
+  <main id="main-content" tabindex="-1">
     <component
       v-for="entry in loadedComponents"
       :is="entry.component"
@@ -115,3 +116,43 @@ watch(
 );
 </script>
 
+<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;
+  text-decoration: none;
+  z-index: 9999;
+  transform: translateY(-100%);
+  transition: transform 0.15s ease;
+}
+.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/Plan.vue

@@ -94,7 +94,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 +108,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);

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);

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/styles/base.css

@@ -643,7 +643,9 @@ a:focus-visible {
 }
 
 .ui-form-control::placeholder {
-  color: var(--ui-form-placeholder, var(--brand-input-placeholder, rgba(84, 98, 123, 0.64)));
+  /* Solid fallback (#54627b = 5.66:1 on white). Avoid alpha — composited
+     placeholder colors slip below 4.5:1 quickly. */
+  color: var(--ui-form-placeholder, var(--brand-input-placeholder, #54627b));
 }
 
 .ui-form-control:focus {
@@ -692,7 +694,9 @@ a:focus-visible {
 }
 
 .ui-input-group__input::placeholder {
-  color: var(--ui-form-placeholder, var(--brand-input-placeholder, rgba(84, 98, 123, 0.64)));
+  /* Solid fallback (#54627b = 5.66:1 on white). Avoid alpha — composited
+     placeholder colors slip below 4.5:1 quickly. */
+  color: var(--ui-form-placeholder, var(--brand-input-placeholder, #54627b));
 }
 
 .ui-input-group__input:focus {
@@ -852,6 +856,11 @@ a:focus-visible {
   transform: translate3d(0, 0, 0);
 }
 
+.ui-backtotop:focus-visible {
+  outline: 2px solid #ffffff;
+  outline-offset: 3px;
+}
+
 .ui-backtotop__icon {
   font-size: 1rem;
   line-height: 1;

package/src/themes/buildCssVarMap.js

@@ -68,6 +68,12 @@ export function buildCssVarMap(manifest) {
   const radii = tokens.radii || {};
   const elevation = tokens.elevation || {};
   const utility = tokens.utility || {};
+  // Section-chrome blocks for surfaces that pair text with non-default
+  // backgrounds. Components read these to avoid the fallback-chain trap
+  // (e.g. dark hero surface + light --ui-text-primary fallback = invisible).
+  const hero = tokens.hero || {};
+  const footer = tokens.footer || {};
+  const plan = tokens.plan || {};
 
   assignPrefixed(
     vars,
@@ -231,6 +237,25 @@ export function buildCssVarMap(manifest) {
   setVar(vars, '--status-price-value-color', palette.accent || palette.primary || text.primary);
   setVar(vars, '--status-price-value-shadow', elevation.raised);
 
+  // Hero text — paired with the hero surface to keep contrast intact when
+  // a consumer overrides the hero bg. textOnDark is the fallback when no
+  // hero.text is set.
+  setVar(vars, '--brand-hero-text', hero.text || text.primary);
+  setVar(vars, '--brand-hero-text-on-dark', hero.textOnDark || text.onDark || text.inverse);
+  setVar(vars, '--brand-hero-eyebrow', hero.eyebrow || palette.primary);
+
+  // Footer chrome — FooterMinimal's default bg is dark, so it reads
+  // these instead of falling through --ui-text-primary (a light-on-light trap).
+  setVar(vars, '--brand-footer-text', footer.text || text.onDark || text.inverse);
+  setVar(vars, '--brand-footer-text-muted', footer.textMuted || text.onDarkMuted);
+  setVar(vars, '--brand-footer-link-color', footer.linkColor || footer.text || text.onDark || text.inverse);
+  setVar(vars, '--brand-footer-link-hover', footer.linkHover || '#ffffff');
+
+  // Plan card chrome — same dark-surface pairing.
+  setVar(vars, '--brand-plan-card-text', plan.cardText || text.inverse);
+  setVar(vars, '--brand-plan-card-muted-text', plan.cardMutedText || text.onDarkMuted);
+  setVar(vars, '--brand-plan-step-ring', plan.stepRing);
+
   return vars;
 }
 

package/templates/index.html

@@ -28,9 +28,14 @@
   </head>
   <!-- Google Analytics is loaded dynamically after user consent -->
   <body>
-    <main>
-      <div id="app"></div>
-    </main>
+    <noscript>
+      <style>
+        /* Scroll-reveal targets stay opacity:0 until JS observes them. If JS
+           never runs, force them visible so SSG content remains accessible. */
+        .fade-up-in { opacity: 1 !important; transform: none !important; }
+      </style>
+    </noscript>
+    <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>

package/templates/scaffolds/site/.nvmrc

@@ -0,0 +1 @@
+20.19.0

package/templates/scaffolds/site/CLAUDE.md

@@ -0,0 +1,121 @@
+# site-__SLUG__
+
+(staging URL TBD)
+
+A site built on the [`@koehler8/cms`](https://github.com/koehler8/cms) framework. **Owner: TBD.** This file is auto-loaded by Claude Code in this directory — read it before making changes.
+
+## Project status
+
+Freshly scaffolded via `npx cms-create-site`. Home page renders the bundled `Header` + `Hero` + `Footer` components with placeholder copy. No theme, extension, or custom components yet — see "Where things go" below for the path each new addition should take.
+
+## Working with the site owner
+
+Assume the owner is not a developer unless you know otherwise. Default behaviors:
+
+- Explain trade-offs in plain language; propose options, don't present decisions.
+- Confirm before structural or visual changes that will be hard to reverse.
+- Push small, reviewable changes frequently and verify on the live URL.
+- Don't over-engineer — most requests can be satisfied by editing `pages/*.json` + bundled CMS components. Reach for a custom Vue component only when the bundled set clearly can't do the job.
+
+## Where things go (the navigation guide)
+
+| Goal | Where |
+|---|---|
+| Edit page copy / hero text / section content | `site/content/{locale}/pages/{pageId}.json` under `content.{configKey}.*` keys |
+| Edit site title, theme key, support email | `site/content/{locale}/site.json` |
+| Edit header logo text, nav items, footer flags | `site/content/{locale}/shared.json` |
+| Add a translation | Mirror the keys you want to override into `site/content/{otherLocale}/...` (only set the keys that differ — the rest inherit from the base locale) |
+| Add an asset (image, icon) | `site/assets/img/...`. Reference it from a component via `resolveAsset('img/foo.png')` or a URL string in content (`"img/foo.png"`) |
+| Override the favicon | Drop a real `.ico` at `site/favicon.ico`; the `cms-generate-public-assets` script picks it up |
+| Add a one-off Vue component (this site only) | `site/components/Foo.vue`. Auto-globbed by the CMS — reference it as `"Foo"` in any page's `components[]`. Read content via `inject('pageContent')`, use `<style scoped>` with `var(--brand-*)` tokens. |
+| Add a component intended to be reused on other sites | The local extension at `extensions/<slug>/`. Add `components/Foo.vue`, register it in `extension.config.json`, and add a dynamic import to `index.js`. Eventually publishable as `@koehler8/cms-ext-<slug>`. |
+| Customize colors, typography, surfaces | `themes/<slug>/theme.config.js`. The CMS regenerates `virtual:cms-theme-vars.css` from the manifest on next build; CMS components consume the vars via `var(--brand-*)`. |
+| Activate a theme | Set `"theme": "<slug>"` in `site/content/{baseLocale}/site.json`. |
+| Add a new page | Create `site/content/{locale}/pages/{pageId}.json` with a `path` and `components[]` array. vite-ssg pre-renders one HTML file per page automatically. |
+| Add a new locale | Create `site/content/{locale}/...` mirroring the base locale's structure. Auto-discovered. |
+| Add a new theme to the project | `npx cms-create-theme <slug>` (scaffolds `themes/<slug>/`, then follow the printed next-steps). |
+| Add a new local extension | `npx cms-create-extension <slug>`. |
+
+If you find yourself writing a component that conceptually belongs in a "regions" or "agents" or "podcasts" sister site, **promote it from `site/components/` into `extensions/<slug>/`** so it can eventually become a published shared package.
+
+## Stack at a glance
+
+- `@koehler8/cms` ^1.0.0-beta.15+ — Vue 3 + vite-ssg framework
+- `@koehler8/cms-ext-compliance` — cookie banner / legal pages (registered by default)
+- `[site/components/](site/components/)` — auto-globbed Vue files for one-off custom UI specific to this site. **The default home for new components.**
+- `[themes/](themes/)`, `[extensions/](extensions/)` — currently empty. Add via the `cms-create-{theme,extension}` CLIs above.
+
+## File layout
+
+```
+site/content/{locale}/        per-locale content (auto-discovered)
+  site.json                   site title, description, theme key, support email
+  shared.json                 cross-page settings — header logo / nav, footer flags
+  pages/{pageId}.json         per-page components[] + content.{configKey}.* keys
+  pages/home.json             home page (the only page in a freshly scaffolded site)
+site/components/              auto-globbed Vue files (the default home for one-off
+                              custom UI). Reference by basename in components[].
+site/assets/img/              site-specific images / icons
+site/style.css                non-critical site overrides (loaded async by the CMS;
+                              fine for things that wouldn't cause a visible flash)
+site/favicon.ico              optional override; `cms-generate-public-assets`
+                              picks it up over the auto-generated letter-favicon
+themes/<slug>/                site-local CMS theme — destined to lift into a
+                              standalone @koehler8/cms-theme-<slug> repo
+extensions/<slug>/            site-local CMS extension — destined to lift into a
+                              standalone @koehler8/cms-ext-<slug> repo
+```
+
+## Common tasks (quick recipes)
+
+### Edit hero / footer copy
+Open `site/content/{baseLocale}/pages/home.json`. Hero text lives under `content.promo.*`; footer text under `content.footer.*` (or whatever configKey the components use). Push and the deploy pipeline picks it up.
+
+### Edit nav links
+`site/content/{baseLocale}/shared.json` → `content.header.navItems[N]`. Each entry is `{ text, href, target? }`. Add `"target": "_blank"` for off-site links.
+
+### Add a custom component
+1. Create `site/components/Foo.vue`.
+2. `inject('pageContent')` for content; `<style scoped>` with `var(--brand-*)` tokens.
+3. Reference as `"Foo"` in any page's `components[]`.
+
+### Add a new page
+1. Create `site/content/{baseLocale}/pages/{pageId}.json` with a `path` (e.g. `/about`) and `components[]`.
+2. Add a `navItems` entry pointing at the new path in `shared.json` if it should be in the nav.
+3. Push — vite-ssg generates `dist/{path}/index.html` automatically.
+
+### Change colors / typography
+Edit `themes/<slug>/theme.config.js`. The CMS regenerates `virtual:cms-theme-vars.css` from the manifest on next build; CMS components and your custom components consume the vars via `var(--brand-*)`, so the change cascades.
+
+## Lockfile and npm version — read before bumping any dep
+
+This project pins **Node 20.19 / npm 10.8** to match AWS Amplify exactly. Local installs with a different npm version produce subtly different lockfiles that look fine locally but break CI.
+
+Two failure modes seen on sister sites:
+1. `Cannot find module '@rolldown/binding-linux-x64-gnu'` — npm 11 regen stripped optional-dep entries Amplify needs.
+2. `npm ci ... Missing: @types/react@..., @noble/hashes@... from lock file` — npm 11 omitted entries npm 10 expects.
+
+Rules:
+- **Always run `nvm use` before `npm install`**. `.nvmrc` pins 20.19.0 (which ships npm 10.8.x).
+- **Prefer targeted bumps**: `npm install <pkg>@<ver> --no-audit --no-fund`. **Never** `rm package-lock.json && npm install` unless you're on the pinned npm version.
+- **The build uses `npm install`**, not `npm ci` (see `amplify.yml`) for drift tolerance.
+
+## Local dev
+
+```bash
+nvm use
+cp .env.example .env       # placeholder values; not used by default
+npm install
+npm run dev                # Vite dev server on http://localhost:5173
+```
+
+Build:
+
+```bash
+npm run generate:public-assets   # generates favicon/og-image from site.json
+npm run build:ssg                # pre-renders dist/{locale}/{page}/index.html
+```
+
+## Deploy
+
+Pushes to `main` trigger an automatic AWS Amplify build per `amplify.yml`. Set up the Amplify app + custom domain via the AWS console (or `aws amplify create-app` + `create-domain-association`) — see the existing sister sites' setup notes if available, or the koehler8 site repos as reference.

package/templates/scaffolds/site/README.md

@@ -0,0 +1,25 @@
+# site-__SLUG__
+
+A site built on [`@koehler8/cms`](https://github.com/koehler8/cms).
+
+For architecture, conventions, and a navigation guide for "where things go" (content, components, themes, extensions), read **[CLAUDE.md](CLAUDE.md)**.
+
+## Local development
+
+```bash
+nvm use                    # Node 20.19.0 per .nvmrc
+cp .env.example .env
+npm install
+npm run dev
+```
+
+## Build
+
+```bash
+npm run generate:public-assets
+npm run build:ssg
+```
+
+## Deployment
+
+Pushes to `main` trigger an automatic AWS Amplify build (see [amplify.yml](amplify.yml)).

package/templates/scaffolds/site/amplify.yml

@@ -0,0 +1,22 @@
+version: 1
+frontend:
+  phases:
+    preBuild:
+      commands:
+        - nvm install 20.19.0 && nvm use 20.19.0
+        # Use `npm install` (not `npm ci`) so the build tolerates
+        # lockfile/npm-version drift. See CLAUDE.md → "Lockfile and
+        # npm version" for the rationale.
+        - npm install --prefer-offline --no-audit --no-fund
+        - npm run generate:public-assets
+    build:
+      commands:
+        - npm run build:ssg
+  artifacts:
+    baseDirectory: dist
+    files:
+      - '**/*'
+  cache:
+    paths:
+      - node_modules/**/*
+      - .npm/**/*

package/templates/scaffolds/site/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@koehler8/site-__SLUG__",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:ssg": "vite-ssg build",
+    "preview": "vite preview",
+    "generate:public-assets": "cms-generate-public-assets --site-dir ./site"
+  },
+  "dependencies": {
+    "@koehler8/cms": "^1.0.0-beta.15",
+    "@koehler8/cms-ext-compliance": "^1.0.0-beta.4",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vite": "^8.0.3",
+    "vite-ssg": "^28.2.2",
+    "vue": "^3.5.22",
+    "vue-router": "^5.0.4"
+  },
+  "engines": {
+    "node": ">=20.19.0",
+    "npm": "^10.8.0"
+  }
+}

package/templates/scaffolds/site/site/content/content.config.json

@@ -0,0 +1,3 @@
+{
+  "baseLocale": "en"
+}

package/templates/scaffolds/site/site/content/en/pages/home.json

@@ -0,0 +1,8 @@
+{
+  "components[0]": "Header",
+  "components[1]": "Hero",
+  "components[2]": "Footer",
+  "content.promo.mainText": "__DISPLAY_NAME__",
+  "content.promo.tagLine": "Welcome",
+  "path": "/"
+}

package/templates/scaffolds/site/site/content/en/shared.json

@@ -0,0 +1,5 @@
+{
+  "content.header.logoText": "__DISPLAY_NAME__",
+  "content.header.showLocaleLinks": false,
+  "content.header.showWallet": false
+}

package/templates/scaffolds/site/site/content/en/site.json

@@ -0,0 +1,7 @@
+{
+  "description": "",
+  "googleId": "",
+  "supportEmail": "",
+  "title": "__DISPLAY_NAME__",
+  "url": ""
+}

package/templates/scaffolds/site/site/style.css

@@ -0,0 +1,4 @@
+/* Site-specific style overrides. Loaded async by the CMS bootstrap, so
+ * fine for things that wouldn't cause a visible flash if they applied
+ * a few hundred ms late. For critical-path styles (above-the-fold,
+ * hide-this-default), see CLAUDE.md → Styles. */

package/templates/scaffolds/site/vite.config.js

@@ -0,0 +1,15 @@
+import cms from '@koehler8/cms/vite';
+
+export default {
+  plugins: cms({
+    siteDir: './site',
+    // Add local themes (created via `npx cms-create-theme <slug>`) here:
+    //   themes: ['cms-theme-<slug>'],
+    // Then activate by setting `"theme": "<slug>"` in site.json.
+    extensions: [
+      '@koehler8/cms-ext-compliance',
+      // Add local extensions (created via `npx cms-create-extension <slug>`) here:
+      //   'cms-ext-<slug>',
+    ],
+  }),
+};