​

Front-Office — Beyond Spec Inventory

This document lists every feature present in the cms-fo codebase (v0.12.6) that is not required by the Next-Generation CMS — Technical Architecture specification (V0.1, October 2025). The spec defines the FO as a public-facing SSR rendering layer consuming the CMS API. The following features extend that scope significantly.

---

​

1. Visual Page Builder

Scope: A full no-code homepage editor embedded in the FO, normally a Back-Office concern. Composables:

• useDragAndDrop.ts — Drag-and-drop operations
• useDragState.ts — Drag state management
• useBlockLibrary.ts — Block type registry and metadata
• useSavedBlocks.ts — localStorage-based saved blocks
• useBuilderValidation.ts — Block composition rules

Store: stores/builder.ts — Pinia/useState store with undo/redo history, block CRUD, import/export. Pages: pages/blocs/index.vue, pages/blocs/preview/[type].vue — Builder UI and preview routes. Utilities:

• utils/builder-helpers.ts — Builder utility functions
• utils/composition-validator.ts — Validate block nesting rules
• utils/atom-validator.ts, utils/atom-rules.ts — Atom block constraints
• utils/field-schemas.ts — Property field schema definitions
• utils/form-defaults.ts — Default values per block type
• utils/blocks-mock-data.ts — Mock data for all block types
• utils/default-template-blocks.ts — Default block configurations per template

Maturity: 85% — Core builder works with drag-and-drop, undo/redo, validation, import/export. Missing: real API persistence (uses local JSON), contact form endpoint.

---

​

2. Atom Component Library

