vastgrid 0.0.0-stage → 0.1.0

package/dist/styles.css

@@ -0,0 +1,694 @@
+/*
+ * vastgrid styles. Every color, font and size is a custom property on `.vg-root`; override them in
+ * your own CSS (the canvas reads them, so changes apply to the cells as well). Colors use
+ * light-dark(), following the page's `color-scheme`.
+ */
+.vg-root {
+  --vg-font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
+  --vg-font-size: 13px;
+  --vg-row-height: 24px;
+  --vg-header-height: 32px;
+  --vg-radius: 6px;
+  --vg-bg: light-dark(#ffffff, #16161a);
+  --vg-fg: light-dark(#1f2328, #e6e6eb);
+  --vg-muted: light-dark(#656d76, #9a9aa6);
+  --vg-surface: light-dark(#ffffff, #1e1e24);
+  --vg-surface-muted: light-dark(#f6f8fa, #24242b);
+  --vg-border: light-dark(#d0d7de, #3a3a44);
+  --vg-header-bg: light-dark(#f6f8fa, #1d1d23);
+  --vg-header-fg: light-dark(#1f2328, #e6e6eb);
+  --vg-header-active-bg: light-dark(#eaeef2, #2b2b33);
+  --vg-gutter-bg: light-dark(#f6f8fa, #1b1b20);
+  --vg-gutter-fg: light-dark(#656d76, #8a8a96);
+  --vg-gutter-view-fg: light-dark(#0b57d0, #8ab4f8);
+  --vg-line: light-dark(#e6e9ed, #2a2a31);
+  --vg-line-strong: light-dark(#c8ced5, #3d3d47);
+  --vg-selection-bg: light-dark(rgb(11 87 208 / 12%), rgb(138 180 248 / 18%));
+  --vg-selection-border: light-dark(#0b57d0, #8ab4f8);
+  --vg-active-border: light-dark(#0b57d0, #8ab4f8);
+  --vg-accent: light-dark(#0b57d0, #8ab4f8);
+  --vg-accent-fg: light-dark(#ffffff, #0d1b33);
+  --vg-null-fg: light-dark(#8c959f, #6e6e7a);
+  --vg-placeholder: light-dark(#eef1f4, #26262d);
+  --vg-match-bg: light-dark(rgb(255 212 61 / 45%), rgb(255 212 61 / 28%));
+  --vg-error-fg: light-dark(#b42318, #ff8a80);
+  --vg-focus: light-dark(#0b57d0, #8ab4f8);
+  --vg-shadow: 0 8px 28px light-dark(rgb(31 35 40 / 18%), rgb(0 0 0 / 50%));
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+  background: var(--vg-bg);
+  color: var(--vg-fg);
+  font-family: var(--vg-font-family);
+  font-size: var(--vg-font-size);
+  line-height: 1.4;
+}
+
+.vg-root *,
+.vg-root *::before,
+.vg-root *::after {
+  box-sizing: border-box;
+}
+
+.vg-body {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.vg-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+}
+
+.vg-scroller {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+  outline: none;
+  overscroll-behavior: contain;
+  touch-action: pan-x pan-y;
+}
+
+.vg-scroller:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--vg-focus);
+}
+
+.vg-sizer {
+  pointer-events: none;
+}
+
+.vg-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Toolbar and status bar */
+
+.vg-toolbar,
+.vg-statusbar {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  background: var(--vg-header-bg);
+  border-bottom: 1px solid var(--vg-line-strong);
+}
+
+.vg-statusbar {
+  flex-wrap: nowrap;
+  min-height: 28px;
+  padding-block: 3px;
+  overflow: hidden;
+  color: var(--vg-muted);
+  font-size: 0.92em;
+  white-space: nowrap;
+  border-top: 1px solid var(--vg-line-strong);
+  border-bottom: none;
+}
+
+.vg-toolbar__search {
+  flex: 0 1 260px;
+  min-width: 140px;
+}
+
+.vg-toolbar__spacer {
+  flex: 1 1 auto;
+}
+
+.vg-toolbar__count {
+  color: var(--vg-muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.vg-statusbar__cell {
+  overflow: hidden;
+  color: var(--vg-fg);
+  text-overflow: ellipsis;
+}
+
+.vg-statusbar__muted,
+.vg-statusbar__note {
+  overflow: hidden;
+  color: var(--vg-muted);
+  text-overflow: ellipsis;
+}
+
+.vg-statusbar__summary {
+  display: flex;
+  gap: 14px;
+  font-variant-numeric: tabular-nums;
+}
+
+.vg-progress {
+  position: relative;
+  flex: none;
+  height: 2px;
+  overflow: hidden;
+  background: var(--vg-line);
+}
+
+.vg-progress > span {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: 0;
+  background: var(--vg-accent);
+  transition: width 200ms linear;
+}
+
+.vg-progress > span[data-indeterminate] {
+  width: 30%;
+  animation: vg-indeterminate 1.1s ease-in-out infinite;
+}
+
+@keyframes vg-indeterminate {
+  from {
+    left: -30%;
+  }
+  to {
+    left: 100%;
+  }
+}
+
+/* Controls */
+
+.vg-input {
+  min-height: 28px;
+  padding: 3px 8px;
+  color: var(--vg-fg);
+  font: inherit;
+  background: var(--vg-surface);
+  border: 1px solid var(--vg-border);
+  border-radius: var(--vg-radius);
+}
+
+.vg-input:focus-visible {
+  outline: 2px solid var(--vg-focus);
+  outline-offset: -1px;
+}
+
+.vg-input:disabled {
+  opacity: 0.6;
+}
+
+.vg-button,
+.vg-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  padding: 3px 10px;
+  color: var(--vg-fg);
+  font: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  background: var(--vg-surface);
+  border: 1px solid var(--vg-border);
+  border-radius: var(--vg-radius);
+}
+
+.vg-icon-button {
+  min-width: 28px;
+  padding: 0 6px;
+  border-color: transparent;
+  background: transparent;
+}
+
+.vg-button:hover:not(:disabled),
+.vg-icon-button:hover:not(:disabled) {
+  background: var(--vg-header-active-bg);
+}
+
+.vg-button:focus-visible,
+.vg-icon-button:focus-visible,
+.vg-chip__remove:focus-visible,
+.vg-menu__item:focus-visible {
+  outline: 2px solid var(--vg-focus);
+  outline-offset: -2px;
+}
+
+.vg-button:disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+
+.vg-button--small {
+  min-height: 26px;
+  padding: 2px 8px;
+}
+
+.vg-button--primary {
+  color: var(--vg-accent-fg);
+  background: var(--vg-accent);
+  border-color: var(--vg-accent);
+}
+
+.vg-button--primary:hover:not(:disabled) {
+  background: var(--vg-accent);
+  filter: brightness(1.08);
+}
+
+.vg-chip {
+  display: inline-flex;
+  align-items: center;
+  max-width: 320px;
+  min-height: 26px;
+  padding: 1px 2px 1px 9px;
+  background: var(--vg-surface);
+  border: 1px solid var(--vg-border);
+  border-radius: 999px;
+}
+
+.vg-chip > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vg-chip--filter {
+  border-color: var(--vg-accent);
+}
+
+.vg-chip__remove {
+  flex: none;
+  width: 22px;
+  height: 22px;
+  margin-left: 2px;
+  padding: 0;
+  color: var(--vg-muted);
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: 999px;
+}
+
+.vg-chip__remove:hover {
+  color: var(--vg-fg);
+  background: var(--vg-header-active-bg);
+}
+
+/* Messages over the grid */
+
+.vg-message {
+  position: absolute;
+  inset: 40% 16px auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  color: var(--vg-muted);
+  text-align: center;
+  pointer-events: none;
+}
+
+.vg-message button {
+  pointer-events: auto;
+}
+
+.vg-root[data-status="error"] .vg-message {
+  color: var(--vg-error-fg);
+}
+
+.vg-toast {
+  position: absolute;
+  bottom: 12px;
+  left: 50%;
+  max-width: calc(100% - 32px);
+  padding: 6px 12px;
+  color: var(--vg-bg);
+  background: var(--vg-fg);
+  border-radius: var(--vg-radius);
+  box-shadow: var(--vg-shadow);
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+/* Find */
+
+.vg-find {
+  position: absolute;
+  top: calc(var(--vg-header-height) + 6px);
+  right: 18px;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px;
+  background: var(--vg-surface);
+  border: 1px solid var(--vg-border);
+  border-radius: var(--vg-radius);
+  box-shadow: var(--vg-shadow);
+}
+
+.vg-find .vg-input {
+  width: 200px;
+}
+
+.vg-find__status {
+  min-width: 0;
+  padding: 0 4px;
+  color: var(--vg-muted);
+  font-size: 0.92em;
+  white-space: nowrap;
+}
+
+.vg-find__case {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 4px;
+  color: var(--vg-muted);
+  cursor: pointer;
+}
+
+/* Popovers, menus and panels */
+
+.vg-popover {
+  position: absolute;
+  z-index: 10;
+  min-width: 200px;
+  max-width: min(420px, calc(100% - 8px));
+  max-height: calc(100% - 8px);
+  overflow: auto;
+  color: var(--vg-fg);
+  background: var(--vg-surface);
+  border: 1px solid var(--vg-border);
+  border-radius: var(--vg-radius);
+  box-shadow: var(--vg-shadow);
+}
+
+.vg-popover--panel {
+  width: 300px;
+  padding: 10px;
+}
+
+.vg-popover--wide {
+  width: min(560px, calc(100% - 8px));
+}
+
+.vg-menu {
+  padding: 4px;
+}
+
+.vg-menu__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+  min-height: 30px;
+  padding: 4px 10px;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: calc(var(--vg-radius) - 2px);
+}
+
+.vg-menu__item:hover:not(:disabled),
+.vg-menu__item:focus-visible {
+  background: var(--vg-header-active-bg);
+}
+
+.vg-menu__item:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.vg-menu__item[aria-checked="true"]::after {
+  content: "✓";
+  color: var(--vg-accent);
+}
+
+.vg-menu__item kbd {
+  color: var(--vg-muted);
+  font: inherit;
+  font-size: 0.9em;
+}
+
+.vg-menu__separator {
+  margin: 4px 6px;
+  border: none;
+  border-top: 1px solid var(--vg-line);
+}
+
+.vg-panel__title {
+  margin: 0 0 8px;
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.vg-panel__muted {
+  margin: 6px 0 0;
+  color: var(--vg-muted);
+  font-weight: 400;
+}
+
+.vg-panel__error {
+  margin: 6px 0 0;
+  color: var(--vg-error-fg);
+}
+
+.vg-panel__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 10px;
+}
+
+.vg-filter,
+.vg-columns {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.vg-filter > .vg-input,
+.vg-columns > .vg-input {
+  width: 100%;
+}
+
+.vg-filter__values {
+  min-inline-size: 0;
+  max-height: 260px;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  border: 1px solid var(--vg-line);
+  border-radius: var(--vg-radius);
+}
+
+.vg-check {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 26px;
+  padding: 2px 8px;
+  cursor: pointer;
+}
+
+.vg-check:hover {
+  background: var(--vg-header-active-bg);
+}
+
+.vg-check--all {
+  border-bottom: 1px solid var(--vg-line);
+}
+
+.vg-check__label {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vg-check__count {
+  flex: none;
+  color: var(--vg-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.vg-filter__condition {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 4px 0 0;
+  padding: 0;
+  border: none;
+}
+
+.vg-filter__condition legend {
+  margin-bottom: 4px;
+  padding: 0;
+  color: var(--vg-muted);
+}
+
+.vg-filter__condition .vg-input {
+  flex: 1 1 120px;
+  min-width: 0;
+}
+
+.vg-stats__list {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 3px 12px;
+  margin: 0;
+}
+
+.vg-stats__list dt {
+  color: var(--vg-muted);
+}
+
+.vg-stats__list dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.vg-stats__histogram,
+.vg-stats__top {
+  margin: 12px 0 0;
+}
+
+.vg-stats__histogram figcaption,
+.vg-stats__top figcaption {
+  margin-bottom: 6px;
+  color: var(--vg-muted);
+}
+
+.vg-stats__bars {
+  display: flex;
+  align-items: flex-end;
+  gap: 1px;
+  height: 64px;
+  border-bottom: 1px solid var(--vg-line-strong);
+}
+
+.vg-stats__bar {
+  flex: 1 1 0;
+  min-width: 2px;
+  background: var(--vg-accent);
+  border-radius: 2px 2px 0 0;
+  opacity: 0.8;
+}
+
+.vg-stats__axis {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 2px;
+  color: var(--vg-muted);
+  font-size: 0.85em;
+  font-variant-numeric: tabular-nums;
+}
+
+.vg-stats__top ul {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.vg-stats__top li {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 2px 6px;
+}
+
+.vg-stats__top-bar {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: var(--vg-selection-bg);
+  border-radius: 3px;
+}
+
+.vg-stats__top-label {
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vg-stats__top-count {
+  position: relative;
+  color: var(--vg-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.vg-inspector__value {
+  max-height: min(50vh, 420px);
+  margin: 0;
+  padding: 8px;
+  overflow: auto;
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
+  font-size: 0.95em;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  background: var(--vg-surface-muted);
+  border-radius: var(--vg-radius);
+}
+
+.vg-inspector__value[data-null] {
+  color: var(--vg-null-fg);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vg-progress > span {
+    transition: none;
+  }
+
+  .vg-progress > span[data-indeterminate] {
+    left: 0;
+    width: 100%;
+    opacity: 0.5;
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .vg-root {
+    --vg-bg: Canvas;
+    --vg-fg: CanvasText;
+    --vg-muted: GrayText;
+    --vg-surface: Canvas;
+    --vg-header-bg: Canvas;
+    --vg-header-fg: CanvasText;
+    --vg-gutter-bg: Canvas;
+    --vg-gutter-fg: CanvasText;
+    --vg-gutter-view-fg: LinkText;
+    --vg-line: GrayText;
+    --vg-line-strong: CanvasText;
+    --vg-selection-bg: transparent;
+    --vg-selection-border: Highlight;
+    --vg-active-border: Highlight;
+    --vg-accent: Highlight;
+    --vg-focus: Highlight;
+  }
+}

package/dist/text.d.ts

@@ -0,0 +1,14 @@
+/** Measures and shortens text for one font, caching results because the same strings repeat a lot. */
+export declare class TextFitter {
+    private readonly context;
+    readonly font: string;
+    private readonly widths;
+    private readonly fits;
+    private ellipsisWidth;
+    constructor(context: CanvasRenderingContext2D, font: string);
+    /** Width of `text`. The caller must have set `context.font` to this fitter's font. */
+    width(text: string): number;
+    /** `text`, shortened with "…" to fit in `maxWidth`. */
+    fit(text: string, maxWidth: number): string;
+}
+//# sourceMappingURL=text.d.ts.map

package/dist/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../src/text.ts"],"names":[],"mappings":"AAGA,sGAAsG;AACtG,qBAAa,UAAU;IAMnB,OAAO,CAAC,QAAQ,CAAC,OAAO;IACxB,QAAQ,CAAC,IAAI,EAAE,MAAM;IANvB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA6B;IACpD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAA6B;IAClD,OAAO,CAAC,aAAa,CAAM;IAE3B,YACmB,OAAO,EAAE,wBAAwB,EACzC,IAAI,EAAE,MAAM,EACnB;IAEJ,sFAAsF;IACtF,KAAK,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAQ1B;IAED,uDAAuD;IACvD,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CA2B1C;CACF"}