photon-grid-core 0.0.2 → 1.0.0

package/styles/base/cells.css.js

@@ -0,0 +1,233 @@
+/**
+ * Photon Grid base styles — cells 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 cellsCss = `/* ──────────────────── Cells ──────────────────── */
+.pg-cell {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  min-width: var(--pg-sizing-column-min-width, 40px);
+  border-right: 1px solid transparent;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+}
+.pg-cell--v-border { border-right-color: var(--pg-colors-border, #e2e8f0); }
+.pg-cell:last-child { border-right: none; }
+.pg-cell--align-right  { justify-content: flex-end;  }
+.pg-cell--align-center { justify-content: center; }
+.pg-cell--align-right  .pg-cell__inner { text-align: right; }
+.pg-cell--align-center .pg-cell__inner { text-align: center; }
+
+/* ─── Cell selection (CSS-based, replaces canvas) ─── */
+/* Suppress the browser's native focus ring — the grid uses its own blue
+   box-shadow indicator on .pg-cell--active-cell instead. */
+.pg-cell { user-select: none; outline: none; }
+
+/*
+ * Range selection — edge borders drawn via ::after so CSS border corners
+ * always connect cleanly (no box-shadow joining artefacts).
+ * The JS engine adds sel-top/right/bottom/left only on cells that sit on
+ * the outer edge of the range; interior cells carry no edge classes.
+ */
+.pg-cell--in-selection {
+  background-color: var(--pg-colors-selection-background, aliceblue) !important;
+  position: relative;
+  z-index: 1;
+}
+.pg-cell--in-selection::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 0 solid var(--pg-colors-primary, #2563eb);
+  pointer-events: none;
+}
+.pg-cell--sel-top::after    { border-top-width:    1px; }
+.pg-cell--sel-bottom::after { border-bottom-width: 1px; }
+.pg-cell--sel-left::after   { border-left-width:   1px; }
+.pg-cell--sel-right::after  { border-right-width:  1px; }
+
+/* Active (focused) cell — solid 2px inset border, no background */
+.pg-cell--active-cell {
+  background-color: transparent !important;
+  box-shadow: inset 0 0 0 2px var(--pg-colors-primary, #2563eb) !important;
+  position: relative;
+  z-index: 2;
+  outline: none;
+}
+/* Suppress the ::after edge overlay only when the active cell is NOT inside a selection */
+.pg-cell--active-cell:not(.pg-cell--in-selection)::after { content: none; }
+
+/* Active cell inside a range — selection wins entirely: no 2px border, full selection look */
+.pg-cell--in-selection.pg-cell--active-cell {
+  background-color: var(--pg-colors-selection-background, aliceblue) !important;
+  box-shadow: none !important;
+}
+
+/* Dark-mode overrides */
+.pg-grid[data-theme="dark"] .pg-cell--in-selection {
+  background-color: rgba(37,99,235,0.18) !important;
+}
+.pg-grid[data-theme="dark"] .pg-cell--sel-top    { --_t:  2px; }
+.pg-grid[data-theme="dark"] .pg-cell--sel-bottom { --_b: -2px; }
+.pg-grid[data-theme="dark"] .pg-cell--sel-left   { --_l:  2px; }
+.pg-grid[data-theme="dark"] .pg-cell--sel-right  { --_r: -2px; }
+.pg-grid[data-theme="dark"] .pg-cell--active-cell {
+  background-color: rgba(37,99,235,0.25) !important;
+  box-shadow: inset 0 0 0 2px #60a5fa !important;
+}
+.pg-grid[data-theme="dark"] .pg-cell--in-selection.pg-cell--active-cell {
+  background-color: rgba(37,99,235,0.18) !important;
+  box-shadow:
+    inset 0 var(--_t) 0 0 #60a5fa,
+    inset 0 var(--_b) 0 0 #60a5fa,
+    inset var(--_l) 0 0 0 #60a5fa,
+    inset var(--_r) 0 0 0 #60a5fa !important;
+}
+
+/* ─── Group aggregate cells ─── */
+/*
+ * Aggregate values are displayed inside .pg-cell--agg cells that sit directly
+ * under their column headers, aligned with normal data-row cells via the same
+ * [data-col-id] width rules managed by ColumnStyleManager.
+ */
+.pg-cell--agg {
+  color: var(--pg-colors-agg-text, var(--pg-colors-text-secondary, #475569));
+  font-style: italic;
+  font-weight: var(--pg-typography-font-weight-semi-bold, 600);
+}
+.pg-grid[data-theme="dark"] .pg-cell--agg {
+  color: var(--pg-colors-agg-text, var(--pg-colors-text-secondary, #94a3b8));
+}
+
+/* ─── Copy / Cut flash feedback ─── */
+/*
+ * background-color: !important on pg-cell--in-selection blocks keyframe bg changes.
+ * Use a ::after overlay instead — it's a separate layer, no !important conflict.
+ */
+@keyframes pg-copy-flash-overlay {
+  0%   { opacity: 0; }
+  15%  { opacity: 1; }
+  100% { opacity: 0; }
+}
+@keyframes pg-cut-flash-overlay {
+  0%   { opacity: 0; }
+  15%  { opacity: 1; }
+  100% { opacity: 0; }
+}
+/*
+ * Flash overlay uses ::before so it never conflicts with the ::after
+ * pseudo-element that draws the selection edge borders.
+ */
+.pg-cell--copy-flash::before,
+.pg-cell--cut-flash::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 5;
+}
+.pg-cell--copy-flash::before {
+  background: rgba(59, 130, 246, 0.45);
+  animation: pg-copy-flash-overlay 0.75s ease-out forwards;
+}
+.pg-cell--cut-flash::before {
+  background: rgba(239, 68, 68, 0.45);
+  animation: pg-cut-flash-overlay 0.75s ease-out forwards;
+}
+/* Dark mode uses stronger overlay */
+.pg-grid[data-theme="dark"] .pg-cell--copy-flash::before {
+  background: rgba(99, 165, 253, 0.5);
+}
+.pg-grid[data-theme="dark"] .pg-cell--cut-flash::before {
+  background: rgba(252, 100, 100, 0.5);
+}
+
+/* ─── Fill success flash ─── */
+/*
+ * Applied to the newly filled cells after a fill-handle drag completes.
+ * Uses ::before (same as copy/cut flash) so it never conflicts with the
+ * selection edge border drawn on ::after.
+ */
+@keyframes pg-fill-flash-overlay {
+  0%   { opacity: 0; }
+  20%  { opacity: 1; }
+  100% { opacity: 0; }
+}
+.pg-cell--fill-flash::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 5;
+  background: rgba(34, 197, 94, 0.45);
+  animation: pg-fill-flash-overlay 0.75s ease-out forwards;
+}
+.pg-grid[data-theme="dark"] .pg-cell--fill-flash::before {
+  background: rgba(74, 222, 128, 0.5);
+}
+
+/* ─── Fill handle ─── */
+/*
+ * The fill handle is a small drag target at the bottom-right corner of the
+ * primary selection range.  It lives inside the corner cell as an absolutely-
+ * positioned child so it scrolls with the grid naturally.
+ *
+ * pg-cell--has-fill-handle lets the handle extend 4 px past the cell edge
+ * (standard AG Grid behaviour) by lifting overflow:hidden on that one cell.
+ *
+ * Dragging from the handle copies the source range into the dragged area in
+ * one direction at a time; a dashed overlay (pg-cell--fill-preview) previews
+ * the fill area before the mouse button is released.
+ */
+.pg-cell--has-fill-handle {
+  overflow: visible !important;
+}
+.pg-fill-handle {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  width: 6px;
+  height: 6px;
+  box-sizing: border-box;
+  background-color: var(--pg-colors-primary, #2563eb);
+  cursor: crosshair;
+  z-index: 10;
+  pointer-events: auto;
+  user-select: none;
+}
+
+/* ─── Fill preview — dashed border on cells being hovered during fill drag ─── */
+.pg-cell--fill-preview {
+  background-color: var(--pg-colors-selection-background, aliceblue) !important;
+  position: relative;
+  z-index: 1;
+}
+/*
+ * The fill-preview ::after uses a dashed border (vs the solid selection border)
+ * to clearly distinguish "about to be filled" from "already selected."
+ * These classes are orthogonal to sel-top/bottom/left/right — fill-preview
+ * cells are never pg-cell--in-selection, so there is no ::after conflict.
+ */
+.pg-cell--fill-preview::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 0 dashed var(--pg-colors-primary, #2563eb);
+  pointer-events: none;
+}
+.pg-cell--fp-top::after    { border-top-width:    1px; }
+.pg-cell--fp-bottom::after { border-bottom-width: 1px; }
+.pg-cell--fp-left::after   { border-left-width:   1px; }
+.pg-cell--fp-right::after  { border-right-width:  1px; }
+
+.pg-grid[data-theme="dark"] .pg-cell--fill-preview {
+  background-color: rgba(37, 99, 235, 0.12) !important;
+}
+
+`;
+//# sourceMappingURL=cells.css.js.map

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

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

package/styles/base/chart-config.css.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Styles for the chart configuration drawer (Chart / Set Up / Customize tabs).
+ * The drawer is a child of the chart panel body: it is anchored to the right
+ * edge and slides in (right → left) when opened and out (left → right) when
+ * closed via a `transform` transition. All colors, spacing and fonts come from
+ * Photon theme tokens so the drawer matches light / dark / custom themes with no
+ * hardcoded values.
+ */
+export declare const chartConfigCss = "\n.pg-chart-config {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 30;\n  width: 264px;\n  max-width: 85%;\n  display: flex;\n  flex-direction: column;\n  background: var(--pg-colors-surface, #fff);\n  border-left: 1px solid var(--pg-colors-border, #e2e8f0);\n  // box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);\n  font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n  color: var(--pg-colors-text-primary, #0f172a);\n  overflow: hidden;\n  transform: translateX(100%);\n  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);\n  will-change: transform;\n}\n.pg-chart-config--open { transform: translateX(0); }\n@media (prefers-reduced-motion: reduce) {\n  .pg-chart-config { transition: none; }\n}\n.pg-chart-config__header {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 6px 0 6px;\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  flex-shrink: 0;\n}\n.pg-chart-config__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: transparent;\n  color: var(--pg-colors-text-secondary, #64748b);\n  border-radius: 4px;\n  cursor: pointer;\n}\n.pg-chart-config__close:hover {\n  background: var(--pg-colors-background-alt, #f1f5f9);\n  color: var(--pg-colors-text-primary, #0f172a);\n}\n.pg-chart-config__tabs {\n  display: flex;\n  gap: 2px;\n  flex: 1;\n}\n.pg-chart-config__tab {\n  flex: 1;\n  padding: 8px 6px;\n  border: none;\n  background: transparent;\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-size: 12px;\n  font-weight: 500;\n  cursor: pointer;\n  border-bottom: 2px solid transparent;\n  font-family: inherit;\n}\n.pg-chart-config__tab:hover { color: var(--pg-colors-text-primary, #0f172a); }\n.pg-chart-config__tab--active {\n  color: var(--pg-colors-primary, #2563eb);\n  border-bottom-color: var(--pg-colors-primary, #2563eb);\n}\n.pg-chart-config__body {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 10px 12px;\n}\n.pg-chart-config__group-title {\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  color: var(--pg-colors-text-secondary, #64748b);\n  margin: 10px 0 6px;\n}\n.pg-chart-config__gallery {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 6px;\n}\n.pg-chart-config__gallery-item {\n  display: block;\n  height: 58px;\n  padding: 3px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: 6px;\n  background: var(--pg-colors-surface, #fff);\n  cursor: pointer;\n  overflow: hidden;\n  transition: border-color 80ms, background 80ms, box-shadow 80ms;\n}\n.pg-chart-config__gallery-item:hover {\n  border-color: var(--pg-colors-primary, #2563eb);\n  background: var(--pg-colors-background-alt, #f1f5f9);\n}\n.pg-chart-config__gallery-item--active {\n  border-color: var(--pg-colors-primary, #2563eb);\n  background: var(--pg-colors-background-alt, #f1f5f9);\n  box-shadow: 0 0 0 1px var(--pg-colors-primary, #2563eb) inset;\n}\n.pg-chart-config__gallery-canvas {\n  display: block;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n";
+//# sourceMappingURL=chart-config.css.d.ts.map

package/styles/base/chart-config.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-config.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/chart-config.css.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,4mGAoH1B,CAAC"}

package/styles/base/chart-config.css.js

@@ -0,0 +1,126 @@
+/**
+ * Styles for the chart configuration drawer (Chart / Set Up / Customize tabs).
+ * The drawer is a child of the chart panel body: it is anchored to the right
+ * edge and slides in (right → left) when opened and out (left → right) when
+ * closed via a `transform` transition. All colors, spacing and fonts come from
+ * Photon theme tokens so the drawer matches light / dark / custom themes with no
+ * hardcoded values.
+ */
+export const chartConfigCss = `
+.pg-chart-config {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 30;
+  width: 264px;
+  max-width: 85%;
+  display: flex;
+  flex-direction: column;
+  background: var(--pg-colors-surface, #fff);
+  border-left: 1px solid var(--pg-colors-border, #e2e8f0);
+  // box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
+  font-family: var(--pg-typography-font-family, system-ui, sans-serif);
+  color: var(--pg-colors-text-primary, #0f172a);
+  overflow: hidden;
+  transform: translateX(100%);
+  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  will-change: transform;
+}
+.pg-chart-config--open { transform: translateX(0); }
+@media (prefers-reduced-motion: reduce) {
+  .pg-chart-config { transition: none; }
+}
+.pg-chart-config__header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 6px 0 6px;
+  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);
+  flex-shrink: 0;
+}
+.pg-chart-config__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: none;
+  background: transparent;
+  color: var(--pg-colors-text-secondary, #64748b);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.pg-chart-config__close:hover {
+  background: var(--pg-colors-background-alt, #f1f5f9);
+  color: var(--pg-colors-text-primary, #0f172a);
+}
+.pg-chart-config__tabs {
+  display: flex;
+  gap: 2px;
+  flex: 1;
+}
+.pg-chart-config__tab {
+  flex: 1;
+  padding: 8px 6px;
+  border: none;
+  background: transparent;
+  color: var(--pg-colors-text-secondary, #64748b);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  font-family: inherit;
+}
+.pg-chart-config__tab:hover { color: var(--pg-colors-text-primary, #0f172a); }
+.pg-chart-config__tab--active {
+  color: var(--pg-colors-primary, #2563eb);
+  border-bottom-color: var(--pg-colors-primary, #2563eb);
+}
+.pg-chart-config__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 10px 12px;
+}
+.pg-chart-config__group-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--pg-colors-text-secondary, #64748b);
+  margin: 10px 0 6px;
+}
+.pg-chart-config__gallery {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+.pg-chart-config__gallery-item {
+  display: block;
+  height: 58px;
+  padding: 3px;
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: 6px;
+  background: var(--pg-colors-surface, #fff);
+  cursor: pointer;
+  overflow: hidden;
+  transition: border-color 80ms, background 80ms, box-shadow 80ms;
+}
+.pg-chart-config__gallery-item:hover {
+  border-color: var(--pg-colors-primary, #2563eb);
+  background: var(--pg-colors-background-alt, #f1f5f9);
+}
+.pg-chart-config__gallery-item--active {
+  border-color: var(--pg-colors-primary, #2563eb);
+  background: var(--pg-colors-background-alt, #f1f5f9);
+  box-shadow: 0 0 0 1px var(--pg-colors-primary, #2563eb) inset;
+}
+.pg-chart-config__gallery-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+`;
+//# sourceMappingURL=chart-config.css.js.map

package/styles/base/chart-config.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-config.css.js","sourceRoot":"","sources":["../../../src/styles/base/chart-config.css.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoH7B,CAAC"}

package/styles/base/chart-controls.css.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Styles for the reusable chart-config form controls (dropdown, toggle, color,
+ * number/text inputs, segmented buttons, collapsible sections, reorderable
+ * list). Token-driven — no hardcoded colors, spacing or fonts.
+ */
+export declare const chartControlsCss = "\n.pg-chart-ctrl__row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  margin: 8px 0;\n}\n.pg-chart-ctrl__label {\n  font-size: 12px;\n  color: var(--pg-colors-text-secondary, #64748b);\n  flex: 1;\n}\n.pg-chart-ctrl__select,\n.pg-chart-ctrl__input {\n  min-width: 0;\n  max-width: 140px;\n  flex: 1 1 auto;\n  padding: 5px 8px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: 5px;\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text-primary, #0f172a);\n  font-size: 12px;\n  font-family: inherit;\n}\n.pg-chart-ctrl__select:focus,\n.pg-chart-ctrl__input:focus {\n  outline: none;\n  border-color: var(--pg-colors-primary, #2563eb);\n}\n.pg-chart-ctrl__color {\n  width: 34px;\n  height: 24px;\n  padding: 0;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: 5px;\n  background: var(--pg-colors-surface, #fff);\n  cursor: pointer;\n}\n.pg-chart-ctrl__toggle {\n  position: relative;\n  width: 34px;\n  height: 18px;\n  border: none;\n  border-radius: 9px;\n  background: var(--pg-colors-border, #cbd5e1);\n  cursor: pointer;\n  transition: background 120ms;\n  flex: 0 0 auto;\n}\n.pg-chart-ctrl__toggle--on { background: var(--pg-colors-primary, #2563eb); }\n.pg-chart-ctrl__toggle-knob {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: #fff;\n  transition: transform 120ms;\n}\n.pg-chart-ctrl__toggle--on .pg-chart-ctrl__toggle-knob { transform: translateX(16px); }\n.pg-chart-ctrl__segmented {\n  display: inline-flex;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: 5px;\n  overflow: hidden;\n}\n.pg-chart-ctrl__segment {\n  padding: 4px 9px;\n  border: none;\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-size: 11px;\n  cursor: pointer;\n  font-family: inherit;\n}\n.pg-chart-ctrl__segment--active {\n  background: var(--pg-colors-primary, #2563eb);\n  color: #fff;\n}\n.pg-chart-ctrl__section { border-top: 1px solid var(--pg-colors-border, #e2e8f0); }\n.pg-chart-ctrl__section:first-child { border-top: none; }\n.pg-chart-ctrl__section-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 9px 2px;\n  border: none;\n  background: transparent;\n  color: var(--pg-colors-text-primary, #0f172a);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  font-family: inherit;\n}\n.pg-chart-ctrl__section-chevron {\n  display: inline-flex;\n  color: var(--pg-colors-text-secondary, #64748b);\n  transition: transform 120ms;\n  transform: rotate(-90deg);\n}\n.pg-chart-ctrl__section--open .pg-chart-ctrl__section-chevron { transform: rotate(0deg); }\n.pg-chart-ctrl__section-body { display: none; padding: 0 2px 8px; }\n.pg-chart-ctrl__section--open .pg-chart-ctrl__section-body { display: block; }\n.pg-chart-ctrl__list { display: flex; flex-direction: column; gap: 4px; }\n.pg-chart-ctrl__list-item {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 6px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: 5px;\n  background: var(--pg-colors-surface, #fff);\n}\n.pg-chart-ctrl__list-item--dragging { opacity: 0.6; }\n.pg-chart-ctrl__list-handle {\n  display: inline-flex;\n  color: var(--pg-colors-text-secondary, #94a3b8);\n  cursor: grab;\n}\n.pg-chart-ctrl__list-swatch {\n  width: 12px;\n  height: 12px;\n  border-radius: 3px;\n  background: var(--pg-chart-swatch, var(--pg-colors-primary, #2563eb));\n  flex: 0 0 auto;\n}\n.pg-chart-ctrl__list-label {\n  flex: 1;\n  font-size: 12px;\n  color: var(--pg-colors-text-primary, #0f172a);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.pg-chart-ctrl__list-remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  color: var(--pg-colors-text-secondary, #94a3b8);\n  border-radius: 4px;\n  cursor: pointer;\n}\n.pg-chart-ctrl__list-remove:hover {\n  background: var(--pg-colors-background-alt, #f1f5f9);\n  color: var(--pg-colors-danger, #dc2626);\n}\n.pg-chart-panel__dots-item--disabled {\n  opacity: 0.4;\n  pointer-events: none;\n}\n";
+//# sourceMappingURL=chart-controls.css.d.ts.map

package/styles/base/chart-controls.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-controls.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/chart-controls.css.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,+sIA8J5B,CAAC"}

package/styles/base/chart-controls.css.js

@@ -0,0 +1,165 @@
+/**
+ * Styles for the reusable chart-config form controls (dropdown, toggle, color,
+ * number/text inputs, segmented buttons, collapsible sections, reorderable
+ * list). Token-driven — no hardcoded colors, spacing or fonts.
+ */
+export const chartControlsCss = `
+.pg-chart-ctrl__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin: 8px 0;
+}
+.pg-chart-ctrl__label {
+  font-size: 12px;
+  color: var(--pg-colors-text-secondary, #64748b);
+  flex: 1;
+}
+.pg-chart-ctrl__select,
+.pg-chart-ctrl__input {
+  min-width: 0;
+  max-width: 140px;
+  flex: 1 1 auto;
+  padding: 5px 8px;
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: 5px;
+  background: var(--pg-colors-surface, #fff);
+  color: var(--pg-colors-text-primary, #0f172a);
+  font-size: 12px;
+  font-family: inherit;
+}
+.pg-chart-ctrl__select:focus,
+.pg-chart-ctrl__input:focus {
+  outline: none;
+  border-color: var(--pg-colors-primary, #2563eb);
+}
+.pg-chart-ctrl__color {
+  width: 34px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: 5px;
+  background: var(--pg-colors-surface, #fff);
+  cursor: pointer;
+}
+.pg-chart-ctrl__toggle {
+  position: relative;
+  width: 34px;
+  height: 18px;
+  border: none;
+  border-radius: 9px;
+  background: var(--pg-colors-border, #cbd5e1);
+  cursor: pointer;
+  transition: background 120ms;
+  flex: 0 0 auto;
+}
+.pg-chart-ctrl__toggle--on { background: var(--pg-colors-primary, #2563eb); }
+.pg-chart-ctrl__toggle-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #fff;
+  transition: transform 120ms;
+}
+.pg-chart-ctrl__toggle--on .pg-chart-ctrl__toggle-knob { transform: translateX(16px); }
+.pg-chart-ctrl__segmented {
+  display: inline-flex;
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: 5px;
+  overflow: hidden;
+}
+.pg-chart-ctrl__segment {
+  padding: 4px 9px;
+  border: none;
+  background: var(--pg-colors-surface, #fff);
+  color: var(--pg-colors-text-secondary, #64748b);
+  font-size: 11px;
+  cursor: pointer;
+  font-family: inherit;
+}
+.pg-chart-ctrl__segment--active {
+  background: var(--pg-colors-primary, #2563eb);
+  color: #fff;
+}
+.pg-chart-ctrl__section { border-top: 1px solid var(--pg-colors-border, #e2e8f0); }
+.pg-chart-ctrl__section:first-child { border-top: none; }
+.pg-chart-ctrl__section-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 9px 2px;
+  border: none;
+  background: transparent;
+  color: var(--pg-colors-text-primary, #0f172a);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  font-family: inherit;
+}
+.pg-chart-ctrl__section-chevron {
+  display: inline-flex;
+  color: var(--pg-colors-text-secondary, #64748b);
+  transition: transform 120ms;
+  transform: rotate(-90deg);
+}
+.pg-chart-ctrl__section--open .pg-chart-ctrl__section-chevron { transform: rotate(0deg); }
+.pg-chart-ctrl__section-body { display: none; padding: 0 2px 8px; }
+.pg-chart-ctrl__section--open .pg-chart-ctrl__section-body { display: block; }
+.pg-chart-ctrl__list { display: flex; flex-direction: column; gap: 4px; }
+.pg-chart-ctrl__list-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 6px;
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: 5px;
+  background: var(--pg-colors-surface, #fff);
+}
+.pg-chart-ctrl__list-item--dragging { opacity: 0.6; }
+.pg-chart-ctrl__list-handle {
+  display: inline-flex;
+  color: var(--pg-colors-text-secondary, #94a3b8);
+  cursor: grab;
+}
+.pg-chart-ctrl__list-swatch {
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  background: var(--pg-chart-swatch, var(--pg-colors-primary, #2563eb));
+  flex: 0 0 auto;
+}
+.pg-chart-ctrl__list-label {
+  flex: 1;
+  font-size: 12px;
+  color: var(--pg-colors-text-primary, #0f172a);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pg-chart-ctrl__list-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  color: var(--pg-colors-text-secondary, #94a3b8);
+  border-radius: 4px;
+  cursor: pointer;
+}
+.pg-chart-ctrl__list-remove:hover {
+  background: var(--pg-colors-background-alt, #f1f5f9);
+  color: var(--pg-colors-danger, #dc2626);
+}
+.pg-chart-panel__dots-item--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+`;
+//# sourceMappingURL=chart-controls.css.js.map

package/styles/base/chart-controls.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-controls.css.js","sourceRoot":"","sources":["../../../src/styles/base/chart-controls.css.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8J/B,CAAC"}

package/styles/base/chart-panel.css.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Photon Grid base styles — chart-panel 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 chartPanelCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Chart Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-chart-panel-backdrop {\n  position: absolute; inset: 0; z-index: 9990;\n  background: transparent;\n  overflow: hidden;\n  pointer-events: none;\n}\n// .pg-chart-panel-backdrop--open {\n//   pointer-events: auto;\n// }\n.pg-chart-panel-backdrop--fullscreen {\n  position: fixed !important;\n  background: rgba(0,0,0,0.40) !important;\n}\n.pg-chart-panel {\n  position: absolute;\n  background: var(--pg-colors-surface,#fff);\n  border-radius: 4px;\n  box-shadow: 0 8px 40px rgba(0,0,0,0.18),0 2px 12px rgba(0,0,0,0.10);\n  display: flex; flex-direction: column;\n  width: min(720px, 88%); height: min(520px, 85%);\n  overflow: hidden;\n  pointer-events: auto;\n}\n.pg-chart-panel--fullscreen {\n  width: calc(100%) !important; height: calc(100%) !important;\n}\n.pg-chart-panel__header {\n  display: flex; align-items: center; justify-content: space-between;\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--pg-colors-border,#e2e8f0);\n  flex-shrink: 0;\n  cursor: grab; user-select: none;\n}\n.pg-chart-panel__header--dragging { cursor: grabbing; }\n.pg-chart-panel--dragging .pg-chart-panel__body { pointer-events: none; }\n.pg-chart-panel__title {\n  font-size: 15px; font-weight: 600;\n  color: var(--pg-colors-text-primary,#0f172a);\n  font-family: var(--pg-typography-font-family,system-ui,sans-serif);\n}\n.pg-chart-panel__actions { display: flex; align-items: center; gap: 4px; }\n.pg-chart-panel__action-btn {\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 28px; height: 28px; border-radius: 4px;\n  border: none; background: transparent;\n  color: var(--pg-colors-text-secondary,#64748b); cursor: pointer;\n  transition: background 80ms, color 80ms;\n}\n.pg-chart-panel__action-btn:hover {\n  background: var(--pg-colors-background-alt,#f1f5f9);\n  color: var(--pg-colors-text-primary,#0f172a);\n}\n.pg-chart-panel__body {\n  flex: 1; min-height: 0; position: relative; overflow: hidden;\n}\n.pg-chart-panel__chart-area {\n  position: absolute; top: 0; left: 0; bottom: 0; right: 0;\n  padding: 8px; overflow: hidden;\n  transition: right 240ms cubic-bezier(0.22, 0.61, 0.36, 1);\n}\n@media (prefers-reduced-motion: reduce) {\n  .pg-chart-panel__chart-area { transition: none; }\n}\n.pg-chart-panel__canvas { display: block; }\n.pg-chart-panel__dots-btn {\n  position: absolute; top: 12px; right: 12px; z-index: 10;\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 26px; height: 26px; border-radius: 4px;\n  border: none; background: transparent;\n  color: var(--pg-colors-text-secondary,#64748b); cursor: pointer;\n  transition: background 80ms;\n}\n.pg-chart-panel__dots-btn:hover, .pg-chart-panel__dots-btn--active {\n  background: var(--pg-colors-background-alt,#f1f5f9);\n  color: var(--pg-colors-text-primary,#0f172a);\n}\n.pg-chart-panel__dots-menu {\n  display: none; position: absolute; top: 40px; right: 8px; z-index: 20;\n  background: var(--pg-colors-surface,#fff);\n  border: 1px solid var(--pg-colors-border,#e2e8f0);\n  border-radius: 6px;\n  box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n  min-width: 160px; padding: 4px;\n}\n.pg-chart-panel__dots-menu--open { display: block; }\n.pg-chart-panel__dots-item {\n  display: flex; align-items: center; gap: 8px;\n  width: 100%; padding: 7px 10px;\n  border: none; border-radius: 4px; background: transparent;\n  cursor: pointer; text-align: left;\n  font-size: 13px; color: var(--pg-colors-text-primary,#0f172a);\n  font-family: var(--pg-typography-font-family,system-ui,sans-serif);\n  transition: background 80ms;\n}\n.pg-chart-panel__dots-item:hover { background: var(--pg-colors-background-alt,#f1f5f9); }\n.pg-chart-panel__empty {\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  height: 100%; gap: 10px; padding: 24px;\n  color: var(--pg-colors-text-secondary,#64748b);\n  font-family: var(--pg-typography-font-family,system-ui,sans-serif);\n}\n.pg-chart-panel__empty-icon { opacity: 0.35; color: var(--pg-colors-text-secondary,#64748b); }\n.pg-chart-panel__empty-text {\n  font-size: 15px; font-weight: 600;\n  color: var(--pg-colors-text-primary,#0f172a);\n}\n.pg-chart-panel__empty-sub {\n  font-size: 12px; text-align: center; max-width: 280px;\n  color: var(--pg-colors-text-secondary,#64748b);\n}\n.pg-chart-panel__legend {\n  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;\n  gap: 2px 4px; padding: 5px 12px 8px;\n  flex-shrink: 0;\n  border-top: 1px solid var(--pg-colors-border,#e2e8f0);\n}\n.pg-chart-panel__legend:empty { border-top: none; padding: 0; }\n.pg-chart-panel__legend-item {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 4px 8px; border-radius: 5px;\n  border: none; background: transparent; cursor: pointer;\n  font-size: 12px; color: var(--pg-colors-text-secondary,#64748b);\n  font-family: var(--pg-typography-font-family,system-ui,sans-serif);\n  user-select: none;\n  transition: background 80ms, opacity 220ms;\n}\n.pg-chart-panel__legend-item:hover {\n  background: var(--pg-colors-background-alt,#f1f5f9);\n  color: var(--pg-colors-text-primary,#0f172a);\n}\n.pg-chart-panel__legend-item--hidden { opacity: 0.35; }\n.pg-chart-panel__legend-swatch {\n  width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;\n}\n.pg-chart-panel__legend-label {\n  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n\n";
+//# sourceMappingURL=chart-panel.css.d.ts.map

package/styles/base/chart-panel.css.d.ts.map

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