Front-Office Roadmap — Beyond-Spec Features

This document tracks the maturity and remaining work for every feature in the FO that was built beyond the Technical Architecture specification. These features are not blockers for v1.0 (spec compliance) but represent significant investment and business value. They should be tracked, maintained, and brought to completion where justified.

Companion documents: Beyond-Spec Inventory (full feature list), FO Roadmap (spec-required work to v1.0), and FO Coverage Analysis (spec gap status).

Maturity overview

Design Token Engine         ██████████████████████████████████████████████████  98%
Atom Component Library      █████████████████████████████████████████████████   95%
Advanced Caching (3-Layer)  █████████████████████████████████████████████████   95%
Dark Mode                   █████████████████████████████████████████████████   95%
Cross-Tab Sync              █████████████████████████████████████████████████   95%
Template Manifests + Contract████████████████████████████████████████████████   90%
Client-Side Plugins Suite   █████████████████████████████████████████████████   90%
Prerender Routes Plugin     █████████████████████████████████████████████████   90%
Unlayer HTML Parser         █████████████████████████████████████████████████   90%
Visual Page Builder         ████████████████████████████████████████████░░░░░   85%
Block Multi-Variant System  ████████████████████████████████████████████░░░░░   85%
Performance Optimizations   ████████████████████████████████████████████░░░░░   85%
Security Extras             ████████████████████████████████████████████░░░░░   85%
E2E Test Suite              ████████████████████████████████████████████░░░░░   85%
Dev Utilities + Build Scripts████████████████████████████████████████████░░░░░  85%
Token Editor Components     ████████████████████████████████████████░░░░░░░░░   80%
Block Management Tool       █████████████████████████████████████░░░░░░░░░░░░   75%
Form System                 ████████████████████████████████████░░░░░░░░░░░░░   60%
Extra Content Types         █████████████████████████████░░░░░░░░░░░░░░░░░░░░  50%
RTL Support                 ████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░  40%
Storybook                   █████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  10%

Feature status and remaining tasks

1. Visual Page Builder — 85%

What works: Drag-and-drop, block tree, property editing, undo/redo, validation, import/export, auto-save, template switching.

#	Remaining task	File(s)	Effort	Priority
B1.1	Migrate persistence from local JSON to CMS API	`server/api/homepage-blocks.get.ts`, `server/api/homepage-blocks.put.ts`	1d	High (also in spec roadmap 2.3)
B1.2	Implement contact form submission endpoint	`composables/useContactForm.ts`	0.5d	Medium (blocked by API)
B1.3	Add builder access control (Keycloak role check)	`pages/blocs/index.vue`	0.5d	Medium
B1.4	Add collaborative editing guard (lock mechanism)	`composables/useBuilderLock.ts` (new)	1d	Low
B1.5	Write unit tests for builder store	`tests/unit/stores/builder.spec.ts`	1d	Medium

Blocked by: API team (homepage-blocks endpoint, contact form endpoint).

2. Atom Component Library — 95%

What works: All 27 atoms implemented, typed, used by blocks and builder.

#	Remaining task	File(s)	Effort	Priority
B2.1	Add Storybook stories for all atoms	`.storybook/stories/atoms/*.stories.ts`	2d	Low
B2.2	Audit accessibility of form atoms (label association, ARIA)	`components/atoms/Form*.vue`	0.5d	Medium

3. Block Multi-Variant System — 85%

What works: 6 block types have per-template variants. Resolution chain (useBlockVariant → variantResolver → BlockTemplateWrapper) is solid.

#	Remaining task	File(s)	Effort	Priority
B3.1	Add variants for PricingTableBlock	`components/dynamic-blocks/pricing_table/` (new)	1d	Medium
B3.2	Add variants for TestimonialsBlock	`components/dynamic-blocks/testimonials/` (new)	1d	Medium
B3.3	Add variants for StatsBlock	`components/dynamic-blocks/stats/` (new)	0.5d	Low
B3.4	Add variants for AccordionBlock	`components/dynamic-blocks/accordion/` (new)	0.5d	Low
B3.5	Document variant authoring guide	`docs/variant-authoring.md` (in cms-doc)	0.5d	Low

4. Design Token Engine — 98%

