@lowdefy/blocks-basic 5.6.0 → 6.1.0

package/dist/blocks/Box/tests/Box.e2e.yaml

@@ -0,0 +1,78 @@
+# 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.
+
+id: box
+type: Box
+properties:
+  style:
+    padding: 20px
+
+blocks:
+  # Test 1: Basic Box renders
+  - id: box_basic
+    type: Box
+
+  # Test 2: Box with content property
+  - id: box_content
+    type: Box
+    properties:
+      content: Hello from Box
+
+  # Test 3: Box with style property
+  - id: box_styled
+    type: Box
+    properties:
+      content: Styled Box
+      style:
+        backgroundColor: rgb(0, 128, 255)
+        color: white
+        padding: 10px
+
+  # Test 4: Box with nested child block
+  - id: box_with_children
+    type: Box
+    blocks:
+      - id: child_span
+        type: Span
+        properties:
+          content: Child content
+
+  # Test 5: Box with dotted block ID (regression test for CSS selector escaping)
+  - id: form.field.name
+    type: Box
+    properties:
+      content: Dotted ID Box
+
+  # Test 6: Box with onClick event using SetState
+  - id: box_clickable
+    type: Box
+    properties:
+      content:
+        _if:
+          test:
+            _eq:
+              - _state: clicked
+              - true
+          then: Clicked!
+          else: Click me
+      style:
+        cursor: pointer
+        padding: 10px
+        border: 1px solid gray
+    events:
+      onClick:
+        - id: set_clicked
+          type: SetState
+          params:
+            clicked: true

package/dist/blocks/Box/tests.yaml

@@ -0,0 +1,43 @@
+# 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.
+
+- id: default
+  type: Box
+- id: properties.content
+  type: Box
+  properties:
+    content: Foo
+- id: properties.style
+  type: Box
+  properties:
+    style:
+      border: '1px solid blue'
+- id: areas.content
+  type: Box
+  areas:
+    content:
+      blocks:
+        - id: testArea
+          type: Test
+- id: events.onClick
+  type: Box
+  areas:
+    content:
+      blocks:
+        - id: testArea
+          type: Test
+  events:
+    onClick:
+      - id: testAction
+        type: Text

package/dist/blocks/ClickableHtml/ClickableHtml.js

@@ -0,0 +1,53 @@
+/*
+  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.
+*/ import React from 'react';
+import { withBlockDefaults, HtmlComponent } from '@lowdefy/block-utils';
+// dataset keys are camelCase (data-record-id → recordId); config authors
+// write the attributes in kebab-case, so hand them back as snake_case.
+function toSnakeCase(key) {
+    return key.replace(/[A-Z]/g, (match)=>`_${match.toLowerCase()}`);
+}
+const ClickableHtml = ({ blockId, classNames, events, properties, methods, styles })=>{
+    // Each clickable element names the event it fires in its data-event
+    // attribute (data-event="onEditClick" → events.onEditClick), so every
+    // target in the markup has its own action chain. Its other data-*
+    // attributes are the event object.
+    function onClick(clickEvent) {
+        const target = clickEvent.target.closest('[data-event]');
+        if (!target || !clickEvent.currentTarget.contains(target)) return;
+        const { event: name, ...data } = target.dataset;
+        if (!name) return;
+        clickEvent.preventDefault();
+        const event = {};
+        Object.keys(data).forEach((key)=>{
+            event[toSnakeCase(key)] = data[key];
+        });
+        methods.triggerEvent({
+            name,
+            event
+        });
+    }
+    return /*#__PURE__*/ React.createElement(HtmlComponent, {
+        div: true,
+        events: events,
+        html: properties.html,
+        id: blockId,
+        methods: methods,
+        className: classNames?.element,
+        style: styles?.element,
+        onClick: onClick
+    });
+};
+export default withBlockDefaults(ClickableHtml);

package/dist/blocks/ClickableHtml/e2e.js

