@blockslides/ai-context 0.1.3 → 0.1.5

package/dist/index.d.cts

@@ -75,20 +75,14 @@ declare const all: string;
 /**
  * Human- and AI-readable bundle of all v1 JSON Schemas.
  *
- * This is intended for:
- * - LLMs that want to see the exact JSON Schema contracts
- * - Tools that want a single text blob containing every schema
- *
- * Each schema is pretty-printed and prefixed with its key name.
+ * Wrapped in a top-level <Schemas>…</Schemas> tag, with each schema
+ * enclosed in its own <{name}Schema>…</{name}Schema> block.
  */
 declare const allSchemas: string;
 
 /**
- * All v1 context atoms concatenated into a single string.
- *
- * Intended for:
- * - LLMs that should know about every supported node type and layout primitive
- * - Power users who want a “maximal” context (structure + nodes + editing rules + sizing)
+ * All v1 context atoms concatenated into a single string,
+ * wrapped in a top-level <Context>…</Context> block.
  */
 declare const allContexts: string;
 
@@ -245,6 +239,39 @@ var properties$b = {
 					"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"
+				]
 			}
 		},
 		additionalProperties: true
@@ -307,6 +334,39 @@ var properties$a = {
 					"none",
 					null
 				]
+			},
+			backgroundMode: {
+				"enum": [
+					"none",
+					"color",
+					"image",
+					"imageOverlay",
+					null
+				]
+			},
+			backgroundColor: {
+				type: [
+					"string",
+					"null"
+				]
+			},
+			backgroundImage: {
+				type: [
+					"string",
+					"null"
+				]
+			},
+			backgroundOverlayColor: {
+				type: [
+					"string",
+					"null"
+				]
+			},
+			backgroundOverlayOpacity: {
+				type: [
+					"number",
+					"null"
+				]
 			}
 		},
 		additionalProperties: true
@@ -358,6 +418,39 @@ var properties$9 = {
 					"linkedin-banner",
 					null
 				]
+			},
+			backgroundMode: {
+				"enum": [
+					"none",
+					"color",
+					"image",
+					"imageOverlay",
+					null
+				]
+			},
+			backgroundColor: {
+				type: [
+					"string",
+					"null"
+				]
+			},
+			backgroundImage: {
+				type: [
+					"string",
+					"null"
+				]
+			},
+			backgroundOverlayColor: {
+				type: [
+					"string",
+					"null"
+				]
+			},
+			backgroundOverlayOpacity: {
+				type: [
+					"number",
+					"null"
+				]
 			}
 		},
 		additionalProperties: true

package/dist/index.d.ts

@@ -75,20 +75,14 @@ declare const all: string;
 /**
  * Human- and AI-readable bundle of all v1 JSON Schemas.
  *
- * This is intended for:
- * - LLMs that want to see the exact JSON Schema contracts
- * - Tools that want a single text blob containing every schema
- *
- * Each schema is pretty-printed and prefixed with its key name.
+ * Wrapped in a top-level <Schemas>…</Schemas> tag, with each schema
+ * enclosed in its own <{name}Schema>…</{name}Schema> block.
  */
 declare const allSchemas: string;
 
 /**
- * All v1 context atoms concatenated into a single string.
- *
- * Intended for:
- * - LLMs that should know about every supported node type and layout primitive
- * - Power users who want a “maximal” context (structure + nodes + editing rules + sizing)
+ * All v1 context atoms concatenated into a single string,
+ * wrapped in a top-level <Context>…</Context> block.
  */
 declare const allContexts: string;
 
@@ -245,6 +239,39 @@ var properties$b = {
 					"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"
+				]
 			}
 		},
 		additionalProperties: true
@@ -307,6 +334,39 @@ var properties$a = {
 					"none",
 					null
 				]
