@blockslides/ai-context 0.2.0 → 0.3.1

package/dist/index.js

@@ -11,6 +11,7 @@ __export(v1_exports, {
   bulletList: () => bulletList,
   codeBlock: () => codeBlock,
   column: () => column,
+  columnGroup: () => columnGroup,
   core: () => core,
   editingRules: () => editingRules,
   fullDocument: () => fullDocument,
@@ -20,7 +21,6 @@ __export(v1_exports, {
   image: () => image,
   imageBlock: () => imageBlock,
   paragraph: () => paragraph,
-  row: () => row,
   sizing: () => sizing,
   slide: () => slide,
   style: () => style,
@@ -34,15 +34,35 @@ You are given a BlockSlides document to CREATE or EDIT.
 
 Document shape:
 - doc: { type: "doc", content: slide[] }
-- slide: { type: "slide", attrs?, content: row[] }
-- row: { type: "row", attrs?, content: column[] | block[] }
-- column: { type: "column", attrs?, content: (block | row)[] }
-- block: includes nodes like paragraph, heading, imageBlock, etc.
+- slide: { type: "slide", attrs?, content: block[] }
+- block: includes heading, paragraph, column, imageBlock, bulletList, codeBlock, blockquote, horizontalRule, youtube, etc.
+- column: { type: "column", attrs?, content: block[] }
+
+Key changes:
+- Slides can contain columns, columnGroups, or any block-level content
+- Use column directly in slide for full-width blocks
+- Use columnGroup to place multiple columns side-by-side
+- All block types inherit common attributes from BaseBlockAttributes
+
+BaseBlockAttributes (available on all blocks):
+- align: "left" | "center" | "right" | "stretch"
+- justify: "start" | "center" | "end" | "space-between" (for containers)
+- padding: "none" | "sm" | "md" | "lg"
+- margin: "none" | "sm" | "md" | "lg"
+- gap: "none" | "sm" | "md" | "lg"
+- backgroundColor: string (CSS color)
+- backgroundImage: string (URL)
+- borderRadius: "none" | "sm" | "md" | "lg"
+- border: string (CSS border)
+- fill: boolean (fill available space)
+- width: string (CSS width)
+- height: string (CSS height)
 
 Rules:
 - Use only known node types and valid attrs. Do not invent attributes.
 - Prefer stable references: preserve slide.attrs.id if present.
 - Slides and flyers share the same JSON; flyers are slides sized via attrs and theme.
+- Use semantic spacing tokens (sm/md/lg) instead of raw pixel values
 </core>
 `.trim();
 
@@ -57,79 +77,129 @@ Output contract:
 // src/contexts/v1/imageBlock.ts
 var imageBlock = `
 <imageBlock>
-Node: imageBlock
-Attrs:
-- src (required): string (URL)
-- alt (optional): string
-- caption (optional): string
-- credit (optional): string
-- layout (optional): "cover" | "contain" | "fill" | "focus" | "pattern"
-- align (optional): "left" | "center" | "right" | "stretch" (default "center")
-- width (optional): number (px) or string ("%"/"px")
-- height (optional): number (px) or string ("%"/"px")
-- fullBleed (optional): boolean (removes radius; stretches width)
-- assetId (optional): string
-- focalX, focalY (optional): 0\u2013100; spotlight position (when relevant)
-
-Behavior:
-- Numbers for width/height are interpreted as pixels.
-- layout:
-  - cover: Fill container; crop edges as needed.
-  - contain: Fit entirely; may letterbox.
-  - fill: Stretch to container (may distort).
-  - focus: Cover + radial spotlight at focalX/focalY.
-  - pattern: Hide <img>; use tiled background (from src).
-- Do not set unknown attributes. Preserve existing valid attrs.
-</imageBlock>
-`.trim();
+Node: imageBlock (block group)
+Attrs (required):
+- src (required): string (image URL)
+
+Attrs (optional - image-specific):
+- alt (optional): string - alt text for accessibility
+- caption (optional): string - image caption
+- credit (optional): string - image credit/attribution
+- assetId (optional): string - asset reference
+- size (optional): "fill" | "fit" | "natural" - how image fills container
+  - fill: Cover entire container (width:100%, height:100%, object-fit:cover)
+  - fit: Fit inside container with letterboxing (object-fit:contain)
+  - natural: Use image's natural dimensions
+- crop (optional): "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right"
+  - Focal point for fill/fit modes (default: "center")
+
+Attrs (inherited from BaseBlockAttributes):
+- align (optional): "left" | "center" | "right" | "stretch" - block alignment
+- padding (optional): "none" | "sm" | "md" | "lg" - internal padding
+- margin (optional): "none" | "sm" | "md" | "lg" - external margin
+- backgroundColor (optional): string - background color
+- borderRadius (optional): "none" | "sm" | "md" | "lg" - corner rounding
+- width (optional): string - explicit width override (CSS value)
+- height (optional): string - explicit height override (CSS value)
+
+Deprecated attributes (kept for backwards compatibility, do not use):
+- layout, fullBleed, focalX, focalY
 
-// src/contexts/v1/row.ts
-var row = `
-<row>
-Node: row
-Attrs:
-- layout (optional): "", "1", "1-1", "2-1", "1-2", "1-1-1", "2-1-1", "1-2-1", "1-1-2", "1-1-1-1"
-- className (optional): string (CSS classes)
-- backgroundMode (optional): "none" | "color" | "image" | "imageOverlay"
-- backgroundColor (optional): string (CSS color for row background)
-- backgroundImage (optional): string (URL for row-level background image)
-- backgroundOverlayColor (optional): string (overlay color when using imageOverlay)
-- backgroundOverlayOpacity (optional): number (0\u20131, overlay opacity)
-
-Semantics:
-- Fractions determine relative column flex:
-  - 1-1: two equal columns
-  - 2-1: first column is double width
-  - 1-2: second column is double width
-  - 1-1-1: three equal columns
-  - 1-1-1-1: four equal columns
-- Empty layout ("", "1") acts as a single full-width column.
-- Use row backgrounds for horizontal bands (e.g., header strip) instead of attaching everything to the slide.
-</row>
+Notes:
+- Default size is "fill" if not specified
+- Use crop to control which part of the image is visible when cropped
+- width/height overrides apply on top of size mode
+</imageBlock>
 `.trim();
 
 // src/contexts/v1/column.ts
 var column = `
 <column>
-Node: column
-Attrs:
-- className (optional): string
-- contentMode (optional): "default" (future-friendly)
-- verticalAlign (optional): "top" | "center" | "bottom" (default "top")
-- horizontalAlign (optional): "left" | "center" | "right" | "stretch" (default "left")
-- padding (optional): "none" (future-friendly)
-- backgroundMode (optional): "none" | "color" | "image" | "imageOverlay"
-- backgroundColor (optional): string (CSS color for the column background)
-- backgroundImage (optional): string (URL for column-level background image)
-- backgroundOverlayColor (optional): string (overlay color when using imageOverlay)
-- backgroundOverlayOpacity (optional): number (0\u20131, overlay opacity)
+Node: column (block group)
+Attrs (inherits from BaseBlockAttributes):
+- align (optional): "left" | "center" | "right" | "stretch" - horizontal alignment
+- justify (optional): "start" | "center" | "end" | "space-between" - vertical distribution of children
+- padding (optional): "none" | "sm" | "md" | "lg" - internal spacing (semantic tokens)
+- margin (optional): "none" | "sm" | "md" | "lg" - external spacing
+- gap (optional): "none" | "sm" | "md" | "lg" - space between child blocks
+- backgroundColor (optional): string - CSS color
+- backgroundImage (optional): string - background image URL
+- borderRadius (optional): "none" | "sm" | "md" | "lg" - corner rounding
+- border (optional): string - CSS border value
+- fill (optional): boolean - whether to fill available space
+- width (optional): string - explicit width (CSS value)
+- height (optional): string - explicit height (CSS value)
+
+Content:
+- Contains one or more blocks (heading, paragraph, imageBlock, bulletList, etc.)
+- Columns cannot nest other columns
+
+Spacing tokens:
+- none: 0
+- sm: 8px
+- md: 16px
+- lg: 32px
+
+Border radius tokens:
+- none: 0
+- sm: 4px
+- md: 8px
+- lg: 16px
 
 Notes:
-- Use className for spacing, colors, typography (e.g., Tailwind).
-- Keep nesting shallow; columns can contain rows or blocks as needed.
+- Use column directly in slide for full-width content
+- Wrap columns in columnGroup to place them side-by-side
+- Use justify to control vertical distribution of child blocks
+- Use gap for spacing between children instead of margins
 </column>
 `.trim();
 
+// src/contexts/v1/columnGroup.ts
+var columnGroup = `
+<columnGroup>
+Node: columnGroup (horizontal container)
+Purpose: Groups multiple columns side-by-side horizontally
+
+Attrs:
+- layout (optional): string - Layout ratio for columns (e.g., "1-1" for equal width, "2-1" for 2:1 ratio, "1-2-1" for three columns)
+- fill (optional): boolean - Whether the columnGroup fills available vertical space
+- className (optional): string - CSS classes
+- backgroundMode (optional): "none" | "color" | "image" | "imageOverlay"
+- backgroundColor (optional): string - CSS color for background
+- backgroundImage (optional): string - URL for background image
+- backgroundOverlayColor (optional): string - Color for overlay when using imageOverlay
+- backgroundOverlayOpacity (optional): number (0-1) - Opacity for overlay
+
+Content:
+- Contains one or more column nodes
+- Columns within a columnGroup are displayed side-by-side horizontally
+- Each column shares the horizontal space (equal width by default, or based on layout attribute)
+
+Usage:
+- Use columnGroup when you want columns to appear next to each other horizontally
+- For full-width content, use column directly in the slide (without columnGroup)
+- You can have multiple columnGroups in a slide to create different rows of columns
+
+Examples:
+1. Two equal columns side-by-side:
+   columnGroup { content: [column, column] }
+
+2. Three columns with 2:1:1 ratio:
+   columnGroup { attrs: { layout: "2-1-1" }, content: [column, column, column] }
+
+3. Full-width content above and below a two-column section:
+   slide {
+     content: [
+       column { ... },              // full-width
+       columnGroup {                // side-by-side
+         content: [column, column]
+       },
+       column { ... }               // full-width
+     ]
+   }
+</columnGroup>
+`.trim();
+
 // src/contexts/v1/slide.ts
 var slide = `
 <slide>
@@ -145,12 +215,16 @@ Attrs:
 - backgroundOverlayOpacity (optional): number (0\u20131, opacity for the overlay)
 
 Content:
-- slide contains one or more rows.
+- slide can contain columns, columnGroups, or any block-level content (heading, paragraph, imageBlock, bulletList, codeBlock, etc.)
+- Use column directly for full-width content
+- Use columnGroup to place multiple columns side-by-side
+- You can mix columns, columnGroups, and other blocks in any order
 
 Notes:
 - Flyers are slides sized for paper (e.g., size: "a4-portrait").
 - Set size to control canvas dimensions; theme applies the exact width/height.
 - For background images, prefer backgroundMode/backgroundImage over Tailwind bg-[url(...)]; the extension will inject the correct CSS.
+- To create multi-column layouts, wrap columns in a columnGroup
 </slide>
 `.trim();
 
@@ -170,7 +244,7 @@ var editingRules = `
 - Preserve existing ids and valid attributes. Do not remove or rename known attrs.
 - Use only allowed enum values. Do not invent new enum values.
 - Avoid introducing new attributes that are not documented. If styling is needed, prefer className.
-- Keep the document valid: slide > row > column > blocks.
+- Keep the document valid: slide > (column | columnGroup > column) > blocks.
 </General editing rules>
 
 <Centering content in a column>
@@ -184,17 +258,17 @@ var editingRules = `
   - After:  column.attrs = { verticalAlign: "center", horizontalAlign: "center", padding: "none" }
 </Centering content in a column>
 
-<Backgrounds (slides, rows, columns)>
+<Backgrounds (slides, columnGroups, columns)>
 - Use structured background attrs instead of raw Tailwind bg-[url(...)] when setting background images.
 - If you use bg-[...], the image will not work because the tailwind classes we need have been tree shaken off - instead use the attributes.
 - For slide-level backgrounds (hero/flyer):
   - Use slide.attrs.backgroundMode = "color" | "image" | "imageOverlay".
   - For images, set slide.attrs.backgroundImage to the image URL.
   - For overlays, set slide.attrs.backgroundOverlayColor (e.g., "rgba(0,0,0,0.8)") and slide.attrs.backgroundOverlayOpacity (0\u20131).
-- For horizontal bands, use row-level backgrounds (row.attrs.background*).
+- For horizontal bands, use columnGroup-level backgrounds (columnGroup.attrs.background*).
 - For panel-style sections, use column-level backgrounds (column.attrs.background*).
-- Do not mix multiple background images on the same node; prefer one backgroundMode per slide/row/column and layer additional visuals as imageBlock nodes.
-</Backgrounds (slides, rows, columns)>
+- Do not mix multiple background images on the same node; prefer one backgroundMode per slide/columnGroup/column and layer additional visuals as imageBlock nodes.
+</Backgrounds (slides, columnGroups, columns)>
 
 <Text editing (headings and paragraphs)>
 - Preserve semantic types: do not turn headings into paragraphs or vice versa unless explicitly asked.
@@ -229,42 +303,60 @@ Sizing
 // src/contexts/v1/blockquote.ts
 var blockquote = `
 <blockquote>
-Node: blockquote
-Attrs:
-- HTML-only; no required JSON attrs beyond optional styling such as className.
+Node: blockquote (block group)
+Attrs (inherited from BaseBlockAttributes):
+- align: "left" | "center" | "right"
+- padding: "none" | "sm" | "md" | "lg"
+- margin: "none" | "sm" | "md" | "lg"
+- backgroundColor: string (CSS color)
+- borderRadius: "none" | "sm" | "md" | "lg"
+- (and other base attributes)
 
 Content:
 - One or more block nodes (typically paragraphs, headings, lists).
 
 Semantics:
-- Use for quoted text or callouts inside a column or row.
-- Styling should be applied via className on the surrounding column/slide, not by inventing new attrs here.
+- Use for quoted text or callouts inside a column or slide.
+- BaseBlockAttributes provide consistent styling capabilities.
 </blockquote>
 `.trim();
 
 // src/contexts/v1/bulletList.ts
 var bulletList = `
 <bulletList>
-Node: bulletList
-Attrs:
-- HTML-only; no required JSON attrs beyond optional styling such as className.
+Node: bulletList (block group)
+Attrs (inherited from BaseBlockAttributes):
+- align: "left" | "center" | "right"
+- padding: "none" | "sm" | "md" | "lg"
+- margin: "none" | "sm" | "md" | "lg"
+- backgroundColor: string (CSS color)
+- borderRadius: "none" | "sm" | "md" | "lg"
+- (and other base attributes)
 
 Content:
 - One or more list item nodes (listItem) that contain paragraphs or inline content.
 
 Semantics:
 - Represents an unordered list rendered as <ul>.
-- Use when you need bullet points inside a column or blockquote.
-- Do not use bulletList as a top-level child of doc; it belongs inside a column/row structure.
+- Use when you need bullet points inside a column or slide.
+- Can be placed directly in slides or within columns.
 </bulletList>
 `.trim();
 
 // src/contexts/v1/codeBlock.ts
 var codeBlock = `
 <codeBlock>
-Node: codeBlock
-Attrs:
-- language (optional): string | null (e.g., "js", "ts", "python").
+Node: codeBlock (block group)
+Attrs (codeBlock-specific):
+- language (optional): string | null (e.g., "js", "ts", "python")
+
+Attrs (inherited from BaseBlockAttributes):
+- align: "left" | "center" | "right"
+- padding: "none" | "sm" | "md" | "lg"
+- margin: "none" | "sm" | "md" | "lg"
+- backgroundColor: string (CSS color)
+- borderRadius: "none" | "sm" | "md" | "lg"
+- (and other base attributes)
 
 Content:
 - Plain text only (no child nodes); used for preformatted code samples.
@@ -295,16 +387,21 @@ Semantics:
 // src/contexts/v1/horizontalRule.ts
 var horizontalRule = `
 <horizontalRule>
-Node: horizontalRule
-Attrs:
-- HTML-only; no JSON attrs beyond optional styling via surrounding layout.
+Node: horizontalRule (block group)
+Attrs (inherited from BaseBlockAttributes):
+- align: "left" | "center" | "right" | "stretch"
+- padding: "none" | "sm" | "md" | "lg"
+- margin: "none" | "sm" | "md" | "lg"
+- backgroundColor: string (CSS color)
+- (and other base attributes)
 
 Content:
 - No children; this is a self-contained separator.
 
 Semantics:
 - Renders as <hr>.
-- Use to visually separate sections within a slide (for example, between rows of text).
+- Use to visually separate sections within a slide.
+- Can control spacing around the rule with padding/margin.
 </horizontalRule>
 `.trim();
 
@@ -330,9 +427,17 @@ Semantics:
 // src/contexts/v1/heading.ts
 var heading = `
 <heading>
-Node: heading
-Attrs:
-- level (required): 1 | 2 | 3 | 4 | 5 | 6.
+Node: heading (block group)
+Attrs (heading-specific):
+- level (required): 1 | 2 | 3 | 4 | 5 | 6
+
+Attrs (inherited from BaseBlockAttributes):
+- align: "left" | "center" | "right"
+- padding: "none" | "sm" | "md" | "lg"
+- margin: "none" | "sm" | "md" | "lg"
+- backgroundColor: string (CSS color)
+- borderRadius: "none" | "sm" | "md" | "lg"
+- (and other base attributes)
 
 Content:
 - Inline content (text, marks, inline nodes).
@@ -340,117 +445,61 @@ Content:
 Semantics:
 - Renders as <h1>\u2026<h6> depending on level.
 - Use level 1\u20132 for main slide titles, 3\u20134 for section headings, 5\u20136 for subtle labels.
-- Do not invent other attrs; typography/styling should come from className on columns/slides.
 </heading>
 `.trim();
 
 // src/contexts/v1/paragraph.ts
 var paragraph = `
 <paragraph>
-Node: paragraph
-Attrs:
-- HTML-only; no structured JSON attrs beyond optional styling such as className.
+Node: paragraph (block group)
+Attrs (inherited from BaseBlockAttributes):
+- align: "left" | "center" | "right"
+- padding: "none" | "sm" | "md" | "lg"
+- margin: "none" | "sm" | "md" | "lg"
+- backgroundColor: string (CSS color)
+- borderRadius: "none" | "sm" | "md" | "lg"
+- (and other base attributes)
 
 Content:
 - Inline content (text with marks, inline nodes such as image or hardBreak).
 
 Semantics:
-- Default text block inside columns and rows.
-- Multiple paragraphs can be stacked within the same column to create vertical rhythm.
+- Default text block inside columns and slides.
+- Multiple paragraphs can be stacked to create vertical rhythm.
+- Use gap on parent column instead of margin on individual paragraphs for consistent spacing.
 </paragraph>
 `.trim();
 
 // src/contexts/v1/youtube.ts
 var youtube = `
 <youtube>
-Node: youtube
-Attrs:
-- src (required): string (public YouTube URL).
-- start (optional): number (start time in seconds).
-- width (optional): number (frame width in px).
-- height (optional): number (frame height in px).
+Node: youtube (block group)
+Attrs (youtube-specific):
+- src (required): string (public YouTube URL)
+- start (optional): number (start time in seconds)
+- width (optional): number (frame width in px)
+- height (optional): number (frame height in px)
+
+Attrs (inherited from BaseBlockAttributes):
+- align: "left" | "center" | "right" | "stretch"
+- padding: "none" | "sm" | "md" | "lg"
+- margin: "none" | "sm" | "md" | "lg"
+- borderRadius: "none" | "sm" | "md" | "lg"
+- (and other base attributes)
 
 Content:
 - No children; this is an atomic embed node.
 
 Semantics:
 - Renders as an embedded YouTube iframe wrapped in a container <div>.
-- Use for video embeds inside a column or row; keep other text in separate paragraphs/columns.
+- Use for video embeds inside a column or slide.
 - Do not embed raw <iframe> HTML directly; always use the youtube node with attrs.
 </youtube>
 `.trim();
 
-// src/examples/v1/index.ts
-var v1_exports2 = {};
-__export(v1_exports2, {
-  flyers: () => flyers,
-  slides: () => slides
-});
-
-// src/examples/v1/slides.ts
-var slides = `
-Examples: Slides (full-document output)
-
-{
-  "type": "doc",
-  "content": [
-    {
-      "type": "slide",
-      "attrs": { "id": "intro", "size": "16x9" },
-      "content": [
-        {
-          "type": "row",
-          "attrs": { "layout": "1-1" },
-          "content": [
-            { "type": "column", "content": [
-              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "Welcome" }] }
-            ]},
-            { "type": "column", "content": [
-              { "type": "imageBlock", "attrs": { "src": "https://picsum.photos/seed/welcome/1200/800", "layout": "cover", "align": "center" } }
-            ]}
-          ]
-        }
-      ]
-    }
-  ]
-}
-
-/* more-slide-examples to be added here */
-`.trim();
-
-// src/examples/v1/flyers.ts
-var flyers = `
-Examples: Flyers (A4 slides; full-document output)
-
-{
-  "type": "doc",
-  "content": [
-    {
-      "type": "slide",
-      "attrs": { "id": "a4-flyer", "size": "a4-portrait", "className": "bg-white text-slate-900" },
-      "content": [
-        {
-          "type": "row",
-          "attrs": { "layout": "1" },
-          "content": [
-            { "type": "column", "content": [
-              { "type": "heading", "attrs": { "level": 2 }, "content": [{ "type": "text", "text": "Event Title" }] },
-              { "type": "paragraph", "content": [{ "type": "text", "text": "Date \xB7 Location" }] },
-              { "type": "imageBlock", "attrs": { "src": "https://picsum.photos/seed/a4/1600/1000", "layout": "contain", "align": "center", "height": 320 } }
-            ]}
-          ]
-        }
-      ]
-    }
-  ]
-}
-
-/* more-flyer-examples to be added here */
-`.trim();
-
 // src/bundles/v1/index.ts
-var v1_exports4 = {};
-__export(v1_exports4, {
+var v1_exports3 = {};
+__export(v1_exports3, {
   all: () => all,
   allContexts: () => allContexts,
   allSchemas: () => allSchemas,
@@ -459,7 +508,7 @@ __export(v1_exports4, {
 });
 
 // src/bundles/v1/minimalCreate.ts
-var minimalCreate = [core, fullDocument, slide, row, column, style].join("\n\n");
+var minimalCreate = [core, fullDocument, slide, column, style].join("\n\n");
 
 // src/bundles/v1/imageEditing.ts
 var imageEditing = [core, fullDocument, imageBlock, editingRules].join("\n\n");
@@ -469,7 +518,6 @@ var all = [
   core,
   fullDocument,
   slide,
-  row,
   column,
   style,
   sizing,
@@ -487,19 +535,19 @@ var all = [
 ].join("\n\n");
 
 // src/schemas/v1/index.ts
-var v1_exports3 = {};
-__export(v1_exports3, {
+var v1_exports2 = {};
+__export(v1_exports2, {
   blockquote: () => blockquote_schema_default,
   bulletList: () => bulletList_schema_default,
   codeBlock: () => codeBlock_schema_default,
   column: () => column_schema_default,
+  columnGroup: () => columnGroup_schema_default,
   hardBreak: () => hardBreak_schema_default,
   heading: () => heading_schema_default,
   horizontalRule: () => horizontalRule_schema_default,
   image: () => image_schema_default,
   imageBlock: () => imageBlock_schema_default,
   paragraph: () => paragraph_schema_default,
-  row: () => row_schema_default,
   slide: () => slide_schema_default,
   youtube: () => youtube_schema_default
 });
@@ -508,77 +556,101 @@ __export(v1_exports3, {
 var imageBlock_schema_default = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   title: "imageBlock",
+  description: "An image block with simplified size and crop controls. Also inherits common block attributes.",
   type: "object",
   properties: {
     type: { const: "imageBlock" },
     attrs: {
       type: "object",
       properties: {
-        src: { type: "string", minLength: 1 },
-        alt: { type: "string" },
-        caption: { type: "string" },
-        credit: { type: "string" },
-        layout: { enum: ["cover", "contain", "fill", "focus", "pattern", null] },
-        align: { enum: ["left", "center", "right", "stretch", null] },
-        width: { type: ["number", "string", "null"] },
-        height: { type: ["number", "string", "null"] },
-        fullBleed: { type: "boolean" },
-        assetId: { type: ["string", "null"] },
-        focalX: { type: ["number", "null"], minimum: 0, maximum: 100 },
-        focalY: { type: ["number", "null"], minimum: 0, maximum: 100 }
+        src: { type: "string", minLength: 1, description: "Image URL (required)" },
+        alt: { type: "string", description: "Alt text for accessibility" },
+        caption: { type: "string", description: "Image caption" },
+        credit: { type: "string", description: "Image credit/attribution" },
+        size: {
+          enum: ["fill", "fit", "natural", null],
+          description: "How the image fills its container: fill (cover), fit (contain), or natural (original size)"
+        },
+        crop: {
+          enum: ["center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right", null],
+          description: "Crop/focus position for fill/fit modes"
+        },
+        align: { enum: ["left", "center", "right", "stretch", null], description: "Block alignment within parent" },
+        padding: { enum: ["none", "sm", "md", "lg", null], description: "Internal padding" },
+        backgroundColor: { type: ["string", "null"], description: "Background color" },
+        borderRadius: { enum: ["none", "sm", "md", "lg", null], description: "Corner rounding" },
+        width: { type: ["string", "null"], description: "Explicit width override" },
+        height: { type: ["string", "null"], description: "Explicit height override" },
+        assetId: { type: ["string", "null"], description: "Asset ID reference" },
+        layout: { enum: ["cover", "contain", "fill", "focus", "pattern", null], description: "DEPRECATED: Use size instead" },
+        fullBleed: { type: "boolean", description: "DEPRECATED: Use size='fill' instead" },
+        focalX: { type: ["number", "null"], minimum: 0, maximum: 100, description: "DEPRECATED: Use crop instead" },
+        focalY: { type: ["number", "null"], minimum: 0, maximum: 100, description: "DEPRECATED: Use crop instead" }
       },
       required: ["src"],
-      additionalProperties: false
+      additionalProperties: true
     }
   },
   required: ["type"],
   additionalProperties: false
 };
 
-// src/schemas/v1/row.schema.json
-var row_schema_default = {
+// src/schemas/v1/column.schema.json
+var column_schema_default = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
-  title: "row",
+  title: "column",
+  description: "A container block that holds other blocks. Common attributes (align, padding, gap, backgroundColor, etc.) are shared with all block types.",
   type: "object",
   properties: {
-    type: { const: "row" },
+    type: { const: "column" },
     attrs: {
       type: "object",
       properties: {
-        layout: {
-          enum: ["", "1", "1-1", "2-1", "1-2", "1-1-1", "2-1-1", "1-2-1", "1-1-2", "1-1-1-1", null]
-        },
-        className: { type: ["string", "null"] },
-        backgroundMode: {
-          enum: ["none", "color", "image", "imageOverlay", null]
-        },
-        backgroundColor: { type: ["string", "null"] },
-        backgroundImage: { type: ["string", "null"] },
-        backgroundOverlayColor: { type: ["string", "null"] },
-        backgroundOverlayOpacity: { type: ["number", "null"] }
+        align: { enum: ["left", "center", "right", "stretch", null], description: "Horizontal alignment of content" },
+        justify: { enum: ["start", "center", "end", "space-between", null], description: "Vertical distribution of children" },
+        padding: { enum: ["none", "sm", "md", "lg", null], description: "Internal padding" },
+        margin: { enum: ["none", "sm", "md", "lg", null], description: "External margin" },
+        gap: { enum: ["none", "sm", "md", "lg", null], description: "Gap between child blocks" },
+        backgroundColor: { type: ["string", "null"], description: "Background color" },
+        backgroundImage: { type: ["string", "null"], description: "Background image URL" },
+        borderRadius: { enum: ["none", "sm", "md", "lg", null], description: "Corner rounding" },
+        border: { type: ["string", "null"], description: "CSS border value" },
+        fill: { type: ["boolean", "null"], description: "Whether to fill available space" },
+        width: { type: ["string", "null"], description: "Explicit width" },
+        height: { type: ["string", "null"], description: "Explicit height" }
       },
       additionalProperties: true
+    },
+    content: {
+      type: "array",
+      items: { type: "object" },
+      description: "Child blocks"
     }
   },
   required: ["type"],
   additionalProperties: false
 };
 
-// src/schemas/v1/column.schema.json
-var column_schema_default = {
+// src/schemas/v1/columnGroup.schema.json
+var columnGroup_schema_default = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
-  title: "column",
+  title: "columnGroup",
+  description: "A horizontal container that groups multiple columns side-by-side. Use columnGroup when you want columns to be placed next to each other horizontally. For full-width content, use column directly in the slide.",
   type: "object",
   properties: {
-    type: { const: "column" },
+    type: { const: "columnGroup" },
     attrs: {
       type: "object",
       properties: {
+        layout: {
+          type: ["string", "null"],
+          description: "Layout ratio for columns (e.g., '1-1' for equal, '2-1' for 2:1 ratio)"
+        },
+        fill: {
+          type: ["boolean", "null"],
+          description: "Whether the columnGroup should fill available vertical space"
+        },
         className: { type: ["string", "null"] },
-        contentMode: { enum: ["default", null] },
-        verticalAlign: { enum: ["top", "center", "bottom", null] },
-        horizontalAlign: { enum: ["left", "center", "right", "stretch", null] },
-        padding: { enum: ["none", null] },
         backgroundMode: {
           enum: ["none", "color", "image", "imageOverlay", null]
         },
@@ -588,9 +660,21 @@ var column_schema_default = {
         backgroundOverlayOpacity: { type: ["number", "null"] }
       },
       additionalProperties: true
+    },
+    content: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          type: { const: "column" }
+        },
+        required: ["type"]
+      },
+      minItems: 1,
+      description: "Array of column nodes"
     }
   },
-  required: ["type"],
+  required: ["type", "content"],
   additionalProperties: false
 };
 
@@ -598,6 +682,7 @@ var column_schema_default = {
 var slide_schema_default = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   title: "slide",
+  description: "A slide containing blocks directly. Blocks can be any block-level node (heading, paragraph, column, imageBlock, etc.). Adjacent columns automatically form horizontal layouts.",
   type: "object",
   properties: {
     type: { const: "slide" },
@@ -627,6 +712,11 @@ var slide_schema_default = {
         backgroundOverlayOpacity: { type: ["number", "null"] }
       },
       additionalProperties: true
+    },
+    content: {
+      type: "array",
+      items: { type: "object" },
+      description: "Block-level content (heading, paragraph, column, imageBlock, etc.)"
     }
   },
   required: ["type"],
@@ -637,12 +727,25 @@ var slide_schema_default = {
 var blockquote_schema_default = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   title: "blockquote",
+  description: "A blockquote. Inherits common block attributes.",
   type: "object",
   properties: {
     type: { const: "blockquote" },
     attrs: {
       type: "object",
+      properties: {
+        align: { enum: ["left", "center", "right", null], description: "Text alignment" },
+        padding: { enum: ["none", "sm", "md", "lg", null], description: "Internal padding" },
+        margin: { enum: ["none", "sm", "md", "lg", null], description: "External margin" },
+        backgroundColor: { type: ["string", "null"], description: "Background color" },
+        borderRadius: { enum: ["none", "sm", "md", "lg", null], description: "Corner rounding" }
+      },
       additionalProperties: true
+    },
+    content: {
+      type: "array",
+      items: { type: "object" },
+      description: "Block content"
     }
   },
   required: ["type"],
@@ -653,12 +756,25 @@ var blockquote_schema_default = {
 var bulletList_schema_default = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   title: "bulletList",
+  description: "A bullet list block. Inherits common block attributes.",
   type: "object",
   properties: {
     type: { const: "bulletList" },
     attrs: {
       type: "object",
+      properties: {
+        align: { enum: ["left", "center", "right", null], description: "Text alignment" },
+        padding: { enum: ["none", "sm", "md", "lg", null], description: "Internal padding" },
+        margin: { enum: ["none", "sm", "md", "lg", null], description: "External margin" },
+        backgroundColor: { type: ["string", "null"], description: "Background color" },
+        borderRadius: { enum: ["none", "sm", "md", "lg", null], description: "Corner rounding" }
+      },
       additionalProperties: true
+    },
+    content: {
+      type: "array",
+      items: { type: "object" },
+      description: "List items"
     }
   },
   required: ["type"],
@@ -669,15 +785,26 @@ var bulletList_schema_default = {
 var codeBlock_schema_default = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   title: "codeBlock",
+  description: "A code block. Inherits common block attributes.",
   type: "object",
   properties: {
     type: { const: "codeBlock" },
     attrs: {
       type: "object",
       properties: {
-        language: { type: ["string", "null"] }
+        language: { type: ["string", "null"], description: "Programming language for syntax highlighting" },
+        align: { enum: ["left", "center", "right", null], description: "Block alignment" },
+        padding: { enum: ["none", "sm", "md", "lg", null], description: "Internal padding" },
+        margin: { enum: ["none", "sm", "md", "lg", null], description: "External margin" },
+        backgroundColor: { type: ["string", "null"], description: "Background color" },
+        borderRadius: { enum: ["none", "sm", "md", "lg", null], description: "Corner rounding" }
       },
       additionalProperties: true
+    },
+    content: {
+      type: "array",
+      items: { type: "object" },
+      description: "Code text content"
     }
   },
   required: ["type"],
@@ -704,11 +831,18 @@ var hardBreak_schema_default = {
 var horizontalRule_schema_default = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   title: "horizontalRule",
+  description: "A horizontal rule/divider. Inherits common block attributes.",
   type: "object",
   properties: {
     type: { const: "horizontalRule" },
     attrs: {
       type: "object",
+      properties: {
+        align: { enum: ["left", "center", "right", "stretch", null], description: "Alignment" },
+        padding: { enum: ["none", "sm", "md", "lg", null], description: "Padding around rule" },
+        margin: { enum: ["none", "sm", "md", "lg", null], description: "Margin around rule" },
+        backgroundColor: { type: ["string", "null"], description: "Background color" }
+      },
       additionalProperties: true
     }
   },
@@ -743,19 +877,26 @@ var image_schema_default = {
 var heading_schema_default = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   title: "heading",
+  description: "A heading block (h1-h6). Inherits common block attributes.",
   type: "object",
   properties: {
     type: { const: "heading" },
     attrs: {
       type: "object",
       properties: {
-        level: {
-          type: "integer",
-          minimum: 1,
-          maximum: 6
-        }
+        level: { type: "integer", minimum: 1, maximum: 6, description: "Heading level (1-6)" },
+        align: { enum: ["left", "center", "right", null], description: "Text alignment" },
+        padding: { enum: ["none", "sm", "md", "lg", null], description: "Internal padding" },
+        margin: { enum: ["none", "sm", "md", "lg", null], description: "External margin" },
+        backgroundColor: { type: ["string", "null"], description: "Background color" },
+        borderRadius: { enum: ["none", "sm", "md", "lg", null], description: "Corner rounding" }
       },
       additionalProperties: true
+    },
+    content: {
+      type: "array",
+      items: { type: "object" },
+      description: "Inline content (text, marks)"
     }
   },
   required: ["type"],
@@ -766,12 +907,25 @@ var heading_schema_default = {
 var paragraph_schema_default = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   title: "paragraph",
+  description: "A paragraph block. Inherits common block attributes.",
   type: "object",
   properties: {
     type: { const: "paragraph" },
     attrs: {
       type: "object",
+      properties: {
+        align: { enum: ["left", "center", "right", null], description: "Text alignment" },
+        padding: { enum: ["none", "sm", "md", "lg", null], description: "Internal padding" },
+        margin: { enum: ["none", "sm", "md", "lg", null], description: "External margin" },
+        backgroundColor: { type: ["string", "null"], description: "Background color" },
+        borderRadius: { enum: ["none", "sm", "md", "lg", null], description: "Corner rounding" }
+      },
       additionalProperties: true
+    },
+    content: {
+      type: "array",
+      items: { type: "object" },
+      description: "Inline content (text, marks)"
     }
   },
   required: ["type"],
@@ -782,16 +936,21 @@ var paragraph_schema_default = {
 var youtube_schema_default = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
   title: "youtube",
+  description: "A YouTube video embed. Inherits common block attributes.",
   type: "object",
   properties: {
     type: { const: "youtube" },
     attrs: {
       type: "object",
       properties: {
-        src: { type: ["string", "null"] },
-        start: { type: "number" },
-        width: { type: "number" },
-        height: { type: "number" }
+        src: { type: ["string", "null"], description: "YouTube video URL or ID" },
+        start: { type: "number", description: "Start time in seconds" },
+        width: { type: "number", description: "Video width" },
+        height: { type: "number", description: "Video height" },
+        align: { enum: ["left", "center", "right", "stretch", null], description: "Block alignment" },
+        padding: { enum: ["none", "sm", "md", "lg", null], description: "Padding" },
+        margin: { enum: ["none", "sm", "md", "lg", null], description: "Margin" },
+        borderRadius: { enum: ["none", "sm", "md", "lg", null], description: "Corner rounding" }
       },
       additionalProperties: true
     }
@@ -803,7 +962,7 @@ var youtube_schema_default = {
 // src/bundles/v1/allSchemas.ts
 var allSchemas = `
 <Schemas>
-${Object.entries(v1_exports3).map(
+${Object.entries(v1_exports2).map(
   ([name, schema]) => `<${name}Schema>
 ` + JSON.stringify(schema, null, 2) + `
 </${name}Schema>`
@@ -818,8 +977,8 @@ ${[
   core,
   fullDocument,
   slide,
-  row,
   column,
+  columnGroup,
   style,
   sizing,
   imageBlock,
@@ -837,66 +996,9 @@ ${[
 </Context>
 `.trim();
 
-// src/recipes/v1/index.ts
-var v1_exports5 = {};
-__export(v1_exports5, {
-  addTwoColumns: () => addTwoColumns,
-  createSlide: () => createSlide,
-  editImageToCover: () => editImageToCover
-});
-
-// src/recipes/v1/createSlide.ts
-var createSlide = [
-  core,
-  fullDocument,
-  slide,
-  row,
-  column,
-  `
-Return a single JSON document that creates one 16x9 slide with a 1-1 row:
-{
-  "type": "doc",
-  "content": [
-    {
-      "type": "slide",
-      "attrs": { "size": "16x9" },
-      "content": [
-        { "type": "row", "attrs": { "layout": "1-1" }, "content": [
-          { "type": "column", "content": [{ "type": "paragraph", "content": [{ "type": "text", "text": "Left" }] }] },
-          { "type": "column", "content": [{ "type": "paragraph", "content": [{ "type": "text", "text": "Right" }] }] }
-        ] }
-      ]
-    }
-  ]
-}
-`.trim()
-].join("\n\n");
-
-// src/recipes/v1/addTwoColumns.ts
-var addTwoColumns = [
-  core,
-  fullDocument,
-  row,
-  column,
-  `
-Return a full document where the first slide contains a row with layout "1-1" and two columns with simple text paragraphs.
-`.trim()
-].join("\n\n");
-
-// src/recipes/v1/editImageToCover.ts
-var editImageToCover = [
-  core,
-  fullDocument,
-  imageBlock,
-  editingRules,
-  `
-Update an existing imageBlock on the first slide so it uses layout "cover" and align "center". Preserve all other attributes.
-`.trim()
-].join("\n\n");
-
 // src/templates/v1/index.ts
-var v1_exports6 = {};
-__export(v1_exports6, {
+var v1_exports4 = {};
+__export(v1_exports4, {
   blocks: () => blocks,
   buildPresetTemplate: () => buildPresetTemplate,
   createTemplate: () => createTemplate,
@@ -916,23 +1018,9 @@ var defaults = {
       className: (_c = attrs == null ? void 0 : attrs.className) != null ? _c : ""
     };
   },
-  row: (attrs) => {
-    var _a, _b;
-    return {
-      layout: (_a = attrs == null ? void 0 : attrs.layout) != null ? _a : "1",
-      className: (_b = attrs == null ? void 0 : attrs.className) != null ? _b : ""
-    };
-  },
-  column: (attrs) => {
-    var _a, _b;
-    return {
-      className: (_a = attrs == null ? void 0 : attrs.className) != null ? _a : "",
-      contentMode: (_b = attrs == null ? void 0 : attrs.contentMode) != null ? _b : "default",
-      verticalAlign: attrs == null ? void 0 : attrs.verticalAlign,
-      horizontalAlign: attrs == null ? void 0 : attrs.horizontalAlign,
-      padding: attrs == null ? void 0 : attrs.padding
-    };
-  }
+  column: (attrs) => ({
+    ...attrs
+  })
 };
 var textNode = (text) => ({
   type: "text",
@@ -985,27 +1073,34 @@ var blocks = {
   youtube: (attrs) => ({
     type: "youtube",
     attrs
+  }),
+  column: (content, attrs) => ({
+    type: "column",
+    attrs: attrs != null ? attrs : {},
+    content
+  }),
+  columnGroup: (columns, attrs) => ({
+    type: "columnGroup",
+    attrs: attrs != null ? attrs : {},
+    content: columns
   })
 };
 var slide2 = Object.assign(
-  (opts = {}) => ({
-    type: "slide",
-    attrs: defaults.slide(opts.slideAttrs),
-    content: [
-      {
-        type: "row",
-        attrs: defaults.row(opts.rowAttrs),
-        content: [
-          {
-            type: "column",
-            attrs: defaults.column(opts.columnAttrs),
-            content: []
-          }
-        ]
-      }
-    ]
-  }),
+  /**
+   * Create a slide with direct block content (no column wrapper).
+   */
+  (opts = {}) => {
+    var _a;
+    return {
+      type: "slide",
+      attrs: defaults.slide(opts.slideAttrs),
+      content: (_a = opts.content) != null ? _a : []
+    };
+  },
   {
+    /**
+     * Single column layout - wraps content in one column block.
+     */
     singleCol: (opts = {}) => {
       var _a;
       return {
@@ -1013,47 +1108,58 @@ var slide2 = Object.assign(
         attrs: defaults.slide(opts.slideAttrs),
         content: [
           {
-            type: "row",
-            attrs: defaults.row(opts.rowAttrs),
-            content: [
-              {
-                type: "column",
-                attrs: defaults.column(opts.columnAttrs),
-                content: (_a = opts.content) != null ? _a : []
-              }
-            ]
+            type: "column",
+            attrs: defaults.column(opts.columnAttrs),
+            content: (_a = opts.content) != null ? _a : []
           }
         ]
       };
     },
-    twoCol: (opts = {}) => {
-      var _a, _b, _c, _d;
-      return {
-        type: "slide",
-        attrs: defaults.slide(opts.slideAttrs),
-        content: [
-          {
-            type: "row",
-            attrs: defaults.row({
-              layout: (_b = (_a = opts.rowAttrs) == null ? void 0 : _a.layout) != null ? _b : "1-1",
-              ...opts.rowAttrs
-            }),
-            content: [
-              {
-                type: "column",
-                attrs: defaults.column(opts.leftColumnAttrs),
-                content: (_c = opts.left) != null ? _c : []
-              },
-              {
-                type: "column",
-                attrs: defaults.column(opts.rightColumnAttrs),
-                content: (_d = opts.right) != null ? _d : []
-              }
-            ]
-          }
-        ]
-      };
-    }
+    /**
+     * Two column layout - columns grouped side-by-side via columnGroup.
+     * Pass two column objects created with blocks.column().
+     */
+    twoCol: (col1, col2, slideAttrs) => ({
+      type: "slide",
+      attrs: defaults.slide(slideAttrs),
+      content: [
+        {
+          type: "columnGroup",
+          attrs: { fill: true },
+          content: [col1, col2]
+        }
+      ]
+    }),
+    /**
+     * Three column layout - columns grouped side-by-side via columnGroup.
+     * Pass three column objects created with blocks.column().
+     */
+    threeCol: (col1, col2, col3, slideAttrs) => ({
+      type: "slide",
+      attrs: defaults.slide(slideAttrs),
+      content: [
+        {
+          type: "columnGroup",
+          attrs: { fill: true },
+          content: [col1, col2, col3]
+        }
+      ]
+    }),
+    /**
+     * Four column layout - columns grouped side-by-side via columnGroup.
+     * Pass four column objects created with blocks.column().
+     */
+    fourCol: (col1, col2, col3, col4, slideAttrs) => ({
+      type: "slide",
+      attrs: defaults.slide(slideAttrs),
+      content: [
+        {
+          type: "columnGroup",
+          attrs: { fill: true },
+          content: [col1, col2, col3, col4]
+        }
+      ]
+    })
   }
 );
 var column2 = (attrs, content = []) => ({
@@ -1061,148 +1167,102 @@ var column2 = (attrs, content = []) => ({
   attrs: defaults.column(attrs),
   content
 });
-var row2 = (layout, content, attrs) => ({
-  type: "row",
-  attrs: defaults.row({ layout, ...attrs }),
-  content
-});
 var createTemplate = (input) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$;
   switch (input.preset) {
     case "slide.empty":
       return slide2({
         slideAttrs: input.slideAttrs,
-        rowAttrs: input.rowAttrs,
-        columnAttrs: input.columnAttrs
+        content: []
       });
     case "slide.singleCol":
       return slide2.singleCol({
         slideAttrs: input.slideAttrs,
-        rowAttrs: input.rowAttrs,
         columnAttrs: input.columnAttrs,
         content: (_a = input.content) != null ? _a : []
       });
     case "slide.twoCol":
-      return slide2.twoCol({
-        slideAttrs: input.slideAttrs,
-        rowAttrs: input.rowAttrs,
-        leftColumnAttrs: input.leftColumnAttrs,
-        rightColumnAttrs: input.rightColumnAttrs,
-        left: (_b = input.left) != null ? _b : [],
-        right: (_c = input.right) != null ? _c : []
-      });
+      return slide2.twoCol(
+        blocks.column((_b = input.left) != null ? _b : [], input.leftColumnAttrs),
+        blocks.column((_c = input.right) != null ? _c : [], input.rightColumnAttrs),
+        input.slideAttrs
+      );
     case "slide.hero": {
       const opts = (_d = input.heroOpts) != null ? _d : {};
       return {
         type: "slide",
-        attrs: defaults.slide({ className: "bg-slate-950 text-white", ...opts.slideAttrs }),
+        attrs: defaults.slide({ ...opts.slideAttrs, backgroundColor: (_f = (_e = opts.slideAttrs) == null ? void 0 : _e.backgroundColor) != null ? _f : "#020617" }),
         content: [
-          row2(
-            (_f = (_e = opts.rowAttrs) == null ? void 0 : _e.layout) != null ? _f : "1",
-            [
-              column2(
-                (_g = opts.columnAttrs) != null ? _g : { className: "max-w-4xl gap-6 p-12" },
-                (_h = opts.content) != null ? _h : [
-                  blocks.heading("Your headline", 1),
-                  blocks.paragraph("Subhead goes here."),
-                  blocks.paragraph("Add supporting details here.")
-                ]
-              )
-            ],
-            { className: "min-h-[720px] items-center justify-center p-12", ...opts.rowAttrs }
+          column2(
+            { justify: "center", align: "center", padding: "lg", fill: true, ...opts.columnAttrs },
+            (_g = opts.content) != null ? _g : [
+              blocks.heading("Your headline", 1),
+              blocks.paragraph("Subhead goes here."),
+              blocks.paragraph("Add supporting details here.")
+            ]
           )
         ]
       };
     }
     case "slide.imageCover": {
-      const opts = (_i = input.imageCoverOpts) != null ? _i : {};
-      const image2 = (_j = opts.image) != null ? _j : {
+      const opts = (_h = input.imageCoverOpts) != null ? _h : {};
+      const image2 = (_i = opts.image) != null ? _i : {
         src: "https://placehold.co/1600x900/png",
-        layout: "cover",
-        fullBleed: true,
-        align: "center"
+        size: "fill"
       };
-      const overlay = (_k = opts.overlay) != null ? _k : [blocks.heading("Overlay title", 1)];
+      const overlay = (_j = opts.overlay) != null ? _j : [blocks.heading("Overlay title", 1)];
       return {
         type: "slide",
-        attrs: defaults.slide({ className: "bg-black text-white", ...opts.slideAttrs }),
+        attrs: defaults.slide({ ...opts.slideAttrs, backgroundColor: (_l = (_k = opts.slideAttrs) == null ? void 0 : _k.backgroundColor) != null ? _l : "#000000" }),
         content: [
-          row2(
-            (_m = (_l = opts.rowAttrs) == null ? void 0 : _l.layout) != null ? _m : "1",
+          column2(
+            { fill: true, padding: "none", ...opts.columnAttrs },
             [
-              {
-                type: "column",
-                attrs: defaults.column({ className: "relative w-full h-full", ...opts.columnAttrs }),
-                content: [
-                  blocks.imageBlock(image2),
-                  ...overlay.map((node) => {
-                    var _a2, _b2;
-                    return {
-                      ...node,
-                      attrs: {
-                        ...node.attrs,
-                        className: `${(_b2 = (_a2 = node.attrs) == null ? void 0 : _a2.className) != null ? _b2 : ""} absolute bottom-12 left-12 drop-shadow-lg`.trim()
-                      }
-                    };
-                  })
-                ]
-              }
-            ],
-            { className: "min-h-[720px]", ...opts.rowAttrs }
+              blocks.imageBlock(image2),
+              ...overlay
+            ]
           )
         ]
       };
     }
     case "slide.quote": {
-      const opts = (_n = input.quoteOpts) != null ? _n : {};
+      const opts = (_m = input.quoteOpts) != null ? _m : {};
       return {
         type: "slide",
-        attrs: defaults.slide({ className: "bg-white text-slate-900", ...opts.slideAttrs }),
+        attrs: defaults.slide({ ...opts.slideAttrs, backgroundColor: (_o = (_n = opts.slideAttrs) == null ? void 0 : _n.backgroundColor) != null ? _o : "#ffffff" }),
         content: [
-          row2(
-            (_p = (_o = opts.rowAttrs) == null ? void 0 : _o.layout) != null ? _p : "1",
+          column2(
+            { justify: "center", align: "center", padding: "lg", gap: "md", fill: true, ...opts.columnAttrs },
             [
-              column2(
-                (_q = opts.columnAttrs) != null ? _q : { className: "max-w-3xl mx-auto gap-4 p-12" },
-                [
-                  blocks.blockquote(
-                    (_r = opts.quote) != null ? _r : [
-                      blocks.paragraph("\u201CAdd your quote here.\u201D"),
-                      blocks.paragraph("\u2014 Author")
-                    ]
-                  )
+              blocks.blockquote(
+                (_p = opts.quote) != null ? _p : [
+                  blocks.paragraph("Add your quote here."),
+                  blocks.paragraph("\u2014 Author")
                 ]
               )
-            ],
-            { className: "min-h-[640px] items-center justify-center", ...opts.rowAttrs }
+            ]
           )
         ]
       };
     }
     case "slide.agenda": {
-      const opts = (_s = input.agendaOpts) != null ? _s : {};
+      const opts = (_q = input.agendaOpts) != null ? _q : {};
       return {
         type: "slide",
-        attrs: defaults.slide({ className: "bg-white text-slate-900", ...opts.slideAttrs }),
+        attrs: defaults.slide({ ...opts.slideAttrs, backgroundColor: (_s = (_r = opts.slideAttrs) == null ? void 0 : _r.backgroundColor) != null ? _s : "#ffffff" }),
         content: [
-          row2(
-            (_u = (_t = opts.rowAttrs) == null ? void 0 : _t.layout) != null ? _u : "1",
+          column2(
+            { padding: "lg", gap: "lg", ...opts.columnAttrs },
             [
-              column2(
-                (_v = opts.columnAttrs) != null ? _v : { className: "p-12 gap-6" },
-                [
-                  blocks.heading("Agenda", 1),
-                  blocks.bulletList((_w = opts.items) != null ? _w : ["Topic 1", "Topic 2", "Topic 3"])
-                ]
-              )
-            ],
-            { className: "min-h-[640px]", ...opts.rowAttrs }
+              blocks.heading("Agenda", 1),
+              blocks.bulletList((_t = opts.items) != null ? _t : ["Topic 1", "Topic 2", "Topic 3"])
+            ]
           )
         ]
       };
     }
     case "slide.grid3": {
-      const opts = (_x = input.multiColOpts) != null ? _x : { columns: [] };
+      const opts = (_u = input.multiColOpts) != null ? _u : { columns: [] };
       const cols = opts.columns.length > 0 ? opts.columns : [
         { content: [blocks.heading("One", 3), blocks.paragraph("Details.")] },
         { content: [blocks.heading("Two", 3), blocks.paragraph("Details.")] },
@@ -1210,21 +1270,15 @@ var createTemplate = (input) => {
       ];
       return {
         type: "slide",
-        attrs: defaults.slide({ className: "bg-white text-slate-900", ...opts.slideAttrs }),
-        content: [
-          row2(
-            (_z = (_y = opts.rowAttrs) == null ? void 0 : _y.layout) != null ? _z : "1-1-1",
-            cols.map((c) => {
-              var _a2;
-              return column2(c.attrs, (_a2 = c.content) != null ? _a2 : []);
-            }),
-            { className: "p-8 gap-4", ...opts.rowAttrs }
-          )
-        ]
+        attrs: defaults.slide({ ...opts.slideAttrs, backgroundColor: (_w = (_v = opts.slideAttrs) == null ? void 0 : _v.backgroundColor) != null ? _w : "#ffffff" }),
+        content: cols.map((c) => {
+          var _a2;
+          return column2({ padding: "md", gap: "sm", fill: true, ...c.attrs }, (_a2 = c.content) != null ? _a2 : []);
+        })
       };
     }
     case "slide.grid4": {
-      const opts = (_A = input.multiColOpts) != null ? _A : { columns: [] };
+      const opts = (_x = input.multiColOpts) != null ? _x : { columns: [] };
       const cols = opts.columns.length > 0 ? opts.columns : [
         { content: [blocks.heading("One", 4)] },
         { content: [blocks.heading("Two", 4)] },
@@ -1233,55 +1287,37 @@ var createTemplate = (input) => {
       ];
       return {
         type: "slide",
-        attrs: defaults.slide({ className: "bg-white text-slate-900", ...opts.slideAttrs }),
-        content: [
-          row2(
-            (_C = (_B = opts.rowAttrs) == null ? void 0 : _B.layout) != null ? _C : "1-1-1-1",
-            cols.map((c) => {
-              var _a2;
-              return column2(c.attrs, (_a2 = c.content) != null ? _a2 : []);
-            }),
-            { className: "p-8 gap-4", ...opts.rowAttrs }
-          )
-        ]
+        attrs: defaults.slide({ ...opts.slideAttrs, backgroundColor: (_z = (_y = opts.slideAttrs) == null ? void 0 : _y.backgroundColor) != null ? _z : "#ffffff" }),
+        content: cols.map((c) => {
+          var _a2;
+          return column2({ padding: "md", gap: "sm", fill: true, ...c.attrs }, (_a2 = c.content) != null ? _a2 : []);
+        })
       };
     }
     case "slide.oneTwo": {
-      const opts = (_D = input.mediaTextOpts) != null ? _D : {};
+      const opts = (_A = input.mediaTextOpts) != null ? _A : {};
       return {
         type: "slide",
-        attrs: defaults.slide({ className: "bg-white text-slate-900", ...opts.slideAttrs }),
+        attrs: defaults.slide({ ...opts.slideAttrs, backgroundColor: (_C = (_B = opts.slideAttrs) == null ? void 0 : _B.backgroundColor) != null ? _C : "#ffffff" }),
         content: [
-          row2(
-            (_F = (_E = opts.rowAttrs) == null ? void 0 : _E.layout) != null ? _F : "1-2",
-            [
-              column2((_G = opts.textColumnAttrs) != null ? _G : { className: "p-8 gap-4" }, (_H = opts.text) != null ? _H : []),
-              column2((_I = opts.mediaColumnAttrs) != null ? _I : { className: "p-8 gap-4" }, (_J = opts.media) != null ? _J : [])
-            ],
-            { className: "min-h-[640px]", ...opts.rowAttrs }
-          )
+          column2({ padding: "md", gap: "sm", width: "33%", ...opts.textColumnAttrs }, (_D = opts.text) != null ? _D : []),
+          column2({ padding: "md", gap: "sm", fill: true, ...opts.mediaColumnAttrs }, (_E = opts.media) != null ? _E : [])
         ]
       };
     }
     case "slide.twoOne": {
-      const opts = (_K = input.mediaTextOpts) != null ? _K : {};
+      const opts = (_F = input.mediaTextOpts) != null ? _F : {};
       return {
         type: "slide",
-        attrs: defaults.slide({ className: "bg-white text-slate-900", ...opts.slideAttrs }),
+        attrs: defaults.slide({ ...opts.slideAttrs, backgroundColor: (_H = (_G = opts.slideAttrs) == null ? void 0 : _G.backgroundColor) != null ? _H : "#ffffff" }),
         content: [
-          row2(
-            (_M = (_L = opts.rowAttrs) == null ? void 0 : _L.layout) != null ? _M : "2-1",
-            [
-              column2((_N = opts.mediaColumnAttrs) != null ? _N : { className: "p-8 gap-4" }, (_O = opts.media) != null ? _O : []),
-              column2((_P = opts.textColumnAttrs) != null ? _P : { className: "p-8 gap-4" }, (_Q = opts.text) != null ? _Q : [])
-            ],
-            { className: "min-h-[640px]", ...opts.rowAttrs }
-          )
+          column2({ padding: "md", gap: "sm", fill: true, ...opts.mediaColumnAttrs }, (_I = opts.media) != null ? _I : []),
+          column2({ padding: "md", gap: "sm", width: "33%", ...opts.textColumnAttrs }, (_J = opts.text) != null ? _J : [])
         ]
       };
     }
     case "slide.oneTwoOne": {
-      const opts = (_R = input.multiColOpts) != null ? _R : { columns: [] };
+      const opts = (_K = input.multiColOpts) != null ? _K : { columns: [] };
       const cols = opts.columns.length > 0 ? opts.columns : [
         { content: [blocks.paragraph("Left")] },
         { content: [blocks.paragraph("Center")] },
@@ -1289,86 +1325,54 @@ var createTemplate = (input) => {
       ];
       return {
         type: "slide",
-        attrs: defaults.slide({ className: "bg-white text-slate-900", ...opts.slideAttrs }),
-        content: [
-          row2(
-            (_T = (_S = opts.rowAttrs) == null ? void 0 : _S.layout) != null ? _T : "1-2-1",
-            cols.map((c) => {
-              var _a2;
-              return column2(c.attrs, (_a2 = c.content) != null ? _a2 : []);
-            }),
-            { className: "p-8 gap-4", ...opts.rowAttrs }
-          )
-        ]
+        attrs: defaults.slide({ ...opts.slideAttrs, backgroundColor: (_M = (_L = opts.slideAttrs) == null ? void 0 : _L.backgroundColor) != null ? _M : "#ffffff" }),
+        content: cols.map((c, i) => {
+          var _a2;
+          return column2({ padding: "md", gap: "sm", width: i === 1 ? "50%" : "25%", ...c.attrs }, (_a2 = c.content) != null ? _a2 : []);
+        })
       };
     }
     case "slide.textMedia": {
-      const opts = (_U = input.mediaTextOpts) != null ? _U : {};
+      const opts = (_N = input.mediaTextOpts) != null ? _N : {};
       return {
         type: "slide",
-        attrs: defaults.slide({ className: "bg-white text-slate-900", ...opts.slideAttrs }),
+        attrs: defaults.slide({ ...opts.slideAttrs, backgroundColor: (_P = (_O = opts.slideAttrs) == null ? void 0 : _O.backgroundColor) != null ? _P : "#ffffff" }),
         content: [
-          row2(
-            (_W = (_V = opts.rowAttrs) == null ? void 0 : _V.layout) != null ? _W : "1-1",
-            [
-              column2((_X = opts.textColumnAttrs) != null ? _X : { className: "p-10 gap-4" }, (_Y = opts.text) != null ? _Y : []),
-              column2((_Z = opts.mediaColumnAttrs) != null ? _Z : { className: "p-10 gap-4 bg-slate-50" }, (__ = opts.media) != null ? __ : [])
-            ],
-            { className: "min-h-[640px]", ...opts.rowAttrs }
-          )
+          column2({ padding: "lg", gap: "sm", fill: true, ...opts.textColumnAttrs }, (_Q = opts.text) != null ? _Q : []),
+          column2({ padding: "lg", gap: "sm", fill: true, backgroundColor: "#f8fafc", ...opts.mediaColumnAttrs }, (_R = opts.media) != null ? _R : [])
         ]
       };
     }
     case "slide.mediaText": {
-      const opts = (_$ = input.mediaTextOpts) != null ? _$ : {};
+      const opts = (_S = input.mediaTextOpts) != null ? _S : {};
       return {
         type: "slide",
-        attrs: defaults.slide({ className: "bg-white text-slate-900", ...opts.slideAttrs }),
+        attrs: defaults.slide({ ...opts.slideAttrs, backgroundColor: (_U = (_T = opts.slideAttrs) == null ? void 0 : _T.backgroundColor) != null ? _U : "#ffffff" }),
         content: [
-          row2(
-            (_ba = (_aa = opts.rowAttrs) == null ? void 0 : _aa.layout) != null ? _ba : "1-1",
-            [
-              column2((_ca = opts.mediaColumnAttrs) != null ? _ca : { className: "p-10 gap-4 bg-slate-50" }, (_da = opts.media) != null ? _da : []),
-              column2((_ea = opts.textColumnAttrs) != null ? _ea : { className: "p-10 gap-4" }, (_fa = opts.text) != null ? _fa : [])
-            ],
-            { className: "min-h-[640px]", ...opts.rowAttrs }
-          )
+          column2({ padding: "lg", gap: "sm", fill: true, backgroundColor: "#f8fafc", ...opts.mediaColumnAttrs }, (_V = opts.media) != null ? _V : []),
+          column2({ padding: "lg", gap: "sm", fill: true, ...opts.textColumnAttrs }, (_W = opts.text) != null ? _W : [])
         ]
       };
     }
     case "slide.stack2": {
-      const opts = (_ga = input.stack2Opts) != null ? _ga : {};
-      const top = (_ha = opts.topRow) != null ? _ha : {
-        rowAttrs: { layout: "1" },
-        columns: [{ content: [blocks.heading("Title", 1), blocks.paragraph("Subhead")] }]
-      };
-      const bottom = (_ia = opts.bottomRow) != null ? _ia : {
-        rowAttrs: { layout: "1-1" },
-        columns: [
-          { content: [blocks.paragraph("Left detail")] },
-          { content: [blocks.paragraph("Right detail")] }
-        ]
-      };
+      const opts = (_X = input.stack2Opts) != null ? _X : {};
+      const top = (_Y = opts.topColumns) != null ? _Y : [{ content: [blocks.heading("Title", 1), blocks.paragraph("Subhead")] }];
+      const bottom = (_Z = opts.bottomColumns) != null ? _Z : [
+        { content: [blocks.paragraph("Left detail")] },
+        { content: [blocks.paragraph("Right detail")] }
+      ];
       return {
         type: "slide",
-        attrs: defaults.slide({ className: "bg-white text-slate-900", ...opts.slideAttrs }),
+        attrs: defaults.slide({ ...opts.slideAttrs, backgroundColor: (_$ = (__ = opts.slideAttrs) == null ? void 0 : __.backgroundColor) != null ? _$ : "#ffffff" }),
         content: [
-          row2(
-            (_ka = (_ja = top.rowAttrs) == null ? void 0 : _ja.layout) != null ? _ka : "1",
-            top.columns.map((c) => {
-              var _a2;
-              return column2(c.attrs, (_a2 = c.content) != null ? _a2 : []);
-            }),
-            { className: "p-8 gap-4", ...top.rowAttrs }
-          ),
-          row2(
-            (_ma = (_la = bottom.rowAttrs) == null ? void 0 : _la.layout) != null ? _ma : "1-1",
-            bottom.columns.map((c) => {
-              var _a2;
-              return column2(c.attrs, (_a2 = c.content) != null ? _a2 : []);
-            }),
-            { className: "p-8 gap-4", ...bottom.rowAttrs }
-          )
+          ...top.map((c) => {
+            var _a2;
+            return column2({ padding: "md", gap: "sm", ...c.attrs }, (_a2 = c.content) != null ? _a2 : []);
+          }),
+          ...bottom.map((c) => {
+            var _a2;
+            return column2({ padding: "md", gap: "sm", ...c.attrs }, (_a2 = c.content) != null ? _a2 : []);
+          })
         ]
       };
     }
@@ -1396,40 +1400,65 @@ var listTemplates = () => [
 var templatesV1Context = `
 BlockSlides templates API (v1)
 
+Document Hierarchy:
+doc \u2192 slide+ \u2192 block+
+Slides contain blocks directly - no mandatory row wrapper.
+Adjacent columns automatically form horizontal layouts via CSS.
+
 Presets:
-- slide.empty(): slide with one empty column.
-- slide.singleCol({ content?, slideAttrs?, rowAttrs?, columnAttrs? })
-- slide.twoCol({ left?, right?, slideAttrs?, rowAttrs?, leftColumnAttrs?, rightColumnAttrs? })
-- slide.hero({ content?, slideAttrs?, rowAttrs?, columnAttrs? })
-- slide.imageCover({ image?, overlay?, slideAttrs?, rowAttrs?, columnAttrs? })
-- slide.quote({ quote?, slideAttrs?, rowAttrs?, columnAttrs? })
-- slide.agenda({ items?, slideAttrs?, rowAttrs?, columnAttrs? })
-- slide.grid3/grid4({ columns?, slideAttrs?, rowAttrs? })
-- slide.oneTwo/twoOne/oneTwoOne({ columns?, slideAttrs?, rowAttrs? })
-- slide.textMedia/mediaText({ text?, media?, slideAttrs?, rowAttrs? })
-- slide.stack2({ topRow?, bottomRow?, slideAttrs? })
-
-Blocks:
+- slide({ content?, slideAttrs? }): slide with direct block content
+- slide.singleCol({ content?, slideAttrs?, columnAttrs? }): single column layout
+- slide.twoCol(column1, column2, slideAttrs?): two columns side by side
+- slide.threeCol(col1, col2, col3, slideAttrs?): three columns side by side
+- slide.fourCol(col1, col2, col3, col4, slideAttrs?): four columns side by side
+- slide.hero({ heroOpts }): centered content on dark background
+- slide.imageCover({ imageCoverOpts }): full-bleed image with overlay
+- slide.quote({ quoteOpts }): centered blockquote
+- slide.agenda({ agendaOpts }): title with bullet list
+- slide.grid3/grid4({ multiColOpts }): equal-width column grids
+- slide.oneTwo/twoOne({ mediaTextOpts }): asymmetric layouts
+- slide.textMedia/mediaText({ mediaTextOpts }): text and media columns
+- slide.stack2({ stack2Opts }): stacked column sections
+
+Base Block Attributes (available on ALL blocks):
+- align: "left" | "center" | "right" | "stretch" - horizontal alignment
+- justify: "start" | "center" | "end" | "space-between" - vertical distribution
+- padding: "none" | "sm" | "md" | "lg" - internal spacing (8px/16px/32px)
+- margin: "none" | "sm" | "md" | "lg" - external spacing
+- gap: "none" | "sm" | "md" | "lg" - space between children
+- backgroundColor: CSS color
+- backgroundImage: URL
+- borderRadius: "none" | "sm" | "md" | "lg" (4px/8px/16px)
+- border: CSS border
+- fill: boolean - fill available space
+- width: CSS width
+- height: CSS height
+
+Block Helpers:
 - blocks.text(text, marks?)
-- blocks.heading(text, level?)
+- blocks.heading(text, level?) - level 1-6
 - blocks.paragraph(text?)
 - blocks.bulletList([string | Block][])
 - blocks.codeBlock(code, language?)
 - blocks.horizontalRule()
 - blocks.hardBreak()
-- blocks.imageBlock({ src, alt?, layout?, fullBleed?, align?, ...ImageBlockAttrs })
+- blocks.imageBlock({ src, size?, crop?, alt?, caption?, credit? })
+  - size: "fill" | "fit" | "natural" - how image fills container
+  - crop: "center" | "top" | "bottom" | "left" | "right" | corner positions
 - blocks.blockquote(content?)
 - blocks.listItem(content?)
-- blocks.image({ src, alt?, title?, width?, height? })
 - blocks.youtube({ src?, start?, width?, height? })
 
 Agent/tool usage:
-- Call createTemplate({ preset: "slide.twoCol", left: [blocks.paragraph("Left")], right: [blocks.imageBlock({ src })] })
-- Wrap returned slides in { type: "doc", content: [/* slides here */] } before sending to the editor.
+- Use blocks.column(content, attrs) to create columns
+- Use blocks.columnGroup(columns) to group columns horizontally
+- Call createTemplate({ preset: "slide.twoCol", left: [...], right: [...] })
+- Wrap returned slides in { type: "doc", content: [/* slides here */] }
 
 Notes:
-- Size defaults to 16x9; override via slideAttrs.size.
-- Layout defaults: singleCol uses "1"; twoCol uses "1-1" unless rowAttrs.layout overrides.
+- Size defaults to 16x9; override via slideAttrs.size
+- Use fill: true on columns to distribute space evenly
+- Use semantic spacing tokens (sm/md/lg) instead of raw pixel values
 `.trim();
 
 // src/templates/v1/presetTemplateBuilder.ts
@@ -1440,11 +1469,13 @@ var titleAndSubheader = {
   description: "Centered title and subtitle for a new presentation",
   icon: titleAndSubheaderIcon,
   build: () => slide2.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),
@@ -1474,94 +1505,93 @@ var imageAndText = {
   label: "Image & Text",
   description: "Image on left, text on right",
   icon: imageTextIcon,
-  build: () => slide2.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.")
-    ]
-  })
+  build: () => slide2.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
+      }
+    )
+  )
 };
 var textAndImage = {
   key: "tpl.textAndImage",
   label: "Text & Image",
   description: "Text on left, image on right",
   icon: textImageIcon,
-  build: () => slide2.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
-      })
-    ]
-  })
+  build: () => slide2.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
+      }
+    )
+  )
 };
 var twoColumns = {
   key: "tpl.twoColumns",
   label: "Two Columns",
   description: "Header above two balanced text columns",
   icon: twoColumnsIcon,
-  build: () => slide2.singleCol({
-    columnAttrs: { className: "w-full p-6 gap-4", horizontalAlign: "stretch" },
+  build: () => ({
+    type: "slide",
+    attrs: { id: "slide-1", size: "16x9" },
     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.")
-            ]
-          }
-        ]
-      }
+      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 }
+        )
+      ])
     ]
   })
 };
@@ -1570,34 +1600,29 @@ var twoColumnsWithHeader = {
   label: "Two Columns + Header",
   description: "Header plus two columns, each with its own heading",
   icon: twoColumnsHeaderIcon,
-  build: () => slide2.singleCol({
-    columnAttrs: { className: "w-full p-6 gap-4", horizontalAlign: "stretch" },
+  build: () => ({
+    type: "slide",
+    attrs: { id: "slide-1", size: "16x9" },
     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.")
-            ]
-          }
-        ]
-      }
+      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 }
+        )
+      ])
     ]
   })
 };
@@ -1606,39 +1631,33 @@ var threeColumns = {
   label: "Three Columns",
   description: "Balanced three-column text",
   icon: threeColumnsIcon,
-  build: () => slide2.singleCol({
-    columnAttrs: { className: "w-full p-6 gap-4", horizontalAlign: "stretch" },
+  build: () => ({
+    type: "slide",
+    attrs: { id: "slide-1", size: "16x9" },
     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.")
-            ]
-          }
-        ]
-      }
+      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 }
+        )
+      ])
     ]
   })
 };
