@brightsideoy/kama 1.0.0-alpha.2 → 1.0.0-alpha.20

package/dist/schema-compiler.js

@@ -30,19 +30,19 @@ async function f() {
 	if (n(f)) l = (await import(t(f).href)).compileDefinitions;
 	else if (n(p)) l = (await import(t(p).href)).compileDefinitions;
 	else try {
-		l = (await import("./dist-Dy7-HUEG.js")).compileDefinitions;
+		l = (await import("./dist-D_Q1y4Kh.js")).compileDefinitions;
 	} catch (e) {
-		console.error("❌ Could not resolve Kama Schema Engine:", e), process.exit(1);
+		console.error("\x1B[31m  ✖\x1B[0m \x1B[31mCould not resolve Kama Schema Engine:\x1B[0m", e), process.exit(1);
 	}
-	l || (console.error("❌ compileDefinitions function missing from resolved module"), process.exit(1));
+	l || (console.error("\x1B[31m  ✖\x1B[0m \x1B[31mcompileDefinitions function missing from resolved module\x1B[0m"), process.exit(1));
 	let m = l(), h = Object.keys(m?.nodes || {}).length, g = Object.keys(m?.blocks || {}).length, _ = Object.keys(m?.taxonomies || {}).length, v = `// AUTO-GENERATED BUNDLE - DO NOT EDIT
 const defs = ${JSON.stringify(m, null, 2)};
 export const BUNDLED_DEFINITIONS = defs;
 export default defs;
 `;
-	a(c, v, "utf-8"), console.log(`✅ Schema securely compiled using engine.ts to ${c} (${h} nodes, ${g} blocks, ${_} taxonomies)`);
+	a(c, v, "utf-8"), console.log(`\x1b[32m  ✓\x1b[0m \x1b[2mSchemas bundled (${h} nodes, ${g} blocks, ${_} taxonomies)\x1b[0m`);
 }
 f().catch((e) => {
-	console.error("❌ Schema Compiler Runtime Error:", e), process.exit(1);
+	console.error("\x1B[31m  ✖\x1B[0m \x1B[31mSchema Compiler Runtime Error:\x1B[0m", e), process.exit(1);
 });
 //#endregion

package/documentation/EXTENSIONS.md

