@cubud/wen 1.0.0

package/src/wen-core.js

@@ -0,0 +1,363 @@
+import { Editor } from 'https://esm.sh/@tiptap/core@2.2.4';
+import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.2.4';
+import { Markdown } from 'https://esm.sh/tiptap-markdown@0.8.9';
+import Link from 'https://esm.sh/@tiptap/extension-link@2.2.4';
+import Image from 'https://esm.sh/@tiptap/extension-image@2.2.4';
+
+import CodeBlockLowlight from 'https://esm.sh/@tiptap/extension-code-block-lowlight@2.2.4';
+import { createLowlight, common } from 'https://esm.sh/lowlight@3.1.0';
+
+// 1. New Table Imports
+import Table from 'https://esm.sh/@tiptap/extension-table@2.2.4';
+import TableRow from 'https://esm.sh/@tiptap/extension-table-row@2.2.4';
+import TableHeader from 'https://esm.sh/@tiptap/extension-table-header@2.2.4';
+import TableCell from 'https://esm.sh/@tiptap/extension-table-cell@2.2.4';
+
+import TaskList from 'https://esm.sh/@tiptap/extension-task-list@2.2.4';
+import TaskItem from 'https://esm.sh/@tiptap/extension-task-item@2.2.4';
+
+// ... existing imports ...
+import { Extension } from 'https://esm.sh/@tiptap/core@2.2.4';
+import { Plugin, PluginKey } from 'https://esm.sh/@tiptap/pm@2.2.4/state';
+import { Decoration, DecorationSet } from 'https://esm.sh/@tiptap/pm@2.2.4/view';
+
+import { escapeHtml } from './wen-utils.js';
+
+const lowlight = createLowlight(common);
+
+const GitHubAlerts = Extension.create({
+  name: 'githubAlerts',
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('githubAlerts'),
+        props: {
+          decorations(state) {
+            const decorations = [];
+            const { doc } = state;
+
+            doc.descendants((node, pos) => {
+              if (node.type.name === 'blockquote') {
+                const firstChild = node.firstChild;
+                
+                // Check if the blockquote starts with a paragraph
+                if (firstChild && firstChild.type.name === 'paragraph') {
+                  const text = firstChild.textContent;
+                  const match = text.match(/^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]/i);
+                  
+                  if (match) {
+                    const type = match[1].toLowerCase();
+                    
+                    // 1. Decorate the parent Blockquote wrapper
+                    decorations.push(
+                      Decoration.node(pos, pos + node.nodeSize, {
+                        class: `wen-github-alert wen-github-alert-${type}`
+                      })
+                    );
+                    
+                    // 2. Decorate the exact [!TYPE] text to look like a colored badge
+                    // (pos = blockquote, pos+1 = paragraph, pos+2 = start of text node)
+                    const startPos = pos + 2; 
+                    const endPos = startPos + match[0].length;
+                    
+                    decorations.push(
+                      Decoration.inline(startPos, endPos, {
+                        class: `wen-github-alert-badge wen-github-alert-badge-${type}`
+                      })
+                    );
+                  }
+                }
+              }
+            });
+            return DecorationSet.create(doc, decorations);
+          }
+        }
+      })
+    ];
+  }
+});
+
+const WenSmartBlocks = CodeBlockLowlight.extend({
+  addOptions() {
+    return { ...this.parent?.(), blockViews: {}, lowlight };
+  },
+  addNodeView() {
+    return ({ node, getPos, editor }) => {
+      const lang = node.attrs.language;
+      const ViewClass = this.options.blockViews[lang];
+      if (ViewClass) return new ViewClass(node, getPos, editor);
+
+      const dom = document.createElement('pre');
+      const contentDOM = document.createElement('code');
+      if (lang) contentDOM.className = `language-${lang}`;
+      dom.appendChild(contentDOM);
+      return { dom, contentDOM };
+    };
+  }
+});
+
+export class WenEditor {
+  constructor(options) {
+    this.container = options.element;
+    this.blockViews = options.blockViews || {};
+    this.useFrontmatter = options.useFrontmatter !== false;
+    this.useNativeComponents = options.useNativeComponents !== false;
+    // Safe by default: rich-render paths are sanitized and mermaid runs in 'strict' mode.
+    // Pass `unsafe: true` to opt out and render untrusted HTML/diagrams verbatim.
+    this.unsafe = options.unsafe === true;
+
+    this.wrapper = document.createElement('div');
+    this.wrapper.className = 'wen-editor-wrapper';
+    
+    this.toolbar = document.createElement('div');
+    this.toolbar.className = 'wen-toolbar';
+    
+    this.editorNode = document.createElement('div');
+    
+    this.wrapper.appendChild(this.toolbar);
+    this.wrapper.appendChild(this.editorNode);
+    this.container.appendChild(this.wrapper);
+
+    const processedMarkdown = this.importMarkdown(options.initialMarkdown || '');
+
+    this.editor = new Editor({
+      element: this.editorNode,
+      extensions: [
+        StarterKit.configure({ codeBlock: false }),
+        WenSmartBlocks.configure({ blockViews: this.blockViews }), 
+        GitHubAlerts,
+        Markdown,
+        Image,
+        Link.configure({ openOnClick: false }),
+        Table.configure({ resizable: true, HTMLAttributes: { class: 'wen-table' } }),
+        TableRow,
+        TableHeader,
+        TableCell,
+        TaskList,
+        TaskItem.configure({ nested: true }),
+      ],
+      content: processedMarkdown,
+      editorProps: { attributes: { class: 'wen-editor-root' } },
+      onTransaction: () => this.updateToolbarStates()
+    });
+
+    this.editor.wenEditorInstance = this;
+
+    this.buildToolbar();
+  }
+
+  importMarkdown(md) {
+    let processed = md;
+    if (this.useFrontmatter) {
+      processed = processed.replace(/^---\r?\n([\s\S]*?)\r?\n---\r?\n/, '```yaml\n$1\n```\n\n');
+    }
+    if (this.useNativeComponents) {
+      const tokens = processed.split(/(^```[\s\S]*?^```\r?\n?)/m);
+      for (let i = 0; i < tokens.length; i++) {
+        if (i % 2 === 0) {
+          let chunk = tokens[i];
+          
+          // THE FIX: Prepend a newline to ensure TipTap never merges adjacent components into a single broken code block
+          const openCloseRegex = /^[ \t]*<([a-zA-Z0-9-]+)[^>]*>[\s\S]*?<\/\1>[ \t]*/gm;
+          chunk = chunk.replace(openCloseRegex, (match) => '\n```component\n' + match.trim() + '\n```\n');
+          
+          const selfCloseRegex = /^[ \t]*<([a-zA-Z0-9-]+)[^>]*\/>[ \t]*/gm;
+          chunk = chunk.replace(selfCloseRegex, (match) => '\n```component\n' + match.trim() + '\n```\n');
+          
+          tokens[i] = chunk;
+        }
+      }
+      processed = tokens.join('');
+    }
+    return processed;
+  }
+
+  loadContent(md) {
+    // Run the text through our pre-processor to handle YAML and Components
+    const processed = this.importMarkdown(md);
+    // Replace the entire document safely
+    this.editor.commands.setContent(processed);
+  }
+  
+  exportMarkdown() {
+    let md = this.editor.storage.markdown.getMarkdown();
+    if (this.useFrontmatter) {
+      md = md.replace(/^```yaml\r?\n([\s\S]*?)\r?\n```\r?\n?/, '---\n$1\n---\n');
+    }
+    if (this.useNativeComponents) {
+      // THE FIX: Allow leading [ \t]* and trailing whitespace inside the block wrapper
+      const unwrapRegex = /```component\r?\n([ \t]*<(?:[a-zA-Z0-9-]+)[\s\S]*?>)[ \t]*\r?\n```\r?\n?/gm;
+      md = md.replace(unwrapRegex, '$1\n');
+    }
+    return md;
+  }
+
+  downloadMarkdown(filename = 'wen-document.md') {
+    const md = this.exportMarkdown();
+    const blob = new Blob([md], { type: 'text/markdown;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    
+    // Append to body, click it, and instantly clean it up
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }
+  
+  buildToolbar() {
+    // 3. Upgraded createBtn to support disabled states
+    const createBtn = (label, action, isActiveCheck = null, isDisabledCheck = null) => {
+      const btn = document.createElement('button');
+      btn.className = 'wen-toolbar-btn';
+      btn.innerHTML = label;
+      btn.addEventListener('click', () => { action(); this.editor.view.focus(); });
+      if (isActiveCheck) btn.isActiveCheck = isActiveCheck;
+      if (isDisabledCheck) btn.isDisabledCheck = isDisabledCheck;
+      this.toolbar.appendChild(btn);
+      return btn;
+    };
+
+    const addDivider = () => {
+      const div = document.createElement('div');
+      div.className = 'wen-toolbar-divider';
+      this.toolbar.appendChild(div);
+    };
+
+    createBtn('<b>B</b>', () => this.editor.chain().focus().toggleBold().run(), () => this.editor.isActive('bold'));
+    createBtn('<i>I</i>', () => this.editor.chain().focus().toggleItalic().run(), () => this.editor.isActive('italic'));
+    createBtn('<s>S</s>', () => this.editor.chain().focus().toggleStrike().run(), () => this.editor.isActive('strike'));
+    addDivider();
+    createBtn('¶ Text', () => this.editor.chain().focus().setParagraph().run(), () => this.editor.isActive('paragraph'));
+    createBtn('H1', () => this.editor.chain().focus().toggleHeading({ level: 1 }).run(), () => this.editor.isActive('heading', { level: 1 }));
+    createBtn('H2', () => this.editor.chain().focus().toggleHeading({ level: 2 }).run(), () => this.editor.isActive('heading', { level: 2 }));
+    createBtn('H3', () => this.editor.chain().focus().toggleHeading({ level: 3 }).run(), () => this.editor.isActive('heading', { level: 3 }));
+    createBtn('H4', () => this.editor.chain().focus().toggleHeading({ level: 4 }).run(), () => this.editor.isActive('heading', { level: 4 }));    
+    addDivider();
+    createBtn('• List', () => this.editor.chain().focus().toggleBulletList().run(), () => this.editor.isActive('bulletList'));
+    createBtn('1. List', () => this.editor.chain().focus().toggleOrderedList().run(), () => this.editor.isActive('orderedList'));
+    createBtn('☑️ Task', () => this.editor.chain().focus().toggleTaskList().run(), () => this.editor.isActive('taskList'));
+    createBtn('\" Quote', () => this.editor.chain().focus().toggleBlockquote().run(), () => this.editor.isActive('blockquote'));
+    createBtn('📢 Alert', () => {
+      this.editor.chain().focus().insertContent('<blockquote><p>[!NOTE]<br>Your message here...</p></blockquote>').run();
+    });
+    addDivider();
+
+    createBtn('🔗 Link', () => {
+      const previousUrl = this.editor.getAttributes('link').href;
+      this.showModal('Insert Link', 'URL', previousUrl, (url) => {
+        if (url === null) return; 
+        if (url === '') this.editor.chain().focus().extendMarkRange('link').unsetLink().run();
+        else this.editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+      });
+    }, () => this.editor.isActive('link'));
+
+    createBtn('🖼️ Image', () => {
+      const attrs = this.editor.getAttributes('image');
+      const previousUrl = attrs.src || '';
+      
+      this.showModal(previousUrl ? 'Edit Image' : 'Insert Image', 'Image URL', previousUrl, (url) => {
+        if (url) {
+          this.editor.chain().focus().setImage({ src: url }).run();
+        }
+      });
+    }, () => this.editor.isActive('image'));
+
+    addDivider();
+    
+    // 4. The Table Controls
+    createBtn('📊 Table', () => this.editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run());
+    createBtn('+ Row', () => this.editor.chain().focus().addRowAfter().run(), null, () => !this.editor.can().addRowAfter());
+    createBtn('+ Col', () => this.editor.chain().focus().addColumnAfter().run(), null, () => !this.editor.can().addColumnAfter());
+    createBtn('- Row', () => this.editor.chain().focus().deleteRow().run(), null, () => !this.editor.can().deleteRow());
+    createBtn('- Col', () => this.editor.chain().focus().deleteColumn().run(), null, () => !this.editor.can().deleteColumn());
+    createBtn('x Table', () => this.editor.chain().focus().deleteTable().run(), null, () => !this.editor.can().deleteTable());
+    
+    // THE NEW ADDITION: The Save Button
+    addDivider();
+    createBtn('💾 Save', () => {
+      // You could easily hook up a prompt here to ask for a filename if you wanted!
+      this.downloadMarkdown('wen-document.md');
+    });
+  }
+
+  updateToolbarStates() {
+    this.toolbar.querySelectorAll('.wen-toolbar-btn').forEach(btn => {
+      if (btn.isActiveCheck) {
+        if (btn.isActiveCheck()) btn.classList.add('is-active');
+        else btn.classList.remove('is-active');
+      }
+      // Check if the button should be disabled (e.g. table actions when not in a table)
+      if (btn.isDisabledCheck) {
+        btn.disabled = btn.isDisabledCheck();
+      }
+    });
+  }
+
+  showModal(title, inputPlaceholder, initialValue, callback) {
+    const overlay = document.createElement('div');
+    overlay.className = 'wen-modal-overlay';
+    overlay.innerHTML = `
+      <div class="wen-modal">
+        <strong>${escapeHtml(title)}</strong>
+        <input type="text" placeholder="${escapeHtml(inputPlaceholder)}" value="${escapeHtml(initialValue || '')}" />
+        <div class="wen-modal-actions">
+          <button class="wen-modal-cancel">Cancel</button>
+          <button class="wen-modal-submit">Save</button>
+        </div>
+      </div>
+    `;
+    document.body.appendChild(overlay);
+    const input = overlay.querySelector('input');
+    input.focus();
+
+    const close = (value) => { document.body.removeChild(overlay); callback(value); };
+    overlay.querySelector('.wen-modal-cancel').addEventListener('click', () => close(null));
+    overlay.querySelector('.wen-modal-submit').addEventListener('click', () => close(input.value));
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') close(input.value);
+      if (e.key === 'Escape') close(null);
+    });
+  }
+  
+  showRichModal(title, initialMarkdown, callback) {
+    const overlay = document.createElement('div');
+    overlay.className = 'wen-rich-modal-overlay';
+    overlay.innerHTML = `
+      <div class="wen-rich-modal">
+        <div class="wen-rich-modal-header">
+          <strong>Editing Content: &lt;${escapeHtml(title)}&gt;</strong>
+          <div>
+            <button class="wen-modal-cancel">Cancel</button>
+            <button class="wen-modal-submit">Save Changes</button>
+          </div>
+        </div>
+        <div class="wen-rich-modal-body" id="modal-editor-container"></div>
+      </div>
+    `;
+    document.body.appendChild(overlay);
+
+    // Spawn a recursive child WenEditor inside the modal!
+    const modalEditor = new WenEditor({
+      element: overlay.querySelector('#modal-editor-container'),
+      blockViews: this.blockViews, // Inherit all our rich UI blocks
+      useFrontmatter: false,       // Sub-components don't need YAML frontmatter
+      useNativeComponents: this.useNativeComponents,
+      unsafe: this.unsafe,         // Inherit the trust setting into recursive editors
+      initialMarkdown: initialMarkdown
+    });
+
+    const close = (save) => {
+      const finalMd = save ? modalEditor.exportMarkdown() : null;
+      modalEditor.editor.destroy(); // Clean up memory
+      document.body.removeChild(overlay);
+      if (save) callback(finalMd);
+    };
+
+    overlay.querySelector('.wen-modal-cancel').addEventListener('click', () => close(false));
+    overlay.querySelector('.wen-modal-submit').addEventListener('click', () => close(true));
+  }
+}