Scope: 27 reusable UI primitives used by dynamic blocks and the builder. Location: components/atoms/*.vue Maturity: 95% — Complete, typed, used across the block system.

---

​

3. Block Multi-Variant System

Scope: Each block type can have multiple visual variants per template and per structure, with automatic resolution. Resolution chain:

1. useBlockVariant.ts — Reads variantTemplate + variantStructure from block config
2. variantResolver.ts — Lookup table mapping (blockType, template, structure) → component
3. BlockTemplateWrapper.vue — Wraps resolved component with template-specific CSS class

Maturity: 85% — 6 block types have full variant support. Remaining blocks use a single implementation.

---

​

4. Design Token Engine

Scope: A complete token-based theming system with palette generation, 4 built-in templates, dark mode, and cross-tab synchronization. The spec mentions a “Design-Token System” as an area extending the platform (section 6.2), but the implementation far exceeds what was described.

​

4.1 Token architecture

​

4.2 Token categories

​

4.3 Template implementations

​

4.4 Theme composable

composables/useTheme.ts — 1,893 lines. Manages template selection, dark mode, RTL, token application, draft edits, BroadcastChannel sync, sessionStorage caching. Maturity: 98% — Exceptionally complete. Dark mode, cross-tab sync, SSR injection, draft system all working.

---

​

5. Dark Mode

Scope: Full dark mode support via design tokens. Maturity: 95% — Complete, persisted, synced.

---

​

6. RTL Support

Scope: Right-to-left layout support for Arabic and similar languages. Maturity: 40% — State plumbing is done, but CSS is not flipped. Needs RTLcss or migration to CSS logical properties (margin-inline-start instead of margin-left).

---

​

7. Advanced Caching (3-Layer ETag)

Scope: A sophisticated client+server caching system far beyond what the spec requires. Additional features:

• ETag / If-None-Match HTTP validation (RFC 7232)
• Request priority system (critical / high / normal / low) with adaptive timeouts (2s SSR, 10s client)
• Connection error recovery with 1s cooldown cache
• Stale-while-revalidate fallback when API is down
• Exponential backoff retry (1s → 2s → 5s, max 2 retries client-side, 0 SSR)
• returnEmptyOnConnectionError option for graceful degradation
• Cache metrics via getCacheStats()

Files: utils/api.ts (817 lines), utils/cache.ts (427 lines), utils/request-priority.ts Maturity: 95% — Battle-tested, well-commented, comprehensive error handling.

---

​

8. Unlayer HTML Parser

Scope: Parses Unlayer (drag-and-drop email builder) HTML output into CMS block configurations. Files: utils/unlayerParser.ts (1,039 lines), utils/unlayerSanitize.ts Features:

• Dual-mode parsing: DOM-based (client) + regex-based (SSR)
• Extracts data-cms-block and data-cms-config attributes
• Cleans Unlayer markup (u_row, u_column, u_content_html)
• Removes Unlayer preview UI elements
• Placeholder deduplication and overlap detection

Maturity: 90% — Robust but complex. Only used by the builder, not the public FO.

---

​

9. Performance Optimizations

Scope: Multiple performance features beyond basic SSR. Maturity: 85% — All features working. Cache metrics page is dev-only. Blurhash needs canvas support.

---

​

10. Form System

Scope: A complete form infrastructure including stepper, validation, and submission (currently disabled). Known issue: Contact form submission is disabled — useContactForm.ts returns false immediately with a TODO comment: “Contact form submission is disabled - endpoint not implemented yet”. Maturity: 60% — Infrastructure complete, endpoint missing.

---

​

11. Extra Content Types

Scope: Content types beyond the spec’s pages / articles / categories / tags. Maturity: 50% — Routes exist, API integration unconfirmed.

---

​

12. Cross-Tab Synchronization

Scope: BroadcastChannel API for real-time sync across tabs and iframes. Fallback: window.addEventListener('storage', ...) for browsers without BroadcastChannel. Extra features in useSiteSettings:

• Polling every 30 seconds for server changes
• Refresh on window.focus
• Custom events: theme-cache-invalidated, site-settings-cache-invalidated

Maturity: 95% — Production-ready, cross-browser fallback.

---

​

13. Prerender Routes Plugin

Scope: Dynamic route discovery from the CMS API at build time. Files: server/plugins/prerender-routes.ts, server/utils/prerender-helper.ts (233 lines) Features:

• Fetches all published pages, articles, categories, tags from the API
• Generates prerender routes for Nitro SSG
• Handles multilingual slugs (string and object formats)
• Pagination support (100 items per page)
• 30s timeout per API call
• Graceful fallback if API is unreachable

Maturity: 90% — Solid with good error handling.

---

​

14. Security Extras

Scope: Security features beyond the spec’s CSP requirement. Maturity: 85% — Solid, targeted protections.

---

​

15. E2E Test Suite

Scope: Versioned end-to-end test suite covering every major FO feature. Framework: Playwright with UI mode, headed mode, and performance test support. Maturity: 85% — Comprehensive, versioned by feature.

---

​

16. Storybook

Scope: Component documentation infrastructure. Files: .storybook/main.ts, .storybook/preview.ts State: Configured (Storybook 8.6, Vue3-Vite framework) but no stories written. Placeholder infrastructure only. Maturity: 10%.

---

​

17. Template Manifest System & Design Token Contract

Scope: A formal architectural contract and a typed manifest system that governs the design-token pipeline and template definitions. Not mentioned in the spec.

​

17.1 Design Token Contract

File: DESIGN_TOKENS_CONTRACT.md (100 lines) Defines the golden rules for color management:

• Single source of truth: baseColors → palette (50–950) → semantic tokens → CSS variables
• Build-time generation vs runtime override paradigm
• Strict accessibility constraints (contrast ratios)
• No raw hex values allowed in components — only token references

​

17.2 Template Manifests

Each manifest defines: section layout, density, token requirements, and accessibility specs. Maturity: 90% — Well-structured and typed. Could benefit from runtime validation of manifest-to-CSS token alignment.

---

​

18. Token Editor Components

Scope: Interactive components for editing design tokens in the browser — part of the design system tooling. A11yStatus features:

• Displays contrast reports per palette shade
• Suggests accessible color alternatives
• “Non-accessible mode” toggle for expert override (skips contrast checks)
• Emits events for mode toggling and fix application

Maturity: 80% — Functional for internal tooling. Not exposed to end users. Could benefit from more semantic token editors (typography, shadow).

---

​

19. Block Management Tool

Scope: A secondary block management UI in components/blocs/ — distinct from the components/builder/ visual builder. Used as an internal admin tool for zone-based block editing. Key differences from the visual builder (components/builder/):

• Zone-based (sidebar / content / right_sidebar) rather than free-form canvas
• Simpler, admin-oriented UI
• Extensive debug logging
• Direct block CRUD events rather than undo/redo history

Maturity: 75% — Working but verbose (debug logging). May be consolidated with the visual builder long-term.

---

​

20. Client-Side Plugins Suite

Scope: Four client-side Nuxt plugins that extend runtime behavior well beyond the spec.

​

20.1 i18n Locale Prefix Blocking

File: plugins/block-i18n-redirects.client.ts (106 lines) Prevents navigations to language prefixes (/en, /fr, /nl) when the no_prefix strategy is used. Installs a beforeEach router guard and cleans initial paths.

​

20.2 Critical CSS Injection

File: plugins/critical-css.ts (75 lines) Injects inline critical CSS in <head> during SSR for FCP optimization. Contains above-the-fold reset, flexbox utilities, typography base, focus-visible, and font-display: swap.

​

20.3 Design Tokens Client Initialization

File: plugins/design-tokens.client.ts (254 lines) Loads design tokens from localStorage (user overrides) and the API (non-default templates) at page load. Does not execute in iframes (defers to preview-tokens plugin).

​

20.4 Preview Tokens (iframe)

File: plugins/preview-tokens.client.ts (365 lines) Listens to postMessage events inside the preview iframe and applies tokens dynamically. Handles three message types: apply-tokens, apply-template, reload-fonts. Double-verified (iframe detection + preview-template param). Combined maturity: 90% — All plugins are production-ready. Critical CSS could be automated from Lighthouse data.

---

​

21. Developer Utilities & Build Scripts

Scope: Supporting utilities and scripts that improve DX and build reliability.

​

21.1 Google Fonts Dynamic Loader

File: utils/googleFonts.ts (58 lines) Dynamically loads Google Fonts in preview iframes. Generates API URLs, extracts font names, manages DOM <link> elements.

​

21.2 Toast Notification System

File: composables/useNotifications.ts (104 lines) Toast notification composable: show(), success(), error(), warning(), info(), remove(), clear(). Auto-dismissal timer. Replaces raw console.error with user-visible feedback.

​

21.3 i18n Normalization Utilities

File: utils/i18n.ts (100 lines) Normalizes locales and multilingual values: normalizeLocale(), normalizeMultilingualValue(), getLocalizedValue(). Handles nested structures and fallback chains.

​

21.4 Content Configuration API

File: composables/useContentConfig.ts (90 lines) Fetches content configuration from the API with graceful defaults. Used for article pagination settings. Extensible to other content types.

​

21.5 URL Mapper

File: utils/urlMapper.ts (102 lines) Maps 18 URL types (placeholders, social, branding) using runtime config. Provides getPlaceholderImage(), getPlaceholderAvatar(), getPlaceholderBackground() with seeded randomization.

​

21.6 Debug Utilities

File: utils/debug.ts (58 lines) Conditional debug logging: debugLog(), debugError(), debugWarn(). Respects NUXT_DEBUG_API flag and reduces SSR log noise.

​

21.7 Dual Preview Mode System

Two separate composables for preview:

• composables/usePreview.ts (40 lines) — Token-based: reads preview_token from query, provides getPreviewHeaders()
• composables/useIsPreviewMode.ts (15 lines) — Boolean: reads ?preview=true query param

Both coexist — usePreview is for API-authenticated preview, useIsPreviewMode is for UI-only preview toggling.

​

21.8 Build Scripts

​

21.9 Layout & Scaffold

​

21.10 Saved Blocks Library

File: composables/useSavedBlocks.ts (149 lines) localStorage-based block library for the builder: saveBlock(), updateSavedBlock(), deleteSavedBlock(), searchSavedBlocks(). Supports tagging and search. Combined maturity: 85% — All utilities are functional. Dual preview system should be consolidated.

---

​

Summary