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

package/content/container-blocks/pagesidebarlayout.md

@@ -18,17 +18,17 @@ PageSidebarLayout provides a full-page layout with a full-height sidebar. The si
           type: MenuLink
           properties:
             title: Dashboard
-            icon: Gauge
+            icon: AiOutlineDashboard
         - id: psl_basic_users
           type: MenuLink
           properties:
             title: Users
-            icon: user
+            icon: AiOutlineUser
         - id: psl_basic_settings
           type: MenuLink
           properties:
             title: Settings
-            icon: settings
+            icon: AiOutlineSetting
   blocks:
     - id: psl_basic_content
       type: Paragraph
@@ -54,12 +54,12 @@ Sider starts collapsed. Click the toggle button to expand. The collapsed state i
           type: MenuLink
           properties:
             title: Dashboard
-            icon: Gauge
+            icon: AiOutlineDashboard
         - id: psl_collapsed_users
           type: MenuLink
           properties:
             title: Users
-            icon: user
+            icon: AiOutlineUser
   blocks:
     - id: psl_collapsed_content
       type: Paragraph
@@ -86,12 +86,12 @@ Optional desktop header with custom content. The header sits inside the content
           type: MenuLink
           properties:
             title: Dashboard
-            icon: Gauge
+            icon: AiOutlineDashboard
         - id: psl_header_settings
           type: MenuLink
           properties:
             title: Settings
-            icon: settings
+            icon: AiOutlineSetting
   slots:
     header:
       blocks:
@@ -101,7 +101,7 @@ Optional desktop header with custom content. The header sits inside the content
             flex: 0 0 auto
           properties:
             title: Search
-            icon: search
+            icon: AiOutlineSearch
             color: default
             variant: outlined
             size: small
@@ -113,93 +113,6 @@ Optional desktop header with custom content. The header sits inside the content
           content area, not above the sider.
 ```
 
-The siderHeader slot sits above the menu and stays in place while a long menu scrolls. siderHeaderClosed takes its place while the sider is collapsed, and mobileDrawerHeader puts content above the menu in the mobile drawer.
-
-Acme Inc
-
-```yaml
-- id: psl_sider_header
-  type: PageSidebarLayout
-  properties:
-    siderStorageKey: psl_sider_header
-    sider:
-      width: 240
-    menu:
-      links:
-        - id: psl_sider_header_general
-          type: MenuLink
-          properties:
-            title: General
-            icon: settings
-        - id: psl_sider_header_members
-          type: MenuLink
-          properties:
-            title: Members
-            icon: users
-        - id: psl_sider_header_billing
-          type: MenuLink
-          properties:
-            title: Billing
-            icon: CreditCard
-  slots:
-    siderHeader:
-      blocks:
-        - id: psl_sider_header_open
-          type: Box
-          style:
-            padding: 8px 16px
-          blocks:
-            - id: psl_sider_header_back
-              type: Button
-              properties:
-                title: Back to app
-                icon: arrow-left
-                type: link
-                size: small
-            - id: psl_sider_header_title
-              type: Title
-              properties:
-                content: Acme Inc
-                level: 5
-    siderHeaderClosed:
-      blocks:
-        - id: psl_sider_header_closed
-          type: Box
-          style:
-            padding: 8px
-            textAlign: center
-          blocks:
-            - id: psl_sider_header_back_icon
-              type: Button
-              properties:
-                hideTitle: true
-                title: Back to app
-                icon: arrow-left
-                type: link
-    mobileDrawerHeader:
-      blocks:
-        - id: psl_sider_header_drawer
-          type: Box
-          style:
-            padding: 0 24px
-          blocks:
-            - id: psl_sider_header_drawer_back
-              type: Button
-              properties:
-                title: Back to app
-                icon: arrow-left
-                type: link
-                size: small
-  blocks:
-    - id: psl_sider_header_content
-      type: Paragraph
-      properties:
-        content: The siderHeader slot sits above the menu and stays in place while a
-          long menu scrolls. siderHeaderClosed takes its place while the sider
-          is collapsed, and mobileDrawerHeader puts content above the menu in
-          the mobile drawer.
-```
-
 Custom logo with style overrides. The full logo (src) shows when the sider is expanded, and the square logo (srcMobile) shows when collapsed.
 
 ```yaml