package/src/wen-mermaid.css

@@ -0,0 +1,50 @@
+.wen-mermaid-block {
+  border: 2px solid #0d9488;
+  border-radius: var(--wen-radius);
+  margin: 1.5rem 0;
+  background: var(--wen-bg);
+  box-sizing: border-box;
+}
+
+.wen-mermaid-block *, .wen-mermaid-block *::before, .wen-mermaid-block *::after {
+  box-sizing: border-box;
+}
+
+.wen-mermaid-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 2px solid #0d9488;
+  padding: 0.5rem 1rem;
+  background: #0d9488;
+  color: white;
+  border-top-left-radius: calc(var(--wen-radius) - 2px);
+  border-top-right-radius: calc(var(--wen-radius) - 2px);
+}
+
+.wen-mermaid-title { font-size: 0.85rem; font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; }
+.wen-mermaid-toggle-btn { background: var(--wen-bg); border: none; color: var(--wen-text-main); cursor: pointer; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: var(--wen-radius-sm); font-weight: 600; transition: background 0.15s; }
+.wen-mermaid-toggle-btn:hover { background: var(--wen-surface-hover); }
+
+/* THE FIX: Hard-lock the display states so they cannot both show at once */
+.wen-mermaid-view-visual, .wen-mermaid-view-raw { 
+  display: none !important; 
+  padding: 1rem; 
+}
+.wen-mermaid-view-visual.active, .wen-mermaid-view-raw.active { 
+  display: block !important; 
+}
+
+/* Ensure the SVG scales nicely and forces dark text */
+.wen-mermaid-view-visual { 
+  text-align: center; 
+  overflow-x: auto; 
+  background: var(--wen-surface); 
+  border-bottom-left-radius: var(--wen-radius); 
+  border-bottom-right-radius: var(--wen-radius);
+  color: #1f2937 !important; 
+}
+.wen-mermaid-view-visual svg { max-width: 100%; height: auto !important; color: #1f2937; }
+
+.wen-mermaid-raw-input { width: 100%; min-height: 250px; border: 1px solid var(--wen-border); border-radius: var(--wen-radius-sm); padding: 0.75rem; font-family: var(--wen-font-mono); font-size: 0.9rem; background: #1e1e1e; color: #d4d4d4; resize: vertical; outline: none; }
+.wen-mermaid-error { color: var(--wen-danger); font-family: var(--wen-font-mono); font-size: 0.85rem; text-align: left; background: #fef2f2; padding: 1rem; border-radius: var(--wen-radius-sm); border-left: 4px solid var(--wen-danger); white-space: pre-wrap; }

package/src/wen-mermaid.js

@@ -0,0 +1,125 @@
+import mermaid from 'https://esm.sh/mermaid@10.9.1';
+import { escapeHtml } from './wen-utils.js';
+
+// Initialize Mermaid with a neutral theme that works well inside the editor.
+// Default to 'strict' (no inline HTML / click handlers); re-initialized per render
+// to 'loose' only when the editor is in unsafe mode.
+mermaid.initialize({
+  startOnLoad: false,
+  theme: 'neutral',
+  securityLevel: 'strict'
+});
+
+export class WenMermaidView {
+  constructor(node, getPos, editor) {
+    this.node = node;
+    this.getPos = getPos;
+    this.editor = editor;
+    // Mermaid requires a strictly unique ID for every diagram it renders
+    this.id = 'mermaid-' + Math.random().toString(36).substr(2, 9);
+
+    this.dom = document.createElement('div');
+    this.dom.className = 'wen-mermaid-block';
+    this.dom.contentEditable = 'false';
+
+    this.dom.innerHTML = `
+      <div class="wen-mermaid-header">
+        <span class="wen-mermaid-title">🧜‍♀️ Mermaid Diagram</span>
+        <button class="wen-mermaid-toggle-btn" data-state="visual">Edit Chart</button>
+      </div>
+      <div class="wen-mermaid-view-visual active"></div>
+      <div class="wen-mermaid-view-raw"><textarea class="wen-mermaid-raw-input"></textarea></div>
+    `;
+
+    const toggleBtn = this.dom.querySelector('.wen-mermaid-toggle-btn');
+    const visualView = this.dom.querySelector('.wen-mermaid-view-visual');
+    const rawView = this.dom.querySelector('.wen-mermaid-view-raw');
+    const rawInput = this.dom.querySelector('.wen-mermaid-raw-input');
+
+    rawInput.value = this.node.textContent;
+    let isUpdatingFromUI = false;
+
+    const updateTipTapState = (newRawContent) => {
+      if (newRawContent === this.node.textContent) return;
+      if (typeof this.getPos === 'function') {
+        const tr = this.editor.state.tr;
+        const start = this.getPos() + 1;
+        const end = start + this.node.nodeSize - 2;
+        if (newRawContent) tr.replaceWith(start, end, this.editor.schema.text(newRawContent));
+        else tr.delete(start, end);
+        this.editor.view.dispatch(tr);
+      }
+    };
+
+    const renderVisualDiagram = async () => {
+      visualView.innerHTML = '';
+      const code = rawInput.value.trim();
+      
+      if (!code) {
+        visualView.innerHTML = `<div class="wen-mermaid-empty">Empty diagram</div>`;
+        return;
+      }
+
+      try {
+        // Respect the editor's trust setting: only loosen mermaid for unsafe mode.
+        const unsafe = this.editor.wenEditorInstance?.unsafe === true;
+        mermaid.initialize({ startOnLoad: false, theme: 'neutral', securityLevel: unsafe ? 'loose' : 'strict' });
+
+        // Parse and render the SVG asynchronously
+        const { svg } = await mermaid.render(this.id, code);
+        visualView.innerHTML = svg;
+      } catch (err) {
+        // If the syntax is invalid, show a safe error message instead of crashing
+        visualView.innerHTML = `<div class="wen-mermaid-error"><strong>Syntax Error:</strong><br/>${escapeHtml(err.message)}</div>`;
+        
+        // Mermaid occasionally leaves garbage DOM nodes behind on failure, clean them up
+        const garbage = document.getElementById(this.id);
+        if (garbage) garbage.remove();
+      }
+    };
+
+    toggleBtn.addEventListener('click', () => {
+      const isVisual = toggleBtn.getAttribute('data-state') === 'visual';
+      if (isVisual) {
+        visualView.classList.remove('active');
+        rawView.classList.add('active');
+        toggleBtn.setAttribute('data-state', 'raw');
+        toggleBtn.innerText = 'View Chart';
+      } else {
+        renderVisualDiagram();
+        rawView.classList.remove('active');
+        visualView.classList.add('active');
+        toggleBtn.setAttribute('data-state', 'visual');
+        toggleBtn.innerText = 'Edit Chart';
+      }
+    });
+
+    // When the raw textarea changes, update TipTap
+    rawInput.addEventListener('input', () => {
+      isUpdatingFromUI = true;
+      updateTipTapState(rawInput.value);
+      isUpdatingFromUI = false;
+    });
+    
+    // Initial Render
+    renderVisualDiagram();
+
+    // The TipTap Sync Hook
+    this.update = (updatedNode) => {
+      if (updatedNode.type.name !== 'codeBlock' || updatedNode.attrs.language !== 'mermaid') return false;
+      
+      if (this.node.textContent !== updatedNode.textContent) {
+        this.node = updatedNode;
+        rawInput.value = this.node.textContent;
+        
+        // If Monaco (or another external source) changed the text, re-render the visual
+        if (!isUpdatingFromUI) {
+          renderVisualDiagram();
+        }
+      }
+      return true;
+    };
+
+    this.stopEvent = () => true;
+  }
+}

package/src/wen-utils.js

@@ -0,0 +1,22 @@
+// Shared internal helpers for the ƿen editor.
+// Imported by the view classes; not part of the public API surface.
+
+import DOMPurify from 'https://esm.sh/dompurify@3.1.6';
+
+// Escape a string for safe interpolation into HTML text or double-quoted attributes.
+// This is baseline correctness (a stray `"` or `<` in a value must not break the DOM)
+// and is applied regardless of `unsafe` mode.
+export function escapeHtml(value) {
+  return String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+// Sanitize a rich-HTML fragment (e.g. marked output) before it is injected via innerHTML.
+// Only called on the safe-mode render paths; `unsafe: true` bypasses this entirely.
+export function sanitizeHtml(dirty) {
+  return DOMPurify.sanitize(dirty);
+}

package/src/wen-yaml.css

@@ -0,0 +1,104 @@
+/* Prevent width + padding horizontal blowouts */
+.wen-yaml-block *, .wen-yaml-block *::before, .wen-yaml-block *::after {
+  box-sizing: border-box;
+}
+
+.wen-yaml-block { border: 1px solid var(--wen-border); border-radius: var(--wen-radius); margin: 1.5rem 0; background: var(--wen-bg); }
+.wen-yaml-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--wen-border); padding: 0.5rem 1rem; background: var(--wen-surface); border-top-left-radius: calc(var(--wen-radius) - 1px); border-top-right-radius: calc(var(--wen-radius) - 1px); }
+.wen-yaml-title { font-size: 0.85rem; font-weight: 600; color: var(--wen-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
+.wen-yaml-toggle-btn { background: var(--wen-bg); border: 1px solid var(--wen-border); color: var(--wen-text-muted); cursor: pointer; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: var(--wen-radius-sm); }
+.wen-yaml-toggle-btn:hover { background: var(--wen-surface-hover); color: var(--wen-text-main); }
+
+/* Collapsible Container Logic */
+.wen-yaml-visual-container { position: relative; display: block; }
+.wen-yaml-view-visual { padding: 0.5rem !important; }
+.wen-yaml-view-raw, .wen-yaml-error-state { display: none; padding: 1rem; }
+.wen-yaml-view-raw.active, .wen-yaml-error-state.active { display: block; }
+.wen-yaml-visual-container.is-collapsed .wen-yaml-view-visual { max-height: 220px; overflow: hidden; }
+.wen-yaml-fade { display: none; }
+.wen-yaml-visual-container.is-collapsed .wen-yaml-fade { display: block; position: absolute; bottom: 33px; left: 0; right: 0; height: 60px; background: linear-gradient(transparent, var(--wen-bg)); pointer-events: none; z-index: 5; }
+.wen-yaml-expand-btn { display: none; width: 100%; background: var(--wen-surface); border: none; border-top: 1px solid var(--wen-border); padding: 0.5rem; color: var(--wen-text-muted); cursor: pointer; font-size: 0.8rem; text-align: center; font-weight: 600; transition: background 0.15s; border-bottom-left-radius: calc(var(--wen-radius) - 1px); border-bottom-right-radius: calc(var(--wen-radius) - 1px); }
+.wen-yaml-expand-btn:hover { color: var(--wen-text-main); background: var(--wen-border); }
+.wen-yaml-visual-container.needs-collapse .wen-yaml-expand-btn { display: block; }
+
+.wen-yaml-raw-input { width: 100%; min-height: 150px; border: 1px solid var(--wen-border); border-radius: var(--wen-radius-sm); padding: 0.75rem; font-family: var(--wen-font-mono); font-size: 0.9rem; color: var(--wen-text-main); background: var(--wen-surface); resize: vertical; outline: none; }
+.wen-yaml-error-state { color: var(--wen-danger); background: #fef2f2; border-top: 1px solid #fecaca; font-size: 0.9rem; }
+
+/* Hierarchical Vertical Layout */
+.wen-type-object, .wen-type-array { display: flex; flex-direction: column; width: 100%; background: rgba(0, 0, 0, 0.02); border-radius: var(--wen-radius-sm); padding: 0.5rem; border: 1px solid rgba(0,0,0,0.05); }
+.wen-row, .wen-array-item { display: flex; flex-direction: column; margin-bottom: 0.5rem; transition: background 0.15s ease; border-radius: var(--wen-radius-sm); }
+.wen-row-top { display: flex; align-items: flex-start; width: 100%; padding: 0.2rem; }
+.wen-row:hover > .wen-row-top, .wen-array-item:hover > .wen-row-top { background: var(--wen-surface); border-radius: var(--wen-radius-sm); }
+
+/* Precise Typography Alignment */
+.wen-key-wrap { 
+  display: flex; 
+  align-items: baseline; /* Aligns the input text and colon perfectly on the bottom edge */
+  width: 140px; 
+  flex-shrink: 0; 
+  padding: 0; /* Strip any old wrap padding */
+}
+
+/* Force identical box models for inputs and textareas */
+.wen-key, .wen-val { 
+  padding: 0; 
+  margin: 0;
+  font-size: 0.9rem; 
+  font-family: var(--wen-font-sans);
+  line-height: 1.5;
+  border: none; 
+  background: transparent; 
+  outline: none; 
+}
+
+.wen-key { 
+  width: 100%; 
+  font-weight: 600; 
+  color: var(--wen-text-muted); 
+}
+
+.wen-val { 
+  flex-grow: 1; 
+  color: var(--wen-text-main); 
+  resize: none; 
+}
+
+.wen-colon { 
+  margin: 0 0.5rem 0 0; 
+  padding: 0;
+  color: var(--wen-text-muted); 
+  font-weight: bold; 
+  font-size: 0.9rem;
+  line-height: 1.5;
+}
+
+/* Italic Placeholders */
+.wen-key::placeholder, 
+.wen-val::placeholder {
+  font-style: italic;
+  opacity: 0.6;
+  font-weight: normal;
+}
+
+.wen-key:focus { color: var(--wen-text-main); }
+
+/* Primitives sit on the same line, complex drops below */
+.wen-val-wrap { flex-grow: 1; min-width: 0; display: flex; align-items: flex-start; }
+.wen-complex-wrap { padding-left: 1rem; width: 100%; margin-top: 0.25rem; }
+.wen-type-primitive { display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; }
+
+/* The Action Buttons */
+.wen-type-controls { display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.2s; }
+.wen-row:hover .wen-type-controls, .wen-array-item:hover .wen-type-controls { opacity: 1; }
+.wen-type-controls button { background: var(--wen-bg); border: 1px solid var(--wen-border); border-radius: var(--wen-radius-sm); cursor: pointer; padding: 0.2rem 0.4rem; font-size: 0.8rem; color: var(--wen-text-muted); }
+.wen-type-controls button:hover { background: var(--wen-surface-hover); color: var(--wen-text-main); }
+
+.wen-bullet { color: var(--wen-text-muted); font-weight: bold; padding-top: 0.2rem; width: 24px; text-align: center; }
+
+/* Refined Add/Delete UI */
+.wen-btn-delete { background: transparent; border: none; color: var(--wen-text-muted); font-size: 1.25rem; cursor: pointer; opacity: 0; padding: 0 0.5rem; margin-left: auto; }
+.wen-row:hover > .wen-row-top > .wen-btn-delete, .wen-array-item:hover > .wen-row-top > .wen-btn-delete { opacity: 1; }
+.wen-btn-delete:hover { color: var(--wen-danger); }
+
+.wen-btn-add { background: transparent; border: 1px dashed var(--wen-border); color: var(--wen-text-muted); cursor: pointer; text-align: left; font-weight: 500; padding: 0.4rem 0.75rem; font-family: var(--wen-font-sans); transition: all 0.15s ease; border-radius: var(--wen-radius-sm); font-size: 0.85rem; margin-top: 0.25rem; width: 100%; }
+.wen-btn-add:hover { color: var(--wen-text-main); background: var(--wen-surface); border-color: #cbd5e1; }