@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/container-blocks/collapse.md

@@ -0,0 +1,1335 @@
+# Collapse
+
+Collapsible panels with accordion mode and custom icons.
+
+A web application that enables team collaboration through shared workspaces, real-time messaging, and integrated task management across departments.
+
+The platform supports up to 500 concurrent users with role-based access control and end-to-end encryption for all communications.
+
+Node.js 18+, PostgreSQL 15, Redis 7 for caching, and a minimum of 4GB RAM for the development environment. Docker is recommended for local setup.
+
+Phase 1 launches in Q2 2026 with core messaging and workspace features. Phase 2 adds analytics, reporting dashboards, and third-party integrations in Q3 2026.
+
+```yaml
+- id: basic_collapse
+  type: Collapse
+  properties:
+    panels:
+      - key: overview
+        title: Project Overview
+      - key: requirements
+        title: System Requirements
+      - key: timeline
+        title: Project Timeline
+  slots:
+    overview:
+      blocks:
+        - id: basic_overview_text
+          type: Paragraph
+          properties:
+            content: A web application that enables team collaboration through shared
+              workspaces, real-time messaging, and integrated task management
+              across departments.
+        - id: basic_overview_detail
+          type: Paragraph
+          properties:
+            content: The platform supports up to 500 concurrent users with role-based access
+              control and end-to-end encryption for all communications.
+    requirements:
+      blocks:
+        - id: basic_requirements_text
+          type: Paragraph
+          properties:
+            content: Node.js 18+, PostgreSQL 15, Redis 7 for caching, and a minimum of 4GB
+              RAM for the development environment. Docker is recommended for
+              local setup.
+    timeline:
+      blocks:
+        - id: basic_timeline_text
+          type: Paragraph
+          properties:
+            content: Phase 1 launches in Q2 2026 with core messaging and workspace features.
+              Phase 2 adds analytics, reporting dashboards, and third-party
+              integrations in Q3 2026.
+```
+
+Configure your display name, preferred language, and timezone. These settings apply across all devices linked to your account.
+
+Choose which notifications you receive via email, push, or in-app messages. Set quiet hours to pause non-critical alerts.
+
+Manage profile visibility, activity status display, and data sharing preferences. Enable two-factor authentication for added security.
+
+Switch between light and dark themes, adjust font size, and customize the sidebar layout to match your workflow.
+
+```yaml
+- id: accordion_collapse
+  type: Collapse
+  properties:
+    accordion: true
+    panels:
+      - key: acc_general
+        title: General Settings
+      - key: acc_notifications
+        title: Notification Preferences
+      - key: acc_privacy
+        title: Privacy & Security
+      - key: acc_appearance
+        title: Appearance
+  slots:
+    acc_general:
+      blocks:
+        - id: accordion_general_text
+          type: Paragraph
+          properties:
+            content: Configure your display name, preferred language, and timezone. These
+              settings apply across all devices linked to your account.
+    acc_notifications:
+      blocks:
+        - id: accordion_notifications_text
+          type: Paragraph
+          properties:
+            content: Choose which notifications you receive via email, push, or in-app
+              messages. Set quiet hours to pause non-critical alerts.
+    acc_privacy:
+      blocks:
+        - id: accordion_privacy_text
+          type: Paragraph
+          properties:
+            content: Manage profile visibility, activity status display, and data sharing
+              preferences. Enable two-factor authentication for added security.
+    acc_appearance:
+      blocks:
+        - id: accordion_appearance_text
+          type: Paragraph
+          properties:
+            content: Switch between light and dark themes, adjust font size, and customize
+              the sidebar layout to match your workflow.
+```
+
+Sign up for a free account, complete the onboarding wizard, and deploy your first application in under five minutes using one of our starter templates.
+
+We offer Free, Pro ($29/month), and Enterprise tiers. The Free plan includes unlimited development environments and up to 100 monthly active users.
+
+Yes, the Pro plan includes a 14-day free trial with full access to all features. No credit card required to start.
+
+Reach our support team via the in-app chat widget, email us at support@example.com, or visit the community forums for peer assistance.
+
+```yaml
+- id: default_active_collapse
+  type: Collapse
+  properties:
+    defaultActiveKey: da_started
+    panels:
+      - key: da_started
+        title: How do I get started?
+      - key: da_pricing
+        title: What are the pricing plans?
+      - key: da_trial
+        title: Is there a free trial?
+      - key: da_support
+        title: How do I contact support?
+  slots:
+    da_started:
+      blocks:
+        - id: default_active_started_text
+          type: Paragraph
+          properties:
+            content: Sign up for a free account, complete the onboarding wizard, and deploy
+              your first application in under five minutes using one of our
+              starter templates.
+    da_pricing:
+      blocks:
+        - id: default_active_pricing_text
+          type: Paragraph
+          properties:
+            content: We offer Free, Pro ($29/month), and Enterprise tiers. The Free plan
+              includes unlimited development environments and up to 100 monthly
+              active users.
+    da_trial:
+      blocks:
+        - id: default_active_trial_text
+          type: Paragraph
+          properties:
+            content: Yes, the Pro plan includes a 14-day free trial with full access to all
+              features. No credit card required to start.
+    da_support:
+      blocks:
+        - id: default_active_support_text
+          type: Paragraph
+          properties:
+            content: Reach our support team via the in-app chat widget, email us at
+              support@example.com, or visit the community forums for peer
+              assistance.
+```
+
+Founded in 2020, we build tools that make software development accessible to everyone regardless of technical background.
+
+Our mission is to democratize application development through low-code and open-source technologies.
+
+Founded in 2020, we build tools that make software development accessible to everyone regardless of technical background.
+
+Our mission is to democratize application development through low-code and open-source technologies.
+
+```yaml
+- id: bordered_collapse
+  type: Collapse
+  properties:
+    bordered: true
+    panels:
+      - key: brd_about
+        title: About Us (Bordered)
+      - key: brd_mission
+        title: Our Mission
+  slots:
+    brd_about:
+      blocks:
+        - id: bordered_about_text
+          type: Paragraph
+          properties:
+            content: Founded in 2020, we build tools that make software development
+              accessible to everyone regardless of technical background.
+    brd_mission:
+      blocks:
+        - id: bordered_mission_text
+          type: Paragraph
+          properties:
+            content: Our mission is to democratize application development through low-code
+              and open-source technologies.
+- id: borderless_collapse
+  type: Collapse
+  properties:
+    bordered: false
+    panels:
+      - key: bls_about
+        title: About Us (Borderless)
+      - key: bls_mission
+        title: Our Mission
+  slots:
+    bls_about:
+      blocks:
+        - id: borderless_about_text
+          type: Paragraph
+          properties:
+            content: Founded in 2020, we build tools that make software development
+              accessible to everyone regardless of technical background.
+    bls_mission:
+      blocks:
+        - id: borderless_mission_text
+          type: Paragraph
+          properties:
+            content: Our mission is to democratize application development through low-code
+              and open-source technologies.
+```
+
+**Start (default):**
+
+Premium wireless headphones with active noise cancellation, 30-hour battery life, and multipoint connection.
+
+Bluetooth 5.3, 40mm custom drivers, frequency response 20Hz-40kHz, weight 250g, USB-C fast charging.
+
+**End:**
+
+Premium wireless headphones with active noise cancellation, 30-hour battery life, and multipoint connection.
+
+Bluetooth 5.3, 40mm custom drivers, frequency response 20Hz-40kHz, weight 250g, USB-C fast charging.
+
+```yaml
+- id: icon_start_label
+  type: Markdown
+  properties:
+    content: "**Start (default):**"
+- id: icon_start_collapse
+  type: Collapse
+  properties:
+    expandIconPlacement: start
+    panels:
+      - key: is_details
+        title: Product Details
+      - key: is_specs
+        title: Technical Specifications
+  slots:
+    is_details:
+      blocks:
+        - id: icon_start_details_text
+          type: Paragraph
+          properties:
+            content: Premium wireless headphones with active noise cancellation, 30-hour
+              battery life, and multipoint connection.
+    is_specs:
+      blocks:
+        - id: icon_start_specs_text
+          type: Paragraph
+          properties:
+            content: Bluetooth 5.3, 40mm custom drivers, frequency response 20Hz-40kHz,
+              weight 250g, USB-C fast charging.
+- id: icon_end_label
+  type: Markdown
+  properties:
+    content: "**End:**"
+- id: icon_end_collapse
+  type: Collapse
+  properties:
+    expandIconPlacement: end
+    panels:
+      - key: ie_details
+        title: Product Details
+      - key: ie_specs
+        title: Technical Specifications
+  slots:
+    ie_details:
+      blocks:
+        - id: icon_end_details_text
+          type: Paragraph
+          properties:
+            content: Premium wireless headphones with active noise cancellation, 30-hour
+              battery life, and multipoint connection.
+    ie_specs:
+      blocks:
+        - id: icon_end_specs_text
+          type: Paragraph
+          properties:
+            content: Bluetooth 5.3, 40mm custom drivers, frequency response 20Hz-40kHz,
+              weight 250g, USB-C fast charging.
+```
+
+Real-time collaboration, version history, automated backups, and a powerful API for custom integrations.
+
+Connect with Slack, GitHub, Jira, Google Workspace, Figma, and over 200 other services via our marketplace.
+
+Flexible per-seat pricing starting at $10/month. Volume discounts available for teams larger than 50 members.
+
+The expand icon can be passed as an object with name and color properties for further customization.
+
+The icon rotates 90 degrees when the panel is expanded, providing a visual cue for the open/closed state.
+
+```yaml
+- id: custom_icon_collapse
+  type: Collapse
+  properties:
+    expandIcon: AiOutlinePlusCircle
+    panels:
+      - key: ci_features
+        title: Key Features
+      - key: ci_integrations
+        title: Integrations
+      - key: ci_pricing
+        title: Pricing
+  slots:
+    ci_features:
+      blocks:
+        - id: custom_icon_features_text
+          type: Paragraph
+          properties:
+            content: Real-time collaboration, version history, automated backups, and a
+              powerful API for custom integrations.
+    ci_integrations:
+      blocks:
+        - id: custom_icon_integrations_text
+          type: Paragraph
+          properties:
+            content: Connect with Slack, GitHub, Jira, Google Workspace, Figma, and over 200
+              other services via our marketplace.
+    ci_pricing:
+      blocks:
+        - id: custom_icon_pricing_text
+          type: Paragraph
+          properties:
+            content: Flexible per-seat pricing starting at $10/month. Volume discounts
+              available for teams larger than 50 members.
+- id: custom_icon_obj_collapse
+  type: Collapse
+  properties:
+    expandIcon:
+      name: AiOutlineArrowRight
+      color: "#1677ff"
+    panels:
+      - key: cio_one
+        title: Colored Custom Icon
+      - key: cio_two
+        title: Another Panel
+  slots:
+    cio_one:
+      blocks:
+        - id: custom_icon_obj_one_text
+          type: Paragraph
+          properties:
+            content: The expand icon can be passed as an object with name and color
+              properties for further customization.
+    cio_two:
+      blocks:
+        - id: custom_icon_obj_two_text
+          type: Paragraph
+          properties:
+            content: The icon rotates 90 degrees when the panel is expanded, providing a
+              visual cue for the open/closed state.
+```
+
+This section is accessible to all users and contains general product documentation and getting-started guides.
+
+This content requires a Pro subscription to access.
+
+Enterprise-only analytics and reporting features.
+
+Community resources, FAQ, and links to the public knowledge base are available here for everyone.
+
+```yaml
+- id: disabled_collapse
+  type: Collapse
+  properties:
+    panels:
+      - key: dis_available
+        title: Available Section
+      - key: dis_locked
+        title: Locked Section (Upgrade Required)
+        disabled: true
+      - key: dis_premium
+        title: Premium Content
+        disabled: true
+      - key: dis_open
+        title: Another Available Section
+  slots:
+    dis_available:
+      blocks:
+        - id: disabled_available_text
+          type: Paragraph
+          properties:
+            content: This section is accessible to all users and contains general product
+              documentation and getting-started guides.
+    dis_locked:
+      blocks:
+        - id: disabled_locked_text
+          type: Paragraph
+          properties:
+            content: This content requires a Pro subscription to access.
+    dis_premium:
+      blocks:
+        - id: disabled_premium_text
+          type: Paragraph
+          properties:
+            content: Enterprise-only analytics and reporting features.
+    dis_open:
+      blocks:
+        - id: disabled_open_text
+          type: Paragraph
+          properties:
+            content: Community resources, FAQ, and links to the public knowledge base are
+              available here for everyone.
+```
+
+Visit the registration page and fill in your name, email, and a secure password. You will receive a verification email within minutes.
+
+Choose a workspace name, select your industry, and configure default permissions for new members joining the organization.
+
+Send invitation links via email or share a join code. Assign roles (Admin, Editor, Viewer) to control access levels.
+
+```yaml
+- id: no_arrow_collapse
+  type: Collapse
+  properties:
+    showArrow: false
+    panels:
+      - key: na_step1
+        title: Step 1 - Create Account
+      - key: na_step2
+        title: Step 2 - Configure Workspace
+      - key: na_step3
+        title: Step 3 - Invite Team Members
+  slots:
+    na_step1:
+      blocks:
+        - id: no_arrow_step1_text
+          type: Paragraph
+          properties:
+            content: Visit the registration page and fill in your name, email, and a secure
+              password. You will receive a verification email within minutes.
+    na_step2:
+      blocks:
+        - id: no_arrow_step2_text
+          type: Paragraph
+          properties:
+            content: Choose a workspace name, select your industry, and configure default
+              permissions for new members joining the organization.
+    na_step3:
+      blocks:
+        - id: no_arrow_step3_text
+          type: Paragraph
+          properties:
+            content: Send invitation links via email or share a join code. Assign roles
+              (Admin, Editor, Viewer) to control access levels.
+```
+
+Our cross-functional engineering team brings together expertise in frontend, backend, and DevOps.
+
+Built with modern frameworks and battle-tested infrastructure components.
+
+> All dependencies are pinned and audited weekly for security vulnerabilities.
+
+Key delivery milestones for the current development cycle.
+
+Internal testing release with core features — March 2026
+
+Public beta with limited access and feedback collection — June 2026
+
+General availability with full feature set and SLA guarantees — September 2026
+
+```yaml
+- id: rich_collapse
+  type: Collapse
+  properties:
+    panels:
+      - key: rich_team
+        title: Development Team
+      - key: rich_stack
+        title: Technology Stack
+      - key: rich_milestones
+        title: Project Milestones
+  slots:
+    rich_team:
+      blocks:
+        - id: rich_team_intro
+          type: Paragraph
+          properties:
+            content: Our cross-functional engineering team brings together expertise in
+              frontend, backend, and DevOps.
+        - id: rich_team_tags_row
+          type: Box
+          layout:
+            gap: 6
+          blocks:
+            - id: rich_team_tag_fe
+              type: Tag
+              properties:
+                title: Frontend
+                color: blue
+            - id: rich_team_tag_be
+              type: Tag
+              properties:
+                title: Backend
+                color: green
+            - id: rich_team_tag_devops
+              type: Tag
+              properties:
+                title: DevOps
+                color: orange
+            - id: rich_team_tag_qa
+              type: Tag
+              properties:
+                title: QA
+                color: purple
+        - id: rich_team_stat_row
+          type: Box
+          layout:
+            gap: 16
+          blocks:
+            - id: rich_team_stat_members
+              type: Statistic
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Team Members
+                value: 12
+            - id: rich_team_stat_sprints
+              type: Statistic
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Sprints Completed
+                value: 24
+    rich_stack:
+      blocks:
+        - id: rich_stack_desc
+          type: Paragraph
+          properties:
+            content: Built with modern frameworks and battle-tested infrastructure
+              components.
+        - id: rich_stack_tags_row
+          type: Box
+          layout:
+            gap: 6
+          blocks:
+            - id: rich_stack_tag_react
+              type: Tag
+              properties:
+                title: React 18
+                color: cyan
+            - id: rich_stack_tag_next
+              type: Tag
+              properties:
+                title: Next.js 14
+                color: default
+            - id: rich_stack_tag_pg
+              type: Tag
+              properties:
+                title: PostgreSQL
+                color: blue
+            - id: rich_stack_tag_redis
+              type: Tag
+              properties:
+                title: Redis
+                color: red
+            - id: rich_stack_tag_docker
+              type: Tag
+              properties:
+                title: Docker
+                color: geekblue
+        - id: rich_stack_note
+          type: Alert
+          properties:
+            message: All dependencies are pinned and audited weekly for security
+              vulnerabilities.
+            type: info
+            showIcon: true
+    rich_milestones:
+      blocks:
+        - id: rich_milestones_desc
+          type: Paragraph
+          properties:
+            content: Key delivery milestones for the current development cycle.
+        - id: rich_milestones_p1
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: rich_milestone_alpha_tag
+              type: Tag
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Alpha
+                color: orange
+            - id: rich_milestone_alpha_text
+              type: Paragraph
+              properties:
+                content: Internal testing release with core features — March 2026
+        - id: rich_milestones_p2
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: rich_milestone_beta_tag
+              type: Tag
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Beta
+                color: blue
+            - id: rich_milestone_beta_text
+              type: Paragraph
+              properties:
+                content: Public beta with limited access and feedback collection — June 2026
+        - id: rich_milestones_p3
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: rich_milestone_ga_tag
+              type: Tag
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: GA
+                color: green
+            - id: rich_milestone_ga_text
+              type: Paragraph
+              properties:
+                content: General availability with full feature set and SLA guarantees —
+                  September 2026
+```
+
+Manage user accounts, assign roles, reset passwords, and review login activity across the organization.
+
+View current subscription details, download invoices, update payment methods, and manage billing contacts.
+
+Audit trail of all administrative actions including user changes, permission updates, and configuration modifications.
+
+```yaml
+- id: extra_collapse
+  type: Collapse
+  properties:
+    panels:
+      - key: ex_users
+        title: User Management
+        extraKey: ex_users_extra
+      - key: ex_billing
+        title: Billing & Invoices
+        extraKey: ex_billing_extra
+      - key: ex_logs
+        title: Activity Logs
+        extraKey: ex_logs_extra
+  slots:
+    ex_users:
+      blocks:
+        - id: extra_users_text
+          type: Paragraph
+          properties:
+            content: Manage user accounts, assign roles, reset passwords, and review login
+              activity across the organization.
+    ex_users_extra:
+      blocks:
+        - id: extra_users_badge
+          type: Tag
+          properties:
+            title: 48 users
+            color: blue
+    ex_billing:
+      blocks:
+        - id: extra_billing_text
+          type: Paragraph
+          properties:
+            content: View current subscription details, download invoices, update payment
+              methods, and manage billing contacts.
+    ex_billing_extra:
+      blocks:
+        - id: extra_billing_badge
+          type: Tag
+          properties:
+            title: Pro Plan
+            color: gold
+    ex_logs:
+      blocks:
+        - id: extra_logs_text
+          type: Paragraph
+          properties:
+            content: Audit trail of all administrative actions including user changes,
+              permission updates, and configuration modifications.
+    ex_logs_extra:
+      blocks:
+        - id: extra_logs_badge
+          type: Tag
+          properties:
+            title: 1,204 events
+            color: default
+```
+
+The frontend is organized into feature modules, each with its own routing, state management, and component library.
+
+Shared UI components built with Ant Design, organized by atomic design principles (atoms, molecules, organisms).
+
+Global state managed via Redux Toolkit with RTK Query for server state synchronization and caching.
+
+File-based routing with Next.js App Router, protected routes via middleware, and dynamic route segments.
+
+The backend follows a microservices architecture with an API gateway handling authentication and rate limiting.
+
+RESTful API with OpenAPI 3.1 documentation. GraphQL available for complex queries. Rate limited to 1000 req/min per tenant.
+
+PostgreSQL with read replicas for horizontal scaling. Schema migrations managed with Prisma. Automated daily backups with point-in-time recovery.
+
+OAuth 2.0 with PKCE flow, JWT access tokens (15 min TTL), and secure httpOnly refresh tokens. SAML SSO available for Enterprise.
+
+```yaml
+- id: nested_outer
+  type: Collapse
+  properties:
+    panels:
+      - key: no_frontend
+        title: Frontend Architecture
+      - key: no_backend
+        title: Backend Architecture
+  slots:
+    no_frontend:
+      blocks:
+        - id: nested_fe_intro
+          type: Paragraph
+          properties:
+            content: The frontend is organized into feature modules, each with its own
+              routing, state management, and component library.
+        - id: nested_fe_inner
+          type: Collapse
+          properties:
+            bordered: false
+            panels:
+              - key: nfi_components
+                title: Component Library
+              - key: nfi_state
+                title: State Management
+              - key: nfi_routing
+                title: Routing
+          slots:
+            nfi_components:
+              blocks:
+                - id: nested_fe_components_text
+                  type: Paragraph
+                  properties:
+                    content: Shared UI components built with Ant Design, organized by atomic design
+                      principles (atoms, molecules, organisms).
+            nfi_state:
+              blocks:
+                - id: nested_fe_state_text
+                  type: Paragraph
+                  properties:
+                    content: Global state managed via Redux Toolkit with RTK Query for server state
+                      synchronization and caching.
+            nfi_routing:
+              blocks:
+                - id: nested_fe_routing_text
+                  type: Paragraph
+                  properties:
+                    content: File-based routing with Next.js App Router, protected routes via
+                      middleware, and dynamic route segments.
+    no_backend:
+      blocks:
+        - id: nested_be_intro
+          type: Paragraph
+          properties:
+            content: The backend follows a microservices architecture with an API gateway
+              handling authentication and rate limiting.
+        - id: nested_be_inner
+          type: Collapse
+          properties:
+            bordered: false
+            panels:
+              - key: nbi_api
+                title: API Layer
+              - key: nbi_database
+                title: Database Design
+              - key: nbi_auth
+                title: Authentication
+          slots:
+            nbi_api:
+              blocks:
+                - id: nested_be_api_text
+                  type: Paragraph
+                  properties:
+                    content: RESTful API with OpenAPI 3.1 documentation. GraphQL available for
+                      complex queries. Rate limited to 1000 req/min per tenant.
+            nbi_database:
+              blocks:
+                - id: nested_be_database_text
+                  type: Paragraph
+                  properties:
+                    content: PostgreSQL with read replicas for horizontal scaling. Schema migrations
+                      managed with Prisma. Automated daily backups with
+                      point-in-time recovery.
+            nbi_auth:
+              blocks:
+                - id: nested_be_auth_text
+                  type: Paragraph
+                  properties:
+                    content: OAuth 2.0 with PKCE flow, JWT access tokens (15 min TTL), and secure
+                      httpOnly refresh tokens. SAML SSO available for
+                      Enterprise.
+```
+
+Deployed on 3 regions (us-east, eu-west, ap-southeast) with automatic failover and CDN edge caching.
+
+Mirror of production with synthetic test data. Auto-deploys from the staging branch on every merge. Used for QA validation before production releases.
+
+> Last deployment was 2 hours ago. All 847 integration tests passed.
+
+Local development environment running via Docker Compose. Hot-reload enabled for frontend and backend services with seeded test database.
+
+> 3 pending database migrations need to be applied before starting the dev server.
+
+```yaml
+- id: actions_collapse
+  type: Collapse
+  properties:
+    panels:
+      - key: act_server
+        title: Production Server
+        extraKey: act_server_extra
+      - key: act_staging
+        title: Staging Environment
+        extraKey: act_staging_extra
+      - key: act_dev
+        title: Development Environment
+        extraKey: act_dev_extra
+  slots:
+    act_server:
+      blocks:
+        - id: actions_server_stats
+          type: Box
+          layout:
+            gap: 16
+          blocks:
+            - id: act_server_uptime
+              type: Statistic
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Uptime
+                value: 99.97
+                suffix: "%"
+            - id: act_server_latency
+              type: Statistic
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Avg Latency
+                value: 42
+                suffix: ms
+            - id: act_server_rpm
+              type: Statistic
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Requests/min
+                value: 8420
+        - id: actions_server_desc
+          type: Paragraph
+          properties:
+            content: Deployed on 3 regions (us-east, eu-west, ap-southeast) with automatic
+              failover and CDN edge caching.
+        - id: actions_server_btns
+          type: Box
+          layout:
+            gap: 8
+          blocks:
+            - id: act_server_btn_logs
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: View Logs
+                icon: AiOutlineFileText
+                color: primary
+                variant: outlined
+                size: small
+            - id: act_server_btn_metrics
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Metrics
+                icon: AiOutlineBarChart
+                color: primary
+                variant: outlined
+                size: small
+    act_server_extra:
+      blocks:
+        - id: act_server_status
+          type: Tag
+          properties:
+            title: Healthy
+            color: success
+    act_staging:
+      blocks:
+        - id: actions_staging_desc
+          type: Paragraph
+          properties:
+            content: Mirror of production with synthetic test data. Auto-deploys from the
+              staging branch on every merge. Used for QA validation before
+              production releases.
+        - id: actions_staging_alert
+          type: Alert
+          properties:
+            message: Last deployment was 2 hours ago. All 847 integration tests passed.
+            type: success
+            showIcon: true
+    act_staging_extra:
+      blocks:
+        - id: act_staging_status
+          type: Tag
+          properties:
+            title: Healthy
+            color: success
+    act_dev:
+      blocks:
+        - id: actions_dev_desc
+          type: Paragraph
+          properties:
+            content: Local development environment running via Docker Compose. Hot-reload
+              enabled for frontend and backend services with seeded test
+              database.
+        - id: actions_dev_alert
+          type: Alert
+          properties:
+            message: 3 pending database migrations need to be applied before starting the
+              dev server.
+            type: warning
+            showIcon: true
+    act_dev_extra:
+      blocks:
+        - id: act_dev_status
+          type: Tag
+          properties:
+            title: Needs Attention
+            color: warning
+```
+
+Follow the 8px grid system for all spacing. Use consistent border radius (8px for containers, 4px for inputs). Maintain a minimum touch target of 44x44px for mobile.
+
+Primary: #1677ff, Success: #52c41a, Warning: #faad14, Error: #ff4d4f. Always use the design token system rather than hardcoding hex values.
+
+Body: 14px/1.5715, Headings: 24px/1.3, Small: 12px/1.6667. Use the Inter font family for UI text and JetBrains Mono for code snippets.
+
+```yaml
+- id: css_styled_collapse
+  type: Collapse
+  style:
+    .element:
+      background: transparent
+      borderColor: "#d9d9d9"
+    .header:
+      fontWeight: 600
+    .content:
+      color: "#595959"
+  properties:
+    panels:
+      - key: css_design
+        title: Design Guidelines
+      - key: css_brand
+        title: Brand Colors
+      - key: css_typography
+        title: Typography
+  slots:
+    css_design:
+      blocks:
+        - id: css_design_text
+          type: Paragraph
+          properties:
+            content: Follow the 8px grid system for all spacing. Use consistent border
+              radius (8px for containers, 4px for inputs). Maintain a minimum
+              touch target of 44x44px for mobile.
+    css_brand:
+      blocks:
+        - id: css_brand_text
+          type: Paragraph
+          properties:
+            content: "Primary: #1677ff, Success: #52c41a, Warning: #faad14, Error: #ff4d4f.
+              Always use the design token system rather than hardcoding hex
+              values."
+        - id: css_brand_tags
+          type: Box
+          layout:
+            gap: 6
+          blocks:
+            - id: css_brand_tag_primary
+              type: Tag
+              properties:
+                title: Primary
+                color: "#1677ff"
+            - id: css_brand_tag_success
+              type: Tag
+              properties:
+                title: Success
+                color: "#52c41a"
+            - id: css_brand_tag_warning
+              type: Tag
+              properties:
+                title: Warning
+                color: "#faad14"
+            - id: css_brand_tag_error
+              type: Tag
+              properties:
+                title: Error
+                color: "#ff4d4f"
+    css_typography:
+      blocks:
+        - id: css_typography_text
+          type: Paragraph
+          properties:
+            content: "Body: 14px/1.5715, Headings: 24px/1.3, Small: 12px/1.6667. Use the
+              Inter font family for UI text and JetBrains Mono for code
+              snippets."
+```
+
+This collapse uses a light blue header background and a slightly tinted content area, achieved by overriding the headerBg and contentBg design tokens.
+
+The padding has been increased to 16px vertically and 20px horizontally for both header and content areas, giving a more spacious feel.
+
+A dark-themed collapse achieved entirely through design token overrides. The header, content, and border colors are all customized.
+
+Token overrides cascade to all child elements, making it straightforward to create themed sections without global CSS changes.
+
+The borderRadiusLG token controls the rounding of the collapse container corners. Set to 16px here for a softer appearance.
+
+Combining borderRadiusLG with a green-tinted headerBg creates a nature-inspired visual style suitable for eco-friendly or wellness applications.
+
+```yaml
+- id: theme_blue_header
+  type: Collapse
+  properties:
+    theme:
+      headerPadding: 16px 20px
+      contentPadding: 20px 20px
+    panels:
+      - key: tb_overview
+        title: Blue Header Theme
+      - key: tb_details
+        title: Expanded Padding
+  slots:
+    tb_overview:
+      blocks:
+        - id: theme_blue_overview_text
+          type: Paragraph
+          properties:
+            content: This collapse uses a light blue header background and a slightly tinted
+              content area, achieved by overriding the headerBg and contentBg
+              design tokens.
+    tb_details:
+      blocks:
+        - id: theme_blue_details_text
+          type: Paragraph
+          properties:
+            content: The padding has been increased to 16px vertically and 20px horizontally
+              for both header and content areas, giving a more spacious feel.
+- id: theme_dark_collapse
+  type: Collapse
+  properties:
+    theme:
+      headerBg: "#1f1f1f"
+      contentBg: "#141414"
+      colorText: "#ffffffd9"
+      colorTextHeading: "#ffffffd9"
+      colorBorder: "#424242"
+    panels:
+      - key: td_about
+        title: Dark Theme
+      - key: td_settings
+        title: Configuration
+  slots:
+    td_about:
+      blocks:
+        - id: theme_dark_about_text
+          type: Paragraph
+          properties:
+            content: A dark-themed collapse achieved entirely through design token
+              overrides. The header, content, and border colors are all
+              customized.
+    td_settings:
+      blocks:
+        - id: theme_dark_settings_text
+          type: Paragraph
+          properties:
+            content: Token overrides cascade to all child elements, making it
+              straightforward to create themed sections without global CSS
+              changes.
+- id: theme_rounded_collapse
+  type: Collapse
+  properties:
+    theme:
+      borderRadiusLG: 16
+    panels:
+      - key: tr_one
+        title: Extra Rounded Corners
+      - key: tr_two
+        title: Green Tinted Headers
+  slots:
+    tr_one:
+      blocks:
+        - id: theme_rounded_one_text
+          type: Paragraph
+          properties:
+            content: The borderRadiusLG token controls the rounding of the collapse
+              container corners. Set to 16px here for a softer appearance.
+    tr_two:
+      blocks:
+        - id: theme_rounded_two_text
+          type: Paragraph
+          properties:
+            content: Combining borderRadiusLG with a green-tinted headerBg creates a
+              nature-inspired visual style suitable for eco-friendly or wellness
+              applications.
+```
+
+Get started at no cost with essential features for individuals and small teams exploring the platform.
+
+> Community support via forums. No SLA guarantee.
+
+Everything in Free, plus advanced collaboration tools, priority support, and higher resource limits for growing teams.
+
+> Email and chat support with 24-hour response SLA.
+
+Full platform access with dedicated infrastructure, custom integrations, and white-glove onboarding for large organizations.
+
+> Dedicated account manager, 1-hour response SLA, and custom SLA agreements.
+
+```yaml
+- id: rich_accordion
+  type: Collapse
+  properties:
+    accordion: true
+    expandIconPlacement: end
+    panels:
+      - key: ra_plan_free
+        title: Free Plan
+        extraKey: ra_plan_free_extra
+      - key: ra_plan_pro
+        title: Pro Plan
+        extraKey: ra_plan_pro_extra
+      - key: ra_plan_enterprise
+        title: Enterprise Plan
+        extraKey: ra_plan_enterprise_extra
+  slots:
+    ra_plan_free:
+      blocks:
+        - id: ra_free_desc
+          type: Paragraph
+          properties:
+            content: Get started at no cost with essential features for individuals and
+              small teams exploring the platform.
+        - id: ra_free_features
+          type: Box
+          layout:
+            gap: 6
+          blocks:
+            - id: ra_free_tag_users
+              type: Tag
+              properties:
+                title: Up to 5 users
+                color: default
+            - id: ra_free_tag_projects
+              type: Tag
+              properties:
+                title: 3 projects
+                color: default
+            - id: ra_free_tag_storage
+              type: Tag
+              properties:
+                title: 1 GB storage
+                color: default
+        - id: ra_free_alert
+          type: Alert
+          properties:
+            message: Community support via forums. No SLA guarantee.
+            type: info
+            showIcon: true
+    ra_plan_free_extra:
+      blocks:
+        - id: ra_free_price
+          type: Tag
+          properties:
+            title: $0/month
+            color: green
+    ra_plan_pro:
+      blocks:
+        - id: ra_pro_desc
+          type: Paragraph
+          properties:
+            content: Everything in Free, plus advanced collaboration tools, priority
+              support, and higher resource limits for growing teams.
+        - id: ra_pro_features
+          type: Box
+          layout:
+            gap: 6
+          blocks:
+            - id: ra_pro_tag_users
+              type: Tag
+              properties:
+                title: Up to 50 users
+                color: blue
+            - id: ra_pro_tag_projects
+              type: Tag
+              properties:
+                title: Unlimited projects
+                color: blue
+            - id: ra_pro_tag_storage
+              type: Tag
+              properties:
+                title: 100 GB storage
+                color: blue
+            - id: ra_pro_tag_sso
+              type: Tag
+              properties:
+                title: SSO included
+                color: blue
+        - id: ra_pro_alert
+          type: Alert
+          properties:
+            message: Email and chat support with 24-hour response SLA.
+            type: success
+            showIcon: true
+    ra_plan_pro_extra:
+      blocks:
+        - id: ra_pro_price
+          type: Tag
+          properties:
+            title: $29/month
+            color: blue
+    ra_plan_enterprise:
+      blocks:
+        - id: ra_enterprise_desc
+          type: Paragraph
+          properties:
+            content: Full platform access with dedicated infrastructure, custom
+              integrations, and white-glove onboarding for large organizations.
+        - id: ra_enterprise_features
+          type: Box
+          layout:
+            gap: 6
+          blocks:
+            - id: ra_ent_tag_users
+              type: Tag
+              properties:
+                title: Unlimited users
+                color: gold
+            - id: ra_ent_tag_projects
+              type: Tag
+              properties:
+                title: Unlimited projects
+                color: gold
+            - id: ra_ent_tag_storage
+              type: Tag
+              properties:
+                title: Unlimited storage
+                color: gold
+            - id: ra_ent_tag_sso
+              type: Tag
+              properties:
+                title: SAML SSO
+                color: gold
+            - id: ra_ent_tag_sla
+              type: Tag
+              properties:
+                title: 99.99% SLA
+                color: gold
+        - id: ra_enterprise_alert
+          type: Alert
+          properties:
+            message: Dedicated account manager, 1-hour response SLA, and custom SLA
+              agreements.
+            type: warning
+            showIcon: true
+    ra_plan_enterprise_extra:
+      blocks:
+        - id: ra_enterprise_price
+          type: Tag
+          properties:
+            title: Custom
+            color: gold
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `accordion` | boolean | `false` | If true, only one panel is open at a time. |
+| `activeKey` | string | - | Current panel's key. |
+| `bordered` | boolean | `true` | Toggles rendering of the border around the collapse block. |
+| `defaultActiveKey` | string | - | Initial active panel's key, if activeKey is not set. |
+| `destroyInactivePanel` | boolean | `false` | Destroy inactive panel. |
+| `expandIcon` | string \| object | - | Name of an React-Icon (See all icons) or properties of an Icon block for expand icon on the right of selector. |
+| `expandIconPlacement` | string | `"start"` | Set placement of the expand icon. Enum: `start`, `end`. |
+| `forceRender` | boolean | `"false"` | Force render for all panels. |
+| `panels` | array | - |  |
+| `panels.$.title` | string | - | Title of the panel - supports html. |
+| `panels.$.key` | string | - | Key of the panel. |
+| `panels.$.extraKey` | string | - | Key for the extra area of the panel. |
+| `panels.$.disabled` | boolean | `false` | Disable the panel if true. |
+| `showArrow` | boolean | `true` | Show expand icon. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design collapse tokens](https://ant.design/components/collapse#design-token). |
+| `theme.headerPadding` | string | `"12px 16px"` | Padding of the collapse header. |
+| `theme.headerBg` | string | `"rgba(0, 0, 0, 0.02)"` | Background color of the collapse header. |
+| `theme.contentPadding` | string | `"16px 16px"` | Padding of the collapse content area. |
+| `theme.contentBg` | string | `"#ffffff"` | Background color of the collapse content area. |
+| `theme.borderlessContentPadding` | string | `"4px 16px 16px"` | Padding of the content area in borderless (ghost) style. |
+| `theme.borderlessContentBg` | string | `"transparent"` | Background color of the content area in borderless (ghost) style. |
+| `theme.colorBorder` | string | - | Border color of the collapse component. |
+| `theme.borderRadiusLG` | number | `8` | Border radius of the collapse container. |
+| `theme.colorText` | string | - | Text color for the collapse content. |
+| `theme.colorTextHeading` | string | - | Text color for the collapse header. |
+| `theme.fontSize` | number | `14` | Font size of the collapse content. |
+
+| Event | Event Data | Description |
+| --- | --- | --- |
+| `onChange` | `{ activeKey }` | Trigger actions when collapse item is toggled. |
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The Collapse element. |
+| `/expandIcon` | The expand icon in the Collapse. |
+| `/header` | The Collapse header. |
+| `/content` | The Collapse content. |
+
+Slot keys are user-defined in your config and resolved at build time — not generated at runtime. The block typically pairs slots with an array property (`tabs`, `panels`, `slides`) listed in the Properties table; see the examples above for the expected shape.