@lowdefy/docs-content 0.0.0-experimental-20260928120643 → 6.1.0

package/content/container-blocks/layout.md

@@ -87,12 +87,12 @@ Footer
                     type: MenuLink
                     properties:
                       title: Dashboard
-                      icon: Gauge
+                      icon: AiOutlineDashboard
                   - id: layout_sider_nav_2
                     type: MenuLink
                     properties:
                       title: Settings
-                      icon: settings
+                      icon: AiOutlineSetting
         - id: layout_sider_content
           type: Content
           layout:
@@ -155,7 +155,7 @@ Right side panel for supplementary content, filters, or navigation.
             width: 250
             reverseArrow: true
           style:
-            borderLeft: "1px solid #f0f0f0"
+            borderLeft: 1px solid
           blocks:
             - id: layout_right_sider_side_text
               type: Paragraph
@@ -165,11 +165,11 @@ Right side panel for supplementary content, filters, or navigation.
                 content: Right side panel for supplementary content, filters, or navigation.
 ```
 
-The collapse trigger uses the lightTriggerBg and lightTriggerColor tokens.
+Sider with custom background color set via the siderBg token. The trigger bar uses triggerBg and triggerColor tokens.
 
-The Layout theme property accepts antd Layout design tokens like bodyBg, headerHeight, footerBg and the Sider trigger tokens. They apply to the Header, Footer and Sider blocks inside the layout.
+The Layout theme property accepts antd design tokens like headerBg, footerBg, siderBg, bodyBg, triggerBg, triggerColor, and triggerHeight. These cascade to child Header, Footer, Sider, and Content blocks.
 
-Footer styled with the footerBg and footerPadding tokens
+Footer styled with footerBg token
 
 ```yaml
 - id: layout_theme_outer
@@ -178,13 +178,10 @@ Footer styled with the footerBg and footerPadding tokens
     minHeight: 280px
   properties:
     theme:
-      bodyBg: "#f0f5ff"
-      headerHeight: 48
-      headerColor: "#1d39c4"
-      footerBg: "#d6e4ff"
-      footerPadding: 12px 24px
-      lightTriggerBg: "#adc6ff"
-      lightTriggerColor: "#1d39c4"
+      headerBg: "#1d39c4"
+      triggerBg: "#597ef7"
+      triggerColor: "#ffffff"
+      triggerHeight: 48
   blocks:
     - id: layout_theme_header
       type: Header
@@ -194,8 +191,8 @@ Footer styled with the footerBg and footerPadding tokens
         - id: layout_theme_header_text
           type: Html
           properties:
-            html: <span class="text-base font-semibold">48px header from the headerHeight
-              token</span>
+            html: <span class="text-base font-semibold">Custom themed header via Layout
+              design tokens</span>
     - id: layout_theme_inner
       type: Layout
       properties:
@@ -208,16 +205,14 @@ Footer styled with the footerBg and footerPadding tokens
           properties:
             theme: light
             width: 180
-            collapsible: true
-            initialCollapsed: false
           blocks:
             - id: layout_theme_sider_text
               type: Paragraph
               style:
                 padding: 16px
               properties:
-                content: The collapse trigger uses the lightTriggerBg and lightTriggerColor
-                  tokens.
+                content: Sider with custom background color set via the siderBg token. The
+                  trigger bar uses triggerBg and triggerColor tokens.
         - id: layout_theme_content
           type: Content
           layout:
@@ -228,10 +223,10 @@ Footer styled with the footerBg and footerPadding tokens
             - id: layout_theme_content_text
               type: Paragraph
               properties:
-                content: The Layout theme property accepts antd Layout design tokens like
-                  bodyBg, headerHeight, footerBg and the Sider trigger tokens.
-                  They apply to the Header, Footer and Sider blocks inside the
-                  layout.
+                content: The Layout theme property accepts antd design tokens like headerBg,
+                  footerBg, siderBg, bodyBg, triggerBg, triggerColor, and
+                  triggerHeight. These cascade to child Header, Footer, Sider,
+                  and Content blocks.
     - id: layout_theme_footer
       type: Footer
       style:
@@ -240,7 +235,7 @@ Footer styled with the footerBg and footerPadding tokens
         - id: layout_theme_footer_text
           type: Paragraph
           properties:
