structured-render 0.0.4 → 0.0.6

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.d.ts

@@ -10,8 +10,24 @@ import { type RenderHtmlOptions, type RenderInput } from '../render/render-types
 export declare const VirStructuredRender: import("element-vir").DeclarativeElementDefinition<"vir-structured-render", {
     data: Readonly<RenderInput>;
     options?: Readonly<PartialWithUndefined<RenderHtmlOptions & {
-        isTableSize: boolean;
+        /**
+         * If `true`, smaller, tablet-compatible styles are used.
+         *
+         * @default false
+         */
+        isTabletSize: boolean;
+        /**
+         * If `true`, smaller, phone-compatible styles are used.
+         *
+         * @default false
+         */
         isPhoneSize: boolean;
+        /**
+         * If `true`, all sections will automatically be expanded at first.
+         *
+         * @default false
+         */
+        expandAllSections: boolean;
     }>> | undefined;
 }, {
     currentlyExpanded: Record<string, boolean>;

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';
@@ -29,20 +29,24 @@ export const VirStructuredRender = defineElement()({
     },
     hostClasses: {
         'vir-structured-render-phone-size': ({ inputs }) => !!inputs.options?.isPhoneSize,
-        'vir-structured-render-tablet-size': ({ inputs }) => !!inputs.options?.isTableSize,
+        'vir-structured-render-tablet-size': ({ inputs }) => !!inputs.options?.isTabletSize,
     },
     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';
@@ -73,44 +74,6 @@ export var OutputImageType;
     OutputImageType["Download"] = "download";
 })(OutputImageType || (OutputImageType = {}));
 // cspell:enable
