@open-file-viewer/core 0.1.1 → 0.1.3

package/dist/style.css

@@ -55,12 +55,14 @@
 }
 
 .ofv-viewport {
+  container-type: inline-size;
   flex: 1 1 auto;
   min-width: 0;
   min-height: 0;
   width: 100%;
   max-width: 100%;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   background: var(--ofv-bg);
   color: var(--ofv-text);
 }
@@ -92,6 +94,10 @@
 }
 
 .ofv-toolbar button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
   flex: 0 1 auto;
   min-width: 0;
   cursor: pointer;
@@ -100,6 +106,31 @@
   white-space: nowrap;
 }
 
+.ofv-toolbar-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+}
+
+.ofv-toolbar-icon svg {
+  display: block;
+  width: 1em;
+  height: 1em;
+}
+
+.ofv-toolbar-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ofv-react-toolbar,
+.ofv-vue-toolbar,
+.ofv-vue-toolbar-content {
+  display: contents;
+}
+
 .ofv-toolbar button:hover {
   background: var(--ofv-button-hover);
 }
@@ -353,7 +384,8 @@
   min-width: 0;
   min-height: 100%;
   padding: 16px;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   background: #6b7280;
 }
 
@@ -552,6 +584,20 @@
   line-height: 1.6;
 }
 
+.ofv-office-conversion {
+  border-style: dashed;
+}
+
+.ofv-office-conversion > p:first-of-type {
+  margin-top: 0;
+  color: var(--ofv-text);
+  line-height: 1.7;
+}
+
+.ofv-office-conversion > p:first-of-type strong {
+  color: #f59e0b;
+}
+
 .ofv-office-binary-meta {
   display: grid;
   grid-template-columns: max-content minmax(0, 1fr);
@@ -575,32 +621,69 @@
   overflow-wrap: anywhere;
 }
 
+.ofv-office-binary-fragments {
+  margin-top: 14px;
+}
+
+.ofv-office-binary-fragments h4 {
+  margin: 0 0 10px;
+  color: var(--ofv-text);
+  font-size: 14px;
+}
+
+.ofv-office-binary-empty {
+  margin: 14px 0 0;
+  padding: 12px;
+  border: 1px dashed var(--ofv-border);
+  border-radius: 6px;
+  background: var(--ofv-surface-muted);
+  color: var(--ofv-text-muted);
+  line-height: 1.6;
+}
+
 .ofv-docx-document {
   width: 100%;
   max-width: 100%;
   min-width: 0;
-  overflow: auto;
+  overflow-x: auto;
+  overflow-y: auto;
   color: #111827;
 }
 
 .ofv-docx-document .ofv-docx-wrapper {
+  display: flex;
+  flex-direction: column;
   align-items: center;
   box-sizing: border-box;
   width: 100%;
   max-width: 100%;
   min-width: 0;
   padding: 24px;
-  overflow: auto;
+  overflow: hidden;
   background: #e5e7eb;
+  --ofv-docx-scale: 1;
+  --ofv-docx-page-width: 794px;
 }
 
-.ofv-docx-document section.ofv-docx {
-  box-sizing: border-box;
+.ofv-docx-page-frame {
+  flex: 0 0 auto;
+  width: min(100%, calc(var(--ofv-docx-page-width) * var(--ofv-docx-scale)));
   max-width: 100%;
   min-width: 0;
+  position: relative;
+  overflow: visible;
+}
+
+.ofv-docx-document section.ofv-docx {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  max-width: none;
+  min-width: auto;
   color: #111827;
-  overflow: auto;
-  overflow-wrap: anywhere;
+  overflow: visible;
+  overflow-wrap: normal;
+  transform: scale(var(--ofv-docx-scale));
+  transform-origin: top left;
 }
 
 .ofv-docx-document section.ofv-docx img,
@@ -1667,9 +1750,19 @@
 }
 
 /* Archive / Zip layout styling */
