@upstart.gg/sdk 0.0.138 → 0.0.139

package/dist/shared/bricks/manifests/box.manifest.js

@@ -1,28 +1,549 @@
-/*! Upstart.gg - Copyright (C) 2024 Flippable - https://github.com/upstart-gg/upstart/blob/main/LICENSE */
-
-import {
-  examples,
-  manifest
-} from "../../chunk-PFZMRSHJ.js";
-import "../../chunk-WPZV3LYL.js";
-import "../../chunk-VYA2FCTY.js";
-import "../../chunk-EUFVTHAG.js";
-import "../../chunk-UC75KRLX.js";
-import "../../chunk-5RCC2STG.js";
-import "../../chunk-XFZQGRRL.js";
-import "../../chunk-IEMCCHM4.js";
-import "../../chunk-2UEPTT5J.js";
-import "../../chunk-2EOCK66Z.js";
-import "../../chunk-OJ6KL7FU.js";
-import "../../chunk-ZRBTAC3G.js";
-import "../../chunk-EMF5TCPX.js";
-import "../../chunk-MO6CRLQA.js";
-import "../../chunk-GNTJT7MR.js";
-import "../../chunk-TZ6X7ZM5.js";
-import "../../chunk-GDYCCB3B.js";
-import "../../chunk-ZGQ3AQBG.js";
-export {
-  examples,
-  manifest
-};
+import { defineBrickManifest } from "../../brick-manifest.js";
+import { cssLength } from "../props/css-length.js";
+import { alignItems, justifyContent } from "../props/align.js";
+import { defineProps } from "../props/helpers.js";
+import { shadow } from "../props/effects.js";
+import { colorPreset } from "../props/color-preset.js";
+import { loop } from "../props/dynamic.js";
+import { border, rounding } from "../props/border.js";
+import { direction } from "../props/direction.js";
+import { Type } from "@sinclair/typebox";
+import { RxBox } from "react-icons/rx";
+
+//#region src/shared/bricks/manifests/box.manifest.ts
+const manifest = defineBrickManifest({
+	type: "box",
+	category: "container",
+	name: "Box",
+	description: "A container for stacking bricks horizontally or vertically.",
+	aiInstructions: `Use the box component as a flexible container for organizing and arranging multiple bricks in horizontal or vertical layouts.
+
+WHEN TO USE:
+- Grouping related content elements (text + image + button)
+- Creating card-like layouts with multiple components
+- Building responsive grid systems with wrapping
+- Organizing form elements or input groups
+- Displaying repeated data from queries (products, team members, blog posts)
+- Creating structured layouts with consistent spacing
+
+LAYOUT GUIDELINES:
+- direction: "flex-col" for vertical stacking, "flex-row" for horizontal arrangement
+- gap: "0.5rem" for tight spacing, "1rem" for standard, "2rem" for spacious layouts
+- padding: "1rem" for standard padding, "2rem" for generous spacing, "0" for edge-to-edge
+- wrap: true for responsive grids that wrap on smaller screens, false for fixed layouts
+- justifyContent: "justify-start" for left-align, "justify-center" for center, "justify-between" for space-between
+- alignItems: "items-stretch" for equal heights, "items-center" for center-align, "items-start" for top-align
+
+STYLING OPTIONS:
+- colorPreset: Use light backgrounds like "primary-50", "neutral-100", "secondary-100" for content containers
+- rounding: "rounded-md" for standard, "rounded-lg" for friendly, "rounded-xl"/"rounded-2xl" for modern
+- border: Add subtle borders with "border" width and colors like "border-gray-200", "border-primary-300"
+- shadow: "shadow-sm" for subtle depth, "shadow-md" for cards, "shadow-lg" for prominence
+
+CONTENT RULES:
+- Must contain at least 2 child bricks to be useful
+- Cannot contain other box components as direct children
+- Commonly contains: text, image, button, icon combinations
+- Perfect for repeating patterns using loop data
+
+DYNAMIC CONTENT:
+- Use loop property to repeat the box itself over data queries
+- Template variables work in all child components: "{{ product.name}}", "{{user.email}}"
+- Great for: product catalogs, team directories, blog listings
+
+AVOID:
+- Single child elements (use individual brick instead)
+- Nesting boxes inside boxes (use single box with proper layout)
+- Complex nested structures (break into separate boxes)`,
+	isContainer: true,
+	defaultWidth: {
+		desktop: "auto",
+		mobile: "100%"
+	},
+	defaultHeight: { desktop: "auto" },
+	icon: RxBox,
+	props: defineProps({
+		colorPreset: Type.Optional(colorPreset({ title: "Color" })),
+		direction: direction({
+			default: "flex-col",
+			title: "Direction",
+			description: "Direction of the box layout"
+		}),
+		justifyContent: Type.Optional(justifyContent({ default: "justify-center" })),
+		alignItems: Type.Optional(alignItems({ default: "items-stretch" })),
+		gap: Type.Optional(cssLength({
+			title: "Gap",
+			default: "1rem",
+			description: "Gap between children bricks.",
+			"ai:instructions": "Can be a tailwind gap class like 'gap-1' or 'gap-2', or a custom value like '10px'",
+			"ui:placeholder": "Not specified",
+			"ui:styleId": "styles:gap"
+		})),
+		padding: Type.Optional(cssLength({
+			default: "1rem",
+			description: "Padding inside the box.",
+			"ai:instructions": "Use only a single value like '1rem' or '10px'",
+			title: "Padding",
+			"ui:placeholder": "Not specified",
+			"ui:styleId": "styles:padding"
+		})),
+		wrap: Type.Optional(Type.Boolean({
+			title: "Wrap",
+			description: "Wrap bricks if they overflow the section.",
+			default: false,
+			"ui:styleId": "styles:wrap"
+		})),
+		rounding: rounding({ default: "rounded-md" }),
+		border: Type.Optional(border()),
+		shadow: Type.Optional(shadow()),
+		loop: Type.Optional(loop()),
+		$children: Type.Array(Type.Any(), {
+			"ui:field": "hidden",
+			description: "List of nested bricks",
+			default: [],
+			examples: [[{
+				type: "text",
+				props: { content: "Hello World" }
+			}, {
+				type: "image",
+				props: {
+					src: "https://via.placeholder.com/150",
+					alt: "Placeholder Image"
+				}
+			}]]
+		})
+	})
+});
+const examples = [
+	{
+		description: "Simple vertical layout - Basic text and image combination",
+		type: "box",
+		props: {
+			direction: "flex-col",
+			gap: "1rem",
+			padding: "1.5rem",
+			$children: [
+				{
+					type: "text",
+					props: { content: "<h3>Welcome to Our Service</h3><p>We provide innovative solutions for modern businesses.</p>" }
+				},
+				{
+					type: "image",
+					props: {
+						src: "https://via.placeholder.com/300x200",
+						alt: "Service showcase"
+					}
+				},
+				{
+					type: "button",
+					props: {
+						label: "Learn More",
+						link: "/services"
+					}
+				}
+			]
+		}
+	},
+	{
+		description: "Horizontal layout with wrapping - Perfect for responsive image galleries",
+		type: "box",
+		props: {
+			direction: "flex-row",
+			gap: "1rem",
+			wrap: true,
+			justifyContent: "justify-center",
+			padding: "1rem",
+			$children: [
+				{
+					type: "image",
+					props: {
+						src: "https://via.placeholder.com/150",
+						alt: "Gallery image 1"
+					}
+				},
+				{
+					type: "image",
+					props: {
+						src: "https://via.placeholder.com/150",
+						alt: "Gallery image 2"
+					}
+				},
+				{
+					type: "image",
+					props: {
+						src: "https://via.placeholder.com/150",
+						alt: "Gallery image 3"
+					}
+				},
+				{
+					type: "image",
+					props: {
+						src: "https://via.placeholder.com/150",
+						alt: "Gallery image 4"
+					}
+				}
+			]
+		}
+	},
+	{
+		description: "Content card with background and border - Professional presentation style",
+		type: "box",
+		props: {
+			direction: "flex-col",
+			gap: "1rem",
+			padding: "2rem",
+			colorPreset: { color: "primary-50" },
+			border: {
+				width: "border",
+				color: "border-primary-200"
+			},
+			rounding: "rounded-lg",
+			shadow: "shadow-md",
+			$children: [
+				{
+					type: "text",
+					props: { content: "<h3>Featured Article</h3><p>Discover the latest trends in technology and innovation that are shaping our future.</p>" }
+				},
+				{
+					type: "image",
+					props: {
+						src: "https://via.placeholder.com/400x250",
+						alt: "Technology trends"
+					}
+				},
+				{
+					type: "button",
+					props: {
+						label: "Read Full Article",
+						link: "/articles/tech-trends"
+					}
+				}
+			]
+		}
+	},
+	{
+		description: "Employee directory using dynamic data - Shows team member profiles",
+		type: "box",
+		props: {
+			direction: "flex-col",
+			gap: "1.5rem",
+			padding: "2rem",
+			colorPreset: { color: "neutral-100" },
+			rounding: "rounded-lg",
+			border: {
+				width: "border",
+				color: "border-neutral-300"
+			},
+			loop: { over: "allEmployees" },
+			$children: [
+				{
+					type: "image",
+					props: {
+						src: "{{allEmployees.photo}}",
+						alt: "Photo of {{allEmployees.name}}"
+					}
+				},
+				{
+					type: "text",
+					props: { content: "<h3>{{allEmployees.name}}</h3><p><strong>{{allEmployees.position}}</strong></p><p>{{allEmployees.department}} • {{allEmployees.email}}</p>" }
+				},
+				{
+					type: "button",
+					props: {
+						label: "Contact {{allEmployees.name}}",
+						link: "mailto:{{allEmployees.email}}"
+					}
+				}
+			]
+		}
+	},
+	{
+		description: "Blog post cards with horizontal layout - Great for article previews",
+		type: "box",
+		props: {
+			direction: "flex-row",
+			gap: "2rem",
+			padding: "1.5rem",
+			justifyContent: "justify-start",
+			alignItems: "items-stretch",
+			colorPreset: { color: "secondary-50" },
+			rounding: "rounded-lg",
+			shadow: "shadow-sm",
+			loop: { over: "blogPosts" },
+			$children: [
+				{
+					type: "image",
+					props: {
+						src: "{{blogPosts.featuredImage}}",
+						alt: "{{blogPosts.title}}"
+					}
+				},
+				{
+					type: "text",
+					props: { content: "<h4>{{blogPosts.title}}</h4><p>{{blogPosts.excerpt}}</p><p><em>By {{blogPosts.author}} • {{blogPosts.publishDate}}</em></p>" }
+				},
+				{
+					type: "button",
+					props: {
+						label: "Read More",
+						link: "/blog/{{blogPosts.slug}}"
+					}
+				}
+			]
+		}
+	},
+	{
+		description: "Product showcase cards with pricing - Perfect for e-commerce displays",
+		type: "box",
+		props: {
+			direction: "flex-col",
+			gap: "1rem",
+			padding: "1.5rem",
+			justifyContent: "justify-center",
+			alignItems: "items-center",
+			colorPreset: { color: "accent-50" },
+			border: {
+				width: "border-2",
+				color: "border-accent-200"
+			},
+			rounding: "rounded-xl",
+			shadow: "shadow-md",
+			loop: { over: "featuredProducts" },
+			$children: [
+				{
+					type: "image",
+					props: {
+						src: "{{featuredProducts.image}}",
+						alt: "{{featuredProducts.name}}"
+					}
+				},
+				{
+					type: "text",
+					props: { content: "<h3>{{featuredProducts.name}}</h3><p>{{featuredProducts.description}}</p><p><strong>${{featuredProducts.price}}</strong></p>" }
+				},
+				{
+					type: "button",
+					props: {
+						label: "Add to Cart",
+						link: "/cart/add/{{featuredProducts.id}}"
+					}
+				}
+			]
+		}
+	},
+	{
+		description: "Team members with wrapping - Responsive grid that adapts to screen size",
+		type: "box",
+		props: {
+			direction: "flex-row",
+			gap: "2rem",
+			padding: "2rem",
+			wrap: true,
+			justifyContent: "justify-center",
+			alignItems: "items-start",
+			colorPreset: { color: "secondary-100" },
+			rounding: "rounded-lg",
+			loop: { over: "teamMembers" },
+			$children: [
+				{
+					type: "image",
+					props: {
+						src: "{{teamMembers.avatar}}",
+						alt: "{{teamMembers.fullName}}"
+					}
+				},
+				{
+					type: "text",
+					props: { content: "<h4>{{teamMembers.fullName}}</h4><p><strong>{{teamMembers.role}}</strong></p><p>{{teamMembers.bio}}</p>" }
+				},
+				{
+					type: "button",
+					props: {
+						label: "View Profile",
+						link: "/team/{{teamMembers.slug}}"
+					}
+				}
+			]
+		}
+	},
+	{
+		description: "Event listings with accent styling - Prominent call-to-action design",
+		type: "box",
+		props: {
+			direction: "flex-col",
+			gap: "1.25rem",
+			padding: "2.5rem",
+			alignItems: "items-center",
+			colorPreset: { color: "accent-100" },
+			border: {
+				width: "border-2",
+				color: "border-accent-300"
+			},
+			rounding: "rounded-lg",
+			shadow: "shadow-lg",
+			loop: { over: "upcomingEvents" },
+			$children: [
+				{
+					type: "icon",
+					props: {
+						icon: "mdi:calendar-event",
+						size: "2rem",
+						color: "#f59e0b"
+					}
+				},
+				{
+					type: "text",
+					props: { content: "<h3>{{upcomingEvents.title}}</h3><p><strong>{{upcomingEvents.date}} at {{upcomingEvents.time}}</strong></p><p>{{upcomingEvents.venue}} • {{upcomingEvents.city}}</p><p>{{upcomingEvents.description}}</p>" }
+				},
+				{
+					type: "button",
+					props: {
+						label: "Register Now",
+						link: "/events/{{upcomingEvents.slug}}/register"
+					}
+				}
+			]
+		}
+	},
+	{
+		description: "Customer testimonials with star ratings - Social proof presentation",
+		type: "box",
+		props: {
+			direction: "flex-col",
+			gap: "1rem",
+			padding: "3rem",
+			justifyContent: "justify-center",
+			alignItems: "items-center",
+			colorPreset: { color: "neutral-50" },
+			shadow: "shadow-lg",
+			rounding: "rounded-2xl",
+			loop: { over: "customerTestimonials" },
+			$children: [
+				{
+					type: "icon",
+					props: {
+						icon: "mdi:format-quote-open",
+						size: "2rem",
+						color: "#6b7280"
+					}
+				},
+				{
+					type: "text",
+					props: { content: "<p style=\"text-align: center\"><em>\"{{customerTestimonials.quote}}\"</em></p><p style=\"text-align: center\"><strong>{{customerTestimonials.customerName}}</strong></p><p style=\"text-align: center\">{{customerTestimonials.company}} • {{customerTestimonials.position}}</p>" }
+				},
+				{
+					type: "icon",
+					props: {
+						icon: "mdi:star",
+						size: "1.5rem",
+						color: "#fbbf24"
+					}
+				}
+			]
+		}
+	},
+	{
+		description: "Portfolio project showcase - Creative work presentation with client details",
+		type: "box",
+		props: {
+			direction: "flex-row",
+			gap: "1.5rem",
+			padding: "2rem",
+			alignItems: "items-start",
+			justifyContent: "justify-start",
+			colorPreset: { color: "primary-50" },
+			border: {
+				width: "border",
+				color: "border-primary-200"
+			},
+			rounding: "rounded-lg",
+			loop: { over: "portfolioProjects" },
+			$children: [
+				{
+					type: "image",
+					props: {
+						src: "{{portfolioProjects.thumbnail}}",
+						alt: "{{portfolioProjects.projectName}}"
+					}
+				},
+				{
+					type: "text",
+					props: { content: "<h4>{{portfolioProjects.projectName}}</h4><p><strong>{{portfolioProjects.client}}</strong></p><p>{{portfolioProjects.category}} • {{portfolioProjects.year}}</p><p>{{portfolioProjects.shortDescription}}</p>" }
+				},
+				{
+					type: "button",
+					props: {
+						label: "View Project",
+						link: "/portfolio/{{portfolioProjects.slug}}"
+					}
+				}
+			]
+		}
+	},
+	{
+		description: "News article previews with categories - Clean editorial layout",
+		type: "box",
+		props: {
+			direction: "flex-col",
+			gap: "1.5rem",
+			padding: "2rem",
+			colorPreset: { color: "neutral-100" },
+			border: {
+				width: "border",
+				color: "border-neutral-300"
+			},
+			rounding: "rounded-md",
+			loop: { over: "latestNews" },
+			$children: [{
+				type: "text",
+				props: { content: "<h3>{{latestNews.headline}}</h3><p><strong>{{latestNews.category}}</strong> • {{latestNews.publishedDate}}</p><p>{{latestNews.summary}}</p>" }
+			}, {
+				type: "button",
+				props: {
+					label: "Read Full Article",
+					link: "/news/{{latestNews.slug}}"
+				}
+			}]
+		}
+	},
+	{
+		description: "Service packages with icons and pricing - Professional service presentation",
+		type: "box",
+		props: {
+			direction: "flex-col",
+			gap: "1rem",
+			padding: "2rem",
+			justifyContent: "justify-center",
+			alignItems: "items-center",
+			colorPreset: { color: "secondary-200" },
+			rounding: "rounded-xl",
+			shadow: "shadow-md",
+			loop: { over: "companyServices" },
+			$children: [
+				{
+					type: "icon",
+					props: {
+						icon: "{{companyServices.iconName}}",
+						size: "2.5rem",
+						color: "{{companyServices.iconColor}}"
+					}
+				},
+				{
+					type: "text",
+					props: { content: "<h4 style='text-align: center'>{{companyServices.serviceName}}</h4><p style='text-align: center'>{{companyServices.description}}</p><p style='text-align: center'><strong>Starting at ${{companyServices.price}}</strong></p>" }
+				},
+				{
+					type: "button",
+					props: {
+						label: "Learn More",
+						link: "/services/{{companyServices.serviceSlug}}"
+					}
+				}
+			]
+		}
+	}
+];
+
+//#endregion
+export { examples, manifest };
 //# sourceMappingURL=box.manifest.js.map

