@cubud/wen 1.0.0

package/dist/wen-full.js

@@ -0,0 +1,1007 @@
+// src/wen-core.js
+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";
+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";
+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";
+
+// src/wen-utils.js
+import DOMPurify from "https://esm.sh/dompurify@3.1.6";
+function escapeHtml(value) {
+  return String(value ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function sanitizeHtml(dirty) {
+  return DOMPurify.sanitize(dirty);
+}
+
+// src/wen-core.js
+var lowlight = createLowlight(common);
+var 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;
+                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();
+                    decorations.push(
+                      Decoration.node(pos, pos + node.nodeSize, {
+                        class: `wen-github-alert wen-github-alert-${type}`
+                      })
+                    );
+                    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);
+          }
+        }
+      })
+    ];
+  }
+});
+var 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 };
+    };
+  }
+});
+var WenEditor = class _WenEditor {
+  constructor(options) {
+    this.container = options.element;
+    this.blockViews = options.blockViews || {};
+    this.useFrontmatter = options.useFrontmatter !== false;
+    this.useNativeComponents = options.useNativeComponents !== false;
+    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];
+          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) {
+    const processed = this.importMarkdown(md);
+    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) {
+      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;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }
+  buildToolbar() {
+    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("\xB6 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("\u2022 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("\u2611\uFE0F Task", () => this.editor.chain().focus().toggleTaskList().run(), () => this.editor.isActive("taskList"));
+    createBtn('" Quote', () => this.editor.chain().focus().toggleBlockquote().run(), () => this.editor.isActive("blockquote"));
+    createBtn("\u{1F4E2} Alert", () => {
+      this.editor.chain().focus().insertContent("<blockquote><p>[!NOTE]<br>Your message here...</p></blockquote>").run();
+    });
+    addDivider();
+    createBtn("\u{1F517} 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("\u{1F5BC}\uFE0F 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();
+    createBtn("\u{1F4CA} 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());
+    addDivider();
+    createBtn("\u{1F4BE} Save", () => {
+      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");
+      }
+      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);
+    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
+    });
+    const close = (save) => {
+      const finalMd = save ? modalEditor.exportMarkdown() : null;
+      modalEditor.editor.destroy();
+      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));
+  }
+};
+
+// src/wen-yaml.js
+import yaml from "https://esm.sh/js-yaml@4.1.0";
+var WenYamlView = class {
+  constructor(node, getPos, editor) {
+    this.node = node;
+    this.getPos = getPos;
+    this.editor = editor;
+    this.dom = document.createElement("div");
+    this.dom.className = "wen-yaml-block";
+    this.dom.contentEditable = "false";
+    this.dom.innerHTML = `
+      <div class="wen-yaml-header">
+        <span class="wen-yaml-title">\u{1F5C2}\uFE0F Properties</span>
+        <button class="wen-yaml-toggle-btn" data-state="visual">View Raw</button>
+      </div>
+      <div class="wen-yaml-visual-container">
+        <div class="wen-yaml-view-visual active"></div>
+        <div class="wen-yaml-fade"></div>
+        <button class="wen-yaml-expand-btn">\u25BC Show More</button>
+      </div>
+      <div class="wen-yaml-view-raw"><textarea class="wen-yaml-raw-input"></textarea></div>
+      <div class="wen-yaml-error-state hidden"><span class="wen-yaml-error-msg"></span></div>
+    `;
+    const toggleBtn = this.dom.querySelector(".wen-yaml-toggle-btn");
+    const visualContainer = this.dom.querySelector(".wen-yaml-visual-container");
+    const visualView = this.dom.querySelector(".wen-yaml-view-visual");
+    const expandBtn = this.dom.querySelector(".wen-yaml-expand-btn");
+    const rawView = this.dom.querySelector(".wen-yaml-view-raw");
+    const rawInput = this.dom.querySelector(".wen-yaml-raw-input");
+    const errorState = this.dom.querySelector(".wen-yaml-error-state");
+    const errorMsg = this.dom.querySelector(".wen-yaml-error-msg");
+    rawInput.value = this.node.textContent;
+    let isUpdatingFromUI = false;
+    let isExpanded = false;
+    const checkHeight = () => {
+      if (visualView.scrollHeight > 220) {
+        visualContainer.classList.add("needs-collapse");
+        visualContainer.classList.toggle("is-collapsed", !isExpanded);
+      } else {
+        visualContainer.classList.remove("needs-collapse", "is-collapsed");
+      }
+    };
+    expandBtn.addEventListener("click", () => {
+      isExpanded = !isExpanded;
+      visualContainer.classList.toggle("is-collapsed", !isExpanded);
+      expandBtn.innerText = isExpanded ? "\u25B2 Show Less" : "\u25BC Show More";
+    });
+    const updateTipTapState = (newRawYaml) => {
+      if (newRawYaml === 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 (newRawYaml) tr.replaceWith(start, end, this.editor.schema.text(newRawYaml));
+        else tr.delete(start, end);
+        this.editor.view.dispatch(tr);
+      }
+    };
+    const castValue = (str) => {
+      if (str === "true") return true;
+      if (str === "false") return false;
+      if (str === "null") return null;
+      if (!isNaN(str) && str.trim() !== "") return Number(str);
+      return str;
+    };
+    const scrapeNode = (container) => {
+      if (container.classList.contains("wen-type-object")) {
+        const obj = {};
+        container.querySelectorAll(":scope > .wen-row-list > .wen-row").forEach((row) => {
+          const k = row.querySelector(":scope > .wen-row-top > .wen-key-wrap > .wen-key").value.trim();
+          const valContainer = row.querySelector(":scope > .wen-row-top > .wen-val-wrap > div") || row.querySelector(":scope > .wen-complex-wrap > div");
+          if (k && valContainer) obj[k] = scrapeNode(valContainer);
+        });
+        return obj;
+      }
+      if (container.classList.contains("wen-type-array")) {
+        const arr = [];
+        container.querySelectorAll(":scope > .wen-array-list > .wen-array-item").forEach((item) => {
+          const valContainer = item.querySelector(":scope > .wen-row-top > .wen-val-wrap > div") || item.querySelector(":scope > .wen-complex-wrap > div");
+          if (valContainer) arr.push(scrapeNode(valContainer));
+        });
+        return arr;
+      }
+      if (container.classList.contains("wen-type-primitive")) {
+        return castValue(container.querySelector(".wen-val").value);
+      }
+      return "";
+    };
+    const sync = () => {
+      const newData = scrapeNode(visualView.firstElementChild);
+      const newYaml = Object.keys(newData).length ? yaml.dump(newData) : "";
+      rawInput.value = newYaml;
+      isUpdatingFromUI = true;
+      updateTipTapState(newYaml);
+      isUpdatingFromUI = false;
+      checkHeight();
+    };
+    const buildUI = (data) => {
+      const createPrimitive = (val) => {
+        const wrapper = document.createElement("div");
+        wrapper.className = "wen-type-primitive";
+        wrapper.innerHTML = `
+          <textarea class="wen-val" rows="1" placeholder="Empty value...">${escapeHtml(val !== null && val !== void 0 ? val : "")}</textarea>
+          <div class="wen-type-controls">
+            <button class="wen-make-obj" title="Add Section">\u{1F4C2}</button>
+            <button class="wen-make-arr" title="Add List">\u{1F4CB}</button>
+          </div>
+        `;
+        const textarea = wrapper.querySelector(".wen-val");
+        const resize = () => {
+          textarea.style.height = "auto";
+          textarea.style.height = textarea.scrollHeight + "px";
+        };
+        textarea.addEventListener("input", () => {
+          resize();
+          sync();
+        });
+        setTimeout(resize, 0);
+        const handleComplexSwap = (newElement) => {
+          const row = wrapper.closest(".wen-row") || wrapper.closest(".wen-array-item");
+          if (row) {
+            row.classList.add("has-complex");
+            row.querySelector(".wen-complex-wrap").appendChild(newElement);
+            wrapper.remove();
+          } else {
+            wrapper.replaceWith(newElement);
+          }
+          sync();
+        };
+        wrapper.querySelector(".wen-make-obj").addEventListener("click", () => handleComplexSwap(createObject({ "": "" })));
+        wrapper.querySelector(".wen-make-arr").addEventListener("click", () => handleComplexSwap(createArray([""])));
+        return wrapper;
+      };
+      const createArray = (arr) => {
+        const wrapper = document.createElement("div");
+        wrapper.className = "wen-type-array";
+        const list = document.createElement("div");
+        list.className = "wen-array-list";
+        const addItem = (val) => {
+          const isComplex = typeof val === "object" && val !== null;
+          const item = document.createElement("div");
+          item.className = `wen-array-item ${isComplex ? "has-complex" : ""}`;
+          item.innerHTML = `
+            <div class="wen-row-top">
+              <span class="wen-bullet">-</span>
+              <div class="wen-val-wrap"></div>
+              <button class="wen-btn-delete" title="Remove Item">\xD7</button>
+            </div>
+            <div class="wen-complex-wrap"></div>
+          `;
+          const targetWrap = isComplex ? item.querySelector(".wen-complex-wrap") : item.querySelector(".wen-val-wrap");
+          targetWrap.appendChild(isComplex ? Array.isArray(val) ? createArray(val) : createObject(val) : createPrimitive(val));
+          item.querySelector(".wen-btn-delete").addEventListener("click", () => {
+            item.remove();
+            sync();
+          });
+          list.appendChild(item);
+        };
+        arr.forEach(addItem);
+        const addBtn = document.createElement("button");
+        addBtn.className = "wen-btn-add";
+        addBtn.innerText = "+ Add list item";
+        addBtn.addEventListener("click", () => {
+          addItem("");
+          sync();
+        });
+        wrapper.appendChild(list);
+        wrapper.appendChild(addBtn);
+        return wrapper;
+      };
+      const createObject = (obj) => {
+        const wrapper = document.createElement("div");
+        wrapper.className = "wen-type-object";
+        const rowList = document.createElement("div");
+        rowList.className = "wen-row-list";
+        const addRow = (k, v) => {
+          const isComplex = typeof v === "object" && v !== null;
+          const row = document.createElement("div");
+          row.className = `wen-row ${isComplex ? "has-complex" : ""}`;
+          row.innerHTML = `
+            <div class="wen-row-top">
+              <div class="wen-key-wrap"><input type="text" class="wen-key" value="${escapeHtml(k)}" placeholder="Label..." /><span class="wen-colon">:</span></div>
+              <div class="wen-val-wrap"></div>
+              <button class="wen-btn-delete" title="Remove Property">\xD7</button>
+            </div>
+            <div class="wen-complex-wrap"></div>
+          `;
+          const targetWrap = isComplex ? row.querySelector(".wen-complex-wrap") : row.querySelector(".wen-val-wrap");
+          targetWrap.appendChild(isComplex ? Array.isArray(v) ? createArray(v) : createObject(v) : createPrimitive(v));
+          row.querySelector(".wen-key").addEventListener("input", sync);
+          row.querySelector(".wen-btn-delete").addEventListener("click", () => {
+            row.remove();
+            sync();
+          });
+          rowList.appendChild(row);
+        };
+        Object.keys(obj).forEach((k) => addRow(k, obj[k]));
+        const addBtn = document.createElement("button");
+        addBtn.className = "wen-btn-add";
+        addBtn.innerText = "+ Add property";
+        addBtn.addEventListener("click", () => {
+          addRow("", "");
+          sync();
+        });
+        wrapper.appendChild(rowList);
+        wrapper.appendChild(addBtn);
+        return wrapper;
+      };
+      return createObject(data);
+    };
+    const renderVisualGrid = () => {
+      visualView.innerHTML = "";
+      let dataObj = {};
+      try {
+        dataObj = yaml.load(rawInput.value) || {};
+        errorState.classList.remove("active");
+      } catch (err) {
+        errorMsg.innerText = "YAML Error: " + err.message;
+        errorState.classList.add("active");
+        return;
+      }
+      if (typeof dataObj !== "object" || dataObj === null || Array.isArray(dataObj)) dataObj = { "": dataObj };
+      visualView.appendChild(buildUI(dataObj));
+      setTimeout(checkHeight, 0);
+    };
+    toggleBtn.addEventListener("click", () => {
+      const isVisual = toggleBtn.getAttribute("data-state") === "visual";
+      if (isVisual) {
+        visualContainer.style.display = "none";
+        rawView.classList.add("active");
+        toggleBtn.setAttribute("data-state", "raw");
+        toggleBtn.innerText = "View UI";
+      } else {
+        renderVisualGrid();
+        if (!errorState.classList.contains("active")) {
+          rawView.classList.remove("active");
+          visualContainer.style.display = "block";
+          toggleBtn.setAttribute("data-state", "visual");
+          toggleBtn.innerText = "View Raw";
+        }
+      }
+    });
+    rawInput.addEventListener("input", () => {
+      updateTipTapState(rawInput.value);
+    });
+    renderVisualGrid();
+    this.update = (updatedNode) => {
+      if (updatedNode.type.name !== "codeBlock" || updatedNode.attrs.language !== "yaml") return false;
+      if (this.node.textContent !== updatedNode.textContent) {
+        this.node = updatedNode;
+        rawInput.value = this.node.textContent;
+        if (!isUpdatingFromUI) {
+          renderVisualGrid();
+        }
+      }
+      return true;
+    };
+    this.stopEvent = () => true;
+  }
+};
+
+// src/wen-component.js
+import { marked } from "https://esm.sh/marked@12.0.1";
+var WenComponentView = class {
+  constructor(node, getPos, editor) {
+    this.node = node;
+    this.getPos = getPos;
+    this.editor = editor;
+    this.dom = document.createElement("div");
+    this.dom.className = "wen-component-block";
+    this.dom.contentEditable = "false";
+    this.dom.innerHTML = `
+      <div class="wen-component-header">
+        <span class="wen-component-title">\u{1F9E9} Component Wireframe</span>
+        <button class="wen-component-toggle-btn" data-state="visual">View Raw XML</button>
+      </div>
+      <div class="wen-component-view-visual active"></div>
+      <div class="wen-component-view-raw"><textarea class="wen-component-raw-input"></textarea></div>
+    `;
+    const toggleBtn = this.dom.querySelector(".wen-component-toggle-btn");
+    const visualView = this.dom.querySelector(".wen-component-view-visual");
+    const rawView = this.dom.querySelector(".wen-component-view-raw");
+    const rawInput = this.dom.querySelector(".wen-component-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 renderVisualWireframe = () => {
+      visualView.innerHTML = "";
+      const unsafe = this.editor.wenEditorInstance?.unsafe === true;
+      let rawCode = rawInput.value.trim();
+      rawCode = rawCode.replace(/^```[a-zA-Z0-9-]*\r?\n/, "").replace(/\r?\n```$/, "").trim();
+      const componentRegex = /^<([a-zA-Z0-9-]+)\s*([^>]*?)(?:(?:>([\s\S]*)<\/\1>)|(?:\/?>))$/;
+      const match = rawCode.match(componentRegex);
+      if (!match) {
+        visualView.innerHTML = `<div class="wen-component-error">Syntax Error: Cannot parse component structure.</div>`;
+        return;
+      }
+      let currentTagName = match[1];
+      let attributesStr = match[2].trim();
+      let currentInner = match[3];
+      let isSelfClosing = currentInner === void 0 && rawCode.endsWith("/>");
+      let currentAttributes = [];
+      const attrRegex = /([a-zA-Z0-9_]+)=(?:'([^']*)'|"([^"]*)"|\{([^}]*)\})/g;
+      let attrMatch;
+      while ((attrMatch = attrRegex.exec(attributesStr)) !== null) {
+        currentAttributes.push({ name: attrMatch[1], value: attrMatch[2] || attrMatch[3] || attrMatch[4] || "" });
+      }
+      const syncState = () => {
+        const attrsStr = currentAttributes.map((a) => `${a.name}="${a.value}"`).join(" ");
+        const space = attrsStr ? " " + attrsStr : "";
+        let newRaw = isSelfClosing ? `<${currentTagName}${space} />` : `<${currentTagName}${space}>
+${currentInner}
+</${currentTagName}>`;
+        rawInput.value = newRaw;
+        isUpdatingFromUI = true;
+        updateTipTapState(newRaw);
+        isUpdatingFromUI = false;
+      };
+      const wireframe = document.createElement("div");
+      wireframe.className = "wen-wireframe";
+      const header = document.createElement("div");
+      header.className = "wen-wireframe-header";
+      header.innerHTML = `<strong>${currentTagName}</strong> ${isSelfClosing ? "<em>(Self-Closing)</em>" : ""}`;
+      wireframe.appendChild(header);
+      if (currentAttributes.length > 0) {
+        const propsContainer = document.createElement("div");
+        propsContainer.className = "wen-wireframe-props";
+        currentAttributes.forEach((attr, idx) => {
+          const prop = document.createElement("span");
+          prop.className = "wen-wireframe-prop";
+          prop.innerHTML = `<span class="wen-prop-key">${attr.name}</span> = `;
+          const input = document.createElement("input");
+          input.type = "text";
+          input.className = "wen-prop-val-input";
+          input.value = attr.value;
+          input.addEventListener("input", (e) => {
+            currentAttributes[idx].value = e.target.value;
+            syncState();
+          });
+          prop.appendChild(input);
+          propsContainer.appendChild(prop);
+        });
+        wireframe.appendChild(propsContainer);
+      }
+      if (!isSelfClosing) {
+        const contentContainer = document.createElement("div");
+        contentContainer.className = "wen-wireframe-content";
+        let previewHTML = "<em>Empty content</em>";
+        if ((currentInner || "").trim()) {
+          try {
+            const doc = new DOMParser().parseFromString(currentInner, "text/html");
+            const parseNode = (n) => {
+              if (n.nodeType === 1) {
+                const name = n.localName;
+                if (n.hasChildNodes() && n.childNodes.length > 0) {
+                  return `<div class="wen-preview-tag">&lt;${name}&gt;</div>
+${parseChildren(n.childNodes)}
+<div class="wen-preview-tag">&lt;/${name}&gt;</div>
+`;
+                } else {
+                  return `<div class="wen-preview-tag">&lt;${name}/&gt;</div>
+`;
+                }
+              } else if (n.nodeType === 3) {
+                const text = n.textContent.replace(/^ +/gm, "");
+                if (!text.trim()) return "";
+                return `<div class="wen-preview-md">${marked.parse(text)}</div>`;
+              }
+              return "";
+            };
+            const parseChildren = (children) => {
+              let raw = "";
+              for (let i = 0; i < children.length; i++) {
+                raw += parseNode(children[i]);
+              }
+              return raw;
+            };
+            const parsed = parseChildren(doc.body.childNodes);
+            if (parsed.trim()) previewHTML = parsed;
+          } catch (e) {
+            previewHTML = "<em>Preview unavailable</em>";
+          }
+        }
+        const safePreview = unsafe ? previewHTML : sanitizeHtml(previewHTML);
+        contentContainer.innerHTML = `
+          <div class="wen-wireframe-preview-box">
+            <div class="wen-wireframe-preview">${safePreview}</div>
+          </div>
+          <button class="wen-wireframe-edit-btn">\u270F\uFE0F Edit in WYSIWYG</button>
+        `;
+        const outdent = (str) => {
+          if (!str) return "";
+          const lines = str.split("\n");
+          let minIndent = Infinity;
+          lines.forEach((line) => {
+            if (line.trim().length > 0) {
+              const match2 = line.match(/^[ \t]*/);
+              if (match2) {
+                const indent = match2[0].length;
+                if (indent < minIndent) minIndent = indent;
+              }
+            }
+          });
+          if (minIndent === Infinity || minIndent === 0) return str;
+          return lines.map((line) => line.trim().length === 0 ? line : line.substring(minIndent)).join("\n");
+        };
+        contentContainer.querySelector(".wen-wireframe-edit-btn").addEventListener("click", () => {
+          const cleanMarkdown = outdent(currentInner || "");
+          this.editor.wenEditorInstance.showRichModal(currentTagName, cleanMarkdown, (newMd) => {
+            currentInner = "\n" + newMd + "\n";
+            syncState();
+            renderVisualWireframe();
+          });
+        });
+        wireframe.appendChild(contentContainer);
+      }
+      visualView.appendChild(wireframe);
+    };
+    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 UI";
+      } else {
+        renderVisualWireframe();
+        rawView.classList.remove("active");
+        visualView.classList.add("active");
+        toggleBtn.setAttribute("data-state", "visual");
+        toggleBtn.innerText = "View Raw XML";
+      }
+    });
+    rawInput.addEventListener("input", () => {
+      isUpdatingFromUI = true;
+      updateTipTapState(rawInput.value);
+      isUpdatingFromUI = false;
+    });
+    renderVisualWireframe();
+    this.update = (updatedNode) => {
+      if (updatedNode.type.name !== "codeBlock" || !["xml", "component", "jsx"].includes(updatedNode.attrs.language)) return false;
+      if (this.node.textContent !== updatedNode.textContent) {
+        this.node = updatedNode;
+        rawInput.value = this.node.textContent;
+        if (!isUpdatingFromUI) renderVisualWireframe();
+      }
+      return true;
+    };
+    this.stopEvent = () => true;
+  }
+};
+
+// src/wen-mermaid.js
+import mermaid from "https://esm.sh/mermaid@10.9.1";
+mermaid.initialize({
+  startOnLoad: false,
+  theme: "neutral",
+  securityLevel: "strict"
+});
+var WenMermaidView = class {
+  constructor(node, getPos, editor) {
+    this.node = node;
+    this.getPos = getPos;
+    this.editor = editor;
+    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">\u{1F9DC}\u200D\u2640\uFE0F 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 {
+        const unsafe = this.editor.wenEditorInstance?.unsafe === true;
+        mermaid.initialize({ startOnLoad: false, theme: "neutral", securityLevel: unsafe ? "loose" : "strict" });
+        const { svg } = await mermaid.render(this.id, code);
+        visualView.innerHTML = svg;
+      } catch (err) {
+        visualView.innerHTML = `<div class="wen-mermaid-error"><strong>Syntax Error:</strong><br/>${escapeHtml(err.message)}</div>`;
+        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";
+      }
+    });
+    rawInput.addEventListener("input", () => {
+      isUpdatingFromUI = true;
+      updateTipTapState(rawInput.value);
+      isUpdatingFromUI = false;
+    });
+    renderVisualDiagram();
+    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 (!isUpdatingFromUI) {
+          renderVisualDiagram();
+        }
+      }
+      return true;
+    };
+    this.stopEvent = () => true;
+  }
+};
+
+// src/wen-chart.js
+import frappe from "https://esm.sh/frappe-charts@1.6.2";
+var Chart = frappe.Chart || frappe;
+var WenChartView = class {
+  constructor(node, getPos, editor) {
+    this.node = node;
+    this.getPos = getPos;
+    this.editor = editor;
+    this.dom = document.createElement("div");
+    this.dom.className = "wen-chart-block";
+    this.dom.contentEditable = "false";
+    this.dom.innerHTML = `
+      <div class="wen-chart-header">
+        <span class="wen-chart-title">\u{1F4CA} Frappe Chart</span>
+        <button class="wen-chart-toggle-btn" data-state="visual">Edit Data</button>
+      </div>
+      <div class="wen-chart-view-visual active">
+        <div class="frappe-container"></div>
+      </div>
+      <div class="wen-chart-view-raw"><textarea class="wen-chart-raw-input"></textarea></div>
+    `;
+    const toggleBtn = this.dom.querySelector(".wen-chart-toggle-btn");
+    const visualView = this.dom.querySelector(".wen-chart-view-visual");
+    const chartContainer = this.dom.querySelector(".frappe-container");
+    const rawView = this.dom.querySelector(".wen-chart-view-raw");
+    const rawInput = this.dom.querySelector(".wen-chart-raw-input");
+    rawInput.value = this.node.textContent;
+    let isUpdatingFromUI = false;
+    let chartInstance = null;
+    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 parseMicroFormat = (text) => {
+      const lines = text.trim().split("\n");
+      let type = "bar";
+      let title = "";
+      let dataStartIndex = 0;
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i].trim();
+        if (line === "---") {
+          dataStartIndex = i + 1;
+          break;
+        }
+        if (line.toLowerCase().startsWith("type:")) type = line.split(":")[1].trim();
+        if (line.toLowerCase().startsWith("title:")) title = line.split(":")[1].trim();
+      }
+      if (dataStartIndex === 0) dataStartIndex = 0;
+      const headers = lines[dataStartIndex].split(",").map((s) => s.trim());
+      const labels = [];
+      const datasets = headers.slice(1).map((name) => ({ name, values: [] }));
+      for (let i = dataStartIndex + 1; i < lines.length; i++) {
+        if (!lines[i].trim()) continue;
+        const cols = lines[i].split(",").map((s) => s.trim());
+        labels.push(cols[0]);
+        cols.slice(1).forEach((val, idx) => {
+          if (datasets[idx]) datasets[idx].values.push(Number(val) || 0);
+        });
+      }
+      return { title, type, data: { labels, datasets } };
+    };
+    const renderChart = () => {
+      try {
+        const config = parseMicroFormat(rawInput.value);
+        chartContainer.innerHTML = "";
+        chartInstance = new Chart(chartContainer, {
+          title: config.title,
+          data: config.data,
+          type: config.type,
+          height: 250,
+          colors: ["#8250df", "#0d9488", "#cf222e", "#bf8700"]
+          // Default categorical palette
+        });
+        let errorMsg = visualView.querySelector(".wen-chart-error");
+        if (errorMsg) errorMsg.remove();
+        chartContainer.style.display = "block";
+      } catch (err) {
+        chartContainer.style.display = "none";
+        let errorMsg = visualView.querySelector(".wen-chart-error");
+        if (!errorMsg) {
+          errorMsg = document.createElement("div");
+          errorMsg.className = "wen-chart-error";
+          visualView.appendChild(errorMsg);
+        }
+        errorMsg.innerHTML = `<strong>Data Parsing Error:</strong><br/>Ensure you have a header row and valid numbers.`;
+      }
+    };
+    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 {
+        renderChart();
+        rawView.classList.remove("active");
+        visualView.classList.add("active");
+        toggleBtn.setAttribute("data-state", "visual");
+        toggleBtn.innerText = "Edit Data";
+      }
+    });
+    rawInput.addEventListener("input", () => {
+      isUpdatingFromUI = true;
+      updateTipTapState(rawInput.value);
+      isUpdatingFromUI = false;
+    });
+    renderChart();
+    this.update = (updatedNode) => {
+      if (updatedNode.type.name !== "codeBlock" || updatedNode.attrs.language !== "chart") return false;
+      if (this.node.textContent !== updatedNode.textContent) {
+        this.node = updatedNode;
+        rawInput.value = this.node.textContent;
+        if (!isUpdatingFromUI) renderChart();
+      }
+      return true;
+    };
+    this.stopEvent = () => true;
+  }
+};
+export {
+  WenChartView,
+  WenComponentView,
+  WenEditor,
+  WenMermaidView,
+  WenYamlView
+};