@signalwire/web-components 4.0.0-beta.8 → 4.0.0-dev-20260515133934

package/dist/components/UI/layout/sw-ui-content-drawer.js

@@ -0,0 +1,413 @@
+import { LitElement as v, html as c, nothing as h, css as w } from "lit";
+import { property as d, state as p, customElement as k } from "lit/decorators.js";
+import { unsafeHTML as f } from "lit/directives/unsafe-html.js";
+import { getLogger as y } from "@signalwire/js";
+import { highlight as _ } from "../../../utils/prism.js";
+var C = Object.defineProperty, z = Object.getOwnPropertyDescriptor, a = (t, e, o, s) => {
+  for (var r = s > 1 ? void 0 : s ? z(e, o) : e, i = t.length - 1, l; i >= 0; i--)
+    (l = t[i]) && (r = (s ? l(e, o, r) : l(r)) || r);
+  return s && r && C(e, o, r), r;
+};
+const u = y(), m = {
+  ALLOWED_TAGS: [
+    "p",
+    "br",
+    "b",
+    "i",
+    "em",
+    "strong",
+    "a",
+    "ul",
+    "ol",
+    "li",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "pre",
+    "code",
+    "blockquote",
+    "hr",
+    "table",
+    "thead",
+    "tbody",
+    "tr",
+    "th",
+    "td",
+    "img",
+    "span",
+    "div"
+  ],
+  ALLOWED_ATTR: ["href", "target", "rel", "src", "alt", "class", "title"],
+  ALLOW_DATA_ATTR: !1,
+  FORBID_TAGS: ["script", "iframe", "object", "embed", "form", "input"],
+  FORBID_ATTR: ["style"]
+};
+let b = !1;
+function g(t) {
+  return b || (t.addHook("afterSanitizeAttributes", (e) => {
+    e.tagName === "A" && e.hasAttribute("target") && e.setAttribute("rel", "noopener noreferrer");
+  }), b = !0), t;
+}
+let n = class extends v {
+  constructor() {
+    super(...arguments), this.open = !1, this.narrow = !1, this.title = "", this.content = "", this.format = "text", this.language = "", this._renderedHtml = "", this._renderFormat = "text", this._copied = !1, this._renderId = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._ro = new ResizeObserver((e) => {
+      const o = e[0];
+      o && (this.narrow = o.contentRect.width <= 480);
+    });
+    const t = this.parentElement;
+    t && this._ro.observe(t);
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this._ro) == null || t.disconnect(), this._ro = void 0;
+  }
+  updated(t) {
+    super.updated(t), (t.has("content") || t.has("format") || t.has("language")) && this._renderContent();
+  }
+  async _renderContent() {
+    const t = ++this._renderId, { content: e, format: o, language: s } = this;
+    if (o === "text") {
+      if (t !== this._renderId) return;
+      this._renderedHtml = "", this._renderFormat = "text";
+      return;
+    }
+    try {
+      let r = "";
+      if (o === "markdown") {
+        const [{ marked: i }, { default: l }] = await Promise.all([
+          import("../../../node_modules/marked/lib/marked.esm.js"),
+          import("../../../node_modules/dompurify/dist/purify.es.js")
+        ]), x = await i.parse(e, { async: !0 });
+        r = g(l).sanitize(x, m);
+      } else if (o === "html") {
+        const { default: i } = await import("../../../node_modules/dompurify/dist/purify.es.js");
+        r = g(i).sanitize(e, m);
+      } else o === "code" && (r = await _(e, s || "plaintext"));
+      if (t !== this._renderId) return;
+      this._renderedHtml = r, this._renderFormat = o;
+    } catch (r) {
+      if (u.error("[ContentDrawer] Failed to render content:", r), t !== this._renderId) return;
+      this._renderedHtml = "", this._renderFormat = "text";
+    }
+  }
+  _close() {
+    this.dispatchEvent(new CustomEvent("sw-content-drawer-close", { bubbles: !0, composed: !0 }));
+  }
+  async _copy() {
+    try {
+      await navigator.clipboard.writeText(this.content), this._copied = !0, setTimeout(() => {
+        this._copied = !1;
+      }, 2e3);
+    } catch {
+      u.error("[ContentDrawer] Clipboard write failed");
+    }
+  }
+  _renderBody() {
+    return this.format === "text" || this._renderFormat !== this.format ? c`<div class="content-text">${this.content}</div>` : this._renderFormat === "code" ? c`
+        <div class="content-code">
+          <pre><code>${f(this._renderedHtml)}</code></pre>
+        </div>
+      ` : c`<div class="content-rich">${f(this._renderedHtml)}</div>`;
+  }
+  render() {
+    const t = this.format === "code" && this.language;
+    return c`
+      <div class="panel" part="panel">
+        <div class="header" part="header">
+          ${this.title ? c`<span class="title" part="title">${this.title}</span>` : h}
+          ${t ? c`<span class="lang-badge">${this.language}</span>` : h}
+          <button
+            class="action-btn ${this._copied ? "copy-done" : ""}"
+            title="Copy to clipboard"
+            @click=${this._copy}
+          >
+            <sw-ui-icon name=${this._copied ? "check-circle" : "copy"} size="16"></sw-ui-icon>
+          </button>
+          <button class="action-btn" title="Close" @click=${this._close}>
+            <sw-ui-icon name="close" size="16"></sw-ui-icon>
+          </button>
+        </div>
+        <div class="body" part="body">
+          ${this._renderBody()}
+        </div>
+      </div>
+    `;
+  }
+};
+n.styles = w`
+    /* ── Host — default: slide in from the right ── */
+    :host {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: min(360px, 100%);
+      height: 100%;
+      z-index: 20;
+      transform: translateX(100%);
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      pointer-events: none;
+    }
+
+    :host([open]) {
+      transform: translateX(0);
+      pointer-events: auto;
+    }
+
+    /* ── Narrow mode: slide up from the bottom ── */
+    :host([narrow]) {
+      width: 100%;
+      height: auto;
+      max-height: 65%;
+      top: auto;
+      bottom: 0;
+      transform: translateY(100%);
+    }
+
+    :host([narrow][open]) {
+      transform: translateY(0);
+    }
+
+    /* ── Panel ── */
+    .panel {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      background: var(--bg-page);
+      border-left: 1px solid var(--border-default);
+      overflow: hidden;
+    }
+
+    :host([narrow]) .panel {
+      border-left: none;
+      border-top: 1px solid var(--border-default);
+      border-radius: var(--sw-call-layout-radius, 0) var(--sw-call-layout-radius, 0) 0 0;
+    }
+
+    /* ── Header ── */
+    .header {
+      flex: 0 0 auto;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 12px;
+      border-bottom: 1px solid var(--border-default);
+      min-height: 42px;
+    }
+
+    .title {
+      flex: 1;
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: color-mix(in srgb, var(--fg-default) 50%, transparent);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .lang-badge {
+      font-size: 10px;
+      font-weight: 500;
+      color: var(--fg-muted);
+      background: var(--bg-surface);
+      padding: 1px 6px;
+      border-radius: 4px;
+      border: 1px solid var(--border-default);
+      flex-shrink: 0;
+    }
+
+    .action-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border: none;
+      border-radius: 6px;
+      background: transparent;
+      color: color-mix(in srgb, var(--fg-default) 55%, transparent);
+      cursor: pointer;
+      transition: background var(--transition-fast), color var(--transition-fast);
+      flex-shrink: 0;
+    }
+
+    .action-btn:hover {
+      background: var(--bg-surface-raised);
+      color: var(--fg-default);
+    }
+
+    .copy-done {
+      color: var(--interactive-status-success) !important;
+    }
+
+    /* ── Body ── */
+    .body {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 14px 14px 20px;
+      font-size: 13px;
+      line-height: 1.6;
+      color: var(--fg-default);
+    }
+
+    .body::-webkit-scrollbar { width: 4px; }
+    .body::-webkit-scrollbar-track { background: transparent; }
+    .body::-webkit-scrollbar-thumb {
+      background: var(--bg-surface-raised);
+      border-radius: 2px;
+    }
+
+    /* ── text format ── */
+    .content-text {
+      white-space: pre-wrap;
+      font-family: ui-monospace, monospace;
+      font-size: 12px;
+      line-height: 1.6;
+    }
+
+    /* ── code format ── */
+    .content-code pre {
+      margin: 0;
+      padding: 14px 16px;
+      background: #1a1b26;
+      border-radius: 6px;
+      overflow-x: auto;
+      font-size: 12.5px;
+      line-height: 1.6;
+    }
+
+    .content-code code {
+      font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
+      color: #f8f8f2;
+    }
+
+    /* ── markdown / html format ── */
+    .content-rich { overflow-wrap: break-word; }
+
+    .content-rich h1, .content-rich h2, .content-rich h3 {
+      margin: 0 0 8px; font-weight: 600; color: var(--fg-default);
+    }
+    .content-rich h1 { font-size: 1.2em; }
+    .content-rich h2 { font-size: 1.1em; }
+    .content-rich h3 { font-size: 1em; }
+
+    .content-rich p { margin: 0 0 10px; }
+    .content-rich p:last-child { margin-bottom: 0; }
+
+    .content-rich ul, .content-rich ol { margin: 0 0 10px; padding-left: 18px; }
+    .content-rich li { margin-bottom: 4px; }
+
+    .content-rich code {
+      font-family: ui-monospace, monospace;
+      font-size: 0.85em;
+      background: rgba(255,255,255,0.1);
+      padding: 1px 5px;
+      border-radius: 3px;
+    }
+
+    .content-rich pre {
+      background: #1a1b26;
+      border-radius: 6px;
+      padding: 10px 12px;
+      overflow-x: auto;
+      margin: 0 0 10px;
+    }
+
+    .content-rich pre code { background: transparent; padding: 0; color: #f8f8f2; }
+
+    .content-rich a { color: var(--interactive-button-primary-bg); text-decoration: underline; }
+    .content-rich a:hover { opacity: 0.85; }
+
+    .content-rich blockquote {
+      border-left: 3px solid var(--border-default);
+      margin: 0 0 10px;
+      padding-left: 10px;
+      color: var(--fg-muted);
+    }
+
+    .content-rich table {
+      border-collapse: collapse; width: 100%; margin: 0 0 10px; font-size: 0.85em;
+    }
+    .content-rich th, .content-rich td {
+      border: 1px solid var(--border-default); padding: 4px 8px; text-align: left;
+    }
+    .content-rich th { background: var(--bg-surface); font-weight: 600; }
+
+    /* ── Prism Okaidia theme (must live in shadow DOM) ── */
+    .token.comment,
+    .token.prolog,
+    .token.doctype,
+    .token.cdata                { color: #8292a2; }
+    .token.punctuation          { color: #f8f8f2; }
+    .token.namespace            { opacity: 0.7; }
+    .token.property,
+    .token.tag,
+    .token.constant,
+    .token.symbol,
+    .token.deleted              { color: #f92672; }
+    .token.boolean,
+    .token.number               { color: #ae81ff; }
+    .token.selector,
+    .token.attr-name,
+    .token.string,
+    .token.char,
+    .token.builtin,
+    .token.inserted             { color: #a6e22e; }
+    .token.operator,
+    .token.entity,
+    .token.url,
+    .token.variable             { color: #f8f8f2; }
+    .token.atrule,
+    .token.attr-value,
+    .token.function,
+    .token.class-name           { color: #e6db74; }
+    .token.keyword              { color: #66d9ef; }
+    .token.regex,
+    .token.important            { color: #fd971f; }
+    .token.important,
+    .token.bold                 { font-weight: bold; }
+    .token.italic               { font-style: italic; }
+  `;
+a([
+  d({ type: Boolean, reflect: !0 })
+], n.prototype, "open", 2);
+a([
+  d({ type: Boolean, reflect: !0 })
+], n.prototype, "narrow", 2);
+a([
+  d({ type: String })
+], n.prototype, "title", 2);
+a([
+  d({ type: String })
+], n.prototype, "content", 2);
+a([
+  d({ type: String })
+], n.prototype, "format", 2);
+a([
+  d({ type: String })
+], n.prototype, "language", 2);
+a([
+  p()
+], n.prototype, "_renderedHtml", 2);
+a([
+  p()
+], n.prototype, "_renderFormat", 2);
+a([
+  p()
+], n.prototype, "_copied", 2);
+n = a([
+  k("sw-ui-content-drawer")
+], n);
+export {
+  n as SwUiContentDrawer
+};
+//# sourceMappingURL=sw-ui-content-drawer.js.map