What works: 4 templates, palette generation, semantic tokens, dark mode tokens, SSR injection, BroadcastChannel sync, draft system, build-time generation.

#	Remaining task	File(s)	Effort	Priority
B4.1	Add token validation (ensure contrast ratios meet WCAG AA)	`utils/paletteGenerator.ts`	0.5d	Medium
B4.2	Add token documentation page (visual reference)	`pages/tokens.vue` or Storybook	1d	Low

5. Dark Mode — 95%

What works: Toggle, persistence, cross-tab sync, token-based dark palette.

#	Remaining task	File(s)	Effort	Priority
B5.1	Add `prefers-color-scheme` system preference detection	`composables/useTheme.ts`	0.25d	Medium
B5.2	Verify all 95+ blocks render correctly in dark mode	Manual audit	1d	Medium

6. RTL Support — 40%

What works: State management (setRtl), auto-detection for Arabic locale, dir="rtl" on HTML.

#	Remaining task	File(s)	Effort	Priority
B6.1	Migrate CSS to logical properties	All component CSS	3–5d	Low
B6.2	Add RTLcss PostCSS plugin (or Tailwind RTL plugin)	`nuxt.config.ts`, `package.json`	0.5d	Low
B6.3	Add Arabic locale (`ar.json`)	`i18n/locales/ar.json`	1d	Low
B6.4	Visual regression test for RTL	`tests/e2e/rtl.spec.ts`	0.5d	Low

Note: No Arabic tenants planned for v1.0. Defer unless business need arises.

7. Advanced Caching (3-Layer ETag) — 95%

What works: ETag validation, memory cache, localStorage, Nitro storage, request priority, connection error recovery, stale-while-revalidate, retry with backoff.

#	Remaining task	File(s)	Effort	Priority
B7.1	Add cache-hit/miss metrics to Prometheus endpoint	`utils/cache.ts`, `server/routes/metrics.get.ts`	0.5d	Medium (also in spec roadmap 3.3)
B7.2	Add cache warm-up on deploy (prime critical routes)	`scripts/cache-warmup.sh` (new)	0.25d	Low

8. Unlayer HTML Parser — 90%

What works: Dual-mode parsing (DOM + regex), block extraction, markup cleaning, SSR compatibility.

#	Remaining task	File(s)	Effort	Priority
B8.1	Add unit tests for edge cases (nested blocks, malformed HTML)	`tests/unit/utils/unlayerParser.spec.ts`	1d	Medium
B8.2	Evaluate replacing regex SSR parser with `linkedom` or `jsdom`	`utils/unlayerParser.ts`	1d	Low

9. Performance Optimizations — 85%

What works: Blurhash, lazy hydration (3 strategies), above-fold detection, delay hydration, vendor splitting, font optimization, image optimization, preconnect.

#	Remaining task	File(s)	Effort	Priority
B9.1	Connect cache-metrics page to Prometheus metrics	`pages/cache-metrics.vue`, `composables/useCacheMetrics.ts`	0.5d	Low
B9.2	Add performance budget enforcement via bundlesize or size-limit	`package.json`, CI config	0.5d	Medium
B9.3	Verify blurhash SSR compatibility (canvas not available server-side)	`utils/blurhash.ts`	0.25d	Medium

10. Form System — 60%

What works: Form atoms, validation, error handling, stepper, multilingual errors. Blocked: useContactForm.ts submission is disabled (endpoint not implemented).

#	Remaining task	File(s)	Effort	Priority
B10.1	Implement contact form API endpoint proxy	`server/api/contact.post.ts` (new)	0.5d	High (blocked by API)
B10.2	Enable contact form submission	`composables/useContactForm.ts`	0.25d	High (after B10.1)
B10.3	Add CAPTCHA or honeypot for spam protection	`components/dynamic-blocks/ContactFormBlock.vue`	0.5d	Medium
B10.4	Add newsletter signup endpoint	`server/api/newsletter.post.ts` (new)	0.5d	Low
B10.5	Write E2E tests for form submission	`tests/e2e/forms.spec.ts`	0.5d	Medium

Blocked by: API team (contact form endpoint, newsletter endpoint).

11. Extra Content Types — 50%

What works: Routes for gallery, events, archive. API integration unclear.

