From 500398b098f32ab54251fcfb180fe66f3c7ff85a Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Wed, 23 Jul 2025 22:30:28 -0700
Subject: [PATCH 01/14] Implement CSS categorization and security checks in the
 CSS plugin

---
 package-lock.json                       |  12 +-
 packages/markdown/package.json          |   5 +-
 packages/markdown/src/plugins/css.ts    | 201 +++++++++++++++++++++---
 packages/markdown/test/index.html       |   1 +
 packages/markdown/vite.bundle.config.js |   3 +-
 packages/sandbox/vite.bundle.config.js  |   3 +-
 6 files changed, 200 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b9d93a30..a9c7a561 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4217,6 +4217,13 @@
         "@babel/types": "^7.20.7"
       }
     },
+    "node_modules/@types/css-tree": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/@types/css-tree/-/css-tree-2.3.10.tgz",
+      "integrity": "sha512-WcaBazJ84RxABvRttQjjFWgTcHvZR9jGr0Y3hccPkHjFyk/a3N8EuxjKr+QfrwjoM5b1yI1Uj1i7EzOAAwBwag==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -13163,7 +13170,10 @@
     "packages/markdown": {
       "name": "@microsoft/interactive-document-markdown",
       "version": "1.0.0",
-      "license": "MIT"
+      "license": "MIT",
+      "devDependencies": {
+        "@types/css-tree": "^2.3.10"
+      }
     },
     "packages/renderer": {
       "name": "@microsoft/interactive-document-renderer",
diff --git a/packages/markdown/package.json b/packages/markdown/package.json
index 7d1b8026..390f6632 100644
--- a/packages/markdown/package.json
+++ b/packages/markdown/package.json
@@ -34,5 +34,8 @@
   "bugs": {
     "url": "https://github.com/microsoft/interactive-documents/issues"
   },
-  "homepage": "https://github.com/microsoft/interactive-documents#readme"
+  "homepage": "https://github.com/microsoft/interactive-documents#readme",
+  "devDependencies": {
+    "@types/css-tree": "^2.3.10"
+  }
 }
diff --git a/packages/markdown/src/plugins/css.ts b/packages/markdown/src/plugins/css.ts
index f8e8e8b4..27e8e616 100644
--- a/packages/markdown/src/plugins/css.ts
+++ b/packages/markdown/src/plugins/css.ts
@@ -6,9 +6,150 @@
 import { definePlugin, IInstance, Plugin } from '../factory.js';
 import { sanitizedHTML } from '../sanitize.js';
 