+.ofv-archive {
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
 .ofv-archive-layout {
+  --ofv-archive-sidebar-expanded: 320px;
+  --ofv-archive-sidebar-collapsed: 56px;
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   width: 100%;
   max-width: 100%;
   height: 100%;
@@ -1679,17 +1772,40 @@
 }
 
 .ofv-archive-sidebar {
-  width: 320px;
-  flex: 1 1 220px;
+  width: var(--ofv-archive-sidebar-expanded);
+  flex: 0 0 var(--ofv-archive-sidebar-expanded);
   min-width: 0;
   max-width: 100%;
   border-right: 1px solid var(--ofv-border);
+  overflow: hidden;
+  position: relative;
+  z-index: 2;
+  color: var(--ofv-text);
+  background: var(--ofv-surface-muted);
+  transition:
+    flex-basis 0.2s ease,
+    width 0.2s ease,
+    max-width 0.2s ease;
+}
+
+.ofv-archive-layout.is-sidebar-collapsed .ofv-archive-sidebar {
+  flex-basis: var(--ofv-archive-sidebar-collapsed);
+  width: var(--ofv-archive-sidebar-collapsed);
+  max-width: var(--ofv-archive-sidebar-collapsed);
+}
+
+.ofv-archive-sidebar-panel {
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   background: var(--ofv-surface-muted);
 }
 
 .ofv-archive-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   padding: 12px 16px;
   border-bottom: 1px solid var(--ofv-border);
   font-weight: bold;
@@ -1698,18 +1814,60 @@
   background: var(--ofv-surface);
 }
 
+.ofv-archive-header-title {
+  min-width: 0;
+  overflow: hidden;
+  opacity: 1;
+  text-overflow: ellipsis;
+  transition: opacity 0.12s ease;
+  white-space: nowrap;
+}
+
+.ofv-archive-sidebar-toggle {
+  display: inline-flex;
+  flex: 0 0 28px;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--ofv-border);
+  border-radius: 6px;
+  color: var(--ofv-text);
+  background: var(--ofv-surface-muted);
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.ofv-archive-sidebar-toggle:hover,
+.ofv-archive-sidebar-toggle:focus-visible {
+  background: var(--ofv-button-hover);
+}
+
+.ofv-archive-sidebar-toggle:focus-visible {
+  outline: 2px solid #2563eb;
+  outline-offset: 2px;
+}
+
 .ofv-archive-tree {
   flex: 1;
   min-width: 0;
+  min-height: 0;
   overflow: auto;
+  overscroll-behavior: contain;
 }
 
 .ofv-archive-main {
   flex: 1;
   min-width: 0;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   overflow: auto;
+  overscroll-behavior: contain;
   position: relative;
   background: var(--ofv-bg);
 }
@@ -1732,6 +1890,12 @@
   transition: background 0.15s ease;
 }
 
+.ofv-archive-layout.is-sidebar-collapsed .ofv-archive-item {
+  justify-content: center;
+  padding: 10px 0;
+  gap: 0;
+}
+
 .ofv-archive-item:hover,
 .ofv-archive-item:focus-visible {
   background: var(--ofv-button-hover);
@@ -1749,19 +1913,120 @@
   padding-left: 13px;
 }
 
+.ofv-archive-layout.is-sidebar-collapsed .ofv-archive-item.is-active {
+  padding-left: 0;
+  border-left-width: 0;
+  box-shadow: inset 3px 0 0 var(--ofv-text);
+}
+
 .ofv-archive-item-icon {
-  flex: 0 0 16px;
+  display: inline-flex;
+  flex: 0 0 20px;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
   text-align: center;
   font-size: 14px;
 }
 
 .ofv-archive-item-name {
   flex: 1;
+  min-width: 0;
   overflow: hidden;
+  opacity: 1;
   text-overflow: ellipsis;
+  transition: opacity 0.12s ease;
   white-space: nowrap;
 }
 
