@upstart.gg/sdk 0.0.135 → 0.0.136

package/dist/shared/chunk-KILJYJFE.js

@@ -0,0 +1,354 @@
+/*! Upstart.gg - Copyright (C) 2024 Flippable - https://github.com/upstart-gg/upstart/blob/main/LICENSE */
+
+import {
+  defineProps
+} from "./chunk-BHC2A43S.js";
+import {
+  defineBrickManifest
+} from "./chunk-EVLRH6VG.js";
+import {
+  loopRef
+} from "./chunk-IQIISR22.js";
+import {
+  iconRef,
+  urlOrPageIdRef
+} from "./chunk-N3ZTQD5I.js";
+import {
+  colorRef
+} from "./chunk-SE6O65HC.js";
+import {
+  cssLengthRef
+} from "./chunk-BPBKHEQ5.js";
+
+// src/shared/bricks/manifests/icon.manifest.ts
+import { PiConfetti } from "react-icons/pi";
+import { Type } from "@sinclair/typebox";
+var manifest = defineBrickManifest({
+  type: "icon",
+  name: "Icon",
+  category: "basic",
+  description: "An icon.",
+  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,
+  props: defineProps(
+    {
+      icon: iconRef({
+        default: "mdi:heart"
+      }),
+      size: Type.Optional(
+        cssLengthRef({
+          title: "Size",
+          description: "The size of the icon. Can be a CSS length value (e.g. '2em', '24px')",
+          default: "1em",
+          "ui:css-units": ["em", "rem", "px"],
+          "ai:instructions": "Use 'em', 'rem', or 'px' for units. Example: '2em', '24px'"
+        })
+      ),
+      color: Type.Optional(
+        colorRef({
+          title: "Color",
+          default: "currentColor",
+          "ui:hide-color-label": true
+        })
+      ),
+      link: Type.Optional(urlOrPageIdRef({ title: "Link" })),
+      loop: Type.Optional(loopRef())
+    },
+    { noGrow: true }
+  )
+});
+var examples = [
+  // BASIC ICONS
+  {
+    description: "Heart icon with default styling - Inherits text color and size",
+    type: "icon",
+    props: {
+      icon: "mdi:heart"
+    }
+  },
+  {
+    description: "Star icon with gold color - Perfect for ratings and reviews",
+    type: "icon",
+    props: {
+      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: "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",
+      size: "1.5em",
+      color: "#1877f2",
+      link: "https://facebook.com/yourpage"
+    }
+  },
+  {
+    description: "Twitter/X icon with link - Social media engagement",
+    type: "icon",
+    props: {
+      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 icon with link - Contact information",
+    type: "icon",
+    props: {
+      icon: "mdi:email",
+      size: "1.3em",
+      color: "#4f46e5",
+      link: "mailto:contact@example.com"
+    }
+  },
+  {
+    description: "Phone icon with clickable link - Direct calling",
+    type: "icon",
+    props: {
+      icon: "mdi:phone",
+      size: "1.4em",
+      color: "#10b981",
+      link: "tel:+1234567890"
+    }
+  },
+  {
+    description: "Location marker icon - Address and directions",
+    type: "icon",
+    props: {
+      icon: "mdi:map-marker",
+      size: "1.6em",
+      color: "#ef4444"
+    }
+  },
+  // STATUS & FEEDBACK ICONS
+  {
+    description: "Success checkmark icon - Confirmation and completion",
+    type: "icon",
+    props: {
+      icon: "mdi:check-circle",
+      size: "1.5em",
+      color: "#10b981"
+    }
+  },
+  {
+    description: "Warning icon - Alerts and cautions",
+    type: "icon",
+    props: {
+      icon: "mdi:alert-triangle",
+      size: "1.5em",
+      color: "#f59e0b"
+    }
+  },
+  {
+    description: "Error icon - Problems and failures",
+    type: "icon",
+    props: {
+      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: "Share icon - Content sharing functionality",
+    type: "icon",
+    props: {
+      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: "Large security shield icon - Trust and safety messaging",
+    type: "icon",
+    props: {
+      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}}"
+    }
+  }
+];
+
+export {
+  manifest,
+  examples
+};
+//# sourceMappingURL=chunk-KILJYJFE.js.map

package/dist/shared/chunk-KILJYJFE.js.map

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

package/dist/shared/{chunk-GRMY35BU.js → chunk-L6C7HUSA.js}

@@ -5,13 +5,13 @@ import {
 } from "./chunk-BHC2A43S.js";
 import {
   defineBrickManifest
-} from "./chunk-TB3X4LRQ.js";
+} from "./chunk-EVLRH6VG.js";
 import {
   loopRef
-} from "./chunk-BW6EFRSF.js";
+} from "./chunk-IQIISR22.js";
 import {
   string
-} from "./chunk-UQF52PWK.js";
+} from "./chunk-N3ZTQD5I.js";
 import {
   imageRef
 } from "./chunk-W6MRYRGJ.js";
