@upstart.gg/sdk 0.0.136 → 0.0.137

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

@@ -2,11 +2,11 @@ import { Type } from "@sinclair/typebox";
 import { RxButton } from "react-icons/rx";
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
-import { string, urlOrPageIdRef } from "../props/string";
-import type { BrickProps } from "../props/types";
-import { borderRef, roundingRef } from "../props/border";
-import { fontSizeRef } from "../props/text";
-import { colorPresetRef } from "../props/color-preset";
+import { urlOrPageId } from "../props/string";
+import { rounding } from "../props/border";
+import { StringEnum } from "~/shared/utils/string-enum";
+import { fontSize } from "../props/text";
+import { colorPreset } from "../props/color-preset";
 import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
@@ -26,6 +26,7 @@ STYLING GUIDELINES:
 - colorPreset: Use "primary-500" for main CTAs, "secondary-500" for secondary actions, "neutral-500" for low-priority actions, "accent-500" for highlight actions
 - fontSize: "text-sm" for compact buttons, "text-base" for standard, "text-lg" for emphasis, "text-xl" for hero buttons
 - rounding: "rounded-none" for sharp/modern, "rounded-md" for standard, "rounded-lg" for friendly, "rounded-full" for pills
+- fill: Use "solid" for primary actions with background color, "outline" for secondary actions with transparent background and border
 - link: Use full URLs for external (https://example.com), relative paths for internal (/about), or page IDs for site pages (about-us)
 
 DYNAMIC CONTENT:
@@ -48,15 +49,15 @@ AVOID:
   props: defineProps(
     {
       colorPreset: Type.Optional(
-        colorPresetRef({
+        colorPreset({
           default: { color: "primary-500" },
           title: "Color",
           "ui:default-gradient-direction": "bg-gradient-to-b",
         }),
       ),
-      label: string("Label", { default: "My button", metadata: { category: "content" } }),
+      label: Type.String({ title: "Label", default: "My button", metadata: { category: "content" } }),
       fontSize: Type.Optional(
-        fontSizeRef({
+        fontSize({
           title: "Font size",
           description: "The font size of the button text.",
           default: "text-base",
@@ -65,12 +66,21 @@ AVOID:
         }),
       ),
       rounding: Type.Optional(
-        roundingRef({
+        rounding({
           default: "rounded-md",
         }),
       ),
-      border: Type.Optional(borderRef({ default: { width: "border-0" }, "ui:responsive": "desktop" })),
-      link: urlOrPageIdRef({
+      fill: Type.Optional(
+        StringEnum(["solid", "outline"], {
+          title: "Fill",
+          description: "Button appearance style - solid background or outlined.",
+          default: "solid",
+          enumNames: ["Solid", "Outline"],
+          "ui:field": "enum",
+          "ui:display": "select",
+        }),
+      ),
+      link: urlOrPageId({
         title: "Link",
         "ui:placeholder": "https://example.com",
         metadata: { category: "content" },
@@ -93,6 +103,7 @@ export const examples: BrickExample<Manifest>[] = [
       colorPreset: { color: "primary-500" },
       fontSize: "text-base",
       rounding: "rounded-md",
+      fill: "solid",
     },
   },
   {
@@ -104,6 +115,7 @@ export const examples: BrickExample<Manifest>[] = [
       colorPreset: { color: "secondary-500" },
       fontSize: "text-base",
       rounding: "rounded-md",
+      fill: "outline",
     },
   },
   {
@@ -150,7 +162,7 @@ export const examples: BrickExample<Manifest>[] = [
       colorPreset: { color: "secondary-600" },
       fontSize: "text-base",
       rounding: "rounded-lg",
-      border: { width: "border", color: "border-secondary-800" },
+      fill: "outline",
     },
   },
 
@@ -188,7 +200,7 @@ export const examples: BrickExample<Manifest>[] = [
       colorPreset: { color: "primary-600" },
       fontSize: "text-base",
       rounding: "rounded-md",
-      border: { width: "border", color: "border-primary-800" },
+      fill: "outline",
     },
   },
   {
@@ -235,7 +247,7 @@ export const examples: BrickExample<Manifest>[] = [
       colorPreset: { color: "primary-600" },
       fontSize: "text-xl",
       rounding: "rounded-xl",
-      border: { width: "border-2", color: "border-primary-800" },
+      fill: "outline",
     },
   },
   {
@@ -258,7 +270,7 @@ export const examples: BrickExample<Manifest>[] = [
       colorPreset: { color: "primary-500" },
       fontSize: "text-base",
       rounding: "rounded-none",
-      border: { width: "border-2", color: "border-primary-700" },
+      fill: "outline",
     },
   },
 
@@ -289,7 +301,33 @@ export const examples: BrickExample<Manifest>[] = [
       },
       fontSize: "text-base",
       rounding: "rounded-md",
-      border: { width: "border", color: "border-accent-800" },
+      fill: "outline",
+    },
+  },
+
+  // FILL STYLE COMPARISON EXAMPLES
+  {
+    description: "Solid fill button - Traditional filled background style",
+    type: "button",
+    props: {
+      label: "Solid Button",
+      link: "/solid",
+      colorPreset: { color: "primary-500" },
+      fontSize: "text-base",
+      rounding: "rounded-md",
+      fill: "solid",
+    },
+  },
+  {
+    description: "Outline fill button - Transparent background with border",
+    type: "button",
+    props: {
+      label: "Outline Button",
+      link: "/outline",
+      colorPreset: { color: "primary-500" },
+      fontSize: "text-base",
+      rounding: "rounded-md",
+      fill: "outline",
     },
   },
 ];

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

@@ -1,24 +1,38 @@
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
-import { textContentRef } from "../props/text";
+import { textContent } from "../props/text";
 import { BsCardText } from "react-icons/bs";
-import { imageRef } from "../props/image";
+import { image } from "../props/image";
 import { type Static, Type } from "@sinclair/typebox";
 import type { BrickProps } from "../props/types";
-import { shadowRef } from "../props/effects";
-import { borderRef, roundingRef } from "../props/border";
-import { colorPresetRef } from "../props/color-preset";
-import { loopRef } from "../props/dynamic";
+import { shadow } from "../props/effects";
+import { border, rounding } from "../props/border";
+import { colorPreset } from "../props/color-preset";
+import { loop } from "../props/dynamic";
 import { StringEnum } from "~/shared/utils/string-enum";
-import { urlOrPageIdRef } from "../props/string";
+import { urlOrPageId } from "../props/string";
 import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "card",
   name: "Card",
   description: "A card that can have a title, image, and content.",
-  aiInstructions:
-    "Use this brick to create visually distinct content blocks (product, feature, testimonial, event, article, CTA, etc.).\n\nGuidelines:\n- Button is REQUIRED. Always provide a short action label (1–3 words) and pick a color matching semantic weight (primary/accent for primary actions, neutral/secondary for low emphasis).\n- Image is OPTIONAL. If present you may set imagePosition to top | middle | bottom. Default is top. Pick middle for vertically centered feature highlights, bottom for caption-first layouts.\n- Set noTitle: true when the card is intentionally title-less (e.g. a quote card or pure media focus). Do NOT include an empty title string alongside noTitle.\n- Use dynamic tokens (e.g. {{products.price}}) instead of duplicating literal values.\n- Prefer gradient presets for more visual emphasis (e.g. primary-gradient-400 with gradientDirection).\n- border + rounding + shadow should be cohesive: stronger borders pair well with larger rounding + moderate shadow; minimal / flat cards may use border-0 + no shadow.\n- For internal navigation you can supply a page ID (e.g. 'about') OR a relative/absolute URL (e.g. '/pricing', 'https://example.com').\n- Keep HTML inside text minimal (<strong>, <em>, <br>) — for richer structure consider multiple bricks instead.\n- Avoid mixing noTitle with large heading text embedded inside the text field — in that case keep a proper title.\n\nReturn ONLY valid properties defined in the schema; do not invent new ones.",
+  aiInstructions: `Use this brick to create visually distinct content blocks (product, feature, testimonial, event, article, CTA, etc.).
+
+  Guidelines:
+- Button is REQUIRED.
+- Always provide a short action label (1-3 words) and pick a color matching semantic weight (primary/accent for primary actions, neutral/secondary for low emphasis).
+- Image is OPTIONAL. If present you may set imagePosition to top | middle | bottom. Default is top.
+- Pick middle for vertically centered feature highlights, bottom for caption-first layouts.
+- Set noTitle: true when the card is intentionally title-less (e.g. a quote card or pure media focus).
+- Do NOT include an empty title string alongside noTitle.
+- Use dynamic tokens (e.g. {{products.price}}) instead of duplicating literal values.
+- Prefer gradient presets for more visual emphasis (e.g. primary-gradient-400 with gradientDirection).
+- border + rounding + shadow should be cohesive: stronger borders pair well with larger rounding + moderate shadow; minimal / flat cards may use border-0 + no shadow.
+- For internal navigation you can supply a page ID (e.g. 'about') OR a relative/absolute URL (e.g. '/pricing', 'https://example.com').
+- Keep HTML inside text minimal (<strong>, <em>, <br>) — for richer structure consider multiple bricks instead.
+- Avoid mixing noTitle with large heading text embedded inside the text field — in that case keep a proper title.
+- Return ONLY valid properties defined in the schema; do not invent new ones.`,
   icon: BsCardText,
   defaultWidth: { desktop: "400px", mobile: "100%" },
   minWidth: { desktop: 300 },
@@ -26,14 +40,14 @@ export const manifest = defineBrickManifest({
   maxWidth: { desktop: 650 },
   props: defineProps({
     colorPreset: Type.Optional(
-      colorPresetRef({
+      colorPreset({
         title: "Color preset",
         default: { color: "base-100" },
       }),
     ),
 
     cardImage: Type.Optional(
-      imageRef({
+      image({
         "ui:responsive": "desktop",
         metadata: {
           category: "content",
@@ -63,24 +77,24 @@ export const manifest = defineBrickManifest({
         "ui:responsive": "desktop",
       }),
     ),
-    title: Type.Optional(textContentRef({ title: "Title" })),
-    text: Type.Optional(textContentRef({ title: "Text" })),
+    title: Type.Optional(textContent({ title: "Title" })),
+    text: Type.Optional(textContent({ title: "Text" })),
     rounding: Type.Optional(
-      roundingRef({
+      rounding({
         default: "rounded-md",
       }),
     ),
     border: Type.Optional(
-      borderRef({
+      border({
         // default: { width: "border", color: "border-base-300" },
       }),
     ),
     shadow: Type.Optional(
-      shadowRef({
+      shadow({
         default: "shadow-sm",
       }),
     ),
-    loop: Type.Optional(loopRef()),
+    loop: Type.Optional(loop()),
     button: Type.Object(
       {
         label: Type.String({
@@ -91,7 +105,7 @@ export const manifest = defineBrickManifest({
             category: "content",
           },
         }),
-        url: urlOrPageIdRef({
+        url: urlOrPageId({
           title: "Button URL",
           description: "The URL the button should link to.",
           metadata: {

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

@@ -2,13 +2,11 @@ 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({
@@ -69,12 +67,12 @@ AVOID:
   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'",
@@ -87,12 +85,12 @@ AVOID:
     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",
@@ -105,11 +103,11 @@ AVOID:
       ),
     ),
     borderRadius: Type.Optional(
-      roundingRef({
+      rounding({
         default: "rounded-md",
       }),
     ),
-    loop: Type.Optional(loopRef()),
+    loop: Type.Optional(loop()),
   }),
 });
 

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

@@ -1,14 +1,14 @@
 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({
@@ -30,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",
@@ -45,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",
@@ -91,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",

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

@@ -2,15 +2,13 @@ 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({
@@ -65,13 +63,13 @@ DO
       "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",
@@ -80,7 +78,7 @@ DO
       }),
     ),
     padding: Type.Optional(
-      cssLengthRef({
+      cssLength({
         default: "2rem",
         description: "Padding inside the form.",
         title: "Padding",
@@ -90,12 +88,12 @@ DO
       }),
     ),
     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: {
@@ -129,7 +127,7 @@ DO
             },
           }),
         ),
-        rounding: Type.Optional(roundingRef({ default: "rounded-md" })),
+        rounding: rounding({ default: "rounded-md" }),
       },
     }),
 
@@ -153,7 +151,8 @@ DO
       }),
     ),
     buttonLabel: Type.Optional(
-      string("Button Label", {
+      Type.String({
+        title: "Button label",
         default: "Submit",
         metadata: { category: "content" },
       }),

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

@@ -1,14 +1,14 @@
 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({
@@ -64,29 +64,29 @@ DO
   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>",
       }),
     ),
     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'",
@@ -96,20 +96,18 @@ DO
         "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",
       }),
     ),

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

@@ -1,12 +1,11 @@
 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({
@@ -63,11 +62,11 @@ AVOID:
   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",
@@ -76,14 +75,14 @@ AVOID:
         }),
       ),
       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 },
   ),