@@ -1647,43 +1666,37 @@ var threeColumnsWithHeader = {
   label: "Three Columns + Header",
   description: "Header plus three columns",
   icon: threeColumnsHeaderIcon,
-  build: () => slide2.singleCol({
-    columnAttrs: { className: "w-full p-6 gap-4", horizontalAlign: "stretch" },
+  build: () => ({
+    type: "slide",
+    attrs: { id: "slide-1", size: "16x9" },
     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.")
-            ]
-          }
-        ]
-      }
+      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 }
+        )
+      ])
     ]
   })
 };
@@ -1692,52 +1705,45 @@ var fourColumnsWithHeader = {
   label: "Four Columns + Header",
   description: "Header plus four columns",
   icon: fourColumnsHeaderIcon,
-  build: () => slide2.singleCol({
-    columnAttrs: { className: "w-full p-6 gap-4", horizontalAlign: "stretch" },
+  build: () => ({
+    type: "slide",
+    attrs: { id: "slide-1", size: "16x9" },
     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.")
-            ]
-          }
-        ]
-      }
+      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 }
+        )
+      ])
     ]
   })
 };
@@ -1747,14 +1753,12 @@ var fullImage = {
   description: "Edge-to-edge image filling the slide",
   icon: fullImageIcon,
   build: () => slide2.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"
       })
     ]
   })
