@upstart.gg/sdk 0.0.135 → 0.0.137

package/dist/shared/{chunk-3KLRW4I2.js → chunk-LGDDJJHK.js}

@@ -1,34 +1,34 @@
 /*! Upstart.gg - Copyright (C) 2024 Flippable - https://github.com/upstart-gg/upstart/blob/main/LICENSE */
 
 import {
-  defineProps
-} from "./chunk-BHC2A43S.js";
+  direction
+} from "./chunk-WPZV3LYL.js";
 import {
-  defineBrickManifest
-} from "./chunk-TB3X4LRQ.js";
+  border,
+  rounding
+} from "./chunk-SRYBJ6NQ.js";
 import {
-  loopRef
-} from "./chunk-BW6EFRSF.js";
+  defineProps
+} from "./chunk-VTCHJT4O.js";
 import {
-  directionRef
-} from "./chunk-Y74LZNND.js";
+  cssLength
+} from "./chunk-OJ6KL7FU.js";
 import {
-  shadowRef
-} from "./chunk-TNMNMYOB.js";
+  loop
+} from "./chunk-XFZQGRRL.js";
 import {
-  borderRef,
-  roundingRef
-} from "./chunk-NTLAKMMQ.js";
+  shadow
+} from "./chunk-5RCC2STG.js";
 import {
-  colorPresetRef
-} from "./chunk-TFGGYU6Y.js";
+  alignItems,
+  justifyContent
+} from "./chunk-ZRBTAC3G.js";
 import {
-  cssLengthRef
-} from "./chunk-BPBKHEQ5.js";
+  colorPreset
+} from "./chunk-IEMCCHM4.js";
 import {
-  alignItemsRef,
-  justifyContentRef
-} from "./chunk-ZLYIRH2B.js";
+  defineBrickManifest
+} from "./chunk-J45LSQT6.js";
 
 // src/shared/bricks/manifests/box.manifest.ts
 import { Type } from "@sinclair/typebox";
