@nuptechs/nup-xlsx-preview 1.0.0

package/dist/styles/index.css

@@ -0,0 +1,730 @@
+/**
+ * @aspect/nup-xlsx-preview - Base Styles
+ * Ultra-light CSS for spreadsheet rendering
+ */
+
+/* Container */
+.nup-spreadsheet {
+  position: relative;
+  overflow: hidden;
+  font-family: var(--nup-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  font-size: var(--nup-font-size, 13px);
+  line-height: 1.4;
+  background: var(--nup-background, #ffffff);
+  color: var(--nup-foreground, #1a1a1a);
+  border: 1px solid var(--nup-border, #e0e0e0);
+  border-radius: 4px;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.nup-spreadsheet:focus {
+  outline: 2px solid var(--nup-selection-border, #1a73e8);
+  outline-offset: -2px;
+}
+
+/* Scroll Container */
+.nup-scroll-container {
+  position: absolute;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--nup-scrollbar-thumb, #c1c1c1) var(--nup-scrollbar-track, #f1f1f1);
+}
+
+.nup-scroll-container::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.nup-scroll-container::-webkit-scrollbar-track {
+  background: var(--nup-scrollbar-track, #f1f1f1);
+}
+
+.nup-scroll-container::-webkit-scrollbar-thumb {
+  background: var(--nup-scrollbar-thumb, #c1c1c1);
+  border-radius: 5px;
+  border: 2px solid var(--nup-scrollbar-track, #f1f1f1);
+}
+
+.nup-scroll-container::-webkit-scrollbar-thumb:hover {
+  background: var(--nup-scrollbar-thumb-hover, #a8a8a8);
+}
+
+/* Content Area */
+.nup-content {
+  position: relative;
+}
+
+/* Cell */
+.nup-cell {
+  position: absolute;
+  box-sizing: border-box;
+  padding: 2px 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-right: 1px solid var(--nup-grid, #e0e0e0);
+  border-bottom: 1px solid var(--nup-grid, #e0e0e0);
+  background: var(--nup-cell-bg, #ffffff);
+  cursor: cell;
+  transition: background-color 0.05s ease;
+}
+
+.nup-cell:hover {
+  background: var(--nup-cell-hover, #f8f9fa);
+}
+
+.nup-cell.nup-cell-number {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.nup-cell.nup-cell-selected {
+  background: var(--nup-selection-bg, rgba(26, 115, 232, 0.08));
+}
+
+.nup-cell.nup-cell-anchor {
+  z-index: 2;
+}
+
+.nup-cell.nup-cell-search-result {
+  background: var(--nup-search-bg, #fff59d);
+}
+
+.nup-cell.nup-cell-search-current {
+  background: var(--nup-search-current-bg, #ffb300);
+}
+
+/* Selection Border Overlay */
+.nup-selection-border {
+  position: absolute;
+  pointer-events: none;
+  border: 2px solid var(--nup-selection-border, #1a73e8);
+  z-index: 10;
+}
+
+.nup-selection-border::after {
+  content: '';
+  position: absolute;
+  bottom: -4px;
+  right: -4px;
+  width: 8px;
+  height: 8px;
+  background: var(--nup-selection-border, #1a73e8);
+  border-radius: 1px;
+}
+
+/* Headers */
+.nup-header {
+  position: absolute;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--nup-header-bg, #f8f9fa);
+  color: var(--nup-header-fg, #5f6368);
+  font-size: 11px;
+  font-weight: 500;
+  border-right: 1px solid var(--nup-grid, #e0e0e0);
+  border-bottom: 1px solid var(--nup-grid, #e0e0e0);
+  user-select: none;
+}
+
+.nup-header-col {
+  cursor: default;
+}
+
+.nup-header-col.nup-header-selected {
+  background: var(--nup-header-selected-bg, #e8f0fe);
+  color: var(--nup-selection-border, #1a73e8);
+}
+
+.nup-header-row {
+  cursor: default;
+}
+
+.nup-header-row.nup-header-selected {
+  background: var(--nup-header-selected-bg, #e8f0fe);
+  color: var(--nup-selection-border, #1a73e8);
+}
+
+/* Column Resize Handle */
+.nup-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 5;
+}
+
+.nup-resize-handle:hover,
+.nup-resize-handle.nup-resizing {
+  background: var(--nup-selection-border, #1a73e8);
+}
+
+/* Corner (top-left intersection) */
+.nup-corner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: var(--nup-header-bg, #f8f9fa);
+  border-right: 1px solid var(--nup-grid, #e0e0e0);
+  border-bottom: 1px solid var(--nup-grid, #e0e0e0);
+  z-index: 30;
+}
+
+/* Frozen Line Indicators */
+.nup-frozen-line-row {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--nup-frozen-border, #dadce0);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  z-index: 25;
+  pointer-events: none;
+}
+
+.nup-frozen-line-col {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--nup-frozen-border, #dadce0);
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+  z-index: 25;
+  pointer-events: none;
+}
+
+/* Sheet Tabs */
+.nup-sheet-tabs {
+  display: flex;
+  gap: 2px;
+  padding: 4px 8px;
+  background: var(--nup-header-bg, #f8f9fa);
+  border-top: 1px solid var(--nup-grid, #e0e0e0);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.nup-sheet-tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.nup-sheet-tab {
+  padding: 6px 16px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--nup-header-fg, #5f6368);
+  background: transparent;
+  border: none;
+  border-radius: 4px 4px 0 0;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  white-space: nowrap;
+}
+
+.nup-sheet-tab:hover {
+  background: var(--nup-cell-hover, #f0f0f0);
+}
+
+.nup-sheet-tab.nup-sheet-tab-active {
+  background: var(--nup-background, #ffffff);
+  color: var(--nup-foreground, #1a1a1a);
+  box-shadow: 0 -1px 0 var(--nup-selection-border, #1a73e8) inset;
+}
+
+/* Search Bar */
+.nup-search-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--nup-header-bg, #f8f9fa);
+  border-bottom: 1px solid var(--nup-grid, #e0e0e0);
+}
+
+.nup-search-input {
+  flex: 1;
+  padding: 6px 10px;
+  font-size: 13px;
+  border: 1px solid var(--nup-grid, #e0e0e0);
+  border-radius: 4px;
+  background: var(--nup-background, #ffffff);
+  color: var(--nup-foreground, #1a1a1a);
+  outline: none;
+}
+
+.nup-search-input:focus {
+  border-color: var(--nup-selection-border, #1a73e8);
+  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
+}
+
+.nup-search-count {
+  font-size: 12px;
+  color: var(--nup-header-fg, #5f6368);
+  white-space: nowrap;
+}
+
+.nup-search-btn {
+  padding: 6px 10px;
+  font-size: 12px;
+  background: transparent;
+  border: 1px solid var(--nup-grid, #e0e0e0);
+  border-radius: 4px;
+  cursor: pointer;
+  color: var(--nup-foreground, #1a1a1a);
+}
+
+.nup-search-btn:hover {
+  background: var(--nup-cell-hover, #f0f0f0);
+}
+
+/* No Gridlines */
+.nup-no-gridlines .nup-cell {
+  border-color: transparent;
+}
+
+/* Hidden Headers */
+.nup-no-headers .nup-header,
+.nup-no-headers .nup-corner {
+  display: none;
+}
+
+/* Loading State */
+.nup-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--nup-header-fg, #5f6368);
+}
+
+.nup-loading::after {
+  content: '';
+  width: 24px;
+  height: 24px;
+  margin-left: 8px;
+  border: 2px solid var(--nup-grid, #e0e0e0);
+  border-top-color: var(--nup-selection-border, #1a73e8);
+  border-radius: 50%;
+  animation: nup-spin 0.8s linear infinite;
+}
+
+@keyframes nup-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Accessibility: Focus Visible */
+.nup-spreadsheet:focus-visible .nup-cell-anchor {
+  outline: 2px solid var(--nup-selection-border, #1a73e8);
+  outline-offset: -2px;
+}
+
+/* High Contrast Mode Support */
+@media (prefers-contrast: high) {
+  .nup-cell {
+    border-color: #000000;
+  }
+  
+  .nup-selection-border {
+    border-width: 3px;
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .nup-cell,
+  .nup-sheet-tab {
+    transition: none;
+  }
+  
+  .nup-loading::after {
+    animation: none;
+  }
+}
+/**
+ * @aspect/nup-xlsx-preview - Theme Definitions
+ * 7 themes: 4 light, 2 dark, 1 accessible
+ */
+
+/* === LIGHT THEMES === */
+
+/* Theme: Default (Google Sheets inspired) */
+.nup-theme-default {
+  --nup-background: #ffffff;
+  --nup-foreground: #202124;
+  --nup-grid: #e0e0e0;
+  --nup-border: #dadce0;
+  --nup-cell-bg: #ffffff;
+  --nup-cell-hover: #f8f9fa;
+  --nup-header-bg: #f8f9fa;
+  --nup-header-fg: #5f6368;
+  --nup-header-selected-bg: #e8f0fe;
+  --nup-selection-border: #1a73e8;
+  --nup-selection-bg: rgba(26, 115, 232, 0.08);
+  --nup-frozen-border: #dadce0;
+  --nup-scrollbar-track: #f1f1f1;
+  --nup-scrollbar-thumb: #c1c1c1;
+  --nup-scrollbar-thumb-hover: #a8a8a8;
+  --nup-search-bg: #fff59d;
+  --nup-search-current-bg: #ffb300;
+  --nup-font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --nup-font-size: 13px;
+}
+
+/* Theme: Excel Classic */
+.nup-theme-excel {
+  --nup-background: #ffffff;
+  --nup-foreground: #000000;
+  --nup-grid: #d4d4d4;
+  --nup-border: #b4b4b4;
+  --nup-cell-bg: #ffffff;
+  --nup-cell-hover: #f0f0f0;
+  --nup-header-bg: #f0f0f0;
+  --nup-header-fg: #000000;
+  --nup-header-selected-bg: #cce4f7;
+  --nup-selection-border: #217346;
+  --nup-selection-bg: rgba(33, 115, 70, 0.1);
+  --nup-frozen-border: #9bc2e6;
+  --nup-scrollbar-track: #f0f0f0;
+  --nup-scrollbar-thumb: #c0c0c0;
+  --nup-scrollbar-thumb-hover: #a0a0a0;
+  --nup-search-bg: #ffff00;
+  --nup-search-current-bg: #ff9632;
+  --nup-font-family: 'Calibri', 'Segoe UI', sans-serif;
+  --nup-font-size: 11px;
+}
+
+/* Theme: Modern */
+.nup-theme-modern {
+  --nup-background: #fafafa;
+  --nup-foreground: #18181b;
+  --nup-grid: #e4e4e7;
+  --nup-border: #d4d4d8;
+  --nup-cell-bg: #ffffff;
+  --nup-cell-hover: #f4f4f5;
+  --nup-header-bg: #f4f4f5;
+  --nup-header-fg: #71717a;
+  --nup-header-selected-bg: #dbeafe;
+  --nup-selection-border: #3b82f6;
+  --nup-selection-bg: rgba(59, 130, 246, 0.08);
+  --nup-frozen-border: #a1a1aa;
+  --nup-scrollbar-track: #f4f4f5;
+  --nup-scrollbar-thumb: #d4d4d8;
+  --nup-scrollbar-thumb-hover: #a1a1aa;
+  --nup-search-bg: #fef08a;
+  --nup-search-current-bg: #fbbf24;
+  --nup-font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --nup-font-size: 13px;
+}
+
+/* Theme: Minimal */
+.nup-theme-minimal {
+  --nup-background: #ffffff;
+  --nup-foreground: #27272a;
+  --nup-grid: #f4f4f5;
+  --nup-border: #e4e4e7;
+  --nup-cell-bg: #ffffff;
+  --nup-cell-hover: #fafafa;
+  --nup-header-bg: #ffffff;
+  --nup-header-fg: #a1a1aa;
+  --nup-header-selected-bg: #f4f4f5;
+  --nup-selection-border: #18181b;
+  --nup-selection-bg: rgba(24, 24, 27, 0.04);
+  --nup-frozen-border: #e4e4e7;
+  --nup-scrollbar-track: #ffffff;
+  --nup-scrollbar-thumb: #e4e4e7;
+  --nup-scrollbar-thumb-hover: #d4d4d8;
+  --nup-search-bg: #fef9c3;
+  --nup-search-current-bg: #fde047;
+  --nup-font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
+  --nup-font-size: 13px;
+}
+
+/* === DARK THEMES === */
+
+/* Theme: Dark */
+.nup-theme-dark {
+  --nup-background: #1e1e1e;
+  --nup-foreground: #d4d4d4;
+  --nup-grid: #3c3c3c;
+  --nup-border: #4a4a4a;
+  --nup-cell-bg: #252526;
+  --nup-cell-hover: #2a2d2e;
+  --nup-header-bg: #252526;
+  --nup-header-fg: #858585;
+  --nup-header-selected-bg: #264f78;
+  --nup-selection-border: #0078d4;
+  --nup-selection-bg: rgba(0, 120, 212, 0.2);
+  --nup-frozen-border: #4a4a4a;
+  --nup-scrollbar-track: #1e1e1e;
+  --nup-scrollbar-thumb: #4a4a4a;
+  --nup-scrollbar-thumb-hover: #5a5a5a;
+  --nup-search-bg: #613a00;
+  --nup-search-current-bg: #a86400;
+  --nup-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --nup-font-size: 13px;
+}
+
+/* Theme: Midnight */
+.nup-theme-midnight {
+  --nup-background: #0d1117;
+  --nup-foreground: #c9d1d9;
+  --nup-grid: #21262d;
+  --nup-border: #30363d;
+  --nup-cell-bg: #0d1117;
+  --nup-cell-hover: #161b22;
+  --nup-header-bg: #161b22;
+  --nup-header-fg: #8b949e;
+  --nup-header-selected-bg: #1f6feb33;
+  --nup-selection-border: #58a6ff;
+  --nup-selection-bg: rgba(88, 166, 255, 0.15);
+  --nup-frozen-border: #30363d;
+  --nup-scrollbar-track: #0d1117;
+  --nup-scrollbar-thumb: #30363d;
+  --nup-scrollbar-thumb-hover: #484f58;
+  --nup-search-bg: #634700;
+  --nup-search-current-bg: #9e6a00;
+  --nup-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --nup-font-size: 13px;
+}
+
+/* === ACCESSIBLE THEME (WCAG AAA) === */
+
+/* Theme: High Contrast */
+.nup-theme-accessible {
+  --nup-background: #ffffff;
+  --nup-foreground: #000000;
+  --nup-grid: #000000;
+  --nup-border: #000000;
+  --nup-cell-bg: #ffffff;
+  --nup-cell-hover: #e6e6e6;
+  --nup-header-bg: #e6e6e6;
+  --nup-header-fg: #000000;
+  --nup-header-selected-bg: #0078d4;
+  --nup-selection-border: #0000ff;
+  --nup-selection-bg: rgba(0, 0, 255, 0.15);
+  --nup-frozen-border: #000000;
+  --nup-scrollbar-track: #e6e6e6;
+  --nup-scrollbar-thumb: #666666;
+  --nup-scrollbar-thumb-hover: #333333;
+  --nup-search-bg: #ffff00;
+  --nup-search-current-bg: #ff6600;
+  --nup-font-family: Arial, Helvetica, sans-serif;
+  --nup-font-size: 14px;
+}
+
+/* Accessible theme selected state overrides */
+.nup-theme-accessible .nup-header-selected {
+  color: #ffffff;
+}
+
+/* === COLORBLIND-FRIENDLY VARIANTS === */
+
+/* Deuteranopia (red-green) */
+.nup-colorblind-deuteranopia {
+  --nup-selection-border: #0077bb;
+  --nup-selection-bg: rgba(0, 119, 187, 0.12);
+  --nup-search-bg: #ddcc77;
+  --nup-search-current-bg: #cc6677;
+}
+
+/* Protanopia (red-green) */
+.nup-colorblind-protanopia {
+  --nup-selection-border: #33bbee;
+  --nup-selection-bg: rgba(51, 187, 238, 0.12);
+  --nup-search-bg: #ee7733;
+  --nup-search-current-bg: #cc3311;
+}
+
+/* Tritanopia (blue-yellow) */
+.nup-colorblind-tritanopia {
+  --nup-selection-border: #ee3377;
+  --nup-selection-bg: rgba(238, 51, 119, 0.12);
+  --nup-search-bg: #009988;
+  --nup-search-current-bg: #ee7733;
+}
+/**
+ * @aspect/nup-xlsx-preview - Print Styles
+ * Optimized for printing spreadsheets
+ */
+
+@media print {
+  /* Reset colors for print */
+  .nup-spreadsheet,
+  .nup-spreadsheet * {
+    background: white !important;
+    color: black !important;
+    box-shadow: none !important;
+  }
+
+  /* Container */
+  .nup-spreadsheet {
+    position: static !important;
+    width: 100% !important;
+    height: auto !important;
+    max-height: none !important;
+    overflow: visible !important;
+    border: none !important;
+    border-radius: 0 !important;
+    page-break-inside: auto;
+  }
+
+  /* Scroll container - remove scrolling */
+  .nup-scroll-container {
+    position: static !important;
+    overflow: visible !important;
+    height: auto !important;
+  }
+
+  /* Content */
+  .nup-content {
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+  }
+
+  /* Cells - use table layout for print */
+  .nup-cell {
+    position: static !important;
+    display: table-cell !important;
+    border: 0.5pt solid #999999 !important;
+    padding: 3pt 5pt !important;
+    font-size: 9pt !important;
+    white-space: normal !important;
+    word-wrap: break-word !important;
+    page-break-inside: avoid;
+  }
+
+  /* Headers */
+  .nup-header {
+    display: table-cell !important;
+    position: static !important;
+    background: #f0f0f0 !important;
+    border: 0.5pt solid #999999 !important;
+    font-weight: bold !important;
+    font-size: 8pt !important;
+  }
+
+  /* Selection styling - hide for print */
+  .nup-selection-border,
+  .nup-cell-selected,
+  .nup-cell-search-result,
+  .nup-cell-search-current {
+    background: white !important;
+    border-color: #999999 !important;
+  }
+
+  .nup-selection-border {
+    display: none !important;
+  }
+
+  /* Hide UI elements */
+  .nup-sheet-tabs,
+  .nup-search-bar,
+  .nup-resize-handle,
+  .nup-frozen-line-row,
+  .nup-frozen-line-col,
+  .nup-loading {
+    display: none !important;
+  }
+
+  /* Scrollbars */
+  .nup-scroll-container::-webkit-scrollbar {
+    display: none !important;
+  }
+
+  /* Page breaks */
+  .nup-print-page-break {
+    page-break-after: always;
+  }
+
+  /* Header rows repeat on each page */
+  .nup-print-header {
+    display: table-header-group !important;
+  }
+
+  /* Repeat column headers */
+  thead {
+    display: table-header-group;
+  }
+
+  /* Avoid orphan rows */
+  tr {
+    page-break-inside: avoid;
+    page-break-after: auto;
+  }
+
+  /* Print margins */
+  @page {
+    margin: 1cm;
+    size: A4 landscape;
+  }
+
+  /* First page */
+  @page :first {
+    margin-top: 1.5cm;
+  }
+
+  /* Left pages */
+  @page :left {
+    margin-left: 1.5cm;
+    margin-right: 1cm;
+  }
+
+  /* Right pages */
+  @page :right {
+    margin-left: 1cm;
+    margin-right: 1.5cm;
+  }
+
+  /* Grayscale print option */
+  .nup-print-grayscale {
+    filter: grayscale(100%);
+    -webkit-filter: grayscale(100%);
+  }
+
+  /* Compact print option */
+  .nup-print-compact .nup-cell {
+    padding: 1pt 3pt !important;
+    font-size: 8pt !important;
+  }
+
+  .nup-print-compact .nup-header {
+    font-size: 7pt !important;
+  }
+
+  /* Hide column/row headers for cleaner print */
+  .nup-print-no-headers .nup-header {
+    display: none !important;
+  }
+
+  .nup-print-no-headers .nup-corner {
+    display: none !important;
+  }
+
+  /* Grid lines option */
+  .nup-print-no-gridlines .nup-cell {
+    border: none !important;
+  }
+
+  .nup-print-no-gridlines .nup-header {
+    border: none !important;
+    border-bottom: 1pt solid #999999 !important;
+  }
+}
+
+/* Print preview styles (visible in normal view) */
+.nup-print-preview {
+  background: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  margin: 20px auto;
+  max-width: 297mm; /* A4 landscape width */
+}
+
+.nup-print-preview .nup-spreadsheet {
+  border: none;
+  border-radius: 0;
+}