@upstart.gg/sdk 0.0.134 → 0.0.136

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

@@ -7,13 +7,57 @@ import { Type } from "@sinclair/typebox";
 import { cssLengthRef } from "../props/css-length";
 import { colorRef } from "../props/color";
 import { loopRef } from "../props/dynamic";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "icon",
   name: "Icon",
   category: "basic",
   description: "An icon.",
-  aiInstructions: "Uses iconify references",
+  aiInstructions: `Use the icon component for adding visual symbols and interactive elements throughout your design.
+
+WHEN TO USE:
+- Navigation elements (menu, close, arrow buttons)
+- Social media links (Facebook, Twitter, Instagram, LinkedIn)
+- Contact information (email, phone, location markers)
+- User interface actions (search, shopping cart, download)
+- Status indicators (success, warning, error, info)
+- Content enhancement (stars, hearts, thumbs up)
+- Feature highlights (checkmarks, shields, awards)
+
+ICON SELECTION:
+- Use Iconify format: "mdi:icon-name", "lucide:icon-name", "heroicons:icon-name"
+- Examples: "mdi:heart", "lucide:star", "heroicons:envelope", "mdi:facebook"
+
+SIZING GUIDELINES:
+- size: "1em" for inline text icons, "1.5em" for buttons, "2em" for headers
+- Common sizes: "16px", "20px", "24px", "32px" for pixel precision
+- Use "em" units to scale with text, "px" for fixed sizes
+- Large decorative icons: "3em", "4em", or "48px", "64px"
+
+COLOR OPTIONS:
+- color: "currentColor" inherits text color (default)
+- Hex colors: "#1877f2" (Facebook blue), "#ff0000" (red), "#10b981" (green)
+- Use brand colors for social media icons
+- Match color scheme: warnings (orange/yellow), errors (red), success (green)
+
+INTERACTIVE ICONS:
+- Add link property for clickable icons
+- External links: "https://facebook.com/yourpage"
+- Email links: "mailto:contact@example.com"
+- Phone links: "tel:+1234567890"
+- Internal pages: "/contact", "/about"
+
+DYNAMIC CONTENT:
+- Use template variables: icon: "{{ service.iconName }}"
+- Dynamic colors: color: "{{ brand.primaryColor }}"
+- Loop over data for icon lists or social media sets
+
+AVOID:
+- Oversized icons that dominate content
+- Poor contrast (light icons on light backgrounds)
+- Inconsistent icon styles within the same design
+- Missing alt text context when icons convey important information`,
   resizable: false,
   staticClasses: "!grow-0",
   icon: PiConfetti,