+			},
+			backgroundMode: {
+				"enum": [
+					"none",
+					"color",
+					"image",
+					"imageOverlay",
+					null
+				]
+			},
+			backgroundColor: {
+				type: [
+					"string",
+					"null"
+				]
+			},
+			backgroundImage: {
+				type: [
+					"string",
+					"null"
+				]
+			},
+			backgroundOverlayColor: {
+				type: [
+					"string",
+					"null"
+				]
+			},
+			backgroundOverlayOpacity: {
+				type: [
+					"number",
+					"null"
+				]
 			}
 		},
 		additionalProperties: true
@@ -358,6 +418,39 @@ var properties$9 = {
 					"linkedin-banner",
 					null
 				]
+			},
+			backgroundMode: {
+				"enum": [
+					"none",
+					"color",
+					"image",
+					"imageOverlay",
+					null
+				]
+			},
+			backgroundColor: {
+				type: [
+					"string",
+					"null"
+				]
+			},
+			backgroundImage: {
+				type: [
+					"string",
+					"null"
+				]
+			},
+			backgroundOverlayColor: {
+				type: [
+					"string",
+					"null"
+				]
+			},
+			backgroundOverlayOpacity: {
+				type: [
+					"number",
+					"null"
+				]
 			}
 		},
 		additionalProperties: true

package/dist/index.js

