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

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-3Xc2TTZw.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.21",
   "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",
@@ -40,15 +45,16 @@
     "@tiptap/core": "^3.30.0",
     "@tiptap/extension-subscript": "^3.30.1",
     "@tiptap/extension-superscript": "^3.30.1",
-    "@tiptap/extension-table": "^3.30.0",
-    "@tiptap/extension-table-cell": "^3.30.0",
-    "@tiptap/extension-table-header": "^3.30.0",
-    "@tiptap/extension-table-row": "^3.30.0",
+    "@tiptap/extension-table": "^3.30.1",
+    "@tiptap/extension-table-cell": "^3.30.1",
+    "@tiptap/extension-table-header": "^3.30.1",
+    "@tiptap/extension-table-row": "^3.30.1",
     "@tiptap/pm": "^3.30.0",
     "@tiptap/starter-kit": "^3.30.0",
     "@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,40 @@ CREATE TABLE IF NOT EXISTS "node_terms" (
     FOREIGN KEY (termId) REFERENCES taxonomy_terms(id) ON DELETE CASCADE
   );
 
+CREATE TABLE IF NOT EXISTS "asset_terms" (
+    assetId TEXT NOT NULL,
+    termId INTEGER NOT NULL,
+    PRIMARY KEY (assetId, termId),
+    FOREIGN KEY (assetId) REFERENCES assets(id) ON DELETE CASCADE,
+    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 +269,10 @@ 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_asset_terms_asset ON asset_terms(assetId);
+CREATE INDEX IF NOT EXISTS idx_asset_terms_term ON asset_terms(termId);
+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/src/components/blocks/BlockRenderer.astro

@@ -5,6 +5,7 @@ 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 {
@@ -61,6 +62,14 @@ const visibleBlocks = safeBlocks.filter(b => {
     }
 
     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":

package/templates/astro-starter/src/components/blocks/Form.astro

@@ -0,0 +1,143 @@
+---
+// src/components/blocks/Form.astro
+interface Props {
+  data: {
+    formId: string;
+  };
+}
+
+const { data } = Astro.props;
+const formId = data?.formId;
+
+const kamaApiUrl = import.meta.env.KAMA_API_URL || 'http://localhost:8787';
+const turnstileSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY;
+
+// Fetch form YAML schema at render time
+let schema = null;
+if (formId) {
+  try {
+    const res = await fetch(`${kamaApiUrl}/api/ext/kama-forms/render/${formId}`);
+    if (res.ok) schema = await res.json();
+  } catch (err) {
+    console.error(`Failed to fetch schema for ${formId}`);
+  }
+}
+
+const requiresTurnstile = schema?.settings?.requireTurnstile === true;
+---
+
+{schema ? (
+  <div class="kama-form-wrapper" data-form-id={formId} data-api-url={kamaApiUrl}>
+    
+    <!-- 🎯 Conditionally load Cloudflare Turnstile Script -->
+    {requiresTurnstile && (
+      <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+    )}
+
+    <div class="form-header">
+      <h3>{schema.title}</h3>
+      {schema.description && <p>{schema.description}</p>}
+    </div>
+
+    <div class="form-alert success" style="display: none;"></div>
+    <div class="form-alert error" style="display: none;"></div>
+
+    <form class="kama-public-form">
+      {schema.fields?.map((field: any) => (
+        <div class="form-group">
+          <label for={`field-${field.name}`}>
+            {field.label}
+            {field.required && <span class="required">*</span>}
+          </label>
+
+          {field.type === 'textarea' ? (
+            <textarea id={`field-${field.name}`} name={field.name} placeholder={field.placeholder || ''} required={field.required} rows="4" />
+          ) : field.type === 'select' ? (
+            <select id={`field-${field.name}`} name={field.name} required={field.required}>
+              <option value="" disabled selected>{field.placeholder || 'Select...'}</option>
+              {field.options?.map((opt: any) => (
+                <option value={opt.value}>{opt.label}</option>
+              ))}
+            </select>
+          ) : (
+            <input type={field.type || 'text'} id={`field-${field.name}`} name={field.name} placeholder={field.placeholder || ''} required={field.required} />
+          )}
+        </div>
+      ))}
+
+      <!-- 🎯 Turnstile Widget renders here -->
+      {requiresTurnstile && turnstileSiteKey && (
+        <div class="form-group turnstile-container">
+          <div class="cf-turnstile" data-sitekey={turnstileSiteKey}></div>
+        </div>
+      )}
+
+      <button type="submit" class="submit-btn">Submit</button>
+    </form>
+  </div>
+) : (
+  <p class="form-error">Form definition "{formId}" could not be loaded.</p>
+)}
+
+<script>
+  document.querySelectorAll('.kama-form-wrapper').forEach((container) => {
+    const form = container.querySelector<HTMLFormElement>('.kama-public-form');
+    const formId = container.getAttribute('data-form-id');
+    const apiUrl = container.getAttribute('data-api-url');
+    const successBox = container.querySelector<HTMLDivElement>('.form-alert.success');
+    const errorBox = container.querySelector<HTMLDivElement>('.form-alert.error');
+    const submitBtn = container.querySelector<HTMLButtonElement>('.submit-btn');
+
+    if (!form || !formId || !apiUrl) return;
+
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      if (submitBtn) submitBtn.disabled = true;
+      if (successBox) successBox.style.display = 'none';
+      if (errorBox) errorBox.style.display = 'none';
+
+      // FormData automatically picks up the hidden "cf-turnstile-response" input
+      const formData = new FormData(form);
+      const payload = Object.fromEntries(formData.entries());
+
+      try {
+        const res = await fetch(`${apiUrl}/api/ext/kama-forms/submit/${formId}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        });
+
+        const result = await res.json();
+
+        if (res.ok && result.success) {
+          if (successBox) {
+            successBox.textContent = result.message || 'Form submitted successfully!';
+            successBox.style.display = 'block';
+          }
+          form.reset();
+          
+          // 🎯 Reset Turnstile after successful submission if the user wants to submit again
+          if (window.turnstile) {
+            window.turnstile.reset();
+          }
+        } else {
+          if (errorBox) {
+            errorBox.textContent = result.error || 'Form submission failed.';
+            errorBox.style.display = 'block';
+          }
+          // 🎯 Reset Turnstile on failure so they get a fresh token
+          if (window.turnstile) {
+            window.turnstile.reset();
+          }
+        }
+      } catch (err) {
+        if (errorBox) {
+          errorBox.textContent = 'Server connection error.';
+          errorBox.style.display = 'block';
+        }
+      } finally {
+        if (submitBtn) submitBtn.disabled = false;
+      }
+    });
+  });
+</script>

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

@@ -45,13 +45,13 @@ if (region.includes("_")) {
 }
 
 /**
- * Default single-column layout.
+ * Default single-column layout (aligned to backend CDN buckets).
  */
 let maxWidth = "1352";
 let targetColumnWidth = 1352;
 
-// 1-col: Base mobile (~400), 2x mobile/tablet (~800), 1x desktop (1352), 2x desktop (2704)
-let optimizedWidths = [400, 800, 1352, 2048, 2704];
+// 1-col: 1x/2x desktop and retina buckets
+let optimizedWidths = [768, 1352, 1920, 2560];
 let sizes = "(max-width: 1399px) calc(100vw - 48px), 1352px";
 
 /**
@@ -61,8 +61,7 @@ if (columnCount === 2) {
   maxWidth = "660";
   targetColumnWidth = 660;
 
-  // 2-col: 1x desktop (660), 2x mobile stacked (~800), 2x desktop (1320)
-  optimizedWidths = [400, 660, 800, 1320];
+  optimizedWidths = [640, 768, 1024, 1352];
   sizes =
     "(max-width: 767px) calc(100vw - 48px), " +
     "(max-width: 1399px) calc((100vw - 80px) / 2), " +
@@ -76,8 +75,7 @@ else if (columnCount === 3) {
   maxWidth = "429";
   targetColumnWidth = 429;
 
-  // 3-col: 1x desktop (429), 2x desktop/tablet (~858), 2x/3x mobile stacked (~1000)
-  optimizedWidths = [300, 429, 858, 1024];
+  optimizedWidths = [320, 640, 768, 1024];
   sizes =
     "(max-width: 767px) calc(100vw - 48px), " +
     "(max-width: 1399px) calc((100vw - 112px) / 3), " +
@@ -91,8 +89,7 @@ else if (columnCount === 4) {
   maxWidth = "314";
   targetColumnWidth = 314;
 
-  // 4-col: 1x desktop (314), 2x desktop (628), 2x/3x mobile stacked (~1000)
-  optimizedWidths = [264, 314, 628, 1024];
+  optimizedWidths = [320, 640, 768];
   sizes =
     "(max-width: 767px) calc(100vw - 48px), " +
     "(max-width: 1399px) calc((100vw - 144px) / 4), " +
@@ -106,12 +103,9 @@ else if (columnCount === 4) {
     sizes={sizes}
     desktopWidths={optimizedWidths}
     idealWidth={targetColumnWidth}
-    width={data.width || data.image_meta?.width}
-    height={data.height || data.image_meta?.height}
     class="responsive-header-image"
     loading={isLcp ? "eager" : "lazy"}
     fetchpriority={isLcp ? "high" : "auto"}
-    decoding={isLcp ? "sync" : "async"}
   />
 </div>
 

package/templates/astro-starter/src/components/blocks/ImageBlock.astro

@@ -26,31 +26,31 @@ if (region.includes("_")) {
   if (region.includes("_col4")) columnCount = 4;
 }
 
-// 🎯 Column Config Lookup (Max width, breakpoint widths, sizes)
+// 🎯 Column Config Lookup (Target width, aligned CDN breakpoint widths, sizes)
 const COLUMN_CONFIGS: Record<
   number,
   { targetWidth: number; widths: number[]; sizes: string }
 > = {
   1: {
     targetWidth: 1352,
-    widths: [768, 1352],
+    widths: [768, 1352, 1920, 2560],
     sizes: "(max-width: 1399px) calc(100vw - 48px), 1352px",
   },
   2: {
     targetWidth: 660,
-    widths: [400, 660],
+    widths: [640, 768, 1024, 1352],
     sizes:
       "(max-width: 767px) calc(100vw - 48px), (max-width: 1399px) calc((100vw - 80px) / 2), 660px",
   },
   3: {
     targetWidth: 429,
-    widths: [300, 429],
+    widths: [320, 640, 768, 1024],
     sizes:
       "(max-width: 767px) calc(100vw - 48px), (max-width: 1399px) calc((100vw - 112px) / 3), 429px",
   },
   4: {
     targetWidth: 314,
-    widths: [264, 314],
+    widths: [320, 640, 768],
     sizes:
       "(max-width: 767px) calc(100vw - 48px), (max-width: 1399px) calc((100vw - 144px) / 4), 314px",
   },
@@ -67,7 +67,6 @@ const layout = COLUMN_CONFIGS[columnCount] || COLUMN_CONFIGS[1];
         sizes={layout.sizes}
         desktopWidths={layout.widths}
         idealWidth={layout.targetWidth}
-        maxWidth={layout.targetWidth}
         class="free-crop-image"
         loading={isLcp ? "eager" : "lazy"}
         fetchpriority={isLcp ? "high" : "auto"}