+.ofv-archive-layout.is-sidebar-collapsed .ofv-archive-header {
+  justify-content: center;
+  padding-right: 0;
+  padding-left: 0;
+}
+
+.ofv-archive-layout.is-sidebar-collapsed .ofv-archive-header-title,
+.ofv-archive-layout.is-sidebar-collapsed .ofv-archive-item-name {
+  flex: 0 1 0;
+  width: 0;
+  opacity: 0;
+}
+
+.ofv-archive-layout.is-sidebar-collapsed .ofv-archive-tree {
+  overflow: hidden;
+}
+
+@container (max-width: 520px) {
+  .ofv-archive-layout {
+    --ofv-archive-sidebar-expanded: min(280px, 72cqw);
+    --ofv-archive-sidebar-collapsed: 48px;
+  }
+
+  .ofv-archive-sidebar {
+    flex: 0 0 var(--ofv-archive-sidebar-expanded);
+    width: var(--ofv-archive-sidebar-expanded);
+    max-width: var(--ofv-archive-sidebar-expanded);
+    height: 100%;
+    min-height: 0;
+  }
+
+  .ofv-archive-header {
+    min-height: 48px;
+    padding: 9px;
+  }
+
+  .ofv-archive-main {
+    flex: 1 1 auto;
+    width: auto;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  .ofv-archive-info {
+    justify-content: flex-start;
+    max-width: 100%;
+    margin: 0;
+    padding: 16px;
+  }
+}
+
+@container (max-width: 360px) {
+  .ofv-archive-layout {
+    --ofv-archive-sidebar-expanded: min(248px, 78cqw);
+    --ofv-archive-sidebar-collapsed: 44px;
+  }
+
+  .ofv-archive-sidebar {
+    flex-basis: var(--ofv-archive-sidebar-expanded);
+    width: var(--ofv-archive-sidebar-expanded);
+    max-width: var(--ofv-archive-sidebar-expanded);
+  }
+
+  .ofv-archive-header {
+    min-height: 44px;
+    padding: 7px;
+  }
+
+  .ofv-archive-sidebar-toggle {
+    flex-basis: 28px;
+    width: 28px;
+    height: 28px;
+  }
+
+  .ofv-archive-item {
+    gap: 6px;
+    padding: 7px 10px;
+  }
+
+  .ofv-archive-item.is-active {
+    padding-left: 7px;
+  }
+
+  .ofv-archive-layout.is-sidebar-collapsed .ofv-archive-item.is-active {
+    padding-left: 0;
+  }
+}
+
 .ofv-archive-loading {
   display: flex;
   flex-direction: column;
@@ -1901,12 +2166,14 @@
 /* GIS / Map Visualization Styles */
 .ofv-gis-viewer {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
   width: 100%;
   max-width: 100%;
   height: 100%;
   min-width: 0;
-  min-height: 0;
+  min-height: 320px;
+  overflow: hidden;
 }
 
 .ofv-gis-summary {
@@ -1938,11 +2205,186 @@
   flex: 1 1 auto;
   width: 100%;
   max-width: 100%;
-  height: auto;
+  height: 100%;
   min-width: 0;
-  min-height: 0;
+  min-height: 280px;
   position: relative;
   background: var(--ofv-bg);
+  overflow: hidden;
+}
+
+.ofv-map-stage .leaflet-container,
+.ofv-map-stage.leaflet-container {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 280px;
+  background: var(--ofv-bg);
+}
+
+.ofv-map-stage .leaflet-pane,
+.ofv-map-stage .leaflet-tile,
+.ofv-map-stage .leaflet-marker-icon,
+.ofv-map-stage .leaflet-marker-shadow,
+.ofv-map-stage .leaflet-tile-container,
+.ofv-map-stage .leaflet-pane > svg,
+.ofv-map-stage .leaflet-pane > canvas,
+.ofv-map-stage.leaflet-container .leaflet-pane,
+.ofv-map-stage.leaflet-container .leaflet-tile,
+.ofv-map-stage.leaflet-container .leaflet-marker-icon,
+.ofv-map-stage.leaflet-container .leaflet-marker-shadow,
+.ofv-map-stage.leaflet-container .leaflet-tile-container,
+.ofv-map-stage.leaflet-container .leaflet-pane > svg,
+.ofv-map-stage.leaflet-container .leaflet-pane > canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.ofv-map-stage .leaflet-container,
+.ofv-map-stage.leaflet-container {
+  overflow: hidden;
+}
+
+.ofv-map-stage .leaflet-tile,
+.ofv-map-stage .leaflet-marker-icon,
+.ofv-map-stage .leaflet-marker-shadow,
+.ofv-map-stage.leaflet-container .leaflet-tile,
+.ofv-map-stage.leaflet-container .leaflet-marker-icon,
+.ofv-map-stage.leaflet-container .leaflet-marker-shadow {
+  user-select: none;
+  -webkit-user-drag: none;
+}
+
+.ofv-map-stage .leaflet-overlay-pane svg,
+.ofv-map-stage.leaflet-container .leaflet-overlay-pane svg {
+  width: auto;
+  height: auto;
+  pointer-events: none;
+}
+
+.ofv-map-stage .leaflet-interactive,
+.ofv-map-stage.leaflet-container .leaflet-interactive {
+  pointer-events: auto;
+}
+
+.ofv-map-stage .leaflet-map-pane,
+.ofv-map-stage.leaflet-container .leaflet-map-pane {
+  z-index: 400;
+}
+
+.ofv-map-stage .leaflet-tile-pane,
+.ofv-map-stage.leaflet-container .leaflet-tile-pane {
+  z-index: 200;
+}
+
+.ofv-map-stage .leaflet-overlay-pane,
+.ofv-map-stage.leaflet-container .leaflet-overlay-pane {
+  z-index: 400;
+}
+
+.ofv-map-stage .leaflet-shadow-pane,
+.ofv-map-stage.leaflet-container .leaflet-shadow-pane {
+  z-index: 500;
+}
+
+.ofv-map-stage .leaflet-marker-pane,
+.ofv-map-stage.leaflet-container .leaflet-marker-pane {
+  z-index: 600;
+}
+
+.ofv-map-stage .leaflet-tooltip-pane,
+.ofv-map-stage.leaflet-container .leaflet-tooltip-pane {
+  z-index: 650;
+}
+
+.ofv-map-stage .leaflet-popup-pane,
+.ofv-map-stage.leaflet-container .leaflet-popup-pane {
+  z-index: 700;
+}
+
+.ofv-map-stage .leaflet-control,
+.ofv-map-stage.leaflet-container .leaflet-control {
+  position: relative;
+  z-index: 800;
+  pointer-events: auto;
+}
+
+.ofv-map-empty {
+  position: absolute;
+  inset: 0;
+  z-index: 400;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 24px;
+  text-align: center;
+  color: var(--ofv-text-muted);
+  pointer-events: none;
+}
+
+.ofv-map-empty strong {
+  color: var(--ofv-text);
+  font-size: 14px;
+}
+
+.ofv-map-legend {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  z-index: 450;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-width: min(280px, calc(100% - 24px));
+  padding: 8px 10px;
+  border: 1px solid rgba(225, 29, 72, 0.28);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.92);
+  color: #475569;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
+  font-size: 12px;
+  pointer-events: none;
+}
+
+.ofv-map-legend strong {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #111827;
+  font-size: 13px;
+}
+
+.ofv-map-legend strong::before {
+  content: "";
+  display: inline-block;
+  width: 22px;
+  height: 4px;
+  border-radius: 999px;
+  background: #e11d48;
+  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 5px rgba(225, 29, 72, 0.24);
+}
+
+.ofv-map-stage .ofv-map-feature {
+  filter: drop-shadow(0 1px 0 #ffffff) drop-shadow(0 0 5px rgba(225, 29, 72, 0.82));
+}
+
+.ofv-map-stage .ofv-map-point {
+  filter: drop-shadow(0 0 0 #ffffff) drop-shadow(0 0 8px rgba(225, 29, 72, 0.95));
+}
+
+.ofv-map-stage .ofv-map-tooltip {
+  border: 1px solid rgba(225, 29, 72, 0.22);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.96);
+  color: #111827;
+  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.16);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 600;
 }
 
 /* Premium custom Leaflet map controls styling */
@@ -2046,8 +2488,7 @@
   white-space: nowrap;
 }
 
