photon-grid-core 0.0.2 → 0.0.3

package/styles/base/editors.css.js

@@ -0,0 +1,291 @@
+/**
+ * Photon Grid base styles — editors 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 editorsCss = `/* ──────────────────── Editors ──────────────────── */
+.pg-editor {
+  width: 100%;
+  height: 100%;
+  padding: 0 12px;
+  border: none;
+  outline: none;
+  font-size: inherit;
+  font-family: inherit;
+  background: var(--pg-colors-cell-edit-background, #fff);
+  color: inherit;
+  box-sizing: border-box;
+}
+.pg-editor:focus { outline: none; box-shadow: inset 0 0 0 2px var(--pg-colors-primary, #2563eb); }
+.pg-editor--select { cursor: pointer; padding-right: 8px; }
+.pg-editor--checkbox { width: auto; height: auto; margin: auto; cursor: pointer; }
+
+/* ── Multi-select (array) editor ── */
+.pg-editor--multiselect {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0;
+  cursor: pointer;
+  background: var(--pg-colors-cell-edit-background, #fff);
+}
+.pg-editor__ms-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding: 0 8px 0 12px;
+  user-select: none;
+  gap: 6px;
+}
+.pg-editor__ms-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: inherit;
+  color: inherit;
+}
+.pg-editor__ms-arrow {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--pg-colors-text-secondary, #64748b);
+}
+.pg-editor__ms-arrow::after {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid currentColor;
+}
+.pg-editor__ms-panel {
+  display: none;
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  min-width: 100%;
+  max-height: 220px;
+  overflow-y: auto;
+  background: var(--pg-colors-surface, #fff);
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: 6px;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
+  z-index: 9999;
+  padding: 4px;
+}
+.pg-editor__ms-panel--open { display: block; }
+.pg-editor__ms-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 80ms;
+  font-size: inherit;
+  font-family: inherit;
+  color: var(--pg-colors-text-primary, #0f172a);
+}
+.pg-editor__ms-option:hover { background: var(--pg-colors-background-alt, #f1f5f9); }
+.pg-editor__ms-check {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  accent-color: var(--pg-colors-primary, #2563eb);
+}
+.pg-editor__ms-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── Custom dropdown editor ── */
+.pg-dropdown-editor__trigger {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 6px 0 12px;
+  gap: 6px;
+  cursor: default;
+}
+.pg-dropdown-editor__trigger-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: inherit;
+  color: inherit;
+}
+.pg-dropdown-editor__arrow {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--pg-colors-text-secondary, #64748b);
+}
+.pg-dropdown-editor__arrow::after {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 5px solid currentColor;
+}
+/* Panel — position:fixed, appended to document.body */
+.pg-dropdown-editor__panel {
+  position: fixed;
+  z-index: 99999;
+  background: var(--pg-colors-surface, #fff);
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
+  overflow: hidden;
+  opacity: 0;
+  transform: scaleY(0.94) translateY(-4px);
+  transform-origin: top center;
+  transition: opacity 130ms ease, transform 130ms ease;
+}
+.pg-dropdown-editor__panel--visible {
+  opacity: 1;
+  transform: scaleY(1) translateY(0);
+}
+.pg-dropdown-editor__panel--above {
+  transform-origin: bottom center;
+  transform: scaleY(0.94) translateY(4px);
+}
+.pg-dropdown-editor__panel--above.pg-dropdown-editor__panel--visible {
+  transform: scaleY(1) translateY(0);
+}
+/* Scrollable list */
+.pg-dropdown-editor__scroll {
+  overflow-y: auto;
+  overflow-x: hidden;
+  outline: none;
+}
+.pg-dropdown-editor__scroll::-webkit-scrollbar { width: 5px; }
+.pg-dropdown-editor__scroll::-webkit-scrollbar-track { background: transparent; }
+.pg-dropdown-editor__scroll::-webkit-scrollbar-thumb {
+  background: var(--pg-colors-border, #e2e8f0);
+  border-radius: 3px;
+}
+/* Virtual scroll layout */
+.pg-dropdown-editor__spacer { position: relative; }
+.pg-dropdown-editor__items  { position: absolute; left: 0; right: 0; top: 0; }
+/* Option rows — height must equal CustomDropdownEditor.ITEM_HEIGHT (34px) */
+.pg-dropdown-editor__option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 10px;
+  height: 34px;
+  cursor: pointer;
+  transition: background 60ms;
+  color: var(--pg-colors-text-primary, #0f172a);
+  font-family: var(--pg-typography-font-family, system-ui, sans-serif);
+  font-size: 13px;
+}
+.pg-dropdown-editor__option:hover,
+.pg-dropdown-editor__option--highlighted {
+  background: var(--pg-colors-background-alt, #f1f5f9);
+}
+.pg-dropdown-editor__option--selected {
+  background: var(--pg-colors-primary-subtle, #eff6ff);
+  color: var(--pg-colors-primary, #2563eb);
+  font-weight: 500;
+}
+.pg-dropdown-editor__option--selected.pg-dropdown-editor__option--highlighted {
+  background: var(--pg-colors-primary-subtle-hover, #dbeafe);
+}
+/* Icon / image before label */
+.pg-dropdown-editor__opt-icon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 3px;
+}
+.pg-dropdown-editor__opt-icon img {
+  width: 20px;
+  height: 20px;
+  object-fit: cover;
+  border-radius: 2px;
+  display: block;
+}
+.pg-dropdown-editor__opt-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* Checkmark for the currently selected option */
+.pg-dropdown-editor__opt-check {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--pg-colors-primary, #2563eb);
+}
+.pg-dropdown-editor__opt-check::after {
+  content: '';
+  display: block;
+  width: 5px;
+  height: 9px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(45deg) translate(-1px, -1px);
+}
+/* Empty state */
+.pg-dropdown-editor__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  color: var(--pg-colors-text-secondary, #64748b);
+  font-size: 13px;
+  font-family: var(--pg-typography-font-family, system-ui, sans-serif);
+}
+
+/* ── Array cell tag display ── */
+.pg-cell__value--tags {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  flex: 1;
+  min-width: 0;
+}
+.pg-badge--overflow {
+  background: var(--pg-colors-background-alt, #f1f5f9);
+  color: var(--pg-colors-text-secondary, #64748b);
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
+`;
+//# sourceMappingURL=editors.css.js.map

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * Photon Grid base styles — filter 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 filterCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Filter Row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-drag-preview {\n  position: fixed;\n  pointer-events: none;\n  z-index: 99999;\n  display: flex;\n  align-items: center;\n  gap: var(--pg-drag-preview-gap, 8px);\n  padding: var(--pg-drag-preview-padding, 6px 12px);\n  border-radius: var(--pg-borders-radius-md, 6px);\n  box-shadow: var(--pg-shadows-drag-preview, 0 4px 16px rgba(0,0,0,0.18));\n  font-size: var(--pg-typography-font-size-md, 13px);\n  font-weight: var(--pg-typography-font-weight-medium, 500);\n  white-space: nowrap;\n  will-change: transform;\n  background: var(--pg-colors-drag-preview-background, var(--pg-drag-preview-bg, #fff));\n  border: 1px solid var(--pg-colors-drag-preview-border, var(--pg-drag-preview-border, #e0e0e0));\n  color: var(--pg-colors-text-primary, var(--pg-text-primary, #222));\n  top: 0;\n  left: 0;\n  transform: translate(-9999px, -9999px);\n}\n.pg-drag-preview__avatar {\n  width: var(--pg-drag-preview-avatar-size, 24px);\n  height: var(--pg-drag-preview-avatar-size, 24px);\n  background: var(--pg-colors-primary, var(--pg-primary, #2563eb));\n  overflow: hidden;\n  flex-shrink: 0;\n}\n.pg-drag-preview__avatar--circle { border-radius: 50%; }\n.pg-drag-preview__avatar--square { border-radius: var(--pg-borders-radius-sm, 4px); }\n.pg-drag-preview__avatar-img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.pg-drag-preview__label {\n  flex: 1;\n  min-width: 0;\n}\n.pg-drag-preview__badge {\n  background: var(--pg-colors-primary, var(--pg-primary, #2563eb));\n  color: var(--pg-colors-primary-contrast, #fff);\n  border-radius: var(--pg-borders-radius-pill, 999px);\n  padding: 1px 7px;\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n  min-width: 20px;\n  text-align: center;\n}\n\n.pg-filter-cell {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  padding: 0 6px;\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-filter-cell:last-child { border-right: none; }\n.pg-filter-cell--checkbox {\n  width: 44px;\n  min-width: 44px;\n  max-width: 44px;\n  flex-shrink: 0;\n}\n.pg-filter-cell--serial {\n  width: 52px;\n  min-width: 52px;\n  max-width: 52px;\n  flex-shrink: 0;\n}\n.pg-filter-input {\n  width: 100%;\n  height: 24px;\n  padding: 0 8px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-family: inherit;\n  background: var(--pg-colors-surface, #fff);\n  color: inherit;\n  outline: none;\n  transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Filter Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-filter-panel {\n  position: absolute;\n  z-index: var(--pg-z-index-filter-panel, 200);\n  min-width: 270px;\n  max-width: 320px;\n  width: max-content;\n  background: var(--pg-colors-surface, #fff);\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-md, 6px);\n  box-shadow: var(--pg-shadows-lg, 0 8px 24px rgba(0,0,0,.12));\n  overflow: hidden;\n  font-size: var(--pg-typography-font-size-sm, 13px);\n  color: var(--pg-colors-text, #1e293b);\n  user-select: none;\n}\n\n/* \u2500\u2500 Condition filter \u2500\u2500 */\n.pg-filter-cond-wrap { padding: 10px; display: flex; flex-direction: column; gap: 6px; }\n\n.pg-filter-cond__row { display: flex; flex-direction: column; gap: 4px; }\n.pg-filter-cond__row--hidden { display: none; }\n\n.pg-filter-cond__select {\n  width: 100%;\n  height: 30px;\n  padding: 0 8px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text, #1e293b);\n  font-size: inherit;\n  font-family: inherit;\n  cursor: pointer;\n  outline: none;\n  transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-cond__select:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n\n.pg-filter-cond__inputs { display: flex; align-items: center; gap: 4px; }\n.pg-filter-cond__inputs--hidden { display: none; }\n/* Stack inputs vertically in range (Between) mode so the panel never overflows horizontally */\n.pg-filter-cond__inputs--range { flex-direction: column; align-items: stretch; gap: 4px; }\n.pg-filter-cond__inputs--range .pg-filter-cond__range-sep {\n  text-align: center;\n  padding: 2px 0;\n  color: var(--pg-colors-text-secondary, #64748b);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  font-weight: 500;\n}\n\n.pg-filter-cond__input {\n  flex: 1;\n  height: 30px;\n  padding: 0 8px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text, #1e293b);\n  font-size: inherit;\n  font-family: inherit;\n  outline: none;\n  padding: 6px;\n  transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-cond__input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n.pg-filter-cond__input--hidden { display: none; }\n\n.pg-filter-cond__range-sep {\n  flex-shrink: 0;\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  color: var(--pg-colors-text-secondary, #475569);\n  padding: 0 2px;\n}\n.pg-filter-cond__range-sep--hidden { display: none; }\n\n/* \u2500\u2500 Logic toggle row (AND / OR / None) \u2500\u2500 */\n.pg-filter-logic {\n  display: flex;\n  gap: 4px;\n  padding: 4px 0 2px;\n}\n.pg-filter-logic--hidden { display: none; }\n\n.pg-filter-logic__btn {\n  flex: 1;\n  height: 26px;\n  padding: 0 6px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text-secondary, #475569);\n  font-size: var(--pg-typography-font-size-xs, 11px);\n  font-family: inherit;\n  font-weight: 500;\n  cursor: pointer;\n  text-align: center;\n  transition: background var(--pg-transitions-duration-fast, 100ms),\n              color var(--pg-transitions-duration-fast, 100ms),\n              border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-logic__btn:hover { background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-filter-logic__btn--active {\n  background: var(--pg-colors-primary, #2563eb);\n  color: #fff;\n  border-color: var(--pg-colors-primary, #2563eb);\n}\n\n/* \u2500\u2500 Set filter (dropdown / array) \u2500\u2500 */\n.pg-filter-set { display: flex; flex-direction: column; }\n\n.pg-filter-set__search {\n  padding: 8px 10px 4px;\n}\n.pg-filter-set__search-input {\n  width: 100%;\n  height: 30px;\n  padding: 0 10px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text, #1e293b);\n  font-size: inherit;\n  font-family: inherit;\n  box-sizing: border-box;\n  outline: none;\n  transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-set__search-input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n\n.pg-filter-set__divider {\n  height: 1px;\n  background: var(--pg-colors-border, #e2e8f0);\n  margin: 2px 0;\n}\n\n/* Select All item */\n.pg-filter-set__item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 28px;\n  padding: 0 10px;\n  cursor: pointer;\n  transition: background var(--pg-transitions-duration-fast, 100ms);\n  box-sizing: border-box;\n  position: absolute;\n  left: 0;\n  right: 0;\n}\n.pg-filter-set__item:hover { background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-filter-set__item--select-all {\n  position: static;\n  font-weight: 500;\n  color: var(--pg-colors-text, #1e293b);\n}\n.pg-filter-set__item-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.pg-filter-set__item-label--blank { color: var(--pg-colors-text-disabled, #94a3b8); font-style: italic; }\n\n.pg-filter-set__checkbox {\n  flex-shrink: 0;\n  width: 14px;\n  height: 14px;\n  cursor: pointer;\n  accent-color: var(--pg-colors-primary, #2563eb);\n}\n\n/* Virtual scroll containers */\n.pg-filter-set__list {\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  scrollbar-width: thin;\n  scrollbar-color: var(--pg-colors-border, #e2e8f0) transparent;\n}\n.pg-filter-set__list::-webkit-scrollbar { width: 6px; }\n.pg-filter-set__list::-webkit-scrollbar-track { background: transparent; }\n.pg-filter-set__list::-webkit-scrollbar-thumb {\n  background: var(--pg-colors-border, #e2e8f0);\n  border-radius: 3px;\n}\n.pg-filter-set__list-inner { position: relative; width: 100%; }\n\n/* \u2500\u2500 Panel footer \u2500\u2500 */\n.pg-filter-panel__footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 8px 10px;\n  // border-top: 1px solid var(--pg-colors-border, #e2e8f0);\n  // background: var(--pg-colors-background, #f8fafc);\n}\n\n.pg-filter-panel__clear-btn {\n  height: 28px;\n  padding: 0 14px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text-secondary, #475569);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-family: inherit;\n  cursor: pointer;\n  transition: background var(--pg-transitions-duration-fast, 100ms),\n              border-color var(--pg-transitions-duration-fast, 100ms),\n              color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-panel__clear-btn:hover {\n  background: var(--pg-colors-background-alt, #f1f5f9);\n  border-color: var(--pg-colors-text-secondary, #475569);\n  color: var(--pg-colors-text, #1e293b);\n}\n\n";
+//# sourceMappingURL=filter.css.d.ts.map

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

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

package/styles/base/filter.css.js

@@ -0,0 +1,312 @@
+/**
+ * Photon Grid base styles — filter 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 filterCss = `/* ──────────────────── Filter Row ──────────────────── */
+.pg-drag-preview {
+  position: fixed;
+  pointer-events: none;
+  z-index: 99999;
+  display: flex;
+  align-items: center;
+  gap: var(--pg-drag-preview-gap, 8px);
+  padding: var(--pg-drag-preview-padding, 6px 12px);
+  border-radius: var(--pg-borders-radius-md, 6px);
+  box-shadow: var(--pg-shadows-drag-preview, 0 4px 16px rgba(0,0,0,0.18));
+  font-size: var(--pg-typography-font-size-md, 13px);
+  font-weight: var(--pg-typography-font-weight-medium, 500);
+  white-space: nowrap;
+  will-change: transform;
+  background: var(--pg-colors-drag-preview-background, var(--pg-drag-preview-bg, #fff));
+  border: 1px solid var(--pg-colors-drag-preview-border, var(--pg-drag-preview-border, #e0e0e0));
+  color: var(--pg-colors-text-primary, var(--pg-text-primary, #222));
+  top: 0;
+  left: 0;
+  transform: translate(-9999px, -9999px);
+}
+.pg-drag-preview__avatar {
+  width: var(--pg-drag-preview-avatar-size, 24px);
+  height: var(--pg-drag-preview-avatar-size, 24px);
+  background: var(--pg-colors-primary, var(--pg-primary, #2563eb));
+  overflow: hidden;
+  flex-shrink: 0;
+}
+.pg-drag-preview__avatar--circle { border-radius: 50%; }
+.pg-drag-preview__avatar--square { border-radius: var(--pg-borders-radius-sm, 4px); }
+.pg-drag-preview__avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.pg-drag-preview__label {
+  flex: 1;
+  min-width: 0;
+}
+.pg-drag-preview__badge {
+  background: var(--pg-colors-primary, var(--pg-primary, #2563eb));
+  color: var(--pg-colors-primary-contrast, #fff);
+  border-radius: var(--pg-borders-radius-pill, 999px);
+  padding: 1px 7px;
+  font-size: var(--pg-typography-font-size-xs, 11px);
+  font-weight: var(--pg-typography-font-weight-semi-bold, 600);
+  min-width: 20px;
+  text-align: center;
+}
+
+.pg-filter-cell {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding: 0 6px;
+  border-right: 1px solid var(--pg-colors-border, #e2e8f0);
+}
+.pg-filter-cell:last-child { border-right: none; }
+.pg-filter-cell--checkbox {
+  width: 44px;
+  min-width: 44px;
+  max-width: 44px;
+  flex-shrink: 0;
+}
+.pg-filter-cell--serial {
+  width: 52px;
+  min-width: 52px;
+  max-width: 52px;
+  flex-shrink: 0;
+}
+.pg-filter-input {
+  width: 100%;
+  height: 24px;
+  padding: 0 8px;
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: var(--pg-borders-radius-sm, 4px);
+  font-size: var(--pg-typography-font-size-sm, 12px);
+  font-family: inherit;
+  background: var(--pg-colors-surface, #fff);
+  color: inherit;
+  outline: none;
+  transition: border-color var(--pg-transitions-duration-fast, 100ms);
+}
+.pg-filter-input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }
+
+/* ──────────────────── Filter Panel ──────────────────── */
+.pg-filter-panel {
+  position: absolute;
+  z-index: var(--pg-z-index-filter-panel, 200);
+  min-width: 270px;
+  max-width: 320px;
+  width: max-content;
+  background: var(--pg-colors-surface, #fff);
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: var(--pg-borders-radius-md, 6px);
+  box-shadow: var(--pg-shadows-lg, 0 8px 24px rgba(0,0,0,.12));
+  overflow: hidden;
+  font-size: var(--pg-typography-font-size-sm, 13px);
+  color: var(--pg-colors-text, #1e293b);
+  user-select: none;
+}
+
+/* ── Condition filter ── */
+.pg-filter-cond-wrap { padding: 10px; display: flex; flex-direction: column; gap: 6px; }
+
+.pg-filter-cond__row { display: flex; flex-direction: column; gap: 4px; }
+.pg-filter-cond__row--hidden { display: none; }
+
+.pg-filter-cond__select {
+  width: 100%;
+  height: 30px;
+  padding: 0 8px;
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: var(--pg-borders-radius-sm, 4px);
+  background: var(--pg-colors-surface, #fff);
+  color: var(--pg-colors-text, #1e293b);
+  font-size: inherit;
+  font-family: inherit;
+  cursor: pointer;
+  outline: none;
+  transition: border-color var(--pg-transitions-duration-fast, 100ms);
+}
+.pg-filter-cond__select:focus { border-color: var(--pg-colors-border-focus, #2563eb); }
+
+.pg-filter-cond__inputs { display: flex; align-items: center; gap: 4px; }
+.pg-filter-cond__inputs--hidden { display: none; }
+/* Stack inputs vertically in range (Between) mode so the panel never overflows horizontally */
+.pg-filter-cond__inputs--range { flex-direction: column; align-items: stretch; gap: 4px; }
+.pg-filter-cond__inputs--range .pg-filter-cond__range-sep {
+  text-align: center;
+  padding: 2px 0;
+  color: var(--pg-colors-text-secondary, #64748b);
+  font-size: var(--pg-typography-font-size-xs, 11px);
+  font-weight: 500;
+}
+
+.pg-filter-cond__input {
+  flex: 1;
+  height: 30px;
+  padding: 0 8px;
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: var(--pg-borders-radius-sm, 4px);
+  background: var(--pg-colors-surface, #fff);
+  color: var(--pg-colors-text, #1e293b);
+  font-size: inherit;
+  font-family: inherit;
+  outline: none;
+  padding: 6px;
+  transition: border-color var(--pg-transitions-duration-fast, 100ms);
+}
+.pg-filter-cond__input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }
+.pg-filter-cond__input--hidden { display: none; }
+
+.pg-filter-cond__range-sep {
+  flex-shrink: 0;
+  font-size: var(--pg-typography-font-size-xs, 11px);
+  color: var(--pg-colors-text-secondary, #475569);
+  padding: 0 2px;
+}
+.pg-filter-cond__range-sep--hidden { display: none; }
+
+/* ── Logic toggle row (AND / OR / None) ── */
+.pg-filter-logic {
+  display: flex;
+  gap: 4px;
+  padding: 4px 0 2px;
+}
+.pg-filter-logic--hidden { display: none; }
+
+.pg-filter-logic__btn {
+  flex: 1;
+  height: 26px;
+  padding: 0 6px;
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: var(--pg-borders-radius-sm, 4px);
+  background: var(--pg-colors-surface, #fff);
+  color: var(--pg-colors-text-secondary, #475569);
+  font-size: var(--pg-typography-font-size-xs, 11px);
+  font-family: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  text-align: center;
+  transition: background var(--pg-transitions-duration-fast, 100ms),
+              color var(--pg-transitions-duration-fast, 100ms),
+              border-color var(--pg-transitions-duration-fast, 100ms);
+}
+.pg-filter-logic__btn:hover { background: var(--pg-colors-background-alt, #f1f5f9); }
+.pg-filter-logic__btn--active {
+  background: var(--pg-colors-primary, #2563eb);
+  color: #fff;
+  border-color: var(--pg-colors-primary, #2563eb);
+}
+
+/* ── Set filter (dropdown / array) ── */
+.pg-filter-set { display: flex; flex-direction: column; }
+
+.pg-filter-set__search {
+  padding: 8px 10px 4px;
+}
+.pg-filter-set__search-input {
+  width: 100%;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: var(--pg-borders-radius-sm, 4px);
+  background: var(--pg-colors-surface, #fff);
+  color: var(--pg-colors-text, #1e293b);
+  font-size: inherit;
+  font-family: inherit;
+  box-sizing: border-box;
+  outline: none;
+  transition: border-color var(--pg-transitions-duration-fast, 100ms);
+}
+.pg-filter-set__search-input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }
+
+.pg-filter-set__divider {
+  height: 1px;
+  background: var(--pg-colors-border, #e2e8f0);
+  margin: 2px 0;
+}
+
+/* Select All item */
+.pg-filter-set__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 28px;
+  padding: 0 10px;
+  cursor: pointer;
+  transition: background var(--pg-transitions-duration-fast, 100ms);
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+.pg-filter-set__item:hover { background: var(--pg-colors-background-alt, #f1f5f9); }
+.pg-filter-set__item--select-all {
+  position: static;
+  font-weight: 500;
+  color: var(--pg-colors-text, #1e293b);
+}
+.pg-filter-set__item-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pg-filter-set__item-label--blank { color: var(--pg-colors-text-disabled, #94a3b8); font-style: italic; }
+
+.pg-filter-set__checkbox {
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  accent-color: var(--pg-colors-primary, #2563eb);
+}
+
+/* Virtual scroll containers */
+.pg-filter-set__list {
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  scrollbar-width: thin;
+  scrollbar-color: var(--pg-colors-border, #e2e8f0) transparent;
+}
+.pg-filter-set__list::-webkit-scrollbar { width: 6px; }
+.pg-filter-set__list::-webkit-scrollbar-track { background: transparent; }
+.pg-filter-set__list::-webkit-scrollbar-thumb {
+  background: var(--pg-colors-border, #e2e8f0);
+  border-radius: 3px;
+}
+.pg-filter-set__list-inner { position: relative; width: 100%; }
+
+/* ── Panel footer ── */
+.pg-filter-panel__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 8px 10px;
+  // border-top: 1px solid var(--pg-colors-border, #e2e8f0);
+  // background: var(--pg-colors-background, #f8fafc);
+}
+
+.pg-filter-panel__clear-btn {
+  height: 28px;
+  padding: 0 14px;
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: var(--pg-borders-radius-sm, 4px);
+  background: var(--pg-colors-surface, #fff);
+  color: var(--pg-colors-text-secondary, #475569);
+  font-size: var(--pg-typography-font-size-sm, 12px);
+  font-family: inherit;
+  cursor: pointer;
+  transition: background var(--pg-transitions-duration-fast, 100ms),
+              border-color var(--pg-transitions-duration-fast, 100ms),
+              color var(--pg-transitions-duration-fast, 100ms);
+}
+.pg-filter-panel__clear-btn:hover {
+  background: var(--pg-colors-background-alt, #f1f5f9);
+  border-color: var(--pg-colors-text-secondary, #475569);
+  color: var(--pg-colors-text, #1e293b);
+}
+
+`;
+//# sourceMappingURL=filter.css.js.map

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * Photon Grid base styles — footer 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 footerCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-grid__footer {\n  flex-shrink: 0;\n  border-top: 1px solid var(--pg-colors-footer-border, #e2e8f0);\n  background: var(--pg-colors-footer-background, #f8fafc);\n}\n.pg-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 16px;\n  height: 44px;\n  gap: 16px;\n}\n.pg-pagination {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.pg-pagination__info {\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  color: var(--pg-colors-text-secondary, #475569);\n  min-width: 100px;\n  text-align: center;\n}\n.pg-pagination__btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 30px;\n  height: 30px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  background: var(--pg-colors-surface, #fff);\n  color: var(--pg-colors-text-primary, #0f172a);\n  cursor: pointer;\n  transition: all var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-pagination__btn:hover:not(:disabled) { background: var(--pg-colors-background-alt, #f1f5f9); border-color: var(--pg-colors-border-strong, #cbd5e1); }\n.pg-pagination__btn:disabled { opacity: 0.38; cursor: not-allowed; }\n.pg-pagination__page-input {\n  width: 54px;\n  height: 30px;\n  padding: 0 8px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-family: inherit;\n  background: var(--pg-colors-surface, #fff);\n  color: inherit;\n  text-align: center;\n  outline: none;\n}\n.pg-pagination__page-input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n.pg-pagination__size { display: flex; align-items: center; gap: 8px; }\n.pg-pagination__size-label { font-size: var(--pg-typography-font-size-sm, 12px); color: var(--pg-colors-text-secondary, #475569); white-space: nowrap; }\n.pg-pagination__size-select {\n  height: 30px;\n  padding: 0 6px;\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-family: inherit;\n  background: var(--pg-colors-surface, #fff);\n  color: inherit;\n  cursor: pointer;\n  outline: none;\n}\n\n";
+//# sourceMappingURL=footer.css.d.ts.map

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

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