@ishibashi0112/spreadsheet-grid 0.9.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/README.md +415 -259
  2. package/dist/SpreadsheetGrid.d.ts +1 -1
  3. package/dist/hooks/useGridTooltip.d.ts +1 -0
  4. package/dist/hooks/usePanelHeaderDrag.d.ts +12 -0
  5. package/dist/hooks/useResolvedGridTheme.d.ts +2 -0
  6. package/dist/hooks/useToolPanelController.d.ts +27 -0
  7. package/dist/index.cjs +8 -8
  8. package/dist/index.d.ts +1 -1
  9. package/dist/index.js +2889 -2185
  10. package/dist/logic/autoScrollGeometry.d.ts +27 -0
  11. package/dist/logic/columnReset.d.ts +7 -0
  12. package/dist/logic/filterSummary.d.ts +2 -0
  13. package/dist/logic/panelDragGeometry.d.ts +13 -0
  14. package/dist/logic/setFilterSearch.d.ts +14 -0
  15. package/dist/logic/tooltipGeometry.d.ts +19 -0
  16. package/dist/model/gridTypes.d.ts +8 -0
  17. package/dist/style.css +1 -1
  18. package/dist/style.layer.css +1 -0
  19. package/dist/view/CellContextMenuPopover.d.ts +2 -1
  20. package/dist/view/ColumnChooserPanel.d.ts +2 -7
  21. package/dist/view/ColumnFilterPopover.d.ts +3 -1
  22. package/dist/view/ColumnMenuPopover.d.ts +4 -1
  23. package/dist/view/DefaultGridTopBar.d.ts +2 -1
  24. package/dist/view/FilterManagementPanel.d.ts +24 -0
  25. package/dist/view/GridFilterChipBar.d.ts +10 -0
  26. package/dist/view/SortManagementPanel.d.ts +1 -7
  27. package/dist/view/ToolPanel.d.ts +21 -0
  28. package/package.json +4 -3
  29. package/dist/hooks/useColumnChooserController.d.ts +0 -18
  30. package/dist/hooks/useSortManagementController.d.ts +0 -18
package/dist/logic/autoScrollGeometry.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ export declare const AUTO_SCROLL_EDGE_THRESHOLD = 24;
2
+ export declare const AUTO_SCROLL_STEP = 18;
3
+ export declare const AUTO_SCROLL_ACTIVATION_DISTANCE = 6;
4
+ export type AutoScrollAxisDirection = -1 | 0 | 1;
5
+ export type AutoScrollContentBox = {
6
+ left: number;
7
+ top: number;
8
+ right: number;
9
+ bottom: number;
10
+ };
11
+ export declare const resolveScrollContentBox: ({ rectLeft, rectTop, clientLeft, clientTop, clientWidth, clientHeight, }: {
12
+ rectLeft: number;
13
+ rectTop: number;
14
+ clientLeft: number;
15
+ clientTop: number;
16
+ clientWidth: number;
17
+ clientHeight: number;
18
+ }) => AutoScrollContentBox;
19
+ export declare const resolveAutoScrollAxisDirection: (pointer: number, start: number, end: number, edgeThreshold: number) => AutoScrollAxisDirection;
20
+ export declare const computeNextScrollPosition: (current: number, direction: AutoScrollAxisDirection, step: number, max: number) => number;
21
+ export declare const hasPointerLeftActivationRadius: (origin: {
22
+ x: number;
23
+ y: number;
24
+ }, pointer: {
25
+ x: number;
26
+ y: number;
27
+ }, activationDistance: number) => boolean;
package/dist/logic/columnReset.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import type { GridColumn, GridColumnPinned } from '../model/gridTypes';
2
+ export type InitialColumnState = {
3
+ width: number;
4
+ pinned: GridColumnPinned | undefined;
5
+ visible: boolean | undefined;
6
+ };
7
+ export declare const buildResetColumns: <T>(columns: GridColumn<T>[], snapshot: Map<string, InitialColumnState>, resolvedWidths: Record<string, number>) => GridColumn<T>[] | null;
package/dist/logic/filterSummary.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import type { ColumnFilterValue } from '../model/gridTypes';
2
+ export declare const describeColumnFilterValue: (value: ColumnFilterValue) => string;
package/dist/logic/panelDragGeometry.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ export declare const PANEL_DRAG_VIEWPORT_MARGIN = 8;
2
+ export declare const PANEL_DRAG_MIN_VISIBLE = 40;
3
+ export type PanelDragClampArgs = {
4
+ top: number;
5
+ left: number;
6
+ panelWidth: number;
7
+ viewportWidth: number;
8
+ viewportHeight: number;
9
+ };
10
+ export declare const clampPanelDragPosition: ({ top, left, panelWidth, viewportWidth, viewportHeight, }: PanelDragClampArgs) => {
11
+ top: number;
12
+ left: number;
13
+ };
package/dist/logic/setFilterSearch.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ export type SetFilterSearchOption = {
2
+ label: string;
3
+ value: string;
4
+ };
5
+ export declare const filterSetOptionsBySearch: <O extends SetFilterSearchOption>(options: O[], searchText: string) => O[];
6
+ export type SetFilterEnterAction = {
7
+ kind: 'close';
8
+ } | {
9
+ kind: 'none';
10
+ } | {
11
+ kind: 'replace';
12
+ values: string[];
13
+ };
14
+ export declare const resolveSetFilterEnterAction: (options: SetFilterSearchOption[], searchText: string) => SetFilterEnterAction;
package/dist/logic/tooltipGeometry.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ export declare const TOOLTIP_GAP_PX = 7;
2
+ export declare const TOOLTIP_VIEWPORT_MARGIN_PX = 8;
3
+ export type TooltipPlacementArgs = {
4
+ targetRect: {
5
+ top: number;
6
+ left: number;
7
+ width: number;
8
+ bottom: number;
9
+ };
10
+ tipWidth: number;
11
+ tipHeight: number;
12
+ viewportWidth: number;
13
+ };
14
+ export type TooltipPlacement = {
15
+ top: number;
16
+ left: number;
17
+ below: boolean;
18
+ };
19
+ export declare function computeTooltipPlacement(args: TooltipPlacementArgs): TooltipPlacement;
package/dist/model/gridTypes.d.ts CHANGED
@@ -397,7 +397,11 @@ export type SpreadsheetGridHandle<T> = {
397
397
  isRowSelected: (rowKey: GridRowKey) => boolean;
398
398
  selectAllRows: () => void;
399
399
  clearRowSelection: () => void;
400
+ openFilterManager: () => void;
401
+ closeFilterManager: () => void;
400
402
  };
