@lowdefy/blocks-basic 0.0.0-experimental-20260914131506 → 0.0.0-experimental-20260925210809

package/dist/blocks/Anchor/meta.js

@@ -65,7 +65,7 @@
                     'string',
                     'object'
                 ],
-                description: "Name of an React-Icon (See <a href='https://react-icons.github.io/react-icons/'>all icons</a>) or properties of an Icon block for anchor icon.",
+                description: "Icon name (a semantic name like edit, or a <a href='https://react-icons.github.io/react-icons/'>React Icons</a> name like LuPencil) or properties of an Icon block for anchor icon.",
                 docs: {
                     displayType: 'icon'
                 }

package/dist/blocks/ClickableHtml/ClickableHtml.js

@@ -0,0 +1,32 @@
+/*
+  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';
+// 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. HtmlComponent finds the target, including inside data-popover
+// content, and prevents the element's default action.
+const ClickableHtml = ({ blockId, classNames, events, properties, methods, styles })=>/*#__PURE__*/ React.createElement(HtmlComponent, {
+        div: true,
+        events: events,
+        html: properties.html,
+        id: blockId,
+        methods: methods,
+        className: classNames?.element,
+        style: styles?.element,
+        onDataEvent: methods.triggerEvent
+    });
+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,180 @@
+# 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
+
+- title: Clickable icons and a popover menu
+  blocks:
+    - id: row_actions
+      type: ClickableHtml
+      properties:
+        html: '<p>Invoice INV-042 <i data-icon="edit" data-event="onEdit" data-id="42" data-tooltip="Edit" style="cursor: pointer"></i> <span data-popover="more" style="cursor: pointer"><i data-icon="more-vertical"></i></span></p><div data-popover-content="more" hidden><p data-event="onDuplicate" data-id="42" style="cursor: pointer; margin: 0 0 8px"><i data-icon="copy"></i> Duplicate</p><p data-event="onDelete" data-id="42" style="cursor: pointer; margin: 0; color: var(--ant-color-error)"><i data-icon="delete"></i> Delete</p></div>'
+      events:
+        onEdit:
+          - id: set_edit
+            type: SetState
+            params:
+              row_actions_last: { _string.concat: ['edit ', { _event: id }] }
+        onDuplicate:
+          - id: set_duplicate
+            type: SetState
+            params:
+              row_actions_last: { _string.concat: ['duplicate ', { _event: id }] }
+        onDelete:
+          - id: set_delete
+            type: SetState
+            params:
+              row_actions_last: { _string.concat: ['delete ', { _event: id }] }
+    - id: row_actions_result
+      type: Html
+      properties:
+        html:
+          _string.concat:
+            - '<p>Last action: <code>'
+            - _state:
+                key: row_actions_last
+                default: 'none yet'
+            - '</code></p>'
+
+- title: Confirm before an event
+  blocks:
+    - id: confirm_actions
+      type: ClickableHtml
+      properties:
+        html: '<p>INV-2026-0042 <i data-icon="delete" data-event="onDelete" data-id="42" data-tooltip="Delete" data-confirm="Delete invoice INV-2026-0042?" style="cursor: pointer; color: var(--ant-color-error)"></i> <span data-event="onArchive" data-id="42" data-confirm style="cursor: pointer; color: var(--ant-color-primary)">Archive</span></p>'
+      events:
+        onDelete:
+          - id: deleted
+            type: SetState
+            params:
+              confirm_last:
+                _string.concat:
+                  - 'deleted '
+                  - _event: id
+        onArchive:
+          - id: archived
+            type: SetState
+            params:
+              confirm_last:
+                _string.concat:
+                  - 'archived '
+                  - _event: id
+    - id: confirm_result
+      type: Html
+      properties:
+        html:
+          _string.concat:
+            - '<p>Last action: <code>'
+            - _state:
+                key: confirm_last
+                default: 'none yet'
+            - '</code></p>'