@@ -29,6 +29,7 @@ __export(v1_exports, {
 
 // src/contexts/v1/core.ts
 var core = `
+<core>
 You are given a BlockSlides document to CREATE or EDIT.
 
 Document shape:
@@ -42,6 +43,7 @@ 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.
+</core>
 `.trim();
 
 // src/contexts/v1/output.fullDocument.ts
@@ -54,6 +56,7 @@ Output contract:
 
 // src/contexts/v1/imageBlock.ts
 var imageBlock = `
+<imageBlock>
 Node: imageBlock
 Attrs:
 - src (required): string (URL)
@@ -77,14 +80,21 @@ Behavior:
   - 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();
 
 // 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:
@@ -94,10 +104,13 @@ Semantics:
   - 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>
 `.trim();
 
 // src/contexts/v1/column.ts
 var column = `
+<column>
 Node: column
 Attrs:
 - className (optional): string
@@ -105,19 +118,31 @@ Attrs:
 - 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)
 
 Notes:
 - Use className for spacing, colors, typography (e.g., Tailwind).
 - Keep nesting shallow; columns can contain rows or blocks as needed.
+</column>
 `.trim();
 
 // src/contexts/v1/slide.ts
 var slide = `
+<slide>
 Node: slide
 Attrs:
 - id (optional): string (stable identifier; preserve if present)
 - className (optional): string (styling)
 - size (optional): "16x9" | "4x3" | "a4-portrait" | "a4-landscape" | "letter-portrait" | "letter-landscape" | "linkedin-banner"
+- backgroundMode (optional): "none" | "color" | "image" | "imageOverlay"
+- backgroundColor (optional): string (CSS color for solid backgrounds)
+- backgroundImage (optional): string (URL for slide-level background image)
+- backgroundOverlayColor (optional): string (color for the overlay when using imageOverlay)
+- backgroundOverlayOpacity (optional): number (0\u20131, opacity for the overlay)
 
 Content:
 - slide contains one or more rows.
@@ -125,35 +150,84 @@ Content:
 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.
+</slide>
 `.trim();
 
 // src/contexts/v1/style.ts
 var style = `
+<style>
 Styling
 - Prefer using attrs.className for styling (e.g., Tailwind classes).
 - Use enums for canonical behaviors (e.g., imageBlock.layout).
 - When enums are insufficient (spacing, backgrounds), use className.
+</style>
 `.trim();
 
 // src/contexts/v1/editingRules.ts
 var editingRules = `
-Editing rules
+<General editing rules>
 - 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 attrs. If styling is needed, prefer className.
+- Avoid introducing new attributes that are not documented. If styling is needed, prefer className.
 - Keep the document valid: slide > row > column > blocks.
+</General editing rules>
+
+<Centering content in a column>
+- Columns are flex containers. Use their alignment attrs instead of per-block hacks.
+- To center all content vertically and horizontally inside a column:
+  - Set column.attrs.verticalAlign = "center".
+  - Set column.attrs.horizontalAlign = "center".
+- This will apply to headings, paragraphs, imageBlocks, and other blocks inside that column.
+- Example:
+  - Before: column.attrs = { verticalAlign: "top", horizontalAlign: "left", padding: "none" }
+  - After:  column.attrs = { verticalAlign: "center", horizontalAlign: "center", padding: "none" }
+</Centering content in a column>
+
+<Backgrounds (slides, rows, columns)>
+- Prefer structured background attrs over raw Tailwind bg-[url(...)] when setting background images.
+- 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 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)>
+
+<Text editing (headings and paragraphs)>
+- Preserve semantic types: do not turn headings into paragraphs or vice versa unless explicitly asked.
+- To change heading level, update heading.attrs.level (1\u20136) without changing its id.
+- To change the text, edit the text nodes inside content, keeping marks and structure when possible.
+- For alignment of text itself, prefer using the textAlign extension (textAlign: "left" | "center" | "right" | "justify") if configured.
+- Do not introduce inline HTML; represent formatting via marks (bold, italic, underline, etc.).
+</Text editing (headings and paragraphs)>
+
+<Image blocks>
+- Use imageBlock for rich images; preserve src, assetId, and metadata unless the user explicitly asks to change them.
+- To change the alignment of an imageBlock within its column, set imageBlock.attrs.align to "left", "center", "right", or "stretch".
+- To change how the image is fit, adjust imageBlock.attrs.layout (for example: "cover", "contain", "fill", "focus", or a configured layout key).
+- When centering both text and image in a column, combine:
+  - column verticalAlign/horizontalAlign for layout, and
+  - imageBlock align for how the image itself sits in the column.
+- Do not invent new layout or align values that are not documented in the schema.
+</Image blocks>
+
 `.trim();
 
 // src/contexts/v1/sizing.ts
 var sizing = `
+<sizing>
 Sizing
 - Slides and flyers share the same JSON. Flyers are slides sized via slide.attrs.size and theme rules.
 - Allowed sizes: "16x9" | "4x3" | "a4-portrait" | "a4-landscape" | "letter-portrait" | "letter-landscape" | "linkedin-banner".
 - Editors may render with fixed canvases or dynamic mode. The default is fixed; dynamic stretches to container with preserved aspect.
+</sizing>
 `.trim();
 
 // src/contexts/v1/blockquote.ts
 var blockquote = `
+<blockquote>
 Node: blockquote
 Attrs:
 - HTML-only; no required JSON attrs beyond optional styling such as className.
@@ -164,10 +238,12 @@ Content:
 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.
+</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.
@@ -179,10 +255,12 @@ 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.
+</bulletList>
 `.trim();
 
 // src/contexts/v1/codeBlock.ts
 var codeBlock = `
+<codeBlock>
 Node: codeBlock
 Attrs:
 - language (optional): string | null (e.g., "js", "ts", "python").
@@ -194,10 +272,12 @@ Semantics:
 - Renders as <pre><code>\u2026</code></pre>.
 - language controls a CSS class (e.g., "language-js") for syntax highlighting.
 - Use when the user explicitly wants a fenced code block, not inline code in a paragraph.
+</codeBlock>
 `.trim();
 
 // src/contexts/v1/hardBreak.ts
 var hardBreak = `
+<hardBreak>
 Node: hardBreak
 Attrs:
 - None (HTML-only); behaves like a manual line break.
@@ -208,10 +288,12 @@ Content:
 Semantics:
 - Renders as <br> and as a newline in plain text exports.
 - Use when the user requests a line break without starting a new paragraph.
+</hardBreak>
 `.trim();
 
 // src/contexts/v1/horizontalRule.ts
 var horizontalRule = `
+<horizontalRule>
 Node: horizontalRule
 Attrs:
 - HTML-only; no JSON attrs beyond optional styling via surrounding layout.
@@ -222,10 +304,12 @@ Content:
 Semantics:
 - Renders as <hr>.
 - Use to visually separate sections within a slide (for example, between rows of text).
+</horizontalRule>
 `.trim();
 
 // src/contexts/v1/image.ts
 var image = `
+<image>
 Node: image
 Attrs:
 - src (required): string (URL to the image).
@@ -239,10 +323,12 @@ Content:
 Semantics:
 - Renders as a simple <img>, unlike imageBlock which adds rich framing/caption UI.
 - Prefer imageBlock for designed layouts; use image for simple inline images in paragraphs.
+</image>
 `.trim();
 
 // src/contexts/v1/heading.ts
 var heading = `
+<heading>
 Node: heading
 Attrs:
 - level (required): 1 | 2 | 3 | 4 | 5 | 6.
@@ -254,10 +340,12 @@ 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.
@@ -268,10 +356,12 @@ Content:
 Semantics:
 - Default text block inside columns and rows.
 - Multiple paragraphs can be stacked within the same column to create vertical rhythm.
+</paragraph>
 `.trim();
 
 // src/contexts/v1/youtube.ts
 var youtube = `
+<youtube>
 Node: youtube
 Attrs:
 - src (required): string (public YouTube URL).
@@ -286,6 +376,7 @@ 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.
 - Do not embed raw <iframe> HTML directly; always use the youtube node with attrs.
+</youtube>
 `.trim();
 
 // src/examples/v1/index.ts
@@ -456,7 +547,14 @@ var row_schema_default = {
         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"] }
+        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"] }
       },
       additionalProperties: true
     }
@@ -479,7 +577,14 @@ var column_schema_default = {
         contentMode: { enum: ["default", null] },
         verticalAlign: { enum: ["top", "center", "bottom", null] },
         horizontalAlign: { enum: ["left", "center", "right", "stretch", null] },
-        padding: { enum: ["none", null] }
+        padding: { enum: ["none", null] },
+        backgroundMode: {
+          enum: ["none", "color", "image", "imageOverlay", null]
+        },
+        backgroundColor: { type: ["string", "null"] },
+        backgroundImage: { type: ["string", "null"] },
+        backgroundOverlayColor: { type: ["string", "null"] },
+        backgroundOverlayOpacity: { type: ["number", "null"] }
       },
       additionalProperties: true
     }