@@ -1764,21 +1768,21 @@ var fourColumns = {
   label: "Four Columns",
   description: "Balanced four-column text",
   icon: fourColumnsIcon,
-  build: () => slide2.singleCol({
-    columnAttrs: { className: "w-full p-4 gap-4", horizontalAlign: "stretch" },
+  build: () => ({
+    type: "slide",
+    attrs: { id: "slide-1", size: "16x9" },
     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: [
-            blocks.paragraph("Lorem ipsum dolor sit amet."),
-            blocks.paragraph("Consectetur adipiscing elit.")
-          ]
-        }))
-      }
+      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 }
+          )
+        )
+      )
     ]
   })
 };
@@ -1788,7 +1792,7 @@ var titleWithBullets = {
   description: "Header and a bullet list",
   icon: titleBulletsIcon,
   build: () => slide2.singleCol({
-    columnAttrs: { className: "p-6 gap-4" },
+    columnAttrs: { padding: "md", gap: "md" },
     content: [
       blocks.heading("Lorem ipsum dolor sit amet", 2),
       blocks.bulletList([
@@ -1804,86 +1808,95 @@ var titleBulletsAndImage = {
   label: "Title, Bullets & Image",
   description: "Title with bullets and an image",
   icon: titleBulletsImageIcon,
-  build: () => slide2.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
-      })
-    ]
-  })
+  build: () => slide2.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
+      }
+    )
+  )
 };
 var accentLeft = {
   key: "tpl.accentLeft",
   label: "Accent left",
   description: "Accent band with image on the left, text on the right",
   icon: accentLeftIcon,
-  build: () => slide2.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.")
-    ]
-  })
+  build: () => slide2.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" }
+    )
+  )
 };
 var accentRight = {
   key: "tpl.accentRight",
   label: "Accent right",
   description: "Accent band with image on the right, text on the left",
   icon: accentRightIcon,
-  build: () => slide2.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"
-      })
-    ]
-  })
+  build: () => slide2.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"
+      }
+    )
+  )
 };
 var accentTop = {
   key: "tpl.accentTop",
@@ -1892,39 +1905,26 @@ var accentTop = {
   icon: accentTopIcon,
   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.")
         ]
       }
     ]