403
+ export type GridDensity = 'compact' | 'standard' | 'comfortable';
404
+ export type GridTheme = 'light' | 'dark' | 'auto';
401
405
  export type SpreadsheetGridProps<T> = {
402
406
  ref?: Ref<SpreadsheetGridHandle<T>>;
403
407
  onStateChange?: (state: GridState) => void;
@@ -414,10 +418,13 @@ export type SpreadsheetGridProps<T> = {
414
418
  autoHeight?: boolean;
415
419
  estimateRowHeight?: number;
416
420
  headerHeight?: number;
421
+ density?: GridDensity;
422
+ theme?: GridTheme;
417
423
  rowHeaderWidth?: number;
418
424
  height?: number | string;
419
425
  maxHeight?: number | string;
420
426
  readOnly?: boolean;
427
+ dimReadOnlyCells?: boolean;
421
428
  canEditCell?: (rowIndex: number, colIndex: number, row: T, column: GridColumn<T>) => boolean;
422
429
  enableRangeSelection?: boolean;
423
430
  enableRowSelection?: boolean;
@@ -443,6 +450,7 @@ export type SpreadsheetGridProps<T> = {
443
450
  globalFilterIcon?: ReactNode;
444
451
  showBottomBar?: boolean;
445
452
  showBottomBarCounts?: boolean;
453
+ showFilterChipBar?: boolean;
446
454
  renderTopBar?: (context: SpreadsheetGridSlotContext<T>) => ReactNode;
447
455
  renderBottomBar?: (context: SpreadsheetGridSlotContext<T>) => ReactNode;
448
456
  className?: string;
package/dist/style.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer ssg-base{.ssg-root{--ssg-accent:#3461c9;--ssg-accent-strong:#1d4ed8;--ssg-line:#f1f5f9;--ssg-line-strong:#e5e7eb;--ssg-divider:#d7dce3;--ssg-header-bg:#f8fafc;--ssg-row-hover-bg:#f1f5f9;--ssg-glyph:#94a3b8;--ssg-glyph-hover:#475569;--ssg-icon-hover-bg:#d6dee8;--ssg-icon-active-bg:#e3e9f5;--ssg-icon-active-bg-hover:#d4ddf0;--ssg-icon-active-border:#c7d3ea;--ssg-cell-bg:#fff;--ssg-cell-text:#0f172a;--ssg-readonly-bg:#f8fafc;--ssg-readonly-text:#64748b;--ssg-readonly-hover-bg:#eef2f7;--ssg-header-text:#334155;--ssg-header-hover-bg:#e2e8f0;--ssg-select-bg:#e3e9f5;--ssg-select-bg-hover:#ccd7ee;--ssg-row-selected-bg:#eff4ff;--ssg-checkbox-border:#94a3b8;--ssg-checkbox-bg:#fff;--ssg-checkbox-checked-bg:var(--ssg-accent);--ssg-checkbox-checked-mark:#fff;--ssg-checkbox-hover-border:var(--ssg-accent);--ssg-selection-fill:#3461c914;--ssg-radius:8px;--ssg-icon-btn-size:20px;border:1px solid var(--ssg-divider);border-radius:var(--ssg-radius);background-color:var(--ssg-cell-bg);overflow:hidden;box-shadow:0 4px 14px #0f172a0a}.ssg-icon-btn{width:var(--ssg-icon-btn-size);height:var(--ssg-icon-btn-size);color:var(--ssg-glyph);cursor:pointer;background-color:#0000;border:1px solid #0000;border-radius:6px;flex:none;justify-content:center;align-items:center;padding:0;font-size:11px;line-height:1;transition:background-color .1s,color .1s;display:inline-flex}.ssg-icon-btn:hover{background-color:var(--ssg-icon-hover-bg);color:var(--ssg-glyph-hover)}.ssg-icon-btn--active{border-color:var(--ssg-icon-active-border);background-color:var(--ssg-icon-active-bg);color:var(--ssg-accent)}.ssg-icon-btn--active:hover{background-color:var(--ssg-icon-active-bg-hover);color:var(--ssg-accent)}.ssg-body-cell{box-sizing:border-box;border-right:1px solid var(--ssg-line);border-bottom:1px solid var(--ssg-line-strong);background-color:var(--ssg-cell-bg);color:var(--ssg-cell-text);white-space:nowrap;cursor:default;-webkit-user-select:none;user-select:none;outline:none;align-items:center;padding:0 10px;display:flex;position:absolute;top:0;overflow:hidden}.ssg-body-cell--autoheight{white-space:normal;word-break:break-word;align-items:flex-start;overflow:visible}.ssg-body-cell--align-center{text-align:center;justify-content:center}.ssg-body-cell--align-right{text-align:right;justify-content:flex-end}.ssg-body-cell--row-hovered{background-color:var(--ssg-row-hover-bg)}.ssg-body-cell--readonly{background-color:var(--ssg-readonly-bg);color:var(--ssg-readonly-text)}.ssg-body-cell--readonly.ssg-body-cell--row-hovered{background-color:var(--ssg-readonly-hover-bg)}.ssg-header-row{z-index:6;background-color:var(--ssg-header-bg);position:sticky;top:0}.ssg-header-cell{box-sizing:border-box;border-right:1px solid var(--ssg-line);border-bottom:1px solid var(--ssg-divider);background-color:var(--ssg-header-bg);color:var(--ssg-header-text);align-items:center;gap:4px;padding:0 6px;font-size:13px;font-weight:600;display:flex;position:absolute;top:0}.ssg-header-cell--hovered{background-color:var(--ssg-header-hover-bg)}.ssg-header-cell--selected{background-color:var(--ssg-select-bg)}.ssg-header-cell--selected.ssg-header-cell--hovered{background-color:var(--ssg-select-bg-hover)}.ssg-row-header-cell{z-index:5;justify-content:center;font-weight:500;left:0}.ssg-corner-cell{z-index:7;border-right:1px solid var(--ssg-line-strong);justify-content:center;padding:0;line-height:1;left:0}.ssg-row-checkbox{box-sizing:border-box;border:1.5px solid var(--ssg-checkbox-border);background-color:var(--ssg-checkbox-bg);border-radius:4px;width:16px;height:16px;transition:background-color .12s,border-color .12s;display:inline-block;position:relative}.ssg-row-checkbox[data-state=checked],.ssg-row-checkbox[data-state=indeterminate]{border-color:var(--ssg-checkbox-checked-bg);background-color:var(--ssg-checkbox-checked-bg)}.ssg-row-checkbox[data-state=checked]:after{content:"";border:solid var(--ssg-checkbox-checked-mark);border-width:0 2px 2px 0;width:4px;height:8px;position:absolute;top:1.5px;left:4.5px;transform:rotate(45deg)}.ssg-row-checkbox[data-state=indeterminate]:after{content:"";background-color:var(--ssg-checkbox-checked-mark);border-radius:1px;height:2px;position:absolute;top:6.5px;left:3px;right:3px}.ssg-row-checkbox[data-disabled=true]{opacity:.45}.ssg-row-header-cell--checkbox:hover .ssg-row-checkbox[data-state=unchecked],.ssg-corner-cell--checkbox:hover .ssg-row-checkbox[data-state=unchecked]{border-color:var(--ssg-checkbox-hover-border)}.ssg-active-cell-overlay{box-sizing:border-box;border:2px solid var(--ssg-accent);pointer-events:none;z-index:4}.ssg-selection-overlay{box-sizing:border-box;border:2px solid var(--ssg-accent);background-color:var(--ssg-selection-fill);pointer-events:none;z-index:2}.ssg-cell-editor{pointer-events:none;z-index:5}.ssg-cell-editor-input{box-sizing:border-box;border:2px solid var(--ssg-accent);width:100%;height:100%;color:var(--ssg-cell-text);background-color:var(--ssg-cell-bg);pointer-events:auto;outline:none;margin:0;padding:0 10px;font-size:16px}.ssg-bar--top{border-bottom:1px solid var(--ssg-divider)}.ssg-bar--bottom{border-top:1px solid var(--ssg-divider)}.ssg-bar-container{background-color:var(--ssg-header-bg);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;padding:5px 10px;display:flex}.ssg-bar-group{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.ssg-bar-leading{min-width:0;color:var(--ssg-header-text);flex:auto;font-size:12px}.ssg-bar-title{letter-spacing:.06em;text-transform:uppercase;color:var(--ssg-glyph);margin-right:2px;font-size:10px;font-weight:600}.ssg-bar-chip{color:var(--ssg-header-text);font-variant-numeric:tabular-nums;white-space:nowrap;background-color:#0000;border:none;border-radius:5px;align-items:center;padding:1px 6px;font-size:11.5px;display:inline-flex}.ssg-bar-chip--emphasis{background-color:var(--ssg-header-hover-bg);color:var(--ssg-header-text);font-weight:600}.ssg-bar-input{box-sizing:border-box;min-width:0;color:var(--ssg-cell-text);caret-color:var(--ssg-cell-text);-webkit-text-fill-color:var(--ssg-cell-text);background-color:#0000;border:none;outline:none;flex:auto;padding:6px 0;font-size:13px;line-height:1.4}.ssg-bar-input-group{box-sizing:border-box;background-color:var(--ssg-cell-bg);border:1px solid #cbd5e1;border-radius:6px;align-items:center;gap:6px;width:100%;max-width:380px;padding:0 8px;display:flex}.ssg-bar-input-group:focus-within{border-color:var(--ssg-accent)}.ssg-bar-container>.ssg-bar-input-group:only-child{flex:auto;max-width:480px}.ssg-bar-input-icon{color:var(--ssg-glyph);pointer-events:none;flex:none;justify-content:center;align-items:center;display:inline-flex}.ssg-bar-input-clear{width:18px;height:18px;color:var(--ssg-glyph);cursor:pointer;background-color:#0000;border:none;border-radius:4px;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.ssg-bar-input-clear:hover{background-color:var(--ssg-row-hover-bg);color:var(--ssg-glyph-hover)}.ssg-popover{box-sizing:border-box;z-index:1000;background-color:#fff;border:1px solid #cbd5e1;border-radius:12px;flex-direction:column;padding:12px;display:flex;position:fixed;box-shadow:0 12px 28px #0f172a29}.ssg-popover-header{border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:8px;display:flex}.ssg-popover-title{color:#1e293b;-webkit-user-select:none;user-select:none;font-size:13px;font-weight:700}.ssg-popover-close{color:#64748b;cursor:pointer;background-color:#0000;border:none;border-radius:6px;justify-content:center;align-items:center;width:24px;height:24px;font-size:16px;line-height:1;display:flex}.ssg-popover-close:hover{background-color:#f1f5f9}.ssg-popover-footer{border-top:1px solid #e2e8f0;gap:8px;margin-top:8px;padding-top:8px;display:flex}.ssg-sort-panel{max-height:420px}.ssg-sort-list{flex-direction:column;flex:1;gap:6px;min-height:0;margin:0 -4px;padding:0 4px;display:flex;overflow-y:auto}.ssg-sort-empty{color:#94a3b8;-webkit-user-select:none;user-select:none;padding:10px 4px;font-size:12px}.ssg-sort-level{opacity:1;border-top:2px solid #0000;align-items:center;gap:6px;display:flex}.ssg-sort-level--drop-before{border-top-color:#2563eb}.ssg-sort-level--dragging{opacity:.4}.ssg-sort-handle{cursor:grab;touch-action:none;border-radius:6px;flex:none;justify-content:center;align-items:center;width:16px;height:26px;display:flex}.ssg-sort-handle--dragging{cursor:grabbing}.ssg-sort-handle--disabled{cursor:default}.ssg-sort-handle:not(.ssg-sort-handle--disabled):hover{background-color:#f1f5f9}.ssg-sort-badge{color:#2563eb;-webkit-user-select:none;user-select:none;background-color:#eff6ff;border-radius:9px;flex:none;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;font-weight:700;display:flex}.ssg-sort-select{box-sizing:border-box;color:#334155;cursor:pointer;background-color:#fff;border:1px solid #cbd5e1;border-radius:6px;flex:1;min-width:0;padding:5px 6px;font-size:13px}.ssg-sort-select:disabled{cursor:default}.ssg-sort-dir-group{flex:none;display:flex}.ssg-sort-dir-btn{box-sizing:border-box;color:#475569;cursor:pointer;background-color:#fff;border:1px solid #cbd5e1;flex:none;padding:4px 9px;font-size:12px;line-height:1.4}.ssg-sort-dir-group>.ssg-sort-dir-btn:first-child{border-right:none;border-top-left-radius:6px;border-bottom-left-radius:6px}.ssg-sort-dir-group>.ssg-sort-dir-btn:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.ssg-sort-dir-btn--active{color:#fff;background-color:#2563eb;border-color:#2563eb}.ssg-sort-dir-btn:disabled{color:#cbd5e1;cursor:default}.ssg-sort-delete{color:#64748b;cursor:pointer;background-color:#0000;border:none;border-radius:6px;flex:none;justify-content:center;align-items:center;width:26px;height:26px;font-size:15px;line-height:1;display:flex}.ssg-sort-delete:disabled{color:#cbd5e1;cursor:default}.ssg-sort-delete:not(:disabled):hover{color:#dc2626;background-color:#fef2f2}.ssg-sort-drop-end{border-top:2px solid #2563eb;height:0}.ssg-sort-footer-btn{box-sizing:border-box;color:#334155;cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none;background-color:#0000;border:1px solid #e2e8f0;border-radius:8px;font-size:13px}.ssg-sort-footer-btn--add{flex:1;padding:7px 8px}.ssg-sort-footer-btn--clear{flex:none;padding:7px 12px}.ssg-sort-footer-btn:disabled{color:#cbd5e1;cursor:default}.ssg-sort-footer-btn:not(:disabled):hover{background-color:#f1f5f9}.ssg-sort-note{color:#94a3b8;-webkit-user-select:none;user-select:none;margin-top:8px;font-size:11px}.ssg-chooser-panel{max-height:420px}.ssg-chooser-search-row{align-items:center;gap:8px;margin-bottom:8px;display:flex}.ssg-chooser-master-btn{cursor:pointer;background:0 0;border:none;align-items:center;padding:0;display:flex}.ssg-chooser-master-btn:disabled{cursor:default}.ssg-chooser-search-field{flex:1;min-width:0;position:relative}.ssg-chooser-search-icon{color:#94a3b8;pointer-events:none;font-size:13px;line-height:1;position:absolute;top:50%;left:9px;transform:translateY(-50%)}.ssg-chooser-search-input{box-sizing:border-box;color:#334155;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;padding:7px 10px 7px 26px;font-size:13px}.ssg-chooser-list{flex:1;min-height:0;margin:0 -4px;padding:0 4px;overflow-y:auto}.ssg-chooser-empty{color:#94a3b8;-webkit-user-select:none;user-select:none;padding:10px 4px;font-size:12px}.ssg-chooser-section-heading{color:#94a3b8;letter-spacing:.4px;-webkit-user-select:none;user-select:none;padding:8px 4px 4px;font-size:11px;font-weight:700}.ssg-chooser-row{opacity:1;border-top:2px solid #0000;align-items:center;gap:4px;display:flex}.ssg-chooser-row--drop-before{border-top-color:#2563eb}.ssg-chooser-row--dragging{opacity:.4}.ssg-chooser-handle{cursor:grab;touch-action:none;border-radius:6px;flex:none;justify-content:center;align-items:center;width:18px;height:28px;display:flex}.ssg-chooser-handle--dragging{cursor:grabbing}.ssg-chooser-handle--disabled{cursor:default}.ssg-chooser-handle:not(.ssg-chooser-handle--disabled):hover{background-color:#f1f5f9}.ssg-chooser-toggle{box-sizing:border-box;cursor:pointer;text-align:left;background-color:#0000;border:none;border-radius:8px;flex:1;align-items:center;gap:10px;min-width:0;padding:7px 8px;display:flex}.ssg-chooser-toggle:disabled{cursor:default}.ssg-chooser-toggle:not(:disabled):hover{background-color:#f1f5f9}.ssg-chooser-label{color:#334155;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:13px;overflow:hidden}.ssg-chooser-label--muted{color:#94a3b8}.ssg-chooser-drop-end{border-top:2px solid #2563eb;height:0}.ssg-chooser-footer{border-top:1px solid #e2e8f0;margin-top:8px;padding-top:8px}.ssg-chooser-reset-btn{box-sizing:border-box;color:#334155;cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none;background-color:#0000;border:1px solid #e2e8f0;border-radius:8px;width:100%;padding:7px 8px;font-size:13px;display:block}.ssg-chooser-reset-btn:disabled{color:#cbd5e1;cursor:default}.ssg-chooser-reset-btn:not(:disabled):hover{background-color:#f1f5f9}.ssg-chooser-note{color:#94a3b8;-webkit-user-select:none;user-select:none;margin-top:8px;font-size:11px}.ssg-checkbox{background-color:#fff;border:1.5px solid #94a3b8;border-radius:5px;flex:none;justify-content:center;align-items:center;width:18px;height:18px;transition:background-color 80ms,border-color 80ms;display:flex}.ssg-checkbox--filled{background-color:#2563eb;border-color:#2563eb}.ssg-checkbox--disabled{background-color:#f1f5f9;border-color:#cbd5e1}.ssg-checkbox-dash{background-color:#fff;border-radius:1px;width:9px;height:2px}.ssg-filter-popover{box-sizing:border-box;z-index:1000;background-color:#fff;border:1px solid #cbd5e1;border-radius:10px;padding:12px;position:fixed;box-shadow:0 10px 24px #0f172a1f}.ssg-filter-title{color:#334155;margin-bottom:8px;font-size:12px;font-weight:700}.ssg-filter-hint{color:#64748b;margin-bottom:8px;font-size:11px}.ssg-filter-meta{color:#64748b;margin-bottom:10px;font-size:11px}.ssg-filter-meta--ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ssg-filter-collecting{text-align:center;color:#64748b;padding:24px;font-size:12px}.ssg-filter-input{box-sizing:border-box;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;margin-bottom:8px;padding:8px 10px}.ssg-filter-select{box-sizing:border-box;background-color:#fff;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;margin-bottom:8px;padding:8px 10px}.ssg-filter-selectall{cursor:pointer;color:#334155;-webkit-user-select:none;user-select:none;border-bottom:1px solid #e2e8f0;align-items:center;gap:8px;height:28px;padding:0 8px;font-size:12px;display:flex}.ssg-filter-selectall-label{font-weight:600}.ssg-filter-list{border:1px solid #e2e8f0;border-top:none;border-radius:0 0 8px 8px;height:208px;margin-bottom:8px;overflow-y:auto}.ssg-filter-empty{color:#94a3b8;text-align:center;padding:12px;font-size:12px}.ssg-filter-virt{width:100%;position:relative}.ssg-filter-option{box-sizing:border-box;cursor:pointer;color:#334155;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:0 8px;font-size:12px;display:flex;position:absolute;top:0;left:0;right:0}.ssg-filter-option-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ssg-filter-footer{justify-content:flex-end;gap:8px;display:flex}.ssg-filter-btn-secondary{color:#475569;cursor:pointer;background-color:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:6px 10px;font-size:12px}.ssg-filter-btn-primary{color:#fff;cursor:pointer;background-color:#2563eb;border:1px solid #2563eb;border-radius:8px;padding:6px 10px;font-size:12px}.ssg-menu-panel{box-sizing:border-box;background-color:#fff;border:1px solid #cbd5e1;border-radius:10px;padding:8px;box-shadow:0 10px 24px #0f172a1f}.ssg-menu-title{color:#334155;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;border-bottom:1px solid #e2e8f0;margin-bottom:4px;padding:2px 8px 6px;font-size:12px;font-weight:700;overflow:hidden}.ssg-menu-item{box-sizing:border-box;color:#334155;text-align:left;cursor:pointer;background-color:#0000;border:none;border-radius:8px;align-items:center;gap:8px;width:100%;padding:7px 8px;font-size:13px;display:flex}.ssg-menu-item:disabled,.ssg-menu-item--disabled{color:#94a3b8;cursor:default}.ssg-menu-item--active,.ssg-menu-item:not(:disabled):not(.ssg-menu-item--disabled):hover{background-color:#f1f5f9}.ssg-menu-section-label{color:#94a3b8;-webkit-user-select:none;user-select:none;padding:6px 8px 2px;font-size:11px;font-weight:600}.ssg-menu-item--danger{color:#dc2626}.ssg-menu-item--danger:not(:disabled):not(.ssg-menu-item--disabled):hover{background-color:#fef2f2}.ssg-menu-submenu-anchor{position:relative}.ssg-menu-icon{text-align:center;flex:none;width:14px}.ssg-menu-sort-icon{text-align:center;color:#94a3b8;flex:none;width:14px;font-weight:400}.ssg-menu-sort-icon--active{color:#2563eb;font-weight:700}.ssg-menu-check{text-align:center;color:#2563eb;flex:none;width:14px;font-weight:700}.ssg-menu-check--hidden{visibility:hidden}.ssg-menu-label{flex:1;min-width:0}.ssg-menu-label--sorted{color:#1d4ed8}.ssg-menu-caret{color:#94a3b8;flex:none;font-size:12px;line-height:1}.ssg-menu-separator{border-top:1px solid #e2e8f0;margin:4px 0}.ssg-menu-note{color:#94a3b8;-webkit-user-select:none;user-select:none;padding:4px 8px 2px;font-size:11px}.ssg-menu-footer{border-top:1px solid #e2e8f0;justify-content:flex-end;margin-top:4px;padding-top:6px;display:flex}.ssg-menu-close-btn{color:#475569;cursor:pointer;background-color:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:5px 10px;font-size:12px}.ssg-body-row{contain:layout style paint;width:100%;position:absolute;top:0;left:0}.ssg-body-row--checked{background-color:var(--ssg-row-selected-bg)}.ssg-body-row--checked .ssg-body-cell:not(.ssg-body-cell--row-hovered){background-color:#0000}.ssg-header-grip{color:#cbd5e1;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;flex:none;justify-content:center;align-items:center;width:12px;height:20px;display:inline-flex}.ssg-header-status{flex:none;align-items:center;gap:3px;display:inline-flex}.ssg-header-actions{background-color:var(--ssg-header-bg);opacity:0;pointer-events:none;align-items:center;gap:2px;height:100%;padding:0 6px 0 14px;transition:opacity .1s;display:flex;position:absolute;top:0;right:0}.ssg-header-cell:hover .ssg-header-actions{opacity:1;pointer-events:auto;background-color:var(--ssg-header-hover-bg)}@media (hover:none){.ssg-header-actions{opacity:1;pointer-events:auto;background-color:#0000;height:auto;padding:0;position:static}}.ssg-header-actions .ssg-header-grip,.ssg-header-actions .ssg-icon-btn:not(.ssg-icon-btn--active){color:#475569}.ssg-header-label{min-width:0;color:var(--ssg-header-text);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.ssg-header-label--filtered{color:var(--ssg-accent-strong)}.ssg-header-sort{color:var(--ssg-accent);flex:none;align-items:center;gap:1px;font-size:12px;font-weight:700;line-height:1;display:inline-flex}.ssg-header-sort-priority{font-size:9px;font-weight:700;line-height:1}.ssg-header-filtered-mark{color:var(--ssg-accent-strong);flex:none;align-items:center;display:inline-flex}.ssg-header-resize{cursor:col-resize;z-index:3;width:6px;height:100%;position:absolute;top:0;right:-3px}.ssg-skeleton-rowheader{color:#94a3b8}.ssg-skeleton-bar{background-color:#e2e8f0;border-radius:4px;height:10px}.ssg-shell{background-color:var(--ssg-cell-bg);position:relative;overflow:hidden}.ssg-scroll-container{max-height:480px;position:relative;overflow:auto}.ssg-inner-row{display:flex}.ssg-center-pane{z-index:1;flex-shrink:0;position:relative}.ssg-empty-state{color:#94a3b8;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;height:160px;font-size:13px;display:flex;position:sticky;left:0}.ssg-autosize-overlay{pointer-events:none;z-index:5;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ssg-autosize-pill{color:#f8fafc;-webkit-user-select:none;user-select:none;background-color:#0f172ad1;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;box-shadow:0 6px 20px #0f172a40}.ssg-filter-overlay{pointer-events:none;z-index:5;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ssg-filter-overlay-chip{background-color:var(--ssg-cell-bg);border:1px solid var(--ssg-line-strong);color:var(--ssg-readonly-text);font-variant-numeric:tabular-nums;white-space:nowrap;-webkit-user-select:none;user-select:none;border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:12px;display:inline-flex;box-shadow:0 6px 20px #0f172a2e}.ssg-filter-overlay-text{text-align:center;min-width:5.5em}.ssg-filter-spinner{border:2px solid var(--ssg-line-strong);border-top-color:var(--ssg-accent);border-radius:50%;width:14px;height:14px;animation:.7s linear infinite ssg-filter-spin}@keyframes ssg-filter-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.ssg-filter-spinner{animation:none}}.ssg-col-drop-indicator{background-color:#0f172a;width:2px}.ssg-col-drop-indicator:before,.ssg-col-drop-indicator:after{content:"";background-color:#0f172a;width:7px;height:7px;position:absolute;left:50%;transform:translate(-50%)rotate(45deg)}.ssg-col-drop-indicator:before{top:-3px}.ssg-col-drop-indicator:after{bottom:-3px}}
1
+ :where(.ssg-root,.ssg-popover,.ssg-menu-panel,.ssg-filter-popover,[data-grid-drag-ghost],.ssg-tooltip){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ssg-accent:#3461c9;--ssg-accent-strong:#1d4ed8;--ssg-line:#f1f5f9;--ssg-line-strong:#e5e7eb;--ssg-divider:#d7dce3;--ssg-header-bg:#f8fafc;--ssg-row-hover-bg:#f1f5f9;--ssg-glyph:#94a3b8;--ssg-glyph-hover:#475569;--ssg-icon-hover-bg:#d6dee8;--ssg-icon-active-bg:#e3e9f5;--ssg-icon-active-bg-hover:#d4ddf0;--ssg-icon-active-border:#c7d3ea;--ssg-cell-bg:#fff;--ssg-cell-text:#0f172a;--ssg-readonly-bg:#f8fafc;--ssg-readonly-text:#64748b;--ssg-readonly-hover-bg:#eef2f7;--ssg-header-text:#334155;--ssg-header-hover-bg:#e2e8f0;--ssg-select-bg:#e3e9f5;--ssg-select-bg-hover:#ccd7ee;--ssg-row-selected-bg:#eff4ff;--ssg-checkbox-border:#94a3b8;--ssg-checkbox-bg:#fff;--ssg-checkbox-checked-bg:var(--ssg-accent);--ssg-checkbox-checked-mark:#fff;--ssg-checkbox-hover-border:var(--ssg-accent);--ssg-selection-fill:#3461c914;--ssg-radius:8px;--ssg-icon-btn-size:20px;--ssg-cell-pad-x:10px;--ssg-bar-pad-x:10px;--ssg-bar-pad-y:5px;--ssg-panel-bg:#fff;--ssg-panel-border:#cbd5e1;--ssg-panel-separator:#e2e8f0;--ssg-panel-text-strong:#1e293b;--ssg-panel-text:#334155;--ssg-panel-text-sub:#475569;--ssg-panel-text-muted:#64748b;--ssg-panel-text-faint:#94a3b8;--ssg-panel-text-disabled:#cbd5e1;--ssg-panel-hover-bg:#f1f5f9;--ssg-panel-hover-bg-subtle:#f8fafc;--ssg-panel-accent:#2563eb;--ssg-panel-accent-bg:#eff6ff;--ssg-panel-accent-text:var(--ssg-accent-strong);--ssg-panel-accent-contrast:#fff;--ssg-danger:#dc2626;--ssg-danger-bg:#fef2f2;--ssg-seg-track-bg:#f1f3f5;--ssg-seg-indicator-bg:#fff;--ssg-seg-indicator-shadow:0 1px 3px #0f172a2e;--ssg-root-shadow:0 4px 14px #0f172a0a;--ssg-panel-shadow:0 12px 28px #0f172a29;--ssg-popover-shadow:0 10px 24px #0f172a1f;--ssg-overlay-chip-shadow:0 6px 20px #0f172a2e;--ssg-pane-border:#cbd5e1;--ssg-pane-shadow-left:6px 0 8px -6px #0f172a59;--ssg-pane-shadow-right:-6px 0 8px -6px #0f172a59;--ssg-pill-bg:#0f172ad1;--ssg-pill-text:#f8fafc;--ssg-pill-shadow:0 6px 20px #0f172a40;--ssg-ghost-bg:#1e293b;--ssg-ghost-text:#f8fafc;--ssg-ghost-border:#ffffff1a;--ssg-ghost-shadow:0 8px 20px #02061757, 0 1px 2px #0206173d;--ssg-tooltip-bg:#1e293b;--ssg-tooltip-text:#f8fafc;--ssg-tooltip-shadow:0 4px 12px #02061740;--ssg-drop-indicator:#0f172a;--ssg-glyph-faint:#cbd5e1;--ssg-skeleton-bar:#e2e8f0}:where(.ssg-root--density-compact){--ssg-cell-pad-x:6px;--ssg-bar-pad-x:8px;--ssg-bar-pad-y:3px;--ssg-icon-btn-size:18px}:where(.ssg-root--density-comfortable){--ssg-cell-pad-x:14px;--ssg-bar-pad-x:12px;--ssg-bar-pad-y:7px;--ssg-icon-btn-size:22px}:where(.ssg-root--density-compact) .ssg-body-cell{font-size:.85em}:where(.ssg-root--density-comfortable) .ssg-body-cell{font-size:1.1em}:where(.ssg-theme-dark){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ssg-accent:#4dabf7;--ssg-accent-strong:#74c0fc;--ssg-line:#212226;--ssg-line-strong:#2c2e33;--ssg-divider:#373a40;--ssg-header-bg:#25262b;--ssg-row-hover-bg:#25262b;--ssg-glyph:#909296;--ssg-glyph-hover:#c1c2c5;--ssg-glyph-faint:#5c5f66;--ssg-icon-hover-bg:#2c2e33;--ssg-icon-active-bg:#24344d;--ssg-icon-active-bg-hover:#2b3f5e;--ssg-icon-active-border:#3a5378;--ssg-cell-bg:#1a1b1e;--ssg-cell-text:#c1c2c5;--ssg-readonly-bg:#1f2023;--ssg-readonly-text:#909296;--ssg-readonly-hover-bg:#26272c;--ssg-header-text:#c1c2c5;--ssg-header-hover-bg:#2c2e33;--ssg-select-bg:#24344d;--ssg-select-bg-hover:#2b3f5e;--ssg-row-selected-bg:#1e2c44;--ssg-checkbox-border:#5c5f66;--ssg-checkbox-bg:#1a1b1e;--ssg-checkbox-checked-mark:#141517;--ssg-selection-fill:#4dabf721;--ssg-panel-bg:#25262b;--ssg-panel-border:#373a40;--ssg-panel-separator:#2c2e33;--ssg-panel-text-strong:#f1f3f5;--ssg-panel-text:#c1c2c5;--ssg-panel-text-sub:#a6a7ab;--ssg-panel-text-muted:#909296;--ssg-panel-text-faint:#5c5f66;--ssg-panel-text-disabled:#43464d;--ssg-panel-hover-bg:#2c2e33;--ssg-panel-hover-bg-subtle:#26272c;--ssg-panel-accent:#4dabf7;--ssg-panel-accent-bg:#1d3450;--ssg-panel-accent-contrast:#141517;--ssg-danger:#ff6b6b;--ssg-danger-bg:#3a2325;--ssg-seg-track-bg:#1e1f23;--ssg-seg-indicator-bg:#373a40;--ssg-seg-indicator-shadow:0 1px 3px #00000080;--ssg-root-shadow:0 4px 14px #0006;--ssg-panel-shadow:0 12px 28px #0000008c;--ssg-popover-shadow:0 10px 24px #00000080;--ssg-overlay-chip-shadow:0 6px 20px #00000073;--ssg-pane-border:#373a40;--ssg-pane-shadow-left:6px 0 8px -6px #0000008c;--ssg-pane-shadow-right:-6px 0 8px -6px #0000008c;--ssg-pill-bg:#373a40f2;--ssg-pill-text:#f1f3f5;--ssg-pill-shadow:0 6px 20px #00000073;--ssg-ghost-bg:#373a40;--ssg-ghost-text:#f1f3f5;--ssg-ghost-border:#ffffff1f;--ssg-ghost-shadow:0 8px 20px #00000080, 0 1px 2px #00000059;--ssg-tooltip-bg:#373a40;--ssg-tooltip-text:#f1f3f5;--ssg-tooltip-shadow:0 4px 12px #00000073;--ssg-drop-indicator:#c1c2c5;--ssg-skeleton-bar:#2c2e33}:where(.ssg-root,.ssg-popover,.ssg-menu-panel,.ssg-filter-popover,.ssg-tooltip),:where(.ssg-root,.ssg-popover,.ssg-menu-panel,.ssg-filter-popover,.ssg-tooltip) :where(*),:where(.ssg-root,.ssg-popover,.ssg-menu-panel,.ssg-filter-popover,.ssg-tooltip) :where(*):before,:where(.ssg-root,.ssg-popover,.ssg-menu-panel,.ssg-filter-popover,.ssg-tooltip) :where(*):after{box-sizing:border-box}.ssg-root{border:1px solid var(--ssg-divider);border-radius:var(--ssg-radius);background-color:var(--ssg-cell-bg);box-shadow:var(--ssg-root-shadow);overflow:hidden}.ssg-icon-btn{width:var(--ssg-icon-btn-size);height:var(--ssg-icon-btn-size);color:var(--ssg-glyph);cursor:pointer;background-color:#0000;border:1px solid #0000;border-radius:6px;flex:none;justify-content:center;align-items:center;padding:0;font-size:11px;line-height:1;transition:background-color .1s,color .1s;display:inline-flex}.ssg-icon-btn:hover{background-color:var(--ssg-icon-hover-bg);color:var(--ssg-glyph-hover)}.ssg-icon-btn--active{border-color:var(--ssg-icon-active-border);background-color:var(--ssg-icon-active-bg);color:var(--ssg-accent)}.ssg-icon-btn--active:hover{background-color:var(--ssg-icon-active-bg-hover);color:var(--ssg-accent)}.ssg-body-cell{box-sizing:border-box;padding:0 var(--ssg-cell-pad-x);border-right:1px solid var(--ssg-line);border-bottom:1px solid var(--ssg-line-strong);background-color:var(--ssg-cell-bg);color:var(--ssg-cell-text);white-space:nowrap;cursor:default;-webkit-user-select:none;user-select:none;outline:none;align-items:center;display:flex;position:absolute;top:0;overflow:hidden}.ssg-body-cell--autoheight{white-space:normal;word-break:break-word;align-items:flex-start;overflow:visible}.ssg-body-cell--align-center{text-align:center;justify-content:center}.ssg-body-cell--align-right{text-align:right;justify-content:flex-end}.ssg-body-cell--row-hovered{background-color:var(--ssg-row-hover-bg)}:where(.ssg-root--dim-readonly) .ssg-body-cell--readonly{background-color:var(--ssg-readonly-bg);color:var(--ssg-readonly-text)}:where(.ssg-root--dim-readonly) .ssg-body-cell--readonly.ssg-body-cell--row-hovered{background-color:var(--ssg-readonly-hover-bg)}.ssg-header-row{z-index:6;background-color:var(--ssg-header-bg);position:sticky;top:0}.ssg-header-cell{box-sizing:border-box;border-right:1px solid var(--ssg-line);border-bottom:1px solid var(--ssg-divider);background-color:var(--ssg-header-bg);color:var(--ssg-header-text);align-items:center;gap:4px;padding:0 6px;font-size:13px;font-weight:600;display:flex;position:absolute;top:0}.ssg-header-cell--hovered{background-color:var(--ssg-header-hover-bg)}.ssg-header-cell--selected{background-color:var(--ssg-select-bg)}.ssg-header-cell--selected.ssg-header-cell--hovered{background-color:var(--ssg-select-bg-hover)}.ssg-row-header-cell{z-index:5;justify-content:center;font-weight:500;left:0}.ssg-corner-cell{z-index:7;border-right:1px solid var(--ssg-line-strong);justify-content:center;padding:0;line-height:1;left:0}.ssg-row-checkbox{box-sizing:border-box;border:1.5px solid var(--ssg-checkbox-border);background-color:var(--ssg-checkbox-bg);border-radius:4px;width:16px;height:16px;transition:background-color .12s,border-color .12s;display:inline-block;position:relative}.ssg-row-checkbox[data-state=checked],.ssg-row-checkbox[data-state=indeterminate]{border-color:var(--ssg-checkbox-checked-bg);background-color:var(--ssg-checkbox-checked-bg)}.ssg-row-checkbox[data-state=checked]:after{content:"";border:solid var(--ssg-checkbox-checked-mark);border-width:0 2px 2px 0;width:6px;height:10px;position:absolute;top:1.5px;left:4.5px;transform:rotate(45deg)}.ssg-row-checkbox[data-state=indeterminate]:after{content:"";background-color:var(--ssg-checkbox-checked-mark);border-radius:1px;height:2px;position:absolute;top:6.5px;left:3px;right:3px}.ssg-row-checkbox[data-disabled=true]{opacity:.45}.ssg-row-header-cell--checkbox:hover .ssg-row-checkbox[data-state=unchecked],.ssg-corner-cell--checkbox:hover .ssg-row-checkbox[data-state=unchecked]{border-color:var(--ssg-checkbox-hover-border)}.ssg-active-cell-overlay{box-sizing:border-box;border:2px solid var(--ssg-accent);pointer-events:none;z-index:4}.ssg-selection-overlay{box-sizing:border-box;border:2px solid var(--ssg-accent);background-color:var(--ssg-selection-fill);pointer-events:none;z-index:2}.ssg-cell-editor{pointer-events:none;z-index:5}.ssg-cell-editor-input{box-sizing:border-box;border:2px solid var(--ssg-accent);width:100%;height:100%;padding:0 var(--ssg-cell-pad-x);color:var(--ssg-cell-text);background-color:var(--ssg-cell-bg);pointer-events:auto;outline:none;margin:0;font-size:16px}.ssg-bar--top{border-bottom:1px solid var(--ssg-divider)}.ssg-bar--bottom{border-top:1px solid var(--ssg-divider)}.ssg-bar-container{padding:var(--ssg-bar-pad-y) var(--ssg-bar-pad-x);background-color:var(--ssg-header-bg);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;display:flex}.ssg-bar-group{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.ssg-bar-leading{min-width:0;color:var(--ssg-header-text);flex:auto;font-size:12px}.ssg-bar-title{letter-spacing:.06em;text-transform:uppercase;color:var(--ssg-glyph);margin-right:2px;font-size:10px;font-weight:600}.ssg-bar-chip{color:var(--ssg-header-text);font-variant-numeric:tabular-nums;white-space:nowrap;background-color:#0000;border:none;border-radius:5px;align-items:center;padding:1px 6px;font-size:11.5px;display:inline-flex}.ssg-bar-chip--emphasis{background-color:var(--ssg-header-hover-bg);color:var(--ssg-header-text);font-weight:600}.ssg-bar-chip--action{font-family:inherit;line-height:inherit;cursor:pointer}.ssg-bar-chip--action:hover{background-color:var(--ssg-icon-active-bg);color:var(--ssg-accent-strong)}.ssg-bar-input{box-sizing:border-box;min-width:0;color:var(--ssg-cell-text);caret-color:var(--ssg-cell-text);-webkit-text-fill-color:var(--ssg-cell-text);background-color:#0000;border:none;outline:none;flex:auto;padding:6px 0;font-size:13px;line-height:1.4}.ssg-bar-input-group{box-sizing:border-box;border:1px solid var(--ssg-panel-border);background-color:var(--ssg-cell-bg);border-radius:6px;align-items:center;gap:6px;width:100%;max-width:380px;padding:0 8px;display:flex}.ssg-bar-input-group:focus-within{border-color:var(--ssg-accent)}.ssg-bar-container>.ssg-bar-input-group:only-child{flex:auto;max-width:480px}.ssg-bar-input-icon{color:var(--ssg-glyph);pointer-events:none;flex:none;justify-content:center;align-items:center;display:inline-flex}.ssg-bar-input-clear{width:18px;height:18px;color:var(--ssg-glyph);cursor:pointer;background-color:#0000;border:none;border-radius:4px;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}.ssg-bar-input-clear:hover{background-color:var(--ssg-row-hover-bg);color:var(--ssg-glyph-hover)}.ssg-filter-chip-bar{padding:var(--ssg-bar-pad-y) var(--ssg-bar-pad-x);background-color:var(--ssg-header-bg);border-bottom:1px solid var(--ssg-divider);flex-wrap:wrap;align-items:center;gap:6px;display:flex}.ssg-filter-chip{border:1px solid var(--ssg-icon-active-border);background-color:var(--ssg-icon-active-bg);border-radius:6px;align-items:center;display:inline-flex;overflow:hidden}.ssg-filter-chip--hidden{opacity:.75}.ssg-filter-chip-label{max-width:260px;color:var(--ssg-accent-strong);cursor:pointer;background-color:#0000;border:none;align-items:center;gap:5px;padding:2px 6px 2px 8px;font-size:11.5px;line-height:1.5;display:inline-flex}.ssg-filter-chip-label:disabled{cursor:default}.ssg-filter-chip-label:not(:disabled):hover{background-color:var(--ssg-icon-active-bg-hover)}.ssg-filter-chip-name{white-space:nowrap;font-weight:700}.ssg-filter-chip-summary{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.ssg-filter-chip-clear{width:18px;color:var(--ssg-accent-strong);cursor:pointer;background-color:#0000;border:none;justify-content:center;align-self:stretch;align-items:center;font-size:12px;line-height:1;display:flex}.ssg-filter-chip-clear:disabled{cursor:default;color:var(--ssg-glyph)}.ssg-filter-chip-clear:not(:disabled):hover{background-color:var(--ssg-icon-active-bg-hover)}.ssg-filter-chip-bar-clear-all{color:var(--ssg-glyph-hover);cursor:pointer;white-space:nowrap;background-color:#0000;border:none;border-radius:5px;padding:2px 6px;font-size:11.5px}.ssg-filter-chip-bar-clear-all:disabled{color:var(--ssg-glyph);cursor:default}.ssg-filter-chip-bar-clear-all:not(:disabled):hover{background-color:var(--ssg-header-hover-bg)}.ssg-popover{box-sizing:border-box;border:1px solid var(--ssg-panel-border);background-color:var(--ssg-panel-bg);box-shadow:var(--ssg-panel-shadow);z-index:1000;border-radius:12px;flex-direction:column;padding:12px;display:flex;position:fixed}.ssg-popover-header{border-bottom:1px solid var(--ssg-panel-separator);justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;padding-bottom:8px;display:flex}.ssg-popover-title{color:var(--ssg-panel-text-strong);-webkit-user-select:none;user-select:none;font-size:13px;font-weight:700}.ssg-popover-close{width:24px;height:24px;color:var(--ssg-panel-text-muted);cursor:pointer;background-color:#0000;border:none;border-radius:6px;justify-content:center;align-items:center;font-size:16px;line-height:1;display:flex}.ssg-popover-close:hover{background-color:var(--ssg-panel-hover-bg)}.ssg-popover-footer{border-top:1px solid var(--ssg-panel-separator);gap:8px;margin-top:8px;padding-top:8px;display:flex}.ssg-popover-header--draggable{cursor:grab;touch-action:none}.ssg-popover-header--draggable:active{cursor:grabbing}.ssg-toolpanel{max-height:420px}@keyframes ssg-toolpanel-flash{0%{box-shadow:0 0 0 3px var(--ssg-panel-accent-bg), 0 0 0 4px var(--ssg-panel-accent), var(--ssg-panel-shadow)}to{box-shadow:var(--ssg-panel-shadow)}}.ssg-toolpanel--flash{animation:.45s ease-out ssg-toolpanel-flash}@media (prefers-reduced-motion:reduce){.ssg-toolpanel--flash{animation:none}}.ssg-toolpanel-header{border-bottom:1px solid var(--ssg-panel-separator);align-items:center;gap:8px;margin-bottom:8px;padding-bottom:8px;display:flex}.ssg-toolpanel-seg{background-color:var(--ssg-seg-track-bg);border-radius:9px;flex:auto;min-width:0;padding:3px;display:flex;position:relative}.ssg-toolpanel-seg-indicator{width:calc((100% - 6px) / var(--ssg-seg-count));background-color:var(--ssg-seg-indicator-bg);box-shadow:var(--ssg-seg-indicator-shadow);transform:translateX(calc(var(--ssg-seg-index) * 100%));border-radius:7px;transition:transform .16s;position:absolute;top:3px;bottom:3px;left:3px}.ssg-toolpanel-seg-btn{z-index:1;min-width:0;color:var(--ssg-panel-text-muted);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;background:0 0;border:none;border-radius:7px;flex:1 1 0;justify-content:center;align-items:center;gap:5px;padding:4px 6px;font-size:12.5px;font-weight:500;line-height:1.3;transition:color .12s;display:inline-flex;position:relative}.ssg-toolpanel-seg-btn:not(.ssg-toolpanel-seg-btn--active):hover{color:var(--ssg-panel-text-sub)}.ssg-toolpanel-seg-btn--active{color:var(--ssg-panel-text-strong);cursor:default;font-weight:600}.ssg-toolpanel-seg-badge{background-color:var(--ssg-panel-accent);min-width:16px;height:16px;color:var(--ssg-panel-accent-contrast);text-align:center;border-radius:8px;padding:0 4px;font-size:10px;font-weight:700;line-height:16px}.ssg-toolpanel-body{flex-direction:column;flex:auto;min-width:0;min-height:240px;display:flex}.ssg-sort-list{flex-direction:column;flex:1;gap:6px;min-height:0;margin:0 -4px;padding:0 4px;display:flex;overflow-y:auto}.ssg-sort-empty{color:var(--ssg-panel-text-faint);-webkit-user-select:none;user-select:none;padding:10px 4px;font-size:12px}.ssg-sort-level{opacity:1;border-top:2px solid #0000;align-items:center;gap:6px;display:flex}.ssg-sort-level--drop-before{border-top-color:var(--ssg-panel-accent)}.ssg-sort-level--dragging{opacity:.4}.ssg-sort-handle{cursor:grab;touch-action:none;border-radius:6px;flex:none;justify-content:center;align-items:center;width:16px;height:26px;display:flex}.ssg-sort-handle--dragging{cursor:grabbing}.ssg-sort-handle--disabled{cursor:default}.ssg-sort-handle:not(.ssg-sort-handle--disabled):hover{background-color:var(--ssg-panel-hover-bg)}.ssg-sort-badge{background-color:var(--ssg-panel-accent-bg);width:18px;height:18px;color:var(--ssg-panel-accent);-webkit-user-select:none;user-select:none;border-radius:9px;flex:none;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:flex}.ssg-sort-select{box-sizing:border-box;border:1px solid var(--ssg-panel-border);min-width:0;color:var(--ssg-panel-text);background-color:var(--ssg-panel-bg);cursor:pointer;border-radius:6px;flex:1;padding:5px 6px;font-size:13px}.ssg-sort-select:disabled{cursor:default}.ssg-sort-dir-group{flex:none;display:flex}.ssg-sort-dir-btn{box-sizing:border-box;border:1px solid var(--ssg-panel-border);background-color:var(--ssg-panel-bg);color:var(--ssg-panel-text-sub);cursor:pointer;flex:none;padding:4px 9px;font-size:12px;line-height:1.4}.ssg-sort-dir-group>.ssg-sort-dir-btn:first-child{border-right:none;border-top-left-radius:6px;border-bottom-left-radius:6px}.ssg-sort-dir-group>.ssg-sort-dir-btn:last-child{border-top-right-radius:6px;border-bottom-right-radius:6px}.ssg-sort-dir-btn--active{border-color:var(--ssg-panel-accent);background-color:var(--ssg-panel-accent);color:var(--ssg-panel-accent-contrast)}.ssg-sort-dir-btn:disabled{color:var(--ssg-panel-text-disabled);cursor:default}.ssg-sort-delete{width:26px;height:26px;color:var(--ssg-panel-text-muted);cursor:pointer;background-color:#0000;border:none;border-radius:6px;flex:none;justify-content:center;align-items:center;font-size:15px;line-height:1;display:flex}.ssg-sort-delete:disabled{color:var(--ssg-panel-text-disabled);cursor:default}.ssg-sort-delete:not(:disabled):hover{background-color:var(--ssg-danger-bg);color:var(--ssg-danger)}.ssg-sort-drop-end{border-top:2px solid var(--ssg-panel-accent);height:0}.ssg-sort-footer-btn{box-sizing:border-box;border:1px solid var(--ssg-panel-separator);color:var(--ssg-panel-text);cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none;background-color:#0000;border-radius:8px;font-size:13px}.ssg-sort-footer-btn--add{flex:1;padding:7px 8px}.ssg-sort-footer-btn--clear{flex:none;padding:7px 12px}.ssg-sort-footer-btn:disabled{color:var(--ssg-panel-text-disabled);cursor:default}.ssg-sort-footer-btn:not(:disabled):hover{background-color:var(--ssg-panel-hover-bg)}.ssg-sort-note{color:var(--ssg-panel-text-faint);-webkit-user-select:none;user-select:none;margin-top:8px;font-size:11px}.ssg-filter-manage-list{flex-direction:column;flex:1;gap:2px;min-height:0;margin:0 -4px;padding:0 4px;display:flex;overflow-y:auto}.ssg-filter-manage-empty{color:var(--ssg-panel-text-faint);-webkit-user-select:none;user-select:none;padding:10px 4px;font-size:12px}.ssg-filter-manage-row{border-radius:8px;align-items:center;gap:8px;padding:5px 6px;display:flex}.ssg-filter-manage-row:hover{background-color:var(--ssg-panel-hover-bg-subtle)}.ssg-filter-manage-row--global{border-bottom:1px solid var(--ssg-panel-separator);border-radius:0;margin-bottom:6px;padding-bottom:9px}.ssg-filter-manage-row--global:hover{background-color:#0000}.ssg-filter-manage-glyph{color:var(--ssg-panel-accent-text);flex:none;align-items:center;display:flex}.ssg-filter-manage-glyph--global{color:var(--ssg-panel-text-muted)}.ssg-filter-manage-main{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.ssg-filter-manage-name{color:var(--ssg-panel-text-strong);text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:700;overflow:hidden}.ssg-filter-manage-hidden-note{color:var(--ssg-panel-text-faint);margin-left:4px;font-size:10.5px;font-weight:500}.ssg-filter-manage-summary{color:var(--ssg-panel-text-muted);text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;overflow:hidden}.ssg-filter-manage-actions{flex:none;gap:2px;display:flex}.ssg-filter-manage-icon-btn{width:24px;height:24px;color:var(--ssg-panel-text-muted);cursor:pointer;background-color:#0000;border:none;border-radius:6px;justify-content:center;align-items:center;font-size:13px;line-height:1;display:flex}.ssg-filter-manage-icon-btn:disabled{color:var(--ssg-panel-text-disabled);cursor:default}.ssg-filter-manage-icon-btn:not(:disabled):hover{background-color:var(--ssg-panel-hover-bg);color:var(--ssg-panel-text-strong)}.ssg-filter-manage-icon-btn--danger:not(:disabled):hover{background-color:var(--ssg-danger-bg);color:var(--ssg-danger)}.ssg-filter-manage-add{border:1px solid var(--ssg-panel-border);background-color:var(--ssg-panel-bg);min-width:0;color:var(--ssg-panel-text);cursor:pointer;border-radius:6px;outline:none;flex:1;padding:5px 6px;font-size:12px}.ssg-filter-manage-add:focus{border-color:var(--ssg-panel-accent)}.ssg-filter-manage-add:disabled{color:var(--ssg-panel-text-faint);cursor:default}.ssg-filter-manage-clear-all{color:var(--ssg-panel-text-muted);cursor:pointer;white-space:nowrap;background-color:#0000;border:none;border-radius:6px;flex:none;padding:5px 8px;font-size:12px}.ssg-filter-manage-clear-all:disabled{color:var(--ssg-panel-text-disabled);cursor:default}.ssg-filter-manage-clear-all:not(:disabled):hover{background-color:var(--ssg-danger-bg);color:var(--ssg-danger)}.ssg-chooser-search-row{align-items:center;gap:8px;margin-bottom:8px;display:flex}.ssg-chooser-master-btn{cursor:pointer;background:0 0;border:none;align-items:center;padding:0;display:flex}.ssg-chooser-master-btn:disabled{cursor:default}.ssg-chooser-search-field{flex:1;min-width:0;position:relative}.ssg-chooser-search-icon{color:var(--ssg-panel-text-faint);pointer-events:none;font-size:13px;line-height:1;position:absolute;top:50%;left:9px;transform:translateY(-50%)}.ssg-chooser-search-input{box-sizing:border-box;border:1px solid var(--ssg-panel-border);width:100%;color:var(--ssg-panel-text);border-radius:8px;outline:none;padding:7px 10px 7px 26px;font-size:13px}.ssg-chooser-list{flex:1;min-height:0;margin:0 -4px;padding:0 4px;overflow-y:auto}.ssg-chooser-empty{color:var(--ssg-panel-text-faint);-webkit-user-select:none;user-select:none;padding:10px 4px;font-size:12px}.ssg-chooser-section-heading{color:var(--ssg-panel-text-faint);letter-spacing:.4px;-webkit-user-select:none;user-select:none;padding:8px 4px 4px;font-size:11px;font-weight:700}.ssg-chooser-row{opacity:1;border-top:2px solid #0000;align-items:center;gap:4px;display:flex}.ssg-chooser-row--drop-before{border-top-color:var(--ssg-panel-accent)}.ssg-chooser-row--dragging{opacity:.4}.ssg-chooser-handle{cursor:grab;touch-action:none;border-radius:6px;flex:none;justify-content:center;align-items:center;width:18px;height:28px;display:flex}.ssg-chooser-handle--dragging{cursor:grabbing}.ssg-chooser-handle--disabled{cursor:default}.ssg-chooser-handle:not(.ssg-chooser-handle--disabled):hover{background-color:var(--ssg-panel-hover-bg)}.ssg-chooser-toggle{box-sizing:border-box;cursor:pointer;text-align:left;background-color:#0000;border:none;border-radius:8px;flex:1;align-items:center;gap:10px;min-width:0;padding:7px 8px;display:flex}.ssg-chooser-toggle:disabled{cursor:default}.ssg-chooser-toggle:not(:disabled):hover{background-color:var(--ssg-panel-hover-bg)}.ssg-chooser-label{min-width:0;color:var(--ssg-panel-text);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px;overflow:hidden}.ssg-chooser-label--muted{color:var(--ssg-panel-text-faint)}.ssg-chooser-drop-end{border-top:2px solid var(--ssg-panel-accent);height:0}.ssg-chooser-footer{border-top:1px solid var(--ssg-panel-separator);margin-top:8px;padding-top:8px}.ssg-chooser-reset-btn{box-sizing:border-box;border:1px solid var(--ssg-panel-separator);width:100%;color:var(--ssg-panel-text);cursor:pointer;text-align:center;-webkit-user-select:none;user-select:none;background-color:#0000;border-radius:8px;padding:7px 8px;font-size:13px;display:block}.ssg-chooser-reset-btn:disabled{color:var(--ssg-panel-text-disabled);cursor:default}.ssg-chooser-reset-btn:not(:disabled):hover{background-color:var(--ssg-panel-hover-bg)}.ssg-chooser-note{color:var(--ssg-panel-text-faint);-webkit-user-select:none;user-select:none;margin-top:8px;font-size:11px}.ssg-checkbox{border:1.5px solid var(--ssg-checkbox-border);background-color:var(--ssg-panel-bg);border-radius:5px;flex:none;justify-content:center;align-items:center;width:18px;height:18px;transition:background-color 80ms,border-color 80ms;display:flex}.ssg-checkbox--filled{border-color:var(--ssg-panel-accent);background-color:var(--ssg-panel-accent)}.ssg-checkbox--disabled{border-color:var(--ssg-panel-border);background-color:var(--ssg-panel-hover-bg)}.ssg-checkbox-dash{background-color:var(--ssg-panel-accent-contrast);border-radius:1px;width:9px;height:2px}.ssg-filter-popover{box-sizing:border-box;border:1px solid var(--ssg-panel-border);background-color:var(--ssg-panel-bg);box-shadow:var(--ssg-popover-shadow);z-index:1000;border-radius:10px;padding:12px;position:fixed}.ssg-filter-title{color:var(--ssg-panel-text);margin-bottom:8px;font-size:12px;font-weight:700}.ssg-filter-hint{color:var(--ssg-panel-text-muted);margin-bottom:8px;font-size:11px}.ssg-filter-meta{color:var(--ssg-panel-text-muted);margin-bottom:10px;font-size:11px}.ssg-filter-meta--ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ssg-filter-collecting{text-align:center;color:var(--ssg-panel-text-muted);padding:24px;font-size:12px}.ssg-filter-input{box-sizing:border-box;border:1px solid var(--ssg-panel-border);border-radius:8px;outline:none;width:100%;margin-bottom:8px;padding:8px 10px}.ssg-filter-select{box-sizing:border-box;border:1px solid var(--ssg-panel-border);background-color:var(--ssg-panel-bg);border-radius:8px;outline:none;width:100%;margin-bottom:8px;padding:8px 10px}.ssg-filter-selectall{cursor:pointer;height:28px;color:var(--ssg-panel-text);border-bottom:1px solid var(--ssg-panel-separator);-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:0 8px;font-size:12px;display:flex}.ssg-filter-selectall-label{font-weight:600}.ssg-filter-list{border:1px solid var(--ssg-panel-separator);border-top:none;border-radius:0 0 8px 8px;height:208px;margin-bottom:8px;overflow-y:auto}.ssg-filter-empty{color:var(--ssg-panel-text-faint);text-align:center;padding:12px;font-size:12px}.ssg-filter-virt{width:100%;position:relative}.ssg-filter-option{box-sizing:border-box;cursor:pointer;color:var(--ssg-panel-text);-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:0 8px;font-size:12px;display:flex;position:absolute;top:0;left:0;right:0}.ssg-filter-option-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ssg-filter-footer{justify-content:flex-end;gap:8px;display:flex}.ssg-filter-btn-secondary{border:1px solid var(--ssg-panel-border);background-color:var(--ssg-panel-bg);color:var(--ssg-panel-text-sub);cursor:pointer;border-radius:8px;padding:6px 10px;font-size:12px}.ssg-filter-btn-primary{border:1px solid var(--ssg-panel-accent);background-color:var(--ssg-panel-accent);color:var(--ssg-panel-accent-contrast);cursor:pointer;border-radius:8px;padding:6px 10px;font-size:12px}.ssg-menu-panel{box-sizing:border-box;border:1px solid var(--ssg-panel-border);background-color:var(--ssg-panel-bg);box-shadow:var(--ssg-popover-shadow);border-radius:10px;padding:8px}.ssg-menu-title{color:var(--ssg-panel-text);text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--ssg-panel-separator);-webkit-user-select:none;user-select:none;margin-bottom:4px;padding:2px 8px 6px;font-size:12px;font-weight:700;overflow:hidden}.ssg-menu-item{box-sizing:border-box;width:100%;color:var(--ssg-panel-text);text-align:left;cursor:pointer;background-color:#0000;border:none;border-radius:8px;align-items:center;gap:8px;padding:7px 8px;font-size:13px;display:flex}.ssg-menu-item:disabled,.ssg-menu-item--disabled{color:var(--ssg-panel-text-faint);cursor:default}.ssg-menu-item--active,.ssg-menu-item:not(:disabled):not(.ssg-menu-item--disabled):hover{background-color:var(--ssg-panel-hover-bg)}.ssg-menu-section-label{color:var(--ssg-panel-text-faint);-webkit-user-select:none;user-select:none;padding:6px 8px 2px;font-size:11px;font-weight:600}.ssg-menu-item--danger{color:var(--ssg-danger)}.ssg-menu-item--danger:not(:disabled):not(.ssg-menu-item--disabled):hover{background-color:var(--ssg-danger-bg)}.ssg-menu-submenu-anchor{position:relative}.ssg-menu-icon{text-align:center;flex:none;width:14px}.ssg-menu-sort-icon{text-align:center;width:14px;color:var(--ssg-panel-text-faint);flex:none;font-weight:400}.ssg-menu-sort-icon--active{color:var(--ssg-panel-accent);font-weight:700}.ssg-menu-check{text-align:center;width:14px;color:var(--ssg-panel-accent);flex:none;font-weight:700}.ssg-menu-check--hidden{visibility:hidden}.ssg-menu-label{flex:1;min-width:0}.ssg-menu-label--sorted{color:var(--ssg-panel-accent-text)}.ssg-menu-caret{color:var(--ssg-panel-text-faint);flex:none;font-size:12px;line-height:1}.ssg-menu-separator{border-top:1px solid var(--ssg-panel-separator);margin:4px 0}.ssg-menu-note{color:var(--ssg-panel-text-faint);-webkit-user-select:none;user-select:none;padding:4px 8px 2px;font-size:11px}.ssg-menu-footer{border-top:1px solid var(--ssg-panel-separator);justify-content:flex-end;margin-top:4px;padding-top:6px;display:flex}.ssg-menu-close-btn{border:1px solid var(--ssg-panel-border);background-color:var(--ssg-panel-bg);color:var(--ssg-panel-text-sub);cursor:pointer;border-radius:8px;padding:5px 10px;font-size:12px}.ssg-body-row{contain:layout style paint;width:100%;position:absolute;top:0;left:0}.ssg-body-row--checked{background-color:var(--ssg-row-selected-bg)}.ssg-body-row--checked .ssg-body-cell:not(.ssg-body-cell--row-hovered){background-color:#0000}.ssg-header-grip{width:12px;height:20px;color:var(--ssg-glyph-faint);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;flex:none;justify-content:center;align-items:center;display:inline-flex}.ssg-header-status{flex:none;align-items:center;gap:3px;display:inline-flex}.ssg-header-actions{background-color:var(--ssg-header-bg);opacity:0;pointer-events:none;align-items:center;gap:2px;height:100%;padding:0 6px 0 14px;transition:opacity .1s;display:flex;position:absolute;top:0;right:0}.ssg-header-cell:hover .ssg-header-actions{opacity:1;pointer-events:auto;background-color:var(--ssg-header-hover-bg)}@media (hover:none){.ssg-header-actions{opacity:1;pointer-events:auto;background-color:#0000;height:auto;padding:0;position:static}}.ssg-header-actions .ssg-header-grip,.ssg-header-actions .ssg-icon-btn:not(.ssg-icon-btn--active){color:var(--ssg-glyph-hover)}.ssg-header-label{min-width:0;color:var(--ssg-header-text);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.ssg-header-label--filtered{color:var(--ssg-accent-strong)}.ssg-header-sort{color:var(--ssg-accent);flex:none;align-items:center;gap:1px;font-size:12px;font-weight:700;line-height:1;display:inline-flex}.ssg-header-sort-priority{font-size:9px;font-weight:700;line-height:1}.ssg-header-filtered-mark{color:var(--ssg-accent-strong);flex:none;align-items:center;display:inline-flex}@keyframes ssg-header-jump-flash{0%{box-shadow:inset 0 0 0 2px var(--ssg-accent);background-color:var(--ssg-select-bg)}70%{box-shadow:inset 0 0 0 2px var(--ssg-accent);background-color:var(--ssg-select-bg)}to{box-shadow:none}}.ssg-header-cell--jump-flash{animation:1.2s ease-out ssg-header-jump-flash}.ssg-header-resize{cursor:col-resize;z-index:3;width:6px;height:100%;position:absolute;top:0;right:-3px}.ssg-skeleton-rowheader{color:var(--ssg-glyph)}.ssg-skeleton-bar{background-color:var(--ssg-skeleton-bar);border-radius:4px;height:10px}.ssg-shell{background-color:var(--ssg-cell-bg);position:relative;overflow:hidden}.ssg-scroll-container{max-height:480px;position:relative;overflow:auto}.ssg-inner-row{display:flex}.ssg-center-pane{z-index:1;flex-shrink:0;position:relative}.ssg-empty-state{height:160px;color:var(--ssg-panel-text-faint);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;font-size:13px;display:flex;position:sticky;left:0}.ssg-autosize-overlay{pointer-events:none;z-index:5;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ssg-autosize-pill{background-color:var(--ssg-pill-bg);color:var(--ssg-pill-text);box-shadow:var(--ssg-pill-shadow);-webkit-user-select:none;user-select:none;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600}.ssg-filter-overlay{pointer-events:none;z-index:5;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ssg-filter-overlay-chip{background-color:var(--ssg-cell-bg);border:1px solid var(--ssg-line-strong);box-shadow:var(--ssg-overlay-chip-shadow);color:var(--ssg-readonly-text);font-variant-numeric:tabular-nums;white-space:nowrap;-webkit-user-select:none;user-select:none;border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:12px;display:inline-flex}.ssg-filter-overlay-text{text-align:center;min-width:5.5em}.ssg-filter-spinner{border:2px solid var(--ssg-line-strong);border-top-color:var(--ssg-accent);border-radius:50%;width:14px;height:14px;animation:.7s linear infinite ssg-filter-spin}@keyframes ssg-filter-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.ssg-filter-spinner{animation:none}}.ssg-col-drop-indicator{background-color:var(--ssg-drop-indicator);width:2px}.ssg-col-drop-indicator:before,.ssg-col-drop-indicator:after{content:"";background-color:var(--ssg-drop-indicator);width:7px;height:7px;position:absolute;left:50%;transform:translate(-50%)rotate(45deg)}.ssg-col-drop-indicator:before{top:-3px}.ssg-col-drop-indicator:after{bottom:-3px}.ssg-tooltip{z-index:9000;pointer-events:none;opacity:0;white-space:pre-line;overflow-wrap:break-word;background-color:var(--ssg-tooltip-bg);max-width:260px;color:var(--ssg-tooltip-text);box-shadow:var(--ssg-tooltip-shadow);border-radius:6px;padding:5px 10px;font-size:12px;font-weight:500;line-height:1.45;transition:opacity .12s,transform .12s;position:fixed;transform:translateY(2px)}.ssg-tooltip--visible{opacity:1;transform:translateY(0)}
2
2
  /*$vite$:1*/
package/dist/style.layer.css ADDED
@@ -0,0 +1 @@
1
+ @import url("./style.css") layer(ssg-base);
package/dist/view/CellContextMenuPopover.d.ts CHANGED
@@ -3,10 +3,11 @@ import type { GridContextMenuItem } from '../model/gridTypes';
3
3
  import type { CellContextMenuLayout } from '../hooks/useCellContextMenuController';
4
4
  type CellContextMenuPopoverProps = {
5
5
  isOpen: boolean;
6
+ themeClassName?: string;
6
7
  items: GridContextMenuItem[];
7
8
  layout: CellContextMenuLayout | null;
8
9
  popoverRef: RefObject<HTMLDivElement | null>;
9
10
  onRequestClose: () => void;
10
11
  };
11
- export declare function CellContextMenuPopover({ isOpen, items, layout, popoverRef, onRequestClose, }: CellContextMenuPopoverProps): import("react").ReactPortal | null;
12
+ export declare function CellContextMenuPopover({ isOpen, themeClassName, items, layout, popoverRef, onRequestClose, }: CellContextMenuPopoverProps): import("react").ReactPortal | null;
12
13
  export default CellContextMenuPopover;
package/dist/view/ColumnChooserPanel.d.ts CHANGED
@@ -1,5 +1,3 @@
1
- import type { RefObject } from 'react';
2
- import type { ColumnChooserLayout } from '../hooks/useColumnChooserController';
3
1
  import type { ColumnPane } from '../logic/geometry';
4
2
  export type ColumnChooserItem = {
5
3
  key: string;
@@ -8,16 +6,13 @@ export type ColumnChooserItem = {
8
6
  pane: ColumnPane;
9
7
  };
10
8
  type ColumnChooserPanelProps = {
11
- isOpen: boolean;
12
9
  items: ColumnChooserItem[];
13
10
  canToggle: boolean;
14
- layout: ColumnChooserLayout | null;
15
- panelRef: RefObject<HTMLDivElement | null>;
16
11
  onToggleColumnVisibility: (columnKey: string, nextVisible: boolean) => void;
17
12
  onShowAllColumns: () => void;
13
+ onHideAllColumns: () => void;
18
14
  onResetColumns: () => void;
19
15
  onReorderColumns: (orderedKeys: string[]) => void;
20
- onRequestClose: () => void;
21
16
  };
22
- export declare function ColumnChooserPanel({ isOpen, items, canToggle, layout, panelRef, onToggleColumnVisibility, onShowAllColumns, onResetColumns, onReorderColumns, onRequestClose, }: ColumnChooserPanelProps): import("react").ReactPortal | null;
17
+ export declare function ColumnChooserPanel({ items, canToggle, onToggleColumnVisibility, onShowAllColumns, onHideAllColumns, onResetColumns, onReorderColumns, }: ColumnChooserPanelProps): import("react").JSX.Element;
23
18
  export default ColumnChooserPanel;
package/dist/view/ColumnFilterPopover.d.ts CHANGED
@@ -15,6 +15,7 @@ export type ColumnFilterSetSelection = {
15
15
  export declare const isSetValueSelected: (selection: ColumnFilterSetSelection | null, value: string) => boolean;
16
16
  type ColumnFilterPopoverProps = {
17
17
  isOpen: boolean;
18
+ themeClassName?: string;
18
19
  title: string;
19
20
  filterType: 'text' | 'number' | 'date' | 'select' | 'set' | 'custom';
20
21
  draftValue: string;
@@ -34,7 +35,8 @@ type ColumnFilterPopoverProps = {
34
35
  onSetValueToggle: (value: string) => void;
35
36
  onSetSelectAllChange: (scope: 'all' | string[], nextSelected: boolean) => void;
36
37
  onSetClear: () => void;
38
+ onSetReplaceSelection: (values: string[]) => void;
37
39
  isServerSide?: boolean;
38
40
  };
39
- export declare function ColumnFilterPopover({ isOpen, title, filterType, draftValue, currentValueText, layout, selectOptions, optionsStatus, optionsProgress, setSelection, popoverRef, textInputRef, selectRef, onRequestClose, onDraftChange, onApply, onClear, onSetValueToggle, onSetSelectAllChange, onSetClear, isServerSide, }: ColumnFilterPopoverProps): import("react").ReactPortal | null;
41
+ export declare function ColumnFilterPopover({ isOpen, themeClassName, title, filterType, draftValue, currentValueText, layout, selectOptions, optionsStatus, optionsProgress, setSelection, popoverRef, textInputRef, selectRef, onRequestClose, onDraftChange, onApply, onClear, onSetValueToggle, onSetSelectAllChange, onSetClear, onSetReplaceSelection, isServerSide, }: ColumnFilterPopoverProps): import("react").ReactPortal | null;
40
42
  export default ColumnFilterPopover;
package/dist/view/ColumnMenuPopover.d.ts CHANGED
@@ -3,6 +3,7 @@ import type { GridColumnPinned, GridSortDirection } from '../model/gridTypes';
3
3
  import type { ColumnMenuLayout } from '../hooks/useColumnMenuController';
4
4
  type ColumnMenuPopoverProps = {
5
5
  isOpen: boolean;
6
+ themeClassName?: string;
6
7
  title: string;
7
8
  columnKey: string;
8
9
  canFilter: boolean;
@@ -11,6 +12,8 @@ type ColumnMenuPopoverProps = {
11
12
  sortDirection: GridSortDirection;
12
13
  onSortChange: (direction: Exclude<GridSortDirection, null>) => void;
13
14
  onOpenSortManager: () => void;
15
+ canManageFilters: boolean;
16
+ onOpenFilterManager: () => void;
14
17
  pinned: GridColumnPinned | undefined;
15
18
  canChangePinned: boolean;
16
19
  layout: ColumnMenuLayout | null;
@@ -23,5 +26,5 @@ type ColumnMenuPopoverProps = {
23
26
  onResetColumns: () => void;
24
27
  onRequestClose: () => void;
25
28
  };
26
- export declare function ColumnMenuPopover({ isOpen, title, columnKey, canFilter, onOpenFilter, canSort, sortDirection, onSortChange, onOpenSortManager, pinned, canChangePinned, layout, popoverRef, onPinnedChange, onAutosizeColumn, onAutosizeAllColumns, onOpenColumnChooser, canResetColumns, onResetColumns, onRequestClose, }: ColumnMenuPopoverProps): import("react").ReactPortal | null;
29
+ export declare function ColumnMenuPopover({ isOpen, themeClassName, title, columnKey, canFilter, onOpenFilter, canSort, sortDirection, onSortChange, onOpenSortManager, canManageFilters, onOpenFilterManager, pinned, canChangePinned, layout, popoverRef, onPinnedChange, onAutosizeColumn, onAutosizeAllColumns, onOpenColumnChooser, canResetColumns, onResetColumns, onRequestClose, }: ColumnMenuPopoverProps): import("react").ReactPortal | null;
27
30
  export default ColumnMenuPopover;
package/dist/view/DefaultGridTopBar.d.ts CHANGED
@@ -7,6 +7,7 @@ type DefaultGridTopBarProps<T> = {
7
7
  showCounts?: boolean;
8
8
  globalFilterPlaceholder?: string;
9
9
  globalFilterIcon?: ReactNode;
10
+ onFilterSummaryClick?: () => void;
10
11
  };
11
- export declare function DefaultGridTopBar<T>({ context, showSummary, showFilter, showCounts, globalFilterPlaceholder, globalFilterIcon, }: DefaultGridTopBarProps<T>): import("react").JSX.Element;
12
+ export declare function DefaultGridTopBar<T>({ context, showSummary, showFilter, showCounts, globalFilterPlaceholder, globalFilterIcon, onFilterSummaryClick, }: DefaultGridTopBarProps<T>): import("react").JSX.Element;
12
13
  export default DefaultGridTopBar;
package/dist/view/FilterManagementPanel.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ export type FilterManagementEntry = {
2
+ columnKey: string;
3
+ title: string;
4
+ summaryText: string;
5
+ isHidden: boolean;
6
+ };
7
+ export type FilterManagementAddableColumn = {
8
+ key: string;
9
+ title: string;
10
+ };
11
+ type FilterManagementPanelProps = {
12
+ entries: FilterManagementEntry[];
13
+ addableColumns: FilterManagementAddableColumn[];
14
+ showGlobalFilterRow: boolean;
15
+ globalFilterText: string;
16
+ canFilter: boolean;
17
+ onEditFilter: (columnKey: string) => void;
18
+ onAddFilter: (columnKey: string) => void;
19
+ onClearFilter: (columnKey: string) => void;
20
+ onClearAllFilters: () => void;
21
+ onClearGlobalFilter: () => void;
22
+ };
23
+ export declare function FilterManagementPanel({ entries, addableColumns, showGlobalFilterRow, globalFilterText, canFilter, onEditFilter, onAddFilter, onClearFilter, onClearAllFilters, onClearGlobalFilter, }: FilterManagementPanelProps): import("react").JSX.Element;
24
+ export default FilterManagementPanel;
package/dist/view/GridFilterChipBar.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import type { FilterManagementEntry } from './FilterManagementPanel';
2
+ type GridFilterChipBarProps = {
3
+ entries: FilterManagementEntry[];
4
+ canFilter: boolean;
5
+ onEditFilter: (columnKey: string) => void;
6
+ onClearFilter: (columnKey: string) => void;
7
+ onClearAllFilters: () => void;
8
+ };
9
+ export declare function GridFilterChipBar({ entries, canFilter, onEditFilter, onClearFilter, onClearAllFilters, }: GridFilterChipBarProps): import("react").JSX.Element | null;
10
+ export default GridFilterChipBar;
package/dist/view/SortManagementPanel.d.ts CHANGED
@@ -1,24 +1,18 @@
1
- import type { RefObject } from 'react';
2
1
  import type { GridSortEntry } from '../model/gridTypes';
3
- import type { SortManagementLayout } from '../hooks/useSortManagementController';
4
2
  export type SortManagementColumn = {
5
3
  key: string;
6
4
  title: string;
7
5
  };
8
6
  type SortManagementPanelProps = {
9
- isOpen: boolean;
10
7
  entries: GridSortEntry[];
11
8
  columns: SortManagementColumn[];
12
9
  canSort: boolean;
13
- layout: SortManagementLayout | null;
14
- panelRef: RefObject<HTMLDivElement | null>;
15
10
  onAddLevel: (columnKey: string, direction: 'asc' | 'desc') => void;
16
11
  onChangeDirection: (index: number, direction: 'asc' | 'desc') => void;
17
12
  onChangeColumn: (index: number, columnKey: string) => void;
18
13
  onRemoveLevel: (index: number) => void;
19
14
  onClearAll: () => void;
20
15
  onMove: (from: number, to: number) => void;
21
- onRequestClose: () => void;
22
16
  };
23
- export declare function SortManagementPanel({ isOpen, entries, columns, canSort, layout, panelRef, onAddLevel, onChangeDirection, onChangeColumn, onRemoveLevel, onClearAll, onMove, onRequestClose, }: SortManagementPanelProps): import("react").ReactPortal | null;
17
+ export declare function SortManagementPanel({ entries, columns, canSort, onAddLevel, onChangeDirection, onChangeColumn, onRemoveLevel, onClearAll, onMove, }: SortManagementPanelProps): import("react").JSX.Element;
24
18
  export default SortManagementPanel;
package/dist/view/ToolPanel.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import type { ReactNode, RefObject } from 'react';
2
+ import type { ToolPanelLayout, ToolPanelTab } from '../hooks/useToolPanelController';
3
+ export type ToolPanelTabDescriptor = {
4
+ tab: ToolPanelTab;
5
+ label: string;
6
+ badge?: number;
7
+ };
8
+ type ToolPanelProps = {
9
+ themeClassName?: string;
10
+ activeTab: ToolPanelTab | null;
11
+ flashTick: number;
12
+ tabs: ToolPanelTabDescriptor[];
13
+ layout: ToolPanelLayout | null;
14
+ panelRef: RefObject<HTMLDivElement | null>;
15
+ onSelectTab: (tab: ToolPanelTab) => void;
16
+ onRequestClose: () => void;
17
+ onPanelMove: (top: number, left: number) => void;
18
+ children: ReactNode;
19
+ };
20
+ export declare function ToolPanel({ themeClassName, activeTab, flashTick, tabs, layout, panelRef, onSelectTab, onRequestClose, onPanelMove, children, }: ToolPanelProps): import("react").ReactPortal | null;
21
+ export default ToolPanel;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ishibashi0112/spreadsheet-grid",
3
- "version": "0.9.0",
3
+ "version": "0.11.0",
4
4
  "description": "React 19 製のカスタム仮想化データグリッド。100 万行対応の仮想化・3 ペイン固定列・ソート/フィルター・クライアント/サーバーサイド行モデル対応。",
5
5
  "keywords": [
6
6
  "react",
@@ -40,7 +40,8 @@
40
40
  "import": "./dist/index.js",
41
41
  "require": "./dist/index.cjs"
42
42
  },
43
- "./style.css": "./dist/style.css"
43
+ "./style.css": "./dist/style.css",
44
+ "./style.layer.css": "./dist/style.layer.css"
44
45
  },
45
46
  "engines": {
46
47
  "node": ">=18"
@@ -78,7 +79,7 @@
78
79
  "scripts": {
79
80
  "dev": "vite",
80
81
  "build": "tsc -b && vite build",
81
- "build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.lib.json",
82
+ "build:lib": "vite build --config vite.lib.config.ts && tsc -p tsconfig.lib.json && node scripts/emit-layer-css.mjs",
82
83
  "build:types": "tsc -p tsconfig.lib.json",
83
84
  "lint": "eslint .",
84
85
  "preview": "vite preview",
package/dist/hooks/useColumnChooserController.d.ts DELETED
@@ -1,18 +0,0 @@
1
- import { type RefObject } from 'react';
2
- export type ColumnChooserLayout = {
3
- top: number;
4
- left: number;
5
- width: number;
6
- };
7
- type UseColumnChooserControllerArgs = {
8
- enableColumnMenu: boolean;
9
- gridRootRef: RefObject<HTMLDivElement | null>;
10
- };
11
- export declare const useColumnChooserController: ({ enableColumnMenu, gridRootRef, }: UseColumnChooserControllerArgs) => {
12
- isColumnChooserOpen: boolean;
13
- columnChooserLayout: ColumnChooserLayout | null;
14
- columnChooserRef: RefObject<HTMLDivElement | null>;
15
- openColumnChooser: () => void;
16
- closeColumnChooser: () => void;
17
- };
18
- export default useColumnChooserController;
package/dist/hooks/useSortManagementController.d.ts DELETED
@@ -1,18 +0,0 @@
1
- import { type RefObject } from 'react';
2
- export type SortManagementLayout = {
3
- top: number;
4
- left: number;
5
- width: number;
6
- };
7
- type UseSortManagementControllerArgs = {
8
- enableSorting: boolean;
9
- gridRootRef: RefObject<HTMLDivElement | null>;
10
- };
11
- export declare const useSortManagementController: ({ enableSorting, gridRootRef, }: UseSortManagementControllerArgs) => {
12
- isSortManagerOpen: boolean;
13
- sortManagerLayout: SortManagementLayout | null;
14
- sortManagerRef: RefObject<HTMLDivElement | null>;
15
- openSortManager: () => void;
16
- closeSortManager: () => void;
17
- };
18
- export default useSortManagementController;