@lowdefy/blocks-basic 0.0.0-experimental-20260829192306 → 0.0.0-experimental-20260830202815

package/dist/blocks/Box/Box.js

@@ -21,8 +21,11 @@ const Box = ({ blockId, classNames, content, events, methods, properties, styles
         onClick: ()=>methods.triggerEvent({
                 name: 'onClick'
             }),
-        onPaste: ()=>methods.triggerEvent({
-                name: 'onPaste'
+        onPaste: (e)=>methods.triggerEvent({
+                name: 'onPaste',
+                event: {
+                    text: e.clipboardData.getData('text')
+                }
             }),
         className: classNames?.element,
         style: {

package/dist/blocks/Box/meta.js

@@ -24,7 +24,19 @@
     },
     events: {
         onClick: 'Trigger actions when the Box is clicked.',
-        onPaste: 'Trigger actions when the element is focused and a paste event is triggered.'
+        onPaste: {
+            description: 'Trigger actions when the element is focused and a paste event is triggered.',
+            payload: {
+                type: 'object',
+                additionalProperties: false,
+                properties: {
+                    text: {
+                        type: 'string',
+                        description: 'The pasted plain text.'
+                    }
+                }
+            }
+        }
     },
     properties: {
         type: 'object',

package/dist/blocks/DangerousHtml/meta.js

@@ -19,6 +19,18 @@
     cssKeys: {
         element: 'The DangerousHtml element.'
     },
+    hazards: [
+        {
+            id: 'dangerous-html-unsanitised',
+            message: 'Content is rendered without sanitising, so never pass caller-supplied or database HTML through it. Use Html for anything a user could have written.',
+            see: 'display-blocks/dangeroushtml'
+        },
+        {
+            id: 'dompurify-options-first-render',
+            message: 'DOMPurifyOptions is read once when the block mounts, so a value that changes after the first render has no effect. Set it statically or remount the block.',
+            see: 'display-blocks/dangeroushtml'
+        }
+    ],
     properties: {
         type: 'object',
         additionalProperties: false,

package/dist/blocks/Html/meta.js

@@ -19,8 +19,27 @@
     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. Use DangerousHtml for a trusted <style> block, or style the block through its style and class properties.',
+            see: 'display-blocks/html'
+        }
+    ],
     events: {
-        onTextSelection: 'Trigger action when text is selected and pass selected text to the event object.'
+        onTextSelection: {
+            description: 'Trigger action when text is selected.',
+            payload: {
+                type: 'object',
+                additionalProperties: false,
+                properties: {
+                    selection: {
+                        type: 'string',
+                        description: 'The selected text.'
+                    }
+                }
+            }
+        }
     },
     properties: {
         type: 'object',

package/dist/blocks/Template/Template.js

@@ -0,0 +1,64 @@
+/*
+  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, { useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import DOMPurify from 'dompurify';
+import { withBlockDefaults } from '@lowdefy/block-utils';
+import { type } from '@lowdefy/helpers';
+import { createTemplateFunction } from '@lowdefy/nunjucks';
+function renderTemplateHtml({ template, context }) {
+    if (type.isNone(template)) return '';
+    const render = createTemplateFunction(template);
+    const value = type.isObject(context) ? context : {
+        value: context
+    };
+    // DOMPurify keeps data-* attributes, so the {% slot %} markers survive; <style> and <script>
+    // do not, which is why CSS goes through properties.css.
+    return DOMPurify.sanitize(render(value));
+}
+const TemplateBlock = ({ blockId, classNames, content = {}, properties, styles })=>{
+    const containerRef = useRef(null);
+    const [slotNodes, setSlotNodes] = useState({});
+    const html = renderTemplateHtml({
+        template: properties.template,
+        context: properties.context
+    });
+    // Assigning innerHTML destroys the previous slot containers, so the portal targets are
+    // re-read from the new DOM on every change of the rendered html.
+    useLayoutEffect(()=>{
+        const el = containerRef.current;
+        el.innerHTML = html;
+        const nodes = {};
+        el.querySelectorAll('[data-ldf-slot]').forEach((node)=>{
+            nodes[node.getAttribute('data-ldf-slot')] = node;
+        });
+        setSlotNodes(nodes);
+    }, [
+        html
+    ]);
+    const hasCss = type.isString(properties.css) && properties.css.trim() !== '';
+    return /*#__PURE__*/ React.createElement("div", {
+        id: blockId,
+        "data-testid": blockId,
+        className: classNames?.element,
+        style: styles?.element
+    }, hasCss && /*#__PURE__*/ React.createElement("style", null, `#bl-${blockId} { ${properties.css} }`), /*#__PURE__*/ React.createElement("div", {
+        ref: containerRef
+    }), Object.keys(slotNodes).map((name)=>{
+        if (!content[name]) return null;
+        return /*#__PURE__*/ createPortal(content[name](), slotNodes[name], name);
+    }));
+};
+export default withBlockDefaults(TemplateBlock);

package/dist/blocks/Template/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/Template/gallery.yaml

@@ -0,0 +1,143 @@
+# 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 Template
+  blocks:
+    - id: basic_plain
+      type: Template
+      properties:
+        context:
+          name: Lowdefy
+        template: '<p>Hello <strong>{{ name }}</strong> from a Template block.</p>'
+    - id: basic_primitive_context
+      type: Template
+      properties:
+        context: 42
+        template: '<p>A primitive context is available as <code>value</code>: {{ value }}</p>'
+    - id: basic_conditional
+      type: Template
+      properties:
+        context:
+          status: active
+        template: |
+          {% if status == "active" %}<p>Status is <strong>active</strong>.</p>{% else %}<p>Inactive.</p>{% endif %}
+
+- title: Escaping
+  blocks:
+    - id: escaping_default
+      type: Template
+      properties:
+        context:
+          untrusted: '<img src=x onerror=alert(1)><b>bold?</b>'
+        template: '<p>Escaped by default: {{ untrusted }}</p>'
+    - id: escaping_safe
+      type: Template
+      properties:
+        context:
+          markup: 'Trusted <b>bold</b> and <em>italic</em> markup'
+        template: '<p>With <code>| safe</code>: {{ markup | safe }}</p>'
+
+- title: Loops
+  blocks:
+    - id: loop_rows
+      type: Template
+      properties:
+        context:
+          rows:
+            - label: Name
+              value: Ada Lovelace
+            - label: Born
+              value: 1815
+            - label: Field
+              value: Mathematics
+        css: |
+          .row { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--ant-color-border); }
+          .row .label { color: var(--ant-color-text-secondary); min-width: 60px; }
+        template: |
+          {% for row in rows %}
+          <div class="row"><span class="label">{{ row.label }}</span><span>{{ row.value }}</span></div>
+          {% endfor %}
+    - id: loop_list
+      type: Template
+      properties:
+        context:
+          items: [alpha, beta, gamma]
+        template: |
+          <ol>{% for item in items %}<li>{{ loop.index }}. {{ item }}</li>{% endfor %}</ol>
+
+- title: Scoped Style
+  blocks:
+    - id: scoped_style_red
+      type: Template
+      properties:
+        css: |
+          color: var(--ant-color-error);
+          .tag { background: var(--ant-color-error-bg); padding: 2px 6px; border-radius: 4px; }
+        template: '<p>This block has a red <span class="tag">tag</span> style.</p>'
+    - id: scoped_style_sibling
+      type: Template
+      properties:
+        template: '<p>This sibling block shares the <span class="tag">tag</span> class but is not styled by the block above.</p>'
+
+- title: Tailwind Classes
+  blocks:
+    - id: tailwind_card
+      type: Template
+      properties:
+        context:
+          title: Tailwind in a template
+        template: |
+          <div class="rounded-lg border border-gray-300 p-4 shadow-sm">
+            <h3 class="text-lg font-semibold">{{ title }}</h3>
+            <p class="text-sm text-gray-500">Classes written in the template are scanned by Tailwind at build.</p>
+          </div>
+
+- title: Slots
+  blocks:
+    - id: slot_card
+      type: Template
+      properties:
+        context:
+          title: Answer card
+          summary: A templated card with a real Button in its footer slot.
+        css: |
+          .card { border: 1px solid var(--ant-color-border); border-radius: 8px; padding: 16px; }
+          .footer { margin-top: 12px; display: flex; justify-content: flex-end; }
+        template: |
+          <div class="card">
+            <h3>{{ title }}</h3>
+            <p>{{ summary }}</p>
+            <div class="footer">{% slot "footer" %}</div>
+          </div>
+      slots:
+        footer:
+          blocks:
+            - id: slot_card_approve
+              type: Button
+              properties:
+                title: Approve
+              events:
+                onClick:
+                  - id: set_approved
+                    type: SetState
+                    params:
+                      slot_card_approved: true
+    - id: slot_card_result
+      type: Template
+      properties:
+        context:
+          approved:
+            _state: slot_card_approved
+        template: |
+          <p>Approved: <strong>{{ approved | default(false, true) }}</strong></p>

package/dist/blocks/Template/meta.js

@@ -0,0 +1,62 @@
+/*
+  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: 'container',
+    icons: [],
+    valueType: null,
+    // Slot names are declared by the template's {% slot %} tags, so the meta cannot enumerate them.
+    slots: false,
+    cssKeys: {
+        element: 'The Template element.'
+    },
+    hazards: [
+        {
+            id: 'template-safe-filter-unescaped',
+            message: 'Every {{ value }} is HTML-escaped. The "| safe" filter turns escaping off for that value, so never apply it to caller-supplied or database strings - only to markup the app itself produced.',
+            see: 'container-blocks/template'
+        },
+        {
+            id: 'template-css-is-text',
+            message: 'properties.css is CSS text scoped to this block (nested under #bl-<blockId>). The style key stays an object of CSS properties per cssKey; a <style> tag inside the template is stripped.',
+            see: 'container-blocks/template'
+        }
+    ],
+    properties: {
+        type: 'object',
+        additionalProperties: false,
+        properties: {
+            template: {
+                type: 'string',
+                description: 'Nunjucks template source. {{ value }} is escaped, {{ value | safe }} is not, and {% slot "name" %} places the blocks configured under slots.name.',
+                docs: {
+                    displayType: 'text-area'
+                }
+            },
+            context: {
+                description: 'Values available to the template. Objects are spread into the template scope; a primitive is available as "value".',
+                docs: {
+                    displayType: 'yaml'
+                }
+            },
+            css: {
+                type: 'string',
+                description: 'CSS text applied to this block only. Rules are nested under the block wrapper selector, so ".row { ... }" styles only .row elements inside this block.',
+                docs: {
+                    displayType: 'text-area'
+                }
+            }
+        }
+    }
+};

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

@@ -0,0 +1,82 @@
+# 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: template
+type: Box
+
+blocks:
+  - id: template_basic
+    type: Template
+    properties:
+      context:
+        name: World
+      template: '<p>Hello {{ name }}</p>'
+
+  - id: template_escaped
+    type: Template
+    properties:
+      context:
+        html: '<b>bold</b>'
+      template: '<p>{{ html }}</p>'
+
+  - id: template_safe
+    type: Template
+    properties:
+      context:
+        html: '<b>bold</b>'
+      template: '<p>{{ html | safe }}</p>'
+
+  - id: template_loop
+    type: Template
+    properties:
+      context:
+        items: [one, two, three]
+      template: '<ul>{% for item in items %}<li>{{ item }}</li>{% endfor %}</ul>'
+
+  - id: template_scoped_style
+    type: Template
+    properties:
+      css: '.row { color: rgb(255, 0, 0); }'
+      template: '<p class="row">Red row</p>'
+
+  - id: template_scoped_style_sibling
+    type: Template
+    properties:
+      template: '<p class="row">Not red row</p>'
+
+  - id: template_slot
+    type: Template
+    properties:
+      template: '<div class="card"><p>Card</p>{% slot "footer" %}</div>'
+    slots:
+      footer:
+        blocks:
+          - id: template_slot_button
+            type: Button
+            properties:
+              title: Approve
+            events:
+              onClick:
+                - id: set_clicked
+                  type: SetState
+                  params:
+                    template_clicked: yes
+
+  - id: template_slot_result
+    type: Template
+    properties:
+      context:
+        clicked:
+          _state: template_clicked
+      template: '<p>Clicked: {{ clicked | default("no", true) }}</p>'

package/dist/blocks.js

@@ -21,4 +21,5 @@ 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 Span } from './blocks/Span/Span.js';
+export { default as Template } from './blocks/Template/Template.js';
 export { default as Throw } from './blocks/Throw/Throw.js';

package/dist/e2e.js

@@ -21,4 +21,5 @@ 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 Span } from './blocks/Span/e2e.js';
+export { default as Template } from './blocks/Template/e2e.js';
 export { default as Throw } from './blocks/Throw/e2e.js';

package/dist/metas.js

@@ -21,4 +21,5 @@ 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 Span } from './blocks/Span/meta.js';
+export { default as Template } from './blocks/Template/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-20260829192306",
+  "version": "0.0.0-experimental-20260830202815",
   "license": "Apache-2.0",
   "description": "Basic html Lowdefy blocks.",
   "homepage": "https://lowdefy.com",
@@ -42,8 +42,9 @@
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "0.0.0-experimental-20260829192306",
-    "@lowdefy/helpers": "0.0.0-experimental-20260829192306",
+    "@lowdefy/block-utils": "0.0.0-experimental-20260830202815",
+    "@lowdefy/helpers": "0.0.0-experimental-20260830202815",
+    "@lowdefy/nunjucks": "0.0.0-experimental-20260830202815",
     "dompurify": "3.4.2"
   },
   "peerDependencies": {
@@ -51,8 +52,8 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "0.0.0-experimental-20260829192306",
-    "@lowdefy/e2e-utils": "0.0.0-experimental-20260829192306",
+    "@lowdefy/block-dev-e2e": "0.0.0-experimental-20260830202815",
+    "@lowdefy/e2e-utils": "0.0.0-experimental-20260830202815",
     "@playwright/test": "1.59.1",
     "@swc/cli": "0.8.1",
     "@swc/core": "1.15.32",