@@ -219,7 +132,7 @@ Custom logo with style overrides. The full logo (src) shows when the sider is ex
           type: MenuLink
           properties:
             title: Dashboard
-            icon: Gauge
+            icon: AiOutlineDashboard
   blocks:
     - id: psl_logo_content
       type: Paragraph
@@ -248,19 +161,19 @@ Dashboard Overview
           type: MenuLink
           properties:
             title: My Profile
-            icon: user
+            icon: AiOutlineUser
         - id: psl_admin_prof_settings
           type: MenuLink
           properties:
             title: Settings
-            icon: settings
+            icon: AiOutlineSetting
         - id: psl_admin_prof_divider
           type: MenuDivider
         - id: psl_admin_prof_logout
           type: MenuLink
           properties:
             title: Sign Out
-            icon: logout
+            icon: AiOutlineLogout
             danger: true
     sider:
       width: 240
@@ -276,12 +189,12 @@ Dashboard Overview
           type: MenuLink
           properties:
             title: Dashboard
-            icon: Gauge
+            icon: AiOutlineDashboard
         - id: psl_admin_users_group
           type: MenuGroup
           properties:
             title: User Management
-            icon: users
+            icon: AiOutlineTeam
           links:
             - id: psl_admin_all_users
               type: MenuLink
@@ -295,12 +208,12 @@ Dashboard Overview
           type: MenuLink
           properties:
             title: Analytics
-            icon: chart
+            icon: AiOutlineBarChart
         - id: psl_admin_settings
           type: MenuLink
           properties:
             title: Settings
-            icon: settings
+            icon: AiOutlineSetting
   slots:
     siderOpen:
       blocks:
@@ -314,7 +227,7 @@ Dashboard Overview
               properties:
                 title: Production
                 color: green
-                icon: Server
+                icon: AiOutlineCloudServer
     siderClosed:
       blocks:
         - id: psl_admin_sider_closed
@@ -334,8 +247,7 @@ Dashboard Overview
           type: Paragraph
           properties:
             content: Admin Panel v2.4.1
-          style:
-            .element:
+            style:
               textAlign: center
               margin: 0
               color: "#999"
@@ -363,7 +275,7 @@ Dashboard Overview
               properties:
                 title: Total Users
                 value: 2847
-                prefixIcon: user
+                prefixIcon: AiOutlineUser
         - id: psl_admin_stat_revenue
           type: Card
           layout:
@@ -394,7 +306,7 @@ Dashboard Overview
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | `title` | string | - | Page title. Accepted for compatibility. |
-| `theme` | object | - | Antd global design token overrides, such as colorPrimary or borderRadius, applied to everything in the page layout. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design component tokens](https://ant.design/docs/react/customize-theme#seedtoken). |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). |
 | `logo` | object | - | Header logo settings. By default, images are served from the app public folder and auto-swap between light and dark variants based on dark mode. See [Hosting Files](/hosting-files) for details. |
 | `logo.src` | string | - | Logo image URL for desktop. Defaults to logo-light-theme.png or logo-dark-theme.png from the public folder (~250x72px), auto-selected based on dark mode. |
 | `logo.srcMobile` | string | - | Logo image URL for mobile. Defaults to logo-square-light-theme.png or logo-square-dark-theme.png from the public folder (~125x125px), auto-selected based on dark mode. |
@@ -402,7 +314,7 @@ Dashboard Overview
 | `logo.style` | object | - | Css style object to apply to logo. |
 | `sider` | object | - | Sider properties. |
 | `sider.collapsedWidth` | integer | - | Width of the collapsed sidebar, by setting to 0 a special trigger will appear. |
-| `sider.collapsible` | boolean | `false` | Show a trigger at the bottom of the sider that collapses and expands it, like the toggle button. |
+| `sider.collapsible` | boolean | `true` | Whether can be collapsed. |
 | `sider.initialCollapsed` | boolean | `false` | Set the initial collapsed state. |
 | `sider.width` | string \| number | - | Width of the sidebar. |
 | `sider.hideToggleButton` | boolean | `false` | Hide toggle button in sider. |
@@ -421,36 +333,14 @@ Dashboard Overview
 | `breadcrumb.list.$.pageId` | string | - | Page id to link to when clicked. |
 | `breadcrumb.list.$.url` | string | - | External url link. |
 | `breadcrumb.list.$.style` | object | - | Css style to apply to link. |
-| `breadcrumb.list.$.icon` | string \| object | - | Icon name (a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`) or properties of an Icon block to use an icon in breadcrumb link. |
-| `breadcrumb.list.$.icon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `breadcrumb.list.$.icon.color` | string | - | Icon color. |
-| `breadcrumb.list.$.icon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `breadcrumb.list.$.icon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `breadcrumb.list.$.icon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `breadcrumb.list.$.icon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `breadcrumb.list.$.icon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `breadcrumb.list.$.icon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `breadcrumb.list.$.icon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
-| `breadcrumb.list.$.links` | array | - | Links shown in a dropdown menu on the breadcrumb item. |
-| `breadcrumb.list.$.links.$.label` | string | - | Label of the dropdown link. |
-| `breadcrumb.list.$.links.$.pageId` | string | - | Page id to link to when clicked. |
-| `breadcrumb.list.$.links.$.url` | string | - | External url link. |
+| `breadcrumb.list.$.icon` | string \| object | - | Name of an React-Icon (See all icons) or properties of an Icon block to use an icon in breadcrumb link. |
 | `menu` | object | - | Menu properties. |
 | `menu.links` | array | - |  |
 | `menu.links.$.id` | string | - | Menu item id. |
 | `menu.links.$.pageId` | string | - | Page to link to. |
 | `menu.links.$.properties` | object | - | properties from menu item. |
 | `menu.links.$.properties.title` | string | - | Menu item title. |
-| `menu.links.$.properties.icon` | string \| object | - | Icon name (a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`) or properties of an Icon block to customize icon on menu item. |
-| `menu.links.$.properties.icon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `menu.links.$.properties.icon.color` | string | - | Icon color. |
-| `menu.links.$.properties.icon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `menu.links.$.properties.icon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `menu.links.$.properties.icon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `menu.links.$.properties.icon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `menu.links.$.properties.icon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `menu.links.$.properties.icon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `menu.links.$.properties.icon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
+| `menu.links.$.properties.icon` | string \| object | - | Name of an React-Icon (See all icons) or properties of an Icon block to customize icon on menu item. |
 | `menuLg` | object | - | Menu large screen properties. Overwrites menu properties on desktop screen sizes. |
 | `menuMd` | object | - | Mobile menu properties. Overwrites menu properties on mobile screen sizes. |
 | `notifications` | object | - | Notification bell icon with badge. Shown in the sider on desktop and the mobile header on small screens. Renders when configured. Use the link property to navigate when clicked. |
@@ -464,34 +354,16 @@ Dashboard Overview
 | `notifications.showZero` | boolean | `false` | Show badge when count is zero. |
 | `notifications.overflowCount` | number | `99` | Max count to show. Values above this display as "N+". |
 | `notifications.color` | string | - | Badge color. |
-| `notifications.icon` | string \| object | - | Icon for the notification button. Defaults to `bell`. |
-| `notifications.icon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `notifications.icon.color` | string | - | Icon color. |
-| `notifications.icon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `notifications.icon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `notifications.icon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `notifications.icon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `notifications.icon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `notifications.icon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `notifications.icon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
+| `notifications.icon` | string \| object | - | Icon for the notification button. Defaults to AiOutlineBell. |
 | `notifications.size` | string | `"small"` | Size of the notification button. Enum: `small`, `default`, `large`. |
 | `profile` | object | - | Profile avatar with optional dropdown menu. Shown in the sider on desktop and the mobile header on small screens. Renders when configured. Use with the _user operator to populate from the authenticated user. |
 | `profile.title` | string | `"Profile"` | Label shown next to the avatar when the sider is expanded. Hidden on mobile header and collapsed sider. |
 | `profile.avatar` | object | - | Avatar display properties. |
 | `profile.avatar.src` | string | - | Image URL for the avatar. Typically bound to _user: image. |
 | `profile.avatar.content` | string | - | Text content inside the avatar (e.g. user initials). Shown when no src is provided. |
-| `profile.avatar.icon` | string \| object | - | Icon to display in avatar when no src or content is set. Defaults to `user`. |
-| `profile.avatar.icon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `profile.avatar.icon.color` | string | - | Icon color. |
-| `profile.avatar.icon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `profile.avatar.icon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `profile.avatar.icon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `profile.avatar.icon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `profile.avatar.icon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `profile.avatar.icon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `profile.avatar.icon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
+| `profile.avatar.icon` | string \| object | - | Icon to display in avatar when no src or content is set. Defaults to AiOutlineUser. |
 | `profile.avatar.color` | string | - | Background color of the avatar when not using src. |
-| `profile.avatar.size` | string \| number | `"small"` | Size of the avatar: default, small, large or a pixel number. |
+| `profile.avatar.size` | string \| number | `"small"` | Size of the avatar. Enum: `default`, `small`, `large`. |
 | `profile.avatar.shape` | string | `"circle"` | Shape of the avatar. Enum: `circle`, `square`. |
 | `profile.links` | array | - | Dropdown menu items. Uses the same MenuLink/MenuGroup/MenuDivider schema as Menu. Compatible with _menu operator output for access-filtered menus. |
 | `profile.links.$.id` | string | - | Menu item id. |
@@ -503,15 +375,6 @@ Dashboard Overview
 | `profile.links.$.properties` | object | - | Properties for the menu item. |
 | `profile.links.$.properties.title` | string | - | Menu item title. |
 | `profile.links.$.properties.icon` | string \| object | - | Icon for the menu item. |
-| `profile.links.$.properties.icon.name` | string | - | Icon name: a semantic name like `edit`, a Lucide icon name like `Pencil`, or a set-qualified name like `tabler:Pencil`. |
-| `profile.links.$.properties.icon.color` | string | - | Icon color. |
-| `profile.links.$.properties.icon.size` | string \| number | - | Size of the icon. Defaults to `theme.icons.size`. |
-| `profile.links.$.properties.icon.rotate` | number | - | Number of degrees to rotate the icon. |
-| `profile.links.$.properties.icon.spin` | boolean | - | Continuously spin the icon with animation. |
-| `profile.links.$.properties.icon.strokeWidth` | number | - | Stroke width of the icon lines, in pixels of the 24px icon grid. Defaults to `theme.icons.strokeWidth` (2). |
-| `profile.links.$.properties.icon.nonScalingStroke` | boolean | - | Keep the stroke width constant at any icon size. Defaults to `theme.icons.nonScalingStroke`. |
-| `profile.links.$.properties.icon.title` | string | - | Icon hover title for accessibility. An empty string marks the icon as decorative. |
-| `profile.links.$.properties.icon.disableLoadingIcon` | boolean | - | While loading after the icon has been clicked, don't render the loading icon. |
 | `profile.links.$.properties.danger` | boolean | `false` | Apply danger style to menu item. |
 | `profile.links.$.properties.disabled` | boolean | `false` | Disable the menu item. |
 | `profile.links.$.properties.dashed` | boolean | `false` | Whether the divider line is dashed. |
@@ -543,14 +406,11 @@ Dashboard Overview
 | `/block` | Outer block wrapper (always available). |
 | `/element` | The PageSidebarLayout element. |
 | `/sider` | The PageSidebarLayout sider. |
-| `/siderBody` | The box inside the sider that holds the toggle button, menu and sider slots. |
-| `/siderHeader` | The box above the sider menu that holds the siderHeader or siderHeaderClosed slot. |
 | `/menu` | The PageSidebarLayout menu. |
 | `/mobileHeader` | The PageSidebarLayout mobile header. |
 | `/mobileMenu` | The PageSidebarLayout mobile menu. |
 | `/header` | The PageSidebarLayout header. |
 | `/headerActions` | The header actions container (notifications, profile, dark mode toggle). |
-| `/headerContent` | The PageSidebarLayout header content area (the header slot row). |
 | `/logo` | The PageSidebarLayout logo. |
 | `/notifications` | The notification bell button. |
 | `/notificationsBadge` | The notification badge wrapper. |
@@ -573,9 +433,6 @@ Dashboard Overview
 | `header` | Additional header content. |
 | `mobileDrawerContent` | Content in the mobile menu drawer. |
 | `mobileDrawerFooter` | Footer in the mobile menu drawer. |
-| `mobileDrawerHeader` | Content above the menu in the mobile menu drawer. |
 | `mobileExtra` | Extra content in the mobile header bar. |
 | `siderClosed` | Content shown in the sider when collapsed. |
-| `siderHeader` | Content above the sider menu when expanded. It stays in place while the menu scrolls. |
-| `siderHeaderClosed` | Content above the sider menu when collapsed. |
 | `siderOpen` | Content shown in the sider when expanded. |