@upstart.gg/sdk 0.0.136 → 0.0.138

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

@@ -1,14 +1,14 @@
 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 { cssLengthRef } from "../props/css-length";
-import { directionRef } from "../props/direction";
+import { border, rounding } from "../props/border";
+import { shadow } from "../props/effects";
+import { cssLength } from "../props/css-length";
+import { direction } from "../props/direction";
 import { RxBox } from "react-icons/rx";
-import { alignItemsRef, justifyContentRef } from "../props/align";
-import { colorPresetRef } from "../props/color-preset";
-import { loopRef } from "../props/dynamic";
+import { alignItems, justifyContent } from "../props/align";
+import { colorPreset } from "../props/color-preset";
+import { loop } from "../props/dynamic";
 import type { BrickExample } from "./_types";
 
 // Generic container can hold any type of array data source
@@ -67,27 +67,27 @@ AVOID:
   icon: RxBox,
   props: defineProps({
     colorPreset: Type.Optional(
-      colorPresetRef({
+      colorPreset({
         title: "Color",
       }),
     ),
-    direction: directionRef({
+    direction: direction({
       default: "flex-col",
       title: "Direction",
       description: "Direction of the box layout",
     }),
     justifyContent: Type.Optional(
-      justifyContentRef({
+      justifyContent({
         default: "justify-center",
       }),
     ),
     alignItems: Type.Optional(
-      alignItemsRef({
+      alignItems({
         default: "items-stretch",
       }),
     ),
     gap: Type.Optional(
-      cssLengthRef({
+      cssLength({
         title: "Gap",
         default: "1rem",
         description: "Gap between children bricks.",
@@ -98,7 +98,7 @@ AVOID:
       }),
     ),
     padding: Type.Optional(
-      cssLengthRef({
+      cssLength({
         default: "1rem",
         description: "Padding inside the box.",
         "ai:instructions": "Use only a single value like '1rem' or '10px'",
@@ -115,14 +115,12 @@ AVOID:
         "ui:styleId": "styles:wrap",
       }),
     ),
-    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.Any(), {
       "ui:field": "hidden",
       description: "List of nested bricks",

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,33 @@
 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";
+import { grow } from "../props/grow";
 
 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.",
+  description: "A card that can have a title, image, content, and button.",
+  aiInstructions: `Use this brick to create visually distinct content blocks (product, feature, event, article, blog post, etc.).
+
+Guidelines:
+- Always provide a short button label (1-3 words) and pick a color matching semantic weight (primary/accent for primary actions, neutral/secondary for low emphasis).
+- Set noTitle: true when the card is intentionally title-less (e.g. a quote card or pure media focus).
+- Use dynamic tokens (e.g. {{products.price}}) instead of duplicating literal values.
+- 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, always supply a page ID (e.g. 'about') instead of a full URL. Use placeholders like {{page.$slug}} for dynamic page links.
+- Keep HTML inside text minimal (<strong>, <em>, <br>, <p>) — 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.`,
   icon: BsCardText,
   defaultWidth: { desktop: "400px", mobile: "100%" },
   minWidth: { desktop: 300 },
@@ -26,14 +35,13 @@ 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 +71,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 +99,7 @@ export const manifest = defineBrickManifest({
             category: "content",
           },
         }),
-        url: urlOrPageIdRef({
+        url: urlOrPageId({
           title: "Button URL",
           description: "The URL the button should link to.",
           metadata: {
@@ -108,6 +116,11 @@ export const manifest = defineBrickManifest({
       },
       { title: "Button", description: "Button displayed at the bottom of the card" },
     ),
+    grow: Type.Optional(
+      grow({
+        default: true,
+      }),
+    ),
   }),
 });
 
@@ -174,7 +187,7 @@ export const examples: BrickExample<Manifest>[] = [
   },
   // INTERNAL PAGE ID LINK VARIANT
   {
-    description: "Internal navigation card using a page ID instead of a URL",
+    description: "Internal navigation card using a page ID for the button URL (page id = 'about')",
     type: "card",
     props: {
       title: "About Our Mission",
@@ -186,7 +199,8 @@ export const examples: BrickExample<Manifest>[] = [
   },
   // GRADIENT & STRONG BORDER VARIANT
   {
-    description: "High-emphasis promotional card using gradient background and thick border",
+    description:
+      "High-emphasis promotional card using gradient background and thick border, linking to the page with id 'pricing-page'",
     type: "card",
     props: {
       title: "Limited Time Offer",
@@ -195,37 +209,24 @@ export const examples: BrickExample<Manifest>[] = [
       border: { width: "border-4", color: "border-primary-400" },
       rounding: "rounded-xl",
       shadow: "shadow-lg",
-      button: { label: "Upgrade", url: "/pricing", color: "btn-accent" },
+      button: { label: "Upgrade", url: "pricing-page", color: "btn-accent" },
     },
   },
   // MINIMAL / FLAT VARIANT (no border, no shadow, subtle preset)
   {
-    description: "Minimal flat information card (border-0, no shadow)",
+    description:
+      "Minimal flat information card (border-0, no shadow) linking to the page with id 'status-page'",
     type: "card",
     props: {
       title: "Maintenance Window",
       text: "Scheduled maintenance on Saturday 02:00–03:00 UTC. API responses may be delayed.",
       colorPreset: { color: "neutral-50" },
       border: { width: "border-0", color: "border-neutral-200" },
-      button: { label: "Status Page", url: "/status", color: "btn-neutral" },
-    },
-  },
-  // DARK / INVERTED VARIANT
-  {
-    description: "Dark themed spotlight card (primary-800 background)",
-    type: "card",
-    props: {
-      title: "Night Mode Preview",
-      text: "Experience the new adaptive dark theme optimized for low ambient light environments.",
-      colorPreset: { color: "primary-800" },
-      border: { width: "border", color: "border-primary-600" },
-      rounding: "rounded-lg",
-      shadow: "shadow-md",
-      button: { label: "Preview", url: "/themes/dark", color: "btn-primary" },
+      button: { label: "Status Page", url: "status-page", color: "btn-neutral" },
     },
   },
   {
-    description: "Feature card with large padding and background",
+    description: "Feature card with large padding and background, linking to a dynamic product page",
     type: "card",
     props: {
       title: "Key Feature",
@@ -236,13 +237,13 @@ export const examples: BrickExample<Manifest>[] = [
       shadow: "shadow-sm",
       button: {
         label: "Discover More",
-        url: "/features",
+        url: "/product/{{ product.$slug }}",
         color: "btn-primary",
       },
     },
   },
   {
-    description: "Blog post card with image at the bottom",
+    description: "Blog post card with image at the bottom, linking to a dynamic blog post",
     type: "card",
     props: {
       title: "Future of Tech",
@@ -256,65 +257,8 @@ export const examples: BrickExample<Manifest>[] = [
         url: "/blog/{{ blogPosts.$slug }}",
         color: "btn-primary",
       },
-    },
-  },
-  {
-    description: "Minimal centered card without image",
-    type: "card",
-    props: {
-      title: "Simple Announcement",
-      text: "Important updates will be posted here regularly.",
-      button: {
-        label: "View Updates",
-        url: "/updates",
-        color: "btn-neutral",
-      },
-    },
-  },
-  {
-    description: "Event card with multiple variants",
-    type: "card",
-    props: {
-      cardImage: {
-        src: "https://via.placeholder.com/400x250",
-        alt: "Event venue",
-      },
-      title: "Annual Conference 2025",
-      text: "Join us for three days of inspiring talks, networking opportunities, and hands-on workshops.",
-      button: {
-        label: "Register Now",
-        url: "/events/conference-2025",
-        color: "btn-primary",
-      },
-    },
-  },
-  {
-    description: "News article card with compact layout",
-    type: "card",
-    props: {
-      cardImage: {
-        src: "https://via.placeholder.com/120x120",
-        alt: "News thumbnail",
-      },
-      title: "Breaking News Update",
-      text: "Latest developments in the ongoing story with expert analysis and community reactions.",
-      button: {
-        label: "Read Full Article",
-        url: "/news/breaking-update",
-        color: "btn-secondary",
-      },
-    },
-  },
-  {
-    description: "Call-to-action card with prominent styling",
-    type: "card",
-    props: {
-      title: "Get Started Today",
-      text: "Transform your workflow with our powerful tools. Sign up now and get 30 days free!",
-      button: {
-        label: "Sign Up Now",
-        url: "/signup",
-        color: "btn-primary",
+      loop: {
+        over: "blogPosts",
       },
     },
   },
@@ -416,77 +360,4 @@ export const examples: BrickExample<Manifest>[] = [
       },
     },
   },
-  {
-    description: "Testimonial card using customerReviews query with ratings",
-    type: "card",
-    props: {
-      cardImage: {
-        src: "{{customerReviews.customerPhoto}}",
-        alt: "{{customerReviews.customerName}}",
-      },
-      imagePosition: "top",
-      title: "{{customerReviews.customerName}}",
-      text: '"{{customerReviews.review}}"<br><br><strong>Rating: {{customerReviews.rating}}/5 stars</strong><br>{{customerReviews.company}} • {{customerReviews.position}}',
-      colorPreset: { color: "neutral-50" },
-      rounding: "rounded-xl",
-      shadow: "shadow-lg",
-      button: {
-        label: "See All Reviews",
-        url: "/reviews",
-        color: "btn-neutral",
-      },
-      loop: {
-        over: "customerReviews",
-      },
-    },
-  },
-  {
-    description: "Service offering card using companyServices query with pricing tiers",
-    type: "card",
-    props: {
-      cardImage: {
-        src: "{{companyServices.icon}}",
-        alt: "{{companyServices.serviceName}}",
-      },
-      imagePosition: "top",
-      title: "{{companyServices.serviceName}}",
-      text: "{{companyServices.description}}<br><br><strong>Starting at ${{companyServices.startingPrice}}</strong><br>Duration: {{companyServices.duration}}<br>Includes: {{companyServices.features}}",
-      colorPreset: { color: "primary-100" },
-      border: { width: "border", color: "border-primary-300" },
-      rounding: "rounded-lg",
-      shadow: "shadow-md",
-      button: {
-        label: "Learn More",
-        url: "{{companyServices.detailsUrl}}",
-        color: "btn-primary",
-      },
-      loop: {
-        over: "companyServices",
-      },
-    },
-  },
-  {
-    description: "Portfolio project card using portfolioWork query with project details",
-    type: "card",
-    props: {
-      cardImage: {
-        src: "{{portfolioWork.thumbnail}}",
-        alt: "{{portfolioWork.projectName}}",
-      },
-      imagePosition: "top",
-      title: "{{portfolioWork.projectName}}",
-      text: "<strong>Client:</strong> {{portfolioWork.clientName}}<br><strong>Year:</strong> {{portfolioWork.year}}<br><strong>Category:</strong> {{portfolioWork.category}}<br><br>{{portfolioWork.description}}",
-      colorPreset: { color: "secondary-100" },
-      rounding: "rounded-md",
-      shadow: "shadow-sm",
-      button: {
-        label: "View Project",
-        url: "{{portfolioWork.projectUrl}}",
-        color: "btn-secondary",
-      },
-      loop: {
-        over: "portfolioWork",
-      },
-    },
-  },
 ];

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()),
   }),
 });