@@ -47,28 +91,66 @@ 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>[] = [
+  // BASIC ICONS
   {
-    description: "Large heart icon with inherited color and size",
+    description: "Heart icon with default styling - Inherits text color and size",
     type: "icon",
     props: {
       icon: "mdi:heart",
     },
   },
   {
-    description: "Shopping cart icon",
+    description: "Star icon with gold color - Perfect for ratings and reviews",
     type: "icon",
     props: {
-      icon: "mdi:cart",
+      icon: "mdi:star",
       size: "1.2em",
+      color: "#fbbf24",
+    },
+  },
+
+  // NAVIGATION ICONS
+  {
+    description: "Menu hamburger icon - Mobile navigation toggle",
+    type: "icon",
+    props: {
+      icon: "mdi:menu",
+      size: "1.8em",
+      color: "#374151",
+    },
+  },
+  {
+    description: "Search icon - Search functionality indicator",
+    type: "icon",
+    props: {
+      icon: "mdi:magnify",
+      size: "1.2em",
+      color: "#6b7280",
+    },
+  },
+  {
+    description: "Shopping cart icon - E-commerce navigation",
+    type: "icon",
+    props: {
+      icon: "mdi:cart",
+      size: "1.4em",
+      color: "#059669",
     },
   },
   {
-    description: "Social media icon with blue color and link",
+    description: "Arrow right icon - Navigation and call-to-action",
+    type: "icon",
+    props: {
+      icon: "mdi:arrow-right",
+      size: "1.1em",
+      color: "currentColor",
+    },
+  },
+
+  // SOCIAL MEDIA ICONS
+  {
+    description: "Facebook icon with official brand color and link",
     type: "icon",
     props: {
       icon: "mdi:facebook",
@@ -78,16 +160,39 @@ export const examples: {
     },
   },
   {
-    description: "Warning icon with orange color for alerts",
+    description: "Twitter/X icon with link - Social media engagement",
     type: "icon",
     props: {
-      icon: "mdi:alert-triangle",
-      size: "1.8em",
-      color: "#f59e0b",
+      icon: "mdi:twitter",
+      size: "1.5em",
+      color: "#000000",
+      link: "https://x.com/yourhandle",
+    },
+  },
+  {
+    description: "Instagram icon with gradient-inspired color",
+    type: "icon",
+    props: {
+      icon: "mdi:instagram",
+      size: "1.5em",
+      color: "#e1306c",
+      link: "https://instagram.com/yourprofile",
+    },
+  },
+  {
+    description: "LinkedIn icon with professional blue",
+    type: "icon",
+    props: {
+      icon: "mdi:linkedin",
+      size: "1.5em",
+      color: "#0077b5",
+      link: "https://linkedin.com/company/yourcompany",
     },
   },
+
+  // CONTACT INFORMATION ICONS
   {
-    description: "Email contact icon with link",
+    description: "Email icon with link - Contact information",
     type: "icon",
     props: {
       icon: "mdi:email",
@@ -97,68 +202,143 @@ export const examples: {
     },
   },
   {
-    description: "Phone icon with green color",
+    description: "Phone icon with clickable link - Direct calling",
     type: "icon",
     props: {
       icon: "mdi:phone",
       size: "1.4em",
       color: "#10b981",
+      link: "tel:+1234567890",
     },
   },
   {
-    description: "Location pin icon with red color",
+    description: "Location marker icon - Address and directions",
     type: "icon",
     props: {
       icon: "mdi:map-marker",
-      size: "2.2em",
+      size: "1.6em",
       color: "#ef4444",
     },
   },
+
+  // STATUS & FEEDBACK ICONS
   {
-    description: "Twitter/X icon with custom color and link",
+    description: "Success checkmark icon - Confirmation and completion",
     type: "icon",
     props: {
-      icon: "mdi:twitter",
-      size: "1.6em",
-      color: "#000000",
-      link: "https://x.com/yourhandle",
+      icon: "mdi:check-circle",
+      size: "1.5em",
+      color: "#10b981",
     },
   },
   {
-    description: "Star rating icon with gold color",
+    description: "Warning icon - Alerts and cautions",
     type: "icon",
     props: {
-      icon: "mdi:star",
-      size: "1.2em",
-      color: "#fbbf24",
+      icon: "mdi:alert-triangle",
+      size: "1.5em",
+      color: "#f59e0b",
     },
   },
   {
-    description: "Download icon with link and purple color",
+    description: "Error icon - Problems and failures",
     type: "icon",
     props: {
-      icon: "mdi:download",
+      icon: "mdi:alert-circle",
       size: "1.5em",
+      color: "#ef4444",
+    },
+  },
+  {
+    description: "Information icon - Help and guidance",
+    type: "icon",
+    props: {
+      icon: "mdi:information",
+      size: "1.4em",
+      color: "#3b82f6",
+    },
+  },
+
+  // ACTION ICONS
+  {
+    description: "Download icon with link - File downloads",
+    type: "icon",
+    props: {
+      icon: "mdi:download",
+      size: "1.4em",
       color: "#8b5cf6",
       link: "/files/brochure.pdf",
     },
   },
   {
-    description: "Menu hamburger icon for navigation",
+    description: "Share icon - Content sharing functionality",
     type: "icon",
     props: {
-      icon: "mdi:menu",
-      size: "1.8em",
+      icon: "mdi:share-variant",
+      size: "1.2em",
+      color: "#6b7280",
+    },
+  },
+  {
+    description: "Print icon - Document printing",
+    type: "icon",
+    props: {
+      icon: "mdi:printer",
+      size: "1.3em",
       color: "#374151",
     },
   },
+
+  // LARGE DECORATIVE ICONS
   {
-    description: "Search icon with dark color",
+    description: "Large security shield icon - Trust and safety messaging",
     type: "icon",
     props: {
-      icon: "mdi:magnify",
-      size: "1.1em",
-      color: "#1f2937",
+      icon: "mdi:shield-check",
+      size: "3em",
+      color: "#10b981",
+    },
+  },
+  {
+    description: "Large rocket icon - Innovation and growth themes",
+    type: "icon",
+    props: {
+      icon: "mdi:rocket",
+      size: "2.5em",
+      color: "#f59e0b",
+    },
+  },
+
+  // DYNAMIC CONTENT EXAMPLES
+  {
+    description: "Dynamic service icon using template variables - Data-driven icons",
+    type: "icon",
+    props: {
+      icon: "{{service.iconName}}",
+      size: "2em",
+      color: "{{service.brandColor}}",
+      link: "/services/{{service.slug}}",
+    },
+  },
+  {
+    description: "Dynamic social media icon with loop - Multiple social platforms",
+    type: "icon",
+    props: {
+      icon: "{{socialLinks.iconName}}",
+      size: "1.6em",
+      color: "{{socialLinks.brandColor}}",
+      link: "{{socialLinks.url}}",
+      loop: { over: "socialLinks" },
+    },
+  },
+  {
+    description: "Team member contact icon - Dynamic contact information",
+    type: "icon",
+    props: {
+      icon: "mdi:email",
+      size: "1.2em",
+      color: "#4f46e5",
+      link: "mailto:{{teamMember.email}}",
     },
   },
 ];

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

@@ -17,8 +17,42 @@ export const manifest = defineBrickManifest({
   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({
@@ -82,6 +116,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 +129,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 +195,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 +263,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 +346,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

@@ -9,6 +9,7 @@ import { colorPresetRef } from "../props/color-preset";
 import { borderRef, roundingRef } from "../props/border";
 import { loopRef } from "../props/dynamic";
 import { cssLengthRef } from "../props/css-length";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "images-gallery",
@@ -110,11 +111,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: "Product portfolio gallery (3-column grid)",
     type: "images-gallery",

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

@@ -7,6 +7,7 @@ import type { BrickProps } from "../props/types";
 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)
@@ -78,11 +79,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: "Map showing a specific location",
     type: "map",

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

@@ -11,6 +11,7 @@ import type { BrickProps } from "../props/types";
 import { colorPresetRef } from "../props/color-preset";
 import { tagsRef } from "../props/tags";
 import { toLLMSchema } from "~/shared/utils/llm";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "navbar",
@@ -127,15 +128,9 @@ export const manifest = defineBrickManifest({
 export type Manifest = typeof manifest;
 export type NavbarProps = Static<Manifest["props"]>;
 
-export function getNavbarSchemaForLLM() {
-  return toLLMSchema(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

@@ -8,6 +8,7 @@ import { borderRef } from "../props/border";
 import { fixedPositioned } from "../props/position";
 import type { BrickProps } from "../props/types";
 import { shadowRef } from "../props/effects";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "sidebar",
@@ -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

@@ -9,6 +9,7 @@ import { directionRef } from "../props/direction";
 import { colorPresetRef } from "../props/color-preset";
 import { borderRef, roundingRef } from "../props/border";
 import { cssLengthRef } from "../props/css-length";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "social-links",
@@ -100,11 +101,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",