@@ -0,0 +1,23 @@
+/*
+  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.
+*/ import { createBlockHelper, escapeId } from '@lowdefy/e2e-utils';
+import { expect } from '@playwright/test';
+const locator = (page, blockId)=>page.locator(`#${escapeId(blockId)}`);
+export default createBlockHelper({
+    locator,
+    expect: {
+        containsText: (page, blockId, text)=>expect(locator(page, blockId)).toContainText(text)
+    }
+});

package/dist/blocks/ClickableHtml/gallery.yaml

@@ -0,0 +1,113 @@
+# 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: A named event per button
+  blocks:
+    - id: buttons_basic
+      type: ClickableHtml
+      properties:
+        html: '<p>Pick a size: <button data-event="onSmallClick">Small</button> <button data-event="onLargeClick">Large</button></p>'
+      events:
+        onSmallClick:
+          - id: set_small
+            type: SetState
+            params:
+              buttons_basic_selected: small
+        onLargeClick:
+          - id: set_large
+            type: SetState
+            params:
+              buttons_basic_selected: large
+    - id: buttons_basic_result
+      type: Html
+      properties:
+        html:
+          _string.concat:
+            - '<p>State: <code>'
+            - _state:
+                key: buttons_basic_selected
+                default: 'nothing yet'
+            - '</code></p>'
+
+- title: Data attributes are the event object
+  blocks:
+    - id: list_rows
+      type: ClickableHtml
+      properties:
+        html: '<ul style="list-style: none; padding: 0; margin: 0;"><li data-event="onRowClick" data-record-id="rec_1" style="padding: 8px; cursor: pointer; border-bottom: 1px solid var(--ant-color-border);">First record</li><li data-event="onRowClick" data-record-id="rec_2" style="padding: 8px; cursor: pointer; border-bottom: 1px solid var(--ant-color-border);">Second record</li><li data-event="onRowClick" data-record-id="rec_3" style="padding: 8px; cursor: pointer;">Third record</li></ul>'
+      events:
+        onRowClick:
+          - id: set_clicked
+            type: SetState
+            params:
+              list_rows_clicked:
+                _event: true
+    - id: list_rows_result
+      type: Html
+      properties:
+        html:
+          _string.concat:
+            - '<p>Last event: <code>'
+            - _json.stringify:
+                _state:
+                  key: list_rows_clicked
+                  default: {}
+            - '</code></p>'
+
+- title: Links and plain markup are left to the browser
+  blocks:
+    - id: mixed_content
+      type: ClickableHtml
+      properties:
+        html: '<p>This <a href="https://lowdefy.com" target="_blank">link</a> navigates normally, but <a href="#" data-event="onCommentClick" data-thread-id="t_9">this one</a> fires onCommentClick instead.</p>'
+      events:
+        onCommentClick:
+          - id: set_mixed
+            type: SetState
+            params:
+              mixed_content_thread:
+                _event: thread_id
+    - id: mixed_content_result
+      type: Html
+      properties:
+        html:
+          _string.concat:
+            - '<p>Thread: <code>'
+            - _state:
+                key: mixed_content_thread
+                default: 'none'
+            - '</code></p>'
+
+- title: Style Overrides
+  blocks:
+    - id: style_card
+      type: ClickableHtml
+      style:
+        .element:
+          padding: 16
+          borderRadius: 8
+          border: 1px solid var(--ant-color-border)
+          background: var(--ant-color-bg-container)
+      properties:
+        html: '<h4 style="margin: 0 0 8px 0;">Card</h4><p style="margin: 0 0 8px 0; color: var(--ant-color-text-secondary);">Yours to change or remove until tomorrow.</p><button data-event="onEditClick">Edit</button> <button data-event="onRemoveClick">Remove</button>'
+      events:
+        onEditClick:
+          - id: set_card_edit
+            type: SetState
+            params:
+              style_card_action: edit
+        onRemoveClick:
+          - id: set_card_remove
+            type: SetState
+            params:
+              style_card_action: remove

package/dist/blocks/ClickableHtml/meta.js