-.ofv-code-title span,
-.ofv-code-status {
+.ofv-code-title span {
   color: var(--ofv-text-muted);
   font-size: 12px;
   line-height: 1.4;
@@ -2056,18 +2497,28 @@
 .ofv-code-actions {
   display: flex;
   flex: 0 0 auto;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
   justify-content: flex-end;
   gap: 8px;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .ofv-code-status {
-  min-width: min(74px, 100%);
+  flex: 0 1 96px;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--ofv-text-muted);
+  font-size: 12px;
+  line-height: 1.4;
   text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .ofv-code-action {
+  flex: 0 0 auto;
   min-height: 30px;
   border: 1px solid var(--ofv-border);
   border-radius: 6px;
@@ -2077,6 +2528,7 @@
   cursor: pointer;
   font: inherit;
   font-size: 12px;
+  white-space: nowrap;
 }
 
 .ofv-code-action:hover {
@@ -2138,6 +2590,8 @@
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   flex: 1 1 auto;
+  position: relative;
+  isolation: isolate;
   max-width: 100%;
   min-width: 0;
   min-height: 0;
@@ -2145,51 +2599,20 @@
   background: var(--ofv-surface-muted);
 }
 
-.ofv-code-editor {
-  flex: 1 1 auto;
-  max-width: 100%;
-  min-width: 0;
-  min-height: 280px;
-  overflow: hidden;
-  background: var(--ofv-surface-muted);
-}
-
-.ofv-code-editor[hidden],
 .ofv-code-body[hidden] {
   display: none;
 }
 
-.ofv-code-container.is-editor .ofv-code-editor {
-  display: block;
-}
-
-.ofv-code-editor-fallback {
-  display: block;
-  width: 100%;
-  height: 100%;
-  min-height: inherit;
-  margin: 0;
-  border: 0;
-  padding: 18px 20px;
-  outline: 0;
-  resize: none;
-  background: var(--ofv-surface-muted);
-  color: var(--ofv-text);
-  font-family: var(--ofv-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
-  font-size: 13px;
-  line-height: 1.6;
-  white-space: pre;
-}
-
 .ofv-code-gutter {
   position: sticky;
   left: 0;
-  z-index: 1;
+  z-index: 3;
   min-width: 48px;
   margin: 0;
   padding: 18px 12px;
   border-right: 1px solid var(--ofv-border);
   background: var(--ofv-surface);
+  box-shadow: 8px 0 14px -14px rgba(15, 23, 42, 0.65);
   color: var(--ofv-text-muted);
   font-family: var(--ofv-font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
   font-size: 13px;
@@ -2199,6 +2622,8 @@
 }
 
 .ofv-code-container pre {
+  position: relative;
+  z-index: 0;
   margin: 0;
   padding: 18px 20px;
   max-width: 100%;
@@ -2241,12 +2666,11 @@
 
   .ofv-code-actions {
     justify-content: flex-start;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
   }
 
   .ofv-code-status {
-    min-width: 0;
-    width: 100%;
+    flex-basis: 88px;
     text-align: left;
   }
 }
@@ -2411,6 +2835,8 @@
 /* PDF lazy loading elements */
 .ofv-pdf-page-wrapper {
   margin: 16px auto;
+  max-width: 100%;
+  min-width: 0;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
   border: 1px solid var(--ofv-border);
   background-color: var(--ofv-surface);