@upstart.gg/sdk 0.0.135 → 0.0.137

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

@@ -4,22 +4,52 @@ import { defineBrickManifest } from "~/shared/brick-manifest";
 import { StringEnum } from "~/shared/utils/string-enum";
 import { boolean } from "../props/boolean";
 import { defineProps } from "../props/helpers";
-import { colorPresetRef } from "../props/color-preset";
-import { fontSizeRef, textContentRef } from "../props/text";
+import { colorPreset } from "../props/color-preset";
+import { fontSize, textContent } from "../props/text";
 import type { BrickProps } from "../props/types";
-import { loopRef } from "../props/dynamic";
-import { cssLengthRef } from "../props/css-length";
+import { loop } from "../props/dynamic";
+import { cssLength } from "../props/css-length";
+import type { BrickExample } from "./_types";
 
 export const manifest = defineBrickManifest({
   type: "accordion",
   name: "Accordion",
   description: "An accordion/collapse element for expandable content",
-  aiInstructions: `
-This accordion element displays content in collapsible panels.
-It is typically used for FAQ sections, organized documentation, or to save space.
-Each item has a title and expandable content area.
-Multiple panels can be open simultaneously or limited to one at a time.
-  `.trim(),
+  aiInstructions: `Use this accordion component for organizing collapsible content sections that help save space and improve content accessibility.
+
+WHEN TO USE:
+- FAQ sections with questions and detailed answers
+- Product feature lists with expandable descriptions
+- Documentation sections with organized topics
+- Step-by-step processes or tutorials
+- Menu categories (restaurant, services, pricing tiers)
+- Legal documents with different sections
+- Course curricula with lesson breakdowns
+- Support categories with help topics
+
+STYLING GUIDELINES:
+- colorPreset: Use "primary-500" for branded sections, "secondary-400" for features, "neutral-200" for documentation, "accent-500" for highlights
+- fontSize: "text-sm" for compact content, "text-base" for standard, "text-lg" for emphasis
+- rounding: "rounded-none" for sharp/corporate, "rounded-md" for standard, "rounded-lg" for friendly, "rounded-xl"/"rounded-2xl"/"rounded-3xl" for modern
+- gap: "1px" for minimal separation, "0.5rem" for comfortable, "1rem" for spacious layouts
+- restrictOneOpen: true for FAQs/single focus, false for reference materials/feature lists
+
+CONTENT ORGANIZATION:
+- Use clear, descriptive titles that preview the content
+- Keep expandable content concise but comprehensive
+- Support HTML formatting in content (lists, links, line breaks)
+- Set defaultOpen: true for most important/frequently accessed items
+
+DYNAMIC CONTENT:
+- Support template variables in titles: "{{category.name}} - {{category.count}} items"
+- Dynamic content: "Learn about {{product.features}} and {{product.benefits}}"
+- Loop over data: Display product categories, team departments, or service areas
+
+AVOID:
+- Too many items (>10) without organization
+- Very long titles that don't fit on mobile
+- Empty or placeholder content in collapsed sections
+- Mixing different content types in the same accordion`,
   icon: TfiLayoutAccordionSeparated,
 
   defaultWidth: { desktop: "450px", mobile: "100%" },
@@ -27,13 +57,13 @@ Multiple panels can be open simultaneously or limited to one at a time.
   props: defineProps({
     items: Type.Array(
       Type.Object({
-        title: textContentRef({
+        title: textContent({
           title: "Title",
           default: "My title",
           disableSizing: true,
           showInSettings: true,
         }),
-        content: textContentRef({ title: "Content", default: "Expandable content goes here" }),
+        content: textContent({ title: "Content", default: "Expandable content goes here" }),
         defaultOpen: Type.Optional(boolean("Open by default", false)),
       }),
       {
@@ -43,13 +73,13 @@ Multiple panels can be open simultaneously or limited to one at a time.
         },
       },
     ),
-    fontSize: Type.Optional(fontSizeRef({ default: "inherit" })),
+    fontSize: Type.Optional(fontSize({ default: "inherit" })),
     restrictOneOpen: boolean("Restrict to one open item", false, {
       description:
         "Restrict to one open item at a time. If false, multiple items can be open simultaneously.",
     }),
     gap: Type.Optional(
-      cssLengthRef({
+      cssLength({
         title: "Gap",
         description: "The gap between the accordion items.",
         default: "1px",
@@ -80,27 +110,27 @@ Multiple panels can be open simultaneously or limited to one at a time.
       ),
     ),
     colorPreset: Type.Optional(
-      colorPresetRef({
+      colorPreset({
         title: "Color",
         default: { color: "bg-primary-500 text-primary-500-content" },
       }),
     ),
-    loop: Type.Optional(loopRef()),
+    loop: Type.Optional(loop()),
   }),
 });
 
 export type Manifest = typeof manifest;
 
-export const examples: {
-  description: string;
-  type: string;
-  props: BrickProps<Manifest>["brick"]["props"];
-}[] = [
+export const examples: BrickExample<Manifest>[] = [
+  // FAQ SECTIONS
   {
-    description: "FAQ section with card styling with single open",
+    description: "FAQ section with single open restriction - Classic use case for customer support",
     type: "accordion",
     props: {
       restrictOneOpen: true,
+      colorPreset: { color: "primary-500" },
+      rounding: "rounded-md",
+      gap: "0.5rem",
       items: [
         {
           title: "What is included in the basic plan?",
@@ -123,24 +153,20 @@ export const examples: {
           content:
             "We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and bank transfers for annual subscriptions. All payments are processed securely through our payment partners.",
         },
-        {
-          title: "Do you offer refunds?",
-          content:
-            "We offer a 30-day money-back guarantee for all new subscriptions. If you're not satisfied with our service, contact our support team within 30 days of your purchase for a full refund.",
-        },
       ],
     },
   },
+
+  // PRODUCT FEATURES
   {
-    description: "Product features accordion with multiple open panels and secondary color scheme",
+    description: "Product features with multiple open panels - Good for showcasing software capabilities",
     type: "accordion",
     props: {
       restrictOneOpen: false,
-      colorPreset: {
-        color: "secondary-400",
-      },
+      colorPreset: { color: "secondary-400" },
       rounding: "rounded-lg",
       gap: "0.5rem",
+      fontSize: "text-base",
       items: [
         {
           title: "Advanced Analytics Dashboard",
@@ -167,14 +193,14 @@ export const examples: {
       ],
     },
   },
+
+  // DOCUMENTATION & GUIDES
   {
-    description: "Documentation sections with neutral styling and large font size",
+    description: "Documentation sections with neutral colors - Perfect for help centers and knowledge bases",
     type: "accordion",
     props: {
       restrictOneOpen: false,
-      colorPreset: {
-        color: "neutral-200",
-      },
+      colorPreset: { color: "neutral-200" },
       fontSize: "text-lg",
       rounding: "rounded-md",
       gap: "2px",
@@ -197,14 +223,15 @@ export const examples: {
       ],
     },
   },
+
+  // MENU & CATALOG SECTIONS
   {
-    description: "Restaurant menu sections with accent colors and extra large rounding",
+    description:
+      "Restaurant menu sections with accent colors - Great for organizing menu items or service categories",
     type: "accordion",
     props: {
       restrictOneOpen: true,
-      colorPreset: {
-        color: "accent-500",
-      },
+      colorPreset: { color: "accent-500" },
       rounding: "rounded-xl",
       gap: "1rem",
       items: [
@@ -227,14 +254,15 @@ export const examples: {
       ],
     },
   },
+
+  // COURSE & EDUCATIONAL CONTENT
   {
-    description: "Course curriculum with primary colors and minimal gap",
+    description:
+      "Course curriculum with primary colors - Excellent for educational content and training programs",
     type: "accordion",
     props: {
       restrictOneOpen: false,
-      colorPreset: {
-        color: "primary-600",
-      },
+      colorPreset: { color: "primary-600" },
       rounding: "rounded-sm",
       gap: "1px",
       fontSize: "text-base",
@@ -262,219 +290,158 @@ export const examples: {
       ],
     },
   },
+
+  // SUPPORT & HELP SECTIONS
   {
-    description: "Legal terms accordion with neutral dark theme and large gaps",
-    type: "accordion",
-    props: {
-      restrictOneOpen: true,
-      colorPreset: {
-        color: "neutral-800",
-      },
-      rounding: "rounded-lg",
-      gap: "1.5rem",
-      fontSize: "text-sm",
-      items: [
-        {
-          title: "Terms of Service",
-          content:
-            "By accessing and using this website, you accept and agree to be bound by the terms and provision of this agreement. These terms apply to all visitors, users, and others who access or use the service.",
-        },
-        {
-          title: "Privacy Policy",
-          content:
-            "We collect information you provide directly to us, such as when you create an account, make a purchase, or contact us. We use this information to provide, maintain, and improve our services.",
-        },
-        {
-          title: "Cookie Policy",
-          content:
-            "We use cookies and similar tracking technologies to track activity on our service and hold certain information. You can instruct your browser to refuse all cookies or indicate when a cookie is being sent.",
-        },
-      ],
-    },
-  },
-  {
-    description: "Event schedule with secondary colors and 2xl rounding",
+    description: "Support categories with sharp corners - Modern corporate style for help centers",
     type: "accordion",
     props: {
       restrictOneOpen: false,
-      colorPreset: {
-        color: "secondary-300",
-      },
-      rounding: "rounded-2xl",
-      gap: "0.75rem",
+      colorPreset: { color: "primary-300" },
+      rounding: "rounded-none",
+      gap: "0px",
+      fontSize: "text-base",
       items: [
         {
-          title: "Day 1: Opening Ceremony & Keynotes",
-          content:
-            "9:00 AM - Registration & Welcome Coffee<br/>10:00 AM - Opening Ceremony<br/>11:00 AM - Keynote: Future of Technology<br/>12:30 PM - Networking Lunch<br/>2:00 PM - Panel Discussion<br/>4:00 PM - Closing Remarks",
-          defaultOpen: true,
-        },
-        {
-          title: "Day 2: Workshops & Technical Sessions",
+          title: "Account & Billing",
           content:
-            "9:00 AM - Workshop: AI in Practice<br/>11:00 AM - Technical Deep Dive: Cloud Architecture<br/>1:00 PM - Lunch Break<br/>2:30 PM - Hands-on Lab: DevOps Tools<br/>4:30 PM - Q&A Session",
+            "Get help with account settings, password reset, billing questions, subscription management, and payment issues. Average response time: 2 hours during business hours.",
         },
         {
-          title: "Day 3: Networking & Demo Day",
-          content:
-            "10:00 AM - Startup Pitch Competition<br/>12:00 PM - Demo Showcase<br/>2:00 PM - Networking Session<br/>3:30 PM - Awards Ceremony<br/>5:00 PM - Closing Party",
-        },
-      ],
-    },
-  },
-  {
-    description: "Fitness program details with accent colors and 3xl rounding",
-    type: "accordion",
-    props: {
-      restrictOneOpen: true,
-      colorPreset: {
-        color: "accent-400",
-      },
-      rounding: "rounded-3xl",
-      gap: "1.25rem",
-      fontSize: "text-lg",
-      items: [
-        {
-          title: "Beginner Program (4 weeks)",
+          title: "Technical Support",
           content:
-            "Perfect for newcomers to fitness. Includes basic bodyweight exercises, flexibility training, and cardio. 3 sessions per week, 45 minutes each. Includes nutrition guidance and progress tracking.",
+            "Troubleshoot technical issues, API problems, integration questions, and performance concerns. Includes access to our knowledge base and video tutorials.",
         },
         {
-          title: "Intermediate Program (8 weeks)",
+          title: "Sales & Partnerships",
           content:
-            "For those with some fitness experience. Combines strength training, HIIT workouts, and endurance building. 4 sessions per week, 60 minutes each. Includes meal planning and supplement recommendations.",
+            "Inquiries about enterprise solutions, custom pricing, partnership opportunities, and bulk discounts. Schedule a call with our sales team for personalized assistance.",
         },
         {
-          title: "Advanced Program (12 weeks)",
+          title: "Feature Requests",
           content:
-            "High-intensity program for experienced athletes. Features complex movements, periodization, and sport-specific training. 5-6 sessions per week. Includes recovery protocols and performance optimization.",
+            "Submit ideas for new features, improvements, and integrations. Our product team reviews all suggestions and provides updates on development roadmap.",
         },
       ],
     },
   },
+
+  // PRICING & COMPARISON
   {
-    description: "Support categories with primary colors and no rounding",
+    description: "Product pricing comparison with multiple defaults open - Perfect for plan comparisons",
     type: "accordion",
     props: {
       restrictOneOpen: false,
-      colorPreset: {
-        color: "primary-300",
-      },
-      rounding: "rounded-none",
-      gap: "0px",
+      colorPreset: { color: "secondary-500" },
+      rounding: "rounded-lg",
+      gap: "0.5rem",
       fontSize: "text-base",
       items: [
         {
-          title: "Account & Billing",
-          content:
-            "Get help with account settings, password reset, billing questions, subscription management, and payment issues. Average response time: 2 hours during business hours.",
-        },
-        {
-          title: "Technical Support",
+          title: "Basic Plan - $9/month",
           content:
-            "Troubleshoot technical issues, API problems, integration questions, and performance concerns. Includes access to our knowledge base and video tutorials.",
+            "✓ Up to 5 projects<br/>✓ 10GB storage<br/>✓ Email support<br/>✓ Basic analytics<br/>✓ Mobile app access<br/>✗ API access<br/>✗ Custom integrations",
+          defaultOpen: true,
         },
         {
-          title: "Sales & Partnerships",
+          title: "Pro Plan - $29/month",
           content:
-            "Inquiries about enterprise solutions, custom pricing, partnership opportunities, and bulk discounts. Schedule a call with our sales team for personalized assistance.",
+            "✓ Unlimited projects<br/>✓ 100GB storage<br/>✓ Priority support<br/>✓ Advanced analytics<br/>✓ API access<br/>✓ Custom integrations<br/>✓ Team collaboration",
+          defaultOpen: true,
         },
         {
-          title: "Feature Requests",
+          title: "Enterprise Plan - Custom pricing",
           content:
-            "Submit ideas for new features, improvements, and integrations. Our product team reviews all suggestions and provides updates on development roadmap.",
+            "✓ Everything in Pro<br/>✓ Unlimited storage<br/>✓ Dedicated support<br/>✓ White-label options<br/>✓ SSO integration<br/>✓ Custom contracts<br/>✓ On-premise deployment",
         },
       ],
     },
   },
+
+  // DYNAMIC CONTENT EXAMPLES
   {
-    description: "Company policies with neutral colors and small font size",
+    description: "Dynamic team member accordion using template variables - Shows data-driven content",
     type: "accordion",
     props: {
       restrictOneOpen: true,
-      colorPreset: {
-        color: "neutral-100",
-      },
-      rounding: "rounded-md",
-      gap: "0.25rem",
-      fontSize: "text-sm",
+      colorPreset: { color: "accent-400" },
+      rounding: "rounded-lg",
+      gap: "0.5rem",
       items: [
         {
-          title: "Remote Work Policy",
+          title: "Meet {{team.leader.name}} - {{team.leader.role}}",
           content:
-            "All employees have the flexibility to work remotely full-time or adopt a hybrid schedule. Required equipment is provided, and employees must maintain reliable internet connection and dedicated workspace.",
+            "{{team.leader.bio}} <br/><br/>Experience: {{team.leader.experience}} years<br/>Email: {{team.leader.email}}<br/>Location: {{team.leader.location}}",
+          defaultOpen: true,
         },
         {
-          title: "Professional Development",
+          title: "{{team.designer.name}} - {{team.designer.role}}",
           content:
-            "Annual budget of $2,000 per employee for conferences, courses, certifications, and training materials. Time off is provided for approved learning activities and skill development.",
+            "{{team.designer.bio}} <br/><br/>Specializes in: {{team.designer.specialties}}<br/>Portfolio: <a href='{{team.designer.portfolio}}'>View Work</a>",
         },
         {
-          title: "Time Off & Benefits",
+          title: "{{team.developer.name}} - {{team.developer.role}}",
           content:
-            "Unlimited PTO policy with minimum 3 weeks encouraged annually. Comprehensive health insurance, dental, vision, 401k matching, and wellness stipend included.",
+            "{{team.developer.bio}} <br/><br/>Technologies: {{team.developer.skills}}<br/>GitHub: <a href='{{team.developer.github}}'>@{{team.developer.username}}</a>",
         },
       ],
     },
   },
+
+  // SPECIAL STYLING VARIATIONS
   {
-    description: "Product comparison with secondary colors and multiple defaults open",
+    description: "Legal documents with dark theme and large gaps - Professional legal content presentation",
     type: "accordion",
     props: {
-      restrictOneOpen: false,
-      colorPreset: {
-        color: "secondary-500",
-      },
+      restrictOneOpen: true,
+      colorPreset: { color: "neutral-800" },
       rounding: "rounded-lg",
-      gap: "0.5rem",
-      fontSize: "text-base",
+      gap: "1.5rem",
+      fontSize: "text-sm",
       items: [
         {
-          title: "Basic Plan - $9/month",
+          title: "Terms of Service",
           content:
-            "✓ Up to 5 projects<br/>✓ 10GB storage<br/>✓ Email support<br/>✓ Basic analytics<br/>✓ Mobile app access<br/>✗ API access<br/>✗ Custom integrations",
-          defaultOpen: true,
+            "By accessing and using this website, you accept and agree to be bound by the terms and provision of this agreement. These terms apply to all visitors, users, and others who access or use the service.",
         },
         {
-          title: "Pro Plan - $29/month",
+          title: "Privacy Policy",
           content:
-            "✓ Unlimited projects<br/>✓ 100GB storage<br/>✓ Priority support<br/>✓ Advanced analytics<br/>✓ API access<br/>✓ Custom integrations<br/>✓ Team collaboration",
-          defaultOpen: true,
+            "We collect information you provide directly to us, such as when you create an account, make a purchase, or contact us. We use this information to provide, maintain, and improve our services.",
         },
         {
-          title: "Enterprise Plan - Custom pricing",
+          title: "Cookie Policy",
           content:
-            "✓ Everything in Pro<br/>✓ Unlimited storage<br/>✓ Dedicated support<br/>✓ White-label options<br/>✓ SSO integration<br/>✓ Custom contracts<br/>✓ On-premise deployment",
+            "We use cookies and similar tracking technologies to track activity on our service and hold certain information. You can instruct your browser to refuse all cookies or indicate when a cookie is being sent.",
         },
       ],
     },
   },
+
   {
-    description: "Troubleshooting guide with accent colors and large font",
+    description: "Ultra-rounded modern design with 3xl rounding - Contemporary aesthetic for creative brands",
     type: "accordion",
     props: {
-      restrictOneOpen: false,
-      colorPreset: {
-        color: "accent-600",
-      },
-      rounding: "rounded-xl",
-      gap: "1rem",
+      restrictOneOpen: true,
+      colorPreset: { color: "accent-300" },
+      rounding: "rounded-3xl",
+      gap: "1.5rem",
       fontSize: "text-lg",
       items: [
         {
-          title: "Connection Issues",
+          title: "Design Philosophy",
           content:
-            "1. Check your internet connection<br/>2. Clear browser cache and cookies<br/>3. Disable VPN if active<br/>4. Try incognito/private browsing mode<br/>5. Contact support if issues persist",
+            "We believe in creating digital experiences that are both beautiful and functional. Our approach combines user-centered design with cutting-edge technology to deliver exceptional results.",
         },
         {
-          title: "Login Problems",
+          title: "Our Process",
           content:
-            "1. Verify your email address and password<br/>2. Use 'Forgot Password' to reset<br/>3. Check for CAPS LOCK<br/>4. Try a different browser<br/>5. Ensure account is not suspended",
+            "Discovery → Strategy → Design → Development → Testing → Launch. Each phase includes client collaboration, iterative feedback, and quality assurance to ensure optimal outcomes.",
         },
         {
-          title: "Performance Issues",
+          title: "Why Choose Us",
           content:
-            "1. Close unnecessary browser tabs<br/>2. Update your browser to latest version<br/>3. Disable browser extensions<br/>4. Check system resources (RAM/CPU)<br/>5. Try using the mobile app instead",
+            "15+ years experience, 200+ successful projects, award-winning designs, and a commitment to excellence. We're not just service providers - we're strategic partners in your success.",
         },
       ],
     },

package/src/shared/bricks/manifests/all-manifests.ts

@@ -103,6 +103,7 @@ export const brickTypes = StringEnum<(keyof typeof manifests)[]>(
   ],
   {
     title: "Brick type",
+    description: "The type of brick",
   },
 );