photon-grid-core 0.0.2 → 0.0.3

package/styles/base/master-detail.css.js

@@ -0,0 +1,202 @@
+/**
+ * Photon Grid base styles — master-detail 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 masterDetailCss = `/* ──────────────────── Master/Detail ────────────────────
+   The detail layer is a sibling of the left/center/right body panels, not a
+   child of any of them — that is what lets a detail row span the full grid
+   width regardless of pinned columns. Its content wrapper receives only the
+   vertical scroll transform (never the horizontal one center columns use),
+   so it structurally cannot shift when the user scrolls horizontally. */
+.pg-detail-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  /* Stops short of the vertical scrollbar's *current* column width (0 when
+     it's hidden) instead of a blanket inset:0 — otherwise an expanded
+     detail row's opaque background paints over the native scrollbar
+     whenever one is showing. See ScrollController.syncScrollbars. */
+  right: var(--pg-scrollbar-v-live-width, 0px);
+  overflow: hidden;
+  pointer-events: none;
+  /* Tied with .pg-panel--left/--right's z-index (2, base-styles.ts ~line
+     335) rather than below it — this layer is a later DOM sibling of the
+     panels (mounted after them in GridRenderer.buildLayout), so an equal
+     z-index still paints on top per normal stacking-order tie-breaking.
+     This is what lets an expanded detail row's opaque background cover the
+     pinned panels' own edge box-shadow instead of that shadow bleeding
+     across the full-width detail content underneath (the panels are
+     full-viewport-height flex items, so their shadow would otherwise span
+     every detail row too, not just their own pinned cells). Sticky Master/
+     Detail rows are unaffected by this ordering — they live in the
+     independent, always-on-top .pg-sticky-layer below, not here. */
+  z-index: 2;
+}
+.pg-detail-layer__content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform: translateY(var(--pg-scroll-y, 0px));
+}
+/* Sticky Master/Detail row layer — a TOP-LEVEL sibling of the left/center/
+   right panels and of .pg-detail-layer (not nested inside any of them).
+   .pg-panel--left/--right set their own explicit z-index for pinned-column
+   elevation, which makes each one its own stacking context — anything
+   nested inside is trapped there and can never out-rank a sibling like
+   .pg-detail-layer merely by having a higher z-index of its own. Living at
+   this same top level lets one z-index correctly out-rank everything, in
+   every pinned/non-pinned column, with no stacking-context surprises.
+   The container itself is pointer-events:none (so empty space with no
+   sticky row never blocks clicks through to what's underneath); the actual
+   row element re-enables pointer-events at the default (auto). */
+.pg-sticky-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: var(--pg-scrollbar-v-live-width, 0px);
+  bottom: 0;
+  pointer-events: none;
+  z-index: 3;
+}
+/* Mirrors .pg-panel--left's own pinned-edge shadow. That shadow lives on the
+   panel container itself, which a stuck row's own background paints over
+   for its own height once moved into this overlay — without repeating it
+   here, the pinned-edge shadow has a visible gap wherever a sticky row
+   currently sits.
+   z-index: 2 (matching .pg-panel--left/--right's own z-index, base-styles.ts
+   ~line 334) is required, not optional — this shadow bleeds *rightward*,
+   into the center region's own horizontal space, and .pg-sticky-layer__center
+   is appended after it in the DOM (see GridRenderer.buildStickyLayer); on
+   equal stacking contexts a later sibling paints over an earlier one, so
+   without an explicit z-index center's own background silently covers the
+   bled-through part of this shadow, while the right shadow (appended last)
+   was never affected — z-index makes both sides correct regardless of
+   append order instead of depending on it. */
+.pg-sticky-layer__left {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: var(--pg-left-panel-width, 0px);
+  overflow: hidden;
+  box-shadow: 2px 0 4px rgba(0,0,0,0.06);
+  z-index: 2;
+}
+.pg-sticky-layer__center {
+  position: absolute;
+  top: 0;
+  left: var(--pg-left-panel-width, 0px);
+  right: var(--pg-right-panel-width, 0px);
+  height: 100%;
+  overflow: hidden;
+  z-index: 1;
+}
+/* Mirrors .pg-panel--center .pg-panel__content's horizontal-scroll transform
+   so a stuck row's center cells track the user's horizontal scroll exactly
+   like the real (non-sticky) center panel does. */
+.pg-sticky-layer__center-inner {
+  position: relative;
+  height: 100%;
+  width: var(--pg-center-content-width, 100%);
+  transform: translateX(var(--pg-scroll-x, 0px));
+}
+/* Mirrors .pg-panel--right's own pinned-edge shadow — see .pg-sticky-layer__left above. */
+.pg-sticky-layer__right {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: var(--pg-right-panel-width, 0px);
+  overflow: hidden;
+  box-shadow: -2px 0 4px rgba(0,0,0,0.06);
+}
+.pg-row--sticky {
+  /* The sticky layer container above is pointer-events:none (so empty space
+     with no sticky row never blocks clicks through to whatever's underneath)
+     — pointer-events inherits, so without this the row itself, and every
+     interactive thing inside it (cells, the tree/group toggle, checkboxes),
+     would silently inherit "none" and stop responding to clicks entirely. */
+  pointer-events: auto;
+}
+.pg-row--detail-container {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  pointer-events: auto;
+  padding: 20px;
+  background: var(--pg-colors-surface, #fff);
+  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);
+  opacity: 1;
+  /* Deliberately not tied to the theme's --pg-transitions-duration-* tokens —
+     those are tuned for snappy hover/focus feedback elsewhere; expand/collapse
+     reads better slightly slower and more deliberate. */
+  transition:
+    height 340ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 260ms ease;
+}
+/* Expand: fades in on first mount; height grows for free once RowPositionSheet
+   updates from the initial min/cached height to the auto-measured one. */
+.pg-row--detail-container.pg-row--detail-entering {
+  opacity: 0;
+}
+/* Collapse: DetailRowRenderer.beginCollapse freezes top/height as inline
+   styles first (the RowPositionSheet rule for this row is about to disappear
+   for good), then this class plus height: 0 (set in JS) drives the shrink. */
+.pg-row--detail-container.pg-row--detail-collapsing {
+  opacity: 0;
+  border-bottom-color: transparent;
+}
+.pg-detail-nested-grid-host {
+  width: 100%;
+  height: 100%;
+}
+.pg-detail-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--pg-colors-text-secondary, #64748b);
+}
+.pg-detail-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);
+  margin-left: 8px;
+  margin-right: 4px;
+  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-detail-toggle:hover {
+  background: var(--pg-colors-row-hover, #f0f7ff);
+  color: var(--pg-colors-text-primary, #1e293b);
+}
+.pg-detail-resize-handle {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 6px;
+  cursor: row-resize;
+  background: transparent;
+  transition: background var(--pg-transitions-duration-fast, 100ms);
+}
+.pg-detail-resize-handle:hover {
+  background: var(--pg-colors-resize-handle-color, #e2e8f0);
+}
+
+`;
+//# sourceMappingURL=master-detail.css.js.map

package/styles/base/master-detail.css.js.map

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

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

@@ -0,0 +1,9 @@
+/**
+ * Photon Grid base styles — misc 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 miscCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  background: var(--pg-colors-surface, #fff);\n  z-index: 20;\n}\n.pg-overlay--loading { background: rgba(255,255,255,0.85); }\n.pg-overlay__text { color: var(--pg-colors-text-secondary, #475569); font-size: var(--pg-typography-font-size-md, 13px); }\n.pg-overlay__icon { color: var(--pg-colors-text-disabled, #94a3b8); }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Drag \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-dragging { opacity: 0.5; }\n.pg-drop-before { box-shadow: 0 -2px 0 0 var(--pg-colors-primary, #2563eb); }\n.pg-drop-after  { box-shadow: 0 2px 0 0 var(--pg-colors-primary, #2563eb); }\n.pg-drop-over   { background: var(--pg-colors-drag-over-highlight, rgba(37,99,235,0.06)) !important; }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Fullscreen \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-grid--fullscreen { position: fixed; inset: 0; z-index: 9999; border-radius: 0; }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Chart \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-chart { display: flex; flex-direction: column; gap: 8px; }\n.pg-chart__title { font-size: var(--pg-typography-font-size-lg, 14px); font-weight: var(--pg-typography-font-weight-semi-bold, 600); color: var(--pg-colors-text-primary); padding: 4px 0; }\n.pg-chart__canvas { display: block; max-width: 100%; }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Icon \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }\n.pg-icon svg { display: block; }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Auto Row Height \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-grid--auto-row-height .pg-row {\n  height: auto;\n}\n.pg-grid--auto-row-height .pg-cell {\n  overflow: visible;\n}\n.pg-grid--auto-row-height .pg-cell__inner {\n  height: auto;\n  overflow: visible;\n  align-items: flex-start;\n  padding-top: 10px;\n  padding-bottom: 10px;\n}\n.pg-grid--auto-row-height .pg-cell__value {\n  white-space: normal;\n  overflow: visible;\n  text-overflow: initial;\n  overflow-wrap: break-word;\n  word-break: break-word;\n}\n\n";
+//# sourceMappingURL=misc.css.d.ts.map

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

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

package/styles/base/misc.css.js

@@ -0,0 +1,65 @@
+/**
+ * Photon Grid base styles — misc 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 miscCss = `/* ──────────────────── Overlay ──────────────────── */
+.pg-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  background: var(--pg-colors-surface, #fff);
+  z-index: 20;
+}
+.pg-overlay--loading { background: rgba(255,255,255,0.85); }
+.pg-overlay__text { color: var(--pg-colors-text-secondary, #475569); font-size: var(--pg-typography-font-size-md, 13px); }
+.pg-overlay__icon { color: var(--pg-colors-text-disabled, #94a3b8); }
+
+/* ──────────────────── Drag ──────────────────── */
+.pg-dragging { opacity: 0.5; }
+.pg-drop-before { box-shadow: 0 -2px 0 0 var(--pg-colors-primary, #2563eb); }
+.pg-drop-after  { box-shadow: 0 2px 0 0 var(--pg-colors-primary, #2563eb); }
+.pg-drop-over   { background: var(--pg-colors-drag-over-highlight, rgba(37,99,235,0.06)) !important; }
+
+/* ──────────────────── Fullscreen ──────────────────── */
+.pg-grid--fullscreen { position: fixed; inset: 0; z-index: 9999; border-radius: 0; }
+
+/* ──────────────────── Chart ──────────────────── */
+.pg-chart { display: flex; flex-direction: column; gap: 8px; }
+.pg-chart__title { font-size: var(--pg-typography-font-size-lg, 14px); font-weight: var(--pg-typography-font-weight-semi-bold, 600); color: var(--pg-colors-text-primary); padding: 4px 0; }
+.pg-chart__canvas { display: block; max-width: 100%; }
+
+/* ──────────────────── Icon ──────────────────── */
+.pg-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
+.pg-icon svg { display: block; }
+
+/* ──────────────────── Auto Row Height ──────────────────── */
+.pg-grid--auto-row-height .pg-row {
+  height: auto;
+}
+.pg-grid--auto-row-height .pg-cell {
+  overflow: visible;
+}
+.pg-grid--auto-row-height .pg-cell__inner {
+  height: auto;
+  overflow: visible;
+  align-items: flex-start;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.pg-grid--auto-row-height .pg-cell__value {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: initial;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+`;
+//# sourceMappingURL=misc.css.js.map

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * Photon Grid base styles — panels 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 panelsCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Three-panel header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-grid__header {\n  display: flex;\n  flex-direction: row;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--pg-colors-header-border, #e2e8f0);\n  background: var(--pg-colors-header-background, #f8fafc);\n  overflow: hidden;\n  z-index: 10;\n  position: relative;\n}\n/* Mirrors the vertical-scrollbar flex item that lives in the body row so that\n   the center header panel is exactly as wide as the center body panel.\n   Without this spacer the header center is scrollbar_width wider and the right\n   pinned-column header is shifted right relative to the body cells.\n   Uses the *live* scrollbar width (--pg-scrollbar-v-live-width: 0 when the body\n   has no scrollbar showing, the real width when it does \u2014 kept in sync every\n   scroll/resize by ScrollController.syncScrollbars) rather than the constant\n   --pg-scrollbar-v-width, so header\u2194body alignment stays exact whether or not a\n   vertical scrollbar is currently present. */\n.pg-header-vscroll-spacer {\n  flex-shrink: 0;\n  width: var(--pg-scrollbar-v-live-width, 0px);\n  background: var(--pg-colors-header-background, #f8fafc);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Three-panel body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-grid__body {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n  transform: translateZ(10px)\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Panel base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-panel {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  flex-shrink: 0;\n  position: relative;\n}\n.pg-panel--left {\n  z-index: 2;\n  width: var(--pg-left-panel-width, auto);\n}\n.pg-panel--center {\n  flex: 1 1 0;\n  min-width: 0;\n  overflow: hidden;\n}\n.pg-panel--right {\n  z-index: 2;\n  width: var(--pg-right-panel-width, auto);\n  padding-inline: 1px\n}\n/* \u2500\u2500 Pinned-region divider \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Structural boundary between a frozen (pinned) column region and the\n   scrollable center. Deliberately independent of showVerticalBorders (which\n   only governs interior column grid-lines) \u2014 the frozen edge must stay visible\n   even when interior lines are off, otherwise pinned columns visually merge\n   into the scrolling area.\n   Implemented as an absolutely-positioned 1px overlay (::after) rather than a\n   real border or an inset shadow:\n     \u2022 a real border would consume 1px of the border-box width and clip the\n       last pinned column;\n     \u2022 an inset box-shadow paints behind the panel's descendant rows, whose\n       opaque backgrounds (--pg-colors-row-background) would hide it.\n   The overlay adds no layout box (zero reflow, no width shift) and paints above\n   the rows. It only renders while the panel is displayed, i.e. that side\n   actually has pinned columns (empty panels are display:none). */\n.pg-panel--left::after,\n.pg-panel--right::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 1px;\n  background: var(--pg-colors-pinned-border, var(--pg-colors-border, #e2e8f0));\n  z-index: 4;\n  pointer-events: none;\n}\n.pg-panel--left::after  { right: 0; }\n.pg-panel--right::after { left: 0; }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Panel header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-panel__header {\n  flex-shrink: 0;\n  overflow: hidden;\n  position: relative;\n  z-index: 2;\n}\n/* Center panel header sits behind pinned-panel headers so that center\n   content translated by the scroll transform cannot visually overlap the\n   left / right pinned column headers when scrolled near their edges. */\n.pg-panel--center .pg-panel__header {\n  z-index: 1;\n}\n.pg-panel__header-inner {\n  display: flex;\n  flex-direction: column;\n}\n.pg-panel--center .pg-panel__header-inner {\n  transform: translateX(var(--pg-scroll-x, 0px));\n  width: var(--pg-center-content-width, 100%);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Panel body \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-panel__body {\n  flex: 1 1 0;\n  min-height: 0;\n  overflow: hidden;\n  position: relative;\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Panel content (virtual scroll) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-panel__content {\n  position: relative;\n  height: var(--pg-content-height, 0px);\n  will-change: transform;\n}\n.pg-panel--left .pg-panel__content,\n.pg-panel--right .pg-panel__content {\n  transform: translateY(var(--pg-scroll-y, 0px));\n}\n.pg-panel--center .pg-panel__content {\n  transform: translate(var(--pg-scroll-x, 0px), var(--pg-scroll-y, 0px));\n  width: var(--pg-center-content-width, 100%);\n}\n/* Master/Detail only (see GridRenderer's pg-grid--has-master-detail class):\n   a BODY panel (left/center/right \u2014 scoped via .pg-grid__body so the\n   *header* panels, which share the same .pg-panel classes, are untouched\n   and stay fully interactive for sort/resize/filter) is a full-height block\n   regardless of whether it has a row at a given Y \u2014 including the Y range\n   where the full-width detail/nested grid layer shows through underneath.\n   Without this, empty panel space (there is no row there \u2014 a detail row\n   renders nothing in these panels by design) still geometrically blocks\n   clicks meant for whatever is showing through from that layer.\n   pointer-events is inherited, so every actual row must explicitly opt\n   back in \u2014 scoped to Master/Detail grids only, this has no effect on the\n   vast majority of grids that never use it. */\n.pg-grid--has-master-detail .pg-grid__body > .pg-panel,\n.pg-grid--has-master-detail .pg-panel__body,\n.pg-grid--has-master-detail .pg-panel__content {\n  pointer-events: none;\n}\n.pg-grid--has-master-detail .pg-row {\n  pointer-events: auto;\n}\n\n";
+//# sourceMappingURL=panels.css.d.ts.map

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

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

package/styles/base/panels.css.js

@@ -0,0 +1,162 @@
+/**
+ * Photon Grid base styles — panels 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 panelsCss = `/* ──────────────────── Three-panel header ──────────────────── */
+.pg-grid__header {
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--pg-colors-header-border, #e2e8f0);
+  background: var(--pg-colors-header-background, #f8fafc);
+  overflow: hidden;
+  z-index: 10;
+  position: relative;
+}
+/* Mirrors the vertical-scrollbar flex item that lives in the body row so that
+   the center header panel is exactly as wide as the center body panel.
+   Without this spacer the header center is scrollbar_width wider and the right
+   pinned-column header is shifted right relative to the body cells.
+   Uses the *live* scrollbar width (--pg-scrollbar-v-live-width: 0 when the body
+   has no scrollbar showing, the real width when it does — kept in sync every
+   scroll/resize by ScrollController.syncScrollbars) rather than the constant
+   --pg-scrollbar-v-width, so header↔body alignment stays exact whether or not a
+   vertical scrollbar is currently present. */
+.pg-header-vscroll-spacer {
+  flex-shrink: 0;
+  width: var(--pg-scrollbar-v-live-width, 0px);
+  background: var(--pg-colors-header-background, #f8fafc);
+}
+
+/* ──────────────────── Three-panel body ──────────────────── */
+.pg-grid__body {
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+  transform: translateZ(10px)
+}
+
+/* ──────────────────── Panel base ──────────────────── */
+.pg-panel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  flex-shrink: 0;
+  position: relative;
+}
+.pg-panel--left {
+  z-index: 2;
+  width: var(--pg-left-panel-width, auto);
+}
+.pg-panel--center {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+}
+.pg-panel--right {
+  z-index: 2;
+  width: var(--pg-right-panel-width, auto);
+  padding-inline: 1px
+}
+/* ── Pinned-region divider ──────────────────────────────────────────────
+   Structural boundary between a frozen (pinned) column region and the
+   scrollable center. Deliberately independent of showVerticalBorders (which
+   only governs interior column grid-lines) — the frozen edge must stay visible
+   even when interior lines are off, otherwise pinned columns visually merge
+   into the scrolling area.
+   Implemented as an absolutely-positioned 1px overlay (::after) rather than a
+   real border or an inset shadow:
+     • a real border would consume 1px of the border-box width and clip the
+       last pinned column;
+     • an inset box-shadow paints behind the panel's descendant rows, whose
+       opaque backgrounds (--pg-colors-row-background) would hide it.
+   The overlay adds no layout box (zero reflow, no width shift) and paints above
+   the rows. It only renders while the panel is displayed, i.e. that side
+   actually has pinned columns (empty panels are display:none). */
+.pg-panel--left::after,
+.pg-panel--right::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: var(--pg-colors-pinned-border, var(--pg-colors-border, #e2e8f0));
+  z-index: 4;
+  pointer-events: none;
+}
+.pg-panel--left::after  { right: 0; }
+.pg-panel--right::after { left: 0; }
+
+/* ──────────────────── Panel header ──────────────────── */
+.pg-panel__header {
+  flex-shrink: 0;
+  overflow: hidden;
+  position: relative;
+  z-index: 2;
+}
+/* Center panel header sits behind pinned-panel headers so that center
+   content translated by the scroll transform cannot visually overlap the
+   left / right pinned column headers when scrolled near their edges. */
+.pg-panel--center .pg-panel__header {
+  z-index: 1;
+}
+.pg-panel__header-inner {
+  display: flex;
+  flex-direction: column;
+}
+.pg-panel--center .pg-panel__header-inner {
+  transform: translateX(var(--pg-scroll-x, 0px));
+  width: var(--pg-center-content-width, 100%);
+}
+
+/* ──────────────────── Panel body ──────────────────── */
+.pg-panel__body {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+/* ──────────────────── Panel content (virtual scroll) ──────────────────── */
+.pg-panel__content {
+  position: relative;
+  height: var(--pg-content-height, 0px);
+  will-change: transform;
+}
+.pg-panel--left .pg-panel__content,
+.pg-panel--right .pg-panel__content {
+  transform: translateY(var(--pg-scroll-y, 0px));
+}
+.pg-panel--center .pg-panel__content {
+  transform: translate(var(--pg-scroll-x, 0px), var(--pg-scroll-y, 0px));
+  width: var(--pg-center-content-width, 100%);
+}
+/* Master/Detail only (see GridRenderer's pg-grid--has-master-detail class):
+   a BODY panel (left/center/right — scoped via .pg-grid__body so the
+   *header* panels, which share the same .pg-panel classes, are untouched
+   and stay fully interactive for sort/resize/filter) is a full-height block
+   regardless of whether it has a row at a given Y — including the Y range
+   where the full-width detail/nested grid layer shows through underneath.
+   Without this, empty panel space (there is no row there — a detail row
+   renders nothing in these panels by design) still geometrically blocks
+   clicks meant for whatever is showing through from that layer.
+   pointer-events is inherited, so every actual row must explicitly opt
+   back in — scoped to Master/Detail grids only, this has no effect on the
+   vast majority of grids that never use it. */
+.pg-grid--has-master-detail .pg-grid__body > .pg-panel,
+.pg-grid--has-master-detail .pg-panel__body,
+.pg-grid--has-master-detail .pg-panel__content {
+  pointer-events: none;
+}
+.pg-grid--has-master-detail .pg-row {
+  pointer-events: auto;
+}
+
+`;
+//# sourceMappingURL=panels.css.js.map

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * Photon Grid base styles — photon-ai 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 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";
+//# sourceMappingURL=photon-ai.css.d.ts.map

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

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