@@ -0,0 +1,40 @@
+/*
+  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.
+*/ export default {
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The Html element.'
+    },
+    // Each clickable element names its event in a data-event attribute, so the
+    // event names this block fires are authored in its html.
+    events: {
+        onTextSelection: 'Trigger action when text is selected and pass selected text to the event object.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            html: {
+                type: 'string',
+                description: 'Content to be rendered as Html. An element with a data-event attribute fires the event it names when clicked (data-event="onEditClick" fires events.onEditClick), and its default browser action is prevented. The event object holds the element\'s other data-* attributes with snake_case keys, so data-event="onEditClick" data-record-id="42" gives { record_id: "42" }.',
+                docs: {
+                    displayType: 'text-area'
+                }
+            }
+        }
+    }
+};

package/dist/blocks/ClickableHtml/tests/ClickableHtml.e2e.yaml

@@ -0,0 +1,69 @@
+# 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.
+id: clickablehtml
+type: Box
+
+blocks:
+  - id: clickable_basic
+    type: ClickableHtml
+    properties:
+      html: '<p>Hello <button data-event="onGreetClick" data-user-id="u_1">World</button> <button data-event="onWaveClick" data-user-id="u_2">Wave</button></p>'
+    events:
+      onGreetClick:
+        - id: set_greeted
+          type: SetState
+          params:
+            clicked:
+              event: greet
+              user_id:
+                _event: user_id
+      onWaveClick:
+        - id: set_waved
+          type: SetState
+          params:
+            clicked:
+              event: wave
+              user_id:
+                _event: user_id
+
+  - id: clickable_result
+    type: Html
+    properties:
+      html:
+        _string.concat:
+          - '<span id="clicked_event">'
+          - _state:
+              key: clicked.event
+              default: ''
+          - '</span><span id="clicked_user_id">'
+          - _state:
+              key: clicked.user_id
+              default: ''
+          - '</span>'
+
+  - id: clickable_no_event
+    type: ClickableHtml
+    properties:
+      html: '<p><button>Plain button</button></p>'
+    events:
+      onPlainClick:
+        - id: set_plain
+          type: SetState
+          params:
+            plain_clicked: true
+
+  - id: clickable_sanitized
+    type: ClickableHtml
+    properties:
+      html: <p>Safe content</p><script>alert('xss')</script>

package/dist/blocks/ClickableHtml/tests.yaml

@@ -0,0 +1,35 @@
+# 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.
+- id: default
+  type: ClickableHtml
+- id: properties.html
+  type: ClickableHtml
+  properties:
+    html: |
+      <p>Plain markup <button data-event="onGoClick" data-item-id="1">Go</button></p>
+- id: properties.html-no-events
+  type: ClickableHtml
+  properties:
+    html: |
+      <p>No data-event here, clicks do nothing.</p>
+- id: properties.html-bad-code
+  type: ClickableHtml
+  properties:
+    html: |
+      <button data-event="onOkClick" onclick="alert('inline handler stripped')">Ok</button>
+      <script>alert('script tag');</script>
+- id: properties.html is number 0
+  type: ClickableHtml
+  properties:
+    html: 0

package/dist/blocks/DangerousHtml/gallery.yaml