package/dist/components/UI/layout/sw-ui-content-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-content-drawer.js","sources":["../../../../src/components/UI/layout/sw-ui-content-drawer.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport '../icons/sw-ui-icon.js';\nimport { getLogger } from '@signalwire/js';\nimport { highlight } from '../../../utils/prism.js';\n\nconst logger = getLogger();\n\n/** Formats supported by the content drawer. */\nexport type ContentFormat = 'text' | 'markdown' | 'code' | 'html';\n\n/** Payload that drives the content drawer. */\nexport interface DisplayContentPayload {\n  title?: string;\n  content: string;\n  format: ContentFormat;\n  /** Prism language name (required when format === 'code'). */\n  language?: string;\n}\n\n// ── DOMPurify allowlist ──────────────────────────────────────────────────────\n\n// DOMPurify already blocks all `on*` event handlers by default — we only need\n// to extend the defaults for things it would otherwise allow (inline `style`).\nconst PURIFY_CONFIG = {\n  ALLOWED_TAGS: [\n    'p', 'br', 'b', 'i', 'em', 'strong', 'a', 'ul', 'ol', 'li',\n    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',\n    'pre', 'code', 'blockquote', 'hr', 'table', 'thead', 'tbody',\n    'tr', 'th', 'td', 'img', 'span', 'div',\n  ],\n  ALLOWED_ATTR: ['href', 'target', 'rel', 'src', 'alt', 'class', 'title'],\n  ALLOW_DATA_ATTR: false,\n  FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input'],\n  FORBID_ATTR: ['style'],\n};\n\n// Force `rel=\"noopener noreferrer\"` on any anchor that opens in a new context.\n// Without this, sanitized markdown/html with `<a target=\"_blank\">` could let\n// the opened page reach back into ours via `window.opener`.\ntype DOMPurifyNS = typeof import('dompurify')['default'];\nlet purifyHookInstalled = false;\nfunction ensurePurifyHook(DOMPurify: DOMPurifyNS): DOMPurifyNS {\n  if (purifyHookInstalled) return DOMPurify;\n  DOMPurify.addHook('afterSanitizeAttributes', (node) => {\n    if (node.tagName === 'A' && node.hasAttribute('target')) {\n      node.setAttribute('rel', 'noopener noreferrer');\n    }\n  });\n  purifyHookInstalled = true;\n  return DOMPurify;\n}\n\n// ── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Content drawer overlay for the call widget.\n *\n * Slides in from the right on wide containers; on narrow containers (parent\n * width ≤ 480 px) it slides up from the bottom instead.\n *\n * Formats: `text` · `markdown` (marked + DOMPurify) · `code` (Prism) · `html` (DOMPurify)\n *\n * @fires sw-content-drawer-close - User clicked the close button. No detail.\n */\n@customElement('sw-ui-content-drawer')\nexport class SwUiContentDrawer extends LitElement {\n  static styles = css`\n    /* ── Host — default: slide in from the right ── */\n    :host {\n      display: block;\n      position: absolute;\n      top: 0;\n      right: 0;\n      width: min(360px, 100%);\n      height: 100%;\n      z-index: 20;\n      transform: translateX(100%);\n      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n      pointer-events: none;\n    }\n\n    :host([open]) {\n      transform: translateX(0);\n      pointer-events: auto;\n    }\n\n    /* ── Narrow mode: slide up from the bottom ── */\n    :host([narrow]) {\n      width: 100%;\n      height: auto;\n      max-height: 65%;\n      top: auto;\n      bottom: 0;\n      transform: translateY(100%);\n    }\n\n    :host([narrow][open]) {\n      transform: translateY(0);\n    }\n\n    /* ── Panel ── */\n    .panel {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--bg-page);\n      border-left: 1px solid var(--border-default);\n      overflow: hidden;\n    }\n\n    :host([narrow]) .panel {\n      border-left: none;\n      border-top: 1px solid var(--border-default);\n      border-radius: var(--sw-call-layout-radius, 0) var(--sw-call-layout-radius, 0) 0 0;\n    }\n\n    /* ── Header ── */\n    .header {\n      flex: 0 0 auto;\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 12px;\n      border-bottom: 1px solid var(--border-default);\n      min-height: 42px;\n    }\n\n    .title {\n      flex: 1;\n      font-size: 11px;\n      font-weight: 600;\n      letter-spacing: 0.08em;\n      text-transform: uppercase;\n      color: color-mix(in srgb, var(--fg-default) 50%, transparent);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .lang-badge {\n      font-size: 10px;\n      font-weight: 500;\n      color: var(--fg-muted);\n      background: var(--bg-surface);\n      padding: 1px 6px;\n      border-radius: 4px;\n      border: 1px solid var(--border-default);\n      flex-shrink: 0;\n    }\n\n    .action-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 28px;\n      height: 28px;\n      border: none;\n      border-radius: 6px;\n      background: transparent;\n      color: color-mix(in srgb, var(--fg-default) 55%, transparent);\n      cursor: pointer;\n      transition: background var(--transition-fast), color var(--transition-fast);\n      flex-shrink: 0;\n    }\n\n    .action-btn:hover {\n      background: var(--bg-surface-raised);\n      color: var(--fg-default);\n    }\n\n    .copy-done {\n      color: var(--interactive-status-success) !important;\n    }\n\n    /* ── Body ── */\n    .body {\n      flex: 1;\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 14px 14px 20px;\n      font-size: 13px;\n      line-height: 1.6;\n      color: var(--fg-default);\n    }\n\n    .body::-webkit-scrollbar { width: 4px; }\n    .body::-webkit-scrollbar-track { background: transparent; }\n    .body::-webkit-scrollbar-thumb {\n      background: var(--bg-surface-raised);\n      border-radius: 2px;\n    }\n\n    /* ── text format ── */\n    .content-text {\n      white-space: pre-wrap;\n      font-family: ui-monospace, monospace;\n      font-size: 12px;\n      line-height: 1.6;\n    }\n\n    /* ── code format ── */\n    .content-code pre {\n      margin: 0;\n      padding: 14px 16px;\n      background: #1a1b26;\n      border-radius: 6px;\n      overflow-x: auto;\n      font-size: 12.5px;\n      line-height: 1.6;\n    }\n\n    .content-code code {\n      font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;\n      color: #f8f8f2;\n    }\n\n    /* ── markdown / html format ── */\n    .content-rich { overflow-wrap: break-word; }\n\n    .content-rich h1, .content-rich h2, .content-rich h3 {\n      margin: 0 0 8px; font-weight: 600; color: var(--fg-default);\n    }\n    .content-rich h1 { font-size: 1.2em; }\n    .content-rich h2 { font-size: 1.1em; }\n    .content-rich h3 { font-size: 1em; }\n\n    .content-rich p { margin: 0 0 10px; }\n    .content-rich p:last-child { margin-bottom: 0; }\n\n    .content-rich ul, .content-rich ol { margin: 0 0 10px; padding-left: 18px; }\n    .content-rich li { margin-bottom: 4px; }\n\n    .content-rich code {\n      font-family: ui-monospace, monospace;\n      font-size: 0.85em;\n      background: rgba(255,255,255,0.1);\n      padding: 1px 5px;\n      border-radius: 3px;\n    }\n\n    .content-rich pre {\n      background: #1a1b26;\n      border-radius: 6px;\n      padding: 10px 12px;\n      overflow-x: auto;\n      margin: 0 0 10px;\n    }\n\n    .content-rich pre code { background: transparent; padding: 0; color: #f8f8f2; }\n\n    .content-rich a { color: var(--interactive-button-primary-bg); text-decoration: underline; }\n    .content-rich a:hover { opacity: 0.85; }\n\n    .content-rich blockquote {\n      border-left: 3px solid var(--border-default);\n      margin: 0 0 10px;\n      padding-left: 10px;\n      color: var(--fg-muted);\n    }\n\n    .content-rich table {\n      border-collapse: collapse; width: 100%; margin: 0 0 10px; font-size: 0.85em;\n    }\n    .content-rich th, .content-rich td {\n      border: 1px solid var(--border-default); padding: 4px 8px; text-align: left;\n    }\n    .content-rich th { background: var(--bg-surface); font-weight: 600; }\n\n    /* ── Prism Okaidia theme (must live in shadow DOM) ── */\n    .token.comment,\n    .token.prolog,\n    .token.doctype,\n    .token.cdata                { color: #8292a2; }\n    .token.punctuation          { color: #f8f8f2; }\n    .token.namespace            { opacity: 0.7; }\n    .token.property,\n    .token.tag,\n    .token.constant,\n    .token.symbol,\n    .token.deleted              { color: #f92672; }\n    .token.boolean,\n    .token.number               { color: #ae81ff; }\n    .token.selector,\n    .token.attr-name,\n    .token.string,\n    .token.char,\n    .token.builtin,\n    .token.inserted             { color: #a6e22e; }\n    .token.operator,\n    .token.entity,\n    .token.url,\n    .token.variable             { color: #f8f8f2; }\n    .token.atrule,\n    .token.attr-value,\n    .token.function,\n    .token.class-name           { color: #e6db74; }\n    .token.keyword              { color: #66d9ef; }\n    .token.regex,\n    .token.important            { color: #fd971f; }\n    .token.important,\n    .token.bold                 { font-weight: bold; }\n    .token.italic               { font-style: italic; }\n  `;\n\n  @property({ type: Boolean, reflect: true }) open = false;\n  @property({ type: Boolean, reflect: true }) narrow = false;\n  @property({ type: String }) title = '';\n  @property({ type: String }) content = '';\n  @property({ type: String }) format: ContentFormat = 'text';\n  @property({ type: String }) language = '';\n\n  @state() private _renderedHtml = '';\n  @state() private _renderFormat: ContentFormat = 'text';\n  @state() private _copied = false;\n\n  // Incremented each time a new render is requested; stale renders check this.\n  private _renderId = 0;\n\n  private _ro?: ResizeObserver;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this._ro = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (entry) this.narrow = entry.contentRect.width <= 480;\n    });\n    // Observe the parent element (the positioning container) so narrow mode\n    // triggers on the container's width, not the drawer's own width.\n    const parent = this.parentElement;\n    if (parent) this._ro.observe(parent);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._ro?.disconnect();\n    this._ro = undefined;\n  }\n\n  protected updated(changed: Map<string, unknown>): void {\n    super.updated(changed);\n    if (changed.has('content') || changed.has('format') || changed.has('language')) {\n      void this._renderContent();\n    }\n  }\n\n  private async _renderContent(): Promise<void> {\n    const id = ++this._renderId;\n    const { content, format, language } = this;\n\n    if (format === 'text') {\n      if (id !== this._renderId) return;\n      this._renderedHtml = '';\n      this._renderFormat = 'text';\n      return;\n    }\n\n    try {\n      let html = '';\n\n      if (format === 'markdown') {\n        const [{ marked }, { default: DOMPurify }] = await Promise.all([\n          import('marked'),\n          import('dompurify'),\n        ]);\n        const raw = await marked.parse(content, { async: true });\n        html = ensurePurifyHook(DOMPurify).sanitize(raw, PURIFY_CONFIG);\n      } else if (format === 'html') {\n        const { default: DOMPurify } = await import('dompurify');\n        html = ensurePurifyHook(DOMPurify).sanitize(content, PURIFY_CONFIG);\n      } else if (format === 'code') {\n        html = await highlight(content, language || 'plaintext');\n      }\n\n      if (id !== this._renderId) return;\n      this._renderedHtml = html;\n      this._renderFormat = format;\n    } catch (err) {\n      logger.error('[ContentDrawer] Failed to render content:', err);\n      if (id !== this._renderId) return;\n      this._renderedHtml = '';\n      this._renderFormat = 'text';\n    }\n  }\n\n  private _close(): void {\n    this.dispatchEvent(new CustomEvent('sw-content-drawer-close', { bubbles: true, composed: true }));\n  }\n\n  private async _copy(): Promise<void> {\n    try {\n      await navigator.clipboard.writeText(this.content);\n      this._copied = true;\n      setTimeout(() => { this._copied = false; }, 2000);\n    } catch {\n      logger.error('[ContentDrawer] Clipboard write failed');\n    }\n  }\n\n  private _renderBody() {\n    if (this.format === 'text' || (this._renderFormat !== this.format)) {\n      // Show plain text immediately; highlighted version replaces it once ready.\n      return html`<div class=\"content-text\">${this.content}</div>`;\n    }\n    if (this._renderFormat === 'code') {\n      return html`\n        <div class=\"content-code\">\n          <pre><code>${unsafeHTML(this._renderedHtml)}</code></pre>\n        </div>\n      `;\n    }\n    return html`<div class=\"content-rich\">${unsafeHTML(this._renderedHtml)}</div>`;\n  }\n\n  render() {\n    const showLangBadge = this.format === 'code' && this.language;\n\n    return html`\n      <div class=\"panel\" part=\"panel\">\n        <div class=\"header\" part=\"header\">\n          ${this.title\n            ? html`<span class=\"title\" part=\"title\">${this.title}</span>`\n            : nothing}\n          ${showLangBadge\n            ? html`<span class=\"lang-badge\">${this.language}</span>`\n            : nothing}\n          <button\n            class=\"action-btn ${this._copied ? 'copy-done' : ''}\"\n            title=\"Copy to clipboard\"\n            @click=${this._copy}\n          >\n            <sw-ui-icon name=${this._copied ? 'check-circle' : 'copy'} size=\"16\"></sw-ui-icon>\n          </button>\n          <button class=\"action-btn\" title=\"Close\" @click=${this._close}>\n            <sw-ui-icon name=\"close\" size=\"16\"></sw-ui-icon>\n          </button>\n        </div>\n        <div class=\"body\" part=\"body\">\n          ${this._renderBody()}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-ui-content-drawer': SwUiContentDrawer;\n  }\n}\n"],"names":["logger","getLogger","PURIFY_CONFIG","purifyHookInstalled","ensurePurifyHook","DOMPurify","node","SwUiContentDrawer","LitElement","entries","entry","parent","_a","changed","id","content","format","language","html","marked","raw","highlight","err","unsafeHTML","showLangBadge","nothing","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/UI/layout/sw-ui-modal.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+/**
+ * Wrap elements with this to make them modal.
+ *
+ * @slot   - Dialog content.
+ * @fires sw-modal-close - Cancelable. Fired on ESC or backdrop click; call
+ *                         `preventDefault()` to keep the modal open.
+ */
+export declare class SwUiModal extends LitElement {
+    static styles: import("lit").CSSResult;
+    open: boolean;
+    private dialog;
+    private _savedOverflow;
+    updated(changed: Map<string, unknown>): void;
+    private _animateClose;
+    /** ESC key — intercept native close and route through `_requestClose`. */
+    private _handleCancel;
+    /** Backdrop click — the `<dialog>` itself is the backdrop target. */
+    private _handleBackdropClick;
+    /** Dispatch a cancelable `sw-modal-close`; only close if not prevented. */
+    private _requestClose;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-ui-modal': SwUiModal;
+    }
+}
+//# sourceMappingURL=sw-ui-modal.d.ts.map