@@ -0,0 +1,204 @@
+# KAMA CMS — Extension Development Guide
+
+KAMA features a **Drop-In Extension Architecture**. Extensions are built using native TypeScript, Vue, and YAML, and are automatically discovered, registered, and compiled into the Cloudflare Worker and Vite SPA at build time.
+
+This guarantees zero core bloat, perfect native performance, and a completely isolated development environment.
+
+## 1. How It Works (The Auto-Discovery Pipeline)
+
+Extensions live in the `extensions/` directory at the root of your workspace.
+
+When you run `npm run dev` or `npm run build:schema`, the KAMA CLI automatically:
+
+1. Scans the `extensions/` folder.
+2. Generates an `extension-registry.js` file.
+3. Injects your Database tables into the SQLite/D1 initialization sequence.
+4. Mounts your Hono API routes securely behind KAMA's authentication.
+5. Injects your Vue `.vue` components into the SPA routing and sidebars.
+6. Merges your extension's `.yaml` schemas natively into the core bundle.
+
+---
+
+## 2. Directory Structure
+
+A standard extension uses the following structure:
+
+kama-workspace/
+├─ extensions/
+│ └─ forms/ <-- Your Extension Folder
+│ ├─ index.ts <-- The Manifest (Exports UI, DB, and Routes)
+│ ├─ api/
+│ │ ├─ admin.ts <-- Hono routes for the Admin UI
+│ │ └─ public.ts <-- Hono routes for the Public API
+│ ├─ ui/
+│ │ ├─ SidebarPane.vue <-- Custom Left Drawer Vue Component
+│ │ └─ Dashboard.vue <-- Custom Main Workspace Vue Component
+│ └─ content/ <-- 🎯 Schema folder matching Core
+│ └─ blocks/
+│ └─ form-block.yaml <-- YAML Schemas (Auto-merged into KAMA)
+
+---
+
+## 3. The Extension Manifest (`index.ts`)
+
+Every extension must export a default object serving as the contract between your code and the KAMA core.
+
+// extensions/forms/index.ts
+import { adminFormsRouter } from "./api/admin.js";
+import { publicFormsRouter } from "./api/public.js";
+
+export default {
+id: "kama-forms",
+name: "Form Builder",
+
+// 🎯 1. DATABASE HOOKS
+// KAMA will automatically CREATE TABLE IF NOT EXISTS on boot.
+db: {
+tables: {
+kama_forms_table: `         id INTEGER PRIMARY KEY AUTOINCREMENT,
+        form_id TEXT NOT NULL,
+        payload_json TEXT NOT NULL,
+        createdAt TEXT DEFAULT CURRENT_TIMESTAMP
+      `,
+},
+},
+
+// 🎯 2. API ROUTING HOOKS
+// Handled natively by Hono. KAMA injects c.env.DB automatically.
+routes: {
+public: publicFormsRouter, // Mounted at: /api/ext/kama-forms/_
+admin: adminFormsRouter, // Mounted at: /api/admin/ext/kama-forms/_
+},
+
+// 🎯 3. FRONTEND UI HOOKS
+ui: {
+sidebar: [
+{
+id: "forms-nav",
+label: "Forms",
+icon: "Inbox", // Uses KAMA's global icon resolver
+sidebarViewId: "forms-sidebar", // 🎯 Renders in the left drawer panel
+viewId: "forms-dashboard", // 🎯 Renders in the main workspace canvas
+},
+],
+
+    // Map your view IDs to your Vue component chunks
+    views: [
+      { id: "forms-sidebar", url: "/api/ext/kama-forms/ui-pane.js" },
+      { id: "forms-dashboard", url: "/api/ext/kama-forms/ui.js" }
+    ],
+
+},
+};
+
+---
+
+## 4. API Routing (`api/admin.ts`)
+
+Extension APIs are built using standard Hono syntax.
+
+**Important:** Your extension routes do not need to connect to the database manually. KAMA intercepts the request and injects the active database connection directly into the request context.
+
+// extensions/forms/api/admin.ts
+import { Hono } from "hono";
+export const adminFormsRouter = new Hono();
+
+adminFormsRouter.get("/submissions", async (c) => {
+// Access the core database connection
+const db = (c as any).env?.DB;
+const formId = c.req.query("formId");
+
+const stmt = db.prepare("SELECT \* FROM kama_forms_table WHERE form_id = ? ORDER BY createdAt DESC");
+const results = typeof stmt.all === "function" ? await stmt.bind(formId).all() : [];
+
+return c.json({ submissions: results?.results || results || [] });
+});
+
+---
+
+## 5. Frontend UI & Cross-Component Communication
+
+KAMA enforces strict decoupling. Extensions shouldn't mutate core routing states directly. Instead, KAMA provides generic Event Buses and State Stores.
+
+### Triggering Workspace Navigation
+
+If a user clicks an item in your left `SidebarPane.vue` and you want to open your main `Dashboard.vue` in the primary workspace, dispatch a standard custom event. Core KAMA listens to this universally:
+
+// Inside extensions/forms/ui/SidebarPane.vue
+const openWorkspaceView = () => {
+window.dispatchEvent(new CustomEvent('cms-open-extension-view', {
+detail: { viewId: 'forms-dashboard' }
+}));
+};
+
+### Passing State Between Extension Components
+
+To pass data (like a selected Form ID) from your Sidebar to your Dashboard, use the global `window.Kama` SDK:
+
+**Setting State & Emitting Events (Sidebar):**
+
+// Set state synchronously
+(window as any).Kama?.state?.set('kama-forms', 'activeFormId', 'contact-form');
+
+// Notify other components live
+(window as any).Kama?.events?.emit('kama-forms:select-form', { formId: 'contact-form' });
+
+**Listening for State (Dashboard):**
+
+// Read initial state on mount
+const initialId = (window as any).Kama?.state?.get('kama-forms', 'activeFormId');
+
+// Listen for live changes
+(window as any).Kama?.events?.on('kama-forms:select-form', (payload) => {
+console.log("Form Selected:", payload.formId);
+});
+
+---
+
+## 6. Extension YAML Schemas (`content/`)
+
+Extensions can bundle their own content schemas (Nodes, Blocks, Taxonomies). Place them in your extension's `content/` folder (e.g., `extensions/forms/content/blocks/form.yaml`).
+
+Run `npm run build:schema` to compile them automatically into KAMA.
+
+### 🎯 NEW: Dynamic API Dropdowns (`optionsEndpoint`)
+
+KAMA's frontend features Universal Async Field fetching. You can define a `select` or `pills` field that dynamically pulls its options from your extension's API endpoint!
+
+**Example YAML Block Definition:**
+
+# extensions/forms/content/blocks/form-block.yaml
+
+id: form
+label: Dynamic Form
+description: Embeds a form definition into the page.
+category: Interactive
+icon: ClipboardList
+
+# You can inherit standard KAMA fieldsets!
+
+fieldSets:
+
+- access
+
+fields:
+
+# This dropdown populates automatically via your API!
+
+formId:
+label: Select Form
+type: select
+required: true
+optionsEndpoint: /api/admin/ext/kama-forms/forms
+optionsValueKey: id # Maps to the option value
+optionsLabelKey: title # Maps to the visible label
+
+---
+
+## 7. Caching and Extension Updates
+
+Because KAMA caches HTML at the Edge (Cloudflare CDN) and inside Worker KV:
+
+If your extension API modifies public-facing content (e.g., approving a review, updating inventory), your extension's Hono router must manually trigger KAMA's cache purger to drop the cached Edge pages.
+
+_(Note: KAMA's `EdgeCacheManager` is currently scoped to the core, so for now, extensions should rely on KAMA's internal APIs or direct node updates if immediate Edge Purging is required)._