#	Remaining task	File(s)	Effort	Priority
B11.1	Verify gallery API endpoint exists and works	`pages/gallery/[slug].vue`	0.25d	Low
B11.2	Verify events API endpoint exists and works	`pages/events/[slug].vue`	0.25d	Low
B11.3	Add composables if missing (`useGallery`, `useEvents`)	`composables/useGallery.ts`, `composables/useEvents.ts` (new)	1d	Low
B11.4	Add these routes to the sitemap	`server/routes/sitemap.xml.get.ts`	0.25d	Low

Note: Remove routes if API does not support these content types to avoid 404s.

12. Cross-Tab Synchronization — 95%

What works: BroadcastChannel for theme and settings, localStorage fallback, polling, window focus refresh.

#	Remaining task	File(s)	Effort	Priority
B12.1	Add cross-tab sync for consent state (Matomo)	`composables/useConsent.ts`	0.25d	Low

13. Prerender Routes Plugin — 90%

What works: Fetches all published pages/articles/categories/tags from API at build time. Pagination, multilingual slugs, graceful fallback.

#	Remaining task	File(s)	Effort	Priority
B13.1	Add gallery and events routes to prerender	`server/utils/prerender-helper.ts`	0.25d	Low
B13.2	Add build-time logging summary to CI output	`server/plugins/prerender-routes.ts`	0.1d	Low

14. Security Extras — 85%

What works: Authorization logging, preview anti-unfurl, HTML sanitization, public header validation.

#	Remaining task	File(s)	Effort	Priority
B14.1	Rotate authorization log files (add max file count / age)	`server/api/log/authorization.post.ts`	0.25d	Low
B14.2	Add rate limiting to log endpoint (prevent log flooding)	`server/api/log/authorization.post.ts`	0.25d	Medium
B14.3	Forward security logs to structured logger (when Phase 3 done)	`server/api/log/authorization.post.ts`	0.25d	Low

15. E2E Test Suite — 85%

What works: 14 test files covering versions v0.1–v0.12, performance tests, consolidated regression suite.

#	Remaining task	File(s)	Effort	Priority
B15.1	Add E2E tests for builder (drag-and-drop, save, undo)	`tests/e2e/builder.spec.ts`	1d	Medium
B15.2	Add E2E tests for dark mode toggle	`tests/e2e/dark-mode.spec.ts`	0.5d	Low
B15.3	Add E2E tests for consent banner	`tests/e2e/consent.spec.ts`	0.5d	Medium (also in spec roadmap 2.5.9)
B15.4	Audit and update stale tests (v0.1–v0.6)	`tests/e2e/v0.*-spec.ts`	1d	Medium

16. Storybook — 10%

What works: Config file exists (Storybook 8.6, Vue3-Vite).

#	Remaining task	File(s)	Effort	Priority
B16.1	Write stories for all 27 atoms	`.storybook/stories/atoms/*.stories.ts`	2d	Low
B16.2	Write stories for key dynamic blocks (Hero, CTA, Features)	`.storybook/stories/blocks/*.stories.ts`	2d	Low
B16.3	Add Storybook to CI (build check)	CI config	0.25d	Low

Decision needed: Is Storybook worth maintaining? If the team prefers pages/blocs/preview/[type].vue for block previews, Storybook can be removed to reduce maintenance.

17. Template Manifest System & Token Contract — 90%

What works: 4 template manifests with typed sections, central registry, DESIGN_TOKENS_CONTRACT.md as architectural reference.

#	Remaining task	File(s)	Effort	Priority
B17.1	Add runtime validation: verify CSS tokens match manifest requirements	`src/templates/index.ts`, build script	0.5d	Medium
B17.2	Add a 5th template manifest (e.g., “UrbanMinimal”) to validate extensibility	`src/templates/urbanMinimal.ts` (new)	1d	Low
B17.3	Generate template documentation page from manifests	`scripts/generate-template-docs.mjs` (new)	0.5d	Low

18. Token Editor Components — 80%

What works: A11yStatus contrast reports, TokenColorPicker, TokenSlider with dual input. Used in internal token editing UI.