-            content: Footer styled with the footerBg and footerPadding tokens
+            content: Footer styled with footerBg token
 ```
 
 The Layout block has a single cssKey called "element". Use the class property to apply Tailwind utility classes directly to the Layout wrapper. Here the outer Layout uses rounded corners, shadow, and a border. Child blocks like Header, Content, and Footer can each have their own class applied.
@@ -310,7 +305,7 @@ Acme Corp Admin Panel - Version 3.2.1
           count: 5
         profile:
           avatar:
-            icon: user
+            icon: AiOutlineUser
       style:
         paddingInline: 24px
         borderBottom: 1px solid var(--ant-color-border)
@@ -345,27 +340,27 @@ Acme Corp Admin Panel - Version 3.2.1
                     type: MenuLink
                     properties:
                       title: Dashboard
-                      icon: Gauge
+                      icon: AiOutlineDashboard
                   - id: layout_admin_menu_users
                     type: MenuLink
                     properties:
                       title: Users
-                      icon: users
+                      icon: AiOutlineTeam
                   - id: layout_admin_menu_orders
                     type: MenuLink
                     properties:
                       title: Orders
-                      icon: ShoppingCart
+                      icon: AiOutlineShoppingCart
                   - id: layout_admin_menu_reports
                     type: MenuLink
                     properties:
                       title: Reports
-                      icon: chart
+                      icon: AiOutlineBarChart
                   - id: layout_admin_menu_settings
                     type: MenuLink
                     properties:
                       title: Settings
-                      icon: settings
+                      icon: AiOutlineSetting
         - id: layout_admin_content_area
           type: Content
           layout:
@@ -475,8 +470,7 @@ Welcome to DevDocs. This guide walks you through setting up your first project.
           properties:
             content: DevDocs
             level: 4
-          style:
-            .element:
+            style:
               margin: 0
         - id: layout_docs_version_tag
           type: Tag
@@ -494,7 +488,7 @@ Welcome to DevDocs. This guide walks you through setting up your first project.
           layout:
             flex: 0 0 auto
           properties:
-            icon: search
+            icon: AiOutlineSearch
             title: Search docs...
             color: default
             variant: outlined
@@ -503,7 +497,7 @@ Welcome to DevDocs. This guide walks you through setting up your first project.
           layout:
             flex: 0 0 auto
           properties:
-            icon: GitBranch
+            icon: AiOutlineGithub
             color: default
             variant: text
             hideTitle: true
@@ -521,7 +515,7 @@ Welcome to DevDocs. This guide walks you through setting up your first project.
             width: 260
             breakpoint: md
           style:
-            borderRight: "1px solid #f0f0f0"
+            borderRight: 1px solid
           blocks:
             - id: layout_docs_nav_title
               type: Paragraph
@@ -540,22 +534,22 @@ Welcome to DevDocs. This guide walks you through setting up your first project.
                     type: MenuLink
                     properties:
                       title: Introduction
-                      icon: BookOpen
+                      icon: AiOutlineRead
                   - id: layout_docs_nav_install
                     type: MenuLink
                     properties:
                       title: Installation
-                      icon: download
+                      icon: AiOutlineDownload
                   - id: layout_docs_nav_config
                     type: MenuLink
                     properties:
                       title: Configuration
-                      icon: Wrench
+                      icon: AiOutlineTool
                   - id: layout_docs_nav_deploy
                     type: MenuLink
                     properties:
                       title: Deployment
-                      icon: CloudUpload
+                      icon: AiOutlineCloudUpload
         - id: layout_docs_content_area
           type: Content
           layout:
@@ -596,19 +590,7 @@ Welcome to DevDocs. This guide walks you through setting up your first project.
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `hasSider` | boolean | `false` | Lay the child blocks out in a row when the layout contains a Sider. |
-| `theme` | object | - | Antd Layout design token overrides for this block. Header, Footer and Sider blocks inside the layout use them too. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design layout tokens](https://ant.design/components/layout#design-token). |
-| `theme.bodyBg` | string | `"#f5f5f5"` | Background color of the layout. |
-| `theme.headerHeight` | number | `64` | Height of Header blocks. |
-| `theme.headerPadding` | string | `"0 50px"` | Padding of Header blocks. |
-| `theme.headerColor` | string | `"rgba(0, 0, 0, 0.88)"` | Text color of Header blocks. |
-| `theme.footerBg` | string | `"#f5f5f5"` | Background color of Footer blocks. |
-| `theme.footerPadding` | string | `"24px 50px"` | Padding of Footer blocks. |
-| `theme.triggerHeight` | number | `48` | Height of the collapse trigger of a collapsible Sider. |
-| `theme.triggerBg` | string | `"#002140"` | Background color of the collapse trigger of a dark Sider. |
-| `theme.triggerColor` | string | `"#fff"` | Color of the collapse trigger of a dark Sider. |
-| `theme.lightTriggerBg` | string | `"#ffffff"` | Background color of the collapse trigger of a light Sider. |
-| `theme.lightTriggerColor` | string | `"rgba(0, 0, 0, 0.88)"` | Color of the collapse trigger of a light Sider. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). |
 
 No events defined.
 

package/content/container-blocks/masonry.md

@@ -264,6 +264,58 @@ Notice the asymmetric spacing.
             content: Notice the asymmetric spacing.
 ```
 
