@blockslides/ai-context 0.2.0 → 0.3.0

package/src/templates/v1/presetTemplateBuilder.ts

@@ -38,11 +38,13 @@ const titleAndSubheader: PresetTemplate = {
   icon: titleAndSubheaderIcon,
   build: () =>
     slide.singleCol({
-      rowAttrs: { className: "min-h-[720px] items-center justify-center" },
       columnAttrs: {
-        verticalAlign: "center",
-        horizontalAlign: "center",
-        className: "gap-6 p-12 text-center bg-white",
+        justify: "center",
+        align: "center",
+        gap: "md",
+        padding: "lg",
+        fill: true,
+        backgroundColor: "#ffffff",
       },
       content: [
         blocks.heading("Lorem ipsum dolor sit amet", 1),
@@ -107,30 +109,30 @@ const imageAndText: PresetTemplate = {
   description: "Image on left, text on right",
   icon: imageTextIcon,
   build: () =>
-    slide.twoCol({
-      rowAttrs: { className: "items-center" },
-      leftColumnAttrs: {
-        horizontalAlign: "center",
-        verticalAlign: "center",
-        className: "p-8",
-      },
-      rightColumnAttrs: {
-        verticalAlign: "center",
-        className: "p-8 gap-3",
-      },
-      left: [
-        blocks.imageBlock({
-          src: "https://placehold.co/640x480/png",
-          layout: "contain",
-          fullBleed: false,
-        }),
-      ],
-      right: [
-        blocks.heading("Lorem ipsum dolor sit amet", 2),
-        blocks.paragraph("Consectetur adipiscing elit. Sed do eiusmod tempor incididunt."),
-        blocks.paragraph("Ut enim ad minim veniam, quis nostrud exercitation."),
-      ],
-    }),
+    slide.twoCol(
+      blocks.column(
+        [
+          blocks.imageBlock({
+            src: "https://placehold.co/640x480/png",
+            size: "fit",
+          }),
+        ],
+        {
+        }
+      ),
+      blocks.column(
+        [
+          blocks.heading("Lorem ipsum dolor sit amet", 2),
+          blocks.paragraph("Consectetur adipiscing elit. Sed do eiusmod tempor incididunt."),
+          blocks.paragraph("Ut enim ad minim veniam, quis nostrud exercitation."),
+        ],
+        {
+          padding: "lg",
+          gap: "sm",
+          fill: true,
+        }
+      )
+    ),
 };
 
 const textAndImage: PresetTemplate = {
@@ -139,30 +141,35 @@ const textAndImage: PresetTemplate = {
   description: "Text on left, image on right",
   icon: textImageIcon,
   build: () =>
-    slide.twoCol({
-      rowAttrs: { className: "items-center" },
-      leftColumnAttrs: {
-        verticalAlign: "center",
-        className: "p-8 gap-3",
-      },
-      rightColumnAttrs: {
-        horizontalAlign: "center",
-        verticalAlign: "center",
-        className: "p-8",
-      },
-      left: [
-        blocks.heading("Lorem ipsum dolor sit amet", 2),
-        blocks.paragraph("Consectetur adipiscing elit. Sed do eiusmod tempor incididunt."),
-        blocks.paragraph("Ut enim ad minim veniam, quis nostrud exercitation."),
-      ],
-      right: [
-        blocks.imageBlock({
-          src: "https://placehold.co/640x480/png",
-          layout: "contain",
-          fullBleed: false,
-        }),
-      ],
-    }),
+    slide.twoCol(
+      blocks.column(
+        [
+          blocks.heading("Lorem ipsum dolor sit amet", 2),
+          blocks.paragraph("Consectetur adipiscing elit. Sed do eiusmod tempor incididunt."),
+          blocks.paragraph("Ut enim ad minim veniam, quis nostrud exercitation."),
+        ],
+        {
+          justify: "center",
+          padding: "lg",
+          gap: "sm",
+          fill: true,
+        }
+      ),
+      blocks.column(
+        [
+          blocks.imageBlock({
+            src: "https://placehold.co/640x480/png",
+            size: "fit",
+          }),
+        ],
+        {
+          align: "center",
+          justify: "center",
+          padding: "lg",
+          fill: true,
+        }
+      )
+    ),
 };
 
 const twoColumns: PresetTemplate = {
@@ -170,37 +177,31 @@ const twoColumns: PresetTemplate = {
   label: "Two Columns",
   description: "Header above two balanced text columns",
   icon: twoColumnsIcon,
-  build: () =>
-    slide.singleCol({
-      columnAttrs: { className: "w-full p-6 gap-4", horizontalAlign: "stretch" },
-      content: [
-        blocks.heading("Section heading", 2),
-        {
-          type: "row",
-          attrs: { layout: "1-1", className: "items-start w-full gap-4" },
-          content: [
-            {
-              type: "column",
-              attrs: { className: "p-4 gap-3 w-full box-border" },
-              content: [
-                blocks.paragraph("Lorem ipsum dolor sit amet."),
-                blocks.paragraph("Consectetur adipiscing elit. Sed do eiusmod tempor incididunt."),
-                blocks.paragraph("Ut enim ad minim veniam, quis nostrud exercitation."),
-              ],
-            },
-            {
-              type: "column",
-              attrs: { className: "p-4 gap-3 w-full box-border" },
-              content: [
-                blocks.paragraph("Lorem ipsum dolor sit amet."),
-                blocks.paragraph("Consectetur adipiscing elit. Sed do eiusmod tempor incididunt."),
-                blocks.paragraph("Ut enim ad minim veniam, quis nostrud exercitation."),
-              ],
-            },
+  build: () => ({
+    type: "slide",
+    attrs: { id: "slide-1", size: "16x9" },
+    content: [
+      blocks.heading("Section heading", 2),
+      blocks.columnGroup([
+        blocks.column(
+          [
+            blocks.paragraph("Lorem ipsum dolor sit amet."),
+            blocks.paragraph("Consectetur adipiscing elit. Sed do eiusmod tempor incididunt."),
+            blocks.paragraph("Ut enim ad minim veniam, quis nostrud exercitation."),
           ],
-        },
-      ],
-    }),
+          { padding: "md", gap: "sm", fill: true }
+        ),
+        blocks.column(
+          [
+            blocks.paragraph("Lorem ipsum dolor sit amet."),
+            blocks.paragraph("Consectetur adipiscing elit. Sed do eiusmod tempor incididunt."),
+            blocks.paragraph("Ut enim ad minim veniam, quis nostrud exercitation."),
+          ],
+          { padding: "md", gap: "sm", fill: true }
+        ),
+      ]),
+    ],
+  }),
 };
 
 const twoColumnsWithHeader: PresetTemplate = {
@@ -208,37 +209,31 @@ const twoColumnsWithHeader: PresetTemplate = {
   label: "Two Columns + Header",
   description: "Header plus two columns, each with its own heading",
   icon: twoColumnsHeaderIcon,
-  build: () =>
-    slide.singleCol({
-      columnAttrs: { className: "w-full p-6 gap-4", horizontalAlign: "stretch" },
-      content: [
-        blocks.heading("Section heading", 2),
-        {
-          type: "row",
-          attrs: { layout: "1-1", className: "items-start w-full gap-4" },
-          content: [
-            {
-              type: "column",
-              attrs: { className: "p-4 gap-3 w-full box-border" },
-              content: [
-                blocks.heading("Column heading", 4),
-                blocks.paragraph("Consectetur adipiscing elit. Sed do eiusmod tempor incididunt."),
-                blocks.paragraph("Ut enim ad minim veniam, quis nostrud exercitation."),
-              ],
-            },
-            {
-              type: "column",
-              attrs: { className: "p-4 gap-3 w-full box-border" },
-              content: [
-                blocks.heading("Column heading", 4),
-                blocks.paragraph("Consectetur adipiscing elit. Sed do eiusmod tempor incididunt."),
-                blocks.paragraph("Ut enim ad minim veniam, quis nostrud exercitation."),
-              ],
-            },
+  build: () => ({
+    type: "slide",
+    attrs: { id: "slide-1", size: "16x9" },
+    content: [
+      blocks.heading("Section heading", 2),
+      blocks.columnGroup([
+        blocks.column(
+          [
+            blocks.heading("Column heading", 4),
+            blocks.paragraph("Consectetur adipiscing elit. Sed do eiusmod tempor incididunt."),
+            blocks.paragraph("Ut enim ad minim veniam, quis nostrud exercitation."),
           ],
-        },
-      ],
-    }),
+          { padding: "md", gap: "sm", fill: true }
+        ),
+        blocks.column(
+          [
+            blocks.heading("Column heading", 4),
+            blocks.paragraph("Consectetur adipiscing elit. Sed do eiusmod tempor incididunt."),
+            blocks.paragraph("Ut enim ad minim veniam, quis nostrud exercitation."),
+          ],
+          { padding: "md", gap: "sm", fill: true }
+        ),
+      ]),
+    ],
+  }),
 };
 
 const threeColumns: PresetTemplate = {
@@ -246,42 +241,35 @@ const threeColumns: PresetTemplate = {
   label: "Three Columns",
   description: "Balanced three-column text",
   icon: threeColumnsIcon,
-  build: () =>
-    slide.singleCol({
-      columnAttrs: { className: "w-full p-6 gap-4", horizontalAlign: "stretch" },
-      content: [
-        {
-          type: "row",
-          attrs: { layout: "1-1-1", className: "items-start w-full gap-4" },
-          content: [
-            {
-              type: "column",
-              attrs: { className: "p-3 gap-3 w-full box-border" },
-              content: [
-                blocks.paragraph("Lorem ipsum dolor sit amet."),
-                blocks.paragraph("Consectetur adipiscing elit. Sed do eiusmod tempor incididunt."),
-              ],
-            },
-            {
-              type: "column",
-              attrs: { className: "p-3 gap-3 w-full box-border" },
-              content: [
-                blocks.paragraph("Ut enim ad minim veniam."),
-                blocks.paragraph("Quis nostrud exercitation ullamco laboris."),
-              ],
-            },
-            {
-              type: "column",
-              attrs: { className: "p-3 gap-3 w-full box-border" },
-              content: [
-                blocks.paragraph("Nisi ut aliquip ex ea commodo consequat."),
-                blocks.paragraph("Duis aute irure dolor in reprehenderit."),
-              ],
-            },
+  build: () => ({
+    type: "slide",
+    attrs: { id: "slide-1", size: "16x9" },
+    content: [
+      blocks.columnGroup([
+        blocks.column(
+          [
+            blocks.paragraph("Lorem ipsum dolor sit amet."),
+            blocks.paragraph("Consectetur adipiscing elit. Sed do eiusmod tempor incididunt."),
           ],
-        },
-      ],
-    }),
+          { padding: "sm", gap: "sm", fill: true }
+        ),
+        blocks.column(
+          [
+            blocks.paragraph("Ut enim ad minim veniam."),
+            blocks.paragraph("Quis nostrud exercitation ullamco laboris."),
+          ],
+          { padding: "sm", gap: "sm", fill: true }
+        ),
+        blocks.column(
+          [
+            blocks.paragraph("Nisi ut aliquip ex ea commodo consequat."),
+            blocks.paragraph("Duis aute irure dolor in reprehenderit."),
+          ],
+          { padding: "sm", gap: "sm", fill: true }
+        ),
+      ]),
+    ],
+  }),
 };
 
 const threeColumnsWithHeader: PresetTemplate = {
@@ -289,46 +277,39 @@ const threeColumnsWithHeader: PresetTemplate = {
   label: "Three Columns + Header",
   description: "Header plus three columns",
   icon: threeColumnsHeaderIcon,
-  build: () =>
-    slide.singleCol({
-      columnAttrs: { className: "w-full p-6 gap-4", horizontalAlign: "stretch" },
-      content: [
-        blocks.heading("Section heading", 2),
-        {
-          type: "row",
-          attrs: { layout: "1-1-1", className: "items-start w-full gap-4" },
-          content: [
-            {
-              type: "column",
-              attrs: { className: "p-3 gap-3 w-full box-border" },
-              content: [
-                blocks.heading("Column heading", 4),
-                blocks.paragraph("Lorem ipsum dolor sit amet."),
-                blocks.paragraph("Consectetur adipiscing elit. Sed do eiusmod tempor incididunt."),
-              ],
-            },
-            {
-              type: "column",
-              attrs: { className: "p-3 gap-3 w-full box-border" },
-              content: [
-                blocks.heading("Column heading", 4),
-                blocks.paragraph("Ut enim ad minim veniam."),
-                blocks.paragraph("Quis nostrud exercitation ullamco laboris."),
-              ],
-            },
-            {
-              type: "column",
-              attrs: { className: "p-3 gap-3 w-full box-border" },
-              content: [
-                blocks.heading("Column heading", 4),
-                blocks.paragraph("Nisi ut aliquip ex ea commodo consequat."),
-                blocks.paragraph("Duis aute irure dolor in reprehenderit."),
-              ],
-            },
+  build: () => ({
+    type: "slide",
+    attrs: { id: "slide-1", size: "16x9" },
+    content: [
+      blocks.heading("Section heading", 2),
+      blocks.columnGroup([
+        blocks.column(
+          [
+            blocks.heading("Column heading", 4),
+            blocks.paragraph("Lorem ipsum dolor sit amet."),
+            blocks.paragraph("Consectetur adipiscing elit. Sed do eiusmod tempor incididunt."),
           ],
-        },
-      ],
-    }),
+          { padding: "sm", gap: "sm", fill: true }
+        ),
+        blocks.column(
+          [
+            blocks.heading("Column heading", 4),
+            blocks.paragraph("Ut enim ad minim veniam."),
+            blocks.paragraph("Quis nostrud exercitation ullamco laboris."),
+          ],
+          { padding: "sm", gap: "sm", fill: true }
+        ),
+        blocks.column(
+          [
+            blocks.heading("Column heading", 4),
+            blocks.paragraph("Nisi ut aliquip ex ea commodo consequat."),
+            blocks.paragraph("Duis aute irure dolor in reprehenderit."),
+          ],
+          { padding: "sm", gap: "sm", fill: true }
+        ),
+      ]),
+    ],
+  }),
 };
 
 const fourColumnsWithHeader: PresetTemplate = {
@@ -336,55 +317,47 @@ const fourColumnsWithHeader: PresetTemplate = {
   label: "Four Columns + Header",
   description: "Header plus four columns",
   icon: fourColumnsHeaderIcon,
-  build: () =>
-    slide.singleCol({
-      columnAttrs: { className: "w-full p-6 gap-4", horizontalAlign: "stretch" },
-      content: [
-        blocks.heading("Section heading", 2),
-        {
-          type: "row",
-          attrs: { layout: "1-1-1-1", className: "items-start w-full gap-3" },
-          content: [
-            {
-              type: "column",
-              attrs: { className: "p-3 gap-3 w-full box-border" },
-              content: [
-                blocks.heading("Column heading", 4),
-                blocks.paragraph("Lorem ipsum dolor sit amet."),
-                blocks.paragraph("Consectetur adipiscing elit."),
-              ],
-            },
-            {
-              type: "column",
-              attrs: { className: "p-3 gap-3 w-full box-border" },
-              content: [
-                blocks.heading("Column heading", 4),
-                blocks.paragraph("Ut enim ad minim veniam."),
-                blocks.paragraph("Quis nostrud exercitation ullamco laboris."),
-              ],
-            },
-            {
-              type: "column",
-              attrs: { className: "p-3 gap-3 w-full box-border" },
-              content: [
-                blocks.heading("Column heading", 4),
-                blocks.paragraph("Nisi ut aliquip ex ea commodo consequat."),
-                blocks.paragraph("Duis aute irure dolor in reprehenderit."),
-              ],
-            },
-            {
-              type: "column",
-              attrs: { className: "p-3 gap-3 w-full box-border" },
-              content: [
-                blocks.heading("Column heading", 4),
-                blocks.paragraph("Excepteur sint occaecat cupidatat."),
-                blocks.paragraph("Sunt in culpa qui officia."),
-              ],
-            },
+  build: () => ({
+    type: "slide",
+    attrs: { id: "slide-1", size: "16x9" },
+    content: [
+      blocks.heading("Section heading", 2),
+      blocks.columnGroup([
+        blocks.column(
+          [
+            blocks.heading("Column heading", 4),
+            blocks.paragraph("Lorem ipsum dolor sit amet."),
+            blocks.paragraph("Consectetur adipiscing elit."),
           ],
-        },
-      ],
-    }),
+          { padding: "sm", gap: "sm", fill: true }
+        ),
+        blocks.column(
+          [
+            blocks.heading("Column heading", 4),
+            blocks.paragraph("Ut enim ad minim veniam."),
+            blocks.paragraph("Quis nostrud exercitation ullamco laboris."),
+          ],
+          { padding: "sm", gap: "sm", fill: true }
+        ),
+        blocks.column(
+          [
+            blocks.heading("Column heading", 4),
+            blocks.paragraph("Nisi ut aliquip ex ea commodo consequat."),
+            blocks.paragraph("Duis aute irure dolor in reprehenderit."),
+          ],
+          { padding: "sm", gap: "sm", fill: true }
+        ),
+        blocks.column(
+          [
+            blocks.heading("Column heading", 4),
+            blocks.paragraph("Excepteur sint occaecat cupidatat."),
+            blocks.paragraph("Sunt in culpa qui officia."),
+          ],
+          { padding: "sm", gap: "sm", fill: true }
+        ),
+      ]),
+    ],
+  }),
 };
 
 const fullImage: PresetTemplate = {
@@ -394,14 +367,12 @@ const fullImage: PresetTemplate = {
   icon: fullImageIcon,
   build: () =>
     slide.singleCol({
-      rowAttrs: { className: "min-h-[720px]" },
-      columnAttrs: { className: "p-0 w-full h-full", horizontalAlign: "stretch" },
+      columnAttrs: { padding: "none", fill: true, align: "stretch" },
       content: [
         blocks.imageBlock({
           src: "https://placehold.co/1920x1080/png",
-          layout: "cover",
-          fullBleed: true,
-          align: "center",
+          size: "fill",
+          crop: "center",
         }),
       ],
     }),
@@ -412,24 +383,23 @@ const fourColumns: PresetTemplate = {
   label: "Four Columns",
   description: "Balanced four-column text",
   icon: fourColumnsIcon,
-  build: () =>
-    slide.singleCol({
-      columnAttrs: { className: "w-full p-4 gap-4", horizontalAlign: "stretch" },
-      content: [
-        {
-          type: "row",
-          attrs: { layout: "1-1-1-1", className: "items-start w-full gap-3" },
-          content: Array.from({ length: 4 }).map(() => ({
-            type: "column",
-            attrs: { className: "p-2.5 gap-2 w-full box-border" },
-            content: [
+  build: () => ({
+    type: "slide",
+    attrs: { id: "slide-1", size: "16x9" },
+    content: [
+      blocks.columnGroup(
+        Array.from({ length: 4 }).map(() =>
+          blocks.column(
+            [
               blocks.paragraph("Lorem ipsum dolor sit amet."),
               blocks.paragraph("Consectetur adipiscing elit."),
             ],
-          })),
-        },
-      ],
-    }),
+            { padding: "sm", gap: "sm", fill: true }
+          )
+        )
+      ),
+    ],
+  }),
 };
 
 const titleWithBullets: PresetTemplate = {
@@ -439,7 +409,7 @@ const titleWithBullets: PresetTemplate = {
   icon: titleBulletsIcon,
   build: () =>
     slide.singleCol({
-      columnAttrs: { className: "p-6 gap-4" },
+      columnAttrs: { padding: "md", gap: "md" },
       content: [
         blocks.heading("Lorem ipsum dolor sit amet", 2),
         blocks.bulletList([
@@ -457,30 +427,33 @@ const titleBulletsAndImage: PresetTemplate = {
   description: "Title with bullets and an image",
   icon: titleBulletsImageIcon,
   build: () =>
-    slide.twoCol({
-      rowAttrs: { className: "items-start w-full" },
-      leftColumnAttrs: { className: "p-6 gap-3 w-full" },
-      rightColumnAttrs: {
-        horizontalAlign: "center",
-        verticalAlign: "center",
-        className: "p-6 w-full",
-      },
-      left: [
-        blocks.heading("Lorem ipsum dolor sit amet", 2),
-        blocks.bulletList([
-          "Consectetur adipiscing elit.",
-          "Sed do eiusmod tempor incididunt.",
-          "Ut enim ad minim veniam.",
-        ]),
-      ],
-      right: [
-        blocks.imageBlock({
-          src: "https://placehold.co/480x360/png",
-          layout: "contain",
-          fullBleed: false,
-        }),
-      ],
-    }),
+    slide.twoCol(
+      blocks.column(
+        [
+          blocks.heading("Lorem ipsum dolor sit amet", 2),
+          blocks.bulletList([
+            "Consectetur adipiscing elit.",
+            "Sed do eiusmod tempor incididunt.",
+            "Ut enim ad minim veniam.",
+          ]),
+        ],
+        { padding: "md", gap: "sm", fill: true }
+      ),
+      blocks.column(
+        [
+          blocks.imageBlock({
+            src: "https://placehold.co/480x360/png",
+            size: "fit",
+          }),
+        ],
+        {
+          align: "center",
+          justify: "center",
+          padding: "md",
+          fill: true,
+        }
+      )
+    ),
 };
 
 const accentLeft: PresetTemplate = {
@@ -489,28 +462,31 @@ const accentLeft: PresetTemplate = {
   description: "Accent band with image on the left, text on the right",
   icon: accentLeftIcon,
   build: () =>
-    slide.twoCol({
-      rowAttrs: { layout: "1-2", className: "items-stretch w-full gap-0 min-h-[360px]" },
-      leftColumnAttrs: {
-        className: "bg-slate-100 p-0 w-full h-full",
-        horizontalAlign: "stretch",
-        verticalAlign: "top",
-      },
-      rightColumnAttrs: { className: "p-6 gap-3 w-full", verticalAlign: "center" },
-      left: [
-        blocks.imageBlock({
-          src: "https://placehold.co/320x240/png",
-          layout: "cover",
-          fullBleed: true,
-          align: "center",
-        }),
-      ],
-      right: [
-        blocks.heading("Accent left", 3),
-        blocks.paragraph("Short supporting copy goes here."),
-        blocks.paragraph("Add one more line if needed."),
-      ],
-    }),
+    slide.twoCol(
+      blocks.column(
+        [
+          blocks.imageBlock({
+            src: "https://placehold.co/320x240/png",
+            size: "fill",
+            crop: "center",
+          }),
+        ],
+        {
+          backgroundColor: "#f1f5f9",
+          padding: "none",
+          fill: true,
+          align: "stretch",
+        }
+      ),
+      blocks.column(
+        [
+          blocks.heading("Accent left", 3),
+          blocks.paragraph("Short supporting copy goes here."),
+          blocks.paragraph("Add one more line if needed."),
+        ],
+        { padding: "md", gap: "sm", fill: true, justify: "center" }
+      )
+    ),
 };
 
 const accentRight: PresetTemplate = {
@@ -519,28 +495,31 @@ const accentRight: PresetTemplate = {
   description: "Accent band with image on the right, text on the left",
   icon: accentRightIcon,
   build: () =>
-    slide.twoCol({
-      rowAttrs: { layout: "2-1", className: "items-stretch w-full gap-0 min-h-[360px]" },
-      leftColumnAttrs: { className: "p-6 gap-3 w-full", verticalAlign: "center" },
-      rightColumnAttrs: {
-        className: "bg-slate-100 p-0 w-full h-full",
-        horizontalAlign: "stretch",
-        verticalAlign: "top",
-      },
-      left: [
-        blocks.heading("Accent right", 3),
-        blocks.paragraph("Short supporting copy goes here."),
-        blocks.paragraph("Add one more line if needed."),
-      ],
-      right: [
-        blocks.imageBlock({
-          src: "https://placehold.co/320x240/png",
-          layout: "cover",
-          fullBleed: true,
-          align: "center",
-        }),
-      ],
-    }),
+    slide.twoCol(
+      blocks.column(
+        [
+          blocks.heading("Accent right", 3),
+          blocks.paragraph("Short supporting copy goes here."),
+          blocks.paragraph("Add one more line if needed."),
+        ],
+        { padding: "md", gap: "sm", fill: true, justify: "center" }
+      ),
+      blocks.column(
+        [
+          blocks.imageBlock({
+            src: "https://placehold.co/320x240/png",
+            size: "fill",
+            crop: "center",
+          }),
+        ],
+        {
+          backgroundColor: "#f1f5f9",
+          padding: "none",
+          fill: true,
+          align: "stretch",
+        }
+      )
+    ),
 };
 
 const accentTop: PresetTemplate = {
@@ -551,39 +530,26 @@ const accentTop: PresetTemplate = {
   build: () =>
     ({
       type: "slide",
-      attrs: { id: "slide-1", size: "16x9", className: "" },
+      attrs: { id: "slide-1", size: "16x9" },
       content: [
         {
-          type: "row",
-          attrs: { layout: "1", className: "w-full items-stretch h-[20vh] min-h-[140px]" },
+          type: "column",
+          attrs: { backgroundColor: "#f1f5f9", padding: "none", height: "200px", align: "stretch" },
           content: [
-            {
-              type: "column",
-              attrs: { className: "bg-slate-100 p-0 w-full h-full box-border" },
-              content: [
-                blocks.imageBlock({
-                  src: "https://placehold.co/1200x400/png",
-                  layout: "cover",
-                  fullBleed: true,
-                  align: "center",
-                }),
-              ],
-            },
+            blocks.imageBlock({
+              src: "https://placehold.co/1200x400/png",
+              size: "fill",
+              crop: "center",
+            }),
           ],
         },
         {
-          type: "row",
-          attrs: { layout: "1", className: "w-full flex-1" },
+          type: "column",
+          attrs: { padding: "md", gap: "sm", fill: true, justify: "end" },
           content: [
-            {
-              type: "column",
-              attrs: { className: "p-6 gap-3 w-full box-border justify-end" },
-              content: [
-                blocks.heading("Accent top", 3),
-                blocks.paragraph("Short supporting copy goes here."),
-                blocks.paragraph("Add one more line if needed."),
-              ],
-            },
+            blocks.heading("Accent top", 3),
+            blocks.paragraph("Short supporting copy goes here."),
+            blocks.paragraph("Add one more line if needed."),
           ],
         },
       ],
@@ -596,34 +562,35 @@ const accentRightFit: PresetTemplate = {
   description: "Text with a tighter image card on the right",
   icon: accentRightFitIcon,
   build: () =>
-    slide.twoCol({
-      rowAttrs: { layout: "2-1", className: "items-center w-full gap-4" },
-      leftColumnAttrs: { className: "p-6 gap-3 w-full", verticalAlign: "center" },
-      rightColumnAttrs: {
-        className: "p-6 w-full items-center",
-        verticalAlign: "center",
-        horizontalAlign: "center",
-      },
-      left: [
-        blocks.heading("Accent right (fit)", 3),
-        blocks.paragraph("Short supporting copy goes here."),
-        blocks.paragraph("Add one more line if needed."),
-      ],
-      right: [
+    slide.twoCol(
+      blocks.column(
+        [
+          blocks.heading("Accent right (fit)", 3),
+          blocks.paragraph("Short supporting copy goes here."),
+          blocks.paragraph("Add one more line if needed."),
+        ],
+        { padding: "md", gap: "sm", fill: true, justify: "center" }
+      ),
+      blocks.column(
+        [
+          blocks.column(
+            [
+              blocks.imageBlock({
+                src: "https://placehold.co/240x200/png",
+                size: "fit",
+              }),
+            ],
+            { backgroundColor: "#f1f5f9", padding: "md", gap: "sm", borderRadius: "lg", align: "center" }
+          ),
+        ],
         {
-          type: "column",
-          attrs: { className: "bg-slate-100 p-4 gap-3 rounded-lg w-full items-center" },
-          content: [
-            blocks.imageBlock({
-              src: "https://placehold.co/240x200/png",
-              layout: "contain",
-              fullBleed: false,
-              align: "center",
-            }),
-          ],
-        },
-      ],
-    }),
+          padding: "md",
+          fill: true,
+          justify: "center",
+          align: "center",
+        }
+      )
+    ),
 };
 
 const accentLeftFit: PresetTemplate = {
@@ -632,34 +599,35 @@ const accentLeftFit: PresetTemplate = {
   description: "Compact image card on the left, text on the right",
   icon: accentLeftFitIcon,
   build: () =>
-    slide.twoCol({
-      rowAttrs: { layout: "1-2", className: "items-center w-full gap-4" },
-      leftColumnAttrs: {
-        className: "p-6 w-full items-center",
-        verticalAlign: "center",
-        horizontalAlign: "center",
-      },
-      rightColumnAttrs: { className: "p-6 gap-3 w-full", verticalAlign: "center" },
-      left: [
+    slide.twoCol(
+      blocks.column(
+        [
+          blocks.column(
+            [
+              blocks.imageBlock({
+                src: "https://placehold.co/240x200/png",
+                size: "fit",
+              }),
+            ],
+            { backgroundColor: "#f1f5f9", padding: "md", gap: "sm", borderRadius: "lg", align: "center" }
+          ),
+        ],
         {
-          type: "column",
-          attrs: { className: "bg-slate-100 p-4 gap-3 rounded-lg w-full items-center" },
-          content: [
-            blocks.imageBlock({
-              src: "https://placehold.co/240x200/png",
-              layout: "contain",
-              fullBleed: false,
-              align: "center",
-            }),
-          ],
-        },
-      ],
-      right: [
-        blocks.heading("Accent left (fit)", 3),
-        blocks.paragraph("Short supporting copy goes here."),
-        blocks.paragraph("Add one more line if needed."),
-      ],
-    }),
+          padding: "md",
+          fill: true,
+          justify: "center",
+          align: "center",
+        }
+      ),
+      blocks.column(
+        [
+          blocks.heading("Accent left (fit)", 3),
+          blocks.paragraph("Short supporting copy goes here."),
+          blocks.paragraph("Add one more line if needed."),
+        ],
+        { padding: "md", gap: "sm", fill: true, justify: "center" }
+      )
+    ),
 };
 
 const twoImageColumns: PresetTemplate = {
@@ -667,47 +635,37 @@ const twoImageColumns: PresetTemplate = {
   label: "2 image columns",
   description: "Header with two image cards",
   icon: twoImageColumnsIcon,
-  build: () =>
-    slide.singleCol({
-      columnAttrs: { className: "w-full p-6 gap-4", horizontalAlign: "stretch" },
-      content: [
-        blocks.heading("Images", 2),
-        {
-          type: "row",
-          attrs: { layout: "1-1", className: "items-start w-full gap-4" },
-          content: [
-            {
-              type: "column",
-              attrs: { className: "p-4 gap-3 w-full box-border" },
-              content: [
-                blocks.imageBlock({
-                  src: "https://placehold.co/640x360/png",
-                  layout: "contain",
-                  fullBleed: false,
-                  align: "center",
-                }),
-                blocks.heading("Image title", 4),
-                blocks.paragraph("Short supporting copy goes here."),
-              ],
-            },
-            {
-              type: "column",
-              attrs: { className: "p-4 gap-3 w-full box-border" },
-              content: [
-                blocks.imageBlock({
-                  src: "https://placehold.co/640x360/png",
-                  layout: "contain",
-                  fullBleed: false,
-                  align: "center",
-                }),
-                blocks.heading("Image title", 4),
-                blocks.paragraph("Short supporting copy goes here."),
-              ],
-            },
+  build: () => ({
+    type: "slide",
+    attrs: { id: "slide-1", size: "16x9" },
+    content: [
+      blocks.heading("Images", 2),
+      blocks.columnGroup([
+        blocks.column(
+          [
+            blocks.imageBlock({
+              src: "https://placehold.co/640x360/png",
+              size: "fit",
+            }),
+            blocks.heading("Image title", 4),
+            blocks.paragraph("Short supporting copy goes here."),
           ],
-        },
-      ],
-    }),
+          { padding: "md", gap: "sm", fill: true }
+        ),
+        blocks.column(
+          [
+            blocks.imageBlock({
+              src: "https://placehold.co/640x360/png",
+              size: "fit",
+            }),
+            blocks.heading("Image title", 4),
+            blocks.paragraph("Short supporting copy goes here."),
+          ],
+          { padding: "md", gap: "sm", fill: true }
+        ),
+      ]),
+    ],
+  }),
 };
 
 const registry: Record<PresetKey, PresetTemplate> = {