photon-grid-core 0.0.1 → 0.0.3

package/styles/base/scrollbars.css.js

@@ -0,0 +1,56 @@
+/**
+ * Photon Grid base styles — scrollbars section.
+ *
+ * Auto-split from base-styles.ts. Concatenated back (in order) by
+ * base-styles.ts; edit here, not there. Order is preserved because CSS
+ * cascade depends on it.
+ */
+export const scrollbarsCss = `/* ──────────────────── Scrollbars ──────────────────── */
+
+/* Native vertical scrollbar — flex item that lives beside the center panel.
+   It is NOT absolutely positioned so it never overlaps cell content; the center
+   panel shrinks to make room for it, keeping every cell border fully visible. */
+.pg-scrollbar-v-native {
+  flex-shrink: 0;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  background: var(--pg-colors-scrollbar-bg, #fff);
+}
+.pg-scrollbar-v-spacer {
+  width: 1px;
+  pointer-events: none;
+}
+/* Horizontal row: sits below the body */
+.pg-scrollbar-h-row {
+  display: flex;
+  flex-direction: row;
+  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--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). */
+.pg-scrollbar-h-spacer--vscroll {
+  flex-shrink: 0;
+  width: 0px;
+  background: var(--pg-colors-scrollbar-bg, #fff);
+}
+/* Native horizontal scrollbar container */
+.pg-scrollbar-h-native {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  background: var(--pg-colors-scrollbar-bg, #fff);
+}
+.pg-scrollbar-h-content {
+  height: 1px;
+  pointer-events: none;
+}
+/* Hidden state — applied to wraps */
+.pg-scrollbar--hidden { display: none; }
+
+`;
+//# sourceMappingURL=scrollbars.css.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,9 @@
+/**
+ * Photon Grid base styles — sparkline section.
+ *
+ * Auto-split from base-styles.ts. Concatenated back (in order) by
+ * 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";
+//# sourceMappingURL=sparkline.css.d.ts.map

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

@@ -0,0 +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"}

package/styles/base/sparkline.css.js

@@ -0,0 +1,109 @@
+/**
+ * Photon Grid base styles — sparkline section.
+ *
+ * Auto-split from base-styles.ts. Concatenated back (in order) by
+ * base-styles.ts; edit here, not there. Order is preserved because CSS
+ * cascade depends on it.
+ */
+export const sparklineCss = `/* ──────────────────── Context menu submenu ──────────────────── */
+.pg-context-menu__item { display: flex; align-items: center; gap: 8px; }
+.pg-context-menu__item--has-sub { position: relative; padding-right: 28px; max-width: stretch; }
+.pg-context-menu__item--has-sub > .pg-context-menu__sub { display: none; }
+.pg-context-menu__item--has-sub:hover > .pg-context-menu__sub { display: block; }
+.pg-context-menu__sub {
+  position: absolute; left: 100%; top: -4px; z-index: 10001;
+  background: var(--pg-colors-surface,#fff);
+  border: 1px solid var(--pg-colors-border,#e2e8f0);
+  border-radius: var(--pg-borders-radius-md,6px);
+  box-shadow: var(--pg-shadows-dropdown,0 8px 24px rgba(0,0,0,0.12));
+  min-width: 175px; padding: 4px;
+  white-space: nowrap;
+}
+.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;
+}
+.pg-context-menu__icon {
+  display: inline-flex; align-items: center; width: 16px; flex-shrink: 0;
+  color: var(--pg-colors-text-secondary,#64748b);
+}
+
+/* ──────────────────── Sparkline cell ──────────────────── */
+
+/* Cell value wrapper — fills the inner cell area as a flex row */
+.pg-cell__value--sparkline {
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+}
+
+/* Wrapper div that stretches canvas to fill the cell */
+.pg-sparkline-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+}
+
+/* Canvas element — fills wrapper, no border or background */
+.pg-sparkline {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  cursor: crosshair;
+}
+
+/* ──────────────────── Sparkline tooltip ──────────────────── */
+
+/* Singleton floating tooltip attached to document.body */
+.pg-sparkline-tooltip {
+  position: fixed;
+  z-index: 99999;
+  pointer-events: none;
+  background: var(--pg-colors-surface, #fff);
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: var(--pg-borders-radius-md, 6px);
+  box-shadow: var(--pg-shadows-tooltip, 0 4px 14px rgba(0,0,0,0.12));
+  padding: 6px 10px;
+  font-size: var(--pg-typography-font-size-sm, 12px);
+  font-family: var(--pg-typography-font-family, system-ui, sans-serif);
+  color: var(--pg-colors-text-primary, #0f172a);
+  white-space: nowrap;
+  line-height: 1.5;
+  min-width: 60px;
+}
+.pg-sparkline-tooltip--hidden {
+  display: none;
+}
+
+/* x-axis label row (shown when data is an object array with xKey) */
+.pg-sparkline-tooltip__label {
+  color: var(--pg-colors-text-secondary, #64748b);
+  font-size: var(--pg-typography-font-size-xs, 11px);
+  margin-bottom: 2px;
+}
+
+/* Numeric value row */
+.pg-sparkline-tooltip__value {
+  font-weight: 600;
+  color: var(--pg-colors-text-primary, #0f172a);
+}
+
+/* OHLC four-row layout */
+.pg-sparkline-tooltip__ohlc-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+.pg-sparkline-tooltip__ohlc-key {
+  color: var(--pg-colors-text-secondary, #64748b);
+  font-size: var(--pg-typography-font-size-xs, 11px);
+  min-width: 12px;
+}
+
+`;
+//# sourceMappingURL=sparkline.css.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,9 @@
+/**
+ * Photon Grid base styles — tooltip section.
+ *
+ * Auto-split from base-styles.ts. Concatenated back (in order) by
+ * 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";
+//# sourceMappingURL=tooltip.css.d.ts.map

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

@@ -0,0 +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"}

package/styles/base/tooltip.css.js

@@ -0,0 +1,39 @@
+/**
+ * Photon Grid base styles — tooltip section.
+ *
+ * Auto-split from base-styles.ts. Concatenated back (in order) by
+ * base-styles.ts; edit here, not there. Order is preserved because CSS
+ * cascade depends on it.
+ */
+export const tooltipCss = `/* ──────────────────── Custom cell tooltip ────────────────────
+ * Only mounted/shown for columns with renderer.tooltip — plain columns keep
+ * using the free native title attribute. Positioned via a transform set
+ * in JS relative to .pg-grid__body so it never affects grid layout. */
+.pg-tooltip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--pg-z-index-tooltip, 150);
+  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);
+  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);
+  line-height: 1.4;
+  box-shadow: var(--pg-shadows-dropdown, 0 4px 12px rgba(0, 0, 0, 0.15));
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--pg-transitions-duration-fast, 100ms),
+    visibility var(--pg-transitions-duration-fast, 100ms);
+}
+.pg-tooltip--visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+`;
+//# sourceMappingURL=tooltip.css.js.map

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * Photon Grid base styles — tree section.
+ *
+ * Auto-split from base-styles.ts. Concatenated back (in order) by
+ * base-styles.ts; edit here, not there. Order is preserved because CSS
+ * cascade depends on it.
+ */
+export declare const treeCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Tree Data \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   The toggle column's cell gets a marker class ('.pg-cell--tree-toggle-col',\n   applied by applyTreeToggle regardless of whether the row has children \u2014\n   leaves still need to sit indented under their parent), then indentation is\n   purely data-level-driven CSS, the same mechanism '.pg-row--group' already\n   uses (see above) \u2014 no inline styles, no per-instance stylesheet. */\n.pg-cell--tree-toggle-col {\n  display: flex;\n  align-items: center;\n  gap: var(--pg-group-row-gap, 6px);\n  min-width: 0;\n}\n\n.pg-row--tree[data-level=\"0\"] .pg-cell--tree-toggle-col { padding-left: var(--pg-tree-indent-0, 8px); }\n.pg-row--tree[data-level=\"1\"] .pg-cell--tree-toggle-col { padding-left: var(--pg-tree-indent-1, 28px); }\n.pg-row--tree[data-level=\"2\"] .pg-cell--tree-toggle-col { padding-left: var(--pg-tree-indent-2, 48px); }\n.pg-row--tree[data-level=\"3\"] .pg-cell--tree-toggle-col { padding-left: var(--pg-tree-indent-3, 68px); }\n.pg-row--tree[data-level=\"4\"] .pg-cell--tree-toggle-col { padding-left: var(--pg-tree-indent-4, 88px); }\n.pg-row--tree[data-level=\"5\"] .pg-cell--tree-toggle-col { padding-left: var(--pg-tree-indent-5, 108px); }\n.pg-row--tree[data-level=\"6\"] .pg-cell--tree-toggle-col { padding-left: var(--pg-tree-indent-6, 128px); }\n.pg-row--tree[data-level=\"7\"] .pg-cell--tree-toggle-col { padding-left: var(--pg-tree-indent-7, 148px); }\n\n.pg-tree-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--pg-group-toggle-size, 24px);\n  height: var(--pg-group-toggle-size, 24px);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  color: var(--pg-colors-text-secondary, #64748b);\n  cursor: pointer;\n  transition:\n    background var(--pg-transitions-duration-fast, 100ms),\n    color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-tree-toggle:hover {\n  background: var(--pg-colors-row-hover, #f0f7ff);\n  color: var(--pg-colors-text-primary, #1e293b);\n}\n\n/* Reserves the toggle's own footprint on leaf rows (no chevron) so a leaf's\n   content lines up under its parent's content, not under the parent's toggle. */\n.pg-tree-toggle-spacer {\n  display: inline-block;\n  flex-shrink: 0;\n  width: var(--pg-group-toggle-size, 24px);\n  height: var(--pg-group-toggle-size, 24px);\n}\n\n/* A getDataPath filler node \u2014 a synthetic path-prefix row with no real backing record. */\n.pg-row--tree-filler .pg-cell__value {\n  font-style: italic;\n  color: var(--pg-colors-text-secondary, #64748b);\n}\n\n/* Drag-to-reparent drop feedback (3-way before/inside/after \u2014 see RowDragRenderer.setTreeMode) */\n.pg-row--drop-target.pg-row--drop-inside {\n  background: var(--pg-colors-selection-background, rgba(37, 99, 235, 0.1));\n  outline: 2px dashed var(--pg-colors-primary, #2563eb);\n  outline-offset: -2px;\n}\n.pg-row--drop-target.pg-row--drop-before {\n  box-shadow: inset 0 2px 0 0 var(--pg-colors-primary, #2563eb);\n}\n.pg-row--drop-target.pg-row--drop-after {\n  box-shadow: inset 0 -2px 0 0 var(--pg-colors-primary, #2563eb);\n}\n\n";
+//# sourceMappingURL=tree.css.d.ts.map

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

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