+// CSS Tree is expected to be available as a global variable
+declare const csstree: any;
+
+interface Rule {
+    css: string;
+    flag?: "xss" | "scriptExec" | "externalResource" | "malformed";
+    reason?: string;
+}
+
+interface CategorizedCss {
+    safeAtRules?: { [atRuleSignature: string]: Rule[] }; // Optional - might be empty if all rules are unsafe
+    flaggedAtRules?: { [atRuleSignature: string]: Rule[] }; // External resources needing approval
+    unsafeAtRules?: { [atRuleSignature: string]: Rule[] }; // Definitively blocked content
+}
+
+// Helper function to reconstitute an at-rule block from signature and rules
+function reconstituteAtRule(signature: string, rules: Rule[], onlyUnflagged: boolean = true): string {
+    const validRules = onlyUnflagged ? rules.filter(rule => !rule.flag) : rules;
+    if (validRules.length === 0) return '';
+
+    if (signature === '') {
+        // Standalone rules (no at-rule wrapper)
+        return validRules.map(rule => rule.css).join('\n');
+    } else {
+        // At-rule with contained rules
+        const containedRules = validRules.map(rule => rule.css).join('\n');
+        return `${signature} {\n${containedRules}\n}`;
+    }
+}
+
+// Helper function to reconstitute complete CSS from categorized rules
+function reconstituteCss(atRules: { [atRuleSignature: string]: Rule[] }, onlyUnflagged: boolean = true): string {
+    const cssBlocks: string[] = [];
+
+    for (const [signature, rules] of Object.entries(atRules)) {
+        const reconstructed = reconstituteAtRule(signature, rules, onlyUnflagged);
+        if (reconstructed) {
+            cssBlocks.push(reconstructed);
+        }
+    }
+
+    return cssBlocks.join('\n\n');
+}
+
+function categorizeCss(cssContent: string): CategorizedCss {
+    const result: CategorizedCss = {};
+
+    // Helper function to check for security issues
+    function checkSecurityIssues(ruleContent: string): Pick<Rule, 'flag' | 'reason'> | null {
+        if (ruleContent.toLowerCase().includes('expression(')) {
+            return { flag: 'scriptExec', reason: 'CSS expression() function detected' };
+        } else if (ruleContent.toLowerCase().includes('javascript:')) {
+            return { flag: 'scriptExec', reason: 'JavaScript URL detected' };
+        } else if (ruleContent.includes('http://') || ruleContent.includes('https://')) {
+            return { flag: 'externalResource', reason: 'External URL detected' };
+        }
+        return null;
+    }
+
+    // Helper function to add a rule to the appropriate collections
+    function addRule(signature: string, rule: Rule) {
+        // Add to safeAtRules
+        if (!result.safeAtRules) {
+            result.safeAtRules = {};
+        }
+        if (!result.safeAtRules[signature]) {
+            result.safeAtRules[signature] = [];
+        }
+        result.safeAtRules[signature].push(rule);
+
+        // Add to appropriate flagged/unsafe collection based on flag type
+        if (rule.flag) {
+            if (rule.flag === 'externalResource') {
+                // External resources need whitelist approval
+                if (!result.flaggedAtRules) {
+                    result.flaggedAtRules = {};
+                }
+                if (!result.flaggedAtRules[signature]) {
+                    result.flaggedAtRules[signature] = [];
+                }
+                result.flaggedAtRules[signature].push(rule);
+            } else {
+                // scriptExec, xss, malformed are unsafe
+                if (!result.unsafeAtRules) {
+                    result.unsafeAtRules = {};
+                }
+                if (!result.unsafeAtRules[signature]) {
+                    result.unsafeAtRules[signature] = [];
+                }
+                result.unsafeAtRules[signature].push(rule);
+            }
+        }
+    }
+
+    try {
+        // Parse CSS with CSS Tree
+        const ast = csstree.parse(cssContent);        // Walk through the AST and organize rules
+        csstree.walk(ast, function(node) {
+            if (node.type === 'Atrule') {
+                const atRuleSignature = `@${node.name}${node.prelude ? ` ${csstree.generate(node.prelude)}` : ''}`;
+                const ruleContent = csstree.generate(node);
+                const rule: Rule = { css: ruleContent };
+
+                const securityCheck = checkSecurityIssues(ruleContent);
+                if (securityCheck) {
+                    rule.flag = securityCheck.flag;
+                    rule.reason = securityCheck.reason;
+                }
+
+                addRule(atRuleSignature, rule);
+
+            } else if (node.type === 'Rule') {
+                const ruleContent = csstree.generate(node);
+                const rule: Rule = { css: ruleContent };
+
+                const securityCheck = checkSecurityIssues(ruleContent);
+                if (securityCheck) {
+                    rule.flag = securityCheck.flag;
+                    rule.reason = securityCheck.reason;
+                }
+
+                addRule('', rule); // Empty string for standalone rules
+            }
+        });
+
+        // Return the categorized result - hydration will decide what to apply
+
+    } catch (parseError) {
+        result.unsafeAtRules = {
+            '': [{ css: cssContent, flag: 'malformed', reason: `CSS parsing failed: ${parseError.message}` }]
+        };
+    }
+
+    return result;
+}
+
 export const cssPlugin: Plugin = {
     name: 'css',
     initializePlugin: (md) => {
+        // Check for required css-tree dependency
+        if (typeof csstree === 'undefined') {
+            throw new Error('css-tree library is required for CSS plugin. Please include the css-tree script.');
+        }
+
         definePlugin(md, 'css');
         // Custom rule for CSS blocks
         md.block.ruler.before('fence', 'css_block', function (state, startLine, endLine) {
@@ -45,7 +186,12 @@ export const cssPlugin: Plugin = {
 
             if (info === 'css') {
                 const cssId = `css-${idx}`;
-                return sanitizedHTML('div', { id: cssId, class: 'css-component' }, token.content.trim());
+                const cssContent = token.content.trim();
+
+                // Parse and categorize CSS content
+                const categorizedCss = categorizeCss(cssContent);
+
+                return sanitizedHTML('div', { id: cssId, class: 'css-component' }, JSON.stringify(categorizedCss));
             }
 
             // Fallback to original fence renderer
@@ -64,26 +210,39 @@ export const cssPlugin: Plugin = {
             if (!container.textContent) continue;
 
             try {
-                const cssContent = container.textContent.trim();
-                
-                // Note: CSS sanitization is handled by DOMPurify at the renderer level
-                
-                // Create a style element with a unique ID
-                const styleElement = document.createElement('style');
-                styleElement.type = 'text/css';
-                styleElement.id = `idocs-css-${container.id}`;
-                styleElement.textContent = cssContent;
-                
-                // Add the style element to the renderer element
-                renderer.element.appendChild(styleElement);
-                
-                // Clear the container and add a comment indicating CSS was applied
-                container.innerHTML = `<!-- CSS styles applied to document -->`;
-                
-                cssInstances.push({
-                    id: container.id,
-                    element: styleElement
-                });
+                const categorizedCss: CategorizedCss = JSON.parse(container.textContent);
+
+                // Handle CSS with issues - show appropriate message
+                if (categorizedCss.unsafeAtRules) {
+                    container.innerHTML = `<div class="error">CSS blocked due to security issues</div>`;
+                    continue;
+                }
+
+                if (categorizedCss.flaggedAtRules) {
+                    container.innerHTML = `<div class="warning">CSS contains external URLs requiring approval</div>`;
+                    continue;
+                }
+
+                // Generate and apply safe CSS from unflagged rules
+                let safeCss = '';
+                if (categorizedCss.safeAtRules) {
+                    safeCss = reconstituteCss(categorizedCss.safeAtRules, true);
+                }
+
+                if (safeCss.trim().length > 0) {
+                    const styleElement = document.createElement('style');
+                    styleElement.type = 'text/css';
+                    styleElement.id = `idocs-css-${container.id}`;
+                    styleElement.textContent = safeCss;
+
+                    renderer.element.appendChild(styleElement);
+                    container.innerHTML = `<!-- CSS styles applied to document -->`;
+
+                    cssInstances.push({
+                        id: container.id,
+                        element: styleElement
+                    });
+                }
             } catch (e) {
                 container.innerHTML = `<div class="error">${e.toString()}</div>`;
                 errorHandler(e, 'CSS', index, 'parse', container);
diff --git a/packages/markdown/test/index.html b/packages/markdown/test/index.html
index 3206344b..bdf06ab7 100644
--- a/packages/markdown/test/index.html
+++ b/packages/markdown/test/index.html
@@ -8,6 +8,7 @@
     
     <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
     <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
+    <script src="https://unpkg.com/css-tree/dist/csstree.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vega@5.29.0"></script>
     <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.20.1"></script>
     <script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"></script>
diff --git a/packages/markdown/vite.bundle.config.js b/packages/markdown/vite.bundle.config.js
index 17fa270a..dbff24cc 100644
--- a/packages/markdown/vite.bundle.config.js
+++ b/packages/markdown/vite.bundle.config.js
@@ -10,6 +10,7 @@ const commonOutputConfig = {
     'markdown-it': 'markdownit',
     'vega': 'vega',
     'vega-lite': 'vegaLite',
+    'css-tree': 'csstree',
   },
   entryFileNames: 'idocs.markdown.umd.js',
 };
@@ -22,7 +23,7 @@ export default defineConfig({
     minify: false,
     rollupOptions: {
       // External dependencies that the library expects consumers to provide
-      external: ['markdown-it', 'vega', 'vega-lite', 'tabulator-tables'],
+      external: ['markdown-it', 'vega', 'vega-lite', 'tabulator-tables', 'css-tree'],
       output: [
         {
           ...commonOutputConfig,
diff --git a/packages/sandbox/vite.bundle.config.js b/packages/sandbox/vite.bundle.config.js
index c11e8843..c8b77219 100644
--- a/packages/sandbox/vite.bundle.config.js
+++ b/packages/sandbox/vite.bundle.config.js
@@ -10,6 +10,7 @@ const commonOutputConfig = {
     'markdown-it': 'markdownit',
     'vega': 'vega',
     'vega-lite': 'vegaLite',
+    'css-tree': 'csstree',
   },
   entryFileNames: 'idocs.sandbox.umd.js',
 };
@@ -23,7 +24,7 @@ export default defineConfig({
     emptyOutDir: false,
     rollupOptions: {
       // External dependencies that the library expects consumers to provide
-      external: ['vega', 'vega-lite'],
+      external: ['vega', 'vega-lite', 'css-tree'],
       output: [
         {
           ...commonOutputConfig,

From 6d4688e9072fb2d028f0a4e0f6c0378b193bf032 Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Wed, 23 Jul 2025 22:45:41 -0700
Subject: [PATCH 02/14] Refactor error handling in CSS plugin to use console
 messages instead of innerHTML for security issues

---
 packages/markdown/src/plugins/css.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/markdown/src/plugins/css.ts b/packages/markdown/src/plugins/css.ts
index 27e8e616..f3219b58 100644
--- a/packages/markdown/src/plugins/css.ts
+++ b/packages/markdown/src/plugins/css.ts
@@ -214,12 +214,12 @@ export const cssPlugin: Plugin = {
 
                 // Handle CSS with issues - show appropriate message
                 if (categorizedCss.unsafeAtRules) {
-                    container.innerHTML = `<div class="error">CSS blocked due to security issues</div>`;
+                    console.error('CSS blocked due to security issues');
                     continue;
                 }
 
                 if (categorizedCss.flaggedAtRules) {
-                    container.innerHTML = `<div class="warning">CSS contains external URLs requiring approval</div>`;
+                    console.warn('CSS contains external URLs requiring approval');
                     continue;
                 }
 

From 31a44d6f218499aa7e73b86dac8ebff7c0b52cf7 Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Wed, 23 Jul 2025 23:14:25 -0700
Subject: [PATCH 03/14] remove markdownit, add csstree

---
 docs/edit/index.html                          |  1 -
 docs/view/index.html                          |  1 -
 package-lock.json                             | 22 +++++++++++++++++++
 package.json                                  |  1 +
 packages/editor/index.html                    |  3 ++-
 packages/host/index.html                      |  1 -
 packages/sandbox/index.html                   |  1 -
 packages/sandbox/src/sandbox.ts               |  1 +
 packages/vscode-resources/html/html-json.html |  2 --
 .../vscode-resources/html/html-markdown.html  |  2 --
 packages/vscode/scripts/resources.mjs         |  1 +
 packages/vscode/src/web/command-edit.ts       |  2 +-
 packages/vscode/src/web/resources.ts          |  1 +
 13 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/docs/edit/index.html b/docs/edit/index.html
index 2383e309..b02a4bd8 100644
--- a/docs/edit/index.html
+++ b/docs/edit/index.html
@@ -8,7 +8,6 @@
 
     <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
-    <script src="https://unpkg.com/markdown-it/dist/markdown-it.min.js"></script>
     <script src="../dist/idocs.editor.umd.js"></script>
 </head>
 
diff --git a/docs/view/index.html b/docs/view/index.html
index 70a36b19..68394971 100644
--- a/docs/view/index.html
+++ b/docs/view/index.html
@@ -5,7 +5,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Interactive Document Host</title>
-    <script src="https://unpkg.com/markdown-it/dist/markdown-it.min.js"></script>
     <script src="../dist/idocs.host.umd.js"></script>
     <style>
         body {
diff --git a/package-lock.json b/package-lock.json
index a9c7a561..8f86f5fc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
         "@vscode/test-web": "^0.0.69",
         "assert": "^2.1.0",
         "concurrently": "^9.2.0",
+        "css-tree": "^3.1.0",
         "esbuild": "^0.25.3",
         "eslint": "^9.25.1",
         "glob": "^11.0.2",
@@ -5792,6 +5793,20 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/css-tree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.12.2",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
     "node_modules/css-what": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
@@ -8871,6 +8886,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/mdurl": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
diff --git a/package.json b/package.json
index 67aeed68..ed054142 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@vscode/test-web": "^0.0.69",
     "assert": "^2.1.0",
     "concurrently": "^9.2.0",
+    "css-tree": "^3.1.0",
     "esbuild": "^0.25.3",
     "eslint": "^9.25.1",
     "glob": "^11.0.2",
diff --git a/packages/editor/index.html b/packages/editor/index.html
index 0f763a4e..cb8abe12 100644
--- a/packages/editor/index.html
+++ b/packages/editor/index.html
@@ -8,9 +8,10 @@
 
     <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
-    <script src="https://unpkg.com/markdown-it/dist/markdown-it.min.js"></script>
 
     <!-- use only for dev mode / local -->
+    <script src="https://unpkg.com/markdown-it/dist/markdown-it.min.js"></script>
+    <script src="https://unpkg.com/css-tree/dist/csstree.js"></script>
     <script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"></script>
 
 </head>
diff --git a/packages/host/index.html b/packages/host/index.html
index a0a3e9d5..78b12dd1 100644
--- a/packages/host/index.html
+++ b/packages/host/index.html
@@ -5,7 +5,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Interactive Document Host</title>
-    <script src="https://unpkg.com/markdown-it/dist/markdown-it.min.js"></script>
     <style>
         html, body {
             height: 100%;
diff --git a/packages/sandbox/index.html b/packages/sandbox/index.html
index df8a031d..a7ca41cd 100644
--- a/packages/sandbox/index.html
+++ b/packages/sandbox/index.html
@@ -5,7 +5,6 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Interactive Document Sandbox</title>
-  <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
   <style>
     body {
       display: flex;
diff --git a/packages/sandbox/src/sandbox.ts b/packages/sandbox/src/sandbox.ts
index e830d220..fdcbf7cd 100644
--- a/packages/sandbox/src/sandbox.ts
+++ b/packages/sandbox/src/sandbox.ts
@@ -42,6 +42,7 @@ export class Sandbox extends Previewer {
         return `
 <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
 <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
+<script src="https://unpkg.com/css-tree/dist/csstree.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega@5.29.0"></script>
 <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.20.1"></script>
 <script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"></script>
diff --git a/packages/vscode-resources/html/html-json.html b/packages/vscode-resources/html/html-json.html
index 353810bb..a1e58a09 100644
--- a/packages/vscode-resources/html/html-json.html
+++ b/packages/vscode-resources/html/html-json.html
@@ -37,8 +37,6 @@
         }
     </style>
 
-    <script src="https://unpkg.com/markdown-it/dist/markdown-it.min.js"></script>
-
     <!-- TODO: get this from CDN -->
     {{SANDBOX_UMD_JS}}
 
diff --git a/packages/vscode-resources/html/html-markdown.html b/packages/vscode-resources/html/html-markdown.html
index 5b54efdb..5219de61 100644
--- a/packages/vscode-resources/html/html-markdown.html
+++ b/packages/vscode-resources/html/html-markdown.html
@@ -37,8 +37,6 @@
         }
     </style>
 
-    <script src="https://unpkg.com/markdown-it/dist/markdown-it.min.js"></script>
-
     <!-- TODO: get this from CDN -->
     {{SANDBOX_UMD_JS}}
 
diff --git a/packages/vscode/scripts/resources.mjs b/packages/vscode/scripts/resources.mjs
index 218ae505..170cfa2a 100644
--- a/packages/vscode/scripts/resources.mjs
+++ b/packages/vscode/scripts/resources.mjs
@@ -7,6 +7,7 @@ const resources = [
     '../../node_modules/vega/build/vega.min.js',
     '../../node_modules/vega-lite/build/vega-lite.min.js',
     '../../node_modules/markdown-it/dist/markdown-it.min.js',
+    '../../node_modules/css-tree/dist/csstree.js',
     '../../node_modules/tabulator-tables/dist/js/tabulator.min.js',
     '../../node_modules/tabulator-tables/dist/css/tabulator.min.css',
     '../../packages/host/dist/umd/idocs.host.umd.js',
diff --git a/packages/vscode/src/web/command-edit.ts b/packages/vscode/src/web/command-edit.ts
index 0130ab8e..327ce094 100644
--- a/packages/vscode/src/web/command-edit.ts
+++ b/packages/vscode/src/web/command-edit.ts
@@ -64,6 +64,7 @@ export class EditManager {
 						offlineDeps:
 							style(getResourceContent('tabulator.min.css')) +
 							script(getResourceContent('markdown-it.min.js')) +
+							script(getResourceContent('csstree.js')) +
 							script(getResourceContent('vega.min.js')) +
 							script(getResourceContent('vega-lite.min.js')) +
 							script(getResourceContent('tabulator.min.js'))
@@ -200,7 +201,6 @@ function getWebviewContent(webView: vscode.Webview, context: vscode.ExtensionCon
 	const resourceLinks = [
 		script(resourceUrl('react.production.min.js')),
 		script(resourceUrl('react-dom.production.min.js')),
-		script(resourceUrl('markdown-it.min.js')),
 		script(resourceUrl('idocs.editor.umd.js')),
 		script(resourceUrl('edit.js')),
 	].join('\n    ');
diff --git a/packages/vscode/src/web/resources.ts b/packages/vscode/src/web/resources.ts
index 5da3269f..50fcd0e5 100644
--- a/packages/vscode/src/web/resources.ts
+++ b/packages/vscode/src/web/resources.ts
@@ -14,6 +14,7 @@ export const initializeResources = async (context: vscode.ExtensionContext): Pro
     //offline copies for editor sandbox (which can't access via vscode resources url)
     'tabulator.min.css',
     'markdown-it.min.js',
+    'csstree.js',
     'vega.min.js',
     'vega-lite.min.js',
     'tabulator.min.js',

From c7491e9830f374b0edad984c4ee887c1298fda03 Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Wed, 23 Jul 2025 23:14:49 -0700
Subject: [PATCH 04/14] Refactor CSS categorization to improve readability and
 add security messages for blocked styles

---
 packages/markdown/src/plugins/css.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/markdown/src/plugins/css.ts b/packages/markdown/src/plugins/css.ts
index f3219b58..3abd2322 100644
--- a/packages/markdown/src/plugins/css.ts
+++ b/packages/markdown/src/plugins/css.ts
@@ -103,7 +103,7 @@ function categorizeCss(cssContent: string): CategorizedCss {
     try {
         // Parse CSS with CSS Tree
         const ast = csstree.parse(cssContent);        // Walk through the AST and organize rules
-        csstree.walk(ast, function(node) {
+        csstree.walk(ast, function (node) {
             if (node.type === 'Atrule') {
                 const atRuleSignature = `@${node.name}${node.prelude ? ` ${csstree.generate(node.prelude)}` : ''}`;
                 const ruleContent = csstree.generate(node);
@@ -205,7 +205,7 @@ export const cssPlugin: Plugin = {
     hydrateComponent: async (renderer, errorHandler) => {
         const cssInstances: { id: string; element: HTMLStyleElement }[] = [];
         const containers = renderer.element.querySelectorAll('.css-component');
-        
+
         for (const [index, container] of Array.from(containers).entries()) {
             if (!container.textContent) continue;
 
@@ -215,11 +215,13 @@ export const cssPlugin: Plugin = {
                 // Handle CSS with issues - show appropriate message
                 if (categorizedCss.unsafeAtRules) {
                     console.error('CSS blocked due to security issues');
+                    container.innerHTML = `<!-- CSS styles omitted due to security issues -->`;
                     continue;
                 }
 
                 if (categorizedCss.flaggedAtRules) {
                     console.warn('CSS contains external URLs requiring approval');
+                    container.innerHTML = `<!-- CSS styles contain external resources requiring approval -->`;
                     continue;
                 }
 

From e8cce56175f720b81e2136e70bc3be636af18af1 Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Wed, 23 Jul 2025 23:31:07 -0700
Subject: [PATCH 05/14] omit markdown namespace

---
 packages/sandbox/src/sandbox.ts | 2 +-
 packages/sandbox/umd.ts         | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/sandbox/src/sandbox.ts b/packages/sandbox/src/sandbox.ts
index fdcbf7cd..fcfa0334 100644
--- a/packages/sandbox/src/sandbox.ts
+++ b/packages/sandbox/src/sandbox.ts
@@ -2,7 +2,7 @@ import { Previewer, PreviewerOptions } from './preview.js';
 import { rendererHtml } from './resources/rendererHtml.js';
 import { rendererUmdJs } from './resources/rendererUmdJs.js';
 import { sandboxedJs } from './resources/sandboxedJs.js';
-import { RenderRequestMessage } from '@microsoft/interactive-document-markdown';
+import type { RenderRequestMessage } from '@microsoft/interactive-document-markdown';
 
 export class Sandbox extends Previewer {
     private iframe: HTMLIFrameElement;
diff --git a/packages/sandbox/umd.ts b/packages/sandbox/umd.ts
index 4f64c63b..254a5c46 100644
--- a/packages/sandbox/umd.ts
+++ b/packages/sandbox/umd.ts
@@ -1,3 +1,2 @@
 export * as common from 'common';
-export * as markdown from '@microsoft/interactive-document-markdown';
 export * as sandbox from './src/index.js';

From e8a44f319d97a9e24ec226d17c4c472c510b10ef Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Wed, 23 Jul 2025 23:32:40 -0700
Subject: [PATCH 06/14] new build

---
 docs/dist/idocs.editor.umd.js  |  139 ++-
 docs/dist/idocs.host.umd.js    |  139 ++-
 docs/dist/idocs.sandbox.umd.js | 1997 +++-----------------------------
 3 files changed, 393 insertions(+), 1882 deletions(-)

diff --git a/docs/dist/idocs.editor.umd.js b/docs/dist/idocs.editor.umd.js
index bb9a2a24..fd5b9cea 100644
--- a/docs/dist/idocs.editor.umd.js
+++ b/docs/dist/idocs.editor.umd.js
@@ -1149,9 +1149,105 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   * Copyright (c) Microsoft Corporation.
   * Licensed under the MIT License.
   */
+  function reconstituteAtRule(signature, rules, onlyUnflagged = true) {
+    const validRules = onlyUnflagged ? rules.filter((rule) => !rule.flag) : rules;
+    if (validRules.length === 0) return "";
+    if (signature === "") {
+      return validRules.map((rule) => rule.css).join("\\n");
+    } else {
+      const containedRules = validRules.map((rule) => rule.css).join("\\n");
+      return \`\${signature} {
+\${containedRules}
+}\`;
+    }
+  }
+  function reconstituteCss(atRules, onlyUnflagged = true) {
+    const cssBlocks = [];
+    for (const [signature, rules] of Object.entries(atRules)) {
+      const reconstructed = reconstituteAtRule(signature, rules, onlyUnflagged);
+      if (reconstructed) {
+        cssBlocks.push(reconstructed);
+      }
+    }
+    return cssBlocks.join("\\n\\n");
+  }
+  function categorizeCss(cssContent) {
+    const result = {};
+    function checkSecurityIssues(ruleContent) {
+      if (ruleContent.toLowerCase().includes("expression(")) {
+        return { flag: "scriptExec", reason: "CSS expression() function detected" };
+      } else if (ruleContent.toLowerCase().includes("javascript:")) {
+        return { flag: "scriptExec", reason: "JavaScript URL detected" };
+      } else if (ruleContent.includes("http://") || ruleContent.includes("https://")) {
+        return { flag: "externalResource", reason: "External URL detected" };
+      }
+      return null;
+    }
+    function addRule(signature, rule) {
+      if (!result.safeAtRules) {
+        result.safeAtRules = {};
+      }
+      if (!result.safeAtRules[signature]) {
+        result.safeAtRules[signature] = [];
+      }
+      result.safeAtRules[signature].push(rule);
+      if (rule.flag) {
+        if (rule.flag === "externalResource") {
+          if (!result.flaggedAtRules) {
+            result.flaggedAtRules = {};
+          }
+          if (!result.flaggedAtRules[signature]) {
+            result.flaggedAtRules[signature] = [];
+          }
+          result.flaggedAtRules[signature].push(rule);
+        } else {
+          if (!result.unsafeAtRules) {
+            result.unsafeAtRules = {};
+          }
+          if (!result.unsafeAtRules[signature]) {
+            result.unsafeAtRules[signature] = [];
+          }
+          result.unsafeAtRules[signature].push(rule);
+        }
+      }
+    }
+    try {
+      const ast = csstree.parse(cssContent);
+      csstree.walk(ast, function(node) {
+        if (node.type === "Atrule") {
+          const atRuleSignature = \`@\${node.name}\${node.prelude ? \` \${csstree.generate(node.prelude)}\` : ""}\`;
+          const ruleContent = csstree.generate(node);
+          const rule = { css: ruleContent };
+          const securityCheck = checkSecurityIssues(ruleContent);
+          if (securityCheck) {
+            rule.flag = securityCheck.flag;
+            rule.reason = securityCheck.reason;
+          }
+          addRule(atRuleSignature, rule);
+        } else if (node.type === "Rule") {
+          const ruleContent = csstree.generate(node);
+          const rule = { css: ruleContent };
+          const securityCheck = checkSecurityIssues(ruleContent);
+          if (securityCheck) {
+            rule.flag = securityCheck.flag;
+            rule.reason = securityCheck.reason;
+          }
+          addRule("", rule);
+        }
+      });
+    } catch (parseError) {
+      result.unsafeAtRules = {
+        "": [{ css: cssContent, flag: "malformed", reason: \`CSS parsing failed: \${parseError.message}\` }]
+      };
+    }
+    return result;
+  }
   const cssPlugin = {
     name: "css",
     initializePlugin: (md) => {
+      if (typeof csstree === "undefined") {
+        throw new Error("css-tree library is required for CSS plugin. Please include the css-tree script.");
+      }
       definePlugin(md, "css");
       md.block.ruler.before("fence", "css_block", function(state, startLine, endLine) {
         const start = state.bMarks[startLine] + state.tShift[startLine];
@@ -1179,7 +1275,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const info = token.info.trim();
         if (info === "css") {
           const cssId = \`css-\${idx}\`;
-          return sanitizedHTML("div", { id: cssId, class: "css-component" }, token.content.trim());
+          const cssContent = token.content.trim();
+          const categorizedCss = categorizeCss(cssContent);
+          return sanitizedHTML("div", { id: cssId, class: "css-component" }, JSON.stringify(categorizedCss));
         }
         if (originalFence) {
           return originalFence(tokens, idx, options, env, slf);
@@ -1194,17 +1292,33 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       for (const [index2, container] of Array.from(containers).entries()) {
         if (!container.textContent) continue;
         try {
-          const cssContent = container.textContent.trim();
-          const styleElement = document.createElement("style");
-          styleElement.type = "text/css";
-          styleElement.id = \`idocs-css-\${container.id}\`;
-          styleElement.textContent = cssContent;
-          renderer.element.appendChild(styleElement);
-          container.innerHTML = \`<!-- CSS styles applied to document -->\`;
-          cssInstances.push({
-            id: container.id,
-            element: styleElement
-          });
+          const categorizedCss = JSON.parse(container.textContent);
+          if (categorizedCss.unsafeAtRules) {
+            console.error("CSS blocked due to security issues");
+            container.innerHTML = \`<!-- CSS styles omitted due to security issues -->\`;
+            continue;
+          }
+          if (categorizedCss.flaggedAtRules) {
+            console.warn("CSS contains external URLs requiring approval");
+            container.innerHTML = \`<!-- CSS styles contain external resources requiring approval -->\`;
+            continue;
+          }
+          let safeCss = "";
+          if (categorizedCss.safeAtRules) {
+            safeCss = reconstituteCss(categorizedCss.safeAtRules, true);
+          }
+          if (safeCss.trim().length > 0) {
+            const styleElement = document.createElement("style");
+            styleElement.type = "text/css";
+            styleElement.id = \`idocs-css-\${container.id}\`;
+            styleElement.textContent = safeCss;
+            renderer.element.appendChild(styleElement);
+            container.innerHTML = \`<!-- CSS styles applied to document -->\`;
+            cssInstances.push({
+              id: container.id,
+              element: styleElement
+            });
+          }
         } catch (e) {
           container.innerHTML = \`<div class="error">\${e.toString()}</div>\`;
           errorHandler(e, "CSS", index2, "parse", container);
@@ -2347,6 +2461,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return `
 <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
 <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"><\/script>
+<script src="https://unpkg.com/css-tree/dist/csstree.js"><\/script>
 <script src="https://cdn.jsdelivr.net/npm/vega@5.29.0"><\/script>
 <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.20.1"><\/script>
 <script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"><\/script>
diff --git a/docs/dist/idocs.host.umd.js b/docs/dist/idocs.host.umd.js
index f2a35ded..6c02b436 100644
--- a/docs/dist/idocs.host.umd.js
+++ b/docs/dist/idocs.host.umd.js
@@ -1149,9 +1149,105 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   * Copyright (c) Microsoft Corporation.
   * Licensed under the MIT License.
   */
+  function reconstituteAtRule(signature, rules, onlyUnflagged = true) {
+    const validRules = onlyUnflagged ? rules.filter((rule) => !rule.flag) : rules;
+    if (validRules.length === 0) return "";
+    if (signature === "") {
+      return validRules.map((rule) => rule.css).join("\\n");
+    } else {
+      const containedRules = validRules.map((rule) => rule.css).join("\\n");
+      return \`\${signature} {
+\${containedRules}
+}\`;
+    }
+  }
+  function reconstituteCss(atRules, onlyUnflagged = true) {
+    const cssBlocks = [];
+    for (const [signature, rules] of Object.entries(atRules)) {
+      const reconstructed = reconstituteAtRule(signature, rules, onlyUnflagged);
+      if (reconstructed) {
+        cssBlocks.push(reconstructed);
+      }
+    }
+    return cssBlocks.join("\\n\\n");
+  }
+  function categorizeCss(cssContent) {
+    const result = {};
+    function checkSecurityIssues(ruleContent) {
+      if (ruleContent.toLowerCase().includes("expression(")) {
+        return { flag: "scriptExec", reason: "CSS expression() function detected" };
+      } else if (ruleContent.toLowerCase().includes("javascript:")) {
+        return { flag: "scriptExec", reason: "JavaScript URL detected" };
+      } else if (ruleContent.includes("http://") || ruleContent.includes("https://")) {
+        return { flag: "externalResource", reason: "External URL detected" };
+      }
+      return null;
+    }
+    function addRule(signature, rule) {
+      if (!result.safeAtRules) {
+        result.safeAtRules = {};
+      }
+      if (!result.safeAtRules[signature]) {
+        result.safeAtRules[signature] = [];
+      }
+      result.safeAtRules[signature].push(rule);
+      if (rule.flag) {
+        if (rule.flag === "externalResource") {
+          if (!result.flaggedAtRules) {
+            result.flaggedAtRules = {};
+          }
+          if (!result.flaggedAtRules[signature]) {
+            result.flaggedAtRules[signature] = [];
+          }
+          result.flaggedAtRules[signature].push(rule);
+        } else {
+          if (!result.unsafeAtRules) {
+            result.unsafeAtRules = {};
+          }
+          if (!result.unsafeAtRules[signature]) {
+            result.unsafeAtRules[signature] = [];
+          }
+          result.unsafeAtRules[signature].push(rule);
+        }
+      }
+    }
+    try {
+      const ast = csstree.parse(cssContent);
+      csstree.walk(ast, function(node) {
+        if (node.type === "Atrule") {
+          const atRuleSignature = \`@\${node.name}\${node.prelude ? \` \${csstree.generate(node.prelude)}\` : ""}\`;
+          const ruleContent = csstree.generate(node);
+          const rule = { css: ruleContent };
+          const securityCheck = checkSecurityIssues(ruleContent);
+          if (securityCheck) {
+            rule.flag = securityCheck.flag;
+            rule.reason = securityCheck.reason;
+          }
+          addRule(atRuleSignature, rule);
+        } else if (node.type === "Rule") {
+          const ruleContent = csstree.generate(node);
+          const rule = { css: ruleContent };
+          const securityCheck = checkSecurityIssues(ruleContent);
+          if (securityCheck) {
+            rule.flag = securityCheck.flag;
+            rule.reason = securityCheck.reason;
+          }
+          addRule("", rule);
+        }
+      });
+    } catch (parseError) {
+      result.unsafeAtRules = {
+        "": [{ css: cssContent, flag: "malformed", reason: \`CSS parsing failed: \${parseError.message}\` }]
+      };
+    }
+    return result;
+  }
   const cssPlugin = {
     name: "css",
     initializePlugin: (md) => {
+      if (typeof csstree === "undefined") {
+        throw new Error("css-tree library is required for CSS plugin. Please include the css-tree script.");
+      }
       definePlugin(md, "css");
       md.block.ruler.before("fence", "css_block", function(state, startLine, endLine) {
         const start = state.bMarks[startLine] + state.tShift[startLine];
@@ -1179,7 +1275,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const info = token.info.trim();
         if (info === "css") {
           const cssId = \`css-\${idx}\`;
-          return sanitizedHTML("div", { id: cssId, class: "css-component" }, token.content.trim());
+          const cssContent = token.content.trim();
+          const categorizedCss = categorizeCss(cssContent);
+          return sanitizedHTML("div", { id: cssId, class: "css-component" }, JSON.stringify(categorizedCss));
         }
         if (originalFence) {
           return originalFence(tokens, idx, options, env, slf);
@@ -1194,17 +1292,33 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       for (const [index2, container] of Array.from(containers).entries()) {
         if (!container.textContent) continue;
         try {
-          const cssContent = container.textContent.trim();
-          const styleElement = document.createElement("style");
-          styleElement.type = "text/css";
-          styleElement.id = \`idocs-css-\${container.id}\`;
-          styleElement.textContent = cssContent;
-          renderer.element.appendChild(styleElement);
-          container.innerHTML = \`<!-- CSS styles applied to document -->\`;
-          cssInstances.push({
-            id: container.id,
-            element: styleElement
-          });
+          const categorizedCss = JSON.parse(container.textContent);
+          if (categorizedCss.unsafeAtRules) {
+            console.error("CSS blocked due to security issues");
+            container.innerHTML = \`<!-- CSS styles omitted due to security issues -->\`;
+            continue;
+          }
+          if (categorizedCss.flaggedAtRules) {
+            console.warn("CSS contains external URLs requiring approval");
+            container.innerHTML = \`<!-- CSS styles contain external resources requiring approval -->\`;
+            continue;
+          }
+          let safeCss = "";
+          if (categorizedCss.safeAtRules) {
+            safeCss = reconstituteCss(categorizedCss.safeAtRules, true);
+          }
+          if (safeCss.trim().length > 0) {
+            const styleElement = document.createElement("style");
+            styleElement.type = "text/css";
+            styleElement.id = \`idocs-css-\${container.id}\`;
+            styleElement.textContent = safeCss;
+            renderer.element.appendChild(styleElement);
+            container.innerHTML = \`<!-- CSS styles applied to document -->\`;
+            cssInstances.push({
+              id: container.id,
+              element: styleElement
+            });
+          }
         } catch (e) {
           container.innerHTML = \`<div class="error">\${e.toString()}</div>\`;
           errorHandler(e, "CSS", index2, "parse", container);
@@ -2347,6 +2461,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return `
 <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
 <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"><\/script>
+<script src="https://unpkg.com/css-tree/dist/csstree.js"><\/script>
 <script src="https://cdn.jsdelivr.net/npm/vega@5.29.0"><\/script>
 <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.20.1"><\/script>
 <script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"><\/script>
diff --git a/docs/dist/idocs.sandbox.umd.js b/docs/dist/idocs.sandbox.umd.js
index 939decfa..365a01ec 100644
--- a/docs/dist/idocs.sandbox.umd.js
+++ b/docs/dist/idocs.sandbox.umd.js
@@ -1,1851 +1,18 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("vega"), require("vega-lite")) : typeof define === "function" && define.amd ? define(["exports", "vega", "vega-lite"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.IDocs = global.IDocs || {}, global.vega, global.vegaLite));
-})(this, function(exports2, vega, vegaLite) {
-  "use strict";var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-
-  const defaultCommonOptions = {
-    dataNameSelectedSuffix: "_selected",
-    dataSignalPrefix: "data_signal:",
-    groupClassName: "group"
-  };
-  const index$2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-    __proto__: null,
-    defaultCommonOptions
-  }, Symbol.toStringTag, { value: "Module" }));
-  const u = (e, t) => {
-    t && e.forEach(([s, n]) => {
-      switch (s) {
-        case "class":
-          t.attrJoin("class", n);
-          break;
-        case "css-module":
-          t.attrJoin("css-module", n);
-          break;
-        default:
-          t.attrPush([s, n]);
-      }
-    });
-  }, _ = ".", x = "#", v = /[^\t\n\f />"'=]/, O = " ", E = "=", d = (e, t, { left: s, right: n, allowed: o }) => {
-    let i = "", l = "", r = true, c = false;
-    const f = [];
-    for (let h = t + s.length; h < e.length; h++) {
-      if (e.slice(h, h + n.length) === n) {
-        i !== "" && f.push([i, l]);
-        break;
-      }
-      const a = e.charAt(h);
-      if (a === E && r) {
-        r = false;
-        continue;
-      }
-      if (a === _ && i === "") {
-        e.charAt(h + 1) === _ ? (i = "css-module", h++) : i = "class", r = false;
-        continue;
-      }
-      if (a === x && i === "") {
-        i = "id", r = false;
-        continue;
-      }
-      if (a === '"' && l === "" && !c) {
-        c = true;
-        continue;
-      }
-      if (a === '"' && c) {
-        c = false;
-        continue;
-      }
-      if (a === O && !c) {
-        if (i === "") continue;
-        f.push([i, l]), i = "", l = "", r = true;
-        continue;
-      }
-      if (!(r && a.search(v) === -1)) {
-        if (r) {
-          i += a;
-          continue;
-        }
-        l += a;
-      }
-    }
-    return o.length ? f.filter(([h]) => o.some((a) => a instanceof RegExp ? a.test(h) : a === h)) : f;
-  }, y = ({ left: e, right: t }, s) => {
-    if (!["start", "end", "only"].includes(s)) throw new Error(`Invalid 'where' parameter: ${s}. Expected 'start', 'end', or 'only'.`);
-    return (n) => {
-      const o = e.length, i = t.length, l = o + 1 + i, r = o + 1;
-      if (!n || typeof n != "string" || n.length < l) return false;
-      const c = (p) => [_, x].includes(p.charAt(o)) ? p.length >= l + 1 : p.length >= l;
-      let f, h, a, m;
-      return s === "start" ? (a = n.slice(0, o), f = a === e ? 0 : -1, h = f === -1 ? -1 : n.indexOf(t, r), m = n.charAt(h + i), m && t.includes(m) && (h = -1)) : s === "end" ? (f = n.lastIndexOf(e), h = f === -1 ? -1 : n.indexOf(t, f + r), h = h === n.length - i ? h : -1) : (a = n.slice(0, o), f = a === e ? 0 : -1, a = n.slice(n.length - i), h = a === t ? n.length - i : -1), f !== -1 && h !== -1 && c(n.substring(f, h + i));
-    };
-  }, g = (e, t) => {
-    const s = e[t];
-    if (s.type === "softbreak") return null;
-    if (s.nesting === 0) return s;
-    const n = s.level, o = s.type.replace("_close", "_open");
-    for (; t >= 0; ) {
-      const i = e[t];
-      if (i.type === o && i.level === n) return i;
-      t--;
-    }
-    /* istanbul ignore next -- @preserve */
-    return null;
-  }, b = (e) => e.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&"), w = (e, t, s) => {
-    const n = b(t), o = b(s), i = e.search(new RegExp(`[ \\n]?${n}[^${n}${o}]+${o}$`));
-    return i !== -1 ? e.slice(0, i) : e;
-  }, $ = (e, t) => t >= 0 ? e[t] : e[e.length + t], C = (e) => Array.isArray(e) && !!e.length && e.every((t) => typeof t == "function"), I = (e) => Array.isArray(e) && !!e.length && e.every((t) => typeof t == "object"), k = (e, t, s) => {
-    var _a, _b;
-    const n = { match: false, position: null }, o = s.shift !== void 0 ? t + s.shift : s.position;
-    if (s.shift !== void 0 && o < 0) return n;
-    const i = $(e, o);
-    if (!i) return n;
-    for (const l of Object.keys(s)) {
-      if (l === "shift" || l === "position") continue;
-      if (i[l] === void 0) return n;
-      if (l === "children" && I(s.children)) {
-        if (((_a = i.children) == null ? void 0 : _a.length) === 0) return n;
-        let c;
-        const f = s.children, h = i.children;
-        if (f.every((a) => a.position !== void 0)) {
-          if (c = f.every((a) => k(h, a.position, a).match), c) {
-            const a = ((_b = f[f.length - 1]) == null ? void 0 : _b.position) ?? 0;
-            n.position = a >= 0 ? a : h.length + a;
-          }
-        } else for (let a = 0; a < h.length; a++) if (c = f.every((m) => k(h, a, m).match), c) {
-          n.position = a;
-          break;
-        }
-        if (c === false) return n;
-        continue;
-      }
-      const r = s[l];
-      switch (typeof r) {
-        case "boolean":
-        case "number":
-        case "string": {
-          if (i[l] !== r) return n;
-          break;
-        }
-        case "function": {
-          if (!r(i[l])) return n;
-          break;
-        }
-        default: {
-          if (C(r)) {
-            if (!r.every((c) => c(i[l]))) return n;
-            break;
-          }
-          throw new Error(`Unknown type of pattern test (key: ${l}). Test should be of type boolean, number, string, function or array of functions.`);
-        }
-      }
-    }
-    return n.match = true, n;
-  }, S = (e) => ({ name: "end of block", tests: [{ shift: 0, type: "inline", children: [{ position: -1, content: y(e, "end"), type: (t) => t !== "code_inline" && t !== "math_inline" }] }], transform: (t, s, n) => {
-    const o = t[s].children[n], { content: i } = o, l = i.lastIndexOf(e.left), r = d(i, l, e);
-    let c = s + 1;
-    for (; t[c + 1] && t[c + 1].nesting === -1; ) c++;
-    const f = g(t, c);
-    u(r, f);
-    const h = i.slice(0, l), a = h[h.length - 1] === " ";
-    o.content = a ? h.slice(0, -1) : h;
-  } }), T = (e) => ({ name: "code-block", tests: [{ shift: 0, block: true, info: y(e, "end") }], transform: (t, s) => {
-    const n = t[s];
-    let o = "";
-    const i = /{(?:[\d,-]+)}/.exec(n.info);
-    i && (n.info = n.info.replace(i[0], ""), o = i[0]);
-    const l = n.info.lastIndexOf(e.left), r = d(n.info, l, e);
-    u(r, n);
-    const c = w(n.info, e.left, e.right);
-    n.info = `${c} ${o}`.trim();
-  } }), D = (e) => [{ name: "inline nesting self-close", tests: [{ shift: 0, type: "inline", children: [{ shift: -1, type: (t) => t === "image" || t === "code_inline" }, { shift: 0, type: "text", content: y(e, "start") }] }], transform: (t, s, n) => {
-    const o = e.right.length, i = t[s].children[n], l = i.content.indexOf(e.right), r = t[s].children[n - 1], c = d(i.content, 0, e);
-    u(c, r), i.content.length === l + o ? t[s].children.splice(n, 1) : i.content = i.content.slice(l + o);
-  } }, { name: "inline attributes", tests: [{ shift: 0, type: "inline", children: [{ shift: -1, nesting: -1 }, { shift: 0, type: "text", content: y(e, "start") }] }], transform: (t, s, n) => {
-    const o = t[s].children[n], { content: i } = o, l = d(i, 0, e), r = g(t[s].children, n - 1);
-    u(l, r);
-    const c = i.indexOf(e.right) + e.right.length;
-    o.content = i.slice(c);
-  } }], K = (e) => [{ name: "list softbreak", tests: [{ shift: -2, type: "list_item_open" }, { shift: 0, type: "inline", children: [{ position: -2, type: "softbreak" }, { position: -1, type: "text", content: y(e, "only") }] }], transform: (t, s, n) => {
-    const o = t[s].children[n], i = d(o.content, 0, e);
-    let l = s - 2;
-    for (; t[l - 1] && t[l - 1].type !== "ordered_list_open" && t[l - 1].type !== "bullet_list_open"; ) l--;
-    u(i, t[l - 1]), t[s].children = t[s].children.slice(0, -2);
-  } }, { name: "list double softbreak", tests: [{ shift: 0, type: (t) => t === "bullet_list_close" || t === "ordered_list_close" }, { shift: 1, type: "paragraph_open" }, { shift: 2, type: "inline", content: y(e, "only"), children: (t) => t.length === 1 }, { shift: 3, type: "paragraph_close" }], transform: (t, s) => {
-    const n = t[s + 2], o = d(n.content, 0, e), i = g(t, s);
-    u(o, i), t.splice(s + 1, 3);
-  } }, { name: "list item end", tests: [{ shift: -2, type: "list_item_open" }, { shift: 0, type: "inline", children: [{ position: -1, type: "text", content: y(e, "end") }] }], transform: (t, s, n) => {
-    const o = t[s].children[n], { content: i } = o, l = i.lastIndexOf(e.left), r = d(i, l, e);
-    u(r, t[s - 2]);
-    const c = i.slice(0, l), f = c[c.length - 1] === " ";
-    o.content = f ? c.slice(0, -1) : c;
-  } }], L = (e) => ({ name: `
-{.a} softbreak then curly in start`, tests: [{ shift: 0, type: "inline", children: [{ position: -2, type: "softbreak" }, { position: -1, type: "text", content: y(e, "only") }] }], transform: (t, s, n) => {
-    const o = t[s].children[n], i = d(o.content, 0, e);
-    let l = s + 1;
-    for (; t[l + 1] && t[l + 1].nesting === -1; ) l++;
-    const r = g(t, l);
-    u(i, r), t[s].children = t[s].children.slice(0, -2);
-  } }), M = (e) => ({ name: "horizontal rule", tests: [{ shift: 0, type: "paragraph_open" }, { shift: 1, type: "inline", children: (t) => t.length === 1, content: (t) => new RegExp(`^ {0,3}[-*_]{3,} ?${b(e.left)}[^${b(e.right)}]`).test(t) }, { shift: 2, type: "paragraph_close" }], transform: (t, s) => {
-    const n = t[s];
-    n.type = "hr", n.tag = "hr", n.nesting = 0;
-    const o = t[s + 1], { content: i } = o, l = i.lastIndexOf(e.left), r = d(i, l, e);
-    u(r, n), n.markup = i, t.splice(s + 1, 2);
-  } }), A = (e) => {
-    var _a;
-    e.hidden = true, (_a = e.children) == null ? void 0 : _a.forEach((t) => {
-      t.content = "", A(t);
-    });
-  }, P = (e, t, s, n, o, i) => {
-    let l = n - (o > 0 ? o : 1);
-    for (let r = t, c = i; r < s && c > 1; r++) if (e[r].type === "tr_open") {
-      const f = e[r];
-      f.meta ?? (f.meta = {}), f.meta.columnCount && (l -= 1), f.meta.columnCount = l, c--;
-    }
-  }, j = (e, t, s) => {
-    var _a;
-    const n = (_a = e[t].meta) == null ? void 0 : _a.columnCount;
-    if (n) for (let o = t, i = 0; o < s; o++) {
-      const l = e[o];
-      if (l.type === "td_open") i += 1;
-      else if (l.type === "tr_close") break;
-      i > n && !l.hidden && A(l);
-    }
-  }, N = (e, t, s, n, o, i) => {
-    var _a;
-    const l = [], r = e[t];
-    let c = t + 3, f = n;
-    for (let p = t; p > i; p--) if (e[p].type === "tr_open") {
-      f = ((_a = e[p].meta) == null ? void 0 : _a.columnCount) ?? f;
-      break;
-    } else e[p].type === "td_open" && l.unshift(p);
-    for (let p = t + 2; p < s; p++) if (e[p].type === "tr_close") {
-      c = p;
-      break;
-    } else e[p].type === "td_open" && l.push(p);
-    const h = l.indexOf(t), a = Math.min(o, f - h);
-    o > a && r.attrSet("colspan", a.toString());
-    const m = l.slice(f + 1 - n - a)[0];
-    for (let p = m; p < c; p++) e[p].hidden || A(e[p]);
-  }, B = (e) => [{ name: "table", tests: [{ shift: 0, type: "table_close" }, { shift: 1, type: "paragraph_open" }, { shift: 2, type: "inline", content: y(e, "only") }], transform: (t, s) => {
-    const n = t[s + 2], o = g(t, s), i = d(n.content, 0, e);
-    u(i, o), t.splice(s + 1, 3);
-  } }, { name: "table cell attributes", tests: [{ shift: -1, type: (t) => t === "td_open" || t === "th_open" }, { shift: 0, type: "inline", children: [{ shift: 0, type: "text", content: y(e, "end") }] }], transform: (t, s, n) => {
-    const o = t[s].children[n], i = t[s - 1], { content: l } = o, r = l.lastIndexOf(e.left), c = d(l, r, e);
-    u(c, i), o.content = l.substring(0, r).trim();
-  } }, { name: "table thead metadata", tests: [{ shift: 0, type: "tr_close" }, { shift: 1, type: "thead_close" }, { shift: 2, type: "tbody_open" }], transform: (t, s) => {
-    const n = g(t, s), o = t[s - 1];
-    let i = 0, l = s - 1;
-    for (; l > 0; ) {
-      const c = t[l];
-      if (c === n) {
-        const f = t[l - 1];
-        f.meta = { ...f.meta, columnCount: i };
-        break;
-      }
-      c.level === o.level && c.type === o.type && i++, l--;
-    }
-    const r = t[s + 2];
-    r.meta = { ...r.meta, columnCount: i };
-  } }, { name: "table tbody calculate", tests: [{ shift: 0, type: "tbody_close", hidden: false }], transform: (t, s) => {
-    var _a;
-    let n = s - 2;
-    for (; n > 0 && (n--, t[n].type !== "tbody_open"); ) ;
-    const o = Number(((_a = t[n].meta) == null ? void 0 : _a.columnCount) ?? 0);
-    if (o < 2) return;
-    const i = t[s].level + 2;
-    for (let l = n; l < s; l++) {
-      if (t[l].level > i) continue;
-      const r = t[l], c = r.hidden ? 0 : Number(r.attrGet("rowspan")), f = r.hidden ? 0 : Number(r.attrGet("colspan"));
-      c > 1 && P(t, l, s, o, f, c), r.type === "tr_open" && j(t, l, s), f > 1 && N(t, l, s, o, f, n);
-    }
-  } }], R$1 = ["fence", "inline", "table", "list", "hr", "softbreak", "block"], F = (e) => {
-    const t = e.rule === false ? [] : Array.isArray(e.rule) ? e.rule.filter((n) => R$1.includes(n)) : R$1, s = [];
-    return t.includes("fence") && s.push(T(e)), t.includes("inline") && s.push(...D(e)), t.includes("table") && s.push(...B(e)), t.includes("list") && s.push(...K(e)), t.includes("softbreak") && s.push(L(e)), t.includes("hr") && s.push(M(e)), t.includes("block") && s.push(S(e)), s;
-  }, G = (e, { left: t = "{", right: s = "}", allowed: n = [], rule: o = "all" } = {}) => {
-    const i = F({ left: t, right: s, allowed: n, rule: o }), l = ({ tokens: r }) => {
-      for (let c = 0; c < r.length; c++) for (let f = 0; f < i.length; f++) {
-        const h = i[f];
-        let a = null;
-        h.tests.every((m) => {
-          const p = k(r, c, m);
-          return p.position !== null && ({ position: a } = p), p.match;
-        }) && (h.transform(r, c, a), (h.name === "inline attributes" || h.name === "inline nesting self-close") && f--);
-      }
-    };
-    e.core.ruler.before("linkify", "attrs", l);
-  };
-  const R = (p, u2) => {
-    if (typeof u2 != "object" || !u2.name) throw new Error("[@mdit/plugin-container]: 'name' option is required.");
-    const { name: c, marker: l = ":", validate: $2 = (e) => e.trim().split(" ", 2)[0] === c, openRender: g2 = (e, t, n, k2, o) => (e[t].attrJoin("class", c), o.renderToken(e, t, n)), closeRender: C2 = (e, t, n, k2, o) => o.renderToken(e, t, n) } = u2, m = l[0], i = l.length, I2 = (e, t, n, k2) => {
-      const o = e.bMarks[t] + e.tShift[t], h = e.eMarks[t], d2 = e.sCount[t];
-      if (m !== e.src[o]) return false;
-      let r = o + 1;
-      for (; r <= h && l[(r - o) % i] === e.src[r]; ) r++;
-      const M2 = Math.floor((r - o) / i);
-      if (M2 < 3) return false;
-      r -= (r - o) % i;
-      const _2 = e.src.slice(o, r), T2 = e.src.slice(r, h);
-      if (!$2(T2, _2)) return false;
-      if (k2) return true;
-      let s = t + 1, x2 = false;
-      for (; s < n; s++) {
-        const a = e.bMarks[s] + e.tShift[s], b2 = e.eMarks[s];
-        if (a < b2 && e.sCount[s] < d2) break;
-        if (e.sCount[s] === d2 && m === e.src[a]) {
-          for (r = a + 1; r <= b2 && l[(r - a) % i] === e.src[r]; r++) ;
-          if (Math.floor((r - a) / i) >= M2 && (r -= (r - a) % i, r = e.skipSpaces(r), r >= b2)) {
-            x2 = true;
-            break;
-          }
-        }
-      }
-      const S2 = e.parentType, v2 = e.lineMax, w2 = e.blkIndent;
-      e.parentType = "container", e.lineMax = s, e.blkIndent = d2;
-      const f = e.push(`container_${c}_open`, "div", 1);
-      f.markup = _2, f.block = true, f.info = T2, f.map = [t, s], e.md.block.tokenize(e, t + 1, s);
-      const y2 = e.push(`container_${c}_close`, "div", -1);
-      return y2.markup = e.src.slice(o, r), y2.block = true, e.parentType = S2, e.lineMax = v2, e.blkIndent = w2, e.line = s + (x2 ? 1 : 0), true;
-    };
-    p.block.ruler.before("fence", `container_${c}`, I2, { alt: ["paragraph", "reference", "blockquote", "list"] }), p.renderer.rules[`container_${c}_open`] = g2, p.renderer.rules[`container_${c}_close`] = C2;
-  };
-  /*!
-  * Copyright (c) Microsoft Corporation.
-  * Licensed under the MIT License.
-  */
-  const plugins = [];
-  function registerMarkdownPlugin(plugin) {
-    plugins.push(plugin);
-    return "register";
-  }
-  function create() {
-    const md = new markdownit();
-    for (const plugin of plugins) {
-      plugin.initializePlugin(md);
-    }
-    md.use(G);
-    const containerOptions = { name: defaultCommonOptions.groupClassName };
-    md.use(R, containerOptions);
-    const originalFence = md.renderer.rules.fence;
-    md.renderer.rules.fence = function(tokens, idx, options, env, slf) {
-      const token = tokens[idx];
-      const info = token.info.trim();
-      if (info.startsWith("json ")) {
-        const pluginName = info.slice(5).trim();
-        const plugin = plugins.find((p) => p.name === pluginName);
-        if (plugin && plugin.fence) {
-          return plugin.fence(token, idx);
-        }
-      }
-      if (originalFence) {
-        return originalFence(tokens, idx, options, env, slf);
-      } else {
-        return "";
-      }
-    };
-    return md;
-  }
-  function definePlugin(md, pluginName) {
-    md.block.ruler.before("fence", `${pluginName}_block`, function(state, startLine, endLine) {
-      const start = state.bMarks[startLine] + state.tShift[startLine];
-      const max = state.eMarks[startLine];
-      const marker = `json ${pluginName}`;
-      if (!state.src.slice(start, max).trim().startsWith("```" + marker)) {
-        return false;
-      }
-      let nextLine = startLine;
-      while (nextLine < endLine) {
-        nextLine++;
-        if (state.src.slice(state.bMarks[nextLine] + state.tShift[nextLine], state.eMarks[nextLine]).trim() === "```") {
-          break;
-        }
-      }
-      state.line = nextLine + 1;
-      const token = state.push("fence", "code", 0);
-      token.info = marker;
-      token.content = state.getLines(startLine + 1, nextLine, state.blkIndent, true);
-      token.map = [startLine, state.line];
-      return true;
-    });
-  }
-  /*!
-  * Copyright (c) Microsoft Corporation.
-  * Licensed under the MIT License.
-  */
-  var LogLevel;
-  (function(LogLevel2) {
-    LogLevel2[LogLevel2["none"] = 0] = "none";
-    LogLevel2[LogLevel2["some"] = 1] = "some";
-    LogLevel2[LogLevel2["all"] = 2] = "all";
-  })(LogLevel || (LogLevel = {}));
-  class SignalBus {
-    constructor(dataSignalPrefix) {
-      __publicField(this, "dataSignalPrefix");
-      __publicField(this, "broadcastingStack");
-      __publicField(this, "logLevel");
-      __publicField(this, "logWatchIds");
-      __publicField(this, "active");
-      __publicField(this, "peers");
-      __publicField(this, "signalDeps");
-      __publicField(this, "peerDependencies");
-      this.dataSignalPrefix = dataSignalPrefix;
-      this.logLevel = LogLevel.none;
-      this.logWatchIds = [];
-      this.reset();
-    }
-    log(id, message, ...optionalParams) {
-      if (this.logLevel === LogLevel.none)
-        return;
-      if (this.logWatchIds.length > 0 && !this.logWatchIds.includes(id))
-        return;
-      console.log(`[Signal Bus][${id}] ${message}`, ...optionalParams);
-    }
-    async broadcast(originId, batch) {
-      if (this.broadcastingStack.includes(originId)) {
-        this.log(originId, "Additional broadcast from", originId, this.broadcastingStack.join(" -> "));
-      }
-      this.log(originId, "Broadcasting batch from", originId, batch);
-      this.broadcastingStack.push(originId);
-      for (const peerId of this.peerDependencies[originId]) {
-        const peer = this.peers.find((p) => p.id === peerId);
-        if (!peer)
-          continue;
-        const peerBatch = {};
-        let hasBatch = false;
-        for (const signalName in batch) {
-          if (peer.initialSignals.some((s) => s.name === signalName) && batch[signalName].value !== this.signalDeps[signalName].value) {
-            peerBatch[signalName] = batch[signalName];
-            hasBatch = true;
-          }
-        }
-        if (!hasBatch)
-          continue;
-        peer.recieveBatch && await peer.recieveBatch(peerBatch, originId);
-      }
-      this.broadcastingStack.pop();
-      for (const signalName in batch) {
-        const signalDep = this.signalDeps[signalName];
-        signalDep.value = batch[signalName].value;
-      }
-      if (this.broadcastingStack.length === 0) {
-        for (const peer of this.peers) {
-          peer.broadcastComplete && await peer.broadcastComplete();
-        }
-      }
-    }
-    getPriorityPeer(signalName) {
-      const signalDep = this.signalDeps[signalName];
-      if (!signalDep)
-        return null;
-      return this.peers.find((p) => p.id === signalDep.initialPriorityId);
-    }
-    registerPeer(peer) {
-      this.peers.push(peer);
-      for (const initialSignal of peer.initialSignals) {
-        if (!(initialSignal.name in this.signalDeps)) {
-          this.signalDeps[initialSignal.name] = {
-            deps: [peer],
-            priority: initialSignal.priority,
-            initialPriorityId: peer.id,
-            value: initialSignal.value,
-            isData: initialSignal.isData
-          };
-        } else {
-          const signalDep = this.signalDeps[initialSignal.name];
-          if (!signalDep.deps.includes(peer)) {
-            signalDep.deps.push(peer);
-          }
-          if (initialSignal.priority > signalDep.priority) {
-            signalDep.priority = initialSignal.priority;
-            signalDep.initialPriorityId = peer.id;
-            signalDep.value = initialSignal.value;
-            signalDep.isData = initialSignal.isData;
-          }
-        }
-      }
-    }
-    beginListening() {
-      this.log("beginListening", "begin initial batch", this.signalDeps);
-      for (const peer of this.peers) {
-        const batch = {};
-        for (const signalName in this.signalDeps) {
-          const signalDep = this.signalDeps[signalName];
-          const { value, isData } = signalDep;
-          batch[signalName] = { value, isData };
-        }
-        peer.recieveBatch && peer.recieveBatch(batch, "initial");
-      }
-      this.log("beginListening", "end initial batch");
-      const peerSignals = {};
-      for (const signalName in this.signalDeps) {
-        const signalDep = this.signalDeps[signalName];
-        if (signalDep.deps.length === 1)
-          continue;
-        for (const peer of signalDep.deps) {
-          if (!(peer.id in peerSignals)) {
-            peerSignals[peer.id] = [];
-            this.peerDependencies[peer.id] = [];
-          }
-          peerSignals[peer.id].push({ signalName, isData: signalDep.isData });
-          for (const otherPeer of signalDep.deps) {
-            if (otherPeer.id !== peer.id && !this.peerDependencies[peer.id].includes(otherPeer.id)) {
-              this.peerDependencies[peer.id].push(otherPeer.id);
-            }
-          }
-        }
-      }
-      this.log("beginListening", "======= dependencies =========", peerSignals, this.peerDependencies);
-      for (const peer of this.peers) {
-        const sharedSignals = peerSignals[peer.id];
-        if (sharedSignals) {
-          this.log(peer.id, "Shared signals:", sharedSignals);
-          if (this.peerDependencies[peer.id]) {
-            this.log(peer.id, "Shared dependencies:", this.peerDependencies[peer.id]);
-          }
-          peer.beginListening && peer.beginListening(sharedSignals);
-        } else {
-          this.log(peer.id, "No shared signals");
-        }
-      }
-      this.active = true;
-    }
-    reset() {
-      this.signalDeps = {};
-      this.active = false;
-      this.peers = [];
-      this.broadcastingStack = [];
-      this.peerDependencies = {};
-    }
-  }
-  /*!
-  * Copyright (c) Microsoft Corporation.
-  * Licensed under the MIT License.
-  */
-  const defaultRendererOptions = {
-    vegaRenderer: "canvas",
-    useShadowDom: false,
-    errorHandler: (error, pluginName, instanceIndex, phase) => {
-      console.error(`Error in plugin ${pluginName} instance ${instanceIndex} phase ${phase}`, error);
-    }
-  };
-  class Renderer {
-    constructor(_element, options) {
-      __publicField(this, "md");
-      __publicField(this, "instances");
-      __publicField(this, "signalBus");
-      __publicField(this, "options");
-      __publicField(this, "shadowRoot");
-      __publicField(this, "element");
-      this.options = { ...defaultRendererOptions, ...options };
-      this.signalBus = this.options.signalBus || new SignalBus(defaultCommonOptions.dataSignalPrefix);
-      this.instances = {};
-      if (this.options.useShadowDom) {
-        this.shadowRoot = _element.attachShadow({ mode: "open" });
-        this.element = this.shadowRoot;
-      } else {
-        this.element = _element;
-      }
-    }
-    ensureMd() {
-      if (!this.md) {
-        this.md = create();
-      }
-    }
-    async render(markdown) {
-      await this.reset();
-      const content = this.renderHtml(markdown);
-      this.element.innerHTML = content;
-      await this.hydrate();
-    }
-    renderHtml(markdown) {
-      this.ensureMd();
-      const parsedHTML = this.md.render(markdown);
-      let content = parsedHTML;
-      if (this.options.useShadowDom) {
-        content = `<div class="body">${content}</div>`;
-      }
-      return content;
-    }
-    async hydrate() {
-      this.ensureMd();
-      this.signalBus.log("Renderer", "rendering DOM");
-      const hydrationPromises = [];
-      for (let i = 0; i < plugins.length; i++) {
-        const plugin = plugins[i];
-        if (plugin.hydrateComponent) {
-          hydrationPromises.push(plugin.hydrateComponent(this, this.options.errorHandler).then((instances) => {
-            return {
-              pluginName: plugin.name,
-              instances
-            };
-          }));
-        }
-      }
-      try {
-        const pluginHydrations = await Promise.all(hydrationPromises);
-        for (const hydration of pluginHydrations) {
-          if (hydration && hydration.instances) {
-            this.instances[hydration.pluginName] = hydration.instances;
-            for (const instance of hydration.instances) {
-              this.signalBus.registerPeer(instance);
-            }
-          }
-        }
-        this.signalBus.beginListening();
-      } catch (error) {
-        console.error("Error in rendering plugins", error);
-      }
-    }
-    reset() {
-      this.signalBus.reset();
-      for (const pluginName of Object.keys(this.instances)) {
-        const instances = this.instances[pluginName];
-        for (const instance of instances) {
-          instance.destroy && instance.destroy();
-        }
-      }
-      this.instances = {};
-      this.element.innerHTML = "";
-    }
-  }
-  /*!
-  * Copyright (c) Microsoft Corporation.
-  * Licensed under the MIT License.
-  */
-  function sanitizedHTML(tagName, attributes, content) {
-    const element = document.createElement(tagName);
-    Object.keys(attributes).forEach((key) => {
-      element.setAttribute(key, attributes[key]);
-    });
-    element.textContent = content;
-    return element.outerHTML;
-  }
-  /*!
-  * Copyright (c) Microsoft Corporation.
-  * Licensed under the MIT License.
-  */
-  const checkboxPlugin = {
-    name: "checkbox",
-    initializePlugin: (md) => definePlugin(md, "checkbox"),
-    fence: (token, idx) => {
-      const CheckboxId = `Checkbox-${idx}`;
-      return sanitizedHTML("div", { id: CheckboxId, class: "checkbox" }, token.content.trim());
-    },
-    hydrateComponent: async (renderer, errorHandler) => {
-      const checkboxInstances = [];
-      const containers = renderer.element.querySelectorAll(".checkbox");
-      for (const [index2, container] of Array.from(containers).entries()) {
-        if (!container.textContent)
-          continue;
-        try {
-          const spec = JSON.parse(container.textContent);
-          const html = `<form class="vega-bindings">
-                    <div class="vega-bind">
-                        <label>
-                            <span class="vega-bind-name">${spec.label || spec.name}</span>
-                            <input type="checkbox" class="vega-bind-checkbox" id="${spec.name}" name="${spec.name}" ${spec.value ? "checked" : ""}>
-                        </label>
-                    </div>
-                </form>`;
-          container.innerHTML = html;
-          const element = container.querySelector('input[type="checkbox"]');
-          const checkboxInstance = { id: container.id, spec, element };
-          checkboxInstances.push(checkboxInstance);
-        } catch (e) {
-          container.innerHTML = `<div class="error">${e.toString()}</div>`;
-          errorHandler(e, "Checkbox", index2, "parse", container);
-          continue;
-        }
-      }
-      const instances = checkboxInstances.map((checkboxInstance) => {
-        const { element, spec } = checkboxInstance;
-        const initialSignals = [{
-          name: spec.name,
-          value: spec.value || false,
-          priority: 1,
-          isData: false
-        }];
-        return {
-          ...checkboxInstance,
-          initialSignals,
-          recieveBatch: async (batch) => {
-            if (batch[spec.name]) {
-              const value = batch[spec.name].value;
-              element.checked = value;
-            }
-          },
-          beginListening() {
-            element.addEventListener("change", (e) => {
-              const value = e.target.checked;
-              const batch = {
-                [spec.name]: {
-                  value,
-                  isData: false
-                }
-              };
-              renderer.signalBus.broadcast(checkboxInstance.id, batch);
-            });
-          },
-          getCurrentSignalValue: () => {
-            return element.checked;
-          },
-          destroy: () => {
-            element.removeEventListener("change", checkboxInstance.element.onchange);
-          }
-        };
-      });
-      return instances;
-    }
-  };
-  /*!
-  * Copyright (c) Microsoft Corporation.
-  * Licensed under the MIT License.
-  */
-  const cssPlugin = {
-    name: "css",
-    initializePlugin: (md) => {
-      definePlugin(md, "css");
-      md.block.ruler.before("fence", "css_block", function(state, startLine, endLine) {
-        const start = state.bMarks[startLine] + state.tShift[startLine];
-        const max = state.eMarks[startLine];
-        if (!state.src.slice(start, max).trim().startsWith("```css")) {
-          return false;
-        }
-        let nextLine = startLine;
-        while (nextLine < endLine) {
-          nextLine++;
-          if (state.src.slice(state.bMarks[nextLine] + state.tShift[nextLine], state.eMarks[nextLine]).trim() === "```") {
-            break;
-          }
-        }
-        state.line = nextLine + 1;
-        const token = state.push("fence", "code", 0);
-        token.info = "css";
-        token.content = state.getLines(startLine + 1, nextLine, state.blkIndent, true);
-        token.map = [startLine, state.line];
-        return true;
-      });
-      const originalFence = md.renderer.rules.fence;
-      md.renderer.rules.fence = function(tokens, idx, options, env, slf) {
-        const token = tokens[idx];
-        const info = token.info.trim();
-        if (info === "css") {
-          const cssId = `css-${idx}`;
-          return sanitizedHTML("div", { id: cssId, class: "css-component" }, token.content.trim());
-        }
-        if (originalFence) {
-          return originalFence(tokens, idx, options, env, slf);
-        } else {
-          return "";
-        }
-      };
-    },
-    hydrateComponent: async (renderer, errorHandler) => {
-      const cssInstances = [];
-      const containers = renderer.element.querySelectorAll(".css-component");
-      for (const [index2, container] of Array.from(containers).entries()) {
-        if (!container.textContent)
-          continue;
-        try {
-          const cssContent = container.textContent.trim();
-          const styleElement = document.createElement("style");
-          styleElement.type = "text/css";
-          styleElement.id = `idocs-css-${container.id}`;
-          styleElement.textContent = cssContent;
-          renderer.element.appendChild(styleElement);
-          container.innerHTML = `<!-- CSS styles applied to document -->`;
-          cssInstances.push({
-            id: container.id,
-            element: styleElement
-          });
-        } catch (e) {
-          container.innerHTML = `<div class="error">${e.toString()}</div>`;
-          errorHandler(e, "CSS", index2, "parse", container);
-          continue;
-        }
-      }
-      const instances = cssInstances.map((cssInstance) => {
-        return {
-          id: cssInstance.id,
-          initialSignals: [],
-          // CSS doesn't need signals
-          destroy: () => {
-            if (cssInstance.element && cssInstance.element.parentNode) {
-              cssInstance.element.parentNode.removeChild(cssInstance.element);
-            }
-          }
-        };
-      });
-      return instances;
-    }
-  };
-  /*!
-  * Copyright (c) Microsoft Corporation.
-  * Licensed under the MIT License.
-  */
-  const dropdownPlugin = {
-    name: "dropdown",
-    initializePlugin: (md) => definePlugin(md, "dropdown"),
-    fence: (token, idx) => {
-      const DropdownId = `Dropdown-${idx}`;
-      return sanitizedHTML("div", { id: DropdownId, class: "dropdown" }, token.content.trim());
-    },
-    hydrateComponent: async (renderer, errorHandler) => {
-      const dropdownInstances = [];
-      const containers = renderer.element.querySelectorAll(".dropdown");
-      for (const [index2, container] of Array.from(containers).entries()) {
-        if (!container.textContent)
-          continue;
-        try {
-          const spec = JSON.parse(container.textContent);
-          const html = `<form class="vega-bindings">
-                    <div class="vega-bind">
-                        <label>
-                            <span class="vega-bind-name">${spec.label || spec.name}</span>
-                            <select class="vega-bind-select" id="${spec.name}" name="${spec.name}" ${spec.multiple ? "multiple" : ""} size="${spec.size || 1}">
-${getOptions(spec.multiple ?? false, spec.options ?? [], spec.value ?? (spec.multiple ? [] : ""))}
-                            </select>
-                        </label>
-                    </div>
-                </form>`;
-          container.innerHTML = html;
-          const element = container.querySelector("select");
-          const dropdownInstance = { id: container.id, spec, element };
-          dropdownInstances.push(dropdownInstance);
-        } catch (e) {
-          container.innerHTML = `<div class="error">${e.toString()}</div>`;
-          errorHandler(e, "Dropdown", index2, "parse", container);
-          continue;
-        }
-      }
-      const instances = dropdownInstances.map((dropdownInstance, index2) => {
-        const { element, spec } = dropdownInstance;
-        const initialSignals = [{
-          name: spec.name,
-          value: spec.value || null,
-          priority: 1,
-          isData: false
-        }];
-        if (spec.dynamicOptions) {
-          initialSignals.push({
-            name: spec.dynamicOptions.dataSignalName,
-            value: null,
-            priority: -1,
-            isData: true
-          });
-        }
-        return {
-          ...dropdownInstance,
-          initialSignals,
-          recieveBatch: async (batch) => {
-            var _a, _b;
-            const { dynamicOptions } = spec;
-            if (dynamicOptions == null ? void 0 : dynamicOptions.dataSignalName) {
-              const newData = (_a = batch[dynamicOptions.dataSignalName]) == null ? void 0 : _a.value;
-              if (newData) {
-                let hasFieldName = false;
-                const uniqueOptions = /* @__PURE__ */ new Set();
-                newData.forEach((d2) => {
-                  if (d2.hasOwnProperty(dynamicOptions.fieldName)) {
-                    hasFieldName = true;
-                    uniqueOptions.add(d2[dynamicOptions.fieldName]);
-                  }
-                });
-                if (hasFieldName) {
-                  const options = Array.from(uniqueOptions);
-                  const existingSelection = spec.multiple ? Array.from(element.selectedOptions).map((option) => option.value) : element.value;
-                  element.innerHTML = getOptions(spec.multiple ?? false, options, existingSelection);
-                  if (!spec.multiple) {
-                    element.value = ((_b = batch[spec.name]) == null ? void 0 : _b.value) || options[0];
-                  }
-                } else {
-                  element.innerHTML = `<option value="">Field "${dynamicOptions.fieldName}" not found</option>`;
-                  element.value = "";
-                }
-              }
-            }
-            if (batch[spec.name]) {
-              const value = batch[spec.name].value;
-              if (spec.multiple) {
-                Array.from(element.options).forEach((option) => {
-                  option.selected = !!(value && Array.isArray(value) && value.includes(option.value));
-                });
-              } else {
-                element.value = value;
-              }
-            }
-          },
-          beginListening() {
-            element.addEventListener("change", (e) => {
-              const value = spec.multiple ? Array.from(e.target.selectedOptions).map((option) => option.value) : e.target.value;
-              const batch = {
-                [spec.name]: {
-                  value,
-                  isData: false
-                }
-              };
-              renderer.signalBus.broadcast(dropdownInstance.id, batch);
-            });
-          },
-          getCurrentSignalValue: () => {
-            if (spec.multiple) {
-              return Array.from(element.selectedOptions).map((option) => option.value);
-            }
-            return element.value;
-          },
-          destroy: () => {
-            element.removeEventListener("change", dropdownInstance.element.onchange);
-          }
-        };
-      });
-      return instances;
-    }
-  };
-  function getOptions(multiple, options, selected) {
-    if (!options) {
-      if (multiple) {
-        if (Array.isArray(selected)) {
-          options = selected;
-        } else {
-          if (selected) {
-            options = [selected];
-          }
-        }
-      } else {
-        if (selected) {
-          options = [selected];
-        }
-      }
-    }
-    if (!options) {
-      return "";
-    }
-    return options.map((option) => {
-      let attr = "";
-      if (multiple) {
-        attr = (selected || []).includes(option) ? "selected" : "";
-      } else {
-        attr = selected === option ? "selected" : "";
-      }
-      return `<option value="${option}" ${attr}>${option}</option>`;
-    }).join("\n");
-  }
-  /*!
-  * Copyright (c) Microsoft Corporation.
-  * Licensed under the MIT License.
-  */
-  var ImageOpacity;
-  (function(ImageOpacity2) {
-    ImageOpacity2["full"] = "1";
-    ImageOpacity2["loading"] = "0.1";
-    ImageOpacity2["error"] = "0.5";
-  })(ImageOpacity || (ImageOpacity = {}));
-  const imagePlugin = {
-    name: "image",
-    initializePlugin: (md) => definePlugin(md, "image"),
-    fence: (token, idx) => {
-      const ImageId = `Image-${idx}`;
-      return sanitizedHTML("div", { id: ImageId, class: "image" }, token.content.trim());
-    },
-    hydrateComponent: async (renderer, errorHandler) => {
-      const imageInstances = [];
-      const containers = renderer.element.querySelectorAll(".image");
-      for (const [index2, container] of Array.from(containers).entries()) {
-        if (!container.textContent)
-          continue;
-        try {
-          const spec = JSON.parse(container.textContent);
-          const element = document.createElement("img");
-          const spinner = document.createElement("div");
-          spinner.innerHTML = `
-                    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                        <circle cx="12" cy="12" r="10" stroke="gray" stroke-width="2" fill="none" stroke-dasharray="31.4" stroke-dashoffset="0">
-                            <animateTransform attributeName="transform" type="rotate" from="0 12 12" to="360 12 12" dur="1s" repeatCount="indefinite"/>
-                        </circle>
-                    </svg>`;
-          if (spec.alt)
-            element.alt = spec.alt;
-          if (spec.width)
-            element.width = spec.width;
-          if (spec.height)
-            element.height = spec.height;
-          element.onload = () => {
-            spinner.style.display = "none";
-            element.style.opacity = ImageOpacity.full;
-          };
-          element.onerror = () => {
-            spinner.style.display = "none";
-            element.style.opacity = ImageOpacity.error;
-            errorHandler(new Error("Image failed to load"), "image", index2, "load", container, element.src);
-          };
-          container.style.position = "relative";
-          spinner.style.position = "absolute";
-          container.innerHTML = "";
-          container.appendChild(spinner);
-          container.appendChild(element);
-          const imageInstance = { id: container.id, spec, element, spinner };
-          imageInstances.push(imageInstance);
-        } catch (e) {
-          container.innerHTML = `<div class="error">${e.toString()}</div>`;
-          errorHandler(e, "Image", index2, "parse", container);
-        }
-      }
-      const instances = imageInstances.map((imageInstance, index2) => {
-        const { element, spinner, id, spec } = imageInstance;
-        return {
-          id,
-          initialSignals: [
-            {
-              name: spec.srcSignalName,
-              value: null,
-              priority: -1,
-              isData: false
-            }
-          ],
-          destroy: () => {
-            if (element) {
-              element.remove();
-            }
-            if (spinner) {
-              spinner.remove();
-            }
-          },
-          recieveBatch: async (batch, from) => {
-            if (spec.srcSignalName in batch) {
-              const src = batch[spec.srcSignalName].value;
-              if (src) {
-                spinner.style.display = "";
-                element.src = src.toString();
-                element.style.opacity = ImageOpacity.loading;
-              } else {
-                element.src = "";
-                spinner.style.display = "none";
-                element.style.opacity = ImageOpacity.full;
-              }
-            }
-          }
-        };
-      });
-      return instances;
-    }
-  };
-  /*!
-  * Copyright (c) Microsoft Corporation.
-  * Licensed under the MIT License.
-  */
-  function createTemplateFunction(template) {
-    const parts = template.split(/(%7B%7B.*?%7D%7D)/g).map((part) => {
-      if (part.startsWith("%7B%7B") && part.endsWith("%7D%7D")) {
-        const key = part.slice(6, -6);
-        return (batch) => {
-          var _a, _b;
-          return ((_b = (_a = batch[key]) == null ? void 0 : _a.value) == null ? void 0 : _b.toString()) || "";
-        };
-      } else {
-        return () => part;
-      }
-    });
-    return (batch) => parts.map((fn) => fn(batch)).join("");
-  }
-  function handleDynamicUrl(tokens, idx, attrName, elementType) {
-    const token = tokens[idx];
-    const attrValue = token.attrGet(attrName);
-    if (attrValue && attrValue.includes("%7B%7B")) {
-      if (!token.attrs) {
-        token.attrs = [];
-      }
-      token.attrSet("data-template-url", attrValue);
-    }
-    return token;
-  }
-  const placeholdersPlugin = {
-    name: "placeholders",
-    initializePlugin: async (md) => {
-      md.use(function(md2) {
-        md2.inline.ruler.after("emphasis", "dynamic_placeholder", function(state, silent) {
-          let token;
-          const max = state.posMax;
-          const start = state.pos;
-          if (state.src.charCodeAt(start) !== 123 || state.src.charCodeAt(start + 1) !== 123) {
-            return false;
-          }
-          for (let pos = start + 2; pos < max; pos++) {
-            if (state.src.charCodeAt(pos) === 125 && state.src.charCodeAt(pos + 1) === 125) {
-              if (!silent) {
-                state.pos = start + 2;
-                state.posMax = pos;
-                token = state.push("dynamic_placeholder", "", 0);
-                token.markup = state.src.slice(start, pos + 2);
-                token.content = state.src.slice(state.pos, state.posMax);
-                state.pos = pos + 2;
-                state.posMax = max;
-              }
-              return true;
-            }
-          }
-          return false;
-        });
-        md2.renderer.rules["dynamic_placeholder"] = function(tokens, idx) {
-          const key = tokens[idx].content.trim();
-          return `<span class="dynamic-placeholder" data-key="${key}">{${key}}</span>`;
-        };
-      });
-      md.renderer.rules["link_open"] = function(tokens, idx, options, env, slf) {
-        handleDynamicUrl(tokens, idx, "href");
-        return slf.renderToken(tokens, idx, options);
-      };
-      md.renderer.rules["image"] = function(tokens, idx, options, env, slf) {
-        handleDynamicUrl(tokens, idx, "src");
-        return slf.renderToken(tokens, idx, options);
-      };
-    },
-    hydrateComponent: async (renderer) => {
-      const templateFunctionMap = /* @__PURE__ */ new WeakMap();
-      const placeholders = renderer.element.querySelectorAll(".dynamic-placeholder");
-      const dynamicUrls = renderer.element.querySelectorAll("[data-template-url]");
-      const elementsByKeys = /* @__PURE__ */ new Map();
-      for (const placeholder of Array.from(placeholders)) {
-        const key = placeholder.getAttribute("data-key");
-        if (!key) {
-          continue;
-        }
-        if (elementsByKeys.has(key)) {
-          elementsByKeys.get(key).push(placeholder);
-        } else {
-          elementsByKeys.set(key, [placeholder]);
-        }
-      }
-      for (const element of Array.from(dynamicUrls)) {
-        const templateUrl = element.getAttribute("data-template-url");
-        if (!templateUrl) {
-          continue;
-        }
-        const keys = [];
-        const regex = /%7B%7B(.*?)%7D%7D/g;
-        let match;
-        while ((match = regex.exec(templateUrl)) !== null) {
-          keys.push(match[1]);
-        }
-        const templateFunction = createTemplateFunction(templateUrl);
-        templateFunctionMap.set(element, { templateFunction, batch: {} });
-        for (const key of keys) {
-          if (elementsByKeys.has(key)) {
-            elementsByKeys.get(key).push(element);
-          } else {
-            elementsByKeys.set(key, [element]);
-          }
-        }
-      }
-      const initialSignals = Array.from(elementsByKeys.keys()).map((name) => {
-        const prioritizedSignal = {
-          name,
-          value: null,
-          priority: -1,
-          isData: false
-        };
-        return prioritizedSignal;
-      });
-      const instances = [
-        {
-          id: "placeholders",
-          initialSignals,
-          recieveBatch: async (batch) => {
-            var _a;
-            for (const key of Object.keys(batch)) {
-              const elements = elementsByKeys.get(key) || [];
-              for (const element of elements) {
-                if (element.classList.contains("dynamic-placeholder")) {
-                  const markdownContent = ((_a = batch[key].value) == null ? void 0 : _a.toString()) || "";
-                  const parsedMarkdown = isMarkdownInline(markdownContent) ? renderer.md.renderInline(markdownContent) : renderer.md.render(markdownContent);
-                  element.innerHTML = parsedMarkdown;
-                } else if (element.hasAttribute("data-template-url")) {
-                  const templateData = templateFunctionMap.get(element);
-                  if (templateData) {
-                    templateData.batch = { ...templateData.batch, ...batch };
-                    const updatedUrl = templateData.templateFunction(templateData.batch);
-                    if (element.tagName === "A") {
-                      element.setAttribute("href", updatedUrl);
-                    } else if (element.tagName === "IMG") {
-                      element.setAttribute("src", updatedUrl);
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      ];
-      return instances;
-    }
-  };
-  function isMarkdownInline(markdown) {
-    if (!markdown.includes("\n")) {
-      return true;
-    }
-    const blockElements = ["#", "-", "*", ">", "```", "~~~"];
-    for (const element of blockElements) {
-      if (markdown.trim().startsWith(element)) {
-        return false;
-      }
-    }
-    return true;
-  }
-  /*!
-  * Copyright (c) Microsoft Corporation.
-  * Licensed under the MIT License.
-  */
-  const presetsPlugin = {
-    name: "presets",
-    initializePlugin: (md) => definePlugin(md, "presets"),
-    fence: (token, idx) => {
-      const spec = JSON.parse(token.content.trim());
-      const pluginId = `preset-${idx}`;
-      return sanitizedHTML("div", { id: pluginId, class: "presets" }, JSON.stringify(spec));
-    },
-    hydrateComponent: async (renderer, errorHandler) => {
-      const presetsInstances = [];
-      const containers = renderer.element.querySelectorAll(".presets");
-      for (const [index2, container] of Array.from(containers).entries()) {
-        if (!container.textContent)
-          continue;
-        const id = `presets${index2}`;
-        let presets;
-        try {
-          presets = JSON.parse(container.textContent);
-        } catch (e) {
-          container.innerHTML = `<div class="error">${e.toString()}</div>`;
-          errorHandler(e, "presets", index2, "parse", container);
-          continue;
-        }
-        if (!Array.isArray(presets)) {
-          container.innerHTML = '<div class="error">Expected an array of presets</div>';
-          continue;
-        }
-        container.innerHTML = "";
-        const ul = document.createElement("ul");
-        const presetsInstance = { id, presets, element: ul };
-        container.appendChild(ul);
-        for (const preset of presets) {
-          const li = document.createElement("li");
-          if (!preset.name || !preset.state) {
-            const span = document.createElement("span");
-            span.className = "error";
-            span.textContent = "Each preset must have a name and state";
-            li.appendChild(span);
-          } else {
-            const button = document.createElement("button");
-            button.textContent = preset.name;
-            button.onclick = () => {
-              const batch = {};
-              for (const [signalName, value] of Object.entries(preset.state)) {
-                batch[signalName] = { value, isData: false };
-              }
-              renderer.signalBus.broadcast(id, batch);
-            };
-            li.appendChild(button);
-            li.appendChild(document.createTextNode(" "));
-            if (preset.description) {
-              button.title = preset.description;
-            }
-          }
-          ul.appendChild(li);
-        }
-        presetsInstances.push(presetsInstance);
-      }
-      const instances = presetsInstances.map((presetsInstance, index2) => {
-        const initialSignals = presetsInstance.presets.flatMap((preset) => {
-          return Object.keys(preset.state).map((signalName) => {
-            return {
-              name: signalName,
-              value: null,
-              priority: -1,
-              isData: void 0
-              // we do not know if it is data or not
-            };
-          });
-        });
-        return {
-          ...presetsInstance,
-          initialSignals,
-          broadcastComplete: async () => {
-            const state = {};
-            for (const signalName of Object.keys(renderer.signalBus.signalDeps)) {
-              state[signalName] = renderer.signalBus.signalDeps[signalName].value;
-            }
-            setAllPresetsActiveState(presetsInstance, state);
-          }
-        };
-      });
-      return instances;
-    }
-  };
-  function isPresetActive(preset, state) {
-    for (const [signalName, value] of Object.entries(preset.state)) {
-      if (state[signalName] !== value) {
-        return false;
-      }
-    }
-    return true;
-  }
-  function setAllPresetsActiveState(presetsInstance, state) {
-    for (const [presetIndex, preset] of presetsInstance.presets.entries()) {
-      const { classList } = presetsInstance.element.children[presetIndex];
-      if (isPresetActive(preset, state)) {
-        classList.add("active");
-      } else {
-        classList.remove("active");
-      }
-    }
-  }
-  /*!
-  * Copyright (c) Microsoft Corporation.
-  * Licensed under the MIT License.
-  */
-  const tabulatorPlugin = {
-    name: "tabulator",
-    initializePlugin: (md) => definePlugin(md, "tabulator"),
-    fence: (token, idx) => {
-      const tabulatorId = `tabulator-${idx}`;
-      return sanitizedHTML("div", { id: tabulatorId, class: "tabulator", style: "box-sizing: border-box;" }, token.content.trim());
-    },
-    hydrateComponent: async (renderer, errorHandler) => {
-      const tabulatorInstances = [];
-      const containers = renderer.element.querySelectorAll(".tabulator");
-      for (const [index2, container] of Array.from(containers).entries()) {
-        if (!container.textContent)
-          continue;
-        if (!Tabulator) {
-          errorHandler(new Error("Tabulator not found"), "tabulator", index2, "init", container);
-          continue;
-        }
-        try {
-          const spec = JSON.parse(container.textContent);
-          let options = {
-            autoColumns: true,
-            layout: "fitColumns",
-            maxHeight: "200px"
-          };
-          if (spec.options && Object.keys(spec.options).length > 0) {
-            options = spec.options;
-          }
-          const table = new Tabulator(container, options);
-          const tabulatorInstance = { id: container.id, spec, table, built: false };
-          table.on("tableBuilt", () => {
-            table.off("tableBuilt");
-            tabulatorInstance.built = true;
-          });
-          tabulatorInstances.push(tabulatorInstance);
-        } catch (e) {
-          container.innerHTML = `<div class="error">${e.toString()}</div>`;
-          errorHandler(e, "tabulator", index2, "parse", container);
-          continue;
-        }
-      }
-      const dataNameSelectedSuffix = defaultCommonOptions.dataNameSelectedSuffix;
-      const instances = tabulatorInstances.map((tabulatorInstance, index2) => {
-        var _a;
-        const initialSignals = [{
-          name: tabulatorInstance.spec.dataSignalName,
-          value: null,
-          priority: -1,
-          isData: true
-        }];
-        if ((_a = tabulatorInstance.spec.options) == null ? void 0 : _a.selectableRows) {
-          initialSignals.push({
-            name: `${tabulatorInstance.spec.dataSignalName}${dataNameSelectedSuffix}`,
-            value: [],
-            priority: -1,
-            isData: true
-          });
-        }
-        return {
-          ...tabulatorInstance,
-          initialSignals,
-          recieveBatch: async (batch) => {
-            var _a2;
-            const newData = (_a2 = batch[tabulatorInstance.spec.dataSignalName]) == null ? void 0 : _a2.value;
-            if (newData) {
-              if (!tabulatorInstance.built) {
-                tabulatorInstance.table.off("tableBuilt");
-                tabulatorInstance.table.on("tableBuilt", () => {
-                  tabulatorInstance.built = true;
-                  tabulatorInstance.table.off("tableBuilt");
-                  tabulatorInstance.table.setData(newData);
-                });
-              } else {
-                tabulatorInstance.table.setData(newData);
-              }
-            }
-          },
-          beginListening(sharedSignals) {
-            var _a2;
-            if ((_a2 = tabulatorInstance.spec.options) == null ? void 0 : _a2.selectableRows) {
-              for (const { isData, signalName } of sharedSignals) {
-                if (isData) {
-                  const matchData = signalName === `${tabulatorInstance.spec.dataSignalName}${dataNameSelectedSuffix}`;
-                  if (matchData) {
-                    tabulatorInstance.table.on("rowSelectionChanged", (e, rows) => {
-                      const selectedData = tabulatorInstance.table.getSelectedData();
-                      const batch = {
-                        [`${tabulatorInstance.spec.dataSignalName}${dataNameSelectedSuffix}`]: {
-                          value: selectedData,
-                          isData: true
-                        }
-                      };
-                      renderer.signalBus.log(tabulatorInstance.id, "sending batch", batch);
-                      renderer.signalBus.broadcast(tabulatorInstance.id, batch);
-                    });
-                  }
-                }
-              }
-            }
-          },
-          getCurrentSignalValue() {
-            return tabulatorInstance.table.getSelectedData();
-          },
-          destroy: () => {
-            tabulatorInstance.table.destroy();
-          }
-        };
-      });
-      return instances;
-    }
-  };
-  /*!
-  * Copyright (c) Microsoft Corporation.
-  * Licensed under the MIT License.
-  */
-  const vegaLitePlugin = {
-    name: "vega-lite",
-    initializePlugin: (md) => definePlugin(md, "vega-lite"),
-    fence: (token, idx) => {
-      const vegaLiteId = `vega-lite-${idx}`;
-      return sanitizedHTML("div", { id: vegaLiteId, class: "vega-chart" }, token.content.trim());
-    }
-  };
-  async function resolveSpec(textContent) {
-    try {
-      const either = JSON.parse(textContent);
-      if (typeof either === "object") {
-        return resolveToVega(either);
-      } else {
-        return { error: new Error(`Spec must be either a JSON object or a string url, found type ${typeof either}`) };
-      }
-    } catch (error) {
-      if (textContent.startsWith("http://") || textContent.startsWith("https://") || textContent.startsWith("//")) {
-        try {
-          const response = await fetch(textContent);
-          const either = await response.json();
-          if (typeof either === "object") {
-            return resolveToVega(either);
-          } else {
-            return { error: new Error(`Expected a JSON object, found type ${typeof either}`) };
-          }
-        } catch (error2) {
-          return { error: error2 };
-        }
-      } else {
-        return { error: new Error("Spec string must be a url") };
-      }
-    }
-  }
-  function resolveToVega(either) {
-    if ("$schema" in either && typeof either.$schema === "string") {
-      if (either.$schema.includes("vega-lite")) {
-        try {
-          const runtime = vegaLite.compile(either);
-          const { spec } = runtime;
-          return { spec };
-        } catch (error) {
-          return { error };
-        }
-      } else if (either.$schema.includes("vega")) {
-        return { spec: either };
-      } else {
-        return { error: new Error("$schema property must be a string with vega or vega-lite version.") };
-      }
-    } else {
-      return { error: new Error("Missing $schema property, must be a string with vega or vega-lite version.") };
-    }
-  }
-  function urlParam(urlParamName, value) {
-    if (value === void 0 || value === null)
-      return "";
-    if (Array.isArray(value)) {
-      return value.map((vn) => `${urlParamName}[]=${encodeURIComponent(vn)}`).join("&");
-    } else {
-      return `${urlParamName}=${encodeURIComponent(value)}`;
-    }
-  }
-  /*!
-  * Copyright (c) Microsoft Corporation.
-  * Licensed under the MIT License.
-  */
-  const ignoredSignals = ["width", "height", "padding", "autosize", "background", "style", "parent", "datum", "item", "event", "cursor"];
-  const vegaPlugin = {
-    name: "vega",
-    initializePlugin: (md) => definePlugin(md, "vega"),
-    fence: (token, idx) => {
-      const vegaId = `vega-${idx}`;
-      return sanitizedHTML("div", { id: vegaId, class: "vega-chart" }, token.content.trim());
-    },
-    hydrateComponent: async (renderer, errorHandler) => {
-      if (!expressionsInitialized) {
-        vega.expressionFunction("urlParam", urlParam);
-        expressionsInitialized = true;
-      }
-      const vegaInstances = [];
-      const containers = renderer.element.querySelectorAll(".vega-chart");
-      const specInits = [];
-      for (const [index2, container] of Array.from(containers).entries()) {
-        const specInit = await createSpecInit(container, index2, renderer, errorHandler);
-        if (specInit) {
-          specInits.push(specInit);
-        }
-      }
-      prioritizeSignalValues(specInits);
-      for (const specInit of specInits) {
-        const vegaInstance = await createVegaInstance(specInit, renderer, errorHandler);
-        if (vegaInstance) {
-          vegaInstances.push(vegaInstance);
-        }
-      }
-      const dataSignals = vegaInstances.map((vegaInstance) => vegaInstance.initialSignals.filter((signal) => signal.isData)).flat();
-      for (const vegaInstance of vegaInstances) {
-        if (!vegaInstance.spec.data)
-          continue;
-        for (const data of vegaInstance.spec.data) {
-          const dataSignal = dataSignals.find((signal) => signal.name === data.name || `${signal.name}${defaultCommonOptions.dataNameSelectedSuffix}` === data.name);
-          if (dataSignal) {
-            vegaInstance.initialSignals.push({
-              name: data.name,
-              value: data.values,
-              priority: data.values ? 1 : 0,
-              isData: true
-            });
-          }
-        }
-      }
-      const instances = vegaInstances.map((vegaInstance) => {
-        const { spec, view, initialSignals } = vegaInstance;
-        const startBatch = (from) => {
-          if (!vegaInstance.batch) {
-            renderer.signalBus.log(vegaInstance.id, "starting batch", from);
-            vegaInstance.batch = {};
-            view.runAfter(() => {
-              const { batch } = vegaInstance;
-              vegaInstance.batch = void 0;
-              renderer.signalBus.log(vegaInstance.id, "sending batch", batch);
-              renderer.signalBus.broadcast(vegaInstance.id, batch);
-            });
-          }
-        };
-        return {
-          ...vegaInstance,
-          initialSignals,
-          recieveBatch: async (batch, from) => {
-            renderer.signalBus.log(vegaInstance.id, "recieved batch", batch, from);
-            return new Promise((resolve) => {
-              view.runAfter(async () => {
-                if (recieveBatch(batch, renderer, vegaInstance)) {
-                  renderer.signalBus.log(vegaInstance.id, "running after _pulse, changes from", from);
-                  vegaInstance.needToRun = true;
-                } else {
-                  renderer.signalBus.log(vegaInstance.id, "no changes");
-                }
-                renderer.signalBus.log(vegaInstance.id, "running view after _pulse finished");
-                resolve();
-              });
-            });
-          },
-          broadcastComplete: async () => {
-            renderer.signalBus.log(vegaInstance.id, "broadcastComplete");
-            if (vegaInstance.needToRun) {
-              view.runAfter(() => {
-                view.runAsync();
-                vegaInstance.needToRun = false;
-                renderer.signalBus.log(vegaInstance.id, "running view after broadcastComplete");
-              });
-            }
-          },
-          beginListening: (sharedSignals) => {
-            var _a, _b, _c;
-            for (const { isData, signalName } of sharedSignals) {
-              if (ignoredSignals.includes(signalName))
-                return;
-              if (isData) {
-                const matchData = (_a = spec.data) == null ? void 0 : _a.find((data) => data.name === signalName);
-                if (matchData && vegaInstance.dataSignals.includes(matchData.name)) {
-                  renderer.signalBus.log(vegaInstance.id, "listening to data", signalName);
-                  if (renderer.signalBus.signalDeps[signalName].value === void 0 && ((_b = view.data(signalName)) == null ? void 0 : _b.length) > 0) {
-                    renderer.signalBus.log(vegaInstance.id, "un-initialized", signalName);
-                    const batch = {};
-                    batch[signalName] = { value: view.data(signalName), isData: true };
-                    renderer.signalBus.broadcast(vegaInstance.id, batch);
-                  }
-                  view.addDataListener(signalName, async (name, value) => {
-                    startBatch(`data:${signalName}`);
-                    vegaInstance.batch[name] = { value, isData };
-                  });
-                }
-              }
-              const matchSignal = (_c = spec.signals) == null ? void 0 : _c.find((signal) => signal.name === signalName);
-              if (matchSignal) {
-                const isChangeSource = matchSignal.on || // event streams
-                matchSignal.bind || // ui elements
-                matchSignal.update;
-                if (isChangeSource) {
-                  renderer.signalBus.log(vegaInstance.id, "listening to signal", signalName);
-                  view.addSignalListener(signalName, async (name, value) => {
-                    startBatch(`signal:${signalName}`);
-                    vegaInstance.batch[name] = { value, isData };
-                  });
-                }
-              }
-            }
-          },
-          getCurrentSignalValue: (signalName) => {
-            var _a;
-            const matchSignal = (_a = spec.signals) == null ? void 0 : _a.find((signal) => signal.name === signalName);
-            if (matchSignal) {
-              return view.signal(signalName);
-            } else {
-              return void 0;
-            }
-          },
-          destroy: () => {
-            vegaInstance.view.finalize();
-          }
-        };
-      });
-      return instances;
-    }
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.IDocs = global.IDocs || {}));
+})(this, function(exports2) {
+  "use strict";var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+  const defaultCommonOptions = {
+    dataNameSelectedSuffix: "_selected",
+    dataSignalPrefix: "data_signal:",
+    groupClassName: "group"
   };
-  function recieveBatch(batch, renderer, vegaInstance) {
-    var _a, _b;
-    const { spec, view } = vegaInstance;
-    const doLog = renderer.signalBus.logLevel === LogLevel.all;
-    doLog && renderer.signalBus.log(vegaInstance.id, "recieveBatch", batch);
-    let hasAnyChange = false;
-    for (const signalName in batch) {
-      const batchItem = batch[signalName];
-      if (ignoredSignals.includes(signalName)) {
-        doLog && renderer.signalBus.log(vegaInstance.id, "ignoring reverved signal name", signalName, batchItem.value);
-        continue;
-      }
-      if (batchItem.isData) {
-        let logReason2;
-        if (!batchItem.value) {
-          logReason2 = "not updating data, no value";
-        } else {
-          const matchData = (_a = spec.data) == null ? void 0 : _a.find((data) => data.name === signalName);
-          if (!matchData) {
-            logReason2 = "not updating data, no match";
-          } else {
-            logReason2 = "updating data";
-            view.change(signalName, vega.changeset().remove(() => true).insert(batchItem.value));
-            hasAnyChange = true;
-          }
-        }
-        doLog && renderer.signalBus.log(vegaInstance.id, `(isData) ${logReason2}`, signalName, batchItem.value);
-      }
-      let logReason = "";
-      const matchSignal = (_b = spec.signals) == null ? void 0 : _b.find((signal) => signal.name === signalName);
-      if (!matchSignal) {
-        logReason = "not updating signal, no match";
-      } else {
-        if (matchSignal.update) {
-          logReason = "not updating signal, it is a calculation";
-        } else {
-          if (isSignalDataBridge(matchSignal)) {
-            logReason = "not updating signal, data bridge";
-          } else {
-            const oldValue = view.signal(signalName);
-            if (oldValue === batchItem.value) {
-              logReason = "not updating signal, same value";
-            } else {
-              logReason = "updating signal";
-              view.signal(signalName, batchItem.value);
-              hasAnyChange = true;
-            }
-          }
-        }
-      }
-      doLog && renderer.signalBus.log(vegaInstance.id, logReason, signalName, batchItem.value);
-    }
-    return hasAnyChange;
-  }
-  async function createSpecInit(container, index2, renderer, errorHandler) {
-    var _a;
-    if (!container.textContent) {
-      container.innerHTML = '<div class="error">Expected a spec object or a url</div>';
-      return;
-    }
-    let result;
-    try {
-      result = await resolveSpec(container.textContent);
-    } catch (e) {
-      container.innerHTML = `<div class="error">${e.toString()}</div>`;
-      errorHandler(e, "vega", index2, "resolve", container);
-      return;
-    }
-    if (result.error) {
-      container.innerHTML = `<div class="error">${result.error.toString()}</div>`;
-      errorHandler(result.error, "vega", index2, "resolve", container);
-      return;
-    }
-    if (!result.spec) {
-      container.innerHTML = '<div class="error">Expected a spec object</div>';
-      return;
-    }
-    const { spec } = result;
-    const initialSignals = ((_a = spec.signals) == null ? void 0 : _a.map((signal) => {
-      if (ignoredSignals.includes(signal.name))
-        return;
-      let isData = isSignalDataBridge(signal);
-      if (signal.name.startsWith(defaultCommonOptions.dataSignalPrefix)) {
-        isData = true;
-      }
-      return {
-        name: signal.name,
-        value: signal.value,
-        priority: signal.bind ? 1 : 0,
-        isData
-      };
-    }).filter(Boolean)) || [];
-    const specInit = { container, index: index2, initialSignals, spec };
-    return specInit;
-  }
-  async function createVegaInstance(specInit, renderer, errorHandler) {
-    const { container, index: index2, initialSignals, spec } = specInit;
-    const id = `vega-${index2}`;
-    let runtime;
-    let view;
-    try {
-      runtime = vega.parse(spec);
-    } catch (e) {
-      container.innerHTML = `<div class="error">${e.toString()}</div>`;
-      errorHandler(e, "vega", index2, "parse", container);
-      return;
-    }
-    try {
-      view = new vega.View(runtime, {
-        container,
-        renderer: renderer.options.vegaRenderer,
-        logger: new VegaLogger((error) => {
-          errorHandler(error, "vega", index2, "view", container);
-        })
-      });
-      view.run();
-      for (const signal of initialSignals) {
-        if (signal.isData)
-          continue;
-        const currentValue = view.signal(signal.name);
-        if (currentValue !== signal.value) {
-          renderer.signalBus.log(id, "re-setting initial signal", signal.name, signal.value, currentValue);
-          signal.value = currentValue;
-        }
-      }
-    } catch (e) {
-      container.innerHTML = `<div class="error">${e.toString()}</div>`;
-      errorHandler(e, "vega", index2, "view", container);
-      return;
-    }
-    const dataSignals = initialSignals.filter((signal) => {
-      var _a;
-      return signal.isData && ((_a = spec.data) == null ? void 0 : _a.some((data) => data.name === signal.name));
-    }).map((signal) => signal.name);
-    const instance = { ...specInit, view, id, dataSignals };
-    return instance;
-  }
-  function isSignalDataBridge(signal) {
-    return signal.update === `data('${signal.name}')`;
-  }
-  function prioritizeSignalValues(specInits) {
-    var _a;
-    const highPrioritySignals = specInits.map((specInit) => specInit.initialSignals.filter((signal) => signal.priority > 0)).flat();
-    for (const specInit of specInits) {
-      for (const prioritySignal of highPrioritySignals) {
-        const matchSignal = (_a = specInit.spec.signals) == null ? void 0 : _a.find((signal) => signal.name === prioritySignal.name);
-        if (matchSignal && matchSignal.value !== void 0 && matchSignal.value !== prioritySignal.value) {
-          matchSignal.value = prioritySignal.value;
-        }
-      }
-    }
-  }
-  let expressionsInitialized = false;
-  class VegaLogger {
-    constructor(errorHandler) {
-      __publicField(this, "errorHandler");
-      __publicField(this, "logLevel", 0);
-      this.errorHandler = errorHandler;
-      this.error = this.error.bind(this);
-      this.warn = this.warn.bind(this);
-      this.info = this.info.bind(this);
-      this.debug = this.debug.bind(this);
-    }
-    level(level) {
-      if (level === void 0) {
-        return this.logLevel;
-      }
-      this.logLevel = level;
-      return this;
-    }
-    error(...args) {
-      if (this.errorHandler) {
-        this.errorHandler(args[0]);
-      }
-      if (this.logLevel >= 1) {
-        console.error(...args);
-      }
-      return this;
-    }
-    warn(...args) {
-      if (this.logLevel >= 2) {
-        console.warn(...args);
-      }
-      return this;
-    }
-    info(...args) {
-      if (this.logLevel >= 3) {
-        console.info(...args);
-      }
-      return this;
-    }
-    debug(...args) {
-      if (this.logLevel >= 4) {
-        console.debug(...args);
-      }
-      return this;
-    }
-  }
-  /*!
-  * Copyright (c) Microsoft Corporation.
-  * Licensed under the MIT License.
-  */
-  function registerNativePlugins() {
-    registerMarkdownPlugin(checkboxPlugin);
-    registerMarkdownPlugin(cssPlugin);
-    registerMarkdownPlugin(dropdownPlugin);
-    registerMarkdownPlugin(imagePlugin);
-    registerMarkdownPlugin(placeholdersPlugin);
-    registerMarkdownPlugin(presetsPlugin);
-    registerMarkdownPlugin(tabulatorPlugin);
-    registerMarkdownPlugin(vegaLitePlugin);
-    registerMarkdownPlugin(vegaPlugin);
-  }
-  /*!
-  * Copyright (c) Microsoft Corporation.
-  * Licensed under the MIT License.
-  */
-  registerNativePlugins();
   const index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     __proto__: null,
-    Renderer,
-    definePlugin,
-    plugins,
-    registerMarkdownPlugin,
-    sanitizedHTML
+    defaultCommonOptions
   }, Symbol.toStringTag, { value: "Module" }));
   class Previewer {
     constructor(elementOrSelector, markdown, options) {
@@ -2582,9 +749,105 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   * Copyright (c) Microsoft Corporation.
   * Licensed under the MIT License.
   */
+  function reconstituteAtRule(signature, rules, onlyUnflagged = true) {
+    const validRules = onlyUnflagged ? rules.filter((rule) => !rule.flag) : rules;
+    if (validRules.length === 0) return "";
+    if (signature === "") {
+      return validRules.map((rule) => rule.css).join("\\n");
+    } else {
+      const containedRules = validRules.map((rule) => rule.css).join("\\n");
+      return \`\${signature} {
+\${containedRules}
+}\`;
+    }
+  }
+  function reconstituteCss(atRules, onlyUnflagged = true) {
+    const cssBlocks = [];
+    for (const [signature, rules] of Object.entries(atRules)) {
+      const reconstructed = reconstituteAtRule(signature, rules, onlyUnflagged);
+      if (reconstructed) {
+        cssBlocks.push(reconstructed);
+      }
+    }
+    return cssBlocks.join("\\n\\n");
+  }
+  function categorizeCss(cssContent) {
+    const result = {};
+    function checkSecurityIssues(ruleContent) {
+      if (ruleContent.toLowerCase().includes("expression(")) {
+        return { flag: "scriptExec", reason: "CSS expression() function detected" };
+      } else if (ruleContent.toLowerCase().includes("javascript:")) {
+        return { flag: "scriptExec", reason: "JavaScript URL detected" };
+      } else if (ruleContent.includes("http://") || ruleContent.includes("https://")) {
+        return { flag: "externalResource", reason: "External URL detected" };
+      }
+      return null;
+    }
+    function addRule(signature, rule) {
+      if (!result.safeAtRules) {
+        result.safeAtRules = {};
+      }
+      if (!result.safeAtRules[signature]) {
+        result.safeAtRules[signature] = [];
+      }
+      result.safeAtRules[signature].push(rule);
+      if (rule.flag) {
+        if (rule.flag === "externalResource") {
+          if (!result.flaggedAtRules) {
+            result.flaggedAtRules = {};
+          }
+          if (!result.flaggedAtRules[signature]) {
+            result.flaggedAtRules[signature] = [];
+          }
+          result.flaggedAtRules[signature].push(rule);
+        } else {
+          if (!result.unsafeAtRules) {
+            result.unsafeAtRules = {};
+          }
+          if (!result.unsafeAtRules[signature]) {
+            result.unsafeAtRules[signature] = [];
+          }
+          result.unsafeAtRules[signature].push(rule);
+        }
+      }
+    }
+    try {
+      const ast = csstree.parse(cssContent);
+      csstree.walk(ast, function(node) {
+        if (node.type === "Atrule") {
+          const atRuleSignature = \`@\${node.name}\${node.prelude ? \` \${csstree.generate(node.prelude)}\` : ""}\`;
+          const ruleContent = csstree.generate(node);
+          const rule = { css: ruleContent };
+          const securityCheck = checkSecurityIssues(ruleContent);
+          if (securityCheck) {
+            rule.flag = securityCheck.flag;
+            rule.reason = securityCheck.reason;
+          }
+          addRule(atRuleSignature, rule);
+        } else if (node.type === "Rule") {
+          const ruleContent = csstree.generate(node);
+          const rule = { css: ruleContent };
+          const securityCheck = checkSecurityIssues(ruleContent);
+          if (securityCheck) {
+            rule.flag = securityCheck.flag;
+            rule.reason = securityCheck.reason;
+          }
+          addRule("", rule);
+        }
+      });
+    } catch (parseError) {
+      result.unsafeAtRules = {
+        "": [{ css: cssContent, flag: "malformed", reason: \`CSS parsing failed: \${parseError.message}\` }]
+      };
+    }
+    return result;
+  }
   const cssPlugin = {
     name: "css",
     initializePlugin: (md) => {
+      if (typeof csstree === "undefined") {
+        throw new Error("css-tree library is required for CSS plugin. Please include the css-tree script.");
+      }
       definePlugin(md, "css");
       md.block.ruler.before("fence", "css_block", function(state, startLine, endLine) {
         const start = state.bMarks[startLine] + state.tShift[startLine];
@@ -2612,7 +875,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         const info = token.info.trim();
         if (info === "css") {
           const cssId = \`css-\${idx}\`;
-          return sanitizedHTML("div", { id: cssId, class: "css-component" }, token.content.trim());
+          const cssContent = token.content.trim();
+          const categorizedCss = categorizeCss(cssContent);
+          return sanitizedHTML("div", { id: cssId, class: "css-component" }, JSON.stringify(categorizedCss));
         }
         if (originalFence) {
           return originalFence(tokens, idx, options, env, slf);
@@ -2627,17 +892,33 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       for (const [index2, container] of Array.from(containers).entries()) {
         if (!container.textContent) continue;
         try {
-          const cssContent = container.textContent.trim();
-          const styleElement = document.createElement("style");
-          styleElement.type = "text/css";
-          styleElement.id = \`idocs-css-\${container.id}\`;
-          styleElement.textContent = cssContent;
-          renderer.element.appendChild(styleElement);
-          container.innerHTML = \`<!-- CSS styles applied to document -->\`;
-          cssInstances.push({
-            id: container.id,
-            element: styleElement
-          });
+          const categorizedCss = JSON.parse(container.textContent);
+          if (categorizedCss.unsafeAtRules) {
+            console.error("CSS blocked due to security issues");
+            container.innerHTML = \`<!-- CSS styles omitted due to security issues -->\`;
+            continue;
+          }
+          if (categorizedCss.flaggedAtRules) {
+            console.warn("CSS contains external URLs requiring approval");
+            container.innerHTML = \`<!-- CSS styles contain external resources requiring approval -->\`;
+            continue;
+          }
+          let safeCss = "";
+          if (categorizedCss.safeAtRules) {
+            safeCss = reconstituteCss(categorizedCss.safeAtRules, true);
+          }
+          if (safeCss.trim().length > 0) {
+            const styleElement = document.createElement("style");
+            styleElement.type = "text/css";
+            styleElement.id = \`idocs-css-\${container.id}\`;
+            styleElement.textContent = safeCss;
+            renderer.element.appendChild(styleElement);
+            container.innerHTML = \`<!-- CSS styles applied to document -->\`;
+            cssInstances.push({
+              id: container.id,
+              element: styleElement
+            });
+          }
         } catch (e) {
           container.innerHTML = \`<div class="error">\${e.toString()}</div>\`;
           errorHandler(e, "CSS", index2, "parse", container);
@@ -3780,6 +2061,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       return `
 <link href="https://unpkg.com/tabulator-tables@6.3.0/dist/css/tabulator.min.css" rel="stylesheet" />
 <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"><\/script>
+<script src="https://unpkg.com/css-tree/dist/csstree.js"><\/script>
 <script src="https://cdn.jsdelivr.net/npm/vega@5.29.0"><\/script>
 <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.20.1"><\/script>
 <script src="https://unpkg.com/tabulator-tables@6.3.0/dist/js/tabulator.min.js"><\/script>
@@ -3805,8 +2087,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     Previewer,
     Sandbox
   }, Symbol.toStringTag, { value: "Module" }));
-  exports2.common = index$2;
-  exports2.markdown = index$1;
+  exports2.common = index$1;
   exports2.sandbox = index;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

From 8510628ac983044a1bedb84d66d9a944c7cb0663 Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Thu, 24 Jul 2025 09:52:23 -0700
Subject: [PATCH 07/14] new flag structure

---
 packages/markdown/src/plugins/css.ts | 299 ++++++++++++++++++---------
 1 file changed, 197 insertions(+), 102 deletions(-)

diff --git a/packages/markdown/src/plugins/css.ts b/packages/markdown/src/plugins/css.ts
index 3abd2322..385c11c3 100644
--- a/packages/markdown/src/plugins/css.ts
+++ b/packages/markdown/src/plugins/css.ts
@@ -9,40 +9,71 @@ import { sanitizedHTML } from '../sanitize.js';
 // CSS Tree is expected to be available as a global variable
 declare const csstree: any;
 
+interface Declaration {
+    css: string;        // Safe CSS or "/* omitted */" for unsafe
+    unsafeCss?: string; // Original unsafe CSS content (for debugging)
+    flag?: "xss" | "scriptExec" | "externalResource" | "malformed" | "importRule" | "svgDataUrl";
+    reason?: string;
+}
+
 interface Rule {
-    css: string;
-    flag?: "xss" | "scriptExec" | "externalResource" | "malformed";
+    selector: string;        // e.g., "body", ".class"
+    declarations: Declaration[];
+}
+
+interface AtRule {
+    signature: string;       // e.g., "@media screen", "@keyframes", "" for global
+    rules?: Rule[];         // For at-rules that contain rules
+    css?: string;           // For simple at-rules that don't contain rules  
+    flag?: "xss" | "scriptExec" | "externalResource" | "malformed" | "importRule" | "svgDataUrl";
     reason?: string;
 }
 
 interface CategorizedCss {
-    safeAtRules?: { [atRuleSignature: string]: Rule[] }; // Optional - might be empty if all rules are unsafe
-    flaggedAtRules?: { [atRuleSignature: string]: Rule[] }; // External resources needing approval
-    unsafeAtRules?: { [atRuleSignature: string]: Rule[] }; // Definitively blocked content
+    atRules: { [atRuleSignature: string]: AtRule };
+    hasFlags: boolean;
 }
 
-// Helper function to reconstitute an at-rule block from signature and rules
-function reconstituteAtRule(signature: string, rules: Rule[], onlyUnflagged: boolean = true): string {
-    const validRules = onlyUnflagged ? rules.filter(rule => !rule.flag) : rules;
-    if (validRules.length === 0) return '';
-
-    if (signature === '') {
-        // Standalone rules (no at-rule wrapper)
-        return validRules.map(rule => rule.css).join('\n');
+// Helper function to reconstitute an at-rule block from at-rule data
+function reconstituteAtRule(atRule: AtRule): string {
+    if (atRule.css) {
+        // Simple at-rule (like @import) - check if it's flagged
+        return atRule.flag ? `/* ${atRule.css} - BLOCKED: ${atRule.reason} */` : atRule.css;
+    }
+    
+    if (!atRule.rules || atRule.rules.length === 0) return '';
+    
+    // At-rule with contained rules - reconstitute each rule
+    const reconstitutedRules: string[] = [];
+    
+    for (const rule of atRule.rules) {
+        const validDeclarations = rule.declarations
+            .map(decl => decl.css) // Use the safe CSS (either original or "/* omitted */")
+            .filter(css => css.trim() !== '');
+        
+        if (validDeclarations.length > 0) {
+            reconstitutedRules.push(`${rule.selector} {\n  ${validDeclarations.join(';\n  ')};\n}`);
+        }
+    }
+    
+    if (reconstitutedRules.length === 0) return '';
+    
+    if (atRule.signature === '') {
+        // Global rules (no at-rule wrapper)
+        return reconstitutedRules.join('\n\n');
     } else {
         // At-rule with contained rules
-        const containedRules = validRules.map(rule => rule.css).join('\n');
-        return `${signature} {\n${containedRules}\n}`;
+        return `${atRule.signature} {\n${reconstitutedRules.join('\n\n')}\n}`;
     }
 }
 
 // Helper function to reconstitute complete CSS from categorized rules
-function reconstituteCss(atRules: { [atRuleSignature: string]: Rule[] }, onlyUnflagged: boolean = true): string {
+function reconstituteCss(atRules: { [atRuleSignature: string]: AtRule }): string {
     const cssBlocks: string[] = [];
 
-    for (const [signature, rules] of Object.entries(atRules)) {
-        const reconstructed = reconstituteAtRule(signature, rules, onlyUnflagged);
-        if (reconstructed) {
+    for (const atRule of Object.values(atRules)) {
+        const reconstructed = reconstituteAtRule(atRule);
+        if (reconstructed.trim()) {
             cssBlocks.push(reconstructed);
         }
     }
@@ -51,92 +82,159 @@ function reconstituteCss(atRules: { [atRuleSignature: string]: Rule[] }, onlyUnf
 }
 
 function categorizeCss(cssContent: string): CategorizedCss {
-    const result: CategorizedCss = {};
-
-    // Helper function to check for security issues
-    function checkSecurityIssues(ruleContent: string): Pick<Rule, 'flag' | 'reason'> | null {
-        if (ruleContent.toLowerCase().includes('expression(')) {
+    const result: CategorizedCss = {
+        atRules: {},
+        hasFlags: false
+    };
+
+    // Helper function to check for security issues using AST node analysis
+    function checkSecurityIssues(node: any): Pick<Declaration, 'flag' | 'reason'> | null {
+        // Check for script execution in CSS expressions
+        if (node.type === 'Function' && node.name === 'expression') {
             return { flag: 'scriptExec', reason: 'CSS expression() function detected' };
-        } else if (ruleContent.toLowerCase().includes('javascript:')) {
-            return { flag: 'scriptExec', reason: 'JavaScript URL detected' };
-        } else if (ruleContent.includes('http://') || ruleContent.includes('https://')) {
-            return { flag: 'externalResource', reason: 'External URL detected' };
         }
-        return null;
-    }
-
-    // Helper function to add a rule to the appropriate collections
-    function addRule(signature: string, rule: Rule) {
-        // Add to safeAtRules
-        if (!result.safeAtRules) {
-            result.safeAtRules = {};
-        }
-        if (!result.safeAtRules[signature]) {
-            result.safeAtRules[signature] = [];
-        }
-        result.safeAtRules[signature].push(rule);
-
-        // Add to appropriate flagged/unsafe collection based on flag type
-        if (rule.flag) {
-            if (rule.flag === 'externalResource') {
-                // External resources need whitelist approval
-                if (!result.flaggedAtRules) {
-                    result.flaggedAtRules = {};
-                }
-                if (!result.flaggedAtRules[signature]) {
-                    result.flaggedAtRules[signature] = [];
-                }
-                result.flaggedAtRules[signature].push(rule);
-            } else {
-                // scriptExec, xss, malformed are unsafe
-                if (!result.unsafeAtRules) {
-                    result.unsafeAtRules = {};
+        
+        // Check URLs for security issues
+        if (node.type === 'Url') {
+            const urlValue = node.value;
+            if (!urlValue) return null;
+            
+            const url = urlValue.value || urlValue;
+            const urlStr = url.toLowerCase();
+            
+            // Script URLs
+            if (urlStr.startsWith('javascript:') || urlStr.startsWith('vbscript:')) {
+                return { flag: 'scriptExec', reason: `${urlStr.split(':')[0]} URL detected` };
+            }
+            
+            // Data URLs need specific checking
+            if (urlStr.startsWith('data:')) {
+                // SVG data URLs can contain scripts
+                if (urlStr.includes('data:image/svg+xml') && urlStr.includes('<script')) {
+                    return { flag: 'svgDataUrl', reason: 'SVG data URL with script detected' };
                 }
-                if (!result.unsafeAtRules[signature]) {
-                    result.unsafeAtRules[signature] = [];
+                // Other data URLs might be safe, but let's flag for review
+                return { flag: 'externalResource', reason: 'Data URL detected' };
+            }
+            
+            // External HTTP/HTTPS URLs
+            if (urlStr.startsWith('http://') || urlStr.startsWith('https://')) {
+                return { flag: 'externalResource', reason: 'External URL detected' };
+            }
+        }
+        
+        // Check for CSS-encoded XSS attempts in values
+        if (node.type === 'String' || node.type === 'Identifier') {
+            const value = node.value || node.name || '';
+            if (typeof value === 'string') {
+                const valueStr = value.toLowerCase();
+                // Check for CSS-encoded characters that could be XSS
+                if (valueStr.includes('\\') && (valueStr.includes('3c') || valueStr.includes('3e') || valueStr.includes('22') || valueStr.includes('27'))) {
+                    return { flag: 'xss', reason: 'Potential CSS-encoded XSS detected' };
                 }
-                result.unsafeAtRules[signature].push(rule);
             }
         }
+        
+        return null;
     }
 
     try {
         // Parse CSS with CSS Tree
-        const ast = csstree.parse(cssContent);        // Walk through the AST and organize rules
+        const ast = csstree.parse(cssContent);
+        
+        // Walk the AST and collect rules with security checks
         csstree.walk(ast, function (node) {
             if (node.type === 'Atrule') {
                 const atRuleSignature = `@${node.name}${node.prelude ? ` ${csstree.generate(node.prelude)}` : ''}`;
-                const ruleContent = csstree.generate(node);
-                const rule: Rule = { css: ruleContent };
-
-                const securityCheck = checkSecurityIssues(ruleContent);
-                if (securityCheck) {
-                    rule.flag = securityCheck.flag;
-                    rule.reason = securityCheck.reason;
+                
+                // Check for @import specifically
+                if (node.name === 'import') {
+                    const ruleContent = csstree.generate(node);
+                    result.atRules[atRuleSignature] = {
+                        signature: atRuleSignature,
+                        css: ruleContent,
+                        flag: 'importRule',
+                        reason: '@import rule detected - requires approval'
+                    };
+                    result.hasFlags = true;
+                    return;
                 }
-
-                addRule(atRuleSignature, rule);
-
+                
+                // For other at-rules that contain rules (like @media, @keyframes)
+                if (node.block) {
+                    if (!result.atRules[atRuleSignature]) {
+                        result.atRules[atRuleSignature] = {
+                            signature: atRuleSignature,
+                            rules: []
+                        };
+                    }
+                } else {
+                    // Simple at-rule without block
+                    const ruleContent = csstree.generate(node);
+                    result.atRules[atRuleSignature] = {
+                        signature: atRuleSignature,
+                        css: ruleContent
+                    };
+                }
+                
             } else if (node.type === 'Rule') {
-                const ruleContent = csstree.generate(node);
-                const rule: Rule = { css: ruleContent };
-
-                const securityCheck = checkSecurityIssues(ruleContent);
-                if (securityCheck) {
-                    rule.flag = securityCheck.flag;
-                    rule.reason = securityCheck.reason;
+                // Regular CSS rule - need to parse its declarations
+                const selector = csstree.generate(node.prelude);
+                const declarations: Declaration[] = [];
+                
+                // Walk through the declarations in this rule
+                if (node.block && node.block.children) {
+                    node.block.children.forEach((declNode: any) => {
+                        if (declNode.type === 'Declaration') {
+                            const declCss = csstree.generate(declNode);
+                            const declaration: Declaration = { css: declCss };
+                            
+                            // Check this declaration for security issues
+                            let hasSecurityIssue = false;
+                            csstree.walk(declNode, function(childNode: any) {
+                                if (!hasSecurityIssue) {
+                                    const securityCheck = checkSecurityIssues(childNode);
+                                    if (securityCheck) {
+                                        declaration.css = '/* omitted */';
+                                        declaration.unsafeCss = declCss;
+                                        declaration.flag = securityCheck.flag;
+                                        declaration.reason = securityCheck.reason;
+                                        result.hasFlags = true;
+                                        hasSecurityIssue = true;
+                                    }
+                                }
+                            });
+                            
+                            declarations.push(declaration);
+                        }
+                    });
                 }
-
-                addRule('', rule); // Empty string for standalone rules
+                
+                const rule: Rule = {
+                    selector,
+                    declarations
+                };
+                
+                // Find the appropriate at-rule context (global if none)
+                const currentAtRule = ''; // For now, put all rules in global context
+                
+                if (!result.atRules[currentAtRule]) {
+                    result.atRules[currentAtRule] = {
+                        signature: currentAtRule,
+                        rules: []
+                    };
+                }
+                
+                result.atRules[currentAtRule].rules!.push(rule);
             }
         });
 
-        // Return the categorized result - hydration will decide what to apply
-
     } catch (parseError) {
-        result.unsafeAtRules = {
-            '': [{ css: cssContent, flag: 'malformed', reason: `CSS parsing failed: ${parseError.message}` }]
+        result.atRules[''] = {
+            signature: '',
+            css: `/* CSS parsing failed: ${parseError.message} */`
         };
+        result.hasFlags = true;
     }
 
     return result;
@@ -211,25 +309,16 @@ export const cssPlugin: Plugin = {
 
             try {
                 const categorizedCss: CategorizedCss = JSON.parse(container.textContent);
+                const comments: string[] = [];
 
-                // Handle CSS with issues - show appropriate message
-                if (categorizedCss.unsafeAtRules) {
-                    console.error('CSS blocked due to security issues');
-                    container.innerHTML = `<!-- CSS styles omitted due to security issues -->`;
-                    continue;
+                // Log security issues found
+                if (categorizedCss.hasFlags) {
+                    console.warn(`CSS security: Security issues detected in CSS`);
+                    comments.push(`<!-- CSS security issues detected and filtered -->`);
                 }
 
-                if (categorizedCss.flaggedAtRules) {
-                    console.warn('CSS contains external URLs requiring approval');
-                    container.innerHTML = `<!-- CSS styles contain external resources requiring approval -->`;
-                    continue;
-                }
-
-                // Generate and apply safe CSS from unflagged rules
-                let safeCss = '';
-                if (categorizedCss.safeAtRules) {
-                    safeCss = reconstituteCss(categorizedCss.safeAtRules, true);
-                }
+                // Generate and apply safe CSS
+                const safeCss = reconstituteCss(categorizedCss.atRules);
 
                 if (safeCss.trim().length > 0) {
                     const styleElement = document.createElement('style');
@@ -237,14 +326,20 @@ export const cssPlugin: Plugin = {
                     styleElement.id = `idocs-css-${container.id}`;
                     styleElement.textContent = safeCss;
 
-                    renderer.element.appendChild(styleElement);
-                    container.innerHTML = `<!-- CSS styles applied to document -->`;
+                    // Apply to shadow DOM if available, otherwise document
+                    const target = renderer.shadowRoot || document.head;
+                    target.appendChild(styleElement);
+
+                    comments.push(`<!-- CSS styles applied to ${renderer.shadowRoot ? 'shadow DOM' : 'document'} -->`);
 
                     cssInstances.push({
                         id: container.id,
                         element: styleElement
                     });
+                } else {
+                    comments.push(`<!-- No safe CSS styles to apply -->`);
                 }
+                container.innerHTML = comments.join('\n');
             } catch (e) {
                 container.innerHTML = `<div class="error">${e.toString()}</div>`;
                 errorHandler(e, 'CSS', index, 'parse', container);

From ba1a169ff3c4d0b27b9f6549247fb805b1c8acd6 Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Thu, 24 Jul 2025 11:15:43 -0700
Subject: [PATCH 08/14] eliminate double walk

---
 packages/markdown/src/plugins/css.ts | 186 ++++++++++++++++-----------
 1 file changed, 111 insertions(+), 75 deletions(-)

diff --git a/packages/markdown/src/plugins/css.ts b/packages/markdown/src/plugins/css.ts
index 385c11c3..e4638518 100644
--- a/packages/markdown/src/plugins/css.ts
+++ b/packages/markdown/src/plugins/css.ts
@@ -5,14 +5,15 @@
 
 import { definePlugin, IInstance, Plugin } from '../factory.js';
 import { sanitizedHTML } from '../sanitize.js';
+import * as Csstree from 'css-tree';
 
 // CSS Tree is expected to be available as a global variable
-declare const csstree: any;
+declare const csstree: typeof Csstree;
 
 interface Declaration {
-    css: string;        // Safe CSS or "/* omitted */" for unsafe
+    css: string;        // Safe CSS
     unsafeCss?: string; // Original unsafe CSS content (for debugging)
-    flag?: "xss" | "scriptExec" | "externalResource" | "malformed" | "importRule" | "svgDataUrl";
+    flag?: 'xss' | 'scriptExec' | 'insecureExternalResource' | 'externalResource' | 'malformed' | 'importRule' | 'svgDataUrl';
     reason?: string;
 }
 
@@ -40,24 +41,24 @@ function reconstituteAtRule(atRule: AtRule): string {
         // Simple at-rule (like @import) - check if it's flagged
         return atRule.flag ? `/* ${atRule.css} - BLOCKED: ${atRule.reason} */` : atRule.css;
     }
-    
+
     if (!atRule.rules || atRule.rules.length === 0) return '';
-    
+
     // At-rule with contained rules - reconstitute each rule
     const reconstitutedRules: string[] = [];
-    
+
     for (const rule of atRule.rules) {
         const validDeclarations = rule.declarations
-            .map(decl => decl.css) // Use the safe CSS (either original or "/* omitted */")
+            .map(decl => decl.css)
             .filter(css => css.trim() !== '');
-        
+
         if (validDeclarations.length > 0) {
             reconstitutedRules.push(`${rule.selector} {\n  ${validDeclarations.join(';\n  ')};\n}`);
         }
     }
-    
+
     if (reconstitutedRules.length === 0) return '';
-    
+
     if (atRule.signature === '') {
         // Global rules (no at-rule wrapper)
         return reconstitutedRules.join('\n\n');
@@ -93,36 +94,41 @@ function categorizeCss(cssContent: string): CategorizedCss {
         if (node.type === 'Function' && node.name === 'expression') {
             return { flag: 'scriptExec', reason: 'CSS expression() function detected' };
         }
-        
+
         // Check URLs for security issues
         if (node.type === 'Url') {
             const urlValue = node.value;
             if (!urlValue) return null;
-            
+
             const url = urlValue.value || urlValue;
             const urlStr = url.toLowerCase();
-            
+
             // Script URLs
             if (urlStr.startsWith('javascript:') || urlStr.startsWith('vbscript:')) {
                 return { flag: 'scriptExec', reason: `${urlStr.split(':')[0]} URL detected` };
             }
-            
+
             // Data URLs need specific checking
             if (urlStr.startsWith('data:')) {
                 // SVG data URLs can contain scripts
-                if (urlStr.includes('data:image/svg+xml') && urlStr.includes('<script')) {
-                    return { flag: 'svgDataUrl', reason: 'SVG data URL with script detected' };
+                if (urlStr.includes('data:image/svg+xml')) {
+                    if (urlStr.includes('<script')) {
+                        return { flag: 'svgDataUrl', reason: 'SVG data URL with script detected' };
+                    }
+                    //TODO check for inline handlers
                 }
                 // Other data URLs might be safe, but let's flag for review
                 return { flag: 'externalResource', reason: 'Data URL detected' };
             }
-            
+
             // External HTTP/HTTPS URLs
-            if (urlStr.startsWith('http://') || urlStr.startsWith('https://')) {
+            if (urlStr.startsWith('http://')) {
+                return { flag: 'insecureExternalResource', reason: 'Insecure external URL (http) detected' };
+            } else if (urlStr.startsWith('https://')) {
                 return { flag: 'externalResource', reason: 'External URL detected' };
             }
         }
-        
+
         // Check for CSS-encoded XSS attempts in values
         if (node.type === 'String' || node.type === 'Identifier') {
             const value = node.value || node.name || '';
@@ -134,19 +140,23 @@ function categorizeCss(cssContent: string): CategorizedCss {
                 }
             }
         }
-        
+
         return null;
     }
 
     try {
         // Parse CSS with CSS Tree
         const ast = csstree.parse(cssContent);
-        
-        // Walk the AST and collect rules with security checks
-        csstree.walk(ast, function (node) {
+
+        // Track current rule being built as we walk
+        let currentRule: Rule | null = null;
+        let currentAtRuleSignature = ''; // Global context by default
+
+        // Single walk through the AST - process each node once
+        csstree.walk(ast, (node) => {
             if (node.type === 'Atrule') {
                 const atRuleSignature = `@${node.name}${node.prelude ? ` ${csstree.generate(node.prelude)}` : ''}`;
-                
+
                 // Check for @import specifically
                 if (node.name === 'import') {
                     const ruleContent = csstree.generate(node);
@@ -159,7 +169,7 @@ function categorizeCss(cssContent: string): CategorizedCss {
                     result.hasFlags = true;
                     return;
                 }
-                
+
                 // For other at-rules that contain rules (like @media, @keyframes)
                 if (node.block) {
                     if (!result.atRules[atRuleSignature]) {
@@ -168,6 +178,8 @@ function categorizeCss(cssContent: string): CategorizedCss {
                             rules: []
                         };
                     }
+                    // Set current context for nested rules
+                    currentAtRuleSignature = atRuleSignature;
                 } else {
                     // Simple at-rule without block
                     const ruleContent = csstree.generate(node);
@@ -176,65 +188,89 @@ function categorizeCss(cssContent: string): CategorizedCss {
                         css: ruleContent
                     };
                 }
-                
+
             } else if (node.type === 'Rule') {
-                // Regular CSS rule - need to parse its declarations
-                const selector = csstree.generate(node.prelude);
-                const declarations: Declaration[] = [];
-                
-                // Walk through the declarations in this rule
-                if (node.block && node.block.children) {
-                    node.block.children.forEach((declNode: any) => {
-                        if (declNode.type === 'Declaration') {
-                            const declCss = csstree.generate(declNode);
-                            const declaration: Declaration = { css: declCss };
-                            
-                            // Check this declaration for security issues
-                            let hasSecurityIssue = false;
-                            csstree.walk(declNode, function(childNode: any) {
-                                if (!hasSecurityIssue) {
-                                    const securityCheck = checkSecurityIssues(childNode);
-                                    if (securityCheck) {
-                                        declaration.css = '/* omitted */';
-                                        declaration.unsafeCss = declCss;
-                                        declaration.flag = securityCheck.flag;
-                                        declaration.reason = securityCheck.reason;
-                                        result.hasFlags = true;
-                                        hasSecurityIssue = true;
-                                    }
-                                }
-                            });
-                            
-                            declarations.push(declaration);
-                        }
-                    });
+                // Finish previous rule if one exists
+                if (currentRule && currentRule.declarations.length > 0) {
+                    const targetAtRule = currentAtRuleSignature;
+
+                    if (!result.atRules[targetAtRule]) {
+                        result.atRules[targetAtRule] = {
+                            signature: targetAtRule,
+                            rules: []
+                        };
+                    }
+
+                    if (result.atRules[targetAtRule].rules) {
+                        result.atRules[targetAtRule].rules.push(currentRule);
+                    } else {
+                        result.atRules[targetAtRule].rules = [currentRule];
+                    }
                 }
-                
-                const rule: Rule = {
+
+                // Start building a new rule
+                const selector = csstree.generate(node.prelude);
+                currentRule = {
                     selector,
-                    declarations
+                    declarations: []
                 };
-                
-                // Find the appropriate at-rule context (global if none)
-                const currentAtRule = ''; // For now, put all rules in global context
-                
-                if (!result.atRules[currentAtRule]) {
-                    result.atRules[currentAtRule] = {
-                        signature: currentAtRule,
-                        rules: []
-                    };
+
+            } else if (node.type === 'Declaration' && currentRule) {
+                // Process declaration within the current rule
+                const declCss = csstree.generate(node);
+                const declaration: Declaration = { css: declCss };
+
+                // Check this declaration node directly for security issues
+                const securityCheck = checkSecurityIssues(node);
+                if (securityCheck) {
+                    declaration.css = `/* omitted (${securityCheck.reason}) */`;
+                    declaration.unsafeCss = declCss;
+                    declaration.flag = securityCheck.flag;
+                    declaration.reason = securityCheck.reason;
+                    result.hasFlags = true;
+                }
+
+                currentRule.declarations.push(declaration);
+
+            } else if (currentRule &&
+                (node.type === 'Function' || node.type === 'Url' ||
+                    node.type === 'String' || node.type === 'Identifier')) {
+                // Check child nodes of the current declaration for security issues
+                const securityCheck = checkSecurityIssues(node);
+                if (securityCheck && currentRule.declarations.length > 0) {
+                    const lastDecl = currentRule.declarations[currentRule.declarations.length - 1];
+                    if (!lastDecl.flag) { // Only flag if not already flagged
+                        lastDecl.unsafeCss = lastDecl.css; // Preserve original before overwriting
+                        lastDecl.css = `/* omitted (${securityCheck.reason}) */`;
+                        lastDecl.flag = securityCheck.flag;
+                        lastDecl.reason = securityCheck.reason;
+                        result.hasFlags = true;
+                    }
                 }
-                
-                result.atRules[currentAtRule].rules!.push(rule);
             }
         });
 
+        // Don't forget to add the last rule if it exists
+        if (currentRule && currentRule.declarations.length > 0) {
+            const targetAtRule = currentAtRuleSignature;
+
+            if (!result.atRules[targetAtRule]) {
+                result.atRules[targetAtRule] = {
+                    signature: targetAtRule,
+                    rules: []
+                };
+            }
+
+            if (result.atRules[targetAtRule].rules) {
+                result.atRules[targetAtRule].rules.push(currentRule);
+            } else {
+                result.atRules[targetAtRule].rules = [currentRule];
+            }
+        }
+
     } catch (parseError) {
-        result.atRules[''] = {
-            signature: '',
-            css: `/* CSS parsing failed: ${parseError.message} */`
-        };
-        result.hasFlags = true;
+        // Don't swallow CSS parsing errors - throw them so they can be handled upstream
+        throw new Error(`CSS parsing failed: ${parseError.message}`);
     }
 
     return result;

From ddb93008f1046f05e422136b281b73b782c44cd5 Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Thu, 24 Jul 2025 12:20:50 -0700
Subject: [PATCH 09/14] dry

---
 packages/markdown/src/plugins/css.ts | 54 ++++++++++++----------------
 1 file changed, 22 insertions(+), 32 deletions(-)

diff --git a/packages/markdown/src/plugins/css.ts b/packages/markdown/src/plugins/css.ts
index e4638518..1959b597 100644
--- a/packages/markdown/src/plugins/css.ts
+++ b/packages/markdown/src/plugins/css.ts
@@ -152,6 +152,26 @@ function categorizeCss(cssContent: string): CategorizedCss {
         let currentRule: Rule | null = null;
         let currentAtRuleSignature = ''; // Global context by default
 
+        // Helper function to add current rule to results
+        function addCurrentRule() {
+            if (currentRule && currentRule.declarations.length > 0) {
+                const targetAtRule = currentAtRuleSignature;
+
+                if (!result.atRules[targetAtRule]) {
+                    result.atRules[targetAtRule] = {
+                        signature: targetAtRule,
+                        rules: []
+                    };
+                }
+
+                if (result.atRules[targetAtRule].rules) {
+                    result.atRules[targetAtRule].rules.push(currentRule);
+                } else {
+                    result.atRules[targetAtRule].rules = [currentRule];
+                }
+            }
+        }
+
         // Single walk through the AST - process each node once
         csstree.walk(ast, (node) => {
             if (node.type === 'Atrule') {
@@ -191,22 +211,7 @@ function categorizeCss(cssContent: string): CategorizedCss {
 
             } else if (node.type === 'Rule') {
                 // Finish previous rule if one exists
-                if (currentRule && currentRule.declarations.length > 0) {
-                    const targetAtRule = currentAtRuleSignature;
-
-                    if (!result.atRules[targetAtRule]) {
-                        result.atRules[targetAtRule] = {
-                            signature: targetAtRule,
-                            rules: []
-                        };
-                    }
-
-                    if (result.atRules[targetAtRule].rules) {
-                        result.atRules[targetAtRule].rules.push(currentRule);
-                    } else {
-                        result.atRules[targetAtRule].rules = [currentRule];
-                    }
-                }
+                addCurrentRule();
 
                 // Start building a new rule
                 const selector = csstree.generate(node.prelude);
@@ -251,22 +256,7 @@ function categorizeCss(cssContent: string): CategorizedCss {
         });
 
         // Don't forget to add the last rule if it exists
-        if (currentRule && currentRule.declarations.length > 0) {
-            const targetAtRule = currentAtRuleSignature;
-
-            if (!result.atRules[targetAtRule]) {
-                result.atRules[targetAtRule] = {
-                    signature: targetAtRule,
-                    rules: []
-                };
-            }
-
-            if (result.atRules[targetAtRule].rules) {
-                result.atRules[targetAtRule].rules.push(currentRule);
-            } else {
-                result.atRules[targetAtRule].rules = [currentRule];
-            }
-        }
+        addCurrentRule();
 
     } catch (parseError) {
         // Don't swallow CSS parsing errors - throw them so they can be handled upstream

From bb40e23840f338fa7403ff04dd45dea88ed58f65 Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Thu, 24 Jul 2025 13:38:31 -0700
Subject: [PATCH 10/14] disallow svg data URLs without approval in
 categorizeCss function

---
 packages/markdown/src/plugins/css.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/markdown/src/plugins/css.ts b/packages/markdown/src/plugins/css.ts
index 1959b597..837f07f3 100644
--- a/packages/markdown/src/plugins/css.ts
+++ b/packages/markdown/src/plugins/css.ts
@@ -116,6 +116,8 @@ function categorizeCss(cssContent: string): CategorizedCss {
                         return { flag: 'svgDataUrl', reason: 'SVG data URL with script detected' };
                     }
                     //TODO check for inline handlers
+                    //for now, disallow svg data URLs
+                    return { flag: 'svgDataUrl', reason: 'SVG data URL detected - requires approval' };
                 }
                 // Other data URLs might be safe, but let's flag for review
                 return { flag: 'externalResource', reason: 'Data URL detected' };

From f456fecfdaf3fdb48a9ba0a1f11e4f59b8737c6c Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Thu, 24 Jul 2025 13:47:51 -0700
Subject: [PATCH 11/14] safely create error message elements to prevent XSS in
 errorHandler

---
 packages/host/src/listener.ts | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/host/src/listener.ts b/packages/host/src/listener.ts
index b265bb4e..5b271a2a 100644
--- a/packages/host/src/listener.ts
+++ b/packages/host/src/listener.ts
@@ -120,10 +120,27 @@ export class Listener {
 
   public errorHandler(error: Error, detailsHtml: string) {
     show(this.loadingDiv, false);
-    this.appDiv.innerHTML = `<div style="color: red; padding: 20px;">
-    <strong>Error:</strong> ${error.message}<br>
-      ${detailsHtml}
-    </div>`;
+    
+    // Create DOM elements safely to prevent XSS
+    const errorDiv = document.createElement('div');
+    errorDiv.style.color = 'red';
+    errorDiv.style.padding = '20px';
+    
+    const errorLabel = document.createElement('strong');
+    errorLabel.textContent = 'Error:';
+    
+    const errorMessage = document.createTextNode(` ${error.message}`);
+    const lineBreak = document.createElement('br');
+    const details = document.createTextNode(detailsHtml);
+    
+    errorDiv.appendChild(errorLabel);
+    errorDiv.appendChild(errorMessage);
+    errorDiv.appendChild(lineBreak);
+    errorDiv.appendChild(details);
+    
+    // Clear previous content and append the error safely
+    this.appDiv.innerHTML = '';
+    this.appDiv.appendChild(errorDiv);
   }
 
   private bindTextareaToCompiler() {

From d76b1060dfe49af17b1d727414dc0917c1ef61ad Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Thu, 24 Jul 2025 13:50:26 -0700
Subject: [PATCH 12/14] refactor URL validation and error handling in
 checkUrlForFile function

---
 packages/host/src/url.ts | 43 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/packages/host/src/url.ts b/packages/host/src/url.ts
index b7434d11..38dcfaa4 100644
--- a/packages/host/src/url.ts
+++ b/packages/host/src/url.ts
@@ -10,19 +10,28 @@ export function checkUrlForFile(host: Listener) {
 
   if (loadUrl && !isValidUrl(loadUrl)) {
     host.errorHandler(
-      new Error(`Invalid URL: ${loadUrl}`),
+      new Error(`Invalid URL provided`),
       'The URL provided is not valid. Please ensure it is on the same origin or uses HTTPS.'
     );
     return false;
   }
 
   if (loadUrl) {
+    // Additional URL validation
+    if (!isValidLoadUrl(loadUrl)) {
+      host.errorHandler(
+        new Error('Invalid URL format'),
+        'The URL provided has an invalid format or contains suspicious characters.'
+      );
+      return false;
+    }
+
     try {
 
       fetch(loadUrl)
         .then(response => {
           if (!response.ok) {
-            throw new Error(`Failed to load ${loadUrl}`);
+            throw new Error(`Failed to load content from URL`);
           }
           return response.text();
         })
@@ -30,11 +39,11 @@ export function checkUrlForFile(host: Listener) {
           determineContent(content, host);
         })
         .catch(error => {
-          host.errorHandler(error as Error, `Error loading file: ${loadUrl}`);
+          host.errorHandler(error as Error, `Error loading file from the provided URL`);
         });
 
     } catch (error) {
-      host.errorHandler(error as Error, `Error loading file: ${loadUrl}`);
+      host.errorHandler(error as Error, `Error loading file from the provided URL`);
     }
     return true; // We found a load parameter
   } else {
@@ -53,3 +62,29 @@ function isHttps(url: string) {
   link.href = url;
   return link.protocol === "https:";
 }
+
+function isValidLoadUrl(url: string): boolean {
+  try {
+    const parsedUrl = new URL(url);
+    
+    // Only allow http and https protocols
+    if (!['http:', 'https:'].includes(parsedUrl.protocol)) {
+      return false;
+    }
+    
+    // Prevent javascript: and data: URLs
+    if (parsedUrl.protocol === 'javascript:' || parsedUrl.protocol === 'data:') {
+      return false;
+    }
+    
+    // Basic hostname validation (prevent obvious malicious patterns)
+    const hostname = parsedUrl.hostname.toLowerCase();
+    if (hostname.includes('<') || hostname.includes('>') || hostname.includes('"') || hostname.includes("'")) {
+      return false;
+    }
+    
+    return true;
+  } catch {
+    return false;
+  }
+}

From 009160861569e3e5d7ea6ef834cee675886f77ec Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Thu, 24 Jul 2025 13:52:38 -0700
Subject: [PATCH 13/14] rebuild

---
 docs/dist/idocs.editor.umd.js  | 219 ++++++++++++++++----------
 docs/dist/idocs.host.umd.js    | 270 +++++++++++++++++++++++----------
 docs/dist/idocs.sandbox.umd.js | 219 ++++++++++++++++----------
 3 files changed, 472 insertions(+), 236 deletions(-)

diff --git a/docs/dist/idocs.editor.umd.js b/docs/dist/idocs.editor.umd.js
index fd5b9cea..f017a5d1 100644
--- a/docs/dist/idocs.editor.umd.js
+++ b/docs/dist/idocs.editor.umd.js
@@ -1149,96 +1149,167 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   * Copyright (c) Microsoft Corporation.
   * Licensed under the MIT License.
   */
-  function reconstituteAtRule(signature, rules, onlyUnflagged = true) {
-    const validRules = onlyUnflagged ? rules.filter((rule) => !rule.flag) : rules;
-    if (validRules.length === 0) return "";
-    if (signature === "") {
-      return validRules.map((rule) => rule.css).join("\\n");
+  function reconstituteAtRule(atRule) {
+    if (atRule.css) {
+      return atRule.flag ? \`/* \${atRule.css} - BLOCKED: \${atRule.reason} */\` : atRule.css;
+    }
+    if (!atRule.rules || atRule.rules.length === 0) return "";
+    const reconstitutedRules = [];
+    for (const rule of atRule.rules) {
+      const validDeclarations = rule.declarations.map((decl) => decl.css).filter((css) => css.trim() !== "");
+      if (validDeclarations.length > 0) {
+        reconstitutedRules.push(\`\${rule.selector} {
+  \${validDeclarations.join(";\\n  ")};
+}\`);
+      }
+    }
+    if (reconstitutedRules.length === 0) return "";
+    if (atRule.signature === "") {
+      return reconstitutedRules.join("\\n\\n");
     } else {
-      const containedRules = validRules.map((rule) => rule.css).join("\\n");
-      return \`\${signature} {
-\${containedRules}
+      return \`\${atRule.signature} {
+\${reconstitutedRules.join("\\n\\n")}
 }\`;
     }
   }
-  function reconstituteCss(atRules, onlyUnflagged = true) {
+  function reconstituteCss(atRules) {
     const cssBlocks = [];
-    for (const [signature, rules] of Object.entries(atRules)) {
-      const reconstructed = reconstituteAtRule(signature, rules, onlyUnflagged);
-      if (reconstructed) {
+    for (const atRule of Object.values(atRules)) {
+      const reconstructed = reconstituteAtRule(atRule);
+      if (reconstructed.trim()) {
         cssBlocks.push(reconstructed);
       }
     }
     return cssBlocks.join("\\n\\n");
   }
   function categorizeCss(cssContent) {
-    const result = {};
-    function checkSecurityIssues(ruleContent) {
-      if (ruleContent.toLowerCase().includes("expression(")) {
+    const result = {
+      atRules: {},
+      hasFlags: false
+    };
+    function checkSecurityIssues(node) {
+      if (node.type === "Function" && node.name === "expression") {
         return { flag: "scriptExec", reason: "CSS expression() function detected" };
-      } else if (ruleContent.toLowerCase().includes("javascript:")) {
-        return { flag: "scriptExec", reason: "JavaScript URL detected" };
-      } else if (ruleContent.includes("http://") || ruleContent.includes("https://")) {
-        return { flag: "externalResource", reason: "External URL detected" };
-      }
-      return null;
-    }
-    function addRule(signature, rule) {
-      if (!result.safeAtRules) {
-        result.safeAtRules = {};
-      }
-      if (!result.safeAtRules[signature]) {
-        result.safeAtRules[signature] = [];
       }
-      result.safeAtRules[signature].push(rule);
-      if (rule.flag) {
-        if (rule.flag === "externalResource") {
-          if (!result.flaggedAtRules) {
-            result.flaggedAtRules = {};
-          }
-          if (!result.flaggedAtRules[signature]) {
-            result.flaggedAtRules[signature] = [];
-          }
-          result.flaggedAtRules[signature].push(rule);
-        } else {
-          if (!result.unsafeAtRules) {
-            result.unsafeAtRules = {};
+      if (node.type === "Url") {
+        const urlValue = node.value;
+        if (!urlValue) return null;
+        const url = urlValue.value || urlValue;
+        const urlStr = url.toLowerCase();
+        if (urlStr.startsWith("javascript:") || urlStr.startsWith("vbscript:")) {
+          return { flag: "scriptExec", reason: \`\${urlStr.split(":")[0]} URL detected\` };
+        }
+        if (urlStr.startsWith("data:")) {
+          if (urlStr.includes("data:image/svg+xml")) {
+            if (urlStr.includes("<script")) {
+              return { flag: "svgDataUrl", reason: "SVG data URL with script detected" };
+            }
+            return { flag: "svgDataUrl", reason: "SVG data URL detected - requires approval" };
           }
-          if (!result.unsafeAtRules[signature]) {
-            result.unsafeAtRules[signature] = [];
+          return { flag: "externalResource", reason: "Data URL detected" };
+        }
+        if (urlStr.startsWith("http://")) {
+          return { flag: "insecureExternalResource", reason: "Insecure external URL (http) detected" };
+        } else if (urlStr.startsWith("https://")) {
+          return { flag: "externalResource", reason: "External URL detected" };
+        }
+      }
+      if (node.type === "String" || node.type === "Identifier") {
+        const value = node.value || node.name || "";
+        if (typeof value === "string") {
+          const valueStr = value.toLowerCase();
+          if (valueStr.includes("\\\\") && (valueStr.includes("3c") || valueStr.includes("3e") || valueStr.includes("22") || valueStr.includes("27"))) {
+            return { flag: "xss", reason: "Potential CSS-encoded XSS detected" };
           }
-          result.unsafeAtRules[signature].push(rule);
         }
       }
+      return null;
     }
     try {
+      let addCurrentRule = function() {
+        if (currentRule && currentRule.declarations.length > 0) {
+          const targetAtRule = currentAtRuleSignature;
+          if (!result.atRules[targetAtRule]) {
+            result.atRules[targetAtRule] = {
+              signature: targetAtRule,
+              rules: []
+            };
+          }
+          if (result.atRules[targetAtRule].rules) {
+            result.atRules[targetAtRule].rules.push(currentRule);
+          } else {
+            result.atRules[targetAtRule].rules = [currentRule];
+          }
+        }
+      };
       const ast = csstree.parse(cssContent);
-      csstree.walk(ast, function(node) {
+      let currentRule = null;
+      let currentAtRuleSignature = "";
+      csstree.walk(ast, (node) => {
         if (node.type === "Atrule") {
           const atRuleSignature = \`@\${node.name}\${node.prelude ? \` \${csstree.generate(node.prelude)}\` : ""}\`;
-          const ruleContent = csstree.generate(node);
-          const rule = { css: ruleContent };
-          const securityCheck = checkSecurityIssues(ruleContent);
-          if (securityCheck) {
-            rule.flag = securityCheck.flag;
-            rule.reason = securityCheck.reason;
+          if (node.name === "import") {
+            const ruleContent = csstree.generate(node);
+            result.atRules[atRuleSignature] = {
+              signature: atRuleSignature,
+              css: ruleContent,
+              flag: "importRule",
+              reason: "@import rule detected - requires approval"
+            };
+            result.hasFlags = true;
+            return;
+          }
+          if (node.block) {
+            if (!result.atRules[atRuleSignature]) {
+              result.atRules[atRuleSignature] = {
+                signature: atRuleSignature,
+                rules: []
+              };
+            }
+            currentAtRuleSignature = atRuleSignature;
+          } else {
+            const ruleContent = csstree.generate(node);
+            result.atRules[atRuleSignature] = {
+              signature: atRuleSignature,
+              css: ruleContent
+            };
           }
-          addRule(atRuleSignature, rule);
         } else if (node.type === "Rule") {
-          const ruleContent = csstree.generate(node);
-          const rule = { css: ruleContent };
-          const securityCheck = checkSecurityIssues(ruleContent);
+          addCurrentRule();
+          const selector = csstree.generate(node.prelude);
+          currentRule = {
+            selector,
+            declarations: []
+          };
+        } else if (node.type === "Declaration" && currentRule) {
+          const declCss = csstree.generate(node);
+          const declaration = { css: declCss };
+          const securityCheck = checkSecurityIssues(node);
           if (securityCheck) {
-            rule.flag = securityCheck.flag;
-            rule.reason = securityCheck.reason;
+            declaration.css = \`/* omitted (\${securityCheck.reason}) */\`;
+            declaration.unsafeCss = declCss;
+            declaration.flag = securityCheck.flag;
+            declaration.reason = securityCheck.reason;
+            result.hasFlags = true;
+          }
+          currentRule.declarations.push(declaration);
+        } else if (currentRule && (node.type === "Function" || node.type === "Url" || node.type === "String" || node.type === "Identifier")) {
+          const securityCheck = checkSecurityIssues(node);
+          if (securityCheck && currentRule.declarations.length > 0) {
+            const lastDecl = currentRule.declarations[currentRule.declarations.length - 1];
+            if (!lastDecl.flag) {
+              lastDecl.unsafeCss = lastDecl.css;
+              lastDecl.css = \`/* omitted (\${securityCheck.reason}) */\`;
+              lastDecl.flag = securityCheck.flag;
+              lastDecl.reason = securityCheck.reason;
+              result.hasFlags = true;
+            }
           }
-          addRule("", rule);
         }
       });
+      addCurrentRule();
     } catch (parseError) {
-      result.unsafeAtRules = {
-        "": [{ css: cssContent, flag: "malformed", reason: \`CSS parsing failed: \${parseError.message}\` }]
-      };
+      throw new Error(\`CSS parsing failed: \${parseError.message}\`);
     }
     return result;
   }
@@ -1293,32 +1364,28 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         if (!container.textContent) continue;
         try {
           const categorizedCss = JSON.parse(container.textContent);
-          if (categorizedCss.unsafeAtRules) {
-            console.error("CSS blocked due to security issues");
-            container.innerHTML = \`<!-- CSS styles omitted due to security issues -->\`;
-            continue;
-          }
-          if (categorizedCss.flaggedAtRules) {
-            console.warn("CSS contains external URLs requiring approval");
-            container.innerHTML = \`<!-- CSS styles contain external resources requiring approval -->\`;
-            continue;
-          }
-          let safeCss = "";
-          if (categorizedCss.safeAtRules) {
-            safeCss = reconstituteCss(categorizedCss.safeAtRules, true);
+          const comments = [];
+          if (categorizedCss.hasFlags) {
+            console.warn(\`CSS security: Security issues detected in CSS\`);
+            comments.push(\`<!-- CSS security issues detected and filtered -->\`);
           }
+          const safeCss = reconstituteCss(categorizedCss.atRules);
           if (safeCss.trim().length > 0) {
             const styleElement = document.createElement("style");
             styleElement.type = "text/css";
             styleElement.id = \`idocs-css-\${container.id}\`;
             styleElement.textContent = safeCss;
-            renderer.element.appendChild(styleElement);
-            container.innerHTML = \`<!-- CSS styles applied to document -->\`;
+            const target = renderer.shadowRoot || document.head;
+            target.appendChild(styleElement);
+            comments.push(\`<!-- CSS styles applied to \${renderer.shadowRoot ? "shadow DOM" : "document"} -->\`);
             cssInstances.push({
               id: container.id,
               element: styleElement
             });
+          } else {
+            comments.push(\`<!-- No safe CSS styles to apply -->\`);
           }
+          container.innerHTML = comments.join("\\n");
         } catch (e) {
           container.innerHTML = \`<div class="error">\${e.toString()}</div>\`;
           errorHandler(e, "CSS", index2, "parse", container);
diff --git a/docs/dist/idocs.host.umd.js b/docs/dist/idocs.host.umd.js
index 6c02b436..436549dc 100644
--- a/docs/dist/idocs.host.umd.js
+++ b/docs/dist/idocs.host.umd.js
@@ -1149,96 +1149,167 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   * Copyright (c) Microsoft Corporation.
   * Licensed under the MIT License.
   */
-  function reconstituteAtRule(signature, rules, onlyUnflagged = true) {
-    const validRules = onlyUnflagged ? rules.filter((rule) => !rule.flag) : rules;
-    if (validRules.length === 0) return "";
-    if (signature === "") {
-      return validRules.map((rule) => rule.css).join("\\n");
+  function reconstituteAtRule(atRule) {
+    if (atRule.css) {
+      return atRule.flag ? \`/* \${atRule.css} - BLOCKED: \${atRule.reason} */\` : atRule.css;
+    }
+    if (!atRule.rules || atRule.rules.length === 0) return "";
+    const reconstitutedRules = [];
+    for (const rule of atRule.rules) {
+      const validDeclarations = rule.declarations.map((decl) => decl.css).filter((css) => css.trim() !== "");
+      if (validDeclarations.length > 0) {
+        reconstitutedRules.push(\`\${rule.selector} {
+  \${validDeclarations.join(";\\n  ")};
+}\`);
+      }
+    }
+    if (reconstitutedRules.length === 0) return "";
+    if (atRule.signature === "") {
+      return reconstitutedRules.join("\\n\\n");
     } else {
-      const containedRules = validRules.map((rule) => rule.css).join("\\n");
-      return \`\${signature} {
-\${containedRules}
+      return \`\${atRule.signature} {
+\${reconstitutedRules.join("\\n\\n")}
 }\`;
     }
   }
-  function reconstituteCss(atRules, onlyUnflagged = true) {
+  function reconstituteCss(atRules) {
     const cssBlocks = [];
-    for (const [signature, rules] of Object.entries(atRules)) {
-      const reconstructed = reconstituteAtRule(signature, rules, onlyUnflagged);
-      if (reconstructed) {
+    for (const atRule of Object.values(atRules)) {
+      const reconstructed = reconstituteAtRule(atRule);
+      if (reconstructed.trim()) {
         cssBlocks.push(reconstructed);
       }
     }
     return cssBlocks.join("\\n\\n");
   }
   function categorizeCss(cssContent) {
-    const result = {};
-    function checkSecurityIssues(ruleContent) {
-      if (ruleContent.toLowerCase().includes("expression(")) {
+    const result = {
+      atRules: {},
+      hasFlags: false
+    };
+    function checkSecurityIssues(node) {
+      if (node.type === "Function" && node.name === "expression") {
         return { flag: "scriptExec", reason: "CSS expression() function detected" };
-      } else if (ruleContent.toLowerCase().includes("javascript:")) {
-        return { flag: "scriptExec", reason: "JavaScript URL detected" };
-      } else if (ruleContent.includes("http://") || ruleContent.includes("https://")) {
-        return { flag: "externalResource", reason: "External URL detected" };
-      }
-      return null;
-    }
-    function addRule(signature, rule) {
-      if (!result.safeAtRules) {
-        result.safeAtRules = {};
       }
-      if (!result.safeAtRules[signature]) {
-        result.safeAtRules[signature] = [];
-      }
-      result.safeAtRules[signature].push(rule);
-      if (rule.flag) {
-        if (rule.flag === "externalResource") {
-          if (!result.flaggedAtRules) {
-            result.flaggedAtRules = {};
-          }
-          if (!result.flaggedAtRules[signature]) {
-            result.flaggedAtRules[signature] = [];
-          }
-          result.flaggedAtRules[signature].push(rule);
-        } else {
-          if (!result.unsafeAtRules) {
-            result.unsafeAtRules = {};
+      if (node.type === "Url") {
+        const urlValue = node.value;
+        if (!urlValue) return null;
+        const url = urlValue.value || urlValue;
+        const urlStr = url.toLowerCase();
+        if (urlStr.startsWith("javascript:") || urlStr.startsWith("vbscript:")) {
+          return { flag: "scriptExec", reason: \`\${urlStr.split(":")[0]} URL detected\` };
+        }
+        if (urlStr.startsWith("data:")) {
+          if (urlStr.includes("data:image/svg+xml")) {
+            if (urlStr.includes("<script")) {
+              return { flag: "svgDataUrl", reason: "SVG data URL with script detected" };
+            }
+            return { flag: "svgDataUrl", reason: "SVG data URL detected - requires approval" };
           }
-          if (!result.unsafeAtRules[signature]) {
-            result.unsafeAtRules[signature] = [];
+          return { flag: "externalResource", reason: "Data URL detected" };
+        }
+        if (urlStr.startsWith("http://")) {
+          return { flag: "insecureExternalResource", reason: "Insecure external URL (http) detected" };
+        } else if (urlStr.startsWith("https://")) {
+          return { flag: "externalResource", reason: "External URL detected" };
+        }
+      }
+      if (node.type === "String" || node.type === "Identifier") {
+        const value = node.value || node.name || "";
+        if (typeof value === "string") {
+          const valueStr = value.toLowerCase();
+          if (valueStr.includes("\\\\") && (valueStr.includes("3c") || valueStr.includes("3e") || valueStr.includes("22") || valueStr.includes("27"))) {
+            return { flag: "xss", reason: "Potential CSS-encoded XSS detected" };
           }
-          result.unsafeAtRules[signature].push(rule);
         }
       }
+      return null;
     }
     try {
+      let addCurrentRule = function() {
+        if (currentRule && currentRule.declarations.length > 0) {
+          const targetAtRule = currentAtRuleSignature;
+          if (!result.atRules[targetAtRule]) {
+            result.atRules[targetAtRule] = {
+              signature: targetAtRule,
+              rules: []
+            };
+          }
+          if (result.atRules[targetAtRule].rules) {
+            result.atRules[targetAtRule].rules.push(currentRule);
+          } else {
+            result.atRules[targetAtRule].rules = [currentRule];
+          }
+        }
+      };
       const ast = csstree.parse(cssContent);
-      csstree.walk(ast, function(node) {
+      let currentRule = null;
+      let currentAtRuleSignature = "";
+      csstree.walk(ast, (node) => {
         if (node.type === "Atrule") {
           const atRuleSignature = \`@\${node.name}\${node.prelude ? \` \${csstree.generate(node.prelude)}\` : ""}\`;
-          const ruleContent = csstree.generate(node);
-          const rule = { css: ruleContent };
-          const securityCheck = checkSecurityIssues(ruleContent);
-          if (securityCheck) {
-            rule.flag = securityCheck.flag;
-            rule.reason = securityCheck.reason;
+          if (node.name === "import") {
+            const ruleContent = csstree.generate(node);
+            result.atRules[atRuleSignature] = {
+              signature: atRuleSignature,
+              css: ruleContent,
+              flag: "importRule",
+              reason: "@import rule detected - requires approval"
+            };
+            result.hasFlags = true;
+            return;
+          }
+          if (node.block) {
+            if (!result.atRules[atRuleSignature]) {
+              result.atRules[atRuleSignature] = {
+                signature: atRuleSignature,
+                rules: []
+              };
+            }
+            currentAtRuleSignature = atRuleSignature;
+          } else {
+            const ruleContent = csstree.generate(node);
+            result.atRules[atRuleSignature] = {
+              signature: atRuleSignature,
+              css: ruleContent
+            };
           }
-          addRule(atRuleSignature, rule);
         } else if (node.type === "Rule") {
-          const ruleContent = csstree.generate(node);
-          const rule = { css: ruleContent };
-          const securityCheck = checkSecurityIssues(ruleContent);
+          addCurrentRule();
+          const selector = csstree.generate(node.prelude);
+          currentRule = {
+            selector,
+            declarations: []
+          };
+        } else if (node.type === "Declaration" && currentRule) {
+          const declCss = csstree.generate(node);
+          const declaration = { css: declCss };
+          const securityCheck = checkSecurityIssues(node);
           if (securityCheck) {
-            rule.flag = securityCheck.flag;
-            rule.reason = securityCheck.reason;
+            declaration.css = \`/* omitted (\${securityCheck.reason}) */\`;
+            declaration.unsafeCss = declCss;
+            declaration.flag = securityCheck.flag;
+            declaration.reason = securityCheck.reason;
+            result.hasFlags = true;
+          }
+          currentRule.declarations.push(declaration);
+        } else if (currentRule && (node.type === "Function" || node.type === "Url" || node.type === "String" || node.type === "Identifier")) {
+          const securityCheck = checkSecurityIssues(node);
+          if (securityCheck && currentRule.declarations.length > 0) {
+            const lastDecl = currentRule.declarations[currentRule.declarations.length - 1];
+            if (!lastDecl.flag) {
+              lastDecl.unsafeCss = lastDecl.css;
+              lastDecl.css = \`/* omitted (\${securityCheck.reason}) */\`;
+              lastDecl.flag = securityCheck.flag;
+              lastDecl.reason = securityCheck.reason;
+              result.hasFlags = true;
+            }
           }
-          addRule("", rule);
         }
       });
+      addCurrentRule();
     } catch (parseError) {
-      result.unsafeAtRules = {
-        "": [{ css: cssContent, flag: "malformed", reason: \`CSS parsing failed: \${parseError.message}\` }]
-      };
+      throw new Error(\`CSS parsing failed: \${parseError.message}\`);
     }
     return result;
   }
@@ -1293,32 +1364,28 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         if (!container.textContent) continue;
         try {
           const categorizedCss = JSON.parse(container.textContent);
-          if (categorizedCss.unsafeAtRules) {
-            console.error("CSS blocked due to security issues");
-            container.innerHTML = \`<!-- CSS styles omitted due to security issues -->\`;
-            continue;
-          }
-          if (categorizedCss.flaggedAtRules) {
-            console.warn("CSS contains external URLs requiring approval");
-            container.innerHTML = \`<!-- CSS styles contain external resources requiring approval -->\`;
-            continue;
-          }
-          let safeCss = "";
-          if (categorizedCss.safeAtRules) {
-            safeCss = reconstituteCss(categorizedCss.safeAtRules, true);
+          const comments = [];
+          if (categorizedCss.hasFlags) {
+            console.warn(\`CSS security: Security issues detected in CSS\`);
+            comments.push(\`<!-- CSS security issues detected and filtered -->\`);
           }
+          const safeCss = reconstituteCss(categorizedCss.atRules);
           if (safeCss.trim().length > 0) {
             const styleElement = document.createElement("style");
             styleElement.type = "text/css";
             styleElement.id = \`idocs-css-\${container.id}\`;
             styleElement.textContent = safeCss;
-            renderer.element.appendChild(styleElement);
-            container.innerHTML = \`<!-- CSS styles applied to document -->\`;
+            const target = renderer.shadowRoot || document.head;
+            target.appendChild(styleElement);
+            comments.push(\`<!-- CSS styles applied to \${renderer.shadowRoot ? "shadow DOM" : "document"} -->\`);
             cssInstances.push({
               id: container.id,
               element: styleElement
             });
+          } else {
+            comments.push(\`<!-- No safe CSS styles to apply -->\`);
           }
+          container.innerHTML = comments.join("\\n");
         } catch (e) {
           container.innerHTML = \`<div class="error">\${e.toString()}</div>\`;
           errorHandler(e, "CSS", index2, "parse", container);
@@ -2702,25 +2769,32 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const isValidUrl = (url) => isSameOrigin(url) || isHttps(url);
     if (loadUrl && !isValidUrl(loadUrl)) {
       host.errorHandler(
-        new Error(`Invalid URL: ${loadUrl}`),
+        new Error(`Invalid URL provided`),
         "The URL provided is not valid. Please ensure it is on the same origin or uses HTTPS."
       );
       return false;
     }
     if (loadUrl) {
+      if (!isValidLoadUrl(loadUrl)) {
+        host.errorHandler(
+          new Error("Invalid URL format"),
+          "The URL provided has an invalid format or contains suspicious characters."
+        );
+        return false;
+      }
       try {
         fetch(loadUrl).then((response) => {
           if (!response.ok) {
-            throw new Error(`Failed to load ${loadUrl}`);
+            throw new Error(`Failed to load content from URL`);
           }
           return response.text();
         }).then((content) => {
           determineContent(content, host);
         }).catch((error) => {
-          host.errorHandler(error, `Error loading file: ${loadUrl}`);
+          host.errorHandler(error, `Error loading file from the provided URL`);
         });
       } catch (error) {
-        host.errorHandler(error, `Error loading file: ${loadUrl}`);
+        host.errorHandler(error, `Error loading file from the provided URL`);
       }
       return true;
     } else {
@@ -2737,6 +2811,24 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     link.href = url;
     return link.protocol === "https:";
   }
+  function isValidLoadUrl(url) {
+    try {
+      const parsedUrl = new URL(url);
+      if (!["http:", "https:"].includes(parsedUrl.protocol)) {
+        return false;
+      }
+      if (parsedUrl.protocol === "javascript:" || parsedUrl.protocol === "data:") {
+        return false;
+      }
+      const hostname = parsedUrl.hostname.toLowerCase();
+      if (hostname.includes("<") || hostname.includes(">") || hostname.includes('"') || hostname.includes("'")) {
+        return false;
+      }
+      return true;
+    } catch {
+      return false;
+    }
+  }
   function setupPostMessageHandling(host) {
     window.addEventListener("message", (event) => {
       try {
@@ -2852,10 +2944,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }
     errorHandler(error, detailsHtml) {
       show(this.loadingDiv, false);
-      this.appDiv.innerHTML = `<div style="color: red; padding: 20px;">
-    <strong>Error:</strong> ${error.message}<br>
-      ${detailsHtml}
-    </div>`;
+      const errorDiv = document.createElement("div");
+      errorDiv.style.color = "red";
+      errorDiv.style.padding = "20px";
+      const errorLabel = document.createElement("strong");
+      errorLabel.textContent = "Error:";
+      const errorMessage = document.createTextNode(` ${error.message}`);
+      const lineBreak = document.createElement("br");
+      const details = document.createTextNode(detailsHtml);
+      errorDiv.appendChild(errorLabel);
+      errorDiv.appendChild(errorMessage);
+      errorDiv.appendChild(lineBreak);
+      errorDiv.appendChild(details);
+      this.appDiv.innerHTML = "";
+      this.appDiv.appendChild(errorDiv);
     }
     bindTextareaToCompiler() {
       const render = () => {
diff --git a/docs/dist/idocs.sandbox.umd.js b/docs/dist/idocs.sandbox.umd.js
index 365a01ec..3b81e58d 100644
--- a/docs/dist/idocs.sandbox.umd.js
+++ b/docs/dist/idocs.sandbox.umd.js
@@ -749,96 +749,167 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   * Copyright (c) Microsoft Corporation.
   * Licensed under the MIT License.
   */
-  function reconstituteAtRule(signature, rules, onlyUnflagged = true) {
-    const validRules = onlyUnflagged ? rules.filter((rule) => !rule.flag) : rules;
-    if (validRules.length === 0) return "";
-    if (signature === "") {
-      return validRules.map((rule) => rule.css).join("\\n");
+  function reconstituteAtRule(atRule) {
+    if (atRule.css) {
+      return atRule.flag ? \`/* \${atRule.css} - BLOCKED: \${atRule.reason} */\` : atRule.css;
+    }
+    if (!atRule.rules || atRule.rules.length === 0) return "";
+    const reconstitutedRules = [];
+    for (const rule of atRule.rules) {
+      const validDeclarations = rule.declarations.map((decl) => decl.css).filter((css) => css.trim() !== "");
+      if (validDeclarations.length > 0) {
+        reconstitutedRules.push(\`\${rule.selector} {
+  \${validDeclarations.join(";\\n  ")};
+}\`);
+      }
+    }
+    if (reconstitutedRules.length === 0) return "";
+    if (atRule.signature === "") {
+      return reconstitutedRules.join("\\n\\n");
     } else {
-      const containedRules = validRules.map((rule) => rule.css).join("\\n");
-      return \`\${signature} {
-\${containedRules}
+      return \`\${atRule.signature} {
+\${reconstitutedRules.join("\\n\\n")}
 }\`;
     }
   }
-  function reconstituteCss(atRules, onlyUnflagged = true) {
+  function reconstituteCss(atRules) {
     const cssBlocks = [];
-    for (const [signature, rules] of Object.entries(atRules)) {
-      const reconstructed = reconstituteAtRule(signature, rules, onlyUnflagged);
-      if (reconstructed) {
+    for (const atRule of Object.values(atRules)) {
+      const reconstructed = reconstituteAtRule(atRule);
+      if (reconstructed.trim()) {
         cssBlocks.push(reconstructed);
       }
     }
     return cssBlocks.join("\\n\\n");
   }
   function categorizeCss(cssContent) {
-    const result = {};
-    function checkSecurityIssues(ruleContent) {
-      if (ruleContent.toLowerCase().includes("expression(")) {
+    const result = {
+      atRules: {},
+      hasFlags: false
+    };
+    function checkSecurityIssues(node) {
+      if (node.type === "Function" && node.name === "expression") {
         return { flag: "scriptExec", reason: "CSS expression() function detected" };
-      } else if (ruleContent.toLowerCase().includes("javascript:")) {
-        return { flag: "scriptExec", reason: "JavaScript URL detected" };
-      } else if (ruleContent.includes("http://") || ruleContent.includes("https://")) {
-        return { flag: "externalResource", reason: "External URL detected" };
-      }
-      return null;
-    }
-    function addRule(signature, rule) {
-      if (!result.safeAtRules) {
-        result.safeAtRules = {};
-      }
-      if (!result.safeAtRules[signature]) {
-        result.safeAtRules[signature] = [];
       }
-      result.safeAtRules[signature].push(rule);
-      if (rule.flag) {
-        if (rule.flag === "externalResource") {
-          if (!result.flaggedAtRules) {
-            result.flaggedAtRules = {};
-          }
-          if (!result.flaggedAtRules[signature]) {
-            result.flaggedAtRules[signature] = [];
-          }
-          result.flaggedAtRules[signature].push(rule);
-        } else {
-          if (!result.unsafeAtRules) {
-            result.unsafeAtRules = {};
+      if (node.type === "Url") {
+        const urlValue = node.value;
+        if (!urlValue) return null;
+        const url = urlValue.value || urlValue;
+        const urlStr = url.toLowerCase();
+        if (urlStr.startsWith("javascript:") || urlStr.startsWith("vbscript:")) {
+          return { flag: "scriptExec", reason: \`\${urlStr.split(":")[0]} URL detected\` };
+        }
+        if (urlStr.startsWith("data:")) {
+          if (urlStr.includes("data:image/svg+xml")) {
+            if (urlStr.includes("<script")) {
+              return { flag: "svgDataUrl", reason: "SVG data URL with script detected" };
+            }
+            return { flag: "svgDataUrl", reason: "SVG data URL detected - requires approval" };
           }
-          if (!result.unsafeAtRules[signature]) {
-            result.unsafeAtRules[signature] = [];
+          return { flag: "externalResource", reason: "Data URL detected" };
+        }
+        if (urlStr.startsWith("http://")) {
+          return { flag: "insecureExternalResource", reason: "Insecure external URL (http) detected" };
+        } else if (urlStr.startsWith("https://")) {
+          return { flag: "externalResource", reason: "External URL detected" };
+        }
+      }
+      if (node.type === "String" || node.type === "Identifier") {
+        const value = node.value || node.name || "";
+        if (typeof value === "string") {
+          const valueStr = value.toLowerCase();
+          if (valueStr.includes("\\\\") && (valueStr.includes("3c") || valueStr.includes("3e") || valueStr.includes("22") || valueStr.includes("27"))) {
+            return { flag: "xss", reason: "Potential CSS-encoded XSS detected" };
           }
-          result.unsafeAtRules[signature].push(rule);
         }
       }
+      return null;
     }
     try {
+      let addCurrentRule = function() {
+        if (currentRule && currentRule.declarations.length > 0) {
+          const targetAtRule = currentAtRuleSignature;
+          if (!result.atRules[targetAtRule]) {
+            result.atRules[targetAtRule] = {
+              signature: targetAtRule,
+              rules: []
+            };
+          }
+          if (result.atRules[targetAtRule].rules) {
+            result.atRules[targetAtRule].rules.push(currentRule);
+          } else {
+            result.atRules[targetAtRule].rules = [currentRule];
+          }
+        }
+      };
       const ast = csstree.parse(cssContent);
-      csstree.walk(ast, function(node) {
+      let currentRule = null;
+      let currentAtRuleSignature = "";
+      csstree.walk(ast, (node) => {
         if (node.type === "Atrule") {
           const atRuleSignature = \`@\${node.name}\${node.prelude ? \` \${csstree.generate(node.prelude)}\` : ""}\`;
-          const ruleContent = csstree.generate(node);
-          const rule = { css: ruleContent };
-          const securityCheck = checkSecurityIssues(ruleContent);
-          if (securityCheck) {
-            rule.flag = securityCheck.flag;
-            rule.reason = securityCheck.reason;
+          if (node.name === "import") {
+            const ruleContent = csstree.generate(node);
+            result.atRules[atRuleSignature] = {
+              signature: atRuleSignature,
+              css: ruleContent,
+              flag: "importRule",
+              reason: "@import rule detected - requires approval"
+            };
+            result.hasFlags = true;
+            return;
+          }
+          if (node.block) {
+            if (!result.atRules[atRuleSignature]) {
+              result.atRules[atRuleSignature] = {
+                signature: atRuleSignature,
+                rules: []
+              };
+            }
+            currentAtRuleSignature = atRuleSignature;
+          } else {
+            const ruleContent = csstree.generate(node);
+            result.atRules[atRuleSignature] = {
+              signature: atRuleSignature,
+              css: ruleContent
+            };
           }
-          addRule(atRuleSignature, rule);
         } else if (node.type === "Rule") {
-          const ruleContent = csstree.generate(node);
-          const rule = { css: ruleContent };
-          const securityCheck = checkSecurityIssues(ruleContent);
+          addCurrentRule();
+          const selector = csstree.generate(node.prelude);
+          currentRule = {
+            selector,
+            declarations: []
+          };
+        } else if (node.type === "Declaration" && currentRule) {
+          const declCss = csstree.generate(node);
+          const declaration = { css: declCss };
+          const securityCheck = checkSecurityIssues(node);
           if (securityCheck) {
-            rule.flag = securityCheck.flag;
-            rule.reason = securityCheck.reason;
+            declaration.css = \`/* omitted (\${securityCheck.reason}) */\`;
+            declaration.unsafeCss = declCss;
+            declaration.flag = securityCheck.flag;
+            declaration.reason = securityCheck.reason;
+            result.hasFlags = true;
+          }
+          currentRule.declarations.push(declaration);
+        } else if (currentRule && (node.type === "Function" || node.type === "Url" || node.type === "String" || node.type === "Identifier")) {
+          const securityCheck = checkSecurityIssues(node);
+          if (securityCheck && currentRule.declarations.length > 0) {
+            const lastDecl = currentRule.declarations[currentRule.declarations.length - 1];
+            if (!lastDecl.flag) {
+              lastDecl.unsafeCss = lastDecl.css;
+              lastDecl.css = \`/* omitted (\${securityCheck.reason}) */\`;
+              lastDecl.flag = securityCheck.flag;
+              lastDecl.reason = securityCheck.reason;
+              result.hasFlags = true;
+            }
           }
-          addRule("", rule);
         }
       });
+      addCurrentRule();
     } catch (parseError) {
-      result.unsafeAtRules = {
-        "": [{ css: cssContent, flag: "malformed", reason: \`CSS parsing failed: \${parseError.message}\` }]
-      };
+      throw new Error(\`CSS parsing failed: \${parseError.message}\`);
     }
     return result;
   }
@@ -893,32 +964,28 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         if (!container.textContent) continue;
         try {
           const categorizedCss = JSON.parse(container.textContent);
-          if (categorizedCss.unsafeAtRules) {
-            console.error("CSS blocked due to security issues");
-            container.innerHTML = \`<!-- CSS styles omitted due to security issues -->\`;
-            continue;
-          }
-          if (categorizedCss.flaggedAtRules) {
-            console.warn("CSS contains external URLs requiring approval");
-            container.innerHTML = \`<!-- CSS styles contain external resources requiring approval -->\`;
-            continue;
-          }
-          let safeCss = "";
-          if (categorizedCss.safeAtRules) {
-            safeCss = reconstituteCss(categorizedCss.safeAtRules, true);
+          const comments = [];
+          if (categorizedCss.hasFlags) {
+            console.warn(\`CSS security: Security issues detected in CSS\`);
+            comments.push(\`<!-- CSS security issues detected and filtered -->\`);
           }
+          const safeCss = reconstituteCss(categorizedCss.atRules);
           if (safeCss.trim().length > 0) {
             const styleElement = document.createElement("style");
             styleElement.type = "text/css";
             styleElement.id = \`idocs-css-\${container.id}\`;
             styleElement.textContent = safeCss;
-            renderer.element.appendChild(styleElement);
-            container.innerHTML = \`<!-- CSS styles applied to document -->\`;
+            const target = renderer.shadowRoot || document.head;
+            target.appendChild(styleElement);
+            comments.push(\`<!-- CSS styles applied to \${renderer.shadowRoot ? "shadow DOM" : "document"} -->\`);
             cssInstances.push({
               id: container.id,
               element: styleElement
             });
+          } else {
+            comments.push(\`<!-- No safe CSS styles to apply -->\`);
           }
+          container.innerHTML = comments.join("\\n");
         } catch (e) {
           container.innerHTML = \`<div class="error">\${e.toString()}</div>\`;
           errorHandler(e, "CSS", index2, "parse", container);

From 6d6eea44fcfaf3e88b4a22adaa4aa8cdc6fc5892 Mon Sep 17 00:00:00 2001
From: Dan Marshall <danmar@microsoft.com>
Date: Thu, 24 Jul 2025 13:58:23 -0700
Subject: [PATCH 14/14] enhance URL validation to disallow vbscript: protocol
 in isValidLoadUrl function

---
 docs/dist/idocs.host.umd.js | 2 +-
 packages/host/src/url.ts    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/dist/idocs.host.umd.js b/docs/dist/idocs.host.umd.js
index 436549dc..7e9b3f3e 100644
--- a/docs/dist/idocs.host.umd.js
+++ b/docs/dist/idocs.host.umd.js
@@ -2817,7 +2817,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       if (!["http:", "https:"].includes(parsedUrl.protocol)) {
         return false;
       }
-      if (parsedUrl.protocol === "javascript:" || parsedUrl.protocol === "data:") {
+      if (parsedUrl.protocol === "javascript:" || parsedUrl.protocol === "vbscript:" || parsedUrl.protocol === "data:") {
         return false;
       }
       const hostname = parsedUrl.hostname.toLowerCase();
diff --git a/packages/host/src/url.ts b/packages/host/src/url.ts
index 38dcfaa4..89857305 100644
--- a/packages/host/src/url.ts
+++ b/packages/host/src/url.ts
@@ -72,8 +72,8 @@ function isValidLoadUrl(url: string): boolean {
       return false;
     }
     
-    // Prevent javascript: and data: URLs
-    if (parsedUrl.protocol === 'javascript:' || parsedUrl.protocol === 'data:') {
+    // Prevent javascript:, vbscript:, and data: URLs
+    if (parsedUrl.protocol === 'javascript:' || parsedUrl.protocol === 'vbscript:' || parsedUrl.protocol === 'data:') {
       return false;
     }