package/dist/blocks/ClickableHtml/meta.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.
+*/ export default {
+    category: 'display',
+    icons: [],
+    valueType: null,
+    cssKeys: {
+        element: 'The Html element.'
+    },
+    hazards: [
+        {
+            id: 'html-style-stripped',
+            message: 'Content is sanitised with DOMPurify, so <style>, <script> and inline event handlers are removed before render. Clicks are wired through data-event attributes instead of inline handlers.',
+            see: 'display-blocks/clickablehtml'
+        },
+        {
+            id: 'clickable-html-confirm-destructive',
+            message: 'Add data-confirm="Delete this row?" to a data-event element whose event deletes or changes data, so a stray click cannot fire it. Only OK fires the event.',
+            see: 'concepts/html-attributes'
+        }
+    ],
+    // Each clickable element names its event in a data-event attribute, so the
+    // event names this block fires are authored in its html.
+    dynamicEvents: true,
+    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" }. Targets that are not links or buttons become keyboard focusable, and Enter or Space clicks them. A data-event inside popover content fires too, then closes the popover. A link with data-event fires the event and does not navigate. data-confirm="Delete this row?" on a data-event element asks first: only OK fires the event (bare data-confirm asks "Are you sure?"). All Html block attributes work too: data-icon, data-tooltip, data-popover, data-page-id links, data-new-tab, data-tag, data-status, data-time, data-format, data-avatar, data-copy, data-truncate and data-tone. See the HTML attributes docs page.',
+                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/DangerousHtml.js

@@ -13,44 +13,34 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 */ import React from 'react';
-import DOMPurify from 'dompurify';
-import { withBlockDefaults } from '@lowdefy/block-utils';
-import { type } from '@lowdefy/helpers';
+import { HtmlComponent, withBlockDefaults } from '@lowdefy/block-utils';
 let DangerousHtml = class DangerousHtml extends React.Component {
-    sanitize() {
-        const { html, DOMPurifyOptions } = this.props.properties;
+    warnOnOptionsChange() {
+        const { DOMPurifyOptions } = this.props.properties;
         if (!this.warnedOptionsChange && JSON.stringify(DOMPurifyOptions) !== JSON.stringify(this.DOMPurifyOptions)) {
             this.warnedOptionsChange = true;
             console.warn(`DangerousHtml block "${this.props.blockId}": DOMPurifyOptions changed after mount and the change is ignored. The sanitizer options are fixed at the first render; write them as a literal, not from state.`);
         }
-        const htmlString = type.isNone(html) ? '' : html.toString();
-        this.div.innerHTML = DOMPurify.sanitize(htmlString, this.DOMPurifyOptions);
     }
     componentDidMount() {
-        this.sanitize();
+        this.warnOnOptionsChange();
     }
     componentDidUpdate() {
-        this.sanitize();
+        this.warnOnOptionsChange();
     }
     render() {
-        const { blockId, classNames, styles } = this.props;
-        return /*#__PURE__*/ React.createElement("div", {
+        const { blockId, classNames, properties, styles } = this.props;
+        return /*#__PURE__*/ React.createElement(HtmlComponent, {
+            div: true,
+            html: properties.html,
             id: blockId,
-            "data-testid": blockId,
-            ref: (el)=>{
-                if (el) {
-                    this.div = el;
-                }
-            },
             className: classNames?.element,
+            sanitizeOptions: this.DOMPurifyOptions,
             style: styles?.element
         });
     }
     constructor(props){
         super(props);
-        this.div = {
-            innerHTML: ''
-        };
         // The sanitizer options are fixed at mount on purpose: a later, operator-driven
         // value could loosen the sanitizer from state. A change is refused loudly
         // rather than ignored silently.

package/dist/blocks/DangerousHtml/meta.js

@@ -37,7 +37,7 @@
         properties: {
             html: {
                 type: 'string',
-                description: 'Content to be rendered as Html.',
+                description: 'Content to be rendered as Html. The Html block attributes (data-icon, data-tooltip, data-popover, data-page-id links, data-new-tab, data-tag, data-status, data-time, data-format, data-avatar, data-copy, data-truncate, data-tone) work here too, unless DOMPurifyOptions removes data attributes.',
                 docs: {
                     displayType: 'text-area'
                 }

package/dist/blocks/Html/gallery.yaml

@@ -237,3 +237,31 @@
           border: 1px solid var(--ant-color-border)
       properties:
         html: '<h4 style="margin: 0 0 8px 0;">Elevated Block</h4><p style="margin: 0;">Uses bg-elevated token for a surface that adapts to light and dark mode.</p>'
+
+- title: Icons, tooltips and popovers
+  blocks:
+    - id: html_icons
+      type: Html
+      properties:
+        html: '<p><i data-icon="success" style="color: var(--ant-color-success)"></i> Saved <span data-tooltip="Saved to the cloud 2 minutes ago" style="text-decoration: underline dotted">just now</span></p><p><i data-icon="warning" style="color: var(--ant-color-warning)"></i> 3 fields need attention. <span data-popover="fields" style="color: var(--ant-color-primary); cursor: pointer">Which? <i data-icon="chevron-down"></i></span></p><div data-popover-content="fields" hidden><ul style="margin: 0; padding-left: 16px"><li>Email</li><li>Phone</li><li>Address</li></ul></div>'
+
+- title: Links and status tags
+  blocks:
+    - id: html_links_tags
+      type: Html
+      properties:
+        html: '<p><a data-page-id="Button">Button</a> moved to <span data-tag="success">Released</span> · <a data-page-id="theming" data-url-query="section=icons">Theming</a> is <span data-tag="warning">In review</span> · <a href="https://ant.design" data-new-tab>Ant Design</a> <i data-icon="external-link"></i></p><p><span data-status="success">Online</span> &nbsp; <span data-status="processing">Syncing</span> &nbsp; <span data-status="error">Offline</span></p><p><span data-tag>Design</span> <span data-tag>Engineering</span> <span data-tag>Support</span> <span data-tag="purple">Beta</span> <span data-tag="#0f766e">Custom colour</span></p>'
+
+- title: Dates, numbers, avatars and copy
+  blocks:
+    - id: html_time_format
+      type: Html
+      properties:
+        html: '<p><span data-avatar="Jane Doe"></span> Jane Doe updated the invoice <time datetime="2026-01-05T09:30:00Z" data-time="relative"></time> (<time datetime="2026-01-05T09:30:00Z" data-time="D MMM YYYY"></time>) · <span data-format="currency" data-currency="USD">1234.5</span> · <span data-format="percent" data-decimals="1">0.123</span> of target · <span data-format="bytes">1536000</span> attached</p><p>Invoice number <code data-copy>INV-2026-0042</code> · owner <img data-avatar="Sam Smith" src="" style="--lf-avatar-size: 32px"></p>'
+
+- title: Truncation and text tone
+  blocks:
+    - id: html_truncate_tone
+      type: Html
+      properties:
+        html: '<div style="max-width: 320px"><div data-truncate><b>Quarterly report for the northern region, including every branch and its targets</b></div><div data-truncate="2" data-tone="secondary">The report covers revenue, costs and headcount for each branch, compares them with the same quarter last year, and lists the actions each branch manager agreed for the next quarter.</div><div><span data-tone="tertiary">Updated 3 days ago</span> · <span data-tone="success">On track</span> · <span data-tone="quaternary">—</span></div></div>'

package/dist/blocks/Html/meta.js

@@ -24,6 +24,21 @@
             id: 'html-style-stripped',
             message: 'Content is sanitised with DOMPurify, so <style>, <script> and inline event handlers are removed before render. Use DangerousHtml for a trusted <style> block, or style the block through its style and class properties.',
             see: 'display-blocks/html'
+        },
+        {
+            id: 'html-no-click-events',
+            message: 'Html fires no events from its markup: data-event attributes do nothing here. Use ClickableHtml for clickable elements, including icons.',
+            see: 'display-blocks/clickablehtml'
+        },
+        {
+            id: 'html-hardcoded-links',
+            message: 'Link to app pages with <a data-page-id="page-id" data-url-query="key=value">, not <a href="/page-id?key=value">. A hard-coded href reloads the whole app on click, ignores basePath and is not checked by the build. Use data-new-tab, not target="_blank", which sanitising removes.',
+            see: 'concepts/html-attributes'
+        },
+        {
+            id: 'html-inline-status-pills',
+            message: 'Show statuses with <span data-tag="success">Approved</span> or <span data-status="warning">Syncing</span>, not inline-styled pills or hex status colours. data-tag and data-status follow the theme and dark mode and match the ag-grid tag cells.',
+            see: 'concepts/html-attributes'
         }
     ],
     events: {
@@ -35,7 +50,7 @@
         properties: {
             html: {
                 type: 'string',
-                description: 'Content to be rendered as Html.',
+                description: 'Content to be rendered as Html. It understands these attributes: data-icon="edit" renders an icon (a semantic name like edit, delete, warning, or a React Icons name); data-tooltip="Text" shows a tooltip on hover and focus; data-popover="id" toggles a popover showing the element with data-popover-content="id" (mark it hidden); <a data-page-id="page-id" data-url-query="key=value"> links to an app page without reloading (never hard-code href="/page"); data-link opts an existing app-relative <a href="/path"> into the same navigation; data-new-tab opens a link in a new tab (target is stripped by sanitising); data-tag="success" renders a tinted status tag and data-status="success" a status dot (tones success, processing, info, warning, error, default, an antd preset colour, a CSS colour, or any other value to seed a stable colour); <time datetime="ISO" data-time="relative"> renders a date as relative, date, datetime, time or a dayjs format; data-format="currency" data-currency="USD" formats the element\'s number as number, currency, percent, compact or bytes; data-avatar="Jane Doe" renders initials (on an <img>, a fallback for a broken image; never use an avatar image service); data-copy adds a copy button for the element\'s text or the attribute\'s value; data-truncate="2" clamps block text to 1–6 lines with the full text in a tooltip when cut off; data-tone="secondary" colours text with a theme tone (secondary, tertiary, quaternary, success, warning, error, info). See the HTML attributes docs page.',
                 docs: {
                     displayType: 'text-area'
                 }

package/dist/blocks/Icon/Icon.js

@@ -14,5 +14,25 @@
   limitations under the License.
 */ import React from 'react';
 import { withBlockDefaults } from '@lowdefy/block-utils';
-const IconBlock = ({ components: { Icon }, ...props })=>/*#__PURE__*/ React.createElement(Icon, props);
+// An Icon block with an onClick event is a control, so it takes keyboard focus
+// and Enter/Space fire the event like a click. The icon component other blocks
+// render (inside a Button, an Alert) stays untouched: their block is the control.
+const IconBlock = ({ components: { Icon }, events, methods, ...props })=>{
+    const keyboardProps = events.onClick ? {
+        tabIndex: 0,
+        onKeyDown: (event)=>{
+            if (event.key !== 'Enter' && event.key !== ' ') return;
+            event.preventDefault();
+            methods.triggerEvent({
+                name: 'onClick'
+            });
+        }
+    } : {};
+    return /*#__PURE__*/ React.createElement(Icon, {
+        events: events,
+        methods: methods,
+        ...keyboardProps,
+        ...props
+    });
+};
 export default withBlockDefaults(IconBlock);

package/dist/blocks/Icon/gallery.yaml

@@ -12,6 +12,65 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
+- title: Semantic icon names
+  blocks:
+    - id: semantic_add
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: add
+        size: 24
+    - id: semantic_edit
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: edit
+        size: 24
+    - id: semantic_delete
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: delete
+        size: 24
+    - id: semantic_search
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: search
+        size: 24
+    - id: semantic_settings
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: settings
+        size: 24
+    - id: semantic_warning
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: warning
+        size: 24
+    - id: semantic_info
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: info
+        size: 24
+    - id: semantic_success
+      type: Icon
+      layout:
+        flex: 0 0 auto
+      properties:
+        name: success
+        size: 24
+
 - title: Common Icons
   blocks:
     - id: icon_home

package/dist/blocks/Icon/meta.js

@@ -22,7 +22,7 @@
         element: 'The Icon element.'
     },
     events: {
-        onClick: 'Trigger actions when icon is clicked.'
+        onClick: 'Trigger actions when icon is clicked. The icon then takes keyboard focus, and Enter or Space trigger it too.'
     },
     properties: {
         type: 'object',
@@ -38,7 +38,7 @@
             name: {
                 type: 'string',
                 default: 'AiOutlineCloseCircle',
-                description: 'Name of icon to be displayed.'
+                description: 'Name of the icon: a semantic name like edit, delete or warning (add your own with theme.icons.aliases), or a React Icons name like LuPencil.'
             },
             rotate: {
                 type: 'number',

package/dist/blocks/PollingTimer/PollingTimer.js

@@ -0,0 +1,120 @@
+/*
+  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 { useEffect, useRef } from 'react';
+import { type } from '@lowdefy/helpers';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import validateInterval from './validateInterval.js';
+// Headless timer: renders nothing and fires onTick while running. Typically used to poll a
+// request until a background job completes. Each tick is scheduled "interval" ms after the
+// previous onTick actions finish, so a slow chain never overlaps the next tick.
+function PollingTimer({ methods, properties }) {
+    // Validated while rendering so an invalid interval reaches the block error boundary, instead
+    // of throwing from a timeout or visibility listener where nothing surfaces it.
+    validateInterval({
+        interval: properties.interval
+    });
+    const timeoutRef = useRef(null);
+    const scheduledIntervalRef = useRef(null);
+    const inFlightRef = useRef(false);
+    const runningRef = useRef(false);
+    const tickRef = useRef(0);
+    // Methods are registered once, so property changes are read through a ref.
+    const propertiesRef = useRef(properties);
+    propertiesRef.current = properties;
+    function hiddenAndPaused() {
+        if (propertiesRef.current.pauseWhenHidden === false) return false;
+        return document.visibilityState === 'hidden';
+    }
+    function clearScheduledTick() {
+        if (timeoutRef.current === null) return;
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+    }
+    function scheduleTick() {
+        if (!runningRef.current) return;
+        if (timeoutRef.current !== null) return;
+        // A tick in flight schedules the next one when its onTick actions finish.
+        if (inFlightRef.current) return;
+        if (hiddenAndPaused()) return;
+        const { interval } = propertiesRef.current;
+        scheduledIntervalRef.current = interval;
+        timeoutRef.current = setTimeout(tick, interval);
+    }
+    async function tick() {
+        timeoutRef.current = null;
+        tickRef.current += 1;
+        const { maxTicks } = propertiesRef.current;
+        if (type.isInt(maxTicks) && tickRef.current >= maxTicks) {
+            runningRef.current = false;
+        }
+        inFlightRef.current = true;
+        // The engine resolves triggerEvent once the chain finishes, including when an action fails.
+        await methods.triggerEvent({
+            name: 'onTick',
+            event: {
+                tick: tickRef.current
+            }
+        });
+        inFlightRef.current = false;
+        scheduleTick();
+    }
+    function start() {
+        if (runningRef.current) return;
+        tickRef.current = 0;
+        runningRef.current = true;
+        scheduleTick();
+    }
+    function stop() {
+        runningRef.current = false;
+        clearScheduledTick();
+    }
+    function toggle() {
+        if (runningRef.current) {
+            stop();
+            return;
+        }
+        start();
+    }
+    function onVisibilityChange() {
+        if (hiddenAndPaused()) {
+            clearScheduledTick();
+            return;
+        }
+        scheduleTick();
+    }
+    useEffect(()=>{
+        methods.registerMethod('start', start);
+        methods.registerMethod('stop', stop);
+        methods.registerMethod('toggle', toggle);
+        document.addEventListener('visibilitychange', onVisibilityChange);
+        if (properties.autoStart === true) {
+            start();
+        }
+        return ()=>{
+            document.removeEventListener('visibilitychange', onVisibilityChange);
+            stop();
+        };
+    }, []);
+    useEffect(()=>{
+        if (timeoutRef.current === null) return;
+        if (scheduledIntervalRef.current === properties.interval) return;
+        clearScheduledTick();
+        scheduleTick();
+    }, [
+        properties.interval
+    ]);
+    return null;
+}
+export default withBlockDefaults(PollingTimer);

package/dist/blocks/PollingTimer/e2e.js

@@ -0,0 +1,21 @@
+/*
+  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';
+// PollingTimer renders nothing — assert on what onTick does, and use the block wrapper for
+// presence checks.
+const locator = (page, blockId)=>page.locator(`#bl-${escapeId(blockId)}`);
+export default createBlockHelper({
+    locator
+});

package/dist/blocks/PollingTimer/gallery.yaml

@@ -0,0 +1,190 @@
+# 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: Poll Until a Job Is Done
+  blocks:
+    - id: job_timer
+      type: PollingTimer
+      properties:
+        interval: 1000
+      events:
+        onTick:
+          # In an app this is a Request that fetches the job status. Here the job
+          # reports done on the fifth tick.
+          - id: job_timer_set_status
+            type: SetState
+            params:
+              job_status:
+                _if:
+                  test:
+                    _gte:
+                      - _event: tick
+                      - 5
+                  then: done
+                  else: running
+          - id: job_timer_stop_when_done
+            type: CallMethod
+            skip:
+              _ne:
+                - _state: job_status
+                - done
+            params:
+              blockId: job_timer
+              method: stop
+    - id: job_timer_controls
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: job_timer_start
+          type: Button
+          properties:
+            title: Start Job
+            icon: AiOutlinePlayCircle
+          events:
+            onClick:
+              - id: job_timer_set_running
+                type: SetState
+                params:
+                  job_status: running
+              - id: job_timer_call_start
+                type: CallMethod
+                params:
+                  blockId: job_timer
+                  method: start
+        - id: job_timer_status
+          type: Span
+          properties:
+            content:
+              _nunjucks:
+                template: 'Job status: {{ status }}'
+                on:
+                  status:
+                    _if_none:
+                      - _state: job_status
+                      - not started
+
+- title: Start and Stop
+  blocks:
+    - id: manual_timer
+      type: PollingTimer
+      properties:
+        interval: 1000
+      events:
+        onTick:
+          - id: manual_timer_set_tick
+            type: SetState
+            params:
+              manual_ticks:
+                _event: tick
+    - id: manual_timer_controls
+      type: Box
+      layout:
+        gap: 8
+      blocks:
+        - id: manual_timer_start
+          type: Button
+          properties:
+            title: Start
+            icon: AiOutlinePlayCircle
+          events:
+            onClick:
+              - id: manual_timer_call_start
+                type: CallMethod
+                params:
+                  blockId: manual_timer
+                  method: start
+        - id: manual_timer_stop
+          type: Button
+          properties:
+            title: Stop
+            icon: AiOutlinePauseCircle
+          events:
+            onClick:
+              - id: manual_timer_call_stop
+                type: CallMethod
+                params:
+                  blockId: manual_timer
+                  method: stop
+        - id: manual_timer_toggle
+          type: Button
+          properties:
+            title: Toggle
+            icon: AiOutlineSwap
+          events:
+            onClick:
+              - id: manual_timer_call_toggle
+                type: CallMethod
+                params:
+                  blockId: manual_timer
+                  method: toggle
+    - id: manual_timer_ticks
+      type: Span
+      properties:
+        content:
+          _nunjucks:
+            template: 'Ticks: {{ ticks }}'
+            on:
+              ticks:
+                _state: manual_ticks
+
+- title: Auto Start with a Tick Limit
+  blocks:
+    - id: limited_timer
+      type: PollingTimer
+      properties:
+        interval: 1000
+        autoStart: true
+        maxTicks: 5
+      events:
+        onTick:
+          - id: limited_timer_set_tick
+            type: SetState
+            params:
+              limited_ticks:
+                _event: tick
+    - id: limited_timer_ticks
+      type: Span
+      properties:
+        content:
+          _nunjucks:
+            template: 'Ticks: {{ ticks }} of 5'
+            on:
+              ticks:
+                _state: limited_ticks
+
+- title: Keep Ticking in a Hidden Tab
+  blocks:
+    - id: background_timer
+      type: PollingTimer
+      properties:
+        interval: 2000
+        autoStart: true
+        pauseWhenHidden: false
+      events:
+        onTick:
+          - id: background_timer_set_tick
+            type: SetState
+            params:
+              background_ticks:
+                _event: tick
+    - id: background_timer_ticks
+      type: Span
+      properties:
+        content:
+          _nunjucks:
+            template: 'Ticks while this tab was open or hidden: {{ ticks }}'
+            on:
+              ticks:
+                _state: background_ticks

package/dist/blocks/PollingTimer/meta.js

@@ -0,0 +1,61 @@
+/*
+  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,
+    events: {
+        onTick: {
+            description: 'Trigger actions on every tick while the timer is running. The next tick is scheduled `interval` ms after the `onTick` actions finish, so ticks never overlap.',
+            event: {
+                tick: 'The number of ticks since the timer was started, starting at 1.'
+            }
+        }
+    },
+    methods: {
+        start: 'Start the timer and reset the tick count to zero. The first tick fires after `interval` ms. Does nothing if the timer is already running.',
+        stop: 'Stop the timer. If `onTick` actions are running, they finish but no further tick is scheduled. Does nothing if the timer is not running.',
+        toggle: 'Start the timer if it is stopped, stop it if it is running.'
+    },
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            interval: {
+                type: 'integer',
+                minimum: 1,
+                description: 'Milliseconds to wait after the `onTick` actions of one tick finish before the next tick fires. Changing it while the timer is waiting restarts the wait.'
+            },
+            autoStart: {
+                type: 'boolean',
+                default: false,
+                description: 'Start ticking when the block mounts. Off by default, so the timer is started with the `start` method.'
+            },
+            maxTicks: {
+                type: 'integer',
+                minimum: 1,
+                description: 'Stop the timer after this many ticks. The `onTick` event of the last tick is still triggered. Unlimited by default.'
+            },
+            pauseWhenHidden: {
+                type: 'boolean',
+                default: true,
+                description: 'Pause ticking while the browser tab is hidden (`document.visibilityState`), and resume when it becomes visible again. Ticks missed while hidden are not fired on resume; the next tick fires `interval` ms after the tab is visible.'
+            }
+        },
+        required: [
+            'interval'
+        ]
+    }
+};

package/dist/blocks/PollingTimer/validateInterval.js

@@ -0,0 +1,21 @@
+/*
+  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 { type } from '@lowdefy/helpers';
+function validateInterval({ interval }) {
+    if (!type.isInt(interval) || interval < 1) {
+        throw new Error('PollingTimer "interval" should be a positive integer of milliseconds.');
+    }
+}
+export default validateInterval;

package/dist/blocks.js

@@ -14,11 +14,13 @@
   limitations under the License.
 */ export { default as Anchor } from './blocks/Anchor/Anchor.js';
 export { default as Box } from './blocks/Box/Box.js';
+export { default as ClickableHtml } from './blocks/ClickableHtml/ClickableHtml.js';
 export { default as DangerousHtml } from './blocks/DangerousHtml/DangerousHtml.js';
 export { default as Dynamic } from './blocks/Dynamic/Dynamic.js';
 export { default as Html } from './blocks/Html/Html.js';
 export { default as Icon } from './blocks/Icon/Icon.js';
 export { default as Img } from './blocks/Img/Img.js';
 export { default as List } from './blocks/List/List.js';
+export { default as PollingTimer } from './blocks/PollingTimer/PollingTimer.js';
 export { default as Span } from './blocks/Span/Span.js';
 export { default as Throw } from './blocks/Throw/Throw.js';

package/dist/e2e.js

@@ -14,11 +14,13 @@
   limitations under the License.
 */ export { default as Anchor } from './blocks/Anchor/e2e.js';
 export { default as Box } from './blocks/Box/e2e.js';
+export { default as ClickableHtml } from './blocks/ClickableHtml/e2e.js';
 export { default as DangerousHtml } from './blocks/DangerousHtml/e2e.js';
 export { default as Dynamic } from './blocks/Dynamic/e2e.js';
 export { default as Html } from './blocks/Html/e2e.js';
 export { default as Icon } from './blocks/Icon/e2e.js';
 export { default as Img } from './blocks/Img/e2e.js';
 export { default as List } from './blocks/List/e2e.js';
+export { default as PollingTimer } from './blocks/PollingTimer/e2e.js';
 export { default as Span } from './blocks/Span/e2e.js';
 export { default as Throw } from './blocks/Throw/e2e.js';

package/dist/metas.js

@@ -14,11 +14,13 @@
   limitations under the License.
 */ export { default as Anchor } from './blocks/Anchor/meta.js';
 export { default as Box } from './blocks/Box/meta.js';
+export { default as ClickableHtml } from './blocks/ClickableHtml/meta.js';
 export { default as DangerousHtml } from './blocks/DangerousHtml/meta.js';
 export { default as Dynamic } from './blocks/Dynamic/meta.js';
 export { default as Html } from './blocks/Html/meta.js';
 export { default as Icon } from './blocks/Icon/meta.js';
 export { default as Img } from './blocks/Img/meta.js';
 export { default as List } from './blocks/List/meta.js';
+export { default as PollingTimer } from './blocks/PollingTimer/meta.js';
 export { default as Span } from './blocks/Span/meta.js';
 export { default as Throw } from './blocks/Throw/meta.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-basic",
-  "version": "0.0.0-experimental-20260914131506",
+  "version": "0.0.0-experimental-20260925210809",
   "license": "Apache-2.0",
   "description": "Basic html Lowdefy blocks.",
   "homepage": "https://lowdefy.com",
@@ -31,6 +31,9 @@
     "url": "https://github.com/lowdefy/lowdefy.git"
   },
   "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     "./*": "./dist/*",
     "./blocks": "./dist/blocks.js",
@@ -42,17 +45,17 @@
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "0.0.0-experimental-20260914131506",
-    "@lowdefy/helpers": "0.0.0-experimental-20260914131506",
-    "dompurify": "3.4.2"
+    "@lowdefy/block-utils": "0.0.0-experimental-20260925210809",
+    "@lowdefy/helpers": "0.0.0-experimental-20260925210809",
+    "dompurify": "3.4.13"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "0.0.0-experimental-20260914131506",
-    "@lowdefy/e2e-utils": "0.0.0-experimental-20260914131506",
+    "@lowdefy/block-dev-e2e": "0.0.0-experimental-20260925210809",
+    "@lowdefy/e2e-utils": "0.0.0-experimental-20260925210809",
     "@playwright/test": "1.59.1",
     "@swc/cli": "0.8.1",
     "@swc/core": "1.15.32",