@lowdefy/blocks-basic 0.0.0-experimental-20260909201552 → 0.0.0-experimental-20260911113654

package/dist/blocks/Box/Box.static.js

@@ -0,0 +1,36 @@
+/*
+  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 { htmlToText, isBlank } from '@lowdefy/block-utils/report';
+/**
+ * Box → a `stack` of its `content` area. The Box block shows
+ * `properties.content` when set instead of its child area, so the report
+ * mirrors that: a content string becomes a single `text` (markup flattened),
+ * otherwise the walked area passes through as a stack. An empty, content-less
+ * box yields no node.
+ */ export const Box = {
+    toReport: ({ block, areas = {} })=>{
+        const content = block.properties?.content;
+        if (!isBlank(content)) return {
+            kind: 'text',
+            text: htmlToText(content)
+        };
+        const nodes = areas.content ?? [];
+        if (nodes.length === 0) return null;
+        return {
+            kind: 'stack',
+            children: nodes
+        };
+    }
+};

package/dist/blocks/Box/meta.js

@@ -14,6 +14,7 @@
   limitations under the License.
 */ export default {
     category: 'container',
+    static: true,
     icons: [],
     valueType: null,
     slots: {

package/dist/blocks/DangerousHtml/DangerousHtml.js

@@ -17,20 +17,13 @@ import DOMPurify from 'dompurify';
 import { withBlockDefaults } from '@lowdefy/block-utils';
 import { type } from '@lowdefy/helpers';
 let DangerousHtml = class DangerousHtml extends React.Component {
-    sanitize() {
-        const { html, 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();
+        const htmlString = type.isNone(this.props.properties.html) ? '' : this.props.properties.html.toString();
+        this.div.innerHTML = DOMPurify.sanitize(htmlString, this.DOMPurifyOptions);
     }
     componentDidUpdate() {
-        this.sanitize();
+        const htmlString = type.isNone(this.props.properties.html) ? '' : this.props.properties.html.toString();
+        this.div.innerHTML = DOMPurify.sanitize(htmlString, this.DOMPurifyOptions);
     }
     render() {
         const { blockId, classNames, styles } = this.props;
@@ -51,11 +44,8 @@ let DangerousHtml = class DangerousHtml extends React.Component {
         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.
+        // we do not revaluate DOMPurifyOptions improve options safety by not making options dynamic.
         this.DOMPurifyOptions = props.properties.DOMPurifyOptions;
-        this.warnedOptionsChange = false;
     }
 };
 export default withBlockDefaults(DangerousHtml);

package/dist/blocks/DangerousHtml/meta.js

@@ -14,23 +14,12 @@
   limitations under the License.
 */ export default {
     category: 'display',
+    static: true,
     icons: [],
     valueType: null,
     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/Html.static.js

@@ -0,0 +1,95 @@
+/*
+  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.
+*/ /**
+ * Html / DangerousHtml → `svg`.
+ *
+ * Reports use Html blocks for custom components (KPI tiles, badges, styled
+ * headings), so the report renders the markup rather than skipping it. The
+ * layout engine belongs to the reports plugin, which hands it in as
+ * `context.renderHtml`: this renderer only decides the box (the column width
+ * and the block's own style height) and reports what the engine cannot draw.
+ * Keeping the engine out of this package means an app that never renders a
+ * report installs no native layout binary for its Html blocks.
+ *
+ * `DangerousHtml` shares this renderer: sanitization is a client concern, so
+ * the report renders the same string the page would.
+ */ import { type } from '@lowdefy/helpers';
+import { isBlank, styleValue, toPoints } from '@lowdefy/block-utils/report';
+// The html engine has no table layout algorithm, so `<table>` cells run on
+// inline. The block renders, mislaid out, with this warning naming the fix.
+const TABLE_PATTERN = /<table[\s/>]/i;
+// The html engine never fetches an image, so an `<img>` draws nothing and takes
+// no space. Warn rather than let a logo vanish silently.
+const IMG_PATTERN = /<img[\s/>]/i;
+let missingRendererWarned = false;
+function warnMissingRenderer({ block, context }) {
+    if (missingRendererWarned) return;
+    missingRendererWarned = true;
+    context?.logger?.warn?.({
+        blockId: block.blockId
+    }, `${block.type} block '${block.blockId}' skipped: the reports plugin supplied no html renderer (context.renderHtml). Html blocks render only through @lowdefy/plugin-reports.`);
+}
+const toReport = async ({ block, layout, context })=>{
+    const html = block.properties?.html;
+    if (isBlank(html)) return null;
+    const source = String(html);
+    if (!type.isFunction(context?.renderHtml)) {
+        warnMissingRenderer({
+            block,
+            context
+        });
+        return null;
+    }
+    if (TABLE_PATTERN.test(source)) {
+        context.logger?.warn?.({
+            blockId: block.blockId
+        }, `${block.type} block '${block.blockId}' contains <table> markup, which reports cannot lay out: cells run on inline. Use flex markup, or a table block, for tabular report content.`);
+    }
+    if (IMG_PATTERN.test(source)) {
+        context.logger?.warn?.({
+            blockId: block.blockId
+        }, `${block.type} block '${block.blockId}' contains <img> markup, which reports cannot load: the image draws nothing and takes no space. Use an Img block for report images.`);
+    }
+    const width = layout.width;
+    // The block's own style height wins over auto-measurement, so tiles in a row
+    // line up even when one label wraps.
+    const styleHeight = toPoints(styleValue(block.style, 'height'));
+    try {
+        const { svg, height } = await context.renderHtml({
+            html: source,
+            width,
+            height: styleHeight
+        });
+        // Markup that measures to nothing (an empty div, a comment) has nothing to
+        // draw, and a zero-height node would still take its margin in the PDF.
+        if (height === 0) return null;
+        return {
+            kind: 'svg',
+            svg,
+            width,
+            height
+        };
+    } catch (error) {
+        context.logger?.warn?.({
+            blockId: block.blockId,
+            err: error
+        }, `${block.type} block '${block.blockId}' failed to render and was skipped: ${error.message}`);
+        return null;
+    }
+};
+export const Html = {
+    toReport
+};
+/** DangerousHtml renders through the same engine, from the same property. */ export const DangerousHtml = Html;

package/dist/blocks/Html/meta.js

@@ -14,18 +14,12 @@
   limitations under the License.
 */ export default {
     category: 'display',
+    static: true,
     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. 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.'
     },

package/dist/blocks/Icon/Icon.static.js

@@ -0,0 +1,108 @@
+/*
+  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.
+*/ /**
+ * Icon → `svg`. Production KPI tiles pair a number with a movement arrow, so an
+ * unrendered Icon costs the report the direction of every trend it shows.
+ *
+ * The icon components are react-icons functions, taken from `context.icons`:
+ * the build's tree-shaken icon artifact, the same map the client resolves names
+ * against, so a report can only draw icons the app actually bundles.
+ *
+ * React renders them: `react` and `react-dom/server` are imported lazily on
+ * first use, which keeps the static entry free of React at module load (every
+ * report imports this package for Box and Span, but only a page with an Icon
+ * pays for React). Serialising the element tree by hand was rejected because
+ * react-icons ships React-cased attributes (`fillRule`, `strokeLinecap`,
+ * `clipPath`; 457 of them in one icon family alone), so a second serialiser
+ * would have to carry its own copy of React's SVG attribute-casing table.
+ */ import { type } from '@lowdefy/helpers';
+import { styleValue, toPoints } from '@lowdefy/block-utils/report';
+// A line of body text is ~14pt, which is the size an icon beside a label wants.
+const DEFAULT_SIZE = 14;
+// react-icons paints with `currentColor`; the client inherits the surrounding
+// text colour, and a document has none, so fall back to the body text colour.
+const DEFAULT_COLOR = '#262626';
+let renderer;
+// react-dom/server resolves the React-cased attributes and the `currentColor`
+// default the same way the browser does. Loaded once per process.
+async function getRenderer() {
+    if (!renderer) {
+        const [{ createElement }, reactDomServer] = await Promise.all([
+            import('react'),
+            import('react-dom/server')
+        ]);
+        const { renderToStaticMarkup } = reactDomServer.default ?? reactDomServer;
+        renderer = {
+            createElement,
+            renderToStaticMarkup
+        };
+    }
+    return renderer;
+}
+const toReport = async ({ block, context })=>{
+    // `properties` may be the icon name alone (`type: Icon, properties: AiFillHome`),
+    // exactly as the client's createIcon reads it.
+    const properties = type.isString(block.properties) ? {
+        name: block.properties
+    } : block.properties ?? {};
+    const name = properties.name;
+    const Component = name ? context?.icons?.[name] : undefined;
+    if (!Component) {
+        // The page shows a fallback glyph for an unknown name; a document is better
+        // off without it, so skip and name the block instead.
+        context?.logger?.warn?.({
+            blockId: block.blockId,
+            name
+        }, `Icon block '${block.blockId}' names icon '${name}', which the app does not bundle. Skipped.`);
+        return null;
+    }
+    const size = toPoints(properties.size) ?? toPoints(styleValue(block.style, 'fontSize')) ?? DEFAULT_SIZE;
+    const rawColor = properties.color ?? styleValue(block.style, 'color') ?? DEFAULT_COLOR;
+    // The colour is spliced into SVG markup below, so reject any value carrying
+    // markup characters (a config-authored `red"/><image .../>`) and fall back to
+    // the default rather than let it break out of the attribute.
+    const color = /[<>"]/.test(String(rawColor)) ? DEFAULT_COLOR : rawColor;
+    if (!type.isUndefined(properties.rotate) || properties.spin === true) {
+        context?.logger?.debug?.({
+            blockId: block.blockId
+        }, `Report icons ignore rotate and spin on block '${block.blockId}'.`);
+    }
+    try {
+        const { createElement, renderToStaticMarkup } = await getRenderer();
+        const markup = renderToStaticMarkup(createElement(Component, {
+            size,
+            color,
+            title: properties.title
+        }));
+        // pdfmake's SVG renderer has no CSS cascade, so it cannot resolve the
+        // keyword react-icons paints with; bake the resolved colour in.
+        const svg = markup.split('currentColor').join(color);
+        return {
+            kind: 'svg',
+            svg,
+            width: size,
+            height: size
+        };
+    } catch (error) {
+        context?.logger?.warn?.({
+            blockId: block.blockId,
+            err: error
+        }, `Icon block '${block.blockId}' failed to render and was skipped: ${error.message}`);
+        return null;
+    }
+};
+export const Icon = {
+    toReport
+};

package/dist/blocks/Icon/meta.js

@@ -14,6 +14,7 @@
   limitations under the License.
 */ export default {
     category: 'display',
+    static: true,
     icons: [
         'AiOutlineCloseCircle'
     ],

package/dist/blocks/Img/Img.static.js

@@ -0,0 +1,39 @@
+/*
+  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';
+import { isBlank } from '@lowdefy/block-utils/report';
+/**
+ * Img → `image`. `properties.src` names the source; the reports plugin resolves
+ * the bytes centrally (data URI, public asset, or guarded fetch). The block's
+ * `width`/`height` properties become the IR node's width/height, carried
+ * through as PostScript points, the same unit every other sizeable IR node
+ * uses. With neither set the image keeps its natural size, capped to the
+ * content width. An empty src yields no node.
+ */ export const Img = {
+    toReport: ({ block })=>{
+        const { src, width, height } = block.properties ?? {};
+        if (isBlank(src)) return null;
+        return {
+            kind: 'image',
+            src: String(src),
+            ...type.isNumber(width) ? {
+                width
+            } : {},
+            ...type.isNumber(height) ? {
+                height
+            } : {}
+        };
+    }
+};

package/dist/blocks/Img/meta.js

@@ -14,6 +14,7 @@
   limitations under the License.
 */ export default {
     category: 'display',
+    static: true,
     icons: [],
     valueType: null,
     cssKeys: {

package/dist/blocks/Span/Span.static.js

@@ -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.
+*/ import { htmlToText, isBlank } from '@lowdefy/block-utils/report';
+/**
+ * Span → `text`. The Span block shows `properties.content` when set, otherwise
+ * its `content` area; the report mirrors that precedence. A content string
+ * becomes a `text` (markup flattened); otherwise the walked area is wrapped in
+ * a stack. A Span with neither yields no node.
+ */ export const Span = {
+    toReport: ({ block, areas = {} })=>{
+        const content = block.properties?.content;
+        if (!isBlank(content)) return {
+            kind: 'text',
+            text: htmlToText(content)
+        };
+        const nodes = areas.content ?? [];
+        if (nodes.length === 0) return null;
+        return {
+            kind: 'stack',
+            children: nodes
+        };
+    }
+};

package/dist/blocks/Span/meta.js

@@ -14,6 +14,7 @@
   limitations under the License.
 */ export default {
     category: 'container',
+    static: true,
     icons: [],
     valueType: null,
     slots: {

package/dist/static.js

@@ -0,0 +1,26 @@
+/*
+  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.
+*/ /**
+ * Static report renderers for blocks-basic. Each export is keyed by block type
+ * and exposes `{ toReport }`, mapping a block's evaluated properties (and, for
+ * containers, its walked `areas`) to report IR. This entry must stay free of
+ * React at load time so the server can load the registry without a browser
+ * runtime; renderers emit plain IR object literals, never pdfmake or ExcelJS
+ * objects. (The Icon renderer imports React lazily, on the first icon it draws.)
+ */ export { Img } from './blocks/Img/Img.static.js';
+export { Span } from './blocks/Span/Span.static.js';
+export { Box } from './blocks/Box/Box.static.js';
+export { Html, DangerousHtml } from './blocks/Html/Html.static.js';
+export { Icon } from './blocks/Icon/Icon.static.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/blocks-basic",
-  "version": "0.0.0-experimental-20260909201552",
+  "version": "0.0.0-experimental-20260911113654",
   "license": "Apache-2.0",
   "description": "Basic html Lowdefy blocks.",
   "homepage": "https://lowdefy.com",
@@ -36,14 +36,15 @@
     "./blocks": "./dist/blocks.js",
     "./e2e": "./dist/e2e.js",
     "./metas": "./dist/metas.js",
+    "./static": "./dist/static.js",
     "./types": "./dist/types.js"
   },
   "files": [
     "dist/*"
   ],
   "dependencies": {
-    "@lowdefy/block-utils": "0.0.0-experimental-20260909201552",
-    "@lowdefy/helpers": "0.0.0-experimental-20260909201552",
+    "@lowdefy/block-utils": "0.0.0-experimental-20260911113654",
+    "@lowdefy/helpers": "0.0.0-experimental-20260911113654",
     "dompurify": "3.4.2"
   },
   "peerDependencies": {
@@ -51,12 +52,15 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@lowdefy/block-dev-e2e": "0.0.0-experimental-20260909201552",
-    "@lowdefy/e2e-utils": "0.0.0-experimental-20260909201552",
+    "@jest/globals": "28.1.3",
+    "@lowdefy/block-dev-e2e": "0.0.0-experimental-20260911113654",
+    "@lowdefy/e2e-utils": "0.0.0-experimental-20260911113654",
     "@playwright/test": "1.59.1",
     "@swc/cli": "0.8.1",
     "@swc/core": "1.15.32",
-    "copyfiles": "2.4.1"
+    "@swc/jest": "0.2.39",
+    "copyfiles": "2.4.1",
+    "jest": "28.1.3"
   },
   "publishConfig": {
     "access": "public"
@@ -66,6 +70,7 @@
     "clean": "rm -rf dist",
     "copyfiles": "copyfiles -u 1 \"./src/**/*\" dist -e \"./src/**/*.js\" -e \"./src/**/*.snap\"",
     "e2e": "playwright test --config e2e/playwright.config.js",
-    "e2e:ui": "playwright test --config e2e/playwright.config.js --ui"
+    "e2e:ui": "playwright test --config e2e/playwright.config.js --ui",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
   }
 }