@upstart.gg/sdk 0.0.136 → 0.0.137

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

@@ -2,15 +2,15 @@ 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({
@@ -26,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: {
@@ -42,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'",
@@ -58,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.",
@@ -68,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.",
@@ -80,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",

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

@@ -1,14 +1,14 @@
 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 } 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({
@@ -56,24 +56,24 @@ BEST PRACTICES:
   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'",
@@ -83,14 +83,11 @@ BEST PRACTICES:
         "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()),
   }),
 });
 

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

@@ -1,14 +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" })),
@@ -41,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",
     }),
@@ -55,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",
@@ -75,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",
@@ -91,7 +95,7 @@ export const manifest = defineBrickManifest({
     ),
 
     connectorColor: Type.Optional(
-      colorPresetRef({
+      colorPreset({
         title: "Connector Color",
         description: "Color of the timeline connector line",
       }),
@@ -99,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",
@@ -113,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",
@@ -131,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",
@@ -140,42 +145,42 @@ 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()),
   }),
 });
 
@@ -254,8 +259,8 @@ export const examples: BrickExample<Manifest>[] = [
         },
       ],
       layout: "alternating",
-      colorPreset: { color: "blue-500" },
-      connectorColor: { color: "blue-300" },
+      colorPreset: { color: "primary-500" },
+      connectorColor: { color: "primary-300" },
       itemSpacing: "3rem",
     },
   },
@@ -382,8 +387,8 @@ export const examples: BrickExample<Manifest>[] = [
         },
       ],
       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",
     },
@@ -426,13 +431,13 @@ export const examples: BrickExample<Manifest>[] = [
           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,10 @@
 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({
@@ -32,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",
@@ -42,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",
@@ -52,12 +51,12 @@ 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()),
   }),
 });
 

package/src/shared/bricks/props/align.ts

@@ -1,6 +1,5 @@
 import type { Static, StringOptions } from "@sinclair/typebox";
 import { StringEnum } from "~/shared/utils/string-enum";
