@meistrari/chat-nuxt 1.0.0

package/dist/runtime/components/renderers/csv-renderer.vue

@@ -0,0 +1,203 @@
+<script setup>
+const props = defineProps({
+  url: { type: String, required: true }
+});
+const data = ref(null);
+const isLoading = ref(true);
+const error = ref(null);
+const maxVisibleRows = ref(100);
+const modalOpen = ref(false);
+const modalContent = ref({ title: "", content: "" });
+function detectDelimiter(firstLine) {
+  if (!firstLine || firstLine.trim().length === 0)
+    return ",";
+  const delimiters = [",", ";", "	", "|"];
+  let maxCount = 0;
+  let bestDelimiter = ",";
+  for (const delimiter of delimiters) {
+    const regex = new RegExp(delimiter.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g");
+    const count = (firstLine.match(regex) || []).length;
+    if (count > maxCount) {
+      maxCount = count;
+      bestDelimiter = delimiter;
+    }
+  }
+  return bestDelimiter;
+}
+function parseCsv(text) {
+  const lines = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n").split("\n").filter((line) => line.trim());
+  if (lines.length === 0) {
+    return { headers: [], rows: [] };
+  }
+  const delimiter = detectDelimiter(lines[0] ?? "");
+  const parseRow = (line, maxColumns) => {
+    const result = [];
+    let current = "";
+    let inQuotes = false;
+    for (let i = 0; i < line.length; i++) {
+      const char = line[i];
+      if (char === '"') {
+        inQuotes = !inQuotes;
+      } else if (char === delimiter && !inQuotes) {
+        if (maxColumns && result.length >= maxColumns - 1) {
+          current += char;
+        } else {
+          result.push(current.trim());
+          current = "";
+        }
+      } else {
+        current += char;
+      }
+    }
+    result.push(current.trim());
+    return result;
+  };
+  const rawHeaders = parseRow(lines[0] ?? "");
+  let headers = rawHeaders;
+  while (headers.length > 0 && headers[headers.length - 1] === "") {
+    headers = headers.slice(0, -1);
+  }
+  const rows = lines.slice(1).map((row) => parseRow(row, headers.length));
+  return { headers, rows };
+}
+async function fetchCsv() {
+  if (!props.url)
+    return;
+  isLoading.value = true;
+  error.value = null;
+  try {
+    const response = await fetch(props.url);
+    const text = await response.text();
+    data.value = parseCsv(text);
+  } catch (err) {
+    console.error("Failed to fetch CSV:", err);
+    error.value = err?.message ?? "Falha ao carregar o CSV";
+  } finally {
+    isLoading.value = false;
+  }
+}
+function openModal(header, content) {
+  modalContent.value = { title: header, content };
+  modalOpen.value = true;
+}
+function loadMore() {
+  maxVisibleRows.value += 100;
+}
+const visibleRows = computed(() => data.value?.rows.slice(0, maxVisibleRows.value) ?? []);
+const hasMore = computed(() => (data.value?.rows.length ?? 0) > maxVisibleRows.value);
+const totalRows = computed(() => data.value?.rows.length ?? 0);
+onMounted(fetchCsv);
+watch(() => props.url, fetchCsv);
+</script>
+
+<template>
+    <div class="h-full flex flex-col">
+        <!-- Loading -->
+        <div v-if="isLoading" class="flex-1 flex items-center justify-center h-full min-h-[60vh]">
+            <TelaIconSpinner animate-spin class="text-24px text-gray-400" />
+        </div>
+
+        <!-- Error -->
+        <div v-else-if="error" class="flex-1 flex items-center justify-center h-full min-h-[60vh]">
+            <div class="flex-col justify-center">
+                <p class="text-14px text-red-600 mt-8px">
+                    {{ error }}
+                </p>
+            </div>
+        </div>
+
+        <!-- Empty -->
+        <div v-else-if="!data || data.rows.length === 0" class="flex-1 flex items-center justify-center">
+            <div class="text-center">
+                <TelaIcon name="i-ph-table" class="text-32px text-gray-400" />
+                <p class="text-14px text-gray-500 mt-8px">
+                    Nenhum dado encontrado
+                </p>
+            </div>
+        </div>
+
+        <!-- Table -->
+        <div v-else class="flex-1 overflow-auto">
+            <div class="p-16px">
+                <div class="overflow-x-auto rounded-12px border border-gray-200 bg-white">
+                    <table class="w-full border-collapse">
+                        <thead>
+                            <tr class="bg-gray-50">
+                                <th
+                                    v-for="(header, index) in data.headers"
+                                    :key="index"
+                                    class="px-12px py-10px text-left text-12px font-semibold text-gray-600 border-b border-gray-200 whitespace-nowrap"
+                                >
+                                    {{ header }}
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr
+                                v-for="(row, rowIndex) in visibleRows"
+                                :key="rowIndex"
+                                class="hover:bg-gray-50 transition-colors"
+                            >
+                                <td
+                                    v-for="(header, cellIndex) in data.headers"
+                                    :key="cellIndex"
+                                    class="px-12px py-10px text-13px text-gray-700 border-b border-gray-100 max-w-300px"
+                                >
+                                    <div class="flex items-center gap-4px">
+                                        <span class="truncate">{{ row[cellIndex] || "\u2014" }}</span>
+                                        <button
+                                            v-if="row[cellIndex] && row[cellIndex].length > 50"
+                                            type="button"
+                                            class="shrink-0 w-20px h-20px rounded flex items-center justify-center text-gray-400 hover:bg-gray-100 hover:text-gray-600"
+                                            @click="openModal(header, row[cellIndex])"
+                                        >
+                                            <TelaIcon name="i-ph-arrows-out" class="text-12px" />
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <!-- Footer -->
+                <div class="flex items-center justify-center gap-16px mt-12px">
+                    <p class="text-12px text-gray-400">
+                        {{ visibleRows.length }} de {{ totalRows }} linhas · {{ data.headers.length }} colunas
+                    </p>
+                    <TelaButton
+                        v-if="hasMore"
+                        size="sm"
+                        variant="secondary"
+                        @click="loadMore"
+                    >
+                        Carregar mais
+                    </TelaButton>
+                </div>
+            </div>
+        </div>
+
+        <!-- Modal -->
+        <TelaModal
+            :model-value="modalOpen"
+            modal-width="lg"
+            compact
+            hide-dividers
+            @close="modalOpen = false"
+        >
+            <div class="flex flex-col gap-16px px-8px">
+                <div class="flex justify-between items-center">
+                    <p class="text-14px font-semibold text-gray-700">
+                        {{ modalContent.title }}
+                    </p>
+                    <TelaCopyButton :content="modalContent.content" />
+                </div>
+                <div class="w-full max-h-70vh overflow-y-auto">
+                    <p class="text-14px text-gray-700 whitespace-pre-wrap">
+                        {{ modalContent.content }}
+                    </p>
+                </div>
+            </div>
+        </TelaModal>
+    </div>
+</template>

package/dist/runtime/components/renderers/csv-renderer.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    url: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/image-renderer.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    url: string;
+    alt?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/image-renderer.vue

@@ -0,0 +1,44 @@
+<script setup>
+defineProps({
+  url: { type: String, required: true },
+  alt: { type: String, required: false }
+});
+const isLoading = ref(true);
+const error = ref(false);
+function onLoad() {
+  isLoading.value = false;
+}
+function onError() {
+  isLoading.value = false;
+  error.value = true;
+}
+</script>
+
+<template>
+    <div class="h-full flex flex-col min-h-[60vh]">
+        <!-- Loading -->
+        <div v-if="isLoading" class="flex-1 flex items-center justify-center">
+            <TelaIconSpinner animate-spin class="text-24px text-gray-400" />
+        </div>
+
+        <!-- Error -->
+        <div v-else-if="error" class="flex-1 flex items-center justify-center">
+            <div class="text-center">
+                <TelaIcon name="i-ph-image-broken" class="text-32px text-gray-400" />
+                <p class="text-14px text-gray-500 mt-8px">
+                    Falha ao carregar imagem
+                </p>
+            </div>
+        </div>
+
+        <div v-show="!isLoading && !error" class="flex-1 flex items-center justify-center p-20px">
+            <img
+                :src="url"
+                :alt="alt ?? 'Imagem'"
+                class="max-w-full max-h-full object-contain rounded-8px shadow-lg"
+                @load="onLoad"
+                @error="onError"
+            >
+        </div>
+    </div>
+</template>

package/dist/runtime/components/renderers/image-renderer.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    url: string;
+    alt?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/markdown-renderer.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    url: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/markdown-renderer.vue

@@ -0,0 +1,66 @@
+<script setup>
+const props = defineProps({
+  url: { type: String, required: true }
+});
+const content = ref(null);
+const isLoading = ref(true);
+const error = ref(null);
+async function fetchContent() {
+  if (!props.url)
+    return;
+  isLoading.value = true;
+  error.value = null;
+  try {
+    const response = await fetch(props.url);
+    content.value = await response.text();
+  } catch (err) {
+    console.error("Failed to fetch markdown content:", err);
+    error.value = err?.message ?? "Falha ao carregar conte\xFAdo";
+  } finally {
+    isLoading.value = false;
+  }
+}
+onMounted(fetchContent);
+watch(() => props.url, fetchContent);
+</script>
+
+<template>
+    <div class="h-full flex flex-col min-h-[60vh]">
+        <div v-if="isLoading" class="flex-1 flex items-center justify-center">
+            <TelaIconSpinner animate-spin class="text-24px text-gray-400" />
+        </div>
+
+        <div v-else-if="error" class="flex-1 flex items-center justify-center">
+            <div class="text-center">
+                <TelaIcon name="i-ph-warning" class="text-32px text-gray-400" />
+                <p class="text-14px text-gray-500 mt-8px">
+                    {{ error }}
+                </p>
+            </div>
+        </div>
+
+        <div v-else-if="content" class="flex-1 overflow-auto">
+            <div class="markdown-content code-theme p-24px">
+                <ClientOnly>
+                    <AppMarkdownRender
+                        :content="content"
+                        :render-code-blocks-as-pre="true"
+                    />
+                </ClientOnly>
+            </div>
+        </div>
+
+        <div v-else class="flex-1 flex items-center justify-center">
+            <div class="text-center">
+                <TelaIcon name="i-ph-file-text" class="text-32px text-gray-400" />
+                <p class="text-14px text-gray-500 mt-8px">
+                    Nenhum conteúdo disponível
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.markdown-content{color:#1a1a1a;line-height:1.7}.markdown-content :deep(h1){border-bottom:1px solid #e5e7eb;font-size:2em;font-weight:700;margin-bottom:16px;margin-top:0;padding-bottom:8px}.markdown-content :deep(h2){border-bottom:1px solid #f3f4f6;font-size:1.5em;font-weight:600;margin-bottom:12px;margin-top:24px;padding-bottom:6px}.markdown-content :deep(h3){font-size:1.25em;font-weight:600;margin-bottom:10px;margin-top:20px}.markdown-content :deep(h4),.markdown-content :deep(h5),.markdown-content :deep(h6){font-size:1em;font-weight:600;margin-bottom:8px;margin-top:16px}.markdown-content :deep(p){margin-bottom:16px}.markdown-content :deep(ol),.markdown-content :deep(ul){margin-bottom:16px;padding-left:24px}.markdown-content :deep(li){margin-bottom:6px}.markdown-content :deep(blockquote){border-left:4px solid #e5e7eb;color:#6b7280;font-style:italic;margin:16px 0;padding-left:16px}.markdown-content :deep(hr){border:none;border-top:1px solid #e5e7eb;margin:24px 0}.markdown-content :deep(a){color:#2563eb;text-decoration:none}.markdown-content :deep(a:hover){text-decoration:underline}.markdown-content :deep(table){border-collapse:collapse;margin:16px 0;width:100%}.markdown-content :deep(td),.markdown-content :deep(th){border:1px solid #e5e7eb;padding:10px 14px;text-align:left}.markdown-content :deep(th){background-color:#f9fafb;font-weight:600}.markdown-content :deep(tr:nth-child(2n)){background-color:#fafafa}.markdown-content :deep(img){border-radius:8px;height:auto;margin:16px 0;max-width:100%}
+</style>

package/dist/runtime/components/renderers/markdown-renderer.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    url: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/mermaid-diagram.d.vue.ts

@@ -0,0 +1,7 @@
+import { type MarkdownNode } from '../../utils/markdown-nodes.js';
+type __VLS_Props = {
+    node?: MarkdownNode;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/mermaid-diagram.vue

@@ -0,0 +1,165 @@
+<script setup>
+import DOMPurify from "dompurify";
+import { extractMermaidSource } from "../../utils/markdown-nodes";
+const props = defineProps({
+  node: { type: Object, required: false }
+});
+const VIEWPORT_PADDING = 32;
+const diagramSource = computed(() => (extractMermaidSource(props.node) ?? "").trim());
+const viewportShellRef = ref(null);
+const viewportRef = ref(null);
+const svgContainerRef = ref(null);
+const svgSize = ref({ width: 800, height: 480 });
+const { renderedSvg, renderedError, isFallbackRendering } = useMermaidRenderer(diagramSource, svgContainerRef);
+const sanitizedSvg = computed(() => {
+  if (!renderedSvg.value) {
+    return "";
+  }
+  return DOMPurify.sanitize(renderedSvg.value, { USE_PROFILES: { svg: true, svgFilters: true } });
+});
+const {
+  zoom,
+  isDragging,
+  viewportStyle,
+  scaledCanvasStyle,
+  svgStyle,
+  fitToViewport,
+  zoomIn,
+  zoomOut,
+  handleMouseDown,
+  handleMouseMove,
+  stopDragging,
+  MIN_ZOOM,
+  MAX_ZOOM
+} = useZoomPan(viewportShellRef, viewportRef, svgSize, renderedSvg);
+const {
+  exportState,
+  copyLabel,
+  exportLabel,
+  handleCopy,
+  handleDownloadJpeg
+} = useDiagramExport(diagramSource, renderedSvg, svgContainerRef, svgSize);
+function parseSvgSize(svgMarkup) {
+  if (!import.meta.client) {
+    return { width: 800, height: 480 };
+  }
+  const doc = new DOMParser().parseFromString(svgMarkup, "image/svg+xml");
+  const svg = doc.documentElement;
+  const viewBox = svg.getAttribute("viewBox")?.split(/\s+/).map(Number) ?? [];
+  const width = Number.parseFloat(svg.getAttribute("width") ?? "");
+  const height = Number.parseFloat(svg.getAttribute("height") ?? "");
+  return {
+    width: Number.isFinite(width) && width > 0 ? width : viewBox[2] || 800,
+    height: Number.isFinite(height) && height > 0 ? height : viewBox[3] || 480
+  };
+}
+function measureRenderedSvg(container) {
+  const svgElement = container?.querySelector("svg");
+  if (!svgElement) {
+    return null;
+  }
+  try {
+    const box = svgElement.getBBox();
+    if (box.width > 0 && box.height > 0) {
+      return {
+        width: box.width + VIEWPORT_PADDING,
+        height: box.height + VIEWPORT_PADDING
+      };
+    }
+  } catch {
+  }
+  const width = Number.parseFloat(svgElement.getAttribute("width") ?? "");
+  const height = Number.parseFloat(svgElement.getAttribute("height") ?? "");
+  if (Number.isFinite(width) && width > 0 && Number.isFinite(height) && height > 0) {
+    return { width, height };
+  }
+  const viewBox = svgElement.viewBox?.baseVal;
+  if (viewBox && viewBox.width > 0 && viewBox.height > 0) {
+    return { width: viewBox.width, height: viewBox.height };
+  }
+  return null;
+}
+watch(renderedSvg, async (svgMarkup) => {
+  if (!svgMarkup || !import.meta.client) {
+    return;
+  }
+  svgSize.value = parseSvgSize(svgMarkup);
+  await nextTick();
+  const measured = measureRenderedSvg(svgContainerRef.value);
+  if (measured) {
+    svgSize.value = measured;
+  }
+  fitToViewport();
+}, { immediate: true });
+onMounted(async () => {
+  await nextTick();
+  if (renderedSvg.value) {
+    const measured = measureRenderedSvg(svgContainerRef.value);
+    if (measured) {
+      svgSize.value = measured;
+    }
+    fitToViewport();
+  }
+});
+</script>
+
+<template>
+    <div class="mermaid-diagram my-4 rounded-12px border border-gray-200 bg-white p-12px">
+        <div v-if="sanitizedSvg" ref="viewportShellRef" class="mermaid-diagram__viewport-shell">
+            <div class="mermaid-diagram__overlay mermaid-diagram__overlay--top-right">
+                <button type="button" class="mermaid-action-btn" aria-label="Ajustar diagrama à tela" title="Ajustar" @click="fitToViewport">
+                    <span class="i-ph-corners-in text-14px" />
+                </button>
+                <button type="button" class="mermaid-action-btn" :disabled="zoom <= MIN_ZOOM" aria-label="Diminuir zoom" title="Diminuir zoom" @click="zoomOut">
+                    <span class="i-ph-magnifying-glass-minus text-14px" />
+                </button>
+                <button type="button" class="mermaid-action-btn" :disabled="zoom >= MAX_ZOOM" aria-label="Aumentar zoom" title="Aumentar zoom" @click="zoomIn">
+                    <span class="i-ph-magnifying-glass-plus text-14px" />
+                </button>
+            </div>
+
+            <div class="mermaid-diagram__overlay mermaid-diagram__overlay--bottom-left">
+                <button type="button" class="mermaid-action-btn" :aria-label="copyLabel" :title="copyLabel" @click="handleCopy">
+                    <span class="i-ph-copy text-14px" />
+                </button>
+                <button type="button" class="mermaid-action-btn" :disabled="exportState === 'running'" :aria-label="exportLabel" :title="exportLabel" @click="handleDownloadJpeg">
+                    <span class="i-ph-download-simple text-14px" />
+                </button>
+            </div>
+
+            <div
+                ref="viewportRef"
+                class="mermaid-diagram__viewport"
+                :style="viewportStyle"
+                :class="isDragging ? 'cursor-grabbing' : 'cursor-grab'"
+                @mousedown="handleMouseDown"
+                @mousemove="handleMouseMove"
+                @mouseup="stopDragging"
+                @mouseleave="stopDragging"
+            >
+                <div class="mermaid-diagram__canvas" :style="scaledCanvasStyle">
+                    <div
+                        ref="svgContainerRef"
+                        class="mermaid-diagram__svg"
+                        :style="svgStyle"
+                        v-html="sanitizedSvg"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <div v-else class="mermaid-diagram__fallback">
+            <p v-if="isFallbackRendering" class="m-0 text-12px text-secondary font-medium">
+                Renderizando diagrama...
+            </p>
+            <p v-else-if="renderedError" class="m-0 text-12px text-red-600 font-medium">
+                Falha ao renderizar diagrama: {{ renderedError }}
+            </p>
+            <pre class="m-0 mt-8px overflow-x-auto whitespace-pre-wrap text-13px leading-relaxed text-primary"><code>{{ diagramSource }}</code></pre>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.mermaid-diagram{--mermaid-bg:#fff;--mermaid-fg:#18181b;--mermaid-line:#64748b;--mermaid-accent:#2563eb;--mermaid-muted:#6b7280;--mermaid-surface:#f8fafc;--mermaid-border:#d1d5db}.mermaid-action-btn{align-items:center;background:transparent;border:0;border-radius:8px;color:#111827;display:inline-flex;height:32px;justify-content:center;transition:background-color .15s ease,color .15s ease,opacity .15s ease;width:32px}.mermaid-action-btn:hover:not(:disabled){background:rgba(15,23,42,.06)}.mermaid-action-btn:disabled{cursor:not-allowed;opacity:.45}.mermaid-diagram__viewport{background:#fff;border:1px solid #e5e7eb;border-radius:10px;height:min(540px,70vh);overflow:auto;position:relative}.mermaid-diagram__viewport-shell{max-width:min(100%,860px);position:relative}.mermaid-diagram__canvas{position:relative}.mermaid-diagram__overlay{backdrop-filter:blur(8px);background:hsla(0,0%,100%,.94);border:1px solid rgba(229,231,235,.9);border-radius:12px;box-shadow:0 6px 20px rgba(15,23,42,.08);display:flex;gap:2px;padding:4px;position:absolute;width:-moz-fit-content;width:fit-content;z-index:2}.mermaid-diagram__overlay--top-right{right:10px;top:10px}.mermaid-diagram__overlay--bottom-left{bottom:10px;left:10px}.mermaid-diagram__svg{left:0;position:absolute;top:0}.mermaid-diagram__svg :deep(svg){display:block;height:100%;width:100%}
+</style>

package/dist/runtime/components/renderers/mermaid-diagram.vue.d.ts

@@ -0,0 +1,7 @@
+import { type MarkdownNode } from '../../utils/markdown-nodes.js';
+type __VLS_Props = {
+    node?: MarkdownNode;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/text-renderer.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    url: string;
+    mimeType: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/text-renderer.vue

@@ -0,0 +1,70 @@
+<script setup>
+const props = defineProps({
+  url: { type: String, required: true },
+  mimeType: { type: String, required: true }
+});
+const content = ref(null);
+const isLoading = ref(true);
+const error = ref(null);
+const isJson = computed(() => props.mimeType === "application/json");
+async function fetchContent() {
+  if (!props.url)
+    return;
+  isLoading.value = true;
+  error.value = null;
+  try {
+    const response = await fetch(props.url);
+    const text = await response.text();
+    if (isJson.value) {
+      try {
+        const parsed = JSON.parse(text);
+        content.value = JSON.stringify(parsed, null, 2);
+      } catch {
+        content.value = text;
+      }
+    } else {
+      content.value = text;
+    }
+  } catch (err) {
+    console.error("Failed to fetch text content:", err);
+    error.value = err?.message ?? "Falha ao carregar conte\xFAdo";
+  } finally {
+    isLoading.value = false;
+  }
+}
+onMounted(fetchContent);
+watch(() => props.url, fetchContent);
+</script>
+
+<template>
+    <div class="h-full flex flex-col h-full min-h-[60vh]">
+        <div v-if="isLoading" class="flex-1 flex items-center justify-center">
+            <TelaIconSpinner animate-spin class="text-24px text-gray-400" />
+        </div>
+
+        <div v-else-if="error" class="flex-1 flex items-center justify-center">
+            <div class="text-center">
+                <TelaIcon name="i-ph-warning" class="text-32px text-gray-400" />
+                <p class="text-14px text-gray-500 mt-8px">
+                    {{ error }}
+                </p>
+            </div>
+        </div>
+
+        <div v-else-if="content" class="flex-1 overflow-auto">
+            <pre
+                class="p-16px text-13px font-mono leading-relaxed whitespace-pre-wrap break-words m-0"
+                :class="isJson ? 'text-gray-800' : 'text-gray-700'"
+            ><code>{{ content }}</code></pre>
+        </div>
+
+        <div v-else class="flex-1 flex items-center justify-center">
+            <div class="text-center">
+                <TelaIcon name="i-ph-file-text" class="text-32px text-gray-400" />
+                <p class="text-14px text-gray-500 mt-8px">
+                    Nenhum conteúdo disponível
+                </p>
+            </div>
+        </div>
+    </div>
+</template>

package/dist/runtime/components/renderers/text-renderer.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    url: string;
+    mimeType: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/video-renderer.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    url: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;