tosijs-ui 1.6.7 → 1.6.9

package/dist/code-editor.d.ts

@@ -4,6 +4,12 @@ export declare class CodeEditor extends WebComponent {
     private source;
     get value(): string;
     set value(text: string);
+    private _original;
+    get original(): string;
+    set original(text: string);
+    private diffOverlay;
+    get showingDiff(): boolean;
+    showDiff(on: boolean): void;
     static initAttributes: {
         mode: string;
         theme: string;

package/dist/code-editor.js

@@ -23,6 +23,7 @@ and an `ace` property that returns the `ace` module, giving you complete access
 /*{ "parent": "Components" }*/
 import { Component as WebComponent } from 'tosijs';
 import { scriptTag } from './via-tag';
+import { tosiDiff } from './diff';
 const ACE_BASE_URL = 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.23.2/';
 const DEFAULT_THEME = 'ace/theme/tomorrow';
 const getAce = async () => {
@@ -37,6 +38,10 @@ const makeCodeEditor = async (codeElement, mode = 'html', options = {}, theme =
         tabSize: 2,
         useSoftTabs: true,
         useWorker: false,
+        // Wrap wide lines instead of scrolling horizontally; indentedSoftWrap keeps
+        // wrapped continuations aligned under the line's indent.
+        wrap: true,
+        indentedSoftWrap: true,
         ...options,
     });
     editor.setTheme(theme);
@@ -58,6 +63,44 @@ export class CodeEditor extends WebComponent {
             this.editor.session.getUndoManager().reset();
         }
     }
+    // Baseline for `showDiff()` — the version to diff the current `value` against.
+    // Defaults to the current value (no diff) until a caller sets it.
+    _original;
+    get original() {
+        return this._original ?? this.value;
+    }
+    set original(text) {
+        this._original = text;
+    }
+    // Diff overlay — deliberately built only on the editor's public surface
+    // (`value` + `original`) and the tosi-diff component, never the underlying
+    // editor's API, so it survives a future Ace → CodeMirror swap untouched.
+    diffOverlay;
+    get showingDiff() {
+        return this.diffOverlay !== undefined && !this.diffOverlay.hidden;
+    }
+    showDiff(on) {
+        if (on) {
+            if (this.diffOverlay === undefined) {
+                this.diffOverlay = tosiDiff({
+                    style: {
+                        position: 'absolute',
+                        inset: '0',
+                        zIndex: '5',
+                        overflow: 'auto',
+                        background: 'var(--tosi-diff-bg, var(--background, #fff))',
+                    },
+                });
+                this.append(this.diffOverlay);
+            }
+            this.diffOverlay.original = this.original;
+            this.diffOverlay.modified = this.value;
+            this.diffOverlay.hidden = false;
+        }
+        else if (this.diffOverlay !== undefined) {
+            this.diffOverlay.hidden = true;
+        }
+    }
     static initAttributes = {
         mode: 'javascript',
         theme: DEFAULT_THEME,

package/dist/diff.d.ts

@@ -0,0 +1,61 @@
+import { Component, ElementCreator, PartsMap } from 'tosijs';
+export type DiffOp = 'context' | 'add' | 'remove';
+export interface DiffLine {
+    op: DiffOp;
+    text: string;
+}
+/**
+ * Line-level diff of two strings via longest-common-subsequence, returning each
+ * line tagged `context` (unchanged), `remove` (only in `before`), or `add` (only
+ * in `after`), in display order.
+ */
+export declare function diffLines(before: string, after: string): DiffLine[];
+interface DiffParts extends PartsMap {
+    body: HTMLElement;
+}
+export declare class TosiDiff extends Component<DiffParts> {
+    static preferredTagName: string;
+    static initAttributes: {
+        original: string;
+        modified: string;
+    };
+    static shadowStyleSpec: {
+        ':host': {
+            display: string;
+            overflow: string;
+            font: string;
+            background: string;
+            color: string;
+        };
+        ':host([hidden])': {
+            display: string;
+        };
+        '.diff-line': {
+            display: string;
+            gridTemplateColumns: string;
+            whiteSpace: string;
+            wordBreak: string;
+        };
+        '.diff-line .marker': {
+            textAlign: string;
+            userSelect: string;
+            opacity: string;
+        };
+        '.diff-add': {
+            background: string;
+        };
+        '.diff-add .marker': {
+            color: string;
+        };
+        '.diff-remove': {
+            background: string;
+        };
+        '.diff-remove .marker': {
+            color: string;
+        };
+    };
+    content: () => HTMLDivElement[];
+    render(): void;
+}
+export declare const tosiDiff: ElementCreator<TosiDiff>;
+export {};

package/dist/diff.js

@@ -0,0 +1,132 @@
+/*#
+# diff
+
+`<tosi-diff>` renders a unified, line-by-line diff between two strings — the kind
+of view you'd see in a code review, with removed lines marked `-` and added
+lines marked `+`.
+
+Set its `original` and `modified` properties (or attributes) to the two versions
+of the text; it recomputes and re-renders. (They're named `original`/`modified`
+rather than `before`/`after` to avoid the native `Element.before()`/`after()`
+methods.)
+
+```js
+const { tosiDiff } = tosijsui
+
+preview.append(
+  tosiDiff({
+    original: 'one\ntwo\nthree\nfour',
+    modified: 'one\nTWO\nthree\nfour\nfive',
+    style: { width: '100%', height: '100%' },
+  })
+)
+```
+
+The diff is computed with a longest-common-subsequence pass over the lines, so
+unchanged lines are shown as context and only genuine insertions/deletions are
+highlighted. The pure `diffLines(before, after)` function is exported too, if you
+just want the data.
+*/
+/*{ "parent": "Components" }*/
+import { Component, elements } from 'tosijs';
+const { div, span } = elements;
+/**
+ * Line-level diff of two strings via longest-common-subsequence, returning each
+ * line tagged `context` (unchanged), `remove` (only in `before`), or `add` (only
+ * in `after`), in display order.
+ */
+export function diffLines(before, after) {
+    const a = before.split('\n');
+    const b = after.split('\n');
+    const m = a.length;
+    const n = b.length;
+    // lcs[i][j] = length of the LCS of a[i:] and b[j:]
+    const lcs = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+    for (let i = m - 1; i >= 0; i -= 1) {
+        for (let j = n - 1; j >= 0; j -= 1) {
+            lcs[i][j] =
+                a[i] === b[j]
+                    ? lcs[i + 1][j + 1] + 1
+                    : Math.max(lcs[i + 1][j], lcs[i][j + 1]);
+        }
+    }
+    const out = [];
+    let i = 0;
+    let j = 0;
+    while (i < m && j < n) {
+        if (a[i] === b[j]) {
+            out.push({ op: 'context', text: a[i] });
+            i += 1;
+            j += 1;
+        }
+        else if (lcs[i + 1][j] >= lcs[i][j + 1]) {
+            out.push({ op: 'remove', text: a[i] });
+            i += 1;
+        }
+        else {
+            out.push({ op: 'add', text: b[j] });
+            j += 1;
+        }
+    }
+    while (i < m) {
+        out.push({ op: 'remove', text: a[i] });
+        i += 1;
+    }
+    while (j < n) {
+        out.push({ op: 'add', text: b[j] });
+        j += 1;
+    }
+    return out;
+}
+const MARKER = { context: ' ', add: '+', remove: '-' };
+export class TosiDiff extends Component {
+    static preferredTagName = 'tosi-diff';
+    // `before`/`after` would collide with the native Element.before()/after()
+    // methods, so the component props are `original`/`modified`.
+    static initAttributes = {
+        original: '',
+        modified: '',
+    };
+    static shadowStyleSpec = {
+        ':host': {
+            display: 'block',
+            overflow: 'auto',
+            font: 'var(--tosi-code-font, 12px/1.5 monospace)',
+            background: 'var(--tosi-diff-bg, #fff)',
+            color: 'var(--tosi-diff-color, #222)',
+        },
+        // `:host{display:block}` would otherwise beat the UA `[hidden]` rule, so the
+        // element couldn't be hidden via the attribute — restore that.
+        ':host([hidden])': {
+            display: 'none',
+        },
+        '.diff-line': {
+            display: 'grid',
+            gridTemplateColumns: '1.5em 1fr',
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+        },
+        '.diff-line .marker': {
+            textAlign: 'center',
+            userSelect: 'none',
+            opacity: '0.5',
+        },
+        '.diff-add': {
+            background: 'var(--tosi-diff-add-bg, #e6ffed)',
+        },
+        '.diff-add .marker': { color: 'var(--tosi-diff-add-color, #22863a)' },
+        '.diff-remove': {
+            background: 'var(--tosi-diff-remove-bg, #ffeef0)',
+        },
+        '.diff-remove .marker': { color: 'var(--tosi-diff-remove-color, #cb2431)' },
+    };
+    content = () => [div({ part: 'body' })];
+    render() {
+        super.render();
+        const lines = diffLines(this.original, this.modified);
+        this.parts.body.replaceChildren(...lines.map((line) => div({ class: `diff-line diff-${line.op}` }, span({ class: 'marker' }, MARKER[line.op]), 
+        // Non-breaking fallback so empty lines keep their row height.
+        span({ class: 'text' }, line.text === '' ? ' ' : line.text))));
+    }
+}
+export const tosiDiff = TosiDiff.elementCreator();

package/dist/doc-browser.js

@@ -160,6 +160,8 @@ import { tosiSidenav, TosiSidenav } from './side-nav';
 import { icons } from './icons';
 import { tosiLocalized } from './localize';
 import { popMenu } from './menu';
+import { codeEditor } from './code-editor';
+import { tosiDiff } from './diff';
 const { div, span, a, header, button, template, input, h2, details, summary, ul, li } = elements;
 // Test colors
 const testColor = {
@@ -169,6 +171,8 @@ const testColor = {
 };
 // Test indicator styles - widget inherits button styles from base stylesheet
 const testIndicatorStyleSpec = {
+    '.view-source': { opacity: '0.9' },
+    '.view-source:hover': { opacity: '1' },
     '@keyframes test-pulse': {
         '0%, 100%': { opacity: '1' },
         '50%': { opacity: '0.7' },
@@ -402,8 +406,28 @@ export function createDocBrowser(options) {
     // back/forward (the host owns history, if any).
     if (!memoryRouting) {
         window.addEventListener('popstate', () => {
+            // Back/forward while the source editor is open with unsaved changes: the
+            // URL already moved, so on "keep editing" we push it back to match the
+            // still-open editor; on discard we close the editor and navigate.
+            if (editUI) {
+                if (editorHasUnsavedChanges() &&
+                    !window.confirm('Discard unsaved changes to the source?')) {
+                    const href = hrefFor(String(editUI.doc.filename));
+                    window.history.pushState({ href }, '', href);
+                    return;
+                }
+                closeEditor();
+            }
             navigateTo(filenameFromLocation());
         });
+        // Reload / tab-close / external navigation: native "leave site?" prompt when
+        // there are unsaved source edits (the only guard the browser allows here).
+        window.addEventListener('beforeunload', (event) => {
+            if (editorHasUnsavedChanges()) {
+                event.preventDefault();
+                event.returnValue = '';
+            }
+        });
     }
     const headerContent = [
         button({
@@ -496,7 +520,9 @@ export function createDocBrowser(options) {
         else {
             docContent.innerHTML = renderDocMarkdown(doc.text);
         }
-        LiveExample.insertExamples(docContent, context);
+        // Stamp each example with its source file (for the source↔doc map). doc.path
+        // is the extracted file (.md, or a source file with doc comments).
+        LiveExample.insertExamples(docContent, context, doc.path || undefined);
         if (routing === 'path') {
             document.title = projectName
                 ? `${doc.title} — ${projectName}`
@@ -515,6 +541,10 @@ export function createDocBrowser(options) {
     // the onRouteChange callback for memory) and then render the doc. Every nav
     // click funnels through here so memory mode never touches window.history.
     const go = (filename) => {
+        // If the source editor is open with unsaved changes, confirm before leaving;
+        // on confirm it discards + closes, otherwise navigation is aborted.
+        if (!confirmLeaveEditor())
+            return;
         if (memoryRouting) {
             onRouteChange?.(slugFor(filename));
         }
@@ -524,6 +554,220 @@ export function createDocBrowser(options) {
         }
         navigateTo(filename);
     };
+    // ── Edit page source (Foundation B / #4) ──────────────────────────────────
+    // The "view source" affordance opens a menu: edit the whole source file in a
+    // code editor that fills the content area, preview the result in-browser, and
+    // save (dev: write the repo file via /__docstore/source; the watcher rebuilds)
+    // or download it. Source is read from the dev endpoint, falling back to GitHub
+    // raw, so editing works on the deployed site too (save there = download).
+    const editorModeFor = (p) => p.endsWith('.md')
+        ? 'markdown'
+        : p.endsWith('.css')
+            ? 'css'
+            : p.endsWith('.ts') || p.endsWith('.tjs')
+                ? 'typescript'
+                : 'javascript';
+    // Pure mirror of docs.ts extraction: a .md *is* the markdown; a source file is
+    // the concatenation of its doc-comment blocks. Lets us preview an edit in the
+    // browser with no rebuild.
+    const docMarkdownFromSource = (content, p) => {
+        if (p.endsWith('.md'))
+            return content;
+        const blocks = content.match(/\/\*#[\s\S]+?\*\//g) || [];
+        return blocks.map((s) => s.substring(3, s.length - 2).trim()).join('\n\n');
+    };
+    const githubRawUrl = (p) => {
+        const gh = projectLinks.github;
+        if (!gh || !p)
+            return null;
+        const m = gh.match(/github\.com\/([^/]+)\/([^/]+?)(?:\.git)?\/?$/);
+        return m ? `https://raw.githubusercontent.com/${m[1]}/${m[2]}/main/${p}` : null;
+    };
+    const loadSource = async (p) => {
+        try {
+            const r = await fetch(`/__docstore/source?file=${encodeURIComponent(p)}`);
+            if (r.ok)
+                return await r.text();
+        }
+        catch {
+            // dev endpoint not available — fall through to GitHub raw
+        }
+        const raw = githubRawUrl(p);
+        if (raw) {
+            try {
+                const r = await fetch(raw);
+                if (r.ok)
+                    return await r.text();
+            }
+            catch {
+                // offline / no network
+            }
+        }
+        return null;
+    };
+    const saveSourceToDisk = async (p, content) => {
+        try {
+            const r = await fetch('/__docstore/source', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ file: p, content }),
+            });
+            return r.ok;
+        }
+        catch {
+            return false;
+        }
+    };
+    const downloadText = (filename, content) => {
+        const url = URL.createObjectURL(new Blob([content], { type: 'text/plain' }));
+        const link = a({ href: url, download: filename });
+        link.click();
+        setTimeout(() => URL.revokeObjectURL(url), 1000);
+    };
+    let editUI = null;
+    const editorHasUnsavedChanges = () => editUI !== null && editUI.editor.value !== editUI.original;
+    // Tear the editor down without re-rendering the current doc (the caller is
+    // about to navigate). exitEditSource() restores the current doc instead.
+    const closeEditor = () => {
+        if (!editUI)
+            return;
+        editUI.editor.remove();
+        editUI = null;
+        docContent.style.display = '';
+    };
+    // Called before in-app navigation: if the editor is open with unsaved changes,
+    // confirm discarding them. Returns false to abort navigation.
+    const confirmLeaveEditor = () => {
+        if (!editUI)
+            return true;
+        if (editorHasUnsavedChanges() &&
+            !window.confirm('Discard unsaved changes to the source?')) {
+            return false;
+        }
+        closeEditor();
+        return true;
+    };
+    // Switch the source editor between the raw editor, the rendered preview, and a
+    // diff of the edits against the loaded original. preview/diff render into the
+    // doc-content area; edit shows the CodeEditor.
+    const setSourceView = (view) => {
+        if (!editUI)
+            return;
+        editUI.view = view;
+        if (view === 'preview') {
+            docContent.innerHTML = renderDocMarkdown(docMarkdownFromSource(editUI.editor.value, editUI.doc.path));
+            LiveExample.insertExamples(docContent, context, editUI.doc.path || undefined);
+        }
+        else if (view === 'diff') {
+            docContent.replaceChildren(tosiDiff({
+                original: editUI.original,
+                modified: editUI.editor.value,
+                style: { display: 'block', width: '100%', height: '100%' },
+            }));
+        }
+        docContent.style.display = view === 'edit' ? 'none' : '';
+        editUI.editor.style.display = view === 'edit' ? 'block' : 'none';
+    };
+    const exitEditSource = () => {
+        if (!editUI)
+            return;
+        const filename = String(app.currentDoc.filename);
+        closeEditor();
+        navigateTo(filename); // restore the canonical rendered doc
+    };
+    const saveSourceEdit = async () => {
+        if (!editUI)
+            return;
+        const { doc, editor } = editUI;
+        const ok = await saveSourceToDisk(doc.path, editor.value);
+        if (ok) {
+            editUI.original = editor.value; // saved — this is the new clean baseline
+            setSourceView('preview'); // the watcher also rebuilds in the background
+        }
+        else {
+            // No write endpoint (deployed site) — hand the file back for the repo.
+            downloadText(doc.path.split('/').pop() || 'source.txt', editor.value);
+        }
+    };
+    const enterEditSource = async (doc) => {
+        if (editUI)
+            return;
+        const content = await loadSource(doc.path);
+        if (content === null) {
+            window.alert(`Could not load source for ${doc.path}`);
+            return;
+        }
+        const editor = codeEditor({ mode: editorModeFor(doc.path) });
+        // No toolbar — the Source menu carries the edit controls (it adapts while
+        // editing), so the editor fills the whole content area.
+        editor.style.cssText = 'display:block; width:100%; height:100%; border:none;';
+        editor.value = content;
+        const container = docContent.parentElement;
+        container.append(editor);
+        editUI = { editor, doc, view: 'edit', original: content };
+        setSourceView('edit');
+    };
+    const openSourceMenu = (target) => {
+        const doc = docs.find((d) => String(d.filename) === String(app.currentDoc.filename));
+        if (!doc)
+            return;
+        const fileName = (path) => path.split('/').pop() || path;
+        // While editing, the Source menu becomes the editor's controls (no separate
+        // toolbar). Otherwise it offers entry points: edit, view on GitHub, download.
+        const menuItems = editUI
+            ? [
+                ...(editUI.view !== 'edit'
+                    ? [{ caption: 'Edit', icon: 'edit', action: () => setSourceView('edit') }]
+                    : []),
+                ...(editUI.view !== 'preview'
+                    ? [{ caption: 'Preview', icon: 'eye', action: () => setSourceView('preview') }]
+                    : []),
+                {
+                    caption: 'View changes',
+                    icon: 'code',
+                    action: () => setSourceView('diff'),
+                    enabled: () => editorHasUnsavedChanges(),
+                },
+                null,
+                { caption: 'Save to source', icon: 'save', action: () => void saveSourceEdit() },
+                {
+                    caption: 'Download',
+                    icon: 'download',
+                    action: () => downloadText(fileName(editUI.doc.path), editUI.editor.value),
+                },
+                null,
+                { caption: 'Close editor', icon: 'x', action: exitEditSource },
+            ]
+            : [
+                { caption: 'Edit page source', icon: 'edit', action: () => void enterEditSource(doc) },
+                ...(projectLinks.github && doc.path && doc.path !== 'README.md'
+                    ? [
+                        {
+                            caption: 'View on GitHub',
+                            icon: 'github',
+                            action: () => {
+                                window.open(`${projectLinks.github}/blob/main/${doc.path}`, '_blank');
+                            },
+                        },
+                    ]
+                    : []),
+                {
+                    caption: 'Download source',
+                    icon: 'download',
+                    action: () => void loadSource(doc.path).then((c) => {
+                        if (c !== null)
+                            downloadText(fileName(doc.path), c);
+                    }),
+                },
+            ];
+        popMenu({
+            target,
+            // The trigger is position:fixed at the top-right; `auto` placement opens
+            // upward into zero space and collapses the menu, so open below-left.
+            position: 'sw',
+            menuItems,
+        });
+    };
     // ── Hierarchical nav (path routing) ───────────────────────────────────────
     // Build nested <details> from the doc tree; current-highlight, test status,
     // search visibility, and auto-open are applied imperatively by refreshNav.
@@ -686,49 +930,47 @@ export function createDocBrowser(options) {
             overflowY: 'scroll',
             height: '100%',
         },
-    }, a({
+    }, button({
         class: 'view-source',
-        target: '_blank',
         style: {
-            display: projectLinks.github ? 'flex' : 'none',
+            display: 'flex',
             alignItems: 'center',
             gap: '6px',
             position: 'fixed',
             top: 'calc(var(--xin-header-height, 60px) + 5px)',
             right: '5px',
+            // Above the code editor (which fills the content area); below the
+            // popped menu (z 1002).
+            zIndex: '100',
             fontSize: '0.875em',
             color: 'var(--brand-color, inherit)',
-            opacity: '0.7',
-            borderBottom: 'none',
+            // Solid, theme-aware chip so it stays legible over the editor.
+            background: 'var(--background, white)',
+            border: 'none',
+            borderRadius: '4px',
+            padding: '3px 8px',
+            boxShadow: '0 1px 4px #0003',
+            cursor: 'pointer',
             transition: 'opacity 0.2s ease',
         },
-        onMouseenter(event) {
-            ;
-            event.target.style.opacity = '0.9';
-        },
-        onMouseleave(event) {
-            ;
-            event.target.style.opacity = '0.7';
+        // Opacity + :hover live in CSS (.view-source) — a JS hover handler
+        // here would fade the delegation root (the whole page), not the button.
+        onClick(event) {
+            // tosijs delegates clicks, so event.currentTarget is the delegation
+            // root, not the button — resolve the real trigger for menu anchoring.
+            const btn = event.target.closest('.view-source');
+            if (btn)
+                openSourceMenu(btn);
         },
         bind: {
             value: app.currentDoc,
             binding(element, doc) {
-                if (projectLinks.github &&
-                    doc.path &&
-                    doc.path !== 'README.md') {
-                    element.href = `${projectLinks.github}/blob/main/${doc.path}`;
-                    element.style.display = 'flex';
-                }
-                else {
-                    element.style.display = 'none';
-                }
+                // Show when there's a source file to edit/view (any doc with a
+                // path); the menu handles dev-vs-GitHub availability per item.
+                element.style.display = doc.path ? 'flex' : 'none';
             },
         },
-    }, icons.github({
-        style: {
-            _xinIconSize: 16,
-        },
-    }), 'View source on GitHub'), docContent)));
+    }, icons.code({ style: { _xinIconSize: 16 } }), 'Source'), docContent)));
     // Render the landing doc (adopts pre-rendered HTML when hydrating).
     showDoc(currentDoc);
     // Inject test indicator styles
@@ -915,10 +1157,14 @@ export function createDocBrowser(options) {
             return;
         }
         const currentFilename = String(app.currentDoc.filename);
-        // Create a hidden iframe that loads the full page
+        // Create a hidden iframe that loads the full page. Keep its real 800x600
+        // layout size (layout-dependent example tests need it) but park it
+        // off-screen rather than rely on opacity:0 over the visible page — Chromium
+        // (and haltija on top of it) still composites a 0-opacity layer at 0,0,
+        // which flashes as the frame navigates page to page.
         const testFrame = document.createElement('iframe');
         testFrame.style.cssText =
-            'position: fixed; left: 0; top: 0; width: 800px; height: 600px; opacity: 0; pointer-events: none;';
+            'position: fixed; left: -10000px; top: 0; width: 800px; height: 600px; opacity: 0; pointer-events: none;';
         document.body.appendChild(testFrame);
         // Listen for test results posted from the iframe
         const messageHandler = (event) => {

package/dist/doc-system/doc-system-styles.js

@@ -241,7 +241,10 @@ export function docSystemStyleSpec(theme = {}) {
             overflow: 'hidden',
             position: 'relative',
         },
-        svg: {
+        // Scope the icon styling (currentColor fill, click-through) to actual icons
+        // and SVGs inside buttons — a blanket `svg` rule sets pointer-events:none on
+        // every SVG, which breaks interactive SVG-based UIs (maps, charts, diagrams).
+        'svg.tosi-icon, button svg': {
             fill: 'currentColor',
             pointerEvents: 'none',
         },

package/dist/doc-system/doc-system.js

@@ -369,6 +369,14 @@ export class TosiDocSystem extends Component {
                 header.append(this.settingsButton());
         }
         this.replaceChildren(this.browser);
+        // Hydration done: reveal the page (the generated <head> hid it to mask the
+        // static→live swap). Only the page-owning instance touches document.body;
+        // a nested demo must not. Next frame so the browser has painted first.
+        if (!nested && typeof document !== 'undefined') {
+            requestAnimationFrame(() => {
+                document.body.style.opacity = '1';
+            });
+        }
     }
 }
 export const tosiDocSystem = TosiDocSystem.elementCreator();