@@ -38,7 +38,45 @@ var manifest = defineBrickManifest({
   category: "container",
   name: "Box",
   description: "A container for stacking bricks horizontally or vertically.",
-  aiInstructions: "A box is a container for other bricks. A box cannot contain other boxes as children. A box should contain at least 2 bricks to be useful, otherwise use a simple brick instead.",
+  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",
@@ -50,27 +88,27 @@ var manifest = defineBrickManifest({
   icon: RxBox,
   props: defineProps({
     colorPreset: Type.Optional(
-      colorPresetRef({
+      colorPreset({
         title: "Color"
       })
     ),
-    direction: directionRef({
+    direction: direction({
       default: "flex-col",
       title: "Direction",
       description: "Direction of the box layout"
     }),
     justifyContent: Type.Optional(
-      justifyContentRef({
+      justifyContent({
         default: "justify-center"
       })
     ),
     alignItems: Type.Optional(
-      alignItemsRef({
+      alignItems({
         default: "items-stretch"
       })
     ),
     gap: Type.Optional(
-      cssLengthRef({
+      cssLength({
         title: "Gap",
         default: "1rem",
         description: "Gap between children bricks.",
@@ -80,7 +118,7 @@ var manifest = defineBrickManifest({
       })
     ),
     padding: Type.Optional(
-      cssLengthRef({
+      cssLength({
         default: "1rem",
         description: "Padding inside the box.",
         "ai:instructions": "Use only a single value like '1rem' or '10px'",
@@ -97,14 +135,12 @@ var manifest = defineBrickManifest({
         "ui:styleId": "styles:wrap"
       })
     ),
-    rounding: Type.Optional(
-      roundingRef({
-        default: "rounded-md"
-      })
-    ),
-    border: Type.Optional(borderRef()),
-    shadow: Type.Optional(shadowRef()),
-    loop: Type.Optional(loopRef()),
+    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",
@@ -130,125 +166,135 @@ var manifest = defineBrickManifest({
   })
 });
 var examples = [
+  // BASIC LAYOUTS
   {
-    description: "A simple box with 2 text bricks aligned vertically",
+    description: "Simple vertical layout - Basic text and image combination",
     type: "box",
     props: {
       direction: "flex-col",
       gap: "1rem",
+      padding: "1.5rem",
       $children: [
         {
           type: "text",
           props: {
-            $children: [
-              {
-                type: "text",
-                props: {
-                  content: "Hello World"
-                }
-              },
-              {
-                type: "text",
-                props: {
-                  content: "Hello World"
-                }
-              }
-            ]
+            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: "A horizontal box with wrapping enabled - images will wrap to new rows if they overflow",
+    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: "Placeholder Image"
+            alt: "Gallery image 1"
           }
         },
         {
           type: "image",
           props: {
             src: "https://via.placeholder.com/150",
-            alt: "Placeholder Image"
+            alt: "Gallery image 2"
           }
         },
         {
           type: "image",
           props: {
             src: "https://via.placeholder.com/150",
-            alt: "Placeholder Image"
+            alt: "Gallery image 3"
           }
         },
         {
           type: "image",
           props: {
             src: "https://via.placeholder.com/150",
-            alt: "Placeholder Image"
-          }
-        },
-        {
-          type: "image",
-          props: {
-            src: "https://via.placeholder.com/150",
-            alt: "Placeholder Image"
+            alt: "Gallery image 4"
           }
         }
       ]
     }
   },
+  // STYLED CONTAINERS
   {
-    description: "A vertical box with 2 text bricks and 1 image",
+    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: "Hello World"
+            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/150",
-            alt: "Placeholder Image"
+            src: "https://via.placeholder.com/400x250",
+            alt: "Technology trends"
           }
         },
         {
-          type: "text",
+          type: "button",
           props: {
-            content: "Hello World"
+            label: "Read Full Article",
+            link: "/articles/tech-trends"
           }
         }
       ]
     }
   },
+  // DYNAMIC CONTENT EXAMPLES
   {
-    description: "Employee directory using allEmployees query with vertical layout",
+    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"
-      },
+      colorPreset: { color: "neutral-100" },
       rounding: "rounded-lg",
-      loop: {
-        over: "allEmployees"
-      },
+      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: {
@@ -256,27 +302,28 @@ var examples = [
           }
         },
         {
-          type: "image",
+          type: "button",
           props: {
-            src: "{{allEmployees.photo}}",
-            alt: "Photo of {{allEmployees.name}}"
+            label: "Contact {{allEmployees.name}}",
+            link: "mailto:{{allEmployees.email}}"
           }
         }
       ]
     }
   },
   {
-    description: "Blog posts grid using blogPosts query with horizontal cards",
+    description: "Blog post cards with horizontal layout - Great for article previews",
     type: "box",
     props: {
       direction: "flex-row",
       gap: "2rem",
-      padding: "1rem",
+      padding: "1.5rem",
       justifyContent: "justify-start",
       alignItems: "items-stretch",
-      loop: {
-        over: "blogPosts"
-      },
+      colorPreset: { color: "secondary-50" },
+      rounding: "rounded-lg",
+      shadow: "shadow-sm",
+      loop: { over: "blogPosts" },
       $children: [
         {
           type: "image",
@@ -290,29 +337,31 @@ var examples = [
           props: {
             content: "<h4>{{blogPosts.title}}</h4><p>{{blogPosts.excerpt}}</p><p><em>By {{blogPosts.author}} \u2022 {{blogPosts.publishDate}}</em></p>"
           }
+        },
+        {
+          type: "button",
+          props: {
+            label: "Read More",
+            link: "/blog/{{blogPosts.slug}}"
+          }
         }
       ]
     }
   },
   {
-    description: "Featured products showcase using featuredProducts query",
+    description: "Product showcase cards with pricing - Perfect for e-commerce displays",
     type: "box",
     props: {
       direction: "flex-col",
       gap: "1rem",
       padding: "1.5rem",
-      colorPreset: {
-        color: "primary-50"
-      },
-      border: {
-        width: "border",
-        color: "border-primary-200"
-      },
+      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"
-      },
+      loop: { over: "featuredProducts" },
       $children: [
         {
           type: "image",
@@ -330,15 +379,16 @@ var examples = [
         {
           type: "button",
           props: {
-            text: "Add to Cart",
+            label: "Add to Cart",
             link: "/cart/add/{{featuredProducts.id}}"
           }
         }
       ]
     }
   },
+  // RESPONSIVE GRID LAYOUTS
   {
-    description: "Team members horizontal layout with wrapping - members will wrap to multiple rows on smaller screens",
+    description: "Team members with wrapping - Responsive grid that adapts to screen size",
     type: "box",
     props: {
       direction: "flex-row",
@@ -346,13 +396,10 @@ var examples = [
       padding: "2rem",
       wrap: true,
       justifyContent: "justify-center",
-      alignItems: "items-center",
-      colorPreset: {
-        color: "secondary-100"
-      },
-      loop: {
-        over: "teamMembers"
-      },
+      alignItems: "items-start",
+      colorPreset: { color: "secondary-100" },
+      rounding: "rounded-lg",
+      loop: { over: "teamMembers" },
       $children: [
         {
           type: "image",
@@ -364,31 +411,41 @@ var examples = [
         {
           type: "text",
           props: {
-            content: "<h4>{{teamMembers.fullName}}</h4><p>{{teamMembers.role}}</p><p>{{teamMembers.bio}}</p>"
+            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 using upcomingEvents query with accent styling",
+    description: "Event listings with accent styling - Prominent call-to-action design",
     type: "box",
     props: {
       direction: "flex-col",
       gap: "1.25rem",
       padding: "2.5rem",
-      colorPreset: {
-        color: "accent-100"
-      },
-      border: {
-        width: "border-2",
-        color: "border-accent-300"
-      },
+      alignItems: "items-center",
+      colorPreset: { color: "accent-100" },
+      border: { width: "border-2", color: "border-accent-300" },
       rounding: "rounded-lg",
-      loop: {
-        over: "upcomingEvents"
-      },
+      shadow: "shadow-lg",
+      loop: { over: "upcomingEvents" },
       $children: [
+        {
+          type: "icon",
+          props: {
+            icon: "mdi:calendar-event",
+            size: "2rem",
+            color: "#f59e0b"
+          }
+        },
         {
           type: "text",
           props: {
@@ -398,15 +455,16 @@ var examples = [
         {
           type: "button",
           props: {
-            text: "Register Now",
+            label: "Register Now",
             link: "/events/{{upcomingEvents.slug}}/register"
           }
         }
       ]
     }
   },
+  // TESTIMONIALS & REVIEWS
   {
-    description: "Testimonials carousel using customerTestimonials query",
+    description: "Customer testimonials with star ratings - Social proof presentation",
     type: "box",
     props: {
       direction: "flex-col",
@@ -414,19 +472,23 @@ var examples = [
       padding: "3rem",
       justifyContent: "justify-center",
       alignItems: "items-center",
-      colorPreset: {
-        color: "neutral-50"
-      },
+      colorPreset: { color: "neutral-50" },
       shadow: "shadow-lg",
       rounding: "rounded-2xl",
-      loop: {
-        over: "customerTestimonials"
-      },
+      loop: { over: "customerTestimonials" },
       $children: [
+        {
+          type: "icon",
+          props: {
+            icon: "mdi:format-quote-open",
+            size: "2rem",
+            color: "#6b7280"
+          }
+        },
         {
           type: "text",
           props: {
-            content: '<blockquote>"{{customerTestimonials.quote}}"</blockquote><p><strong>{{customerTestimonials.customerName}}</strong></p><p>{{customerTestimonials.company}} \u2022 {{customerTestimonials.position}}</p>'
+            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}} \u2022 {{customerTestimonials.position}}</p>'
           }
         },
         {
@@ -441,17 +503,18 @@ var examples = [
     }
   },
   {
-    description: "Portfolio projects using portfolioProjects query with horizontal layout",
+    description: "Portfolio project showcase - Creative work presentation with client details",
     type: "box",
     props: {
       direction: "flex-row",
       gap: "1.5rem",
-      padding: "1rem",
+      padding: "2rem",
       alignItems: "items-start",
       justifyContent: "justify-start",
-      loop: {
-        over: "portfolioProjects"
-      },
+      colorPreset: { color: "primary-50" },
+      border: { width: "border", color: "border-primary-200" },
+      rounding: "rounded-lg",
+      loop: { over: "portfolioProjects" },
       $children: [
         {
           type: "image",
@@ -463,36 +526,31 @@ var examples = [
         {
           type: "text",
           props: {
-            content: "<h4>{{portfolioProjects.projectName}}</h4><p>{{portfolioProjects.client}}</p><p>{{portfolioProjects.category}} \u2022 {{portfolioProjects.year}}</p><p>{{portfolioProjects.shortDescription}}</p>"
+            content: "<h4>{{portfolioProjects.projectName}}</h4><p><strong>{{portfolioProjects.client}}</strong></p><p>{{portfolioProjects.category}} \u2022 {{portfolioProjects.year}}</p><p>{{portfolioProjects.shortDescription}}</p>"
           }
         },
         {
           type: "button",
           props: {
-            text: "View Project",
+            label: "View Project",
             link: "/portfolio/{{portfolioProjects.slug}}"
           }
         }
       ]
     }
   },
+  // NEWS & ARTICLES
   {
-    description: "News articles using latestNews query with vertical stacking",
+    description: "News article previews with categories - Clean editorial layout",
     type: "box",
     props: {
       direction: "flex-col",
-      gap: "2rem",
+      gap: "1.5rem",
       padding: "2rem",
-      colorPreset: {
-        color: "primary-100"
-      },
-      border: {
-        width: "border",
-        color: "border-primary-300"
-      },
-      loop: {
-        over: "latestNews"
-      },
+      colorPreset: { color: "neutral-100" },
+      border: { width: "border", color: "border-neutral-300" },
+      rounding: "rounded-md",
+      loop: { over: "latestNews" },
       $children: [
         {
           type: "text",
@@ -501,16 +559,18 @@ var examples = [
           }
         },
         {
-          type: "text",
+          type: "button",
           props: {
-            content: "<a href='/news/{{latestNews.slug}}'>Read full article \u2192</a>"
+            label: "Read Full Article",
+            link: "/news/{{latestNews.slug}}"
           }
         }
       ]
     }
   },
+  // SERVICE OFFERINGS
   {
-    description: "Service offerings using companyServices query with centered layout",
+    description: "Service packages with icons and pricing - Professional service presentation",
     type: "box",
     props: {
       direction: "flex-col",
@@ -518,33 +578,29 @@ var examples = [
       padding: "2rem",
       justifyContent: "justify-center",
       alignItems: "items-center",
-      colorPreset: {
-        color: "secondary-200"
-      },
+      colorPreset: { color: "secondary-200" },
       rounding: "rounded-xl",
       shadow: "shadow-md",
-      loop: {
-        over: "companyServices"
-      },
+      loop: { over: "companyServices" },
       $children: [
         {
           type: "icon",
           props: {
             icon: "{{companyServices.iconName}}",
-            size: "2rem",
+            size: "2.5rem",
             color: "{{companyServices.iconColor}}"
           }
         },
         {
           type: "text",
           props: {
-            content: "<h4>{{companyServices.serviceName}}</h4><p>{{companyServices.description}}</p><p><strong>Starting at ${{companyServices.price}}</strong></p>"
+            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: {
-            text: "Learn More",
+            label: "Learn More",
             link: "/services/{{companyServices.serviceSlug}}"
           }
         }
@@ -557,4 +613,4 @@ export {
   manifest,
   examples
 };
-//# sourceMappingURL=chunk-3KLRW4I2.js.map
+//# sourceMappingURL=chunk-LGDDJJHK.js.map