@upstart.gg/sdk 0.0.135 → 0.0.137

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

@@ -1,35 +1,67 @@
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
-import { imageRef } from "../props/image";
-import { shadowRef } from "../props/effects";
+import { image } from "../props/image";
+import { shadow } from "../props/effects";
 import { RxImage } from "react-icons/rx";
-import { string } from "../props/string";
 import { Type } from "@sinclair/typebox";
 import type { BrickProps } from "../props/types";
-import { backgroundColorRef } from "../props/background";
-import { borderRef, roundingRef } from "../props/border";
-import { loopRef } from "../props/dynamic";
-import { colorPresetRef } from "../props/color-preset";
-import { cssLengthRef } from "../props/css-length";
+import { border, rounding } from "../props/border";
+import { loop } from "../props/dynamic";
+import { cssLength } from "../props/css-length";
+import { colorPreset } from "../props/color-preset";
 
 export const manifest = defineBrickManifest({
   type: "image",
   name: "Image",
   category: "media",
   description: "An image brick",
-  aiInstructions:
-    "An image brick that can display an image with optional styling such as padding, border radius, and shadow. It supports giving credit to the image author and specifying the image provider.",
+  aiInstructions: `PURPOSE
+Display a single image with optional framing (padding, rounding, border, shadow, colorPreset) and attribution (author/provider). Can also loop over a dataset showing one image per item.
+
+REQUIRED
+• 'image.src' and 'image.alt' (alt must be meaningful, not empty; may interpolate page queries fields).
+
+COLOR & BACKGROUND
+• colorPreset is optional – use when you need a frame or tone behind the image (neutral / accent / primary / secondary / base or gradient variants). Omit to keep a transparent/inherited background.
+• Only use gradientDirection when the preset is a gradient token (e.g. primary-gradient-400).
+
+STYLING
+• padding should be a single css length value (like '1rem' or '0.75rem').
+• rounding defaults to a modest radius; override for circular avatars (rounded-full) or strong accent (rounded-xl).
+• border optional: keep subtle (border / border-2) unless emphasis required.
+• Use shadow sparingly (shadow-sm / shadow-md); large (shadow-xl) for hero or banner impact.
+
+ATTRIBUTION
+• If using external photography include author { name, url } and provider (e.g. 'unsplash'). Omit provider if internal asset.
+
+DYNAMIC DATA
+• Interpolate dataset fields with {{dataset.field}} in src and alt.
+• For lists: use loop.over = "datasetName". Provide exactly one example object (this component itself) when looping (do not replicate multiple objects).
+
+RESPONSIVE
+• mobileProps may reduce padding or alter rounding only if it materially improves mobile layout. Always repeat required fields (image.src, image.alt) if providing mobileProps.
+
+DON'TS
+✗ Don't add unrelated props.
+✗ Don't fabricate color tokens (no success-, warning-, danger- etc.).
+✗ Don't use HTML markup inside alt.
+
+DO
+✓ Provide descriptive alt text (<125 chars) describing content or function.
+✓ Use semantic color presets consistently.
+✓ Add author/provider when you have them.
+`,
   defaultWidth: { desktop: "auto", mobile: "100%" },
   icon: RxImage,
   props: defineProps({
-    image: imageRef({
+    image: image({
       metadata: {
         category: "content",
       },
     }),
-    colorPreset: Type.Optional(colorPresetRef()),
+    colorPreset: Type.Optional(colorPreset()),
     padding: Type.Optional(
-      cssLengthRef({
+      cssLength({
         description: "Padding inside the image.",
         title: "Padding",
         "ai:instructions": "Use only a single value like '1rem' or '10px'",
@@ -39,14 +71,15 @@ 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()),
     blurHash: Type.Optional(
-      string("Blur Hash", {
+      Type.String({
+        title: "Blur hash",
         "ui:field": "hidden",
         description: "A placeholder for the image while it is loading. Use a blur hash string.",
       }),
@@ -54,10 +87,13 @@ export const manifest = defineBrickManifest({
     author: Type.Optional(
       Type.Object(
         {
-          name: string("Image Author", {
+          name: Type.String({
+            title: "Image Author",
             description: "Image author. Use this to give credit to the author",
           }),
-          url: string("Image Author URL", {
+          url: Type.String({
+            title: "Image Author URL",
+            format: "uri",
             description: "Image author URL. Use this to give credit to the author",
           }),
         },
@@ -67,12 +103,13 @@ export const manifest = defineBrickManifest({
       ),
     ),
     provider: Type.Optional(
-      string("Image Provider", {
+      Type.String({
+        title: "Image Provider",
         "ui:field": "hidden",
         "ai:instructions": "The provider of the image, e.g. 'unsplash', 'pexels', etc.",
       }),
     ),
-    loop: Type.Optional(loopRef()),
+    loop: Type.Optional(loop()),
   }),
 });
 
@@ -82,6 +119,7 @@ export const examples: {
   description: string;
   type: string;
   props: BrickProps<Manifest>["brick"]["props"];
+  mobileProps?: BrickProps<Manifest>["brick"]["props"];
 }[] = [
   {
     description: "Hero landscape image with large shadow",
@@ -94,6 +132,20 @@ export const examples: {
       shadow: "shadow-lg",
     },
   },
+  {
+    description: "Framed image with accent gradient background and padding",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/640x360.png?text=Showcase",
+        alt: "Showcase screenshot inside accent gradient frame",
+      },
+      colorPreset: { color: "accent-gradient-400", gradientDirection: "bg-gradient-to-br" },
+      padding: "1rem",
+      rounding: "rounded-xl",
+      shadow: "shadow-md",
+    },
+  },
   {
     description: "Team member profile photo, full rounded",
     type: "image",
@@ -146,6 +198,21 @@ export const examples: {
       shadow: "shadow-sm",
     },
   },
+  {
+    description: "Dark framed image with neutral-800 background and subtle border",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/500x300.png?text=Dark+Mode",
+        alt: "Interface preview in dark mode",
+      },
+      colorPreset: { color: "neutral-800" },
+      padding: "1rem",
+      border: { width: "border", color: "border-neutral-700" },
+      rounding: "rounded-lg",
+      shadow: "shadow-md",
+    },
+  },
   {
     description: "Testimonial customer photo with large shadow and small padding",
     type: "image",
@@ -199,6 +266,29 @@ export const examples: {
       blurHash: "L6PZfSi_.AyE_3t7t7R**0o#DgR4",
     },
   },
+  {
+    description: "Responsive image with reduced mobile padding",
+    type: "image",
+    props: {
+      image: {
+        src: "https://via.placeholder.com/640x360.png?text=Responsive",
+        alt: "Responsive framed screenshot",
+      },
+      padding: "2rem",
+      colorPreset: { color: "primary-50" },
+      rounding: "rounded-xl",
+      shadow: "shadow-sm",
+    },
+    mobileProps: {
+      image: {
+        src: "https://via.placeholder.com/640x360.png?text=Responsive",
+        alt: "Responsive framed screenshot",
+      },
+      padding: "1rem",
+      colorPreset: { color: "primary-50" },
+      rounding: "rounded-lg",
+    },
+  },
   {
     description: "Dynamic employee photo using employee query",
     type: "image",
@@ -259,6 +349,20 @@ export const examples: {
       provider: "event-photography",
     },
   },
+  {
+    description: "Loop template: product gallery (one definition, repeated by loop.over)",
+    type: "image",
+    props: {
+      image: {
+        src: "{{products.mainImage}}",
+        alt: "{{products.name}} – {{products.category}}",
+      },
+      rounding: "rounded-md",
+      padding: "0.5rem",
+      shadow: "shadow-sm",
+      loop: { over: "products" },
+    },
+  },
   {
     description: "Dynamic article featured image using article query",
     type: "image",

package/src/shared/bricks/manifests/images-gallery.manifest.ts

@@ -2,13 +2,12 @@ import { Type } from "@sinclair/typebox";
 import { IoGridOutline } from "react-icons/io5";
 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 { colorPresetRef } from "../props/color-preset";
-import { borderRef, roundingRef } from "../props/border";
-import { loopRef } from "../props/dynamic";
-import { cssLengthRef } from "../props/css-length";
+import { image } from "../props/image";
+import { colorPreset } from "../props/color-preset";
+import { border, rounding } from "../props/border";
+import { loop } from "../props/dynamic";
+import { cssLength } from "../props/css-length";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "images-gallery",
@@ -33,20 +32,20 @@ export const manifest = defineBrickManifest({
   icon: IoGridOutline,
   props: defineProps({
     colorPreset: Type.Optional(
-      colorPresetRef({
+      colorPreset({
         title: "Color",
       }),
     ),
-    loop: Type.Optional(loopRef()),
+    loop: Type.Optional(loop()),
     images: Type.Array(
       Type.Object({
-        image: imageRef({
+        image: image({
           "ui:responsive": "desktop",
           "ui:no-alt-text": true,
           "ui:no-object-options": true,
           "ui:placeholder": "https://example.com/image.jpg",
         }),
-        legend: Type.Optional(string("Legend")),
+        legend: Type.Optional(Type.String({ title: "Legend" })),
       }),
       {
         title: "Images",
@@ -85,7 +84,7 @@ export const manifest = defineBrickManifest({
       }),
     ),
     gap: Type.Optional(
-      cssLengthRef({
+      cssLength({
         title: "Gap",
         description: "The gap between the images.",
         default: "1rem",
@@ -93,7 +92,7 @@ export const manifest = defineBrickManifest({
       }),
     ),
     padding: Type.Optional(
-      cssLengthRef({
+      cssLength({
         default: "3rem",
         description: "Padding inside the gallery.",
         "ai:instructions": "Use only a single value like '1rem' or '10px'",
@@ -103,18 +102,14 @@ export const manifest = defineBrickManifest({
         "ui:styleId": "styles:padding",
       }),
     ),
-    rounding: Type.Optional(roundingRef()),
-    border: Type.Optional(borderRef()),
+    rounding: rounding(),
+    border: Type.Optional(border()),
   }),
 });
 
 export type Manifest = typeof manifest;
 
-export const examples: {
-  description: string;
-  type: string;
-  props: BrickProps<Manifest>["brick"]["props"];
-}[] = [
+export const examples: BrickExample<Manifest>[] = [
   {
     description: "Product portfolio gallery (3-column grid)",
     type: "images-gallery",

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

@@ -1,12 +1,11 @@
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
 import { LiaMapMarkedAltSolid } from "react-icons/lia";
-import { roundingRef } from "../props/border";
-import { shadowRef } from "../props/effects";
-import type { BrickProps } from "../props/types";
+import { rounding } from "../props/border";
+import { shadow } from "../props/effects";
 import { Type } from "@sinclair/typebox";
 import { number } from "../props/number";
-import { string } from "../props/string";
+import type { BrickExample } from "./_types";
 
 export const DEFAULTS = {
   lat: 48.8566, // Default latitude (Paris)
@@ -39,16 +38,18 @@ export const manifest = defineBrickManifest({
   icon: LiaMapMarkedAltSolid,
   props: defineProps({
     // location: geolocation({ defaultZoom: DEFAULTS.zoom }),
-    lat: string("Latitude", { "ui:field": "hidden" }),
-    lng: string("Longitude", { "ui:field": "hidden" }),
-    address: string("Address", {
+    lat: Type.String({ title: "Latitude", "ui:field": "hidden" }),
+    lng: Type.String({ title: "Longitude", "ui:field": "hidden" }),
+    address: Type.String({
+      title: "Address",
       "ui:field": "geoaddress",
       metadata: {
         category: "content",
       },
     }),
     tooltip: Type.Optional(
-      string("Tooltip", {
+      Type.String({
+        title: "Tooltip",
         metadata: {
           category: "content",
         },
@@ -68,21 +69,17 @@ export const manifest = defineBrickManifest({
       }),
     ),
     rounding: Type.Optional(
-      roundingRef({
+      rounding({
         default: "rounded-xl",
       }),
     ),
-    shadow: Type.Optional(shadowRef()),
+    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: "Map showing a specific location",
     type: "map",

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

@@ -1,16 +1,18 @@
 import { type Static, type TObject, Type } from "@sinclair/typebox";
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
-import { string, urlOrPageIdRef } from "../props/string";
-import { imageRef } from "../props/image";
-import { textContentRef } from "../props/text";
-import { shadowRef } from "../props/effects";
+import { urlOrPageId } from "../props/string";
+import { image } from "../props/image";
+import { textContent } from "../props/text";
+import { shadow } from "../props/effects";
 import { boolean } from "../props/boolean";
 import { VscLayoutPanelOff } from "react-icons/vsc";
 import type { BrickProps } from "../props/types";
-import { colorPresetRef } from "../props/color-preset";
-import { tagsRef } from "../props/tags";
+import { colorPreset } from "../props/color-preset";
+import { tags } from "../props/tags";
 import { toLLMSchema } from "~/shared/utils/llm";
+import type { BrickExample } from "./_types";
+import { StringEnum } from "~/shared/utils/string-enum";
 
 export const manifest = defineBrickManifest({
   type: "navbar",
@@ -31,14 +33,14 @@ export const manifest = defineBrickManifest({
   props: defineProps(
     {
       colorPreset: Type.Optional(
-        colorPresetRef({
+        colorPreset({
           title: "Color",
           default: { color: "primary-500" },
           examples: [{ color: "primary-500" }, { color: "neutral-900" }, { color: "secondary-200" }],
         }),
       ),
       brand: Type.Optional(
-        textContentRef({
+        textContent({
           title: "Brand name",
           default: "Acme Inc.",
           disableSizing: true,
@@ -51,7 +53,7 @@ export const manifest = defineBrickManifest({
         }),
       ),
       logo: Type.Optional(
-        imageRef({
+        image({
           title: "Logo",
           "ui:show-img-search": false,
           "ui:no-object-options": true,
@@ -74,7 +76,7 @@ export const manifest = defineBrickManifest({
         }),
       ),
       linksTagsFilter: Type.Optional(
-        tagsRef({
+        tags({
           title: "Pages tags",
           description: "Filter pages links in the navbar by tags. Only pages with these tags will be shown.",
           default: ["navbar"],
@@ -87,8 +89,8 @@ export const manifest = defineBrickManifest({
       staticNavItems: Type.Optional(
         Type.Array(
           Type.Object({
-            urlOrPageId: urlOrPageIdRef(),
-            label: Type.Optional(string("Label")),
+            urlOrPageId: urlOrPageId(),
+            label: Type.Optional(Type.String({ title: "Label" })),
           }),
           {
             title: "Static links",
@@ -109,16 +111,14 @@ export const manifest = defineBrickManifest({
         ),
       ),
       linksPosition: Type.Optional(
-        Type.Union(
-          [
-            Type.Literal("left", { title: "Left" }),
-            Type.Literal("center", { title: "Center" }),
-            Type.Literal("right", { title: "Right" }),
-          ],
-          { title: "Links position", default: "right", "ui:responsive": "desktop" },
-        ),
+        StringEnum(["left", "center", "right"], {
+          enumNames: ["Left", "Center", "Right"],
+          title: "Links position",
+          default: "right",
+          "ui:responsive": "desktop",
+        }),
       ),
-      shadow: Type.Optional(shadowRef()),
+      shadow: Type.Optional(shadow()),
     },
     { noAlignSelf: true, noGrow: true },
   ),
@@ -129,11 +129,7 @@ export type NavbarProps = Static<Manifest["props"]>;
 
 export const navbarSchemaPropsLLM = toLLMSchema(manifest.props);
 
-export const examples: {
-  description: string;
-  type: string;
-  props: BrickProps<Manifest>["brick"]["props"];
-}[] = [
+export const examples: BrickExample<Manifest>[] = [
   {
     description:
       "Corporate technology company navbar featuring company logo with right-aligned navigation links filtered by navbar and featured tags",

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

@@ -2,12 +2,13 @@ import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps, group } from "../props/helpers";
 import { VscLayoutSidebarLeftOff } from "react-icons/vsc";
 import { Type } from "@sinclair/typebox";
-import { string, urlOrPageIdRef } from "../props/string";
-import { backgroundColorRef } from "../props/background";
-import { borderRef } from "../props/border";
+import { urlOrPageId } from "../props/string";
+import { backgroundColor } from "../props/background";
+import { border } from "../props/border";
 import { fixedPositioned } from "../props/position";
 import type { BrickProps } from "../props/types";
-import { shadowRef } from "../props/effects";
+import { shadow } from "../props/effects";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "sidebar",
@@ -29,9 +30,9 @@ export const manifest = defineBrickManifest({
       group({
         title: "Main element",
         children: {
-          backgroundColor: Type.Optional(backgroundColorRef()),
-          border: Type.Optional(borderRef()),
-          shadow: Type.Optional(shadowRef()),
+          backgroundColor: Type.Optional(backgroundColor()),
+          border: Type.Optional(border()),
+          shadow: Type.Optional(shadow()),
           fixedPositioned: Type.Optional(fixedPositioned()),
         },
         metadata: {
@@ -46,8 +47,8 @@ export const manifest = defineBrickManifest({
           navItems: Type.Optional(
             Type.Array(
               Type.Object({
-                urlOrPageId: urlOrPageIdRef(),
-                label: Type.Optional(string("Label")),
+                urlOrPageId: urlOrPageId(),
+                label: Type.Optional(Type.String({ title: "Label" })),
               }),
               { title: "Navigation items", default: [] },
             ),
@@ -60,11 +61,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: "Standard sidebar with navigation links base on site pages",
     type: "sidebar",

package/src/shared/bricks/manifests/social-links.manifest.ts

@@ -2,13 +2,14 @@ import { Type } from "@sinclair/typebox";
 import { TiSocialFlickr } from "react-icons/ti";
 import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
-import { iconRef, string } from "../props/string";
+import { icon } from "../props/string";
 import type { BrickProps } from "../props/types";
-import { fontSizeRef } from "../props/text";
-import { directionRef } from "../props/direction";
-import { colorPresetRef } from "../props/color-preset";
-import { borderRef, roundingRef } from "../props/border";
-import { cssLengthRef } from "../props/css-length";
+import { fontSize } from "../props/text";
+import { direction } from "../props/direction";
+import { colorPreset } from "../props/color-preset";
+import { border, rounding } from "../props/border";
+import { cssLength } from "../props/css-length";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "social-links",
@@ -20,19 +21,19 @@ export const manifest = defineBrickManifest({
   },
   props: defineProps({
     colorPreset: Type.Optional(
-      colorPresetRef({
+      colorPreset({
         title: "Color",
       }),
     ),
     links: Type.Array(
       Type.Object({
         icon: Type.Optional(
-          iconRef({
+          icon({
             "ui:default-icon-collection": "cib",
           }),
         ),
-        label: Type.Optional(string("Label")),
-        href: string("Link"),
+        label: Type.Optional(Type.String({ title: "Label" })),
+        href: Type.String({ title: "Link" }),
       }),
       {
         title: "Social Links",
@@ -67,13 +68,13 @@ export const manifest = defineBrickManifest({
       },
     ),
     direction: Type.Optional(
-      directionRef({
+      direction({
         default: "flex-row",
       }),
     ),
-    fontSize: Type.Optional(fontSizeRef()),
+    fontSize: Type.Optional(fontSize()),
     padding: Type.Optional(
-      cssLengthRef({
+      cssLength({
         default: "2rem",
         description: "Padding.",
         "ai:instructions": "Use only a single value like '1rem' or '10px'",
@@ -83,12 +84,10 @@ export const manifest = defineBrickManifest({
         "ui:styleId": "styles:padding",
       }),
     ),
-    rounding: Type.Optional(
-      roundingRef({
-        default: "rounded-md",
-      }),
-    ),
-    border: Type.Optional(borderRef()),
+    rounding: rounding({
+      default: "rounded-md",
+    }),
+    border: Type.Optional(border()),
     iconOnly: Type.Optional(
       Type.Boolean({
         title: "Only icons",
@@ -100,11 +99,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: "Social icons displayed horizontally, without labels",
     type: "social-links",

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

@@ -2,6 +2,7 @@ import { defineBrickManifest } from "~/shared/brick-manifest";
 import { defineProps } from "../props/helpers";
 import type { BrickProps } from "../props/types";
 import { CgSpaceBetween } from "react-icons/cg";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "spacer",
@@ -25,11 +26,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: "Transparent spacer of 100px wide",
     type: "spacer",