@lowdefy/blocks-antd 5.6.0 → 6.1.0

package/dist/blocks/Tour/gallery.yaml

@@ -0,0 +1,2305 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+- title: Basic Tour with Steps
+  blocks:
+    - id: basic_btns_row
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: basic_steps_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: 3 Steps
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: basic_steps_start
+                type: SetState
+                params:
+                  basic_steps_tour_open: true
+        - id: basic_single_step_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Single Step
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: basic_single_step_start
+                type: SetState
+                params:
+                  basic_single_step_tour_open: true
+        - id: basic_detailed_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: 5 Steps
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: basic_detailed_start
+                type: SetState
+                params:
+                  basic_detailed_tour_open: true
+    - id: basic_steps_tour
+      type: Tour
+      properties:
+        open:
+          _state: basic_steps_tour_open
+        steps:
+          - title: Welcome
+            description: This is the first step of the tour.
+          - title: Explore Features
+            description: Discover the key features available in the dashboard.
+          - title: Get Started
+            description: You are all set to begin using the application.
+      events:
+        onClose:
+          - id: basic_steps_tour_close
+            type: SetState
+            params:
+              basic_steps_tour_open: false
+        onFinish:
+          - id: basic_steps_tour_finish
+            type: SetState
+            params:
+              basic_steps_tour_open: false
+    - id: basic_single_step_tour
+      type: Tour
+      properties:
+        open:
+          _state: basic_single_step_tour_open
+        steps:
+          - title: Quick Tip
+            description: A single-step tour works well for brief announcements.
+      events:
+        onClose:
+          - id: basic_single_step_tour_close
+            type: SetState
+            params:
+              basic_single_step_tour_open: false
+        onFinish:
+          - id: basic_single_step_tour_finish
+            type: SetState
+            params:
+              basic_single_step_tour_open: false
+    - id: basic_detailed_tour
+      type: Tour
+      properties:
+        open:
+          _state: basic_detailed_tour_open
+        steps:
+          - title: Step 1 of 5
+            description: Tours support many steps for longer walkthroughs.
+          - title: Step 2 of 5
+            description: Each step can have its own title and description.
+          - title: Step 3 of 5
+            description: Users navigate with Next and Previous buttons.
+          - title: Step 4 of 5
+            description: Steps are zero-indexed internally.
+          - title: Step 5 of 5
+            description: The last step shows a Finish button instead of Next.
+      events:
+        onClose:
+          - id: basic_detailed_tour_close
+            type: SetState
+            params:
+              basic_detailed_tour_open: false
+        onFinish:
+          - id: basic_detailed_tour_finish
+            type: SetState
+            params:
+              basic_detailed_tour_open: false
+
+- title: Tour Types
+  blocks:
+    - id: type_btns_row
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: type_default_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Default
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: type_default_start
+                type: SetState
+                params:
+                  type_default_tour_open: true
+        - id: type_primary_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Primary
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: type_primary_start
+                type: SetState
+                params:
+                  type_primary_tour_open: true
+        - id: type_per_step_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Per Step
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: type_per_step_start
+                type: SetState
+                params:
+                  type_per_step_tour_open: true
+    - id: type_default_tour
+      type: Tour
+      properties:
+        open:
+          _state: type_default_tour_open
+        type: default
+        steps:
+          - title: Default Type
+            description: Light background with dark text. Blends naturally with light-themed interfaces.
+          - title: Subtle Guidance
+            description: The default type is understated, ideal for non-intrusive tours.
+      events:
+        onClose:
+          - id: type_default_tour_close
+            type: SetState
+            params:
+              type_default_tour_open: false
+        onFinish:
+          - id: type_default_tour_finish
+            type: SetState
+            params:
+              type_default_tour_open: false
+    - id: type_primary_tour
+      type: Tour
+      properties:
+        open:
+          _state: type_primary_tour_open
+        type: primary
+        steps:
+          - title: Primary Type
+            description: Bold colored background using the theme primary color.
+          - title: High Visibility
+            description: Primary tours draw attention and suit critical onboarding flows.
+      events:
+        onClose:
+          - id: type_primary_tour_close
+            type: SetState
+            params:
+              type_primary_tour_open: false
+        onFinish:
+          - id: type_primary_tour_finish
+            type: SetState
+            params:
+              type_primary_tour_open: false
+    - id: type_per_step_row
+      type: Box
+      layout:
+        gap: 16
+      blocks:
+        - id: type_per_step_btn_1
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Introduction
+            color: default
+            variant: outlined
+        - id: type_per_step_btn_2
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Key Feature
+            color: primary
+            variant: solid
+    - id: type_per_step_tour
+      type: Tour
+      properties:
+        open:
+          _state: type_per_step_tour_open
+        type: default
+        steps:
+          - title: Introduction
+            description: This step inherits the default type from the tour.
+            target: type_per_step_btn_1
+            type: default
+          - title: Key Feature
+            description: This step overrides to primary to draw extra attention.
+            target: type_per_step_btn_2
+            type: primary
+      events:
+        onClose:
+          - id: type_per_step_tour_close
+            type: SetState
+            params:
+              type_per_step_tour_open: false
+        onFinish:
+          - id: type_per_step_tour_finish
+            type: SetState
+            params:
+              type_per_step_tour_open: false
+
+- title: Targeted Steps
+  blocks:
+    - id: target_btns_row
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: target_tour_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Button Targets
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: target_tour_start
+                type: SetState
+                params:
+                  target_tour_open: true
+        - id: target_mixed_tour_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Mixed Targets
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: target_mixed_tour_start
+                type: SetState
+                params:
+                  target_mixed_tour_open: true
+    - id: target_row
+      type: Box
+      layout:
+        gap: 16
+      blocks:
+        - id: target_upload_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Upload
+            color: primary
+            variant: solid
+            icon: AiOutlineUpload
+        - id: target_save_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Save Draft
+            color: green
+            variant: outlined
+            icon: AiOutlineSave
+        - id: target_share_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Share
+            color: purple
+            variant: solid
+            icon: AiOutlineShareAlt
+    - id: target_tour
+      type: Tour
+      properties:
+        open:
+          _state: target_tour_open
+        steps:
+          - title: Upload Files
+            description: Click here to upload documents or images to the workspace.
+            target: target_upload_btn
+          - title: Save Progress
+            description: Save your current work as a draft to continue later.
+            target: target_save_btn
+          - title: Share with Team
+            description: Share your work with team members via link or invitation.
+            target: target_share_btn
+      events:
+        onClose:
+          - id: target_tour_close
+            type: SetState
+            params:
+              target_tour_open: false
+        onFinish:
+          - id: target_tour_finish
+            type: SetState
+            params:
+              target_tour_open: false
+    - id: target_mixed_row
+      type: Box
+      layout:
+        gap: 16
+        align: center
+      blocks:
+        - id: target_mixed_input
+          type: TextInput
+          layout:
+            flex: 0 0 240px
+          properties:
+            label:
+              disabled: true
+            placeholder: Search...
+        - id: target_mixed_switch
+          type: Switch
+          layout:
+            flex: 0 0 auto
+          properties:
+            label:
+              disabled: true
+    - id: target_mixed_tour
+      type: Tour
+      properties:
+        open:
+          _state: target_mixed_tour_open
+        steps:
+          - title: Search Bar
+            description: Use the search bar to quickly find items.
+            target: target_mixed_input
+          - title: Toggle Setting
+            description: Toggle this switch to enable or disable notifications.
+            target: target_mixed_switch
+      events:
+        onClose:
+          - id: target_mixed_tour_close
+            type: SetState
+            params:
+              target_mixed_tour_open: false
+        onFinish:
+          - id: target_mixed_tour_finish
+            type: SetState
+            params:
+              target_mixed_tour_open: false
+
+- title: Placement
+  blocks:
+    - id: placement_btns_row
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: placement_tour_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Cardinal
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: placement_tour_start
+                type: SetState
+                params:
+                  placement_tour_open: true
+        - id: placement_fine_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Fine Placement
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: placement_fine_start
+                type: SetState
+                params:
+                  placement_fine_tour_open: true
+        - id: placement_level_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Tour-Level
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: placement_level_start
+                type: SetState
+                params:
+                  placement_tour_level_open: true
+    - id: placement_row
+      type: Box
+      layout:
+        gap: 16
+        justify: center
+      blocks:
+        - id: placement_top_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Top
+            color: primary
+            variant: outlined
+        - id: placement_right_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Right
+            color: green
+            variant: outlined
+        - id: placement_bottom_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Bottom
+            color: purple
+            variant: outlined
+        - id: placement_left_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Left
+            color: orange
+            variant: outlined
+    - id: placement_tour
+      type: Tour
+      properties:
+        open:
+          _state: placement_tour_open
+        steps:
+          - title: Top Placement
+            description: Guide card appears above the target element.
+            target: placement_top_btn
+            placement: top
+          - title: Right Placement
+            description: Guide card appears to the right of the target.
+            target: placement_right_btn
+            placement: right
+          - title: Bottom Placement
+            description: Guide card appears below the target element.
+            target: placement_bottom_btn
+            placement: bottom
+          - title: Left Placement
+            description: Guide card appears to the left of the target.
+            target: placement_left_btn
+            placement: left
+      events:
+        onClose:
+          - id: placement_tour_close
+            type: SetState
+            params:
+              placement_tour_open: false
+        onFinish:
+          - id: placement_tour_finish
+            type: SetState
+            params:
+              placement_tour_open: false
+    - id: placement_fine_tour
+      type: Tour
+      properties:
+        open:
+          _state: placement_fine_tour_open
+        steps:
+          - title: Top Left
+            description: Aligned to the top-left corner of the target.
+            placement: topLeft
+          - title: Bottom Right
+            description: Aligned to the bottom-right corner of the target.
+            placement: bottomRight
+          - title: Right Top
+            description: On the right side, aligned to the top.
+            placement: rightTop
+      events:
+        onClose:
+          - id: placement_fine_tour_close
+            type: SetState
+            params:
+              placement_fine_tour_open: false
+        onFinish:
+          - id: placement_fine_tour_finish
+            type: SetState
+            params:
+              placement_fine_tour_open: false
+    - id: placement_tour_level
+      type: Tour
+      properties:
+        open:
+          _state: placement_tour_level_open
+        placement: bottom
+        steps:
+          - title: Tour-Level Placement
+            description: Setting placement on the tour applies to all steps by default.
+          - title: Consistent Position
+            description: All steps appear below the target unless overridden at the step level.
+      events:
+        onClose:
+          - id: placement_tour_level_close
+            type: SetState
+            params:
+              placement_tour_level_open: false
+        onFinish:
+          - id: placement_tour_level_finish
+            type: SetState
+            params:
+              placement_tour_level_open: false
+
+- title: Mask Configuration
+  blocks:
+    - id: mask_btns_row
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: mask_enabled_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Mask On
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: mask_enabled_start
+                type: SetState
+                params:
+                  mask_enabled_tour_open: true
+        - id: mask_disabled_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Mask Off
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: mask_disabled_start
+                type: SetState
+                params:
+                  mask_disabled_tour_open: true
+        - id: mask_custom_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Custom Mask
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: mask_custom_start
+                type: SetState
+                params:
+                  mask_custom_tour_open: true
+        - id: mask_per_step_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Per Step
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: mask_per_step_start
+                type: SetState
+                params:
+                  mask_per_step_tour_open: true
+    - id: mask_row
+      type: Box
+      layout:
+        gap: 16
+      blocks:
+        - id: mask_target_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Masked Target
+            color: primary
+            variant: solid
+    - id: mask_enabled_tour
+      type: Tour
+      properties:
+        open:
+          _state: mask_enabled_tour_open
+        mask: true
+        steps:
+          - title: Mask Enabled
+            description: The background is dimmed, drawing focus to the tour card.
+            target: mask_target_btn
+      events:
+        onClose:
+          - id: mask_enabled_tour_close
+            type: SetState
+            params:
+              mask_enabled_tour_open: false
+        onFinish:
+          - id: mask_enabled_tour_finish
+            type: SetState
+            params:
+              mask_enabled_tour_open: false
+    - id: mask_disabled_tour
+      type: Tour
+      properties:
+        open:
+          _state: mask_disabled_tour_open
+        mask: false
+        steps:
+          - title: Mask Disabled
+            description: No overlay is shown. The page remains fully visible and interactive.
+      events:
+        onClose:
+          - id: mask_disabled_tour_close
+            type: SetState
+            params:
+              mask_disabled_tour_open: false
+        onFinish:
+          - id: mask_disabled_tour_finish
+            type: SetState
+            params:
+              mask_disabled_tour_open: false
+    - id: mask_custom_tour
+      type: Tour
+      style:
+        .mask:
+          boxShadow: inset 0 0 15px #333
+      properties:
+        open:
+          _state: mask_custom_tour_open
+        mask:
+          color: rgba(80, 0, 130, 0.5)
+        steps:
+          - title: Custom Mask
+            description: A purple-tinted overlay with an inner shadow effect.
+            target: mask_target_btn
+      events:
+        onClose:
+          - id: mask_custom_tour_close
+            type: SetState
+            params:
+              mask_custom_tour_open: false
+        onFinish:
+          - id: mask_custom_tour_finish
+            type: SetState
+            params:
+              mask_custom_tour_open: false
+    - id: mask_per_step_row
+      type: Box
+      layout:
+        gap: 16
+      blocks:
+        - id: mask_per_step_btn_1
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Masked Step
+            color: primary
+            variant: solid
+        - id: mask_per_step_btn_2
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Unmasked Step
+            color: default
+            variant: outlined
+    - id: mask_per_step_tour
+      type: Tour
+      properties:
+        open:
+          _state: mask_per_step_tour_open
+        mask: true
+        steps:
+          - title: Masked
+            description: This step shows the mask overlay.
+            target: mask_per_step_btn_1
+            mask: true
+          - title: Unmasked
+            description: This step hides the mask for a clear view.
+            target: mask_per_step_btn_2
+            mask: false
+      events:
+        onClose:
+          - id: mask_per_step_tour_close
+            type: SetState
+            params:
+              mask_per_step_tour_open: false
+        onFinish:
+          - id: mask_per_step_tour_finish
+            type: SetState
+            params:
+              mask_per_step_tour_open: false
+
+- title: Arrow Configuration
+  blocks:
+    - id: arrow_btns_row
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: arrow_enabled_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Arrow On
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: arrow_enabled_start
+                type: SetState
+                params:
+                  arrow_enabled_tour_open: true
+        - id: arrow_disabled_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Arrow Off
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: arrow_disabled_start
+                type: SetState
+                params:
+                  arrow_disabled_tour_open: true
+        - id: arrow_centered_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Centered
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: arrow_centered_start
+                type: SetState
+                params:
+                  arrow_centered_tour_open: true
+        - id: arrow_per_step_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Per Step
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: arrow_per_step_start
+                type: SetState
+                params:
+                  arrow_per_step_tour_open: true
+    - id: arrow_enabled_tour
+      type: Tour
+      properties:
+        open:
+          _state: arrow_enabled_tour_open
+        arrow: true
+        steps:
+          - title: Arrow Visible
+            description: An arrow points from the guide card toward the target element.
+          - title: Visual Connection
+            description: Arrows help users understand which element the step references.
+      events:
+        onClose:
+          - id: arrow_enabled_tour_close
+            type: SetState
+            params:
+              arrow_enabled_tour_open: false
+        onFinish:
+          - id: arrow_enabled_tour_finish
+            type: SetState
+            params:
+              arrow_enabled_tour_open: false
+    - id: arrow_disabled_tour
+      type: Tour
+      properties:
+        open:
+          _state: arrow_disabled_tour_open
+        arrow: false
+        steps:
+          - title: No Arrow
+            description: Without arrows, the guide card appears as a clean floating panel.
+      events:
+        onClose:
+          - id: arrow_disabled_tour_close
+            type: SetState
+            params:
+              arrow_disabled_tour_open: false
+        onFinish:
+          - id: arrow_disabled_tour_finish
+            type: SetState
+            params:
+              arrow_disabled_tour_open: false
+    - id: arrow_centered_tour
+      type: Tour
+      properties:
+        open:
+          _state: arrow_centered_tour_open
+        arrow:
+          pointAtCenter: true
+        steps:
+          - title: Centered Arrow
+            description: The arrow points precisely at the center of the target element.
+      events:
+        onClose:
+          - id: arrow_centered_tour_close
+            type: SetState
+            params:
+              arrow_centered_tour_open: false
+        onFinish:
+          - id: arrow_centered_tour_finish
+            type: SetState
+            params:
+              arrow_centered_tour_open: false
+    - id: arrow_per_step_row
+      type: Box
+      layout:
+        gap: 16
+      blocks:
+        - id: arrow_per_step_btn_1
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: With Arrow
+            color: primary
+            variant: solid
+        - id: arrow_per_step_btn_2
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Centered Arrow
+            color: green
+            variant: solid
+    - id: arrow_per_step_tour
+      type: Tour
+      properties:
+        open:
+          _state: arrow_per_step_tour_open
+        steps:
+          - title: Default Arrow
+            description: This step shows the default arrow.
+            target: arrow_per_step_btn_1
+            arrow: true
+          - title: Centered Arrow
+            description: This step points the arrow at the center of the target.
+            target: arrow_per_step_btn_2
+            arrow:
+              pointAtCenter: true
+      events:
+        onClose:
+          - id: arrow_per_step_tour_close
+            type: SetState
+            params:
+              arrow_per_step_tour_open: false
+        onFinish:
+          - id: arrow_per_step_tour_finish
+            type: SetState
+            params:
+              arrow_per_step_tour_open: false
+
+- title: Cover Images
+  blocks:
+    - id: cover_btns_row
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: cover_tour_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Cover Tour
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: cover_tour_start
+                type: SetState
+                params:
+                  cover_tour_open: true
+        - id: cover_target_tour_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: With Targets
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: cover_target_tour_start
+                type: SetState
+                params:
+                  cover_target_tour_open: true
+    - id: cover_tour
+      type: Tour
+      properties:
+        open:
+          _state: cover_tour_open
+        steps:
+          - title: Welcome to the Dashboard
+            description: Get familiar with the main interface and its key areas.
+            cover: https://gw.alipayobjects.com/zos/bmw-prod/e9a9b1e8-5e62-4e12-a3b7-e3695b0a5f3c.png
+          - title: Navigation Menu
+            description: Use the sidebar to navigate between different sections.
+            cover: https://gw.alipayobjects.com/zos/bmw-prod/ed5cf3c4-5e34-43e5-9c39-fe131c7cf88e.png
+          - title: All Done
+            description: You are ready to start using the application.
+      events:
+        onClose:
+          - id: cover_tour_close
+            type: SetState
+            params:
+              cover_tour_open: false
+        onFinish:
+          - id: cover_tour_finish
+            type: SetState
+            params:
+              cover_tour_open: false
+    - id: cover_target_row
+      type: Box
+      layout:
+        gap: 16
+      blocks:
+        - id: cover_target_btn_1
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Dashboard
+            color: primary
+            variant: solid
+            icon: AiOutlineDashboard
+        - id: cover_target_btn_2
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Settings
+            color: default
+            variant: outlined
+            icon: AiOutlineSetting
+    - id: cover_target_tour
+      type: Tour
+      properties:
+        open:
+          _state: cover_target_tour_open
+        steps:
+          - title: Dashboard Overview
+            description: The dashboard shows a summary of your workspace activity.
+            target: cover_target_btn_1
+            cover: https://gw.alipayobjects.com/zos/bmw-prod/e9a9b1e8-5e62-4e12-a3b7-e3695b0a5f3c.png
+          - title: Configure Settings
+            description: Adjust preferences and integrations from the settings page.
+            target: cover_target_btn_2
+            cover: https://gw.alipayobjects.com/zos/bmw-prod/ed5cf3c4-5e34-43e5-9c39-fe131c7cf88e.png
+      events:
+        onClose:
+          - id: cover_target_tour_close
+            type: SetState
+            params:
+              cover_target_tour_open: false
+        onFinish:
+          - id: cover_target_tour_finish
+            type: SetState
+            params:
+              cover_target_tour_open: false
+
+- title: Closable and Keyboard Navigation
+  blocks:
+    - id: closable_btns_row
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: closable_tour_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Closable
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: closable_tour_start
+                type: SetState
+                params:
+                  closable_tour_open: true
+        - id: not_closable_tour_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Not Closable
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: not_closable_tour_start
+                type: SetState
+                params:
+                  not_closable_tour_open: true
+        - id: closable_per_step_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Per Step
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: closable_per_step_start
+                type: SetState
+                params:
+                  closable_per_step_tour_open: true
+    - id: closable_tour
+      type: Tour
+      properties:
+        open:
+          _state: closable_tour_open
+        closable: true
+        keyboard: true
+        steps:
+          - title: Closable Tour
+            description: The close button (X) is visible. Press Escape to close.
+          - title: Keyboard Navigation
+            description: Use arrow keys to navigate between steps.
+          - title: Final Step
+            description: Both close button and keyboard shortcuts are available throughout.
+      events:
+        onClose:
+          - id: closable_tour_close
+            type: SetState
+            params:
+              closable_tour_open: false
+        onFinish:
+          - id: closable_tour_finish
+            type: SetState
+            params:
+              closable_tour_open: false
+    - id: not_closable_tour
+      type: Tour
+      properties:
+        open:
+          _state: not_closable_tour_open
+        closable: false
+        keyboard: false
+        steps:
+          - title: Guided Tour
+            description: Close button and Escape key are disabled. Use Next and Previous buttons.
+          - title: Must Complete
+            description: Users must step through all steps to finish the tour.
+      events:
+        onClose:
+          - id: not_closable_tour_close
+            type: SetState
+            params:
+              not_closable_tour_open: false
+        onFinish:
+          - id: not_closable_tour_finish
+            type: SetState
+            params:
+              not_closable_tour_open: false
+    - id: closable_per_step_row
+      type: Box
+      layout:
+        gap: 16
+      blocks:
+        - id: closable_per_step_btn_1
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Closable
+            color: green
+            variant: outlined
+        - id: closable_per_step_btn_2
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Not Closable
+            color: orange
+            variant: outlined
+    - id: closable_per_step_tour
+      type: Tour
+      properties:
+        open:
+          _state: closable_per_step_tour_open
+        closable: true
+        steps:
+          - title: Closable Step
+            description: This step has the close button visible.
+            target: closable_per_step_btn_1
+            closable: true
+          - title: Not Closable Step
+            description: This step hides the close button. Navigate forward to continue.
+            target: closable_per_step_btn_2
+            closable: false
+      events:
+        onClose:
+          - id: closable_per_step_tour_close
+            type: SetState
+            params:
+              closable_per_step_tour_open: false
+        onFinish:
+          - id: closable_per_step_tour_finish
+            type: SetState
+            params:
+              closable_per_step_tour_open: false
+
+- title: Animation, Scroll, and Disabled Interaction
+  blocks:
+    - id: anim_btns_row
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: animated_tour_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Animated
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: animated_tour_start
+                type: SetState
+                params:
+                  animated_tour_open: true
+        - id: no_animation_tour_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: No Animation
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: no_animation_tour_start
+                type: SetState
+                params:
+                  no_animation_tour_open: true
+        - id: disabled_interaction_tour_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Disabled Interaction
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: disabled_interaction_tour_start
+                type: SetState
+                params:
+                  disabled_interaction_tour_open: true
+    - id: animated_tour
+      type: Tour
+      properties:
+        open:
+          _state: animated_tour_open
+        animated: true
+        scrollIntoViewOptions: true
+        steps:
+          - title: Animated Tour
+            description: Smooth transitions between steps with animation enabled.
+          - title: Auto Scroll
+            description: Target elements automatically scroll into view when a step activates.
+      events:
+        onClose:
+          - id: animated_tour_close
+            type: SetState
+            params:
+              animated_tour_open: false
+        onFinish:
+          - id: animated_tour_finish
+            type: SetState
+            params:
+              animated_tour_open: false
+    - id: no_animation_tour
+      type: Tour
+      properties:
+        open:
+          _state: no_animation_tour_open
+        animated: false
+        scrollIntoViewOptions: false
+        steps:
+          - title: No Animation
+            description: Instant transitions without animation. Scroll to target is also disabled.
+      events:
+        onClose:
+          - id: no_animation_tour_close
+            type: SetState
+            params:
+              no_animation_tour_open: false
+        onFinish:
+          - id: no_animation_tour_finish
+            type: SetState
+            params:
+              no_animation_tour_open: false
+    - id: disabled_interaction_row
+      type: Box
+      layout:
+        gap: 16
+      blocks:
+        - id: disabled_interaction_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Cannot Click During Tour
+            color: primary
+            variant: solid
+            icon: AiOutlineLock
+    - id: disabled_interaction_tour
+      type: Tour
+      properties:
+        open:
+          _state: disabled_interaction_tour_open
+        disabledInteraction: true
+        steps:
+          - title: Interaction Disabled
+            description: The highlighted target element cannot be clicked during this tour.
+            target: disabled_interaction_btn
+          - title: Read-Only Tour
+            description: Users can only navigate tour steps, not interact with highlighted elements.
+      events:
+        onClose:
+          - id: disabled_interaction_tour_close
+            type: SetState
+            params:
+              disabled_interaction_tour_open: false
+        onFinish:
+          - id: disabled_interaction_tour_finish
+            type: SetState
+            params:
+              disabled_interaction_tour_open: false
+
+- title: Gap and Current Step
+  blocks:
+    - id: gap_btns_row
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: gap_default_tour_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Default Gap
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: gap_default_tour_start
+                type: SetState
+                params:
+                  gap_default_tour_open: true
+        - id: gap_large_tour_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Large Gap
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: gap_large_tour_start
+                type: SetState
+                params:
+                  gap_large_tour_open: true
+        - id: gap_tight_tour_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: No Gap
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: gap_tight_tour_start
+                type: SetState
+                params:
+                  gap_tight_tour_open: true
+        - id: current_step_tour_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Start at Step 2
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: current_step_tour_start
+                type: SetState
+                params:
+                  current_step_tour_open: true
+    - id: gap_row
+      type: Box
+      layout:
+        gap: 16
+      blocks:
+        - id: gap_default_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Default Gap
+            color: primary
+            variant: solid
+        - id: gap_large_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Large Gap
+            color: purple
+            variant: solid
+        - id: gap_tight_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: No Gap
+            color: orange
+            variant: solid
+    - id: gap_default_tour
+      type: Tour
+      properties:
+        open:
+          _state: gap_default_tour_open
+        steps:
+          - title: Default Gap
+            description: Standard spacing between the highlighted area and the target.
+            target: gap_default_btn
+      events:
+        onClose:
+          - id: gap_default_tour_close
+            type: SetState
+            params:
+              gap_default_tour_open: false
+        onFinish:
+          - id: gap_default_tour_finish
+            type: SetState
+            params:
+              gap_default_tour_open: false
+    - id: gap_large_tour
+      type: Tour
+      properties:
+        open:
+          _state: gap_large_tour_open
+        gap:
+          x: 20
+          y: 20
+        steps:
+          - title: Large Gap
+            description: Increased gap (20px) around the target for more breathing room.
+            target: gap_large_btn
+      events:
+        onClose:
+          - id: gap_large_tour_close
+            type: SetState
+            params:
+              gap_large_tour_open: false
+        onFinish:
+          - id: gap_large_tour_finish
+            type: SetState
+            params:
+              gap_large_tour_open: false
+    - id: gap_tight_tour
+      type: Tour
+      properties:
+        open:
+          _state: gap_tight_tour_open
+        gap:
+          x: 0
+          y: 0
+        steps:
+          - title: No Gap
+            description: The highlight fits tightly around the target with zero spacing.
+            target: gap_tight_btn
+      events:
+        onClose:
+          - id: gap_tight_tour_close
+            type: SetState
+            params:
+              gap_tight_tour_open: false
+        onFinish:
+          - id: gap_tight_tour_finish
+            type: SetState
+            params:
+              gap_tight_tour_open: false
+    - id: current_step_tour
+      type: Tour
+      properties:
+        open:
+          _state: current_step_tour_open
+        current: 1
+        steps:
+          - title: Step One
+            description: This is the first step, but the tour does not start here.
+          - title: Step Two (Starting Point)
+            description: The tour opens at this step because current is set to 1 (zero-indexed).
+          - title: Step Three
+            description: This is the third and final step.
+      events:
+        onClose:
+          - id: current_step_tour_close
+            type: SetState
+            params:
+              current_step_tour_open: false
+        onFinish:
+          - id: current_step_tour_finish
+            type: SetState
+            params:
+              current_step_tour_open: false
+
+- title: Z-Index Control
+  blocks:
+    - id: zindex_btns_row
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: zindex_default_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Default (1070)
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: zindex_default_start
+                type: SetState
+                params:
+                  zindex_default_tour_open: true
+        - id: zindex_high_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: High (2000)
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: zindex_high_start
+                type: SetState
+                params:
+                  zindex_high_tour_open: true
+        - id: zindex_low_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Low (900)
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: zindex_low_start
+                type: SetState
+                params:
+                  zindex_low_tour_open: true
+    - id: zindex_default_tour
+      type: Tour
+      properties:
+        open:
+          _state: zindex_default_tour_open
+        steps:
+          - title: Default Z-Index
+            description: Tour uses the default stacking order (1070). Appears above most content.
+      events:
+        onClose:
+          - id: zindex_default_tour_close
+            type: SetState
+            params:
+              zindex_default_tour_open: false
+        onFinish:
+          - id: zindex_default_tour_finish
+            type: SetState
+            params:
+              zindex_default_tour_open: false
+    - id: zindex_high_tour
+      type: Tour
+      properties:
+        open:
+          _state: zindex_high_tour_open
+        zIndex: 2000
+        steps:
+          - title: High Z-Index (2000)
+            description: Tour renders above other overlays such as modals and drawers.
+      events:
+        onClose:
+          - id: zindex_high_tour_close
+            type: SetState
+            params:
+              zindex_high_tour_open: false
+        onFinish:
+          - id: zindex_high_tour_finish
+            type: SetState
+            params:
+              zindex_high_tour_open: false
+    - id: zindex_low_tour
+      type: Tour
+      properties:
+        open:
+          _state: zindex_low_tour_open
+        zIndex: 900
+        steps:
+          - title: Low Z-Index (900)
+            description: Tour renders below some overlays. Fixed headers may appear above it.
+      events:
+        onClose:
+          - id: zindex_low_tour_close
+            type: SetState
+            params:
+              zindex_low_tour_open: false
+        onFinish:
+          - id: zindex_low_tour_finish
+            type: SetState
+            params:
+              zindex_low_tour_open: false
+
+- title: Events
+  blocks:
+    - id: events_start_btn
+      type: Button
+      layout:
+        flex: 0 0 auto
+      properties:
+        title: Start Events Tour
+        color: primary
+        variant: outlined
+        size: small
+      events:
+        onClick:
+          - id: events_tour_start
+            type: SetState
+            params:
+              events_tour_open: true
+    - id: events_row
+      type: Box
+      layout:
+        gap: 16
+      blocks:
+        - id: events_btn_1
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Step 1 Target
+            color: primary
+            variant: solid
+        - id: events_btn_2
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Step 2 Target
+            color: green
+            variant: solid
+    - id: events_tour
+      type: Tour
+      properties:
+        open:
+          _state: events_tour_open
+        steps:
+          - title: First Step
+            description: Navigate forward to trigger the onChange event.
+            target: events_btn_1
+          - title: Second Step
+            description: Close the tour or finish to trigger onClose or onFinish.
+            target: events_btn_2
+      events:
+        onChange:
+          - id: events_on_change
+            type: DisplayMessage
+            params:
+              content: Step changed!
+              status: info
+        onClose:
+          - id: events_tour_close
+            type: SetState
+            params:
+              events_tour_open: false
+          - id: events_on_close
+            type: DisplayMessage
+            params:
+              content: Tour closed.
+              status: warning
+        onFinish:
+          - id: events_tour_finish
+            type: SetState
+            params:
+              events_tour_open: false
+          - id: events_on_finish
+            type: DisplayMessage
+            params:
+              content: Tour completed!
+              status: success
+
+- title: Style and CSS
+  blocks:
+    - id: css_btns_row
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: css_tailwind_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Shadow
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: css_tailwind_start
+                type: SetState
+                params:
+                  css_tailwind_tour_open: true
+        - id: css_rounded_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Rounded
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: css_rounded_start
+                type: SetState
+                params:
+                  css_rounded_tour_open: true
+        - id: css_inline_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Inline Style
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: css_inline_start
+                type: SetState
+                params:
+                  css_inline_tour_open: true
+        - id: css_dark_tour_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Dark Background
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: css_dark_tour_start
+                type: SetState
+                params:
+                  css_dark_tour_open: true
+    - id: css_tailwind_tour
+      type: Tour
+      class: shadow-2xl
+      properties:
+        open:
+          _state: css_tailwind_tour_open
+        steps:
+          - title: Tailwind Shadow
+            description: Tailwind utility classes can be applied via the class property.
+      events:
+        onClose:
+          - id: css_tailwind_tour_close
+            type: SetState
+            params:
+              css_tailwind_tour_open: false
+        onFinish:
+          - id: css_tailwind_tour_finish
+            type: SetState
+            params:
+              css_tailwind_tour_open: false
+    - id: css_rounded_tour
+      type: Tour
+      class: rounded-2xl
+      properties:
+        open:
+          _state: css_rounded_tour_open
+        steps:
+          - title: Tailwind Rounded
+            description: Additional border radius applied via Tailwind class.
+      events:
+        onClose:
+          - id: css_rounded_tour_close
+            type: SetState
+            params:
+              css_rounded_tour_open: false
+        onFinish:
+          - id: css_rounded_tour_finish
+            type: SetState
+            params:
+              css_rounded_tour_open: false
+    - id: css_inline_tour
+      type: Tour
+      properties:
+        open:
+          _state: css_inline_tour_open
+        steps:
+          - title: Inline Style
+            description: The element style key controls the tour card appearance.
+      style:
+        .element:
+          maxWidth: 320px
+      events:
+        onClose:
+          - id: css_inline_tour_close
+            type: SetState
+            params:
+              css_inline_tour_open: false
+        onFinish:
+          - id: css_inline_tour_finish
+            type: SetState
+            params:
+              css_inline_tour_open: false
+    - id: css_dark_bg
+      type: Box
+      class: bg-gradient-to-r from-slate-900 to-slate-700 p-4 rounded-lg
+      layout:
+        gap: 8
+      blocks:
+        - id: css_dark_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Target on Dark Background
+            ghost: true
+            color: primary
+            variant: outlined
+    - id: css_dark_tour
+      type: Tour
+      properties:
+        open:
+          _state: css_dark_tour_open
+        steps:
+          - title: Dark Background Context
+            description: Tour cards remain visible against dark page backgrounds.
+            target: css_dark_btn
+      events:
+        onClose:
+          - id: css_dark_tour_close
+            type: SetState
+            params:
+              css_dark_tour_open: false
+        onFinish:
+          - id: css_dark_tour_finish
+            type: SetState
+            params:
+              css_dark_tour_open: false
+
+- title: Theme Token Overrides
+  blocks:
+    - id: theme_btns_row
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: theme_purple_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Purple Primary
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: theme_purple_start
+                type: SetState
+                params:
+                  theme_purple_tour_open: true
+        - id: theme_rounded_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Rounded Card
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: theme_rounded_start
+                type: SetState
+                params:
+                  theme_rounded_tour_open: true
+        - id: theme_large_font_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Large Text
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: theme_large_font_start
+                type: SetState
+                params:
+                  theme_large_font_tour_open: true
+        - id: theme_combined_start_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Combined
+            color: primary
+            variant: outlined
+            size: small
+          events:
+            onClick:
+              - id: theme_combined_start
+                type: SetState
+                params:
+                  theme_combined_tour_open: true
+    - id: theme_purple_tour
+      type: Tour
+      properties:
+        open:
+          _state: theme_purple_tour_open
+        type: primary
+        theme:
+          colorPrimary: '#722ed1'
+        steps:
+          - title: Purple Primary
+            description: Custom purple colorPrimary changes background and button colors.
+          - title: Brand Alignment
+            description: Theme tokens align the tour with your brand palette.
+      events:
+        onClose:
+          - id: theme_purple_tour_close
+            type: SetState
+            params:
+              theme_purple_tour_open: false
+        onFinish:
+          - id: theme_purple_tour_finish
+            type: SetState
+            params:
+              theme_purple_tour_open: false
+    - id: theme_rounded_tour
+      type: Tour
+      properties:
+        open:
+          _state: theme_rounded_tour_open
+        theme:
+          borderRadiusLG: 20
+          padding: 24
+        steps:
+          - title: Rounded Card
+            description: Increased border radius (20px) and padding (24px) for a softer look.
+      events:
+        onClose:
+          - id: theme_rounded_tour_close
+            type: SetState
+            params:
+              theme_rounded_tour_open: false
+        onFinish:
+          - id: theme_rounded_tour_finish
+            type: SetState
+            params:
+              theme_rounded_tour_open: false
+    - id: theme_large_font_tour
+      type: Tour
+      properties:
+        open:
+          _state: theme_large_font_tour_open
+        theme:
+          fontSize: 16
+          fontSizeLG: 20
+        steps:
+          - title: Large Text
+            description: Increased font sizes improve readability and accessibility.
+      events:
+        onClose:
+          - id: theme_large_font_tour_close
+            type: SetState
+            params:
+              theme_large_font_tour_open: false
+        onFinish:
+          - id: theme_large_font_tour_finish
+            type: SetState
+            params:
+              theme_large_font_tour_open: false
+    - id: theme_combined_tour
+      type: Tour
+      properties:
+        open:
+          _state: theme_combined_tour_open
+        type: primary
+        theme:
+          colorPrimary: '#fa541c'
+          borderRadiusLG: 12
+          primaryPrevBtnBg: rgba(255, 255, 255, 0.35)
+          arrowOffsetHorizontal: 16
+        steps:
+          - title: Combined Tokens
+            description: Multiple tokens create a cohesive warm-themed tour.
+          - title: Previous Button
+            description: The primaryPrevBtnBg token makes the Previous button more visible.
+      events:
+        onClose:
+          - id: theme_combined_tour_close
+            type: SetState
+            params:
+              theme_combined_tour_open: false
+        onFinish:
+          - id: theme_combined_tour_finish
+            type: SetState
+            params:
+              theme_combined_tour_open: false
+
+- title: Tour in Onboarding Flow
+  fullWidth: true
+  blocks:
+    - id: onboard_card
+      type: Card
+      properties:
+        title: My Application
+        size: small
+      blocks:
+        - id: onboard_header_row
+          type: Box
+          layout:
+            gap: 16
+            align: center
+          blocks:
+            - id: onboard_search
+              type: TextInput
+              layout:
+                flex: 1 1 auto
+              properties:
+                label:
+                  disabled: true
+                placeholder: Search anything...
+            - id: onboard_create_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Create New
+                color: primary
+                variant: solid
+                icon: AiOutlinePlus
+            - id: onboard_profile_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Profile
+                color: default
+                variant: text
+                icon: AiOutlineUser
+            - id: onboard_settings_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Settings
+                color: default
+                variant: text
+                icon: AiOutlineSetting
+        - id: onboard_content
+          type: Markdown
+          properties:
+            content: |
+              Welcome to the application. Click the button below to take a guided tour of the interface.
+        - id: onboard_start_row
+          type: Box
+          layout:
+            gap: 8
+            justify: flex-end
+          blocks:
+            - id: onboard_start_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Take the Tour
+                color: primary
+                variant: solid
+                icon: AiOutlineQuestionCircle
+              events:
+                onClick:
+                  - id: onboard_start_tour
+                    type: SetState
+                    params:
+                      show_onboard_tour: true
+    - id: onboard_tour
+      type: Tour
+      properties:
+        open:
+          _state: show_onboard_tour
+        type: default
+        mask: true
+        animated: true
+        steps:
+          - title: Welcome
+            description: Let us take a quick tour to get you started.
+            cover: https://gw.alipayobjects.com/zos/bmw-prod/e9a9b1e8-5e62-4e12-a3b7-e3695b0a5f3c.png
+          - title: Search
+            description: Use the search bar to quickly find documents, users, or settings.
+            target: onboard_search
+            placement: bottom
+          - title: Create Content
+            description: Click here to create a new document, project, or workspace item.
+            target: onboard_create_btn
+            placement: bottom
+          - title: Your Profile
+            description: Access your profile to update personal information and preferences.
+            target: onboard_profile_btn
+            placement: bottomRight
+          - title: Settings
+            description: Configure application settings, integrations, and notifications.
+            target: onboard_settings_btn
+            placement: bottomRight
+      events:
+        onClose:
+          - id: onboard_close
+            type: SetState
+            params:
+              show_onboard_tour: false
+        onFinish:
+          - id: onboard_finish_state
+            type: SetState
+            params:
+              show_onboard_tour: false
+          - id: onboard_finish_msg
+            type: DisplayMessage
+            params:
+              content: Tour complete! You are ready to get started.
+              status: success
+
+- title: Tour in Feature Introduction
+  fullWidth: true
+  blocks:
+    - id: feature_card
+      type: Card
+      properties:
+        title: Document Editor
+        size: small
+      blocks:
+        - id: feature_toolbar
+          type: Box
+          layout:
+            gap: 8
+            align: center
+          blocks:
+            - id: feature_bold_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: '<b>B</b>'
+                color: default
+                variant: outlined
+                size: small
+            - id: feature_italic_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: '<i>I</i>'
+                color: default
+                variant: outlined
+                size: small
+            - id: feature_save_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Save
+                color: primary
+                variant: solid
+                size: small
+                icon: AiOutlineSave
+            - id: feature_export_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Export
+                color: default
+                variant: outlined
+                size: small
+                icon: AiOutlineExport
+        - id: feature_editor
+          type: TextArea
+          properties:
+            label:
+              disabled: true
+            placeholder: Start typing your document here...
+            rows: 4
+        - id: feature_actions
+          type: Box
+          layout:
+            gap: 8
+            justify: flex-end
+          blocks:
+            - id: feature_tour_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Learn Editor Features
+                color: primary
+                variant: outlined
+                icon: AiOutlineBulb
+              events:
+                onClick:
+                  - id: feature_start_tour
+                    type: SetState
+                    params:
+                      show_feature_tour: true
+    - id: feature_tour
+      type: Tour
+      properties:
+        open:
+          _state: show_feature_tour
+        type: primary
+        mask: true
+        animated: true
+        closable: true
+        steps:
+          - title: Formatting Tools
+            description: Use Bold and Italic buttons to format your text.
+            target: feature_bold_btn
+            placement: bottom
+            type: default
+          - title: Save Your Work
+            description: Click Save to store your document. Your work is automatically backed up every 5 minutes.
+            target: feature_save_btn
+            placement: bottom
+            type: primary
+          - title: Export Options
+            description: Export your document as PDF, Word, or plain text for sharing.
+            target: feature_export_btn
+            placement: bottom
+            type: default
+      events:
+        onClose:
+          - id: feature_close
+            type: SetState
+            params:
+              show_feature_tour: false
+        onFinish:
+          - id: feature_finish_state
+            type: SetState
+            params:
+              show_feature_tour: false
+          - id: feature_finish_msg
+            type: DisplayMessage
+            params:
+              content: You are now familiar with the editor features!
+              status: success