@orca-pt/orca-components 1.0.2 → 1.0.4

package/dist/orca-components.es.js

@@ -1,4 +1,4 @@
-import { computed, unref, ref, watch, onMounted, nextTick, defineComponent, createElementBlock, openBlock, createElementVNode, createStaticVNode, createVNode, Fragment, renderList, toDisplayString, createTextVNode, onUnmounted, createBlock, withCtx, createCommentVNode, normalizeStyle, normalizeClass, createSlots, Transition, isRef, withModifiers } from "vue";
+import { computed, unref, ref, watch, onMounted, nextTick, defineComponent, createElementBlock, openBlock, createElementVNode, createStaticVNode, createVNode, Fragment, renderList, toDisplayString, createTextVNode, onUnmounted, createBlock, withCtx, createCommentVNode, normalizeStyle, normalizeClass, createSlots, useCssVars, Transition, isRef, withModifiers } from "vue";
 import { VCard, VImg, VCardItem, VCardTitle, VBtn, VIcon, VExpandTransition, VProgressCircular, VDialog } from "vuetify/components";
 import MarkdownIt from "markdown-it";
 import hljs from "highlight.js";
@@ -167,6 +167,11 @@ const MARKERS = [
     start: "[orca.loading.map.start]",
     end: "[orca.loading.map.end]"
   },
+  {
+    type: "html-loading",
+    start: "[orca.loading.html.start]",
+    end: "[orca.loading.html.end]"
+  },
   // Content markers
   { type: "image", start: "[orca.image.start]", end: "[orca.image.end]" },
   { type: "video", start: "[orca.video.start]", end: "[orca.video.end]" },
@@ -195,7 +200,8 @@ const MARKERS = [
     start: "[orca.tracing.start]",
     end: "[orca.tracing.end]"
   },
-  { type: "audio", start: "[orca.audio.start]", end: "[orca.audio.end]" }
+  { type: "audio", start: "[orca.audio.start]", end: "[orca.audio.end]" },
+  { type: "html", start: "[orca.html.start]", end: "[orca.html.end]" }
 ];
 const GENERAL_LOADING_TYPES = [
   "general-loading",
@@ -387,7 +393,7 @@ function parseTracing(payload) {
 function isLoadingType$1(type) {
   return type.includes("-loading");
 }
-const SIMPLE_CONTENT_TYPES = ["image", "video", "youtube"];
+const SIMPLE_CONTENT_TYPES = ["image", "video", "youtube", "html"];
 const PARSER_MAP = {
   card: parseCard,
   location: parseLocation,
@@ -883,10 +889,10 @@ function useMarkdown() {
   };
   return { render };
 }
-const _hoisted_1$e = { class: "image-container tw-my-4" };
-const _hoisted_2$a = { class: "image-wrapper" };
-const _hoisted_3$7 = ["src"];
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_1$f = { class: "image-container tw-my-4" };
+const _hoisted_2$b = { class: "image-wrapper" };
+const _hoisted_3$8 = ["src"];
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "OrcaImage",
   props: {
     url: {}
@@ -899,15 +905,15 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       emit("open-modal", props.url);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
-        createElementVNode("div", _hoisted_2$a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+        createElementVNode("div", _hoisted_2$b, [
           createElementVNode("img", {
             src: __props.url,
             alt: "Generated image",
             class: "orca-image",
             loading: "lazy",
             onClick: openModal
-          }, null, 8, _hoisted_3$7),
+          }, null, 8, _hoisted_3$8),
           _cache[0] || (_cache[0] = createStaticVNode('<div class="image-overlay" data-v-e4f9d4c4><div class="zoom-icon" data-v-e4f9d4c4><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-v-e4f9d4c4><circle cx="11" cy="11" r="8" data-v-e4f9d4c4></circle><path d="m21 21-4.35-4.35" data-v-e4f9d4c4></path><line x1="11" y1="8" x2="11" y2="14" data-v-e4f9d4c4></line><line x1="8" y1="11" x2="14" y2="11" data-v-e4f9d4c4></line></svg></div></div>', 1))
         ])
       ]);
