photon-grid-core 0.0.2 → 1.0.0

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"}

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

@@ -0,0 +1,200 @@
+/**
+ * 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 const photonAiCss = `/* ──────────────────── Photon AI ────────────────────
+   Floating command bar, anchored to the grid body's bottom-right corner.
+   Mounted as a sibling of the pinned-column panels (see PhotonAIPanel.mount /
+   GridRenderer.buildLayout) so it floats independently of virtualization and
+   scroll; the grid body's own overflow: hidden is what keeps it inside the
+   grid container per spec, without this component needing to enforce that
+   itself. */
+.pg-ai-launcher {
+  position: absolute;
+  bottom: 16px;
+  right: 16px;
+  z-index: 201;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: var(--pg-borders-radius-pill, 9999px);
+  background: var(--pg-colors-primary, #2563eb);
+  color: var(--pg-colors-primary-text, #ffffff);
+  box-shadow: var(--pg-shadows-lg, 0 8px 24px rgba(15, 23, 42, 0.16));
+  cursor: pointer;
+  transition:
+    transform var(--pg-transitions-duration-base, 150ms) var(--pg-transitions-easing-base, ease),
+    opacity var(--pg-transitions-duration-base, 150ms) var(--pg-transitions-easing-base, ease),
+    background var(--pg-transitions-duration-fast, 100ms);
+}
+.pg-ai-launcher:hover {
+  background: var(--pg-colors-primary-hover, #1d4ed8);
+  transform: scale(1.06);
+}
+.pg-ai-launcher:active {
+  background: var(--pg-colors-primary-active, #1e40af);
+  transform: scale(0.97);
+}
+.pg-ai-launcher--hidden {
+  opacity: 0;
+  transform: scale(0.7);
+  pointer-events: none;
+}
+
+.pg-ai-panel {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  bottom: 12px;
+  z-index: 201;
+  width: min(360px, calc(100% - 24px));
+  display: none;
+  flex-direction: column;
+  background: var(--pg-colors-surface, #ffffff);
+  border: var(--pg-borders-width-thin, 1px) solid var(--pg-colors-border, #e2e8f0);
+  border-radius: var(--pg-borders-radius-lg, 10px);
+  box-shadow: var(--pg-shadows-dropdown, 0 16px 48px rgba(15, 23, 42, 0.24));
+  font-family: var(--pg-typography-font-family, system-ui, sans-serif);
+  color: var(--pg-colors-text-primary, #0f172a);
+}
+.pg-ai-panel--open {
+  display: flex;
+}
+
+.pg-ai-panel__header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  border-bottom: var(--pg-borders-width-thin, 1px) solid var(--pg-colors-border, #e2e8f0);
+}
+.pg-ai-panel__title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--pg-typography-font-size-sm, 13px);
+  font-weight: var(--pg-typography-font-weight-semi-bold, 600);
+  color: var(--pg-colors-primary, #2563eb);
+}
+.pg-ai-panel__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: var(--pg-borders-radius-sm, 4px);
+  background: transparent;
+  color: var(--pg-colors-text-secondary, #64748b);
+  cursor: pointer;
+  transition: background var(--pg-transitions-duration-fast, 100ms);
+}
+.pg-ai-panel__close:hover {
+  background: var(--pg-colors-background-alt, #f1f5f9);
+}
+
+.pg-ai-panel__log {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px;
+}
+
+.pg-ai-panel__message {
+  max-width: 85%;
+  padding: 8px 12px;
+  border-radius: var(--pg-borders-radius-lg, 10px);
+  font-size: var(--pg-typography-font-size-sm, 13px);
+  line-height: 1.45;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.pg-ai-panel__message--user {
+  align-self: flex-end;
+  background: var(--pg-colors-primary, #2563eb);
+  color: var(--pg-colors-primary-text, #ffffff);
+  border-bottom-right-radius: var(--pg-borders-radius-sm, 4px);
+}
+.pg-ai-panel__message--assistant {
+  align-self: flex-start;
+  background: var(--pg-colors-background-alt, #f1f5f9);
+  color: var(--pg-colors-text-primary, #0f172a);
+  border-bottom-left-radius: var(--pg-borders-radius-sm, 4px);
+}
+.pg-ai-panel__message--assistant.pg-ai-panel__message--error {
+  background: var(--pg-colors-error-subtle, #fef2f2);
+  color: var(--pg-colors-error, #dc2626);
+}
+
+.pg-ai-panel__input-wrap {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  padding: 10px 12px 12px;
+  border-top: var(--pg-borders-width-thin, 1px) solid var(--pg-colors-border, #e2e8f0);
+}
+.pg-ai-panel__input {
+  flex: 1 1 0;
+  width: 100%;
+  min-height: 36px;
+  max-height: 120px;
+  padding: 8px 40px 8px 12px;
+  border: var(--pg-borders-width-thin, 1px) solid var(--pg-colors-border, #e2e8f0);
+  border-radius: var(--pg-borders-radius-md, 6px);
+  background: var(--pg-colors-surface, #ffffff);
+  color: var(--pg-colors-text-primary, #0f172a);
+  font-family: var(--pg-typography-font-family, system-ui, sans-serif);
+  font-size: var(--pg-typography-font-size-sm, 13px);
+  line-height: 1.4;
+  resize: none;
+  outline: none;
+  transition: border-color var(--pg-transitions-duration-fast, 100ms);
+}
+.pg-ai-panel__input::placeholder {
+  color: var(--pg-colors-text-disabled, #94a3b8);
+}
+.pg-ai-panel__input:focus {
+  border-color: var(--pg-colors-border-focus, #2563eb);
+}
+.pg-ai-panel__send {
+  position: absolute;
+  right: 20px;
+  bottom: 17px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  flex-shrink: 0;
+  border: none;
+  border-radius: var(--pg-borders-radius-pill, 9999px);
+  background: var(--pg-colors-primary, #2563eb);
+  color: var(--pg-colors-primary-text, #ffffff);
+  cursor: pointer;
+  transition:
+    background var(--pg-transitions-duration-fast, 100ms),
+    transform var(--pg-transitions-duration-fast, 100ms),
+    opacity var(--pg-transitions-duration-fast, 100ms);
+}
+.pg-ai-panel__send:hover:not(:disabled) {
+  background: var(--pg-colors-primary-hover, #1d4ed8);
+  transform: scale(1.08);
+}
+.pg-ai-panel__send:disabled {
+  background: var(--pg-colors-text-disabled, #94a3b8);
+  opacity: 0.5;
+  cursor: default;
+}
+
+`;
+//# sourceMappingURL=photon-ai.css.js.map

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * Photon Grid base styles — root 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 rootCss = "\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Root \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-grid {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-md, 6px);\n  background: var(--pg-colors-row-background, #fff);\n  color: var(--pg-colors-text-primary, #0f172a);\n  font-family: var(--pg-typography-font-family, \"Inter\", system-ui, sans-serif);\n  font-size: var(--pg-typography-font-size-md, 0.8rem);\n  text-fit: width; \n  font-weight: var(--pg-typography-font-weight-normal, 400);\n  box-sizing: border-box;\n  position: relative;\n  --pg-scroll-x: 0px;\n  --pg-scroll-y: 0px;\n  --pg-content-height: 0px;\n  --pg-center-content-width: 0px;\n  --pg-left-panel-width: auto;\n  --pg-right-panel-width: auto;\n  --pg-header-row-height: 44px;\n  --pg-filter-row-height: 36px;\n}\n.pg-grid *, .pg-grid *::before, .pg-grid *::after { box-sizing: border-box; }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Outer flex-row / main flex-col wrappers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-grid-outer {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  min-height: 0;\n  overflow: hidden;\n}\n.pg-grid-main {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 0;\n  min-height: 0;\n  min-width: 0;\n  overflow: hidden;\n  position: relative;\n}\n\n";
+//# sourceMappingURL=root.css.d.ts.map

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

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

package/styles/base/root.css.js

@@ -0,0 +1,56 @@
+/**
+ * Photon Grid base styles — root 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 rootCss = `
+/* ──────────────────── Root ──────────────────── */
+.pg-grid {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: var(--pg-borders-radius-md, 6px);
+  background: var(--pg-colors-row-background, #fff);
+  color: var(--pg-colors-text-primary, #0f172a);
+  font-family: var(--pg-typography-font-family, "Inter", system-ui, sans-serif);
+  font-size: var(--pg-typography-font-size-md, 0.8rem);
+  text-fit: width; 
+  font-weight: var(--pg-typography-font-weight-normal, 400);
+  box-sizing: border-box;
+  position: relative;
+  --pg-scroll-x: 0px;
+  --pg-scroll-y: 0px;
+  --pg-content-height: 0px;
+  --pg-center-content-width: 0px;
+  --pg-left-panel-width: auto;
+  --pg-right-panel-width: auto;
+  --pg-header-row-height: 44px;
+  --pg-filter-row-height: 36px;
+}
+.pg-grid *, .pg-grid *::before, .pg-grid *::after { box-sizing: border-box; }
+
+/* ──────────────────── Outer flex-row / main flex-col wrappers ──────────────────── */
+.pg-grid-outer {
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.pg-grid-main {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  position: relative;
+}
+
+`;
+//# sourceMappingURL=root.css.js.map

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

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

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

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

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

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