@cognivo/components 0.8.0

package/dist/components/cg-markdown/cg-markdown.js

@@ -0,0 +1,542 @@
+import { css as b, LitElement as w, html as y } from "lit";
+import { property as k, customElement as x } from "lit/decorators.js";
+import { h as C, r as $ } from "../../chunks/premium.css-9I4kHrsl.js";
+var S = Object.defineProperty, T = Object.getOwnPropertyDescriptor, f = (r, t, a, e) => {
+  for (var o = e > 1 ? void 0 : e ? T(t, a) : t, g = r.length - 1, l; g >= 0; g--)
+    (l = r[g]) && (o = (e ? l(t, a, o) : l(o)) || o);
+  return e && o && S(t, a, o), o;
+};
+const _ = /* @__PURE__ */ new Set([
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "p",
+  "br",
+  "hr",
+  "strong",
+  "b",
+  "em",
+  "i",
+  "u",
+  "s",
+  "del",
+  "ins",
+  "code",
+  "pre",
+  "blockquote",
+  "ul",
+  "ol",
+  "li",
+  "a",
+  "img",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "th",
+  "td",
+  "div",
+  "span",
+  "sub",
+  "sup",
+  "mark",
+  "abbr",
+  "button"
+]), L = {
+  // Heading anchors get an id derived from slugified heading text.
+  h1: /* @__PURE__ */ new Set(["id"]),
+  h2: /* @__PURE__ */ new Set(["id"]),
+  h3: /* @__PURE__ */ new Set(["id"]),
+  h4: /* @__PURE__ */ new Set(["id"]),
+  h5: /* @__PURE__ */ new Set(["id"]),
+  h6: /* @__PURE__ */ new Set(["id"]),
+  a: /* @__PURE__ */ new Set(["href", "target", "rel", "class", "aria-label"]),
+  img: /* @__PURE__ */ new Set(["src", "alt", "width", "height"]),
+  td: /* @__PURE__ */ new Set(["colspan", "rowspan"]),
+  th: /* @__PURE__ */ new Set(["colspan", "rowspan"]),
+  code: /* @__PURE__ */ new Set(["class"]),
+  // Class-based variants (alert types, task lists, code-block chrome).
+  blockquote: /* @__PURE__ */ new Set(["class"]),
+  div: /* @__PURE__ */ new Set(["class"]),
+  ul: /* @__PURE__ */ new Set(["class"]),
+  li: /* @__PURE__ */ new Set(["class"]),
+  span: /* @__PURE__ */ new Set(["class", "aria-hidden"]),
+  button: /* @__PURE__ */ new Set(["class", "type", "aria-label"])
+}, v = /^(https?:|mailto:|#|\/)/i, z = /* @__PURE__ */ new Set(["note", "tip", "important", "warning", "caution"]);
+function E(r) {
+  return r.replace(/[`*_~]/g, "").toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+}
+function m(r) {
+  return r.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function A(r) {
+  return r.startsWith("```") || /^#{1,6} /.test(r) || /^-{3,}$/.test(r.trim()) || r.startsWith("> ") || r === ">" || /^[-*] /.test(r) || /^\d+\. /.test(r);
+}
+function O(r) {
+  const t = new DOMParser().parseFromString(r, "text/html"), a = document.createDocumentFragment();
+  function e(g, l) {
+    for (const c of Array.from(g.childNodes)) {
+      if (c.nodeType === Node.TEXT_NODE) {
+        l.appendChild(document.createTextNode(c.textContent ?? ""));
+        continue;
+      }
+      if (c.nodeType !== Node.ELEMENT_NODE) continue;
+      const n = c, i = n.tagName.toLowerCase();
+      if (!_.has(i)) {
+        e(n, l);
+        continue;
+      }
+      const s = document.createElement(i), d = L[i];
+      if (d)
+        for (const h of Array.from(n.attributes)) {
+          if (!d.has(h.name.toLowerCase())) continue;
+          const p = h.value.trim().toLowerCase();
+          (h.name === "href" || h.name === "src") && !v.test(p) || s.setAttribute(h.name, h.value);
+        }
+      l.appendChild(s), e(n, s);
+    }
+  }
+  e(t.body, a);
+  const o = document.createElement("div");
+  return o.appendChild(a), o.innerHTML;
+}
+let u = class extends w {
+  constructor() {
+    super(...arguments), this.text = "";
+  }
+  /**
+   * Line-based markdown parser. Classifies each line into a block type,
+   * groups consecutive same-type lines, and renders each block with
+   * inline formatting applied to text content.
+   *
+   * Handles: headings (#), code fences (```), blockquotes (>), horizontal
+   * rules (---), unordered lists (-), ordered lists (1.), and paragraphs.
+   * Inline: bold (**), italic (*), inline code (`), links ([text](url)).
+   */
+  _render(r) {
+    const t = r.replace(/\r\n/g, `
+`).split(`
+`), a = [];
+    let e = 0;
+    for (; e < t.length; ) {
+      const o = t[e];
+      if (o.startsWith("```")) {
+        const c = o.slice(3).trim(), n = [];
+        for (e++; e < t.length && !t[e].startsWith("```"); )
+          n.push(t[e]), e++;
+        e < t.length && e++;
+        const i = m(n.join(`
+`)), s = /^\w+$/.test(c) ? c : "", d = s ? ` class="language-${s}"` : "", h = `<span class="code-lang">${s}</span>`;
+        a.push(
+          `<div class="code-block"><div class="code-header">${h}<button class="code-copy" type="button" aria-label="Copy code">Copy</button></div><pre><code${d}>${i}</code></pre></div>`
+        );
+        continue;
+      }
+      const g = /^(#{1,6}) (.+)$/.exec(o);
+      if (g) {
+        const c = g[1].length, n = g[2], i = E(n), s = this._inline(n), d = i ? ` <a class="anchor" href="#${i}" aria-label="Permalink to this heading">#</a>` : "", h = i ? ` id="${i}"` : "";
+        a.push(`<h${c}${h}>${s}${d}</h${c}>`), e++;
+        continue;
+      }
+      if (/^-{3,}$/.test(o.trim())) {
+        a.push("<hr/>"), e++;
+        continue;
+      }
+      if (o.startsWith("> ") || o === ">") {
+        const c = [];
+        for (; e < t.length && (t[e].startsWith("> ") || t[e] === ">"); )
+          c.push(t[e].replace(/^> ?/, "")), e++;
+        const n = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*$/i.exec(c[0] ?? "");
+        if (n && z.has(n[1].toLowerCase())) {
+          const i = n[1].toLowerCase(), s = i.charAt(0).toUpperCase() + i.slice(1), d = c.slice(1).join(" ");
+          a.push(
+            `<blockquote class="alert alert-${i}"><div class="alert-header"><span class="alert-label">${s}</span></div><div class="alert-body">${this._inline(d)}</div></blockquote>`
+          );
+        } else
+          a.push(`<blockquote>${this._inline(c.join(" "))}</blockquote>`);
+        continue;
+      }
+      if (/^[-*] /.test(o)) {
+        const c = [];
+        let n = !1;
+        for (; e < t.length && /^[-*] /.test(t[e]); ) {
+          const s = t[e].slice(2), d = /^\[([ xX])\]\s+(.*)$/.exec(s);
+          if (d) {
+            n = !0;
+            const p = d[1].toLowerCase() === "x" ? "task-check task-check-on" : "task-check";
+            c.push(
+              `<li class="task"><span class="${p}" aria-hidden="true"></span>` + this._inline(d[2]) + "</li>"
+            );
+          } else
+            c.push(`<li>${this._inline(s)}</li>`);
+          e++;
+        }
+        const i = n ? ' class="task-list"' : "";
+        a.push(`<ul${i}>${c.join("")}</ul>`);
+        continue;
+      }
+      if (/^\d+\. /.test(o)) {
+        const c = [];
+        for (; e < t.length && /^\d+\. /.test(t[e]); )
+          c.push(`<li>${this._inline(t[e].replace(/^\d+\. /, ""))}</li>`), e++;
+        a.push(`<ol>${c.join("")}</ol>`);
+        continue;
+      }
+      if (o.trim() === "") {
+        e++;
+        continue;
+      }
+      const l = [];
+      for (; e < t.length && t[e].trim() !== "" && !A(t[e]); )
+        l.push(t[e]), e++;
+      a.push(`<p>${this._inline(l.join(" "))}</p>`);
+    }
+    return a.join("");
+  }
+  /**
+   * Applies inline formatting. Escapes HTML first, then processes
+   * inline code (via placeholder to avoid interference), bold, italic,
+   * and links with URL safety checks.
+   */
+  _inline(r) {
+    const t = [];
+    let a = r.replace(/`([^`]+)`/g, (e, o) => (t.push(m(o)), `\0CODE${t.length - 1}\0`));
+    return a = m(a), a = a.replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>").replace(/\*([^*\n]+)\*/g, "<em>$1</em>"), a = a.replace(
+      /\[([^\]]+)\]\(((?:[^()\s]|\([^)]*\))+)\)/g,
+      (e, o, g) => {
+        const l = g.trim();
+        return `<a href="${v.test(l) ? l : "about:blank"}" target="_blank" rel="noopener">${o}</a>`;
+      }
+    ), a = a.replace(/\x00CODE(\d+)\x00/g, (e, o) => `<code>${t[Number(o)]}</code>`), a;
+  }
+  updated(r) {
+    r.has("text") && requestAnimationFrame(() => {
+      this.shadowRoot?.querySelectorAll(".code-copy")?.forEach((a) => this._bindCopyButton(a));
+    });
+  }
+  _bindCopyButton(r) {
+    r.dataset.cgBound || (r.dataset.cgBound = "1", r.addEventListener("click", async () => {
+      const e = r.closest(".code-block")?.querySelector("pre")?.textContent ?? "";
+      try {
+        await navigator.clipboard?.writeText(e);
+        const o = r.textContent;
+        r.textContent = "Copied", setTimeout(() => {
+          r.textContent === "Copied" && (r.textContent = o);
+        }, 1200);
+      } catch {
+      }
+    }));
+  }
+  render() {
+    return y`<div class="md" .innerHTML=${O(this._render(this.text))}></div>`;
+  }
+};
+u.styles = [C, $, b`
+    :host {
+      color: var(--cg-color-surface-base-text);
+      /* Prose body — 16px is the document-typography norm (Tailwind Typography,
+         GitHub, Vercel docs). 14px is for UI density, not reading. */
+      font-size: var(--cg-font-size-base);
+      line-height: var(--cg-line-height-loose);
+    }
+
+    /* Headings — asymmetric margins (bigger top than bottom) create clear
+       section breaks, the document-typography pattern from Tailwind Typography. */
+    .md h1 {
+      font-size: var(--cg-font-size-2xl);
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text);
+      margin: var(--cg-spacing-32) 0 var(--cg-spacing-12);
+      line-height: var(--cg-line-height-tight);
+      letter-spacing: -0.02em;
+      text-wrap: balance;
+    }
+    .md h2 {
+      font-size: var(--cg-font-size-xl);
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text);
+      margin: var(--cg-spacing-24) 0 var(--cg-spacing-8);
+      line-height: var(--cg-line-height-tight);
+      letter-spacing: -0.01em;
+      text-wrap: balance;
+    }
+    .md h3 {
+      font-size: var(--cg-font-size-lg);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+      margin: var(--cg-spacing-20) 0 var(--cg-spacing-6);
+      line-height: var(--cg-line-height-snug);
+    }
+
+    /* Anchored headings — when consumers add ids, deep-links should clear any
+       sticky header by default. Caller can override with the css-prop. */
+    .md :is(h1, h2, h3, h4, h5, h6) {
+      scroll-margin-top: var(--cg-component-markdown-scroll-margin);
+    }
+
+    .md p {
+      margin: var(--cg-spacing-16) 0;
+      text-wrap: pretty;
+    }
+
+    .md strong { font-weight: var(--cg-font-weight-semibold); }
+    .md em { font-style: italic; }
+
+    /* ── Inline code ── em-relative size so it scales with the body. */
+    .md code {
+      background: var(--cg-overlay-dark-subtle);
+      padding: 0.15em 0.35em;
+      border-radius: var(--cg-border-radius-50);
+      font-family: var(--cg-font-family-mono);
+      font-size: 0.875em;
+    }
+
+    /* ── Code block — wrapped with header chrome (lang label + copy button).
+       12px radius reads as "code", not "card" (was 20px).
+       Matches GitHub / Vercel / Linear / Tailwind Typography. */
+    .md .code-block {
+      margin: var(--cg-spacing-16) 0;
+      background: var(--cg-color-code-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-code-border);
+      border-radius: var(--cg-border-radius-100);
+      overflow: hidden;
+    }
+    .md .code-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-6) var(--cg-spacing-12);
+      background: var(--cg-overlay-dark-subtle);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-code-border);
+    }
+    .md .code-lang {
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      text-transform: lowercase;
+      letter-spacing: 0.02em;
+    }
+    .md .code-copy {
+      background: transparent;
+      border: var(--cg-border-width-50) solid var(--cg-color-code-border);
+      color: var(--cg-color-surface-container-outlined);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-50);
+      font-family: var(--cg-font-family-primary);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      cursor: pointer;
+      transition:
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .md .code-copy:hover {
+      background: var(--cg-color-action-tertiary-background-hover);
+      color: var(--cg-color-surface-base-text);
+    }
+    .md .code-copy:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .md .code-copy:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),
+        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);
+    }
+    .md pre {
+      background: transparent;
+      color: var(--cg-color-code-text);
+      padding: var(--cg-spacing-16);
+      border: 0;
+      border-radius: 0;
+      overflow-x: auto;
+      font-family: var(--cg-font-family-mono);
+      font-size: 0.875em;
+      line-height: var(--cg-line-height-relaxed);
+      margin: 0;
+    }
+    .md pre code {
+      background: none;
+      padding: 0;
+      color: inherit;
+      font-size: inherit;
+      border-radius: 0;
+    }
+
+    /* ── GitHub-style alerts — 5 semantic variants (note, tip, important, warning, caution). */
+    .md .alert {
+      border-left: var(--cg-border-width-300) solid;
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      margin: var(--cg-spacing-16) 0;
+      border-radius: 0 var(--cg-border-radius-50) var(--cg-border-radius-50) 0;
+      font-style: normal;
+      color: var(--cg-color-surface-base-text);
+    }
+    .md .alert-header {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      margin-bottom: var(--cg-spacing-6);
+    }
+    .md .alert-label {
+      font-weight: var(--cg-font-weight-semibold);
+      font-size: var(--cg-font-size-sm);
+      letter-spacing: 0.01em;
+    }
+    .md .alert-body { font-style: normal; }
+    .md .alert-body :is(p, ul, ol):first-child { margin-top: 0; }
+    .md .alert-body :is(p, ul, ol):last-child { margin-bottom: 0; }
+
+    .md .alert-note {
+      border-left-color: var(--cg-color-status-info-text-default);
+      background: var(--cg-color-status-info-background-default);
+    }
+    .md .alert-note .alert-label { color: var(--cg-color-status-info-text-default); }
+
+    .md .alert-tip {
+      border-left-color: var(--cg-color-status-success-text-default);
+      background: var(--cg-color-status-success-background-default);
+    }
+    .md .alert-tip .alert-label { color: var(--cg-color-status-success-text-default); }
+
+    .md .alert-important {
+      border-left-color: var(--cg-color-accent-text);
+      background: var(--cg-overlay-accent-light);
+    }
+    .md .alert-important .alert-label { color: var(--cg-color-accent-text); }
+
+    .md .alert-warning {
+      border-left-color: var(--cg-color-status-warning-text-default);
+      background: var(--cg-color-status-warning-background-default);
+    }
+    .md .alert-warning .alert-label { color: var(--cg-color-status-warning-text-default); }
+
+    .md .alert-caution {
+      border-left-color: var(--cg-color-status-error-text-default);
+      background: var(--cg-color-status-error-background-default);
+    }
+    .md .alert-caution .alert-label { color: var(--cg-color-status-error-text-default); }
+
+    /* ── Task lists — checkbox-prefixed list items. */
+    .md .task-list { padding-left: 0; list-style: none; }
+    .md .task-list .task {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+    }
+    .md .task-check {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      flex-shrink: 0;
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-50);
+      background: transparent;
+    }
+    .md .task-check-on {
+      background: var(--cg-color-action-primary-background-default);
+      border-color: var(--cg-color-action-primary-border-default);
+      position: relative;
+    }
+    .md .task-check-on::after {
+      content: '✓';
+      color: var(--cg-color-action-primary-text-default);
+      font-size: 0.75em;
+      font-weight: var(--cg-font-weight-bold);
+      line-height: 1;
+    }
+
+    /* ── Heading anchors — visible on heading hover, "#" link to the slugged id. */
+    .md :is(h1, h2, h3, h4, h5, h6) .anchor {
+      display: inline-block;
+      margin-left: var(--cg-spacing-6);
+      color: var(--cg-color-surface-container-outlined);
+      text-decoration: none;
+      opacity: 0;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .md :is(h1, h2, h3, h4, h5, h6):hover .anchor,
+    .md :is(h1, h2, h3, h4, h5, h6) .anchor:focus-visible { opacity: 1; }
+    .md .anchor:hover { color: var(--cg-color-accent-text); }
+
+    /* ── Links ── 4px underline-offset reads as polished prose (not UI). */
+    .md a {
+      color: var(--cg-color-accent-text);
+      text-decoration: underline;
+      text-decoration-thickness: 1px;
+      text-underline-offset: var(--cg-spacing-4);
+      text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
+      transition: text-decoration-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .md a:hover { text-decoration-color: currentColor; }
+
+    /* ── Lists ── more breathable item spacing for readable prose. */
+    .md ul, .md ol {
+      margin: var(--cg-spacing-16) 0;
+      padding-left: var(--cg-spacing-24);
+    }
+    .md li { margin: var(--cg-spacing-6) 0; }
+
+    /* ── Blockquote ── */
+    .md blockquote {
+      border-left: var(--cg-border-width-300) solid var(--cg-color-action-primary-border-default);
+      padding-left: var(--cg-spacing-16);
+      color: var(--cg-color-surface-container-outlined);
+      margin: var(--cg-spacing-16) 0;
+      font-style: italic;
+    }
+
+    /* ── HR ── premium gradient rule (Stripe / Vercel pattern). */
+    .md hr {
+      border: 0;
+      height: var(--cg-border-width-50);
+      background: linear-gradient(
+        to right,
+        transparent,
+        var(--cg-color-surface-container-border),
+        transparent
+      );
+      margin: var(--cg-spacing-32) 0;
+    }
+
+    /* ── Selection highlight ── matches the brand accent. */
+    .md ::selection {
+      background: var(--cg-overlay-accent-light);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    /* ── Table ── */
+    .md table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: var(--cg-spacing-12) 0;
+      font-size: var(--cg-font-size-sm);
+    }
+    .md th {
+      text-align: left;
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      border-bottom: var(--cg-border-width-100) solid var(--cg-color-surface-container-border);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-xs);
+    }
+    .md td {
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);
+    }
+  `];
+f([
+  k()
+], u.prototype, "text", 2);
+u = f([
+  x("cg-markdown")
+], u);
+export {
+  u as CgMarkdown
+};
+//# sourceMappingURL=cg-markdown.js.map

package/dist/components/cg-markdown/cg-markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cg-markdown.js","sources":["../../../src/components/cg-markdown/cg-markdown.ts"],"sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Allowed HTML tags after markdown parsing */\nconst ALLOWED_TAGS = new Set([\n  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'br', 'hr',\n  'strong', 'b', 'em', 'i', 'u', 's', 'del', 'ins',\n  'code', 'pre', 'blockquote',\n  'ul', 'ol', 'li',\n  'a', 'img',\n  'table', 'thead', 'tbody', 'tr', 'th', 'td',\n  'div', 'span', 'sub', 'sup', 'mark', 'abbr',\n  'button',\n]);\n\n/** Allowed attributes per tag — anything not listed is stripped */\nconst ALLOWED_ATTRS: Record<string, Set<string>> = {\n  // Heading anchors get an id derived from slugified heading text.\n  h1: new Set(['id']), h2: new Set(['id']), h3: new Set(['id']),\n  h4: new Set(['id']), h5: new Set(['id']), h6: new Set(['id']),\n  a: new Set(['href', 'target', 'rel', 'class', 'aria-label']),\n  img: new Set(['src', 'alt', 'width', 'height']),\n  td: new Set(['colspan', 'rowspan']),\n  th: new Set(['colspan', 'rowspan']),\n  code: new Set(['class']),\n  // Class-based variants (alert types, task lists, code-block chrome).\n  blockquote: new Set(['class']),\n  div: new Set(['class']),\n  ul: new Set(['class']),\n  li: new Set(['class']),\n  span: new Set(['class', 'aria-hidden']),\n  button: new Set(['class', 'type', 'aria-label']),\n};\n\n/** Safe URL protocols for href/src attributes */\nconst SAFE_PROTOCOLS = /^(https?:|mailto:|#|\\/)/i;\n\n/** GitHub-style alert variants — case-insensitive markers as the first line of a blockquote. */\nconst ALERT_TYPES = new Set(['note', 'tip', 'important', 'warning', 'caution']);\n\n/** Slugify heading text into a URL-safe id. Only emits [a-z0-9-]; safe to interpolate. */\nfunction slugify(text: string): string {\n  return text\n    .replace(/[`*_~]/g, '')\n    .toLowerCase()\n    .trim()\n    .replace(/[^\\w\\s-]/g, '')\n    .replace(/\\s+/g, '-')\n    .replace(/-+/g, '-')\n    .replace(/^-|-$/g, '');\n}\n\n/** Escape HTML-special characters in text content. */\nfunction escapeHtml(text: string): string {\n  return text\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;');\n}\n\n/** Returns true if the line starts a block-level markdown element. */\nfunction isBlockStart(line: string): boolean {\n  return (\n    line.startsWith('```') ||\n    /^#{1,6} /.test(line) ||\n    /^-{3,}$/.test(line.trim()) ||\n    line.startsWith('> ') ||\n    line === '>' ||\n    /^[-*] /.test(line) ||\n    /^\\d+\\. /.test(line)\n  );\n}\n\n/**\n * DOM-based HTML sanitizer. Parses with the browser's HTML parser,\n * walks the tree, and strips anything not explicitly allowed.\n * Immune to encoding tricks, nested contexts, and regex bypasses.\n */\nfunction sanitizeHtml(raw: string): string {\n  const doc = new DOMParser().parseFromString(raw, 'text/html');\n  const fragment = document.createDocumentFragment();\n\n  function walk(source: Node, target: Node) {\n    for (const child of Array.from(source.childNodes)) {\n      if (child.nodeType === Node.TEXT_NODE) {\n        target.appendChild(document.createTextNode(child.textContent ?? ''));\n        continue;\n      }\n      if (child.nodeType !== Node.ELEMENT_NODE) continue;\n      const el = child as Element;\n      const tag = el.tagName.toLowerCase();\n      if (!ALLOWED_TAGS.has(tag)) {\n        // Skip the element but keep its text children\n        walk(el, target);\n        continue;\n      }\n      const clean = document.createElement(tag);\n      const allowed = ALLOWED_ATTRS[tag];\n      if (allowed) {\n        for (const attr of Array.from(el.attributes)) {\n          if (!allowed.has(attr.name.toLowerCase())) continue;\n          const val = attr.value.trim().toLowerCase();\n          if ((attr.name === 'href' || attr.name === 'src') && !SAFE_PROTOCOLS.test(val)) continue;\n          clean.setAttribute(attr.name, attr.value);\n        }\n      }\n      target.appendChild(clean);\n      walk(el, clean);\n    }\n  }\n\n  walk(doc.body, fragment);\n  const container = document.createElement('div');\n  container.appendChild(fragment);\n  return container.innerHTML;\n}\n\n/**\n * <cg-markdown> — Lightweight markdown renderer for LLM output.\n *\n * @example\n * ```html\n * <cg-markdown text=\"## Hello\\n\\nThis is **bold**.\"></cg-markdown>\n * ```\n *\n * @cssprop --cg-color-surface-base-text - Body text color\n * @cssprop --cg-font-size-sm - Body font size (14px)\n */\n@customElement('cg-markdown')\nexport class CgMarkdown extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      color: var(--cg-color-surface-base-text);\n      /* Prose body — 16px is the document-typography norm (Tailwind Typography,\n         GitHub, Vercel docs). 14px is for UI density, not reading. */\n      font-size: var(--cg-font-size-base);\n      line-height: var(--cg-line-height-loose);\n    }\n\n    /* Headings — asymmetric margins (bigger top than bottom) create clear\n       section breaks, the document-typography pattern from Tailwind Typography. */\n    .md h1 {\n      font-size: var(--cg-font-size-2xl);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n      margin: var(--cg-spacing-32) 0 var(--cg-spacing-12);\n      line-height: var(--cg-line-height-tight);\n      letter-spacing: -0.02em;\n      text-wrap: balance;\n    }\n    .md h2 {\n      font-size: var(--cg-font-size-xl);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n      margin: var(--cg-spacing-24) 0 var(--cg-spacing-8);\n      line-height: var(--cg-line-height-tight);\n      letter-spacing: -0.01em;\n      text-wrap: balance;\n    }\n    .md h3 {\n      font-size: var(--cg-font-size-lg);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n      margin: var(--cg-spacing-20) 0 var(--cg-spacing-6);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    /* Anchored headings — when consumers add ids, deep-links should clear any\n       sticky header by default. Caller can override with the css-prop. */\n    .md :is(h1, h2, h3, h4, h5, h6) {\n      scroll-margin-top: var(--cg-component-markdown-scroll-margin);\n    }\n\n    .md p {\n      margin: var(--cg-spacing-16) 0;\n      text-wrap: pretty;\n    }\n\n    .md strong { font-weight: var(--cg-font-weight-semibold); }\n    .md em { font-style: italic; }\n\n    /* ── Inline code ── em-relative size so it scales with the body. */\n    .md code {\n      background: var(--cg-overlay-dark-subtle);\n      padding: 0.15em 0.35em;\n      border-radius: var(--cg-border-radius-50);\n      font-family: var(--cg-font-family-mono);\n      font-size: 0.875em;\n    }\n\n    /* ── Code block — wrapped with header chrome (lang label + copy button).\n       12px radius reads as \"code\", not \"card\" (was 20px).\n       Matches GitHub / Vercel / Linear / Tailwind Typography. */\n    .md .code-block {\n      margin: var(--cg-spacing-16) 0;\n      background: var(--cg-color-code-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-code-border);\n      border-radius: var(--cg-border-radius-100);\n      overflow: hidden;\n    }\n    .md .code-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n      background: var(--cg-overlay-dark-subtle);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-code-border);\n    }\n    .md .code-lang {\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: lowercase;\n      letter-spacing: 0.02em;\n    }\n    .md .code-copy {\n      background: transparent;\n      border: var(--cg-border-width-50) solid var(--cg-color-code-border);\n      color: var(--cg-color-surface-container-outlined);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n      font-family: var(--cg-font-family-primary);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      transition:\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .md .code-copy:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-base-text);\n    }\n    .md .code-copy:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .md .code-copy:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 var(--cg-focus-ring-offset) var(--cg-color-focus-ring-offset),\n        0 0 0 calc(var(--cg-focus-ring-offset) + var(--cg-focus-ring-width)) var(--cg-color-focus-ring);\n    }\n    .md pre {\n      background: transparent;\n      color: var(--cg-color-code-text);\n      padding: var(--cg-spacing-16);\n      border: 0;\n      border-radius: 0;\n      overflow-x: auto;\n      font-family: var(--cg-font-family-mono);\n      font-size: 0.875em;\n      line-height: var(--cg-line-height-relaxed);\n      margin: 0;\n    }\n    .md pre code {\n      background: none;\n      padding: 0;\n      color: inherit;\n      font-size: inherit;\n      border-radius: 0;\n    }\n\n    /* ── GitHub-style alerts — 5 semantic variants (note, tip, important, warning, caution). */\n    .md .alert {\n      border-left: var(--cg-border-width-300) solid;\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      margin: var(--cg-spacing-16) 0;\n      border-radius: 0 var(--cg-border-radius-50) var(--cg-border-radius-50) 0;\n      font-style: normal;\n      color: var(--cg-color-surface-base-text);\n    }\n    .md .alert-header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      margin-bottom: var(--cg-spacing-6);\n    }\n    .md .alert-label {\n      font-weight: var(--cg-font-weight-semibold);\n      font-size: var(--cg-font-size-sm);\n      letter-spacing: 0.01em;\n    }\n    .md .alert-body { font-style: normal; }\n    .md .alert-body :is(p, ul, ol):first-child { margin-top: 0; }\n    .md .alert-body :is(p, ul, ol):last-child { margin-bottom: 0; }\n\n    .md .alert-note {\n      border-left-color: var(--cg-color-status-info-text-default);\n      background: var(--cg-color-status-info-background-default);\n    }\n    .md .alert-note .alert-label { color: var(--cg-color-status-info-text-default); }\n\n    .md .alert-tip {\n      border-left-color: var(--cg-color-status-success-text-default);\n      background: var(--cg-color-status-success-background-default);\n    }\n    .md .alert-tip .alert-label { color: var(--cg-color-status-success-text-default); }\n\n    .md .alert-important {\n      border-left-color: var(--cg-color-accent-text);\n      background: var(--cg-overlay-accent-light);\n    }\n    .md .alert-important .alert-label { color: var(--cg-color-accent-text); }\n\n    .md .alert-warning {\n      border-left-color: var(--cg-color-status-warning-text-default);\n      background: var(--cg-color-status-warning-background-default);\n    }\n    .md .alert-warning .alert-label { color: var(--cg-color-status-warning-text-default); }\n\n    .md .alert-caution {\n      border-left-color: var(--cg-color-status-error-text-default);\n      background: var(--cg-color-status-error-background-default);\n    }\n    .md .alert-caution .alert-label { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Task lists — checkbox-prefixed list items. */\n    .md .task-list { padding-left: 0; list-style: none; }\n    .md .task-list .task {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n    .md .task-check {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      flex-shrink: 0;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-50);\n      background: transparent;\n    }\n    .md .task-check-on {\n      background: var(--cg-color-action-primary-background-default);\n      border-color: var(--cg-color-action-primary-border-default);\n      position: relative;\n    }\n    .md .task-check-on::after {\n      content: '✓';\n      color: var(--cg-color-action-primary-text-default);\n      font-size: 0.75em;\n      font-weight: var(--cg-font-weight-bold);\n      line-height: 1;\n    }\n\n    /* ── Heading anchors — visible on heading hover, \"#\" link to the slugged id. */\n    .md :is(h1, h2, h3, h4, h5, h6) .anchor {\n      display: inline-block;\n      margin-left: var(--cg-spacing-6);\n      color: var(--cg-color-surface-container-outlined);\n      text-decoration: none;\n      opacity: 0;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .md :is(h1, h2, h3, h4, h5, h6):hover .anchor,\n    .md :is(h1, h2, h3, h4, h5, h6) .anchor:focus-visible { opacity: 1; }\n    .md .anchor:hover { color: var(--cg-color-accent-text); }\n\n    /* ── Links ── 4px underline-offset reads as polished prose (not UI). */\n    .md a {\n      color: var(--cg-color-accent-text);\n      text-decoration: underline;\n      text-decoration-thickness: 1px;\n      text-underline-offset: var(--cg-spacing-4);\n      text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);\n      transition: text-decoration-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .md a:hover { text-decoration-color: currentColor; }\n\n    /* ── Lists ── more breathable item spacing for readable prose. */\n    .md ul, .md ol {\n      margin: var(--cg-spacing-16) 0;\n      padding-left: var(--cg-spacing-24);\n    }\n    .md li { margin: var(--cg-spacing-6) 0; }\n\n    /* ── Blockquote ── */\n    .md blockquote {\n      border-left: var(--cg-border-width-300) solid var(--cg-color-action-primary-border-default);\n      padding-left: var(--cg-spacing-16);\n      color: var(--cg-color-surface-container-outlined);\n      margin: var(--cg-spacing-16) 0;\n      font-style: italic;\n    }\n\n    /* ── HR ── premium gradient rule (Stripe / Vercel pattern). */\n    .md hr {\n      border: 0;\n      height: var(--cg-border-width-50);\n      background: linear-gradient(\n        to right,\n        transparent,\n        var(--cg-color-surface-container-border),\n        transparent\n      );\n      margin: var(--cg-spacing-32) 0;\n    }\n\n    /* ── Selection highlight ── matches the brand accent. */\n    .md ::selection {\n      background: var(--cg-overlay-accent-light);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* ── Table ── */\n    .md table {\n      width: 100%;\n      border-collapse: collapse;\n      margin: var(--cg-spacing-12) 0;\n      font-size: var(--cg-font-size-sm);\n    }\n    .md th {\n      text-align: left;\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border-bottom: var(--cg-border-width-100) solid var(--cg-color-surface-container-border);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-xs);\n    }\n    .md td {\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-container-border);\n    }\n  `];\n\n  @property() text = '';\n\n  /**\n   * Line-based markdown parser. Classifies each line into a block type,\n   * groups consecutive same-type lines, and renders each block with\n   * inline formatting applied to text content.\n   *\n   * Handles: headings (#), code fences (```), blockquotes (>), horizontal\n   * rules (---), unordered lists (-), ordered lists (1.), and paragraphs.\n   * Inline: bold (**), italic (*), inline code (`), links ([text](url)).\n   */\n  private _render(md: string): string {\n    const lines = md.replace(/\\r\\n/g, '\\n').split('\\n');\n    const blocks: string[] = [];\n    let i = 0;\n\n    while (i < lines.length) {\n      const line = lines[i]!;\n\n      // Fenced code block — wrapped with header chrome (lang label + copy button)\n      if (line.startsWith('```')) {\n        const lang = line.slice(3).trim();\n        const codeLines: string[] = [];\n        i++;\n        while (i < lines.length && !lines[i]!.startsWith('```')) {\n          codeLines.push(lines[i]!);\n          i++;\n        }\n        if (i < lines.length) i++; // skip closing fence\n        const code = escapeHtml(codeLines.join('\\n'));\n        const langClean = /^\\w+$/.test(lang) ? lang : '';\n        const langClass = langClean ? ` class=\"language-${langClean}\"` : '';\n        const langLabel = `<span class=\"code-lang\">${langClean}</span>`;\n        blocks.push(\n          `<div class=\"code-block\">` +\n            `<div class=\"code-header\">${langLabel}` +\n              `<button class=\"code-copy\" type=\"button\" aria-label=\"Copy code\">Copy</button>` +\n            `</div>` +\n            `<pre><code${langClass}>${code}</code></pre>` +\n          `</div>`,\n        );\n        continue;\n      }\n\n      // Heading (# through ######) — auto-anchored with id + hover-visible \"#\" link\n      const headingMatch = /^(#{1,6}) (.+)$/.exec(line);\n      if (headingMatch) {\n        const level = headingMatch[1]!.length;\n        const text = headingMatch[2]!;\n        const slug = slugify(text);\n        const inline = this._inline(text);\n        const anchor = slug\n          ? ` <a class=\"anchor\" href=\"#${slug}\" aria-label=\"Permalink to this heading\">#</a>`\n          : '';\n        const idAttr = slug ? ` id=\"${slug}\"` : '';\n        blocks.push(`<h${level}${idAttr}>${inline}${anchor}</h${level}>`);\n        i++;\n        continue;\n      }\n\n      // Horizontal rule\n      if (/^-{3,}$/.test(line.trim())) {\n        blocks.push('<hr/>');\n        i++;\n        continue;\n      }\n\n      // Blockquote (consecutive > lines) — first line may be an alert marker\n      // `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]`, `[!CAUTION]`.\n      if (line.startsWith('> ') || line === '>') {\n        const quoteLines: string[] = [];\n        while (i < lines.length && (lines[i]!.startsWith('> ') || lines[i] === '>')) {\n          quoteLines.push(lines[i]!.replace(/^> ?/, ''));\n          i++;\n        }\n        const alertMatch = /^\\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\\]\\s*$/i.exec(quoteLines[0] ?? '');\n        if (alertMatch && ALERT_TYPES.has(alertMatch[1]!.toLowerCase())) {\n          const type = alertMatch[1]!.toLowerCase();\n          const label = type.charAt(0).toUpperCase() + type.slice(1);\n          const body = quoteLines.slice(1).join(' ');\n          blocks.push(\n            `<blockquote class=\"alert alert-${type}\">` +\n              `<div class=\"alert-header\"><span class=\"alert-label\">${label}</span></div>` +\n              `<div class=\"alert-body\">${this._inline(body)}</div>` +\n            `</blockquote>`,\n          );\n        } else {\n          blocks.push(`<blockquote>${this._inline(quoteLines.join(' '))}</blockquote>`);\n        }\n        continue;\n      }\n\n      // Unordered list (consecutive - items) — items can be plain or task `- [ ]` / `- [x]`\n      if (/^[-*] /.test(line)) {\n        const items: string[] = [];\n        let isTaskList = false;\n        while (i < lines.length && /^[-*] /.test(lines[i]!)) {\n          const itemContent = lines[i]!.slice(2);\n          const taskMatch = /^\\[([ xX])\\]\\s+(.*)$/.exec(itemContent);\n          if (taskMatch) {\n            isTaskList = true;\n            const checked = taskMatch[1]!.toLowerCase() === 'x';\n            const checkClass = checked ? 'task-check task-check-on' : 'task-check';\n            items.push(\n              `<li class=\"task\">` +\n                `<span class=\"${checkClass}\" aria-hidden=\"true\"></span>` +\n                this._inline(taskMatch[2]!) +\n              `</li>`,\n            );\n          } else {\n            items.push(`<li>${this._inline(itemContent)}</li>`);\n          }\n          i++;\n        }\n        const listClass = isTaskList ? ' class=\"task-list\"' : '';\n        blocks.push(`<ul${listClass}>${items.join('')}</ul>`);\n        continue;\n      }\n\n      // Ordered list (consecutive 1. 2. 3. items)\n      if (/^\\d+\\. /.test(line)) {\n        const items: string[] = [];\n        while (i < lines.length && /^\\d+\\. /.test(lines[i]!)) {\n          items.push(`<li>${this._inline(lines[i]!.replace(/^\\d+\\. /, ''))}</li>`);\n          i++;\n        }\n        blocks.push(`<ol>${items.join('')}</ol>`);\n        continue;\n      }\n\n      // Blank line — paragraph separator\n      if (line.trim() === '') {\n        i++;\n        continue;\n      }\n\n      // Paragraph — consecutive non-blank, non-block lines joined with spaces\n      const paraLines: string[] = [];\n      while (i < lines.length && lines[i]!.trim() !== '' && !isBlockStart(lines[i]!)) {\n        paraLines.push(lines[i]!);\n        i++;\n      }\n      blocks.push(`<p>${this._inline(paraLines.join(' '))}</p>`);\n    }\n\n    return blocks.join('');\n  }\n\n  /**\n   * Applies inline formatting. Escapes HTML first, then processes\n   * inline code (via placeholder to avoid interference), bold, italic,\n   * and links with URL safety checks.\n   */\n  private _inline(text: string): string {\n    // Extract inline code as placeholders so bold/italic regex don't touch it\n    const codeStash: string[] = [];\n    let working = text.replace(/`([^`]+)`/g, (_, code: string) => {\n      codeStash.push(escapeHtml(code));\n      return `\\x00CODE${codeStash.length - 1}\\x00`;\n    });\n\n    // Escape remaining HTML\n    working = escapeHtml(working);\n\n    // Bold before italic so ** doesn't get half-eaten by *\n    working = working\n      .replace(/\\*\\*([^*\\n]+)\\*\\*/g, '<strong>$1</strong>')\n      .replace(/\\*([^*\\n]+)\\*/g, '<em>$1</em>');\n\n    // Links — handle URLs with balanced single-level parens\n    working = working.replace(\n      /\\[([^\\]]+)\\]\\(((?:[^()\\s]|\\([^)]*\\))+)\\)/g,\n      (_m, label: string, url: string) => {\n        const trimmed = url.trim();\n        const safe = SAFE_PROTOCOLS.test(trimmed) ? trimmed : 'about:blank';\n        return `<a href=\"${safe}\" target=\"_blank\" rel=\"noopener\">${label}</a>`;\n      },\n    );\n\n    // Restore inline code\n    working = working.replace(/\\x00CODE(\\d+)\\x00/g, (_m, idx: string) => {\n      return `<code>${codeStash[Number(idx)]}</code>`;\n    });\n\n    return working;\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('text')) {\n      // Bind copy-button click handlers AFTER Lit has applied innerHTML.\n      // The buttons come from sanitized HTML so they have no inline handlers.\n      requestAnimationFrame(() => {\n        const buttons = this.shadowRoot?.querySelectorAll<HTMLButtonElement>('.code-copy');\n        buttons?.forEach(btn => this._bindCopyButton(btn));\n      });\n    }\n  }\n\n  private _bindCopyButton(btn: HTMLButtonElement): void {\n    if (btn.dataset['cgBound']) return;\n    btn.dataset['cgBound'] = '1';\n    btn.addEventListener('click', async () => {\n      const block = btn.closest('.code-block');\n      const pre = block?.querySelector('pre');\n      const codeText = pre?.textContent ?? '';\n      try {\n        await navigator.clipboard?.writeText(codeText);\n        const original = btn.textContent;\n        btn.textContent = 'Copied';\n        setTimeout(() => {\n          if (btn.textContent === 'Copied') btn.textContent = original;\n        }, 1200);\n      } catch {\n        // Clipboard API may be blocked (insecure context, permission denied);\n        // silently fail — the code is still selectable.\n      }\n    });\n  }\n\n  override render() {\n    return html`<div class=\"md\" .innerHTML=${sanitizeHtml(this._render(this.text))}></div>`;\n  }\n}\n\ndeclare global { interface HTMLElementTagNameMap { 'cg-markdown': CgMarkdown; } }\n"],"names":["ALLOWED_TAGS","ALLOWED_ATTRS","SAFE_PROTOCOLS","ALERT_TYPES","slugify","text","escapeHtml","isBlockStart","line","sanitizeHtml","raw","doc","fragment","walk","source","target","child","el","tag","clean","allowed","attr","val","container","CgMarkdown","LitElement","md","lines","blocks","i","lang","codeLines","code","langClean","langClass","langLabel","headingMatch","level","slug","inline","anchor","idAttr","quoteLines","alertMatch","type","label","body","items","isTaskList","itemContent","taskMatch","checkClass","listClass","paraLines","codeStash","working","_","_m","url","trimmed","idx","changed","btn","codeText","original","html","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}