@lowdefy/blocks-antd 5.6.0 → 6.1.0

package/dist/blocks/Splitter/gallery.yaml

@@ -0,0 +1,1511 @@
+# Copyright 2020-2026 Lowdefy, Inc
+
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+
+#     http://www.apache.org/licenses/LICENSE-2.0
+
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+- title: Basic Horizontal Split
+  blocks:
+    - id: basic_h
+      type: Splitter
+      style:
+        height: 200px
+        border: 1px solid #e8e8e8
+        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
+
+- title: Vertical Split
+  blocks:
+    - id: basic_v
+      type: Splitter
+      style:
+        height: 300px
+        border: 1px solid #e8e8e8
+        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
+
+- title: Three Panels with Default Sizes
+  blocks:
+    - id: three_h
+      type: Splitter
+      style:
+        height: 200px
+        border: 1px solid #e8e8e8
+        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 #e8e8e8
+        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
+
+- title: Min and Max Size Constraints
+  blocks:
+    - id: constrained
+      type: Splitter
+      style:
+        height: 200px
+        border: 1px solid #e8e8e8
+        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 #e8e8e8
+        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'
+
+- title: Collapsible Panels
+  blocks:
+    - id: collapsible_simple
+      type: Splitter
+      style:
+        height: 200px
+        border: 1px solid #e8e8e8
+        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 #e8e8e8
+        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)
+
+- title: Collapsible with Start and End
+  blocks:
+    - id: col_start_end
+      type: Splitter
+      style:
+        height: 200px
+        border: 1px solid #e8e8e8
+        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
+
+- title: Non-resizable Panel
+  blocks:
+    - id: nonresizable
+      type: Splitter
+      style:
+        height: 200px
+        border: 1px solid #e8e8e8
+        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
+
+- title: Lazy Panel Rendering
+  blocks:
+    - id: lazy_splitter
+      type: Splitter
+      style:
+        height: 200px
+        border: 1px solid #e8e8e8
+        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.
+
+- title: Event Actions
+  blocks:
+    - id: event_splitter
+      type: Splitter
+      style:
+        height: 200px
+        border: 1px solid #e8e8e8
+        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 #e8e8e8
+        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.
+
+- title: Nested Splitters
+  blocks:
+    - id: nested_outer
+      type: Splitter
+      style:
+        height: 350px
+        border: 1px solid #e8e8e8
+        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.
+
+- title: Theme Token Overrides
+  blocks:
+    - id: theme_thick_bar
+      type: Splitter
+      style:
+        height: 200px
+        border: 1px solid #e8e8e8
+        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 #e8e8e8
+        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 #e8e8e8
+        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 #e8e8e8
+        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'
+
+- title: Styled with Tailwind CSS (element)
+  blocks:
+    - 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'
+
+- title: Code Editor with Preview
+  blocks:
+    - id: editor_outer
+      type: Splitter
+      style:
+        height: 420px
+        border: 1px solid #d9d9d9
+        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 #334155
+                            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 #1e293b
+                            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!'
+
+- title: Dashboard with Sidebar and Detail Panels
+  blocks:
+    - id: dashboard_outer
+      type: Splitter
+      style:
+        height: 400px
+        border: 1px solid #e8e8e8
+        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>'
+
+- title: Email Client Layout
+  blocks:
+    - 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