-import { typedRef } from "~/shared/utils/typed-ref";
 
 export function justifyContent(options: StringOptions = {}) {
   return StringEnum(
@@ -20,10 +19,6 @@ export function justifyContent(options: StringOptions = {}) {
 
 export type JustifyContentSettings = Static<ReturnType<typeof justifyContent>>;
 
-export function justifyContentRef(options: StringOptions = {}) {
-  return typedRef("styles:justifyContent", options);
-}
-
 export function alignItems(options: StringOptions = {}) {
   return StringEnum(["items-start", "items-center", "items-end", "items-stretch"], {
     enumNames: ["Start", "Center", "End", "Stretch"],
@@ -39,10 +34,6 @@ export function alignItems(options: StringOptions = {}) {
 
 export type AlignItemsSettings = Static<ReturnType<typeof alignItems>>;
 
-export function alignItemsRef(options: StringOptions = {}) {
-  return typedRef("styles:alignItems", options);
-}
-
 export function alignSelf(options: StringOptions = {}) {
   return StringEnum(["self-auto", "self-start", "self-center", "self-end", "self-stretch"], {
     enumNames: ["Auto", "Start", "Center", "End", "Stretch"],
@@ -57,7 +48,3 @@ export function alignSelf(options: StringOptions = {}) {
 }
 
 export type AlignSelfSettings = Static<ReturnType<typeof alignSelf>>;
-
-export function alignSelfRef(options: StringOptions = {}) {
-  return typedRef("styles:alignSelf", options);
-}

package/src/shared/bricks/props/background.ts

@@ -1,7 +1,6 @@
 import { type SchemaOptions, Type, type Static } from "@sinclair/typebox";
 import type { ElementColorType } from "~/shared/themes/color-system";
 import { StringEnum } from "~/shared/utils/string-enum";
-import { typedRef } from "~/shared/utils/typed-ref";
 
 type BackgroundOptions = {
   title?: string;
@@ -14,7 +13,6 @@ type BackgroundOptions = {
 };
 
 export function background(opts: BackgroundOptions = {}) {
-  const { default: defValue, ...restOpts } = opts;
   return Type.Object(
     {
       image: Type.String({
@@ -26,14 +24,12 @@ export function background(opts: BackgroundOptions = {}) {
       size: Type.Optional(
         StringEnum(["auto", "cover", "contain"], {
           enumNames: ["Auto", "Cover", "Contain"],
-          default: defValue?.size ?? "auto",
           "ai:instructions": "Only use this when the image is set.",
         }),
       ),
       repeat: Type.Optional(
         StringEnum(["no-repeat", "repeat", "repeat-x", "repeat-y", "space", "round"], {
           enumNames: ["No repeat", "Repeat", "Repeat horizontally", "Repeat vertically", "Space", "Round"],
-          default: defValue?.repeat ?? "no-repeat",
           "ai:instructions": "Only use this when the image is set.",
         }),
       ),
@@ -45,18 +41,13 @@ export function background(opts: BackgroundOptions = {}) {
       title: "Background image",
       // disable for now
       // "ui:show-img-search": true,
-      default: defValue,
-      ...restOpts,
+      ...opts,
     },
   );
 }
 
 export type BackgroundSettings = Static<ReturnType<typeof background>>;
 
-export function backgroundRef(options: SchemaOptions = {}) {
-  return typedRef("styles:background", options);
-}
-
 export function backgroundColor(options: SchemaOptions = {}) {
   return Type.String({
     title: "Background color",
@@ -73,7 +64,3 @@ export function backgroundColor(options: SchemaOptions = {}) {
 }
 
 export type BackgroundColorSettings = Static<ReturnType<typeof backgroundColor>>;
-
-export function backgroundColorRef(options: SchemaOptions = {}) {
-  return typedRef("styles:backgroundColor", options);
-}

package/src/shared/bricks/props/border.ts

@@ -1,7 +1,6 @@
 import { type ObjectOptions, Type, type Static, type StringOptions } from "@sinclair/typebox";
-import { typedRef } from "~/shared/utils/typed-ref";
 import { StringEnum } from "~/shared/utils/string-enum";
-import { borderColorRef } from "./color";
+import { borderColor } from "./color";
 
 export function border(opts: ObjectOptions = {}) {
   return Type.Object(
@@ -15,7 +14,7 @@ export function border(opts: ObjectOptions = {}) {
         "ui:placeholder": "None",
         default: "border-0",
       }),
-      color: borderColorRef({
+      color: borderColor({
         title: "Color",
         description: "The color of the border.",
         default: "border-current",
@@ -48,12 +47,6 @@ export function border(opts: ObjectOptions = {}) {
 
 export type BorderSettings = Static<ReturnType<typeof border>>;
 
-export function borderRef(
-  options: Omit<ObjectOptions, "default"> & { default?: Partial<BorderSettings> } = {},
-) {
-  return typedRef("styles:border", options);
-}
-
 export function rounding(opts: StringOptions = {}) {
   return Type.Optional(
     StringEnum(
@@ -80,7 +73,3 @@ export function rounding(opts: StringOptions = {}) {
 }
 
 export type RoundingSettings = Static<ReturnType<typeof rounding>>;
-
-export function roundingRef(options: StringOptions = {}) {
-  return typedRef("styles:rounding", options);
-}

package/src/shared/bricks/props/color-preset.ts

@@ -1,13 +1,12 @@
 import { type Static, type ObjectOptions, Type, type StringOptions, TObject } from "@sinclair/typebox";
 import { StringEnum } from "~/shared/utils/string-enum";
-import { typedRef } from "~/shared/utils/typed-ref";
 
 type ColorPresetOptions = ObjectOptions & {
   "ui:presets"?: Record<string, { className: string; label: string }>;
   "ui:default-gradient-direction"?: string;
 };
 
-export const colorPresets: NonNullable<ColorPresetOptions["ui:presets"]> = {
+export const colorPresets = {
   "primary-50": {
     className: "bg-primary-50 text-primary-50-content",
     label: "Primary 50",
@@ -320,21 +319,25 @@ export const colorPresets: NonNullable<ColorPresetOptions["ui:presets"]> = {
     className: "",
     label: "None",
   },
-};
+} as const;
+
+export type ColorPreset = keyof typeof colorPresets;
 
 export function colorPreset(options: ColorPresetOptions = {}) {
   return Type.Object(
     {
-      color: StringEnum(Object.keys(colorPresets), {
+      color: StringEnum(Object.keys(colorPresets) as Array<ColorPreset>, {
         title: "Color preset",
         description: "Color preset to apply to background and text",
-        enumNames: Object.keys(colorPresets).map((key) => colorPresets[key].label),
+        enumNames: Object.keys(colorPresets).map(
+          (key) => colorPresets[key as keyof typeof colorPresets].label,
+        ),
         "ai:instructions": `Presets are predefined color combinations of background and text colors that can be applied to elements.
 The possible semantic colors are primary, secondary, accent, neutral, and base, each declined in various shades from 50 to 900. (except base which has only 100, 200, and 300).
 You can use gradients using color gradient variations (e.g. primary-gradient-100, secondary-gradient-200, etc.). In this case, you will also need to set the gradient direction.`,
         "ui:styleId": "presets:color",
         "ui:responsive": true,
-        default: options.default?.color,
+        default: options.default?.color ?? "none",
       }),
       gradientDirection: Type.Optional(gradientDirection(options)),
     },
@@ -356,10 +359,6 @@ You can use gradients using color gradient variations (e.g. primary-gradient-100
 
 export type ColorPresetSettings = Static<ReturnType<typeof colorPreset>>;
 
-export function colorPresetRef(options: ColorPresetOptions = {}) {
-  return typedRef("presets:color", options);
-}
-
 function gradientDirection(options: StringOptions = {}) {
   return StringEnum(
     [

package/src/shared/bricks/props/color.ts

@@ -1,40 +1,29 @@
-import { type SchemaOptions, type Static, type StringOptions, type TObject, Type } from "@sinclair/typebox";
-import { typedRef } from "~/shared/utils/typed-ref";
+import { type Static, type StringOptions, Type } from "@sinclair/typebox";
 
-export function color(defaultValue?: string, title = "Text color") {
+export function color(options: StringOptions = {}) {
   return Type.String({
-    title,
-    // $id: "styles:color",
+    title: "Text color",
     "ai:instructions":
       "hex/rgb/rgba color or classes like `text-<variant>-<shade>`, variants being `primary`, `secondary`, `accent` and `neutral`, and shades between 50 and 900",
-    default: defaultValue,
     "ui:styleId": "styles:color",
     "ui:field": "color",
     "ui:color-type": "text",
+    ...options,
   });
 }
 
 export type ColorSettings = Static<ReturnType<typeof color>>;
 
-export function colorRef(options: SchemaOptions = {}) {
-  return typedRef("styles:color", { ...options, "ui:styleId": "styles:color" });
-}
-
-export function borderColor(defaultValue?: string, title = "Border color") {
+export function borderColor(options: StringOptions = {}) {
   return Type.String({
-    title,
-    // $id: "styles:borderColor",
+    title: "Border color",
     "ai:instructions":
       "hex/rgb/rgba color or classes like `border-<variant>-<shade>`, variants being `primary`, `secondary`, `accent` and `neutral`, and shades between 50 and 900",
-    default: defaultValue,
     "ui:styleId": "styles:borderColor",
     "ui:field": "color",
     "ui:color-type": "border",
+    ...options,
   });
 }
 
 export type BorderColorSettings = Static<ReturnType<typeof borderColor>>;
-
-export function borderColorRef(options: SchemaOptions = {}) {
-  return typedRef("styles:borderColor", { ...options, "ui:styleId": "styles:borderColor" });
-}