@@ -511,7 +616,14 @@ var slide_schema_default = {
             "linkedin-banner",
             null
           ]
-        }
+        },
+        backgroundMode: {
+          enum: ["none", "color", "image", "imageOverlay", null]
+        },
+        backgroundColor: { type: ["string", "null"] },
+        backgroundImage: { type: ["string", "null"] },
+        backgroundOverlayColor: { type: ["string", "null"] },
+        backgroundOverlayOpacity: { type: ["number", "null"] }
       },
       additionalProperties: true
     }
@@ -688,13 +800,20 @@ var youtube_schema_default = {
 };
 
 // src/bundles/v1/allSchemas.ts
-var allSchemas = Object.entries(v1_exports3).map(
-  ([name, schema]) => `Schema "${name}":
-` + JSON.stringify(schema, null, 2)
-).join("\n\n");
+var allSchemas = `
+<Schemas>
+${Object.entries(v1_exports3).map(
+  ([name, schema]) => `<${name}Schema>
+` + JSON.stringify(schema, null, 2) + `
+</${name}Schema>`
+).join("\n\n")}
+</Schemas>
+`.trim();
 
 // src/bundles/v1/allContexts.ts
-var allContexts = [
+var allContexts = `
+<Context>
+${[
   core,
   fullDocument,
   slide,
@@ -713,7 +832,9 @@ var allContexts = [
   horizontalRule,
   youtube,
   editingRules
-].join("\n\n");
+].join("\n\n")}
+</Context>
+`.trim();
 
 // src/recipes/v1/index.ts
 var v1_exports5 = {};