package/styles/base/tree.css.js

@@ -0,0 +1,78 @@
+/**
+ * Photon Grid base styles — tree section.
+ *
+ * Auto-split from base-styles.ts. Concatenated back (in order) by
+ * base-styles.ts; edit here, not there. Order is preserved because CSS
+ * cascade depends on it.
+ */
+export const treeCss = `/* ──────────────────── Tree Data ────────────────────
+   The toggle column's cell gets a marker class ('.pg-cell--tree-toggle-col',
+   applied by applyTreeToggle regardless of whether the row has children —
+   leaves still need to sit indented under their parent), then indentation is
+   purely data-level-driven CSS, the same mechanism '.pg-row--group' already
+   uses (see above) — no inline styles, no per-instance stylesheet. */
+.pg-cell--tree-toggle-col {
+  display: flex;
+  align-items: center;
+  gap: var(--pg-group-row-gap, 6px);
+  min-width: 0;
+}
+
+.pg-row--tree[data-level="0"] .pg-cell--tree-toggle-col { padding-left: var(--pg-tree-indent-0, 8px); }
+.pg-row--tree[data-level="1"] .pg-cell--tree-toggle-col { padding-left: var(--pg-tree-indent-1, 28px); }
+.pg-row--tree[data-level="2"] .pg-cell--tree-toggle-col { padding-left: var(--pg-tree-indent-2, 48px); }
+.pg-row--tree[data-level="3"] .pg-cell--tree-toggle-col { padding-left: var(--pg-tree-indent-3, 68px); }
+.pg-row--tree[data-level="4"] .pg-cell--tree-toggle-col { padding-left: var(--pg-tree-indent-4, 88px); }
+.pg-row--tree[data-level="5"] .pg-cell--tree-toggle-col { padding-left: var(--pg-tree-indent-5, 108px); }
+.pg-row--tree[data-level="6"] .pg-cell--tree-toggle-col { padding-left: var(--pg-tree-indent-6, 128px); }
+.pg-row--tree[data-level="7"] .pg-cell--tree-toggle-col { padding-left: var(--pg-tree-indent-7, 148px); }
+
+.pg-tree-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--pg-group-toggle-size, 24px);
+  height: var(--pg-group-toggle-size, 24px);
+  border-radius: var(--pg-borders-radius-sm, 4px);
+  color: var(--pg-colors-text-secondary, #64748b);
+  cursor: pointer;
+  transition:
+    background var(--pg-transitions-duration-fast, 100ms),
+    color var(--pg-transitions-duration-fast, 100ms);
+}
+.pg-tree-toggle:hover {
+  background: var(--pg-colors-row-hover, #f0f7ff);
+  color: var(--pg-colors-text-primary, #1e293b);
+}
+
+/* Reserves the toggle's own footprint on leaf rows (no chevron) so a leaf's
+   content lines up under its parent's content, not under the parent's toggle. */
+.pg-tree-toggle-spacer {
+  display: inline-block;
+  flex-shrink: 0;
+  width: var(--pg-group-toggle-size, 24px);
+  height: var(--pg-group-toggle-size, 24px);
+}
+
+/* A getDataPath filler node — a synthetic path-prefix row with no real backing record. */
+.pg-row--tree-filler .pg-cell__value {
+  font-style: italic;
+  color: var(--pg-colors-text-secondary, #64748b);
+}
+
+/* Drag-to-reparent drop feedback (3-way before/inside/after — see RowDragRenderer.setTreeMode) */
+.pg-row--drop-target.pg-row--drop-inside {
+  background: var(--pg-colors-selection-background, rgba(37, 99, 235, 0.1));
+  outline: 2px dashed var(--pg-colors-primary, #2563eb);
+  outline-offset: -2px;
+}
+.pg-row--drop-target.pg-row--drop-before {
+  box-shadow: inset 0 2px 0 0 var(--pg-colors-primary, #2563eb);
+}
+.pg-row--drop-target.pg-row--drop-after {
+  box-shadow: inset 0 -2px 0 0 var(--pg-colors-primary, #2563eb);
+}
+
+`;
+//# sourceMappingURL=tree.css.js.map

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

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

package/styles/base-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-styles.d.ts","sourceRoot":"","sources":["../../src/styles/base-styles.ts"],"names":[],"mappings":"AA89FA,wBAAgB,gBAAgB,IAAI,IAAI,CAMvC;AAED,wBAAgB,gBAAgB,IAAI,IAAI,CAEvC"}
+{"version":3,"file":"base-styles.d.ts","sourceRoot":"","sources":["../../src/styles/base-styles.ts"],"names":[],"mappings":"AAoEA,wBAAgB,gBAAgB,IAAI,IAAI,CAMvC;AAED,wBAAgB,gBAAgB,IAAI,IAAI,CAEvC"}