Ship file viewer, editor improvements, and private package releases

2026-09-09 11:20:11 +05:30
1 parent 645914955c
commit a4a31032b9
@@ -0,0 +1,10 @@
+component ArchiveViewer {
+  props {
+    class: string = ""
+  }
+  view {
+    <div class="wrn-viewer-renderer wrn-archiveviewer {class}" data-viewer-renderer="ArchiveViewer">
+      <div data-viewer-mount=""><slot></slot></div>
+    </div>
+  }
+}
@@ -0,0 +1,10 @@
+component CodeViewer {
+  props {
+    class: string = ""
+  }
+  view {
+    <div class="wrn-viewer-renderer wrn-codeviewer {class}" data-viewer-renderer="CodeViewer">
+      <div data-viewer-mount=""><slot></slot></div>
+    </div>
+  }
+}
@@ -0,0 +1,10 @@
+component DocViewer {
+  props {
+    class: string = ""
+  }
+  view {
+    <div class="wrn-viewer-renderer wrn-docviewer {class}" data-viewer-renderer="DocViewer">
+      <div data-viewer-mount=""><slot></slot></div>
+    </div>
+  }
+}
@@ -0,0 +1,20 @@
+component DownloadCard {
+  props {
+    reason: string = "Preview unavailable for this file"
+    class: string = ""
+  }
+  view {
+    <div class="wrn-viewer-download {class}">
+      <div class="wrn-viewer-download-art" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z" />
+          <path d="M14 3v5h5" />
+          <path d="M9.5 13.5l5 5" />
+          <path d="M14.5 13.5l-5 5" />
+        </svg>
+      </div>
+      <p class="wrn-viewer-download-reason" data-viewer-reason="" role="status">{reason}</p>
+      <p class="wrn-viewer-download-meta" data-viewer-size=""></p>
+    </div>
+  }
+}
@@ -0,0 +1,10 @@
+component ImageViewer {
+  props {
+    class: string = ""
+  }
+  view {
+    <div class="wrn-viewer-renderer wrn-imageviewer {class}" data-viewer-renderer="ImageViewer">
+      <div data-viewer-mount=""><slot></slot></div>
+    </div>
+  }
+}
@@ -0,0 +1,10 @@
+component MediaViewer {
+  props {
+    class: string = ""
+  }
+  view {
+    <div class="wrn-viewer-renderer wrn-mediaviewer {class}" data-viewer-renderer="MediaViewer">
+      <div data-viewer-mount=""><slot></slot></div>
+    </div>
+  }
+}
@@ -0,0 +1,10 @@
+component PdfViewer {
+  props {
+    class: string = ""
+  }
+  view {
+    <div class="wrn-viewer-renderer wrn-pdfviewer {class}" data-viewer-renderer="PdfViewer">
+      <div data-viewer-mount=""><slot></slot></div>
+    </div>
+  }
+}
@@ -0,0 +1,10 @@
+component SheetViewer {
+  props {
+    class: string = ""
+  }
+  view {
+    <div class="wrn-viewer-renderer wrn-sheetviewer {class}" data-viewer-renderer="SheetViewer">
+      <div data-viewer-mount=""><slot></slot></div>
+    </div>
+  }
+}
@@ -0,0 +1,10 @@
+component VectorViewer {
+  props {
+    class: string = ""
+  }
+  view {
+    <div class="wrn-viewer-renderer wrn-vectorviewer {class}" data-viewer-renderer="VectorViewer">
+      <div data-viewer-mount=""><slot></slot></div>
+    </div>
+  }
+}
@@ -0,0 +1,24 @@
+import ViewerShell from "@wrnexus/viewer/components/ViewerShell.wrn"
+component Viewer {
+  props {
+    files: unknown[] = []
+    richPdf: boolean = false
+    fullScreen: boolean = false
+    layout: string = "inline"
+    src: string = ""
+    key: string = ""
+    store: string = ""
+    name: string = ""
+    mime: string = ""
+    size: string = ""
+    theme: string = "auto"
+
+    class: string = ""
+  }
+  view {
+    <section class="wrn-viewer {class}" data-theme="{theme === 'auto' ? '' : theme}" data-wrnexus-runtime="viewer" data-files="{JSON.stringify(files)}" data-rich-pdf="{richPdf}" data-full-screen="{fullScreen}" data-layout="{layout}" data-src="{src}" data-key="{key}" data-store="{store}" data-name="{name}" data-mime="{mime}" data-size="{size}" aria-label="{name === '' ? 'File preview' : name}">
+      <ViewerShell name={name} />
+      <noscript>Enable JavaScript to preview this file.</noscript>
+    </section>
+  }
+}
@@ -0,0 +1,31 @@
+import ViewerToolbar from "@wrnexus/viewer/components/ViewerToolbar.wrn"
+import DownloadCard from "@wrnexus/viewer/components/DownloadCard.wrn"
+import ImageViewer from "@wrnexus/viewer/components/ImageViewer.wrn"
+import VectorViewer from "@wrnexus/viewer/components/VectorViewer.wrn"
+import PdfViewer from "@wrnexus/viewer/components/PdfViewer.wrn"
+import CodeViewer from "@wrnexus/viewer/components/CodeViewer.wrn"
+import SheetViewer from "@wrnexus/viewer/components/SheetViewer.wrn"
+import DocViewer from "@wrnexus/viewer/components/DocViewer.wrn"
+import MediaViewer from "@wrnexus/viewer/components/MediaViewer.wrn"
+import ArchiveViewer from "@wrnexus/viewer/components/ArchiveViewer.wrn"
+component ViewerShell {
+  props {
+    name: string = "File"
+    class: string = ""
+  }
+  view {
+    <div class="wrn-viewer-shell {class}">
+      <ViewerToolbar name={name} />
+      <div class="wrn-viewer-content" data-viewer-content=""><p role="status">Loading preview…</p></div>
+      <template data-viewer-template="DownloadCard"><DownloadCard /></template>
+      <template data-viewer-template="ImageViewer"><ImageViewer /></template>
+      <template data-viewer-template="VectorViewer"><VectorViewer /></template>
+      <template data-viewer-template="PdfViewer"><PdfViewer /></template>
+      <template data-viewer-template="CodeViewer"><CodeViewer /></template>
+      <template data-viewer-template="SheetViewer"><SheetViewer /></template>
+      <template data-viewer-template="DocViewer"><DocViewer /></template>
+      <template data-viewer-template="MediaViewer"><MediaViewer /></template>
+      <template data-viewer-template="ArchiveViewer"><ArchiveViewer /></template>
+    </div>
+  }
+}
@@ -0,0 +1,13 @@
+component ViewerToolbar {
+  props {
+    name: string = "File"
+    class: string = ""
+  }
+  view {
+    <div class="wrn-viewer-toolbar {class}" data-viewer-toolbar="" role="toolbar" aria-label="File preview controls">
+      <span data-viewer-title="">{name}</span>
+      <span data-viewer-controls=""></span>
+      <span data-viewer-actions=""></span>
+    </div>
+  }
+}