@@ -1935,112 +1935,105 @@ var accentRightFit = {
   label: "Accent right (fit)",
   description: "Text with a tighter image card on the right",
   icon: accentRightFitIcon,
-  build: () => slide2.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: [
+  build: () => slide2.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"
       }
-    ]
-  })
+    )
+  )
 };
 var accentLeftFit = {
   key: "tpl.accentLeftFit",
   label: "Accent left (fit)",
   description: "Compact image card on the left, text on the right",
   icon: accentLeftFitIcon,
-  build: () => slide2.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: [
+  build: () => slide2.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"
-          })
-        ]
+        padding: "md",
+        fill: true,
+        justify: "center",
+        align: "center"
       }
-    ],
-    right: [
-      blocks.heading("Accent left (fit)", 3),
-      blocks.paragraph("Short supporting copy goes here."),
-      blocks.paragraph("Add one more line if needed.")
-    ]
-  })
+    ),
+    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" }
+    )
+  )
 };
 var twoImageColumns = {
   key: "tpl.twoImageColumns",
   label: "2 image columns",
   description: "Header with two image cards",
   icon: twoImageColumnsIcon,
-  build: () => slide2.singleCol({
-    columnAttrs: { className: "w-full p-6 gap-4", horizontalAlign: "stretch" },
+  build: () => ({
+    type: "slide",
+    attrs: { id: "slide-1", size: "16x9" },
     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.")
-            ]
-          }
-        ]
-      }
+      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 }
+        )
+      ])
     ]
   })
 };
@@ -2067,11 +2060,9 @@ var registry = {
 var listPresetTemplates = () => Object.values(registry);
 var buildPresetTemplate = (key) => registry[key].build();
 export {
-  v1_exports4 as bundlesV1,
+  v1_exports3 as bundlesV1,
   v1_exports as contextsV1,
-  v1_exports2 as examplesV1,
-  v1_exports5 as recipesV1,
-  v1_exports3 as schemasV1,
-  v1_exports6 as templatesV1
+  v1_exports2 as schemasV1,
+  v1_exports4 as templatesV1
 };
 //# sourceMappingURL=index.js.map