# chuk-motion/src/chuk_motion/components/layouts/Grid/schema.py
"""Grid component schema and Pydantic models."""
from typing import Any
from pydantic import BaseModel, Field
from ...base import ComponentMetadata
class GridProps(BaseModel):
"""Properties for Grid component."""
layout: Any | None = Field("3x3", description="Grid dimensions")
gap: float | None = Field(20, description="Gap between items (pixels)")
padding: float | None = Field(40, description="Padding around grid (pixels)")
items: list[Any] = Field(description="Array of components to display")
start_time: float = Field(description="When to show (seconds)")
duration: float | None = Field(5.0, description="How long to show (seconds)")
class Config:
extra = "forbid"
# Component metadata
METADATA = ComponentMetadata(
name="Grid", description="Grid layout for multiple items", category="layout"
)
# MCP schema (for backward compatibility with MCP tools list)
MCP_SCHEMA = {
"description": "Grid layout for multiple items",
"category": "layout",
"layouts": {
"1x2": "1 column, 2 rows (simple stack)",
"2x1": "2 columns, 1 row (side-by-side)",
"2x2": "2 columns, 2 rows (4 items)",
"3x2": "3 columns, 2 rows (6 items)",
"2x3": "2 columns, 3 rows (6 items)",
"3x3": "3 columns, 3 rows (9 items) - Instagram style",
"4x2": "4 columns, 2 rows (8 items)",
"2x4": "2 columns, 4 rows (8 items)",
},
"schema": {
"layout": {
"type": "enum",
"default": "3x3",
"values": ["1x2", "2x1", "2x2", "3x2", "2x3", "3x3", "4x2", "2x4"],
"description": "Grid dimensions",
},
"gap": {"type": "number", "default": 20, "description": "Gap between items (pixels)"},
"padding": {"type": "number", "default": 40, "description": "Padding around grid (pixels)"},
"items": {
"type": "array",
"required": True,
"description": "Array of components to display",
},
"start_time": {"type": "float", "required": True, "description": "When to show (seconds)"},
"duration": {"type": "float", "default": 5.0, "description": "How long to show (seconds)"},
},
"example": {
"layout": "3x3",
"gap": 20,
"padding": 40,
"items": [
{"type": "CodeBlock", "code": "Python"},
{"type": "CodeBlock", "code": "JavaScript"},
{"type": "CodeBlock", "code": "Rust"},
{"type": "CodeBlock", "code": "Go"},
{"type": "CodeBlock", "code": "TypeScript"},
{"type": "CodeBlock", "code": "Swift"},
{"type": "CodeBlock", "code": "Kotlin"},
{"type": "CodeBlock", "code": "Ruby"},
{"type": "CodeBlock", "code": "C++"},
],
"start_time": 0.0,
"duration": 10.0,
"use_cases": [
"Portfolio showcase (9 projects)",
"Language comparison",
"Before/after transformations",
"Feature grid",
"Social media style display",
],
},
}