From b9373694495ee91bda2eaa2a3b75795c676be43d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 5 Sep 2025 16:47:17 +0000
Subject: [PATCH 01/17] Initial plan


From e5d21599652860b6117ba63bb464e24c6254f537 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 5 Sep 2025 16:51:44 +0000
Subject: [PATCH 02/17] Initial analysis: Plan to fix toolbar download bug

Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 6151e571..d4295a2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15385,7 +15385,7 @@
     },
     "packages/vscode": {
       "name": "chartifact",
-      "version": "1.0.0",
+      "version": "1.0.4",
       "license": "MIT",
       "devDependencies": {
         "@vscode/vsce": "^3.6.0"

From 66b89529c1a3c5a10786f45a77a6e7a7469263fa Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 5 Sep 2025 16:54:29 +0000
Subject: [PATCH 03/17] Fix toolbar download bug - use correct extension and
 MIME type based on mode

Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
---
 packages/toolbar/src/toolbar.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/toolbar/src/toolbar.ts b/packages/toolbar/src/toolbar.ts
index 29dbc627..9f9f7743 100644
--- a/packages/toolbar/src/toolbar.ts
+++ b/packages/toolbar/src/toolbar.ts
@@ -51,8 +51,8 @@ export class Toolbar {
     <div style="margin-bottom: 8px;">Download as:</div>
     <ul>
         <li>
-            Source markdown (just the content)<br/>
-            <button type="button" id="download-md" style="margin-right: 8px;">Source markdown</button>
+            Source content (just the content)<br/>
+            <button type="button" id="download-md" style="margin-right: 8px;">Source content</button>
         </li>
         <li>
             HTML wrapper (content plus a shareable viewer)<br/>
@@ -127,8 +127,10 @@ export class Toolbar {
             const textarea = this.options.textarea;
             if (!textarea) return;
             const content = textarea.value;
-            const filename = `${filenameWithoutPathOrExtension(this.filename)}.idoc.md`;
-            this.triggerDownload(content, filename, 'text/markdown');
+            const extension = this.mode === 'json' ? '.idoc.json' : '.idoc.md';
+            const mimeType = this.mode === 'json' ? 'application/json' : 'text/markdown';
+            const filename = `${filenameWithoutPathOrExtension(this.filename)}${extension}`;
+            this.triggerDownload(content, filename, mimeType);
         });
 
         // Download as HTML wrapper

From e5b4c4fa35a8a23fdb893c398182462b9d1a7221 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 5 Sep 2025 17:00:18 +0000
Subject: [PATCH 04/17] Update download UI text to be more explicit about
 json/markdown content

Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
---
 packages/toolbar/src/toolbar.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/toolbar/src/toolbar.ts b/packages/toolbar/src/toolbar.ts
index 9f9f7743..bc81d535 100644
--- a/packages/toolbar/src/toolbar.ts
+++ b/packages/toolbar/src/toolbar.ts
@@ -51,8 +51,8 @@ export class Toolbar {
     <div style="margin-bottom: 8px;">Download as:</div>
     <ul>
         <li>
-            Source content (just the content)<br/>
-            <button type="button" id="download-md" style="margin-right: 8px;">Source content</button>
+            Source (just the json/markdown content)<br/>
+            <button type="button" id="download-md" style="margin-right: 8px;">Source</button>
         </li>
         <li>
             HTML wrapper (content plus a shareable viewer)<br/>

From d4a8f4b26690cff839eb4b638010515c3c4da938 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 5 Sep 2025 17:09:09 +0000
Subject: [PATCH 05/17] Make download text dynamic based on mode
 (json/markdown)

Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
---
 packages/toolbar/src/toolbar.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/toolbar/src/toolbar.ts b/packages/toolbar/src/toolbar.ts
index bc81d535..5c9e7f68 100644
--- a/packages/toolbar/src/toolbar.ts
+++ b/packages/toolbar/src/toolbar.ts
@@ -51,7 +51,7 @@ export class Toolbar {
     <div style="margin-bottom: 8px;">Download as:</div>
     <ul>
         <li>
-            Source (just the json/markdown content)<br/>
+            Source (just the ${this.mode} content)<br/>
             <button type="button" id="download-md" style="margin-right: 8px;">Source</button>
         </li>
         <li>

From 934af2e87136f8125d63abe3aeadda3d3673a6cd Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Fri, 5 Sep 2025 10:16:30 -0700
Subject: [PATCH 06/17] Potential fix for code scanning alert no. 43: Unsafe
 HTML constructed from library input

Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com>
---
 packages/toolbar/src/toolbar.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/toolbar/src/toolbar.ts b/packages/toolbar/src/toolbar.ts
index 5c9e7f68..33e40e89 100644
--- a/packages/toolbar/src/toolbar.ts
+++ b/packages/toolbar/src/toolbar.ts
@@ -10,6 +10,11 @@ export interface ToolbarOptions {
     downloadButton?: boolean;
     restartButton?: boolean;
     textarea?: HTMLTextAreaElement;
+    /**
+     * Mode to display content, allowed values: 'markdown' | 'json'.
+     * Only trusted values should be supplied.
+     * If an untrusted value is provided, it will be ignored and replaced with 'markdown'.
+     */
     mode?: 'markdown' | 'json';
     filename?: string;
 }
@@ -26,7 +31,9 @@ export class Toolbar {
 
     constructor(toolbarElementOrSelector: HTMLElement | string, public options: ToolbarOptions = {}) {
         this.filename = options.filename || 'sample';
-        this.mode = options.mode || 'markdown';
+        // Runtime check to restrict mode to allowed values only
+        const allowedModes = ['markdown', 'json'];
+        this.mode = allowedModes.includes(options.mode as string) ? options.mode as 'markdown' | 'json' : 'markdown';
         this.toolbarElement = typeof toolbarElementOrSelector === 'string' ? document.querySelector(toolbarElementOrSelector) : toolbarElementOrSelector;
 
         if (!this.toolbarElement) {

From 90474ab5e083ef45dc2a40759c947bb8be7cfcb3 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 5 Sep 2025 19:03:21 +0000
Subject: [PATCH 07/17] Add displayMode variable to fix CodeQL alert for safe
 HTML construction

Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
---
 packages/toolbar/src/toolbar.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/toolbar/src/toolbar.ts b/packages/toolbar/src/toolbar.ts
index 33e40e89..c8f05790 100644
--- a/packages/toolbar/src/toolbar.ts
+++ b/packages/toolbar/src/toolbar.ts
@@ -34,6 +34,10 @@ export class Toolbar {
         // Runtime check to restrict mode to allowed values only
         const allowedModes = ['markdown', 'json'];
         this.mode = allowedModes.includes(options.mode as string) ? options.mode as 'markdown' | 'json' : 'markdown';
+        
+        // Create a safe displayMode variable to avoid CodeQL alerts
+        const displayMode = this.mode === 'json' ? 'json' : 'markdown';
+        
         this.toolbarElement = typeof toolbarElementOrSelector === 'string' ? document.querySelector(toolbarElementOrSelector) : toolbarElementOrSelector;
 
         if (!this.toolbarElement) {
@@ -58,7 +62,7 @@ export class Toolbar {
     <div style="margin-bottom: 8px;">Download as:</div>
     <ul>
         <li>
-            Source (just the ${this.mode} content)<br/>
+            Source (just the ${displayMode} content)<br/>
             <button type="button" id="download-md" style="margin-right: 8px;">Source</button>
         </li>
         <li>

From 9c939db8beffa5230b89fa83badabf4af8dd939e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Sep 2025 01:01:07 +0000
Subject: [PATCH 08/17] Undo package-lock.json changes - revert version back to
 1.0.0

Co-authored-by: danmarshall <11507384+danmarshall@users.noreply.github.com>
---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index d4295a2a..6151e571 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15385,7 +15385,7 @@
     },
     "packages/vscode": {
       "name": "chartifact",
-      "version": "1.0.4",
+      "version": "1.0.0",
       "license": "MIT",
       "devDependencies": {
         "@vscode/vsce": "^3.6.0"

From cd4cf65dfc7107dd0158e3ce56ed80a911a1cfab Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Tue, 9 Sep 2025 22:20:42 -0700
Subject: [PATCH 09/17] convert toolbar to tsx

---
 package-lock.json                |  11 ++
 package.json                     |   1 +
 packages/toolbar/src/toolbar.ts  | 260 ----------------------------
 packages/toolbar/src/toolbar.tsx | 279 +++++++++++++++++++++++++++++++
 packages/toolbar/tsconfig.json   |   2 +
 5 files changed, 293 insertions(+), 260 deletions(-)
 delete mode 100644 packages/toolbar/src/toolbar.ts
 create mode 100644 packages/toolbar/src/toolbar.tsx

diff --git a/package-lock.json b/package-lock.json
index d8e19adc..94dc39b5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,6 +47,7 @@
         "rimraf": "^6.0.1",
         "rollup-plugin-dts": "^6.2.1",
         "ts-json-schema-generator": "^2.4.0",
+        "tsx-create-element": "^2.3.0",
         "typescript": "^5.8.3",
         "vega-typings": "^2.0.1",
         "vite": "^6.3.6"
@@ -13761,6 +13762,16 @@
         "node": ">=0.6.x"
       }
     },
+    "node_modules/tsx-create-element": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tsx-create-element/-/tsx-create-element-2.3.0.tgz",
+      "integrity": "sha512-BMRK11fA8dQSqufL7u5HpqVSIzHBrXJldT3VNKJ1677fJ9NwEWEL7vRfA1ue6rtRnkKA99dwiLk1TR6Ox+erJw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/tunnel": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/tunnel/-/tunnel-0.0.6.tgz",
diff --git a/package.json b/package.json
index 4edaabb8..60b438c2 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "rimraf": "^6.0.1",
     "rollup-plugin-dts": "^6.2.1",
     "ts-json-schema-generator": "^2.4.0",
+    "tsx-create-element": "^2.3.0",
     "typescript": "^5.8.3",
     "vega-typings": "^2.0.1",
     "vite": "^6.3.6"
diff --git a/packages/toolbar/src/toolbar.ts b/packages/toolbar/src/toolbar.ts
deleted file mode 100644
index c8f05790..00000000
--- a/packages/toolbar/src/toolbar.ts
+++ /dev/null
@@ -1,260 +0,0 @@
-/**
-* Copyright (c) Microsoft Corporation.
-* Licensed under the MIT License.
-*/
-
-import * as hw from 'html-wrapper';
-
-export interface ToolbarOptions {
-    tweakButton?: boolean;
-    downloadButton?: boolean;
-    restartButton?: boolean;
-    textarea?: HTMLTextAreaElement;
-    /**
-     * Mode to display content, allowed values: 'markdown' | 'json'.
-     * Only trusted values should be supplied.
-     * If an untrusted value is provided, it will be ignored and replaced with 'markdown'.
-     */
-    mode?: 'markdown' | 'json';
-    filename?: string;
-}
-
-export class Toolbar {
-    public toolbarElement: HTMLElement;
-    public folderSpan: HTMLElement;
-    public tweakButton: HTMLButtonElement;
-    public restartButton: HTMLButtonElement;
-    public downloadButton: HTMLButtonElement;
-    public mode: 'markdown' | 'json';
-    public filename: string;
-    private downloadPopup: HTMLDivElement;
-
-    constructor(toolbarElementOrSelector: HTMLElement | string, public options: ToolbarOptions = {}) {
-        this.filename = options.filename || 'sample';
-        // Runtime check to restrict mode to allowed values only
-        const allowedModes = ['markdown', 'json'];
-        this.mode = allowedModes.includes(options.mode as string) ? options.mode as 'markdown' | 'json' : 'markdown';
-        
-        // Create a safe displayMode variable to avoid CodeQL alerts
-        const displayMode = this.mode === 'json' ? 'json' : 'markdown';
-        
-        this.toolbarElement = typeof toolbarElementOrSelector === 'string' ? document.querySelector(toolbarElementOrSelector) : toolbarElementOrSelector;
-
-        if (!this.toolbarElement) {
-            throw new Error('Toolbar element not found');
-        }
-
-        const { home, target } = (window.location.hostname === 'localhost')
-            ? { home: '/', target: '_self' }
-            : { home: 'https://microsoft.github.io/', target: '_blank' };
-
-        const html = `
-<div>
-    <a href="${home}chartifact/" target="${target}">Chartifact</a> viewer
-</div>
-<div id="folderSpan" style="display: none;"></div>
-<div>
-    <button type="button" id="restart" style="display: none;">start over</button>
-    <button type="button" id="tweak" style="display: none;">view source</button>
-    <button type="button" id="download" style="display: none;">download</button>
-</div>
-<div id="downloadPopup" style="position: absolute; display: none; padding: 12px 16px; z-index: 1; background-color: inherit;">
-    <div style="margin-bottom: 8px;">Download as:</div>
-    <ul>
-        <li>
-            Source (just the ${displayMode} content)<br/>
-            <button type="button" id="download-md" style="margin-right: 8px;">Source</button>
-        </li>
-        <li>
-            HTML wrapper (content plus a shareable viewer)<br/>
-            <button type="button" id="download-html">HTML wrapper</button>
-        </li>
-    </ul>
-</div>
-        `;
-
-        this.toolbarElement.innerHTML = html;
-
-        this.folderSpan = this.toolbarElement.querySelector('#folderSpan') as HTMLElement;
-        this.tweakButton = this.toolbarElement.querySelector('#tweak') as HTMLButtonElement;
-        this.restartButton = this.toolbarElement.querySelector('#restart') as HTMLButtonElement;
-        this.downloadButton = this.toolbarElement.querySelector('#download') as HTMLButtonElement;
-        this.downloadPopup = this.toolbarElement.querySelector('#downloadPopup') as HTMLDivElement;
-
-        if (this.options.tweakButton) {
-            this.showTweakButton();
-        }
-
-        if (this.options.restartButton) {
-            this.showRestartButton();
-        }
-
-        if (this.options.downloadButton) {
-            this.showDownloadButton();
-        }
-
-        this.tweakButton?.addEventListener('click', () => {
-            this.options.textarea.style.display = this.options.textarea.style.display === 'none' ? '' : 'none';
-        });
-
-        this.restartButton?.addEventListener('click', () => {
-            window.location.reload();
-        });
-
-        this.downloadButton?.addEventListener('click', (e) => {
-            // Position popup near the button
-            const rect = this.downloadButton.getBoundingClientRect();
-            const viewportWidth = window.innerWidth;
-            const buttonCenter = rect.left + rect.width / 2;
-            const isLeftOfCenter = buttonCenter < viewportWidth / 2;
-
-            if (isLeftOfCenter) {
-                // Align popup to the left of the button
-                this.downloadPopup.style.left = `${rect.left + window.scrollX}px`;
-                this.downloadPopup.style.right = ''; // Clear right alignment
-            } else {
-                // Align popup to the right of the button
-                const popupWidth = this.downloadPopup.offsetWidth;
-                this.downloadPopup.style.right = `${viewportWidth - rect.right - window.scrollX}px`;
-                this.downloadPopup.style.left = ''; // Clear left alignment
-            }
-
-            this.downloadPopup.style.top = `${rect.bottom + window.scrollY + 4}px`;
-            this.downloadPopup.style.display = 'block';
-
-            // Hide popup on outside click
-            const hidePopup = (evt: MouseEvent) => {
-                if (!this.downloadPopup.contains(evt.target as Node) && evt.target !== this.downloadButton) {
-                    this.downloadPopup.style.display = 'none';
-                    document.removeEventListener('mousedown', hidePopup);
-                }
-            };
-            setTimeout(() => document.addEventListener('mousedown', hidePopup), 0);
-        });
-
-        // Download as markdown
-        this.downloadPopup.querySelector('#download-md')?.addEventListener('click', () => {
-            this.downloadPopup.style.display = 'none';
-            const textarea = this.options.textarea;
-            if (!textarea) return;
-            const content = textarea.value;
-            const extension = this.mode === 'json' ? '.idoc.json' : '.idoc.md';
-            const mimeType = this.mode === 'json' ? 'application/json' : 'text/markdown';
-            const filename = `${filenameWithoutPathOrExtension(this.filename)}${extension}`;
-            this.triggerDownload(content, filename, mimeType);
-        });
-
-        // Download as HTML wrapper
-        this.downloadPopup.querySelector('#download-html')?.addEventListener('click', () => {
-            this.downloadPopup.style.display = 'none';
-            const textarea = this.options.textarea;
-            if (!textarea) return;
-            const filename = `${filenameWithoutPathOrExtension(this.filename)}.idoc.html`;
-            const html = this.htmlWrapper();
-            this.triggerDownload(html, filename, 'text/html');
-        });
-    }
-
-    public htmlWrapper() {
-        if (this.mode === 'markdown') {
-            return hw.default.htmlMarkdownWrapper(this.filename, this.options.textarea.value);
-        } else if (this.mode === 'json') {
-            return hw.default.htmlJsonWrapper(this.filename, this.options.textarea.value);
-        }
-    }
-
-    // Helper method to trigger a download
-    private triggerDownload(content: string, filename: string, mimeType: string) {
-        const blob = new Blob([content], { type: mimeType });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        setTimeout(() => {
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-        }, 0);
-    }
-
-    showTweakButton() {
-        this.tweakButton.style.display = '';
-    }
-
-    showRestartButton() {
-        this.restartButton.style.display = '';
-    }
-
-    showDownloadButton() {
-        this.downloadButton.style.display = '';
-    }
-
-    manageTextareaVisibilityForAgents() {
-        const { textarea } = this.options;
-
-        if (!textarea) {
-            throw new Error('Textarea element not found');
-        }
-
-        // Bot-friendly content hiding strategy:
-        // 1. Bots that don't execute JS will see the textarea content in full
-        // 2. Bots that execute JS but have short timeouts will see content for 300ms
-        // 3. Human users see no visual flash due to flex:0 + removed padding/border
-        textarea.style.flex = '0';        // Collapse to zero width, no visual space
-        textarea.style.padding = '0';     // Remove default padding that creates pixel shift
-        textarea.style.border = '0';      // Remove default border that creates pixel shift
-        setTimeout(() => {
-            // After 300ms (longer than most bot JS timeouts), restore defaults and hide
-            textarea.style.flex = '';     // Restore original flex value from CSS
-            textarea.style.padding = '';  // Restore original padding from CSS
-            textarea.style.border = '';   // Restore original border from CSS
-            textarea.style.display = 'none'; // Fully hide from users (but they can unhide to edit)
-        }, 300);
-
-    }
-}
-
-function filenameWithoutPathOrExtension(filename: string) {
-    // Remove everything before the last slash or backslash
-    const base = filename.split(/[\\/]/).pop() || filename;
-    // If .idoc appears, remove it and everything after
-    const idocIdx = base.indexOf('.idoc');
-    if (idocIdx !== -1) {
-        return base.substring(0, idocIdx);
-    }
-    // Otherwise, remove the last extension if present
-    const lastDot = base.lastIndexOf('.');
-    if (lastDot > 0) {
-        return base.substring(0, lastDot);
-    }
-    return base;
-}
-
-// --- TESTS for filenameWithoutPathOrExtension ---
-
-// const filenameTests: [string, string][] = [
-//     // [input, expected]
-//     ["foo.md", "foo"],
-//     ["foo.idoc.md", "foo"],
-//     ["foo.idoc.json", "foo"],
-//     ["foo", "foo"],
-//     ["foo.bar.baz.md", "foo.bar.baz"],
-//     ["C:\\folder\\foo.md", "foo"],
-//     ["/home/user/foo.md", "foo"],
-//     ["folder/foo.idoc.md", "foo"],
-//     ["folder\\foo.idoc.json", "foo"],
-//     ["folder.with.dots/foo.bar.baz.md", "foo.bar.baz"],
-//     ["folder.with.dots\\foo.bar.baz.md", "foo.bar.baz"],
-//     ["", ""],
-// ];
-
-// filenameTests.forEach(([input, expected], i) => {
-//     const result = filenameWithoutPathOrExtension(input);
-//     const pass = result === expected;
-//     // eslint-disable-next-line no-console
-//     console.log(
-//         `${pass ? '✅' : '❌'} Test ${i + 1}: ${pass ? 'PASS' : `FAIL\n  Input: ${input}\n  Got: ${result}\n  Expected: ${expected}`}`
-//     );
-// });
-
diff --git a/packages/toolbar/src/toolbar.tsx b/packages/toolbar/src/toolbar.tsx
new file mode 100644
index 00000000..43d403ff
--- /dev/null
+++ b/packages/toolbar/src/toolbar.tsx
@@ -0,0 +1,279 @@
+/**
+* Copyright (c) Microsoft Corporation.
+* Licensed under the MIT License.
+*/
+
+import * as hw from 'html-wrapper';
+import { createElement, mount } from 'tsx-create-element';
+
+export interface ToolbarOptions {
+    tweakButton?: boolean;
+    downloadButton?: boolean;
+    restartButton?: boolean;
+    textarea?: HTMLTextAreaElement;
+    /**
+     * Mode to display content, allowed values: 'markdown' | 'json'.
+     * Only trusted values should be supplied.
+     * If an untrusted value is provided, it will be ignored and replaced with 'markdown'.
+     */
+    mode?: 'markdown' | 'json';
+    filename?: string;
+}
+
+interface ToolbarProps {
+    mode: 'markdown' | 'json';
+    restartClick: () => void;
+    tweakClick: () => void;
+    downloadClick: () => void;
+    restartDisplay: 'none' | '';
+    tweakDisplay: 'none' | '';
+    downloadDisplay: 'none' | '';
+    popupLeft?: string;
+    popupRight?: string;
+    downloadSource: () => void;
+    downloadHtml: () => void;
+}
+
+const ToolbarElement = (props: ToolbarProps) => {
+
+    const { mode, restartClick, tweakClick, downloadClick, restartDisplay, tweakDisplay, downloadDisplay, downloadSource, downloadHtml } = props;
+
+    const { home, target } = (window.location.hostname === 'localhost')
+        ? { home: '/', target: '_self' }
+        : { home: 'https://microsoft.github.io/', target: '_blank' };
+
+    const displayMode = mode === 'json' ? 'json' : 'markdown';
+
+    return (
+        <div style={{ backgroundColor: 'inherit' }}>
+            <div>
+                <a href={`${home}chartifact/`} target={target}>Chartifact</a> viewer
+            </div>
+            <div id="folderSpan" style={{ display: 'none' }}></div>
+            <div>
+                <button type="button" id="restart" style={{ display: restartDisplay }} onClick={restartClick}>start over</button>
+                <button type="button" id="tweak" style={{ display: tweakDisplay }} onClick={tweakClick}>view source</button>
+                <button type="button" id="download" style={{ display: downloadDisplay }} onClick={downloadClick}>download</button>
+            </div>
+            <div id="downloadPopup" style={{
+                position: 'absolute',
+                display: 'none',
+                padding: '12px 16px',
+                zIndex: 1,
+                backgroundColor: 'inherit',
+                left: props.popupLeft,
+                right: props.popupRight,
+            }}>
+                <div style={{ marginBottom: '8px' }}>Download as:</div>
+                <ul>
+                    <li>
+                        Source (just the {displayMode} content)<br />
+                        <button type="button" id="download-md" style={{ marginRight: '8px' }} onClick={downloadSource}>Source</button>
+                    </li>
+                    <li>
+                        HTML wrapper (content plus a shareable viewer)<br />
+                        <button type="button" id="download-html" onClick={downloadHtml}>HTML wrapper</button>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    );
+}
+
+export class Toolbar {
+    public toolbarElement: HTMLElement;
+    public downloadButton: HTMLButtonElement;
+    public downloadPopup: HTMLDivElement;
+    public mode: 'markdown' | 'json';
+    public filename: string;
+    public props: ToolbarProps;
+
+    constructor(toolbarElementOrSelector: HTMLElement | string, public options: ToolbarOptions = {}) {
+        this.filename = options.filename || 'sample';
+        // Runtime check to restrict mode to allowed values only
+        const allowedModes = ['markdown', 'json'];
+        this.mode = allowedModes.includes(options.mode as string) ? options.mode as 'markdown' | 'json' : 'markdown';
+
+        this.toolbarElement = typeof toolbarElementOrSelector === 'string' ? document.querySelector(toolbarElementOrSelector) : toolbarElementOrSelector;
+
+        if (!this.toolbarElement) {
+            throw new Error('Toolbar element not found');
+        }
+
+        this.props = {
+            mode: this.mode,
+            restartClick: () => window.location.reload(),
+            tweakClick: () => {
+                this.options.textarea.style.display = this.options.textarea.style.display === 'none' ? '' : 'none';
+            },
+            downloadClick: () => {
+                const { downloadPopup, downloadButton } = this;
+                
+                // Position popup near the button
+                const rect = downloadButton.getBoundingClientRect();
+                const viewportWidth = window.innerWidth;
+                const buttonCenter = rect.left + rect.width / 2;
+                const isLeftOfCenter = buttonCenter < viewportWidth / 2;
+
+                if (isLeftOfCenter) {
+                    // Align popup to the left of the button
+                    downloadPopup.style.left = `${rect.left + window.scrollX}px`;
+                    downloadPopup.style.right = ''; // Clear right alignment
+                } else {
+                    // Align popup to the right of the button
+                    const popupWidth = downloadPopup.offsetWidth;
+                    downloadPopup.style.right = `${viewportWidth - rect.right - window.scrollX}px`;
+                    downloadPopup.style.left = ''; // Clear left alignment
+                }
+
+                downloadPopup.style.top = `${rect.bottom + window.scrollY + 4}px`;
+                downloadPopup.style.display = 'block';
+
+                // Hide popup on outside click
+                const hidePopup = (evt: MouseEvent) => {
+                    if (!downloadPopup.contains(evt.target as Node) && evt.target !== downloadButton) {
+                        downloadPopup.style.display = 'none';
+                        document.removeEventListener('mousedown', hidePopup);
+                    }
+                };
+                setTimeout(() => document.addEventListener('mousedown', hidePopup), 0);
+            },
+            restartDisplay: this.options.restartButton ? '' : 'none',
+            tweakDisplay: this.options.tweakButton ? '' : 'none',
+            downloadDisplay: this.options.downloadButton ? '' : 'none',
+            downloadSource: () => {
+                this.downloadPopup.style.display = 'none';
+                const textarea = this.options.textarea;
+                if (!textarea) return;
+                const content = textarea.value;
+                const extension = this.mode === 'json' ? '.idoc.json' : '.idoc.md';
+                const mimeType = this.mode === 'json' ? 'application/json' : 'text/markdown';
+                const filename = `${filenameWithoutPathOrExtension(this.filename)}${extension}`;
+                this.triggerDownload(content, filename, mimeType);
+
+            },
+            downloadHtml: () => {
+                this.downloadPopup.style.display = 'none';
+                const textarea = this.options.textarea;
+                if (!textarea) return;
+                const html = this.htmlWrapper();
+                const filename = `${filenameWithoutPathOrExtension(this.filename)}.idoc.html`;
+                this.triggerDownload(html, filename, 'text/html');
+            },
+        };
+
+        this.render();
+    }
+
+    public htmlWrapper() {
+        if (this.mode === 'markdown') {
+            return hw.default.htmlMarkdownWrapper(this.filename, this.options.textarea.value);
+        } else if (this.mode === 'json') {
+            return hw.default.htmlJsonWrapper(this.filename, this.options.textarea.value);
+        }
+    }
+
+    render() {
+        mount(ToolbarElement(this.props), this.toolbarElement);
+        this.downloadButton = this.toolbarElement.querySelector('#download') as HTMLButtonElement;
+        this.downloadPopup = this.toolbarElement.querySelector('#downloadPopup') as HTMLDivElement;
+    }
+
+    // Helper method to trigger a download
+    private triggerDownload(content: string, filename: string, mimeType: string) {
+        const blob = new Blob([content], { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(() => {
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }, 0);
+    }
+
+    showTweakButton() {
+        this.props.tweakDisplay = '';
+        this.render();
+    }
+
+    showRestartButton() {
+        this.props.restartDisplay = '';
+        this.render();
+    }
+
+    showDownloadButton() {
+        this.props.downloadDisplay = '';
+        this.render();
+    }
+
+    manageTextareaVisibilityForAgents() {
+        const { textarea } = this.options;
+
+        if (!textarea) {
+            throw new Error('Textarea element not found');
+        }
+
+        // Bot-friendly content hiding strategy:
+        // 1. Bots that don't execute JS will see the textarea content in full
+        // 2. Bots that execute JS but have short timeouts will see content for 300ms
+        // 3. Human users see no visual flash due to flex:0 + removed padding/border
+        textarea.style.flex = '0';        // Collapse to zero width, no visual space
+        textarea.style.padding = '0';     // Remove default padding that creates pixel shift
+        textarea.style.border = '0';      // Remove default border that creates pixel shift
+        setTimeout(() => {
+            // After 300ms (longer than most bot JS timeouts), restore defaults and hide
+            textarea.style.flex = '';     // Restore original flex value from CSS
+            textarea.style.padding = '';  // Restore original padding from CSS
+            textarea.style.border = '';   // Restore original border from CSS
+            textarea.style.display = 'none'; // Fully hide from users (but they can unhide to edit)
+        }, 300);
+
+    }
+}
+
+function filenameWithoutPathOrExtension(filename: string) {
+    // Remove everything before the last slash or backslash
+    const base = filename.split(/[\\/]/).pop() || filename;
+    // If .idoc appears, remove it and everything after
+    const idocIdx = base.indexOf('.idoc');
+    if (idocIdx !== -1) {
+        return base.substring(0, idocIdx);
+    }
+    // Otherwise, remove the last extension if present
+    const lastDot = base.lastIndexOf('.');
+    if (lastDot > 0) {
+        return base.substring(0, lastDot);
+    }
+    return base;
+}
+
+// --- TESTS for filenameWithoutPathOrExtension ---
+
+// const filenameTests: [string, string][] = [
+//     // [input, expected]
+//     ["foo.md", "foo"],
+//     ["foo.idoc.md", "foo"],
+//     ["foo.idoc.json", "foo"],
+//     ["foo", "foo"],
+//     ["foo.bar.baz.md", "foo.bar.baz"],
+//     ["C:\\folder\\foo.md", "foo"],
+//     ["/home/user/foo.md", "foo"],
+//     ["folder/foo.idoc.md", "foo"],
+//     ["folder\\foo.idoc.json", "foo"],
+//     ["folder.with.dots/foo.bar.baz.md", "foo.bar.baz"],
+//     ["folder.with.dots\\foo.bar.baz.md", "foo.bar.baz"],
+//     ["", ""],
+// ];
+
+// filenameTests.forEach(([input, expected], i) => {
+//     const result = filenameWithoutPathOrExtension(input);
+//     const pass = result === expected;
+//     // eslint-disable-next-line no-console
+//     console.log(
+//         `${pass ? '✅' : '❌'} Test ${i + 1}: ${pass ? 'PASS' : `FAIL\n  Input: ${input}\n  Got: ${result}\n  Expected: ${expected}`}`
+//     );
+// });
+
diff --git a/packages/toolbar/tsconfig.json b/packages/toolbar/tsconfig.json
index 4b1e9828..cdb23210 100644
--- a/packages/toolbar/tsconfig.json
+++ b/packages/toolbar/tsconfig.json
@@ -1,6 +1,8 @@
 {
     "extends": "../tsconfig.base.json",
     "compilerOptions": {
+        "jsx": "react",
+        "jsxFactory": "createElement",
         "outDir": "dist/esnext"
     },
     "include": [

From 29da5fde78a723f76dff7eee4a5f5785e6d350be Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Tue, 9 Sep 2025 22:25:36 -0700
Subject: [PATCH 10/17] Add folderSpan property to Toolbar class and update
 initialization

---
 packages/toolbar/src/toolbar.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/toolbar/src/toolbar.tsx b/packages/toolbar/src/toolbar.tsx
index 43d403ff..143bcab5 100644
--- a/packages/toolbar/src/toolbar.tsx
+++ b/packages/toolbar/src/toolbar.tsx
@@ -82,6 +82,7 @@ const ToolbarElement = (props: ToolbarProps) => {
 
 export class Toolbar {
     public toolbarElement: HTMLElement;
+    public folderSpan: HTMLElement;
     public downloadButton: HTMLButtonElement;
     public downloadPopup: HTMLDivElement;
     public mode: 'markdown' | 'json';
@@ -108,7 +109,7 @@ export class Toolbar {
             },
             downloadClick: () => {
                 const { downloadPopup, downloadButton } = this;
-                
+
                 // Position popup near the button
                 const rect = downloadButton.getBoundingClientRect();
                 const viewportWidth = window.innerWidth;
@@ -177,6 +178,7 @@ export class Toolbar {
         mount(ToolbarElement(this.props), this.toolbarElement);
         this.downloadButton = this.toolbarElement.querySelector('#download') as HTMLButtonElement;
         this.downloadPopup = this.toolbarElement.querySelector('#downloadPopup') as HTMLDivElement;
+        this.folderSpan = this.toolbarElement.querySelector('#folderSpan') as HTMLDivElement;
     }
 
     // Helper method to trigger a download

From 6a47c9446136e40d16967d4ed0158765746696ed Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Tue, 9 Sep 2025 22:40:58 -0700
Subject: [PATCH 11/17] Refactor toolbar CSS classes for improved structure and
 consistency

---
 packages/toolbar/chartifact-toolbar.css |  6 +++---
 packages/toolbar/src/toolbar.tsx        | 12 ++++--------
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/toolbar/chartifact-toolbar.css b/packages/toolbar/chartifact-toolbar.css
index 2e4e8848..402c025c 100644
--- a/packages/toolbar/chartifact-toolbar.css
+++ b/packages/toolbar/chartifact-toolbar.css
@@ -58,17 +58,17 @@
 }
 
 /* Default: stack toolbar sections vertically */
-.chartifact-toolbar > div {
+.chartifact-toolbar .toolbar-item {
   margin: 6px 0;
 }
 
 /* Wide screens: layout horizontally */
 @media (min-width: 1000px) {
-  .chartifact-toolbar {
+  .chartifact-toolbar .toolbar-group {
     display: flex;
     justify-content: space-between;
   }
-  .chartifact-toolbar > div {
+  .chartifact-toolbar .toolbar-item {
     display: inline-block;
     margin: 0;
   }
diff --git a/packages/toolbar/src/toolbar.tsx b/packages/toolbar/src/toolbar.tsx
index 143bcab5..8741a39d 100644
--- a/packages/toolbar/src/toolbar.tsx
+++ b/packages/toolbar/src/toolbar.tsx
@@ -28,8 +28,6 @@ interface ToolbarProps {
     restartDisplay: 'none' | '';
     tweakDisplay: 'none' | '';
     downloadDisplay: 'none' | '';
-    popupLeft?: string;
-    popupRight?: string;
     downloadSource: () => void;
     downloadHtml: () => void;
 }
@@ -45,12 +43,12 @@ const ToolbarElement = (props: ToolbarProps) => {
     const displayMode = mode === 'json' ? 'json' : 'markdown';
 
     return (
-        <div style={{ backgroundColor: 'inherit' }}>
-            <div>
+        <div className='toolbar-group' style={{ backgroundColor: 'inherit' }}>
+            <div className='toolbar-item'>
                 <a href={`${home}chartifact/`} target={target}>Chartifact</a> viewer
             </div>
-            <div id="folderSpan" style={{ display: 'none' }}></div>
-            <div>
+            <div className='toolbar-item' id="folderSpan" style={{ display: 'none' }}></div>
+            <div className='toolbar-item'>
                 <button type="button" id="restart" style={{ display: restartDisplay }} onClick={restartClick}>start over</button>
                 <button type="button" id="tweak" style={{ display: tweakDisplay }} onClick={tweakClick}>view source</button>
                 <button type="button" id="download" style={{ display: downloadDisplay }} onClick={downloadClick}>download</button>
@@ -61,8 +59,6 @@ const ToolbarElement = (props: ToolbarProps) => {
                 padding: '12px 16px',
                 zIndex: 1,
                 backgroundColor: 'inherit',
-                left: props.popupLeft,
-                right: props.popupRight,
             }}>
                 <div style={{ marginBottom: '8px' }}>Download as:</div>
                 <ul>

From 7aee5f9a65a7824ec1623d2c7958b0adf3fbf453 Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Tue, 9 Sep 2025 22:43:07 -0700
Subject: [PATCH 12/17] Update toolbar CSS link to include version query
 parameter

---
 docs/_layouts/view.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_layouts/view.html b/docs/_layouts/view.html
index ebe918b9..f3be90c2 100644
--- a/docs/_layouts/view.html
+++ b/docs/_layouts/view.html
@@ -8,7 +8,7 @@
     <script src="https://cdn.jsdelivr.net/npm/vega@5.29.0"></script>
     <script src="../dist/v1/chartifact.host.umd.js"></script>
     <link rel="stylesheet" href="{{ '/assets/css/footer.css' | relative_url }}" />
-    <link rel="stylesheet" href="../dist/v1/chartifact-toolbar.css" />
+    <link rel="stylesheet" href="../dist/v1/chartifact-toolbar.css?1" />
 </head>
 
 <body class="chartifact-body">

From 72cdf7c90f9c9f81d27c9513593e3e45d9399710 Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Tue, 9 Sep 2025 22:44:15 -0700
Subject: [PATCH 13/17] regen

---
 docs/dist/v1/chartifact-toolbar.css    |   6 +-
 docs/dist/v1/chartifact.host.umd.js    | 355 ++++++++++++++++++-------
 docs/dist/v1/chartifact.toolbar.umd.js | 309 ++++++++++++++-------
 3 files changed, 481 insertions(+), 189 deletions(-)

diff --git a/docs/dist/v1/chartifact-toolbar.css b/docs/dist/v1/chartifact-toolbar.css
index 2e4e8848..402c025c 100644
--- a/docs/dist/v1/chartifact-toolbar.css
+++ b/docs/dist/v1/chartifact-toolbar.css
@@ -58,17 +58,17 @@
 }
 
 /* Default: stack toolbar sections vertically */
-.chartifact-toolbar > div {
+.chartifact-toolbar .toolbar-item {
   margin: 6px 0;
 }
 
 /* Wide screens: layout horizontally */
 @media (min-width: 1000px) {
-  .chartifact-toolbar {
+  .chartifact-toolbar .toolbar-group {
     display: flex;
     justify-content: space-between;
   }
-  .chartifact-toolbar > div {
+  .chartifact-toolbar .toolbar-item {
     display: inline-block;
     margin: 0;
   }
diff --git a/docs/dist/v1/chartifact.host.umd.js b/docs/dist/v1/chartifact.host.umd.js
index e6f58d62..a2e236ea 100644
--- a/docs/dist/v1/chartifact.host.umd.js
+++ b/docs/dist/v1/chartifact.host.umd.js
@@ -3140,112 +3140,270 @@ ${htmlJsonJs}
     htmlMarkdownWrapper,
     htmlJsonWrapper
   };
+  const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+  function decamelize(str2, separator = "-") {
+    return str2.replace(/([a-z\d])([A-Z])/g, "$1" + separator + "$2").replace(/([A-Z]+)([A-Z][a-z\d]+)/g, "$1" + separator + "$2").toLowerCase();
+  }
+  function createElement(tag, attrs, ...children) {
+    if (typeof tag === "function") {
+      const fn = tag;
+      let props = attrs;
+      if (props === null || props === void 0) {
+        props = { children };
+      } else {
+        props.children = children;
+      }
+      return fn(props);
+    } else {
+      const ns = tag === "svg" ? SVG_NAMESPACE : null;
+      const el = ns ? document.createElementNS(ns, tag) : document.createElement(tag);
+      const map2 = attrs;
+      let ref;
+      for (let name in map2) {
+        if (name && map2.hasOwnProperty(name)) {
+          let value = map2[name];
+          if (name === "className" && value !== void 0) {
+            setAttribute(el, ns, "class", value.toString());
+          } else if (name === "disabled" && !value) ;
+          else if (value === null || value === void 0) {
+            continue;
+          } else if (value === true) {
+            setAttribute(el, ns, name, name);
+          } else if (typeof value === "function") {
+            if (name === "ref") {
+              ref = value;
+            } else {
+              el[name.toLowerCase()] = value;
+            }
+          } else if (typeof value === "object") {
+            setAttribute(el, ns, name, flatten(value));
+          } else {
+            setAttribute(el, ns, name, value.toString());
+          }
+        }
+      }
+      if (children && children.length > 0) {
+        appendChildren(el, children);
+      }
+      if (ref) {
+        ref(el);
+      }
+      return el;
+    }
+  }
+  function setAttribute(el, ns, name, value) {
+    if (ns) {
+      el.setAttributeNS(null, name, value);
+    } else {
+      el.setAttribute(name, value);
+    }
+  }
+  function flatten(o) {
+    const arr = [];
+    for (let prop in o)
+      arr.push(`${decamelize(prop, "-")}:${o[prop]}`);
+    return arr.join(";");
+  }
+  function isInsideForeignObject(element) {
+    let current = element;
+    while (current) {
+      if (current.tagName.toLowerCase() === "foreignobject") {
+        return true;
+      }
+      current = current.parentElement;
+    }
+    return false;
+  }
+  function recreateWithSvgNamespace(element) {
+    const svgElement = document.createElementNS(SVG_NAMESPACE, element.tagName.toLowerCase());
+    for (let i2 = 0; i2 < element.attributes.length; i2++) {
+      const attr = element.attributes[i2];
+      svgElement.setAttributeNS(null, attr.name, attr.value);
+    }
+    const eventProperties = [
+      "onclick",
+      "onmousedown",
+      "onmouseup",
+      "onmouseover",
+      "onmouseout",
+      "onmousemove",
+      "onkeydown",
+      "onkeyup",
+      "onkeypress",
+      "onfocus",
+      "onblur"
+    ];
+    for (const prop of eventProperties) {
+      if (element[prop]) {
+        svgElement[prop] = element[prop];
+      }
+    }
+    for (let i2 = 0; i2 < element.childNodes.length; i2++) {
+      const child = element.childNodes[i2];
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        svgElement.appendChild(recreateWithSvgNamespace(child));
+      } else {
+        svgElement.appendChild(child.cloneNode(true));
+      }
+    }
+    return svgElement;
+  }
+  function addChild(parentElement, child) {
+    if (child === null || child === void 0 || typeof child === "boolean") {
+      return;
+    } else if (Array.isArray(child)) {
+      appendChildren(parentElement, child);
+    } else if (isElement(child)) {
+      const childEl = child;
+      if (parentElement.namespaceURI === SVG_NAMESPACE && childEl.namespaceURI !== SVG_NAMESPACE && childEl.tagName.toLowerCase() !== "foreignobject" && !isInsideForeignObject(parentElement)) {
+        const recreated = recreateWithSvgNamespace(childEl);
+        parentElement.appendChild(recreated);
+      } else {
+        parentElement.appendChild(childEl);
+      }
+    } else {
+      parentElement.appendChild(document.createTextNode(child.toString()));
+    }
+  }
+  function appendChildren(parentElement, children) {
+    children.forEach((child) => addChild(parentElement, child));
+  }
+  function isElement(el) {
+    return !!el.nodeType;
+  }
+  function mount(element, container) {
+    container.innerHTML = "";
+    if (element) {
+      addChild(container, element);
+    }
+  }
+  const ToolbarElement = (props) => {
+    const { mode, restartClick, tweakClick, downloadClick, restartDisplay, tweakDisplay, downloadDisplay, downloadSource, downloadHtml } = props;
+    const { home, target } = window.location.hostname === "localhost" ? { home: "/", target: "_self" } : { home: "https://microsoft.github.io/", target: "_blank" };
+    const displayMode = mode === "json" ? "json" : "markdown";
+    return createElement(
+      "div",
+      { className: "toolbar-group", style: { backgroundColor: "inherit" } },
+      createElement(
+        "div",
+        { className: "toolbar-item" },
+        createElement("a", { href: `${home}chartifact/`, target }, "Chartifact"),
+        " viewer"
+      ),
+      createElement("div", { className: "toolbar-item", id: "folderSpan", style: { display: "none" } }),
+      createElement(
+        "div",
+        { className: "toolbar-item" },
+        createElement("button", { type: "button", id: "restart", style: { display: restartDisplay }, onClick: restartClick }, "start over"),
+        createElement("button", { type: "button", id: "tweak", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"),
+        createElement("button", { type: "button", id: "download", style: { display: downloadDisplay }, onClick: downloadClick }, "download")
+      ),
+      createElement(
+        "div",
+        { id: "downloadPopup", style: {
+          position: "absolute",
+          display: "none",
+          padding: "12px 16px",
+          zIndex: 1,
+          backgroundColor: "inherit"
+        } },
+        createElement("div", { style: { marginBottom: "8px" } }, "Download as:"),
+        createElement(
+          "ul",
+          null,
+          createElement(
+            "li",
+            null,
+            "Source (just the ",
+            displayMode,
+            " content)",
+            createElement("br", null),
+            createElement("button", { type: "button", id: "download-md", style: { marginRight: "8px" }, onClick: downloadSource }, "Source")
+          ),
+          createElement(
+            "li",
+            null,
+            "HTML wrapper (content plus a shareable viewer)",
+            createElement("br", null),
+            createElement("button", { type: "button", id: "download-html", onClick: downloadHtml }, "HTML wrapper")
+          )
+        )
+      )
+    );
+  };
   class Toolbar {
     constructor(toolbarElementOrSelector, options = {}) {
       __publicField(this, "options");
       __publicField(this, "toolbarElement");
       __publicField(this, "folderSpan");
-      __publicField(this, "tweakButton");
-      __publicField(this, "restartButton");
       __publicField(this, "downloadButton");
+      __publicField(this, "downloadPopup");
       __publicField(this, "mode");
       __publicField(this, "filename");
-      __publicField(this, "downloadPopup");
-      var _a, _b, _c, _d, _e;
+      __publicField(this, "props");
       this.options = options;
       this.filename = options.filename || "sample";
-      this.mode = options.mode || "markdown";
+      const allowedModes = ["markdown", "json"];
+      this.mode = allowedModes.includes(options.mode) ? options.mode : "markdown";
       this.toolbarElement = typeof toolbarElementOrSelector === "string" ? document.querySelector(toolbarElementOrSelector) : toolbarElementOrSelector;
       if (!this.toolbarElement) {
         throw new Error("Toolbar element not found");
       }
-      const { home, target } = window.location.hostname === "localhost" ? { home: "/", target: "_self" } : { home: "https://microsoft.github.io/", target: "_blank" };
-      const html = `
-<div>
-    <a href="${home}chartifact/" target="${target}">Chartifact</a> viewer
-</div>
-<div id="folderSpan" style="display: none;"></div>
-<div>
-    <button type="button" id="restart" style="display: none;">start over</button>
-    <button type="button" id="tweak" style="display: none;">view source</button>
-    <button type="button" id="download" style="display: none;">download</button>
-</div>
-<div id="downloadPopup" style="position: absolute; display: none; padding: 12px 16px; z-index: 1; background-color: inherit;">
-    <div style="margin-bottom: 8px;">Download as:</div>
-    <ul>
-        <li>
-            Source markdown (just the content)<br/>
-            <button type="button" id="download-md" style="margin-right: 8px;">Source markdown</button>
-        </li>
-        <li>
-            HTML wrapper (content plus a shareable viewer)<br/>
-            <button type="button" id="download-html">HTML wrapper</button>
-        </li>
-    </ul>
-</div>
-        `;
-      this.toolbarElement.innerHTML = html;
-      this.folderSpan = this.toolbarElement.querySelector("#folderSpan");
-      this.tweakButton = this.toolbarElement.querySelector("#tweak");
-      this.restartButton = this.toolbarElement.querySelector("#restart");
-      this.downloadButton = this.toolbarElement.querySelector("#download");
-      this.downloadPopup = this.toolbarElement.querySelector("#downloadPopup");
-      if (this.options.tweakButton) {
-        this.showTweakButton();
-      }
-      if (this.options.restartButton) {
-        this.showRestartButton();
-      }
-      if (this.options.downloadButton) {
-        this.showDownloadButton();
-      }
-      (_a = this.tweakButton) == null ? void 0 : _a.addEventListener("click", () => {
-        this.options.textarea.style.display = this.options.textarea.style.display === "none" ? "" : "none";
-      });
-      (_b = this.restartButton) == null ? void 0 : _b.addEventListener("click", () => {
-        window.location.reload();
-      });
-      (_c = this.downloadButton) == null ? void 0 : _c.addEventListener("click", (e) => {
-        const rect = this.downloadButton.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const buttonCenter = rect.left + rect.width / 2;
-        const isLeftOfCenter = buttonCenter < viewportWidth / 2;
-        if (isLeftOfCenter) {
-          this.downloadPopup.style.left = `${rect.left + window.scrollX}px`;
-          this.downloadPopup.style.right = "";
-        } else {
-          this.downloadPopup.offsetWidth;
-          this.downloadPopup.style.right = `${viewportWidth - rect.right - window.scrollX}px`;
-          this.downloadPopup.style.left = "";
-        }
-        this.downloadPopup.style.top = `${rect.bottom + window.scrollY + 4}px`;
-        this.downloadPopup.style.display = "block";
-        const hidePopup = (evt) => {
-          if (!this.downloadPopup.contains(evt.target) && evt.target !== this.downloadButton) {
-            this.downloadPopup.style.display = "none";
-            document.removeEventListener("mousedown", hidePopup);
+      this.props = {
+        mode: this.mode,
+        restartClick: () => window.location.reload(),
+        tweakClick: () => {
+          this.options.textarea.style.display = this.options.textarea.style.display === "none" ? "" : "none";
+        },
+        downloadClick: () => {
+          const { downloadPopup, downloadButton } = this;
+          const rect = downloadButton.getBoundingClientRect();
+          const viewportWidth = window.innerWidth;
+          const buttonCenter = rect.left + rect.width / 2;
+          const isLeftOfCenter = buttonCenter < viewportWidth / 2;
+          if (isLeftOfCenter) {
+            downloadPopup.style.left = `${rect.left + window.scrollX}px`;
+            downloadPopup.style.right = "";
+          } else {
+            downloadPopup.offsetWidth;
+            downloadPopup.style.right = `${viewportWidth - rect.right - window.scrollX}px`;
+            downloadPopup.style.left = "";
           }
-        };
-        setTimeout(() => document.addEventListener("mousedown", hidePopup), 0);
-      });
-      (_d = this.downloadPopup.querySelector("#download-md")) == null ? void 0 : _d.addEventListener("click", () => {
-        this.downloadPopup.style.display = "none";
-        const textarea = this.options.textarea;
-        if (!textarea)
-          return;
-        const content = textarea.value;
-        const filename = `${filenameWithoutPathOrExtension(this.filename)}.idoc.md`;
-        this.triggerDownload(content, filename, "text/markdown");
-      });
-      (_e = this.downloadPopup.querySelector("#download-html")) == null ? void 0 : _e.addEventListener("click", () => {
-        this.downloadPopup.style.display = "none";
-        const textarea = this.options.textarea;
-        if (!textarea)
-          return;
-        const filename = `${filenameWithoutPathOrExtension(this.filename)}.idoc.html`;
-        const html2 = this.htmlWrapper();
-        this.triggerDownload(html2, filename, "text/html");
-      });
+          downloadPopup.style.top = `${rect.bottom + window.scrollY + 4}px`;
+          downloadPopup.style.display = "block";
+          const hidePopup = (evt) => {
+            if (!downloadPopup.contains(evt.target) && evt.target !== downloadButton) {
+              downloadPopup.style.display = "none";
+              document.removeEventListener("mousedown", hidePopup);
+            }
+          };
+          setTimeout(() => document.addEventListener("mousedown", hidePopup), 0);
+        },
+        restartDisplay: this.options.restartButton ? "" : "none",
+        tweakDisplay: this.options.tweakButton ? "" : "none",
+        downloadDisplay: this.options.downloadButton ? "" : "none",
+        downloadSource: () => {
+          this.downloadPopup.style.display = "none";
+          const textarea = this.options.textarea;
+          if (!textarea)
+            return;
+          const content = textarea.value;
+          const extension = this.mode === "json" ? ".idoc.json" : ".idoc.md";
+          const mimeType = this.mode === "json" ? "application/json" : "text/markdown";
+          const filename = `${filenameWithoutPathOrExtension(this.filename)}${extension}`;
+          this.triggerDownload(content, filename, mimeType);
+        },
+        downloadHtml: () => {
+          this.downloadPopup.style.display = "none";
+          const textarea = this.options.textarea;
+          if (!textarea)
+            return;
+          const html = this.htmlWrapper();
+          const filename = `${filenameWithoutPathOrExtension(this.filename)}.idoc.html`;
+          this.triggerDownload(html, filename, "text/html");
+        }
+      };
+      this.render();
     }
     htmlWrapper() {
       if (this.mode === "markdown") {
@@ -3254,6 +3412,12 @@ ${htmlJsonJs}
         return index$1.htmlJsonWrapper(this.filename, this.options.textarea.value);
       }
     }
+    render() {
+      mount(ToolbarElement(this.props), this.toolbarElement);
+      this.downloadButton = this.toolbarElement.querySelector("#download");
+      this.downloadPopup = this.toolbarElement.querySelector("#downloadPopup");
+      this.folderSpan = this.toolbarElement.querySelector("#folderSpan");
+    }
     // Helper method to trigger a download
     triggerDownload(content, filename, mimeType) {
       const blob = new Blob([content], { type: mimeType });
@@ -3269,13 +3433,16 @@ ${htmlJsonJs}
       }, 0);
     }
     showTweakButton() {
-      this.tweakButton.style.display = "";
+      this.props.tweakDisplay = "";
+      this.render();
     }
     showRestartButton() {
-      this.restartButton.style.display = "";
+      this.props.restartDisplay = "";
+      this.render();
     }
     showDownloadButton() {
-      this.downloadButton.style.display = "";
+      this.props.downloadDisplay = "";
+      this.render();
     }
     manageTextareaVisibilityForAgents() {
       const { textarea } = this.options;
diff --git a/docs/dist/v1/chartifact.toolbar.umd.js b/docs/dist/v1/chartifact.toolbar.umd.js
index 6a2d243f..2757168f 100644
--- a/docs/dist/v1/chartifact.toolbar.umd.js
+++ b/docs/dist/v1/chartifact.toolbar.umd.js
@@ -172,109 +172,225 @@ ${htmlJsonJs}
     htmlMarkdownWrapper,
     htmlJsonWrapper
   };
+  const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+  function decamelize(str, separator = "-") {
+    return str.replace(/([a-z\d])([A-Z])/g, "$1" + separator + "$2").replace(/([A-Z]+)([A-Z][a-z\d]+)/g, "$1" + separator + "$2").toLowerCase();
+  }
+  function createElement(tag, attrs, ...children) {
+    if (typeof tag === "function") {
+      const fn = tag;
+      let props = attrs;
+      if (props === null || props === void 0) {
+        props = { children };
+      } else {
+        props.children = children;
+      }
+      return fn(props);
+    } else {
+      const ns = tag === "svg" ? SVG_NAMESPACE : null;
+      const el = ns ? document.createElementNS(ns, tag) : document.createElement(tag);
+      const map = attrs;
+      let ref;
+      for (let name in map) {
+        if (name && map.hasOwnProperty(name)) {
+          let value = map[name];
+          if (name === "className" && value !== void 0) {
+            setAttribute(el, ns, "class", value.toString());
+          } else if (name === "disabled" && !value) ;
+          else if (value === null || value === void 0) {
+            continue;
+          } else if (value === true) {
+            setAttribute(el, ns, name, name);
+          } else if (typeof value === "function") {
+            if (name === "ref") {
+              ref = value;
+            } else {
+              el[name.toLowerCase()] = value;
+            }
+          } else if (typeof value === "object") {
+            setAttribute(el, ns, name, flatten(value));
+          } else {
+            setAttribute(el, ns, name, value.toString());
+          }
+        }
+      }
+      if (children && children.length > 0) {
+        appendChildren(el, children);
+      }
+      if (ref) {
+        ref(el);
+      }
+      return el;
+    }
+  }
+  function setAttribute(el, ns, name, value) {
+    if (ns) {
+      el.setAttributeNS(null, name, value);
+    } else {
+      el.setAttribute(name, value);
+    }
+  }
+  function flatten(o) {
+    const arr = [];
+    for (let prop in o)
+      arr.push(`${decamelize(prop, "-")}:${o[prop]}`);
+    return arr.join(";");
+  }
+  function isInsideForeignObject(element) {
+    let current = element;
+    while (current) {
+      if (current.tagName.toLowerCase() === "foreignobject") {
+        return true;
+      }
+      current = current.parentElement;
+    }
+    return false;
+  }
+  function recreateWithSvgNamespace(element) {
+    const svgElement = document.createElementNS(SVG_NAMESPACE, element.tagName.toLowerCase());
+    for (let i = 0; i < element.attributes.length; i++) {
+      const attr = element.attributes[i];
+      svgElement.setAttributeNS(null, attr.name, attr.value);
+    }
+    const eventProperties = [
+      "onclick",
+      "onmousedown",
+      "onmouseup",
+      "onmouseover",
+      "onmouseout",
+      "onmousemove",
+      "onkeydown",
+      "onkeyup",
+      "onkeypress",
+      "onfocus",
+      "onblur"
+    ];
+    for (const prop of eventProperties) {
+      if (element[prop]) {
+        svgElement[prop] = element[prop];
+      }
+    }
+    for (let i = 0; i < element.childNodes.length; i++) {
+      const child = element.childNodes[i];
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        svgElement.appendChild(recreateWithSvgNamespace(child));
+      } else {
+        svgElement.appendChild(child.cloneNode(true));
+      }
+    }
+    return svgElement;
+  }
+  function addChild(parentElement, child) {
+    if (child === null || child === void 0 || typeof child === "boolean") {
+      return;
+    } else if (Array.isArray(child)) {
+      appendChildren(parentElement, child);
+    } else if (isElement(child)) {
+      const childEl = child;
+      if (parentElement.namespaceURI === SVG_NAMESPACE && childEl.namespaceURI !== SVG_NAMESPACE && childEl.tagName.toLowerCase() !== "foreignobject" && !isInsideForeignObject(parentElement)) {
+        const recreated = recreateWithSvgNamespace(childEl);
+        parentElement.appendChild(recreated);
+      } else {
+        parentElement.appendChild(childEl);
+      }
+    } else {
+      parentElement.appendChild(document.createTextNode(child.toString()));
+    }
+  }
+  function appendChildren(parentElement, children) {
+    children.forEach((child) => addChild(parentElement, child));
+  }
+  function isElement(el) {
+    return !!el.nodeType;
+  }
+  function mount(element, container) {
+    container.innerHTML = "";
+    if (element) {
+      addChild(container, element);
+    }
+  }
+  const ToolbarElement = (props) => {
+    const { mode, restartClick, tweakClick, downloadClick, restartDisplay, tweakDisplay, downloadDisplay, downloadSource, downloadHtml } = props;
+    const { home, target } = window.location.hostname === "localhost" ? { home: "/", target: "_self" } : { home: "https://microsoft.github.io/", target: "_blank" };
+    const displayMode = mode === "json" ? "json" : "markdown";
+    return /* @__PURE__ */ createElement("div", { className: "toolbar-group", style: { backgroundColor: "inherit" } }, /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("a", { href: `${home}chartifact/`, target }, "Chartifact"), " viewer"), /* @__PURE__ */ createElement("div", { className: "toolbar-item", id: "folderSpan", style: { display: "none" } }), /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("button", { type: "button", id: "restart", style: { display: restartDisplay }, onClick: restartClick }, "start over"), /* @__PURE__ */ createElement("button", { type: "button", id: "tweak", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"), /* @__PURE__ */ createElement("button", { type: "button", id: "download", style: { display: downloadDisplay }, onClick: downloadClick }, "download")), /* @__PURE__ */ createElement("div", { id: "downloadPopup", style: {
+      position: "absolute",
+      display: "none",
+      padding: "12px 16px",
+      zIndex: 1,
+      backgroundColor: "inherit"
+    } }, /* @__PURE__ */ createElement("div", { style: { marginBottom: "8px" } }, "Download as:"), /* @__PURE__ */ createElement("ul", null, /* @__PURE__ */ createElement("li", null, "Source (just the ", displayMode, " content)", /* @__PURE__ */ createElement("br", null), /* @__PURE__ */ createElement("button", { type: "button", id: "download-md", style: { marginRight: "8px" }, onClick: downloadSource }, "Source")), /* @__PURE__ */ createElement("li", null, "HTML wrapper (content plus a shareable viewer)", /* @__PURE__ */ createElement("br", null), /* @__PURE__ */ createElement("button", { type: "button", id: "download-html", onClick: downloadHtml }, "HTML wrapper")))));
+  };
   class Toolbar {
     constructor(toolbarElementOrSelector, options = {}) {
       __publicField(this, "toolbarElement");
       __publicField(this, "folderSpan");
-      __publicField(this, "tweakButton");
-      __publicField(this, "restartButton");
       __publicField(this, "downloadButton");
+      __publicField(this, "downloadPopup");
       __publicField(this, "mode");
       __publicField(this, "filename");
-      __publicField(this, "downloadPopup");
-      var _a, _b, _c, _d, _e;
+      __publicField(this, "props");
       this.options = options;
       this.filename = options.filename || "sample";
-      this.mode = options.mode || "markdown";
+      const allowedModes = ["markdown", "json"];
+      this.mode = allowedModes.includes(options.mode) ? options.mode : "markdown";
       this.toolbarElement = typeof toolbarElementOrSelector === "string" ? document.querySelector(toolbarElementOrSelector) : toolbarElementOrSelector;
       if (!this.toolbarElement) {
         throw new Error("Toolbar element not found");
       }
-      const { home, target } = window.location.hostname === "localhost" ? { home: "/", target: "_self" } : { home: "https://microsoft.github.io/", target: "_blank" };
-      const html = `
-<div>
-    <a href="${home}chartifact/" target="${target}">Chartifact</a> viewer
-</div>
-<div id="folderSpan" style="display: none;"></div>
-<div>
-    <button type="button" id="restart" style="display: none;">start over</button>
-    <button type="button" id="tweak" style="display: none;">view source</button>
-    <button type="button" id="download" style="display: none;">download</button>
-</div>
-<div id="downloadPopup" style="position: absolute; display: none; padding: 12px 16px; z-index: 1; background-color: inherit;">
-    <div style="margin-bottom: 8px;">Download as:</div>
-    <ul>
-        <li>
-            Source markdown (just the content)<br/>
-            <button type="button" id="download-md" style="margin-right: 8px;">Source markdown</button>
-        </li>
-        <li>
-            HTML wrapper (content plus a shareable viewer)<br/>
-            <button type="button" id="download-html">HTML wrapper</button>
-        </li>
-    </ul>
-</div>
-        `;
-      this.toolbarElement.innerHTML = html;
-      this.folderSpan = this.toolbarElement.querySelector("#folderSpan");
-      this.tweakButton = this.toolbarElement.querySelector("#tweak");
-      this.restartButton = this.toolbarElement.querySelector("#restart");
-      this.downloadButton = this.toolbarElement.querySelector("#download");
-      this.downloadPopup = this.toolbarElement.querySelector("#downloadPopup");
-      if (this.options.tweakButton) {
-        this.showTweakButton();
-      }
-      if (this.options.restartButton) {
-        this.showRestartButton();
-      }
-      if (this.options.downloadButton) {
-        this.showDownloadButton();
-      }
-      (_a = this.tweakButton) == null ? void 0 : _a.addEventListener("click", () => {
-        this.options.textarea.style.display = this.options.textarea.style.display === "none" ? "" : "none";
-      });
-      (_b = this.restartButton) == null ? void 0 : _b.addEventListener("click", () => {
-        window.location.reload();
-      });
-      (_c = this.downloadButton) == null ? void 0 : _c.addEventListener("click", (e) => {
-        const rect = this.downloadButton.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const buttonCenter = rect.left + rect.width / 2;
-        const isLeftOfCenter = buttonCenter < viewportWidth / 2;
-        if (isLeftOfCenter) {
-          this.downloadPopup.style.left = `${rect.left + window.scrollX}px`;
-          this.downloadPopup.style.right = "";
-        } else {
-          this.downloadPopup.offsetWidth;
-          this.downloadPopup.style.right = `${viewportWidth - rect.right - window.scrollX}px`;
-          this.downloadPopup.style.left = "";
-        }
-        this.downloadPopup.style.top = `${rect.bottom + window.scrollY + 4}px`;
-        this.downloadPopup.style.display = "block";
-        const hidePopup = (evt) => {
-          if (!this.downloadPopup.contains(evt.target) && evt.target !== this.downloadButton) {
-            this.downloadPopup.style.display = "none";
-            document.removeEventListener("mousedown", hidePopup);
+      this.props = {
+        mode: this.mode,
+        restartClick: () => window.location.reload(),
+        tweakClick: () => {
+          this.options.textarea.style.display = this.options.textarea.style.display === "none" ? "" : "none";
+        },
+        downloadClick: () => {
+          const { downloadPopup, downloadButton } = this;
+          const rect = downloadButton.getBoundingClientRect();
+          const viewportWidth = window.innerWidth;
+          const buttonCenter = rect.left + rect.width / 2;
+          const isLeftOfCenter = buttonCenter < viewportWidth / 2;
+          if (isLeftOfCenter) {
+            downloadPopup.style.left = `${rect.left + window.scrollX}px`;
+            downloadPopup.style.right = "";
+          } else {
+            downloadPopup.offsetWidth;
+            downloadPopup.style.right = `${viewportWidth - rect.right - window.scrollX}px`;
+            downloadPopup.style.left = "";
           }
-        };
-        setTimeout(() => document.addEventListener("mousedown", hidePopup), 0);
-      });
-      (_d = this.downloadPopup.querySelector("#download-md")) == null ? void 0 : _d.addEventListener("click", () => {
-        this.downloadPopup.style.display = "none";
-        const textarea = this.options.textarea;
-        if (!textarea) return;
-        const content = textarea.value;
-        const filename = `${filenameWithoutPathOrExtension(this.filename)}.idoc.md`;
-        this.triggerDownload(content, filename, "text/markdown");
-      });
-      (_e = this.downloadPopup.querySelector("#download-html")) == null ? void 0 : _e.addEventListener("click", () => {
-        this.downloadPopup.style.display = "none";
-        const textarea = this.options.textarea;
-        if (!textarea) return;
-        const filename = `${filenameWithoutPathOrExtension(this.filename)}.idoc.html`;
-        const html2 = this.htmlWrapper();
-        this.triggerDownload(html2, filename, "text/html");
-      });
+          downloadPopup.style.top = `${rect.bottom + window.scrollY + 4}px`;
+          downloadPopup.style.display = "block";
+          const hidePopup = (evt) => {
+            if (!downloadPopup.contains(evt.target) && evt.target !== downloadButton) {
+              downloadPopup.style.display = "none";
+              document.removeEventListener("mousedown", hidePopup);
+            }
+          };
+          setTimeout(() => document.addEventListener("mousedown", hidePopup), 0);
+        },
+        restartDisplay: this.options.restartButton ? "" : "none",
+        tweakDisplay: this.options.tweakButton ? "" : "none",
+        downloadDisplay: this.options.downloadButton ? "" : "none",
+        downloadSource: () => {
+          this.downloadPopup.style.display = "none";
+          const textarea = this.options.textarea;
+          if (!textarea) return;
+          const content = textarea.value;
+          const extension = this.mode === "json" ? ".idoc.json" : ".idoc.md";
+          const mimeType = this.mode === "json" ? "application/json" : "text/markdown";
+          const filename = `${filenameWithoutPathOrExtension(this.filename)}${extension}`;
+          this.triggerDownload(content, filename, mimeType);
+        },
+        downloadHtml: () => {
+          this.downloadPopup.style.display = "none";
+          const textarea = this.options.textarea;
+          if (!textarea) return;
+          const html = this.htmlWrapper();
+          const filename = `${filenameWithoutPathOrExtension(this.filename)}.idoc.html`;
+          this.triggerDownload(html, filename, "text/html");
+        }
+      };
+      this.render();
     }
     htmlWrapper() {
       if (this.mode === "markdown") {
@@ -283,6 +399,12 @@ ${htmlJsonJs}
         return index$1.htmlJsonWrapper(this.filename, this.options.textarea.value);
       }
     }
+    render() {
+      mount(ToolbarElement(this.props), this.toolbarElement);
+      this.downloadButton = this.toolbarElement.querySelector("#download");
+      this.downloadPopup = this.toolbarElement.querySelector("#downloadPopup");
+      this.folderSpan = this.toolbarElement.querySelector("#folderSpan");
+    }
     // Helper method to trigger a download
     triggerDownload(content, filename, mimeType) {
       const blob = new Blob([content], { type: mimeType });
@@ -298,13 +420,16 @@ ${htmlJsonJs}
       }, 0);
     }
     showTweakButton() {
-      this.tweakButton.style.display = "";
+      this.props.tweakDisplay = "";
+      this.render();
     }
     showRestartButton() {
-      this.restartButton.style.display = "";
+      this.props.restartDisplay = "";
+      this.render();
     }
     showDownloadButton() {
-      this.downloadButton.style.display = "";
+      this.props.downloadDisplay = "";
+      this.render();
     }
     manageTextareaVisibilityForAgents() {
       const { textarea } = this.options;

From 484018feaa9d51a3055aae3385602756cf9eb83e Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Wed, 10 Sep 2025 10:18:25 -0700
Subject: [PATCH 14/17] convert folder to JSX

---
 packages/host/src/{folder.ts => folder.tsx} | 145 +++++++++-----------
 packages/host/tsconfig.json                 |   2 +
 packages/toolbar/src/toolbar.tsx            |  12 +-
 3 files changed, 78 insertions(+), 81 deletions(-)
 rename packages/host/src/{folder.ts => folder.tsx} (55%)

diff --git a/packages/host/src/folder.ts b/packages/host/src/folder.tsx
similarity index 55%
rename from packages/host/src/folder.ts
rename to packages/host/src/folder.tsx
index 0fb58b5a..4cc63961 100644
--- a/packages/host/src/folder.ts
+++ b/packages/host/src/folder.tsx
@@ -3,9 +3,48 @@
 * Licensed under the MIT License.
 */
 
-import { Folder } from "@microsoft/chartifact-schema-folder";
+import { Folder, DocRef } from "@microsoft/chartifact-schema-folder";
 import { Listener } from "./listener.js";
 import { loadViaUrl } from "./url.js";
+import { createElement } from 'tsx-create-element';
+
+interface FolderDisplayProps {
+    title: string;
+    docIndex: number;
+    docs: DocRef[];
+    prevClick: () => void;
+    nextClick: () => void;
+    pageSelectChange: (index: number) => void;
+}
+
+const FolderDisplay = (props: FolderDisplayProps) => {
+    const { title, docIndex, docs, prevClick, nextClick } = props;
+    return (
+        <span>
+            <span>{title}</span>
+            <div style={{ display: 'inline-block', marginRight: '0.5em' }}></div>
+            <span>(document {docIndex + 1} of {docs.length})</span>
+            <div style={{ display: 'inline-block' }}>
+                <button type="button" id="prevBtn" disabled={docIndex === 0} onClick={prevClick}>Previous</button>
+                <select
+                    id="pageSelect"
+                    title={`Select document (1 to ${docs.length})`}
+                    onChange={(e) => props.pageSelectChange(parseInt(e.target.value, 10) - 1)}
+                >
+                    {docs.map((doc, index) => (
+                        <option
+                            key={index}
+                            value={(index + 1)}
+                        >
+                            {doc.title ? doc.title : `Page ${index + 1}`}
+                        </option>
+                    ))}
+                </select>
+                <button type="button" id="nextBtn" disabled={docIndex === docs.length - 1} onClick={nextClick}>Next</button>
+            </div>
+        </span>
+    );
+}
 
 export function loadFolder(folderUrl: string, folder: Folder, host: Listener) {
     if (!folder || !folder.docs) {
@@ -34,35 +73,6 @@ export function loadFolder(folderUrl: string, folder: Folder, host: Listener) {
 
     let docIndex = 0;
 
-    const { folderSpan } = host.toolbar;
-    folderSpan.style.display = '';
-
-    // Create Previous and Next buttons
-    const prevBtn = document.createElement('button');
-    prevBtn.textContent = 'Previous';
-    prevBtn.disabled = docIndex === 0;
-
-    const nextBtn = document.createElement('button');
-    nextBtn.textContent = 'Next';
-    nextBtn.disabled = docIndex === folder.docs.length - 1;
-
-    // Create dropdown for page selection
-    const pageSelect = document.createElement('select');
-    for (let i = 0; i < folder.docs.length; i++) {
-        const option = document.createElement('option');
-        option.value = (i + 1).toString();
-        option.textContent = folder.docs[i].title ? folder.docs[i].title : `Page ${i + 1}`;
-        pageSelect.appendChild(option);
-    }
-    pageSelect.value = (docIndex + 1).toString();
-
-    // --- Wrap controls in a div ---
-    const navDiv = document.createElement('div');
-    navDiv.style.display = 'inline-block';
-    navDiv.appendChild(prevBtn);
-    navDiv.appendChild(pageSelect);
-    navDiv.appendChild(nextBtn);
-
     function getHashParam(key: string): string | undefined {
         const params = new URLSearchParams(window.location.hash.slice(1));
         return params.get(key) ?? undefined;
@@ -74,64 +84,44 @@ export function loadFolder(folderUrl: string, folder: Folder, host: Listener) {
         window.location.hash = params.toString();
     }
 
-    function updateFolderTitle() {
-        // Clear previous content
-        folderSpan.innerHTML = '';
-
-        // Folder label
-        const label = document.createElement('span');
-        label.textContent = `${folder.title} `;
-
-        // Document count in its own inline-block div
-        const docCountDiv = document.createElement('div');
-        docCountDiv.style.display = 'inline-block';
-        docCountDiv.style.marginRight = '0.5em';
-        docCountDiv.textContent = `(document ${docIndex + 1} of ${folder.docs.length}) `;
-
-        folderSpan.appendChild(label);
-        folderSpan.appendChild(docCountDiv);
-        folderSpan.appendChild(navDiv);
-    }
-
-    // Initial folder title
-    updateFolderTitle();
+    const props: FolderDisplayProps = {
+        title: folder.title,
+        docIndex,
+        docs: folder.docs,
+        prevClick: () => {
+            if (docIndex > 0) {
+                updatePage(docIndex - 1, true);
+            }
+        },
+        nextClick: () => {
+            if (docIndex < folder.docs.length - 1) {
+                updatePage(docIndex + 1, true);
+            }
+        },
+        pageSelectChange: (index) => {
+            if (index >= 0 && index <= folder.docs.length - 1) {
+                updatePage(index, true);
+            }
+        }
+    };
 
     function updatePage(newDocIndex: number, setHash: boolean = false) {
         docIndex = newDocIndex;
         if (setHash) {
             setHashParam('page', docIndex + 1);
         }
-        prevBtn.disabled = docIndex === 0;
-        nextBtn.disabled = docIndex === folder.docs.length - 1;
-        pageSelect.value = (docIndex + 1).toString();
 
-        // Use the function to update the folder title
-        updateFolderTitle();
+        host.toolbar.addChildren(<FolderDisplay {...{ ...props, docIndex }} />);
+
+        const pageSelect = document.querySelector('#pageSelect') as HTMLSelectElement;
+        if (pageSelect) {
+            pageSelect.value = (docIndex + 1).toString();
+        }
 
         const title = folder.docs[docIndex].title || `Page ${docIndex + 1}`;
         resolveUrl(title, folderUrl, folder.docs[docIndex].href, host);
     }
 
-    pageSelect.onchange = () => {
-        const selectedPage = parseInt(pageSelect.value, 10);
-        if (selectedPage >= 1 && selectedPage <= folder.docs.length) {
-            updatePage(selectedPage - 1, true);
-        }
-    };
-
-    // Button click handlers
-    prevBtn.onclick = () => {
-        if (docIndex > 0) {
-            updatePage(docIndex - 1, true);
-        }
-    };
-
-    nextBtn.onclick = () => {
-        if (docIndex < folder.docs.length - 1) {
-            updatePage(docIndex + 1, true);
-        }
-    };
-
     // Set initial hash and handle hash navigation
     function goToPageFromHash() {
         const pageStr = getHashParam('page');
@@ -153,9 +143,6 @@ export function loadFolder(folderUrl: string, folder: Folder, host: Listener) {
     }
     goToPageFromHash();
 
-    // Add buttons and dropdown to the toolbar
-    folderSpan.appendChild(navDiv);
-
     //resolveUrl(folderUrl, folder.docUrls[docIndex], host);
 }
 
diff --git a/packages/host/tsconfig.json b/packages/host/tsconfig.json
index 4b1e9828..cdb23210 100644
--- a/packages/host/tsconfig.json
+++ b/packages/host/tsconfig.json
@@ -1,6 +1,8 @@
 {
     "extends": "../tsconfig.base.json",
     "compilerOptions": {
+        "jsx": "react",
+        "jsxFactory": "createElement",
         "outDir": "dist/esnext"
     },
     "include": [
diff --git a/packages/toolbar/src/toolbar.tsx b/packages/toolbar/src/toolbar.tsx
index 8741a39d..d881be5d 100644
--- a/packages/toolbar/src/toolbar.tsx
+++ b/packages/toolbar/src/toolbar.tsx
@@ -30,11 +30,12 @@ interface ToolbarProps {
     downloadDisplay: 'none' | '';
     downloadSource: () => void;
     downloadHtml: () => void;
+    children?: JSX.Element;
 }
 
 const ToolbarElement = (props: ToolbarProps) => {
 
-    const { mode, restartClick, tweakClick, downloadClick, restartDisplay, tweakDisplay, downloadDisplay, downloadSource, downloadHtml } = props;
+    const { mode, restartClick, tweakClick, downloadClick, restartDisplay, tweakDisplay, downloadDisplay, downloadSource, downloadHtml, children } = props;
 
     const { home, target } = (window.location.hostname === 'localhost')
         ? { home: '/', target: '_self' }
@@ -47,7 +48,9 @@ const ToolbarElement = (props: ToolbarProps) => {
             <div className='toolbar-item'>
                 <a href={`${home}chartifact/`} target={target}>Chartifact</a> viewer
             </div>
-            <div className='toolbar-item' id="folderSpan" style={{ display: 'none' }}></div>
+            <div className='toolbar-item' id="folderSpan" style={{ display: children ? '' : 'none' }}>
+                {children}
+            </div>
             <div className='toolbar-item'>
                 <button type="button" id="restart" style={{ display: restartDisplay }} onClick={restartClick}>start over</button>
                 <button type="button" id="tweak" style={{ display: tweakDisplay }} onClick={tweakClick}>view source</button>
@@ -170,6 +173,11 @@ export class Toolbar {
         }
     }
 
+    addChildren(children: JSX.Element) {
+        this.props.children = children;
+        this.render();
+    }
+
     render() {
         mount(ToolbarElement(this.props), this.toolbarElement);
         this.downloadButton = this.toolbarElement.querySelector('#download') as HTMLButtonElement;

From 81e4f4719ad32bfc357b7911477b6e3ac65f7eb1 Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Wed, 10 Sep 2025 10:25:54 -0700
Subject: [PATCH 15/17] regen

---
 docs/dist/v1/chartifact.host.umd.js    | 381 ++++++++++++-------------
 docs/dist/v1/chartifact.toolbar.umd.js |   8 +-
 2 files changed, 193 insertions(+), 196 deletions(-)

diff --git a/docs/dist/v1/chartifact.host.umd.js b/docs/dist/v1/chartifact.host.umd.js
index a2e236ea..c7aee7d1 100644
--- a/docs/dist/v1/chartifact.host.umd.js
+++ b/docs/dist/v1/chartifact.host.umd.js
@@ -2363,6 +2363,162 @@ ${guardedJs}
       return false;
     }
   }
+  const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+  function decamelize(str2, separator = "-") {
+    return str2.replace(/([a-z\d])([A-Z])/g, "$1" + separator + "$2").replace(/([A-Z]+)([A-Z][a-z\d]+)/g, "$1" + separator + "$2").toLowerCase();
+  }
+  function createElement(tag, attrs, ...children) {
+    if (typeof tag === "function") {
+      const fn = tag;
+      let props = attrs;
+      if (props === null || props === void 0) {
+        props = { children };
+      } else {
+        props.children = children;
+      }
+      return fn(props);
+    } else {
+      const ns = tag === "svg" ? SVG_NAMESPACE : null;
+      const el = ns ? document.createElementNS(ns, tag) : document.createElement(tag);
+      const map2 = attrs;
+      let ref;
+      for (let name in map2) {
+        if (name && map2.hasOwnProperty(name)) {
+          let value = map2[name];
+          if (name === "className" && value !== void 0) {
+            setAttribute(el, ns, "class", value.toString());
+          } else if (name === "disabled" && !value) ;
+          else if (value === null || value === void 0) {
+            continue;
+          } else if (value === true) {
+            setAttribute(el, ns, name, name);
+          } else if (typeof value === "function") {
+            if (name === "ref") {
+              ref = value;
+            } else {
+              el[name.toLowerCase()] = value;
+            }
+          } else if (typeof value === "object") {
+            setAttribute(el, ns, name, flatten(value));
+          } else {
+            setAttribute(el, ns, name, value.toString());
+          }
+        }
+      }
+      if (children && children.length > 0) {
+        appendChildren(el, children);
+      }
+      if (ref) {
+        ref(el);
+      }
+      return el;
+    }
+  }
+  function setAttribute(el, ns, name, value) {
+    if (ns) {
+      el.setAttributeNS(null, name, value);
+    } else {
+      el.setAttribute(name, value);
+    }
+  }
+  function flatten(o) {
+    const arr = [];
+    for (let prop in o)
+      arr.push(`${decamelize(prop, "-")}:${o[prop]}`);
+    return arr.join(";");
+  }
+  function isInsideForeignObject(element) {
+    let current = element;
+    while (current) {
+      if (current.tagName.toLowerCase() === "foreignobject") {
+        return true;
+      }
+      current = current.parentElement;
+    }
+    return false;
+  }
+  function recreateWithSvgNamespace(element) {
+    const svgElement = document.createElementNS(SVG_NAMESPACE, element.tagName.toLowerCase());
+    for (let i2 = 0; i2 < element.attributes.length; i2++) {
+      const attr = element.attributes[i2];
+      svgElement.setAttributeNS(null, attr.name, attr.value);
+    }
+    const eventProperties = [
+      "onclick",
+      "onmousedown",
+      "onmouseup",
+      "onmouseover",
+      "onmouseout",
+      "onmousemove",
+      "onkeydown",
+      "onkeyup",
+      "onkeypress",
+      "onfocus",
+      "onblur"
+    ];
+    for (const prop of eventProperties) {
+      if (element[prop]) {
+        svgElement[prop] = element[prop];
+      }
+    }
+    for (let i2 = 0; i2 < element.childNodes.length; i2++) {
+      const child = element.childNodes[i2];
+      if (child.nodeType === Node.ELEMENT_NODE) {
+        svgElement.appendChild(recreateWithSvgNamespace(child));
+      } else {
+        svgElement.appendChild(child.cloneNode(true));
+      }
+    }
+    return svgElement;
+  }
+  function addChild(parentElement, child) {
+    if (child === null || child === void 0 || typeof child === "boolean") {
+      return;
+    } else if (Array.isArray(child)) {
+      appendChildren(parentElement, child);
+    } else if (isElement(child)) {
+      const childEl = child;
+      if (parentElement.namespaceURI === SVG_NAMESPACE && childEl.namespaceURI !== SVG_NAMESPACE && childEl.tagName.toLowerCase() !== "foreignobject" && !isInsideForeignObject(parentElement)) {
+        const recreated = recreateWithSvgNamespace(childEl);
+        parentElement.appendChild(recreated);
+      } else {
+        parentElement.appendChild(childEl);
+      }
+    } else {
+      parentElement.appendChild(document.createTextNode(child.toString()));
+    }
+  }
+  function appendChildren(parentElement, children) {
+    children.forEach((child) => addChild(parentElement, child));
+  }
+  function isElement(el) {
+    return !!el.nodeType;
+  }
+  function mount(element, container) {
+    container.innerHTML = "";
+    if (element) {
+      addChild(container, element);
+    }
+  }
+  const FolderDisplay = (props) => {
+    const { title, docIndex, docs, prevClick, nextClick } = props;
+    return /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement("span", null, title), /* @__PURE__ */ createElement("div", { style: { display: "inline-block", marginRight: "0.5em" } }), /* @__PURE__ */ createElement("span", null, "(document ", docIndex + 1, " of ", docs.length, ")"), /* @__PURE__ */ createElement("div", { style: { display: "inline-block" } }, /* @__PURE__ */ createElement("button", { type: "button", id: "prevBtn", disabled: docIndex === 0, onClick: prevClick }, "Previous"), /* @__PURE__ */ createElement(
+      "select",
+      {
+        id: "pageSelect",
+        title: `Select document (1 to ${docs.length})`,
+        onChange: (e) => props.pageSelectChange(parseInt(e.target.value, 10) - 1)
+      },
+      docs.map((doc, index2) => /* @__PURE__ */ createElement(
+        "option",
+        {
+          key: index2,
+          value: index2 + 1
+        },
+        doc.title ? doc.title : `Page ${index2 + 1}`
+      ))
+    ), /* @__PURE__ */ createElement("button", { type: "button", id: "nextBtn", disabled: docIndex === docs.length - 1, onClick: nextClick }, "Next")));
+  };
   function loadFolder(folderUrl, folder, host) {
     if (!folder || !folder.docs) {
       host.errorHandler(
@@ -2386,27 +2542,6 @@ ${guardedJs}
       return;
     }
     let docIndex = 0;
-    const { folderSpan } = host.toolbar;
-    folderSpan.style.display = "";
-    const prevBtn = document.createElement("button");
-    prevBtn.textContent = "Previous";
-    prevBtn.disabled = docIndex === 0;
-    const nextBtn = document.createElement("button");
-    nextBtn.textContent = "Next";
-    nextBtn.disabled = docIndex === folder.docs.length - 1;
-    const pageSelect = document.createElement("select");
-    for (let i2 = 0; i2 < folder.docs.length; i2++) {
-      const option = document.createElement("option");
-      option.value = (i2 + 1).toString();
-      option.textContent = folder.docs[i2].title ? folder.docs[i2].title : `Page ${i2 + 1}`;
-      pageSelect.appendChild(option);
-    }
-    pageSelect.value = (docIndex + 1).toString();
-    const navDiv = document.createElement("div");
-    navDiv.style.display = "inline-block";
-    navDiv.appendChild(prevBtn);
-    navDiv.appendChild(pageSelect);
-    navDiv.appendChild(nextBtn);
     function getHashParam(key) {
       const params = new URLSearchParams(window.location.hash.slice(1));
       return params.get(key) ?? void 0;
@@ -2416,47 +2551,39 @@ ${guardedJs}
       params.set(key, value.toString());
       window.location.hash = params.toString();
     }
-    function updateFolderTitle() {
-      folderSpan.innerHTML = "";
-      const label = document.createElement("span");
-      label.textContent = `${folder.title} `;
-      const docCountDiv = document.createElement("div");
-      docCountDiv.style.display = "inline-block";
-      docCountDiv.style.marginRight = "0.5em";
-      docCountDiv.textContent = `(document ${docIndex + 1} of ${folder.docs.length}) `;
-      folderSpan.appendChild(label);
-      folderSpan.appendChild(docCountDiv);
-      folderSpan.appendChild(navDiv);
-    }
-    updateFolderTitle();
+    const props = {
+      title: folder.title,
+      docIndex,
+      docs: folder.docs,
+      prevClick: () => {
+        if (docIndex > 0) {
+          updatePage(docIndex - 1, true);
+        }
+      },
+      nextClick: () => {
+        if (docIndex < folder.docs.length - 1) {
+          updatePage(docIndex + 1, true);
+        }
+      },
+      pageSelectChange: (index2) => {
+        if (index2 >= 0 && index2 <= folder.docs.length - 1) {
+          updatePage(index2, true);
+        }
+      }
+    };
     function updatePage(newDocIndex, setHash = false) {
       docIndex = newDocIndex;
       if (setHash) {
         setHashParam("page", docIndex + 1);
       }
-      prevBtn.disabled = docIndex === 0;
-      nextBtn.disabled = docIndex === folder.docs.length - 1;
-      pageSelect.value = (docIndex + 1).toString();
-      updateFolderTitle();
+      host.toolbar.addChildren(/* @__PURE__ */ createElement(FolderDisplay, { ...{ ...props, docIndex } }));
+      const pageSelect = document.querySelector("#pageSelect");
+      if (pageSelect) {
+        pageSelect.value = (docIndex + 1).toString();
+      }
       const title = folder.docs[docIndex].title || `Page ${docIndex + 1}`;
       resolveUrl(title, folderUrl, folder.docs[docIndex].href, host);
     }
-    pageSelect.onchange = () => {
-      const selectedPage = parseInt(pageSelect.value, 10);
-      if (selectedPage >= 1 && selectedPage <= folder.docs.length) {
-        updatePage(selectedPage - 1, true);
-      }
-    };
-    prevBtn.onclick = () => {
-      if (docIndex > 0) {
-        updatePage(docIndex - 1, true);
-      }
-    };
-    nextBtn.onclick = () => {
-      if (docIndex < folder.docs.length - 1) {
-        updatePage(docIndex + 1, true);
-      }
-    };
     function goToPageFromHash() {
       const pageStr = getHashParam("page");
       let newIndex = 0;
@@ -2473,7 +2600,6 @@ ${guardedJs}
       setHashParam("page", docIndex + 1);
     }
     goToPageFromHash();
-    folderSpan.appendChild(navDiv);
   }
   async function resolveUrl(title, base, relativeOrAbsolute, host) {
     let url;
@@ -3140,145 +3266,8 @@ ${htmlJsonJs}
     htmlMarkdownWrapper,
     htmlJsonWrapper
   };
-  const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-  function decamelize(str2, separator = "-") {
-    return str2.replace(/([a-z\d])([A-Z])/g, "$1" + separator + "$2").replace(/([A-Z]+)([A-Z][a-z\d]+)/g, "$1" + separator + "$2").toLowerCase();
-  }
-  function createElement(tag, attrs, ...children) {
-    if (typeof tag === "function") {
-      const fn = tag;
-      let props = attrs;
-      if (props === null || props === void 0) {
-        props = { children };
-      } else {
-        props.children = children;
-      }
-      return fn(props);
-    } else {
-      const ns = tag === "svg" ? SVG_NAMESPACE : null;
-      const el = ns ? document.createElementNS(ns, tag) : document.createElement(tag);
-      const map2 = attrs;
-      let ref;
-      for (let name in map2) {
-        if (name && map2.hasOwnProperty(name)) {
-          let value = map2[name];
-          if (name === "className" && value !== void 0) {
-            setAttribute(el, ns, "class", value.toString());
-          } else if (name === "disabled" && !value) ;
-          else if (value === null || value === void 0) {
-            continue;
-          } else if (value === true) {
-            setAttribute(el, ns, name, name);
-          } else if (typeof value === "function") {
-            if (name === "ref") {
-              ref = value;
-            } else {
-              el[name.toLowerCase()] = value;
-            }
-          } else if (typeof value === "object") {
-            setAttribute(el, ns, name, flatten(value));
-          } else {
-            setAttribute(el, ns, name, value.toString());
-          }
-        }
-      }
-      if (children && children.length > 0) {
-        appendChildren(el, children);
-      }
-      if (ref) {
-        ref(el);
-      }
-      return el;
-    }
-  }
-  function setAttribute(el, ns, name, value) {
-    if (ns) {
-      el.setAttributeNS(null, name, value);
-    } else {
-      el.setAttribute(name, value);
-    }
-  }
-  function flatten(o) {
-    const arr = [];
-    for (let prop in o)
-      arr.push(`${decamelize(prop, "-")}:${o[prop]}`);
-    return arr.join(";");
-  }
-  function isInsideForeignObject(element) {
-    let current = element;
-    while (current) {
-      if (current.tagName.toLowerCase() === "foreignobject") {
-        return true;
-      }
-      current = current.parentElement;
-    }
-    return false;
-  }
-  function recreateWithSvgNamespace(element) {
-    const svgElement = document.createElementNS(SVG_NAMESPACE, element.tagName.toLowerCase());
-    for (let i2 = 0; i2 < element.attributes.length; i2++) {
-      const attr = element.attributes[i2];
-      svgElement.setAttributeNS(null, attr.name, attr.value);
-    }
-    const eventProperties = [
-      "onclick",
-      "onmousedown",
-      "onmouseup",
-      "onmouseover",
-      "onmouseout",
-      "onmousemove",
-      "onkeydown",
-      "onkeyup",
-      "onkeypress",
-      "onfocus",
-      "onblur"
-    ];
-    for (const prop of eventProperties) {
-      if (element[prop]) {
-        svgElement[prop] = element[prop];
-      }
-    }
-    for (let i2 = 0; i2 < element.childNodes.length; i2++) {
-      const child = element.childNodes[i2];
-      if (child.nodeType === Node.ELEMENT_NODE) {
-        svgElement.appendChild(recreateWithSvgNamespace(child));
-      } else {
-        svgElement.appendChild(child.cloneNode(true));
-      }
-    }
-    return svgElement;
-  }
-  function addChild(parentElement, child) {
-    if (child === null || child === void 0 || typeof child === "boolean") {
-      return;
-    } else if (Array.isArray(child)) {
-      appendChildren(parentElement, child);
-    } else if (isElement(child)) {
-      const childEl = child;
-      if (parentElement.namespaceURI === SVG_NAMESPACE && childEl.namespaceURI !== SVG_NAMESPACE && childEl.tagName.toLowerCase() !== "foreignobject" && !isInsideForeignObject(parentElement)) {
-        const recreated = recreateWithSvgNamespace(childEl);
-        parentElement.appendChild(recreated);
-      } else {
-        parentElement.appendChild(childEl);
-      }
-    } else {
-      parentElement.appendChild(document.createTextNode(child.toString()));
-    }
-  }
-  function appendChildren(parentElement, children) {
-    children.forEach((child) => addChild(parentElement, child));
-  }
-  function isElement(el) {
-    return !!el.nodeType;
-  }
-  function mount(element, container) {
-    container.innerHTML = "";
-    if (element) {
-      addChild(container, element);
-    }
-  }
   const ToolbarElement = (props) => {
-    const { mode, restartClick, tweakClick, downloadClick, restartDisplay, tweakDisplay, downloadDisplay, downloadSource, downloadHtml } = props;
+    const { mode, restartClick, tweakClick, downloadClick, restartDisplay, tweakDisplay, downloadDisplay, downloadSource, downloadHtml, children } = props;
     const { home, target } = window.location.hostname === "localhost" ? { home: "/", target: "_self" } : { home: "https://microsoft.github.io/", target: "_blank" };
     const displayMode = mode === "json" ? "json" : "markdown";
     return createElement(
@@ -3290,7 +3279,7 @@ ${htmlJsonJs}
         createElement("a", { href: `${home}chartifact/`, target }, "Chartifact"),
         " viewer"
       ),
-      createElement("div", { className: "toolbar-item", id: "folderSpan", style: { display: "none" } }),
+      createElement("div", { className: "toolbar-item", id: "folderSpan", style: { display: children ? "" : "none" } }, children),
       createElement(
         "div",
         { className: "toolbar-item" },
@@ -3412,6 +3401,10 @@ ${htmlJsonJs}
         return index$1.htmlJsonWrapper(this.filename, this.options.textarea.value);
       }
     }
+    addChildren(children) {
+      this.props.children = children;
+      this.render();
+    }
     render() {
       mount(ToolbarElement(this.props), this.toolbarElement);
       this.downloadButton = this.toolbarElement.querySelector("#download");
diff --git a/docs/dist/v1/chartifact.toolbar.umd.js b/docs/dist/v1/chartifact.toolbar.umd.js
index 2757168f..be8b8a15 100644
--- a/docs/dist/v1/chartifact.toolbar.umd.js
+++ b/docs/dist/v1/chartifact.toolbar.umd.js
@@ -310,10 +310,10 @@ ${htmlJsonJs}
     }
   }
   const ToolbarElement = (props) => {
-    const { mode, restartClick, tweakClick, downloadClick, restartDisplay, tweakDisplay, downloadDisplay, downloadSource, downloadHtml } = props;
+    const { mode, restartClick, tweakClick, downloadClick, restartDisplay, tweakDisplay, downloadDisplay, downloadSource, downloadHtml, children } = props;
     const { home, target } = window.location.hostname === "localhost" ? { home: "/", target: "_self" } : { home: "https://microsoft.github.io/", target: "_blank" };
     const displayMode = mode === "json" ? "json" : "markdown";
-    return /* @__PURE__ */ createElement("div", { className: "toolbar-group", style: { backgroundColor: "inherit" } }, /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("a", { href: `${home}chartifact/`, target }, "Chartifact"), " viewer"), /* @__PURE__ */ createElement("div", { className: "toolbar-item", id: "folderSpan", style: { display: "none" } }), /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("button", { type: "button", id: "restart", style: { display: restartDisplay }, onClick: restartClick }, "start over"), /* @__PURE__ */ createElement("button", { type: "button", id: "tweak", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"), /* @__PURE__ */ createElement("button", { type: "button", id: "download", style: { display: downloadDisplay }, onClick: downloadClick }, "download")), /* @__PURE__ */ createElement("div", { id: "downloadPopup", style: {
+    return /* @__PURE__ */ createElement("div", { className: "toolbar-group", style: { backgroundColor: "inherit" } }, /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("a", { href: `${home}chartifact/`, target }, "Chartifact"), " viewer"), /* @__PURE__ */ createElement("div", { className: "toolbar-item", id: "folderSpan", style: { display: children ? "" : "none" } }, children), /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("button", { type: "button", id: "restart", style: { display: restartDisplay }, onClick: restartClick }, "start over"), /* @__PURE__ */ createElement("button", { type: "button", id: "tweak", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"), /* @__PURE__ */ createElement("button", { type: "button", id: "download", style: { display: downloadDisplay }, onClick: downloadClick }, "download")), /* @__PURE__ */ createElement("div", { id: "downloadPopup", style: {
       position: "absolute",
       display: "none",
       padding: "12px 16px",
@@ -399,6 +399,10 @@ ${htmlJsonJs}
         return index$1.htmlJsonWrapper(this.filename, this.options.textarea.value);
       }
     }
+    addChildren(children) {
+      this.props.children = children;
+      this.render();
+    }
     render() {
       mount(ToolbarElement(this.props), this.toolbarElement);
       this.downloadButton = this.toolbarElement.querySelector("#download");

From 43ec2bc97a97f1a32ef3ce461b72899480bc6ede Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Wed, 10 Sep 2025 10:27:08 -0700
Subject: [PATCH 16/17] Remove unused folderSpan element from ToolbarElement
 and related references

---
 packages/toolbar/src/toolbar.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/toolbar/src/toolbar.tsx b/packages/toolbar/src/toolbar.tsx
index d881be5d..2ff4c9b5 100644
--- a/packages/toolbar/src/toolbar.tsx
+++ b/packages/toolbar/src/toolbar.tsx
@@ -48,7 +48,7 @@ const ToolbarElement = (props: ToolbarProps) => {
             <div className='toolbar-item'>
                 <a href={`${home}chartifact/`} target={target}>Chartifact</a> viewer
             </div>
-            <div className='toolbar-item' id="folderSpan" style={{ display: children ? '' : 'none' }}>
+            <div className='toolbar-item' style={{ display: children ? '' : 'none' }}>
                 {children}
             </div>
             <div className='toolbar-item'>
@@ -81,7 +81,6 @@ const ToolbarElement = (props: ToolbarProps) => {
 
 export class Toolbar {
     public toolbarElement: HTMLElement;
-    public folderSpan: HTMLElement;
     public downloadButton: HTMLButtonElement;
     public downloadPopup: HTMLDivElement;
     public mode: 'markdown' | 'json';
@@ -182,7 +181,6 @@ export class Toolbar {
         mount(ToolbarElement(this.props), this.toolbarElement);
         this.downloadButton = this.toolbarElement.querySelector('#download') as HTMLButtonElement;
         this.downloadPopup = this.toolbarElement.querySelector('#downloadPopup') as HTMLDivElement;
-        this.folderSpan = this.toolbarElement.querySelector('#folderSpan') as HTMLDivElement;
     }
 
     // Helper method to trigger a download

From bfc76cc965f464b9514873338c5ead89ec04b45e Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Wed, 10 Sep 2025 10:29:50 -0700
Subject: [PATCH 17/17] regen

---
 docs/dist/v1/chartifact.host.umd.js    | 4 +---
 docs/dist/v1/chartifact.toolbar.umd.js | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/docs/dist/v1/chartifact.host.umd.js b/docs/dist/v1/chartifact.host.umd.js
index c7aee7d1..903ea0a3 100644
--- a/docs/dist/v1/chartifact.host.umd.js
+++ b/docs/dist/v1/chartifact.host.umd.js
@@ -3279,7 +3279,7 @@ ${htmlJsonJs}
         createElement("a", { href: `${home}chartifact/`, target }, "Chartifact"),
         " viewer"
       ),
-      createElement("div", { className: "toolbar-item", id: "folderSpan", style: { display: children ? "" : "none" } }, children),
+      createElement("div", { className: "toolbar-item", style: { display: children ? "" : "none" } }, children),
       createElement(
         "div",
         { className: "toolbar-item" },
@@ -3324,7 +3324,6 @@ ${htmlJsonJs}
     constructor(toolbarElementOrSelector, options = {}) {
       __publicField(this, "options");
       __publicField(this, "toolbarElement");
-      __publicField(this, "folderSpan");
       __publicField(this, "downloadButton");
       __publicField(this, "downloadPopup");
       __publicField(this, "mode");
@@ -3409,7 +3408,6 @@ ${htmlJsonJs}
       mount(ToolbarElement(this.props), this.toolbarElement);
       this.downloadButton = this.toolbarElement.querySelector("#download");
       this.downloadPopup = this.toolbarElement.querySelector("#downloadPopup");
-      this.folderSpan = this.toolbarElement.querySelector("#folderSpan");
     }
     // Helper method to trigger a download
     triggerDownload(content, filename, mimeType) {
diff --git a/docs/dist/v1/chartifact.toolbar.umd.js b/docs/dist/v1/chartifact.toolbar.umd.js
index be8b8a15..fd4aafae 100644
--- a/docs/dist/v1/chartifact.toolbar.umd.js
+++ b/docs/dist/v1/chartifact.toolbar.umd.js
@@ -313,7 +313,7 @@ ${htmlJsonJs}
     const { mode, restartClick, tweakClick, downloadClick, restartDisplay, tweakDisplay, downloadDisplay, downloadSource, downloadHtml, children } = props;
     const { home, target } = window.location.hostname === "localhost" ? { home: "/", target: "_self" } : { home: "https://microsoft.github.io/", target: "_blank" };
     const displayMode = mode === "json" ? "json" : "markdown";
-    return /* @__PURE__ */ createElement("div", { className: "toolbar-group", style: { backgroundColor: "inherit" } }, /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("a", { href: `${home}chartifact/`, target }, "Chartifact"), " viewer"), /* @__PURE__ */ createElement("div", { className: "toolbar-item", id: "folderSpan", style: { display: children ? "" : "none" } }, children), /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("button", { type: "button", id: "restart", style: { display: restartDisplay }, onClick: restartClick }, "start over"), /* @__PURE__ */ createElement("button", { type: "button", id: "tweak", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"), /* @__PURE__ */ createElement("button", { type: "button", id: "download", style: { display: downloadDisplay }, onClick: downloadClick }, "download")), /* @__PURE__ */ createElement("div", { id: "downloadPopup", style: {
+    return /* @__PURE__ */ createElement("div", { className: "toolbar-group", style: { backgroundColor: "inherit" } }, /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("a", { href: `${home}chartifact/`, target }, "Chartifact"), " viewer"), /* @__PURE__ */ createElement("div", { className: "toolbar-item", style: { display: children ? "" : "none" } }, children), /* @__PURE__ */ createElement("div", { className: "toolbar-item" }, /* @__PURE__ */ createElement("button", { type: "button", id: "restart", style: { display: restartDisplay }, onClick: restartClick }, "start over"), /* @__PURE__ */ createElement("button", { type: "button", id: "tweak", style: { display: tweakDisplay }, onClick: tweakClick }, "view source"), /* @__PURE__ */ createElement("button", { type: "button", id: "download", style: { display: downloadDisplay }, onClick: downloadClick }, "download")), /* @__PURE__ */ createElement("div", { id: "downloadPopup", style: {
       position: "absolute",
       display: "none",
       padding: "12px 16px",
@@ -324,7 +324,6 @@ ${htmlJsonJs}
   class Toolbar {
     constructor(toolbarElementOrSelector, options = {}) {
       __publicField(this, "toolbarElement");
-      __publicField(this, "folderSpan");
       __publicField(this, "downloadButton");
       __publicField(this, "downloadPopup");
       __publicField(this, "mode");
@@ -407,7 +406,6 @@ ${htmlJsonJs}
       mount(ToolbarElement(this.props), this.toolbarElement);
       this.downloadButton = this.toolbarElement.querySelector("#download");
       this.downloadPopup = this.toolbarElement.querySelector("#downloadPopup");
-      this.folderSpan = this.toolbarElement.querySelector("#folderSpan");
     }
     // Helper method to trigger a download
     triggerDownload(content, filename, mimeType) {