From 01821bea9af8ceb2f7b33726fcede7994dad2df1 Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <herve@digitalrisedorset.co.uk>
Date: Fri, 9 Oct 2026 16:54:07 +0100
Subject: [PATCH 01/28] Added new widget capability to deliver CMS block
 editing capability in ReactEdge

---
 widgets/cmsblock/api/index.ts                 |  6 ++
 widgets/cmsblock/api/widget.tsx               | 33 +++++++++
 widgets/cmsblock/capability.json              | 15 ++++
 widgets/cmsblock/index.html                   | 23 ++++++
 widgets/cmsblock/package.json                 | 39 ++++++++++
 widgets/cmsblock/postcss.config.cjs           | 15 ++++
 widgets/cmsblock/public/default.json          |  8 ++
 widgets/cmsblock/src/Config.ts                | 56 ++++++++++++++
 widgets/cmsblock/src/ConfigSchema.ts          | 23 ++++++
 widgets/cmsblock/src/Widget.tsx               | 20 +++++
 widgets/cmsblock/src/WidgetView.tsx           | 15 ++++
 .../src/activity/Context/ActivityContext.tsx  |  4 +
 .../Context/ActivityContextProvider.tsx       | 31 ++++++++
 .../activity/Context/useActivityContext.ts    | 11 +++
 .../cmsblock/src/bootstrap/WidgetWrapper.tsx  | 18 +++++
 .../cmsblock/src/bootstrap/widget-root.tsx    | 24 ++++++
 .../src/bootstrap/widget-ssr-component.tsx    | 16 ++++
 .../src/components/WidgetCmsblock.tsx         | 18 +++++
 widgets/cmsblock/src/entrypoints/npm.tsx      | 41 +++++++++++
 widgets/cmsblock/src/entrypoints/ssr.tsx      | 12 +++
 widgets/cmsblock/src/styles/main.css          | 73 +++++++++++++++++++
 widgets/cmsblock/src/styles/widget.css        |  1 +
 widgets/cmsblock/src/types/global.d.ts        |  9 +++
 widgets/cmsblock/tests/cmsblock.spec.ts       | 33 +++++++++
 widgets/cmsblock/tsconfig.app.json            |  7 ++
 widgets/cmsblock/tsconfig.json                |  8 ++
 widgets/cmsblock/tsconfig.node.json           | 10 +++
 widgets/cmsblock/vite.config.ts               | 49 +++++++++++++
 widgets/cmsblock/vite.npm.config.ts           | 31 ++++++++
 29 files changed, 649 insertions(+)
 create mode 100644 widgets/cmsblock/api/index.ts
 create mode 100644 widgets/cmsblock/api/widget.tsx
 create mode 100644 widgets/cmsblock/capability.json
 create mode 100644 widgets/cmsblock/index.html
 create mode 100644 widgets/cmsblock/package.json
 create mode 100644 widgets/cmsblock/postcss.config.cjs
 create mode 100644 widgets/cmsblock/public/default.json
 create mode 100644 widgets/cmsblock/src/Config.ts
 create mode 100644 widgets/cmsblock/src/ConfigSchema.ts
 create mode 100644 widgets/cmsblock/src/Widget.tsx
 create mode 100644 widgets/cmsblock/src/WidgetView.tsx
 create mode 100644 widgets/cmsblock/src/activity/Context/ActivityContext.tsx
 create mode 100644 widgets/cmsblock/src/activity/Context/ActivityContextProvider.tsx
 create mode 100644 widgets/cmsblock/src/activity/Context/useActivityContext.ts
 create mode 100644 widgets/cmsblock/src/bootstrap/WidgetWrapper.tsx
 create mode 100644 widgets/cmsblock/src/bootstrap/widget-root.tsx
 create mode 100644 widgets/cmsblock/src/bootstrap/widget-ssr-component.tsx
 create mode 100644 widgets/cmsblock/src/components/WidgetCmsblock.tsx
 create mode 100644 widgets/cmsblock/src/entrypoints/npm.tsx
 create mode 100644 widgets/cmsblock/src/entrypoints/ssr.tsx
 create mode 100644 widgets/cmsblock/src/styles/main.css
 create mode 100644 widgets/cmsblock/src/styles/widget.css
 create mode 100644 widgets/cmsblock/src/types/global.d.ts
 create mode 100644 widgets/cmsblock/tests/cmsblock.spec.ts
 create mode 100644 widgets/cmsblock/tsconfig.app.json
 create mode 100644 widgets/cmsblock/tsconfig.json
 create mode 100644 widgets/cmsblock/tsconfig.node.json
 create mode 100644 widgets/cmsblock/vite.config.ts
 create mode 100644 widgets/cmsblock/vite.npm.config.ts

diff --git a/widgets/cmsblock/api/index.ts b/widgets/cmsblock/api/index.ts
new file mode 100644
index 00000000..254ab32b
--- /dev/null
+++ b/widgets/cmsblock/api/index.ts
@@ -0,0 +1,6 @@
+/**
+ * Public npm entry point.
+ */
+export { Widget } from "../src/Widget";
+
+export { WidgetComponent } from "../src/bootstrap/widget-ssr-component.tsx"
\ No newline at end of file
diff --git a/widgets/cmsblock/api/widget.tsx b/widgets/cmsblock/api/widget.tsx
new file mode 100644
index 00000000..12b89196
--- /dev/null
+++ b/widgets/cmsblock/api/widget.tsx
@@ -0,0 +1,33 @@
+import "../src/styles/widget.css";
+import {WIDGET_ID} from "../src/Config.ts";
+import {ElementHostProvider} from "@reactedge/framework/host.ts";
+import type {WidgetApi} from "@reactedge/public-api/widget.ts";
+import {createRoot} from "react-dom/client";
+import {WidgetRoot} from "../src/bootstrap/widget-root.tsx";
+
+
+const mount = (
+    el: HTMLElement,
+    contract: unknown,
+    bootstrap: unknown
+) => {
+    const hostProvider = new ElementHostProvider(WIDGET_ID)
+
+    createRoot(hostProvider.getMountedHost(el)).render(
+        <WidgetRoot
+            hostElement={el}
+            contract={contract}
+            bootstrap={bootstrap}
+        />
+    )
+};
+
+const api: WidgetApi = {
+    mount,
+};
+
+if (typeof window !== "undefined") {
+    window[`ReactEdge_${WIDGET_ID}`] = api;
+}
+
+export { mount };
\ No newline at end of file
diff --git a/widgets/cmsblock/capability.json b/widgets/cmsblock/capability.json
new file mode 100644
index 00000000..8baaa437
--- /dev/null
+++ b/widgets/cmsblock/capability.json
@@ -0,0 +1,15 @@
+{
+  "id": "cmsblock",
+  "widget": "cmsblock",
+  "description": "",
+  "signals": {
+    "consumes": [],
+    "emits": []
+  },
+  "runtime": {
+    "rendering": [
+      "client",
+      "ssr"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/widgets/cmsblock/index.html b/widgets/cmsblock/index.html
new file mode 100644
index 00000000..5ef3c211
--- /dev/null
+++ b/widgets/cmsblock/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+
+<script type="module">
+    import { mount } from './api/widget.tsx';
+    import { ResourceLoader } from "@reactedge/framework/contract";
+
+    const loader = new ResourceLoader();
+    const contract = await loader.loadContract("default.json");
+
+    const element = document.querySelector('cmsblock-widget');
+
+    await requestAnimationFrame(() => {
+        mount(element, contract);
+    })
+</script>
+
+<cmsblock-widget></cmsblock-widget>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/widgets/cmsblock/package.json b/widgets/cmsblock/package.json
new file mode 100644
index 00000000..260493ed
--- /dev/null
+++ b/widgets/cmsblock/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "widget-cmsblock",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:ssr": "vite build -c vite.npm.config.ts",
+    "analyze": "ANALYZE=true vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "postcss-prefix-selector": "^2.1.1",
+    "rollup-plugin-visualizer": "^7.0.1",
+    "tsx": "^4.21.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^8.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  }
+}
\ No newline at end of file
diff --git a/widgets/cmsblock/postcss.config.cjs b/widgets/cmsblock/postcss.config.cjs
new file mode 100644
index 00000000..a6076193
--- /dev/null
+++ b/widgets/cmsblock/postcss.config.cjs
@@ -0,0 +1,15 @@
+const prefixSelector = require('postcss-prefix-selector');
+
+module.exports = {
+    plugins: [
+        prefixSelector({
+            prefix: '.reactedge-cmsblock',
+            transform(prefix, selector, prefixedSelector) {
+                if (selector.startsWith('html') || selector.startsWith('body')) {
+                    return selector;
+                }
+                return prefixedSelector;
+            },
+        }),
+    ],
+};
diff --git a/widgets/cmsblock/public/default.json b/widgets/cmsblock/public/default.json
new file mode 100644
index 00000000..a9972ee8
--- /dev/null
+++ b/widgets/cmsblock/public/default.json
@@ -0,0 +1,8 @@
+{
+  "data": {
+    "title": "I am standard cmsblock ready to work"
+  },
+  "settings": {
+    "colour": "red"
+  }
+}
\ No newline at end of file
diff --git a/widgets/cmsblock/src/Config.ts b/widgets/cmsblock/src/Config.ts
new file mode 100644
index 00000000..67a2514c
--- /dev/null
+++ b/widgets/cmsblock/src/Config.ts
@@ -0,0 +1,56 @@
+import {parseConfig} from "./ConfigSchema.ts";
+import type {WidgetActivity} from "@reactedge/framework/activity";
+
+export interface WidgetConfig {
+    readonly data: {
+        title: string;
+    }
+
+    readonly settings: {
+        colour: string;
+    };
+}
+
+export const WIDGET_ID = 'cmsblock';
+
+/**
+ * Validates the widget contract and returns an immutable configuration.
+ *
+ * The contract is treated as untrusted input and is validated before
+ * being exposed to the React application.
+ *
+ * This function represents the trust boundary between the ReactEdge
+ * runtime and the widget implementation for widgets that do not require
+ * runtime integrations.
+ *
+ * @param rawContract - Widget contract supplied by the host platform.
+ * @param activity - Optional activity logger used during bootstrap.
+ * @returns An immutable widget configuration.
+ * @throws When the widget contract is invalid.
+ */
+export function readWidgetConfig(
+    rawContract: unknown,
+    activity?: WidgetActivity
+): WidgetConfig {
+    try {
+        const contract = parseConfig(rawContract);
+
+        activity?.log(
+            'bootstrap',
+            'Config resolved',
+            contract
+        );
+
+        return Object.freeze(contract);
+
+    } catch (e) {
+        activity?.log(
+            'bootstrap',
+            'Invalid widget contract',
+            e instanceof Error? e.message: e,
+            'error'
+        );
+
+        throw e;
+    }
+}
\ No newline at end of file
diff --git a/widgets/cmsblock/src/ConfigSchema.ts b/widgets/cmsblock/src/ConfigSchema.ts
new file mode 100644
index 00000000..2cd27c6c
--- /dev/null
+++ b/widgets/cmsblock/src/ConfigSchema.ts
@@ -0,0 +1,23 @@
+import { z } from 'zod';
+
+const WidgetDataSchema = z.object({
+    title: z.string(),
+});
+
+const WidgetSettingsSchema = z.object({
+    colour: z.string(),
+});
+
+export const WidgetConfigSchema = z.object({
+    data: WidgetDataSchema,
+    settings: WidgetSettingsSchema,
+}).strict();
+
+export type WidgetConfig =
+    z.infer<typeof WidgetConfigSchema>;
+
+export function parseConfig(
+    input: unknown
+): WidgetConfig {
+    return WidgetConfigSchema.parse(input);
+}
\ No newline at end of file
diff --git a/widgets/cmsblock/src/Widget.tsx b/widgets/cmsblock/src/Widget.tsx
new file mode 100644
index 00000000..175b7104
--- /dev/null
+++ b/widgets/cmsblock/src/Widget.tsx
@@ -0,0 +1,20 @@
+import {WidgetRoot} from "./bootstrap/widget-root.tsx";
+import {createRoot, hydrateRoot} from "react-dom/client";
+import type {StaticWidgetOptions} from "@reactedge/public-api/WidgetOptions.ts";
+
+export function Widget({
+       container,
+       contract,
+       bootstrap,
+       hydrate = false,
+   }: StaticWidgetOptions) {
+    const element = (
+        <WidgetRoot contract={contract} bootstrap={bootstrap} />
+    );
+
+    if (hydrate) {
+        hydrateRoot(container, element);
+    } else {
+        createRoot(container).render(element);
+    }
+}
\ No newline at end of file
diff --git a/widgets/cmsblock/src/WidgetView.tsx b/widgets/cmsblock/src/WidgetView.tsx
new file mode 100644
index 00000000..5662304c
--- /dev/null
+++ b/widgets/cmsblock/src/WidgetView.tsx
@@ -0,0 +1,15 @@
+import {readWidgetConfig} from "./Config.ts";
+import {WidgetCmsblock} from "./components/WidgetCmsblock.tsx";
+
+type Props = {
+    contract?: unknown;
+};
+
+export const WidgetView = ({ contract }: Props) => {
+    const config = readWidgetConfig(contract);
+
+    if (!config) return null;
+
+    return <WidgetCmsblock config={config} />
+};
+
diff --git a/widgets/cmsblock/src/activity/Context/ActivityContext.tsx b/widgets/cmsblock/src/activity/Context/ActivityContext.tsx
new file mode 100644
index 00000000..81be6cc3
--- /dev/null
+++ b/widgets/cmsblock/src/activity/Context/ActivityContext.tsx
@@ -0,0 +1,4 @@
+import {createContext} from "react";
+import type {WidgetActivity} from "@reactedge/framework/activity";
+
+export const LocalInstanceStateContext = createContext<WidgetActivity | undefined>(undefined);
\ No newline at end of file
diff --git a/widgets/cmsblock/src/activity/Context/ActivityContextProvider.tsx b/widgets/cmsblock/src/activity/Context/ActivityContextProvider.tsx
new file mode 100644
index 00000000..e1afaf74
--- /dev/null
+++ b/widgets/cmsblock/src/activity/Context/ActivityContextProvider.tsx
@@ -0,0 +1,31 @@
+import {type ReactNode} from "react";
+import {WIDGET_ID} from "../../Config.ts";
+import {LocalInstanceStateContext} from "./ActivityContext.tsx";
+import {WidgetActivity} from "@reactedge/framework/activity";
+
+interface InstanceStateProviderProps {
+    children: ReactNode;
+    hostElement?: HTMLElement;
+}
+
+const LocalStateProvider = LocalInstanceStateContext.Provider;
+
+export const ActivityContextProvider: React.FC<InstanceStateProviderProps> = ({
+         children,
+         hostElement
+     }) => {
+
+    const host = hostElement ?? document.documentElement;
+
+    const activity = new WidgetActivity(WIDGET_ID, host.dataset.instance)
+
+    return (
+        <LocalStateProvider
+            value={
+                activity
+            }
+        >
+            {children}
+        </LocalStateProvider>
+    );
+};
diff --git a/widgets/cmsblock/src/activity/Context/useActivityContext.ts b/widgets/cmsblock/src/activity/Context/useActivityContext.ts
new file mode 100644
index 00000000..7a61a77d
--- /dev/null
+++ b/widgets/cmsblock/src/activity/Context/useActivityContext.ts
@@ -0,0 +1,11 @@
+import {useContext} from "react";
+import {LocalInstanceStateContext} from "./ActivityContext.tsx";
+import type {WidgetActivity} from "@reactedge/framework/activity";
+
+export function useActivityContext(): WidgetActivity {
+    const context = useContext(LocalInstanceStateContext);
+    if (!context) {
+        throw new Error("useInstanceState must be used within InstanceStateProvider");
+    }
+    return context;
+}
\ No newline at end of file
diff --git a/widgets/cmsblock/src/bootstrap/WidgetWrapper.tsx b/widgets/cmsblock/src/bootstrap/WidgetWrapper.tsx
new file mode 100644
index 00000000..2e095ceb
--- /dev/null
+++ b/widgets/cmsblock/src/bootstrap/WidgetWrapper.tsx
@@ -0,0 +1,18 @@
+import {WidgetCmsblock} from "../components/WidgetCmsblock.tsx";
+import {readWidgetConfig} from "../Config.ts";
+import {useActivityContext} from "../activity/Context/useActivityContext.ts";
+
+type Props = {
+    contract?: unknown
+    bootstrap?: unknown
+};
+
+export const WidgetWrapper = ({ contract }: Props) => {
+    const activity = useActivityContext()
+    const config = readWidgetConfig(contract, activity);
+
+    if (!config) return null;
+
+    return <WidgetCmsblock config={config} />
+};
+
diff --git a/widgets/cmsblock/src/bootstrap/widget-root.tsx b/widgets/cmsblock/src/bootstrap/widget-root.tsx
new file mode 100644
index 00000000..b0c91cd3
--- /dev/null
+++ b/widgets/cmsblock/src/bootstrap/widget-root.tsx
@@ -0,0 +1,24 @@
+import {WIDGET_ID} from "../Config.ts";
+import {ActivityContextProvider} from "../activity/Context/ActivityContextProvider.tsx";
+import {WidgetWrapper} from "./WidgetWrapper.tsx";
+interface WidgetRootProps {
+    contract: unknown;
+    bootstrap: unknown;
+    hostElement?: HTMLElement;
+}
+
+export function WidgetRoot({
+       contract,
+       bootstrap,
+       hostElement,
+   }: WidgetRootProps) {
+    return (
+        <div className={`reactedge-${WIDGET_ID}`}>
+            <ActivityContextProvider
+                {...(hostElement ? { hostElement } : {})}
+            >
+                <WidgetWrapper contract={contract} bootstrap={bootstrap} />
+            </ActivityContextProvider>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/widgets/cmsblock/src/bootstrap/widget-ssr-component.tsx b/widgets/cmsblock/src/bootstrap/widget-ssr-component.tsx
new file mode 100644
index 00000000..bf7328f6
--- /dev/null
+++ b/widgets/cmsblock/src/bootstrap/widget-ssr-component.tsx
@@ -0,0 +1,16 @@
+import {WIDGET_ID} from "../Config.ts";
+import {WidgetView} from "../WidgetView.tsx";
+interface WidgetRootProps {
+    contract: unknown;
+    hostElement?: HTMLElement;
+}
+
+export function WidgetComponent({
+       contract
+   }: WidgetRootProps) {
+    return (
+        <div className={`reactedge-${WIDGET_ID}`}>
+            <WidgetView contract={contract} />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/widgets/cmsblock/src/components/WidgetCmsblock.tsx b/widgets/cmsblock/src/components/WidgetCmsblock.tsx
new file mode 100644
index 00000000..ce4b37f3
--- /dev/null
+++ b/widgets/cmsblock/src/components/WidgetCmsblock.tsx
@@ -0,0 +1,18 @@
+import type { WidgetConfig } from "../Config";
+
+type Props = {
+    config: WidgetConfig;
+};
+
+export const WidgetCmsblock = ({
+     config,
+ }: Props) => {
+    return (
+        <h1
+            data-cmsblock-title
+            style={{ color: config.settings.colour }}
+        >
+            {config.data.title}
+        </h1>
+    );
+};
\ No newline at end of file
diff --git a/widgets/cmsblock/src/entrypoints/npm.tsx b/widgets/cmsblock/src/entrypoints/npm.tsx
new file mode 100644
index 00000000..35763c83
--- /dev/null
+++ b/widgets/cmsblock/src/entrypoints/npm.tsx
@@ -0,0 +1,41 @@
+import { Widget } from "../Widget.tsx";
+import { ResourceLoader } from "@reactedge/framework/contract";
+import { WidgetActivity } from "@reactedge/framework/activity";
+import { WIDGET_ID } from "../Config.ts";
+
+async function main() {
+    const loader = new ResourceLoader();
+    const activity = new WidgetActivity(WIDGET_ID)
+    const contract = await loader.loadContract("default.json");
+    const bootstrap = await loader.loadContract("data.json");
+    const container = document.getElementById("root")!;
+
+    const mode = __REACTEDGE_MODE__;
+
+    if (mode === "hydrate") {
+        activity.debug("Hydrating existing HTML", {
+            contract,
+            html: container.innerHTML
+        });
+    } else {
+        activity.debug("Rendering from scratch");
+    }
+
+    if (mode === "hydrate") {
+        Widget({
+            container,
+            contract,
+            bootstrap,
+            hydrate: true
+        });
+    } else {
+        Widget({
+            container,
+            contract,
+            bootstrap,
+            hydrate: false
+        });
+    }
+}
+
+main();
\ No newline at end of file
diff --git a/widgets/cmsblock/src/entrypoints/ssr.tsx b/widgets/cmsblock/src/entrypoints/ssr.tsx
new file mode 100644
index 00000000..85faaff8
--- /dev/null
+++ b/widgets/cmsblock/src/entrypoints/ssr.tsx
@@ -0,0 +1,12 @@
+import { renderToString } from 'react-dom/server';
+import type {WidgetConfig} from "../Config.ts";
+import {WidgetView} from "../WidgetView.tsx";
+import {WIDGET_ID} from "../Config.ts";
+
+export const renderHtml = (config: WidgetConfig): string => {
+    return renderToString(
+        <div className={`reactedge-${WIDGET_ID}`}>
+            <WidgetView contract={config}/>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/widgets/cmsblock/src/styles/main.css b/widgets/cmsblock/src/styles/main.css
new file mode 100644
index 00000000..cd844aa9
--- /dev/null
+++ b/widgets/cmsblock/src/styles/main.css
@@ -0,0 +1,73 @@
+.cmsblock-slider-bar.dark, .cmsblock-static-bar.dark {
+    --cmsblock-bg: #1f2937;      /* slate-800 */
+    --cmsblock-color: #e5e7eb;   /* soft white */
+
+    --arrow-bg: #374151;    /* subtle contrast */
+    --arrow-color: #f9fafb;
+}
+
+.cmsblock-slider-bar.light, .cmsblock-static-bar.light {
+    --cmsblock-bg: #f8fafc;
+    --cmsblock-color: #1e3a8a;
+
+    --arrow-bg: #e5e7eb;   /* light gray */
+    --arrow-color: #374151;
+}
+
+.cmsblock-slider-bar.promo, .cmsblock-static-bar.promo {
+    --cmsblock-bg: linear-gradient(60deg, #f97316, #f5a623); /* orange gradient */
+    --cmsblock-color: #ffffff;
+
+    --arrow-bg: rgba(255,255,255,0.2);
+    --arrow-color: #ffffff;
+}
+
+.cmsblock-slider-bar, .cmsblock-static-bar {
+    background: var(--cmsblock-bg);
+    color: var(--cmsblock-color);
+}
+
+.arrow-btn {
+    background: var(--arrow-bg);
+    color: var(--arrow-color);
+
+    border-radius: 9999px;
+    width: 28px;
+    height: 28px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    transition: all 0.2s ease;
+}
+
+.cmsblock-static-bar {
+    display: flex;
+    width: 100%;
+    padding: 2rem;
+
+    background: #fff;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    box-shadow:
+            0 1px 2px 0 rgb(0 0 0 / 0.05);
+
+    text-align: center;
+
+    .cmsblock-slide {
+        flex: 1;
+    }
+
+    .cmsblock-slide__heading {
+        margin: 0;
+        font-weight: 600;
+    }
+
+    .cmsblock-slide__text {
+        margin: 0.5rem 0 0;
+        font-size: 1rem;
+        line-height: 1.25rem;
+        color: #4b5563;
+    }
+}
\ No newline at end of file
diff --git a/widgets/cmsblock/src/styles/widget.css b/widgets/cmsblock/src/styles/widget.css
new file mode 100644
index 00000000..520f553b
--- /dev/null
+++ b/widgets/cmsblock/src/styles/widget.css
@@ -0,0 +1 @@
+@import "main.css";
diff --git a/widgets/cmsblock/src/types/global.d.ts b/widgets/cmsblock/src/types/global.d.ts
new file mode 100644
index 00000000..99c9f6c7
--- /dev/null
+++ b/widgets/cmsblock/src/types/global.d.ts
@@ -0,0 +1,9 @@
+export {};
+
+declare global {
+    interface Window {
+        __REACTEDGE_DEBUG__?: boolean;
+        [key: `ReactEdge_${string}`]: WidgetApi;
+    }
+    const __REACTEDGE_MODE__: "render" | "hydrate";
+}
diff --git a/widgets/cmsblock/tests/cmsblock.spec.ts b/widgets/cmsblock/tests/cmsblock.spec.ts
new file mode 100644
index 00000000..cb13dc9b
--- /dev/null
+++ b/widgets/cmsblock/tests/cmsblock.spec.ts
@@ -0,0 +1,33 @@
+import { expect, test } from "@playwright/test";
+import type { Locator } from "@playwright/test";
+
+test.describe('Cmsblock Widget', () => {
+    let cmsblock: Locator;
+
+    test.beforeEach(async ({ page }) => {
+        await page.goto('/?reactedge_debug=eager');
+        cmsblock = page.locator('cmsblock-widget');
+        await expect(cmsblock).toBeVisible();
+    });
+
+    test('Cmsblock widget renders its configured title', async () => {
+        const title = cmsblock.locator(
+            '[data-cmsblock-title]'
+        );
+
+        await expect(title).toBeVisible();
+    });
+
+    test('Cmsblock widget renders the title colour', async () => {
+        const title = cmsblock.locator(
+            '[data-cmsblock-title]'
+        );
+
+        const colour = await title.evaluate(
+            (element: HTMLElement) =>
+                getComputedStyle(element).color
+        );
+
+        expect(colour).not.toBe('rgb(0, 0, 0)');
+    });
+});
\ No newline at end of file
diff --git a/widgets/cmsblock/tsconfig.app.json b/widgets/cmsblock/tsconfig.app.json
new file mode 100644
index 00000000..705ab148
--- /dev/null
+++ b/widgets/cmsblock/tsconfig.app.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../packages/widget-build/shared-resources/tsconfig.app.widget.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
+  },
+  "include": ["src", "api"]
+}
\ No newline at end of file
diff --git a/widgets/cmsblock/tsconfig.json b/widgets/cmsblock/tsconfig.json
new file mode 100644
index 00000000..4ebbbc80
--- /dev/null
+++ b/widgets/cmsblock/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "extends": "../../tsconfig.json"
+}
diff --git a/widgets/cmsblock/tsconfig.node.json b/widgets/cmsblock/tsconfig.node.json
new file mode 100644
index 00000000..620f3ec4
--- /dev/null
+++ b/widgets/cmsblock/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../packages/widget-build/shared-resources/tsconfig.node.widget.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.npm.config.ts"
+  ]
+}
diff --git a/widgets/cmsblock/vite.config.ts b/widgets/cmsblock/vite.config.ts
new file mode 100644
index 00000000..a6ef5d77
--- /dev/null
+++ b/widgets/cmsblock/vite.config.ts
@@ -0,0 +1,49 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import pkg from "./package.json" with { type: "json" };
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+
+import { manifestPlugin } from "../../packages/widget-build/shared-resources/widget-preset/manifestPlugin.ts";
+import { createWidgetBuildDefaults } from "../../packages/widget-build/shared-resources/widget-preset/createReactEdgeConfig.ts";
+import { reactEdgeVisualizer } from "../../packages/widget-build/shared-resources/widget-preset/reactEdgeVisualizer.ts";
+
+const isAnalyze = process.env.ANALYZE === "true";
+const widgetName = pkg.name.replace(/^widget-/, "");
+const widgetDir = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@reactedge": resolve(
+          widgetDir,
+          "../../packages/widget-build/shared-resources"
+      ),
+    },
+  },
+
+  plugins: [
+    react(),
+    reactEdgeVisualizer(isAnalyze),
+    manifestPlugin({
+      widgetName,
+      version: pkg.version,
+    }),
+  ],
+
+  define: {
+    "process.env.NODE_ENV": JSON.stringify("production"),
+  },
+
+  build: createWidgetBuildDefaults({
+    widgetName,
+    version: pkg.version,
+    entry: resolve(widgetDir, "api/widget.tsx"),
+    outDir: resolve(
+        widgetDir,
+        `../../workspace/release/source/${widgetName}`
+    ),
+    emitCss: true,
+    sourcemap: false
+  }),
+});
\ No newline at end of file
diff --git a/widgets/cmsblock/vite.npm.config.ts b/widgets/cmsblock/vite.npm.config.ts
new file mode 100644
index 00000000..71f83cc3
--- /dev/null
+++ b/widgets/cmsblock/vite.npm.config.ts
@@ -0,0 +1,31 @@
+import { defineConfig} from "vite";
+import type { BuildOptions } from "vite"
+import react from "@vitejs/plugin-react-swc";
+import pkg from "./package.json" with { type: "json" };
+import {dirname, resolve} from "node:path";
+import {createNpmBuildDefaults} from "../../packages/widget-build/shared-resources/widget-preset/createReactEdgeConfig.ts";
+import {fileURLToPath} from "node:url";
+
+const widgetName = pkg.name.replace(/^widget-/, "");
+const widgetDir = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@reactedge": resolve(
+          widgetDir,
+          "../../packages/widget-build/shared-resources"
+      ),
+    },
+  },
+  publicDir: resolve(import.meta.dirname, "public"),
+  plugins: [react(), ],
+  define: {
+    __REACTEDGE_MODE__: JSON.stringify(
+        process.env.REACTEDGE_MODE ?? "render"
+    ),
+  },
+  build: createNpmBuildDefaults<BuildOptions>({
+    widgetName
+  }),
+});
\ No newline at end of file

From 6e3290f680fa728c325e38c2f2b03ef0e7a3f622 Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 18:01:14 +0200
Subject: [PATCH 02/28] feat(cmsblock): scaffold editable content draft and
 template selection

---
 widgets/cmsblock/public/default.json          |  11 +-
 widgets/cmsblock/src/Config.ts                |  52 ++----
 widgets/cmsblock/src/ConfigSchema.ts          |  24 +--
 widgets/cmsblock/src/Model/CmsBlock.ts        |  18 ++
 .../src/components/CmsBlockEditor.tsx         |  52 ++++++
 .../src/components/CmsBlockSourcePreview.tsx  |  11 ++
 .../src/components/WidgetCmsblock.tsx         |  54 ++++--
 .../src/controller/useCmsBlockController.ts   |  36 ++++
 widgets/cmsblock/src/styles/main.css          | 155 ++++++++++++------
 widgets/cmsblock/tests/cmsblock.spec.ts       |  52 +++---
 10 files changed, 323 insertions(+), 142 deletions(-)
 create mode 100644 widgets/cmsblock/src/Model/CmsBlock.ts
 create mode 100644 widgets/cmsblock/src/components/CmsBlockEditor.tsx
 create mode 100644 widgets/cmsblock/src/components/CmsBlockSourcePreview.tsx
 create mode 100644 widgets/cmsblock/src/controller/useCmsBlockController.ts

diff --git a/widgets/cmsblock/public/default.json b/widgets/cmsblock/public/default.json
index a9972ee8..9c7f4455 100644
--- a/widgets/cmsblock/public/default.json
+++ b/widgets/cmsblock/public/default.json
@@ -1,8 +1,13 @@
 {
   "data": {
-    "title": "I am standard cmsblock ready to work"
+    "title": "CMS Block",
+    "source": {
+      "format": "text",
+      "content": "Add your content here. Select a template to prepare it for AI-assisted styling."
+    },
+    "templateId": "editorial"
   },
   "settings": {
-    "colour": "red"
+    "colour": "#1f2937"
   }
-}
\ No newline at end of file
+}
diff --git a/widgets/cmsblock/src/Config.ts b/widgets/cmsblock/src/Config.ts
index 67a2514c..1c4c56d0 100644
--- a/widgets/cmsblock/src/Config.ts
+++ b/widgets/cmsblock/src/Config.ts
@@ -1,56 +1,26 @@
-import {parseConfig} from "./ConfigSchema.ts";
-import type {WidgetActivity} from "@reactedge/framework/activity";
+import {parseConfig, type WidgetConfig as ParsedWidgetConfig} from './ConfigSchema.ts';
+import type {WidgetActivity} from '@reactedge/framework/activity';
 
-export interface WidgetConfig {
-    readonly data: {
-        title: string;
-    }
-
-    readonly settings: {
-        colour: string;
-    };
-}
+export type WidgetConfig = ParsedWidgetConfig;
 
 export const WIDGET_ID = 'cmsblock';
 
-/**
- * Validates the widget contract and returns an immutable configuration.
- *
- * The contract is treated as untrusted input and is validated before
- * being exposed to the React application.
- *
- * This function represents the trust boundary between the ReactEdge
- * runtime and the widget implementation for widgets that do not require
- * runtime integrations.
- *
- * @param rawContract - Widget contract supplied by the host platform.
- * @param activity - Optional activity logger used during bootstrap.
- * @returns An immutable widget configuration.
- * @throws When the widget contract is invalid.
- */
+/** CMSBlock is a static widget; editing will use a separate backend service. */
 export function readWidgetConfig(
     rawContract: unknown,
     activity?: WidgetActivity
 ): WidgetConfig {
     try {
-        const contract = parseConfig(rawContract);
-
-        activity?.log(
-            'bootstrap',
-            'Config resolved',
-            contract
-        );
-
-        return Object.freeze(contract);
-
-    } catch (e) {
+        const config = parseConfig(rawContract);
+        activity?.log('bootstrap', 'Config resolved', config);
+        return Object.freeze(config);
+    } catch (error) {
         activity?.log(
             'bootstrap',
             'Invalid widget contract',
-            e instanceof Error? e.message: e,
+            error instanceof Error ? error.message : error,
             'error'
         );
-
-        throw e;
+        throw error;
     }
-}
\ No newline at end of file
+}
diff --git a/widgets/cmsblock/src/ConfigSchema.ts b/widgets/cmsblock/src/ConfigSchema.ts
index 2cd27c6c..6f874c20 100644
--- a/widgets/cmsblock/src/ConfigSchema.ts
+++ b/widgets/cmsblock/src/ConfigSchema.ts
@@ -1,23 +1,27 @@
-import { z } from 'zod';
+import {z} from 'zod';
+
+const WidgetSourceSchema = z.object({
+    format: z.enum(['text', 'html']),
+    content: z.string().max(100_000),
+}).strict();
 
 const WidgetDataSchema = z.object({
-    title: z.string(),
-});
+    title: z.string().min(1),
+    source: WidgetSourceSchema.default({format: 'text', content: ''}),
+    templateId: z.enum(['editorial', 'feature', 'promotion']).default('editorial'),
+}).strict();
 
 const WidgetSettingsSchema = z.object({
     colour: z.string(),
-});
+}).strict();
 
 export const WidgetConfigSchema = z.object({
     data: WidgetDataSchema,
     settings: WidgetSettingsSchema,
 }).strict();
 
-export type WidgetConfig =
-    z.infer<typeof WidgetConfigSchema>;
+export type WidgetConfig = z.infer<typeof WidgetConfigSchema>;
 
-export function parseConfig(
-    input: unknown
-): WidgetConfig {
+export function parseConfig(input: unknown): WidgetConfig {
     return WidgetConfigSchema.parse(input);
-}
\ No newline at end of file
+}
diff --git a/widgets/cmsblock/src/Model/CmsBlock.ts b/widgets/cmsblock/src/Model/CmsBlock.ts
new file mode 100644
index 00000000..00e7b5ff
--- /dev/null
+++ b/widgets/cmsblock/src/Model/CmsBlock.ts
@@ -0,0 +1,18 @@
+/** Source is always preserved as authored; it is not executable markup. */
+export type CmsBlockSource = {
+    format: 'text' | 'html';
+    content: string;
+};
+
+export const CMS_BLOCK_TEMPLATES = [
+    {id: 'editorial', label: 'Editorial'},
+    {id: 'feature', label: 'Feature'},
+    {id: 'promotion', label: 'Promotional'},
+] as const;
+
+export type CmsBlockTemplateId = (typeof CMS_BLOCK_TEMPLATES)[number]['id'];
+
+export type CmsBlockDraft = {
+    source: CmsBlockSource;
+    templateId: CmsBlockTemplateId;
+};
diff --git a/widgets/cmsblock/src/components/CmsBlockEditor.tsx b/widgets/cmsblock/src/components/CmsBlockEditor.tsx
new file mode 100644
index 00000000..1c76aeca
--- /dev/null
+++ b/widgets/cmsblock/src/components/CmsBlockEditor.tsx
@@ -0,0 +1,52 @@
+import {useId} from 'react';
+import {CMS_BLOCK_TEMPLATES, type CmsBlockDraft, type CmsBlockTemplateId} from '../Model/CmsBlock.ts';
+import type {CmsBlockController} from '../controller/useCmsBlockController.ts';
+
+type Props = {
+    controller: CmsBlockController;
+};
+
+export const CmsBlockEditor = ({controller}: Props) => {
+    const contentId = useId();
+    const formatId = useId();
+    const templateId = useId();
+    const {draft} = controller;
+
+    return (
+        <div className="cmsblock-editor__fields">
+            <label htmlFor={contentId}>Source content</label>
+            <textarea
+                id={contentId}
+                rows={12}
+                value={draft.source.content}
+                onChange={event => controller.updateContent(event.target.value)}
+                placeholder="Paste text or HTML here"
+            />
+            <div className="cmsblock-editor__options">
+                <div>
+                    <label htmlFor={formatId}>Content format</label>
+                    <select
+                        id={formatId}
+                        value={draft.source.format}
+                        onChange={event => controller.updateFormat(event.target.value as CmsBlockDraft['source']['format'])}
+                    >
+                        <option value="text">Plain text</option>
+                        <option value="html">HTML source</option>
+                    </select>
+                </div>
+                <div>
+                    <label htmlFor={templateId}>Template</label>
+                    <select
+                        id={templateId}
+                        value={draft.templateId}
+                        onChange={event => controller.updateTemplate(event.target.value as CmsBlockTemplateId)}
+                    >
+                        {CMS_BLOCK_TEMPLATES.map(template =>
+                            <option key={template.id} value={template.id}>{template.label}</option>
+                        )}
+                    </select>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/widgets/cmsblock/src/components/CmsBlockSourcePreview.tsx b/widgets/cmsblock/src/components/CmsBlockSourcePreview.tsx
new file mode 100644
index 00000000..9e12c0e2
--- /dev/null
+++ b/widgets/cmsblock/src/components/CmsBlockSourcePreview.tsx
@@ -0,0 +1,11 @@
+import type {CmsBlockDraft} from '../Model/CmsBlock.ts';
+
+type Props = {draft: CmsBlockDraft};
+
+export const CmsBlockSourcePreview = ({draft}: Props) => (
+    <div className="cmsblock-editor__preview" aria-label="Source preview">
+        <h2>Source preview</h2>
+        <p>Showing the source safely. HTML is not executed or styled until the generation and review service is added.</p>
+        <pre><code>{draft.source.content || 'No content entered yet.'}</code></pre>
+    </div>
+);
diff --git a/widgets/cmsblock/src/components/WidgetCmsblock.tsx b/widgets/cmsblock/src/components/WidgetCmsblock.tsx
index ce4b37f3..f19c099d 100644
--- a/widgets/cmsblock/src/components/WidgetCmsblock.tsx
+++ b/widgets/cmsblock/src/components/WidgetCmsblock.tsx
@@ -1,18 +1,44 @@
-import type { WidgetConfig } from "../Config";
+import type {WidgetConfig} from '../Config.ts';
+import {CmsBlockEditor} from './CmsBlockEditor.tsx';
+import {CmsBlockSourcePreview} from './CmsBlockSourcePreview.tsx';
+import {useCmsBlockController} from '../controller/useCmsBlockController.ts';
 
-type Props = {
-    config: WidgetConfig;
-};
+type Props = {config: WidgetConfig};
+
+export const WidgetCmsblock = ({config}: Props) => {
+    const controller = useCmsBlockController(config);
 
-export const WidgetCmsblock = ({
-     config,
- }: Props) => {
     return (
-        <h1
-            data-cmsblock-title
-            style={{ color: config.settings.colour }}
-        >
-            {config.data.title}
-        </h1>
+        <section className="cmsblock-editor" aria-label="CMS block editor">
+            <header className="cmsblock-editor__header">
+                <h1 data-cmsblock-title style={{color: config.settings.colour}}>
+                    {config.data.title}
+                </h1>
+                <p>Prepare source content and associate it with a presentation template.</p>
+            </header>
+
+            <CmsBlockEditor controller={controller} />
+            <div className="cmsblock-editor__actions">
+                <button
+                    type="button"
+                    onClick={() => controller.setShowSourcePreview(!controller.showSourcePreview)}
+                    aria-pressed={controller.showSourcePreview}
+                >
+                    {controller.showSourcePreview ? 'Hide source preview' : 'Inspect source'}
+                </button>
+                <button type="button" disabled={!controller.changed} onClick={controller.reset}>
+                    Reset changes
+                </button>
+                <span role="status">
+                    {controller.changed ? 'Unsaved working copy' : 'No unsaved changes'}
+                </span>
+            </div>
+
+            {controller.showSourcePreview && <CmsBlockSourcePreview draft={controller.draft} />}
+
+            <p className="cmsblock-editor__note">
+                Draft persistence, AI generation and approval will be added in separate steps.
+            </p>
+        </section>
     );
-};
\ No newline at end of file
+};
diff --git a/widgets/cmsblock/src/controller/useCmsBlockController.ts b/widgets/cmsblock/src/controller/useCmsBlockController.ts
new file mode 100644
index 00000000..c3bf4c55
--- /dev/null
+++ b/widgets/cmsblock/src/controller/useCmsBlockController.ts
@@ -0,0 +1,36 @@
+import {useState} from 'react';
+import type {WidgetConfig} from '../Config.ts';
+import type {CmsBlockDraft, CmsBlockTemplateId} from '../Model/CmsBlock.ts';
+
+export function useCmsBlockController(config: WidgetConfig) {
+    const initialDraft = (): CmsBlockDraft => ({
+        source: {...config.data.source},
+        templateId: config.data.templateId,
+    });
+
+    const [draft, setDraft] = useState<CmsBlockDraft>(initialDraft);
+    const [showSourcePreview, setShowSourcePreview] = useState(false);
+
+    const changed =
+        draft.source.content !== config.data.source.content ||
+        draft.source.format !== config.data.source.format ||
+        draft.templateId !== config.data.templateId;
+
+    const updateContent = (content: string) =>
+        setDraft(current => ({...current, source: {...current.source, content}}));
+
+    const updateFormat = (format: CmsBlockDraft['source']['format']) =>
+        setDraft(current => ({...current, source: {...current.source, format}}));
+
+    const updateTemplate = (templateId: CmsBlockTemplateId) =>
+        setDraft(current => ({...current, templateId}));
+
+    const reset = () => setDraft(initialDraft());
+
+    return {
+        draft, changed, showSourcePreview, setShowSourcePreview,
+        updateContent, updateFormat, updateTemplate, reset,
+    };
+}
+
+export type CmsBlockController = ReturnType<typeof useCmsBlockController>;
diff --git a/widgets/cmsblock/src/styles/main.css b/widgets/cmsblock/src/styles/main.css
index cd844aa9..2e8ed743 100644
--- a/widgets/cmsblock/src/styles/main.css
+++ b/widgets/cmsblock/src/styles/main.css
@@ -1,73 +1,130 @@
-.cmsblock-slider-bar.dark, .cmsblock-static-bar.dark {
-    --cmsblock-bg: #1f2937;      /* slate-800 */
-    --cmsblock-color: #e5e7eb;   /* soft white */
+.cmsblock-editor {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 1100px;
+    padding: clamp(16px, 3vw, 32px);
+    margin: 0 auto;
+    font: inherit;
+    line-height: 1.5;
+    color: #1f2937;
+    background: #fff;
+}
 
-    --arrow-bg: #374151;    /* subtle contrast */
-    --arrow-color: #f9fafb;
+.cmsblock-editor *, .cmsblock-editor *::before, .cmsblock-editor *::after {
+    box-sizing: border-box;
 }
 
-.cmsblock-slider-bar.light, .cmsblock-static-bar.light {
-    --cmsblock-bg: #f8fafc;
-    --cmsblock-color: #1e3a8a;
+.cmsblock-editor__header h1 {
+    margin: 0 0 8px;
+    font-size: clamp(1.5rem, 3vw, 2rem);
+}
 
-    --arrow-bg: #e5e7eb;   /* light gray */
-    --arrow-color: #374151;
+.cmsblock-editor__header p, .cmsblock-editor__note {
+    margin: 0 0 24px;
+    color: #64748b;
 }
 
-.cmsblock-slider-bar.promo, .cmsblock-static-bar.promo {
-    --cmsblock-bg: linear-gradient(60deg, #f97316, #f5a623); /* orange gradient */
-    --cmsblock-color: #ffffff;
+.cmsblock-editor__fields, .cmsblock-editor__options > div {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
 
-    --arrow-bg: rgba(255,255,255,0.2);
-    --arrow-color: #ffffff;
+.cmsblock-editor__fields label {
+    font-size: 0.875rem;
+    font-weight: 600;
 }
 
-.cmsblock-slider-bar, .cmsblock-static-bar {
-    background: var(--cmsblock-bg);
-    color: var(--cmsblock-color);
+.cmsblock-editor__fields textarea, .cmsblock-editor__fields select {
+    width: 100%;
+    min-width: 0;
+    padding: 12px 14px;
+    border: 1px solid #94a3b8;
+    border-radius: 8px;
+    color: inherit;
+    background: #fff;
+    font: inherit;
 }
 
-.arrow-btn {
-    background: var(--arrow-bg);
-    color: var(--arrow-color);
+.cmsblock-editor__fields textarea {
+    resize: vertical;
+    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+    line-height: 1.6;
+}
 
-    border-radius: 9999px;
-    width: 28px;
-    height: 28px;
+.cmsblock-editor__options {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 20px;
+    margin: 12px 0 20px;
+}
 
+.cmsblock-editor__actions {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    justify-content: center;
+    gap: 12px;
+    margin-bottom: 20px;
+}
 
-    transition: all 0.2s ease;
+.cmsblock-editor__actions button {
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    padding: 10px 14px;
+    color: #1f2937;
+    background: #f8fafc;
+    cursor: pointer;
+    font: inherit;
 }
 
-.cmsblock-static-bar {
-    display: flex;
-    width: 100%;
-    padding: 2rem;
+.cmsblock-editor__actions button:disabled {
+    cursor: default;
+    opacity: 0.5;
+}
 
-    background: #fff;
-    border: 1px solid #e5e7eb;
-    border-radius: 0.5rem;
-    box-shadow:
-            0 1px 2px 0 rgb(0 0 0 / 0.05);
+.cmsblock-editor__actions span {
+    color: #64748b;
+    font-size: 0.875rem;
+}
 
-    text-align: center;
+.cmsblock-editor :is(textarea, select, button):focus-visible {
+    outline: 3px solid #2563eb;
+    outline-offset: 2px;
+}
 
-    .cmsblock-slide {
-        flex: 1;
-    }
+.cmsblock-editor__preview {
+    padding: 20px;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+}
 
-    .cmsblock-slide__heading {
-        margin: 0;
-        font-weight: 600;
-    }
+.cmsblock-editor__preview h2 {
+    font-size: 1.125rem;
+    margin: 0 0 8px;
+}
 
-    .cmsblock-slide__text {
-        margin: 0.5rem 0 0;
-        font-size: 1rem;
-        line-height: 1.25rem;
-        color: #4b5563;
+.cmsblock-editor__preview p {
+    font-size: 0.875rem;
+    color: #64748b;
+}
+
+.cmsblock-editor__preview pre {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    padding: 16px;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    border-radius: 6px;
+}
+
+.cmsblock-editor__note {
+    margin: 16px 0 0;
+    font-size: 0.875rem;
+}
+
+@media (max-width: 600px) {
+    .cmsblock-editor__options {
+        grid-template-columns: 1fr;
+        gap: 14px;
     }
-}
\ No newline at end of file
+}
diff --git a/widgets/cmsblock/tests/cmsblock.spec.ts b/widgets/cmsblock/tests/cmsblock.spec.ts
index cb13dc9b..150c74f7 100644
--- a/widgets/cmsblock/tests/cmsblock.spec.ts
+++ b/widgets/cmsblock/tests/cmsblock.spec.ts
@@ -1,33 +1,35 @@
-import { expect, test } from "@playwright/test";
-import type { Locator } from "@playwright/test";
+import {expect, test} from '@playwright/test';
 
-test.describe('Cmsblock Widget', () => {
-    let cmsblock: Locator;
-
-    test.beforeEach(async ({ page }) => {
+test.describe('CMSBlock source editor', () => {
+    test.beforeEach(async ({page}) => {
         await page.goto('/?reactedge_debug=eager');
-        cmsblock = page.locator('cmsblock-widget');
-        await expect(cmsblock).toBeVisible();
+        await expect(page.locator('cmsblock-widget')).toBeVisible();
     });
 
-    test('Cmsblock widget renders its configured title', async () => {
-        const title = cmsblock.locator(
-            '[data-cmsblock-title]'
-        );
-
-        await expect(title).toBeVisible();
+    test('renders the configured title and source', async ({page}) => {
+        const widget = page.locator('cmsblock-widget');
+        await expect(widget.locator('[data-cmsblock-title]')).toHaveText('CMS Block');
+        await expect(widget.getByLabel('Source content')).toContainText('Add your content here');
     });
 
-    test('Cmsblock widget renders the title colour', async () => {
-        const title = cmsblock.locator(
-            '[data-cmsblock-title]'
-        );
-
-        const colour = await title.evaluate(
-            (element: HTMLElement) =>
-                getComputedStyle(element).color
-        );
+    test('updates the template association and can reset the working copy', async ({page}) => {
+        const widget = page.locator('cmsblock-widget');
+        const source = widget.getByLabel('Source content');
+        const original = await source.inputValue();
+        await widget.getByLabel('Template').selectOption('feature');
+        await source.fill('A replacement headline');
+        await expect(widget.getByRole('status')).toHaveText('Unsaved working copy');
+        await widget.getByRole('button', {name: 'Reset changes'}).click();
+        await expect(source).toHaveValue(original);
+        await expect(widget.getByLabel('Template')).toHaveValue('editorial');
+    });
 
-        expect(colour).not.toBe('rgb(0, 0, 0)');
+    test('inspects HTML source as inert text rather than executing it', async ({page}) => {
+        const widget = page.locator('cmsblock-widget');
+        await widget.getByLabel('Content format').selectOption('html');
+        await widget.getByLabel('Source content').fill('<img src="broken.png" onerror="alert(1)">');
+        await widget.getByRole('button', {name: 'Inspect source'}).click();
+        await expect(widget.getByLabel('Source preview')).toContainText('<img src="broken.png"');
+        await expect(widget.getByLabel('Source preview').locator('img')).toHaveCount(0);
     });
-});
\ No newline at end of file
+});

From b58ab0d59efa659ff9f6b1120d1a8723fe4dbe5e Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 18:11:00 +0200
Subject: [PATCH 03/28] feat(cmsblock): add persistent demo API and
 deterministic HTML/CSS generator

---
 services/cmsblock/.gitignore         |  1 +
 services/cmsblock/README.md          | 32 +++++++++++
 services/cmsblock/package.json       | 12 ++++
 services/cmsblock/src/generator.mjs  | 86 ++++++++++++++++++++++++++++
 services/cmsblock/src/index.mjs      | 13 +++++
 services/cmsblock/src/server.mjs     | 61 ++++++++++++++++++++
 services/cmsblock/src/store.mjs      | 86 ++++++++++++++++++++++++++++
 services/cmsblock/test/flow.test.mjs | 63 ++++++++++++++++++++
 8 files changed, 354 insertions(+)
 create mode 100644 services/cmsblock/.gitignore
 create mode 100644 services/cmsblock/README.md
 create mode 100644 services/cmsblock/package.json
 create mode 100644 services/cmsblock/src/generator.mjs
 create mode 100644 services/cmsblock/src/index.mjs
 create mode 100644 services/cmsblock/src/server.mjs
 create mode 100644 services/cmsblock/src/store.mjs
 create mode 100644 services/cmsblock/test/flow.test.mjs

diff --git a/services/cmsblock/.gitignore b/services/cmsblock/.gitignore
new file mode 100644
index 00000000..8fce6030
--- /dev/null
+++ b/services/cmsblock/.gitignore
@@ -0,0 +1 @@
+data/
diff --git a/services/cmsblock/README.md b/services/cmsblock/README.md
new file mode 100644
index 00000000..8ec3ee46
--- /dev/null
+++ b/services/cmsblock/README.md
@@ -0,0 +1,32 @@
+# CMSBlock vertical slice
+
+This is a **development-only API** for the first CMSBlock end-to-end experiment.
+
+It persists one hard-coded block, `demo`, into `data/demo.json` (ignored by git),
+and uses a deterministic HTML/CSS generator in place of an AI provider.
+
+From the platform root:
+
+```bash
+npm --prefix services/cmsblock start
+npm --prefix services/cmsblock test
+npm --prefix widgets/cmsblock dev
+```
+
+The widget calls `http://127.0.0.1:4190/cmsblock/blocks/demo` by default.
+Set `PORT`, `CMSBLOCK_DATA_DIR`, `FRONTEND_URL` (comma-separated CORS
+origins) for the API, or `VITE_CMSBLOCK_URL` when building the widget.
+
+Flow: edit source + choose template -> **Save** -> **Generate draft** ->
+**Review** -> **Approve** -> **View**. Source and approved output stay separate;
+generating a new draft does not replace the last approved output.
+
+**Do not expose this service on the public internet.** It deliberately has
+no authentication, rate limiting or authorisation yet. CORS is not authentication.
+Generated output is displayed inside a sandboxed iframe; a future public SSR
+publisher must validate/sanitise AI-generated HTML and CSS before emitting it
+into the ordinary document.
+
+HTML input is simplified for this experiment: it is converted to text, with
+up to three HTTPS image references retained. Complex HTML formatting is not
+preserved by the mock generator.
diff --git a/services/cmsblock/package.json b/services/cmsblock/package.json
new file mode 100644
index 00000000..95724cfa
--- /dev/null
+++ b/services/cmsblock/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@reactedge/cmsblock",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "engines": {"node": ">=20"},
+  "scripts": {
+    "start": "node src/index.mjs",
+    "dev": "node --watch src/index.mjs",
+    "test": "node --test test/*.test.mjs"
+  }
+}
diff --git a/services/cmsblock/src/generator.mjs b/services/cmsblock/src/generator.mjs
new file mode 100644
index 00000000..1b389bb6
--- /dev/null
+++ b/services/cmsblock/src/generator.mjs
@@ -0,0 +1,86 @@
+// Deterministic stand-in for the future AI editor. No user-authored HTML is executed.
+const templates = {
+    editorial: {background: '#ffffff', foreground: '#17212d', accent: '#23629c'},
+    feature: {background: '#f0f7ff', foreground: '#142f52', accent: '#1453a0'},
+    promotion: {background: '#fff4e7', foreground: '#572e15', accent: '#a94714'},
+};
+
+export function validateDraft(value) {
+    if (!value || typeof value !== 'object' ||
+        !value.source || typeof value.source !== 'object' ||
+        !['text', 'html'].includes(value.source.format) ||
+        typeof value.source.content !== 'string' ||
+        value.source.content.trim().length === 0 ||
+        value.source.content.length > 100_000 ||
+        !Object.hasOwn(templates, value.templateId)) {
+        throw new Error('Provide content (up to 100,000 characters) and a valid template.');
+    }
+    return {
+        source: {format: value.source.format, content: value.source.content},
+        templateId: value.templateId,
+    };
+}
+
+function escapeHtml(value) {
+    return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+function extractText(source) {
+    if (source.format === 'text') return source.content;
+    return source.content
+        .replace(/<(script|style|iframe|object|svg)\b[^>]*>[\s\S]*?<\/\1\s*>/gi, '')
+        .replace(/<\s*br\s*\/?\s*>/gi, '\n')
+        .replace(/<\s*\/\s*(p|h[1-6]|li|div|section)\s*>/gi, '\n\n')
+        .replace(/<[^>]*>/g, ' ')
+        .replace(/&nbsp;/gi, ' ')
+        .replace(/&lt;/gi, '<')
+        .replace(/&gt;/gi, '>')
+        .replace(/&quot;/gi, '"')
+        .replace(/&#39;/gi, "'")
+        .replace(/&amp;/gi, '&');
+}
+
+function extractImages(source) {
+    if (source.format !== 'html') return [];
+    const tags = source.content.match(/<img\b[^>]*>/gi) ?? [];
+    return tags.slice(0, 3).flatMap(tag => {
+        const src = tag.match(/\bsrc\s*=\s*(?:"([^"]+)"|'([^']+)')/i)?.slice(1).find(Boolean);
+        const alt = tag.match(/\balt\s*=\s*(?:"([^"]*)"|'([^']*)')/i)?.slice(1).find(v => v !== undefined) ?? '';
+        try {
+            const url = new URL(src);
+            if (url.protocol !== 'https:') return [];
+            return [`<img src="${escapeHtml(url.href)}" alt="${escapeHtml(alt)}" loading="lazy">`];
+        } catch {
+            return [];
+        }
+    });
+}
+
+export function generateBlock(draft) {
+    const {source, templateId} = validateDraft(draft);
+    const palette = templates[templateId];
+    const lines = extractText(source).split(/\n+/).map(x => x.trim()).filter(Boolean);
+    const heading = escapeHtml(lines.shift() ?? 'Content block');
+    const paragraphs = lines.map(line => `<p>${escapeHtml(line)}</p>`).join('\n');
+    const images = extractImages(source);
+    const gallery = images.length ? `<figure class="cmsblock-media">${images.join('')}</figure>` : '';
+    // The data attribute is the boundary for generated CSS on standard DOM.
+    const html = `<section data-cmsblock="demo" class="cmsblock-content cmsblock--${templateId}">
+  <div class="cmsblock-copy"><h2>${heading}</h2>${paragraphs}</div>
+  ${gallery}
+</section>`;
+    const css = `[data-cmsblock="demo"] {
+  box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr);
+  gap: 1.25rem; padding: clamp(1.25rem, 4vw, 3rem); border-radius: 1rem;
+  background: ${palette.background}; color: ${palette.foreground}; font-family: system-ui, sans-serif;
+  border: 1px solid ${palette.accent}33;
+}
+[data-cmsblock="demo"] * { box-sizing: border-box; }
+[data-cmsblock="demo"] h2 { color: ${palette.accent}; font-size: clamp(1.6rem, 3vw, 2.6rem); margin: 0 0 1rem; line-height: 1.15; }
+[data-cmsblock="demo"] p { max-width: 68ch; margin: 0 0 0.85rem; line-height: 1.7; overflow-wrap: anywhere; }
+[data-cmsblock="demo"] .cmsblock-media { margin: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
+[data-cmsblock="demo"] img { display: block; max-width: 100%; width: auto; height: auto; max-height: 360px; border-radius: 0.75rem; object-fit: cover; }
+@media (min-width: 800px) { [data-cmsblock="demo"]:has(.cmsblock-media) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }`;
+    return {html, css};
+}
diff --git a/services/cmsblock/src/index.mjs b/services/cmsblock/src/index.mjs
new file mode 100644
index 00000000..8b48531f
--- /dev/null
+++ b/services/cmsblock/src/index.mjs
@@ -0,0 +1,13 @@
+import {fileURLToPath} from 'node:url';
+import {resolve} from 'node:path';
+import {createCmsBlockServer} from './server.mjs';
+
+const port = Number(process.env.PORT ?? 4190);
+const directory = resolve(process.env.CMSBLOCK_DATA_DIR ?? fileURLToPath(new URL('../data/', import.meta.url)));
+const origins = (process.env.FRONTEND_URL ?? 'http://localhost:5173,http://127.0.0.1:5173,http://localhost:3001,http://127.0.0.1:3001')
+    .split(',').map(value => value.trim()).filter(Boolean);
+
+// Bind to localhost only. Authentication and real AI generation are intentionally out of scope.
+createCmsBlockServer({directory, origins}).listen(port, '127.0.0.1', () => {
+    console.log(`CMSBlock demo API listening on http://127.0.0.1:${port}`);
+});
diff --git a/services/cmsblock/src/server.mjs b/services/cmsblock/src/server.mjs
new file mode 100644
index 00000000..a0da5959
--- /dev/null
+++ b/services/cmsblock/src/server.mjs
@@ -0,0 +1,61 @@
+import {createServer} from 'node:http';
+import {CmsBlockStore} from './store.mjs';
+
+const base = '/cmsblock/blocks/demo';
+
+export function createCmsBlockServer({directory, origins = [
+    'http://localhost:5173', 'http://127.0.0.1:5173',
+    'http://localhost:3001', 'http://127.0.0.1:3001',
+]} = {}) {
+    const store = new CmsBlockStore(directory);
+    const allowed = new Set(origins);
+    return createServer(async (req, res) => {
+        const origin = req.headers.origin;
+        res.setHeader('Cache-Control', 'no-store');
+        res.setHeader('Content-Type', 'application/json; charset=utf-8');
+        if (origin && !allowed.has(origin)) {
+            res.writeHead(403);
+            res.end(JSON.stringify({error: 'Origin not allowed.'}));
+            return;
+        }
+        if (origin) {
+            res.setHeader('Access-Control-Allow-Origin', origin);
+            res.setHeader('Vary', 'Origin');
+        }
+        res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,OPTIONS');
+        res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+        if (req.method === 'OPTIONS') { res.writeHead(204); res.end(); return; }
+
+        try {
+            let result;
+            if (req.method === 'GET' && req.url === '/cmsblock/status') {
+                result = {status: 'ok', generator: 'deterministic-demo'};
+            } else if (req.method === 'GET' && req.url === base) {
+                result = await store.get();
+                if (!result) { res.writeHead(404); res.end(JSON.stringify({error: 'Block not created yet.'})); return; }
+            } else if (req.method === 'PUT' && req.url === base) {
+                let raw = '';
+                for await (const chunk of req) {
+                    raw += chunk.toString();
+                    if (raw.length > 120_000) throw new Error('Payload too large.');
+                }
+                result = await store.save(JSON.parse(raw));
+            } else if (req.method === 'POST' && req.url === `${base}/generate`) {
+                result = await store.generate();
+            } else if (req.method === 'POST' && req.url === `${base}/approve`) {
+                result = await store.approve();
+            } else if (req.method === 'POST' && req.url === `${base}/reject`) {
+                result = await store.reject();
+            } else {
+                res.writeHead(404);
+                res.end(JSON.stringify({error: 'Not found.'}));
+                return;
+            }
+            res.writeHead(200);
+            res.end(JSON.stringify(result));
+        } catch (error) {
+            res.writeHead(error instanceof SyntaxError || /before|content|template|draft|large|reject/i.test(error.message) ? 400 : 500);
+            res.end(JSON.stringify({error: error instanceof Error ? error.message : 'CMSBlock operation failed.'}));
+        }
+    });
+}
diff --git a/services/cmsblock/src/store.mjs b/services/cmsblock/src/store.mjs
new file mode 100644
index 00000000..7228a6f0
--- /dev/null
+++ b/services/cmsblock/src/store.mjs
@@ -0,0 +1,86 @@
+import {readFile, mkdir, rename, writeFile, rm} from 'node:fs/promises';
+import {join} from 'node:path';
+import {randomUUID} from 'node:crypto';
+import {generateBlock, validateDraft} from './generator.mjs';
+
+export class CmsBlockStore {
+    constructor(directory) {
+        this.directory = directory;
+        this.file = join(directory, 'demo.json');
+        this.queue = Promise.resolve();
+    }
+
+    async get() {
+        await this.queue;
+        try {
+            return JSON.parse(await readFile(this.file, 'utf8'));
+        } catch (error) {
+            if (error?.code === 'ENOENT') return null;
+            throw error;
+        }
+    }
+
+    async mutate(change) {
+        const task = this.queue.then(async () => {
+            let current = null;
+            try {
+                current = JSON.parse(await readFile(this.file, 'utf8'));
+            } catch (error) {
+                if (error?.code !== 'ENOENT') throw error;
+            }
+            const next = change(current);
+            await mkdir(this.directory, {recursive: true});
+            const tmp = join(this.directory, `.demo-${randomUUID()}.tmp`);
+            try {
+                await writeFile(tmp, JSON.stringify(next, null, 2) + '\n', {flag: 'wx', mode: 0o600});
+                await rename(tmp, this.file);
+            } finally {
+                await rm(tmp, {force: true});
+            }
+            return next;
+        });
+        this.queue = task.catch(() => undefined);
+        return task;
+    }
+
+    save(input) {
+        const draft = validateDraft(input);
+        return this.mutate(current => ({
+            id: 'demo',
+            ...draft,
+            revision: current?.revision ?? 0,
+            pending: null,
+            published: current?.published ?? null,
+        }));
+    }
+
+    generate() {
+        return this.mutate(current => {
+            if (!current) throw new Error('Save the source content before generating.');
+            const revision = current.revision + 1;
+            return {
+                ...current,
+                revision,
+                pending: {...generateBlock(current), revision, status: 'inreview'},
+            };
+        });
+    }
+
+    approve() {
+        return this.mutate(current => {
+            if (!current?.pending) throw new Error('Generate a draft before approving.');
+            return {
+                ...current,
+                published: {...current.pending, status: 'approved'},
+                pending: null,
+            };
+        });
+    }
+
+    reject() {
+        return this.mutate(current => {
+            if (!current?.pending) throw new Error('There is no draft to reject.');
+            return {...current, pending: null};
+        });
+    }
+}
diff --git a/services/cmsblock/test/flow.test.mjs b/services/cmsblock/test/flow.test.mjs
new file mode 100644
index 00000000..14f41c5f
--- /dev/null
+++ b/services/cmsblock/test/flow.test.mjs
@@ -0,0 +1,63 @@
+import assert from 'node:assert/strict';
+import {test} from 'node:test';
+import {mkdtemp, rm} from 'node:fs/promises';
+import {tmpdir} from 'node:os';
+import {join} from 'node:path';
+import {once} from 'node:events';
+import {createCmsBlockServer} from '../src/server.mjs';
+
+test('persist, generate, review, approve, reload and regenerate while published stays intact', async () => {
+    const directory = await mkdtemp(join(tmpdir(), 'reactedge-cmsblock-'));
+    const server = createCmsBlockServer({directory});
+    server.listen(0, '127.0.0.1');
+    await once(server, 'listening');
+    try {
+        const address = server.address();
+        assert.ok(address && typeof address !== 'string');
+        const base = `http://127.0.0.1:${address.port}/cmsblock/blocks/demo`;
+        const draft = {source: {format: 'html', content: '<h2>Welcome</h2><p>Our collection</p><script>alert(1)</script>'}, templateId: 'feature'};
+        const request = async (suffix, method, body) => {
+            const response = await fetch(base + suffix, {method, headers: {'Content-Type': 'application/json'}, ...(body && {body: JSON.stringify(body)})});
+            return {status: response.status, data: await response.json()};
+        };
+
+        assert.equal((await request('', 'GET')).status, 404);
+        assert.equal((await request('', 'PUT', draft)).data.templateId, 'feature');
+
+        const generated = (await request('/generate', 'POST')).data;
+        assert.equal(generated.pending.status, 'inreview');
+        assert.match(generated.pending.html, /Welcome/);
+        assert.doesNotMatch(generated.pending.html, /<script/i);
+        assert.match(generated.pending.css, /data-cmsblock="demo"/);
+        assert.equal(generated.published, null);
+
+        const approved = (await request('/approve', 'POST')).data;
+        assert.equal(approved.published.status, 'approved');
+        assert.equal(approved.pending, null);
+        assert.equal((await request('', 'GET')).data.published.revision, 1);
+
+        const next = (await request('', 'PUT', {source: {format: 'text', content: 'Another headline'}, templateId: 'promotion'})).data;
+        assert.equal(next.published.revision, 1);
+        const regeneration = (await request('/generate', 'POST')).data;
+        assert.equal(regeneration.pending.revision, 2);
+        assert.equal(regeneration.published.revision, 1);
+        await request('/reject', 'POST');
+        const persisted = (await request('', 'GET')).data;
+        assert.equal(persisted.pending, null);
+        assert.equal(persisted.published.revision, 1);
+    } finally {
+        await new Promise((resolve, reject) => server.close(error => error ? reject(error) : resolve()));
+        await rm(directory, {recursive: true, force: true});
+    }
+});
+
+test('generated markup escapes authored HTML and allows only https images', async () => {
+    const {generateBlock} = await import('../src/generator.mjs');
+    const generated = generateBlock({
+        source: {format: 'html', content: '<h2><img src="javascript:alert(1)">Hello</h2><img src="https://example.com/image.jpg" alt="nice">'},
+        templateId: 'editorial',
+    });
+    assert.doesNotMatch(generated.html, /javascript:/i);
+    assert.match(generated.html, /https:\/\/example.com\/image.jpg/);
+    assert.match(generated.html, /Hello/);
+});

From a7d3290c15985d6f3a88a0d52695d15185579375 Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 18:12:19 +0200
Subject: [PATCH 04/28] feat(cmsblock): wire editor to draft, review and
 publication API

---
 widgets/cmsblock/src/Model/CmsBlockApi.ts     |  47 ++++++
 .../components/CmsBlockRenderedPreview.tsx    |  15 ++
 .../src/components/WidgetCmsblock.tsx         |  72 ++++++---
 .../src/controller/useCmsBlockController.ts   |  95 +++++++++--
 widgets/cmsblock/src/styles/main.css          | 151 ++++--------------
 widgets/cmsblock/tests/cmsblock.spec.ts       |  39 ++---
 6 files changed, 236 insertions(+), 183 deletions(-)
 create mode 100644 widgets/cmsblock/src/Model/CmsBlockApi.ts
 create mode 100644 widgets/cmsblock/src/components/CmsBlockRenderedPreview.tsx

diff --git a/widgets/cmsblock/src/Model/CmsBlockApi.ts b/widgets/cmsblock/src/Model/CmsBlockApi.ts
new file mode 100644
index 00000000..9a43bda6
--- /dev/null
+++ b/widgets/cmsblock/src/Model/CmsBlockApi.ts
@@ -0,0 +1,47 @@
+import type {CmsBlockDraft} from './CmsBlock.ts';
+
+export interface CmsBlockRevision {
+    html: string;
+    css: string;
+    revision: number;
+    status: 'inreview' | 'approved';
+}
+
+export interface CmsBlockRecord extends CmsBlockDraft {
+    id: 'demo';
+    revision: number;
+    pending: CmsBlockRevision | null;
+    published: CmsBlockRevision | null;
+}
+
+const base = `${(import.meta.env.VITE_CMSBLOCK_URL || 'http://127.0.0.1:4190').replace(/\/+$/, '')}/cmsblock/blocks/demo`;
+
+async function request(path: string, method: 'GET' | 'PUT' | 'POST', body?: CmsBlockDraft): Promise<CmsBlockRecord | null> {
+    let response: Response;
+    try {
+        response = await fetch(base + path, {
+            method,
+            headers: {'Content-Type': 'application/json'},
+            ...(body ? {body: JSON.stringify(body)} : {}),
+            cache: 'no-store',
+        });
+    } catch {
+        throw new Error('Cannot reach the CMSBlock service. Start services/cmsblock on port 4190.');
+    }
+    if (response.status === 404 && method === 'GET') return null;
+    const data: unknown = await response.json();
+    if (!response.ok) {
+        const error = typeof data === 'object' && data !== null && 'error' in data &&
+            typeof data.error === 'string' ? data.error : 'CMSBlock service request failed.';
+        throw new Error(error);
+    }
+    return data as CmsBlockRecord;
+}
+
+export const CmsBlockApi = {
+    get: () => request('', 'GET'),
+    save: (draft: CmsBlockDraft) => request('', 'PUT', draft),
+    generate: () => request('/generate', 'POST'),
+    approve: () => request('/approve', 'POST'),
+    reject: () => request('/reject', 'POST'),
+};
diff --git a/widgets/cmsblock/src/components/CmsBlockRenderedPreview.tsx b/widgets/cmsblock/src/components/CmsBlockRenderedPreview.tsx
new file mode 100644
index 00000000..b6cf0700
--- /dev/null
+++ b/widgets/cmsblock/src/components/CmsBlockRenderedPreview.tsx
@@ -0,0 +1,15 @@
+import type {CmsBlockRevision} from '../Model/CmsBlockApi.ts';
+
+type Props = {revision: CmsBlockRevision; title: string};
+
+/** Preview is inert: it cannot run JavaScript or navigate the parent page. */
+export const CmsBlockRenderedPreview = ({revision, title}: Props) => {
+    const document = `<!doctype html><html><head><meta name="viewport" content="width=device-width,initial-scale=1"><style>${revision.css}</style></head><body style="margin:0">${revision.html}</body></html>`;
+    return <iframe
+        title={title}
+        className="cmsblock-editor__rendered"
+        sandbox=""
+        referrerPolicy="no-referrer"
+        srcDoc={document}
+    />;
+};
diff --git a/widgets/cmsblock/src/components/WidgetCmsblock.tsx b/widgets/cmsblock/src/components/WidgetCmsblock.tsx
index f19c099d..3f82c1c0 100644
--- a/widgets/cmsblock/src/components/WidgetCmsblock.tsx
+++ b/widgets/cmsblock/src/components/WidgetCmsblock.tsx
@@ -1,12 +1,14 @@
 import type {WidgetConfig} from '../Config.ts';
 import {CmsBlockEditor} from './CmsBlockEditor.tsx';
 import {CmsBlockSourcePreview} from './CmsBlockSourcePreview.tsx';
+import {CmsBlockRenderedPreview} from './CmsBlockRenderedPreview.tsx';
 import {useCmsBlockController} from '../controller/useCmsBlockController.ts';
 
 type Props = {config: WidgetConfig};
 
 export const WidgetCmsblock = ({config}: Props) => {
     const controller = useCmsBlockController(config);
+    const {record, busy, loading, mode} = controller;
 
     return (
         <section className="cmsblock-editor" aria-label="CMS block editor">
@@ -14,31 +16,55 @@ export const WidgetCmsblock = ({config}: Props) => {
                 <h1 data-cmsblock-title style={{color: config.settings.colour}}>
                     {config.data.title}
                 </h1>
-                <p>Prepare source content and associate it with a presentation template.</p>
+                <p>Author, generate, review and publish a responsive content block.</p>
             </header>
 
-            <CmsBlockEditor controller={controller} />
-            <div className="cmsblock-editor__actions">
-                <button
-                    type="button"
-                    onClick={() => controller.setShowSourcePreview(!controller.showSourcePreview)}
-                    aria-pressed={controller.showSourcePreview}
-                >
-                    {controller.showSourcePreview ? 'Hide source preview' : 'Inspect source'}
-                </button>
-                <button type="button" disabled={!controller.changed} onClick={controller.reset}>
-                    Reset changes
-                </button>
-                <span role="status">
-                    {controller.changed ? 'Unsaved working copy' : 'No unsaved changes'}
-                </span>
-            </div>
-
-            {controller.showSourcePreview && <CmsBlockSourcePreview draft={controller.draft} />}
-
-            <p className="cmsblock-editor__note">
-                Draft persistence, AI generation and approval will be added in separate steps.
-            </p>
+            <nav className="cmsblock-editor__actions" aria-label="CMSBlock modes">
+                <button type="button" onClick={() => controller.setMode('edit')}
+                    aria-pressed={mode === 'edit'}>Edit</button>
+                <button type="button" onClick={() => controller.setMode('review')}
+                    disabled={!record?.pending} aria-pressed={mode === 'review'}>Review</button>
+                <button type="button" onClick={() => controller.setMode('view')}
+                    disabled={!record?.published} aria-pressed={mode === 'view'}>View</button>
+            </nav>
+
+            {loading && <p role="status">Loading saved CMSBlock…</p>}
+            {controller.error && <p className="cmsblock-editor__error" role="alert">{controller.error}</p>}
+            {controller.message && <p className="cmsblock-editor__message" role="status">{controller.message}</p>}
+
+            {!loading && mode === 'edit' && <>
+                <CmsBlockEditor controller={controller} />
+                <div className="cmsblock-editor__actions">
+                    <button type="button" disabled={busy || !controller.changed && Boolean(record)}
+                        onClick={() => { void controller.save(); }}>Save source</button>
+                    <button type="button" disabled={busy || !record || controller.changed}
+                        onClick={() => { void controller.generate(); }}>Generate draft</button>
+                    <button type="button" disabled={busy || !controller.changed}
+                        onClick={controller.reset}>Reset changes</button>
+                    <button type="button" disabled={busy} onClick={() =>
+                        controller.setShowSourcePreview(!controller.showSourcePreview)}>
+                        {controller.showSourcePreview ? 'Hide source preview' : 'Inspect source'}
+                    </button>
+                    <span>{controller.changed ? 'Unsaved working copy' : 'Changes saved'}</span>
+                </div>
+                {controller.showSourcePreview && <CmsBlockSourcePreview draft={controller.draft} />}
+                {record?.published && <p>Published revision {record.published.revision} remains live while editing.</p>}
+            </>}
+
+            {!loading && mode === 'review' && record?.pending && <>
+                <h2>Review generated revision {record.pending.revision}</h2>
+                <CmsBlockRenderedPreview title="Generated CMSBlock draft" revision={record.pending} />
+                <div className="cmsblock-editor__actions">
+                    <button type="button" disabled={busy} onClick={() => { void controller.approve(); }}>Approve and publish</button>
+                    <button type="button" disabled={busy} onClick={() => { void controller.reject(); }}>Reject draft</button>
+                </div>
+                {record.published && <p>Published revision {record.published.revision} is unchanged until approval.</p>}
+            </>}
+
+            {!loading && mode === 'view' && record?.published && <>
+                <h2>Published revision {record.published.revision}</h2>
+                <CmsBlockRenderedPreview title="Published CMSBlock" revision={record.published} />
+            </>}
         </section>
     );
 };
diff --git a/widgets/cmsblock/src/controller/useCmsBlockController.ts b/widgets/cmsblock/src/controller/useCmsBlockController.ts
index c3bf4c55..57f77d1e 100644
--- a/widgets/cmsblock/src/controller/useCmsBlockController.ts
+++ b/widgets/cmsblock/src/controller/useCmsBlockController.ts
@@ -1,6 +1,7 @@
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 import type {WidgetConfig} from '../Config.ts';
 import type {CmsBlockDraft, CmsBlockTemplateId} from '../Model/CmsBlock.ts';
+import {CmsBlockApi, type CmsBlockRecord} from '../Model/CmsBlockApi.ts';
 
 export function useCmsBlockController(config: WidgetConfig) {
     const initialDraft = (): CmsBlockDraft => ({
@@ -9,27 +10,93 @@ export function useCmsBlockController(config: WidgetConfig) {
     });
 
     const [draft, setDraft] = useState<CmsBlockDraft>(initialDraft);
+    const [savedDraft, setSavedDraft] = useState<CmsBlockDraft>(initialDraft);
+    const [record, setRecord] = useState<CmsBlockRecord | null>(null);
+    const [busy, setBusy] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    const [message, setMessage] = useState('');
+    const [mode, setMode] = useState<'edit' | 'review' | 'view'>('edit');
     const [showSourcePreview, setShowSourcePreview] = useState(false);
 
-    const changed =
-        draft.source.content !== config.data.source.content ||
-        draft.source.format !== config.data.source.format ||
-        draft.templateId !== config.data.templateId;
+    useEffect(() => {
+        let active = true;
+        void CmsBlockApi.get()
+            .then(found => {
+                if (!active || !found) return;
+                setRecord(found);
+                setSavedDraft({source: found.source, templateId: found.templateId});
+                setDraft({source: found.source, templateId: found.templateId});
+                if (found.pending) setMode('review');
+                else if (found.published) setMode('view');
+            })
+            .catch(reason => { if (active) setError(reason instanceof Error ? reason.message : 'Could not load CMSBlock.'); })
+            .finally(() => { if (active) setLoading(false); });
+        return () => { active = false; };
+    }, []);
 
-    const updateContent = (content: string) =>
-        setDraft(current => ({...current, source: {...current.source, content}}));
+    const changed = JSON.stringify(draft) !== JSON.stringify(savedDraft);
 
-    const updateFormat = (format: CmsBlockDraft['source']['format']) =>
-        setDraft(current => ({...current, source: {...current.source, format}}));
+    const updateContent = (content: string) => setDraft(current => ({
+        ...current, source: {...current.source, content},
+    }));
+    const updateFormat = (format: CmsBlockDraft['source']['format']) => setDraft(current => ({
+        ...current, source: {...current.source, format},
+    }));
+    const updateTemplate = (templateId: CmsBlockTemplateId) => setDraft(current => ({
+        ...current, templateId,
+    }));
+    const reset = () => setDraft({...savedDraft, source: {...savedDraft.source}});
 
-    const updateTemplate = (templateId: CmsBlockTemplateId) =>
-        setDraft(current => ({...current, templateId}));
+    const execute = async (operation: () => Promise<CmsBlockRecord | null>, success: string) => {
+        setBusy(true);
+        setError('');
+        setMessage('');
+        try {
+            const next = await operation();
+            if (!next) throw new Error('The CMSBlock service returned an empty record.');
+            setRecord(next);
+            setMessage(success);
+            return next;
+        } catch (reason) {
+            setError(reason instanceof Error ? reason.message : 'CMSBlock request failed.');
+            return null;
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const save = async () => {
+        if (!draft.source.content.trim()) {
+            setError('Enter content before saving.');
+            return;
+        }
+        const next = await execute(() => CmsBlockApi.save(draft), 'Source and template saved.');
+        if (next) {
+            setSavedDraft({source: next.source, templateId: next.templateId});
+            setMode('edit');
+        }
+    };
 
-    const reset = () => setDraft(initialDraft());
+    const generate = async () => {
+        if (changed) { setError('Save your changes before generating.'); return; }
+        const next = await execute(CmsBlockApi.generate, 'Generated draft ready for review.');
+        if (next?.pending) setMode('review');
+    };
+
+    const approve = async () => {
+        const next = await execute(CmsBlockApi.approve, 'Block approved and published.');
+        if (next) setMode('view');
+    };
+    const reject = async () => {
+        const next = await execute(CmsBlockApi.reject, 'Draft rejected; previously published block remains unchanged.');
+        if (next) setMode('edit');
+    };
 
     return {
-        draft, changed, showSourcePreview, setShowSourcePreview,
-        updateContent, updateFormat, updateTemplate, reset,
+        draft, record, changed, busy, loading, error, message, mode, setMode,
+        showSourcePreview, setShowSourcePreview,
+        updateContent, updateFormat, updateTemplate, reset, save, generate, approve, reject,
     };
 }
 
diff --git a/widgets/cmsblock/src/styles/main.css b/widgets/cmsblock/src/styles/main.css
index 2e8ed743..40f18062 100644
--- a/widgets/cmsblock/src/styles/main.css
+++ b/widgets/cmsblock/src/styles/main.css
@@ -1,130 +1,37 @@
 .cmsblock-editor {
     box-sizing: border-box;
-    width: 100%;
     max-width: 1100px;
-    padding: clamp(16px, 3vw, 32px);
     margin: 0 auto;
-    font: inherit;
-    line-height: 1.5;
+    padding: clamp(16px, 3vw, 32px);
+    font-family: system-ui, sans-serif;
     color: #1f2937;
     background: #fff;
 }
-
-.cmsblock-editor *, .cmsblock-editor *::before, .cmsblock-editor *::after {
-    box-sizing: border-box;
-}
-
-.cmsblock-editor__header h1 {
-    margin: 0 0 8px;
-    font-size: clamp(1.5rem, 3vw, 2rem);
-}
-
-.cmsblock-editor__header p, .cmsblock-editor__note {
-    margin: 0 0 24px;
-    color: #64748b;
-}
-
-.cmsblock-editor__fields, .cmsblock-editor__options > div {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.cmsblock-editor__fields label {
-    font-size: 0.875rem;
-    font-weight: 600;
-}
-
-.cmsblock-editor__fields textarea, .cmsblock-editor__fields select {
-    width: 100%;
-    min-width: 0;
-    padding: 12px 14px;
-    border: 1px solid #94a3b8;
-    border-radius: 8px;
-    color: inherit;
-    background: #fff;
-    font: inherit;
-}
-
-.cmsblock-editor__fields textarea {
-    resize: vertical;
-    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
-    line-height: 1.6;
-}
-
-.cmsblock-editor__options {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 20px;
-    margin: 12px 0 20px;
-}
-
-.cmsblock-editor__actions {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 12px;
-    margin-bottom: 20px;
-}
-
+.cmsblock-editor * { box-sizing: border-box; }
+.cmsblock-editor__header h1 { margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2rem); }
+.cmsblock-editor__header p { color: #64748b; margin-bottom: 24px; }
+.cmsblock-editor__fields,
+.cmsblock-editor__options > div { display: flex; flex-direction: column; gap: 8px; }
+.cmsblock-editor__fields label { font-weight: 600; }
+.cmsblock-editor__fields textarea,
+.cmsblock-editor__fields select {
+    width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid #94a3b8;
+    border-radius: 8px; background: #fff; color: inherit; font: inherit;
+}
+.cmsblock-editor__fields textarea { resize: vertical; font-family: ui-monospace, monospace; }
+.cmsblock-editor__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 12px 0 24px; }
+.cmsblock-editor__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
 .cmsblock-editor__actions button {
-    border: 1px solid #cbd5e1;
-    border-radius: 6px;
-    padding: 10px 14px;
-    color: #1f2937;
-    background: #f8fafc;
-    cursor: pointer;
-    font: inherit;
-}
-
-.cmsblock-editor__actions button:disabled {
-    cursor: default;
-    opacity: 0.5;
-}
-
-.cmsblock-editor__actions span {
-    color: #64748b;
-    font-size: 0.875rem;
-}
-
-.cmsblock-editor :is(textarea, select, button):focus-visible {
-    outline: 3px solid #2563eb;
-    outline-offset: 2px;
-}
-
-.cmsblock-editor__preview {
-    padding: 20px;
-    border: 1px solid #e2e8f0;
-    border-radius: 8px;
-}
-
-.cmsblock-editor__preview h2 {
-    font-size: 1.125rem;
-    margin: 0 0 8px;
-}
-
-.cmsblock-editor__preview p {
-    font-size: 0.875rem;
-    color: #64748b;
-}
-
-.cmsblock-editor__preview pre {
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-    padding: 16px;
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
-    border-radius: 6px;
-}
-
-.cmsblock-editor__note {
-    margin: 16px 0 0;
-    font-size: 0.875rem;
-}
-
-@media (max-width: 600px) {
-    .cmsblock-editor__options {
-        grid-template-columns: 1fr;
-        gap: 14px;
-    }
-}
+    padding: 10px 14px; border: 1px solid #cbd5e1; border-radius: 6px;
+    background: #f8fafc; font: inherit; color: inherit; cursor: pointer;
+}
+.cmsblock-editor__actions button[aria-pressed="true"] { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
+.cmsblock-editor__actions button:disabled { opacity: 0.5; cursor: default; }
+.cmsblock-editor__actions span { font-size: 0.875rem; color: #64748b; }
+.cmsblock-editor__preview { padding: 20px; border: 1px solid #e2e8f0; border-radius: 8px; }
+.cmsblock-editor__preview pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; background: #f8fafc; }
+.cmsblock-editor__rendered { width: 100%; min-height: 410px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; }
+.cmsblock-editor__error { padding: 12px; color: #991b1b; background: #fef2f2; }
+.cmsblock-editor__message { padding: 12px; color: #166534; background: #f0fdf4; }
+.cmsblock-editor :is(textarea, select, button):focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
+@media (max-width: 600px) { .cmsblock-editor__options { grid-template-columns: 1fr; } }
diff --git a/widgets/cmsblock/tests/cmsblock.spec.ts b/widgets/cmsblock/tests/cmsblock.spec.ts
index 150c74f7..bba6ca8c 100644
--- a/widgets/cmsblock/tests/cmsblock.spec.ts
+++ b/widgets/cmsblock/tests/cmsblock.spec.ts
@@ -1,35 +1,26 @@
 import {expect, test} from '@playwright/test';
 
-test.describe('CMSBlock source editor', () => {
+test.describe('CMSBlock E2E workflow', () => {
     test.beforeEach(async ({page}) => {
         await page.goto('/?reactedge_debug=eager');
         await expect(page.locator('cmsblock-widget')).toBeVisible();
     });
 
-    test('renders the configured title and source', async ({page}) => {
+    test('edits, saves, generates, approves and shows the published block', async ({page}) => {
         const widget = page.locator('cmsblock-widget');
-        await expect(widget.locator('[data-cmsblock-title]')).toHaveText('CMS Block');
-        await expect(widget.getByLabel('Source content')).toContainText('Add your content here');
-    });
-
-    test('updates the template association and can reset the working copy', async ({page}) => {
-        const widget = page.locator('cmsblock-widget');
-        const source = widget.getByLabel('Source content');
-        const original = await source.inputValue();
+        await expect(widget.locator('[data-cmsblock-title]')).toBeVisible();
+        await widget.getByRole('button', {name: 'Edit', exact: true}).click();
+        await widget.getByLabel('Source content').fill('Welcome to CMSBlock\nA beautiful responsive content block.');
         await widget.getByLabel('Template').selectOption('feature');
-        await source.fill('A replacement headline');
-        await expect(widget.getByRole('status')).toHaveText('Unsaved working copy');
-        await widget.getByRole('button', {name: 'Reset changes'}).click();
-        await expect(source).toHaveValue(original);
-        await expect(widget.getByLabel('Template')).toHaveValue('editorial');
-    });
-
-    test('inspects HTML source as inert text rather than executing it', async ({page}) => {
-        const widget = page.locator('cmsblock-widget');
-        await widget.getByLabel('Content format').selectOption('html');
-        await widget.getByLabel('Source content').fill('<img src="broken.png" onerror="alert(1)">');
-        await widget.getByRole('button', {name: 'Inspect source'}).click();
-        await expect(widget.getByLabel('Source preview')).toContainText('<img src="broken.png"');
-        await expect(widget.getByLabel('Source preview').locator('img')).toHaveCount(0);
+        await widget.getByRole('button', {name: 'Save source'}).click();
+        await expect(widget.getByText('Source and template saved.')).toBeVisible();
+        await widget.getByRole('button', {name: 'Generate draft'}).click();
+        await expect(widget.getByRole('heading', {name: /Review generated revision/})).toBeVisible();
+        await expect(widget.frameLocator('iframe[title="Generated CMSBlock draft"]').locator('h2')).toHaveText('Welcome to CMSBlock');
+        await widget.getByRole('button', {name: 'Approve and publish'}).click();
+        await expect(widget.getByRole('heading', {name: /Published revision/})).toBeVisible();
+        await expect(widget.frameLocator('iframe[title="Published CMSBlock"]').locator('h2')).toHaveText('Welcome to CMSBlock');
+        await page.reload();
+        await expect(widget.getByRole('heading', {name: /Published revision/})).toBeVisible();
     });
 });

From c22fda268b3a57c10bc44e7c8fa893b79c4336db Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 18:27:47 +0200
Subject: [PATCH 05/28] feat(cmsblock): replace template dropdown with three
 visual references

---
 widgets/cmsblock/src/Model/CmsBlock.ts        |  6 +-
 .../src/Model/CmsBlockTemplateImages.ts       | 55 +++++++++++++++++++
 .../src/components/CmsBlockEditor.tsx         | 46 ++++++++++------
 widgets/cmsblock/src/styles/main.css          | 31 +++++++++++
 widgets/cmsblock/tests/cmsblock.spec.ts       | 17 +++++-
 5 files changed, 134 insertions(+), 21 deletions(-)
 create mode 100644 widgets/cmsblock/src/Model/CmsBlockTemplateImages.ts

diff --git a/widgets/cmsblock/src/Model/CmsBlock.ts b/widgets/cmsblock/src/Model/CmsBlock.ts
index 00e7b5ff..af1a2b49 100644
--- a/widgets/cmsblock/src/Model/CmsBlock.ts
+++ b/widgets/cmsblock/src/Model/CmsBlock.ts
@@ -5,9 +5,9 @@ export type CmsBlockSource = {
 };
 
 export const CMS_BLOCK_TEMPLATES = [
-    {id: 'editorial', label: 'Editorial'},
-    {id: 'feature', label: 'Feature'},
-    {id: 'promotion', label: 'Promotional'},
+    {id: 'editorial', label: 'Editorial', description: 'Image above the text'},
+    {id: 'feature', label: 'Feature', description: 'Image left, text right'},
+    {id: 'promotion', label: 'Promotional', description: 'Bold text left, image right'},
 ] as const;
 
 export type CmsBlockTemplateId = (typeof CMS_BLOCK_TEMPLATES)[number]['id'];
diff --git a/widgets/cmsblock/src/Model/CmsBlockTemplateImages.ts b/widgets/cmsblock/src/Model/CmsBlockTemplateImages.ts
new file mode 100644
index 00000000..52005a6f
--- /dev/null
+++ b/widgets/cmsblock/src/Model/CmsBlockTemplateImages.ts
@@ -0,0 +1,55 @@
+import type {CmsBlockTemplateId} from './CmsBlock.ts';
+
+/**
+ * Hard-coded image references representing three visual compositions.
+ * Bundled as data images so the gallery works on any ReactEdge host.
+ */
+const editorial = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 328">
+<rect width="540" height="328" fill="#F7F4EF"/>
+<rect x="22" y="20" width="496" height="170" rx="5" fill="#B6C8C5"/>
+<path d="M22 157L145 77L246 161L376 63L518 153V190H22Z" fill="#698D84"/>
+<path d="M22 174L155 119L278 171L387 109L518 168V190H22Z" fill="#3D6862"/>
+<circle cx="423" cy="67" r="27" fill="#FBE7AE"/>
+<rect x="22" y="212" width="252" height="15" rx="3" fill="#2D4440"/>
+<rect x="22" y="246" width="458" height="7" rx="3" fill="#A1ABA7"/>
+<rect x="22" y="263" width="418" height="7" rx="3" fill="#A1ABA7"/>
+<rect x="22" y="290" width="115" height="18" rx="3" fill="#456A63"/>
+</svg>`;
+
+const feature = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 328">
+<rect width="540" height="328" fill="#F0F8F8"/>
+<rect x="22" y="20" width="233" height="288" rx="5" fill="#C4DBCD"/>
+<rect x="48" y="45" width="177" height="239" rx="5" fill="#E2E8DE"/>
+<path d="M136 268V105M136 189L80 141M136 227L194 158" stroke="#496D5A" stroke-width="8" stroke-linecap="round"/>
+<ellipse cx="93" cy="137" rx="31" ry="13" transform="rotate(28 93 137)" fill="#6D9B7C"/>
+<ellipse cx="176" cy="153" rx="34" ry="13" transform="rotate(-34 176 153)" fill="#56876D"/>
+<ellipse cx="109" cy="201" rx="29" ry="12" transform="rotate(27 109 201)" fill="#89B095"/>
+<rect x="284" y="80" width="189" height="16" rx="3" fill="#214953"/>
+<rect x="284" y="109" width="141" height="16" rx="3" fill="#214953"/>
+<rect x="284" y="152" width="226" height="7" rx="3" fill="#B2C8C8"/>
+<rect x="284" y="170" width="199" height="7" rx="3" fill="#B2C8C8"/>
+<rect x="284" y="188" width="218" height="7" rx="3" fill="#B2C8C8"/>
+<rect x="284" y="228" width="130" height="33" rx="5" fill="#24717E"/>
+</svg>`;
+
+const promotion = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 328">
+<rect width="540" height="328" fill="#1D2C39"/>
+<rect x="275" y="20" width="243" height="288" rx="4" fill="#DA9468"/>
+<circle cx="400" cy="147" r="95" fill="#F8D2A0"/>
+<circle cx="426" cy="165" r="76" fill="#B46C53"/>
+<path d="M311 263C342 195 426 187 494 224V308H311Z" fill="#6D424C"/>
+<rect x="24" y="88" width="196" height="19" rx="3" fill="#FFF"/>
+<rect x="24" y="121" width="163" height="19" rx="3" fill="#FFF"/>
+<rect x="24" y="167" width="216" height="7" rx="3" fill="#A6BDCC"/>
+<rect x="24" y="184" width="182" height="7" rx="3" fill="#A6BDCC"/>
+<rect x="24" y="232" width="133" height="36" rx="5" fill="#F2B65C"/>
+</svg>`;
+
+const asImage = (svg: string) => `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+
+// The same IDs select deterministic layouts on the CMSBlock demo service.
+export const CMS_BLOCK_REFERENCE_IMAGES: Record<CmsBlockTemplateId, string> = {
+    editorial: asImage(editorial),
+    feature: asImage(feature),
+    promotion: asImage(promotion),
+};
diff --git a/widgets/cmsblock/src/components/CmsBlockEditor.tsx b/widgets/cmsblock/src/components/CmsBlockEditor.tsx
index 1c76aeca..5fcde3f7 100644
--- a/widgets/cmsblock/src/components/CmsBlockEditor.tsx
+++ b/widgets/cmsblock/src/components/CmsBlockEditor.tsx
@@ -1,15 +1,13 @@
 import {useId} from 'react';
-import {CMS_BLOCK_TEMPLATES, type CmsBlockDraft, type CmsBlockTemplateId} from '../Model/CmsBlock.ts';
+import {CMS_BLOCK_TEMPLATES, type CmsBlockDraft} from '../Model/CmsBlock.ts';
+import {CMS_BLOCK_REFERENCE_IMAGES} from '../Model/CmsBlockTemplateImages.ts';
 import type {CmsBlockController} from '../controller/useCmsBlockController.ts';
 
-type Props = {
-    controller: CmsBlockController;
-};
+type Props = {controller: CmsBlockController};
 
 export const CmsBlockEditor = ({controller}: Props) => {
     const contentId = useId();
     const formatId = useId();
-    const templateId = useId();
     const {draft} = controller;
 
     return (
@@ -34,19 +32,33 @@ export const CmsBlockEditor = ({controller}: Props) => {
                         <option value="html">HTML source</option>
                     </select>
                 </div>
-                <div>
-                    <label htmlFor={templateId}>Template</label>
-                    <select
-                        id={templateId}
-                        value={draft.templateId}
-                        onChange={event => controller.updateTemplate(event.target.value as CmsBlockTemplateId)}
-                    >
-                        {CMS_BLOCK_TEMPLATES.map(template =>
-                            <option key={template.id} value={template.id}>{template.label}</option>
-                        )}
-                    </select>
-                </div>
             </div>
+
+            <fieldset className="cmsblock-editor__references">
+                <legend>Visual reference</legend>
+                <p>Select one of the three reference images. The mock generator will match its general composition.</p>
+                <div className="cmsblock-editor__reference-list">
+                    {CMS_BLOCK_TEMPLATES.map(template => (
+                        <button
+                            type="button"
+                            key={template.id}
+                            className="cmsblock-editor__reference"
+                            data-template-id={template.id}
+                            aria-label={`Use ${template.label} reference`}
+                            aria-pressed={draft.templateId === template.id}
+                            onClick={() => controller.updateTemplate(template.id)}
+                        >
+                            <img
+                                src={CMS_BLOCK_REFERENCE_IMAGES[template.id]}
+                                alt={`${template.label} layout reference image`}
+                                loading="lazy"
+                            />
+                            <strong>{template.label}</strong>
+                            <span>{template.description}</span>
+                        </button>
+                    ))}
+                </div>
+            </fieldset>
         </div>
     );
 };
diff --git a/widgets/cmsblock/src/styles/main.css b/widgets/cmsblock/src/styles/main.css
index 40f18062..1cbb2061 100644
--- a/widgets/cmsblock/src/styles/main.css
+++ b/widgets/cmsblock/src/styles/main.css
@@ -35,3 +35,34 @@
 .cmsblock-editor__message { padding: 12px; color: #166534; background: #f0fdf4; }
 .cmsblock-editor :is(textarea, select, button):focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
 @media (max-width: 600px) { .cmsblock-editor__options { grid-template-columns: 1fr; } }
+
+/* Three visual reference cards; no layout/alignment controls are exposed. */
+.cmsblock-editor__references {
+    margin: 0 0 24px; padding: 0; border: 0; min-width: 0;
+}
+.cmsblock-editor__references legend {
+    margin-bottom: 4px; padding: 0; font-weight: 700; font-size: 1rem;
+}
+.cmsblock-editor__references > p { margin: 0 0 14px; color: #64748b; font-size: 0.875rem; }
+.cmsblock-editor__reference-list {
+    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
+}
+.cmsblock-editor__reference-list .cmsblock-editor__reference {
+    display: flex; flex-direction: column; gap: 5px; min-width: 0; width: 100%;
+    border: 2px solid #cbd5e1; border-radius: 10px; padding: 8px;
+    color: #1f2937; background: #fff; font: inherit; text-align: left; cursor: pointer;
+}
+.cmsblock-editor__reference img {
+    display: block; width: 100%; height: auto; aspect-ratio: 540 / 328;
+    border-radius: 5px; object-fit: cover; background: #f1f5f9;
+}
+.cmsblock-editor__reference strong { margin: 4px 3px 0; font-size: 0.95rem; }
+.cmsblock-editor__reference span {
+    margin: 0 3px 3px; color: #64748b; font-size: 0.82rem; line-height: 1.45;
+}
+.cmsblock-editor__reference-list .cmsblock-editor__reference[aria-pressed="true"] {
+    border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 1px #2563eb;
+}
+@media (max-width: 700px) {
+    .cmsblock-editor__reference-list { grid-template-columns: 1fr; }
+}
diff --git a/widgets/cmsblock/tests/cmsblock.spec.ts b/widgets/cmsblock/tests/cmsblock.spec.ts
index bba6ca8c..22057c4f 100644
--- a/widgets/cmsblock/tests/cmsblock.spec.ts
+++ b/widgets/cmsblock/tests/cmsblock.spec.ts
@@ -11,7 +11,8 @@ test.describe('CMSBlock E2E workflow', () => {
         await expect(widget.locator('[data-cmsblock-title]')).toBeVisible();
         await widget.getByRole('button', {name: 'Edit', exact: true}).click();
         await widget.getByLabel('Source content').fill('Welcome to CMSBlock\nA beautiful responsive content block.');
-        await widget.getByLabel('Template').selectOption('feature');
+        await widget.getByRole('button', {name: 'Use Feature reference'}).click();
+        await expect(widget.getByRole('button', {name: 'Use Feature reference'})).toHaveAttribute('aria-pressed', 'true');
         await widget.getByRole('button', {name: 'Save source'}).click();
         await expect(widget.getByText('Source and template saved.')).toBeVisible();
         await widget.getByRole('button', {name: 'Generate draft'}).click();
@@ -24,3 +25,17 @@ test.describe('CMSBlock E2E workflow', () => {
         await expect(widget.getByRole('heading', {name: /Published revision/})).toBeVisible();
     });
 });
+
+test('shows three image references and remembers the selected reference', async ({page}) => {
+    await page.goto('/?reactedge_debug=eager');
+    const widget = page.locator('cmsblock-widget');
+    await widget.getByRole('button', {name: 'Edit', exact: true}).click();
+    await expect(widget.locator('.cmsblock-editor__reference img')).toHaveCount(3);
+    await widget.getByLabel('Source content').fill('Choose a template by its image');
+    await widget.getByRole('button', {name: 'Use Promotional reference'}).click();
+    await widget.getByRole('button', {name: 'Save source'}).click();
+    await expect(widget.getByText('Source and template saved.')).toBeVisible();
+    await page.reload();
+    await widget.getByRole('button', {name: 'Edit', exact: true}).click();
+    await expect(widget.getByRole('button', {name: 'Use Promotional reference'})).toHaveAttribute('aria-pressed', 'true');
+});

From d388f3bf31a9a5386e3f3774d3ce0678dfa5881c Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 18:28:31 +0200
Subject: [PATCH 06/28] feat(cmsblock): map visual references to three
 responsive generated layouts

---
 services/cmsblock/README.md          | 11 +++++++++++
 services/cmsblock/src/generator.mjs  | 25 ++++++++++++++++++++-----
 services/cmsblock/src/store.mjs      |  2 +-
 services/cmsblock/test/flow.test.mjs | 21 +++++++++++++++++++++
 4 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/services/cmsblock/README.md b/services/cmsblock/README.md
index 8ec3ee46..ef7e24ff 100644
--- a/services/cmsblock/README.md
+++ b/services/cmsblock/README.md
@@ -30,3 +30,14 @@ into the ordinary document.
 HTML input is simplified for this experiment: it is converted to text, with
 up to three HTTPS image references retained. Complex HTML formatting is not
 preserved by the mock generator.
+
+## Visual template references
+
+Three bundled SVG reference images replace the template dropdown:
+Editorial (image above copy), Feature (image left), Promotional (image right).
+The selection is saved using the existing `templateId` field and recorded
+in the generated revision, preserving the reference used for publication.
+
+The generator does **not** analyse these images yet. It maps each reference
+ID to a hard-coded responsive layout so the full image-selection → save →
+generate → review → approve → reload flow can be verified before adding AI.
diff --git a/services/cmsblock/src/generator.mjs b/services/cmsblock/src/generator.mjs
index 1b389bb6..68a3660a 100644
--- a/services/cmsblock/src/generator.mjs
+++ b/services/cmsblock/src/generator.mjs
@@ -1,8 +1,10 @@
 // Deterministic stand-in for the future AI editor. No user-authored HTML is executed.
+// Hard-coded compositions corresponding to the three visual reference images.
+// AI image interpretation will replace this mapping in a later iteration.
 const templates = {
-    editorial: {background: '#ffffff', foreground: '#17212d', accent: '#23629c'},
-    feature: {background: '#f0f7ff', foreground: '#142f52', accent: '#1453a0'},
-    promotion: {background: '#fff4e7', foreground: '#572e15', accent: '#a94714'},
+    editorial: {background: '#F7F4EF', foreground: '#243F3A', accent: '#456A63'},
+    feature: {background: '#F1F8F8', foreground: '#234453', accent: '#24717E'},
+    promotion: {background: '#1D2C39', foreground: '#FFFFFF', accent: '#F2B65C'},
 };
 
 export function validateDraft(value) {
@@ -80,7 +82,20 @@ export function generateBlock(draft) {
 [data-cmsblock="demo"] h2 { color: ${palette.accent}; font-size: clamp(1.6rem, 3vw, 2.6rem); margin: 0 0 1rem; line-height: 1.15; }
 [data-cmsblock="demo"] p { max-width: 68ch; margin: 0 0 0.85rem; line-height: 1.7; overflow-wrap: anywhere; }
 [data-cmsblock="demo"] .cmsblock-media { margin: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
-[data-cmsblock="demo"] img { display: block; max-width: 100%; width: auto; height: auto; max-height: 360px; border-radius: 0.75rem; object-fit: cover; }
-@media (min-width: 800px) { [data-cmsblock="demo"]:has(.cmsblock-media) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }`;
+[data-cmsblock="demo"] img { display: block; width: 100%; max-width: 100%; height: auto; max-height: 360px; border-radius: 0.75rem; object-fit: cover; }
+[data-cmsblock="demo"].cmsblock--editorial .cmsblock-media { grid-row: 1; }
+[data-cmsblock="demo"].cmsblock--editorial .cmsblock-copy { grid-row: 2; }
+[data-cmsblock="demo"].cmsblock--promotion h2 { font-weight: 800; text-transform: uppercase; }
+[data-cmsblock="demo"].cmsblock--promotion p { color: #E2E8F0; }
+@media (min-width: 800px) {
+  [data-cmsblock="demo"].cmsblock--feature:has(.cmsblock-media),
+  [data-cmsblock="demo"].cmsblock--promotion:has(.cmsblock-media) {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
+  }
+  [data-cmsblock="demo"].cmsblock--feature .cmsblock-media { grid-column: 1; grid-row: 1; }
+  [data-cmsblock="demo"].cmsblock--feature .cmsblock-copy { grid-column: 2; grid-row: 1; }
+  [data-cmsblock="demo"].cmsblock--promotion .cmsblock-copy { grid-column: 1; grid-row: 1; }
+  [data-cmsblock="demo"].cmsblock--promotion .cmsblock-media { grid-column: 2; grid-row: 1; }
+}`;
     return {html, css};
 }
diff --git a/services/cmsblock/src/store.mjs b/services/cmsblock/src/store.mjs
index 7228a6f0..34064781 100644
--- a/services/cmsblock/src/store.mjs
+++ b/services/cmsblock/src/store.mjs
@@ -61,7 +61,7 @@ export class CmsBlockStore {
             return {
                 ...current,
                 revision,
-                pending: {...generateBlock(current), revision, status: 'inreview'},
+                pending: {...generateBlock(current), templateId: current.templateId, revision, status: 'inreview'},
             };
         });
     }
diff --git a/services/cmsblock/test/flow.test.mjs b/services/cmsblock/test/flow.test.mjs
index 14f41c5f..eb8e26e7 100644
--- a/services/cmsblock/test/flow.test.mjs
+++ b/services/cmsblock/test/flow.test.mjs
@@ -26,6 +26,7 @@ test('persist, generate, review, approve, reload and regenerate while published
 
         const generated = (await request('/generate', 'POST')).data;
         assert.equal(generated.pending.status, 'inreview');
+        assert.equal(generated.pending.templateId, 'feature');
         assert.match(generated.pending.html, /Welcome/);
         assert.doesNotMatch(generated.pending.html, /<script/i);
         assert.match(generated.pending.css, /data-cmsblock="demo"/);
@@ -40,6 +41,8 @@ test('persist, generate, review, approve, reload and regenerate while published
         assert.equal(next.published.revision, 1);
         const regeneration = (await request('/generate', 'POST')).data;
         assert.equal(regeneration.pending.revision, 2);
+        assert.equal(regeneration.pending.templateId, 'promotion');
+        assert.equal(regeneration.published.templateId, 'feature');
         assert.equal(regeneration.published.revision, 1);
         await request('/reject', 'POST');
         const persisted = (await request('', 'GET')).data;
@@ -61,3 +64,21 @@ test('generated markup escapes authored HTML and allows only https images', asyn
     assert.match(generated.html, /https:\/\/example.com\/image.jpg/);
     assert.match(generated.html, /Hello/);
 });
+
+test('three image references map to distinct responsive layouts', async () => {
+    const {generateBlock} = await import('../src/generator.mjs');
+    const source = {format: 'html', content: '<h2>Welcome</h2><p>The same content</p><img src="https://example.com/image.jpg" alt="Art">'};
+    const editorial = generateBlock({source, templateId: 'editorial'});
+    const feature = generateBlock({source, templateId: 'feature'});
+    const promotion = generateBlock({source, templateId: 'promotion'});
+    for (const output of [editorial, feature, promotion]) {
+        assert.match(output.html, /Welcome/);
+        assert.match(output.html, /https:\/\/example.com\/image.jpg/);
+        assert.match(output.css, /@media \(min-width: 800px\)/);
+    }
+    assert.match(editorial.css, /cmsblock--editorial \.cmsblock-media \{ grid-row: 1;/);
+    assert.match(feature.css, /cmsblock--feature \.cmsblock-media \{ grid-column: 1;/);
+    assert.match(promotion.css, /cmsblock--promotion \.cmsblock-media \{ grid-column: 2;/);
+    assert.notEqual(editorial.css, feature.css);
+    assert.notEqual(feature.css, promotion.css);
+});

From 34f724a5e0019772f591c64ab60e4ce247d6729e Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 18:37:56 +0200
Subject: [PATCH 07/28] feat(cmsblock): enlarge template inspection and clarify
 selected reference

---
 .../src/components/CmsBlockEditor.tsx         | 68 ++++++++++++------
 widgets/cmsblock/src/styles/main.css          | 70 +++++++++++++++++++
 widgets/cmsblock/tests/cmsblock.spec.ts       | 20 ++++++
 3 files changed, 138 insertions(+), 20 deletions(-)

diff --git a/widgets/cmsblock/src/components/CmsBlockEditor.tsx b/widgets/cmsblock/src/components/CmsBlockEditor.tsx
index 5fcde3f7..adb6d52e 100644
--- a/widgets/cmsblock/src/components/CmsBlockEditor.tsx
+++ b/widgets/cmsblock/src/components/CmsBlockEditor.tsx
@@ -9,6 +9,9 @@ export const CmsBlockEditor = ({controller}: Props) => {
     const contentId = useId();
     const formatId = useId();
     const {draft} = controller;
+    const selectedTemplate = CMS_BLOCK_TEMPLATES.find(
+        template => template.id === draft.templateId
+    ) ?? CMS_BLOCK_TEMPLATES[0];
 
     return (
         <div className="cmsblock-editor__fields">
@@ -36,27 +39,52 @@ export const CmsBlockEditor = ({controller}: Props) => {
 
             <fieldset className="cmsblock-editor__references">
                 <legend>Visual reference</legend>
-                <p>Select one of the three reference images. The mock generator will match its general composition.</p>
+                <p>Choose a reference image for the next generated layout.</p>
                 <div className="cmsblock-editor__reference-list">
-                    {CMS_BLOCK_TEMPLATES.map(template => (
-                        <button
-                            type="button"
-                            key={template.id}
-                            className="cmsblock-editor__reference"
-                            data-template-id={template.id}
-                            aria-label={`Use ${template.label} reference`}
-                            aria-pressed={draft.templateId === template.id}
-                            onClick={() => controller.updateTemplate(template.id)}
-                        >
-                            <img
-                                src={CMS_BLOCK_REFERENCE_IMAGES[template.id]}
-                                alt={`${template.label} layout reference image`}
-                                loading="lazy"
-                            />
-                            <strong>{template.label}</strong>
-                            <span>{template.description}</span>
-                        </button>
-                    ))}
+                    {CMS_BLOCK_TEMPLATES.map(template => {
+                        const selected = draft.templateId === template.id;
+
+                        return (
+                            <button
+                                type="button"
+                                key={template.id}
+                                className="cmsblock-editor__reference"
+                                data-template-id={template.id}
+                                aria-label={`Use ${template.label} reference`}
+                                aria-pressed={selected}
+                                onClick={() => controller.updateTemplate(template.id)}
+                            >
+                                <span className="cmsblock-editor__reference-image">
+                                    <img
+                                        src={CMS_BLOCK_REFERENCE_IMAGES[template.id]}
+                                        alt={`${template.label} layout reference image`}
+                                        loading="lazy"
+                                    />
+                                    {selected && <span
+                                        className="cmsblock-editor__reference-selected"
+                                        aria-hidden="true"
+                                    >✓ Selected</span>}
+                                </span>
+                                <strong>{template.label}</strong>
+                                <span className="cmsblock-editor__reference-description">
+                                    {template.description}
+                                </span>
+                            </button>
+                        );
+                    })}
+                </div>
+
+                <div className="cmsblock-editor__reference-detail">
+                    <img
+                        src={CMS_BLOCK_REFERENCE_IMAGES[selectedTemplate.id]}
+                        alt={`Large preview of ${selectedTemplate.label} visual reference`}
+                    />
+                    <div className="cmsblock-editor__reference-detail-copy">
+                        <p className="cmsblock-editor__reference-eyebrow">Selected reference</p>
+                        <h2 aria-live="polite">{selectedTemplate.label}</h2>
+                        <p>{selectedTemplate.description}</p>
+                        <p>The generated draft will use this reference after you save the selection.</p>
+                    </div>
                 </div>
             </fieldset>
         </div>
diff --git a/widgets/cmsblock/src/styles/main.css b/widgets/cmsblock/src/styles/main.css
index 1cbb2061..18743988 100644
--- a/widgets/cmsblock/src/styles/main.css
+++ b/widgets/cmsblock/src/styles/main.css
@@ -66,3 +66,73 @@
 @media (max-width: 700px) {
     .cmsblock-editor__reference-list { grid-template-columns: 1fr; }
 }
+
+/* Larger inspection preview and explicit feedback for the selected reference. */
+.cmsblock-editor__reference-image {
+    position: relative;
+    display: block;
+    width: 100%;
+}
+.cmsblock-editor__reference-selected {
+    position: absolute;
+    top: 9px;
+    right: 9px;
+    padding: 5px 9px;
+    border-radius: 999px;
+    color: #fff;
+    background: #1d4ed8;
+    font-size: 0.76rem;
+    font-weight: 700;
+    line-height: 1.3;
+    box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
+}
+.cmsblock-editor__reference-list .cmsblock-editor__reference:hover {
+    border-color: #64748b;
+}
+.cmsblock-editor__reference-list .cmsblock-editor__reference[aria-pressed="true"]:hover {
+    border-color: #2563eb;
+}
+.cmsblock-editor__reference-detail {
+    display: grid;
+    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
+    gap: 20px;
+    align-items: center;
+    margin-top: 18px;
+    padding: 18px;
+    border: 1px solid #cbd5e1;
+    border-radius: 10px;
+    background: #f8fafc;
+}
+.cmsblock-editor__reference-detail > img {
+    display: block;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 540 / 328;
+    object-fit: contain;
+    border-radius: 7px;
+    background: #e2e8f0;
+}
+.cmsblock-editor__reference-detail-copy {
+    min-width: 0;
+}
+.cmsblock-editor__reference-detail-copy .cmsblock-editor__reference-eyebrow {
+    margin: 0 0 6px;
+    color: #1d4ed8;
+    font-size: 0.8rem;
+    font-weight: 700;
+}
+.cmsblock-editor__reference-detail-copy h2 {
+    margin: 0 0 10px;
+    font-size: clamp(1.15rem, 2.2vw, 1.5rem);
+}
+.cmsblock-editor__reference-detail-copy p {
+    margin: 0 0 12px;
+    color: #475569;
+    line-height: 1.5;
+}
+@media (max-width: 700px) {
+    .cmsblock-editor__reference-detail {
+        grid-template-columns: minmax(0, 1fr);
+        padding: 12px;
+    }
+}
diff --git a/widgets/cmsblock/tests/cmsblock.spec.ts b/widgets/cmsblock/tests/cmsblock.spec.ts
index 22057c4f..73c7b8bb 100644
--- a/widgets/cmsblock/tests/cmsblock.spec.ts
+++ b/widgets/cmsblock/tests/cmsblock.spec.ts
@@ -38,4 +38,24 @@ test('shows three image references and remembers the selected reference', async
     await page.reload();
     await widget.getByRole('button', {name: 'Edit', exact: true}).click();
     await expect(widget.getByRole('button', {name: 'Use Promotional reference'})).toHaveAttribute('aria-pressed', 'true');
+    await expect(widget.getByRole('img', {name: 'Large preview of Promotional visual reference'})).toBeVisible();
+    await expect(widget.locator('.cmsblock-editor__reference-selected')).toHaveCount(1);
+    await expect(widget.getByRole('button', {name: 'Use Editorial reference'})).toHaveAttribute('aria-pressed', 'false');
+});
+
+test('updates the larger reference preview when selecting a different image', async ({page}) => {
+    await page.goto('/?reactedge_debug=eager');
+    const widget = page.locator('cmsblock-widget');
+    await widget.getByRole('button', {name: 'Edit', exact: true}).click();
+
+    await widget.getByRole('button', {name: 'Use Editorial reference'}).click();
+    await expect(widget.getByRole('img', {name: 'Large preview of Editorial visual reference'})).toBeVisible();
+    await expect(widget.getByRole('button', {name: 'Use Editorial reference'})).toHaveAttribute('aria-pressed', 'true');
+    await expect(widget.locator('.cmsblock-editor__reference-selected')).toHaveCount(1);
+
+    await widget.getByRole('button', {name: 'Use Feature reference'}).click();
+    await expect(widget.getByRole('img', {name: 'Large preview of Feature visual reference'})).toBeVisible();
+    await expect(widget.getByRole('button', {name: 'Use Feature reference'})).toHaveAttribute('aria-pressed', 'true');
+    await expect(widget.getByRole('button', {name: 'Use Editorial reference'})).toHaveAttribute('aria-pressed', 'false');
+    await expect(widget.locator('.cmsblock-editor__reference-selected')).toHaveCount(1);
 });

From 1bad18c8309727bb66ffa9ca0af44f357e7974a7 Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 19:32:55 +0200
Subject: [PATCH 08/28] feat(cmsblock): separate saved editorial style from
 image layout preview

---
 widgets/cmsblock/src/Model/CmsBlock.ts        |  17 ++-
 widgets/cmsblock/src/Model/CmsBlockLayout.ts  |   8 ++
 ...plateImages.ts => CmsBlockLayoutImages.ts} |  20 +--
 .../src/components/CmsBlockEditor.tsx         |  76 ++----------
 .../src/components/CmsBlockLayoutPicker.tsx   |  59 +++++++++
 .../src/components/CmsBlockStylePicker.tsx    |  37 ++++++
 .../src/controller/useCmsBlockController.ts   |   4 +
 widgets/cmsblock/src/styles/main.css          | 114 +++++++++++++++++-
 widgets/cmsblock/tests/cmsblock.spec.ts       |  85 +++++++------
 9 files changed, 301 insertions(+), 119 deletions(-)
 create mode 100644 widgets/cmsblock/src/Model/CmsBlockLayout.ts
 rename widgets/cmsblock/src/Model/{CmsBlockTemplateImages.ts => CmsBlockLayoutImages.ts} (79%)
 create mode 100644 widgets/cmsblock/src/components/CmsBlockLayoutPicker.tsx
 create mode 100644 widgets/cmsblock/src/components/CmsBlockStylePicker.tsx

diff --git a/widgets/cmsblock/src/Model/CmsBlock.ts b/widgets/cmsblock/src/Model/CmsBlock.ts
index af1a2b49..f74efba7 100644
--- a/widgets/cmsblock/src/Model/CmsBlock.ts
+++ b/widgets/cmsblock/src/Model/CmsBlock.ts
@@ -1,16 +1,21 @@
-/** Source is always preserved as authored; it is not executable markup. */
+/** Source is preserved exactly as authored; editing it does not execute HTML. */
 export type CmsBlockSource = {
     format: 'text' | 'html';
     content: string;
 };
 
-export const CMS_BLOCK_TEMPLATES = [
-    {id: 'editorial', label: 'Editorial', description: 'Image above the text'},
-    {id: 'feature', label: 'Feature', description: 'Image left, text right'},
-    {id: 'promotion', label: 'Promotional', description: 'Bold text left, image right'},
+/**
+ * Style is the saved template dimension.
+ * The IDs remain unchanged to preserve the current CMSBlock service contract.
+ * 'feature' is retained as the API ID for the Minimal style.
+ */
+export const CMS_BLOCK_STYLES = [
+    {id: 'editorial', label: 'Editorial', description: 'Warm, comfortable reading'},
+    {id: 'feature', label: 'Minimal', description: 'Clean, understated presentation'},
+    {id: 'promotion', label: 'Promotional', description: 'Bold, high-contrast emphasis'},
 ] as const;
 
-export type CmsBlockTemplateId = (typeof CMS_BLOCK_TEMPLATES)[number]['id'];
+export type CmsBlockTemplateId = (typeof CMS_BLOCK_STYLES)[number]['id'];
 
 export type CmsBlockDraft = {
     source: CmsBlockSource;
diff --git a/widgets/cmsblock/src/Model/CmsBlockLayout.ts b/widgets/cmsblock/src/Model/CmsBlockLayout.ts
new file mode 100644
index 00000000..3e045a16
--- /dev/null
+++ b/widgets/cmsblock/src/Model/CmsBlockLayout.ts
@@ -0,0 +1,8 @@
+/** Independent layout choices: UI preview only until the service supports layoutId. */
+export const CMS_BLOCK_LAYOUTS = [
+    {id: 'image-above', label: 'Image above', description: 'Image above the content'},
+    {id: 'image-left', label: 'Image left', description: 'Image to the left of the content'},
+    {id: 'image-right', label: 'Image right', description: 'Image to the right of the content'},
+] as const;
+
+export type CmsBlockLayoutId = (typeof CMS_BLOCK_LAYOUTS)[number]['id'];
diff --git a/widgets/cmsblock/src/Model/CmsBlockTemplateImages.ts b/widgets/cmsblock/src/Model/CmsBlockLayoutImages.ts
similarity index 79%
rename from widgets/cmsblock/src/Model/CmsBlockTemplateImages.ts
rename to widgets/cmsblock/src/Model/CmsBlockLayoutImages.ts
index 52005a6f..75c263f8 100644
--- a/widgets/cmsblock/src/Model/CmsBlockTemplateImages.ts
+++ b/widgets/cmsblock/src/Model/CmsBlockLayoutImages.ts
@@ -1,10 +1,10 @@
-import type {CmsBlockTemplateId} from './CmsBlock.ts';
+import type {CmsBlockLayoutId} from './CmsBlockLayout.ts';
 
 /**
- * Hard-coded image references representing three visual compositions.
+ * Hard-coded layout illustrations. They do not define editorial style.
  * Bundled as data images so the gallery works on any ReactEdge host.
  */
-const editorial = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 328">
+const imageAbove = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 328">
 <rect width="540" height="328" fill="#F7F4EF"/>
 <rect x="22" y="20" width="496" height="170" rx="5" fill="#B6C8C5"/>
 <path d="M22 157L145 77L246 161L376 63L518 153V190H22Z" fill="#698D84"/>
@@ -16,7 +16,7 @@ const editorial = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 328"
 <rect x="22" y="290" width="115" height="18" rx="3" fill="#456A63"/>
 </svg>`;
 
-const feature = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 328">
+const imageLeft = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 328">
 <rect width="540" height="328" fill="#F0F8F8"/>
 <rect x="22" y="20" width="233" height="288" rx="5" fill="#C4DBCD"/>
 <rect x="48" y="45" width="177" height="239" rx="5" fill="#E2E8DE"/>
@@ -32,7 +32,7 @@ const feature = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 328">
 <rect x="284" y="228" width="130" height="33" rx="5" fill="#24717E"/>
 </svg>`;
 
-const promotion = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 328">
+const imageRight = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 328">
 <rect width="540" height="328" fill="#1D2C39"/>
 <rect x="275" y="20" width="243" height="288" rx="4" fill="#DA9468"/>
 <circle cx="400" cy="147" r="95" fill="#F8D2A0"/>
@@ -47,9 +47,9 @@ const promotion = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 540 328"
 
 const asImage = (svg: string) => `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
 
-// The same IDs select deterministic layouts on the CMSBlock demo service.
-export const CMS_BLOCK_REFERENCE_IMAGES: Record<CmsBlockTemplateId, string> = {
-    editorial: asImage(editorial),
-    feature: asImage(feature),
-    promotion: asImage(promotion),
+// Purely visual selectors in this iteration; the backend has no layoutId yet.
+export const CMS_BLOCK_LAYOUT_IMAGES: Record<CmsBlockLayoutId, string> = {
+    'image-above': asImage(imageAbove),
+    'image-left': asImage(imageLeft),
+    'image-right': asImage(imageRight),
 };
diff --git a/widgets/cmsblock/src/components/CmsBlockEditor.tsx b/widgets/cmsblock/src/components/CmsBlockEditor.tsx
index adb6d52e..f1180915 100644
--- a/widgets/cmsblock/src/components/CmsBlockEditor.tsx
+++ b/widgets/cmsblock/src/components/CmsBlockEditor.tsx
@@ -1,6 +1,7 @@
 import {useId} from 'react';
-import {CMS_BLOCK_TEMPLATES, type CmsBlockDraft} from '../Model/CmsBlock.ts';
-import {CMS_BLOCK_REFERENCE_IMAGES} from '../Model/CmsBlockTemplateImages.ts';
+import type {CmsBlockDraft} from '../Model/CmsBlock.ts';
+import {CmsBlockStylePicker} from './CmsBlockStylePicker.tsx';
+import {CmsBlockLayoutPicker} from './CmsBlockLayoutPicker.tsx';
 import type {CmsBlockController} from '../controller/useCmsBlockController.ts';
 
 type Props = {controller: CmsBlockController};
@@ -9,84 +10,25 @@ export const CmsBlockEditor = ({controller}: Props) => {
     const contentId = useId();
     const formatId = useId();
     const {draft} = controller;
-    const selectedTemplate = CMS_BLOCK_TEMPLATES.find(
-        template => template.id === draft.templateId
-    ) ?? CMS_BLOCK_TEMPLATES[0];
 
     return (
         <div className="cmsblock-editor__fields">
             <label htmlFor={contentId}>Source content</label>
-            <textarea
-                id={contentId}
-                rows={12}
-                value={draft.source.content}
+            <textarea id={contentId} rows={12} value={draft.source.content}
                 onChange={event => controller.updateContent(event.target.value)}
-                placeholder="Paste text or HTML here"
-            />
+                placeholder="Paste text or HTML here"/>
             <div className="cmsblock-editor__options">
                 <div>
                     <label htmlFor={formatId}>Content format</label>
-                    <select
-                        id={formatId}
-                        value={draft.source.format}
-                        onChange={event => controller.updateFormat(event.target.value as CmsBlockDraft['source']['format'])}
-                    >
+                    <select id={formatId} value={draft.source.format}
+                        onChange={event => controller.updateFormat(event.target.value as CmsBlockDraft['source']['format'])}>
                         <option value="text">Plain text</option>
                         <option value="html">HTML source</option>
                     </select>
                 </div>
             </div>
-
-            <fieldset className="cmsblock-editor__references">
-                <legend>Visual reference</legend>
-                <p>Choose a reference image for the next generated layout.</p>
-                <div className="cmsblock-editor__reference-list">
-                    {CMS_BLOCK_TEMPLATES.map(template => {
-                        const selected = draft.templateId === template.id;
-
-                        return (
-                            <button
-                                type="button"
-                                key={template.id}
-                                className="cmsblock-editor__reference"
-                                data-template-id={template.id}
-                                aria-label={`Use ${template.label} reference`}
-                                aria-pressed={selected}
-                                onClick={() => controller.updateTemplate(template.id)}
-                            >
-                                <span className="cmsblock-editor__reference-image">
-                                    <img
-                                        src={CMS_BLOCK_REFERENCE_IMAGES[template.id]}
-                                        alt={`${template.label} layout reference image`}
-                                        loading="lazy"
-                                    />
-                                    {selected && <span
-                                        className="cmsblock-editor__reference-selected"
-                                        aria-hidden="true"
-                                    >✓ Selected</span>}
-                                </span>
-                                <strong>{template.label}</strong>
-                                <span className="cmsblock-editor__reference-description">
-                                    {template.description}
-                                </span>
-                            </button>
-                        );
-                    })}
-                </div>
-
-                <div className="cmsblock-editor__reference-detail">
-                    <img
-                        src={CMS_BLOCK_REFERENCE_IMAGES[selectedTemplate.id]}
-                        alt={`Large preview of ${selectedTemplate.label} visual reference`}
-                    />
-                    <div className="cmsblock-editor__reference-detail-copy">
-                        <p className="cmsblock-editor__reference-eyebrow">Selected reference</p>
-                        <h2 aria-live="polite">{selectedTemplate.label}</h2>
-                        <p>{selectedTemplate.description}</p>
-                        <p>The generated draft will use this reference after you save the selection.</p>
-                    </div>
-                </div>
-            </fieldset>
+            <CmsBlockStylePicker controller={controller}/>
+            <CmsBlockLayoutPicker controller={controller}/>
         </div>
     );
 };
diff --git a/widgets/cmsblock/src/components/CmsBlockLayoutPicker.tsx b/widgets/cmsblock/src/components/CmsBlockLayoutPicker.tsx
new file mode 100644
index 00000000..95307633
--- /dev/null
+++ b/widgets/cmsblock/src/components/CmsBlockLayoutPicker.tsx
@@ -0,0 +1,59 @@
+import {CMS_BLOCK_LAYOUTS} from '../Model/CmsBlockLayout.ts';
+import {CMS_BLOCK_LAYOUT_IMAGES} from '../Model/CmsBlockLayoutImages.ts';
+import type {CmsBlockController} from '../controller/useCmsBlockController.ts';
+
+type Props = {controller: CmsBlockController};
+
+/**
+ * Image arrangement is preview-only. The backend must gain an independent
+ * layoutId before this selection can affect generation or be persisted.
+ */
+export const CmsBlockLayoutPicker = ({controller}: Props) => {
+    const selectedLayout = CMS_BLOCK_LAYOUTS.find(layout => layout.id === controller.layoutId)
+        ?? CMS_BLOCK_LAYOUTS[0];
+
+    return (
+        <fieldset className="cmsblock-editor__references">
+            <legend>Image layout</legend>
+            <p>Select where the content image should appear.</p>
+            <div className="cmsblock-editor__reference-list">
+                {CMS_BLOCK_LAYOUTS.map(layout => {
+                    const selected = controller.layoutId === layout.id;
+                    return (
+                        <button
+                            type="button"
+                            key={layout.id}
+                            className="cmsblock-editor__reference"
+                            data-layout-id={layout.id}
+                            aria-label={`Use ${layout.label} layout`}
+                            aria-pressed={selected}
+                            onClick={() => controller.setLayoutId(layout.id)}
+                        >
+                            <span className="cmsblock-editor__reference-image">
+                                <img src={CMS_BLOCK_LAYOUT_IMAGES[layout.id]}
+                                    alt={`${layout.label} layout illustration`} loading="lazy"/>
+                                {selected && <span className="cmsblock-editor__reference-selected"
+                                    aria-hidden="true">✓ Selected</span>}
+                            </span>
+                            <strong>{layout.label}</strong>
+                            <span className="cmsblock-editor__reference-description">{layout.description}</span>
+                        </button>
+                    );
+                })}
+            </div>
+            <div className="cmsblock-editor__reference-detail">
+                <img src={CMS_BLOCK_LAYOUT_IMAGES[selectedLayout.id]}
+                    alt={`Large preview of ${selectedLayout.label} layout`}/>
+                <div className="cmsblock-editor__reference-detail-copy">
+                    <p className="cmsblock-editor__reference-eyebrow">Selected image layout</p>
+                    <h2 aria-live="polite">{selectedLayout.label}</h2>
+                    <p>{selectedLayout.description}</p>
+                    <p className="cmsblock-editor__layout-notice">
+                        Layout selection is a UI preview only. It is not saved or used by
+                        the current generator yet; generated layout still follows the saved style.
+                    </p>
+                </div>
+            </div>
+        </fieldset>
+    );
+};
diff --git a/widgets/cmsblock/src/components/CmsBlockStylePicker.tsx b/widgets/cmsblock/src/components/CmsBlockStylePicker.tsx
new file mode 100644
index 00000000..a6b60993
--- /dev/null
+++ b/widgets/cmsblock/src/components/CmsBlockStylePicker.tsx
@@ -0,0 +1,37 @@
+import {CMS_BLOCK_STYLES} from '../Model/CmsBlock.ts';
+import type {CmsBlockController} from '../controller/useCmsBlockController.ts';
+
+type Props = {controller: CmsBlockController};
+
+/** Editorial tone is independent of the image placement preview. */
+export const CmsBlockStylePicker = ({controller}: Props) => (
+    <fieldset className="cmsblock-editor__styles">
+        <legend>Editorial style</legend>
+        <p>Choose the visual tone of the block. This choice is saved as its template.</p>
+        <div className="cmsblock-editor__style-list">
+            {CMS_BLOCK_STYLES.map(style => {
+                const selected = controller.draft.templateId === style.id;
+                return (
+                    <button
+                        key={style.id}
+                        type="button"
+                        className={`cmsblock-editor__style cmsblock-editor__style--${style.id}`}
+                        data-style-id={style.id}
+                        aria-label={`Use ${style.label} style`}
+                        aria-pressed={selected}
+                        onClick={() => controller.updateTemplate(style.id)}
+                    >
+                        <span className="cmsblock-editor__style-sample" aria-hidden="true">
+                            <span className="cmsblock-editor__style-heading">A heading</span>
+                            <span className="cmsblock-editor__style-line"/>
+                            <span className="cmsblock-editor__style-line cmsblock-editor__style-line--short"/>
+                        </span>
+                        <strong>{style.label}</strong>
+                        <span className="cmsblock-editor__style-description">{style.description}</span>
+                        {selected && <span className="cmsblock-editor__style-selected" aria-hidden="true">✓ Selected</span>}
+                    </button>
+                );
+            })}
+        </div>
+    </fieldset>
+);
diff --git a/widgets/cmsblock/src/controller/useCmsBlockController.ts b/widgets/cmsblock/src/controller/useCmsBlockController.ts
index 57f77d1e..de6a9909 100644
--- a/widgets/cmsblock/src/controller/useCmsBlockController.ts
+++ b/widgets/cmsblock/src/controller/useCmsBlockController.ts
@@ -1,6 +1,7 @@
 import {useEffect, useState} from 'react';
 import type {WidgetConfig} from '../Config.ts';
 import type {CmsBlockDraft, CmsBlockTemplateId} from '../Model/CmsBlock.ts';
+import type {CmsBlockLayoutId} from '../Model/CmsBlockLayout.ts';
 import {CmsBlockApi, type CmsBlockRecord} from '../Model/CmsBlockApi.ts';
 
 export function useCmsBlockController(config: WidgetConfig) {
@@ -18,6 +19,8 @@ export function useCmsBlockController(config: WidgetConfig) {
     const [message, setMessage] = useState('');
     const [mode, setMode] = useState<'edit' | 'review' | 'view'>('edit');
     const [showSourcePreview, setShowSourcePreview] = useState(false);
+    // Local-only preview. Deliberately excluded from CmsBlockDraft and save().
+    const [layoutId, setLayoutId] = useState<CmsBlockLayoutId>('image-above');
 
     useEffect(() => {
         let active = true;
@@ -95,6 +98,7 @@ export function useCmsBlockController(config: WidgetConfig) {
 
     return {
         draft, record, changed, busy, loading, error, message, mode, setMode,
+        layoutId, setLayoutId,
         showSourcePreview, setShowSourcePreview,
         updateContent, updateFormat, updateTemplate, reset, save, generate, approve, reject,
     };
diff --git a/widgets/cmsblock/src/styles/main.css b/widgets/cmsblock/src/styles/main.css
index 18743988..f0bbd328 100644
--- a/widgets/cmsblock/src/styles/main.css
+++ b/widgets/cmsblock/src/styles/main.css
@@ -36,7 +36,7 @@
 .cmsblock-editor :is(textarea, select, button):focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
 @media (max-width: 600px) { .cmsblock-editor__options { grid-template-columns: 1fr; } }
 
-/* Three visual reference cards; no layout/alignment controls are exposed. */
+/* Two independent controls: saved editorial style and preview-only image layout. */
 .cmsblock-editor__references {
     margin: 0 0 24px; padding: 0; border: 0; min-width: 0;
 }
@@ -136,3 +136,115 @@
         padding: 12px;
     }
 }
+
+.cmsblock-editor__styles {
+    min-width: 0;
+    margin: 0 0 26px;
+    padding: 0;
+    border: 0;
+}
+.cmsblock-editor__styles legend {
+    margin: 0 0 4px;
+    padding: 0;
+    font-size: 1rem;
+    font-weight: 700;
+}
+.cmsblock-editor__styles > p {
+    margin: 0 0 14px;
+    color: #64748b;
+    font-size: 0.875rem;
+}
+.cmsblock-editor__style-list {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 14px;
+}
+.cmsblock-editor__style-list .cmsblock-editor__style {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    min-width: 0;
+    padding: 8px;
+    border: 2px solid #cbd5e1;
+    border-radius: 10px;
+    color: #1f2937;
+    background: #fff;
+    text-align: left;
+    font: inherit;
+    cursor: pointer;
+}
+.cmsblock-editor__style-list .cmsblock-editor__style[aria-pressed="true"] {
+    border-color: #2563eb;
+    background: #eff6ff;
+    box-shadow: 0 0 0 1px #2563eb;
+}
+.cmsblock-editor__style-sample {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 11px;
+    min-height: 117px;
+    padding: 22px 18px;
+    border-radius: 5px;
+    background: var(--cmsblock-style-bg);
+    color: var(--cmsblock-style-fg);
+}
+.cmsblock-editor__style--editorial {
+    --cmsblock-style-bg: #f7f4ef;
+    --cmsblock-style-fg: #2d4440;
+}
+.cmsblock-editor__style--feature {
+    --cmsblock-style-bg: #f0f8f8;
+    --cmsblock-style-fg: #214953;
+}
+.cmsblock-editor__style--promotion {
+    --cmsblock-style-bg: #1d2c39;
+    --cmsblock-style-fg: #ffffff;
+}
+.cmsblock-editor__style-heading {
+    font-size: clamp(1rem, 2vw, 1.35rem);
+    font-weight: 700;
+    line-height: 1.1;
+}
+.cmsblock-editor__style--editorial .cmsblock-editor__style-heading {
+    font-family: Georgia, 'Times New Roman', serif;
+    font-weight: 500;
+}
+.cmsblock-editor__style--promotion .cmsblock-editor__style-heading {
+    text-transform: uppercase;
+    letter-spacing: 0.025em;
+}
+.cmsblock-editor__style-line {
+    display: block;
+    height: 6px;
+    width: 88%;
+    border-radius: 4px;
+    background: currentColor;
+    opacity: 0.32;
+}
+.cmsblock-editor__style-line--short { width: 60%; }
+.cmsblock-editor__style strong {
+    margin: 4px 3px 0;
+    font-size: 0.95rem;
+}
+.cmsblock-editor__style-description {
+    margin: 0 3px;
+    font-size: 0.82rem;
+    color: #64748b;
+    line-height: 1.45;
+}
+.cmsblock-editor__style-selected {
+    margin: auto 3px 3px;
+    color: #1d4ed8;
+    font-size: 0.8rem;
+    font-weight: 700;
+}
+.cmsblock-editor__layout-notice {
+    font-size: 0.85rem;
+    color: #475569;
+    border-left: 3px solid #94a3b8;
+    padding-left: 12px;
+}
+@media (max-width: 700px) {
+    .cmsblock-editor__style-list { grid-template-columns: 1fr; }
+}
diff --git a/widgets/cmsblock/tests/cmsblock.spec.ts b/widgets/cmsblock/tests/cmsblock.spec.ts
index 73c7b8bb..5709bb87 100644
--- a/widgets/cmsblock/tests/cmsblock.spec.ts
+++ b/widgets/cmsblock/tests/cmsblock.spec.ts
@@ -6,13 +6,13 @@ test.describe('CMSBlock E2E workflow', () => {
         await expect(page.locator('cmsblock-widget')).toBeVisible();
     });
 
-    test('edits, saves, generates, approves and shows the published block', async ({page}) => {
+    test('edits, saves the style, generates, approves and shows the published block', async ({page}) => {
         const widget = page.locator('cmsblock-widget');
         await expect(widget.locator('[data-cmsblock-title]')).toBeVisible();
         await widget.getByRole('button', {name: 'Edit', exact: true}).click();
         await widget.getByLabel('Source content').fill('Welcome to CMSBlock\nA beautiful responsive content block.');
-        await widget.getByRole('button', {name: 'Use Feature reference'}).click();
-        await expect(widget.getByRole('button', {name: 'Use Feature reference'})).toHaveAttribute('aria-pressed', 'true');
+        await widget.getByRole('button', {name: 'Use Minimal style'}).click();
+        await expect(widget.getByRole('button', {name: 'Use Minimal style'})).toHaveAttribute('aria-pressed', 'true');
         await widget.getByRole('button', {name: 'Save source'}).click();
         await expect(widget.getByText('Source and template saved.')).toBeVisible();
         await widget.getByRole('button', {name: 'Generate draft'}).click();
@@ -24,38 +24,53 @@ test.describe('CMSBlock E2E workflow', () => {
         await page.reload();
         await expect(widget.getByRole('heading', {name: /Published revision/})).toBeVisible();
     });
-});
 
-test('shows three image references and remembers the selected reference', async ({page}) => {
-    await page.goto('/?reactedge_debug=eager');
-    const widget = page.locator('cmsblock-widget');
-    await widget.getByRole('button', {name: 'Edit', exact: true}).click();
-    await expect(widget.locator('.cmsblock-editor__reference img')).toHaveCount(3);
-    await widget.getByLabel('Source content').fill('Choose a template by its image');
-    await widget.getByRole('button', {name: 'Use Promotional reference'}).click();
-    await widget.getByRole('button', {name: 'Save source'}).click();
-    await expect(widget.getByText('Source and template saved.')).toBeVisible();
-    await page.reload();
-    await widget.getByRole('button', {name: 'Edit', exact: true}).click();
-    await expect(widget.getByRole('button', {name: 'Use Promotional reference'})).toHaveAttribute('aria-pressed', 'true');
-    await expect(widget.getByRole('img', {name: 'Large preview of Promotional visual reference'})).toBeVisible();
-    await expect(widget.locator('.cmsblock-editor__reference-selected')).toHaveCount(1);
-    await expect(widget.getByRole('button', {name: 'Use Editorial reference'})).toHaveAttribute('aria-pressed', 'false');
-});
+    test('keeps editorial style separate from the layout preview', async ({page}) => {
+        const widget = page.locator('cmsblock-widget');
+        await widget.getByRole('button', {name: 'Edit', exact: true}).click();
+        await expect(widget.locator('.cmsblock-editor__style')).toHaveCount(3);
+        await expect(widget.locator('.cmsblock-editor__reference')).toHaveCount(3);
+
+        await widget.getByRole('button', {name: 'Use Editorial style'}).click();
+        await widget.getByRole('button', {name: 'Use Image left layout'}).click();
+        await expect(widget.getByRole('img', {name: 'Large preview of Image left layout'})).toBeVisible();
+        await expect(widget.getByRole('button', {name: 'Use Editorial style'})).toHaveAttribute('aria-pressed', 'true');
+
+        await widget.getByRole('button', {name: 'Use Promotional style'}).click();
+        await expect(widget.getByRole('button', {name: 'Use Promotional style'})).toHaveAttribute('aria-pressed', 'true');
+        await expect(widget.getByRole('button', {name: 'Use Image left layout'})).toHaveAttribute('aria-pressed', 'true');
+        await expect(widget.locator('.cmsblock-editor__reference-selected')).toHaveCount(1);
+        await expect(widget.getByText(/Layout selection is a UI preview only/)).toBeVisible();
+    });
+
+    test('saves editorial style but does not submit the preview-only layout', async ({page}) => {
+        const widget = page.locator('cmsblock-widget');
+        await widget.getByRole('button', {name: 'Edit', exact: true}).click();
+        await widget.getByLabel('Source content').fill('Choose a style and inspect the image arrangement');
+        await widget.getByRole('button', {name: 'Use Promotional style'}).click();
+        await widget.getByRole('button', {name: 'Use Image right layout'}).click();
 
-test('updates the larger reference preview when selecting a different image', async ({page}) => {
-    await page.goto('/?reactedge_debug=eager');
-    const widget = page.locator('cmsblock-widget');
-    await widget.getByRole('button', {name: 'Edit', exact: true}).click();
-
-    await widget.getByRole('button', {name: 'Use Editorial reference'}).click();
-    await expect(widget.getByRole('img', {name: 'Large preview of Editorial visual reference'})).toBeVisible();
-    await expect(widget.getByRole('button', {name: 'Use Editorial reference'})).toHaveAttribute('aria-pressed', 'true');
-    await expect(widget.locator('.cmsblock-editor__reference-selected')).toHaveCount(1);
-
-    await widget.getByRole('button', {name: 'Use Feature reference'}).click();
-    await expect(widget.getByRole('img', {name: 'Large preview of Feature visual reference'})).toBeVisible();
-    await expect(widget.getByRole('button', {name: 'Use Feature reference'})).toHaveAttribute('aria-pressed', 'true');
-    await expect(widget.getByRole('button', {name: 'Use Editorial reference'})).toHaveAttribute('aria-pressed', 'false');
-    await expect(widget.locator('.cmsblock-editor__reference-selected')).toHaveCount(1);
+        const saveRequest = page.waitForRequest(request =>
+            request.method() === 'PUT' && request.url().includes('/cmsblock/blocks/demo'));
+        await widget.getByRole('button', {name: 'Save source'}).click();
+        const request = await saveRequest;
+        const payload = request.postDataJSON() as {templateId: string; layoutId?: string};
+        expect(payload.templateId).toBe('promotion');
+        expect(payload).not.toHaveProperty('layoutId');
+        await expect(widget.getByText('Source and template saved.')).toBeVisible();
+
+        await page.reload();
+        await widget.getByRole('button', {name: 'Edit', exact: true}).click();
+        await expect(widget.getByRole('button', {name: 'Use Promotional style'})).toHaveAttribute('aria-pressed', 'true');
+        await expect(widget.getByRole('button', {name: 'Use Image above layout'})).toHaveAttribute('aria-pressed', 'true');
+    });
+
+    test('changing the layout preview does not mark saved source as changed', async ({page}) => {
+        const widget = page.locator('cmsblock-widget');
+        await widget.getByRole('button', {name: 'Edit', exact: true}).click();
+        await widget.getByRole('button', {name: 'Use Image right layout'}).click();
+        await expect(widget.getByRole('img', {name: 'Large preview of Image right layout'})).toBeVisible();
+        await expect(widget.getByRole('button', {name: 'Use Image right layout'})).toHaveAttribute('aria-pressed', 'true');
+        await expect(widget.locator('.cmsblock-editor__reference-selected')).toHaveCount(1);
+    });
 });

From d82358c9e12709e5cf86461a16e09f290e1ce11d Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 19:38:06 +0200
Subject: [PATCH 09/28] ci(cmsblock): enforce bounded function complexity with
 Lizard

---
 .github/workflows/cmsblock-complexity.yml | 32 +++++++++++++++++++++++
 widgets/cmsblock/README.md                | 29 ++++++++++++++++++++
 widgets/cmsblock/package.json             |  5 ++--
 3 files changed, 64 insertions(+), 2 deletions(-)
 create mode 100644 .github/workflows/cmsblock-complexity.yml
 create mode 100644 widgets/cmsblock/README.md

diff --git a/.github/workflows/cmsblock-complexity.yml b/.github/workflows/cmsblock-complexity.yml
new file mode 100644
index 00000000..3f3217d1
--- /dev/null
+++ b/.github/workflows/cmsblock-complexity.yml
@@ -0,0 +1,32 @@
+name: CMSBlock complexity
+
+on:
+  push:
+    branches:
+      - feat/cms-block
+    paths:
+      - 'widgets/cmsblock/**'
+      - '.github/workflows/cmsblock-complexity.yml'
+  pull_request:
+    paths:
+      - 'widgets/cmsblock/**'
+      - '.github/workflows/cmsblock-complexity.yml'
+  workflow_dispatch:
+
+jobs:
+  lizard:
+    name: Lizard (CCN <= 10)
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.12'
+      - name: Install Lizard
+        run: python -m pip install lizard==1.24.1
+      - name: Analyze CMSBlock source and widget API
+        run: |
+          cd widgets/cmsblock
+          lizard src api -C 10 -a 5
diff --git a/widgets/cmsblock/README.md b/widgets/cmsblock/README.md
new file mode 100644
index 00000000..4cb2f092
--- /dev/null
+++ b/widgets/cmsblock/README.md
@@ -0,0 +1,29 @@
+# CMSBlock complexity
+
+Use [Lizard](https://github.com/terryyin/lizard) to keep TypeScript/TSX
+function complexity low in the CMSBlock widget (service and AI generator are
+explicitly outside this check).
+
+Install once:
+
+```bash
+python -m pip install lizard==1.24.1
+```
+
+From the ReactEdge platform root, run:
+
+```bash
+npm run complexity --prefix widgets/cmsblock
+```
+
+The script checks only `widgets/cmsblock/src` and `widgets/cmsblock/api`:
+
+- Cyclomatic complexity (CCN) must not exceed **10** per function.
+- Parameter count must not exceed **5** per function.
+
+Lizard reports function NLOC and token counts as well. Review unusually long
+functions for separation of responsibilities even if their CCN is low.
+For TSX, length metrics can include markup and should be interpreted accordingly.
+
+The GitHub Actions workflow `cmsblock-complexity.yml` runs the same
+command on relevant changes. No service code or generation logic is affected.
diff --git a/widgets/cmsblock/package.json b/widgets/cmsblock/package.json
index 260493ed..f881b42b 100644
--- a/widgets/cmsblock/package.json
+++ b/widgets/cmsblock/package.json
@@ -9,7 +9,8 @@
     "build:ssr": "vite build -c vite.npm.config.ts",
     "analyze": "ANALYZE=true vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "complexity": "lizard src api -C 10 -a 5"
   },
   "dependencies": {
     "zod": "^4.4.3"
@@ -36,4 +37,4 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   }
-}
\ No newline at end of file
+}

From 8e948245fb79e5ca4a2b4d64f5786f2755d9180e Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 19:39:19 +0200
Subject: [PATCH 10/28] refactor(cmsblock): split widget modes to reduce
 cyclomatic complexity

---
 .../cmsblock/src/components/CmsBlockModes.tsx | 79 +++++++++++++++++++
 .../src/components/WidgetCmsblock.tsx         | 65 +++------------
 2 files changed, 92 insertions(+), 52 deletions(-)
 create mode 100644 widgets/cmsblock/src/components/CmsBlockModes.tsx

diff --git a/widgets/cmsblock/src/components/CmsBlockModes.tsx b/widgets/cmsblock/src/components/CmsBlockModes.tsx
new file mode 100644
index 00000000..dca0254e
--- /dev/null
+++ b/widgets/cmsblock/src/components/CmsBlockModes.tsx
@@ -0,0 +1,79 @@
+import {CmsBlockEditor} from './CmsBlockEditor.tsx';
+import {CmsBlockSourcePreview} from './CmsBlockSourcePreview.tsx';
+import {CmsBlockRenderedPreview} from './CmsBlockRenderedPreview.tsx';
+import type {CmsBlockController} from '../controller/useCmsBlockController.ts';
+
+type Props = {controller: CmsBlockController};
+
+export const CmsBlockModeNavigation = ({controller}: Props) => {
+    const {record, mode} = controller;
+    return (
+        <nav className="cmsblock-editor__actions" aria-label="CMSBlock modes">
+            <button type="button" onClick={() => controller.setMode('edit')}
+                aria-pressed={mode === 'edit'}>Edit</button>
+            <button type="button" onClick={() => controller.setMode('review')}
+                disabled={!record?.pending} aria-pressed={mode === 'review'}>Review</button>
+            <button type="button" onClick={() => controller.setMode('view')}
+                disabled={!record?.published} aria-pressed={mode === 'view'}>View</button>
+        </nav>
+    );
+};
+
+export const CmsBlockFeedback = ({controller}: Props) => (
+    <>
+        {controller.loading && <p role="status">Loading saved CMSBlock…</p>}
+        {controller.error && <p className="cmsblock-editor__error" role="alert">{controller.error}</p>}
+        {controller.message && <p className="cmsblock-editor__message" role="status">{controller.message}</p>}
+    </>
+);
+
+export const CmsBlockEditMode = ({controller}: Props) => {
+    const {record, busy, changed, showSourcePreview, draft} = controller;
+    return (
+        <>
+            <CmsBlockEditor controller={controller} />
+            <div className="cmsblock-editor__actions">
+                <button type="button" disabled={busy || (!changed && Boolean(record))}
+                    onClick={() => { void controller.save(); }}>Save source</button>
+                <button type="button" disabled={busy || !record || changed}
+                    onClick={() => { void controller.generate(); }}>Generate draft</button>
+                <button type="button" disabled={busy || !changed}
+                    onClick={controller.reset}>Reset changes</button>
+                <button type="button" disabled={busy} onClick={() =>
+                    controller.setShowSourcePreview(!showSourcePreview)}>
+                    {showSourcePreview ? 'Hide source preview' : 'Inspect source'}
+                </button>
+                <span>{changed ? 'Unsaved working copy' : 'Changes saved'}</span>
+            </div>
+            {showSourcePreview && <CmsBlockSourcePreview draft={draft} />}
+            {record?.published && <p>Published revision {record.published.revision} remains live while editing.</p>}
+        </>
+    );
+};
+
+export const CmsBlockReviewMode = ({controller}: Props) => {
+    const {record, busy} = controller;
+    if (!record?.pending) return null;
+    return (
+        <>
+            <h2>Review generated revision {record.pending.revision}</h2>
+            <CmsBlockRenderedPreview title="Generated CMSBlock draft" revision={record.pending} />
+            <div className="cmsblock-editor__actions">
+                <button type="button" disabled={busy} onClick={() => { void controller.approve(); }}>Approve and publish</button>
+                <button type="button" disabled={busy} onClick={() => { void controller.reject(); }}>Reject draft</button>
+            </div>
+            {record.published && <p>Published revision {record.published.revision} is unchanged until approval.</p>}
+        </>
+    );
+};
+
+export const CmsBlockViewMode = ({controller}: Props) => {
+    const published = controller.record?.published;
+    if (!published) return null;
+    return (
+        <>
+            <h2>Published revision {published.revision}</h2>
+            <CmsBlockRenderedPreview title="Published CMSBlock" revision={published} />
+        </>
+    );
+};
diff --git a/widgets/cmsblock/src/components/WidgetCmsblock.tsx b/widgets/cmsblock/src/components/WidgetCmsblock.tsx
index 3f82c1c0..66bd46e0 100644
--- a/widgets/cmsblock/src/components/WidgetCmsblock.tsx
+++ b/widgets/cmsblock/src/components/WidgetCmsblock.tsx
@@ -1,15 +1,18 @@
 import type {WidgetConfig} from '../Config.ts';
-import {CmsBlockEditor} from './CmsBlockEditor.tsx';
-import {CmsBlockSourcePreview} from './CmsBlockSourcePreview.tsx';
-import {CmsBlockRenderedPreview} from './CmsBlockRenderedPreview.tsx';
 import {useCmsBlockController} from '../controller/useCmsBlockController.ts';
+import {
+    CmsBlockModeNavigation,
+    CmsBlockFeedback,
+    CmsBlockEditMode,
+    CmsBlockReviewMode,
+    CmsBlockViewMode,
+} from './CmsBlockModes.tsx';
 
 type Props = {config: WidgetConfig};
 
 export const WidgetCmsblock = ({config}: Props) => {
     const controller = useCmsBlockController(config);
-    const {record, busy, loading, mode} = controller;
-
+    const {loading, mode} = controller;
     return (
         <section className="cmsblock-editor" aria-label="CMS block editor">
             <header className="cmsblock-editor__header">
@@ -18,53 +21,11 @@ export const WidgetCmsblock = ({config}: Props) => {
                 </h1>
                 <p>Author, generate, review and publish a responsive content block.</p>
             </header>
-
-            <nav className="cmsblock-editor__actions" aria-label="CMSBlock modes">
-                <button type="button" onClick={() => controller.setMode('edit')}
-                    aria-pressed={mode === 'edit'}>Edit</button>
-                <button type="button" onClick={() => controller.setMode('review')}
-                    disabled={!record?.pending} aria-pressed={mode === 'review'}>Review</button>
-                <button type="button" onClick={() => controller.setMode('view')}
-                    disabled={!record?.published} aria-pressed={mode === 'view'}>View</button>
-            </nav>
-
-            {loading && <p role="status">Loading saved CMSBlock…</p>}
-            {controller.error && <p className="cmsblock-editor__error" role="alert">{controller.error}</p>}
-            {controller.message && <p className="cmsblock-editor__message" role="status">{controller.message}</p>}
-
-            {!loading && mode === 'edit' && <>
-                <CmsBlockEditor controller={controller} />
-                <div className="cmsblock-editor__actions">
-                    <button type="button" disabled={busy || !controller.changed && Boolean(record)}
-                        onClick={() => { void controller.save(); }}>Save source</button>
-                    <button type="button" disabled={busy || !record || controller.changed}
-                        onClick={() => { void controller.generate(); }}>Generate draft</button>
-                    <button type="button" disabled={busy || !controller.changed}
-                        onClick={controller.reset}>Reset changes</button>
-                    <button type="button" disabled={busy} onClick={() =>
-                        controller.setShowSourcePreview(!controller.showSourcePreview)}>
-                        {controller.showSourcePreview ? 'Hide source preview' : 'Inspect source'}
-                    </button>
-                    <span>{controller.changed ? 'Unsaved working copy' : 'Changes saved'}</span>
-                </div>
-                {controller.showSourcePreview && <CmsBlockSourcePreview draft={controller.draft} />}
-                {record?.published && <p>Published revision {record.published.revision} remains live while editing.</p>}
-            </>}
-
-            {!loading && mode === 'review' && record?.pending && <>
-                <h2>Review generated revision {record.pending.revision}</h2>
-                <CmsBlockRenderedPreview title="Generated CMSBlock draft" revision={record.pending} />
-                <div className="cmsblock-editor__actions">
-                    <button type="button" disabled={busy} onClick={() => { void controller.approve(); }}>Approve and publish</button>
-                    <button type="button" disabled={busy} onClick={() => { void controller.reject(); }}>Reject draft</button>
-                </div>
-                {record.published && <p>Published revision {record.published.revision} is unchanged until approval.</p>}
-            </>}
-
-            {!loading && mode === 'view' && record?.published && <>
-                <h2>Published revision {record.published.revision}</h2>
-                <CmsBlockRenderedPreview title="Published CMSBlock" revision={record.published} />
-            </>}
+            <CmsBlockModeNavigation controller={controller} />
+            <CmsBlockFeedback controller={controller} />
+            {!loading && mode === 'edit' && <CmsBlockEditMode controller={controller} />}
+            {!loading && mode === 'review' && <CmsBlockReviewMode controller={controller} />}
+            {!loading && mode === 'view' && <CmsBlockViewMode controller={controller} />}
         </section>
     );
 };

From 345e79702e71db044e56a8ee2e3468c02baa66c7 Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 19:40:03 +0200
Subject: [PATCH 11/28] refactor(cmsblock): isolate edit action and preview
 rendering

---
 .../cmsblock/src/components/CmsBlockModes.tsx | 54 ++++++++++++-------
 1 file changed, 34 insertions(+), 20 deletions(-)

diff --git a/widgets/cmsblock/src/components/CmsBlockModes.tsx b/widgets/cmsblock/src/components/CmsBlockModes.tsx
index dca0254e..bb82776f 100644
--- a/widgets/cmsblock/src/components/CmsBlockModes.tsx
+++ b/widgets/cmsblock/src/components/CmsBlockModes.tsx
@@ -27,30 +27,44 @@ export const CmsBlockFeedback = ({controller}: Props) => (
     </>
 );
 
-export const CmsBlockEditMode = ({controller}: Props) => {
-    const {record, busy, changed, showSourcePreview, draft} = controller;
+const CmsBlockEditActions = ({controller}: Props) => {
+    const {record, busy, changed, showSourcePreview} = controller;
+    const saveDisabled = busy || (!changed && Boolean(record));
+    const generateDisabled = busy || !record || changed;
     return (
-        <>
-            <CmsBlockEditor controller={controller} />
-            <div className="cmsblock-editor__actions">
-                <button type="button" disabled={busy || (!changed && Boolean(record))}
-                    onClick={() => { void controller.save(); }}>Save source</button>
-                <button type="button" disabled={busy || !record || changed}
-                    onClick={() => { void controller.generate(); }}>Generate draft</button>
-                <button type="button" disabled={busy || !changed}
-                    onClick={controller.reset}>Reset changes</button>
-                <button type="button" disabled={busy} onClick={() =>
-                    controller.setShowSourcePreview(!showSourcePreview)}>
-                    {showSourcePreview ? 'Hide source preview' : 'Inspect source'}
-                </button>
-                <span>{changed ? 'Unsaved working copy' : 'Changes saved'}</span>
-            </div>
-            {showSourcePreview && <CmsBlockSourcePreview draft={draft} />}
-            {record?.published && <p>Published revision {record.published.revision} remains live while editing.</p>}
-        </>
+        <div className="cmsblock-editor__actions">
+            <button type="button" disabled={saveDisabled}
+                onClick={() => { void controller.save(); }}>Save source</button>
+            <button type="button" disabled={generateDisabled}
+                onClick={() => { void controller.generate(); }}>Generate draft</button>
+            <button type="button" disabled={busy || !changed}
+                onClick={controller.reset}>Reset changes</button>
+            <button type="button" disabled={busy} onClick={() =>
+                controller.setShowSourcePreview(!showSourcePreview)}>
+                {showSourcePreview ? 'Hide source preview' : 'Inspect source'}
+            </button>
+            <span>{changed ? 'Unsaved working copy' : 'Changes saved'}</span>
+        </div>
     );
 };
 
+const CmsBlockEditPreviews = ({controller}: Props) => (
+    <>
+        {controller.showSourcePreview && <CmsBlockSourcePreview draft={controller.draft} />}
+        {controller.record?.published && <p>
+            Published revision {controller.record.published.revision} remains live while editing.
+        </p>}
+    </>
+);
+
+export const CmsBlockEditMode = ({controller}: Props) => (
+    <>
+        <CmsBlockEditor controller={controller} />
+        <CmsBlockEditActions controller={controller} />
+        <CmsBlockEditPreviews controller={controller} />
+    </>
+);
+
 export const CmsBlockReviewMode = ({controller}: Props) => {
     const {record, busy} = controller;
     if (!record?.pending) return null;

From fb646af0e789459b53b35d46d5560843a806d62d Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 19:48:09 +0200
Subject: [PATCH 12/28] fix(cmsblock): track independent image placement in
 editor draft

---
 widgets/cmsblock/src/ConfigSchema.ts          |  2 ++
 widgets/cmsblock/src/Model/CmsBlock.ts        |  7 +++++
 .../src/controller/useCmsBlockController.ts   | 26 +++++++++++++------
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/widgets/cmsblock/src/ConfigSchema.ts b/widgets/cmsblock/src/ConfigSchema.ts
index 6f874c20..ab15745e 100644
--- a/widgets/cmsblock/src/ConfigSchema.ts
+++ b/widgets/cmsblock/src/ConfigSchema.ts
@@ -9,6 +9,8 @@ const WidgetDataSchema = z.object({
     title: z.string().min(1),
     source: WidgetSourceSchema.default({format: 'text', content: ''}),
     templateId: z.enum(['editorial', 'feature', 'promotion']).default('editorial'),
+    // Optional for existing widget contracts.
+    layoutId: z.enum(['image-above', 'image-left', 'image-right']).optional(),
 }).strict();
 
 const WidgetSettingsSchema = z.object({
diff --git a/widgets/cmsblock/src/Model/CmsBlock.ts b/widgets/cmsblock/src/Model/CmsBlock.ts
index f74efba7..fc6e57b8 100644
--- a/widgets/cmsblock/src/Model/CmsBlock.ts
+++ b/widgets/cmsblock/src/Model/CmsBlock.ts
@@ -16,8 +16,15 @@ export const CMS_BLOCK_STYLES = [
 ] as const;
 
 export type CmsBlockTemplateId = (typeof CMS_BLOCK_STYLES)[number]['id'];
+import type {CmsBlockLayoutId} from './CmsBlockLayout.ts';
+
+/** Existing saved blocks had an implied image arrangement based on style. */
+export function legacyLayoutForTemplate(id: CmsBlockTemplateId): CmsBlockLayoutId {
+    return id === 'feature' ? 'image-left' : id === 'promotion' ? 'image-right' : 'image-above';
+}
 
 export type CmsBlockDraft = {
     source: CmsBlockSource;
     templateId: CmsBlockTemplateId;
+    layoutId: CmsBlockLayoutId;
 };
diff --git a/widgets/cmsblock/src/controller/useCmsBlockController.ts b/widgets/cmsblock/src/controller/useCmsBlockController.ts
index de6a9909..2b4d5e93 100644
--- a/widgets/cmsblock/src/controller/useCmsBlockController.ts
+++ b/widgets/cmsblock/src/controller/useCmsBlockController.ts
@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react';
 import type {WidgetConfig} from '../Config.ts';
-import type {CmsBlockDraft, CmsBlockTemplateId} from '../Model/CmsBlock.ts';
+import {legacyLayoutForTemplate, type CmsBlockDraft, type CmsBlockTemplateId} from '../Model/CmsBlock.ts';
 import type {CmsBlockLayoutId} from '../Model/CmsBlockLayout.ts';
 import {CmsBlockApi, type CmsBlockRecord} from '../Model/CmsBlockApi.ts';
 
@@ -8,6 +8,7 @@ export function useCmsBlockController(config: WidgetConfig) {
     const initialDraft = (): CmsBlockDraft => ({
         source: {...config.data.source},
         templateId: config.data.templateId,
+        layoutId: config.data.layoutId ?? legacyLayoutForTemplate(config.data.templateId),
     });
 
     const [draft, setDraft] = useState<CmsBlockDraft>(initialDraft);
@@ -19,8 +20,6 @@ export function useCmsBlockController(config: WidgetConfig) {
     const [message, setMessage] = useState('');
     const [mode, setMode] = useState<'edit' | 'review' | 'view'>('edit');
     const [showSourcePreview, setShowSourcePreview] = useState(false);
-    // Local-only preview. Deliberately excluded from CmsBlockDraft and save().
-    const [layoutId, setLayoutId] = useState<CmsBlockLayoutId>('image-above');
 
     useEffect(() => {
         let active = true;
@@ -28,8 +27,13 @@ export function useCmsBlockController(config: WidgetConfig) {
             .then(found => {
                 if (!active || !found) return;
                 setRecord(found);
-                setSavedDraft({source: found.source, templateId: found.templateId});
-                setDraft({source: found.source, templateId: found.templateId});
+                const saved = {
+                    source: found.source,
+                    templateId: found.templateId,
+                    layoutId: found.layoutId ?? legacyLayoutForTemplate(found.templateId),
+                };
+                setSavedDraft(saved);
+                setDraft(saved);
                 if (found.pending) setMode('review');
                 else if (found.published) setMode('view');
             })
@@ -49,6 +53,9 @@ export function useCmsBlockController(config: WidgetConfig) {
     const updateTemplate = (templateId: CmsBlockTemplateId) => setDraft(current => ({
         ...current, templateId,
     }));
+    const updateLayout = (layoutId: CmsBlockLayoutId) => setDraft(current => ({
+        ...current, layoutId,
+    }));
     const reset = () => setDraft({...savedDraft, source: {...savedDraft.source}});
 
     const execute = async (operation: () => Promise<CmsBlockRecord | null>, success: string) => {
@@ -76,7 +83,11 @@ export function useCmsBlockController(config: WidgetConfig) {
         }
         const next = await execute(() => CmsBlockApi.save(draft), 'Source and template saved.');
         if (next) {
-            setSavedDraft({source: next.source, templateId: next.templateId});
+            setSavedDraft({
+                source: next.source,
+                templateId: next.templateId,
+                layoutId: next.layoutId ?? legacyLayoutForTemplate(next.templateId),
+            });
             setMode('edit');
         }
     };
@@ -98,9 +109,8 @@ export function useCmsBlockController(config: WidgetConfig) {
 
     return {
         draft, record, changed, busy, loading, error, message, mode, setMode,
-        layoutId, setLayoutId,
         showSourcePreview, setShowSourcePreview,
-        updateContent, updateFormat, updateTemplate, reset, save, generate, approve, reject,
+        updateContent, updateFormat, updateTemplate, updateLayout, reset, save, generate, approve, reject,
     };
 }
 

From 8e1373866ac9709accc3d723122f082253017c2a Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 19:48:59 +0200
Subject: [PATCH 13/28] fix(cmsblock): generate layouts independently of
 editorial style

---
 services/cmsblock/src/generator.mjs           | 27 +++++++++++--------
 services/cmsblock/src/store.mjs               |  7 ++++-
 widgets/cmsblock/src/Model/CmsBlockApi.ts     |  3 ++-
 .../src/components/CmsBlockLayoutPicker.tsx   | 13 +++------
 4 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/services/cmsblock/src/generator.mjs b/services/cmsblock/src/generator.mjs
index 68a3660a..6f8ab67d 100644
--- a/services/cmsblock/src/generator.mjs
+++ b/services/cmsblock/src/generator.mjs
@@ -7,6 +7,9 @@ const templates = {
     promotion: {background: '#1D2C39', foreground: '#FFFFFF', accent: '#F2B65C'},
 };
 
+const layouts = new Set(['image-above', 'image-left', 'image-right']);
+const legacyLayouts = {editorial: 'image-above', feature: 'image-left', promotion: 'image-right'};
+
 export function validateDraft(value) {
     if (!value || typeof value !== 'object' ||
         !value.source || typeof value.source !== 'object' ||
@@ -14,12 +17,14 @@ export function validateDraft(value) {
         typeof value.source.content !== 'string' ||
         value.source.content.trim().length === 0 ||
         value.source.content.length > 100_000 ||
-        !Object.hasOwn(templates, value.templateId)) {
+        !Object.hasOwn(templates, value.templateId) ||
+        (value.layoutId !== undefined && !layouts.has(value.layoutId))) {
         throw new Error('Provide content (up to 100,000 characters) and a valid template.');
     }
     return {
         source: {format: value.source.format, content: value.source.content},
         templateId: value.templateId,
+        layoutId: value.layoutId ?? legacyLayouts[value.templateId],
     };
 }
 
@@ -60,7 +65,7 @@ function extractImages(source) {
 }
 
 export function generateBlock(draft) {
-    const {source, templateId} = validateDraft(draft);
+    const {source, templateId, layoutId} = validateDraft(draft);
     const palette = templates[templateId];
     const lines = extractText(source).split(/\n+/).map(x => x.trim()).filter(Boolean);
     const heading = escapeHtml(lines.shift() ?? 'Content block');
@@ -68,7 +73,7 @@ export function generateBlock(draft) {
     const images = extractImages(source);
     const gallery = images.length ? `<figure class="cmsblock-media">${images.join('')}</figure>` : '';
     // The data attribute is the boundary for generated CSS on standard DOM.
-    const html = `<section data-cmsblock="demo" class="cmsblock-content cmsblock--${templateId}">
+    const html = `<section data-cmsblock="demo" class="cmsblock-content cmsblock--${templateId} cmsblock-layout--${layoutId}">
   <div class="cmsblock-copy"><h2>${heading}</h2>${paragraphs}</div>
   ${gallery}
 </section>`;
@@ -83,19 +88,19 @@ export function generateBlock(draft) {
 [data-cmsblock="demo"] p { max-width: 68ch; margin: 0 0 0.85rem; line-height: 1.7; overflow-wrap: anywhere; }
 [data-cmsblock="demo"] .cmsblock-media { margin: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
 [data-cmsblock="demo"] img { display: block; width: 100%; max-width: 100%; height: auto; max-height: 360px; border-radius: 0.75rem; object-fit: cover; }
-[data-cmsblock="demo"].cmsblock--editorial .cmsblock-media { grid-row: 1; }
-[data-cmsblock="demo"].cmsblock--editorial .cmsblock-copy { grid-row: 2; }
+[data-cmsblock="demo"].cmsblock-layout--image-above .cmsblock-media { grid-row: 1; }
+[data-cmsblock="demo"].cmsblock-layout--image-above .cmsblock-copy { grid-row: 2; }
 [data-cmsblock="demo"].cmsblock--promotion h2 { font-weight: 800; text-transform: uppercase; }
 [data-cmsblock="demo"].cmsblock--promotion p { color: #E2E8F0; }
 @media (min-width: 800px) {
-  [data-cmsblock="demo"].cmsblock--feature:has(.cmsblock-media),
-  [data-cmsblock="demo"].cmsblock--promotion:has(.cmsblock-media) {
+  [data-cmsblock="demo"].cmsblock-layout--image-left:has(.cmsblock-media),
+  [data-cmsblock="demo"].cmsblock-layout--image-right:has(.cmsblock-media) {
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
   }
-  [data-cmsblock="demo"].cmsblock--feature .cmsblock-media { grid-column: 1; grid-row: 1; }
-  [data-cmsblock="demo"].cmsblock--feature .cmsblock-copy { grid-column: 2; grid-row: 1; }
-  [data-cmsblock="demo"].cmsblock--promotion .cmsblock-copy { grid-column: 1; grid-row: 1; }
-  [data-cmsblock="demo"].cmsblock--promotion .cmsblock-media { grid-column: 2; grid-row: 1; }
+  [data-cmsblock="demo"].cmsblock-layout--image-left .cmsblock-media { grid-column: 1; grid-row: 1; }
+  [data-cmsblock="demo"].cmsblock-layout--image-left .cmsblock-copy { grid-column: 2; grid-row: 1; }
+  [data-cmsblock="demo"].cmsblock-layout--image-right .cmsblock-copy { grid-column: 1; grid-row: 1; }
+  [data-cmsblock="demo"].cmsblock-layout--image-right .cmsblock-media { grid-column: 2; grid-row: 1; }
 }`;
     return {html, css};
 }
diff --git a/services/cmsblock/src/store.mjs b/services/cmsblock/src/store.mjs
index 34064781..02dc81c2 100644
--- a/services/cmsblock/src/store.mjs
+++ b/services/cmsblock/src/store.mjs
@@ -61,7 +61,12 @@ export class CmsBlockStore {
             return {
                 ...current,
                 revision,
-                pending: {...generateBlock(current), templateId: current.templateId, revision, status: 'inreview'},
+                pending: {
+                    ...generateBlock(current),
+                    templateId: current.templateId,
+                    layoutId: current.layoutId ?? ({editorial: 'image-above', feature: 'image-left', promotion: 'image-right'})[current.templateId],
+                    revision, status: 'inreview',
+                },
             };
         });
     }
diff --git a/widgets/cmsblock/src/Model/CmsBlockApi.ts b/widgets/cmsblock/src/Model/CmsBlockApi.ts
index 9a43bda6..84214169 100644
--- a/widgets/cmsblock/src/Model/CmsBlockApi.ts
+++ b/widgets/cmsblock/src/Model/CmsBlockApi.ts
@@ -5,7 +5,8 @@ export interface CmsBlockRevision {
     css: string;
     revision: number;
     status: 'inreview' | 'approved';
-}
+    layoutId?: CmsBlockDraft['layoutId'];
+
 
 export interface CmsBlockRecord extends CmsBlockDraft {
     id: 'demo';
diff --git a/widgets/cmsblock/src/components/CmsBlockLayoutPicker.tsx b/widgets/cmsblock/src/components/CmsBlockLayoutPicker.tsx
index 95307633..dde4454c 100644
--- a/widgets/cmsblock/src/components/CmsBlockLayoutPicker.tsx
+++ b/widgets/cmsblock/src/components/CmsBlockLayoutPicker.tsx
@@ -4,12 +4,8 @@ import type {CmsBlockController} from '../controller/useCmsBlockController.ts';
 
 type Props = {controller: CmsBlockController};
 
-/**
- * Image arrangement is preview-only. The backend must gain an independent
- * layoutId before this selection can affect generation or be persisted.
- */
 export const CmsBlockLayoutPicker = ({controller}: Props) => {
-    const selectedLayout = CMS_BLOCK_LAYOUTS.find(layout => layout.id === controller.layoutId)
+    const selectedLayout = CMS_BLOCK_LAYOUTS.find(layout => layout.id === controller.draft.layoutId)
         ?? CMS_BLOCK_LAYOUTS[0];
 
     return (
@@ -18,7 +14,7 @@ export const CmsBlockLayoutPicker = ({controller}: Props) => {
             <p>Select where the content image should appear.</p>
             <div className="cmsblock-editor__reference-list">
                 {CMS_BLOCK_LAYOUTS.map(layout => {
-                    const selected = controller.layoutId === layout.id;
+                    const selected = controller.draft.layoutId === layout.id;
                     return (
                         <button
                             type="button"
@@ -27,7 +23,7 @@ export const CmsBlockLayoutPicker = ({controller}: Props) => {
                             data-layout-id={layout.id}
                             aria-label={`Use ${layout.label} layout`}
                             aria-pressed={selected}
-                            onClick={() => controller.setLayoutId(layout.id)}
+                            onClick={() => controller.updateLayout(layout.id)}
                         >
                             <span className="cmsblock-editor__reference-image">
                                 <img src={CMS_BLOCK_LAYOUT_IMAGES[layout.id]}
@@ -49,8 +45,7 @@ export const CmsBlockLayoutPicker = ({controller}: Props) => {
                     <h2 aria-live="polite">{selectedLayout.label}</h2>
                     <p>{selectedLayout.description}</p>
                     <p className="cmsblock-editor__layout-notice">
-                        Layout selection is a UI preview only. It is not saved or used by
-                        the current generator yet; generated layout still follows the saved style.
+                        Your layout is saved independently and applied to the next generated revision.
                     </p>
                 </div>
             </div>

From 111534e4a30946f83b40510087938b97d01745a5 Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 19:49:43 +0200
Subject: [PATCH 14/28] test(cmsblock): cover persisted layout and independent
 generated arrangements

---
 services/cmsblock/test/flow.test.mjs    | 18 ++++++++++++++++-
 widgets/cmsblock/tests/cmsblock.spec.ts | 26 +++++++++++++++++++------
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/services/cmsblock/test/flow.test.mjs b/services/cmsblock/test/flow.test.mjs
index eb8e26e7..35c225a4 100644
--- a/services/cmsblock/test/flow.test.mjs
+++ b/services/cmsblock/test/flow.test.mjs
@@ -22,11 +22,13 @@ test('persist, generate, review, approve, reload and regenerate while published
         };
 
         assert.equal((await request('', 'GET')).status, 404);
-        assert.equal((await request('', 'PUT', draft)).data.templateId, 'feature');
+        assert.equal((await request('', 'PUT', {...draft, layoutId: 'image-right'})).data.layoutId, 'image-right');
 
         const generated = (await request('/generate', 'POST')).data;
         assert.equal(generated.pending.status, 'inreview');
         assert.equal(generated.pending.templateId, 'feature');
+        assert.equal(generated.pending.layoutId, 'image-right');
+        assert.match(generated.pending.html, /cmsblock-layout--image-right/);
         assert.match(generated.pending.html, /Welcome/);
         assert.doesNotMatch(generated.pending.html, /<script/i);
         assert.match(generated.pending.css, /data-cmsblock="demo"/);
@@ -42,6 +44,7 @@ test('persist, generate, review, approve, reload and regenerate while published
         const regeneration = (await request('/generate', 'POST')).data;
         assert.equal(regeneration.pending.revision, 2);
         assert.equal(regeneration.pending.templateId, 'promotion');
+        assert.equal(regeneration.pending.layoutId, 'image-right');
         assert.equal(regeneration.published.templateId, 'feature');
         assert.equal(regeneration.published.revision, 1);
         await request('/reject', 'POST');
@@ -82,3 +85,16 @@ test('three image references map to distinct responsive layouts', async () => {
     assert.notEqual(editorial.css, feature.css);
     assert.notEqual(feature.css, promotion.css);
 });
+
+test('style and layout are independent and old records keep previous placement', async () => {
+    const {generateBlock, validateDraft} = await import('../src/generator.mjs');
+    const source = {format: 'html', content: '<h2>Art</h2><p>Original work</p><img src="https://example.com/art.jpg" alt="Artwork">'};
+    const editorialLeft = generateBlock({source, templateId: 'editorial', layoutId: 'image-left'});
+    const promotionalLeft = generateBlock({source, templateId: 'promotion', layoutId: 'image-left'});
+    assert.match(editorialLeft.html, /cmsblock-layout--image-left/);
+    assert.match(promotionalLeft.html, /cmsblock-layout--image-left/);
+    assert.match(editorialLeft.css, /cmsblock-layout--image-left \.cmsblock-media/);
+    assert.notEqual(editorialLeft.css, promotionalLeft.css);
+    assert.equal(validateDraft({source, templateId: 'feature'}).layoutId, 'image-left');
+    assert.throws(() => validateDraft({source, templateId: 'feature', layoutId: 'invalid'}));
+});
diff --git a/widgets/cmsblock/tests/cmsblock.spec.ts b/widgets/cmsblock/tests/cmsblock.spec.ts
index 5709bb87..17924b20 100644
--- a/widgets/cmsblock/tests/cmsblock.spec.ts
+++ b/widgets/cmsblock/tests/cmsblock.spec.ts
@@ -25,7 +25,7 @@ test.describe('CMSBlock E2E workflow', () => {
         await expect(widget.getByRole('heading', {name: /Published revision/})).toBeVisible();
     });
 
-    test('keeps editorial style separate from the layout preview', async ({page}) => {
+    test('keeps editorial style separate from the image layout', async ({page}) => {
         const widget = page.locator('cmsblock-widget');
         await widget.getByRole('button', {name: 'Edit', exact: true}).click();
         await expect(widget.locator('.cmsblock-editor__style')).toHaveCount(3);
@@ -40,10 +40,10 @@ test.describe('CMSBlock E2E workflow', () => {
         await expect(widget.getByRole('button', {name: 'Use Promotional style'})).toHaveAttribute('aria-pressed', 'true');
         await expect(widget.getByRole('button', {name: 'Use Image left layout'})).toHaveAttribute('aria-pressed', 'true');
         await expect(widget.locator('.cmsblock-editor__reference-selected')).toHaveCount(1);
-        await expect(widget.getByText(/Layout selection is a UI preview only/)).toBeVisible();
+        await expect(widget.getByText(/Your layout is saved independently/)).toBeVisible();
     });
 
-    test('saves editorial style but does not submit the preview-only layout', async ({page}) => {
+    test('saves editorial style and image layout independently', async ({page}) => {
         const widget = page.locator('cmsblock-widget');
         await widget.getByRole('button', {name: 'Edit', exact: true}).click();
         await widget.getByLabel('Source content').fill('Choose a style and inspect the image arrangement');
@@ -56,21 +56,35 @@ test.describe('CMSBlock E2E workflow', () => {
         const request = await saveRequest;
         const payload = request.postDataJSON() as {templateId: string; layoutId?: string};
         expect(payload.templateId).toBe('promotion');
-        expect(payload).not.toHaveProperty('layoutId');
+        expect(payload.layoutId).toBe('image-right');
         await expect(widget.getByText('Source and template saved.')).toBeVisible();
 
         await page.reload();
         await widget.getByRole('button', {name: 'Edit', exact: true}).click();
         await expect(widget.getByRole('button', {name: 'Use Promotional style'})).toHaveAttribute('aria-pressed', 'true');
-        await expect(widget.getByRole('button', {name: 'Use Image above layout'})).toHaveAttribute('aria-pressed', 'true');
+        await expect(widget.getByRole('button', {name: 'Use Image right layout'})).toHaveAttribute('aria-pressed', 'true');
     });
 
-    test('changing the layout preview does not mark saved source as changed', async ({page}) => {
+    test('changing the image layout marks the source as unsaved', async ({page}) => {
         const widget = page.locator('cmsblock-widget');
         await widget.getByRole('button', {name: 'Edit', exact: true}).click();
         await widget.getByRole('button', {name: 'Use Image right layout'}).click();
         await expect(widget.getByRole('img', {name: 'Large preview of Image right layout'})).toBeVisible();
         await expect(widget.getByRole('button', {name: 'Use Image right layout'})).toHaveAttribute('aria-pressed', 'true');
         await expect(widget.locator('.cmsblock-editor__reference-selected')).toHaveCount(1);
+        await expect(widget.getByRole('button', {name: 'Reset changes'})).toBeEnabled();
+    });
+
+    test('generated CSS follows image layout rather than editorial style', async ({page}) => {
+        const widget = page.locator('cmsblock-widget');
+        await widget.getByRole('button', {name: 'Edit', exact: true}).click();
+        await widget.getByLabel('Content format').selectOption('html');
+        await widget.getByLabel('Source content').fill('<h2>Gallery</h2><p>Art</p><img src="https://example.com/art.jpg" alt="Art">');
+        await widget.getByRole('button', {name: 'Use Editorial style'}).click();
+        await widget.getByRole('button', {name: 'Use Image right layout'}).click();
+        await widget.getByRole('button', {name: 'Save source'}).click();
+        await expect(widget.getByText('Source and template saved.')).toBeVisible();
+        await widget.getByRole('button', {name: 'Generate draft'}).click();
+        await expect(widget.frameLocator('iframe[title="Generated CMSBlock draft"]').locator('.cmsblock-layout--image-right')).toHaveCount(1);
     });
 });

From 4b2d966fb454a6e63af7c444141afb992bfe5ded Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 19:50:16 +0200
Subject: [PATCH 15/28] test(cmsblock): update legacy layout assertions to
 independent layout classes

---
 services/cmsblock/test/flow.test.mjs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/services/cmsblock/test/flow.test.mjs b/services/cmsblock/test/flow.test.mjs
index 35c225a4..232fc66d 100644
--- a/services/cmsblock/test/flow.test.mjs
+++ b/services/cmsblock/test/flow.test.mjs
@@ -79,9 +79,9 @@ test('three image references map to distinct responsive layouts', async () => {
         assert.match(output.html, /https:\/\/example.com\/image.jpg/);
         assert.match(output.css, /@media \(min-width: 800px\)/);
     }
-    assert.match(editorial.css, /cmsblock--editorial \.cmsblock-media \{ grid-row: 1;/);
-    assert.match(feature.css, /cmsblock--feature \.cmsblock-media \{ grid-column: 1;/);
-    assert.match(promotion.css, /cmsblock--promotion \.cmsblock-media \{ grid-column: 2;/);
+    assert.match(editorial.css, /cmsblock-layout--image-above \.cmsblock-media \{ grid-row: 1;/);
+    assert.match(feature.css, /cmsblock-layout--image-left \.cmsblock-media \{ grid-column: 1;/);
+    assert.match(promotion.css, /cmsblock-layout--image-right \.cmsblock-media \{ grid-column: 2;/);
     assert.notEqual(editorial.css, feature.css);
     assert.notEqual(feature.css, promotion.css);
 });

From dc761c5ac9b05715ef218ef361b5f58245243000 Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 19:54:14 +0200
Subject: [PATCH 16/28] fix(cmsblock): close CmsBlockRevision interface

---
 widgets/cmsblock/src/Model/CmsBlockApi.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/widgets/cmsblock/src/Model/CmsBlockApi.ts b/widgets/cmsblock/src/Model/CmsBlockApi.ts
index 84214169..4db307c5 100644
--- a/widgets/cmsblock/src/Model/CmsBlockApi.ts
+++ b/widgets/cmsblock/src/Model/CmsBlockApi.ts
@@ -6,7 +6,7 @@ export interface CmsBlockRevision {
     revision: number;
     status: 'inreview' | 'approved';
     layoutId?: CmsBlockDraft['layoutId'];
-
+}
 
 export interface CmsBlockRecord extends CmsBlockDraft {
     id: 'demo';

From adad7e4067a8d94c71cda01717bac65c791bb6c7 Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 19:59:53 +0200
Subject: [PATCH 17/28] build: centralize widget Lizard checks behind mise
 complexity task

---
 .github/workflows/cmsblock-complexity.yml | 14 ++++-----
 launcher/scripts/widget-complexity.sh     | 38 +++++++++++++++++++++++
 mise.toml                                 |  5 +++
 widgets/cmsblock/README.md                | 34 +++++++++-----------
 widgets/cmsblock/package.json             |  3 +-
 5 files changed, 65 insertions(+), 29 deletions(-)
 create mode 100755 launcher/scripts/widget-complexity.sh

diff --git a/.github/workflows/cmsblock-complexity.yml b/.github/workflows/cmsblock-complexity.yml
index 3f3217d1..375c379e 100644
--- a/.github/workflows/cmsblock-complexity.yml
+++ b/.github/workflows/cmsblock-complexity.yml
@@ -7,6 +7,8 @@ on:
     paths:
       - 'widgets/cmsblock/**'
       - '.github/workflows/cmsblock-complexity.yml'
+      - 'mise.toml'
+      - 'launcher/scripts/widget-complexity.sh'
   pull_request:
     paths:
       - 'widgets/cmsblock/**'
@@ -20,13 +22,9 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Set up Python
-        uses: actions/setup-python@v5
+      - name: Set up mise
+        uses: jdx/mise-action@v4
         with:
-          python-version: '3.12'
-      - name: Install Lizard
-        run: python -m pip install lizard==1.24.1
+          install: false
       - name: Analyze CMSBlock source and widget API
-        run: |
-          cd widgets/cmsblock
-          lizard src api -C 10 -a 5
+        run: mise run complexity -- cmsblock
diff --git a/launcher/scripts/widget-complexity.sh b/launcher/scripts/widget-complexity.sh
new file mode 100755
index 00000000..fa6c7661
--- /dev/null
+++ b/launcher/scripts/widget-complexity.sh
@@ -0,0 +1,38 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+# Run from the platform root, independently of the caller's working directory.
+root="$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")/../.." && pwd)"
+widget="${1:-}"
+
+if [[ ! "$widget" =~ ^[a-z][a-z0-9_-]*$ ]]; then
+    echo "Usage: mise run complexity -- <widget>" >&2
+    echo "Widget must be a single name such as cmsblock or productgallery." >&2
+    exit 2
+fi
+
+widget_dir="$root/widgets/$widget"
+if [[ ! -d "$widget_dir" ]]; then
+    echo "Unknown widget '$widget': $widget_dir does not exist." >&2
+    exit 2
+fi
+
+targets=()
+for directory in src api; do
+    if [[ -d "$widget_dir/$directory" ]]; then
+        targets+=("$directory")
+    fi
+done
+
+if [[ ${#targets[@]} -eq 0 ]]; then
+    echo "Widget '$widget' has neither src nor api to analyze." >&2
+    exit 2
+fi
+
+if ! command -v lizard >/dev/null 2>&1; then
+    echo "Lizard not found. Run this check through mise to install the pinned tool." >&2
+    exit 2
+fi
+
+cd "$widget_dir"
+exec lizard "${targets[@]}" -C 10 -a 5
diff --git a/mise.toml b/mise.toml
index 65ae3c56..3ebb9ebd 100644
--- a/mise.toml
+++ b/mise.toml
@@ -45,3 +45,8 @@ run = "./launcher/scripts/widgets-deploy.sh"
 [tasks."widgets-test"]
 description = "Test the ReactEdge deployed widgets"
 run = "./launcher/scripts/widgets-test.sh"
+
+[tasks.complexity]
+description = "Check Lizard complexity for one widget: mise run complexity -- <widget>"
+tools = {uv = "latest", "pipx:lizard" = "1.24.1"}
+run = "./launcher/scripts/widget-complexity.sh {{arg(name='widget', required=true)}}"
diff --git a/widgets/cmsblock/README.md b/widgets/cmsblock/README.md
index 4cb2f092..410216a9 100644
--- a/widgets/cmsblock/README.md
+++ b/widgets/cmsblock/README.md
@@ -1,29 +1,25 @@
 # CMSBlock complexity
 
-Use [Lizard](https://github.com/terryyin/lizard) to keep TypeScript/TSX
-function complexity low in the CMSBlock widget (service and AI generator are
-explicitly outside this check).
-
-Install once:
+Complexity analysis is shared by all ReactEdge widgets via a root-level
+[mise](https://mise.jdx.dev/) task. Run from the platform root:
 
 ```bash
-python -m pip install lizard==1.24.1
+mise run complexity -- cmsblock
 ```
 
-From the ReactEdge platform root, run:
-
-```bash
-npm run complexity --prefix widgets/cmsblock
-```
+Replace `cmsblock` with any directory name under `widgets/`. The task uses
+a pinned Lizard **1.24.1** CLI, installed automatically by mise through the
+task-specific `uv`/Python environment. There is no per-widget npm complexity
+script and no separate Python package installation to maintain.
 
-The script checks only `widgets/cmsblock/src` and `widgets/cmsblock/api`:
+The launcher analyzes whichever of `src` and `api` exist under the widget:
 
-- Cyclomatic complexity (CCN) must not exceed **10** per function.
-- Parameter count must not exceed **5** per function.
+- Cyclomatic complexity (CCN): maximum **10** per function.
+- Parameter count: maximum **5** per function.
 
-Lizard reports function NLOC and token counts as well. Review unusually long
-functions for separation of responsibilities even if their CCN is low.
-For TSX, length metrics can include markup and should be interpreted accordingly.
+Lizard also reports function NLOC and tokens. Investigate unusually long
+functions even if their cyclomatic complexity is acceptable.
 
-The GitHub Actions workflow `cmsblock-complexity.yml` runs the same
-command on relevant changes. No service code or generation logic is affected.
+The `cmsblock-complexity.yml` GitHub Actions workflow runs the same command
+on CMSBlock-related changes. The CMSBlock service and AI generator are not
+included.
diff --git a/widgets/cmsblock/package.json b/widgets/cmsblock/package.json
index f881b42b..2ea24f74 100644
--- a/widgets/cmsblock/package.json
+++ b/widgets/cmsblock/package.json
@@ -9,8 +9,7 @@
     "build:ssr": "vite build -c vite.npm.config.ts",
     "analyze": "ANALYZE=true vite build",
     "lint": "eslint .",
-    "preview": "vite preview",
-    "complexity": "lizard src api -C 10 -a 5"
+    "preview": "vite preview"
   },
   "dependencies": {
     "zod": "^4.4.3"

From fce2057303430201a0c3a8999a0be48be4de98f2 Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 20:08:39 +0200
Subject: [PATCH 18/28] refactor(cmsblock): seed typed server scaffold
 configuration and access layer

---
 services/cmsblock/.env.sample              |  5 +++++
 services/cmsblock/src/access/index.ts      |  6 ++++++
 services/cmsblock/src/access/jsonParser.ts |  6 ++++++
 services/cmsblock/src/config.ts            | 19 +++++++++++++++++++
 services/cmsblock/tsconfig.json            | 13 +++++++++++++
 5 files changed, 49 insertions(+)
 create mode 100644 services/cmsblock/.env.sample
 create mode 100644 services/cmsblock/src/access/index.ts
 create mode 100644 services/cmsblock/src/access/jsonParser.ts
 create mode 100644 services/cmsblock/src/config.ts
 create mode 100644 services/cmsblock/tsconfig.json

diff --git a/services/cmsblock/.env.sample b/services/cmsblock/.env.sample
new file mode 100644
index 00000000..273ec3f2
--- /dev/null
+++ b/services/cmsblock/.env.sample
@@ -0,0 +1,5 @@
+PORT=4190
+FRONTEND_URL=http://localhost:5173,http://127.0.0.1:5173,http://localhost:3001,http://127.0.0.1:3001
+# CMSBLOCK_DATA_DIR=/absolute/path/to/cmsblock/data
+OTEL_HOST=http://localhost:4318
+OTEL_SERVICE_NAME=reactedge-cmsblock
diff --git a/services/cmsblock/src/access/index.ts b/services/cmsblock/src/access/index.ts
new file mode 100644
index 00000000..979daf98
--- /dev/null
+++ b/services/cmsblock/src/access/index.ts
@@ -0,0 +1,6 @@
+import type {Application} from 'express';
+import {setupJsonBodyParse} from './jsonParser';
+
+export default function setupAccess(app: Application): void {
+    setupJsonBodyParse(app);
+}
diff --git a/services/cmsblock/src/access/jsonParser.ts b/services/cmsblock/src/access/jsonParser.ts
new file mode 100644
index 00000000..85202353
--- /dev/null
+++ b/services/cmsblock/src/access/jsonParser.ts
@@ -0,0 +1,6 @@
+import express from 'express';
+import type {Application} from 'express';
+
+export function setupJsonBodyParse(app: Application): void {
+    app.use(express.json({limit: '120kb'}));
+}
diff --git a/services/cmsblock/src/config.ts b/services/cmsblock/src/config.ts
new file mode 100644
index 00000000..a6531c9f
--- /dev/null
+++ b/services/cmsblock/src/config.ts
@@ -0,0 +1,19 @@
+import dotenv from 'dotenv';
+import {resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+dotenv.config({quiet: true});
+
+export const config = {
+    port: Number(process.env.PORT ?? '4190'),
+    host: '127.0.0.1',
+    frontendUrl: process.env.FRONTEND_URL ??
+        'http://localhost:5173,http://127.0.0.1:5173,http://localhost:3001,http://127.0.0.1:3001',
+    dataDirectory: resolve(process.env.CMSBLOCK_DATA_DIR ??
+        fileURLToPath(new URL('../data/', import.meta.url))),
+    route: {servicePrefix: '/cmsblock'},
+    observability: {
+        otelHost: process.env.OTEL_HOST ?? 'http://localhost:4318',
+        serviceName: process.env.OTEL_SERVICE_NAME ?? 'reactedge-cmsblock',
+    },
+};
diff --git a/services/cmsblock/tsconfig.json b/services/cmsblock/tsconfig.json
new file mode 100644
index 00000000..573d7e19
--- /dev/null
+++ b/services/cmsblock/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "test/**/*.ts"]
+}

From 416143a2310f95c7f0bc3e59f6291b5c35c4f35d Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <herve@digitalrisedorset.co.uk>
Date: Fri, 9 Oct 2026 19:20:07 +0100
Subject: [PATCH 19/28] Added initial express server to introduce the cms block
 API service

---
 services/cmsblock/.env.sample                 |    3 +-
 services/cmsblock/README.md                   |   47 +-
 services/cmsblock/package-lock.json           | 1960 +++++++++++++++++
 services/cmsblock/package.json                |   25 +-
 services/cmsblock/src/access/index.ts         |    8 +-
 services/cmsblock/src/access/jsonParser.ts    |   10 +-
 services/cmsblock/src/config.ts               |   31 +-
 .../cmsblock/src/controller/status-handler.ts |   18 +
 services/cmsblock/src/index.ts                |    3 +
 services/cmsblock/src/lib/cors-setup.ts       |   22 +
 .../cmsblock/src/lib/initilisers/index.ts     |   12 +
 services/cmsblock/src/lib/server.ts           |   35 +
 services/cmsblock/src/lib/url.ts              |   26 +
 .../cmsblock/src/observability/activity.ts    |   45 +
 .../cmsblock/src/observability/operation.ts   |   58 +
 .../request-operation-middleware.ts           |   32 +
 .../cmsblock/src/observability/tracing.ts     |    6 +
 services/cmsblock/src/routes/index.ts         |    6 +
 services/cmsblock/src/routes/status-router.ts |   19 +
 services/cmsblock/tsconfig.json               |    2 +-
 services/cmsblock_bak/.env.sample             |    5 +
 .../{cmsblock => cmsblock_bak}/.gitignore     |    0
 services/cmsblock_bak/README.md               |   43 +
 services/cmsblock_bak/package.json            |   12 +
 services/cmsblock_bak/src/access/index.ts     |    6 +
 .../cmsblock_bak/src/access/jsonParser.ts     |    6 +
 services/cmsblock_bak/src/config.ts           |   19 +
 .../src/generator.mjs                         |    0
 .../{cmsblock => cmsblock_bak}/src/index.mjs  |    0
 .../{cmsblock => cmsblock_bak}/src/server.mjs |    0
 .../{cmsblock => cmsblock_bak}/src/store.mjs  |    0
 .../test/flow.test.mjs                        |    0
 services/cmsblock_bak/tsconfig.json           |   13 +
 33 files changed, 2410 insertions(+), 62 deletions(-)
 create mode 100644 services/cmsblock/package-lock.json
 create mode 100644 services/cmsblock/src/controller/status-handler.ts
 create mode 100644 services/cmsblock/src/index.ts
 create mode 100644 services/cmsblock/src/lib/cors-setup.ts
 create mode 100644 services/cmsblock/src/lib/initilisers/index.ts
 create mode 100644 services/cmsblock/src/lib/server.ts
 create mode 100644 services/cmsblock/src/lib/url.ts
 create mode 100644 services/cmsblock/src/observability/activity.ts
 create mode 100644 services/cmsblock/src/observability/operation.ts
 create mode 100644 services/cmsblock/src/observability/request-operation-middleware.ts
 create mode 100644 services/cmsblock/src/observability/tracing.ts
 create mode 100644 services/cmsblock/src/routes/index.ts
 create mode 100644 services/cmsblock/src/routes/status-router.ts
 create mode 100644 services/cmsblock_bak/.env.sample
 rename services/{cmsblock => cmsblock_bak}/.gitignore (100%)
 create mode 100644 services/cmsblock_bak/README.md
 create mode 100644 services/cmsblock_bak/package.json
 create mode 100644 services/cmsblock_bak/src/access/index.ts
 create mode 100644 services/cmsblock_bak/src/access/jsonParser.ts
 create mode 100644 services/cmsblock_bak/src/config.ts
 rename services/{cmsblock => cmsblock_bak}/src/generator.mjs (100%)
 rename services/{cmsblock => cmsblock_bak}/src/index.mjs (100%)
 rename services/{cmsblock => cmsblock_bak}/src/server.mjs (100%)
 rename services/{cmsblock => cmsblock_bak}/src/store.mjs (100%)
 rename services/{cmsblock => cmsblock_bak}/test/flow.test.mjs (100%)
 create mode 100644 services/cmsblock_bak/tsconfig.json

diff --git a/services/cmsblock/.env.sample b/services/cmsblock/.env.sample
index 273ec3f2..4f75091f 100644
--- a/services/cmsblock/.env.sample
+++ b/services/cmsblock/.env.sample
@@ -1,5 +1,4 @@
 PORT=4190
-FRONTEND_URL=http://localhost:5173,http://127.0.0.1:5173,http://localhost:3001,http://127.0.0.1:3001
-# CMSBLOCK_DATA_DIR=/absolute/path/to/cmsblock/data
+FRONTEND_URL=http://localhost:3000
 OTEL_HOST=http://localhost:4318
 OTEL_SERVICE_NAME=reactedge-cmsblock
diff --git a/services/cmsblock/README.md b/services/cmsblock/README.md
index ef7e24ff..5f1bd85f 100644
--- a/services/cmsblock/README.md
+++ b/services/cmsblock/README.md
@@ -1,43 +1,20 @@
-# CMSBlock vertical slice
+# Cmsblock
 
-This is a **development-only API** for the first CMSBlock end-to-end experiment.
+Generated Express service with request-scoped OpenTelemetry tracing.
 
-It persists one hard-coded block, `demo`, into `data/demo.json` (ignored by git),
-and uses a deterministic HTML/CSS generator in place of an AI provider.
-
-From the platform root:
+## Run
 
 ```bash
-npm --prefix services/cmsblock start
-npm --prefix services/cmsblock test
-npm --prefix widgets/cmsblock dev
+cp .env.sample .env
+npm install
+npm start
 ```
 
-The widget calls `http://127.0.0.1:4190/cmsblock/blocks/demo` by default.
-Set `PORT`, `CMSBLOCK_DATA_DIR`, `FRONTEND_URL` (comma-separated CORS
-origins) for the API, or `VITE_CMSBLOCK_URL` when building the widget.
-
-Flow: edit source + choose template -> **Save** -> **Generate draft** ->
-**Review** -> **Approve** -> **View**. Source and approved output stay separate;
-generating a new draft does not replace the last approved output.
-
-**Do not expose this service on the public internet.** It deliberately has
-no authentication, rate limiting or authorisation yet. CORS is not authentication.
-Generated output is displayed inside a sandboxed iframe; a future public SSR
-publisher must validate/sanitise AI-generated HTML and CSS before emitting it
-into the ordinary document.
-
-HTML input is simplified for this experiment: it is converted to text, with
-up to three HTTPS image references retained. Complex HTML formatting is not
-preserved by the mock generator.
+Verify the example route:
 
-## Visual template references
-
-Three bundled SVG reference images replace the template dropdown:
-Editorial (image above copy), Feature (image left), Promotional (image right).
-The selection is saved using the existing `templateId` field and recorded
-in the generated revision, preserving the reference used for publication.
+```bash
+curl --fail http://localhost:4190/cmsblock/status
+```
 
-The generator does **not** analyse these images yet. It maps each reference
-ID to a hard-coded responsive layout so the full image-selection → save →
-generate → review → approve → reload flow can be verified before adding AI.
+The trace contains a `cmsblock.request` parent span and a
+`cmsblock.status` route span.
diff --git a/services/cmsblock/package-lock.json b/services/cmsblock/package-lock.json
new file mode 100644
index 00000000..0b617961
--- /dev/null
+++ b/services/cmsblock/package-lock.json
@@ -0,0 +1,1960 @@
+{
+  "name": "@reactedge/cmsblock",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "@reactedge/cmsblock",
+      "version": "0.1.0",
+      "dependencies": {
+        "@opentelemetry/api": "^1.9.1",
+        "@opentelemetry/exporter-trace-otlp-http": "^0.219.0",
+        "@opentelemetry/resources": "^2.8.0",
+        "@opentelemetry/sdk-trace-base": "^2.8.0",
+        "@opentelemetry/sdk-trace-node": "^2.8.0",
+        "cors": "^2.8.6",
+        "dotenv": "^17.4.2",
+        "express": "^5.2.1"
+      },
+      "devDependencies": {
+        "@types/cors": "^2.8.19",
+        "@types/express": "^5.0.6",
+        "@types/node": "^26.0.0",
+        "tsx": "^4.22.4",
+        "typescript": "^6.0.3"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.2.tgz",
+      "integrity": "sha512-XExcO+dvLKvVtNTibSTBej1NCAbaGhWn9Ww1ZPx80qsahhPFe/8jgWP0IchNe0F3HwkU7n8ejhH8bjonqht8mQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.2.tgz",
+      "integrity": "sha512-kXXoiPVVGQcnIYGOeaovwOURpniDBpSq4A03qkQ+BMQqtGG6HYap3xne9C1O1yo4TR3qxlCX5IqqmX6fFo2Lqg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.2.tgz",
+      "integrity": "sha512-5YfKeeI8qWfBZIX+u2xZC3Zlb3Os/gLS2sbEKM+I4ZOcsWmHS2WLysCcQZDAFRslDUU5Oiq44gf6PYN1vGwG5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.2.tgz",
+      "integrity": "sha512-O387ite7SzUyCcy3JQX4P4bLtEA7bLLkx+esve5JHnyYfNTxcVpXZo9jhdB0lTKN44gztELTdU7nS8Nr16Fs1Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.2.tgz",
+      "integrity": "sha512-n4KqkOQrraxHJcgjM1RvwbigfQKIKJVpM7xp+KsxiyUSrRdIXnt73VhrPAx0fV44hgfmIVKjxMN9J1t5jySVkw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.2.tgz",
+      "integrity": "sha512-uq6suIWYP37qzGddBKPw5QEQPi6HiLGsO7UmkpfyaYNQ3D+rN6w6WfwH+nuqcGXWvawGwxOEroO4YGnFh95azw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-n+I0BTSRIoy+d6RPKnEVwql5UwBJolytvY4mAOIEJorKlqgPII8ix6slVVrfZ5Tnj7glIZvloylbB/EJPMWEXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.2.tgz",
+      "integrity": "sha512-78XJTJkvPs0kz2w61301PJjXl4g7q3JqiYMZ/M/yVI73EHBrCRTgkhu9oqG7vPqq+a/yadEW8aD+agKlk5xrmg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.2.tgz",
+      "integrity": "sha512-XlDnu2q5yoqems+xay6wSAcg9DDD7K9RLKZEBOMZm3ckNpJBvOX20tSfby8KfrrhINDyv9V2YVZKY/SpoGJI8w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.2.tgz",
+      "integrity": "sha512-pW4AC0P3it8c7do9MVM4p51FzHzdM/TZrerurgRcHJ2WTa1VQ1CIq18xncfpBJw4ojkiZZrKW2yIBWBP92j6Ug==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.2.tgz",
+      "integrity": "sha512-CYbnj78HsIeA+DhgUKgFCfvNsTHFhMMrinUrMZpDXJXKN8T3XViTZ/+wtHeVxEWY8ewSzTFN+nRmSwO2tZaLUQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.2.tgz",
+      "integrity": "sha512-buwkd8nsph4R+ajRvw0qM5Hja/TXQow3ptzWO2EbG/cqcIkHloRrdlBtQlshyYGTNFvfkfJ5tpPLVkY4DtsPfQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.2.tgz",
+      "integrity": "sha512-ZVykbDyk7519VwiNb9Lcj9m8XM6v5V9uKPvrEMkkEedVewf+0itkhahp4HDpgERXhwLRpWFypsGbG/J8s0QjJA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.2.tgz",
+      "integrity": "sha512-CAXl+Dtd9UUuJd8pKKdwh6MLm3MUMiqMPmhZ3tTSXPqfyQ3vDl6R5hZdZ/kYojK4ofXtdfSv1tFq8XzWx3heNQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.2.tgz",
+      "integrity": "sha512-GeXCej4IQtU1B+QlDV8W/RRvbzI3O/Stss+/bCXv4lZls5WGRtu2a+3JkA3i4qIUlMXpcHebWpF8AkJhATowuA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.2.tgz",
+      "integrity": "sha512-3H1weTYZPxt/WOhByszQZybS9w5lKzUn1FDMsgEChbHWQwHYQQRfBxgCcZvPhjHfKyJjIievvMmEUawJrdY9Dg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.2.tgz",
+      "integrity": "sha512-4xTZr1FUmSoQW4XIWmit3tzQrUTZM+N3P0XV8xROKYF50XfI7xeO90+1bZvNwxIufQ9hDQVRJH5YhgPVF8A/HQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-sSATRjPeDBg3pdgHoQfoYBob11Kk1FGa9lui5RIHZCoCkJa9QKlvl3/vKz2usCmYYjs7ymJR/2Nnsqe+Hjt5nw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.2.tgz",
+      "integrity": "sha512-lqnzCV+mM0gIADaKihiCg6ifgfU2L3h5E33rNQBN1Y4MaVGnzryzmvvf7UHxprpQdE8hpqLolJ9Rl+SkIRDpyw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.2.tgz",
+      "integrity": "sha512-AL2qJILH7lNjrDmCQDvdxMfAUIv8KMNZOvrwAQ8i8//ntL9FflhOyMJ8OZSMBb8/AWXe3/5v5S20y3zCoZWKoQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.2.tgz",
+      "integrity": "sha512-QtiuPytchRyC4rwUKhexJdQKvDuZ6hWloi3igqPQNUJCS1/v9EiO3UTOXR6A3FoMo4fnAKbWJdqaIwhOzh8qEw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.2.tgz",
+      "integrity": "sha512-WkhYDmpTjLvGlScA1rwjRUmhl4k8oXR3cIbtqWmELgU/dFeHHlEllxDvdWcNJV9rbzCexB5vz8gtNewWLgCT7Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.2.tgz",
+      "integrity": "sha512-GPMSkTOtMnv2U2F8gxe4Io6qmVs+YKyp832Etqqxr0hFngmXQ3rzwytelm3GIn7T4VviRUlf3sOgBOiTdvaf7g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.2.tgz",
+      "integrity": "sha512-PIhhEkE9uPBleRBrQEJpUn7MBnibZzbGzYWPmY3x+YoVg/95zbjB4CxPPOQ8l5tYYM4mMaCthF8/1DIfBQQyWQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.2.tgz",
+      "integrity": "sha512-YmJbfTlvU7Sdn9BB+4PRES4oB6pxgS37MAONj+hBr/cpXS1aBPKXxNnDbu+QCWPj0o9dgyxeq79g6c5P8KeuYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.2.tgz",
+      "integrity": "sha512-5ebpxr3nWMzrL/rnUI755Jkuee0bHL/Gq0WTF9lvcpv73wAp5eu8MfBUgWK9bhWvZjj7yX8etf/8tI8Ney695g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@opentelemetry/api": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.1.tgz",
+      "integrity": "sha512-gLyJlPHPZYdAk1JENA9LeHejZe1Ti77/pTeFm/nMXmQH/HFZlcS/O2XJB+L8fkbrNSqhdtlvjBVjxwUYanNH5Q==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/api-logs": {
+      "version": "0.219.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api-logs/-/api-logs-0.219.0.tgz",
+      "integrity": "sha512-FFx7YnaYJlIjqWW/AG/yAZ0L/NEY724PipXXXQLdtZPbLwBGbUMTGL1i/esI56TWfTUXxhLfpgrnWJCG8aUJyg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/api": "^1.3.0"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/@opentelemetry/context-async-hooks": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/context-async-hooks/-/context-async-hooks-2.11.0.tgz",
+      "integrity": "sha512-Tr79DyWI8itsBdg+jH+opjfrwLzX+erk1/ExkIwhWoAVjVrJIn2y5+cGjTC0Vy8fyNIA/y8wuJPZwr1T3xCZeQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/core": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-2.8.0.tgz",
+      "integrity": "sha512-hd1Lfh8p545nNz+jq1Ejfz+Mn1hyLuxYn1YzTfFNrxr8urEWMNQLPf1Th8kjOH+HxwawCrtgBp8JpBUR4ZSgww==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-trace-otlp-http": {
+      "version": "0.219.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/exporter-trace-otlp-http/-/exporter-trace-otlp-http-0.219.0.tgz",
+      "integrity": "sha512-9t6SvBXXBEjOBcIzgozvBbd3jWrv3Gt3ngGhl1fhdZ/zRc7oZDVOFEqbi2zlBpW9BXhgDMKv422J0DL/3iQWfw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.8.0",
+        "@opentelemetry/otlp-exporter-base": "0.219.0",
+        "@opentelemetry/otlp-transformer": "0.219.0",
+        "@opentelemetry/resources": "2.8.0",
+        "@opentelemetry/sdk-trace-base": "2.8.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.3.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-trace-otlp-http/node_modules/@opentelemetry/resources": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-2.8.0.tgz",
+      "integrity": "sha512-qmXQ27ilDbUK/vGMqwL8D4/rhn76C+sherM4wTbjlfknR8Nvfc/hCxjRJPhkzZzUsPiNg16SA31NxMabwttRjg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.8.0",
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/exporter-trace-otlp-http/node_modules/@opentelemetry/sdk-trace-base": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-2.8.0.tgz",
+      "integrity": "sha512-mhU4jp+vW0mGbFRd+GeXHvmfA4aDqWjBjLC3pE5XMpLs0IE2ryYb019Ts2AQrOq67gaTF25D91+fgvEHDZEnuQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.8.0",
+        "@opentelemetry/resources": "2.8.0",
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-exporter-base": {
+      "version": "0.219.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-exporter-base/-/otlp-exporter-base-0.219.0.tgz",
+      "integrity": "sha512-zvIxQX/AZUVKDU+hCuYx+7UkiP7GRdnk1ZbFQRYzHvYp47cAWR4j3IhoPhV9KaeXEv2xdGq3IA6PnpzDmLcmSA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.8.0",
+        "@opentelemetry/otlp-transformer": "0.219.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.3.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-transformer": {
+      "version": "0.219.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/otlp-transformer/-/otlp-transformer-0.219.0.tgz",
+      "integrity": "sha512-aaYKAyXhw9VchKZVGOopD3Gw/kPsyrX2c6IQ0AW32mTjqmZOh5Y6Gf5OYqTNqVktAeBjmFinhyFaCwW6GYK9YQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/api-logs": "0.219.0",
+        "@opentelemetry/core": "2.8.0",
+        "@opentelemetry/resources": "2.8.0",
+        "@opentelemetry/sdk-logs": "0.219.0",
+        "@opentelemetry/sdk-metrics": "2.8.0",
+        "@opentelemetry/sdk-trace-base": "2.8.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.3.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-transformer/node_modules/@opentelemetry/resources": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-2.8.0.tgz",
+      "integrity": "sha512-qmXQ27ilDbUK/vGMqwL8D4/rhn76C+sherM4wTbjlfknR8Nvfc/hCxjRJPhkzZzUsPiNg16SA31NxMabwttRjg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.8.0",
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/otlp-transformer/node_modules/@opentelemetry/sdk-trace-base": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-2.8.0.tgz",
+      "integrity": "sha512-mhU4jp+vW0mGbFRd+GeXHvmfA4aDqWjBjLC3pE5XMpLs0IE2ryYb019Ts2AQrOq67gaTF25D91+fgvEHDZEnuQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.8.0",
+        "@opentelemetry/resources": "2.8.0",
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/resources": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-2.11.0.tgz",
+      "integrity": "sha512-Ie7+8q8MDF4FAEQCKVMTx3ReUvxiIAgIiiW3c9JdmP8+HMcDy20puT+AHjexnExgnbvBxjQ9fjkFDWrikJ2jQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.11.0",
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/resources/node_modules/@opentelemetry/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-7YP44XH0tV6+Mb54x2YGf84i7yi+31MBZlE8JwvozkxyTvXbSp10X7cI7YE49ChJ3shMJoBmCJF3+1QFBJctGA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-logs": {
+      "version": "0.219.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-logs/-/sdk-logs-0.219.0.tgz",
+      "integrity": "sha512-s6lTKRakaPClvKoWHRChxnXjDMkM/TQ30ff78jN6EBGf7MI7VzANE5PU3f4z9qDUudWjvZjOLHG0rBnBKYvoXA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/api-logs": "0.219.0",
+        "@opentelemetry/core": "2.8.0",
+        "@opentelemetry/resources": "2.8.0",
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.4.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-logs/node_modules/@opentelemetry/resources": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-2.8.0.tgz",
+      "integrity": "sha512-qmXQ27ilDbUK/vGMqwL8D4/rhn76C+sherM4wTbjlfknR8Nvfc/hCxjRJPhkzZzUsPiNg16SA31NxMabwttRjg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.8.0",
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-metrics": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-metrics/-/sdk-metrics-2.8.0.tgz",
+      "integrity": "sha512-UDBGaj6W0Rgy5rTTaoxs8gVGF/aGkAKyjurJv7se6wjRxJu7FoquTLT/vt54DZfo4crbprYfhX/SOK9+BPw1qg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.8.0",
+        "@opentelemetry/resources": "2.8.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.9.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-metrics/node_modules/@opentelemetry/resources": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-2.8.0.tgz",
+      "integrity": "sha512-qmXQ27ilDbUK/vGMqwL8D4/rhn76C+sherM4wTbjlfknR8Nvfc/hCxjRJPhkzZzUsPiNg16SA31NxMabwttRjg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.8.0",
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-trace": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace/-/sdk-trace-2.11.0.tgz",
+      "integrity": "sha512-fFnTqGm8/G73GQVnxYi7LXa1ZVYEUvgL6XI1LpvV0bPC7WQ/ZGgKxCSl8FnlZBKto9JHHEFTO6s6CUpvvtwFrA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.11.0",
+        "@opentelemetry/resources": "2.11.0",
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-trace-base": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-2.11.0.tgz",
+      "integrity": "sha512-H19x/TX/LZdqiYOjM7fqtSxwlplC5pgelavqbQdHbhdq0q/AI/TGkM2dfGuuynTXmJPeF2HoZVoPDu+TGoW78A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/core": "2.11.0",
+        "@opentelemetry/resources": "2.11.0",
+        "@opentelemetry/sdk-trace": "2.11.0",
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.3.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-trace-base/node_modules/@opentelemetry/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-7YP44XH0tV6+Mb54x2YGf84i7yi+31MBZlE8JwvozkxyTvXbSp10X7cI7YE49ChJ3shMJoBmCJF3+1QFBJctGA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-trace-node": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-node/-/sdk-trace-node-2.11.0.tgz",
+      "integrity": "sha512-CuvCMJmZxswhNLlM2LfuLOW3h3fZujA4hsG4B+Sz4dX2zvaXO8Ng74cnDHWD64gLszTlhiG3c0iNUjj4g+0/sA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/context-async-hooks": "2.11.0",
+        "@opentelemetry/core": "2.11.0",
+        "@opentelemetry/sdk-trace-base": "2.11.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-trace-node/node_modules/@opentelemetry/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-7YP44XH0tV6+Mb54x2YGf84i7yi+31MBZlE8JwvozkxyTvXbSp10X7cI7YE49ChJ3shMJoBmCJF3+1QFBJctGA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/sdk-trace/node_modules/@opentelemetry/core": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-2.11.0.tgz",
+      "integrity": "sha512-7YP44XH0tV6+Mb54x2YGf84i7yi+31MBZlE8JwvozkxyTvXbSp10X7cI7YE49ChJ3shMJoBmCJF3+1QFBJctGA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@opentelemetry/semantic-conventions": "^1.29.0"
+      },
+      "engines": {
+        "node": "^18.19.0 || >=20.6.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0 <1.10.0"
+      }
+    },
+    "node_modules/@opentelemetry/semantic-conventions": {
+      "version": "1.43.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.43.0.tgz",
+      "integrity": "sha512-eSYWTm620tTk45EKSedaUL8MFYI8hW164hIXsgIHyxu3VobUB3fFCu5t0hQby6OoWRPsG1KkKUG2M5UadiLiVg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.6",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz",
+      "integrity": "sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
+      "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/cors": {
+      "version": "2.8.19",
+      "resolved": "https://registry.npmjs.org/@types/cors/-/cors-2.8.19.tgz",
+      "integrity": "sha512-mFNylyeyqN93lfe/9CSxOGREz8cpzAhH+E93xJ4xWQf62V8sQ/24reV2nyzUWM6H6Xji+GGHpkbLe7pVoUEskg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/express": {
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-5.0.6.tgz",
+      "integrity": "sha512-sKYVuV7Sv9fbPIt/442koC7+IIwK5olP1KWeD88e/idgoJqDm3JV/YUiPwkoKK92ylff2MGxSz1CSjsXelx0YA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^5.0.0",
+        "@types/serve-static": "^2"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.1.3.tgz",
+      "integrity": "sha512-dPfW8NFiOF4wOHc7+N/QSxlY9cfSsenewGbAz8C8U/MULPd/YZ27LvJUIlzaXie7e6Ove9YunJGgC9tbHD2cKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*",
+        "@types/send": "*"
+      }
+    },
+    "node_modules/@types/http-errors": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.5.tgz",
+      "integrity": "sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "26.6.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-26.6.2.tgz",
+      "integrity": "sha512-X1P21scMv4zGKLYqjdGjaKa7COa0RKVYYZZN/NfvLQ1JegxFhdhpZG/Lyn8AXx6CDUavKAd11v6BvfpkDByK8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~8.9.0"
+      }
+    },
+    "node_modules/@types/node/node_modules/undici-types": {
+      "version": "8.9.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.9.0.tgz",
+      "integrity": "sha512-KTDyRTYX8sWmKXAikPHHSyc63CRPETMctyjKFupcC6OBLXT3xsN0e9aF7m+mIXutFWpUXuedtowG7iLOzp0kQg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/qs": {
+      "version": "6.15.1",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.15.1.tgz",
+      "integrity": "sha512-GZHUBZR9hckSUhrxmp1nG6NwdpM9fCunJwyThLW1X3AyHgd9IlHb6VANpQQqDr2o/qQp6McZ3y/IA2rVzKzSbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz",
+      "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@types/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/serve-static": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-2.2.0.tgz",
+      "integrity": "sha512-8mam4H1NHLtu7nmtalF7eyBH14QyOASmcxHhSfEoRyr0nP/YdoesEtU+uSRvMe96TW/HPTtkoKqQLl53N7UXMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/http-errors": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/accepts": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-2.0.0.tgz",
+      "integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-types": "^3.0.0",
+        "negotiator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/body-parser": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-2.3.0.tgz",
+      "integrity": "sha512-2cGmJupaNgg+QUwVLAucDuWuoMZ6EX9iHDRswZ5lsNYEmwPaRknMPCLZz07yTzVq/83p4o/wzbDZbBrTvGGTIw==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "^3.1.2",
+        "content-type": "^2.0.0",
+        "debug": "^4.4.3",
+        "http-errors": "^2.0.1",
+        "iconv-lite": "^0.7.2",
+        "on-finished": "^2.4.1",
+        "qs": "^6.15.2",
+        "raw-body": "^3.0.2",
+        "type-is": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/body-parser/node_modules/content-type": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/bytes": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
+      "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "get-intrinsic": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/content-disposition": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.1.0.tgz",
+      "integrity": "sha512-5jRCH9Z/+DRP7rkvY83B+yGIGX96OYdJmzngqnw2SBSxqCFPd0w2km3s5iawpGX8krnwSGmF0FW5Nhr0Hfai3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/content-type": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz",
+      "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.2.2.tgz",
+      "integrity": "sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.6.0"
+      }
+    },
+    "node_modules/cors": {
+      "version": "2.8.6",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.6.tgz",
+      "integrity": "sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/depd": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/dotenv": {
+      "version": "17.4.2",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz",
+      "integrity": "sha512-nI4U3TottKAcAD9LLud4Cb7b2QztQMUEfHbvhTH09bqXTxnSie8WnjPALV/WMCrJZ6UV/qHJ6L03OqO3LcdYZw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
+      "license": "MIT"
+    },
+    "node_modules/encodeurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
+      "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.28.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.2.tgz",
+      "integrity": "sha512-HKVLS8dvII+xoKW9kmqxbRKrnWEXfJJr/FZhhJmiqIB0e053QNYFqOBouTMO/k5sID4MvCiUCvv8b9M4h32wIA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.28.2",
+        "@esbuild/android-arm": "0.28.2",
+        "@esbuild/android-arm64": "0.28.2",
+        "@esbuild/android-x64": "0.28.2",
+        "@esbuild/darwin-arm64": "0.28.2",
+        "@esbuild/darwin-x64": "0.28.2",
+        "@esbuild/freebsd-arm64": "0.28.2",
+        "@esbuild/freebsd-x64": "0.28.2",
+        "@esbuild/linux-arm": "0.28.2",
+        "@esbuild/linux-arm64": "0.28.2",
+        "@esbuild/linux-ia32": "0.28.2",
+        "@esbuild/linux-loong64": "0.28.2",
+        "@esbuild/linux-mips64el": "0.28.2",
+        "@esbuild/linux-ppc64": "0.28.2",
+        "@esbuild/linux-riscv64": "0.28.2",
+        "@esbuild/linux-s390x": "0.28.2",
+        "@esbuild/linux-x64": "0.28.2",
+        "@esbuild/netbsd-arm64": "0.28.2",
+        "@esbuild/netbsd-x64": "0.28.2",
+        "@esbuild/openbsd-arm64": "0.28.2",
+        "@esbuild/openbsd-x64": "0.28.2",
+        "@esbuild/openharmony-arm64": "0.28.2",
+        "@esbuild/sunos-x64": "0.28.2",
+        "@esbuild/win32-arm64": "0.28.2",
+        "@esbuild/win32-ia32": "0.28.2",
+        "@esbuild/win32-x64": "0.28.2"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
+      "license": "MIT"
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/express": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
+      "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "^2.0.0",
+        "body-parser": "^2.2.1",
+        "content-disposition": "^1.0.0",
+        "content-type": "^1.0.5",
+        "cookie": "^0.7.1",
+        "cookie-signature": "^1.2.1",
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "finalhandler": "^2.1.0",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.0",
+        "merge-descriptors": "^2.0.0",
+        "mime-types": "^3.0.0",
+        "on-finished": "^2.4.1",
+        "once": "^1.4.0",
+        "parseurl": "^1.3.3",
+        "proxy-addr": "^2.0.7",
+        "qs": "^6.14.0",
+        "range-parser": "^1.2.1",
+        "router": "^2.2.0",
+        "send": "^1.1.0",
+        "serve-static": "^2.2.0",
+        "statuses": "^2.0.1",
+        "type-is": "^2.0.1",
+        "vary": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
+      "integrity": "sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "on-finished": "^2.4.1",
+        "parseurl": "^1.3.3",
+        "statuses": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
+      "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/http-errors": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz",
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "depd": "~2.0.0",
+        "inherits": "~2.0.4",
+        "setprototypeof": "~1.2.0",
+        "statuses": "~2.0.2",
+        "toidentifier": "~1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.3.tgz",
+      "integrity": "sha512-IKXpvIzjnC9XTAUbVBcMfGS0EPaIXtW6v+zr+RRp+hqULEpo0owZax6wyRwPOJbWbzjYspQwusTsfVr0ifh4uQ==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
+    "node_modules/ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-promise": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-4.0.0.tgz",
+      "integrity": "sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==",
+      "license": "MIT"
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.1.tgz",
+      "integrity": "sha512-yz3xRaG20c6/BOzvYoDaGtPmGscs7YivItZEEqe6GbwNfHuxu9YNmvnEkMzKldAGY4/80pRcQRZSEnhquk9XuQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-2.0.0.tgz",
+      "integrity": "sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.54.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz",
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "^1.54.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "license": "MIT"
+    },
+    "node_modules/negotiator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.1.0.tgz",
+      "integrity": "sha512-NMPBRMJgiQHjbd8phG3Vebdx4kZ1H121rbl5IkMqeOsahptB9BKo/d7oJ3zTXqTgagn2bWlNSXkh0QUGM31RYg==",
+      "license": "MIT",
+      "dependencies": {
+        "content-type": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/negotiator/node_modules/content-type": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
+      "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "license": "MIT",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "license": "ISC",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/path-to-regexp": {
+      "version": "8.4.2",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.4.2.tgz",
+      "integrity": "sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/proxy-addr": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.8.tgz",
+      "integrity": "sha512-5nnx0yGyVUcY6t9RnWcARWtwT9F1D8O9rt08htPvnd49W1IgZtmLkhu9WfMzQj1cFxjHIO6connUNVW5k7AVyQ==",
+      "license": "MIT",
+      "dependencies": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.16.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.16.0.tgz",
+      "integrity": "sha512-h6fhOIaRrID2CbEY2fqs+7t+UXZo+MLAnU5gRIq85uFtdiUPCdsApMlHhXogKVM4HM2DVbIjGNTTYH2OcmP1vA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "es-define-property": "^1.0.1",
+        "side-channel": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.3.0.tgz",
+      "integrity": "sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-3.0.2.tgz",
+      "integrity": "sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==",
+      "license": "MIT",
+      "dependencies": {
+        "bytes": "~3.1.2",
+        "http-errors": "~2.0.1",
+        "iconv-lite": "~0.7.0",
+        "unpipe": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/router": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",
+      "integrity": "sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.0",
+        "depd": "^2.0.0",
+        "is-promise": "^4.0.0",
+        "parseurl": "^1.3.3",
+        "path-to-regexp": "^8.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "license": "MIT"
+    },
+    "node_modules/send": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-1.2.1.tgz",
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^4.4.3",
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "etag": "^1.8.1",
+        "fresh": "^2.0.0",
+        "http-errors": "^2.0.1",
+        "mime-types": "^3.0.2",
+        "ms": "^2.1.3",
+        "on-finished": "^2.4.1",
+        "range-parser": "^1.2.1",
+        "statuses": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-2.2.1.tgz",
+      "integrity": "sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==",
+      "license": "MIT",
+      "dependencies": {
+        "encodeurl": "^2.0.0",
+        "escape-html": "^1.0.3",
+        "parseurl": "^1.3.3",
+        "send": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
+      "license": "ISC"
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
+      "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4",
+        "side-channel-list": "^1.0.1",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
+      "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz",
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/tsx": {
+      "version": "4.23.15",
+      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.23.15.tgz",
+      "integrity": "sha512-Yiex1Ovn8z2xPpOWckIiysV1SSyRMY9BkLF++q0yKiDxCqRhosKfMg3janKkiLBwZ5c/YryloKwGZcrEmtwxKw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "~0.28.0"
+      },
+      "bin": {
+        "tsx": "dist/cli.mjs"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-2.1.0.tgz",
+      "integrity": "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA==",
+      "license": "MIT",
+      "dependencies": {
+        "content-type": "^2.0.0",
+        "media-typer": "^1.1.0",
+        "mime-types": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/type-is/node_modules/content-type": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.1.0.tgz",
+      "integrity": "sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "license": "ISC"
+    }
+  }
+}
diff --git a/services/cmsblock/package.json b/services/cmsblock/package.json
index 95724cfa..c9f7fc51 100644
--- a/services/cmsblock/package.json
+++ b/services/cmsblock/package.json
@@ -2,11 +2,28 @@
   "name": "@reactedge/cmsblock",
   "version": "0.1.0",
   "private": true,
+  "description": "Cmsblock Express service",
   "type": "module",
-  "engines": {"node": ">=20"},
   "scripts": {
-    "start": "node src/index.mjs",
-    "dev": "node --watch src/index.mjs",
-    "test": "node --test test/*.test.mjs"
+    "dev": "tsx watch src/index.ts",
+    "start": "node --import tsx src/index.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.219.0",
+    "@opentelemetry/resources": "^2.8.0",
+    "@opentelemetry/sdk-trace-base": "^2.8.0",
+    "@opentelemetry/sdk-trace-node": "^2.8.0",
+    "cors": "^2.8.6",
+    "dotenv": "^17.4.2",
+    "express": "^5.2.1"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.6",
+    "@types/node": "^26.0.0",
+    "tsx": "^4.22.4",
+    "typescript": "^6.0.3"
   }
 }
diff --git a/services/cmsblock/src/access/index.ts b/services/cmsblock/src/access/index.ts
index 979daf98..fbfbd260 100644
--- a/services/cmsblock/src/access/index.ts
+++ b/services/cmsblock/src/access/index.ts
@@ -1,6 +1,6 @@
-import type {Application} from 'express';
-import {setupJsonBodyParse} from './jsonParser';
+import {setupJsonBodyParse} from "./jsonParser.js";
+import {Application} from "express";
 
-export default function setupAccess(app: Application): void {
-    setupJsonBodyParse(app);
+export default (app: Application) => {
+    setupJsonBodyParse(app)
 }
diff --git a/services/cmsblock/src/access/jsonParser.ts b/services/cmsblock/src/access/jsonParser.ts
index 85202353..94ec71ea 100644
--- a/services/cmsblock/src/access/jsonParser.ts
+++ b/services/cmsblock/src/access/jsonParser.ts
@@ -1,6 +1,8 @@
-import express from 'express';
-import type {Application} from 'express';
+import express, {Application} from "express";
 
-export function setupJsonBodyParse(app: Application): void {
-    app.use(express.json({limit: '120kb'}));
+export const setupJsonBodyParse = (app: Application) => {
+    app.use(express.json())
+    app.use(express.urlencoded({
+        extended: true
+    }))
 }
diff --git a/services/cmsblock/src/config.ts b/services/cmsblock/src/config.ts
index a6531c9f..a70e24ae 100644
--- a/services/cmsblock/src/config.ts
+++ b/services/cmsblock/src/config.ts
@@ -1,19 +1,26 @@
 import dotenv from 'dotenv';
-import {resolve} from 'node:path';
-import {fileURLToPath} from 'node:url';
-
 dotenv.config({quiet: true});
 
-export const config = {
+export type Config = {
+    port: number;
+    frontendUrl: string;
+    route: {
+        servicePrefix: string;
+    };
+    observability: {
+        otelHost: string;
+        serviceName: string;
+    };
+};
+
+export const config: Config = {
     port: Number(process.env.PORT ?? '4190'),
-    host: '127.0.0.1',
-    frontendUrl: process.env.FRONTEND_URL ??
-        'http://localhost:5173,http://127.0.0.1:5173,http://localhost:3001,http://127.0.0.1:3001',
-    dataDirectory: resolve(process.env.CMSBLOCK_DATA_DIR ??
-        fileURLToPath(new URL('../data/', import.meta.url))),
-    route: {servicePrefix: '/cmsblock'},
+    frontendUrl: process.env.FRONTEND_URL ?? 'http://localhost:3000',
+    route: {
+        servicePrefix: '/cmsblock'
+    },
     observability: {
         otelHost: process.env.OTEL_HOST ?? 'http://localhost:4318',
-        serviceName: process.env.OTEL_SERVICE_NAME ?? 'reactedge-cmsblock',
-    },
+        serviceName: process.env.OTEL_SERVICE_NAME ?? 'reactedge-cmsblock'
+    }
 };
diff --git a/services/cmsblock/src/controller/status-handler.ts b/services/cmsblock/src/controller/status-handler.ts
new file mode 100644
index 00000000..5db484bf
--- /dev/null
+++ b/services/cmsblock/src/controller/status-handler.ts
@@ -0,0 +1,18 @@
+import {Request, Response} from "express";
+import {Operation} from "../observability/operation";
+
+export class StatusHandler {
+    status = async (_req: Request, res: Response): Promise<void> => {
+        const operation = res.locals.routeOperation as Operation;
+
+        try {
+            operation.succeed();
+            res.json({status: 'ok'});
+        } catch (error) {
+            operation.fail(error);
+            res.status(500).json({
+                error: error instanceof Error ? error.message : 'Unknown error'
+            });
+        }
+    };
+}
diff --git a/services/cmsblock/src/index.ts b/services/cmsblock/src/index.ts
new file mode 100644
index 00000000..f411561e
--- /dev/null
+++ b/services/cmsblock/src/index.ts
@@ -0,0 +1,3 @@
+import {startServer} from "./lib/server";
+
+startServer()
\ No newline at end of file
diff --git a/services/cmsblock/src/lib/cors-setup.ts b/services/cmsblock/src/lib/cors-setup.ts
new file mode 100644
index 00000000..f59b809f
--- /dev/null
+++ b/services/cmsblock/src/lib/cors-setup.ts
@@ -0,0 +1,22 @@
+import {config} from "../config";
+import cors from "cors"
+
+// https://brianflove.com/posts/2017-03-22-express-cors-typescript/
+export const corsOptions = () => {
+    const allowedOrigins = config.frontendUrl
+        .split(',')
+        .map(origin => origin.trim())
+
+    const options = {
+        allowedHeaders: [
+            'Origin',
+            'Accept'
+        ],
+        credentials: true,
+        methods: 'GET,HEAD,OPTIONS,PUT,PATCH,POST,DELETE',
+        origin: allowedOrigins,
+        preflightContinue: false,
+    };
+
+    return cors(options)
+}
\ No newline at end of file
diff --git a/services/cmsblock/src/lib/initilisers/index.ts b/services/cmsblock/src/lib/initilisers/index.ts
new file mode 100644
index 00000000..aad72b39
--- /dev/null
+++ b/services/cmsblock/src/lib/initilisers/index.ts
@@ -0,0 +1,12 @@
+import {Application} from "express";
+import access from "../../access/index"
+import routes from "../../routes/index.js";
+import {setupTelemetry} from "../../observability/tracing";
+import {createRequestOperationMiddleware} from "../../observability/request-operation-middleware";
+
+export const initialiseApp = async (app: Application) => {
+    setupTelemetry(app)
+    app.use(createRequestOperationMiddleware('cmsblock.request'))
+    access(app)
+    routes(app)
+}
diff --git a/services/cmsblock/src/lib/server.ts b/services/cmsblock/src/lib/server.ts
new file mode 100644
index 00000000..3b9054fa
--- /dev/null
+++ b/services/cmsblock/src/lib/server.ts
@@ -0,0 +1,35 @@
+import express, {Application} from 'express'
+import {config} from "../config";
+import {initialiseApp} from "./initilisers";
+import {OpenTelemetryObserver} from "../observability/activity";
+
+export const startServer = async () => {
+    const app: Application = express()
+    const port = config.port
+
+    await initialiseApp(app)
+    const telemetry = app.locals.telemetry as OpenTelemetryObserver;
+
+    try {
+        await new Promise<void>((resolve, reject) => {
+            const server = app.listen(port, (error?: Error) => {
+                if (error) {
+                    reject(error);
+                    return;
+                }
+                resolve();
+            });
+            server.once('error', reject);
+        });
+        telemetry.logObservation('cmsblock.server.started', {
+            'server.port': port
+        });
+    } catch (error) {
+        const operation = telemetry.startOperation(
+            'cmsblock.server.failed',
+            {'server.port': port}
+        );
+        operation.fail(error);
+        throw error;
+    }
+}
diff --git a/services/cmsblock/src/lib/url.ts b/services/cmsblock/src/lib/url.ts
new file mode 100644
index 00000000..0bfc11da
--- /dev/null
+++ b/services/cmsblock/src/lib/url.ts
@@ -0,0 +1,26 @@
+import { URL } from 'url';
+
+export const normalizeUrl = (rawUrl: string) => {
+    const url = new URL(rawUrl);
+
+    // Normalize pathname by collapsing multiple slashes
+    url.pathname = url.pathname.replace(/\/{2,}/g, '/');
+
+    // Also clean search parameters and hash if needed (optional)
+    // url.search = decodeURIComponent(url.search);
+    // url.hash = decodeURIComponent(url.hash);
+
+    return url.toString();
+}
+
+export const sanitiseUrl = (rawUrl: string) => {
+    const dummyHost = 'https://localurl.com'
+    const url = new URL(`${dummyHost}${rawUrl}`);
+
+    // Obscure each query parameter's value
+    url.searchParams.forEach((value, key) => {
+        url.searchParams.set(key, '***');
+    });
+
+    return `${url.pathname}${url.search}`
+}
\ No newline at end of file
diff --git a/services/cmsblock/src/observability/activity.ts b/services/cmsblock/src/observability/activity.ts
new file mode 100644
index 00000000..492ecc09
--- /dev/null
+++ b/services/cmsblock/src/observability/activity.ts
@@ -0,0 +1,45 @@
+import {trace, type Tracer, Attributes} from "@opentelemetry/api";
+import {OTLPTraceExporter} from '@opentelemetry/exporter-trace-otlp-http';
+import {resourceFromAttributes} from '@opentelemetry/resources';
+import {BatchSpanProcessor} from '@opentelemetry/sdk-trace-base';
+import {NodeTracerProvider} from '@opentelemetry/sdk-trace-node';
+import {config} from "../config";
+import {Operation} from "./operation";
+
+export class OpenTelemetryObserver {
+    private readonly tracer: Tracer
+
+    constructor() {
+        const exporter = new OTLPTraceExporter({
+            url: `${config.observability.otelHost}/v1/traces`
+        });
+        const provider = new NodeTracerProvider({
+            resource: resourceFromAttributes({
+                'service.name': config.observability.serviceName,
+                'service.version': '1.0.0'
+            }),
+            spanProcessors: [new BatchSpanProcessor(exporter)]
+        });
+
+        provider.register();
+        this.tracer = trace.getTracer(config.observability.serviceName);
+    }
+
+    startOperation(name: string, attributes: Attributes = {}): Operation {
+        return new Operation(this.tracer.startSpan(name, {attributes}));
+    }
+
+    startChildOperation(
+        parent: Operation,
+        name: string,
+        attributes: Attributes = {}
+    ): Operation {
+        return new Operation(
+            this.tracer.startSpan(name, {attributes}, parent.getContext())
+        );
+    }
+
+    logObservation(name: string, attributes: Attributes = {}): void {
+        this.startOperation(name, attributes).end();
+    }
+}
diff --git a/services/cmsblock/src/observability/operation.ts b/services/cmsblock/src/observability/operation.ts
new file mode 100644
index 00000000..a353361d
--- /dev/null
+++ b/services/cmsblock/src/observability/operation.ts
@@ -0,0 +1,58 @@
+import {
+    Attributes,
+    AttributeValue,
+    context,
+    type Context,
+    Span,
+    SpanStatusCode,
+    trace
+} from "@opentelemetry/api";
+
+export class Operation {
+    private ended = false;
+
+    constructor(private readonly span: Span) {}
+
+    addEvent(name: string, attributes: Attributes = {}): void {
+        this.span.addEvent(name, attributes);
+    }
+
+    setAttribute(key: string, value: AttributeValue): void {
+        this.span.setAttribute(key, value);
+    }
+
+    getContext(): Context {
+        return trace.setSpan(context.active(), this.span);
+    }
+
+    end(): void {
+        if (this.ended) return;
+        this.ended = true;
+        this.span.end();
+    }
+
+    succeed(): void {
+        if (this.ended) return;
+        this.span.setStatus({code: SpanStatusCode.OK});
+        this.end();
+    }
+
+    complete(statusCode: number): void {
+        if (this.ended) return;
+        this.span.setAttribute('http.response.status_code', statusCode);
+        this.span.setStatus({
+            code: statusCode >= 400 ? SpanStatusCode.ERROR : SpanStatusCode.OK,
+            message: statusCode >= 400 ? `HTTP ${statusCode}` : undefined
+        });
+        this.end();
+    }
+
+    fail(error: unknown): void {
+        if (this.ended) return;
+        this.ended = true;
+        const err = error instanceof Error ? error : new Error(String(error));
+        this.span.recordException(err);
+        this.span.setStatus({code: SpanStatusCode.ERROR, message: err.message});
+        this.span.end();
+    }
+}
diff --git a/services/cmsblock/src/observability/request-operation-middleware.ts b/services/cmsblock/src/observability/request-operation-middleware.ts
new file mode 100644
index 00000000..1d6e744d
--- /dev/null
+++ b/services/cmsblock/src/observability/request-operation-middleware.ts
@@ -0,0 +1,32 @@
+import {NextFunction, Request, RequestHandler, Response} from "express";
+import {sanitiseUrl} from "../lib/url";
+import {OpenTelemetryObserver} from "./activity";
+import {Operation} from "./operation";
+
+export const createRequestOperationMiddleware = (
+    operationName: string
+): RequestHandler => (req: Request, res: Response, next: NextFunction): void => {
+    const telemetry = req.app.locals.telemetry as OpenTelemetryObserver;
+    const operation = telemetry.startOperation(operationName, {
+        'http.request.method': req.method,
+        'url.path': sanitiseUrl(req.originalUrl)
+    });
+
+    res.locals.requestOperation = operation;
+    res.once('finish', () => operation.complete(res.statusCode));
+    res.once('close', () => {
+        if (!res.writableFinished) {
+            operation.fail(new Error('Response closed before completion.'));
+        }
+    });
+    next();
+};
+
+export const createRouteOperationMiddleware = (
+    operationName: string
+): RequestHandler => (req: Request, res: Response, next: NextFunction): void => {
+    const telemetry = req.app.locals.telemetry as OpenTelemetryObserver;
+    const parent = res.locals.requestOperation as Operation;
+    res.locals.routeOperation = telemetry.startChildOperation(parent, operationName);
+    next();
+};
diff --git a/services/cmsblock/src/observability/tracing.ts b/services/cmsblock/src/observability/tracing.ts
new file mode 100644
index 00000000..bc5fcce3
--- /dev/null
+++ b/services/cmsblock/src/observability/tracing.ts
@@ -0,0 +1,6 @@
+import {Application} from "express";
+import {OpenTelemetryObserver} from "./activity";
+
+export function setupTelemetry(app: Application) {
+    app.locals.telemetry = new OpenTelemetryObserver();
+}
\ No newline at end of file
diff --git a/services/cmsblock/src/routes/index.ts b/services/cmsblock/src/routes/index.ts
new file mode 100644
index 00000000..e59f0c2d
--- /dev/null
+++ b/services/cmsblock/src/routes/index.ts
@@ -0,0 +1,6 @@
+import {Application} from "express";
+import {setupStatusRoutes} from "./status-router";
+
+export default (app: Application) => {
+    setupStatusRoutes(app)
+}
diff --git a/services/cmsblock/src/routes/status-router.ts b/services/cmsblock/src/routes/status-router.ts
new file mode 100644
index 00000000..137d0c53
--- /dev/null
+++ b/services/cmsblock/src/routes/status-router.ts
@@ -0,0 +1,19 @@
+import express, {Application} from 'express'
+import {config} from "../config";
+import {StatusHandler} from "../controller/status-handler"
+import {corsOptions} from '../lib/cors-setup'
+import {createRouteOperationMiddleware} from "../observability/request-operation-middleware";
+
+export const setupStatusRoutes = (app: Application) => {
+    const router = express.Router()
+    router.use(corsOptions())
+
+    const statusHandler = new StatusHandler()
+    router.get(
+        "/status",
+        createRouteOperationMiddleware('cmsblock.status'),
+        statusHandler.status
+    )
+
+    app.use(config.route.servicePrefix, router)
+}
diff --git a/services/cmsblock/tsconfig.json b/services/cmsblock/tsconfig.json
index 573d7e19..cd6cba8a 100644
--- a/services/cmsblock/tsconfig.json
+++ b/services/cmsblock/tsconfig.json
@@ -9,5 +9,5 @@
     "noEmit": true,
     "types": ["node"]
   },
-  "include": ["src/**/*.ts", "test/**/*.ts"]
+  "include": ["src/**/*.ts"]
 }
diff --git a/services/cmsblock_bak/.env.sample b/services/cmsblock_bak/.env.sample
new file mode 100644
index 00000000..273ec3f2
--- /dev/null
+++ b/services/cmsblock_bak/.env.sample
@@ -0,0 +1,5 @@
+PORT=4190
+FRONTEND_URL=http://localhost:5173,http://127.0.0.1:5173,http://localhost:3001,http://127.0.0.1:3001
+# CMSBLOCK_DATA_DIR=/absolute/path/to/cmsblock/data
+OTEL_HOST=http://localhost:4318
+OTEL_SERVICE_NAME=reactedge-cmsblock
diff --git a/services/cmsblock/.gitignore b/services/cmsblock_bak/.gitignore
similarity index 100%
rename from services/cmsblock/.gitignore
rename to services/cmsblock_bak/.gitignore
diff --git a/services/cmsblock_bak/README.md b/services/cmsblock_bak/README.md
new file mode 100644
index 00000000..ef7e24ff
--- /dev/null
+++ b/services/cmsblock_bak/README.md
@@ -0,0 +1,43 @@
+# CMSBlock vertical slice
+
+This is a **development-only API** for the first CMSBlock end-to-end experiment.
+
+It persists one hard-coded block, `demo`, into `data/demo.json` (ignored by git),
+and uses a deterministic HTML/CSS generator in place of an AI provider.
+
+From the platform root:
+
+```bash
+npm --prefix services/cmsblock start
+npm --prefix services/cmsblock test
+npm --prefix widgets/cmsblock dev
+```
+
+The widget calls `http://127.0.0.1:4190/cmsblock/blocks/demo` by default.
+Set `PORT`, `CMSBLOCK_DATA_DIR`, `FRONTEND_URL` (comma-separated CORS
+origins) for the API, or `VITE_CMSBLOCK_URL` when building the widget.
+
+Flow: edit source + choose template -> **Save** -> **Generate draft** ->
+**Review** -> **Approve** -> **View**. Source and approved output stay separate;
+generating a new draft does not replace the last approved output.
+
+**Do not expose this service on the public internet.** It deliberately has
+no authentication, rate limiting or authorisation yet. CORS is not authentication.
+Generated output is displayed inside a sandboxed iframe; a future public SSR
+publisher must validate/sanitise AI-generated HTML and CSS before emitting it
+into the ordinary document.
+
+HTML input is simplified for this experiment: it is converted to text, with
+up to three HTTPS image references retained. Complex HTML formatting is not
+preserved by the mock generator.
+
+## Visual template references
+
+Three bundled SVG reference images replace the template dropdown:
+Editorial (image above copy), Feature (image left), Promotional (image right).
+The selection is saved using the existing `templateId` field and recorded
+in the generated revision, preserving the reference used for publication.
+
+The generator does **not** analyse these images yet. It maps each reference
+ID to a hard-coded responsive layout so the full image-selection → save →
+generate → review → approve → reload flow can be verified before adding AI.
diff --git a/services/cmsblock_bak/package.json b/services/cmsblock_bak/package.json
new file mode 100644
index 00000000..95724cfa
--- /dev/null
+++ b/services/cmsblock_bak/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@reactedge/cmsblock",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "engines": {"node": ">=20"},
+  "scripts": {
+    "start": "node src/index.mjs",
+    "dev": "node --watch src/index.mjs",
+    "test": "node --test test/*.test.mjs"
+  }
+}
diff --git a/services/cmsblock_bak/src/access/index.ts b/services/cmsblock_bak/src/access/index.ts
new file mode 100644
index 00000000..979daf98
--- /dev/null
+++ b/services/cmsblock_bak/src/access/index.ts
@@ -0,0 +1,6 @@
+import type {Application} from 'express';
+import {setupJsonBodyParse} from './jsonParser';
+
+export default function setupAccess(app: Application): void {
+    setupJsonBodyParse(app);
+}
diff --git a/services/cmsblock_bak/src/access/jsonParser.ts b/services/cmsblock_bak/src/access/jsonParser.ts
new file mode 100644
index 00000000..85202353
--- /dev/null
+++ b/services/cmsblock_bak/src/access/jsonParser.ts
@@ -0,0 +1,6 @@
+import express from 'express';
+import type {Application} from 'express';
+
+export function setupJsonBodyParse(app: Application): void {
+    app.use(express.json({limit: '120kb'}));
+}
diff --git a/services/cmsblock_bak/src/config.ts b/services/cmsblock_bak/src/config.ts
new file mode 100644
index 00000000..a6531c9f
--- /dev/null
+++ b/services/cmsblock_bak/src/config.ts
@@ -0,0 +1,19 @@
+import dotenv from 'dotenv';
+import {resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+dotenv.config({quiet: true});
+
+export const config = {
+    port: Number(process.env.PORT ?? '4190'),
+    host: '127.0.0.1',
+    frontendUrl: process.env.FRONTEND_URL ??
+        'http://localhost:5173,http://127.0.0.1:5173,http://localhost:3001,http://127.0.0.1:3001',
+    dataDirectory: resolve(process.env.CMSBLOCK_DATA_DIR ??
+        fileURLToPath(new URL('../data/', import.meta.url))),
+    route: {servicePrefix: '/cmsblock'},
+    observability: {
+        otelHost: process.env.OTEL_HOST ?? 'http://localhost:4318',
+        serviceName: process.env.OTEL_SERVICE_NAME ?? 'reactedge-cmsblock',
+    },
+};
diff --git a/services/cmsblock/src/generator.mjs b/services/cmsblock_bak/src/generator.mjs
similarity index 100%
rename from services/cmsblock/src/generator.mjs
rename to services/cmsblock_bak/src/generator.mjs
diff --git a/services/cmsblock/src/index.mjs b/services/cmsblock_bak/src/index.mjs
similarity index 100%
rename from services/cmsblock/src/index.mjs
rename to services/cmsblock_bak/src/index.mjs
diff --git a/services/cmsblock/src/server.mjs b/services/cmsblock_bak/src/server.mjs
similarity index 100%
rename from services/cmsblock/src/server.mjs
rename to services/cmsblock_bak/src/server.mjs
diff --git a/services/cmsblock/src/store.mjs b/services/cmsblock_bak/src/store.mjs
similarity index 100%
rename from services/cmsblock/src/store.mjs
rename to services/cmsblock_bak/src/store.mjs
diff --git a/services/cmsblock/test/flow.test.mjs b/services/cmsblock_bak/test/flow.test.mjs
similarity index 100%
rename from services/cmsblock/test/flow.test.mjs
rename to services/cmsblock_bak/test/flow.test.mjs
diff --git a/services/cmsblock_bak/tsconfig.json b/services/cmsblock_bak/tsconfig.json
new file mode 100644
index 00000000..573d7e19
--- /dev/null
+++ b/services/cmsblock_bak/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts", "test/**/*.ts"]
+}

From 0e1b6f3dbba482bc6944c60ff9e85516b716cae2 Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 20:24:15 +0200
Subject: [PATCH 20/28] ci(cmsblock): validate generated Express scaffold
 before route migration

---
 .github/workflows/cmsblock-scaffold.yml | 52 +++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 .github/workflows/cmsblock-scaffold.yml

diff --git a/.github/workflows/cmsblock-scaffold.yml b/.github/workflows/cmsblock-scaffold.yml
new file mode 100644
index 00000000..ca76643b
--- /dev/null
+++ b/.github/workflows/cmsblock-scaffold.yml
@@ -0,0 +1,52 @@
+name: CMSBlock scaffold
+
+on:
+  push:
+    branches:
+      - feat/cms-block
+    paths:
+      - 'services/cmsblock/**'
+      - '.github/workflows/cmsblock-scaffold.yml'
+  pull_request:
+    paths:
+      - 'services/cmsblock/**'
+      - '.github/workflows/cmsblock-scaffold.yml'
+  workflow_dispatch:
+
+jobs:
+  smoke-test:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: services/cmsblock
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - name: Install dependencies
+        run: npm ci
+      - name: Typecheck scaffold
+        run: npm run typecheck
+      - name: Start scaffold and verify status
+        shell: bash
+        run: |
+          set -euo pipefail
+          PORT=4190 npm start > /tmp/reactedge-cmsblock.log 2>&1 &
+          server_pid=$!
+          trap 'kill "$server_pid" 2>/dev/null || true' EXIT
+          for attempt in $(seq 1 30); do
+            if curl --silent --fail http://127.0.0.1:4190/cmsblock/status > /tmp/cmsblock-status.json; then
+              node -e "const fs=require('fs'); const status=JSON.parse(fs.readFileSync('/tmp/cmsblock-status.json','utf8')); if(status.status!=='ok')process.exit(1);"
+              cat /tmp/cmsblock-status.json
+              exit 0
+            fi
+            if ! kill -0 "$server_pid" 2>/dev/null; then
+              cat /tmp/reactedge-cmsblock.log
+              exit 1
+            fi
+            sleep 1
+          done
+          cat /tmp/reactedge-cmsblock.log
+          echo "CMSBlock failed to serve /cmsblock/status" >&2
+          exit 1

From 766d74d526b658ccf4c374b7a7f131f12917f03b Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 20:28:18 +0200
Subject: [PATCH 21/28] refactor(cmsblock): port legacy validator and HTML
 generator to typed model

---
 .../cmsblock/src/model/cmsblock/errors.ts     |   7 ++
 .../cmsblock/src/model/cmsblock/generator.ts  | 118 ++++++++++++++++++
 services/cmsblock/src/model/cmsblock/types.ts |  26 ++++
 3 files changed, 151 insertions(+)
 create mode 100644 services/cmsblock/src/model/cmsblock/errors.ts
 create mode 100644 services/cmsblock/src/model/cmsblock/generator.ts
 create mode 100644 services/cmsblock/src/model/cmsblock/types.ts

diff --git a/services/cmsblock/src/model/cmsblock/errors.ts b/services/cmsblock/src/model/cmsblock/errors.ts
new file mode 100644
index 00000000..bf7cc658
--- /dev/null
+++ b/services/cmsblock/src/model/cmsblock/errors.ts
@@ -0,0 +1,7 @@
+export class CmsBlockValidationError extends Error {
+    constructor(message: string) { super(message); this.name = 'CmsBlockValidationError'; }
+}
+
+export class CmsBlockWorkflowError extends Error {
+    constructor(message: string) { super(message); this.name = 'CmsBlockWorkflowError'; }
+}
diff --git a/services/cmsblock/src/model/cmsblock/generator.ts b/services/cmsblock/src/model/cmsblock/generator.ts
new file mode 100644
index 00000000..fa4b5935
--- /dev/null
+++ b/services/cmsblock/src/model/cmsblock/generator.ts
@@ -0,0 +1,118 @@
+// Deterministic stand-in for the future AI editor. No user-authored HTML is executed.
+// Hard-coded compositions corresponding to the three visual reference images.
+// AI image interpretation will replace this mapping in a later iteration.
+import type {CmsBlockDraft, CmsBlockLayoutId, CmsBlockSource, CmsBlockTemplateId} from './types';
+import {CmsBlockValidationError} from './errors';
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+    typeof value === 'object' && value !== null && !Array.isArray(value);
+const isTemplateId = (value: unknown): value is CmsBlockTemplateId =>
+    typeof value === 'string' && ['editorial', 'feature', 'promotion'].includes(value);
+const isLayoutId = (value: unknown): value is CmsBlockLayoutId =>
+    typeof value === 'string' && ['image-above', 'image-left', 'image-right'].includes(value);
+
+// Deterministic stand-in for a future AI model. Preserves legacy HTML/CSS.
+const templates: Record<CmsBlockTemplateId, {background: string; foreground: string; accent: string}> = {
+    editorial: {background: '#F7F4EF', foreground: '#243F3A', accent: '#456A63'},
+    feature: {background: '#F1F8F8', foreground: '#234453', accent: '#24717E'},
+    promotion: {background: '#1D2C39', foreground: '#FFFFFF', accent: '#F2B65C'},
+};
+
+const legacyLayouts: Record<CmsBlockTemplateId, CmsBlockLayoutId> = {editorial: 'image-above', feature: 'image-left', promotion: 'image-right'};
+
+export function validateDraft(value: unknown): CmsBlockDraft {
+    const input = isRecord(value) ? value : {};
+    const source = isRecord(input.source) ? input.source : {};
+    if ((source.format !== 'text' && source.format !== 'html') ||
+        typeof source.content !== 'string' ||
+        !source.content.trim() || source.content.length > 100_000 ||
+        !isTemplateId(input.templateId) ||
+        (input.layoutId !== undefined && !isLayoutId(input.layoutId))) {
+        throw new CmsBlockValidationError(
+            'Provide content (up to 100,000 characters) and a valid template.'
+        );
+    }
+    return {
+        source: {format: source.format, content: source.content},
+        templateId: input.templateId,
+        layoutId: input.layoutId ?? legacyLayouts[input.templateId],
+    };
+}
+
+function escapeHtml(value: string): string {
+    return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+function extractText(source: CmsBlockSource): string {
+    if (source.format === 'text') return source.content;
+    return source.content
+        .replace(/<(script|style|iframe|object|svg)\b[^>]*>[\s\S]*?<\/\1\s*>/gi, '')
+        .replace(/<\s*br\s*\/?\s*>/gi, '\n')
+        .replace(/<\s*\/\s*(p|h[1-6]|li|div|section)\s*>/gi, '\n\n')
+        .replace(/<[^>]*>/g, ' ')
+        .replace(/&nbsp;/gi, ' ')
+        .replace(/&lt;/gi, '<')
+        .replace(/&gt;/gi, '>')
+        .replace(/&quot;/gi, '"')
+        .replace(/&#39;/gi, "'")
+        .replace(/&amp;/gi, '&');
+}
+
+function extractImages(source: CmsBlockSource): string[] {
+    if (source.format !== 'html') return [];
+    const tags = source.content.match(/<img\b[^>]*>/gi) ?? [];
+    return tags.slice(0, 3).flatMap(tag => {
+        const src = tag.match(/\bsrc\s*=\s*(?:"([^"]+)"|'([^']+)')/i)?.slice(1).find(Boolean);
+        const alt = tag.match(/\balt\s*=\s*(?:"([^"]*)"|'([^']*)')/i)?.slice(1).find(v => v !== undefined) ?? '';
+        try {
+            if (!src) return [];
+            const url = new URL(src);
+            if (url.protocol !== 'https:') return [];
+            return [`<img src="${escapeHtml(url.href)}" alt="${escapeHtml(alt)}" loading="lazy">`];
+        } catch {
+            return [];
+        }
+    });
+}
+
+export function generateBlock(draft: CmsBlockDraft): {html: string; css: string} {
+    const {source, templateId, layoutId} = validateDraft(draft);
+    const palette = templates[templateId];
+    const lines = extractText(source).split(/\n+/).map(x => x.trim()).filter(Boolean);
+    const heading = escapeHtml(lines.shift() ?? 'Content block');
+    const paragraphs = lines.map(line => `<p>${escapeHtml(line)}</p>`).join('\n');
+    const images = extractImages(source);
+    const gallery = images.length ? `<figure class="cmsblock-media">${images.join('')}</figure>` : '';
+    // The data attribute is the boundary for generated CSS on standard DOM.
+    const html = `<section data-cmsblock="demo" class="cmsblock-content cmsblock--${templateId} cmsblock-layout--${layoutId}">
+  <div class="cmsblock-copy"><h2>${heading}</h2>${paragraphs}</div>
+  ${gallery}
+</section>`;
+    const css = `[data-cmsblock="demo"] {
+  box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr);
+  gap: 1.25rem; padding: clamp(1.25rem, 4vw, 3rem); border-radius: 1rem;
+  background: ${palette.background}; color: ${palette.foreground}; font-family: system-ui, sans-serif;
+  border: 1px solid ${palette.accent}33;
+}
+[data-cmsblock="demo"] * { box-sizing: border-box; }
+[data-cmsblock="demo"] h2 { color: ${palette.accent}; font-size: clamp(1.6rem, 3vw, 2.6rem); margin: 0 0 1rem; line-height: 1.15; }
+[data-cmsblock="demo"] p { max-width: 68ch; margin: 0 0 0.85rem; line-height: 1.7; overflow-wrap: anywhere; }
+[data-cmsblock="demo"] .cmsblock-media { margin: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
+[data-cmsblock="demo"] img { display: block; width: 100%; max-width: 100%; height: auto; max-height: 360px; border-radius: 0.75rem; object-fit: cover; }
+[data-cmsblock="demo"].cmsblock-layout--image-above .cmsblock-media { grid-row: 1; }
+[data-cmsblock="demo"].cmsblock-layout--image-above .cmsblock-copy { grid-row: 2; }
+[data-cmsblock="demo"].cmsblock--promotion h2 { font-weight: 800; text-transform: uppercase; }
+[data-cmsblock="demo"].cmsblock--promotion p { color: #E2E8F0; }
+@media (min-width: 800px) {
+  [data-cmsblock="demo"].cmsblock-layout--image-left:has(.cmsblock-media),
+  [data-cmsblock="demo"].cmsblock-layout--image-right:has(.cmsblock-media) {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
+  }
+  [data-cmsblock="demo"].cmsblock-layout--image-left .cmsblock-media { grid-column: 1; grid-row: 1; }
+  [data-cmsblock="demo"].cmsblock-layout--image-left .cmsblock-copy { grid-column: 2; grid-row: 1; }
+  [data-cmsblock="demo"].cmsblock-layout--image-right .cmsblock-copy { grid-column: 1; grid-row: 1; }
+  [data-cmsblock="demo"].cmsblock-layout--image-right .cmsblock-media { grid-column: 2; grid-row: 1; }
+}`;
+    return {html, css};
+}
diff --git a/services/cmsblock/src/model/cmsblock/types.ts b/services/cmsblock/src/model/cmsblock/types.ts
new file mode 100644
index 00000000..cc13f65b
--- /dev/null
+++ b/services/cmsblock/src/model/cmsblock/types.ts
@@ -0,0 +1,26 @@
+export type CmsBlockTemplateId = 'editorial' | 'feature' | 'promotion';
+export type CmsBlockLayoutId = 'image-above' | 'image-left' | 'image-right';
+export type CmsBlockSource = {format: 'text' | 'html'; content: string};
+export type CmsBlockDraft = {
+    source: CmsBlockSource;
+    templateId: CmsBlockTemplateId;
+    layoutId: CmsBlockLayoutId;
+};
+export type CmsBlockRevision = {
+    html: string;
+    css: string;
+    revision: number;
+    status: 'inreview' | 'approved';
+    // Optional in records persisted before style/layout metadata existed.
+    templateId?: CmsBlockTemplateId;
+    layoutId?: CmsBlockLayoutId;
+};
+export type CmsBlockRecord = {
+    id: 'demo';
+    source: CmsBlockSource;
+    templateId: CmsBlockTemplateId;
+    layoutId?: CmsBlockLayoutId; // Legacy persisted records have no layoutId.
+    revision: number;
+    pending: CmsBlockRevision | null;
+    published: CmsBlockRevision | null;
+};

From bc7f3deb1c6dd2d42461135d9e1cd7f5d5dfc85d Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 20:28:59 +0200
Subject: [PATCH 22/28] refactor(cmsblock): port legacy JSON revision store to
 typed model

---
 .../src/model/cmsblock/cmsblock-store.ts      | 95 +++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 services/cmsblock/src/model/cmsblock/cmsblock-store.ts

diff --git a/services/cmsblock/src/model/cmsblock/cmsblock-store.ts b/services/cmsblock/src/model/cmsblock/cmsblock-store.ts
new file mode 100644
index 00000000..d7d29342
--- /dev/null
+++ b/services/cmsblock/src/model/cmsblock/cmsblock-store.ts
@@ -0,0 +1,95 @@
+import {readFile, mkdir, rename, writeFile, rm} from 'node:fs/promises';
+import {join} from 'node:path';
+import {randomUUID} from 'node:crypto';
+import {generateBlock, validateDraft} from './generator';
+import {CmsBlockWorkflowError} from './errors';
+import type {CmsBlockRecord, CmsBlockDraft} from './types';
+
+export class CmsBlockStore {
+    private readonly file: string;
+    private queue: Promise<unknown> = Promise.resolve();
+
+    constructor(private readonly directory: string) {
+        this.directory = directory;
+        this.file = join(directory, 'demo.json');
+    }
+
+    async get(): Promise<CmsBlockRecord | null> {
+        await this.queue;
+        try {
+            return JSON.parse(await readFile(this.file, 'utf8')) as CmsBlockRecord;
+        } catch (error) {
+            if (error?.code === 'ENOENT') return null;
+            throw error;
+        }
+    }
+
+    private async mutate(change: (current: CmsBlockRecord | null) => CmsBlockRecord): Promise<CmsBlockRecord> {
+        const task = this.queue.then(async () => {
+            let current = null;
+            try {
+                current = JSON.parse(await readFile(this.file, 'utf8'));
+            } catch (error) {
+                if (error?.code !== 'ENOENT') throw error;
+            }
+            const next = change(current);
+            await mkdir(this.directory, {recursive: true});
+            const tmp = join(this.directory, `.demo-${randomUUID()}.tmp`);
+            try {
+                await writeFile(tmp, JSON.stringify(next, null, 2) + '\n', {flag: 'wx', mode: 0o600});
+                await rename(tmp, this.file);
+            } finally {
+                await rm(tmp, {force: true});
+            }
+            return next;
+        });
+        this.queue = task.catch(() => undefined);
+        return task;
+    }
+
+    save(input: unknown): Promise<CmsBlockRecord> {
+        const draft: CmsBlockDraft = validateDraft(input);
+        return this.mutate(current => ({
+            id: 'demo',
+            ...draft,
+            revision: current?.revision ?? 0,
+            pending: null,
+            published: current?.published ?? null,
+        }));
+    }
+
+    generate(): Promise<CmsBlockRecord> {
+        return this.mutate(current => {
+            if (!current) throw new CmsBlockWorkflowError('Save the source content before generating.');
+            const revision = current.revision + 1;
+            return {
+                ...current,
+                revision,
+                pending: {
+                    ...generateBlock(current),
+                    templateId: current.templateId,
+                    layoutId: current.layoutId ?? ({editorial: 'image-above', feature: 'image-left', promotion: 'image-right'})[current.templateId],
+                    revision, status: 'inreview',
+                },
+            };
+        });
+    }
+
+    approve(): Promise<CmsBlockRecord> {
+        return this.mutate(current => {
+            if (!current?.pending) throw new CmsBlockWorkflowError('Generate a draft before approving.');
+            return {
+                ...current,
+                published: {...current.pending, status: 'approved'},
+                pending: null,
+            };
+        });
+    }
+
+    reject(): Promise<CmsBlockRecord> {
+        return this.mutate(current => {
+            if (!current?.pending) throw new CmsBlockWorkflowError('There is no draft to reject.');
+            return {...current, pending: null};
+        });
+    }
+}

From e51fa6873e570fb604133c5535574d7725bff008 Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 20:29:47 +0200
Subject: [PATCH 23/28] feat(cmsblock): restore legacy JSON endpoints through
 Express controllers

---
 services/cmsblock/package.json                |  5 +-
 services/cmsblock/src/access/jsonParser.ts    | 10 ++--
 services/cmsblock/src/config.ts               | 31 +++++--------
 .../src/controller/cmsblock-handler.ts        | 46 +++++++++++++++++++
 services/cmsblock/src/index.ts                |  4 +-
 services/cmsblock/src/lib/cors-setup.ts       | 28 +++--------
 .../cmsblock/src/lib/initilisers/index.ts     | 23 ++++++----
 .../cmsblock/src/routes/cmsblock-router.ts    | 22 +++++++++
 services/cmsblock/src/routes/index.ts         | 10 ++--
 9 files changed, 114 insertions(+), 65 deletions(-)
 create mode 100644 services/cmsblock/src/controller/cmsblock-handler.ts
 create mode 100644 services/cmsblock/src/routes/cmsblock-router.ts

diff --git a/services/cmsblock/package.json b/services/cmsblock/package.json
index c9f7fc51..754ec742 100644
--- a/services/cmsblock/package.json
+++ b/services/cmsblock/package.json
@@ -2,12 +2,13 @@
   "name": "@reactedge/cmsblock",
   "version": "0.1.0",
   "private": true,
-  "description": "Cmsblock Express service",
+  "description": "CMSBlock Express service",
   "type": "module",
   "scripts": {
     "dev": "tsx watch src/index.ts",
     "start": "node --import tsx src/index.ts",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "node --import tsx --test test/*.test.ts"
   },
   "dependencies": {
     "@opentelemetry/api": "^1.9.1",
diff --git a/services/cmsblock/src/access/jsonParser.ts b/services/cmsblock/src/access/jsonParser.ts
index 94ec71ea..a3d8bd3d 100644
--- a/services/cmsblock/src/access/jsonParser.ts
+++ b/services/cmsblock/src/access/jsonParser.ts
@@ -1,8 +1,6 @@
-import express, {Application} from "express";
+import type {Application} from 'express';
+import express from 'express';
 
-export const setupJsonBodyParse = (app: Application) => {
-    app.use(express.json())
-    app.use(express.urlencoded({
-        extended: true
-    }))
+export function setupJsonBodyParse(app: Application): void {
+    app.use(express.json({limit: '120kb'}));
 }
diff --git a/services/cmsblock/src/config.ts b/services/cmsblock/src/config.ts
index a70e24ae..06232007 100644
--- a/services/cmsblock/src/config.ts
+++ b/services/cmsblock/src/config.ts
@@ -1,26 +1,17 @@
 import dotenv from 'dotenv';
-dotenv.config({quiet: true});
-
-export type Config = {
-    port: number;
-    frontendUrl: string;
-    route: {
-        servicePrefix: string;
-    };
-    observability: {
-        otelHost: string;
-        serviceName: string;
-    };
-};
+import {resolve} from 'node:path';
+import {fileURLToPath} from 'node:url';
 
-export const config: Config = {
+dotenv.config({quiet: true});
+export const config = {
     port: Number(process.env.PORT ?? '4190'),
-    frontendUrl: process.env.FRONTEND_URL ?? 'http://localhost:3000',
-    route: {
-        servicePrefix: '/cmsblock'
-    },
+    frontendUrl: process.env.FRONTEND_URL ??
+        'http://localhost:5173,http://127.0.0.1:5173,http://localhost:3001,http://127.0.0.1:3001',
+    dataDirectory: resolve(process.env.CMSBLOCK_DATA_DIR ??
+        fileURLToPath(new URL('../data/', import.meta.url))),
+    route: {servicePrefix: '/cmsblock'},
     observability: {
         otelHost: process.env.OTEL_HOST ?? 'http://localhost:4318',
-        serviceName: process.env.OTEL_SERVICE_NAME ?? 'reactedge-cmsblock'
-    }
+        serviceName: process.env.OTEL_SERVICE_NAME ?? 'reactedge-cmsblock',
+    },
 };
diff --git a/services/cmsblock/src/controller/cmsblock-handler.ts b/services/cmsblock/src/controller/cmsblock-handler.ts
new file mode 100644
index 00000000..3b88511d
--- /dev/null
+++ b/services/cmsblock/src/controller/cmsblock-handler.ts
@@ -0,0 +1,46 @@
+import type {Request, Response} from 'express';
+import {CmsBlockValidationError, CmsBlockWorkflowError} from '../model/cmsblock/errors';
+import type {CmsBlockStore} from '../model/cmsblock/cmsblock-store';
+import type {Operation} from '../observability/operation';
+
+export class CmsBlockHandler {
+    private store(res: Response): CmsBlockStore {
+        return res.app.locals.cmsblocks as CmsBlockStore;
+    }
+
+    private async handle(res: Response, run: () => Promise<unknown>): Promise<void> {
+        const operation = res.locals.routeOperation as Operation;
+        try {
+            const result = await run();
+            if (result === null) {
+                operation.complete(404);
+                res.status(404).json({error: 'Block not created yet.'});
+                return;
+            }
+            operation.succeed();
+            res.json(result);
+        } catch (error) {
+            operation.fail(error);
+            const invalid = error instanceof CmsBlockValidationError ||
+                error instanceof CmsBlockWorkflowError;
+            res.status(invalid ? 400 : 500).json({
+                error: error instanceof Error ? error.message : 'CMSBlock operation failed.',
+            });
+        }
+    }
+
+    get = (_req: Request, res: Response): Promise<void> =>
+        this.handle(res, () => this.store(res).get());
+
+    save = (req: Request, res: Response): Promise<void> =>
+        this.handle(res, () => this.store(res).save(req.body));
+
+    generate = (_req: Request, res: Response): Promise<void> =>
+        this.handle(res, () => this.store(res).generate());
+
+    approve = (_req: Request, res: Response): Promise<void> =>
+        this.handle(res, () => this.store(res).approve());
+
+    reject = (_req: Request, res: Response): Promise<void> =>
+        this.handle(res, () => this.store(res).reject());
+}
diff --git a/services/cmsblock/src/index.ts b/services/cmsblock/src/index.ts
index f411561e..89f4e255 100644
--- a/services/cmsblock/src/index.ts
+++ b/services/cmsblock/src/index.ts
@@ -1,3 +1,3 @@
-import {startServer} from "./lib/server";
+import {startServer} from './lib/server';
 
-startServer()
\ No newline at end of file
+void startServer();
diff --git a/services/cmsblock/src/lib/cors-setup.ts b/services/cmsblock/src/lib/cors-setup.ts
index f59b809f..83f06ebd 100644
--- a/services/cmsblock/src/lib/cors-setup.ts
+++ b/services/cmsblock/src/lib/cors-setup.ts
@@ -1,22 +1,8 @@
-import {config} from "../config";
-import cors from "cors"
+import cors from 'cors';
+import {config} from '../config';
 
-// https://brianflove.com/posts/2017-03-22-express-cors-typescript/
-export const corsOptions = () => {
-    const allowedOrigins = config.frontendUrl
-        .split(',')
-        .map(origin => origin.trim())
-
-    const options = {
-        allowedHeaders: [
-            'Origin',
-            'Accept'
-        ],
-        credentials: true,
-        methods: 'GET,HEAD,OPTIONS,PUT,PATCH,POST,DELETE',
-        origin: allowedOrigins,
-        preflightContinue: false,
-    };
-
-    return cors(options)
-}
\ No newline at end of file
+export function corsOptions() {
+    const allowed = config.frontendUrl.split(',').map(x => x.trim()).filter(Boolean);
+    const checker = cors({origin: allowed, methods: 'GET,HEAD,OPTIONS,PUT,POST', allowedHeaders: ['Content-Type']});
+    return checker;
+}
diff --git a/services/cmsblock/src/lib/initilisers/index.ts b/services/cmsblock/src/lib/initilisers/index.ts
index aad72b39..cfbfcbe7 100644
--- a/services/cmsblock/src/lib/initilisers/index.ts
+++ b/services/cmsblock/src/lib/initilisers/index.ts
@@ -1,12 +1,15 @@
-import {Application} from "express";
-import access from "../../access/index"
-import routes from "../../routes/index.js";
-import {setupTelemetry} from "../../observability/tracing";
-import {createRequestOperationMiddleware} from "../../observability/request-operation-middleware";
+import type {Application} from 'express';
+import access from '../../access/index';
+import routes from '../../routes/index';
+import {config} from '../../config';
+import {CmsBlockStore} from '../../model/cmsblock/cmsblock-store';
+import {setupTelemetry} from '../../observability/tracing';
+import {createRequestOperationMiddleware} from '../../observability/request-operation-middleware';
 
-export const initialiseApp = async (app: Application) => {
-    setupTelemetry(app)
-    app.use(createRequestOperationMiddleware('cmsblock.request'))
-    access(app)
-    routes(app)
+export async function initialiseApp(app: Application): Promise<void> {
+    app.locals.cmsblocks = new CmsBlockStore(config.dataDirectory);
+    setupTelemetry(app);
+    app.use(createRequestOperationMiddleware('cmsblock.request'));
+    access(app);
+    routes(app);
 }
diff --git a/services/cmsblock/src/routes/cmsblock-router.ts b/services/cmsblock/src/routes/cmsblock-router.ts
new file mode 100644
index 00000000..571167bc
--- /dev/null
+++ b/services/cmsblock/src/routes/cmsblock-router.ts
@@ -0,0 +1,22 @@
+import express from 'express';
+import type {Application} from 'express';
+import {config} from '../config';
+import {CmsBlockHandler} from '../controller/cmsblock-handler';
+import {corsOptions} from '../lib/cors-setup';
+import {createRouteOperationMiddleware} from '../observability/request-operation-middleware';
+
+export function setupCmsBlockRoutes(app: Application): void {
+    const router = express.Router();
+    const handler = new CmsBlockHandler();
+    router.use(corsOptions());
+    router.use((_req, res, next) => {
+        res.setHeader('Cache-Control', 'no-store');
+        next();
+    });
+    router.get('/blocks/demo', createRouteOperationMiddleware('cmsblock.get'), handler.get);
+    router.put('/blocks/demo', createRouteOperationMiddleware('cmsblock.save'), handler.save);
+    router.post('/blocks/demo/generate', createRouteOperationMiddleware('cmsblock.generate'), handler.generate);
+    router.post('/blocks/demo/approve', createRouteOperationMiddleware('cmsblock.approve'), handler.approve);
+    router.post('/blocks/demo/reject', createRouteOperationMiddleware('cmsblock.reject'), handler.reject);
+    app.use(config.route.servicePrefix, router);
+}
diff --git a/services/cmsblock/src/routes/index.ts b/services/cmsblock/src/routes/index.ts
index e59f0c2d..01fa13a6 100644
--- a/services/cmsblock/src/routes/index.ts
+++ b/services/cmsblock/src/routes/index.ts
@@ -1,6 +1,8 @@
-import {Application} from "express";
-import {setupStatusRoutes} from "./status-router";
+import type {Application} from 'express';
+import {setupStatusRoutes} from './status-router';
+import {setupCmsBlockRoutes} from './cmsblock-router';
 
-export default (app: Application) => {
-    setupStatusRoutes(app)
+export default function setupRoutes(app: Application): void {
+    setupStatusRoutes(app);
+    setupCmsBlockRoutes(app);
 }

From 5a2fd3f66869108721a94cf4106e8ce561982915 Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 20:30:26 +0200
Subject: [PATCH 24/28] test(cmsblock): verify restored Express routes and
 publishing lifecycle

---
 .github/workflows/cmsblock-scaffold.yml |  2 +
 services/cmsblock/test/flow.test.ts     | 84 +++++++++++++++++++++++++
 2 files changed, 86 insertions(+)
 create mode 100644 services/cmsblock/test/flow.test.ts

diff --git a/.github/workflows/cmsblock-scaffold.yml b/.github/workflows/cmsblock-scaffold.yml
index ca76643b..aefe2e64 100644
--- a/.github/workflows/cmsblock-scaffold.yml
+++ b/.github/workflows/cmsblock-scaffold.yml
@@ -28,6 +28,8 @@ jobs:
         run: npm ci
       - name: Typecheck scaffold
         run: npm run typecheck
+      - name: Verify CMSBlock legacy HTTP lifecycle
+        run: npm test
       - name: Start scaffold and verify status
         shell: bash
         run: |
diff --git a/services/cmsblock/test/flow.test.ts b/services/cmsblock/test/flow.test.ts
new file mode 100644
index 00000000..009e8351
--- /dev/null
+++ b/services/cmsblock/test/flow.test.ts
@@ -0,0 +1,84 @@
+import assert from 'node:assert/strict';
+import {test} from 'node:test';
+import {mkdtemp, rm} from 'node:fs/promises';
+import {tmpdir} from 'node:os';
+import {join} from 'node:path';
+import {once} from 'node:events';
+import type {Server} from 'node:http';
+import express from 'express';
+import {CmsBlockStore} from '../src/model/cmsblock/cmsblock-store';
+import {generateBlock, validateDraft} from '../src/model/cmsblock/generator';
+import {setupCmsBlockRoutes} from '../src/routes/cmsblock-router';
+
+test('legacy CMSBlock routes preserve the author -> review -> publish lifecycle', async () => {
+    const directory = await mkdtemp(join(tmpdir(), 'reactedge-cmsblock-'));
+    const app = express();
+    app.locals.cmsblocks = new CmsBlockStore(directory);
+    // Route operation is a harmless test double; the production initializer sets up OTEL.
+    app.use((req, res, next) => {
+        res.locals.routeOperation = {succeed() {}, fail() {}, complete() {}};
+        next();
+    });
+    app.use(express.json());
+    // In production the same routes use the scaffolded OTEL middleware.
+    const {setupCmsBlockRoutes} = await import('../src/routes/cmsblock-router');
+    setupCmsBlockRoutes(app);
+    // Tests provide dummy operations so routes can run without a collector.
+    const server: Server = app.listen(0, '127.0.0.1');
+    await once(server, 'listening');
+    try {
+        const addr = server.address();
+        assert.ok(addr && typeof addr !== 'string');
+        const base = `http://127.0.0.1:${addr.port}/cmsblock/blocks/demo`;
+        const request = async (suffix: string, method: string, body?: unknown) => {
+            const response = await fetch(base + suffix, {
+                method, headers: {'Content-Type': 'application/json'},
+                ...(body === undefined ? {} : {body: JSON.stringify(body)}),
+            });
+            return {status: response.status, data: await response.json()};
+        };
+        assert.equal((await request('', 'GET')).status, 404);
+        const draft = {
+            source: {format: 'html', content: '<h2>Welcome</h2><p>Our collection</p><img src="https://example.com/art.jpg" alt="Art">'},
+            templateId: 'editorial', layoutId: 'image-right',
+        };
+        const saved = await request('', 'PUT', draft);
+        assert.equal(saved.status, 200);
+        assert.equal(saved.data.layoutId, 'image-right');
+
+        const review = await request('/generate', 'POST');
+        assert.equal(review.status, 200);
+        assert.equal(review.data.pending.status, 'inreview');
+        assert.match(review.data.pending.html, /cmsblock-layout--image-right/);
+        assert.equal(review.data.published, null);
+
+        const approved = await request('/approve', 'POST');
+        assert.equal(approved.data.published.revision, 1);
+        assert.equal(approved.data.pending, null);
+        const newer = await request('', 'PUT', {...draft, layoutId: 'image-left'});
+        assert.equal(newer.data.published.revision, 1);
+        const refreshed = await request('/generate', 'POST');
+        assert.equal(refreshed.data.pending.revision, 2);
+        assert.match(refreshed.data.pending.html, /cmsblock-layout--image-left/);
+        assert.equal(refreshed.data.published.revision, 1);
+        const rejected = await request('/reject', 'POST');
+        assert.equal(rejected.data.pending, null);
+        assert.equal((await request('', 'GET')).data.published.revision, 1);
+
+        assert.equal((await request('', 'PUT', {source: {format: 'text', content: ''}, templateId: 'feature'})).status, 400);
+    } finally {
+        await new Promise<void>((resolve, reject) => server.close(error => error ? reject(error) : resolve()));
+        await rm(directory, {recursive: true, force: true});
+    }
+});
+
+test('legacy validation, HTML escaping and style-layout combinations', () => {
+    const source = {format: 'html' as const,
+        content: '<h2>Hello</h2><p>Text</p><script>alert(1)</script><img src="https://example.com/photo.jpg" alt="Art">'};
+    const left = generateBlock({source, templateId: 'promotion', layoutId: 'image-left'});
+    assert.match(left.html, /cmsblock-layout--image-left/);
+    assert.match(left.html, /https:\/\/example.com\/photo.jpg/);
+    assert.doesNotMatch(left.html, /<script/i);
+    assert.equal(validateDraft({source, templateId: 'feature'}).layoutId, 'image-left');
+    assert.throws(() => validateDraft({source, templateId: 'feature', layoutId: 'wrong'}));
+});

From c18bec167a8d51f8834bb562a793819716924dab Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 20:31:20 +0200
Subject: [PATCH 25/28] fix(cmsblock): type legacy JSON store and normalize
 optional layouts

---
 services/cmsblock/src/model/cmsblock/cmsblock-store.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/services/cmsblock/src/model/cmsblock/cmsblock-store.ts b/services/cmsblock/src/model/cmsblock/cmsblock-store.ts
index d7d29342..b571d9b8 100644
--- a/services/cmsblock/src/model/cmsblock/cmsblock-store.ts
+++ b/services/cmsblock/src/model/cmsblock/cmsblock-store.ts
@@ -10,7 +10,6 @@ export class CmsBlockStore {
     private queue: Promise<unknown> = Promise.resolve();
 
     constructor(private readonly directory: string) {
-        this.directory = directory;
         this.file = join(directory, 'demo.json');
     }
 
@@ -19,7 +18,7 @@ export class CmsBlockStore {
         try {
             return JSON.parse(await readFile(this.file, 'utf8')) as CmsBlockRecord;
         } catch (error) {
-            if (error?.code === 'ENOENT') return null;
+            if ((error as NodeJS.ErrnoException).code === 'ENOENT') return null;
             throw error;
         }
     }
@@ -30,7 +29,7 @@ export class CmsBlockStore {
             try {
                 current = JSON.parse(await readFile(this.file, 'utf8'));
             } catch (error) {
-                if (error?.code !== 'ENOENT') throw error;
+                if ((error as NodeJS.ErrnoException).code !== 'ENOENT') throw error;
             }
             const next = change(current);
             await mkdir(this.directory, {recursive: true});
@@ -66,9 +65,9 @@ export class CmsBlockStore {
                 ...current,
                 revision,
                 pending: {
-                    ...generateBlock(current),
+                    ...generateBlock(validateDraft(current)),
                     templateId: current.templateId,
-                    layoutId: current.layoutId ?? ({editorial: 'image-above', feature: 'image-left', promotion: 'image-right'})[current.templateId],
+                    layoutId: validateDraft(current).layoutId,
                     revision, status: 'inreview',
                 },
             };

From 4d456e6e77449bf90c9259518d009e0a5faae36d Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 20:32:11 +0200
Subject: [PATCH 26/28] test(cmsblock): provide route span stub to HTTP
 lifecycle test

---
 services/cmsblock/test/flow.test.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/services/cmsblock/test/flow.test.ts b/services/cmsblock/test/flow.test.ts
index 009e8351..e3b55543 100644
--- a/services/cmsblock/test/flow.test.ts
+++ b/services/cmsblock/test/flow.test.ts
@@ -14,6 +14,9 @@ test('legacy CMSBlock routes preserve the author -> review -> publish lifecycle'
     const directory = await mkdtemp(join(tmpdir(), 'reactedge-cmsblock-'));
     const app = express();
     app.locals.cmsblocks = new CmsBlockStore(directory);
+    app.locals.telemetry = {
+        startChildOperation: () => ({succeed() {}, fail() {}, complete() {}}),
+    };
     // Route operation is a harmless test double; the production initializer sets up OTEL.
     app.use((req, res, next) => {
         res.locals.routeOperation = {succeed() {}, fail() {}, complete() {}};

From 0e7c4ecba86348d91fed8bc24c1c6a750f873472 Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Fri, 9 Oct 2026 20:49:10 +0200
Subject: [PATCH 27/28] chore(cmsblock): prepare first-iteration PR and drop
 migrated backup

---
 services/cmsblock/.gitignore                  |   3 +
 services/cmsblock/README.md                   |  68 +++++++++--
 services/cmsblock/src/lib/server.ts           |   2 +-
 services/cmsblock_bak/.env.sample             |   5 -
 services/cmsblock_bak/.gitignore              |   1 -
 services/cmsblock_bak/README.md               |  43 -------
 services/cmsblock_bak/package.json            |  12 --
 services/cmsblock_bak/src/access/index.ts     |   6 -
 .../cmsblock_bak/src/access/jsonParser.ts     |   6 -
 services/cmsblock_bak/src/config.ts           |  19 ----
 services/cmsblock_bak/src/generator.mjs       | 106 ------------------
 services/cmsblock_bak/src/index.mjs           |  13 ---
 services/cmsblock_bak/src/server.mjs          |  61 ----------
 services/cmsblock_bak/src/store.mjs           |  91 ---------------
 services/cmsblock_bak/test/flow.test.mjs      | 100 -----------------
 services/cmsblock_bak/tsconfig.json           |  13 ---
 16 files changed, 62 insertions(+), 487 deletions(-)
 create mode 100644 services/cmsblock/.gitignore
 delete mode 100644 services/cmsblock_bak/.env.sample
 delete mode 100644 services/cmsblock_bak/.gitignore
 delete mode 100644 services/cmsblock_bak/README.md
 delete mode 100644 services/cmsblock_bak/package.json
 delete mode 100644 services/cmsblock_bak/src/access/index.ts
 delete mode 100644 services/cmsblock_bak/src/access/jsonParser.ts
 delete mode 100644 services/cmsblock_bak/src/config.ts
 delete mode 100644 services/cmsblock_bak/src/generator.mjs
 delete mode 100644 services/cmsblock_bak/src/index.mjs
 delete mode 100644 services/cmsblock_bak/src/server.mjs
 delete mode 100644 services/cmsblock_bak/src/store.mjs
 delete mode 100644 services/cmsblock_bak/test/flow.test.mjs
 delete mode 100644 services/cmsblock_bak/tsconfig.json

diff --git a/services/cmsblock/.gitignore b/services/cmsblock/.gitignore
new file mode 100644
index 00000000..e5980245
--- /dev/null
+++ b/services/cmsblock/.gitignore
@@ -0,0 +1,3 @@
+# CMSBlock drafts and environment secrets are runtime data.
+data/
+.env
diff --git a/services/cmsblock/README.md b/services/cmsblock/README.md
index 5f1bd85f..587d0355 100644
--- a/services/cmsblock/README.md
+++ b/services/cmsblock/README.md
@@ -1,20 +1,68 @@
-# Cmsblock
+# CMSBlock — first iteration
 
-Generated Express service with request-scoped OpenTelemetry tracing.
+This service was scaffolded from Operational Intelligence's `create_server`
+MCP template, like ReactEdge's ListingRecord service. It uses Express,
+TypeScript, request/route OpenTelemetry spans and separate access, controller,
+routes, and model layers.
 
-## Run
+This **development-only** iteration supports a single block, `demo`,
+with a deterministic generator (not an AI model).
+
+## Start locally
 
 ```bash
-cp .env.sample .env
-npm install
-npm start
+npm --prefix services/cmsblock ci
+npm --prefix services/cmsblock start
 ```
 
-Verify the example route:
+Default HTTP address: `http://127.0.0.1:4190`.
+
+For local development, start the CMSBlock widget separately:
 
 ```bash
-curl --fail http://localhost:4190/cmsblock/status
+npm --prefix widgets/cmsblock dev
 ```
 
-The trace contains a `cmsblock.request` parent span and a
-`cmsblock.status` route span.
+The widget uses `http://127.0.0.1:4190/cmsblock/blocks/demo` by default.
+Set `VITE_CMSBLOCK_URL` to override the service origin.
+
+## API
+
+| Method | Path | Action |
+| --- | --- | --- |
+| GET | `/cmsblock/status` | Scaffold status |
+| GET | `/cmsblock/blocks/demo` | Read saved block |
+| PUT | `/cmsblock/blocks/demo` | Save source, style and layout |
+| POST | `/cmsblock/blocks/demo/generate` | Generate a revision for review |
+| POST | `/cmsblock/blocks/demo/approve` | Publish the pending revision |
+| POST | `/cmsblock/blocks/demo/reject` | Discard the pending revision |
+
+Source content remains separate from pending and approved HTML/CSS. New
+drafts do not change the approved revision until approval. The JSON store
+uses `data/demo.json` by default and is compatible with the old prototype.
+The generator supports three editorial styles and three image arrangements.
+
+Set `PORT`, `CMSBLOCK_DATA_DIR`, `FRONTEND_URL` (comma-separated CORS
+origins), `OTEL_HOST`, and `OTEL_SERVICE_NAME` as needed.
+
+## Checks
+
+```bash
+npm --prefix services/cmsblock run typecheck
+npm --prefix services/cmsblock test
+mise run complexity -- cmsblock
+```
+
+CI also exercises Express startup and the status endpoint.
+
+## Limitations
+
+**Do not expose this API to the public internet.** It has no authentication,
+authorization or rate limiting. It listens on loopback by default; CORS is
+not an authentication mechanism. The deterministic generator converts
+supplied HTML to escaped text and retains up to three HTTPS image URLs;
+it does not preserve arbitrary HTML or interpret style reference images.
+The widget uses sandboxed iframe previews. Published output will require
+separate security review and sanitisation before it can be served directly
+as SSR markup. Telemetry exporter delivery is not covered by the current
+HTTP lifecycle test.
diff --git a/services/cmsblock/src/lib/server.ts b/services/cmsblock/src/lib/server.ts
index 3b9054fa..5b6d6433 100644
--- a/services/cmsblock/src/lib/server.ts
+++ b/services/cmsblock/src/lib/server.ts
@@ -12,7 +12,7 @@ export const startServer = async () => {
 
     try {
         await new Promise<void>((resolve, reject) => {
-            const server = app.listen(port, (error?: Error) => {
+            const server = app.listen(port, '127.0.0.1', (error?: Error) => {
                 if (error) {
                     reject(error);
                     return;
diff --git a/services/cmsblock_bak/.env.sample b/services/cmsblock_bak/.env.sample
deleted file mode 100644
index 273ec3f2..00000000
--- a/services/cmsblock_bak/.env.sample
+++ /dev/null
@@ -1,5 +0,0 @@
-PORT=4190
-FRONTEND_URL=http://localhost:5173,http://127.0.0.1:5173,http://localhost:3001,http://127.0.0.1:3001
-# CMSBLOCK_DATA_DIR=/absolute/path/to/cmsblock/data
-OTEL_HOST=http://localhost:4318
-OTEL_SERVICE_NAME=reactedge-cmsblock
diff --git a/services/cmsblock_bak/.gitignore b/services/cmsblock_bak/.gitignore
deleted file mode 100644
index 8fce6030..00000000
--- a/services/cmsblock_bak/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-data/
diff --git a/services/cmsblock_bak/README.md b/services/cmsblock_bak/README.md
deleted file mode 100644
index ef7e24ff..00000000
--- a/services/cmsblock_bak/README.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# CMSBlock vertical slice
-
-This is a **development-only API** for the first CMSBlock end-to-end experiment.
-
-It persists one hard-coded block, `demo`, into `data/demo.json` (ignored by git),
-and uses a deterministic HTML/CSS generator in place of an AI provider.
-
-From the platform root:
-
-```bash
-npm --prefix services/cmsblock start
-npm --prefix services/cmsblock test
-npm --prefix widgets/cmsblock dev
-```
-
-The widget calls `http://127.0.0.1:4190/cmsblock/blocks/demo` by default.
-Set `PORT`, `CMSBLOCK_DATA_DIR`, `FRONTEND_URL` (comma-separated CORS
-origins) for the API, or `VITE_CMSBLOCK_URL` when building the widget.
-
-Flow: edit source + choose template -> **Save** -> **Generate draft** ->
-**Review** -> **Approve** -> **View**. Source and approved output stay separate;
-generating a new draft does not replace the last approved output.
-
-**Do not expose this service on the public internet.** It deliberately has
-no authentication, rate limiting or authorisation yet. CORS is not authentication.
-Generated output is displayed inside a sandboxed iframe; a future public SSR
-publisher must validate/sanitise AI-generated HTML and CSS before emitting it
-into the ordinary document.
-
-HTML input is simplified for this experiment: it is converted to text, with
-up to three HTTPS image references retained. Complex HTML formatting is not
-preserved by the mock generator.
-
-## Visual template references
-
-Three bundled SVG reference images replace the template dropdown:
-Editorial (image above copy), Feature (image left), Promotional (image right).
-The selection is saved using the existing `templateId` field and recorded
-in the generated revision, preserving the reference used for publication.
-
-The generator does **not** analyse these images yet. It maps each reference
-ID to a hard-coded responsive layout so the full image-selection → save →
-generate → review → approve → reload flow can be verified before adding AI.
diff --git a/services/cmsblock_bak/package.json b/services/cmsblock_bak/package.json
deleted file mode 100644
index 95724cfa..00000000
--- a/services/cmsblock_bak/package.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "@reactedge/cmsblock",
-  "version": "0.1.0",
-  "private": true,
-  "type": "module",
-  "engines": {"node": ">=20"},
-  "scripts": {
-    "start": "node src/index.mjs",
-    "dev": "node --watch src/index.mjs",
-    "test": "node --test test/*.test.mjs"
-  }
-}
diff --git a/services/cmsblock_bak/src/access/index.ts b/services/cmsblock_bak/src/access/index.ts
deleted file mode 100644
index 979daf98..00000000
--- a/services/cmsblock_bak/src/access/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type {Application} from 'express';
-import {setupJsonBodyParse} from './jsonParser';
-
-export default function setupAccess(app: Application): void {
-    setupJsonBodyParse(app);
-}
diff --git a/services/cmsblock_bak/src/access/jsonParser.ts b/services/cmsblock_bak/src/access/jsonParser.ts
deleted file mode 100644
index 85202353..00000000
--- a/services/cmsblock_bak/src/access/jsonParser.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import express from 'express';
-import type {Application} from 'express';
-
-export function setupJsonBodyParse(app: Application): void {
-    app.use(express.json({limit: '120kb'}));
-}
diff --git a/services/cmsblock_bak/src/config.ts b/services/cmsblock_bak/src/config.ts
deleted file mode 100644
index a6531c9f..00000000
--- a/services/cmsblock_bak/src/config.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import dotenv from 'dotenv';
-import {resolve} from 'node:path';
-import {fileURLToPath} from 'node:url';
-
-dotenv.config({quiet: true});
-
-export const config = {
-    port: Number(process.env.PORT ?? '4190'),
-    host: '127.0.0.1',
-    frontendUrl: process.env.FRONTEND_URL ??
-        'http://localhost:5173,http://127.0.0.1:5173,http://localhost:3001,http://127.0.0.1:3001',
-    dataDirectory: resolve(process.env.CMSBLOCK_DATA_DIR ??
-        fileURLToPath(new URL('../data/', import.meta.url))),
-    route: {servicePrefix: '/cmsblock'},
-    observability: {
-        otelHost: process.env.OTEL_HOST ?? 'http://localhost:4318',
-        serviceName: process.env.OTEL_SERVICE_NAME ?? 'reactedge-cmsblock',
-    },
-};
diff --git a/services/cmsblock_bak/src/generator.mjs b/services/cmsblock_bak/src/generator.mjs
deleted file mode 100644
index 6f8ab67d..00000000
--- a/services/cmsblock_bak/src/generator.mjs
+++ /dev/null
@@ -1,106 +0,0 @@
-// Deterministic stand-in for the future AI editor. No user-authored HTML is executed.
-// Hard-coded compositions corresponding to the three visual reference images.
-// AI image interpretation will replace this mapping in a later iteration.
-const templates = {
-    editorial: {background: '#F7F4EF', foreground: '#243F3A', accent: '#456A63'},
-    feature: {background: '#F1F8F8', foreground: '#234453', accent: '#24717E'},
-    promotion: {background: '#1D2C39', foreground: '#FFFFFF', accent: '#F2B65C'},
-};
-
-const layouts = new Set(['image-above', 'image-left', 'image-right']);
-const legacyLayouts = {editorial: 'image-above', feature: 'image-left', promotion: 'image-right'};
-
-export function validateDraft(value) {
-    if (!value || typeof value !== 'object' ||
-        !value.source || typeof value.source !== 'object' ||
-        !['text', 'html'].includes(value.source.format) ||
-        typeof value.source.content !== 'string' ||
-        value.source.content.trim().length === 0 ||
-        value.source.content.length > 100_000 ||
-        !Object.hasOwn(templates, value.templateId) ||
-        (value.layoutId !== undefined && !layouts.has(value.layoutId))) {
-        throw new Error('Provide content (up to 100,000 characters) and a valid template.');
-    }
-    return {
-        source: {format: value.source.format, content: value.source.content},
-        templateId: value.templateId,
-        layoutId: value.layoutId ?? legacyLayouts[value.templateId],
-    };
-}
-
-function escapeHtml(value) {
-    return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-}
-
-function extractText(source) {
-    if (source.format === 'text') return source.content;
-    return source.content
-        .replace(/<(script|style|iframe|object|svg)\b[^>]*>[\s\S]*?<\/\1\s*>/gi, '')
-        .replace(/<\s*br\s*\/?\s*>/gi, '\n')
-        .replace(/<\s*\/\s*(p|h[1-6]|li|div|section)\s*>/gi, '\n\n')
-        .replace(/<[^>]*>/g, ' ')
-        .replace(/&nbsp;/gi, ' ')
-        .replace(/&lt;/gi, '<')
-        .replace(/&gt;/gi, '>')
-        .replace(/&quot;/gi, '"')
-        .replace(/&#39;/gi, "'")
-        .replace(/&amp;/gi, '&');
-}
-
-function extractImages(source) {
-    if (source.format !== 'html') return [];
-    const tags = source.content.match(/<img\b[^>]*>/gi) ?? [];
-    return tags.slice(0, 3).flatMap(tag => {
-        const src = tag.match(/\bsrc\s*=\s*(?:"([^"]+)"|'([^']+)')/i)?.slice(1).find(Boolean);
-        const alt = tag.match(/\balt\s*=\s*(?:"([^"]*)"|'([^']*)')/i)?.slice(1).find(v => v !== undefined) ?? '';
-        try {
-            const url = new URL(src);
-            if (url.protocol !== 'https:') return [];
-            return [`<img src="${escapeHtml(url.href)}" alt="${escapeHtml(alt)}" loading="lazy">`];
-        } catch {
-            return [];
-        }
-    });
-}
-
-export function generateBlock(draft) {
-    const {source, templateId, layoutId} = validateDraft(draft);
-    const palette = templates[templateId];
-    const lines = extractText(source).split(/\n+/).map(x => x.trim()).filter(Boolean);
-    const heading = escapeHtml(lines.shift() ?? 'Content block');
-    const paragraphs = lines.map(line => `<p>${escapeHtml(line)}</p>`).join('\n');
-    const images = extractImages(source);
-    const gallery = images.length ? `<figure class="cmsblock-media">${images.join('')}</figure>` : '';
-    // The data attribute is the boundary for generated CSS on standard DOM.
-    const html = `<section data-cmsblock="demo" class="cmsblock-content cmsblock--${templateId} cmsblock-layout--${layoutId}">
-  <div class="cmsblock-copy"><h2>${heading}</h2>${paragraphs}</div>
-  ${gallery}
-</section>`;
-    const css = `[data-cmsblock="demo"] {
-  box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr);
-  gap: 1.25rem; padding: clamp(1.25rem, 4vw, 3rem); border-radius: 1rem;
-  background: ${palette.background}; color: ${palette.foreground}; font-family: system-ui, sans-serif;
-  border: 1px solid ${palette.accent}33;
-}
-[data-cmsblock="demo"] * { box-sizing: border-box; }
-[data-cmsblock="demo"] h2 { color: ${palette.accent}; font-size: clamp(1.6rem, 3vw, 2.6rem); margin: 0 0 1rem; line-height: 1.15; }
-[data-cmsblock="demo"] p { max-width: 68ch; margin: 0 0 0.85rem; line-height: 1.7; overflow-wrap: anywhere; }
-[data-cmsblock="demo"] .cmsblock-media { margin: 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
-[data-cmsblock="demo"] img { display: block; width: 100%; max-width: 100%; height: auto; max-height: 360px; border-radius: 0.75rem; object-fit: cover; }
-[data-cmsblock="demo"].cmsblock-layout--image-above .cmsblock-media { grid-row: 1; }
-[data-cmsblock="demo"].cmsblock-layout--image-above .cmsblock-copy { grid-row: 2; }
-[data-cmsblock="demo"].cmsblock--promotion h2 { font-weight: 800; text-transform: uppercase; }
-[data-cmsblock="demo"].cmsblock--promotion p { color: #E2E8F0; }
-@media (min-width: 800px) {
-  [data-cmsblock="demo"].cmsblock-layout--image-left:has(.cmsblock-media),
-  [data-cmsblock="demo"].cmsblock-layout--image-right:has(.cmsblock-media) {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
-  }
-  [data-cmsblock="demo"].cmsblock-layout--image-left .cmsblock-media { grid-column: 1; grid-row: 1; }
-  [data-cmsblock="demo"].cmsblock-layout--image-left .cmsblock-copy { grid-column: 2; grid-row: 1; }
-  [data-cmsblock="demo"].cmsblock-layout--image-right .cmsblock-copy { grid-column: 1; grid-row: 1; }
-  [data-cmsblock="demo"].cmsblock-layout--image-right .cmsblock-media { grid-column: 2; grid-row: 1; }
-}`;
-    return {html, css};
-}
diff --git a/services/cmsblock_bak/src/index.mjs b/services/cmsblock_bak/src/index.mjs
deleted file mode 100644
index 8b48531f..00000000
--- a/services/cmsblock_bak/src/index.mjs
+++ /dev/null
@@ -1,13 +0,0 @@
-import {fileURLToPath} from 'node:url';
-import {resolve} from 'node:path';
-import {createCmsBlockServer} from './server.mjs';
-
-const port = Number(process.env.PORT ?? 4190);
-const directory = resolve(process.env.CMSBLOCK_DATA_DIR ?? fileURLToPath(new URL('../data/', import.meta.url)));
-const origins = (process.env.FRONTEND_URL ?? 'http://localhost:5173,http://127.0.0.1:5173,http://localhost:3001,http://127.0.0.1:3001')
-    .split(',').map(value => value.trim()).filter(Boolean);
-
-// Bind to localhost only. Authentication and real AI generation are intentionally out of scope.
-createCmsBlockServer({directory, origins}).listen(port, '127.0.0.1', () => {
-    console.log(`CMSBlock demo API listening on http://127.0.0.1:${port}`);
-});
diff --git a/services/cmsblock_bak/src/server.mjs b/services/cmsblock_bak/src/server.mjs
deleted file mode 100644
index a0da5959..00000000
--- a/services/cmsblock_bak/src/server.mjs
+++ /dev/null
@@ -1,61 +0,0 @@
-import {createServer} from 'node:http';
-import {CmsBlockStore} from './store.mjs';
-
-const base = '/cmsblock/blocks/demo';
-
-export function createCmsBlockServer({directory, origins = [
-    'http://localhost:5173', 'http://127.0.0.1:5173',
-    'http://localhost:3001', 'http://127.0.0.1:3001',
-]} = {}) {
-    const store = new CmsBlockStore(directory);
-    const allowed = new Set(origins);
-    return createServer(async (req, res) => {
-        const origin = req.headers.origin;
-        res.setHeader('Cache-Control', 'no-store');
-        res.setHeader('Content-Type', 'application/json; charset=utf-8');
-        if (origin && !allowed.has(origin)) {
-            res.writeHead(403);
-            res.end(JSON.stringify({error: 'Origin not allowed.'}));
-            return;
-        }
-        if (origin) {
-            res.setHeader('Access-Control-Allow-Origin', origin);
-            res.setHeader('Vary', 'Origin');
-        }
-        res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,OPTIONS');
-        res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
-        if (req.method === 'OPTIONS') { res.writeHead(204); res.end(); return; }
-
-        try {
-            let result;
-            if (req.method === 'GET' && req.url === '/cmsblock/status') {
-                result = {status: 'ok', generator: 'deterministic-demo'};
-            } else if (req.method === 'GET' && req.url === base) {
-                result = await store.get();
-                if (!result) { res.writeHead(404); res.end(JSON.stringify({error: 'Block not created yet.'})); return; }
-            } else if (req.method === 'PUT' && req.url === base) {
-                let raw = '';
-                for await (const chunk of req) {
-                    raw += chunk.toString();
-                    if (raw.length > 120_000) throw new Error('Payload too large.');
-                }
-                result = await store.save(JSON.parse(raw));
-            } else if (req.method === 'POST' && req.url === `${base}/generate`) {
-                result = await store.generate();
-            } else if (req.method === 'POST' && req.url === `${base}/approve`) {
-                result = await store.approve();
-            } else if (req.method === 'POST' && req.url === `${base}/reject`) {
-                result = await store.reject();
-            } else {
-                res.writeHead(404);
-                res.end(JSON.stringify({error: 'Not found.'}));
-                return;
-            }
-            res.writeHead(200);
-            res.end(JSON.stringify(result));
-        } catch (error) {
-            res.writeHead(error instanceof SyntaxError || /before|content|template|draft|large|reject/i.test(error.message) ? 400 : 500);
-            res.end(JSON.stringify({error: error instanceof Error ? error.message : 'CMSBlock operation failed.'}));
-        }
-    });
-}
diff --git a/services/cmsblock_bak/src/store.mjs b/services/cmsblock_bak/src/store.mjs
deleted file mode 100644
index 02dc81c2..00000000
--- a/services/cmsblock_bak/src/store.mjs
+++ /dev/null
@@ -1,91 +0,0 @@
-import {readFile, mkdir, rename, writeFile, rm} from 'node:fs/promises';
-import {join} from 'node:path';
-import {randomUUID} from 'node:crypto';
-import {generateBlock, validateDraft} from './generator.mjs';
-
-export class CmsBlockStore {
-    constructor(directory) {
-        this.directory = directory;
-        this.file = join(directory, 'demo.json');
-        this.queue = Promise.resolve();
-    }
-
-    async get() {
-        await this.queue;
-        try {
-            return JSON.parse(await readFile(this.file, 'utf8'));
-        } catch (error) {
-            if (error?.code === 'ENOENT') return null;
-            throw error;
-        }
-    }
-
-    async mutate(change) {
-        const task = this.queue.then(async () => {
-            let current = null;
-            try {
-                current = JSON.parse(await readFile(this.file, 'utf8'));
-            } catch (error) {
-                if (error?.code !== 'ENOENT') throw error;
-            }
-            const next = change(current);
-            await mkdir(this.directory, {recursive: true});
-            const tmp = join(this.directory, `.demo-${randomUUID()}.tmp`);
-            try {
-                await writeFile(tmp, JSON.stringify(next, null, 2) + '\n', {flag: 'wx', mode: 0o600});
-                await rename(tmp, this.file);
-            } finally {
-                await rm(tmp, {force: true});
-            }
-            return next;
-        });
-        this.queue = task.catch(() => undefined);
-        return task;
-    }
-
-    save(input) {
-        const draft = validateDraft(input);
-        return this.mutate(current => ({
-            id: 'demo',
-            ...draft,
-            revision: current?.revision ?? 0,
-            pending: null,
-            published: current?.published ?? null,
-        }));
-    }
-
-    generate() {
-        return this.mutate(current => {
-            if (!current) throw new Error('Save the source content before generating.');
-            const revision = current.revision + 1;
-            return {
-                ...current,
-                revision,
-                pending: {
-                    ...generateBlock(current),
-                    templateId: current.templateId,
-                    layoutId: current.layoutId ?? ({editorial: 'image-above', feature: 'image-left', promotion: 'image-right'})[current.templateId],
-                    revision, status: 'inreview',
-                },
-            };
-        });
-    }
-
-    approve() {
-        return this.mutate(current => {
-            if (!current?.pending) throw new Error('Generate a draft before approving.');
-            return {
-                ...current,
-                published: {...current.pending, status: 'approved'},
-                pending: null,
-            };
-        });
-    }
-
-    reject() {
-        return this.mutate(current => {
-            if (!current?.pending) throw new Error('There is no draft to reject.');
-            return {...current, pending: null};
-        });
-    }
-}
diff --git a/services/cmsblock_bak/test/flow.test.mjs b/services/cmsblock_bak/test/flow.test.mjs
deleted file mode 100644
index 232fc66d..00000000
--- a/services/cmsblock_bak/test/flow.test.mjs
+++ /dev/null
@@ -1,100 +0,0 @@
-import assert from 'node:assert/strict';
-import {test} from 'node:test';
-import {mkdtemp, rm} from 'node:fs/promises';
-import {tmpdir} from 'node:os';
-import {join} from 'node:path';
-import {once} from 'node:events';
-import {createCmsBlockServer} from '../src/server.mjs';
-
-test('persist, generate, review, approve, reload and regenerate while published stays intact', async () => {
-    const directory = await mkdtemp(join(tmpdir(), 'reactedge-cmsblock-'));
-    const server = createCmsBlockServer({directory});
-    server.listen(0, '127.0.0.1');
-    await once(server, 'listening');
-    try {
-        const address = server.address();
-        assert.ok(address && typeof address !== 'string');
-        const base = `http://127.0.0.1:${address.port}/cmsblock/blocks/demo`;
-        const draft = {source: {format: 'html', content: '<h2>Welcome</h2><p>Our collection</p><script>alert(1)</script>'}, templateId: 'feature'};
-        const request = async (suffix, method, body) => {
-            const response = await fetch(base + suffix, {method, headers: {'Content-Type': 'application/json'}, ...(body && {body: JSON.stringify(body)})});
-            return {status: response.status, data: await response.json()};
-        };
-
-        assert.equal((await request('', 'GET')).status, 404);
-        assert.equal((await request('', 'PUT', {...draft, layoutId: 'image-right'})).data.layoutId, 'image-right');
-
-        const generated = (await request('/generate', 'POST')).data;
-        assert.equal(generated.pending.status, 'inreview');
-        assert.equal(generated.pending.templateId, 'feature');
-        assert.equal(generated.pending.layoutId, 'image-right');
-        assert.match(generated.pending.html, /cmsblock-layout--image-right/);
-        assert.match(generated.pending.html, /Welcome/);
-        assert.doesNotMatch(generated.pending.html, /<script/i);
-        assert.match(generated.pending.css, /data-cmsblock="demo"/);
-        assert.equal(generated.published, null);
-
-        const approved = (await request('/approve', 'POST')).data;
-        assert.equal(approved.published.status, 'approved');
-        assert.equal(approved.pending, null);
-        assert.equal((await request('', 'GET')).data.published.revision, 1);
-
-        const next = (await request('', 'PUT', {source: {format: 'text', content: 'Another headline'}, templateId: 'promotion'})).data;
-        assert.equal(next.published.revision, 1);
-        const regeneration = (await request('/generate', 'POST')).data;
-        assert.equal(regeneration.pending.revision, 2);
-        assert.equal(regeneration.pending.templateId, 'promotion');
-        assert.equal(regeneration.pending.layoutId, 'image-right');
-        assert.equal(regeneration.published.templateId, 'feature');
-        assert.equal(regeneration.published.revision, 1);
-        await request('/reject', 'POST');
-        const persisted = (await request('', 'GET')).data;
-        assert.equal(persisted.pending, null);
-        assert.equal(persisted.published.revision, 1);
-    } finally {
-        await new Promise((resolve, reject) => server.close(error => error ? reject(error) : resolve()));
-        await rm(directory, {recursive: true, force: true});
-    }
-});
-
-test('generated markup escapes authored HTML and allows only https images', async () => {
-    const {generateBlock} = await import('../src/generator.mjs');
-    const generated = generateBlock({
-        source: {format: 'html', content: '<h2><img src="javascript:alert(1)">Hello</h2><img src="https://example.com/image.jpg" alt="nice">'},
-        templateId: 'editorial',
-    });
-    assert.doesNotMatch(generated.html, /javascript:/i);
-    assert.match(generated.html, /https:\/\/example.com\/image.jpg/);
-    assert.match(generated.html, /Hello/);
-});
-
-test('three image references map to distinct responsive layouts', async () => {
-    const {generateBlock} = await import('../src/generator.mjs');
-    const source = {format: 'html', content: '<h2>Welcome</h2><p>The same content</p><img src="https://example.com/image.jpg" alt="Art">'};
-    const editorial = generateBlock({source, templateId: 'editorial'});
-    const feature = generateBlock({source, templateId: 'feature'});
-    const promotion = generateBlock({source, templateId: 'promotion'});
-    for (const output of [editorial, feature, promotion]) {
-        assert.match(output.html, /Welcome/);
-        assert.match(output.html, /https:\/\/example.com\/image.jpg/);
-        assert.match(output.css, /@media \(min-width: 800px\)/);
-    }
-    assert.match(editorial.css, /cmsblock-layout--image-above \.cmsblock-media \{ grid-row: 1;/);
-    assert.match(feature.css, /cmsblock-layout--image-left \.cmsblock-media \{ grid-column: 1;/);
-    assert.match(promotion.css, /cmsblock-layout--image-right \.cmsblock-media \{ grid-column: 2;/);
-    assert.notEqual(editorial.css, feature.css);
-    assert.notEqual(feature.css, promotion.css);
-});
-
-test('style and layout are independent and old records keep previous placement', async () => {
-    const {generateBlock, validateDraft} = await import('../src/generator.mjs');
-    const source = {format: 'html', content: '<h2>Art</h2><p>Original work</p><img src="https://example.com/art.jpg" alt="Artwork">'};
-    const editorialLeft = generateBlock({source, templateId: 'editorial', layoutId: 'image-left'});
-    const promotionalLeft = generateBlock({source, templateId: 'promotion', layoutId: 'image-left'});
-    assert.match(editorialLeft.html, /cmsblock-layout--image-left/);
-    assert.match(promotionalLeft.html, /cmsblock-layout--image-left/);
-    assert.match(editorialLeft.css, /cmsblock-layout--image-left \.cmsblock-media/);
-    assert.notEqual(editorialLeft.css, promotionalLeft.css);
-    assert.equal(validateDraft({source, templateId: 'feature'}).layoutId, 'image-left');
-    assert.throws(() => validateDraft({source, templateId: 'feature', layoutId: 'invalid'}));
-});
diff --git a/services/cmsblock_bak/tsconfig.json b/services/cmsblock_bak/tsconfig.json
deleted file mode 100644
index 573d7e19..00000000
--- a/services/cmsblock_bak/tsconfig.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "Bundler",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "noEmit": true,
-    "types": ["node"]
-  },
-  "include": ["src/**/*.ts", "test/**/*.ts"]
-}

From b6b7fd76e7045346075651d3811879d61983f904 Mon Sep 17 00:00:00 2001
From: Herve Tribouilloy <166377039+digitalrisedorset@users.noreply.github.com>
Date: Sat, 10 Oct 2026 08:49:08 +0200
Subject: [PATCH 28/28] chore(cmsblock): remove widget-specific GitHub Actions
 workflows

---
 .github/workflows/cmsblock-complexity.yml | 30 -------------
 .github/workflows/cmsblock-scaffold.yml   | 54 -----------------------
 services/cmsblock/README.md               |  3 +-
 widgets/cmsblock/README.md                |  4 +-
 4 files changed, 3 insertions(+), 88 deletions(-)
 delete mode 100644 .github/workflows/cmsblock-complexity.yml
 delete mode 100644 .github/workflows/cmsblock-scaffold.yml

diff --git a/.github/workflows/cmsblock-complexity.yml b/.github/workflows/cmsblock-complexity.yml
deleted file mode 100644
index 375c379e..00000000
--- a/.github/workflows/cmsblock-complexity.yml
+++ /dev/null
@@ -1,30 +0,0 @@
-name: CMSBlock complexity
-
-on:
-  push:
-    branches:
-      - feat/cms-block
-    paths:
-      - 'widgets/cmsblock/**'
-      - '.github/workflows/cmsblock-complexity.yml'
-      - 'mise.toml'
-      - 'launcher/scripts/widget-complexity.sh'
-  pull_request:
-    paths:
-      - 'widgets/cmsblock/**'
-      - '.github/workflows/cmsblock-complexity.yml'
-  workflow_dispatch:
-
-jobs:
-  lizard:
-    name: Lizard (CCN <= 10)
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Set up mise
-        uses: jdx/mise-action@v4
-        with:
-          install: false
-      - name: Analyze CMSBlock source and widget API
-        run: mise run complexity -- cmsblock
diff --git a/.github/workflows/cmsblock-scaffold.yml b/.github/workflows/cmsblock-scaffold.yml
deleted file mode 100644
index aefe2e64..00000000
--- a/.github/workflows/cmsblock-scaffold.yml
+++ /dev/null
@@ -1,54 +0,0 @@
-name: CMSBlock scaffold
-
-on:
-  push:
-    branches:
-      - feat/cms-block
-    paths:
-      - 'services/cmsblock/**'
-      - '.github/workflows/cmsblock-scaffold.yml'
-  pull_request:
-    paths:
-      - 'services/cmsblock/**'
-      - '.github/workflows/cmsblock-scaffold.yml'
-  workflow_dispatch:
-
-jobs:
-  smoke-test:
-    runs-on: ubuntu-latest
-    defaults:
-      run:
-        working-directory: services/cmsblock
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-      - name: Install dependencies
-        run: npm ci
-      - name: Typecheck scaffold
-        run: npm run typecheck
-      - name: Verify CMSBlock legacy HTTP lifecycle
-        run: npm test
-      - name: Start scaffold and verify status
-        shell: bash
-        run: |
-          set -euo pipefail
-          PORT=4190 npm start > /tmp/reactedge-cmsblock.log 2>&1 &
-          server_pid=$!
-          trap 'kill "$server_pid" 2>/dev/null || true' EXIT
-          for attempt in $(seq 1 30); do
-            if curl --silent --fail http://127.0.0.1:4190/cmsblock/status > /tmp/cmsblock-status.json; then
-              node -e "const fs=require('fs'); const status=JSON.parse(fs.readFileSync('/tmp/cmsblock-status.json','utf8')); if(status.status!=='ok')process.exit(1);"
-              cat /tmp/cmsblock-status.json
-              exit 0
-            fi
-            if ! kill -0 "$server_pid" 2>/dev/null; then
-              cat /tmp/reactedge-cmsblock.log
-              exit 1
-            fi
-            sleep 1
-          done
-          cat /tmp/reactedge-cmsblock.log
-          echo "CMSBlock failed to serve /cmsblock/status" >&2
-          exit 1
diff --git a/services/cmsblock/README.md b/services/cmsblock/README.md
index 587d0355..3640b1b8 100644
--- a/services/cmsblock/README.md
+++ b/services/cmsblock/README.md
@@ -53,7 +53,8 @@ npm --prefix services/cmsblock test
 mise run complexity -- cmsblock
 ```
 
-CI also exercises Express startup and the status endpoint.
+Run these checks locally when changing the service. To verify startup, call
+`curl --fail http://127.0.0.1:4190/cmsblock/status` after starting it.
 
 ## Limitations
 
diff --git a/widgets/cmsblock/README.md b/widgets/cmsblock/README.md
index 410216a9..e3128559 100644
--- a/widgets/cmsblock/README.md
+++ b/widgets/cmsblock/README.md
@@ -20,6 +20,4 @@ The launcher analyzes whichever of `src` and `api` exist under the widget:
 Lizard also reports function NLOC and tokens. Investigate unusually long
 functions even if their cyclomatic complexity is acceptable.
 
-The `cmsblock-complexity.yml` GitHub Actions workflow runs the same command
-on CMSBlock-related changes. The CMSBlock service and AI generator are not
-included.
+The command is run manually; it does not analyze the CMSBlock service or AI generator.