@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/display-blocks/tour.md

@@ -0,0 +1,2359 @@
+# Tour
+
+Guided tour with steps, masks, and keyboard navigation.
+
+```yaml
+- 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
+```
+
+```yaml
+- 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
+```
+
+```yaml
+- 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
+```
+
+```yaml
+- 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
+```
+
+```yaml
+- 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
+  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
+```
+
+```yaml
+- 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
+```
+
+```yaml
+- 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
+```
+
+```yaml
+- 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
+```
+
+```yaml
+- 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
+```
+
+```yaml
+- 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
+```
+
+```yaml
+- 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
+```
+
+```yaml
+- 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
+```
+
+```yaml
+- 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
+```
+
+```yaml
+- 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
+```
+
+Welcome to the application. Click the button below to take a guided tour of the interface.
+
+```yaml
+- 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
+```
+
+```yaml
+- 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
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `animated` | boolean | `true` | Whether to enable animation. |
+| `arrow` | boolean \| object | `true` | Whether to show the arrow. |
+| `closable` | boolean | `true` | Whether the close button is visible. |
+| `current` | integer | - | Current step index. |
+| `disabledInteraction` | boolean | `false` | Whether to disable interaction with the page while the tour is active. |
+| `gap` | object | - | Gap offset between highlighted area and target element. |
+| `gap.x` | number | - | Horizontal gap offset. |
+| `gap.y` | number | - | Vertical gap offset. |
+| `keyboard` | boolean | `true` | Whether to enable keyboard navigation. |
+| `mask` | boolean \| object | `true` | Whether to enable mask. |
+| `open` | boolean | `false` | Whether to show the tour. |
+| `placement` | string | - | Position of the guide card relative to the target element. |
+| `scrollIntoViewOptions` | boolean | `true` | Whether to scroll the step target element into view. |
+| `steps` | array | - | Tour steps. Each step has title, description, target (blockId string), placement, etc. |
+| `steps.$.arrow` | boolean \| object | - | Whether to show the arrow for this step, or object with pointAtCenter. |
+| `steps.$.closable` | boolean | - | Whether the close button is visible for this step. |
+| `steps.$.cover` | string | - | Cover image URL for the step. |
+| `steps.$.description` | string | - | Description of the step. |
+| `steps.$.mask` | boolean \| object | - | Whether to enable mask for this step, or object with style and color properties. |
+| `steps.$.placement` | string | - | Position of the guide card relative to the target element. |
+| `steps.$.target` | string | - | The blockId of the target element for this step. |
+| `steps.$.title` | string | - | Title of the step. |
+| `steps.$.type` | string | - | Type style for this step, overrides tour-level type. Enum: `default`, `primary`. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design tour tokens](https://ant.design/components/tour#design-token). |
+| `theme.zIndexPopup` | number | `1070` | Z-index of the tour popup. |
+| `theme.closeBtnSize` | number | - | Size of the close button. Calculated from fontSize and lineHeight. |
+| `theme.primaryPrevBtnBg` | string | `"rgba(255, 255, 255, 0.15)"` | Background color of the previous button in primary type tour. |
+| `theme.primaryNextBtnHoverBg` | string | - | Hover background color of the next button in primary type tour. Derived from colorBgTextHover. |
+| `theme.arrowOffsetHorizontal` | number | `12` | Horizontal offset of the arrow. |
+| `theme.arrowOffsetVertical` | number | `8` | Vertical offset of the arrow. |
+| `theme.colorPrimary` | string | - | Primary color override for the tour. |
+| `theme.colorBgContainer` | string | - | Background color of the tour card. |
+| `theme.colorText` | string | - | Text color in the tour card. |
+| `theme.colorTextDescription` | string | - | Description text color in the tour card. |
+| `theme.borderRadiusLG` | number | `8` | Border radius of the tour card. |
+| `theme.fontSize` | number | `14` | Font size for tour content. |
+| `theme.fontSizeLG` | number | `16` | Font size for tour title. |
+| `theme.padding` | number | `16` | Padding of the tour card content. |
+| `type` | string | `"default"` | Type of the tour. Enum: `default`, `primary`. |
+| `zIndex` | integer | - | Z-index of the tour. |
+
+| Event | Event Data | Description |
+| --- | --- | --- |
+| `onChange` | `{ current }` | Triggered when the current step changes. |
+| `onClose` | `{ current }` | Triggered when the tour is closed. |
+| `onFinish` | \- | Triggered when the tour is finished. |
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The Tour element. |
+| `/mask` | The Tour mask. |
+
+No slots defined.