@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/display-blocks/dangerousmarkdown.md

@@ -0,0 +1,423 @@
+# DangerousMarkdown
+
+Render Markdown content without sanitization.
+
+## DangerousMarkdown
+
+This block renders markdown **and** allows embedded HTML to be rendered inline.
+
+Regular markdown features like **bold**, *italic*, ~~strikethrough~~, and [links](https://lowdefy.com) all work as expected.
+
+- Unordered list item
+- Another item
+
+1. Ordered item one
+2. Ordered item two
+
+```yaml
+- id: basic_text
+  type: DangerousMarkdown
+  properties:
+    content: >
+      ## DangerousMarkdown
+
+
+      This block renders markdown **and** allows embedded HTML to be rendered
+      inline.
+
+
+      Regular markdown features like **bold**, *italic*, ~~strikethrough~~, and
+      [links](https://lowdefy.com) all work as expected.
+
+
+      - Unordered list item
+
+      - Another item
+
+
+      1. Ordered item one
+
+      2. Ordered item two
+```
+
+Text with <span style="color: #1890ff; font-weight: bold;">blue bold</span> and <span style="color: #52c41a;">green</span> and <span style="color: #ff4d4f; text-decoration: underline;">red underlined</span> inline HTML.
+
+Use <span style="background-color: #ffffb8; padding: 0 4px;">highlighted text</span> to draw attention to specific words.
+
+Mix markdown **bold** with <span style="font-style: italic; color: #722ed1;">HTML italic purple</span> seamlessly.
+
+<div style="padding: 16px; background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%); border-radius: 8px; border: 1px solid #91d5ff;">
+  <strong style="font-size: 16px;">Styled Container</strong>
+  <p style="margin: 8px 0 0 0; color: #0050b3;">HTML divs with gradients, borders, and custom spacing render inside DangerousMarkdown.</p>
+</div>
+
+```yaml
+- id: html_colored_text
+  type: DangerousMarkdown
+  properties:
+    content: >
+      Text with <span style="color: #1890ff; font-weight: bold;">blue
+      bold</span> and <span style="color: #52c41a;">green</span> and <span
+      style="color: #ff4d4f; text-decoration: underline;">red underlined</span>
+      inline HTML.
+
+
+      Use <span style="background-color: #ffffb8; padding: 0 4px;">highlighted
+      text</span> to draw attention to specific words.
+
+
+      Mix markdown **bold** with <span style="font-style: italic; color:
+      #722ed1;">HTML italic purple</span> seamlessly.
+- id: html_styled_div
+  type: DangerousMarkdown
+  properties:
+    content: >
+      <div style="padding: 16px; background: linear-gradient(135deg, #e6f7ff 0%,
+      #bae7ff 100%); border-radius: 8px; border: 1px solid #91d5ff;">
+        <strong style="font-size: 16px;">Styled Container</strong>
+        <p style="margin: 8px 0 0 0; color: #0050b3;">HTML divs with gradients, borders, and custom spacing render inside DangerousMarkdown.</p>
+      </div>
+```
+
+## Project Status Report
+
+Here is a summary with **markdown headings** and HTML elements combined:
+
+<div style="display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0;">
+  <div style="flex: 1; min-width: 150px; padding: 12px; background: #f6ffed; border: 1px solid #b7eb8f; border-radius: 6px; text-align: center;">
+    <div style="font-size: 24px; font-weight: bold; color: #52c41a;">12</div>
+    <div style="color: #389e0d;">Completed</div>
+  </div>
+  <div style="flex: 1; min-width: 150px; padding: 12px; background: #e6f7ff; border: 1px solid #91d5ff; border-radius: 6px; text-align: center;">
+    <div style="font-size: 24px; font-weight: bold; color: #1890ff;">5</div>
+    <div style="color: #096dd9;">In Progress</div>
+  </div>
+  <div style="flex: 1; min-width: 150px; padding: 12px; background: #fff7e6; border: 1px solid #ffd591; border-radius: 6px; text-align: center;">
+    <div style="font-size: 24px; font-weight: bold; color: #fa8c16;">3</div>
+    <div style="color: #d48806;">Pending</div>
+  </div>
+</div>
+
+> **Note:** The cards above use HTML `div` elements with inline styles for layout.
+
+Regular markdown continues below the HTML blocks without issue.
+
+```yaml
+- id: mixed_content
+  type: DangerousMarkdown
+  properties:
+    content: >
+      ## Project Status Report
+
+
+      Here is a summary with **markdown headings** and HTML elements combined:
+
+
+      <div style="display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0;">
+        <div style="flex: 1; min-width: 150px; padding: 12px; background: #f6ffed; border: 1px solid #b7eb8f; border-radius: 6px; text-align: center;">
+          <div style="font-size: 24px; font-weight: bold; color: #52c41a;">12</div>
+          <div style="color: #389e0d;">Completed</div>
+        </div>
+        <div style="flex: 1; min-width: 150px; padding: 12px; background: #e6f7ff; border: 1px solid #91d5ff; border-radius: 6px; text-align: center;">
+          <div style="font-size: 24px; font-weight: bold; color: #1890ff;">5</div>
+          <div style="color: #096dd9;">In Progress</div>
+        </div>
+        <div style="flex: 1; min-width: 150px; padding: 12px; background: #fff7e6; border: 1px solid #ffd591; border-radius: 6px; text-align: center;">
+          <div style="font-size: 24px; font-weight: bold; color: #fa8c16;">3</div>
+          <div style="color: #d48806;">Pending</div>
+        </div>
+      </div>
+
+
+      > **Note:** The cards above use HTML `div` elements with inline styles for
+      layout.
+
+
+      Regular markdown continues below the HTML blocks without issue.
+```
+
+<table style="width: 100%; border-collapse: collapse; font-size: 14px;">
+  <thead>
+    <tr style="background: #fafafa;">
+      <th style="border: 1px solid #d9d9d9; padding: 10px 16px; text-align: left;">Feature</th>
+      <th style="border: 1px solid #d9d9d9; padding: 10px 16px; text-align: left;">Markdown</th>
+      <th style="border: 1px solid #d9d9d9; padding: 10px 16px; text-align: left;">DangerousMarkdown</th>
+      <th style="border: 1px solid #d9d9d9; padding: 10px 16px; text-align: left;">MarkdownWithCode</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">Basic markdown</td>
+      <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+      <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+      <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+    </tr>
+    <tr style="background: #fafafa;">
+      <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">Inline HTML</td>
+      <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #ff4d4f;">No</td>
+      <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+      <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #ff4d4f;">No</td>
+    </tr>
+    <tr>
+      <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">Code highlighting</td>
+      <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #ff4d4f;">No</td>
+      <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #ff4d4f;">No</td>
+      <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+    </tr>
+    <tr style="background: #fafafa;">
+      <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">DOMPurify sanitization</td>
+      <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">N/A</td>
+      <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+      <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">N/A</td>
+    </tr>
+  </tbody>
+</table>
+
+```yaml
+- id: html_table_styled
+  type: DangerousMarkdown
+  properties:
+    content: >
+      <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
+        <thead>
+          <tr style="background: #fafafa;">
+            <th style="border: 1px solid #d9d9d9; padding: 10px 16px; text-align: left;">Feature</th>
+            <th style="border: 1px solid #d9d9d9; padding: 10px 16px; text-align: left;">Markdown</th>
+            <th style="border: 1px solid #d9d9d9; padding: 10px 16px; text-align: left;">DangerousMarkdown</th>
+            <th style="border: 1px solid #d9d9d9; padding: 10px 16px; text-align: left;">MarkdownWithCode</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">Basic markdown</td>
+            <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+            <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+            <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+          </tr>
+          <tr style="background: #fafafa;">
+            <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">Inline HTML</td>
+            <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #ff4d4f;">No</td>
+            <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+            <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #ff4d4f;">No</td>
+          </tr>
+          <tr>
+            <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">Code highlighting</td>
+            <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #ff4d4f;">No</td>
+            <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #ff4d4f;">No</td>
+            <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+          </tr>
+          <tr style="background: #fafafa;">
+            <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">DOMPurify sanitization</td>
+            <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">N/A</td>
+            <td style="border: 1px solid #d9d9d9; padding: 10px 16px; color: #52c41a;">Yes</td>
+            <td style="border: 1px solid #d9d9d9; padding: 10px 16px;">N/A</td>
+          </tr>
+        </tbody>
+      </table>
+```
+
+<div style="padding: 12px 16px; background-color: #e6f7ff; border-left: 4px solid #1890ff; border-radius: 0 6px 6px 0; margin-bottom: 8px;">
+  <strong>Info:</strong> This is an informational callout created with HTML inside DangerousMarkdown.
+</div>
+
+<div style="padding: 12px 16px; background-color: #f6ffed; border-left: 4px solid #52c41a; border-radius: 0 6px 6px 0; margin-bottom: 8px;">
+  <strong>Success:</strong> Your deployment completed without errors.
+</div>
+
+<div style="padding: 12px 16px; background-color: #fffbe6; border-left: 4px solid #faad14; border-radius: 0 6px 6px 0; margin-bottom: 8px;">
+  <strong>Warning:</strong> Only render trusted content with DangerousMarkdown. Never pass user input directly.
+</div>
+
+<div style="padding: 12px 16px; background-color: #fff1f0; border-left: 4px solid #ff4d4f; border-radius: 0 6px 6px 0;">
+  <strong>Error:</strong> Connection to the database failed. Check your credentials and try again.
+</div>
+
+```yaml
+- id: callout_info
+  type: DangerousMarkdown
+  properties:
+    content: >
+      <div style="padding: 12px 16px; background-color: #e6f7ff; border-left:
+      4px solid #1890ff; border-radius: 0 6px 6px 0; margin-bottom: 8px;">
+        <strong>Info:</strong> This is an informational callout created with HTML inside DangerousMarkdown.
+      </div>
+- id: callout_success
+  type: DangerousMarkdown
+  properties:
+    content: >
+      <div style="padding: 12px 16px; background-color: #f6ffed; border-left:
+      4px solid #52c41a; border-radius: 0 6px 6px 0; margin-bottom: 8px;">
+        <strong>Success:</strong> Your deployment completed without errors.
+      </div>
+- id: callout_warning
+  type: DangerousMarkdown
+  properties:
+    content: >
+      <div style="padding: 12px 16px; background-color: #fffbe6; border-left:
+      4px solid #faad14; border-radius: 0 6px 6px 0; margin-bottom: 8px;">
+        <strong>Warning:</strong> Only render trusted content with DangerousMarkdown. Never pass user input directly.
+      </div>
+- id: callout_error
+  type: DangerousMarkdown
+  properties:
+    content: >
+      <div style="padding: 12px 16px; background-color: #fff1f0; border-left:
+      4px solid #ff4d4f; border-radius: 0 6px 6px 0;">
+        <strong>Error:</strong> Connection to the database failed. Check your credentials and try again.
+      </div>
+```
+
+**Deployment Status:**
+
+<span style="display: inline-block; padding: 2px 10px; background: #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; border-radius: 10px; font-size: 12px; margin-right: 6px;">Active</span>
+<span style="display: inline-block; padding: 2px 10px; background: #fff7e6; color: #fa8c16; border: 1px solid #ffd591; border-radius: 10px; font-size: 12px; margin-right: 6px;">Pending</span>
+<span style="display: inline-block; padding: 2px 10px; background: #fff1f0; color: #ff4d4f; border: 1px solid #ffa39e; border-radius: 10px; font-size: 12px; margin-right: 6px;">Failed</span>
+<span style="display: inline-block; padding: 2px 10px; background: #f0f0f0; color: #8c8c8c; border: 1px solid #d9d9d9; border-radius: 10px; font-size: 12px;">Archived</span>
+
+**Technology Stack:**
+
+<span style="display: inline-block; padding: 3px 10px; background: #e6f7ff; color: #096dd9; border-radius: 4px; font-size: 12px; font-weight: 500; margin: 2px 4px 2px 0;">React</span>
+<span style="display: inline-block; padding: 3px 10px; background: #f9f0ff; color: #531dab; border-radius: 4px; font-size: 12px; font-weight: 500; margin: 2px 4px 2px 0;">Next.js</span>
+<span style="display: inline-block; padding: 3px 10px; background: #fff0f6; color: #c41d7f; border-radius: 4px; font-size: 12px; font-weight: 500; margin: 2px 4px 2px 0;">MongoDB</span>
+<span style="display: inline-block; padding: 3px 10px; background: #fcffe6; color: #5b8c00; border-radius: 4px; font-size: 12px; font-weight: 500; margin: 2px 4px 2px 0;">YAML</span>
+
+```yaml
+- id: badges_status
+  type: DangerousMarkdown
+  properties:
+    content: >
+      **Deployment Status:**
+
+
+      <span style="display: inline-block; padding: 2px 10px; background:
+      #f6ffed; color: #52c41a; border: 1px solid #b7eb8f; border-radius: 10px;
+      font-size: 12px; margin-right: 6px;">Active</span>
+
+      <span style="display: inline-block; padding: 2px 10px; background:
+      #fff7e6; color: #fa8c16; border: 1px solid #ffd591; border-radius: 10px;
+      font-size: 12px; margin-right: 6px;">Pending</span>
+
+      <span style="display: inline-block; padding: 2px 10px; background:
+      #fff1f0; color: #ff4d4f; border: 1px solid #ffa39e; border-radius: 10px;
+      font-size: 12px; margin-right: 6px;">Failed</span>
+
+      <span style="display: inline-block; padding: 2px 10px; background:
+      #f0f0f0; color: #8c8c8c; border: 1px solid #d9d9d9; border-radius: 10px;
+      font-size: 12px;">Archived</span>
+- id: badges_tags
+  type: DangerousMarkdown
+  properties:
+    content: >
+      **Technology Stack:**
+
+
+      <span style="display: inline-block; padding: 3px 10px; background:
+      #e6f7ff; color: #096dd9; border-radius: 4px; font-size: 12px; font-weight:
+      500; margin: 2px 4px 2px 0;">React</span>
+
+      <span style="display: inline-block; padding: 3px 10px; background:
+      #f9f0ff; color: #531dab; border-radius: 4px; font-size: 12px; font-weight:
+      500; margin: 2px 4px 2px 0;">Next.js</span>
+
+      <span style="display: inline-block; padding: 3px 10px; background:
+      #fff0f6; color: #c41d7f; border-radius: 4px; font-size: 12px; font-weight:
+      500; margin: 2px 4px 2px 0;">MongoDB</span>
+
+      <span style="display: inline-block; padding: 3px 10px; background:
+      #fcffe6; color: #5b8c00; border-radius: 4px; font-size: 12px; font-weight:
+      500; margin: 2px 4px 2px 0;">YAML</span>
+```
+
+By default, DOMPurify removes dangerous elements like `<script>` and `<iframe>`.
+
+This `<iframe>` tag will **not** render: <iframe src="https://example.com"></iframe>
+
+Standard HTML like <b>bold</b> and <em>emphasis</em> still works.
+
+With restricted DOMPurifyOptions, only specific tags are allowed.
+
+<b>Bold works</b> and <i>italic works</i>.
+
+But <span style="color: red;">styled spans</span> are stripped because `span` is not in ALLOWED_TAGS and `style` is not in ALLOWED_ATTR.
+
+```yaml
+- id: dompurify_default
+  type: DangerousMarkdown
+  properties:
+    content: >
+      By default, DOMPurify removes dangerous elements like `<script>` and
+      `<iframe>`.
+
+
+      This `<iframe>` tag will **not** render: <iframe
+      src="https://example.com"></iframe>
+
+
+      Standard HTML like <b>bold</b> and <em>emphasis</em> still works.
+- id: dompurify_custom
+  type: DangerousMarkdown
+  properties:
+    DOMPurifyOptions:
+      ALLOWED_TAGS:
+        - b
+        - i
+        - em
+        - strong
+        - p
+        - br
+      ALLOWED_ATTR: []
+    content: >
+      With restricted DOMPurifyOptions, only specific tags are allowed.
+
+
+      <b>Bold works</b> and <i>italic works</i>.
+
+
+      But <span style="color: red;">styled spans</span> are stripped because
+      `span` is not in ALLOWED_TAGS and `style` is not in ALLOWED_ATTR.
+```
+
+### Styled Container
+
+The `element` style key applies CSS to the outer wrapper `div`.
+
+<div style="padding: 8px 12px; background: white; border-radius: 4px; border: 1px solid #ffe58f;">
+  Combine <b>container styles</b> with <b>inline HTML styles</b> for rich layouts.
+</div>
+
+```yaml
+- id: style_element
+  type: DangerousMarkdown
+  style:
+    .element:
+      backgroundColor: "#fff7e6"
+      padding: 16
+      borderRadius: 8
+      border: "1px solid #ffd591"
+  properties:
+    content: >
+      ### Styled Container
+
+
+      The `element` style key applies CSS to the outer wrapper `div`.
+
+
+      <div style="padding: 8px 12px; background: white; border-radius: 4px;
+      border: 1px solid #ffe58f;">
+        Combine <b>container styles</b> with <b>inline HTML styles</b> for rich layouts.
+      </div>
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `content` | string | - | Content in markdown format. |
+| `DOMPurifyOptions` | object | - | Customize DOMPurify options. Options are only applied when the block is mounted, thus any parsed settings is only applied at first render. |
+
+No events defined.
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The DangerousMarkdown element. |
+
+No slots defined.

package/content/display-blocks/diffgit.md

@@ -0,0 +1,44 @@
+# DiffGit
+
+`DiffGit` renders a unified-diff YAML patch between the `before` and `after` objects, with `+` and `-` line prefixes and coloured backgrounds (green for additions, red for removals). Uses stable key-sorted YAML serialisation so the patch output is deterministic. Supports `hide` / `show` glob filtering to strip sensitive or noisy paths before serialising.
+
+```yaml
+- id: diff_git_order
+  type: DiffGit
+  properties:
+    title: Order patch
+    before:
+      order:
+        status: pending
+        total: 10
+        notes:
+          - draft
+    after:
+      order:
+        status: paid
+        total: 15
+        notes:
+          - draft
+          - sent
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `before` | object \| array \| null | - | Previous state. Rendered as stable-sorted YAML; null / undefined serialises to an empty string. |
+| `after` | object \| array \| null | - | New state. Rendered as stable-sorted YAML; null / undefined serialises to an empty string. |
+| `title` | string | - | Optional title rendered above the patch. Supports html. |
+| `emptyText` | string | `"No changes"` | Unused by DiffGit — the renderer always emits its YAML patch output. |
+| `hide` | array | - | Patterns to strip before serialising to YAML. Each entry is an exact dotted path (e.g. `user.email`), a `prefix.*` prefix match, or a `*.leaf` tail match. |
+| `show` | array | - | Allowlist of paths to keep. Same pattern syntax as `hide`. Applied before `hide`. |
+| `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 DiffGit wrapper element. |
+| `/title` | The DiffGit title. |
+| `/group` | The pre element containing the unified diff output. |
+
+No slots defined.

package/content/display-blocks/difflist.md

@@ -0,0 +1,225 @@
+# DiffList
+
+`DiffList` renders a polished, user-friendly diff between a `before` and an `after` object as a grouped table of changes. Built on `microdiff` for the diff engine and antd primitives for rendering, it groups changes by top-level key, tags each row as Added / Removed / Changed, and supports per-path value formatters (`date`, `datetime`, `boolean`, `currency`, `enum`, `json`, `code`), humanised `labels`, and `hide` / `show` glob filtering. All colours come from antd's semantic tokens so dark mode and `theme` overrides work automatically.
+
+```yaml
+- id: diff_list_profile
+  type: DiffList
+  properties:
+    title: Profile updated
+    before:
+      name: Sarah Johnson
+      email: sarah@example.com
+      role: member
+      newsletterOptIn: true
+      lastLoginAt: 2026-01-15T09:24:00Z
+      address:
+        street: 221B Baker Street
+        city: London
+        country: UK
+    after:
+      name: Sarah Johnson
+      email: sarah.johnson@example.com
+      role: admin
+      newsletterOptIn: false
+      lastLoginAt: 2026-04-17T14:05:00Z
+      address:
+        street: 221B Baker Street
+        city: London
+        country: United Kingdom
+    labels:
+      name: Full name
+      email: Email address
+      role: Role
+      newsletterOptIn: Newsletter
+      lastLoginAt: Last login
+      address: Mailing address
+      address.street: Street
+      address.city: City
+      address.country: Country
+    format:
+      lastLoginAt:
+        type: datetime
+        pattern: MMM D, YYYY HH:mm
+      newsletterOptIn:
+        type: boolean
+      role:
+        type: enum
+        map:
+          member:
+            label: Member
+            color: default
+          admin:
+            label: Administrator
+            color: gold
+```
+
+```yaml
+- id: diff_list_order
+  type: DiffList
+  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
+```
+
+```yaml
+- id: diff_list_inventory
+  type: DiffList
+  properties:
+    title: Inventory snapshot
+    showUnchanged: true
+    before:
+      sku: WID-001
+      name: Widget A
+      quantity: 120
+      reorderPoint: 40
+      active: true
+    after:
+      sku: WID-001
+      name: Widget A
+      quantity: 38
+      reorderPoint: 40
+      active: true
+    labels:
+      sku: SKU
+      name: Product
+      quantity: Quantity on hand
+      reorderPoint: Reorder point
+      active: Active
+    format:
+      active:
+        type: boolean
+```
+
+```yaml
+- id: diff_list_empty
+  type: DiffList
+  properties:
+    title: Settings saved
+    emptyText: No changes since last save.
+    before:
+      theme: dark
+      language: en
+    after:
+      theme: dark
+      language: en
+```
+
+```yaml
+- id: diff_list_orders_array
+  type: DiffList
+  properties:
+    title: Orders updated
+    before:
+      orders:
+        - id: ord_1
+          total: 10
+          name: Notebook
+        - id: ord_2
+          total: 5
+          name: Pen
+    after:
+      orders:
+        - id: ord_1
+          total: 20
+          name: Notebook
+        - id: ord_2
+          total: 5
+          name: Pen
+        - id: ord_3
+          total: 99
+          name: Stapler
+    labels:
+      orders: Orders
+      orders.0.total: Total
+    format:
+      orders.*.total:
+        type: currency
+        currency: USD
+```
+
+| 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 (covers array-of-objects + one nested object + a leaf). Lower to compress deeply nested payloads. |
+| `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. Useful for "everything at a glance" views. |
+| `groupByRoot` | boolean | `true` | Group changes by their top-level key. When false, changes render as one flat 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", "address": "Mailing 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 DiffList wrapper element. |
+| `/title` | The DiffList title. |
+| `/group` | A group panel wrapper around changes sharing a top-level key. |
+| `/row` | A single change row label. |
+| `/tag` | The change-type tag element (Added / Removed / Changed / Unchanged). |
+
+No slots defined.