#	Remaining task	File(s)	Effort	Priority
B18.1	Add semantic token editors (typography family/weight, shadow, border)	`components/tokens/TokenTypography.vue` (new)	1d	Medium
B18.2	Add undo/redo for token edits	Token editor parent component	0.5d	Low
B18.3	Connect A11yStatus suggestions to auto-apply (one-click fix)	`components/tokens/A11yStatus.vue`	0.25d	Medium

19. Block Management Tool — 75%

What works: Zone-based editor (sidebar/content/right_sidebar), block CRUD, drag-and-drop reordering, config modal with accessible keyboard nav.

#	Remaining task	File(s)	Effort	Priority
B19.1	Remove verbose debug logging (console.log)	`components/blocs/BlockZonesEditor.vue`	0.25d	Medium
B19.2	Evaluate consolidation with `components/builder/` (reduce duplication)	Architecture decision	0.5d	Medium
B19.3	Add block preview thumbnails in zone editor	`components/blocs/BlockZonesEditor.vue`	0.5d	Low

20. Client-Side Plugins Suite — 90%

What works: i18n prefix blocking, critical CSS injection, design token initialization, preview iframe token messaging.

#	Remaining task	File(s)	Effort	Priority
B20.1	Automate critical CSS extraction from Lighthouse data	`plugins/critical-css.ts`, build script	1d	Low
B20.2	Add unit tests for preview-tokens postMessage handler	`tests/unit/plugins/preview-tokens.spec.ts`	0.5d	Medium
B20.3	Add message origin validation in preview-tokens (security)	`plugins/preview-tokens.client.ts`	0.25d	High

21. Developer Utilities & Build Scripts — 85%

What works: Google Fonts loader, toast notifications, i18n normalization, content config API, URL mapper, debug utils, dual preview, build scripts, plain layout, site scaffold, saved blocks.

#	Remaining task	File(s)	Effort	Priority
B21.1	Consolidate dual preview system (`usePreview` + `useIsPreviewMode`)	`composables/usePreview.ts`, `composables/useIsPreviewMode.ts`	0.5d	Medium
B21.2	Add toast notification display component (currently composable-only)	`components/ui/ToastContainer.vue` (new)	0.5d	Medium
B21.3	Add block change detection to CI pipeline	`scripts/detect-block-changes.mjs`, CI config	0.25d	Low
B21.4	Migrate saved blocks from localStorage to API persistence	`composables/useSavedBlocks.ts`	0.5d	Low (after B1.1)

Summary by priority

High priority (business value, short-term)

Task	Feature	Effort	Blocker
B1.1	Builder → API persistence	1d	API team
B10.1	Contact form endpoint	0.5d	API team
B10.2	Enable contact form submission	0.25d	B10.1
B1.3	Builder access control	0.5d	—
B20.3	Preview-tokens origin validation (security)	0.25d	—

Medium priority (quality, near-term)

Task	Feature	Effort	Blocker
B2.2	Form atoms a11y audit	0.5d	—
B3.1–3.2	Variant for Pricing + Testimonials	2d	—
B4.1	Token contrast validation	0.5d	—
B5.1	System color scheme preference	0.25d	—
B5.2	Dark mode visual audit (all blocks)	1d	—
B7.1	Cache metrics → Prometheus	0.5d	Phase 3
B8.1	Unlayer parser unit tests	1d	—
B9.2	Bundle size enforcement	0.5d	—
B9.3	Blurhash SSR audit	0.25d	—
B10.3	CAPTCHA / honeypot	0.5d	—
B14.2	Rate limit security logs	0.25d	—
B15.1	Builder E2E tests	1d	—
B15.4	Audit stale tests	1d	—
B1.5	Builder store unit tests	1d	—
B17.1	Manifest-to-CSS token validation	0.5d	—
B18.1	Semantic token editors (typography, shadow)	1d	—
B18.3	A11yStatus one-click fix	0.25d	—
B19.1	Remove debug logging from BlockZonesEditor	0.25d	—
B19.2	Evaluate builder/blocs consolidation	0.5d	—
B20.2	Preview-tokens unit tests	0.5d	—
B21.1	Consolidate dual preview system	0.5d	—
B21.2	Toast notification display component	0.5d	—

Low priority (nice-to-have, long-term)