+Items fill left-to-right in source order instead of shortest column.
+
+Second item.
+
+Third item.
+
+Taller card — order still preserved.
+
+```yaml
+- id: mas_seq
+  type: Masonry
+  properties:
+    columns: 3
+    gutter: 12
+    sequential: true
+  blocks:
+    - id: mas_seq_c1
+      type: Card
+      properties:
+        size: small
+        title: "1"
+      blocks:
+        - id: mas_seq_c1_p
+          type: Paragraph
+          properties:
+            content: Items fill left-to-right in source order instead of shortest column.
+    - id: mas_seq_c2
+      type: Card
+      properties:
+        size: small
+        title: "2"
+      blocks:
+        - id: mas_seq_c2_p
+          type: Paragraph
+          properties:
+            content: Second item.
+    - id: mas_seq_c3
+      type: Card
+      properties:
+        size: small
+        title: "3"
+      blocks:
+        - id: mas_seq_c3_p
+          type: Paragraph
+          properties:
+            content: Third item.
+        - id: mas_seq_c3_p2
+          type: Paragraph
+          properties:
+            content: Taller card — order still preserved.
+```
+
 Theme tokens cascade to all child blocks within this Masonry.
 
 ```yaml
@@ -344,7 +396,7 @@ White cards against gray create visual separation.
 - id: mas_tw
   type: Masonry
   class:
-    .element: bg-bg-layout p-6 rounded-xl
+    element: bg-bg-layout p-6 rounded-xl
   properties:
     columns: 2
     gutter: 12
@@ -612,9 +664,10 @@ Product Manager
               layout:
                 flex: 0 0 auto
               properties:
-                icon: user
+                icon: AiOutlineUser
                 size: 48
-                color: "#1677ff"
+                color: "#fff"
+                backgroundColor: "#1677ff"
             - id: mas_team_c1_info
               type: Box
               layout:
@@ -677,9 +730,10 @@ Product Manager
               layout:
                 flex: 0 0 auto
               properties:
-                icon: user
+                icon: AiOutlineUser
                 size: 48
-                color: "#52c41a"
+                color: "#fff"
+                backgroundColor: "#52c41a"
             - id: mas_team_c2_info
               type: Box
               layout:
@@ -740,9 +794,10 @@ Product Manager
               layout:
                 flex: 0 0 auto
               properties:
-                icon: user
+                icon: AiOutlineUser
                 size: 48
-                color: "#722ed1"
+                color: "#fff"
+                backgroundColor: "#722ed1"
             - id: mas_team_c3_info
               type: Box
               layout:
@@ -806,7 +861,7 @@ Desk Lamp
 - id: mas_products
   type: Masonry
   class:
-    .element: bg-bg-layout p-6 rounded-xl
+    element: bg-bg-layout p-6 rounded-xl
   properties:
     columns:
       xs: 1
@@ -862,7 +917,7 @@ Desk Lamp
             variant: solid
             block: true
             size: small
-            icon: ShoppingCart
+            icon: AiOutlineShoppingCart
           events:
             onClick:
               - id: mas_prod_c1_add
@@ -902,7 +957,7 @@ Desk Lamp
             variant: solid
             block: true
             size: small
-            icon: ShoppingCart
+            icon: AiOutlineShoppingCart
           events:
             onClick:
               - id: mas_prod_c2_add
@@ -962,7 +1017,7 @@ Desk Lamp
             variant: solid
             block: true
             size: small
-            icon: ShoppingCart
+            icon: AiOutlineShoppingCart
           events:
             onClick:
               - id: mas_prod_c3_add
@@ -1002,7 +1057,7 @@ Desk Lamp
             variant: solid
             block: true
             size: small
-            icon: ShoppingCart
+            icon: AiOutlineShoppingCart
           events:
             onClick:
               - id: mas_prod_c4_add
@@ -1014,10 +1069,10 @@ Desk Lamp
 
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
-| `columns` | integer \| object | `3` | Number of columns, or responsive breakpoint object (e.g. { xs: 1, sm: 2, md: 3 }). |
-| `fresh` | boolean | `false` | Keep watching the size of each item and re-layout when it changes, for items whose height changes after they render (images loading, expanding content). |
-| `gutter` | number \| array \| object | `0` | Gap between items in pixels. A number, a responsive breakpoint object (e.g. { xs: 8, md: 16 }), or a [horizontal, vertical] array of either. |
-| `sequential` | boolean | `false` | Has no effect: antd Masonry always places each item in the shortest column. Kept so existing configs stay valid. |
+| `columns` | integer \| object | - | Number of columns, or responsive breakpoint object. |
+| `fresh` | boolean | `false` | Force refresh the masonry layout. |
+| `gutter` | number \| array | - | Gap between items. Number or [horizontal, vertical] array. |
+| `sequential` | boolean | `false` | Whether to render items sequentially. |
 | `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design masonry tokens](https://ant.design/components/masonry#design-token). |
 | `theme.motionDurationSlow` | string | `"0.3s"` | Duration for item position transitions and appear animations. |
 | `theme.motionDurationFast` | string | `"0.1s"` | Duration for item leave animations. |
@@ -1029,7 +1084,6 @@ No events defined.
 | --- | --- |
 | `/block` | Outer block wrapper (always available). |
 | `/element` | The Masonry element. |
-| `/item` | Each item in the masonry grid. |
 
 | Slot | Description |
 | --- | --- |