@@ -32,7 +32,48 @@ var manifest = defineBrickManifest({
   type: "carousel",
   name: "Carousel",
   description: "An image carousel with navigation arrows and dots or numbers indicator",
-  aiInstructions: "Use this brick to create an image carousel or slideshow. It can display multiple images that users can navigate through using arrows or dots. Each image can have an optional legend or caption. This brick is ideal for showcasing portfolios, product images, or any visual content in an engaging way.",
+  aiInstructions: `Use the carousel component for showcasing sequential visual content with smooth navigation between images.
+
+WHEN TO USE:
+- Product galleries with multiple angles or variations
+- Portfolio showcases with project images
+- Step-by-step tutorials or processes (recipes, instructions)
+- Before/after comparisons or transformations
+- Team member profiles with photos
+- Event photo galleries or highlights
+- Feature demonstrations or software screenshots
+- Travel destinations or location showcases
+
+CONTENT GUIDELINES:
+- Optimal range: 2-8 images for best user engagement (max 12 supported)
+- Single image allowed only as placeholder for future expansion
+- Each image needs: { src: { src, alt }, legend }
+- Alt text MUST be descriptive and never empty
+- Legend text should be concise (\u226490 characters) and informative
+- Use empty string ("") for legend only when no caption is intentionally desired
+
+IMAGE CONSISTENCY:
+- Keep aspect ratios similar across slides to prevent layout jumps
+- Avoid mixing very tall portrait with very wide landscape images
+- Use consistent image quality and style throughout carousel
+- Consider loading performance with image optimization
+
+STYLING OPTIONS:
+- padding: "0" for edge-to-edge, "1rem" for standard, "2rem+" for generous spacing
+- borderRadius: "rounded-none" for sharp/modern, "rounded-md" for standard, "rounded-xl" for friendly, "rounded-full" for circular (avatars)
+- colorPreset: Use sparingly - "neutral-50"/"primary-50" for subtle framing, gradients for premium feel
+
+DYNAMIC CONTENT:
+- Use loop property with single template object for data-driven carousels
+- Template variables in src and legend: "{{product.image}}", "{{team.name}} - {{team.role}}"
+- Perfect for: product catalogs, team directories, portfolio projects, event galleries
+
+AVOID:
+- Including unrelated properties (buttons, titles outside legend)
+- Heavy background colors that distract from images
+- Inconsistent aspect ratios that cause jarring transitions
+- More than 12 images (reduces focus and performance)
+- Empty or placeholder alt text (accessibility requirement)`,
   category: "media",
   defaultInspectorTab: "content",
   consumesMultipleQueryRows: true,
@@ -89,8 +130,9 @@ var manifest = defineBrickManifest({
   })
 });
 var examples = [
+  // BASIC CAROUSEL EXAMPLES
   {
-    description: "Basic image carousel with legends",
+    description: "Basic image carousel with legends - Simple content showcase",
     type: "carousel",
     props: {
       images: [
@@ -118,8 +160,9 @@ var examples = [
       ]
     }
   },
+  // PRODUCT & COMMERCIAL
   {
-    description: "Product showcase carousel with rounded corners and padding",
+    description: "Product showcase carousel with rounded corners and padding - E-commerce gallery style",
     type: "carousel",
     props: {
       images: [
@@ -154,11 +197,12 @@ var examples = [
       ],
       borderRadius: "rounded-xl",
       padding: "2rem",
-      colorPreset: { color: "gray-50" }
+      colorPreset: { color: "neutral-50" }
     }
   },
+  // PORTFOLIO & CREATIVE
   {
-    description: "Portfolio carousel with minimal styling",
+    description: "Portfolio carousel with minimal styling - Clean professional presentation",
     type: "carousel",
     props: {
       images: [
@@ -188,8 +232,9 @@ var examples = [
       padding: "0"
     }
   },
+  // EVENTS & EXPERIENCES
   {
-    description: "Event photos carousel with primary color theme",
+    description: "Event photos carousel with primary color theme - Conference or gathering highlights",
     type: "carousel",
     props: {
       images: [
@@ -272,8 +317,9 @@ var examples = [
       padding: "1rem"
     }
   },
+  // TEAM & PEOPLE
   {
-    description: "Team members carousel with blue color scheme",
+    description: "Team members carousel with circular images - Professional team showcase",
     type: "carousel",
     props: {
       images: [
@@ -306,13 +352,14 @@ var examples = [
           legend: "Emily Chen - Marketing Director"
         }
       ],
-      colorPreset: { color: "blue-50" },
+      colorPreset: { color: "primary-50" },
       borderRadius: "rounded-full",
       padding: "2rem"
     }
   },
+  // TUTORIALS & PROCESSES
   {
-    description: "Recipe steps carousel with detailed descriptions",
+    description: "Recipe steps carousel with detailed descriptions - Step-by-step instructional content",
     type: "carousel",
     props: {
       images: [
@@ -345,7 +392,7 @@ var examples = [
           legend: "Step 4: Season and serve hot"
         }
       ],
-      colorPreset: { color: "orange-50" },
+      colorPreset: { color: "accent-50" },
       borderRadius: "rounded-md",
       padding: "1.5rem"
     }
@@ -384,7 +431,7 @@ var examples = [
           legend: "Living Room - After"
         }
       ],
-      colorPreset: { color: "green-50" },
+      colorPreset: { color: "accent-100" },
       borderRadius: "rounded-lg",
       padding: "1rem"
     }
@@ -416,7 +463,7 @@ var examples = [
           legend: "Color Study #7 - 2024"
         }
       ],
-      colorPreset: { color: "gray-900" },
+      colorPreset: { color: "neutral-900" },
       borderRadius: "rounded-sm",
       padding: "3rem"
     }
@@ -469,7 +516,7 @@ var examples = [
           legend: "Weekend Casual - Relaxed Fit"
         }
       ],
-      colorPreset: { color: "purple-100" },
+      colorPreset: { color: "secondary-100" },
       borderRadius: "rounded-xl",
       padding: "2rem"
     }
@@ -501,7 +548,7 @@ var examples = [
           legend: "Electric Sedan"
         }
       ],
-      colorPreset: { color: "red-50" },
+      colorPreset: { color: "accent-50" },
       borderRadius: "rounded-lg",
       padding: "0.5rem"
     }