-/**
- * Triggers a file download from a Blob without opening the content in the browser.
- *
- * Firefox's content handler auto-opens downloaded PDFs in a new tab when it detects the `.pdf`
- * extension on a blob URL download. To prevent this, Firefox uses a `data:` URI with an
- * `application/octet-stream` MIME type. Data URIs don't carry a URL path, so Firefox can't perform
- * extension-based content-type sniffing and won't match the download against its PDF handler.
- *
- * Other browsers use a standard blob URL + anchor download approach.
- */
-async function triggerBlobDownload(blob, downloadFileName) {
-    const anchor = globalThis.document.createElement('a');
-    anchor.download = downloadFileName;
-    anchor.style.display = 'none';
-    if (navigator.userAgent.toLowerCase().includes('firefox')) {
-        const dataUrl = await new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onload = () => {
-                resolve(String(reader.result).replace(/^data:[^;]*;/, 'data:application/octet-stream;'));
-            };
-            reader.onerror = () => {
-                reject(new Error('Failed to read blob for download.'));
-            };
-            reader.readAsDataURL(blob);
-        });
-        anchor.href = dataUrl;
-    }
-    else {
-        const downloadBlob = new Blob([blob], { type: 'application/octet-stream' });
-        anchor.href = URL.createObjectURL(downloadBlob);
-        globalThis.setTimeout(() => {
-            URL.revokeObjectURL(anchor.href);
-        }, 40_000);
-    }
-    globalThis.document.body.append(anchor);
-    anchor.click();
-    anchor.remove();
-}
 function createHtml2PdfOptions(fileName) {
     return {
         margin: [
@@ -161,44 +124,35 @@ export async function renderInBrowser(structuredRenderData, { fileName, outputTy
     const htmlString = convertTemplateToString(html `
         <div class=${contentDivClass}>${DOMPurify.sanitize(dirtyHtml)}</div>
     `);
+    /**
+     * Render in a clean iframe context so html2canvas only clones the minimal iframe document
+     * instead of the entire host page DOM (which is extremely slow on complex pages).
+     */
     const html2PdfOptions = createHtml2PdfOptions(fileName);
+    const canvas = await renderHtmlToCanvas(htmlString, String(options.styles), html2PdfOptions);
+    const instance = htmlToPdf().set(html2PdfOptions).from(canvas);
     if (outputType.pdf) {
-        /**
-         * For PDFs, create a hidden container in the main document (not an iframe) so html2pdf can
-         * inspect the DOM for page break positions while also having access to the styles. Passing
-         * a canvas loses page break info (tables get sliced). Passing an iframe element loses
-         * styles (html2pdf clones elements into the main document, dropping iframe styles).
-         */
-        const { wrapper, contentElement } = createIsolatedContentDiv(htmlString, String(options.styles), html2PdfOptions);
-        try {
-            const instance = htmlToPdf().set(html2PdfOptions).from(contentElement);
-            if (outputType.pdf === OutputPdfType.Download) {
-                const pdfBlob = (await instance.outputPdf(OutputPdfType.Blob));
-                const pdfFileName = fileName.endsWith('.pdf')
-                    ? fileName
-                    : `${fileName}.pdf`;
-                await triggerBlobDownload(pdfBlob, pdfFileName);
-                return;
-            }
-            else {
-                return await instance.outputPdf(outputType.pdf, {
-                    filename: fileName,
-                });
-            }
+        if (outputType.pdf === OutputPdfType.Download) {
+            const pdfBlob = (await instance.outputPdf(OutputPdfType.Blob));
+            const blobUrl = URL.createObjectURL(pdfBlob);
+            const anchor = globalThis.document.createElement('a');
+            anchor.href = blobUrl;
+            anchor.download = fileName.endsWith('.pdf') ? fileName : `${fileName}.pdf`;
+            anchor.style.display = 'none';
+            globalThis.document.body.append(anchor);
+            anchor.click();
+            anchor.remove();
+            URL.revokeObjectURL(blobUrl);
+            return;
         }
-        finally {
-            wrapper.remove();
+        else {
+            return await instance.outputPdf(outputType.pdf, {
+                filename: fileName,
+            });
         }
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     }
     else if (outputType.image) {
-        /**
-         * For images, render to a canvas in a clean iframe context so html2canvas only clones the
-         * minimal iframe document instead of the entire host page DOM (which is extremely slow on
-         * complex pages). No page break logic is needed for images.
-         */
-        const canvas = await renderHtmlToCanvas(htmlString, String(options.styles), html2PdfOptions);
-        const instance = htmlToPdf().set(html2PdfOptions).from(canvas);
         if (outputType.image === OutputImageType.Download) {
             return await instance.toImg().save(fileName);
         }
@@ -212,45 +166,11 @@ export async function renderInBrowser(structuredRenderData, { fileName, outputTy
     }
 }
 /**
- * Create a hidden container div in the main document with styles and content. Unlike an iframe, the
- * styles live in the same document context so html2pdf.js can see them when it clones the element.
- * This allows html2pdf to both render styles correctly AND inspect the DOM for page break positions.
- *
- * The caller is responsible for removing the returned wrapper when done.
- */
-function createIsolatedContentDiv(htmlString, stylesString, html2PdfOptions) {
-    const marginArray = normalizeMargin(html2PdfOptions.margin);
-    /** A4 page width in mm. */
-    const pageWidthMm = 210;
-    const innerWidthMm = pageWidthMm - marginArray[1] - marginArray[3];
-    const wrapper = globalThis.document.createElement('div');
-    wrapper.style.position = 'fixed';
-    wrapper.style.left = '-10000px';
-    wrapper.style.top = '0';
-    wrapper.style.width = `${innerWidthMm}mm`;
-    wrapper.style.overflow = 'hidden';
-    wrapper.setAttribute('aria-hidden', 'true');
-    const styleElement = globalThis.document.createElement('style');
-    styleElement.textContent = [
-        baseContentResetStyles,
-        stylesString,
-    ].join('\n');
-    wrapper.append(styleElement);
-    const contentContainer = globalThis.document.createElement('div');
-    contentContainer.innerHTML = htmlString;
-    wrapper.append(contentContainer);
-    globalThis.document.body.append(wrapper);
-    const contentElement = assertWrap.isDefined(contentContainer.firstElementChild);
-    return { wrapper, contentElement };
-}
-/**
- * Create an isolated iframe containing the rendered HTML content and styles. The iframe provides a
- * minimal document context so that html2canvas / html2pdf only need to process a small DOM tree
- * instead of the entire host page.
- *
- * The caller is responsible for removing the iframe when done.
+ * Render HTML content to a canvas using a clean, minimal iframe. This avoids the massive
+ * performance penalty from html2canvas cloning the entire host page document (including all custom
+ * elements, shadow DOM, and styles) just to render a small content div.
  */
-async function createIsolatedContentIframe(htmlString, stylesString, html2PdfOptions) {
+async function renderHtmlToCanvas(htmlString, stylesString, html2PdfOptions) {
     const marginArray = normalizeMargin(html2PdfOptions.margin);
     /** A4 page width in mm. */
     const pageWidthMm = 210;
@@ -272,31 +192,33 @@ async function createIsolatedContentIframe(htmlString, stylesString, html2PdfOpt
         '</body></html>',
     ].join('');
     globalThis.document.body.append(iframe);
-    await new Promise((resolve) => {
-        iframe.addEventListener('load', () => {
-            resolve();
-        }, {
-            once: true,
-        });
-    });
-    const iframeDoc = assertWrap.isDefined(iframe.contentDocument);
-    await iframeDoc.fonts.ready;
-    /**
-     * Elements from the iframe exist in a different window context, so `instanceof HTMLElement`
-     * (from the parent window) fails. Use assertWrap.isDefined since we control the HTML written to
-     * the iframe and know the first child is always an element.
-     */
-    const contentElement = assertWrap.isDefined(iframeDoc.body.firstElementChild);
-    return { iframe, contentElement };
-}
-/**
- * Render HTML content to a canvas using a clean, minimal iframe. This avoids the massive
- * performance penalty from html2canvas cloning the entire host page document (including all custom
- * elements, shadow DOM, and styles) just to render a small content div.
- */
-async function renderHtmlToCanvas(htmlString, stylesString, html2PdfOptions) {
-    const { iframe, contentElement } = await createIsolatedContentIframe(htmlString, stylesString, html2PdfOptions);
     try {
+        await new Promise((resolve) => {
+            iframe.addEventListener('load', () => {
+                resolve();
+            }, {
+                once: true,
+            });
+        });
+        const iframeDoc = assertWrap.isDefined(iframe.contentDocument);
+        await iframeDoc.fonts.ready;
+        /**
+         * Elements from the iframe exist in a different window context, so `instanceof HTMLElement`
+         * (from the parent window) fails. Use assertWrap.isDefined since we control the HTML
+         * 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,32 +365,50 @@ 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;
         const sectionTemplate = htmlRenderers[data.type](data, options, keyChain);
         const sources = ('sources' in data && data.sources) || undefined;
-        return [
-            sectionTitle
-                ? html `
-                      <h3>${sectionTitle}</h3>
-                  `
-                : undefined,
-            html `
-                <div
-                    class=${classMap({
-                'section-wrapper': true,
-                'top-section-wrapper': keyChain.length === 0,
-                [structuredRenderSectionHtmlNames[data.type]]: true,
-            })}
-                    ${testId(structuredRenderSectionHtmlTestId)}
-                    ${testId(structuredRenderSectionHtmlNames[data.type])}
-                >
-                    ${createSourceWrapper(sectionTemplate, options, keyChain, sources)}
-                </div>
-            `,
-        ];
+        const sectionContent = html `
+            <div
+                class=${classMap({
+            'section-wrapper': true,
+            'top-section-wrapper': isTopSection,
+            [structuredRenderSectionHtmlNames[data.type]]: true,
+        })}
+                ${testId(structuredRenderSectionHtmlTestId)}
+                ${testId(structuredRenderSectionHtmlNames[data.type])}
+            >
+                ${createSourceWrapper(sectionTemplate, options, keyChain, sources)}
+            </div>
+        `;
+        if (isTopSection) {
+            return [
+                html `
+                    <${ViraCollapsibleCard.assign({
+                    expandOnPrint: true,
+                    blockExpansion: options.blockSectionExpansion,
+                    hideHeader: !sectionTitle,
+                    startExpanded: options.expandAllSections || keyChain.at(-1) === 0,
+                })}>
+                        <h3 slot=${ViraCollapsibleCard.slotNames.header}>${sectionTitle}</h3>
+                        ${sectionContent}
+                    </${ViraCollapsibleCard}>
+                `,
+            ];
+        }
+        else {
+            return [
+                sectionTitle
+                    ? html `
+                          <h3>${sectionTitle}</h3>
+                      `
+                    : undefined,
+                sectionContent,
+            ];
+        }
     }
     else if ('sections' in data) {
         return [
@@ -402,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,42 +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.4",
+    "version": "0.0.6",
     "description": "A library for safely rendering arbitrary data generated from any source.",
     "keywords": [
         "render",
@@ -52,7 +52,7 @@
         "object-shape-tester": "^6.11.0",
         "theme-vir": "^28.22.0",
         "type-fest": "^5.4.4",
-        "vira": "^29.7.2"
+        "vira": "^29.8.0"
     },
     "devDependencies": {
         "@augment-vir/test": "^31.67.0",