@upstart.gg/sdk 0.0.135 → 0.0.137

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

@@ -1,22 +1,61 @@
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
-import { textContentRef } from "../props/text";
+import { textContent } from "../props/text";
 import { BsAlphabetUppercase } from "react-icons/bs";
 import type { BrickProps } from "../props/types";
 import { Type } from "@sinclair/typebox";
-import { shadowRef, textShadowRef } from "../props/effects";
-import { borderRef, roundingRef } from "../props/border";
-import { colorPresetRef } from "../props/color-preset";
-import { alignItemsRef, justifyContentRef } from "../props/align";
-import { cssLengthRef } from "../props/css-length";
+import { shadow, textShadow } from "../props/effects";
+import { border, rounding } from "../props/border";
+import { colorPreset } from "../props/color-preset";
+import { alignItems, justifyContent } from "../props/align";
+import { cssLength } from "../props/css-length";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "hero",
   category: "basic",
   name: "Hero",
   description: "A big textual element for home pages.",
-  aiInstructions: `Displays a large text element that can be used to display a title and an optional tagline.
-Typically used on home pages to grab the user's attention. It's better NOT to provide the colorPreset prop so that the Hero inherits the background of its parent box or section.`,
+  aiInstructions: `PURPOSE
+A prominent textual block (main heading + optional tagline) used to introduce a page, product, event, company, or dynamic entity.
+
+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).
+
+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).
+
+LAYOUT & SPACING
+• 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.
+
+TYPOGRAPHY
+• 'content' should typically render ONE main heading concept (avoid stacking multiple unrelated headings). Use <br/> to split lines when stylistic.
+• Avoid overly long taglines (>140 chars).
+
+DYNAMIC DATA
+• You may interpolate page queries fields fields: {{company.name}}, {{product.name}}, etc.
+• 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.
+
+DON'TS
+✗ Don't add properties that are not in the schema.
+✗ Don't wrap everything with extraneous HTML containers.
+✗ Don't use colorPreset plus a conflicting parent background rationale—choose one.
+
+DO
+✓ Keep content focused.
+✓ Use semantic colors thoughtfully.
+✓ Use gradientDirection ONLY with gradient presets.
+✓ Provide accessible plain text when not using HTML tags.
+`,
   icon: BsAlphabetUppercase,
 
   defaultWidth: { desktop: "60dvw", mobile: "auto" },
