photon-grid-core 0.0.2 → 1.0.0

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

package/styles/base/footer.css.js

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

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

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

package/styles/base/group-bar-search.css.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Photon Grid base styles — group-bar-search 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 groupBarSearchCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Group bar quick-filter search \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-group-search {\n  display: flex;\n  align-items: center;\n  padding: 0 10px;\n  flex-shrink: 0;\n  height: 100%;\n}\n.pg-group-drop-zone--left .pg-group-search,\n.pg-group-drop-zone--right .pg-group-search { display: none; }\n\n/* Field wrapper: position:relative so icon + clear button can overlay the input */\n.pg-group-search__field {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.pg-group-search__icon {\n  position: absolute;\n  left: 9px;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  color: var(--pg-colors-text-disabled, #94a3b8);\n  pointer-events: none;\n  transition: color 150ms;\n  z-index: 1;\n}\n.pg-group-search__field:focus-within .pg-group-search__icon {\n  color: var(--pg-colors-primary, #2563eb);\n}\n.pg-group-search__input {\n  width: 210px;\n  height: 32px;\n  padding: 0 28px 0 30px;\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-family: inherit;\n  color: var(--pg-colors-text-primary, #0f172a);\n  background: var(--pg-colors-surface, #ffffff);\n  border: 1px solid var(--pg-colors-border, #e2e8f0);\n  border-radius: var(--pg-borders-radius-sm, 4px);\n  outline: none;\n  transition: border-color 150ms, box-shadow 150ms;\n  appearance: none;\n}\n.pg-group-search__input::placeholder { color: var(--pg-colors-text-disabled, #94a3b8); }\n.pg-group-search__input:focus {\n  border-color: var(--pg-colors-border-focus, #2563eb);\n  box-shadow: 0 0 0 3px var(--pg-colors-selection-background, rgba(37, 99, 235, 0.12));\n}\n.pg-group-search__clear {\n  position: absolute;\n  right: 6px;\n  top: 50%;\n  transform: translateY(-50%);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  cursor: pointer;\n  color: var(--pg-colors-text-secondary, #64748b);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 150ms, background 100ms;\n}\n.pg-group-search__clear--visible {\n  opacity: 0.55;\n  pointer-events: auto;\n}\n.pg-group-search__clear--visible:hover {\n  opacity: 1;\n  background: var(--pg-colors-background-alt, #f1f5f9);\n}\n\n";
+//# sourceMappingURL=group-bar-search.css.d.ts.map

package/styles/base/group-bar-search.css.d.ts.map

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

package/styles/base/group-bar-search.css.js

@@ -0,0 +1,86 @@
+/**
+ * Photon Grid base styles — group-bar-search 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 groupBarSearchCss = `/* ──────────────────── Group bar quick-filter search ──────────────────── */
+.pg-group-search {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  flex-shrink: 0;
+  height: 100%;
+}
+.pg-group-drop-zone--left .pg-group-search,
+.pg-group-drop-zone--right .pg-group-search { display: none; }
+
+/* Field wrapper: position:relative so icon + clear button can overlay the input */
+.pg-group-search__field {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.pg-group-search__icon {
+  position: absolute;
+  left: 9px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  color: var(--pg-colors-text-disabled, #94a3b8);
+  pointer-events: none;
+  transition: color 150ms;
+  z-index: 1;
+}
+.pg-group-search__field:focus-within .pg-group-search__icon {
+  color: var(--pg-colors-primary, #2563eb);
+}
+.pg-group-search__input {
+  width: 210px;
+  height: 32px;
+  padding: 0 28px 0 30px;
+  font-size: var(--pg-typography-font-size-sm, 12px);
+  font-family: inherit;
+  color: var(--pg-colors-text-primary, #0f172a);
+  background: var(--pg-colors-surface, #ffffff);
+  border: 1px solid var(--pg-colors-border, #e2e8f0);
+  border-radius: var(--pg-borders-radius-sm, 4px);
+  outline: none;
+  transition: border-color 150ms, box-shadow 150ms;
+  appearance: none;
+}
+.pg-group-search__input::placeholder { color: var(--pg-colors-text-disabled, #94a3b8); }
+.pg-group-search__input:focus {
+  border-color: var(--pg-colors-border-focus, #2563eb);
+  box-shadow: 0 0 0 3px var(--pg-colors-selection-background, rgba(37, 99, 235, 0.12));
+}
+.pg-group-search__clear {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  cursor: pointer;
+  color: var(--pg-colors-text-secondary, #64748b);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 150ms, background 100ms;
+}
+.pg-group-search__clear--visible {
+  opacity: 0.55;
+  pointer-events: auto;
+}
+.pg-group-search__clear--visible:hover {
+  opacity: 1;
+  background: var(--pg-colors-background-alt, #f1f5f9);
+}
+
+`;
+//# sourceMappingURL=group-bar-search.css.js.map

package/styles/base/group-bar-search.css.js.map

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

package/styles/base/group-drop-zone.css.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Photon Grid base styles — group-drop-zone 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 groupDropZoneCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Group drop zone \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-group-drop-zone--top {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  flex-shrink: 0;\n  height: var(--pg-header-row-height, 44px);\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  overflow: hidden;\n}\n.pg-group-drop-zone--left {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  width: 160px;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n  overflow: hidden;\n  position: relative;\n}\n.pg-group-drop-zone--right {\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n  width: 160px;\n  background: var(--pg-colors-header-background, #f8fafc);\n  border-left: 1px solid var(--pg-colors-border, #e2e8f0);\n  overflow: hidden;\n  position: relative;\n}\n\n/* Zone header row (grip + \"Groups\" label) */\n.pg-group-zone-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px 4px 8px;\n  flex-shrink: 0;\n  border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n  user-select: none;\n}\n.pg-group-zone-grip {\n  display: flex;\n  align-items: center;\n  cursor: grab;\n  opacity: 0.45;\n  padding: 2px 3px;\n  border-radius: 3px;\n  color: var(--pg-colors-text-secondary, #64748b);\n  flex-shrink: 0;\n  transition: opacity 100ms, background 100ms;\n}\n.pg-group-zone-grip:hover { opacity: 0.85; background: rgba(0,0,0,0.06); }\n.pg-group-zone-grip:active { cursor: grabbing; }\n.pg-group-zone-label {\n  flex: 1;\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  user-select: none;\n}\n\n/* Chips area (the actual drop target) */\n.pg-group-zone-chips {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 6px 10px;\n  min-height: 38px;\n  flex: 1;\n  overflow: auto;\n}\n.pg-group-drop-zone--left .pg-group-zone-chips,\n.pg-group-drop-zone--right .pg-group-zone-chips {\n  flex-direction: column;\n  align-items: flex-start;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n.pg-group-zone-chips--over {\n  background: var(--pg-colors-group-zone-over, #eff6ff);\n  outline: 1px dashed var(--pg-colors-primary, #2563eb);\n  outline-offset: -2px;\n}\n\n/* Resize handle */\n.pg-group-drop-zone--top .pg-group-zone-resize {\n  height: 4px;\n  flex-shrink: 0;\n  cursor: ns-resize;\n  background: transparent;\n  transition: background 100ms;\n}\n.pg-group-drop-zone--top .pg-group-zone-resize:hover { background: var(--pg-colors-primary, #2563eb); opacity: 0.35; }\n.pg-group-drop-zone--left .pg-group-zone-resize {\n  position: absolute;\n  top: 0; right: 0; bottom: 0;\n  width: 4px;\n  cursor: ew-resize;\n  background: transparent;\n  transition: background 100ms;\n}\n.pg-group-drop-zone--right .pg-group-zone-resize {\n  position: absolute;\n  top: 0; left: 0; bottom: 0;\n  width: 4px;\n  cursor: ew-resize;\n  background: transparent;\n  transition: background 100ms;\n}\n.pg-group-drop-zone--left .pg-group-zone-resize:hover,\n.pg-group-drop-zone--right .pg-group-zone-resize:hover { background: var(--pg-colors-primary, #2563eb); opacity: 0.35; }\n\n/* Hint text */\n.pg-group-drop-zone__hint {\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  color: var(--pg-colors-text-disabled, #94a3b8);\n  pointer-events: none;\n  user-select: none;\n}\n\n/* Chips */\n.pg-group-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 3px 6px 3px 10px;\n  border-radius: var(--pg-borders-radius-pill, 9999px);\n  background: var(--pg-colors-chip-background, #e0e7ff);\n  color: var(--pg-colors-chip-text, #1e40af);\n  font-size: var(--pg-typography-font-size-sm, 12px);\n  font-weight: var(--pg-typography-font-weight-medium, 500);\n  user-select: none;\n  white-space: nowrap;\n  transition: opacity 120ms;\n}\n.pg-group-chip--ghost {\n  cursor: grabbing;\n}\n.pg-group-chip__label { line-height: 1.2; }\n.pg-group-chip__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  cursor: pointer;\n  opacity: 0.55;\n  transition: opacity 100ms, background 100ms;\n  flex-shrink: 0;\n}\n.pg-group-chip__close:hover { opacity: 1; background: rgba(30,64,175,0.18); }\n.pg-group-chip__sep {\n  display: inline-flex;\n  align-items: center;\n  color: var(--pg-colors-text-disabled, #94a3b8);\n  flex-shrink: 0;\n}\n\n";
+//# sourceMappingURL=group-drop-zone.css.d.ts.map

package/styles/base/group-drop-zone.css.d.ts.map

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