@einfach-excel/spreadsheet-ui-styles 0.0.0-stage → 0.2.0

package/styles/grid-frame.css

@@ -0,0 +1,268 @@
+/* === vNext Grid === */
+
+.vnext-demo {
+  overflow: auto;
+}
+
+.spreadsheet-grid {
+  overflow: hidden;
+  max-height: 70vh;
+  max-width: 100%;
+  border: 1px solid var(--border);
+  font-size: 13px;
+  outline: none;
+}
+
+.spreadsheet-grid-scroll-viewport {
+  overflow: auto;
+  max-height: 70vh;
+  max-width: 100%;
+  /* `none` disables BOTH the scroll-chain to the parent page AND the
+   * rubber-band overscroll on this element itself. `contain` would only
+   * stop the chain — the inner viewport would still bounce at the edge. */
+  overscroll-behavior: none;
+}
+
+.spreadsheet-grid-overlay-layer {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* 刻意不给网格根画焦点光晕:焦点位置由活动单元格边框表达(Excel 口径),
+   键盘可见性由 overlay 的选区框保证。 */
+
+/*
+ * Format-painter cursor feedback. SpreadsheetFormatPainter mirrors the
+ * painter state onto the grid root via data-format-painter-active="armed"
+ * or "sticky". Without this rule, the only signal the painter is armed is
+ * the toolbar button — easy to miss when the user's eyes are on the grid.
+ */
+.spreadsheet-grid[data-format-painter-active] .cell,
+.spreadsheet-grid[data-format-painter-active] .spreadsheet-grid-cell {
+  cursor: copy;
+}
+.spreadsheet-grid[data-format-painter-active='sticky'] {
+  outline: 2px dashed var(--office-blue);
+  outline-offset: -2px;
+}
+
+.spreadsheet-grid-table {
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.spreadsheet-grid-virtual-spacer {
+  border: 0;
+  padding: 0;
+  background: transparent;
+  pointer-events: none;
+}
+
+.spreadsheet-grid-corner,
+.spreadsheet-grid-col-header,
+.spreadsheet-grid-row-header,
+.spreadsheet-grid-cell {
+  border: 1px solid var(--gridline);
+  padding: 0;
+  height: 24px;
+}
+
+.spreadsheet-grid-cell {
+  position: relative;
+}
+
+.spreadsheet-grid-cell.cell-merge-anchor {
+  overflow: hidden;
+}
+
+.spreadsheet-grid-cell[data-validation-severity]::after {
+  content: '';
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  width: 0;
+  height: 0;
+  border-top: 7px solid #d97706;
+  border-left: 7px solid transparent;
+  pointer-events: none;
+}
+
+.spreadsheet-grid-cell[data-validation-severity='error']::after {
+  border-top-color: #dc2626;
+}
+
+.spreadsheet-grid-col-header,
+.spreadsheet-grid-cell {
+  width: 96px;
+}
+
+.spreadsheet-grid-corner,
+.spreadsheet-grid-row-header {
+  width: 44px;
+}
+
+.spreadsheet-grid-col-header,
+.spreadsheet-grid-row-header,
+.spreadsheet-grid-corner {
+  background: var(--bg-chrome);
+  color: var(--text-muted);
+  font-weight: 400;
+  text-align: center;
+  user-select: none;
+  font-size: 12px;
+}
+
+.spreadsheet-grid-col-header,
+.spreadsheet-grid-row-header,
+.spreadsheet-grid-corner {
+  cursor: pointer;
+}
+
+/* Make column headers / row headers / corner stick to the edges of the scroll
+ * viewport. This unlocks freeze rows/cols because the frozen cells then layer
+ * underneath the always-visible headers, and also fixes a long-standing UX
+ * gap (headers used to scroll out of view). */
+.spreadsheet-grid-col-header {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.spreadsheet-grid-row-header {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+}
+.spreadsheet-grid-corner {
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 3;
+}
+
+/* Frozen rows / cols / corner — set by SpreadsheetGrid via data attribute.
+ * `top` and `left` offsets are supplied inline because they depend on
+ * cumulative row heights / column widths. Z-index layers above plain cells
+ * (1) and below headers (2/3). */
+.spreadsheet-grid-cell[data-frozen-row] {
+  position: sticky;
+  z-index: 1;
+  background: var(--bg-cell);
+}
+.spreadsheet-grid-cell[data-frozen-col] {
+  position: sticky;
+  z-index: 1;
+  background: var(--bg-cell);
+}
+.spreadsheet-grid-cell[data-frozen-row][data-frozen-col] {
+  z-index: 2;
+}
+/* Frozen headers must outrank both their non-frozen siblings (which already
+ * sit at z 2/3 thanks to the .spreadsheet-grid scoped sticky rules below)
+ * AND the corner (z 4). Otherwise non-frozen headers scrolling past land on
+ * top in source-order ties. */
+.spreadsheet-grid .spreadsheet-grid-col-header[data-frozen-col='true'],
+.spreadsheet-grid .spreadsheet-grid-row-header[data-frozen-row='true'] {
+  z-index: 5;
+}
+.spreadsheet-grid-row-header[data-frozen-row] {
+  position: sticky;
+  z-index: 5;
+}
+
+/* Outline (grouping) gutter — renders only when the sheet has row/column
+ * groups. Row gutter cells stick to the left edge like row headers; the
+ * column band sticks to the top like column headers. Slot layout lives in
+ * an inner flex wrapper because flex on a th breaks table column sizing. */
+.spreadsheet-grid-outline-row-cell,
+.spreadsheet-grid-outline-header,
+.spreadsheet-grid-outline-col-cell,
+.spreadsheet-grid-outline-corner {
+  border: 1px solid var(--gridline);
+  padding: 0;
+  background: var(--bg-chrome);
+  user-select: none;
+}
+.spreadsheet-grid-outline-row-cell {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+}
+.spreadsheet-grid-outline-col-cell {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.spreadsheet-grid-outline-header {
+  position: sticky;
+  left: 0;
+  top: 0;
+  z-index: 4;
+}
+.spreadsheet-grid-outline-corner {
+  position: sticky;
+  left: 0;
+  top: 0;
+  z-index: 4;
+}
+.spreadsheet-outline-slots {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: stretch;
+  justify-content: center;
+}
+.spreadsheet-outline-slots[data-axis='column'] {
+  flex-direction: column;
+}
+.spreadsheet-outline-slot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 14px;
+  min-width: 0;
+  min-height: 0;
+}
+.spreadsheet-outline-line {
+  display: block;
+  background: var(--border-strong);
+}
+.spreadsheet-outline-slots[data-axis='row'] .spreadsheet-outline-line {
+  width: 2px;
+  height: 100%;
+}
+.spreadsheet-outline-slots[data-axis='column'] .spreadsheet-outline-line {
+  height: 2px;
+  width: 100%;
+}
+.spreadsheet-outline-toggle,
+.spreadsheet-outline-level-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  padding: 0;
+  border: 1px solid var(--border-strong);
+  border-radius: 2px;
+  background: var(--bg-surface);
+  color: var(--text-default);
+  font-size: 9px;
+  line-height: 1;
+  cursor: pointer;
+}
+.spreadsheet-outline-toggle:hover,
+.spreadsheet-outline-level-button:hover {
+  background: var(--hover);
+}
+.spreadsheet-grid-outline-header,
+.spreadsheet-grid-outline-corner {
+  text-align: center;
+  vertical-align: middle;
+}
+.spreadsheet-grid-outline-header .spreadsheet-outline-level-button,
+.spreadsheet-grid-outline-corner .spreadsheet-outline-level-button {
+  margin: 1px;
+}
+

package/styles/grid-headers.css

@@ -0,0 +1,99 @@
+/* === B. Grid headers + selection chrome ============================== */
+
+.spreadsheet-grid {
+  font-family: var(--excel-font);
+  font-size: 13px;
+}
+
+.spreadsheet-grid .spreadsheet-grid-table {
+  border-collapse: separate;
+  border-spacing: 0;
+  background: var(--bg-cell);
+}
+
+/* Top-left empty corner — pinned, slightly darker chrome */
+.spreadsheet-grid .spreadsheet-grid-corner {
+  background: var(--bg-chrome);
+  border-right: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+
+/* Column letters */
+.spreadsheet-grid .spreadsheet-grid-col-header {
+  position: relative;
+  height: 24px;
+  padding: 0 4px;
+  background: var(--bg-chrome);
+  border-right: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  color: var(--text-muted);
+  font-weight: 400;
+  text-align: center;
+  user-select: none;
+}
+
+.spreadsheet-grid .spreadsheet-grid-col-header.is-in-selection {
+  background: var(--header-selected-bg);
+  color: var(--header-selected-text);
+  font-weight: 600;
+  border-bottom: 2px solid var(--excel-green);
+}
+
+/* 整列选中(点击列字母):实心品牌绿,Excel 口径。 */
+.spreadsheet-grid .spreadsheet-grid-col-header.is-selected {
+  background: var(--header-full-selected-bg);
+  color: var(--text-on-accent);
+  font-weight: 600;
+  border-bottom: 2px solid var(--excel-green);
+}
+
+.spreadsheet-grid .spreadsheet-grid-col-header .spreadsheet-grid-header-label {
+  display: inline-block;
+}
+
+/* Row numbers */
+.spreadsheet-grid .spreadsheet-grid-row-header {
+  width: 36px;
+  padding: 0 6px;
+  background: var(--bg-chrome);
+  border-right: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  color: var(--text-muted);
+  font-weight: 400;
+  text-align: right;
+  user-select: none;
+}
+
+.spreadsheet-grid .spreadsheet-grid-corner,
+.spreadsheet-grid .spreadsheet-grid-col-header {
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+
+.spreadsheet-grid .spreadsheet-grid-corner,
+.spreadsheet-grid .spreadsheet-grid-row-header {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+}
+
+.spreadsheet-grid .spreadsheet-grid-corner {
+  z-index: 4;
+}
+
+.spreadsheet-grid .spreadsheet-grid-row-header.is-in-selection {
+  background: var(--header-selected-bg);
+  color: var(--header-selected-text);
+  font-weight: 600;
+  border-right: 2px solid var(--excel-green);
+}
+
+/* 整行选中(点击行号):实心品牌绿。 */
+.spreadsheet-grid .spreadsheet-grid-row-header.is-selected {
+  background: var(--header-full-selected-bg);
+  color: var(--text-on-accent);
+  font-weight: 600;
+  border-right: 2px solid var(--excel-green);
+}
+

package/styles/grid-overlays.css

@@ -0,0 +1,160 @@
+/* Freeze boundary divider — single SVG overlay drawn once per grid root
+ * (NOT inside the scroll viewport), so it sits at the seam between pinned
+ * and scrollable regions without participating in scroll. The line positions
+ * recompute when freezeRowCount / freezeColCount / row heights / column
+ * widths change, but not on scroll — the boundary is anchored to the grid
+ * chrome, not the table content.
+ *
+ * z-index sits below the selection canvas overlay (which has no explicit
+ * z-index; rendered after in DOM order) so marching ants / fill handle
+ * always paint on top of the divider. */
+.spreadsheet-grid-freeze-boundary {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  overflow: visible;
+  /* Above corner (4) and frozen headers (5) so the seam line is visible
+   * across the entire grid including the frozen header bands. */
+  z-index: 6;
+}
+.spreadsheet-grid-freeze-boundary line {
+  stroke: var(--border-strong);
+  stroke-width: 2;
+  shape-rendering: crispEdges;
+}
+
+.spreadsheet-grid-header-label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.spreadsheet-grid-col-resize-handle,
+.spreadsheet-grid-row-resize-handle {
+  position: absolute;
+  z-index: 2;
+  border: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.spreadsheet-grid-col-resize-handle {
+  top: 0;
+  right: -3px;
+  bottom: 0;
+  width: 6px;
+  cursor: col-resize;
+}
+
+.spreadsheet-grid-row-resize-handle {
+  right: 0;
+  bottom: -3px;
+  left: 0;
+  height: 6px;
+  cursor: row-resize;
+}
+
+.spreadsheet-grid-col-resize-handle:hover,
+.spreadsheet-grid-row-resize-handle:hover {
+  background: var(--resize-hint);
+}
+
+/* 选中态表头的取色统一在 grid-headers.css(绿色系),这里不再另立蓝色系。 */
+.spreadsheet-grid-corner[data-selected='true'] {
+  background: var(--header-selected-bg);
+  color: var(--header-selected-text);
+}
+
+.spreadsheet-grid-cell-button {
+  /*
+   * Flex column so the inner `.cell-display` can pick its vertical position
+   * via `margin-top: auto` / `margin-bottom: auto`, driven from
+   * SpreadsheetCellFormat.verticalAlign in the cell renderer.
+   */
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  padding: 0;
+  /* `inherit` (not `transparent`) so the parent TD's inline fill propagates
+   * down to the .cell-display child via `background-color: inherit`. The
+   * fill renderer paints bgColor onto the TD inline; intermediate elements
+   * must hand the value through or the span ends up transparent. */
+  background-color: inherit;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  position: relative;
+}
+
+.spreadsheet-grid-data-bar {
+  position: absolute;
+  top: 20%;
+  left: 2px;
+  z-index: 0;
+  height: 60%;
+  max-width: calc(100% - 4px);
+  border-radius: 2px;
+  pointer-events: none;
+  background: linear-gradient(90deg, var(--data-bar-min-color), var(--data-bar-max-color));
+  opacity: 0.58;
+}
+
+.spreadsheet-grid-cell-button > .cell-display {
+  position: relative;
+  z-index: 1;
+}
+
+.cell-rich-link {
+  color: var(--office-blue-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.cell-rich-text {
+  display: inline;
+}
+
+.spreadsheet-grid-fill-handle {
+  position: absolute;
+  right: -3px;
+  bottom: -3px;
+  z-index: 3;
+  width: 7px;
+  height: 7px;
+  border: 1px solid var(--bg-cell);
+  padding: 0;
+  background: var(--excel-green);
+  cursor: crosshair;
+}
+
+.cell-fill-preview {
+  box-shadow: inset 0 0 0 1px var(--excel-green);
+}
+
+/* Range cell highlight (every cell in the rectangle EXCEPT the focus cell).
+ * Lighter blue so the focus cell's outline + tint still pop. */
+.cell-in-range {
+  background: var(--select-bg);
+}
+
+/* Hover override inside a range — keep the range tint visible instead of
+ * the generic hover blue, which would otherwise wipe the visual. */
+.cell-in-range:hover {
+  background: var(--select-bg);
+}
+
+/* 动态数组溢出区（ADR 0006 阶段 3）。外圈的细蓝框由 overlay 画；这里只给区内每格
+ * 一层极淡的蓝，让「这一片是一个数组」在框之外也读得出来。
+ *
+ * 刻意用低特异性的单类选择器：`.spreadsheet-grid .spreadsheet-grid-cell.cell-active`
+ * 一类的选区底色特异性更高，所以选中态永远压得住这层。 */
+.cell-spill {
+  background: var(--spill-tint);
+}

package/styles/help-overlay.css

@@ -0,0 +1,67 @@
+/* Help overlay (Keyboard Shortcuts / About) — centered card. */
+.spreadsheet-help-overlay {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+  min-width: 320px;
+  max-width: 480px;
+  background: var(--bg, #fff);
+  border: 1px solid var(--border, #d0d0d0);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  padding: 16px 20px;
+  font-size: 13px;
+}
+
+.spreadsheet-help-overlay-title {
+  margin: 0 0 12px 0;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.spreadsheet-help-overlay-body {
+  margin: 0 0 12px 0;
+  line-height: 1.5;
+}
+
+.spreadsheet-help-overlay-shortcut-list {
+  list-style: none;
+  margin: 0 0 12px 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 6px 16px;
+}
+
+.spreadsheet-help-overlay-shortcut-item {
+  display: contents;
+}
+
+.spreadsheet-help-overlay-keys {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  background: var(--bg-muted, #f1f1f1);
+  border: 1px solid var(--border, #d0d0d0);
+  border-radius: 3px;
+  padding: 1px 6px;
+  font-size: 12px;
+}
+
+.spreadsheet-help-overlay-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.spreadsheet-help-overlay-close {
+  padding: 4px 12px;
+  border: 1px solid var(--border, #d0d0d0);
+  background: var(--bg-muted, #f7f7f7);
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.spreadsheet-help-overlay-close:hover {
+  background: var(--bg-hover, #ececec);
+}
+

package/styles/history-panel.css

@@ -0,0 +1,127 @@
+/* === History timeline panel (demo right-rail) ====================================== */
+
+.spreadsheet-history-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 10px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-chrome);
+  font-family: var(--excel-font);
+  font-size: 12px;
+  color: var(--text-default);
+}
+
+.history-timeline-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.history-timeline-btn {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  background: var(--bg-surface);
+  color: var(--text-default);
+  font: inherit;
+  cursor: pointer;
+  transition: background 100ms ease-out, border-color 100ms ease-out;
+}
+
+.history-timeline-btn:not(:disabled):hover {
+  background: var(--hover);
+  border-color: var(--border-strong);
+}
+
+.history-timeline-btn:disabled {
+  color: var(--text-muted);
+  background: transparent;
+  cursor: default;
+  opacity: 0.6;
+}
+
+.history-timeline-cursor {
+  margin-left: 4px;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.history-timeline-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 180px;
+  overflow-y: auto;
+}
+
+.history-timeline-entry {
+  display: flex;
+}
+
+.history-timeline-entry-btn {
+  flex: 1 1 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  background: transparent;
+  color: var(--text-default);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.history-timeline-entry-btn:hover {
+  background: var(--hover);
+  border-color: var(--border);
+}
+
+.history-timeline-entry-current .history-timeline-entry-btn {
+  background: var(--select-bg);
+  border-color: var(--excel-green);
+  /*
+    a11y: --excel-green (#217346) on --select-bg (#dae3dc) is 4.43:1, just
+    under the 4.5:1 WCAG AA floor for the 11-12px text inside this button
+    (axe `color-contrast`, serious). --excel-green-text is the same hue
+    darkened to 5.68:1. The brand green is kept for the border, which is a
+    non-text element held to the 3:1 rule instead.
+  */
+  color: var(--excel-green-text);
+  font-weight: 600;
+}
+
+.history-timeline-entry-kind {
+  font-variant-numeric: tabular-nums;
+}
+
+.history-timeline-entry-time {
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+/*
+  a11y: --text-muted (#6a6a6a) clears 4.5:1 on the default chrome, but the
+  current entry swaps the background to --select-bg (#dae3dc) where it drops
+  to 4.12:1 (axe `color-contrast`, serious). Darken it only in that context —
+  #595959 on --select-bg is 5.34:1.
+*/
+.history-timeline-entry-current .history-timeline-entry-time {
+  color: #595959;
+}
+
+.history-timeline-empty {
+  padding: 6px 0;
+  color: var(--text-muted);
+  font-style: italic;
+}
+