@@ -0,0 +1,182 @@
+# 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 HTML
+  blocks:
+    - id: basic_paragraph
+      type: DangerousHtml
+      properties:
+        html: '<p>This is a basic paragraph rendered as HTML.</p>'
+    - id: basic_heading
+      type: DangerousHtml
+      properties:
+        html: '<h3>Heading rendered with DangerousHtml</h3>'
+    - id: basic_link
+      type: DangerousHtml
+      properties:
+        html: '<p>Visit <a href="https://lowdefy.com" target="_blank" rel="noopener noreferrer">Lowdefy</a> for more info.</p>'
+    - id: basic_multiple_headings
+      type: DangerousHtml
+      properties:
+        html: '<h4>Section Title</h4><p>Some paragraph text below the heading.</p><h5>Sub-section</h5><p>More text in the sub-section.</p>'
+
+- title: Styled HTML
+  blocks:
+    - id: styled_colored
+      type: DangerousHtml
+      properties:
+        html: '<p style="color: var(--ant-color-primary); font-weight: bold; font-size: 18px;">Blue bold text with inline styles</p>'
+    - id: styled_box_success
+      type: DangerousHtml
+      properties:
+        html: '<div style="padding: 16px; background-color: var(--ant-color-success-bg); border: 1px solid var(--ant-color-success-border); border-radius: 6px;"><strong>Success:</strong> Your changes have been saved.</div>'
+    - id: styled_box_warning
+      type: DangerousHtml
+      properties:
+        html: '<div style="padding: 16px; background-color: var(--ant-color-warning-bg); border: 1px solid var(--ant-color-warning-border); border-radius: 6px;"><strong>Warning:</strong> Please review your settings before proceeding.</div>'
+    - id: styled_box_error
+      type: DangerousHtml
+      properties:
+        html: '<div style="padding: 16px; background-color: var(--ant-color-error-bg); border: 1px solid var(--ant-color-error-border); border-radius: 6px;"><strong>Error:</strong> Unable to complete the operation.</div>'
+    - id: styled_box_info
+      type: DangerousHtml
+      properties:
+        html: '<div style="padding: 16px; background-color: var(--ant-color-info-bg); border: 1px solid var(--ant-color-info-border); border-radius: 6px;"><strong>Info:</strong> The system will undergo maintenance at midnight.</div>'
+
+- title: Lists
+  blocks:
+    - id: list_unordered
+      type: DangerousHtml
+      properties:
+        html: '<ul style="list-style-type: disc; padding-left: 20px;"><li>First item</li><li>Second item</li><li>Third item</li></ul>'
+    - id: list_ordered
+      type: DangerousHtml
+      properties:
+        html: '<ol style="padding-left: 20px;"><li>Step one</li><li>Step two</li><li>Step three</li></ol>'
+    - id: list_colored
+      type: DangerousHtml
+      properties:
+        html: '<ul style="list-style-type: disc; padding-left: 20px;"><li style="color: var(--ant-color-success);">Completed</li><li style="color: var(--ant-color-warning);">In Progress</li><li style="color: var(--ant-color-error);">Overdue</li></ul>'
+    - id: list_nested
+      type: DangerousHtml
+      properties:
+        html: '<ul style="padding-left: 20px;"><li>Parent item<ul style="padding-left: 20px;"><li>Child item 1</li><li>Child item 2</li></ul></li><li>Another parent item</li></ul>'
+    - id: list_definition
+      type: DangerousHtml
+      properties:
+        html: '<dl><dt style="font-weight: bold;">Term 1</dt><dd style="margin-left: 20px; color: var(--ant-color-text-secondary);">Definition of the first term.</dd><dt style="font-weight: bold;">Term 2</dt><dd style="margin-left: 20px; color: var(--ant-color-text-secondary);">Definition of the second term.</dd></dl>'
+
+- title: HTML Table
+  blocks:
+    - id: table_simple
+      type: DangerousHtml
+      properties:
+        html: '<table style="width: 100%; border-collapse: collapse;"><thead><tr><th style="border: 1px solid var(--ant-color-border); padding: 8px; background: var(--ant-color-fill-quaternary); text-align: left;">Name</th><th style="border: 1px solid var(--ant-color-border); padding: 8px; background: var(--ant-color-fill-quaternary); text-align: left;">Role</th><th style="border: 1px solid var(--ant-color-border); padding: 8px; background: var(--ant-color-fill-quaternary); text-align: left;">Status</th></tr></thead><tbody><tr><td style="border: 1px solid var(--ant-color-border); padding: 8px;">Alice</td><td style="border: 1px solid var(--ant-color-border); padding: 8px;">Developer</td><td style="border: 1px solid var(--ant-color-border); padding: 8px;">Active</td></tr><tr><td style="border: 1px solid var(--ant-color-border); padding: 8px;">Bob</td><td style="border: 1px solid var(--ant-color-border); padding: 8px;">Designer</td><td style="border: 1px solid var(--ant-color-border); padding: 8px;">Active</td></tr><tr><td style="border: 1px solid var(--ant-color-border); padding: 8px;">Charlie</td><td style="border: 1px solid var(--ant-color-border); padding: 8px;">Manager</td><td style="border: 1px solid var(--ant-color-border); padding: 8px;">Away</td></tr></tbody></table>'
+    - id: table_striped
+      type: DangerousHtml
+      properties:
+        html: '<table style="width: 100%; border-collapse: collapse;"><thead><tr><th style="border: 1px solid var(--ant-color-border); padding: 10px; background: var(--ant-color-primary); color: white; text-align: left;">Product</th><th style="border: 1px solid var(--ant-color-border); padding: 10px; background: var(--ant-color-primary); color: white; text-align: right;">Price</th><th style="border: 1px solid var(--ant-color-border); padding: 10px; background: var(--ant-color-primary); color: white; text-align: center;">Stock</th></tr></thead><tbody><tr><td style="border: 1px solid var(--ant-color-border); padding: 10px;">Widget A</td><td style="border: 1px solid var(--ant-color-border); padding: 10px; text-align: right;">$29.99</td><td style="border: 1px solid var(--ant-color-border); padding: 10px; text-align: center;">150</td></tr><tr style="background: var(--ant-color-fill-quaternary);"><td style="border: 1px solid var(--ant-color-border); padding: 10px;">Widget B</td><td style="border: 1px solid var(--ant-color-border); padding: 10px; text-align: right;">$49.99</td><td style="border: 1px solid var(--ant-color-border); padding: 10px; text-align: center;">85</td></tr><tr><td style="border: 1px solid var(--ant-color-border); padding: 10px;">Widget C</td><td style="border: 1px solid var(--ant-color-border); padding: 10px; text-align: right;">$19.99</td><td style="border: 1px solid var(--ant-color-border); padding: 10px; text-align: center;">320</td></tr></tbody></table>'
+
+- title: Embedded Media Placeholders
+  blocks:
+    - id: media_video_placeholder
+      type: DangerousHtml
+      properties:
+        html: '<div style="width: 100%; max-width: 560px; aspect-ratio: 16/9; background: var(--ant-color-fill-tertiary); border: 2px dashed var(--ant-color-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--ant-color-text-tertiary); font-size: 16px;">Video Placeholder (16:9)</div>'
+    - id: media_iframe_placeholder
+      type: DangerousHtml
+      properties:
+        html: '<div style="width: 100%; max-width: 400px; height: 300px; background: var(--ant-color-fill-quaternary); border: 2px dashed var(--ant-color-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--ant-color-text-tertiary);">Embedded Content Area</div>'
+
+- title: Complex Layout
+  blocks:
+    - id: layout_card
+      type: DangerousHtml
+      properties:
+        html: '<div style="max-width: 400px; border: 1px solid var(--ant-color-border); border-radius: 8px; overflow: hidden;"><div style="padding: 16px; background: var(--ant-color-fill-quaternary); border-bottom: 1px solid var(--ant-color-border);"><h4 style="margin: 0;">Card Title</h4></div><div style="padding: 16px;"><p style="margin: 0 0 12px 0; color: var(--ant-color-text-secondary);">This is a card-like layout created purely with HTML and inline styles.</p><div style="display: flex; gap: 8px;"><span style="background: var(--ant-color-primary-bg); color: var(--ant-color-primary); padding: 2px 8px; border-radius: 4px; font-size: 12px;">Tag 1</span><span style="background: var(--ant-color-success-bg); color: var(--ant-color-success); padding: 2px 8px; border-radius: 4px; font-size: 12px;">Tag 2</span></div></div></div>'
+    - id: layout_flex_row
+      type: DangerousHtml
+      properties:
+        html: '<div style="display: flex; gap: 16px; flex-wrap: wrap;"><div style="flex: 1; min-width: 150px; padding: 16px; background: var(--ant-color-primary-bg); border-radius: 8px; text-align: center;"><div style="font-size: 24px; font-weight: bold; color: var(--ant-color-primary);">42</div><div style="color: var(--ant-color-text-secondary); font-size: 12px;">Active Users</div></div><div style="flex: 1; min-width: 150px; padding: 16px; background: var(--ant-color-success-bg); border-radius: 8px; text-align: center;"><div style="font-size: 24px; font-weight: bold; color: var(--ant-color-success);">128</div><div style="color: var(--ant-color-text-secondary); font-size: 12px;">Completed</div></div><div style="flex: 1; min-width: 150px; padding: 16px; background: var(--ant-color-warning-bg); border-radius: 8px; text-align: center;"><div style="font-size: 24px; font-weight: bold; color: var(--ant-color-warning);">7</div><div style="color: var(--ant-color-text-secondary); font-size: 12px;">Pending</div></div></div>'
+    - id: layout_timeline
+      type: DangerousHtml
+      properties:
+        html: '<div style="padding-left: 20px; border-left: 2px solid var(--ant-color-primary);"><div style="position: relative; padding-bottom: 16px;"><div style="position: absolute; left: -26px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ant-color-primary);"></div><div style="font-weight: bold;">Step 1: Setup</div><div style="color: var(--ant-color-text-secondary); font-size: 13px;">Configure your project settings.</div></div><div style="position: relative; padding-bottom: 16px;"><div style="position: absolute; left: -26px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ant-color-primary);"></div><div style="font-weight: bold;">Step 2: Build</div><div style="color: var(--ant-color-text-secondary); font-size: 13px;">Run the build pipeline.</div></div><div style="position: relative;"><div style="position: absolute; left: -26px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ant-color-border);"></div><div style="font-weight: bold; color: var(--ant-color-text-tertiary);">Step 3: Deploy</div><div style="color: var(--ant-color-text-quaternary); font-size: 13px;">Deploy to production.</div></div></div>'
+
+- title: DOMPurify Options
+  blocks:
+    - id: purify_default_label
+      type: Markdown
+      properties:
+        content: '**Default (scripts and event handlers stripped):**'
+    - id: purify_default
+      type: DangerousHtml
+      properties:
+        html: '<p>Safe content rendered. <script>alert("removed")</script></p>'
+    - id: purify_allow_target_label
+      type: Markdown
+      properties:
+        content: '**With ADD_ATTR to allow target attribute:**'
+    - id: purify_allow_target
+      type: DangerousHtml
+      properties:
+        html: '<a href="https://lowdefy.com" target="_blank">Link with target=_blank allowed</a>'
+        DOMPurifyOptions:
+          ADD_ATTR:
+            - target
+
+- title: Style Overrides
+  blocks:
+    - id: style_padded
+      type: DangerousHtml
+      style:
+        .element:
+          padding: 20
+          background: var(--ant-color-fill-quaternary)
+          borderRadius: 8
+          border: 1px solid var(--ant-color-border)
+      properties:
+        html: '<p style="margin: 0;">Content inside a styled DangerousHtml container with padding and background.</p>'
+    - id: style_max_width
+      type: DangerousHtml
+      style:
+        .element:
+          maxWidth: 400
+          margin: 0 auto
+          padding: 16
+          background: var(--ant-color-primary-bg)
+          borderRadius: 8
+          textAlign: center
+      properties:
+        html: '<p style="margin: 0; color: var(--ant-color-primary); font-weight: bold;">Centered container with max-width constraint.</p>'
+    - id: style_shadow
+      type: DangerousHtml
+      style:
+        .element:
+          padding: 20
+          borderRadius: 12
+          boxShadow: var(--ant-box-shadow)
+          background: var(--ant-color-bg-container)
+      properties:
+        html: '<h4 style="margin: 0 0 8px 0;">Elevated Card</h4><p style="margin: 0; color: var(--ant-color-text-secondary);">A DangerousHtml block styled with a box shadow for an elevated card appearance.</p>'
+    - id: style_border_left
+      type: DangerousHtml
+      style:
+        .element:
+          borderLeft: 4px solid var(--ant-color-primary)
+          paddingLeft: 16
+          paddingTop: 8
+          paddingBottom: 8
+      properties:
+        html: '<p style="margin: 0; color: var(--ant-color-primary); font-weight: 500;">Highlighted with a primary color left border accent.</p>'