@blockslides/ai-context 0.2.0 → 0.3.1

package/src/types/v1.ts

@@ -7,46 +7,61 @@ export type SizeKey =
   | "letter-landscape"
   | "linkedin-banner";
 
-export interface SlideAttrs {
+export type SpacingToken = "none" | "sm" | "md" | "lg";
+export type BorderRadiusToken = "none" | "sm" | "md" | "lg";
+export type AlignValue = "left" | "center" | "right" | "stretch";
+export type JustifyValue = "start" | "center" | "end" | "space-between";
+
+export interface SlideAttrs extends BaseBlockAttrs {
   id?: string | null;
   className?: string | null;
   size?: SizeKey | null;
 }
 
-export interface RowAttrs {
-  layout?:
-    | ""
-    | "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?: string | null;
+/**
+ * Base attributes shared by all block types
+ */
+export interface BaseBlockAttrs {
+  align?: AlignValue | null;
+  justify?: JustifyValue | null;
+  padding?: SpacingToken | string | null;
+  margin?: SpacingToken | string | null;
+  gap?: SpacingToken | string | null;
+  backgroundColor?: string | null;
+  backgroundImage?: string | null;
+  borderRadius?: BorderRadiusToken | string | null;
+  border?: string | null;
+  fill?: boolean | null;
+  width?: string | null;
+  height?: string | null;
 }
 
-export interface ColumnAttrs {
-  className?: string | null;
-  contentMode?: "default";
-  verticalAlign?: "top" | "center" | "bottom";
-  horizontalAlign?: "left" | "center" | "right" | "stretch";
-  padding?: "none";
+export interface ColumnAttrs extends BaseBlockAttrs {
+  // No column-specific attributes, all from BaseBlockAttrs
 }
 
-export interface ImageBlockAttrs {
+export type ImageBlockSize = "fill" | "fit" | "natural";
+export type ImageBlockCrop = 
+  | "center" 
+  | "top" 
+  | "bottom" 
+  | "left" 
+  | "right" 
+  | "top-left" 
+  | "top-right" 
+  | "bottom-left" 
+  | "bottom-right";
+
+export interface ImageBlockAttrs extends BaseBlockAttrs {
   src: string;
   assetId?: string | null;
   alt?: string;
   caption?: string;
   credit?: string;
+  size?: ImageBlockSize | null;
+  crop?: ImageBlockCrop | null;
+  // Deprecated attributes (kept for backwards compatibility)
   layout?: "cover" | "contain" | "fill" | "focus" | "pattern" | null;
-  align?: "left" | "center" | "right" | "stretch" | null;
-  width?: string | number | null;
-  height?: string | number | null;
   fullBleed?: boolean;
   focalX?: number | null;
   focalY?: number | null;

package/src/contexts/v1/row.ts

@@ -1,25 +0,0 @@
-export const 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–1, 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>
-`.trim();
-
-

package/src/examples/v1/flyers.ts

@@ -1,30 +0,0 @@
-export const 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 · 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();
-
-

package/src/examples/v1/index.ts

@@ -1,4 +0,0 @@
-export { slides } from "./slides";
-export { flyers } from "./flyers";
-
-

package/src/examples/v1/slides.ts

@@ -1,31 +0,0 @@
-export const 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();
-
-

package/src/recipes/v1/addTwoColumns.ts

@@ -1,13 +0,0 @@
-import { core, fullDocument, row, column } from "../../contexts/v1";
-
-export const 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");
-
-

package/src/recipes/v1/createSlide.ts

@@ -1,29 +0,0 @@
-import { core, fullDocument, slide, row, column } from "../../contexts/v1";
-
-export const 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");
-
-

package/src/recipes/v1/editImageToCover.ts

@@ -1,13 +0,0 @@
-import { core, fullDocument, imageBlock, editingRules } from "../../contexts/v1";
-
-export const 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");
-
-

package/src/recipes/v1/index.ts

@@ -1,5 +0,0 @@
-export { createSlide } from "./createSlide";
-export { addTwoColumns } from "./addTwoColumns";
-export { editImageToCover } from "./editImageToCover";
-
-

package/src/schemas/v1/row.schema.json

@@ -1,29 +0,0 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "title": "row",
-  "type": "object",
-  "properties": {
-    "type": { "const": "row" },
-    "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"] }
-      },
-      "additionalProperties": true
-    }
-  },
-  "required": ["type"],
-  "additionalProperties": false
-}
-
-