@@ -25,29 +64,29 @@ Typically used on home pages to grab the user's attention. It's better NOT to pr
   staticClasses: "flex-col",
 
   props: defineProps({
-    content: textContentRef({
+    content: textContent({
       title: "Hero title",
       default: "<h1 style='text-align:center'>Lorem Ipsum<br />dolor sit amet</h1>",
     }),
     tagline: Type.Optional(
-      textContentRef({
+      textContent({
         title: "Hero tagline",
-        default: "<p style='text-align:center'>Use our platform to build your business with confidence.</p>",
+        // default: "<p style='text-align:center'>Use our platform to build your business with confidence.</p>",
       }),
     ),
     colorPreset: Type.Optional(
-      colorPresetRef({
+      colorPreset({
         title: "Color",
       }),
     ),
 
     textShadow: Type.Optional(
-      textShadowRef({
+      textShadow({
         default: "text-shadow-sm",
       }),
     ),
     padding: Type.Optional(
-      cssLengthRef({
+      cssLength({
         default: "6rem",
         description: "Padding inside the hero.",
         "ai:instructions": "Use only a single value like '1rem' or '10px'",
@@ -57,20 +96,18 @@ Typically used on home pages to grab the user's attention. It's better NOT to pr
         "ui:styleId": "styles:padding",
       }),
     ),
-    rounding: Type.Optional(
-      roundingRef({
-        default: "rounded-md",
-      }),
-    ),
-    border: Type.Optional(borderRef()),
-    shadow: Type.Optional(shadowRef()),
+    rounding: rounding({
+      default: "rounded-md",
+    }),
+    border: Type.Optional(border()),
+    shadow: Type.Optional(shadow()),
     justifyContent: Type.Optional(
-      justifyContentRef({
+      justifyContent({
         default: "justify-center",
       }),
     ),
     alignItems: Type.Optional(
-      alignItemsRef({
+      alignItems({
         default: "items-center",
       }),
     ),
@@ -79,11 +116,7 @@ Typically used on home pages to grab the user's attention. It's better NOT to pr
 
 export type Manifest = typeof manifest;
 
-export const examples: {
-  description: string;
-  type: string;
-  props: BrickProps<Manifest>["brick"]["props"];
-}[] = [
+export const examples: BrickExample<Manifest>[] = [
   {
     description: "Simple welcome hero with primary background",
     type: "hero",
@@ -148,28 +181,29 @@ export const examples: {
     },
   },
   {
-    description: "Restaurant hero with warm colors and rounded design",
+    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: "orange-600",
+        color: "accent-600",
       },
       rounding: "rounded-xl",
       shadow: "shadow-lg",
     },
   },
   {
-    description: "Tech company hero with success gradient and modern styling",
+    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: "success-500",
+        color: "secondary-gradient-400",
         gradientDirection: "bg-gradient-to-r",
       },
       textShadow: "text-shadow-lg",
@@ -180,14 +214,14 @@ export const examples: {
     },
   },
   {
-    description: "Medical practice hero with trust-inspiring design",
+    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: "blue-500",
+        color: "primary-500",
       },
       rounding: "rounded-lg",
       justifyContent: "justify-start",
@@ -195,14 +229,15 @@ export const examples: {
     },
   },
   {
-    description: "Creative agency hero with warning accent and diagonal gradient",
+    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",
       padding: "3rem",
       colorPreset: {
-        color: "warning-400",
+        color: "accent-gradient-300",
         gradientDirection: "bg-gradient-to-tl",
       },
       shadow: "shadow-xl",
@@ -213,14 +248,14 @@ export const examples: {
     },
   },
   {
-    description: "Fitness studio hero with danger color and strong presence",
+    description: "Fitness studio hero with accent strong presence (mapping former 'danger')",
     type: "hero",
     props: {
       content: "Transform Your Body",
       tagline: "High-intensity training programs that deliver real results",
       padding: "5rem",
       colorPreset: {
-        color: "danger-600",
+        color: "accent-600",
       },
       textShadow: "text-shadow-md",
       rounding: "rounded-2xl",
@@ -246,6 +281,54 @@ export const examples: {
       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",
+      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",
+    type: "hero",
+    props: {
+      content: "Introducing {{product.name}}",
+      tagline: "{{product.shortTagline}}",
+      padding: "5rem",
+      colorPreset: { color: "accent-gradient-400", gradientDirection: "bg-gradient-to-r" },
+      textShadow: "text-shadow-md",
+    },
+  },
   {
     description: "Dynamic company hero using business query data",
     type: "hero",

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

@@ -4,6 +4,7 @@ import type { BrickProps } from "../props/types";
 import { BsCodeSquare } from "react-icons/bs";
 
 import { Type } from "@sinclair/typebox";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "html",
@@ -35,11 +36,7 @@ export const manifest = defineBrickManifest({
 
 export type Manifest = typeof manifest;
 
-export const examples: {
-  description: string;
-  type: string;
-  props: BrickProps<Manifest>["brick"]["props"];
-}[] = [
+export const examples: BrickExample<Manifest>[] = [
   {
     description: "A tally form",
     type: "html",

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

@@ -1,29 +1,72 @@
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
 import { PiConfetti } from "react-icons/pi";
-import { iconRef, urlOrPageIdRef } from "../props/string";
-import type { BrickProps } from "../props/types";
+import { icon, urlOrPageId } from "../props/string";
 import { Type } from "@sinclair/typebox";
-import { cssLengthRef } from "../props/css-length";
-import { colorRef } from "../props/color";
-import { loopRef } from "../props/dynamic";
+import { cssLength } from "../props/css-length";
+import { color } from "../props/color";
+import { loop } from "../props/dynamic";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "icon",
   name: "Icon",
   category: "basic",
   description: "An icon.",
-  aiInstructions: "Uses iconify references",
+  aiInstructions: `Use the icon component for adding visual symbols and interactive elements throughout your design.
+
+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)
+
+ICON SELECTION:
+- Use Iconify format: "mdi:icon-name", "lucide:icon-name", "heroicons:icon-name"
+- Examples: "mdi:heart", "lucide:star", "heroicons:envelope", "mdi:facebook"
+
+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:
+- Add link property for clickable icons
+- External links: "https://facebook.com/yourpage"
+- Email links: "mailto:contact@example.com"
+- Phone links: "tel:+1234567890"
+- Internal pages: "/contact", "/about"
+
+DYNAMIC CONTENT:
+- Use template variables: icon: "{{ service.iconName }}"
+- Dynamic colors: color: "{{ brand.primaryColor }}"
+- Loop over data for icon lists or social media sets
+
+AVOID:
+- Oversized icons that dominate content
+- Poor contrast (light icons on light backgrounds)
+- Inconsistent icon styles within the same design
+- Missing alt text context when icons convey important information`,
   resizable: false,
   staticClasses: "!grow-0",
   icon: PiConfetti,
   props: defineProps(
     {
-      icon: iconRef({
+      icon: icon({
         default: "mdi:heart",
       }),
       size: Type.Optional(
-        cssLengthRef({
+        cssLength({
           title: "Size",
           description: "The size of the icon. Can be a CSS length value (e.g. '2em', '24px')",
           default: "1em",
@@ -32,14 +75,14 @@ export const manifest = defineBrickManifest({
         }),
       ),
       color: Type.Optional(
-        colorRef({
+        color({
           title: "Color",
           default: "currentColor",
           "ui:hide-color-label": true,
         }),
       ),
-      link: Type.Optional(urlOrPageIdRef({ title: "Link" })),
-      loop: Type.Optional(loopRef()),
+      link: Type.Optional(urlOrPageId({ title: "Link" })),
+      loop: Type.Optional(loop()),
     },
     { noGrow: true },
   ),
@@ -47,28 +90,66 @@ export const manifest = defineBrickManifest({
 
 export type Manifest = typeof manifest;
 
-export const examples: {
-  description: string;
-  type: string;
-  props: BrickProps<Manifest>["brick"]["props"];
-}[] = [
+export const examples: BrickExample<Manifest>[] = [
+  // BASIC ICONS
   {
-    description: "Large heart icon with inherited color and size",
+    description: "Heart icon with default styling - Inherits text color and size",
     type: "icon",
     props: {
       icon: "mdi:heart",
     },
   },
   {
-    description: "Shopping cart icon",
+    description: "Star icon with gold color - Perfect for ratings and reviews",
     type: "icon",
     props: {
-      icon: "mdi:cart",
+      icon: "mdi:star",
       size: "1.2em",
+      color: "#fbbf24",
+    },
+  },
+
+  // NAVIGATION ICONS
+  {
+    description: "Menu hamburger icon - Mobile navigation toggle",
+    type: "icon",
+    props: {
+      icon: "mdi:menu",
+      size: "1.8em",
+      color: "#374151",
+    },
+  },
+  {
+    description: "Search icon - Search functionality indicator",
+    type: "icon",
+    props: {
+      icon: "mdi:magnify",
+      size: "1.2em",
+      color: "#6b7280",
+    },
+  },
+  {
+    description: "Shopping cart icon - E-commerce navigation",
+    type: "icon",
+    props: {
+      icon: "mdi:cart",
+      size: "1.4em",
+      color: "#059669",
     },
   },
   {
-    description: "Social media icon with blue color and link",
+    description: "Arrow right icon - Navigation and call-to-action",
+    type: "icon",
+    props: {
+      icon: "mdi:arrow-right",
+      size: "1.1em",
+      color: "currentColor",
+    },
+  },
+
+  // SOCIAL MEDIA ICONS
+  {
+    description: "Facebook icon with official brand color and link",
     type: "icon",
     props: {
       icon: "mdi:facebook",
@@ -78,16 +159,39 @@ export const examples: {
     },
   },
   {
-    description: "Warning icon with orange color for alerts",
+    description: "Twitter/X icon with link - Social media engagement",
     type: "icon",
     props: {
-      icon: "mdi:alert-triangle",
-      size: "1.8em",
-      color: "#f59e0b",
+      icon: "mdi:twitter",
+      size: "1.5em",
+      color: "#000000",
+      link: "https://x.com/yourhandle",
+    },
+  },
+  {
+    description: "Instagram icon with gradient-inspired color",
+    type: "icon",
+    props: {
+      icon: "mdi:instagram",
+      size: "1.5em",
+      color: "#e1306c",
+      link: "https://instagram.com/yourprofile",
+    },
+  },
+  {
+    description: "LinkedIn icon with professional blue",
+    type: "icon",
+    props: {
+      icon: "mdi:linkedin",
+      size: "1.5em",
+      color: "#0077b5",
+      link: "https://linkedin.com/company/yourcompany",
     },
   },
+
+  // CONTACT INFORMATION ICONS
   {
-    description: "Email contact icon with link",
+    description: "Email icon with link - Contact information",
     type: "icon",
     props: {
       icon: "mdi:email",
@@ -97,68 +201,143 @@ export const examples: {
     },
   },
   {
-    description: "Phone icon with green color",
+    description: "Phone icon with clickable link - Direct calling",
     type: "icon",
     props: {
       icon: "mdi:phone",
       size: "1.4em",
       color: "#10b981",
+      link: "tel:+1234567890",
     },
   },
   {
-    description: "Location pin icon with red color",
+    description: "Location marker icon - Address and directions",
     type: "icon",
     props: {
       icon: "mdi:map-marker",
-      size: "2.2em",
+      size: "1.6em",
       color: "#ef4444",
     },
   },
+
+  // STATUS & FEEDBACK ICONS
   {
-    description: "Twitter/X icon with custom color and link",
+    description: "Success checkmark icon - Confirmation and completion",
     type: "icon",
     props: {
-      icon: "mdi:twitter",
-      size: "1.6em",
-      color: "#000000",
-      link: "https://x.com/yourhandle",
+      icon: "mdi:check-circle",
+      size: "1.5em",
+      color: "#10b981",
     },
   },
   {
-    description: "Star rating icon with gold color",
+    description: "Warning icon - Alerts and cautions",
     type: "icon",
     props: {
-      icon: "mdi:star",
-      size: "1.2em",
-      color: "#fbbf24",
+      icon: "mdi:alert-triangle",
+      size: "1.5em",
+      color: "#f59e0b",
     },
   },
   {
-    description: "Download icon with link and purple color",
+    description: "Error icon - Problems and failures",
     type: "icon",
     props: {
-      icon: "mdi:download",
+      icon: "mdi:alert-circle",
       size: "1.5em",
+      color: "#ef4444",
+    },
+  },
+  {
+    description: "Information icon - Help and guidance",
+    type: "icon",
+    props: {
+      icon: "mdi:information",
+      size: "1.4em",
+      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: "Menu hamburger icon for navigation",
+    description: "Share icon - Content sharing functionality",
     type: "icon",
     props: {
-      icon: "mdi:menu",
-      size: "1.8em",
+      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: "Search icon with dark color",
+    description: "Large security shield icon - Trust and safety messaging",
     type: "icon",
     props: {
-      icon: "mdi:magnify",
-      size: "1.1em",
-      color: "#1f2937",
+      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}}",
     },
   },
 ];