@upstart.gg/sdk 0.0.135 → 0.0.137

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

@@ -2,20 +2,59 @@ import { Type } from "@sinclair/typebox";
 import { TbCarouselHorizontal } from "react-icons/tb";
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
-import { imageRef } from "../props/image";
-import { string } from "../props/string";
-import type { BrickProps } from "../props/types";
-import { roundingRef } from "../props/border";
-import { colorPresetRef } from "../props/color-preset";
-import { loopRef } from "../props/dynamic";
-import { cssLengthRef } from "../props/css-length";
+import { image } from "../props/image";
+import { rounding } from "../props/border";
+import { colorPreset } from "../props/color-preset";
+import { loop } from "../props/dynamic";
+import { cssLength } from "../props/css-length";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "carousel",
   name: "Carousel",
   description: "An image carousel with navigation arrows and dots or numbers indicator",
-  aiInstructions:
-    "Use this brick to create an image carousel or slideshow. It can display multiple images that users can navigate through using arrows or dots. Each image can have an optional legend or caption. This brick is ideal for showcasing portfolios, product images, or any visual content in an engaging way.",
+  aiInstructions: `Use the carousel component for showcasing sequential visual content with smooth navigation between images.
+
+WHEN TO USE:
+- Product galleries with multiple angles or variations
+- Portfolio showcases with project images
+- Step-by-step tutorials or processes (recipes, instructions)
+- Before/after comparisons or transformations
+- Team member profiles with photos
+- Event photo galleries or highlights
+- Feature demonstrations or software screenshots
+- Travel destinations or location showcases
+
+CONTENT GUIDELINES:
+- Optimal range: 2-8 images for best user engagement (max 12 supported)
+- Single image allowed only as placeholder for future expansion
+- Each image needs: { src: { src, alt }, legend }
+- Alt text MUST be descriptive and never empty
+- Legend text should be concise (≤90 characters) and informative
+- Use empty string ("") for legend only when no caption is intentionally desired
+
+IMAGE CONSISTENCY:
+- Keep aspect ratios similar across slides to prevent layout jumps
+- Avoid mixing very tall portrait with very wide landscape images
+- Use consistent image quality and style throughout carousel
+- Consider loading performance with image optimization
+
+STYLING OPTIONS:
+- padding: "0" for edge-to-edge, "1rem" for standard, "2rem+" for generous spacing
+- borderRadius: "rounded-none" for sharp/modern, "rounded-md" for standard, "rounded-xl" for friendly, "rounded-full" for circular (avatars)
+- colorPreset: Use sparingly - "neutral-50"/"primary-50" for subtle framing, gradients for premium feel
+
+DYNAMIC CONTENT:
+- Use loop property with single template object for data-driven carousels
+- Template variables in src and legend: "{{product.image}}", "{{team.name}} - {{team.role}}"
+- Perfect for: product catalogs, team directories, portfolio projects, event galleries
+
+AVOID:
+- Including unrelated properties (buttons, titles outside legend)
+- Heavy background colors that distract from images
+- Inconsistent aspect ratios that cause jarring transitions
+- More than 12 images (reduces focus and performance)
+- Empty or placeholder alt text (accessibility requirement)`,
   category: "media",
   defaultInspectorTab: "content",
   consumesMultipleQueryRows: true,