Task	Feature	Effort	Blocker
B3.3–3.5	More block variants + docs	1.5d	—
B4.2	Token visual doc page	1d	—
B6.1–6.4	RTL full support	5–7d	Business need
B7.2	Cache warm-up script	0.25d	—
B8.2	Replace regex parser with DOM lib	1d	—
B9.1	Cache metrics page → Prometheus	0.5d	—
B10.4	Newsletter endpoint	0.5d	API team
B11.1–11.4	Gallery/Events completion or removal	1.75d	API team
B12.1	Consent cross-tab sync	0.25d	—
B13.1–13.2	Prerender extras	0.35d	—
B14.1, B14.3	Log rotation + forwarding	0.5d	Phase 3
B15.2–15.3	Dark mode + consent E2E tests	1d	—
B16.1–16.3	Storybook stories	4.25d	Decision
B17.2	5th template manifest	1d	—
B17.3	Generate template docs from manifests	0.5d	—
B18.2	Token edit undo/redo	0.5d	—
B19.3	Block preview thumbnails in zone editor	0.5d	—
B20.1	Automate critical CSS from Lighthouse	1d	—
B21.3	Block change detection in CI	0.25d	—
B21.4	Saved blocks → API persistence	0.5d	B1.1

Effort totals

Priority	Tasks	Effort
High	5 tasks	~2.5d
Medium	22 tasks	~13.25d
Low	20 tasks	~21.6d
Total	47 tasks	~37d

These tasks are not required for v1.0 spec compliance. They should be scheduled alongside or after the spec roadmap based on team capacity and business priorities.

Beyond-Spec Inventory

Full inventory of features beyond the spec

FO Roadmap (Spec)

Spec-required work to reach v1.0

FO Coverage Analysis

Gap analysis against the spec

Architecture Overview

Full system architecture

Introduction

Guides

API

Back-Office

Front-Office

AI Agents

​Front-Office Roadmap — Beyond-Spec Features

​Maturity overview

​Feature status and remaining tasks

​1. Visual Page Builder — 85%

​2. Atom Component Library — 95%

​3. Block Multi-Variant System — 85%

​4. Design Token Engine — 98%

​5. Dark Mode — 95%

​6. RTL Support — 40%

​7. Advanced Caching (3-Layer ETag) — 95%

​8. Unlayer HTML Parser — 90%

​9. Performance Optimizations — 85%

​10. Form System — 60%

​11. Extra Content Types — 50%

​12. Cross-Tab Synchronization — 95%

​13. Prerender Routes Plugin — 90%

​14. Security Extras — 85%

​15. E2E Test Suite — 85%

​16. Storybook — 10%

​17. Template Manifest System & Token Contract — 90%

​18. Token Editor Components — 80%

​19. Block Management Tool — 75%

​20. Client-Side Plugins Suite — 90%

​21. Developer Utilities & Build Scripts — 85%

​Summary by priority

​High priority (business value, short-term)

​Medium priority (quality, near-term)

​Low priority (nice-to-have, long-term)

​Effort totals

​Further reading

Beyond-Spec Inventory

FO Roadmap (Spec)

FO Coverage Analysis

Architecture Overview

Front-Office Roadmap — Beyond-Spec Features

Maturity overview

Feature status and remaining tasks

1. Visual Page Builder — 85%

2. Atom Component Library — 95%

3. Block Multi-Variant System — 85%

4. Design Token Engine — 98%

5. Dark Mode — 95%

6. RTL Support — 40%

7. Advanced Caching (3-Layer ETag) — 95%

8. Unlayer HTML Parser — 90%

9. Performance Optimizations — 85%

10. Form System — 60%

11. Extra Content Types — 50%

12. Cross-Tab Synchronization — 95%

13. Prerender Routes Plugin — 90%

14. Security Extras — 85%

15. E2E Test Suite — 85%

16. Storybook — 10%

17. Template Manifest System & Token Contract — 90%

18. Token Editor Components — 80%

19. Block Management Tool — 75%

20. Client-Side Plugins Suite — 90%

21. Developer Utilities & Build Scripts — 85%

Summary by priority

High priority (business value, short-term)

Medium priority (quality, near-term)

Low priority (nice-to-have, long-term)

Effort totals

Further reading