@brftech/filex-core 0.1.56

package/src/viewers/PsdViewer.vue

@@ -0,0 +1,264 @@
+<script setup lang="ts">
+/**
+ * PsdViewer — Photoshop document preview via `ag-psd`.
+ *
+ * Lazy-imports `ag-psd` (~150 KB). Renders the flattened composite to
+ * a canvas via `psd.canvas`. A simple layer panel toggles the rendered
+ * preview (V1: just lists names + visibility; full composite swap on
+ * toggle requires re-rendering with `applyOpacity`/`composite` logic
+ * — left as TODO for V2 since `ag-psd` doesn't ship a composite
+ * pipeline of its own).
+ */
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { fetchViewerArrayBuffer } from '../composables/useViewerFetch';
+
+const props = defineProps<{
+  url: string;
+  mime?: string;
+  ext: string;
+  t?: (key: string) => string;
+  authHeaders?: () => Record<string, string>;
+  authCredentials?: RequestCredentials;
+}>();
+
+interface FlatLayer {
+  index: number;
+  name: string;
+  hidden: boolean;
+}
+
+const canvasEl = ref<HTMLCanvasElement | null>(null);
+const layers = ref<FlatLayer[]>([]);
+const error = ref<string | null>(null);
+const loading = ref(true);
+const showLayerPanel = ref(false);
+const dims = ref<{ width: number; height: number }>({ width: 0, height: 0 });
+const scale = ref(1);
+
+let renderToken = 0;
+
+let agPsd: any = null;
+async function ensureAgPsd(): Promise<any | null> {
+  if (agPsd) return agPsd;
+  try {
+    const mod = await import(/* @vite-ignore */ 'ag-psd');
+    agPsd = mod;
+    return agPsd;
+  } catch {
+    return null;
+  }
+}
+
+function flattenLayers(node: any, list: FlatLayer[]): void {
+  if (!node) return;
+  if (Array.isArray(node.children)) {
+    for (const child of node.children) {
+      list.push({
+        index: list.length,
+        name: child.name ?? '(unnamed)',
+        hidden: !!child.hidden,
+      });
+      if (child.children) flattenLayers(child, list);
+    }
+  }
+}
+
+async function load(): Promise<void> {
+  loading.value = true;
+  error.value = null;
+  layers.value = [];
+  const myToken = ++renderToken;
+
+  const lib = await ensureAgPsd();
+  if (myToken !== renderToken) return;
+  if (!lib) {
+    error.value = props.t
+      ? props.t('viewer.peer_not_installed')
+      : 'PSD viewer requires `ag-psd` — install or use download.';
+    loading.value = false;
+    return;
+  }
+
+  try {
+    const buf = await fetchViewerArrayBuffer({
+      url: props.url,
+      headers: props.authHeaders?.() ?? {},
+      credentials: props.authCredentials,
+    });
+    if (myToken !== renderToken) return;
+    const psd = lib.readPsd(buf, {
+      skipLayerImageData: false,
+      skipCompositeImageData: false,
+      skipThumbnail: true,
+    });
+    dims.value = { width: psd.width, height: psd.height };
+
+    const composite = psd.canvas;
+    if (composite && canvasEl.value) {
+      const target = canvasEl.value;
+      target.width = psd.width;
+      target.height = psd.height;
+      const ctx = target.getContext('2d');
+      ctx?.drawImage(composite, 0, 0);
+    } else {
+      throw new Error('PSD has no composite image (skipCompositeImageData?)');
+    }
+
+    const flat: FlatLayer[] = [];
+    flattenLayers(psd, flat);
+    layers.value = flat;
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'PSD decode 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.1, scale.value / 1.25);
+}
+function reset(): void {
+  scale.value = 1;
+}
+
+onMounted(load);
+onBeforeUnmount(() => {
+  renderToken++;
+});
+watch(() => props.url, load);
+
+function tt(key: string, fallback: string): string {
+  return props.t ? props.t(key) : fallback;
+}
+</script>
+
+<template>
+  <div class="filex-viewer-psd">
+    <div class="filex-viewer-psd__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>
+      <canvas
+        v-show="!loading && !error"
+        ref="canvasEl"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.filex-viewer-psd {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 70vh;
+  background: var(--fe-bg, #fff);
+}
+.filex-viewer-psd__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-spacer { flex: 1; }
+.filex-viewer-psd__dim {
+  font-size: 12px;
+  color: var(--fe-text-muted, #5a6475);
+}
+.filex-viewer-psd__zoom {
+  min-width: 50px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+}
+.filex-viewer-psd__main {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+.filex-viewer-psd__layers {
+  width: 240px;
+  border-right: 1px solid var(--fe-border, #e2e6ed);
+  overflow-y: auto;
+  padding: 8px 0;
+  background: var(--fe-bg-elev, #f7f8fa);
+}
+.filex-viewer-psd__layers ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.filex-viewer-psd__layers li {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 12px;
+  font-size: 12px;
+}
+.filex-viewer-psd__layer-vis {
+  width: 14px;
+  text-align: center;
+  color: var(--fe-text-muted, #5a6475);
+}
+.filex-viewer-psd__layer-vis[data-hidden="1"] { color: var(--fe-border-strong, #c7ced9); }
+.filex-viewer-psd__layer-name {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.filex-viewer-psd__pane {
+  flex: 1;
+  overflow: auto;
+  padding: 16px;
+  background: #2a2d33;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.filex-viewer-psd__pane canvas {
+  background: #fff
+    repeating-conic-gradient(#e0e0e0 0% 25%, transparent 0% 50%) 50% / 16px 16px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+.filex-viewer-fallback {
+  text-align: center;
+  padding: 32px;
+  color: #c8cdd6;
+  margin: auto;
+}
+.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);
+}
+.filex-viewer-btn.is-active {
+  background: var(--fe-bg-selected, #dfe8ff);
+  border-color: var(--fe-primary, #3b82f6);
+}
+</style>

package/src/viewers/TiffViewer.vue

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+/**
+ * TiffViewer — multi-page TIFF preview via `utif`.
+ *
+ * Lazy-imports `utif` (~50 KB). Decodes IFDs once, paints the active
+ * page to a `<canvas>` via `UTIF.toRGBA8`. Page navigation (1/N) +
+ * zoom in/out controls. Browser <img> can't render TIFF natively, so
+ * the canvas pipeline is the only option short of server-side
+ * conversion.
+ */
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { fetchViewerArrayBuffer } from '../composables/useViewerFetch';
+
+const props = defineProps<{
+  url: string;
+  mime?: string;
+  ext: string;
+  t?: (key: string) => string;
+  authHeaders?: () => Record<string, string>;
+  authCredentials?: RequestCredentials;
+}>();
+
+const canvasEl = ref<HTMLCanvasElement | null>(null);
+const error = ref<string | null>(null);
+const loading = ref(true);
+const scale = ref(1);
+const pageIndex = ref(0);
+const pageCount = ref(0);
+const pageDims = ref<{ width: number; height: number }>({ width: 0, height: 0 });
+
+let UTIF: any = null;
+let ifds: any[] | null = null;
+let renderToken = 0;
+
+async function ensureUtif(): Promise<any | null> {
+  if (UTIF) return UTIF;
+  try {
+    const mod = await import(/* @vite-ignore */ 'utif');
+    UTIF = mod.default ?? mod;
+    return UTIF;
+  } catch {
+    return null;
+  }
+}
+
+async function load(): Promise<void> {
+  loading.value = true;
+  error.value = null;
+  ifds = null;
+  pageIndex.value = 0;
+  pageCount.value = 0;
+  const myToken = ++renderToken;
+
+  const lib = await ensureUtif();
+  if (myToken !== renderToken) return;
+  if (!lib) {
+    error.value = props.t
+      ? props.t('viewer.peer_not_installed')
+      : 'TIFF viewer requires `utif` — install or use download.';
+    loading.value = false;
+    return;
+  }
+
+  try {
+    const buf = await fetchViewerArrayBuffer({
+      url: props.url,
+      headers: props.authHeaders?.() ?? {},
+      credentials: props.authCredentials,
+    });
+    if (myToken !== renderToken) return;
+    ifds = lib.decode(buf);
+    pageCount.value = ifds?.length ?? 0;
+    if (pageCount.value === 0) {
+      throw new Error('No pages decoded');
+    }
+    paint();
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'TIFF decode failed';
+  } finally {
+    loading.value = false;
+  }
+}
+
+function paint(): void {
+  if (!UTIF || !ifds || !canvasEl.value) return;
+  const idx = Math.max(0, Math.min(pageIndex.value, ifds.length - 1));
+  const ifd = ifds[idx];
+  try {
+    UTIF.decodeImage(undefined, ifd);
+  } catch {
+    // some images already decoded — UTIF.decodeImage is idempotent on
+    // older versions.
+  }
+  const rgba = UTIF.toRGBA8(ifd);
+  const w = ifd.width;
+  const h = ifd.height;
+  pageDims.value = { width: w, height: h };
+  const canvas = canvasEl.value;
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return;
+  const imageData = ctx.createImageData(w, h);
+  imageData.data.set(rgba);
+  ctx.putImageData(imageData, 0, 0);
+}
+
+function next(): void {
+  if (pageIndex.value < pageCount.value - 1) {
+    pageIndex.value++;
+    paint();
+  }
+}
+function prev(): void {
+  if (pageIndex.value > 0) {
+    pageIndex.value--;
+    paint();
+  }
+}
+function zoomIn(): void {
+  scale.value = Math.min(8, scale.value * 1.25);
+}
+function zoomOut(): void {
+  scale.value = Math.max(0.1, scale.value / 1.25);
+}
+function reset(): void {
+  scale.value = 1;
+}
+
+onMounted(load);
+onBeforeUnmount(() => {
+  renderToken++;
+  ifds = null;
+});
+
+watch(() => props.url, load);
+
+const pageLabel = computed(() => {
+  const m = (props.t && props.t('viewer.page_n_of_m')) || 'Page {n} of {m}';
+  return m.replace('{n}', String(pageIndex.value + 1)).replace('{m}', String(pageCount.value));
+});
+
+function tt(key: string, fallback: string): string {
+  return props.t ? props.t(key) : fallback;
+}
+</script>
+
+<template>
+  <div class="filex-viewer-tiff">
+    <div class="filex-viewer-tiff__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>
+      <canvas
+        v-show="!loading && !error"
+        ref="canvasEl"
+        :style="{ imageRendering: 'pixelated' }"
+      />
+      <div v-if="!loading && !error && pageCount > 1" class="filex-viewer-tiff__pager">
+        <button
+          type="button"
+          class="filex-viewer-btn"
+          :disabled="pageIndex === 0"
+          @click="prev"
+        >‹</button>
+        <span class="filex-viewer-tiff__pages">{{ pageLabel }}</span>
+        <button
+          type="button"
+          class="filex-viewer-btn"
+          :disabled="pageIndex >= pageCount - 1"
+          @click="next"
+        >›</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.filex-viewer-tiff__pager {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  background: var(--fe-bg-elev, rgba(255, 255, 255, 0.9));
+  border: 1px solid var(--fe-border, #e2e6ed);
+  border-radius: 6px;
+  backdrop-filter: blur(4px);
+}
+.filex-viewer-tiff__pages {
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.filex-viewer-tiff {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 70vh;
+  background: var(--fe-bg, #fff);
+}
+.filex-viewer-tiff__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-tiff__pages {
+  min-width: 110px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+}
+.filex-viewer-tiff__zoom {
+  min-width: 50px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+}
+.filex-viewer-spacer { flex: 1; }
+.filex-viewer-tiff__pane {
+  flex: 1;
+  overflow: auto;
+  padding: 16px;
+  background: #2a2d33;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.filex-viewer-tiff__pane canvas {
+  background: #fff;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
+.filex-viewer-fallback {
+  text-align: center;
+  padding: 32px;
+  color: #c8cdd6;
+  margin: auto;
+}
+.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);
+}
+.filex-viewer-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>

package/src/viewers/Viewer3D.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+/**
+ * Viewer3D — 3D model preview via `@google/model-viewer`.
+ *
+ * Lazy-imports the `@google/model-viewer` web component (~80 KB).
+ *
+ * Format support: model-viewer **only** understands glTF (`.gltf`,
+ * `.glb`) and USDZ (iOS). For unsupported formats (`.stl`, `.obj`,
+ * `.fbx`, `.3ds`) we deliberately render a download fallback instead
+ * of feeding them to model-viewer — earlier code did the latter,
+ * which surfaced as `JSON.parse(<ascii STL>)` SyntaxError because
+ * model-viewer parses the response body as glTF JSON. (sweep-2026-05-09
+ * bugs 19-20.)
+ *
+ * GLB rendering size: model-viewer mounts its canvas inside a
+ * shadow root that doesn't always inherit `height: 100%` from
+ * flexbox parents — we pin explicit sizing on the host element
+ * to avoid the "Framebuffer is incomplete: zero size" warning.
+ * (sweep-2026-05-09 bug 21.)
+ */
+import { computed, onMounted, ref, watch } from 'vue';
+
+const props = defineProps<{
+  url: string;
+  mime?: string;
+  ext: string;
+  /** Locale-aware error/loading messages. */
+  t?: (key: string) => string;
+}>();
+
+const SUPPORTED_EXTS = new Set(['glb', 'gltf', 'usdz']);
+
+const isSupported = computed(() => SUPPORTED_EXTS.has((props.ext || '').toLowerCase()));
+
+const error = ref<string | null>(null);
+const ready = ref(false);
+
+async function load(): Promise<void> {
+  ready.value = false;
+  error.value = null;
+  // Bail out early for formats model-viewer can't parse — feeding
+  // them to <model-viewer> triggers JSON.parse SyntaxError because
+  // it expects glTF JSON.
+  if (!isSupported.value) {
+    error.value = props.t
+      ? props.t('viewer.format_unsupported_3d')
+      : `3D format ".${props.ext}" not supported in browser preview — please download.`;
+    return;
+  }
+  try {
+    await import(/* @vite-ignore */ '@google/model-viewer');
+    ready.value = true;
+  } catch {
+    error.value = props.t
+      ? props.t('viewer.peer_not_installed')
+      : '3D viewer requires `@google/model-viewer` — install or use download.';
+  }
+}
+
+onMounted(load);
+
+watch(() => props.url, () => {
+  // Re-evaluate on URL change (different file may need different
+  // fallback message).
+  load();
+});
+</script>
+
+<template>
+  <div class="filex-viewer-3d">
+    <model-viewer
+      v-if="ready && !error"
+      :src="url"
+      auto-rotate
+      camera-controls
+      touch-action="pan-y"
+      shadow-intensity="1"
+      :alt="ext + ' model'"
+      style="width: 100%; height: 100%; min-height: 480px; display: block"
+    />
+    <div v-else-if="error" class="filex-viewer-fallback">
+      <span class="filex-viewer-fallback__icon">📦</span>
+      <p>{{ error }}</p>
+    </div>
+    <div v-else class="filex-viewer-fallback">
+      <span class="filex-viewer-fallback__icon">⏳</span>
+      <p>{{ t ? t('viewer.loading') : 'Loading…' }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.filex-viewer-3d {
+  width: 100%;
+  height: 100%;
+  min-height: 480px;
+  background: #1a1a1a;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.filex-viewer-3d :deep(model-viewer) {
+  width: 100%;
+  height: 100%;
+  min-height: 480px;
+  background: #1a1a1a;
+  display: block;
+}
+.filex-viewer-fallback {
+  text-align: center;
+  color: #c8cdd6;
+  padding: 32px;
+  max-width: 480px;
+}
+.filex-viewer-fallback__icon {
+  font-size: 48px;
+  display: block;
+  margin-bottom: 12px;
+}
+</style>