@muibook/components 11.0.1 → 12.0.0

package/dist/esm/components/mui-markdown/index.js

@@ -1,111 +1,306 @@
-import { marked as m } from "marked";
-const u = (n) => n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;").replace(/'/g, "&#39;"), p = (n) => {
-  const i = n.split(`
-`);
-  let d = !1, t = !1;
-  const o = [];
-  for (const e of i) {
+import { marked as $ } from "../../node_modules/marked/lib/marked.esm/index.js";
+const u = (d) => d.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;").replace(/'/g, "&#39;"), w = (d) => {
+  const c = d.split(`
+`), a = [], i = [], o = (e, s, r) => {
+    i.push(s), a.push({ type: e, closeTag: r });
+  }, t = (e) => {
+    if (a.length !== 0) {
+      if (!e) {
+        const s = a.pop();
+        s && i.push(s.closeTag);
+        return;
+      }
+      for (let s = a.length - 1; s >= 0; s -= 1)
+        if (a[s].type === e) {
+          const [r] = a.splice(s, 1);
+          r && i.push(r.closeTag);
+          return;
+        }
+    }
+  };
+  for (const e of c) {
+    const s = e.match(/^--\s*table-columns-([a-z0-9-]+)\s*--$/i);
+    if (s) {
+      i.push(`<div data-md-table-columns="${s[1].replace(/-/g, " ")}"></div>`);
+      continue;
+    }
+    const r = e.match(/^--\s*vstack-space-(\d{3})-start\s*--$/i);
+    if (r) {
+      o(
+        "vstack",
+        `<mui-v-stack space="var(--space-${r[1]})">`,
+        "</mui-v-stack>"
+      );
+      continue;
+    }
+    if (e.match(/^--\s*vstack-end\s*--$/i)) {
+      t("vstack");
+      continue;
+    }
+    const l = e.match(/^--\s*vstack-space-(\d{3})\s*--$/i);
+    if (l) {
+      const n = a[a.length - 1];
+      (n == null ? void 0 : n.type) === "vstack" ? t("vstack") : o(
+        "vstack",
+        `<mui-v-stack space="var(--space-${l[1]})">`,
+        "</mui-v-stack>"
+      );
+      continue;
+    }
+    const m = e.match(/^--\s*hstack-space-(\d{3})-start\s*--$/i);
+    if (m) {
+      o(
+        "hstack",
+        `<mui-h-stack space="var(--space-${m[1]})">`,
+        "</mui-h-stack>"
+      );
+      continue;
+    }
+    if (e.match(/^--\s*hstack-end\s*--$/i)) {
+      t("hstack");
+      continue;
+    }
+    const p = e.match(/^--\s*hstack-space-(\d{3})\s*--$/i);
+    if (p) {
+      const n = a[a.length - 1];
+      (n == null ? void 0 : n.type) === "hstack" ? t("hstack") : o(
+        "hstack",
+        `<mui-h-stack space="var(--space-${p[1]})">`,
+        "</mui-h-stack>"
+      );
+      continue;
+    }
+    const g = e.match(/^--\s*stack-space-(\d{3})-bp-(\d{3}|medium)-start\s*--$/i);
+    if (g) {
+      const n = g[1], h = g[2].toLowerCase();
+      o(
+        "stack",
+        `<div class="md-stack-responsive md-stack-responsive-${h === "medium" ? "768" : h}" style="display:flex;gap:var(--space-${n});align-items:stretch;">`,
+        "</div>"
+      );
+      continue;
+    }
+    if (e.match(/^--\s*stack-end\s*--$/i)) {
+      t("stack");
+      continue;
+    }
+    const b = e.match(/^--\s*stack-space-(\d{3})-bp-(\d{3}|medium)\s*--$/i);
+    if (b) {
+      const n = a[a.length - 1];
+      if ((n == null ? void 0 : n.type) === "stack") t("stack");
+      else {
+        const h = b[1], v = b[2].toLowerCase();
+        o(
+          "stack",
+          `<div class="md-stack-responsive md-stack-responsive-${v === "medium" ? "768" : v}" style="display:flex;gap:var(--space-${h});align-items:stretch;">`,
+          "</div>"
+        );
+      }
+      continue;
+    }
+    if (e.match(/^--\s*box-start\s*--$/i)) {
+      o("box", "<div>", "</div>");
+      continue;
+    }
+    if (e.match(/^--\s*box-end\s*--$/i)) {
+      t("box");
+      continue;
+    }
     if (e.match(/^--\s*box\s*--$/i)) {
-      t ? (o.push("</div>"), t = !1) : (o.push("<div>"), t = !0);
+      const n = a[a.length - 1];
+      (n == null ? void 0 : n.type) === "box" ? t("box") : o("box", "<div>", "</div>");
       continue;
     }
     if (e.match(/^--\s*rule\s*--$/i)) {
-      o.push("<mui-rule></mui-rule>");
+      i.push("<mui-rule></mui-rule>");
       continue;
     }
-    const c = e.match(/^--\s*space-(\d{3})\s*--$/i);
-    if (c) {
-      const l = c[1];
-      o.push(`<div style="height:var(--space-${l});"></div>`);
+    const k = e.match(/^--\s*space-(\d{3})\s*--$/i);
+    if (k) {
+      i.push(`<div style="height:var(--space-${k[1]});"></div>`);
       continue;
     }
-    const r = e.match(/^--\s*grid-col-([^-]+(?:-[^-]+)*)\s*--$/);
-    if (r) {
-      if (d)
-        o.push("</div>"), d = !1;
+    if (e.match(/^--\s*grid-end\s*--$/i)) {
+      t("grid");
+      continue;
+    }
+    const f = e.match(/^--\s*grid-col-([^-]+(?:-[^-]+)*)-start\s*--$/i);
+    if (f) {
+      const n = f[1].split("-").join(" ");
+      o(
+        "grid",
+        `<div style="display:grid;grid-template-columns:${n};gap:var(--space-300);align-items:start;">`,
+        "</div>"
+      );
+      continue;
+    }
+    const x = e.match(/^--\s*grid-col-([^-]+(?:-[^-]+)*)\s*--$/);
+    if (x) {
+      const n = a[a.length - 1];
+      if ((n == null ? void 0 : n.type) === "grid") t("grid");
       else {
-        const l = r[1].split("-").join(" ");
-        o.push(
-          `<div style="display:grid;grid-template-columns:${l};gap:var(--space-300);align-items:start;">`
-        ), d = !0;
+        const h = x[1].split("-").join(" ");
+        o(
+          "grid",
+          `<div style="display:grid;grid-template-columns:${h};gap:var(--space-300);align-items:start;">`,
+          "</div>"
+        );
       }
       continue;
     }
-    o.push(e);
+    i.push(e);
   }
-  return d && o.push("</div>"), t && o.push("</div>"), o.join(`
+  for (; a.length > 0; ) {
+    const e = a.pop();
+    e && i.push(e.closeTag);
+  }
+  return i.join(`
 `);
-}, h = (n) => n.toLowerCase().trim().replace(/<[^>]+>/g, "").replace(/[^\w\s-]/g, "").replace(/\s+/g, "-"), b = (n) => {
-  const { bodySize: i, codeSize: d } = n, t = new m.Renderer(), o = /* @__PURE__ */ new Map();
-  return t.heading = (e, s) => {
-    const a = {
+}, y = (d) => d.toLowerCase().trim().replace(/<[^>]+>/g, "").replace(/[^\w\s-]/g, "").replace(/\s+/g, "-"), z = (d) => {
+  const { bodySize: c, codeSize: a } = d, i = new $.Renderer(), o = /* @__PURE__ */ new Map();
+  return i.heading = (t, e) => {
+    const s = {
       1: { size: "2", level: "2" },
       2: { size: "2", level: "2" },
       3: { size: "4", level: "4" },
       4: { size: "5", level: "5" },
       5: { size: "5", level: "5" },
       6: { size: "5", level: "5" }
-    }, c = a[s] ?? a[4], r = h(e), l = (o.get(r) ?? 0) + 1;
-    return o.set(r, l), `<mui-heading id="${l > 1 ? `${r}-${l}` : r}" size="${c.size}" level="${c.level}">${e}</mui-heading>`;
-  }, t.paragraph = (e) => `<mui-body size="${i}" weight="regular" variant="default">${e}</mui-body>`, t.link = (e, s, a) => {
-    const c = e ? u(e) : "", r = s ? ` title="${u(s)}"` : "";
-    return `<mui-link href="${c}"${r}>${a}</mui-link>`;
-  }, t.list = (e, s) => `<mui-list size="${i}" as="${s ? "ol" : "ul"}">${e}</mui-list>`, t.listitem = (e) => `<mui-list-item size="${i}">${e}</mui-list-item>`, t.hr = () => "<mui-rule></mui-rule>", t.blockquote = (e) => `<mui-quote>${e}</mui-quote>`, t.codespan = (e) => `<span class="md-inline-code">${u(e)}</span>`, t.code = (e) => `<div class="md-code-block">
-      <mui-button class="md-code-copy" size="x-small" variant="tertiary" data-copy-code>Copy</mui-button>
-      <mui-code size="${d}" scrollable>${u(e)}</mui-code>
-    </div>`, t.image = (e, s, a) => {
-    const c = e ? u(e) : "", r = a ? u(a) : "", l = s ? ` title="${u(s)}"` : "";
-    return `<mui-image src="${c}" alt="${r}"${l}></mui-image>`;
-  }, t.table = (e, s) => `<mui-card class="md-table-card">
+    }, r = s[e] ?? s[4], l = y(t), m = (o.get(l) ?? 0) + 1;
+    return o.set(l, m), `<mui-heading id="${m > 1 ? `${l}-${m}` : l}" size="${r.size}" level="${r.level}">${t}</mui-heading>`;
+  }, i.paragraph = (t) => `<mui-body size="${c}" weight="regular" variant="default">${t}</mui-body>`, i.link = (t, e, s) => {
+    const r = t ? u(t) : "", l = e ? ` title="${u(e)}"` : "";
+    return `<mui-link href="${r}"${l}>${s}</mui-link>`;
+  }, i.list = (t, e) => `<mui-list size="${c}" as="${e ? "ol" : "ul"}">${t}</mui-list>`, i.listitem = (t) => `<mui-list-item size="${c}">${t}</mui-list-item>`, i.hr = () => "<mui-rule></mui-rule>", i.blockquote = (t) => `<mui-quote>${t}</mui-quote>`, i.codespan = (t) => `<span class="md-inline-code">${u(t)}</span>`, i.code = (t) => `<div class="md-code-block" data-code-block>
+      <div class="md-code-actions">
+        <mui-button class="md-code-expand" size="x-small" variant="tertiary" data-toggle-code>Expand</mui-button>
+        <mui-button class="md-code-copy" size="x-small" variant="tertiary" data-copy-code>Copy</mui-button>
+      </div>
+      <div class="md-code-wrap" data-code-wrap>
+        <mui-code size="${a}" scrollable>${u(t)}</mui-code>
+      </div>
+    </div>`, i.image = (t, e, s) => {
+    const r = t ? u(t) : "", l = s ? u(s) : "", m = e ? ` title="${u(e)}"` : "", p = e ? ` data-title="${u(e)}"` : "";
+    return `<mui-image src="${r}" alt="${l}"${m} data-md-image data-src="${r}" data-alt="${l}"${p}></mui-image>`;
+  }, i.table = (t, e) => `<mui-card class="md-table-card">
       <mui-card-body condensed>
         <div class="md-table-scroll">
           <mui-table class="md-table">
-            <mui-row-group heading>${e}</mui-row-group>
-            <mui-row-group>${s}</mui-row-group>
+            <mui-row-group heading>${t}</mui-row-group>
+            <mui-row-group>${e}</mui-row-group>
           </mui-table>
         </div>
       </mui-card-body>
-    </mui-card>`, t.tablerow = (e) => {
-    const s = (e.match(/<mui-cell\b/g) || []).length;
-    return `<mui-row columns="${s ? Array(s).fill("1fr").join(" ") : "1fr"}">${e}</mui-row>`;
-  }, t.tablecell = (e) => `<mui-cell>${e}</mui-cell>`, t;
+    </mui-card>`, i.tablerow = (t) => {
+    const e = (t.match(/<mui-cell\b/g) || []).length;
+    return `<mui-row columns="${e ? Array(e).fill("1fr").join(" ") : "1fr"}">${t}</mui-row>`;
+  }, i.tablecell = (t) => `<mui-cell>${t}</mui-cell>`, i;
 };
-class g extends HTMLElement {
-  static get observedAttributes() {
-    return ["markdown", "body-size", "code-size"];
-  }
+class S extends HTMLElement {
   constructor() {
-    super(), this.attachShadow({ mode: "open" });
+    super(...arguments), this.lightboxEl = null;
+  }
+  static get observedAttributes() {
+    return ["markdown", "body-size", "code-size", "render-mode", "lightbox"];
   }
   connectedCallback() {
     this.render(), this.hasAttribute("markdown") || (this.observer = new MutationObserver(() => this.render()), this.observer.observe(this, { childList: !0, subtree: !0, characterData: !0 }));
   }
   disconnectedCallback() {
-    this.observer && this.observer.disconnect();
+    this.observer && this.observer.disconnect(), this.closeLightbox();
   }
   attributeChangedCallback() {
     this.render();
   }
   getBodySize() {
-    const i = this.getAttribute("body-size");
-    return i || "small";
+    return this.getAttribute("body-size") || "small";
   }
   getCodeSize() {
-    const i = this.getAttribute("code-size");
-    return i || "x-small";
+    return this.getAttribute("code-size") || "x-small";
   }
   getMarkdown() {
-    const i = this.getAttribute("markdown");
-    return i !== null ? i : this.textContent ?? "";
+    const c = this.getAttribute("markdown");
+    return c !== null ? c : this.textContent ?? "";
+  }
+  getRenderRoot() {
+    return this.getAttribute("render-mode") === "light" ? this : (this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot);
+  }
+  isLightboxEnabled() {
+    return this.hasAttribute("lightbox");
+  }
+  applyTableColumns(c) {
+    Array.from(c.querySelectorAll("[data-md-table-columns]")).forEach((i) => {
+      const o = i.getAttribute("data-md-table-columns") || "";
+      let t = i.nextElementSibling;
+      for (; t && t.tagName.toLowerCase() !== "mui-card"; )
+        t = t.nextElementSibling;
+      t && t.querySelectorAll("mui-row").forEach((s) => s.setAttribute("columns", o)), i.remove();
+    });
+  }
+  openLightbox(c, a, i) {
+    this.closeLightbox();
+    const o = document.createElement("div");
+    o.className = "md-lightbox-overlay", o.innerHTML = `
+      <div class="md-lightbox-content" role="dialog" aria-modal="true">
+        <img src="${c}" alt="${a || "Markdown image"}" />
+        ${i ? `<mui-body size="small" variant="optional">${i}</mui-body>` : ""}
+      </div>
+    `, o.addEventListener("click", (t) => {
+      t.target === o && this.closeLightbox();
+    }), document.body.appendChild(o), this.lightboxEl = o, this.dispatchEvent(
+      new CustomEvent("mui-markdown-lightbox-change", {
+        detail: { open: !0 },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  closeLightbox() {
+    this.lightboxEl && (this.lightboxEl.remove(), this.lightboxEl = null, this.dispatchEvent(
+      new CustomEvent("mui-markdown-lightbox-change", {
+        detail: { open: !1 },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  bindHandlers(c) {
+    c.querySelectorAll("[data-copy-code]").forEach((t) => {
+      t.onclick = () => {
+        var l;
+        const e = t.closest("[data-code-block]"), s = e == null ? void 0 : e.querySelector("mui-code"), r = (s == null ? void 0 : s.textContent) ?? "";
+        r && ((l = navigator.clipboard) == null || l.writeText(r).catch(() => {
+        }));
+      };
+    }), c.querySelectorAll("[data-toggle-code]").forEach((t) => {
+      t.onclick = () => {
+        const e = t.closest("[data-code-block]");
+        if (!e) return;
+        const s = e.toggleAttribute("data-expanded");
+        t.textContent = s ? "Collapse" : "Expand";
+      };
+    }), c.querySelectorAll("[data-md-image]").forEach((t) => {
+      t.onclick = () => {
+        const e = t.getAttribute("data-src") || "", s = t.getAttribute("data-alt") || "", r = t.getAttribute("data-title") || void 0;
+        this.dispatchEvent(
+          new CustomEvent("mui-markdown-image-click", {
+            detail: { src: e, alt: s, title: r },
+            bubbles: !0,
+            composed: !0
+          })
+        ), this.isLightboxEnabled() && e && this.openLightbox(e, s, r);
+      };
+    });
   }
   render() {
-    if (!this.shadowRoot) return;
-    const i = this.getMarkdown(), d = p(i), t = b({
+    const c = this.getRenderRoot();
+    if (!c) return;
+    const a = this.getMarkdown(), i = w(a), o = z({
       bodySize: this.getBodySize(),
       codeSize: this.getCodeSize()
-    }), o = m.parse(d, { renderer: t, gfm: !0 });
-    this.shadowRoot.innerHTML = /*html*/
-    `
+    }), e = (
+      /*html*/
+      `
       <style>
         :host { display: block; }
         .md-inline-code {
@@ -119,11 +314,21 @@ class g extends HTMLElement {
         .md-code-block {
           position: relative;
         }
-        .md-code-copy {
+        .md-code-actions {
           position: absolute;
           top: var(--space-200);
           right: var(--space-200);
           z-index: 1;
+          display: flex;
+          gap: var(--space-100);
+        }
+        .md-code-wrap {
+          max-height: 24rem;
+          overflow: auto;
+          transition: max-height 180ms ease;
+        }
+        .md-code-block[data-expanded] .md-code-wrap {
+          max-height: none;
         }
         .md-table-card {
           overflow-x: auto;
@@ -134,16 +339,51 @@ class g extends HTMLElement {
         .md-table {
           min-width: 888px;
         }
+        .md-stack-responsive {
+          flex-direction: column;
+        }
+        .md-stack-responsive > * {
+          flex: 1;
+        }
+        @media (min-width: 768px) {
+          .md-stack-responsive-768 {
+            flex-direction: row;
+          }
+        }
+        @media (min-width: 550px) {
+          .md-stack-responsive-550 {
+            flex-direction: row;
+          }
+        }
+        .md-lightbox-overlay {
+          position: fixed;
+          inset: 0;
+          z-index: 9999;
+          background: rgba(0, 0, 0, 0.9);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          backdrop-filter: blur(var(--space-300));
+        }
+        .md-lightbox-content {
+          display: flex;
+          flex-direction: column;
+          gap: var(--space-200);
+          align-items: center;
+          max-width: min(90vw, 120rem);
+        }
+        .md-lightbox-content img {
+          max-width: min(90vw, 120rem);
+          max-height: 75vh;
+          object-fit: contain;
+        }
       </style>
-      <div class="md-root">${o}</div>
-    `, this.shadowRoot.querySelectorAll("[data-copy-code]").forEach((s) => {
-      s.onclick = () => {
-        var l;
-        const a = s.closest(".md-code-block"), c = a == null ? void 0 : a.querySelector("mui-code"), r = (c == null ? void 0 : c.textContent) ?? "";
-        r && ((l = navigator.clipboard) == null || l.writeText(r).catch(() => {
-        }));
-      };
-    });
+      <div class="md-root">${$.parse(i, { renderer: o, gfm: !0 })}</div>
+    `
+    );
+    c === this ? this.innerHTML = e : c.innerHTML = e;
+    const s = c === this ? this : c;
+    this.applyTableColumns(s), this.bindHandlers(s);
   }
 }
-customElements.get("mui-markdown") || customElements.define("mui-markdown", g);
+customElements.get("mui-markdown") || customElements.define("mui-markdown", S);