@blendviewer/vision-scope 0.1.0

package/dist/styles/image.css

@@ -0,0 +1,77 @@
+/* Image Renderer Styles */
+
+.vision-scope-image {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vision-scope-image canvas {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.vision-scope-image .vision-scope-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 30px;
+  border-radius: 12px;
+  color: white;
+  z-index: 1000;
+}
+
+.vision-scope-image .loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: vision-scope-spin 0.8s linear infinite;
+}
+
+@keyframes vision-scope-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.vision-scope-image .loading-text {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.vision-scope-image .loading-progress {
+  width: 200px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.vision-scope-image .loading-progress .progress-bar {
+  width: 0%;
+  height: 4px;
+  background: #4caf50;
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+.vision-scope-image .progress-text {
+  font-size: 12px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+
+

package/dist/styles/loading.css

@@ -0,0 +1,124 @@
+/**
+ * Unified loader — matches internalThree.ejs / nestcad EmbeddedViewer exactly.
+ * White cascade dots on #eee background, no overlay panel or caption.
+ */
+
+.vision-scope-root .loader,
+.vision-scope-loading .loader {
+  width: 10px;
+  height: 68px;
+  display: inline-block;
+  position: absolute;
+  border-radius: 4px;
+  left: 45%;
+  top: 50%;
+  box-sizing: border-box;
+  animation: animloader 1s linear infinite alternate;
+}
+
+@keyframes animloader {
+  0% {
+    box-shadow:
+      20px 0 rgba(255, 255, 255, 0),
+      40px 0 rgba(255, 255, 255, 0),
+      60px 0 rgba(255, 255, 255, 0),
+      80px 0 rgba(255, 255, 255, 0),
+      100px 0 rgba(255, 255, 255, 0);
+  }
+  20% {
+    box-shadow:
+      20px 0 white,
+      40px 0 rgba(255, 255, 255, 0),
+      60px 0 rgba(255, 255, 255, 0),
+      80px 0 rgba(255, 255, 255, 0),
+      100px 0 rgba(255, 255, 255, 0);
+  }
+  40% {
+    box-shadow:
+      20px 0 white,
+      40px 0 white,
+      60px 0 rgba(255, 255, 255, 0),
+      80px 0 rgba(255, 255, 255, 0),
+      100px 0 rgba(255, 255, 255, 0);
+  }
+  60% {
+    box-shadow:
+      20px 0 white,
+      40px 0 white,
+      60px 0 white,
+      80px 0 rgba(255, 255, 255, 0),
+      100px 0 rgba(255, 255, 255, 0);
+  }
+  80% {
+    box-shadow:
+      20px 0 white,
+      40px 0 white,
+      60px 0 white,
+      80px 0 white,
+      100px 0 rgba(255, 255, 255, 0);
+  }
+  100% {
+    box-shadow:
+      20px 0 white,
+      40px 0 white,
+      60px 0 white,
+      80px 0 white,
+      100px 0 white;
+  }
+}
+
+.vision-scope-loading {
+  position: absolute;
+  inset: 0;
+  z-index: 10000;
+  pointer-events: none;
+  background: transparent;
+}
+
+.vision-scope-loading .loading-text {
+  display: none;
+}
+
+.vision-scope-loading--with-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  background: rgba(238, 238, 238, 0.72);
+}
+
+.vision-scope-loading--with-message .loader {
+  position: relative;
+  left: auto;
+  top: auto;
+}
+
+.vision-scope-loading--with-message .loading-text {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: #475569;
+  letter-spacing: 0.02em;
+}
+
+.vision-scope-loading .loading-progress {
+  width: min(220px, 70vw);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.vision-scope-loading .loading-progress .progress-bar {
+  width: 0%;
+  height: 4px;
+  background: #2563eb;
+  border-radius: 2px;
+  transition: width 0.25s ease;
+}
+
+.vision-scope-loading .progress-text {
+  font-size: 12px;
+  text-align: center;
+  color: #64748b;
+}

package/dist/styles/media.css

@@ -0,0 +1,99 @@
+/* Media Renderer Styles */
+
+.vision-scope-media {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: #eeeeee; /* Default gray background like Spatial/Image */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Video specific background - black for letterboxing */
+.vision-scope-media.media-video {
+  background: #000;
+}
+
+/* Audio specific background - gray */
+.vision-scope-media.media-audio {
+  background: #eeeeee;
+}
+
+/* Plyr player container */
+.vision-scope-media .plyr {
+  width: 100%;
+  height: 100%;
+}
+
+/* Plyr video container - ensure contain is applied */
+.vision-scope-media .plyr--video {
+  width: 100%;
+  height: 100%;
+}
+
+.vision-scope-media .plyr--video video {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: contain !important; /* Force contain with !important */
+}
+
+/* Plyr audio container - centered */
+.vision-scope-media .plyr--audio {
+  width: 100%;
+  max-width: 600px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+/* Video player specific styles */
+.vision-scope-media video {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: contain !important;
+}
+
+/* Audio player specific styles */
+.vision-scope-media audio {
+  width: 100%;
+  max-width: 600px;
+}
+
+/* Loading indicator */
+.vision-scope-media .vision-scope-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+  background: rgba(0, 0, 0, 0.8);
+  padding: 30px;
+  border-radius: 12px;
+  color: white;
+  z-index: 1000;
+}
+
+.vision-scope-media .loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: vision-scope-spin 0.8s linear infinite;
+}
+
+@keyframes vision-scope-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.vision-scope-media .loading-text {
+  font-size: 14px;
+  font-weight: 500;
+}

package/dist/styles/native-three.css

@@ -0,0 +1,54 @@
+/*
+ * VisionScope Native Three.js Renderer Styles
+ */
+
+.vision-scope-native-three {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: #eeeeee;
+}
+
+/* Loading uses shared styles from loading.css */
+
+/* Canvas */
+.vision-scope-native-three canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+/* Stats (FPS Counter) */
+.vision-scope-native-three .stats {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+}
+
+/* Fullscreen styles */
+.vision-scope-native-three:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+}
+
+.vision-scope-native-three:-moz-full-screen {
+  width: 100%;
+  height: 100%;
+}
+
+.vision-scope-native-three:-ms-fullscreen {
+  width: 100%;
+  height: 100%;
+}
+
+.vision-scope-native-three:fullscreen {
+  width: 100%;
+  height: 100%;
+}
+
+
+

package/dist/styles/spatial.css

@@ -0,0 +1,39 @@
+/* VisionScope Spatial Renderer Styles */
+
+.vision-scope-spatial {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: #eeeeee;
+  overflow: hidden;
+}
+
+.vision-scope-spatial canvas {
+  position: relative;
+  z-index: 1;
+}
+
+/* Error State */
+.vision-scope-error {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #ef4444;
+  font-size: 14px;
+  text-align: center;
+  z-index: 10001;
+}
+
+/* Fullscreen Support */
+.vision-scope-spatial:fullscreen {
+  background: #eeeeee;
+}
+
+.vision-scope-spatial:-webkit-full-screen {
+  background: #eeeeee;
+}
+
+.vision-scope-spatial:-moz-full-screen {
+  background: #eeeeee;
+}

package/dist/styles/tabular.css

@@ -0,0 +1,157 @@
+@import 'x-data-spreadsheet/dist/xspreadsheet.css';
+
+.vision-scope-tabular {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  width: 100%;
+  background: #f3f3f3;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
+}
+
+.tabular-viewer-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  background: #f3f3f3;
+}
+
+.tabular-preview-banner {
+  flex-shrink: 0;
+  padding: 0.4rem 0.75rem;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  color: #5f6368;
+  background: #e8f0fe;
+  border-bottom: 1px solid #d2e3fc;
+}
+
+.tabular-spreadsheet-host {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  width: 100%;
+  position: relative;
+}
+
+/* x-spreadsheet root fills host */
+.tabular-spreadsheet-host .x-spreadsheet {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.tabular-spreadsheet-host .x-spreadsheet-sheet {
+  width: 100% !important;
+}
+
+/* Align with PDF viewer neutral chrome */
+.vision-scope-tabular .x-spreadsheet-bottombar {
+  border-top: 1px solid #dadce0;
+  background: #fafafa;
+}
+
+.vision-scope-tabular .x-spreadsheet-toolbar {
+  display: none !important;
+}
+
+.tabular-viewer-content {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.tabular-sheet-switcher {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.tabular-sheet-tabs {
+  display: flex;
+  flex-shrink: 0;
+  gap: 0;
+  border-bottom: 1px solid #dadce0;
+  background: #fafafa;
+  padding: 0 8px;
+}
+
+.tabular-sheet-tab {
+  border: none;
+  background: transparent;
+  padding: 8px 14px;
+  font-size: 12px;
+  color: #5f6368;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+
+.tabular-sheet-tab.active {
+  color: #1a73e8;
+  border-bottom-color: #1a73e8;
+  font-weight: 500;
+}
+
+.tabular-sheet-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.tabular-report-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  background: #fff;
+  padding: 8px 12px 12px;
+}
+
+.tabular-report-scroll[hidden],
+.tabular-spreadsheet-host[hidden] {
+  display: none !important;
+}
+
+.tabular-report-scroll > .tabular-report-sheet {
+  display: block;
+}
+
+.tabular-report-sheet {
+  display: none;
+}
+
+.tabular-report-sheet.active {
+  display: block;
+}
+
+.tabular-report-canvas {
+  position: relative;
+  margin: 0;
+  background: #fff;
+}
+
+.tabular-report-cell {
+  position: absolute;
+  box-sizing: border-box;
+  display: flex;
+  padding: 2px 6px;
+  overflow: hidden;
+  line-height: 1.35;
+}
+
+.tabular-report-cell-text {
+  width: 100%;
+}
+
+.tabular-report-image {
+  position: absolute;
+  object-fit: contain;
+  pointer-events: none;
+}