@@ -921,10 +927,10 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const OrcaImage = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-e4f9d4c4"]]);
-const _hoisted_1$d = { class: "orca-video-container" };
-const _hoisted_2$9 = { class: "video-wrapper" };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const OrcaImage = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-e4f9d4c4"]]);
+const _hoisted_1$e = { class: "orca-video-container" };
+const _hoisted_2$a = { class: "video-wrapper" };
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "OrcaVideo",
   props: {
     url: {}
@@ -943,8 +949,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       ]
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$d, [
-        createElementVNode("div", _hoisted_2$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+        createElementVNode("div", _hoisted_2$a, [
           createVNode(unref(VideoPlayer), {
             options: {
               ...videoOptions.value,
@@ -962,11 +968,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const OrcaVideo = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-7a20a30c"]]);
-const _hoisted_1$c = { class: "orca-youtube-container" };
-const _hoisted_2$8 = { class: "youtube-wrapper" };
-const _hoisted_3$6 = ["src"];
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const OrcaVideo = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-7a20a30c"]]);
+const _hoisted_1$d = { class: "orca-youtube-container" };
+const _hoisted_2$9 = { class: "youtube-wrapper" };
+const _hoisted_3$7 = ["src"];
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "OrcaYouTube",
   props: {
     url: {}
@@ -978,8 +984,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       return `https://www.youtube.com/embed/${videoId}`;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$c, [
-        createElementVNode("div", _hoisted_2$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$d, [
+        createElementVNode("div", _hoisted_2$9, [
           createElementVNode("iframe", {
             width: "100%",
             height: "100%",
@@ -988,28 +994,28 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
             allowfullscreen: "",
             class: "youtube-iframe"
-          }, null, 8, _hoisted_3$6)
+          }, null, 8, _hoisted_3$7)
         ])
       ]);
     };
   }
 });
-const OrcaYouTube = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-9cd52c38"]]);
-const _hoisted_1$b = { class: "orca-audio-container" };
-const _hoisted_2$7 = { class: "audio-list" };
-const _hoisted_3$5 = { class: "audio-content" };
+const OrcaYouTube = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-9cd52c38"]]);
+const _hoisted_1$c = { class: "orca-audio-container" };
+const _hoisted_2$8 = { class: "audio-list" };
+const _hoisted_3$6 = { class: "audio-content" };
 const _hoisted_4$4 = { class: "audio-label" };
 const _hoisted_5 = ["type"];
 const _hoisted_6 = ["src", "type"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "OrcaAudio",
   props: {
     audioItems: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$b, [
-        createElementVNode("div", _hoisted_2$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+        createElementVNode("div", _hoisted_2$8, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.audioItems, (audio, audioIndex) => {
             return openBlock(), createElementBlock("div", {
               key: audioIndex,
@@ -1030,7 +1036,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                   })
                 ])
               ], -1)),
-              createElementVNode("div", _hoisted_3$5, [
+              createElementVNode("div", _hoisted_3$6, [
                 createElementVNode("p", _hoisted_4$4, toDisplayString(audio.label), 1),
                 createElementVNode("audio", {
                   controls: "",
@@ -1051,12 +1057,12 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const OrcaAudio = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-ade9342b"]]);
-const _hoisted_1$a = { class: "orca-location-container" };
-const _hoisted_2$6 = { class: "map-wrapper" };
-const _hoisted_3$4 = { class: "location-info" };
+const OrcaAudio = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-ade9342b"]]);
+const _hoisted_1$b = { class: "orca-location-container" };
+const _hoisted_2$7 = { class: "map-wrapper" };
+const _hoisted_3$5 = { class: "location-info" };
 const _hoisted_4$3 = { class: "location-text" };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "OrcaLocation",
   props: {
     latitude: {},
@@ -1119,15 +1125,15 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
-        createElementVNode("div", _hoisted_2$6, [
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
+        createElementVNode("div", _hoisted_2$7, [
           (openBlock(), createElementBlock("div", {
             ref: (el) => onMapContainerReady(el),
             class: "map-container",
             key: `map-${__props.latitude}-${__props.longitude}`
           }))
         ]),
-        createElementVNode("div", _hoisted_3$4, [
+        createElementVNode("div", _hoisted_3$5, [
           _cache[0] || (_cache[0] = createElementVNode("div", { class: "location-icon" }, [
             createElementVNode("svg", {
               width: "16",
@@ -1151,13 +1157,13 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const OrcaLocation = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-99a42606"]]);
-const _hoisted_1$9 = { class: "orca-card-container" };
-const _hoisted_2$5 = {
+const OrcaLocation = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-99a42606"]]);
+const _hoisted_1$a = { class: "orca-card-container" };
+const _hoisted_2$6 = {
   key: 0,
   class: "card-image-wrapper"
 };
-const _hoisted_3$3 = {
+const _hoisted_3$4 = {
   key: 1,
   class: "card-subheader"
 };
@@ -1165,14 +1171,14 @@ const _hoisted_4$2 = {
   key: 2,
   class: "card-text"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "OrcaCardList",
   props: {
     cards: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.cards, (card, i) => {
           return openBlock(), createBlock(unref(VCard), {
             key: i,
@@ -1180,7 +1186,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             elevation: "2"
           }, {
             default: withCtx(() => [
-              card.photo ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
+              card.photo ? (openBlock(), createElementBlock("div", _hoisted_2$6, [
                 createVNode(unref(VImg), {
                   src: card.photo,
                   height: "223",
@@ -1199,7 +1205,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 2
                   }, 1024)) : createCommentVNode("", true),
-                  card.subheader ? (openBlock(), createElementBlock("span", _hoisted_3$3, toDisplayString(card.subheader), 1)) : createCommentVNode("", true),
+                  card.subheader ? (openBlock(), createElementBlock("span", _hoisted_3$4, toDisplayString(card.subheader), 1)) : createCommentVNode("", true),
                   card.text ? (openBlock(), createElementBlock("p", _hoisted_4$2, toDisplayString(card.text), 1)) : createCommentVNode("", true)
                 ]),
                 _: 2
@@ -1212,9 +1218,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const OrcaCardList = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-d9e3b93c"]]);
-const _hoisted_1$8 = { class: "orca-buttons-container tw-my-4" };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const OrcaCardList = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-d9e3b93c"]]);
+const _hoisted_1$9 = { class: "orca-buttons-container tw-my-4" };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "OrcaButtons",
   props: {
     buttons: {},
@@ -1231,7 +1237,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$9, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(groupedButtons.value, (row, rowIndex) => {
           return openBlock(), createElementBlock("div", {
             key: rowIndex,
@@ -1275,18 +1281,18 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const OrcaButtons = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-480c6090"]]);
-const _hoisted_1$7 = {
+const OrcaButtons = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-480c6090"]]);
+const _hoisted_1$8 = {
   key: 0,
   class: "orca-trace-container"
 };
-const _hoisted_2$4 = { class: "trace-header" };
-const _hoisted_3$2 = {
+const _hoisted_2$5 = { class: "trace-header" };
+const _hoisted_3$3 = {
   key: 0,
   class: "trace-content"
 };
 const _hoisted_4$1 = { class: "trace-pre" };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "OrcaTracing",
   props: {
     tracingData: {},
@@ -1315,13 +1321,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       traceVisible.value = !traceVisible.value;
     };
     return (_ctx, _cache) => {
-      return shouldShow.value ? (openBlock(), createElementBlock("div", _hoisted_1$7, [
+      return shouldShow.value ? (openBlock(), createElementBlock("div", _hoisted_1$8, [
         createVNode(unref(VCard), {
           class: "trace-card",
           elevation: "2"
         }, {
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_2$4, [
+            createElementVNode("div", _hoisted_2$5, [
               _cache[0] || (_cache[0] = createElementVNode("div", { class: "trace-header-content" }, [
                 createElementVNode("div", { class: "trace-icon" }, [
                   createElementVNode("svg", {
@@ -1352,7 +1358,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
             ]),
             createVNode(unref(VExpandTransition), null, {
               default: withCtx(() => [
-                isVisible.value ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
+                isVisible.value ? (openBlock(), createElementBlock("div", _hoisted_3$3, [
                   createElementVNode("pre", _hoisted_4$1, toDisplayString(tracingContent.value), 1)
                 ])) : createCommentVNode("", true)
               ]),
@@ -1365,7 +1371,138 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const OrcaTracing = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-69e262d5"]]);
+const OrcaTracing = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-69e262d5"]]);
+const _hoisted_1$7 = { class: "orca-html-container" };
+const _hoisted_2$4 = { class: "html-wrapper" };
+const _hoisted_3$2 = ["srcdoc"];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "OrcaHtml",
+  props: {
+    content: {}
+  },
+  setup(__props) {
+    useCssVars((_ctx) => ({
+      "v22560b2d": iframeHeight.value + "px"
+    }));
+    const props = __props;
+    const iframeRef = ref(null);
+    const iframeHeight = ref(400);
+    const sanitizeContent = (content) => {
+      let sanitized = content.replace(/<\?xml[^?]*\?>/gi, "");
+      sanitized = sanitized.replace(/<!DOCTYPE[^>]*>/gi, "");
+      return sanitized.trim();
+    };
+    const wrappedHtml = computed(() => {
+      return `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    html, body {
+      margin: 0;
+      padding: 0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      background: transparent;
+      overflow: hidden;
+    }
+    body {
+      padding: 8px;
+    }
+    /* SVG responsiveness for matplotlib */
+    svg {
+      max-width: 100%;
+      height: auto;
+    }
+    /* Plotly container responsiveness */
+    .plotly-graph-div {
+      width: 100% !important;
+    }
+  </style>
+</head>
+<body>
+  ${sanitizeContent(props.content)}
+  <script>
+    // Auto-resize iframe based on content
+    function sendHeight() {
+      const height = Math.max(
+        document.body.scrollHeight,
+        document.body.offsetHeight,
+        document.documentElement.scrollHeight,
+        document.documentElement.offsetHeight
+      );
+      window.parent.postMessage({ type: 'orca-html-resize', height: height + 16 }, '*');
+    }
+    
+    // Initial send
+    setTimeout(sendHeight, 100);
+    
+    // Send on resize
+    window.addEventListener('resize', sendHeight);
+    
+    // Send when images/content loads
+    document.addEventListener('DOMContentLoaded', sendHeight);
+    window.addEventListener('load', sendHeight);
+    
+    // Observe DOM changes for dynamic content (like Plotly)
+    const observer = new MutationObserver(sendHeight);
+    observer.observe(document.body, { childList: true, subtree: true, attributes: true });
+  <\/script>
+</body>
+</html>`;
+    });
+    const handleIframeLoad = () => {
+      adjustHeight();
+    };
+    const adjustHeight = () => {
+      if (iframeRef.value) {
+        try {
+          const doc = iframeRef.value.contentDocument;
+          if (doc && doc.body) {
+            const height = Math.max(doc.body.scrollHeight, doc.body.offsetHeight);
+            if (height > 0) {
+              iframeHeight.value = height + 16;
+            }
+          }
+        } catch (e) {
+        }
+      }
+    };
+    const handleMessage = (event) => {
+      if (event.data && event.data.type === "orca-html-resize") {
+        const newHeight = event.data.height;
+        if (newHeight && newHeight > 0) {
+          iframeHeight.value = Math.min(newHeight, 800);
+        }
+      }
+    };
+    onMounted(() => {
+      window.addEventListener("message", handleMessage);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("message", handleMessage);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+        createElementVNode("div", _hoisted_2$4, [
+          createElementVNode("iframe", {
+            ref_key: "iframeRef",
+            ref: iframeRef,
+            srcdoc: wrappedHtml.value,
+            sandbox: "allow-scripts",
+            class: "html-iframe",
+            onLoad: handleIframeLoad
+          }, null, 40, _hoisted_3$2)
+        ])
+      ]);
+    };
+  }
+});
+const OrcaHtml = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-c4d7eb31"]]);
 const _hoisted_1$6 = ["innerHTML"];
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "ContentElement",
@@ -1423,7 +1560,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           "tracing-data": __props.element.content,
           visibility: __props.visibility,
           "is-admin": __props.isAdmin
-        }, null, 8, ["tracing-data", "visibility", "is-admin"])) : createCommentVNode("", true)
+        }, null, 8, ["tracing-data", "visibility", "is-admin"])) : __props.element.type === "html" ? (openBlock(), createBlock(OrcaHtml, {
+          key: 9,
+          content: __props.element.content
+        }, null, 8, ["content"])) : createCommentVNode("", true)
       ]);
     };
   }
@@ -1828,7 +1968,7 @@ const OrcaMarkdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data
 const version = "1.0.2";
 const packageInfo = {
   name: "@orca-pt/orca-components",
-  version: "1.0.2",
+  undefined: void 0,
   description: "Orca native components for rendering special content markers",
   author: "Orca Team"
 };