@@ -28,12 +67,12 @@ export const manifest = defineBrickManifest({
   icon: TbCarouselHorizontal,
   props: defineProps({
     colorPreset: Type.Optional(
-      colorPresetRef({
+      colorPreset({
         title: "Color",
       }),
     ),
     padding: Type.Optional(
-      cssLengthRef({
+      cssLength({
         default: "1rem",
         description: "Padding inside the carousel.",
         "ai:instructions": "Use only a single value like '1rem' or '10px'",
@@ -46,12 +85,12 @@ export const manifest = defineBrickManifest({
     images: Type.Optional(
       Type.Array(
         Type.Object({
-          src: imageRef({
+          src: image({
             "ui:responsive": "desktop",
             "ui:no-alt-text": true,
             "ui:no-object-options": true,
           }),
-          legend: string("Legend"),
+          legend: Type.String({ title: "Legend" }),
         }),
         {
           title: "Images",
@@ -64,23 +103,20 @@ export const manifest = defineBrickManifest({
       ),
     ),
     borderRadius: Type.Optional(
-      roundingRef({
+      rounding({
         default: "rounded-md",
       }),
     ),
-    loop: Type.Optional(loopRef()),
+    loop: Type.Optional(loop()),
   }),
 });
 
 export type Manifest = typeof manifest;
 
-export const examples: {
-  description: string;
-  type: string;
-  props: BrickProps<Manifest>["brick"]["props"];
-}[] = [
+export const examples: BrickExample<Manifest>[] = [
+  // BASIC CAROUSEL EXAMPLES
   {
-    description: "Basic image carousel with legends",
+    description: "Basic image carousel with legends - Simple content showcase",
     type: "carousel",
     props: {
       images: [
@@ -108,8 +144,10 @@ export const examples: {
       ],
     },
   },
+
+  // PRODUCT & COMMERCIAL
   {
-    description: "Product showcase carousel with rounded corners and padding",
+    description: "Product showcase carousel with rounded corners and padding - E-commerce gallery style",
     type: "carousel",
     props: {
       images: [
@@ -144,11 +182,13 @@ export const examples: {
       ],
       borderRadius: "rounded-xl",
       padding: "2rem",
-      colorPreset: { color: "gray-50" },
+      colorPreset: { color: "neutral-50" },
     },
   },
+
+  // PORTFOLIO & CREATIVE
   {
-    description: "Portfolio carousel with minimal styling",
+    description: "Portfolio carousel with minimal styling - Clean professional presentation",
     type: "carousel",
     props: {
       images: [
@@ -178,8 +218,10 @@ export const examples: {
       padding: "0",
     },
   },
+
+  // EVENTS & EXPERIENCES
   {
-    description: "Event photos carousel with primary color theme",
+    description: "Event photos carousel with primary color theme - Conference or gathering highlights",
     type: "carousel",
     props: {
       images: [
@@ -262,8 +304,10 @@ export const examples: {
       padding: "1rem",
     },
   },
+
+  // TEAM & PEOPLE
   {
-    description: "Team members carousel with blue color scheme",
+    description: "Team members carousel with circular images - Professional team showcase",
     type: "carousel",
     props: {
       images: [
@@ -296,13 +340,15 @@ export const examples: {
           legend: "Emily Chen - Marketing Director",
         },
       ],
-      colorPreset: { color: "blue-50" },
+      colorPreset: { color: "primary-50" },
       borderRadius: "rounded-full",
       padding: "2rem",
     },
   },
+
+  // TUTORIALS & PROCESSES
   {
-    description: "Recipe steps carousel with detailed descriptions",
+    description: "Recipe steps carousel with detailed descriptions - Step-by-step instructional content",
     type: "carousel",
     props: {
       images: [
@@ -335,7 +381,7 @@ export const examples: {
           legend: "Step 4: Season and serve hot",
         },
       ],
-      colorPreset: { color: "orange-50" },
+      colorPreset: { color: "accent-50" },
       borderRadius: "rounded-md",
       padding: "1.5rem",
     },
@@ -374,7 +420,7 @@ export const examples: {
           legend: "Living Room - After",
         },
       ],
-      colorPreset: { color: "green-50" },
+      colorPreset: { color: "accent-100" },
       borderRadius: "rounded-lg",
       padding: "1rem",
     },
@@ -406,7 +452,7 @@ export const examples: {
           legend: "Color Study #7 - 2024",
         },
       ],
-      colorPreset: { color: "gray-900" },
+      colorPreset: { color: "neutral-900" },
       borderRadius: "rounded-sm",
       padding: "3rem",
     },
@@ -459,7 +505,7 @@ export const examples: {
           legend: "Weekend Casual - Relaxed Fit",
         },
       ],
-      colorPreset: { color: "purple-100" },
+      colorPreset: { color: "secondary-100" },
       borderRadius: "rounded-xl",
       padding: "2rem",
     },
@@ -491,7 +537,7 @@ export const examples: {
           legend: "Electric Sedan",
         },
       ],
-      colorPreset: { color: "red-50" },
+      colorPreset: { color: "accent-50" },
       borderRadius: "rounded-lg",
       padding: "0.5rem",
     },
@@ -530,13 +576,13 @@ export const examples: {
           legend: "Security - Enterprise-grade protection",
         },
       ],
-      colorPreset: { color: "indigo-50" },
+      colorPreset: { color: "primary-50" },
       borderRadius: "rounded-2xl",
       padding: "4rem",
     },
   },
   {
-    description: "Dynamic product gallery using products query with pricing and details",
+    description: "Dynamic product gallery using products query - Data-driven product showcase",
     type: "carousel",
     props: {
       images: [
@@ -556,6 +602,90 @@ export const examples: {
       },
     },
   },
+
+  // DYNAMIC CONTENT EXAMPLES
+  {
+    description: "Loop template for portfolioProjects query (one object will repeat per row)",
+    type: "carousel",
+    props: {
+      images: [
+        {
+          src: {
+            src: "{{portfolioProjects.featuredImage}}",
+            alt: "{{portfolioProjects.projectName}} featured image",
+          },
+          legend:
+            "{{portfolioProjects.projectName}} – {{portfolioProjects.clientName}} ({{portfolioProjects.year}})",
+        },
+      ],
+      colorPreset: { color: "neutral-50" },
+      borderRadius: "rounded-md",
+      padding: "1rem",
+      loop: {
+        over: "portfolioProjects",
+      },
+    },
+  },
+
+  // SPECIAL STYLING VARIATIONS
+  {
+    description: "Showcase carousel with subtle gradient background frame",
+    type: "carousel",
+    props: {
+      images: [
+        {
+          src: { src: "https://via.placeholder.com/900x500.png?text=Showcase+1", alt: "Showcase slide 1" },
+          legend: "Launch Dashboard",
+        },
+        {
+          src: { src: "https://via.placeholder.com/900x500.png?text=Showcase+2", alt: "Showcase slide 2" },
+          legend: "Collaboration Tools",
+        },
+        {
+          src: { src: "https://via.placeholder.com/900x500.png?text=Showcase+3", alt: "Showcase slide 3" },
+          legend: "Usage Analytics",
+        },
+      ],
+      colorPreset: { color: "primary-gradient-300", gradientDirection: "bg-gradient-to-br" },
+      borderRadius: "rounded-xl",
+      padding: "2rem",
+    },
+  },
+  // MINIMAL EDGE (no padding, square corners)
+  {
+    description: "Minimal edge-to-edge carousel (no padding, no rounding)",
+    type: "carousel",
+    props: {
+      images: [
+        {
+          src: { src: "https://via.placeholder.com/800x400.png?text=Edge+1", alt: "Edge slide 1" },
+          legend: "",
+        },
+        {
+          src: { src: "https://via.placeholder.com/800x400.png?text=Edge+2", alt: "Edge slide 2" },
+          legend: "",
+        },
+      ],
+      borderRadius: "rounded-none",
+      padding: "0",
+    },
+  },
+  // SINGLE IMAGE (acts as prepared placeholder carousel)
+  {
+    description: "Single-image carousel (placeholder for future expansion)",
+    type: "carousel",
+    props: {
+      images: [
+        {
+          src: { src: "https://via.placeholder.com/1000x420.png?text=Banner", alt: "Promotional banner" },
+          legend: "Early Access Program",
+        },
+      ],
+      colorPreset: { color: "secondary-50" },
+      borderRadius: "rounded-lg",
+      padding: "1.25rem",
+    },
+  },
   {
     description: "Team member carousel using teamMembers query with roles and departments",
     type: "carousel",

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

@@ -1,14 +1,15 @@
 import { type Static, Type } from "@sinclair/typebox";
 import { VscLayoutPanelOff } from "react-icons/vsc";
 import { defineBrickManifest } from "~/shared/brick-manifest";
-import { array, defineProps } from "../props/helpers";
-import { imageRef } from "../props/image";
-import { colorPresetRef } from "../props/color-preset";
-import { string, urlOrPageIdRef } from "../props/string";
-import { fontSizeRef } from "../props/text";
+import { defineProps } from "../props/helpers";
+import { image } from "../props/image";
+import { colorPreset } from "../props/color-preset";
+import { urlOrPageId } from "../props/string";
+import { fontSize } from "../props/text";
 import type { BrickProps } from "../props/types";
 import { toLLMSchema } from "~/shared/utils/llm";
-import { cssLengthRef } from "../props/css-length";
+import { cssLength } from "../props/css-length";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "footer",
@@ -29,13 +30,13 @@ export const manifest = defineBrickManifest({
   props: defineProps(
     {
       colorPreset: Type.Optional(
-        colorPresetRef({
+        colorPreset({
           title: "Color preset",
           default: { color: "neutral-600" },
         }),
       ),
       padding: Type.Optional(
-        cssLengthRef({
+        cssLength({
           default: "4rem",
           description: "Padding inside the footer.",
           title: "Padding",
@@ -44,17 +45,17 @@ export const manifest = defineBrickManifest({
           "ui:styleId": "styles:padding",
         }),
       ),
-      logo: Type.Optional(imageRef({ title: "Logo", "ui:no-object-options": true, "ui:no-alt-text": true })),
-      fontSize: Type.Optional(fontSizeRef({ default: "text-sm", "ui:no-extra-large-sizes": true })),
+      logo: Type.Optional(image({ title: "Logo", "ui:no-object-options": true, "ui:no-alt-text": true })),
+      fontSize: Type.Optional(fontSize({ default: "text-sm", "ui:no-extra-large-sizes": true })),
       // rows:Type.Optional(number("Rows", { default: 1, "ui:field": "slider", minimum: 1, maximum: 5 })),
-      linksSections: array(
+      linksSections: Type.Array(
         Type.Object(
           {
-            sectionTitle: string("Title"),
-            links: array(
+            sectionTitle: Type.String({ title: "Title" }),
+            links: Type.Array(
               Type.Object({
-                title: string("Title"),
-                url: urlOrPageIdRef(),
+                title: Type.String({ title: "Title" }),
+                url: urlOrPageId(),
               }),
               {
                 title: "Links",
@@ -90,6 +91,7 @@ export const manifest = defineBrickManifest({
             removable: true, // Enable delete button
             addable: true, // Enable add button
           },
+          default: [],
           description: "List of Links Sections. Each section contains a title and a list of links.",
           metadata: {
             category: "content",
@@ -107,11 +109,7 @@ export const footerSchemaPropsLLM = toLLMSchema(manifest.props);
 
 export type FooterProps = Static<Manifest["props"]>;
 
-export const examples: {
-  description: string;
-  type: string;
-  props: BrickProps<Manifest>["brick"]["props"];
-}[] = [
+export const examples: BrickExample<Manifest>[] = [
   {
     description: "Simple footer with logo on the left",
     type: "footer",

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

@@ -2,22 +2,56 @@ import { type Static, Type } from "@sinclair/typebox";
 import { FaWpforms } from "react-icons/fa6";
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { StringEnum } from "~/shared/utils/string-enum";
-import { borderRef, roundingRef } from "../props/border";
+import { border, rounding } from "../props/border";
 import { datarecord } from "../props/datarecord";
 import { defineProps, group } from "../props/helpers";
-import { string } from "../props/string";
-import type { BrickProps } from "../props/types";
-import { fontSizeRef } from "../props/text";
-import { colorPresetRef } from "../props/color-preset";
-import { directionRef } from "../props/direction";
-import { cssLengthRef } from "../props/css-length";
+import { fontSize } from "../props/text";
+import { colorPreset } from "../props/color-preset";
+import { direction } from "../props/direction";
+import { cssLength } from "../props/css-length";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "form",
   name: "Form",
   description: "A form element.",
-  aiInstructions: `The form brick automatically renders form fields based on the datarecord id provided in the props.
-There is no need to define the form fields manually and the form does not accept any children`,
+  aiInstructions: `PURPOSE
+Dynamic form generator. Fields are inferred from the referenced datarecord schema (datarecordId). You NEVER list fields manually and the form does not accept children.
+
+REQUIRED
+• datarecordId must reference an existing datarecord definition.
+
+COLOR & STYLE
+• Optional colorPreset sets background + text. If omitted the form inherits parent background.
+• Allowed tokens: primary-/secondary-/accent-/neutral-/base-*** (and gradient variants). Do NOT invent success, warning, danger, info, etc. Map them (success->secondary or primary; warning->accent; danger->accent/primary).
+• Use rounding + border + padding for emphasis. Keep padding modest (1–3rem) unless it's a feature form hero (max ~4rem).
+
+LAYOUT
+• direction controls stacking (flex-col vs flex-row). Wide multi-column layouts usually flex-row on desktop, stacked (flex-col) on mobile.
+• Use mobileProps to reduce padding or switch direction ONLY if necessary. (If switching direction, you must repeat required props.)
+
+BUTTON GROUP
+• Only supply button overrides you actually change (color, size, position, rounding). Unspecified values fallback to defaults.
+• If button.size = wide then hide position (handled by schema metadata automatically—don't circumvent).
+
+CONTENT STRINGS
+• title, intro, buttonLabel, successMessage, errorMessage should be concise.
+• Avoid marketing fluff inside intro beyond one short paragraph.
+
+DYNAMIC DATA
+• Do not interpolate inside datarecordId (it must be a static id).
+• You MAY interpolate page queries aliases in title/intro (e.g. "Apply for {{job.title}}") if those fields exist in surrounding dataset context.
+
+DON'TS
+✗ Don't invent props.
+✗ Don't add HTML tags except basic inline markup if absolutely needed (prefer plain text).
+✗ Don't set impossible color tokens.
+
+DO
+✓ Keep examples lean.
+✓ Use semantic color mapping guidelines.
+✓ Provide accessible, human-readable labels.
+`,
   isContainer: false,
   icon: FaWpforms,
   minWidth: {
@@ -29,13 +63,13 @@ There is no need to define the form fields manually and the form does not accept
       "ui:responsive": "desktop",
     }),
     colorPreset: Type.Optional(
-      colorPresetRef({
+      colorPreset({
         title: "Color",
         default: "base-200",
       }),
     ),
     direction: Type.Optional(
-      directionRef({
+      direction({
         title: "Direction",
         description: "The direction of the form fields",
         default: "flex-col",
@@ -44,7 +78,7 @@ There is no need to define the form fields manually and the form does not accept
       }),
     ),
     padding: Type.Optional(
-      cssLengthRef({
+      cssLength({
         default: "2rem",
         description: "Padding inside the form.",
         title: "Padding",
@@ -54,12 +88,12 @@ There is no need to define the form fields manually and the form does not accept
       }),
     ),
     rounding: Type.Optional(
-      roundingRef({
+      rounding({
         default: "rounded-md",
       }),
     ),
-    border: Type.Optional(borderRef({})),
-    fontSize: Type.Optional(fontSizeRef({ default: "inherit", "ui:no-extra-large-sizes": true })),
+    border: Type.Optional(border({})),
+    fontSize: Type.Optional(fontSize({ default: "inherit", "ui:no-extra-large-sizes": true })),
     button: group({
       title: "Button",
       children: {
@@ -93,7 +127,7 @@ There is no need to define the form fields manually and the form does not accept
             },
           }),
         ),
-        rounding: Type.Optional(roundingRef({ default: "rounded-md" })),
+        rounding: rounding({ default: "rounded-md" }),
       },
     }),
 
@@ -117,7 +151,8 @@ There is no need to define the form fields manually and the form does not accept
       }),
     ),
     buttonLabel: Type.Optional(
-      string("Button Label", {
+      Type.String({
+        title: "Button label",
         default: "Submit",
         metadata: { category: "content" },
       }),
@@ -147,11 +182,7 @@ There is no need to define the form fields manually and the form does not accept
 
 export type Manifest = typeof manifest;
 
-export const examples: {
-  description: string;
-  type: string;
-  props: BrickProps<Manifest>["brick"]["props"];
-}[] = [
+export const examples: BrickExample<Manifest>[] = [
   {
     description: "Basic contact form",
     type: "form",
@@ -180,6 +211,30 @@ export const examples: {
       },
     },
   },
+  {
+    description: "Responsive newsletter subscription: desktop horizontal -> mobile vertical",
+    type: "form",
+    props: {
+      title: "Stay Updated",
+      intro: "Subscribe for product news and occasional tips.",
+      direction: "flex-row",
+      datarecordId: "newsletter-subscription",
+      padding: "3rem",
+      buttonLabel: "Subscribe",
+      button: { size: "block" },
+      colorPreset: { color: "neutral-100" },
+    },
+    mobileProps: {
+      title: "Stay Updated",
+      intro: "Subscribe for product news and occasional tips.",
+      direction: "flex-col",
+      datarecordId: "newsletter-subscription",
+      padding: "2rem",
+      buttonLabel: "Subscribe",
+      button: { size: "block" },
+      colorPreset: { color: "neutral-100" },
+    },
+  },
   {
     description: "Newsletter subscription form (horizontal) with large padding",
     type: "form",
@@ -195,6 +250,51 @@ export const examples: {
       },
     },
   },
+  {
+    description: "Minimal inline signup form (no background colorPreset, inherits parent)",
+    type: "form",
+    props: {
+      title: "Join Beta",
+      intro: "Access early features before public launch.",
+      direction: "flex-row",
+      datarecordId: "beta-signup",
+      buttonLabel: "Request Access",
+      button: { size: "block" },
+      padding: "1.5rem",
+    },
+  },
+  {
+    description: "Dark themed form using neutral-800 background and accent button",
+    type: "form",
+    props: {
+      title: "Feedback",
+      intro: "Tell us how we can improve the product.",
+      direction: "flex-col",
+      datarecordId: "product-feedback",
+      buttonLabel: "Send Feedback",
+      colorPreset: { color: "neutral-800" },
+      padding: "2.5rem",
+      button: { color: "btn-accent" },
+      rounding: "rounded-lg",
+      border: { width: "border", color: "border-neutral-700" },
+    },
+  },
+  {
+    description: "Gradient emphasis form (primary gradient) for event signup",
+    type: "form",
+    props: {
+      title: "Conference RSVP",
+      intro: "Reserve your seat for {{event.title}}.",
+      direction: "flex-col",
+      datarecordId: "event-registration",
+      buttonLabel: "Reserve Seat",
+      colorPreset: { color: "primary-gradient-400", gradientDirection: "bg-gradient-to-br" },
+      padding: "3rem",
+      button: { color: "btn-secondary" },
+      rounding: "rounded-xl",
+      border: { width: "border-2", color: "border-primary-300" },
+    },
+  },
   {
     description: "Event registration form",
     type: "form",
@@ -223,4 +323,18 @@ export const examples: {
       },
     },
   },
+  {
+    description: "Dynamic job application (title interpolated) mapping dataset field",
+    type: "form",
+    props: {
+      title: "Apply for {{job.title}}",
+      intro: "Join our team in {{job.location}}.",
+      direction: "flex-col",
+      datarecordId: "job-application",
+      buttonLabel: "Apply Now",
+      colorPreset: { color: "secondary-100" },
+      button: { size: "block", color: "btn-primary" },
+      padding: "2rem",
+    },
+  },
 ];