@zengrid/core 1.0.1

package/dist/src/styles/grid.css

@@ -0,0 +1,356 @@
+/**
+ * ZenGrid Core Styles
+ * Minimal, themeable CSS for the grid component
+ */
+
+/* CSS Variables for theming */
+:root {
+  /* Colors - Light Theme */
+  --zg-bg-primary: #ffffff;
+  --zg-bg-secondary: #f5f5f5;
+  --zg-bg-hover: #f0f4f8;
+  --zg-bg-selected: #e3f2fd;
+  --zg-bg-active: #ffffff;
+  --zg-bg-editing: #ffffff;
+
+  --zg-border-color: #e0e0e0;
+  --zg-border-active: #2196f3;
+  --zg-border-editing: #4caf50;
+  --zg-border-selected: #2196f3;
+
+  --zg-text-primary: #333333;
+  --zg-text-secondary: #666666;
+  --zg-text-disabled: #999999;
+
+  /* Focus ring */
+  --zg-focus-ring: 2px solid #2196f3;
+  --zg-focus-offset: 2px;
+
+  /* Spacing */
+  --zg-cell-padding-x: 8px;
+  --zg-cell-padding-y: 0;
+
+  /* Typography */
+  --zg-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  --zg-font-size: 14px;
+  --zg-line-height: 1.5;
+
+  /* Shadows */
+  --zg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --zg-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --zg-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
+
+  /* Transitions */
+  --zg-transition-fast: 0.1s ease;
+  --zg-transition-normal: 0.2s ease;
+}
+
+/* Dark theme */
+[data-theme="dark"] {
+  --zg-bg-primary: #1e1e1e;
+  --zg-bg-secondary: #2d2d2d;
+  --zg-bg-hover: #3a3a3a;
+  --zg-bg-selected: #1a3a52;
+  --zg-bg-active: #1e1e1e;
+  --zg-bg-editing: #1e1e1e;
+
+  --zg-border-color: #404040;
+  --zg-border-active: #42a5f5;
+  --zg-border-editing: #66bb6a;
+  --zg-border-selected: #42a5f5;
+
+  --zg-text-primary: #e0e0e0;
+  --zg-text-secondary: #b0b0b0;
+  --zg-text-disabled: #707070;
+}
+
+/* Grid container */
+.zg-grid {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--zg-bg-primary);
+  font-family: var(--zg-font-family);
+  font-size: var(--zg-font-size);
+  line-height: var(--zg-line-height);
+  color: var(--zg-text-primary);
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Viewport */
+.zg-viewport {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Scroll container */
+.zg-scroll-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
+}
+
+.zg-scroll-container::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+.zg-scroll-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.zg-scroll-container::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 6px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+}
+
+.zg-scroll-container::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.5);
+  background-clip: content-box;
+}
+
+/* Canvas (scroll area) */
+.zg-canvas {
+  position: relative;
+  pointer-events: none;
+}
+
+/* Cells container */
+.zg-cells {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: auto;
+}
+
+/* Cell base styles */
+.zg-cell {
+  position: absolute;
+  box-sizing: border-box;
+  border-right: 1px solid var(--zg-border-color);
+  border-bottom: 1px solid var(--zg-border-color);
+  padding: var(--zg-cell-padding-y) var(--zg-cell-padding-x);
+  display: flex;
+  align-items: center;
+  background: var(--zg-bg-primary);
+  color: var(--zg-text-primary);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  transition: background-color var(--zg-transition-fast);
+  cursor: default;
+}
+
+/* Cell states */
+.zg-cell:hover {
+  background: var(--zg-bg-hover);
+}
+
+.zg-cell-selected {
+  background: var(--zg-bg-selected) !important;
+  border-color: var(--zg-border-selected) !important;
+}
+
+.zg-cell-active {
+  border: 2px solid var(--zg-border-active) !important;
+  background: var(--zg-bg-active) !important;
+  z-index: 2;
+}
+
+.zg-cell-editing {
+  background: var(--zg-bg-editing) !important;
+  border: 2px solid var(--zg-border-editing) !important;
+  z-index: 3;
+}
+
+.zg-cell-readonly {
+  background: var(--zg-bg-secondary);
+  color: var(--zg-text-secondary);
+  cursor: not-allowed;
+}
+
+.zg-cell-disabled {
+  color: var(--zg-text-disabled);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Cell alignment */
+.zg-cell-align-left {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.zg-cell-align-center {
+  justify-content: center;
+  text-align: center;
+}
+
+.zg-cell-align-right {
+  justify-content: flex-end;
+  text-align: right;
+}
+
+/* Cell types */
+.zg-cell-number {
+  justify-content: flex-end;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.zg-cell-boolean {
+  justify-content: center;
+}
+
+.zg-cell-date {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Header cells */
+.zg-header-cell {
+  background: var(--zg-bg-secondary);
+  font-weight: 600;
+  border-bottom: 2px solid var(--zg-border-color);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.zg-header-cell:hover {
+  background: var(--zg-bg-hover);
+}
+
+/* Row header */
+.zg-row-header {
+  background: var(--zg-bg-secondary);
+  font-weight: 500;
+  text-align: center;
+  border-right: 2px solid var(--zg-border-color);
+  position: sticky;
+  left: 0;
+  z-index: 9;
+}
+
+/* Focus ring (keyboard navigation) */
+.zg-cell:focus,
+.zg-cell:focus-visible {
+  outline: var(--zg-focus-ring);
+  outline-offset: calc(-1 * var(--zg-focus-offset));
+  z-index: 4;
+}
+
+/* Selection highlight overlay */
+.zg-selection-overlay {
+  position: absolute;
+  pointer-events: none;
+  border: 2px solid var(--zg-border-selected);
+  background: var(--zg-bg-selected);
+  opacity: 0.3;
+  z-index: 1;
+}
+
+/* Loading state */
+.zg-grid.is-loading {
+  cursor: wait;
+  opacity: 0.7;
+}
+
+.zg-grid.is-loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 40px;
+  height: 40px;
+  margin: -20px 0 0 -20px;
+  border: 4px solid var(--zg-border-color);
+  border-top-color: var(--zg-border-active);
+  border-radius: 50%;
+  animation: zg-spin 0.8s linear infinite;
+}
+
+@keyframes zg-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* RTL support */
+[dir="rtl"] .zg-grid {
+  direction: rtl;
+}
+
+[dir="rtl"] .zg-cell {
+  border-right: none;
+  border-left: 1px solid var(--zg-border-color);
+}
+
+[dir="rtl"] .zg-cell-number {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+[dir="rtl"] .zg-row-header {
+  left: auto;
+  right: 0;
+  border-right: none;
+  border-left: 2px solid var(--zg-border-color);
+}
+
+/* Print styles */
+@media print {
+  .zg-scroll-container {
+    overflow: visible !important;
+  }
+
+  .zg-cell {
+    page-break-inside: avoid;
+  }
+
+  .zg-grid {
+    background: white !important;
+  }
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+  .zg-cell {
+    border-width: 2px;
+  }
+
+  .zg-cell-active,
+  .zg-cell-editing {
+    border-width: 3px;
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .zg-cell,
+  .zg-grid::after {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+/* Accessibility - Screen reader only */
+.zg-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}

package/dist/src/styles.css

@@ -0,0 +1,273 @@
+/**
+ * ZenGrid Core Styles (Community Edition)
+ * Minimal base styles for the grid
+ */
+
+:root {
+  /* Grid dimensions */
+  --zg-row-height: 30px;
+  --zg-header-height: 35px;
+  --zg-col-width: 100px;
+
+  /* Colors */
+  --zg-bg-color: #ffffff;
+  --zg-text-color: #000000;
+  --zg-border-color: #d0d0d0;
+  --zg-header-bg: #f5f5f5;
+  --zg-header-text: #333333;
+  --zg-selected-bg: #e3f2fd;
+  --zg-selected-border: #1976d2;
+  --zg-focus-ring: #1976d2;
+  --zg-hover-bg: #f0f0f0;
+
+  /* Spacing */
+  --zg-cell-padding: 4px 8px;
+  --zg-border-width: 1px;
+
+  /* Typography */
+  --zg-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --zg-font-size: 14px;
+  --zg-line-height: 1.5;
+}
+
+/* Grid container */
+.zg-grid {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: var(--zg-bg-color);
+  font-family: var(--zg-font-family);
+  font-size: var(--zg-font-size);
+  line-height: var(--zg-line-height);
+  color: var(--zg-text-color);
+}
+
+/* Viewport (scrollable area) */
+.zg-viewport {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  will-change: scroll-position;
+}
+
+/* Scroll container (defines virtual scroll area) */
+.zg-scroll-container {
+  position: relative;
+  pointer-events: none;
+}
+
+/* Cell container (holds visible cells) */
+.zg-cells {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: auto;
+}
+
+/* Individual cell */
+.zg-cell {
+  position: absolute;
+  box-sizing: border-box;
+  padding: var(--zg-cell-padding);
+  border-right: var(--zg-border-width) solid var(--zg-border-color);
+  border-bottom: var(--zg-border-width) solid var(--zg-border-color);
+  background: var(--zg-bg-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+}
+
+.zg-cell:hover {
+  background: var(--zg-hover-bg);
+}
+
+/* Selected cell */
+.zg-cell-selected {
+  background: var(--zg-selected-bg);
+  border: 2px solid var(--zg-selected-border);
+  z-index: 1;
+}
+
+/* Active/focused cell */
+.zg-cell-active {
+  outline: 2px solid var(--zg-focus-ring);
+  outline-offset: -2px;
+  z-index: 2;
+}
+
+/* Editing cell */
+.zg-cell-editing {
+  outline: 2px solid var(--zg-focus-ring);
+  background: var(--zg-bg-color);
+  z-index: 3;
+}
+
+.zg-cell-editing input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  outline: none;
+  padding: 0;
+  font: inherit;
+  background: transparent;
+}
+
+/* Headers */
+.zg-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--zg-header-bg);
+  color: var(--zg-header-text);
+  font-weight: 600;
+  border-bottom: 2px solid var(--zg-border-color);
+}
+
+.zg-header-cell {
+  position: absolute;
+  box-sizing: border-box;
+  padding: var(--zg-cell-padding);
+  border-right: var(--zg-border-width) solid var(--zg-border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.zg-header-cell:hover {
+  background: var(--zg-hover-bg);
+}
+
+/* Selection overlay */
+.zg-selection-overlay {
+  position: absolute;
+  pointer-events: none;
+  border: 2px solid var(--zg-selected-border);
+  background: transparent;
+  z-index: 5;
+}
+
+/* Focus ring (separate element for virtual scrolling) */
+.zg-focus-ring {
+  position: absolute;
+  pointer-events: none;
+  border: 2px solid var(--zg-focus-ring);
+  box-shadow: inset 0 0 0 1px #ffffff;
+  z-index: 6;
+}
+
+/* Loading indicator */
+.zg-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 100;
+}
+
+/* Accessibility - screen reader only */
+.zg-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* RTL support */
+.zg-grid[dir='rtl'] {
+  direction: rtl;
+}
+
+.zg-grid[dir='rtl'] .zg-cell {
+  border-right: none;
+  border-left: var(--zg-border-width) solid var(--zg-border-color);
+}
+
+/* Dark theme */
+.zg-grid.zg-theme-dark {
+  --zg-bg-color: #1e1e1e;
+  --zg-text-color: #ffffff;
+  --zg-border-color: #3e3e3e;
+  --zg-header-bg: #2d2d2d;
+  --zg-header-text: #ffffff;
+  --zg-selected-bg: #1a3a52;
+  --zg-hover-bg: #2d2d2d;
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+  .zg-grid {
+    --zg-border-color: #000000;
+    --zg-selected-border: #000000;
+  }
+}
+
+/* ===== Cell Renderers ===== */
+
+/* Number renderer */
+.zg-cell-number {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.zg-cell-negative {
+  color: #d32f2f;
+}
+
+/* Image renderer */
+.zg-cell-image {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+}
+
+.zg-cell-image__img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+/* Advanced cell renderer */
+.zg-cell-advanced {
+  overflow: hidden;
+}
+
+.zg-cell-advanced__icon {
+  flex-shrink: 0;
+}
+
+.zg-cell-advanced__text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zg-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 0.75em;
+  font-weight: 500;
+  background: var(--zg-badge-bg, #e0e0e0);
+  color: var(--zg-badge-color, #333);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .zg-grid * {
+    transition: none !important;
+    animation: none !important;
+  }
+}

package/dist/src/touch/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Touch support for ZenGrid
+ */
+export { TouchHandler } from './touch-handler';
+export type { TouchHandlerOptions, TouchGesture } from './touch-handler';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/touch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/core/src/touch/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}