@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/display-blocks/diffsidebyside.md

@@ -0,0 +1,56 @@
+# DiffSideBySide
+
+`DiffSideBySide` renders a before / after view of two objects as paired Ant Design `Descriptions` panels. The left column shows previous values (struck through for removed fields) and the right column shows the new values (highlighted for added or changed fields). Uses the same filtering, labelling, and per-path value formatters as `DiffList`.
+
+```yaml
+- id: diff_side_by_side_profile
+  type: DiffSideBySide
+  properties:
+    title: Profile updated
+    before:
+      name: Sarah Johnson
+      email: sarah@example.com
+      role: member
+    after:
+      name: Sarah M. Johnson
+      email: sarah.j@example.com
+      role: admin
+    labels:
+      name: Full name
+      email: Email address
+      role: Role
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `before` | object \| array \| null | - | Previous state. An object or array; null / undefined is treated as empty so "newly created" records diff cleanly. |
+| `after` | object \| array \| null | - | New state. An object or array; null / undefined is treated as empty so "deleted" records diff cleanly. |
+| `maxDepth` | integer | `4` | Paths deeper than this collapse into a single "Changed" row rendered as JSON. Defaults to 4. |
+| `title` | string | - | Optional title rendered above the diff. Supports html. |
+| `emptyText` | string | `"No changes"` | Shown when there are no differences between before and after. |
+| `showUnchanged` | boolean | `false` | Also render unchanged leaf fields in a muted style in both columns. |
+| `groupByRoot` | boolean | `true` | Group changes by their top-level key. When false, changes render as one flat paired list. |
+| `collapseNested` | boolean | `true` | Render entirely-new or entirely-removed nested objects and arrays inside a collapsible panel. |
+| `labels` | object | - | Map of dotted path to display label. Example: { "user.email": "Email address" }. |
+| `hide` | array | - | Patterns to hide. Each entry is an exact dotted path (e.g. `user.email`), a `prefix.*` prefix match, or a `*.leaf` tail match. |
+| `show` | array | - | Allowlist; same pattern syntax as `hide`. Applied before `hide`. |
+| `format` | object | - | Per-path value formatter. Keys are dotted paths (with optional "prefix.*" or "*.leaf" globs); values describe how to render matched values. |
+| `changeTypeLabels` | object | - | Override the tag labels for each change type. |
+| `changeTypeLabels.added` | string | `"Added"` |  |
+| `changeTypeLabels.removed` | string | `"Removed"` |  |
+| `changeTypeLabels.changed` | string | `"Changed"` |  |
+| `changeTypeLabels.unchanged` | string | `"Unchanged"` |  |
+| `theme` | object | - | Antd Descriptions design token overrides. See [antd design tokens](https://ant.design/components/descriptions#design-token). See [Ant Design descriptions tokens](https://ant.design/components/descriptions#design-token). |
+
+No events defined.
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The DiffSideBySide wrapper element. |
+| `/title` | The DiffSideBySide title. |
+| `/group` | A paired Descriptions wrapper (one per side). |
+| `/row` | A single row label within either side. |
+| `/tag` | The change-type tag element. |
+
+No slots defined.

package/content/display-blocks/difftimeline.md

@@ -0,0 +1,94 @@
+# DiffTimeline
+
+`DiffTimeline` renders a diff as a vertical audit trail using Ant Design's `Timeline` component. Each change becomes a timeline entry with a colour-coded dot (green for added, red for removed, blue for changed) and a breadcrumb-style label that shows the full path to the changed field. Uses the same filtering, labelling, and per-path value formatters as `DiffList`.
+
+```yaml
+- id: diff_timeline_order
+  type: DiffTimeline
+  properties:
+    title: Order
+    before:
+      status: pending
+      subtotal: 129.5
+      tax: 10.36
+      total: 139.86
+      items:
+        - Notebook (A5)
+        - Pen (blue)
+      internal:
+        createdBy: sys
+        traceId: abc-123
+    after:
+      status: paid
+      subtotal: 129.5
+      tax: 10.36
+      total: 139.86
+      items:
+        - Notebook (A5)
+        - Pen (blue)
+        - Sticky notes
+      internal:
+        createdBy: sys
+        traceId: abc-999
+    hide:
+      - internal.*
+    labels:
+      status: Status
+      subtotal: Subtotal
+      tax: Tax
+      total: Total
+      items: Line items
+    format:
+      subtotal:
+        type: currency
+        currency: USD
+      tax:
+        type: currency
+        currency: USD
+      total:
+        type: currency
+        currency: USD
+      status:
+        type: enum
+        map:
+          pending:
+            label: Pending
+            color: warning
+          paid:
+            label: Paid
+            color: success
+          cancelled:
+            label: Cancelled
+            color: error
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `before` | object \| array \| null | - | Previous state. An object or array; null / undefined is treated as empty so "newly created" records diff cleanly. |
+| `after` | object \| array \| null | - | New state. An object or array; null / undefined is treated as empty so "deleted" records diff cleanly. |
+| `maxDepth` | integer | `4` | Paths deeper than this collapse into a single "Changed" entry rendered as JSON. Defaults to 4. |
+| `title` | string | - | Optional title rendered above the timeline. Supports html. |
+| `emptyText` | string | `"No changes"` | Shown when there are no differences between before and after. |
+| `showUnchanged` | boolean | `false` | Also emit muted timeline entries for unchanged leaf fields. |
+| `collapseNested` | boolean | `true` | Render entirely-new or entirely-removed nested objects and arrays inside a collapsible panel. |
+| `labels` | object | - | Map of dotted path to display label. |
+| `hide` | array | - | Patterns to hide. Each entry is an exact dotted path, a `prefix.*` prefix match, or a `*.leaf` tail match. |
+| `show` | array | - | Allowlist; same pattern syntax as `hide`. Applied before `hide`. |
+| `format` | object | - | Per-path value formatter. Keys are dotted paths (with optional "prefix.*" or "*.leaf" globs); values describe how to render matched values. |
+| `changeTypeLabels` | object | - | Override the tag labels for each change type. |
+| `changeTypeLabels.added` | string | `"Added"` |  |
+| `changeTypeLabels.removed` | string | `"Removed"` |  |
+| `changeTypeLabels.changed` | string | `"Changed"` |  |
+| `changeTypeLabels.unchanged` | string | `"Unchanged"` |  |
+| `theme` | object | - | Antd Timeline design token overrides. See [antd design tokens](https://ant.design/components/timeline#design-token). See [Ant Design timeline tokens](https://ant.design/components/timeline#design-token). |
+
+No events defined.
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The DiffTimeline wrapper element. |
+| `/title` | The DiffTimeline title. |
+| `/group` | The antd Timeline element. |
+
+No slots defined.

package/content/display-blocks/divider.md

@@ -0,0 +1,406 @@
+# Divider
+
+Horizontal or vertical divider with optional text and orientation.
+
+Home
+
+Settings
+
+Profile
+
+```yaml
+- id: type_horizontal
+  type: Divider
+- id: type_horizontal_titled
+  type: Divider
+  properties:
+    title: Horizontal Divider
+- id: type_vertical_row
+  type: Box
+  layout:
+    gap: 0
+  blocks:
+    - id: type_vt_text_1
+      type: Paragraph
+      layout:
+        flex: 0 0 auto
+      properties:
+        content: Home
+    - id: type_vt_divider_1
+      type: Divider
+      layout:
+        flex: 0 0 auto
+      properties:
+        orientation: vertical
+    - id: type_vt_text_2
+      type: Paragraph
+      layout:
+        flex: 0 0 auto
+      properties:
+        content: Settings
+    - id: type_vt_divider_2
+      type: Divider
+      layout:
+        flex: 0 0 auto
+      properties:
+        orientation: vertical
+    - id: type_vt_text_3
+      type: Paragraph
+      layout:
+        flex: 0 0 auto
+      properties:
+        content: Profile
+```
+
+```yaml
+- id: title_plain_text
+  type: Divider
+  properties:
+    title: Section Title
+- id: title_html_bold
+  type: Divider
+  properties:
+    title: <b>Bold Section Header</b>
+- id: title_html_styled
+  type: Divider
+  properties:
+    title: '<span style="color: #1677ff; font-size: 16px">Highlighted Title</span>'
+```
+
+```yaml
+- id: orient_start
+  type: Divider
+  properties:
+    title: Start
+    titlePlacement: start
+- id: orient_center
+  type: Divider
+  properties:
+    title: Center (default)
+    titlePlacement: center
+- id: orient_end
+  type: Divider
+  properties:
+    title: End
+    titlePlacement: end
+```
+
+```yaml
+- id: dashed_simple
+  type: Divider
+  properties:
+    dashed: true
+- id: dashed_with_title
+  type: Divider
+  properties:
+    dashed: true
+    title: Dashed with Title
+- id: dashed_left_title
+  type: Divider
+  properties:
+    dashed: true
+    title: Dashed Start
+    titlePlacement: start
+```
+
+```yaml
+- id: plain_center
+  type: Divider
+  properties:
+    title: Plain Center
+    plain: true
+- id: plain_left
+  type: Divider
+  properties:
+    title: Plain Start
+    plain: true
+    titlePlacement: start
+- id: plain_dashed
+  type: Divider
+  properties:
+    title: Plain Dashed
+    plain: true
+    dashed: true
+```
+
+```yaml
+- id: css_tailwind_margin
+  type: Divider
+  class: my-8
+  properties:
+    title: Extra Margin via Tailwind
+- id: css_inline_color
+  type: Divider
+  style:
+    .element:
+      borderColor: "#1677ff"
+- id: css_inline_thick
+  type: Divider
+  style:
+    .element:
+      borderWidth: 3px
+- id: css_inline_title_color
+  type: Divider
+  properties:
+    title: Styled Title
+  style:
+    .element:
+      color: "#722ed1"
+      borderColor: "#722ed1"
+```
+
+Item A
+
+Item B
+
+```yaml
+- id: theme_text_padding
+  type: Divider
+  properties:
+    title: Wide Text Padding
+    theme:
+      textPaddingInline: 3em
+- id: theme_orientation_tight
+  type: Divider
+  properties:
+    title: Tight Orientation Margin
+    titlePlacement: start
+    theme:
+      orientationMargin: 0
+- id: theme_orientation_wide
+  type: Divider
+  properties:
+    title: Wide Orientation Margin
+    titlePlacement: start
+    theme:
+      orientationMargin: 0.25
+- id: theme_vertical_margin
+  type: Box
+  layout:
+    gap: 0
+  blocks:
+    - id: theme_vm_text_1
+      type: Paragraph
+      layout:
+        flex: 0 0 auto
+      properties:
+        content: Item A
+    - id: theme_vm_divider
+      type: Divider
+      layout:
+        flex: 0 0 auto
+      properties:
+        orientation: vertical
+        theme:
+          verticalMarginInline: 24
+    - id: theme_vm_text_2
+      type: Paragraph
+      layout:
+        flex: 0 0 auto
+      properties:
+        content: Item B
+```
+
+```yaml
+- id: settings_card
+  type: Card
+  properties:
+    title: Account Settings
+    size: small
+  blocks:
+    - id: settings_profile_heading
+      type: Divider
+      properties:
+        title: Profile
+        titlePlacement: start
+        plain: true
+    - id: settings_name
+      type: TextInput
+      properties:
+        label:
+          title: Display Name
+        placeholder: Enter your name
+    - id: settings_email
+      type: TextInput
+      properties:
+        label:
+          title: Email Address
+        placeholder: you@company.com
+    - id: settings_notifications_heading
+      type: Divider
+      properties:
+        title: Notifications
+        titlePlacement: start
+        plain: true
+    - id: settings_notify_toggle
+      type: Switch
+      properties:
+        label:
+          title: Email Notifications
+    - id: settings_danger_heading
+      type: Divider
+      properties:
+        title: '<span style="color: #ff4d4f">Danger Zone</span>'
+        titlePlacement: start
+        plain: true
+        dashed: true
+      style:
+        .element:
+          borderColor: "#ff4d4f"
+    - id: settings_delete_row
+      type: Box
+      layout:
+        gap: 8
+        justify: flex-end
+      blocks:
+        - id: settings_delete_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Delete Account
+            color: danger
+            variant: outlined
+            icon: AiOutlineDelete
+          events:
+            onClick:
+              - id: settings_delete_msg
+                type: DisplayMessage
+                params:
+                  content: Account deletion requested.
+                  status: warning
+```
+
+## Building Config-Driven Applications
+A practical guide to rapid development with declarative frameworks.
+
+By Jane Smith
+
+March 2026
+
+5 min read
+
+Config-driven frameworks allow teams to ship features faster by reducing boilerplate.
+Instead of writing repetitive UI code, developers describe what they want in YAML or JSON.
+
+- Declarative configs reduce development time by up to 60%
+- Schema validation catches errors before deployment
+- Teams can onboard new developers faster with standardized patterns
+
+```yaml
+- id: article_card
+  type: Card
+  blocks:
+    - id: article_title
+      type: Markdown
+      properties:
+        content: |
+          ## Building Config-Driven Applications
+          A practical guide to rapid development with declarative frameworks.
+    - id: article_meta_row
+      type: Box
+      layout:
+        gap: 0
+      blocks:
+        - id: article_author
+          type: Paragraph
+          layout:
+            flex: 0 0 auto
+          properties:
+            content: By Jane Smith
+        - id: article_meta_divider_1
+          type: Divider
+          layout:
+            flex: 0 0 auto
+          properties:
+            orientation: vertical
+        - id: article_date
+          type: Paragraph
+          layout:
+            flex: 0 0 auto
+          properties:
+            content: March 2026
+        - id: article_meta_divider_2
+          type: Divider
+          layout:
+            flex: 0 0 auto
+          properties:
+            orientation: vertical
+        - id: article_reading_time
+          type: Paragraph
+          layout:
+            flex: 0 0 auto
+          properties:
+            content: 5 min read
+    - id: article_intro_divider
+      type: Divider
+    - id: article_body
+      type: Markdown
+      properties:
+        content: >
+          Config-driven frameworks allow teams to ship features faster by
+          reducing boilerplate.
+
+          Instead of writing repetitive UI code, developers describe what they
+          want in YAML or JSON.
+    - id: article_section_divider
+      type: Divider
+      properties:
+        title: Key Takeaways
+        titlePlacement: start
+        plain: true
+    - id: article_takeaways
+      type: Markdown
+      properties:
+        content: |
+          - Declarative configs reduce development time by up to 60%
+          - Schema validation catches errors before deployment
+          - Teams can onboard new developers faster with standardized patterns
+    - id: article_footer_divider
+      type: Divider
+      properties:
+        dashed: true
+    - id: article_footer_row
+      type: Box
+      layout:
+        gap: 8
+        justify: flex-end
+      blocks:
+        - id: article_share_btn
+          type: Button
+          layout:
+            flex: 0 0 auto
+          properties:
+            title: Share Article
+            color: primary
+            variant: outlined
+            icon: AiOutlineShareAlt
+          events:
+            onClick:
+              - id: article_share_msg
+                type: DisplayMessage
+                params:
+                  content: Link copied to clipboard!
+                  status: success
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `dashed` | boolean | `false` | Whether line is dashed. |
+| `orientation` | string | `"horizontal"` | Direction of the divider line. Enum: `horizontal`, `vertical`. |
+| `title` | string | - | Divider title - supports html. |
+| `titlePlacement` | string | `"center"` | Position of title text within the divider. Enum: `start`, `end`, `center`. |
+| `plain` | boolean | `false` | Show text as plain style. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design divider tokens](https://ant.design/components/divider#design-token). |
+| `theme.textPaddingInline` | string | `"1em"` | Horizontal padding of text content in the divider. |
+| `theme.orientationMargin` | number | `0.05` | Distance between text and edge when orientation is left or right. Value between 0 and 1 representing a percentage. |
+| `theme.verticalMarginInline` | number | `8` | Horizontal margin for vertical dividers. |
+
+No events defined.
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The Divider element. |
+
+No slots defined.

package/content/display-blocks/download.md

@@ -0,0 +1,60 @@
+# Download
+
+Download files from any storage provider — AWS S3 (and S3-compatible services), Google Cloud Storage, or Azure Blob Storage. Requires a download request (AwsS3PresignedGetObject, GcsSignedGetUrl, or AzureBlobDownloadSas) referenced by the downloadPolicyRequestId property. Clicking a file resolves a URL through the request on demand — set `public: true` on the request for stable, non-expiring URLs to publicly readable objects. If files were uploaded with an Upload block, its fileList value can be mapped directly to this block.
+
+> The Download block requires a storage connection and a download request. The examples below show configuration structure but will not download files without a configured connection.
+
+```yaml
+- id: basic_default
+  type: Download
+  properties:
+    downloadPolicyRequestId: download_policy_request
+    fileList:
+      - key: reports/report.pdf
+        name: report.pdf
+        size: 1024
+        type: application/pdf
+```
+
+```yaml
+- id: removable
+  type: Download
+  properties:
+    downloadPolicyRequestId: download_policy_request
+    showRemoveIcon: true
+    fileList:
+      - key: reports/report.pdf
+        name: report.pdf
+      - key: reports/summary.xlsx
+        name: summary.xlsx
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `downloadPolicyRequestId` | string | - | Id of a download request (e.g. AwsS3PresignedGetObject, GcsSignedGetUrl, AzureBlobDownloadSas) that returns a URL for the file to download. |
+| `fileList` | array | - | List of files to be downloaded. If files were uploaded using an Upload block, the fileList value can just be mapped to this field. |
+| `fileList.$.key` | string | - | Storage object key. |
+| `fileList.$.lastModified` | string | - | File last modified date. |
+| `fileList.$.name` | string | - | File name. |
+| `fileList.$.size` | number | - | File size in bytes. |
+| `fileList.$.type` | string | - | File MIME type. |
+| `showRemoveIcon` | boolean | `false` | Show a remove (×) icon next to each file in the list. Clicking it fires the `onRemove` event; the file is not removed from `fileList` automatically — the action handler is responsible. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/upload#design-token). See [Ant Design upload tokens](https://ant.design/components/upload#design-token). |
+| `theme.actionsColor` | string | - | Color of action icons (download, preview, remove). |
+| `theme.pictureCardSize` | number | - | Size of list items in card type (affects both picture-card and picture-circle). |
+| `theme.controlItemBgHover` | string | - | Background color of file item on hover. |
+| `theme.colorIcon` | string | - | Color of file icons. |
+| `theme.fontSize` | number | - | Font size of file name text. |
+| `theme.borderRadiusSM` | number | - | Border radius of file list items. |
+
+| Event | Event Data | Description |
+| --- | --- | --- |
+| `onChange` | \- | Triggered when the upload state is changing. |
+| `onRemove` | `{ file }` | Triggered when a file remove icon is clicked. The file is NOT removed automatically — the handler is responsible for updating `fileList` (e.g. via `SetState`). |
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The Download element. |
+
+No slots defined.