photon-grid-core 0.0.3 → 1.0.0

package/package.json

@@ -1,70 +1,57 @@
-{
-  "name": "photon-grid-core",
-  "version": "0.0.3",
-  "description": "Professional zero-dependency TypeScript data grid with enterprise-grade features.",
-  "author": "Abdul Wahid",
-  "license": "MIT",
-
-  "type": "module",
-
-  "main": "./index.js",
-  "module": "./index.js",
-  "types": "./index.d.ts",
-
-  "exports": {
-    ".": {
-      "types": "./index.d.ts",
-      "import": "./index.js",
-      "default": "./index.js"
-    },
-    "./styles/*": "./styles/*",
-    "./package.json": "./package.json"
-  },
-
-  "sideEffects": [
-    "*.css",
-    "styles/*.css"
-  ],
-
-  "keywords": [
-  "photon-grid",
-  "grid",
-  "data-grid",
-  "datatable",
-  "table",
-  "typescript",
-  "javascript",
-  "virtualization",
-  "virtual-scrolling",
-  "tree-grid",
-  "pivot-table",
-  "grouping",
-  "sorting",
-  "filtering",
-  "spreadsheet",
-  "excel",
-  "enterprise-grid",
-  "performance",
-  "zero-dependency",
-  "ag-grid-alternative"
-],
-
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/YOUR_GITHUB_USERNAME/photon-grid.git"
-  },
-
-  "homepage": "https://github.com/YOUR_GITHUB_USERNAME/photon-grid#readme",
-
-  "bugs": {
-    "url": "https://github.com/YOUR_GITHUB_USERNAME/photon-grid/issues"
-  },
-
-  "engines": {
-    "node": ">=18"
-  },
-
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "photon-grid-core",
+  "version": "1.0.0",
+  "description": "Professional zero-dependency TypeScript data grid with enterprise-grade features.",
+  "author": "Abdul Wahid",
+  "license": "MIT",
+  "access": "public",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "browser": "./index.js",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./styles/*": "./styles/*",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "*.css",
+    "styles/*.css"
+  ],
+  "keywords": [
+    "grid",
+    "data-grid",
+    "datatable",
+    "table",
+    "spreadsheet",
+    "excel",
+    "tree-grid",
+    "virtual-scroll",
+    "virtualization",
+    "typescript",
+    "javascript",
+    "ui",
+    "enterprise-grid",
+    "performance",
+    "zero-dependency"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/abdulwahid-csit/photon-grid.git"
+  },
+  "homepage": "https://github.com/abdulwahid-csit/photon-grid#readme",
+  "bugs": {
+    "url": "https://github.com/abdulwahid-csit/photon-grid/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

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

@@ -5,5 +5,5 @@
  * 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; padding: 8px; overflow: hidden;\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";
+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

@@ -1 +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,uxKAmIzB,CAAC"}
+{"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"}

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

@@ -12,9 +12,9 @@ export const chartPanelCss = `/* ───────────────
   overflow: hidden;
   pointer-events: none;
 }
-.pg-chart-panel-backdrop--open {
-  pointer-events: auto;
-}
+// .pg-chart-panel-backdrop--open {
+//   pointer-events: auto;
+// }
 .pg-chart-panel-backdrop--fullscreen {
   position: fixed !important;
   background: rgba(0,0,0,0.40) !important;
@@ -59,7 +59,15 @@ export const chartPanelCss = `/* ───────────────
   color: var(--pg-colors-text-primary,#0f172a);
 }
 .pg-chart-panel__body {
-  flex: 1; min-height: 0; position: relative; padding: 8px; overflow: hidden;
+  flex: 1; min-height: 0; position: relative; overflow: hidden;
+}
+.pg-chart-panel__chart-area {
+  position: absolute; top: 0; left: 0; bottom: 0; right: 0;
+  padding: 8px; overflow: hidden;
+  transition: right 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .pg-chart-panel__chart-area { transition: none; }
 }
 .pg-chart-panel__canvas { display: block; }
 .pg-chart-panel__dots-btn {

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

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

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

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

package/styles/base-styles.js

@@ -31,6 +31,8 @@ import { columnContextMenuCss } from './base/column-context-menu.css';
 import { masterDetailCss } from './base/master-detail.css';
 import { photonAiCss } from './base/photon-ai.css';
 import { tooltipCss } from './base/tooltip.css';
+import { chartConfigCss } from './base/chart-config.css';
+import { chartControlsCss } from './base/chart-controls.css';
 const STYLE_ID = 'photon-grid-base-styles';
 // Joined with '' (not '\n') so the output is byte-identical to the original
 // single template: each module already carries its own leading/trailing
@@ -59,6 +61,8 @@ const baseCss = [
     masterDetailCss,
     photonAiCss,
     tooltipCss,
+    chartConfigCss,
+    chartControlsCss,
 ].join('');
 const css = [baseCss, themeQuartzCss, themeAlpineCss, themeBalhamCss, themeMaterialCss, themeDarkCss].join('\n');
 export function injectBaseStyles() {

package/styles/base-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-styles.js","sourceRoot":"","sources":["../../src/styles/base-styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"base-styles.js","sourceRoot":"","sources":["../../src/styles/base-styles.ts"],"names":[],"mappings":"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"}

package/types/event.types.d.ts

@@ -3,6 +3,7 @@ import type { ColumnGroupHeaderCollapsedEvent, ColumnGroupHeaderExpandedEvent, C
 import type { RowNode, RowDropPayload, RowClickPayload, RowEditPayload } from './row.types';
 import type { FilterModel, QuickFilterConfig } from './filter.types';
 import type { CellRange } from './grid.types';
+import type { ChartModel } from '../chart/model/chart-model';
 import type { TreeNodeToggleClickedPayload, TreeNodeTogglePayload, TreeChildrenLoadedPayload } from './tree-data.types';
 export declare const GridEventType: {
     readonly READY: "grid:ready";
@@ -54,6 +55,7 @@ export declare const GridEventType: {
     readonly CHART_CREATED: "chart:created";
     readonly CHART_DESTROYED: "chart:destroyed";
     readonly CHART_RANGE_SELECTION_CHANGED: "chart:rangeSelectionChanged";
+    readonly CHART_OPTIONS_CHANGED: "chart:optionsChanged";
     readonly LOADING_STARTED: "loading:started";
     readonly LOADING_STOPPED: "loading:stopped";
     readonly CELL_CONTEXT_MENU: "cell:contextMenu";
@@ -167,6 +169,29 @@ export interface RowDetailHeightChangedEvent {
     nodeId: string;
     height: number;
 }
+/** Fired once when a range chart is first created. */
+export interface ChartCreatedEvent {
+    chartId: string;
+    chartType: string;
+    cellRange: CellRange;
+    chartModel: ChartModel;
+}
+/** Fired when the grid data range backing a linked chart changes (re-render). */
+export interface ChartRangeSelectionChangedEvent {
+    chartId: string;
+    cellRange: CellRange;
+}
+/** Fired whenever the chart's configuration (type, series, styling…) changes. */
+export interface ChartOptionsChangedEvent {
+    chartId: string;
+    chartType: string;
+    chartModel: ChartModel;
+}
+/** Fired when a chart is destroyed. */
+export interface ChartDestroyedEvent {
+    chartId: string;
+    chartType: string;
+}
 export type GridEventMap = {
     [GridEventType.READY]: ReadyEvent;
     [GridEventType.DATA_CHANGED]: DataChangedEvent;
@@ -209,5 +234,9 @@ export type GridEventMap = {
     [GridEventType.TREE_CHILDREN_LOADED]: TreeChildrenLoadedPayload;
     [GridEventType.ROW_DETAIL_CLOSED]: RowDetailClosedEvent;
     [GridEventType.ROW_DETAIL_HEIGHT_CHANGED]: RowDetailHeightChangedEvent;
+    [GridEventType.CHART_CREATED]: ChartCreatedEvent;
+    [GridEventType.CHART_RANGE_SELECTION_CHANGED]: ChartRangeSelectionChangedEvent;
+    [GridEventType.CHART_OPTIONS_CHANGED]: ChartOptionsChangedEvent;
+    [GridEventType.CHART_DESTROYED]: ChartDestroyedEvent;
 };
 //# sourceMappingURL=event.types.d.ts.map