@upstart.gg/sdk 0.0.135 → 0.0.137

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

@@ -2,14 +2,13 @@ import { Type } from "@sinclair/typebox";
 import { RiTable2 } from "react-icons/ri";
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
-import { string } from "../props/string";
-import type { BrickProps } from "../props/types";
-import { colorPresetRef } from "../props/color-preset";
-import { borderRef, roundingRef } from "../props/border";
-import { loopRef } from "../props/dynamic";
-import { cssLengthRef } from "../props/css-length";
-import { fontSizeRef } from "../props/text";
+import { colorPreset } from "../props/color-preset";
+import { border, rounding } from "../props/border";
+import { loop } from "../props/dynamic";
+import { cssLength } from "../props/css-length";
+import { fontSize } from "../props/text";
 import { StringEnum } from "~/shared/utils/string-enum";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "table",
@@ -34,18 +33,20 @@ export const manifest = defineBrickManifest({
   icon: RiTable2,
   props: defineProps({
     colorPreset: Type.Optional(
-      colorPresetRef({
+      colorPreset({
         title: "Color",
       }),
     ),
-    loop: Type.Optional(loopRef()),
+    loop: Type.Optional(loop()),
     columns: Type.Array(
       Type.Object({
-        header: string("Header", {
+        header: Type.String({
+          title: "Header",
           default: "Column Header",
           metadata: { category: "content" },
         }),
-        field: string("Field", {
+        field: Type.String({
+          title: "Field",
           default: "fieldName",
           description: "The field name from the data source or static content",
           metadata: { category: "content" },
@@ -124,14 +125,14 @@ export const manifest = defineBrickManifest({
       }),
     ),
     fontSize: Type.Optional(
-      fontSizeRef({
+      fontSize({
         title: "Font Size",
         description: "Text size for table content",
         default: "text-sm",
       }),
     ),
     padding: Type.Optional(
-      cssLengthRef({
+      cssLength({
         default: "1rem",
         description: "Padding inside table cells",
         title: "Cell Padding",
@@ -141,12 +142,12 @@ export const manifest = defineBrickManifest({
       }),
     ),
     rounding: Type.Optional(
-      roundingRef({
+      rounding({
         default: "rounded-lg",
       }),
     ),
     border: Type.Optional(
-      borderRef({
+      border({
         default: { width: "border", color: "border-gray-200" },
       }),
     ),
@@ -155,11 +156,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: "Team members table with basic information",
     type: "table",

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

@@ -1,14 +1,15 @@
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
 import { Type } from "@sinclair/typebox";
-import { borderRef, roundingRef } from "../props/border";
-import { shadowRef } from "../props/effects";
+import { border, rounding } from "../props/border";
+import { shadow } from "../props/effects";
 import type { BrickProps } from "../props/types";
-import { cssLengthRef } from "../props/css-length";
+import { cssLength } from "../props/css-length";
 import { HiOutlineViewColumns } from "react-icons/hi2";
-import { colorPresetRef } from "../props/color-preset";
-import { loopRef } from "../props/dynamic";
+import { colorPreset } from "../props/color-preset";
+import { loop } from "../props/dynamic";
 import { StringEnum } from "~/shared/utils/string-enum";
+import type { BrickExample } from "./_types";
 
 // Tab configuration schema
 const tabRef = Type.Object({
@@ -43,7 +44,7 @@ export const manifest = defineBrickManifest({
   icon: HiOutlineViewColumns,
   props: defineProps({
     colorPreset: Type.Optional(
-      colorPresetRef({
+      colorPreset({
         title: "Color",
       }),
     ),
@@ -94,7 +95,7 @@ export const manifest = defineBrickManifest({
       }),
     ),
     padding: Type.Optional(
-      cssLengthRef({
+      cssLength({
         default: "1.5rem",
         description: "Padding inside each tab panel.",
         "ai:instructions": "Use values like '1rem', '1.5rem', or '2rem' for tab content padding",
@@ -104,7 +105,7 @@ export const manifest = defineBrickManifest({
       }),
     ),
     gap: Type.Optional(
-      cssLengthRef({
+      cssLength({
         title: "Tab Gap",
         default: "0.5rem",
         description: "Gap between tab buttons.",
@@ -113,14 +114,12 @@ export const manifest = defineBrickManifest({
         "ui:styleId": "styles:gap",
       }),
     ),
-    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.Array(Type.Any()), {
       "ui:field": "hidden",
       description: "Array of child brick arrays - each sub-array represents the content for one tab",
@@ -160,11 +159,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: "Simple tabs with basic content in each panel",
     type: "tabs",

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

@@ -2,15 +2,16 @@ import { type Static, type TObject, Type } from "@sinclair/typebox";
 import { HiOutlineChatBubbleBottomCenter } from "react-icons/hi2";
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
-import { imageRef } from "../props/image";
-import { iconRef, string } from "../props/string";
+import { image } from "../props/image";
+import { icon } from "../props/string";
 import type { BrickProps } from "../props/types";
-import { fontSizeRef } from "../props/text";
-import { colorPresetRef } from "../props/color-preset";
-import { cssLengthRef } from "../props/css-length";
-import { loopRef } from "../props/dynamic";
-import { borderRef } from "../props/border";
-import { shadowRef } from "../props/effects";
+import { fontSize } from "../props/text";
+import { colorPreset } from "../props/color-preset";
+import { cssLength } from "../props/css-length";
+import { loop } from "../props/dynamic";
+import { border } from "../props/border";
+import { shadow } from "../props/effects";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "testimonials",
@@ -25,13 +26,13 @@ Optionally either use an avatar or a social icon but not both at the same time.`
   props: defineProps(
     {
       colorPreset: Type.Optional(
-        colorPresetRef({
+        colorPreset({
           title: "Color",
           default: "base-100",
         }),
       ),
       border: Type.Optional(
-        borderRef({
+        border({
           title: "Border",
           description: "Customize the border of the testimonial cards.",
           default: {
@@ -41,12 +42,12 @@ Optionally either use an avatar or a social icon but not both at the same time.`
         }),
       ),
       fontSize: Type.Optional(
-        fontSizeRef({
+        fontSize({
           "ui:no-extra-large-sizes": true,
         }),
       ),
       padding: Type.Optional(
-        cssLengthRef({
+        cssLength({
           default: "1rem",
           description: "Padding inside the main container.",
           "ai:instructions": "Use only a single value like '1rem' or '10px'",
@@ -57,7 +58,7 @@ Optionally either use an avatar or a social icon but not both at the same time.`
         }),
       ),
       gap: Type.Optional(
-        cssLengthRef({
+        cssLength({
           title: "Gap",
           default: "26px",
           description: "Space between bricks.",
@@ -67,9 +68,9 @@ Optionally either use an avatar or a social icon but not both at the same time.`
           "ui:styleId": "styles:gap",
         }),
       ),
-      shadow: Type.Optional(shadowRef()),
+      shadow: Type.Optional(shadow()),
       loop: Type.Optional(
-        loopRef({
+        loop({
           // title: "Use dynamic content",
           description:
             "If enabled, each row from the query result will be used to create a testimonial. Otherwise, the testimonials will be static.",
@@ -79,21 +80,22 @@ Optionally either use an avatar or a social icon but not both at the same time.`
       testimonials: Type.Optional(
         Type.Array(
           Type.Object({
-            text: string("Text", {
+            text: Type.String({
+              title: "Text",
               default: "Amazing product!",
               "ui:multiline": true,
               "ui:textarea-class": "h-20",
             }),
-            author: string("Author", { default: "John Doe" }),
-            company: Type.Optional(string("Company")),
+            author: Type.String({ title: "Author", default: "John Doe" }),
+            company: Type.Optional(Type.String({ title: "Company" })),
             avatar: Type.Optional(
-              imageRef({
+              image({
                 title: "Avatar",
                 "ui:placeholder": "https://via.placeholder.com/80x80.png?text=JD",
                 noObjectOptions: true,
               }),
             ),
-            socialIcon: Type.Optional(iconRef()),
+            socialIcon: Type.Optional(icon()),
           }),
           {
             title: "Testimonials",
@@ -134,11 +136,7 @@ Optionally either use an avatar or a social icon but not both at the same time.`
 
 export type Manifest = typeof manifest;
 
-export const examples: {
-  description: string;
-  type: string;
-  props: BrickProps<Manifest>["brick"]["props"];
-}[] = [
+export const examples: BrickExample<Manifest>[] = [
   {
     description: "SaaS platform testimonials with avatars",
     type: "testimonials",

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

@@ -1,25 +1,50 @@
 import { defineBrickManifest } from "~/shared/brick-manifest";
-import { textContentRef } from "../props/text";
+import { textContent } from "../props/text";
 import { defineProps } from "../props/helpers";
-import { borderRef, roundingRef } from "../props/border";
+import { border, rounding } from "../props/border";
 import { RxTextAlignLeft } from "react-icons/rx";
-import type { BrickProps } from "../props/types";
 import { Type } from "@sinclair/typebox";
-import { alignItemsRef } from "../props/align";
-import { shadowRef } from "../props/effects";
-import { colorPresetRef } from "../props/color-preset";
-import { loopRef } from "../props/dynamic";
-import { cssLengthRef } from "../props/css-length";
+import { alignItems } from "../props/align";
+import { shadow } from "../props/effects";
+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: "text",
   category: "basic",
   name: "Text",
   description: "Text with formatting options",
-  aiInstructions: `Text "content" can contain minimal HTML tags like <strong>, <em>, <br> and <a> as well as <h1>, <h2>, <h3>, <h4>, <p> and <span> and lists.
-Only 'align' is supported as an inline style, so don't use other inline styles like 'font-size' or 'color' in the content prop.
-You may simply omit the "colorPreset" property so that the brick will inherit the default color from its parent container.
-`,
+  aiInstructions: `Use the text component for rich content blocks, announcements, descriptions, and formatted text throughout your site.
+
+CONTENT FORMATTING:
+- Supports HTML tags: <h1>, <h2>, <h3>, <h4>, <p>, <span>, <strong>, <em>, <br>, <a>, <ul>, <li>, <ol>
+- Only 'text-align' style is supported (center, left, right) - avoid other inline styles
+- Use <strong> for emphasis, <em> for italics, <br> for line breaks
+- Links: <a href="/page">Internal</a> or <a href="https://external.com">External</a>
+- Lists: <ul><li>Item 1</li><li>Item 2</li></ul>
+
+STYLING OPTIONS:
+- colorPreset: Leave empty to inherit parent colors, or use "primary-100", "secondary-200", "neutral-50", "accent-100" for backgrounds
+- padding: Use CSS values like "1rem", "2rem", "24px" for internal spacing
+- rounding: "rounded-none" (sharp), "rounded-md" (standard), "rounded-lg" (friendly), "rounded-xl" (soft)
+- border: Add borders with width ("border", "border-2") and color ("border-gray-300", "border-primary-500")
+- shadow: Add depth with "shadow-sm", "shadow-md", "shadow-lg"
+
+WHEN TO USE:
+- Rich content sections (About Us, Service descriptions)
+- Announcements and notices
+- Product descriptions with formatting
+- Quotes and testimonials
+- FAQ content and detailed explanations
+- Footer information and legal text
+
+BEST PRACTICES:
+- Keep HTML minimal - complex layouts should use multiple components
+- Use semantic headings (h2, h3, h4) for proper hierarchy
+- Center-align for quotes/testimonials, left-align for body text
+- Choose background colors that provide good contrast, or no background for inline text`,
   defaultWidth: {
     mobile: "100%",
   },
@@ -31,24 +56,24 @@ You may simply omit the "colorPreset" property so that the brick will inherit th
   icon: RxTextAlignLeft,
   props: defineProps({
     colorPreset: Type.Optional(
-      colorPresetRef({
+      colorPreset({
         title: "Color",
       }),
     ),
-    content: textContentRef({
+    content: textContent({
       title: "Content",
       // metadata: {
       //   category: "content",
       // },
     }),
     verticalAlign: Type.Optional(
-      alignItemsRef({
+      alignItems({
         default: "items-center",
         title: "Align",
       }),
     ),
     padding: Type.Optional(
-      cssLengthRef({
+      cssLength({
         default: "2rem",
         description: "Padding inside the text.",
         "ai:instructions": "Use only a single value like '1rem' or '10px'",
@@ -58,24 +83,17 @@ You may simply omit the "colorPreset" property so that the brick will inherit th
         "ui:styleId": "styles:padding",
       }),
     ),
-    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()),
   }),
 });
 
 export type Manifest = typeof manifest;
 
-export const examples: {
-  description: string;
-  type: string;
-  props: BrickProps<Manifest>["brick"]["props"];
-}[] = [
+export const examples: BrickExample<Manifest>[] = [
   {
     description: "Welcome paragraph with emphasis and padding",
     type: "text",

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

@@ -1,13 +1,15 @@
 import { Type } from "@sinclair/typebox";
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
-import { colorPresetRef } from "../props/color-preset";
-import { cssLengthRef } from "../props/css-length";
-import { borderRef, roundingRef } from "../props/border";
-import { shadowRef } from "../props/effects";
+import { colorPreset } from "../props/color-preset";
+import { cssLength } from "../props/css-length";
+import { border, rounding } from "../props/border";
+import { shadow } from "../props/effects";
 import { BsListCheck } from "react-icons/bs";
-import { loopRef } from "../props/dynamic";
+import { loop } from "../props/dynamic";
 import type { BrickProps } from "../props/types";
+import type { BrickExample } from "./_types";
+import { StringEnum } from "~/shared/utils/string-enum";
 
 const timelineItemSchema = Type.Object({
   id: Type.Optional(Type.String({ title: "ID" })),
@@ -40,7 +42,8 @@ const timelineItemSchema = Type.Object({
     }),
   ),
   status: Type.Optional(
-    Type.Union([Type.Literal("completed"), Type.Literal("current"), Type.Literal("upcoming")], {
+    StringEnum(["completed", "current", "upcoming"], {
+      enumNames: ["Completed", "Current", "Upcoming"],
       title: "Status",
       description: "Timeline item status for visual styling",
     }),
@@ -54,6 +57,7 @@ export const manifest = defineBrickManifest({
   description:
     "A vertical timeline component to display chronological events, milestones, or processes with optional content for each item",
   icon: BsListCheck,
+  consumesMultipleQueryRows: true,
   props: defineProps({
     items: Type.Array(timelineItemSchema, {
       title: "Timeline Items",
@@ -74,7 +78,8 @@ export const manifest = defineBrickManifest({
 
     // Layout options
     layout: Type.Optional(
-      Type.Union([Type.Literal("left"), Type.Literal("right"), Type.Literal("alternating")], {
+      StringEnum(["left", "right", "alternating"], {
+        enumNames: ["Left", "Right", "Alternating"],
         title: "Layout",
         description: "Timeline layout style",
         default: "left",
@@ -90,7 +95,7 @@ export const manifest = defineBrickManifest({
     ),
 
     connectorColor: Type.Optional(
-      colorPresetRef({
+      colorPreset({
         title: "Connector Color",
         description: "Color of the timeline connector line",
       }),
@@ -98,7 +103,7 @@ export const manifest = defineBrickManifest({
 
     // Timeline item styling
     itemSpacing: Type.Optional(
-      cssLengthRef({
+      cssLength({
         title: "Item Spacing",
         description: "Vertical spacing between timeline items",
         default: "2rem",
@@ -112,9 +117,9 @@ export const manifest = defineBrickManifest({
         default: true,
       }),
     ),
-
     iconSize: Type.Optional(
-      Type.Union([Type.Literal("sm"), Type.Literal("md"), Type.Literal("lg")], {
+      StringEnum(["sm", "md", "lg"], {
+        enumNames: ["Small", "Medium", "Large"],
         title: "Icon Size",
         description: "Size of timeline item icons",
         default: "md",
@@ -130,7 +135,8 @@ export const manifest = defineBrickManifest({
     ),
 
     datePosition: Type.Optional(
-      Type.Union([Type.Literal("top"), Type.Literal("bottom"), Type.Literal("inline")], {
+      StringEnum(["top", "bottom", "inline"], {
+        enumNames: ["Top", "Bottom", "Inline"],
         title: "Date Position",
         description: "Position of dates relative to content",
         default: "top",
@@ -139,52 +145,48 @@ export const manifest = defineBrickManifest({
 
     // Styling
     colorPreset: Type.Optional(
-      colorPresetRef({
+      colorPreset({
         title: "Color Preset",
         description: "Color theme for the timeline",
       }),
     ),
 
     padding: Type.Optional(
-      cssLengthRef({
+      cssLength({
         title: "Padding",
         description: "Internal padding for the timeline container",
       }),
     ),
 
     border: Type.Optional(
-      borderRef({
+      border({
         title: "Border",
         description: "Border styling for the timeline container",
       }),
     ),
 
     shadow: Type.Optional(
-      shadowRef({
+      shadow({
         title: "Shadow",
         description: "Shadow effect for the timeline container",
       }),
     ),
 
     rounding: Type.Optional(
-      roundingRef({
+      rounding({
         title: "Rounding",
         description: "Corner rounding for the timeline container",
       }),
     ),
 
     // Content loop support
-    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>[] = [
   {
     description: "Basic timeline with milestones",
     type: "timeline",
@@ -257,8 +259,8 @@ export const examples: {
         },
       ],
       layout: "alternating",
-      colorPreset: { color: "blue-500" },
-      connectorColor: { color: "blue-300" },
+      colorPreset: { color: "primary-500" },
+      connectorColor: { color: "primary-300" },
       itemSpacing: "3rem",
     },
   },
@@ -385,8 +387,8 @@ export const examples: {
         },
       ],
       layout: "right",
-      colorPreset: { color: "green-500" },
-      border: { width: "border", color: "gray-200" },
+      colorPreset: { color: "secondary-500" },
+      border: { width: "border", color: "secondary-200" },
       rounding: "rounded-lg",
       padding: "2rem",
     },
@@ -429,13 +431,13 @@ export const examples: {
           description: "Create comprehensive usage documentation",
         },
       ],
-      colorPreset: { color: "purple-500" },
+      colorPreset: { color: "secondary-500" },
       shadow: "shadow-lg",
       border: { width: "border", color: "purple-200" },
       rounding: "rounded-xl",
       padding: "2.5rem",
       itemSpacing: "2.5rem",
-      connectorColor: { color: "purple-300" },
+      connectorColor: { color: "secondary-300" },
     },
   },
 ];

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

@@ -1,12 +1,11 @@
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
 import { RxVideo } from "react-icons/rx";
-import { string } from "../props/string";
-import type { BrickProps } from "../props/types";
-import { borderRef, roundingRef } from "../props/border";
-import { shadowRef } from "../props/effects";
+import { border, rounding } from "../props/border";
+import { shadow } from "../props/effects";
 import { Type } from "@sinclair/typebox";
-import { cssLengthRef } from "../props/css-length";
+import { cssLength } from "../props/css-length";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "video",
@@ -31,7 +30,8 @@ export const manifest = defineBrickManifest({
     desktop: 360, // 16:9 aspect ratio
   },
   props: defineProps({
-    url: string("Video URL", {
+    url: Type.String({
+      title: "Video URL",
       description:
         "URL of the video to embed. It can be a YouTube link or an embed link. It also supports Vimeo and Wistia links.",
       default: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
@@ -41,7 +41,7 @@ export const manifest = defineBrickManifest({
       },
     }),
     padding: Type.Optional(
-      cssLengthRef({
+      cssLength({
         description: "Padding inside the video player.",
         "ai:instructions": "Use only a single value like '1rem' or '10px'",
         title: "Padding",
@@ -51,22 +51,18 @@ export const manifest = defineBrickManifest({
       }),
     ),
     rounding: Type.Optional(
-      roundingRef({
+      rounding({
         default: "rounded-md",
       }),
     ),
-    border: Type.Optional(borderRef()),
-    shadow: Type.Optional(shadowRef()),
+    border: Type.Optional(border()),
+    shadow: Type.Optional(shadow()),
   }),
 });
 
 export type Manifest = typeof manifest;
 
-export const examples: {
-  description: string;
-  type: string;
-  props: BrickProps<Manifest>["brick"]["props"];
-}[] = [
+export const examples: BrickExample<Manifest>[] = [
   {
     description: "A YouTube video",
     type: "video",