@upstart.gg/sdk 0.0.137 → 0.0.139

package/src/shared/bricks/manifests/hero.manifest.ts

@@ -10,6 +10,8 @@ import { colorPreset } from "../props/color-preset";
 import { alignItems, justifyContent } from "../props/align";
 import { cssLength } from "../props/css-length";
 import type { BrickExample } from "./_types";
+import { backgroundColor } from "../props/background";
+import { color } from "../props/color";
 
 export const manifest = defineBrickManifest({
   type: "hero",
@@ -23,14 +25,14 @@ STRUCTURE
 1. Always supply 'content' (can be plain text or simple HTML like <h1>, <strong>, <br/>).
 2. 'tagline' is optional. Prefer concise value (1 short sentence). Omit if not needed.
 3. Do NOT add buttons, images, forms, lists, or unrelated HTML here (use dedicated bricks for that).
+4. Hero should be placed in vertical sections, except for very specific cases.
 
 COLOR & BACKGROUND
-• Prefer omitting colorPreset so the hero inherits its parent layout background.
-• When you need emphasis use semantic presets: primary-, secondary-, accent-, neutral-, base-*** or gradient variants like primary-gradient-400 (then add gradientDirection).
-• NEVER invent tokens like success-, warning-, danger-, blue-, orange- (they don't exist). Map them to semantic sets (e.g. success -> secondary, warning -> accent, danger -> accent or primary, blue -> primary, orange -> accent).
+- Prefer omitting "colorPreset" so the hero inherits its parent section background.
+- If you do set "colorPreset", ensure sufficient contrast between text and background.
 
 LAYOUT & SPACING
-• Use padding suited to visual weight: landing hero: 5–8rem desktop; simple page intro: 2–4rem.
+• Use padding suited to visual weight: landing hero: 5-8rem desktop; simple page intro: 2-4rem.
 • You may provide a mobile override via mobileProps (e.g. smaller padding such as 2rem).
 • Keep justifyContent + alignItems consistent (usually center/center or start/start). Avoid mixing center with start.
 
@@ -43,7 +45,7 @@ DYNAMIC DATA
 • Ensure dynamic tokens exist in the referenced query context. Don't fabricate field names.
 
 RESPONSIVE
-• Use mobileProps only for necessary reductions (padding, alignment). Do not duplicate unchanged properties.
+• Use "mobileProps" only for necessary reductions (padding, alignment). Do not duplicate unchanged properties.
 
 DON'TS
 ✗ Don't add properties that are not in the schema.
@@ -52,9 +54,7 @@ DON'TS
 
 DO
 ✓ Keep content focused.
-✓ Use semantic colors thoughtfully.
-✓ Use gradientDirection ONLY with gradient presets.
-✓ Provide accessible plain text when not using HTML tags.
+✓ Wrap tagline in <p> for alignment control.
 `,
   icon: BsAlphabetUppercase,
 
@@ -74,12 +74,17 @@ DO
         // default: "<p style='text-align:center'>Use our platform to build your business with confidence.</p>",
       }),
     ),
-    colorPreset: Type.Optional(
-      colorPreset({
-        title: "Color",
+    backgroundColor: Type.Optional(
+      backgroundColor({
+        title: "Background color",
+      }),
+    ),
+    color: Type.Optional(
+      color({
+        title: "Text color",
+        default: "text-inherit",
       }),
     ),
-
     textShadow: Type.Optional(
       textShadow({
         default: "text-shadow-sm",
@@ -99,7 +104,11 @@ DO
     rounding: rounding({
       default: "rounded-md",
     }),
-    border: Type.Optional(border()),
+    border: Type.Optional(
+      border({
+        "ai:hidden": true,
+      }),
+    ),
     shadow: Type.Optional(shadow()),
     justifyContent: Type.Optional(
       justifyContent({
@@ -118,15 +127,12 @@ export type Manifest = typeof manifest;
 
 export const examples: BrickExample<Manifest>[] = [
   {
-    description: "Simple welcome hero with primary background",
+    description: "Simple welcome hero with primary background, centered",
     type: "hero",
     props: {
       content: "Welcome to Our Platform",
-      tagline: "The future of productivity starts here",
+      tagline: "<p style='text-align:center'>The future of productivity starts here</p>",
       padding: "3rem",
-      colorPreset: {
-        color: "primary-400",
-      },
     },
   },
   {
@@ -134,12 +140,8 @@ export const examples: BrickExample<Manifest>[] = [
     type: "hero",
     props: {
       content: "Build Something Amazing",
-      tagline: "Turn your ideas into reality with our cutting-edge tools",
+      tagline: "<p style='text-align:center'>Turn your ideas into reality with our cutting-edge tools</p>",
       padding: "3rem",
-      colorPreset: {
-        color: "primary-500",
-        gradientDirection: "bg-gradient-to-br",
-      },
     },
   },
   {
@@ -147,198 +149,52 @@ export const examples: BrickExample<Manifest>[] = [
     type: "hero",
     props: {
       content: "Building Tomorrow Today",
-      tagline: "Quality construction services for residential and commercial projects",
-      padding: "3rem",
-    },
-  },
-  {
-    description: "Fashion brand hero with modern appeal",
-    type: "hero",
-    props: {
-      content: "Express Your Style",
-      tagline: "Contemporary fashion that speaks to your individuality",
-      padding: "6rem",
-    },
-  },
-  {
-    description: "Law firm hero with authoritative tone",
-    type: "hero",
-    props: {
-      content: "Justice You Can Trust",
-      tagline: "Experienced legal representation for individuals and businesses",
-      padding: "6rem",
-      colorPreset: {
-        color: "neutral-800",
-      },
-    },
-  },
-  {
-    description: "Photography studio hero with artistic flair",
-    type: "hero",
-    props: {
-      content: "Capturing Life's Moments",
-      tagline: "Professional photography services for weddings, portraits, and events",
-    },
-  },
-  {
-    description: "Restaurant hero with warm colors and rounded design (accent mapping for former 'orange')",
-    type: "hero",
-    props: {
-      content: "Authentic Italian Cuisine",
-      tagline: "Fresh ingredients, traditional recipes, unforgettable flavors",
-      padding: "4rem",
-      colorPreset: {
-        color: "accent-600",
-      },
-      rounding: "rounded-xl",
-      shadow: "shadow-lg",
-    },
-  },
-  {
-    description:
-      "Tech company hero with secondary gradient (mapped from former 'success') and modern styling",
-    type: "hero",
-    props: {
-      content: "Innovation Redefined",
-      tagline: "Pushing the boundaries of what's possible with AI technology",
-      padding: "5rem",
-      colorPreset: {
-        color: "secondary-gradient-400",
-        gradientDirection: "bg-gradient-to-r",
-      },
-      textShadow: "text-shadow-lg",
-      border: {
-        width: "border-2",
-        color: "border-success-300",
-      },
-    },
-  },
-  {
-    description: "Medical practice hero with trust-inspiring design (primary mapping for former 'blue')",
-    type: "hero",
-    props: {
-      content: "Your Health, Our Priority",
-      tagline: "Comprehensive healthcare services with compassionate care",
-      padding: "4rem",
-      colorPreset: {
-        color: "primary-500",
-      },
-      rounding: "rounded-lg",
-      justifyContent: "justify-start",
-      alignItems: "items-start",
-    },
-  },
-  {
-    description:
-      "Creative agency hero with accent gradient (mapped from former 'warning') and diagonal gradient",
-    type: "hero",
-    props: {
-      content: "Creative Solutions",
-      tagline: "Bold designs that make your brand unforgettable",
+      tagline:
+        "<p style='text-align:center'>Quality construction services for residential and commercial projects</p>",
       padding: "3rem",
-      colorPreset: {
-        color: "accent-gradient-300",
-        gradientDirection: "bg-gradient-to-tl",
-      },
-      shadow: "shadow-xl",
-      border: {
-        width: "border",
-        color: "border-warning-200",
-      },
     },
   },
   {
-    description: "Fitness studio hero with accent strong presence (mapping former 'danger')",
+    description: "Fitness studio hero with accent strong presence",
     type: "hero",
     props: {
       content: "Transform Your Body",
-      tagline: "High-intensity training programs that deliver real results",
+      tagline: "<p style='text-align:center'>High-intensity training programs that deliver real results</p>",
       padding: "5rem",
-      colorPreset: {
-        color: "accent-600",
-      },
       textShadow: "text-shadow-md",
       rounding: "rounded-2xl",
       justifyContent: "justify-center",
       alignItems: "items-center",
     },
   },
-  {
-    description: "Minimalist hero with neutral tones and subtle effects",
-    type: "hero",
-    props: {
-      content: "Simplicity Perfected",
-      tagline: "Clean design solutions for modern businesses",
-      padding: "8rem",
-      colorPreset: {
-        color: "neutral-100",
-      },
-      shadow: "shadow-sm",
-      border: {
-        width: "border",
-        color: "border-neutral-300",
-      },
-      rounding: "rounded-md",
-    },
-  },
-  {
-    description: "Inverted dark hero using neutral-800 background and left alignment",
-    type: "hero",
-    props: {
-      content: "Experience Powerful Automation",
-      tagline: "Scale operations with intelligent workflows",
-      padding: "5rem",
-      colorPreset: { color: "neutral-800" },
-      justifyContent: "justify-start",
-      alignItems: "items-start",
-      textShadow: "text-shadow-sm",
-    },
-  },
-  {
-    description: "Compact hero without tagline (no colorPreset to inherit parent)",
-    type: "hero",
-    props: {
-      content: "Documentation",
-      padding: "2rem",
-      justifyContent: "justify-start",
-      alignItems: "items-start",
-    },
-  },
   {
     description: "Responsive hero with large desktop padding and reduced mobile padding",
     type: "hero",
     props: {
       content: "All-In-One Platform",
-      tagline: "Design • Launch • Grow",
+      tagline: "<p style='text-align:center'>Design • <i>Launch</i> • Grow</p>",
       padding: "8rem",
-      colorPreset: { color: "primary-gradient-500", gradientDirection: "bg-gradient-to-br" },
     },
     mobileProps: {
-      content: "All-In-One Platform",
       padding: "3rem",
     },
   },
   {
-    description: "Hero using dynamic product dataset with gradient emphasis",
+    description: "Hero using dynamic product dataset with light text shadow for contrast",
     type: "hero",
     props: {
       content: "Introducing {{product.name}}",
-      tagline: "{{product.shortTagline}}",
+      tagline: "<p style='text-align:center'>{{product.shortTagline}}</p>",
       padding: "5rem",
-      colorPreset: { color: "accent-gradient-400", gradientDirection: "bg-gradient-to-r" },
-      textShadow: "text-shadow-md",
+      textShadow: "text-shadow-sm",
     },
   },
   {
-    description: "Dynamic company hero using business query data",
+    description: "Dynamic company hero using business query data; no tagline",
     type: "hero",
     props: {
       content: "Welcome to {{company.name}}",
-      tagline: "{{company.tagline}} - Serving {{company.location}} since {{company.foundedYear}}",
       padding: "4rem",
-      colorPreset: {
-        color: "primary-500",
-      },
     },
   },
   {
@@ -347,12 +203,8 @@ export const examples: BrickExample<Manifest>[] = [
     props: {
       content: "Meet {{employee.fullName}}",
       tagline:
-        "{{employee.position}} at {{employee.department}} - {{employee.yearsExperience}} years of experience",
+        "<p style='text-align:center'>{{employee.position}} at {{employee.department}} - {{employee.yearsExperience}} years of experience</p>",
       padding: "3rem",
-      colorPreset: {
-        color: "secondary-400",
-        gradientDirection: "bg-gradient-to-r",
-      },
     },
   },
   {
@@ -360,88 +212,31 @@ export const examples: BrickExample<Manifest>[] = [
     type: "hero",
     props: {
       content: "Introducing {{product.name}}",
-      tagline: "{{product.description}} - Starting at ${{product.price}}",
+      tagline: "<p style='text-align:center'>{{product.description}} - Starting at ${{product.price}}</p>",
       padding: "5rem",
-      colorPreset: {
-        color: "accent-600",
-      },
-      shadow: "shadow-lg",
-      rounding: "rounded-xl",
     },
   },
   {
-    description: "Dynamic event announcement using event query",
+    description: "Dynamic event announcement using 'allEvents' query, text shadow for contrast",
     type: "hero",
     props: {
-      content: "{{event.title}}",
-      tagline: "Join us on {{event.date}} at {{event.venue}} - {{event.city}}",
+      content: "{{allEvents.title}}",
+      tagline:
+        "<p style='text-align:center'>Join us on {{allEvents.date}} at {{allEvents.venue}} - {{allEvents.city}}</p>",
       padding: "4rem",
-      colorPreset: {
-        color: "primary-400",
-        gradientDirection: "bg-gradient-to-br",
-      },
       textShadow: "text-shadow-md",
     },
   },
   {
-    description: "Dynamic blog post hero using article query",
+    description:
+      "Dynamic blog post hero using article query, alignment to left-center to be able to arrange a brick on its right",
     type: "hero",
     props: {
       content: "{{article.title}}",
-      tagline: "By {{article.author}} • Published {{article.publishDate}} • {{article.readTime}} min read",
+      tagline:
+        "<p style='text-align:center'>By {{article.author}} • Published {{article.publishDate}} • {{article.readTime}} min read</p>",
       padding: "3rem",
-      colorPreset: {
-        color: "neutral-700",
-      },
       justifyContent: "justify-start",
-      alignItems: "items-start",
-    },
-  },
-  {
-    description: "Dynamic service promotion using service query",
-    type: "hero",
-    props: {
-      content: "{{service.name}}",
-      tagline: "{{service.description}} - {{service.duration}} • Starting at ${{service.price}}",
-      padding: "6rem",
-      colorPreset: {
-        color: "secondary-500",
-        gradientDirection: "bg-gradient-to-tl",
-      },
-      border: {
-        width: "border-2",
-        color: "border-secondary-300",
-      },
-    },
-  },
-  {
-    description: "Dynamic property showcase using property query",
-    type: "hero",
-    props: {
-      content: "{{property.address}}",
-      tagline:
-        "${{property.price}} • {{property.bedrooms}} bed, {{property.bathrooms}} bath • {{property.squareFootage}} sq ft",
-      padding: "4rem",
-      colorPreset: {
-        color: "accent-500",
-      },
-      rounding: "rounded-lg",
-      shadow: "shadow-md",
-    },
-  },
-  {
-    description: "Dynamic course announcement using course query",
-    type: "hero",
-    props: {
-      content: "{{course.title}}",
-      tagline:
-        "Learn {{course.subject}} with {{course.instructor}} • {{course.duration}} • {{course.skillLevel}} level",
-      padding: "5rem",
-      colorPreset: {
-        color: "primary-600",
-      },
-      textShadow: "text-shadow-lg",
-      justifyContent: "justify-center",
       alignItems: "items-center",
     },
   },

package/src/shared/bricks/manifests/html.manifest.ts

@@ -5,6 +5,7 @@ import { BsCodeSquare } from "react-icons/bs";
 
 import { Type } from "@sinclair/typebox";
 import type { BrickExample } from "./_types";
+import { grow } from "../props/grow";
 
 export const manifest = defineBrickManifest({
   type: "html",
@@ -31,6 +32,11 @@ export const manifest = defineBrickManifest({
         category: "content",
       },
     }),
+    grow: Type.Optional(
+      grow({
+        default: true,
+      }),
+    ),
   }),
 });
 

package/src/shared/bricks/manifests/icon.manifest.ts

@@ -17,10 +17,8 @@ export const manifest = defineBrickManifest({
 
 WHEN TO USE:
 - Navigation elements (menu, close, arrow buttons)
-- Social media links (Facebook, Twitter, Instagram, LinkedIn)
 - Contact information (email, phone, location markers)
 - User interface actions (search, shopping cart, download)
-- Status indicators (success, warning, error, info)
 - Content enhancement (stars, hearts, thumbs up)
 - Feature highlights (checkmarks, shields, awards)
 
@@ -30,14 +28,11 @@ ICON SELECTION:
 
 SIZING GUIDELINES:
 - size: "1em" for inline text icons, "1.5em" for buttons, "2em" for headers
-- Common sizes: "16px", "20px", "24px", "32px" for pixel precision
 - Use "em" units to scale with text, "px" for fixed sizes
 - Large decorative icons: "3em", "4em", or "48px", "64px"
 
 COLOR OPTIONS:
 - color: "currentColor" inherits text color (default)
-- Hex colors: "#1877f2" (Facebook blue), "#ff0000" (red), "#10b981" (green)
-- Use brand colors for social media icons
 - Match color scheme: warnings (orange/yellow), errors (red), success (green)
 
 INTERACTIVE ICONS:
@@ -45,7 +40,7 @@ INTERACTIVE ICONS:
 - External links: "https://facebook.com/yourpage"
 - Email links: "mailto:contact@example.com"
 - Phone links: "tel:+1234567890"
-- Internal pages: "/contact", "/about"
+- For internal pages, use page IDs: "page_12345"
 
 DYNAMIC CONTENT:
 - Use template variables: icon: "{{ service.iconName }}"
@@ -257,87 +252,4 @@ export const examples: BrickExample<Manifest>[] = [
       color: "#3b82f6",
     },
   },
-
-  // ACTION ICONS
-  {
-    description: "Download icon with link - File downloads",
-    type: "icon",
-    props: {
-      icon: "mdi:download",
-      size: "1.4em",
-      color: "#8b5cf6",
-      link: "/files/brochure.pdf",
-    },
-  },
-  {
-    description: "Share icon - Content sharing functionality",
-    type: "icon",
-    props: {
-      icon: "mdi:share-variant",
-      size: "1.2em",
-      color: "#6b7280",
-    },
-  },
-  {
-    description: "Print icon - Document printing",
-    type: "icon",
-    props: {
-      icon: "mdi:printer",
-      size: "1.3em",
-      color: "#374151",
-    },
-  },
-
-  // LARGE DECORATIVE ICONS
-  {
-    description: "Large security shield icon - Trust and safety messaging",
-    type: "icon",
-    props: {
-      icon: "mdi:shield-check",
-      size: "3em",
-      color: "#10b981",
-    },
-  },
-  {
-    description: "Large rocket icon - Innovation and growth themes",
-    type: "icon",
-    props: {
-      icon: "mdi:rocket",
-      size: "2.5em",
-      color: "#f59e0b",
-    },
-  },
-
-  // DYNAMIC CONTENT EXAMPLES
-  {
-    description: "Dynamic service icon using template variables - Data-driven icons",
-    type: "icon",
-    props: {
-      icon: "{{service.iconName}}",
-      size: "2em",
-      color: "{{service.brandColor}}",
-      link: "/services/{{service.slug}}",
-    },
-  },
-  {
-    description: "Dynamic social media icon with loop - Multiple social platforms",
-    type: "icon",
-    props: {
-      icon: "{{socialLinks.iconName}}",
-      size: "1.6em",
-      color: "{{socialLinks.brandColor}}",
-      link: "{{socialLinks.url}}",
-      loop: { over: "socialLinks" },
-    },
-  },
-  {
-    description: "Team member contact icon - Dynamic contact information",
-    type: "icon",
-    props: {
-      icon: "mdi:email",
-      size: "1.2em",
-      color: "#4f46e5",
-      link: "mailto:{{teamMember.email}}",
-    },
-  },
 ];

package/src/shared/bricks/manifests/image.manifest.ts

@@ -21,10 +21,6 @@ Display a single image with optional framing (padding, rounding, border, shadow,
 REQUIRED
 • 'image.src' and 'image.alt' (alt must be meaningful, not empty; may interpolate page queries fields).
 
-COLOR & BACKGROUND
-• colorPreset is optional – use when you need a frame or tone behind the image (neutral / accent / primary / secondary / base or gradient variants). Omit to keep a transparent/inherited background.
-• Only use gradientDirection when the preset is a gradient token (e.g. primary-gradient-400).
-
 STYLING
 • padding should be a single css length value (like '1rem' or '0.75rem').
 • rounding defaults to a modest radius; override for circular avatars (rounded-full) or strong accent (rounded-xl).
@@ -70,11 +66,7 @@ DO
         "ui:styleId": "styles:padding",
       }),
     ),
-    rounding: Type.Optional(
-      rounding({
-        default: "rounded-md",
-      }),
-    ),
+    rounding: Type.Optional(rounding()),
     border: Type.Optional(border()),
     shadow: Type.Optional(shadow()),
     blurHash: Type.Optional(

package/src/shared/bricks/manifests/images-gallery.manifest.ts

@@ -8,6 +8,7 @@ import { border, rounding } from "../props/border";
 import { loop } from "../props/dynamic";
 import { cssLength } from "../props/css-length";
 import type { BrickExample } from "./_types";
+import { grow } from "../props/grow";
 
 export const manifest = defineBrickManifest({
   type: "images-gallery",
@@ -104,6 +105,13 @@ export const manifest = defineBrickManifest({
     ),
     rounding: rounding(),
     border: Type.Optional(border()),
+
+    // Override grow to default to true
+    grow: Type.Optional(
+      grow({
+        default: true,
+      }),
+    ),
   }),
 });