package/dist/shared/bricks/manifests/box.manifest.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"file":"box.manifest.js","names":["examples: BrickExample<Manifest>[]"],"sources":["../../../../src/shared/bricks/manifests/box.manifest.ts"],"sourcesContent":["import { defineBrickManifest } from \"~/shared/brick-manifest\";\nimport { defineProps } from \"../props/helpers\";\nimport { Type } from \"@sinclair/typebox\";\nimport { border, rounding } from \"../props/border\";\nimport { shadow } from \"../props/effects\";\nimport { cssLength } from \"../props/css-length\";\nimport { direction } from \"../props/direction\";\nimport { RxBox } from \"react-icons/rx\";\nimport { alignItems, justifyContent } from \"../props/align\";\nimport { colorPreset } from \"../props/color-preset\";\nimport { loop } from \"../props/dynamic\";\nimport type { BrickExample } from \"./_types\";\n\n// Generic container can hold any type of array data source\nexport const manifest = defineBrickManifest({\n  type: \"box\",\n  category: \"container\",\n  name: \"Box\",\n  description: \"A container for stacking bricks horizontally or vertically.\",\n  aiInstructions: `Use the box component as a flexible container for organizing and arranging multiple bricks in horizontal or vertical layouts.\n\nWHEN TO USE:\n- Grouping related content elements (text + image + button)\n- Creating card-like layouts with multiple components\n- Building responsive grid systems with wrapping\n- Organizing form elements or input groups\n- Displaying repeated data from queries (products, team members, blog posts)\n- Creating structured layouts with consistent spacing\n\nLAYOUT GUIDELINES:\n- direction: \"flex-col\" for vertical stacking, \"flex-row\" for horizontal arrangement\n- gap: \"0.5rem\" for tight spacing, \"1rem\" for standard, \"2rem\" for spacious layouts\n- padding: \"1rem\" for standard padding, \"2rem\" for generous spacing, \"0\" for edge-to-edge\n- wrap: true for responsive grids that wrap on smaller screens, false for fixed layouts\n- justifyContent: \"justify-start\" for left-align, \"justify-center\" for center, \"justify-between\" for space-between\n- alignItems: \"items-stretch\" for equal heights, \"items-center\" for center-align, \"items-start\" for top-align\n\nSTYLING OPTIONS:\n- colorPreset: Use light backgrounds like \"primary-50\", \"neutral-100\", \"secondary-100\" for content containers\n- rounding: \"rounded-md\" for standard, \"rounded-lg\" for friendly, \"rounded-xl\"/\"rounded-2xl\" for modern\n- border: Add subtle borders with \"border\" width and colors like \"border-gray-200\", \"border-primary-300\"\n- shadow: \"shadow-sm\" for subtle depth, \"shadow-md\" for cards, \"shadow-lg\" for prominence\n\nCONTENT RULES:\n- Must contain at least 2 child bricks to be useful\n- Cannot contain other box components as direct children\n- Commonly contains: text, image, button, icon combinations\n- Perfect for repeating patterns using loop data\n\nDYNAMIC CONTENT:\n- Use loop property to repeat the box itself over data queries\n- Template variables work in all child components: \"{{ product.name}}\", \"{{user.email}}\"\n- Great for: product catalogs, team directories, blog listings\n\nAVOID:\n- Single child elements (use individual brick instead)\n- Nesting boxes inside boxes (use single box with proper layout)\n- Complex nested structures (break into separate boxes)`,\n  isContainer: true,\n  defaultWidth: {\n    desktop: \"auto\",\n    mobile: \"100%\",\n  },\n  defaultHeight: {\n    desktop: \"auto\",\n  },\n  icon: RxBox,\n  props: defineProps({\n    colorPreset: Type.Optional(\n      colorPreset({\n        title: \"Color\",\n      }),\n    ),\n    direction: direction({\n      default: \"flex-col\",\n      title: \"Direction\",\n      description: \"Direction of the box layout\",\n    }),\n    justifyContent: Type.Optional(\n      justifyContent({\n        default: \"justify-center\",\n      }),\n    ),\n    alignItems: Type.Optional(\n      alignItems({\n        default: \"items-stretch\",\n      }),\n    ),\n    gap: Type.Optional(\n      cssLength({\n        title: \"Gap\",\n        default: \"1rem\",\n        description: \"Gap between children bricks.\",\n        \"ai:instructions\":\n          \"Can be a tailwind gap class like 'gap-1' or 'gap-2', or a custom value like '10px'\",\n        \"ui:placeholder\": \"Not specified\",\n        \"ui:styleId\": \"styles:gap\",\n      }),\n    ),\n    padding: Type.Optional(\n      cssLength({\n        default: \"1rem\",\n        description: \"Padding inside the box.\",\n        \"ai:instructions\": \"Use only a single value like '1rem' or '10px'\",\n        title: \"Padding\",\n        \"ui:placeholder\": \"Not specified\",\n        \"ui:styleId\": \"styles:padding\",\n      }),\n    ),\n    wrap: Type.Optional(\n      Type.Boolean({\n        title: \"Wrap\",\n        description: \"Wrap bricks if they overflow the section.\",\n        default: false,\n        \"ui:styleId\": \"styles:wrap\",\n      }),\n    ),\n    rounding: rounding({\n      default: \"rounded-md\",\n    }),\n    border: Type.Optional(border()),\n    shadow: Type.Optional(shadow()),\n    loop: Type.Optional(loop()),\n    $children: Type.Array(Type.Any(), {\n      \"ui:field\": \"hidden\",\n      description: \"List of nested bricks\",\n      default: [],\n      examples: [\n        [\n          {\n            type: \"text\",\n            props: {\n              content: \"Hello World\",\n            },\n          },\n          {\n            type: \"image\",\n            props: {\n              src: \"https://via.placeholder.com/150\",\n              alt: \"Placeholder Image\",\n            },\n          },\n        ],\n      ],\n    }),\n  }),\n});\n\nexport type Manifest = typeof manifest;\n\nexport const examples: BrickExample<Manifest>[] = [\n  // BASIC LAYOUTS\n  {\n    description: \"Simple vertical layout - Basic text and image combination\",\n    type: \"box\",\n    props: {\n      direction: \"flex-col\",\n      gap: \"1rem\",\n      padding: \"1.5rem\",\n      $children: [\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h3>Welcome to Our Service</h3><p>We provide innovative solutions for modern businesses.</p>\",\n          },\n        },\n        {\n          type: \"image\",\n          props: {\n            src: \"https://via.placeholder.com/300x200\",\n            alt: \"Service showcase\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"Learn More\",\n            link: \"/services\",\n          },\n        },\n      ],\n    },\n  },\n\n  {\n    description: \"Horizontal layout with wrapping - Perfect for responsive image galleries\",\n    type: \"box\",\n    props: {\n      direction: \"flex-row\",\n      gap: \"1rem\",\n      wrap: true,\n      justifyContent: \"justify-center\",\n      padding: \"1rem\",\n      $children: [\n        {\n          type: \"image\",\n          props: {\n            src: \"https://via.placeholder.com/150\",\n            alt: \"Gallery image 1\",\n          },\n        },\n        {\n          type: \"image\",\n          props: {\n            src: \"https://via.placeholder.com/150\",\n            alt: \"Gallery image 2\",\n          },\n        },\n        {\n          type: \"image\",\n          props: {\n            src: \"https://via.placeholder.com/150\",\n            alt: \"Gallery image 3\",\n          },\n        },\n        {\n          type: \"image\",\n          props: {\n            src: \"https://via.placeholder.com/150\",\n            alt: \"Gallery image 4\",\n          },\n        },\n      ],\n    },\n  },\n\n  // STYLED CONTAINERS\n  {\n    description: \"Content card with background and border - Professional presentation style\",\n    type: \"box\",\n    props: {\n      direction: \"flex-col\",\n      gap: \"1rem\",\n      padding: \"2rem\",\n      colorPreset: { color: \"primary-50\" },\n      border: { width: \"border\", color: \"border-primary-200\" },\n      rounding: \"rounded-lg\",\n      shadow: \"shadow-md\",\n      $children: [\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h3>Featured Article</h3><p>Discover the latest trends in technology and innovation that are shaping our future.</p>\",\n          },\n        },\n        {\n          type: \"image\",\n          props: {\n            src: \"https://via.placeholder.com/400x250\",\n            alt: \"Technology trends\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"Read Full Article\",\n            link: \"/articles/tech-trends\",\n          },\n        },\n      ],\n    },\n  },\n\n  // DYNAMIC CONTENT EXAMPLES\n  {\n    description: \"Employee directory using dynamic data - Shows team member profiles\",\n    type: \"box\",\n    props: {\n      direction: \"flex-col\",\n      gap: \"1.5rem\",\n      padding: \"2rem\",\n      colorPreset: { color: \"neutral-100\" },\n      rounding: \"rounded-lg\",\n      border: { width: \"border\", color: \"border-neutral-300\" },\n      loop: { over: \"allEmployees\" },\n      $children: [\n        {\n          type: \"image\",\n          props: {\n            src: \"{{allEmployees.photo}}\",\n            alt: \"Photo of {{allEmployees.name}}\",\n          },\n        },\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h3>{{allEmployees.name}}</h3><p><strong>{{allEmployees.position}}</strong></p><p>{{allEmployees.department}} • {{allEmployees.email}}</p>\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"Contact {{allEmployees.name}}\",\n            link: \"mailto:{{allEmployees.email}}\",\n          },\n        },\n      ],\n    },\n  },\n\n  {\n    description: \"Blog post cards with horizontal layout - Great for article previews\",\n    type: \"box\",\n    props: {\n      direction: \"flex-row\",\n      gap: \"2rem\",\n      padding: \"1.5rem\",\n      justifyContent: \"justify-start\",\n      alignItems: \"items-stretch\",\n      colorPreset: { color: \"secondary-50\" },\n      rounding: \"rounded-lg\",\n      shadow: \"shadow-sm\",\n      loop: { over: \"blogPosts\" },\n      $children: [\n        {\n          type: \"image\",\n          props: {\n            src: \"{{blogPosts.featuredImage}}\",\n            alt: \"{{blogPosts.title}}\",\n          },\n        },\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h4>{{blogPosts.title}}</h4><p>{{blogPosts.excerpt}}</p><p><em>By {{blogPosts.author}} • {{blogPosts.publishDate}}</em></p>\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"Read More\",\n            link: \"/blog/{{blogPosts.slug}}\",\n          },\n        },\n      ],\n    },\n  },\n\n  {\n    description: \"Product showcase cards with pricing - Perfect for e-commerce displays\",\n    type: \"box\",\n    props: {\n      direction: \"flex-col\",\n      gap: \"1rem\",\n      padding: \"1.5rem\",\n      justifyContent: \"justify-center\",\n      alignItems: \"items-center\",\n      colorPreset: { color: \"accent-50\" },\n      border: { width: \"border-2\", color: \"border-accent-200\" },\n      rounding: \"rounded-xl\",\n      shadow: \"shadow-md\",\n      loop: { over: \"featuredProducts\" },\n      $children: [\n        {\n          type: \"image\",\n          props: {\n            src: \"{{featuredProducts.image}}\",\n            alt: \"{{featuredProducts.name}}\",\n          },\n        },\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h3>{{featuredProducts.name}}</h3><p>{{featuredProducts.description}}</p><p><strong>${{featuredProducts.price}}</strong></p>\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"Add to Cart\",\n            link: \"/cart/add/{{featuredProducts.id}}\",\n          },\n        },\n      ],\n    },\n  },\n\n  // RESPONSIVE GRID LAYOUTS\n  {\n    description: \"Team members with wrapping - Responsive grid that adapts to screen size\",\n    type: \"box\",\n    props: {\n      direction: \"flex-row\",\n      gap: \"2rem\",\n      padding: \"2rem\",\n      wrap: true,\n      justifyContent: \"justify-center\",\n      alignItems: \"items-start\",\n      colorPreset: { color: \"secondary-100\" },\n      rounding: \"rounded-lg\",\n      loop: { over: \"teamMembers\" },\n      $children: [\n        {\n          type: \"image\",\n          props: {\n            src: \"{{teamMembers.avatar}}\",\n            alt: \"{{teamMembers.fullName}}\",\n          },\n        },\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h4>{{teamMembers.fullName}}</h4><p><strong>{{teamMembers.role}}</strong></p><p>{{teamMembers.bio}}</p>\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"View Profile\",\n            link: \"/team/{{teamMembers.slug}}\",\n          },\n        },\n      ],\n    },\n  },\n\n  {\n    description: \"Event listings with accent styling - Prominent call-to-action design\",\n    type: \"box\",\n    props: {\n      direction: \"flex-col\",\n      gap: \"1.25rem\",\n      padding: \"2.5rem\",\n      alignItems: \"items-center\",\n      colorPreset: { color: \"accent-100\" },\n      border: { width: \"border-2\", color: \"border-accent-300\" },\n      rounding: \"rounded-lg\",\n      shadow: \"shadow-lg\",\n      loop: { over: \"upcomingEvents\" },\n      $children: [\n        {\n          type: \"icon\",\n          props: {\n            icon: \"mdi:calendar-event\",\n            size: \"2rem\",\n            color: \"#f59e0b\",\n          },\n        },\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h3>{{upcomingEvents.title}}</h3><p><strong>{{upcomingEvents.date}} at {{upcomingEvents.time}}</strong></p><p>{{upcomingEvents.venue}} • {{upcomingEvents.city}}</p><p>{{upcomingEvents.description}}</p>\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"Register Now\",\n            link: \"/events/{{upcomingEvents.slug}}/register\",\n          },\n        },\n      ],\n    },\n  },\n\n  // TESTIMONIALS & REVIEWS\n  {\n    description: \"Customer testimonials with star ratings - Social proof presentation\",\n    type: \"box\",\n    props: {\n      direction: \"flex-col\",\n      gap: \"1rem\",\n      padding: \"3rem\",\n      justifyContent: \"justify-center\",\n      alignItems: \"items-center\",\n      colorPreset: { color: \"neutral-50\" },\n      shadow: \"shadow-lg\",\n      rounding: \"rounded-2xl\",\n      loop: { over: \"customerTestimonials\" },\n      $children: [\n        {\n          type: \"icon\",\n          props: {\n            icon: \"mdi:format-quote-open\",\n            size: \"2rem\",\n            color: \"#6b7280\",\n          },\n        },\n        {\n          type: \"text\",\n          props: {\n            content:\n              '<p style=\"text-align: center\"><em>\"{{customerTestimonials.quote}}\"</em></p><p style=\"text-align: center\"><strong>{{customerTestimonials.customerName}}</strong></p><p style=\"text-align: center\">{{customerTestimonials.company}} • {{customerTestimonials.position}}</p>',\n          },\n        },\n        {\n          type: \"icon\",\n          props: {\n            icon: \"mdi:star\",\n            size: \"1.5rem\",\n            color: \"#fbbf24\",\n          },\n        },\n      ],\n    },\n  },\n\n  {\n    description: \"Portfolio project showcase - Creative work presentation with client details\",\n    type: \"box\",\n    props: {\n      direction: \"flex-row\",\n      gap: \"1.5rem\",\n      padding: \"2rem\",\n      alignItems: \"items-start\",\n      justifyContent: \"justify-start\",\n      colorPreset: { color: \"primary-50\" },\n      border: { width: \"border\", color: \"border-primary-200\" },\n      rounding: \"rounded-lg\",\n      loop: { over: \"portfolioProjects\" },\n      $children: [\n        {\n          type: \"image\",\n          props: {\n            src: \"{{portfolioProjects.thumbnail}}\",\n            alt: \"{{portfolioProjects.projectName}}\",\n          },\n        },\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h4>{{portfolioProjects.projectName}}</h4><p><strong>{{portfolioProjects.client}}</strong></p><p>{{portfolioProjects.category}} • {{portfolioProjects.year}}</p><p>{{portfolioProjects.shortDescription}}</p>\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"View Project\",\n            link: \"/portfolio/{{portfolioProjects.slug}}\",\n          },\n        },\n      ],\n    },\n  },\n\n  // NEWS & ARTICLES\n  {\n    description: \"News article previews with categories - Clean editorial layout\",\n    type: \"box\",\n    props: {\n      direction: \"flex-col\",\n      gap: \"1.5rem\",\n      padding: \"2rem\",\n      colorPreset: { color: \"neutral-100\" },\n      border: { width: \"border\", color: \"border-neutral-300\" },\n      rounding: \"rounded-md\",\n      loop: { over: \"latestNews\" },\n      $children: [\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h3>{{latestNews.headline}}</h3><p><strong>{{latestNews.category}}</strong> • {{latestNews.publishedDate}}</p><p>{{latestNews.summary}}</p>\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"Read Full Article\",\n            link: \"/news/{{latestNews.slug}}\",\n          },\n        },\n      ],\n    },\n  },\n\n  // SERVICE OFFERINGS\n  {\n    description: \"Service packages with icons and pricing - Professional service presentation\",\n    type: \"box\",\n    props: {\n      direction: \"flex-col\",\n      gap: \"1rem\",\n      padding: \"2rem\",\n      justifyContent: \"justify-center\",\n      alignItems: \"items-center\",\n      colorPreset: { color: \"secondary-200\" },\n      rounding: \"rounded-xl\",\n      shadow: \"shadow-md\",\n      loop: { over: \"companyServices\" },\n      $children: [\n        {\n          type: \"icon\",\n          props: {\n            icon: \"{{companyServices.iconName}}\",\n            size: \"2.5rem\",\n            color: \"{{companyServices.iconColor}}\",\n          },\n        },\n        {\n          type: \"text\",\n          props: {\n            content:\n              \"<h4 style='text-align: center'>{{companyServices.serviceName}}</h4><p style='text-align: center'>{{companyServices.description}}</p><p style='text-align: center'><strong>Starting at ${{companyServices.price}}</strong></p>\",\n          },\n        },\n        {\n          type: \"button\",\n          props: {\n            label: \"Learn More\",\n            link: \"/services/{{companyServices.serviceSlug}}\",\n          },\n        },\n      ],\n    },\n  },\n];\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAa,WAAW,oBAAoB;CAC1C,MAAM;CACN,UAAU;CACV,MAAM;CACN,aAAa;CACb,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuChB,aAAa;CACb,cAAc;EACZ,SAAS;EACT,QAAQ;EACT;CACD,eAAe,EACb,SAAS,QACV;CACD,MAAM;CACN,OAAO,YAAY;EACjB,aAAa,KAAK,SAChB,YAAY,EACV,OAAO,SACR,CAAC,CACH;EACD,WAAW,UAAU;GACnB,SAAS;GACT,OAAO;GACP,aAAa;GACd,CAAC;EACF,gBAAgB,KAAK,SACnB,eAAe,EACb,SAAS,kBACV,CAAC,CACH;EACD,YAAY,KAAK,SACf,WAAW,EACT,SAAS,iBACV,CAAC,CACH;EACD,KAAK,KAAK,SACR,UAAU;GACR,OAAO;GACP,SAAS;GACT,aAAa;GACb,mBACE;GACF,kBAAkB;GAClB,cAAc;GACf,CAAC,CACH;EACD,SAAS,KAAK,SACZ,UAAU;GACR,SAAS;GACT,aAAa;GACb,mBAAmB;GACnB,OAAO;GACP,kBAAkB;GAClB,cAAc;GACf,CAAC,CACH;EACD,MAAM,KAAK,SACT,KAAK,QAAQ;GACX,OAAO;GACP,aAAa;GACb,SAAS;GACT,cAAc;GACf,CAAC,CACH;EACD,UAAU,SAAS,EACjB,SAAS,cACV,CAAC;EACF,QAAQ,KAAK,SAAS,QAAQ,CAAC;EAC/B,QAAQ,KAAK,SAAS,QAAQ,CAAC;EAC/B,MAAM,KAAK,SAAS,MAAM,CAAC;EAC3B,WAAW,KAAK,MAAM,KAAK,KAAK,EAAE;GAChC,YAAY;GACZ,aAAa;GACb,SAAS,EAAE;GACX,UAAU,CACR,CACE;IACE,MAAM;IACN,OAAO,EACL,SAAS,eACV;IACF,EACD;IACE,MAAM;IACN,OAAO;KACL,KAAK;KACL,KAAK;KACN;IACF,CACF,CACF;GACF,CAAC;EACH,CAAC;CACH,CAAC;AAIF,MAAaA,WAAqC;CAEhD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,WAAW;GACX,KAAK;GACL,SAAS;GACT,WAAW;IACT;KACE,MAAM;KACN,OAAO,EACL,SACE,gGACH;KACF;IACD;KACE,MAAM;KACN,OAAO;MACL,KAAK;MACL,KAAK;MACN;KACF;IACD;KACE,MAAM;KACN,OAAO;MACL,OAAO;MACP,MAAM;MACP;KACF;IACF;GACF;EACF;CAED;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,WAAW;GACX,KAAK;GACL,MAAM;GACN,gBAAgB;GAChB,SAAS;GACT,WAAW;IACT;KACE,MAAM;KACN,OAAO;MACL,KAAK;MACL,KAAK;MACN;KACF;IACD;KACE,MAAM;KACN,OAAO;MACL,KAAK;MACL,KAAK;MACN;KACF;IACD;KACE,MAAM;KACN,OAAO;MACL,KAAK;MACL,KAAK;MACN;KACF;IACD;KACE,MAAM;KACN,OAAO;MACL,KAAK;MACL,KAAK;MACN;KACF;IACF;GACF;EACF;CAGD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,WAAW;GACX,KAAK;GACL,SAAS;GACT,aAAa,EAAE,OAAO,cAAc;GACpC,QAAQ;IAAE,OAAO;IAAU,OAAO;IAAsB;GACxD,UAAU;GACV,QAAQ;GACR,WAAW;IACT;KACE,MAAM;KACN,OAAO,EACL,SACE,wHACH;KACF;IACD;KACE,MAAM;KACN,OAAO;MACL,KAAK;MACL,KAAK;MACN;KACF;IACD;KACE,MAAM;KACN,OAAO;MACL,OAAO;MACP,MAAM;MACP;KACF;IACF;GACF;EACF;CAGD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,WAAW;GACX,KAAK;GACL,SAAS;GACT,aAAa,EAAE,OAAO,eAAe;GACrC,UAAU;GACV,QAAQ;IAAE,OAAO;IAAU,OAAO;IAAsB;GACxD,MAAM,EAAE,MAAM,gBAAgB;GAC9B,WAAW;IACT;KACE,MAAM;KACN,OAAO;MACL,KAAK;MACL,KAAK;MACN;KACF;IACD;KACE,MAAM;KACN,OAAO,EACL,SACE,8IACH;KACF;IACD;KACE,MAAM;KACN,OAAO;MACL,OAAO;MACP,MAAM;MACP;KACF;IACF;GACF;EACF;CAED;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,WAAW;GACX,KAAK;GACL,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,aAAa,EAAE,OAAO,gBAAgB;GACtC,UAAU;GACV,QAAQ;GACR,MAAM,EAAE,MAAM,aAAa;GAC3B,WAAW;IACT;KACE,MAAM;KACN,OAAO;MACL,KAAK;MACL,KAAK;MACN;KACF;IACD;KACE,MAAM;KACN,OAAO,EACL,SACE,+HACH;KACF;IACD;KACE,MAAM;KACN,OAAO;MACL,OAAO;MACP,MAAM;MACP;KACF;IACF;GACF;EACF;CAED;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,WAAW;GACX,KAAK;GACL,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,aAAa,EAAE,OAAO,aAAa;GACnC,QAAQ;IAAE,OAAO;IAAY,OAAO;IAAqB;GACzD,UAAU;GACV,QAAQ;GACR,MAAM,EAAE,MAAM,oBAAoB;GAClC,WAAW;IACT;KACE,MAAM;KACN,OAAO;MACL,KAAK;MACL,KAAK;MACN;KACF;IACD;KACE,MAAM;KACN,OAAO,EACL,SACE,gIACH;KACF;IACD;KACE,MAAM;KACN,OAAO;MACL,OAAO;MACP,MAAM;MACP;KACF;IACF;GACF;EACF;CAGD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,WAAW;GACX,KAAK;GACL,SAAS;GACT,MAAM;GACN,gBAAgB;GAChB,YAAY;GACZ,aAAa,EAAE,OAAO,iBAAiB;GACvC,UAAU;GACV,MAAM,EAAE,MAAM,eAAe;GAC7B,WAAW;IACT;KACE,MAAM;KACN,OAAO;MACL,KAAK;MACL,KAAK;MACN;KACF;IACD;KACE,MAAM;KACN,OAAO,EACL,SACE,2GACH;KACF;IACD;KACE,MAAM;KACN,OAAO;MACL,OAAO;MACP,MAAM;MACP;KACF;IACF;GACF;EACF;CAED;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,WAAW;GACX,KAAK;GACL,SAAS;GACT,YAAY;GACZ,aAAa,EAAE,OAAO,cAAc;GACpC,QAAQ;IAAE,OAAO;IAAY,OAAO;IAAqB;GACzD,UAAU;GACV,QAAQ;GACR,MAAM,EAAE,MAAM,kBAAkB;GAChC,WAAW;IACT;KACE,MAAM;KACN,OAAO;MACL,MAAM;MACN,MAAM;MACN,OAAO;MACR;KACF;IACD;KACE,MAAM;KACN,OAAO,EACL,SACE,6MACH;KACF;IACD;KACE,MAAM;KACN,OAAO;MACL,OAAO;MACP,MAAM;MACP;KACF;IACF;GACF;EACF;CAGD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,WAAW;GACX,KAAK;GACL,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,aAAa,EAAE,OAAO,cAAc;GACpC,QAAQ;GACR,UAAU;GACV,MAAM,EAAE,MAAM,wBAAwB;GACtC,WAAW;IACT;KACE,MAAM;KACN,OAAO;MACL,MAAM;MACN,MAAM;MACN,OAAO;MACR;KACF;IACD;KACE,MAAM;KACN,OAAO,EACL,SACE,qRACH;KACF;IACD;KACE,MAAM;KACN,OAAO;MACL,MAAM;MACN,MAAM;MACN,OAAO;MACR;KACF;IACF;GACF;EACF;CAED;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,WAAW;GACX,KAAK;GACL,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,aAAa,EAAE,OAAO,cAAc;GACpC,QAAQ;IAAE,OAAO;IAAU,OAAO;IAAsB;GACxD,UAAU;GACV,MAAM,EAAE,MAAM,qBAAqB;GACnC,WAAW;IACT;KACE,MAAM;KACN,OAAO;MACL,KAAK;MACL,KAAK;MACN;KACF;IACD;KACE,MAAM;KACN,OAAO,EACL,SACE,iNACH;KACF;IACD;KACE,MAAM;KACN,OAAO;MACL,OAAO;MACP,MAAM;MACP;KACF;IACF;GACF;EACF;CAGD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,WAAW;GACX,KAAK;GACL,SAAS;GACT,aAAa,EAAE,OAAO,eAAe;GACrC,QAAQ;IAAE,OAAO;IAAU,OAAO;IAAsB;GACxD,UAAU;GACV,MAAM,EAAE,MAAM,cAAc;GAC5B,WAAW,CACT;IACE,MAAM;IACN,OAAO,EACL,SACE,+IACH;IACF,EACD;IACE,MAAM;IACN,OAAO;KACL,OAAO;KACP,MAAM;KACP;IACF,CACF;GACF;EACF;CAGD;EACE,aAAa;EACb,MAAM;EACN,OAAO;GACL,WAAW;GACX,KAAK;GACL,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,aAAa,EAAE,OAAO,iBAAiB;GACvC,UAAU;GACV,QAAQ;GACR,MAAM,EAAE,MAAM,mBAAmB;GACjC,WAAW;IACT;KACE,MAAM;KACN,OAAO;MACL,MAAM;MACN,MAAM;MACN,OAAO;MACR;KACF;IACD;KACE,MAAM;KACN,OAAO,EACL,SACE,iOACH;KACF;IACD;KACE,MAAM;KACN,OAAO;MACL,OAAO;MACP,MAAM;MACP;KACF;IACF;GACF;EACF;CACF"}