package/dist/components/UI/layout/sw-ui-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-modal.d.ts","sourceRoot":"","sources":["../../../../src/components/UI/layout/sw-ui-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;;;GAMG;AAEH,qBACa,SAAU,SAAQ,UAAU;IACvC,MAAM,CAAC,MAAM,0BAwFX;IAGF,IAAI,UAAS;IAGb,OAAO,CAAC,MAAM,CAAqB;IAEnC,OAAO,CAAC,cAAc,CAAuB;IAE7C,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAYrC,OAAO,CAAC,aAAa;IAerB,0EAA0E;IAC1E,OAAO,CAAC,aAAa,CAGnB;IAEF,qEAAqE;IACrE,OAAO,CAAC,oBAAoB,CAI1B;IAEF,2EAA2E;IAC3E,OAAO,CAAC,aAAa;IAWrB,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAM5B,MAAM;CAKP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}

package/dist/components/UI/layout/sw-ui-modal.js

@@ -0,0 +1,150 @@
+import { LitElement as d, html as c, css as m } from "lit";
+import { property as p, query as u, customElement as h } from "lit/decorators.js";
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, r = (a, o, i, s) => {
+  for (var e = s > 1 ? void 0 : s ? v(o, i) : o, n = a.length - 1, l; n >= 0; n--)
+    (l = a[n]) && (e = (s ? l(o, i, e) : l(e)) || e);
+  return s && e && f(o, i, e), e;
+};
+let t = class extends d {
+  constructor() {
+    super(...arguments), this.open = !1, this._savedOverflow = null, this._handleCancel = (a) => {
+      a.preventDefault(), this._requestClose();
+    }, this._handleBackdropClick = (a) => {
+      a.target === this.dialog && this._requestClose();
+    };
+  }
+  updated(a) {
+    a.has("open") && (this.open ? (this._savedOverflow = document.body.style.overflow, this.dialog.showModal(), document.body.style.overflow = "hidden") : this.dialog.open && this._animateClose());
+  }
+  _animateClose() {
+    this.dialog.classList.add("closing");
+    const a = (o) => {
+      o.target === this.dialog && (this.dialog.removeEventListener("animationend", a), this.dialog.classList.remove("closing"), this.dialog.close(), this._savedOverflow !== null && (document.body.style.overflow = this._savedOverflow, this._savedOverflow = null));
+    };
+    this.dialog.addEventListener("animationend", a);
+  }
+  /** Dispatch a cancelable `sw-modal-close`; only close if not prevented. */
+  _requestClose() {
+    const a = new CustomEvent("sw-modal-close", {
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0
+    });
+    this.dispatchEvent(a) && (this.open = !1);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.updateComplete.then(() => {
+      this.dialog.addEventListener("cancel", this._handleCancel), this.dialog.addEventListener("click", this._handleBackdropClick);
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.dialog.removeEventListener("cancel", this._handleCancel), this.dialog.removeEventListener("click", this._handleBackdropClick);
+  }
+  render() {
+    return c`<dialog part="dialog backdrop">
+      <div part="panel"><slot></slot></div>
+    </dialog>`;
+  }
+};
+t.styles = m`
+    :host {
+      --sw-modal-duration: 0.2s;
+      --sw-modal-animation: bounce-in var(--sw-modal-duration) ease-out;
+      --sw-modal-close-animation: bounce-out var(--sw-modal-duration) ease-out;
+      --sw-modal-backdrop-animation: backdrop-in var(--sw-modal-duration) ease-out;
+      --sw-modal-backdrop-close-animation: backdrop-out var(--sw-modal-duration) ease-out;
+    }
+    dialog {
+      border: none;
+      padding: 0;
+      background: transparent;
+      animation: var(--sw-modal-animation);
+      animation-fill-mode: backwards;
+    }
+
+    dialog::backdrop {
+      background: rgba(0, 0, 0, 0.5);
+      animation: var(--sw-modal-backdrop-animation);
+    }
+
+    @keyframes bounce-in {
+      from {
+        opacity: 0;
+        transform: scale(0.8) translateY(20px);
+      }
+      30% {
+        opacity: 1;
+      }
+      70% {
+        transform: scale(1.1) translateY(-5px);
+      }
+      to {
+        transform: scale(1) translateY(0);
+      }
+    }
+    @keyframes slide-up {
+      from {
+        transform: translateY(1000px);
+      }
+
+      to {
+        transform: translateY(0);
+      }
+    }
+
+    @keyframes backdrop-in {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+
+    @keyframes bounce-out {
+      from {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+      }
+      30% {
+        transform: scale(1.1) translateY(-5px);
+      }
+      70% {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+        transform: scale(0.8) translateY(20px);
+      }
+    }
+
+    @keyframes backdrop-out {
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+
+    dialog.closing {
+      animation: var(--sw-modal-close-animation);
+    }
+
+    dialog.closing::backdrop {
+      animation: var(--sw-modal-backdrop-close-animation);
+    }
+  `;
+r([
+  p({ type: Boolean, reflect: !0 })
+], t.prototype, "open", 2);
+r([
+  u("dialog")
+], t.prototype, "dialog", 2);
+t = r([
+  h("sw-ui-modal")
+], t);
+export {
+  t as SwUiModal
+};
+//# sourceMappingURL=sw-ui-modal.js.map

package/dist/components/UI/layout/sw-ui-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-modal.js","sources":["../../../../src/components/UI/layout/sw-ui-modal.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\n/**\n * Wrap elements with this to make them modal.\n *\n * @slot   - Dialog content.\n * @fires sw-modal-close - Cancelable. Fired on ESC or backdrop click; call\n *                         `preventDefault()` to keep the modal open.\n */\n\n@customElement('sw-ui-modal')\nexport class SwUiModal extends LitElement {\n  static styles = css`\n    :host {\n      --sw-modal-duration: 0.2s;\n      --sw-modal-animation: bounce-in var(--sw-modal-duration) ease-out;\n      --sw-modal-close-animation: bounce-out var(--sw-modal-duration) ease-out;\n      --sw-modal-backdrop-animation: backdrop-in var(--sw-modal-duration) ease-out;\n      --sw-modal-backdrop-close-animation: backdrop-out var(--sw-modal-duration) ease-out;\n    }\n    dialog {\n      border: none;\n      padding: 0;\n      background: transparent;\n      animation: var(--sw-modal-animation);\n      animation-fill-mode: backwards;\n    }\n\n    dialog::backdrop {\n      background: rgba(0, 0, 0, 0.5);\n      animation: var(--sw-modal-backdrop-animation);\n    }\n\n    @keyframes bounce-in {\n      from {\n        opacity: 0;\n        transform: scale(0.8) translateY(20px);\n      }\n      30% {\n        opacity: 1;\n      }\n      70% {\n        transform: scale(1.1) translateY(-5px);\n      }\n      to {\n        transform: scale(1) translateY(0);\n      }\n    }\n    @keyframes slide-up {\n      from {\n        transform: translateY(1000px);\n      }\n\n      to {\n        transform: translateY(0);\n      }\n    }\n\n    @keyframes backdrop-in {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n\n    @keyframes bounce-out {\n      from {\n        opacity: 1;\n        transform: scale(1) translateY(0);\n      }\n      30% {\n        transform: scale(1.1) translateY(-5px);\n      }\n      70% {\n        opacity: 1;\n      }\n      to {\n        opacity: 0;\n        transform: scale(0.8) translateY(20px);\n      }\n    }\n\n    @keyframes backdrop-out {\n      from {\n        opacity: 1;\n      }\n      to {\n        opacity: 0;\n      }\n    }\n\n    dialog.closing {\n      animation: var(--sw-modal-close-animation);\n    }\n\n    dialog.closing::backdrop {\n      animation: var(--sw-modal-backdrop-close-animation);\n    }\n  `;\n\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  @query('dialog')\n  private dialog!: HTMLDialogElement;\n\n  private _savedOverflow: string | null = null;\n\n  updated(changed: Map<string, unknown>) {\n    if (changed.has('open')) {\n      if (this.open) {\n        this._savedOverflow = document.body.style.overflow;\n        this.dialog.showModal();\n        document.body.style.overflow = 'hidden';\n      } else if (this.dialog.open) {\n        this._animateClose();\n      }\n    }\n  }\n\n  private _animateClose(): void {\n    this.dialog.classList.add('closing');\n    const onClose = (e: AnimationEvent) => {\n      if (e.target !== this.dialog) return;\n      this.dialog.removeEventListener('animationend', onClose);\n      this.dialog.classList.remove('closing');\n      this.dialog.close();\n      if (this._savedOverflow !== null) {\n        document.body.style.overflow = this._savedOverflow;\n        this._savedOverflow = null;\n      }\n    };\n    this.dialog.addEventListener('animationend', onClose);\n  }\n\n  /** ESC key — intercept native close and route through `_requestClose`. */\n  private _handleCancel = (e: Event): void => {\n    e.preventDefault();\n    this._requestClose();\n  };\n\n  /** Backdrop click — the `<dialog>` itself is the backdrop target. */\n  private _handleBackdropClick = (e: MouseEvent): void => {\n    if (e.target === this.dialog) {\n      this._requestClose();\n    }\n  };\n\n  /** Dispatch a cancelable `sw-modal-close`; only close if not prevented. */\n  private _requestClose(): void {\n    const ev = new CustomEvent('sw-modal-close', {\n      bubbles: true,\n      composed: true,\n      cancelable: true,\n    });\n    if (this.dispatchEvent(ev)) {\n      this.open = false;\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.updateComplete.then(() => {\n      this.dialog.addEventListener('cancel', this._handleCancel);\n      this.dialog.addEventListener('click', this._handleBackdropClick);\n    });\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.dialog.removeEventListener('cancel', this._handleCancel);\n    this.dialog.removeEventListener('click', this._handleBackdropClick);\n  }\n\n  render() {\n    return html`<dialog part=\"dialog backdrop\">\n      <div part=\"panel\"><slot></slot></div>\n    </dialog>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sw-ui-modal': SwUiModal;\n  }\n}\n"],"names":["SwUiModal","LitElement","e","changed","onClose","ev","html","css","__decorateClass","property","query","customElement"],"mappings":";;;;;;;AAYO,IAAMA,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GA4FL,KAAA,OAAO,IAKP,KAAQ,iBAAgC,MA8BxC,KAAQ,gBAAgB,CAACC,MAAmB;AAC1C,MAAAA,EAAE,eAAA,GACF,KAAK,cAAA;AAAA,IACP,GAGA,KAAQ,uBAAuB,CAACA,MAAwB;AACtD,MAAIA,EAAE,WAAW,KAAK,UACpB,KAAK,cAAA;AAAA,IAET;AAAA,EAAA;AAAA,EAtCA,QAAQC,GAA+B;AACrC,IAAIA,EAAQ,IAAI,MAAM,MAChB,KAAK,QACP,KAAK,iBAAiB,SAAS,KAAK,MAAM,UAC1C,KAAK,OAAO,UAAA,GACZ,SAAS,KAAK,MAAM,WAAW,YACtB,KAAK,OAAO,QACrB,KAAK,cAAA;AAAA,EAGX;AAAA,EAEQ,gBAAsB;AAC5B,SAAK,OAAO,UAAU,IAAI,SAAS;AACnC,UAAMC,IAAU,CAACF,MAAsB;AACrC,MAAIA,EAAE,WAAW,KAAK,WACtB,KAAK,OAAO,oBAAoB,gBAAgBE,CAAO,GACvD,KAAK,OAAO,UAAU,OAAO,SAAS,GACtC,KAAK,OAAO,MAAA,GACR,KAAK,mBAAmB,SAC1B,SAAS,KAAK,MAAM,WAAW,KAAK,gBACpC,KAAK,iBAAiB;AAAA,IAE1B;AACA,SAAK,OAAO,iBAAiB,gBAAgBA,CAAO;AAAA,EACtD;AAAA;AAAA,EAgBQ,gBAAsB;AAC5B,UAAMC,IAAK,IAAI,YAAY,kBAAkB;AAAA,MAC3C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,IAAA,CACb;AACD,IAAI,KAAK,cAAcA,CAAE,MACvB,KAAK,OAAO;AAAA,EAEhB;AAAA,EAEA,oBAA0B;AACxB,UAAM,kBAAA,GACN,KAAK,eAAe,KAAK,MAAM;AAC7B,WAAK,OAAO,iBAAiB,UAAU,KAAK,aAAa,GACzD,KAAK,OAAO,iBAAiB,SAAS,KAAK,oBAAoB;AAAA,IACjE,CAAC;AAAA,EACH;AAAA,EAEA,uBAA6B;AAC3B,UAAM,qBAAA,GACN,KAAK,OAAO,oBAAoB,UAAU,KAAK,aAAa,GAC5D,KAAK,OAAO,oBAAoB,SAAS,KAAK,oBAAoB;AAAA,EACpE;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA;AAAA;AAAA,EAGT;AACF;AA1KaN,EACJ,SAASO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2FhBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3F/BT,EA4FX,WAAA,QAAA,CAAA;AAGQQ,EAAA;AAAA,EADPE,EAAM,QAAQ;AAAA,GA9FJV,EA+FH,WAAA,UAAA,CAAA;AA/FGA,IAANQ,EAAA;AAAA,EADNG,EAAc,aAAa;AAAA,GACfX,CAAA;"}

package/dist/components/UI/layout/sw-ui-responsive-container.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+/**
+ * Resizes itself to an appropriate modal size based on viewport size
+ * @slot items to hold inside responsive modal
+ */
+export declare class SwUiResponsiveContainer extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sw-ui-responsive-container': SwUiResponsiveContainer;
+    }
+}
+//# sourceMappingURL=sw-ui-responsive-container.d.ts.map

package/dist/components/UI/layout/sw-ui-responsive-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sw-ui-responsive-container.d.ts","sourceRoot":"","sources":["../../../../src/components/UI/layout/sw-ui-responsive-container.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;GAGG;AACH,qBACa,uBAAwB,SAAQ,UAAU;IACrD,MAAM,CAAC,MAAM,0BA0DX;IAEF,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B,EAAE,uBAAuB,CAAC;KACvD;CACF"}