structured-render 0.0.5 → 0.0.7

package/dist/augments/shadow-styles.d.ts

@@ -1,4 +1,9 @@
-/** @returns Whether the new styles were set or not. */
+/**
+ * Inserts a new stylesheet into a ShadowRoot.
+ *
+ * @category Internal
+ * @returns Whether the new styles were set or not.
+ */
 export declare function insertStyleSheet({ newStyles, oldStyles, shadowRoot, maintainFirstStylesheet, }: {
     newStyles: string;
     oldStyles: string;

package/dist/augments/shadow-styles.js

@@ -1,5 +1,10 @@
 import { assertWrap, check } from '@augment-vir/assert';
-/** @returns Whether the new styles were set or not. */
+/**
+ * Inserts a new stylesheet into a ShadowRoot.
+ *
+ * @category Internal
+ * @returns Whether the new styles were set or not.
+ */
 export function insertStyleSheet({ newStyles, oldStyles, shadowRoot, maintainFirstStylesheet, }) {
     if (newStyles !== oldStyles) {
         const sheet = new CSSStyleSheet();

package/dist/elements/vir-structured-render.element.js

@@ -1,7 +1,7 @@
 import { colorCss } from '@electrovir/color';
 import { css, defineElement, html, listen, unsafeCSS } from 'element-vir';
 import { themeDefaultKey } from 'theme-vir';
-import { noNativeFormStyles, ViraIcon, ViraTag, viraTheme } from 'vira';
+import { noNativeFormStyles, viraFormCssVars, ViraIcon, ViraTag, viraTheme } from 'vira';
 import { insertStyleSheet } from '../augments/shadow-styles.js';
 import { renderStructuredHtml, SourceExpansionEvent } from '../render/render-html.js';
 import { contentDivClass, defaultMarkdownRenderStyles } from '../render/render-markdown-styles.js';
@@ -34,15 +34,19 @@ export const VirStructuredRender = defineElement()({
     styles: ({ cssVars, hostClasses }) => css `
         :host {
             ${colorCss(viraTheme.colors[themeDefaultKey])}
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
         }
 
         ${ViraIcon} {
             flex-shrink: 0;
         }
 
+        :host,
+        .${unsafeCSS(contentDivClass)}.${unsafeCSS(contentDivClass)}.${unsafeCSS(contentDivClass)} {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+        }
+
         .view-header {
             display: flex;
             flex-grow: 1;
@@ -218,6 +222,7 @@ export const VirStructuredRender = defineElement()({
                 margin-left: auto;
                 width: 32px;
                 justify-content: flex-end;
+                align-items: center;
                 display: flex;
                 flex-shrink: 0;
                 align-self: top;
@@ -226,7 +231,25 @@ export const VirStructuredRender = defineElement()({
             & .source-icon-button {
                 ${noNativeFormStyles};
                 cursor: pointer;
-                color: ${viraTheme.colors['vira-grey-foreground-non-body'].foreground.value};
+                color: ${viraTheme.colors['vira-grey-foreground-header'].foreground.value};
+                padding: 2px;
+                border-radius: 4px;
+
+                & ${ViraIcon} {
+                    display: flex;
+                }
+
+                &:hover {
+                    background-color: ${viraTheme.colors['vira-grey-behind-fg-small-body']
+        .background.value};
+                    color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
+                }
+
+                &:active {
+                    background-color: ${viraTheme.colors['vira-grey-behind-fg-body'].background
+        .value};
+                    color: ${viraFormCssVars['vira-form-accent-primary-color'].value};
+                }
             }
 
             & ul {

package/dist/render/browser-rendering.js

@@ -1,5 +1,6 @@
 import { assert, assertWrap } from '@augment-vir/assert';
 import { isRuntimeEnv, mergeDefinedProperties, RuntimeEnv, stringify, } from '@augment-vir/common';
+import { waitForAnimationFrame } from '@augment-vir/web';
 import DOMPurify from 'dompurify';
 import { convertTemplateToString, html } from 'element-vir';
 import { marked } from 'marked';
@@ -207,6 +208,17 @@ async function renderHtmlToCanvas(htmlString, stylesString, html2PdfOptions) {
          * written to the iframe and know the first child is always an element.
          */
         const contentElement = assertWrap.isDefined(iframeDoc.body.firstElementChild);
+        /**
+         * Resize the iframe to match the content's natural height so the viewport is not clipped at
+         * 0px. Without this, html2canvas may read 0-height dimensions for the element.
+         */
+        iframe.style.height = `${iframeDoc.body.scrollHeight}px`;
+        /**
+         * Wait for the browser to finish layout before html2canvas reads element dimensions and
+         * computed styles. Uses the parent window's requestAnimationFrame because the iframe is
+         * positioned offscreen, and browsers skip animation frames for invisible iframes.
+         */
+        await waitForAnimationFrame(3);
         return await importHtml2Canvas()(contentElement, {
             ...html2PdfOptions.html2canvas,
         });

package/dist/render/render-html.js

@@ -2,7 +2,7 @@ import { assert, check } from '@augment-vir/assert';
 import { ensureArray, filterMap, mapEnumToObject, mapObjectValues, mergeDefinedProperties, stringify, } from '@augment-vir/common';
 import { extractEventTarget } from '@augment-vir/web';
 import { classMap, css, defineTypedEvent, html, ifDefined, join, listen, nothing, testId, unsafeCSS, } from 'element-vir';
-import { defineTable, ViraCollapsibleWrapper, ViraColorVariant, ViraEmphasis, ViraIcon, ViraSize, ViraTableOrientation, ViraTag, } from 'vira';
+import { defineTable, ViraCollapsibleCard, ViraCollapsibleWrapper, ViraColorVariant, ViraEmphasis, ViraIcon, ViraSize, ViraTableOrientation, ViraTag, } from 'vira';
 import { VirMarkdown } from '../elements/vir-markdown.element.js';
 import { VirSource } from '../elements/vir-source.element.js';
 import { createStructuredRenderIcon } from '../structured-render-data/sections/icon.section.js';
@@ -338,7 +338,7 @@ const htmlRenderers = {
     },
 };
 function renderInternalStructuredHtml(data, options, keyChain) {
-    return structuredRenderToHtmlArray(data, options, keyChain).filter(check.isTruthy);
+    return structuredRenderToHtmlArray(data, options, keyChain, false).filter(check.isTruthy);
 }
 /**
  * Used for both HTML class names and test ids.
@@ -357,7 +357,7 @@ export const structuredRenderSectionHtmlNames = mapEnumToObject(StructuredRender
  * @category Internal
  */
 export const structuredRenderSectionHtmlTestId = 'structured-render-section';
-function structuredRenderToHtmlArray(data, options, keyChain) {
+function structuredRenderToHtmlArray(data, options, keyChain, isTopSection) {
     if (!data) {
         return [];
     }
@@ -365,7 +365,7 @@ function structuredRenderToHtmlArray(data, options, keyChain) {
         return data.flatMap((entry, index) => structuredRenderToHtmlArray(entry, options, [
             ...keyChain,
             index,
-        ]));
+        ], isTopSection));
     }
     else if ('type' in data) {
         const sectionTitle = ('sectionTitle' in data && keyChain.length > 0 && data.sectionTitle) || undefined;
@@ -375,7 +375,7 @@ function structuredRenderToHtmlArray(data, options, keyChain) {
             <div
                 class=${classMap({
             'section-wrapper': true,
-            'top-section-wrapper': keyChain.length === 0,
+            'top-section-wrapper': isTopSection,
             [structuredRenderSectionHtmlNames[data.type]]: true,
         })}
                 ${testId(structuredRenderSectionHtmlTestId)}
@@ -384,36 +384,31 @@ function structuredRenderToHtmlArray(data, options, keyChain) {
                 ${createSourceWrapper(sectionTemplate, options, keyChain, sources)}
             </div>
         `;
-        if (sectionTitle) {
-            const sectionKeyChain = [
-                ...keyChain,
-                'section-collapsible',
-            ];
-            const sectionKey = makeChainKey(sectionKeyChain);
-            const isSectionExpanded = !!options.currentlyExpanded[sectionKey];
+        if (isTopSection) {
             return [
                 html `
-                    <${ViraCollapsibleWrapper.assign({
-                    expanded: isSectionExpanded,
-                })}
-                        class="section-collapsible-wrapper"
-                        ${listen(ViraCollapsibleWrapper.events.expandChange, (event) => {
-                    const eventTarget = extractEventTarget(event, HTMLElement);
-                    eventTarget.dispatchEvent(new SourceExpansionEvent({
-                        expanded: event.detail,
-                        key: sectionKey,
-                    }));
-                })}
-                    >
-                        <h3 slot=${ViraCollapsibleWrapper.slotNames.header}>${sectionTitle}</h3>
+                    <${ViraCollapsibleCard.assign({
+                    expandOnPrint: true,
+                    blockExpansion: options.blockSectionExpansion,
+                    hideHeader: !sectionTitle,
+                    startExpanded: options.expandAllSections || keyChain.at(-1) === 0,
+                })}>
+                        <h3 slot=${ViraCollapsibleCard.slotNames.header}>${sectionTitle}</h3>
                         ${sectionContent}
-                    </${ViraCollapsibleWrapper}>
+                    </${ViraCollapsibleCard}>
                 `,
             ];
         }
-        return [
-            sectionContent,
-        ];
+        else {
+            return [
+                sectionTitle
+                    ? html `
+                          <h3>${sectionTitle}</h3>
+                      `
+                    : undefined,
+                sectionContent,
+            ];
+        }
     }
     else if ('sections' in data) {
         return [
@@ -425,7 +420,7 @@ function structuredRenderToHtmlArray(data, options, keyChain) {
             ...structuredRenderToHtmlArray(data.sections, options, [
                 ...keyChain,
                 'sections',
-            ]),
+            ], true),
         ];
     }
     else {

package/dist/render/render-pdf.js

@@ -1,4 +1,5 @@
-import { isRuntimeEnv, RuntimeEnv } from '@augment-vir/common';
+import { isRuntimeEnv, RuntimeEnv, wait } from '@augment-vir/common';
+import { waitForAnimationFrame } from '@augment-vir/web';
 import { OutputPdfType, renderInBrowser, renderInNode } from './browser-rendering.js';
 /**
  * Render to a PDF. Only works in Node.js, not a browser.
@@ -50,12 +51,21 @@ export async function printPdf(renderInput, params) {
         ...params,
     }));
     const blobUrl = URL.createObjectURL(pdfBlob);
+    const userAgent = navigator.userAgent.toLowerCase();
     /**
      * Firefox uses PDF.js to render PDFs in iframes, which doesn't support printing via
-     * `contentWindow.print()` on blob URLs. Open a new window instead so Firefox's native PDF
-     * viewer handles it.
+     * `contentWindow.print()` on blob URLs.
+     *
+     * IOS Safari renders PDFs in iframes constrained to the iframe's viewport, so a hidden 1x1
+     * iframe only prints the first page. iPadOS Safari reports as "Macintosh" in its user agent, so
+     * we also check `maxTouchPoints` to detect it.
+     *
+     * In both cases, open a new window so the platform's native PDF viewer handles all pages.
      */
-    if (navigator.userAgent.toLowerCase().includes('firefox')) {
+    const isFirefox = userAgent.includes('firefox');
+    const isIos = /iphone|ipad|ipod/.test(userAgent) ||
+        (userAgent.includes('macintosh') && navigator.maxTouchPoints > 1);
+    if (isFirefox || isIos) {
         const printWindow = globalThis.window.open(blobUrl);
         if (!printWindow) {
             URL.revokeObjectURL(blobUrl);
@@ -73,46 +83,62 @@ export async function printPdf(renderInput, params) {
     printFrame.style.opacity = '0';
     printFrame.src = blobUrl;
     globalThis.document.body.append(printFrame);
+    await new Promise((resolve) => {
+        printFrame.addEventListener('load', () => {
+            resolve();
+        }, {
+            once: true,
+        });
+    });
+    const contentWindow = printFrame.contentWindow;
+    if (!contentWindow) {
+        URL.revokeObjectURL(blobUrl);
+        printFrame.remove();
+        return;
+    }
+    /**
+     * The iframe's `load` event fires when the blob data is fetched, but the browser's built-in PDF
+     * viewer still needs time to parse and paint the PDF. Without this wait, `print()` can capture
+     * a blank/grey frame roughly 50% of the time. Animation frames alone are insufficient because
+     * the PDF viewer renders asynchronously outside the normal DOM paint cycle, so an additional
+     * delay is needed to let it finish.
+     */
+    await waitForAnimationFrame(3);
+    await wait({
+        milliseconds: 250,
+    });
+    await waitForAnimationFrame(3);
     return new Promise((resolve) => {
-        printFrame.onload = () => {
-            const contentWindow = printFrame.contentWindow;
-            if (!contentWindow) {
-                URL.revokeObjectURL(blobUrl);
-                printFrame.remove();
-                resolve();
+        function cleanup() {
+            URL.revokeObjectURL(blobUrl);
+            printFrame.remove();
+            resolve();
+        }
+        let resolved = false;
+        function resolveOnce() {
+            if (resolved) {
                 return;
             }
-            function cleanup() {
-                URL.revokeObjectURL(blobUrl);
-                printFrame.remove();
-                resolve();
-            }
-            let resolved = false;
-            function resolveOnce() {
-                if (resolved) {
-                    return;
-                }
-                resolved = true;
-                globalThis.window.removeEventListener('focus', focusFallback);
-                cleanup();
-            }
-            /**
-             * Fallback: when the print dialog closes (print or cancel), focus returns to the main
-             * window. Some browsers don't fire `afterprint` on the iframe's contentWindow when the
-             * user cancels.
-             */
-            function focusFallback() {
-                resolveOnce();
-            }
-            contentWindow.addEventListener('afterprint', () => {
-                resolveOnce();
-            }, {
-                once: true,
-            });
-            globalThis.window.addEventListener('focus', focusFallback, {
-                once: true,
-            });
-            contentWindow.print();
-        };
+            resolved = true;
+            globalThis.window.removeEventListener('focus', focusFallback);
+            cleanup();
+        }
+        /**
+         * Fallback: when the print dialog closes (print or cancel), focus returns to the main
+         * window. Some browsers don't fire `afterprint` on the iframe's contentWindow when the user
+         * cancels.
+         */
+        function focusFallback() {
+            resolveOnce();
+        }
+        contentWindow.addEventListener('afterprint', () => {
+            resolveOnce();
+        }, {
+            once: true,
+        });
+        globalThis.window.addEventListener('focus', focusFallback, {
+            once: true,
+        });
+        contentWindow.print();
     });
 }

package/dist/render/render-types.d.ts

@@ -119,12 +119,20 @@ export type RenderHtmlOptions = RenderOptions & {
      * This will only be used if `hideViewOnPageButtons` is not set to `true`.
      */
     createViewOnPageString(pageNumber: number): string;
+    /** CSS styles for rendering internal Markdown. */
+    markdownStyles: string | CSSResult;
     /**
-     * CSS styles for rendering internal Markdown.
+     * If set to `true`, all sections will start out expanded.
      *
-     * @default
+     * @default false
      */
-    markdownStyles: string | CSSResult;
+    expandAllSections: boolean;
+    /**
+     * If set to `true`, all sections will be expanded and expansion toggling will be disabled.
+     *
+     * @default false
+     */
+    blockSectionExpansion: boolean;
 };
 /**
  * Default option values for Structured Render rendering to HTML.

package/dist/render/render-types.js

@@ -38,4 +38,6 @@ export const defaultRenderHtmlOptions = {
     createViewOnPageString(pageNumber) {
         return `View on page ${pageNumber}`;
     },
+    expandAllSections: false,
+    blockSectionExpansion: false,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "structured-render",
-    "version": "0.0.5",
+    "version": "0.0.7",
     "description": "A library for safely rendering arbitrary data generated from any source.",
     "keywords": [
         "render",
@@ -44,7 +44,7 @@
         "@augment-vir/web": "^31.67.0",
         "@electrovir/color": "^1.7.8",
         "dompurify": "^3.3.1",
-        "element-vir": "^26.14.4",
+        "element-vir": "^26.14.5",
         "html2canvas": "^1.4.1",
         "html2pdf.js": "^0.14.0",
         "lit-css-vars": "^3.5.0",
@@ -52,7 +52,7 @@
         "object-shape-tester": "^6.11.0",
         "theme-vir": "^28.22.0",
         "type-fest": "^5.4.4",
-        "vira": "^29.8.0"
+        "vira": "^30.1.1"
     },
     "devDependencies": {
         "@augment-vir/test": "^31.67.0",

package/dist/ui/elements/vir-app.element.d.ts

@@ -1 +0,0 @@
-export declare const VirApp: import("element-vir").DeclarativeElementDefinition<"vir-app", {}, {}, {}, "vir-app-", "vir-app-", readonly [], readonly []>;

package/dist/ui/elements/vir-app.element.js

@@ -1,9 +0,0 @@
-import { defineElement, html } from 'element-vir';
-export const VirApp = defineElement()({
-    tagName: 'vir-app',
-    render() {
-        return html `
-            Vir App goes here!
-        `;
-    },
-});