@brftech/filex-core 0.1.56

package/src/viewers/IpynbViewer.vue

@@ -0,0 +1,365 @@
+<script setup lang="ts">
+/**
+ * IpynbViewer — Jupyter notebook (.ipynb JSON) renderer.
+ *
+ * Pure-JS render — no peer dependency required:
+ *   - code cells     → `<pre><code>` (highlight.js when available)
+ *   - markdown cells → markdown-it when available, plain `<pre>` otherwise
+ *   - output cells   → text (stream / display_data 'text/plain'),
+ *                      images (display_data 'image/png' base64),
+ *                      HTML (display_data 'text/html', sanitized via
+ *                      element-only insertion — no script tags)
+ *
+ * Source list / output count counters at the top so a 200-cell
+ * notebook doesn't surprise the user.
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { fetchViewerText } from '../composables/useViewerFetch';
+import { ensureHighlight } from '../composables/useMonacoLoader';
+
+const props = defineProps<{
+  url: string;
+  ext: string;
+  t?: (key: string) => string;
+  authHeaders?: () => Record<string, string>;
+  authCredentials?: RequestCredentials;
+}>();
+
+interface Cell {
+  cell_type: 'code' | 'markdown' | 'raw' | string;
+  source: string | string[];
+  outputs?: any[];
+  execution_count?: number | null;
+  metadata?: Record<string, unknown>;
+}
+
+interface Notebook {
+  cells: Cell[];
+  metadata?: { kernelspec?: { language?: string; name?: string } };
+}
+
+const cells = ref<Cell[]>([]);
+const language = ref<string>('python');
+const error = ref<string | null>(null);
+const loading = ref(true);
+const renderedSources = ref<Map<number, string>>(new Map());
+const renderedMarkdown = ref<Map<number, string>>(new Map());
+
+let renderToken = 0;
+let highlight: any = null;
+let mdRenderer: any = null;
+
+async function ensureMd(): Promise<any | null> {
+  if (mdRenderer !== null) return mdRenderer || null;
+  try {
+    const mod = await import(/* @vite-ignore */ 'markdown-it');
+    const Md = (mod as any).default ?? mod;
+    mdRenderer = new Md({ html: false, linkify: true, breaks: true });
+    return mdRenderer;
+  } catch {
+    mdRenderer = false;
+    return null;
+  }
+}
+
+function joinSource(source: string | string[]): string {
+  return Array.isArray(source) ? source.join('') : (source ?? '');
+}
+
+async function load(): Promise<void> {
+  loading.value = true;
+  error.value = null;
+  cells.value = [];
+  renderedSources.value = new Map();
+  renderedMarkdown.value = new Map();
+  const myToken = ++renderToken;
+
+  let raw: string;
+  try {
+    raw = await fetchViewerText({
+      url: props.url,
+      headers: props.authHeaders?.() ?? {},
+      credentials: props.authCredentials,
+    });
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'fetch failed';
+    loading.value = false;
+    return;
+  }
+
+  if (myToken !== renderToken) return;
+
+  let nb: Notebook;
+  try {
+    nb = JSON.parse(raw);
+  } catch (err) {
+    error.value = 'Invalid notebook JSON';
+    loading.value = false;
+    return;
+  }
+  cells.value = Array.isArray(nb.cells) ? nb.cells : [];
+  language.value = nb.metadata?.kernelspec?.language || 'python';
+
+  // Best-effort hljs highlight per code cell.
+  highlight = (await ensureHighlight()) as any;
+  if (myToken !== renderToken) return;
+  if (highlight) {
+    const hljs = highlight.default ?? highlight;
+    const langOk = hljs.getLanguage?.(language.value) ? language.value : null;
+    cells.value.forEach((cell, idx) => {
+      if (cell.cell_type === 'code') {
+        const text = joinSource(cell.source);
+        try {
+          const result = langOk
+            ? hljs.highlight(text, { language: langOk, ignoreIllegals: true })
+            : hljs.highlightAuto(text);
+          renderedSources.value.set(idx, result.value);
+        } catch {
+          /* leave unrendered */
+        }
+      }
+    });
+  }
+
+  const md = await ensureMd();
+  if (myToken !== renderToken) return;
+  if (md) {
+    cells.value.forEach((cell, idx) => {
+      if (cell.cell_type === 'markdown') {
+        try {
+          renderedMarkdown.value.set(idx, md.render(joinSource(cell.source)));
+        } catch {
+          /* leave plain */
+        }
+      }
+    });
+  }
+
+  loading.value = false;
+}
+
+function outputText(out: any): string | null {
+  if (!out) return null;
+  if (out.output_type === 'stream') {
+    return joinSource(out.text);
+  }
+  if (out.output_type === 'error') {
+    return [out.ename, out.evalue, ...(out.traceback || [])]
+      .filter(Boolean)
+      .join('\n');
+  }
+  if (out.output_type === 'execute_result' || out.output_type === 'display_data') {
+    if (out.data?.['text/plain']) {
+      return joinSource(out.data['text/plain']);
+    }
+  }
+  return null;
+}
+
+function outputImage(out: any): string | null {
+  if (!out?.data) return null;
+  if (out.data['image/png']) return `data:image/png;base64,${out.data['image/png']}`;
+  if (out.data['image/jpeg']) return `data:image/jpeg;base64,${out.data['image/jpeg']}`;
+  if (out.data['image/svg+xml']) {
+    const svg = joinSource(out.data['image/svg+xml']);
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+  }
+  return null;
+}
+
+function outputHtml(out: any): string | null {
+  if (!out?.data) return null;
+  if (out.data['text/html']) {
+    const html = joinSource(out.data['text/html']);
+    // Strip <script> for safety — outputs from arbitrary notebooks.
+    return html.replace(/<script[\s\S]*?<\/script>/gi, '');
+  }
+  return null;
+}
+
+onMounted(load);
+onBeforeUnmount(() => {
+  renderToken++;
+});
+watch(() => props.url, load);
+
+const stats = computed(() => {
+  const codeCount = cells.value.filter((c) => c.cell_type === 'code').length;
+  const mdCount = cells.value.filter((c) => c.cell_type === 'markdown').length;
+  return { code: codeCount, md: mdCount, total: cells.value.length };
+});
+
+function tt(key: string, fallback: string): string {
+  return props.t ? props.t(key) : fallback;
+}
+</script>
+
+<template>
+  <div class="filex-viewer-ipynb">
+    <div class="filex-viewer-ipynb__pane">
+      <div v-if="error" class="filex-viewer-fallback">
+        <span class="filex-viewer-fallback__icon">📓</span>
+        <p>{{ error }}</p>
+      </div>
+      <div v-else-if="loading" class="filex-viewer-fallback">
+        <span class="filex-viewer-fallback__icon">⏳</span>
+        <p>{{ tt('viewer.loading', 'Loading…') }}</p>
+      </div>
+      <div v-else>
+        <div
+          v-for="(cell, idx) in cells"
+          :key="idx"
+          class="filex-viewer-ipynb__cell"
+          :data-type="cell.cell_type"
+        >
+          <template v-if="cell.cell_type === 'code'">
+            <div class="filex-viewer-ipynb__exec">
+              In [{{ cell.execution_count ?? ' ' }}]:
+            </div>
+            <pre class="filex-viewer-ipynb__src hljs"><code
+              v-if="renderedSources.get(idx)"
+              v-html="renderedSources.get(idx)"
+            /><code v-else>{{ joinSource(cell.source) }}</code></pre>
+            <div v-if="cell.outputs && cell.outputs.length" class="filex-viewer-ipynb__outputs">
+              <template v-for="(out, j) in cell.outputs" :key="j">
+                <img
+                  v-if="outputImage(out)"
+                  :src="outputImage(out) || ''"
+                  class="filex-viewer-ipynb__img"
+                  :alt="`output ${j}`"
+                />
+                <div
+                  v-else-if="outputHtml(out)"
+                  class="filex-viewer-ipynb__html"
+                  v-html="outputHtml(out)"
+                />
+                <pre
+                  v-else-if="outputText(out)"
+                  class="filex-viewer-ipynb__out"
+                  :data-type="out.output_type"
+                >{{ outputText(out) }}</pre>
+              </template>
+            </div>
+          </template>
+
+          <template v-else-if="cell.cell_type === 'markdown'">
+            <div
+              v-if="renderedMarkdown.get(idx)"
+              class="filex-viewer-ipynb__md"
+              v-html="renderedMarkdown.get(idx)"
+            />
+            <pre v-else class="filex-viewer-ipynb__md-raw">{{ joinSource(cell.source) }}</pre>
+          </template>
+
+          <template v-else>
+            <pre class="filex-viewer-ipynb__src">{{ joinSource(cell.source) }}</pre>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.filex-viewer-ipynb {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 70vh;
+  background: var(--fe-bg, #fff);
+  color: var(--fe-text, #1a1e27);
+}
+.filex-viewer-ipynb__bar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  background: var(--fe-bg-elev, #f7f8fa);
+  border-bottom: 1px solid var(--fe-border, #e2e6ed);
+  font-size: 12px;
+  color: var(--fe-text-muted, #5a6475);
+}
+.filex-viewer-ipynb__lang {
+  font-family: var(--fe-font-mono, monospace);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.filex-viewer-ipynb__pane {
+  flex: 1;
+  overflow: auto;
+  padding: 16px 24px;
+}
+.filex-viewer-ipynb__cell {
+  border: 1px solid var(--fe-border, #e2e6ed);
+  border-radius: 6px;
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+.filex-viewer-ipynb__cell[data-type="code"] {
+  background: var(--fe-bg-elev, #f7f8fa);
+}
+.filex-viewer-ipynb__exec {
+  padding: 4px 12px;
+  font-family: var(--fe-font-mono, monospace);
+  font-size: 11px;
+  color: var(--fe-text-muted, #5a6475);
+  background: rgba(0, 0, 0, 0.04);
+}
+.filex-viewer-ipynb__src {
+  margin: 0;
+  padding: 12px;
+  font-family: var(--fe-font-mono, monospace);
+  font-size: 12px;
+  line-height: 1.5;
+  white-space: pre;
+  overflow-x: auto;
+}
+.filex-viewer-ipynb__outputs {
+  border-top: 1px dashed var(--fe-border, #e2e6ed);
+  background: var(--fe-bg, #fff);
+  padding: 8px 12px;
+}
+.filex-viewer-ipynb__out {
+  margin: 0;
+  padding: 4px 0;
+  font-family: var(--fe-font-mono, monospace);
+  font-size: 12px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+.filex-viewer-ipynb__out[data-type="error"] {
+  color: var(--fe-danger, #dc2626);
+}
+.filex-viewer-ipynb__img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 8px 0;
+}
+.filex-viewer-ipynb__html {
+  font-size: 13px;
+}
+.filex-viewer-ipynb__md {
+  padding: 12px 16px;
+  font-size: 14px;
+  line-height: 1.6;
+}
+.filex-viewer-ipynb__md-raw {
+  padding: 12px;
+  margin: 0;
+  font-family: var(--fe-font-mono, monospace);
+  font-size: 12px;
+  white-space: pre-wrap;
+}
+.filex-viewer-fallback {
+  text-align: center;
+  padding: 32px;
+  color: var(--fe-text-muted, #5a6475);
+}
+.filex-viewer-fallback__icon {
+  font-size: 48px;
+  display: block;
+  margin-bottom: 12px;
+}
+</style>

package/src/viewers/MermaidViewer.vue

@@ -0,0 +1,259 @@
+<script setup lang="ts">
+/**
+ * MermaidViewer — render a `.mmd` / `.mermaid` source file.
+ *
+ * Lazy-imports the `mermaid` library (~150 KB gzipped). Source text is
+ * fetched from `props.url` (with the auth headers from PreviewModal),
+ * then rendered to SVG via `mermaid.render('id', src)`. The resulting
+ * SVG node is inserted into a wrapper that supports pan + scale via
+ * pure CSS transforms (no extra panzoom dep).
+ */
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { fetchViewerText } from '../composables/useViewerFetch';
+
+const props = defineProps<{
+  url: string;
+  mime?: string;
+  ext: string;
+  t?: (key: string) => string;
+  authHeaders?: () => Record<string, string>;
+  authCredentials?: RequestCredentials;
+}>();
+
+const surface = ref<HTMLDivElement | null>(null);
+const error = ref<string | null>(null);
+const loading = ref(true);
+const scale = ref(1);
+const tx = ref(0);
+const ty = ref(0);
+
+let dragging = false;
+let dragStart: { x: number; y: number; tx: number; ty: number } | null = null;
+let renderToken = 0;
+
+let cachedMermaid: any = null;
+async function ensureMermaid(): Promise<any | null> {
+  if (cachedMermaid) return cachedMermaid;
+  try {
+    const mod = await import(/* @vite-ignore */ 'mermaid');
+    cachedMermaid = mod.default ?? mod;
+    cachedMermaid.initialize?.({
+      startOnLoad: false,
+      securityLevel: 'strict',
+      theme: window.matchMedia?.('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'default',
+    });
+    return cachedMermaid;
+  } catch {
+    return null;
+  }
+}
+
+async function load(): Promise<void> {
+  loading.value = true;
+  error.value = null;
+  const myToken = ++renderToken;
+
+  const mermaid = await ensureMermaid();
+  if (myToken !== renderToken) return;
+  if (!mermaid) {
+    error.value = props.t
+      ? props.t('viewer.peer_not_installed')
+      : 'Mermaid viewer requires `mermaid` — install or use download.';
+    loading.value = false;
+    return;
+  }
+
+  let src: string;
+  try {
+    src = await fetchViewerText({
+      url: props.url,
+      headers: props.authHeaders?.() ?? {},
+      credentials: props.authCredentials,
+    });
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'fetch failed';
+    loading.value = false;
+    return;
+  }
+
+  if (myToken !== renderToken) return;
+
+  try {
+    const id = `filex-mermaid-${Date.now()}`;
+    const { svg } = await mermaid.render(id, src);
+    if (myToken !== renderToken) return;
+    if (surface.value) {
+      surface.value.innerHTML = svg;
+      const svgEl = surface.value.querySelector('svg');
+      if (svgEl) {
+        svgEl.style.maxWidth = '100%';
+        svgEl.style.height = 'auto';
+      }
+    }
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'render failed';
+  } finally {
+    loading.value = false;
+  }
+}
+
+function zoomIn(): void {
+  scale.value = Math.min(8, scale.value * 1.25);
+}
+function zoomOut(): void {
+  scale.value = Math.max(0.2, scale.value / 1.25);
+}
+function reset(): void {
+  scale.value = 1;
+  tx.value = 0;
+  ty.value = 0;
+}
+
+function onWheel(ev: WheelEvent): void {
+  if (!ev.ctrlKey && !ev.metaKey) return;
+  ev.preventDefault();
+  const delta = -ev.deltaY;
+  const factor = delta > 0 ? 1.1 : 1 / 1.1;
+  scale.value = Math.max(0.2, Math.min(8, scale.value * factor));
+}
+
+function onPointerDown(ev: PointerEvent): void {
+  dragging = true;
+  dragStart = { x: ev.clientX, y: ev.clientY, tx: tx.value, ty: ty.value };
+  (ev.target as HTMLElement).setPointerCapture?.(ev.pointerId);
+}
+function onPointerMove(ev: PointerEvent): void {
+  if (!dragging || !dragStart) return;
+  tx.value = dragStart.tx + (ev.clientX - dragStart.x);
+  ty.value = dragStart.ty + (ev.clientY - dragStart.y);
+}
+function onPointerUp(): void {
+  dragging = false;
+  dragStart = null;
+}
+
+onMounted(load);
+onBeforeUnmount(() => {
+  renderToken++;
+});
+
+function tt(key: string, fallback: string): string {
+  return props.t ? props.t(key) : fallback;
+}
+</script>
+
+<template>
+  <div class="filex-viewer-mermaid">
+    <div
+      class="filex-viewer-mermaid__pane"
+      @wheel="onWheel"
+      @pointerdown="onPointerDown"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerUp"
+      @pointercancel="onPointerUp"
+    >
+      <div
+        v-if="error"
+        class="filex-viewer-fallback"
+      >
+        <span class="filex-viewer-fallback__icon">📊</span>
+        <p>{{ error }}</p>
+      </div>
+      <div
+        v-else-if="loading"
+        class="filex-viewer-fallback"
+      >
+        <span class="filex-viewer-fallback__icon">⏳</span>
+        <p>{{ tt('viewer.loading', 'Loading…') }}</p>
+      </div>
+      <div
+        v-show="!loading && !error"
+        ref="surface"
+        class="filex-viewer-mermaid__surface"
+        :style="{ transform: `translate(${tx}px, ${ty}px) scale(${scale})` }"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.filex-viewer-mermaid {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 70vh;
+  background: var(--fe-bg, #fff);
+  color: var(--fe-text, #1a1e27);
+}
+.filex-viewer-mermaid__bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  background: var(--fe-bg-elev, #f7f8fa);
+  border-bottom: 1px solid var(--fe-border, #e2e6ed);
+  font-size: 13px;
+}
+.filex-viewer-mermaid__zoom {
+  min-width: 50px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+}
+.filex-viewer-mermaid__pane {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  cursor: grab;
+  background: var(--fe-bg-elev, #f7f8fa);
+  touch-action: none;
+}
+.filex-viewer-mermaid__pane:active {
+  cursor: grabbing;
+}
+.filex-viewer-mermaid__surface {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform-origin: center center;
+  transition: transform 0.05s linear;
+  user-select: none;
+}
+.filex-viewer-mermaid__surface :deep(svg) {
+  max-width: 90%;
+  max-height: 90%;
+}
+.filex-viewer-fallback {
+  text-align: center;
+  padding: 32px;
+  color: var(--fe-text-muted, #5a6475);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.filex-viewer-fallback__icon {
+  font-size: 48px;
+  display: block;
+  margin-bottom: 12px;
+}
+.filex-viewer-btn {
+  border: 1px solid var(--fe-border, #e2e6ed);
+  background: var(--fe-bg, #fff);
+  color: var(--fe-text, #1a1e27);
+  padding: 4px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+}
+.filex-viewer-btn:hover:not(:disabled) {
+  background: var(--fe-bg-hover, #edf0f5);
+}
+</style>