photon-grid-core 2.0.1 → 2.0.5

package/styles/base/group-drop-zone.css.d.ts

@@ -5,5 +5,5 @@
  * base-styles.ts; edit here, not there. Order is preserved because CSS
  * cascade depends on it.
  */
-export declare const groupDropZoneCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Group drop zone \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-group-drop-zone--top {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex-shrink: 0;\n  height: var(--pg-header-row-height, 44px);\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  overflow: hidden;\n}\n.pg-group-drop-zone--left {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  width: 160px;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  overflow: hidden;\n  position: relative;\n}\n.pg-group-drop-zone--right {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  width: 160px;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-left: 1px solid var(--pg-colors-border, #e2e8f0);\n  overflow: hidden;\n  position: relative;\n}\n\n/* Zone header row (grip + \"Groups\" label) */\n.pg-group-zone-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px 4px 8px;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  user-select: none;\n}\n.pg-group-zone-grip {\n  display: flex;\n  align-items: center;\n  cursor: grab;\n  opacity: 0.45;\n  padding: 2px 3px;\n  border-radius: 3px;\n  color: var(--pg-colors-text-secondary, #64748b);\n  flex-shrink: 0;\n  transition: opacity 100ms, background 100ms;\n}\n.pg-group-zone-grip:hover { opacity: 0.85; background: rgba(0,0,0,0.06); }\n.pg-group-zone-grip:active { cursor: grabbing; }\n.pg-group-zone-label {\n  flex: 1;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--pg-colors-text-secondary, #64748b);\n  user-select: none;\n}\n\n/* Chips area (the actual drop target) */\n.pg-group-zone-chips {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 6px 10px;\n  min-height: 38px;\n  flex: 1;\n  overflow: auto;\n}\n.pg-group-drop-zone--left .pg-group-zone-chips,\n.pg-group-drop-zone--right .pg-group-zone-chips {\n  flex-direction: column;\n  align-items: flex-start;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.pg-group-zone-chips--over {\n  background: var(--pg-colors-group-zone-over, #eff6ff);\n  outline: 1px dashed var(--pg-colors-primary, #2563eb);\n  outline-offset: -2px;\n}\n\n/* Resize handle */\n.pg-group-drop-zone--top .pg-group-zone-resize {\n  height: 4px;\n  flex-shrink: 0;\n  cursor: ns-resize;\n  background: transparent;\n  transition: background 100ms;\n}\n.pg-group-drop-zone--top .pg-group-zone-resize:hover { background: var(--pg-colors-primary, #2563eb); opacity: 0.35; }\n.pg-group-drop-zone--left .pg-group-zone-resize {\n  position: absolute;\n  top: 0; right: 0; bottom: 0;\n  width: 4px;\n  cursor: ew-resize;\n  background: transparent;\n  transition: background 100ms;\n}\n.pg-group-drop-zone--right .pg-group-zone-resize {\n  position: absolute;\n  top: 0; left: 0; bottom: 0;\n  width: 4px;\n  cursor: ew-resize;\n  background: transparent;\n  transition: background 100ms;\n}\n.pg-group-drop-zone--left .pg-group-zone-resize:hover,\n.pg-group-drop-zone--right .pg-group-zone-resize:hover { background: var(--pg-colors-primary, #2563eb); opacity: 0.35; }\n\n/* Hint text */\n.pg-group-drop-zone__hint {\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  color: var(--pg-colors-text-disabled, #94a3b8);\n  pointer-events: none;\n  user-select: none;\n}\n\n/* Chips */\n.pg-group-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 3px 6px 3px 10px;\n  border-radius: var(--pg-borders-radius-pill, 9999px);\n  background: var(--pg-colors-chip-background, #e0e7ff);\n  color: var(--pg-colors-chip-text, #1e40af);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-weight: var(--pg-typography-font-weight-medium, 500);\n  user-select: none;\n  white-space: nowrap;\n  transition: opacity 120ms;\n}\n.pg-group-chip--ghost {\n  cursor: grabbing;\n}\n.pg-group-chip__label { line-height: 1.2; }\n.pg-group-chip__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  cursor: pointer;\n  opacity: 0.55;\n  transition: opacity 100ms, background 100ms;\n  flex-shrink: 0;\n}\n.pg-group-chip__close:hover { opacity: 1; background: rgba(30,64,175,0.18); }\n.pg-group-chip__sep {\n  display: inline-flex;\n  align-items: center;\n  color: var(--pg-colors-text-disabled, #94a3b8);\n  flex-shrink: 0;\n}\n\n";
+export declare const groupDropZoneCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Group drop zone \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-group-drop-zone--top {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex-shrink: 0;\n  height: var(--pg-header-row-height, 44px);\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  overflow: hidden;\n}\n.pg-group-drop-zone--left {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  width: 160px;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  overflow: hidden;\n  position: relative;\n}\n.pg-group-drop-zone--right {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  width: 160px;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-left: 1px solid var(--pg-colors-border, #e2e8f0);\n  overflow: hidden;\n  position: relative;\n}\n\n/* Zone header row (grip + \"Groups\" label) */\n.pg-group-zone-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px 4px 8px;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  user-select: none;\n}\n.pg-group-zone-grip {\n  display: flex;\n  align-items: center;\n  cursor: grab;\n  opacity: 0.45;\n  padding: 2px 3px;\n  border-radius: 3px;\n  color: var(--pg-colors-text-secondary, #64748b);\n  flex-shrink: 0;\n  transition: opacity 100ms, background 100ms;\n}\n.pg-group-zone-grip:hover { opacity: 0.85; background: rgba(0,0,0,0.06); }\n.pg-group-zone-grip:active { cursor: grabbing; }\n.pg-group-zone-label {\n  flex: 1;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--pg-colors-text-secondary, #64748b);\n  user-select: none;\n}\n\n/* Chips area (the actual drop target) */\n.pg-group-zone-chips {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 6px 10px;\n  min-height: 38px;\n  flex: 1;\n  overflow: auto;\n}\n.pg-group-drop-zone--left .pg-group-zone-chips,\n.pg-group-drop-zone--right .pg-group-zone-chips {\n  flex-direction: column;\n  align-items: flex-start;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.pg-group-zone-chips--over {\n  background: var(--pg-colors-group-zone-over, var(--pg-colors-selection-background, #eff6ff));\n  outline: 1px dashed var(--pg-colors-primary, #2563eb);\n  outline-offset: -2px;\n}\n\n/* Resize handle */\n.pg-group-drop-zone--top .pg-group-zone-resize {\n  height: 4px;\n  flex-shrink: 0;\n  cursor: ns-resize;\n  background: transparent;\n  transition: background 100ms;\n}\n.pg-group-drop-zone--top .pg-group-zone-resize:hover { background: var(--pg-colors-primary, #2563eb); opacity: 0.35; }\n.pg-group-drop-zone--left .pg-group-zone-resize {\n  position: absolute;\n  top: 0; right: 0; bottom: 0;\n  width: 4px;\n  cursor: ew-resize;\n  background: transparent;\n  transition: background 100ms;\n}\n.pg-group-drop-zone--right .pg-group-zone-resize {\n  position: absolute;\n  top: 0; left: 0; bottom: 0;\n  width: 4px;\n  cursor: ew-resize;\n  background: transparent;\n  transition: background 100ms;\n}\n.pg-group-drop-zone--left .pg-group-zone-resize:hover,\n.pg-group-drop-zone--right .pg-group-zone-resize:hover { background: var(--pg-colors-primary, #2563eb); opacity: 0.35; }\n\n/* Hint text */\n.pg-group-drop-zone__hint {\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  color: var(--pg-colors-text-disabled, #94a3b8);\n  pointer-events: none;\n  user-select: none;\n}\n\n/* Chips */\n.pg-group-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 3px 6px 3px 10px;\n  border-radius: var(--pg-borders-radius-pill, 9999px);\n  background: var(--pg-colors-chip-background, var(--pg-colors-badge-background, #e0e7ff));\n  color: var(--pg-colors-chip-text, var(--pg-colors-badge-text, #1e40af));\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-weight: var(--pg-typography-font-weight-medium, 500);\n  user-select: none;\n  white-space: nowrap;\n  transition: opacity 120ms;\n}\n.pg-group-chip--ghost {\n  cursor: grabbing;\n}\n.pg-group-chip__label { line-height: 1.2; }\n.pg-group-chip__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  cursor: pointer;\n  opacity: 0.55;\n  transition: opacity 100ms, background 100ms;\n  flex-shrink: 0;\n}\n.pg-group-chip__close:hover { opacity: 1; background: rgba(30,64,175,0.18); }\n.pg-group-chip__sep {\n  display: inline-flex;\n  align-items: center;\n  color: var(--pg-colors-text-disabled, #94a3b8);\n  flex-shrink: 0;\n}\n\n";
 //# sourceMappingURL=group-drop-zone.css.d.ts.map

package/styles/base/group-drop-zone.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"group-drop-zone.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/group-drop-zone.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,yqJAoK5B,CAAC"}
+{"version":3,"file":"group-drop-zone.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/group-drop-zone.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,gxJAoK5B,CAAC"}

package/styles/base/group-drop-zone.css.js

@@ -89,7 +89,7 @@ export const groupDropZoneCss = `/* ──────────────
   overflow-x: hidden;
 }
 .pg-group-zone-chips--over {
-  background: var(--pg-colors-group-zone-over, #eff6ff);
+  background: var(--pg-colors-group-zone-over, var(--pg-colors-selection-background, #eff6ff));
   outline: 1px dashed var(--pg-colors-primary, #2563eb);
   outline-offset: -2px;
 }
@@ -137,8 +137,8 @@ export const groupDropZoneCss = `/* ──────────────
   gap: 5px;
   padding: 3px 6px 3px 10px;
   border-radius: var(--pg-borders-radius-pill, 9999px);
-  background: var(--pg-colors-chip-background, #e0e7ff);
-  color: var(--pg-colors-chip-text, #1e40af);
+  background: var(--pg-colors-chip-background, var(--pg-colors-badge-background, #e0e7ff));
+  color: var(--pg-colors-chip-text, var(--pg-colors-badge-text, #1e40af));
   font-size: var(--pg-typography-font-size-sm, 12px);
   font-weight: var(--pg-typography-font-weight-medium, 500);
   user-select: none;

package/styles/base/header.css.d.ts

@@ -5,5 +5,5 @@
  * base-styles.ts; edit here, not there. Order is preserved because CSS
  * cascade depends on it.
  */
-export declare const headerCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Header rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-header-row, .pg-filter-row {\n  display: flex;\n  align-items: stretch;\n}\n.pg-header-row { height: var(--pg-header-row-height, 44px); }\n.pg-filter-row {\n  height: var(--pg-filter-row-height, 36px);\n  border-top: 1px solid var(--pg-colors-border, #e2e8f0);\n  background: var(--pg-colors-filter-background, #fff);\n}\n.pg-th {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex-shrink: 0;\n  padding: 0;\n  color: var(--pg-colors-header-text, #374151);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  letter-spacing: var(--pg-typography-letter-spacing-wide, 0.025em);\n  text-transform: uppercase;\n  border-right: 1px solid var(--pg-colors-header-border, #e2e8f0);\n  user-select: none;\n  cursor: default;\n  transition: background var(--pg-transitions-duration-fast, 100ms);\n  overflow: hidden;\n  min-width: var(--pg-sizing-column-min-width, 40px);\n}\n.pg-th:last-child { border-right: none; }\n.pg-th--sortable { cursor: pointer; }\n// .pg-th:hover, .pg-th.pg-th--sortable:hover { background: var(--pg-colors-header-hover, #f1f5f9); }\n// .pg-th.pg-th--sorted { background: var(--pg-colors-header-hover, #f1f5f9); }\n.pg-th.pg-th--sort-asc .pg-th__sort-icon,\n.pg-th.pg-th--sort-desc .pg-th__sort-icon { color: var(--pg-colors-primary, #2563eb); }\n.pg-th.pg-th--filter-active .pg-th__label { color: var(--pg-colors-primary, #2563eb); }\n.pg-th--checkbox {\n  width: 44px;\n  min-width: 44px;\n  max-width: 44px;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.pg-th--serial {\n  width: 52px;\n  min-width: 52px;\n  max-width: 52px;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.pg-th--auto-group {\n  flex-shrink: 0;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--pg-colors-text-secondary, #64748b);\n}\n.pg-cell--auto-group-spacer {\n  flex-shrink: 0;\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  background: transparent;\n}\n.pg-th__content {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex: 1;\n  min-width: 0;\n  padding: 0 10px 0 12px;\n  height: 100%;\n}\n.pg-th__label {\n  flex: 0 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.pg-th__sort-icon { flex-shrink: 0; opacity: 0; color: var(--pg-colors-text-secondary, #475569); }\n/* Aligned column headers */\n.pg-th--align-right .pg-th__label  { text-align: right; }\n.pg-th--align-center .pg-th__label { text-align: center; }\n.pg-th--align-center .pg-th__content,\n.pg-th--no-group .pg-th__content {\n  justify-content: center;\n}\n.pg-th--no-group .pg-th__label {\n  text-align: center;\n}\n/* Reversed header layout for numeric/currency columns: icons LEFT, text RIGHT */\n.pg-th--reverse { flex-direction: row-reverse; }\n.pg-th--reverse .pg-th__content { flex-direction: row-reverse; padding: 0 12px 0 10px; }\n.pg-th--reverse .pg-th__label { flex: 1 1 auto; }\n.pg-th--reverse .pg-th__filter-btn { margin-right: 0; margin-left: 2px; }\n.pg-th--reverse .pg-th__menu-btn { margin-right: 0; margin-left: 4px; }\n.pg-th--sort-asc .pg-th__sort-icon,\n.pg-th--sort-desc .pg-th__sort-icon { opacity: 1; color: var(--pg-colors-primary, #2563eb); }\n/* \u2500\u2500\u2500 Column header filter button \u2500\u2500\u2500 */\n.pg-th__filter-btn {\n  flex-shrink: 0;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 4px;\n  margin-right: 2px;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  color: var(--pg-colors-text-secondary, #475569);\n  opacity: 0.7;\n  transition: opacity var(--pg-transitions-duration-fast, 100ms),\n              color var(--pg-transitions-duration-fast, 100ms),\n              background var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th:hover .pg-th__filter-btn,\n.pg-th__filter-btn--active { display: flex; }\n.pg-th__filter-btn:hover { opacity: 1; background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-th__filter-btn--active {\n  opacity: 1;\n  color: var(--pg-colors-primary, #2563eb);\n}\n.pg-th__filter-icon { flex-shrink: 0; color: var(--pg-colors-primary, #2563eb); }\n.pg-th__menu-btn {\n  flex-shrink: 0;\n  display: none;\n  cursor: pointer;\n  padding: 6px;\n  margin-right: 4px;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  color: var(--pg-colors-text-secondary, #475569);\n  opacity: 0.6;\n  transition: opacity var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th:hover .pg-th__menu-btn,\n.pg-th__menu-btn--active { display: flex; }\n.pg-th__menu-btn:hover { opacity: 1; background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-th__menu-btn--active { opacity: 1; background: var(--pg-colors-border, #e2e8f0); }\n.pg-th__resize-handle {\n position: absolute;\n    right: -1px;\n    top: 0;\n    width: 6px;\n    height: 50%;\n    top: 25%;\n    cursor: ew-resize;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--pg-colors-resize-handle-color, #d9d9db);\n    background: transparent;\n    transition: background var(--pg-transitions-duration-fast, 100ms);\n    z-index: 5;\n    font-size: 10px;\n    user-select: none;\n    background: #d6d6d6;\n    width: 2px;\n}\n/* Right-pinned columns anchor their right edge to the grid border, so the\n   resize handle lives on the inner (left) edge \u2014 the edge free to move. */\n.pg-th--pinned-right .pg-th__resize-handle {\n  right: auto;\n  left: -1px;\n}\n.pg-th__resize-handle:hover,\n.pg-th.pg-resizing .pg-th__resize-handle,\n.pg-th--resizing .pg-th__resize-handle {\n  // background: var(--pg-colors-resize-handle-active-color, #2563eb);\n}\n\n/* No vertical-borders mode: completely remove the 1px border slot from both headers and cells */\n.pg-grid--no-v-borders .pg-th { border-right: none; }\n.pg-grid--no-v-borders .pg-cell { border-right: none; }\n// .pg-grid--no-v-borders .pg-th__resize-handle {\n//   background: var(--pg-colors-resize-handle-color, #e2e8f0);\n// }\n.pg-grid--no-v-borders .pg-th__resize-handle:hover,\n.pg-grid--no-v-borders .pg-th.pg-resizing .pg-th__resize-handle,\n.pg-grid--no-v-borders .pg-th--resizing .pg-th__resize-handle {\n  // background: var(--pg-colors-resize-handle-active-color, #2563eb);\n}\n.pg-th__drag-handle {\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  transform: translateY(-50%);\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 24px;\n  cursor: grab;\n  color: var(--pg-colors-text-secondary, #475569);\n  z-index: 2;\n  border-radius: 3px;\n}\n.pg-th:hover .pg-th__drag-handle { display: flex; opacity: 0.5; }\n.pg-th__drag-handle:hover { opacity: 1 !important; background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-th--dragging { opacity: 0.72; cursor: grabbing !important; }\n.pg-th__serial-label { font-size: 11px; opacity: 0.45; }\n.pg-header-checkbox { cursor: pointer; width: 16px; height: 16px; }\n\n";
+export declare const headerCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Header rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-header-row, .pg-filter-row {\n  display: flex;\n  align-items: stretch;\n}\n.pg-header-row { height: var(--pg-header-row-height, 44px); }\n.pg-filter-row {\n  height: var(--pg-filter-row-height, 36px);\n  border-top: 1px solid var(--pg-colors-border, #e2e8f0);\n  background: var(--pg-colors-filter-background, #fff);\n}\n.pg-th {\n  display: flex;\n  align-items: center;\n  position: relative;\n  flex-shrink: 0;\n  padding: 0;\n  color: var(--pg-colors-header-text, #374151);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  letter-spacing: var(--pg-typography-letter-spacing-wide, 0.025em);\n  text-transform: uppercase;\n  border-right: 1px solid var(--pg-colors-header-border, #e2e8f0);\n  user-select: none;\n  cursor: default;\n  transition: background var(--pg-transitions-duration-fast, 100ms);\n  overflow: hidden;\n  min-width: var(--pg-sizing-column-min-width, 40px);\n}\n.pg-th:last-child { border-right: none; }\n.pg-th--sortable { cursor: pointer; }\n// .pg-th:hover, .pg-th.pg-th--sortable:hover { background: var(--pg-colors-header-hover, #f1f5f9); }\n// .pg-th.pg-th--sorted { background: var(--pg-colors-header-hover, #f1f5f9); }\n.pg-th.pg-th--sort-asc .pg-th__sort-icon,\n.pg-th.pg-th--sort-desc .pg-th__sort-icon { color: var(--pg-colors-primary, #2563eb); }\n.pg-th.pg-th--filter-active .pg-th__label { color: var(--pg-colors-primary, #2563eb); }\n.pg-th--checkbox {\n  width: 44px;\n  min-width: 44px;\n  max-width: 44px;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.pg-th--serial {\n  width: 52px;\n  min-width: 52px;\n  max-width: 52px;\n  justify-content: center;\n  flex-shrink: 0;\n}\n.pg-th--auto-group {\n  flex-shrink: 0;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--pg-colors-text-secondary, #64748b);\n}\n.pg-cell--auto-group-spacer {\n  flex-shrink: 0;\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  background: transparent;\n}\n.pg-th__content {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex: 1;\n  min-width: 0;\n  padding: 0 10px 0 12px;\n  height: 100%;\n}\n.pg-th__label {\n  flex: 0 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.pg-th__sort-icon { flex-shrink: 0; opacity: 0; color: var(--pg-colors-text-secondary, #475569); }\n/* Aligned column headers */\n.pg-th--align-right .pg-th__label  { text-align: right; }\n.pg-th--align-center .pg-th__label { text-align: center; }\n.pg-th--align-center .pg-th__content,\n.pg-th--no-group .pg-th__content {\n  justify-content: center;\n}\n.pg-th--no-group .pg-th__label {\n  text-align: center;\n}\n/* Reversed header layout for numeric/currency columns: icons LEFT, text RIGHT */\n.pg-th--reverse { flex-direction: row-reverse; }\n.pg-th--reverse .pg-th__content { flex-direction: row-reverse; padding: 0 12px 0 10px; }\n.pg-th--reverse .pg-th__label { flex: 1 1 auto; }\n.pg-th--reverse .pg-th__filter-btn { margin-right: 0; margin-left: 2px; }\n.pg-th--reverse .pg-th__menu-btn { margin-right: 0; margin-left: 4px; }\n.pg-th--sort-asc .pg-th__sort-icon,\n.pg-th--sort-desc .pg-th__sort-icon { opacity: 1; color: var(--pg-colors-primary, #2563eb); }\n/* \u2500\u2500\u2500 Column header filter button \u2500\u2500\u2500 */\n.pg-th__filter-btn {\n  flex-shrink: 0;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 4px;\n  margin-right: 2px;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  color: var(--pg-colors-text-secondary, #475569);\n  opacity: 0.7;\n  transition: opacity var(--pg-transitions-duration-fast, 100ms),\n              color var(--pg-transitions-duration-fast, 100ms),\n              background var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th:hover .pg-th__filter-btn,\n.pg-th__filter-btn--active { display: flex; }\n/* Always-visible mode \u2014 opt in via headerIcons.filter / ColumnDef.filterIconDisplay */\n.pg-th__filter-btn--always { display: flex; }\n.pg-th__filter-btn:hover { opacity: 1; background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-th__filter-btn--active {\n  opacity: 1;\n  color: var(--pg-colors-primary, #2563eb);\n}\n.pg-th__filter-icon { flex-shrink: 0; color: var(--pg-colors-primary, #2563eb); }\n.pg-th__menu-btn {\n  flex-shrink: 0;\n  display: none;\n  cursor: pointer;\n  padding: 6px;\n  margin-right: 4px;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  color: var(--pg-colors-text-secondary, #475569);\n  opacity: 0.6;\n  transition: opacity var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th:hover .pg-th__menu-btn,\n.pg-th__menu-btn--active { display: flex; }\n/* Always-visible mode \u2014 opt in via headerIcons.menu / ColumnDef.menuIconDisplay */\n.pg-th__menu-btn--always { display: flex; }\n.pg-th__menu-btn:hover { opacity: 1; background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-th__menu-btn--active { opacity: 1; background: var(--pg-colors-border, #e2e8f0); }\n.pg-th__resize-handle {\n position: absolute;\n    right: -1px;\n    top: 0;\n    width: 6px;\n    height: 50%;\n    top: 25%;\n    cursor: ew-resize;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--pg-colors-resize-handle-color, #d9d9db);\n    background: transparent;\n    transition: background var(--pg-transitions-duration-fast, 100ms);\n    z-index: 5;\n    font-size: 10px;\n    user-select: none;\n    background: #d6d6d6;\n    width: 2px;\n}\n/* Right-pinned columns anchor their right edge to the grid border, so the\n   resize handle lives on the inner (left) edge \u2014 the edge free to move. */\n.pg-th--pinned-right .pg-th__resize-handle {\n  right: auto;\n  left: -1px;\n}\n.pg-th__resize-handle:hover,\n.pg-th.pg-resizing .pg-th__resize-handle,\n.pg-th--resizing .pg-th__resize-handle {\n  // background: var(--pg-colors-resize-handle-active-color, #2563eb);\n}\n\n/* No vertical-borders mode: completely remove the 1px border slot from both headers and cells */\n.pg-grid--no-v-borders .pg-th { border-right: none; }\n.pg-grid--no-v-borders .pg-cell { border-right: none; }\n// .pg-grid--no-v-borders .pg-th__resize-handle {\n//   background: var(--pg-colors-resize-handle-color, #e2e8f0);\n// }\n.pg-grid--no-v-borders .pg-th__resize-handle:hover,\n.pg-grid--no-v-borders .pg-th.pg-resizing .pg-th__resize-handle,\n.pg-grid--no-v-borders .pg-th--resizing .pg-th__resize-handle {\n  // background: var(--pg-colors-resize-handle-active-color, #2563eb);\n}\n.pg-th__drag-handle {\n  position: absolute;\n  left: 2px;\n  top: 50%;\n  transform: translateY(-50%);\n  display: none;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 24px;\n  cursor: grab;\n  color: var(--pg-colors-text-secondary, #475569);\n  z-index: 2;\n  border-radius: 3px;\n}\n.pg-th:hover .pg-th__drag-handle { display: flex; opacity: 0.5; }\n.pg-th__drag-handle:hover { opacity: 1 !important; background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-th--dragging { opacity: 0.72; cursor: grabbing !important; }\n.pg-th__serial-label { font-size: 11px; opacity: 0.45; }\n.pg-header-checkbox { cursor: pointer; width: 16px; height: 16px; }\n\n/* Inline column-header rename input (column menu \u2192 Rename). */\n.pg-th__rename-input {\n  flex: 1 1 auto;\n  min-width: 0;\n  width: 100%;\n  box-sizing: border-box;\n  padding: 2px 6px;\n  margin: 0 4px;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  color: var(--pg-colors-text-primary, #0f172a);\n  background: var(--pg-colors-background, #ffffff);\n  border: 1px solid var(--pg-colors-primary, #2563eb);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  outline: none;\n  box-shadow: 0 0 0 2px var(--pg-colors-primary-soft, rgba(37, 99, 235, 0.16));\n}\n\n";
 //# sourceMappingURL=header.css.d.ts.map

package/styles/base/header.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,uxOA2MrB,CAAC"}
+{"version":3,"file":"header.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,moQAkOrB,CAAC"}

package/styles/base/header.css.js

@@ -123,6 +123,8 @@ export const headerCss = `/* ─────────────────
 }
 .pg-th:hover .pg-th__filter-btn,
 .pg-th__filter-btn--active { display: flex; }
+/* Always-visible mode — opt in via headerIcons.filter / ColumnDef.filterIconDisplay */
+.pg-th__filter-btn--always { display: flex; }
 .pg-th__filter-btn:hover { opacity: 1; background: var(--pg-colors-background-alt, #f1f5f9); }
 .pg-th__filter-btn--active {
   opacity: 1;
@@ -142,6 +144,8 @@ export const headerCss = `/* ─────────────────
 }
 .pg-th:hover .pg-th__menu-btn,
 .pg-th__menu-btn--active { display: flex; }
+/* Always-visible mode — opt in via headerIcons.menu / ColumnDef.menuIconDisplay */
+.pg-th__menu-btn--always { display: flex; }
 .pg-th__menu-btn:hover { opacity: 1; background: var(--pg-colors-background-alt, #f1f5f9); }
 .pg-th__menu-btn--active { opacity: 1; background: var(--pg-colors-border, #e2e8f0); }
 .pg-th__resize-handle {
@@ -208,5 +212,24 @@ export const headerCss = `/* ─────────────────
 .pg-th__serial-label { font-size: 11px; opacity: 0.45; }
 .pg-header-checkbox { cursor: pointer; width: 16px; height: 16px; }
 
+/* Inline column-header rename input (column menu → Rename). */
+.pg-th__rename-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 2px 6px;
+  margin: 0 4px;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  color: var(--pg-colors-text-primary, #0f172a);
+  background: var(--pg-colors-background, #ffffff);
+  border: 1px solid var(--pg-colors-primary, #2563eb);
+  border-radius: var(--pg-borders-radius-sm, 4px);
+  outline: none;
+  box-shadow: 0 0 0 2px var(--pg-colors-primary-soft, rgba(37, 99, 235, 0.16));
+}
+
 `;
 //# sourceMappingURL=header.css.js.map

package/styles/base/header.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.css.js","sourceRoot":"","sources":["../../../src/styles/base/header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2MxB,CAAC"}
+{"version":3,"file":"header.css.js","sourceRoot":"","sources":["../../../src/styles/base/header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkOxB,CAAC"}

package/styles/base/photon-ai.css.d.ts

@@ -5,5 +5,5 @@
  * base-styles.ts; edit here, not there. Order is preserved because CSS
  * cascade depends on it.
  */
-export declare const photonAiCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Photon AI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Floating command bar, anchored to the grid body's bottom-right corner.\n   Mounted as a sibling of the pinned-column panels (see PhotonAIPanel.mount /\n   GridRenderer.buildLayout) so it floats independently of virtualization and\n   scroll; the grid body's own overflow: hidden is what keeps it inside the\n   grid container per spec, without this component needing to enforce that\n   itself. */\n.pg-ai-launcher {\n  position: absolute;\n  bottom: 16px;\n  right: 16px;\n  z-index: 201;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  border: none;\n  border-radius: var(--pg-borders-radius-pill, 9999px);\n  background: var(--pg-colors-primary, #2563eb);\n  color: var(--pg-colors-primary-text, #ffffff);\n  box-shadow: var(--pg-shadows-lg, 0 8px 24px rgba(15, 23, 42, 0.16));\n  cursor: pointer;\n  transition:\n    transform var(--pg-transitions-duration-base, 150ms) var(--pg-transitions-easing-base, ease),\n    opacity var(--pg-transitions-duration-base, 150ms) var(--pg-transitions-easing-base, ease),\n    background var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-ai-launcher:hover {\n  background: var(--pg-colors-primary-hover, #1d4ed8);\n  transform: scale(1.06);\n}\n.pg-ai-launcher:active {\n  background: var(--pg-colors-primary-active, #1e40af);\n  transform: scale(0.97);\n}\n.pg-ai-launcher--hidden {\n  opacity: 0;\n  transform: scale(0.7);\n  pointer-events: none;\n}\n\n.pg-ai-panel {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  bottom: 12px;\n  z-index: 201;\n  width: min(360px, calc(100% - 24px));\n  display: none;\n  flex-direction: column;\n  background: var(--pg-colors-surface, #ffffff);\n  border: var(--pg-borders-width-thin, 1px) solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-lg, 10px);\n  box-shadow: var(--pg-shadows-dropdown, 0 16px 48px rgba(15, 23, 42, 0.24));\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n  color: var(--pg-colors-text-primary, #0f172a);\n}\n.pg-ai-panel--open {\n  display: flex;\n}\n\n.pg-ai-panel__header {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  border-bottom: var(--pg-borders-width-thin, 1px) solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-ai-panel__title {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--pg-typography-font-size-sm, 13px);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  color: var(--pg-colors-primary, #2563eb);\n}\n.pg-ai-panel__close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border: none;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: transparent;\n  color: var(--pg-colors-text-secondary, #64748b);\n  cursor: pointer;\n  transition: background var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-ai-panel__close:hover {\n  background: var(--pg-colors-background-alt, #f1f5f9);\n}\n\n.pg-ai-panel__log {\n  flex: 1 1 0;\n  min-height: 0;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 14px;\n}\n\n.pg-ai-panel__message {\n  max-width: 85%;\n  padding: 8px 12px;\n  border-radius: var(--pg-borders-radius-lg, 10px);\n  font-size: var(--pg-typography-font-size-sm, 13px);\n  line-height: 1.45;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.pg-ai-panel__message--user {\n  align-self: flex-end;\n  background: var(--pg-colors-primary, #2563eb);\n  color: var(--pg-colors-primary-text, #ffffff);\n  border-bottom-right-radius: var(--pg-borders-radius-sm, 4px);\n}\n.pg-ai-panel__message--assistant {\n  align-self: flex-start;\n  background: var(--pg-colors-background-alt, #f1f5f9);\n  color: var(--pg-colors-text-primary, #0f172a);\n  border-bottom-left-radius: var(--pg-borders-radius-sm, 4px);\n}\n.pg-ai-panel__message--assistant.pg-ai-panel__message--error {\n  background: var(--pg-colors-error-subtle, #fef2f2);\n  color: var(--pg-colors-error, #dc2626);\n}\n\n.pg-ai-panel__input-wrap {\n  position: relative;\n  flex-shrink: 0;\n  display: flex;\n  padding: 10px 12px 12px;\n  border-top: var(--pg-borders-width-thin, 1px) solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-ai-panel__input {\n  flex: 1 1 0;\n  width: 100%;\n  min-height: 36px;\n  max-height: 120px;\n  padding: 8px 40px 8px 12px;\n  border: var(--pg-borders-width-thin, 1px) solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-md, 6px);\n  background: var(--pg-colors-surface, #ffffff);\n  color: var(--pg-colors-text-primary, #0f172a);\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n  font-size: var(--pg-typography-font-size-sm, 13px);\n  line-height: 1.4;\n  resize: none;\n  outline: none;\n  transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-ai-panel__input::placeholder {\n  color: var(--pg-colors-text-disabled, #94a3b8);\n}\n.pg-ai-panel__input:focus {\n  border-color: var(--pg-colors-border-focus, #2563eb);\n}\n.pg-ai-panel__send {\n  position: absolute;\n  right: 20px;\n  bottom: 17px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  flex-shrink: 0;\n  border: none;\n  border-radius: var(--pg-borders-radius-pill, 9999px);\n  background: var(--pg-colors-primary, #2563eb);\n  color: var(--pg-colors-primary-text, #ffffff);\n  cursor: pointer;\n  transition:\n    background var(--pg-transitions-duration-fast, 100ms),\n    transform var(--pg-transitions-duration-fast, 100ms),\n    opacity var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-ai-panel__send:hover:not(:disabled) {\n  background: var(--pg-colors-primary-hover, #1d4ed8);\n  transform: scale(1.08);\n}\n.pg-ai-panel__send:disabled {\n  background: var(--pg-colors-text-disabled, #94a3b8);\n  opacity: 0.5;\n  cursor: default;\n}\n\n";
+export declare const photonAiCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Photon AI \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Floating command bar, anchored to the grid body's bottom-right corner.\n   Mounted as a sibling of the pinned-column panels (see PhotonAIPanel.mount /\n   GridRenderer.buildLayout) so it floats independently of virtualization and\n   scroll; the grid body's own overflow: hidden is what keeps it inside the\n   grid container per spec, without this component needing to enforce that\n   itself. */\n.pg-ai-launcher {\n  position: absolute;\n  bottom: 16px;\n  right: 16px;\n  z-index: 201;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 44px;\n  height: 44px;\n  border: none;\n  border-radius: var(--pg-borders-radius-pill, 9999px);\n  background: var(--pg-colors-primary, #2563eb);\n  color: var(--pg-colors-primary-text, #ffffff);\n  box-shadow: var(--pg-shadows-lg, 0 8px 24px rgba(15, 23, 42, 0.16));\n  cursor: pointer;\n  transition:\n    transform var(--pg-transitions-duration-base, 150ms) var(--pg-transitions-easing-base, ease),\n    opacity var(--pg-transitions-duration-base, 150ms) var(--pg-transitions-easing-base, ease),\n    background var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-ai-launcher:hover {\n  background: var(--pg-colors-primary-hover, #1d4ed8);\n  transform: scale(1.06);\n}\n.pg-ai-launcher:active {\n  background: var(--pg-colors-primary-active, #1e40af);\n  transform: scale(0.97);\n}\n.pg-ai-launcher--hidden {\n  opacity: 0;\n  transform: scale(0.7);\n  pointer-events: none;\n}\n\n.pg-ai-panel {\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  bottom: 12px;\n  z-index: 201;\n  width: min(360px, calc(100% - 24px));\n  display: none;\n  flex-direction: column;\n  background: var(--pg-colors-surface, #ffffff);\n  border: var(--pg-borders-width-thin, 1px) solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-lg, 10px);\n  box-shadow: var(--pg-shadows-dropdown, 0 16px 48px rgba(15, 23, 42, 0.24));\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n  color: var(--pg-colors-text-primary, #0f172a);\n}\n.pg-ai-panel--open {\n  display: flex;\n}\n\n.pg-ai-panel__header {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 12px;\n  border-bottom: var(--pg-borders-width-thin, 1px) solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-ai-panel__title {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: var(--pg-typography-font-size-sm, 13px);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  color: var(--pg-colors-primary, #2563eb);\n}\n.pg-ai-panel__close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border: none;\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: transparent;\n  color: var(--pg-colors-text-secondary, #64748b);\n  cursor: pointer;\n  transition: background var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-ai-panel__close:hover {\n  background: var(--pg-colors-background-alt, #f1f5f9);\n}\n\n.pg-ai-panel__log {\n  flex: 1 1 0;\n  min-height: 0;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding: 14px;\n}\n\n.pg-ai-panel__message {\n  max-width: 85%;\n  padding: 8px 12px;\n  border-radius: var(--pg-borders-radius-lg, 10px);\n  font-size: var(--pg-typography-font-size-sm, 13px);\n  line-height: 1.45;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.pg-ai-panel__message--user {\n  align-self: flex-end;\n  background: var(--pg-colors-primary, #2563eb);\n  color: var(--pg-colors-primary-text, #ffffff);\n  border-bottom-right-radius: var(--pg-borders-radius-sm, 4px);\n}\n.pg-ai-panel__message--assistant {\n  align-self: flex-start;\n  background: var(--pg-colors-background-alt, #f1f5f9);\n  color: var(--pg-colors-text-primary, #0f172a);\n  border-bottom-left-radius: var(--pg-borders-radius-sm, 4px);\n}\n.pg-ai-panel__message--assistant.pg-ai-panel__message--error {\n  background: var(--pg-colors-error-subtle, #fef2f2);\n  color: var(--pg-colors-error, #dc2626);\n}\n\n.pg-ai-panel__input-wrap {\n  position: relative;\n  flex-shrink: 0;\n  display: flex;\n  padding: 10px 12px 12px;\n  border-top: var(--pg-borders-width-thin, 1px) solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-ai-panel__input {\n  flex: 1 1 0;\n  width: 100%;\n  min-height: 36px;\n  max-height: 120px;\n  padding: 8px 40px 8px 12px;\n  border: var(--pg-borders-width-thin, 1px) solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-md, 6px);\n  background: var(--pg-colors-surface, #ffffff);\n  color: var(--pg-colors-text-primary, #0f172a);\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n  font-size: var(--pg-typography-font-size-sm, 13px);\n  line-height: 1.4;\n  resize: none;\n  outline: none;\n  transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-ai-panel__input::placeholder {\n  color: var(--pg-colors-text-disabled, #94a3b8);\n}\n.pg-ai-panel__input:focus {\n  border-color: var(--pg-colors-border-focus, #2563eb);\n}\n.pg-ai-panel__send {\n  position: absolute;\n  right: 20px;\n  bottom: 17px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  flex-shrink: 0;\n  border: none;\n  border-radius: var(--pg-borders-radius-pill, 9999px);\n  background: var(--pg-colors-primary, #2563eb);\n  color: var(--pg-colors-primary-text, #ffffff);\n  cursor: pointer;\n  transition:\n    background var(--pg-transitions-duration-fast, 100ms),\n    transform var(--pg-transitions-duration-fast, 100ms),\n    opacity var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-ai-panel__send:hover:not(:disabled) {\n  background: var(--pg-colors-primary-hover, #1d4ed8);\n  transform: scale(1.08);\n}\n.pg-ai-panel__send:disabled {\n  background: var(--pg-colors-text-disabled, #94a3b8);\n  opacity: 0.5;\n  cursor: default;\n}\n.pg-ai-panel__input:disabled {\n  opacity: 0.6;\n  cursor: default;\n}\n\n/* \u2500\u2500 Generative reply: loading state + typewriter streaming \u2500\u2500 */\n\n/* \"Thinking\" indicator shown while a generative provider request is in flight. */\n.pg-ai-panel__typing {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 0;\n}\n.pg-ai-panel__typing-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: var(--pg-borders-radius-pill, 9999px);\n  background: var(--pg-colors-text-secondary, #64748b);\n  opacity: 0.4;\n  animation: pg-ai-typing 1.2s var(--pg-transitions-easing-base, ease) infinite;\n}\n.pg-ai-panel__typing-dot:nth-child(2) {\n  animation-delay: 0.2s;\n}\n.pg-ai-panel__typing-dot:nth-child(3) {\n  animation-delay: 0.4s;\n}\n@keyframes pg-ai-typing {\n  0%, 60%, 100% {\n    opacity: 0.4;\n    transform: translateY(0);\n  }\n  30% {\n    opacity: 1;\n    transform: translateY(-3px);\n  }\n}\n\n/* Blinking caret trailing the text while a reply is being typed out. */\n.pg-ai-panel__message--streaming > div:last-child::after {\n  content: '';\n  display: inline-block;\n  width: 2px;\n  height: 1em;\n  margin-left: 1px;\n  vertical-align: text-bottom;\n  background: var(--pg-colors-primary, #2563eb);\n  animation: pg-ai-caret 1s steps(1) infinite;\n}\n@keyframes pg-ai-caret {\n  0%, 50% {\n    opacity: 1;\n  }\n  50.01%, 100% {\n    opacity: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .pg-ai-panel__typing-dot,\n  .pg-ai-panel__message--streaming > div:last-child::after {\n    animation: none;\n  }\n}\n\n";
 //# sourceMappingURL=photon-ai.css.d.ts.map

package/styles/base/photon-ai.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"photon-ai.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/photon-ai.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,0iMA+LvB,CAAC"}
+{"version":3,"file":"photon-ai.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/photon-ai.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,ilPAgQvB,CAAC"}

package/styles/base/photon-ai.css.js

@@ -195,6 +195,71 @@ export const photonAiCss = `/* ────────────────
   opacity: 0.5;
   cursor: default;
 }
+.pg-ai-panel__input:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+/* ── Generative reply: loading state + typewriter streaming ── */
+
+/* "Thinking" indicator shown while a generative provider request is in flight. */
+.pg-ai-panel__typing {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 0;
+}
+.pg-ai-panel__typing-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--pg-borders-radius-pill, 9999px);
+  background: var(--pg-colors-text-secondary, #64748b);
+  opacity: 0.4;
+  animation: pg-ai-typing 1.2s var(--pg-transitions-easing-base, ease) infinite;
+}
+.pg-ai-panel__typing-dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.pg-ai-panel__typing-dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+@keyframes pg-ai-typing {
+  0%, 60%, 100% {
+    opacity: 0.4;
+    transform: translateY(0);
+  }
+  30% {
+    opacity: 1;
+    transform: translateY(-3px);
+  }
+}
+
+/* Blinking caret trailing the text while a reply is being typed out. */
+.pg-ai-panel__message--streaming > div:last-child::after {
+  content: '';
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  margin-left: 1px;
+  vertical-align: text-bottom;
+  background: var(--pg-colors-primary, #2563eb);
+  animation: pg-ai-caret 1s steps(1) infinite;
+}
+@keyframes pg-ai-caret {
+  0%, 50% {
+    opacity: 1;
+  }
+  50.01%, 100% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pg-ai-panel__typing-dot,
+  .pg-ai-panel__message--streaming > div:last-child::after {
+    animation: none;
+  }
+}
 
 `;
 //# sourceMappingURL=photon-ai.css.js.map

package/styles/base/photon-ai.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"photon-ai.css.js","sourceRoot":"","sources":["../../../src/styles/base/photon-ai.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+L1B,CAAC"}
+{"version":3,"file":"photon-ai.css.js","sourceRoot":"","sources":["../../../src/styles/base/photon-ai.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgQ1B,CAAC"}

package/styles/base/row-drag.css.d.ts

@@ -5,5 +5,5 @@
  * base-styles.ts; edit here, not there. Order is preserved because CSS
  * cascade depends on it.
  */
-export declare const rowDragCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Row Drag \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-grid__body { position: relative; }\n\n.pg-row-drag-handle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 100%;\n  flex-shrink: 0;\n  cursor: grab;\n  opacity: 0.35;\n  color: var(--pg-colors-text-secondary, #475569);\n  margin-right: 4px;\n}\n.pg-row-drag-handle:hover { opacity: 0.7; }\n.pg-row-drag-handle:active { cursor: grabbing; }\n\n.pg-row-drag-ghost {\n  position: fixed;\n  pointer-events: none;\n  z-index: 9999;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 10px;\n  border-radius: var(--pg-borders-radius-md, 6px);\n  border: 1.5px solid var(--pg-colors-primary, #2563eb);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-primary, #2563eb);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-weight: 500;\n  box-shadow: 0 6px 24px rgba(37,99,235,0.13), 0 2px 8px rgba(37,99,235,0.12);\n  transform: translate(12px, -50%);\n  white-space: nowrap;\n  max-width: 240px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.pg-row-drag-ghost__icon { display: inline-flex; align-items: center; opacity: 0.8; }\n.pg-row-drag-ghost__icon--block { display: none; }\n.pg-row-drag-ghost__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n\n.pg-row-drag-ghost--outside {\n  border-color: var(--pg-colors-danger, #ef4444);\n  box-shadow: 0 6px 24px rgba(239,68,68,0.13), 0 2px 8px rgba(239,68,68,0.12);\n  color: var(--pg-colors-danger, #ef4444);\n}\n.pg-row-drag-ghost--outside .pg-row-drag-ghost__icon--drag { display: none; }\n.pg-row-drag-ghost--outside .pg-row-drag-ghost__icon--block { display: inline-flex; }\n\n.pg-row-drop-indicator {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background: var(--pg-colors-primary, #2563eb);\n  pointer-events: none;\n  z-index: 100;\n  border-radius: 1px;\n}\n.pg-row-drop-indicator::before {\n  content: '';\n  position: absolute;\n  left: -3px;\n  top: -3px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--pg-colors-primary, #2563eb);\n}\n\n/* The dragged row: semi-transparent, moves to virtual landing position */\n.pg-row--row-dragging { opacity: 0.4; }\n\n/* During row drag: kill hover/click on all rows; animate top changes.\n   Uses top (not transform) so rows stay within panel overflow:hidden bounds. */\n.pg-grid--row-dragging .pg-row {\n  pointer-events: none;\n  will-change: top;\n  transition: background var(--pg-transitions-duration-fast, 100ms),\n              top 130ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n";
+export declare const rowDragCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Row Drag \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-grid__body { position: relative; transform: translateZ(10px);}\n\n.pg-row-drag-handle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 100%;\n  flex-shrink: 0;\n  cursor: grab;\n  opacity: 0.35;\n  color: var(--pg-colors-text-secondary, #475569);\n  margin-right: 4px;\n}\n.pg-row-drag-handle:hover { opacity: 0.7; }\n.pg-row-drag-handle:active { cursor: grabbing; }\n\n.pg-row-drag-ghost {\n  position: fixed;\n  pointer-events: none;\n  z-index: 9999;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 10px;\n  border-radius: var(--pg-borders-radius-md, 6px);\n  border: 1.5px solid var(--pg-colors-primary, #2563eb);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-primary, #2563eb);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-weight: 500;\n  box-shadow: 0 6px 24px rgba(37,99,235,0.13), 0 2px 8px rgba(37,99,235,0.12);\n  transform: translate(12px, -50%);\n  white-space: nowrap;\n  max-width: 240px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.pg-row-drag-ghost__icon { display: inline-flex; align-items: center; opacity: 0.8; }\n.pg-row-drag-ghost__icon--block { display: none; }\n.pg-row-drag-ghost__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }\n\n.pg-row-drag-ghost--outside {\n  border-color: var(--pg-colors-danger, #ef4444);\n  box-shadow: 0 6px 24px rgba(239,68,68,0.13), 0 2px 8px rgba(239,68,68,0.12);\n  color: var(--pg-colors-danger, #ef4444);\n}\n.pg-row-drag-ghost--outside .pg-row-drag-ghost__icon--drag { display: none; }\n.pg-row-drag-ghost--outside .pg-row-drag-ghost__icon--block { display: inline-flex; }\n\n.pg-row-drop-indicator {\n  position: absolute;\n  left: 0;\n  right: 0;\n  height: 2px;\n  background: var(--pg-colors-primary, #2563eb);\n  pointer-events: none;\n  z-index: 100;\n  border-radius: 1px;\n}\n.pg-row-drop-indicator::before {\n  content: '';\n  position: absolute;\n  left: -3px;\n  top: -3px;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--pg-colors-primary, #2563eb);\n}\n\n/* The dragged row: semi-transparent, moves to virtual landing position */\n.pg-row--row-dragging { opacity: 0.4; }\n\n/* During row drag: kill hover/click on all rows; animate top changes.\n   Uses top (not transform) so rows stay within panel overflow:hidden bounds. */\n.pg-grid--row-dragging .pg-row {\n  pointer-events: none;\n  will-change: top;\n  transition: background var(--pg-transitions-duration-fast, 100ms),\n              top 130ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n";
 //# sourceMappingURL=row-drag.css.d.ts.map

package/styles/base/row-drag.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"row-drag.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/row-drag.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,0xFAoFtB,CAAC"}
+{"version":3,"file":"row-drag.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/row-drag.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,szFAoFtB,CAAC"}

package/styles/base/row-drag.css.js

@@ -6,7 +6,7 @@
  * cascade depends on it.
  */
 export const rowDragCss = `/* ──────────────────── Row Drag ──────────────────── */
-.pg-grid__body { position: relative; }
+.pg-grid__body { position: relative; transform: translateZ(10px);}
 
 .pg-row-drag-handle {
   display: inline-flex;

package/styles/base/rows.css.d.ts

@@ -5,5 +5,5 @@
  * base-styles.ts; edit here, not there. Order is preserved because CSS
  * cascade depends on it.
  */
-export declare const rowsCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-row {\n  display: flex;\n  align-items: stretch;\n  position: absolute;\n  left: 0;\n  width: 100%;\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  background: var(--pg-colors-row-background, #fff);\n  transition: background var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-row--hover { background: var(--pg-colors-row-hover, #f0f7ff) !important; }\n.pg-row--alt { background: var(--pg-colors-row-background-alt, #f8fafc); }\n.pg-row--selected {\n  background: var(--pg-colors-row-selected, #eff6ff) !important;\n  outline: none;\n}\n.pg-row--selected .pg-cell { color: inherit; }\n.pg-row--group {\n  background: var(--pg-colors-group-row-background, #f8fafc);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  // border-left: var(--pg-group-row-border-width, 3px) solid var(--pg-colors-primary, #2563eb);\n  cursor: pointer;\n}\n.pg-row--group:hover,\n.pg-row--group.pg-row--hover {\n  background: var(--pg-colors-group-row-hover, #eff2ff) !important;\n}\n.pg-row--group:hover .pg-row-group__toggle,\n.pg-row--group.pg-row--hover .pg-row-group__toggle {\n  background: var(--pg-colors-group-toggle-hover, rgba(37, 99, 235, 0.1));\n  color: var(--pg-colors-primary, #2563eb);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Group footer row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/*\n * Appears below the last leaf child of each expanded group.\n * Shows the same aggregate values as the group header row (AG Grid groupIncludeFooter).\n * Cells are fully selectable and copyable; editing is blocked because values are computed.\n */\n.pg-row--group-footer {\n  background: var(--pg-colors-group-footer-background, #eef2fa);\n  font-style: italic;\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  border-bottom: 2px solid var(--pg-colors-primary-light, #bfdbfe);\n  cursor: default;\n}\n.pg-row--group-footer:hover,\n.pg-row--group-footer.pg-row--hover {\n  background: var(--pg-colors-group-footer-hover, #e0e9f8) !important;\n}\n/* Level-based indentation mirrors the group header rules */\n.pg-row--group-footer[data-level=\"0\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-0, 8px); }\n.pg-row--group-footer[data-level=\"1\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-1, 28px); }\n.pg-row--group-footer[data-level=\"2\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-2, 48px); }\n.pg-row--group-footer[data-level=\"3\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-3, 68px); }\n.pg-row--group-footer[data-level=\"4\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-4, 88px); }\n.pg-row--group-footer[data-level=\"5\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-5, 108px); }\n.pg-row--group-footer .pg-row-group__label {\n  color: var(--pg-colors-text-secondary, #475569);\n}\n/* Dark-mode overrides */\n.pg-grid[data-theme=\"dark\"] .pg-row--group-footer {\n  background: var(--pg-colors-group-footer-background, rgba(37, 99, 235, 0.06));\n  border-bottom-color: rgba(96, 165, 250, 0.28);\n}\n.pg-grid[data-theme=\"dark\"] .pg-row--group-footer:hover,\n.pg-grid[data-theme=\"dark\"] .pg-row--group-footer.pg-row--hover {\n  background: var(--pg-colors-group-footer-hover, rgba(37, 99, 235, 0.11)) !important;\n}\n.pg-grid[data-theme=\"dark\"] .pg-row--group-footer .pg-row-group__label {\n  color: var(--pg-colors-text-secondary, #94a3b8);\n}\n\n";
+export declare const rowsCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-row {\n  display: flex;\n  align-items: stretch;\n  position: absolute;\n  left: 0;\n  width: 100%;\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  background: var(--pg-colors-row-background, #fff);\n  transition: background var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-row--hover { background: var(--pg-colors-row-hover, #f0f7ff) !important; }\n.pg-row--alt { background: var(--pg-colors-row-background-alt, #f8fafc); }\n.pg-row--selected {\n  background: var(--pg-colors-row-selected, #eff6ff) !important;\n  outline: none;\n}\n.pg-row--selected .pg-cell { color: inherit; }\n.pg-row--group {\n  background: var(--pg-colors-group-row-background, #f8fafc);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  // border-left: var(--pg-group-row-border-width, 3px) solid var(--pg-colors-primary, #2563eb);\n  cursor: pointer;\n}\n.pg-row--group:hover,\n.pg-row--group.pg-row--hover {\n  background: var(--pg-colors-group-row-hover, var(--pg-colors-row-hover, #eff2ff)) !important;\n}\n.pg-row--group:hover .pg-row-group__toggle,\n.pg-row--group.pg-row--hover .pg-row-group__toggle {\n  background: var(--pg-colors-group-toggle-hover, rgba(37, 99, 235, 0.1));\n  color: var(--pg-colors-primary, #2563eb);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Group footer row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/*\n * Appears below the last leaf child of each expanded group.\n * Shows the same aggregate values as the group header row (AG Grid groupIncludeFooter).\n * Cells are fully selectable and copyable; editing is blocked because values are computed.\n */\n.pg-row--group-footer {\n  background: var(--pg-colors-group-footer-background, var(--pg-colors-background-alt, #eef2fa));\n  font-style: italic;\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  border-bottom: 2px solid var(--pg-colors-primary-light, var(--pg-colors-border-strong, #bfdbfe));\n  cursor: default;\n}\n.pg-row--group-footer:hover,\n.pg-row--group-footer.pg-row--hover {\n  background: var(--pg-colors-group-footer-hover, var(--pg-colors-row-hover, #e0e9f8)) !important;\n}\n/* Level-based indentation mirrors the group header rules */\n.pg-row--group-footer[data-level=\"0\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-0, 8px); }\n.pg-row--group-footer[data-level=\"1\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-1, 28px); }\n.pg-row--group-footer[data-level=\"2\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-2, 48px); }\n.pg-row--group-footer[data-level=\"3\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-3, 68px); }\n.pg-row--group-footer[data-level=\"4\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-4, 88px); }\n.pg-row--group-footer[data-level=\"5\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-5, 108px); }\n.pg-row--group-footer .pg-row-group__label {\n  color: var(--pg-colors-text-secondary, #475569);\n}\n\n";
 //# sourceMappingURL=rows.css.d.ts.map

package/styles/base/rows.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rows.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/rows.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,0uHA0EnB,CAAC"}
+{"version":3,"file":"rows.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/rows.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,2yGA8DnB,CAAC"}

package/styles/base/rows.css.js

@@ -31,7 +31,7 @@ export const rowsCss = `/* ─────────────────
 }
 .pg-row--group:hover,
 .pg-row--group.pg-row--hover {
-  background: var(--pg-colors-group-row-hover, #eff2ff) !important;
+  background: var(--pg-colors-group-row-hover, var(--pg-colors-row-hover, #eff2ff)) !important;
 }
 .pg-row--group:hover .pg-row-group__toggle,
 .pg-row--group.pg-row--hover .pg-row-group__toggle {
@@ -46,15 +46,15 @@ export const rowsCss = `/* ─────────────────
  * Cells are fully selectable and copyable; editing is blocked because values are computed.
  */
 .pg-row--group-footer {
-  background: var(--pg-colors-group-footer-background, #eef2fa);
+  background: var(--pg-colors-group-footer-background, var(--pg-colors-background-alt, #eef2fa));
   font-style: italic;
   font-weight: var(--pg-typography-font-weight-semi-bold, 600);
-  border-bottom: 2px solid var(--pg-colors-primary-light, #bfdbfe);
+  border-bottom: 2px solid var(--pg-colors-primary-light, var(--pg-colors-border-strong, #bfdbfe));
   cursor: default;
 }
 .pg-row--group-footer:hover,
 .pg-row--group-footer.pg-row--hover {
-  background: var(--pg-colors-group-footer-hover, #e0e9f8) !important;
+  background: var(--pg-colors-group-footer-hover, var(--pg-colors-row-hover, #e0e9f8)) !important;
 }
 /* Level-based indentation mirrors the group header rules */
 .pg-row--group-footer[data-level="0"] .pg-row-group__cell { padding-left: var(--pg-group-indent-0, 8px); }
@@ -66,18 +66,6 @@ export const rowsCss = `/* ─────────────────
 .pg-row--group-footer .pg-row-group__label {
   color: var(--pg-colors-text-secondary, #475569);
 }
-/* Dark-mode overrides */
-.pg-grid[data-theme="dark"] .pg-row--group-footer {
-  background: var(--pg-colors-group-footer-background, rgba(37, 99, 235, 0.06));
-  border-bottom-color: rgba(96, 165, 250, 0.28);
-}
-.pg-grid[data-theme="dark"] .pg-row--group-footer:hover,
-.pg-grid[data-theme="dark"] .pg-row--group-footer.pg-row--hover {
-  background: var(--pg-colors-group-footer-hover, rgba(37, 99, 235, 0.11)) !important;
-}
-.pg-grid[data-theme="dark"] .pg-row--group-footer .pg-row-group__label {
-  color: var(--pg-colors-text-secondary, #94a3b8);
-}
 
 `;
 //# sourceMappingURL=rows.css.js.map

package/styles/base/rows.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"rows.css.js","sourceRoot":"","sources":["../../../src/styles/base/rows.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EtB,CAAC"}
+{"version":3,"file":"rows.css.js","sourceRoot":"","sources":["../../../src/styles/base/rows.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DtB,CAAC"}

package/styles/base/scrollbars.css.d.ts

@@ -5,5 +5,5 @@
  * base-styles.ts; edit here, not there. Order is preserved because CSS
  * cascade depends on it.
  */
-export declare const scrollbarsCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Scrollbars \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Native vertical scrollbar \u2014 flex item that lives beside the center panel.\n   It is NOT absolutely positioned so it never overlaps cell content; the center\n   panel shrinks to make room for it, keeping every cell border fully visible. */\n.pg-scrollbar-v-native {\n  flex-shrink: 0;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  background: var(--pg-colors-scrollbar-bg, #fff);\n}\n.pg-scrollbar-v-spacer {\n  width: 1px;\n  pointer-events: none;\n}\n/* Horizontal row: sits below the body */\n.pg-scrollbar-h-row {\n  display: flex;\n  flex-direction: row;\n  flex-shrink: 0;\n  border-top: 1px solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-scrollbar-h-spacer { flex-shrink: 0; background: var(--pg-colors-scrollbar-bg, #fff); }\n.pg-scrollbar-h-spacer--left  { width: var(--pg-left-panel-width, 0px); overflow: scroll; }\n.pg-scrollbar-h-spacer--right { width: var(--pg-right-panel-width, 0px); overflow: scroll; }\n/* Aligns the h-scroll track with the narrowed center panel (which is now\n   offset by the vertical scrollbar width captured in --pg-scrollbar-v-width). */\n.pg-scrollbar-h-spacer--vscroll {\n  flex-shrink: 0;\n  width: 0px;\n  background: var(--pg-colors-scrollbar-bg, #fff);\n}\n/* Native horizontal scrollbar container */\n.pg-scrollbar-h-native {\n  flex: 1 1 0;\n  min-width: 0;\n  overflow-x: scroll;\n  overflow-y: hidden;\n  background: var(--pg-colors-scrollbar-bg, #fff);\n}\n.pg-scrollbar-h-content {\n  height: 1px;\n  pointer-events: none;\n}\n/* Hidden state \u2014 applied to wraps */\n.pg-scrollbar--hidden { display: none; }\n\n";
+export declare const scrollbarsCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Scrollbars \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Native vertical scrollbar \u2014 flex item that lives beside the center panel.\n   It is NOT absolutely positioned so it never overlaps cell content; the center\n   panel shrinks to make room for it, keeping every cell border fully visible. */\n.pg-scrollbar-v-native {\n  flex-shrink: 0;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-v-spacer {\n  width: 1px;\n  pointer-events: none;\n}\n/* Horizontal row: sits below the body */\n.pg-scrollbar-h-row {\n  display: flex;\n  flex-direction: row;\n  flex-shrink: 0;\n  border-top: 1px solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-scrollbar-h-spacer { flex-shrink: 0; background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc)); }\n.pg-scrollbar-h-spacer--left  { width: var(--pg-left-panel-width, 0px); overflow: scroll; }\n.pg-scrollbar-h-spacer--right { width: var(--pg-right-panel-width, 0px); overflow: scroll; }\n/* Aligns the h-scroll track with the narrowed center panel: reserves exactly\n   the vertical scrollbar's *current* width (0 when hidden) so the native\n   h-scroll container's client width equals the center viewport \u2014 otherwise the\n   track is wider than the panel and the body scrolls short by the scrollbar\n   width, leaving the last column partly hidden. */\n.pg-scrollbar-h-spacer--vscroll {\n  flex-shrink: 0;\n  width: var(--pg-scrollbar-v-live-width, 0px);\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n/* Native horizontal scrollbar container */\n.pg-scrollbar-h-native {\n  flex: 1 1 0;\n  min-width: 0;\n  overflow-x: scroll;\n  overflow-y: hidden;\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-h-content {\n  height: 1px;\n  pointer-events: none;\n}\n\n/* \u2500\u2500 Themed native scrollbar (track + thumb) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Without these the browser paints its default (light) scrollbar, so dark\n   themes showed white bars. Colours come from theme tokens with light-theme\n   fallbacks, so every theme \u2014 including custom ones \u2014 themes automatically.\n   Firefox uses scrollbar-color; Chromium/Safari use the ::-webkit pseudos. */\n.pg-scrollbar-v-native,\n.pg-scrollbar-h-native,\n.pg-scrollbar-h-spacer--left,\n.pg-scrollbar-h-spacer--right {\n  // scrollbar-width: thin;\n  scrollbar-color: var(--pg-colors-scrollbar-thumb, #ffffff) var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-v-native::-webkit-scrollbar,\n.pg-scrollbar-h-native::-webkit-scrollbar,\n.pg-scrollbar-h-spacer--left::-webkit-scrollbar,\n.pg-scrollbar-h-spacer--right::-webkit-scrollbar {\n  // width: var(--pg-scrollbar-v-width, 12px);\n  // height: var(--pg-scrollbar-h-height, 12px);\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-v-native::-webkit-scrollbar-track,\n.pg-scrollbar-h-native::-webkit-scrollbar-track,\n.pg-scrollbar-h-spacer--left::-webkit-scrollbar-track,\n.pg-scrollbar-h-spacer--right::-webkit-scrollbar-track {\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-v-native::-webkit-scrollbar-thumb,\n.pg-scrollbar-h-native::-webkit-scrollbar-thumb,\n.pg-scrollbar-h-spacer--left::-webkit-scrollbar-thumb,\n.pg-scrollbar-h-spacer--right::-webkit-scrollbar-thumb {\n  background: var(--pg-colors-scrollbar-thumb, #cbd5e1);\n  // border-radius: 8px;\n  // border: 3px solid var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n.pg-scrollbar-v-native::-webkit-scrollbar-thumb:hover,\n.pg-scrollbar-h-native::-webkit-scrollbar-thumb:hover,\n.pg-scrollbar-h-spacer--left::-webkit-scrollbar-thumb:hover,\n.pg-scrollbar-h-spacer--right::-webkit-scrollbar-thumb:hover {\n  background: var(--pg-colors-scrollbar-thumb-hover, #94a3b8);\n}\n.pg-scrollbar-v-native::-webkit-scrollbar-corner,\n.pg-scrollbar-h-native::-webkit-scrollbar-corner {\n  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));\n}\n\n/* Hidden state \u2014 applied to wraps */\n.pg-scrollbar--hidden { display: none; }\n\n";
 //# sourceMappingURL=scrollbars.css.d.ts.map

package/styles/base/scrollbars.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbars.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/scrollbars.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,qzDA+CzB,CAAC"}
+{"version":3,"file":"scrollbars.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/scrollbars.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,ulJAgGzB,CAAC"}

package/styles/base/scrollbars.css.js

@@ -14,7 +14,7 @@ export const scrollbarsCss = `/* ───────────────
   flex-shrink: 0;
   overflow-y: scroll;
   overflow-x: hidden;
-  background: var(--pg-colors-scrollbar-bg, #fff);
+  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));
 }
 .pg-scrollbar-v-spacer {
   width: 1px;
@@ -27,15 +27,18 @@ export const scrollbarsCss = `/* ───────────────
   flex-shrink: 0;
   border-top: 1px solid var(--pg-colors-border, #e2e8f0);
 }
-.pg-scrollbar-h-spacer { flex-shrink: 0; background: var(--pg-colors-scrollbar-bg, #fff); }
+.pg-scrollbar-h-spacer { flex-shrink: 0; background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc)); }
 .pg-scrollbar-h-spacer--left  { width: var(--pg-left-panel-width, 0px); overflow: scroll; }
 .pg-scrollbar-h-spacer--right { width: var(--pg-right-panel-width, 0px); overflow: scroll; }
-/* Aligns the h-scroll track with the narrowed center panel (which is now
-   offset by the vertical scrollbar width captured in --pg-scrollbar-v-width). */
+/* Aligns the h-scroll track with the narrowed center panel: reserves exactly
+   the vertical scrollbar's *current* width (0 when hidden) so the native
+   h-scroll container's client width equals the center viewport — otherwise the
+   track is wider than the panel and the body scrolls short by the scrollbar
+   width, leaving the last column partly hidden. */
 .pg-scrollbar-h-spacer--vscroll {
   flex-shrink: 0;
-  width: 0px;
-  background: var(--pg-colors-scrollbar-bg, #fff);
+  width: var(--pg-scrollbar-v-live-width, 0px);
+  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));
 }
 /* Native horizontal scrollbar container */
 .pg-scrollbar-h-native {
@@ -43,12 +46,58 @@ export const scrollbarsCss = `/* ───────────────
   min-width: 0;
   overflow-x: scroll;
   overflow-y: hidden;
-  background: var(--pg-colors-scrollbar-bg, #fff);
+  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));
 }
 .pg-scrollbar-h-content {
   height: 1px;
   pointer-events: none;
 }
+
+/* ── Themed native scrollbar (track + thumb) ──────────────────────────────────
+   Without these the browser paints its default (light) scrollbar, so dark
+   themes showed white bars. Colours come from theme tokens with light-theme
+   fallbacks, so every theme — including custom ones — themes automatically.
+   Firefox uses scrollbar-color; Chromium/Safari use the ::-webkit pseudos. */
+.pg-scrollbar-v-native,
+.pg-scrollbar-h-native,
+.pg-scrollbar-h-spacer--left,
+.pg-scrollbar-h-spacer--right {
+  // scrollbar-width: thin;
+  scrollbar-color: var(--pg-colors-scrollbar-thumb, #ffffff) var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));
+}
+.pg-scrollbar-v-native::-webkit-scrollbar,
+.pg-scrollbar-h-native::-webkit-scrollbar,
+.pg-scrollbar-h-spacer--left::-webkit-scrollbar,
+.pg-scrollbar-h-spacer--right::-webkit-scrollbar {
+  // width: var(--pg-scrollbar-v-width, 12px);
+  // height: var(--pg-scrollbar-h-height, 12px);
+  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));
+}
+.pg-scrollbar-v-native::-webkit-scrollbar-track,
+.pg-scrollbar-h-native::-webkit-scrollbar-track,
+.pg-scrollbar-h-spacer--left::-webkit-scrollbar-track,
+.pg-scrollbar-h-spacer--right::-webkit-scrollbar-track {
+  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));
+}
+.pg-scrollbar-v-native::-webkit-scrollbar-thumb,
+.pg-scrollbar-h-native::-webkit-scrollbar-thumb,
+.pg-scrollbar-h-spacer--left::-webkit-scrollbar-thumb,
+.pg-scrollbar-h-spacer--right::-webkit-scrollbar-thumb {
+  background: var(--pg-colors-scrollbar-thumb, #cbd5e1);
+  // border-radius: 8px;
+  // border: 3px solid var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));
+}
+.pg-scrollbar-v-native::-webkit-scrollbar-thumb:hover,
+.pg-scrollbar-h-native::-webkit-scrollbar-thumb:hover,
+.pg-scrollbar-h-spacer--left::-webkit-scrollbar-thumb:hover,
+.pg-scrollbar-h-spacer--right::-webkit-scrollbar-thumb:hover {
+  background: var(--pg-colors-scrollbar-thumb-hover, #94a3b8);
+}
+.pg-scrollbar-v-native::-webkit-scrollbar-corner,
+.pg-scrollbar-h-native::-webkit-scrollbar-corner {
+  background: var(--pg-colors-scrollbar-track, var(--pg-colors-scrollbar-bg, #f8fafc));
+}
+
 /* Hidden state — applied to wraps */
 .pg-scrollbar--hidden { display: none; }
 

package/styles/base/scrollbars.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollbars.css.js","sourceRoot":"","sources":["../../../src/styles/base/scrollbars.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+C5B,CAAC"}
+{"version":3,"file":"scrollbars.css.js","sourceRoot":"","sources":["../../../src/styles/base/scrollbars.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgG5B,CAAC"}

package/styles/base/sparkline.css.d.ts

@@ -5,5 +5,5 @@
  * base-styles.ts; edit here, not there. Order is preserved because CSS
  * cascade depends on it.
  */
-export declare const sparklineCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Context menu submenu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-context-menu__item { display: flex; align-items: center; gap: 8px; }\n.pg-context-menu__item--has-sub { position: relative; padding-right: 28px; max-width: stretch; }\n.pg-context-menu__item--has-sub > .pg-context-menu__sub { display: none; }\n.pg-context-menu__item--has-sub:hover > .pg-context-menu__sub { display: block; }\n.pg-context-menu__sub {\n  position: absolute; left: 100%; top: -4px; z-index: 10001;\n  background: var(--pg-colors-surface,#fff);\n  border: 1px solid var(--pg-colors-border,#e2e8f0);\n  border-radius: var(--pg-borders-radius-md,6px);\n  box-shadow: var(--pg-shadows-dropdown,0 8px 24px rgba(0,0,0,0.12));\n  min-width: 175px; padding: 4px;\n  white-space: nowrap;\n}\n.pg-context-menu__item--has-sub::after {\n  content: '\u203A'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);\n  font-size: 16px; color: var(--pg-colors-text-secondary,#64748b); line-height: 1;\n}\n.pg-context-menu__icon {\n  display: inline-flex; align-items: center; width: 16px; flex-shrink: 0;\n  color: var(--pg-colors-text-secondary,#64748b);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Sparkline cell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Cell value wrapper \u2014 fills the inner cell area as a flex row */\n.pg-cell__value--sparkline {\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n/* Wrapper div that stretches canvas to fill the cell */\n.pg-sparkline-wrapper {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n}\n\n/* Canvas element \u2014 fills wrapper, no border or background */\n.pg-sparkline {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  cursor: crosshair;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Sparkline tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Singleton floating tooltip attached to document.body */\n.pg-sparkline-tooltip {\n  position: fixed;\n  z-index: 99999;\n  pointer-events: none;\n  background: var(--pg-colors-surface, #fff);\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-md, 6px);\n  box-shadow: var(--pg-shadows-tooltip, 0 4px 14px rgba(0,0,0,0.12));\n  padding: 6px 10px;\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n  color: var(--pg-colors-text-primary, #0f172a);\n  white-space: nowrap;\n  line-height: 1.5;\n  min-width: 60px;\n}\n.pg-sparkline-tooltip--hidden {\n  display: none;\n}\n\n/* x-axis label row (shown when data is an object array with xKey) */\n.pg-sparkline-tooltip__label {\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  margin-bottom: 2px;\n}\n\n/* Numeric value row */\n.pg-sparkline-tooltip__value {\n  font-weight: 600;\n  color: var(--pg-colors-text-primary, #0f172a);\n}\n\n/* OHLC four-row layout */\n.pg-sparkline-tooltip__ohlc-row {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n}\n.pg-sparkline-tooltip__ohlc-key {\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  min-width: 12px;\n}\n\n";
+export declare const sparklineCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Context menu submenu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-context-menu__item { display: flex; align-items: center; gap: 8px; }\n.pg-context-menu__item--has-sub { position: relative; padding-right: 28px; max-width: stretch; }\n.pg-context-menu__item--has-sub > .pg-context-menu__sub { display: none; }\n.pg-context-menu__item--has-sub:hover > .pg-context-menu__sub { display: block; }\n.pg-context-menu__sub {\n  position: absolute; left: 100%; top: -4px; z-index: 10001;\n  background: var(--pg-colors-surface,#fff);\n  border: 1px solid var(--pg-colors-border,#e2e8f0);\n  border-radius: var(--pg-borders-radius-md,6px);\n  box-shadow: var(--pg-shadows-dropdown,0 8px 24px rgba(0,0,0,0.12));\n  min-width: 175px; padding: 4px;\n  white-space: nowrap;\n}\n/* Viewport-aware flip: when a submenu near the right edge would overflow,\n   JS (positionSubmenu) adds --sub-left so the flyout opens to the left\n   instead. Works at any nesting depth since every wrapper shares the class. */\n.pg-context-menu__item--has-sub.pg-context-menu__item--sub-left > .pg-context-menu__sub {\n  left: auto; right: 100%;\n}\n.pg-context-menu__item--has-sub::after {\n  content: '\u203A'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);\n  font-size: 16px; color: var(--pg-colors-text-secondary,#64748b); line-height: 1;\n}\n.pg-context-menu__icon {\n  display: inline-flex; align-items: center; width: 16px; flex-shrink: 0;\n  color: var(--pg-colors-text-secondary,#64748b);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Sparkline cell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Cell value wrapper \u2014 fills the inner cell area as a flex row */\n.pg-cell__value--sparkline {\n  display: flex;\n  align-items: stretch;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n/* Wrapper div that stretches canvas to fill the cell */\n.pg-sparkline-wrapper {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n}\n\n/* Canvas element \u2014 fills wrapper, no border or background */\n.pg-sparkline {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  cursor: crosshair;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Sparkline tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Singleton floating tooltip attached to document.body */\n.pg-sparkline-tooltip {\n  position: fixed;\n  z-index: 99999;\n  pointer-events: none;\n  background: var(--pg-colors-surface, #fff);\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-md, 6px);\n  box-shadow: var(--pg-shadows-tooltip, 0 4px 14px rgba(0,0,0,0.12));\n  padding: 6px 10px;\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n  color: var(--pg-colors-text-primary, #0f172a);\n  white-space: nowrap;\n  line-height: 1.5;\n  min-width: 60px;\n}\n.pg-sparkline-tooltip--hidden {\n  display: none;\n}\n\n/* x-axis label row (shown when data is an object array with xKey) */\n.pg-sparkline-tooltip__label {\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  margin-bottom: 2px;\n}\n\n/* Numeric value row */\n.pg-sparkline-tooltip__value {\n  font-weight: 600;\n  color: var(--pg-colors-text-primary, #0f172a);\n}\n\n/* OHLC four-row layout */\n.pg-sparkline-tooltip__ohlc-row {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n}\n.pg-sparkline-tooltip__ohlc-key {\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  min-width: 12px;\n}\n\n";
 //# sourceMappingURL=sparkline.css.d.ts.map

package/styles/base/sparkline.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/sparkline.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,6uHAoGxB,CAAC"}
+{"version":3,"file":"sparkline.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/sparkline.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,6kIA0GxB,CAAC"}

package/styles/base/sparkline.css.js

@@ -19,6 +19,12 @@ export const sparklineCss = `/* ────────────────
   min-width: 175px; padding: 4px;
   white-space: nowrap;
 }
+/* Viewport-aware flip: when a submenu near the right edge would overflow,
+   JS (positionSubmenu) adds --sub-left so the flyout opens to the left
+   instead. Works at any nesting depth since every wrapper shares the class. */
+.pg-context-menu__item--has-sub.pg-context-menu__item--sub-left > .pg-context-menu__sub {
+  left: auto; right: 100%;
+}
 .pg-context-menu__item--has-sub::after {
   content: '›'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
   font-size: 16px; color: var(--pg-colors-text-secondary,#64748b); line-height: 1;

package/styles/base/sparkline.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"sparkline.css.js","sourceRoot":"","sources":["../../../src/styles/base/sparkline.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoG3B,CAAC"}
+{"version":3,"file":"sparkline.css.js","sourceRoot":"","sources":["../../../src/styles/base/sparkline.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0G3B,CAAC"}

package/styles/base/tooltip.css.d.ts

@@ -5,5 +5,5 @@
  * base-styles.ts; edit here, not there. Order is preserved because CSS
  * cascade depends on it.
  */
-export declare const tooltipCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Custom cell tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Only mounted/shown for columns with renderer.tooltip \u2014 plain columns keep\n * using the free native title attribute. Positioned via a transform set\n * in JS relative to .pg-grid__body so it never affects grid layout. */\n.pg-tooltip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: var(--pg-z-index-tooltip, 150);\n  max-width: 320px;\n  padding: var(--pg-spacing-xs, 6px) var(--pg-spacing-sm, 10px);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-tooltip-bg, #1f2937);\n  color: var(--pg-colors-tooltip-text, #ffffff);\n  font-family: var(--pg-typography-font-family, sans-serif);\n  font-size: var(--pg-typography-font-size-xs, 12px);\n  line-height: 1.4;\n  box-shadow: var(--pg-shadows-dropdown, 0 4px 12px rgba(0, 0, 0, 0.15));\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n  transition:\n    opacity var(--pg-transitions-duration-fast, 100ms),\n    visibility var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-tooltip--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n";
+export declare const tooltipCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Custom cell tooltip \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Only mounted/shown for columns with renderer.tooltip \u2014 plain columns keep\n * using the free native title attribute. Positioned via a transform set\n * in JS relative to .pg-grid__body so it never affects grid layout. */\n.pg-tooltip {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: var(--pg-z-index-tooltip, 150);\n  max-width: 320px;\n  padding: var(--pg-spacing-xs, 6px) var(--pg-spacing-sm, 10px);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-tooltip-background, #1f2937);\n  color: var(--pg-colors-tooltip-text, #ffffff);\n  font-family: var(--pg-typography-font-family, sans-serif);\n  font-size: var(--pg-typography-font-size-xs, 12px);\n  line-height: 1.4;\n  box-shadow: var(--pg-shadows-dropdown, 0 4px 12px rgba(0, 0, 0, 0.15));\n  pointer-events: none;\n  opacity: 0;\n  visibility: hidden;\n  transition:\n    opacity var(--pg-transitions-duration-fast, 100ms),\n    visibility var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-tooltip--visible {\n  opacity: 1;\n  visibility: visible;\n}\n\n";
 //# sourceMappingURL=tooltip.css.d.ts.map

package/styles/base/tooltip.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,+yCA8BtB,CAAC"}
+{"version":3,"file":"tooltip.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,uzCA8BtB,CAAC"}

package/styles/base/tooltip.css.js

@@ -17,7 +17,7 @@ export const tooltipCss = `/* ────────────────
   max-width: 320px;
   padding: var(--pg-spacing-xs, 6px) var(--pg-spacing-sm, 10px);
   border-radius: var(--pg-borders-radius-sm, 4px);
-  background: var(--pg-colors-tooltip-bg, #1f2937);
+  background: var(--pg-colors-tooltip-background, #1f2937);
   color: var(--pg-colors-tooltip-text, #ffffff);
   font-family: var(--pg-typography-font-family, sans-serif);
   font-size: var(--pg-typography-font-size-xs, 12px);