@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/container-blocks/splitter.md

@@ -0,0 +1,1735 @@
+# Splitter
+
+Resizable split panels with configurable sizes and collapsible.
+
+Left Panel
+
+Right Panel
+
+```yaml
+- id: basic_h
+  type: Splitter
+  style:
+    height: 200px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: left
+        defaultSize: 50
+      - key: right
+        defaultSize: 50
+  slots:
+    left:
+      blocks:
+        - id: basic_h_left
+          type: Box
+          class: bg-bg-layout h-full flex items-center justify-center
+          blocks:
+            - id: basic_h_left_text
+              type: Paragraph
+              properties:
+                content: Left Panel
+    right:
+      blocks:
+        - id: basic_h_right
+          type: Box
+          class: bg-bg-layout h-full flex items-center justify-center
+          blocks:
+            - id: basic_h_right_text
+              type: Paragraph
+              properties:
+                content: Right Panel
+```
+
+Top Panel
+
+Bottom Panel
+
+```yaml
+- id: basic_v
+  type: Splitter
+  style:
+    height: 300px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: vertical
+    panels:
+      - key: top
+        defaultSize: 50
+      - key: bottom
+        defaultSize: 50
+  slots:
+    top:
+      blocks:
+        - id: basic_v_top
+          type: Box
+          class: bg-bg-layout h-full flex items-center justify-center
+          blocks:
+            - id: basic_v_top_text
+              type: Paragraph
+              properties:
+                content: Top Panel
+    bottom:
+      blocks:
+        - id: basic_v_bottom
+          type: Box
+          class: bg-bg-layout h-full flex items-center justify-center
+          blocks:
+            - id: basic_v_bottom_text
+              type: Paragraph
+              properties:
+                content: Bottom Panel
+```
+
+25%
+
+50%
+
+25%
+
+Fixed 200px
+
+Flexible remainder
+
+```yaml
+- id: three_h
+  type: Splitter
+  style:
+    height: 200px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: first
+        defaultSize: 25
+      - key: second
+        defaultSize: 50
+      - key: third
+        defaultSize: 25
+  slots:
+    first:
+      blocks:
+        - id: three_h_first
+          type: Box
+          class: bg-bg-layout h-full flex items-center justify-center
+          blocks:
+            - id: three_h_first_text
+              type: Paragraph
+              properties:
+                content: 25%
+    second:
+      blocks:
+        - id: three_h_second
+          type: Box
+          class: bg-bg-layout h-full flex items-center justify-center
+          blocks:
+            - id: three_h_second_text
+              type: Paragraph
+              properties:
+                content: 50%
+    third:
+      blocks:
+        - id: three_h_third
+          type: Box
+          class: bg-bg-layout h-full flex items-center justify-center
+          blocks:
+            - id: three_h_third_text
+              type: Paragraph
+              properties:
+                content: 25%
+- id: pixel_sizes
+  type: Splitter
+  style:
+    height: 180px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: px_fixed
+        defaultSize: 200px
+      - key: px_flex
+  slots:
+    px_fixed:
+      blocks:
+        - id: pixel_sizes_fixed
+          type: Box
+          class: bg-bg-layout h-full flex items-center justify-center
+          blocks:
+            - id: pixel_sizes_fixed_text
+              type: Paragraph
+              properties:
+                content: Fixed 200px
+    px_flex:
+      blocks:
+        - id: pixel_sizes_flex
+          type: Box
+          class: bg-bg-layout h-full flex items-center justify-center
+          blocks:
+            - id: pixel_sizes_flex_text
+              type: Paragraph
+              properties:
+                content: Flexible remainder
+```
+
+<b>Navigation</b>
+
+Min: 20% / Max: 40%
+
+<b>Main Content</b>
+
+The left panel cannot be resized smaller than 20% or larger than 40%.
+
+Min: 100px / Max: 400px
+
+Flexible Center
+
+Min: 100px / Max: 300px
+
+```yaml
+- id: constrained
+  type: Splitter
+  style:
+    height: 200px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: nav
+        defaultSize: 30
+        min: 20
+        max: 40
+      - key: main
+        defaultSize: 70
+  slots:
+    nav:
+      blocks:
+        - id: constrained_nav
+          type: Box
+          class: bg-bg-layout h-full p-4
+          blocks:
+            - id: constrained_nav_title
+              type: Paragraph
+              properties:
+                content: <b>Navigation</b>
+            - id: constrained_nav_desc
+              type: Paragraph
+              properties:
+                content: "Min: 20% / Max: 40%"
+    main:
+      blocks:
+        - id: constrained_main
+          type: Box
+          class: bg-bg-layout h-full p-4
+          blocks:
+            - id: constrained_main_title
+              type: Paragraph
+              properties:
+                content: <b>Main Content</b>
+            - id: constrained_main_desc
+              type: Paragraph
+              properties:
+                content: The left panel cannot be resized smaller than 20% or larger than 40%.
+- id: constrained_px
+  type: Splitter
+  style:
+    height: 200px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: cpx_left
+        defaultSize: 30
+        min: 100px
+        max: 400px
+      - key: cpx_center
+        defaultSize: 40
+      - key: cpx_right
+        defaultSize: 30
+        min: 100px
+        max: 300px
+  slots:
+    cpx_left:
+      blocks:
+        - id: constrained_px_left
+          type: Box
+          class: bg-bg-layout h-full p-4 flex items-center justify-center
+          blocks:
+            - id: constrained_px_left_text
+              type: Paragraph
+              properties:
+                content: "Min: 100px / Max: 400px"
+    cpx_center:
+      blocks:
+        - id: constrained_px_center
+          type: Box
+          class: bg-bg-layout h-full p-4 flex items-center justify-center
+          blocks:
+            - id: constrained_px_center_text
+              type: Paragraph
+              properties:
+                content: Flexible Center
+    cpx_right:
+      blocks:
+        - id: constrained_px_right
+          type: Box
+          class: bg-bg-layout h-full p-4 flex items-center justify-center
+          blocks:
+            - id: constrained_px_right_text
+              type: Paragraph
+              properties:
+                content: "Min: 100px / Max: 300px"
+```
+
+<b>Collapsible Sidebar</b>
+
+Click the arrow on the divider to collapse this panel.
+
+Main body content remains visible when the sidebar is collapsed.
+
+Left (collapsible)
+
+Center (fixed)
+
+Right (collapsible)
+
+```yaml
+- id: collapsible_simple
+  type: Splitter
+  style:
+    height: 200px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: col_sidebar
+        defaultSize: 30
+        collapsible: true
+      - key: col_body
+        defaultSize: 70
+  slots:
+    col_sidebar:
+      blocks:
+        - id: collapsible_simple_sidebar
+          type: Box
+          class: bg-bg-layout h-full p-4
+          blocks:
+            - id: collapsible_simple_sidebar_text
+              type: Paragraph
+              properties:
+                content: <b>Collapsible Sidebar</b>
+            - id: collapsible_simple_sidebar_desc
+              type: Paragraph
+              properties:
+                content: Click the arrow on the divider to collapse this panel.
+    col_body:
+      blocks:
+        - id: collapsible_simple_body
+          type: Box
+          class: bg-bg-container h-full p-4
+          blocks:
+            - id: collapsible_simple_body_text
+              type: Paragraph
+              properties:
+                content: Main body content remains visible when the sidebar is collapsed.
+- id: collapsible_both
+  type: Splitter
+  style:
+    height: 200px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: cb_left
+        defaultSize: 25
+        collapsible: true
+      - key: cb_center
+        defaultSize: 50
+      - key: cb_right
+        defaultSize: 25
+        collapsible: true
+  slots:
+    cb_left:
+      blocks:
+        - id: collapsible_both_left
+          type: Box
+          class: bg-bg-layout h-full p-3 flex items-center justify-center
+          blocks:
+            - id: collapsible_both_left_text
+              type: Paragraph
+              properties:
+                content: Left (collapsible)
+    cb_center:
+      blocks:
+        - id: collapsible_both_center
+          type: Box
+          class: bg-bg-layout h-full p-3 flex items-center justify-center
+          blocks:
+            - id: collapsible_both_center_text
+              type: Paragraph
+              properties:
+                content: Center (fixed)
+    cb_right:
+      blocks:
+        - id: collapsible_both_right
+          type: Box
+          class: bg-bg-layout h-full p-3 flex items-center justify-center
+          blocks:
+            - id: collapsible_both_right_text
+              type: Paragraph
+              properties:
+                content: Right (collapsible)
+```
+
+Collapse left only
+
+Collapse both directions
+
+Collapse right only
+
+```yaml
+- id: col_start_end
+  type: Splitter
+  style:
+    height: 200px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: cse_left
+        defaultSize: 30
+        collapsible:
+          start: true
+          end: false
+      - key: cse_center
+        defaultSize: 40
+        collapsible:
+          start: true
+          end: true
+      - key: cse_right
+        defaultSize: 30
+        collapsible:
+          start: false
+          end: true
+  slots:
+    cse_left:
+      blocks:
+        - id: col_se_left
+          type: Box
+          class: bg-bg-layout h-full p-3 flex items-center justify-center
+          blocks:
+            - id: col_se_left_text
+              type: Paragraph
+              properties:
+                content: Collapse left only
+    cse_center:
+      blocks:
+        - id: col_se_center
+          type: Box
+          class: bg-bg-layout h-full p-3 flex items-center justify-center
+          blocks:
+            - id: col_se_center_text
+              type: Paragraph
+              properties:
+                content: Collapse both directions
+    cse_right:
+      blocks:
+        - id: col_se_right
+          type: Box
+          class: bg-bg-layout h-full p-3 flex items-center justify-center
+          blocks:
+            - id: col_se_right_text
+              type: Paragraph
+              properties:
+                content: Collapse right only
+```
+
+Fixed (resizable: false)
+
+Resizable
+
+Resizable
+
+```yaml
+- id: nonresizable
+  type: Splitter
+  style:
+    height: 200px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: nr_fixed
+        defaultSize: 30
+        resizable: false
+      - key: nr_flex_a
+        defaultSize: 40
+      - key: nr_flex_b
+        defaultSize: 30
+  slots:
+    nr_fixed:
+      blocks:
+        - id: nonresizable_fixed
+          type: Box
+          class: bg-bg-layout h-full p-3 flex items-center justify-center
+          blocks:
+            - id: nonresizable_fixed_text
+              type: Paragraph
+              properties:
+                content: "Fixed (resizable: false)"
+    nr_flex_a:
+      blocks:
+        - id: nonresizable_flex_a
+          type: Box
+          class: bg-bg-layout h-full p-3 flex items-center justify-center
+          blocks:
+            - id: nonresizable_flex_a_text
+              type: Paragraph
+              properties:
+                content: Resizable
+    nr_flex_b:
+      blocks:
+        - id: nonresizable_flex_b
+          type: Box
+          class: bg-bg-layout h-full p-3 flex items-center justify-center
+          blocks:
+            - id: nonresizable_flex_b_text
+              type: Paragraph
+              properties:
+                content: Resizable
+```
+
+Lazy rendering defers content until the panel is visible. Collapse and expand to see the effect.
+
+This panel content is also lazily rendered.
+
+```yaml
+- id: lazy_splitter
+  type: Splitter
+  style:
+    height: 200px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    lazy: true
+    panels:
+      - key: lazy_left
+        defaultSize: 50
+        collapsible: true
+      - key: lazy_right
+        defaultSize: 50
+  slots:
+    lazy_left:
+      blocks:
+        - id: lazy_left_box
+          type: Box
+          class: bg-bg-layout h-full p-4 flex items-center justify-center
+          blocks:
+            - id: lazy_left_text
+              type: Paragraph
+              properties:
+                content: Lazy rendering defers content until the panel is visible. Collapse and
+                  expand to see the effect.
+    lazy_right:
+      blocks:
+        - id: lazy_right_box
+          type: Box
+          class: bg-bg-layout h-full p-4 flex items-center justify-center
+          blocks:
+            - id: lazy_right_text
+              type: Paragraph
+              properties:
+                content: This panel content is also lazily rendered.
+```
+
+<b>Collapsible Panel</b>
+
+Collapse this panel or resize the divider to see event messages.
+
+The onResizeEnd and onCollapse events fire DisplayMessage actions to show the current panel state.
+
+<b>State Tracking</b>
+
+Resize the panels. The onResizeStart fires a message and onResizeEnd saves panel sizes to state.
+
+<b>Current sizes:</b>
+
+```yaml
+- id: event_splitter
+  type: Splitter
+  style:
+    height: 200px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: evt_left
+        defaultSize: 50
+        collapsible: true
+      - key: evt_right
+        defaultSize: 50
+  events:
+    onResizeEnd:
+      - id: event_resize_msg
+        type: DisplayMessage
+        params:
+          content:
+            _string.concat:
+              - "Resize complete. Panel sizes: "
+              - _json.stringify:
+                  on:
+                    _event: sizes
+          duration: 2
+    onCollapse:
+      - id: event_collapse_msg
+        type: DisplayMessage
+        params:
+          content:
+            _if:
+              test:
+                _event: collapsed
+              then: Panel collapsed.
+              else: Panel expanded.
+          duration: 2
+  slots:
+    evt_left:
+      blocks:
+        - id: event_left_box
+          type: Box
+          class: bg-bg-layout h-full p-4
+          blocks:
+            - id: event_left_title
+              type: Paragraph
+              properties:
+                content: <b>Collapsible Panel</b>
+            - id: event_left_desc
+              type: Paragraph
+              properties:
+                content: Collapse this panel or resize the divider to see event messages.
+    evt_right:
+      blocks:
+        - id: event_right_box
+          type: Box
+          class: bg-bg-container h-full p-4
+          blocks:
+            - id: event_right_desc
+              type: Paragraph
+              properties:
+                content: The onResizeEnd and onCollapse events fire DisplayMessage actions to
+                  show the current panel state.
+- id: event_state_splitter
+  type: Splitter
+  style:
+    height: 220px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: es_left
+        defaultSize: 40
+      - key: es_right
+        defaultSize: 60
+  events:
+    onResizeEnd:
+      - id: event_set_state
+        type: SetState
+        params:
+          splitter_sizes:
+            _event: sizes
+    onResizeStart:
+      - id: event_resize_start_msg
+        type: DisplayMessage
+        params:
+          content: Resizing started...
+          duration: 1
+  slots:
+    es_left:
+      blocks:
+        - id: es_left_box
+          type: Box
+          class: bg-bg-layout h-full p-4
+          blocks:
+            - id: es_left_title
+              type: Paragraph
+              properties:
+                content: <b>State Tracking</b>
+            - id: es_left_desc
+              type: Paragraph
+              properties:
+                content: Resize the panels. The onResizeStart fires a message and onResizeEnd
+                  saves panel sizes to state.
+    es_right:
+      blocks:
+        - id: es_right_box
+          type: Box
+          class: bg-bg-container h-full p-4
+          blocks:
+            - id: es_right_title
+              type: Paragraph
+              properties:
+                content: <b>Current sizes:</b>
+            - id: es_right_sizes
+              type: Paragraph
+              properties:
+                content:
+                  _if:
+                    test:
+                      _not:
+                        _not:
+                          _state: splitter_sizes
+                    then:
+                      _json.stringify:
+                        on:
+                          _state: splitter_sizes
+                    else: Resize panels to see sizes here.
+```
+
+<b>Sidebar</b>
+
+Dashboard
+
+Analytics
+
+Settings
+
+<b>Main Content Area</b>
+
+A horizontal splitter with a nested vertical splitter. The sidebar splits horizontally, while the main area is split vertically into content and a bottom panel.
+
+<b>Bottom Panel</b>
+
+Collapsible bottom panel inside the nested vertical splitter.
+
+```yaml
+- id: nested_outer
+  type: Splitter
+  style:
+    height: 350px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: n_sidebar
+        defaultSize: 25
+        min: 15
+        collapsible: true
+      - key: n_main
+        defaultSize: 75
+  slots:
+    n_sidebar:
+      blocks:
+        - id: nested_sidebar
+          type: Box
+          class: bg-bg-layout h-full p-4
+          blocks:
+            - id: nested_sidebar_title
+              type: Paragraph
+              properties:
+                content: <b>Sidebar</b>
+            - id: nested_sidebar_item_1
+              type: Paragraph
+              properties:
+                content: Dashboard
+            - id: nested_sidebar_item_2
+              type: Paragraph
+              properties:
+                content: Analytics
+            - id: nested_sidebar_item_3
+              type: Paragraph
+              properties:
+                content: Settings
+    n_main:
+      blocks:
+        - id: nested_inner
+          type: Splitter
+          style:
+            height: 100%
+          properties:
+            layout: vertical
+            panels:
+              - key: n_content
+                defaultSize: 70
+              - key: n_footer
+                defaultSize: 30
+                min: 15
+                collapsible: true
+          slots:
+            n_content:
+              blocks:
+                - id: nested_content
+                  type: Box
+                  class: bg-bg-container h-full p-4
+                  blocks:
+                    - id: nested_content_title
+                      type: Paragraph
+                      properties:
+                        content: <b>Main Content Area</b>
+                    - id: nested_content_desc
+                      type: Paragraph
+                      properties:
+                        content: A horizontal splitter with a nested vertical splitter. The sidebar
+                          splits horizontally, while the main area is split
+                          vertically into content and a bottom panel.
+            n_footer:
+              blocks:
+                - id: nested_footer
+                  type: Box
+                  class: bg-bg-layout h-full p-4
+                  blocks:
+                    - id: nested_footer_title
+                      type: Paragraph
+                      properties:
+                        content: <b>Bottom Panel</b>
+                    - id: nested_footer_desc
+                      type: Paragraph
+                      properties:
+                        content: Collapsible bottom panel inside the nested vertical splitter.
+```
+
+splitBarSize: 4, splitTriggerSize: 24
+
+Thicker blue splitter bar with larger trigger area
+
+Green themed divider, arrows, and resize dots
+
+colorFill, colorPrimary, colorText overridden
+
+Minimal divider with no visible trigger handle
+
+resizeSpinnerSize: 0, splitTriggerSize: 0
+
+Custom drag handle with blue tones
+
+splitBarDraggableSize: 40, borderRadius: 12
+
+```yaml
+- id: theme_thick_bar
+  type: Splitter
+  style:
+    height: 200px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: ttb_left
+        defaultSize: 50
+      - key: ttb_right
+        defaultSize: 50
+    theme:
+      splitBarSize: 4
+      splitTriggerSize: 24
+      colorFill: "#1677ff"
+  slots:
+    ttb_left:
+      blocks:
+        - id: theme_thick_left
+          type: Box
+          class: bg-bg-layout h-full p-4 flex items-center justify-center
+          blocks:
+            - id: theme_thick_left_text
+              type: Paragraph
+              properties:
+                content: "splitBarSize: 4, splitTriggerSize: 24"
+    ttb_right:
+      blocks:
+        - id: theme_thick_right
+          type: Box
+          class: bg-bg-layout h-full p-4 flex items-center justify-center
+          blocks:
+            - id: theme_thick_right_text
+              type: Paragraph
+              properties:
+                content: Thicker blue splitter bar with larger trigger area
+- id: theme_green
+  type: Splitter
+  style:
+    height: 200px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: tg_left
+        defaultSize: 50
+        collapsible: true
+      - key: tg_right
+        defaultSize: 50
+    theme:
+      splitBarSize: 3
+      colorFill: "#52c41a"
+      colorPrimary: "#52c41a"
+      colorText: "#52c41a"
+      splitTriggerSize: 20
+  slots:
+    tg_left:
+      blocks:
+        - id: theme_green_left
+          type: Box
+          class: bg-bg-layout h-full p-4 flex items-center justify-center
+          blocks:
+            - id: theme_green_left_text
+              type: Paragraph
+              properties:
+                content: Green themed divider, arrows, and resize dots
+    tg_right:
+      blocks:
+        - id: theme_green_right
+          type: Box
+          class: bg-bg-layout h-full p-4 flex items-center justify-center
+          blocks:
+            - id: theme_green_right_text
+              type: Paragraph
+              properties:
+                content: colorFill, colorPrimary, colorText overridden
+- id: theme_minimal
+  type: Splitter
+  style:
+    height: 200px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: tm_left
+        defaultSize: 50
+      - key: tm_right
+        defaultSize: 50
+    theme:
+      splitBarSize: 1
+      splitTriggerSize: 0
+      resizeSpinnerSize: 0
+  slots:
+    tm_left:
+      blocks:
+        - id: theme_minimal_left
+          type: Box
+          class: bg-bg-layout h-full p-4 flex items-center justify-center
+          blocks:
+            - id: theme_minimal_left_text
+              type: Paragraph
+              properties:
+                content: Minimal divider with no visible trigger handle
+    tm_right:
+      blocks:
+        - id: theme_minimal_right
+          type: Box
+          class: bg-bg-layout h-full p-4 flex items-center justify-center
+          blocks:
+            - id: theme_minimal_right_text
+              type: Paragraph
+              properties:
+                content: "resizeSpinnerSize: 0, splitTriggerSize: 0"
+- id: theme_custom_handle
+  type: Splitter
+  style:
+    height: 200px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: tch_left
+        defaultSize: 50
+      - key: tch_right
+        defaultSize: 50
+    theme:
+      splitBarDraggableSize: 40
+      colorFillTertiary: "#e6f4ff"
+      colorFillSecondary: "#91caff"
+      borderRadius: 12
+  slots:
+    tch_left:
+      blocks:
+        - id: theme_handle_left
+          type: Box
+          class: bg-bg-layout h-full p-4 flex items-center justify-center
+          blocks:
+            - id: theme_handle_left_text
+              type: Paragraph
+              properties:
+                content: Custom drag handle with blue tones
+    tch_right:
+      blocks:
+        - id: theme_handle_right
+          type: Box
+          class: bg-bg-layout h-full p-4 flex items-center justify-center
+          blocks:
+            - id: theme_handle_right_text
+              type: Paragraph
+              properties:
+                content: "splitBarDraggableSize: 40, borderRadius: 12"
+```
+
+The element CSS key applies Tailwind classes to the outer Splitter wrapper.
+
+class.element: rounded-2xl shadow-lg overflow-hidden
+
+Dashed blue border via Tailwind
+
+class.element: border-2 border-dashed border-blue-300 rounded-xl
+
+```yaml
+- id: css_rounded
+  type: Splitter
+  class:
+    element: rounded-2xl shadow-lg overflow-hidden
+  style:
+    height: 200px
+  properties:
+    layout: horizontal
+    panels:
+      - key: css_r_left
+        defaultSize: 50
+      - key: css_r_right
+        defaultSize: 50
+  slots:
+    css_r_left:
+      blocks:
+        - id: css_rounded_left
+          type: Box
+          class: bg-gradient-to-br from-primary/10 to-primary/10 h-full p-4 flex
+            items-center justify-center
+          blocks:
+            - id: css_rounded_left_text
+              type: Paragraph
+              properties:
+                content: The element CSS key applies Tailwind classes to the outer Splitter
+                  wrapper.
+    css_r_right:
+      blocks:
+        - id: css_rounded_right
+          type: Box
+          class: bg-gradient-to-br from-primary/15 to-primary/10 h-full p-4 flex
+            items-center justify-center
+          blocks:
+            - id: css_rounded_right_text
+              type: Paragraph
+              properties:
+                content: "class.element: rounded-2xl shadow-lg overflow-hidden"
+- id: css_border
+  type: Splitter
+  class:
+    element: border-2 border-dashed border-blue-300 rounded-xl
+  style:
+    height: 180px
+  properties:
+    layout: horizontal
+    panels:
+      - key: css_b_left
+        defaultSize: 40
+      - key: css_b_right
+        defaultSize: 60
+  slots:
+    css_b_left:
+      blocks:
+        - id: css_border_left
+          type: Box
+          class: bg-bg-layout h-full p-4 flex items-center justify-center
+          blocks:
+            - id: css_border_left_text
+              type: Paragraph
+              properties:
+                content: Dashed blue border via Tailwind
+    css_b_right:
+      blocks:
+        - id: css_border_right
+          type: Box
+          class: bg-bg-container h-full p-4 flex items-center justify-center
+          blocks:
+            - id: css_border_right_text
+              type: Paragraph
+              properties:
+                content: "class.element: border-2 border-dashed border-blue-300 rounded-xl"
+```
+
+Explorer
+
+src/
+
+index.js
+
+App.js
+
+styles.css
+
+package.json
+
+App.js
+
+<span style="color:#c084fc">import</span> React <span style="color:#c084fc">from</span> <span style="color:#a5d6ff">"react"</span>;<br><br><span style="color:#c084fc">function</span> <span style="color:#67e8f9">App</span>() {<br>&nbsp;&nbsp;<span style="color:#c084fc">return</span> (<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;<span style="color:#67e8f9">div</span> <span style="color:#79c0ff">className</span>=<span style="color:#a5d6ff">"app"</span>&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<span style="color:#67e8f9">h1</span>&gt;Hello World&lt;/<span style="color:#67e8f9">h1</span>&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/<span style="color:#67e8f9">div</span>&gt;<br>&nbsp;&nbsp;);<br>}
+
+Terminal
+
+$ npm start
+
+Compiled successfully!
+
+```yaml
+- id: editor_outer
+  type: Splitter
+  style:
+    height: 420px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: editor_files
+        defaultSize: 18
+        min: 12
+        collapsible: true
+      - key: editor_main
+        defaultSize: 82
+  events:
+    onCollapse:
+      - id: editor_collapse_msg
+        type: DisplayMessage
+        params:
+          content:
+            _if:
+              test:
+                _event: collapsed
+              then: File explorer collapsed.
+              else: File explorer expanded.
+          duration: 2
+  slots:
+    editor_files:
+      blocks:
+        - id: editor_files_box
+          type: Box
+          class: bg-bg-layout h-full p-3
+          blocks:
+            - id: editor_files_title
+              type: Paragraph
+              style:
+                color: "#9ca3af"
+                fontSize: 11px
+                textTransform: uppercase
+                letterSpacing: 1px
+              properties:
+                content: Explorer
+            - id: editor_files_f1
+              type: Paragraph
+              style:
+                color: "#e2e8f0"
+                fontSize: 13px
+              properties:
+                content: src/
+            - id: editor_files_f2
+              type: Paragraph
+              style:
+                color: "#94a3b8"
+                fontSize: 13px
+                paddingLeft: 12px
+              properties:
+                content: index.js
+            - id: editor_files_f3
+              type: Paragraph
+              style:
+                color: "#94a3b8"
+                fontSize: 13px
+                paddingLeft: 12px
+              properties:
+                content: App.js
+            - id: editor_files_f4
+              type: Paragraph
+              style:
+                color: "#94a3b8"
+                fontSize: 13px
+                paddingLeft: 12px
+              properties:
+                content: styles.css
+            - id: editor_files_f5
+              type: Paragraph
+              style:
+                color: "#e2e8f0"
+                fontSize: 13px
+              properties:
+                content: package.json
+    editor_main:
+      blocks:
+        - id: editor_inner
+          type: Splitter
+          style:
+            height: 100%
+          properties:
+            layout: vertical
+            panels:
+              - key: editor_code
+                defaultSize: 65
+              - key: editor_terminal
+                defaultSize: 35
+                min: 15
+                collapsible: true
+          slots:
+            editor_code:
+              blocks:
+                - id: editor_code_box
+                  type: Box
+                  class: bg-bg-layout h-full p-4
+                  blocks:
+                    - id: editor_code_tab
+                      type: Paragraph
+                      style:
+                        color: "#64748b"
+                        fontSize: 12px
+                        borderBottom: 1px solid
+                        paddingBottom: 8px
+                      properties:
+                        content: App.js
+                    - id: editor_code_content
+                      type: Paragraph
+                      style:
+                        color: "#e2e8f0"
+                        fontFamily: monospace
+                        fontSize: 13px
+                        lineHeight: 1.6
+                      properties:
+                        content: <span style="color:#c084fc">import</span> React <span
+                          style="color:#c084fc">from</span> <span
+                          style="color:#a5d6ff">"react"</span>;<br><br><span
+                          style="color:#c084fc">function</span> <span
+                          style="color:#67e8f9">App</span>()
+                          {<br>&nbsp;&nbsp;<span
+                          style="color:#c084fc">return</span>
+                          (<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;<span
+                          style="color:#67e8f9">div</span> <span
+                          style="color:#79c0ff">className</span>=<span
+                          style="color:#a5d6ff">"app"</span>&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;<span
+                          style="color:#67e8f9">h1</span>&gt;Hello
+                          World&lt;/<span
+                          style="color:#67e8f9">h1</span>&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/<span
+                          style="color:#67e8f9">div</span>&gt;<br>&nbsp;&nbsp;);<br>}
+            editor_terminal:
+              blocks:
+                - id: editor_terminal_box
+                  type: Box
+                  class: bg-bg-layout h-full p-3
+                  blocks:
+                    - id: editor_terminal_title
+                      type: Paragraph
+                      style:
+                        color: "#64748b"
+                        fontSize: 11px
+                        textTransform: uppercase
+                        letterSpacing: 1px
+                        borderBottom: 1px solid
+                        paddingBottom: 6px
+                      properties:
+                        content: Terminal
+                    - id: editor_terminal_line
+                      type: Paragraph
+                      style:
+                        color: "#22c55e"
+                        fontFamily: monospace
+                        fontSize: 13px
+                      properties:
+                        content: $ npm start
+                    - id: editor_terminal_output
+                      type: Paragraph
+                      style:
+                        color: "#94a3b8"
+                        fontFamily: monospace
+                        fontSize: 13px
+                      properties:
+                        content: Compiled successfully!
+```
+
+Overview
+
+<b>Sarah</b> updated the project plan <i>2 min ago</i>
+
+<b>James</b> added 3 team members <i>15 min ago</i>
+
+<b>System</b> completed deployment <i>1 hour ago</i>
+
+<b>Alex</b> resolved 5 support tickets <i>3 hours ago</i>
+
+```yaml
+- id: dashboard_outer
+  type: Splitter
+  style:
+    height: 400px
+    border: 1px solid
+    borderRadius: 8px
+  properties:
+    layout: horizontal
+    panels:
+      - key: dash_nav
+        defaultSize: 22
+        min: 15
+        max: 35
+        collapsible: true
+      - key: dash_content
+        defaultSize: 50
+      - key: dash_detail
+        defaultSize: 28
+        min: 20
+        collapsible: true
+  events:
+    onResizeEnd:
+      - id: dash_resize_state
+        type: SetState
+        params:
+          dashboard_layout:
+            _event: sizes
+  slots:
+    dash_nav:
+      blocks:
+        - id: dash_nav_box
+          type: Box
+          class: bg-bg-layout h-full p-0
+          blocks:
+            - id: dash_nav_card
+              type: Card
+              properties:
+                title: Navigation
+                size: small
+                bordered: false
+              blocks:
+                - id: dash_nav_item1
+                  type: Button
+                  properties:
+                    title: Overview
+                    icon: AiOutlineDashboard
+                    variant: text
+                    block: true
+                - id: dash_nav_item2
+                  type: Button
+                  properties:
+                    title: Analytics
+                    icon: AiOutlineBarChart
+                    variant: text
+                    block: true
+                - id: dash_nav_item3
+                  type: Button
+                  properties:
+                    title: Users
+                    icon: AiOutlineTeam
+                    variant: text
+                    block: true
+                - id: dash_nav_item4
+                  type: Button
+                  properties:
+                    title: Settings
+                    icon: AiOutlineSetting
+                    variant: text
+                    block: true
+    dash_content:
+      blocks:
+        - id: dash_content_box
+          type: Box
+          class: h-full p-4
+          blocks:
+            - id: dash_content_title
+              type: Title
+              properties:
+                content: Overview
+                level: 4
+            - id: dash_stats_row
+              type: Box
+              layout:
+                gap: 16
+              blocks:
+                - id: dash_stat_users
+                  type: Card
+                  layout:
+                    flex: 1 1 0
+                  properties:
+                    size: small
+                  blocks:
+                    - id: dash_stat_users_val
+                      type: Statistic
+                      properties:
+                        title: Total Users
+                        value: 2846
+                - id: dash_stat_revenue
+                  type: Card
+                  layout:
+                    flex: 1 1 0
+                  properties:
+                    size: small
+                  blocks:
+                    - id: dash_stat_revenue_val
+                      type: Statistic
+                      properties:
+                        title: Revenue
+                        value: 48200
+                        prefix: $
+            - id: dash_progress_card
+              type: Card
+              properties:
+                title: Monthly Target
+                size: small
+              blocks:
+                - id: dash_progress_bar
+                  type: Progress
+                  properties:
+                    percent: 72
+    dash_detail:
+      blocks:
+        - id: dash_detail_box
+          type: Box
+          class: bg-bg-layout h-full p-0
+          blocks:
+            - id: dash_detail_card
+              type: Card
+              properties:
+                title: Recent Activity
+                size: small
+                bordered: false
+              blocks:
+                - id: dash_detail_item1
+                  type: Paragraph
+                  properties:
+                    content: <b>Sarah</b> updated the project plan <i>2 min ago</i>
+                - id: dash_detail_divider1
+                  type: Divider
+                - id: dash_detail_item2
+                  type: Paragraph
+                  properties:
+                    content: <b>James</b> added 3 team members <i>15 min ago</i>
+                - id: dash_detail_divider2
+                  type: Divider
+                - id: dash_detail_item3
+                  type: Paragraph
+                  properties:
+                    content: <b>System</b> completed deployment <i>1 hour ago</i>
+                - id: dash_detail_divider3
+                  type: Divider
+                - id: dash_detail_item4
+                  type: Paragraph
+                  properties:
+                    content: <b>Alex</b> resolved 5 support tickets <i>3 hours ago</i>
+```
+
+Folders
+
+Inbox - 12 messages
+
+Alice Johnson
+
+Q4 Planning Meeting Notes
+
+10:30 AM
+
+Bob Williams
+
+Design review feedback
+
+9:15 AM
+
+Carol Davis
+
+Updated project timeline
+
+Yesterday
+
+Q4 Planning Meeting Notes
+
+Alice Johnson
+
+March 13, 2026 at 10:30 AM
+
+Hi team, here are the key takeaways from our Q4 planning meeting yesterday. We agreed on the following priorities: launching the new dashboard feature, improving API performance by 30%, and completing the migration to the new design system.
+
+Please review the attached document and share any feedback by end of week. Our next sync is scheduled for Monday at 2 PM.
+
+```yaml
+- id: email_outer
+  type: Splitter
+  class:
+    element: rounded-lg shadow-md overflow-hidden
+  style:
+    height: 420px
+  properties:
+    layout: horizontal
+    panels:
+      - key: email_folders
+        defaultSize: 20
+        min: 15
+        collapsible: true
+      - key: email_list
+        defaultSize: 35
+        min: 25
+      - key: email_preview
+        defaultSize: 45
+  events:
+    onCollapse:
+      - id: email_collapse_action
+        type: DisplayMessage
+        params:
+          content:
+            _if:
+              test:
+                _event: collapsed
+              then: Folder panel collapsed. Click the arrow to expand.
+              else: Folder panel expanded.
+          duration: 2
+  slots:
+    email_folders:
+      blocks:
+        - id: email_folders_box
+          type: Box
+          class: bg-bg-layout h-full p-3
+          blocks:
+            - id: email_folders_title
+              type: Paragraph
+              style:
+                fontWeight: 600
+                fontSize: 13px
+                color: "#64748b"
+                textTransform: uppercase
+                letterSpacing: 0.5px
+              properties:
+                content: Folders
+            - id: email_folder_inbox
+              type: Button
+              properties:
+                title: Inbox (12)
+                icon: AiOutlineInbox
+                variant: text
+                block: true
+                size: small
+            - id: email_folder_sent
+              type: Button
+              properties:
+                title: Sent
+                icon: AiOutlineSend
+                variant: text
+                block: true
+                size: small
+            - id: email_folder_drafts
+              type: Button
+              properties:
+                title: Drafts (3)
+                icon: AiOutlineEdit
+                variant: text
+                block: true
+                size: small
+            - id: email_folder_trash
+              type: Button
+              properties:
+                title: Trash
+                icon: AiOutlineDelete
+                variant: text
+                block: true
+                size: small
+    email_list:
+      blocks:
+        - id: email_list_box
+          type: Box
+          class: h-full p-0
+          blocks:
+            - id: email_list_header
+              type: Box
+              class: px-3 py-2 border-b border-border
+              blocks:
+                - id: email_list_search
+                  type: Paragraph
+                  style:
+                    color: "#94a3b8"
+                    fontSize: 13px
+                  properties:
+                    content: Inbox - 12 messages
+            - id: email_msg1
+              type: Box
+              class: px-3 py-2 border-b border-border bg-bg-layout
+              blocks:
+                - id: email_msg1_from
+                  type: Paragraph
+                  style:
+                    fontWeight: 600
+                    fontSize: 13px
+                  properties:
+                    content: Alice Johnson
+                - id: email_msg1_subject
+                  type: Paragraph
+                  style:
+                    fontSize: 13px
+                  properties:
+                    content: Q4 Planning Meeting Notes
+                - id: email_msg1_time
+                  type: Paragraph
+                  style:
+                    fontSize: 11px
+                    color: "#94a3b8"
+                  properties:
+                    content: 10:30 AM
+            - id: email_msg2
+              type: Box
+              class: px-3 py-2 border-b border-border
+              blocks:
+                - id: email_msg2_from
+                  type: Paragraph
+                  style:
+                    fontWeight: 600
+                    fontSize: 13px
+                  properties:
+                    content: Bob Williams
+                - id: email_msg2_subject
+                  type: Paragraph
+                  style:
+                    fontSize: 13px
+                  properties:
+                    content: Design review feedback
+                - id: email_msg2_time
+                  type: Paragraph
+                  style:
+                    fontSize: 11px
+                    color: "#94a3b8"
+                  properties:
+                    content: 9:15 AM
+            - id: email_msg3
+              type: Box
+              class: px-3 py-2 border-b border-border
+              blocks:
+                - id: email_msg3_from
+                  type: Paragraph
+                  style:
+                    fontSize: 13px
+                  properties:
+                    content: Carol Davis
+                - id: email_msg3_subject
+                  type: Paragraph
+                  style:
+                    fontSize: 13px
+                  properties:
+                    content: Updated project timeline
+                - id: email_msg3_time
+                  type: Paragraph
+                  style:
+                    fontSize: 11px
+                    color: "#94a3b8"
+                  properties:
+                    content: Yesterday
+    email_preview:
+      blocks:
+        - id: email_preview_box
+          type: Box
+          class: h-full p-4
+          blocks:
+            - id: email_preview_subject
+              type: Title
+              properties:
+                content: Q4 Planning Meeting Notes
+                level: 4
+            - id: email_preview_meta
+              type: Box
+              layout:
+                gap: 8
+                align: center
+              blocks:
+                - id: email_preview_avatar
+                  type: Avatar
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    icon: AiOutlineUser
+                    size: 32
+                    color: "#fff"
+                    backgroundColor: "#1677ff"
+                - id: email_preview_sender
+                  type: Box
+                  layout:
+                    flex: 1 1 0
+                  blocks:
+                    - id: email_preview_from
+                      type: Paragraph
+                      style:
+                        fontWeight: 600
+                        fontSize: 14px
+                      properties:
+                        content: Alice Johnson
+                    - id: email_preview_date
+                      type: Paragraph
+                      style:
+                        fontSize: 12px
+                        color: "#94a3b8"
+                      properties:
+                        content: March 13, 2026 at 10:30 AM
+            - id: email_preview_divider
+              type: Divider
+            - id: email_preview_body
+              type: Paragraph
+              properties:
+                content: "Hi team, here are the key takeaways from our Q4 planning meeting
+                  yesterday. We agreed on the following priorities: launching
+                  the new dashboard feature, improving API performance by 30%,
+                  and completing the migration to the new design system."
+            - id: email_preview_body2
+              type: Paragraph
+              properties:
+                content: Please review the attached document and share any feedback by end of
+                  week. Our next sync is scheduled for Monday at 2 PM.
+            - id: email_preview_tags
+              type: Box
+              layout:
+                gap: 8
+              blocks:
+                - id: email_preview_tag1
+                  type: Tag
+                  properties:
+                    title: Planning
+                    color: blue
+                - id: email_preview_tag2
+                  type: Tag
+                  properties:
+                    title: Q4
+                    color: purple
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `lazy` | boolean | `false` | Lazy render panel content. |
+| `layout` | string | `"horizontal"` | Layout direction of the splitter. Enum: `horizontal`, `vertical`. |
+| `orientation` | string | - | Layout direction of the splitter. Alias for layout, takes precedence if both are set. Enum: `horizontal`, `vertical`. |
+| `panels` | array | - | Panel configuration array. Each panel has key, size, min, max, defaultSize, collapsible, resizable. |
+| `panels.$.key` | string | - | Unique panel key, used to match content slots. |
+| `panels.$.size` | number \| string | - | Controlled panel size. |
+| `panels.$.min` | number \| string | - | Minimum size threshold. |
+| `panels.$.max` | number \| string | - | Maximum size threshold. |
+| `panels.$.defaultSize` | number \| string | - | Default panel size. |
+| `panels.$.collapsible` | boolean \| object | - | Whether the panel is collapsible. |
+| `panels.$.resizable` | boolean | `true` | Whether the panel is resizable. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design splitter tokens](https://ant.design/components/splitter#design-token). |
+| `theme.splitBarSize` | number | `1` | Thickness of the divider bar between panels in pixels. |
+| `theme.splitTriggerSize` | number | `6` | Size of the interactive trigger area for resizing in pixels. |
+| `theme.splitBarDraggableSize` | number | `20` | Size of the draggable handle area in pixels. |
+| `theme.resizeSpinnerSize` | number | `20` | Size of the resize indicator dots in pixels. |
+| `theme.colorFill` | string | - | Color of the splitter bar. |
+| `theme.colorFillTertiary` | string | - | Background color of the drag trigger area. |
+| `theme.colorFillSecondary` | string | - | Background color of the drag trigger area on hover. |
+| `theme.colorPrimary` | string | - | Color used for the collapse arrows. |
+| `theme.colorText` | string | - | Color of the resize dots indicator. |
+| `theme.colorBgElevated` | string | - | Background color of the drag trigger handle. |
+| `theme.borderRadius` | number | `6` | Border radius of the drag trigger handle. |
+
+| Event | Event Data | Description |
+| --- | --- | --- |
+| `onCollapse` | `{ collapsed, sizes }` | Trigger action when a panel is collapsed or expanded. |
+| `onResize` | `{ sizes }` | Trigger action when panel sizes change during resize. |
+| `onResizeEnd` | `{ sizes }` | Trigger action when resize ends. |
+| `onResizeStart` | `{ sizes }` | Trigger action when resize starts. |
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The Splitter element. |
+
+Slot keys are user-defined in your config and resolved at build time — not generated at runtime. The block typically pairs slots with an array property (`tabs`, `panels`, `slides`) listed in the Properties table; see the examples above for the expected shape.