@@ -540,13 +587,13 @@ var examples = [
           legend: "Security - Enterprise-grade protection"
         }
       ],
-      colorPreset: { color: "indigo-50" },
+      colorPreset: { color: "primary-50" },
       borderRadius: "rounded-2xl",
       padding: "4rem"
     }
   },
   {
-    description: "Dynamic product gallery using products query with pricing and details",
+    description: "Dynamic product gallery using products query - Data-driven product showcase",
     type: "carousel",
     props: {
       images: [
@@ -566,6 +613,87 @@ var examples = [
       }
     }
   },
+  // DYNAMIC CONTENT EXAMPLES
+  {
+    description: "Loop template for portfolioProjects query (one object will repeat per row)",
+    type: "carousel",
+    props: {
+      images: [
+        {
+          src: {
+            src: "{{portfolioProjects.featuredImage}}",
+            alt: "{{portfolioProjects.projectName}} featured image"
+          },
+          legend: "{{portfolioProjects.projectName}} \u2013 {{portfolioProjects.clientName}} ({{portfolioProjects.year}})"
+        }
+      ],
+      colorPreset: { color: "neutral-50" },
+      borderRadius: "rounded-md",
+      padding: "1rem",
+      loop: {
+        over: "portfolioProjects"
+      }
+    }
+  },
+  // SPECIAL STYLING VARIATIONS
+  {
+    description: "Showcase carousel with subtle gradient background frame",
+    type: "carousel",
+    props: {
+      images: [
+        {
+          src: { src: "https://via.placeholder.com/900x500.png?text=Showcase+1", alt: "Showcase slide 1" },
+          legend: "Launch Dashboard"
+        },
+        {
+          src: { src: "https://via.placeholder.com/900x500.png?text=Showcase+2", alt: "Showcase slide 2" },
+          legend: "Collaboration Tools"
+        },
+        {
+          src: { src: "https://via.placeholder.com/900x500.png?text=Showcase+3", alt: "Showcase slide 3" },
+          legend: "Usage Analytics"
+        }
+      ],
+      colorPreset: { color: "primary-gradient-300", gradientDirection: "bg-gradient-to-br" },
+      borderRadius: "rounded-xl",
+      padding: "2rem"
+    }
+  },
+  // MINIMAL EDGE (no padding, square corners)
+  {
+    description: "Minimal edge-to-edge carousel (no padding, no rounding)",
+    type: "carousel",
+    props: {
+      images: [
+        {
+          src: { src: "https://via.placeholder.com/800x400.png?text=Edge+1", alt: "Edge slide 1" },
+          legend: ""
+        },
+        {
+          src: { src: "https://via.placeholder.com/800x400.png?text=Edge+2", alt: "Edge slide 2" },
+          legend: ""
+        }
+      ],
+      borderRadius: "rounded-none",
+      padding: "0"
+    }
+  },
+  // SINGLE IMAGE (acts as prepared placeholder carousel)
+  {
+    description: "Single-image carousel (placeholder for future expansion)",
+    type: "carousel",
+    props: {
+      images: [
+        {
+          src: { src: "https://via.placeholder.com/1000x420.png?text=Banner", alt: "Promotional banner" },
+          legend: "Early Access Program"
+        }
+      ],
+      colorPreset: { color: "secondary-50" },
+      borderRadius: "rounded-lg",
+      padding: "1.25rem"
+    }
+  },
   {
     description: "Team member carousel using teamMembers query with roles and departments",
     type: "carousel",
@@ -719,4 +847,4 @@ export {
   manifest,
   examples
 };
-//# sourceMappingURL=chunk-GRMY35BU.js.map
+//# sourceMappingURL=chunk-L6C7HUSA.js.map