package/extension-registry.js

@@ -0,0 +1,5 @@
+import kamaForms from './extensions/kama-forms/index.ts';
+
+export const activeExtensions = [
+  kamaForms
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightsideoy/kama",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.20",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -8,7 +8,9 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./schema.sql": "./schema.sql",
+    "./package.json": "./package.json"
   },
   "bin": {
     "kama": "bin/cli.js",
@@ -22,6 +24,8 @@
     "bundle:definitions": "node bin/cli.js bundle",
     "build:schema": "tsx scripts/build-schema.ts",
     "build:seed": "tsx scripts/build-seed.ts",
+    "seed": "npm run seed:local",
+    "seed:local": "tsx scripts/build-seed.ts && sqlite3 kama.db < seed.sql",
     "build:server": "vite build",
     "build:ui": "vite build --config vite.config.ui.ts",
     "build": "npm run bundle:definitions && npm run build:schema && npm run build:server && npm run build:ui",
@@ -33,6 +37,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@clack/prompts": "^1.8.1",
     "@heroicons/vue": "^2.2.0",
     "@hono/node-server": "^2.1.1",
     "@hono/swagger-ui": "^0.6.1",
@@ -49,6 +54,7 @@
     "@tiptap/vue-3": "^3.30.0",
     "drizzle-orm": "^0.45.2",
     "hono": "^4.13.2",
+    "js-yaml": "^5.5.0",
     "locale-codes": "^1.3.1",
     "lru-cache": "^11.5.2",
     "lucide-vue-next": "^1.0.0",
@@ -63,6 +69,7 @@
     "@iconify-json/heroicons": "^1.2.3",
     "@iconify-json/lucide": "^1.2.123",
     "@libsql/client": "^0.14.0",
+    "@types/js-yaml": "^4.0.9",
     "@types/node": "^26.2.0",
     "@types/sharp": "^0.31.1",
     "@types/yaml": "^1.9.6",

package/schema.sql

@@ -13,7 +13,7 @@ CREATE TABLE IF NOT EXISTS "content_schemas" (
 
 CREATE TABLE IF NOT EXISTS "users" (
     id TEXT PRIMARY KEY,
-    email TEXT UNIQUE NOT NULL,
+    email UNIQUE NOT NULL,
     name TEXT NOT NULL,
     globalRole TEXT DEFAULT 'editor',
     createdAt TEXT DEFAULT CURRENT_TIMESTAMP,
@@ -92,6 +92,8 @@ CREATE TABLE IF NOT EXISTS "content_nodes" (
     language TEXT,
     isHidden INTEGER NOT NULL DEFAULT 0,
     status TEXT DEFAULT 'draft',
+    startShowingAt TEXT,
+    stopShowingAt TEXT,
     hasUnpublishedChanges INTEGER DEFAULT 0,
     disabledRegionsJson TEXT DEFAULT '{}',
     dataJson TEXT,
@@ -201,6 +203,32 @@ CREATE TABLE IF NOT EXISTS "node_terms" (
     FOREIGN KEY (termId) REFERENCES taxonomy_terms(id) ON DELETE CASCADE
   );
 
+CREATE TABLE IF NOT EXISTS "node_relations" (
+    sourceNodeId INTEGER NOT NULL,
+    targetNodeId INTEGER NOT NULL,
+    fieldKey TEXT NOT NULL,
+    sortOrder INTEGER DEFAULT 0,
+    PRIMARY KEY (sourceNodeId, targetNodeId, fieldKey),
+    FOREIGN KEY (sourceNodeId) REFERENCES content_nodes(id) ON DELETE CASCADE,
+    FOREIGN KEY (targetNodeId) REFERENCES content_nodes(id) ON DELETE CASCADE
+  );
+
+CREATE TABLE IF NOT EXISTS "node_routes" (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    path TEXT NOT NULL,
+    channelId INTEGER NOT NULL,
+    nodeId INTEGER,
+    treeId INTEGER,
+    isCanonical INTEGER DEFAULT 1,
+    redirectUrl TEXT,
+    createdAt TEXT DEFAULT CURRENT_TIMESTAMP,
+    updatedAt TEXT DEFAULT CURRENT_TIMESTAMP,
+    FOREIGN KEY (channelId) REFERENCES channels(id) ON DELETE CASCADE,
+    FOREIGN KEY (nodeId) REFERENCES content_nodes(id) ON DELETE CASCADE,
+    FOREIGN KEY (treeId) REFERENCES trees(id) ON DELETE CASCADE,
+    UNIQUE(path, channelId)
+  );
+
 CREATE INDEX IF NOT EXISTS idx_tree_nodes_tree_parent ON tree_nodes(treeId, parentId);
 CREATE INDEX IF NOT EXISTS idx_tree_nodes_contentId ON tree_nodes(contentId);
 CREATE INDEX IF NOT EXISTS idx_content_nodes_slug_status ON content_nodes(slug, status);
@@ -233,3 +261,8 @@ CREATE INDEX IF NOT EXISTS idx_node_terms_node ON node_terms(nodeId);
 CREATE INDEX IF NOT EXISTS idx_node_terms_term ON node_terms(termId);
 CREATE INDEX IF NOT EXISTS idx_node_terms_node_term ON node_terms(nodeId, termId);
 CREATE INDEX IF NOT EXISTS idx_node_terms_term_node ON node_terms(termId, nodeId);
+CREATE INDEX IF NOT EXISTS idx_node_relations_source ON node_relations(sourceNodeId);
+CREATE INDEX IF NOT EXISTS idx_node_relations_target ON node_relations(targetNodeId);
+CREATE INDEX IF NOT EXISTS idx_node_routes_lookup ON node_routes(path, channelId);
+CREATE INDEX IF NOT EXISTS idx_node_routes_node ON node_routes(nodeId);
+CREATE INDEX IF NOT EXISTS idx_content_nodes_public_feed ON content_nodes(contentType, isHidden, status, startShowingAt, stopShowingAt, updatedAt DESC);

package/templates/astro-starter/old_src/components/blocks/BlockRenderer.astro

@@ -0,0 +1,143 @@
+---
+// src/components/blocks/BlockRenderer.astro
+
+import ImageBlock from "@/components/blocks/ImageBlock.astro";
+import HeaderImage from "@/components/blocks/HeaderImage.astro";
+import ColumnLayout from "@/components/blocks/ColumnLayout.astro";
+import HtmlBlock from "@/components/blocks/HtmlBlock.astro";
+import NodeList from "@/components/blocks/NodeList.astro"; // 🎯 NEW IMPORT
+import { extractHtml } from "@/utils/tiptap";
+
+interface Block {
+  instanceId: number;
+  blockId?: string;
+  componentId: string;
+  data: Record<string, any>;
+}
+
+interface Props {
+  blocks?: Block[];
+  contentMap?: Record<string, any[]>;
+  region?: string;
+}
+
+const { blocks = [], contentMap = {}, region = "main" } = Astro.props;
+const safeBlocks = Array.isArray(blocks) ? blocks : [];
+
+const visibleBlocks = safeBlocks.filter(b => {
+  if (!b || (!b.data && !b.componentId?.includes("column"))) return false;
+
+  const blockData = b.data || {};
+  if (
+    blockData.hidden === true ||
+    blockData.hidden === 1 ||
+    String(blockData.hidden) === "true"
+  ) {
+    return false;
+  }
+
+  const now = new Date();
+  if (blockData.startShowingAt) {
+    const start = new Date(blockData.startShowingAt);
+    if (!isNaN(start.getTime()) && now < start) return false;
+  }
+  if (blockData.stopShowingAt) {
+    const stop = new Date(blockData.stopShowingAt);
+    if (!isNaN(stop.getTime()) && now > stop) return false;
+  }
+
+  return true;
+});
+---
+
+{
+  visibleBlocks.map((block, index) => {
+    const data = block.data || {};
+    const blockId = block.blockId || data.blockId || "";
+    const componentId = (block.componentId || "").toLowerCase();
+
+    // Check for any column layout ending in column or two-column
+    if (componentId.includes("column")) {
+      return <ColumnLayout blockId={blockId} contentMap={contentMap} />;
+    }
+
+    switch (componentId) {
+      // 🎯 ADDED NODE LIST CASES
+      case "node-list":
+      case "nodelist":
+      case "article-list":
+      case "content-feed": {
+        return <NodeList data={data} />;
+      }
+
+      case "header":
+      case "headline":
+      case "header-block":
+      case "header_block": {
+        const headline = extractHtml(data.headline || data.title);
+        const subhead = extractHtml(data.subhead || data.body);
+        return (
+          <header class="cms-block cms-block-header">
+            {headline && <Fragment set:html={headline} />}
+            {subhead && <Fragment set:html={subhead} />}
+          </header>
+        );
+      }
+
+      case "text":
+      case "text-block":
+      case "text_block": {
+        const bodyText = extractHtml(data.body || data.text || data.content);
+        return (
+          <div class="cms-block cms-block-text">
+            <Fragment set:html={bodyText} />
+          </div>
+        );
+      }
+
+      case "html":
+      case "html-block":
+      case "html_block":
+      case "raw-html": {
+        return <HtmlBlock data={data} />;
+      }
+
+      case "header-image":
+      case "header_image": {
+        return (
+          <HeaderImage data={data} region={region} isFirst={index === 0} />
+        );
+      }
+
+      case "image":
+      case "image-block":
+      case "image_block":
+      case "single_image":
+      case "single-image": {
+        return <ImageBlock data={data} region={region} isFirst={index === 0} />;
+      }
+
+      default:
+        return import.meta.env.DEV ? (
+          <div class="unhandled-block">
+            <p>Unhandled component: {block.componentId}</p>
+          </div>
+        ) : null;
+    }
+  })
+}
+
+<style>
+  .cms-block {
+    margin-bottom: 1.5rem;
+  }
+
+  .unhandled-block {
+    padding: 12px 16px;
+    border: 1px dashed #cbd5e1;
+    background: #f8fafc;
+    color: #64748b;
+    font-size: 13px;
+    margin-bottom: 1.5rem;
+  }
+</style>

package/templates/astro-starter/old_src/components/blocks/ColumnLayout.astro

@@ -0,0 +1,67 @@
+---
+// src/components/blocks/ColumnLayout.astro
+
+import BlockRenderer from "@/components/blocks/BlockRenderer.astro";
+
+interface Props {
+  blockId: string;
+  contentMap: Record<string, any[]>;
+}
+
+const { blockId, contentMap } = Astro.props;
+
+const order = ["left", "middle", "right", "col1", "col2", "col3", "col4"];
+
+// 1. Find all sub-regions belonging to this specific layout instance
+const regionKeys = Object.keys(contentMap).filter(
+  key => blockId && key.startsWith(`${blockId}_`),
+);
+
+// 2. Sort keys logically (left -> middle -> right or col1 -> col2 -> col3)
+const sortedKeys = regionKeys.sort((a, b) => {
+  const suffixA = a.replace(`${blockId}_`, "");
+  const suffixB = b.replace(`${blockId}_`, "");
+  const idxA = order.indexOf(suffixA);
+  const idxB = order.indexOf(suffixB);
+
+  if (idxA === -1 && idxB === -1) return a.localeCompare(b);
+  if (idxA === -1) return 1;
+  if (idxB === -1) return -1;
+  return idxA - idxB;
+});
+
+const columnCount = Math.max(sortedKeys.length, 1);
+---
+
+<div class="cms-column-layout" style={`--col-count: ${columnCount}`}>
+  {
+    sortedKeys.map(key => {
+      const columnBlocks = contentMap[key] || [];
+      return (
+        <div class="column">
+          <!-- 🎯 Passes region={key} down to BlockRenderer -->
+          <BlockRenderer 
+            blocks={columnBlocks} 
+            contentMap={contentMap} 
+            region={key} 
+          />
+        </div>
+      );
+    })
+  }
+</div>
+
+<style>
+  .cms-column-layout {
+    display: grid;
+    gap: 2rem;
+    margin-bottom: 1.5rem;
+    grid-template-columns: 1fr;
+  }
+
+  @media (min-width: 768px) {
+    .cms-column-layout {
+      grid-template-columns: repeat(var(--col-count, 1), 1fr);
+    }
+  }
+</style>

package/templates/astro-starter/old_src/components/blocks/HeaderImage.astro

@@ -0,0 +1,126 @@
+---
+// src/components/blocks/HeaderImage.astro
+
+import KamaImage from "@/components/ui/KamaImage.astro";
+
+interface Props {
+  data: {
+    image?: any;
+    image_meta?: any;
+    width?: number | string;
+    height?: number | string;
+  };
+  region?: string;
+  isFirst?: boolean;
+}
+
+const { data, region = "main", isFirst = false } = Astro.props;
+
+const img = data?.image;
+
+if (!img) {
+  return null;
+}
+
+/**
+ * Determine if this image is likely to be the Largest Contentful Paint.
+ */
+const isLcp = region === "header" || (region === "main" && isFirst);
+
+/**
+ * Determine grid column count from the region name.
+ */
+let columnCount = 1;
+
+if (region.includes("_")) {
+  columnCount = 2;
+
+  if (region.includes("_middle") || region.includes("_col3")) {
+    columnCount = 3;
+  }
+
+  if (region.includes("_col4")) {
+    columnCount = 4;
+  }
+}
+
+/**
+ * Default single-column layout (aligned to backend CDN buckets).
+ */
+let maxWidth = "1352";
+let targetColumnWidth = 1352;
+
+// 1-col: 1x/2x desktop and retina buckets
+let optimizedWidths = [768, 1352, 1920, 2560];
+let sizes = "(max-width: 1399px) calc(100vw - 48px), 1352px";
+
+/**
+ * Two-column layout.
+ */
+if (columnCount === 2) {
+  maxWidth = "660";
+  targetColumnWidth = 660;
+
+  optimizedWidths = [640, 768, 1024, 1352];
+  sizes =
+    "(max-width: 767px) calc(100vw - 48px), " +
+    "(max-width: 1399px) calc((100vw - 80px) / 2), " +
+    "660px";
+}
+
+/**
+ * Three-column layout.
+ */
+else if (columnCount === 3) {
+  maxWidth = "429";
+  targetColumnWidth = 429;
+
+  optimizedWidths = [320, 640, 768, 1024];
+  sizes =
+    "(max-width: 767px) calc(100vw - 48px), " +
+    "(max-width: 1399px) calc((100vw - 112px) / 3), " +
+    "429px";
+}
+
+/**
+ * Four-column layout.
+ */
+else if (columnCount === 4) {
+  maxWidth = "314";
+  targetColumnWidth = 314;
+
+  optimizedWidths = [320, 640, 768];
+  sizes =
+    "(max-width: 767px) calc(100vw - 48px), " +
+    "(max-width: 1399px) calc((100vw - 144px) / 4), " +
+    "314px";
+}
+---
+
+<div class="cms-block cms-block-header-image" style={`--max-w: ${maxWidth}px;`}>
+  <KamaImage
+    image={img}
+    sizes={sizes}
+    desktopWidths={optimizedWidths}
+    idealWidth={targetColumnWidth}
+    class="responsive-header-image"
+    loading={isLcp ? "eager" : "lazy"}
+    fetchpriority={isLcp ? "high" : "auto"}
+  />
+</div>
+
+<style>
+  .cms-block-header-image {
+    width: 100%;
+    max-width: var(--max-w, 1352px);
+    margin: 0 auto 1.5rem auto;
+  }
+
+  :global(.responsive-header-image) {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: var(--cms-radius-md, 0.5rem);
+    max-width: 100%;
+  }
+</style>